/* =============================================================
   Vendas Pay — TEMA V2 "Enxuto"
   -------------------------------------------------------------
   Camada de SOBREPOSIÇÃO. Carregada por Util/p-header.php depois de
   tokens/base/components/dark, só quando o admin escolhe este tema
   em /admin-config (ver Util/p-tema.php).

   Nenhuma regra daqui é pré-requisito de layout: apagar este arquivo
   devolve o sistema ao V1 inteiro, sem tela quebrada.

   Linguagem do tema:
     · trilho de navegação laranja sólido, conteúdo em fundo neutro
     · sombra quase zero — quem separa as superfícies é a borda de 1px
     · cartão com faixa de cor no topo em vez de ícone grande colorido
     · raio contido (14px), respiro maior, menos elementos concorrendo

   ── CONVENÇÃO DE ESCOPO (importante pra manter) ──────────────
   O modo claro/escuro continua sendo do usuário. Então:
     · regra de FORMA (raio, espaçamento, layout) → [data-vp-tema="v2"]
     · regra de COR do claro  → [data-vp-tema="v2"]:not([data-theme="dark"])
     · ajuste do escuro       → [data-vp-tema="v2"][data-theme="dark"]
   O dark.css usa !important em vários pontos e carrega ANTES deste
   arquivo; onde for preciso vencer, use html[data-vp-tema="v2"] (uma
   especificidade acima) em vez de espalhar !important.
   ============================================================= */

/* =============================================================
   1. TOKENS — forma (vale nos dois modos)
   ============================================================= */
