/* ============================================================
   App Shell — casca compartilhada das telas admin/parceiro (lote 2)
   Mesmo cabecalho, KPI, card, filtro e seletor de periodo do
   Painel de Vendas, para as telas que hoje usam .dashboard-title.
   Tudo em tokens --dash-* (css/dashboard.css): sai certo no claro
   e no escuro sem nenhum hex. Linkado no index.html.
   Uso: ver receita em cada bloco. Nao redefinir estas classes em JS.
   ============================================================ */

/* ---- Cabecalho de pagina (kicker + titulo + subtitulo) ----
   <div class="app-head">
     <p class="app-head-kicker">KICKER</p>
     <h1 class="app-head-title">Titulo</h1>
     <p class="app-head-sub">Uma linha explicando a tela.</p>
   </div> */
.app-head {
    margin-bottom: 24px;
}

.app-head-kicker {
    margin: 0 0 4px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--dash-pink-strong);
}

.app-head-title {
    margin: 0;
    font-size: 24px;
    font-weight: 650;
    letter-spacing: -0.025em;
    line-height: 1.2;
    color: var(--dash-ink);
}

.app-head-sub {
    margin: 4px 0 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--dash-muted);
}

/* ---- Card base (mesmo fundo/borda/raio/sombra do dashboard) ---- */
.app-card {
    background: var(--dash-surface);
    border: 1px solid var(--dash-border);
    border-radius: 12px;
    box-shadow: var(--dash-shadow);
    padding: 24px;
}

/* ---- KPIs ----
   <div class="app-kpi-grid">
     <div class="app-kpi">
       <div class="app-kpi-label">ROTULO</div>
       <div class="app-kpi-value">R$ 1,2 mil</div>
       <div class="app-kpi-sub">opcional, 10px apagado</div>
     </div>
   </div> */
.app-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.app-kpi {
    background: var(--dash-surface);
    border: 1px solid var(--dash-border);
    border-radius: 12px;
    box-shadow: var(--dash-shadow);
    padding: 16px 24px;
}

.app-kpi-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--dash-muted);
}

.app-kpi-value {
    font-family: "JetBrains Mono", Consolas, monospace;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--dash-ink);
    font-variant-numeric: tabular-nums;
    margin: 4px 0 2px;
}

.app-kpi-sub {
    font-size: 10px;
    color: var(--dash-muted);
}

/* ---- Botoes de filtro (desenho do seletor 7d/30d/90d) ----
   <button class="app-filter-btn active">Pendentes</button> */
.app-filter-btn {
    padding: 8px 16px;
    border-radius: 10px;
    border: 1px solid var(--dash-border);
    background: var(--dash-surface-muted);
    font-size: 12px;
    font-weight: 600;
    font-family: inherit;
    color: var(--dash-muted);
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.app-filter-btn:hover {
    border-color: var(--dash-pink);
    color: var(--dash-pink-strong);
}

.app-filter-btn.active {
    background: var(--dash-surface);
    border-color: var(--dash-border);
    color: var(--dash-pink-strong);
    box-shadow: var(--dash-shadow);
}

/* ---- Select de periodo (mesma familia do seletor do dashboard) ---- */
.app-period-select {
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid var(--dash-border);
    background: var(--dash-surface-muted);
    font-size: 12px;
    font-weight: 600;
    font-family: inherit;
    color: var(--dash-ink);
    cursor: pointer;
}

.app-period-select:focus-visible {
    outline: 2px solid var(--dash-pink-strong);
    outline-offset: 2px;
}

/* ---- Tabela de dados (mesmo desenho da dash-table do Painel) ----
   <table class="app-table">...</table> */
.app-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.app-table th {
    font-size: 10px;
    font-weight: 400;
    color: var(--dash-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--dash-border);
    text-align: left;
}

.app-table td {
    font-size: 12px;
    color: var(--dash-ink);
    padding: 14px 16px;
    border-bottom: 1px solid var(--dash-border-soft);
}

.app-table tbody tr { transition: background-color 120ms ease; }
.app-table tbody tr:hover { background: var(--dash-surface-muted); }
.app-table th:not(:first-child),
.app-table td:not(:first-child) { text-align: right; }
.app-table tr:last-child td { border-bottom: none; }

/* ---- Rotulo pequeno junto a filtros/seletores ---- */
.app-control-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--dash-muted);
}

@media (max-width: 760px) {
    .app-head-title { font-size: 21px; }
}

/* ---- Estados semanticos compartilhados (claro/escuro) ---- */
:root,
html[data-theme="light"] {
    --app-state-ok-bg: #d1fae5;
    --app-state-ok-fg: #065f46;
    --app-state-ok-hover: #a7f3d0;
    --app-state-warn-bg: #fef3c7;
    --app-state-warn-fg: #92400e;
    --app-state-warn-hover: #fde68a;
    --app-state-err-bg: #fee2e2;
    --app-state-err-fg: #991b1b;
    --app-state-err-hover: #fecaca;
    --app-state-info-bg: #dbeafe;
    --app-state-info-fg: #1e40af;
    --app-state-info-hover: #bfdbfe;
    --app-state-neutral-bg: #f3f4f6;
    --app-state-neutral-fg: #374151;
    --app-state-neutral-hover: #e5e7eb;
    --app-state-accent-bg: #fce7f3;
    --app-state-accent-fg: #9d174d;
    --app-state-accent-hover: #fbcfe8;
}

html[data-theme="dark"] {
    --app-state-ok-bg: #123d32;
    --app-state-ok-fg: #86efac;
    --app-state-ok-hover: #185344;
    --app-state-warn-bg: #493719;
    --app-state-warn-fg: #fde68a;
    --app-state-warn-hover: #604820;
    --app-state-err-bg: #4b2025;
    --app-state-err-fg: #fca5a5;
    --app-state-err-hover: #632a31;
    --app-state-info-bg: #1d3358;
    --app-state-info-fg: #bfdbfe;
    --app-state-info-hover: #294677;
    --app-state-neutral-bg: #2d3038;
    --app-state-neutral-fg: #d1d5db;
    --app-state-neutral-hover: #3a3e48;
    --app-state-accent-bg: #4a263b;
    --app-state-accent-fg: #f9a8d4;
    --app-state-accent-hover: #60304c;
}

.app-badge,
.app-state { background: var(--app-state-neutral-bg); color: var(--app-state-neutral-fg); }
.app-badge--ok,
.app-state--ok { background: var(--app-state-ok-bg); color: var(--app-state-ok-fg); }
.app-badge--warn,
.app-state--warn { background: var(--app-state-warn-bg); color: var(--app-state-warn-fg); }
.app-badge--err,
.app-state--err { background: var(--app-state-err-bg); color: var(--app-state-err-fg); }
.app-badge--info,
.app-state--info { background: var(--app-state-info-bg); color: var(--app-state-info-fg); }
.app-badge--neutral,
.app-state--neutral { background: var(--app-state-neutral-bg); color: var(--app-state-neutral-fg); }
.app-badge--accent,
.app-state--accent { background: var(--app-state-accent-bg); color: var(--app-state-accent-fg); }

.app-state-border--ok { border-color: var(--app-state-ok-hover); }
.app-state-border--warn { border-color: var(--app-state-warn-hover); }
.app-state-border--err { border-color: var(--app-state-err-hover); }
.app-state-border--info { border-color: var(--app-state-info-hover); }
.app-state-border--accent { border-color: var(--app-state-accent-hover); }