/* ==========================================================
   FSQ — Sistema de temas (dark-first, inspirado Apple.com)
   ========================================================== */

/* ====================================================
   CSS VARIABLES — Diurno (:root) e Noturno (html.dark)
   ==================================================== */
:root {
  /* Fundo e superfícies */
  --bg: #F5F5F7;
  --surface: #FFFFFF;
  --surface-2: #F5F5F7;

  /* Cor primária: #1C1C1E (grafite FSQ) no modo diurno — ícone e botões */
  --brand: #1C1C1E;
  --brand-hover: #3A3A3C;
  --brand-text: #FFFFFF;
  --brand-rgb: 142,142,147;

  /* Texto */
  --text: #1d1d1f;
  --text-sub: #515154;
  --text-dim: #8e8e93;

  /* Bordas */
  --border: rgba(0,0,0,0.08);
  --border-2: rgba(0,0,0,0.12);

  /* Topbar e sidebar */
  --topbar-bg: rgba(245,245,247,0.92);
  --sidebar-bg: #FFFFFF;
  --sidebar-border: rgba(0,0,0,0.08);

  /* Navegação */
  --nav-color: #515154;
  --nav-hover: rgba(0,0,0,0.04);
  --nav-ativa-bg: rgba(142,142,147,0.12);
  --nav-ativa-color: #3a3a3c;
  --section-title-color: #8e8e93;

  /* Inputs */
  --inp-bg: rgba(0,0,0,0.04);
  --inp-border: rgba(0,0,0,0.12);
  --inp-color: #1d1d1f;
  --inp-placeholder: #8e8e93;
  --inp-focus-border: #8E8E93;
  --inp-focus-bg: rgba(142,142,147,0.06);
  --inp-select-bg: #FFFFFF;

  /* Botões */
  --btn-sec-bg: rgba(0,0,0,0.06);
  --btn-sec-color: #1d1d1f;
  --btn-sec-border: rgba(0,0,0,0.12);
  --btn-sec-hover: rgba(0,0,0,0.09);
  --btn-icon-color: #8e8e93;
  --btn-icon-hover-bg: rgba(0,0,0,0.06);
  --btn-icon-hover-color: #1d1d1f;

  /* Modal */
  --modal-overlay: rgba(0,0,0,0.35);
  --modal-bg: #FFFFFF;
  --modal-border: rgba(0,0,0,0.10);

  /* Tabela */
  --tbl-th-color: #8e8e93;
  --tbl-th-border: rgba(0,0,0,0.08);
  --tbl-td-border: rgba(0,0,0,0.05);
  --tbl-td-color: #1d1d1f;
  --tbl-hover: rgba(0,0,0,0.02);

  /* Stat cards */
  --stat-card-bg: #FFFFFF;
  --stat-card-border: rgba(0,0,0,0.08);

  /* Página */
  --page-title: #1d1d1f;
  --page-sub: #6e6e73;
  --hover-bg: rgba(0,0,0,0.03);
  --scrollbar-thumb: #c7c7cc;
}

