/* ============================================================
   EHSCentre MY — Master Stylesheet
   Professional Enterprise Design System (Dual Theme: Light / Black)
   ============================================================ */

/* -------------------------------------------------------------
   DEFAULT: PROFESSIONAL LIGHT MODE (Corporate Executive EHS)
   ------------------------------------------------------------- */
:root, [data-theme="light"] {
  /* Brand Accents */
  --brand-primary: #2563eb;
  --brand-primary-glow: rgba(37, 99, 235, 0.2);
  --brand-secondary: #0891b2;
  --brand-accent: #d97706;
  --brand-danger: #dc2626;
  --brand-success: #16a34a;
  --brand-warning: #ea580c;
  --brand-purple: #7c3aed;

  /* Executive Light Backgrounds & Panels */
  --bg-base: #f8fafc;        /* Ultra-clean light canvas */
  --bg-surface: #ffffff;     /* Pure white panels */
  --bg-surface-2: #f1f5f9;   /* Off-white slate neutral */
  --bg-card: #ffffff;        /* Crisp white cards */
  --bg-card-hover: #f8fafc;
  --bg-input: #ffffff;
  --border-subtle: #e2e8f0;  /* Crisp light border */
  --border-active: #2563eb;

  /* High-Contrast Readability */
  --text-primary: #0f172a;   /* Slate 900 (deep black-slate) */
  --text-secondary: #475569; /* Slate 600 */
  --text-muted: #64748b;     /* Slate 500 */
  --text-accent: #2563eb;    /* Deep corporate blue */

  /* Sidebar: Crisp Executive White with Light Borders */
  --sidebar-width: 268px;
  --sidebar-collapsed: 72px;
  --sidebar-bg: #ffffff;
  --sidebar-border: #e2e8f0;
  --sidebar-text: #0f172a;
  --sidebar-text-muted: #64748b;
  --sidebar-hover: #f1f5f9;
  --sidebar-active-bg: rgba(37, 99, 235, 0.08);
  --sidebar-active-text: #2563eb;

  /* Elevation Shadows */
  --card-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05), 0 1px 2px -1px rgba(0, 0, 0, 0.03);
  --card-shadow-hover: 0 10px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.04);
  --modal-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(0,0,0,0.05);

  /* Layout & Ergonomics Defaults */
  --topbar-height: 64px;
  --content-max-width: 1600px;
  --card-padding: 24px;
  --table-cell-padding-y: 12px;
  --table-cell-padding-x: 16px;
  --btn-padding-y: 9px;
  --btn-padding-x: 18px;
  --content-padding: 28px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  /* Transitions */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
}

/* -------------------------------------------------------------
   OPTION: OBSIDIAN BLACK DARK MODE
   ------------------------------------------------------------- */
[data-theme="dark"], body.theme-dark {
  /* Brand Accents */
  --brand-primary: #3b82f6;
  --brand-primary-glow: rgba(59, 130, 246, 0.3);
  --brand-secondary: #06b6d4;
  --brand-accent: #f59e0b;
  --brand-danger: #ef4444;
  --brand-success: #22c55e;
  --brand-warning: #f97316;
  --brand-purple: #8b5cf6;

  /* Deep Black Obsidian Palette */
  --bg-base: #060911;        /* Pitch black background */
  --bg-surface: #0c121e;     /* Deep slate surface */
  --bg-surface-2: #141f33;   /* Slate neutral */
  --bg-card: #101a2b;        /* Dark card */
  --bg-card-hover: #18263d;
  --bg-input: #080d16;       /* Pitch input background */
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-active: rgba(59, 130, 246, 0.5);

  /* Typography */
  --text-primary: #f8fafc;
  --text-secondary: #94a3b8;
  --text-muted: #64748b;
  --text-accent: #60a5fa;

  /* Sidebar */
  --sidebar-bg: #070b14;
  --sidebar-border: rgba(255, 255, 255, 0.06);
  --sidebar-text: #f8fafc;
  --sidebar-text-muted: #64748b;
  --sidebar-hover: #131d2e;
  --sidebar-active-bg: rgba(59, 130, 246, 0.15);
  --sidebar-active-text: #3b82f6;

  /* Elevation Shadows */
  --card-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
  --card-shadow-hover: 0 8px 30px rgba(0, 0, 0, 0.7);
  --modal-shadow: 0 32px 80px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(59, 130, 246, 0.2);
}

/* ============================================================
   COLOUR PSYCHOLOGY: 5 HIGH-CONTRAST PALETTES ("COLOUR CONTRA")
   Scientific visual ergonomics & cognitive focus themes
   ============================================================ */

/* 1. VIGILANCE NAVY & HAZARD GOLD (Cognitive Clarity & Authority) */
:root[data-palette="vigilance"], [data-theme="light"][data-palette="vigilance"] {
  --brand-primary: #1d4ed8;
  --brand-primary-glow: rgba(29, 78, 216, 0.22);
  --brand-secondary: #0284c7;
  --brand-accent: #d97706;
  --border-active: #1d4ed8;
  --text-accent: #1d4ed8;
  --sidebar-active-bg: rgba(29, 78, 216, 0.1);
  --sidebar-active-text: #1d4ed8;
}
[data-theme="dark"][data-palette="vigilance"], body.theme-dark[data-palette="vigilance"] {
  --brand-primary: #3b82f6;
  --brand-primary-glow: rgba(59, 130, 246, 0.35);
  --brand-secondary: #38bdf8;
  --brand-accent: #fbbf24;
  --border-active: #60a5fa;
  --text-accent: #93c5fd;
  --sidebar-active-bg: rgba(59, 130, 246, 0.18);
  --sidebar-active-text: #93c5fd;
}

/* 2. SAFETY EMERALD & HIGH-VIS LIME (Ergonomic Calm & Environmental Renewal) */
:root[data-palette="emerald"], [data-theme="light"][data-palette="emerald"] {
  --brand-primary: #047857;
  --brand-primary-glow: rgba(4, 120, 87, 0.22);
  --brand-secondary: #0d9488;
  --brand-accent: #65a30d;
  --border-active: #047857;
  --text-accent: #047857;
  --sidebar-active-bg: rgba(4, 120, 87, 0.1);
  --sidebar-active-text: #047857;
}
[data-theme="dark"][data-palette="emerald"], body.theme-dark[data-palette="emerald"] {
  --brand-primary: #10b981;
  --brand-primary-glow: rgba(16, 185, 129, 0.35);
  --brand-secondary: #2dd4bf;
  --brand-accent: #a3e635;
  --border-active: #34d399;
  --text-accent: #6ee7b7;
  --sidebar-active-bg: rgba(16, 185, 129, 0.18);
  --sidebar-active-text: #a7f3d0;
}

/* 3. CRISIS CRIMSON & OBSIDIAN CARBON (Incident Command & Decisive Action) */
:root[data-palette="crimson"], [data-theme="light"][data-palette="crimson"] {
  --brand-primary: #be123c;
  --brand-primary-glow: rgba(190, 18, 60, 0.22);
  --brand-secondary: #991b1b;
  --brand-accent: #ea580c;
  --border-active: #be123c;
  --text-accent: #be123c;
  --sidebar-active-bg: rgba(190, 18, 60, 0.1);
  --sidebar-active-text: #be123c;
}
[data-theme="dark"][data-palette="crimson"], body.theme-dark[data-palette="crimson"] {
  --brand-primary: #f43f5e;
  --brand-primary-glow: rgba(244, 63, 94, 0.38);
  --brand-secondary: #fb7185;
  --brand-accent: #f97316;
  --border-active: #fb7185;
  --text-accent: #fda4af;
  --sidebar-active-bg: rgba(244, 63, 94, 0.2);
  --sidebar-active-text: #fecdd3;
}

/* 4. STRATEGIC VIOLET & CYBER CYAN (Analytical Synthesis & Executive Governance) */
:root[data-palette="violet"], [data-theme="light"][data-palette="violet"] {
  --brand-primary: #6d28d9;
  --brand-primary-glow: rgba(109, 40, 217, 0.22);
  --brand-secondary: #0284c7;
  --brand-accent: #0891b2;
  --border-active: #6d28d9;
  --text-accent: #6d28d9;
  --sidebar-active-bg: rgba(109, 40, 217, 0.1);
  --sidebar-active-text: #6d28d9;
}
[data-theme="dark"][data-palette="violet"], body.theme-dark[data-palette="violet"] {
  --brand-primary: #a855f7;
  --brand-primary-glow: rgba(168, 85, 247, 0.38);
  --brand-secondary: #38bdf8;
  --brand-accent: #22d3ee;
  --border-active: #c084fc;
  --text-accent: #d8b4fe;
  --sidebar-active-bg: rgba(168, 85, 247, 0.2);
  --sidebar-active-text: #e9d5ff;
}

/* 5. INDUSTRIAL AMBER & SOLAR FLARE (Frontline Alertness & Machinery Hazard Vigilance) */
:root[data-palette="amber"], [data-theme="light"][data-palette="amber"] {
  --brand-primary: #c2410c;
  --brand-primary-glow: rgba(194, 65, 12, 0.22);
  --brand-secondary: #b45309;
  --brand-accent: #d97706;
  --border-active: #c2410c;
  --text-accent: #c2410c;
  --sidebar-active-bg: rgba(194, 65, 12, 0.1);
  --sidebar-active-text: #c2410c;
}
[data-theme="dark"][data-palette="amber"], body.theme-dark[data-palette="amber"] {
  --brand-primary: #f97316;
  --brand-primary-glow: rgba(249, 115, 22, 0.38);
  --brand-secondary: #fbbf24;
  --brand-accent: #facc15;
  --border-active: #fb923c;
  --text-accent: #fed7aa;
  --sidebar-active-bg: rgba(249, 115, 22, 0.2);
  --sidebar-active-text: #ffedd5;
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: 16px;
  scroll-behavior: smooth;
  min-height: 100%;
}

body {
  font-family: 'Inter', -apple-system, sans-serif;
  background: var(--bg-base);
  color: var(--text-primary);
  min-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  transition: background-color 0.25s ease, color 0.25s ease;
}

body.in-app {
  overflow: hidden !important;
  height: 100vh;
}

a { text-decoration: none; cursor: pointer; }
button { cursor: pointer; font-family: inherit; border: none; outline: none; }
input, select, textarea { font-family: inherit; outline: none; }
.hidden { display: none !important; }

/* Global Smooth Transitions */
.sidebar, .topbar, .card, .stat-card, .table-wrapper, .modal, input, select, textarea, .nav-item, .legal-stat-box {
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}

/* ============================================================
   THEME TOGGLE BUTTON (Executive Pill Switcher)
   ============================================================ */
.theme-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 9999px;
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.22s var(--ease-out);
  white-space: nowrap;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  user-select: none;
}
.theme-toggle-btn:hover {
  background: var(--bg-surface-2);
  border-color: var(--border-active);
  color: var(--text-accent);
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.15);
  transform: translateY(-1px);
}
.theme-toggle-icon {
  font-size: 15px;
  line-height: 1;
  display: inline-block;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.theme-toggle-btn:hover .theme-toggle-icon {
  transform: scale(1.18) rotate(15deg);
}

/* Login Theme Bar */
.login-theme-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  width: 100%;
  max-width: 440px;
  margin-bottom: 12px;
  z-index: 100;
  flex-wrap: wrap;
}

/* ============================================================
   LOGIN SCREEN
   ============================================================ */
.login-screen {
  --brand-primary: #3b82f6;
  --brand-primary-glow: rgba(59, 130, 246, 0.3);
  --brand-secondary: #06b6d4;
  --brand-accent: #f59e0b;
  --brand-danger: #ef4444;
  --brand-success: #22c55e;
  --brand-warning: #f97316;
  --brand-purple: #8b5cf6;

  /* Strict Obsidian Dark Palette Tokens for Auth Screens */
  --bg-base: #060911;
  --bg-surface: #0c121e;
  --bg-surface-2: #141f33;
  --bg-card: #101a2b;
  --bg-card-hover: #18263d;
  --bg-input: #080d16;
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-active: rgba(59, 130, 246, 0.5);

  --text-primary: #f8fafc;
  --text-secondary: #94a3b8;
  --text-muted: #64748b;
  --text-accent: #60a5fa;

  position: fixed; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  z-index: 1000;
  background: #060911 !important;
  color: #f8fafc !important;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 20px 16px;
  width: 100vw;
  max-width: 100vw;
}

.login-bg {
  position: absolute; inset: 0;
  pointer-events: none;
}

.login-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.28 !important;
  animation: orbFloat 8s ease-in-out infinite;
}
[data-theme="dark"] .login-orb, body.theme-dark .login-orb {
  opacity: 0.28;
}
.orb-1 { width: 500px; height: 500px; background: radial-gradient(circle, #3b82f6, transparent); top: -100px; left: -100px; animation-delay: 0s; }
.orb-2 { width: 400px; height: 400px; background: radial-gradient(circle, #8b5cf6, transparent); bottom: -100px; right: -100px; animation-delay: 3s; }
.orb-3 { width: 300px; height: 300px; background: radial-gradient(circle, #06b6d4, transparent); top: 50%; left: 50%; transform: translate(-50%, -50%); animation-delay: 1.5s; }

@keyframes orbFloat {
  0%, 100% { transform: scale(1) translateY(0); }
  50% { transform: scale(1.1) translateY(-20px); }
}

.login-card {
  position: relative;
  background: #0c121e !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: var(--radius-xl);
  padding: 36px 28px;
  width: min(440px, calc(100vw - 32px));
  max-width: 440px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.55) !important;
  animation: slideUp 0.6s var(--ease-out);
}

.login-screen input,
.login-screen select {
  background: #080d16 !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: #f8fafc !important;
}
.login-screen input:focus,
.login-screen select:focus {
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3) !important;
}

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

.login-logo { text-align: center; margin-bottom: 36px; }
.logo-icon { font-size: 48px; line-height: 1; margin-bottom: 12px; filter: drop-shadow(0 0 20px rgba(59,130,246,0.6)); }
.logo-text {
  font-family: 'Outfit', sans-serif;
  font-size: 32px; font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.5px;
}
.logo-my { color: var(--brand-primary); }
.logo-tagline { color: var(--text-secondary); font-size: 14px; margin-top: 6px; }

.form-group { margin-bottom: 18px; }
.form-group label { display: block; font-size: 13px; font-weight: 500; color: var(--text-secondary); margin-bottom: 8px; }
.form-group input,
.form-group select {
  width: 100%;
  background: var(--bg-input);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  color: var(--text-primary);
  font-size: 14px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.form-group input:focus,
.form-group select:focus {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px var(--brand-primary-glow);
}
.form-group select option { background: var(--bg-surface); }

.btn-login {
  width: 100%;
  padding: 14px;
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));
  color: white;
  font-size: 15px; font-weight: 600;
  border-radius: var(--radius-sm);
  margin-top: 8px;
  transition: transform 0.2s, box-shadow 0.2s, opacity 0.2s;
  box-shadow: 0 4px 20px var(--brand-primary-glow);
  position: relative;
  overflow: hidden;
}
.btn-login::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.1), transparent);
}
.btn-login:active { transform: translateY(0); }

.btn-login-demo {
  width: 100%;
  padding: 11px;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.35);
  color: #10b981;
  font-size: 13.5px;
  font-weight: 600;
  border-radius: var(--radius-sm);
  margin-top: 10px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.btn-login-demo:hover {
  background: rgba(16, 185, 129, 0.22);
  border-color: #10b981;
  transform: translateY(-1px);
}
.btn-login-demo:active {
  transform: translateY(0);
}

.password-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}
.password-input-wrap input {
  padding-right: 44px !important;
  width: 100%;
}
.password-toggle-btn {
  position: absolute;
  right: 8px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 15px;
  color: var(--text-muted);
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: color 0.2s, background-color 0.2s;
}
.password-toggle-btn:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.08);
}

.auth-card-wide {
  width: min(660px, calc(100vw - 32px)) !important;
  max-width: 660px !important;
}

.auth-step-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 24px;
}
.auth-step-dot {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  padding: 4px 12px;
  border-radius: 20px;
  background: var(--bg-surface-secondary);
  border: 1px solid var(--border-subtle);
}
.auth-step-dot.active {
  color: var(--primary);
  border-color: var(--primary);
  background: rgba(6, 182, 212, 0.08);
}
.auth-step-dot.completed {
  color: #10b981;
  border-color: rgba(16, 185, 129, 0.4);
  background: rgba(16, 185, 129, 0.08);
}

.auth-recovery-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin: 14px 0 16px 0;
  font-size: 12.5px;
}
.auth-recovery-row a {
  color: var(--text-secondary);
  text-decoration: none;
  transition: color 0.2s;
}
.auth-recovery-row a:hover {
  color: var(--brand-primary);
  text-decoration: underline;
}

.auth-secondary-divider {
  display: flex;
  align-items: center;
  text-align: center;
  margin: 18px 0 16px 0;
  color: var(--text-muted);
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}
.auth-secondary-divider::before,
.auth-secondary-divider::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid var(--border-subtle);
}
.auth-secondary-divider:not(:empty)::before {
  margin-right: 12px;
}
.auth-secondary-divider:not(:empty)::after {
  margin-left: 12px;
}

.auth-bottom-links {
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: center;
  font-size: 13px;
  margin-top: 14px;
}
.auth-bottom-links a {
  color: var(--primary);
  font-weight: 600;
  text-decoration: none;
}
.auth-bottom-links a:hover {
  text-decoration: underline;
}

.auth-status-box {
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.5;
  margin-bottom: 16px;
}
.auth-status-box.info {
  background: rgba(6, 182, 212, 0.08);
  border: 1px solid rgba(6, 182, 212, 0.3);
  color: var(--text-primary);
}
.auth-status-box.success {
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.3);
  color: #047857;
}

.login-register { text-align: center; font-size: 13px; color: var(--text-muted); margin-top: 16px; }
.login-register a { color: var(--text-accent); }

.login-badges {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
  margin-top: 28px; padding-top: 24px;
  border-top: 1px solid var(--border-subtle);
}
.badge {
  background: rgba(59,130,246,0.12);
  border: 1px solid rgba(59,130,246,0.25);
  color: var(--text-accent);
  font-size: 11px; font-weight: 600;
  padding: 4px 10px;
  border-radius: 100px;
  letter-spacing: 0.3px;
}

/* Login Employee ID Helpers & Chips */
.staff-id-chips-wrap {
  margin-top: 6px;
  margin-bottom: 14px;
}
.staff-id-chips-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  margin-bottom: 4px;
  display: block;
}
.staff-id-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.staff-id-chip {
  font-size: 11px;
  font-family: monospace;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
  background: var(--bg-surface-2);
  border: 1px solid var(--border-subtle);
  color: var(--brand-primary);
  cursor: pointer;
  transition: all 0.15s;
}
.staff-id-chip:hover {
  background: var(--brand-primary);
  color: #ffffff;
  border-color: var(--brand-primary);
}
.security-privacy-note {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.4;
  margin-top: 10px;
  background: var(--bg-surface-2);
  padding: 8px 12px;
  border-radius: 6px;
  border: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  gap: 6px;
}

/* OTP Verification Modal & Duplicate Company Check Styles */
.otp-display-box {
  background: linear-gradient(135deg, rgba(37,99,235,0.08), rgba(16,185,129,0.08));
  border: 1px solid rgba(37,99,235,0.25);
  border-radius: 8px;
  padding: 14px;
  text-align: center;
  margin-bottom: 16px;
}
.otp-code-highlight {
  font-family: monospace;
  font-size: 26px;
  font-weight: 900;
  letter-spacing: 6px;
  color: var(--brand-primary);
  margin: 6px 0;
}
.otp-input-field {
  font-family: monospace;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: 8px;
  text-align: center;
  padding: 10px;
  width: 100%;
  border-radius: 8px;
  border: 2px solid var(--brand-primary);
  background: var(--bg-surface);
  color: var(--text-primary);
  outline: none;
}
.dup-error-box {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #b91c1c;
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 12px;
  line-height: 1.45;
  margin-bottom: 14px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
[data-theme="dark"] .dup-error-box, body.theme-dark .dup-error-box {
  background: rgba(239,68,68,0.15);
  border-color: rgba(239,68,68,0.35);
  color: #fca5a5;
}

/* ============================================================
   MAIN APP LAYOUT
   ============================================================ */
.app {
  display: flex;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}

/* ============================================================
   SIDEBAR
   ============================================================ */
.sidebar {
  width: var(--sidebar-width);
  min-width: var(--sidebar-width);
  max-width: var(--sidebar-width);
  height: 100vh;
  background: var(--sidebar-bg);
  border-right: 1px solid var(--sidebar-border);
  display: flex;
  flex-direction: column;
  transition: width 0.3s var(--ease-out), min-width 0.3s var(--ease-out), max-width 0.3s var(--ease-out);
  overflow-x: hidden !important;
  overflow-y: hidden;
  box-sizing: border-box;
  z-index: 100;
  flex-shrink: 0;
}

.sidebar.collapsed {
  width: var(--sidebar-collapsed);
  min-width: var(--sidebar-collapsed);
  max-width: var(--sidebar-collapsed);
}
.sidebar.collapsed .nav-label,
.sidebar.collapsed .nav-section-label,
.sidebar.collapsed .user-info,
.sidebar.collapsed .sidebar-logo div { display: none; }
.sidebar.collapsed .sidebar-header {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 12px 6px;
}
.sidebar.collapsed .sidebar-logo {
  justify-content: center;
  margin: 0;
  cursor: pointer;
}
.sidebar.collapsed .sidebar-collapse-btn {
  display: flex !important;
  width: 28px;
  height: 28px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  background: var(--bg-surface-2);
  border: 1px solid var(--border-subtle);
  color: var(--brand-primary);
  border-radius: 6px;
  margin: 0 auto;
}
.sidebar.collapsed .sidebar-collapse-btn:hover {
  background: var(--brand-primary);
  color: #ffffff;
}
.sidebar.collapsed .nav-item { justify-content: center; padding: 12px; }
.sidebar.collapsed .nav-badge { display: none; }
.sidebar.collapsed .user-info { display: none; }
.sidebar.collapsed .sidebar-user { justify-content: center; }

/* Hide redundant topbar elements per UX preferences */
#topbar-cloud-status, #global-email-reminders-btn, #topbar-tour-btn {
  display: none !important;
}

#ehs-cloud-sync-badge {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  transition: all 0.2s ease;
  z-index: 1000;
}

.sidebar-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 14px;
  border-bottom: 1px solid var(--sidebar-border);
  min-height: 64px;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  flex-shrink: 0;
}

.sidebar-logo {
  display: flex; align-items: center; gap: 10px;
  min-width: 0;
  overflow: hidden;
}
.sidebar-logo-icon { font-size: 22px; filter: drop-shadow(0 0 8px rgba(59,130,246,0.5)); flex-shrink: 0; }
.sidebar-logo-text {
  font-family: 'Outfit', sans-serif;
  font-size: 17px; font-weight: 700;
  white-space: nowrap;
  line-height: 1.2;
}
.sidebar-logo-text span { color: var(--brand-primary); }
.sidebar-company { font-size: 11px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 155px; line-height: 1.2; margin-top: 2px; }

.sidebar-collapse-btn {
  background: var(--bg-surface-2);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  width: 26px; height: 26px;
  border-radius: 6px;
  font-size: 16px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s;
  flex-shrink: 0;
}
.sidebar-collapse-btn:hover { background: var(--bg-card); color: var(--text-primary); }

.sidebar-nav {
  flex: 1 1 auto;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 10px 8px;
  scrollbar-width: thin;
  scrollbar-color: var(--border-subtle) transparent;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
}
.sidebar-nav::-webkit-scrollbar {
  width: 4px;
}
.sidebar-nav::-webkit-scrollbar-track {
  background: transparent;
}
.sidebar-nav::-webkit-scrollbar-thumb {
  background: var(--border-subtle);
  border-radius: 4px;
}
.sidebar-nav::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}

.nav-section-label {
  font-size: 10px; font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0.8px;
  padding: 14px 10px 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  user-select: none;
}

.nav-item {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: 12.5px; font-weight: 500;
  transition: all 0.2s;
  position: relative;
  cursor: pointer;
  margin-bottom: 2px;
  white-space: nowrap;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}
.nav-item:hover { background: var(--bg-card); color: var(--text-primary); }
.nav-item.active {
  background: var(--sidebar-active-bg);
  color: var(--sidebar-active-text);
  border: 1px solid var(--border-active);
}
.nav-item.active::before {
  content: '';
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 3px; height: 60%;
  background: var(--brand-primary);
  border-radius: 0 3px 3px 0;
}
.nav-icon { font-size: 15px; flex-shrink: 0; width: 20px; text-align: center; display: inline-flex; align-items: center; justify-content: center; }
.nav-label {
  flex: 1 1 0%;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.25;
}
.nav-badge {
  font-size: 10px; font-weight: 700;
  padding: 1.5px 6px;
  border-radius: 100px;
  margin-left: auto;
  flex-shrink: 0;
  white-space: nowrap;
  letter-spacing: 0.2px;
}
.nav-badge.urgent { background: rgba(239,68,68,0.2); color: #ef4444; border: 1px solid rgba(239,68,68,0.3); }
.nav-badge.warn { background: rgba(245,158,11,0.2); color: #f59e0b; border: 1px solid rgba(245,158,11,0.3); }
.nav-badge.ok { background: rgba(34,197,94,0.2); color: #22c55e; border: 1px solid rgba(34,197,94,0.3); }

.sidebar-user {
  display: flex; align-items: center; gap: 9px;
  padding: 12px 14px;
  border-top: 1px solid var(--sidebar-border);
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  background: var(--sidebar-bg);
  flex-shrink: 0;
}
.user-avatar {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-purple));
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
  color: white; flex-shrink: 0;
}
.user-info {
  flex: 1 1 0%;
  min-width: 0;
  overflow: hidden;
}
.user-name { font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; }
.user-role { font-size: 10.5px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.25; }
.btn-logout {
  margin-left: auto;
  background: none;
  color: var(--text-muted);
  font-size: 16px;
  padding: 4px;
  border-radius: 4px;
  transition: all 0.2s;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.btn-logout:hover { color: var(--brand-danger); background: rgba(239, 68, 68, 0.1); }

/* ============================================================
   MAIN CONTENT
   ============================================================ */
.main-content {
  flex: 1 1 0%;
  min-width: 0;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg-base);
  height: 100vh;
}

/* TOPBAR */
.topbar {
  height: var(--topbar-height);
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-subtle);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 20px;
  gap: 12px;
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}
.topbar-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex-shrink: 1;
  overflow: hidden;
}
.menu-toggle {
  background: none; color: var(--text-secondary);
  font-size: 20px;
  padding: 4px 8px;
  border-radius: 6px;
  transition: background 0.2s;
  flex-shrink: 0;
}
.menu-toggle:hover { background: var(--bg-card); color: var(--text-primary); }
.page-breadcrumb {
  font-size: 15px; font-weight: 600;
  color: var(--text-primary);
  display: flex; align-items: center; gap: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.topbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.topbar-search {
  display: flex; align-items: center; gap: 8px;
  background: var(--bg-input);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 7px 12px;
  min-width: 140px;
  max-width: 220px;
}
.topbar-search span { color: var(--text-muted); font-size: 13px; flex-shrink: 0; }
.topbar-search input {
  background: none; border: none;
  color: var(--text-primary); font-size: 13px;
  width: 100%;
  min-width: 0;
}
.topbar-btn {
  background: var(--bg-input);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  width: 36px; height: 36px;
  border-radius: var(--radius-sm);
  font-size: 15px;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.2s;
  position: relative;
  flex-shrink: 0;
}
.topbar-btn:hover { background: var(--bg-card); color: var(--text-primary); }

/* TOPBAR ACTION PILL BUTTONS (AI EXTRACT, EMAIL REMINDERS, TOUR) */
.topbar-pill-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  height: 34px !important;
  width: auto !important;
  min-width: max-content !important;
  padding: 0 12px !important;
  border-radius: 18px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  line-height: 1 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  box-sizing: border-box !important;
}

