/* ============================================================================
   SGCP — Design tokens (esquema C · Grafite & Índigo)
   Extraídos 1:1 do protótipo aprovado (App.dc.html / Validação da Fundação).
   Cole em assets/styles/tokens.css e importe no base.html.twig.
   NÃO invente valores: estes são a verdade visual. Tema por [data-theme].
   ============================================================================ */

:root{
  --font:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"Cascadia Mono","SF Mono",Consolas,monospace;
  --r-sm:4px;--r-md:8px;--r-lg:12px;--r-full:999px;
  --dur-1:120ms;--dur-2:200ms;--dur-3:320ms;--ease:cubic-bezier(.2,.7,.3,1);
  --z-drop:1000;--z-sticky:1020;--z-drawer:1200;--z-modal:1300;--z-toast:1400;--z-tip:1500;
  /* Sidebar — painel índigo fixo (mesmo azul do painel da tela de login, ver auth.css).
     Só o gradiente de fundo muda por tema (--sb-bg, abaixo); texto/estados ficam
     fixos nos dois temas, igual ao painel de login. */
  --sb-border:rgba(255,255,255,.14);
  --sb-item-hover:rgba(255,255,255,.08);
  --sb-item-active:rgba(255,255,255,.16);
  --sb-item-active-fg:#FFFFFF;
  --sb-accent:#818CF8;
  --sb-text:rgba(237,239,251,.72);
  --sb-text-muted:rgba(237,239,251,.55);
  --sb-text-strong:#EDEFFB;
  --sb-avatar-bg:rgba(255,255,255,.16);
  --sb-avatar-fg:#EDEFFB;
}