:root[data-vp-tema="v2"] {
  /* Raio: escala mais contida e uniforme que a do V1 */
  --r-xs:   8px;
  --r-sm:   10px;
  --r-md:   14px;
  --r-lg:   16px;
  --r-xl:   20px;

  /* O trilho encosta no conteúdo (sem moldura em volta do corpo) — é o
     que dá a leitura de "app" em vez de "página dentro de página". */
  --sidebar-gap: 0px;
  --sidebar-w:   268px;

  /* Cores próprias do trilho de navegação. Ficam aqui em cima porque o
     laranja do trilho é o mesmo nos dois modos: é a marca, não o fundo. */
  --t2-rail:        linear-gradient(180deg, #f0681e 0%, #de5a10 100%);
  --t2-rail-fg:     #fff;
  --t2-rail-dim:    rgba(255, 255, 255, .78);
  --t2-rail-hover:  rgba(255, 255, 255, .14);
  --t2-rail-line:   rgba(255, 255, 255, .22);
  --t2-rail-act-bg: #fff;
  --t2-rail-act-fg: #d1530b;
}

/* =============================================================
   2. TOKENS — cores do modo claro
   ============================================================= */
:root[data-vp-tema="v2"]:not([data-theme="dark"]) {
  /* Neutros sem viés azul: o azul do V1 disputava com o laranja da marca */
  --vp-n50:            #fafafa;
  --vp-n100:           #f4f4f5;
  --vp-n200:           #e9eaec;
  --vp-n300:           #d6d8dc;
  --vp-n400:           #9ba1a9;
  --vp-n500:           #6b7280;
  --vp-n600:           #4b5563;
  --vp-n700:           #333a44;
  --vp-n800:           #1f242c;
  --vp-n900:           #12151a;

  --vp-bg:             #f6f7f8;
  --vp-bg-elevated:    #f1f2f4;
  --vp-surface:        #ffffff;
  --vp-surface-alt:    #fafafa;
  --vp-surface-soft:   #f4f4f5;
  --vp-border:         #e9eaec;
  --vp-border-strong:  #d6d8dc;
  --vp-text:           #12151a;
  --vp-text-muted:     #6b7280;

  /* Sombra some quase por completo — a borda é que desenha o cartão */
  --sh-xs:   0 1px 2px rgba(16, 24, 40, .04);
  --sh-card: 0 1px 3px rgba(16, 24, 40, .06), 0 1px 2px rgba(16, 24, 40, .04);
  --sh-pop:  0 16px 40px rgba(16, 24, 40, .14), 0 4px 12px rgba(16, 24, 40, .06);
  --sh-fab:  0 8px 20px rgba(var(--vp-primary-rgb), .24);
}

/* =============================================================
   3. TOKENS — ajustes do modo escuro
   O dark.css já resolve as superfícies; aqui só neutralizamos o azul
   e aliviamos a sombra pra casar com a mesma linguagem.
   ============================================================= */
:root[data-vp-tema="v2"][data-theme="dark"] {
  --vp-bg:             #101216;
  --vp-bg-elevated:    #16191f;
  --vp-surface:        #181c22;
  --vp-surface-alt:    #1e222a;
  --vp-surface-soft:   #16191f;
  --vp-border:         #282d36;
  --vp-border-strong:  #39404b;
  --vp-text:           #e8eaed;
  --vp-text-muted:     #9096a1;

  --sh-xs:   0 1px 2px rgba(0, 0, 0, .40);
  --sh-card: 0 1px 3px rgba(0, 0, 0, .45);
  --sh-pop:  0 20px 50px rgba(0, 0, 0, .60);
}

/* =============================================================
   4. FUNDO E ESTRUTURA
   ============================================================= */
/* Fora os dois brilhos radiais laranja do V1: eles tingiam o topo de toda
   página e eram a maior fonte de "peso" visual. Fundo chapado. */
[data-vp-tema="v2"] body {
  background: var(--vp-bg);
}

@media (min-width: 768px) {
  /* Sem a moldura de 20px em volta do corpo — o respiro passa a ser o
     padding do .container, e o trilho encosta no conteúdo. */
  [data-vp-tema="v2"] body:has(.vp-sidebar) {
    padding: 0 0 0 var(--sidebar-w);
  }
  [data-vp-tema="v2"] main.container,
  [data-vp-tema="v2"] main {
    padding-bottom: var(--sp-10);
  }

  /* O conteúdo ocupa toda a largura disponível ao lado do trilho.
     No V1 o .container trava em --layout-max (1360px) e se centraliza —
     em monitor grande sobravam ~140px mortos de cada lado enquanto o
     cabeçalho ia até a borda, e a página lia como uma coluna solta.
     Quem dá o respiro lateral passa a ser só o padding do .container.

     Restrito ao shell privado (`body:has(.vp-sidebar)`): as telas públicas
     — login, cobrança compartilhada, /status — vivem de medida de leitura
     centralizada e continuam como estão. */
  [data-vp-tema="v2"] body:has(.vp-sidebar) main.container,
  [data-vp-tema="v2"] body:has(.vp-sidebar) > .container {
    max-width: none;
  }
}

/* =============================================================
   5. TRILHO DE NAVEGAÇÃO (sidebar desktop)
   Laranja sólido nos dois modos: é a assinatura do tema.
   ============================================================= */
@media (min-width: 768px) {
  html[data-vp-tema="v2"] .vp-sidebar {
    background: var(--t2-rail) !important;
    border-right: 0;
    padding: 20px 14px 14px;
    gap: 4px;

    /* Redefinição dos tokens DENTRO do trilho.
       O p-topo.php escreve estilo inline usando estas variáveis (barra de
       cota, indicador de saúde). Estilo inline vence qualquer seletor, então
       tentar sobrescrever a cor lá fora não funcionaria — o caminho é trocar
       o valor da variável no escopo do trilho e deixar o inline continuar
       lendo a variável certa sozinho. Vale pra qualquer coisa nova que
       entrar na sidebar depois. */
    --vp-text:          #fff;
    --vp-text-muted:    rgba(255, 255, 255, .78);
    --vp-border:        rgba(255, 255, 255, .28);
    --vp-border-strong: rgba(255, 255, 255, .40);
    --vp-primary:       #fff;
    --vp-n100:          rgba(255, 255, 255, .14);
    --vp-n700:          #fff;
    /* Semáforo de saúde: sobre laranja, verde/âmbar chapados somem.
       Versões claras mantêm o sinal legível. */
    --vp-success:       #7ff0bb;
    --vp-warning:       #ffd88a;
    --vp-warn:          #ffd88a;
    --vp-danger-100:    rgba(255, 255, 255, .18);
  }

  /* Logo: sobre laranja, sempre a versão branca — nos dois modos. */
  html[data-vp-tema="v2"] .vp-sidebar__brand img.vp-logo--light { display: none; }
  html[data-vp-tema="v2"] .vp-sidebar__brand img.vp-logo--dark  { display: block; }
  [data-vp-tema="v2"] .vp-sidebar__brand { padding: 2px 6px 6px; justify-content: flex-start; }
  [data-vp-tema="v2"] .vp-sidebar__brand img { max-width: 138px; }
  [data-vp-tema="v2"] .vp-sidebar__brand-panel { margin-bottom: var(--sp-4); }

  /* O rótulo "Navegação" vira uma marca d'água discreta */
  html[data-vp-tema="v2"] .vp-sidebar__section-label {
    color: rgba(255, 255, 255, .55);
    padding: 0 10px;
    margin-bottom: 8px;
  }

  /* A lista de destinos rola quando o menu é longo (admin tem 20 itens). Sobre
     o laranja, a barra de rolagem padrão vira um risco branco gritante. */
  html[data-vp-tema="v2"] .vp-sidebar__nav {
    gap: 2px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .32) transparent;
  }
  html[data-vp-tema="v2"] .vp-sidebar__nav::-webkit-scrollbar { width: 6px; }
  html[data-vp-tema="v2"] .vp-sidebar__nav::-webkit-scrollbar-track { background: transparent; }
  html[data-vp-tema="v2"] .vp-sidebar__nav::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .30);
    border-radius: 9999px;
  }
  html[data-vp-tema="v2"] .vp-sidebar__link {
    color: var(--t2-rail-fg);
    font-size: 14px;
    font-weight: 500;
    padding: 10px 12px;
    border-radius: 11px;
    gap: 13px;
  }
  html[data-vp-tema="v2"] .vp-sidebar__link:hover {
    background: var(--t2-rail-hover);
    color: var(--t2-rail-fg);
  }
  html[data-vp-tema="v2"] .vp-sidebar__link-ic { color: var(--t2-rail-dim); }

  /* Item ativo: pastilha branca cheia. A barrinha lateral do V1 sai —
     sobre o laranja ela sumiria, e a pastilha já é sinal suficiente. */
  html[data-vp-tema="v2"] .vp-sidebar__link.is-active {
    background: var(--t2-rail-act-bg);
    color: var(--t2-rail-act-fg);
    font-weight: 700;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .10);
  }
  html[data-vp-tema="v2"] .vp-sidebar__link.is-active::before { display: none; }
  html[data-vp-tema="v2"] .vp-sidebar__link.is-active .vp-sidebar__link-ic {
    color: var(--t2-rail-act-fg);
  }

  /* Rodapé do trilho: tudo em branco translúcido sobre o laranja */
  html[data-vp-tema="v2"] .vp-sidebar__meta {
    border-top: 1px solid var(--t2-rail-line);
    padding-top: 12px;
  }
  html[data-vp-tema="v2"] .vp-sidebar__logout,
  html[data-vp-tema="v2"] .vp-theme-toggle,
  html[data-vp-tema="v2"] .vp-sidebar__version {
    color: rgba(255, 255, 255, .82);
  }
  html[data-vp-tema="v2"] .vp-sidebar__logout:hover {
    background: rgba(255, 255, 255, .16);
    color: #fff;
  }
  html[data-vp-tema="v2"] .vp-theme-toggle:hover { background: rgba(255, 255, 255, .16); }
  html[data-vp-tema="v2"] .vp-sidebar__version { opacity: .7; }
}

