/* ─────────────────────────────────────────────────────────────────
   Nereus Pulse — Charcoal Grey + Lime Design System
   Brand accent: #CCFF00 / #64DD17  (BIO SIGNAL No.011)
   Backgrounds:  deep charcoal (#0A0A0A → #252525)
   Text:         white / light-grey / muted-grey
   ───────────────────────────────────────────────────────────────── */

:root {
  /* ── Brand accent palette — Lime / Neon Green ────── */
  --blue-950: #0A0A0A;   /* deepest background                          */
  --blue-900: #111111;
  --blue-800: #1A1A1A;
  --blue-700: #2D5A00;   /* dark lime — button gradient start           */
  --blue-600: #4A8C00;   /* mid-dark lime — button gradient dark        */
  --blue-550: #64DD17;   /* green — secondary accent                    */
  --blue-500: #80E51A;   /* mid lime — button gradient light            */
  --blue-400: #CCFF00;   /* bright lime — PRIMARY ACCENT                */
  --blue-300: #CCFF00;   /* bright lime — text accent                   */
  --blue-200: #99CC00;   /* dimmer lime — mono/code text                */
  --blue-100: #D4FF66;   /* light lime                                  */
  --blue-50:  #F0FFCC;   /* very light lime — subtle tint               */

  /* ── Surfaces & backgrounds ──────────────────── */
  --bg-app:         #1C1C1E;   /* content area — medium charcoal        */
  --bg-deep:        #0D1117;   /* very dark bg for code/password blocks */
  --bg-sidebar:     #111111;   /* sidebar — deep charcoal               */
  --bg-card:        #252525;   /* card surfaces                         */
  --bg-card-alt:    #2C2C2C;   /* alternate card                        */
  --bg-input:       #1E1E1E;   /* input fields                          */
  --surface-2:      #1E1E1E;   /* popover / secondary surface           */
  --topbar-bg:      rgba(20, 20, 20, 0.96);
  --login-card-bg:  rgba(28, 28, 30, 0.97);

  /* ── Borders ─────────────────────────────────── */
  --border:       rgba(255, 255, 255, 0.08);
  --border-hover: rgba(255, 255, 255, 0.18);

  /* ── Accent shorthand ────────────────────────── */
  --accent:     #CCFF00;
  --accent-rgb: 204, 255, 0;

  /* ── Text ────────────────────────────────────── */
  --text-primary:   #F4F4F5;
  --text-secondary: #A1A1AA;
  --text-muted:     #71717A;
  --color-white:    #FFFFFF;

  /* ── Severity — base ─────────────────────────── */
  --crit:       #EF4444;
  --crit-rgb:   239, 68, 68;
  --high:       #F97316;
  --high-rgb:   249, 115, 22;
  --medium:     #EAB308;
  --medium-rgb: 234, 179, 8;
  --low:        #22C55E;
  --low-rgb:    34, 197, 94;

  /* ── Severity — light/text variants ─────────── */
  --crit-text:     #F87171;   /* crit text on dark background           */
  --crit-light:    #FCA5A5;   /* softer crit text                       */
  --crit-glow:     #FF7C7C;   /* gradient end for crit severity bars    */
  --high-text:     #FB923C;   /* high text on dark background           */
  --high-light:    #FDBA74;   /* lighter high / gradient end            */
  --medium-text:   #FBBF24;   /* medium/amber text on dark background   */
  --medium-light:  #FDE047;   /* lighter medium / gradient end          */
  --medium-bright: #FACC15;   /* bright medium — text-warn utility      */
  --low-text:      #4ADE80;   /* bright green text on dark background   */
  --low-text-rgb:  74, 222, 128;
  --low-light:     #86EFAC;   /* light green / gradient end             */

  /* ── Success / positive ──────────────────────── */
  --success:       #10B981;
  --success-rgb:   16, 185, 129;
  --success-text:  #6EE7B7;   /* success text on dark backgrounds       */
  --success-acked: #34D399;   /* acked / ok state green                 */
  --success-dark:  #15803D;   /* btn-success gradient start             */
  --success-mid:   #16A34A;   /* btn-success gradient end               */
  --success-dark-rgb: 22, 163, 74;

  /* ── Warning / orange ────────────────────────── */
  --warn:      #F59E0B;
  --warn-rgb:  245, 158, 11;
  --warn-light: #FCD34D;   /* lighter warning text                      */
  --warn-dark:  #C2410C;   /* btn-warn gradient start                   */
  --warn-mid:   #EA580C;   /* btn-warn gradient end                     */
  --warn-dark-rgb: 234, 88, 12;

  /* ── Violet / purple ─────────────────────────── */
  --violet:       #8B5CF6;
  --violet-rgb:   139, 92, 246;
  --violet-text:  #A78BFA;   /* code-3xx / lighter violet               */
  --violet-light: #C4B5FD;   /* very light violet — env staging badge   */
  --violet-light-rgb: 196, 181, 253;
  --violet-btn:   #A855F7;   /* method-put badge                        */
  --violet-btn-rgb: 168, 85, 247;
  --violet-deep:  #4C1D95;   /* computer avatar gradient start          */
  --violet-dark:  #7C3AED;   /* computer avatar gradient end            */

  /* ── Slate / neutral ─────────────────────────── */
  --slate:       #94A3B8;
  --slate-rgb:   148, 163, 184;
  --slate-dark:  #64748B;
  --slate-dark-rgb: 100, 116, 139;
  --amber:       #FBBF24;   /* amber — method-patch badge               */
  --amber-rgb:   251, 191, 36;
  --blue-info:   #63B3ED;   /* cert restart notice                      */
  --blue-info-rgb: 99, 179, 237;
  --info-blue-light: #60A5FA;   /* info icon text (AgentDeployment modal)  */
  --info-bright-rgb: 59, 130, 246; /* info blue bg rgba()                  */
  --text-light:      #E2E8F0;   /* very light text — chart headings        */
  --slate-darker:    #475569;   /* darkest slate — muted tooltip text      */

  /* ── Layout ──────────────────────────────────── */
  --sidebar-w: 240px;
  --topbar-h:  64px;
  --radius:    12px;
  --radius-sm: 8px;
  --shadow:    0 4px 24px rgba(0, 0, 0, 0.45);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35);
  --transition: 0.2s ease;
}

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

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-primary);
  background: var(--bg-app);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--blue-100); }

/* ════════════════════════════════════════════════
   LOGIN PAGE
   ════════════════════════════════════════════════ */
.login-body {
  min-height: 100vh;
  background: radial-gradient(ellipse at 20% 50%, var(--blue-800) 0%, var(--blue-950) 60%),
              radial-gradient(ellipse at 80% 20%, var(--blue-800) 0%, transparent 50%);
  position: relative;
  overflow-x: hidden;
}

/* Animated blobs */
.bg-blob {
  position: fixed;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.14;
  animation: float 10s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}
.blob-1 { width: 500px; height: 500px; background: var(--blue-600); top: -100px; left: -100px; animation-delay: 0s; }
.blob-2 { width: 400px; height: 400px; background: var(--blue-550); bottom: -80px; right: -80px; animation-delay: 3s; }
.blob-3 { width: 300px; height: 300px; background: var(--accent); top: 50%; left: 50%; transform: translate(-50%, -50%); animation-delay: 6s; }

@keyframes float {
  0%, 100% { transform: translateY(0) scale(1); }
  50%       { transform: translateY(-30px) scale(1.05); }
}

.login-container {
  position: relative;
  z-index: 10;
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
  padding: 40px 16px;
}
.login-container-wide {
  max-width: 600px;
}

.login-card {
  background: var(--login-card-bg);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 40px 36px 32px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255,255,255,0.05), inset 0 1px 0 rgba(255,255,255,0.05);
  animation: slideUp 0.35s ease;
}

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

.login-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  margin-bottom: 28px;
}

.login-brand-divider {
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb),0.3), transparent);
  margin-top: 6px;
}

/* SVG logo container for login page */
.login-svg-logo {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Company name shown in step 2 when no logo */
.login-company-name {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.3px;
  margin-top: 4px;
}

.login-icon {
  width: 60px;
  height: 60px;
  flex-shrink: 0;
  background: linear-gradient(145deg, var(--blue-700), var(--blue-600), var(--accent));
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(var(--accent-rgb),0.3), 0 0 0 1px rgba(var(--accent-rgb),0.15);
}
.login-icon svg { width: 30px; height: 30px; }

/* Rectangular company logo container */
.login-logo {
  width: 100%;
  max-width: 280px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 12px;
  padding: 10px 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.login-logo img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.login-title {
  font-size: 24px;
  font-weight: 700;
  background: linear-gradient(135deg, var(--color-white) 40%, var(--accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -0.5px;
  line-height: 1.15;
  margin-top: 2px;
}
.login-subtitle {
  font-size: 13px;
  color: var(--text-muted);
  letter-spacing: 0.1px;
}

/* Error banner */
.alert-error {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(var(--crit-rgb),0.12);
  border: 1px solid rgba(var(--crit-rgb),0.3);
  color: var(--crit-light);
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  margin-bottom: 14px;
}
.alert-error svg { width: 14px; height: 14px; flex-shrink: 0; }
.alert-success {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.3);
  color: var(--success-text);
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  margin-bottom: 14px;
}
.alert-success svg { width: 14px; height: 14px; flex-shrink: 0; }

/* Form */
.login-form { display: flex; flex-direction: column; gap: 12px; }

.form-group { display: flex; flex-direction: column; gap: 4px; }

.input-wrapper { position: relative; }

.input-icon {
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--text-muted);
  pointer-events: none;
}

.form-input {
  width: 100%;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 13px;
  padding: 9px 36px;
  transition: border-color var(--transition), box-shadow var(--transition);
  outline: none;
}
.form-input::placeholder { color: var(--text-muted); }
.form-input:focus, .form-input:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb),0.18);
}

.toggle-password {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  padding: 4px;
  display: flex;
  align-items: center;
}
.toggle-password:hover { color: var(--accent); }
.toggle-password svg { width: 16px; height: 16px; }


.btn-login {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: linear-gradient(135deg, var(--blue-600), var(--accent));
  color: var(--blue-950);
  border: none;
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  padding: 10px;
  cursor: pointer;
  transition: all var(--transition);
  box-shadow: 0 3px 10px rgba(var(--accent-rgb),0.3);
  margin-top: 4px;
  letter-spacing: 0.2px;
}
.btn-login svg { width: 15px; height: 15px; transition: transform var(--transition); }
.btn-login:hover {
  background: linear-gradient(135deg, var(--blue-500), var(--blue-100));
  box-shadow: 0 5px 16px rgba(var(--accent-rgb),0.45);
  transform: translateY(-1px);
}
.btn-login:hover svg { transform: translateX(3px); }
.btn-login:active { transform: translateY(0); }

/* ════════════════════════════════════════════════
   APP LAYOUT
   ════════════════════════════════════════════════ */
.app-body {
  display: flex;
  min-height: 100vh;
}

/* ── Sidebar ──────────────────────────────────── */
.sidebar {
  width: var(--sidebar-w);
  height: 100vh;
  background: var(--bg-sidebar);
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 200;
  transition: left 0.28s cubic-bezier(.4,0,.2,1);
}

/* ── Mobile sidebar toggle button ─────────────── */
.sidebar-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--text-primary);
  cursor: pointer;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-right: 8px;
  transition: background var(--transition);
}
.sidebar-toggle:hover { background: rgba(255,255,255,0.08); }
.sidebar-toggle svg { width: 20px; height: 20px; display: block; }

/* ── Mobile backdrop ───────────────────────────── */
.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 150;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.sidebar-backdrop.active { display: block; }

.sidebar-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  height: var(--topbar-h);
  padding: 0 8px;
  flex-shrink: 0;
  text-decoration: none;
  cursor: pointer;
}
.sidebar-brand svg { display: block; flex-shrink: 0; padding-top: 3px; }
.brand-icon {
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, var(--blue-700), var(--accent));
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(var(--accent-rgb),0.25);
}
.brand-icon svg { width: 18px; height: 18px; color: var(--blue-950); }
.brand-name {
  font-size: 17px;
  font-weight: 700;
  background: linear-gradient(135deg, var(--color-white), var(--blue-100));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -0.3px;
}

.sidebar-nav {
  flex: 1;
  min-height: 0;
  padding: 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow-y: auto;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-weight: 500;
  font-size: 14px;
  transition: all var(--transition);
  position: relative;
  text-decoration: none;
}
.nav-item svg { width: 18px; height: 18px; flex-shrink: 0; }
.nav-item:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-primary);
}
.nav-item.active {
  background: rgba(var(--accent-rgb),0.10);
  color: var(--accent);
  border: 1px solid rgba(var(--accent-rgb),0.22);
}
.nav-item.active::before {
  content: '';
  position: absolute;
  left: -1px;
  top: 20%;
  height: 60%;
  width: 3px;
  background: var(--accent);
  border-radius: 0 3px 3px 0;
}

.badge {
  margin-left: auto;
  background: var(--crit);
  color: var(--color-white);
  font-size: 11px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 99px;
  min-width: 20px;
  text-align: center;
  display: none;
}
.badge:not(:empty) { display: block; }

.sidebar-footer {
  flex-shrink: 0;
  padding: 8px 12px;
  border-top: 1px solid var(--border);
}

.user-info {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.user-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--blue-700), var(--accent));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--blue-950);
  flex-shrink: 0;
}
.user-details { min-width: 0; }
.user-name { display: block; font-size: 13px; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-role { display: block; font-size: 11px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.sidebar-footer form { margin: 0; padding: 0; }
.logout-btn {
  -webkit-appearance: none;
  appearance: none;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  margin: 0;
  background: none;
  border: none;
  outline: none;
  box-shadow: none;
  color: var(--text-secondary);
  cursor: pointer;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 500;
  font-family: inherit;
  transition: all var(--transition);
}
.logout-btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.logout-btn:hover { background: rgba(var(--crit-rgb),0.12); color: var(--crit-light); }

/* ── Main Wrapper ─────────────────────────────── */
.main-wrapper {
  margin-left: var(--sidebar-w);
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* ── Topbar ───────────────────────────────────── */
.topbar {
  height: var(--topbar-h);
  background: var(--topbar-bg);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 28px;
  position: sticky;
  top: 0;
  z-index: 50;
}

.topbar-left {
  display: flex;
  align-items: center;
  min-width: 0;
}

.page-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: 20px;
}

.status-indicator {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-secondary);
  background: none;
  border: none;
  padding: 4px 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s;
}
.status-indicator:hover {
  background: rgba(255,255,255,0.06);
}
.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--low);
  animation: pulse 2s ease-in-out infinite;
  flex-shrink: 0;
}
/* training mode — amber/orange */
.status-dot.status-training { background: var(--high); }
/* owner / system — amber */
.status-dot.status-owner    { background: var(--accent); }
/* health error — red */
.status-dot.status-error    { background: var(--crit); }
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.45; }
}

.status-indicator-wrap {
  position: relative;
}
.status-popover {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  background: var(--surface-2);
  border: 1px solid rgba(var(--crit-rgb),0.4);
  border-radius: 8px;
  padding: 12px 14px;
  min-width: 260px;
  max-width: 380px;
  z-index: 300;
  box-shadow: 0 8px 28px rgba(0,0,0,0.5);
}
.status-popover-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--crit);
  margin: 0 0 8px;
}
.status-popover-item {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  font-size: 12px;
  color: var(--text-secondary, var(--slate));
  padding: 5px 0;
  border-top: 1px solid rgba(255,255,255,0.05);
}
.status-popover-item:first-of-type {
  border-top: none;
}
.status-popover-item svg {
  flex-shrink: 0;
  margin-top: 1px;
  color: var(--crit);
}
.status-popover-link {
  display: block;
  margin-top: 10px;
  font-size: 11px;
  color: var(--text-muted);
  text-align: right;
  text-decoration: none;
}
.status-popover-link:hover { color: var(--text-secondary); }

.topbar-time {
  font-size: 13px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.5px;
}

.topbar-user {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.topbar-user .user-details { display: flex; align-items: center; gap: 6px; min-width: 0; }
.topbar-user .user-name { font-size: 13px; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-user .user-sep  { font-size: 12px; color: var(--text-muted); flex-shrink: 0; }
.topbar-user .user-role { font-size: 12px; color: var(--text-muted); white-space: nowrap; flex-shrink: 0; }

/* ── Status page ─────────────────────────────── */
.status-page { display: flex; flex-direction: column; gap: 20px; }
.status-health-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.status-health-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px 20px;
}
.status-health-card.health-ok      { border-left: 3px solid var(--low); }
.status-health-card.health-err     { border-left: 3px solid var(--crit); }
.status-health-card.health-warn    { border-left: 3px solid var(--warn); }
.status-health-card.health-neutral { border-left: 3px solid var(--accent); }
.health-card-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.health-ok      .health-card-icon { background: rgba(var(--low-rgb),0.15);  color: var(--low); }
.health-err     .health-card-icon { background: rgba(var(--crit-rgb),0.15);   color: var(--crit); }
.health-warn    .health-card-icon { background: rgba(var(--warn-rgb),0.15);  color: var(--warn); }
.health-neutral .health-card-icon { background: rgba(var(--accent-rgb),0.1);  color: var(--accent); }
.health-card-icon svg { width: 16px; height: 16px; }
.health-card-label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; }
.health-card-val   { font-size: 15px; font-weight: 600; color: var(--text-primary); margin-top: 2px; }

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
}
.card-title { font-size: 14px; font-weight: 600; color: var(--text-primary); }

