/* ==========================================================================
   Q1Store — superfície: PAINEL
   --------------------------------------------------------------------------
   DONO: o agente que trabalha `app/Views/dashboard/{reviews,catalog,commerce}/**`
   e o `layouts/dashboard.php`.

   POR QUE ESTE ARQUIVO EXISTE, E NÃO SÓ O `q1store-ds.css`

   O design system (`q1store-ds.css`) é a FUNDAÇÃO e é lido por todos, escrito
   por ninguém durante o trabalho paralelo. Quatro frentes escrevendo no mesmo
   arquivo ao mesmo tempo se atropelam, e o resultado é CSS perdido sem aviso.

   Aqui vive o que é específico de PAINEL: tabela densa, barra de filtros,
   gaveta lateral, KPI, timeline de pedido, os estados vazios das telas de
   módulo, e a derivada de DARK MODE — que o DS não define, porque as imagens
   de referência são claras e o agente que criou o DS preferiu não chutar.

   REGRAS (as mesmas do DS):
     - todo valor de MARCA vem de `var(--q1s-*)`; NUNCA hex dentro de regra;
     - se falta um token, crie o TOKEN, não o valor solto;
     - sem `@import`, sem `url()` externo, sem CDN.
   EXCEÇÃO DOCUMENTADA: o `@media print` trava a peça em tinta sobre branco
   com literais (#fff, #111827, #9ca3af, #081b44, #6b7280) de propósito — no
   papel não há dark mode nem token a remapear, e o fundo precisa ser branco
   real mesmo com o painel em dark. São 5 literais, só no print.

   ATENÇÃO: `layouts/dashboard.php` é compartilhado por TODOS os módulos da
   plataforma. O que este arquivo carrega não pode depender de marca — o painel
   é da plataforma, e uma mudança aqui afeta CRM, Billing, Analytics e Health.

   DECISÃO DE ESCOPO (relatório §1): o painel NÃO resolve marca — nenhuma rota
   de dashboard passa por SiteResolver, `head.php` nunca recebe `$site` no
   painel, e o <body> é sempre `ch-shell`. Então o DS vale como linguagem do
   PRODUTO: `q1s-ds` entra no <body> do layout para TODAS as telas, e as telas
   dos três módulos usam `q1s-*` em vez de `ch-*`.

   DARK MODE (decisão do agente de painel — relatório §4): o DS foi lido de
   imagens claras e não definiu tokens escuros. Em vez de reescrever a paleta,
   este arquivo DERIVA o dark por remapeamento: sob
   `html[data-bs-theme="dark"] body.q1s-ds` (o atributo que o core.js alterna
   no <html>) os tokens de superfície/texto/borda do DS apontam para os
   equivalentes `--ch-*` escuros do core.css. O primário continua `#0060fc`
   (marca não muda no escuro), mas fundos e textos acompanham o painel.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Dark mode derivado: superfícies, textos e bordas seguem o core escuro.
   O primário/sucesso/aviso/erro/info e os pastéis continuam os do DS claro:
   todos passam em contraste sobre fundo escuro (ver relatório §4).
   -------------------------------------------------------------------------- */
/* O seletor ancora no <html> porque é lá que o core.js escreve o atributo. */
html[data-bs-theme="dark"] body.q1s-ds {
    --q1s-surface: var(--ch-surface);
    --q1s-surface-alt: var(--ch-surface-2);
    --q1s-surface-sunken: var(--ch-surface-2);
    --q1s-text-primary: var(--ch-text-primary);
    --q1s-text-secondary: var(--ch-text-secondary);
    --q1s-text-muted: var(--ch-text-secondary);
    --q1s-border: var(--ch-border);
    --q1s-border-strong: var(--ch-border);
    --q1s-header-bg: color-mix(in srgb, var(--ch-surface) 88%, transparent);
    --q1s-shadow-1: var(--ch-shadow-sm);
    --q1s-shadow-2: var(--ch-shadow);
    --q1s-shadow-3: var(--ch-shadow-lg);
    --q1s-input-bg: var(--ch-surface);
}

/* --------------------------------------------------------------------------
   2. Componentes compartilhados: as duas classes convivem no mesmo nó
   (`ch-card q1s-card`, `ch-empty q1s-empty`…). Fora do painel o DS não casa e
   vale o core; no painel (body.q1s-ds) as regras abaixo vencem por
   especificidade — mesma medida, cores e raios da marca. Nenhuma outra tela
   muda: sem `q1s-ds` no body, nada aqui casa.
   -------------------------------------------------------------------------- */

/* Cartão: 16px e primário suave no lugar de 14px/#3b5bfd. */
body.q1s-ds .q1s-card {
    border-radius: var(--q1s-radius-card);
    border-color: var(--q1s-border);
}

