/*
 * ═══════════════════════════════════════════════════════════════════════════
 *  Sentryline DESIGN SYSTEM v5.0
 *  Enterprise-grade dark theme — Linear / Vercel / Wiz inspired
 *  April 2026
 * ═══════════════════════════════════════════════════════════════════════════
 *
 *  Background         #0A1428  — primary dark navy
 *  Surface            #0F1D35  — sidebar, header, secondary areas
 *  Card               #111C32  — card backgrounds
 *  Elevated           #162040  — dropdowns, menus, elevated surfaces
 *  Accent (Blue)      #00B8FF  — primary accent, CTAs, active states
 *  Accent Dark        #0088CC  — hover / pressed states
 *  ─────────────────────────────
 *  Text Primary       #E2E8F0
 *  Text Secondary     #94A3B8
 *  Text Muted         #8898B0  (WCAG AA ≥ 5:1 on #0A1428)
 *  Border             #1E3055
 *  ─────────────────────────────
 *  Critical           #EF4444
 *  High               #FF9500
 *  Medium             #FFCC00
 *  Low                #00D4FF
 *  Success / Primary  #00B8FF
 */

/* ─── Google Fonts: Space Grotesk (headings) + Inter (body) ─────────────── */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap');

/* ─── CSS Custom Properties ──────────────────────────────────────────────── */
:root {
  /* ── Backgrounds ── */
  --bg-primary:    #0A1428;
  --bg-secondary:  #0F1D35;
  --bg-card:       #111C32;
  --bg-elevated:   #162040;
  --bg:            #0A1428;
  --bg2:           #0F1D35;
  --card:          #111C32;

  /* ── Borders ── */
  --border:        #1E3055;
  --border-hover:  #2A3D6B;
  --border2:       #2A3D6B;

  /* ── Text ── */
  --text-primary:   #E2E8F0;
  --text-secondary: #94A3B8;
  --text-dim:       #8898B0;  /* WCAG AA: ≥5:1 on #0A1428 */
  --text:           #E2E8F0;
  --text2:          #94A3B8;
  --text3:          #8898B0;

  /* ── Primary accent — Electric Blue ── */
  --green:         #00B8FF;
  --green-dim:     #0088CC;
  --green-glow:    rgba(0, 184, 255, 0.22);
  --green-subtle:  rgba(0, 184, 255, 0.08);
  --green-primary: #00B8FF;
  --green2:        #0088CC;

  /* ── Severity: Critical ── */
  --red:           #EF4444;
  --red-bg:        rgba(239, 68, 68, 0.10);
  --red-border:    rgba(239, 68, 68, 0.30);
  --red-alert:     #EF4444;

  /* ── Severity: High ── */
  --orange:        #FF9500;
  --orange-bg:     rgba(255, 149, 0, 0.10);
  --orange-border: rgba(255, 149, 0, 0.30);
  --amber:         #FF9500;

  /* ── Severity: Medium ── */
  --yellow:        #FFCC00;
  --yellow-bg:     rgba(255, 204, 0, 0.10);
  --yellow-border: rgba(255, 204, 0, 0.30);

  /* ── Severity: Low ── */
  --blue:          #00D4FF;
  --blue-bg:       rgba(0, 212, 255, 0.10);
  --blue-border:   rgba(0, 212, 255, 0.30);
  --blue-accent:   #00D4FF;

  /* ── AI / Info ── */
  --cyan:          #00B8FF;

  /* ── Purple (exploit) ── */
  --purple:        #BF5AF2;
  --purple-bg:     rgba(191, 90, 242, 0.10);

  /* ── 8px Grid Spacing Tokens ── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ── Motion ── */
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out:      cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 300ms;

  /* ── Radius ── */
  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-btn:  8px;   /* rounded rect — enterprise standard */

  /* ── Shadows — clean, subtle ── */
  --shadow-sm:   0 1px 3px rgba(0,0,0,0.30), 0 1px 2px rgba(0,0,0,0.20);
  --shadow-md:   0 4px 12px rgba(0,0,0,0.35);
  --shadow-lg:   0 8px 32px rgba(0,0,0,0.45);
  --shadow-glow-green:  0 0 16px rgba(0, 184, 255, 0.18);
  --shadow-glow-red:    0 0 16px rgba(239, 68, 68, 0.18);
  --shadow-glow-orange: 0 0 16px rgba(255, 149, 0, 0.18);
}

/* ─── Reset & Base ────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: -0.006em;
  background: var(--bg-primary);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ─── Scrollbar ───────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg-primary); }
::-webkit-scrollbar-thumb { background: #1E3055; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #2A3D6B; }

/* ─── Typography — Space Grotesk headings, Inter body ────────────────────── */
h1, .h1 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.025em;
}
h2, .h2 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
}
h3, .h3 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.015em;
}
.body-text   { font-size: 15px; line-height: 1.6; }
.text-small  { font-size: 13px; line-height: 1.5; }
.text-mono   { font-family: 'SF Mono', 'JetBrains Mono', 'Fira Code', monospace; }

.page-title {
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 32px !important;
  font-weight: 700 !important;
  letter-spacing: -0.025em !important;
  color: var(--text-primary) !important;
  line-height: 1.2 !important;
}

.page-sub {
  font-size: 15px !important;
  color: var(--text-secondary) !important;
  margin-top: 6px !important;
  line-height: 1.5 !important;
}

.table-title {
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
}

/* ─── Layout ──────────────────────────────────────────────────────────────── */
.app {
  display: flex;
  min-height: 100vh;
  position: relative;
  z-index: 1;
}

.main {
  margin-left: 240px;
  flex: 1;
  padding: 32px 40px;
  min-height: 100vh;
}

/* ─── Sidebar ─────────────────────────────────────────────────────────────── */
.sidebar {
  width: 240px;
  background: var(--bg-secondary) !important;
  border-right: 1px solid var(--border) !important;
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0; left: 0; bottom: 0;
  z-index: 10;
}

.sidebar-brand {
  padding: 20px 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--border);
}

.sidebar-dot {
  width: 8px; height: 8px;
  background: var(--green);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--green);
  flex-shrink: 0;
}

.sidebar-name {
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}

.sidebar-nav {
  flex: 1;
  padding: 12px 10px;
  overflow-y: auto;
}

.nav-section {
  font-family: 'Inter', sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--text-dim) !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 20px 12px 8px !important;
  margin-top: 4px !important;
}

.nav-item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 12px !important;
  border-radius: var(--radius-md) !important;
  color: var(--text-secondary) !important;
  cursor: pointer;
  font-size: 14px !important;
  font-weight: 500 !important;
  font-family: 'Inter', sans-serif !important;
  transition: background var(--duration-base) var(--ease-out),
              color var(--duration-base) var(--ease-out) !important;
  text-decoration: none !important;
  margin: 2px 0 !important;
  border: 1px solid transparent !important;
}

.nav-item:hover {
  background: rgba(0, 184, 255, 0.06) !important;
  color: var(--text-primary) !important;
}

.nav-item.active {
  background: rgba(0, 184, 255, 0.10) !important;
  color: var(--green) !important;
  border-color: rgba(0, 184, 255, 0.18) !important;
}

.nav-icon {
  width: 20px !important;
  height: 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  font-size: 15px !important;
  opacity: 0.85;
}

.sidebar-footer {
  padding: 16px 20px !important;
  border-top: 1px solid var(--border) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  color: var(--text-dim) !important;
}

/* ─── Buttons — Rounded Rectangle (enterprise standard) ──────────────────── */
.btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 10px 20px !important;
  border-radius: var(--radius-btn) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  font-family: 'Inter', sans-serif !important;
  cursor: pointer;
  border: 1px solid var(--border) !important;
  background: var(--bg-elevated) !important;
  color: var(--text-primary) !important;
  transition:
    background var(--duration-base) var(--ease-out),
    border-color var(--duration-base) var(--ease-out),
    box-shadow var(--duration-base) var(--ease-out),
    transform var(--duration-fast) var(--ease-out) !important;
  text-decoration: none !important;
  white-space: nowrap;
  user-select: none;
  letter-spacing: -0.006em;
  line-height: 1.4;
}

