/* ============================================================
   Metas Comerciais — Componentes visuais padronizados
   ============================================================ */

/* ---- Tipografia ---- */
h1, .text-h1 { font-size: 22px; font-weight: 800; color: var(--color-text); line-height: 1.25; }
h2, .text-h2 { font-size: 18px; font-weight: 800; color: var(--color-text); line-height: 1.3; }
h3, .text-h3 { font-size: 16px; font-weight: 700; color: var(--color-text); line-height: 1.35; }
.text-body { font-size: 14px; line-height: 1.5; color: var(--color-text); }
.text-small { font-size: 12px; color: var(--color-muted); line-height: 1.45; }
.text-money {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
}

/* ---- Cards ---- */
.app-card,
.card-section {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 20px 24px;
  margin-bottom: 18px;
}

.app-card__title,
.card-section__title {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 4px;
}

.app-card__subtitle,
.card-section__subtitle {
  font-size: 13px;
  color: var(--color-muted);
  margin: 0 0 16px;
  line-height: 1.45;
}

.app-subcard,
.card-subsection {
  background: var(--color-surface-soft);
  border: 1px solid var(--color-border-soft);
  border-radius: 14px;
  padding: 16px;
  box-shadow: none;
}

.header-strip {
  background: var(--header-strip);
  color: var(--color-text);
  border-bottom: 1px solid var(--color-border);
  font-weight: 700;
}

/* Meta da Loja — cards alinhados ao DS */
.sg-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 20px 24px;
  margin-bottom: 0;
}

.sg-card-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text);
}

.sg-card-sub {
  font-size: 13px;
  color: var(--color-muted);
  margin-bottom: 16px;
}

/* ---- Botões ---- */
button,
.primary-action,
.secondary-action,
.danger-action,
.btn-primary,
.btn-secondary,
.btn-ghost,
.btn-danger {
  font-family: inherit;
  font-size: 14px;
  line-height: 1.2;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
}

.primary-action,
.btn-primary {
  background: var(--color-primary);
  color: #FFFFFF;
  border: 1px solid var(--color-primary);
  border-radius: 10px;
  padding: 10px 16px;
  font-weight: 700;
}

.primary-action:hover,
.btn-primary:hover {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
}

.secondary-action,
.btn-secondary {
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid #D6DEE8;
  border-radius: 10px;
  padding: 10px 16px;
  font-weight: 600;
}

.secondary-action:hover,
.btn-secondary:hover {
  background: var(--color-surface-soft);
  border-color: var(--color-border-strong);
}

.btn-ghost,
.sg-btn-ghost {
  background: transparent;
  color: var(--color-text-soft);
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 10px 16px;
  font-weight: 600;
  opacity: 1;
}

.btn-ghost:hover,
.sg-btn-ghost:hover {
  background: var(--color-surface-muted);
  color: var(--color-text);
}

.danger-action,
.btn-danger {
  background: var(--color-surface);
  color: var(--color-danger);
  border: 1px solid #F3C6C6;
  border-radius: 10px;
  padding: 10px 16px;
  font-weight: 600;
}

.danger-action:hover,
.btn-danger:hover {
  background: #FEF2F2;
  border-color: #FECACA;
}

.btn-sm,
.sg-btn-sm,
.compact-action {
  padding: 7px 11px;
  font-size: 13px;
  border-radius: 9px;
  min-height: auto;
}

/* ---- Formulários ---- */
label {
  display: grid;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-label);
}

input,
select,
textarea {
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  color: var(--color-text);
  border-radius: 10px;
  min-height: 42px;
  padding: 9px 12px;
  font-size: 14px;
  box-shadow: none;
  width: 100%;
  transition: border-color 0.15s, box-shadow 0.15s;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-ring);
  outline: none;
}

input:disabled,
select:disabled,
textarea:disabled,
input[readonly],
select[readonly],
textarea[readonly] {
  background: var(--color-surface-soft);
  color: #475569;
  border-color: var(--color-border);
  cursor: not-allowed;
}

/* Meta da Loja — inputs específicos */
.goal-input,
.sg-input {
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  color: var(--color-text);
  border-radius: 10px;
  min-height: 38px;
  padding: 8px 12px;
  font-size: 14px;
}

.goal-input:focus,
.sg-input:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-ring);
}

.goal-input[readonly],
.sg-input[readonly] {
  background: var(--color-surface-soft);
  color: #475569;
}

.sg-read-value {
  background: var(--color-surface-soft);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  min-height: 38px;
  padding: 8px 12px;
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.sg-currency-prefix,
.sg-pct-suffix {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-muted);
}

.sg-input-money,
.sg-input-pct,
.sg-read-value {
  text-align: right;
}

