/* ============================================================
   PCD Portal — Design System
   Bright, professional, branded to the Precision Cardiovascular
   Diagnostics logo: navy chrome, white surfaces, the red
   heart/EKG mark. SF Pro (system) type · tabular numerals for
   money. Light is the default for everyone; dark is opt-in via
   the header toggle (html[data-theme="dark"], persisted in
   localStorage as pcd_theme).
   ============================================================ */

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

:root {
  /* ---- Brand (from the PCD logo) ---- */
  --pcd-red:       #c23530;   /* heart red */
  --pcd-red-soft:  rgba(194, 53, 48, 0.10);
  --pcd-navy:      #17263e;   /* logo background navy — header & sidebar */
  --pcd-navy-edge: rgba(255, 255, 255, 0.09);

  /* ---- Core palette (light — the default) ---- */
  --bg:            #f5f6f8;
  --surface:       #ffffff;
  --surface-2:     #fafbfc;
  --surface-3:     #eff1f4;
  --border:        rgba(23, 38, 62, 0.10);
  --border-strong: rgba(23, 38, 62, 0.18);

  --text-primary:   #16212f;
  --text-secondary: #4d5866;
  --text-muted:     #8391a2;
  --text-invert:    #f5f6f8;

  --accent:        #1d5cad;
  --accent-hover:  #164a8e;
  --accent-soft:   rgba(29, 92, 173, 0.10);
  --accent-ring:   rgba(29, 92, 173, 0.28);

  --success:       #1d8a3e;
  --success-soft:  rgba(52, 199, 89, 0.14);
  --warning:       #b25e00;
  --warning-soft:  rgba(255, 159, 10, 0.16);
  --danger:        #d70015;
  --danger-soft:   rgba(255, 59, 48, 0.12);

  /* Chrome (header + admin sidebar) — brand navy in both themes */
  --sidebar-bg:     var(--pcd-navy);
  --sidebar-text:   rgba(255, 255, 255, 0.62);
  --sidebar-hover:  rgba(255, 255, 255, 0.07);
  --sidebar-active: rgba(255, 255, 255, 0.12);

  --radius:    10px;
  --radius-lg: 14px;
  --shadow:    0 1px 2px rgba(0,0,0,0.04), 0 1px 6px rgba(0,0,0,0.03);
  --shadow-md: 0 2px 8px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.04);
  --shadow-lg: 0 16px 48px rgba(0,0,0,0.16), 0 4px 12px rgba(0,0,0,0.08);

  /* ---- Legacy aliases (older markup references these) ---- */
  --navy:        #16212f;
  --navy-mid:    #17263e;
  --navy-light:  #2c3a52;
  --teal:        var(--accent);
  --teal-dark:   var(--accent-hover);
  --teal-glow:   var(--accent-ring);
  --white:       var(--surface);
  --gray-50:     var(--surface-2);
  --gray-100:    var(--surface-3);
  --gray-200:    var(--border);
  --gray-300:    var(--border-strong);
  --gray-500:    var(--text-muted);
  --gray-700:    var(--text-secondary);
  --text:        var(--text-primary);
  --success-bg:  var(--success-soft);
  --warning-bg:  var(--warning-soft);
  --danger-bg:   var(--danger-soft);
}

/* Dark theme — opt-in via the header toggle, never automatic. */
:root[data-theme="dark"] {
  --bg:            #131a24;
  --surface:       #1a2330;
  --surface-2:     #202a39;
  --surface-3:     #263143;
  --border:        rgba(255, 255, 255, 0.09);
  --border-strong: rgba(255, 255, 255, 0.16);

  --text-primary:   #f2f5f9;
  --text-secondary: #b3bdc9;
  --text-muted:     #8391a2;
  --text-invert:    #16212f;

  --accent:        #4d8fe0;
  --accent-hover:  #6ba3e8;
  --accent-soft:   rgba(77, 143, 224, 0.16);
  --accent-ring:   rgba(77, 143, 224, 0.35);

  --success:       #4cd964;
  --success-soft:  rgba(52, 199, 89, 0.18);
  --warning:       #ffb340;
  --warning-soft:  rgba(255, 159, 10, 0.18);
  --danger:        #ff6961;
  --danger-soft:   rgba(255, 69, 58, 0.18);

  --pcd-navy:      #101a29;

  --navy:       #f2f5f9;
  --navy-mid:   #101a29;
  --navy-light: #334157;

  --shadow:    0 1px 2px rgba(0,0,0,0.4);
  --shadow-md: 0 2px 8px rgba(0,0,0,0.5);
  --shadow-lg: 0 16px 48px rgba(0,0,0,0.6);
}

/* ============================================================
   BASE
   ============================================================ */
html { -webkit-text-size-adjust: 100%; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
  background: var(--bg);
  color: var(--text-primary);
  line-height: 1.47;
  min-height: 100vh;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection { background: var(--accent-soft); }

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
h1, h2, h3, h4 { font-weight: 600; line-height: 1.25; letter-spacing: -0.015em; color: var(--text-primary); }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.35rem; }
h3 { font-size: 1rem; }
h4 { font-size: 0.875rem; }

.section-label {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
}

.num, .font-mono {
  font-variant-numeric: tabular-nums;
  font-family: inherit;
  letter-spacing: 0;
}

/* ============================================================
   ICONS — inline SVG helpers (replaces all emoji glyphs)
   ============================================================ */
.icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -0.15em;
}
.icon-sm { width: 13px; height: 13px; }
.icon-lg { width: 20px; height: 20px; }

/* ============================================================
   LOGIN PAGE
   ============================================================ */
.login-page {
  min-height: 100vh;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.login-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 2.75rem 2.5rem;
  width: 100%;
  max-width: 400px;
}

.login-logo { text-align: center; margin-bottom: 2rem; }

.login-logo .logo-icon {
  width: 56px;
  height: 56px;
  background: var(--pcd-red);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.25rem;
}

.login-logo .logo-icon svg { width: 30px; height: 30px; fill: #ffffff; }

/* Company name leads, product name is the eyebrow beneath it. Sign-in is the
   one screen with room to give the full name real presence, and it is the first
   thing staff see. Mirrors the header lockup so the two read as one system. */
.login-logo h1 {
  font-size: 1.18rem;
  font-weight: 620;
  letter-spacing: -0.022em;
  line-height: 1.25;
  text-wrap: balance;   /* avoids a lone trailing word when the name wraps */
}

.login-logo p {
  color: var(--text-muted);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-top: 0.5rem;
}

/* ============================================================
   FORMS
   ============================================================ */
.form-group { margin-bottom: 1.15rem; }

.form-group label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: 0.4rem;
}