.btn:hover {
  border-color: var(--border-hover) !important;
  background: #1A2C50 !important;
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.btn:active { transform: translateY(0); }

/* Primary — blue fill, subtle glow on CTA only */
.btn-primary {
  background: var(--green) !important;
  color: #0A1428 !important;
  border-color: var(--green) !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 8px rgba(0, 184, 255, 0.25);
}

.btn-primary:hover {
  background: #33C6FF !important;
  border-color: #33C6FF !important;
  box-shadow: 0 4px 16px rgba(0, 184, 255, 0.30) !important;
}

/* Secondary — outline */
.btn-secondary {
  background: transparent !important;
  border-color: var(--border-hover) !important;
  color: var(--text-primary) !important;
}

.btn-secondary:hover {
  border-color: var(--green) !important;
  color: var(--green) !important;
  background: rgba(0, 184, 255, 0.06) !important;
}

/* Ghost */
.btn-ghost {
  background: transparent !important;
  border-color: transparent !important;
  color: var(--text-secondary) !important;
}

.btn-ghost:hover {
  background: rgba(0, 184, 255, 0.05) !important;
  border-color: transparent !important;
  color: var(--text-primary) !important;
}

/* Destructive */
.btn-danger {
  color: var(--red) !important;
  border-color: var(--red-border) !important;
  background: transparent !important;
}

.btn-danger:hover {
  background: var(--red-bg) !important;
  border-color: var(--red) !important;
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.12) !important;
}

/* Sizes */
.btn-sm { padding: 6px 14px !important; font-size: 13px !important; }
.btn-lg { padding: 14px 28px !important; font-size: 16px !important; font-weight: 600 !important; }

.btn:disabled { opacity: 0.4 !important; cursor: not-allowed !important; transform: none !important; box-shadow: none !important; }

/* ─── Cards — 16px radius, 24-32px padding ───────────────────────────────── */
.table-wrap,
.stat-card,
.current-plan-card,
.exploit-box,
.retest-box {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-xl) !important;
  transition:
    border-color var(--duration-base) var(--ease-out),
    box-shadow var(--duration-base) var(--ease-out),
    transform var(--duration-base) var(--ease-out) !important;
}

.stat-card:hover {
  border-color: var(--border-hover) !important;
  box-shadow: var(--shadow-md) !important;
  transform: translateY(-2px);
}

/* Critical severity card */
.stat-card.critical:hover,
.table-wrap.critical:hover {
  border-color: rgba(239, 68, 68, 0.30) !important;
  box-shadow: 0 0 16px rgba(239, 68, 68, 0.08) !important;
}

/* Stats Grid */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  margin-bottom: var(--space-8);
}

.stat-card { padding: 24px !important; }

.stat-label {
  font-family: 'Inter', sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--text-dim) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  margin-bottom: 8px !important;
}

.stat-value {
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 32px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.1 !important;
}

.stat-detail { font-size: 13px !important; color: var(--text-dim) !important; margin-top: 6px !important; }

/* Stat value colors */
.stat-value.green { color: var(--green) !important; }
.stat-value.red   { color: var(--red)   !important; }
.stat-value.orange{ color: var(--orange)!important; }
.stat-value.blue  { color: var(--blue)  !important; }

/* ─── Tables ──────────────────────────────────────────────────────────────── */
.table-wrap {
  overflow: hidden !important;
  border-radius: var(--radius-xl) !important;
}

.table-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-card);
}

table { width: 100%; border-collapse: collapse; }

th {
  text-align: left;
  padding: 14px 24px;
  font-family: 'Inter', sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--text-dim) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  border-bottom: 1px solid var(--border) !important;
  background: var(--bg-primary) !important;
}

td {
  padding: 16px 24px !important;
  border-bottom: 1px solid rgba(0, 184, 255, 0.04) !important;
  font-size: 14px !important;
  color: var(--text-secondary) !important;
  transition: background var(--duration-fast), color var(--duration-fast) !important;
  vertical-align: middle !important;
  line-height: 1.5 !important;
  min-height: 56px !important;
}

tr:last-child td { border-bottom: none !important; }

tr:hover td { background: rgba(0, 184, 255, 0.03) !important; color: var(--text-primary) !important; }

td.name-cell { color: var(--text-primary) !important; font-weight: 500 !important; }

/* Striped rows — subtle zebra */
tbody tr:nth-child(even) td { background: rgba(0, 184, 255, 0.015); }
tbody tr:nth-child(even):hover td { background: rgba(0, 184, 255, 0.04) !important; }

/* Clickable rows */
tr.clickable { cursor: pointer; }
tr.clickable:hover td { background: rgba(0, 184, 255, 0.04) !important; }

/* Client rows */
.client-row { cursor: pointer; transition: background 0.12s; }
.client-row:hover td { background: rgba(0, 184, 255, 0.03) !important; }

/* ─── Badges / Tags ───────────────────────────────────────────────────────── */
.badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 4px 10px !important;
  border-radius: 20px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  font-family: 'Inter', sans-serif !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  white-space: nowrap;
}