.status-log-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
  font-family: 'Courier New', monospace;
}
.status-log-table thead th {
  padding: 7px 10px;
  text-align: left;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  border-bottom: 1px solid var(--border);
  background: rgba(255,255,255,0.02);
}
.status-log-table tbody tr { border-bottom: 1px solid rgba(255,255,255,0.03); }
.status-log-table tbody tr:hover { background: rgba(255,255,255,0.03); }
.status-log-table tbody td { padding: 5px 10px; color: var(--text-secondary); vertical-align: middle; }
.log-ts-cell   { color: var(--text-muted); white-space: nowrap; }
.log-path-cell { max-width: 320px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.log-user-cell, .log-ip-cell { color: var(--text-muted); }
.log-dur-cell  { color: var(--text-muted); text-align: right; white-space: nowrap; }
.http-method {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  background: rgba(var(--accent-rgb),0.1);
  color: var(--accent);
}
.method-post   { background: rgba(var(--low-rgb),0.12);  color: var(--low); }
.method-patch  { background: rgba(var(--amber-rgb),0.12); color: var(--medium-text); }
.method-delete { background: rgba(var(--crit-rgb),0.12);  color: var(--crit); }
.method-put    { background: rgba(var(--violet-btn-rgb),0.12); color: var(--violet-btn); }
.http-status { font-weight: 700; }
.code-2xx { color: var(--low); }
.code-3xx { color: var(--violet-text); }
.code-4xx { color: var(--medium-text); }
.code-5xx { color: var(--crit); }

/* ── Nav badge ────────────────────────────────── */
.nav-badge {
  margin-left: auto;
  background: var(--crit);
  color: var(--color-white);
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 99px;
  min-width: 18px;
  text-align: center;
  display: none;
}
.nav-badge:not(:empty) { display: block; }
.nav-badge-owner { background: var(--accent); color: var(--blue-950); }

/* ── Priority pill radio group ───────────────── */
.priority-pill-label {
  cursor: pointer;
  user-select: none;
}
.priority-pill-radio {
  display: none;
}
.priority-pill {
  opacity: 0.35;
  transition: opacity var(--transition), box-shadow var(--transition);
  cursor: pointer;
  font-size: 11px;
}
.priority-pill-radio:checked + .priority-pill {
  opacity: 1;
  box-shadow: 0 0 0 2px currentColor;
}
.priority-pill-label:hover .priority-pill {
  opacity: 0.7;
}

/* ── Autocomplete dropdown ────────────────────── */
.autocomplete-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 8px 8px;
  z-index: 200;
  max-height: 180px;
  overflow-y: auto;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.autocomplete-item {
  padding: 8px 12px;
  font-size: 13px;
  color: var(--text-secondary);
  cursor: pointer;
  font-family: monospace;
}
.autocomplete-item:hover,
.autocomplete-item.active {
  background: rgba(var(--accent-rgb),0.08);
  color: var(--accent);
}

/* ── Page Content ─────────────────────────────── */
.page-content {
  flex: 1;
  min-width: 0;
  overflow-x: hidden;
  padding: 20px 24px;
}

/* ════════════════════════════════════════════════
   ALERTS DASHBOARD
   ════════════════════════════════════════════════ */
.alerts-dashboard { display: flex; flex-direction: column; gap: 20px; }

/* ── Mode / warning banners ───────────────────── */
.mode-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 18px;
  border-radius: var(--radius);
  border: 1px solid;
  font-size: 13px;
  margin-bottom: 4px;
}
.mode-banner svg { width: 20px; height: 20px; flex-shrink: 0; }
.mode-banner > div { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.mode-banner strong { font-weight: 600; }
.mode-banner span   { color: inherit; opacity: 0.8; }
.mode-banner-link {
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  padding: 5px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid currentColor;
  opacity: 0.8;
  text-decoration: none;
  transition: opacity 0.15s;
}
.mode-banner-link:hover { opacity: 1; }

.mode-banner-training {
  background: rgba(var(--high-rgb),0.08);
  border-color: rgba(var(--high-rgb),0.3);
  color: var(--high-light);
}
.mode-banner-info {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.12);
  color: var(--text-secondary);
}

/* Stats strip */
.stats-strip {
  display: flex;
  align-items: center;
  gap: 0;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 20px;
  flex-shrink: 0;
  flex-wrap: wrap;
  overflow: hidden;
}
.strip-stat { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 16px; }
.strip-stat-link { cursor: pointer; border-radius: var(--radius-sm); transition: background var(--transition); }
.strip-stat-link:hover { background: rgba(255,255,255,0.05); }
.strip-stat-link:hover .strip-lbl { color: var(--accent); }
.strip-val { font-size: 20px; font-weight: 700; color: var(--text-primary); line-height: 1; }
.strip-lbl { font-size: 11px; color: var(--text-muted); font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; }
.strip-divider { width: 1px; height: 32px; background: var(--border); flex-shrink: 0; }
.stats-strip-bare { background: none; border: none; padding: 0; border-radius: 0; }
.text-crit { color: var(--crit); }
.text-high { color: var(--high); }
.text-med  { color: var(--medium); }
.text-low  { color: var(--low); }
.text-warn { color: var(--medium-bright); }

/* Alert detail overlay */
.alert-detail-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 500;
  backdrop-filter: blur(2px);
}
.alert-detail-overlay.visible { display: block; }

.alert-detail-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: clamp(340px, 38%, 520px);
  height: 100vh;
  background: var(--bg-card);
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 0.22s cubic-bezier(0.4,0,0.2,1);
  z-index: 501;
}
.alert-detail-panel.open { transform: translateX(0); }

/* Feed */
.alert-feed {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
}

.feed-items { display: contents; }

.feed-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.feed-title { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.feed-live {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--low);
  font-weight: 500;
}
.live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--low);
  box-shadow: 0 0 6px var(--low);
  animation: pulse 1.5s ease-in-out infinite;
}

.feed-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  border-left: 3px solid transparent;
  cursor: pointer;
  transition: background var(--transition), border-left-color var(--transition);
  gap: 12px;
}
.feed-item:last-child { border-bottom: none; }
.feed-item:hover { background: rgba(255,255,255,0.04); }
.feed-item-selected { background: rgba(var(--accent-rgb),0.08) !important; border-left-color: var(--accent) !important; }

.sev-border-critical { border-left-color: rgba(var(--crit-rgb),0.4); }
.sev-border-high     { border-left-color: rgba(var(--high-rgb),0.4); }
.sev-border-medium   { border-left-color: rgba(var(--medium-rgb),0.4); }
.sev-border-low      { border-left-color: rgba(var(--low-rgb),0.3); }

.feed-item-left { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
.feed-item-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

.sev-pip {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}
.sev-pip-critical { background: var(--crit); box-shadow: 0 0 6px var(--crit); }
.sev-pip-high     { background: var(--high); box-shadow: 0 0 6px var(--high); }
.sev-pip-medium   { background: var(--medium); }
.sev-pip-low      { background: var(--low); }

.feed-item-body { min-width: 0; }
.feed-item-title { font-size: 13px; font-weight: 500; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.feed-item-meta { display: flex; align-items: center; gap: 10px; margin-top: 3px; }


.feed-src {
  font-size: 11px;
  color: var(--text-muted);
}

.feed-time { font-size: 11px; color: var(--text-muted); white-space: nowrap; }

.feed-chevron { width: 14px; height: 14px; color: var(--text-muted); flex-shrink: 0; }
.feed-item:hover .feed-chevron { color: var(--accent); }

.detail-header {
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--border);
}
.detail-header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.detail-close {
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.05);
  border: none;
  border-radius: 6px;
  cursor: pointer;
  color: var(--text-muted);
}
.detail-close svg { width: 14px; height: 14px; }
.detail-close:hover { background: rgba(var(--crit-rgb),0.1); color: var(--crit-light); }

.detail-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.3;
  margin-bottom: 6px;
}
.detail-time { font-size: 12px; color: var(--text-muted); }

.detail-body { padding: 18px 20px; display: flex; flex-direction: column; gap: 20px; }

.detail-section {}
.detail-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: var(--text-muted); margin-bottom: 6px; }
.detail-message { font-size: 13px; color: var(--text-secondary); line-height: 1.6; white-space: pre-wrap; word-break: break-word; }

.detail-value {
  font-size: 13px;
  color: var(--text-primary);
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 7px 10px;
  margin-top: 4px;
}
.detail-value.mono { font-family: monospace; color: var(--accent); }


/* detail-header extras */
.detail-header-top { gap: 8px; }
.detail-score-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 99px;
  background: rgba(255,255,255,0.07);
  color: var(--text-secondary);
  margin-right: auto;
}
.detail-meta-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
.detail-source { font-size: 12px; color: var(--text-muted); }
.detail-acked-info, .detail-expand-acked {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: var(--success-acked);
  padding: 8px 0;
}
.detail-acked-info svg, .detail-expand-acked svg { width: 14px; height: 14px; flex-shrink: 0; }

/* feed extras */
.feed-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 48px 24px;
  color: var(--text-muted);
  text-align: center;
}
.feed-empty svg { width: 36px; height: 36px; opacity: 0.2; }
.feed-empty p   { font-size: 14px; }
.feed-empty small { font-size: 12px; color: var(--text-muted); max-width: 300px; }

.feed-score {
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 99px;
  background: rgba(255,255,255,0.06);
  color: var(--text-muted);
}

/* score pill in alerts table */
.score-pill {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 99px;
  background: rgba(255,255,255,0.06);
  color: var(--text-secondary);
}
.sev-bg-critical { background: rgba(var(--crit-rgb),0.15);  color: var(--crit-light); }
.sev-bg-high     { background: rgba(var(--high-rgb),0.15); color: var(--high-light); }
.sev-bg-medium   { background: rgba(var(--medium-rgb),0.15);  color: var(--medium-light); }
.sev-bg-low      { background: rgba(var(--low-rgb),0.15);  color: var(--low-light); }
.score-manual    { color: var(--text-muted); }
/* expand button in alerts table */
.btn-expand {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  padding: 4px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s;
}
.btn-expand svg { width: 16px; height: 16px; transition: transform 0.15s; }
.btn-expand:hover { color: var(--accent); }
.btn-expand-open { color: var(--accent); }
.btn-expand-open svg { transform: rotate(180deg); }

/* expanded detail row */
.detail-row td { padding: 0; }
.detail-expand-cell {
  background: rgba(20,20,20,0.7);
  border-bottom: 1px solid var(--border);
}
.detail-expand-body {
  padding: 14px 24px 16px;
  display: flex;
  align-items: flex-start;
  gap: 24px;
}
.detail-expand-reason { flex: 1; }
.detail-expand-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.detail-expand-text {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.65;
  margin: 0;
}

/* pagination */
.pagination-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px 24px;
  border-top: 1px solid var(--border);
}
.page-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 6px 14px;
  text-decoration: none;
  transition: all var(--transition);
}
.page-btn:hover { background: rgba(255,255,255,0.08); color: var(--text-primary); }
.page-btn svg { width: 14px; height: 14px; }
.page-btn-disabled {
  color: var(--text-muted);
  background: rgba(255,255,255,0.03);
  border-color: rgba(255,255,255,0.06);
  cursor: default;
  pointer-events: none;
}
.page-info { font-size: 13px; color: var(--text-muted); }

/* alert count badge in toolbar */
.alert-count-badge {
  font-size: 12px;
  color: var(--text-muted);
  padding: 4px 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 99px;
}

/* ── Cards ────────────────────────────────────── */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
}
.card-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}
.card-link { font-size: 12px; color: var(--accent); }
.card-link:hover { color: var(--blue-100); }

.card-body { padding: 16px 18px; }
.card-body.p-0 { padding: 0; }

/* ════════════════════════════════════════════════
   DASHBOARD
   ════════════════════════════════════════════════ */
.dashboard { display: flex; flex-direction: column; gap: 24px; }

/* Stats grid */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  transition: transform var(--transition), box-shadow var(--transition);
  position: relative;
  overflow: hidden;
}
.stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
}
.stat-total::before    { background: linear-gradient(90deg, var(--blue-600), var(--accent)); }
.stat-critical::before { background: linear-gradient(90deg, var(--crit), var(--crit-glow)); }
.stat-high::before     { background: linear-gradient(90deg, var(--high), var(--high-light)); }
.stat-unacked::before  { background: linear-gradient(90deg, var(--medium), var(--medium-light)); }

.stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }

.stat-icon {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.stat-total .stat-icon    { background: rgba(var(--accent-rgb),0.12); color: var(--accent); }
.stat-critical .stat-icon { background: rgba(var(--crit-rgb),0.15); color: var(--crit-text); }
.stat-high .stat-icon     { background: rgba(var(--high-rgb),0.15); color: var(--high-text); }
.stat-unacked .stat-icon  { background: rgba(234, 179, 8, 0.15);  color: var(--medium-bright); }
.stat-icon svg { width: 22px; height: 22px; }

.stat-info { display: flex; flex-direction: column; }
.stat-value { font-size: 24px; font-weight: 700; color: var(--text-primary); line-height: 1; }
.stat-label { font-size: 12px; color: var(--text-secondary); margin-top: 4px; font-weight: 500; }

/* Dashboard two-col grid */
.dashboard-grid {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 20px;
}

/* Severity bars */
.severity-bars { display: flex; flex-direction: column; gap: 16px; }

.severity-row {
  display: grid;
  grid-template-columns: 70px 1fr 32px;
  align-items: center;
  gap: 12px;
}
.sev-label { font-size: 12px; font-weight: 600; }
.sev-critical { color: var(--crit); }
.sev-high     { color: var(--high); }
.sev-medium   { color: var(--medium); }
.sev-low      { color: var(--low); }

.sev-bar-track {
  height: 8px;
  background: rgba(255,255,255,0.05);
  border-radius: 99px;
  overflow: hidden;
}
.sev-bar {
  height: 100%;
  border-radius: 99px;
  transition: width 0.6s ease;
  min-width: 4px;
}
.sev-bar-critical { background: linear-gradient(90deg, var(--crit), var(--crit-glow)); }
.sev-bar-high     { background: linear-gradient(90deg, var(--high), var(--high-light)); }
.sev-bar-medium   { background: linear-gradient(90deg, var(--medium), var(--medium-light)); }
.sev-bar-low      { background: linear-gradient(90deg, var(--low), var(--low-light)); }

.sev-count { font-size: 13px; font-weight: 600; color: var(--text-secondary); text-align: right; }

/* Alert list (dashboard) */
.alert-list { list-style: none; }

.alert-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 22px;
  border-bottom: 1px solid var(--border);
  transition: background var(--transition);
}
.alert-item:last-child { border-bottom: none; }
.alert-item:hover { background: rgba(255, 255, 255, 0.03); }
.alert-item.acknowledged { opacity: 0.5; }

.alert-severity-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.sev-dot-critical { background: var(--crit); box-shadow: 0 0 6px var(--crit); }
.sev-dot-high     { background: var(--high); box-shadow: 0 0 6px var(--high); }
.sev-dot-medium   { background: var(--medium); }
.sev-dot-low      { background: var(--low); }

.alert-item-body { flex: 1; min-width: 0; }
.alert-item-title { display: block; font-size: 13px; font-weight: 500; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.alert-item-source { display: block; font-size: 11px; color: var(--text-muted); margin-top: 2px; }

.alert-item-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
.alert-time { font-size: 11px; color: var(--text-muted); }

/* ════════════════════════════════════════════════
   SEVERITY BADGES
   ════════════════════════════════════════════════ */
.severity-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}
.badge-critical { background: rgba(var(--crit-rgb),0.15);  color: var(--crit-text); border: 1px solid rgba(var(--crit-rgb),0.3); }
.badge-high     { background: rgba(var(--high-rgb),0.15); color: var(--high-text); border: 1px solid rgba(var(--high-rgb),0.3); }
.badge-medium   { background: rgba(var(--medium-rgb),0.15);  color: var(--medium-text); border: 1px solid rgba(var(--medium-rgb),0.3); }
.badge-low      { background: rgba(var(--low-rgb),0.15);  color: var(--low-text); border: 1px solid rgba(var(--low-rgb),0.3); }

/* ════════════════════════════════════════════════
   ALERTS PAGE
   ════════════════════════════════════════════════ */