.topbar-pill-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.06);
}

.topbar-pill-btn.ai-pill {
  background: linear-gradient(135deg, rgba(37,99,235,0.12), rgba(16,185,129,0.12)) !important;
  border: 1px solid rgba(37,99,235,0.35) !important;
  color: var(--brand-primary) !important;
}
.topbar-pill-btn.ai-pill:hover {
  background: linear-gradient(135deg, rgba(37,99,235,0.2), rgba(16,185,129,0.2)) !important;
  box-shadow: 0 2px 8px rgba(37,99,235,0.2);
}

.topbar-pill-btn.reminder-pill {
  background: linear-gradient(135deg, rgba(8,145,178,0.12), rgba(6,182,212,0.12)) !important;
  border: 1px solid rgba(8,145,178,0.35) !important;
  color: #0891b2 !important;
}
.topbar-pill-btn.reminder-pill:hover {
  background: linear-gradient(135deg, rgba(8,145,178,0.2), rgba(6,182,212,0.2)) !important;
  box-shadow: 0 2px 8px rgba(8,145,178,0.2);
}

.topbar-pill-btn.tour-pill {
  background: var(--bg-surface-2) !important;
  border: 1px solid var(--border-subtle) !important;
  color: var(--text-secondary) !important;
  font-weight: 600 !important;
}
.topbar-pill-btn.tour-pill:hover {
  background: var(--bg-card) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}

.notif-dot {
  position: absolute; top: 5px; right: 5px;
  width: 8px; height: 8px;
  background: var(--brand-danger);
  border-radius: 50%;
  border: 2px solid var(--bg-surface);
}
.topbar-avatar {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-purple));
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: white;
  cursor: pointer;
  flex-shrink: 0;
}

/* CONTENT AREA */
.content-area {
  flex: 1 1 0%;
  min-width: 0;
  max-width: 100%;
  overflow-y: auto;
  overflow-x: hidden; /* App-wide fit: ensures no horizontal viewport scrolling */
  padding: var(--content-padding, 24px);
  scrollbar-width: thin;
  scrollbar-color: var(--border-subtle) transparent;
  transition: padding 0.2s ease;
  box-sizing: border-box;
}
.content-area > * {
  max-width: var(--content-max-width, 1600px);
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
  transition: max-width 0.25s ease;
}

/* ============================================================
   SHARED CARD & COMPONENTS
   ============================================================ */
.module-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  margin-bottom: 28px;
  flex-wrap: wrap;
  gap: 16px;
}
.module-title { font-family: 'Outfit', sans-serif; font-size: 26px; font-weight: 700; line-height: 1.2; }
.module-subtitle { color: var(--text-secondary); font-size: 14px; margin-top: 4px; }
.module-actions { display: flex; gap: 10px; }

.card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--card-padding, 24px);
  transition: all 0.2s;
  box-shadow: var(--card-shadow);
}
.card:hover {
  border-color: var(--border-active);
  box-shadow: var(--card-shadow-hover);
}
.card-title {
  font-size: 14px; font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase; letter-spacing: 0.5px;
  margin-bottom: 12px;
  display: flex; align-items: center; gap: 8px;
}

/* BUTTONS */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: var(--btn-padding-y, 9px) var(--btn-padding-x, 18px);
  border-radius: var(--radius-sm);
  font-size: 13px; font-weight: 600;
  transition: all 0.2s;
  white-space: nowrap;
}
.btn-primary {
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));
  color: white;
  box-shadow: 0 2px 10px var(--brand-primary-glow);
}
.btn-primary:hover { box-shadow: 0 4px 20px var(--brand-primary-glow); transform: translateY(-1px); }
.btn-secondary {
  background: var(--bg-surface-2);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
}
.btn-secondary:hover { background: var(--bg-card); color: var(--text-primary); }
.btn-danger { background: rgba(239,68,68,0.15); border: 1px solid rgba(239,68,68,0.3); color: #ef4444; }
.btn-success { background: rgba(34,197,94,0.15); border: 1px solid rgba(34,197,94,0.3); color: #22c55e; }
.btn-warn { background: rgba(245,158,11,0.15); border: 1px solid rgba(245,158,11,0.3); color: #f59e0b; }
.btn-sm { padding: 5px 12px; font-size: 12px; }

/* STATUS BADGES */
.status {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px;
  border-radius: 100px;
  font-size: 11px; font-weight: 600;
}
.status::before { content: '●'; font-size: 8px; }
.status-ok, .status-compliant, .status-approved, .status-active, .status-valid, .status-open, .status-pass {
  background: rgba(34,197,94,0.15); color: #22c55e; border: 1px solid rgba(34,197,94,0.25);
}
.status-warn, .status-review, .status-expiring, .status-pending, .status-moderate, .status-in-progress {
  background: rgba(245,158,11,0.15); color: #f59e0b; border: 1px solid rgba(245,158,11,0.25);
}
.status-danger, .status-overdue, .status-high, .status-closed-incident, .status-rejected, .status-expired, .status-fail {
  background: rgba(239,68,68,0.15); color: #ef4444; border: 1px solid rgba(239,68,68,0.25);
}
.status-info, .status-low, .status-closed {
  background: rgba(59,130,246,0.15); color: #60a5fa; border: 1px solid rgba(59,130,246,0.25);
}
.status-purple {
  background: rgba(139,92,246,0.15); color: #a78bfa; border: 1px solid rgba(139,92,246,0.25);
}

/* GRID LAYOUTS */
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.grid-auto { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 20px; }

/* ============================================================
   DASHBOARD — KPI STAT CARDS
   ============================================================ */
.stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 22px 24px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.stat-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.3); }
.stat-card-glow {
  position: absolute; top: -20px; right: -20px;
  width: 100px; height: 100px;
  border-radius: 50%;
  filter: blur(40px);
  opacity: 0.3;
  pointer-events: none;
}
.stat-icon {
  font-size: 24px;
  width: 48px; height: 48px;
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
}
.stat-value {
  font-family: 'Outfit', sans-serif;
  font-size: 36px; font-weight: 800;
  line-height: 1;
  margin-bottom: 4px;
}
.stat-label { font-size: 13px; color: var(--text-secondary); }
.stat-delta {
  font-size: 12px; font-weight: 600;
  margin-top: 8px;
  display: flex; align-items: center; gap: 4px;
}
.delta-up { color: #22c55e; }
.delta-down { color: #ef4444; }

/* ============================================================
   TABLES
   ============================================================ */
.table-wrapper {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow-x: auto;
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
}
.table-header-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-subtle);
  gap: 12px;
  flex-wrap: wrap;
}
.table-header-bar h3 { font-size: 15px; font-weight: 600; }
.table-search {
  display: flex; align-items: center; gap: 8px;
  background: var(--bg-input);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 7px 12px;
}
.table-search input { background: none; border: none; color: var(--text-primary); font-size: 13px; width: 180px; }

table { width: 100%; border-collapse: collapse; }
thead tr {
  background: var(--bg-surface-2);
  border-bottom: 1px solid var(--border-subtle);
}
thead th {
  padding: var(--table-cell-padding-y, 12px) var(--table-cell-padding-x, 16px);
  text-align: left;
  font-size: 11px; font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.8px;
  white-space: nowrap;
}
tbody tr {
  border-bottom: 1px solid var(--border-subtle);
  transition: background 0.15s;
}
tbody tr:last-child { border-bottom: none; }
tbody tr:hover { background: var(--bg-surface-2); }
tbody td {
  padding: var(--table-cell-padding-y, 13px) var(--table-cell-padding-x, 16px);
  font-size: 13px;
  color: var(--text-primary);
  vertical-align: middle;
}
.td-muted { color: var(--text-secondary); }
.td-mono { font-family: monospace; font-size: 12px; color: var(--text-accent); }

/* ============================================================
   DASHBOARD SPECIFIC
   ============================================================ */
.dash-welcome {
  background: linear-gradient(135deg, rgba(59,130,246,0.1), rgba(139,92,246,0.05));
  border: 1px solid rgba(59,130,246,0.2);
  border-radius: var(--radius-lg);
  padding: 28px 32px;
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 28px;
}
.dash-welcome-text h2 {
  font-family: 'Outfit', sans-serif;
  font-size: 22px; font-weight: 700;
  margin-bottom: 6px;
}
.dash-welcome-text p { color: var(--text-secondary); font-size: 14px; }
.dash-welcome-meta {
  text-align: right;
  color: var(--text-secondary);
  font-size: 13px;
}
.dash-welcome-meta strong { color: var(--text-primary); display: block; font-size: 22px; font-family: 'Outfit', sans-serif; }

.alert-card {
  background: rgba(239,68,68,0.08);
  border: 1px solid rgba(239,68,68,0.25);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  display: flex; align-items: flex-start; gap: 12px;
  margin-bottom: 10px;
}
.alert-card-warn { background: rgba(245,158,11,0.08); border-color: rgba(245,158,11,0.25); }
.alert-card-info { background: rgba(59,130,246,0.08); border-color: rgba(59,130,246,0.2); }
.alert-icon { font-size: 18px; flex-shrink: 0; margin-top: 1px; }
.alert-content { flex: 1; }
.alert-title { font-size: 13px; font-weight: 600; margin-bottom: 2px; }
.alert-desc { font-size: 12px; color: var(--text-secondary); line-height: 1.5; }
.alert-action { margin-left: auto; font-size: 12px; color: var(--brand-primary); font-weight: 600; white-space: nowrap; cursor: pointer; }

.compliance-gauge {
  text-align: center; padding: 12px 0;
}
.gauge-circle {
  width: 120px; height: 120px;
  border-radius: 50%;
  margin: 0 auto 12px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  position: relative;
}
.gauge-value { font-family: 'Outfit', sans-serif; font-size: 28px; font-weight: 800; }
.gauge-label { font-size: 11px; color: var(--text-secondary); }

/* Progress bar */
.progress-bar {
  height: 6px;
  background: var(--bg-input);
  border-radius: 100px;
  overflow: hidden;
  margin-top: 6px;
}
.progress-fill {
  height: 100%;
  border-radius: 100px;
  transition: width 1s var(--ease-out);
}

/* Activity feed */
.activity-item {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 12px 0;
  border-bottom: 1px solid var(--border-subtle);
}
.activity-item:last-child { border-bottom: none; }
.activity-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 5px;
}
.activity-meta { font-size: 11px; color: var(--text-muted); margin-top: 2px; }

/* ============================================================
   HIRARC MODULE
   ============================================================ */
.risk-matrix-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
}
.risk-cell {
  aspect-ratio: 1;
  border-radius: 4px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700;
  cursor: pointer;
  transition: transform 0.15s;
}
.risk-cell:hover { transform: scale(1.05); }
.risk-extreme { background: rgba(239,68,68,0.3); color: #ef4444; border: 1px solid rgba(239,68,68,0.4); }
.risk-high { background: rgba(249,115,22,0.3); color: #f97316; border: 1px solid rgba(249,115,22,0.4); }
.risk-medium { background: rgba(245,158,11,0.3); color: #f59e0b; border: 1px solid rgba(245,158,11,0.4); }
.risk-low { background: rgba(34,197,94,0.3); color: #22c55e; border: 1px solid rgba(34,197,94,0.4); }

/* ============================================================
   LEGAL REGISTER
   ============================================================ */
.act-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 20px;
  transition: all 0.2s;
  cursor: pointer;
}
.act-card:hover { border-color: var(--brand-primary); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.2); }
.act-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.act-title { font-size: 14px; font-weight: 700; line-height: 1.3; }
.act-code { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.act-obligations { font-size: 12px; color: var(--text-secondary); margin: 10px 0; line-height: 1.6; }
.act-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; }
.act-review-date { font-size: 11px; color: var(--text-muted); }

/* ============================================================
   PTW (PERMIT TO WORK)
   ============================================================ */
.ptw-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 20px;
  transition: all 0.2s;
}
.ptw-card:hover {
  border-color: var(--border-active);
  box-shadow: var(--card-shadow-hover);
  transform: translateY(-1px);
}
.ptw-type-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px;
  border-radius: 100px;
  font-size: 11px; font-weight: 700;
  margin-bottom: 12px;
}
.ptw-hot { background: rgba(239,68,68,0.15); color: #ef4444; border: 1px solid rgba(239,68,68,0.3); }
.ptw-confined { background: rgba(245,158,11,0.15); color: #f59e0b; border: 1px solid rgba(245,158,11,0.3); }
.ptw-electrical { background: rgba(59,130,246,0.15); color: #60a5fa; border: 1px solid rgba(59,130,246,0.3); }
.ptw-cold { background: rgba(6,182,212,0.15); color: #22d3ee; border: 1px solid rgba(6,182,212,0.3); }
.ptw-working-height { background: rgba(139,92,246,0.15); color: #a78bfa; border: 1px solid rgba(139,92,246,0.3); }

/* ============================================================
   MODAL
   ============================================================ */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(5px);
  z-index: 2000;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity 0.2s;
}
[data-theme="dark"] .modal-overlay, body.theme-dark .modal-overlay {
  background: rgba(0, 0, 0, 0.8);
}
.modal-overlay.open, .modal-overlay.show { opacity: 1; pointer-events: all; }
.modal {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  width: 100%; max-width: 680px;
  max-height: 88vh;
  overflow-y: auto;
  transform: scale(0.95);
  transition: transform 0.2s var(--ease-out);
  box-shadow: var(--modal-shadow);
}
.modal-overlay.open .modal, .modal-overlay.show .modal { transform: scale(1); }
.modal.modal-ai-pdf-wide {
  max-width: 1240px;
  width: 95vw;
  max-height: 94vh;
}
.modal.modal-roster-wide {
  max-width: 1020px;
  width: 95vw;
  max-height: 92vh;
}
.modal.modal-wide, .modal.modal-settings {
  max-width: 980px;
  width: 95vw;
  max-height: 92vh;
}

.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border-subtle);
  position: sticky; top: 0;
  background: var(--bg-surface);
  z-index: 10;
}
.modal-header h3 { font-size: 17px; font-weight: 700; }
.modal-close {
  background: var(--bg-card); border: 1px solid var(--border-subtle);
  color: var(--text-secondary); width: 32px; height: 32px;
  border-radius: 8px; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.2s;
}
.modal-close:hover { background: rgba(239,68,68,0.2); color: #ef4444; }
.modal-body { padding: 24px; }
.modal-footer { padding: 16px 24px; border-top: 1px solid var(--border-subtle); display: flex; align-items: center; justify-content: flex-end; gap: 12px; flex-wrap: wrap; background: var(--bg-surface); }

.modal-field { margin-bottom: 20px; }
.modal-field label { display: block; font-size: 12px; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; }
.modal-field input,
.modal-field select,
.modal-field textarea {
  width: 100%;
  background: var(--bg-input);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  color: var(--text-primary);
  font-size: 14px;
  transition: border-color 0.2s;
}
.modal-field input:focus,
.modal-field select:focus,
.modal-field textarea:focus { border-color: var(--brand-primary); }
.modal-field textarea { min-height: 100px; resize: vertical; line-height: 1.6; }
.modal-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* ============================================================
   NOTIFICATION PANEL (ENHANCED FOR REAL-TIME STATUTORY ACTION)
   ============================================================ */
.notif-panel {
  position: fixed; right: -420px; top: 0; bottom: 0;
  width: 390px;
  max-width: 90vw;
  background: var(--bg-surface);
  border-left: 1px solid var(--border-subtle);
  z-index: 2500;
  transition: right 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex; flex-direction: column;
  box-shadow: -8px 0 32px rgba(0,0,0,0.18);
}
.notif-panel.open { right: 0; }
.notif-panel-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-surface-2);
}
.notif-panel-header h3 { font-size: 16px; font-weight: 800; display: flex; align-items: center; gap: 8px; }
.notif-panel-header button { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: 6px; width: 30px; height: 30px; color: var(--text-secondary); font-size: 14px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.notif-panel-header button:hover { color: #ef4444; }
.notif-list { flex: 1; overflow-y: auto; padding: 14px; }
.notif-item {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  margin-bottom: 10px;
  transition: all 0.2s;
  position: relative;
}
.notif-item:hover { border-color: var(--brand-primary); transform: translateX(-2px); }
.notif-item.is-urgent { border-left: 4px solid #ef4444; background: linear-gradient(90deg, rgba(239,68,68,0.04), transparent); }
.notif-item.is-warn { border-left: 4px solid #f59e0b; background: linear-gradient(90deg, rgba(245,158,11,0.04), transparent); }
.notif-item.is-info { border-left: 4px solid #0891b2; }
.notif-item.is-read { opacity: 0.65; }
.notif-item-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 5px; gap: 6px; }
.notif-item-title { font-size: 12.5px; font-weight: 700; color: var(--text-primary); line-height: 1.35; }
.notif-item-time { font-size: 10.5px; color: var(--text-muted); white-space: nowrap; }
.notif-item-body { font-size: 11.5px; color: var(--text-secondary); line-height: 1.45; margin-bottom: 8px; }
.notif-action-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--border-subtle); }
.notif-badge-count {
  background: #ef4444;
  color: #ffffff;
  font-size: 10px;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 10px;
  margin-left: 4px;
}

/* AI PDF EXTRACTOR MODERN SCANNER & WORKSPACE STYLES */
@keyframes aiScanBeam {
  0% { top: 0%; opacity: 0.9; }
  50% { top: 96%; opacity: 1; }
  100% { top: 0%; opacity: 0.9; }
}
.ai-scan-laser-line {
  position: absolute;
  left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, #06b6d4, #3b82f6, transparent);
  box-shadow: 0 0 10px #06b6d4, 0 0 20px #3b82f6;
  animation: aiScanBeam 2.2s ease-in-out infinite;
  z-index: 5;
}

/* ============================================================
   RESPONSIVE TWEAKS
   ============================================================ */
@media (max-width: 1200px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .grid-3 { grid-template-columns: 1fr 1fr; }
  .grid-2 { grid-template-columns: 1fr; }
  .dash-welcome { flex-direction: column; gap: 12px; }
  .dash-welcome-meta { text-align: left; }
}
@media (max-width: 640px) {
  .grid-4 { grid-template-columns: 1fr 1fr; }
  .grid-3 { grid-template-columns: 1fr; }
  .content-area { padding: 16px; }
  .topbar-search { display: none; }
}

/* ============================================================
   MODULE TABS
   ============================================================ */
.module-tabs {
  display: flex; gap: 4px;
  background: var(--bg-surface-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 4px;
  margin-bottom: 24px;
  overflow-x: auto;
}
.module-tab {
  padding: 8px 18px;
  border-radius: var(--radius-sm);
  font-size: 13px; font-weight: 500;
  color: var(--text-secondary);
  transition: all 0.2s;
  white-space: nowrap;
  cursor: pointer;
  background: none; border: none;
}
.module-tab.active {
  background: var(--bg-card);
  color: var(--text-primary);
  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
.module-tab:hover:not(.active) { color: var(--text-primary); }

/* ============================================================
   FORM SECTION
   ============================================================ */
.form-section-title {
  font-size: 13px; font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase; letter-spacing: 0.5px;
  padding-bottom: 10px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border-subtle);
}

/* ============================================================
   TRAINING MODULE
   ============================================================ */
.competency-row {
  display: grid;
  align-items: center;
  gap: 8px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-subtle);
}
.competency-row:last-child { border-bottom: none; }
.competency-dot {
  width: 28px; height: 28px;
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
  cursor: pointer;
  transition: transform 0.15s;
}
.competency-dot:hover { transform: scale(1.15); }

/* ============================================================
   ENVIRONMENT MODULE
   ============================================================ */
.env-metric-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 22px;
  position: relative;
  overflow: hidden;
}
.env-metric-value {
  font-family: 'Outfit', sans-serif;
  font-size: 40px; font-weight: 800;
  line-height: 1;
}
.env-metric-unit { font-size: 14px; color: var(--text-secondary); margin-left: 4px; }
.env-limit { font-size: 12px; color: var(--text-muted); margin-top: 4px; }
.env-bar { margin-top: 14px; }

/* ============================================================
   LEGAL REGISTER & ACT SECTIONS ENHANCEMENTS
   ============================================================ */
.modal.modal-wide { max-width: 900px; }
.modal.modal-xl { max-width: 1040px; }

.legal-stats-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  margin-bottom: 24px;
}
.legal-stat-box {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 16px 20px;
  position: relative;
  overflow: hidden;
  transition: transform 0.2s, border-color 0.2s;
}
.legal-stat-box:hover {
  transform: translateY(-2px);
  border-color: var(--border-active);
}
.legal-stat-number {
  font-family: 'Outfit', sans-serif;
  font-size: 30px;
  font-weight: 800;
  line-height: 1.1;
}
.legal-stat-label {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 4px;
}
.legal-stat-hint {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}

/* Act Selection Pills */
.act-pill-bar {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 8px;
  margin-bottom: 16px;
}
.act-pill {
  padding: 8px 14px;
  background: var(--bg-surface-2);
  border: 1px solid var(--border-subtle);
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 6px;
}
.act-pill:hover {
  color: var(--text-primary);
  border-color: rgba(59, 130, 246, 0.4);
}
.act-pill.active {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
  color: #ffffff;
  box-shadow: 0 4px 12px var(--brand-primary-glow);
}
[data-theme="dark"] .act-pill.active, body.theme-dark .act-pill.active {
  background: rgba(59, 130, 246, 0.25);
  border-color: #3b82f6;
  color: #93c5fd;
  box-shadow: 0 0 12px rgba(59, 130, 246, 0.35);
}

/* Secondary Filter Bar (Doc Required vs Info Only) */
.subfilter-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 20px;
  background: var(--bg-surface-2);
  padding: 8px 12px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
}
.type-toggle-group {
  display: flex;
  gap: 6px;
}
.type-toggle-btn {
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 6px;
}
.type-toggle-btn:hover {
  color: var(--text-primary);
}
.type-toggle-btn.active {
  background: var(--bg-card);
  color: var(--text-primary);
  border-color: var(--border-subtle);
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}
.type-toggle-btn.btn-filter-doc.active {
  background: #fef3c7;
  border-color: #f59e0b;
  color: #92400e;
}
.type-toggle-btn.btn-filter-info.active {
  background: #eff6ff;
  border-color: #3b82f6;
  color: #1d4ed8;
}
[data-theme="dark"] .type-toggle-btn.btn-filter-doc.active, body.theme-dark .type-toggle-btn.btn-filter-doc.active {
  background: rgba(245, 158, 11, 0.15);
  border-color: rgba(245, 158, 11, 0.4);
  color: #fbbf24;
}
[data-theme="dark"] .type-toggle-btn.btn-filter-info.active, body.theme-dark .type-toggle-btn.btn-filter-info.active {
  background: rgba(59, 130, 246, 0.15);
  border-color: rgba(59, 130, 246, 0.4);
  color: #60a5fa;
}