body.q1s-ds .q1s-card__title {
    color: var(--q1s-text-primary);
}

body.q1s-ds .q1s-page-head__title {
    color: var(--q1s-text-primary);
}

body.q1s-ds .q1s-page-head__sub {
    color: var(--q1s-text-secondary);
}

/* KPI sobre o ch-metric: mesma caixa, tipografia e tile da marca. */
body.q1s-ds .q1s-kpi {
    padding: 0;
    border: 0;
    box-shadow: none;
    background: transparent;
}

body.q1s-ds .q1s-kpi .ch-metric {
    gap: var(--q1s-space-4);
}

body.q1s-ds .q1s-kpi__label {
    color: var(--q1s-text-muted);
}

body.q1s-ds .q1s-kpi__value {
    color: var(--q1s-text-primary);
}

body.q1s-ds .q1s-kpi__value a:hover {
    color: var(--q1s-primary);
}

body.q1s-ds .q1s-kpi__hint {
    color: var(--q1s-text-secondary);
}

/* Estado vazio: tile pastel + título da marca. */
body.q1s-ds .q1s-empty__icon {
    background: var(--q1s-primary-soft);
    color: var(--q1s-primary);
}

body.q1s-ds .q1s-empty__title {
    color: var(--q1s-text-primary);
}

body.q1s-ds .q1s-empty__text {
    color: var(--q1s-text-secondary);
}

/* Erro inline: o alerta warning na voz do DS. */
body.q1s-ds .q1s-alert--warning {
    background: var(--q1s-warning-soft);
    border-color: var(--q1s-warning);
    color: var(--q1s-text-primary);
}

body.q1s-ds .q1s-text-secondary {
    color: var(--q1s-text-secondary);
}

/* --------------------------------------------------------------------------
   2b. Shell: o layout continua core.css. Ajustes aditivos, só no painel
   Q1Store, que não mudam medida nem cor de nenhuma outra tela:
   -------------------------------------------------------------------------- */

/* Foco visível na identidade da marca (o core usa --ch-primary). */
body.q1s-ds :focus-visible {
    outline-color: var(--q1s-primary);
}

/* Marca da sidebar no primário Q1Store, mantendo geometria do core. */
body.q1s-ds .ch-brand-mark {
    background: var(--q1s-primary);
}

/* Link ativo da navegação no primário Q1Store, mesma forma do core. */
body.q1s-ds .ch-nav-link.active {
    background: var(--q1s-primary);
    box-shadow: 0 8px 20px -12px var(--q1s-primary);
}

/* Gráficos (Chart.js) leem --ch-*: espelha o primário para os widgets do
   painel herdarem a marca sem tocar no JS. */
body.q1s-ds {
    --ch-primary: var(--q1s-primary);
    --ch-primary-rgb: 0, 96, 252;
}

/* O <details> de edição de categoria usa <summary> como botão: sem o
   marcador padrão, que quebraria o alinhamento com os outros ghost. */
body.q1s-ds details > summary.q1s-btn {
    list-style: none;
}

body.q1s-ds details > summary.q1s-btn::-webkit-details-marker {
    display: none;
}

/* Paginação do Bootstrap no painel: página ativa no primário Q1Store. */
body.q1s-ds .pagination .page-link {
    color: var(--q1s-primary);
    border-color: var(--q1s-border);
}

body.q1s-ds .pagination .page-link:hover {
    color: var(--q1s-primary-hover);
    background: var(--q1s-primary-soft);
    border-color: var(--q1s-border);
}

body.q1s-ds .pagination .page-item.active .page-link {
    color: var(--q1s-on-primary);
    background: var(--q1s-primary);
    border-color: var(--q1s-primary);
}

