/* =====================================================================
   CONSELLER — Global Theme Layer v6
   Single source of truth for Dark / Light / System.
   Brand: Verde Pitão (#16A34A light / #22C55E dark). Mesmo verde cobre
   marca E estado "sucesso" — vermelho = erro, âmbar = alerta, azul só
   onde semanticamente necessário (ex.: badge "info"). Loaded globally
   by server.js, including future modules rendered as HTML.

   Escala de espaçamento, raio e z-index centralizadas aqui (Fase 1 da
   reforma de UI) — antes só existiam copiadas dentro do <style> de
   cada página, com valores que já haviam divergido entre si.
   ===================================================================== */
:root{
  --csl-brand-green:#16A34A;--csl-brand-green-2:#22C55E;--csl-success:#22C55E;--csl-warning:#F59E0B;--csl-danger:#EF4444;--csl-purple:#8B5CF6;--csl-theme-ease:cubic-bezier(.2,.8,.2,1);
  /* Aliases no nome pedido pelo briefing da reforma anterior — o comentário já
     dizia "nunca uma segunda fonte", mas esses 5 ficaram hex fixo aqui no
     :root em vez de var(--accent...): não acompanhavam a troca de tema.
     Corrigido pra apontar de verdade pros tokens por tema, abaixo. */
  --cs-primary:var(--accent);--cs-primary-hover:var(--accent-2);--cs-primary-active:var(--accent-active);--cs-primary-soft:var(--accent-soft);--cs-primary-soft-2:var(--accent-soft-2);
  --cs-danger:var(--danger);--cs-warning:var(--warn);--cs-success:var(--csl-success);
  /* Escala de espaçamento (Parte 6) */
  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:20px;--sp-6:24px;--sp-7:32px;--sp-8:40px;--sp-9:48px;
  /* Raio — --radius-btn é o raio de botão (7px, dentro da faixa 6-8px que o DESIGN.md pede;
     ficou em 4px de propósito numa rodada anterior pra não mexer em todo botão do sistema
     sem pedido explícito — revisado agora que o pedido é justamente esse); os demais servem
     cards/modais/etc. Antes só existiam copiados dentro do <style> de 8 páginas legadas;
     páginas mais novas (conciliacao-*) não tinham nenhum --radius-*, então herdavam "unset"
     nos componentes globais que dependem dele (.csl-modal, .empty-state, .skeleton). */
  --radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-xl:22px;--radius-btn:7px;
  /* Z-index */
  --z-dropdown:100;--z-sticky:110;--z-modal:1000;--z-toast:1100;--z-tooltip:1200;
  /* Breakpoints (documentação/uso em JS — @media não lê custom property) */
  --bp-tablet:768px;--bp-desktop:1280px;--bp-wide:1440px;
}
html[data-theme="dark"]{color-scheme:dark;--bg-0:#020914;--bg-1:#04111F;--bg-2:#08192B;--bg-3:#0B2138;--bg-4:#10304F;--border:rgba(120,200,150,.10);--border-strong:rgba(120,200,150,.22);--text-0:#F4F8FF;--text-1:#B4C6DC;--text-2:#7189A5;--accent:#22C55E;--accent-2:#4ADE80;--accent-active:#16A34A;--accent-ink:#FFFFFF;--accent-soft:rgba(34,197,94,.16);--accent-soft-2:rgba(34,197,94,.08);--danger:#FF4D5E;--danger-soft:rgba(255,77,94,.14);--warn:#FFAE32;--warn-soft:rgba(255,174,50,.14);--info:#25D9FF;--csl-success-ink:#65efaa;--csl-warn-ink:#ffc768;--csl-danger-ink:#ff9ba5;--csl-info-ink:#7dd8ff;--shadow-sm:0 1px 2px rgba(0,0,0,.42);--shadow-md:0 18px 45px rgba(0,0,0,.38);--csl-sidebar-bg:linear-gradient(180deg,#0A1A10 0%,#04111F 100%);--csl-app-glow-a:rgba(34,197,94,.13);--csl-app-glow-b:rgba(74,222,128,.07);--csl-loader-bg:rgba(3,11,18,.96);--csl-toast-bg:rgba(8,20,30,.97);--csl-modal-scrim:rgba(2,9,20,.72);--csl-logo:url('/conseller-ui/conseller-logo.svg');
  /* DESIGN.md — Seção 3: nomes semânticos oficiais, só apontando pros tokens
     acima (nunca um hex novo) — instalação da fundação global, sem mudar
     nenhum valor visual já em produção. */
  --background:var(--bg-0);--surface:var(--bg-2);--surface-soft:var(--bg-1);--surface-elevated:var(--bg-3);
  --text-primary:var(--text-0);--text-secondary:var(--text-1);--text-muted:var(--text-2);
  --brand:var(--accent);--brand-hover:var(--accent-2);--brand-active:var(--accent-active);
  --success:var(--csl-success);--warning:var(--warn)}
