/* ============================================================================
   darkrange-ui-polish.css — self-hosted fonts + nav / profile / header polish.
   CSP is `font-src 'self' data:` so Google Fonts are blocked; we self-host
   Inter (body), Sora (headings) and JetBrains Mono (code) from /fonts.
   Uses the app's own theme CSS variables so it works in light AND dark.
   ============================================================================ */

/* ---- 1. self-hosted fonts (variable woff2, all weights in one file) -------- */
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url('/fonts/inter-var.woff2') format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:100 800;font-display:swap;src:url('/fonts/jbmono-var.woff2') format('woff2')}
@font-face{font-family:'Sora';font-style:normal;font-weight:100 800;font-display:swap;src:url('/fonts/sora-var.woff2') format('woff2')}

/* refined global typography — Inter now ACTUALLY loads (was falling back to system-ui) */
body,button,input,select,textarea,[class*="font-sans"]{
  font-family:'Inter',system-ui,-apple-system,"Segoe UI",sans-serif!important;
  letter-spacing:-.006em;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;
}
/* headings get Sora for a modern, confident, on-brand character */
h1,h2,h3,.sidebar-brand,[class*="text-gradient"]{
  font-family:'Sora','Inter',system-ui,sans-serif!important;
  letter-spacing:-.022em!important;font-weight:600;
}
code,pre,kbd,samp,.font-mono,[class*="font-mono"]{font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,monospace!important}

/* ---- 2. nav direct links (Compliance / Collaborate) ------------------------ */
/* chevron is a TEXT char ('›') now — hidden in nav-rework.js tagDirect. Do NOT
   hide svg here: the section icon is the only svg, hiding it removes the icon. */

/* ---- 3. dashboard page heading (item 5) ----------------------------------- */
h1.font-semibold{font-size:1.6rem!important;line-height:1.15!important;font-weight:650!important}
@media(min-width:640px){h1.font-semibold{font-size:1.85rem!important}}

/* ---- 4. profile block, bottom-left of the sidebar (item 3) ----------------- */
button:has(> .sidebar-role-badge),button:has(.sidebar-role-badge){
  border:1px solid hsl(var(--border)/.6)!important;
  border-radius:12px!important;
  background:hsl(var(--muted)/.35)!important;
  transition:background .15s,border-color .15s!important;
}
button:has(.sidebar-role-badge):hover{background:hsl(var(--muted)/.7)!important;border-color:hsl(var(--border))!important}
/* the avatar mark (first child of the profile button) — branded gradient disc */
button:has(.sidebar-role-badge) > :first-child{
  background:linear-gradient(135deg,hsl(var(--primary)),hsl(var(--primary)/.65))!important;
  color:#fff!important;border-radius:11px!important;font-weight:700!important;
  box-shadow:0 2px 8px hsl(var(--primary)/.35)!important;border:0!important;
}
/* the role badge — crisp branded pill */
.sidebar-role-badge{
  font-size:10.5px!important;font-weight:700!important;letter-spacing:.3px!important;
  padding:2px 8px!important;border-radius:999px!important;text-transform:none!important;
}
.sidebar-role-badge-admin{
  background:hsl(var(--primary)/.14)!important;color:hsl(var(--primary))!important;
  border:1px solid hsl(var(--primary)/.3)!important;
}

/* ---- 5. Compliance/Collaborate are DIRECT links now → hide their flyout ----
   (the flyout popover is .dr-flyout; only the ones holding these two routes). */
.dr-flyout:has(a[href="/compliance"]),
.dr-flyout:has(a[href="/collaboration"]){display:none!important}

/* ---- 6. header: keep it light — just round the credits pill (the earlier
   aggressive header rules caused the hamburger/search to look off). ---------- */
header.sticky button.rounded-md.border{border-radius:999px!important}

