/* ==================================================================
 * Dash Admin :: Premium Polish (Sprint 7.2) — ADITIVO
 * Eleva o acabamento visual ao padrão DashOs/Dash Finance reutilizando
 * os tokens já existentes (--acc azul, --cy ciano, --grn, --amb, --red,
 * fundos escuros, raios, sombras). Somente visual: nenhuma estrutura,
 * rota, dado ou classe funcional é alterada. Carregar após styles.css.
 * ================================================================== */

/* ---------- Fundo: camada de partículas discreta (atrás de tudo) ---------- */
#dpx-wave { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .5; }
#app.on { position: relative; z-index: 1; }               /* conteúdo acima do fundo */
aside.side, header.top, main.view > * { position: relative; z-index: 1; }

/* ---------- Logo oficial ---------- */
.mk-img { width: 30px; height: 30px; border-radius: 9px; object-fit: contain; display: block;
  filter: drop-shadow(0 2px 6px rgba(31,143,255,.28)); }
#login .brand .mk-img { width: 40px; height: 40px; border-radius: 11px; }

/* ---------- Cards premium (glass + profundidade + glow discreto) ---------- */
.kpi, .panel {
  background-image: linear-gradient(180deg, rgba(255,255,255,.03), transparent 42%);
  box-shadow: 0 1px 0 rgba(255,255,255,.03) inset, 0 14px 32px -20px rgba(0,0,0,.6);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.kpi { will-change: transform; }
.kpi:hover { transform: translateY(-2px); border-color: #2b3d63;
  box-shadow: 0 1px 0 rgba(255,255,255,.05) inset, 0 18px 40px -18px rgba(0,0,0,.7), 0 0 0 1px rgba(31,143,255,.12); }

/* Borda inteligente por estado (glow discreto, corporativo — sem piscar) */
.kpi[data-state="info"]::before     { background: linear-gradient(180deg, var(--acc), var(--cy)); }
.kpi[data-state="positive"]::before { background: linear-gradient(180deg, var(--grn), #16a34a); }
.kpi[data-state="warning"]::before  { background: linear-gradient(180deg, var(--amb), #d98a12); }
.kpi[data-state="critical"]::before { background: linear-gradient(180deg, var(--red), #c53a45); }
.kpi[data-state="positive"] { border-color: color-mix(in srgb, var(--grn) 34%, var(--line)); }
.kpi[data-state="warning"]  { border-color: color-mix(in srgb, var(--amb) 34%, var(--line)); }
.kpi[data-state="critical"] { border-color: color-mix(in srgb, var(--red) 34%, var(--line)); }
.kpi[data-state="positive"]:hover { box-shadow: 0 18px 40px -18px rgba(0,0,0,.7), 0 0 22px -10px color-mix(in srgb, var(--grn) 60%, transparent); }
.kpi[data-state="warning"]:hover  { box-shadow: 0 18px 40px -18px rgba(0,0,0,.7), 0 0 22px -10px color-mix(in srgb, var(--amb) 60%, transparent); }
.kpi[data-state="critical"]:hover { box-shadow: 0 18px 40px -18px rgba(0,0,0,.7), 0 0 22px -10px color-mix(in srgb, var(--red) 60%, transparent); }

/* Ícone do KPI em cápsula translúcida (linguagem premium) */
.kpi .k .ic { width: 22px; height: 22px; border-radius: 7px; display: inline-grid; place-items: center;
  background: linear-gradient(145deg, color-mix(in srgb, var(--acc) 26%, transparent), color-mix(in srgb, var(--acc) 6%, transparent));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 3px 8px -5px color-mix(in srgb, var(--acc) 55%, transparent); }
.kpi .k .ic svg { width: 13px; height: 13px; color: var(--cy); }

/* ---------- Contadores animados (usado por data-count) ---------- */
.kpi .v { transition: none; }

/* ---------- Sidebar premium ---------- */
.navitem { transition: background .16s ease, color .16s ease, box-shadow .16s ease, border-color .16s ease; }
.navitem .ic { width: 26px; height: 26px; border-radius: 8px; display: inline-grid; place-items: center;
  background: rgba(255,255,255,.02); transition: background .16s ease, box-shadow .16s ease; }
.navitem:hover { color: #fff; }
.navitem:hover .ic { background: color-mix(in srgb, var(--acc) 14%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--acc) 22%, transparent); }
.navitem:hover .ic svg { color: var(--cy); filter: drop-shadow(0 0 5px color-mix(in srgb, var(--cy) 45%, transparent)); }
.navitem.sel { box-shadow: inset 0 0 0 1px rgba(39,69,116,.7), 0 0 20px -10px color-mix(in srgb, var(--acc) 70%, transparent); }
.navitem.sel .ic { background: linear-gradient(145deg, color-mix(in srgb, var(--acc) 30%, transparent), color-mix(in srgb, var(--cy) 10%, transparent)); }
.navitem.sel .ic svg { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--cy) 55%, transparent)); }
.sep { color: color-mix(in srgb, var(--cy) 40%, var(--mut2)); }
.side .foot { background: linear-gradient(180deg, transparent, rgba(31,143,255,.04)); border-radius: 12px; }

/* ---------- Status da API (componente premium) ---------- */
.pill { transition: border-color .2s ease, background .2s ease; }
.pill .dot { position: relative; }
.pill .dot.ok::after, .pill .dot.warn::after {
  content: ""; position: absolute; inset: -3px; border-radius: 50%;
  box-shadow: 0 0 0 0 currentColor; animation: dpx-pulse 2.4s ease-out infinite; opacity: .5;
}
.dot.ok { background: var(--grn); box-shadow: 0 0 8px rgba(34,197,94,.6); color: var(--grn); }
.dot.warn { background: var(--amb); box-shadow: 0 0 8px rgba(245,165,36,.55); color: var(--amb); }
.dot.off { background: var(--red); box-shadow: 0 0 8px rgba(240,97,109,.55); color: var(--red); }
@keyframes dpx-pulse { 70% { box-shadow: 0 0 0 6px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }

/* ---------- Header com profundidade ---------- */
header.top { box-shadow: 0 6px 18px -14px rgba(0,0,0,.8); }
header.top .htitle { letter-spacing: -.01em; }

/* ---------- Tabelas refinadas ---------- */
table.responsive { width: 100%; border-collapse: collapse; }
table.responsive thead th { font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--mut);
  padding: 11px 12px; border-bottom: 1px solid var(--line2); position: sticky; top: 0; background: rgba(13,22,40,.7); backdrop-filter: blur(6px); }
table.responsive tbody td { padding: 12px; border-bottom: 1px solid var(--line); }
table.responsive tbody tr { transition: background .12s ease; }
table.responsive tbody tr:hover { background: color-mix(in srgb, var(--acc) 6%, transparent); }
table.responsive tbody tr:hover td:first-child { box-shadow: inset 2px 0 0 color-mix(in srgb, var(--cy) 70%, transparent); }

/* ---------- Badges com glow extremamente discreto ---------- */
.chip { box-shadow: 0 0 0 1px rgba(255,255,255,.02) inset; }
.chip.s-active  { box-shadow: 0 0 10px -4px rgba(34,197,94,.5); }
.chip.s-pending { box-shadow: 0 0 10px -4px rgba(245,165,36,.5); }
.chip.s-revoked { box-shadow: 0 0 10px -4px rgba(240,97,109,.5); }
.chip.s-offline { box-shadow: 0 0 10px -4px rgba(120,140,180,.35); }

/* ---------- Botões: reflexo/gradiente refinado (cores inalteradas) ---------- */
.btn-primary { position: relative; overflow: hidden; box-shadow: 0 6px 18px -10px rgba(31,143,255,.6); }
.btn-primary::after { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, transparent 32%, rgba(255,255,255,.22) 50%, transparent 68%); transform: translateX(-120%); transition: transform .6s ease; }
.btn-primary:hover::after { transform: translateX(120%); }

/* ---------- Foco acessível reforçado ---------- */
.navitem:focus-visible, .btn:focus-visible, .chip:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px color-mix(in srgb, var(--acc) 60%, transparent); }

/* ---------- Modo claro premium (mesma identidade DashOs) ---------- */
[data-theme="light"] { --bg:#eef2f8; --bg2:#e6ecf6; --card:#ffffff; --card2:#f4f7fc; --line:#d9e1ee; --line2:#c7d3e6;
  --ink:#0f1a2e; --ink2:#33425c; --mut:#5a6b86; --mut2:#7a89a3; }
[data-theme="light"] body { background: var(--bg); color: var(--ink); }
[data-theme="light"] .kpi, [data-theme="light"] .panel {
  background-image: linear-gradient(180deg, rgba(255,255,255,.9), #fbfdff);
  box-shadow: 0 1px 2px rgba(16,24,40,.05), 0 14px 30px -18px rgba(16,24,40,.2); }
[data-theme="light"] #dpx-wave { opacity: .28; }
[data-theme="light"] table.responsive thead th { background: rgba(244,247,252,.85); }
[data-theme="light"] .navitem:hover { background: color-mix(in srgb, var(--acc) 8%, #fff); }

/* ---------- Movimento reduzido ---------- */
@media (prefers-reduced-motion: reduce) {
  .kpi, .navitem, .navitem .ic, table.responsive tbody tr, .pill { transition: none; }
  .pill .dot.ok::after, .pill .dot.warn::after, .btn-primary::after { animation: none; display: none; }
  #dpx-wave { display: none; }
}