.alerts-page { display: flex; flex-direction: column; gap: 20px; }

.alerts-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.toolbar-filters { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; flex: 1; min-width: 0; }

.filter-select, .filter-input {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 13px;
  padding: 8px 12px;
  outline: none;
  transition: border-color var(--transition);
}
.filter-select:focus, .filter-input:focus { border-color: var(--accent); }
.filter-input { width: 200px; flex: 1 1 120px; min-width: 100px; max-width: 260px; }
.filter-input::placeholder { color: var(--text-muted); }

.btn-refresh {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  padding: 8px 14px;
  cursor: pointer;
  transition: all var(--transition);
}
.btn-refresh svg { width: 14px; height: 14px; }
.btn-refresh:hover { background: rgba(255,255,255,0.08); color: var(--text-primary); }

.source-tag {
  display: inline-flex;
  background: rgba(255,255,255,0.06);
  color: var(--text-secondary);
  border: 1px solid rgba(255,255,255,0.1);
  padding: 2px 8px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 600;
}

/* Status pills */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.status-pill svg { width: 12px; height: 12px; }

.status-active {
  background: rgba(var(--low-rgb),0.1);
  color: var(--low-text);
  border: 1px solid rgba(var(--low-rgb),0.25);
}
.status-acked {
  background: rgba(var(--slate-rgb),0.1);
  color: var(--text-muted);
  border: 1px solid rgba(var(--slate-rgb),0.15);
}

.pulse-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--low-text);
  box-shadow: 0 0 6px var(--low-text);
  animation: pulse 1.5s ease-in-out infinite;
}

.btn-ack {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--accent-rgb),0.08);
  border: 1px solid rgba(var(--accent-rgb),0.22);
  border-radius: var(--radius-sm);
  color: var(--accent);
  cursor: pointer;
  transition: all var(--transition);
}
.btn-ack svg { width: 14px; height: 14px; }
.btn-ack:hover { background: rgba(var(--accent-rgb),0.18); }
.btn-ack:disabled { opacity: 0.5; cursor: default; }

.ack-by { font-size: 11px; color: var(--text-muted); }

/* Empty state */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 48px 24px;
  text-align: center;
  color: var(--text-muted);
}
.empty-state svg { width: 48px; height: 48px; opacity: 0.3; }
.empty-state p { font-size: 13px; max-width: 280px; }
.empty-state.large { padding: 80px 24px; }
.empty-state h3 { font-size: 16px; font-weight: 600; color: var(--text-secondary); }

.btn-primary {
  display: inline-flex;
  align-items: center;
  background: linear-gradient(135deg, var(--blue-600), var(--accent));
  color: var(--blue-950);
  border: none;
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  padding: 9px 18px;
  cursor: pointer;
  text-decoration: none;
  transition: all var(--transition);
  box-shadow: 0 4px 12px rgba(var(--accent-rgb),0.25);
  margin-top: 8px;
}
.btn-primary:hover { background: linear-gradient(135deg, var(--blue-500), var(--blue-100)); color: var(--blue-950); transform: translateY(-1px); }

/* ════════════════════════════════════════════════
   ADMIN PANEL
   ════════════════════════════════════════════════ */

/* Sidebar owner nav item */
.nav-divider {
  height: 1px;
  background: var(--border);
  margin: 8px 12px;
}
.nav-item-owner { border: 1px solid rgba(var(--accent-rgb),0.2); border-radius: var(--radius-sm); }
.nav-item-owner:hover { background: rgba(var(--accent-rgb),0.08) !important; color: var(--accent) !important; }
.nav-item-owner.active { background: rgba(var(--accent-rgb),0.15) !important; color: var(--accent) !important; border-color: rgba(var(--accent-rgb),0.3) !important; }
.owner-tag {
  margin-left: auto;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--accent);
  background: rgba(var(--accent-rgb),0.12);
  border: 1px solid rgba(var(--accent-rgb),0.25);
  padding: 1px 6px;
  border-radius: 99px;
}

.self-tag {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--accent);
  background: rgba(var(--accent-rgb),0.12);
  border: 1px solid rgba(var(--accent-rgb),0.25);
  padding: 1px 5px;
  border-radius: 99px;
  vertical-align: middle;
}

/* Page layout */
.admin-page { display: flex; flex-direction: column; gap: 20px; }

.admin-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.admin-header > .btn-submit { white-space: nowrap; flex-shrink: 0; }
.admin-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.3px;
}
.admin-sub { font-size: 13px; color: var(--text-muted); margin-top: 3px; }

/* Admin search — reuses .asset-search-* classes */

/* Company section grouping */
.company-section { display: flex; flex-direction: column; gap: 8px; }
.company-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 2px;
}
.company-section-name {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.company-section-count {
  font-size: 12px;
  color: var(--text-muted);
}

/* Org list rows */
.admin-table tr.org-row { cursor: pointer; }
.admin-table tr.org-row:hover td { background: rgba(255,255,255,0.03); }

/* Org search bar inside section card */
.org-search-wrap {
  padding: 12px 22px;
  border-bottom: 1px solid var(--border);
}

.btn-create {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: linear-gradient(135deg, var(--blue-600), var(--accent));
  color: var(--blue-950);
  border: none;
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  padding: 9px 16px;
  cursor: pointer;
  text-decoration: none;
  transition: all var(--transition);
  box-shadow: 0 3px 10px rgba(var(--accent-rgb),0.25);
  white-space: nowrap;
}
.btn-create svg { width: 15px; height: 15px; }
.btn-create:hover { background: linear-gradient(135deg, var(--blue-500), var(--blue-100)); color: var(--blue-950); transform: translateY(-1px); }

.btn-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  padding: 8px 14px;
  text-decoration: none;
  transition: all var(--transition);
  white-space: nowrap;
}
.btn-back svg { width: 14px; height: 14px; }
.btn-back:hover { background: rgba(255,255,255,0.07); color: var(--text-primary); }

/* Toast */
.toast-success {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(var(--low-rgb),0.12);
  border: 1px solid rgba(var(--low-rgb),0.3);
  color: var(--low-text);
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 500;
}
.toast-success svg { width: 16px; height: 16px; flex-shrink: 0; }

/* Admin table */
.admin-table {
  width: 100%;
  border-collapse: collapse;
}
.admin-table thead tr { background: rgba(255,255,255,0.03); }
.admin-table th {
  text-align: left;
  padding: 9px 15px;
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.admin-table td {
  padding: 9px 15px;
  font-size: 12px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.admin-table tr:last-child td { border-bottom: none; }
.admin-table tr:hover td { background: rgba(255,255,255,0.02); }
.row-inactive td { opacity: 0.45; }

.td-muted  { color: var(--text-secondary); }
.td-bold   { font-weight: 600; color: var(--text-primary); }

/* Fixed-layout table — constrains to container, no horizontal overflow.
   Apply .admin-table-fixed on the <table> and .col-clip on cells that
   should truncate with ellipsis instead of stretching the column. */
.admin-table-fixed { table-layout: fixed; }
.admin-table .col-clip {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-cell { display: flex; align-items: center; gap: 10px; }
.user-avatar-sm {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--blue-700), var(--accent));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--blue-950);
  flex-shrink: 0;
}
.user-cell-name { font-size: 13px; font-weight: 500; color: var(--text-primary); }
.user-cell-email { font-size: 11px; color: var(--text-muted); margin-top: 1px; }

.mono-tag {
  font-family: monospace;
  font-size: 12px;
  color: var(--accent);
  background: rgba(var(--accent-rgb),0.08);
  padding: 2px 8px;
  border-radius: 4px;
}

/* Role badges */
.role-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.role-owner   { background: rgba(var(--accent-rgb),0.12); color: var(--accent); border: 1px solid rgba(var(--accent-rgb),0.3); }
.role-company { background: rgba(var(--accent-rgb),0.1);  color: var(--accent); border: 1px solid rgba(var(--accent-rgb),0.25); }
.role-user    { background: rgba(var(--slate-rgb),0.1); color: var(--slate); border: 1px solid rgba(var(--slate-rgb),0.2); }

/* Action buttons */
.action-row { display: flex; align-items: center; gap: 6px; }

.btn-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 78px;
  height: 26px;
  padding: 0;
  box-sizing: border-box;
  border-radius: 5px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  border: 1px solid transparent;
  text-decoration: none;
  transition: all var(--transition);
  white-space: nowrap;
  background: none;
}
.btn-action svg { width: 12px; height: 12px; flex-shrink: 0; }

.btn-action-blue  { color: var(--accent); border-color: rgba(var(--accent-rgb),0.25); background: rgba(var(--accent-rgb),0.07); }
.btn-action-blue:hover  { background: rgba(var(--accent-rgb),0.15); color: var(--blue-100); }

.btn-action-muted { color: var(--text-muted); border-color: rgba(255,255,255,0.18); background: var(--surface-2); }
.btn-action-muted:hover { background: var(--surface-3); color: var(--text-secondary); border-color: rgba(255,255,255,0.28); }

.btn-action-warn  { color: var(--high-text); border-color: rgba(var(--high-rgb),0.25); background: rgba(var(--high-rgb),0.08); }
.btn-action-warn:hover  { background: rgba(var(--high-rgb),0.18); }

.btn-action-green { color: var(--low-text); border-color: rgba(var(--low-rgb),0.25); background: rgba(var(--low-rgb),0.08); }
.btn-action-green:hover { background: rgba(var(--low-rgb),0.18); }

/* Create / Reset form */
.form-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-bottom: 24px;
}

.form-field { display: flex; flex-direction: column; gap: 6px; }

.field-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.field-required { color: var(--crit-text); font-weight: 600; }
.field-optional { color: var(--text-muted); font-weight: 400; text-transform: none; letter-spacing: 0; }

.field-input {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 13px;
  padding: 9px 12px;
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
  width: 100%;
}
.field-input::placeholder { color: var(--text-muted); }
.field-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb),0.15); }

.field-select { cursor: pointer; }
.field-select option { background: var(--bg-card); }

/* ── Autocomplete dropdown ─────────────────────────────────────────────────── */
.autocomplete-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 120;
  background: var(--bg-card);
  border: 1px solid var(--border-hover);
  border-radius: var(--radius-sm);
  margin-top: 3px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.autocomplete-item {
  padding: 9px 12px;
  font-size: 13px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.autocomplete-item:last-child { border-bottom: none; }
.autocomplete-item:hover,
.autocomplete-item.active {
  background: rgba(var(--accent-rgb),0.1);
  color: var(--accent);
}

.form-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 4px;
}

.btn-cancel {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 18px;
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  cursor: pointer;
  text-decoration: none;
  transition: all var(--transition);
}
.btn-cancel:hover { background: rgba(255,255,255,0.07); color: var(--text-primary); }
.btn-cancel svg { width: 15px; height: 15px; }

.btn-submit {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 20px;
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  color: var(--blue-950);
  background: linear-gradient(135deg, var(--blue-600), var(--accent));
  border: none;
  cursor: pointer;
  transition: all var(--transition);
  box-shadow: 0 3px 10px rgba(var(--accent-rgb),0.25);
}
.btn-submit svg { width: 15px; height: 15px; }
.btn-submit:hover { background: linear-gradient(135deg, var(--blue-500), var(--blue-100)); color: var(--blue-950); transform: translateY(-1px); }
a.btn-submit { text-decoration: none; }

.btn-warn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 20px;
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-white);
  background: linear-gradient(135deg, var(--warn-dark), var(--warn-mid));
  border: none;
  cursor: pointer;
  transition: all var(--transition);
  box-shadow: 0 3px 10px rgba(var(--warn-dark-rgb),0.35);
  white-space: nowrap;
}
.btn-warn svg { width: 15px; height: 15px; }
.btn-warn:hover { background: linear-gradient(135deg, var(--warn-mid), var(--high)); transform: translateY(-1px); }

.btn-success {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 20px;
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-white);
  background: linear-gradient(135deg, var(--success-dark), var(--success-mid));
  border: none;
  cursor: pointer;
  transition: all var(--transition);
  box-shadow: 0 3px 10px rgba(var(--success-dark-rgb),0.35);
  white-space: nowrap;
}
.btn-success svg { width: 15px; height: 15px; }
.btn-success:hover { background: linear-gradient(135deg, var(--success-mid), var(--low)); transform: translateY(-1px); }

/* ── Role picker ─────────────────────────────── */
.role-picker-section { margin-bottom: 4px; }

.role-picker {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.role-option { cursor: pointer; }
.role-option input[type="radio"] { display: none; }

.role-option-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 12px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-align: center;
  transition: all var(--transition);
  cursor: pointer;
}
.role-option-card svg { width: 24px; height: 24px; color: var(--text-muted); transition: color var(--transition); }
.role-option-card:hover { border-color: var(--border-hover); background: rgba(255,255,255,0.04); }
.role-option-card:hover svg { color: var(--accent); }

.role-card-selected {
  border-color: var(--accent) !important;
  background: rgba(var(--accent-rgb),0.08) !important;
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb),0.15);
}
.role-card-selected svg { color: var(--accent) !important; }

.role-option-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}
.role-option-desc {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.4;
}

/* ── Company section ─────────────────────────── */
.company-section { margin-top: 4px; }

.section-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0 16px;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}
.section-divider::before,
.section-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

.mode-toggle {
  display: flex;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 3px;
  gap: 3px;
  margin-bottom: 16px;
}
.mode-btn {
  flex: 1;
  padding: 7px 12px;
  border-radius: 6px;
  border: none;
  background: none;
  color: var(--text-muted);
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition);
  white-space: nowrap;
}
.mode-btn:hover { color: var(--text-primary); }
.mode-btn-active {
  background: var(--bg-card);
  color: var(--accent);
  border: 1px solid rgba(var(--accent-rgb),0.2);
  box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}

.company-empty-notice {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  background: rgba(var(--medium-rgb),0.08);
  border: 1px solid rgba(var(--medium-rgb),0.2);
  border-radius: var(--radius-sm);
  color: var(--medium-text);
  font-size: 12px;
}
.company-empty-notice svg { width: 15px; height: 15px; flex-shrink: 0; }

/* ════════════════════════════════════════════════
   SETTINGS PAGE
   ════════════════════════════════════════════════ */
.settings-page { display: flex; flex-direction: column; gap: 20px; }

.settings-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.settings-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow-sm);
  min-width: 0;
}
.settings-card.settings-card-compact { padding: 16px 20px; }

.settings-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.settings-card-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.settings-card-desc {
  font-size: 13px;
  color: var(--text-secondary);
  margin-top: 4px;
  line-height: 1.55;
}

/* ── Toggle Switch ───────────────────────────── */
.toggle-switch {
  position: relative;
  flex-shrink: 0;
  cursor: pointer;
}
.toggle-switch input { display: none; }

.toggle-track {
  display: block;
  width: 48px;
  height: 26px;
  background: rgba(255,255,255,0.08);
  border: 1px solid var(--border);
  border-radius: 99px;
  position: relative;
  transition: background var(--transition), border-color var(--transition);
}
.toggle-switch input:checked ~ .toggle-track {
  background: rgba(var(--accent-rgb),0.3);
  border-color: var(--accent);
}

.toggle-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--text-muted);
  transition: transform var(--transition), background var(--transition);
}
.toggle-switch input:checked ~ .toggle-track .toggle-thumb {
  transform: translateX(22px);
  background: var(--accent);
  box-shadow: 0 0 8px rgba(var(--accent-rgb),0.5);
}

/* ── VIP tier lock ───────────────────────────── */
.vip-badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 8px;
  border-radius: 99px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  background: rgba(255,200,50,0.15);
  color: #f5c842;
  border: 1px solid rgba(255,200,50,0.35);
}
.text-vip { color: #f5c842; }
.toggle-track-vip {
  background: rgba(245,200,66,0.25) !important;
  border-color: #f5c842 !important;
}
.toggle-track-vip .toggle-thumb {
  transform: translateX(22px);
  background: #f5c842 !important;
  box-shadow: 0 0 8px rgba(245,200,66,0.55) !important;
}

/* ── Training status banner ──────────────────── */
.training-status {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 500;
}
.training-status svg { width: 16px; height: 16px; flex-shrink: 0; }

.status-training {
  background: rgba(var(--medium-rgb),0.1);
  border: 1px solid rgba(var(--medium-rgb),0.25);
  color: var(--medium-text);
}
.status-detecting {
  background: rgba(var(--low-rgb),0.08);
  border: 1px solid rgba(var(--low-rgb),0.2);
  color: var(--low-text);
}

/* ── Detection parameters grid ───────────────── */
.settings-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.settings-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 16px;
}

/* colour picker + hex text input pair */
.color-input-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}
.color-swatch {
  width: 36px;
  height: 36px;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 2px;
  background: var(--input-bg);
  cursor: pointer;
  flex-shrink: 0;
}
.color-hex {
  flex: 1;
  font-family: monospace;
  font-size: 13px;
  text-transform: uppercase;
}

