/* ============================================================
   SM3 PEOPLE v2.0 — DESIGN SYSTEM
   Enterprise-grade. Glassmorphism. Deep-space aesthetic.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&family=IBM+Plex+Mono:wght@400;500&display=swap');

/* ─── TOKENS ─────────────────────────────────────────────── */
:root {
  /* Color palette — clean, solid, high-contrast enterprise */
  --ink:         #F5F7FA;
  --ink-2:       #EEF1F5;
  --surface:     #FFFFFF;
  --surface-2:   #F9FAFB;
  --surface-3:   #FFFFFF;
  --border:      #E5E7EB;
  --border-2:    #D1D5DB;

  /* Sidebar — solid dark navy, never recolored by the accent engine */
  --sidebar-bg:      #1E293B;
  --sidebar-bg-2:    #253449;
  --sidebar-text:    #CBD5E1;
  --sidebar-text-dim:#94A3B8;
  --sidebar-border:  #334155;

  /* Brand — the ONLY thing the theme engine rotates */
  --brand:       #4F46E5;
  --brand-soft:  #6366F1;
  --brand-dim:   rgba(79,70,229,0.10);
  --brand-glow:  rgba(79,70,229,0.22);

  /* Status */
  --good:        #059669;
  --good-dim:    rgba(5,150,105,0.12);
  --bad:         #DC2626;
  --bad-dim:     rgba(220,38,38,0.12);
  --gold:        #D97706;
  --gold-dim:    rgba(217,119,6,0.12);

  /* Text — exact requested contrast values */
  --text:        #111827;
  --text-dim:    #374151;
  --text-faint:  #6B7280;

  /* Typography */
  --font-display: 'Plus Jakarta Sans', 'Manrope', 'Outfit', sans-serif;
  --font-body:    'Plus Jakarta Sans', 'Manrope', 'Outfit', sans-serif;
  --font-mono:    'IBM Plex Mono', monospace;

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

  /* Radius */
  --radius-sm: 8px;  --radius: 14px;  --radius-lg: 20px;  --radius-xl: 28px;

  /* Elevation — distinct levels per surface type */
  --shadow-sm:     0 1px 3px rgba(15,23,42,0.06), 0 1px 2px rgba(15,23,42,0.04);
  --shadow:        0 4px 16px rgba(15,23,42,0.08), 0 1px 3px rgba(15,23,42,0.04);
  --shadow-lg:      0 16px 40px rgba(15,23,42,0.14), 0 4px 12px rgba(15,23,42,0.06);
  --shadow-brand:  0 8px 24px rgba(79,70,229,0.18);
  --shadow-nav:    0 1px 0 rgba(15,23,42,0.06);
  --shadow-table:  0 2px 12px rgba(15,23,42,0.05);
  --shadow-widget: 0 2px 8px rgba(15,23,42,0.05);

  /* Sidebar */
  --sidebar-w: 256px;
  --sidebar-w-collapsed: 72px;
  --topnav-h: 64px;
}

/* Dark mode — now an explicit opt-in via the theme switcher, not the default */
:root[data-theme="dark"] {
  --ink:        #0F172A;
  --ink-2:      #1E293B;
  --surface:    #1E293B;
  --surface-2:  #253449;
  --surface-3:  #2D3E56;
  --border:     #334155;
  --border-2:   #475569;
  --text:       #F1F5F9;
  --text-dim:   #CBD5E1;
  --text-faint: #94A3B8;
  --shadow-sm:  0 2px 8px rgba(0,0,0,0.3);
  --shadow:     0 8px 32px rgba(0,0,0,0.4);
  --shadow-lg:  0 24px 64px rgba(0,0,0,0.5);
}

/* Light mode override kept for explicit "Light" selection (identical to default root now) */
:root[data-theme="light"] {
  --ink:        #F5F7FA;
  --ink-2:      #EEF1F5;
  --surface:    #FFFFFF;
  --surface-2:  #F9FAFB;
  --surface-3:  #FFFFFF;
  --border:     #E5E7EB;
  --border-2:   #D1D5DB;
  --text:       #111827;
  --text-dim:   #374151;
  --text-faint: #6B7280;
}

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

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.6;
  color: var(--text);
  background: var(--ink);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ─── DEEP SPACE BACKGROUND ─────────────────────────────── */
.bg-canvas {
  position: fixed;
  inset: 0;
  z-index: 0;
  background: var(--ink);
}
/* Background is now flat and solid, by explicit request — no blurred mesh blobs, no
   haze, no fog. .bg-nebula is kept as a harmless empty hook (still injected by
   theme-engine.js) so nothing breaks, but it renders nothing. */
.bg-nebula { display: none; }

/* ─── Auth gate — blocks ALL page content until authorization is confirmed ───
   Present in the raw HTML of every protected page (not injected by JS), so it's visible
   from the very first paint with zero flash. mountShell() removes it only after both the
   session AND (where required) the role check pass; on failure it redirects without ever
   removing it, so the real page is never exposed even for a frame. */
.auth-gate {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 16px;
}
.auth-gate-spinner {
  width: 32px; height: 32px;
  border: 3px solid var(--border-2);
  border-top-color: var(--brand);
  border-radius: 50%;
  animation: auth-gate-spin 0.7s linear infinite;
}
@keyframes auth-gate-spin { to { transform: rotate(360deg); } }
.auth-gate-text { font-size: 13px; color: var(--text-faint); font-weight: 600; }
:root[data-density="compact"] .main { padding: 20px 24px 60px; }
:root[data-density="compact"] .card { padding: 14px; }
:root[data-density="compact"] .stat-card { padding: 14px; gap: 10px; }
:root[data-density="compact"] .employee-card { padding: 10px; gap: 10px; }
:root[data-density="compact"] th, :root[data-density="compact"] td { padding: 8px 12px; }
:root[data-density="compact"] .card-grid { gap: 10px; }
:root[data-density="compact"] .nav-link { padding: 7px 10px; }
:root[data-density="compact"] .page-header,
:root[data-density="compact"] .topbar { margin-bottom: 20px; }
:root[data-density="compact"] .section-label,
:root[data-density="compact"] .chevron-divider { margin: 18px 0 10px; }
:root[data-density="compact"] .field { margin-bottom: 10px; }
:root[data-density="compact"] .filter-row { margin-bottom: 14px; }
:root[data-density="compact"] .query-card, :root[data-density="compact"] .wall-post { padding: 14px 16px; margin-bottom: 8px; }

/* ─── ACCESSIBILITY: keyboard focus states (were missing on everything but text inputs) ─── */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.nav-link:focus-visible,
.icon-btn:focus-visible,
.profile-menu-trigger:focus-visible,
.profile-menu-item:focus-visible,
.segmented button:focus-visible,
a.card:focus-visible,
.employee-card:focus-visible,
a.celebration-card:focus-visible,
th[data-sort]:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: none; /* already has its own box-shadow ring */
}

/* ─── APP SHELL ─────────────────────────────────────────── */
.app-shell {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  grid-template-rows: var(--topnav-h) 1fr;
  min-height: 100vh;
  position: relative;
  z-index: 10;
  transition: grid-template-columns 0.3s cubic-bezier(.4,0,.2,1);
}
.app-shell.sidebar-collapsed {
  grid-template-columns: var(--sidebar-w-collapsed) 1fr;
}

