/* ==========================================================================
   melivu.css — identidade Melivu. Carregar por último no index.html.
   Paleta: pinho #277065 (ação), lima #c8f653 (energia), creme #f8feb4 (marca-texto).
   Os tokens moram em base.css; aqui ficam só as peças que carregam a assinatura:
   o símbolo do logo e o "marca-texto" dos estados ativos.
   ========================================================================== */

/* ---------- logo oficial (assets/brand) ----------
   .mlv-logo carrega as 4 versões; o CSS mostra uma só conforme o tema e o menu:
   aberto = logo completo, recolhido = só o ícone. --dark/--light forçam uma versão em superfícies que
   não mudam com o tema (login do admin é sempre escuro; o cartão de login é sempre claro). */
.mlv-logo{display:inline-flex;align-items:center;flex:none;line-height:0}
.mlv-logo img{display:none;width:auto}
.mlv-logo .mlv-full{height:var(--mlv-h,28px)}
.mlv-logo .mlv-icon{height:var(--mlv-icon,36px)}
:root:not([data-theme="dark"]) .mlv-logo:not(.mlv-logo--dark):not(.mlv-logo--icon) .mlv-full.mlv-on-light,
:root[data-theme="dark"] .mlv-logo:not(.mlv-logo--icon):not(.mlv-logo--light) .mlv-full.mlv-on-dark,
.mlv-logo--light .mlv-full.mlv-on-light,
.mlv-logo--dark .mlv-full.mlv-on-dark,
:root:not([data-theme="dark"]) .mlv-logo--icon .mlv-icon.mlv-on-light,
:root[data-theme="dark"] .mlv-logo--icon .mlv-icon.mlv-on-dark{display:block}
/* menu recolhido: troca o logo completo pelo ícone (sidebar.css esconde ".brand>span" ao recolher; o logo é a exceção) */
html.sidebar-collapsed .sidebar .brand>.mlv-logo{display:inline-flex}
html.sidebar-collapsed .sidebar .mlv-logo .mlv-full{display:none!important}
:root:not([data-theme="dark"]).sidebar-collapsed .sidebar .mlv-logo .mlv-icon.mlv-on-light,
:root[data-theme="dark"].sidebar-collapsed .sidebar .mlv-logo .mlv-icon.mlv-on-dark{display:block}
.sidebar .brand{padding-top:6px;padding-bottom:12px;min-height:40px}
.sidebar .brand .mlv-logo{--mlv-h:22px;--mlv-icon:44px}
.auth-card-brand .mlv-logo{--mlv-h:30px}
.al-brand .mlv-logo{--mlv-h:26px}
/* inbox: a barra é estreita, então só o ícone */
.ib-rail-brand{background:transparent;box-shadow:none}
.ib-rail-brand .mlv-logo{--mlv-icon:38px}
/* admin: ícone fixo + nome que aparece/some com o texto do menu */
.admin-brand-icon{width:36px;height:36px;flex:none}
.admin-label .admin-brand-name{height:20px;width:auto;display:block}
.admin-sidebar-brand .admin-label{display:flex;align-items:center;gap:8px}

/* ---------- menu lateral: item ativo (pinho suave no claro, lima no escuro) ---------- */
.nav-item.active,.nav-item.active:hover{
  background:var(--green-soft);color:var(--green-dark);font-weight:700;
  box-shadow:inset 3px 0 var(--pinho);
}
.nav-item.active svg{color:var(--pinho)}
[data-theme="dark"] .nav-item.active,[data-theme="dark"] .nav-item.active:hover{
  background:rgba(200,246,83,.1);color:var(--lima);box-shadow:inset 3px 0 var(--lima);
}
[data-theme="dark"] .nav-item.active svg{color:var(--lima)}