/* ---- Tabelas ---- */
.table-wrap {
  border-radius: 14px;
  overflow-x: auto;
  overflow-y: hidden;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--color-surface);
  border-radius: 0;
  border: none;
  overflow: hidden;
}

.data-table th,
.data-table td {
  padding: 12px;
  text-align: left;
  font-size: 14px;
  border-bottom: 1px solid #EEF2F7;
}

.data-table th {
  background: var(--color-surface-soft);
  color: var(--color-text-soft);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--color-border);
}

.data-table td {
  color: var(--color-text);
  background: var(--color-surface);
}

.data-table tbody tr:nth-child(even) td {
  background: #FCFDFE;
}

.data-table tbody tr:hover td {
  background: #F8FBFF;
}

.data-table tfoot td,
.data-table tr.total td {
  background: var(--color-surface-muted);
  font-weight: 800;
  color: var(--color-text);
}

.sg-compact-table thead th {
  background: var(--color-surface-soft);
  color: var(--color-text-soft);
  font-weight: 800;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.sg-compact-table tfoot td {
  background: var(--color-surface-muted);
  font-weight: 800;
}

/* ---- Badges e status ---- */
.badge,
.status-badge,
.status-pill,
.sg-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  border: 1px solid transparent;
  white-space: nowrap;
}

