/* =============================================
   ONYX Dashboard Global (scoped by file usage)
   - Minimal tokens + utilities used by dashboard
   - Safe to include ONLY on dashboard page
   ============================================= */

/* ---- Theme tokens ---- */
:root{
  /* Core brand */
  --accent:#ff3a3a;      /* ruby */
  --accent-2:#ff6b6b;    /* ember */

  /* Base surfaces */
  --bg-1000:#080808; --bg-900:#0c0c0c; --bg-800:#121212;
  --panel:#101010; 

  /* Text */
  --text:#f2f2f2; 
  --muted:#bdbdbd;

  /* Radii + shadows */
  --card-radius:16px; --btn-radius:12px;
  --shadow-1:0 10px 30px rgba(0,0,0,.45);
  --shadow-2:0 18px 60px rgba(0,0,0,.55);
}

/* ---- Resets / base ---- */
*,*::before,*::after{ box-sizing:border-box }
html,body{ height:100% }
html{ scroll-behavior:auto; /* allow JS-driven smoothness to be precise */ }

html, body {
  background:#0b0b0b;          /* root canvas color */
  color-scheme: dark;          /* iOS dark UI */
  min-height:100%;
  overscroll-behavior:none;    /* prevent white glow on bounce */
}

body{
  margin:0; color:var(--text);
  font:16px/1.5 "Inter","Segoe UI",Roboto,Arial,sans-serif;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}

img{ max-width:100%; display:block }