/* =============================================================
   6. CABEÇALHO DA PÁGINA (appbar desktop / topbar mobile)
   ============================================================= */
@media (min-width: 768px) {
  [data-vp-tema="v2"] .vp-appbar {
    padding-top: 16px;
    padding-bottom: 14px;
    margin-bottom: var(--sp-5);
    border-bottom: 1px solid var(--vp-border);
    background: var(--vp-surface);
  }
  /* Saudação com o peso de título de página — é o único cabeçalho fixo
     que toda tela tem, então ele carrega a hierarquia do topo. */
  [data-vp-tema="v2"] .vp-appbar__hi {
    font-size: 22px;
    font-weight: 600;
    color: var(--vp-text);
    letter-spacing: -.02em;
  }
  [data-vp-tema="v2"] .vp-appbar__hi strong { font-weight: 800; }
  [data-vp-tema="v2"] .vp-appbar__sub { font-size: 13px; margin-top: 1px; }
  [data-vp-tema="v2"] .vp-appbar__bell { border-radius: 50%; }
}

[data-vp-tema="v2"] .vp-topbar {
  border-bottom: 1px solid var(--vp-border);
  box-shadow: none;
}

/* =============================================================
   7. CARTÕES
   ============================================================= */
[data-vp-tema="v2"] .vp-card {
  border-radius: var(--r-md);
  box-shadow: none;
  padding: var(--sp-5);
}
[data-vp-tema="v2"] .vp-card--hover:hover,
[data-vp-tema="v2"] a.vp-card:hover,
[data-vp-tema="v2"] .vp-card--interactive:hover {
  box-shadow: var(--sh-card);
  transform: none;
}
[data-vp-tema="v2"] .vp-card__title {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.01em;
}

