/* ============================================================================
   K3 THEME — handcrafted dark-metal design system (additive override, loads
   AFTER dash.css). Visual only — no markup logic depends on this.
   ============================================================================ */
:root{
  /* darker, cyan-forward, less purple */
  --bg:#05070d;
  --k3-bg:#05070d; --k3-panel:#0b101a; --k3-panel-2:#111827;
  --k3-line:rgba(148,163,184,.16); --k3-line-2:rgba(148,163,184,.26);
  --k3-cyan:#38d9ff; --k3-blue:#4f8cff; --k3-silver:#cbd5e1; --k3-muted:#7b8497;
  --k3-danger:#ff4d5e; --k3-warning:#ff9f1c; --k3-green:#34e0a1;
  /* remap dash.css vars onto the new palette */
  --panel:rgba(255,255,255,.035); --line:var(--k3-line); --line2:var(--k3-line-2);
  --acc:var(--k3-cyan); --acc2:var(--k3-blue); --red:var(--k3-danger); --green:var(--k3-green); --amber:var(--k3-warning);
  --text:#e8edf6; --muted:var(--k3-muted); --dim:#4a5468;
}

/* ---- background: layered radial glows + faint grid texture ---- */
body{ background:var(--k3-bg) !important; -webkit-font-smoothing:antialiased; }
.app-bg{
  background:
    radial-gradient(1100px 620px at 12% -12%, rgba(56,217,255,.10), transparent 58%),
    radial-gradient(900px 560px at 110% 8%, rgba(79,140,255,.08), transparent 55%),
    radial-gradient(700px 700px at 50% 120%, rgba(56,217,255,.05), transparent 60%) !important;
}
.app-bg::after{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.5;
  background-image:linear-gradient(rgba(148,163,184,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(148,163,184,.035) 1px, transparent 1px);
  background-size:46px 46px; mask-image:radial-gradient(circle at 50% 40%, #000 0%, transparent 78%);
}

/* ---- glass / panels: gradient, translucent border, top highlight, inset depth ---- */
.glass, .panel{
  background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.012)) , var(--k3-panel) !important;
  border:1px solid var(--k3-line) !important;
  border-radius:16px;
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset, 0 22px 50px -26px rgba(0,0,0,.8) !important;
  position:relative;
}
.panel{ overflow:hidden; }
.panel::before{ content:""; position:absolute; top:0; left:14px; right:14px; height:1px; background:linear-gradient(90deg, transparent, rgba(56,217,255,.4), transparent); opacity:.5; }
.panel-head{ border-bottom:1px solid var(--k3-line); }
.panel-head h2{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:700; letter-spacing:.02em;
  text-transform:uppercase; font-size:14px;
}