/* ---- 7. subtle premium card depth (visual only, no layout change) --------- */
[class*="rounded-xl"][class*="bg-card"]{
  box-shadow:0 1px 2px rgba(2,6,23,.04), 0 8px 22px -14px rgba(2,6,23,.14)!important;
}
.dark [class*="rounded-xl"][class*="bg-card"]{
  box-shadow:0 1px 2px rgba(0,0,0,.25), 0 8px 22px -14px rgba(0,0,0,.55)!important;
}

/* ---- 8. scan-detail: horizontal tab bar → hover-expand vertical rail ------ */
/* layout: header(s) full-width on top, then [rail | panel] side by side */
.dr-scan-grid{display:grid!important; grid-template-columns:54px minmax(0,1fr)!important;}
.dr-scan-head{grid-column:1 / -1!important;}
.dr-scan-rail{grid-column:1!important; position:relative!important; border-bottom:0!important; padding:0!important; overflow:visible!important;}
.dr-scan-panel{grid-column:2!important; min-width:0!important;}
/* the tablist becomes a vertical rail; it OVERLAYS the panel on hover (panel never shifts) */
.dr-scan-rail [role="tablist"]{
  position:absolute!important; left:0!important; top:0!important; bottom:0!important; width:54px!important;
  flex-direction:column!important; align-items:stretch!important; justify-content:flex-start!important;
  gap:3px!important; padding:12px 7px!important; height:auto!important;
  background:hsl(var(--card))!important; border-right:1px solid hsl(var(--border)/.55)!important; border-radius:0!important;
  overflow:hidden!important; z-index:30!important;
  transition:width .19s cubic-bezier(.33,1,.68,1), box-shadow .19s!important;
}
.dr-scan-rail [role="tablist"]:hover{width:194px!important; box-shadow:22px 0 46px -18px hsl(var(--foreground)/.20)!important;}
.dr-scan-rail [role="tab"]{
  justify-content:flex-start!important; gap:11px!important; width:100%!important; height:auto!important; min-height:38px!important;
  padding:8px 11px!important; border-radius:10px!important; white-space:nowrap!important;
  font-size:13.5px!important; font-weight:500!important; color:hsl(var(--muted-foreground))!important; flex:0 0 auto!important;
}
.dr-scan-rail [role="tab"] svg{flex:0 0 auto!important; width:18px!important; height:18px!important;}
/* collapsed (rail not hovered): icons only — hide labels/badges via font-size:0 */
.dr-scan-rail [role="tablist"]:not(:hover) [role="tab"]{font-size:0!important; justify-content:center!important; padding:8px 0!important;}
/* active tab: branded accent + soft glow */
.dr-scan-rail [role="tab"][data-state="active"],
.dr-scan-rail [role="tab"][aria-selected="true"]{
  background:hsl(var(--primary)/.12)!important; color:hsl(var(--primary))!important;
  box-shadow:inset 3px 0 0 0 hsl(var(--primary))!important;
}

/* §9 premium redesign REMOVED 2026-06-15 — it enlarged headers (pushed header
   buttons off-screen on laptop widths) and added hover-transforms that flickered. */

/* ---- 9. RESPONSIVE: stop pages overflowing the laptop window (ALL pages) ---
   Root cause (diagnosed live on /automated-red-teaming: page 1889px in a 1526px
   window, overflow 363px): `main.flex-1` has no `min-width:0`, so it cannot
   shrink below a wide child (e.g. the MITRE tactics tab row), pushing the whole
   page wider than the viewport. Fix = let main shrink + let wide content scroll
   inside its own wrapper instead of stretching the page. Layout-safe, global. */
main[class*="flex-1"]{ min-width:0!important; max-width:100%!important; }
main [class*="overflow-x-visible"]{ overflow-x:auto!important; }
/* wide rows/cards: keep them within the content box, never stretch the page */
main [role="tablist"], main [class*="overflow-x-auto"], main [class*="rounded-xl"]{ max-width:100%!important; }

/* ---- 10. finding-detail code blocks (PoC Payload / Fix Code): legible in
   BOTH light + dark. The app renders these as monospace blocks with a washed-out
   grey bg + green/blue syntax text → low contrast on white. Force a solid dark
   code surface (conventional code-block look) so the syntax colours pop. ------- */