/* O .vp-form-section do V1 tem gradiente e borda azulada fixos no CSS
   (não em token) — aqui vira superfície chapada como o resto. */
[data-vp-tema="v2"] .vp-form-section {
  background: var(--vp-surface);
  border-color: var(--vp-border);
  border-radius: var(--r-md);
  box-shadow: none;
}

/* =============================================================
   8. KPI — faixa de cor no topo
   A cor sai do modificador que a página já usa no ícone
   (.vp-kpi__icon.is-success etc.), via :has(). Sem :has() suportado,
   o cartão só fica sem a faixa — nada quebra.
   ============================================================= */
[data-vp-tema="v2"] .vp-kpi {
  border-radius: var(--r-md);
  box-shadow: none;
  padding: 18px var(--sp-5) var(--sp-5);
  gap: 6px;
  /* Rótulo, valor e nota andam juntos no topo. O space-between do V1
     empurrava a nota pro rodapé e abria um vão morto no meio do cartão. */
  justify-content: flex-start;
  min-height: 112px;
}
[data-vp-tema="v2"] .vp-kpi:hover {
  transform: none;
  box-shadow: var(--sh-card);
}
[data-vp-tema="v2"] .vp-kpi::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--vp-primary);
}
[data-vp-tema="v2"] .vp-kpi:has(> .vp-kpi__icon.is-success)::before { background: var(--vp-success); }
[data-vp-tema="v2"] .vp-kpi:has(> .vp-kpi__icon.is-warn)::before    { background: var(--vp-warn); }
[data-vp-tema="v2"] .vp-kpi:has(> .vp-kpi__icon.is-info)::before    { background: var(--vp-info); }
[data-vp-tema="v2"] .vp-kpi:has(> .vp-kpi__icon.is-danger)::before  { background: var(--vp-danger); }

/* Ícone deixa de ser bloco grande e vira marcador redondo discreto:
   com a faixa colorida no topo, dois sinais de cor do mesmo tamanho
   competiriam. */
[data-vp-tema="v2"] .vp-kpi__icon {
  top: 16px;
  right: var(--sp-5);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 0;
}
[data-vp-tema="v2"] .vp-kpi__icon .vp-icon { width: 16px; height: 16px; }
[data-vp-tema="v2"] .vp-kpi__label {
  font-size: 11px;
  letter-spacing: .08em;
  font-weight: 700;
  padding-right: 48px;
}
[data-vp-tema="v2"] .vp-kpi__value {
  font-size: 27px;
  letter-spacing: -.03em;
  margin-top: 4px;
}
@media (min-width: 768px) { [data-vp-tema="v2"] .vp-kpi__value { font-size: 25px; } }

/* =============================================================
   9. BOTÕES
   ============================================================= */