/* ---- sidebar: brand, grouped nav, glowing active rail ---- */
.sidebar{ background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.008)), #07090f !important; border-right:1px solid var(--k3-line) !important; }
.side-brand{ display:flex; align-items:center; gap:11px; padding:4px 4px 2px; margin-bottom:18px; }
.side-logo-img{ width:38px; height:38px; display:block; filter:drop-shadow(0 4px 10px rgba(0,0,0,.6)); }
.side-logo-name{ font-family:'Space Grotesk'; font-weight:800; font-size:19px; letter-spacing:-.01em; line-height:1; color:#fff; }
.side-logo-label{ font-size:9.5px; letter-spacing:.32em; color:var(--k3-cyan); font-weight:700; margin-top:3px; }
.nav-group{ font-size:9.5px; letter-spacing:.26em; color:var(--k3-muted); font-weight:700; text-transform:uppercase; padding:14px 12px 6px; opacity:.7; }
.nav-group:first-of-type{ padding-top:4px; }
.side-nav .nav-link{
  position:relative; display:flex; align-items:center; gap:11px; padding:9px 12px; border-radius:10px;
  color:var(--k3-muted); font-size:13.5px; font-weight:500; transition:color .18s, background .18s, transform .12s; margin:1px 0;
}
.side-nav .nav-link .ni{ opacity:.8; transition:filter .18s, transform .18s; }
.side-nav .nav-link:hover{ color:#eaf2ff; background:rgba(255,255,255,.04); }
.side-nav .nav-link:hover .ni{ transform:translateX(1px); }
.side-nav .nav-link.active{
  color:#fff; background:linear-gradient(90deg, rgba(56,217,255,.16), rgba(56,217,255,.02));
  border:1px solid rgba(56,217,255,.22);
}
.side-nav .nav-link.active::before{
  content:""; position:absolute; left:-1px; top:7px; bottom:7px; width:3px; border-radius:3px;
  background:linear-gradient(180deg, var(--k3-cyan), var(--k3-blue)); box-shadow:0 0 12px var(--k3-cyan), 0 0 4px var(--k3-cyan);
}
.side-nav .nav-link.active .ni{ filter:drop-shadow(0 0 6px rgba(56,217,255,.8)); }

/* ---- buttons: physical, glow primary, glass secondary, gradient danger ---- */
.btn-primary{
  background:linear-gradient(180deg, rgba(56,217,255,.22), rgba(79,140,255,.10)) , #0c1320 !important;
  border:1px solid rgba(56,217,255,.5) !important; color:#eafaff !important;
  box-shadow:0 1px 0 rgba(255,255,255,.12) inset, 0 8px 22px -10px rgba(56,217,255,.5) !important;
  transition:transform .14s, box-shadow .2s, filter .2s !important;
}
.btn-primary:hover{ transform:translateY(-1px); filter:brightness(1.08); box-shadow:0 1px 0 rgba(255,255,255,.16) inset, 0 12px 30px -10px rgba(56,217,255,.65) !important; }
.btn-primary:active{ transform:translateY(0); filter:brightness(.96); }
.btn-sm{ background:rgba(255,255,255,.04); border:1px solid var(--k3-line); color:var(--k3-silver); border-radius:9px; transition:all .15s; }
.btn-sm:hover{ border-color:var(--k3-line-2); color:#fff; background:rgba(255,255,255,.07); transform:translateY(-1px); }
.btn-sm.green{ background:linear-gradient(180deg, rgba(52,224,161,.18), rgba(52,224,161,.05)); border-color:rgba(52,224,161,.4); color:#aef7d8; }
.btn-sm.green:hover{ box-shadow:0 8px 20px -10px rgba(52,224,161,.5); }
.btn-sm.red{ background:linear-gradient(180deg, rgba(255,77,94,.16), rgba(255,77,94,.04)); border-color:rgba(255,77,94,.38); color:#ffc2c9; }
.btn-sm.red:hover{ box-shadow:0 8px 20px -10px rgba(255,77,94,.5); }
.ico-btn{ transition:transform .14s, color .15s, background .15s; border-radius:8px; }
.ico-btn:hover{ transform:translateY(-1px); color:var(--k3-cyan); background:rgba(56,217,255,.1); }
.btn-ghost:hover{ border-color:rgba(56,217,255,.35); color:#fff; }

/* ---- tables: sticky glass header, row hover glow, soft separators ---- */
table{ border-collapse:separate; border-spacing:0; }
thead th{
  position:sticky; top:0; z-index:2; background:rgba(10,15,24,.92); backdrop-filter:blur(8px);
  text-transform:uppercase; letter-spacing:.08em; font-size:10.5px; color:var(--k3-muted); font-weight:700;
  border-bottom:1px solid var(--k3-line) !important; padding:11px 12px;
}
tbody tr{ transition:background .14s, box-shadow .14s; }
tbody tr:nth-child(even) td{ background:rgba(255,255,255,.012); }
tbody td{ border-bottom:1px solid rgba(148,163,184,.07) !important; padding:10px 12px; }
tbody tr:hover td{ background:rgba(56,217,255,.06); box-shadow:inset 0 0 0 9999px rgba(56,217,255,.015); }
.cclick{ transition:color .15s; } .cclick:hover{ color:var(--k3-cyan); }
.empty{ color:var(--k3-muted); text-align:center; padding:26px; font-size:13px; opacity:.85; }
.empty::before{ content:"⌁"; display:block; font-size:22px; color:var(--k3-line-2); margin-bottom:6px; }

/* ---- status pills / badges: subtle glow ---- */
.badge{ border-radius:7px; font-weight:700; letter-spacing:.04em; font-size:10.5px; padding:3px 8px; }
.badge.b-active, .badge.b-gp{ background:rgba(56,217,255,.14); color:var(--k3-cyan); border:1px solid rgba(56,217,255,.3); box-shadow:0 0 12px -4px rgba(56,217,255,.5); }
.badge.b-bfx{ background:rgba(255,159,28,.14); color:var(--k3-warning); border:1px solid rgba(255,159,28,.32); }
.badge.b-suspended{ background:rgba(123,132,151,.14); color:#aab3c4; border:1px solid var(--k3-line-2); }
.badge.b-both{ background:rgba(79,140,255,.14); color:var(--k3-blue); border:1px solid rgba(79,140,255,.3); }
.status-pill{ border:1px solid rgba(52,224,161,.3); background:rgba(52,224,161,.08); border-radius:20px; }
.status-pill .dot{ background:var(--k3-green); box-shadow:0 0 8px var(--k3-green); }

/* ---- inputs: focus glow ---- */
.field input, .search, input, select, textarea{ transition:border-color .18s, box-shadow .18s, background .18s; }
.field input:focus, .search:focus, input:focus, select:focus, textarea:focus{
  border-color:rgba(56,217,255,.55) !important; box-shadow:0 0 0 3px rgba(56,217,255,.12), 0 0 18px -6px rgba(56,217,255,.4) !important; outline:none;
}

/* ---- modal: scale + fade in ---- */
.modal{ transition:opacity .2s; }
.modal-box{ animation:k3modal .24s cubic-bezier(.2,.8,.2,1); border:1px solid var(--k3-line-2) !important; box-shadow:0 30px 80px -30px rgba(0,0,0,.85), 0 0 0 1px rgba(56,217,255,.06) inset !important; }
@keyframes k3modal{ from{ opacity:0; transform:translateY(8px) scale(.98); } to{ opacity:1; transform:none; } }

/* ---- toast: slide-in ---- */
.toast{ border:1px solid var(--k3-line-2); border-left:3px solid var(--k3-cyan); box-shadow:0 14px 34px -16px rgba(0,0,0,.7); }
.toast.t-err{ border-left-color:var(--k3-danger); }

/* ---- topbar / auth (login) polish ---- */
.topbar h1{ font-family:'Space Grotesk','Inter',sans-serif; text-transform:uppercase; letter-spacing:.04em; font-weight:700; }
.auth-logo span{ color:var(--k3-cyan); }
.auth-card, .auth-wrap .glass{ box-shadow:0 0 0 1px rgba(56,217,255,.08) inset, 0 40px 90px -40px rgba(0,0,0,.9); }
@media (prefers-reduced-motion: reduce){ .modal-box{ animation:none; } * { scroll-behavior:auto; } }