/* ─── SIDEBAR ───────────────────────────────────────────── */
.sidebar {
  grid-row: 1 / -1;
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 20px 12px;
  gap: 6px;
  background: var(--sidebar-bg);
  border-right: 1px solid var(--sidebar-border);
  overflow: hidden;
  transition: width 0.3s cubic-bezier(.4,0,.2,1);
  z-index: 100;
}
.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 8px 16px;
  border-bottom: 1px solid var(--sidebar-border);
  margin-bottom: 8px;
}
.sidebar-brand img { height: 28px; width: auto; flex-shrink: 0; }
.sidebar-brand-name {
  font-weight: 800;
  font-size: 15px;
  letter-spacing: -0.01em;
  color: #FFFFFF;
  white-space: nowrap;
}
.sidebar-nav { flex: 1; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; }
.sidebar-nav::-webkit-scrollbar { display: none; }
.nav-group-label {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--sidebar-text-dim);
  padding: 12px 10px 4px;
}
.nav-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 10px;
  border-radius: var(--radius-sm);
  color: var(--sidebar-text);
  font-weight: 500;
  font-size: 13.5px;
  text-decoration: none;
  transition: all 0.2s ease;
  white-space: nowrap;
  overflow: hidden;
}
.nav-pending-badge {
  margin-left: auto;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: #EF4444;
  color: #FFFFFF;
  font-size: 11px;
  font-weight: 800;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  animation: nav-badge-pop 1.4s ease-in-out infinite;
}
@keyframes nav-badge-pop {
  0%, 100% { transform: scale(1) translateY(0); }
  50% { transform: scale(1.18) translateY(-2px); }
}
@media (prefers-reduced-motion: reduce) {
  .nav-pending-badge { animation: none; }
}
.nav-link:hover {
  color: #FFFFFF;
  background: var(--sidebar-bg-2);
  transform: translateX(2px);
  text-decoration: none;
}
.nav-link.active {
  color: #FFFFFF;
  background: var(--brand);
}
.nav-link.active::before {
  content: "";
  position: absolute;
  left: 0; top: 6px; bottom: 6px;
  width: 3px;
  border-radius: 0 4px 4px 0;
  background: #FFFFFF;
}
.nav-link-icon {
  width: 18px; height: 18px;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
.nav-link:hover .nav-link-icon { transform: scale(1.12); }
.nav-link-badge {
  margin-left: auto;
  min-width: 18px; height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--bad);
  color: white;
  font-size: 10px;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.nav-link-label { overflow: hidden; transition: max-width 0.3s ease, opacity 0.3s ease; max-width: 200px; }

/* Collapsed sidebar */
.sidebar-collapsed .nav-link { justify-content: center; }
.sidebar-collapsed .nav-link-label,
.sidebar-collapsed .nav-group-label,
.sidebar-collapsed .sidebar-brand-name,
.sidebar-collapsed .sidebar-identity,
.sidebar-collapsed .sidebar-signout-label { max-width: 0; opacity: 0; }
.sidebar-collapsed .sidebar-footer { padding: 0 4px; }

.sidebar-collapse-btn {
  position: absolute;
  top: 20px; right: -12px;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--ink-2);
  border: 1px solid var(--border-2);
  color: var(--text-faint);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.2s ease;
  z-index: 101;
}
.sidebar-collapse-btn:hover { background: var(--surface-2); color: var(--text); }
.sidebar-collapse-btn svg { width: 12px; height: 12px; transition: transform 0.3s ease; }
.sidebar-collapsed .sidebar-collapse-btn svg { transform: rotate(180deg); }

.sidebar-footer {
  border-top: 1px solid var(--sidebar-border);
  padding-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sidebar-profile {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.sidebar-identity { white-space: nowrap; overflow: hidden; }
.sidebar-identity-name { font-weight: 700; font-size: 13px; color: #FFFFFF; }
.sidebar-identity-role { font-size: 11px; color: var(--sidebar-text-dim); text-transform: capitalize; }
.sidebar-signout {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: none;
  border: none;
  color: #F87171;
  cursor: pointer;
  font-size: 13px;
  font-family: var(--font-body);
  font-weight: 500;
  transition: background 0.2s;
  width: 100%;
  text-align: left;
}
.sidebar-signout:hover { background: var(--bad-dim); }
.sidebar-signout svg { width: 16px; height: 16px; flex-shrink: 0; }

/* ─── TOP NAV ────────────────────────────────────────────── */
.topnav {
  grid-column: 2;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 var(--space-6);
  height: var(--topnav-h);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 90;
}
.topnav-crumb {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-faint);
  white-space: nowrap;
}
.topnav-crumb span { color: var(--brand-soft); }
.topnav-search {
  flex: 0 1 240px;
  max-width: 240px;
  margin: 0 auto 0 16px;
  position: relative;
}
.topnav-search svg {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  width: 15px; height: 15px; color: var(--text-faint); pointer-events: none;
}
.topnav-search input {
  width: 100%;
  height: 36px;
  padding: 0 12px 0 34px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text);
  font-size: 13px;
  font-family: var(--font-body);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.topnav-search input:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 4px var(--brand-dim);
}
.topnav-search input::placeholder { color: var(--text-faint); }
.topnav-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }

/* ─── COMPACT SEARCH / FILTER ROW (Directory, Leave Analytics, etc.) ───
   Enterprise sizing: 44px controls, small icon, everything on one row. */
.filter-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.search-field {
  position: relative;
  flex: 1;
  min-width: 180px;
  max-width: 280px;
}
.search-field svg {
  position: absolute;
  left: 13px; top: 50%; transform: translateY(-50%);
  width: 15px; height: 15px;
  color: var(--text-faint);
  pointer-events: none;
}
.search-field input {
  height: 44px;
  padding: 0 14px 0 38px;
  font-size: 13.5px;
}
.filter-row select {
  height: 44px;
  max-width: 170px;
  font-size: 13.5px;
  padding: 0 12px;
}
.filter-row .btn { height: 44px; }
.icon-btn {
  position: relative;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-dim);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.2s ease;
}
.icon-btn:hover { background: var(--surface-2); color: var(--text); transform: translateY(-1px); }
.icon-btn svg { width: 17px; height: 17px; }
.icon-btn-badge {
  position: absolute; top: -3px; right: -3px;
  min-width: 16px; height: 16px;
  border-radius: 999px;
  background: var(--bad);
  color: white;
  font-size: 9px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  padding: 0 3px;
  border: 2px solid var(--ink-2);
}
.profile-menu-wrap { position: relative; }
.profile-menu-trigger {
  background: none; border: none; padding: 0; cursor: pointer;
  border-radius: 50%; display: flex;
}
.profile-menu-trigger .avatar {
  box-shadow: 0 0 0 2px var(--border-2), 0 0 12px var(--brand-glow);
  transition: box-shadow 0.2s;
}
.profile-menu-trigger:hover .avatar { box-shadow: 0 0 0 2px var(--brand), 0 0 20px var(--brand-glow); }
.profile-menu {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  min-width: 224px;
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-lg);
  padding: 8px;
  box-shadow: var(--shadow-lg);
  z-index: 200;
  display: none;
}

.notif-dropdown {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  width: 340px;
  max-height: 420px;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  z-index: 200;
  padding: 6px;
}
.notif-empty { padding: 20px 14px; text-align: center; font-size: 13px; color: var(--text-faint); }
.notif-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 10px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--text);
  transition: background 0.15s;
}
.notif-item:hover { background: var(--surface-2); }
.notif-item-icon { font-size: 16px; line-height: 1.4; flex-shrink: 0; }
.notif-item-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.notif-item-text { font-size: 13px; line-height: 1.4; overflow-wrap: break-word; }
.notif-item-time { font-size: 11px; color: var(--text-faint); }
.profile-menu-header {
  padding: 10px 12px 12px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}
.profile-menu-name { font-weight: 700; font-size: 14px; }
.profile-menu-role { font-size: 12px; color: var(--text-faint); text-transform: capitalize; }
.profile-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  color: var(--text-dim);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  text-decoration: none;
  background: none;
  border: none;
  font-family: var(--font-body);
  width: 100%;
  text-align: left;
}
.profile-menu-item:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.profile-menu-item svg { width: 15px; height: 15px; flex-shrink: 0; }
.profile-menu-item.danger { color: var(--bad); }
.profile-menu-item.danger:hover { background: var(--bad-dim); }

/* ─── MAIN CONTENT ──────────────────────────────────────── */
.main {
  grid-column: 2;
  padding: var(--space-8) var(--space-8) 80px;
  max-width: 1280px;
  width: 100%;
  min-width: 0;
  animation: page-enter 0.4s cubic-bezier(.4,0,.2,1) both;
}
@keyframes page-enter {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Page header */
.page-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: var(--space-8); gap: 16px; flex-wrap: wrap; }
.page-title { font-size: 28px; font-weight: 800; letter-spacing: -0.025em; }
.page-subtitle { color: var(--text-dim); font-size: 14px; margin-top: 4px; }
.page-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

/* ─── TYPOGRAPHY SCALE ──────────────────────────────────── */
.t-display  { font-size: 36px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; }
.t-heading  { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; }
.t-section  { font-size: 18px; font-weight: 700; letter-spacing: -0.015em; }
.t-card     { font-size: 15px; font-weight: 600; }
.t-body     { font-size: 14px; font-weight: 400; line-height: 1.6; }
.t-caption  { font-size: 12px; color: var(--text-dim); }
.t-label    { font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint); }
.t-mono     { font-family: var(--font-mono); font-size: 13px; }
.t-eyebrow  { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-faint); }

