/* ==========================================================================
   Tema do sistema: 2 modos (Claro / Escuro) x 5 cores de acento.

   - Modo (superfícies): :root[data-theme="light"] vs padrão escuro
     (:root:not([data-theme="light"])). Alternado pelo #theme-toggle.
   - Cor de acento: :root[data-accent="magenta|azul|esmeralda|violeta|ambar"],
     escolhida em Configurações > Aparência. Padrão: magenta.

   Todas as cores de marca derivam de --brand/--brand-dark/--accent-2 (via
   color-mix), então trocar o acento repinta o sistema inteiro de forma
   coerente, nos dois modos.
   ========================================================================== */

/* Tons derivados do acento (recalculados quando --brand muda) */
:root {
  --brand-soft: color-mix(in srgb, var(--brand) 60%, #ffffff);
  --brand-text: color-mix(in srgb, var(--brand) 26%, #cbc4d6);
  --brand-t08: color-mix(in srgb, var(--brand) 8%, transparent);
  --brand-t10: color-mix(in srgb, var(--brand) 10%, transparent);
  --brand-t12: color-mix(in srgb, var(--brand) 12%, transparent);
  --brand-t14: color-mix(in srgb, var(--brand) 14%, transparent);
  --brand-t16: color-mix(in srgb, var(--brand) 16%, transparent);
  --brand-t22: color-mix(in srgb, var(--brand) 22%, transparent);
}

/* ============================ Tokens por modo =========================== */
:root:not([data-theme="light"]) {
  --brand: #e0559b;
  --brand-dark: #b83a78;
  --accent-2: #b95cf0;
  --ink: #f4eef8;
  --muted: #b1a6c0;
  --line: rgba(200, 170, 220, .16);
  --surface: color-mix(in srgb, var(--brand) 7%, #17131f);
  --surface-glass: color-mix(in srgb, var(--brand) 8%, rgba(28, 22, 40, .72));
  --sidebar: #140f1d;
  --dark: #140f1d;
  --danger: #ff6b6b;
  --warning: #f2b13c;
  --success: #35d69b;
  --shadow: 0 16px 40px rgba(0, 0, 0, .5);
  --bg-0: #0b0912;
}
:root[data-theme="light"] {
  --brand: #c02d78;
  --brand-dark: #9d2160;
  --accent-2: #8b3fd0;
  --ink: #241026;
  --muted: #6b5a6f;
  --line: color-mix(in srgb, var(--brand) 16%, #e6e0ea);
  --surface: #ffffff;
  --surface-glass: #ffffff;
  --sidebar: #1c1226;
  --dark: #1c1226;
  --danger: #b42318;
  --warning: #9a6700;
  --success: #15704a;
  --shadow: 0 12px 34px rgba(80, 30, 70, .10);
  --bg-0: #f6eff6;
}

/* Cor de acento — sobrescreve a marca nos dois modos (magenta é o padrão).
   Vem depois dos blocos de modo de propósito, para vencer no cascata. */
:root[data-accent="azul"]      { --brand: #4d9fff; --brand-dark: #2f6fd0; --accent-2: #6d7bff; }
:root[data-accent="esmeralda"] { --brand: #23c48a; --brand-dark: #159068; --accent-2: #37c9c0; }
:root[data-accent="violeta"]   { --brand: #a06bff; --brand-dark: #7a45d6; --accent-2: #c77dff; }
:root[data-accent="ambar"]     { --brand: #f0a63c; --brand-dark: #cf7c1c; --accent-2: #ff7d6b; }

/* ============================ Fundo da página =========================== */
:root:not([data-theme="light"]) body {
  background:
    radial-gradient(circle at 50% 96%, color-mix(in srgb, var(--brand) 24%, transparent), transparent 55%),
    radial-gradient(circle at 84% 4%, color-mix(in srgb, var(--accent-2) 20%, transparent), transparent 50%),
    radial-gradient(circle at 8% 20%, color-mix(in srgb, var(--accent-2) 16%, transparent), transparent 46%),
    var(--bg-0);
  color: var(--ink);
}
:root[data-theme="light"] body {
  background:
    radial-gradient(circle at 86% 4%, color-mix(in srgb, var(--brand) 12%, transparent), transparent 42%),
    radial-gradient(circle at 6% 94%, color-mix(in srgb, var(--accent-2) 10%, transparent), transparent 44%),
    var(--bg-0);
  color: var(--ink);
}

/* ===================== Marca, links e acentos =========================== */
.brand-mark, .avatar { background: linear-gradient(135deg, var(--brand), var(--accent-2)); color: #fff; }
a { color: var(--brand); }
.button.primary {
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
  border-color: transparent; color: #fff;
  box-shadow: 0 8px 20px color-mix(in srgb, var(--brand) 30%, transparent);
}
.button.primary:hover { filter: brightness(1.06); }
.bell-badge { background: var(--brand); color: #fff; }
input:focus, .field input:focus, .field select:focus, .field textarea:focus,
.toolbar input:focus, .toolbar select:focus, .search:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 22%, transparent);
  outline: none;
}

/* Faixas dos cards de indicadores → derivadas do acento */
.metric-grid .metric-card:nth-of-type(5n+1) { --accent: var(--brand); }
.metric-grid .metric-card:nth-of-type(5n+2) { --accent: var(--accent-2); }
.metric-grid .metric-card:nth-of-type(5n+3) { --accent: color-mix(in srgb, var(--brand) 65%, #ffffff); }
.metric-grid .metric-card:nth-of-type(5n+4) { --accent: color-mix(in srgb, var(--accent-2) 60%, #ffffff); }
.metric-grid .metric-card:nth-of-type(5n+5) { --accent: color-mix(in srgb, var(--brand) 50%, var(--accent-2)); }
.metric-grid .metric-card.warn { --accent: var(--warning); }
.grid .card:nth-of-type(4n+1) { --accent: var(--brand); }
.grid .card:nth-of-type(4n+2) { --accent: var(--accent-2); }
.grid .card:nth-of-type(4n+3) { --accent: color-mix(in srgb, var(--brand) 65%, #ffffff); }
.grid .card:nth-of-type(4n+4) { --accent: color-mix(in srgb, var(--accent-2) 60%, #ffffff); }

.site-hero, .hero {
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent-2) 55%, #150c1e), color-mix(in srgb, var(--brand-dark) 85%, #150c1e), var(--brand));
  color: #fff;
}

/* ===================== Sidebar (escura nos dois modos) ================== */
.sidebar, .side { background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 6%, #170f22), #100b18); border-right: 1px solid var(--line); }
.sidebar-nav a, .side nav a, .side-group-toggle { color: var(--brand-text); }
.sidebar-nav a:hover, .sidebar-nav a.active,
.side nav a:hover, .side nav a.active,
.side-group-toggle:hover, .side-group.active-group > .side-group-toggle { background: var(--brand-t16); color: #fff; }
.sidebar-nav a.active, .side nav a.active { box-shadow: inset 3px 0 var(--brand); }
.sidebar-nav p, .side-group-label { color: color-mix(in srgb, var(--brand) 20%, #b0a6bd); }
.nav-icon, .side .nav-icon, .sidebar-nav a span, .side-group-toggle .nav-icon { color: var(--brand-soft); }
.sidebar-nav a:hover .nav-icon, .sidebar-nav a.active .nav-icon,
.side nav a:hover .nav-icon, .side nav a.active .nav-icon,
.side-group.active-group > .side-group-toggle .nav-icon { color: #fff; }
.nav-caret { border-right-color: color-mix(in srgb, var(--brand) 45%, #b7aec6); border-bottom-color: color-mix(in srgb, var(--brand) 45%, #b7aec6); }
.side-group-list { border-left-color: var(--brand-t22); }

/* ==================== Superfícies só do modo escuro ===================== */
:root:not([data-theme="light"]) .login-shell,
:root:not([data-theme="light"]) .auth-shell {
  background:
    radial-gradient(circle at 78% 18%, color-mix(in srgb, var(--accent-2) 40%, transparent), transparent 45%),
    radial-gradient(circle at 30% 88%, color-mix(in srgb, var(--brand) 38%, transparent), transparent 50%),
    var(--bg-0);
}
:root:not([data-theme="light"]) .login-card,
:root:not([data-theme="light"]) .auth-card {
  background: var(--surface-glass); border: 1px solid var(--line); color: var(--ink); backdrop-filter: blur(14px);
}
:root:not([data-theme="light"]) .topbar,
:root:not([data-theme="light"]) .store-header { background: color-mix(in srgb, var(--brand) 6%, rgba(16, 11, 24, .92)); border-bottom: 1px solid var(--line); color: var(--ink); }
:root:not([data-theme="light"]) .topbar h1 { color: var(--ink); }
:root:not([data-theme="light"]) .icon-button { background: var(--brand-t12); color: var(--brand-soft); }
:root:not([data-theme="light"]) .icon-button:hover { background: var(--brand-t22); color: #fff; }
:root:not([data-theme="light"]) .toolbar { background: rgba(255, 255, 255, .02); }
:root:not([data-theme="light"]) .card,
:root:not([data-theme="light"]) .panel { background: var(--surface-glass); border-color: var(--line); color: var(--ink); }
:root:not([data-theme="light"]) input,
:root:not([data-theme="light"]) .field input, :root:not([data-theme="light"]) .field select, :root:not([data-theme="light"]) .field textarea,
:root:not([data-theme="light"]) .toolbar input, :root:not([data-theme="light"]) .toolbar select, :root:not([data-theme="light"]) .search {
  background: color-mix(in srgb, var(--brand) 5%, #140f1c); border-color: color-mix(in srgb, var(--brand) 20%, #2a2436); color: var(--ink);
}
:root:not([data-theme="light"]) .detail-list div { background: color-mix(in srgb, var(--brand) 6%, #171220); }
:root:not([data-theme="light"]) .modal { background: color-mix(in srgb, var(--brand) 6%, #17131f); color: var(--ink); border: 1px solid var(--line); }
:root:not([data-theme="light"]) .modal::backdrop { background: rgba(8, 5, 12, .70); }
:root:not([data-theme="light"]) .cart-drawer { background: color-mix(in srgb, var(--brand) 6%, #17131f); color: var(--ink); border-left: 1px solid var(--line); }
:root:not([data-theme="light"]) .img-preview { background: #140f1c; }
:root:not([data-theme="light"]) .loading-state::before { border-color: var(--brand-t22); border-top-color: var(--brand); }
:root:not([data-theme="light"]) .integration-state,
:root:not([data-theme="light"]) .ticket-thread article,
:root:not([data-theme="light"]) .contract-preview,
:root:not([data-theme="light"]) .check-list label,
:root:not([data-theme="light"]) .quick-login-item,
:root:not([data-theme="light"]) .upgrade-card,
:root:not([data-theme="light"]) .quick-action,
:root:not([data-theme="light"]) .perm-group > header,
:root:not([data-theme="light"]) .upgrade-tag { background: color-mix(in srgb, var(--brand) 6%, #171220); border-color: var(--line); color: var(--ink); }
:root:not([data-theme="light"]) .quick-login-item:hover,
:root:not([data-theme="light"]) .quick-action:hover { background: var(--brand-t14); }
:root:not([data-theme="light"]) .quick-action-icon { background: var(--brand-t16); color: var(--brand-soft); }
:root:not([data-theme="light"]) .integration-state.enabled { background: rgba(53, 214, 155, .10); border-color: rgba(53, 214, 155, .3); }
:root:not([data-theme="light"]) .integration-state.disabled,
:root:not([data-theme="light"]) .perm-note,
:root:not([data-theme="light"]) .upgrade-scheduled { background: rgba(242, 177, 60, .10); border-color: rgba(242, 177, 60, .3); color: var(--ink); }

/* ============================== Tabelas ================================= */
:root[data-theme="light"] .data-table th, :root[data-theme="light"] .table th {
  background: color-mix(in srgb, var(--brand) 7%, #ffffff); color: var(--brand-dark); border-bottom: 2px solid var(--line);
}
:root:not([data-theme="light"]) .data-table th, :root:not([data-theme="light"]) .table th {
  background: color-mix(in srgb, var(--brand) 10%, #1c1626); color: color-mix(in srgb, var(--brand) 40%, #e6dcec); border-bottom: 1px solid var(--line);
}
:root[data-theme="light"] .data-table tbody tr:hover td, :root[data-theme="light"] .table tbody tr:hover { background: color-mix(in srgb, var(--brand) 6%, #ffffff); }
:root:not([data-theme="light"]) .data-table tbody tr:hover td,
:root:not([data-theme="light"]) .data-table tr:hover td,
:root:not([data-theme="light"]) .table tbody tr:hover { background: var(--brand-t08); }
:root:not([data-theme="light"]) .data-table td, :root:not([data-theme="light"]) .table td { border-top-color: var(--line); }
.data-table a { color: var(--brand); }

/* =============================== Badges ================================= */
:root:not([data-theme="light"]) .badge { background: var(--brand-t14); color: var(--brand-soft); }
:root:not([data-theme="light"]) .badge.success, :root:not([data-theme="light"]) .badge.ok { background: rgba(53, 214, 155, .16); color: #6ff0c0; }
:root:not([data-theme="light"]) .badge.danger, :root:not([data-theme="light"]) .badge.bad { background: rgba(255, 107, 107, .16); color: #ff9d9d; }
:root:not([data-theme="light"]) .badge.warning { background: rgba(242, 177, 60, .16); color: #f5cd7e; }
.split-tabs a.active { background: var(--brand); color: #fff; }
:root:not([data-theme="light"]) .split-tabs a { background: var(--brand-t10); color: var(--brand-soft); }

/* =============================== Toast ================================== */
.toast { background: color-mix(in srgb, var(--brand) 22%, #1c1030); color: #fff; }
.toast.error { background: #8d281f; }

/* ======================= Padronização de dimensões ====================== */
.shell { grid-template-columns: 250px minmax(0, 1fr); }
.side .nav-icon { width: 20px; height: 20px; }
.card, .panel { border-radius: 16px; }
.grid { gap: 14px; }
.button:not(.small) { padding: 10px 15px; }
.button.small { padding: 7px 10px; }
.field input, .field select, .field textarea, .toolbar input, .toolbar select { border-radius: 9px; padding: 11px 12px; }
.table { font-size: .85rem; }
.table th, .table td { padding: 11px 13px; }

/* ===================== Botão do seletor (standalone) ==================== */
.theme-toggle {
  display: grid; place-items: center; width: 38px; height: 38px;
  border: 0; border-radius: 9px; cursor: pointer;
  background: var(--brand-t12); color: var(--brand-soft);
}
.theme-toggle:hover { background: var(--brand-t22); color: #fff; }
:root[data-theme="light"] .theme-toggle { background: color-mix(in srgb, var(--brand) 12%, #ffffff); color: var(--brand-dark); }
.theme-toggle .ui-icon { width: 20px; height: 20px; display: block; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
#theme-toggle .icon-sun { display: none; }
:root:not([data-theme="light"]) #theme-toggle .icon-sun { display: block; }
:root:not([data-theme="light"]) #theme-toggle .icon-moon { display: none; }

/* ==================== Seletor de cores (Configurações) ================== */
.theme-picker { display: flex; flex-wrap: wrap; gap: 12px; padding: 16px; }
.theme-swatch {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 13px 9px 9px; border: 1px solid var(--line); border-radius: 11px;
  background: var(--surface); color: var(--ink); cursor: pointer; font: inherit; font-weight: 700; font-size: .85rem;
  transition: border-color .16s, transform .16s;
}
.theme-swatch:hover { transform: translateY(-1px); }
.theme-swatch[aria-pressed="true"] { border-color: var(--dot); box-shadow: 0 0 0 2px var(--dot); }
.theme-swatch .dot { width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(135deg, var(--dot), var(--dot2)); box-shadow: 0 2px 8px color-mix(in srgb, var(--dot) 45%, transparent); }
.theme-mode-row { display: flex; gap: 8px; padding: 0 16px 16px; }
.theme-mode-row .button { flex: 0 0 auto; }

/* Barra de rolagem discreta */
* { scrollbar-color: var(--brand-t22) transparent; }

/* ==================== Filtros e paginação das listas =================== */
/* Reusa .toolbar (borda e respiro) e só acrescenta o que muda: os campos quebram linha em vez de
   espremerem, e cada um leva rótulo em cima — sem rótulo, dez campos numéricos viram adivinhação. */
.filters { flex-wrap: wrap; align-items: flex-end; row-gap: 10px; }
.filter { display: grid; gap: 4px; font-size: .84rem; font-weight: 750; }
.filter small { color: var(--muted); font-weight: 700; }
.filter input, .filter select { width: auto; min-width: 118px; }
.filter input[type="search"] { min-width: 210px; }
.filter-actions { display: flex; gap: 7px; margin-left: auto; }

.pager { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 12px 14px; border-top: 1px solid var(--line); font-size: .84rem; }
.pager .muted { margin: 0 4px; }

@media (max-width: 560px) {
  .filters { flex-direction: column; align-items: stretch; }
  .filter input, .filter select { width: 100%; }
  .filter-actions { margin-left: 0; }
  .pager { justify-content: space-between; }
}

/* =============== Redefinição de senha (usuários da empresa) ============= */
.pwd-reset { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pwd-input { min-width: 190px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .02em; }

/* ================= Avisos da administração SaaS (ERP) ================== */
/* Fica no theme.css porque é a única folha carregada pelo ERP e pelo painel admin — assim o aviso
   acompanha tema e cor de acento nos dois, sem duplicar a regra. */
.announcements { display: grid; gap: 8px; padding: 14px 22px 0; }
.announcement {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 12px 14px; border: 1px solid var(--line); border-left: 3px solid var(--brand);
  border-radius: 10px; background: color-mix(in srgb, var(--brand) 8%, var(--surface));
}
.announcement strong { display: block; font-size: .92rem; }
.announcement p { margin: 4px 0 0; font-size: .86rem; color: var(--muted); white-space: pre-line; }

/* ======================================================================= */
/* Correções de vazamento da identidade antiga (verde).                    */
/*                                                                          */
/* O projeto tem três folhas com :root próprio — styles.css e standalone.css */
/* nasceram verdes e continuam declarando cor fixa em pontos que theme.css   */
/* não cobria. Como theme.css é sempre o último <link>, é aqui que se        */
/* corrige, sem tocar nas folhas originais.                                  */
/* ======================================================================= */

/* O <html> ficava verde-acinzentado em todos os temas: styles.css e
   standalone.css pintam :root, e theme.css só pintava body. O canvas do
   navegador herda do <html>, então o overscroll entregava a cor antiga. */
html { background: var(--bg-0); color: var(--ink); }

/* Acento por modo. As regras [data-accent] aplicavam o mesmo hexadecimal nos
   dois temas: no claro, azul #4d9fff sobre branco não alcança contraste de
   leitura. Só o magenta tinha par calibrado; aqui os outros quatro ganham o
   deles. Especificidade (0,3,0) vence o [data-accent] simples (0,2,0). */
:root[data-theme="light"][data-accent="azul"]      { --brand: #2f6fd0; --brand-dark: #1f4f9c; --accent-2: #4d5fd6; }
:root[data-theme="light"][data-accent="esmeralda"] { --brand: #159068; --brand-dark: #0e6b4d; --accent-2: #1a9a92; }
:root[data-theme="light"][data-accent="violeta"]   { --brand: #7a45d6; --brand-dark: #5c31a6; --accent-2: #9b55e0; }
:root[data-theme="light"][data-accent="ambar"]     { --brand: #b06a12; --brand-dark: #8a5210; --accent-2: #d1543f; }

/* Botões secundários. theme.css não tinha regra para .ghost nem .danger, então
   venciam os verdes de styles.css e standalone.css — inclusive nos próprios
   botões Claro/Escuro do seletor de aparência. */
.button.ghost { background: color-mix(in srgb, var(--brand) 12%, transparent); color: var(--ink); }
.button.ghost:hover { background: color-mix(in srgb, var(--brand) 20%, transparent); }
.button.danger { background: color-mix(in srgb, var(--danger) 15%, transparent); color: var(--danger); }

/* Sinos de contas vencidas. overrides.css usa seletor de ID (1,1,0), que
   derrota qualquer regra de classe: ficavam verde e âmbar fixos em todo tema.
   Repetimos a mesma especificidade para empatar e vencer pela ordem. */
#bell-receivables .ui-icon { color: var(--brand); }
#bell-receivables .bell-badge { background: var(--brand); }
#bell-payables .ui-icon { color: var(--warning); }
#bell-payables .bell-badge { background: var(--warning); }

/* Telas de login no modo claro. theme.css só cobria o modo escuro, então o
   claro caía no gradiente verde original de styles.css/standalone.css. */
:root[data-theme="light"] .login-shell,
:root[data-theme="light"] .auth-shell {
  background:
    radial-gradient(circle at 20% 20%, color-mix(in srgb, var(--accent-2) 18%, transparent), transparent 46%),
    linear-gradient(135deg, color-mix(in srgb, var(--brand) 14%, var(--bg-0)), var(--bg-0));
}

/* Cores fixas sem contraparte no tema. Cada uma destas vinha de overrides.css
   ou styles.css com hexadecimal verde e não acompanhava modo nem acento. */
.profile-item { color: var(--ink); }
.profile-item:hover { background: color-mix(in srgb, var(--brand) 12%, transparent); }
.profile-item.danger:hover { background: color-mix(in srgb, var(--danger) 14%, transparent); }
.quick-login { background: color-mix(in srgb, var(--surface) 92%, transparent); }
.quick-login-title { color: var(--muted); }
.quick-login-item strong { color: var(--ink); }
.perm-group > header strong { color: var(--ink); }
.sale-line-qty { border-color: var(--line); background: var(--surface); color: var(--ink); }
.sale-totals { background: color-mix(in srgb, var(--brand) 7%, var(--surface)); }
.sale-troco strong { color: var(--success); }
.metric-card small { color: var(--muted); }
.connection i { background: var(--success); }

/* Fallback do acento dos cartões. theme.css só definia --accent para cartões
   dentro de .grid; os da loja e da comparação caíam no verde #10b981. */
.card { --accent: var(--brand); }

/* Itens que só tinham regra no modo escuro e voltavam ao verde no claro. */
:root[data-theme="light"] .icon-button { background: color-mix(in srgb, var(--brand) 10%, transparent); color: var(--ink); }
:root[data-theme="light"] .icon-button:hover { background: color-mix(in srgb, var(--brand) 18%, transparent); }
:root[data-theme="light"] .split-tabs a { background: color-mix(in srgb, var(--brand) 10%, transparent); color: var(--ink); }
:root[data-theme="light"] .toolbar { background: color-mix(in srgb, var(--brand) 4%, var(--surface)); }

/* ============== Rótulos de formulário e cores fixas restantes ============ */
/* styles.css declara `.login-card label, .field { color: #34433e }` — verde-escuro da identidade
   antiga, sem contraparte no tema. No modo escuro o rótulo do campo some contra o painel: era
   possível ver a caixa de texto e não a legenda dela.
   Vale para os dois modos: no claro o verde também destoa do resto, que já é magenta. */
.field, .login-card label { color: var(--ink); }

/* Texto auxiliar dentro do formulário continua secundário, mas legível. */
.field small, .field .muted, .modal-section p { color: var(--muted); }

/* ================= Contraste medido nos dois temas ====================== */
/* Medição de contraste WCAG (compondo transparência sobre o fundo real) percorreu rótulo, texto
   auxiliar, input, select, textarea, cabeçalho de tabela, selo, aba, botão secundário e rótulo de
   grupo. Só dois reprovavam o mínimo de 4,5 — os demais já passavam e não foram tocados.

   O rótulo de campo está corrigido acima (`.field`), que era o pior caso: 2,02 no tema escuro.
   Aqui fica o segundo: o rótulo de grupo da barra lateral, com 2,71 no tema claro. */
.sidebar-nav p, .side nav p { color: color-mix(in srgb, var(--ink) 62%, transparent); }