/* ============================================================
   Portal Sigmma — console de administração (body.admin)
   Complementa app/app.css. Claro por padrão; sem body.light valem os tokens escuros.
   ============================================================ */

/* ---------- menu lateral ---------- */
body.admin .side nav hr.sep{border:0;border-top:1px solid color-mix(in srgb,currentColor 12%,transparent);margin:10px 4px}
body.admin .side nav button.grp .car{margin-left:auto;transition:transform .15s}
body.admin .side nav button.grp[aria-expanded="false"] .car{transform:rotate(-90deg)}
body.admin .side nav button.grp.has{opacity:1;font-weight:600}
body.admin .side nav .sub a{padding:7px 12px}
body.admin .side nav .sub svg.i{width:15px;height:15px}
body.admin .side nav a.off{opacity:.5}
body.admin .top{background:var(--panel)}
body.admin .main{background:var(--ink)}

/* ---------- cabeçalho da página ---------- */
.crumbs svg.sep-i{width:12px;height:12px;opacity:.55}
.crumbs a{display:inline-flex;align-items:center}
.page-h .acts{align-items:center}
.page-h .acts .toggle{align-items:center;margin-right:4px}
.page-h .acts .toggle .tx b{font-size:13.5px}
.adm-body{display:flex;flex-direction:column;gap:18px;min-width:0}