/* Badges for Legal Register */
.badge-doc-required {
  background: #fef3c7;
  border: 1px solid #fde68a;
  color: #92400e;
  padding: 3px 9px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
[data-theme="dark"] .badge-doc-required, body.theme-dark .badge-doc-required {
  background: rgba(245, 158, 11, 0.16);
  border: 1px solid rgba(245, 158, 11, 0.35);
  color: #fbbf24;
}

.badge-info-only {
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  color: #475569;
  padding: 3px 9px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
[data-theme="dark"] .badge-info-only, body.theme-dark .badge-info-only {
  background: rgba(148, 163, 184, 0.12);
  border: 1px solid rgba(148, 163, 184, 0.25);
  color: #94a3b8;
}

.badge-act-tag {
  background: #ede9fe;
  border: 1px solid #ddd6fe;
  color: #6d28d9;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  font-family: 'Outfit', sans-serif;
  white-space: nowrap;
}
[data-theme="dark"] .badge-act-tag, body.theme-dark .badge-act-tag {
  background: rgba(139, 92, 246, 0.15);
  border: 1px solid rgba(139, 92, 246, 0.3);
  color: #c4b5fd;
}

/* Section Row Highlight */
tr.row-doc-required {
  border-left: 3px solid #d97706;
}
tr.row-info-only {
  border-left: 3px solid #94a3b8;
  background: rgba(241, 245, 249, 0.5);
}
[data-theme="dark"] tr.row-info-only, body.theme-dark tr.row-info-only {
  border-left: 3px solid #64748b;
  background: rgba(15, 23, 42, 0.2);
}
tr.row-doc-required:hover {
  background: rgba(245, 158, 11, 0.05);
}

/* Document Upload & Audit Status in Table */
.doc-evidence-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.doc-name-tag {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
}
.doc-file-status {
  font-size: 11px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.doc-file-status.uploaded { color: #16a34a; }
.doc-file-status.missing { color: #dc2626; }
.doc-file-status.pending { color: #d97706; }
[data-theme="dark"] .doc-file-status.uploaded, body.theme-dark .doc-file-status.uploaded { color: #22c55e; }
[data-theme="dark"] .doc-file-status.missing, body.theme-dark .doc-file-status.missing { color: #f87171; }
[data-theme="dark"] .doc-file-status.pending, body.theme-dark .doc-file-status.pending { color: #f59e0b; }

/* Badges for Applicability / Non-Applicability */
.badge-na {
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  color: #64748b;
  padding: 3px 9px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
[data-theme="dark"] .badge-na, body.theme-dark .badge-na {
  background: rgba(100, 116, 139, 0.18);
  border: 1px solid rgba(148, 163, 184, 0.3);
  color: #94a3b8;
}

.status-na {
  background: #f1f5f9;
  color: #64748b;
  border: 1px solid #cbd5e1;
  padding: 3px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
[data-theme="dark"] .status-na, body.theme-dark .status-na {
  background: rgba(100, 116, 139, 0.18);
  color: #94a3b8;
  border: 1px solid rgba(148, 163, 184, 0.3);
}

tr.row-not-applicable {
  border-left: 3px solid #94a3b8;
  opacity: 0.82;
  background: rgba(248, 250, 252, 0.6);
}
[data-theme="dark"] tr.row-not-applicable, body.theme-dark tr.row-not-applicable {
  border-left: 3px solid #475569;
  opacity: 0.78;
  background: rgba(15, 23, 42, 0.35);
}
tr.row-not-applicable:hover {
  opacity: 1;
}

.na-reason-box {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 4px 8px;
  border-radius: 6px;
  background: rgba(100, 116, 139, 0.08);
  border: 1px dashed rgba(100, 116, 139, 0.25);
}
.na-tag {
  font-size: 10px;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
[data-theme="dark"] .na-tag, body.theme-dark .na-tag {
  color: #94a3b8;
}
.na-text {
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.35;
  font-style: italic;
}
.na-criteria-hint {
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 3px;
  line-height: 1.3;
}

/* Applicability Wizard Modal Styling */
.wizard-section-box {
  background: var(--bg-canvas);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 12px;
}
.wizard-question-label {
  font-weight: 700;
  font-size: 13px;
  color: var(--text-primary);
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.wizard-radio-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border: 1px solid var(--border-subtle);
  padding: 12px;
  border-radius: 8px;
  background: var(--bg-card);
  cursor: pointer;
  transition: all 0.2s ease;
}
.wizard-radio-card:hover {
  border-color: #3b82f6;
  background: rgba(59, 130, 246, 0.04);
}
.wizard-radio-card.selected,
.wizard-radio-card:has(input[type="radio"]:checked) {
  border-color: #3b82f6;
  background: rgba(59, 130, 246, 0.08);
  box-shadow: 0 0 0 1px #3b82f6;
}
.wizard-radio-card input[type="radio"] {
  margin-top: 3px;
  cursor: pointer;
}
.wizard-radio-card-content {
  flex: 1;
}
.wizard-radio-title {
  font-weight: 700;
  font-size: 12px;
  color: var(--text-primary);
  margin-bottom: 3px;
}
.wizard-radio-desc {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.4;
}

.wizard-checkbox-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 10px;
}
.wizard-checkbox-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border: 1px solid var(--border-subtle);
  padding: 12px;
  border-radius: 8px;
  background: var(--bg-card);
  cursor: pointer;
  transition: all 0.2s ease;
}
.wizard-checkbox-card:hover {
  border-color: #3b82f6;
  background: rgba(59, 130, 246, 0.04);
}
.wizard-checkbox-card:has(input[type="checkbox"]:checked) {
  border-color: rgba(59, 130, 246, 0.5);
  background: rgba(59, 130, 246, 0.04);
}
.wizard-checkbox-card input[type="checkbox"] {
  margin-top: 3px;
  cursor: pointer;
}
.wizard-check-title {
  font-weight: 700;
  font-size: 12px;
  color: var(--text-primary);
  margin-bottom: 3px;
}
.wizard-check-desc {
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.4;
}


/* ============================================================
   AI ROBOT AUDITOR MODAL STYLING
   ============================================================ */
.ai-robot-banner {
  display: flex;
  align-items: center;
  gap: 16px;
  background: linear-gradient(135deg, #eff6ff, #f0fdf4);
  border: 1px solid #bfdbfe;
  border-radius: var(--radius-lg);
  padding: 16px 20px;
  margin-bottom: 20px;
  position: relative;
  overflow: hidden;
}
.ai-robot-banner::after {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0; width: 120px;
  background: radial-gradient(circle at right, rgba(59, 130, 246, 0.15), transparent);
  pointer-events: none;
}
[data-theme="dark"] .ai-robot-banner, body.theme-dark .ai-robot-banner {
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.9), rgba(15, 23, 42, 0.95));
  border-color: rgba(59, 130, 246, 0.3);
}

.robot-avatar-wrap {
  width: 52px;
  height: 52px;
  background: linear-gradient(135deg, #2563eb, #7c3aed);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  box-shadow: 0 0 20px rgba(59, 130, 246, 0.4);
  position: relative;
  flex-shrink: 0;
  animation: robotGlow 3s ease-in-out infinite alternate;
}
@keyframes robotGlow {
  0% { box-shadow: 0 0 12px rgba(59, 130, 246, 0.3); }
  100% { box-shadow: 0 0 24px rgba(139, 92, 246, 0.6); }
}

.ai-robot-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
}
.ai-robot-badge {
  background: rgba(34, 197, 94, 0.15);
  border: 1px solid rgba(34, 197, 94, 0.35);
  color: #15803d;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 100px;
  letter-spacing: 0.5px;
}
[data-theme="dark"] .ai-robot-badge, body.theme-dark .ai-robot-badge {
  color: #4ade80;
  border-color: rgba(34, 197, 94, 0.4);
}
.ai-robot-desc {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 3px;
  line-height: 1.4;
}

/* CRITICAL PDF WARNING / OCR REMINDER NOTICE */
.pdf-ocr-notice {
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-left: 4px solid #f59e0b;
  border-radius: var(--radius-md);
  padding: 14px 18px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 20px;
  animation: noticeFade 0.4s ease-out;
}
@keyframes noticeFade {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}
.notice-icon-box {
  width: 34px;
  height: 34px;
  background: #fef3c7;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
  color: #b45309;
}
.notice-title {
  font-size: 13px;
  font-weight: 700;
  color: #92400e;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.notice-body {
  font-size: 12px;
  line-height: 1.55;
  color: #78350f;
}
.notice-body strong {
  color: #451a03;
}

[data-theme="dark"] .pdf-ocr-notice, body.theme-dark .pdf-ocr-notice {
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.35);
  border-left: 4px solid #f59e0b;
}
[data-theme="dark"] .notice-icon-box, body.theme-dark .notice-icon-box {
  background: rgba(245, 158, 11, 0.2);
  color: #f59e0b;
}
[data-theme="dark"] .notice-title, body.theme-dark .notice-title {
  color: #fbbf24;
}
[data-theme="dark"] .notice-body, body.theme-dark .notice-body {
  color: #cbd5e1;
}
[data-theme="dark"] .notice-body strong, body.theme-dark .notice-body strong {
  color: #fef3c7;
}

/* PDF Upload Dropzone */
.pdf-dropzone {
  border: 2px dashed rgba(37, 99, 235, 0.35);
  border-radius: var(--radius-lg);
  padding: 24px 20px;
  text-align: center;
  background: var(--bg-surface-2);
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
  overflow: hidden;
}
.pdf-dropzone:hover, .pdf-dropzone.dragover {
  border-color: var(--brand-primary);
  background: rgba(37, 99, 235, 0.06);
  box-shadow: 0 0 20px rgba(37, 99, 235, 0.12);
}
.dropzone-icon {
  font-size: 36px;
  margin-bottom: 8px;
}
.dropzone-prompt {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}
.dropzone-hint {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 4px;
}
.dropzone-file-input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

/* Quick Demo Samples Toolbar */
.demo-samples-bar {
  margin-top: 14px;
  background: var(--bg-surface-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 12px 14px;
}
.demo-samples-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-secondary);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.demo-sample-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.demo-chip {
  padding: 6px 12px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s;
  display: flex;
  align-items: center;
  gap: 5px;
  box-shadow: var(--card-shadow);
}
.demo-chip:hover {
  background: var(--bg-surface);
  border-color: var(--brand-primary);
  color: var(--brand-primary);
  transform: translateY(-1px);
}
.demo-chip.warn:hover {
  border-color: var(--brand-accent);
  color: var(--brand-accent);
}
.demo-chip.danger:hover {
  border-color: var(--brand-danger);
  color: var(--brand-danger);
}

/* Analysis Live Status Scanner */
.ai-scan-animation {
  margin: 16px 0;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 16px;
  text-align: center;
}
.scan-beam {
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, transparent, #3b82f6, #06b6d4, transparent);
  border-radius: 2px;
  animation: scanBeam 1.5s ease-in-out infinite;
  margin-bottom: 12px;
}
@keyframes scanBeam {
  0% { transform: scaleX(0.2) translateX(-150%); }
  50% { transform: scaleX(0.8) translateX(0%); }
  100% { transform: scaleX(0.2) translateX(150%); }
}

/* Audit Result Panel */
.audit-report-panel {
  margin-top: 20px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle);
  background: var(--bg-surface);
  box-shadow: var(--card-shadow);
  overflow: hidden;
  animation: slideUp 0.3s ease-out;
}
.audit-report-header {
  padding: 18px 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-surface-2);
}
.audit-verdict-title {
  font-size: 15px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
}
.audit-score-ring {
  display: flex;
  align-items: center;
  gap: 10px;
}
.score-pill {
  font-family: 'Outfit', sans-serif;
  font-size: 24px;
  font-weight: 800;
  padding: 4px 14px;
  border-radius: 8px;
  letter-spacing: -0.5px;
}
.score-high {
  background: #dcfce7;
  color: #15803d;
  border: 1px solid #bbf7d0;
}
.score-mid {
  background: #fef3c7;
  color: #b45309;
  border: 1px solid #fde68a;
}
.score-low {
  background: #fee2e2;
  color: #b91c1c;
  border: 1px solid #fecaca;
}
[data-theme="dark"] .score-high, body.theme-dark .score-high {
  background: rgba(34, 197, 94, 0.15);
  color: #4ade80;
  border-color: rgba(34, 197, 94, 0.3);
}
[data-theme="dark"] .score-mid, body.theme-dark .score-mid {
  background: rgba(245, 158, 11, 0.15);
  color: #fbbf24;
  border-color: rgba(245, 158, 11, 0.3);
}
[data-theme="dark"] .score-low, body.theme-dark .score-low {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
  border-color: rgba(239, 68, 68, 0.3);
}

/* Readability Diagnostic Bar */
.readability-bar {
  padding: 12px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border-subtle);
  font-size: 12px;
}
.readability-bar.readable {
  background: #f0fdf4;
  color: #166534;
}
.readability-bar.unreadable {
  background: #fee2e2;
  color: #991b1b;
}
[data-theme="dark"] .readability-bar.readable, body.theme-dark .readability-bar.readable {
  background: rgba(34, 197, 94, 0.08);
  color: #86efac;
}
[data-theme="dark"] .readability-bar.unreadable, body.theme-dark .readability-bar.unreadable {
  background: rgba(239, 68, 68, 0.12);
  color: #fca5a5;
}

.audit-report-body {
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Legal Requirements Checklist */
.req-checklist {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.req-check-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  background: var(--bg-surface-2);
  border-radius: var(--radius-sm);
  font-size: 13px;
  line-height: 1.45;
  border-left: 3px solid transparent;
}
.req-check-item.passed { border-left-color: #16a34a; }
.req-check-item.missing { border-left-color: #dc2626; background: rgba(239, 68, 68, 0.04); }
.req-check-icon {
  font-size: 15px;
  flex-shrink: 0;
  margin-top: 1px;
}

/* JKKP / DOE Guidance Gaps Box */
.guidance-gaps-box {
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: var(--radius-md);
  padding: 14px 16px;
}
.guidance-gaps-header {
  font-size: 12px;
  font-weight: 700;
  color: #92400e;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.guidance-gaps-list {
  font-size: 12px;
  line-height: 1.6;
  color: #78350f;
  padding-left: 18px;
}
[data-theme="dark"] .guidance-gaps-box, body.theme-dark .guidance-gaps-box {
  background: rgba(245, 158, 11, 0.08);
  border-color: rgba(245, 158, 11, 0.25);
}
[data-theme="dark"] .guidance-gaps-header, body.theme-dark .guidance-gaps-header {
  color: #f59e0b;
}
[data-theme="dark"] .guidance-gaps-list, body.theme-dark .guidance-gaps-list {
  color: #cbd5e1;
}

/* Extracted text accordion */
.extracted-text-box {
  background: var(--bg-surface-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 12px;
  font-family: monospace;
  font-size: 11px;
  color: var(--text-secondary);
  max-height: 140px;
  overflow-y: auto;
  white-space: pre-wrap;
  line-height: 1.5;
}

/* ============================================================
   URGENT DEADLINES COMMAND CENTER (Prioritized Dashboard View)
   ============================================================ */
.urgent-command-center {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: var(--card-shadow);
  position: relative;
  overflow: hidden;
}
.urgent-command-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
  flex-wrap: wrap;
  gap: 12px;
}
.urgent-title-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
}
.urgent-title-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.25);
  color: #ef4444;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: pulseGlow 2.5s infinite;
}
@keyframes pulseGlow {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.3); }
  50% { transform: scale(1.05); box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); }
}
.urgent-command-title {
  font-size: 18px;
  font-weight: 800;
  color: var(--text-primary);
  font-family: 'Outfit', sans-serif;
  letter-spacing: -0.2px;
}
.urgent-command-sub {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 2px;
}

/* Triage Quick Filter Tabs */
.urgent-triage-ribbon {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.triage-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  background: var(--bg-surface-2);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  transition: all 0.2s;
}
.triage-tab-btn:hover {
  background: var(--bg-card);
  color: var(--text-primary);
  border-color: var(--border-active);
}
.triage-tab-btn.active {
  background: var(--brand-primary);
  color: #ffffff;
  border-color: var(--brand-primary);
  box-shadow: 0 2px 8px var(--brand-primary-glow);
}
.triage-badge {
  padding: 1px 7px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 800;
}
.triage-tab-btn.active .triage-badge {
  background: rgba(255, 255, 255, 0.25);
  color: #ffffff;
}
.triage-badge.red { background: #fee2e2; color: #b91c1c; }
.triage-badge.amber { background: #fef3c7; color: #b45309; }
.triage-badge.blue { background: #e0f2fe; color: #0369a1; }
[data-theme="dark"] .triage-badge.red, body.theme-dark .triage-badge.red { background: rgba(239, 68, 68, 0.25); color: #fca5a5; }
[data-theme="dark"] .triage-badge.amber, body.theme-dark .triage-badge.amber { background: rgba(245, 158, 11, 0.25); color: #fde68a; }
[data-theme="dark"] .triage-badge.blue, body.theme-dark .triage-badge.blue { background: rgba(6, 182, 212, 0.25); color: #a5f3fc; }

/* Urgent Items Grid / List */
.urgent-deadline-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 14px;
}
.urgent-item-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: all 0.2s;
  position: relative;
  border-left: 4px solid #cbd5e1;
}
.urgent-item-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--card-shadow-hover);
  border-color: var(--border-active);
}
.urgent-item-card.is-overdue {
  border-left-color: #dc2626;
  background: rgba(239, 68, 68, 0.03);
}
.urgent-item-card.is-due-today {
  border-left-color: #ea580c;
  background: rgba(234, 88, 12, 0.03);
}
.urgent-item-card.is-upcoming {
  border-left-color: #f59e0b;
}
[data-theme="dark"] .urgent-item-card.is-overdue, body.theme-dark .urgent-item-card.is-overdue {
  background: rgba(239, 68, 68, 0.08);
}
[data-theme="dark"] .urgent-item-card.is-due-today, body.theme-dark .urgent-item-card.is-due-today {
  background: rgba(234, 88, 12, 0.08);
}

.urgent-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}
.urgent-act-tag {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
  background: var(--bg-surface-2);
  color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
  text-transform: uppercase;
}
.urgent-status-pill {
  font-size: 11px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.urgent-status-pill.overdue {
  background: #fee2e2;
  color: #b91c1c;
  border: 1px solid #fecaca;
  animation: pulseUrgent 2s infinite;
}
.urgent-status-pill.due-today {
  background: #ffedd5;
  color: #c2410c;
  border: 1px solid #fed7aa;
}
.urgent-status-pill.soon {
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fde68a;
}
[data-theme="dark"] .urgent-status-pill.overdue, body.theme-dark .urgent-status-pill.overdue {
  background: rgba(239, 68, 68, 0.2);
  color: #f87171;
  border-color: rgba(239, 68, 68, 0.4);
}
[data-theme="dark"] .urgent-status-pill.due-today, body.theme-dark .urgent-status-pill.due-today {
  background: rgba(234, 88, 12, 0.2);
  color: #fb923c;
  border-color: rgba(234, 88, 12, 0.4);
}
[data-theme="dark"] .urgent-status-pill.soon, body.theme-dark .urgent-status-pill.soon {
  background: rgba(245, 158, 11, 0.2);
  color: #fbbf24;
  border-color: rgba(245, 158, 11, 0.4);
}

.urgent-item-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.35;
}
.urgent-item-desc {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.45;
}
.urgent-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px solid var(--border-subtle);
  font-size: 11px;
  color: var(--text-muted);
}
.urgent-action-btn {
  padding: 5px 12px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  background: var(--bg-surface-2);
  border: 1px solid var(--border-subtle);
  color: var(--text-primary);
  transition: all 0.15s;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.urgent-action-btn:hover {
  background: var(--brand-primary);
  color: #ffffff;
  border-color: var(--brand-primary);
}

/* ============================================================
   MONTHLY CALENDAR TEMPLATE & INTERACTIVE DAY INSPECTOR
   ============================================================ */
.calendar-dashboard-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(320px, 380px);
  gap: 20px;
  margin-bottom: 28px;
  align-items: start;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
@media (max-width: 1320px) {
  .calendar-dashboard-wrap {
    grid-template-columns: 1fr;
  }
}

.calendar-main-card {
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 22px;
  box-shadow: var(--card-shadow);
}

/* Calendar Header & Controls */
.calendar-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
  flex-wrap: wrap;
  gap: 12px;
}
.cal-nav-group {
  display: flex;
  align-items: center;
  gap: 8px;
}
.cal-month-title {
  font-size: 20px;
  font-weight: 800;
  color: var(--text-primary);
  font-family: 'Outfit', sans-serif;
  letter-spacing: -0.3px;
  min-width: 170px;
}
.cal-nav-btn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--bg-surface-2);
  border: 1px solid var(--border-subtle);
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 15px;
  font-weight: 700;
  transition: all 0.15s;
}
.cal-nav-btn:hover {
  background: var(--brand-primary);
  color: #ffffff;
  border-color: var(--brand-primary);
}
.cal-today-btn {
  padding: 6px 14px;
  border-radius: 8px;
  background: var(--bg-surface-2);
  border: 1px solid var(--border-subtle);
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
}
.cal-today-btn:hover {
  background: var(--brand-primary);
  color: #ffffff;
  border-color: var(--brand-primary);
}

/* Quick Jump Pill Switcher: Yesterday / Today / Tomorrow */
.cal-quick-jumps {
  display: flex;
  gap: 6px;
  background: var(--bg-surface-2);
  padding: 4px;
  border-radius: 20px;
  border: 1px solid var(--border-subtle);
}
.cal-jump-btn {
  padding: 5px 12px;
  border-radius: 16px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  background: transparent;
  border: none;
  color: var(--text-secondary);
  transition: all 0.18s;
  white-space: nowrap;
}
.cal-jump-btn:hover {
  color: var(--text-primary);
}
.cal-jump-btn.active {
  background: var(--bg-card);
  color: var(--brand-primary);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}
[data-theme="dark"] .cal-jump-btn.active, body.theme-dark .cal-jump-btn.active {
  background: var(--brand-primary);
  color: #ffffff;
}