/* WCAG 2.2 AA — severity badges: icon + color so not color-only (SC 1.4.1) */
.badge-critical     { background: rgba(239,68,68,0.12)   !important; color: #EF4444 !important; border: 1px solid rgba(239,68,68,0.25) !important; }
.badge-high         { background: rgba(255,149,0,0.12)   !important; color: #FF9500 !important; border: 1px solid rgba(255,149,0,0.25) !important; }
.badge-medium       { background: rgba(255,204,0,0.12)   !important; color: #FFCC00 !important; border: 1px solid rgba(255,204,0,0.25) !important; }
.badge-low          { background: rgba(0,212,255,0.10)   !important; color: #00D4FF !important; border: 1px solid rgba(0,212,255,0.20) !important; }
.badge-info         { background: rgba(136,152,176,0.12) !important; color: #94A3B8 !important; border: 1px solid rgba(136,152,176,0.20) !important; }

/* Prefix icons via ::before — shape differentiators (not color-only) */
.badge-critical::before { content: "✕ "; font-style: normal; speak: none; }
.badge-high::before     { content: "▲ "; font-style: normal; speak: none; }
.badge-medium::before   { content: "◆ "; font-style: normal; speak: none; }
.badge-low::before      { content: "▸ "; font-style: normal; speak: none; }
.badge-info::before     { content: "● "; font-style: normal; speak: none; }

.badge-pending       { background: rgba(255,204,0,0.10)  !important; color: #FFCC00 !important; border: 1px solid rgba(255,204,0,0.25) !important; }
.badge-scanning      { background: rgba(0,184,255,0.10) !important; color: #00B8FF !important; border: 1px solid rgba(0,184,255,0.25) !important; animation: scanPulse 2s ease-in-out infinite !important; }
.badge-exploiting    { background: rgba(191,90,242,0.12) !important; color: #BF5AF2 !important; border: 1px solid rgba(191,90,242,0.20) !important; }
.badge-complete      { background: rgba(0,184,255,0.08) !important; color: #00B8FF !important; border: 1px solid rgba(0,184,255,0.20) !important; }
.badge-completed_with_errors { background: rgba(255,149,0,0.12) !important; color: #FF9500 !important; border: 1px solid rgba(255,149,0,0.25) !important; }
.badge-target_unreachable    { background: rgba(239,68,68,0.12) !important; color: #EF4444 !important; border: 1px solid rgba(239,68,68,0.25) !important; }

.badge-open          { background: rgba(239,68,68,0.12)  !important; color: #EF4444 !important; border: 1px solid rgba(239,68,68,0.25) !important; }
.badge-confirmed     { background: rgba(255,149,0,0.12)  !important; color: #FF9500 !important; border: 1px solid rgba(255,149,0,0.25) !important; }
.badge-remediated    { background: rgba(0,184,255,0.08) !important; color: #00B8FF !important; border: 1px solid rgba(0,184,255,0.20) !important; }
.badge-false_positive{ background: rgba(136,152,176,0.12)!important; color: #94A3B8 !important; border: 1px solid rgba(136,152,176,0.20) !important; }

/* Retest badges */
.badge-retest-requested     { background: rgba(255,204,0,0.10)  !important; color: #FFCC00 !important; border: 1px solid rgba(255,204,0,0.25) !important; }
.badge-retest-in_progress   { background: rgba(0,184,255,0.10) !important; color: #00B8FF !important; border: 1px solid rgba(0,184,255,0.20) !important; }
.badge-retest-resolved      { background: rgba(0,184,255,0.08) !important; color: #00B8FF !important; border: 1px solid rgba(0,184,255,0.20) !important; }
.badge-retest-still_vulnerable { background: rgba(239,68,68,0.12) !important; color: #EF4444 !important; border: 1px solid rgba(239,68,68,0.25) !important; }

/* Exploit badges */
.badge-exploit-none          { background: rgba(136,152,176,0.10)!important; color: #94A3B8 !important; border: 1px solid rgba(136,152,176,0.18) !important; }
.badge-exploit-available     { background: rgba(191,90,242,0.12) !important; color: #BF5AF2 !important; border: 1px solid rgba(191,90,242,0.20) !important; }
.badge-exploit-running       { background: rgba(0,184,255,0.10) !important; color: #00B8FF !important; border: 1px solid rgba(0,184,255,0.20) !important; }
.badge-exploit-confirmed     { background: rgba(239,68,68,0.12)  !important; color: #EF4444 !important; border: 1px solid rgba(239,68,68,0.25) !important; }
.badge-exploit-not_exploitable{ background: rgba(0,184,255,0.06) !important; color: #00B8FF !important; border: 1px solid rgba(0,184,255,0.15) !important; }
.badge-exploit-error         { background: rgba(255,149,0,0.12)  !important; color: #FF9500 !important; border: 1px solid rgba(255,149,0,0.25) !important; }
.badge-exploit-stopped       { background: rgba(136,152,176,0.10)!important; color: #94A3B8 !important; border: 1px solid rgba(136,152,176,0.18) !important; }

/* Posture badges */
.posture-badge { font-family: 'Inter', sans-serif !important; font-size: 12px !important; font-weight: 600 !important; }
.posture-critical { background: rgba(239,68,68,0.12)  !important; color: #EF4444 !important; border: 1px solid rgba(239,68,68,0.25) !important; }
.posture-high     { background: rgba(255,149,0,0.12)  !important; color: #FF9500 !important; border: 1px solid rgba(255,149,0,0.25) !important; }
.posture-medium   { background: rgba(255,204,0,0.12)  !important; color: #FFCC00 !important; border: 1px solid rgba(255,204,0,0.25) !important; }
.posture-low      { background: rgba(0,212,255,0.10)  !important; color: #00D4FF !important; border: 1px solid rgba(0,212,255,0.20) !important; }
.posture-clean    { background: rgba(0,184,255,0.08) !important; color: #00B8FF !important; border: 1px solid rgba(0,184,255,0.20) !important; }

/* ─── Modal ───────────────────────────────────────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(8px);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: fadeIn var(--duration-base) var(--ease-out);
}

.modal {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-xl) !important;
  width: 90%;
  max-width: 600px;
  max-height: 88vh;
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
  animation: slideUp var(--duration-base) var(--ease-spring);
}

.modal-header {
  padding: 24px 28px !important;
  border-bottom: 1px solid var(--border) !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.modal-title {
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 700 !important;
  font-size: 18px !important;
  letter-spacing: -0.01em !important;
}

.modal-body   { padding: 28px !important; }
.modal-footer {
  padding: 20px 28px !important;
  border-top: 1px solid var(--border) !important;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* Full-screen modal variant */
.modal-fullscreen {
  width: 100% !important;
  max-width: 900px !important;
  max-height: 92vh !important;
}

/* ─── Forms ───────────────────────────────────────────────────────────────── */
.form-group { margin-bottom: 20px; }

.form-label {
  display: block;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--text-secondary) !important;
  margin-bottom: 8px !important;
  font-family: 'Inter', sans-serif !important;
  letter-spacing: 0em !important;
}

.form-input, .form-select, .form-textarea {
  width: 100%;
  padding: 11px 16px;
  background: var(--bg-primary) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  color: var(--text-primary) !important;
  font-size: 14px !important;
  font-family: 'Inter', sans-serif !important;
  line-height: 1.5;
  transition:
    border-color var(--duration-base) !important,
    box-shadow var(--duration-base) !important;
}

.form-input:focus, .form-select:focus, .form-textarea:focus {
  outline: none !important;
  border-color: var(--green) !important;
  box-shadow: 0 0 0 3px rgba(0, 184, 255, 0.12) !important;
}

.form-input::placeholder,
.form-textarea::placeholder { color: var(--text-dim) !important; }

.form-textarea { resize: vertical; min-height: 80px; line-height: 1.5; }

.form-hint { font-size: 13px !important; color: var(--text-dim) !important; margin-top: 6px !important; }

/* ─── Form Error States — WCAG 2.2 AA (aria-invalid + aria-describedby) ──── */
.form-error-msg {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  font-size: 13px !important;
  color: #EF4444 !important;
  margin-top: 6px !important;
  font-weight: 500 !important;
}
.form-error-msg::before {
  content: "⚠";
  font-size: 12px;
  flex-shrink: 0;
}

/* Input in error state */
.form-input[aria-invalid="true"],
.form-select[aria-invalid="true"],
.form-textarea[aria-invalid="true"] {
  border-color: #EF4444 !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.10) !important;
}

.input-error {
  border-color: #EF4444 !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.10) !important;
}

select option { background: var(--bg-card) !important; color: var(--text-primary) !important; }

/* ─── Toggle / Switch — Modern, larger hit areas ─────────────────────────── */
.toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  gap: 10px;
  user-select: none;
}
.toggle-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.toggle-track {
  width: 44px;
  height: 24px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 12px;
  position: relative;
  transition: background var(--duration-base) var(--ease-out),
              border-color var(--duration-base) var(--ease-out);
  flex-shrink: 0;
}
.toggle-track::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  background: var(--text-dim);
  border-radius: 50%;
  transition: transform var(--duration-base) var(--ease-spring),
              background var(--duration-base) var(--ease-out);
}
.toggle-input:checked + .toggle-track {
  background: rgba(0, 184, 255, 0.15);
  border-color: rgba(0, 184, 255, 0.35);
}
.toggle-input:checked + .toggle-track::after {
  transform: translateX(20px);
  background: var(--green);
}
.toggle-input:focus-visible + .toggle-track {
  outline: 3px solid var(--green);
  outline-offset: 2px;
}
.toggle-label {
  font-size: 14px;
  color: var(--text-secondary);
  font-weight: 500;
}

/* ─── Progress Bars ───────────────────────────────────────────────────────── */
.progress-bar-track {
  background: #0F1D35 !important;
  border-radius: 6px !important;
  height: 6px !important;
  overflow: hidden;
}

.progress-bar-fill {
  height: 100%;
  border-radius: 6px;
  background: var(--green);
  transition: width 0.4s var(--ease-out);
  box-shadow: 0 0 6px rgba(0, 184, 255, 0.30);
}

.progress-bar-fill.warning { background: var(--orange); box-shadow: 0 0 6px rgba(255, 149, 0, 0.25); }
.progress-bar-fill.danger  { background: var(--red);    box-shadow: 0 0 6px rgba(239, 68, 68, 0.25); }

.progress-label { display: flex; justify-content: space-between; font-size: 13px !important; color: var(--text-secondary) !important; margin-bottom: 8px !important; }

/* Circular progress (scan) */
.circular-progress {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* ─── Severity bar ────────────────────────────────────────────────────────── */
.severity-bar { display: flex; gap: 2px; height: 32px; border-radius: 6px; overflow: hidden; margin: 8px 0; }
.sev-segment { min-width: 4px; transition: width 0.4s var(--ease-out); }
.sev-segment.critical { background: var(--red);    }
.sev-segment.high     { background: var(--orange); }
.sev-segment.medium   { background: var(--yellow); }
.sev-segment.low      { background: var(--blue);   }
.sev-segment.info     { background: var(--text-dim); }

.severity-legend { display: flex; gap: 16px; flex-wrap: wrap; }
.sev-legend-item { display: flex; align-items: center; gap: 5px; font-size: 13px !important; color: var(--text-secondary) !important; }
/* WCAG SC 1.4.1 — shape + color (not color alone) */
.sev-legend-dot  { width: 9px; height: 9px; flex-shrink: 0; }
.sev-legend-dot.critical { background: var(--red);    border-radius: 50%;   }
.sev-legend-dot.high     { background: var(--orange); clip-path: polygon(50% 0%,100% 100%,0% 100%); border-radius: 0; }
.sev-legend-dot.medium   { background: var(--yellow); clip-path: polygon(50% 0%,100% 50%,50% 100%,0% 50%); border-radius: 0; }
.sev-legend-dot.low      { background: var(--blue);   border-radius: 2px;   }
.sev-legend-dot.info     { background: var(--text-dim); border-radius: 50%; width: 6px; height: 6px; }

/* ─── Toast Notifications ─────────────────────────────────────────────────── */
.toast {
  position: fixed !important;
  top: 20px !important;
  right: 20px !important;
  bottom: auto !important;
  background: var(--bg-elevated) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  padding: 14px 20px !important;
  font-size: 14px !important;
  font-family: 'Inter', sans-serif !important;
  z-index: 200;
  box-shadow: var(--shadow-lg);
  animation: slideInFromTop var(--duration-base) var(--ease-spring) !important;
  max-width: 400px;
  font-weight: 500;
}

.toast.success {
  border-color: rgba(0, 184, 255, 0.25) !important;
  color: var(--green) !important;
  background: rgba(0, 184, 255, 0.06) !important;
}

.toast.error {
  border-color: rgba(239, 68, 68, 0.25) !important;
  color: var(--red) !important;
  background: rgba(239, 68, 68, 0.05) !important;
}

.toast.info {
  border-color: rgba(0, 184, 255, 0.20) !important;
  color: var(--cyan) !important;
}

/* ─── Actions dropdown ────────────────────────────────────────────────────── */
.actions-cell { position: relative; }

.actions-menu {
  position: absolute;
  right: 0; top: 100%;
  background: var(--bg-elevated) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  padding: 4px !important;
  z-index: 50;
  min-width: 160px;
  box-shadow: var(--shadow-lg);
  animation: fadeIn var(--duration-fast) var(--ease-out);
}

.actions-menu-item {
  display: block;
  width: 100%;
  padding: 9px 12px !important;
  font-size: 14px !important;
  font-family: 'Inter', sans-serif !important;
  color: var(--text-secondary) !important;
  cursor: pointer;
  border: none;
  background: none;
  text-align: left;
  border-radius: 6px !important;
  transition: background var(--duration-fast), color var(--duration-fast) !important;
}

.actions-menu-item:hover {
  background: rgba(0, 184, 255, 0.06) !important;
  color: var(--text-primary) !important;
}

.actions-menu-item.danger { color: var(--red) !important; }
.actions-menu-item.danger:hover { background: var(--red-bg) !important; }

/* ─── Tabs ────────────────────────────────────────────────────────────────── */
.tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border) !important;
  margin-bottom: 24px !important;
}

.tab {
  padding: 12px 18px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  font-family: 'Inter', sans-serif !important;
  color: var(--text-dim) !important;
  cursor: pointer;
  border-bottom: 2px solid transparent !important;
  transition: color var(--duration-base), border-color var(--duration-base) !important;
}

.tab:hover { color: var(--text-secondary) !important; }

.tab.active {
  color: var(--green) !important;
  border-bottom-color: var(--green) !important;
}

/* ─── Page header ─────────────────────────────────────────────────────────── */
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-8);
}

/* ─── Detail view ─────────────────────────────────────────────────────────── */
.detail-back {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-dim) !important;
  cursor: pointer;
  font-size: 14px !important;
  margin-bottom: 20px;
  transition: color var(--duration-base) !important;
}
.detail-back:hover { color: var(--text-primary) !important; }

.detail-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 24px;
  gap: 16px;
}

.detail-meta { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }

/* ─── Empty state — large illustration + CTA ─────────────────────────────── */
.empty-state {
  text-align: center;
  padding: 80px 32px;
  color: var(--text-dim) !important;
}
.empty-icon  {
  font-size: 3.5rem;
  margin-bottom: 20px;
  opacity: 0.35;
  display: block;
}
.empty-title {
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  color: var(--text-primary) !important;
  margin-bottom: 10px !important;
  letter-spacing: -0.01em !important;
}
.empty-text  {
  font-size: 15px !important;
  color: var(--text-dim) !important;
  margin-bottom: 24px !important;
  max-width: 360px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6 !important;
}

/* ─── Loading spinner ─────────────────────────────────────────────────────── */
.loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 64px;
  color: var(--text-dim) !important;
  gap: 12px;
}

.spinner {
  width: 22px !important; height: 22px !important;
  border: 2px solid var(--border) !important;
  border-top-color: var(--green) !important;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* ─── Live Indicator — subtle pulsing dot + text ─────────────────────────── */
.live-indicator {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--green);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.live-dot {
  width: 6px;
  height: 6px;
  background: var(--green);
  border-radius: 50%;
  animation: livePulse 2s ease-in-out infinite;
  flex-shrink: 0;
}

/* ─── Stats strip ─────────────────────────────────────────────────────────── */
.stats-strip {
  display: flex;
  align-items: center;
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-xl) !important;
  padding: 16px 24px !important;
  margin-bottom: 24px !important;
}

.stats-strip-item { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 1; min-width: 0; }
.stats-strip-sep  { width: 1px; height: 36px; background: var(--border); margin: 0 8px; flex-shrink: 0; }
.stats-strip-val  { font-family: 'Space Grotesk', sans-serif !important; font-size: 24px !important; font-weight: 700 !important; letter-spacing: -0.02em !important; line-height: 1.1 !important; }
.stats-strip-val.red    { color: var(--red)    !important; }
.stats-strip-val.green  { color: var(--green)  !important; }
.stats-strip-val.blue   { color: var(--blue)   !important; }
.stats-strip-val.orange { color: var(--orange) !important; }
.stats-strip-label { font-size: 11px !important; font-weight: 600 !important; color: var(--text-dim) !important; text-transform: uppercase !important; letter-spacing: 0.06em !important; white-space: nowrap !important; font-family: 'Inter', sans-serif !important; }

/* ─── Trend indicators ────────────────────────────────────────────────────── */
.trend-up     { color: var(--red)   !important; font-weight: 600; font-size: 13px; }
.trend-down   { color: var(--green) !important; font-weight: 600; font-size: 13px; }
.trend-stable { color: var(--text-dim) !important; font-size: 13px; }

/* ─── Finding detail ──────────────────────────────────────────────────────── */
.finding-detail-section         { margin-bottom: 24px; }
.finding-detail-section h4      { font-size: 12px !important; font-family: 'Inter', sans-serif !important; font-weight: 600 !important; color: var(--text-dim) !important; text-transform: uppercase !important; letter-spacing: 0.06em !important; margin-bottom: 10px !important; }
.finding-detail-section p,
.finding-detail-section pre     { font-size: 14px !important; color: var(--text-secondary) !important; line-height: 1.6 !important; }
.finding-detail-section pre     { background: var(--bg-primary) !important; border: 1px solid var(--border) !important; border-radius: var(--radius-md) !important; padding: 16px !important; font-family: 'SF Mono', 'JetBrains Mono', monospace !important; font-size: 13px !important; overflow-x: auto !important; white-space: pre-wrap !important; }

/* ─── Exploit UI ──────────────────────────────────────────────────────────── */
.exploit-box {
  background: var(--bg-elevated) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-xl) !important;
  padding: 24px !important;
  margin-bottom: 20px !important;
}

.exploit-box-active    { border-color: rgba(191,90,242,0.30) !important; background: rgba(191,90,242,0.04) !important; }
.exploit-box-confirmed { border-color: rgba(239,68,68,0.30)  !important; background: rgba(239,68,68,0.04)  !important; }

.exploit-box-title    { font-family: 'Space Grotesk', sans-serif !important; font-weight: 700 !important; font-size: 16px !important; margin-bottom: 4px !important; display: flex; align-items: center; gap: 8px; letter-spacing: -0.01em; }
.exploit-box-subtitle { font-size: 13px !important; color: var(--text-dim) !important; margin-bottom: 16px !important; line-height: 1.5 !important; }

.exploit-template-card { background: var(--bg-primary) !important; border: 1px solid var(--border) !important; border-radius: var(--radius-md) !important; padding: 16px 18px !important; margin-bottom: 8px !important; display: flex; align-items: flex-start; gap: 12px; }
.exploit-template-name { font-size: 14px !important; font-weight: 600 !important; color: var(--text-primary) !important; margin-bottom: 4px !important; }
.exploit-template-desc { font-size: 13px !important; color: var(--text-secondary) !important; line-height: 1.5 !important; margin-bottom: 6px !important; }
.exploit-template-safety { font-size: 12px !important; color: var(--green) !important; font-family: 'SF Mono', monospace !important; }

.exploit-evidence-pre { background: var(--bg-primary) !important; border: 1px solid rgba(239,68,68,0.20) !important; border-radius: var(--radius-md) !important; padding: 16px !important; font-family: 'SF Mono', monospace !important; font-size: 13px !important; color: #FF8A9B !important; overflow-x: auto; white-space: pre-wrap; max-height: 400px; overflow-y: auto; line-height: 1.6; }
.exploit-warning      { background: rgba(239,68,68,0.06) !important; border: 1px solid rgba(239,68,68,0.16) !important; border-radius: var(--radius-md) !important; padding: 12px 16px !important; font-size: 13px !important; color: #FF8A9B !important; margin-bottom: 16px !important; line-height: 1.5 !important; }
.exploit-safe-note    { background: rgba(0,184,255,0.04) !important; border: 1px solid rgba(0,184,255,0.12) !important; border-radius: var(--radius-sm) !important; padding: 10px 14px !important; font-size: 12px !important; color: var(--green) !important; margin-top: 12px !important; font-family: 'SF Mono', monospace !important; }

/* ─── Report section ──────────────────────────────────────────────────────── */
.report-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }

/* ─── Login/auth page ─────────────────────────────────────────────────────── */
.card {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-xl) !important;
}

.card-title { font-family: 'Space Grotesk', sans-serif !important; font-weight: 700 !important; font-size: 22px !important; letter-spacing: -0.02em !important; }
.card-sub   { color: var(--text-secondary) !important; font-size: 15px !important; margin-bottom: 28px !important; }

.brand-name { font-family: 'Space Grotesk', sans-serif !important; font-weight: 700 !important; color: var(--green) !important; letter-spacing: -0.01em !important; }
.brand-dot  { box-shadow: 0 0 10px var(--green), 0 0 20px rgba(0,184,255,0.25) !important; }

/* SSO buttons */
.sso-btn {
  border: 1px solid var(--border) !important;
  background: var(--bg-elevated) !important;
  color: var(--text-primary) !important;
  border-radius: var(--radius-btn) !important;
  transition: border-color var(--duration-base), background var(--duration-base) !important;
}
.sso-btn:hover {
  border-color: var(--border-hover) !important;
  background: #1A2C50 !important;
}

/* Error / success messages */
.error {
  background: rgba(239,68,68,0.06) !important;
  border: 1px solid rgba(239,68,68,0.16) !important;
  border-radius: var(--radius-md) !important;
  color: var(--red) !important;
  font-size: 14px !important;
}

.success {
  background: rgba(0,184,255,0.05) !important;
  border: 1px solid rgba(0,184,255,0.15) !important;
  border-radius: var(--radius-md) !important;
  color: var(--green) !important;
  font-size: 14px !important;
}

/* ─── Billing page specifics ──────────────────────────────────────────────── */
.success-banner {
  background: rgba(0,184,255,0.05) !important;
  border: 1px solid rgba(0,184,255,0.16) !important;
  border-radius: var(--radius-xl) !important;
}

.success-banner-title { color: var(--green) !important; font-family: 'Space Grotesk', sans-serif !important; }

.current-plan-card {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-xl) !important;
}

.current-plan-label { font-size: 12px !important; font-weight: 600 !important; color: var(--text-dim) !important; text-transform: uppercase !important; letter-spacing: 0.06em !important; font-family: 'Inter', sans-serif !important; }
.current-plan-name  { font-family: 'Space Grotesk', sans-serif !important; font-size: 24px !important; font-weight: 700 !important; letter-spacing: -0.02em !important; }

.plan-detail-item  { background: #0F1D35 !important; border: 1px solid var(--border) !important; border-radius: var(--radius-md) !important; }
.plan-detail-label { font-size: 12px !important; font-weight: 600 !important; color: var(--text-dim) !important; text-transform: uppercase !important; letter-spacing: 0.06em !important; font-family: 'Inter', sans-serif !important; }

/* ─── Credential type icon ────────────────────────────────────────────────── */
.cred-type-icon { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: var(--radius-sm); background: rgba(0,184,255,0.08); color: var(--green); font-size: 11px; font-family: 'SF Mono', monospace; font-weight: 600; margin-right: 8px; }

/* ─── Retention slider ────────────────────────────────────────────────────── */
input[type=range] { accent-color: var(--green); }
input[type=range]#retention-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px rgba(0,184,255,0.4); cursor: pointer; border: 2px solid var(--bg-primary); }
input[type=range]#retention-slider::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--green); cursor: pointer; border: 2px solid var(--bg-primary); }

/* ─── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 1024px) { .stats-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px) {
  .sidebar { display: none; }
  .main { margin-left: 0; padding: 24px 16px; }
  .stats-grid { grid-template-columns: 1fr; }
  .page-header { flex-direction: column; gap: 12px; align-items: flex-start; }
  .modal { width: 95% !important; max-width: 95% !important; }
  .toast { left: 16px !important; right: 16px !important; max-width: none !important; }

  /* Tables → card list on mobile */
  table.responsive-cards,
  table.responsive-cards thead,
  table.responsive-cards tbody,
  table.responsive-cards th,
  table.responsive-cards td,
  table.responsive-cards tr {
    display: block !important;
  }
  table.responsive-cards thead { display: none !important; }
  table.responsive-cards tr {
    background: var(--bg-card) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-lg) !important;
    padding: 16px !important;
    margin-bottom: 8px !important;
  }
  table.responsive-cards td {
    padding: 4px 0 !important;
    border-bottom: none !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
  }
  table.responsive-cards td::before {
    content: attr(data-label);
    font-size: 12px;
    font-weight: 600;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-right: 12px;
    flex-shrink: 0;
  }
}

/* ─── Keyframe Animations — smooth 200ms transitions ─────────────────────── */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes slideInFromTop {
  from { opacity: 0; transform: translateY(-8px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes scanPulse {
  0%, 100% { box-shadow: 0 0 4px rgba(0, 184, 255, 0.15); }
  50%       { box-shadow: 0 0 12px rgba(0, 184, 255, 0.35); }
}

@keyframes livePulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}

/* ─── Sidebar dot — subtle, non-distracting ──────────────────────────────── */
.sidebar-dot { animation: none; }

/* ─── Smooth state transitions ────────────────────────────────────────────── */
.badge, .btn, .nav-item, .tab, .table-wrap, .chart-card {
  transition: all var(--duration-base) ease !important;
}

/* Table wrap hover */
.table-wrap:hover {
  border-color: var(--border-hover) !important;
}

/* Stats strip glows */
.stats-strip-val.green  { color: var(--green)  !important; }
.stats-strip-val.red    { color: var(--red)    !important; }
.stats-strip-val.orange { color: var(--orange) !important; }
.stats-strip-val.blue   { color: var(--blue)   !important; }

/* Hero risk ring */
.hero-risk {
  box-shadow: 0 0 40px rgba(0, 184, 255, 0.15), 0 2px 24px rgba(0,0,0,0.35) !important;
}
.hero-risk.risk-critical { box-shadow: 0 0 40px rgba(239, 68, 68, 0.18), 0 2px 24px rgba(0,0,0,0.35) !important; }
.hero-risk.risk-high     { box-shadow: 0 0 40px rgba(255, 149, 0, 0.15), 0 2px 24px rgba(0,0,0,0.35) !important; }
.hero-risk.risk-medium   { box-shadow: 0 0 32px rgba(255, 204, 0, 0.12), 0 2px 24px rgba(0,0,0,0.35) !important; }
.hero-risk.risk-low      { box-shadow: 0 0 32px rgba(0, 184, 255, 0.14), 0 2px 24px rgba(0,0,0,0.35) !important; }

/* ─── Primary button — subtle glow, CTA only ─────────────────────────────── */
.btn-primary {
  box-shadow: 0 2px 8px rgba(0, 184, 255, 0.25) !important;
}

.btn-primary:hover {
  background: #33C6FF !important;
  border-color: #33C6FF !important;
  box-shadow: 0 4px 16px rgba(0, 184, 255, 0.30) !important;
  transform: translateY(-1px);
}

/* ─── KPI card accent line ─────────────────────────────────────────────────── */
.kpi-card::before {
  opacity: 1 !important;
  background: linear-gradient(90deg, var(--kpi-accent, #00B8FF), transparent) !important;
}

/* ─── Cards — consistent radius ──────────────────────────────────────────── */
.table-wrap,
.stat-card,
.chart-card,
.current-plan-card,
.exploit-box,
.retest-box,
.rail-card,
.kpi-card,
.action-card,
.modal {
  border-radius: var(--radius-xl) !important;
}

/* ─── AI Copilot rail ─────────────────────────────────────────────────────── */
.rail-card {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-xl) !important;
  padding: 24px !important;
  transition: border-color var(--duration-base) ease !important;
}

.rail-card:first-child {
  border-top: 2px solid rgba(0, 184, 255, 0.25) !important;
  background: linear-gradient(160deg, rgba(0, 184, 255, 0.03) 0%, var(--bg-card) 40%) !important;
}

.copilot-prompt-item {
  font-size: 13px !important;
  color: var(--text-secondary) !important;
  padding: 8px 12px !important;
  background: rgba(0, 184, 255, 0.04) !important;
  border: 1px solid rgba(0, 184, 255, 0.08) !important;
  border-radius: var(--radius-md) !important;
  cursor: pointer !important;
  opacity: 0.75 !important;
  transition: opacity var(--duration-base), border-color var(--duration-base), background var(--duration-base) !important;
  font-style: normal !important;
}

.copilot-prompt-item:hover {
  opacity: 1 !important;
  border-color: rgba(0, 184, 255, 0.18) !important;
  background: rgba(0, 184, 255, 0.06) !important;
}

.rail-header-icon {
  color: #00B8FF !important;
  font-size: 14px !important;
  text-shadow: 0 0 10px rgba(0, 184, 255, 0.3) !important;
}

/* ─── AI Copilot Widget (floating button) ─────────────────────────────────── */
.copilot-fab {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 90;
  box-shadow: var(--shadow-md);
  transition: transform var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out),
              border-color var(--duration-base) var(--ease-out);
  font-size: 20px;
}
.copilot-fab:hover {
  transform: scale(1.08);
  border-color: rgba(0, 184, 255, 0.30);
  box-shadow: var(--shadow-lg);
}
.copilot-fab.expanded {
  display: none;
}

/* ─── Section labels ──────────────────────────────────────────────────────── */
.section-lbl {
  color: rgba(0, 184, 255, 0.45) !important;
  letter-spacing: 2px !important;
}

/* ─── Stat card hover ─────────────────────────────────────────────────────── */
.stat-card:hover {
  border-color: var(--border-hover) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.30) !important;
  transform: translateY(-2px) !important;
}

/* ─── Focus ring — WCAG 2.2 AA (3:1 minimum, visible on all themes) ──────── */
:focus-visible {
  outline: 3px solid #00B8FF !important;
  outline-offset: 3px !important;
  border-radius: 4px;
}

/* Suppress ring on mouse clicks only */
button:focus:not(:focus-visible),
a:focus:not(:focus-visible),
input:focus:not(:focus-visible),
select:focus:not(:focus-visible),
textarea:focus:not(:focus-visible) { outline: none !important; }

/* Ensure .btn always shows visible focus for keyboard users */
.btn:focus-visible {
  outline: 3px solid #00B8FF !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 5px rgba(0,184,255,0.15) !important;
}

/* Nav items, tabs, table rows with tabindex */
.nav-item:focus-visible,
.tab:focus-visible,
tr[tabindex]:focus-visible td,
[role="menuitem"]:focus-visible,
[role="option"]:focus-visible,
[role="tab"]:focus-visible {
  outline: 3px solid #00B8FF !important;
  outline-offset: 2px !important;
}

/* Modal close / dismiss buttons */
[data-dismiss]:focus-visible,
.modal-close:focus-visible,
.close-btn:focus-visible {
  outline: 3px solid #00B8FF !important;
  outline-offset: 3px !important;
}

/* ─── Link styles ─────────────────────────────────────────────────────────── */
a { color: inherit; }
a:hover { color: var(--text-primary); }

/* ─── Lucide Icon compatibility ───────────────────────────────────────────── */
svg.nav-icon,
.nav-icon svg,
i.nav-icon {
  width: 18px !important;
  height: 18px !important;
  flex-shrink: 0 !important;
  display: inline-block !important;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  vertical-align: middle;
}

/* Action / status icons */
.lucide {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
}

.lucide-20 { width: 20px !important; height: 20px !important; }
.lucide-24 { width: 24px !important; height: 24px !important; }

/* ─── Utility ─────────────────────────────────────────────────────────────── */
.text-critical { color: var(--red)    !important; }
.text-high     { color: var(--orange) !important; }
.text-medium   { color: var(--yellow) !important; }
.text-low      { color: var(--blue)   !important; }
.text-success  { color: var(--green)  !important; }
.text-info     { color: var(--cyan)   !important; }
.text-muted    { color: var(--text-dim) !important; }
.text-secondary{ color: var(--text-secondary) !important; }

.font-mono { font-family: 'SF Mono', 'JetBrains Mono', 'Fira Code', monospace !important; }
.font-medium { font-weight: 500 !important; }
.font-semibold { font-weight: 600 !important; }

/* ═══════════════════════════════════════════════════════════════════════════
 *  UI OVERHAUL v3 — Dashboard + Assessments + Findings shared components
 *  Metric cards, severity chart, filter bar, detail drawer, mobile cards
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Metric Stats Row ──────────────────────────────────────────────────── */
.ovr-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 28px; }
.ovr-stat-card {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px;
  padding: 20px 24px; position: relative; overflow: hidden;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.ovr-stat-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--stat-accent, var(--green)); opacity: 0.7;
}
.ovr-stat-card:hover { border-color: var(--stat-accent, var(--border-hover)); box-shadow: 0 4px 20px rgba(0,0,0,0.3); }
.ovr-stat-value {
  font-family: 'Space Grotesk', sans-serif; font-size: 2rem; font-weight: 700;
  line-height: 1; color: var(--stat-accent, var(--text-primary));
}
.ovr-stat-label {
  font-family: 'JetBrains Mono', monospace; font-size: 0.68rem;
  color: var(--text-dim); text-transform: uppercase; letter-spacing: 1.5px; margin-top: 6px;
}
.ovr-stat-delta { font-size: 0.74rem; margin-top: 8px; color: var(--text-secondary); }
.ovr-stat-delta .up { color: var(--red); }
.ovr-stat-delta .down { color: var(--green); }
.ovr-stat-sparkline {
  position: absolute; bottom: 12px; right: 16px; width: 80px; height: 32px; opacity: 0.5;
}

/* ─── Severity Distribution Chart ───────────────────────────────────────── */
.ovr-sev-chart { margin-bottom: 24px; }
.ovr-sev-bar-wrap {
  display: flex; height: 10px; border-radius: 5px; overflow: hidden;
  background: var(--bg-elevated); margin-bottom: 12px;
}
.ovr-sev-bar-seg { height: 100%; transition: width 0.6s ease; min-width: 0; }
.ovr-sev-bar-seg.critical { background: #ef4444; }
.ovr-sev-bar-seg.high { background: #f97316; }
.ovr-sev-bar-seg.medium { background: #eab308; }
.ovr-sev-bar-seg.low { background: #3b82f6; }
.ovr-sev-bar-seg.info { background: #9ca3af; }
.ovr-sev-legend {
  display: flex; gap: 16px; flex-wrap: wrap; align-items: center;
}
.ovr-sev-legend-item {
  display: flex; align-items: center; gap: 6px;
  font-size: 0.78rem; color: var(--text-secondary); cursor: default;
}
.ovr-sev-legend-dot {
  width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0;
}
.ovr-sev-legend-count {
  font-family: 'JetBrains Mono', monospace; font-weight: 600;
  font-size: 0.82rem; margin-left: 2px;
}

/* ─── Filter Bar ────────────────────────────────────────────────────────── */
.ovr-filter-bar {
  display: flex; align-items: center; gap: 10px; padding: 10px 16px;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px;
  margin-bottom: 16px; flex-wrap: wrap;
}
.ovr-filter-bar select, .ovr-filter-bar input[type="date"] {
  background: var(--bg-elevated); border: 1px solid var(--border);
  color: var(--text-primary); font-family: 'JetBrains Mono', monospace;
  font-size: 0.75rem; border-radius: 6px; padding: 6px 10px; cursor: pointer;
  transition: border-color 0.15s;
}
.ovr-filter-bar select:focus, .ovr-filter-bar input[type="date"]:focus {
  outline: none; border-color: var(--green);
}
.ovr-filter-label {
  font-family: 'JetBrains Mono', monospace; font-size: 0.68rem;
  color: var(--text-dim); text-transform: uppercase; letter-spacing: 1px;
}
.ovr-filter-count {
  margin-left: auto; font-size: 0.75rem; color: var(--text-dim);
  font-family: 'JetBrains Mono', monospace;
}
.ovr-filter-clear {
  font-size: 0.72rem; color: var(--text-dim); cursor: pointer;
  text-decoration: underline; margin-left: 8px;
}
.ovr-filter-clear:hover { color: var(--text-secondary); }

/* Mobile: collapse filters */
.ovr-filter-toggle {
  display: none; padding: 8px 16px; background: var(--bg-card);
  border: 1px solid var(--border); border-radius: 8px; color: var(--text-secondary);
  font-size: 0.82rem; cursor: pointer; align-items: center; gap: 6px;
  margin-bottom: 16px; font-family: inherit;
}
@media (max-width: 768px) {
  .ovr-filter-toggle { display: inline-flex; width: 100%; justify-content: space-between; }
  .ovr-filter-bar { display: none; }
  .ovr-filter-bar.mobile-open { display: flex; flex-direction: column; align-items: stretch; }
  .ovr-filter-bar.mobile-open select,
  .ovr-filter-bar.mobile-open input[type="date"],
  .ovr-filter-bar.mobile-open input[type="text"],
  .ovr-filter-bar.mobile-open input[type="search"] {
    width: 100%; font-size: 16px; /* prevents iOS zoom */ min-height: 44px;
  }
  .ovr-filter-count { margin-left: 0; margin-top: 4px; }
}

/* ─── Detail Drawer ─────────────────────────────────────────────────────── */
.ovr-drawer-overlay {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.45); backdrop-filter: blur(3px);
  z-index: 90; opacity: 0; pointer-events: none;
  transition: opacity 0.25s ease;
}
.ovr-drawer-overlay.open { opacity: 1; pointer-events: auto; }
.ovr-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: 540px;
  background: var(--bg-secondary); border-left: 1px solid var(--border);
  z-index: 95; transform: translateX(100%); transition: transform 0.3s ease;
  display: flex; flex-direction: column; overflow: hidden;
}
.ovr-drawer.open { transform: translateX(0); }
.ovr-drawer-header {
  padding: 20px 24px 16px; border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.ovr-drawer-header-top {
  display: flex; align-items: flex-start; gap: 12px; margin-bottom: 10px;
}
.ovr-drawer-title {
  font-family: 'Space Grotesk', sans-serif; font-size: 1.05rem;
  font-weight: 600; line-height: 1.4; flex: 1; color: var(--text-primary);
}
.ovr-drawer-close {
  width: 34px; height: 34px; border: 1px solid var(--border); border-radius: 8px;
  background: transparent; color: var(--text-dim); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; transition: all 0.15s; flex-shrink: 0; font-family: inherit;
}
.ovr-drawer-close:hover { border-color: var(--border-hover); color: var(--text-primary); }
.ovr-drawer-meta {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.ovr-drawer-tabs {
  display: flex; gap: 0; border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.ovr-drawer-tab {
  padding: 10px 20px; font-size: 0.82rem; font-weight: 500;
  color: var(--text-dim); cursor: pointer;
  border-bottom: 2px solid transparent; transition: all 0.15s; white-space: nowrap;
}
.ovr-drawer-tab:hover { color: var(--text-secondary); }
.ovr-drawer-tab.active { color: var(--green); border-bottom-color: var(--green); }
.ovr-drawer-body {
  flex: 1; overflow-y: auto; padding: 20px 24px;
}
.ovr-drawer-section { margin-bottom: 20px; }
.ovr-drawer-section-title {
  font-family: 'JetBrains Mono', monospace; font-size: 0.65rem;
  text-transform: uppercase; letter-spacing: 1.5px; color: var(--text-dim);
  margin-bottom: 10px;
}
.ovr-drawer-field {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px;
  padding: 12px 14px; font-size: 0.84rem; color: var(--text-secondary);
  line-height: 1.6; word-break: break-word;
}
.ovr-drawer-field-mono {
  font-family: 'JetBrains Mono', monospace; font-size: 0.76rem;
  color: var(--cyan); background: var(--bg-primary); overflow-x: auto; white-space: pre-wrap;
}
.ovr-drawer-actions {
  display: flex; gap: 8px; padding: 14px 24px;
  border-top: 1px solid var(--border); flex-shrink: 0;
}
.ovr-drawer-full-link {
  font-size: 0.78rem; color: var(--green); cursor: pointer;
  margin-left: auto; display: flex; align-items: center; gap: 4px;
}
.ovr-drawer-full-link:hover { text-decoration: underline; }

/* ─── Mobile Card List ──────────────────────────────────────────────────── */
.ovr-card-list { display: none; flex-direction: column; gap: 12px; }
.ovr-card-item {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px;
  padding: 16px; cursor: pointer; transition: border-color 0.15s; min-height: 64px;
}
.ovr-card-item:hover { border-color: var(--border-hover); }
.ovr-card-top {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px;
}
.ovr-card-title {
  font-size: 0.88rem; font-weight: 600; color: var(--text-primary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; margin-right: 8px;
}
.ovr-card-meta {
  display: flex; gap: 6px; flex-wrap: wrap; font-size: 0.75rem; color: var(--text-dim);
}
.ovr-card-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 4px 0; font-size: 0.78rem; color: var(--text-secondary);
}

/* ─── Enhanced Empty State ──────────────────────────────────────────────── */
.ovr-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 60px 24px; text-align: center;
}
.ovr-empty-icon {
  font-size: 3rem; margin-bottom: 16px; opacity: 0.4;
  animation: ovrEmptyFloat 3s ease-in-out infinite;
}
@keyframes ovrEmptyFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
.ovr-empty-title {
  font-family: 'Space Grotesk', sans-serif; font-size: 1.1rem;
  font-weight: 600; color: var(--text-secondary); margin-bottom: 8px;
}
.ovr-empty-text {
  font-size: 0.86rem; color: var(--text-dim); max-width: 380px;
  line-height: 1.6; margin-bottom: 20px;
}

/* ─── Quick Actions Grid ────────────────────────────────────────────────── */
.ovr-quick-actions {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
  margin-bottom: 28px;
}
.ovr-quick-action {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px;
  padding: 18px; cursor: pointer; transition: all 0.15s;
  display: flex; align-items: center; gap: 14px;
}
.ovr-quick-action:hover {
  border-color: var(--border-hover); background: var(--bg-elevated);
  box-shadow: 0 4px 16px rgba(0,0,0,0.25);
}
.ovr-quick-action-icon {
  width: 42px; height: 42px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem; flex-shrink: 0;
}
.ovr-quick-action-body { flex: 1; min-width: 0; }
.ovr-quick-action-title {
  font-weight: 600; font-size: 0.88rem; color: var(--text-primary);
  margin-bottom: 3px;
}
.ovr-quick-action-desc {
  font-size: 0.76rem; color: var(--text-dim); line-height: 1.4;
}

/* ─── Copilot Floating Button ───────────────────────────────────────────── */
.ovr-copilot-fab {
  position: fixed; bottom: 24px; right: 24px; z-index: 80;
  width: 52px; height: 52px; border-radius: 50%;
  background: linear-gradient(135deg, rgba(168,85,247,0.9), rgba(59,130,246,0.9));
  border: none; color: #fff; font-size: 1.2rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 24px rgba(168,85,247,0.4);
  transition: transform 0.15s, box-shadow 0.15s;
}
.ovr-copilot-fab:hover {
  transform: scale(1.08);
  box-shadow: 0 6px 32px rgba(168,85,247,0.5);
}

/* ─── Section Divider ───────────────────────────────────────────────────── */
.ovr-section-label {
  font-family: 'JetBrains Mono', monospace; font-size: 0.65rem;
  letter-spacing: 1.5px; color: var(--text-dim); text-transform: uppercase;
  margin-bottom: 14px; margin-top: 8px;
}

/* ═══ Responsive Overrides ══════════════════════════════════════════════════ */

@media (max-width: 1100px) {
  .ovr-stats { grid-template-columns: repeat(2, 1fr); }
  .ovr-quick-actions { grid-template-columns: repeat(2, 1fr); }
  .ovr-drawer { width: 420px; }
}

@media (max-width: 768px) {
  .ovr-stats { grid-template-columns: 1fr 1fr; gap: 10px; }
  .ovr-stat-card { padding: 14px 16px; }
  .ovr-stat-value { font-size: 1.5rem; }
  .ovr-stat-sparkline { display: none; }
  .ovr-quick-actions { grid-template-columns: 1fr; }
  /* Table → Cards */
  .ovr-table-desktop { display: none !important; }
  .ovr-card-list { display: flex !important; }
  /* Drawer → Fullscreen */
  .ovr-drawer { width: 100vw; }
  .ovr-drawer-header { padding: 16px; }
  .ovr-drawer-body { padding: 16px; }
}

@media (max-width: 480px) {
  .ovr-stats { grid-template-columns: 1fr; }
  .ovr-stat-card { padding: 12px 14px; }
  .ovr-quick-actions { gap: 10px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
 *  MOBILE POLISH 4/6 — Modals · Action Cards · Rail Cards · Badges
 *  Ensures all modals, cards, and detail views are fully usable on mobile.
 *  Desktop (>768px): zero visual changes.
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Body scroll lock — class applied by JS when any modal is open ──────── */
body.modal-open { overflow: hidden !important; }

/* ─── Feedback modal close button — 44px minimum touch target ────────────── */
.gl-feedback-close {
  min-width: 44px !important;
  min-height: 44px !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 8px !important;
}

/* ─── Modal — bottom-sheet treatment on mobile ≤540px ───────────────────── */
@media (max-width: 540px) {
  .modal-overlay {
    align-items: flex-end !important;
    padding: 0 !important;
  }
  .modal,
  .modal-box {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 20px 20px 0 0 !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
    animation: mobilesheetup var(--duration-slow, 300ms) var(--ease-out, cubic-bezier(0.22,1,0.36,1)) !important;
  }
  /* Sheet drag handle — cosmetic indicator */
  .modal::before,
  .modal-box::before {
    content: '';
    display: block;
    width: 36px;
    height: 4px;
    background: var(--border-hover, #334155);
    border-radius: 2px;
    margin: 12px auto -4px;
    flex-shrink: 0;
  }
  .modal-header {
    padding: 16px 20px !important;
    position: sticky;
    top: 0;
    background: var(--bg-card, #111C32) !important;
    z-index: 1;
    border-radius: 0 !important;
  }
  /* Close button in modal header — 44px touch target */
  .modal-header .btn,
  .modal-header button {
    min-width: 44px !important;
    min-height: 44px !important;
    font-size: 1.5rem !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    border-radius: 8px !important;
  }
  .modal-body {
    padding: 20px !important;
  }
  .modal-footer {
    padding: 12px 20px calc(16px + env(safe-area-inset-bottom, 0px)) !important;
    flex-direction: column-reverse !important;
    gap: 8px !important;
  }
  .modal-footer .btn {
    width: 100% !important;
    justify-content: center !important;
    min-height: 48px !important;
    font-size: 15px !important;
  }
}

@keyframes mobilesheetup {
  from { transform: translateY(30px); opacity: 0.8; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* Modal-box padding and actions on mobile */
@media (max-width: 540px) {
  .modal-box { padding: 24px 20px 28px !important; }
  .modal-actions {
    flex-direction: column-reverse !important;
    gap: 8px !important;
  }
  .modal-actions .btn {
    width: 100% !important;
    justify-content: center !important;
    min-height: 48px !important;
    font-size: 15px !important;
  }
}

/* ─── Form inputs inside modals — 16px prevents iOS auto-zoom ───────────── */
@media (max-width: 768px) {
  .modal input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  .modal select,
  .modal textarea,
  .modal .form-input,
  .modal .form-select,
  .modal .form-textarea,
  .modal .modal-input {
    font-size: 16px !important;
    min-height: 44px !important;
  }
  .modal textarea,
  .modal .form-textarea {
    min-height: 80px !important;
  }
}

/* ─── Stats strip — horizontal scroll on narrow screens ─────────────────── */
@media (max-width: 640px) {
  .stats-strip {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 10px 16px !important;
  }
  .stats-strip::-webkit-scrollbar { display: none; }
  .stats-strip-item { min-width: 70px; }
  .stats-strip-val  { font-size: 1.25rem !important; }
  .stats-strip-sep  { flex-shrink: 0; }
}

/* ─── KPI / stat values — minimum readable size on all mobiles ───────────── */
@media (max-width: 768px) {
  .ovr-stat-value { font-size: 1.6rem !important; }
  .stat-value     { font-size: 24px  !important; }
}
@media (max-width: 480px) {
  .ovr-stat-value { font-size: 1.4rem !important; }
  .stat-value     { font-size: 20px  !important; }
  /* Trend indicators stay visible */
  .ovr-stat-delta { font-size: 0.7rem; }
}

/* ─── Action cards — single column on narrow phones ─────────────────────── */
@media (max-width: 480px) {
  .action-cards {
    grid-template-columns: 1fr !important;
  }
  .action-card {
    width: 100% !important;
  }
}

/* ─── Rail cards — full-width stack when detached from side rail ─────────── */
@media (max-width: 768px) {
  .rail-card {
    width: 100% !important;
    margin-bottom: 16px !important;
  }
}

/* ─── Drawer actions — stack vertically, full-width buttons on mobile ────── */
@media (max-width: 768px) {
  .ovr-drawer-actions {
    flex-direction: column !important;
    gap: 8px !important;
    padding: 12px 16px !important;
  }
  .ovr-drawer-actions .btn {
    width: 100% !important;
    justify-content: center !important;
    min-height: 46px !important;
  }
  .ovr-drawer-full-link {
    margin-left: 0 !important;
    justify-content: center !important;
  }
}

/* ─── Severity badges — maintain legibility on narrow screens ────────────── */
@media (max-width: 480px) {
  .badge {
    font-size: 10px !important;
    padding: 3px 7px !important;
  }
  /* Ensure badge icons stay visible */
  .badge-critical::before,
  .badge-high::before,
  .badge-medium::before,
  .badge-low::before,
  .badge-info::before {
    font-size: 9px;
  }
}

/* Interactive badges (links/buttons) — 44px minimum touch target */
a.badge, button.badge {
  min-height: 44px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
}

/* ─── Detail views — single-column flow on mobile ────────────────────────── */
@media (max-width: 768px) {
  /* Header stacks vertically */
  .detail-header {
    flex-direction: column !important;
    gap: 12px !important;
    align-items: flex-start !important;
  }
  /* Evidence / code blocks — horizontal scroll within container */
  .finding-detail-section pre,
  .ovr-drawer-field-mono,
  pre.code-block {
    overflow-x: auto !important;
    white-space: pre !important;
    word-break: normal !important;
    max-width: 100% !important;
  }
  /* Action buttons in detail drawers — full width */
  .ovr-drawer-body .btn {
    min-height: 44px !important;
  }
  /* Page titles scale down cleanly */
  .page-title { font-size: 22px !important; }
  .page-sub   { font-size: 13px !important; }
  /* Back navigation stays prominent */
  .detail-back {
    font-size: 14px !important;
    padding: 8px 0 !important;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
  }
}

/* ─── Page header — stack on mobile ─────────────────────────────────────── */
@media (max-width: 768px) {
  .page-header .btn,
  .page-header button {
    min-height: 44px !important;
  }
}
/* Ensure CTA buttons in page header are full-width on ultra-narrow */
@media (max-width: 400px) {
  .page-header {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .page-header .btn {
    width: 100% !important;
    justify-content: center !important;
  }
}

/* ─── Toast — full-width on phones ──────────────────────────────────────── */
@media (max-width: 480px) {
  .toast {
    left: 12px !important;
    right: 12px !important;
    max-width: none !important;
    font-size: 13px !important;
  }
}

/* ─── Copilot FAB — keep above mobile bottom tab bar ────────────────────── */
@media (max-width: 768px) {
  .copilot-fab,
  .ovr-copilot-fab {
    bottom: 80px !important; /* above 60px tab bar + 20px gap */
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
 *  MOBILE POLISH #5 — Table → Card Layout
 *  Findings table + Scan History table → thumb-friendly cards on mobile.
 *  Desktop (>1024px): existing table.  Tablet (640–1024px): 2-col grid.
 *  Phone (<640px): single-column card stack.
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Table / Card visibility toggle (1024px breakpoint) ───────────────── */
.tbl-cards { display: none; flex-direction: column; gap: 12px; }

@media (max-width: 1024px) {
  .tbl-desktop { display: none !important; }
  .tbl-cards   { display: flex !important; flex-direction: column; gap: 12px; }
}

/* ─── 2-col card grid on tablet (640–1024px) ───────────────────────────── */
@media (min-width: 640px) and (max-width: 1024px) {
  .tbl-cards {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
}

/* ─── Severity accent — left border colour by severity level ───────────── */
.ovr-card-item[data-sev="critical"] { border-left: 3px solid #ef4444; }
.ovr-card-item[data-sev="high"]     { border-left: 3px solid #f97316; }
.ovr-card-item[data-sev="medium"]   { border-left: 3px solid #eab308; }
.ovr-card-item[data-sev="low"]      { border-left: 3px solid #3b82f6; }
.ovr-card-item[data-sev="info"]     { border-left: 3px solid #9ca3af; }

/* ─── Scan status accent — left border colour by scan status ───────────── */
.ovr-card-item[data-scan-status="complete"]              { border-left: 3px solid #22c55e; }
.ovr-card-item[data-scan-status="error"]                 { border-left: 3px solid #ef4444; }
.ovr-card-item[data-scan-status="stopped"]               { border-left: 3px solid #f97316; }
.ovr-card-item[data-scan-status="completed_with_errors"] { border-left: 3px solid #eab308; }

/* ─── Card sub-elements ────────────────────────────────────────────────── */
.ovr-card-endpoint {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  color: var(--text-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
  display: block;
  margin-top: 2px;
}

.ovr-card-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 6px;
}

/* ─── Stats grid breakpoint adjustment: 1-col at <640px ───────────────── */
@media (max-width: 640px) {
  .ovr-stats     { grid-template-columns: 1fr !important; }
  .stats-grid    { grid-template-columns: 1fr !important; }
  .rs-stats-grid { grid-template-columns: 1fr !important; }
}

/* ─── Stats grid: ensure 2-col on tablet up to 1024px ──────────────────── */
@media (min-width: 641px) and (max-width: 1024px) {
  .rs-stats-grid { grid-template-columns: repeat(2, 1fr) !important; }
}