/* MF Network — 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 Network usa por outro nome, (2) componentes
   que só existem aqui (cartões de MikroTik, portal) e (3) ajustes de responsivo.
   Regra: nada de reinventar componente que o Lab já tem. */

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

/* .panel = .card do Lab */
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;
  box-shadow:var(--sh-1);min-width:0;margin-bottom:16px}
.panel>h2{font-size:1rem;font-weight:650;letter-spacing:-.012em;color:var(--ink);margin:0 0 14px}
.panel>h2+p.muted,.card>h2+p.muted{margin-top:-6px}
/* quando o cartão é só um número, o título vira rótulo do indicador */
.panel:has(>.kpi)>h2{font-size:.78rem;font-weight:600;color:var(--ink-3);letter-spacing:0;margin-bottom:6px;text-transform:none}
.panel:has(>.kpi){display:flex;flex-direction:column;justify-content:center}

/* indicador no formato antigo: <div class="kpi"><b>valor</b><span>nota</span></div> */
.kpi{background:none;border:0;box-shadow:none;padding:0;display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.kpi>b{font-size:1.7rem;font-weight:700;letter-spacing:-.035em;line-height:1.1;color:var(--ink);font-variant-numeric:tabular-nums}
.kpi>span{color:var(--ink-3);font-size:.78rem}
.kpi.crit>b{color:var(--crit)}.kpi.ok>b{color:var(--ok)}.kpi.warn>b{color:var(--warn)}
/* o Lab usa .kpi como cartão próprio (.l/.v/.d): esse formato segue valendo */
.kpi:has(>.v){background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;box-shadow:var(--sh-1);display:block}

/* grades: o Lab fixa o número de colunas; aqui elas se adaptam ao conteúdo */
.g4{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.g2{grid-template-columns:repeat(auto-fit,minmax(330px,1fr))}
.g2w{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(100%,540px),1fr))}

/* .pill = .badge */
.pill{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:999px;font-size:.72rem;
  font-weight:600;white-space:nowrap;background:var(--surface-3);color:var(--ink-2);line-height:1.6}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.85}
.pill.critical,.pill.high{background:var(--crit-soft);color:var(--crit)}
.pill.warning,.pill.medium{background:var(--warn-soft);color:var(--warn)}
.pill.info,.pill.low{background:var(--info-soft);color:var(--info)}
.pill.ok{background:var(--ok-soft);color:var(--ok)}

/* .dot = bolinha de status */
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--ink-3);margin-right:7px;vertical-align:1px}
.dot.up,.dot.online,.dot.ok{background:var(--ok)}
.dot.down,.dot.offline{background:var(--crit)}
.dot.warn{background:var(--warn)}

/* .err = .flash.erro */
.err{background:var(--crit-soft);color:var(--crit);border:1px solid var(--line);border-radius:12px;
  padding:11px 14px;font-size:.85rem;margin-bottom:14px;box-shadow:var(--sh-1)}

/* .tabs = .abas, .seg = .segmentos */
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin-bottom:18px;overflow-x:auto;scrollbar-width:none}
.tabs a{padding:10px 13px;color:var(--ink-3);font-size:.86rem;font-weight:550;border-bottom:2px solid transparent;
  margin-bottom:-1px;white-space:nowrap;flex:none}
.tabs a:hover{color:var(--ink);text-decoration:none}
.tabs a.on{color:var(--ink);border-bottom-color:var(--mf);font-weight:650}
.seg{display:inline-flex;gap:2px;padding:3px;border-radius:11px;background:var(--surface-3);border:1px solid var(--line);flex-wrap:wrap}
.seg a{padding:6px 14px;border-radius:8px;color:var(--ink-2);font-weight:600;font-size:.84rem}
.seg a:hover{color:var(--ink);text-decoration:none}
.seg a.on{background:var(--surface);color:var(--ink);box-shadow:var(--sh-1)}

