/* ============================================================
   TEMA DO PAINEL — claro e escuro no mesmo arquivo
   ============================================================

   Como funciona, em uma frase: nenhuma cor está escrita nas telas; todas
   saem de "apelidos" (as variáveis --c-*) definidos aqui. Trocar de tema é
   só trocar o valor dos apelidos — o HTML das telas não muda NADA.

   Por que assim: as telas usam classes do Tailwind (bg-gray-800/50,
   text-gray-400...). O `tema.js` manda o Tailwind montar essas classes
   apontando para as variáveis daqui. Resultado: um `bg-gray-800/50` que
   escrevemos uma vez funciona nos dois temas, e ninguém precisa escrever
   "dark:" em coisa alguma.

   O valor das cores vai em NÚMEROS SEPARADOS POR ESPAÇO (ex.: 31 41 55),
   e não em #hex, porque é isso que deixa o Tailwind aplicar transparência
   por cima: bg-gray-800/50 vira rgb(31 41 55 / 0.5).

   O tema escuro é o padrão (é o visual original do painel). O claro entra
   quando o <html> ganha data-tema="claro" — quem faz isso é o tema.js.
   ============================================================ */

/* ---------- TEMA ESCURO (o padrão) ---------- */
:root {
  color-scheme: dark;          /* faz o navegador desenhar select, barra de
                                  rolagem e calendário na cor certa */

  --c-white: 255 255 255;      /* "text-white" = o texto mais forte da tela */
  --c-black: 0 0 0;

  --c-gray-50: 249 250 251;
  --c-gray-100: 243 244 246;
  --c-gray-200: 229 231 235;
  --c-gray-300: 209 213 219;
  --c-gray-400: 156 163 175;   /* texto secundário (o mais usado) */
  --c-gray-500: 107 114 128;   /* dica, placeholder */
  --c-gray-600: 75 85 99;
  --c-gray-700: 55 65 81;      /* linhas e bordas */
  --c-gray-800: 31 41 55;      /* fundo de campo e de botão neutro */
  --c-gray-900: 17 24 39;      /* fundo do menu e da barra de cima */
  --c-gray-950: 3 7 18;

  --c-indigo-50: 238 242 255;
  --c-indigo-100: 224 231 255;
  --c-indigo-200: 199 210 254;
  --c-indigo-300: 165 180 252;
  --c-indigo-400: 129 140 248;
  --c-indigo-500: 99 102 241;
  --c-indigo-600: 79 70 229;
  --c-indigo-700: 67 56 202;
  --c-indigo-800: 55 48 163;
  --c-indigo-900: 49 46 129;
  --c-indigo-950: 30 27 75;

  --c-red-50: 254 242 242;
  --c-red-100: 254 226 226;
  --c-red-200: 254 202 202;
  --c-red-300: 252 165 165;
  --c-red-400: 248 113 113;
  --c-red-500: 239 68 68;
  --c-red-600: 220 38 38;
  --c-red-700: 185 28 28;
  --c-red-800: 153 27 27;
  --c-red-900: 127 29 29;
  --c-red-950: 69 10 10;

  --c-green-50: 240 253 244;
  --c-green-100: 220 252 231;
  --c-green-200: 187 247 208;
  --c-green-300: 134 239 172;
  --c-green-400: 74 222 128;
  --c-green-500: 34 197 94;
  --c-green-600: 22 163 74;
  --c-green-700: 21 128 61;
  --c-green-800: 22 101 52;
  --c-green-900: 20 83 45;
  --c-green-950: 5 46 22;

  --c-amber-50: 255 251 235;
  --c-amber-100: 254 243 199;
  --c-amber-200: 253 230 138;
  --c-amber-300: 252 211 77;
  --c-amber-400: 251 191 36;
  --c-amber-500: 245 158 11;
  --c-amber-600: 217 119 6;
  --c-amber-700: 180 83 9;
  --c-amber-800: 146 64 14;
  --c-amber-900: 120 53 15;
  --c-amber-950: 69 26 5;

  --c-blue-50: 239 246 255;
  --c-blue-100: 219 234 254;
  --c-blue-200: 191 219 254;
  --c-blue-300: 147 197 253;
  --c-blue-400: 96 165 250;
  --c-blue-500: 59 130 246;
  --c-blue-600: 37 99 235;
  --c-blue-700: 29 78 216;
  --c-blue-800: 30 64 175;
  --c-blue-900: 30 58 138;
  --c-blue-950: 23 37 84;
  /* Peças que não são "uma cor do Tailwind" e sim um material */
  --fundo-painel: linear-gradient(135deg, #0f172a 0%, #1e1b4b 100%);
  --fundo-login: linear-gradient(135deg, #1e1b4b 0%, #312e81 50%, #4338ca 100%);
  --vidro-fundo: rgba(30, 41, 59, 0.7);
  --vidro-borda: rgba(255, 255, 255, 0.08);
  --vidro-sombra: none;
  --menu-hover: rgba(255, 255, 255, 0.05);
  --nav-texto: #9ca3af;
  --nav-texto-hover: #ffffff;
  --nav-ativo-fundo: rgba(99, 102, 241, 0.15);
  --nav-ativo-texto: #ffffff;
  --nav-ativo-icone: #818cf8;
  --cartao-linha-fundo: rgba(30, 41, 59, 0.4);
  --cartao-linha-borda: rgba(255, 255, 255, 0.08);
  --cartao-linha-divisor: rgba(255, 255, 255, 0.05);
  --modal-fundo: rgba(0, 0, 0, 0.7);
}

/* ---------- TEMA CLARO ---------- */
/* A régua de cinzas é a MESMA, só de cabeça para baixo: o que era fundo
   escuro vira fundo claro, e o que era texto claro vira texto escuro.
   É isso que permite reaproveitar as classes das telas sem tocar nelas. */
:root[data-tema="claro"] {
  color-scheme: light;

  --c-white: 15 23 42;         /* o texto forte agora é quase preto */
  --c-black: 15 23 42;

  --c-gray-50: 2 6 23;
  --c-gray-100: 15 23 42;
  --c-gray-200: 30 41 59;
  --c-gray-300: 51 65 85;
  --c-gray-400: 71 85 105;   /* texto secundário (o mais usado) */
  --c-gray-500: 100 116 139;   /* dica, placeholder */
  --c-gray-600: 148 163 184;
  --c-gray-700: 203 213 225;      /* linhas e bordas */
  --c-gray-800: 226 232 240;      /* fundo de campo e de botão neutro */
  --c-gray-900: 241 245 249;      /* fundo do menu e da barra de cima */
  --c-gray-950: 248 250 252;

  --c-indigo-50: 49 46 129;
  --c-indigo-100: 49 46 129;
  --c-indigo-200: 55 48 163;
  --c-indigo-300: 67 56 202;
  --c-indigo-400: 79 70 229;
  --c-indigo-500: 99 102 241;
  --c-indigo-600: 79 70 229;
  --c-indigo-700: 67 56 202;
  --c-indigo-800: 55 48 163;
  --c-indigo-900: 49 46 129;
  --c-indigo-950: 30 27 75;

  --c-red-50: 127 29 29;
  --c-red-100: 127 29 29;
  --c-red-200: 153 27 27;
  --c-red-300: 185 28 28;
  --c-red-400: 220 38 38;
  --c-red-500: 239 68 68;
  --c-red-600: 220 38 38;
  --c-red-700: 185 28 28;
  --c-red-800: 153 27 27;
  --c-red-900: 127 29 29;
  --c-red-950: 69 10 10;

  --c-green-50: 20 83 45;
  --c-green-100: 20 83 45;
  --c-green-200: 22 101 52;
  --c-green-300: 22 101 52;   /* dois degraus: verde claro some no branco */
  --c-green-400: 21 128 61;   /* idem — é a cor da etiqueta "ativo" */
  --c-green-500: 34 197 94;
  --c-green-600: 22 163 74;
  --c-green-700: 21 128 61;
  --c-green-800: 22 101 52;
  --c-green-900: 20 83 45;
  --c-green-950: 5 46 22;

  --c-amber-50: 120 53 15;
  --c-amber-100: 120 53 15;
  --c-amber-200: 146 64 14;
  --c-amber-300: 146 64 14;
  --c-amber-400: 180 83 9;
  --c-amber-500: 245 158 11;
  --c-amber-600: 217 119 6;
  --c-amber-700: 180 83 9;
  --c-amber-800: 146 64 14;
  --c-amber-900: 120 53 15;
  --c-amber-950: 69 26 5;

  --c-blue-50: 30 58 138;
  --c-blue-100: 30 58 138;
  --c-blue-200: 30 64 175;
  --c-blue-300: 29 78 216;
  --c-blue-400: 37 99 235;
  --c-blue-500: 59 130 246;
  --c-blue-600: 37 99 235;
  --c-blue-700: 29 78 216;
  --c-blue-800: 30 64 175;
  --c-blue-900: 30 58 138;
  --c-blue-950: 23 37 84;
  --fundo-painel: linear-gradient(135deg, #f8fafc 0%, #eef2ff 100%);
  --fundo-login: linear-gradient(135deg, #e0e7ff 0%, #eef2ff 50%, #f8fafc 100%);
  --vidro-fundo: rgba(255, 255, 255, 0.85);
  --vidro-borda: rgba(15, 23, 42, 0.08);
  --vidro-sombra: 0 1px 3px rgba(15, 23, 42, 0.06);
  --menu-hover: rgba(15, 23, 42, 0.04);
  --nav-texto: #475569;
  --nav-texto-hover: #0f172a;
  --nav-ativo-fundo: rgba(99, 102, 241, 0.12);
  --nav-ativo-texto: #312e81;
  --nav-ativo-icone: #4f46e5;
  --cartao-linha-fundo: rgba(255, 255, 255, 0.75);
  --cartao-linha-borda: rgba(15, 23, 42, 0.08);
  --cartao-linha-divisor: rgba(15, 23, 42, 0.06);
  --modal-fundo: rgba(15, 23, 42, 0.45);
}

/* Texto do botão colorido: no tema claro o "text-white" viraria quase
   preto, e preto sobre índigo não se lê. Estes botões guardam o branco. */
:root[data-tema="claro"] .bg-indigo-600,
:root[data-tema="claro"] .bg-indigo-500,
:root[data-tema="claro"] .bg-red-500,
:root[data-tema="claro"] .bg-green-500 {
  color: #ffffff;
}

/* Caixa de marcar e radio: o "accent-color" é o que faz o quadradinho
   marcado sair no índigo do sistema nos DOIS temas — sem isso o navegador
   escolhe um azul dele. */
input[type="checkbox"], input[type="radio"] { accent-color: rgb(var(--c-indigo-500)); }

/* ---------- materiais do painel ---------- */
body { font-family: 'Inter', ui-sans-serif, system-ui, sans-serif; }

.gradient-bg { background: var(--fundo-painel); }
.gradient-login { background: var(--fundo-login); }

.glass-panel {
  background: var(--vidro-fundo);
  backdrop-filter: blur(12px);
  border: 1px solid var(--vidro-borda);
  box-shadow: var(--vidro-sombra);
}

/* Modal: nasce escondido e só aparece quando ganha a classe "active". */
.modal {
  display: none;
  position: fixed;
  z-index: 50;
  left: 0; top: 0;
  width: 100%; height: 100%;
  overflow: auto;
  background-color: var(--modal-fundo);
}
.modal.active { display: flex; }

.nav-link {
  display: flex; align-items: center; gap: 0.75rem;
  width: 100%;
  padding: 0.625rem 0.875rem; border-radius: 0.625rem;
  color: var(--nav-texto); font-size: 0.875rem; font-weight: 500;
  transition: background-color .15s, color .15s;
}
.nav-link svg { width: 1.25rem; height: 1.25rem; flex-shrink: 0; }
.nav-link:hover { background: var(--menu-hover); color: var(--nav-texto-hover); }
.nav-link.nav-active { background: var(--nav-ativo-fundo); color: var(--nav-ativo-texto); }
.nav-link.nav-active svg { color: var(--nav-ativo-icone); }

/* Tabelas: viram cards empilhados abaixo de lg (mesma quebra da sidebar).
   Cada <td> precisa de data-label="Coluna" para mostrar o rótulo. */
@media (max-width: 1023px) {
  .responsive-table thead { display: none; }
  .responsive-table tr {
    display: block;
    background: var(--cartao-linha-fundo);
    border: 1px solid var(--cartao-linha-borda);
    border-radius: 0.625rem;
    margin-bottom: 0.625rem;
    padding: 0.25rem 0;
  }
  .responsive-table td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 0.5rem 1rem !important;
    text-align: right;
    border: none;
    max-width: none !important;
  }
  .responsive-table td + td { border-top: 1px solid var(--cartao-linha-divisor); }
  .responsive-table td::before {
    content: attr(data-label);
    font-weight: 600;
    font-size: 0.65rem;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: rgb(var(--c-gray-400));
    text-align: left;
    flex: 0 0 auto;
  }
  .responsive-table td .flex { flex-wrap: wrap; justify-content: flex-end; }
  .responsive-table td[colspan] { justify-content: center; text-align: center; }
  .responsive-table td[colspan]::before { display: none; }
}

/* No celular, campo com letra menor que 16px faz o iPhone dar zoom
   sozinho ao tocar — o que desalinha a tela toda. */
@media (max-width: 767px) { input, select, textarea { font-size: 16px !important; } }

/* Trava: nada empurra a página para os lados.
   É `clip`, não `hidden`, DE PROPÓSITO: com `hidden` o navegador cria uma
   caixa de rolagem escondida no <body>, e isso QUEBRA o "sticky" — foi o
   defeito de 28/08/2026, em que a barra de cima e o menu subiam junto com
   a página. O `clip` corta o que passa dos lados sem criar essa caixa. */
html, body { max-width: 100%; overflow-x: clip; }
select, input, textarea { max-width: 100%; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* Os dois ícones do botão de tema: o do sol aparece no escuro (é para onde
   o clique leva), o da lua aparece no claro. */
:root[data-tema="claro"] .so-escuro { display: none; }
.so-claro { display: none; }
:root[data-tema="claro"] .so-claro { display: inline; }