.settings-field { display: flex; flex-direction: column; gap: 6px; }

.settings-field-desc {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
  margin-bottom: 4px;
}

.settings-cooldown-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 16px;
  padding: 10px 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-sm);
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.5;
}

.settings-cooldown-note svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--text-muted);
  margin-top: 1px;
}
.settings-cooldown-note code,
.settings-field-desc code {
  background: rgba(255,255,255,0.06);
  border-radius: 3px;
  padding: 1px 5px;
  font-family: monospace;
  font-size: 11px;
}

.number-input-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.number-input {
  width: 100px;
  text-align: center;
  -moz-appearance: textfield;
}
.number-input::-webkit-inner-spin-button,
.number-input::-webkit-outer-spin-button { -webkit-appearance: none; }

.number-unit {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
}

.disk-threshold-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ── Score breakdown table ───────────────────── */
.score-table { display: flex; flex-direction: column; gap: 2px; }

.score-row {
  display: grid;
  grid-template-columns: 1fr 120px 1fr;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 6px;
  transition: background var(--transition);
}
.score-row:hover { background: rgba(255,255,255,0.03); }

.score-factor { font-size: 13px; color: var(--text-primary); font-weight: 500; }
.score-range  { font-size: 13px; color: var(--accent); font-weight: 600; font-family: monospace; }
.score-note   { font-size: 12px; color: var(--text-muted); }

.severity-thresholds {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.sev-th {
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 4px 12px !important;
  border-radius: 99px;
}

/* ── API Keys page ───────────────────────────── */
.key-reveal-banner {
  background: rgba(var(--medium-rgb),0.08);
  border: 1px solid rgba(var(--medium-rgb),0.3);
  border-radius: var(--radius);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.key-reveal-header {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--medium-text);
  font-size: 13px;
  font-weight: 600;
}
.key-reveal-header svg { width: 16px; height: 16px; flex-shrink: 0; }

.key-reveal-value {
  font-family: monospace;
  font-size: 13px;
  color: var(--text-primary);
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(var(--medium-rgb),0.2);
  border-radius: 6px;
  padding: 10px 14px;
  word-break: break-all;
  user-select: all;
}

.btn-copy {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  align-self: flex-start;
  background: rgba(var(--medium-rgb),0.12);
  border: 1px solid rgba(var(--medium-rgb),0.3);
  color: var(--medium-text);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 14px;
  cursor: pointer;
  transition: all var(--transition);
}
.btn-copy svg { width: 14px; height: 14px; }
.btn-copy:hover { background: rgba(var(--medium-rgb),0.2); }

/* keygen form */
.keygen-form { }
.keygen-row {
  display: flex;
  align-items: flex-end;
  gap: 14px;
}
.keygen-field { flex: 1; display: flex; flex-direction: column; gap: 6px; }

/* usage code blocks */
.code-block {
  display: flex;
  flex-direction: column;
  gap: 3px;
  background: rgba(0,0,0,0.35);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px 16px;
  font-family: monospace;
  font-size: 12px;
  color: var(--text-secondary);
}
.code-block span { line-height: 1.7; }
.code-comment { color: var(--text-muted); }
.code-header { color: var(--accent); }
.code-block em { color: var(--blue-100); font-style: normal; }

/* ════════════════════════════════════════════════
   ASSETS PAGE
   ════════════════════════════════════════════════ */
.assets-page { display: flex; flex-direction: column; gap: 20px; }

.assets-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

/* Severity key card */
.severity-key-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 22px;
}
.severity-key-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-muted);
  margin-bottom: 12px;
}
.severity-key-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.sev-key-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sev-key-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 12px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  align-self: flex-start;
}
.sev-key-detail {
  font-size: 12px;
  color: var(--text-muted);
}
.sev-key-detail strong { color: var(--text-secondary); }

/* Asset section card */
.asset-section-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.asset-section-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 22px;
  border-bottom: 1px solid var(--border);
}

.asset-type-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.asset-type-icon svg { width: 18px; height: 18px; }
.asset-type-user     { background: rgba(var(--accent-rgb),0.1); color: var(--accent); }
.asset-type-computer { background: rgba(var(--violet-rgb),0.15); color: var(--violet-text); }

.asset-section-title { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.asset-count-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  white-space: nowrap;
}

.asset-empty {
  padding: 32px 22px;
  font-size: 13px;
  color: var(--text-muted);
}
.asset-empty code {
  font-family: monospace;
  color: var(--accent);
  background: rgba(var(--accent-rgb),0.08);
  padding: 1px 6px;
  border-radius: 4px;
}

/* Asset table */
.asset-table {
  width: 100%;
  border-collapse: collapse;
}
.asset-table thead tr { background: rgba(255,255,255,0.02); }
.asset-table th {
  text-align: left;
  padding: 9px 15px;
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.asset-table td {
  padding: 9px 15px;
  font-size: 12px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.asset-table tr:last-child td { border-bottom: none; }
.asset-table tr.asset-row { cursor: pointer; }
.asset-table tr.asset-row:hover td { background: rgba(255,255,255,0.04); }

/* DN column — truncate long paths */
.col-dn { max-width: 260px; }
.dn-value {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 240px;
  font-family: monospace;
  font-size: 11px;
  color: var(--text-muted);
}
.dn-empty { color: var(--text-muted); }

/* No-match message */
.asset-no-match {
  padding: 20px 22px;
  font-size: 13px;
  color: var(--text-muted);
  font-style: italic;
}

/* ── Asset search bar ─────────────────────────── */
.asset-search-bar {
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}
.asset-search-icon {
  position: absolute;
  left: 14px;
  width: 16px;
  height: 16px;
  color: var(--text-muted);
  pointer-events: none;
}
.asset-search-input {
  width: 100%;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 13px;
  padding: 10px 40px 10px 40px;
  outline: none;
  transition: border-color var(--transition);
}
.asset-search-input:focus { border-color: var(--border-hover); }
.asset-search-input::placeholder { color: var(--text-muted); }
.asset-search-clear {
  position: absolute;
  right: 10px;
  display: none;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
}
.asset-search-clear svg { width: 14px; height: 14px; display: block; }
.asset-search-clear:hover { color: var(--text-primary); }

/* ── Asset detail panel (slide-in from right) ─── */
.asset-detail-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 200;
}
.asset-detail-overlay.visible { display: block; }

.asset-detail-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: 380px;
  max-width: 96vw;
  height: 100vh;
  background: var(--bg-card);
  border-left: 1px solid var(--border);
  z-index: 201;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.25s ease;
  overflow-y: auto;
}
.asset-detail-panel.open { transform: translateX(0); }

.asset-detail-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 20px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.asset-detail-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  font-family: monospace;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.asset-detail-type {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-top: 2px;
}
.asset-detail-close {
  margin-left: auto;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
}
.asset-detail-close svg { width: 14px; height: 14px; }
.asset-detail-close:hover { background: rgba(var(--crit-rgb),0.1); color: var(--crit-text); }

.asset-detail-body { padding: 16px 20px; display: flex; flex-direction: column; gap: 14px; }

.asset-detail-row { display: flex; flex-direction: column; gap: 4px; }
.asset-detail-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-muted);
}
.asset-detail-value {
  font-size: 13px;
  color: var(--text-primary);
}
.asset-detail-dn {
  font-family: monospace;
  font-size: 11px;
  color: var(--accent);
  background: rgba(var(--accent-rgb),0.06);
  border: 1px solid rgba(var(--accent-rgb),0.15);
  border-radius: 6px;
  padding: 8px 10px;
  word-break: break-all;
  line-height: 1.7;
}

/* Detail panel divider + group membership */
.asset-detail-divider {
  height: 1px;
  background: rgba(255,255,255,0.07);
  margin: 12px 0;
}
.asset-groups-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.asset-group-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 500;
  background: rgba(255,255,255,0.06);
  color: var(--text-secondary);
  border: 1px solid rgba(255,255,255,0.1);
  white-space: nowrap;
}

/* Severity badge for detail panel */
.sev-badge { display: inline-block; padding: 3px 10px; border-radius: 99px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; }
.sev-badge-low      { background: rgba(var(--low-rgb),0.15);  color: var(--low-text); }
.sev-badge-medium   { background: rgba(var(--medium-rgb),0.15);  color: var(--medium-text); }
.sev-badge-high     { background: rgba(var(--high-rgb),0.15); color: var(--high-text); }
.sev-badge-critical { background: rgba(var(--crit-rgb),0.15);  color: var(--crit-text); }

.asset-name-cell {
  display: flex;
  align-items: center;
  gap: 10px;
}
.asset-avatar {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--blue-700), var(--accent));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--blue-950);
  flex-shrink: 0;
}
.asset-avatar-comp {
  background: linear-gradient(135deg, var(--violet-deep), var(--violet-dark));
}
.asset-avatar-comp svg { width: 16px; height: 16px; }
.asset-name { font-size: 13px; font-weight: 500; color: var(--text-primary); font-family: monospace; }

/* Severity picker */
.sev-picker {
  display: inline-flex;
  gap: 4px;
  flex-wrap: wrap;
}

.sev-btn {
  padding: 4px 11px;
  border-radius: 99px;
  border: 1px solid transparent;
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  cursor: pointer;
  transition: all var(--transition);
  background: rgba(255,255,255,0.04);
  color: var(--text-muted);
}
.sev-btn:hover { color: var(--text-primary); border-color: var(--border-hover); }

/* Active states per level */
.sev-btn-low.sev-btn-active    { background: rgba(var(--low-rgb),0.15);  color: var(--low-text); border-color: rgba(var(--low-rgb),0.35); }
.sev-btn-medium.sev-btn-active { background: rgba(var(--medium-rgb),0.15);  color: var(--medium-text); border-color: rgba(var(--medium-rgb),0.35); }
.sev-btn-high.sev-btn-active   { background: rgba(var(--high-rgb),0.15); color: var(--high-text); border-color: rgba(var(--high-rgb),0.35); }
.sev-btn-critical.sev-btn-active { background: rgba(var(--crit-rgb),0.15); color: var(--crit-text); border-color: rgba(var(--crit-rgb),0.35); }

/* Hover preview */
.sev-btn-low:hover    { background: rgba(var(--low-rgb),0.08);  color: var(--low-text); }
.sev-btn-medium:hover { background: rgba(var(--medium-rgb),0.08);  color: var(--medium-text); }
.sev-btn-high:hover   { background: rgba(var(--high-rgb),0.08); color: var(--high-text); }
.sev-btn-critical:hover { background: rgba(var(--crit-rgb),0.08); color: var(--crit-text); }

/* ── Password change form ────────────────────── */
.pw-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.pw-input-wrap .field-input {
  padding-right: 40px;
}
.pw-toggle {
  position: absolute;
  right: 10px;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
}
.pw-toggle svg { width: 16px; height: 16px; }
.pw-toggle:hover { color: var(--text-primary); }

.pw-strength-bar {
  height: 4px;
  background: rgba(255,255,255,0.08);
  border-radius: 99px;
  margin-top: 8px;
  overflow: hidden;
}
.pw-strength-fill {
  height: 100%;
  width: 0;
  border-radius: 99px;
  transition: width 0.3s ease, background-color 0.3s ease;
}
.pw-strength-fill.str-weak   { background: var(--crit); }
.pw-strength-fill.str-fair   { background: var(--medium); }
.pw-strength-fill.str-good   { background: var(--accent); }
.pw-strength-fill.str-strong { background: var(--low); }

.pw-strength-label {
  font-size: 11px;
  font-weight: 600;
  margin-top: 4px;
  height: 16px;
}
.pw-strength-label.str-weak   { color: var(--crit); }
.pw-strength-label.str-fair   { color: var(--medium); }
.pw-strength-label.str-good   { color: var(--accent); }
.pw-strength-label.str-strong { color: var(--low); }

.pw-policy-list {
  list-style: none;
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.pol-item {
  font-size: 12px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 7px;
  transition: color 0.2s;
}
.pol-icon { font-size: 13px; width: 14px; text-align: center; flex-shrink: 0; }
.pol-item.pol-pass { color: var(--low); }
.pol-item.pol-fail { color: var(--crit); }

.pw-match-msg {
  font-size: 12px;
  margin-top: 6px;
  height: 16px;
}
.match-ok   { color: var(--low); }
.match-fail { color: var(--crit); }

/* ── Error toast ─────────────────────────────── */
.toast-error {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(var(--crit-rgb),0.12);
  border: 1px solid rgba(var(--crit-rgb),0.3);
  color: var(--crit-text);
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 500;
}
.toast-error svg { width: 16px; height: 16px; flex-shrink: 0; }

/* ── Source badges ───────────────────────────── */
.source-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border-radius: 99px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.source-badge-api       { background: rgba(var(--accent-rgb),0.08); color: var(--accent); border: 1px solid rgba(var(--accent-rgb),0.2); }
.source-badge-manual    { background: rgba(var(--low-rgb),0.1);   color: var(--low-text);         border: 1px solid rgba(var(--low-rgb),0.25); }
/* OS risk badges */
.source-badge-supported { background: rgba(var(--success-rgb),0.1);  color: var(--success-text);         border: 1px solid rgba(var(--success-rgb),0.25); }
.source-badge-aging     { background: rgba(var(--warn-rgb),0.1);  color: var(--warn-light);         border: 1px solid rgba(var(--warn-rgb),0.25); }
.source-badge-eol       { background: rgba(var(--crit-rgb),0.1);   color: var(--crit-light);         border: 1px solid rgba(var(--crit-rgb),0.25); }
.source-badge-critical-os { background: rgba(var(--crit-rgb),0.2); color: var(--crit-text);         border: 1px solid rgba(var(--crit-rgb),0.4); }

/* ── Red delete button ───────────────────────── */
.btn-action-red { color: var(--crit-text); border-color: rgba(var(--crit-rgb),0.25); background: rgba(var(--crit-rgb),0.08); }
.btn-action-red:hover { background: rgba(var(--crit-rgb),0.18); }

/* ── Purple impersonate button ───────────────── */
.btn-action-purple { color: var(--violet-light); border-color: rgba(var(--violet-rgb),0.25); background: rgba(var(--violet-rgb),0.08); }
.btn-action-purple:hover { background: rgba(var(--violet-rgb),0.18); }

/* ── Add asset form grid ─────────────────────── */
.add-asset-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 16px;
  align-items: start;
}

/* ── Type toggle (User / Computer) ──────────────*/
.type-toggle {
  display: flex;
  gap: 6px;
}
.type-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-input);
  color: var(--text-muted);
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition);
}
.type-btn svg { width: 14px; height: 14px; }
.type-btn:hover { color: var(--text-primary); border-color: var(--border-hover); }
.type-btn-active {
  background: rgba(var(--accent-rgb),0.1);
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb),0.12);
}

/* ── Company picker (Owner) ──────────────────── */
.company-picker-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.company-picker-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
}
.company-picker-row { display: flex; gap: 8px; flex-wrap: wrap; }
.company-chip {
  padding: 5px 14px;
  border-radius: 99px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.04);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
  transition: all var(--transition);
}
.company-chip:hover { border-color: var(--border-hover); color: var(--text-primary); }
.company-chip-active {
  background: rgba(var(--accent-rgb),0.1);
  border-color: var(--accent);
  color: var(--accent);
}

/* ── Impersonation banner ────────────────────── */
.impersonation-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(var(--medium-rgb),0.1);
  border-bottom: 1px solid rgba(var(--medium-rgb),0.25);
  color: var(--medium-text);
  padding: 9px 24px;
  font-size: 13px;
  font-weight: 500;
}
.impersonation-banner svg { width: 16px; height: 16px; flex-shrink: 0; }

.btn-revert {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  border-radius: 99px;
  border: 1px solid rgba(var(--medium-rgb),0.4);
  background: rgba(var(--medium-rgb),0.12);
  color: var(--medium-text);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition);
}
.btn-revert svg { width: 13px; height: 13px; }
.btn-revert:hover { background: rgba(var(--medium-rgb),0.22); }

/* ════════════════════════════════════════════════
   SETTINGS — PROFILE CARD
   ════════════════════════════════════════════════ */
.profile-card {
  display: flex;
  align-items: center;
  gap: 20px;
}

.profile-avatar {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--blue-700), var(--accent));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 700;
  color: var(--blue-950);
  flex-shrink: 0;
  box-shadow: 0 4px 16px rgba(var(--accent-rgb),0.2);
}

.profile-details { display: flex; flex-direction: column; gap: 4px; }

.profile-name {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.3px;
}

.profile-email {
  font-size: 13px;
  color: var(--text-secondary);
}

.profile-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 2px;
  flex-wrap: wrap;
}

.profile-since {
  font-size: 12px;
  color: var(--text-muted);
}

/* ════════════════════════════════════════════════
   SETTINGS — SECTION TITLES
   ════════════════════════════════════════════════ */
.settings-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 16px;
}
.settings-section-title svg { width: 16px; height: 16px; color: var(--accent); flex-shrink: 0; }