/* formulários antigos */
.stack>label,form.stack label{display:block;font-size:.8rem;font-weight:600;color:var(--ink-2);margin:12px 0 4px}
.stack>label:first-child,form.stack>label:first-child{margin-top:0}
.stack input,.stack select,.stack textarea{width:100%}
.stack input[type=checkbox],.stack input[type=radio]{width:auto;margin-right:6px}
form.inline,.inline{display:inline-flex;gap:8px;align-items:center;flex-wrap:wrap}
form.inline input,form.inline select{width:auto;min-width:0}

/* utilitários */
.nowrap,td.mono,td .mono{white-space:nowrap;overflow-wrap:normal}
.mono{font-family:ui-monospace,"SF Mono",Consolas,monospace;font-size:.8rem}
.cell-stack{line-height:1.35}
.cell-stack small{display:block;color:var(--ink-3);font-size:.73rem}
.cell-stack .mono{font-size:.73rem}
.kicker,.eyebrow{font-size:.71rem;color:var(--mf);font-weight:800;text-transform:uppercase;letter-spacing:.09em}
.c1{color:var(--c1)}.c2{color:var(--c2)}.c3{color:var(--c3)}.c4{color:var(--c4)}.c5{color:var(--c5)}.c6{color:var(--c6)}

/* ---------- 2. botões sem a classe .btn ----------
   Muitas telas usam <button> puro; aqui ele recebe o mesmo desenho do Lab. */
button:where(:not(.icone-btn,.gt,.x,.ver-senha,.legenda-rica button)),
input[type=submit]{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:9px;
  border:1px solid var(--mf);background:var(--mf);color:#fff;font-size:.85rem;font-weight:600;cursor:pointer;
  line-height:1.2;font-family:inherit;white-space:nowrap;width:auto}
button:where(:not(.icone-btn,.gt,.x,.ver-senha,.legenda-rica button)):hover,input[type=submit]:hover{background:var(--mf-2);border-color:var(--mf-2)}
button.ghost,button.sec{background:var(--surface);color:var(--ink);border-color:var(--line-2);box-shadow:var(--sh-1)}
button.ghost:hover,button.sec:hover{background:var(--surface-3);color:var(--ink)}
button.danger,.btn.danger{background:var(--surface);color:var(--crit);border-color:var(--crit);box-shadow:none}
button.danger:hover,.btn.danger:hover{background:var(--crit-soft);color:var(--crit)}
button.sm,.btn.sm{height:30px;padding:0 11px;font-size:.8rem;border-radius:8px;gap:5px}
button.sm svg,.btn.sm svg{width:13px;height:13px}
button:disabled{opacity:.45;cursor:not-allowed}

/* ---------- 3. tabelas ---------- */
/* telas antigas usam <table><tr><th> sem <thead>: o cabeçalho precisa do mesmo tratamento */
table>tr:first-child>th,table>tbody>tr:first-child>th{background:var(--surface-2);color:var(--ink-3);
  font-size:.72rem;font-weight:650;letter-spacing:.04em;text-transform:uppercase;padding:10px 12px;white-space:nowrap}
.panel{overflow-x:auto}
td:has(>form),td:has(>button),td:has(>.linha-acoes),th.nowrap{white-space:nowrap;width:1px}
td form{display:inline-flex;gap:4px;align-items:center;margin:0}
td .btn,td button{margin:1px 0}

/* uma tabela espremida quebra palavra por palavra; abaixo de 520px ela rola dentro do cartão */
.conteudo table{min-width:min(100%,520px)}
.conteudo table.vira-cartao{min-width:min(100%,640px)}
table .badge,table .pill{white-space:nowrap}
@media(max-width:700px){.conteudo table.vira-cartao{min-width:0}}

/* ---------- 4. componentes só do MF Network ---------- */
/* cartões de MikroTik no painel */
.cards{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(285px,1fr))}
.dev{display:block;background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--ok);
  border-radius:var(--r);padding:14px 16px;box-shadow:var(--sh-1);color:var(--ink);transition:box-shadow .15s,transform .15s}
