/* ============================================================
   Military Retirement Planner — Styles
   Web3 glassmorphism · AF Blue palette · Dark/Light modes
   ============================================================ */

/* ---------- Design tokens ---------- */
:root {
  /* Native controls (select popups, date pickers, scrollbars) follow theme */
  color-scheme: light dark;
  accent-color: var(--brand);

  /* WheelsUp brand scale (shared with the landing page) */
  --brand:       #0F766E;   /* teal — primary */
  --brand-700:   #115E59;   /* deep teal */
  --brand-300:   #2dd4bf;   /* lighter teal — links/accents */
  --brand-2:     #14b8a6;
  --brand-soft:  rgba(15,118,110,0.10);
  /* hero-card gradient — DAY: darker green (matches the sidebar active item). Dark mode overrides below. */
  --hero-grad:       linear-gradient(to top right, #0d6a62, #0F766E);
  --hero-grad-hover: linear-gradient(to top right, #0f857a, #11827a);
  --sand:        #F4A259;   /* warm sand — attention/highlight */
  --sand-strong: #E0853A;
  --sand-light:  #F8C089;
  --ink:         #0F1B2D;   /* deep navy */

  /* Status colors */
  --color-ok:      #16A34A;
  --color-warn:    #E0853A;
  --color-danger:  #DC2626;
  --color-info:    #0F766E;
  --color-ptdy:    #2f9389;
  --color-leave:   #F4A259;

  --sidebar-width:  220px;
  --sidebar-collapsed: 64px;
  --transition: 0.22s cubic-bezier(0.4,0,0.2,1);

  /* LIGHT surfaces (flat) — default */
  --bg-base:        #eef2f7;
  --bg-surface:     #ffffff;
  --surface-2:      #e8edf4;
  --bg-card:        #ffffff;
  --bg-card-hover:  #f4f7fb;
  --border-card:    #e4e9f1;
  --border-accent:  rgba(224,133,58,0.5);
  --text-primary:   #0F1B2D;
  --text-secondary: #54657a;
  --text-muted:     #8093a6;
  --sidebar-bg:     #0d1726;
  --topbar-bg:      rgba(238,242,247,0.9);
  --scrollbar-bg:   rgba(15,118,110,0.12);
  --card-backdrop:  none;
  --card-shadow:    0 6px 22px rgba(15,27,45,0.07);
  --attn-bg:        #fcefe0;
  --attn-border:    rgba(224,133,58,0.5);
}

/* DARK surfaces (soft-glass). Tokens shared between the auto (system) path
   and the explicit [data-theme="dark"] override. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --brand:       #19c2ad;
    --brand-soft:  rgba(25,194,173,0.14);
    --brand-300:   #5eead4;
    --hero-grad:       linear-gradient(to top right, #0F766E, #19c2ad);
    --hero-grad-hover: linear-gradient(to top right, #11827a, #2bd0bb);
    --bg-base:        #0a1420;
    --bg-surface:     #142536;
    --surface-2:      #1a2c3e;
    --bg-card:        rgba(255,255,255,0.055);
    --bg-card-hover:  rgba(255,255,255,0.09);
    --border-card:    rgba(255,255,255,0.10);
    --border-accent:  rgba(244,162,89,0.40);
    --text-primary:   #e7eef6;
    --text-secondary: #94a5b9;
    --text-muted:     #647890;
    --topbar-bg:      rgba(10,20,32,0.8);
    --scrollbar-bg:   rgba(255,255,255,0.08);
    --card-backdrop:  blur(16px) saturate(1.2);
    --card-shadow:    0 10px 30px rgba(0,0,0,0.42);
    --attn-bg:        rgba(244,162,89,0.13);
    --attn-border:    rgba(244,162,89,0.42);
  }
}
[data-theme="dark"] {
  color-scheme: dark;
  --brand:       #19c2ad;
  --brand-soft:  rgba(25,194,173,0.14);
  --brand-300:   #5eead4;
  --hero-grad:       linear-gradient(to top right, #0F766E, #19c2ad);
  --hero-grad-hover: linear-gradient(to top right, #11827a, #2bd0bb);
  --bg-base:        #0a1420;
  --bg-surface:     #142536;
  --surface-2:      #1a2c3e;
  --bg-card:        rgba(255,255,255,0.055);
  --bg-card-hover:  rgba(255,255,255,0.09);
  --border-card:    rgba(255,255,255,0.10);
  --border-accent:  rgba(244,162,89,0.40);
  --text-primary:   #e7eef6;
  --text-secondary: #94a5b9;
  --text-muted:     #647890;
  --topbar-bg:      rgba(10,20,32,0.8);
  --scrollbar-bg:   rgba(255,255,255,0.08);
  --card-backdrop:  blur(16px) saturate(1.2);
  --card-shadow:    0 10px 30px rgba(0,0,0,0.42);
  --attn-bg:        rgba(244,162,89,0.13);
  --attn-border:    rgba(244,162,89,0.42);
}
[data-theme="light"] { color-scheme: light; }

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

html { font-size: 15px; scroll-behavior: smooth; }

body {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  background: var(--bg-base);
  color: var(--text-primary);
  display: flex;
  height: 100vh;
  overflow: hidden;
  transition: background var(--transition), color var(--transition);
}

a { color: inherit; text-decoration: none; }
button { cursor: pointer; border: none; background: none; font: inherit; color: inherit; }
input, select, textarea { font: inherit; color: inherit; }

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--scrollbar-bg); border-radius: 4px; }

/* ============================================================
   SIDEBAR
   ============================================================ */
.sidebar {
  width: var(--sidebar-width);
  height: 100vh;
  background: var(--sidebar-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-right: 1px solid rgba(255,255,255,0.06);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  transition: width var(--transition);
  overflow: hidden;
  z-index: 100;
}

.sidebar.collapsed { width: var(--sidebar-collapsed); }

.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 16px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  gap: 10px;
  min-height: 64px;
}

.sidebar-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  overflow: hidden;
}

.sidebar-title {
  font-size: 1.18rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #fff;
  white-space: nowrap;
  transition: opacity var(--transition), width var(--transition);
}
.sidebar-logo .brand-mark { filter: drop-shadow(0 4px 12px rgba(15,118,110,0.4)); flex-shrink: 0; }

.sidebar.collapsed .sidebar-title { opacity: 0; width: 0; pointer-events: none; }

/* Collapsed: stack the logo mark above the hamburger so the brand stays visible */
.sidebar.collapsed .sidebar-header { flex-direction: column; gap: 12px; padding: 16px 8px; justify-content: center; }
.sidebar.collapsed .sidebar-logo { justify-content: center; gap: 0; width: 100%; }

.sidebar-toggle {
  color: var(--text-secondary);
  padding: 6px;
  border-radius: 6px;
  transition: background var(--transition), color var(--transition);
  flex-shrink: 0;
}
.sidebar-toggle:hover { background: var(--bg-card-hover); color: var(--text-primary); }

/* Nav */
.sidebar-nav {
  flex: 1;
  padding: 12px 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-y: auto;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 10px;
  border-radius: 10px;
  color: var(--text-secondary);
  transition: background var(--transition), color var(--transition);
  white-space: nowrap;
  position: relative;
}

.nav-item:hover {
  background: var(--bg-card-hover);
  color: var(--text-primary);
}

.nav-item.active {
  background: linear-gradient(to top right, #0d6a62, var(--brand));
  color: #fff;
  box-shadow: 0 4px 14px rgba(15,118,110,0.4);
}

.nav-item.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 25%;
  height: 50%;
  width: 3px;
  background: var(--sand);
  border-radius: 0 2px 2px 0;
}

.nav-icon {
  width: 23px;
  height: 23px;
  flex-shrink: 0;
}

.nav-label {
  font-size: 0.85rem;
  font-weight: 500;
  transition: opacity var(--transition), width var(--transition);
  overflow: hidden;
}

.sidebar.collapsed .nav-label {
  opacity: 0;
  width: 0;
  pointer-events: none;
}

/* Sidebar footer */
.sidebar-footer {
  padding: 12px 8px;
  border-top: 1px solid rgba(255,255,255,0.06);
}

.theme-toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 10px;
  border-radius: 10px;
  color: var(--text-secondary);
  width: 100%;
  transition: background var(--transition), color var(--transition);
  white-space: nowrap;
}
.theme-toggle:hover { background: var(--bg-card-hover); color: var(--text-primary); }

.icon-moon { display: block; width: 20px; height: 20px; flex-shrink: 0; }
.icon-sun  { display: none;  width: 20px; height: 20px; flex-shrink: 0; }
[data-theme="light"] .icon-moon { display: none; }
[data-theme="light"] .icon-sun  { display: block; }

/* ============================================================
   MAIN
   ============================================================ */
.main {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
  min-width: 0;
}

/* Topbar */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 28px;
  height: 64px;
  background: var(--topbar-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border-card);
  flex-shrink: 0;
  gap: 16px;
  /* Stack above the (position:relative) view container so the user-menu
     dropdown overflowing below the bar stays fully clickable. */
  position: relative;
  z-index: 100;
}

.topbar-left {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-left: 13px;
  border-left: 4px solid var(--brand);
}

.view-title {
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}

.view-subtitle {
  font-size: 0.75rem;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}

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

.member-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: 20px;
  padding: 5px 14px 5px 10px;
}

.member-rank {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--sand);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: rgba(244,162,89,0.12);
  padding: 2px 7px;
  border-radius: 10px;
}

.member-name {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-primary);
}

/* User menu (click the name → Log out) */
.user-menu-wrap { position: relative; }
.member-badge { font-family: inherit; color: inherit; cursor: default; }
.member-caret { color: var(--text-secondary); margin-left: 2px; }
.user-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 200;
  min-width: 150px; padding: 6px;
  background: var(--bg-surface); border: 1px solid var(--border-card);
  border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,0.45);
}
.user-menu[hidden] { display: none; }
.user-menu-item {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 9px 10px; border: none; border-radius: 7px; background: none;
  color: var(--text-primary); font: inherit; font-size: 0.85rem;
  text-align: left; cursor: pointer;
}
.user-menu-item:hover { background: var(--bg-card-hover); }

/* POC / Contact log */
.poc-item { background: var(--bg-card); border: 1px solid var(--border-card); border-radius: 12px; padding: 13px 15px; margin-bottom: 10px; box-shadow: var(--card-shadow); transition: background var(--transition), border-color var(--transition); }
.poc-item:hover { background: var(--bg-card-hover); }
.poc-item.poc-waiting { border-left: 3px solid var(--color-warn); }
.poc-head { display: flex; align-items: center; gap: 10px; }
.poc-office { font-weight: 700; font-size: 0.92rem; color: var(--text-primary); }
.poc-last { font-size: 0.72rem; color: var(--text-secondary); white-space: nowrap; }
.poc-del { margin-left: 4px; }
.poc-thread-toggle {
  margin-left: auto;
  font-size: 0.7rem; font-weight: 700; white-space: nowrap;
  padding: 4px 11px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--border-card); background: var(--bg-card); color: var(--text-secondary);
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.poc-thread-toggle:hover { border-color: var(--color-warn); color: var(--color-warn); }
.poc-thread-toggle.active { background: rgba(251,191,36,0.15); border-color: var(--color-warn); color: var(--color-warn); }
.poc-desc { font-size: 0.78rem; color: var(--text-secondary); margin: 4px 0 10px; }
.poc-fields { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 8px; }
.poc-mini-label { display: block; font-size: 0.68rem; color: var(--text-muted); margin-bottom: 2px; }
.poc-waiting-input { width: 100%; }
@media (max-width: 768px) { .poc-fields { grid-template-columns: 1fr; } }

.btn-export {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 16px;
  background: linear-gradient(135deg, var(--brand-700), var(--brand));
  color: #fff;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  transition: opacity var(--transition), transform var(--transition);
  box-shadow: 0 2px 12px rgba(15,118,110,0.3);
}
.btn-export:hover { opacity: 0.88; transform: translateY(-1px); }

/* View containers */
.view-container {
  flex: 1;
  overflow: hidden;
  position: relative;
}

.view {
  display: none;
  height: 100%;
  overflow-y: auto;
  padding: 24px 28px;
  animation: fadeIn 0.2s ease;
}

.view.active { display: block; }

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

/* ============================================================
   CARDS & GLASS
   ============================================================ */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: 14px;
  padding: 18px;
  box-shadow: var(--card-shadow);
  backdrop-filter: var(--card-backdrop);
  -webkit-backdrop-filter: var(--card-backdrop);
  transition: background var(--transition), border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}