a{ color:#f0eaea; text-decoration:none }
a:hover{ color:#ffd1d1 }

/* ---- Buttons (used in dashboard) ---- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 16px; border-radius:var(--btn-radius); font-weight:800; cursor:pointer; border:0;
  text-decoration:none; transition: transform .18s, box-shadow .18s, background .18s, color .18s;
}
.btn:focus-visible{ outline:2px solid #fff; outline-offset:2px; }

.btn-primary{
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  color:#000; box-shadow:0 10px 24px rgba(255,58,58,.22);
}
.btn-primary:hover{ transform:translateY(-1px); box-shadow:0 14px 30px rgba(255,58,58,.28) }

.btn-danger{
  background:linear-gradient(135deg,#ef4444,#f87171);
  color:#0a0a0a; font-weight:900;
}
.btn-danger:hover{ filter:brightness(1.05); transform:translateY(-1px); box-shadow:0 14px 30px rgba(239,68,68,.28) }

/* ---- Utilities ---- */
.muted{ color:var(--muted) }

/* ---- Scrollbars (dark + visible) ---- */
html{ scrollbar-gutter:stable; scrollbar-width:thin; scrollbar-color:#b8b8b8 #101010; }
html::-webkit-scrollbar{ width:10px }
html::-webkit-scrollbar-track{ background:#101010 }
html::-webkit-scrollbar-thumb{ background:#b8b8b8; border-radius:10px; border:2px solid #101010 }
html::-webkit-scrollbar-thumb:hover{ background:#c9c9c9 }

/* Inner scroll areas to match */
.scrollable,.table-wrap,.modal,.dropdown{ scrollbar-width:thin; scrollbar-color:#b8b8b8 #101010 }
.scrollable::-webkit-scrollbar,.table-wrap::-webkit-scrollbar,.modal::-webkit-scrollbar,.dropdown::-webkit-scrollbar{ width:10px; height:10px }
.scrollable::-webkit-scrollbar-track,.table-wrap::-webkit-scrollbar-track,.modal::-webkit-scrollbar-track,.dropdown::-webkit-scrollbar-track{ background:#101010 }
.scrollable::-webkit-scrollbar-thumb,.table-wrap::-webkit-scrollbar-thumb,.modal::-webkit-scrollbar-thumb,.dropdown::-webkit-scrollbar-thumb{ background:#b8b8b8; border-radius:10px; border:2px solid #101010 }

/* ---- Legal blocks used at bottom of dashboard ---- */
.legal-text { padding:22px 0 10px; background:transparent }
.legal-text__inner{ max-width:920px; margin:0 auto; padding:0 16px; text-align:center }
.legal-text h3{ margin:0 0 8px; font:800 16px/1.2 Inter,system-ui; letter-spacing:.2px; color:#e9e9e9 }
.legal-text p{ margin:8px 0; color:#c9c9c9; line-height:1.55; font-size:13px }
.legal-text p strong{ color:#fff }
.legal-links{ margin-top:8px; font-size:13px }
.legal-links a{ color:#d6d6d6; text-decoration:none; border-bottom:1px dashed #555; padding-bottom:1px }
.legal-links a:hover{ color:#fff; border-bottom-color:var(--accent) }
.legal-links a + a::before{ content:"•"; margin:0 10px; color:#555 }

/* Footer © */
.site-footer{ padding:8px 0 24px; text-align:center }
.site-footer p{ margin:0; font-size:12px; color:#bdbdbd }
/* === RAIL HOTFIX — 2025-10-28 === */
/* === ONYX Side Rail — Canonical (overlay, no page shift) === */
:root{
  --panel:#101010; --line:#222; --accent:#ff3a3a; --muted:#bdbdbd;
  --ok:#22c55e; --bad:#ef4444;
  --railW: 236px;
  --railCollapsedW: 64px;
  --railBorder: rgba(255,120,120,.38);
  --logoSz: 58px; /* trimmed a touch & stable; no hover shift */
}

html,body{height:100%}
body{background:#0b0b0b;color:#eee;margin:0;font:16px/1.5 Inter,system-ui}

/* ===== Collapsible, fixed left rail (OVERLAYS content) ===== */
.sideRail{
  position:fixed; left:0; top:18px; bottom:18px;
  width:var(--railCollapsedW);
  background: linear-gradient(180deg, #141414, #0f0f0f);
  border-right:1px solid #242424; border-top:1px solid #242424; border-bottom:1px solid #242424;
  border-top-right-radius:18px; border-bottom-right-radius:18px;
  box-shadow: 0 18px 60px rgba(0,0,0,.55);
  padding:12px 10px 12px 12px;
  z-index:4000; /* ↑ sits above page content */
  transition: width .18s ease;
  overflow: hidden;
  will-change: width;
  contain: layout paint;
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
}
html.is-rail-collapsed .sideRail:hover{ width:var(--railW); }
.sideRail[data-open="true"]{ width:var(--railW); }

/* DO NOT move page content when rail expands */
.wrap{max-width:1720px;margin:0 auto;padding:20px}
.with-rail{ margin-left: calc(var(--railCollapsedW) + 18px); } /* stays constant */

/* Nav blocks */
.rail-inner{height:100%; display:flex; flex-direction:column}
.vnav{display:flex; flex-direction:column; gap:10px; padding-right:8px}
.vnav a{
  display:flex; align-items:center; gap:12px; padding:11px 12px;
  border-radius:12px; text-decoration:none; font-weight:900; white-space:nowrap;
  color:#ffe9e9; background:linear-gradient(180deg,rgba(255,58,58,.10),rgba(255,58,58,.05));
  border:1.2px solid var(--railBorder);
  box-shadow: inset 0 0 0 1px rgba(255,58,58,.18), 0 10px 24px rgba(255,58,58,.10);
  transition:transform .16s, box-shadow .16s, filter .16s, background .16s;
}
.vnav a:hover{ filter:brightness(1.08); transform:translateY(-1px); box-shadow: inset 0 0 0 1px rgba(255,58,58,.26), 0 16px 34px rgba(255,58,58,.15); }
.vnav a[aria-current="page"]{ background:linear-gradient(180deg,rgba(255,58,58,.22),rgba(255,58,58,.12)); box-shadow: inset 0 0 0 1px rgba(255,58,58,.32), 0 16px 34px rgba(255,58,58,.16); }

/* Icons are IDENTICAL size pre/post hover — no shift */
.vnav .ico{ width:20px !important; height:20px !important; flex:0 0 20px; color:#ffd1d1 }
.vnav .label{ display:inline; }

/* ONYX logo item */
.vnav .vlogo{
  background:transparent !important; border:0 !important; box-shadow:none !important;
  color:#ffe9e9; padding:4px 10px 12px; line-height:0;
}
.vnav .vlogo .logo{
  width:var(--logoSz); height:var(--logoSz); flex:0 0 var(--logoSz);
  display:block; overflow:visible; margin-bottom:2px;
}
.vnav .vlogo .ring{
  fill:none; stroke:url(#g-rail); stroke-width:3.2; stroke-linejoin:round;
  filter:drop-shadow(0 6px 14px rgba(255,58,58,.22));
  stroke-dasharray:220; animation:railShine 7s linear infinite;
  vector-effect: non-scaling-stroke;
}
@keyframes railShine{ 0%{stroke-dashoffset:0} 100%{stroke-dashoffset:-220} }

/* Collapsed: labels hidden; icon size stays CONSTANT */
html.is-rail-collapsed .vnav a{ justify-content:center; gap:0; padding:11px 10px; }
html.is-rail-collapsed .vnav .label{ display:none; }
html.is-rail-collapsed .sideRail:hover .vnav a,
.sideRail[data-open="true"] .vnav a{ justify-content:flex-start; gap:12px; padding:11px 12px; }
html.is-rail-collapsed .sideRail:hover .vnav .label,
.sideRail[data-open="true"] .vnav .label{ display:inline; }

/* Safety: if any global aside styles leaked, pin this box */
#sideRail.sideRail{ position:fixed !important; left:0 !important; margin:0 !important; max-width:none !important; }

/* Views (for the single-file dashboard variant) */
.view{ display:none; }
.view.active{ display:block; }