/* ============================================================
   PANEL UI UPGRADE v2 — 2026-10-14b
   Energetic accents + official table treatment.
   Additive layer: loads after ui_upgrade.css, overrides only the
   selectors listed here; everything else passes through.
   ============================================================ */

/* ---------- 1. topbar: animated brand hairline ---------- */
.topbar{position:relative}
.topbar::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:linear-gradient(90deg,transparent 4%,#e8943a 30%,#c82f2f 55%,#e8943a 78%,transparent 96%);
  background-size:220% 100%;opacity:.85;animation:tbSheen 7s linear infinite;pointer-events:none}
@keyframes tbSheen{from{background-position:120% 0}to{background-position:-120% 0}}

/* ---------- 2. login card: rotating conic aura ---------- */
@property --spin{syntax:"<angle>";inherits:false;initial-value:0deg}
.loginbox{position:relative;isolation:isolate}
.loginbox::before{content:"";position:absolute;inset:-14px;z-index:-1;border-radius:26px;
  background:conic-gradient(from var(--spin),rgba(232,148,58,.55),rgba(200,47,47,.40),rgba(232,148,58,.08),rgba(232,148,58,.55));
  filter:blur(18px);opacity:.55;animation:spinRing 9s linear infinite;pointer-events:none}
html.light .loginbox::before{opacity:.32}
@keyframes spinRing{to{--spin:360deg}}

/* ---------- 3. headline numbers: animated gradient text ---------- */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .stat-num,.kpi .k-num{
    background:linear-gradient(92deg,#f2b258,#e8943a 38%,#d24a3a 70%,#f2b258);
    background-size:250% 100%;
    -webkit-background-clip:text;background-clip:text;color:transparent;
    animation:numSheen 6s ease-in-out infinite}
}
@keyframes numSheen{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}

/* ---------- 4. primary buttons: live glow + press ---------- */
.btn.primary{box-shadow:0 0 0 1px rgba(232,148,58,.35),0 4px 16px rgba(232,148,58,.22)}
.btn.primary:hover{box-shadow:0 0 0 1px rgba(232,148,58,.55),0 6px 24px rgba(232,148,58,.38)}
.btn.primary:active{transform:translateY(1px) scale(.985);filter:brightness(1.06)}

/* ---------- 5. active nav: solid energy pill (replaces glow pulse) ---------- */
.sb-item{border-radius:10px}
.sb-item.active,html.light .sb-item.active{animation:none;
  background:linear-gradient(90deg,rgba(232,148,58,.22),rgba(200,47,47,.10) 70%,transparent);
  box-shadow:inset 0 0 0 1px rgba(232,148,58,.25),inset 3px 0 0 var(--acc);color:#ffb45e}
html.light .sb-item.active{color:#b45309;
  box-shadow:inset 0 0 0 1px rgba(217,119,6,.25),inset 3px 0 0 #d97706}

/* ---------- 6. tabs: glowing gradient underline ---------- */
.tab{position:relative;transition:color .15s,background .15s}
.tab:hover{color:var(--txt)}
.tab.active{color:#ffb45e;text-shadow:0 0 14px rgba(232,148,58,.45)}
.tab.active::after{content:"";position:absolute;left:10%;right:10%;bottom:-2px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,transparent,#e8943a 30%,#c82f2f 70%,transparent);
  filter:drop-shadow(0 0 6px rgba(232,148,58,.75))}

/* ---------- 7. OFFICIAL TABLES ---------- */
/* frame */
.tblwrap{border-radius:12px;box-shadow:0 10px 26px rgba(0,0,0,.22),0 2px 6px rgba(0,0,0,.14)}
html.light .tblwrap{box-shadow:0 10px 24px rgba(15,23,42,.10)}
/* grid alignment: monospaced digits line up in every column */
.tbl{border-collapse:separate;border-spacing:0;font-variant-numeric:tabular-nums}
/* header: sticky, gradient, accent underline, lift shadow */
.tbl thead th{position:sticky;top:0;z-index:2;
  background:linear-gradient(180deg,color-mix(in srgb,var(--panel3) 60%,var(--panel2)),var(--panel2));
  border-bottom:2px solid var(--acc);box-shadow:0 3px 10px rgba(0,0,0,.35)}
.tbl thead th:first-child{border-top-left-radius:11px}
.tbl thead th:last-child{border-top-right-radius:11px}
html.light .tbl thead th{box-shadow:0 2px 8px rgba(15,23,42,.10)}
/* zebra (declared BEFORE hover so hover wins) */
.tbl tbody tr:nth-child(even) td{background:color-mix(in srgb,var(--txt) 3%,transparent)}
/* clean last row */
.tbl tbody tr:last-child td{border-bottom:0}
/* lead column carries the row */
.tbl td:first-child{font-weight:600}
/* hover: warm tint + inset accent bar on the lead cell */
.tbl tbody tr:hover td{background:rgba(232,148,58,.09)}
.tbl tbody tr:hover td:first-child{box-shadow:inset 3px 0 0 rgba(232,148,58,.85)}
/* status chips pop inside tables */
.tbl .badge{font-weight:700}

/* ---------- 8. status badges: soft halos ---------- */
.badge.ok{box-shadow:0 0 12px rgba(34,197,94,.28)}
.badge.err{box-shadow:0 0 12px rgba(239,68,68,.28)}
.badge.warn{box-shadow:0 0 12px rgba(245,158,11,.25)}
.badge.acc{box-shadow:0 0 12px rgba(232,148,58,.30)}