main pre,
main [class*="font-mono"][class*="rounded"]:not(span):not(code),
main [class*="font-mono"][class*="bg-"]:not(span):not(code),
main [class*="rounded"][class*="bg-muted"]:has(> code),
main [class*="rounded"][class*="bg-secondary"] code{
  background:#0d1117!important; color:#e6edf3!important;
  border:1px solid #30363d!important; border-radius:10px!important;
  padding:12px 14px!important; overflow-x:auto!important;
  font-family:'JetBrains Mono',ui-monospace,monospace!important; line-height:1.55!important;
}
/* keep inline code inside the dark block transparent so it inherits the bright text */
main pre code, main [class*="font-mono"] code{ background:transparent!important; padding:0!important; border:0!important; }

/* ============================================================================
   §11 DESIGN SYSTEM FOUNDATION (2026-06-15) — step 1 of the unified revamp.
   Minimal colour; the ONE accent is the brand colour hsl(var(--primary)).
   Theme-adaptive (light + dark). Conservative: shapes/focus/surface only — no
   recolouring of app intents, so nothing already-good regresses. -------------*/

/* (a) form fields — one consistent shape + a brand-blue focus ring. This alone
   makes every input/select/textarea across the 50+ forms read as one system. */
main input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),
main textarea, main select,
[role=dialog] input:not([type=checkbox]):not([type=radio]),
[role=dialog] textarea, [role=dialog] select{
  border-radius:10px!important;
  transition:border-color .15s ease, box-shadow .15s ease!important;
}
main input:focus-visible, main textarea:focus-visible, main select:focus-visible,
[role=dialog] input:focus-visible, [role=dialog] textarea:focus-visible, [role=dialog] select:focus-visible{
  outline:none!important;
  border-color:hsl(var(--primary))!important;
  box-shadow:0 0 0 3px hsl(var(--primary)/.18)!important;
}

/* (b) unified card surface — consistent radius + hairline border (keeps the
   card's own bg/colour; only normalises shape so all cards match). */
main [class*="rounded-xl"][class*="bg-card"],
main [class*="rounded-2xl"][class*="bg-card"]{
  border:1px solid hsl(var(--border)/.6)!important; border-radius:14px!important;
}

/* (c) buttons — smooth press feedback only (no recolour). */
main button:active, [role=dialog] button:active{ transform:translateY(.5px)!important; }

/* §12 FORMS PASS (step 2) — consistent form chrome across every dialog/form.
   SAFE properties only (weight, tracking, radius) so it cannot distort any
   form layout. Deeper per-form structure needs live inspection + verification. */
main form label, [role=dialog] label{ font-weight:600!important; letter-spacing:-.005em!important; }
[role=dialog]{ border-radius:16px!important; }

/* §13 CARDS PASS (step 3) — confident numerals + consistent stat labels.
   SAFE properties only (font/tracking/weight) — no layout/position change. */
main [class*="bg-card"] [class*="text-4xl"],
main [class*="bg-card"] [class*="text-3xl"],
main [class*="bg-card"] [class*="text-2xl"]{
  font-family:'Sora','Inter',sans-serif!important; letter-spacing:-.025em!important; font-weight:700!important;
}
main [class*="bg-card"] [class*="uppercase"]{ letter-spacing:.055em!important; }

/* §14 FORMS — premium modal depth + clean edge on every dialog/wizard.
   Makes all 50+ forms read as one modern modal system. Safe: shadow/border
   only, theme-adaptive (light + dark). No layout/position change. */
[role=dialog]{
  box-shadow:0 24px 60px -20px hsl(222 47% 11% / .35), 0 6px 20px -10px hsl(0 0% 0% / .18)!important;
  border:1px solid hsl(var(--border)/.6)!important;
}
.dark [role=dialog]{
  box-shadow:0 28px 72px -24px hsl(0 0% 0% / .72), 0 8px 24px -12px hsl(0 0% 0% / .5)!important;
  border-color:hsl(var(--border)/.8)!important;
}