/* ─── GLASS CARDS ───────────────────────────────────────── */
.card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  overflow: hidden;
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.card:hover { border-color: var(--border-2); }
a.card:hover, a.employee-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.3), 0 0 0 1px var(--brand-dim);
  text-decoration: none;
}
.card-elevated {
  background: var(--surface-2);
  box-shadow: var(--shadow);
}
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}

/* ─── KPI / STAT CARDS ──────────────────────────────────── */
.stat-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: var(--space-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
}
.stat-icon {
  width: 48px; height: 48px;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  position: relative;
}
.stat-icon svg { width: 22px; height: 22px; }
.stat-icon.brand { background: var(--brand-dim); color: var(--brand-soft); box-shadow: 0 0 20px var(--brand-dim); }
.stat-icon.good  { background: var(--good-dim); color: var(--good); }
.stat-icon.bad   { background: var(--bad-dim); color: var(--bad); }
.stat-icon.gold  { background: var(--gold-dim); color: var(--gold); }
.stat-value { font-size: 32px; font-weight: 800; letter-spacing: -0.025em; line-height: 1; }
.stat-label { font-size: 12px; color: var(--text-dim); margin-top: 3px; font-weight: 500; }
.stat-delta { font-size: 11px; font-weight: 600; margin-top: 4px; }
.stat-delta.up { color: var(--good); }
.stat-delta.down { color: var(--bad); }

/* ─── BUTTONS ───────────────────────────────────────────── */
.btn {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 22px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13.5px;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  user-select: none;
}
.btn svg { width: 15px; height: 15px; flex-shrink: 0; }
.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none !important; }

.btn-primary {
  background: var(--brand);
  color: white;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 28px var(--brand-glow); }

.btn-secondary {
  background: var(--surface);
  border-color: var(--border-2);
  color: var(--text);
}
.btn-secondary:hover { background: var(--surface-2); border-color: var(--brand); color: var(--brand-soft); transform: translateY(-1px); }

.btn-ghost {
  background: transparent;
  border-color: var(--border);
  color: var(--text-dim);
}
.btn-ghost:hover { background: var(--surface); border-color: var(--border-2); color: var(--text); }

.btn-danger {
  background: var(--bad-dim);
  border-color: rgba(244,63,94,0.3);
  color: var(--bad);
}
.btn-danger:hover { background: rgba(244,63,94,0.2); transform: translateY(-1px); }

.btn-icon {
  padding: 8px;
  width: 36px; height: 36px;
}
.btn-sm { padding: 6px 12px; font-size: 12.5px; }
.btn-lg { padding: 12px 24px; font-size: 15px; }

/* Ripple */
.btn-ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.3);
  transform: scale(0);
  animation: ripple 0.55s ease-out;
  pointer-events: none;
}
.btn-ghost .btn-ripple, .btn-secondary .btn-ripple { background: rgba(124,110,250,0.2); }
@keyframes ripple { to { transform: scale(2.8); opacity: 0; } }

/* Loading */
.btn.is-loading { color: transparent !important; pointer-events: none; }
.btn.is-loading::before {
  content: "";
  position: absolute;
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: white;
  animation: spin 0.7s linear infinite;
}
.btn-secondary.is-loading::before, .btn-ghost.is-loading::before {
  border-color: var(--border-2);
  border-top-color: var(--brand-soft);
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ─── INPUTS ────────────────────────────────────────────── */
.field { margin-bottom: 16px; }
.field-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 6px;
}
input, select, textarea {
  width: 100%;
  padding: 10px 14px;
  background: var(--surface-2);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.4;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 4px var(--brand-dim);
  background: var(--surface-3);
}
input::placeholder, textarea::placeholder { color: var(--text-faint); }
select {
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234B5563' stroke-width='2.5'%3E%3Cpolyline points='6,9 12,15 18,9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 15px 15px;
}
select:hover { border-color: var(--brand); }
select option {
  background: #FFFFFF;
  color: #1F2937;
  padding: 10px 12px;
}
select option:checked, select option:hover { background: var(--brand-dim); }
.input-with-icon { position: relative; }
.input-with-icon svg {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; color: var(--text-faint); pointer-events: none;
}
.input-with-icon input { padding-left: 38px; }

/* ─── BADGES & STATUS PILLS ─────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.badge-active   { background: var(--good-dim); color: var(--good); }
.badge-active::before { animation: pulse-dot 2s ease-in-out infinite; }
.badge-inactive { background: var(--bad-dim); color: var(--bad); }
.badge-pending  { background: var(--gold-dim); color: var(--gold); }
.badge-pending::before { animation: pulse-dot 1.5s ease-in-out infinite; }
.badge-brand    { background: var(--brand-dim); color: var(--brand-soft); }
.badge-high     { background: var(--bad-dim); color: var(--bad); }
.badge-medium   { background: var(--gold-dim); color: var(--gold); }
.badge-low      { background: rgba(148,163,184,0.14); color: #94a3b8; }
.badge-open     { background: var(--gold-dim); color: var(--gold); }
.badge-open::before { animation: pulse-dot 1.5s ease-in-out infinite; }
.badge-resolved { background: var(--good-dim); color: var(--good); }
.badge-revoked  { background: rgba(148,163,184,0.14); color: #94a3b8; }
@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* ─── AVATAR ─────────────────────────────────────────────── */
.avatar {
  border-radius: 50%;
  object-fit: cover;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--brand-soft);
  background: var(--brand-dim);
  flex-shrink: 0;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.08), 0 0 12px var(--brand-dim);
  transition: box-shadow 0.2s;
}

/* ─── EMPLOYEE CARDS ────────────────────────────────────── */
.employee-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}
.employee-card:hover { border-color: var(--brand); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.3); }
.employee-card .name { font-weight: 700; font-size: 14px; overflow-wrap: break-word; word-break: break-word; }
.employee-card .meta { font-size: 12px; color: var(--text-dim); margin-top: 2px; overflow-wrap: break-word; word-break: break-word; }
.employee-card-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.employee-card-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

/* Wrapping-safe chip — for values that can be arbitrarily long (team, department, manager
   names). Unlike .badge (status pills, always short fixed words), this wraps onto multiple
   lines instead of overflowing or getting clipped. This is what fixes long team names like
   "SM3 - Business Development" not displaying correctly. */
.chip-wrap {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 6px;
  background: var(--brand-dim);
  color: var(--brand);
  font-size: 10.5px;
  font-weight: 700;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: break-word;
  line-height: 1.4;
  max-width: 100%;
}

/* ─── Manager "Reports To" quick-link + tooltip (Directory) ───────────── */
.manager-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--brand);
  text-decoration: none;
}
.manager-link:hover { text-decoration: underline; }
.manager-avatar {
  width: 18px; height: 18px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.manager-avatar-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-dim);
  color: var(--brand);
  font-size: 8px;
  font-weight: 800;
  font-family: var(--font-display);
}
.manager-tooltip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  min-width: 200px;
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  padding: 10px 12px;
  font-size: 12px;
  font-weight: 400;
  color: var(--text-dim);
  line-height: 1.6;
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity 0.15s ease, transform 0.15s ease;
  z-index: 40;
  white-space: normal;
}
.manager-link:hover .manager-tooltip { opacity: 1; visibility: visible; transform: translateY(0); }
.manager-tooltip-name { font-weight: 700; color: var(--text); margin-bottom: 4px; font-size: 13px; }

/* ─── TABLES ─────────────────────────────────────────────── */
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.table-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
thead { position: static; }
th {
  padding: 13px 16px;
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-faint);
  background: var(--surface-2);
  border-bottom: 1px solid var(--border-2);
  white-space: nowrap;
  user-select: none;
}
th[data-sort] { cursor: pointer; transition: color 0.15s; }
th[data-sort]:hover { color: var(--brand); }
td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
  color: var(--text-dim);
}
tbody tr:nth-child(even) { background: rgba(31,41,55,0.02); }
tr:last-child td { border-bottom: none; }
tbody tr { transition: background 0.15s; }
tbody tr:hover { background: var(--surface-2); }
.td-name { color: var(--text); font-weight: 600; }