.dev:hover{text-decoration:none;box-shadow:var(--sh-2);transform:translateY(-1px)}
.dev.down{border-left-color:var(--crit)}
.dev h3{margin:0 0 3px;font-size:.95rem;font-weight:650;display:flex;align-items:center;gap:6px;letter-spacing:-.012em;color:var(--ink)}
.dev .sub{color:var(--ink-3);font-size:.76rem;margin-bottom:10px}
.dev .wan{display:flex;justify-content:space-between;gap:10px;font-size:.78rem;color:var(--ink-2);padding:3px 0}
.dev .wan .mono{font-size:.73rem;color:var(--ink-3)}

/* lista de dispositivos do portal */
.devlist{display:flex;flex-direction:column;gap:6px;max-height:380px;overflow-y:auto}
.devrow{display:flex;align-items:center;gap:10px;padding:9px 11px;border:1px solid var(--line);border-radius:10px;background:var(--surface-2)}
.devname{font-weight:600;font-size:.85rem}
.devaddr{font-family:ui-monospace,Consolas,monospace;font-size:.75rem;color:var(--ink-3)}
.devact{margin-left:auto;display:flex;gap:6px}

/* lista ranqueada estática (mesmo desenho da legenda rica do Lab) */
.legenda-rica>a,.legenda-rica>.item-lista{display:grid;grid-template-columns:12px minmax(0,1fr) auto 42px;
  grid-template-areas:"p n v c" ". b b b";align-items:center;column-gap:9px;row-gap:5px;padding:8px 10px;
  border-radius:10px;color:var(--ink);font-size:.85rem}
.legenda-rica>a:hover{background:var(--surface-3);text-decoration:none}

/* rodapé do conteúdo das telas antigas */
.conteudo>.rodape{text-align:center;color:var(--ink-3);font-size:.72rem;padding:18px 0 4px;background:none;border:0}

/* o rodapé do menu tem o nome do produto em cima da razão social */
.sidebar .rodape{padding:10px 16px 14px;font-size:.68rem}
.sidebar .rodape b{display:block;margin-bottom:2px}
/* o mini gráfico do indicador não pode encostar na nota nem na borda */
.stat-pe{align-items:center;gap:12px}
.stat-pe .small{line-height:1.3}
.spark{max-width:50%;opacity:.95}

/* selects dentro de tabela precisam caber no texto da opção */
td select,td input:not([type=checkbox]):not([type=radio]){min-width:130px}

/* ---------- 5. responsivo ---------- */
/* o seletor de cliente no topo não deve esticar */
.topo .sel-cliente select{width:auto;min-width:165px;max-width:230px;height:38px}
/* no celular o Lab esconde o botão de tema; aqui ele continua acessível */
@media(max-width:700px){
  #btn-tema{display:inline-flex!important}
  .topo .sel-cliente{display:none}
}
@media(max-width:1000px){[style*="grid-column:span 2"]{grid-column:span 1!important}}
@media(max-width:820px){
  form.stack,.stack{max-width:100%!important}
  .cabpg .acoes{width:100%}
  .cabpg .acoes>.btn,.cabpg .acoes>form{flex:1 1 auto;justify-content:center}
}
/* no celular, 4 indicadores em coluna única viram rolagem demais: ficam dois a dois */
@media(max-width:820px){
  .grid.g4,.stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stat-v,.kpi .v{font-size:1.35rem}
  .spark{display:none}
}
@media(max-width:340px){.grid.g4,.stats{grid-template-columns:1fr}}
/* a faixa de aviso quebra em três partes no celular; o botão ocupa a linha toda */
@media(max-width:700px){.aviso-faixa>.btn,.aviso-faixa>a.btn{width:100%;justify-content:center;margin-top:4px}}
.linha-acoes{justify-content:flex-end;flex-wrap:wrap;gap:6px}

@media(max-width:560px){
  .panel{padding:14px}
  .seg{width:100%}.seg a{flex:1;text-align:center;padding:6px 8px}
  .tabs{margin-left:-12px;margin-right:-12px;padding:0 12px}
}