/* ============================================================================
   OXTON LAB — SONO Skin
   Camada de re-skin que dá ao painel a aparência do sistema SONO:
   sidebar clara, superfícies planas (sem sombras/animações), paleta azul SONO,
   cantos suaves, tema claro/escuro. Carregada por ÚLTIMO nos layouts do app,
   sobrepondo admin.css / sono.css / premium.css sem alterá-los.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   1) Tokens — tema claro (SONO). Aplica a todos os escopos de layout.
   --------------------------------------------------------------------------- */
:root,
.adm-body, .auth-body, .pub-body, .vol-body, .report-body, .print-body{
  --bg:#f4f6fb;
  --bg2:#ffffff;
  --card:#ffffff;
  --card2:#eef1f7;
  --side:#ffffff;               /* sidebar clara (antes navy #0a1124) */
  --line:#dde3ee;
  --line2:#cfd7e6;
  --txt:#1a2030;
  --txt2:#5b6577;
  --txt3:#8a93a6;
  --blue:#2f5bff;
  --blue2:#1c3ad1;
  --brand-soft:#e7edff;         /* fundo suave da marca (novo) */
  --green:#12805c; --orange:#b45309; --red:#c62b3f; --violet:#8b5cf6;
  --r:12px; --r-sm:8px;
}

/* Fundo e fonte consistentes */
html{background:var(--bg)}
.adm-body,.auth-body,.pub-body,.vol-body{
  background:var(--bg);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
}

/* ---------------------------------------------------------------------------
   2) Tema escuro (SONO). Ativado por [data-theme="dark"] no <html> OU
   body.theme-dark (mecanismo herdado). Redefine os tokens — como quase tudo
   é baseado em tokens, o app inteiro acompanha.
   --------------------------------------------------------------------------- */
:root[data-theme="dark"],
[data-theme="dark"] .adm-body, [data-theme="dark"] .auth-body, [data-theme="dark"] .pub-body,
body.theme-dark.adm-body, body.theme-dark.auth-body, body.theme-dark.pub-body, body.theme-dark{
  --bg:#0e1220;
  --bg2:#161c2d;
  --card:#161c2d;
  --card2:#1e2537;
  --side:#141a29;
  --line:#2a3245;
  --line2:#39435a;
  --txt:#e7ebf3;
  --txt2:#9aa4b8;
  --txt3:#6b7488;
  --blue:#5b7dff;
  --blue2:#93a8ff;
  --brand-soft:#1c2542;
  --green:#3dd4a0; --orange:#f0b45e; --red:#ff6b7d; --violet:#a78bfa;
}
body.theme-dark{background:var(--bg);color:var(--txt)}

/* ---------------------------------------------------------------------------
   3) Sidebar clara — corrige cores que o admin.css força para "sempre escura"
   (bloco .adm-side{color:#cdd9e8} etc.). Usamos especificidade .adm-body .adm-side
   para vencer com folga e contraste legível sobre fundo branco.
   --------------------------------------------------------------------------- */
.adm-body .adm-side{border-right:1px solid var(--line);background:var(--side);color:var(--txt)}
.adm-body .adm-side__brand .adm-logo{color:var(--txt)}
.adm-body .adm-side__brand .adm-logo b{color:var(--blue)}
.adm-body .adm-side .adm-logo__sub{color:var(--txt2)}
.adm-body .adm-side .adm-logo__mark{opacity:.9}

/* Rótulos de seção — bem legíveis */
.adm-body .adm-nav__label{color:var(--txt2);font-weight:700}