/* ---- Tema claro (padrão) ---- */
html{
  --bg:#F5F5F7;--surface:#FFFFFF;--surface-2:#EFEFF2;--surface-3:#E4E4E9;
  --border:#DCDCE2;--border-strong:#B4B4BE;
  --text-1:#1E1E24;--text-2:#4E4E58;--text-3:#6B6B76;--dis-text:#9C9CA6;--dis-bg:#EFEFF2;
  --hover-bg:#F2F2F5;--selected-bg:#EAECFB;
  --brand-bg:#4453D6;--brand-bg-hover:#3946BC;--brand-bg-active:#2F3AA0;--on-brand:#FFFFFF;
  --brand-text:#3A47C4;--brand-soft:#EAECFB;--brand-soft-text:#333FAE;--brand-border:#C3C9F2;
  --sec-bg:#0EA5A5;--sec-text:#0B7E7E;--sec-soft:#DFF3F3;
  --acc-bg:#E0A100;--acc-text:#7A5800;--acc-soft:#FBF0D2;
  --success:#1E8E5A;--success-text:#14663F;--success-soft:#E2F3EA;
  --warning:#C77700;--warning-text:#8A5200;--warning-soft:#FBEEDB;--on-warning:#241600;
  --danger:#C0392B;--danger-hover:#A93226;--danger-text:#9C2A1E;--danger-soft:#FAE7E4;
  --info:#2276C3;--info-text:#175B99;--info-soft:#E3EFFA;
  --sem-crit-dot:#C0392B;--sem-crit-bg:#FAE7E4;--sem-crit-fg:#9C2A1E;--sem-crit-bd:#EFC3BC;
  --sem-aten-dot:#D9720A;--sem-aten-bg:#FCEFE0;--sem-aten-fg:#8F4E00;--sem-aten-bd:#F2CFA4;
  --sem-mon-dot:#C9A227;--sem-mon-bg:#FBF3CF;--sem-mon-fg:#6F5A00;--sem-mon-bd:#E8D98A;
  --sem-conf-dot:#1E8E5A;--sem-conf-bg:#E2F3EA;--sem-conf-fg:#14663F;--sem-conf-bd:#B9E2CC;
  --sh-sm:0 1px 2px rgba(20,20,35,.08);--sh-md:0 2px 8px rgba(20,20,35,.10);
  --sh-lg:0 8px 24px rgba(20,20,35,.14);--sh-xl:0 16px 48px rgba(20,20,35,.18);
  --overlay:rgba(15,15,25,.55);
  /* Sidebar — painel índigo, igual ao painel da tela de login (tema claro) */
  --sb-bg:linear-gradient(180deg, #272E6E, #1F2455);
  --sb-bg-solid:#1F2455;
  --sb-shadow:1px 0 3px color-mix(in srgb, var(--brand-bg) 12%, transparent);
}

/* ---- Tema escuro ---- */
html[data-theme="dark"]{
  --bg:#131318;--surface:#1B1B22;--surface-2:#23232C;--surface-3:#2B2B36;
  --border:#32323E;--border-strong:#4C4C5C;
  --text-1:#EAEAF0;--text-2:#B4B4C2;--text-3:#8A8A9A;--dis-text:#61616E;--dis-bg:#20202A;
  --hover-bg:#20202A;--selected-bg:#23284E;
  --brand-bg:#5D6AE8;--brand-bg-hover:#6E7AEE;--brand-bg-active:#4A57D0;--on-brand:#FFFFFF;
  --brand-text:#A3ACF5;--brand-soft:#23284E;--brand-soft-text:#C0C6F8;--brand-border:#3C4380;
  --sec-bg:#12A5A5;--sec-text:#52C8C8;--sec-soft:#103939;
  --acc-bg:#E0A100;--acc-text:#E8BE55;--acc-soft:#3B2F0E;
  --success:#2A9463;--success-text:#6FCE9F;--success-soft:#143526;
  --warning:#D98A1E;--warning-text:#F0B45C;--warning-soft:#3B2A0D;--on-warning:#241600;
  --danger:#CF4A3C;--danger-hover:#D95B4D;--danger-text:#F08A7D;--danger-soft:#3F1B16;
  --info:#2F84D4;--info-text:#7CB8EC;--info-soft:#12304A;
  --sem-crit-dot:#E4685A;--sem-crit-bg:#42201B;--sem-crit-fg:#F49B8F;--sem-crit-bd:#6B342C;
  --sem-aten-dot:#E8933E;--sem-aten-bg:#3D2A12;--sem-aten-fg:#F2B978;--sem-aten-bd:#64451F;
  --sem-mon-dot:#D3BC3F;--sem-mon-bg:#37310F;--sem-mon-fg:#E4D07A;--sem-mon-bd:#5C531F;
  --sem-conf-dot:#43B884;--sem-conf-bg:#17392A;--sem-conf-fg:#83D6AC;--sem-conf-bd:#2B5C43;
  --sh-sm:0 1px 2px rgba(0,0,0,.4);--sh-md:0 2px 10px rgba(0,0,0,.45);
  --sh-lg:0 8px 28px rgba(0,0,0,.5);--sh-xl:0 16px 52px rgba(0,0,0,.6);
  --overlay:rgba(3,3,8,.7);
  /* Sidebar — painel índigo, igual ao painel da tela de login (tema escuro) */
  --sb-bg:linear-gradient(180deg, #191D45, #12152F);
  --sb-bg-solid:#12152F;
  --sb-shadow:1px 0 3px rgba(0,0,0,.35);
}

/* ---- Reset de corpo + rolagem temada (do protótipo) ---- */
body{
  margin:0;background:var(--bg);color:var(--text-1);font-family:var(--font);
  transition:background-color var(--dur-3) var(--ease),color var(--dur-3) var(--ease);
}
*{scrollbar-width:thin;scrollbar-color:var(--border-strong) transparent}
*::-webkit-scrollbar{width:12px;height:12px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:var(--r-full);border:3px solid transparent;background-clip:padding-box;transition:background-color var(--dur-2) var(--ease)}
*::-webkit-scrollbar-thumb:hover{background:var(--text-3);background-clip:padding-box}
*::-webkit-scrollbar-thumb:active{background:var(--brand-bg);background-clip:padding-box}
*::-webkit-scrollbar-corner{background:transparent}

/* ---- Keyframes usados pelo protótipo ---- */
@keyframes sgcp-shimmer{0%{background-position:-400px 0}100%{background-position:400px 0}}
@keyframes sgcp-spin{to{transform:rotate(360deg)}}
@keyframes sgcp-toast-in{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}
@keyframes sgcp-modal-in{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
@keyframes sgcp-modal-out{from{opacity:1;transform:none}to{opacity:0;transform:translateY(10px) scale(.98)}}
@keyframes sgcp-modal-overlay-in{from{opacity:0}to{opacity:1}}
@keyframes sgcp-modal-overlay-out{from{opacity:1}to{opacity:0}}
@keyframes sgcp-fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){*{animation:none !important;transition:none !important}}

/* Nota: --font usa "Segoe UI" (stack de sistema, sem webfont). Em ambientes
   sem Segoe UI o fallback system-ui mantém a métrica próxima. Se o TJGO exigir
   render idêntico multiplataforma, hospedar uma fonte equivalente é decisão
   de infra — não altere os tokens. */