/* ─── MODALS ─────────────────────────────────────────────── */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.6);
  display: flex; align-items: center; justify-content: center;
  z-index: 500;
  padding: 20px;
}
.modal {
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  width: 100%;
  max-width: 460px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
  animation: modal-enter 0.25s cubic-bezier(.4,0,.2,1);
}
@keyframes modal-enter {
  from { opacity: 0; transform: scale(0.96) translateY(8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.modal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-5); }
.modal-title { font-size: 18px; font-weight: 700; }
.modal-close {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--surface); border: 1px solid var(--border);
  color: var(--text-dim); cursor: pointer; display: flex;
  align-items: center; justify-content: center; transition: all 0.15s;
}
.modal-close:hover { background: var(--bad-dim); color: var(--bad); border-color: transparent; }
.modal-close svg { width: 14px; height: 14px; }
.modal-footer { display: flex; justify-content: flex-end; gap: 8px; margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--border); }

/* ─── TOASTS ─────────────────────────────────────────────── */
.toast-host {
  position: fixed; bottom: 24px; right: 24px;
  display: flex; flex-direction: column; gap: 10px;
  z-index: 600;
}
.toast {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--border-2);
  box-shadow: var(--shadow-lg);
  font-size: 13.5px; max-width: 340px;
  opacity: 0; transform: translateX(16px);
  transition: all 0.3s cubic-bezier(.4,0,.2,1);
}
.toast-in { opacity: 1; transform: translateX(0); }
.toast-icon { width: 18px; height: 18px; flex-shrink: 0; }
.toast-success .toast-icon { color: var(--good); }
.toast-error   .toast-icon { color: var(--bad); }
.toast-info    .toast-icon { color: var(--brand-soft); }

/* ─── CONFIRM DIALOG ─────────────────────────────────────── */
.confirm-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.6);
  display: flex; align-items: center; justify-content: center;
  z-index: 550;
}
.confirm-card {
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  width: 360px;
  box-shadow: var(--shadow-lg);
  animation: modal-enter 0.25s cubic-bezier(.4,0,.2,1);
}
.confirm-msg { font-size: 14.5px; line-height: 1.6; margin-bottom: var(--space-5); }
.confirm-actions { display: flex; gap: 8px; justify-content: flex-end; }

/* ─── CHEVRON SECTION DIVIDER ───────────────────────────── */
.section-label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 28px 0 14px;
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-faint);
}
.section-label::before {
  content: "";
  width: 10px; height: 10px;
  background: var(--brand);
  clip-path: polygon(0 0,50% 45%,100% 0,100% 25%,50% 70%,0 25%);
  box-shadow: 0 0 10px var(--brand-glow);
  flex-shrink: 0;
}
.section-label::after { content: ""; flex: 1; height: 1px; background: var(--border); }

/* ─── QUERY CARDS ────────────────────────────────────────── */
.query-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  margin-bottom: 12px;
  background: var(--surface);
  transition: border-color 0.2s;
}
.query-card:hover { border-color: var(--border-2); }
.query-subject { font-weight: 700; font-size: 15px; }
.query-message { color: var(--text-dim); font-size: 13.5px; margin-top: 6px; line-height: 1.6; }
.query-response {
  margin-top: 12px;
  padding: 12px 14px;
  border-left: 3px solid var(--brand);
  background: var(--brand-dim);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 13.5px;
}

