/* MF Backup — ponte com o design system do MF Lab Gestor.
   /static/lab/{base,v8,v10}.css é o CSS oficial do Lab Gestor, copiado sem alteração.
   Aqui ficam apenas: (1) nomes que o MF Backup usa por outro nome e (2) o que é
   exclusivo deste produto. Regra: não reinventar componente que o Lab já tem. */

/* ---------- 0. tokens herdados do painel antigo ---------- */
/* o painel antigo usava --red e --bad; o Lab usa --mf e --crit. Sem estes
   apelidos as cores saíam indefinidas e o texto herdava a cor do pai. */
:root{--red:var(--mf);--bad:var(--crit);--good:var(--ok);--amarelo:var(--warn)}

/* ---------- 0.1 blocos que tinham cor fixa (quebravam no tema escuro) ---------- */
/* faixa do código de ativação, no topo da página do cliente */
.card.ativacao{display:flex;gap:28px;align-items:center;flex-wrap:wrap;
  background:linear-gradient(90deg,var(--surface) 55%,var(--mf-soft))}
.ativacao .codigo{font:600 34px ui-monospace,Consolas,monospace;color:var(--mf);letter-spacing:3px}
.ativacao .rotulo{font-weight:600;color:var(--ink-2)}
.ativacao .passos{flex:1;min-width:260px;color:var(--ink-2)}
.ativacao .passos b,.ativacao .passos a b{color:var(--ink)}
.ativacao .senha{flex-basis:100%;display:flex;gap:10px;align-items:end;
  border-top:1px solid var(--line);padding-top:12px;margin-top:4px}
.ativacao .senha .nota{align-self:center;color:var(--ink-3)}
.ativacao .senha .nota b{color:var(--ink-2)}

/* caixa interna de apoio (configuração remota, passo a passo do Google Drive) */
.bloco{background:var(--surface-2);border:1px solid var(--line);border-radius:10px;
  padding:16px 18px;margin-top:14px;color:var(--ink-2)}
.bloco b,.bloco h3{color:var(--ink)}
td.bloco{border-radius:0;margin:0;border-left:0;border-right:0}

