/* cards.css — a linguagem visual dos cards, uma vez so.
 *
 * A tela de OLTs ganhou um tratamento (barra de acento, sombra suave, hover que
 * levanta, numero grande tabular) que as outras nao tinham: Enlaces, Energia, Links e
 * Cliente Dedicado ainda usavam o dialeto antigo — borda de 2px, raio 8, borda-esquerda
 * dura de 4px que corta o arredondamento, e nenhum resumo numerico no topo.
 *
 * Aqui a linguagem fica em UM lugar so, em vez de ser copiada pra cada tela. Carrega
 * DEPOIS do theme.css de proposito: vence o inline das paginas sem precisar de !important
 * espalhado.
 *
 * ⚠️ Nao renomeia classe nenhuma. As telas montam os cards em JS com string; trocar nome
 * de classe quebraria o JS. Entao aqui a gente RE-ESTILIZA o que ja existe
 * (.anel-card, .pop-card, .cd-card, .loc-card) e adiciona so o que e novo (.kpi-*).
 */

/* ============================================================ resumo numerico */
.kpi-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin-bottom:18px;}
/* faixa estreita: com 2 ou 3 KPIs o 1fr estica cada card pra ~500px e o numero
 * se perde. Quem tem poucos KPIs pede .compacta; quem ja tinha KPI proprio
 * (olts, home) fica no comportamento antigo — por isso e MODIFICADOR. */
.kpi-row.compacta{grid-template-columns:repeat(auto-fit,minmax(190px,268px));justify-content:start;}
.kpi-card{position:relative;overflow:hidden;background:var(--s1);border:1px solid var(--border);
  border-radius:14px;padding:15px 18px 15px 20px;
  box-shadow:var(--shadow-sm,0 1px 2px rgba(15,23,42,.04));
  transition:box-shadow .15s,transform .15s;}
.kpi-card:hover{box-shadow:var(--shadow-md,0 6px 18px rgba(15,23,42,.08));transform:translateY(-1px);}
/* barra de acento: a cor vem de --kc, setada por modificador ou inline */
.kpi-card::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--kc,var(--blue));}
.kpi-ic{position:absolute;top:13px;right:13px;width:30px;height:30px;border-radius:9px;background:var(--s2);
  display:flex;align-items:center;justify-content:center;color:var(--kc,var(--blue));}