.settings-subsection-title {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.settings-subsection-title svg { width: 14px; height: 14px; color: var(--text-muted); flex-shrink: 0; }

.settings-empty-text {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 8px;
}

/* Agent Build page helpers */
.settings-section-divider {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}
.settings-cert-info { margin-bottom: 16px; }
.cert-header-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.settings-row-actions { margin-top: 14px; }
.td-mono {
  font-family: monospace;
  font-size: 12px;
}
.td-hash {
  font-size: 11px;
  letter-spacing: 0.3px;
  word-break: break-all;
}

/* ════════════════════════════════════════════════
   SETTINGS — ORG INFO GRID
   ════════════════════════════════════════════════ */
.org-info-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.org-info-item { display: flex; flex-direction: column; gap: 5px; }

.org-info-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
}

.org-info-value {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
}

/* ════════════════════════════════════════════════
   SETTINGS — LOGIN HISTORY TABLE
   ════════════════════════════════════════════════ */
.login-history-table { font-size: 12px; }

.login-time { font-family: monospace; font-size: 12px; }

.login-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.login-status svg { width: 11px; height: 11px; }

.login-success {
  background: rgba(var(--low-rgb),0.12);
  color: var(--low-text);
  border: 1px solid rgba(var(--low-rgb),0.25);
}

.login-failed {
  background: rgba(var(--crit-rgb),0.12);
  color: var(--crit-text);
  border: 1px solid rgba(var(--crit-rgb),0.25);
}

.login-ua {
  color: var(--text-muted);
  font-size: 11px;
  max-width: 260px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ════════════════════════════════════════════════
   TOPBAR CLOCK LINK
   ════════════════════════════════════════════════ */
.topbar-clock-link {
  text-decoration: none;
  cursor: pointer;
  border-radius: 6px;
  padding: 4px 8px;
  transition: background var(--transition), color var(--transition);
}
.topbar-clock-link:hover {
  background: rgba(255,255,255,0.06);
  color: var(--text-primary);
}

/* ════════════════════════════════════════════════
   CONFIRMATION MODAL
   ════════════════════════════════════════════════ */
.modal-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(3px);
  z-index: 1000;
  align-items: center;
  justify-content: center;
}
.modal-backdrop.modal-open {
  display: flex;
}

.modal-box {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px 28px 24px;
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
  animation: modal-in 0.15s ease;
}

@keyframes modal-in {
  from { opacity: 0; transform: scale(0.96) translateY(8px); }
  to   { opacity: 1; transform: scale(1)    translateY(0);   }
}

.modal-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.modal-icon svg { width: 24px; height: 24px; }
.modal-icon-danger {
  background: rgba(var(--crit-rgb),0.15);
  color: var(--crit-text);
  border: 1px solid rgba(var(--crit-rgb),0.3);
}
.modal-icon-warn {
  background: rgba(var(--high-rgb),0.15);
  color: var(--high-text);
  border: 1px solid rgba(var(--high-rgb),0.3);
}
.modal-icon-success {
  background: rgba(var(--low-rgb),0.15);
  color: var(--low-text);
  border: 1px solid rgba(var(--low-rgb),0.3);
}

.modal-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  text-align: center;
  letter-spacing: -0.2px;
}

.modal-body {
  font-size: 13px;
  color: var(--text-secondary);
  text-align: center;
  line-height: 1.6;
}
.modal-body strong { color: var(--text-primary); }

.modal-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 6px;
  width: 100%;
}

.btn-modal-danger {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 18px;
  border-radius: var(--radius-sm);
  background: rgba(var(--crit-rgb),0.15);
  border: 1px solid rgba(var(--crit-rgb),0.4);
  color: var(--crit-text);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition);
}
.btn-modal-danger svg { width: 14px; height: 14px; }
.btn-modal-danger:hover {
  background: rgba(var(--crit-rgb),0.25);
  border-color: rgba(var(--crit-rgb),0.6);
  color: var(--crit-light);
}
.btn-modal-warn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 18px; border-radius: var(--radius-sm);
  background: rgba(var(--high-rgb),0.15); border: 1px solid rgba(var(--high-rgb),0.4);
  color: var(--high-text); font-family: inherit; font-size: 13px; font-weight: 600;
  cursor: pointer; transition: all var(--transition);
}
.btn-modal-warn svg { width: 14px; height: 14px; }
.btn-modal-warn:hover { background: rgba(var(--high-rgb),0.25); border-color: rgba(var(--high-rgb),0.6); color: var(--high-light); }

.btn-modal-success {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 18px; border-radius: var(--radius-sm);
  background: rgba(var(--low-rgb),0.15); border: 1px solid rgba(var(--low-rgb),0.4);
  color: var(--low-text); font-family: inherit; font-size: 13px; font-weight: 600;
  cursor: pointer; transition: all var(--transition);
}
.btn-modal-success svg { width: 14px; height: 14px; }
.btn-modal-success:hover { background: rgba(var(--low-rgb),0.25); border-color: rgba(var(--low-rgb),0.6); color: var(--low-light); }

/* ── Form modal guidance toggle chevron ─────── */
details[open] .guide-chevron { transform: rotate(180deg); }

/* ── MFA / ForceChangePassword pages ─────────── */

/* Wider card variant for enrollment (QR + text) */
.mfa-card { max-width: 460px; }
.mfa-card-wide { max-width: 520px; }

/* Alternative icon colours */
.mfa-icon-shield {
  background: none;
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb),0.2);
}
.mfa-icon-key {
  background: linear-gradient(135deg, var(--blue-800), var(--warn));
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.2);
}

/* Steps list */
.mfa-steps {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 24px;
  padding: 0;
}
.mfa-steps li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
}
.step-num {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(var(--accent-rgb),0.14);
  border: 1px solid rgba(var(--accent-rgb),0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
  margin-top: 1px;
}

/* QR code container */
.mfa-qr-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}
.mfa-qr-box {
  background: var(--color-white);
  padding: 12px;
  border-radius: var(--radius-sm);
  display: inline-flex;
  box-shadow: var(--shadow-sm);
}
.mfa-qr-box svg,
.mfa-qr-img {
  width: 180px;
  height: 180px;
  display: block;
}

/* Manual key display */
.mfa-manual-key {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  margin-bottom: 4px;
}
.mfa-manual-label {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.mfa-key-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.mfa-key-code {
  display: block;
  font-family: 'Courier New', monospace;
  font-size: 11px;
  color: var(--accent);
  letter-spacing: 0.05em;
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mfa-copy-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  background: rgba(var(--accent-rgb),0.1);
  border: 1px solid rgba(var(--accent-rgb),0.22);
  border-radius: 6px;
  color: var(--accent);
  font-size: 12px;
  padding: 5px 10px;
  cursor: pointer;
  transition: background var(--transition);
  flex-shrink: 0;
}
.mfa-copy-btn:hover { background: rgba(var(--accent-rgb),0.2); }
.mfa-copy-btn svg { width: 14px; height: 14px; }

/* OTP hint banner */
.mfa-otp-hint {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 20px;
  line-height: 1.5;
}
.mfa-otp-hint svg { width: 18px; height: 18px; color: var(--accent); flex-shrink: 0; }

/* Large centered OTP input */
.otp-input {
  text-align: center;
  letter-spacing: 0.35em;
  font-size: 22px;
  font-family: 'Courier New', monospace;
  font-weight: 700;
  color: var(--accent);
}

/* Field label inside forms */
.mfa-field-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 6px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Back link */
.mfa-back-link {
  text-align: center;
  margin-top: 16px;
  font-size: 13px;
}
.mfa-back-link a {
  color: var(--text-muted);
  text-decoration: none;
  transition: color var(--transition);
}
.mfa-back-link a:hover { color: var(--accent); }

/* pol-ok / pol-pass — both used across different views */
.pol-item.pol-ok,
.pol-item.pol-pass { color: var(--success); }

/* ════════════════════════════════════════════════
   SEARCH PAGE
   ════════════════════════════════════════════════ */
.search-page { display: flex; flex-direction: column; gap: 18px; }

/* ── Mode toggle (Alerts / Events) ──────────── */
.search-mode-toggle {
  display: flex;
  gap: 4px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 4px;
  width: fit-content;
}
.mode-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 18px;
  border-radius: calc(var(--radius) - 2px);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  text-decoration: none;
  transition: background var(--transition), color var(--transition);
}
.mode-toggle-btn svg { width: 14px; height: 14px; flex-shrink: 0; }
.mode-toggle-btn:hover { background: rgba(255,255,255,0.05); color: var(--text-primary); }
.mode-toggle-active {
  background: rgba(var(--accent-rgb),0.12);
  color: var(--accent);
}
.mode-toggle-active:hover { background: rgba(var(--accent-rgb),0.18); color: var(--accent); }

/* ── Event ID badge ─────────────────────────── */
.ev-id-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 99px;
  background: rgba(var(--accent-rgb),0.08);
  border: 1px solid rgba(var(--accent-rgb),0.2);
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
  font-family: monospace;
  white-space: nowrap;
}

/* ── Search bar ─────────────────────────────── */
.search-form { width: 100%; }
.search-input-row { position: relative; }

.search-input-wrap {
  display: flex;
  align-items: center;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.search-input-wrap:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb),0.15);
}

.search-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--text-muted);
  margin-left: 16px;
  pointer-events: none;
}

.search-input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  color: var(--text-primary);
  font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
  font-size: 14px;
  padding: 14px 12px;
  min-width: 0;
}
.search-input::placeholder { color: var(--text-muted); font-family: inherit; }

.search-clear {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0 10px;
  display: flex;
  align-items: center;
  transition: color var(--transition);
}
.search-clear svg { width: 15px; height: 15px; }
.search-clear:hover { color: var(--text-primary); }

.search-submit {
  background: var(--blue-600);
  border: none;
  color: var(--blue-950);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  padding: 0 22px;
  height: 100%;
  min-height: 48px;
  cursor: pointer;
  transition: background var(--transition);
  white-space: nowrap;
  border-left: 1px solid rgba(255,255,255,0.08);
}
.search-submit:hover { background: var(--accent); }

/* ── Autocomplete dropdown ──────────────────── */
.ac-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  z-index: 200;
  overflow: hidden;
  max-height: 220px;
  overflow-y: auto;
}

.ac-item {
  padding: 9px 16px;
  font-size: 13px;
  font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.ac-item:hover,
.ac-item-active {
  background: rgba(var(--accent-rgb),0.08);
  color: var(--accent);
}

/* ── Quick chips ────────────────────────────── */
.search-chips {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.chip-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
}
.search-chip {
  padding: 5px 12px;
  border-radius: 99px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.04);
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition);
  white-space: nowrap;
}
.search-chip:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(var(--accent-rgb),0.07);
}

/* ── Help section ───────────────────────────── */
.search-help {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.search-help[open] .help-chevron { transform: rotate(180deg); }

.search-help-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: color var(--transition);
}
.search-help-summary::-webkit-details-marker { display: none; }
.search-help-summary:hover { color: var(--text-primary); }
.search-help-summary svg { width: 16px; height: 16px; flex-shrink: 0; }
.help-chevron { margin-left: auto; transition: transform 0.2s ease; }

.search-help-body {
  padding: 0 20px 20px;
  border-top: 1px solid var(--border);
}

.help-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  padding-top: 18px;
}

.help-section-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.7px;
  margin-bottom: 10px;
}

.help-table { width: 100%; border-collapse: collapse; }
.help-table tr { border-bottom: 1px solid rgba(255,255,255,0.05); }
.help-table tr:last-child { border-bottom: none; }
.help-table td { padding: 6px 0; font-size: 12px; color: var(--text-secondary); vertical-align: top; }
.help-table td:first-child { padding-right: 12px; }

.help-code {
  font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
  color: var(--accent);
  white-space: nowrap;
  font-size: 12px;
}

.help-example-row { padding: 4px 0; }
.help-example {
  background: rgba(var(--accent-rgb),0.06);
  border: 1px solid rgba(var(--accent-rgb),0.18);
  border-radius: 6px;
  color: var(--accent);
  font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
  font-size: 11px;
  padding: 5px 10px;
  cursor: pointer;
  transition: all var(--transition);
  text-align: left;
  width: 100%;
}
.help-example:hover {
  background: rgba(var(--accent-rgb),0.12);
  border-color: var(--accent);
}

/* ── Results area ───────────────────────────── */
.search-results-header {
  display: flex;
  align-items: center;
  gap: 12px;
}
.search-results-count {
  font-size: 13px;
  color: var(--text-muted);
}
.search-results-for { color: var(--text-muted); }
.search-query-badge {
  display: inline-block;
  background: rgba(var(--accent-rgb),0.08);
  border: 1px solid rgba(var(--accent-rgb),0.22);
  border-radius: 6px;
  color: var(--accent);
  font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
  font-size: 12px;
  padding: 1px 8px;
}

.sr-ts     { color: var(--text-muted); white-space: nowrap; }
.sr-title  { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr-action { text-align: right; white-space: nowrap; width: 1%; }
.sr-view-btn { font-size: 11px; padding: 4px 9px; }

/* ── Severity badges ────────────────────────── */
.sev-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  white-space: nowrap;
}
.sev-critical { background: rgba(var(--crit-rgb),0.12);  color: var(--crit-text); border: 1px solid rgba(var(--crit-rgb),0.25); }
.sev-high     { background: rgba(var(--high-rgb),0.12); color: var(--high-text); border: 1px solid rgba(var(--high-rgb),0.25); }
.sev-medium   { background: rgba(var(--medium-rgb),0.12);  color: var(--medium-text); border: 1px solid rgba(var(--medium-rgb),0.25); }
.sev-low      { background: rgba(var(--low-rgb),0.12);  color: var(--low-text); border: 1px solid rgba(var(--low-rgb),0.25); }
.sev-ok       { background: rgba(var(--success-rgb),0.12); color: var(--success-acked); border: 1px solid rgba(var(--success-rgb),0.25); }
.td-red   { color: var(--crit-text); }
.td-amber { color: var(--medium-text); }

/* ── Empty / no results ─────────────────────── */
.search-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 60px 20px;
  color: var(--text-muted);
  text-align: center;
}
.search-empty svg { width: 48px; height: 48px; opacity: 0.35; }
.search-empty p { font-size: 14px; max-width: 400px; line-height: 1.6; }
.search-empty strong { color: var(--text-secondary); }


/* ── Search loading overlay ─────────────────── */
.search-loading-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 8000;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 16px;
  background: rgba(17, 17, 17, 0.82);
  backdrop-filter: blur(3px);
}
.search-spinner {
  width: 36px;
  height: 36px;
  border: 3px solid rgba(var(--accent-rgb), 0.18);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: searchSpin 0.7s linear infinite;
}
@keyframes searchSpin {
  to { transform: rotate(360deg); }
}
.search-loading-text {
  font-size: 13px;
  color: var(--accent);
  letter-spacing: 0.06em;
  font-weight: 500;
}

/* ── API key reveal ──────────────────────────── */
.key-reveal-cell {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.key-eye-btn {
  display: inline-flex;
  align-items: center;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 3px;
  border-radius: 4px;
  transition: color var(--transition);
  flex-shrink: 0;
}
.key-eye-btn svg { width: 14px; height: 14px; display: block; }
.key-eye-btn:hover { color: var(--accent); }

/* ════════════════════════════════════════════════
   DISPOSITION TAGS & BUTTONS
   ════════════════════════════════════════════════ */

/* Inline tag shown on feed items */
.disp-tag {
  display: inline-flex;
  align-items: center;
  padding: 1px 8px;
  border-radius: 99px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  white-space: nowrap;
  flex-shrink: 0;
}
.disp-tag-open        { background: rgba(var(--accent-rgb),0.08); color: var(--accent); border: 1px solid rgba(var(--accent-rgb),0.25); }
.disp-tag-resolved    { background: rgba(var(--low-rgb),0.12);  color: var(--low-text); border: 1px solid rgba(var(--low-rgb),0.25); }
.disp-tag-malicious   { background: rgba(var(--crit-rgb),0.12);  color: var(--crit-text); border: 1px solid rgba(var(--crit-rgb),0.25); }
.disp-tag-investigate { background: rgba(var(--medium-rgb),0.12);  color: var(--medium-text); border: 1px solid rgba(var(--medium-rgb),0.25); }
.disp-tag-closed      { background: rgba(100,116,139,.15); color: #94a3b8; border: 1px solid rgba(100,116,139,.3); }

/* Disposition section in detail panel */
.detail-disposition-section {
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
}
.detail-disposition-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-muted);
  margin-bottom: 10px;
}
/* ── Actions list (detail panel) ─────────────── */
.action-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.action-divider {
  height: 1px;
  background: var(--border);
  margin: 6px 0;
}
.action-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  background: transparent;
  font-family: inherit;
  cursor: pointer;
  transition: all var(--transition);
  text-align: left;
  position: relative;
}
.action-row:hover { background: rgba(255,255,255,0.04); border-color: var(--border); }