/* 7-Day Grid Weekday Headers */
.cal-weekdays-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
  text-align: center;
  margin-bottom: 6px;
  width: 100%;
  min-width: 0;
}
.cal-weekday-cell {
  font-size: 11px;
  font-weight: 800;
  color: var(--text-muted);
  letter-spacing: 0.8px;
  padding: 6px 2px;
  text-transform: uppercase;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* The actual "Box Box" Monthly Calendar Grid */
.cal-days-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.calendar-day-box {
  min-width: 0;
  overflow: hidden;
  min-height: 84px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  padding: 7px;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: all 0.18s var(--ease-out);
  position: relative;
  user-select: none;
  box-sizing: border-box;
}
.calendar-day-box:hover {
  border-color: var(--border-active);
  background: var(--bg-card-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

/* Selected Active Day State */
.calendar-day-box.is-selected {
  border: 2px solid var(--brand-primary);
  background: rgba(37, 99, 235, 0.04);
  box-shadow: 0 0 0 3px var(--brand-primary-glow);
}
[data-theme="dark"] .calendar-day-box.is-selected, body.theme-dark .calendar-day-box.is-selected {
  background: rgba(59, 130, 246, 0.12);
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.35);
}

/* Today Box Highlight */
.calendar-day-box.is-today {
  border-color: var(--brand-primary);
}
.calendar-day-box.is-today .cal-day-num {
  background: var(--brand-primary);
  color: #ffffff;
  border-radius: 6px;
  padding: 1px 7px;
  font-weight: 800;
  display: inline-block;
}

/* Dimmed Other-Month Days */
.calendar-day-box.other-month {
  opacity: 0.35;
  background: transparent;
}
.calendar-day-box.other-month:hover {
  transform: none;
  box-shadow: none;
}

/* Inside Day Box Content */
.cal-day-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 5px;
}
.cal-day-num {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
}
.cal-event-counter {
  font-size: 10px;
  font-weight: 800;
  color: var(--brand-primary);
  background: rgba(37, 99, 235, 0.12);
  border-radius: 10px;
  padding: 1px 5px;
}

/* Event Chips inside the Day Box */
.cal-chips-container {
  display: flex;
  flex-direction: column;
  gap: 3px;
  overflow: hidden;
}
.cal-mini-chip {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 5px;
  border-radius: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}
.cal-mini-chip.overdue {
  background: #fee2e2;
  color: #b91c1c;
  border-left: 2px solid #dc2626;
}
.cal-mini-chip.due-today {
  background: #ffedd5;
  color: #c2410c;
  border-left: 2px solid #ea580c;
}
.cal-mini-chip.scheduled {
  background: #e0f2fe;
  color: #0369a1;
  border-left: 2px solid #0284c7;
}
.cal-mini-chip.completed {
  background: #dcfce7;
  color: #15803d;
  border-left: 2px solid #16a34a;
}
[data-theme="dark"] .cal-mini-chip.overdue, body.theme-dark .cal-mini-chip.overdue {
  background: rgba(239, 68, 68, 0.25);
  color: #fca5a5;
  border-left-color: #ef4444;
}
[data-theme="dark"] .cal-mini-chip.due-today, body.theme-dark .cal-mini-chip.due-today {
  background: rgba(234, 88, 12, 0.25);
  color: #fdba74;
  border-left-color: #f97316;
}
[data-theme="dark"] .cal-mini-chip.scheduled, body.theme-dark .cal-mini-chip.scheduled {
  background: rgba(6, 182, 212, 0.25);
  color: #a5f3fc;
  border-left-color: #06b6d4;
}
[data-theme="dark"] .cal-mini-chip.completed, body.theme-dark .cal-mini-chip.completed {
  background: rgba(34, 197, 94, 0.25);
  color: #86efac;
  border-left-color: #22c55e;
}

/* Calendar Legend */
.cal-legend-bar {
  display: flex;
  gap: 16px;
  align-items: center;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border-subtle);
  flex-wrap: wrap;
  font-size: 11px;
  color: var(--text-secondary);
}
.cal-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
}
.legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.legend-dot.red { background: #dc2626; }
.legend-dot.amber { background: #ea580c; }
.legend-dot.blue { background: #0284c7; }
.legend-dot.green { background: #16a34a; }

/* ============================================================
   DAY INSPECTOR SIDE PANEL (What should be doing today/tomorrow/yesterday)
   ============================================================ */
.day-inspector-card {
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 22px;
  box-shadow: var(--card-shadow);
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: sticky;
  top: 20px;
}
.day-inspector-header {
  border-bottom: 1px solid var(--border-subtle);
  padding-bottom: 14px;
}
.day-inspector-badge-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.day-rel-badge {
  font-size: 11px;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.day-rel-badge.today {
  background: #eff6ff;
  color: #1d4ed8;
  border: 1px solid #bfdbfe;
}
.day-rel-badge.tomorrow {
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fde68a;
}
.day-rel-badge.yesterday {
  background: #f1f5f9;
  color: #475569;
  border: 1px solid #cbd5e1;
}
.day-rel-badge.other {
  background: var(--bg-surface-2);
  color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
}
[data-theme="dark"] .day-rel-badge.today, body.theme-dark .day-rel-badge.today {
  background: rgba(59, 130, 246, 0.2);
  color: #93c5fd;
  border-color: rgba(59, 130, 246, 0.4);
}
[data-theme="dark"] .day-rel-badge.tomorrow, body.theme-dark .day-rel-badge.tomorrow {
  background: rgba(245, 158, 11, 0.2);
  color: #fde68a;
  border-color: rgba(245, 158, 11, 0.4);
}
[data-theme="dark"] .day-rel-badge.yesterday, body.theme-dark .day-rel-badge.yesterday {
  background: rgba(148, 163, 184, 0.15);
  color: #cbd5e1;
  border-color: rgba(148, 163, 184, 0.3);
}

.day-inspector-title {
  font-size: 18px;
  font-weight: 800;
  color: var(--text-primary);
  font-family: 'Outfit', sans-serif;
  letter-spacing: -0.2px;
}
.day-inspector-subtitle {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 3px;
}

/* Day Inspector Task Cards List */
.day-tasks-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 480px;
  overflow-y: auto;
  padding-right: 4px;
}
.day-task-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 14px;
  border-left: 4px solid #94a3b8;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: all 0.18s;
}
.day-task-card:hover {
  transform: translateX(2px);
  border-color: var(--border-active);
}
.day-task-card.overdue {
  border-left-color: #dc2626;
  background: rgba(239, 68, 68, 0.03);
}
.day-task-card.due-today {
  border-left-color: #ea580c;
  background: rgba(234, 88, 12, 0.03);
}
.day-task-card.scheduled {
  border-left-color: #0284c7;
}
.day-task-card.completed {
  border-left-color: #16a34a;
  opacity: 0.85;
}
[data-theme="dark"] .day-task-card.overdue, body.theme-dark .day-task-card.overdue {
  background: rgba(239, 68, 68, 0.08);
}
[data-theme="dark"] .day-task-card.due-today, body.theme-dark .day-task-card.due-today {
  background: rgba(234, 88, 12, 0.08);
}

.day-task-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.day-task-time {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 4px;
}
.day-task-status-badge {
  font-size: 10px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 10px;
  text-transform: uppercase;
}
.day-task-status-badge.overdue { background: #fee2e2; color: #b91c1c; }
.day-task-status-badge.due-today { background: #ffedd5; color: #c2410c; }
.day-task-status-badge.scheduled { background: #e0f2fe; color: #0369a1; }
.day-task-status-badge.completed { background: #dcfce7; color: #15803d; }
[data-theme="dark"] .day-task-status-badge.overdue, body.theme-dark .day-task-status-badge.overdue { background: rgba(239,68,68,0.25); color: #fca5a5; }
[data-theme="dark"] .day-task-status-badge.due-today, body.theme-dark .day-task-status-badge.due-today { background: rgba(234,88,12,0.25); color: #fdba74; }
[data-theme="dark"] .day-task-status-badge.scheduled, body.theme-dark .day-task-status-badge.scheduled { background: rgba(6,182,212,0.25); color: #a5f3fc; }
[data-theme="dark"] .day-task-status-badge.completed, body.theme-dark .day-task-status-badge.completed { background: rgba(34,197,94,0.25); color: #86efac; }

.day-task-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.35;
}
.day-task-desc {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.45;
}
.day-task-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px solid var(--border-subtle);
}
.day-task-toggle-btn {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  background: none;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: color 0.15s;
}
.day-task-toggle-btn:hover {
  color: var(--brand-success);
}
.day-task-link-btn {
  font-size: 11px;
  font-weight: 700;
  color: var(--brand-primary);
  background: none;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.day-task-link-btn:hover {
  text-decoration: underline;
}

/* Empty State for Dates with No Tasks */
.day-empty-state {
  text-align: center;
  padding: 32px 16px;
  background: var(--bg-surface-2);
  border-radius: var(--radius-md);
  border: 1px dashed var(--border-subtle);
}
.day-empty-icon {
  font-size: 32px;
  margin-bottom: 8px;
}
.day-empty-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
}
.day-empty-desc {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 4px;
  line-height: 1.45;
}

/* Add Schedule Button */
.btn-add-schedule {
  width: 100%;
  padding: 10px;
  border-radius: var(--radius-sm);
  background: var(--bg-surface-2);
  border: 1px dashed var(--border-active);
  color: var(--brand-primary);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.15s;
}
.btn-add-schedule:hover {
  background: rgba(37, 99, 235, 0.08);
  border-style: solid;
}

/* ============================================================
   MULTI-ACCOUNT / ROLE SWITCHER (Topbar)
   ============================================================ */
.user-account-switcher {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-surface-2);
  border: 1px solid var(--border-subtle);
  border-radius: 20px;
  padding: 4px 10px;
  transition: all 0.2s;
}
.user-account-switcher:hover {
  border-color: var(--border-active);
  background: var(--bg-card);
}
.user-switch-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
}
.active-user-select {
  background: transparent;
  border: none;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-primary);
  cursor: pointer;
  outline: none;
}
.active-user-select option {
  background: var(--bg-surface);
  color: var(--text-primary);
}

/* Role Perspective Banner */
.role-perspective-banner {
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.08), rgba(124, 58, 237, 0.05));
  border: 1px solid rgba(37, 99, 235, 0.25);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  flex-wrap: wrap;
  gap: 12px;
}
[data-theme="dark"] .role-perspective-banner, body.theme-dark .role-perspective-banner {
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.15), rgba(15, 23, 42, 0.6));
  border-color: rgba(59, 130, 246, 0.4);
}
.perspective-user-info {
  display: flex;
  align-items: center;
  gap: 12px;
}
.perspective-avatar {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-purple));
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 14px;
  flex-shrink: 0;
}
.perspective-role-title {
  font-size: 14px;
  font-weight: 800;
  color: var(--text-primary);
}
.perspective-role-sub {
  font-size: 12px;
  color: var(--text-secondary);
}
.perspective-quick-switch {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* ============================================================
   WORKPLACE INSPECTION CAMPAIGN & FINDINGS
   ============================================================ */
.wpi-campaign-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 22px;
  margin-bottom: 24px;
  box-shadow: var(--card-shadow);
}
.wpi-campaign-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 14px;
}
.wpi-campaign-title {
  font-size: 20px;
  font-weight: 800;
  color: var(--text-primary);
  font-family: 'Outfit', sans-serif;
}
.wpi-campaign-meta {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 4px;
  line-height: 1.5;
}
.wpi-stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 12px;
  margin: 16px 0;
}
.wpi-stat-box {
  background: var(--bg-surface-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  text-align: center;
}
.wpi-stat-number {
  font-size: 22px;
  font-weight: 800;
  font-family: 'Outfit', sans-serif;
}
.wpi-stat-label {
  font-size: 11px;
  color: var(--text-secondary);
  font-weight: 600;
  margin-top: 2px;
}

/* Findings Filter Tabs */
.wpi-filter-bar {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.wpi-filter-btn {
  padding: 7px 16px;
  border-radius: 20px;
  background: var(--bg-surface-2);
  border: 1px solid var(--border-subtle);
  font-size: 12px;
  font-weight: 700;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s;
}
.wpi-filter-btn:hover {
  background: var(--bg-card);
  color: var(--text-primary);
}
.wpi-filter-btn.active {
  background: var(--brand-primary);
  color: white;
  border-color: var(--brand-primary);
}

/* Finding Cards */
.wpi-findings-grid {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.wpi-finding-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 22px;
  box-shadow: var(--card-shadow);
  transition: all 0.2s;
  border-left: 5px solid #cbd5e1;
}
.wpi-finding-card.is-open {
  border-left-color: #ea580c;
}
.wpi-finding-card.is-closed {
  border-left-color: #16a34a;
}
.wpi-finding-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
  gap: 12px;
  flex-wrap: wrap;
}
.wpi-finding-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.wpi-finding-title {
  font-size: 16px;
  font-weight: 800;
  color: var(--text-primary);
}
.wpi-id-tag {
  font-family: monospace;
  font-size: 11px;
  font-weight: 700;
  background: var(--bg-surface-2);
  padding: 2px 8px;
  border-radius: 4px;
  border: 1px solid var(--border-subtle);
}
.wpi-severity-pill {
  font-size: 11px;
  font-weight: 800;
  padding: 3px 9px;
  border-radius: 12px;
}
.wpi-severity-pill.High { background: #fee2e2; color: #b91c1c; border: 1px solid #fecaca; }
.wpi-severity-pill.Medium { background: #fef3c7; color: #b45309; border: 1px solid #fde68a; }
.wpi-severity-pill.Low { background: #e0f2fe; color: #0369a1; border: 1px solid #bae6fd; }
[data-theme="dark"] .wpi-severity-pill.High, body.theme-dark .wpi-severity-pill.High { background: rgba(239, 68, 68, 0.25); color: #fca5a5; }
[data-theme="dark"] .wpi-severity-pill.Medium, body.theme-dark .wpi-severity-pill.Medium { background: rgba(245, 158, 11, 0.25); color: #fde68a; }
[data-theme="dark"] .wpi-severity-pill.Low, body.theme-dark .wpi-severity-pill.Low { background: rgba(6, 182, 212, 0.25); color: #a5f3fc; }

.wpi-status-badge {
  font-size: 12px;
  font-weight: 800;
  padding: 4px 12px;
  border-radius: 20px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.wpi-status-badge.open {
  background: #ffedd5;
  color: #c2410c;
  border: 1px solid #fed7aa;
}
.wpi-status-badge.closed {
  background: #dcfce7;
  color: #15803d;
  border: 1px solid #bbf7d0;
}
[data-theme="dark"] .wpi-status-badge.open, body.theme-dark .wpi-status-badge.open {
  background: rgba(234, 88, 12, 0.2);
  color: #fb923c;
  border-color: rgba(234, 88, 12, 0.4);
}
[data-theme="dark"] .wpi-status-badge.closed, body.theme-dark .wpi-status-badge.closed {
  background: rgba(34, 197, 94, 0.2);
  color: #4ade80;
  border-color: rgba(34, 197, 94, 0.4);
}

.wpi-meta-bar {
  display: flex;
  gap: 16px;
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.wpi-desc-text {
  font-size: 13px;
  color: var(--text-primary);
  line-height: 1.55;
  margin-bottom: 16px;
}

/* Before and After Photo Evidence Container */
.photo-evidence-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 18px;
}
@media (max-width: 768px) {
  .photo-evidence-grid {
    grid-template-columns: 1fr;
  }
}
.photo-card {
  background: var(--bg-surface-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.photo-card-header {
  padding: 8px 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-subtle);
  font-size: 11px;
  font-weight: 700;
}
.photo-card-badge {
  font-size: 10px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 10px;
  text-transform: uppercase;
}
.photo-card-badge.before {
  background: #fee2e2;
  color: #b91c1c;
}
.photo-card-badge.after {
  background: #dcfce7;
  color: #15803d;
}
[data-theme="dark"] .photo-card-badge.before, body.theme-dark .photo-card-badge.before {
  background: rgba(239, 68, 68, 0.25);
  color: #fca5a5;
}
[data-theme="dark"] .photo-card-badge.after, body.theme-dark .photo-card-badge.after {
  background: rgba(34, 197, 94, 0.25);
  color: #86efac;
}

.photo-card-body {
  padding: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 130px;
  text-align: center;
}
.photo-placeholder-box {
  width: 100%;
  height: 120px;
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  border: 1px dashed var(--border-subtle);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  position: relative;
  overflow: hidden;
}
.photo-icon-large {
  font-size: 32px;
}
.photo-caption-text {
  font-size: 11px;
  color: var(--text-secondary);
  font-weight: 600;
  padding: 0 10px;
}
.photo-uploaded-preview {
  width: 100%;
  height: 140px;
  object-fit: cover;
  border-radius: var(--radius-sm);
}

/* Employer Rep Reply Box */
.employer-reply-box {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: var(--radius-md);
  padding: 16px;
  margin-top: 10px;
}
[data-theme="dark"] .employer-reply-box, body.theme-dark .employer-reply-box {
  background: rgba(34, 197, 94, 0.08);
  border-color: rgba(34, 197, 94, 0.25);
}
.employer-reply-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  font-weight: 700;
  color: #15803d;
  margin-bottom: 6px;
}
[data-theme="dark"] .employer-reply-header, body.theme-dark .employer-reply-header {
  color: #4ade80;
}
.employer-reply-content {
  font-size: 13px;
  color: var(--text-primary);
  line-height: 1.5;
}
.employer-reply-meta {
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 8px;
}

.wpi-actions-bar {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border-subtle);
}

/* ============================================================
   OFFICIAL WORKPLACE INSPECTION REPORT MODAL & PRINT STYLES
   ============================================================ */
.report-document-wrap {
  background: #f8fafc;
  padding: 24px;
  border-radius: var(--radius-lg);
  max-height: 75vh;
  overflow-y: auto;
}
[data-theme="dark"] .report-document-wrap, body.theme-dark .report-document-wrap {
  background: #0f172a;
}
.report-paper {
  background: #ffffff;
  color: #0f172a;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 40px;
  max-width: 900px;
  margin: 0 auto;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  font-family: 'Inter', -apple-system, sans-serif;
}

/* Header with Company Logo Top-Left */
.report-header-grid {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 20px;
  align-items: center;
  border-bottom: 2px solid #0f172a;
  padding-bottom: 20px;
  margin-bottom: 20px;
}
.report-logo-box {
  display: flex;
  align-items: center;
  gap: 12px;
}
.report-logo-badge {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  background: linear-gradient(135deg, #0284c7, #0f766e);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}
.report-company-name {
  font-size: 16px;
  font-weight: 800;
  text-transform: uppercase;
  color: #0f172a;
  letter-spacing: -0.2px;
}
.report-company-sub {
  font-size: 11px;
  color: #475569;
}
.report-title-center {
  text-align: center;
}
.report-title-h1 {
  font-size: 18px;
  font-weight: 900;
  text-transform: uppercase;
  color: #0f172a;
  letter-spacing: 0.5px;
}
.report-title-act {
  font-size: 11px;
  font-weight: 700;
  color: #0284c7;
  margin-top: 2px;
}
.report-ref-box {
  text-align: right;
  font-size: 11px;
  color: #475569;
}
.report-ref-no {
  font-family: monospace;
  font-size: 13px;
  font-weight: 800;
  color: #0f172a;
}

/* Report Meta Table */
.report-meta-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
  font-size: 12px;
}
.report-meta-table td {
  border: 1px solid #cbd5e1;
  padding: 8px 12px;
}
.report-meta-label {
  background: #f1f5f9;
  font-weight: 700;
  width: 22%;
  color: #334155;
}

/* Findings Matrix Table */
.report-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 24px;
  font-size: 11px;
}
.report-table th {
  background: #0f172a;
  color: white;
  border: 1px solid #0f172a;
  padding: 9px 8px;
  text-transform: uppercase;
  font-weight: 800;
  text-align: left;
}
.report-table td {
  border: 1px solid #cbd5e1;
  padding: 10px 8px;
  vertical-align: top;
  color: #0f172a;
}
.report-photo-thumb {
  width: 110px;
  height: 80px;
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  text-align: center;
  padding: 4px;
}

/* Signatures Block */
.report-signatures-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
  margin-top: 30px;
  border-top: 1px solid #cbd5e1;
  padding-top: 20px;
}
.signature-box {
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 11px;
}
.signature-line {
  height: 48px;
  border-bottom: 1px dashed #94a3b8;
  margin-bottom: 4px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  font-family: 'Brush Script MT', cursive;
  font-size: 18px;
  color: #1e3a8a;
}
.signature-title {
  font-weight: 700;
  color: #0f172a;
}
.signature-role {
  color: #64748b;
  font-size: 10px;
}

/* ============================================================
   COMPANY FORM TEMPLATE ENGINE & STUDIO STYLING
   ============================================================ */
.report-toolbar-strip {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  background: var(--bg-surface-2);
  padding: 12px 18px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  flex-wrap: wrap;
  gap: 12px;
}
.report-accent-bar {
  height: 6px;
  border-radius: 4px 4px 0 0;
  margin: -40px -40px 24px -40px;
}
.report-corporate-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding-bottom: 18px;
  border-bottom: 2px solid #0f172a;
  margin-bottom: 20px;
  gap: 16px;
}
.report-doc-ctrl-box {
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  font-size: 10px;
  background: #f8fafc;
  overflow: hidden;
  text-align: right;
  min-width: 220px;
}
.report-doc-ctrl-row {
  display: flex;
  border-bottom: 1px solid #e2e8f0;
}
.report-doc-ctrl-row:last-child {
  border-bottom: none;
}
.report-doc-ctrl-label {
  background: #edf2f7;
  padding: 4px 8px;
  font-weight: 700;
  color: #475569;
  width: 90px;
  text-align: left;
}
.report-doc-ctrl-val {
  padding: 4px 8px;
  font-weight: 600;
  color: #0f172a;
  flex: 1;
}
.report-evidence-card {
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  padding: 14px;
  margin-bottom: 14px;
  background: #ffffff;
  page-break-inside: avoid;
}
.color-chip {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 14px;
}
.color-chip.selected {
  border-color: #0f172a;
  transform: scale(1.1);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5);
}
.template-studio-section {
  background: var(--bg-canvas);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 14px;
  margin-bottom: 14px;
}
.template-studio-title {
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  color: var(--text-primary);
  margin-bottom: 8px;
  letter-spacing: 0.5px;
}

/* ============================================================
   AUTHORITY RADAR (JKKP · DOE · BOMBA) COMPACT WIDGET
   ============================================================ */
.authority-radar-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  margin-bottom: 24px;
  box-shadow: var(--card-shadow);
  border-top: 3px solid var(--brand-primary);
}
.authority-radar-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  flex-wrap: wrap;
  gap: 10px;
}
.authority-radar-title-group {
  display: flex;
  align-items: center;
  gap: 10px;
}
.authority-radar-icon {
  font-size: 24px;
  line-height: 1;
}
.authority-radar-title {
  font-size: 16px;
  font-weight: 800;
  color: var(--text-primary);
  font-family: 'Outfit', sans-serif;
  letter-spacing: -0.2px;
}
.authority-radar-sub {
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 1px;
}
.authority-sync-status {
  display: flex;
  align-items: center;
  gap: 8px;
}
.sync-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
  background: #f0fdf4;
  color: #15803d;
  border: 1px solid #bbf7d0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
[data-theme="dark"] .sync-badge, body.theme-dark .sync-badge {
  background: rgba(34, 197, 94, 0.15);
  color: #4ade80;
  border-color: rgba(34, 197, 94, 0.35);
}
.sync-pulse-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #16a34a;
  box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.4);
  animation: pulseDot 2s infinite;
}
@keyframes pulseDot {
  0% { transform: scale(0.95); opacity: 0.8; }
  50% { transform: scale(1.3); opacity: 1; }
  100% { transform: scale(0.95); opacity: 0.8; }
}
.btn-sync-feeds {
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 700;
  border-radius: 6px;
  background: var(--bg-surface-2);
  border: 1px solid var(--border-subtle);
  color: var(--text-primary);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all 0.15s;
}
.btn-sync-feeds:hover {
  background: var(--brand-primary);
  color: #ffffff;
  border-color: var(--brand-primary);
}
.btn-sync-feeds.spinning .sync-icon {
  animation: spinFeed 0.8s linear infinite;
}
@keyframes spinFeed {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Authority Filter Tabs */
.authority-filter-row {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
  overflow-x: auto;
  padding-bottom: 2px;
}
.auth-filter-btn {
  padding: 4px 11px;
  border-radius: 14px;
  font-size: 11px;
  font-weight: 700;
  background: var(--bg-surface-2);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s;
}
.auth-filter-btn:hover {
  background: var(--bg-card);
  color: var(--text-primary);
}
.auth-filter-btn.active {
  background: var(--brand-primary);
  color: #ffffff;
  border-color: var(--brand-primary);
}

/* Newsfeed Grid */
.authority-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
@media (max-width: 1200px) {
  .authority-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 700px) {
  .authority-grid {
    grid-template-columns: 1fr;
  }
}
.authority-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 8px;
  border-left: 4px solid #94a3b8;
  transition: all 0.18s;
  cursor: pointer;
}
.authority-card:hover {
  transform: translateY(-2px);
  border-color: var(--border-active);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}
.authority-card.jkkp {
  border-left-color: #2563eb;
}
.authority-card.doe {
  border-left-color: #16a34a;
}
.authority-card.bomba {
  border-left-color: #dc2626;
}

.auth-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10px;
  font-weight: 800;
}
.auth-pill {
  padding: 2px 7px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.auth-pill.jkkp { background: rgba(37, 99, 235, 0.12); color: #2563eb; }
.auth-pill.doe { background: rgba(22, 163, 74, 0.12); color: #16a34a; }
.auth-pill.bomba { background: rgba(220, 38, 38, 0.12); color: #dc2626; }
[data-theme="dark"] .auth-pill.jkkp, body.theme-dark .auth-pill.jkkp { background: rgba(59, 130, 246, 0.25); color: #93c5fd; }
[data-theme="dark"] .auth-pill.doe, body.theme-dark .auth-pill.doe { background: rgba(34, 197, 94, 0.25); color: #86efac; }
[data-theme="dark"] .auth-pill.bomba, body.theme-dark .auth-pill.bomba { background: rgba(239, 68, 68, 0.25); color: #fca5a5; }

.auth-date {
  font-size: 10px;
  color: var(--text-muted);
}
.auth-headline {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.auth-snippet {
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.auth-footer-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px solid var(--border-subtle);
  font-size: 10px;
}
.auth-tag-pill {
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 4px;
}
.auth-tag-pill.pekeliling {
  background: #eff6ff;
  color: #1d4ed8;
}
.auth-tag-pill.accident {
  background: #fef2f2;
  color: #b91c1c;
}
[data-theme="dark"] .auth-tag-pill.pekeliling, body.theme-dark .auth-tag-pill.pekeliling {
  background: rgba(59, 130, 246, 0.2);
  color: #93c5fd;
}
[data-theme="dark"] .auth-tag-pill.accident, body.theme-dark .auth-tag-pill.accident {
  background: rgba(239, 68, 68, 0.2);
  color: #fca5a5;
}
.auth-read-btn {
  font-weight: 700;
  color: var(--brand-primary);
  background: none;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 10px;
}
.auth-read-btn:hover {
  text-decoration: underline;
}

/* PRINT MEDIA QUERY FOR PHYSICAL PRINT OR SAVE AS PDF */
@media print {
  body {
    background: #ffffff !important;
    color: #000000 !important;
    overflow: visible !important;
  }
  .app, .sidebar, .topbar, .modal-overlay, .notif-panel, .theme-toggle-btn {
    display: none !important;
  }
  #printable-report-area {
    display: block !important;
    position: static !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .report-paper {
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* ============================================================
   COMPANY TEMPLATE ENGINE & REPORT PRESENTATION STYLES
   ============================================================ */
.report-toolbar-strip {
  background: var(--bg-surface-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 12px 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 20px;
}
.report-document-wrap {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 24px;
  max-height: 75vh;
  overflow-y: auto;
}
.report-paper {
  background: #ffffff;
  color: #0f172a;
  max-width: 960px;
  margin: 0 auto;
  padding: 36px 42px;
  border-radius: 6px;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  border: 1px solid #e2e8f0;
}
.report-header-grid {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 18px;
  align-items: center;
  border-bottom: 2px solid #0f172a;
  padding-bottom: 16px;
  margin-bottom: 20px;
}
.report-logo-box {
  display: flex;
  align-items: center;
  gap: 12px;
}
.report-company-name {
  font-size: 16px;
  font-weight: 900;
  color: #0f172a;
  letter-spacing: -0.3px;
}
.report-company-sub {
  font-size: 10px;
  color: #64748b;
  margin-top: 1px;
}
.report-title-center {
  text-align: center;
}
.report-title-h1 {
  font-size: 15px;
  font-weight: 900;
  color: #0f172a;
  letter-spacing: 0.3px;
}
.report-title-act {
  font-size: 11px;
  font-weight: 800;
  color: #1e3a8a;
  margin-top: 2px;
}
.report-ref-box {
  text-align: right;
  font-size: 11px;
  color: #334155;
  border-left: 2px solid #cbd5e1;
  padding-left: 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.report-ref-no {
  font-weight: 800;
  color: #0f172a;
}
.report-corporate-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 2px solid #0f172a;
  padding-bottom: 16px;
  margin-bottom: 20px;
  gap: 16px;
}
.report-doc-ctrl-box {
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  padding: 6px 12px;
  font-size: 11px;
  min-width: 190px;
}
.report-doc-ctrl-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 2px 0;
  border-bottom: 1px dashed #e2e8f0;
}
.report-doc-ctrl-row:last-child {
  border-bottom: none;
}
.report-doc-ctrl-label {
  color: #64748b;
  font-weight: 600;
}
.report-doc-ctrl-val {
  font-weight: 800;
  color: #0f172a;
}
.report-meta-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 18px;
  font-size: 11px;
}
.report-meta-table td {
  border: 1px solid #cbd5e1;
  padding: 6px 10px;
}
.report-meta-label {
  background: #f1f5f9;
  font-weight: 700;
  color: #334155;
  width: 18%;
}
.report-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
  font-size: 11px;
}
.report-table th {
  background: #0f172a;
  color: #ffffff;
  padding: 8px 10px;
  font-weight: 800;
  border: 1px solid #0f172a;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.report-table td {
  border: 1px solid #cbd5e1;
  padding: 8px 10px;
  vertical-align: top;
  color: #1e293b;
}
.report-photo-thumb {
  width: 100%;
  border-radius: 4px;
  overflow: hidden;
}
.report-signatures-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin-top: 24px;
  border-top: 2px solid #0f172a;
  padding-top: 18px;
}
.signature-box {
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  padding: 12px;
  font-size: 10px;
}
.signature-title {
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 2px;
}
.signature-role {
  color: #64748b;
  font-size: 9px;
  margin-bottom: 10px;
}
.signature-line {
  height: 38px;
  border-bottom: 1px solid #94a3b8;
  margin-bottom: 6px;
  display: flex;
  align-items: flex-end;
  font-family: 'Brush Script MT', cursive, sans-serif;
  font-size: 20px;
  color: #1e3a8a;
  padding-left: 4px;
}
.report-evidence-card {
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  padding: 14px;
  background: #ffffff;
}

/* TEMPLATE STUDIO MODAL CONTROLS */
.template-studio-section {
  background: var(--bg-surface-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 14px 16px;
}
.template-studio-title {
  font-size: 12px;
  font-weight: 800;
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.color-chip {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-weight: 900;
  font-size: 14px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  transition: transform 0.15s, outline 0.15s;
}
.color-chip:hover {
  transform: scale(1.1);
}
.color-chip.selected {
  outline: 3px solid var(--text-primary);
  outline-offset: 2px;
}

/* DYNAMIC COLUMN BUILDER IN STUDIO */
.column-manager-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
  margin-top: 8px;
}
.column-manager-table th {
  background: var(--bg-card);
  color: var(--text-secondary);
  font-weight: 700;
  padding: 6px 8px;
  text-align: left;
  border-bottom: 1px solid var(--border-subtle);
}
.column-manager-table td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--border-subtle);
  vertical-align: middle;
}
.col-align-toggle {
  display: inline-flex;
  border: 1px solid var(--border-subtle);
  border-radius: 4px;
  overflow: hidden;
}
.col-align-btn {
  background: var(--bg-card);
  border: none;
  padding: 3px 7px;
  font-size: 10px;
  cursor: pointer;
  color: var(--text-secondary);
  border-right: 1px solid var(--border-subtle);
}
.col-align-btn:last-child {
  border-right: none;
}
.col-align-btn.active {
  background: var(--brand-primary);
  color: #ffffff;
  font-weight: 700;
}

/* ============================================================
   HIRARC DEPARTMENT COVERAGE & ACTIVITY DECLARATION STYLES
   ============================================================ */
.hirarc-view-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--border-subtle);
  padding-bottom: 12px;
  flex-wrap: wrap;
}
.hirarc-view-btn {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 8px 16px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.15s;
}
.hirarc-view-btn:hover {
  border-color: var(--brand-primary);
  color: var(--text-primary);
}
.hirarc-view-btn.active {
  background: var(--brand-primary);
  color: #ffffff;
  border-color: var(--brand-primary);
  box-shadow: 0 2px 8px rgba(0, 163, 155, 0.3);
}

.coverage-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}
.dept-coverage-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 16px;
  box-shadow: var(--card-shadow);
  transition: transform 0.15s, border-color 0.15s;
}
.dept-coverage-card:hover {
  transform: translateY(-2px);
  border-color: var(--brand-primary);
}
.dept-coverage-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.dept-coverage-title {
  font-size: 13px;
  font-weight: 800;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
}
.dept-coverage-bar {
  height: 8px;
  background: var(--bg-surface-2);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 8px;
}
.dept-coverage-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.3s ease;
}
.dept-coverage-stats {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--text-secondary);
  font-weight: 600;
}