html[data-theme="light"]{color-scheme:light;--bg-0:#F7F8FA;--bg-1:#FFFFFF;--bg-2:#FFFFFF;--bg-3:#F1F3F2;--bg-4:#E7EAE8;--border:#E5E7EB;--border-strong:#D3D7DC;--text-0:#262626;--text-1:#595959;--text-2:#8C8C8C;--accent:#16A34A;--accent-2:#22C55E;--accent-active:#15803D;--accent-ink:#FFFFFF;--accent-soft:#DCFCE7;--accent-soft-2:#F0FDF4;--danger:#EB4D65;--danger-soft:rgba(235,77,101,.10);--warn:#F5AD05;--warn-soft:rgba(245,173,5,.12);--info:#007FAE;--csl-success-ink:#15803D;--csl-warn-ink:#8B5900;--csl-danger-ink:#A32A40;--csl-info-ink:#176078;--shadow-sm:0 1px 3px rgba(25,20,15,.07);--shadow-md:0 18px 45px rgba(35,28,20,.12);--csl-sidebar-bg:linear-gradient(180deg,#FFFFFF 0%,#F7F8FA 100%);--csl-app-glow-a:rgba(22,163,74,.05);--csl-app-glow-b:rgba(34,197,94,.035);--csl-loader-bg:rgba(247,248,250,.97);--csl-toast-bg:rgba(255,255,255,.98);--csl-modal-scrim:rgba(38,38,38,.35);--csl-logo:url('/conseller-ui/conseller-logo-light.svg');
  --background:var(--bg-0);--surface:var(--bg-2);--surface-soft:var(--bg-1);--surface-elevated:var(--bg-3);
  --text-primary:var(--text-0);--text-secondary:var(--text-1);--text-muted:var(--text-2);
  --brand:var(--accent);--brand-hover:var(--accent-2);--brand-active:var(--accent-active);
  --success:var(--csl-success);--warning:var(--warn)}
html{overflow-x:hidden}
body{background:var(--bg-0)!important;color:var(--text-0)!important;font-family:'Inter',var(--font,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif)!important;transition:background-color .18s var(--csl-theme-ease),color .18s var(--csl-theme-ease)}
body:before{background:radial-gradient(circle at 12% 4%,var(--csl-app-glow-a),transparent 32%),radial-gradient(circle at 88% 8%,var(--csl-app-glow-b),transparent 28%)!important}
.csl-sidebar{background:var(--csl-sidebar-bg)!important;border-color:var(--border)!important;box-shadow:16px 0 50px rgba(0,0,0,.08)!important}
.csl-topbar,.card,.csl-card,.panel,.box{background-color:var(--bg-2)!important;border-color:var(--border)!important;color:var(--text-0)}
.csl-navlink{color:var(--text-1)!important;text-decoration:none!important}.csl-navlink:hover{background:var(--bg-3)!important;color:var(--text-0)!important}.csl-navlink.csl-active{background:var(--accent-soft)!important;color:var(--accent)!important;box-shadow:inset 3px 0 0 var(--accent)}
.csl-subnav-link{color:var(--text-2)!important;text-decoration:none!important}.csl-subnav-link:hover{color:var(--text-0)!important}.csl-subnav-link.csl-active{color:var(--accent)!important}
.csl-nav-group-toggle{color:var(--text-1)!important;text-decoration:none!important}
.csl-avatar{background:var(--bg-3)!important;border-color:var(--border-strong)!important}.csl-user-role,.muted,.csl-muted{color:var(--text-2)!important}
input:not([type=checkbox]):not([type=radio]),select,textarea{background:var(--bg-3)!important;color:var(--text-0)!important;border-color:var(--border-strong)!important}
/* Seta do <select> e lupa do SearchInput (Verde Pitão) — cor embutida no SVG,
   por tema/estado, já que background-image não lê var(). "html select"/
   "html input" (2 seletores de tipo) só existe pra vencer, sem !important
   sobrando, a regra de cima (que já é !important no shorthand "background"
   e reseta background-image junto). Estrutura (padding/posição/tamanho) fica
   em design-system.css; só a cor de cada estado mora aqui. */