/* Colored icon wrapper */
.aicon-wrap {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.aicon-wrap svg { width: 13px; height: 13px; }
.aicon-open        { background: rgba(var(--accent-rgb),0.1); color: var(--accent); }
.aicon-resolved    { background: rgba(var(--low-rgb),0.12);  color: var(--low-text); }
.aicon-malicious   { background: rgba(var(--crit-rgb),0.12);  color: var(--crit-text); }
.aicon-investigate { background: rgba(var(--medium-rgb),0.12);  color: var(--medium-text); }
.aicon-close       { background: rgba(var(--slate-dark-rgb),0.1); color: var(--slate); }
.aicon-delete      { background: rgba(var(--crit-rgb),0.08);  color: var(--crit-text); }

/* Action text block */
.action-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.action-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.2;
}
.action-desc {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.3;
}

/* Hover tints per action type */
.action-open:hover        { background: rgba(var(--accent-rgb),0.05); }
.action-resolved:hover    { background: rgba(var(--low-rgb),0.06);  }
.action-malicious:hover   { background: rgba(var(--crit-rgb),0.06);  }
.action-investigate:hover { background: rgba(var(--medium-rgb),0.06);  }
.action-close:hover       { background: rgba(var(--slate-dark-rgb),0.08); }
.action-delete:hover      { background: rgba(var(--crit-rgb),0.06);  }

/* Active (selected disposition) */
.action-open.action-active        { background: rgba(var(--accent-rgb),0.08); border-color: rgba(var(--accent-rgb),0.22); }
.action-resolved.action-active    { background: rgba(var(--low-rgb),0.1);   border-color: rgba(var(--low-rgb),0.25);  }
.action-malicious.action-active   { background: rgba(var(--crit-rgb),0.1);   border-color: rgba(var(--crit-rgb),0.25);  }
.action-investigate.action-active { background: rgba(var(--medium-rgb),0.1);   border-color: rgba(var(--medium-rgb),0.25);  }

/* Left-edge accent bar on active rows */
.action-row.action-active { padding-left: 12px; }
.action-row.action-active::before {
  content: '';
  position: absolute;
  left: 0; top: 5px; bottom: 5px;
  width: 3px;
  border-radius: 3px;
}
.action-open.action-active::before        { background: var(--accent); }
.action-resolved.action-active::before    { background: var(--low-text); }
.action-malicious.action-active::before   { background: var(--crit-text); }
.action-investigate.action-active::before { background: var(--medium-text); }


/* ─── Logs tabs ──────────────────────────────── */
.logs-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0;
}
.logs-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-muted);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  margin-bottom: -1px;
  transition: color var(--transition), border-color var(--transition);
}
.logs-tab:hover { color: var(--text-primary); }
.logs-tab-active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.logs-tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  background: rgba(var(--accent-rgb),0.1);
  color: var(--accent);
  border-radius: 10px;
  font-size: 0.75rem;
  font-weight: 600;
}
.card-subtitle {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-left: auto;
}

/* ─── Responsive ─────────────────────────────── */
@media (max-width: 1024px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .dashboard-grid { grid-template-columns: 1fr; }
  .help-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .strip-divider { display: none; }
  .strip-stat { padding: 6px 12px; }
  .strip-val { font-size: 18px; }
  /* Hide Score column on mid screens */
  #alertsTable th:nth-child(3),
  #alertsTable td:nth-child(3) { display: none; }
}

@media (max-width: 768px) {
  /* ── Sidebar: slide off-screen, toggled via JS ── */
  :root { --sidebar-w: 0px; }
  .sidebar {
    width: 260px;
    left: -260px;
    /* z-index already 200 from base rule */
  }
  .sidebar.mobile-open {
    left: 0;
    box-shadow: 6px 0 32px rgba(0,0,0,.55);
  }
  .sidebar-toggle { display: flex; }

  /* ── Main content: full width ─────────────────── */
  .main-wrapper { margin-left: 0; }

  /* ── Topbar ───────────────────────────────────── */
  .topbar { padding: 0 14px; gap: 8px; }
  .topbar-right { gap: 10px; }
  .page-title { font-size: 15px; }
  .user-sep, .user-role { display: none; }
  .user-name { font-size: 12px; }
  .topbar-time { display: none; }

  /* ── Page content padding ─────────────────────── */
  .page-content { padding: 14px 12px; }

  /* ── Settings cards ───────────────────────────── */
  .settings-page { gap: 14px; }
  .settings-card { padding: 16px; }
  .settings-grid { grid-template-columns: 1fr; }
  .settings-grid-3 { grid-template-columns: 1fr 1fr; }

  /* ── Stats strip: horizontal scroll ─────────────*/
  .stats-strip {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    padding-bottom: 4px;
  }
  .strip-stat { flex-shrink: 0; }
  .stats-grid { grid-template-columns: 1fr 1fr; }

  /* ── Tables: horizontal scroll ────────────────── */
  .admin-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }
  .admin-table thead,
  .admin-table tbody,
  .admin-table tr { display: table-row-group; }
  .admin-table thead { display: table-header-group; }
  .admin-table tr { display: table-row; }
  .admin-table th,
  .admin-table td { display: table-cell; }

  /* Alert-specific table column hiding */
  #alertsTable th:nth-child(4),
  #alertsTable td:nth-child(4) { display: none; }
  #alertsTable .col-clip { max-width: 180px; white-space: normal; }

  /* ── Alert toolbar ────────────────────────────── */
  .alerts-toolbar { flex-direction: column; align-items: stretch; gap: 8px; }
  .toolbar-filters { width: 100%; flex-wrap: wrap; }
  .toolbar-actions { width: 100%; justify-content: flex-end; }
  .filter-input { max-width: 100%; width: 100%; }

  /* ── Dashboard grid ───────────────────────────── */
  .dashboard-grid { grid-template-columns: 1fr; }
  .help-grid { grid-template-columns: 1fr; }

  /* ── Form actions: keep row but allow wrap ───── */
  .form-actions { flex-wrap: wrap; gap: 8px; }

  /* ── Settings card header toggle ─────────────── */
  .settings-card-header { flex-wrap: wrap; gap: 10px; }

  /* ── Profile / org info grid ──────────────────── */
  .org-info-grid { grid-template-columns: 1fr; }

  /* ── Modal full-width on mobile ───────────────── */
  .modal-box { width: calc(100vw - 32px); max-width: 100%; margin: 16px; }

  /* ── Login history table ──────────────────────── */
  .login-history-table { font-size: 12px; }

  /* ── Alert detail overlay: full-width on mobile ── */
  .alert-detail-panel { width: 100%; }
}

@media (max-width: 480px) {
  /* ── Phone-specific refinements ───────────────── */
  .topbar { padding: 0 12px; }
  .page-title { font-size: 14px; max-width: 140px; }
  .user-avatar { width: 28px; height: 28px; font-size: 11px; }
  .page-content { padding: 12px 10px; }
  .settings-card { padding: 14px 12px; }
  .status-indicator { gap: 6px; font-size: 12px; }
  .btn-submit, .btn-cancel { font-size: 13px; padding: 9px 14px; }
  .strip-val { font-size: 16px; }
  .strip-lbl { font-size: 10px; }
  .stats-grid { grid-template-columns: 1fr; }

  /* ── Login page ────────────────────────────────── */
  .login-card { padding: 28px 20px 24px; border-radius: 16px; }
  .login-container { padding: 24px 12px; }
  .login-brand { margin-bottom: 20px; }
  .blob-1, .blob-2 { opacity: 0.1; }
}

/* ════════════════════════════════════════════════
   ALERT NOTES
   ════════════════════════════════════════════════ */
.notes-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 14px;
  max-height: 260px;
  overflow-y: auto;
}

.note-item {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  padding: 12px 14px;
}

.note-item-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.note-author {
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
}

.note-time {
  font-size: 11px;
  color: var(--text-muted);
  margin-left: auto;
}

.note-text {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
}

.note-mention {
  color: var(--accent);
  font-weight: 600;
}

.notes-empty {
  font-size: 12px;
  color: var(--text-muted);
  text-align: center;
  padding: 14px 0;
}

/* Compose area */
.note-compose {
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
}

.note-input-wrap {
  position: relative;
}

.note-textarea {
  width: 100%;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 13px;
  padding: 10px 12px;
  resize: vertical;
  min-height: 64px;
  outline: none;
  transition: border-color var(--transition);
  box-sizing: border-box;
}
.note-textarea:focus { border-color: var(--border-hover); }
.note-textarea::placeholder { color: var(--text-muted); }

/* Mention autocomplete dropdown */
.mention-dropdown {
  background: var(--bg-card);
  border: 1px solid var(--border-hover);
  border-radius: var(--radius-sm);
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  max-height: 240px;
  overflow-y: auto;
}

.mention-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  cursor: pointer;
  transition: background var(--transition);
}
.mention-item:hover,
.mention-item.mention-active {
  background: rgba(255,255,255,0.05);
}

.mention-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--blue-700), var(--accent));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--blue-950);
  flex-shrink: 0;
}

.mention-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

.mention-email {
  font-size: 11px;
  color: var(--text-muted);
  margin-left: auto;
}

.btn-note-submit {
  align-self: flex-end;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  background: rgba(var(--accent-rgb),0.1);
  border: 1px solid rgba(var(--accent-rgb),0.28);
  border-radius: var(--radius-sm);
  color: var(--accent);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition);
}
.btn-note-submit:hover { background: rgba(var(--accent-rgb),0.2); }
.btn-note-submit:disabled { opacity: 0.5; cursor: not-allowed; }

/* ════════════════════════════════════════════════
   ALERT RATE — RECIPIENT CHIPS + AUTOCOMPLETE
   ════════════════════════════════════════════════ */

.recipient-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 10px;
  min-height: 0;
}

.recipient-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 8px;
  border-radius: 99px;
  background: rgba(var(--accent-rgb),0.1);
  border: 1px solid rgba(var(--accent-rgb),0.25);
  color: var(--accent);
  font-size: 12px;
  font-weight: 500;
}

.chip-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--accent);
  padding: 0;
  margin-left: 2px;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  transition: background var(--transition), color var(--transition);
}
.chip-remove:hover { background: rgba(var(--crit-rgb),0.15); color: var(--crit-text); }

.recipient-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 100;
  background: var(--bg-card);
  border: 1px solid var(--border-hover);
  border-radius: var(--radius-sm);
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  max-height: 220px;
  overflow-y: auto;
}

.recipient-dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  cursor: pointer;
  font-size: 13px;
  transition: background var(--transition);
}
.recipient-dropdown-item:hover { background: rgba(255,255,255,0.05); }

/* ════════════════════════════════════════════════
   SHARE BY EMAIL — TAG INPUT
   ════════════════════════════════════════════════ */

.email-tag-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-height: 38px;
  padding: 5px 10px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: text;
  transition: border-color var(--transition);
  margin-bottom: 8px;
}
.email-tag-wrap:focus-within { border-color: var(--border-hover); }

.email-tags { display: contents; }

.email-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px 2px 8px;
  border-radius: 99px;
  background: rgba(var(--accent-rgb),0.1);
  border: 1px solid rgba(var(--accent-rgb),0.28);
  color: var(--accent);
  font-size: 12px;
  font-weight: 500;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.email-tag-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--accent);
  padding: 0;
  margin-left: 2px;
  font-size: 14px;
  line-height: 1;
  border-radius: 50%;
  width: 14px;
  height: 14px;
  transition: background var(--transition), color var(--transition);
}
.email-tag-remove:hover { background: rgba(var(--crit-rgb),0.15); color: var(--crit-text); }

.email-tag-input {
  flex: 1 1 120px;
  min-width: 80px;
  background: none;
  border: none;
  outline: none;
  color: var(--text-primary);
  font-size: 13px;
  padding: 2px 0;
}
.email-tag-input::placeholder { color: var(--text-muted); }

.btn-email-send {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  background: rgba(var(--accent-rgb),0.1);
  border: 1px solid rgba(var(--accent-rgb),0.28);
  border-radius: var(--radius-sm);
  color: var(--accent);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition);
}
.btn-email-send:hover { background: rgba(var(--accent-rgb),0.2); border-color: rgba(var(--accent-rgb),0.5); }
.btn-email-send:disabled { opacity: 0.5; cursor: not-allowed; }

.email-hint {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 5px;
  min-height: 14px;
}

.email-autocomplete {
  /* Placeholder — actual dropdown uses #emailDropdown (fixed-position) */
  display: none;
}

/* ════════════════════════════════════════════════
   ATTACK PATTERN LIBRARY MODAL
   ════════════════════════════════════════════════ */

/* Wide modal override */
.lib-modal {
  max-width: 820px;
  width: calc(100vw - 32px);
  max-height: calc(100vh - 48px);
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}

/* ── Header ── */
.lib-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 20px 24px 14px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.lib-header-icon {
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 10px;
  background: rgba(var(--success-rgb),0.12);
  border: 1px solid rgba(var(--success-rgb),0.28);
  color: var(--success-acked);
}
.lib-header-icon svg { width: 20px; height: 20px; }
.lib-header-body { flex: 1; min-width: 0; }
.lib-header-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.2px;
}
.lib-header-sub {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}
.lib-header-sub strong { color: var(--text-secondary); }
.lib-close-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: none;
  border: 1px solid var(--border);
  color: var(--text-muted);
  cursor: pointer;
  flex-shrink: 0;
  transition: all var(--transition);
}
.lib-close-btn:hover { background: rgba(255,255,255,0.07); color: var(--text-primary); }
.lib-close-btn svg { width: 14px; height: 14px; }

/* ── Toolbar ── */
.lib-toolbar {
  padding: 10px 24px;
  border-bottom: 1px solid var(--border);
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  flex-shrink: 0;
}
.lib-toolbar .field-input { height: 32px; font-size: 12px; }
.lib-search { flex: 1; min-width: 160px; max-width: 280px; }
.lib-type-filter { width: 148px; }
.lib-sev-filter { width: 130px; }
.lib-add-entry-btn { margin-left: auto; padding: 6px 14px; font-size: 12px; }

/* ── Add-to-library panel ── */
.lib-add-panel {
  display: none;
  padding: 14px 24px;
  border-bottom: 1px solid var(--border);
  background: rgba(var(--success-rgb),0.04);
  flex-shrink: 0;
}
.lib-add-panel-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--success-acked);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 10px;
}
.lib-add-panel-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 16px;
  margin-bottom: 12px;
}
.lib-add-panel-desc { margin-bottom: 12px; }
.lib-add-panel-footer { display: flex; align-items: center; gap: 10px; }
.lib-add-panel-regex {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-muted);
  cursor: pointer;
  user-select: none;
}
.lib-add-panel-regex input { width: 13px; height: 13px; accent-color: var(--accent); }
.lib-add-error { flex: 1; font-size: 12px; color: var(--crit-text); }
.lib-save-btn { height: 32px; font-size: 12px; padding: 0 14px; }

/* ── Scrollable rule list ── */
.lib-list { overflow-y: auto; flex: 1; }

/* ── Individual row ── */
.lib-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 24px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  transition: background var(--transition);
}
.lib-row:hover { background: rgba(255,255,255,0.025); }
.lib-row:last-child { border-bottom: none; }
.lib-row-body { flex: 1; min-width: 0; }
.lib-row-meta {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  margin-bottom: 2px;
}
.lib-row-label { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.lib-badge-regex {
  font-size: 10px;
  font-weight: 600;
  color: var(--accent);
  background: rgba(var(--accent-rgb),0.1);
  border: 1px solid rgba(var(--accent-rgb),0.22);
  padding: 1px 5px;
  border-radius: 4px;
}
.lib-badge-custom {
  font-size: 10px;
  font-weight: 600;
  color: var(--success-acked);
  background: rgba(var(--success-rgb),0.1);
  border: 1px solid rgba(var(--success-rgb),0.25);
  padding: 1px 5px;
  border-radius: 4px;
}
.lib-row-type {
  font-size: 11px;
  color: var(--text-muted);
  background: rgba(255,255,255,0.05);
  padding: 1px 5px;
  border-radius: 4px;
}
.lib-row .severity-badge { font-size: 10px; padding: 1px 6px; }
.lib-code {
  font-size: 11px;
  color: var(--accent);
  background: rgba(var(--accent-rgb),0.08);
  padding: 1px 6px;
  border-radius: 4px;
  display: inline-block;
  margin-bottom: 2px;
  font-family: monospace;
}
.lib-row-desc { font-size: 11px; color: var(--text-muted); line-height: 1.4; }
.lib-row-actions {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-shrink: 0;
  margin-top: 1px;
}
.lib-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 26px;
  padding: 0 10px;
  border-radius: 5px;
  background: rgba(var(--accent-rgb),0.1);
  border: 1px solid rgba(var(--accent-rgb),0.25);
  color: var(--accent);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition);
  white-space: nowrap;
}
.lib-add-btn:hover:not(:disabled) { background: rgba(var(--accent-rgb),0.2); }
.lib-add-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.lib-add-btn svg { width: 11px; height: 11px; }
.lib-add-btn-added { background: rgba(var(--success-rgb),0.15) !important; border-color: rgba(var(--success-rgb),0.35) !important; color: var(--success-acked) !important; }
.lib-add-btn-exists { opacity: 0.5; }
.lib-del-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 5px;
  background: rgba(var(--crit-rgb),0.1);
  border: 1px solid rgba(var(--crit-rgb),0.2);
  color: var(--crit-text);
  cursor: pointer;
  flex-shrink: 0;
  transition: all var(--transition);
}
.lib-del-btn:hover { background: rgba(var(--crit-rgb),0.2); }
.lib-del-btn svg { width: 12px; height: 12px; }