.form-group input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.form-group select,
.form-group textarea,
input.field, select.field, textarea.field {
  width: 100%;
  padding: 0.55rem 0.8rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  font-size: 0.9rem;
  font-family: inherit;
  color: var(--text-primary);
  background: var(--surface);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  appearance: none;
  -webkit-appearance: none;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus,
input.field:focus, select.field:focus, textarea.field:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3.5px var(--accent-ring);
}

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

.form-group select, select.field {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2386868b'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.7rem center;
  background-size: 0.9rem;
  padding-right: 2.3rem;
}

input[type="date"], input[type="month"], input[type="time"] {
  color-scheme: light;
}
:root[data-theme="dark"] input[type="date"],
:root[data-theme="dark"] input[type="month"],
:root[data-theme="dark"] input[type="time"] { color-scheme: dark; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.5rem 1rem;
  border-radius: var(--radius);
  font-size: 0.85rem;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
  text-decoration: none;
  white-space: nowrap;
  line-height: 1.3;
}

.btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Primary — the one filled button per view */
.btn-primary, .btn-teal {
  background: var(--accent);
  color: #ffffff;
  font-weight: 500;
}
.btn-primary:hover:not(:disabled), .btn-teal:hover:not(:disabled) { background: var(--accent-hover); }

/* Quiet default */
.btn-outline {
  background: var(--surface);
  color: var(--text-primary);
  border-color: var(--border-strong);
}
.btn-outline:hover:not(:disabled) { background: var(--surface-3); }

/* Semantic — tinted, no borders */
.btn-danger {
  background: var(--danger-soft);
  color: var(--danger);
}
.btn-danger:hover:not(:disabled) { background: var(--danger); color: #fff; }

.btn-success {
  background: var(--success-soft);
  color: var(--success);
}
.btn-success:hover:not(:disabled) { background: var(--success); color: #fff; }

/* Ghost — text-only */
.btn-ghost {
  background: transparent;
  color: var(--text-secondary);
}
.btn-ghost:hover:not(:disabled) { background: var(--surface-3); color: var(--text-primary); }

.btn-sm { padding: 0.32rem 0.65rem; font-size: 0.78rem; border-radius: 8px; }
.btn-lg { padding: 0.7rem 1.5rem; font-size: 0.95rem; width: 100%; justify-content: center; }

/* ============================================================
   BADGES / STATUS PILLS
   ============================================================ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.18rem 0.55rem;
  border-radius: 99px;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: capitalize;
  letter-spacing: 0.01em;
}

.badge::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}

.badge-pending  { background: var(--warning-soft); color: var(--warning); }
.badge-approved { background: var(--success-soft); color: var(--success); }
.badge-rejected { background: var(--danger-soft);  color: var(--danger); }
.badge-open     { background: var(--accent-soft);  color: var(--accent); }
.badge-closed   { background: var(--surface-3);    color: var(--text-muted); }

/* ============================================================
   TABLES
   ============================================================ */
.table-wrapper {
  overflow-x: auto;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
}

table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  font-size: 0.85rem;
}

thead th {
  background: var(--surface);
  color: var(--text-muted);
  padding: 0.6rem 1rem;
  text-align: left;
  font-weight: 600;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
  border-bottom: 1px solid var(--border);
}

tbody tr {
  border-bottom: 1px solid var(--border);
  transition: background 0.12s ease;
}
tbody tr:last-child { border-bottom: none; }
tbody tr:hover { background: var(--surface-2); }

tbody td {
  padding: 0.7rem 1rem;
  color: var(--text-primary);
  vertical-align: middle;
}

td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

.table-empty {
  text-align: center;
  padding: 2.5rem !important;
  color: var(--text-muted);
  font-style: normal;
  font-size: 0.85rem;
}

/* ============================================================
   CARDS & PANELS
   ============================================================ */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 1.4rem 1.5rem;
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1.1rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--border);
}

.card-header h2, .card-header h3 { color: var(--text-primary); }

/* ============================================================
   STAT / KPI CARDS
   ============================================================ */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.9rem;
  margin-bottom: 1.4rem;
}

.stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.1rem 1.3rem;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.stat-card .stat-label {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.stat-card .stat-value {
  font-size: 1.7rem;
  font-weight: 650;
  color: var(--text-primary);
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.stat-card .stat-sub { font-size: 0.78rem; color: var(--text-muted); }

.stat-card.stat-accent .stat-value { color: var(--accent); }

/* ============================================================
   HEADER
   ============================================================ */
.app-header {
  background: var(--sidebar-bg);
  color: var(--text-invert);
  padding: 0 1.4rem;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.app-header .logo {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: -0.01em;
  color: #f5f5f7;
  text-decoration: none;
}

.app-header .logo .logo-dot {
  width: 28px;
  height: 28px;
  background: var(--pcd-red);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.app-header .logo .logo-dot svg { width: 15px; height: 15px; fill: #f5f5f7; }

/* Brand lockup — company name over the portal it belongs to.
   The company name is the constant across every page; the second line is what
   changes (Admin / Payroll Portal / Schedule Manager), so staff can still tell
   at a glance which portal they are in. min-width:0 is load-bearing: without it
   the flex item refuses to shrink and a long name pushes the sign-out button
   off the right edge instead of truncating. */
.app-header .logo .brand {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  gap: 1px;
}

.app-header .logo .brand-name {
  font-weight: 600;
  font-size: 0.86rem;
  letter-spacing: -0.006em;
  line-height: 1.15;
  color: #f5f6f8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.app-header .logo .brand-role {
  font-size: 0.6rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  line-height: 1.2;
  color: rgba(255, 255, 255, 0.5);
  white-space: nowrap;
}

.app-header .header-right { display: flex; align-items: center; gap: 0.9rem; flex-shrink: 0; }

/* Sun/moon theme toggle — lives in the navy header on every page. */
.theme-toggle {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.22);
  background: transparent;
  color: rgba(255,255,255,0.85);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease;
  padding: 0;
}
.theme-toggle:hover { background: rgba(255,255,255,0.1); }
.theme-toggle svg { width: 15px; height: 15px; }
.theme-toggle .icon-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: block; }

.app-header .user-name { font-size: 0.82rem; color: rgba(255,255,255,0.6); }

.app-header .btn-outline {
  color: rgba(255,255,255,0.85);
  border-color: rgba(255,255,255,0.25);
  background: transparent;
}
.app-header .btn-outline:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.4);
  color: #fff;
}

/* ============================================================
   TABS
   ============================================================ */
.tabs {
  display: flex;
  gap: 0.15rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 1.4rem;
}

.tab-btn {
  padding: 0.6rem 1rem;
  font-size: 0.85rem;
  font-weight: 500;
  font-family: inherit;
  color: var(--text-muted);
  background: transparent;
  border: none;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.15s ease;
}

.tab-btn:hover { color: var(--text-primary); }
.tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }

.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* ============================================================
   ADMIN LAYOUT (sidebar)
   ============================================================ */
