/* Tokens de tema do painel e da tela de login.
   Fonte unica de cores: app.css e login.html usam apenas var(--...).
   Tres estados: claro (padrao), escuro ([data-theme="dark"]) e sistema
   (sem atributo; segue prefers-color-scheme). */

/* ------------------------------------------------------------ tema claro */
:root {
  color-scheme: light;

  /* fundos e superficies */
  --bg:#f8fafc;            /* fundo da pagina - mais suave */
  --bg-2:#f1f5f9;          /* hover de tabela, bulkbar, empty */
  --surface-3:#e2e8f0;     /* chips e trilhos de barra */
  --card:rgba(255, 255, 255, 0.85); /* Efeito glass */
  --input-bg:#ffffff;
  --cam-bg:#0f172a;        /* palco do video (sempre escuro) */

  /* texto */
  --text:#1e293b;
  --muted:#64748b;
  --slate:#94a3b8;         /* kpi.slate e links discretos da sidebar */
  --border:rgba(226, 232, 240, 0.8);

  /* acento */
  --accent:#4f46e5;        /* Indigo vibrante moderno */
  --accent-soft:#e0e7ff;
  --accent-border:#c7d2fe;
  --on-accent:#ffffff;     /* texto sobre accent, danger e warn solidos */

  /* estados */
  --danger:#ef4444; --danger-bg:#fef2f2; --danger-fg:#991b1b; --danger-border:#fecaca;
  --success:#10b981; --success-bg:#ecfdf5; --success-border:#a7f3d0;
  --warn:#f59e0b; --warn-bg:#fffbeb; --warn-hover:#fef3c7;

  /* prioridade de alertas */
  --prio-alta:#ef4444; --prio-media:#f97316; --prio-baixa:#eab308;

  /* sidebar */
  --side:rgba(15, 23, 42, 0.95); --side-hover:rgba(30, 41, 59, 0.8); --side-active:#4f46e5;
  --side-fg:#cbd5e1; --side-fg-strong:#ffffff; --side-muted:#94a3b8;
  --side-group:#64748b; --side-border:rgba(255,255,255,0.1); --side-count:rgba(255,255,255,0.15);

  /* botao secundario escuro (.btn.s) */
  --btn-dark-bg:#1e293b; --btn-dark-fg:#ffffff;

  /* lightbox (sempre escuro; nao muda com o tema) */
  --lb-bg:rgba(15,23,42,.95); --lb-stage:#0b1220;
  --lb-fg:#e2e8f0; --lb-fg-soft:#cbd5e1; --lb-fg-strong:#ffffff;
  --lb-btn:rgba(255,255,255,0.1); --lb-btn-hover:rgba(255,255,255,0.2);
  --lb-mark:#38bdf8; --lb-mask:rgba(8,15,30,.45);

  /* toast, switch, overlays */
  --toast-bg:rgba(30,41,59,0.95); --toast-fg:#f8fafc; --toast-err:#991b1b;
  --switch-off:#cbd5e1; --switch-knob:#ffffff;
  --overlay-bg:rgba(255,255,255,.9);   /* caixa de selecao sobre imagem */
  --backdrop:rgba(15,23,42,.4);       /* fundo do <dialog> com mais blur no css */
  --map-grid:rgba(15,23,42,.12);

  /* foco, sombras, raios */
  --focus:#6366f1;
  --shadow:0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
  --shadow-md:0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.05);
  --shadow-lg:0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  --shadow-toast:0 20px 25px -5px rgba(0,0,0,0.15);
  --radius:16px; --radius-sm:8px;
}