/* seleção de texto também é marca-texto */
::selection{background:var(--creme);color:var(--on-lima)}
[data-theme="dark"] ::selection{background:rgba(200,246,83,.32);color:#fff}

/* ---------- botões primários no escuro: lima com texto pinho ---------- */
[data-theme="dark"] :is(.ui-btn-primary,button.primary,a.primary):not(.danger):not(.auth-card *){
  background:var(--lima);color:var(--on-lima);box-shadow:0 6px 18px rgba(200,246,83,.18);
}
[data-theme="dark"] :is(.ui-btn-primary,button.primary,a.primary):not(.danger):not(.auth-card *):hover:not(:disabled){
  background:#d6f97f;box-shadow:0 10px 24px rgba(200,246,83,.26);
}


/* ---------- botão flutuante: no escuro, lima ---------- */
[data-theme="dark"] :is(.launcher-main,.launcher-mini){background:var(--lima);color:var(--on-lima);box-shadow:0 10px 26px rgba(200,246,83,.22),0 2px 6px rgba(0,0,0,.3)}

/* ---------- menu lateral claro: só um véu de creme no topo, não o menu inteiro amarelado ---------- */
:root:not([data-theme="dark"]) .sidebar{background:linear-gradient(180deg,var(--green-tint),#fff 200px),#fff}

/* ==========================================================================
   Tema claro do app: o pinho conduz. Lima sobre branco quase some, então dentro do app claro
   o que era texto/ícone lima vira pinho; o lima fica para o logo e para o destaque do gráfico.
   (Escopo #appShell: o login e o admin são escuros mesmo no tema claro e seguem com lima.)
   ========================================================================== */
:root:not([data-theme="dark"]) #appShell{--green-bright:#2f8a7c;--green-mint:#cfe3dc}
:root:not([data-theme="dark"]) #appShell .dash-trend.up{color:var(--pinho);background:var(--green-soft);border-color:transparent}
/* barras do gráfico: pinho do claro ao escuro; o dia de pico ganha a ponta lima */
:root:not([data-theme="dark"]) #dashBar stop:first-child{stop-color:#5aa697}
:root:not([data-theme="dark"]) #dashBar stop:last-child{stop-color:#1d564e}
:root:not([data-theme="dark"]) #dashBarPeak stop:first-child{stop-color:#c8f653}
:root:not([data-theme="dark"]) #dashBarPeak stop:last-child{stop-color:#277065}
:root:not([data-theme="dark"]) #appShell .dash-avatar:not(img){background:var(--green-soft);color:var(--green-dark)}
:root:not([data-theme="dark"]) #appShell .dash-legend-bar{background:linear-gradient(#5aa697,#1d564e)}

/* ---------- cartão de login: o vidro é claro nos dois temas, então o texto fica escuro sempre ----------
   (sem isto, no tema escuro --ink vira quase branco e o título some sobre o vidro claro) */
.auth-card{--ink:#0f2622;--body:#3b4c48}

/* ---------- login: o logo ocupa o lugar do título, no alto à esquerda ---------- */
.auth-side-logo{--mlv-h:26px;pointer-events:auto}

/* ---------- login: formulário num painel fixo à direita (sem cartão flutuante) ----------
   No desktop o painel ocupa a altura toda, colado na borda; a cena fica no espaço à esquerda.
   No celular (<=980px) vale o layout empilhado de auth.css. */
@media(min-width:981px){
  .auth-form-side{width:clamp(420px,34vw,520px);padding:48px clamp(40px,4vw,64px);background:#fff;
    box-shadow:-24px 0 60px rgba(0,0,0,.28);opacity:1;visibility:visible;transform:none;transition:none;pointer-events:auto;perspective:none}
  .auth-form-inner{max-width:380px}
  .auth-side{padding-right:calc(clamp(420px,34vw,520px) + 4%)}
}
.auth-card{background:transparent;border:0;border-radius:0;padding:0;box-shadow:none;
  backdrop-filter:none;-webkit-backdrop-filter:none;transform:none;overflow:visible}
.auth-card::before,.auth-card::after{display:none}
.auth-card:hover{box-shadow:none}
.auth-card h1{text-align:left}
.auth-card>.subtitle{text-align:left}
/* celular: o formulário vem embaixo da cena, num painel branco que sobe da base */
@media(max-width:980px){
  .auth-form-side{background:#fff;border-radius:24px 24px 0 0;padding:32px 20px 48px;margin-top:-12px;box-shadow:0 -18px 40px rgba(0,0,0,.25)}
}