.admin-layout { display: flex; min-height: calc(100vh - 56px); }

.sidebar {
  width: 216px;
  background: var(--sidebar-bg);
  flex-shrink: 0;
  padding: 0.9rem 0.6rem 1.25rem;
  position: sticky;
  top: 56px;
  height: calc(100vh - 56px);
  overflow-y: auto;
}

.sidebar-group-label {
  font-size: 0.62rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: rgba(255, 255, 255, 0.32);
  padding: 1.1rem 0.7rem 0.35rem;
  user-select: none;
}
.sidebar-group-label:first-child { padding-top: 0.25rem; }

.sidebar-item {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.52rem 0.7rem;
  color: var(--sidebar-text);
  cursor: pointer;
  font-size: 0.84rem;
  font-weight: 500;
  transition: background 0.13s ease, color 0.13s ease;
  border-radius: 8px;
  text-decoration: none;
  margin-bottom: 1px;
}

.sidebar-item:hover { color: #fff; background: var(--sidebar-hover); }

.sidebar-item.active {
  color: #fff;
  background: var(--sidebar-active);
  box-shadow: inset 3px 0 0 var(--pcd-red);
}

.sidebar-item svg { width: 16px; height: 16px; flex-shrink: 0; opacity: 0.75; }
.sidebar-item.active svg { opacity: 1; }

.main-content { flex: 1; padding: 1.6rem 1.9rem; min-width: 0; }

/* ============================================================
   MODAL
   ============================================================ */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  backdrop-filter: saturate(140%) blur(12px);
  z-index: 200;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.modal-overlay.active { display: flex; animation: overlayIn 0.18s ease; }

@keyframes overlayIn { from { opacity: 0; } to { opacity: 1; } }

.modal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 500px;
  max-height: 90vh;
  overflow-y: auto;
  animation: modalIn 0.2s cubic-bezier(0.2, 0.9, 0.3, 1);
}

@keyframes modalIn {
  from { opacity: 0; transform: scale(0.97) translateY(6px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem 1.4rem;
  border-bottom: 1px solid var(--border);
}

.modal-header h3 { color: var(--text-primary); }

.modal-close {
  background: var(--surface-3);
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  transition: background 0.13s ease, color 0.13s ease;
}
.modal-close:hover { background: var(--border-strong); color: var(--text-primary); }

.modal-body { padding: 1.4rem; }

.modal-footer {
  display: flex;
  gap: 0.6rem;
  justify-content: flex-end;
  padding: 1rem 1.4rem;
  border-top: 1px solid var(--border);
}

/* ============================================================
   TOASTS
   ============================================================ */
#toast-container {
  position: fixed;
  bottom: 1.4rem;
  right: 1.4rem;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.toast {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.8rem 1.1rem;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-primary);
  font-size: 0.84rem;
  font-weight: 500;
  box-shadow: var(--shadow-lg);
  min-width: 260px;
  max-width: 400px;
  animation: toastIn 0.22s cubic-bezier(0.2, 0.9, 0.3, 1);
}

.toast::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}

.toast.success::before { background: var(--success); }
.toast.error::before   { background: var(--danger); }
.toast.warning::before { background: var(--warning); }

.toast .toast-action {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--accent);
  font-weight: 600;
  font-size: 0.8rem;
  font-family: inherit;
  cursor: pointer;
  padding: 0.2rem 0.4rem;
  border-radius: 6px;
}
.toast .toast-action:hover { background: var(--accent-soft); }

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

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

.toast.removing { animation: fadeOut 0.25s ease forwards; }

/* ============================================================
   LOADING — spinner + skeletons
   ============================================================ */
.spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid var(--border-strong);
  border-top-color: var(--text-secondary);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

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

.loading-overlay {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem;
  color: var(--text-muted);
  gap: 0.7rem;
  font-size: 0.85rem;
}

.skeleton {
  position: relative;
  overflow: hidden;
  background: var(--surface-3);
  border-radius: 6px;
  min-height: 0.9em;
}
.skeleton::after {
  content: '';
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
  animation: shimmer 1.4s infinite;
}
@media (prefers-color-scheme: dark) {
  .skeleton::after {
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent);
  }
}
@keyframes shimmer { 100% { transform: translateX(100%); } }

.skeleton-row { display: flex; gap: 0.8rem; padding: 0.7rem 1rem; align-items: center; }
.skeleton-row .skeleton { height: 0.8rem; flex: 1; }
.skeleton-row .skeleton:first-child { flex: 0 0 18%; }
.skeleton-row .skeleton:last-child  { flex: 0 0 10%; }

/* ============================================================
   FILTERS ROW
   ============================================================ */
.filters-row {
  display: flex;
  gap: 0.7rem;
  flex-wrap: wrap;
  align-items: flex-end;
  margin-bottom: 1rem;
  padding: 0.9rem 1rem;
  background: var(--surface);
  border-radius: var(--radius);
  border: 1px solid var(--border);
}

.filters-row .form-group { margin-bottom: 0; min-width: 150px; }
.filters-row .form-group label { font-size: 0.72rem; }

/* ============================================================
   PAY PREVIEW
   ============================================================ */
.pay-preview {
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-primary);
  border-radius: var(--radius);
  padding: 0.9rem 1.15rem;
  margin: 1rem 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pay-preview .pay-label { font-size: 0.8rem; color: var(--text-muted); }
.pay-preview .pay-value {
  font-size: 1.45rem;
  font-weight: 650;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

/* ============================================================
   UTILITIES
   ============================================================ */
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-muted { color: var(--text-muted); font-size: 0.85rem; }
.text-navy { color: var(--text-primary); }
.text-teal { color: var(--accent); }
.text-success { color: var(--success); }
.text-danger { color: var(--danger); }
.font-bold { font-weight: 650; }
.mt-1 { margin-top: 0.5rem; } .mt-2 { margin-top: 1rem; } .mt-3 { margin-top: 1.5rem; }
.mb-1 { margin-bottom: 0.5rem; } .mb-2 { margin-bottom: 1rem; } .mb-3 { margin-bottom: 1.5rem; }
.flex { display: flex; } .items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-1 { gap: 0.5rem; } .gap-2 { gap: 1rem; }
.hidden { display: none !important; }

/* ============================================================
   EMPLOYEE LAYOUT
   ============================================================ */
.employee-container { max-width: 960px; margin: 0 auto; padding: 1.6rem 1rem; }

.payroll-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.9rem;
  margin-bottom: 1.4rem;
}

.payroll-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.15rem;
  box-shadow: var(--shadow);
  text-align: center;
}