/* ----------------------------------------------------------- tema escuro */
:root[data-theme="dark"] {
  color-scheme: dark;

  --bg:#020617; --bg-2:#0f172a; --surface-3:#1e293b;
  --card:rgba(15, 23, 42, 0.7); --input-bg:rgba(30, 41, 59, 0.5); --cam-bg:#000000;

  --text:#f8fafc; --muted:#94a3b8; --slate:#64748b; --border:rgba(51, 65, 85, 0.6);

  --accent:#6366f1; --accent-soft:rgba(79, 70, 229, 0.2); --accent-border:rgba(99, 102, 241, 0.3);
  --on-accent:#ffffff;

  --danger:#f87171; --danger-bg:rgba(153, 27, 27, 0.2); --danger-fg:#fca5a5; --danger-border:rgba(220, 38, 38, 0.3);
  --success:#34d399; --success-bg:rgba(6, 78, 59, 0.2); --success-border:rgba(16, 185, 129, 0.3);
  --warn:#fbbf24; --warn-bg:rgba(146, 64, 14, 0.2); --warn-hover:rgba(180, 83, 9, 0.3);

  --prio-alta:#f87171; --prio-media:#fb923c; --prio-baixa:#facc15;

  --side:rgba(2, 6, 23, 0.8); --side-hover:rgba(30, 41, 59, 0.8); --side-active:#6366f1;
  --side-fg:#cbd5e1; --side-fg-strong:#ffffff; --side-muted:#64748b;
  --side-group:#475569; --side-border:rgba(255,255,255,0.05); --side-count:rgba(255,255,255,0.1);

  --btn-dark-bg:rgba(51, 65, 85, 0.8); --btn-dark-fg:#f8fafc;

  --toast-bg:rgba(15, 23, 42, 0.95); --toast-fg:#f8fafc; --toast-err:#7f1d1d;
  --switch-off:#334155;
  --overlay-bg:rgba(2, 6, 23, 0.8);
  --backdrop:rgba(0,0,0,.6);
  --map-grid:rgba(229,231,235,.08);

  --focus:#818cf8;
  --shadow:0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
  --shadow-md:0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -4px rgba(0, 0, 0, 0.4);
  --shadow-lg:0 25px 50px -12px rgba(0, 0, 0, 0.6);
  --shadow-toast:0 20px 25px -5px rgba(0,0,0,0.5);
}

/* --------------------------------------------------------- modo sistema */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --bg:#020617; --bg-2:#0f172a; --surface-3:#1e293b;
    --card:rgba(15, 23, 42, 0.7); --input-bg:rgba(30, 41, 59, 0.5); --cam-bg:#000000;

    --text:#f8fafc; --muted:#94a3b8; --slate:#64748b; --border:rgba(51, 65, 85, 0.6);

    --accent:#6366f1; --accent-soft:rgba(79, 70, 229, 0.2); --accent-border:rgba(99, 102, 241, 0.3);
    --on-accent:#ffffff;

    --danger:#f87171; --danger-bg:rgba(153, 27, 27, 0.2); --danger-fg:#fca5a5; --danger-border:rgba(220, 38, 38, 0.3);
    --success:#34d399; --success-bg:rgba(6, 78, 59, 0.2); --success-border:rgba(16, 185, 129, 0.3);
    --warn:#fbbf24; --warn-bg:rgba(146, 64, 14, 0.2); --warn-hover:rgba(180, 83, 9, 0.3);

    --prio-alta:#f87171; --prio-media:#fb923c; --prio-baixa:#facc15;

    --side:rgba(2, 6, 23, 0.8); --side-hover:rgba(30, 41, 59, 0.8); --side-active:#6366f1;
    --side-fg:#cbd5e1; --side-fg-strong:#ffffff; --side-muted:#64748b;
    --side-group:#475569; --side-border:rgba(255,255,255,0.05); --side-count:rgba(255,255,255,0.1);

    --btn-dark-bg:rgba(51, 65, 85, 0.8); --btn-dark-fg:#f8fafc;

    --toast-bg:rgba(15, 23, 42, 0.95); --toast-fg:#f8fafc; --toast-err:#7f1d1d;
    --switch-off:#334155;
    --overlay-bg:rgba(2, 6, 23, 0.8);
    --backdrop:rgba(0,0,0,.6);
    --map-grid:rgba(229,231,235,.08);

    --focus:#818cf8;
    --shadow:0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
    --shadow-md:0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -4px rgba(0, 0, 0, 0.4);
    --shadow-lg:0 25px 50px -12px rgba(0, 0, 0, 0.6);
    --shadow-toast:0 20px 25px -5px rgba(0,0,0,0.5);
  }
}

/* Foco visivel por teclado, igual nas duas paginas */
:focus-visible { outline:2px solid var(--focus); outline-offset:3px; border-radius:3px; }