/* ============================================================================
   Velaris — Admin. Black. A true dark console: near-black canvas, faint
   white hairlines, off-white ink, glass-elevated surfaces. White is the
   signal colour. Motion is slow and smooth — long eases, soft blur reveals,
   a drawer that unfolds rather than snaps.
   ========================================================================== */
:root {
  --bg:#080808; --bg-2:#0e0e0f; --bg-3:#161618;
  --surface:#111113; --surface-2:#161619; --elevate:#1b1b1f;
  --ink:#f4f4f5; --ink-2:#c4c4c8; --muted:#8a8a93; --faint:#5e5e66;
  --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.05); --line-3:rgba(255,255,255,.14);
  --alert:#ff5d5d; --alert-bg:rgba(255,93,93,.10);
  --warn:#f0b54a; --warn-bg:rgba(240,181,74,.10);
  --ok:#3fcf8e; --ok-bg:rgba(63,207,142,.10);
  --r:13px; --r-sm:9px;
  --sans:"Schibsted Grotesk",ui-sans-serif,system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --shadow:0 1px 0 rgba(255,255,255,.03) inset, 0 18px 50px -28px rgba(0,0,0,.9);
}
* { box-sizing:border-box; }
html,body { height:100%; }
body { margin:0; color:var(--ink);
  background:radial-gradient(1200px 600px at 78% -8%, #1a1a1f 0%, transparent 55%), var(--bg);
  font:14px/1.55 var(--sans); -webkit-font-smoothing:antialiased; letter-spacing:-.01em; }
.hidden { display:none !important; }
h1,h2,h3,h4 { margin:0; font-weight:600; letter-spacing:-.02em; }
::selection { background:var(--ink); color:#080808; }
::-webkit-scrollbar { width:11px; height:11px; }
::-webkit-scrollbar-thumb { background:rgba(255,255,255,.10); border-radius:99px; border:3px solid transparent; background-clip:padding-box; }
::-webkit-scrollbar-thumb:hover { background:rgba(255,255,255,.18); background-clip:padding-box; }

/* ---------- motion ---------- */
@keyframes reveal { from { opacity:0; transform:translateY(14px); filter:blur(6px); } to { opacity:1; transform:none; filter:blur(0); } }
@keyframes drawerIn { from { opacity:0; transform:translateY(-10px) scaleY(.985); } to { opacity:1; transform:none; } }
@keyframes glow { from { box-shadow:0 0 0 0 rgba(255,255,255,0); } to {} }
.reveal { animation:reveal .66s var(--ease-out) both; }
.stagger > * { animation:reveal .66s var(--ease-out) both; }
.stagger > *:nth-child(1){animation-delay:.05s} .stagger > *:nth-child(2){animation-delay:.13s}
.stagger > *:nth-child(3){animation-delay:.21s} .stagger > *:nth-child(4){animation-delay:.29s}
@media (prefers-reduced-motion:reduce){ *{animation:none!important; transition:none!important;} }

/* ---------- buttons ---------- */
button { font-family:var(--sans); font-size:13px; font-weight:500; cursor:pointer;
  color:var(--ink); background:var(--elevate); border:1px solid var(--line);
  padding:8px 14px; border-radius:var(--r-sm); transition:transform .25s var(--ease-out), background .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease); }
button:hover { border-color:var(--line-3); background:#212126; }
button:active { transform:translateY(1px) scale(.99); }
.btn-signal { background:var(--ink); color:#080808; border-color:var(--ink); font-weight:600; }
.btn-signal:hover { background:#fff; border-color:#fff; box-shadow:0 8px 22px -10px rgba(255,255,255,.35); }
.btn-quiet { background:transparent; border-color:var(--line); }
.btn-quiet:hover { background:var(--bg-3); }
.btn-danger { color:var(--alert); border-color:rgba(255,93,93,.28); background:var(--alert-bg); }
.btn-danger:hover { background:rgba(255,93,93,.18); border-color:rgba(255,93,93,.5); box-shadow:0 8px 22px -12px rgba(255,93,93,.5); }
.block { width:100%; }
button:disabled { opacity:.4; cursor:not-allowed; }

/* ---------- inputs ---------- */
input,textarea { width:100%; font:14px/1.5 var(--sans); color:var(--ink); background:var(--bg-2);
  border:1px solid var(--line); padding:10px 12px; border-radius:var(--r-sm); transition:.22s var(--ease); }
input:focus,textarea:focus { outline:none; border-color:var(--line-3); background:var(--surface); box-shadow:0 0 0 3px rgba(255,255,255,.07); }
input::placeholder,textarea::placeholder { color:var(--faint); }
textarea { resize:vertical; min-height:88px; font-family:var(--sans); }
.field { display:block; margin:12px 0; }
.field span { display:block; font-size:12px; color:var(--muted); margin-bottom:6px; font-weight:500; }

/* ---------- login ---------- */
.login-wrap { min-height:100vh; display:grid; place-items:center; padding:24px; }
.login-card { width:100%; max-width:380px; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); padding:36px 32px 30px; box-shadow:var(--shadow); }
.login-mark { width:46px; height:46px; display:grid; place-items:center; margin-bottom:20px;
  font-weight:700; font-size:23px; color:#080808; background:linear-gradient(160deg,#fff,#c9c9cf); border-radius:13px;
  box-shadow:0 10px 30px -12px rgba(255,255,255,.3); }
.login-title { font-size:27px; }
.login-sub { margin:4px 0 24px; color:var(--muted); font-size:14px; }
.login-card .btn-signal { width:100%; margin-top:10px; padding:11px; }
.err { color:var(--alert); min-height:1.2em; font-size:13px; margin:12px 0 0; }

/* ---------- shell ---------- */
.shell { display:grid; grid-template-columns:240px 1fr; min-height:100vh; }
.sidebar { display:flex; flex-direction:column; padding:22px 16px; background:linear-gradient(180deg,var(--bg-2),var(--bg));
  border-right:1px solid var(--line); position:sticky; top:0; height:100vh; }
.side-brand { display:flex; align-items:center; gap:10px; padding:6px 8px 26px; }
.side-brand .mark { width:30px; height:30px; display:grid; place-items:center; font-weight:700;
  font-size:16px; color:#080808; background:linear-gradient(160deg,#fff,#c9c9cf); border-radius:9px; }
.side-brand .wordmark { font-weight:600; font-size:17px; letter-spacing:-.02em; }
.side-nav { display:flex; flex-direction:column; gap:3px; }
.nav-item { position:relative; display:flex; align-items:center; padding:9px 12px; font-size:14px;
  font-weight:500; color:var(--muted); text-decoration:none; cursor:pointer; border-radius:var(--r-sm);
  transition:color .22s var(--ease), background .22s var(--ease); }
.nav-item:hover { color:var(--ink); background:var(--bg-3); }
.nav-item.active { color:var(--ink); background:var(--elevate); box-shadow:var(--shadow); }
.nav-item.active::before { content:""; position:absolute; left:-16px; top:50%; transform:translateY(-50%);
  width:3px; height:18px; background:var(--ink); border-radius:0 3px 3px 0; transition:.3s var(--ease-out); }
.sidebar-foot { margin-top:auto; display:flex; flex-direction:column; gap:12px; }
.status-line { display:flex; align-items:center; gap:8px; font-size:12px; color:var(--muted); padding:0 4px; }
.pulse { width:7px; height:7px; border-radius:50%; background:var(--ok); animation:pulse 2.6s infinite; }
@keyframes pulse { 0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(63,207,142,.45)} 50%{opacity:.55;box-shadow:0 0 0 5px rgba(63,207,142,0)} }

.content { padding:38px 46px; max-width:1240px; }

/* ---------- page header ---------- */
.page-head { display:flex; align-items:flex-end; justify-content:space-between; gap:16px;
  flex-wrap:wrap; margin-bottom:28px; }
.page-head .crumb { font-size:12px; color:var(--faint); margin-bottom:8px; font-weight:500;
  text-transform:uppercase; letter-spacing:.08em; }
.page-head h1 { font-size:29px; }
.page-head .sub { color:var(--muted); font-size:14px; margin-top:7px; }

/* ---------- panel ---------- */
.panel { background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  margin-bottom:20px; overflow:hidden; box-shadow:var(--shadow); }
.panel-head { display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:15px 20px; border-bottom:1px solid var(--line); }
.panel-head h3 { font-size:14px; }
.panel-body { padding:20px; }
.form-row { display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end; }
.form-row .field { margin:0; flex:1; min-width:180px; }

/* ---------- tables ---------- */
.table-wrap { overflow-x:auto; }
table { width:100%; border-collapse:separate; border-spacing:0; font-size:13.5px; }
thead th { text-align:left; padding:12px 20px; font-size:11.5px; font-weight:500; color:var(--faint);
  background:var(--bg-2); border-bottom:1px solid var(--line); white-space:nowrap;
  text-transform:uppercase; letter-spacing:.05em; }
tbody td { padding:14px 20px; border-bottom:1px solid var(--line-2); vertical-align:middle; }
tbody tr:last-child td { border-bottom:none; }
tbody tr.lic-row { cursor:pointer; transition:background .22s var(--ease); }
tbody tr.lic-row:hover td { background:var(--bg-3); }
tbody tr.lic-row.open td { background:var(--bg-3); }
.mono { font-family:var(--mono); font-size:12.5px; letter-spacing:-.02em; }
.keycell { font-family:var(--mono); font-size:12.5px; font-weight:500; }
.muted-cell { color:var(--muted); }
.muted { color:var(--muted); }
.empty { padding:44px 20px; text-align:center; color:var(--muted); }
.caret { display:inline-block; width:10px; color:var(--faint); transition:transform .28s var(--ease-out); }
tr.open .caret { transform:rotate(90deg); color:var(--ink); }

/* ---------- badges ---------- */
.tag { display:inline-flex; align-items:center; gap:6px; padding:3px 9px; border-radius:999px;
  font-size:12px; font-weight:500; border:1px solid var(--line); background:var(--bg-3); color:var(--ink-2); white-space:nowrap; }
.tag::before { content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }
.tag.ok,.tag.active { color:var(--ok); background:var(--ok-bg); border-color:rgba(63,207,142,.22); }
.tag.bad,.tag.disabled { color:var(--alert); background:var(--alert-bg); border-color:rgba(255,93,93,.24); }
.tag.warn,.tag.building { color:var(--warn); background:var(--warn-bg); border-color:rgba(240,181,74,.22); }
.tag.neutral { color:var(--muted); background:var(--bg-3); border-color:var(--line); }
.tag.flat::before { display:none; }
.tag.pulse-bad { animation:pulseBad 1.8s infinite; }
@keyframes pulseBad { 0%,100%{box-shadow:0 0 0 0 rgba(255,93,93,.45)} 50%{box-shadow:0 0 0 5px rgba(255,93,93,0)} }
.badge-stack { display:flex; gap:6px; flex-wrap:wrap; align-items:center; }

/* ---------- row actions ---------- */
.row-actions { display:flex; gap:7px; flex-wrap:wrap; }
.row-actions button { padding:5px 11px; font-size:12.5px; }

/* ---------- detail drawer ---------- */
tr.detail-row > td { padding:0; background:var(--bg-2); border-bottom:1px solid var(--line); }
.drawer { display:grid; grid-template-columns:1.1fr 1fr; animation:drawerIn .42s var(--ease-out) both; transform-origin:top; }
.drawer-col { padding:22px 24px; }
.drawer-col + .drawer-col { border-left:1px solid var(--line); }
.drawer h4 { font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.06em;
  margin:0 0 14px; font-weight:600; }
.meta-grid { display:grid; grid-template-columns:auto 1fr; gap:10px 20px; font-size:13px; margin-bottom:20px; }
.meta-grid dt { color:var(--faint); font-size:12px; align-self:center; text-transform:uppercase; letter-spacing:.04em; }
.meta-grid dd { margin:0; color:var(--ink); word-break:break-all; display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.hwid { font-family:var(--mono); font-size:11.5px; line-height:1.5; color:var(--ink-2); }
.copyable { position:relative; cursor:pointer; transition:color .2s var(--ease); }
.copyable:hover { color:var(--ink); }
.copyable::after { content:"⧉ copy"; font-family:var(--sans); font-size:10px; color:var(--faint);
  opacity:0; margin-left:2px; transition:opacity .2s var(--ease); letter-spacing:0; }
.copyable:hover::after { opacity:1; }
.copyable.copied::after { content:"✓ copied"; color:var(--ok); opacity:1; }
.note-actions { display:flex; gap:10px; margin-top:10px; align-items:center; }
.note-saved { color:var(--ok); font-size:12.5px; opacity:0; transform:translateX(-4px); transition:.3s var(--ease-out); }
.note-saved.show { opacity:1; transform:none; }

/* event timeline */
.events { display:flex; flex-direction:column; max-height:340px; overflow:auto; }
.evt { display:grid; grid-template-columns:16px 1fr auto; gap:12px; padding:11px 2px;
  border-bottom:1px solid var(--line-2); align-items:start; animation:reveal .5s var(--ease-out) both; }
.evt:last-child { border-bottom:none; }
.evt-rail { display:flex; justify-content:center; padding-top:4px; }
.evt-node { width:8px; height:8px; border-radius:50%; background:var(--faint); box-shadow:0 0 0 4px var(--bg-2); }
.evt.r-bound .evt-node,.evt.r-reused .evt-node { background:var(--ok); box-shadow:0 0 0 4px var(--bg-2), 0 0 10px rgba(63,207,142,.6); }
.evt.r-rejected_hwid .evt-node { background:var(--alert); box-shadow:0 0 0 4px var(--bg-2), 0 0 10px rgba(255,93,93,.6); }
.evt.r-rejected_status .evt-node,.evt.r-verdict_destroy .evt-node { background:var(--warn); box-shadow:0 0 0 4px var(--bg-2), 0 0 10px rgba(240,181,74,.6); }
.evt-main .evt-result { font-weight:600; font-size:13px; }
.evt.r-rejected_hwid .evt-result { color:var(--alert); }
.evt.r-rejected_status .evt-result,.evt.r-verdict_destroy .evt-result { color:var(--warn); }
.evt-sub { color:var(--muted); font-size:12px; margin-top:3px; word-break:break-all; font-family:var(--mono); }
.evt-flag { color:var(--warn); font-size:11.5px; margin-top:3px; }
.evt-time { color:var(--faint); font-size:11.5px; white-space:nowrap; text-align:right; }
.evt-empty { color:var(--faint); font-size:13px; padding:16px 2px; }

/* ---------- toggle switch ---------- */
.flags { display:flex; flex-direction:column; }
.switch-row { display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:14px 2px; border-bottom:1px solid var(--line-2); cursor:pointer; user-select:none; }
.switch-row:last-child { border-bottom:none; }
.switch-label { font-weight:500; }
.switch-desc { display:block; font-size:12.5px; color:var(--muted); font-weight:400; margin-top:2px; }
.switch { position:relative; flex:none; width:44px; height:25px; }
.switch input { position:absolute; opacity:0; width:0; height:0; }
.slider { position:absolute; inset:0; background:#2a2a30; border-radius:999px; transition:.28s var(--ease-out); }
.slider::before { content:""; position:absolute; left:3px; top:3px; width:19px; height:19px;
  background:#e8e8ec; border-radius:50%; box-shadow:0 1px 4px rgba(0,0,0,.5); transition:.28s var(--ease-out); }
.switch input:checked + .slider { background:var(--ink); }
.switch input:checked + .slider::before { transform:translateX(19px); background:#080808; }
.switch input:focus-visible + .slider { box-shadow:0 0 0 3px rgba(255,255,255,.16); }

/* ---------- dialog ---------- */
dialog { background:var(--surface); color:var(--ink); border:1px solid var(--line); border-radius:var(--r);
  padding:0; width:min(460px,93vw); box-shadow:0 40px 100px -30px rgba(0,0,0,.9); }
dialog[open] { animation:reveal .34s var(--ease-out) both; }
dialog::backdrop { background:rgba(0,0,0,.6); backdrop-filter:blur(3px); }
.dlg-head { padding:20px 22px 4px; }
.dlg-head h3 { font-size:17px; }
.dlg-head .sub { color:var(--muted); font-size:12.5px; margin-top:5px; }
.dlg-body { padding:10px 22px; }
.confirm-msg { color:var(--ink-2); font-size:13.5px; line-height:1.6; margin:0; }
.dlg-foot { display:flex; justify-content:flex-end; gap:10px; padding:16px 22px 20px; }
dialog pre { margin:0; padding:16px; background:var(--bg-2); border:1px solid var(--line);
  border-radius:var(--r-sm); max-width:80vw; max-height:60vh; overflow:auto;
  font-family:var(--mono); font-size:12px; line-height:1.6; color:var(--ink-2); }
.crash-dialog { width:min(780px,95vw); }
.confirm-dialog { width:min(440px,93vw); }

/* responsive */
@media (max-width:760px){
  .shell { grid-template-columns:1fr; }
  .sidebar { position:static; height:auto; flex-direction:row; flex-wrap:wrap; align-items:center; }
  .side-brand { padding:6px 8px; } .sidebar-foot { margin:0 0 0 auto; flex-direction:row; }
  .side-nav { flex-direction:row; } .nav-item.active::before { display:none; }
  .content { padding:24px; } .drawer { grid-template-columns:1fr; }
  .drawer-col + .drawer-col { border-left:none; border-top:1px solid var(--line); }
}