/* ── Footer ── */
.lib-footer {
  padding: 12px 24px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  flex-wrap: wrap;
}
.lib-sel-count { font-size: 12px; color: var(--text-muted); }
.lib-footer-actions { margin-left: auto; display: flex; gap: 8px; }

/* ── Empty state ── */
.lib-empty {
  padding: 40px 24px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
}

/* ════════════════════════════════════════════════
   SERVER SETTINGS PAGE
   ════════════════════════════════════════════════ */

/* ── Server info grid ────────────────────────── */
.server-info-grid { display: flex; flex-direction: column; }
.server-info-row {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.server-info-row:last-child { border-bottom: none; }
.server-info-label {
  width: 170px;
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.server-info-value { font-size: 13px; color: var(--text-primary); word-break: break-all; }
.server-info-value.mono { font-family: monospace; font-size: 12px; color: var(--blue-100); }

/* ── Environment badge ───────────────────────── */
.env-badge {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 99px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.env-badge-development { background: rgba(var(--warn-rgb),0.15); color: var(--warn-light); border: 1px solid rgba(var(--warn-rgb),0.3); }
.env-badge-production   { background: rgba(var(--low-rgb),0.12);  color: var(--low-text); border: 1px solid rgba(var(--low-rgb),0.25); }
.env-badge-staging      { background: rgba(var(--violet-rgb),0.12); color: var(--violet-light); border: 1px solid rgba(var(--violet-rgb),0.25); }

/* ── Certificate info card ───────────────────── */
.cert-info-card {
  border-radius: var(--radius-sm);
  border: 1px solid;
  padding: 16px 18px;
  margin-bottom: 16px;
}
.cert-valid   { background: rgba(var(--success-rgb),0.06);  border-color: rgba(var(--success-rgb),0.25); }
.cert-warning { background: rgba(var(--warn-rgb),0.08);  border-color: rgba(var(--warn-rgb),0.3); }
.cert-expired { background: rgba(var(--crit-rgb),0.08);   border-color: rgba(var(--crit-rgb),0.3); }

.cert-status-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.cert-status-badge {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 99px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  flex-shrink: 0;
}
.cert-status-ok      { background: rgba(var(--success-rgb),0.15);  color: var(--success-acked); border: 1px solid rgba(var(--success-rgb),0.3); }
.cert-status-warning { background: rgba(var(--warn-rgb),0.15);  color: var(--warn-light); border: 1px solid rgba(var(--warn-rgb),0.3); }
.cert-status-expired { background: rgba(var(--crit-rgb),0.15);   color: var(--crit-text); border: 1px solid rgba(var(--crit-rgb),0.3); }
.cert-path-label     { font-size: 12px; color: var(--text-muted); font-family: monospace; word-break: break-all; }

.cert-detail-grid { display: flex; flex-direction: column; gap: 0; }
.cert-detail-row {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.cert-detail-row:last-child { border-bottom: none; }
.cert-detail-label {
  width: 120px;
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.cert-detail-value { font-size: 12px; color: var(--text-primary); word-break: break-all; }
.cert-detail-value.mono { font-family: monospace; }
.text-danger  { color: var(--crit-text); }
.text-warning { color: var(--warn-light); }

.cert-sans-list { display: flex; flex-wrap: wrap; gap: 6px; }
.cert-san-badge {
  display: inline-block;
  background: rgba(var(--accent-rgb),0.08);
  border: 1px solid rgba(var(--accent-rgb),0.18);
  color: var(--accent);
  border-radius: 4px;
  font-size: 11px;
  font-family: monospace;
  padding: 1px 7px;
}

.cert-parse-error {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--crit-text);
}
.cert-parse-error svg { width: 14px; height: 14px; flex-shrink: 0; }

.cert-upload-section { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--border); }
.cert-section-heading {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
}

.cert-restart-notice {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 20px;
  padding: 12px 14px;
  background: rgba(var(--blue-info-rgb),0.06);
  border: 1px solid rgba(var(--blue-info-rgb),0.18);
  border-radius: var(--radius-sm);
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.55;
}
.cert-restart-notice svg { width: 14px; height: 14px; flex-shrink: 0; color: var(--blue-info); margin-top: 1px; }
.cert-restart-notice code {
  background: rgba(255,255,255,0.06);
  border-radius: 3px;
  padding: 1px 5px;
  font-family: monospace;
  font-size: 11px;
}

/* ── Azure Tenant Sync ───────────────────────── */
.az-sync-status {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 500;
}
.az-sync-status svg { width: 15px; height: 15px; flex-shrink: 0; }
.az-sync-status .az-badge-ts { opacity: .65; font-size: 12px; font-weight: 400; }
.azure-status-ok       { background: rgba(var(--low-rgb),.08);   border: 1px solid rgba(var(--low-rgb),.2);    color: var(--low-text); }
.azure-status-fail     { background: rgba(var(--crit-rgb),.08);   border: 1px solid rgba(var(--crit-rgb),.2);    color: var(--crit-text); }
.azure-status-untested { background: rgba(var(--slate-rgb),.06); border: 1px solid rgba(var(--slate-rgb),.18); color: var(--text-muted); }

.az-pw-wrap { position: relative; }
.az-pw-wrap > .field-input { padding-right: 44px; }
.az-pw-toggle {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  padding: 4px;
  display: flex;
  align-items: center;
  transition: color var(--transition);
}
.az-pw-toggle:hover { color: var(--text-secondary); }
.az-pw-toggle svg { width: 16px; height: 16px; }

.az-test-result {
  display: none;
  align-items: flex-start;
  gap: 8px;
  margin-top: 16px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  font-size: 13px;
  line-height: 1.5;
}
.az-test-result.is-visible { display: flex; }
.az-test-result.az-ok   { background: rgba(var(--low-rgb),.07);  border-color: rgba(var(--low-rgb),.25);  color: var(--low-light); }
.az-test-result.az-fail { background: rgba(var(--crit-rgb),.07);  border-color: rgba(var(--crit-rgb),.25);  color: var(--crit-light); }
.az-test-result svg { width: 14px; height: 14px; flex-shrink: 0; margin-top: 1px; }

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

/* ════════════════════════════════════════════════
   TRIAGE PAGE
   ════════════════════════════════════════════════ */

/* Search bar */
.triage-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.triage-search-wrap:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb),0.12);
}
.triage-search-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-left: 14px;
  color: var(--text-muted);
}
.triage-search-input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  padding: 11px 12px;
  font-size: 13px;
  color: var(--text-primary);
  font-family: inherit;
}
.triage-search-input::placeholder { color: var(--text-muted); }
.triage-search-clear {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: color var(--transition);
}
.triage-search-clear:hover { color: var(--text-primary); }
.triage-search-clear svg { width: 14px; height: 14px; }

/* Section blocks */
.triage-section {
  margin-bottom: 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.triage-section-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}
.triage-section-header svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.triage-section-title {
  font-size: 13px;
  font-weight: 600;
  flex: 1;
}
.triage-section-count {
  font-size: 12px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  background: rgba(255,255,255,0.08);
  color: var(--text-muted);
}
/* Section colour variants */
.triage-header-malicious {
  background: rgba(var(--crit-rgb), 0.06);
  color: var(--crit-text);
}
.triage-header-malicious .triage-section-count {
  background: rgba(var(--crit-rgb), 0.15);
  color: var(--crit-text);
}
.triage-header-investigate {
  background: rgba(var(--medium-rgb), 0.06);
  color: var(--medium-text);
}
.triage-header-investigate .triage-section-count {
  background: rgba(var(--medium-rgb), 0.15);
  color: var(--medium-text);
}
.triage-header-prioritized {
  background: rgba(var(--high-rgb), 0.06);
  color: var(--high-text);
}
.triage-header-prioritized .triage-section-count {
  background: rgba(var(--high-rgb), 0.15);
  color: var(--high-text);
}

/* Label tags on feed items */
.label-tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2px;
  white-space: nowrap;
  flex-shrink: 0;
  background: rgba(255,255,255,0.07);
  color: var(--text-muted);
  border: 1px solid rgba(255,255,255,0.1);
}
.label-tag-malicious   { background: rgba(var(--crit-rgb),0.12);   color: var(--crit-text);   border-color: rgba(var(--crit-rgb),0.25); }
.label-tag-investigate { background: rgba(var(--medium-rgb),0.12); color: var(--medium-text); border-color: rgba(var(--medium-rgb),0.25); }
.label-tag-prioritized { background: rgba(var(--high-rgb),0.12);   color: var(--high-text);   border-color: rgba(var(--high-rgb),0.25); }

/* Label buttons in detail panel */
.triage-label-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}
.triage-label-btn {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 600;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  font-family: inherit;
  transition: all var(--transition);
}
.triage-label-btn:hover { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.2); }
.triage-label-btn:disabled { opacity: 0.5; cursor: not-allowed; }
/* Active (applied) state */
.triage-label-btn-active { border-width: 1.5px; }
.triage-label-btn-malicious.triage-label-btn-active   { background: rgba(var(--crit-rgb),0.12);   color: var(--crit-text);   border-color: rgba(var(--crit-rgb),0.4); }
.triage-label-btn-investigate.triage-label-btn-active { background: rgba(var(--medium-rgb),0.12); color: var(--medium-text); border-color: rgba(var(--medium-rgb),0.4); }
.triage-label-btn-prioritized.triage-label-btn-active { background: rgba(var(--high-rgb),0.12);   color: var(--high-text);   border-color: rgba(var(--high-rgb),0.4); }
/* Inactive hover tints */
.triage-label-btn-malicious:hover   { color: var(--crit-text);   border-color: rgba(var(--crit-rgb),0.3); }
.triage-label-btn-investigate:hover { color: var(--medium-text); border-color: rgba(var(--medium-rgb),0.3); }
.triage-label-btn-prioritized:hover { color: var(--high-text);   border-color: rgba(var(--high-rgb),0.3); }

/* Label history */
.label-history-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
}
.label-history-item {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 12px;
  color: var(--text-secondary);
}
.label-history-action {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  padding: 1px 6px;
  border-radius: 3px;
  flex-shrink: 0;
}
.label-history-added   { background: rgba(var(--low-rgb),0.12);  color: var(--low-text); }
.label-history-removed { background: rgba(100,116,139,.15); color: #94a3b8; }
.label-history-name  { font-weight: 600; color: var(--text-primary); }
.label-history-meta  { color: var(--text-muted); font-size: 11px; }

/* ════════════════════════════════════════════════
   UTILITY CLASSES — replaces view inline styles
   ════════════════════════════════════════════════ */

/* ── Alert chart ─────────────────────────────── */
.chart-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-light);
  letter-spacing: -0.1px;
}
.chart-legend-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--slate);
}
.chart-swatch {
  width: 16px;
  height: 2px;
  border-radius: 1px;
  display: inline-block;
}
.chart-swatch-crit     { background: var(--crit); }
.chart-swatch-high     { background: var(--high); }
.chart-swatch-medium   { background: var(--medium); }
.chart-swatch-low      { background: var(--low); }
.chart-swatch-closed   { background: repeating-linear-gradient(90deg, var(--slate-dark) 0, var(--slate-dark) 5px, transparent 5px, transparent 8px); }
.chart-swatch-resolved { background: repeating-linear-gradient(90deg, var(--slate) 0, var(--slate) 5px, transparent 5px, transparent 8px); }

/* ── Admin org list — alert count pills ──────── */
.pill-open { background: rgba(var(--warn-rgb), 0.12); color: var(--warn); border: 1px solid rgba(var(--warn-rgb), 0.25); }
.pill-crit { background: rgba(var(--crit-rgb), 0.12); color: var(--crit); border: 1px solid rgba(var(--crit-rgb), 0.25); }
.pill-high { background: rgba(var(--high-rgb), 0.12); color: var(--high); border: 1px solid rgba(var(--high-rgb), 0.25); }

/* ── Threat rule inline badges ───────────────── */
.tag-regex {
  font-size: 10px;
  font-weight: 600;
  color: var(--accent);
  background: rgba(var(--accent-rgb), 0.1);
  border: 1px solid rgba(var(--accent-rgb), 0.25);
  padding: 1px 5px;
  border-radius: 4px;
  margin-left: 5px;
}
.tag-not {
  font-size: 10px;
  font-weight: 600;
  color: var(--warn);
  background: rgba(var(--warn-rgb), 0.12);
  border: 1px solid rgba(var(--warn-rgb), 0.3);
  padding: 1px 5px;
  border-radius: 4px;
  margin-left: 5px;
}

/* ── Form labels ─────────────────────────────── */
.text-required { color: var(--crit-text); font-weight: 600; }

/* ── Small inline icon ───────────────────────── */
.icon-success-sm {
  width: 13px;
  height: 13px;
  vertical-align: middle;
  margin-right: 6px;
  color: var(--success-acked);
  flex-shrink: 0;
}

/* ── Error / spinner text ────────────────────── */
.text-error-sm { font-size: 13px; color: var(--crit-text); text-align: center; }

/* ── Modal icon variants ─────────────────────── */
.modal-icon-info {
  background: rgba(var(--info-bright-rgb), 0.12);
  color: var(--info-blue-light);
  border: 1px solid rgba(var(--info-bright-rgb), 0.25);
}
.modal-icon-accent {
  background: rgba(var(--accent-rgb), 0.12);
  color: var(--accent);
  border: 1px solid rgba(var(--accent-rgb), 0.3);
}

/* ── Agent Deployment page ───────────────────── */
.field-required-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  color: var(--accent);
  background: rgba(var(--info-bright-rgb), 0.1);
  border: 1px solid rgba(var(--info-bright-rgb), 0.25);
  border-radius: 3px;
  padding: 1px 6px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  vertical-align: middle;
  margin-left: 8px;
}
.api-key-row-selected {
  background: rgba(var(--info-bright-rgb), 0.06) !important;
  outline: 1px solid rgba(var(--info-bright-rgb), 0.2);
  outline-offset: -1px;
}
.deploy-field-error {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 9px 14px;
  background: rgba(var(--crit-rgb), 0.06);
  border: 1px solid rgba(var(--crit-rgb), 0.25);
  border-radius: var(--radius-sm);
  font-size: 12px;
  color: var(--crit-text);
}
.deploy-field-error svg { width: 14px; height: 14px; flex-shrink: 0; }
.deploy-info-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  min-width: 0;
  overflow-x: auto;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 12px;
  color: var(--text-muted);
}
.deploy-info-row svg { width: 15px; height: 15px; flex-shrink: 0; }
.deploy-warn-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 12px;
  padding: 11px 14px;
  background: rgba(var(--medium-rgb), 0.06);
  border: 1px solid rgba(var(--medium-rgb), 0.22);
  border-radius: var(--radius-sm);
  font-size: 12px;
  color: var(--medium);
}
.deploy-warn-row svg { width: 15px; height: 15px; flex-shrink: 0; margin-top: 1px; }
.deploy-req-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 16px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-left: 3px solid var(--high);
  border-radius: var(--radius-sm);
}
.deploy-req-icon {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 8px;
  background: rgba(var(--high-rgb), 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--high);
}
.deploy-req-icon svg { width: 16px; height: 16px; }
.deploy-req-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 5px;
}
.deploy-binary-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 6px;
  min-width: 0;
  padding: 10px 14px;
  background: rgba(var(--success-rgb), 0.06);
  border: 1px solid rgba(var(--success-rgb), 0.2);
  border-radius: var(--radius-sm);
  font-size: 12px;
}
.deploy-binary-row svg { width: 14px; height: 14px; flex-shrink: 0; color: var(--success-acked); }
.deploy-binary-md5 {
  font-size: 11px;
  color: var(--text-muted);
  font-family: var(--font-mono, 'Courier New', monospace);
  letter-spacing: 0.3px;
  word-break: break-all;
}
.deploy-checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text-secondary);
  padding: 10px 14px;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  user-select: none;
  margin-top: 6px;
}
.deploy-checkbox-row input[type="checkbox"] {
  accent-color: var(--accent);
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  cursor: pointer;
  margin-top: 1px;
}
.deploy-steps {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.deploy-steps li {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.6;
}
.pwd-display-wrap {
  display: flex;
  align-items: center;
  gap: 0;
  background: var(--bg-deep);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-sm);
  margin: 16px 0 12px;
  overflow: hidden;
}
.pwd-display {
  flex: 1;
  font-family: var(--font-mono, 'Courier New', monospace);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 3px;
  color: var(--accent);
  padding: 14px 18px;
  user-select: all;
}
.pwd-copy-btn {
  flex-shrink: 0;
  background: none;
  border: none;
  border-left: 1px solid rgba(255,255,255,0.08);
  padding: 14px 16px;
  cursor: pointer;
  color: var(--text-muted);
  transition: color var(--transition), background var(--transition);
}
.pwd-copy-btn:hover { background: rgba(255,255,255,0.05); color: var(--text-primary); }
.pwd-copy-btn svg { width: 16px; height: 16px; display: block; }
.pwd-hint {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
  margin: 0 0 20px;
}