html.dark {
  /* Fundo e superfícies — fundo grafite, caixas cinza */
  --bg: #1C1C1E;
  --surface: #3A3A3C;
  --surface-2: #48484A;

  /* Cor primária: #00D2BE (Petronas Teal) no modo noturno */
  --brand: #00D2BE;
  --brand-hover: #00A896;
  --brand-text: #000000;
  --brand-rgb: 0,210,190;

  /* Texto */
  --text: #f5f5f7;
  --text-sub: #aeaeb2;
  --text-dim: #8e8e93;

  /* Bordas */
  --border: rgba(255,255,255,0.07);
  --border-2: rgba(255,255,255,0.12);

  /* Topbar e sidebar — barras de menu em preto */
  --topbar-bg: #0A0A0A;
  --sidebar-bg: #0A0A0A;
  --sidebar-border: rgba(255,255,255,0.07);

  /* Navegação */
  --nav-color: #aeaeb2;
  --nav-hover: rgba(255,255,255,0.06);
  --nav-ativa-bg: rgba(0,210,190,0.12);
  --nav-ativa-color: #00D2BE;
  --section-title-color: #6e6e73;

  /* Inputs */
  --inp-bg: rgba(255,255,255,0.05);
  --inp-border: rgba(255,255,255,0.12);
  --inp-color: #f5f5f7;
  --inp-placeholder: #6e6e73;
  --inp-focus-border: #00D2BE;
  --inp-focus-bg: rgba(0,210,190,0.05);
  --inp-select-bg: #3A3A3C;

  /* Botões */
  --btn-sec-bg: rgba(255,255,255,0.08);
  --btn-sec-color: #f5f5f7;
  --btn-sec-border: rgba(255,255,255,0.12);
  --btn-sec-hover: rgba(255,255,255,0.12);
  --btn-icon-color: #8e8e93;
  --btn-icon-hover-bg: rgba(255,255,255,0.08);
  --btn-icon-hover-color: #f5f5f7;

  /* Modal */
  --modal-overlay: rgba(0,0,0,0.7);
  --modal-bg: #3A3A3C;
  --modal-border: rgba(255,255,255,0.10);

  /* Tabela */
  --tbl-th-color: #6e6e73;
  --tbl-th-border: rgba(255,255,255,0.07);
  --tbl-td-border: rgba(255,255,255,0.05);
  --tbl-td-color: #f5f5f7;
  --tbl-hover: rgba(255,255,255,0.03);

  /* Stat cards */
  --stat-card-bg: #3A3A3C;
  --stat-card-border: rgba(255,255,255,0.08);

  /* Página */
  --page-title: #f5f5f7;
  --page-sub: #8e8e93;
  --hover-bg: rgba(255,255,255,0.03);
  --scrollbar-thumb: #48484a;
}

/* ====================================================
   WIDGET DASHBOARD — barra relógio/local/clima/dólar
   ==================================================== */
.dash-widget-card { padding: 0; overflow: hidden; }
.dash-widget { display: grid; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 1024px) { .dash-widget { grid-template-columns: repeat(4, 1fr); } }
.dash-bloco { display: flex; align-items: center; gap: 14px; padding: 18px 22px; min-width: 0; }
.dash-bloco:nth-child(n+2) { border-left: 1px solid var(--border); }
@media (max-width: 1023px) {
  .dash-bloco:nth-child(2n+1) { border-left: none; }
  .dash-bloco:nth-child(n+3) { border-top: 1px solid var(--border); }
}
.dash-ic {
  width: 42px; height: 42px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--brand); color: var(--brand-text);
  font-size: 15px; flex-shrink: 0;
}

/* ====================================================
   FUNDO DE PARTÍCULAS — camada fixa atrás do conteúdo
   Tingida com a cor do tema (teal no escuro, prata no claro)
   ==================================================== */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-color: var(--brand);
  -webkit-mask: url('../assets/bg-particles.png') center bottom / cover no-repeat;
          mask: url('../assets/bg-particles.png') center bottom / cover no-repeat;
  opacity: 0.16;
}
html:not(.dark) body::before { background-color: #8E8E93; opacity: 0.24; }

/* ====================================================
   SCROLLBAR
   ==================================================== */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 3px; }

/* ====================================================
   MODO DIURNO — Overrides de classes Tailwind geradas
   por app.js dentro de #view-area e #modal-box
   ==================================================== */

/* Texto */
html:not(.dark) #view-area .text-white,
html:not(.dark) #modal-box .text-white { color: var(--text); }

html:not(.dark) #view-area .text-gray-300,
html:not(.dark) #modal-box .text-gray-300 { color: var(--text-sub) !important; }

html:not(.dark) #view-area .text-gray-400,
html:not(.dark) #modal-box .text-gray-400 { color: var(--text-sub) !important; }

html:not(.dark) #view-area .text-gray-500,
html:not(.dark) #modal-box .text-gray-500 { color: var(--text-dim) !important; }

html:not(.dark) #view-area .text-gray-600,
html:not(.dark) #modal-box .text-gray-600 { color: #aeaeb2 !important; }