.risk-calc-card {
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.04), rgba(15, 23, 42, 0.01));
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  margin: 12px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
[data-theme="dark"] .risk-calc-card, body.theme-dark .risk-calc-card {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
}
.risk-calc-math {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 800;
}
.risk-digit-box {
  background: var(--bg-card);
  border: 2px solid var(--border-subtle);
  border-radius: 8px;
  padding: 6px 14px;
  font-size: 20px;
  font-weight: 900;
  font-family: monospace;
  color: var(--text-primary);
  min-width: 48px;
  text-align: center;
}
.risk-result-badge {
  padding: 6px 14px;
  border-radius: 6px;
  font-weight: 900;
  font-size: 13px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.sub-category-tag {
  display: inline-block;
  background: rgba(59, 130, 246, 0.1);
  color: #2563eb;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
}
[data-theme="dark"] .sub-category-tag, body.theme-dark .sub-category-tag {
  background: rgba(59, 130, 246, 0.25);
  color: #93c5fd;
}
.dept-tag {
  display: inline-block;
  background: rgba(16, 185, 129, 0.1);
  color: #059669;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
}
[data-theme="dark"] .dept-tag, body.theme-dark .dept-tag {
  background: rgba(16, 185, 129, 0.25);
  color: #6ee7b7;
}
.blindspot-pill {
  background: #fef2f2;
  color: #b91c1c;
  border: 1px solid #fecaca;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
[data-theme="dark"] .blindspot-pill, body.theme-dark .blindspot-pill {
  background: rgba(239, 68, 68, 0.2);
  color: #fca5a5;
  border-color: rgba(239, 68, 68, 0.4);
}

/* ============================================================
   OFFICIAL DOSH HIRARC TABLE & 1-HAZARD-PER-ROW STYLES
   ============================================================ */
.dosh-table-container {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--bg-card);
  box-shadow: var(--card-shadow);
  margin-top: 14px;
}

.dosh-table {
  width: 100%;
  min-width: 1750px;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 11px;
}

.dosh-table th, .dosh-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border-subtle);
  border-right: 1px solid var(--border-subtle);
  vertical-align: top;
  line-height: 1.35;
}

.dosh-table th:last-child, .dosh-table td:last-child {
  border-right: none;
}

.dosh-table thead tr.dosh-super-head th {
  padding: 6px 10px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  text-align: center;
}

.dosh-th-sec-1 {
  background: #1e293b;
  color: #93c5fd;
  border-bottom: 2px solid #3b82f6 !important;
}

.dosh-th-sec-2 {
  background: #0f172a;
  color: #fed7aa;
  border-bottom: 2px solid #f97316 !important;
}

.dosh-th-sec-3 {
  background: #111827;
  color: #a7f3d0;
  border-bottom: 2px solid #10b981 !important;
}

.dosh-th-sec-4 {
  background: #1e1b4b;
  color: #c4b5fd;
  border-bottom: 2px solid #8b5cf6 !important;
}

.dosh-table thead tr.dosh-col-head th {
  background: var(--bg-surface-2);
  color: var(--text-primary);
  font-weight: 800;
  font-size: 11px;
  top: 0;
  position: sticky;
  z-index: 2;
  border-bottom: 2px solid var(--border-subtle);
}

.dosh-table tbody tr:hover td {
  background: rgba(0, 163, 155, 0.03);
}

.rr-badge-green {
  background: #dcfce7;
  color: #15803d;
  border: 1px solid #86efac;
  font-weight: 900;
  font-size: 11px;
  padding: 3px 6px;
  border-radius: 4px;
  display: inline-block;
  white-space: nowrap;
}
[data-theme="dark"] .rr-badge-green, body.theme-dark .rr-badge-green {
  background: rgba(34, 197, 94, 0.2);
  color: #4ade80;
  border-color: rgba(34, 197, 94, 0.4);
}

.rr-badge-yellow {
  background: #fef3c7;
  color: #b45309;
  border: 1px solid #fde68a;
  font-weight: 900;
  font-size: 11px;
  padding: 3px 6px;
  border-radius: 4px;
  display: inline-block;
  white-space: nowrap;
}
[data-theme="dark"] .rr-badge-yellow, body.theme-dark .rr-badge-yellow {
  background: rgba(245, 158, 11, 0.2);
  color: #fbbf24;
  border-color: rgba(245, 158, 11, 0.4);
}

.rr-badge-red {
  background: #fee2e2;
  color: #b91c1c;
  border: 1px solid #fca5a5;
  font-weight: 900;
  font-size: 11px;
  padding: 3px 6px;
  border-radius: 4px;
  display: inline-block;
  white-space: nowrap;
}
[data-theme="dark"] .rr-badge-red, body.theme-dark .rr-badge-red {
  background: rgba(239, 68, 68, 0.2);
  color: #f87171;
  border-color: rgba(239, 68, 68, 0.4);
}

.controls-green-note {
  background: rgba(34, 197, 94, 0.08);
  border-left: 3px solid #16a34a;
  padding: 5px 8px;
  border-radius: 0 4px 4px 0;
  font-size: 10px;
  color: #15803d;
  display: block;
  line-height: 1.3;
}
[data-theme="dark"] .controls-green-note, body.theme-dark .controls-green-note {
  background: rgba(34, 197, 94, 0.15);
  color: #86efac;
}

.controls-action-needed {
  background: rgba(245, 158, 11, 0.08);
  border-left: 3px solid #d97706;
  padding: 5px 8px;
  border-radius: 0 4px 4px 0;
  font-size: 10px;
  color: var(--text-primary);
  display: block;
  line-height: 1.35;
}
[data-theme="dark"] .controls-action-needed, body.theme-dark .controls-action-needed {
  background: rgba(245, 158, 11, 0.15);
}

.step-tag {
  background: rgba(14, 165, 233, 0.12);
  color: #0284c7;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  display: inline-block;
}
[data-theme="dark"] .step-tag, body.theme-dark .step-tag {
  background: rgba(14, 165, 233, 0.25);
  color: #38bdf8;
}

.activity-header-cell {
  background: rgba(15, 23, 42, 0.02);
  border-right: 1px solid var(--border-subtle);
}

.hazard-rule-banner {
  background: linear-gradient(135deg, rgba(2, 132, 199, 0.1), rgba(16, 185, 129, 0.08));
  border: 1px solid rgba(2, 132, 199, 0.3);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

/* ============================================================
   MULTI-DOCUMENT EVIDENCE PORTFOLIO STYLES
   ============================================================ */
.evidence-portfolio-box {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.evidence-stack-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 3px;
}

.evidence-count-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(14, 165, 233, 0.12);
  color: #0284c7;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 800;
}
[data-theme="dark"] .evidence-count-badge, body.theme-dark .evidence-count-badge {
  background: rgba(14, 165, 233, 0.25);
  color: #38bdf8;
}

.evidence-pill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: var(--bg-surface-2);
  border: 1px solid var(--border-subtle);
  border-radius: 5px;
  padding: 3px 7px;
  font-size: 11px;
  transition: all 0.15s;
}
.evidence-pill:hover {
  border-color: var(--brand-primary);
  background: rgba(0, 163, 155, 0.05);
}

.doc-type-badge {
  display: inline-block;
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.doc-type-sop { background: #dbeafe; color: #1e40af; }
.doc-type-record { background: #dcfce7; color: #166534; }
.doc-type-report { background: #fef3c7; color: #92400e; }
.doc-type-training { background: #f3e8ff; color: #6b21a8; }
.doc-type-license { background: #ffedd5; color: #9a3412; }
.doc-type-minutes { background: #e0e7ff; color: #3730a3; }
.doc-type-other { background: #f1f5f9; color: #475569; }

[data-theme="dark"] .doc-type-sop, body.theme-dark .doc-type-sop { background: rgba(30, 64, 175, 0.3); color: #93c5fd; }
[data-theme="dark"] .doc-type-record, body.theme-dark .doc-type-record { background: rgba(22, 101, 52, 0.3); color: #86efac; }
[data-theme="dark"] .doc-type-report, body.theme-dark .doc-type-report { background: rgba(146, 64, 14, 0.3); color: #fde68a; }
[data-theme="dark"] .doc-type-training, body.theme-dark .doc-type-training { background: rgba(107, 33, 168, 0.3); color: #d8b4fe; }
[data-theme="dark"] .doc-type-license, body.theme-dark .doc-type-license { background: rgba(154, 52, 18, 0.3); color: #fdba74; }
[data-theme="dark"] .doc-type-minutes, body.theme-dark .doc-type-minutes { background: rgba(55, 48, 163, 0.3); color: #a5b4fc; }

.evidence-score-tag {
  font-size: 10px;
  font-weight: 800;
  color: #10b981;
}

.evidence-card-item {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  transition: border-color 0.15s;
  margin-bottom: 8px;
}
.evidence-card-item:hover {
  border-color: var(--brand-primary);
}

.evidence-add-panel {
  background: var(--bg-surface-2);
  border: 1px dashed var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 14px;
  margin-top: 14px;
}

/* ============================================================
   LEGAL REGISTER ACTIONS & EVIDENCE SYSTEM
   ============================================================ */
.legal-actions-cell {
  white-space: nowrap;
  text-align: right;
  vertical-align: middle;
  padding-right: 14px !important;
}

.legal-action-group {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  flex-wrap: nowrap;
  white-space: nowrap;
}

/* Primary Action Button (Manage Evidence / Docs) */
.btn-legal-primary {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 700;
  border-radius: 6px;
  border: 1px solid rgba(37, 99, 235, 0.35);
  background: linear-gradient(135deg, var(--brand-primary), #2563eb);
  color: #ffffff;
  cursor: pointer;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
  box-shadow: 0 1px 3px rgba(37, 99, 235, 0.2);
  line-height: 1.4;
}
.btn-legal-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(37, 99, 235, 0.35);
  background: linear-gradient(135deg, #1d4ed8, #2563eb);
}
.btn-legal-primary.urgent {
  background: linear-gradient(135deg, #ea580c, #dc2626);
  border-color: rgba(220, 38, 38, 0.4);
  box-shadow: 0 1px 3px rgba(220, 38, 38, 0.2);
}
.btn-legal-primary.urgent:hover {
  background: linear-gradient(135deg, #c2410c, #b91c1c);
  box-shadow: 0 4px 10px rgba(220, 38, 38, 0.35);
}

/* AI Audit Button */
.btn-legal-audit {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 9px;
  font-size: 11px;
  font-weight: 700;
  border-radius: 6px;
  border: 1px solid rgba(139, 92, 246, 0.35);
  background: rgba(139, 92, 246, 0.1);
  color: #7c3aed;
  cursor: pointer;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
  line-height: 1.4;
}
.btn-legal-audit:hover {
  background: rgba(139, 92, 246, 0.22);
  border-color: #8b5cf6;
  color: #6d28d9;
  transform: translateY(-1px);
}
[data-theme="dark"] .btn-legal-audit, body.theme-dark .btn-legal-audit {
  background: rgba(139, 92, 246, 0.22);
  border-color: rgba(139, 92, 246, 0.5);
  color: #c4b5fd;
}
[data-theme="dark"] .btn-legal-audit:hover, body.theme-dark .btn-legal-audit:hover {
  background: rgba(139, 92, 246, 0.35);
  border-color: #a78bfa;
  color: #ffffff;
}

/* Secondary Button (View Duty / Applicability) */
.btn-legal-secondary {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 6px;
  border: 1px solid var(--border-subtle);
  background: var(--bg-surface-2);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
  line-height: 1.4;
}
.btn-legal-secondary:hover {
  background: var(--bg-card);
  border-color: var(--brand-primary);
  color: var(--text-primary);
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

/* Compact Square Icon Buttons (Settings ⚙️, View 🔍) */
.btn-legal-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  min-width: 28px;
  max-width: 28px;
  padding: 0;
  font-size: 13px;
  line-height: 1;
  border-radius: 6px;
  border: 1px solid var(--border-subtle);
  background: var(--bg-surface-2);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
  flex-shrink: 0;
}
.btn-legal-icon:hover {
  background: var(--bg-card);
  border-color: var(--brand-primary);
  color: var(--text-primary);
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

/* Sub-Buttons in Evidence Column */
.evidence-btn-row {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 5px;
}
.btn-evidence-sub {
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
  line-height: 1.3;
}
.btn-evidence-sub.primary {
  background: var(--brand-primary);
  color: #ffffff;
  border: 1px solid var(--brand-primary);
}
.btn-evidence-sub.primary:hover {
  background: #1d4ed8;
  border-color: #1d4ed8;
}
.btn-evidence-sub.secondary {
  background: var(--bg-surface-2);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
}
.btn-evidence-sub.secondary:hover {
  background: var(--bg-card);
  color: var(--text-primary);
  border-color: var(--brand-primary);
}

/* ============================================================
   COLOUR PSYCHOLOGY: UI SWITCHER & ERGONOMIC SUITE STYLING
   ============================================================ */

/* Topbar & Login Toggle Button */
.palette-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 9999px;
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.22s var(--ease-out);
  white-space: nowrap;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  user-select: none;
}
.palette-toggle-btn:hover {
  background: var(--bg-surface-2);
  border-color: var(--brand-primary);
  color: var(--text-accent);
  box-shadow: 0 4px 14px var(--brand-primary-glow);
  transform: translateY(-1px);
}
.palette-toggle-btn .palette-icon {
  font-size: 14px;
  display: inline-block;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.palette-toggle-btn:hover .palette-icon {
  transform: rotate(25deg) scale(1.15);
}
.palette-indicator {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--brand-primary);
  box-shadow: 0 0 0 2px var(--bg-surface), 0 0 8px var(--brand-primary);
  display: inline-block;
  transition: background 0.3s, transform 0.2s;
}

/* Modal Hero Header */
.psychology-hero-banner {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 16px 20px;
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.08), rgba(124, 58, 237, 0.08));
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  margin-bottom: 20px;
}
[data-theme="dark"] .psychology-hero-banner, body.theme-dark .psychology-hero-banner {
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.16), rgba(124, 58, 237, 0.16));
}
.psychology-hero-icon {
  font-size: 32px;
  line-height: 1;
  flex-shrink: 0;
  padding: 10px;
  background: var(--bg-surface);
  border-radius: var(--radius-md);
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.psychology-hero-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.psychology-hero-subtitle {
  font-size: 12.5px;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* Quick Switcher Bar */
.psychology-quick-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px 16px;
  background: var(--bg-surface-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  margin-bottom: 20px;
}
.psychology-quick-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.psychology-pills-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.psychology-pill-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 9999px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.2s ease;
}
.psychology-pill-btn:hover {
  border-color: var(--brand-primary);
  transform: translateY(-1px);
}
.psychology-pill-btn.active {
  background: var(--brand-primary);
  color: #ffffff;
  border-color: var(--brand-primary);
  box-shadow: 0 2px 8px var(--brand-primary-glow);
}
.psychology-pill-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1.5px solid #ffffff;
}

/* 5 Cards Grid */
.psychology-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  margin-bottom: 12px;
}
.psychology-card {
  background: var(--bg-surface);
  border: 1.5px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 18px;
  display: flex;
  flex-direction: column;
  transition: all 0.25s var(--ease-out);
  position: relative;
  overflow: hidden;
  cursor: pointer;
}
.psychology-card:hover {
  transform: translateY(-2px);
  border-color: var(--brand-primary);
  box-shadow: 0 8px 24px var(--brand-primary-glow);
}
.psychology-card.active {
  border-color: var(--brand-primary);
  background: var(--bg-card);
  box-shadow: 0 0 0 1px var(--brand-primary), 0 8px 24px var(--brand-primary-glow);
}
.psychology-card-badge-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.psychology-contra-badge {
  font-size: 10px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 4px;
  background: rgba(16, 185, 129, 0.12);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.3);
  letter-spacing: 0.4px;
}
.psychology-active-tag {
  font-size: 10px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 9999px;
  background: var(--brand-primary);
  color: #ffffff;
  display: none;
}
.psychology-card.active .psychology-active-tag {
  display: inline-block;
}

/* Swatch Preview Row */
.psychology-swatch-banner {
  height: 48px;
  border-radius: var(--radius-sm);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.psychology-swatch-pills {
  display: flex;
  align-items: center;
  gap: 8px;
}
.psychology-dot-large {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid #ffffff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}
.psychology-card-title {
  font-size: 15px;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 2px;
}
.psychology-card-theme {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--brand-primary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
}
.psychology-card-desc {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 12px;
  flex: 1;
}
.psychology-cognitive-box {
  background: var(--bg-surface-2);
  border-left: 3px solid var(--brand-primary);
  padding: 8px 10px;
  border-radius: 0 6px 6px 0;
  font-size: 11px;
  color: var(--text-secondary);
  margin-bottom: 12px;
  line-height: 1.4;
}
.psychology-bestfor {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 16px;
  display: flex;
  gap: 4px;
}
.psychology-bestfor strong {
  color: var(--text-secondary);
}
.psychology-apply-btn {
  width: 100%;
  padding: 9px;
  background: var(--bg-surface-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.psychology-card.active .psychology-apply-btn {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
  color: #ffffff;
  box-shadow: 0 2px 10px var(--brand-primary-glow);
}
.psychology-card:not(.active):hover .psychology-apply-btn {
  background: var(--brand-primary);
  color: #ffffff;
  border-color: var(--brand-primary);
}

/* ============================================================
   SETTINGS MODAL & UNIFIED ERGONOMIC HUB
   ============================================================ */

/* Topbar Settings Button & User Role Badge */
.topbar-user-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: var(--bg-surface-2);
  border: 1px solid var(--border-subtle);
  border-radius: 9999px;
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
}
.topbar-user-badge:hover {
  border-color: var(--brand-primary);
  background: var(--bg-surface);
  transform: translateY(-1px);
}
.user-badge-role {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-primary);
}

.settings-btn {
  position: relative;
}
.settings-palette-dot {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand-primary);
  box-shadow: 0 0 0 2px var(--bg-surface), 0 0 6px var(--brand-primary);
  pointer-events: none;
}

/* Modal Wide override */
.modal.modal-settings {
  max-width: 920px;
  width: 95%;
}

/* Tab Navigation Header in Settings */
.settings-nav-tabs {
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--border-subtle);
  padding-bottom: 12px;
  margin-bottom: 20px;
  overflow-x: auto;
  scrollbar-width: none;
}
.settings-nav-tabs::-webkit-scrollbar { display: none; }
.settings-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: var(--bg-surface-2);
  border: 1px solid var(--border-subtle);
  border-radius: 9999px;
  color: var(--text-secondary);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.settings-tab-btn:hover {
  color: var(--text-primary);
  border-color: var(--brand-primary);
}
.settings-tab-btn.active {
  background: var(--brand-primary);
  color: #ffffff;
  border-color: var(--brand-primary);
  box-shadow: 0 2px 8px var(--brand-primary-glow);
}

/* Tab Panels */
.settings-tab-pane {
  display: none;
  animation: fadeInPane 0.2s ease;
}
.settings-tab-pane.active {
  display: block;
}
@keyframes fadeInPane {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Dual Theme Selector Cards */
.theme-select-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
  margin-bottom: 24px;
}
.theme-select-card {
  background: var(--bg-surface);
  border: 2px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 16px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 14px;
}
.theme-select-card:hover {
  border-color: var(--brand-primary);
  transform: translateY(-2px);
}
.theme-select-card.active {
  border-color: var(--brand-primary);
  background: var(--bg-card);
  box-shadow: 0 4px 16px var(--brand-primary-glow);
}
.theme-card-icon {
  font-size: 28px;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-surface-2);
}
.theme-card-info h4 {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 3px;
  color: var(--text-primary);
}
.theme-card-info p {
  font-size: 11.5px;
  color: var(--text-secondary);
  line-height: 1.4;
}

/* Section Divider in Settings */
.settings-section-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 22px 0 16px 0;
  font-size: 13px;
  font-weight: 800;
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.settings-section-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border-subtle);
}

/* User Role Cards in Settings */
.user-roles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
}
.user-role-card {
  background: var(--bg-surface);
  border: 1.5px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 14px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.user-role-card:hover {
  border-color: var(--brand-primary);
  transform: translateY(-2px);
}
.user-role-card.active {
  border-color: var(--brand-primary);
  background: var(--bg-card);
  box-shadow: 0 0 0 1px var(--brand-primary), 0 4px 14px var(--brand-primary-glow);
}
.user-role-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));
  color: #ffffff;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
}
.user-role-info {
  flex: 1;
}
.user-role-name {
  font-size: 13.5px;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 2px;
}
.user-role-badge-text {
  font-size: 11px;
  font-weight: 700;
  color: var(--brand-primary);
  margin-bottom: 4px;
}
.user-role-meta {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.4;
}

/* Workspace Details Cards */
.workspace-info-box {
  background: var(--bg-surface-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 16px 20px;
  margin-bottom: 20px;
}
.workspace-meta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
  margin-top: 12px;
}
.workspace-meta-item label {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-muted);
  display: block;
  margin-bottom: 3px;
}
.workspace-meta-item div {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
}

/* System Settings Action Rows */
.settings-action-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  margin-bottom: 10px;
}
.settings-action-row h5 {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 2px;
}
.settings-action-row p {
  font-size: 11.5px;
  color: var(--text-secondary);
}

/* ============================================================
   AUTOMATED EMAIL ALERT DISPATCH ENGINE & OUTBOX VIEWER
   ============================================================ */

/* Floating Live Email Toast */
.email-alert-toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: var(--bg-surface);
  border: 1.5px solid #10b981;
  border-radius: var(--radius-md);
  padding: 14px 18px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.25);
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 9999;
  transform: translateY(100px);
  opacity: 0;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  max-width: 440px;
}
.email-alert-toast.show {
  transform: translateY(0);
  opacity: 1;
}
.email-toast-icon {
  font-size: 26px;
  flex-shrink: 0;
}
.email-toast-content h5 {
  font-size: 13.5px;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 2px;
}
.email-toast-content p {
  font-size: 11.5px;
  color: var(--text-secondary);
  line-height: 1.4;
}
.email-toast-btn {
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.3);
  padding: 5px 10px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s;
}
.email-toast-btn:hover {
  background: #10b981;
  color: #ffffff;
}

/* Email Outbox in Settings */
.email-outbox-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
}
.email-outbox-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  transition: all 0.2s;
}
.email-outbox-card:hover {
  border-color: var(--brand-primary);
  transform: translateY(-1px);
}
.email-outbox-info {
  flex: 1;
  min-width: 0;
}
.email-outbox-subj {
  font-size: 13px;
  font-weight: 800;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 3px;
}
.email-outbox-meta {
  font-size: 11px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.email-status-pill {
  font-size: 10px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 9999px;
  letter-spacing: 0.3px;
}
.email-status-delivered {
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

/* Realistic HTML Email Preview Container inside Modal */
.email-client-mock {
  background: #ffffff;
  color: #0f172a;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}
.email-client-header {
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  padding: 16px 20px;
}
.email-client-field {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 12.5px;
  margin-bottom: 6px;
  color: #334155;
}
.email-client-field strong {
  width: 60px;
  color: #64748b;
  font-size: 11.5px;
  text-transform: uppercase;
}
.email-client-field-subj {
  font-size: 15px;
  font-weight: 800;
  color: #0f172a;
  margin-top: 6px;
  line-height: 1.3;
}
.email-client-body {
  padding: 24px;
  background: #ffffff;
  color: #1e293b;
  line-height: 1.6;
  font-size: 13.5px;
}
.email-banner-box {
  background: linear-gradient(135deg, #0f172a, #1e293b);
  color: #ffffff;
  padding: 16px 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.email-callout-urgent {
  background: #fef2f2;
  border-left: 4px solid #dc2626;
  padding: 14px 18px;
  border-radius: 0 8px 8px 0;
  margin: 18px 0;
  color: #991b1b;
}
.email-action-link-btn {
  display: inline-block;
  background: #2563eb;
  color: #ffffff !important;
  font-weight: 700;
  font-size: 13px;
  padding: 12px 24px;
  border-radius: 6px;
  text-decoration: none;
  margin: 16px 0;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}
.email-client-footer {
  background: #f8fafc;
  border-top: 1px solid #e2e8f0;
  padding: 14px 20px;
  font-size: 11px;
  color: #64748b;
  line-height: 1.5;
}

/* ============================================================
   INTERACTIVE ANIMATIONS SUITE (TASTE-DRIVEN & POLISHED)
   1. Interactive Safety Companion ("Captain Harith / En. Harith")
   2. 360° Interactive PPE Sentinel & Worker Inspection Station
   3. Login Screen Welcoming Mascot
   ============================================================ */

/* Keyframe Animations */
@keyframes companionIdle {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-5px) rotate(1deg); }
}

@keyframes eyeBlink {
  0%, 94%, 98%, 100% { transform: scaleY(1); }
  96% { transform: scaleY(0.12); }
}

@keyframes helmetGleam {
  0% { transform: translateX(-60px) skewX(-25deg); opacity: 0; }
  15% { opacity: 0.9; }
  35%, 100% { transform: translateX(100px) skewX(-25deg); opacity: 0; }
}

@keyframes armWave {
  0%, 100% { transform: rotate(0deg); }
  20% { transform: rotate(-18deg); }
  40% { transform: rotate(14deg); }
  60% { transform: rotate(-12deg); }
  80% { transform: rotate(6deg); }
}

@keyframes hotspotPulse {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.7); }
  70% { transform: scale(1.15); box-shadow: 0 0 0 10px rgba(37, 99, 235, 0); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(37, 99, 235, 0); }
}

@keyframes scanSweep {
  0% { top: 4%; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { top: 96%; opacity: 0; }
}

@keyframes stampPop {
  0% { transform: scale(2.2) rotate(-15deg); opacity: 0; }
  60% { transform: scale(0.92) rotate(-4deg); opacity: 1; }
  100% { transform: scale(1) rotate(-6deg); opacity: 1; }
}

@keyframes bubblePop {
  0% { transform: translateY(12px) scale(0.92); opacity: 0; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}

/* ------------------------------------------------------------
   1. FLOATING SAFETY COMPANION WIDGET ("EN. HARITH")
   ------------------------------------------------------------ */
.safety-companion-widget {
  position: fixed;
  bottom: 24px;
  right: 28px;
  z-index: 850;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  pointer-events: none;
  font-family: inherit;
}

.safety-companion-widget * {
  pointer-events: auto;
}

/* Minimized Floating Pill */
.companion-minimized-pill {
  display: none;
  align-items: center;
  gap: 8px;
  background: var(--bg-surface);
  border: 1.5px solid var(--border-subtle);
  border-radius: 9999px;
  padding: 8px 16px 8px 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.companion-minimized-pill:hover {
  transform: translateY(-2px);
  border-color: var(--brand-primary);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
}

.companion-minimized-icon {
  font-size: 20px;
  animation: companionIdle 3s ease-in-out infinite;
}

.companion-minimized-text {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-primary);
}

.companion-minimized-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 6px #10b981;
}

.safety-companion-widget.minimized .companion-minimized-pill {
  display: flex;
}

.safety-companion-widget.minimized .companion-main-body {
  display: none;
}

/* Main Body & Avatar */
.companion-main-body {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.companion-avatar-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  position: relative;
  width: 78px;
  height: 94px;
  padding: 0;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.18));
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  transform-origin: bottom center;
}

