/* ============================================================================
   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}

/* ---------------------------------------------------------------------------
   8) Cabeçalho do painel — refinado
   Barra única e plana: busca à esquerda; à direita o contexto (estudo e motor),
   a ação principal e os utilitários (tema, notificações, conta). Todos os
   controles com 38px de altura, sem sombras nem animações, contraste correto
   nos dois temas (os estilos herdados eram para cabeçalho escuro).
   --------------------------------------------------------------------------- */
.adm-header{gap:.75rem;padding:.65rem 1.5rem;min-height:64px;box-shadow:none}
.adm-header__search{height:38px;padding:0 .8rem;max-width:460px;min-width:0}
.adm-body .adm-header__search{min-width:0}
.adm-header__search .ico{color:var(--txt3);flex:0 0 auto}
.adm-header .adm-header__search{flex:1 1 240px;min-width:160px;background:var(--bg);border:1px solid var(--line);border-radius:var(--r-sm)}
.adm-header__actions>*{flex-shrink:0}
.adm-header .adm-header__search input,.adm-header .adm-header__search input:focus,.adm-header .adm-header__search input:focus-visible{border:0;outline:0;background:transparent;height:100%;padding:0;border-radius:0;color:var(--txt);box-shadow:none;-webkit-appearance:none;appearance:none}
.adm-header__search input::placeholder{color:var(--txt3)}
.adm-header .adm-header__search input::-webkit-search-cancel-button{-webkit-appearance:none}
/* Foco discreto: só a caixa muda (borda um tom mais escura e fundo do cartão) — sem contorno duplo. */
.adm-header .adm-header__search:hover{border-color:var(--line2)}
.adm-header .adm-header__search:focus-within{border-color:var(--line2);background:var(--card)}
.adm-header .adm-header__search:focus-within .ico{color:var(--txt2)}
.adm-header .adm-icbtn.adm-header__searchbtn{display:none}
.adm-header__actions{gap:.5rem;min-width:0}
.adm-header .adm-icbtn{width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;background:var(--card);border:1px solid var(--line);color:var(--txt2)}
.adm-header .adm-icbtn:hover{background:var(--card2);color:var(--txt);border-color:var(--line2)}

/* Estudo atual (seletor) */
.adm-switcher>summary{height:38px;padding:0 .75rem;max-width:240px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm);color:var(--txt);font-size:.82rem;font-weight:600}
.adm-switcher>summary .ico{color:var(--blue);flex:0 0 auto}
.adm-switcher>summary::after{content:"";width:6px;height:6px;border-right:1.5px solid var(--txt3);border-bottom:1.5px solid var(--txt3);transform:rotate(45deg) translateY(-2px);margin-left:.15rem;flex:0 0 auto}
.adm-switcher>summary:hover{background:var(--card2);border-color:var(--line2)}
.adm-switcher[open]>summary{border-color:var(--blue)}
.adm-switcher__panel{box-shadow:none;right:0;left:auto}

/* Status do motor estatístico */
.adm-rstatus{height:38px;padding:0 .75rem;border-radius:var(--r-sm);background:var(--card);border:1px solid var(--line);color:var(--txt2);font-size:.78rem;font-weight:600;white-space:nowrap}
.adm-rstatus--on .adm-rstatus__dot{background:var(--green);box-shadow:none}
.adm-rstatus--off .adm-rstatus__dot{background:var(--orange);box-shadow:none}

/* Ação principal */
.adm-header__cta{height:38px;display:inline-flex;align-items:center;gap:.4rem;padding:0 .95rem;white-space:nowrap;box-shadow:none}

/* Separador entre ações e utilitários */
.adm-header__divider{width:1px;height:24px;background:var(--line);margin:0 .15rem}

/* Tema: lua no claro, sol no escuro */
.sono-themebtn__sun{display:none}
:root[data-theme="dark"] .sono-themebtn__sun{display:inline-flex}
:root[data-theme="dark"] .sono-themebtn__moon{display:none}
.sono-themebtn__moon,.sono-themebtn__sun{align-items:center;justify-content:center}
.sono-themebtn__moon{display:inline-flex}

/* Avatar e notificações alinhados à mesma altura */
.adm-headavatar{width:38px;height:38px;font-size:.8rem;cursor:pointer;list-style:none}
.adm-headavatar::-webkit-details-marker{display:none}
.adm-noti__panel,.adm-usermenu__panel{box-shadow:none}
.adm-usermenu__role{display:inline-block;margin-top:.3rem;font-style:normal;font-size:.7rem;font-weight:600;color:var(--blue2);background:var(--brand-soft);border-radius:100px;padding:.1rem .5rem;width:max-content}

/* Responsivo — degrada em etapas, sem estourar a largura.
   Acima de 900px a barra lateral (290px) ocupa espaço: a faixa 900–1180px é a
   mais apertada, por isso a busca vira ícone já em 1180px. */
@media (max-width:1360px){ .adm-rstatus__txt{display:none} .adm-rstatus{padding:0;width:38px;justify-content:center} .adm-switcher>summary{max-width:200px} }
@media (max-width:1180px){
  .adm-header .adm-header__search{display:none}
  .adm-header .adm-icbtn.adm-header__searchbtn{display:inline-flex}
}
@media (max-width:640px){
  .adm-header{padding:.6rem 1rem;gap:.4rem}
  .adm-header__actions{gap:.4rem}
  .adm-switcher,.adm-rstatus,.adm-header__divider{display:none}
  .adm-header__cta{width:38px;padding:0;justify-content:center}
  .adm-header__cta span{display:none}
}

/* ---------------------------------------------------------------------------
   9) Sidebar — refinada
   Hierarquia mais leve: rótulos de seção discretos, itens com peso médio,
   ativo marcado por fundo suave + barra à esquerda. Sem sombras/animações.
   --------------------------------------------------------------------------- */
.adm-body .adm-side__brand{padding:1.05rem 1.2rem .9rem;border-bottom:1px solid var(--line)}
.adm-body .adm-nav{padding:.35rem .7rem 1rem}
.adm-body .adm-nav__label{font-size:.63rem;letter-spacing:.1em;color:var(--txt3);font-weight:700;padding:1rem .7rem .35rem}
.adm-body .adm-nav__label:first-child{padding-top:.6rem}
.adm-body .adm-nav__link{gap:.65rem;padding:.5rem .7rem;margin:1px 0;border-radius:var(--r-sm);font-size:.86rem;font-weight:500;color:var(--txt2);transition:none}
.adm-body .adm-nav__link svg{width:17px;height:17px;color:var(--txt3);transition:none}
.adm-body .adm-nav__link:hover{background:var(--card2);color:var(--txt)}
.adm-body .adm-nav__link:hover svg{color:var(--txt2)}
.adm-body .adm-nav__link.is-active{background:var(--brand-soft);color:var(--blue2);font-weight:600;box-shadow:inset 3px 0 0 var(--blue)}
.adm-body .adm-nav__link.is-active svg{color:var(--blue)}
:root[data-theme="dark"] .adm-body .adm-nav__link.is-active{color:#fff}