.card:hover { background: var(--bg-card-hover); }

.card-bordered { border-color: var(--border-card); }

.card-title {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 14px;
}

/* ============================================================
   GRID UTILITIES
   ============================================================ */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }

@media (max-width: 1100px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 800px)  { .grid-3, .grid-4, .grid-2 { grid-template-columns: 1fr; } }

/* Hero countdown grid responsive */
@media (max-width: 1100px) {
  .hero-countdown-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 600px) {
  .hero-countdown-grid { grid-template-columns: 1fr !important; }
}

.section-title {
  font-size: 0.84rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand);
  margin: 26px 0 14px;
  padding-left: 11px;
  border-left: 3px solid var(--brand);
}

.section-title:first-child { margin-top: 0; }

/* ============================================================
   COUNTDOWN CARDS
   ============================================================ */
.countdown-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px 20px;
}

.countdown-label {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.countdown-days {
  font-size: 2.5rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--text-primary);
}

/* Restrained color: numbers stay neutral; only urgent (<=90d / overdue) go red */
.countdown-days.blue  { color: var(--text-primary); }
.countdown-days.green { color: var(--color-ok); }
.countdown-days.red   { color: var(--color-danger); }

.countdown-date {
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.countdown-progress {
  height: 5px;
  background: var(--brand-soft);
  border-radius: 99px;
  margin-top: 8px;
  overflow: hidden;
}

.countdown-progress-bar {
  height: 100%;
  border-radius: 99px;
  background: var(--brand);
  transition: width 0.6s ease;
}

/* ============================================================
   LEAVE CALCULATOR
   ============================================================ */
.leave-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.82rem;
}

.leave-table th {
  text-align: left;
  padding: 10px 14px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-card);
  position: sticky;
  top: 0;
  background: var(--bg-surface);
  z-index: 1;
}

.leave-table td {
  padding: 9px 14px;
  border-bottom: 1px solid var(--border-card);
  vertical-align: middle;
}

.leave-table tr:last-child td { border-bottom: none; }

.leave-table tr:hover td { background: var(--bg-card-hover); }

.leave-table .fy-row td {
  background: rgba(17,94,89,0.12);
  font-weight: 600;
  font-size: 0.8rem;
}

.leave-table .warn-row td { background: rgba(251,191,36,0.08); }
.leave-table .danger-row td { background: rgba(248,113,113,0.08); }

.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.badge-ok     { background: rgba(52,211,153,0.15); color: var(--color-ok); }
.badge-warn   { background: rgba(251,191,36,0.15); color: var(--color-warn); }
.badge-danger { background: rgba(248,113,113,0.15); color: var(--color-danger); }
.badge-info   { background: rgba(96,165,250,0.15); color: var(--color-info); }
.badge-ptdy   { background: rgba(167,139,250,0.15); color: var(--color-ptdy); }
.badge-leave  { background: rgba(251,146,60,0.15);  color: var(--color-leave); }
.badge-gold   { background: rgba(244,162,89,0.15);  color: var(--sand); }

/* ============================================================
   GANTT CHART
   ============================================================ */
.gantt-wrapper {
  overflow-x: auto;
  border-radius: 12px;
  border: 1px solid var(--border-card);
}

.gantt-container {
  min-width: 800px;
  font-size: 0.78rem;
}

.gantt-header {
  display: flex;
  border-bottom: 1px solid var(--border-card);
  padding: 0;
  background: var(--surface-2);
}

.gantt-label-col {
  width: 200px;
  flex-shrink: 0;
  padding: 10px 14px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  border-right: 1px solid var(--border-card);
}

.gantt-months {
  flex: 1;
  display: flex;
}

.gantt-month {
  flex: 1;
  text-align: center;
  padding: 10px 4px;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-muted);
  border-right: 1px solid var(--border-card);
  white-space: nowrap;
  overflow: hidden;
}

.gantt-row {
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--border-card);
  min-height: 42px;
}

.gantt-row:last-child { border-bottom: none; }

