/* Tema do Apex ERP: só dois temas, escuro e claro, derivados das duas cores
   da marca — #11212D e #CCD0CF. O escuro é o padrão; a escolha fica
   salva no navegador (tema.js). Vermelho/verde/amarelo/azul continuam só
   para status (alerta, positivo, atenção, link), ajustados ao fundo. */

:root,
:root[data-theme="escuro"] {
  --marca-escura: #11212D;
  --marca-clara:  #CCD0CF;

  --bg:      #11212D;
  --bg2:     #0d1a24;
  --panel:   #172b3a;
  --card:    #172b3a;
  --border:  rgba(204, 208, 207, .16);
  --text:    #CCD0CF;
  --muted:   #8e9a9f;
  --accent:  #CCD0CF;
  --on-accent: #11212D;
  --hover:   rgba(204, 208, 207, .08);
  --sombra:  rgba(0, 0, 0, .35);

  --green:  #5fd08a;
  --red:    #f2837b;
  --yellow: #e8c062;
  --blue:   #8fb8e8;
  --purple: #b9a2ec;

  --green-bg:  rgba(95, 208, 138, .14);
  --red-bg:    rgba(242, 131, 123, .14);
  --yellow-bg: rgba(232, 192, 98, .14);
  --blue-bg:   rgba(143, 184, 232, .14);

  /* Letra sobre fundo de status: cada cor vem com a sua, sempre acima de 4,5:1 */
  --on-green:  #0B1A12;
  --on-red:    #11212D;
  --on-yellow: #11212D;
  --on-blue:   #11212D;
  --on-purple: #11212D;

  color-scheme: dark;
}

:root[data-theme="claro"] {
  --bg:      #F3F5F5;
  --bg2:     #E7EAEA;
  --panel:   #FFFFFF;
  --card:    #FFFFFF;
  --border:  rgba(17, 33, 45, .16);
  --text:    #11212D;
  --muted:   #55636B;
  --accent:  #11212D;
  --on-accent: #CCD0CF;
  --hover:   rgba(17, 33, 45, .07);
  --sombra:  rgba(17, 33, 45, .12);

  --green:  #1d6b3c;
  --red:    #a8302a;
  --yellow: #8a5a0a;
  --blue:   #1f4f86;
  --purple: #5b3d99;

  --green-bg:  rgba(29, 107, 60, .12);
  --red-bg:    rgba(168, 48, 42, .12);
  --yellow-bg: rgba(138, 90, 10, .12);
  --blue-bg:   rgba(31, 79, 134, .12);

  --on-green:  #FFFFFF;
  --on-red:    #FFFFFF;
  --on-yellow: #FFFFFF;
  --on-blue:   #FFFFFF;
  --on-purple: #FFFFFF;

  color-scheme: light;
}

/* Nomes antigos usados por algumas telas, apontando para o tema */
:root[data-theme] {
  --bg-card: var(--card);  --bg-2: var(--bg2);   --bg-hover: var(--hover);
  --fg: var(--text);       --label: var(--muted); --text-muted: var(--muted);
  --pos: var(--green);     --verde: var(--green); --neg: var(--red); --warn: var(--yellow);
}

/* Base comum a todas as telas */
html, body { background: var(--bg) !important; color: var(--text); }
.topbar { background: var(--bg2) !important; border-color: var(--border) !important; box-shadow: 0 1px 3px var(--sombra) !important; }
.topbar .brand { color: var(--text) !important; }
.topbar nav a:hover { background: var(--hover) !important; }
.topbar nav a.ativo { background: var(--hover) !important; color: var(--text) !important; }
.card, .modal, .modal-content, .panel, .painel { background: var(--card); border-color: var(--border); color: var(--text); }
thead { background: var(--bg2) !important; }
th { color: var(--muted); text-transform: none !important; letter-spacing: normal !important; }
td, th { border-color: var(--border) !important; }
tr:hover td { background: var(--hover); }
input, select, textarea { background: var(--card); color: var(--text); border-color: var(--border); }
input::placeholder, textarea::placeholder { color: var(--muted); }
a { color: var(--blue); }
button.primario, .btn-primario, .btn-primary { background: var(--accent) !important; color: var(--on-accent) !important; border-color: var(--accent) !important; }

/* Botão de troca de tema (inserido pelo tema.js) */
.tema-toggle {
  position: fixed; right: 14px; bottom: 14px; z-index: 9999;
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--card); color: var(--text);
  box-shadow: 0 2px 8px var(--sombra); cursor: pointer; font-size: 17px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.tema-toggle:hover { background: var(--panel); }
@media print { .tema-toggle { display: none; } }