/* ── Status / ticket badge pills ────────────────── */
.pill-open-ticket {
  font-size: 11px; font-weight: 600;
  color: var(--low-text);
  background: rgba(var(--low-text-rgb), 0.1);
  border: 1px solid rgba(var(--low-text-rgb), 0.25);
  padding: 2px 8px; border-radius: 12px;
}
.pill-failed {
  font-size: 12px; font-weight: 600;
  color: var(--crit-text);
  background: rgba(var(--crit-rgb), 0.1);
  border: 1px solid rgba(var(--crit-rgb), 0.25);
  padding: 2px 10px; border-radius: 99px;
}
.pill-session {
  font-size: 11px; font-weight: 600;
  color: var(--violet-light);
  background: rgba(var(--violet-rgb), 0.12);
  border: 1px solid rgba(var(--violet-light-rgb), 0.25);
  padding: 2px 8px; border-radius: 12px;
}
.text-success { color: var(--success); }
.text-low     { color: var(--low); }

/* ── Gradient CTA button link ───────────────────── */
.btn-gradient-link {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 20px;
  background: linear-gradient(135deg, var(--blue-600), var(--accent));
  color: var(--blue-950);
  border-radius: 8px; font-size: 13px; font-weight: 600;
  text-decoration: none;
}
.btn-gradient-link:hover { opacity: 0.9; }

/* ── Table overflow wrapper ─────────────────────── */
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ════════════════════════════════════════════════
   ALERT DETAIL OVERLAY (SHARED — ALERTS + SEARCH)
   ════════════════════════════════════════════════ */
.al-overlay-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 900;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(3px);
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.al-overlay-backdrop.al-open { display: flex; }

.al-overlay-panel {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  width: 100%;
  max-width: 540px;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55);
  animation: al-panel-in 0.18s ease;
  overflow: hidden;
}
@keyframes al-panel-in {
  from { opacity: 0; transform: scale(0.97) translateY(10px); }
  to   { opacity: 1; transform: scale(1)    translateY(0);    }
}

.al-overlay-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.al-overlay-body::-webkit-scrollbar { width: 4px; }
.al-overlay-body::-webkit-scrollbar-track { background: transparent; }
.al-overlay-body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

/* Loading state */
.al-overlay-loading .detail-title { color: var(--text-muted); animation: al-pulse 1.2s ease infinite; }
@keyframes al-pulse { 0%,100% { opacity:.4 } 50% { opacity:.9 } }

/* Group tags inside overlay */
.ov-group-tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border-radius: 99px;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border);
  font-size: 11px;
  color: var(--text-secondary);
}

/* Event detail fields (Search → event overlay) */
.ev-fields { display: flex; flex-direction: column; gap: 0; }
.ev-field-row {
  display: flex;
  align-items: baseline;
  padding: 5px 0;
  border-bottom: 1px solid var(--border);
}
.ev-field-row:last-child { border-bottom: none; }
.ev-field-key {
  flex: 0 0 100px;
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 600;
}
.ev-field-val {
  flex: 1;
  font-size: 12px;
  color: var(--text-primary);
  word-break: break-all;
}

@media (max-width: 600px) { .al-overlay-panel { max-height: 96vh; } }

/* ════════════════════════════════════════════════
   UTILITIES & HELPERS
   ════════════════════════════════════════════════ */

/* Ghost/text button — no background or border (e.g. login "back" link) */
.btn-text {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  color: var(--text-muted);
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  padding: 0;
  text-decoration: none;
  transition: color var(--transition);
}
.btn-text:hover { color: var(--text-secondary); }
.btn-text svg   { width: 14px; height: 14px; }

/* Inline form wrapper — keeps button row layout inside .modal-actions */
.form-inline { display: inline; }

/* Info table row padding — standard cell spacing in detail tables */
.td-row { padding-top: 7px; padding-bottom: 7px; }

/* Bold primary cell text (alias for .td-bold) */
.td-primary { font-weight: 600; color: var(--text-primary); }

/* Muted italic empty-state cell text */
.text-muted-italic { font-size: 12px; color: var(--text-muted); font-style: italic; }

/* Monospace field input (e.g. shell command fields) */
.field-input-mono { font-family: monospace; font-size: 12px; }

/* Section divider within a settings card */
.settings-subsection {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

/* Form with standard top spacing inside a settings card */
.settings-form { margin-top: 16px; }
.settings-form .form-actions { margin-top: 16px; }
.settings-form .settings-field + .settings-field { margin-top: 12px; }

/* Button group in admin-header / card-header */
.header-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

/* Card header meta / count text */
.card-meta { font-size: 12px; color: var(--text-muted); }

/* Inline SVG icon inside a card-title span */
.card-title-icon { width: 16px; height: 16px; vertical-align: -2px; margin-right: 6px; }

/* Table action buttons — right-aligned row (for table action columns) */
.table-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: nowrap;
  gap: 6px;
}

/* Chip / tag list */
.chip-list { display: flex; flex-wrap: wrap; gap: 4px; }

/* Row of inline form options (checkboxes, toggles) */
.form-options { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 8px; }

/* Checkbox / toggle label */
.checkbox-label {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text-secondary);
}
.checkbox-label input[type="checkbox"]             { accent-color: var(--accent); }
.checkbox-label-warn input[type="checkbox"]        { accent-color: var(--warn); }

/* Wide modal variant (560 px max-width) */
.modal-box-wide { max-width: 560px; }

/* Faint info callout box (e.g. active restart command preview) */
.info-box {
  margin-top: 14px;
  padding: 10px 12px;
  background: rgba(0,0,0,0.15);
  border-radius: 6px;
  border: 1px solid var(--border);
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.info-box > svg   { width: 14px; height: 14px; flex-shrink: 0; margin-top: 2px; color: var(--text-muted); }
.info-box-text    { font-size: 12px; color: var(--text-muted); }

/* Disabled cert status badge variant */
.cert-status-disabled {
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border);
  color: var(--text-muted);
}

/* Small cert-san badge (compact company tag) */
.cert-san-badge-sm { font-size: 10px; padding: 2px 6px; }

/* Inline code tag (pattern / value display in tables) */
.code-tag {
  font-size: 12px;
  color: var(--text-secondary);
  background: rgba(255,255,255,0.04);
  padding: 2px 6px;
  border-radius: 4px;
}

/* Cert info row (status badge + certificate path) */
.cert-info-row { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }

/* ════════════════════════════════════════════════
   LOG VIEWER — ActivityLog + CompanyLogs pages
   ════════════════════════════════════════════════ */

.log-viewer {
  background: var(--bg-deep);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin-top: 16px;
}

.log-viewer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 16px;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.log-viewer-filename {
  font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  word-break: break-all;
}

.log-viewer-meta {
  font-size: 11px;
  color: var(--text-muted);
  margin-left: 8px;
  white-space: nowrap;
}

.log-viewer-close {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: color var(--transition), background var(--transition);
}
.log-viewer-close:hover { color: var(--text-primary); background: rgba(255,255,255,0.06); }

.log-viewer-body {
  overflow-y: auto;
  max-height: 460px;
  padding: 12px 0;
}
.log-viewer-body::-webkit-scrollbar       { width: 4px; }
.log-viewer-body::-webkit-scrollbar-track  { background: transparent; }
.log-viewer-body::-webkit-scrollbar-thumb  { background: var(--border); border-radius: 4px; }

.log-pre {
  font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
  font-size: 12px;
  line-height: 1.65;
  color: var(--text-secondary);
  padding: 0 18px;
  white-space: pre-wrap;
  word-break: break-all;
  margin: 0;
}

/* Line colour coding */
.log-pre .log-line-error { color: var(--crit-text); }
.log-pre .log-line-warn  { color: var(--medium-text); }
.log-pre .log-line-info  { color: var(--low-text); }

/* State messages inside viewer body */
.log-loading {
  text-align: center;
  padding: 28px 16px;
  color: var(--text-muted);
  font-size: 13px;
}
.log-error {
  text-align: center;
  padding: 20px 16px;
  color: var(--crit-text);
  font-size: 13px;
}
.log-empty {
  text-align: center;
  padding: 20px 16px;
  color: var(--text-muted);
  font-size: 13px;
  font-style: italic;
}

/* Highlighted active row in the file list table */
.log-row-active > td { background: rgba(var(--accent-rgb), 0.06) !important; }

/* ════════════════════════════════════════════════
   PAYMENT / PRICING PAGE
   ════════════════════════════════════════════════ */

.payment-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px 60px;
}
.payment-page-standalone {
  padding-top: 40px;
}

/* ── Standalone header/footer ─────────────────── */
.payment-standalone-header {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 32px;
  background: rgba(17,17,17,0.95);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.payment-standalone-logo svg { height: 32px; width: auto; }
.payment-standalone-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px 16px;
  color: var(--text-muted);
  font-size: 12px;
}
.payment-standalone-footer svg { width: 14px; height: 14px; }

/* ── Hero ──────────────────────────────────────── */
.payment-hero {
  text-align: center;
  padding: 48px 16px 40px;
}
.payment-hero-title {
  font-size: 36px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.5px;
  margin-bottom: 12px;
}
.payment-hero-sub {
  font-size: 15px;
  color: var(--text-secondary);
  max-width: 480px;
  margin: 0 auto;
}

/* ── Pricing grid ─────────────────────────────── */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  margin-bottom: 32px;
}

/* ── Pricing card ─────────────────────────────── */
.pricing-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  cursor: pointer;
  position: relative;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.pricing-card:hover {
  border-color: rgba(var(--accent-rgb), 0.4);
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}
.pricing-card-current {
  border-color: rgba(var(--accent-rgb), 0.35);
  background: linear-gradient(135deg, var(--bg-card) 0%, rgba(var(--accent-rgb), 0.04) 100%);
}
.pricing-card-selected {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 1px var(--accent), 0 8px 32px rgba(var(--accent-rgb), 0.15) !important;
  transform: translateY(-2px);
}

.pricing-current-badge {
  position: absolute;
  top: -1px;
  right: 20px;
  background: var(--accent);
  color: var(--blue-950);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 0 0 8px 8px;
}

.pricing-card-header { flex-shrink: 0; }
.pricing-tier-name {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 8px;
}
.pricing-price {
  font-size: 36px;
  font-weight: 700;
  color: var(--accent);
  line-height: 1;
  margin-bottom: 10px;
}
.price-period {
  font-size: 14px;
  font-weight: 400;
  color: var(--text-secondary);
}
.pricing-description {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-top: 4px;
}

/* ── Feature list ─────────────────────────────── */
.pricing-features { flex: 1; }
.pricing-feature-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.pricing-feature-item {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.4;
}
.pricing-feature-item svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--accent);
  margin-top: 1px;
}

/* ── Pricing card footer button ───────────────── */
.pricing-card-footer { flex-shrink: 0; }
.pricing-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 11px 20px;
  background: linear-gradient(135deg, var(--blue-700), var(--blue-600), var(--blue-500));
  border: none;
  border-radius: var(--radius-sm);
  color: var(--blue-950);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.2s ease, transform 0.1s ease;
  text-decoration: none;
  letter-spacing: 0.2px;
}
.pricing-btn:hover { opacity: 0.9; transform: translateY(-1px); color: var(--blue-950); }
.pricing-btn:active { transform: translateY(0); }
.pricing-btn svg { width: 16px; height: 16px; }
.pricing-btn-current {
  background: rgba(255,255,255,0.06);
  color: var(--text-muted);
  cursor: default;
}
.pricing-btn-current:hover { opacity: 1; transform: none; }

/* ── Checkout panel ─────────────────────────────── */
.checkout-panel {
  background: var(--bg-card);
  border: 1px solid rgba(var(--accent-rgb), 0.25);
  border-radius: var(--radius);
  margin-top: 8px;
  overflow: hidden;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.checkout-panel-visible {
  opacity: 1;
  transform: translateY(0);
}
.checkout-panel-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}
.checkout-panel-left {
  padding: 32px 32px;
  border-right: 1px solid var(--border);
}
.checkout-panel-right {
  padding: 32px 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.checkout-selected-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 99px;
  background: rgba(var(--accent-rgb), 0.12);
  border: 1px solid rgba(var(--accent-rgb), 0.25);
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.checkout-tier-name {
  font-size: 26px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 6px;
}
.checkout-price {
  font-size: 40px;
  font-weight: 700;
  color: var(--accent);
  line-height: 1;
  margin-bottom: 12px;
}
.checkout-description {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 20px;
  line-height: 1.5;
}
.checkout-feature-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.checkout-feature-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  color: var(--text-secondary);
}
.checkout-feature-item svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--accent);
  margin-top: 1px;
}

.checkout-right-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-primary);
}
.checkout-right-sub {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.6;
  flex: 1;
}
.checkout-submit-btn {
  margin-top: 4px;
}
.checkout-cancel-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  background: none;
  border: none;
  color: var(--text-muted);
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  padding: 0;
  transition: color var(--transition);
}
.checkout-cancel-btn:hover { color: var(--text-secondary); }
.checkout-cancel-btn svg { width: 14px; height: 14px; }

/* ── Payment result pages ─────────────────────── */
.payment-result-page {
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 16px;
}
.payment-result-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 48px 40px;
  max-width: 500px;
  width: 100%;
  text-align: center;
  animation: slideUp 0.35s ease;
}
.payment-result-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 24px;
}
.payment-result-icon svg { width: 34px; height: 34px; }
.payment-result-icon-success {
  background: rgba(var(--success-rgb), 0.15);
  border: 2px solid rgba(var(--success-rgb), 0.35);
  color: var(--success-text);
}
.payment-result-icon-error {
  background: rgba(var(--crit-rgb), 0.12);
  border: 2px solid rgba(var(--crit-rgb), 0.3);
  color: var(--crit-text);
}
.payment-result-icon-cancel {
  background: rgba(255,255,255,0.05);
  border: 2px solid var(--border);
  color: var(--text-muted);
}
.payment-result-title {
  font-size: 24px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 12px;
}
.payment-result-sub {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 8px;
}
.payment-result-note {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.6;
  margin-top: 8px;
}

/* ── Footer note ─────────────────────────────── */
.payment-footer-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 32px;
  padding: 14px 20px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 12px;
  color: var(--text-muted);
}
.payment-footer-note svg { width: 14px; height: 14px; flex-shrink: 0; }

/* ── Billing page subsection styles ─────────── */
.billing-subsection-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin: 8px 0 14px;
  display: flex;
  align-items: center;
}
.billing-subsection-divider {
  height: 1px;
  background: var(--border);
  margin: 24px 0 20px;
}

/* Reveal/hide button inside password inputs (Stripe key fields) */
.btn-reveal {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s;
}
.btn-reveal:hover { color: var(--text-primary); }
.btn-reveal svg   { width: 15px; height: 15px; }

/* ── Payment receipt block (Success page) ────── */
.payment-receipt {
  margin: 20px 0 16px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  text-align: left;
}
.payment-receipt-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 10px 14px 8px;
  border-bottom: 1px solid var(--border);
}
.payment-receipt-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  font-size: 12px;
}
.payment-receipt-row:last-child { border-bottom: none; }
.payment-receipt-label { color: var(--text-muted); flex-shrink: 0; }
.payment-receipt-value { color: var(--text-secondary); word-break: break-all; text-align: right; }
.payment-receipt-amount { color: var(--accent); font-weight: 700; font-size: 14px; }
.payment-receipt-mono   { font-family: monospace; font-size: 11px; color: var(--text-muted); }

/* ── Responsive pricing grid ─────────────────── */
@media (max-width: 900px) {
  .checkout-panel-inner {
    grid-template-columns: 1fr;
  }
  .checkout-panel-left {
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
}
@media (max-width: 600px) {
  .payment-hero-title { font-size: 26px; }
  .pricing-grid { grid-template-columns: 1fr; }
  .checkout-panel-left,
  .checkout-panel-right { padding: 24px 20px; }
  .payment-result-card { padding: 32px 24px; }
}