body.q1s-ds .pagination .page-link:focus-visible {
    outline: 2px solid var(--q1s-primary);
    outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   3. Formulários do painel sobre o DS.
   `input[type="color"]` do Bootstrap dentro de seção do DS, erro de
   validação sob o campo, e os dois componentes do Bootstrap que as telas dos
   três módulos ainda usam (switches e checkboxes de `form-check`, grupos com
   botão ao lado de `input-group`): só cor e raio da marca, mesma medida.
   -------------------------------------------------------------------------- */
body.q1s-ds .q1s-form-section .form-check-input:checked {
    background-color: var(--q1s-primary);
    border-color: var(--q1s-primary);
}

body.q1s-ds .q1s-form-section .form-check-input:focus {
    border-color: var(--q1s-primary);
    box-shadow: 0 0 0 3px var(--q1s-primary-soft-2);
}

body.q1s-ds .q1s-form-section .form-check-input:focus-visible {
    outline: 2px solid var(--q1s-primary);
    outline-offset: 2px;
}

body.q1s-ds .input-group .q1s-input {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

body.q1s-ds .input-group .q1s-input:focus {
    z-index: 3;
}

body.q1s-ds .input-group .q1s-btn {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    margin-left: -1px;
}

body.q1s-ds .q1s-form-section .form-control-color {
    width: 3rem;
    height: var(--q1s-control-h);
    padding: var(--q1s-space-1);
    border: 1px solid var(--q1s-border);
    border-radius: var(--q1s-radius-input);
    background: var(--q1s-input-bg);
}

body.q1s-ds .q1s-field-error {
    margin-top: var(--q1s-space-2);
}

/* --------------------------------------------------------------------------
   4. `data-stack` é o apelido do painel para o `--stack` do DS.
   As views do painel escrevem `data-stack`; o DS só conhece `--stack`. Esta
   regra repete o comportamento de cartão-no-mobile para o apelido — mesma
   medida, mesmos tokens. (Outro agente é dono do DS; renomear lá seria
   conflito. Ver relatório §6.)
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
    body.q1s-ds .q1s-table[data-stack] { border-collapse: separate; border-spacing: 0 var(--q1s-space-3); }

    body.q1s-ds .q1s-table[data-stack] thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

    body.q1s-ds .q1s-table[data-stack] tbody tr {
        display: block;
        padding: var(--q1s-space-3) var(--q1s-space-4);
        border: 1px solid var(--q1s-border);
        border-radius: var(--q1s-radius-card);
        background: var(--q1s-surface);
        box-shadow: var(--q1s-shadow-1);
    }

    body.q1s-ds .q1s-table[data-stack] tbody tr:hover { background: var(--q1s-surface); }

    body.q1s-ds .q1s-table[data-stack] tbody td {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: var(--q1s-space-4);
        padding: var(--q1s-space-2) 0;
        border: 0;
        text-align: right;
    }

    body.q1s-ds .q1s-table[data-stack] tbody td::before {
        content: attr(data-label);
        flex: 0 0 auto;
        color: var(--q1s-text-muted);
        font-size: var(--q1s-fs-caption);
        font-weight: var(--q1s-fw-semibold);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        text-align: left;
    }

    body.q1s-ds .q1s-table[data-stack] tbody td[data-label=""]::before,
    body.q1s-ds .q1s-table[data-stack] tbody td:not([data-label])::before { display: none; }

    body.q1s-ds .q1s-table[data-stack] tbody td[data-numeric] { text-align: right; }

    body.q1s-ds .q1s-table[data-stack] tbody td:first-child { border-bottom: 1px solid var(--q1s-border); padding-bottom: var(--q1s-space-3); }

    body.q1s-ds .q1s-table--dense[data-stack] tbody tr {
        margin-bottom: var(--q1s-space-3);
    }
}

/* --------------------------------------------------------------------------
   5. Peça impressa: no papel, só a peça.
   A folha de impressão esconde o shell inteiro e trava a peça em tinta sobre
   branco — mesmo que o painel esteja em dark na hora de imprimir. Sem isso o
   navegador levaria sidebar e fundo escuro para o papel.
   -------------------------------------------------------------------------- */
@media print {
    body.q1s-ds .ch-sidebar,
    body.q1s-ds .ch-header,
    body.q1s-ds .ch-backdrop,
    body.q1s-ds .ch-breadcrumbs,
    body.q1s-ds .ch-page-header,
    body.q1s-ds [data-flash-region],
    body.q1s-ds .btn,
    body.q1s-ds .q1s-btn,
    body.q1s-ds .q1s-no-print {
        display: none !important;
    }

    body.q1s-ds .ch-main {
        margin: 0 !important;
    }

    body.q1s-ds .ch-content {
        padding: 0 !important;
    }

    /* Tinta sobre branco, sempre: a peça é de parede, não de tela. */
    body.q1s-ds .q1s-print-sheet {
        background: #fff !important;
        color: #111827 !important;
        border: 2px dashed #9ca3af !important;
        box-shadow: none !important;
        border-radius: 12px;
    }

    /* A cor do tenant NÃO viaja no style inline: o CSP do painel bloqueia
       `style` sem nonce, e o <article> da peça não tem nonce. O acento cai no
       navy padrão da peça — mesma cor do primário do DS. */
    body.q1s-ds .q1s-print-sheet__brand {
        color: #081b44 !important;
    }

    body.q1s-ds .q1s-print-sheet__qr {
        background: #fff !important;
    }

    body.q1s-ds .q1s-print-sheet__url {
        color: #6b7280 !important;
    }
}

/* --------------------------------------------------------------------------
   6. Movimento reduzido: o skeleton do DS respeita a preferência do usuário.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    body.q1s-ds .q1s-skeleton { animation: none; }
}