[data-vp-tema="v2"] .vp-btn {
  border-radius: var(--r-sm);
  font-weight: 600;
  min-height: 42px;
}
/* Sem o brilho laranja do V1: a cor cheia já basta como ação principal */
[data-vp-tema="v2"] .vp-btn--primary,
[data-vp-tema="v2"] .vp-btn--primary:hover {
  box-shadow: none;
}
[data-vp-tema="v2"] .vp-btn--secondary {
  border-color: var(--vp-border-strong);
}
[data-vp-tema="v2"] .vp-btn--sm { min-height: 36px; border-radius: var(--r-xs); }
[data-vp-tema="v2"] .vp-btn--lg { min-height: 50px; }

/* =============================================================
   10. CAMPOS
   ============================================================= */
[data-vp-tema="v2"] .vp-input,
[data-vp-tema="v2"] input[type="text"],
[data-vp-tema="v2"] input[type="email"],
[data-vp-tema="v2"] input[type="tel"],
[data-vp-tema="v2"] input[type="number"],
[data-vp-tema="v2"] input[type="date"],
[data-vp-tema="v2"] input[type="password"],
[data-vp-tema="v2"] input[type="search"],
[data-vp-tema="v2"] select,
[data-vp-tema="v2"] textarea {
  border-radius: var(--r-sm);
}

/* =============================================================
   11. CABEÇALHO DE PÁGINA / ABAS / SELOS
   ============================================================= */
/* O fundo/borda do botão "voltar" era rgba() branco cravado; virou token no
   components.css (conserta o V1 no escuro também), então aqui não precisa de
   nada além do hover. */
[data-vp-tema="v2"] .vp-page-header__back:hover {
  background: var(--vp-surface-alt);
  border-color: var(--vp-border-strong);
}
[data-vp-tema="v2"] .vp-page-header__title {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -.03em;
}
[data-vp-tema="v2"] .vp-page-header { margin-bottom: var(--sp-5); }

[data-vp-tema="v2"] .vp-badge {
  border-radius: var(--r-pill);
  font-weight: 600;
}

/* =============================================================
   12. LISTAS E LINHAS DE REGISTRO
   Separador fino no lugar de cartão por linha: lista longa (cobranças,
   extrato) fica mais rápida de varrer.
   ============================================================= */
[data-vp-tema="v2"] .cob-list { gap: 0; }
[data-vp-tema="v2"] .cob-list .cob-row {
  border: 0;
  border-bottom: 1px solid var(--vp-border);
  border-radius: 0;
  box-shadow: none;
  padding: 12px var(--sp-2);
}
[data-vp-tema="v2"] .cob-list .cob-row:last-child { border-bottom: 0; }
[data-vp-tema="v2"] .cob-row:hover,
[data-vp-tema="v2"] .cob-row--estatico:hover {
  transform: none;
  box-shadow: none;
  background: var(--vp-surface-soft);
}
/* Linha solta (fora de uma .cob-list) continua sendo cartão — só perde o
   relevo, como todo cartão do tema. */
[data-vp-tema="v2"] .cob-row { box-shadow: none; border-radius: var(--r-sm); }

/* =============================================================
   13. MODAIS, BANNERS, ALERTAS
   ============================================================= */
[data-vp-tema="v2"] .vp-modal-box { border-radius: var(--r-lg); box-shadow: var(--sh-pop); }
[data-vp-tema="v2"] .vp-banner,
[data-vp-tema="v2"] .vp-alert { border-radius: var(--r-sm); }

/* =============================================================
   14. NAVEGAÇÃO MOBILE
   O trilho laranja não existe no celular (a sidebar some abaixo de
   768px) — aqui a assinatura do tema é a barra branca de borda fina.
   ============================================================= */
[data-vp-tema="v2"] .vp-bottomnav {
  border-top: 1px solid var(--vp-border);
  box-shadow: none;
}

/* =============================================================
   15. IMPRESSÃO
   O tema é de tela. No papel valem as regras de impressão do
   components.css — nada daqui pode vazar.
   ============================================================= */
@media print {
  [data-vp-tema="v2"] .vp-card,
  [data-vp-tema="v2"] .vp-kpi { box-shadow: none; }
  [data-vp-tema="v2"] .vp-kpi::before { display: none; }
}