.gantt-row-label {
  width: 200px;
  flex-shrink: 0;
  padding: 8px 14px;
  font-size: 0.78rem;
  color: var(--text-primary);
  background: var(--surface-2);
  border-right: 1px solid var(--border-card);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Pronounced category headers (#3) */
.gantt-row.group-header { background: var(--brand-soft); }
.gantt-row.group-header .gantt-row-label {
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brand);
  background: transparent;
  border-right-color: transparent;
}

.gantt-timeline {
  flex: 1;
  position: relative;
  height: 42px;
  display: flex;
  align-items: center;
}

.gantt-grid-lines {
  position: absolute;
  inset: 0;
  display: flex;
  pointer-events: none;
}

.gantt-grid-line {
  flex: 1;
  border-right: 1px solid var(--border-card);
  height: 100%;
}

.gantt-bar {
  position: absolute;
  height: 22px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  padding: 0 8px;
  font-size: 0.68rem;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  transition: opacity 0.2s;
  cursor: default;
}

.gantt-bar:hover { opacity: 0.85; }

.gantt-bar.bar-skillbridge { background: linear-gradient(90deg, #0F766E, #14b8a6); }
.gantt-bar.bar-relocation  { background: linear-gradient(90deg, #a78bfa, #c4b5fd); }
.gantt-bar.bar-terminal    { background: linear-gradient(90deg, #fb923c, #fdba74); }
.gantt-bar.bar-taps        { background: linear-gradient(90deg, #34d399, #6ee7b7); }
.gantt-bar.bar-admin       { background: linear-gradient(90deg, #115E59, #0F766E); }
.gantt-bar.bar-milestone   { background: linear-gradient(90deg, #F4A259, #F8C089); }
.gantt-bar.bar-va          { background: linear-gradient(90deg, #f87171, #fca5a5); }
.gantt-bar.bar-hhg         { background: linear-gradient(90deg, #4ade80, #86efac); }

.gantt-today {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: rgba(244,162,89,0.7);
  pointer-events: none;
}

.gantt-today::after {
  content: 'TODAY';
  position: absolute;
  top: -18px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.55rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--sand);
  white-space: nowrap;
}

/* ============================================================
   MILESTONES / CHECKLIST
   ============================================================ */
/* Green progress accent (rule: one hero-green card per view) */
.ms-progress-card {
  background: var(--hero-grad);
  border-radius: 14px; padding: 16px 20px; margin-bottom: 20px;
  display: flex; flex-direction: column; gap: 10px;
}
.ms-progress-info { display: flex; align-items: baseline; gap: 12px; }
.ms-progress-pct { font-size: 1.9rem; font-weight: 800; color: var(--sand); line-height: 1; }
.ms-progress-lbl { font-size: 0.88rem; color: #cdeee9; }
.ms-progress-track { height: 8px; border-radius: 99px; background: rgba(255,255,255,0.18); overflow: hidden; }
.ms-progress-track > span { display: block; height: 100%; background: var(--sand); border-radius: 99px; }

.milestone-group {
  margin-bottom: 20px;
}

.milestone-group-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.84rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand);
  margin: 24px 0 12px;
  padding-left: 11px;
  border-left: 3px solid var(--brand);
}
.milestone-group:first-child .milestone-group-title { margin-top: 0; }
/* Per-user date range beside a milestone-group title (content templating). */
.ms-group-dates {
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--text-secondary);
  font-size: 0.78rem;
}
.ms-group-dates::before { content: '· '; opacity: 0.6; }

.na-row {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 7px 6px;
  border-bottom: 1px solid var(--border-card);
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s;
}
.na-row:hover { background: var(--bg-card-hover); }
.na-row:last-of-type { border-bottom: none; }

@keyframes ms-highlight-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(15,118,110,0.6); }
  50%  { box-shadow: 0 0 0 6px rgba(15,118,110,0.15); }
  100% { box-shadow: 0 0 0 3px rgba(15,118,110,0.25); }
}
.milestone-item.ms-highlight {
  box-shadow: 0 0 0 2px var(--brand);
  animation: ms-highlight-pulse 0.5s ease-out;
}

.ms-group-toggle {
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: color 0.15s;
}
.ms-group-toggle:hover { color: var(--text-secondary); }

.ms-group-chevron {
  flex-shrink: 0;
  transition: transform 0.2s;
}
.ms-group-chevron.collapsed { transform: rotate(-90deg); }

/* Milestone cards in a responsive grid — up to ~4 across, in date order.
   align-items:start keeps each card its natural height so a tall expanded
   parent doesn't stretch its row-mates. */
.ms-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); gap: 12px; align-items: start; }

/* Single-column list view — full width, aligned with the rest of the page */
.ms-list { display: flex; flex-direction: column; gap: 10px; }
.ms-list .milestone-item { width: 100%; }

/* Compact table view — full width to match the page frame */
.ms-table-wrap { background: var(--bg-card); border: 1px solid var(--border-card); border-radius: 12px; box-shadow: var(--card-shadow); overflow: hidden; }
/* Fixed layout so every group's table lays its columns out identically — the
   Status/Due/Action columns are fixed-width and the Milestone column absorbs the
   rest, so the Due date sits in the same place in every group (not staggered) and
   over on the right, next to the Start (Action) column. */
.ms-table { width: 100%; border-collapse: collapse; font-size: 0.86rem; table-layout: fixed; }
.ms-table .ms-td-status { width: 116px; }
.ms-table .ms-table-due { width: 150px; }
.ms-table th:nth-child(4), .ms-table td:nth-child(4) { width: 120px; }
.ms-table th { text-align: left; padding: 10px 14px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); border-bottom: 1px solid var(--border-card); background: var(--surface-2); }
.ms-table td { padding: 9px 14px; border-bottom: 1px solid var(--border-card); vertical-align: middle; }
.ms-table tr:last-child td { border-bottom: none; }
.ms-table-row { cursor: pointer; }
.ms-table-row:hover td { background: var(--bg-card-hover); }
.ms-table-row.done .ms-table-title { text-decoration: line-through; color: var(--text-muted); }
.ms-table-title { font-weight: 500; color: var(--text-primary); }
.ms-table-child .ms-table-title { color: var(--text-secondary); padding-left: 34px; }
.ms-table-indent { color: var(--brand); margin-right: 4px; }
.ms-td-status { width: 132px; }
.ms-table-due { white-space: nowrap; }
.ms-table-action { text-align: right; white-space: nowrap; }
.ms-table-action .ms-child-chevron { vertical-align: middle; }

.ms-table-titletext { font-weight: 500; }
.ms-table-note { font-size: 0.72rem; color: var(--text-secondary); margin-top: 2px; max-width: 640px; }
.ms-table-row.done .ms-table-note { color: var(--text-muted); }

/* Layout switcher (segmented control), centered above the list */
.ms-view-switch-wrap { display: flex; justify-content: center; margin: 2px 0 18px; }
.ms-view-switch { display: inline-flex; background: var(--bg-card); border: 1px solid var(--border-card); border-radius: 999px; padding: 3px; }
.ms-view-btn { font-size: 0.75rem; font-weight: 700; color: var(--text-secondary); background: none; border: none; padding: 5px 12px; border-radius: 999px; cursor: pointer; transition: background var(--transition), color var(--transition); }
.ms-view-btn.active { background: var(--brand); color: #fff; }

.milestone-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 13px 15px;
  border-radius: 12px;
  border: 1px solid var(--border-card);
  background: var(--bg-card);
  box-shadow: var(--card-shadow);
  transition: background var(--transition), border-color var(--transition), transform var(--transition);
  cursor: pointer;
}

.milestone-item:hover {
  background: var(--bg-card-hover);
  transform: translateY(-1px);
}

/* Done: don't fade the whole card (keeps the Reopen button + text readable);
   the strikethrough title + green Done pill signal completion. */
.milestone-item.done { background: var(--surface-2); }

.mi-head { display: flex; align-items: center; gap: 10px; }
.mi-head .milestone-title { flex: 1; min-width: 0; margin-bottom: 0; }
.milestone-content { flex: 1; min-width: 0; }

.milestone-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 2px;
}

/* Parent cards stay normal grid cells; children render inside the parent card */
.milestone-item.milestone-parent:hover { border-color: var(--brand); }

.milestone-item.done .milestone-title {
  text-decoration: line-through;
  color: var(--text-muted);
}

.milestone-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.milestone-date {
  font-size: 0.78rem;
  color: var(--text-secondary);
  font-weight: 600;
}
.milestone-date.milestone-nodate { color: var(--text-muted); font-weight: 500; font-style: italic; }

.milestone-note {
  font-size: 0.78rem;
  color: var(--text-secondary);
}

.milestone-actions {
  display: flex;
  gap: 6px;
  margin-left: auto;
  flex-shrink: 0;
}

/* ── Status pills ── */
.ms-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  border-radius: 20px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  white-space: nowrap;
  flex-shrink: 0;
  align-self: flex-start;
  margin-top: 2px;
}

.ms-status-pending {
  background: var(--surface-2);
  color: var(--text-muted);
  border: 1px solid var(--border-card);
}

.ms-status-progress {
  background: rgba(15,118,110,0.15);
  color: var(--brand-300);
  border: 1px solid rgba(15,118,110,0.3);
}

.ms-status-done {
  background: rgba(52,211,153,0.12);
  color: var(--color-ok);
  border: 1px solid rgba(52,211,153,0.25);
}

.ms-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--brand-300);
  animation: ms-pulse 1.6s ease-in-out infinite;
  flex-shrink: 0;
}

@keyframes ms-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.5; transform: scale(0.75); }
}

/* ── Toolbar (filter bar + hide toggle) ── */
.ms-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.ms-filter-bar {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.ms-filter-btn {
  padding: 5px 13px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  border: 1px solid var(--border-card);
  background: var(--bg-card);
  color: var(--text-secondary);
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}

.ms-filter-btn:hover {
  background: var(--bg-card-hover);
  color: var(--text-primary);
}

.ms-filter-btn.active {
  background: linear-gradient(135deg, rgba(17,94,89,0.5), rgba(15,118,110,0.3));
  border-color: rgba(15,118,110,0.5);
  color: #fff;
}

.ms-hide-btn.active {
  border-color: var(--brand);
  color: var(--text-primary);
}

.btn-status {
  font-size: 0.76rem;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 8px;
  border: 1px solid var(--brand);
  background: var(--brand);
  color: #fff;
  white-space: nowrap;
  transition: background var(--transition), border-color var(--transition);
}
.btn-status:hover { background: var(--brand-700); border-color: var(--brand-700); }
/* State-coded actions: Start = green · Mark Done = sand · Reopen = slate */
.btn-status.btn-start    { background: var(--color-ok); border-color: var(--color-ok); }
.btn-status.btn-start:hover { background: #15803d; border-color: #15803d; }
.btn-status.btn-markdone { background: var(--sand); border-color: var(--sand); color: var(--ink); }
.btn-status.btn-markdone:hover { background: var(--sand-strong); border-color: var(--sand-strong); }
.btn-status.btn-reopen   { background: #64748b; border-color: #64748b; }
.btn-status.btn-reopen:hover { background: #4b596b; border-color: #4b596b; }

/* ============================================================
   SETTINGS FORM
   ============================================================ */
.form-group {
  margin-bottom: 18px;
}

.form-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  margin-bottom: 7px;
}

.form-input {
  width: 100%;
  padding: 9px 13px;
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: 9px;
  color: var(--text-primary);
  font-size: 0.85rem;
  transition: border-color var(--transition), background var(--transition);
  outline: none;
}

.form-input:focus {
  border-color: var(--brand);
  background: var(--bg-card-hover);
  box-shadow: 0 0 0 3px rgba(15,118,110,0.15);
}

.form-hint {
  font-size: 0.7rem;
  color: var(--text-muted);
  margin-top: 5px;
}

.leave-entry-row {
  display: grid;
  grid-template-columns: 1fr 160px 80px 36px;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}

.btn-remove {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  background: rgba(248,113,113,0.1);
  color: var(--color-danger);
  font-size: 1.1rem;
  line-height: 1;
  transition: background var(--transition);
}
.btn-remove:hover { background: rgba(248,113,113,0.2); }

.btn-add {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  background: var(--bg-card);
  border: 1px dashed var(--border-card);
  border-radius: 9px;
  color: var(--text-secondary);
  font-size: 0.8rem;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.btn-add:hover {
  background: var(--bg-card-hover);
  border-color: var(--brand);
  color: var(--text-primary);
}

.btn-primary {
  padding: 10px 24px;
  background: linear-gradient(135deg, var(--brand-700), var(--brand));
  color: #fff;
  border-radius: 9px;
  font-size: 0.85rem;
  font-weight: 600;
  box-shadow: 0 2px 12px rgba(15,118,110,0.3);
  transition: opacity var(--transition), transform var(--transition);
}
.btn-primary:hover { opacity: 0.88; transform: translateY(-1px); }

.save-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--border-card);
}

.save-notice {
  font-size: 0.75rem;
  color: var(--color-ok);
  opacity: 0;
  transition: opacity var(--transition);
}

.save-notice.show { opacity: 1; }

/* ============================================================
   STAT STRIP
   ============================================================ */
.stat-strip {
  display: flex;
  gap: 1px;
  background: var(--border-card);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 20px;
}

.stat-cell {
  flex: 1;
  padding: 14px 18px;
  background: var(--bg-card);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

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

.stat-cell-value {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--text-primary);
}

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

.stat-cell[data-nav-view] {
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.stat-cell[data-nav-view]:hover {
  background: rgba(255,255,255,0.06);
  border-color: var(--brand);
}

/* ============================================================
   RESPONSIVE — TOPBAR
   ============================================================ */
@media (max-width: 600px) {
  .topbar { padding: 0 14px; }
  .member-badge { display: none; }
  .view-subtitle { display: none; }
}

/* ============================================================
   PRINT / EXPORT
   ============================================================ */
@media print {
  /* Force a clean light render regardless of the on-screen theme */
  :root, html[data-theme="dark"], html[data-theme="light"] {
    --bg-base: #fff; --bg-surface: #fff; --bg-card: #fff; --bg-card-hover: #fff;
    --border-card: #ccc; --border-accent: #bbb;
    --text-primary: #000; --text-secondary: #333; --text-muted: #666;
    --scrollbar-bg: transparent;
  }
  html, body { background: #fff !important; color: #000 !important; }

  /* Hide app chrome and interactive controls — print is a document, not a tool.
     Buttons (status toggles, filters, add/delete, chevrons, compare, ?) are never
     print content; data lives in pills/spans/inputs that remain. */
  .sidebar, .topbar, .bottom-nav, .sidebar-backdrop, #export-menu,
  .milestone-actions, .ms-toolbar, .sync-status, .save-row,
  button { display: none !important; }

  /* Per-view interactive tool cards (inputs/editors) — hide so printouts are
     records, not forms. Data tables/lists/charts/info-cards remain. */
  #view-leave .card-bordered,        /* Leave: schedule editor + sell-back calc   */
  #view-timeline .card-bordered,     /* Timeline: custom-item editor              */
  .pay-inputs,                   /* Pay: the input form(s) (info cards stay)  */
  #ref-search                    /* Reference: the search box                 */
    { display: none !important; }

  /* Reference: expand any collapsed topics so the whole reference prints */
  .ref-topic-body { display: block !important; }

  /* Gantt chart scales to the page width */
  #gantt-svg { width: 100% !important; height: auto !important; }

  body { display: block; }
  .main { height: auto; overflow: visible; display: block; }
  .view-container { overflow: visible; }
  /* Print only the active view (the page you're on), not every view */
  .view { display: none !important; }
  .view.active { display: block !important; height: auto; padding: 0; }

  .card { break-inside: avoid; border: 1px solid #ddd !important; box-shadow: none !important; background: #fff !important; }
  input, select, textarea { border: 1px solid #ccc !important; background: #fff !important; color: #000 !important; }
  table { break-inside: auto; }
  tr { break-inside: avoid; }
  .stat-strip { display: flex !important; gap: 10px; }
  .stat-cell { border: 1px solid #ddd; }

  /* Denser tables on paper */
  .leave-table th, .leave-table td { padding: 4px 8px !important; font-size: 9px !important; }
  .leave-table tr:hover td { background: transparent !important; }
}

/* ============================================================
   TOOLTIP
   ============================================================ */
[data-tooltip] {
  position: relative;
}
[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-surface);
  border: 1px solid var(--border-card);
  color: var(--text-primary);
  font-size: 0.72rem;
  padding: 5px 10px;
  border-radius: 7px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
  z-index: 200;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}
[data-tooltip]:hover::after { opacity: 1; }

/* Sidebar nav tooltips: show to the right when sidebar is collapsed */
.sidebar.collapsed .nav-item[data-tooltip]::after {
  bottom: auto;
  top: 50%;
  left: calc(100% + 10px);
  transform: translateY(-50%);
}
.sidebar.collapsed .nav-item[data-tooltip]:hover::after { opacity: 1; }

/* ============================================================
   EMPTY STATE
   ============================================================ */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 60px 20px;
  color: var(--text-muted);
  text-align: center;
}

.empty-state svg { opacity: 0.3; }

.empty-state p {
  font-size: 0.85rem;
  max-width: 300px;
  line-height: 1.5;
}

/* ============================================================
   OVERDUE CARDS
   ============================================================ */
.card-overdue {
  border-left: 3px solid var(--color-danger) !important;
  background: rgba(248,113,113,0.04) !important;
}

.overdue-badge {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--color-danger);
  background: rgba(248,113,113,0.12);
  border: 1px solid rgba(248,113,113,0.3);
  border-radius: 6px;
  padding: 4px 10px;
  margin: 4px 0;
}

/* ============================================================
   ALERT BANNER
   ============================================================ */
.alert-banner {
  background: rgba(251,146,60,0.08);
  border: 1px solid rgba(251,146,60,0.3);
  border-left: 3px solid var(--color-leave);
  border-radius: 12px;
  padding: 12px 16px;
  margin-bottom: 16px;
  animation: fadeIn 0.2s ease;
}

.alert-banner-header {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--color-leave);
  margin-bottom: 10px;
  font-size: 0.82rem;
}

.alert-banner-items {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.alert-banner-item {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  padding: 6px 12px;
  flex: 1 1 180px;
}

.alert-banner-days {
  font-size: 1rem;
  font-weight: 800;
  color: var(--color-danger);
  min-width: 36px;
}

.alert-banner-label {
  font-size: 0.78rem;
  color: var(--text-primary);
  font-weight: 600;
  flex: 1;
}

.alert-banner-date {
  font-size: 0.72rem;
  color: var(--text-muted);
  white-space: nowrap;
}

.banner-dismiss-btn {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.8rem;
  padding: 2px 6px;
  border-radius: 4px;
  line-height: 1;
  transition: background 0.15s, color 0.15s;
}
.banner-dismiss-btn:hover {
  background: rgba(255,255,255,0.08);
  color: var(--text-primary);
}

/* ============================================================
   NAV BADGE
   ============================================================ */
.nav-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  background: var(--color-danger);
  color: #fff;
  font-size: 0.6rem;
  font-weight: 800;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  pointer-events: none;
}
.nav-badge--inprogress        { background: var(--brand); }
.bottom-nav-badge--inprogress { background: var(--brand); }

/* ============================================================
   MILESTONE NOTES
   ============================================================ */
.ms-notes-area {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border-card);
}

.ms-notes-input {
  width: 100%;
  height: 60px;
  min-height: 60px;
  overflow: hidden; /* fixed collapsed box — "Show all" toggle expands via JS */
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: 8px;
  color: var(--text-primary);
  font-size: 0.78rem;
  padding: 8px 10px;
  resize: vertical;
  font-family: inherit;
  line-height: 1.5;
  box-sizing: border-box;
  transition: border-color 0.15s;
}
.ms-notes-input:focus {
  outline: none;
  border-color: var(--brand-300);
}

.ms-note-toggle {
  background: none;
  border: none;
  color: var(--brand-300);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  cursor: pointer;
  padding: 3px 2px 0;
  display: block;
}
.ms-note-toggle:hover { text-decoration: underline; }

.ms-add-note-btn {
  background: none;
  border: 1px dashed rgba(255,255,255,0.15);
  border-radius: 6px;
  color: var(--text-muted);
  font-size: 0.72rem;
  padding: 4px 10px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.ms-add-note-btn:hover {
  border-color: var(--brand-300);
  color: var(--brand-300);
}

.ms-notes-rendered {
  font-size: 0.78rem;
  color: var(--text-secondary);
  line-height: 1.55;
  word-break: break-word;
}

.ms-overdue-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(251,146,60,0.12);
  color: var(--color-leave);
  border: 1px solid rgba(251,146,60,0.25);
  border-radius: 10px;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 2px 7px;
  letter-spacing: 0.02em;
}

/* ============================================================
   GANTT ZOOM CONTROLS
   ============================================================ */
.gantt-zoom-btns {
  display: flex;
  gap: 4px;
}

.gantt-zoom-btn {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 6px;
  color: var(--text-secondary);
  font-size: 0.72rem;
  font-weight: 600;
  padding: 4px 10px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.gantt-zoom-btn:hover,
.gantt-zoom-btn.active {
  background: rgba(15,118,110,0.15);
  border-color: var(--brand-300);
  color: var(--brand-300);
}

/* ============================================================
   GANTT MOBILE TOOLTIP
   ============================================================ */
.gantt-touch-tooltip {
  display: none;
  position: absolute;
  background: var(--bg-card);
  border: 1px solid var(--brand);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 0.78rem;
  color: var(--text-primary);
  box-shadow: 0 4px 20px rgba(0,0,0,0.5);
  max-width: 240px;
  z-index: 100;
  pointer-events: none;
  line-height: 1.4;
}

/* ============================================================
   MOBILE SIDEBAR OVERLAY
   ============================================================ */
.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 149;
  backdrop-filter: blur(2px);
}

body.sidebar-open .sidebar-backdrop {
  display: block;
}

@media (max-width: 768px) {
  .sidebar {
    position: fixed;
    top: 0;
    left: calc(-1 * var(--sidebar-width));
    height: 100%;
    z-index: 150;
    transition: left 0.25s ease;
  }

  body.sidebar-open .sidebar { left: 0; }
  body.sidebar-open { overflow-y: hidden; }

  .sidebar.collapsed { left: calc(-1 * var(--sidebar-width)); }

  .main { margin-left: 0 !important; }
}

/* ============================================================
   BOTTOM NAVIGATION (mobile)
   ============================================================ */
.bottom-nav {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: calc(62px + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: #0a111e;
  border-top: 1px solid rgba(255,255,255,0.16);
  box-shadow: 0 -2px 12px rgba(0,0,0,0.5);
  z-index: 200;
  flex-direction: row;
  align-items: stretch;
}

[data-theme="light"] .bottom-nav {
  background: #f8faff;
  border-top: 1px solid rgba(17,94,89,0.15);
  box-shadow: 0 -2px 12px rgba(0,0,0,0.08);
}

.bottom-nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: rgba(160, 178, 210, 0.8);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 6px 4px 4px;
  -webkit-tap-highlight-color: transparent;
  transition: color var(--transition);
  position: relative;
}

.bottom-nav-item.active { color: var(--sand); }
.bottom-nav-item:active  { opacity: 0.7; }

.bottom-nav-icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

.bottom-nav-badge {
  position: absolute;
  top: 4px;
  right: calc(50% - 18px);
  min-width: 15px;
  height: 15px;
  border-radius: 8px;
  background: var(--color-danger);
  color: #fff;
  font-size: 0.58rem;
  font-weight: 800;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
}

/* Layout toggle button — only shown on mobile */
.btn-layout-toggle {
  display: none;
  align-items: center;
  gap: 5px;
  padding: 6px 11px;
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  color: var(--text-secondary);
  border-radius: 8px;
  font-size: 0.75rem;
  font-weight: 600;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.btn-layout-toggle:hover  { background: var(--bg-card-hover); color: var(--text-primary); }
.btn-layout-toggle.active { border-color: var(--brand); color: var(--brand-300); }

/* Hero countdown grid — responsive columns */
.hero-countdown-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 16px;
}

/* ============================================================
   MOBILE LAYOUT (≤768px)
   Switch to: fixed topbar + fixed bottom nav + body scroll.
   Avoids mobile-browser overflow:hidden body quirks that cause
   the topbar to scroll away and kill inner-div touch scrolling.
   ============================================================ */
@media (max-width: 768px) {
  html { font-size: 16px; }

  /* Show bottom nav — explicitly redeclare position:fixed to avoid cascade issues */
  .bottom-nav {
    display: flex;
    position: fixed;
    bottom: 0; left: 0; right: 0;
  }
  .btn-layout-toggle { display: flex; }
  .member-badge      { display: none; }
  .view-subtitle     { display: none; }

  /* Body: switch to block on mobile — flex layout breaks position:fixed
     direct children on Chrome/Android. Body scroll handles overall scroll. */
  body {
    display: block;
    height: auto;
    min-height: 100svh;
    overflow-y: auto;
  }

  /* Main: full width block, natural height */
  .main {
    display: block;
    width: 100%;
    height: auto;
    min-height: 100svh;
    overflow: visible;
  }

  /* Topbar: fixed at top, accounts for status bar via safe-area-inset-top */
  .topbar {
    position: fixed;
    top: 0; left: 0; right: 0;
    padding-top: env(safe-area-inset-top, 0px);
    height: calc(54px + env(safe-area-inset-top, 0px));
    padding-left: 12px;
    padding-right: 12px;
    gap: 10px;
    z-index: 199;
    background: #0a111e;
    border-bottom: 1px solid rgba(255,255,255,0.12);
    box-shadow: 0 2px 12px rgba(0,0,0,0.4);
  }

  /* View container: natural height */
  .view-container { height: auto; overflow: visible; }

  /* View: natural height, padded below topbar and above bottom nav */
  .view {
    display: block;
    height: auto;
    overflow: visible;
    padding: calc(70px + env(safe-area-inset-top, 0px)) 14px calc(90px + env(safe-area-inset-bottom, 0px));
    animation: fadeIn 0.2s ease;
  }

  /* view.active is already display:block — ensure non-active stay hidden */
  .view:not(.active) { display: none; }

  /* Hero countdown: 2 cols then 1 col on narrow */
  .hero-countdown-grid { grid-template-columns: repeat(2, 1fr) !important; }

  /* Cards */
  .card { padding: 14px; }

  /* Larger milestone touch targets */
  .milestone-item { padding: 14px 12px; }
  .ms-filter-btn  { padding: 8px 14px; font-size: 0.78rem; }

  /* Stat strip wraps */
  .stat-strip { flex-wrap: wrap; }
  .stat-cell  { min-width: 45%; }

  /* Leave entry rows: stack */
  .leave-entry-row {
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
  }
  .leave-entry-row > *:nth-child(1) { grid-column: 1; grid-row: 1; }
  .leave-entry-row > *:nth-child(2) { grid-column: 1; grid-row: 2; }
  .leave-entry-row > *:nth-child(3) { grid-column: 2; grid-row: 2; justify-self: end; }
  .leave-entry-row > *:nth-child(4) { grid-column: 2; grid-row: 1; justify-self: end; }

  .section-title { margin: 20px 0 10px; }
  .countdown-days { font-size: 2rem; }
  .btn-export { padding: 6px 12px; font-size: 0.78rem; }
}

@media (max-width: 480px) {
  .hero-countdown-grid { grid-template-columns: 1fr !important; }
}

/* Hard stop: bottom nav is NEVER visible on wide viewports */
@media (min-width: 769px) {
  .bottom-nav { display: none !important; }
}

/* Extra bottom padding in regular browser mode to clear Chrome's bottom bar */
@media (max-width: 768px) and (display-mode: browser) {
  .view {
    padding-bottom: calc(130px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* ============================================================
   DESKTOP MODE OVERRIDE — forces sidebar layout on any screen
   ============================================================ */
html[data-layout="desktop"] .bottom-nav   { display: none !important; }
html[data-layout="desktop"] .btn-layout-toggle { display: flex !important; }
html[data-layout="desktop"] .member-badge { display: flex !important; }
html[data-layout="desktop"] .view-subtitle { display: block !important; }

/* Restore body/main to fixed-height scroll model */
html[data-layout="desktop"] body {
  height: 100vh !important;
  overflow: hidden !important;
}
html[data-layout="desktop"] .main {
  height: 100vh !important;
  overflow: hidden !important;
}

/* Topbar: back to in-flow */
html[data-layout="desktop"] .topbar {
  position: relative !important;
  height: 64px !important;
  padding: 0 20px !important;
  padding-top: 0 !important;
  background: var(--topbar-bg) !important;
  border-bottom: 1px solid var(--border-card) !important;
  box-shadow: none !important;
}

/* View container + view: back to overflow-based scroll */
html[data-layout="desktop"] .view-container {
  flex: 1 !important;
  height: 0 !important;
  overflow: hidden !important;
}
html[data-layout="desktop"] .view {
  height: 100% !important;
  overflow-y: auto !important;
  padding: 20px 24px !important;
}

/* Sidebar: inline collapsed */
html[data-layout="desktop"] .sidebar {
  position: relative !important;
  left: 0 !important;
  width: var(--sidebar-collapsed) !important;
  flex-shrink: 0 !important;
}

/* ── Reference / FAQ view (SW v15) ──────────────────────────── */
/* Search box with leading magnifier icon */
.ref-search-wrap { position: relative; margin-bottom: 8px; }
.ref-search-icon {
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  color: var(--text-muted); pointer-events: none;
}
.ref-search-input { padding-left: 40px; }

/* Topics header row: section-title left, expand/collapse-all right */
.ref-topics-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin: 26px 0 14px;
}
.ref-toolbar-btns { display: flex; gap: 8px; flex-wrap: wrap; }
#ref-toggle-details.active { background: var(--brand); border-color: var(--brand); color: #fff; }

.ref-topic { margin-bottom: 14px; }
.ref-topic-header {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 18px; cursor: pointer; user-select: none;
}
.ref-topic-header:hover { background: var(--bg-card-hover); }
.ref-topic-title { font-weight: 700; font-size: 0.92rem; color: var(--text-primary); flex: 1; }
.ref-warn-count {
  font-size: 0.68rem; font-weight: 700; color: var(--color-warn);
  background: rgba(251,146,60,0.12); border-radius: 10px; padding: 2px 8px;
}
.ref-topic-body { padding: 0 18px 12px; }
.ref-fact {
  padding: 10px 12px; margin-bottom: 8px; border-radius: 10px;
  background: var(--surface-2);
  border-left: 3px solid var(--brand);
}
.ref-fact-warn { border-left-color: var(--color-warn); background: rgba(251,146,60,0.06); }
.ref-fact-text { font-size: 0.84rem; color: var(--text-primary); margin: 0 0 4px; line-height: 1.45; }
.ref-cite {
  font-size: 0.7rem; color: var(--brand-300);
  font-weight: 600; letter-spacing: 0.03em;
}

/* Per-fact accordion: verbatim policy text + plain-English summary */
.ref-fact-acc { padding: 0; overflow: hidden; }
.ref-fact-head {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 12px; cursor: pointer; user-select: none;
}
.ref-fact-headtext { flex: 1; min-width: 0; }
.ref-fact-head .ref-fact-text { margin: 0 0 3px; }
.ref-fact-chevron {
  flex: none; box-sizing: border-box; width: 27px; height: 27px; padding: 6px;
  margin-top: 1px; border-radius: 50%; background: rgba(15,118,110,0.12);
  color: var(--brand); transition: transform 0.2s, background 0.15s;
}
.ref-fact-head:hover .ref-fact-chevron { background: rgba(15,118,110,0.22); }
/* collapsed = chevron points down (expand cue); expanded = flips up */
.ref-fact-chevron:not(.collapsed) { transform: rotate(180deg); }
.ref-fact-detail { padding: 2px 12px 12px; }
.ref-detail-block { margin-bottom: 12px; }
.ref-detail-label {
  display: inline-block; font-size: 0.68rem; font-weight: 800;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--brand); margin-bottom: 5px;
}
.ref-detail-label-plain { color: var(--sand-strong); }
.ref-verbatim {
  margin: 0; padding: 10px 12px; border-radius: 8px;
  background: var(--bg-card); border-left: 3px solid var(--brand);
  font-size: 0.8rem; line-height: 1.5; color: var(--text-secondary);
}
.ref-plain { margin: 0; font-size: 0.86rem; line-height: 1.55; color: var(--text-primary); }
.ref-report {
  display: inline-block; font-size: 0.72rem; font-weight: 700;
  color: var(--color-warn); text-decoration: none; letter-spacing: 0.02em;
}
.ref-report:hover { text-decoration: underline; }

/* Source documents list */
.ref-source {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 0; border-bottom: 1px solid var(--border-card);
}
.ref-source:last-child { border-bottom: none; }
.ref-source-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ref-source-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.86rem; font-weight: 700; color: var(--brand); text-decoration: none;
}
.ref-source-link:hover { text-decoration: underline; }
.ref-ext { flex: none; opacity: 0.7; }
.ref-source-meta { font-size: 0.72rem; color: var(--text-muted); }
.ref-source-flag { color: var(--sand-strong); font-weight: 700; }
.ref-report-sm { flex: none; }

/* In-app feedback / correction modal (no OS mail client) */
.fb-overlay {
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(7,14,24,0.55); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.fb-overlay[hidden] { display: none; }
.fb-dialog {
  position: relative; width: 100%; max-width: 480px; max-height: 90vh; overflow-y: auto;
  background: var(--bg-card); border: 1px solid var(--border-card); border-radius: 16px;
  padding: 22px 24px; box-shadow: 0 20px 60px rgba(0,0,0,0.4);
}
.fb-close {
  position: absolute; top: 10px; right: 14px; background: none; border: none;
  font-size: 1.6rem; line-height: 1; color: var(--text-muted); cursor: pointer;
}
.fb-close:hover { color: var(--text-primary); }
.fb-title { margin: 0 0 4px; font-size: 1.1rem; font-weight: 800; color: var(--text-primary); }
.fb-sub { margin: 0 0 14px; font-size: 0.82rem; color: var(--text-secondary); line-height: 1.45; }
.fb-context {
  background: var(--surface-2); border-radius: 10px; padding: 10px 12px; margin-bottom: 16px;
  border-left: 3px solid var(--brand);
}
.fb-context-label {
  display: block; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--brand); margin-bottom: 3px;
}
.fb-context strong { font-size: 0.9rem; color: var(--text-primary); }
.fb-context-cite { display: block; font-size: 0.72rem; color: var(--brand-300); font-weight: 600; margin-top: 2px; }
.fb-context-text { margin: 6px 0 0; font-size: 0.78rem; color: var(--text-secondary); line-height: 1.4; }
.fb-opt { font-weight: 400; color: var(--text-muted); font-size: 0.78rem; }
.fb-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }
.fb-send { background: var(--brand); border-color: var(--brand); color: #fff; }
.fb-send:hover { background: #0c5e57; border-color: #0c5e57; }
.fb-send:disabled { opacity: 0.6; cursor: default; }
.fb-status { margin: 12px 0 0; font-size: 0.8rem; color: var(--text-secondary); }
.fb-status-err { color: var(--color-danger); }
.fb-status-err a { color: var(--brand); }
.fb-email { color: var(--brand); font-weight: 700; user-select: all; }
.fb-success { text-align: center; padding: 10px; font-size: 0.95rem; font-weight: 700; color: var(--color-ok); }

/* Math derivation table */
.math-table { width: 100%; border-collapse: collapse; }
.math-table td { padding: 6px 8px; border-bottom: 1px solid var(--border-card); vertical-align: top; }
.math-f { font-family: ui-monospace, monospace; font-size: 0.78rem; color: var(--color-warn); white-space: nowrap; width: 1%; }
.math-l { font-size: 0.82rem; color: var(--text-primary); font-weight: 600; white-space: nowrap; }
.math-d { font-size: 0.82rem; color: var(--sand); font-weight: 700; white-space: nowrap; }
.math-n { font-size: 0.74rem; color: var(--text-secondary); }
.math-hot td { background: rgba(244,162,89,0.07); }
.math-warn td { background: rgba(248,113,113,0.07); }
.math-check { font-size: 0.78rem; font-weight: 600; margin-top: 10px; }

/* Teal sub-headers inside the Math card (de-buried from .card-title) */
.ref-subhead {
  font-size: 0.78rem; font-weight: 800; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--brand);
  margin: 0 0 12px;
}
/* Green hero accent for the Reference view (rule: one per view) — the
   two headline checks (180-day stack + SHPE) ride on the brand gradient. */
.ref-math-summary {
  background: var(--hero-grad);
  border-radius: 12px; padding: 14px 16px; margin-top: 14px;
  display: flex; flex-direction: column; gap: 8px;
}
.ref-math-check { font-size: 0.82rem; font-weight: 700; line-height: 1.4; }

/* Milestone reference chip */
.ms-ref-chip {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 0.66rem; font-weight: 700; cursor: pointer;
  color: var(--brand-300); background: rgba(45,212,191,0.1);
  border-radius: 9px; padding: 1px 7px; letter-spacing: 0.03em;
  transition: background 0.15s;
}
.ms-ref-chip:hover { background: rgba(45,212,191,0.22); }

@media (max-width: 768px) {
  .math-table td { padding: 5px 5px; }
  .math-n { display: none; } /* notes column too cramped on phones */
}

/* Reference topic highlight (reuses milestone pulse animation) */
.ref-topic.ms-highlight .card {
  box-shadow: 0 0 0 2px var(--brand-300);
  animation: ms-highlight-pulse 0.5s ease-out;
}

/* ── Parent-child milestones (SW v16) ───────────────────────── */
/* Sub-tasks render inside the parent card as an indented vertical list */
.milestone-children {
  margin: 8px 0 0 2px;
  padding: 8px 0 2px 14px;
  border-left: 2px solid var(--brand);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.milestone-item.milestone-child { padding: 10px 12px; box-shadow: none; cursor: pointer; }
.milestone-item.milestone-child .milestone-title { font-size: 0.85rem; }
.milestone-item.milestone-parent { cursor: pointer; }

/* Expand/collapse chevron — bigger, clearer click target */
.ms-child-chevron {
  width: 18px; height: 18px; flex-shrink: 0;
  color: var(--brand);
  padding: 2px; margin-right: 4px; border-radius: 5px;
  transition: background var(--transition), transform 0.2s;
}
.milestone-parent:hover .ms-child-chevron { background: var(--brand-soft); }
.ms-child-chevron { margin-right: 8px; vertical-align: -1px; color: var(--brand-300); }
/* Progress pill always visible (overrides hover-only .milestone-actions) */
.milestone-parent .milestone-actions { opacity: 1; }
.ms-progress-pill {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.03em;
  color: var(--brand-300); background: rgba(45,212,191,0.14);
  border: 1px solid rgba(45,212,191,0.3);
  border-radius: 12px; padding: 4px 10px; white-space: nowrap;
}
.ms-progress-pill.complete {
  color: var(--color-ok); background: rgba(52,211,153,0.12);
  border-color: rgba(52,211,153,0.3);
}


/* ── Native control theming (SW v17 polish) ─────────────────── */
/* Theme the dropdown popup for EVERY select (Settings `.form-input`, pay-in,
   and the onboarding wizard's `.wz-input`). Without an explicit background the
   option list falls back to a white popup on Windows Chrome while the text
   inherits the theme's light `--text-primary` → unreadable light-on-white in
   dark mode. Vars flip per theme, so this stays correct in light mode too. */
select option {
  background: var(--bg-surface);
  color: var(--text-primary);
}
/* Date/select inputs get the theme's control rendering via color-scheme;
   keep the picker indicator visible in dark mode */
[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator,
:root:not([data-theme="light"]) input[type="date"]::-webkit-calendar-picker-indicator {
  /* brightness(0) flattens the UA's grey glyph to black, invert(1) -> solid white */
  filter: brightness(0) invert(1);
  opacity: 0.9;
  cursor: pointer;
  width: 16px;
  height: 16px;
}
[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator:hover,
:root:not([data-theme="light"]) input[type="date"]::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
}

/* Two-step delete confirm (replaces native confirm()) */
.btn-remove.confirming {
  width: auto;
  padding: 0 10px;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  background: var(--color-danger);
  color: #fff;
  border-color: var(--color-danger);
}

/* Generic card highlight (custom timeline card scroll-to) */
.card.ms-highlight {
  box-shadow: 0 0 0 2px var(--brand-300);
  animation: ms-highlight-pulse 0.5s ease-out;
}

/* Custom timeline item rows (boxed, with edit/delete) */
.gtf-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  margin-bottom: 8px;
  border-radius: 10px;
  background: rgba(232,121,249,0.05);
  border: 1px solid rgba(232,121,249,0.22);
  border-left: 3px solid #e879f9;
}
.gtf-item.editing {
  border-color: var(--brand-300);
  box-shadow: 0 0 0 1px var(--brand-300);
}
.gtf-item-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.gtf-item-label { font-size: 0.84rem; font-weight: 600; color: var(--text-primary); }
.gtf-item-meta  { font-size: 0.72rem; color: var(--text-secondary); }

/* ── Toast notifications (SW v20, replaces native alert) ────── */
.app-toast {
  position: fixed;
  bottom: calc(80px + env(safe-area-inset-bottom, 0px));
  left: 50%;
  transform: translateX(-50%) translateY(12px);
  background: var(--bg-surface);
  border: 1px solid var(--brand-300);
  color: var(--text-primary);
  border-radius: 12px;
  padding: 10px 18px;
  font-size: 0.82rem;
  font-weight: 600;
  z-index: 1000;
  opacity: 0;
  transition: opacity 0.3s, transform 0.3s;
  box-shadow: 0 8px 32px rgba(0,0,0,0.45);
  max-width: 90vw;
}
.app-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.app-toast-ok     { border-color: var(--color-ok); }
.app-toast-danger { border-color: var(--color-danger); }

/* ── Documents register (SW v22) ────────────────────────────── */
.doc-item {
  display: flex;
  gap: 12px;
  padding: 14px 16px;
  margin-bottom: 10px;
  border-radius: 12px;
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  box-shadow: var(--card-shadow);
  transition: background var(--transition), border-color var(--transition);
}
.doc-item { align-items: flex-start; }
.doc-item:hover { background: var(--bg-card-hover); }
.doc-item.doc-filed { background: var(--surface-2); }
.doc-item.doc-gate { border-left: 3px solid var(--color-danger); }
.doc-state-col { flex-shrink: 0; width: 112px; padding-top: 1px; }
.doc-main { flex: 1; min-width: 0; }
.doc-title-row { display: flex; align-items: center; gap: 8px; }
.doc-gate-flag { color: var(--color-danger); font-size: 0.9rem; flex-shrink: 0; }
.doc-title { font-size: 0.92rem; font-weight: 600; color: var(--text-primary); }
.doc-item.doc-filed .doc-title { text-decoration: line-through; text-decoration-color: var(--text-muted); }
.doc-desc { font-size: 0.78rem; color: var(--text-secondary); margin-top: 3px; }
.doc-gate-note { font-size: 0.74rem; color: var(--color-danger); margin-top: 4px; font-weight: 600; }
.doc-cite { font-size: 0.68rem; color: var(--brand-300); font-weight: 600; letter-spacing: 0.03em; margin-top: 4px; }
.doc-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.doc-fields .form-input { font-size: 0.78rem; padding: 7px 10px; }
.doc-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex-shrink: 0; }
.doc-del { margin-left: 4px; }

.doc-state-pill {
  display: inline-flex; align-items: center;
  font-size: 0.68rem; font-weight: 800; letter-spacing: 0.03em;
  text-transform: uppercase; border-radius: 11px; padding: 3px 10px;
  white-space: nowrap;
}
.doc-pill-pending   { color: var(--text-muted);    background: var(--surface-2); border: 1px solid var(--border-card); }
.doc-pill-requested { color: var(--color-warn);    background: rgba(251,191,36,0.12); }
.doc-pill-received  { color: var(--brand-300);   background: rgba(45,212,191,0.12); }
.doc-pill-filed     { color: var(--color-ok);      background: rgba(52,211,153,0.12); }

@media (max-width: 768px) {
  .doc-fields { grid-template-columns: 1fr; }
  .doc-item { flex-direction: column; }
  .doc-actions { flex-direction: row; align-items: center; justify-content: space-between; }
  /* 7 bottom-nav items: let labels shrink/ellipsis instead of overflowing */
  .bottom-nav-item span { font-size: 0.6rem; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* Gate documents dashboard card (SW v22) */
.gate-docs-card {
  background: rgba(248,113,113,0.06);
  border: 1px solid rgba(248,113,113,0.3);
  border-left: 3px solid var(--color-danger);
  border-radius: 12px;
  padding: 12px 16px;
  margin-bottom: 16px;
  cursor: pointer;
}
.gate-docs-header {
  display: flex; align-items: center; gap: 8px;
  color: var(--color-danger); margin-bottom: 8px;
}
.gate-docs-header strong { font-size: 0.84rem; }
.gate-doc-row { display: flex; align-items: flex-start; gap: 8px; padding: 6px 0; }
.gate-doc-row + .gate-doc-row { border-top: 1px solid rgba(248,113,113,0.12); }
.gate-doc-warn { color: var(--color-danger); flex-shrink: 0; font-size: 0.85rem; }
.gate-doc-title { font-size: 0.82rem; font-weight: 600; color: var(--text-primary); }
.gate-doc-block { font-size: 0.72rem; color: var(--text-secondary); margin-top: 2px; }
.gate-doc-state {
  font-size: 0.64rem; font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase;
  color: var(--color-warn); background: rgba(251,191,36,0.12); border-radius: 9px;
  padding: 2px 8px; white-space: nowrap; flex-shrink: 0; align-self: center;
}

/* ── Retirement Pay view (SW v23) ───────────────────────────── */
/* Result card: padding-free but overflow visible so row help tooltips aren't clipped */
.pay-table-card { padding: 0; overflow: visible; }
.pay-table { width: 100%; border-collapse: collapse; }
/* Round the bottom row so its colored background matches the card corners */
.pay-table tr:last-child td:first-child  { border-bottom-left-radius: 12px; }
.pay-table tr:last-child td:last-child   { border-bottom-right-radius: 12px; }
.pay-table td { padding: 10px 16px; font-size: 0.86rem; border-bottom: 1px solid var(--border-card); }
.pay-table .pay-amt { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.pay-row.pay-add .pay-amt    { color: var(--color-ok); }
.pay-row.pay-sub .pay-amt    { color: var(--color-danger); }
.pay-row.pay-subtotal { background: var(--surface-2); }
.pay-row.pay-subtotal td { font-weight: 700; }
.pay-row.pay-net { background: var(--hero-grad); }
.pay-row.pay-net td { font-size: 1.05rem; font-weight: 800; color: var(--sand); border-bottom: none; }
.pay-row.pay-head td { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); font-weight: 700; }
.pay-compare td { padding: 9px 12px; font-size: 0.8rem; }
.pay-amt.pay-up   { color: var(--color-ok); }
.pay-amt.pay-down { color: var(--color-danger); }

/* Inputs grouped into nested cards on a tinted "background" card */
.card.pay-inputs { background: var(--brand-soft); box-shadow: var(--shadow-lg); }
.card.pay-inputs:hover { background: var(--brand-soft); }  /* keep the tint, don't grey the container */
.pay-subcard {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 14px;
  box-shadow: var(--card-shadow);
  transition: background var(--transition);
}
.pay-subcard:hover { background: var(--bg-card-hover); }  /* match other cards' hover */
.pay-subcard:last-of-type { margin-bottom: 0; }
.pay-section {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 12px;
  padding: 0;
}
.pay-section-title {
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--brand);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.pay-section-sub {
  font-size: 0.72rem;
  color: var(--text-secondary);
}
/* Prominent marginal/effective rate callout under Federal Tax */
/* Single hero-green card holding both rate figures side by side */
.pay-rate-box {
  display: flex;
  margin-top: 10px;
  background: var(--hero-grad);
  border-radius: 10px;
  padding: 12px 8px;
}
.pay-rate-chip {
  flex: 1;
  text-align: center;
  padding: 4px 12px;
}
.pay-rate-chip .pay-rate-val {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--sand);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
/* Prominent "Compare scenario" button */
.pay-compare-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; border-radius: 999px;
  background: var(--brand-soft); border: 1px solid var(--brand); color: var(--brand);
  font-weight: 700; font-size: 0.84rem; cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.pay-compare-btn:hover, .pay-compare-btn.active { background: var(--brand); color: #fff; }
.pay-rate-chip .pay-rate-lbl {
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #cdeee9;
  margin-top: 3px;
}
.pay-rate-note { font-size: 0.72rem; color: var(--text-secondary); margin-top: 8px; }

/* Help icon + tooltip (inputs, result rows, info cards) */
.pay-help-wrap { position: relative; display: inline-block; vertical-align: middle; }
.pay-help {
  display: inline-flex; align-items: center; justify-content: center;
  width: 15px; height: 15px; padding: 0; margin-left: 5px;
  border: 1px solid var(--brand-300); border-radius: 50%;
  background: transparent; color: var(--brand-300);
  font-size: 0.6rem; font-weight: 800; line-height: 1; cursor: pointer;
  font-family: inherit; text-transform: none; letter-spacing: 0;
  transition: background var(--transition), color var(--transition);
}
.pay-help:hover, .pay-help-wrap.open .pay-help { background: var(--brand-300); color: var(--bg-surface); }
.pay-tip {
  position: absolute; z-index: 60; left: 0; bottom: calc(100% + 9px);
  width: 240px; max-width: 70vw;
  background: var(--bg-surface); color: var(--text-primary);
  border: 1px solid var(--brand-300); border-radius: 8px;
  padding: 9px 11px; font-size: 0.74rem; font-weight: 400; line-height: 1.45;
  text-transform: none; letter-spacing: normal; text-align: left;
  box-shadow: 0 8px 24px rgba(0,0,0,0.45);
  opacity: 0; visibility: hidden; transform: translateY(4px);
  transition: opacity .12s, transform .12s;
}
.pay-tip::after {
  content: ""; position: absolute; top: 100%; left: 14px;
  border: 6px solid transparent; border-top-color: var(--brand-300);
}
/* Invisible bridge across the icon→bubble gap so hover doesn't drop when the
   mouse travels up to click the link inside the tooltip. */
.pay-tip::before {
  content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 12px;
}
/* Click-to-open (persistent) — works on desktop and touch */
.pay-help-wrap.open .pay-tip { opacity: 1; visibility: visible; transform: translateY(0); }
/* Desktop hover-preview — bubble also stays while hovering the bubble itself */
@media (hover: hover) {
  .pay-help-wrap:hover .pay-tip,
  .pay-help-wrap .pay-tip:hover { opacity: 1; visibility: visible; transform: translateY(0); }
}
.pay-tip-link {
  display: inline-block; margin-top: 7px; color: var(--brand-300);
  font-weight: 700; font-size: 0.72rem; text-decoration: none; cursor: pointer;
}
.pay-tip-link:hover { text-decoration: underline; }
/* Keep tooltips from clipping off the right edge near the end of a row */
.pay-tip.tip-right { left: auto; right: 0; }
.pay-tip.tip-right::after { left: auto; right: 14px; }

@media (max-width: 768px) {
  .pay-table td, .pay-compare td { padding: 8px 9px; font-size: 0.76rem; }
  .pay-section { flex-direction: column; gap: 2px; }
}

/* ============================================================
   DASHBOARD — WheelsUp bento layout (SW rebrand)
   ============================================================ */
/* Fluid frame: grows with the window up to a generous cap, centered beyond.
   Cap is sized so the fixed-count deadline rows fill nicely without each card
   ballooning; beyond it (ultrawide) the dashboard centers. */
#view-dashboard { width: min(100%, 1900px); margin-inline: auto; }

.dash-bento {
  display: grid;
  /* main grows freely; rail stays a tidy fixed-ish width */
  grid-template-columns: minmax(0, 1fr) clamp(280px, 24%, 360px);
  gap: 18px;
  align-items: start;
}
/* Card grids add columns as space allows (fluid), instead of widening each card */
.dash-main .grid-4 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.dash-main, .dash-rail { display: flex; flex-direction: column; min-width: 0; }
.dash-main > .section-title:first-child,
.dash-rail > .section-title:first-child { margin-top: 0; }

/* Key Countdown Timers: big hero spans the row, then 3 cards */
/* Hero is full-width on its own; the 3 cards below fill the row */
.dash-hero { margin-bottom: 14px; }
.kc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }

/* Hero card */
.dash-hero {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: center;
  padding: 22px 24px;
  border: none;
  color: #eafffb;
  background: var(--hero-grad);
}
.dash-hero-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }

/* Hero right panel — "Needs Attention", pushed to the right edge */
.dash-hero-side {
  align-self: stretch;
  display: flex; flex-direction: column; justify-content: center; gap: 9px;
  padding-left: 24px; min-width: 0;
  border-left: 1px solid rgba(255,255,255,0.18);
}
.hs-title { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sand); margin-bottom: 2px; }
.hs-row { display: flex; align-items: center; gap: 11px; font-size: 0.9rem; }
.hs-row.hs-clickable { cursor: pointer; }
.hs-days { font-weight: 800; color: #fff; background: rgba(255,255,255,0.15); border-radius: 7px; padding: 3px 9px; font-size: 0.8rem; min-width: 46px; text-align: center; flex: none; }
.hs-days.hs-warn { color: #ffd9b0; background: rgba(244,162,89,0.22); }
/* Single line per row: "Title — note". Title stays full (ellipsis fallback);
   only the note portion fades off, so row height stays fixed. */
.hs-line { display: flex; align-items: baseline; min-width: 0; }
.hs-label { color: #dff4f0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto; }
.hs-note-wrap {
  flex: 1 1 auto; min-width: 0; color: #aedbd4;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hs-gate { margin-top: 4px; font-size: 0.82rem; font-weight: 700; color: #ffd9b0; cursor: pointer; }
.hs-ok { font-size: 0.95rem; color: #dff4f0; display: flex; align-items: center; gap: 9px; }
.hs-ok-check { color: #7CF0C8; font-weight: 800; font-size: 1.15rem; }

@media (max-width: 760px) {
  .dash-hero { grid-template-columns: 1fr; gap: 16px; }
  .dash-hero-side { width: auto; border-left: none; border-top: 1px solid rgba(255,255,255,0.18); padding-left: 0; padding-top: 16px; }
}

/* Next Actions: full-height card, but the "view all" link sits right under the
   last item (content top-aligned; empty space falls below the link). */
.dash-bento { align-items: stretch; }
.dash-rail .rail-card { height: 100%; }
.dash-rail .na-row { padding: 11px 6px; }
.dash-rail .na-view-all { padding-top: 12px; }
.dash-hero-glow {
  position: absolute; right: -70px; top: -90px; width: 360px; height: 360px; border-radius: 50%;
  background: radial-gradient(circle, rgba(244,162,89,0.24), rgba(244,162,89,0.08) 45%, transparent 68%);
  filter: blur(14px); pointer-events: none;
}
.dash-hero-label { color: #cdeee9; font-size: 0.92rem; font-weight: 600; }
.dash-hero-num   { font-size: 4.2rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1; color: #fff; }
.dash-hero-unit  { color: var(--sand); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.14em; }
.dash-hero-date  { color: #d8f1ed; font-size: 0.92rem; margin-top: 2px; }
.dash-hero-mini  { height: 6px; border-radius: 99px; background: rgba(255,255,255,0.2); overflow: hidden; margin-top: 12px; max-width: 60%; }
.dash-hero-mini > span { display: block; height: 100%; background: var(--sand); }
.dash-hero-link  { color: var(--sand); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.04em; margin-top: 10px; opacity: 0.85; }
/* Keep the hero's teal gradient on hover (don't let .card:hover wash it grey) */
.dash-hero:hover { background: var(--hero-grad-hover); }

/* In-card "go to" link row */
/* Standard "→ View X" link used on every dashboard card */
.link-row { display: inline-block; font-size: 0.8rem; font-weight: 700; color: var(--brand); margin-top: 10px; letter-spacing: 0.02em; cursor: pointer; }
.link-row:hover { text-decoration: underline; }

/* Stat strip: branded labels */
.stat-cell-label { color: var(--brand); }

/* Rail "Needs Attention" (alert banner) — solid sand tint, crisp in light */
.alert-banner {
  background: var(--attn-bg);
  border: 1px solid var(--attn-border);
  border-left: 3px solid var(--sand);
}
.alert-banner-header { color: var(--sand-strong); font-weight: 800; }
.alert-banner-items { flex-direction: column; }
.alert-banner-item { background: var(--bg-card); border-color: var(--border-card); flex: 1 1 auto; box-shadow: var(--card-shadow); }

@media (max-width: 1080px) {
  .dash-bento { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .kc-grid { grid-template-columns: 1fr; }
}

/* Rail cards — consistent icon-chip header (matches the mockup) */
.dash-rail { gap: 16px; }
.dash-rail > * { margin: 0 !important; }
.rc-h {
  display: flex; align-items: center; gap: 9px;
  font-size: 0.92rem; font-weight: 800; color: var(--text-primary); margin-bottom: 10px;
}
.rc-ico {
  width: 30px; height: 30px; border-radius: 9px; flex: none;
  display: grid; place-items: center;
  background: var(--brand-soft); color: var(--brand);
}
.rc-ico.sand   { background: var(--attn-bg); color: var(--sand-strong); }
.rc-ico.danger { background: rgba(220,38,38,0.12); color: var(--color-danger); }
.alert-banner-header.rc-h { color: var(--sand-strong); }

/* Transition Window sits at the bottom, full width */
.transition-card { margin-top: 8px; }

/* Topbar theme toggle (moved from the sidebar) */
.btn-theme {
  display: grid; place-items: center; width: 36px; height: 36px;
  border-radius: 9px; color: var(--text-secondary);
  background: var(--bg-card); border: 1px solid var(--border-card);
  transition: color var(--transition), border-color var(--transition);
}
.btn-theme:hover { color: var(--brand); border-color: var(--brand); }
.btn-theme svg { width: 18px; height: 18px; }

/* Subtle, overlay-style scrollbars — no permanent grey bar beside the rail */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: transparent; border-radius: 99px;
  border: 3px solid transparent; background-clip: padding-box;
}
:hover > ::-webkit-scrollbar-thumb,
*:hover::-webkit-scrollbar-thumb { background: var(--scrollbar-bg); background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); background-clip: padding-box; }
* { scrollbar-width: thin; scrollbar-color: transparent transparent; }
.view:hover, .main:hover { scrollbar-color: var(--scrollbar-bg) transparent; }

/* Center every view's content (like the dashboard) so nothing goes full-bleed
   on ultrawide. Timeline gets a wider frame for the gantt; reference is
   narrower for comfortable reading line length. */
/* All views share the dashboard's width for consistency */
#view-timeline, #view-leave, #view-pay, #view-milestones,
#view-documents, #view-contacts, #view-reference, #view-settings {
  max-width: 1900px; margin-inline: auto;
}

/* Gantt is SVG-rendered — drive its fills/strokes from the theme (the .gantt-*
   HTML classes are legacy/unused). SVG fill/stroke accept CSS var(). */
/* All gantt SVG text uses Inter to match the rest of the app (it was system-ui) */
#gantt-svg text       { font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; }
#gantt-svg .g-headbg  { fill: var(--surface-2); }
#gantt-svg .g-head    { fill: var(--text-secondary); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; }  /* ACTIVITY + months — matches .form-label */
#gantt-svg .g-grid    { stroke: var(--border-card); }
#gantt-svg .g-rowline { stroke: var(--border-card); }
#gantt-svg .g-labelbg { fill: var(--surface-2); }
#gantt-svg .g-label   { fill: var(--text-secondary); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; }  /* matches .form-label */
#gantt-svg .g-groupbg { fill: var(--brand-soft); }
#gantt-svg .g-group   { fill: var(--brand); font-size: 0.84rem; font-weight: 800; letter-spacing: 0.08em; }  /* matches .section-title */
/* Don't grey the big chart card on hover */
.gantt-card:hover { background: var(--bg-card); }

/* Sell-back verdict / instruction box — hero-green with sand heading */
.lv-verdict { text-align: center; padding: 16px; border-radius: 12px; background: var(--hero-grad); color: #eafffb; }
.lv-verdict-head { font-size: 1.15rem; font-weight: 800; color: var(--sand); }
.lv-verdict-sub { font-size: 0.78rem; color: #cdeee9; margin-top: 5px; line-height: 1.4; }

/* Settings: green profile hero (the view's one on-brand green accent) */
.settings-hero {
  background: var(--hero-grad);
  border-radius: 14px; padding: 18px 22px; margin-bottom: 22px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.settings-hero-id { display: flex; flex-direction: column; gap: 4px; }
.settings-hero-name { font-size: 1.35rem; font-weight: 800; color: var(--sand); line-height: 1.1; }
.settings-hero-meta { font-size: 0.85rem; color: #cdeee9; }
.settings-hero-tag {
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: #cdeee9; background: rgba(255,255,255,0.12);
  padding: 5px 11px; border-radius: 99px; white-space: nowrap;
}
/* Don't grey the settings form cards on hover (they're content, not clickable) */
#view-settings .card:hover { background: var(--bg-card); }

/* ── Account gate (authui.js) ─────────────────────────────────────────────── */
.auth-overlay {
  position: fixed; inset: 0; z-index: 4000;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: var(--bg-base);
  background-image: radial-gradient(1200px 600px at 50% -10%, var(--brand-soft), transparent 70%);
}
.au-card {
  width: 100%; max-width: 380px;
  background: var(--bg-surface); border: 1px solid var(--border-card);
  border-radius: 16px; padding: 32px 28px;
  box-shadow: var(--card-shadow, 0 12px 40px rgba(0,0,0,0.25));
  text-align: center;
}
.au-card.au-loading { display: flex; align-items: center; justify-content: center; min-height: 120px; box-shadow: none; border: none; background: transparent; }
.au-spinner {
  width: 28px; height: 28px; border-radius: 50%;
  border: 3px solid var(--border-card); border-top-color: var(--brand);
  animation: au-spin 0.7s linear infinite;
}
@keyframes au-spin { to { transform: rotate(360deg); } }
.au-logo { display: block; margin: 0 auto 14px; }
.au-title { font-size: 1.2rem; font-weight: 800; color: var(--text-primary); margin: 0 0 4px; }
.au-sub { font-size: 0.83rem; color: var(--text-secondary); margin: 0 0 20px; }
.au-form { text-align: left; }
.au-label { display: block; font-size: 0.74rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--brand); margin: 14px 0 5px; }
.au-input {
  width: 100%; box-sizing: border-box; padding: 10px 12px;
  border: 1px solid var(--border-card); border-radius: 9px;
  background: var(--bg-card); color: var(--text-primary); font-size: 0.95rem;
}
.au-input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.au-hint { font-size: 0.72rem; color: var(--text-muted); margin: 5px 0 0; }
.au-turnstile { margin: 12px 0 2px; min-height: 65px; }
.au-check { display: flex; align-items: flex-start; gap: 8px; margin: 12px 0 2px; font-size: 0.8rem; color: var(--text-muted); line-height: 1.4; cursor: pointer; }
.au-check input { margin-top: 2px; flex: none; }
.au-check a { color: var(--brand-300, #5EEAD4); font-weight: 600; }
.au-check-sm { align-items: center; font-size: 0.82rem; margin: 4px 0 10px; }
.au-check-sm input { margin-top: 0; }
.au-btn {
  width: 100%; margin-top: 20px; padding: 11px; cursor: pointer;
  border: none; border-radius: 9px;
  background: linear-gradient(135deg, var(--brand), var(--brand-700));
  color: #fff; font-size: 0.95rem; font-weight: 700;
}
.au-btn:hover { filter: brightness(1.06); }
.au-btn:disabled { opacity: 0.6; cursor: default; }
.au-err { color: var(--color-danger); font-size: 0.8rem; margin: 12px 0 0; min-height: 1em; }
.au-links { margin-top: 18px; text-align: center; font-size: 0.8rem; color: var(--text-muted); }
.au-links a { color: var(--brand); text-decoration: none; font-weight: 600; }
.au-links a:hover { text-decoration: underline; }
.au-links span { margin: 0 6px; }

/* Account email line in the topbar profile dropdown */
.user-menu-email {
  padding: 8px 12px; font-size: 0.76rem; color: var(--text-secondary);
  border-bottom: 1px solid var(--border-card); word-break: break-all; max-width: 220px;
}
.user-menu-email:empty { display: none; }

/* Transient confirmation toast (e.g. email verified) */
.au-toast {
  position: fixed; left: 50%; bottom: 22px; transform: translate(-50%, 12px);
  z-index: 5000; opacity: 0; transition: opacity 0.25s, transform 0.25s;
  background: var(--ink); color: #fff; font-size: 0.84rem; font-weight: 600;
  padding: 10px 16px; border-radius: 10px; box-shadow: 0 8px 28px rgba(0,0,0,0.35);
}
.au-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* Account page — narrower than the data views for a focused form layout */
#view-account { max-width: 680px; }

/* "Coming soon" placeholder sections (2FA, email notifications) */
.acct-soon {
  font-size: 0.6rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--sand-strong); background: rgba(244,162,89,0.16);
  padding: 3px 8px; border-radius: 99px; margin-left: 8px; vertical-align: middle;
}
.acct-soon-card { opacity: 0.72; }
.acct-toggle {
  display: flex; align-items: center; gap: 9px; padding: 6px 0;
  font-size: 0.85rem; color: var(--text-secondary); cursor: not-allowed;
}
.acct-toggle input { width: 16px; height: 16px; accent-color: var(--brand); flex-shrink: 0; }

/* ── First-run onboarding wizard (onboarding.js, S-1.2) ───────────────────── */
/* Full-screen overlay below the auth gate (4000) so login still covers it. */
.wz-overlay {
  position: fixed; inset: 0; z-index: 3000;
  display: flex; align-items: center; justify-content: center;
  padding: 24px; overflow-y: auto;
  background: var(--bg-base);
  background-image:
    radial-gradient(900px 520px at 50% -12%, var(--brand-soft), transparent 62%),
    radial-gradient(760px 520px at 88% 112%, rgba(244,162,89,0.07), transparent 60%);
}
body.wz-open { overflow: hidden; }
.wz-card {
  width: 100%; max-width: 940px; margin: auto; display: flex; overflow: hidden;
  min-height: 500px;
  background: var(--bg-surface); border: 1px solid var(--border-card);
  border-radius: 18px;
  box-shadow: var(--card-shadow, 0 24px 60px rgba(0,0,0,0.35));
}

/* Left mission rail — the brand / first-impression moment. */
.wz-rail {
  flex: 0 0 304px; display: flex; flex-direction: column;
  padding: 34px 30px; color: #fff; position: relative; overflow: hidden;
  background: linear-gradient(158deg, #0F766E 0%, #115E59 55%, #0c4f4a 100%);
}
.wz-rail::after {   /* warm takeoff glow — the sand accent */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(440px 280px at 118% -12%, rgba(244,162,89,0.30), transparent 58%);
}
.wz-rail > * { position: relative; z-index: 1; }
.wz-rail-brand { display: flex; align-items: center; gap: 12px; }
.wz-rail-wordmark { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.015em; color: #fff; }
.wz-rail-mid { margin: auto 0; padding: 30px 0; }
.wz-rail-tag { font-size: 1.4rem; font-weight: 800; letter-spacing: -0.015em; margin: 0 0 11px; line-height: 1.12; }
.wz-rail-lead { font-size: 0.85rem; line-height: 1.5; color: rgba(255,255,255,0.82); margin: 0 0 26px; }
.wz-stepper { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.wz-step { display: flex; align-items: center; gap: 11px; padding: 6px 0; font-size: 0.9rem; color: rgba(255,255,255,0.55); border-radius: 8px; }
.wz-step[data-goto] { cursor: pointer; }
.wz-step[data-goto]:hover { color: #fff; }
.wz-step[data-goto]:hover .wz-step-mark { border-color: #fff; }
.wz-step[data-goto]:focus-visible { outline: 2px solid rgba(255,255,255,0.7); outline-offset: 2px; }
.wz-step-mark { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  font-size: 0.74rem; font-weight: 700; border: 1.5px solid rgba(255,255,255,0.35); color: rgba(255,255,255,0.7); }
.wz-step.active { color: #fff; font-weight: 700; }
.wz-step.active .wz-step-mark { background: #fff; color: var(--brand-700); border-color: #fff; }
.wz-step.done { color: rgba(255,255,255,0.9); }
.wz-step.done .wz-step-mark { background: #F4A259; color: #5a3410; border-color: #F4A259; }
.wz-rail-foot { font-size: 0.74rem; line-height: 1.45; color: rgba(255,255,255,0.66); margin: 0; }

/* Right form panel */
.wz-panel { flex: 1; min-width: 0; display: flex; flex-direction: column; padding: 40px 44px 34px;
  animation: wz-step-in 170ms ease-out; }
@keyframes wz-step-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .wz-panel { animation: none; } }
.wz-dots { display: flex; gap: 7px; }
.wz-dots-mobile { display: none; margin-bottom: 18px; }
.wz-dot { width: 30px; height: 6px; border-radius: 99px; background: var(--border-card); transition: background 0.2s; }
.wz-dot.done { background: var(--brand); opacity: 0.55; }
.wz-dot.active { background: var(--brand); }
.wz-eyebrow { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em;
  color: var(--brand); margin: 0 0 6px; }
.wz-title { font-size: 1.5rem; font-weight: 800; color: var(--text-primary); margin: 0 0 5px; letter-spacing: -0.01em; }
.wz-sub { font-size: 0.9rem; color: var(--text-secondary); margin: 0 0 22px; line-height: 1.45; }
.wz-body { display: block; }

/* Stack the rail above the form on narrow screens. */
@media (max-width: 720px) {
  .wz-card { flex-direction: column; min-height: 0; }
  .wz-rail { flex: none; flex-direction: row; align-items: center; justify-content: space-between; padding: 20px 24px; }
  .wz-rail-mid, .wz-rail-foot { display: none; }
  .wz-panel { padding: 26px 24px; }
  .wz-dots-mobile { display: flex; }
}
.wz-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 520px) { .wz-grid-2 { grid-template-columns: 1fr; } }
.wz-field { margin-bottom: 14px; }
.wz-label { display: block; font-size: 0.74rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--text-secondary); margin: 0 0 5px; }
.wz-opt { color: var(--text-muted); font-weight: 500; text-transform: none; letter-spacing: 0; }
.wz-input {
  width: 100%; box-sizing: border-box; padding: 10px 12px;
  border: 1px solid var(--border-card); border-radius: 9px;
  background: var(--bg-card); color: var(--text-primary); font-size: 0.92rem; font-family: inherit;
}
.wz-input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.wz-input.wz-invalid { border-color: var(--color-danger); }
.wz-input.wz-invalid:focus { box-shadow: 0 0 0 3px rgba(220,53,53,0.14); }
.wz-field-err { font-size: 0.76rem; color: var(--color-danger); font-weight: 600; margin: 5px 0 0; line-height: 1.4; }
.wz-group-label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--text-muted); margin: 20px 0 12px; padding-top: 16px; border-top: 1px solid var(--border-card); }
.wz-hint { font-size: 0.74rem; color: var(--text-muted); margin: 5px 0 0; line-height: 1.4; }
.wz-rank {
  display: flex; align-items: center; gap: 8px; margin: 2px 0 0;
  padding: 12px 15px; border-radius: 10px;
  border: 1px solid var(--brand); background: var(--brand-soft);
  font-size: 0.9rem; color: var(--text-secondary);
}
.wz-rank strong { color: var(--brand); font-weight: 800; }
.wz-rank.empty { border-style: dashed; border-color: var(--border-card); background: var(--bg-card); color: var(--text-muted); }
.wz-check { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 12px;
  font-size: 0.85rem; color: var(--text-secondary); line-height: 1.45; cursor: pointer;
  padding: 11px 13px; border: 1px solid var(--border-card); border-radius: 10px; background: var(--bg-card); }
.wz-check:hover { border-color: var(--brand); }
.wz-check input { margin-top: 2px; flex: none; width: 16px; height: 16px; accent-color: var(--brand); }
.wz-check strong { color: var(--text-primary); font-weight: 700; }
.wz-cond { margin-top: 4px; padding-top: 12px; border-top: 1px dashed var(--border-card); }
.wz-rev-row { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--border-card); font-size: 0.88rem; }
.wz-rev-row:last-of-type { border-bottom: none; }
.wz-rev-k { color: var(--text-muted); }
.wz-rev-v { color: var(--text-primary); font-weight: 600; text-align: right; }
.wz-muted { color: var(--text-muted); font-weight: 400; }
.wz-err { color: var(--color-danger); font-size: 0.82rem; margin: 12px 0 0; min-height: 1em; }
.wz-actions { display: flex; gap: 12px; margin-top: auto; padding-top: 22px; }
.wz-btn {
  flex: 1; padding: 12px; cursor: pointer; border: none; border-radius: 9px;
  background: linear-gradient(135deg, var(--brand), var(--brand-700));
  color: #fff; font-size: 0.95rem; font-weight: 700; font-family: inherit;
}
.wz-btn:hover { filter: brightness(1.06); }
.wz-btn-ghost {
  padding: 12px 22px; cursor: pointer; border-radius: 9px; font-family: inherit;
  border: 1px solid var(--border-card); background: transparent; color: var(--text-secondary);
  font-size: 0.95rem; font-weight: 600;
}
.wz-btn-ghost:hover:not(:disabled) { border-color: var(--brand); color: var(--text-primary); }
.wz-btn-ghost:disabled { opacity: 0.4; cursor: default; }
/* Onboarding — planned-leave repeatable list (optional Leave step) */
.wz-leave-list { display: flex; flex-direction: column; gap: 8px; }
.wz-leave-row { display: grid; grid-template-columns: 1fr 150px 78px 34px; gap: 8px; align-items: center; }
.wz-leave-row .wz-input { margin: 0; }
.wz-leave-del {
  width: 34px; height: 38px; display: grid; place-items: center; cursor: pointer;
  border: 1px solid var(--border-card); border-radius: 8px; background: transparent;
  color: var(--text-muted); font-size: 1.25rem; line-height: 1; font-family: inherit;
}
.wz-leave-del:hover { border-color: var(--color-danger); color: var(--color-danger); }
.wz-leave-add {
  margin-top: 10px; width: 100%; padding: 10px; cursor: pointer; font-family: inherit;
  border: 1px dashed var(--border-card); border-radius: 9px; background: transparent;
  color: var(--brand); font-size: 0.85rem; font-weight: 600;
}
.wz-leave-add:hover { border-color: var(--brand); background: var(--brand-soft); }
@media (max-width: 520px) {
  .wz-leave-row {
    grid-template-columns: 1fr 78px 34px;
    grid-template-areas: "label label label" "date days del";
  }
  .wz-leave-row [data-lv="label"] { grid-area: label; }
  .wz-leave-row [data-lv="date"]  { grid-area: date; }
  .wz-leave-row [data-lv="days"]  { grid-area: days; }
  .wz-leave-del { grid-area: del; }
}

/* ── Freemium gate — teased/blurred Pro view (gate.js) ─────────────────────── */
.gate-host { position: relative; }
.gate-blur { filter: blur(5px); opacity: 0.5; pointer-events: none; user-select: none; }
.gate-overlay {
  position: absolute; inset: 0; padding: 0 20px;
}
.gate-lock {
  position: sticky; top: 7vh; margin: 7vh auto 24px;
  max-width: 440px; text-align: center;
  background: var(--bg-surface); border: 1px solid var(--border-card);
  border-radius: 16px; padding: 32px 28px; box-shadow: var(--card-shadow, 0 18px 50px rgba(0,0,0,0.4));
}
.gate-lock-badge {
  display: inline-block; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.08em;
  text-transform: uppercase; color: #fff; background: var(--sand-strong);
  padding: 4px 10px; border-radius: 99px; margin-bottom: 16px;
}
.gate-lock-ico { display: block; margin: 0 auto 12px; color: var(--brand); }
.gate-lock-title { font-size: 1.15rem; font-weight: 800; color: var(--text-primary); margin: 0 0 8px; }
.gate-lock-blurb { font-size: 0.88rem; color: var(--text-secondary); line-height: 1.5; margin: 0 auto 18px; max-width: 380px; }
.gate-feature-list {
  list-style: none; margin: 0 auto 22px; padding: 14px 16px; max-width: 360px;
  text-align: left; background: var(--bg-inset, rgba(127,127,127,0.06));
  border: 1px solid var(--border-card); border-radius: 12px;
  display: grid; gap: 9px;
}
.gate-feature-list li { display: flex; align-items: flex-start; gap: 9px; font-size: 0.83rem; color: var(--text-secondary); line-height: 1.35; }
.gate-feat-ico { flex: 0 0 auto; margin-top: 2px; color: var(--brand); }

/* ── Demo mode (demo.js / ?demo=1) ────────────────────────────────────────── */
.demo-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 4000;
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px 16px;
  padding: 10px 18px; text-align: center;
  background: linear-gradient(135deg, var(--brand), var(--brand-700)); color: #fff;
  box-shadow: 0 -8px 24px rgba(0,0,0,0.22); font-size: 0.86rem;
}
.demo-banner-txt { color: rgba(255,255,255,0.96); }
.demo-banner-txt strong { font-weight: 800; }
.demo-banner-cta {
  border: 1px solid rgba(255,255,255,0.7); background: rgba(255,255,255,0.12); color: #fff;
  font-family: inherit; font-weight: 700; font-size: 0.84rem; cursor: pointer;
  padding: 6px 14px; border-radius: 8px; white-space: nowrap;
}
.demo-banner-cta:hover { background: #fff; color: var(--brand-700); }
body.has-demo-banner { padding-bottom: 52px; } /* keep the last content clear of the bar */

.au-demo { margin-top: 16px; text-align: center; }
.au-demo a { color: var(--brand); font-weight: 700; font-size: 0.85rem; text-decoration: none; }
.au-demo a:hover { text-decoration: underline; }
.gate-upgrade {
  display: inline-block; text-decoration: none; padding: 11px 22px; border-radius: 9px; border: none;
  cursor: pointer; font-family: inherit;
  background: linear-gradient(135deg, var(--brand), var(--brand-700)); color: #fff; font-weight: 700; font-size: 0.9rem;
}
.gate-upgrade:hover { filter: brightness(1.06); }
.gate-lock-note { font-size: 0.74rem; color: var(--text-muted); margin: 18px 0 0; }

/* ── Pricing modal (gate.js → Stripe Checkout) ────────────────────────────── */
.pricing-overlay {
  position: fixed; inset: 0; z-index: 5000; display: flex; align-items: center; justify-content: center;
  padding: 20px; background: rgba(6,16,27,0.6); backdrop-filter: blur(3px);
}
.pricing-modal {
  position: relative; width: 100%; max-width: 760px; background: var(--bg-surface);
  border: 1px solid var(--border-card); border-radius: 18px; padding: 30px 28px 24px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.5); max-height: 92vh; overflow: auto;
}
.pricing-close {
  position: absolute; top: 12px; right: 14px; background: none; border: none; cursor: pointer;
  font-size: 1.5rem; line-height: 1; color: var(--text-muted);
}
.pricing-close:hover { color: var(--text-primary); }
.pricing-title { font-size: 1.3rem; font-weight: 800; color: var(--text-primary); margin: 0 0 6px; text-align: center; }
.pricing-sub { font-size: 0.86rem; color: var(--text-secondary); margin: 0 auto 22px; max-width: 520px; text-align: center; }
.pricing-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 680px) { .pricing-grid { grid-template-columns: repeat(2, 1fr); } }
.pricing-loading { grid-column: 1 / -1; text-align: center; color: var(--text-muted); font-size: 0.85rem; padding: 20px; }
.pricing-card {
  position: relative; border: 1px solid var(--border-card); border-radius: 12px; padding: 18px 14px 16px;
  text-align: center; background: var(--bg-card); display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.pricing-card.featured { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); }
.pricing-badge {
  position: absolute; top: -9px; left: 50%; transform: translateX(-50%); white-space: nowrap;
  font-size: 0.58rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em;
  background: var(--brand); color: #fff; padding: 3px 9px; border-radius: 99px;
}
.pricing-badge.sand { background: var(--sand-strong); }
.pricing-plan { font-size: 0.82rem; font-weight: 700; color: var(--text-secondary); margin-top: 6px; }
.pricing-amount { font-size: 1.5rem; font-weight: 800; color: var(--text-primary); }
.pricing-interval { font-size: 0.72rem; color: var(--text-muted); margin-bottom: 12px; }
.pricing-choose {
  margin-top: auto; width: 100%; padding: 9px; border: none; border-radius: 8px; cursor: pointer; font-family: inherit;
  background: linear-gradient(135deg, var(--brand), var(--brand-700)); color: #fff; font-weight: 700; font-size: 0.82rem;
}
.pricing-choose:hover { filter: brightness(1.06); }
.pricing-choose:disabled { opacity: 0.6; cursor: default; }
.pricing-note { font-size: 0.72rem; color: var(--text-muted); text-align: center; margin: 18px 0 0; }

/* Account → Subscription plan badge */
.acct-plan-badge {
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 4px 11px; border-radius: 99px;
}
.acct-plan-badge.pro { color: #fff; background: linear-gradient(135deg, var(--brand), var(--brand-700)); }
.acct-plan-badge.free { color: var(--text-secondary); background: var(--surface-2, rgba(255,255,255,0.08)); border: 1px solid var(--border-card); }