/* Brand color no diurno: ícones em teal, botões/bg em grafite */
html:not(.dark) .text-brand { color: #00D2BE !important; }
html:not(.dark) .bg-brand { background-color: #1C1C1E !important; }
/* Ícones do widget em teal no modo diurno */
html:not(.dark) .dash-ic { background-color: #00D2BE; color: #0A0A0A; }
html:not(.dark) .bg-brand\/20 { background-color: rgba(142,142,147,0.15) !important; }
html:not(.dark) .hover\:bg-white\/5:hover { background-color: rgba(0,0,0,0.04) !important; }
html:not(.dark) .hover\:text-white:hover { color: var(--text) !important; }
html:not(.dark) .group:hover .group-hover\:text-white { color: var(--text) !important; }
html:not(.dark) .group-hover\:text-gray-400 { color: var(--text-sub) !important; }

/* Toggle ativo (bg-brand text-black → bg cinza + texto branco) */
html:not(.dark) .bg-brand.text-black { color: #ffffff !important; }

/* Fundos escuros invertidos */
html:not(.dark) #view-area .bg-black\/20,
html:not(.dark) #modal-box .bg-black\/20 { background-color: rgba(0,0,0,0.04) !important; }
html:not(.dark) #view-area .bg-black\/30,
html:not(.dark) #modal-box .bg-black\/30 { background-color: rgba(0,0,0,0.05) !important; }
html:not(.dark) #view-area .bg-black\/40,
html:not(.dark) #modal-box .bg-black\/40 { background-color: rgba(0,0,0,0.06) !important; }

/* Fundos brancos-translúcidos (visíveis no escuro) */
html:not(.dark) #view-area .bg-white\/5,
html:not(.dark) #modal-box .bg-white\/5 { background-color: rgba(0,0,0,0.03) !important; }
html:not(.dark) #view-area .bg-white\/8,
html:not(.dark) #modal-box .bg-white\/8 { background-color: rgba(0,0,0,0.05) !important; }
html:not(.dark) #view-area [class*="bg-white\/\[0"],
html:not(.dark) #modal-box [class*="bg-white\/\[0"] { background-color: rgba(0,0,0,0.04) !important; }

/* Bordas brancas-translúcidas → pretas no diurno */
html:not(.dark) #view-area [class*="border-white"],
html:not(.dark) #modal-box [class*="border-white"] { border-color: rgba(0,0,0,0.08) !important; }

/* Teal para itens de financeiro → permanece visível no diurno */
html:not(.dark) .text-teal-400 { color: #3a9a8e !important; }
html:not(.dark) .bg-teal-500\/15 { background-color: rgba(0,150,130,0.10) !important; }
html:not(.dark) .text-teal-400.fa-solid { color: #3a9a8e !important; }

/* Cores de badge — ajustadas para diurno */
html:not(.dark) .bg-green-500\/15 { background-color: rgba(34,197,94,0.12) !important; }
html:not(.dark) .bg-blue-500\/15 { background-color: rgba(59,130,246,0.12) !important; }
html:not(.dark) .bg-red-500\/15 { background-color: rgba(239,68,68,0.12) !important; }
html:not(.dark) .bg-violet-500\/15 { background-color: rgba(139,92,246,0.12) !important; }
html:not(.dark) .bg-amber-500\/15 { background-color: rgba(245,158,11,0.12) !important; }
html:not(.dark) .bg-orange-500\/15 { background-color: rgba(249,115,22,0.12) !important; }
html:not(.dark) .bg-gray-800 { background-color: rgba(0,0,0,0.06) !important; }
html:not(.dark) .text-gray-300.badge { color: #515154 !important; }

/* Stat card icon colors no diurno */
html:not(.dark) .text-blue-400 { color: #2563eb !important; }
html:not(.dark) .text-violet-400 { color: #7c3aed !important; }

/* ====================================================
   MODO NOTURNO — Overrides legados (redundantes com vars,
   mantidos para compatibilidade com Tailwind classes
   usadas em outras partes)
   ==================================================== */
html.dark { color-scheme: dark; }
html.dark .bg-white  { background-color: #3A3A3C; }
html.dark .bg-gray-50, html.dark .bg-gray-100 { background-color: #48484A; }
html.dark .bg-gray-200 { background-color: #3a3a3c; }
html.dark .text-ink { color: #f5f5f7; }
html.dark .text-gray-900, html.dark .text-gray-800, html.dark .text-gray-700 { color: #f5f5f7; }
html.dark .text-sub, html.dark .text-gray-600, html.dark .text-gray-500 { color: #aeaeb2; }
html.dark .text-gray-400, html.dark .text-gray-300 { color: #8e8e93; }
html.dark .border-line { border-color: rgba(255,255,255,0.12); }
html.dark .border-gray-100 { border-color: rgba(255,255,255,0.07); }
html.dark .border-gray-200, html.dark .border-gray-300 { border-color: rgba(255,255,255,0.14); }
html.dark .hover\:bg-gray-50:hover  { background-color: rgba(255,255,255,0.05); }
html.dark .hover\:bg-gray-100:hover { background-color: rgba(255,255,255,0.08); }
html.dark input, html.dark select, html.dark textarea {
  background-color: #1c1c1e; color: #f5f5f7; border-color: rgba(255,255,255,0.14);
}
html.dark input::placeholder, html.dark textarea::placeholder { color: #6e6e73; }
html.dark select option { background-color: #1c1c1e; color: #f5f5f7; }
html.dark .shadow-2xl { box-shadow: 0 20px 60px rgba(0,0,0,0.8); }
html.dark .shadow-lg  { box-shadow: 0 8px 30px rgba(0,0,0,0.6); }
html.dark .bg-brand-light { background-color: rgba(0,210,190,0.15); }
html.dark .bg-amber-50, html.dark .bg-amber-100  { background-color: rgba(245,158,11,0.15); }
html.dark .bg-orange-50, html.dark .bg-orange-100 { background-color: rgba(249,115,22,0.15); }
html.dark .bg-blue-50, html.dark .bg-blue-100   { background-color: rgba(59,130,246,0.15); }
html.dark .bg-green-50, html.dark .bg-green-100  { background-color: rgba(34,197,94,0.15); }
html.dark .bg-teal-50, html.dark .bg-teal-100   { background-color: rgba(0,210,190,0.15); }
html.dark .bg-violet-50, html.dark .bg-violet-100 { background-color: rgba(139,92,246,0.18); }
html.dark .bg-red-50, html.dark .bg-red-100    { background-color: rgba(239,68,68,0.15); }
html.dark .text-amber-800, html.dark .text-amber-600  { color: #fcd34d; }
html.dark .text-orange-800, html.dark .text-orange-600 { color: #fdba74; }
html.dark .text-blue-800, html.dark .text-blue-600   { color: #93c5fd; }
html.dark .text-green-800, html.dark .text-green-600  { color: #86efac; }
html.dark .text-teal-800, html.dark .text-teal-600   { color: #5eead4; }
html.dark .text-violet-800, html.dark .text-violet-600 { color: #c4b5fd; }
html.dark .text-red-700, html.dark .text-red-600    { color: #fca5a5; }
html.dark .border-amber-200  { border-color: rgba(245,158,11,0.30); }
html.dark .border-blue-200   { border-color: rgba(59,130,246,0.30); }
html.dark .border-green-200  { border-color: rgba(34,197,94,0.30); }
html.dark .border-teal-200   { border-color: rgba(0,210,190,0.30); }
html.dark .border-violet-200 { border-color: rgba(139,92,246,0.35); }
html.dark .border-red-200    { border-color: rgba(239,68,68,0.30); }

/* ====================================================
   BOTÃO DE TEMA
   ==================================================== */
/* Logo FSQ via máscara CSS (imagem real) — prata no diurno, teal no noturno.
   A digital e o fundo são recortes transparentes na máscara. */
.fsq-logo {
  display: inline-block;
  background-color: #1C1C1E;
  -webkit-mask: url('../assets/logo-white.png') center / contain no-repeat;
          mask: url('../assets/logo-white.png') center / contain no-repeat;
}
html.dark .fsq-logo { background-color: #00D2BE; }

.btn-tema { color: #6e6e73; }
html.dark .btn-tema { color: #f5c542; }

/* Ícone de lua/sol na topbar */
html.dark [data-btn-tema] i.fa-sun { color: #f5c542; }
html:not(.dark) [data-btn-tema] i.fa-moon { color: #636366; }

/* ====================================================
   IMPRESSÃO — sempre clara
   ==================================================== */
@media print {
  html, html.dark, body, html.dark body {
    background: #fff !important; color: #000 !important; color-scheme: light !important;
  }
}