/* ─── WALL POSTS ─────────────────────────────────────────── */
.wall-post {
  display: flex;
  gap: 14px;
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  margin-bottom: 14px;
  background: var(--surface);
  position: relative;
  overflow: hidden;
  transition: border-color 0.2s;
}
.wall-post::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; }
.wall-post.birthday  { border-color: rgba(245,158,11,0.3); }
.wall-post.birthday::before { background: #F59E0B; }
.wall-post.anniversary { border-color: rgba(124,110,250,0.3); }
.wall-post.anniversary::before { background: var(--brand); }
.wall-post.announcement::before { background: #0EA5E9; }
.wall-post-title { font-weight: 700; font-size: 15px; }
.wall-post-body  { color: var(--text-dim); font-size: 13.5px; margin-top: 4px; line-height: 1.6; }
.wall-post-meta  { font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); margin-top: 8px; }

/* ─── CELEBRATION BANNER ─────────────────────────────────── */
.celebration-banner {
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  margin-bottom: 8px;
  background: radial-gradient(ellipse at 10% 20%, rgba(124,110,250,0.15), transparent 50%),
              radial-gradient(ellipse at 90% 20%, rgba(245,158,11,0.12), transparent 50%),
              var(--surface);
  border: 1px solid var(--border);
}
.celebration-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}
.celebration-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: all 0.2s;
}
a.celebration-card:hover { border-color: var(--brand); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,0.25); text-decoration: none; }
.celebration-ring { border-radius: 50%; padding: 2px; flex-shrink: 0; }
.celebration-ring.birthday { background: #F59E0B; }
.celebration-ring.anniversary { background: var(--brand); }
.celebration-name { font-weight: 700; font-size: 13.5px; }
.celebration-type { font-size: 11.5px; font-weight: 600; margin-top: 2px; }
.celebration-type.birthday { color: #F59E0B; }
.celebration-type.anniversary { color: var(--brand-soft); }

/* ─── Floating celebration showcase (today only) — photos with balloons, clearly
   visible names, gentle bobbing motion. Deliberately festive rather than a plain list. */
.celebration-float-banner {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 32px;
  padding: 48px 24px 36px;
  margin-bottom: 8px;
  border-radius: var(--radius-xl);
  background: radial-gradient(ellipse at 20% 20%, rgba(99,102,241,0.35), transparent 55%),
              radial-gradient(ellipse at 80% 15%, rgba(236,72,153,0.28), transparent 55%),
              radial-gradient(ellipse at 50% 100%, rgba(56,189,248,0.22), transparent 60%),
              linear-gradient(160deg, #1E1B4B 0%, #312E5C 55%, #1E1B4B 100%);
  border: 1px solid rgba(255,255,255,0.08);
  position: relative;
  overflow: hidden;
}
/* Firework bursts — expanding rings that pop and fade, staggered across the banner */
.firework {
  position: absolute;
  width: 6px; height: 6px;
  border-radius: 50%;
  pointer-events: none;
  animation: firework-burst 2.6s ease-out infinite;
}
.firework::before, .firework::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow:
    0 0 0 0 currentColor,
    28px -8px 0 -2px currentColor, -28px -8px 0 -2px currentColor,
    28px 8px 0 -2px currentColor, -28px 8px 0 -2px currentColor,
    0 -30px 0 -2px currentColor, 0 30px 0 -2px currentColor,
    20px -22px 0 -2px currentColor, -20px -22px 0 -2px currentColor,
    20px 22px 0 -2px currentColor, -20px 22px 0 -2px currentColor;
  opacity: 0;
}
.firework::before { animation: firework-sparks 2.6s ease-out infinite; }
@keyframes firework-burst {
  0%   { transform: scale(0.2); opacity: 0; }
  8%   { opacity: 1; }
  35%  { transform: scale(1); opacity: 0.9; }
  70%  { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes firework-sparks {
  0%, 6%  { opacity: 0; transform: scale(0.3); }
  10%     { opacity: 1; transform: scale(0.6); }
  45%     { opacity: 0.85; transform: scale(1.5); }
  70%     { opacity: 0; transform: scale(2.1); }
  100%    { opacity: 0; }
}
/* Confetti — small pieces continuously falling and tumbling */
.confetti-piece {
  position: absolute;
  top: -12px;
  width: 8px; height: 14px;
  border-radius: 2px;
  opacity: 0.9;
  animation: confetti-fall linear infinite;
}
@keyframes confetti-fall {
  0%   { transform: translateY(-20px) rotate(0deg); opacity: 0; }
  8%   { opacity: 0.9; }
  100% { transform: translateY(340px) rotate(540deg); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .firework, .confetti-piece { animation: none; display: none; }
}
.celebration-float-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 160px;
  text-decoration: none;
  padding-top: 28px;
}
a.celebration-float-card:hover .celebration-float-avatar { transform: translateY(-4px) scale(1.04); }
.celebration-float-balloons {
  position: absolute;
  top: -18px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 4px;
  z-index: 1;
  pointer-events: none;
}
.balloon { animation: balloon-bob 3.2s ease-in-out infinite; filter: drop-shadow(0 4px 6px rgba(0,0,0,0.15)); }
.balloon:first-child { transform: rotate(-8deg); }
.balloon:last-child { transform: rotate(8deg); }
@keyframes balloon-bob {
  0%, 100% { transform: translateY(0) rotate(-6deg); }
  50% { transform: translateY(-10px) rotate(6deg); }
}
.celebration-float-avatar {
  position: relative;
  z-index: 2;
  border-radius: 50%;
  padding: 4px;
  background: var(--surface-3);
  box-shadow: var(--shadow);
  transition: transform 0.25s ease;
}
.celebration-float-avatar.birthday { box-shadow: 0 0 0 3px #F59E0B, var(--shadow); }
.celebration-float-avatar.anniversary { box-shadow: 0 0 0 3px var(--brand), var(--shadow); }
.float-anim { animation: avatar-float 3.6s ease-in-out infinite; }
@keyframes avatar-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
.celebration-float-name {
  margin-top: 14px;
  font-weight: 800;
  font-size: 15px;
  color: #FFFFFF;
  text-align: center;
  line-height: 1.25;
}
.celebration-float-card .chip {
  display: inline-block;
  margin-top: 4px;
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: none;
}
.celebration-float-card .chip.birthday { color: #FCD34D; }
.celebration-float-card .chip.anniversary { color: #93C5FD; }
@media (prefers-reduced-motion: reduce) {
  .balloon, .float-anim { animation: none; }
}

/* ─── CALENDAR ───────────────────────────────────────────── */
.cal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.cal-grid   { display: grid; grid-template-columns: repeat(7,1fr); gap: 6px; }
.cal-dow    { text-align: center; font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint); padding-bottom: 4px; }
.cal-day    { min-height: 76px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 6px; display: flex; flex-direction: column; gap: 2px; }
.cal-day.today { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand) inset; }
.cal-day.outside { opacity: 0.3; }
.cal-daynum { font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); }
.cal-chip   { font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 5px; background: var(--brand-dim); color: var(--brand-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-chip.sick { background: var(--bad-dim); color: var(--bad); }
.cal-chip.emergency { background: var(--gold-dim); color: var(--gold); }
.cal-chip.vacation  { background: var(--brand-dim); color: var(--brand-soft); }
.cal-chip.personal  { background: rgba(20,184,166,0.14); color: #14B8A6; }
.cal-more { font-size: 10px; color: var(--text-faint); }

/* ─── SEGMENTED CONTROL ──────────────────────────────────── */
.segmented {
  display: inline-flex;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
}
.segmented button {
  border: none;
  background: transparent;
  color: var(--text-dim);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12.5px;
  padding: 6px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.2s;
}
.segmented button.active { background: var(--brand); color: white; box-shadow: 0 2px 8px var(--brand-glow); }
.segmented button:not(.active):hover { background: var(--surface-2); color: var(--text); }

/* ─── PROFILE CARD (org, directory) ─────────────────────── */
.profile-card-large {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: var(--space-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-6);
}
.profile-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
}
.profile-field { display: flex; flex-direction: column; gap: 4px; }
.profile-field-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint); }
.profile-field-value { font-size: 14px; font-weight: 500; }

/* ─── TIMELINE ───────────────────────────────────────────── */
.timeline-item {
  border-left: 2px solid var(--brand);
  padding-left: var(--space-4);
  padding-bottom: var(--space-5);
  position: relative;
}
.timeline-item::before {
  content: "";
  position: absolute;
  left: -6px; top: 4px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 10px var(--brand-glow);
}

/* ─── SKELETON LOADERS ───────────────────────────────────── */
.skeleton {
  border-radius: var(--radius-sm);
  background: linear-gradient(90deg, var(--surface) 25%, var(--surface-2) 50%, var(--surface) 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.6s ease-in-out infinite;
}
.skeleton-card {
  display: flex; align-items: center; gap: 14px;
  padding: var(--space-4);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.skeleton-avatar { width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0; }
.skeleton-line { height: 12px; margin-bottom: 8px; }
.skeleton-row td { padding: 14px 16px; }
@keyframes skeleton-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ─── EMPTY STATES ───────────────────────────────────────── */
.empty-state {
  text-align: center;
  padding: 56px 24px;
  color: var(--text-dim);
  font-size: 13.5px;
}
.empty-state::before {
  content: "";
  display: block;
  width: 52px; height: 52px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpath d='M3 12h4l2 4h6l2-4h4'/%3E%3Cpath d='M5.45 5.11L2 12v6a2 2 0 002 2h16a2 2 0 002-2v-6l-3.45-6.89A2 2 0 0016.76 4H7.24a2 2 0 00-1.79 1.11z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 22px 22px;
}
.empty-icon {
  width: 56px; height: 56px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
}
.empty-icon svg { width: 24px; height: 24px; }
.empty-title { font-size: 15px; font-weight: 700; color: var(--text-dim); margin-bottom: 6px; }
.empty-desc  { font-size: 13.5px; color: var(--text-faint); }

.loading-pulse { animation: loading-pulse-anim 1.4s ease-in-out infinite; }
@keyframes loading-pulse-anim { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }

/* ─── SCROLL REVEAL ──────────────────────────────────────── */
.reveal-pending { opacity: 0; transform: translateY(14px); }
.reveal-in { animation: reveal-in 0.5s cubic-bezier(.4,0,.2,1) both; }
@keyframes reveal-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }

/* ─── GREETING HEADER ────────────────────────────────────── */
.greeting-header { margin-bottom: var(--space-6); }
.greeting-eyebrow { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-faint); margin-bottom: 4px; }
.greeting-title { font-size: 30px; font-weight: 800; letter-spacing: -0.025em; }
.greeting-sub { color: var(--text-dim); font-size: 14px; margin-top: 4px; }

/* ─── LOGIN ──────────────────────────────────────────────── */
.login-page {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  position: relative;
  z-index: 10;
}
.login-left {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--space-10);
  background: var(--sidebar-bg);
  border-right: 1px solid var(--sidebar-border);
  color: var(--sidebar-text);
}
.login-left .t-eyebrow { color: var(--sidebar-text-dim); }
.login-left-brand { display: flex; align-items: center; gap: 12px; }
.login-left-brand img { height: 36px; }
.login-left-brand-name { font-size: 18px; font-weight: 800; color: #FFFFFF; }
.login-left-content { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: var(--space-8) 0; }
.login-left-title { font-size: 40px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.15; margin-bottom: var(--space-5); color: #FFFFFF; }
.login-left-title span { color: var(--brand-soft); }
.login-left-desc { font-size: 15px; color: var(--sidebar-text); line-height: 1.7; max-width: 400px; margin-bottom: var(--space-8); }
.login-feature { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--sidebar-border); }
.login-feature:last-child { border-bottom: none; }
.login-feature-icon { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.login-feature-icon svg { width: 18px; height: 18px; }
.login-feature-text { font-size: 13.5px; font-weight: 500; color: var(--sidebar-text); }
.login-right {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-8);
  background: var(--ink-2);
}
.login-card {
  width: 100%;
  max-width: 420px;
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  box-shadow: var(--shadow-lg), 0 0 60px rgba(124,110,250,0.1);
}
.login-card-title { font-size: 22px; font-weight: 800; margin-bottom: 4px; }
.login-card-sub   { font-size: 13.5px; color: var(--text-dim); margin-bottom: var(--space-6); }
.login-step       { animation: page-enter 0.3s ease both; }
.login-divider {
  display: flex; align-items: center; gap: 12px;
  margin: var(--space-5) 0;
  font-size: 11.5px; color: var(--text-faint);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.login-divider::before, .login-divider::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.login-error { color: var(--bad); font-size: 13px; margin-top: var(--space-4); min-height: 18px; }
.login-footer { text-align: center; margin-top: var(--space-5); font-size: 12.5px; color: var(--text-faint); }
.pw-toggle {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  background: none; border: none; cursor: pointer; color: var(--text-faint);
  padding: 4px; transition: color 0.15s;
}
.pw-toggle:hover { color: var(--text); }
.pw-toggle svg { width: 16px; height: 16px; }
.link-btn { background: none; border: none; color: var(--brand-soft); cursor: pointer; font-weight: 600; font-size: inherit; font-family: inherit; padding: 0; transition: color 0.15s; }
.link-btn:hover { color: var(--brand); text-decoration: underline; }

/* ─── BLOBS (login left) ─────────────────────────────────── */
.login-blob {
  position: absolute; border-radius: 50%;
  filter: blur(90px); pointer-events: none; opacity: 0.18;
  animation: blob-float 26s ease-in-out infinite;
}
.blob-1 { width: 500px; height: 500px; background: #6366F1; top: -100px; left: -100px; }
.blob-2 { width: 400px; height: 400px; background: #14B8A6; bottom: -100px; right: -100px; animation-delay: -7s; }
.blob-3 { width: 300px; height: 300px; background: #F59E0B; top: 40%; right: 20%; animation-delay: -14s; opacity: 0.15; }
@keyframes blob-float {
  0%, 100% { transform: translate(0,0) scale(1); }
  50%       { transform: translate(20px,-15px) scale(1.06); }
}

/* ─── RESPONSIVENESS ─────────────────────────────────────── */
@media (max-width: 1024px) {
  .login-page { grid-template-columns: 1fr; }
  .login-left { display: none; }
}
/* Mobile menu button - hidden on desktop, only relevant once the sidebar becomes a drawer */
.mobile-menu-btn { display: none; flex-shrink: 0; }
.sidebar-backdrop {
  display: none;
  position: fixed; inset: 0;
  background: rgba(15,23,42,0.4);
  z-index: 50;
}
.sidebar-backdrop.visible { display: block; }

/* One consistent drawer for anything narrower than true desktop (≤1024px) - full labels,
   slide-out with a hamburger toggle. No separate icon-only "tablet" mode: on a touch
   device, small unlabeled icon targets are worse, not better, and having two different
   collapsed states (a manual desktop toggle vs an automatic width-based one) was
   confusing to reason about and had a real bug where they silently overlapped. */
@media (max-width: 1024px) {
  :root { --sidebar-w: 0px; }
  .app-shell { grid-template-columns: 0 1fr; }
  .sidebar { position: fixed; left: 0; transform: translateX(-100%); width: 260px; z-index: 100; }
  .sidebar.mobile-open { transform: translateX(0); box-shadow: var(--shadow-lg); }
  .mobile-menu-btn { display: flex; }
  .sidebar-collapse-btn { display: none; } /* collapse doesn't apply to the drawer */
  .sidebar-brand-name, .nav-link-label, .sidebar-identity, .sidebar-signout-label { display: block; }
  .nav-link { justify-content: flex-start; }
}
@media (max-width: 768px) {
  .main { padding: var(--space-5); }
  .page-title { font-size: 22px; }
  .card-grid { grid-template-columns: 1fr 1fr; }
  .login-right { padding: var(--space-5); }
  .login-card { padding: var(--space-5); }
}
@media (max-width: 480px) {
  .card-grid { grid-template-columns: 1fr; }
  .page-header { flex-direction: column; }
  /* Every request modal in the app (Leaves, Early Start/End, Shift Changes, Queries,
     Warnings) sets a fixed pixel width on its inner .card for desktop layout. On a phone
     that's often wider than the viewport itself - this caps it so raising a request from
     a phone never requires horizontal scrolling, no matter which modal it is. */
  div[style*="position:fixed"] > .card {
    width: calc(100vw - 32px) !important;
    max-width: calc(100vw - 32px);
    max-height: 85vh;
    overflow-y: auto;
  }
}
@media (min-width: 1800px) {
  .main { max-width: 1600px; }
  :root { --sidebar-w: 280px; }
}

/* ─── UTILITY ────────────────────────────────────────────── */
.flex    { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; } .gap-5 { gap: 20px; }
.mt-2 { margin-top: 8px; } .mt-3 { margin-top: 12px; } .mt-4 { margin-top: 16px; }
.mt-5 { margin-top: 20px; } .mt-6 { margin-top: 24px; }
.mb-4 { margin-bottom: 16px; }
.text-center { text-align: center; }
.text-dim   { color: var(--text-dim); }
.text-faint { color: var(--text-faint); }
.text-good  { color: var(--good); }
.text-bad   { color: var(--bad); }
.text-brand { color: var(--brand-soft); }
.mono { font-family: var(--font-mono); }
.w-full { width: 100%; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nowrap { white-space: nowrap; }

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ─── LAYOUT FIX: topnav lives inside .main (not grid child) ── */
.app-shell {
  grid-template-rows: auto;
}
.topnav {
  grid-column: unset;
  position: sticky;
  top: 0;
  margin: -40px -40px 32px -40px;
  border-radius: 0;
  border-top: none;
  border-left: none;
  border-right: none;
}
@media (max-width: 768px) {
  .topnav { margin: -20px -20px 20px -20px; }
}

/* ─── V1 COMPAT ALIASES (pages still use these class names) ── */
.topbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 32px;
  gap: 16px;
  flex-wrap: wrap;
}
.topbar h1 {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.025em;
}
.subtitle { color: var(--text-dim); font-size: 14px; margin-top: 4px; }
.chevron-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 28px 0 14px;
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-faint);
}
.chevron-divider::before {
  content: "";
  width: 10px; height: 10px;
  background: var(--brand);
  clip-path: polygon(0 0,50% 45%,100% 0,100% 25%,50% 70%,0 25%);
  box-shadow: 0 0 10px var(--brand-glow);
  flex-shrink: 0;
}
.chevron-divider::after { content: ""; flex: 1; height: 1px; background: var(--border); }

/* Stat-card inner V1 compat */
.stat-card .value { font-size: 32px; font-weight: 800; letter-spacing: -0.025em; line-height: 1; }
.stat-card .label { font-size: 12px; color: var(--text-dim); margin-top: 4px; font-weight: 500; }
.icon-badge {
  width: 48px; height: 48px;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.icon-badge svg { width: 22px; height: 22px; }
.icon-badge.tone-brand { background: var(--brand-dim); color: var(--brand-soft); }
.icon-badge.tone-good  { background: var(--good-dim); color: var(--good); }
.icon-badge.tone-bad   { background: var(--bad-dim); color: var(--bad); }
.icon-badge.tone-gold  { background: var(--gold-dim); color: var(--gold); }

/* Gap utilities (V1 used gap-8/12/16/20) */
.gap-6  { gap: 6px; }
.gap-8  { gap: 8px; }
.gap-12 { gap: 12px; }
.gap-16 { gap: 16px; }
.gap-20 { gap: 20px; }
.gap-24 { gap: 24px; }
/* Margin utilities */
.mt-8  { margin-top: 8px; }
.mt-12 { margin-top: 12px; }
.mt-16 { margin-top: 16px; }
.mb-8 { margin-bottom: 8px; }
.mb-16 { margin-bottom: 16px; }

/* ─── Leave type badges — distinct, calm colors per type ───────────────── */
.badge-sick      { background: rgba(220,38,38,0.10);  color: #DC2626; }
.badge-vacation  { background: rgba(5,150,105,0.10);   color: #059669; }
.badge-emergency { background: rgba(217,119,6,0.10);   color: #D97706; }
.badge-personal  { background: rgba(79,70,229,0.10);   color: #4F46E5; }
.badge-other     { background: rgba(107,114,128,0.10); color: #6B7280; }

/* ─── Leave request cards — the whole point of this redesign: dates and
   duration NEVER wrap, three clear zones (who / what+when / status+actions),
   consistent height regardless of content length. ───────────────────────── */
.leave-card {
  display: grid;
  grid-template-columns: 200px 1fr 160px;
  gap: 20px;
  padding: 18px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 12px;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.leave-card:hover { border-color: var(--brand); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.leave-card-left { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
.leave-card-center { min-width: 0; border-left: 1px solid var(--border); border-right: 1px solid var(--border); padding: 0 20px; }
.leave-card-right { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; text-align: right; }
.leave-card-actions { display: flex; gap: 6px; margin-top: auto; }

.date-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 6px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  margin-top: 8px;
  width: fit-content;
}

/* Icon action buttons — equal size, color-coded by intent, per spec */
.btn-icon-approve, .btn-icon-reject, .btn-icon-view, .btn-icon-revoke, .btn-icon-delete, .btn-icon-edit {
  width: 32px; height: 32px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px;
  cursor: pointer;
  transition: transform 0.15s, background 0.15s;
  background: var(--surface-2);
}
.btn-icon-approve:hover, .btn-icon-reject:hover, .btn-icon-view:hover, .btn-icon-revoke:hover, .btn-icon-delete:hover { transform: translateY(-1px); }
.btn-icon-approve { color: var(--good); }
.btn-icon-approve:hover { background: var(--good-dim); border-color: var(--good); }
.btn-icon-reject { color: var(--bad); }
.btn-icon-reject:hover { background: var(--bad-dim); border-color: var(--bad); }
.btn-icon-view { color: var(--brand); }
.btn-icon-view:hover { background: var(--brand-dim); border-color: var(--brand); }
.btn-icon-revoke { color: var(--gold); }
.btn-icon-revoke:hover { background: var(--gold-dim); border-color: var(--gold); }
.btn-icon-edit { color: var(--text-dim); }
.btn-icon-edit:hover { background: var(--surface-2); border-color: var(--text-dim); }
.btn-icon-delete { color: var(--text-faint); }
.btn-icon-delete:hover { background: var(--surface-2); border-color: var(--text-faint); }

@media (max-width: 860px) {
  .leave-card { grid-template-columns: 1fr; }
  .leave-card-center { border-left: none; border-right: none; padding: 12px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
  .leave-card-right { flex-direction: row; align-items: center; justify-content: space-between; text-align: left; }
}
.mt-24 { margin-top: 24px; }
.mt-32 { margin-top: 32px; }
/* justify */
.justify-end    { justify-content: flex-end; }
.justify-center { justify-content: center; }
/* Page glow (old class, now just a no-op visual thing) */
.page-glow { position: relative; }

/* Profile edit inline helpers */
.profile-info { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px; }

/* ════════════════════════════════════════════════
   SM3 OFFBOARDING — extensions to SM3 People design system
   ════════════════════════════════════════════════ */

/* ─── STATUS PILLS ──────────────────────────────── */
.pill { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.pill-open      { background: var(--brand-dim); color: var(--brand-soft); }
.pill-completed { background: var(--good-dim); color: var(--good); }
.pill-withdrawn { background: var(--gold-dim); color: var(--gold); }
.pill-draft     { background: var(--border); color: var(--text-dim); }
.pill-sent      { background: var(--good-dim); color: var(--good); }

/* ─── EXIT TYPE BADGES ──────────────────────────── */
.exit-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 700; padding: 3px 9px; border-radius: 6px; }
.exit-termination { background: rgba(220,38,38,0.10); color: #DC2626; }
.exit-resignation { background: var(--brand-dim); color: var(--brand-soft); }
.exit-letter_request { background: var(--gold-dim); color: var(--gold); }

/* ─── FORMS ─────────────────────────────────────── */
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 12px; font-weight: 600; color: var(--text-dim); margin-bottom: 5px; text-transform: uppercase; letter-spacing: 0.04em; }
.field input, .field select, .field textarea {
  width: 100%; padding: 9px 11px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-size: 13.5px; font-family: var(--font-body); background: var(--surface); color: var(--text);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-dim);
}
.field textarea { resize: vertical; min-height: 90px; line-height: 1.55; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width:560px) { .field-row { grid-template-columns: 1fr; } }

/* ─── BUTTONS ───────────────────────────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 10px 18px; border-radius: var(--radius-sm); border: 1px solid transparent; font-family: var(--font-body); font-weight: 600; font-size: 13.5px; cursor: pointer; transition: all .15s; white-space: nowrap; }
.btn-primary { background: var(--brand); color: #fff; box-shadow: 0 2px 6px rgba(79,70,229,.25); }
.btn-primary:hover { background: var(--brand-soft); box-shadow: 0 4px 16px var(--brand-glow); transform: translateY(-1px); }
.btn-secondary { background: var(--surface); color: var(--text-dim); border-color: var(--border); }
.btn-secondary:hover { border-color: var(--border-2); color: var(--text); }
.btn-ghost { background: transparent; color: var(--text-faint); border-color: var(--border); }
.btn-ghost:hover { color: var(--text-dim); border-color: var(--border-2); }
.btn-danger { background: rgba(220,38,38,0.08); color: var(--bad); border-color: rgba(220,38,38,.18); }
.btn-danger:hover { background: rgba(220,38,38,0.14); }
.btn-sm { padding: 6px 12px; font-size: 12px; border-radius: 7px; }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none !important; }

/* ─── ADMIN LAYOUT ──────────────────────────────── */
.admin-layout { display: flex; min-height: 100vh; }
.sidebar {
  width: 230px; flex-shrink: 0;
  background: var(--surface);
  border-right: 1px solid var(--border);
  padding: 0;
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.sidebar-top { padding: 22px 20px 16px; border-bottom: 1px solid var(--border); }
.sidebar-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 2px; }
.sidebar-brand img { height: 26px; width: auto; }
.sidebar-brand-name { font-family: var(--font-display); font-weight: 800; font-size: 14px; color: var(--text); }
.sidebar-sub { font-family: var(--font-mono); font-size: 9px; text-transform: uppercase; letter-spacing: .12em; color: var(--text-faint); padding-left: 36px; margin-top: 1px; }
.sidebar-nav { padding: 12px 10px; flex: 1; }
.nav-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 500; color: var(--text-dim); cursor: pointer; text-decoration: none; transition: all .12s; }
.nav-item:hover { background: var(--surface-2); color: var(--text); }
.nav-item.active { background: var(--brand-dim); color: var(--brand); font-weight: 700; }
.nav-item svg { width: 16px; height: 16px; flex-shrink: 0; opacity: .7; }
.nav-item.active svg { opacity: 1; }
.sidebar-footer { padding: 14px 10px; border-top: 1px solid var(--border); }
.main-content { flex: 1; padding: 36px 40px; min-width: 0; }
@media (max-width: 800px) {
  .admin-layout { flex-direction: column; }
  .sidebar { width: 100%; height: auto; position: static; flex-direction: row; flex-wrap: wrap; }
  .sidebar-nav { display: flex; flex-wrap: wrap; gap: 4px; padding: 8px; flex: unset; width: 100%; }
  .sidebar-top, .sidebar-footer { padding: 12px 14px; }
  .sidebar-sub { display: none; }
  .main-content { padding: 24px 16px; }
}

/* ─── PAGE HEADER ───────────────────────────────── */
.page-header { margin-bottom: 28px; }
.page-header h1 { font-family: var(--font-display); font-size: 22px; font-weight: 800; letter-spacing: -.02em; color: var(--text); margin-bottom: 4px; }
.page-header .sub { font-size: 13px; color: var(--text-faint); }

/* ─── TABLES ─────────────────────────────────────── */
.table-wrap { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th { text-align: left; padding: 11px 16px; font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-faint); border-bottom: 1px solid var(--border); white-space: nowrap; }
td { padding: 12px 16px; border-bottom: 1px solid var(--border); vertical-align: middle; }
tr:last-child td { border-bottom: none; }
tr:hover td { background: var(--surface-2); }

/* ─── CASE DETAIL ───────────────────────────────── */
.case-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 28px; }
.case-header-left h2 { font-size: 20px; font-weight: 800; letter-spacing: -.02em; margin-bottom: 6px; }
.case-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; align-items: center; }
.case-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.section-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); margin-bottom: 22px; overflow: hidden; }
.section-card-head { padding: 16px 20px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.section-card-head h3 { font-size: 13.5px; font-weight: 700; }
.section-card-body { padding: 20px; }
.section-card-body.tight { padding: 0; }

.detail-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.detail-item label { display: block; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-faint); margin-bottom: 4px; }
.detail-item .val { font-size: 13.5px; font-weight: 500; }
.detail-item input, .detail-item select, .detail-item textarea { width: 100%; padding: 7px 10px; border: 1px solid var(--border); border-radius: 7px; font-size: 13px; font-family: var(--font-body); background: var(--surface); color: var(--text); }
.detail-item input:focus, .detail-item select:focus, .detail-item textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-dim); }

/* ─── LETTER CARD ───────────────────────────────── */
.letter-card { border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 14px; background: var(--surface); }
.letter-card-head { padding: 14px 18px; display: flex; align-items: center; gap: 12px; cursor: pointer; user-select: none; }
.letter-card-head:hover { background: var(--surface-2); }
.letter-card-title { flex: 1; font-weight: 700; font-size: 13.5px; }
.letter-card-body { border-top: 1px solid var(--border); padding: 18px; display: none; }
.letter-card.open .letter-card-body { display: block; }
.letter-editor textarea { width: 100%; font-family: var(--font-mono); font-size: 12.5px; line-height: 1.6; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); resize: vertical; min-height: 220px; background: var(--surface); color: var(--text); }
.letter-editor textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-dim); }
.letter-editor-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-faint); margin: 14px 0 5px; }
.letter-preview { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 18px; font-size: 13px; line-height: 1.65; margin-top: 16px; overflow-x: auto; }

/* ─── CHECKLIST ─────────────────────────────────── */
.checklist { list-style: none; padding: 0; margin: 0; }
.checklist li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.checklist li:last-child { border-bottom: none; }
.checklist label { flex: 1; font-size: 13px; cursor: pointer; }
.checklist input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--brand); flex-shrink: 0; cursor: pointer; }
.checklist label.done { text-decoration: line-through; color: var(--text-faint); }