.companion-avatar-btn:hover {
  transform: scale(1.08) translateY(-4px);
}

.companion-avatar-btn:active {
  transform: scale(0.96);
}

.companion-svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* SVG Character Internal Animations */
.char-body-group {
  animation: companionIdle 3.2s ease-in-out infinite;
  transform-origin: bottom center;
}

.char-eyes {
  animation: eyeBlink 4.2s infinite;
  transform-origin: 50% 42%;
}

.char-helmet-gleam {
  animation: helmetGleam 6.5s ease-in-out infinite;
}

.companion-avatar-btn:hover .char-arm-wave {
  animation: armWave 1.2s ease-in-out infinite;
  transform-origin: 22px 55px;
}

/* Quick Status Badge under Avatar */
.companion-avatar-badge {
  position: absolute;
  bottom: 6px;
  right: 4px;
  background: var(--bg-surface);
  border: 1.5px solid var(--border-subtle);
  border-radius: 9999px;
  padding: 2px 7px;
  font-size: 10px;
  font-weight: 800;
  color: var(--brand-primary);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
  display: flex;
  align-items: center;
  gap: 3px;
}

/* Speech / Interactive Bubble */
.companion-bubble {
  width: 290px;
  background: var(--bg-surface);
  border: 1.5px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  margin-bottom: 12px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.18);
  position: relative;
  animation: bubblePop 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  transition: all 0.25s ease;
}

.companion-bubble::after {
  content: '';
  position: absolute;
  bottom: -9px;
  right: 32px;
  width: 16px;
  height: 16px;
  background: var(--bg-surface);
  border-right: 1.5px solid var(--border-subtle);
  border-bottom: 1.5px solid var(--border-subtle);
  transform: rotate(45deg);
}

.companion-bubble-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border-subtle);
}

.companion-bubble-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 800;
  color: var(--brand-primary);
}

.companion-bubble-controls {
  display: flex;
  align-items: center;
  gap: 4px;
}

.companion-icon-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 12px;
  padding: 3px 5px;
  border-radius: var(--radius-sm);
  transition: all 0.15s;
}

.companion-icon-btn:hover {
  background: var(--bg-surface-2);
  color: var(--text-primary);
}

.companion-bubble-body {
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-primary);
  margin-bottom: 10px;
}

.companion-bubble-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  color: var(--brand-secondary);
  background: var(--sidebar-active-bg, rgba(37, 99, 235, 0.08));
  padding: 2px 6px;
  border-radius: 4px;
  margin-bottom: 6px;
  letter-spacing: 0.3px;
}

.companion-bubble-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding-top: 6px;
  border-top: 1px dashed var(--border-subtle);
}

.companion-footer-btn {
  font-size: 11px;
  font-weight: 700;
  color: var(--brand-primary);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: var(--radius-sm);
  transition: all 0.15s;
}

.companion-footer-btn:hover {
  background: var(--bg-surface-2);
  text-decoration: underline;
}

/* ------------------------------------------------------------
   2. DASHBOARD: 360° INTERACTIVE PPE WORKER SENTINEL
   ------------------------------------------------------------ */
.ppe-sentinel-card {
  background: var(--bg-surface);
  border: 1.5px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05);
  position: relative;
  overflow: hidden;
}

.ppe-sentinel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1.5px solid var(--border-subtle);
}

.ppe-sentinel-title-group h3 {
  font-size: 17px;
  font-weight: 800;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
}

.ppe-sentinel-title-group p {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 3px;
}

.ppe-sentinel-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ppe-sentinel-grid {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 28px;
  align-items: center;
}

@media (max-width: 900px) {
  .ppe-sentinel-grid {
    grid-template-columns: 1fr;
    justify-items: center;
  }
}

/* Interactive Worker Stage */
.ppe-worker-stage {
  position: relative;
  width: 240px;
  height: 380px;
  background: radial-gradient(circle at 50% 60%, var(--bg-surface-2) 0%, transparent 70%);
  border-radius: var(--radius-lg);
  border: 1px dashed var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
}

.ppe-worker-svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.12));
}

/* Laser Scanner Beam */
.ppe-scanner-beam {
  position: absolute;
  left: 5%;
  width: 90%;
  height: 3px;
  background: linear-gradient(90deg, transparent, #06b6d4, #10b981, #06b6d4, transparent);
  box-shadow: 0 0 12px #06b6d4, 0 0 24px #10b981;
  opacity: 0;
  pointer-events: none;
  z-index: 20;
}

.ppe-worker-stage.scanning .ppe-scanner-beam {
  animation: scanSweep 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

/* Interactive Pulsing Hotspot Markers */
.ppe-hotspot {
  position: absolute;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--brand-primary);
  color: #ffffff;
  border: 2px solid #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  z-index: 15;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  animation: hotspotPulse 2.8s infinite;
}

.ppe-hotspot:hover {
  transform: scale(1.3);
  background: #f59e0b;
}

.ppe-hotspot.active {
  background: #10b981;
  transform: scale(1.25);
  box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.35);
  animation: none;
}

/* Hotspot Coordinates on Worker */
.ppe-hotspot[data-target="helmet"]  { top: 28px; left: 107px; }
.ppe-hotspot[data-target="eyes"]    { top: 62px; left: 107px; }
.ppe-hotspot[data-target="vest"]    { top: 125px; left: 107px; }
.ppe-hotspot[data-target="gloves"]  { top: 185px; left: 45px; }
.ppe-hotspot[data-target="harness"] { top: 160px; left: 140px; }
.ppe-hotspot[data-target="boots"]   { top: 320px; left: 107px; }

/* Diagnostic Console on Right */
.ppe-diag-console {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

.ppe-gear-card {
  background: var(--bg-surface-2);
  border: 1.5px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 18px 20px;
  transition: border-color 0.2s;
  position: relative;
}

.ppe-gear-card:hover {
  border-color: var(--brand-primary);
}

.ppe-gear-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.ppe-gear-title {
  font-size: 15px;
  font-weight: 800;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
}

.ppe-spec-badge {
  font-size: 10.5px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 9999px;
  background: rgba(37, 99, 235, 0.12);
  color: var(--brand-primary);
  border: 1px solid rgba(37, 99, 235, 0.25);
  letter-spacing: 0.4px;
}

.ppe-checklist {
  list-style: none;
  padding: 0;
  margin: 12px 0 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 8px;
}

.ppe-checklist li {
  font-size: 12px;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-surface);
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
}

.ppe-checklist li strong {
  color: var(--text-primary);
}

/* Verification Stamp */
.ppe-stamp-wrap {
  position: absolute;
  top: 14px;
  right: 18px;
  pointer-events: none;
}

.ppe-stamp-pass {
  border: 2px solid #10b981;
  color: #10b981;
  font-size: 11px;
  font-weight: 900;
  padding: 4px 10px;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: 1px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transform: rotate(-6deg);
  animation: stampPop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.ppe-stamp-fail {
  border: 2px solid #dc2626;
  color: #dc2626;
  font-size: 11px;
  font-weight: 900;
  padding: 4px 10px;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: 1px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transform: rotate(5deg);
  animation: stampPop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

/* Quick Gear Switcher Pills */
.ppe-switch-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ppe-pill-btn {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 9999px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: all 0.18s ease;
}

.ppe-pill-btn:hover {
  border-color: var(--brand-primary);
  color: var(--brand-primary);
  transform: translateY(-1px);
}

.ppe-pill-btn.active {
  background: var(--brand-primary);
  color: #ffffff;
  border-color: var(--brand-primary);
  box-shadow: 0 2px 8px var(--brand-primary-glow);
}

/* ------------------------------------------------------------
   3. LOGIN SCREEN WELCOMING MASCOT
   ------------------------------------------------------------ */
.login-mascot-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  gap: 12px;
}

.login-mascot-avatar {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  animation: companionIdle 3s ease-in-out infinite;
}

.login-mascot-speech {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 8px 12px;
  font-size: 11.5px;
  color: var(--text-primary);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  position: relative;
  max-width: 260px;
}

.login-mascot-speech::before {
  content: '';
  position: absolute;
  left: -6px;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  width: 10px;
  height: 10px;
  background: var(--bg-surface);
  border-left: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
}

/* ============================================================
   PUBLIC VIEW-ONLY (DEMO AUDITOR) PREVIEW MODE
   ============================================================ */
.view-only-banner {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background: linear-gradient(90deg, #1e3a8a, #0369a1);
  color: #ffffff;
  padding: 8px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
  font-size: 12px;
}

.view-only-banner-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.view-only-badge {
  background: #f59e0b;
  color: #0f172a;
  font-size: 10px;
  font-weight: 900;
  padding: 3px 8px;
  border-radius: 9999px;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

.view-only-text {
  color: #f8fafc;
  line-height: 1.4;
}

.view-only-text strong {
  color: #ffffff;
}

.view-only-status-pill {
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: 4px 10px;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

/* Toast for Blocked Edit Actions */
.view-only-toast {
  position: fixed;
  top: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(-60px);
  background: var(--bg-surface);
  border: 2px solid #f59e0b;
  border-radius: var(--radius-md);
  padding: 14px 20px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28);
  display: flex;
  align-items: center;
  gap: 14px;
  z-index: 10000;
  opacity: 0;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  max-width: 520px;
  pointer-events: none;
}

.view-only-toast.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.view-only-toast-icon {
  font-size: 28px;
  flex-shrink: 0;
}

.view-only-toast-content h5 {
  font-size: 13.5px;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 2px;
}

.view-only-toast-content p {
  font-size: 11.5px;
  color: var(--text-secondary);
  line-height: 1.45;
}

.view-only-toast-btn {
  background: #f59e0b;
  color: #0f172a;
  border: none;
  border-radius: var(--radius-sm);
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.view-only-toast-btn:hover {
  background: #d97706;
  color: #ffffff;
}

/* Guest Button on Login */
.btn-login-guest {
  width: 100%;
  padding: 11px 16px;
  border-radius: var(--radius-sm);
  background: rgba(14, 165, 233, 0.1);
  border: 1.5px dashed #0284c7;
  color: #0284c7;
  font-weight: 700;
  font-size: 12.5px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 8px;
  transition: all 0.2s;
}

.btn-login-guest:hover {
  background: #0284c7;
  color: #ffffff;
  border-style: solid;
}

/* Visual cues for disabled/locked items in view-only mode */
.view-only-mode button.locked-action,
.view-only-mode input[type="submit"].locked-action {
  opacity: 0.6;
  cursor: not-allowed !important;
  position: relative;
}

/* ============================================================
   COMPLIANCE HUB & ISO DOCUMENTATION ENHANCEMENTS
   ============================================================ */

.ch-modal-wide {
  max-width: 1060px !important;
  width: 95vw !important;
}

/* --- ISO READINESS DASHBOARD --- */
.iso-dash-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 18px;
  margin-bottom: 22px;
}
@media (max-width: 960px) {
  .iso-dash-grid { grid-template-columns: 1fr; }
}

.iso-ready-card, .iso-heat-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 20px 22px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.03);
}

.iso-ready-top {
  display: flex;
  gap: 22px;
  align-items: center;
}
@media (max-width: 640px) {
  .iso-ready-top { flex-direction: column; align-items: stretch; }
}

/* Radial readiness ring */
.iso-ring {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: conic-gradient(var(--ring, #16a34a) calc(var(--pct, 0) * 1%), var(--bg-surface-2) 0);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 18px rgba(0,0,0,0.06);
}
.iso-ring-inner {
  width: 108px;
  height: 108px;
  border-radius: 50%;
  background: var(--bg-card);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.iso-ring-value {
  font-family: 'Outfit', sans-serif;
  font-size: 28px;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1;
}
.iso-ring-label {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 4px;
}

.iso-ready-split {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.iso-split-row { display: flex; flex-direction: column; gap: 4px; }
.iso-split-head {
  display: flex;
  justify-content: space-between;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-primary);
}
.iso-split-bar {
  height: 8px;
  background: var(--bg-surface-2);
  border-radius: 6px;
  overflow: hidden;
}
.iso-split-bar > div {
  height: 100%;
  border-radius: 6px;
  transition: width 0.4s ease;
}

.iso-audit-countdown {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--bg-surface-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 8px 12px;
  margin-top: 4px;
}
.iso-audit-countdown.soon {
  border-color: rgba(245, 158, 11, 0.4);
  background: rgba(245, 158, 11, 0.08);
}
.iso-countdown-days {
  font-family: 'Outfit', sans-serif;
  font-size: 22px;
  font-weight: 800;
  color: var(--brand-primary);
  line-height: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.iso-countdown-days small {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-muted);
}
.iso-countdown-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-primary);
}
.iso-countdown-sub {
  font-size: 11px;
  color: var(--text-muted);
}

.iso-milestones {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 8px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px dashed var(--border-subtle);
}
.iso-milestone {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  color: var(--text-secondary);
  padding: 4px 8px;
  border-radius: 6px;
}
.iso-milestone.clickable {
  cursor: pointer;
  background: var(--bg-surface-2);
  transition: all 0.15s;
}
.iso-milestone.clickable:hover {
  color: var(--brand-primary);
  border-color: var(--border-active);
}
.iso-milestone-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #3b82f6;
  flex-shrink: 0;
}
.iso-milestone-dot.hot {
  background: #f59e0b;
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.6);
}
.iso-milestone-label { flex: 1; font-weight: 600; }
.iso-milestone-date { font-size: 10.5px; color: var(--text-muted); }

/* --- CLAUSE HEAT-MAP --- */
.iso-heat-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 12px;
}
.iso-heat-hint { font-size: 11px; color: var(--text-muted); }

.iso-heat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 8px;
}
.iso-heat-tile {
  background: var(--bg-surface-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  cursor: pointer;
  text-align: left;
  transition: all 0.2s;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: inherit;
  color: inherit;
}
.iso-heat-tile:hover {
  border-color: var(--tile, #3b82f6);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}
.iso-heat-tile.active {
  border-color: var(--tile, #3b82f6);
  background: rgba(37, 99, 235, 0.08);
  box-shadow: 0 0 0 2px var(--tile, #3b82f6);
}
.iso-heat-tile-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.iso-heat-icon { font-size: 14px; }
.iso-heat-pct {
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: 14px;
  color: var(--tile, var(--text-primary));
}
.iso-heat-name {
  font-weight: 700;
  font-size: 12px;
  color: var(--text-primary);
}
.iso-heat-sub {
  font-size: 10px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.iso-heat-bar {
  height: 4px;
  background: rgba(0,0,0,0.08);
  border-radius: 4px;
  overflow: hidden;
  margin-top: 2px;
}
[data-theme="dark"] .iso-heat-bar, body.theme-dark .iso-heat-bar {
  background: rgba(255,255,255,0.08);
}
.iso-heat-bar > div {
  height: 100%;
  background: var(--tile, #3b82f6);
  border-radius: 4px;
}
.iso-heat-meta {
  font-size: 9.5px;
  color: var(--text-muted);
  margin-top: 2px;
}
.t-red { color: #ef4444; font-weight: 700; }
.t-amber { color: #f59e0b; font-weight: 700; }
.t-green { color: #10b981; font-weight: 700; }

/* --- HOW THIS WORKS STRIP --- */
.iso-how-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.08), rgba(124, 58, 237, 0.05));
  border: 1px solid rgba(37, 99, 235, 0.22);
  border-radius: var(--radius-md);
  padding: 12px 18px;
  margin-bottom: 18px;
  font-size: 12px;
  color: var(--text-secondary);
  flex-wrap: wrap;
}
.iso-how-strip-title {
  font-weight: 800;
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 11px;
}
.iso-how-step {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-primary);
}
.iso-how-step span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--brand-primary);
  color: #ffffff;
  font-size: 10px;
  font-weight: 800;
}
.iso-how-arrow {
  color: var(--text-muted);
  font-weight: 700;
}

/* --- ISO MATRIX TABLE & HOW-TO COLUMN --- */
.iso-table-wrap {
  margin-bottom: 24px;
}
.iso-table-scroll {
  overflow-x: auto;
}
#iso-table {
  width: 100%;
  border-collapse: collapse;
}
#iso-table th {
  background: var(--bg-surface-2);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-subtle);
  white-space: nowrap;
}
#iso-table td {
  padding: 14px 14px;
  border-bottom: 1px solid var(--border-subtle);
  font-size: 12.5px;
  vertical-align: top;
}
.iso-th-how {
  background: rgba(37, 99, 235, 0.08) !important;
  color: var(--brand-primary) !important;
}

.iso-row.is-open td {
  background: rgba(37, 99, 235, 0.03);
}
.iso-row-flash td {
  animation: isoFlash 1.6s ease;
}
@keyframes isoFlash {
  0%, 100% { background: transparent; }
  30%, 70% { background: rgba(37, 99, 235, 0.18); }
}

.iso-clause-no {
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: 15px;
  color: var(--text-primary);
}
.iso-std-chip {
  display: inline-block;
  font-size: 9.5px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  margin-top: 3px;
  white-space: nowrap;
}
.iso-std-both { background: rgba(124, 58, 237, 0.12); color: #7c3aed; }
.iso-std-ohs  { background: rgba(37, 99, 235, 0.12); color: #2563eb; }
.iso-std-env  { background: rgba(16, 185, 129, 0.12); color: #059669; }

.iso-req-title {
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
}
.iso-req-desc {
  font-size: 11.5px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 6px;
}
.iso-req-owner {
  font-size: 11px;
  color: var(--text-muted);
}

.iso-doc-list {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 11.5px;
  color: var(--text-secondary);
  line-height: 1.45;
}
.iso-doc-list li::before {
  content: '• ';
  color: var(--brand-primary);
  font-weight: bold;
}
.iso-recommended {
  display: inline-block;
  font-size: 10px;
  color: var(--text-muted);
  font-weight: 600;
  margin-bottom: 4px;
}

.iso-ev-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--bg-surface-2);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  padding: 2px 7px;
  font-size: 11px;
  color: var(--text-primary);
  max-width: 170px;
}
.iso-ev-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.iso-ev-date { font-size: 10px; color: var(--text-muted); margin-top: 2px; }
.iso-ev-none { font-size: 11px; color: var(--text-muted); font-style: italic; }

.iso-status-select {
  font-size: 11.5px;
  font-weight: 700;
  border-radius: 6px;
  padding: 5px 8px;
  border: 1px solid var(--border-subtle);
  background: var(--bg-surface-2);
  color: var(--text-primary);
  cursor: pointer;
}
.iso-status-select.st-conform { border-color: rgba(34, 197, 94, 0.4); color: #16a34a; background: rgba(34, 197, 94, 0.08); }
.iso-status-select.st-partial { border-color: rgba(245, 158, 11, 0.4); color: #d97706; background: rgba(245, 158, 11, 0.08); }
.iso-status-select.st-gap     { border-color: rgba(239, 68, 68, 0.4); color: #dc2626; background: rgba(239, 68, 68, 0.08); }

/* Tappable "How to fill" column cell */
.iso-how-cell {
  background: rgba(37, 99, 235, 0.02);
}
.iso-how-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  background: rgba(37, 99, 235, 0.1);
  color: var(--brand-primary);
  border: 1px solid rgba(37, 99, 235, 0.35);
  transition: all 0.2s;
  white-space: nowrap;
}
.iso-how-btn:hover {
  background: var(--brand-primary);
  color: #ffffff;
  border-color: var(--brand-primary);
  box-shadow: 0 2px 8px var(--brand-primary-glow);
}
.iso-how-btn.active {
  background: var(--brand-primary);
  color: #ffffff;
  border-color: var(--brand-primary);
}
.iso-how-caret {
  font-size: 10px;
  transition: transform 0.2s;
}
.iso-how-btn.active .iso-how-caret {
  transform: rotate(180deg);
}
.iso-how-steps-count {
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 4px;
}

.iso-row-actions {
  display: inline-flex;
  gap: 4px;
}

/* Accordion Expansion Panel */
.iso-how-row td {
  padding: 0 !important;
  background: var(--bg-surface-2) !important;
  border-bottom: 2px solid var(--brand-primary) !important;
}
.iso-how-panel {
  display: grid;
  grid-template-columns: 1.25fr 1fr 1fr;
  gap: 20px;
  padding: 20px 22px;
  background: var(--bg-card);
  border-left: 4px solid var(--brand-primary);
  animation: isoSlide 0.2s ease-out;
}
@media (max-width: 900px) {
  .iso-how-panel { grid-template-columns: 1fr; }
}
@keyframes isoSlide {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

.iso-how-col h5 {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-primary);
  margin: 0 0 10px 0;
  display: flex;
  align-items: center;
  gap: 6px;
}
.iso-how-ol {
  padding-left: 18px;
  margin: 0;
  font-size: 12px;
  line-height: 1.65;
  color: var(--text-secondary);
}
.iso-how-ol li { margin-bottom: 6px; }

.iso-how-ul {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 11.5px;
  line-height: 1.55;
}
.iso-how-ul.check li {
  padding-left: 18px;
  position: relative;
  margin-bottom: 5px;
  color: var(--text-secondary);
}
.iso-how-ul.check li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: #16a34a;
  font-weight: 800;
}
.iso-how-ul.warn li {
  padding-left: 18px;
  position: relative;
  margin-bottom: 5px;
  color: #b91c1c;
}
[data-theme="dark"] .iso-how-ul.warn li, body.theme-dark .iso-how-ul.warn li {
  color: #f87171;
}
.iso-how-ul.warn li::before {
  content: '⚠';
  position: absolute;
  left: 0;
  color: #ef4444;
  font-weight: 800;
}

.iso-how-example {
  background: var(--bg-surface-2);
  border: 1px solid var(--border-subtle);
  border-left: 3px solid #10b981;
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: 11.5px;
  color: var(--text-primary);
  line-height: 1.5;
  font-style: italic;
  margin-bottom: 12px;
}
.iso-how-links {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.iso-empty {
  text-align: center;
  padding: 40px !important;
  color: var(--text-muted);
}
.iso-attach-hint {
  background: var(--bg-surface-2);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 14px;
}

/* ============================================================
   GUIDELINE & TEMPLATE GALLERY
   ============================================================ */

.gal-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.gal-tabs {
  margin-bottom: 0 !important;
  flex-wrap: wrap;
}
.gal-tab-count {
  font-size: 10px;
  background: rgba(0,0,0,0.08);
  border-radius: 10px;
  padding: 1px 6px;
  margin-left: 4px;
}
[data-theme="dark"] .gal-tab-count, body.theme-dark .gal-tab-count {
  background: rgba(255,255,255,0.12);
}

.gal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

.gal-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all 0.2s;
  box-shadow: 0 1px 4px rgba(0,0,0,0.03);
}
.gal-card:hover {
  transform: translateY(-2px);
  border-color: var(--border-active);
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
}
.gal-card-guide { cursor: pointer; }
.gal-card-template { border-top: 3px solid #7c3aed; }

.gal-card-top {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 8px;
}
.gal-file-icon {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: 11px;
  flex-shrink: 0;
  letter-spacing: 0.5px;
}
.fmt-xlsx { background: rgba(16, 185, 129, 0.15); color: #059669; border: 1px solid rgba(16, 185, 129, 0.35); }
.fmt-docx { background: rgba(37, 99, 235, 0.15); color: #2563eb; border: 1px solid rgba(37, 99, 235, 0.35); }
.gal-guide-icon { background: rgba(124, 58, 237, 0.12); font-size: 18px; border: 1px solid rgba(124, 58, 237, 0.25); }

.gal-title {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.35;
}
.gal-meta {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}
.gal-desc {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 12px;
}

.gal-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 12px;
}
.gal-chip {
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 10px;
  background: var(--bg-surface-2);
  color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
}
.gal-chip-clause {
  background: rgba(37, 99, 235, 0.1);
  color: var(--brand-primary);
  border-color: rgba(37, 99, 235, 0.3);
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
}
.gal-chip-clause:hover {
  background: var(--brand-primary);
  color: #ffffff;
}

.gal-actions {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}
.gal-read {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--brand-primary);
}

.gal-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 40px;
  color: var(--text-muted);
}

/* Template Field Guidance Modal */
.gal-guide-head {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: 14px;
}
.gal-modal-title {
  font-family: 'Outfit', sans-serif;
  font-size: 18px;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 4px;
}
.gal-modal-summary {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 16px;
}
.gal-modal-h {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-primary);
  margin: 14px 0 8px 0;
}
.gal-field-table-wrap {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: 14px;
  max-height: 340px;
  overflow-y: auto;
}
.gal-field-table {
  width: 100%;
  border-collapse: collapse;
}
.gal-field-table th {
  background: var(--bg-surface-2);
  padding: 9px 12px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-subtle);
  text-align: left;
}
.gal-field-table td {
  padding: 9px 12px;
  font-size: 12px;
  border-bottom: 1px solid var(--border-subtle);
  vertical-align: top;
}
.gal-field-no {
  display: inline-block;
  width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  border-radius: 50%;
  background: var(--bg-surface-2);
  font-size: 10px;
  font-weight: 800;
}
.gal-field-example {
  display: inline-block;
  background: var(--bg-surface-2);
  padding: 3px 7px;
  border-radius: 4px;
  font-family: monospace;
  font-size: 11px;
  color: var(--brand-primary);
}