/* ---------- avisos ---------- */
.note{display:flex;gap:10px;align-items:flex-start;padding:11px 14px;border-radius:10px;border:1px solid rgba(46,124,182,.35);background:rgba(46,124,182,.08);font-size:13.5px;line-height:1.45}
.note>svg.i{margin-top:2px;color:var(--blue-lt)}
.note .row{margin-top:8px}
.note.warn{background:var(--warn-bg);border-color:rgba(232,193,58,.6)}
body.light .note.warn{color:#6B5000}
.note.warn>svg.i{color:#B7870A}
.note.ok{background:var(--ok-bg);border-color:rgba(53,196,111,.45)}
.note.ok>svg.i{color:var(--grn)}

/* ---------- blocos ---------- */
.box{padding:18px 20px}
.box>h2{font-size:16px;margin-bottom:14px}
/* dentro do cartão cada bloco fica a 16px do anterior: campos, dicas e chaves ficavam colados (A-245, A-308, A-508) */
.box:not(.stack)>*+*{margin-top:16px}
/* botões do formulário não grudam no cartão quando o contêiner não tem folga própria (formulário de chamado no portal) */
:not(.adm-body):not(.stack)>.box+.form-foot{margin-top:16px}
.sec-t{font-size:16px}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.stat{padding:14px 16px;display:flex;flex-direction:column;gap:2px;transition:border-color .15s}
.stat b{font-family:var(--disp);font-size:26px;line-height:1.1}
.stat span{color:var(--mut);font-size:13px}
a.stat:hover{border-color:var(--blue)}
/* painel: primeiro o que pede atenção, em ordem de urgência, com a ação ao lado */
.alertas{display:flex;flex-direction:column;gap:8px}
.alerta{display:flex;gap:14px;align-items:center;padding:12px 16px;border:1px solid var(--line);border-left:4px solid var(--amb);border-radius:10px;background:var(--panel);font-size:14px;transition:border-color .15s}
.alerta.err{border-left-color:var(--red)}
a.alerta:hover{border-top-color:var(--blue);border-right-color:var(--blue);border-bottom-color:var(--blue)}
.alerta b{font-family:var(--disp);font-size:22px;min-width:28px;line-height:1}
.alerta.err b{color:#C94444}
.alerta.warn b{color:#B7870A}
.al-tx{display:flex;flex-direction:column;gap:2px;min-width:0}
.al-tx small{font-size:12.5px;color:var(--dim);overflow-wrap:anywhere}
.al-acao{margin-left:auto;font-weight:600;font-size:13px;color:var(--blue-lt);white-space:nowrap}
body.light .al-acao{color:var(--blue)}
.emdia{display:flex;gap:8px;align-items:center;padding:9px 14px;border-radius:8px;background:var(--ok-bg);color:#1E8F4E;font-size:13.5px}
body:not(.light) .emdia{color:var(--grn)}
.emdia svg.i{width:16px;height:16px;flex:none}
.sec-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.sec-row a.lnk{font-size:13.5px}
.ativ{padding:4px 16px}
.ativ ul{list-style:none;margin:0;padding:0}
.ativ li{display:flex;gap:14px;padding:9px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.ativ li:last-child{border-bottom:0}
.ativ time{font-family:var(--mono);font-size:12px;color:var(--dim);min-width:88px;flex:none}
.ativ a{min-width:0;overflow-wrap:anywhere}
.ativ a:hover b{color:var(--sky)}

/* ---------- tabelas ---------- */
.adm-body .hint,.dlg .hint{font-size:12.5px;color:var(--dim)}
.cell-n{display:flex;flex-direction:column;gap:4px;min-width:170px}
.cell-n .tags{display:flex;gap:4px;flex-wrap:wrap}
a.lnk{font-weight:600}
a.lnk:hover{color:var(--sky);text-decoration:underline}
/* texto longo na tabela: duas linhas no máximo; palavra sem espaço quebra em vez de alargar a coluna */
.clip{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;max-width:340px;color:var(--mut);overflow-wrap:anywhere}
.longo{max-width:340px}
.longo.aberto .clip{display:block;-webkit-line-clamp:unset}
.longo .btn-link{font-size:12.5px;margin-top:2px}
.sub-t{display:block;font-size:12px;color:var(--dim)}
.tbl td .btns{display:flex;gap:6px;justify-content:flex-end}
.nowrap{white-space:nowrap}

/* ---------- formulários ---------- */
.toolbar{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap}
.toolbar .field{flex:0 1 340px}
.toolbar .spacer{min-width:1px}
.form-card{padding:20px 22px}
.form-card .stack{gap:16px}
.form-foot{display:flex;gap:10px;justify-content:flex-end}
.check{display:flex;gap:10px;align-items:center;cursor:pointer;font-size:14px}
.check input{width:16px;height:16px;accent-color:var(--blue)}
.dl{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;font-size:13.5px}
.dl dt{color:var(--mut)}
.dl dd{overflow-wrap:anywhere}
.perm-tbl td:first-child{width:46%}
.perm-n{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.perm-n .toggle{flex:1 1 auto}
.filters{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;padding:14px 16px}
.filters .field{flex:1 1 150px;max-width:240px}
.fmts{padding-left:20px;display:flex;flex-direction:column;gap:4px}
code{font-family:var(--mono);font-size:12.5px;background:var(--card);padding:1px 6px;border-radius:5px}
.errs{padding-left:20px;color:#C94444;max-height:220px;overflow:auto;font-size:13px}

/* ---------- abas como links (auditorias) ---------- */
.tabs-bar a{padding:10px 14px;font-size:14px;color:var(--mut);border-bottom:2px solid transparent;white-space:nowrap}
.tabs-bar a:hover{color:var(--txt)}
.tabs-bar a[aria-current="page"]{color:var(--txt);border-bottom-color:var(--blue);font-weight:600}
.adm-body>.tabs-bar{margin-bottom:0}

/* ---------- RLS ---------- */
.roles{display:flex;flex-direction:column;gap:14px}
.role{padding:16px 18px}
.role-h{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.role-h h3{font-size:15.5px;overflow-wrap:anywhere}

/* ---------- pastas ---------- */
.tree{padding:6px}
.frow{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;padding:8px 10px 8px calc(10px + var(--d,0) * 22px);border-radius:8px;min-height:44px}
.frow:hover{background:var(--card)}
.frow b{font-weight:600;overflow-wrap:anywhere;min-width:7em}
.frow>svg.i{color:var(--blue-lt)}

/* ---------- diferenças (auditoria) ---------- */
.diff th,.diff td{vertical-align:top}
.diff tbody th{font-family:var(--mono);font-size:12.5px;color:var(--txt);background:none;border-bottom:1px solid var(--line);white-space:normal}
.diff pre{white-space:pre-wrap;word-break:break-word;font-family:var(--mono);font-size:12px}
.diff tr.chg td.old{background:var(--err-bg)}
.diff tr.chg td.new{background:var(--ok-bg)}
.diff tr.chg th{box-shadow:inset 3px 0 0 var(--amb)}

@media (max-width:900px){
  .stats{grid-template-columns:1fr 1fr}
  .ativ li{flex-direction:column;gap:2px}
  .al-acao{display:none}
  .page-h .acts{margin-left:0;width:100%}
  .toolbar .field{flex:1 1 100%}
  .filters .field{flex:1 1 140px;max-width:none}
  .form-card{padding:16px}
  .box{padding:16px}
  .form-foot{position:sticky;bottom:0;background:var(--ink);padding:10px 0;z-index:5}
  .form-foot .btn{flex:1}
  .perm-tbl td:first-child{width:auto}
}
@media (max-width:600px){
  .perm-tbl thead{display:none}
  .perm-tbl td{display:block;width:auto!important;border-bottom:0}
  .perm-tbl td.muted{padding-top:0;padding-left:60px;font-size:12.5px}
  .perm-tbl tr{display:block;border-bottom:1px solid var(--line)}
  .perm-tbl tr:last-child{border-bottom:0}
}

/* Fase 2: dias e horários do agendamento */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border:1px solid var(--line);border-radius:999px;font-size:13px;cursor:pointer;background:var(--ink-2)}
.chip input{accent-color:var(--blue)}
.chip.on{cursor:default;border-color:var(--blue)}
.chip-x{border:0;background:none;padding:0;display:inline-flex;cursor:pointer;color:var(--dim)}
.chip-x svg{width:14px;height:14px}
/* formulário em linhas: a mesma distância das linhas do grid2 entre todos os blocos */
.form-rows{gap:16px}

/* ---------- personalização do portal (organização e empresa) ---------- */
/* bloco que abre e fecha: Personalizar cores, Personalizar imagens, Tema dos relatórios */
.bloco{background:var(--panel);border:1px solid var(--line);border-radius:var(--r)}
.bloco>summary{display:flex;align-items:center;gap:10px;padding:14px 18px;font-weight:600;font-size:15px;cursor:pointer;list-style:none}
.bloco>summary::-webkit-details-marker{display:none}
.bloco>summary .car{margin-left:auto;transition:transform .15s}
.bloco[open]>summary .car{transform:rotate(180deg)}
.bloco[open]>summary{border-bottom:1px solid var(--line)}
.bloco-b{padding:16px 18px;display:flex;flex-direction:column;gap:14px}
fieldset.sem-borda{border:0;padding:0;margin:0;min-width:0;display:flex;flex-direction:column;gap:14px}
fieldset.sem-borda:disabled{opacity:.55}
/* cores: os três campos e, ao lado, a miniatura do menu com o resultado */
.cores{display:grid;grid-template-columns:minmax(0,1fr) 200px;gap:20px;align-items:start}
.cor-linha{display:flex;align-items:center;gap:12px}
.cor-linha .toggle{flex:1}
.cor-linha .input.cor:disabled{opacity:.35;cursor:default}
.prev-menu{background:var(--side);color:var(--side-txt);border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:4px;font-size:13px}
.prev-menu b{font-size:11px;letter-spacing:.1em;text-transform:uppercase;opacity:.6;padding:0 8px 6px}
.prev-menu span{padding:7px 10px;border-radius:8px}
.prev-menu span.on{background:var(--side-act);color:var(--side-act-txt,#10233A);font-weight:600}
.prev-menu i{font-style:normal;align-self:flex-start;margin:10px 0 0 2px;padding:6px 14px;border-radius:8px;background:var(--blue);color:#fff;font-weight:600;font-size:12.5px}
/* paleta dos gráficos */
.paleta{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.pal-lista{display:flex;flex-wrap:wrap;gap:10px}
.pal-cor{display:inline-flex;align-items:center;gap:4px}
.pal-barras{display:flex;align-items:flex-end;gap:6px;height:90px;width:100%;max-width:340px;padding:10px;border:1px dashed var(--line);border-radius:10px;background:var(--ink-2)}
.pal-barras i{flex:1;border-radius:4px 4px 0 0;min-width:10px}
@media (max-width:700px){.cores{grid-template-columns:1fr}}
/* resultado do e-mail de teste da empresa */
.email-res{display:flex;gap:8px;align-items:flex-start;padding:9px 12px;border-radius:8px;font-size:13.5px}
.email-res svg.i{width:16px;height:16px;flex:none;margin-top:2px}
.email-res.ok{background:var(--ok-bg);color:#1E8F4E}
.email-res.err{background:var(--err-bg);color:#B23A3A}
body:not(.light) .email-res.ok{color:var(--grn)}
body:not(.light) .email-res.err{color:#F08A8A}