/* Status de ciclo */
.status-pill.draft,
.badge.draft,
.status-badge.draft { background: #EAF2FF; color: #2563EB; border-color: #BFDBFE; }
.status-pill.published,
.badge.published,
.badge.ok,
.status-badge.success,
.status-badge.published { background: #E3F5EC; color: var(--color-success); border-color: #A7F3D0; }
.status-pill.closed,
.badge.closed,
.status-badge.closed { background: var(--color-surface-muted); color: var(--color-text-soft); border-color: var(--color-border); }
.status-pill.reopened,
.badge.reopened { background: #FDF3DF; color: var(--color-warning); border-color: #FDE68A; }
.badge.pending,
.status-badge.warning,
.status-badge.pending { background: #FDF3DF; color: var(--color-warning); border-color: #FDE68A; }
.badge.error,
.status-badge.error { background: #FCE6E6; color: var(--color-danger); border-color: #FECACA; }
.badge.info,
.status-badge.info { background: #E0F2FE; color: var(--color-text-soft); border-color: #BAE6FD; }
.badge.active,
.status-badge.active { background: #E3F5EC; color: var(--color-success); }
.badge.inactive,
.status-badge.inactive { background: var(--color-surface-muted); color: var(--color-muted); }

/* Níveis */
.badge.bronze, .sg-badge-ok.sg-lv-bronze { background: rgba(var(--bronze-rgb), 0.12); color: var(--bronze-text); border-color: rgba(var(--bronze-rgb), 0.25); }
.badge.prata { background: rgba(var(--prata-rgb), 0.15); color: var(--prata-text); border-color: rgba(var(--prata-rgb), 0.3); }
.badge.ouro { background: rgba(var(--ouro-rgb), 0.15); color: var(--ouro-text); border-color: rgba(var(--ouro-rgb), 0.3); }
.badge.diamante { background: rgba(var(--diam-rgb), 0.12); color: var(--diam-text); border-color: rgba(var(--diam-rgb), 0.25); }

.sg-badge-ok { background: #E3F5EC; color: var(--color-success); border: 1px solid #A7F3D0; }
.sg-badge-warn { background: #FDF3DF; color: var(--color-warning); border: 1px solid #FDE68A; }
.sg-badge-info { background: #E0F2FE; color: var(--color-text-soft); border: 1px solid #BAE6FD; }
.sg-badge-neutral { background: var(--color-surface-muted); color: var(--color-text-soft); border: 1px solid var(--color-border); }

/* Apuração — níveis */
.sr-level-none { background: var(--color-surface-muted); color: var(--color-muted); }
.sr-level-bronze { background: rgba(var(--bronze-rgb), 0.12); color: var(--bronze-text); }
.sr-level-prata { background: rgba(var(--prata-rgb), 0.15); color: var(--prata-text); }
.sr-level-ouro { background: rgba(var(--ouro-rgb), 0.15); color: var(--ouro-text); }
.sr-level-diamante { background: rgba(var(--diam-rgb), 0.12); color: var(--diam-text); }

.sr-status-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}

.sr-status-draft { background: var(--color-surface-muted); color: var(--color-muted); }
.sr-status-closed { background: #E3F5EC; color: var(--color-success); }
.sr-status-reopened { background: #FDF3DF; color: var(--color-warning); }
.sr-status-pending { background: #FDF3DF; color: var(--color-warning); }

/* ---- Cards de níveis (Meta da Loja) ---- */
.sg-level-card {
  border: 1px solid var(--color-border);
  border-radius: 14px;
  overflow: hidden;
  background: var(--color-surface);
  box-shadow: var(--shadow-soft);
}

.sg-level-head {
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 800;
  text-align: center;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.sg-lv-bronze .sg-level-head { background: var(--color-bronze); color: #fff; }
.sg-lv-prata .sg-level-head { background: var(--color-prata); color: var(--color-text); }
.sg-lv-ouro .sg-level-head { background: var(--color-ouro); color: var(--color-text); }
.sg-lv-diamante .sg-level-head { background: var(--color-diamante); color: var(--color-text); }

.sg-level-body {
  padding: 14px;
  background: #FCFDFE;
}

.sg-level-value {
  font-size: 18px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

/* ---- Etapas do mês ---- */
.sg-stage-card {
  border: 1px solid var(--color-border);
  border-radius: 14px;
  overflow: hidden;
  background: var(--color-surface);
  box-shadow: var(--shadow-soft);
}

.sg-stage-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: var(--color-surface-soft);
  border-bottom: 1px solid var(--color-border);
}

.sg-stage-no {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text);
}

.sg-stage-days {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  color: var(--color-text-soft);
  background: #E0F2FE;
  border: 1px solid #BAE6FD;
}

.sg-stage-card-grid {
  padding: 16px;
  gap: 12px;
}

/* ---- Empty states ---- */
.empty-state {
  display: block;
  text-align: center;
  color: var(--color-muted);
  font-size: 14px;
  padding: 28px 20px;
  line-height: 1.5;
}

td.empty-state {
  padding: 32px 20px;
}

.app-empty-state {
  background: var(--color-surface);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-lg);
  padding: 32px 24px;
  text-align: center;
  color: var(--color-muted);
}

.app-empty-state__title {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 8px;
}

.app-empty-state__text {
  font-size: 14px;
  margin: 0 0 16px;
  line-height: 1.5;
}

/* ---- Alertas / mensagens ---- */
.form-message {
  min-height: 1.2rem;
  margin-top: 12px;
  font-size: 13px;
}

.form-message.success {
  color: var(--color-success);
  background: #ECFDF5;
  border: 1px solid #A7F3D0;
  border-radius: var(--radius-md);
  padding: 10px 12px;
}

.form-message.error {
  color: var(--color-danger);
  background: #FEF2F2;
  border: 1px solid #FECACA;
  border-radius: var(--radius-md);
  padding: 10px 12px;
}

.form-message.info {
  color: var(--color-text-soft);
  background: var(--color-surface-soft);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 10px 12px;
}

.app-toast {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left-width: 4px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-popover);
  padding: 12px 14px;
  font-size: 14px;
  color: var(--color-text);
}

.app-toast--success { border-left-color: var(--color-success); }
.app-toast--error { border-left-color: var(--color-danger); }
.app-toast--warning { border-left-color: var(--color-warning); }
.app-toast--info { border-left-color: var(--color-info); }

.sg-alert {
  background: #FEF2F2;
  color: #B91C1C;
  border: 1px solid #FECACA;
  border-radius: var(--radius-md);
  padding: 10px 14px;
  font-size: 13px;
}

.sg-error-panel {
  background: #FEF2F2;
  border: 1px solid #FECACA;
  border-radius: var(--radius-md);
  padding: 12px 14px;
}

.sg-error-panel p {
  color: #B91C1C;
}

.sg-base-hint {
  background: var(--color-surface-soft);
  border: 1px solid var(--color-border-soft);
  color: var(--color-muted);
  border-radius: var(--radius-md);
  padding: 8px 12px;
  font-size: 13px;
}

/* ---- Modais ---- */
.cm-modal-backdrop {
  background: rgba(15, 23, 42, 0.36);
}

.cm-modal-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 20px 24px;
  box-shadow: var(--shadow-popover);
}

.cm-modal-card h3 {
  font-size: 18px;
  font-weight: 800;
  color: var(--color-text);
  margin: 0 0 8px;
}

.cm-modal-sub {
  font-size: 13px;
  color: var(--color-muted);
  margin-bottom: 16px;
}

.cm-pick-item {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 10px 12px;
}

.cm-pick-item:hover {
  background: var(--color-surface-soft);
}

.cm-form-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 16px;
}

/* ---- Toolbar Meta da Loja ---- */
.sg-toolbar {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  padding: 14px 16px;
  gap: 12px;
  margin-bottom: 16px;
}

.sg-toolbar-field {
  font-size: 12px;
  color: var(--color-label);
  font-weight: 600;
}

.sg-summary-card {
  background: #FCFDFE;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 12px 14px;
}

.sg-summary-label {
  font-size: 11px;
  color: var(--color-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.sg-summary-value {
  font-size: 15px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.sg-step-no {
  background: #E0F2FE;
  color: var(--color-accent);
  width: 24px;
  height: 24px;
}

/* ---- Subcards de módulos ---- */
.mv-seller-card,
.sr-seller-card,
.sr-cycle-card,
.pb-percent-card,
.cycles-history-card,
.mv-dist-card,
.cm-assign-row {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  box-shadow: var(--shadow-soft);
}

.mv-mode-btn,
.mv-tab {
  background: var(--color-surface);
  border: 1px solid #D6DEE8;
  color: var(--color-muted);
  border-radius: 10px;
  min-height: 36px;
  font-weight: 600;
}

.mv-mode-btn.is-active,
.mv-tab.is-active {
  background: var(--sidebar-active-bg);
  border-color: var(--sidebar-active-border);
  color: var(--sidebar-active-text);
  font-weight: 700;
}

.mv-dist-card {
  background: var(--color-surface-soft);
}

.sg-prize-card {
  background: var(--color-surface);
  border-radius: 14px;
  box-shadow: var(--shadow-soft);
}

.panel-heading h2,
.panel-heading h3 {
  margin: 0;
}

/* ---- Diffs e hints residuais ---- */
.sg-diff-ok { color: var(--color-success); font-weight: 700; }
.sg-diff-warn { color: var(--color-warning); font-weight: 700; }

.mv-store-hint {
  background: #FFFBEB;
  border: 1px solid #FDE68A;
  color: #92400E;
  border-radius: var(--radius-md);
  padding: 10px 12px;
  font-size: 13px;
}

#empresas .btn-dashboard-primary,
.btn-dashboard-primary {
  background: var(--color-primary);
  color: #fff;
  border: 1px solid var(--color-primary);
  border-radius: 10px;
  padding: 10px 16px;
  font-weight: 700;
  cursor: pointer;
}

#empresas .btn-dashboard-primary:hover,
.btn-dashboard-primary:hover {
  background: var(--color-primary-hover);
}

#empresas .emp-form-panel,
#empresas .emp-list-panel {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

#empresas .emp-section {
  background: var(--color-surface-soft);
  border: 1px solid var(--color-border-soft);
  border-radius: 14px;
}

#empresas tr.is-selected td {
  background: var(--sidebar-active-bg) !important;
}

/* Dashboard buttons */
.btn-dashboard-primary {
  background: var(--color-primary);
  color: #fff;
  border: 1px solid var(--color-primary);
  border-radius: 10px;
  padding: 10px 16px;
  font-weight: 700;
}

.btn-dashboard-primary:hover {
  background: var(--color-primary-hover);
}

#dashboard .dash-filters,
#dashboard .dash-section,
#dashboard .dash-kpi-grid article,
#dashboard .dash-next-action {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

/* Checkbox labels */
.checkbox-label {
  color: var(--color-label);
  font-weight: 600;
}

/* Grid spacing global */
.metric-grid,
.stage-grid,
.form-grid,
.sg-grid,
.sg-workspace {
  gap: 16px;
}

.sg-workspace {
  display: grid;
}

/* Level row highlights — suaves */
.sg-compact-table .sg-lv-bronze,
.sg-summary-card.sg-lv-bronze,
.mv-summary-row.sg-lv-bronze,
.fs-final-row.sg-lv-bronze {
  background: rgba(var(--bronze-rgb), 0.08);
}

.sg-compact-table .sg-lv-prata,
.sg-summary-card.sg-lv-prata,
.mv-summary-row.sg-lv-prata,
.fs-final-row.sg-lv-prata {
  background: rgba(var(--prata-rgb), 0.1);
}

.sg-compact-table .sg-lv-ouro,
.sg-summary-card.sg-lv-ouro,
.mv-summary-row.sg-lv-ouro,
.fs-final-row.sg-lv-ouro {
  background: rgba(var(--ouro-rgb), 0.1);
}

.sg-compact-table .sg-lv-diamante,
.sg-summary-card.sg-lv-diamante,
.mv-summary-row.sg-lv-diamante,
.fs-final-row.sg-lv-diamante {
  background: rgba(var(--diam-rgb), 0.08);
}

.sg-summary-card.sg-lv-bronze { border-left: 3px solid var(--color-bronze); }
.sg-summary-card.sg-lv-prata { border-left: 3px solid var(--color-prata); }
.sg-summary-card.sg-lv-ouro { border-left: 3px solid var(--color-ouro); }
.sg-summary-card.sg-lv-diamante { border-left: 3px solid var(--color-diamante); }

.usr-companies-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  max-height: 160px;
  overflow-y: auto;
}

.usr-companies-list label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--color-text);
}

.usr-companies-list input[type="checkbox"] {
  width: 16px;
  height: 16px;
  min-height: 0;
  flex-shrink: 0;
}

.usr-companies-list .empty-state {
  font-size: 0.85rem;
  color: var(--color-muted);
}