.gal-guide-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 10px;
}
@media (max-width: 640px) {
  .gal-guide-grid { grid-template-columns: 1fr; }
}
.gal-related {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--bg-surface-2);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  margin: 14px 0;
  font-size: 12px;
}
.gal-source-note {
  font-size: 11px;
  color: var(--text-muted);
  font-style: italic;
  margin-top: 10px;
}

/* Template Preview */
.gal-preview-header {
  display: flex;
  justify-content: space-between;
  padding: 12px 14px;
  background: var(--bg-surface-2);
  border-radius: var(--radius-sm);
  font-size: 12px;
  margin-bottom: 14px;
}
.gal-preview-docmeta {
  text-align: right;
  font-family: monospace;
  font-size: 11px;
  color: var(--text-muted);
}
.gal-preview-sheet {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  overflow-x: auto;
}
.gal-preview-sheet table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11.5px;
}
.gal-preview-sheet th {
  background: var(--bg-surface-2);
  padding: 8px 10px;
  border: 1px solid var(--border-subtle);
  font-weight: 700;
  white-space: nowrap;
}
.gal-preview-sheet td {
  padding: 8px 10px;
  border: 1px solid var(--border-subtle);
  height: 24px;
}
.gal-preview-sheet tr.example td {
  background: rgba(37, 99, 235, 0.06);
  color: var(--brand-primary);
  font-style: italic;
}
.gal-preview-doc {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 400px;
  overflow-y: auto;
  padding: 12px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
}
.gal-preview-section {
  border-bottom: 1px dashed var(--border-subtle);
  padding-bottom: 8px;
}
.gal-preview-label { font-weight: 700; font-size: 12.5px; color: var(--text-primary); }
.gal-preview-hint { font-size: 11px; color: var(--text-muted); margin: 2px 0 4px 0; }
.gal-preview-line {
  background: var(--bg-surface-2);
  padding: 6px 10px;
  border-radius: 4px;
  font-size: 11.5px;
  color: var(--brand-primary);
  font-style: italic;
}

/* ============================================================
   DOSH–SIRIM CERTIFIED PPE REGISTRY WIDGET (DASHBOARD)
   ============================================================ */

.ppe-reg-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 20px 22px;
  margin-bottom: 24px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.03);
}

.ppe-reg-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.ppe-reg-title-group {
  display: flex;
  align-items: center;
  gap: 12px;
}
.ppe-reg-icon {
  font-size: 26px;
}
.ppe-reg-title {
  font-family: 'Outfit', sans-serif;
  font-size: 18px;
  font-weight: 800;
  color: var(--text-primary);
}
.ppe-reg-sub {
  font-size: 12px;
  color: var(--text-secondary);
}

.ppe-reg-sync {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ppe-reg-sync-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-surface-2);
  border: 1px solid var(--border-subtle);
  border-radius: 20px;
  padding: 4px 10px;
  font-size: 11px;
  color: var(--text-secondary);
}
.ppe-reg-sync-badge.is-live .sync-pulse-dot { background: #16a34a; box-shadow: 0 0 6px rgba(22, 163, 74, 0.6); }
.ppe-reg-sync-badge.is-snapshot .sync-pulse-dot { background: #3b82f6; }
.ppe-reg-portal {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--brand-primary);
  text-decoration: none;
  padding: 5px 10px;
  border-radius: 6px;
  background: rgba(37, 99, 235, 0.08);
  border: 1px solid rgba(37, 99, 235, 0.25);
  transition: all 0.15s;
}
.ppe-reg-portal:hover {
  background: var(--brand-primary);
  color: #ffffff;
}

.ppe-reg-kpis {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 6px;
  margin-bottom: 14px;
}
.ppe-reg-kpi {
  flex: 1;
  min-width: 120px;
  background: var(--bg-surface-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  font-family: inherit;
  transition: all 0.2s;
}
.ppe-reg-kpi:hover {
  border-color: var(--kpi, #3b82f6);
  transform: translateY(-1px);
}
.ppe-reg-kpi.active {
  background: var(--bg-card);
  border-color: var(--kpi, #3b82f6);
  box-shadow: 0 0 0 2px var(--kpi, #3b82f6);
}
.ppe-reg-kpi-value {
  font-family: 'Outfit', sans-serif;
  font-size: 20px;
  font-weight: 800;
  color: var(--kpi, var(--text-primary));
  line-height: 1;
}
.ppe-reg-kpi-label {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-muted);
}

.ppe-reg-cats {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 6px;
  margin-bottom: 12px;
}
.ppe-reg-cat {
  padding: 6px 12px;
  background: var(--bg-surface-2);
  border: 1px solid var(--border-subtle);
  border-radius: 20px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: inherit;
}
.ppe-reg-cat:hover { color: var(--text-primary); border-color: rgba(37, 99, 235, 0.4); }
.ppe-reg-cat.active {
  background: var(--brand-primary);
  color: #ffffff;
  border-color: var(--brand-primary);
}
.ppe-reg-cat span {
  font-size: 10px;
  opacity: 0.85;
}

.ppe-reg-toolbar {
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.ppe-reg-search { flex: 1; min-width: 220px; }
.ppe-reg-search input { width: 100% !important; }
.ppe-reg-select {
  padding: 7px 12px;
  border-radius: var(--radius-sm);
  background: var(--bg-input);
  border: 1px solid var(--border-subtle);
  color: var(--text-primary);
  font-size: 12px;
  cursor: pointer;
}

.ppe-reg-table-wrap {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  overflow-x: auto;
}
.ppe-reg-table {
  width: 100%;
  border-collapse: collapse;
}
.ppe-reg-table th {
  background: var(--bg-surface-2);
  padding: 10px 14px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-subtle);
  white-space: nowrap;
  text-align: left;
}
.ppe-reg-table td {
  padding: 12px 14px;
  font-size: 12px;
  border-bottom: 1px solid var(--border-subtle);
  vertical-align: middle;
}
.ppe-reg-table tr:hover td { background: var(--bg-surface-2); }
.ppe-reg-table tr.is-inactive td { opacity: 0.65; }

.ppe-reg-item {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ppe-reg-item-icon { font-size: 20px; flex-shrink: 0; }
.ppe-reg-item-name {
  font-weight: 700;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 6px;
}
.ppe-reg-new {
  font-size: 9px;
  font-weight: 800;
  background: #7c3aed;
  color: #ffffff;
  padding: 1px 5px;
  border-radius: 4px;
  letter-spacing: 0.4px;
}
.ppe-reg-item-sub {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 1px;
}
.ppe-reg-std { color: var(--text-secondary); }

.ppe-reg-ref {
  font-family: monospace;
  font-weight: 700;
  font-size: 11.5px;
  color: var(--brand-primary);
}
.ppe-reg-ref-sub {
  font-size: 10.5px;
  color: var(--text-muted);
}
.ppe-reg-holder { font-weight: 600; color: var(--text-primary); }
.ppe-reg-date { font-weight: 600; color: var(--text-primary); }

.ppe-reg-avail {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 12px;
  white-space: nowrap;
}
.avail-ok { background: rgba(16, 185, 129, 0.12); color: #10b981; }
.avail-limited { background: rgba(245, 158, 11, 0.15); color: #d97706; }
.avail-off { background: rgba(239, 68, 68, 0.12); color: #ef4444; }

.ppe-reg-verify {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--brand-primary);
  text-decoration: none;
  padding: 4px 8px;
  border-radius: 6px;
  background: rgba(37, 99, 235, 0.06);
  border: 1px solid rgba(37, 99, 235, 0.2);
  transition: all 0.15s;
}
.ppe-reg-verify:hover {
  background: var(--brand-primary);
  color: #ffffff;
}

.ppe-reg-more {
  width: 100%;
  padding: 9px;
  background: var(--bg-surface-2);
  border: 1px solid var(--border-subtle);
  border-top: none;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--brand-primary);
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s;
}
.ppe-reg-more:hover { background: var(--bg-card); }

.ppe-reg-foot {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.5;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed var(--border-subtle);
}
.ppe-reg-foot code {
  background: var(--bg-surface-2);
  padding: 2px 4px;
  border-radius: 3px;
  font-family: monospace;
}
.ppe-reg-empty {
  text-align: center;
  padding: 30px;
  color: var(--text-muted);
  font-size: 12px;
}

/* ============================================================
   PPE MANAGEMENT HUB & HIRARC INTEGRATION STYLING
   ============================================================ */

.hirarc-ppe-trigger-card {
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.08);
}
.hirarc-ppe-trigger-card:hover {
  border-color: #1d4ed8 !important;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.16);
}
[data-theme="dark"] .hirarc-ppe-trigger-card, body.theme-dark .hirarc-ppe-trigger-card {
  background: linear-gradient(135deg, rgba(37,99,235,0.14), rgba(245,158,11,0.08)) !important;
  border-color: rgba(59, 130, 246, 0.45) !important;
}

#btn-hirarc-to-ppe {
  transition: all 0.15s ease;
}
#btn-hirarc-to-ppe:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px var(--brand-primary-glow);
}

.ppe-stats-strip .legal-stat-box {
  min-height: 96px;
}

#checker-input:focus {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px var(--brand-primary-glow);
  outline: none;
}

/* ============================================================
   SAFETY DEPARTMENT KPI & MONTHLY GOVERNANCE HUB STYLING
   ============================================================ */
.kpi-stats-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
  gap: 12px;
  margin-bottom: 20px;
}
.kpi-stats-strip .legal-stat-box {
  min-height: 98px;
}

#official-ppe-issuance-doc, #monthly-ehs-report-doc {
  background: #ffffff !important;
  color: #0f172a !important;
  padding: 36px 42px;
  border-radius: 6px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  border: 1px solid #cbd5e1;
  max-width: 900px;
  margin: 0 auto;
}

#official-ppe-issuance-doc td, #monthly-ehs-report-doc td,
#official-ppe-issuance-doc th, #monthly-ehs-report-doc th {
  color: #0f172a !important;
}

@media print {
  #official-ppe-issuance-doc, #monthly-ehs-report-doc, #official-ptw-print-doc {
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
  }
}

/* ============================================================
   ADVANCED PERMIT TO WORK (PTW) STYLING & GAS DIALS
   ============================================================ */
.ptw-stats-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
  gap: 12px;
  margin-bottom: 20px;
}
.ptw-stats-strip .legal-stat-box {
  min-height: 98px;
}

.ptw-advanced-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  transition: all 0.22s var(--ease-out);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  position: relative;
}
.ptw-advanced-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  border-color: var(--border-active);
}

.ptw-type-pill {
  font-size: 11px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.ptw-type-pill.badge-hot { background: rgba(239, 68, 68, 0.12); color: #dc2626; border: 1px solid rgba(239, 68, 68, 0.3); }
.ptw-type-pill.badge-cs { background: rgba(124, 58, 237, 0.12); color: #7c3aed; border: 1px solid rgba(124, 58, 237, 0.3); }
.ptw-type-pill.badge-wah { background: rgba(14, 165, 233, 0.12); color: #0284c7; border: 1px solid rgba(14, 165, 233, 0.3); }
.ptw-type-pill.badge-elec { background: rgba(245, 158, 11, 0.12); color: #d97706; border: 1px solid rgba(245, 158, 11, 0.3); }
.ptw-type-pill.badge-exc { background: rgba(16, 185, 129, 0.12); color: #059669; border: 1px solid rgba(16, 185, 129, 0.3); }
.ptw-type-pill.badge-def { background: var(--bg-surface-2); color: var(--text-primary); border: 1px solid var(--border-subtle); }

.ptw-source-pill {
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.ptw-source-pill.internal {
  background: rgba(37, 99, 235, 0.08);
  color: #2563eb;
  border: 1px solid rgba(37, 99, 235, 0.25);
}
.ptw-source-pill.contractor {
  background: rgba(217, 119, 6, 0.08);
  color: #d97706;
  border: 1px solid rgba(217, 119, 6, 0.25);
}

.ptw-jha-callout {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.08), rgba(245, 158, 11, 0.03));
  border: 1.5px solid rgba(245, 158, 11, 0.35);
  border-radius: 6px;
  padding: 7px 10px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.18s ease;
}
.ptw-jha-callout:hover {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.14), rgba(245, 158, 11, 0.06));
  border-color: #d97706;
}

.ptw-gas-strip {
  background: var(--bg-surface-2);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  padding: 8px 10px;
}
.ptw-gas-strip-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10px;
  color: var(--text-muted);
  font-weight: 700;
  margin-bottom: 6px;
}
.ptw-gas-dials-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.gas-dial {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 4px;
  padding: 4px 6px;
  text-align: center;
}
.gas-dial.safe { border-color: rgba(16, 185, 129, 0.4); }
.gas-dial .gas-label {
  display: block;
  font-size: 9px;
  color: var(--text-muted);
}
.gas-dial .gas-val {
  display: block;
  font-size: 13px;
  font-weight: 900;
  font-family: 'Outfit', monospace;
  color: #10b981;
}
.gas-dial .gas-norm {
  display: block;
  font-size: 8.5px;
  color: var(--text-muted);
}

.ptw-stepper-track {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  position: relative;
  margin-top: 10px;
}
.ptw-step {
  text-align: center;
  position: relative;
}
.ptw-step-circle {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--bg-surface-2);
  border: 2px solid var(--border-subtle);
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 900;
  margin-bottom: 4px;
  transition: all 0.2s ease;
}
.ptw-step.done .ptw-step-circle {
  background: #10b981;
  border-color: #10b981;
  color: #ffffff;
}
.ptw-step.active .ptw-step-circle {
  background: #2563eb;
  border-color: #2563eb;
  color: #ffffff;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.25);
}
.ptw-step-label {
  font-size: 9.5px;
  color: var(--text-muted);
  font-weight: 700;
}
.ptw-step.done .ptw-step-label, .ptw-step.active .ptw-step-label {
  color: var(--text-primary);
}

.ptw-card-mini-stepper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-surface-2);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  padding: 6px 10px;
  margin-bottom: 10px;
  font-size: 10px;
}
.mini-step {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--text-muted);
  font-weight: 600;
}
.mini-step span {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--border-subtle);
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 900;
}
.mini-step.done {
  color: var(--text-primary);
}
.mini-step.done span {
  background: #10b981;
  color: #ffffff;
}
.mini-step.active {
  color: var(--brand-primary);
  font-weight: 800;
}
.mini-step.active span {
  background: var(--brand-primary);
  color: #ffffff;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2);
}
.mini-step-arrow {
  color: var(--text-muted);
  font-size: 11px;
}

#official-ptw-print-doc {
  background: #ffffff !important;
  color: #0f172a !important;
  padding: 32px 38px;
  border-radius: 6px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  border: 1px solid #cbd5e1;
  max-width: 900px;
  margin: 0 auto;
}
#official-ptw-print-doc td, #official-ptw-print-doc th {
  color: #0f172a !important;
}

/* ============================================================
   CHEMICAL MANAGEMENT & SDS 16-SECTION STYLES
   ============================================================ */
.sds-section-card {
  background: var(--bg-surface-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  margin-bottom: 12px;
  overflow: hidden;
  transition: all 0.2s ease;
}
.sds-section-card:hover {
  border-color: var(--border-active);
}
.sds-section-title {
  padding: 10px 14px;
  font-size: 12.5px;
  font-weight: 800;
  color: var(--text-primary);
  background: rgba(37, 99, 235, 0.04);
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.sds-section-body {
  padding: 12px 14px;
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* Photo Compression Badge */
.photo-compression-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid #10b981;
  color: #047857;
  padding: 3px 9px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 700;
  margin-top: 6px;
  animation: fadeIn 0.3s ease;
}
[data-theme="dark"] .photo-compression-badge, body.theme-dark .photo-compression-badge {
  background: rgba(16, 185, 129, 0.2);
  color: #34d399;
  border-color: #059669;
}

/* ============================================================
   PREMIUM BUTTON SYSTEM (CHEMICAL MANAGEMENT & HIRARC)
   Eliminates plain black-and-white unstyled buttons
   ============================================================ */
.btn-chem-primary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 100%);
  color: #ffffff !important;
  font-weight: 700;
  font-size: 12px;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid #1d4ed8;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(37, 99, 235, 0.25);
  transition: all 0.15s ease;
  text-decoration: none;
}
.btn-chem-primary:hover {
  background: linear-gradient(135deg, #1e40af 0%, #1d4ed8 100%);
  box-shadow: 0 4px 10px rgba(37, 99, 235, 0.35);
  transform: translateY(-1px);
}

.btn-chem-secondary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-surface-2);
  color: var(--text-primary) !important;
  font-weight: 600;
  font-size: 12px;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
  cursor: pointer;
  transition: all 0.15s ease;
  text-decoration: none;
}
.btn-chem-secondary:hover {
  background: var(--bg-surface);
  border-color: var(--brand-primary);
  color: var(--brand-primary) !important;
  transform: translateY(-1px);
}

.btn-chem-sds-open {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #eff6ff;
  color: #1d4ed8 !important;
  border: 1.5px solid #93c5fd;
  font-weight: 700;
  font-size: 11px;
  padding: 5px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}
.btn-chem-sds-open:hover {
  background: #2563eb;
  color: #ffffff !important;
  border-color: #2563eb;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.3);
}
[data-theme="dark"] .btn-chem-sds-open {
  background: #172554;
  color: #93c5fd !important;
  border-color: #1e40af;
}
[data-theme="dark"] .btn-chem-sds-open:hover {
  background: #3b82f6;
  color: #ffffff !important;
}

/* HIRARC ➔ SDS Correlation Button Pill */
.btn-hirarc-sds {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #eff6ff;
  color: #1e40af !important;
  border: 1px solid #93c5fd;
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 10.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
  text-decoration: none;
  margin-top: 4px;
}
.btn-hirarc-sds:hover {
  background: #2563eb;
  color: #ffffff !important;
  border-color: #1d4ed8;
}
[data-theme="dark"] .btn-hirarc-sds {
  background: #1e293b;
  color: #60a5fa !important;
  border-color: #3b82f6;
}
[data-theme="dark"] .btn-hirarc-sds:hover {
  background: #3b82f6;
  color: #ffffff !important;
}

/* CALM EXECUTIVE PALETTE (REPLACES HARSH RED IN CHEMICAL MANAGEMENT) */
.chem-metric-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 16px;
  transition: transform 0.15s ease;
}
.chem-metric-card:hover {
  transform: translateY(-2px);
}
.chem-metric-total { border-top: 3px solid #2563eb; }
.chem-metric-soon { border-top: 3px solid #d97706; }
.chem-metric-expired { border-top: 3px solid #b91c1c; }
.chem-metric-valid { border-top: 3px solid #059669; }

.chem-statutory-notice {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-left: 4px solid #2563eb;
  border-radius: var(--radius-sm);
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

/* ============================================================
   AI SDS EXTRACTOR & DOSH CLASS 2013 VERIFIER STYLING
   ============================================================ */
.sds-scorecard {
  background: var(--bg-surface-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 16px 20px;
  margin-bottom: 18px;
}
.sds-score-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  flex-wrap: wrap;
  gap: 10px;
}
.sds-checklist-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  margin-top: 12px;
}
.sds-check-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  padding: 8px 10px;
  background: var(--bg-surface);
  border-radius: 6px;
  border: 1px solid var(--border-subtle);
}
.sds-check-item.pass {
  border-color: rgba(34, 197, 94, 0.4);
}
.sds-check-item.fail {
  border-color: rgba(239, 68, 68, 0.4);
  background: rgba(239, 68, 68, 0.04);
}
.sds-field-manual-badge {
  font-size: 10px;
  font-weight: 700;
  color: #d97706;
  background: rgba(217, 119, 6, 0.12);
  padding: 2px 6px;
  border-radius: 4px;
  margin-left: 6px;
}
.ghs-selector-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}
.ghs-toggle-item {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  border-radius: 8px;
  border: 2px solid var(--border-subtle);
  background: var(--bg-surface);
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}
.ghs-toggle-item:hover {
  border-color: var(--brand-primary);
  transform: translateY(-1px);
}
.ghs-toggle-item.selected {
  border-color: #dc2626;
  background: rgba(220, 38, 38, 0.06);
  box-shadow: 0 0 8px rgba(220, 38, 38, 0.2);
}
.ghs-toggle-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-secondary);
}
.ghs-toggle-item.selected .ghs-toggle-label {
  color: #dc2626;
}

/* ============================================================
   TRAINING & COMPETENCY HUB NAVIGATION & PASSPORT STYLING
   ============================================================ */
.training-nav-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  margin-bottom: 22px;
}
.training-nav-card {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  user-select: none;
}
.training-nav-card:hover {
  transform: translateY(-2px);
  border-color: var(--brand-primary) !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08) !important;
}
.training-nav-card.is-active {
  border-width: 2px !important;
}

/* ============================================================
   EHSCENTRE MY — MALAYSIAN LEGAL CONTENT & MONITORING EXTENSIONS
   ============================================================ */

/* 1. Official Legal Instrument Type Badges */
.badge-instrument {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  white-space: nowrap;
}
.badge-instrument-law {
  background: rgba(37, 99, 235, 0.12);
  border: 1px solid rgba(37, 99, 235, 0.35);
  color: #1d4ed8;
}
[data-theme="dark"] .badge-instrument-law, body.theme-dark .badge-instrument-law {
  background: rgba(59, 130, 246, 0.18);
  border-color: rgba(59, 130, 246, 0.4);
  color: #93c5fd;
}
.badge-instrument-icop {
  background: rgba(124, 58, 237, 0.12);
  border: 1px solid rgba(124, 58, 237, 0.35);
  color: #6d28d9;
}
[data-theme="dark"] .badge-instrument-icop, body.theme-dark .badge-instrument-icop {
  background: rgba(139, 92, 246, 0.18);
  border-color: rgba(139, 92, 246, 0.4);
  color: #c4b5fd;
}
.badge-instrument-guidance {
  background: rgba(14, 165, 233, 0.12);
  border: 1px solid rgba(14, 165, 233, 0.35);
  color: #0369a1;
}
[data-theme="dark"] .badge-instrument-guidance, body.theme-dark .badge-instrument-guidance {
  background: rgba(56, 189, 248, 0.18);
  border-color: rgba(56, 189, 248, 0.4);
  color: #7dd3fc;
}
.badge-instrument-superseded {
  background: rgba(100, 116, 139, 0.12);
  border: 1px solid rgba(100, 116, 139, 0.35);
  color: #475569;
}
[data-theme="dark"] .badge-instrument-superseded, body.theme-dark .badge-instrument-superseded {
  background: rgba(100, 116, 139, 0.2);
  border-color: rgba(148, 163, 184, 0.3);
  color: #94a3b8;
}

/* 2. Source Verification Status Badges */
.badge-source-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}
.badge-source-checked {
  background: rgba(22, 163, 74, 0.1);
  color: #15803d;
  border: 1px solid rgba(22, 163, 74, 0.3);
}
[data-theme="dark"] .badge-source-checked, body.theme-dark .badge-source-checked {
  background: rgba(34, 197, 94, 0.15);
  color: #4ade80;
  border-color: rgba(34, 197, 94, 0.3);
}
.badge-source-needs-verification {
  background: rgba(217, 119, 6, 0.1);
  color: #b45309;
  border: 1px solid rgba(217, 119, 6, 0.3);
}
.badge-source-superseded {
  background: rgba(100, 116, 139, 0.12);
  color: #475569;
  border: 1px solid rgba(100, 116, 139, 0.3);
}

/* 3. Workplace Implementation Status Badges */
.status-pill-workplace {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.status-pill-workplace.verified {
  background: rgba(22, 163, 74, 0.12);
  color: #15803d;
  border: 1px solid rgba(22, 163, 74, 0.35);
}
[data-theme="dark"] .status-pill-workplace.verified, body.theme-dark .status-pill-workplace.verified {
  background: rgba(34, 197, 94, 0.16);
  color: #4ade80;
  border-color: rgba(34, 197, 94, 0.4);
}
.status-pill-workplace.unverified {
  background: rgba(59, 130, 246, 0.1);
  color: #2563eb;
  border: 1px solid rgba(59, 130, 246, 0.3);
}
[data-theme="dark"] .status-pill-workplace.unverified, body.theme-dark .status-pill-workplace.unverified {
  background: rgba(59, 130, 246, 0.15);
  color: #60a5fa;
  border-color: rgba(59, 130, 246, 0.35);
}
.status-pill-workplace.action-required {
  background: rgba(220, 38, 38, 0.12);
  color: #b91c1c;
  border: 1px solid rgba(220, 38, 38, 0.35);
}
[data-theme="dark"] .status-pill-workplace.action-required, body.theme-dark .status-pill-workplace.action-required {
  background: rgba(239, 68, 68, 0.16);
  color: #f87171;
  border-color: rgba(239, 68, 68, 0.4);
}
.status-pill-workplace.exempted {
  background: rgba(100, 116, 139, 0.1);
  color: #64748b;
  border: 1px solid rgba(100, 116, 139, 0.25);
}
[data-theme="dark"] .status-pill-workplace.exempted, body.theme-dark .status-pill-workplace.exempted {
  background: rgba(100, 116, 139, 0.16);
  color: #94a3b8;
  border-color: rgba(148, 163, 184, 0.25);
}
.status-pill-workplace.uncertain-exemption {
  background: rgba(245, 158, 11, 0.12);
  color: #b45309;
  border: 1px dashed rgba(245, 158, 11, 0.5);
}
[data-theme="dark"] .status-pill-workplace.uncertain-exemption, body.theme-dark .status-pill-workplace.uncertain-exemption {
  background: rgba(245, 158, 11, 0.16);
  color: #fbbf24;
  border-color: rgba(245, 158, 11, 0.5);
}

/* 4. Scheduled Official-Source Monitoring Banner */
.legal-monitor-banner {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  box-shadow: var(--card-shadow);
  border-left: 4px solid var(--brand-primary);
}
.legal-monitor-banner.overdue {
  border-left-color: #dc2626;
  background: rgba(220, 38, 38, 0.04);
}
.legal-monitor-left {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
  min-width: 280px;
}
.legal-monitor-icon-box {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: rgba(37, 99, 235, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}
.legal-monitor-title {
  font-weight: 700;
  font-size: 13px;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.legal-monitor-subtitle {
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 3px;
  line-height: 1.4;
}
.legal-monitor-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.legal-review-date-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 6px;
  background: var(--bg-surface-2);
  border: 1px solid var(--border-subtle);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
}

/* 5. Legal Change Log Timeline */
.change-log-timeline {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 10px 0;
}
.change-log-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  padding: 14px 16px;
  border-left: 4px solid var(--brand-primary);
}
.change-log-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  flex-wrap: wrap;
  gap: 6px;
}
.change-log-date-tag {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
}
.change-log-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
}
.change-log-details {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.6;
}
.change-log-source-link {
  font-size: 11px;
  color: var(--brand-primary);
  text-decoration: underline;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
}