/* console preto dos últimos arquivos copiados — escuro nos dois temas, de propósito */
.terminal{background:#0D0D0F;border:1px solid #23232A;border-radius:8px;padding:10px 12px;margin-top:8px}
.terminal .tit{color:#8A8A90;margin-bottom:4px;font-size:.8rem}
.terminal .arq{font-family:ui-monospace,Consolas,monospace;font-size:12px;color:#C8C8CF;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* mensagens de estado escritas por script (consulta de CNPJ, backup parado) */
.msg-info{color:var(--ink-3)}.msg-alerta{color:var(--warn)}.msg-ok{color:var(--ok)}

/* logo oficial do kit da MF nos dois temas (a arte vermelha some no fundo escuro) */
.caixa img.lockup{height:34px;width:auto;margin-bottom:26px}
.caixa img.lk-escuro{display:none}
[data-tema="escuro"] .caixa img.lk-claro{display:none}
[data-tema="escuro"] .caixa img.lk-escuro{display:block}

/* ---------- 1. compatibilidade de nomes ---------- */

/* .b = .badge do Lab, com os estados do backup */
.b{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:999px;font-size:.72rem;
  font-weight:650;white-space:nowrap;background:var(--surface-3);color:var(--ink-2);line-height:1.7}
.b::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.85;flex:none}
.b.OK{background:var(--ok-soft);color:var(--ok)}
.b.ERRO,.b.ATRASADO{background:var(--crit-soft);color:var(--crit)}
.b.AVISOS,.b.SEM_BACKUP,.b.PAUSADO{background:var(--warn-soft);color:var(--warn)}
.b.RUN{background:var(--info-soft);color:var(--info)}
.b.SUSPENSO,.b.ARQUIVADO{background:var(--surface-3);color:var(--ink-3)}
@keyframes mfpulsa{0%,100%{opacity:1}50%{opacity:.55}}
.b.RUN::before{animation:mfpulsa 1.6s infinite}

/* .btn.sm = botão pequeno (o Lab tem só o tamanho padrão e o .lg) */
.btn.sm{padding:5px 11px;font-size:.78rem;border-radius:8px}
.btn.sm svg{width:15px;height:15px}

/* .top = .cabpg do Lab */
.top{display:flex;align-items:flex-start;gap:14px;flex-wrap:wrap;margin-bottom:18px}
.top h1{font-size:1.5rem;font-weight:750;letter-spacing:-.03em;margin:0}
.top .sp{flex:1}

/* .bar = .barra do Lab */
.bar{height:7px;background:var(--surface-3);border-radius:999px;overflow:hidden;margin-top:8px;width:100%;line-height:0}
.bar i{display:block;height:7px;min-width:3px;background:var(--mf);border-radius:999px;transition:width .3s}
.bar i.warn{background:var(--warn)}.bar i.bad{background:var(--crit)}

/* .kpi no formato antigo: <div class="kpi"><div><b>v</b><span>rótulo</span></div></div> */
.kpi{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin-bottom:16px}
.kpi>div{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:15px 17px;box-shadow:var(--sh-1)}
.kpi b{font-size:1.7rem;display:block;font-weight:750;line-height:1.1;letter-spacing:-.035em;color:var(--ink);
  font-variant-numeric:tabular-nums}
.kpi b.ok{color:var(--ok)}.kpi b.bad{color:var(--crit)}.kpi b.warn{color:var(--warn)}
.kpi span{color:var(--ink-3);font-size:.78rem;font-weight:600}

/* .grid4 e .card.stat = a grade .stats do Lab */
.grid4{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-bottom:16px}
.grid4>.card{margin:0}
.card.stat{display:flex;flex-direction:column;gap:4px;padding:16px 17px}
.card.stat b{display:block;font-size:1.6rem;font-weight:750;letter-spacing:-.035em;margin:6px 0 2px;
  font-variant-numeric:tabular-nums}
.card.stat b.bad{color:var(--crit)}.card.stat b.warn{color:var(--warn)}.card.stat b.ok{color:var(--ok)}
.card.stat span:last-child{color:var(--ink-3);font-size:.8rem}

/* .row = colunas lado a lado (o Lab usa .grid/.painel-2col) */
.row{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:16px;margin:0 0 16px}
.row>.card,.row>div{margin:0;min-width:0}

/* .heroKpi = números à direita do hero */
.heroKpi{position:relative;z-index:1;display:flex;gap:30px;flex-wrap:wrap}
.heroKpi>div{text-align:right}
.heroKpi b{display:block;font-size:1.9rem;font-weight:750;line-height:1.1;color:#fff;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums}
.heroKpi b.bad{color:#F58A8A}.heroKpi b.warn{color:#E6A54B}.heroKpi b.ok{color:#4ED08B}
.heroKpi span{font-size:.7rem;color:#AEB5C0;text-transform:uppercase;letter-spacing:.08em;font-weight:600}

/* .dot = bolinha de situação */
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--ink-3);margin-right:6px;vertical-align:1px}

/* .flash.err = .flash.erro do Lab */
.flash.err{background:var(--crit-soft);color:var(--crit)}

/* .eyebrow dentro de cartão (o Lab usa no hero) */
.card .eyebrow{display:block;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3);font-weight:700;margin-bottom:2px}

.search{max-width:320px}
.links{text-align:center;margin-top:16px;font-size:.82rem;color:var(--ink-3)}
.links a{display:inline-block;margin-top:6px}

/* ---------- 2. tabelas ---------- */
table{width:100%;border-collapse:collapse}
.conteudo table th{font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3);
  font-weight:700;text-align:left;padding:9px 10px;border-bottom:1px solid var(--line-2)}
.conteudo table td{padding:10px;border-bottom:1px solid var(--line);vertical-align:middle}
.conteudo table tbody tr:last-child td{border-bottom:0}
.conteudo table tbody tr:hover td{background:var(--surface-2)}

/* ---------- 3. gráficos ---------- */
.gr{position:relative;height:230px}
.gr canvas{width:100%!important;height:100%!important}
.gr.baixo{height:170px}

/* ---------- 4. celular ---------- */
@media(max-width:900px){
  .top h1{font-size:1.25rem;width:100%}
  .heroKpi{gap:20px}.heroKpi>div{text-align:left}
  .heroKpi b{font-size:1.45rem}
  .kpi{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}
  .kpi>div{padding:13px 14px}.kpi b{font-size:1.4rem}
  .grid4{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
  .search{max-width:100%}
  /* tabelas largas viram cartão empilhado */
  table.resp thead,.scrollx thead{display:none}
  table.resp,table.resp tbody,table.resp tr,table.resp td,
  .scrollx table,.scrollx tbody,.scrollx tr,.scrollx td{display:block;width:100%}
  table.resp tr,.scrollx tr{border:1px solid var(--line);border-radius:14px;padding:12px 14px;
    margin-bottom:10px;background:var(--surface);box-shadow:var(--sh-1)}
  table.resp td,.scrollx td{border:0;padding:5px 0}
  table.resp td+td{border-top:1px solid var(--line);padding-top:8px}
  table.resp td:before{content:attr(data-l);display:block;color:var(--ink-3);font-size:.64rem;
    text-transform:uppercase;letter-spacing:.07em;font-weight:700;margin-bottom:3px}
  table.resp td:not([data-l]):before{display:none}
  table.resp td:first-child,.scrollx td:first-child{font-size:1rem;font-weight:650}
  .scrollx td:last-child{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
  .scrollx td:last-child form{display:block;margin:0}
  .scrollx td:last-child .btn{width:100%;justify-content:center;margin:0}
  td[style*="min-width"],div[style*="min-width"]{min-width:0!important}
  td[style*="max-width"],div[style*="max-width"]{max-width:100%!important}
  code{overflow-wrap:anywhere}
  .conteudo{overflow-x:hidden}
}
@media(max-width:420px){.kpi,.grid4{grid-template-columns:1fr}}

/* ---------- 5. detalhes do menu (mesmos do MF Network) ---------- */
.sidebar .rodape{padding:10px 16px 14px;font-size:.68rem}
.sidebar .rodape b{display:block;margin-bottom:2px}
.conteudo .cab{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:12px;flex-wrap:wrap}
.conteudo .cab h2{margin:0}