.payroll-card h4 {
  color: var(--text-muted);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: 0.4rem;
  font-weight: 600;
}
.payroll-card .value {
  font-size: 1.75rem;
  font-weight: 650;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.payroll-card .value.money { color: var(--success); }

/* ============================================================
   REPORTS
   ============================================================ */
.report-employee-section { margin-bottom: 1.4rem; }

.report-employee-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.7rem 1rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-bottom: none;
  color: var(--text-primary);
  font-weight: 600;
  border-radius: var(--radius) var(--radius) 0 0;
}

.report-employee-footer {
  display: flex;
  justify-content: flex-end;
  padding: 0.55rem 1rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 var(--radius) var(--radius);
  font-weight: 600;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   STUDY CHECKLIST
   ============================================================ */
.study-checklist {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.5rem;
  background: var(--surface);
  max-height: 340px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.study-check-group { display: flex; flex-direction: column; }

.study-check-category {
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  padding: 0.35rem 0.4rem 0.2rem;
  border-bottom: 1px solid var(--border);
}

.study-check-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.4rem;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.84rem;
  color: var(--text-secondary);
  transition: background 0.13s ease;
}
.study-check-item:hover { background: var(--surface-2); color: var(--text-primary); }

.study-check-item input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 17px;
  height: 17px;
  border: 1.5px solid var(--border-strong);
  border-radius: 5px;
  background: var(--surface);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.13s ease, border-color 0.13s ease;
  position: relative;
}
.study-check-item input[type="checkbox"]:checked {
  background: var(--accent);
  border-color: var(--accent);
}
.study-check-item input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 4.5px;
  top: 1.5px;
  width: 4.5px;
  height: 8.5px;
  border: 1.8px solid #fff;
  border-top: none;
  border-left: none;
  transform: rotate(45deg);
}
.study-check-item:has(input:checked) {
  color: var(--text-primary);
  font-weight: 500;
  background: var(--accent-soft);
}

/* ============================================================
   SCHEDULE GRIDS
   ============================================================ */
.schedule-grid { display: grid; grid-template-columns: 160px repeat(7, 1fr); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.schedule-grid-header { background: var(--surface-2); color: var(--text-muted); padding: 0.5rem; font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; text-align: center; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.schedule-grid-emp { padding: 0.5rem 0.75rem; font-size: 0.83rem; font-weight: 500; border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); background: var(--surface-2); display: flex; align-items: flex-start; min-height: 60px; }
.schedule-cell { padding: 0.25rem; border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); min-height: 60px; background: var(--surface); }

.shift-pill { display: flex; flex-direction: column; padding: 0.22rem 0.45rem; border-radius: 6px; font-size: 0.72rem; cursor: pointer; margin-bottom: 2px; position: relative; }
.shift-pill.regular { background: var(--accent-soft); color: var(--accent); }
.shift-pill.extra   { background: var(--warning-soft); color: var(--warning); }
.shift-pill:hover { filter: brightness(0.96); }
.shift-pill .shift-actions { display: none; position: absolute; top: 100%; left: 0; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; box-shadow: var(--shadow-md); padding: 0.25rem; z-index: 50; gap: 0.25rem; }
.shift-pill:hover .shift-actions { display: flex; }

.emp-schedule-grid { display: grid; grid-template-columns: repeat(7, 1fr); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.emp-schedule-header { background: var(--surface-2); color: var(--text-muted); padding: 0.5rem; font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; text-align: center; border-bottom: 1px solid var(--border); }
.emp-schedule-header.today-header { color: var(--accent); box-shadow: inset 0 -2px 0 var(--accent); }
.today-num { color: var(--accent) !important; font-weight: 700 !important; }
.emp-schedule-cell { padding: 0.375rem; border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); min-height: 70px; background: var(--surface); }
.emp-schedule-cell:nth-child(7n) { border-right: none; }
.emp-schedule-cell .cell-date { font-size: 0.72rem; font-weight: 600; color: var(--text-muted); margin-bottom: 0.25rem; font-variant-numeric: tabular-nums; }
.emp-schedule-cell.today { background: var(--accent-soft); }
.emp-schedule-cell.other-month { opacity: 0.4; }

.month-grid { display: grid; grid-template-columns: repeat(7, 1fr); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.month-cell { padding: 0.25rem; border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); min-height: 50px; background: var(--surface); font-size: 0.75rem; }
.month-cell:nth-child(7n) { border-right: none; }
.month-cell .cell-day { font-weight: 600; color: var(--text-muted); margin-bottom: 2px; font-variant-numeric: tabular-nums; }
.month-cell.today { background: var(--accent-soft); }
.month-cell.other-month { opacity: 0.35; }
.month-cell .extra-dot { display: inline-block; width: 6px; height: 6px; background: var(--warning); border-radius: 50%; margin-right: 2px; }
.month-cell .regular-dot { display: inline-block; width: 6px; height: 6px; background: var(--accent); border-radius: 50%; margin-right: 2px; }

/* ============================================================
   TOGGLE SWITCH
   ============================================================ */