/* ============================================================
   MASTER DEVICE OPTIMIZATION & PREFERRED DISPLAY SYSTEM
   Comprehensive responsive coverage:
   - Small Phones (320px–480px, e.g. iPhone, Galaxy)
   - Phablets / Foldables / Portrait Tablets (481px–768px)
   - Landscape Tablets, iPads & Unusual Aspect Ratios (769px–1024px)
   - Standard Laptops & Desktops (1025px–1599px)
   - Ultrawide Displays, 2K/4K Monitors (1600px+)
   - User Density Modes: Compact, Standard, Comfortable
   - Container Width Modes: Contained (1600px), Fluid (100%)
   ============================================================ */

/* 1. UI DENSITY & SCALE PRESETS */
[data-ui-density="compact"] {
  --content-padding: 16px;
  --card-padding: 14px;
  --table-cell-padding-y: 7px;
  --table-cell-padding-x: 10px;
  --btn-padding-y: 6px;
  --btn-padding-x: 12px;
  --topbar-height: 54px;
  font-size: 13.5px;
}
[data-ui-density="compact"] .module-title {
  font-size: 22px;
}
[data-ui-density="compact"] .module-header {
  margin-bottom: 16px;
}
[data-ui-density="compact"] .legal-stat-box {
  padding: 10px 14px;
}
[data-ui-density="compact"] .legal-stat-number {
  font-size: 22px;
}
[data-ui-density="compact"] .nav-item {
  padding: 8px 12px;
  font-size: 12.5px;
}

[data-ui-density="standard"] {
  --content-padding: 28px;
  --card-padding: 24px;
  --table-cell-padding-y: 12px;
  --table-cell-padding-x: 16px;
  --btn-padding-y: 9px;
  --btn-padding-x: 18px;
  --topbar-height: 64px;
  font-size: 15px;
}

[data-ui-density="comfortable"] {
  --content-padding: 34px;
  --card-padding: 30px;
  --table-cell-padding-y: 16px;
  --table-cell-padding-x: 20px;
  --btn-padding-y: 12px;
  --btn-padding-x: 22px;
  --topbar-height: 72px;
  font-size: 16.5px;
}
[data-ui-density="comfortable"] .module-title {
  font-size: 28px;
}
[data-ui-density="comfortable"] .btn {
  font-size: 14px;
  min-height: 42px;
}
[data-ui-density="comfortable"] .legal-stat-box {
  padding: 20px 24px;
}
[data-ui-density="comfortable"] .legal-stat-number {
  font-size: 32px;
}

/* 2. CONTAINER WIDTH MODES */
[data-layout-width="contained"] .content-area > * {
  max-width: 1600px;
  margin-left: auto;
  margin-right: auto;
}
[data-layout-width="fluid"] .content-area > * {
  max-width: 100% !important;
  margin-left: 0;
  margin-right: 0;
}

/* 3. TOPBAR DISPLAY BUTTON & INDICATOR */
.display-pref-btn {
  position: relative;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.display-mode-indicator {
  position: absolute;
  bottom: 3px;
  right: 3px;
  font-size: 8.5px;
  font-weight: 800;
  background: var(--brand-primary);
  color: #ffffff;
  padding: 0.5px 3.5px;
  border-radius: 4px;
  line-height: 1.1;
  letter-spacing: 0.2px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}

/* 4. MOBILE DRAWER SIDEBAR & BACKDROP */
.sidebar-backdrop {
  display: none;
}

@media (max-width: 768px) {
  .sidebar-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.65);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 1040;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .sidebar-backdrop.active {
    opacity: 1;
    pointer-events: auto;
  }

  .sidebar {
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 280px !important;
    max-width: 84vw !important;
    height: 100vh !important;
    z-index: 1050 !important;
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-shadow: 12px 0 36px rgba(0, 0, 0, 0.4);
  }
  .sidebar.sidebar-mobile-open {
    transform: translateX(0) !important;
  }
  .sidebar.collapsed {
    width: 280px !important;
    min-width: 280px !important;
  }
  .sidebar.collapsed .nav-label,
  .sidebar.collapsed .nav-section-label,
  .sidebar.collapsed .user-info,
  .sidebar.collapsed .sidebar-logo div {
    display: block !important;
  }
  .sidebar.collapsed .sidebar-header {
    justify-content: space-between !important;
  }
  .sidebar.collapsed .sidebar-collapse-btn {
    display: none !important;
  }

  .main-content {
    width: 100vw !important;
    max-width: 100vw !important;
  }

  .menu-toggle {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--bg-surface-2);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    font-size: 20px;
  }

  .topbar {
    padding: 0 12px !important;
    gap: 8px;
  }
  .topbar-search {
    display: none !important;
  }
  .page-breadcrumb {
    font-size: 13.5px !important;
    max-width: 140px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .topbar-user-badge {
    padding: 4px 8px !important;
    font-size: 11px !important;
    max-width: 110px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .content-area {
    padding: 14px 12px !important;
  }

  /* Universal Table Touch Scroll Container */
  .table-wrapper, 
  [style*="overflow-x:auto"],
  .table-responsive {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    width: 100% !important;
    max-width: 100% !important;
    border-radius: var(--radius-sm);
  }

  /* Universal Modal on Mobile & Tablets */
  .modal, .modal.modal-wide, .modal.modal-xl, .ch-modal-wide {
    width: 95vw !important;
    max-width: 95vw !important;
    margin: 10px auto !important;
    max-height: 92vh !important;
    padding: 14px !important;
    border-radius: var(--radius-lg) !important;
  }
  .modal-header {
    padding: 12px 14px !important;
  }
  .modal-body {
    padding: 12px 14px !important;
  }
  .modal-footer {
    padding: 12px 14px !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .modal-grid-2, .form-row, .grid-2 {
    grid-template-columns: 1fr !important;
  }
}

/* 5. PHONES & SMALL TOUCH DEVICES (< 480px) */
@media (max-width: 480px) {
  :root {
    --card-padding: 14px;
    --content-padding: 12px;
  }

  /* Login Screen on Phones */
  .login-screen {
    padding: 16px 12px !important;
    min-height: 100vh !important;
    height: auto !important;
    overflow-y: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
  }
  .login-theme-bar {
    position: static !important;
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
    margin-bottom: 12px !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  .palette-toggle-btn {
    padding: 6px 10px !important;
    font-size: 11px !important;
  }
  .login-card {
    padding: 24px 18px !important;
    margin: 0 auto 20px auto !important;
    width: 100% !important;
    max-width: 400px !important;
    border-radius: var(--radius-lg) !important;
  }
  .login-logo {
    margin-bottom: 20px !important;
  }
  .login-logo h1 {
    font-size: 26px !important;
  }

  /* Topbar on Phones */
  .topbar {
    padding: 0 8px !important;
    height: 54px !important;
  }
  .topbar-user-badge {
    display: none !important;
  }
  .topbar-btn {
    width: 34px !important;
    height: 34px !important;
    font-size: 14px !important;
  }
  .topbar-avatar {
    width: 32px !important;
    height: 32px !important;
    font-size: 11px !important;
  }

  /* Module Headers & Actions */
  .module-header {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    margin-bottom: 16px !important;
  }
  .module-title {
    font-size: 20px !important;
  }
  .module-subtitle {
    font-size: 12px !important;
    line-height: 1.4 !important;
  }
  .module-actions {
    flex-direction: column !important;
    width: 100% !important;
    gap: 6px !important;
  }
  .module-actions .btn {
    width: 100% !important;
    justify-content: center !important;
    padding: 9px 12px !important;
    font-size: 12.5px !important;
  }

  /* KPI Stat Strips on Phones */
  .legal-stats-strip, .ppe-stats-strip {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    margin-bottom: 16px !important;
  }
  .legal-stat-box {
    padding: 10px 12px !important;
    border-radius: var(--radius-md) !important;
  }
  .legal-stat-number {
    font-size: 20px !important;
  }
  .legal-stat-label {
    font-size: 11px !important;
    line-height: 1.25 !important;
  }
  .legal-stat-hint {
    font-size: 9.5px !important;
    display: none !important;
  }

  /* Horizontal Scrollable Tabs */
  .gal-toolbar {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }
  .module-tabs {
    display: flex !important;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    padding-bottom: 6px !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .module-tab {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    padding: 8px 12px !important;
    font-size: 12px !important;
  }
  .table-search {
    width: 100% !important;
    min-width: 100% !important;
  }

  /* Subfilter Buttons */
  .subfilter-bar {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }
  .type-toggle-group {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    padding-bottom: 4px !important;
  }
  .type-toggle-btn {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    font-size: 11.5px !important;
    padding: 6px 10px !important;
  }

  /* Cards */
  .card {
    padding: 14px !important;
    border-radius: var(--radius-md) !important;
  }
}

/* 6. TABLETS & WEIRD ASPECT RATIO SCREENS (769px–1199px) */
@media (min-width: 769px) and (max-width: 1199px) {
  .legal-stats-strip, .ppe-stats-strip {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) !important;
  }
  .module-header {
    flex-wrap: wrap;
    gap: 12px;
  }
  .module-actions {
    flex-wrap: wrap;
  }
}

/* 7. BIG SCREENS, ULTRAWIDE MONITORS & 4K (1600px+) */
@media (min-width: 1600px) {
  :root {
    --card-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.06), 0 1px 4px -1px rgba(0, 0, 0, 0.04);
  }
  .content-area {
    padding: var(--content-padding, 32px);
  }
}

/* 8. SETTINGS MODAL DISPLAY TAB STYLES */
.theme-select-card {
  background: var(--bg-surface-2);
  border: 1.5px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  transition: all 0.2s ease;
}
.theme-select-card:hover {
  border-color: var(--brand-primary);
  background: var(--bg-card);
  transform: translateY(-1px);
}
.theme-select-card.active {
  border-color: var(--brand-primary);
  background: var(--sidebar-active-bg, rgba(37,99,235,0.08));
  box-shadow: 0 0 0 1.5px var(--brand-primary);
}
.theme-card-icon {
  font-size: 26px;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 2px;
}
.theme-card-info h4 {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
}
/* ============================================================
   SHAI (SAFETY & HEALTH AI) & LUXURY BESPOKE EHS ICONS SUITE
   ============================================================ */
.login-mascot-avatar-wrap {
  position: relative;
  width: 58px;
  height: 58px;
  flex-shrink: 0;
}
.login-mascot-avatar-wrap img {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #06b6d4;
  box-shadow: 0 0 16px rgba(6, 182, 212, 0.45);
  transition: transform 0.3s ease;
}
.login-mascot-avatar-wrap:hover img {
  transform: scale(1.05);
}

.staff-id-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border-radius: 8px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  color: var(--text-primary);
  font-size: 11.5px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.staff-id-chip:hover {
  border-color: #06b6d4;
  background: rgba(6, 182, 212, 0.08);
  transform: translateY(-1px);
}
.staff-id-chip.active {
  border-color: var(--brand-primary);
  background: rgba(37, 99, 235, 0.1);
  box-shadow: 0 0 0 1px var(--brand-primary);
}
.staff-id-chip svg {
  flex-shrink: 0;
}

/* SHAI Floating Widget */
.safety-companion-widget {
  position: fixed;
  bottom: 24px;
  right: 28px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-family: inherit;
}
.shai-floating-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  border: 1.5px solid #06b6d4;
  box-shadow: 0 8px 24px rgba(6, 182, 212, 0.35), 0 2px 6px rgba(0,0,0,0.4);
  padding: 6px 14px 6px 6px;
  border-radius: 40px;
  cursor: pointer;
  color: #ffffff;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.shai-floating-btn:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 12px 32px rgba(6, 182, 212, 0.5);
  border-color: #22d3ee;
}
.shai-floating-avatar {
  position: relative;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
}
.shai-floating-avatar img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #22d3ee;
}
.shai-pulse-dot {
  position: absolute;
  bottom: 1px;
  right: 1px;
  width: 12px;
  height: 12px;
  background: #10b981;
  border: 2px solid #0f172a;
  border-radius: 50%;
  box-shadow: 0 0 8px #10b981;
  animation: shaiPulse 2s infinite;
}
@keyframes shaiPulse {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
  70% { transform: scale(1.05); box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}
.shai-floating-meta {
  display: flex;
  flex-direction: column;
  text-align: left;
}
.shai-meta-name {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.3px;
  color: #ffffff;
  display: flex;
  align-items: center;
  gap: 6px;
}
.shai-meta-badge {
  font-size: 9.5px;
  font-weight: 800;
  background: rgba(6, 182, 212, 0.25);
  color: #22d3ee;
  padding: 1px 5px;
  border-radius: 4px;
  border: 1px solid rgba(34, 211, 238, 0.4);
}
.shai-meta-sub {
  font-size: 10.5px;
  color: #94a3b8;
}

/* SHAI Speech Bubble */
.shai-speech-bubble {
  background: var(--bg-surface);
  border: 1px solid rgba(6, 182, 212, 0.3);
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 12px;
  max-width: 340px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
  position: relative;
  animation: shaiSlideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes shaiSlideUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.shai-speech-bubble::after {
  content: '';
  position: absolute;
  bottom: -7px;
  right: 28px;
  width: 14px;
  height: 14px;
  background: var(--bg-surface);
  border-right: 1px solid rgba(6, 182, 212, 0.3);
  border-bottom: 1px solid rgba(6, 182, 212, 0.3);
  transform: rotate(45deg);
}

/* SHAI Copilot Modal Tabs */
.shai-tabs {
  display: flex;
  gap: 6px;
  border-bottom: 1px solid var(--border-subtle);
  padding-bottom: 10px;
  margin-bottom: 16px;
  overflow-x: auto;
}
.shai-tab-btn {
  padding: 7px 13px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
}
.shai-tab-btn:hover {
  background: var(--bg-surface-2);
  color: var(--text-primary);
}
.shai-tab-btn.active {
  background: rgba(6, 182, 212, 0.12);
  color: #0891b2;
  border-color: rgba(6, 182, 212, 0.3);
}

/* Luxury Badges & Custom Duotone Emoticons */
.luxury-badge-shai {
  background: linear-gradient(135deg, rgba(6,182,212,0.2) 0%, rgba(14,165,233,0.15) 100%);
  color: #0891b2;
  border: 1px solid rgba(6,182,212,0.35);
  padding: 2px 7px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.5px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
[data-theme="dark"] .luxury-badge-shai {
  color: #22d3ee;
  border-color: rgba(34,211,238,0.4);
}

.luxury-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
}
.luxury-ico svg {
  display: block;
}

.otp-box-card {
  background: var(--bg-surface-2);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 18px;
  text-align: center;
  margin: 16px 0;
}
.otp-display-code {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: 8px;
  color: #0891b2;
  background: var(--bg-surface);
  padding: 10px 16px;
  border-radius: 8px;
  border: 1.5px dashed rgba(6, 182, 212, 0.4);
  display: inline-block;
  margin: 10px 0;
}
[data-theme="dark"] .otp-display-code {
  color: #22d3ee;
}

.shai-tool-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 12px;
  transition: all 0.2s ease;
}
.shai-tool-card:hover {
  border-color: rgba(6,182,212,0.4);
  box-shadow: 0 4px 16px rgba(0,0,0,0.06);
}
.shai-tool-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.shai-tool-title {
  font-weight: 700;
  font-size: 13.5px;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
}

/* SHAI Universal Chat Studio Styles */
.shai-chat-container {
  display: flex;
  flex-direction: column;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 12px;
}
.shai-chat-thread {
  min-height: 280px;
  max-height: 440px;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--bg-surface-2);
}
.shai-chat-bubble {
  position: relative;
  word-break: break-word;
  animation: shaiFadeIn 0.25s ease-out;
}
@keyframes shaiFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.shai-chat-bubble.user {
  max-width: 82%;
  align-self: flex-end;
  background: linear-gradient(135deg, #0891b2 0%, #0284c7 100%);
  color: #ffffff;
  padding: 10px 14px;
  border-radius: 14px 14px 3px 14px;
  font-size: 13px;
  line-height: 1.5;
  box-shadow: 0 4px 14px rgba(8, 145, 178, 0.25);
}
.shai-chat-bubble.ai {
  max-width: 94%;
  align-self: flex-start;
  background: var(--bg-surface);
  border: 1px solid rgba(6, 182, 212, 0.28);
  color: var(--text-primary);
  padding: 14px 16px;
  border-radius: 14px 14px 14px 3px;
  font-size: 13px;
  line-height: 1.6;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.05);
}
.shai-chat-bubble.ai h3, .shai-chat-bubble.ai h4 {
  font-size: 14px;
  margin-top: 8px;
  margin-bottom: 6px;
  color: #0891b2;
}
[data-theme="dark"] .shai-chat-bubble.ai h3, [data-theme="dark"] .shai-chat-bubble.ai h4 {
  color: #22d3ee;
}
.shai-chat-bubble.ai ul, .shai-chat-bubble.ai ol {
  padding-left: 18px;
  margin: 6px 0;
}
.shai-chat-bubble.ai li {
  margin-bottom: 4px;
}
.shai-chat-bubble.ai p {
  margin: 6px 0;
}
.shai-msg-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--border-subtle);
  flex-wrap: wrap;
}
.shai-action-btn {
  background: none;
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  padding: 3px 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all 0.15s ease;
}
.shai-action-btn:hover {
  background: var(--bg-surface-2);
  color: var(--text-primary);
  border-color: rgba(6, 182, 212, 0.4);
}
.shai-prompt-chip {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 20px;
  padding: 5px 11px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.shai-prompt-chip:hover {
  border-color: #06b6d4;
  color: #0891b2;
  background: rgba(6, 182, 212, 0.08);
  transform: translateY(-1px);
}
.shai-input-bar {
  display: flex;
  gap: 8px;
  padding: 10px 12px;
  background: var(--bg-surface);
  border-top: 1px solid var(--border-subtle);
  align-items: center;
}
.shai-input-bar input {
  flex: 1;
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  background: var(--bg-card);
  color: var(--text-primary);
  font-size: 13px;
}
.shai-input-bar input:focus {
  outline: none;
  border-color: #06b6d4;
  box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.15);
}
.shai-typing-indicator {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  background: var(--bg-surface);
  border-radius: 12px;
  border: 1px solid rgba(6, 182, 212, 0.2);
}
.shai-typing-indicator span {
  width: 6px;
  height: 6px;
  background: #0891b2;
  border-radius: 50%;
  animation: shaiBounce 1.2s infinite ease-in-out;
}
.shai-typing-indicator span:nth-child(2) { animation-delay: 0.2s; }
.shai-typing-indicator span:nth-child(3) { animation-delay: 0.4s; }
@keyframes shaiBounce {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
  40% { transform: scale(1.1); opacity: 1; }
}

/* SHAI Vision Inspector Styles */
.shai-vision-uploader {
  border: 2px dashed rgba(6, 182, 212, 0.35);
  border-radius: 12px;
  padding: 24px 16px;
  text-align: center;
  background: rgba(6, 182, 212, 0.03);
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}
.shai-vision-uploader:hover {
  border-color: #06b6d4;
  background: rgba(6, 182, 212, 0.07);
}
.shai-vision-preview-img {
  max-width: 100%;
  max-height: 260px;
  object-fit: contain;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* ============================================================
   AI PDF EXTRACTION & AUTO-FORM FILLING WORKSPACE
   ============================================================ */
.modal:has(#ai-pdf-wrapper),
.modal.modal-ai-pdf-wide {
  max-width: 1350px !important;
  width: 95vw !important;
  max-height: 94vh !important;
}

.ai-pdf-dropzone:hover {
  border-color: var(--brand-primary) !important;
  background: rgba(37, 99, 235, 0.08) !important;
}

.ai-extracted-field-card {
  transition: all 0.15s ease;
}

.ai-extracted-field-card:hover {
  border-color: rgba(37, 99, 235, 0.4) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

@media (max-width: 960px) {
  #ai-pdf-split-workspace {
    flex-direction: column !important;
  }
  #ai-pdf-left-pane {
    max-width: 100% !important;
    min-height: 380px;
  }
}

/* ============================================================
   ENTERPRISE UI/UX AUDIT & CONTAINER ALIGNMENT ARCHITECTURE
   ============================================================ */

/* 1. Global Box Sizing & Fluid Text Wrap */
html, body, .card, .stat-card, .table-wrapper, .modal, .modal-body, .badge, .topbar, .sidebar {
  overflow-wrap: break-word !important;
  word-break: normal;
}

/* Safe deep text breaking for long identifiers & filenames */
.text-break-safe, .company-name, .doc-filename, .ref-number, .email-text {
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}

/* 2. Universal Input & Form Containment (Prevents Container Overflows) */
input, select, textarea, button {
  box-sizing: border-box !important;
  max-width: 100%;
}

.form-control, .input-field, .table-search,
.modal-field input, .modal-field select, .modal-field textarea {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box !important;
}

/* Prevent Flex and CSS Grid Item Blowout */
.form-row, .modal-grid-2, .grid-2, .grid-3, .grid-4,
.filter-bar, .toolbar, .module-actions, .kpi-strip {
  min-width: 0 !important;
}

.form-row > *, .modal-grid-2 > *, .grid-2 > *, .grid-3 > *, .grid-4 > * {
  min-width: 0 !important;
}

/* 3. Universal Internal Scrollable Modals */
@media screen {
  .modal-overlay {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 16px !important;
    box-sizing: border-box !important;
  }
}

.modal {
  display: flex !important;
  flex-direction: column !important;
  max-height: calc(100vh - 36px) !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

.modal-header {
  flex-shrink: 0 !important;
}

.modal-body {
  flex: 1 1 auto !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  padding: 20px 24px;
}

.modal-footer {
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
  background: var(--bg-surface-2) !important;
}

/* 4. Universal Table Horizontal Containment */
.table-wrapper, .table-responsive, [style*="overflow-x:auto"] {
  overflow-x: auto !important;
  max-width: 100% !important;
  width: 100% !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: thin;
  scrollbar-color: var(--border-subtle) transparent;
}

/* 5. Cloud Firestore Live Status Indicator */
.ehs-sync-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 14px;
  background: var(--bg-surface-2);
  border: 1px solid var(--border-subtle);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-right: 8px;
  flex-shrink: 0;
}

.sync-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

.sync-dot.online {
  background: #10b981;
  box-shadow: 0 0 6px rgba(16, 185, 129, 0.6);
}

.sync-dot.syncing {
  background: #f59e0b;
  animation: pulse 1s infinite;
}

.sync-dot.offline {
  background: #94a3b8;
}

/* 6. Ultra-Narrow Screens (320px - 360px) */
@media (max-width: 360px) {
  :root {
    --card-padding: 10px;
    --content-padding: 8px;
  }
  .content-area {
    padding: 10px 8px !important;
  }
  .legal-stats-strip, .ppe-stats-strip, .kpi-strip {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  .modal {
    width: calc(100vw - 12px) !important;
    max-width: calc(100vw - 12px) !important;
    margin: 6px auto !important;
    max-height: calc(100vh - 16px) !important;
  }
  .modal-body {
    padding: 12px 10px !important;
  }
  .modal-footer {
    padding: 10px 12px !important;
  }
  .modal-footer .btn {
    width: 100% !important;
    justify-content: center !important;
  }
  .topbar-title {
    font-size: 12px !important;
    max-width: 110px !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .ehs-sync-badge {
    display: none !important;
  }
}

/* 7. Zoom Level 200% & Accessibility Adaptations */
@media (max-height: 500px) {
  .modal {
    max-height: 98vh !important;
  }
  .modal-header {
    padding: 8px 14px !important;
  }
  .modal-body {
    padding: 10px 14px !important;
  }
  .modal-footer {
    padding: 8px 14px !important;
  }
}

/* 8. Firebase Cloud Integration & Live Auth Styles */
.firebase-cloud-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(16, 185, 129, 0.1);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.25);
  padding: 4px 10px;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: all 0.2s ease;
}

.firebase-cloud-badge:hover {
  background: rgba(16, 185, 129, 0.18);
  border-color: rgba(16, 185, 129, 0.4);
}

.firebase-auth-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-card);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.firebase-auth-btn:hover {
  background: var(--bg-hover);
  border-color: var(--primary-accent);
  transform: translateY(-1px);
}

.firebase-user-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(59, 130, 246, 0.1);
  border: 1px solid rgba(59, 130, 246, 0.25);
  padding: 4px 10px;
  border-radius: 9999px;
  font-size: 11px;
  color: #3b82f6;
  font-weight: 500;
}

/* ============================================================
   DEFINITIVE HIGH-FIDELITY PRINT RULES FOR STATUTORY REPORTS
   ============================================================ */
@media print {
  @page {
    size: auto;
    margin: 8mm 10mm;
  }
  html, body {
    background: #ffffff !important;
    color: #000000 !important;
    overflow: visible !important;
    height: auto !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  /* Hide all dashboard chrome, sidebar, topbar, modal overlays, dialogs, buttons, backgrounds */
  #app, .app, aside, #sidebar, .sidebar, header, .topbar, .landing-navbar,
  #modal-overlay, .modal-overlay, .modal, #modal, .modal-header, .modal-footer,
  .notif-panel, #notif-panel, .theme-toggle-btn, .sidebar-collapse-btn,
  .report-toolbar-strip, .btn, button, #view-only-banner, #landing-screen, #login-screen {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    width: 0 !important;
    opacity: 0 !important;
    overflow: hidden !important;
  }
  /* Show only the official printable report container */
  #printable-report-area, .printable-report-area {
    display: block !important;
    visibility: visible !important;
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #ffffff !important;
    color: #000000 !important;
    overflow: visible !important;
  }
  #printable-report-area * {
    visibility: visible !important;
    color: inherit !important;
  }
  .report-paper, #official-inspection-report-doc, .official-inspection-report-doc {
    background: #ffffff !important;
    color: #000000 !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .report-meta-table, .report-table {
    width: 100% !important;
    border-collapse: collapse !important;
    page-break-inside: auto !important;
  }
  tr {
    page-break-inside: avoid !important;
    page-break-after: auto !important;
  }
}