/* ─── ACTIVITY FEED ─────────────────────────────── */
.activity { list-style: none; padding: 0; margin: 0; }
.activity li { display: flex; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border); font-size: 12.5px; }
.activity li:last-child { border-bottom: none; }
.activity .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border-2); flex-shrink: 0; margin-top: 5px; }
.activity .dot.letter { background: var(--brand-soft); }
.activity .dot.case { background: var(--good); }
.activity .dot.sm3 { background: var(--gold); }
.activity .act-detail { color: var(--text-dim); flex: 1; }
.activity .act-time { color: var(--text-faint); font-size: 11px; flex-shrink: 0; }

/* ─── MODAL ──────────────────────────────────────── */
.modal-overlay { position: fixed; inset: 0; background: rgba(15,23,42,.45); z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 24px; }
.modal-card { background: var(--surface); border-radius: var(--radius-lg); padding: 28px; max-width: 520px; width: 100%; box-shadow: var(--shadow-lg); max-height: 90vh; overflow-y: auto; }
.modal-card h3 { font-size: 16px; font-weight: 800; margin-bottom: 14px; }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; }

/* ─── EXIT PAGE ──────────────────────────────────── */
.exit-page { max-width: 700px; margin: 0 auto; padding: 40px 20px 80px; }
.exit-letter-box { margin-top: 24px; }
.exit-letter-box + .exit-letter-box { margin-top: 28px; padding-top: 28px; border-top: 1px solid var(--border); }
.exit-letter-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }

/* ─── MISC ───────────────────────────────────────── */
.text-dim { color: var(--text-faint); font-size: 13px; }
.empty-state { text-align: center; padding: 52px 20px; color: var(--text-faint); font-size: 13.5px; }
.empty-state svg { width: 40px; height: 40px; color: var(--border-2); margin: 0 auto 14px; display: block; }
.warning-box { background: rgba(220,38,38,.06); border: 1px solid rgba(220,38,38,.18); border-radius: var(--radius-sm); padding: 12px 14px; font-size: 13px; color: #DC2626; }
.info-box { background: var(--brand-dim); border: 1px solid rgba(79,70,229,.18); border-radius: var(--radius-sm); padding: 12px 14px; font-size: 13px; color: var(--brand); }
.success-box { background: var(--good-dim); border: 1px solid rgba(5,150,105,.2); border-radius: var(--radius-sm); padding: 12px 14px; font-size: 13px; color: var(--good); }
.mono { font-family: var(--font-mono); font-size: 12px; }
.mt-6 { margin-top: 6px; } .mt-12 { margin-top: 12px; } .mt-20 { margin-top: 20px; } .mt-28 { margin-top: 28px; }
.flex { display: flex; } .gap-8 { gap: 8px; } .gap-12 { gap: 12px; } .items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.w-full { width: 100%; }
.font-bold { font-weight: 700; }

/* ════════════════════════════════════════════════
   SM3 OFFBOARDING — Dark sidebar shell (v5)
   ════════════════════════════════════════════════ */
.ob-shell { display: flex; min-height: 100vh; }
.ob-sidebar {
  width: 260px; flex-shrink: 0;
  background: #1E293B;
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  z-index: 10;
}
.ob-sidebar-top { padding: 20px 18px 16px; border-bottom: 1px solid #334155; }
.ob-brand { display: flex; align-items: center; gap: 10px; }
.ob-brand img { height: 28px; width: auto; flex-shrink: 0; filter: brightness(0) invert(1); }
.ob-brand-text { min-width: 0; overflow: hidden; }
.ob-brand-name { font-family: var(--font-display); font-weight: 800; font-size: 13.5px; color: #F1F5F9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; }
.ob-brand-sub { font-family: var(--font-mono); font-size: 9px; text-transform: uppercase; letter-spacing: .12em; color: #64748B; margin-top: 3px; }
.ob-nav { padding: 12px 10px; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.ob-nav-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 8px; font-size: 13px; font-weight: 500; color: #94A3B8; text-decoration: none; transition: all .12s; }
.ob-nav-item:hover { background: #253449; color: #E2E8F0; }
.ob-nav-item.active { background: rgba(79,70,229,0.18); color: #818CF8; font-weight: 700; }
.ob-nav-item svg { width: 16px; height: 16px; flex-shrink: 0; }
.ob-sidebar-footer { padding: 14px 10px; border-top: 1px solid #334155; }
.ob-logout { width: 100%; padding: 8px 12px; background: transparent; border: 1px solid #334155; border-radius: 8px; color: #64748B; font-size: 12.5px; font-family: var(--font-body); cursor: pointer; transition: all .12s; }
.ob-logout:hover { background: rgba(220,38,38,0.12); border-color: rgba(220,38,38,.3); color: #F87171; }
.ob-main { flex: 1; min-width: 0; background: var(--ink); padding: 32px 36px; }
@media (max-width: 860px) {
  .ob-shell { flex-direction: column; }
  .ob-sidebar { width: 100%; height: auto; position: static; flex-direction: row; flex-wrap: wrap; }
  .ob-sidebar-top { flex: 1; min-width: 0; padding: 12px 14px; border-bottom: none; border-right: 1px solid #334155; }
  .ob-nav { flex-direction: row; flex-wrap: wrap; padding: 8px 10px; width: 100%; }
  .ob-nav-item { padding: 7px 10px; font-size: 12.5px; }
  .ob-brand-sub { display: none; }
  .ob-sidebar-footer { padding: 8px 10px; align-self: center; }
  .ob-main { padding: 20px 16px; }
}

/* ── SVG SIZE SAFETY NET — must stay last ──────────────────────────────── */
/* Prevents nav/button SVGs without explicit HTML dimensions from blowing up */
.ob-nav-item svg, .ob-nav-item svg * { width: 16px !important; height: 16px !important; flex-shrink: 0 !important; }
.ob-logout svg { width: 14px !important; height: 14px !important; }
/* Also reset the base .sidebar SVG bleed that comes from SM3 People base CSS */
.ob-sidebar svg { max-width: 16px; max-height: 16px; }
/* The only exceptions: logo img and explicit width/height overrides */
.ob-brand img { max-width: none !important; max-height: none !important; width: auto !important; height: 28px !important; }

/* ── LAYOUT HARD RESET — overrides SM3 base CSS conflicts ─────────────── */
/* The SM3 People base CSS has .sidebar with grid-row/overflow:hidden which
   breaks the offboarding flex layout. These rules must stay at the very end. */
.ob-shell {
  display: flex !important;
  min-height: 100vh !important;
  grid-template-columns: unset !important;
  grid-template-rows: unset !important;
}
.ob-sidebar {
  display: flex !important;
  flex-direction: column !important;
  width: 260px !important;
  flex-shrink: 0 !important;
  background: #1E293B !important;
  position: sticky !important;
  top: 0 !important;
  height: 100vh !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  grid-row: unset !important;
  padding: 0 !important;
  gap: 0 !important;
  border-right: none !important;
  z-index: 10 !important;
}
.ob-main {
  flex: 1 !important;
  min-width: 0 !important;
  background: var(--ink) !important;
  padding: 32px 36px !important;
  display: block !important;
}
.ob-sidebar-top {
  padding: 20px 18px 16px !important;
  border-bottom: 1px solid #334155 !important;
  flex-shrink: 0 !important;
}
.ob-nav {
  padding: 12px 10px !important;
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  overflow-y: auto !important;
}
.ob-sidebar-footer {
  padding: 14px 10px !important;
  border-top: 1px solid #334155 !important;
  flex-shrink: 0 !important;
}
@media (max-width: 860px) {
  .ob-shell { flex-direction: column !important; }
  .ob-sidebar { width: 100% !important; height: auto !important; position: static !important; flex-direction: row !important; flex-wrap: wrap !important; }
  .ob-sidebar-top { flex: 1 !important; min-width: 0 !important; padding: 12px 14px !important; border-bottom: none !important; }
  .ob-nav { flex-direction: row !important; flex-wrap: wrap !important; padding: 6px 10px !important; width: 100% !important; }
  .ob-sidebar-footer { padding: 8px 10px !important; align-self: center !important; }
  .ob-main { padding: 20px 16px !important; }
}
.exit-pending { background: rgba(217,119,6,0.12); color: #D97706; border: 1px solid rgba(217,119,6,0.25); }