.toggle-switch { display: flex; align-items: center; gap: 0.7rem; cursor: pointer; }
.toggle-switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.toggle-slider { position: relative; display: inline-block; width: 42px; height: 25px; background: var(--border-strong); border-radius: 13px; transition: background 0.18s ease; flex-shrink: 0; }
.toggle-slider::before { content: ''; position: absolute; width: 21px; height: 21px; left: 2px; top: 2px; background: #fff; border-radius: 50%; transition: transform 0.18s ease; box-shadow: 0 1px 3px rgba(0,0,0,0.25); }
.toggle-switch input:checked + .toggle-slider { background: var(--success); }
.toggle-switch input:checked + .toggle-slider::before { transform: translateX(17px); }
.toggle-label { font-size: 0.84rem; color: var(--text-secondary); font-weight: 500; }

/* ============================================================
   SCHEDULE CHIPS & MONTH GRID (admin)
   ============================================================ */
.schedule-chip { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.16rem 0.45rem; border-radius: 6px; font-size: 0.72rem; font-weight: 500; cursor: pointer; margin: 1px; max-width: 100%; overflow: hidden; white-space: nowrap; }
.schedule-chip.regular { background: var(--accent-soft); color: var(--accent); }
.schedule-chip.extra   { background: var(--warning-soft); color: var(--warning); }

.month-grid-cell { min-height: 80px; padding: 0.25rem; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); cursor: pointer; transition: background 0.13s ease; vertical-align: top; }
.month-grid-cell:hover { background: var(--surface-2); }
.month-grid-cell.today { background: var(--accent-soft); }
.month-grid-cell.other-month { opacity: 0.4; }
.month-day-num { font-size: 0.72rem; font-weight: 600; margin-bottom: 0.2rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.month-day-num.today-num { color: var(--accent); font-weight: 700; }

.admin-week-grid { display: grid; grid-template-columns: 160px repeat(7, 1fr); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.admin-week-header { background: var(--surface-2); color: var(--text-muted); padding: 0.5rem; font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; text-align: center; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.admin-week-emp { padding: 0.5rem 0.75rem; font-size: 0.83rem; font-weight: 500; border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); background: var(--surface-2); display: flex; align-items: flex-start; min-height: 60px; }
.admin-week-cell { padding: 0.25rem; border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); min-height: 60px; background: var(--surface); }
.admin-week-cell.today { background: var(--accent-soft); }

.copy-week-panel { display: none; align-items: center; gap: 0.7rem; padding: 0.75rem 1rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 1rem; flex-wrap: wrap; }
.copy-week-panel.visible { display: flex; }

/* ============================================================
   APPROVALS QUEUE
   ============================================================ */
/* The queue is a review surface, not a report: an admin sits in it and clears
   80+ rows in one pass. Everything below is tuned for scanning speed.

   The old layout was a flex row with flex:1 on the patient name and
   margin-left:auto on the amount, so on a wide monitor the two halves flew
   apart and left a canyon of dead space in the middle. Fixed grid tracks plus a
   capped width keep the columns adjacent no matter how wide the window is —
   that single change is most of the fix. */
.approvals-wrap {
  /* select | facility | patient | study type | amount | actions.
     No date column: rows are grouped under a sticky date sub-header, so
     printing the date 80 times per employee is pure noise. */
  /* Every track is capped. A 1fr patient column looked right in the
     inspector but re-created the original problem visually: on a wide
     monitor the cell grew to 600px and short names left the same gulf
     before the study type. Capped tracks left-pack the row and push the
     slack to the far right, where it reads as margin instead of a hole. */
  --appr-cols: 24px 84px minmax(150px, 340px) minmax(110px, 240px) 70px 76px;
  --appr-row-h: 30px;
  --appr-font: 0.78rem;
  --appr-sticky-top: 56px;          /* clears the sticky app header */
  /* Three sticky layers stack on top of each other, so their heights have to
     be known values rather than whatever padding happens to produce. Hard-
     coding a guess here is exactly how the date row ended up pinned behind
     the group header. */
  --appr-colhdr-h: 26px;
  --appr-grouphdr-h: 40px;
  max-width: 1180px;                /* stop columns spreading on wide screens */
}
.approvals-wrap[data-density="comfortable"] {
  --appr-row-h: 40px;
  --appr-font: 0.84rem;
}

.approval-columns,
.approval-row {
  display: grid;
  grid-template-columns: var(--appr-cols);
  align-items: center;
  gap: 0 0.7rem;
  padding: 0 0.7rem;
}

/* One set of column labels for the whole queue rather than per group — the
   labels are worth ~18px once, not once per employee. */
.approval-columns {
  position: sticky;
  top: var(--appr-sticky-top);
  z-index: 4;
  height: var(--appr-colhdr-h);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  font-size: 0.62rem;
  font-weight: 650;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.approval-columns .col-amt { text-align: right; }

.approval-group {
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: none;
  overflow: visible;               /* sticky children need a non-clipping parent */
}
.approval-group:last-child { border-radius: 0 0 var(--radius-lg) var(--radius-lg); }

.approval-group-header {
  position: sticky;
  top: calc(var(--appr-sticky-top) + var(--appr-colhdr-h));
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  height: var(--appr-grouphdr-h);
  padding: 0 0.7rem;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  border-top: 1px solid var(--border);
}

.approval-group-header .avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.62rem;
  font-weight: 650;
  flex-shrink: 0;
}

.approval-group-header .group-name { font-weight: 620; font-size: 0.82rem; }
.approval-group-header .group-meta { font-size: 0.72rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.approval-group-header .group-actions { margin-left: auto; display: flex; gap: 0.35rem; align-items: center; }

/* Collapse control — a 24px hit area around a 10px chevron, so the row stays
   dense without dropping under the WCAG 2.2 target-size floor. */
.group-toggle {
  width: 24px; height: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; background: none; cursor: pointer;
  color: var(--text-muted); flex-shrink: 0; border-radius: 5px;
}
.group-toggle:hover { background: var(--border); color: var(--text-primary); }
.group-toggle svg { width: 11px; height: 11px; transition: transform 0.15s ease; }
.approval-group.collapsed .group-toggle svg { transform: rotate(-90deg); }
.approval-group.collapsed .approval-row,
.approval-group.collapsed .approval-daterow { display: none; }

/* Date sub-header. One employee can have 80 studies across a dozen days, and
   repeating the date on every row is the single biggest source of visual
   noise. Print it once per day and let the rows inherit it. */
.approval-daterow {
  position: sticky;
  top: calc(var(--appr-sticky-top) + var(--appr-colhdr-h) + var(--appr-grouphdr-h));
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  height: 22px;
  padding: 0 0.7rem;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  font-size: 0.66rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.approval-daterow .daterow-count { font-weight: 500; opacity: 0.8; }

.approval-row {
  min-height: var(--appr-row-h);
  border-bottom: 1px solid var(--border);
  font-size: var(--appr-font);
  transition: background 0.1s ease;
  cursor: default;
}
.approval-row:last-child { border-bottom: none; }
.approval-row:hover { background: var(--surface-2); }
.approval-row.kbd-focus {
  background: var(--accent-soft);
  box-shadow: inset 2.5px 0 0 var(--accent);
}
.approval-row.selected { background: var(--accent-soft); }
.approval-row.row-leaving { opacity: 0.35; }

.approval-row .cell-date { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.approval-row .cell-fac  { color: var(--text-secondary); }
.approval-row .cell-pat  { font-weight: 550; }
.approval-row .cell-type { color: var(--text-secondary); }
.approval-row .cell-amt  { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.approval-row .cell-date,
.approval-row .cell-fac,
.approval-row .cell-pat,
.approval-row .cell-type {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Row actions: 88 rows × 2 always-on buttons is 176 competing targets. Reveal
   them on hover or keyboard focus instead. Touch devices get them permanently
   (see the hover media query below) because there is no hover to reveal with. */
.approval-row .row-actions {
  display: flex; gap: 0.2rem; justify-content: flex-end;
}
.approval-row .row-actions .icon-btn {
  width: 24px; height: 24px;      /* WCAG 2.2 minimum target size */
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 5px; border: 1px solid transparent;
  background: transparent; cursor: pointer; padding: 0;
  color: var(--text-muted);
}
.approval-row .row-actions .icon-btn svg { width: 13px; height: 13px; }
/* Once the row is hovered the icons are the point of the row — muted grey is
   too quiet to read as actionable, so lift them to secondary text weight. */
.approval-row:hover .row-actions .icon-btn,
.approval-row.kbd-focus .row-actions .icon-btn { color: var(--text-secondary); }
.approval-row .row-actions .act-approve:hover { background: var(--success-soft); color: var(--success); }
.approval-row .row-actions .act-reject:hover  { background: var(--pcd-red-soft); color: var(--pcd-red); }

@media (hover: hover) {
  .approval-row .row-actions { opacity: 0; transition: opacity 0.1s ease; }
  .approval-row:hover .row-actions,
  .approval-row.kbd-focus .row-actions,
  .approval-row:focus-within .row-actions { opacity: 1; }
}

/* Selection checkbox — same 24px hit area trick as the collapse control.
   The label, not the 13px input, is the hit target: 24x24 is the WCAG 2.2
   floor, and a bare checkbox in a 30px row lands well under it. */
.appr-check {
  width: 24px; height: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.appr-check input { width: 13px; height: 13px; cursor: pointer; accent-color: var(--accent); margin: 0; }

/* Floating bulk bar — appears only with a selection, so it costs nothing at rest. */
.appr-bulkbar {
  position: sticky;
  bottom: 0.9rem;
  z-index: 6;
  margin: 0.9rem auto 0;
  max-width: 620px;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.5rem 0.6rem 0.5rem 0.95rem;
  background: var(--pcd-navy);
  color: #f5f6f8;
  border-radius: 10px;
  box-shadow: 0 8px 26px rgba(0,0,0,0.28);
  font-size: 0.8rem;
}
.appr-bulkbar .bb-count { font-weight: 650; font-variant-numeric: tabular-nums; }
.appr-bulkbar .bb-spacer { margin-left: auto; }
.appr-bulkbar .btn { padding: 0.28rem 0.7rem; font-size: 0.76rem; }
.appr-bulkbar .bb-clear {
  background: none; border: none; color: rgba(255,255,255,0.65);
  cursor: pointer; font-size: 0.76rem; padding: 0.28rem 0.4rem;
}
.appr-bulkbar .bb-clear:hover { color: #fff; }

/* Density switch */
.density-switch { display: inline-flex; border: 1px solid var(--border-strong); border-radius: 7px; overflow: hidden; }
.density-switch button {
  border: none; background: var(--surface); color: var(--text-muted);
  font-size: 0.7rem; font-weight: 600; padding: 0.26rem 0.55rem; cursor: pointer;
  min-height: 24px;
}
.density-switch button[aria-pressed="true"] { background: var(--accent); color: #fff; }

@media (max-width: 900px) {
  /* Study type is the first thing to go — it is the least load-bearing column
     for deciding approve/reject, and dropping it keeps patient names intact. */
  .approvals-wrap { --appr-cols: 24px 76px minmax(120px, 1fr) 66px 76px; }
  .approval-columns .col-type,
  .approval-row .cell-type { display: none; }
}
@media (max-width: 620px) {
  .approvals-wrap { --appr-cols: 24px minmax(110px, 1fr) 64px 76px; }
  .approval-columns .col-fac,
  .approval-row .cell-fac { display: none; }
}

.kbd {
  display: inline-block;
  padding: 0.06rem 0.38rem;
  border: 1px solid var(--border-strong);
  border-bottom-width: 2px;
  border-radius: 5px;
  background: var(--surface-2);
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-secondary);
  font-family: inherit;
}

/* ============================================================
   COMMAND PALETTE (⌘K)
   ============================================================ */
.cmdk-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  z-index: 300;
  align-items: flex-start;
  justify-content: center;
  padding-top: 14vh;
}
.cmdk-overlay.active { display: flex; animation: overlayIn 0.15s ease; }

.cmdk {
  width: 100%;
  max-width: 560px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  animation: modalIn 0.18s cubic-bezier(0.2, 0.9, 0.3, 1);
}

.cmdk input {
  width: 100%;
  padding: 1rem 1.2rem;
  border: none;
  outline: none;
  font-size: 1rem;
  font-family: inherit;
  background: transparent;
  color: var(--text-primary);
  border-bottom: 1px solid var(--border);
}
.cmdk input::placeholder { color: var(--text-muted); }

.cmdk-results { max-height: 46vh; overflow-y: auto; padding: 0.4rem; }

.cmdk-group-label {
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  padding: 0.55rem 0.8rem 0.25rem;
}

.cmdk-item {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.55rem 0.8rem;
  border-radius: 9px;
  cursor: pointer;
  font-size: 0.88rem;
  color: var(--text-primary);
}
.cmdk-item .cmdk-meta { margin-left: auto; font-size: 0.75rem; color: var(--text-muted); }
.cmdk-item.selected { background: var(--accent); color: #fff; }
.cmdk-item.selected .cmdk-meta { color: rgba(255,255,255,0.7); }
.cmdk-item svg { width: 15px; height: 15px; opacity: 0.7; }

.cmdk-empty { padding: 2rem; text-align: center; color: var(--text-muted); font-size: 0.85rem; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
  .admin-layout { flex-direction: column; }
  .sidebar { width: 100%; height: auto; position: static; display: flex; overflow-x: auto; padding: 0.4rem 0.5rem; gap: 0.15rem; }
  .sidebar-group-label { display: none; }
  .sidebar-item { padding: 0.5rem 0.8rem; white-space: nowrap; }
  .main-content { padding: 1rem; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .filters-row { gap: 0.5rem; }
  .filters-row .form-group { min-width: 130px; }
  .app-header .user-name { display: none; }
}

/* Phones: the full company name matters more than the portal label, so let the
   name wrap onto two lines and drop the role. Two lines at this size total
   ~27px, which still clears the 56px bar. Truncating the company name to
   "Precision Cardiovas…" would defeat the point of showing it. */
@media (max-width: 640px) {
  .app-header { padding: 0 0.85rem; }
  .app-header .header-right { gap: 0.55rem; }
  .app-header .logo { gap: 0.5rem; }
  .app-header .logo .brand-name {
    font-size: 0.72rem;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .app-header .logo .brand-role { display: none; }
}

/* Very small phones (SE-class, 320–400px). The employee header carries an extra
   notification bell, which costs it exactly the width that made the company
   name fit — it truncated to "Precision Cardiovascular…". Rather than shrink
   the name into illegibility, buy the width back: the sign-out button drops its
   label for an icon. aria-label on the button keeps it announced either way. */
.sign-out-icon { display: none; }

@media (max-width: 400px) {
  .app-header .btn-sm.sign-out { padding: 0.34rem 0.42rem; }
  .sign-out-label { display: none; }
  .sign-out-icon  { display: block; width: 15px; height: 15px; }
}

@media (max-width: 480px) {
  .stats-grid { grid-template-columns: 1fr; }
  .login-card { padding: 1.75rem 1.25rem; }
}

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

/* ============================================================
   EMPLOYEE PORTAL v2 — iOS-style
   Large titles, spring transitions, roomy cards, big tap targets.
   Techs use this on phones between scans; everything is thumb-sized.
   ============================================================ */

.emp2 {
  max-width: 720px;
  margin: 0 auto;
  padding: 1.1rem 1rem calc(84px + env(safe-area-inset-bottom, 0px));
}

/* --- Large title that condenses on scroll (iOS navigation bar) --- */
.emp2-title {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin-bottom: 0.15rem;
}
.emp2-subtitle {
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin-bottom: 1.25rem;
}

/* --- Hero earnings card --- */
.emp2-hero {
  background: linear-gradient(160deg, var(--pcd-navy) 0%, #24405f 100%);
  border-radius: 20px;
  padding: 1.4rem 1.3rem;
  color: #fff;
  margin-bottom: 1rem;
  box-shadow: 0 10px 30px rgba(23, 38, 62, 0.22);
}
.emp2-hero-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-weight: 600;
  color: rgba(255,255,255,0.62);
}
.emp2-hero-value {
  font-size: 2.6rem;
  font-weight: 700;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
  margin: 0.15rem 0 0.5rem;
  line-height: 1;
}
.emp2-hero-meta {
  display: flex;
  gap: 1.4rem;
  padding-top: 0.85rem;
  border-top: 1px solid rgba(255,255,255,0.14);
}
.emp2-hero-meta div { font-size: 0.78rem; color: rgba(255,255,255,0.66); }
.emp2-hero-meta strong {
  display: block;
  font-size: 1.15rem;
  color: #fff;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

/* --- Generic card --- */
.emp2-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 1.1rem 1.15rem;
  margin-bottom: 1rem;
  box-shadow: var(--shadow);
}
.emp2-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
}
.emp2-card-head h3 {
  font-size: 1.02rem;
  font-weight: 650;
  letter-spacing: -0.015em;
}

/* --- Quick actions --- */
.emp2-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; margin-bottom: 1rem; }
.emp2-action {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  color: var(--text-primary);
  transition: transform 0.18s cubic-bezier(0.2,0.9,0.3,1), box-shadow 0.18s ease;
  box-shadow: var(--shadow);
}
.emp2-action:active { transform: scale(0.97); }
.emp2-action:hover { box-shadow: var(--shadow-md); }
.emp2-action .emp2-action-icon {
  width: 34px; height: 34px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent-soft);
}
.emp2-action .emp2-action-icon svg { width: 17px; height: 17px; stroke: var(--accent); }
.emp2-action.is-brand .emp2-action-icon { background: var(--pcd-red-soft); }
.emp2-action.is-brand .emp2-action-icon svg { stroke: var(--pcd-red); }
.emp2-action-label { font-weight: 600; font-size: 0.9rem; }
.emp2-action-sub { font-size: 0.76rem; color: var(--text-muted); }

/* --- Study cards (My Studies) --- */
.emp2-study {
  display: flex;
  gap: 0.85rem;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--border);
}
.emp2-study:last-child { border-bottom: none; }
.emp2-study-main { flex: 1; min-width: 0; }
.emp2-study-type {
  font-weight: 600;
  font-size: 0.92rem;
  letter-spacing: -0.01em;
  margin-bottom: 0.12rem;
}
.emp2-study-meta { font-size: 0.79rem; color: var(--text-muted); }
.emp2-study-right { text-align: right; flex-shrink: 0; }
.emp2-study-amount {
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  font-size: 0.95rem;
  margin-bottom: 0.3rem;
}
.emp2-note {
  margin-top: 0.55rem;
  padding: 0.55rem 0.7rem;
  background: var(--danger-soft);
  border-radius: 10px;
  font-size: 0.79rem;
  color: var(--text-secondary);
}

/* --- Filter chips --- */
.emp2-chips { display: flex; gap: 0.45rem; overflow-x: auto; padding-bottom: 0.2rem; margin-bottom: 0.9rem; -webkit-overflow-scrolling: touch; }
.emp2-chips::-webkit-scrollbar { display: none; }
.emp2-chip {
  flex-shrink: 0;
  padding: 0.42rem 0.85rem;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text-secondary);
  font-size: 0.82rem;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.emp2-chip.active {
  background: var(--pcd-navy);
  border-color: var(--pcd-navy);
  color: #fff;
}

/* --- Study-type picker grid (Log Study) --- */
.emp2-typegrid { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.emp2-type {
  padding: 0.55rem 0.9rem;
  border-radius: 12px;
  border: 1.5px solid var(--border-strong);
  background: var(--surface);
  color: var(--text-primary);
  font-size: 0.85rem;
  font-family: inherit;
  cursor: pointer;
  transition: transform 0.15s cubic-bezier(0.2,0.9,0.3,1), background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.emp2-type:active { transform: scale(0.95); }
.emp2-type.selected {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  font-weight: 550;
}
.emp2-typecat {
  width: 100%;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0.55rem 0 0.1rem;
}

/* --- Success animation --- */
.emp2-success { text-align: center; padding: 1.6rem 0 0.6rem; }
.emp2-check {
  width: 62px; height: 62px;
  border-radius: 50%;
  background: var(--success-soft);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 0.9rem;
  animation: popIn 0.36s cubic-bezier(0.2, 1.3, 0.4, 1);
}
.emp2-check svg { width: 30px; height: 30px; stroke: var(--success); stroke-width: 3; }
.emp2-check svg path {
  stroke-dasharray: 32;
  stroke-dashoffset: 32;
  animation: drawCheck 0.34s 0.14s ease forwards;
}
@keyframes popIn { from { transform: scale(0.3); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes drawCheck { to { stroke-dashoffset: 0; } }

/* --- Monthly earnings bar chart --- */
.emp2-bars { display: flex; align-items: flex-end; gap: 3px; height: 92px; margin: 0.5rem 0 0.35rem; }
.emp2-bar {
  flex: 1;
  min-height: 3px;
  background: var(--accent);
  border-radius: 3px 3px 0 0;
  opacity: 0.85;
  transition: height 0.4s cubic-bezier(0.2,0.9,0.3,1);
}
.emp2-bar.empty { background: var(--surface-3); opacity: 1; }

/* --- Notification dropdown panel --- */
.emp2-notif-panel {
  position: fixed;
  top: 60px;
  right: 12px;
  width: min(360px, calc(100vw - 24px));
  max-height: 70vh;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow-lg);
  z-index: 250;
  display: none;
  animation: modalIn 0.18s cubic-bezier(0.2, 0.9, 0.3, 1);
}
.emp2-notif-panel.open { display: block; }
.emp2-notif-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.85rem 1rem 0.6rem;
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0;
  background: var(--surface);
  border-radius: 16px 16px 0 0;
}
.emp2-notif-head h4 { font-size: 0.92rem; font-weight: 650; }
.emp2-notif-item { display: flex; gap: 0.65rem; padding: 0.8rem 1rem; border-bottom: 1px solid var(--border); }
.emp2-notif-item:last-child { border-bottom: none; }
.emp2-notif-item.unread { background: var(--accent-soft); }
.emp2-notif-dot { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.emp2-notif-dot svg { width: 15px; height: 15px; stroke-width: 2.5; }

/* --- Bottom tab bar --- */
/* New-message banner — a bell dot is too easy to miss, so an unread
   announcement also gets a named strip that follows the employee across tabs. */
.emp2-msg-banner {
  position: sticky;
  top: 56px;                       /* directly under the app header */
  z-index: 118;                    /* below the notif panel, above content */
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.7rem 0.9rem;
  background: var(--accent-soft);
  border-bottom: 1px solid var(--accent);
  box-shadow: inset 3px 0 0 var(--accent);
}
.emp2-msg-banner .mb-icon {
  width: 30px; height: 30px; flex-shrink: 0;
  border-radius: 9px;
  background: var(--accent); color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.emp2-msg-banner .mb-icon svg { width: 16px; height: 16px; }
.emp2-msg-banner .mb-text { flex: 1; min-width: 0; }
.emp2-msg-banner .mb-title {
  font-size: 0.84rem; font-weight: 680; color: var(--text-primary);
  line-height: 1.2;
}
.emp2-msg-banner .mb-sub {
  font-size: 0.78rem; color: var(--text-secondary); margin-top: 0.1rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.emp2-msg-banner .mb-view {
  flex-shrink: 0;
  border: none; border-radius: 8px;
  background: var(--accent); color: #fff;
  font-family: inherit; font-size: 0.78rem; font-weight: 600;
  padding: 0.42rem 0.85rem; min-height: 32px;
  cursor: pointer;
}
.emp2-msg-banner .mb-close {
  flex-shrink: 0;
  width: 30px; height: 30px;       /* clears the 24px WCAG target floor */
  display: inline-flex; align-items: center; justify-content: center;
  border: none; background: none; border-radius: 8px;
  /* --text-muted measured 2.57:1 against the tinted banner, under the 3:1
     WCAG 1.4.11 floor for a meaningful icon. Secondary clears it. */
  color: var(--text-secondary); cursor: pointer;
}
.emp2-msg-banner .mb-close:hover { background: rgba(0,0,0,0.07); color: var(--text-primary); }
.emp2-msg-banner .mb-close svg { width: 14px; height: 14px; }

/* Dark mode lightens --accent so it stays legible AS text on dark surfaces.
   That makes it a poor background for white text — the Read button measured
   3.32:1. Flip the label dark instead of darkening the accent, which would
   weaken it everywhere else it is used. */
:root[data-theme="dark"] .emp2-msg-banner .mb-view { color: #0d1420; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .emp2-msg-banner .mb-view { color: #0d1420; }
}

.emp2-tabbar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  display: flex;
  justify-content: center;         /* keeps tabs together on wide windows */
  gap: 0;
  background: var(--surface);
  border-top: 1px solid var(--border-strong);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  z-index: 120;
  box-shadow: 0 -2px 14px rgba(0, 0, 0, 0.07);
}
.emp2-tab {
  flex: 1 1 0;
  /* Without a cap the five tabs stretch the full width of a desktop window and
     become tiny islands adrift in a blank strip — legible on a phone, unusable
     anywhere else. 112px keeps them a thumb apart and grouped. */
  max-width: 112px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 0.42rem 0.2rem 0.45rem;
  min-height: 52px;                /* comfortable thumb target */
  background: none;
  border: none;
  font-family: inherit;
  font-size: 0.68rem;
  font-weight: 600;
  /* --text-muted failed contrast against the bar; secondary reads as a real
     control rather than a disabled one. */
  color: var(--text-secondary);
  cursor: pointer;
  transition: color 0.15s ease;
  position: relative;
}
.emp2-tab svg { width: 21px; height: 21px; transition: transform 0.15s ease; }
.emp2-tab.active { color: var(--accent); font-weight: 700; }
/* Colour alone is not a sufficient state indicator (WCAG 1.4.1), so the active
   tab also gets a bar above it and a nudged-up icon. */
.emp2-tab.active::before {
  content: '';
  position: absolute;
  top: 0; left: 50%; transform: translateX(-50%);
  width: 26px; height: 3px;
  border-radius: 0 0 3px 3px;
  background: var(--accent);
}
.emp2-tab.active svg { transform: translateY(-1px); }
.emp2-tab:not(.active):hover { color: var(--text-primary); }

/* --- Floating action button --- */
.emp2-fab {
  position: fixed;
  right: 18px;
  bottom: calc(74px + env(safe-area-inset-bottom, 0px));
  width: 54px; height: 54px;
  border-radius: 50%;
  border: none;
  background: var(--pcd-red);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 20px rgba(194, 53, 48, 0.4);
  cursor: pointer;
  z-index: 121;
  transition: transform 0.2s cubic-bezier(0.2,0.9,0.3,1);
}
.emp2-fab:active { transform: scale(0.9); }
.emp2-fab svg { width: 24px; height: 24px; stroke-width: 2.5; }

/* --- Sheet (bottom-sheet modal on phones) --- */
.emp2-sheet-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.35);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  z-index: 300;
  display: none;
  align-items: flex-end;
  justify-content: center;
}
.emp2-sheet-overlay.open { display: flex; }
.emp2-sheet {
  width: 100%;
  max-width: 560px;
  max-height: 92vh;
  overflow-y: auto;
  background: var(--surface);
  border-radius: 22px 22px 0 0;
  padding: 0.7rem 1.15rem calc(1.4rem + env(safe-area-inset-bottom, 0px));
  animation: sheetUp 0.3s cubic-bezier(0.2, 0.9, 0.3, 1);
}
@keyframes sheetUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
.emp2-grabber {
  width: 38px; height: 5px;
  border-radius: 3px;
  background: var(--border-strong);
  margin: 0 auto 0.9rem;
}
.emp2-sheet h3 { font-size: 1.15rem; font-weight: 650; letter-spacing: -0.02em; margin-bottom: 0.9rem; }

@media (min-width: 640px) {
  .emp2-sheet-overlay { align-items: center; }
  .emp2-sheet { border-radius: 22px; max-height: 86vh; padding-bottom: 1.4rem; }
  @keyframes sheetUp { from { transform: scale(0.94); opacity: 0; } to { transform: scale(1); opacity: 1; } }
}

/* Big, comfortable inputs — these get used with gloves on, on a phone. */
.emp2 input, .emp2 select, .emp2 textarea,
.emp2-sheet input, .emp2-sheet select, .emp2-sheet textarea {
  font-size: 16px;   /* iOS refuses to zoom on focus at >=16px */
  padding: 0.72rem 0.85rem;
  border-radius: 12px;
}
.emp2-sheet .btn, .emp2 .btn-lg { min-height: 46px; }