html[data-theme="dark"] select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237189A5' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")!important}
html[data-theme="dark"] select:hover,html[data-theme="dark"] select:focus,html[data-theme="dark"] select:focus-visible{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322C55E' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")!important}
html[data-theme="light"] select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238C8C8C' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")!important}
html[data-theme="light"] select:hover,html[data-theme="light"] select:focus,html[data-theme="light"] select:focus-visible{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316A34A' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")!important}
html[data-theme="dark"] input[type="search"],html[data-theme="dark"] input.search{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237189A5' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E")!important}
html[data-theme="dark"] input[type="search"]:hover,html[data-theme="dark"] input.search:hover,html[data-theme="dark"] input[type="search"]:focus,html[data-theme="dark"] input.search:focus{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322C55E' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E")!important}
html[data-theme="light"] input[type="search"],html[data-theme="light"] input.search{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238C8C8C' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E")!important}
html[data-theme="light"] input[type="search"]:hover,html[data-theme="light"] input.search:hover,html[data-theme="light"] input[type="search"]:focus,html[data-theme="light"] input.search:focus{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316A34A' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E")!important}
table thead th,.table-wrap thead th{background:var(--bg-2)!important}table tbody tr:hover{background:var(--accent-soft)!important}
.csl-modal-overlay{background:var(--csl-modal-scrim)!important}.csl-modal{background:var(--bg-2)!important}.cui-toast{background:var(--csl-toast-bg)!important;color:var(--text-0)!important;border-color:var(--border-strong)!important}
#cui-loader{background:var(--csl-loader-bg)!important}.cui-loader-box{color:var(--text-1)!important}
/* Brand */
.csl-sidebar-head{min-height:74px;padding-top:13px!important;padding-bottom:13px!important}.csl-brand{gap:11px!important;overflow:visible!important}.csl-brand-mark{width:39px!important;height:39px!important;min-width:39px!important;border-radius:0!important;background-image:url('/conseller-ui/conseller-mark.svg')!important;filter:drop-shadow(0 1px 10px rgba(32,180,255,.38))!important;transition:transform .32s cubic-bezier(.2,.8,.2,1),filter .32s ease!important}.csl-brand:hover .csl-brand-mark{transform:translateY(-1px) scale(1.07);filter:drop-shadow(0 3px 16px rgba(32,180,255,.58))!important}.csl-brand:active .csl-brand-mark{transform:translateY(0) scale(1.02)}.csl-brand-name{font-size:15px!important;font-weight:850!important;letter-spacing:.7px!important;text-transform:uppercase;line-height:1.05;overflow:visible!important;background:linear-gradient(180deg,var(--text-0),var(--text-1));-webkit-background-clip:text;background-clip:text;color:transparent!important;display:flex;flex-direction:column}.csl-brand-name::after{content:'GESTÃO QUE IMPULSIONA'!important;font-size:6.4px;font-weight:700;letter-spacing:2px;color:var(--accent-2)!important;-webkit-text-fill-color:var(--accent-2);margin-top:5px;white-space:nowrap}
@media(prefers-reduced-motion:reduce){.csl-brand-mark{transition:none!important}.csl-brand:hover .csl-brand-mark,.csl-brand:active .csl-brand-mark{transform:none!important}}
.csl-shell.csl-collapsed .csl-brand-name{display:none!important}
.csl-auth-logo{margin:0 auto 18px!important;display:flex;justify-content:center}.csl-auth-logo img{content:var(--csl-logo);width:min(330px,88vw)!important;height:auto!important;max-height:92px!important;object-fit:contain;filter:drop-shadow(0 2px 26px rgba(32,180,255,.24))}.csl-auth-card{box-shadow:var(--shadow-md)!important;backdrop-filter:blur(16px)}
/* Theme selector */
.csl-theme-switcher{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:4px;margin:0 0 9px;border:1px solid var(--border);border-radius:11px;background:var(--bg-3)}
.csl-theme-choice{appearance:none;border:0!important;box-shadow:none!important;background:transparent!important;color:var(--text-2)!important;min-width:0;padding:7px 5px!important;border-radius:8px!important;font-size:11px!important;display:flex!important;justify-content:center;align-items:center;gap:5px;transform:none!important}.csl-theme-choice:hover{color:var(--text-0)!important;background:var(--bg-2)!important}.csl-theme-choice.is-active{color:var(--accent)!important;background:var(--accent-soft)!important;box-shadow:inset 0 0 0 1px rgba(34,197,94,.18)!important}.csl-theme-choice svg{width:14px;height:14px;stroke:currentColor;fill:none}
.csl-shell.csl-collapsed .csl-theme-switcher{grid-template-columns:1fr;padding:3px}.csl-shell.csl-collapsed .csl-theme-choice{display:none!important}.csl-shell.csl-collapsed .csl-theme-choice.is-active{display:flex!important}.csl-shell.csl-collapsed .csl-theme-label{display:none}
.csl-theme-floating{position:fixed;right:18px;top:18px;z-index:110;display:flex;align-items:center;gap:5px;padding:5px;border:1px solid var(--border);border-radius:12px;background:color-mix(in srgb,var(--bg-2) 88%,transparent);box-shadow:var(--shadow-sm);backdrop-filter:blur(14px)}.csl-theme-floating .csl-theme-switcher{margin:0;border:0;background:transparent;padding:0}
/* Tokens semânticos de texto sobre fundo suave (garante contraste em ambos os temas) */
.badge.success,.csl-badge.success,.pill.ok,.pill.real,.good{color:var(--csl-success-ink)!important}
.badge.warn,.csl-badge.warn,.pill.warn,.pill.pending,.status.warn,.alerta{color:var(--csl-warn-ink)!important}
.badge.danger,.csl-badge.danger,.bad,.toast.err,.csl-confirm-icon{color:var(--csl-danger-ink)!important}
.badge.accent,.csl-badge.accent{color:var(--accent)!important;border-color:var(--accent-soft)!important}
.alert.info{color:var(--csl-info-ink)!important}.alert.success{color:var(--csl-success-ink)!important}.alert.warn{color:var(--csl-warn-ink)!important}.alert.danger{color:var(--csl-danger-ink)!important}
[data-tip]::after{background:var(--bg-2)!important;color:var(--text-0)!important;border-color:var(--border-strong)!important}[data-tip]::before{border-top-color:var(--bg-2)!important}
.csl-security-note{color:var(--text-1)!important;background:var(--accent-soft)!important;border-color:var(--border-strong)!important}
.csl-status.ok{color:var(--csl-success-ink)!important}.csl-status.warn{color:var(--csl-warn-ink)!important}
.danger,.btn.danger{color:var(--csl-danger-ink)!important}
@media(max-width:760px){.csl-auth-logo img{width:min(285px,84vw)!important}.csl-theme-floating{right:10px;top:10px}.csl-sidebar-head{min-height:66px}.csl-brand-mark{width:36px!important;height:36px!important;min-width:36px!important}}
@media(prefers-reduced-motion:reduce){body{transition:none!important}}