.kpi-ic svg{width:16px;height:16px;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round;}
.kpi-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);margin-bottom:7px;}
.kpi-val{font-size:26px;font-weight:800;line-height:1;letter-spacing:-.02em;color:var(--text);font-variant-numeric:tabular-nums;}
.kpi-val small{font-size:13px;font-weight:600;color:var(--muted);margin-left:3px;letter-spacing:0;}
.kpi-sub{font-size:12px;color:var(--muted2);margin-top:6px;}
/* cores semanticas — mesmas do resto do sistema */
.kpi-c-teal{--kc:#14b8a6;}
.kpi-c-green{--kc:#52c41a;}
.kpi-c-red{--kc:#ff4d4f;}
.kpi-c-amber{--kc:#faad14;}
.kpi-c-blue{--kc:#1677ff;}
.kpi-c-slate{--kc:#94a3b8;}
/* KPI que filtra a lista ao clicar ganha affordance */
.kpi-card.clicavel{cursor:pointer;}
.kpi-card.clicavel:active{transform:translateY(0);}
.kpi-card.ativo{border-color:var(--kc,var(--blue));box-shadow:0 0 0 2px color-mix(in srgb,var(--kc,var(--blue)) 18%,transparent);}

/* ============================================================ casca dos cards
 * O acento de status vira ::before (barra interna) em vez de border-left dura: a borda
 * dura briga com o border-radius e deixa o canto quadrado. */
.anel-card,.pop-card,.cd-card,.loc-card,.link-card{
  position:relative;overflow:hidden;
  border:1px solid var(--border)!important;
  border-left-width:1px!important;
  border-top-width:1px!important;
  border-radius:14px!important;
  box-shadow:var(--shadow-sm,0 1px 2px rgba(15,23,42,.04));
  transition:box-shadow .16s,transform .16s,border-color .16s;
  background:var(--s1);
}
.anel-card::before,.pop-card::before,.cd-card::before,.loc-card::before,.link-card::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--ac,var(--muted2));
}
.anel-card:hover,.pop-card:hover,.cd-card:hover,.loc-card:hover,.link-card:hover{
  box-shadow:var(--shadow-md,0 6px 18px rgba(15,23,42,.09));transform:translateY(-1px);
}
/* status -> cor do acento. As telas ja poem .st-up/.st-down/.st-unknown no card. */
.anel-card.st-up,.pop-card.st-up{--ac:#52c41a;}
.anel-card.st-down,.pop-card.st-down{--ac:#ff4d4f;}
.anel-card.st-unknown,.pop-card.st-unknown{--ac:#94a3b8;}
.cd-card{--ac:#1677ff;}
.loc-card,.link-card{--ac:#1677ff;}
/* card caido: um lavado de cor no topo em vez do gradiente lateral antigo, que
 * empurrava o texto pra fora do contraste */
.anel-card.st-down,.pop-card.st-down{
  background:linear-gradient(180deg,color-mix(in srgb,#ff4d4f 9%,var(--s1)) 0 52px,var(--s1) 52px)!important;
}
.anel-card.dragging,.pop-card.dragging{opacity:.45;transform:none;}
.anel-card.drag-over,.pop-card.drag-over{box-shadow:0 0 0 3px color-mix(in srgb,var(--blue) 22%,transparent);}

/* ============================================================ pilulas de rodape */
.chip{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:600;color:var(--muted);
  background:var(--s1);border:1px solid var(--border);border-radius:999px;padding:2px 9px;line-height:1.5;
  white-space:nowrap;}
.chip.ok{color:#389e0d;background:var(--green-l);border-color:transparent;}
.chip.bad{color:#cf1322;background:var(--red-l);border-color:transparent;}
.chip svg{width:12px;height:12px;stroke:currentColor;stroke-width:1.8;fill:none;}

/* ⚠️ badge de fonte (QUEUE·API / VLAN·SNMP) quebrava em 2 linhas e desalinhava o
 * cabecalho do card no Cliente Dedicado */
.cd-fonte{white-space:nowrap;}

/* ============================================================ vazio */
.empty-state{text-align:center;padding:52px 20px;color:var(--muted2);}
.empty-state svg{width:42px;height:42px;stroke:var(--muted2);stroke-width:1.4;fill:none;margin:0 auto 12px;display:block;}

/* ============================================================ escuro */
:root[data-theme="dark"] .kpi-card,body.dark .kpi-card{box-shadow:none;}
:root[data-theme="dark"] .kpi-card:hover,body.dark .kpi-card:hover{box-shadow:0 6px 18px rgba(0,0,0,.35);}
:root[data-theme="dark"] .anel-card,:root[data-theme="dark"] .pop-card,
:root[data-theme="dark"] .cd-card,:root[data-theme="dark"] .loc-card,
:root[data-theme="dark"] .link-card{box-shadow:none;}
:root[data-theme="dark"] .anel-card:hover,:root[data-theme="dark"] .pop-card:hover,
:root[data-theme="dark"] .cd-card:hover,:root[data-theme="dark"] .loc-card:hover,
:root[data-theme="dark"] .link-card:hover{box-shadow:0 6px 18px rgba(0,0,0,.35);}
:root[data-theme="dark"] .anel-card.st-down,:root[data-theme="dark"] .pop-card.st-down{
  background:linear-gradient(180deg,color-mix(in srgb,#ff4d4f 16%,var(--s1)) 0 52px,var(--s1) 52px)!important;
}
:root[data-theme="dark"] .chip{background:var(--s2);}

@media (max-width:640px){
  .kpi-row,.kpi-row.compacta{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;}
  .kpi-val{font-size:22px;}
  .kpi-card{padding:13px 14px 13px 17px;}
}

/* ⚠️ o X de excluir do card de Link era .btn-danger CHEIO (vermelho solido), gritando
 * mais que o proprio dado do link. Na tela de OLTs a exclusao e discreta e so fica
 * vermelha no hover — mesma regra aqui. Escopo no card: em modal o vermelho cheio
 * continua certo. */
.loc-card .btn-danger,.link-card .btn-danger{background:transparent!important;color:var(--muted)!important;
  border:1px solid var(--border)!important;}
.loc-card .btn-danger:hover,.link-card .btn-danger:hover{background:var(--red-l)!important;color:#cf1322!important;
  border-color:#ffccc7!important;}

/* ============================================================ viz (viz.js)
 * Elemento grafico dominante do card — o que a tela de OLTs tem e as outras nao tinham. */
.viz-anel{display:block;flex-shrink:0;}
.viz-anel-bg{fill:none;stroke:var(--s2);stroke-width:7;}
.viz-anel-fg{fill:none;stroke-width:7;stroke-linecap:round;transition:stroke-dasharray .5s ease;}
.viz-anel-n{text-anchor:middle;dominant-baseline:middle;font-size:17px;font-weight:800;
  fill:var(--text);font-variant-numeric:tabular-nums;letter-spacing:-.5px;}
.viz-anel-pc{font-size:10px;font-weight:700;fill:var(--muted);}
.viz-anel-l{text-anchor:middle;dominant-baseline:middle;font-size:8px;font-weight:700;
  fill:var(--muted2);letter-spacing:.6px;text-transform:uppercase;}

/* regua de sinal optico: a marca mostra onde o RX cai na faixa util */
.viz-regua{position:relative;display:inline-block;width:100%;height:5px;border-radius:3px;
  overflow:hidden;vertical-align:middle;margin-top:5px;}
.viz-regua-zona{position:absolute;inset:0;border-radius:3px;
  background:linear-gradient(90deg,#ff4d4f 0 6.7%,#faad14 6.7% 16.7%,#52c41a 16.7% 100%);
  opacity:.30;}
.viz-regua-marca{position:absolute;top:-2px;width:3px;height:9px;border-radius:2px;
  transform:translateX(-50%);box-shadow:0 0 0 1.5px var(--s1);}
:root[data-theme="dark"] .viz-regua-zona{opacity:.42;}

/* Cliente Dedicado: anel de uso ao lado do grafico */
.cd-meio{display:flex;align-items:center;gap:14px;}
.cd-meio .cd-graph{flex:1;min-width:0;}
.cd-anel{flex-shrink:0;}
@media (max-width:520px){.cd-meio{flex-direction:column;align-items:stretch;gap:8px}.cd-anel{align-self:center}}


/* ============================================================ parks: card da OLT
 * Mesmo arranjo da tela de OLTs: anel a esquerda, legenda a direita. */
.olt-card{position:relative;overflow:hidden;background:var(--s1);
  border:1px solid var(--border)!important;border-radius:14px!important;
  box-shadow:var(--shadow-sm,0 1px 2px rgba(15,23,42,.04));
  transition:box-shadow .16s,transform .16s,border-color .16s;padding:0!important;}
.olt-card::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;
  background:var(--ac,#722ed1);}
.olt-card:hover{box-shadow:var(--shadow-md,0 6px 18px rgba(15,23,42,.09));transform:translateY(-1px);}
.olt-card.active{border-color:var(--ac,#722ed1)!important;
  box-shadow:0 0 0 2px color-mix(in srgb,var(--ac,#722ed1) 22%,transparent);}
.oc-top{display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:12px 15px 10px;border-bottom:1px solid var(--border);
  background:linear-gradient(180deg,color-mix(in srgb,var(--ac,#722ed1) 8%,var(--s1)),var(--s1));}
.oc-nome{font-size:14px;font-weight:800;letter-spacing:-.01em;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;}
.oc-body{display:flex;align-items:center;gap:16px;padding:14px 15px;}
.oc-leg{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px;}
.oc-leg .l{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12.5px;}
.oc-leg .l .k{display:flex;align-items:center;gap:6px;color:var(--muted);}
.oc-leg .l .k i{width:7px;height:7px;border-radius:50%;display:inline-block;}
.oc-leg .l .v{font-weight:800;font-variant-numeric:tabular-nums;color:var(--text);}
.oc-foot{padding:8px 15px;border-top:1px solid var(--border);background:var(--s2);
  font-size:11px;color:var(--muted2);display:flex;justify-content:flex-end;}
:root[data-theme="dark"] .olt-card{box-shadow:none;}
:root[data-theme="dark"] .olt-card:hover{box-shadow:0 6px 18px rgba(0,0,0,.35);}