/* Links inativos: slate escuro legível + ícone médio */
.adm-body .adm-nav__link{color:#374151;font-weight:600}
.adm-body .adm-nav__link svg{color:#64748b}

/* Hover */
.adm-body .adm-nav__link:hover{background:var(--card2);color:var(--txt)}
.adm-body .adm-nav__link:hover svg{color:var(--txt)}

/* Ativo: fundo suave da marca + texto/ícone da marca (antes era branco → sumia) */
.adm-body .adm-nav__link.is-active{
  background:var(--brand-soft);
  color:var(--blue2);
  font-weight:700;
  box-shadow:inset 3px 0 0 var(--blue);
}
.adm-body .adm-nav__link.is-active svg{color:var(--blue2)}

.adm-body .adm-side__foot,
.adm-body .adm-side__foot--brand{background:var(--side);border-top:1px solid var(--line);color:var(--txt2)}
.adm-body .adm-workspace,.adm-body .adm-search{background:var(--card2);border-color:var(--line)}
.adm-body .adm-workspace__txt strong{color:var(--txt)}
.adm-body .adm-workspace__txt span{color:var(--txt2)}
.adm-body .adm-search,.adm-body .adm-search input{color:var(--txt)}
.adm-online{border-color:var(--card)}
.adm-body .adm-user__txt strong{color:var(--txt)}
.adm-body .adm-user__txt span{color:var(--txt2)}

/* No tema ESCURO a sidebar volta a texto claro (herda tokens do bloco dark) */
:root[data-theme="dark"] .adm-body .adm-side,
body.theme-dark .adm-side{color:var(--txt)}
:root[data-theme="dark"] .adm-body .adm-nav__link,
body.theme-dark .adm-nav__link{color:var(--txt2)}
:root[data-theme="dark"] .adm-body .adm-nav__link svg,
body.theme-dark .adm-nav__link svg{color:var(--txt3)}

/* ---------------------------------------------------------------------------
   4) Sem sombras / sem animações de hover (identidade SONO + preferência).
   --------------------------------------------------------------------------- */
.card,.kpi,.subcard,.inst-card,.net-card,.pub-card,.reg-kpi,.reg-hero,
.adm-noti__panel,.adm-usermenu__panel,.adm-switcher__panel,.ox-srch,
.desc-card,.article-box__lang,.tcle-box{
  box-shadow:none !important;
}
.inst-card:hover,.net-card:hover,.card:hover,.kpi:hover{
  transform:none !important; box-shadow:none !important;
}
.inst-card{transition:border-color .12s}
.inst-card:hover{border-color:var(--blue)}
.net-card:hover{border-color:var(--blue)}
.mdp__dot:hover{transform:translate(-50%,-50%)} /* remove o "pulo" do ponto */

/* ---------------------------------------------------------------------------
   5) Superfícies e componentes base
   --------------------------------------------------------------------------- */
.adm-header{background:var(--bg2);border-bottom:1px solid var(--line)}
.adm-content{background:var(--bg)}
.card{border:1px solid var(--line);border-radius:var(--r);background:var(--card)}

/* Cartões KPI no estilo "stat tile" do SONO */
.kpi{border:1px solid var(--line);border-radius:var(--r);background:var(--card);padding:1rem 1.1rem}
.kpi__label{color:var(--txt2);font-size:.74rem;text-transform:uppercase;letter-spacing:.04em}
.kpi__value{font-size:1.7rem;font-weight:700;color:var(--txt);font-variant-numeric:tabular-nums}

/* Botões */
.adm-btn{background:var(--blue);border:1px solid var(--blue);border-radius:var(--r-sm);color:#fff;font-weight:600}
.adm-btn:hover{background:var(--blue2);border-color:var(--blue2)}
.adm-btn--ghost{background:var(--card);border-color:var(--line);color:var(--txt)}
.adm-btn--ghost:hover{background:var(--card2)}
.adm-icbtn{background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm);color:var(--txt2)}
.adm-icbtn:hover{background:var(--card2);color:var(--txt);border-color:var(--line2)}

/* Pills / badges suaves (estilo SONO) */
.adm-pill{border-radius:100px;font-weight:600;font-size:.74rem}
.adm-pill--info{background:var(--brand-soft);color:var(--blue2)}

/* Tabelas */
.adm-table th{color:var(--txt3);border-bottom:1px solid var(--line)}
.adm-table td{border-bottom:1px solid var(--line)}
.adm-table tbody tr:hover{background:var(--card2)}

/* Campos de formulário */
.adm-input,.adm-select,.adm-textarea,.q-input,input[type=text],input[type=email],
input[type=password],input[type=number],input[type=search],input[type=date],input[type=time],
select,textarea{
  border:1px solid var(--line);border-radius:var(--r-sm);background:var(--card);color:var(--txt)
}
.adm-input:focus,.q-input:focus,select:focus,textarea:focus,input:focus{outline:none;border-color:var(--blue)}

/* Abas */
.adm-tab.is-active{background:var(--blue);color:#fff}

/* Barra de busca da topbar */
.adm-header__search{background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm)}

/* Painéis flutuantes com borda (sem sombra) */
.adm-noti__panel,.adm-usermenu__panel,.adm-switcher__panel{border:1px solid var(--line);border-radius:var(--r);background:var(--card)}

/* ---------------------------------------------------------------------------
   6) Autenticação — hero claro (SONO) no lugar do gradiente escuro
   --------------------------------------------------------------------------- */
.auth-hero{background:var(--brand-soft);color:var(--txt)}
.auth-hero__brand{color:var(--txt)}
.auth-hero__brand b{color:var(--blue)}
.auth-hero__slogan{color:var(--blue2)}
.auth-hero h1{color:var(--txt)}
.auth-hero p{color:var(--txt2)}
.auth-hero__list li{color:var(--txt2)}
.auth-hero__list svg{color:var(--green)}
.auth-card{background:var(--bg)}

/* Topo do formulário público → claro com borda */
.pub-top{background:var(--card);color:var(--txt);border-bottom:1px solid var(--line)}
.pub-top .adm-logo{color:var(--txt)}
.pub-top .adm-logo b{color:var(--blue)}
.pub-top__slogan{color:var(--txt3)}
.pub-card{box-shadow:none;border:1px solid var(--line)}

/* ---------------------------------------------------------------------------
   7) Botão de alternância de tema (adicionado na topbar via JS)
   --------------------------------------------------------------------------- */
.sono-themebtn{cursor:pointer;font-size:1rem;line-height:1}
.sono-themebtn .ico{width:18px;height:18px}