@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@300;400;500;600;700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

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

:root {
  /* ── LIGHT MODE ── white cards on a soft grey page, one electric blue */
  --bg:            #f4f6f9;
  --bg-2:          #eceff4;
  --surface:       #ffffff;
  --surface-2:     #f7f8fa;
  --surface-3:     #eef1f5;
  --border:        #e3e7ee;
  --border-bright: #cfd5df;
  --line:          #edf0f4;

  --text:          #0f172a;
  --text-2:        #334155;
  --muted:         #64748b;
  --dim:           #94a3b8;

  /* Electric blue: the only accent. --accent-rgb feeds translucent tints. */
  --accent-rgb:    31 111 235;
  --accent:        #1f6feb;
  --accent-soft:   rgb(var(--accent-rgb) / 0.08);
  --accent-line:   rgb(var(--accent-rgb) / 0.28);

  --positive:      #15803d;
  --positive-soft: rgba(21,128,61,0.08);
  --negative:      #dc2626;
  --negative-soft: rgba(220,38,38,0.08);
  --warning:       #b45309;
  --warning-soft:  rgba(180,83,9,0.08);
  --info:          var(--accent);
  --info-soft:     var(--accent-soft);

  --primary:        var(--accent);
  --primary-dark:   #1a5fd0;
  --primary-dim:    var(--accent-soft);
  --primary-light:  var(--accent-soft);
  --danger:         var(--negative);
  --danger-light:   var(--negative-soft);
  --success:        var(--positive);
  --success-light:  var(--positive-soft);
  --accent-dim:     var(--accent-soft);
  --muted-light:    var(--dim);
  --info-light:     var(--info-soft);
  --warning-light:  var(--warning-soft);

  --shadow-sm:     0 1px 2px rgba(15,23,42,0.04);
  --shadow:        0 4px 16px -4px rgba(15,23,42,0.08), 0 1px 3px rgba(15,23,42,0.04);
  --shadow-lg:     0 24px 64px -12px rgba(15,23,42,0.20);
  --shadow-card:   0 1px 2px rgba(15,23,42,0.04), 0 1px 4px rgba(15,23,42,0.03);
  --shadow-hover:  0 8px 24px -8px rgba(15,23,42,0.12), 0 1px 3px rgba(15,23,42,0.05);
  --ease:          cubic-bezier(0.4, 0, 0.2, 1);

  --sidebar-bg:    #0a0b0e;
  --card:          var(--surface);
  --card-raised:   var(--surface-2);
  --border-light:  var(--border);
  --border-white:  var(--border-bright);
  --glow-p: none; --glow-a: none; --glow-g: none; --glow-r: none;

  /* SCALE — shared by all themes */
  --sidebar-w:           232px;
  --sidebar-collapsed-w: 56px;
  --topbar-h:      56px;
  --radius:        12px;
  --radius-sm:     8px;
  --radius-lg:     16px;
  --row-pad-y:     12px;
  --row-pad-x:     16px;
  --card-pad:      22px;
  --gap:           18px;

  --font-sans:     'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* Figures and small labels used to be set in a monospace face; they now
     share the sans with tabular digits, which keeps columns aligned without
     the code-terminal look. The name stays so existing rules keep working. */
  --font-mono:     'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-code:     'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Series hues (dataviz). Identity colours for the seven programme series;
     validated on the white card. --chart-3/4/6 pass only as a chip beside a
     text label, never as text. */
  --chart-1: #2a78d6;
  --chart-2: #eb6834;
  --chart-3: #1baf7a;
  --chart-4: #eda100;
  --chart-5: #e87ba4;
  --chart-6: #008300;
  --chart-7: #4a3aa7;
}

/* Theme toggle button */
#themeToggleBtn {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--muted);
  font: 500 11px/1 var(--font-mono);
  cursor: pointer;
  transition: color .12s, background .12s, border-color .12s;
  white-space: nowrap;
}
#themeToggleBtn:hover { color: var(--text); background: var(--surface-3); border-color: var(--border-bright); }

body {
  font-family: 'Inter', 'Plus Jakarta Sans', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 13px;
  line-height: 1.55;
  letter-spacing: -0.06px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  height: 100vh;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

/* Touch ergonomics — no accidental text selection on taps, smooth momentum scroll */
.bottom-nav, .nav-item, .btn, .salary-tab, .es-tab, .badge,
.dss-card, .dash-mini-card, .deal-q-btn {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}
.content, .table-wrap, .modal { -webkit-overflow-scrolling: touch; }

/* ══ NUMERIC UTILITY ══ */
.num, td.num, .stat-value, .dash-hero-value, .dash-mini-value,
.soc-row .v, [class*="-value"], [class*="-amount"] {
  font-family: var(--font-mono);
  font-feature-settings: "tnum", "zero";
}

/* ══════════════════════════════════════════
   LOGIN
══════════════════════════════════════════ */
body.login-body {
  overflow: auto; height: auto;
  /* Login is always the dark brand experience — keep tokens dark regardless of saved theme */
  --bg: #07080a; --surface: #101215; --surface-2: #16181c;
  --border: rgba(255,255,255,0.08); --border-bright: rgba(255,255,255,0.14);
  --text: #f4f5f7; --text-2: #c5c9d1; --muted: #8a909c; --dim: #626874;
  --accent-rgb: 47 128 255; --accent: #2f80ff;
  --accent-soft: rgb(var(--accent-rgb) / 0.12); --accent-line: rgb(var(--accent-rgb) / 0.35);
  --primary: #2f80ff;
}

@keyframes loginGradient {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes cardGlow {
  0%, 100% { box-shadow: 0 24px 64px rgba(0,0,0,0.5); }
  50%       { box-shadow: 0 24px 64px rgba(0,0,0,0.5); }
}

.login-theme-btn {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 100;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.25);
  background: rgba(255,255,255,0.15);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background .2s, transform .15s;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}
.login-theme-btn:hover { background: rgba(255,255,255,0.28); transform: scale(1.08); }
[data-theme="dark"] .login-theme-btn { border-color: rgba(255,255,255,0.15); background: rgba(0,0,0,0.25); }

.login-wrap {
  min-height: 100vh;
  background: #0a0a0c;
  background-image: radial-gradient(ellipse at 50% 0%, rgb(var(--accent-rgb) / 0.06) 0%, transparent 60%);
  display: grid;
  place-items: center;
  padding: 20px;
}

.login-card {
  background: #141417;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-lg);
  padding: 40px 34px;
  width: 380px;
  max-width: 95vw;
  box-shadow: 0 24px 64px rgba(0,0,0,0.5);
}
[data-theme="dark"] .login-card {
  background: #141417;
  border-color: rgba(255,255,255,0.08);
}

.login-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
}

.login-logo-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  font: 700 14px/1 var(--font-mono);
  display: grid;
  place-items: center;
  box-shadow: 0 0 0 1px var(--accent-line), 0 4px 16px var(--accent-soft);
  flex-shrink: 0;
}

.login-logo-text { display: flex; flex-direction: column; gap: 2px; }
.login-logo-name {
  font: 600 15px/1 var(--font-sans);
  color: var(--text);
  letter-spacing: -0.3px;
}
.login-logo-name span { color: var(--accent); }
.login-logo-sub {
  font: 500 10px/1 var(--font-mono);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

.login-card > p {
  font: 400 12.5px/1.5 var(--font-sans);
  color: var(--muted);
  margin-bottom: 24px;
}

.login-card .form-group {
  margin-bottom: 14px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.login-card label {
  font: 600 10px/1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--muted);
}

.login-card input {
  width: 100%;
  background: var(--bg-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 9px 12px;
  font: 400 13px/1 var(--font-sans);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}

.login-card input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.login-card input::placeholder { color: var(--dim); }

.login-submit {
  width: 100%;
  padding: 12px;
  margin-top: 8px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 8px;
  font: 700 13px/1 var(--font-sans);
  cursor: pointer;
  transition: all .18s;
  letter-spacing: 0.3px;
}

.login-submit:hover {
  background: var(--accent);
  transform: translateY(-1px);
}
.login-submit:active { transform: scale(0.99) translateY(0); }

.login-card .alert {
  padding: 10px 14px;
  border-radius: 8px;
  font: 500 12px/1.4 var(--font-sans);
  margin-bottom: 14px;
  border: 1px solid transparent;
}

.login-card .alert-error {
  background: var(--negative-soft);
  color: var(--negative);
  border-color: rgba(240,107,115,0.3);
}

.login-card .alert-success {
  background: var(--positive-soft);
  color: var(--positive);
  border-color: rgba(95,211,150,0.3);
}

.login-security-note {
  text-align: center;
  margin-top: 20px;
  font: 500 11px/1 var(--font-mono);
  color: var(--dim);
}

/* ══════════════════════════════════════════
   APP LAYOUT
══════════════════════════════════════════ */
.app {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

/* ══════════════════════════════════════════
   SIDEBAR
══════════════════════════════════════════ */
.sidebar {
  /* Always dark regardless of page theme — scoped tokens tuned to the slate palette */
  --bg:       #14161b;
  --bg-2:     #191c22;
  --surface:  #222630;
  --surface-2: #2a2f3a;
  --text:     #eef1f6;
  --text-2:   #b9c1d1;
  --muted:    #8a94a9;
  --dim:      #646e84;
  --border-bright: #333947;

  width: var(--sidebar-w);
  flex-shrink: 0;
  background: #14161b;
  border-right: 1px solid #262b34;
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 100;
  transition: transform .2s, width .2s;
  overflow: hidden;
}

/* ── Collapsed sidebar ── */
.sidebar.collapsed { width: var(--sidebar-collapsed-w); }

.sidebar.collapsed .sidebar-logo-text,
.sidebar.collapsed .sidebar-logo-sub,
.sidebar.collapsed #userLabel,
.sidebar.collapsed .nav-section-label,
.sidebar.collapsed .nav-label,
.sidebar.collapsed .sidebar-footer-info,
.sidebar.collapsed .sidebar-user-name,
.sidebar.collapsed .sidebar-user-role { display: none; }

.sidebar.collapsed .sidebar-logo { padding: 12px 0; align-items: center; }
.sidebar.collapsed .sidebar-logo-row { justify-content: center; gap: 0; }
.sidebar.collapsed .sidebar-user-pill { justify-content: center; margin: 6px 8px; padding: 8px 0; }
.sidebar.collapsed .nav-item { justify-content: center; padding: 9px 0; gap: 0; }
.sidebar.collapsed .nav-item::before { display: none; }
.sidebar.collapsed .nav-section-label { padding: 0; height: 0; margin: 0; }
.sidebar.collapsed .nav-badge { position: absolute; top: 2px; right: 4px; }
.sidebar.collapsed #sidebarCollapseBtn svg { transform: rotate(180deg); }

.sidebar-collapse-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--dim);
  padding: 4px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  transition: color .15s, background .15s;
  flex-shrink: 0;
}
.sidebar-collapse-btn:hover { background: var(--surface); color: var(--text); }

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

/* ── SIDEBAR (stays dark) ── */
.sidebar {
  width: var(--sidebar-w); background: var(--sidebar-bg);
  display: flex; flex-direction: column;
  position: fixed; top: 0; left: 0; bottom: 0; z-index: 100;
  border-right: 1px solid #262b34;
  transition: width 0.25s cubic-bezier(.4,0,.2,1); overflow: hidden;
}
.sidebar::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 200px;
  background: linear-gradient(180deg, rgb(var(--accent-rgb) / 0.06) 0%, transparent 100%);
  pointer-events: none;
}
.sidebar-logo {
  padding: 20px 16px 16px;
  border-bottom: 1px solid var(--border);
}

.sidebar-logo-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.sidebar-logo-icon {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: var(--accent);
  color: #fff;
  font: 700 12px/1 var(--font-mono);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px var(--accent-line);
}

.sidebar-logo h2 {
  font: 600 13px/1 var(--font-sans);
  color: var(--text);
  letter-spacing: -0.2px;
}

.sidebar-logo h2 span { color: var(--accent); }

.sidebar-logo-sub {
  font: 600 9.5px/1 var(--font-mono);
  color: var(--dim);
  text-transform: uppercase;
  letter-spacing: 1.2px;
  padding-left: 38px;
}

#userLabel {
  font: 500 11px/1 var(--font-mono);
  color: var(--muted);
  padding-left: 38px;
  margin-top: 2px;
}

.sidebar-nav {
  flex: 1;
  padding: 12px 8px;
  overflow-y: auto;
}

.sidebar-nav::-webkit-scrollbar { width: 3px; }
.sidebar-nav::-webkit-scrollbar-track { background: transparent; }
.sidebar-nav::-webkit-scrollbar-thumb { background: var(--border-bright); border-radius: 2px; }

.nav-section-label {
  font: 600 9.5px/1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 1.4px;
  color: var(--dim);
  padding: 14px 8px 6px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  cursor: pointer;
  color: var(--text-2);
  font: 500 12.5px/1 var(--font-sans);
  border-radius: 8px;
  margin-bottom: 2px;
  position: relative;
  transition: background .12s, color .12s;
}

.nav-item:hover {
  background: var(--surface);
  color: var(--text);
}

.nav-item.active {
  background: var(--surface-2);
  color: var(--text);
  box-shadow: inset 0 0 0 1px var(--border-bright);
}

.nav-item.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 20%;
  bottom: 20%;
  width: 2px;
  background: var(--accent);
  border-radius: 0 2px 2px 0;
}

.nav-item .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  color: var(--muted);
  flex-shrink: 0;
}

.nav-item.active .icon { color: var(--accent); }

.nav-badge {
  background: var(--negative);
  color: #fff;
  font: 700 9px/1 var(--font-mono);
  padding: 2px 5px;
  border-radius: 4px;
  margin-left: auto;
}

.nav-badge-bottom {
  position: absolute;
  top: 2px;
  right: 2px;
  background: var(--negative);
  color: #fff;
  font: 700 8px/1 var(--font-mono);
  padding: 1px 4px;
  border-radius: 3px;
}

.sidebar-user-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  margin: 8px;
}

.sidebar-user-avatar {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  color: var(--accent);
  font: 600 10px/1 var(--font-mono);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.sidebar-user-name {
  font: 500 11.5px/1 var(--font-sans);
  color: var(--text-2);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-footer {
  padding: 12px 10px;
  border-top: 1px solid var(--border);
}

.sidebar-footer-info {
  font: 500 10.5px/1.6 var(--font-mono);
  color: var(--dim);
  margin-bottom: 10px;
  padding: 8px 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 7px;
}

/* ── Sidebar collapse ── */
.sidebar-collapse-btn {
  width: 100%; background: none; border: 1px solid var(--border-bright);
  border-radius: 8px; color: var(--dim); cursor: pointer;
  padding: 8px 10px; margin-bottom: 8px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  transition: all 0.18s;
}
.sidebar-collapse-btn:hover { background: var(--surface); color: var(--text-2); }
.sidebar-collapse-icon-open, .sidebar-collapse-icon-closed { transition: transform 0.3s; flex-shrink: 0; }
body:not(.sidebar-collapsed) .sidebar-collapse-icon-closed { display: none; }
body.sidebar-collapsed .sidebar-collapse-icon-open { display: none; }

body.sidebar-collapsed .sidebar { width: 60px; }
body.sidebar-collapsed .sidebar-logo h2,
body.sidebar-collapsed .sidebar-user,
body.sidebar-collapsed #userLabel,
body.sidebar-collapsed .nav-section-label,
body.sidebar-collapsed .nav-item .nav-label,
body.sidebar-collapsed .sidebar-footer-info,
body.sidebar-collapsed #logoutBtn .nav-label,
body.sidebar-collapsed .sidebar-collapse-label,
.sidebar.collapsed .sidebar-collapse-label { display: none; }
body.sidebar-collapsed .sidebar-logo { padding: 16px 10px; }
body.sidebar-collapsed .sidebar-logo-row { justify-content: center; }
body.sidebar-collapsed .nav-item { justify-content: center; padding: 10px; }
body.sidebar-collapsed .nav-item .icon { width: auto; }
body.sidebar-collapsed .sidebar-collapse-btn { padding: 8px; justify-content: center; }
body.sidebar-collapsed .main { margin-left: 60px; }
.sidebar.collapsed ~ .main { margin-left: var(--sidebar-collapsed-w); }
body.sidebar-collapsed .sidebar-footer { padding: 10px; }

/* ── MAIN ── */
.main { margin-left: var(--sidebar-w); flex: 1; display: flex; flex-direction: column; min-width: 0; transition: margin-left 0.25s cubic-bezier(.4,0,.2,1); }

/* ── TOPBAR ── */
.topbar {
  height: var(--topbar-h);
  background: var(--bg-2);
  border-bottom: 1px solid var(--border);
  padding: 0 24px; height: 64px;
  display: flex; align-items: center; gap: 12px;
  position: sticky; top: 0; z-index: 50;
  box-shadow: 0 1px 0 var(--border), 0 4px 16px rgba(13,18,38,0.06);
}
.topbar-crumb { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.topbar-breadcrumb { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.8px; color: var(--muted); }
.topbar h1, #pageTitle { font-size: 14px; font-weight: 600; color: var(--text); letter-spacing: -0.2px; }
.topbar-right { display: flex; align-items: center; gap: 10px; }
.topbar-date { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 500; color: var(--muted); }
.topbar-pulse {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--positive); box-shadow: 0 0 0 0 var(--positive);
  animation: topbar-pulse 2s infinite;
}
@keyframes topbar-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(95,211,150,0.4); }
  70%  { box-shadow: 0 0 0 6px rgba(95,211,150,0); }
  100% { box-shadow: 0 0 0 0 rgba(95,211,150,0); }
}
#todayDate { font-size: 11px; font-weight: 500; color: var(--muted); }

/* ── Notification Bell ──────────────────────────────────── */
.notif-bell-wrap { position: relative; }
.notif-bell-btn {
  background: var(--bg); border: 1px solid var(--border); border-radius: 50%;
  width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
  font-size: 16px; cursor: pointer; position: relative; transition: all 0.2s;
}
.notif-bell-btn:hover { background: var(--primary-light); border-color: var(--primary); }
.notif-badge {
  position: absolute; top: -5px; right: -5px; background: #ef4444;
  color: #fff; border-radius: 50%; min-width: 18px; height: 18px;
  font-size: 0.65rem; font-weight: 700; display: flex; align-items: center;
  justify-content: center; padding: 0 3px; border: 2px solid var(--card);
}
.notif-panel {
  position: absolute; right: 0; top: calc(100% + 10px); width: 340px;
  background: var(--card); border: 1px solid var(--border); border-radius: 14px;
  box-shadow: var(--shadow-lg); z-index: 999; overflow: hidden;
}
.notif-panel-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; font-size: 0.82rem; font-weight: 700; color: var(--text);
  border-bottom: 1px solid var(--border); background: var(--bg);
}
.notif-panel-close { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 14px; }
.notif-empty { padding: 24px; text-align: center; color: var(--muted); font-size: 0.82rem; }
.notif-item { padding: 14px 16px; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 6px; }
.notif-item:last-child { border-bottom: none; }
.notif-item-name { font-size: 0.85rem; font-weight: 700; color: var(--text); }
.notif-item-meta { font-size: 0.75rem; color: var(--muted); }
.notif-item-note { font-size: 0.75rem; color: var(--text-2); font-style: italic; }
.notif-item-actions { display: flex; gap: 8px; margin-top: 4px; }
.notif-approve-btn { flex: 1; padding: 6px; border-radius: 8px; border: none; cursor: pointer; font-size: 0.75rem; font-weight: 700; background: #22c55e; color: #fff; font-family: inherit; transition: opacity 0.15s; }
.notif-deny-btn { flex: 1; padding: 6px; border-radius: 8px; border: none; cursor: pointer; font-size: 0.75rem; font-weight: 700; background: #ef4444; color: #fff; font-family: inherit; transition: opacity 0.15s; }
.notif-approve-btn:hover, .notif-deny-btn:hover { opacity: 0.85; }
.notif-has-pending { background: rgb(var(--accent-rgb) / 0.1) !important; border-color: var(--primary) !important; }

.content { padding: 22px 26px 60px; overflow-y: auto; flex: 1; animation: fadeIn 0.25s ease; }
.content::-webkit-scrollbar { width: 4px; }
.content::-webkit-scrollbar-track { background: transparent; }
.content::-webkit-scrollbar-thumb { background: var(--border-bright); border-radius: 2px; }

/* ══════════════════════════════════════════
   PAGES
══════════════════════════════════════════ */
.page { display: none; }
.page.active { display: block; animation: fadeIn 0.18s ease; }

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

/* ══════════════════════════════════════════
   PAGE HEAD PATTERN
══════════════════════════════════════════ */
.page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 20px;
  gap: 12px;
}

.page-head h1 {
  font: 600 22px/1.1 var(--font-sans);
  color: var(--text);
  letter-spacing: -0.5px;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}

.page-head .tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-radius: 4px;
  font: 600 10px/1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--accent);
  vertical-align: middle;
}

.page-head .sub {
  font: 500 11.5px/1 var(--font-mono);
  color: var(--muted);
}

.page-head .actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
}

/* ══════════════════════════════════════════
   BUTTONS
══════════════════════════════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 13px;
  border-radius: 9px;
  font: 500 12px/1 var(--font-sans);
  border: 1px solid var(--border-bright);
  background: var(--surface);
  color: var(--text-2);
  cursor: pointer;
  transition: background .16s var(--ease), color .16s var(--ease),
              border-color .16s var(--ease), box-shadow .16s var(--ease),
              transform .08s var(--ease);
  white-space: nowrap;
  letter-spacing: 0.1px;
}

.btn:hover { background: var(--surface-2); color: var(--text); border-color: var(--border-bright); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-soft); border-color: var(--accent-line); }

.btn-primary {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  font-weight: 600;
  box-shadow: none;
}

.btn-primary:hover { background: var(--accent); border-color: var(--accent); box-shadow: var(--shadow-sm); }

.btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--muted);
}

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

.btn-danger {
  color: var(--negative);
  border-color: rgba(240,107,115,0.4);
  background: transparent;
}

.btn-danger:hover { background: var(--negative-soft); }

.btn-success {
  background: var(--positive);
  color: #0a0d14;
  border-color: var(--positive);
  font-weight: 600;
}

.btn-success:hover { background: #72e3a7; }

.btn-warning {
  background: var(--warning);
  color: #0a0d14;
  border-color: var(--warning);
  font-weight: 600;
}

.btn-sm { padding: 4px 8px; font-size: 11px; }

/* ══════════════════════════════════════════
   BADGES
══════════════════════════════════════════ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font: 600 10px/1 var(--font-mono);
  padding: 3px 7px;
  border-radius: 4px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  border: 1px solid transparent;
  white-space: nowrap;
}

.badge-blue   { background: var(--info-soft);     color: var(--info);     border-color: rgba(126,182,255,0.2); }
.badge-teal   { background: var(--accent-soft);   color: var(--accent);   border-color: var(--accent-line); }
.badge-yellow { background: var(--warning-soft);  color: var(--warning);  border-color: rgba(245,184,96,0.2); }
.badge-red    { background: var(--negative-soft); color: var(--negative); border-color: rgba(240,107,115,0.2); }
.badge-green  { background: var(--positive-soft); color: var(--positive); border-color: rgba(95,211,150,0.2); }
.badge-grey   { background: var(--surface-2);     color: var(--text-2);   border-color: var(--border); }
.badge-purple { background: rgba(160,130,255,0.1); color: #a082ff; border-color: rgba(160,130,255,0.2); }

/* ══════════════════════════════════════════
   CARDS
══════════════════════════════════════════ */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 18px;
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: box-shadow .25s var(--ease), border-color .25s var(--ease);
}

.card:hover {
  border-color: var(--border-bright);
  box-shadow: var(--shadow);
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  background: transparent;
}

.card-title {
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  font-size: 0.92rem; font-weight: 700; color: var(--text); letter-spacing: -0.1px;
}

/* ══════════════════════════════════════════
   TABLES
══════════════════════════════════════════ */
.table-wrap { overflow-x: auto; }

table { width: 100%; border-collapse: collapse; font-size: 12.5px; }

thead th {
  text-align: left;
  padding: 11px var(--row-pad-x);
  font: 600 10px/1 var(--font-mono);
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 1;
}

tbody td {
  padding: var(--row-pad-y) var(--row-pad-x);
  border-bottom: 1px solid var(--line);
  color: var(--text-2);
  vertical-align: middle;
}

tbody td strong { color: var(--text); font-weight: 600; }

tbody tr { transition: background .1s; }

tbody tr:hover { background: var(--surface-2); }
tbody tr:hover td { background: transparent; }

tbody tr:last-child td { border-bottom: none; }

/* ══════════════════════════════════════════
   FORMS
══════════════════════════════════════════ */
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}

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

.form-group label {
  font: 600 10px/1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-2);
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  background: var(--surface);
  color: var(--text);
  border: 1.5px solid var(--border);
  border-radius: 9px;
  padding: 9px 12px;
  font: 400 13px/1.4 var(--font-sans);
  outline: none;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease);
}

.form-group input:hover,
.form-group select:hover,
.form-group textarea:hover { border-color: var(--border-bright); }

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.form-group input::placeholder,
.form-group textarea::placeholder { color: var(--dim); }

.form-group input[type=number] { font-family: var(--font-mono); }

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

/* Select arrow */
.form-group select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%237a8294' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 28px;
}

/* ══════════════════════════════════════════
   FILTER BAR
══════════════════════════════════════════ */
.filter-bar {
  display: flex;
  gap: 10px;
  align-items: flex-end;
  flex-wrap: wrap;
  margin-bottom: 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
}

.filter-bar .form-group { margin: 0; }

/* ══════════════════════════════════════════
   MODAL
══════════════════════════════════════════ */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(4,6,12,0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 200;
  padding: 20px;
}

.modal-overlay.open,
.modal-overlay.active { display: flex; animation: fadeIn .18s ease; }

.modal {
  background: var(--surface-2);
  border: 1px solid var(--border-bright);
  border-radius: var(--radius-lg);
  padding: 0;
  width: 540px;
  max-width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 32px 80px rgba(0,0,0,0.7), 0 0 0 1px var(--border-bright);
  animation: slideUp .2s ease;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: var(--surface-3);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  z-index: 1;
}

.modal-header h2, .modal-header h3 {
  font: 600 14px/1 var(--font-sans);
  color: var(--text);
  letter-spacing: -0.2px;
}

.modal-close {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  background: var(--surface-2);
  border: 1px solid var(--border-bright);
  color: var(--text-2);
  cursor: pointer;
  font-size: 14px;
  transition: color .12s, background .12s;
}

.modal-close:hover { color: var(--text); background: var(--surface-3); }

/* Modal body padding */
.modal > *:not(.modal-header):not(.hm-footer) {
  padding-left: 20px;
  padding-right: 20px;
}

.modal > .form-row,
.modal > .form-group { margin-top: 14px; }

.modal > div:last-of-type:not(.modal-header):not(.hm-section):not(.hm-footer) {
  padding-bottom: 20px;
}

.modal > p {
  padding-top: 14px;
  font: 400 12px/1.5 var(--font-sans);
  color: var(--muted);
}

.modal-section-label {
  font: 600 10px/1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--muted);
  padding: 14px 20px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
/* Deal modal redesign */
.deal-modal-redesign { padding: 24px 28px; }
/* Pull the header to the modal's edges so it stays pinned (and opaque)
   while the body scrolls beneath it */
.deal-modal-redesign .modal-header {
  padding: 20px 28px 14px;
  margin: -24px -28px 0;
  background: var(--surface-2);
  z-index: 5;
}
.deal-modal-sec-label {
  font: 700 10px/1 var(--font-mono); text-transform: uppercase;
  letter-spacing: .08em; color: var(--primary); margin-bottom: 8px;
}
#dealPackageToggleBtn.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.emp-cal-day-dragsel { outline: 2px solid var(--accent) !important; outline-offset: -2px; background: rgb(var(--accent-rgb) / 0.16) !important; }
/* Invoice # cell: number on its own line (never truncated), file badge below */
.deal-inv-filed-badge {
  display: inline-block; margin-top: 4px; padding: 2px 7px; border-radius: 20px;
  font: 700 10px/1.6 var(--font-mono); background: var(--positive-soft); color: var(--positive);
  border: 1px solid rgba(95,211,150,0.25); white-space: nowrap;
}
.deal-inv-missing-badge {
  display: inline-block; margin-top: 4px; padding: 2px 7px; border-radius: 20px;
  font: 600 10px/1.6 var(--font-mono); background: var(--surface-2); color: var(--muted);
  border: 1px dashed var(--border); white-space: nowrap;
}
.deal-inv-missing-badge:hover { color: var(--accent); border-color: var(--accent); }
/* No agreement on file yet — someone still owes the client a document. Warm
   and solid, because this is a job to do rather than a field left blank. */
.deal-inv-todo-badge {
  display: inline-block; margin-top: 4px; padding: 2px 7px; border-radius: 20px;
  font: 700 10px/1.6 var(--font-mono); background: rgba(234,88,12,0.16); color: #f59e0b;
  border: 1px solid rgba(234,88,12,0.35); white-space: nowrap;
}
.deal-inv-todo-badge:hover { background: rgba(234,88,12,0.26); }
/* Sent, waiting on the countersigned copy. */
.deal-inv-await-badge {
  display: inline-block; margin-top: 4px; padding: 2px 7px; border-radius: 20px;
  font: 600 10px/1.6 var(--font-mono); background: var(--surface-2); color: var(--muted);
  border: 1px solid var(--border); white-space: nowrap;
}
.deal-inv-await-badge:hover { color: var(--accent); border-color: var(--accent); }
.ig-event-card {
  display: flex; flex-direction: column; gap: 8px;
  border: 1px solid var(--border); border-left: 3px solid var(--accent);
  border-radius: 8px; padding: 10px;
  background: var(--bg-2);
}
.ig-event-row { display: flex; gap: 8px; align-items: center; }
.ig-event-row .ig-ev-name { flex: 1; min-width: 0; font-weight: 600; }
.ig-event-row .ig-ev-pkg { flex: 1; min-width: 0; font-size: 0.82rem; }
.ig-event-row .ig-ev-amt { width: 110px; flex-shrink: 0; font-size: 0.82rem; font-family: var(--font-mono); }
.ig-ev-benefits { width: 100%; resize: vertical; font-family: var(--font-mono); font-size: 0.78rem; }
.ig-ev-del {
  width: 28px; height: 28px; flex-shrink: 0; border-radius: 6px; cursor: pointer;
  background: transparent; color: var(--muted); border: 1px solid var(--border);
  font-size: 12px; line-height: 1;
}
.ig-ev-del:hover { color: #fff; background: var(--negative); border-color: var(--negative); }
.ig-benefit-gap { height: 10px; }

/* ── Employee portal (staff dashboard) responsive layout ── */
.emp-dash-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 900px) {
  .emp-dash-grid { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  /* Pay stat tiles: stack two-up instead of four crushed columns */
  .emp-pay-stats { flex-wrap: wrap; }
  .emp-pay-stats > div {
    flex: 1 1 50% !important; min-width: 50%; box-sizing: border-box;
    padding: 14px 16px !important;
    border-left: none !important;
    border-right: 1px solid var(--border) !important;
    border-top: 1px solid var(--border);
  }
  .emp-pay-stats > div:nth-child(2n) { border-right: none !important; }
  .emp-pay-stats > div:nth-child(-n+2) { border-top: none; }
  .emp-paye-grid { grid-template-columns: 1fr 1fr 1fr; gap: 8px !important; padding: 14px 12px !important; }
  .emp-paye-grid > div { padding: 0 4px; }
}
@media (max-width: 420px) {
  .emp-paye-grid { grid-template-columns: 1fr; }
  .emp-paye-grid > div {
    border-left: none !important; border-right: none !important;
    border-bottom: 1px solid var(--border); padding-bottom: 10px;
  }
  .emp-paye-grid > div:last-child { border-bottom: none; padding-bottom: 0; }
}

/* ── Expenses: invoices-to-pay section ── */
.exp-pending-card {
  padding: 0; overflow: hidden; margin-bottom: 20px;
  border-left: 3px solid var(--accent);
}
.exp-pending-hd {
  padding: 14px 20px; margin: 0;
  border-radius: var(--radius) var(--radius) 0 0;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(90deg, rgb(var(--accent-rgb) / 0.07), transparent 55%);
}
.exp-pending-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 20px;
  font: 800 11px/1 var(--font-mono);
  background: var(--accent); color: #fff;
}
.exp-pending-empty {
  display: flex; align-items: center; gap: 12px;
  padding: 18px 20px;
}
.exp-pending-empty .epe-icon {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--positive-soft); color: var(--positive);
  font: 800 15px/1 var(--font-sans);
}
.exp-pending-empty .epe-title { font: 600 13px/1.3 var(--font-sans); color: var(--text); }
.exp-pending-empty .epe-sub { font: 500 11px/1.5 var(--font-sans); color: var(--muted); margin-top: 2px; }
.exp-pend-row {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 20px; border-bottom: 1px solid var(--border);
}
.exp-pend-row:last-child { border-bottom: none; }
.exp-pend-check {
  width: 22px; height: 22px; flex-shrink: 0; border-radius: 50%; cursor: pointer;
  border: 2px solid var(--border); background: transparent;
  transition: border-color .12s, background .12s;
  position: relative;
}
.exp-pend-check:hover { border-color: var(--positive); background: var(--positive-soft); }
.exp-pend-check:hover::after {
  content: "✓"; position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font: 800 12px/1 var(--font-sans); color: var(--positive);
}
.exp-due-chip {
  font: 700 9.5px/1.5 var(--font-mono); letter-spacing: .04em;
  padding: 2px 8px; border-radius: 20px; white-space: nowrap;
  background: var(--surface-2); color: var(--muted); border: 1px solid var(--border);
}
.exp-due-soon { background: var(--warning-soft); color: var(--warning); border-color: rgba(245,184,96,0.3); }
.exp-due-overdue { background: rgba(239,68,68,0.12); color: var(--negative); border-color: rgba(239,68,68,0.3); }
@media (max-width: 640px) {
  .exp-pend-row { flex-wrap: wrap; padding: 12px 14px; }
}

/* ── Invoice preview sheet (always renders as light "paper" in both themes) ── */
.ig-preview-scroll { background: var(--bg-2); padding: 22px; max-height: 68vh; overflow-y: auto; }
.ig-preview-footer {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 14px 20px; border-top: 1px solid var(--border); flex-wrap: wrap;
}
.ig-preview-note { font: 500 10.5px/1.5 var(--font-mono); color: var(--muted); }
.ig-sheet { max-width: 620px; margin: 0 auto; font-family: Calibri, 'Segoe UI', var(--font-sans); }
.ig-pageno { font: 700 10px/1 var(--font-mono); letter-spacing: .1em; color: var(--muted); margin: 18px 2px 8px; text-transform: uppercase; }
.ig-pageno:first-child { margin-top: 0; }
.ig-page {
  position: relative; background: #fff; color: #262626; border-radius: 3px; overflow: hidden;
  box-shadow: 0 6px 28px rgba(0,0,0,.22); font-family: Calibri, Carlito, 'Segoe UI', var(--font-sans);
}
/* Diagonal header and footer bands, as in invoice_template.docx */
.ig-head { position: relative; height: 104px; }
.ig-head::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, #000 0%, #1a1a1a 35%, #8c8c8c 100%);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 30%);
}
.ig-head img { position: absolute; right: 36px; top: 18px; height: 44px; }
.ig-foot { position: relative; height: 104px; margin-top: 28px; }
.ig-foot::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, #000 0%, #1a1a1a 45%, #9a9a9a 100%);
  clip-path: polygon(0 0, 100% 72%, 100% 100%, 0 100%);
}
.ig-foot img { position: absolute; left: 36px; bottom: 16px; height: 40px; }
.ig-body { padding: 0 40px; margin-top: -54px; position: relative; }
.ig-body--doc { margin-top: 24px; min-height: 380px; }
.ig-inv-title { font: 700 27px/1 Calibri, Carlito, var(--font-sans); color: #000; margin: 0 0 4px; }
.ig-from {
  background: #EAF1DD; padding: 40px 10px 22px 62%; font: 400 10px/1.75 'Segoe UI', Arial, var(--font-sans); color: #262626;
}
.ig-date { margin-top: 10px; }
.ig-client { font: 400 10px/1.7 'Segoe UI', Arial, var(--font-sans); color: #262626; margin: 6px 0 26px; width: 66%; }
.ig-client-hd { font-size: 11.5px; letter-spacing: .02em; padding: 0 5px; }
.ig-client-row { padding: 0 5px; }
.ig-client-row.is-band { background: #EAF1DD; }

/* The line-item table: white with thin black borders. Pinned so the app's
   own table styles (dark header, hover tint) never reach the paper. */
:root .ig-page table.ig-items { width: 90%; margin: 0 auto 22px; border-collapse: collapse; table-layout: fixed; background: #fff; }
:root .ig-page .ig-items th, :root .ig-page .ig-items td {
  background: #fff !important; color: #262626 !important; border: 1px solid #000; padding: 6px 7px;
  font: 400 9.5px/1.35 'Microsoft Sans Serif', Arial, var(--font-sans); text-align: center; vertical-align: top;
  text-transform: none; letter-spacing: 0; box-shadow: none;
}
:root .ig-page .ig-items th {
  font: 400 11px/1.2 'Franklin Gothic Demi', 'Franklin Gothic Medium', Arial, var(--font-sans); color: #000 !important;
  text-transform: uppercase; letter-spacing: .02em; padding: 8px 4px; vertical-align: middle; white-space: nowrap; overflow: visible;
}
:root .ig-page .ig-items .ig-line td { height: 34px; }
:root .ig-page .ig-items .ig-line td:first-child { text-align: left; font: italic 700 8.5px/1.35 Calibri, Carlito, var(--font-sans); }
:root .ig-page .ig-items .ig-sum td { vertical-align: middle; padding: 4px 7px; }
:root .ig-page .ig-items td.ig-gap { border: none; }
:root .ig-page .ig-items td.ig-sum-lbl { border-top: none; border-bottom: none; border-left: none; color: #868686 !important; text-align: right; }
:root .ig-page .ig-items .ig-sum--first td.ig-sum-lbl { border-top: 1px solid #000; }
:root .ig-page .ig-items tr:hover td { background: #fff !important; }

.ig-paybox { border: 1px solid #000; margin: 0 0 4px; }
.ig-paybox-main { padding: 6px 8px; text-align: right; font: 700 10.5px/1.45 'Segoe UI', Arial, var(--font-sans); color: #000; }
.ig-link { color: #0563C1; text-decoration: underline; }
.ig-paybox-terms {
  background: #EAF1DD; border-top: 1px solid #000; padding: 5px 8px; text-align: right;
  font: 400 7.5px/1.6 Calibri, Carlito, var(--font-sans); color: #262626;
}

.ig-agree-title { font: 700 10.5px/1.4 'Segoe UI', Arial, var(--font-sans); color: #000; text-align: center; margin: 0 0 34px; }
.ig-sec-hd { font: 700 9.5px/1.4 Calibri, Carlito, var(--font-sans); color: #000; text-decoration: underline; margin-bottom: 14px; }
.ig-events-lbl { font: 700 8.5px/1.4 Calibri, Carlito, var(--font-sans); color: #000; }
.ig-events { list-style: none; margin: 0 0 30px; padding: 0 0 0 16px; font: 400 10.5px/1.5 Arial, var(--font-sans); color: #262626; }
.ig-events li::before { content: '➢'; margin-right: 10px; font-size: 9px; }
.ig-pkg-title { margin: 14px 0 4px; font: 700 10px/1.3 Aptos, Arial, var(--font-sans); color: #262626; }
.ig-benefits { margin: 0 0 18px; padding: 0 0 0 36px; font: 400 10.5px/1.3 Arial, var(--font-sans); color: #262626; }
.ig-benefits li { list-style: disc; }
.ig-benefits .ig-gap-li { list-style: none; height: 10px; }
.ig-muted { color: #999; font-size: 10.5px; margin-bottom: 30px; }
.ig-total-cost { font: 700 10px/1.4 'Segoe UI', Arial, var(--font-sans); color: #000; }
.ig-comments { font: 700 10px/1.6 Calibri, Carlito, var(--font-sans); color: #121C23; }
.ig-tc { margin: 0 0 30px; padding-left: 18px; font: 400 8.5px/1.45 Calibri, Carlito, var(--font-sans); color: #121C23; }
.ig-tc li { margin-bottom: 12px; padding-left: 8px; }
.ig-tc p { margin: 0; }
.ig-tc p + p { margin-top: 6px; }
.ig-tc .ig-tc-sub { display: flex; gap: 8px; margin-top: 6px; }
.ig-tc .ig-tc-sub > span { flex-shrink: 0; }
.ig-sig { text-align: center; font: 400 8.5px/2.3 Calibri, Carlito, var(--font-sans); color: #121C23; }
.ig-sig-name { font-weight: 700; text-decoration: underline; color: #000; }
@media (max-width: 640px) {
  .ig-body { padding: 0 18px; }
  .ig-from { padding-left: 45%; }
  .ig-client { width: 100%; }
  .ig-preview-scroll { padding: 12px; }
}
}
.deal-edit-only-row { display: none; }
.deal-modal-editing .deal-edit-only-row { display: block; }
.deal-modal-editing .deal-edit-only-row.form-row { display: flex; }
.deal-mini-lbl { font: 600 10px/1 var(--font-mono); color: var(--muted); margin-bottom: 4px; display: block; }
.deal-package-row {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
}
.deal-package-single { margin-top: 12px; }
.deal-package-single.hidden { display: none; }
.deal-package-single label { display: block; margin-bottom: 6px; font: 500 12px/1.2 var(--font-sans); color: var(--muted); }
.deal-package-single input { width: 100%; }
.deal-package-single textarea { width: 100%; resize: vertical; }
.deal-package-single .deal-package-details-lbl { margin-top: 12px; }
.deal-package-item { display: flex; flex-direction: column; gap: 6px; }
.deal-package-item .dpr-details { width: 100%; resize: vertical; }
.deal-package-single-hint { margin-top: 5px; font: 400 11.5px/1.4 var(--font-sans); color: var(--dim); }
.deal-package-row .dpr-name { flex: 1; font: 600 12px/1.3 var(--font-sans); color: var(--text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.deal-payment-toggle { display: flex; gap: 8px; }
.deal-pay-btn {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 10px 14px; border-radius: 10px; border: 1.5px solid var(--border);
  background: var(--surface); color: var(--muted); font: 600 13px/1 var(--font-sans);
  cursor: pointer; transition: all .15s;
}
.deal-pay-btn:hover { border-color: var(--primary); color: var(--text); }
.deal-pay-btn.active { background: var(--primary); border-color: var(--primary); color: #fff; }
.deal-pay-icon { font-size: 15px; }

.modal-section-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

.section-title {
  font: 600 10px/1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--muted);
  margin-bottom: 10px;
  margin-top: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.section-title::after { content: ''; flex: 1; height: 1px; background: var(--border); }

/* ══════════════════════════════════════════
   STAT CARDS
══════════════════════════════════════════ */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: var(--gap);
}

.stat-card {
  background: var(--surface);
  padding: 18px 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 96px;
}

.stat-label {
  font: 600 10px/1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--muted);
}

.stat-value {
  font: 600 26px/1.1 var(--font-mono);
  color: var(--text);
  letter-spacing: -0.5px;
}

.stat-card.blue   { box-shadow: inset 2px 0 0 var(--info); }
.stat-card.yellow { box-shadow: inset 2px 0 0 var(--warning); }
.stat-card.red    { box-shadow: inset 2px 0 0 var(--negative); }
.stat-card.green  { box-shadow: inset 2px 0 0 var(--positive); }

/* Keep colored stat values readable */
.stat-card.blue   .stat-value { color: var(--info); }
.stat-card.yellow .stat-value { color: var(--warning); }
.stat-card.red    .stat-value { color: var(--negative); }
.stat-card.green  .stat-value { color: var(--positive); }

/* ══════════════════════════════════════════
   MISC COMPONENTS
══════════════════════════════════════════ */
.section-title {
  font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px;
  color: var(--muted-light); margin-bottom: 12px; margin-top: 24px;
  display: flex; align-items: center; gap: 8px;
}
.section-title::after { content: ''; flex: 1; height: 1px; background: var(--border); }

.alert {
  padding: 12px 16px; border-radius: 10px; font-size: 0.86rem;
  margin-bottom: 16px; display: flex; align-items: center; gap: 8px; font-weight: 500;
}
.alert-error   { background: #fef2f4; color: #991b1b; border: 1px solid #fecdd3; }
.alert-success { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; }
.alert-info    { background: #eff6ff; color: #1e40af; border: 1px solid #bfdbfe; }

.deduction-box {
  background: var(--primary-light); border: 1px solid rgb(var(--accent-rgb) / 0.18);
  border-radius: 10px; padding: 18px; margin-top: 16px;
}
.deduction-box h3 {
  color: var(--primary); font-size: 0.88rem; margin-bottom: 10px;
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
}
.deduction-row { display: flex; justify-content: space-between; font-size: 0.86rem; padding: 4px 0; color: var(--text-2); }
.deduction-row.total {
  font-weight: 700; border-top: 1px dashed rgb(var(--accent-rgb) / 0.25);
  padding-top: 10px; margin-top: 6px; color: var(--primary); font-size: 0.92rem;
}

.adj-list { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.adj-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; background: var(--bg-2); border: 1px solid var(--border);
  border-radius: 9px; font-size: 0.845rem; transition: background 0.15s;
}
.adj-item:hover { background: var(--primary-light); border-color: rgb(var(--accent-rgb) / 0.22); }
.adj-item .adj-amount { font-weight: 700; margin-right: 4px; }
.adj-item .adj-amount.positive { color: var(--danger); }
.adj-item .adj-amount.negative { color: var(--success); }

.empty-state { text-align: center; padding: 56px 20px; color: var(--muted-light); }
.empty-state .icon { font-size: 3rem; margin-bottom: 14px; opacity: 0.5; }
.empty-state div:last-child { font-size: 0.9rem; color: var(--muted); }

/* ══════════════════════════════════════════
   TABS
══════════════════════════════════════════ */
.tabs { display: flex; gap: 2px; border-bottom: 2px solid var(--border); margin-bottom: 20px; }
.tab {
  padding: 10px 20px; border: none; background: none; cursor: pointer;
  font-size: 0.875rem; color: var(--muted); border-bottom: 2px solid transparent;
  margin-bottom: -2px; font-weight: 500; font-family: inherit; transition: all 0.15s;
  border-radius: 8px 8px 0 0;
}
.tab:hover { background: var(--bg); color: var(--text); }
.tab.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: 700; background: var(--primary-light); }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* ══════════════════════════════════════════
   CALENDAR
══════════════════════════════════════════ */
.cal-page-header {
  display: flex; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap;
}
.cal-nav {
  display: flex; align-items: center; gap: 6px; flex: 1;
}
.cal-nav h2 {
  flex: 1; text-align: center; font-size: 1.1rem; margin: 0; font-weight: 700;
}
.cal-controls {
  display: flex; align-items: center; gap: 8px; flex-shrink: 0;
}
.cal-controls select { min-width: 140px; }

.cal-grid-wrap {
  background: var(--card); border-radius: var(--radius); border: 1px solid var(--border);
  overflow: hidden; box-shadow: var(--shadow-card);
}
.cal-header-row {
  display: grid; grid-template-columns: repeat(7, 1fr);
  background: linear-gradient(135deg, var(--primary-dark), var(--primary));
}
.cal-header-row > div {
  padding: 13px 0; text-align: center;
  font-size: 0.7rem; font-weight: 700; color: rgba(255,255,255,0.75);
  text-transform: uppercase; letter-spacing: 0.8px;
}
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal-cell {
  min-height: 96px; border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 8px 10px; cursor: pointer; transition: all 0.15s;
  position: relative; background: var(--surface);
}
.cal-cell:nth-child(7n) { border-right: none; }
.cal-cell:hover { background: var(--surface-2); z-index: 1; box-shadow: inset 0 0 0 2px var(--accent); }
.cal-cell.today { background: var(--accent-soft); }
.cal-cell.today .cal-date {
  color: var(--bg); background: var(--accent); width: 24px; height: 24px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.8rem; box-shadow: 0 2px 8px var(--accent-line);
}
.cal-cell.other-month { background: var(--bg); }
.cal-cell.other-month .cal-date { color: var(--dim); }
.cal-cell.weekend { background: var(--surface); }
.cal-cell.has-offs { background: rgba(220,38,38,.06); }
.cal-cell.has-offs:hover { background: rgba(220,38,38,.10); }
.cal-date {
  font-size: 0.82rem; font-weight: 800; margin-bottom: 5px; color: var(--text);
  width: 26px; height: 26px; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono);
}
.cal-chips { display: flex; flex-direction: column; gap: 3px; }
.cal-chip {
  display: inline-block; font-size: 0.67rem; padding: 2px 7px; border-radius: 10px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; font-weight: 700;
  letter-spacing: 0.3px;
}
/* Light mode: solid chips for better readability */
.chip-full { background: #dc2626; color: #fff; }
.chip-half { background: #d97706; color: #fff; }
[data-theme="dark"] .chip-full { background: rgba(220,38,38,.25); color: #fca5a5; }
[data-theme="dark"] .chip-half { background: rgba(217,119,6,.25); color: #fcd34d; }
.cal-more { font-size: 0.65rem; color: var(--muted); margin-top: 3px; font-weight: 600; }

/* ── Upcoming panel below calendar ── */
.cal-upcoming {
  margin-top: 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
}
@media (max-width: 700px) { .cal-upcoming { grid-template-columns: 1fr; } }
.cal-upcoming-section { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.cal-upcoming-head {
  display: flex; align-items: center; gap: 8px; padding: 12px 16px;
  background: var(--bg-2); border-bottom: 1px solid var(--border);
  font: 700 11px/1 var(--font-mono); text-transform: uppercase; letter-spacing: 0.6px; color: var(--muted);
}
.cal-upcoming-head .cal-upcoming-icon { font-size: 14px; }
.cal-upcoming-item {
  display: flex; align-items: center; gap: 12px; padding: 10px 16px;
  border-bottom: 1px solid var(--border); transition: background .12s;
}
.cal-upcoming-item:last-child { border-bottom: none; }
.cal-upcoming-item:hover { background: var(--bg-2); }
.cal-upcoming-badge {
  flex-shrink: 0; width: 38px; text-align: center; background: var(--bg);
  border: 1px solid var(--border); border-radius: 6px; padding: 4px 0;
}
.cal-upcoming-badge-day { font: 800 14px/1 var(--font-mono); color: var(--text); }
.cal-upcoming-badge-mon { font: 600 9px/1 var(--font-mono); color: var(--muted); text-transform: uppercase; margin-top: 2px; }
.cal-upcoming-name { font: 600 13px/1.3 var(--font-sans); color: var(--text); }
.cal-upcoming-sub { font: 500 11px/1 var(--font-mono); color: var(--muted); margin-top: 3px; }
.cal-upcoming-amt { font: 700 13px/1 var(--font-sans); color: var(--accent); flex-shrink: 0; }
.cal-upcoming-empty { padding: 24px 16px; text-align: center; font-size: 13px; color: var(--muted); }

.cal-summary-card {
  background: var(--card); border-radius: 10px; border: 1px solid var(--border);
  padding: 14px 18px; margin-bottom: 10px; box-shadow: var(--shadow-sm);
}
.cal-summary-card h4 { font-size: 0.85rem; font-weight: 600; margin-bottom: 8px; color: var(--text); }
.cal-off-list { display: flex; flex-wrap: wrap; gap: 8px; }
.cal-off-item {
  font-size: 0.8rem; padding: 4px 12px; border-radius: 20px;
  border: 1px solid var(--border); background: var(--bg);
  display: flex; align-items: center; gap: 6px; font-weight: 500;
}

.day-off-entry {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  background: var(--bg-2); border-radius: 10px; margin-bottom: 8px;
  font-size: 0.875rem; border: 1px solid var(--border); transition: background 0.12s;
}
.day-off-entry:hover { background: var(--primary-light); }

/* ══════════════════════════════════════════
   UTILITY
══════════════════════════════════════════ */
.hidden { display: none !important; }
.day-off-row { background: var(--negative-soft) !important; opacity: 0.75; }
.text-danger  { color: var(--danger); }
.text-success { color: var(--success); }
.text-muted   { color: var(--muted); }
.fw-bold      { font-weight: 700; }

/* ══════════════════════════════════════════
   ANIMATIONS
══════════════════════════════════════════ */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp {
  from { opacity: 0; transform: translateY(20px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes glowPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }

/* ══════════════════════════════════════════
   SCROLLBAR
══════════════════════════════════════════ */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--muted-light); }

/* ══════════════════════════════════════════
   HAMBURGER / MOBILE
══════════════════════════════════════════ */
.hamburger {
  display: none; flex-direction: column; gap: 5px; background: none; border: none;
  cursor: pointer; padding: 6px; border-radius: 8px; margin-right: 8px; flex-shrink: 0;
}
.hamburger span { display: block; width: 22px; height: 2px; background: var(--text); border-radius: 2px; transition: all 0.22s; }
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-overlay { display: none; position: fixed; inset: 0; background: rgba(13,18,38,0.45); z-index: 99; backdrop-filter: blur(2px); }
.nav-overlay.open { display: block; }

.bottom-nav {
  display: none; position: fixed; bottom: 0; left: 0; right: 0; height: 62px;
  background: var(--surface); border-top: 1px solid var(--border);
  box-shadow: 0 -4px 20px rgba(13,18,38,0.10); z-index: 90;
  align-items: stretch; justify-content: space-around;
}
.bottom-nav-item {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; cursor: pointer; padding: 6px 4px 4px; position: relative;
  transition: background 0.15s; -webkit-tap-highlight-color: transparent;
}
.bottom-nav-item::before {
  content: ''; position: absolute; top: 0; left: 20%; right: 20%; height: 2px;
  border-radius: 0 0 2px 2px; background: var(--primary); opacity: 0; transition: opacity 0.15s;
}
.bottom-nav-item.active::before { opacity: 1; }
.bottom-nav-icon { font-size: 1.3rem; line-height: 1; }
.bottom-nav-label { font-size: 0.6rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.4px; }
.bottom-nav-item.active .bottom-nav-label { color: var(--primary); }

/* ══════════════════════════════════════════
   RESPONSIVE — MOBILE
══════════════════════════════════════════ */
@media (max-width: 768px) {
  .hamburger { display: flex; }
  .bottom-nav { display: flex; }
  .sidebar { transform: translateX(-100%); transition: transform 0.26s ease; z-index: 200; width: 280px; }
  .sidebar.open { transform: translateX(0); }
  .main { margin-left: 0; padding-bottom: 62px; max-width: 100vw; overflow-x: hidden; }
  .topbar { padding: 0 16px; height: 56px; }
  .topbar h1 { font-size: 1rem; }
  #todayDate { display: none; }
  .content { padding: 14px; max-width: 100%; box-sizing: border-box; overflow-x: hidden; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 16px; }
  .stat-card { padding: 14px 14px; }
  .stat-card .stat-value { font-size: 1.5rem; }
  .filter-bar { flex-direction: column; align-items: stretch; gap: 10px; padding: 14px; border-left-width: 3px; }
  .filter-bar .form-group, .filter-bar select, .filter-bar input { width: 100%; }
  .form-row { grid-template-columns: 1fr; gap: 12px; }
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table { min-width: 600px; }
  td, th { padding: 10px 12px; font-size: 0.8rem; }
  .card { padding: 16px; }
  .card-header { flex-wrap: wrap; gap: 10px; }
  .modal-overlay { align-items: flex-end; padding: 0; }
  .modal { width: 100%; max-width: 100%; max-height: 92vh; border-radius: 20px 20px 0 0; padding: 24px 20px; animation: slideUpMobile 0.28s ease; border-top-width: 3px; }
  .modal-header { margin-bottom: 18px; }
  .btn { padding: 11px 18px; font-size: 0.9rem; }
  .btn-sm { padding: 8px 14px; font-size: 0.8rem; }
  .cal-page-header { flex-direction: column; align-items: stretch; gap: 10px; }
  .cal-nav { flex: none; justify-content: space-between; }
  .cal-nav h2 { font-size: 1rem; }
  .cal-controls { justify-content: space-between; }
  .cal-controls select { flex: 1; min-width: 0; }
  .cal-grid-wrap { overflow-x: scroll; overflow-y: hidden; -webkit-overflow-scrolling: touch; border-radius: var(--radius); }
  .cal-header-row, .cal-grid { grid-template-columns: repeat(7, 76px) !important; width: 532px; }
  .cal-cell { min-height: 64px; padding: 4px 4px; }
  .cal-chip { font-size: 0.58rem; padding: 1px 4px; }
  .day-off-entry { flex-wrap: wrap; }
  .deduction-box { padding: 14px; }
  .section-title { margin-top: 18px; }
  .empty-state { padding: 36px 16px; }
  .topbar-right { gap: 8px; }
  .salary-stats-row { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .salary-stat { padding: 10px 12px; }
  .salary-stat-value { font-size: 0.92rem; }
  .salary-net-remaining { flex-direction: column; gap: 6px; align-items: flex-start; }
  .salary-net-remaining-value { font-size: 1.2rem; }
  .salary-payment-row { flex-wrap: wrap; gap: 6px; }
  .salary-payment-month { width: auto; }
}
@media (max-width: 380px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .stat-card .stat-value { font-size: 1.2rem; }
  .content { padding: 10px; }
}
@keyframes slideUpMobile {
  from { transform: translateY(60px); opacity: 0.6; }
  to   { transform: translateY(0); opacity: 1; }
}

/* ══════════════════════════════════════════
   HOTEL FINANCIAL SUMMARY
══════════════════════════════════════════ */
.hotel-fin-strip {
  display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 20px;
}
.hotel-fin-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 14px; padding: 16px 20px; min-width: 200px; flex: 1;
  box-shadow: var(--shadow-card);
}
.hotel-fin-currency {
  font-size: 0.62rem; font-weight: 800; text-transform: uppercase; letter-spacing: 1px;
  color: var(--primary); margin-bottom: 12px;
}
.hotel-fin-card--status .hotel-fin-currency { color: var(--muted); }
.hotel-fin-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 6px 0; border-bottom: 1px solid var(--border-light);
}
.hotel-fin-row:last-child { border-bottom: none; }
.hotel-fin-total-row { border-top: 1px solid var(--border) !important; border-bottom: none !important; margin-top: 4px; padding-top: 8px !important; }
.hotel-fin-lbl { font-size: 0.73rem; color: var(--muted); font-weight: 500; }
.hotel-fin-val {
  font-family: 'Space Grotesk','Inter',sans-serif;
  font-size: 0.95rem; font-weight: 700; color: var(--text); letter-spacing: -0.3px;
}
.hotel-fin-green { color: var(--success); }
.hotel-fin-blue  { color: var(--primary); }
.hotel-fin-red   { color: var(--danger); }
.hotel-fin-na    { color: var(--muted); font-style: italic; }
.hotel-fin-total-row .hotel-fin-val { font-size: 1.05rem; }

[data-theme="dark"] .hotel-fin-card { background: var(--card); border-color: var(--border); }
.hotel-fin-card--gbp { border-left: 3px solid var(--accent); }

/* ══════════════════════════════════════════
   CALENDAR SUMMARY SIDEBAR
══════════════════════════════════════════ */
#calSummary { margin-top: 18px; }
.cal-sum-section { margin-bottom: 20px; }
.cal-sum-section-title {
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px;
  color: var(--primary); margin-bottom: 10px; padding-bottom: 7px;
  border-bottom: 1.5px solid var(--primary-light);
}
.cal-sum-item {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 10px; padding: 10px 14px; margin-bottom: 8px;
  box-shadow: var(--shadow-sm);
}
.cal-sum-date {
  font-size: 0.74rem; font-weight: 700; color: var(--text-2); margin-bottom: 6px;
}
.cal-sum-row {
  display: flex; align-items: center; gap: 7px; font-size: 0.82rem;
  color: var(--text); padding: 2px 0;
}
.cal-sum-name { font-weight: 500; }
.cal-sum-amt {
  margin-left: auto; font-family: 'Space Grotesk','Inter',sans-serif;
  font-size: 0.82rem; font-weight: 700; color: var(--primary);
}
[data-theme="dark"] .cal-sum-item { background: var(--card); border-color: var(--border); }

/* ══════════════════════════════════════════
   PAYMENT BOARD
══════════════════════════════════════════ */
.payment-board {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 16px; margin-bottom: 20px;
  box-shadow: var(--shadow-card); overflow: hidden;
}
.pb-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px; border-bottom: 1px solid var(--border-light);
  background: var(--card-raised);
}
.pb-title-group { display: flex; align-items: baseline; gap: 10px; }
.pb-title {
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  font-size: 0.78rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.7px; color: var(--text);
}
.pb-subtitle { font-size: 0.73rem; color: var(--muted); }
.pb-filters { display: flex; gap: 6px; }
.pb-filter {
  font-size: 0.75rem; font-weight: 600; padding: 4px 12px;
  border-radius: 99px; border: 1px solid var(--border);
  background: transparent; color: var(--muted); cursor: pointer;
  transition: all 0.15s; font-family: inherit;
}
.pb-filter.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.pb-filter:hover:not(.active) { color: var(--primary); border-color: var(--primary-dim); background: var(--primary-light); }

.pb-row {
  display: flex; align-items: center; gap: 12px; padding: 10px 20px;
  border-bottom: 1px solid var(--border-light); cursor: pointer;
  transition: background 0.12s;
}
.pb-row:last-child { border-bottom: none; }
.pb-row:hover { background: var(--bg); }
.pb-row:hover .pb-chevron { color: var(--primary); transform: translateX(2px); }

.pb-dot {
  width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; transition: box-shadow 0.2s;
}
.pb-dot--due  { background: var(--danger); box-shadow: 0 0 0 2px var(--danger-light); }
.pb-dot--paid { background: var(--success); }
.pb-dot--over { background: var(--warning); }

.pb-avatar {
  width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  display: flex; align-items: center; justify-content: center;
  font-size: 0.68rem; font-weight: 800; color: #fff;
  letter-spacing: 0.3px;
}
.pb-row--settled .pb-avatar { background: linear-gradient(135deg, var(--success), #34d399); }

.pb-name {
  flex: 1; font-size: 0.88rem; font-weight: 600; color: var(--text);
  min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pb-row--settled .pb-name { color: var(--muted); font-weight: 500; }

.pb-type-badge { font-size: 0.64rem !important; padding: 2px 6px !important; flex-shrink: 0; }

.pb-amt {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.9rem; font-weight: 700; letter-spacing: -0.3px;
  min-width: 90px; text-align: right; flex-shrink: 0;
}
.pb-amt--due  { color: var(--danger); }
.pb-amt--paid { color: var(--success); font-size: 0.82rem; font-weight: 600; }
.pb-amt--over { color: var(--warning); }

.pb-chevron {
  color: var(--muted-light); font-size: 1.05rem; line-height: 1;
  transition: color 0.12s, transform 0.12s; flex-shrink: 0;
}

/* Dark theme payment board */
[data-theme="dark"] .payment-board { background: var(--card); border-color: var(--border); }
[data-theme="dark"] .pb-header { background: var(--card-raised); border-bottom-color: var(--border); }
[data-theme="dark"] .pb-row:hover { background: rgb(var(--accent-rgb) / 0.05); }
[data-theme="dark"] .pb-dot--due  { box-shadow: 0 0 0 2px rgba(248,113,113,0.2), 0 0 8px rgba(248,113,113,0.35); }

/* Payment board category sections */
.pb-section { border-bottom: 1px solid var(--border-light); }
.pb-section:last-child { border-bottom: none; }
.pb-section-hd {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 20px; background: var(--bg);
  border-bottom: 1px solid var(--border-light);
}
.pb-section-icon { font-size: 10px; }
.pb-section-title {
  font-size: 0.68rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.8px; color: var(--text); flex: 1;
}
.pb-section-count { font-size: 0.72rem; color: var(--muted); }
.pb-section-list .pb-row:last-child { border-bottom: none; }
.pb-pin-btn {
  font-size: 0.65rem; padding: 3px 7px; border-radius: 6px; border: 1px solid var(--border);
  background: var(--bg); color: var(--muted); cursor: pointer; font-family: inherit;
  flex-shrink: 0; transition: all 0.15s; white-space: nowrap;
}
.pb-pin-btn:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-light); }

/* ── Headcount panel with expandable departments ── */
.hc-panel { height: 100%; display: flex; flex-direction: column; }
.hc-panel .dash-panel-body { padding: 0; flex: 1; overflow-y: auto; }
.hc-dept {
  border-bottom: 1px solid var(--border-light); cursor: pointer;
  transition: background 0.12s;
}
.hc-dept:last-child { border-bottom: none; }
.hc-dept-hd {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 16px;
}
.hc-dept:hover .hc-dept-hd { background: var(--bg); }
.hc-dept-bar { width: 3px; height: 18px; border-radius: 2px; flex-shrink: 0; }
.hc-dept-name { font-size: 0.88rem; font-weight: 700; color: var(--text); flex: 1; }
.hc-dept-badges { display: flex; gap: 5px; }
.hc-dept-pct { font-size: 0.72rem; color: var(--muted); font-weight: 600; min-width: 30px; text-align: right; }
.hc-dept-chevron {
  color: var(--muted-light); font-size: 1rem; transition: transform 0.2s;
}
.hc-dept.hc-open .hc-dept-chevron { transform: rotate(90deg); }
.hc-dept-track {
  height: 3px; background: var(--border-light); margin: 0 16px 8px;
  border-radius: 2px; overflow: hidden;
}
.hc-dept-fill { height: 100%; border-radius: 2px; transition: width 0.5s; }
.hc-emp-list {
  display: none; padding: 0 16px 10px;
}
.hc-dept.hc-open .hc-emp-list { display: block; }
.hc-emp-row {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px; border-radius: 9px; cursor: pointer;
  transition: background 0.12s;
}
.hc-emp-row:hover { background: var(--bg); }
.hc-emp-info { flex: 1; min-width: 0; }
.hc-emp-name { font-size: 0.82rem; font-weight: 600; color: var(--text); }
.hc-emp-role { font-size: 0.7rem; color: var(--muted); }

/* ── Hotel inline editing ── */
.ht-cell { cursor: pointer; transition: background 0.1s; padding: 6px 8px; font-size: 0.82rem; }
.ht-empty { color: var(--muted-light); user-select: none; }
.ht-input {
  width: 100%; padding: 4px 6px; border: 1.5px solid var(--primary);
  border-radius: 5px; background: var(--card); color: var(--text);
  font-size: 0.82rem; font-family: inherit; outline: none;
  box-shadow: 0 0 0 3px rgb(var(--accent-rgb) / 0.12);
}
.ht-num { text-align: right; font-variant-numeric: tabular-nums; }
.ht-cur-sel { padding: 0 !important; }
.ht-select {
  width: 100%; padding: 5px 4px; border: none; background: transparent;
  color: var(--text); font-size: 0.78rem; font-family: inherit; cursor: pointer;
  outline: none;
}
.ht-select:focus { background: var(--primary-light); border-radius: 4px; }
.ht-status-sel { font-weight: 700; font-size: 0.78rem; }
[data-theme="dark"] .ht-input { background: var(--card); color: var(--text); }
.ht-upload-btn {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 0.68rem; padding: 3px 6px; border-radius: 6px;
  border: 1px dashed var(--border); color: var(--muted); cursor: pointer;
  font-family: inherit; transition: all 0.15s; white-space: nowrap;
}
.ht-upload-btn:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-light); }

/* Hotel table: prevent overflow-x on wide screens */
#hotelTable { font-size: 0.82rem; table-layout: fixed; width: 100%; }
#hotelTable th, #hotelTable td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#hotelTable td.ht-cell { white-space: nowrap; }
.card:has(#hotelTable) .table-wrap { overflow-x: auto; }

.ht-notes-btn {
  background: none; border: none; cursor: pointer; font-size: 0.9rem; opacity: 0.35;
  padding: 2px 4px; border-radius: 4px; transition: opacity 0.15s, background 0.15s;
}
.ht-notes-btn:hover { opacity: 0.8; background: var(--primary-light); }
.ht-notes-btn--has { opacity: 1; }
.hotel-notes-row td { padding: 0 !important; white-space: normal !important; overflow: visible !important; }
.hotel-notes-panel { padding: 10px 16px 14px; background: var(--bg-2); border-top: 1px solid var(--border); }
.hotel-notes-ta {
  width: 100%; min-height: 72px; resize: vertical; font-size: 0.84rem; font-family: inherit;
  border: 1.5px solid var(--border); border-radius: 8px; padding: 10px 12px;
  background: var(--card); color: var(--text); outline: none; box-sizing: border-box;
  transition: border-color 0.15s;
}
.hotel-notes-ta:focus { border-color: var(--primary); }
.hotel-notes-hint { font-size: 0.7rem; color: var(--muted); margin-top: 4px; }

/* ══════════════════════════════════════════
   SALARY PAGE (legacy card)
══════════════════════════════════════════ */
.salary-card {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  margin-bottom: 18px; box-shadow: var(--shadow-card); overflow: hidden; transition: box-shadow 0.2s, border-color 0.2s;
}
.salary-card:hover { box-shadow: var(--shadow); border-color: rgb(var(--accent-rgb) / 0.2); }
.salary-card-header {
  display: flex; align-items: center; gap: 14px; padding: 18px 22px;
  border-bottom: 1px solid var(--border-light); flex-wrap: wrap;
}
.salary-avatar {
  width: 42px; height: 42px; border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; font-weight: 800; color: #fff; flex-shrink: 0;
  box-shadow: 0 2px 8px rgb(var(--accent-rgb) / 0.30);
}
.salary-name { font-size: 1rem; font-weight: 700; color: var(--text); }
.salary-sub  { font-size: 0.78rem; color: var(--muted); margin-top: 2px; }
.salary-header-right { margin-left: auto; text-align: right; }
.salary-annual {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-size: 1.35rem; font-weight: 700; color: var(--text); letter-spacing: -0.5px;
}
.salary-annual-label { font-size: 0.7rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; }
.salary-card-body { padding: 18px 22px; }

.salary-progress-wrap { margin-bottom: 18px; }
.salary-progress-labels {
  display: flex; justify-content: space-between;
  font-size: 0.78rem; margin-bottom: 6px; color: var(--muted); font-weight: 500;
}
.salary-progress-labels span:last-child { color: var(--text); font-weight: 700; }
.salary-progress-bar { height: 8px; background: var(--bg); border-radius: 99px; overflow: hidden; border: 1px solid var(--border); }
.salary-progress-fill {
  height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, var(--primary-dark), var(--primary), var(--accent));
  transition: width 0.5s ease; min-width: 2px;
}
.salary-progress-fill.overpaid { background: linear-gradient(90deg, var(--success), #34d399); }

.salary-stats-row {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px; margin-bottom: 16px;
}
.salary-stat { background: var(--bg-2); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; }
.salary-stat-label { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.7px; color: var(--muted); font-weight: 600; margin-bottom: 5px; }
.salary-stat-value {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-size: 1.05rem; font-weight: 700; color: var(--text); letter-spacing: -0.3px;
}
.salary-stat.danger .salary-stat-value  { color: var(--danger); }
.salary-stat.success .salary-stat-value { color: var(--success); }
.salary-stat.primary .salary-stat-value { color: var(--primary); }
.salary-stat.warning .salary-stat-value { color: var(--warning); }

.salary-payments-toggle {
  background: none; border: none; font-size: 0.8rem; color: var(--primary); cursor: pointer;
  font-family: inherit; font-weight: 600; display: flex; align-items: center; gap: 5px;
  padding: 0; margin-bottom: 10px; transition: opacity 0.15s;
}
.salary-payments-toggle:hover { opacity: 0.75; }
.salary-payments-list { display: none; }
.salary-payments-list.open { display: block; }
.salary-payment-row {
  display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--bg-2); margin-bottom: 6px; font-size: 0.845rem;
}
.salary-payment-row:last-child { margin-bottom: 0; }
.salary-payment-month { font-weight: 700; color: var(--text); width: 110px; }
.salary-payment-amount { font-weight: 800; color: var(--success); font-size: 0.92rem; }
.salary-payment-notes { color: var(--muted); font-size: 0.8rem; flex: 1; }

.salary-net-remaining {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--primary-light); border: 1px solid rgb(var(--accent-rgb) / 0.18);
  border-radius: 10px; padding: 14px 18px; margin-top: 14px;
}
.salary-net-remaining.danger { background: var(--negative-soft); border-color: rgba(220,38,38,0.30); }
.salary-net-remaining-label { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--muted); }
.salary-net-remaining-value {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-size: 1.4rem; font-weight: 700; color: var(--primary); letter-spacing: -0.5px;
}
.salary-net-remaining.danger .salary-net-remaining-value { color: var(--danger); }

.terminated-card { opacity: 0.88; }
.terminated-card .salary-card-header { background: var(--surface-2); }

.salary-tabs { display: flex; gap: 6px; margin-bottom: 20px; flex-wrap: wrap; }
.salary-tab {
  padding: 8px 20px; border: 1.5px solid var(--border); border-radius: 99px;
  background: var(--card); font-size: 0.82rem; font-weight: 600; font-family: inherit;
  color: var(--muted); cursor: pointer; transition: all 0.15s; white-space: nowrap;
}
.salary-tab:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-light); }
.salary-tab.active { background: var(--primary); border-color: var(--primary); color: #fff; box-shadow: 0 2px 8px rgb(var(--accent-rgb) / 0.30); }
.salary-tab[data-tab="terminated"].active { background: var(--danger); border-color: var(--danger); }

/* ══════════════════════════════════════════
   SALARY OVERVIEW CARDS
══════════════════════════════════════════ */
.salary-overview-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 16px; margin-bottom: 24px;
}
/* ensure text inside cards never bleeds to edge */
.salary-overview-card .soc-title { font-size: 0.68rem; }
.salary-overview-card .soc-hero-val { font-size: 1.2rem; }
.salary-overview-card .soc-footer-val { font-size: 0.92rem; }

/* ── Salary summary table ── */
.sal-summary-tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.84rem;
}
.sal-summary-tbl th {
  padding: 10px 16px;
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--muted);
  text-align: left;
  border-bottom: 1px solid var(--border);
  background: var(--bg-2);
}
.sal-summary-tbl td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
  line-height: 1.4;
}
.sal-summary-tbl tbody tr:last-child td { border-bottom: 1px solid var(--border); }
.sal-summary-tbl tbody tr:hover td { background: var(--surface-2); }
.sal-summary-tbl tfoot td {
  padding: 12px 16px;
  background: var(--bg-2);
  font-size: 0.84rem;
}
.sal-tbl-sub { font-size: 0.7rem; color: var(--muted); margin-top: 2px; }

/* Expandable group rows (merged "to pay" lists) */
.sal-grp-clickable { cursor: pointer; }
.sal-grp-clickable:hover td { background: var(--surface-2); }
.sal-grp-open td { background: rgba(251,191,36,0.05); }
.sal-grp-label { display: flex; align-items: center; gap: 10px; }
.sal-grp-chevron { font-size: 0.6rem; color: var(--muted); width: 10px; flex-shrink: 0; }
.sal-grp-topay {
  margin-left: 2px; padding: 2px 9px; border-radius: 11px;
  background: rgba(217,119,6,0.12); color: #b45309;
  font: 600 0.68rem/1.4 var(--font-mono); white-space: nowrap;
}
.sal-grp-detail td { padding: 0 !important; background: rgba(251,191,36,0.04); }
.sal-grp-paylist { display: flex; flex-direction: column; }
.sal-grp-payitem {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 16px 10px 42px; border-top: 1px solid var(--border);
}
.sal-grp-payname { flex: 1; display: flex; flex-direction: column; gap: 3px; font-weight: 600; font-size: 0.84rem; color: var(--text); }
.sal-grp-payleft { font: 500 0.7rem/1 var(--font-mono); color: var(--negative); }
.sal-grp-payleft--done { color: var(--positive); }
.sal-grp-payamt { font: 600 0.8rem/1 var(--font-mono); color: var(--muted); white-space: nowrap; }
.sal-grp-payactions { display: flex; gap: 6px; align-items: center; flex-shrink: 0; }

[data-theme="dark"] .sal-grp-open td { background: rgba(217,119,6,0.08); }
[data-theme="dark"] .sal-grp-detail td { background: rgba(217,119,6,0.05); }
[data-theme="dark"] .sal-grp-topay { background: rgba(217,119,6,0.2); color: #fbbf24; }
.salary-overview-card .soc-footer-item--outstanding .soc-footer-val { font-size: 1.05rem; }
/* ── Salary Overview Cards ──────────────────────────────────────────────────── */
.salary-overview-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s;
  display: flex;
  flex-direction: column;
}
.salary-overview-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 30px rgba(0,0,0,0.1);
}
/* Accent top bar */
.soc-accent-bar {
  height: 4px;
  background: var(--border);
}
.salary-overview-card.payroll .soc-accent-bar {
  background: linear-gradient(90deg, var(--accent), var(--accent), #a5b4fc);
}
.salary-overview-card.self-employed .soc-accent-bar {
  background: linear-gradient(90deg, #b45309, #f59e0b, #fcd34d);
}
.salary-overview-card.soc-gbp-total .soc-accent-bar {
  background: linear-gradient(90deg, #059669, #34d399, #6ee7b7);
}

/* Header row */
.soc-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--border-light);
}
.soc-icon {
  font-size: 1.4rem;
  line-height: 1;
  flex-shrink: 0;
}
.soc-header-text { flex: 1; min-width: 0; }
.soc-title {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.salary-overview-card.payroll .soc-title       { color: var(--accent); }
.salary-overview-card.self-employed .soc-title { color: #d97706; }
.salary-overview-card.soc-gbp-total .soc-title { color: #059669; }
.soc-subtitle {
  font-size: 0.66rem;
  color: var(--muted);
  margin-top: 1px;
}
.soc-pct-badge {
  flex-shrink: 0;
  background: rgb(var(--accent-rgb) / 0.1);
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 800;
  border-radius: 20px;
  padding: 3px 9px;
  white-space: nowrap;
}
.soc-pct-badge--green {
  background: rgba(5,150,105,0.1);
  color: #059669;
}

/* Hero two-column block */
.soc-hero {
  display: flex;
  align-items: stretch;
  padding: 14px 16px 10px;
  gap: 0;
}
.soc-hero-block {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.soc-hero-block:last-child { text-align: right; }
.soc-hero-divider {
  width: 1px;
  background: var(--border-light);
  margin: 0 16px;
  align-self: stretch;
}
.soc-hero-label {
  font-size: 0.67rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}
.soc-hero-val {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.5px;
  line-height: 1.1;
}
.soc-hero-sub {
  font-size: 0.72rem;
  color: var(--muted);
  margin-top: 3px;
}
.soc-col-target  { color: var(--text); }
.soc-col-paid    { color: var(--success); }
.soc-col-deduct  { color: var(--warning); }
.soc-col-outstanding { color: var(--danger); }
.soc-col-outstanding.overpaid { color: var(--success); }
.soc-col-outstanding.clear    { color: var(--muted); }
.soc-col-outstanding--green   { color: var(--success); }

/* Progress bar */
.soc-progress-wrap {
  height: 6px;
  background: var(--border-light);
  margin: 0 16px 12px;
  border-radius: 99px;
  overflow: hidden;
}
.soc-progress-bar {
  height: 100%;
  border-radius: 99px;
  transition: width 1s cubic-bezier(.4,0,.2,1);
  background: linear-gradient(90deg, var(--accent), var(--accent));
}
.soc-progress-bar.self-employed {
  background: linear-gradient(90deg, #d97706, #fbbf24);
}
.soc-progress-bar.soc-gbp-total {
  background: linear-gradient(90deg, #059669, #34d399);
}

/* Footer rows */
.soc-footer {
  padding: 0 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: auto;
}
.soc-footer-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.soc-footer-item--outstanding {
  padding-top: 8px;
  border-top: 1px solid var(--border-light);
  margin-top: 3px;
}
.soc-footer-label {
  font-size: 0.7rem;
  color: var(--muted);
  font-weight: 500;
  white-space: nowrap;
}
.soc-footer-val {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.3px;
}
.soc-footer-item--outstanding .soc-footer-val {
  font-size: 1.15rem;
}

.soc-conversion {
  font-size: 0.67rem;
  color: var(--muted);
  padding: 4px 16px 10px;
  font-style: italic;
  text-align: right;
  margin-top: -4px;
}

@media (max-width: 768px) {
  .salary-overview-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .soc-hero-val { font-size: 1.1rem; }
}
@media (max-width: 380px) { .salary-overview-grid { grid-template-columns: 1fr; } }

/* ══════════════════════════════════════════
   TOAST NOTIFICATION SYSTEM
══════════════════════════════════════════ */
#toastContainer {
  position: fixed; bottom: 24px; right: 24px; z-index: 9999;
  display: flex; flex-direction: column; gap: 10px;
  max-width: 360px; width: calc(100vw - 48px); pointer-events: none;
}
.toast {
  display: flex; align-items: flex-start; gap: 10px; padding: 13px 16px; border-radius: 12px;
  font-size: 0.875rem; font-weight: 500; line-height: 1.45; box-shadow: var(--shadow-lg);
  border: 1px solid transparent; pointer-events: all; animation: toastSlideIn 0.28s ease;
  position: relative; overflow: hidden;
}
.toast::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; border-radius: 12px 0 0 12px; }
.toast-success { background: #f0fdf4; border-color: #bbf7d0; color: #166534; }
.toast-success::before { background: var(--success); }
.toast-error { background: #fef2f4; border-color: #fecdd3; color: #991b1b; }
.toast-error::before { background: var(--danger); }
.toast-info { background: #eff6ff; border-color: #bfdbfe; color: #1e40af; }
.toast-info::before { background: var(--info); }
.toast-warning { background: #fffbeb; border-color: #fde68a; color: #78350f; }
.toast-warning::before { background: var(--warning); }
.toast-icon { font-size: 1rem; flex-shrink: 0; margin-top: 1px; }
/* Dark-mode toasts ride the theme instead of flashing light pastel cards */
[data-theme="dark"] .toast-success { background: var(--surface-2); border-color: rgba(85,197,141,0.35);  color: var(--positive); }
[data-theme="dark"] .toast-error   { background: var(--surface-2); border-color: rgba(238,123,116,0.35); color: var(--negative); }
[data-theme="dark"] .toast-info    { background: var(--surface-2); border-color: rgb(var(--accent-rgb) / 0.35);  color: var(--text-2); }
[data-theme="dark"] .toast-warning { background: var(--surface-2); border-color: rgba(230,176,76,0.35);  color: var(--warning); }
.toast-message { flex: 1; }
.toast-close { background: none; border: none; cursor: pointer; font-size: 0.85rem; opacity: 0.45; padding: 0 2px; line-height: 1; flex-shrink: 0; transition: opacity 0.15s; }
.toast-close:hover { opacity: 1; }
.toast-progress { position: absolute; bottom: 0; left: 0; height: 3px; border-radius: 0 0 0 12px; background: rgba(0,0,0,0.08); animation: toastProgress var(--toast-dur, 4000ms) linear forwards; }
@keyframes toastSlideIn { from { opacity: 0; transform: translateX(32px); } to { opacity: 1; transform: translateX(0); } }
@keyframes toastSlideOut { from { opacity: 1; transform: translateX(0); max-height: 100px; } to { opacity: 0; transform: translateX(32px); max-height: 0; padding: 0; margin: 0; } }
@keyframes toastProgress { from { width: 100%; } to { width: 0%; } }
@media (max-width: 768px) { #toastContainer { bottom: 74px; right: 12px; left: 12px; width: auto; max-width: none; } }

/* ══════════════════════════════════════════
   NAV BADGE
══════════════════════════════════════════ */
.nav-badge {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--danger); color: #fff; font-size: 0.6rem; font-weight: 800;
  min-width: 18px; height: 18px; border-radius: 9px; padding: 0 4px;
  margin-left: 6px; line-height: 1; box-shadow: 0 2px 6px rgba(225,29,72,0.4); vertical-align: middle;
}
.nav-badge-bottom { position: absolute; top: 4px; right: calc(50% - 18px); min-width: 16px; height: 16px; font-size: 0.55rem; margin-left: 0; }

/* ══════════════════════════════════════════
   SALARY PAYMENT REMINDER PANEL  (srp / srr)
══════════════════════════════════════════ */

/* Outer wrapper injected by JS */
.srp {
  background: var(--surface); border: 1px solid #fde68a;
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm);
}

/* Panel header */
.srp-hd {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px; background: rgba(251,191,36,0.07);
  border-bottom: 1px solid #fde68a;
}
.srp-hd-left { display: flex; align-items: center; gap: 12px; }
.srp-icon { font-size: 1.15rem; line-height: 1; }
.srp-title { font: 700 0.875rem/1.2 var(--font-sans); color: #78350f; }
.srp-sub { font: 500 0.72rem/1 var(--font-mono); color: #92400e; margin-top: 3px; opacity: 0.7; }
.srp-dismiss {
  padding: 5px 12px; border-radius: 6px; border: 1px solid rgba(217,119,6,0.3);
  background: transparent; font: 600 0.72rem var(--font-sans); color: #92400e;
  cursor: pointer; transition: all 0.15s; flex-shrink: 0;
}
.srp-dismiss:hover { background: rgba(217,119,6,0.1); }

/* Category sections */
.sr-section { border-top: 1px solid #fde68a; }
.sr-section:first-of-type { border-top: none; }
.sr-section-hd {
  display: flex; align-items: center; gap: 8px; padding: 9px 20px;
  background: rgba(0,0,0,0.015); cursor: pointer; user-select: none;
  border-bottom: 1px solid rgba(253,230,138,0.4);
}
.sr-section-hd:hover { background: rgba(0,0,0,0.03); }
.sr-chevron { font-size: 0.6rem; color: var(--muted); flex-shrink: 0; }
.sr-section-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.sr-section-title { font: 700 0.67rem/1 var(--font-mono); text-transform: uppercase; letter-spacing: 0.8px; color: var(--text); flex: 1; }
.sr-section-count { font: 500 0.72rem/1 var(--font-mono); color: var(--muted); }
.sr-collapsed .sr-section-body { display: none; }

/* SE tabs */
.sr-tabs { display: flex; gap: 6px; padding: 10px 20px 0; }
.sr-tab {
  padding: 4px 13px; border-radius: 20px; border: 1px solid var(--border);
  background: transparent; font: 600 11px/1 var(--font-mono); color: var(--muted);
  cursor: pointer; transition: all 0.15s;
}
.sr-tab--active { background: #d97706; color: #fff; border-color: #d97706; }
.sr-tab:not(.sr-tab--active):hover { background: var(--bg); }
.sr-tab-badge {
  display: inline-block; background: rgba(0,0,0,0.12); color: inherit;
  border-radius: 10px; padding: 1px 5px; font-size: 10px; margin-left: 3px;
}
.sr-tab--active .sr-tab-badge { background: rgba(255,255,255,0.3); }
.sr-tab-badge--intl { background: rgba(8,145,178,0.15); color: #0891b2; }
.sr-tab-pane--hidden { display: none; }
.srr-empty { padding: 12px 20px; font-size: 0.78rem; color: var(--muted); font-style: italic; }

/* Individual employee row */
.srr {
  display: flex; align-items: center; gap: 14px; padding: 12px 20px;
  border-bottom: 1px solid rgba(253,230,138,0.45);
  transition: background 0.12s;
}
.srr:last-child { border-bottom: none; }
.srr:hover { background: rgba(251,191,36,0.04); }

.srr-avatar {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font: 700 11px/1 var(--font-mono); text-transform: uppercase;
}
.srr-info { flex: 1; min-width: 0; }
.srr-name { font: 600 0.875rem/1.2 var(--font-sans); color: var(--text); }
.srr-prog { display: flex; align-items: center; gap: 8px; margin-top: 5px; }
.srr-prog-track { flex: 1; max-width: 110px; height: 4px; background: rgba(0,0,0,0.08); border-radius: 2px; overflow: hidden; }
.srr-prog-fill { height: 100%; border-radius: 2px; transition: width 0.4s ease; }
.srr-prog-lbl { font-size: 0.67rem; color: var(--muted); white-space: nowrap; }

.srr-right { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0; }
.srr-amount { font: 600 0.82rem/1 var(--font-mono); color: var(--text); }
.srr-net {
  display: inline-block; font-size: 0.65rem; font-weight: 500; color: var(--muted);
  background: var(--surface-2); border-radius: 4px; padding: 1px 4px; margin-left: 4px;
}
.srr-actions { display: flex; gap: 6px; align-items: center; }
.srr-skip {
  padding: 4px 10px; border-radius: 6px; border: 1px solid var(--border);
  background: transparent; font: 500 0.7rem/1 var(--font-sans); color: var(--muted);
  cursor: pointer; transition: all 0.15s;
}
.srr-skip:hover { border-color: var(--negative); color: var(--negative); background: rgba(220,38,38,0.04); }
.srr-pay {
  padding: 4px 12px; border-radius: 6px; border: none;
  background: #d97706; color: #fff; font: 600 0.7rem/1 var(--font-sans);
  cursor: pointer; transition: background 0.15s;
}
.srr-pay:hover { background: #b45309; }

/* Deprecated selectors kept so nothing breaks if referenced elsewhere */
.salary-reminder-panel { }
.salary-reminder-header { }
.salary-reminder-row { }
.salary-reminder-name { }
.salary-reminder-amount { }
.sr-net-label { }

/* ── Dashboard Employee Summary: tabs, mini progress, last payment ── */
.es-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.es-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.es-tabs { display: flex; gap: 6px; flex-wrap: wrap; }

.es-search {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 10px;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 9px;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.es-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.es-search svg { color: var(--muted); flex-shrink: 0; }
.es-search input {
  border: none;
  outline: none;
  background: transparent;
  color: var(--text);
  font: 500 12.5px/1 var(--font-sans);
  padding: 9px 0;
  width: 150px;
}
.es-search input::placeholder { color: var(--dim); }
[data-theme="dark"] .es-search { background: var(--surface-2); border-color: var(--border); }
.es-tab {
  padding: 5px 12px; border-radius: 20px; border: 1px solid var(--border);
  background: transparent; font: 600 11px/1 var(--font-mono); color: var(--muted);
  cursor: pointer; transition: all 0.15s; display: inline-flex; align-items: center; gap: 5px;
}
.es-tab:not(.es-tab--active):hover { background: var(--bg); color: var(--text); }
.es-tab--active { background: var(--accent); color: #fff; border-color: var(--accent); }
.es-tab-count {
  display: inline-block; background: var(--surface-2); color: var(--muted);
  border-radius: 10px; padding: 1px 6px; font-size: 10px; line-height: 1.4; min-width: 16px; text-align: center;
}
.es-tab--active .es-tab-count { background: rgba(255,255,255,0.25); color: #fff; }
.es-tab-count--intl { background: rgba(8,145,178,0.15); color: #0891b2; }
.es-tab--active .es-tab-count--intl { background: rgba(255,255,255,0.25); color: #fff; }
.es-badge-intl { background: rgba(8,145,178,0.12); color: #0891b2; border-color: rgba(8,145,178,0.25); }

.es-prog { height: 5px; background: var(--surface-2); border-radius: 3px; overflow: hidden; margin-top: 5px; max-width: 130px; }
.es-prog-fill { height: 100%; background: var(--accent); border-radius: 3px; transition: width .4s ease; }
.es-prog-lbl { font-size: 0.68rem; color: var(--muted); margin-top: 3px; }
.es-empty { padding: 28px 16px; text-align: center; font-size: 0.85rem; color: var(--muted); }

.es-last-pay { display: flex; flex-direction: column; gap: 3px; }
.es-last-pay-amt { font: 700 13px/1 var(--font-mono); color: var(--text); letter-spacing: -0.3px; }
.es-last-pay-date { font: 500 10.5px/1 var(--font-mono); color: var(--muted); text-transform: uppercase; letter-spacing: 0.4px; }

[data-theme="dark"] .es-tab-count { background: var(--surface-3); color: var(--muted); }
[data-theme="dark"] .es-tab-count--intl { background: rgba(8,145,178,0.2); color: #5ed4e0; }
[data-theme="dark"] .es-prog { background: var(--surface-3); }


/* Dark mode overrides */
[data-theme="dark"] .srp { background: var(--card); border-color: rgba(217,119,6,0.3); }
[data-theme="dark"] .srp-hd { background: rgba(217,119,6,0.08); border-color: rgba(217,119,6,0.2); }
[data-theme="dark"] .srp-title { color: #fde68a; }
[data-theme="dark"] .srp-sub { color: #fde68a; }
[data-theme="dark"] .srp-dismiss { border-color: rgba(217,119,6,0.2); color: #fde68a; }
[data-theme="dark"] .srp-dismiss:hover { background: rgba(217,119,6,0.15); }
[data-theme="dark"] .sr-section { border-color: rgba(217,119,6,0.15); }
[data-theme="dark"] .sr-section-hd { background: rgba(255,255,255,0.02); border-color: rgba(217,119,6,0.12); }
[data-theme="dark"] .sr-section-hd:hover { background: rgba(255,255,255,0.04); }
[data-theme="dark"] .srr { border-color: rgba(217,119,6,0.1); }
[data-theme="dark"] .srr:hover { background: rgba(217,119,6,0.05); }
[data-theme="dark"] .srr-skip { border-color: rgba(255,255,255,0.1); color: var(--muted); }
[data-theme="dark"] .srr-skip:hover { border-color: var(--negative); color: var(--negative); background: rgba(220,38,38,0.08); }
[data-theme="dark"] .srr-prog-track { background: rgba(255,255,255,0.08); }

/* ══════════════════════════════════════════
   CALENDAR REMINDER DOTS & CHIPS
══════════════════════════════════════════ */
.cal-reminder-dots { display: flex; gap: 3px; flex-wrap: wrap; margin-top: 2px; }
.cal-reminder-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.cal-reminder-dot.cat-rent         { background: var(--primary); }
.cal-reminder-dot.cat-subscription { background: #8b5cf6; }
.cal-reminder-dot.cat-deposit      { background: #ec4899; }
.cal-reminder-dot.cat-utility      { background: var(--warning); }
.cal-reminder-dot.cat-other        { background: var(--muted); }
.cal-reminder-entry {
  display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px;
  background: var(--warning-soft); border-radius: 10px; margin-bottom: 8px;
  font-size: 0.875rem; border: 1px solid rgba(217,119,6,0.35);
}

/* ══════════════════════════════════════════
   DASHBOARD UPCOMING WIDGET
══════════════════════════════════════════ */
.dashboard-widget {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow-card); transition: box-shadow 0.2s;
  margin-bottom: 24px;
}
.dashboard-widget:hover { box-shadow: var(--shadow); }
.dashboard-widget-header {
  padding: 13px 18px 10px; border-bottom: 1px solid var(--border-light);
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.7px; color: var(--muted);
}
.dashboard-widget-body { padding: 4px 18px 14px; }

/* ══════════════════════════════════════════
   SKELETON LOADERS
══════════════════════════════════════════ */
.skeleton {
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 50%, var(--surface-2) 75%);
  background-size: 200% 100%;
  animation: skeletonPulse 1.5s ease-in-out infinite;
  border-radius: 8px;
}
.skeleton-stat { height: 80px; border-radius: var(--radius); }
@keyframes skeletonPulse { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ══════════════════════════════════════════
   PAGE TRANSITION
══════════════════════════════════════════ */
.page.active { animation: pageEnter 0.2s ease; }
@keyframes pageEnter { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }

/* ══════════════════════════════════════════
   SIDEBAR USER PILL
══════════════════════════════════════════ */
.sidebar-user-pill {
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.10);
  border-radius: 20px; padding: 4px 10px 4px 5px; margin-top: 4px;
}
.sidebar-user-avatar {
  width: 22px; height: 22px; border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  display: flex; align-items: center; justify-content: center;
  font-size: 0.6rem; font-weight: 800; color: #fff; flex-shrink: 0;
}
.sidebar-user-name { font-size: 0.72rem; font-weight: 600; color: rgba(255,255,255,0.78); }
.sidebar-user-role { font-size: 0.62rem; color: rgba(255,255,255,0.35); }

/* ══════════════════════════════════════════
   DASHBOARD STAT STRIP (hero)
══════════════════════════════════════════ */
.dash-stat-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: var(--gap);
}

.dss-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: box-shadow .2s var(--ease), border-color .2s var(--ease), transform .12s var(--ease);
  box-shadow: var(--shadow-card);
}

.dss-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  border-radius: var(--radius) var(--radius) 0 0;
  opacity: 0;
  transition: opacity .2s var(--ease);
}

.dss-card:hover {
  box-shadow: var(--shadow);
  border-color: var(--border-bright);
  transform: translateY(-2px);
}

.dss-card:hover::before { opacity: 1; }
.dss-card:active { transform: translateY(0); }

.dss-card--accent::before  { background: var(--accent); }
.dss-card--warn::before    { background: var(--warning); }
.dss-card--ok::before      { background: var(--positive); }
.dss-card--neutral::before { background: var(--dim); }

.dss-label {
  font: 600 10px/1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--muted);
}

.dss-value {
  font: 700 36px/1 var(--font-mono);
  color: var(--text);
  letter-spacing: -1.5px;
  line-height: 1;
}

.dss-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 2px;
}

.dss-pill {
  font: 600 10.5px/1 var(--font-mono);
  padding: 4px 8px;
  border-radius: 5px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.dss-pill--blue  { background: var(--info-soft);    color: var(--info); }
.dss-pill--amber { background: var(--warning-soft); color: var(--warning); }

.dss-sub {
  font: 500 11px/1.3 var(--font-mono);
  color: var(--dim);
  margin-top: auto;
}

@media (max-width: 900px) {
  .dash-stat-strip { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px) {
  .dash-stat-strip { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════
   DASHBOARD BENTO GRID (legacy, kept for
   other panels that may still use it)
══════════════════════════════════════════ */
.dash-bento {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 16px;
  margin-bottom: var(--gap);
}
.dash-bento--3col {
  grid-template-columns: 200px 1fr 220px;
}

.dash-mini-grid {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 12px;
}

.dash-hero-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.dash-hero-glow {
  position: absolute;
  top: -80px;
  right: -80px;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--accent-soft) 0%, transparent 70%);
  pointer-events: none;
}

.dash-hero-label {
  font: 600 10px/1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--muted);
}

.dash-hero-value {
  font: 600 64px/1 var(--font-mono);
  color: var(--text);
  letter-spacing: -2px;
}
.dash-hero-card--compact { padding: 20px 18px; gap: 10px; }
.dash-hero-value--sm { font-size: 44px; letter-spacing: -1.5px; }

.dash-hero-pills { display: flex; gap: 8px; }

.dash-hero-pill {
  font: 600 11px/1 var(--font-mono);
  padding: 5px 9px;
  border-radius: 5px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.dash-hero-pill--blue  { background: var(--info-soft);    color: var(--info); }
.dash-hero-pill--amber { background: var(--warning-soft); color: var(--warning); }

.dash-hero-footer {
  font: 500 11px/1 var(--font-mono);
  color: var(--dim);
  margin-top: auto;
}

.dash-mini-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  transition: border-color .12s, background .12s;
}

.dash-mini-card:hover {
  border-color: var(--border-bright);
  background: var(--surface-2);
}

.dash-mini-card.dash-mini--indigo { border-left: 2px solid var(--accent); }
.dash-mini-card.dash-mini--green  { border-left: 2px solid var(--positive); }
.dash-mini-card.dash-mini--alert  { border-left: 2px solid var(--negative); }

.dash-mini-icon {
  font-size: 18px;
  opacity: 0.55;
  filter: grayscale(1);
  width: 28px;
  text-align: center;
  flex-shrink: 0;
}

.dash-mini-body { flex: 1; min-width: 0; }

.dash-mini-label {
  font: 600 10px/1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--muted);
  margin-bottom: 4px;
}

.dash-mini-value {
  font: 600 18px/1 var(--font-mono);
  color: var(--text);
  letter-spacing: -0.3px;
  margin-bottom: 3px;
}

.dash-mini-sub {
  font: 500 10.5px/1 var(--font-mono);
  color: var(--dim);
}

.dash-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: var(--gap);
}

/* ══════════════════════════════════════════
   DASHBOARD PANELS
══════════════════════════════════════════ */
.dash-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.dash-panel--alert { border-color: rgba(245,184,96,0.3); }

.dash-panel-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-2);
}

.dash-panel-icon { color: var(--warning); font-size: 14px; }

.dash-panel-title {
  font: 600 12.5px/1 var(--font-sans);
  color: var(--text);
  flex: 1;
}

.dash-panel-count {
  font: 600 11px/1 var(--font-mono);
  padding: 2px 7px;
  border-radius: 4px;
  background: var(--warning-soft);
  color: var(--warning);
}

.dash-panel-body { padding: 4px 0; }

.dash-panel-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px;
  border-bottom: 1px solid var(--line);
  font-size: 12.5px;
}

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

/* ══════════════════════════════════════════
   SALARY OVERVIEW CARDS
══════════════════════════════════════════ */
.sc-card {
  background: var(--card); border: 1px solid var(--border); border-radius: 16px;
  margin-bottom: 20px; box-shadow: var(--shadow-card); overflow: hidden;
  transition: box-shadow 0.22s, transform 0.22s, border-color 0.22s;
}
.sc-card:hover {
  box-shadow: var(--shadow), 0 0 0 1px rgb(var(--accent-rgb) / 0.12);
  border-color: rgb(var(--accent-rgb) / 0.22); transform: translateY(-2px);
}
.sc-card.sc-terminated { opacity: 0.84; }

/* Accent stripe */
.sc-accent { height: 3px; background: var(--border); }
.sc-accent.sc-payroll    { background: linear-gradient(90deg, var(--primary-dark), var(--primary), var(--accent)); }
.sc-accent.sc-self-emp   { background: linear-gradient(90deg, #b45309, var(--warning), #fbbf24); }
.sc-accent.sc-term-accent { background: linear-gradient(90deg, #be123c, var(--danger)); }

/* Terminated banner */
.sc-term-banner {
  background: #fef2f4; border-bottom: 1px solid #fecdd3; padding: 6px 20px;
  display: flex; align-items: center; gap: 10px;
  font-size: 0.72rem; font-weight: 700; color: var(--danger);
  letter-spacing: 0.5px; text-transform: uppercase;
}
.sc-term-banner .tb-date   { color: var(--muted-light); font-weight: 500; text-transform: none; letter-spacing: 0; }
.sc-term-banner .tb-reason { color: var(--muted-light); font-weight: 400; font-style: italic; text-transform: none; letter-spacing: 0; }

/* Card header */
.sc-head { display: flex; align-items: center; gap: 14px; padding: 18px 22px 14px; }
.sc-avatar {
  width: 46px; height: 46px; border-radius: 12px;
  background: linear-gradient(135deg, var(--primary-dark), var(--primary));
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; font-weight: 800; color: #fff; flex-shrink: 0;
  box-shadow: 0 4px 14px rgb(var(--accent-rgb) / 0.30); letter-spacing: -0.5px;
  font-family: 'Space Grotesk', 'Inter', sans-serif;
}
.sc-card.sc-terminated .sc-avatar { background: linear-gradient(135deg, #6b7280, #9ca3af); box-shadow: none; }
.sc-card.sc-self-emp-type .sc-avatar { background: linear-gradient(135deg, #b45309, var(--warning)); box-shadow: 0 4px 14px rgba(217,119,6,0.28); }

.sc-info { flex: 1; min-width: 0; }
.sc-emp-name {
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  font-size: 0.98rem; font-weight: 700; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  letter-spacing: -0.1px;
}
.sc-emp-badges { display: flex; align-items: center; gap: 5px; margin-top: 4px; flex-wrap: wrap; }
.sc-emp-since { font-size: 0.7rem; color: var(--muted-light); }

.sc-annual { text-align: right; flex-shrink: 0; }
.sc-annual-lbl { font-size: 0.62rem; color: var(--muted-light); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 2px; }
.sc-annual-val {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-size: 1.3rem; font-weight: 700; color: var(--text); letter-spacing: -0.5px;
}

.salary-overview-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.salary-overview-card.soc-gbp-total { border-color: var(--accent-line); }

.soc-header {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-2);
  font: 600 12px/1 var(--font-sans);
  color: var(--text);
}

.soc-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 16px;
  font: 500 12px/1 var(--font-sans);
  border-bottom: 1px dashed var(--border);
}

.soc-row:last-child { border-bottom: none; }
.soc-row .k { color: var(--muted); font-family: var(--font-mono); font-size: 11px; }
.soc-row .v { color: var(--text); font-family: var(--font-mono); font-weight: 500; }

/* ══════════════════════════════════════════
   SALARY TABS
══════════════════════════════════════════ */
.salary-tabs {
  display: flex;
  gap: 2px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 3px;
  margin-bottom: 16px;
  width: fit-content;
}

.salary-tab {
  padding: 5px 12px;
  font: 500 11.5px/1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--muted);
  cursor: pointer;
  border-radius: 5px;
  background: transparent;
  border: none;
  transition: background .12s, color .12s;
}

.salary-tab.active {
  background: var(--surface-3);
  color: var(--text);
}

/* ══════════════════════════════════════════
   SALARY CARD (per-employee)
══════════════════════════════════════════ */
.salary-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 12px;
  overflow: hidden;
}

.salary-reminder-panel {
  background: var(--warning-soft);
  border: 1px solid rgba(245,184,96,0.3);
  border-radius: var(--radius);
  overflow: hidden;
}

.salary-reminder-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(245,184,96,0.2);
}

.salary-reminder-icon { font-size: 14px; }

.salary-reminder-title {
  font: 600 12.5px/1 var(--font-sans);
  color: var(--warning);
  flex: 1;
}

.salary-reminder-dismiss {
  background: transparent;
  border: 1px solid rgba(245,184,96,0.3);
  color: var(--warning);
  border-radius: 5px;
  padding: 3px 8px;
  font-size: 12px;
  cursor: pointer;
  transition: background .12s;
}

.salary-reminder-dismiss:hover { background: rgba(245,184,96,0.1); }

/* ══════════════════════════════════════════
   HOTEL MODAL
══════════════════════════════════════════ */
.hotel-modal { width: 680px; }

.hm-section {
  border-bottom: 1px solid var(--border);
  padding: 0 0 14px;
}

.hm-section:last-of-type { border-bottom: none; }

.hm-body { padding: 0 20px; }

.hm-col-title {
  font: 600 10px/1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--muted);
  margin-bottom: 8px;
  margin-top: 10px;
}

.hm-pay-fields {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}

.hm-2col { grid-template-columns: 1fr 1fr !important; }
.hm-3col { grid-template-columns: 1fr 1fr 1fr !important; }
.hm-currency-sel { min-width: 80px; }
.hm-currency-amt { flex: 1; }
.hm-billing-sel { min-width: 120px; }

.hm-footer {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  padding: 16px 20px;
  border-top: 1px solid var(--border);
  background: var(--bg-2);
}

/* Hotel table row states */

/* ══════════════════════════════════════════
   CALENDAR
══════════════════════════════════════════ */
.cal-grid-wrap {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.cal-header-row {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background: var(--bg-2);
  border-bottom: 1px solid var(--border);
}

.cal-header-row > div {
  padding: 8px 10px;
  font: 600 10px/1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--muted);
}

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  background: var(--border);
}

.cal-grid > div {
  background: var(--surface);
  min-height: 92px;
  padding: 8px 10px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: background .1s;
}

.cal-grid > div:hover { background: var(--surface-2); }

.cal-chip {
  display: inline-block;
  font: 600 9.5px/1 var(--font-mono);
  padding: 2px 5px;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.chip-full { background: var(--negative-soft); color: var(--negative); }
.chip-half { background: var(--warning-soft); color: var(--warning); }

.cal-reminder-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  vertical-align: middle;
  margin-right: 3px;
}

.cal-reminder-dot.cat-rent         { background: var(--accent); }
.cal-reminder-dot.cat-utility      { background: var(--warning); }
.cal-reminder-dot.cat-subscription { background: var(--info); }
.cal-reminder-dot.cat-deposit      { background: var(--positive); }
.cal-reminder-dot.cat-other        { background: var(--text-2); }

/* ══════════════════════════════════════════
   TOAST
══════════════════════════════════════════ */
#toastContainer {
  position: fixed;
  bottom: 24px;
  right: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 300;
}

.toast {
  background: var(--surface-2);
  border: 1px solid var(--border-bright);
  border-radius: 9px;
  padding: 10px 14px;
  font: 500 12px/1 var(--font-sans);
  color: var(--text);
  box-shadow: var(--shadow);
  animation: toastIn .25s ease;
  min-width: 240px;
  max-width: 360px;
}

.toast.success { border-left: 2px solid var(--positive); }
.toast.error   { border-left: 2px solid var(--negative); }
.toast.info    { border-left: 2px solid var(--info); }

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

/* ══════════════════════════════════════════
   ADJUSTMENTS
══════════════════════════════════════════ */
.adj-list { display: flex; flex-direction: column; gap: 6px; }

.adj-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 12px;
}

.adj-item:hover { background: var(--surface-2); }

.adj-amount {
  font: 600 11.5px/1 var(--font-mono);
  padding: 2px 7px;
  border-radius: 4px;
  margin-right: 4px;
}

.adj-amount.positive { background: var(--negative-soft); color: var(--negative); }
.adj-amount.negative { background: var(--positive-soft); color: var(--positive); }

/* ══════════════════════════════════════════
   DEDUCTION BOX
══════════════════════════════════════════ */
.deduction-box {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  margin-top: 16px;
}

.deduction-box h3 {
  font: 600 10px/1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--muted);
  margin-bottom: 10px;
}

.deduction-row {
  display: flex;
  justify-content: space-between;
  padding: 5px 0;
  font: 500 12px/1.3 var(--font-mono);
  border-bottom: 1px dashed var(--border);
  color: var(--text-2);
}

.deduction-row:last-child,
.deduction-row.total { border-bottom: none; }

.deduction-row.total {
  margin-top: 6px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  font-weight: 700;
  color: var(--text);
}

/* ══════════════════════════════════════════
   ALERTS
══════════════════════════════════════════ */
.alert {
  padding: 10px 14px;
  border-radius: 8px;
  font: 500 12px/1.4 var(--font-sans);
  margin-bottom: 14px;
  border: 1px solid transparent;
  display: flex;
  align-items: center;
  gap: 8px;
}

.alert-error   { background: var(--negative-soft); color: var(--negative); border-color: rgba(240,107,115,0.3); }
.alert-success { background: var(--positive-soft); color: var(--positive); border-color: rgba(95,211,150,0.3); }
.alert-info    { background: var(--info-soft);     color: var(--info);     border-color: rgba(126,182,255,0.3); }

/* ══════════════════════════════════════════
   MISC
══════════════════════════════════════════ */
.empty-state {
  text-align: center;
  padding: 56px 20px;
  color: var(--muted);
}

.empty-state .icon {
  font-size: 2.5rem;
  margin-bottom: 14px;
  opacity: 0.4;
  filter: grayscale(1);
  display: block;
}

.empty-state div:last-child {
  font: 400 13px/1.5 var(--font-sans);
  color: var(--muted);
}

.hidden { display: none !important; }

.text-danger { color: var(--negative); }
.fw-bold { font-weight: 700; }

.skeleton {
  background: linear-gradient(90deg, var(--surface-2) 0%, var(--surface-3) 50%, var(--surface-2) 100%);
  background-size: 200% 100%;
  animation: skeleton 1.5s ease-in-out infinite;
  border-radius: var(--radius);
  color: transparent !important;
  user-select: none;
}

@keyframes skeleton {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ══════════════════════════════════════════
   HAMBURGER / MOBILE DRAWER
══════════════════════════════════════════ */
.hamburger {
  display: none;
  width: 36px;
  height: 36px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 9px;
  flex-direction: column;
  gap: 4px;
  cursor: pointer;
  flex-shrink: 0;
}

.hamburger span {
  height: 1.5px;
  background: var(--text);
  border-radius: 1px;
  display: block;
  transition: transform .2s, opacity .2s;
}

.nav-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 90;
  display: none;
}

.nav-overlay.open { display: block; }

/* ══════════════════════════════════════════
   BOTTOM NAV (mobile)
══════════════════════════════════════════ */
.bottom-nav { display: none; }

/* ══════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════ */
@media (max-width: 768px) {
  body { overflow: auto; height: auto; }

  .app { height: auto; overflow: visible; }

  .sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    transform: translateX(-100%);
    z-index: 100;
    transition: transform .2s;
  }

  .sidebar.open { transform: translateX(0); }

  .main { margin-left: 0; }

  .hamburger { display: flex; }

  .topbar { padding: 0 16px; }

  .content { padding: 16px 14px 80px; overflow: visible; height: auto; }

  .bottom-nav {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--bg-2);
    border-top: 1px solid var(--border);
    padding: 8px 4px;
    z-index: 50;
  }

  .bottom-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 6px 0;
    color: var(--muted);
    font: 500 10px/1 var(--font-sans);
    cursor: pointer;
    transition: color .12s;
  }

  .bottom-nav-item.active { color: var(--accent); }

  .bottom-nav-icon { font-size: 18px; }

  .dash-bento { grid-template-columns: 1fr; }
  .dash-mini-grid { grid-template-rows: unset; }
  .dash-two-col { grid-template-columns: 1fr; }

  .form-row { grid-template-columns: 1fr; }

  .salary-overview-grid { grid-template-columns: 1fr; }

  .topbar-search { display: none; }

  .modal { max-height: 85vh; }
}

/* ══════════════════════════════════════════
   SALARY CARD (sc-*) — rendered by app.js
══════════════════════════════════════════ */
.sc-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 12px;
  overflow: hidden;
  position: relative;
}

.sc-card.sc-terminated { opacity: 0.7; }

.sc-accent {
  height: 3px;
}
.sc-accent.sc-payroll    { background: var(--accent); }
.sc-accent.sc-self-emp   { background: var(--warning); }
.sc-accent.sc-term-accent { background: var(--dim); }

.sc-term-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  background: var(--negative-soft);
  border-bottom: 1px solid rgba(240,107,115,0.2);
  font: 600 11px/1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--negative);
}
.tb-date { color: var(--text-2); }
.tb-reason { color: var(--muted); font-weight: 400; }

.sc-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--border);
}

.sc-avatar {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  color: var(--accent);
  font: 700 14px/1 var(--font-mono);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.sc-info { flex: 1; min-width: 0; }

.sc-emp-name {
  font: 600 14px/1 var(--font-sans);
  color: var(--text);
  margin-bottom: 4px;
}

.sc-emp-role {
  font: 400 11.5px/1 var(--font-sans);
  color: var(--muted);
  margin-bottom: 6px;
}

.sc-emp-badges { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }

.sc-emp-since {
  font: 500 10.5px/1 var(--font-mono);
  color: var(--dim);
}

.sc-annual { text-align: right; flex-shrink: 0; }
.sc-annual-lbl { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.5px; color: var(--muted); margin-bottom: 3px; }
.sc-annual-val { font-size: 1.1rem; font-weight: 700; color: var(--text); }

.sc-prog { padding: 14px 20px; border-bottom: 1px solid var(--border); }

.sc-prog-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  font-size: 0.78rem;
  color: var(--muted);
}

.sc-prog-track {
  height: 8px;
  background: var(--surface-2);
  border-radius: 4px;
  overflow: hidden;
}

.sc-prog-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 4px;
  transition: width .4s ease;
}

.sc-prog-fill.overpaid { background: var(--negative); }

.sc-figures {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 1px;
  background: var(--border);
  border-bottom: 1px solid var(--border);
}

.sc-fig {
  background: var(--surface);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sc-fig-hi   { background: var(--surface-2); }
.sc-fig-bad  { background: rgba(240,107,115,0.04); }
.sc-fig-ok   { background: rgba(95,211,150,0.03); }

.sc-fig-lbl { font: 600 9.5px/1 var(--font-mono); text-transform: uppercase; letter-spacing: 0.8px; color: var(--muted); }
.sc-fig-val { font: 700 18px/1.2 var(--font-mono); color: var(--text); letter-spacing: -0.5px; }
.sc-fig-sub { font: 500 10.5px/1 var(--font-mono); color: var(--dim); }
.sc-fig-deduct { font: 600 10.5px/1 var(--font-mono); color: var(--negative); margin-top: 2px; }

.sc-firstmonth-tip {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 20px;
  background: var(--info-soft);
  border-bottom: 1px solid rgba(126,182,255,0.2);
  font: 400 12px/1.5 var(--font-sans);
  color: var(--info);
}
.sc-fm-icon { font-size: 14px; flex-shrink: 0; margin-top: 1px; }
.sc-fm-sub { font: 500 10.5px/1 var(--font-mono); color: var(--muted); display: block; margin-top: 3px; }

.sc-sections { }

.sc-section { border-bottom: 1px solid var(--border); }
.sc-section:last-child { border-bottom: none; }

.sc-sec-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 12px 20px;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  transition: background .12s;
}
.sc-sec-toggle:hover { background: var(--surface-2); }

.sc-sec-title {
  font: 600 11.5px/1 var(--font-sans);
  color: var(--text-2);
  flex: 1;
}

.sc-sec-sum {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 4px;
}
.sc-sec-sum.green  { background: var(--positive-soft); color: var(--positive); }
.sc-sec-sum.red    { background: var(--negative-soft); color: var(--negative); }
.sc-sec-sum.amber  { background: var(--warning-soft);  color: var(--warning); }
.sc-sec-sum.muted  { background: var(--surface-2); color: var(--muted); }

.sc-chevron {
  color: var(--dim);
  font-size: 16px;
  transition: transform .2s;
}
.sc-section.open .sc-chevron { transform: rotate(90deg); }

.sc-sec-body {
  display: none;
  padding: 8px 20px 14px;
  background: var(--bg-2);
}
.sc-section.open .sc-sec-body { display: block; }

.sc-sec-actions { margin-bottom: 10px; display: flex; gap: 6px; }

.sc-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 7px;
  margin-bottom: 5px;
  font-size: 12px;
}

.sc-item-date {
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--muted);
  min-width: 80px;
}

.sc-item-amt {
  font-size: 0.8rem;
  font-weight: 600;
  min-width: 90px;
}
.sc-item-amt.pos { color: var(--positive); }
.sc-item-amt.neg { color: var(--negative); }
.sc-item-amt.amb { color: var(--warning); }

.sc-item-note {
  flex: 1;
  font: 400 11.5px/1 var(--font-sans);
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sc-empty {
  font: 400 11.5px/1 var(--font-sans);
  color: var(--dim);
  padding: 8px 0;
  text-align: center;
}

.sc-days-note {
  font: 400 12px/1.5 var(--font-sans);
  color: var(--muted);
  padding: 4px 0;
}

.sc-paye-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}

.sc-paye-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
}
.sc-paye-lbl { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.4px; color: var(--muted); margin-bottom: 4px; }
.sc-paye-val { font-size: 0.88rem; font-weight: 700; color: var(--text); }
.sc-paye-sub { font-size: 0.7rem; color: var(--dim); margin-top: 2px; }

.sc-paye-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-radius: 7px;
}
.sc-paye-footer-lbl { font-size: 0.78rem; font-weight: 600; color: var(--accent); }
.sc-paye-footer-val { font-size: 0.88rem; font-weight: 700; color: var(--accent); }

.sc-breakdown {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 8px;
}
.sc-breakdown.danger { border-color: rgba(240,107,115,0.3); }
.sc-breakdown.sc-breakdown-secondary { opacity: 0.75; }

.sc-breakdown-title {
  padding: 8px 12px;
  background: var(--bg-2);
  border-bottom: 1px solid var(--border);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--muted);
}

.sc-breakdown-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 7px 12px;
  border-bottom: 1px dashed var(--border);
  font-size: 0.8rem;
  color: var(--text-2);
}
.sc-breakdown-row:last-child { border-bottom: none; }
.sc-breakdown-row.total {
  border-top: 1px solid var(--border);
  font-weight: 700;
  color: var(--text);
}

.sc-hist-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 7px;
  margin-bottom: 5px;
  font-size: 12px;
}

.sc-notes-list { display: flex; flex-direction: column; gap: 6px; }

.sc-note-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 10px 12px;
}
.sc-note-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 5px;
}
.sc-note-author { font: 600 11px/1 var(--font-mono); color: var(--muted); }
.sc-note-date   { font: 500 10.5px/1 var(--font-mono); color: var(--dim); }
.sc-note-text   { font: 400 12px/1.5 var(--font-sans); color: var(--text-2); }

.sc-card-footer {
  display: flex;
  gap: 8px;
  padding: 12px 20px;
  border-top: 1px solid var(--border);
  background: var(--bg-2);
}

/* ══════════════════════════════════════════
   CALENDAR SUMMARY
══════════════════════════════════════════ */
.cal-summary-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  display: inline-flex;
  flex-direction: column;
  gap: 6px;
  margin-right: 10px;
  margin-bottom: 8px;
  min-width: 160px;
  vertical-align: top;
}

@media (max-width: 480px) {
  .hm-pay-fields { grid-template-columns: 1fr 1fr; }
  .hm-3col { grid-template-columns: 1fr 1fr !important; }
}

/* ══════════════════════════════════════════
   THEME TOGGLE BUTTON
══════════════════════════════════════════ */
.theme-toggle-btn {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 10px 14px; margin-bottom: 8px;
  background: var(--surface); border: 1px solid var(--border-bright);
  border-radius: 10px; color: var(--text-2); font-size: 0.82rem; font-weight: 600;
  cursor: pointer; transition: all 0.2s; letter-spacing: 0.2px;
  font-family: 'Inter', sans-serif;
}
.theme-toggle-btn:hover { background: var(--surface-2); color: var(--text); border-color: var(--border-bright); }
.theme-toggle-btn span:first-child { font-size: 1rem; }

/* smooth theme transition */
*, *::before, *::after { transition: background-color 0.2s ease, border-color 0.2s ease, color 0.15s ease; }
/* but don't slow down transforms/opacity/shadows on interactive elements */
.btn, .nav-item, .dash-mini-card, .sc-card, .salary-overview-card { transition: all 0.18s ease !important; }

/* ══════════════════════════════════════════
   DARK THEME
══════════════════════════════════════════ */
[data-theme="dark"] {
  /* Electric blue on near-black. Brighter than the light-mode blue so it
     reads on the dark surfaces. */
  --accent-rgb:     47 128 255;
  --accent:         #2f80ff;
  --accent-dim:     rgb(var(--accent-rgb) / 0.14);
  --accent-soft:    rgb(var(--accent-rgb) / 0.14);
  --accent-line:    rgb(var(--accent-rgb) / 0.40);
  --primary:        var(--accent);
  --primary-dark:   #1f6feb;
  --primary-dim:    rgb(var(--accent-rgb) / 0.16);
  --primary-light:  rgb(var(--accent-rgb) / 0.12);
  --danger:         #f2766e;
  --danger-light:   rgba(242,118,110,0.12);
  --negative:       #f2766e;
  --negative-soft:  rgba(242,118,110,0.12);
  --warning:        #e8b44f;
  --warning-light:  rgba(232,180,79,0.12);
  --warning-soft:   rgba(232,180,79,0.12);
  --success:        #4cc38a;
  --success-light:  rgba(76,195,138,0.12);
  --positive:       #4cc38a;
  --positive-soft:  rgba(76,195,138,0.12);
  --info:           var(--accent);
  --info-light:     var(--accent-soft);
  --info-soft:      var(--accent-soft);

  /* Black, in three quiet steps: page, card, raised. */
  --bg:             #08090b;
  --bg-2:           #0c0d10;
  --surface:        #111317;
  --surface-2:      #171a1f;
  --surface-3:      #1e2127;
  --card:           #111317;
  --card-raised:    #171a1f;
  --border:         #22262d;
  --border-bright:  #2e333b;
  --border-light:   #1b1e24;
  --border-white:   #2a2e36;
  --line:           #1c1f25;

  --text:           #f3f4f6;
  --text-2:         #c9cdd4;
  --muted:          #8b919c;
  --muted-light:    #5f6570;
  --dim:            #6b717c;

  --sidebar-bg:     #0b0c0f;

  --shadow-sm:  0 1px 2px rgba(0,0,0,0.30);
  --shadow:     0 8px 24px rgba(0,0,0,0.40);
  --shadow-lg:  0 24px 64px rgba(0,0,0,0.55);
  --shadow-card: 0 0 0 1px rgba(255,255,255,0.02);
  --shadow-hover: 0 10px 30px rgba(0,0,0,0.45);

  --glow-p: none;
  --glow-a: none;
  --glow-g: none;
  --glow-r: none;

  /* Series hues, re-stepped for the #1e222a card */
  --chart-1: #3987e5;
  --chart-2: #d95926;
  --chart-3: #199e70;
  --chart-4: #c98500;
  --chart-5: #d55181;
  --chart-6: #008300;
  --chart-7: #9085e9;
}

/* Dark body background — clean flat near-black, minimalist */
[data-theme="dark"] body {
  background: var(--bg);
  background-image: none;
}

/* Dark cards — flat, subtle hairline border */
[data-theme="dark"] .card,
[data-theme="dark"] .sc-card,
[data-theme="dark"] .salary-overview-card,
[data-theme="dark"] .employee-card {
  background: var(--card);
  border-color: var(--border);
  box-shadow: var(--shadow-card);
}
[data-theme="dark"] .card:hover,
[data-theme="dark"] .sc-card:hover {
  border-color: var(--border-bright);
  box-shadow: var(--shadow-hover);
}

/* Dark inputs */
[data-theme="dark"] .form-group input,
[data-theme="dark"] .form-group select,
[data-theme="dark"] .form-group textarea {
  background: var(--surface-2);
  border-color: var(--border-bright);
  color: var(--text);
}
[data-theme="dark"] .form-group input:focus,
[data-theme="dark"] .form-group select:focus,
[data-theme="dark"] .form-group textarea:focus {
  background: var(--surface-3);
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgb(var(--accent-rgb) / 0.15);
}
[data-theme="dark"] .form-group input::placeholder { color: var(--muted-light); }
[data-theme="dark"] select option { background: #262b34; color: var(--text); }

/* Dark table */
[data-theme="dark"] table thead th {
  background: var(--bg-2);
  border-bottom-color: var(--border);
  color: var(--muted);
  font-size: 0.7rem; letter-spacing: 0.6px;
}
[data-theme="dark"] table tbody tr:hover td { background: rgba(255,255,255,0.04); }
[data-theme="dark"] table tbody td { border-bottom-color: var(--border-light); color: var(--text); }
[data-theme="dark"] table tbody td strong { color: var(--text); }
[data-theme="dark"] .badge { border-width: 1px; border-style: solid; }
[data-theme="dark"] .sc-fig-lbl { color: var(--muted) !important; }
[data-theme="dark"] .sc-fig-sub { color: var(--muted-light) !important; }
[data-theme="dark"] .sc-emp-role, [data-theme="dark"] .sc-emp-since { color: var(--muted) !important; }
[data-theme="dark"] .soc-label { color: var(--muted); }
[data-theme="dark"] .soc-header { color: var(--text); }
[data-theme="dark"] .sc-sec-title { color: var(--text-2); }
[data-theme="dark"] .sc-prog-meta span { color: var(--muted); }
[data-theme="dark"] .sc-annual-lbl { color: var(--muted) !important; }
[data-theme="dark"] .sc-annual-val { color: var(--text) !important; }

/* Dark filter bar */
[data-theme="dark"] .filter-bar,
/* Dark modal */
[data-theme="dark"] .modal {
  background: var(--surface);
  border-color: var(--border-bright);
  border-top-color: var(--primary);
  box-shadow: 0 32px 80px rgba(0,0,0,0.55);
}
[data-theme="dark"] .modal-overlay { background: rgba(8,10,14,0.68); }
[data-theme="dark"] .modal-close { background: rgba(255,255,255,0.04); border-color: var(--border); color: var(--muted); }

/* Dark hm-body panels in hotel modal */
[data-theme="dark"] .hm-body { background: rgba(255,255,255,0.03); border-color: rgb(var(--accent-rgb) / 0.12); }

/* Dark hero dashboard card — clean, minimal with subtle gold edge */
[data-theme="dark"] .dash-hero-card {
  background: linear-gradient(135deg, var(--surface) 0%, var(--surface-2) 100%);
  border-color: var(--border-bright);
  box-shadow: var(--shadow-card);
}
[data-theme="dark"] .dash-hero-glow {
  background: radial-gradient(circle at 30% 50%, rgb(var(--accent-rgb) / 0.12) 0%, transparent 65%);
}
[data-theme="dark"] .dash-hero-value { color: var(--text); text-shadow: none; }

/* Dark mini cards */
[data-theme="dark"] .dash-mini-card {
  background: var(--card);
  border-color: var(--border);
}
[data-theme="dark"] .dash-mini-card:hover {
  box-shadow: var(--shadow-hover);
  border-color: var(--border-bright);
}
[data-theme="dark"] .dash-mini--indigo { border-left-color: var(--accent); }
[data-theme="dark"] .dash-mini--green  { border-left-color: #34d399; }
[data-theme="dark"] .dash-mini--alert  { border-left-color: #fbbf24; }
[data-theme="dark"] .dash-mini--red    { border-left-color: #f87171; }

/* Dark primary button — neon glow */
[data-theme="dark"] .btn-primary {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  box-shadow: none;
}
[data-theme="dark"] .btn-primary:hover {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: none;
  transform: translateY(-1px);
}
[data-theme="dark"] .btn-ghost {
  background: var(--surface-2);
  border-color: var(--border-bright);
  color: var(--text-2);
}
[data-theme="dark"] .btn-ghost:hover { background: var(--surface-3); border-color: var(--primary); color: var(--text); }

/* Dark badges */
[data-theme="dark"] .badge-blue   { background: rgb(var(--accent-rgb) / 0.16); color: #ecc57c; border-color: rgb(var(--accent-rgb) / 0.32); }
[data-theme="dark"] .badge-green  { background: rgba(52,211,153,0.14); color: #6ee7b7; border-color: rgba(52,211,153,0.25); }
[data-theme="dark"] .badge-red    { background: rgba(248,113,113,0.14); color: #fca5a5; border-color: rgba(248,113,113,0.25); }
[data-theme="dark"] .badge-yellow { background: rgba(251,191,36,0.14); color: #fde68a; border-color: rgba(251,191,36,0.25); }

/* Dark alerts */
[data-theme="dark"] .alert-error   { background: rgba(248,113,113,0.1);  color: #fca5a5; border-color: rgba(248,113,113,0.2); }
[data-theme="dark"] .alert-success { background: rgba(52,211,153,0.1);   color: #6ee7b7; border-color: rgba(52,211,153,0.2); }
[data-theme="dark"] .alert-info    { background: rgba(56,189,248,0.1);   color: #7dd3fc; border-color: rgba(56,189,248,0.2); }

/* Dark stat cards */
[data-theme="dark"] .stat-card.blue   { background: rgb(var(--accent-rgb) / 0.12);  border-color: rgb(var(--accent-rgb) / 0.25); color: #ecc57c; }
[data-theme="dark"] .stat-card.yellow { background: rgba(251,191,36,0.1);   border-color: rgba(251,191,36,0.22); color: #fde68a; }
[data-theme="dark"] .stat-card.red    { background: rgba(248,113,113,0.1);  border-color: rgba(248,113,113,0.22); color: #fca5a5; }
[data-theme="dark"] .stat-card.green  { background: rgba(52,211,153,0.1);   border-color: rgba(52,211,153,0.2); color: #6ee7b7; }

/* Dark salary overview card */
[data-theme="dark"] .salary-overview-card {
  background: var(--card-raised);
  border-color: var(--border);
  box-shadow: 0 2px 16px rgba(0,0,0,0.22);
}
[data-theme="dark"] .salary-overview-card:hover {
  border-color: rgb(var(--accent-rgb) / 0.35);
  box-shadow: 0 8px 32px rgba(0,0,0,0.5), 0 0 20px rgb(var(--accent-rgb) / 0.12);
  background: var(--surface-3);
}
[data-theme="dark"] .salary-overview-card.soc-gbp-total {
  background: rgba(5,150,105,0.07);
  border-color: rgba(52,211,153,0.2);
}
[data-theme="dark"] .soc-title { color: var(--text); }
[data-theme="dark"] .salary-overview-card.payroll .soc-title       { color: var(--accent); }
[data-theme="dark"] .salary-overview-card.self-employed .soc-title { color: #fbbf24; }
[data-theme="dark"] .salary-overview-card.soc-gbp-total .soc-title { color: #34d399; }
[data-theme="dark"] .soc-pct-badge {
  background: rgb(var(--accent-rgb) / 0.15);
  color: var(--accent);
}
[data-theme="dark"] .soc-pct-badge--green {
  background: rgba(52,211,153,0.15);
  color: #34d399;
}
[data-theme="dark"] .soc-progress-wrap { background: var(--surface-3); }
[data-theme="dark"] .soc-hero-divider  { background: var(--border); }
[data-theme="dark"] .soc-footer-item--outstanding { border-top-color: var(--border); }

/* Dark deduction box */
[data-theme="dark"] .deduction-box {
  background: rgb(var(--accent-rgb) / 0.07);
  border-color: rgb(var(--accent-rgb) / 0.2);
}

/* Dark salary progress bar */
[data-theme="dark"] .salary-progress-bar { background: var(--surface-3); border-color: var(--border); }

/* Dark sc breakdown */
[data-theme="dark"] .sc-breakdown-item { border-color: var(--border-light); }
[data-theme="dark"] .sc-breakdown-secondary { background: var(--bg-2); }

/* Dark hotel table rows */

/* Dark employee cards */
[data-theme="dark"] .employee-card:hover {
  border-color: rgb(var(--accent-rgb) / 0.3);
  box-shadow: 0 8px 32px rgba(0,0,0,0.5), 0 0 20px rgb(var(--accent-rgb) / 0.1);
}

/* Dark scrollbar */
[data-theme="dark"] ::-webkit-scrollbar-track { background: transparent; }
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: rgb(var(--accent-rgb) / 0.25); border-radius: 99px; }
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: rgb(var(--accent-rgb) / 0.4); }

/* Dark theme toggle button style */
[data-theme="dark"] .theme-toggle-btn {
  background: rgb(var(--accent-rgb) / 0.1);
  border-color: rgb(var(--accent-rgb) / 0.2);
  color: #ecc57c;
}
[data-theme="dark"] .theme-toggle-btn:hover {
  background: rgb(var(--accent-rgb) / 0.18);
  border-color: rgb(var(--accent-rgb) / 0.4);
  box-shadow: 0 0 16px rgb(var(--accent-rgb) / 0.25);
  color: #f3d79e;
}

/* Dark login page */
[data-theme="dark"] .login-wrap {
  background: var(--bg);
  background-image:
    radial-gradient(ellipse at 20% 50%, rgb(var(--accent-rgb) / 0.1) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 20%, rgb(var(--accent-rgb) / 0.07) 0%, transparent 50%),
    linear-gradient(rgb(var(--accent-rgb) / 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgb(var(--accent-rgb) / 0.07) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 44px 44px, 44px 44px;
}
[data-theme="dark"] .login-card {
  background: rgba(14,21,48,0.95);
  border-color: rgb(var(--accent-rgb) / 0.2);
  box-shadow: 0 32px 80px rgba(0,0,0,0.7), 0 0 60px rgb(var(--accent-rgb) / 0.1);
}
[data-theme="dark"] .login-submit {
  box-shadow: 0 4px 16px rgb(var(--accent-rgb) / 0.4);
}
[data-theme="dark"] .login-submit:hover {
  box-shadow: 0 8px 28px rgb(var(--accent-rgb) / 0.55), 0 0 40px rgb(var(--accent-rgb) / 0.25);
}
[data-theme="dark"] .login-card input {
  background: rgba(255,255,255,0.04);
  border-color: rgb(var(--accent-rgb) / 0.2);
  color: var(--text);
}
[data-theme="dark"] .login-card input:focus {
  background: rgb(var(--accent-rgb) / 0.07);
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgb(var(--accent-rgb) / 0.15), 0 0 12px rgb(var(--accent-rgb) / 0.2);
}

/* ── Subscriptions ─────────────────────────────────────────────────────────── */
.sub-inactive { opacity: 0.6; }
.sub-inactive td:first-child { text-decoration: line-through; }
.sub-inactive-tag {
  display: inline-block; margin-top: 4px;
  font: 600 9.5px/1 var(--font-mono); text-transform: uppercase; letter-spacing: 0.6px;
  color: var(--muted); background: var(--surface-2);
  border: 1px solid var(--border); border-radius: 5px; padding: 3px 7px;
  text-decoration: none !important;
}

/* Subscription row action buttons */
.sub-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.sub-action-btn {
  display: inline-flex; align-items: center; gap: 4px;
  font: 600 11px/1 var(--font-sans); white-space: nowrap;
  padding: 6px 10px; border-radius: 7px; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text-2);
  transition: all 0.14s ease;
}
.sub-action-btn:hover {
  border-color: var(--accent-line); color: var(--accent);
  background: var(--accent-soft); transform: translateY(-1px);
}
.sub-action-btn--play:hover  { border-color: var(--success); color: var(--success); background: rgba(34,197,94,0.10); }
.sub-action-btn--pause:hover { border-color: var(--warning); color: var(--warning); background: rgba(202,138,4,0.12); }
.sub-action-btn--danger:hover { border-color: var(--negative); color: var(--negative); background: rgba(239,68,68,0.10); }
.sub-row-monthly   td:first-child { border-left: 3px solid var(--accent); }
.sub-row-quarterly td:first-child { border-left: 3px solid var(--positive); }
.sub-row-annually  td:first-child { border-left: 3px solid #7c3aed; }
.sub-row-one_off   td:first-child { border-left: 3px solid var(--muted); }
.sub-renewal-warn    { color: var(--warning) !important; font-weight: 600; }
.sub-renewal-overdue { color: var(--negative) !important; font-weight: 600; }

/* ── Portfolio ─────────────────────────────────────────────────────────────── */
/* Legacy small cards (kept for any stray references) */
.port-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; }
.port-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.port-card-title { font-weight: 700; font-size: 1rem; color: var(--text); }
.port-card-meta { display: flex; gap: 10px; flex-wrap: wrap; font-size: 0.78rem; color: var(--muted); }
.port-stat { flex: 1; background: var(--bg); border-radius: 10px; padding: 10px 14px; }
.port-stat-label { font-size: 0.72rem; color: var(--muted); margin-bottom: 4px; }
.port-stat-val { font-size: 1.1rem; font-weight: 700; color: var(--text); }
.port-stat--green { color: var(--success) !important; }
.port-stat--amber { color: var(--warning) !important; }
.port-card-notes { font-size: 0.8rem; color: var(--muted); border-top: 1px solid var(--border); padding-top: 8px; }

/* New portfolio year-summary strip */
.port-year-summary {
  display: flex; gap: 1px; background: var(--border);
  border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; margin-bottom: 16px;
}
.port-sum-stat {
  flex: 1; padding: 14px 18px; background: var(--surface);
  display: flex; flex-direction: column; gap: 5px;
}
.port-sum-label { font: 600 9px/1 var(--font-mono); text-transform: uppercase; letter-spacing: .8px; color: var(--muted); }
.port-sum-val   { font: 700 18px/1 var(--font-mono); color: var(--text); }
.port-sum--green { color: var(--positive) !important; }
.port-sum--amber { color: var(--warning) !important; }

/* ── Portfolio summary bar ────────────────────────────────────────────── */
.port-summary-bar {
  display: flex; background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px; overflow: hidden; margin-bottom: 16px;
}
.psb-item {
  flex: 1; padding: 13px 16px; border-right: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 5px;
}
.psb-item:last-child { border-right: none; }
.psb-lbl { font: 600 9px/1 var(--font-sans); text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.psb-val { font: 700 17px/1 var(--font-sans); color: var(--text); letter-spacing: -0.01em; }
.psb-green { color: var(--positive) !important; }
.psb-amber { color: var(--warning) !important; }

/* ── Portfolio Event Cards (pec) ──────────────────────────────────────── */
.port-search {
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
  padding: 6px 12px; font: 500 13px/1 var(--font-sans); color: var(--text);
  outline: none; width: 190px; transition: border-color .15s, box-shadow .15s;
}
.port-search:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.port-search::placeholder { color: var(--dim); }

.pec-list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: start; }
@media (max-width: 900px) { .pec-list { grid-template-columns: 1fr; } }
.pec-card {
  background: var(--surface); border: 1px solid var(--border);
  border-left: 3px solid var(--accent); border-radius: 8px;
  padding: 16px 18px 12px; transition: border-color .15s, box-shadow .15s;
}
.pec-card:hover { border-color: var(--accent-line); box-shadow: 0 2px 14px rgba(0,0,0,.06); }
.pec-hd { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 12px; }
.pec-name { font: 700 15px/1.2 var(--font-sans); color: var(--text); margin-bottom: 6px; letter-spacing: -0.01em; }
.pec-chips { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.pec-date-chip {
  font: 700 10.5px/1 var(--font-mono); color: var(--text-2);
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 4px; padding: 3px 8px; white-space: nowrap; letter-spacing: .03em;
}
.pec-date-tbd { opacity: .5; }
.pec-loc-chip { font: 500 11px/1 var(--font-sans); color: var(--muted); }
.pec-loc-chip::before { content: "· "; color: var(--border); }
.pec-stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--border); border-radius: 6px;
  overflow: hidden; margin-bottom: 12px;
}
.pec-stats--3 { grid-template-columns: repeat(3, 1fr); }
.pec-stat { padding: 9px 14px; border-right: 1px solid var(--border); background: var(--bg); }
.pec-stat:last-child { border-right: none; }
.pec-stat-lbl { font: 600 9px/1 var(--font-sans); text-transform: uppercase; letter-spacing: .07em; color: var(--muted); margin-bottom: 5px; }
.pec-stat-num { font: 700 14.5px/1 var(--font-mono); color: var(--text); letter-spacing: -0.01em; }
.pec-green { color: var(--positive) !important; }
.pec-amber { color: var(--warning) !important; }
.pec-bar-wrap { height: 4px; background: var(--border); border-radius: 2px; overflow: hidden; margin-bottom: 12px; }
.pec-bar { height: 100%; width: 0%; border-radius: 2px; transition: width .8s cubic-bezier(.4,0,.2,1); }
.pec-notes { font: 400 12px/1.5 var(--font-sans); color: var(--muted); font-style: normal; padding: 8px 0 10px; border-top: 1px solid var(--border); }
.pec-footer { display: flex; align-items: center; gap: 8px; padding-top: 10px; border-top: 1px solid var(--border); }
.pec-deals-btn {
  background: none; border: none; cursor: pointer; padding: 0;
  font: 600 12px/1 var(--font-sans); color: var(--accent);
  display: flex; align-items: center; gap: 5px; transition: color .15s;
}
.pec-deals-btn:hover { color: var(--text); }
.pec-arrow { display: inline-block; transition: transform .2s; font-size: 10px; }

/* ── Portfolio page (pf) ─────────────────────────────────────────────────
   Reads like the sales CRM's Event Performance page: a headline figure with
   a meter, a KPI row, revenue by series, then the event list by producer.
   Depth comes from hairlines, not shadows; money is mono, names are sans. */
.pf-eyebrow { font: 600 10px/1 var(--font-mono); text-transform: uppercase; letter-spacing: .8px; color: var(--muted); }
.pf-panel {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 18px 20px; margin-bottom: 14px;
}
.pf-panel-hd { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.pf-panel-title { font: 600 14px/1.2 var(--font-sans); color: var(--text); letter-spacing: -0.01em; }
.pf-panel-desc { font: 400 12px/1.45 var(--font-sans); color: var(--muted); margin-top: 4px; max-width: 64ch; }
.pf-panel-aside { font: 400 11px/1.4 var(--font-sans); color: var(--muted); }

/* Headline */
.pf-hero { padding: 22px 24px 20px; }
.pf-hero-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 10px; max-width: 760px; }
.pf-hero-fig { font: 700 40px/1 var(--font-mono); letter-spacing: -1.5px; color: var(--text); font-feature-settings: "tnum"; }
.pf-hero-sub { font: 400 13px/1.4 var(--font-sans); color: var(--muted); }
.pf-hero-sub b { font: 600 13px/1 var(--font-mono); color: var(--text); }
.pf-meter { position: relative; height: 10px; border-radius: 0 4px 4px 0; background: var(--border); margin-top: 14px; max-width: 760px; overflow: hidden; }
.pf-meter-fill { height: 100%; width: 0; background: var(--accent); border-radius: 0 4px 4px 0; transition: width .7s var(--ease); }
.pf-hero-note { margin-top: 8px; font: 400 12px/1.4 var(--font-sans); color: var(--muted); }
.pf-hero-note b { font: 600 12px/1 var(--font-mono); color: var(--text); }

/* KPI row, reusing the dashboard stat cards but static */
.pf-kpis { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 14px; }
.pf-kpis .dss-card { cursor: default; padding: 16px 18px 14px; gap: 6px; }
.pf-kpis .dss-card:hover { transform: none; box-shadow: var(--shadow-card); border-color: var(--border); }
.pf-kpis .dss-card:hover::before { opacity: 0; }
.pf-kpis .dss-value { font-size: 26px; letter-spacing: -1px; }
.pf-kpi-sub { font: 400 11px/1.3 var(--font-sans); color: var(--muted); }

/* Revenue by series: one bar per series, colour by identity, value direct-labelled */
.pf-series { display: flex; flex-direction: column; gap: 12px; }
.pf-series-row { position: relative; }
.pf-series-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.pf-series-name { display: flex; align-items: center; gap: 8px; min-width: 0; font: 500 13px/1.2 var(--font-sans); color: var(--text); }
.pf-series-name .pf-series-short { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-chip { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; background: var(--dim); }
.pf-series-n { font: 400 11px/1 var(--font-sans); color: var(--muted); flex-shrink: 0; }
.pf-series-val { font: 600 13px/1 var(--font-mono); color: var(--text); flex-shrink: 0; font-feature-settings: "tnum"; }
.pf-series-val small { font: 400 11px/1 var(--font-mono); color: var(--muted); }
.pf-track { position: relative; height: 10px; border-radius: 0 4px 4px 0; background: var(--border); margin-top: 6px; }
.pf-bar { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 0 4px 4px 0; background: var(--accent); transition: width .7s var(--ease); }
.pf-mark { position: absolute; top: -3px; width: 2px; height: 16px; border-radius: 1px; background: var(--text); box-shadow: 0 0 0 1px var(--surface); }
.pf-tip {
  display: none; position: absolute; right: 0; bottom: 100%; z-index: 5; margin-bottom: 6px; width: 230px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px;
  box-shadow: var(--shadow); font: 400 12px/1.3 var(--font-sans); color: var(--text); pointer-events: none; }
.pf-series-row:hover .pf-tip, .pf-series-row:focus-within .pf-tip { display: block; }
.pf-series-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; }
.pf-tip-title { font-weight: 600; margin-bottom: 4px; }
.pf-tip-row { display: flex; justify-content: space-between; gap: 10px; margin-top: 4px; }
.pf-tip-row span:first-child { color: var(--muted); }
.pf-tip-row span:last-child { font: 600 12px/1.3 var(--font-mono); color: var(--text); }
.pf-empty { border: 1px dashed var(--border); border-radius: 10px; padding: 24px; text-align: center; font: 400 13px/1.4 var(--font-sans); color: var(--muted); }

/* Event list, grouped by producer team */
.pf-list { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; margin-bottom: 14px; }
.pf-list-hd { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.pf-list-hd .pf-panel-title { margin-right: auto; }
.pf-group-hd { display: flex; align-items: baseline; gap: 10px; padding: 9px 16px; background: var(--surface-2); border-bottom: 1px solid var(--border); }
.pf-group + .pf-group .pf-group-hd { border-top: 1px solid var(--border); }
.pf-group-name { font: 600 11px/1 var(--font-mono); text-transform: uppercase; letter-spacing: .8px; color: var(--muted); }
.pf-group-n { font: 400 11px/1 var(--font-sans); color: var(--dim); }
.pf-group-total { margin-left: auto; font: 600 12px/1 var(--font-mono); color: var(--text); }
.pf-group-total small { font: 400 11px/1 var(--font-mono); color: var(--muted); }
.pec-card.pf-row {
  border: 0; border-bottom: 1px solid var(--border); border-radius: 0; padding: 0;
  background: transparent; box-shadow: none; transition: background .15s var(--ease);
}
.pec-card.pf-row:hover { border-color: var(--border); box-shadow: none; background: var(--surface-2); }
.pec-card.pf-row.open { background: transparent; }
.pf-group .pf-row:last-child { border-bottom: none; }
.pf-row-main { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto; align-items: center; gap: 20px; padding: 12px 16px; }
.pf-row-btn { display: flex; align-items: center; gap: 8px; text-align: left; background: none; border: 0; padding: 0; cursor: pointer; min-width: 0; width: 100%; color: var(--text); font: inherit; }
.pf-row-btn .pec-arrow { display: inline-flex; width: 14px; height: 14px; flex-shrink: 0; color: var(--muted); transition: transform .2s var(--ease); transform: rotate(-90deg); }
.pec-card.open .pec-arrow { transform: rotate(0deg); }
.pf-row-id { min-width: 0; }
.pf-row-txt { display: block; min-width: 0; flex: 1; }
.pf-row-name { display: block; }
.pf-row-name { font: 500 14px/1.3 var(--font-sans); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-row-btn:hover .pf-row-name { color: var(--accent); }
.pf-row-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 10px; margin-top: 3px; font: 400 11px/1.3 var(--font-sans); color: var(--muted); }
.pf-row-meta .pf-meta-item { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.pf-row-meta svg { width: 11px; height: 11px; flex-shrink: 0; opacity: .8; }
.pf-series-chip { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.pf-series-chip .pf-chip { width: 8px; height: 8px; }
.pf-meta-tbc { color: var(--dim); }
.pf-row-figs { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.pf-row-alloc { font: 600 13px/1 var(--font-mono); color: var(--text); font-feature-settings: "tnum"; }
.pf-row-paid { font: 400 11px/1 var(--font-mono); color: var(--muted); white-space: nowrap; }
.pf-row-figs + .pf-track { height: 8px; margin-top: 7px; }
.pf-row-actions { display: flex; gap: 6px; justify-self: end; }

/* The deals expander inside a row */
.pec-deals-list { display: none; border-top: 1px solid var(--border); background: var(--surface-2); padding: 12px 16px 14px; }
.pec-card.open .pec-deals-list { display: block; }
.pf-deals-hd { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pf-deals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 8px; }
.pf-deal { display: flex; align-items: center; gap: 8px; min-width: 0; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; }
.pf-deal-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--dim); flex-shrink: 0; }
.pf-deal-dot--paid { background: var(--positive); }
.pf-deal-dot--part { background: var(--warning); }
.pf-deal-body { min-width: 0; flex: 1; }
.pf-deal-co { display: block; font: 500 13px/1.3 var(--font-sans); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-deal-sub { display: block; font: 400 11px/1.3 var(--font-sans); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-deal-amt { font: 600 12px/1 var(--font-mono); color: var(--text); flex-shrink: 0; font-feature-settings: "tnum"; }
.pf-deals-msg { font: 400 12px/1.4 var(--font-sans); color: var(--muted); margin-top: 6px; }
.pf-deals-msg.pf-err { color: var(--negative); }

/* 2027 programme panel */
.pf-prog-status { font: 400 12px/1.5 var(--font-sans); color: var(--muted); }
.pf-prog-status b { font-weight: 600; color: var(--text); }
.pf-prog-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; background: var(--dim); }
.pf-prog-dot--linked { background: var(--positive); }
.pf-prog-dot--suggested { background: var(--warning); }
.pf-prog-dot--missing { background: var(--dim); }
.pf-prog-scroll { max-height: 560px; overflow: auto; margin-top: 12px; border: 1px solid var(--border); border-radius: 8px; }
.pf-prog-table { width: 100%; border-collapse: collapse; font: 400 12px/1.35 var(--font-sans); }
.pf-prog-table thead th { text-align: left; font: 600 10px/1 var(--font-mono); text-transform: uppercase; letter-spacing: .8px; color: var(--muted); padding: 8px; border-bottom: 1px solid var(--border); background: var(--surface-2); position: sticky; top: 0; z-index: 1; }
.pf-prog-table tbody td { padding: 7px 8px; border-bottom: 1px solid var(--border); vertical-align: middle; color: var(--text); }
.pf-prog-table tr:last-child td { border-bottom: none; }
.pf-prog-table td.pf-td-name { font-weight: 500; }
.pf-prog-table td.pf-td-muted { color: var(--muted); white-space: nowrap; }
.pf-prog-select {
  width: 100%; max-width: 380px; background: var(--surface); border: 1px solid var(--border); border-radius: 6px;
  padding: 5px 8px; font: 400 12px/1.3 var(--font-sans); color: var(--text);
}
.pf-prog-select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.pf-prog-linked { color: var(--muted); }
.pf-prog-linked b { font-weight: 500; color: var(--text); }
.pf-prog-pending { color: var(--warning, #b7791f); }
.pf-prog-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.pf-prog-actions .pf-prog-status { margin-right: auto; }
.pf-prog-foot { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); font: 400 11px/1.5 var(--font-sans); color: var(--dim); }
.pf-form-hint { font: 400 11px/1.4 var(--font-sans); color: var(--muted); margin-top: 8px; min-height: 1em; }

@media (max-width: 1100px) {
  .pf-kpis { grid-template-columns: repeat(3, 1fr); }
  .pf-deals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .pf-kpis { grid-template-columns: repeat(2, 1fr); }
  .pf-row-main { grid-template-columns: 1fr auto; }
  .pf-row-figs-wrap { grid-column: 1 / -1; }
  .pf-deals { grid-template-columns: 1fr; }
  .pf-hero-fig { font-size: 32px; }
  .pf-prog-table th:nth-child(2), .pf-prog-table td:nth-child(2) { display: none; }
}

@media (max-width: 600px) {
  .pec-stats { grid-template-columns: 1fr 1fr; }
  .pec-stats:not(.pec-stats--3) .pec-stat:nth-child(2) { border-right: none; }
  .pec-stats:not(.pec-stats--3) .pec-stat:nth-child(3),
  .pec-stats:not(.pec-stats--3) .pec-stat:nth-child(4) { border-top: 1px solid var(--border); }
  .pec-stats:not(.pec-stats--3) .pec-stat:nth-child(4) { border-right: none; }
  .pec-stats--3 { grid-template-columns: repeat(3, 1fr); }
  .pec-stat { padding: 9px 10px; }
  .pec-stat-num { font-size: 13px; }
  .port-summary-bar { flex-wrap: wrap; }
  .psb-item { min-width: 50%; }
  .psb-item:nth-child(2) { border-right: none; }
  .psb-item:nth-child(3),
  .psb-item:nth-child(4),
  .psb-item:nth-child(5) { border-top: 1px solid var(--border); }
}

/* Deal modal — linked event picker */
.deal-event-picker { border: 1px solid var(--border); border-radius: 9px; overflow: hidden; background: var(--surface); }
.deal-event-search {
  width: 100%; padding: 9px 12px; border: none; border-bottom: 1px solid var(--border);
  background: var(--surface-2); color: var(--text); font: 500 13px/1 var(--font-sans);
  outline: none;
}
.deal-event-search::placeholder { color: var(--dim); }
.deal-event-checkboxes { max-height: 240px; overflow-y: auto; padding: 4px 0; }
.deal-event-checkboxes::-webkit-scrollbar { width: 4px; }
.deal-event-checkboxes::-webkit-scrollbar-track { background: transparent; }
.deal-event-checkboxes::-webkit-scrollbar-thumb { background: var(--border-bright); border-radius: 2px; }
.deal-event-check-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; cursor: pointer; transition: background .1s;
}
.deal-event-check-item:hover { background: var(--surface-2); }
.deal-event-check-item input[type="checkbox"] { width: 15px; height: 15px; accent-color: var(--accent); cursor: pointer; flex-shrink: 0; }
.deal-event-check-item span { font: 500 13px/1.3 var(--font-sans); color: var(--text); }
.deal-event-check-item.selected { background: var(--accent-soft); }


/* ── Deal Tracker ──────────────────────────────────────────────────────────── */
.deal-col {
  flex: 0 0 220px;
  min-width: 200px;
  background: var(--bg-2);
  border-radius: 14px;
  border: 1.5px solid var(--border);
  padding: 0;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 200px);
}
.deal-col-hd {
  padding: 12px 14px 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-2);
  border-radius: 14px 14px 0 0;
}
.deal-col-title { font-weight: 700; font-size: 0.85rem; color: var(--text); }
.deal-col-count {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 1px 8px;
  font-size: 0.72rem;
  color: var(--muted);
  font-weight: 600;
}
.deal-col-total {
  padding: 0 14px 8px;
  font-size: 0.72rem;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.deal-col-cards {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.deal-add-btn {
  margin: 8px;
  padding: 8px 14px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
}

.deal-card {
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 12px;
  cursor: grab;
  transition: box-shadow .12s, transform .12s;
}
.deal-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.1); transform: translateY(-1px); }
.deal-card.dragging { opacity: .5; cursor: grabbing; }
.deal-card-title { font-weight: 600; font-size: 0.85rem; color: var(--text); margin-bottom: 2px; }
.deal-card-company { font-size: 0.75rem; color: var(--muted); margin-bottom: 4px; }
.deal-card-amount { font-weight: 700; font-size: 1rem; color: var(--primary); margin-bottom: 4px; }
.deal-card-events { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 4px; }
.deal-event-tag {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 1px 7px;
  font-size: 0.68rem;
  color: var(--muted);
}
.deal-card-invs { display: flex; gap: 6px; margin-bottom: 4px; }
.deal-inv-link {
  font-size: 0.72rem;
  color: var(--primary);
  text-decoration: none;
  background: rgb(var(--accent-rgb) / .08);
  border-radius: 6px;
  padding: 2px 7px;
}
.deal-inv-link:hover { text-decoration: underline; }
.deal-card-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; }
.deal-stage-chip {
  font-size: 0.68rem;
  font-weight: 700;
  border-radius: 20px;
  padding: 2px 8px;
  letter-spacing: .03em;
}
.deal-stage-select-wrap { margin-top: 6px; }
.deal-stage-sel {
  width: 100%;
  font-size: 0.72rem;
  padding: 4px 6px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-2);
  color: var(--text);
  font-family: inherit;
  cursor: pointer;
}

/* ══════════════════════════════════════════
   DEAL TRACKER — full layout
══════════════════════════════════════════ */

/* Last invoice banner */
/* ── Revenue Intelligence Panel ──────────────────────────────────────────── */
.ri-card {
  position: relative;
  background: linear-gradient(145deg, #191c22 0%, #232834 45%, #191c22 100%);
  border: 1px solid rgb(var(--accent-rgb) / 0.25);
  border-radius: 20px;
  padding: 22px 22px 18px;
  overflow: hidden;
  height: 100%;
  box-sizing: border-box;
  box-shadow: 0 0 60px rgb(var(--accent-rgb) / 0.08), inset 0 1px 0 rgba(255,255,255,0.06);
}
.ri-glow {
  position: absolute;
  top: -60px; left: 50%;
  transform: translateX(-50%);
  width: 280px; height: 200px;
  background: radial-gradient(ellipse, rgb(var(--accent-rgb) / 0.18) 0%, transparent 70%);
  pointer-events: none;
}
.ri-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}
.ri-header-left { display: flex; align-items: center; gap: 8px; }
.ri-pulse {
  display: inline-block;
  width: 7px; height: 7px;
  background: #22c55e;
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(34,197,94,0.5);
  animation: ri-pulse-anim 2s ease-in-out infinite;
}
@keyframes ri-pulse-anim {
  0%,100% { box-shadow: 0 0 0 0 rgba(34,197,94,0.4); }
  50%      { box-shadow: 0 0 0 6px rgba(34,197,94,0); }
}
.ri-title {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: .12em;
  color: rgba(255,255,255,0.55);
  text-transform: uppercase;
}
.ri-year {
  font-size: 0.72rem;
  font-weight: 700;
  color: rgba(255,255,255,0.3);
  background: rgba(255,255,255,0.06);
  border-radius: 6px;
  padding: 2px 8px;
}
.ri-body {
  display: flex;
  gap: 18px;
  align-items: center;
  margin-bottom: 18px;
}
.ri-chart-wrap {
  position: relative;
  flex: 0 0 108px;
  width: 108px;
  height: 108px;
}
.ri-donut {
  width: 108px;
  height: 108px;
  transform: rotate(-90deg);
}
.ri-donut-track   { stroke: rgba(255,255,255,0.06); }
.ri-seg--paid     { stroke: #22c55e; }
.ri-seg--partial  { stroke: #f59e0b; }
.ri-seg--unpaid   { stroke: #374151; }
.ri-donut-center {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}
.ri-donut-num {
  font-size: 1.6rem;
  font-weight: 800;
  color: #fff;
  line-height: 1;
}
.ri-donut-label {
  font-size: 0.65rem;
  color: rgba(255,255,255,0.4);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.ri-metrics {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.ri-metric {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 11px;
  padding: 9px 11px;
}
.ri-metric--wide { grid-column: span 1; }
@media (max-width: 900px) {
  .ri-metrics { grid-template-columns: 1fr 1fr; }
  .ri-metric--wide { grid-column: span 2; }
}
.ri-metric-label {
  font-size: 0.65rem;
  color: rgba(255,255,255,0.38);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 3px;
}
.ri-metric-val {
  font-size: 1rem;
  font-weight: 800;
  color: rgba(255,255,255,0.85);
}
.ri-green { color: #4ade80 !important; }
.ri-blue  { color: var(--accent) !important; }
.ri-metric-sub { font-size: 0.65rem; margin-top: 2px; color: rgba(255,255,255,0.42); font-weight: 500; }
:root .ri-metric-sub { color: #8a94a8; }
.ri-winbar-wrap {
  flex: 1;
  height: 5px;
  background: rgba(255,255,255,0.08);
  border-radius: 99px;
  overflow: hidden;
}
.ri-winbar-fill {
  height: 100%;
  background: linear-gradient(90deg, #22c55e, #4ade80);
  border-radius: 99px;
}

/* Stage breakdown bars */
.ri-stages {
  border-top: 1px solid rgba(255,255,255,0.06);
  padding-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.ri-stage-row {
  display: grid;
  grid-template-columns: 70px 1fr 80px;
  align-items: center;
  gap: 8px;
}
.ri-stage-name {
  font-size: 0.72rem;
  color: rgba(255,255,255,0.45);
  font-weight: 600;
}
.ri-stage-bar-wrap {
  height: 5px;
  background: rgba(255,255,255,0.06);
  border-radius: 99px;
  overflow: hidden;
}
.ri-stage-bar {
  height: 100%;
  border-radius: 99px;
  box-shadow: 0 0 6px currentColor;
}
.ri-stage-meta { display: flex; justify-content: space-between; gap: 4px; }
.ri-stage-count { font-size: 0.72rem; font-weight: 700; }
.ri-stage-amt { font-size: 0.68rem; color: rgba(255,255,255,0.3); }

/* Contract expiry section inside RI card */
.ri-expiry-section {
  border-top: 1px solid rgba(255,170,0,0.2);
  margin-top: 14px;
  padding-top: 12px;
}
.ri-expiry-title {
  font-size: 0.68rem;
  font-weight: 700;
  color: rgba(255,190,0,0.7);
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.ri-expiry-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.78rem;
  color: rgba(255,255,255,0.55);
  padding: 3px 0;
}
.ri-expiry-badge {
  font-size: 0.68rem;
  font-weight: 700;
  border-radius: 6px;
  padding: 2px 7px;
}
.ri-expiry-yellow { background: rgba(234,179,8,.2); color: #fde68a; }
.ri-expiry-red    { background: rgba(239,68,68,.2); color: #fca5a5; }

/* ── RI Event breakdown ─────────────────────────────────────────────────────── */
.ri-evt-section {
  border-top: 1px solid rgba(255,255,255,0.08);
  margin-top: 14px;
  padding-top: 10px;
}
.ri-evt-section-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.ri-evt-section-title {
  font-size: 0.65rem;
  font-weight: 700;
  color: rgba(255,255,255,0.35);
  letter-spacing: .09em;
  text-transform: uppercase;
}
.ri-evt-search {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 7px;
  color: rgba(255,255,255,0.7);
  font-size: 0.72rem;
  padding: 4px 9px;
  outline: none;
  font-family: inherit;
  width: 140px;
  transition: border-color 0.15s;
}
.ri-evt-search::placeholder { color: rgba(255,255,255,0.25); }
.ri-evt-search:focus { border-color: rgb(var(--accent-rgb) / 0.5); background: rgba(255,255,255,0.08); }

/* Full-width RI on dashboard — cards go horizontal when space allows */
#contractExpiryPanel .ri-card { max-width: 100%; }

/* ── Revenue Intelligence: light mode overrides (calibrated neutral + gold) ── */
:root .ri-card {
  background: #ffffff;
  border: 1px solid #e8eaf0;
  border-radius: 18px;
  box-shadow: 0 1px 2px rgba(16,24,40,0.04), 0 8px 28px -12px rgba(16,24,40,0.14);
}
:root .ri-glow { background: radial-gradient(ellipse, rgb(var(--accent-rgb) / 0.05) 0%, transparent 70%); }
:root .ri-header { border-bottom: 1px solid #f0f1f5; padding-bottom: 14px; }
:root .ri-title { color: #5b6480; font-weight: 700; letter-spacing: .14em; }
:root .ri-pulse { background: #16a34a; }
:root .ri-year {
  color: #8a6d1f; background: rgb(var(--accent-rgb) / 0.12);
  border: 1px solid rgb(var(--accent-rgb) / 0.22); border-radius: 7px; font-weight: 700;
}
/* Donut — soft, refined ring */
:root .ri-donut-track { stroke: #eef0f5; }
:root .ri-seg--paid    { stroke: #16a34a; }
:root .ri-seg--partial { stroke: #e0a526; }
:root .ri-seg--unpaid  { stroke: #dfe3ec; }
:root .ri-donut-num { color: #0f1729; font-weight: 800; letter-spacing: -0.02em; }
:root .ri-donut-label { color: #8a94a8; font-weight: 600; }
/* Metric tiles — clean neutral surfaces, confident numbers */
:root .ri-metric {
  background: #fafbfc;
  border: 1px solid #edeff4;
  border-radius: 12px;
  padding: 11px 13px;
}
:root .ri-metric-label { color: #8a94a8; font-weight: 600; letter-spacing: .07em; }
:root .ri-metric-val { color: #0f1729; font-weight: 800; letter-spacing: -0.01em; }
:root .ri-green { color: #15803d !important; }
:root .ri-blue  { color: #0f1729 !important; }
:root .ri-winbar-wrap { background: #eef0f5; }
:root .ri-winbar-fill { background: linear-gradient(90deg, var(--accent), var(--primary-dark)); }
:root .ri-stages { border-top-color: #f0f1f5; }
:root .ri-stage-name { color: #5b6480; }
:root .ri-stage-bar-wrap { background: #eef0f5; }
:root .ri-stage-amt { color: #8a94a8; }
:root .ri-stage-count { color: #1a1f2e; }
:root .ri-evt-section { border-top-color: #f0f1f5; }
:root .ri-evt-section-title { color: #5b6480; font-weight: 700; letter-spacing: .1em; }
:root .ri-evt-search {
  background: #fafbfc; border: 1px solid #e3e6ee; color: #1a1f2e;
  border-radius: 8px;
}
:root .ri-evt-search::placeholder { color: #a8b0c2; }
:root .ri-evt-search:focus { border-color: rgb(var(--accent-rgb) / 0.6); background: #fff; box-shadow: 0 0 0 3px rgb(var(--accent-rgb) / 0.10); }
:root .ri-evt-card {
  background: #fff;
  border: 1px solid #e8eaf0;
  border-left: 3px solid var(--accent);
  box-shadow: 0 1px 2px rgba(16,24,40,0.03);
}
:root .ri-evt-card:hover {
  background: #fffdf8;
  border-color: rgb(var(--accent-rgb) / 0.45);
  border-left-color: var(--accent);
  box-shadow: 0 4px 16px -6px rgb(var(--accent-rgb) / 0.30);
}
:root .ri-evt-name { color: #0f1729; }
:root .ri-evt-date {
  color: #8a6d1f; background: rgb(var(--accent-rgb) / 0.12);
  border: 1px solid rgb(var(--accent-rgb) / 0.20);
}
:root .ri-evt-stats { background: #f7f8fb; border: 1px solid #eef0f5; }
:root .ri-evt-stat { border-right-color: #e8eaf0; }
:root .ri-evt-bar-wrap { background: #eef0f5; }
:root .ri-evt-bar { background: linear-gradient(90deg, var(--accent), #16a34a); }
:root .ri-evt-foot-label { color: #8a94a8; }
:root .ri-expiry-section { border-top-color: rgba(217,119,6,0.25); }
:root .ri-expiry-title { color: #b45309; }
:root .ri-expiry-row { color: #374151; }
:root .ri-expiry-badge  { font-weight: 700; }
:root .ri-expiry-yellow { background: rgba(234,179,8,.15); color: #92400e; }
:root .ri-expiry-red    { background: rgba(239,68,68,.15); color: #991b1b; }

[data-theme="dark"] .ri-card {
  background: linear-gradient(145deg, #191c22 0%, #232834 45%, #191c22 100%);
  border-color: rgb(var(--accent-rgb) / 0.25);
}
[data-theme="dark"] .ri-header { border-bottom-color: rgba(255,255,255,0.08); }
[data-theme="dark"] .ri-donut-track { stroke: rgba(255,255,255,0.07); }
[data-theme="dark"] .ri-seg--unpaid { stroke: #3d4454; }
[data-theme="dark"] .ri-evt-date { color: rgb(var(--accent-rgb) / 0.9); }
[data-theme="dark"] .ri-glow { background: radial-gradient(ellipse, rgb(var(--accent-rgb) / 0.18) 0%, transparent 70%); }
[data-theme="dark"] .ri-title { color: rgba(255,255,255,0.55); letter-spacing: .12em; }
[data-theme="dark"] .ri-year { color: rgba(255,255,255,0.55); background: rgba(255,255,255,0.08); }
[data-theme="dark"] .ri-donut-num { color: rgba(255,255,255,0.85); font-weight: 800; }
[data-theme="dark"] .ri-donut-label { color: rgba(255,255,255,0.45); }
[data-theme="dark"] .ri-metric { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06); }
[data-theme="dark"] .ri-metric-label { color: rgba(255,255,255,0.55); font-weight: 400; }
[data-theme="dark"] .ri-metric-val { color: rgba(255,255,255,0.85); font-weight: 800; }
[data-theme="dark"] .ri-green { color: #4ade80 !important; }
[data-theme="dark"] .ri-blue  { color: var(--accent) !important; }
[data-theme="dark"] .ri-winbar-wrap { background: rgba(255,255,255,0.08); }
[data-theme="dark"] .ri-winbar-fill { background: linear-gradient(90deg, #22c55e, #4ade80); }
[data-theme="dark"] .ri-stages { border-top-color: rgba(255,255,255,0.06); }
[data-theme="dark"] .ri-stage-name { color: rgba(255,255,255,0.55); }
[data-theme="dark"] .ri-stage-bar-wrap { background: rgba(255,255,255,0.08); }
[data-theme="dark"] .ri-stage-amt { color: rgba(255,255,255,0.5); }
[data-theme="dark"] .ri-stage-count { color: rgba(255,255,255,0.85); }
[data-theme="dark"] .ri-evt-section { border-top-color: rgba(255,255,255,0.06); }
[data-theme="dark"] .ri-evt-section-title { color: rgba(255,255,255,0.55); font-weight: 400; }
[data-theme="dark"] .ri-evt-search { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.08); color: rgba(255,255,255,0.85); }
[data-theme="dark"] .ri-evt-search::placeholder { color: rgba(255,255,255,0.4); }
[data-theme="dark"] .ri-evt-card { background: rgb(var(--accent-rgb) / 0.08); border-color: rgb(var(--accent-rgb) / 0.3); border-left-color: rgb(var(--accent-rgb) / 0.75); }
[data-theme="dark"] .ri-evt-card:hover { background: rgb(var(--accent-rgb) / 0.14); border-color: rgb(var(--accent-rgb) / 0.55); border-left-color: var(--accent); }
[data-theme="dark"] .ri-evt-name { color: #fff; }
[data-theme="dark"] .ri-evt-stats { background: rgba(0,0,0,0.25); }
[data-theme="dark"] .ri-evt-stat { border-right-color: rgba(255,255,255,0.07); }
[data-theme="dark"] .ri-expiry-section { border-top-color: rgba(217,119,6,0.3); }
[data-theme="dark"] .ri-expiry-title { color: #fbbf24; }
[data-theme="dark"] .ri-expiry-row { color: rgba(255,255,255,0.65); }
[data-theme="dark"] .ri-expiry-yellow { background: rgba(234,179,8,.2); color: #fde68a; }
[data-theme="dark"] .ri-expiry-red    { background: rgba(239,68,68,.2); color: #fca5a5; }
#contractExpiryPanel .ri-evt-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 10px;
  max-height: 520px;
  overflow-y: auto;
  padding-right: 2px;
}
.ri-evt-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 340px;
  overflow-y: auto;
  padding-right: 2px;
}
.ri-evt-list::-webkit-scrollbar { width: 3px; }
.ri-evt-list::-webkit-scrollbar-track { background: transparent; }
.ri-evt-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 2px; }
.ri-evt-card {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgb(var(--accent-rgb) / 0.30);
  border-left: 3px solid rgb(var(--accent-rgb) / 0.7);
  border-radius: 10px;
  padding: 11px 14px 10px;
  cursor: pointer;
  transition: background .15s, border-color .15s, box-shadow .15s;
}
.ri-evt-card:hover {
  background: rgb(var(--accent-rgb) / 0.10);
  border-color: rgb(var(--accent-rgb) / 0.6);
  border-left-color: var(--accent);
  box-shadow: 0 2px 12px rgb(var(--accent-rgb) / 0.18);
}
.ri-evt-hd {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 10px;
  gap: 8px;
}
.ri-evt-name {
  font-size: 0.82rem;
  font-weight: 800;
  color: #fff;
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: .01em;
}
.ri-evt-date {
  font-size: 0.65rem;
  font-weight: 600;
  color: rgb(var(--accent-rgb) / 0.9);
  background: rgb(var(--accent-rgb) / 0.15);
  border-radius: 5px;
  padding: 2px 6px;
  white-space: nowrap;
  flex-shrink: 0;
}
.ri-evt-stats {
  display: flex;
  gap: 0;
  margin-bottom: 9px;
  background: rgba(0,0,0,0.18);
  border-radius: 7px;
  overflow: hidden;
}
.ri-evt-stat {
  flex: 1;
  font-size: 0.72rem;
  line-height: 1.35;
  padding: 7px 8px;
  border-right: 1px solid rgba(255,255,255,0.06);
  text-align: center;
}
.ri-evt-stat:last-child { border-right: none; }
.ri-evt-stat .ri-evt-stat-label { font-size: 0.6rem; opacity: 0.55; text-transform: uppercase; letter-spacing: .05em; display: block; margin-bottom: 3px; }
.ri-evt-stat strong { font-size: 0.82rem; display: block; }
.ri-evt-bar-wrap {
  height: 4px;
  background: rgba(255,255,255,0.10);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 8px;
}
.ri-evt-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), #22c55e);
  border-radius: 3px;
  width: 0%;
}
.ri-evt-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ri-evt-dots { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; flex: 1; }
.ri-evt-counts { font-size: 0.7rem; font-weight: 700; white-space: nowrap; }

/* ── Deal table inline editing ─────────────────────────────────────────────── */

.deal-inline-input {
  border: 1.5px solid var(--primary);
  border-radius: 5px;
  padding: 3px 6px;
  font-size: 0.82rem;
  font-family: inherit;
  background: var(--bg);
  color: var(--text);
  width: 100%;
  min-width: 60px;
  box-shadow: 0 0 0 3px rgb(var(--accent-rgb) / .15);
  outline: none;
}
.deal-inline-select {
  border: 1.5px solid var(--primary);
  border-radius: 5px;
  padding: 3px 4px;
  font-size: 0.8rem;
  font-family: inherit;
  background: var(--bg);
  color: var(--text);
  box-shadow: 0 0 0 3px rgb(var(--accent-rgb) / .15);
  outline: none;
}

/* ── Row colour highlights — solid fills ───────────────────────────────────── */




/* ── Colour picker popup ────────────────────────────────────────────────────── */
.deal-color-picker {
  z-index: 9999;
  background: var(--bg-2);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  padding: 8px 10px;
  display: flex;
  gap: 8px;
  box-shadow: 0 8px 32px rgba(0,0,0,.18);
  animation: dcp-in .12s ease;
}
@keyframes dcp-in { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:none; } }
.dcp-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  border-radius: 8px;
  padding: 6px 10px;
  cursor: pointer;
  border: 2px solid transparent;
  transition: transform .1s, box-shadow .1s;
  min-width: 52px;
}
.dcp-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,.2); }
.dcp-btn span:first-child { font-size: 1.2rem; }
.dcp-label { font-size: 0.65rem; font-weight: 700; color: #fff; letter-spacing: .04em; white-space: nowrap; }
.dcp-btn:first-child .dcp-label { color: var(--muted); }

/* Deal notes cell */
/* Month cell display */

/* Deal period: month + year as one segmented control */
.deal-period { display: flex; align-items: stretch; }
.deal-period select { min-width: 0; font-size: 0.82rem; }
.deal-period select:first-child { flex: 1 1 58%; border-radius: 9px 0 0 9px; border-right-width: 0; }
.deal-period select:last-child  { flex: 1 1 42%; border-radius: 0 9px 9px 0; font-family: var(--font-mono); }
.deal-period select:first-child:focus { border-right-width: 1.5px; margin-right: -1.5px; position: relative; z-index: 1; }
.deal-period-hint { font: 500 10px/1.4 var(--font-mono); color: var(--muted); margin-top: 5px; min-height: 14px; }
.deal-period-hint b { color: var(--primary); font-weight: 700; }

/* Inline period editor in the deals table: stacked like the display, so both
   pickers fit inside the narrow, overflow-hidden Month cell */
.deal-inline-period { display: inline-flex; flex-direction: column; gap: 3px; max-width: 100%; }
.deal-inline-period select { font-family: var(--font-mono); width: 68px; padding: 3px 2px; }
/* Deal title display */
.deal-title-disp {
  font-size: 0.82rem;
  color: var(--muted);
}
/* Partial-pay orange only applies to that td, not the whole row */
.deal-cell-orange,
.deal-row-paid td.deal-cell-orange,
.deal-row-flagged td.deal-cell-orange,
[data-theme="dark"] .deal-row-paid td.deal-cell-orange,
[data-theme="dark"] .deal-row-flagged td.deal-cell-orange { background: rgba(234,88,12,0.55) !important; }



/* ── Cancelled deals section ── */
#cancelledTable thead th { background: rgba(239,68,68,0.06); }
#cancelledTable tbody tr { opacity: 0.75; }
#cancelledTable tbody tr:hover { opacity: 1; }
.cancelled-reason-cell { color: var(--muted); font-style: italic; font-size: 0.82rem; }

/* ── Event Kit ── */
.ek-material-row { display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--border);flex-wrap:wrap; }
.ek-material-row:last-child { border-bottom:none; }
.ek-type-label { font:600 13px/1 var(--font-sans);color:var(--text);width:130px;flex-shrink:0; }
.ek-url-input { font-size:0.82rem;padding:6px 10px;border:1px solid var(--border);border-radius:6px;background:var(--bg-2);color:var(--text); }
.ek-or { font-size:0.75rem;color:var(--muted);flex-shrink:0; }
.ek-file-area { display:flex;align-items:center;gap:6px;flex-wrap:wrap; }
.ek-file-name { font:500 11px/1 var(--font-mono);color:var(--muted);max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.ek-tag { display:inline-flex;align-items:center;background:rgb(var(--accent-rgb) / .12);color:var(--primary);border-radius:20px;padding:4px 10px;font:500 12px/1 var(--font-sans); }
.ek-badge { display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:20px;font:600 11px/1 var(--font-sans); }
.ek-badge--agenda { background:rgba(16,185,129,.1);color:#059669; }
.ek-badge--mat    { background:rgb(var(--accent-rgb) / .1);color:var(--accent); }
.ek-badge--access { background:rgba(245,158,11,.1);color:#b45309; }
.ek-emp-mat-row { display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--border);flex-wrap:wrap; }
.ek-emp-mat-row:last-child { border-bottom:none; }
.ek-emp-mat-label { font:600 13px/1 var(--font-sans);color:var(--text);width:130px;flex-shrink:0; }
.ek-event-picker { position:relative;min-width:260px; }
.ek-event-dropdown { position:absolute;top:calc(100% + 4px);left:0;right:0;background:var(--surface);border:1px solid var(--border);border-radius:10px;max-height:210px;overflow-y:auto;z-index:300;box-shadow:0 6px 20px rgba(0,0,0,.28); }
.ek-event-dd-item { padding:9px 14px;cursor:pointer;font-size:0.875rem;color:var(--text); }
.ek-event-dd-item:hover { background:var(--bg-2); }

/* ══════════════════════════════════════════
   MOBILE / PWA IMPROVEMENTS
══════════════════════════════════════════ */

/* Safe area insets for notch/home-bar phones */
@supports (padding: env(safe-area-inset-bottom)) {
  .bottom-nav { padding-bottom: env(safe-area-inset-bottom); height: calc(58px + env(safe-area-inset-bottom)); }
  .main { padding-bottom: calc(62px + env(safe-area-inset-bottom)); }
  .modal { padding-bottom: max(24px, env(safe-area-inset-bottom)); }
}

@media (max-width: 768px) {
  /* Login page */
  .login-wrap { padding: 16px; align-items: flex-start; padding-top: 40px; min-height: 100dvh; }
  .login-card { max-width: 100%; width: 100%; border-radius: 16px; padding: 28px 22px; }

  /* Topbar */
  .topbar { padding: 0 12px 0 14px; }
  #notifBtn { padding: 6px 8px; }

  /* Tables — allow horizontal scroll without breaking layout */
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
  .table-wrap table { min-width: 560px; }
  #hotelTable { min-width: 820px; }
  #hotelTable th, #hotelTable td { font-size: 0.74rem; padding: 7px 6px; }

  /* Salary table */
  .sal-summary-tbl { font-size: 0.78rem; }
  .sal-summary-tbl th, .sal-summary-tbl td { padding: 9px 10px; }

  /* Cards with grids */
  .dash-mini-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .deal-stat-cards { grid-template-columns: repeat(2, 1fr) !important; }
  .hotel-fin-strip { gap: 8px; }
  .hotel-fin-card { min-width: 140px; }

  /* Modals slide up from bottom */
  .modal-overlay { align-items: flex-end; padding: 0; }
  .modal {
    width: 100%; max-width: 100%; border-radius: 20px 20px 0 0;
    max-height: 92dvh; overflow-y: auto;
  }

  /* Salary cards */
  .sc-prog-bar-wrap { margin: 0 0 12px; }
  .sc-fig-grid { grid-template-columns: 1fr 1fr !important; }

  /* Event kit material rows */
  .ek-material-row { flex-wrap: wrap; gap: 8px; }
  .ek-url-input { min-width: 0 !important; width: 100% !important; }

  /* Subscriptions / deals filter bars */
  .deal-q-filters { flex-wrap: wrap; gap: 6px; }
  .deal-q-btn { font-size: 0.72rem; padding: 6px 10px; }

  /* Deal filter card — stack vertically, all inputs full width */
  .deal-filter-card { flex-direction: column; align-items: stretch; gap: 8px; padding: 12px; }
  .deal-filter-card .deal-q-filters { flex-direction: row; flex-wrap: wrap; }
  .deal-search-input { min-width: 0 !important; width: 100% !important; box-sizing: border-box; }
  .deal-select { width: 100% !important; max-width: 100% !important; box-sizing: border-box; }
  .deal-filter-card .btn { width: 100%; }
  .deal-filter-card .deal-add-btn { margin-left: 0; }
  .deal-range-wrap { flex-wrap: wrap; gap: 6px; }
  .deal-range-input { flex: 1; min-width: 0; width: auto !important; }

  /* Deal stat cards — 2-col but shrink values to fit */
  .deal-stat-cards { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .deal-stat-card { padding: 14px 12px; }
  .deal-stat-value { font-size: 16px; white-space: normal; word-break: break-all; }
  .deal-stat-label { max-width: none; font-size: 8.5px; }

  /* Event kit searchable picker */
  .ek-event-picker { min-width: 0 !important; width: 100%; }

  /* Notes hotel panel */
  .hotel-notes-panel { padding: 10px 12px 14px; }

  /* Page headers */
  .page-head { flex-direction: column; align-items: flex-start; gap: 10px; }
  .page-head > div { width: 100%; }

  /* Buttons in filter areas go full-width on very small screens */
  .filter-bar .btn { width: 100%; justify-content: center; }

  /* Employee portal cards */
  .sc-card { margin-bottom: 12px; }
  .sc-payment-toggle { flex-wrap: wrap; gap: 6px; }

  /* Port search input */
  .port-search { width: 100% !important; box-sizing: border-box; }

  /* Portfolio summary bar wraps */
  .port-summary-bar { flex-wrap: wrap; }
  .psb-item { min-width: 50%; box-sizing: border-box; }

  /* Ensure all cards don't overflow */
  .card, .deal-filter-card, .pec-card, .ri-card { max-width: 100%; box-sizing: border-box; overflow: hidden; }

  /* iOS zooms the page when focusing inputs smaller than 16px — force 16px */
  .form-group input,
  .form-group select,
  .form-group textarea,
  input[type="search"],
  input[type="text"],
  input[type="number"],
  input[type="email"],
  input[type="password"],
  input[type="date"],
  select, textarea {
    font-size: 16px !important;
  }

  /* Comfortable touch targets (Apple/Google guidance ≈ 44px) */
  .btn { min-height: 40px; }
  .btn-sm { min-height: 36px; }
  td .btn-ghost.btn-sm { min-height: 34px; padding: 7px 12px; }
  .nav-item { min-height: 44px; }
  select, .form-group input, .form-group select { min-height: 42px; }

  /* New dashboard stat strip — 2-up on tablet/phone */
  .dash-stat-strip { grid-template-columns: 1fr 1fr; gap: 10px; }
  .dss-card { padding: 16px 16px 14px; }
  .dss-value { font-size: 30px; }

  /* Roomier card padding rhythm */
  .card-header { padding: 13px 15px; }
  .es-tabs, .salary-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; }
  .es-tab, .salary-tab { flex-shrink: 0; }
}

@media (max-width: 420px) {
  .stats-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .content { padding: 10px 10px 80px; overflow-x: hidden; }
  .login-card { padding: 22px 16px; }
  .modal { padding: 20px 16px; }
  .btn { padding: 10px 14px; }
  .btn-sm { padding: 7px 11px; font-size: 0.78rem; }
  .dash-mini-grid { grid-template-columns: 1fr 1fr !important; }
  .page-head h1 { font-size: 20px; }
  /* Stat strip: 1 per row on small phones so numbers stay legible */
  .dash-stat-strip { grid-template-columns: 1fr; }
  .dss-value { font-size: 32px; }
  .dss-card { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; }
  .dss-card .dss-label { width: 100%; }
  .dss-sub { margin-top: 0; }
  /* Deal stat cards: 1-col on very small phones */
  .deal-stat-cards { grid-template-columns: 1fr 1fr; }
  .deal-stat-value { font-size: 15px; }
}

/* PWA standalone mode — hide browser chrome compensations */
@media (display-mode: standalone) {
  .topbar { padding-top: env(safe-area-inset-top, 0px); height: calc(56px + env(safe-area-inset-top, 0px)); }
}

/* ══════════════════════════════════════════
   GLOBAL POLISH LAYER
   App-wide refinements: motion, scrollbars,
   focus accessibility & sharper headings
══════════════════════════════════════════ */

/* Sharper, tighter page headings */
.page-head h1 { letter-spacing: -0.6px; }
.page-head .sub { letter-spacing: 0.2px; line-height: 1.4; }
.card-title { letter-spacing: -0.2px; }

/* Consistent, accessible keyboard focus across interactive elements */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
.salary-tab:focus-visible,
.es-tab:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-soft);
  border-radius: var(--radius-sm);
}

/* Refined, unobtrusive scrollbars everywhere */
* { scrollbar-width: thin; scrollbar-color: var(--border-bright) transparent; }
.table-wrap::-webkit-scrollbar,
.modal::-webkit-scrollbar { width: 8px; height: 8px; }
.table-wrap::-webkit-scrollbar-track,
.modal::-webkit-scrollbar-track { background: transparent; }
.table-wrap::-webkit-scrollbar-thumb,
.modal::-webkit-scrollbar-thumb {
  background: var(--border-bright);
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
.table-wrap::-webkit-scrollbar-thumb:hover,
.modal::-webkit-scrollbar-thumb:hover { background: var(--muted); background-clip: padding-box; }

/* Smoother table row interaction */
tbody tr { transition: background .14s var(--ease); }

/* Honor reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ══════════════════════════════════════════
   WASTEMAN — AI assistant
══════════════════════════════════════════ */
.wm-launcher {
  position: fixed;
  right: 22px; bottom: 22px;
  width: 56px; height: 56px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, var(--accent), var(--primary-dark));
  color: #fff;
  display: grid; place-items: center;
  cursor: pointer;
  box-shadow: var(--shadow-lg);
  z-index: 900;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), opacity .18s var(--ease);
}
.wm-launcher:hover { transform: translateY(-2px) scale(1.05); }
.wm-launcher:active { transform: scale(0.96); }
.wm-launcher.wm-hidden { opacity: 0; pointer-events: none; transform: scale(0.6); }

.wm-panel {
  position: fixed;
  right: 22px; bottom: 22px;
  width: 380px; max-width: calc(100vw - 28px);
  height: 560px; max-height: calc(100dvh - 100px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column;
  overflow: hidden;
  z-index: 950;
  opacity: 0; pointer-events: none;
  transform: translateY(16px) scale(0.98);
  transform-origin: bottom right;
  transition: opacity .2s var(--ease), transform .2s var(--ease);
}
.wm-panel.wm-open { opacity: 1; pointer-events: auto; transform: translateY(0) scale(1); }

.wm-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 14px;
  background: linear-gradient(135deg, var(--accent), var(--primary-dark));
  color: #fff;
  flex-shrink: 0;
}
.wm-head-id { display: flex; align-items: center; gap: 10px; }
.wm-dot { width: 9px; height: 9px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 0 3px rgba(74,222,128,0.3); flex-shrink: 0; }
.wm-title { font: 700 14px/1.1 var(--font-sans); letter-spacing: -0.2px; }
.wm-sub { font: 500 10.5px/1.2 var(--font-sans); opacity: 0.82; margin-top: 2px; }
.wm-head-actions { display: flex; gap: 2px; }
.wm-icon-btn {
  width: 30px; height: 30px; border: none; background: rgba(255,255,255,0.14);
  color: #fff; border-radius: 8px; cursor: pointer; font-size: 13px;
  display: grid; place-items: center; transition: background .15s;
}
.wm-icon-btn:hover { background: rgba(255,255,255,0.28); }
.wm-icon-btn.wm-on { background: rgba(255,255,255,0.32); }

.wm-body { flex: 1; overflow-y: auto; padding: 16px 14px; display: flex; flex-direction: column; gap: 10px; }

.wm-empty { text-align: center; color: var(--muted); margin: auto 0; padding: 8px; }
.wm-empty-icon { font-size: 30px; margin-bottom: 8px; }
.wm-empty p { font-size: 0.85rem; margin-bottom: 12px; }
.wm-chip {
  display: block; width: 100%; text-align: left;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 10px; padding: 9px 12px; margin-bottom: 8px;
  font: 500 12px/1.35 var(--font-sans); color: var(--text-2); cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
}
.wm-chip:hover { border-color: var(--accent-line); color: var(--text); background: var(--accent-soft); }

.wm-msg {
  max-width: 86%; padding: 9px 12px; border-radius: 13px;
  font: 400 13px/1.45 var(--font-sans); white-space: pre-wrap; word-wrap: break-word;
}
.wm-msg--user { align-self: flex-end; background: var(--accent); color: #fff; border-bottom-right-radius: 4px; }
.wm-msg--bot { align-self: flex-start; background: var(--surface-2); color: var(--text); border: 1px solid var(--border); border-bottom-left-radius: 4px; }
.wm-thinking { color: var(--muted); letter-spacing: 2px; animation: wmPulse 1.1s ease-in-out infinite; }
@keyframes wmPulse { 0%,100% { opacity: 0.4; } 50% { opacity: 1; } }

.wm-input-row {
  display: flex; align-items: center; gap: 7px;
  padding: 10px 12px; border-top: 1px solid var(--border); flex-shrink: 0;
  background: var(--surface);
}
.wm-input-row input {
  flex: 1; border: 1.5px solid var(--border); border-radius: 10px;
  padding: 9px 12px; font: 400 13px/1.3 var(--font-sans); outline: none;
  background: var(--surface); color: var(--text);
  transition: border-color .15s, box-shadow .15s;
}
.wm-input-row input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.wm-mic, .wm-send {
  width: 38px; height: 38px; flex-shrink: 0; border-radius: 10px; cursor: pointer;
  display: grid; place-items: center; border: 1.5px solid var(--border);
  background: var(--surface); color: var(--text-2); font-size: 16px;
  transition: background .15s, border-color .15s, color .15s, transform .1s;
}
.wm-mic:hover, .wm-send:hover { border-color: var(--accent-line); color: var(--accent); }
.wm-send { background: var(--accent); color: #fff; border-color: var(--accent); }
.wm-send:hover { background: var(--primary-dark); color: #fff; border-color: var(--primary-dark); }
.wm-send:disabled { opacity: 0.5; cursor: default; }
.wm-mic--live { background: var(--negative); color: #fff; border-color: var(--negative); animation: wmPulse 1s ease-in-out infinite; }

[data-theme="dark"] .wm-msg--bot { background: var(--surface-2); }
[data-theme="dark"] .wm-chip { background: var(--surface-2); }

@media (max-width: 560px) {
  .wm-panel { right: 8px; left: 8px; bottom: 8px; width: auto; height: calc(100dvh - 80px); }
  .wm-launcher { right: 16px; bottom: 78px; }
}

/* ═══ Salary overview band ═══════════════════════════════════════════════
   Sits above the detail table and answers one question: how much is still to
   pay, per group. Each tile carries a meter whose fill is what has been paid
   and whose notch is where the calendar says you should be -- so "behind" is
   something the reader sees rather than something a colour asserts. No
   categorical palette here on purpose: every tile is named, so identity never
   depends on hue, and the only colour with meaning is the reserved amber on
   the "to pay" chip, which always ships with its count. */
.sal-ov {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 18px 20px 16px;
}

.sal-ov-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 14px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--line);
}

.sal-ov-eyebrow {
  font: 600 10px/1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.9px;
  color: var(--dim);
}

.sal-ov-title {
  font-size: 1.05rem;
  font-weight: 650;
  color: var(--text);
  margin: 6px 0 0;
  letter-spacing: -0.01em;
}

.sal-ov-note {
  font: 500 11.5px/1.4 var(--font-mono);
  color: var(--muted);
  margin: 4px 0 0;
}

/* The one hero figure on this page. */
.sal-ov-total { text-align: right; }
.sal-ov-total-label {
  font: 600 10px/1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--dim);
}
.sal-ov-total-value {
  font: 700 36px/1 var(--font-mono);   /* same step as .dss-value on the dashboard */
  letter-spacing: -1.5px;
  color: var(--text);
  margin-top: 6px;
}
.sal-ov-total-note {
  font: 500 11px/1.3 var(--font-mono);
  color: var(--muted);
  margin-top: 6px;
}

.sal-ov-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
  gap: 12px;
}

.sal-ov-tile {
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) - 3px);
  padding: 14px 14px 12px;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sal-ov-tile--empty { opacity: 0.66; }

.sal-ov-t-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.sal-ov-t-name {
  font-size: 0.82rem;
  font-weight: 650;
  color: var(--text);
}
.sal-ov-t-count {
  font: 500 10.5px/1 var(--font-mono);
  color: var(--dim);
  white-space: nowrap;
}

/* Plain ink, not a warning colour: owing salary in September is the normal
   state of the world, not an error. */
.sal-ov-t-owed {
  font: 700 25px/1 var(--font-mono);
  letter-spacing: -1px;
  color: var(--text);
  margin-top: 2px;
}
.sal-ov-t-owed--done { color: var(--positive); font-size: 19px; letter-spacing: -0.5px; }
.sal-ov-t-owed--none { font-size: 13px; font-weight: 500; color: var(--dim); letter-spacing: 0; }

.sal-ov-t-alt {
  font: 500 11px/1.3 var(--font-mono);
  color: var(--muted);
}

/* Meter: fill is paid, notch is expected. Track is a lighter step of the
   fill's own hue so the state reads across the whole bar. */
.sal-ov-meter {
  position: relative;
  height: 7px;
  border-radius: 4px;
  background: var(--accent-soft);
  margin-top: 6px;
  overflow: hidden;
}
.sal-ov-meter-fill {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: 4px 2px 2px 4px;
  background: var(--accent);
}
.sal-ov-meter-mark {
  position: absolute;
  top: -2px;
  bottom: -2px;
  width: 2px;
  margin-left: -1px;
  border-radius: 1px;
  background: var(--text);
  opacity: 0.55;
}

.sal-ov-t-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 2px;
}
.sal-ov-t-pace {
  font: 600 10.5px/1.3 var(--font-mono);
  color: var(--muted);
}
.sal-ov-t-exp { font-weight: 500; color: var(--dim); }

.sal-ov-chip {
  font: 600 10px/1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  padding: 4px 7px;
  border-radius: 5px;
  background: var(--warning-soft);
  color: var(--warning);
  white-space: nowrap;
}

.sal-ov-t-over {
  font: 500 10.5px/1.3 var(--font-mono);
  color: var(--dim);
}

.sal-ov-fx {
  font: 500 10.5px/1.5 var(--font-mono);
  color: var(--dim);
  margin: 14px 0 0;
}

@media (max-width: 640px) {
  .sal-ov { padding: 16px 14px 14px; }
  .sal-ov-head { align-items: flex-start; }
  .sal-ov-total { text-align: left; }
  .sal-ov-total-value { font-size: 28px; }
}

/* ── Deal picker: grouped by producer team ──────────────────────────────── */
.deal-event-group + .deal-event-group { border-top: 1px solid var(--line); margin-top: 2px; padding-top: 2px; }
.deal-event-group-hd {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px 12px 4px;
  font: 600 10px/1 var(--font-mono);
  letter-spacing: 0.8px; text-transform: uppercase;
  color: var(--dim);
  position: sticky; top: 0;
  background: var(--surface);
  z-index: 1;
}
.deal-event-group-n {
  font: 600 10px/1 var(--font-mono);
  color: var(--muted);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 2px 6px;
}
/* The date sits after the name and yields to it. A TBC date is dimmer, so
   a confirmed day reads as confirmed and a placeholder does not. */
.deal-event-check-item { justify-content: flex-start; }
.deal-event-check-item span:first-of-type { flex: 1; min-width: 0; }
.deal-event-check-item .deal-event-when {
  flex: 0 0 auto;
  font: 500 11px/1 var(--font-mono);
  color: var(--muted);
  white-space: nowrap;
}
.deal-event-check-item .deal-event-when--tbc { color: var(--dim); font-style: italic; }
.deal-event-check-item .deal-event-team {
  flex: 0 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: 600 9.5px/1 var(--font-mono); letter-spacing: .5px; text-transform: uppercase;
  color: var(--muted);
  background: var(--bg); border: 1px solid var(--border); border-radius: 10px;
  padding: 3px 6px; max-width: 110px;
}

/* Deal notes pop-out: a roomy editor for long notes */
.modal.deal-notes-modal {
  width: 820px; max-width: 100%;
  display: flex; flex-direction: column; gap: 14px;
  padding: 0 0 18px;
}
.form-group .deal-notes-popup-text {
  min-height: 55vh;
  font: 400 14px/1.6 var(--font-sans);
  padding: 14px 16px;
}
.pf-prog-unlink {
  margin-left: 8px; padding: 2px 7px;
  font: 600 10px/1 var(--font-mono); letter-spacing: .3px; text-transform: uppercase;
  color: var(--muted); background: transparent; border: 1px solid var(--border); border-radius: 5px; cursor: pointer;
}
.pf-prog-unlink:hover { color: var(--negative); border-color: var(--negative); }
.pf-prog-select--undecided { border-color: var(--warning); }
/* An older row that looks like an already-linked event: offered under the link. */
.pf-prog-dup { display: flex; align-items: center; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.pf-prog-dup-lbl { font: 400 11px/1.4 var(--font-sans); color: var(--muted); }
.pf-prog-dup-lbl b { font-weight: 500; color: var(--text); }
.pf-meta-dup { color: var(--warning); }
/* The programme panel folded to a line, shown only while a row needs a decision. */
.pf-prog-notice {
  display: flex; align-items: center; gap: 10px; margin-bottom: 14px; padding: 9px 14px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
  font: 400 12.5px/1.4 var(--font-sans); color: var(--muted);
}
.pf-prog-notice b { font-weight: 600; color: var(--text); }
.pf-prog-notice > span:nth-child(2) { flex: 1; min-width: 0; }
.pf-prog-notice .pf-prog-dot { margin-right: 0; }
.pf-meta-dup svg { width: 11px; height: 11px; }

/* ── Deal: month signed vs programme year ───────────────────────────────── */
.deal-period-grid { display: flex; gap: 22px; flex-wrap: wrap; align-items: flex-start; }
.deal-prog-warn { color: var(--warning); font-weight: 600; }
/* Month cell: "Sep 2026" plus "for 2027" when the programme year differs. */
.deal-month-for {
  display: inline-block; margin-left: 6px; padding: 2px 6px;
  font: 600 10px/1 var(--font-mono); letter-spacing: .3px;
  color: var(--accent); background: var(--accent-soft); border-radius: 4px; white-space: nowrap;
}
.deal-refile-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  margin-bottom: 12px; padding: 10px 14px;
  background: var(--warning-soft); border: 1px solid var(--warning); border-radius: 8px;
}
.deal-refile-banner.hidden { display: none; }
.deal-refile-text { font: 500 12.5px/1.5 var(--font-sans); color: var(--text); }


/* ═══════════════════════════════════════════════════════════════════════════
   Deal ledger
   One quiet table, in the register of an accounts ledger: hairlines rather
   than fills, tabular figures, a row tint that says only "paid" or "flagged",
   and every control (checkbox, row actions) kept off the page until the row
   is under the pointer. Colour is spent on three things: money received
   (green), money still owed (amber), and the flag.
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  --ledger-line:     rgba(26,31,46,.08);
  --ledger-hover:    rgba(26,31,46,.035);
  --ledger-paid:     rgba(16,150,110,.08);
  --ledger-paid-fg:  #158a63;
  --ledger-flag:     rgba(234,160,30,.14);
  --ledger-partial:  rgba(234,160,30,.26);
  --ledger-edit:     rgb(var(--accent-rgb) / .12);
}
[data-theme="dark"] {
  --ledger-line:     rgba(255,255,255,.06);
  --ledger-hover:    rgba(255,255,255,.03);
  --ledger-paid:     rgba(95,211,150,.10);
  --ledger-paid-fg:  #5fd396;
  --ledger-flag:     rgba(234,170,60,.11);
  --ledger-partial:  rgba(234,170,60,.24);
  --ledger-edit:     rgb(var(--accent-rgb) / .16);
}

/* Last-invoice line: a sentence, not a panel. */
.deal-inv-banner {
  display: none; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 2px 2px 10px; font: 400 12.5px/1.4 var(--font-sans); color: var(--muted);
}
.deal-inv-label { color: var(--muted); }
.deal-inv-link  { font-weight: 600; color: var(--text); text-decoration: none; }
.deal-inv-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.deal-inv-arrow { color: var(--dim); }
.deal-inv-next  { font-weight: 600; font-family: var(--font-mono); font-size: 12px; color: var(--text); }
.deal-inv-copy  { margin-left: 2px; padding: 2px 10px !important; font-size: 11px !important; }

/* Toolbar: two rows of controls with no box around them. */
.deal-filter-card {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  background: transparent; border: none; padding: 0; margin-bottom: 10px;
}
.deal-filter-actions { margin-bottom: 14px; }
.deal-add-btn { margin-left: auto; }
.deal-q-sep { width: 1px; height: 20px; background: var(--border); margin: 0 6px; }
.deal-q-filters { display: flex; gap: 4px; flex-wrap: wrap; }
.deal-q-btn {
  padding: 5px 11px; border-radius: 6px; white-space: nowrap; cursor: pointer;
  font: 500 12px/1.2 var(--font-sans); color: var(--muted);
  background: var(--surface); border: 1px solid var(--border);
  transition: color .12s, border-color .12s, background .12s;
}
.deal-q-btn:hover { color: var(--text); border-color: var(--border-bright); }
.deal-q-btn.active { background: var(--text); color: var(--surface); border-color: var(--text); }
.deal-q-add { color: var(--dim) !important; border-style: dashed !important; }
.deal-range-wrap { display: flex; align-items: center; gap: 6px; }
.deal-range-label { font: 600 10px/1 var(--font-mono); color: var(--dim); text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; }
.deal-range-input {
  background: var(--surface); border: 1px solid var(--border); border-radius: 6px;
  color: var(--text); font: 500 11px/1 var(--font-mono); padding: 5px 8px;
  outline: none; cursor: pointer; transition: border-color .15s;
}
.deal-range-input:focus { border-color: var(--text); }
.deal-range-to { font: 600 11px/1 var(--font-mono); color: var(--dim); }
.deal-range-clear {
  background: transparent; border: 1px solid var(--border); border-radius: 6px;
  color: var(--muted); font: 600 10px/1 var(--font-mono); padding: 4px 7px; cursor: pointer;
}
.deal-range-clear:hover { color: var(--negative); border-color: var(--negative); }
.deal-search-input, .deal-select {
  border: 1px solid var(--border); border-radius: 6px; padding: 6px 10px;
  font: 400 12.5px/1.3 var(--font-sans); background: var(--surface); color: var(--text); outline: none;
}
.deal-search-input { min-width: 220px; }
.deal-search-input:focus, .deal-select:focus { border-color: var(--text); }

/* The four figures above the ledger: the number first, what it is beneath. */
.deal-stat-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 14px; }
@media (max-width: 900px) { .deal-stat-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .deal-stat-cards { grid-template-columns: 1fr; } }
.deal-stat-card {
  display: block; background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; padding: 14px 16px 12px;
}
.deal-stat-value {
  font: 600 22px/1.1 var(--font-sans); letter-spacing: -0.01em; color: var(--text);
  font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.deal-stat-label { margin-top: 5px; font: 400 11.5px/1.3 var(--font-sans); color: var(--muted); }
.deal-stat-label small { color: var(--dim); font-size: 10.5px; margin-left: 4px; }
.deal-stat-card.ds--paid .deal-stat-value { color: var(--ledger-paid-fg); }
.deal-stat-card.ds--remaining .deal-stat-value { color: var(--warning); }
.deal-stat-card.ds--remaining.is-clear .deal-stat-value { color: var(--muted); }
.deal-stat-card.ds--vat { cursor: pointer; }
.deal-stat-card.ds--vat:hover { border-color: var(--border-bright); }

/* The ledger itself. */
.deal-table-card { padding: 0; overflow: hidden; border-radius: 10px; }
#dealsTable { table-layout: fixed; width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
#dealsTable .dt-r { text-align: right !important; }
#dealsTable .dt-c { text-align: center !important; }
#dealsTable thead th {
  padding: 9px 10px; vertical-align: middle; text-align: left;
  background: var(--surface); color: var(--muted);
  font: 600 10.5px/1.3 var(--font-sans); letter-spacing: .07em; text-transform: uppercase;
  border-bottom: 1px solid var(--border); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#dealsTable thead th svg { vertical-align: -2px; }
#dealsTable td {
  padding: 8px 10px; height: 42px; vertical-align: middle;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: 400 13px/1.35 var(--font-sans); color: var(--text);
  border-bottom: 1px solid var(--ledger-line);
}
#dealsTable tbody tr:last-child td { border-bottom: none; }
#dealsTable tbody tr:hover td { background: var(--ledger-hover); }
#dealsTable td.deal-cell-edit { cursor: pointer; }
#dealsTable td.deal-num { white-space: nowrap; }

/* Row states: a tint, never a fill. */
.deal-row-paid td     { background: var(--ledger-paid); }
.deal-row-flagged td  { background: var(--ledger-flag); }
.deal-row-issue td    { background: var(--ledger-flag); }
.deal-row-urgent td   { background: var(--negative-soft); }
.deal-row-selected td { background: var(--accent-soft); }
.deal-row-selected td:first-child { box-shadow: inset 2px 0 0 var(--accent); }
.deal-row-highlight td { box-shadow: inset 0 1px 0 var(--accent), inset 0 -1px 0 var(--accent); }
.deal-cell-orange,
.deal-row-paid td.deal-cell-orange,
.deal-row-flagged td.deal-cell-orange { background: rgba(234,88,12,.42) !important; }

/* First cell: the flag, and a checkbox that appears when it could be wanted. */
#dealsTable td.deal-td-mark { padding: 0 2px 0 10px; text-align: left; overflow: visible; }
.deal-select-cb {
  width: 13px; height: 13px; margin: 0 5px 0 0; vertical-align: middle; cursor: pointer;
  accent-color: var(--text); opacity: 0; transition: opacity .1s;
}
#dealsTable tbody tr:hover .deal-select-cb, .deal-row-selected .deal-select-cb,
#dealsTableBody.has-selection .deal-select-cb { opacity: 1; }
.deal-flag {
  background: none; border: none; padding: 2px; cursor: pointer; line-height: 0;
  vertical-align: middle; color: var(--dim); opacity: .55; transition: opacity .1s, color .1s;
}
.deal-flag svg { width: 13px; height: 13px; }
.deal-flag:hover, .deal-flag.is-on { opacity: 1; color: var(--warning); }
.deal-flag.is-on svg { fill: currentColor; }

/* Month signed as "Sep 26"; "for 2027" beneath it only when the programme
   year is a different one. The cell clips rather than ellipsising, so a chip
   that does not fit is cut, never turned into a stray dot. */
#dealsTable td.deal-td-month { color: var(--text-2); font-weight: 500; text-overflow: clip; padding-right: 4px; }
.deal-month-disp { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 3px; white-space: nowrap; line-height: 1.1; }
.deal-month-yr { color: var(--dim); font-weight: 400; }
.deal-month-disp .deal-month-for { margin-left: 0; padding: 1px 5px; font-size: 9.5px; }

.deal-cell-company { cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.deal-co-link { font-weight: 600; font-size: 13px; color: var(--text); }
.deal-cell-company:hover .deal-co-link { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--dim); }

.deal-figure { font-weight: 600; }
.deal-paid-fig { color: var(--ledger-paid-fg); font-weight: 500; }
.deal-paid-part { color: var(--warning); font-weight: 600; }
.deal-muted { color: var(--dim); }
#dealsTable td.deal-td-date, #dealsTable td.deal-td-bank { color: var(--text-2); }
.deal-inv-num { font-size: 12.5px; color: var(--text-2); letter-spacing: .01em; }

/* Files on record, and the signed copy. */
#dealsTable td.deal-td-files { text-align: center; cursor: pointer; }
.deal-files { display: inline-flex; align-items: center; gap: 3px; font: 500 11px/1 var(--font-sans); color: var(--muted); }
.deal-files svg { width: 13px; height: 13px; }
.deal-files.is-none { color: var(--dim); }
.deal-files.is-todo { color: var(--warning); font-weight: 700; }
#dealsTable td.deal-td-signed { text-align: center; cursor: pointer; }
.deal-tick {
  display: inline-flex; width: 16px; height: 16px; border-radius: 50%; align-items: center; justify-content: center;
  background: var(--positive-soft); color: var(--ledger-paid-fg);
}
.deal-tick svg { width: 10px; height: 10px; }
.deal-by { font: 600 11px/1 var(--font-sans); letter-spacing: .05em; color: var(--muted); }
#dealsTable td.deal-td-notes { color: var(--muted); font-size: 12.5px; }
.deal-notes-cell { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Row actions live on hover. */
#dealsTable td.deal-act-cell { text-align: right; padding-right: 8px; white-space: nowrap; overflow: visible; }
.deal-act-invoice, .deal-act-del {
  display: inline-flex; align-items: center; justify-content: center; vertical-align: middle;
  width: 26px; height: 26px; padding: 0; margin-left: 2px; border-radius: 6px; cursor: pointer;
  background: transparent; border: 1px solid transparent; color: var(--muted);
  opacity: 0; transition: opacity .1s, color .12s, border-color .12s, background .12s;
}
#dealsTable tbody tr:hover .deal-act-invoice, #dealsTable tbody tr:hover .deal-act-del,
.deal-act-invoice:focus-visible, .deal-act-del:focus-visible { opacity: 1; }
.deal-act-invoice:hover { color: var(--text); border-color: var(--border); background: var(--surface); }
.deal-act-del:hover { color: var(--negative); border-color: var(--negative-soft); background: var(--negative-soft); }

.deal-totals-row td {
  background: var(--surface-2) !important; border-top: 1px solid var(--border) !important;
  padding: 9px 10px !important; font: 600 12.5px/1.3 var(--font-sans); color: var(--text-2);
}
.deal-totals-row .deal-figure { color: var(--text); }
.deal-hint { margin: 8px 2px 0; font: 400 11.5px/1.5 var(--font-sans); color: var(--dim); }

@media (max-width: 1100px) {
  #dealsTable col:nth-child(8), #dealsTable th:nth-child(8), #dealsTable td:nth-child(8),
  #dealsTable col:nth-child(9), #dealsTable th:nth-child(9), #dealsTable td:nth-child(9) { display: none; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   Dashboard overview
   White (or near-black) cards, one blue, big numbers. Each card has a plain
   title, an optional link to the page with the detail, and one job.
   ═══════════════════════════════════════════════════════════════════════════ */
.db-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
.db-skel { height: 112px; border-radius: 14px; }
.db-kpi {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0;
  padding: 18px 20px; text-align: left; cursor: pointer;
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  box-shadow: var(--shadow-card); font-family: var(--font-sans);
  transition: border-color .15s, box-shadow .15s;
}
.db-kpi:hover { border-color: var(--border-bright); box-shadow: var(--shadow-hover); }
.db-kpi:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.db-kpi-label { font: 500 13px/1.3 var(--font-sans); color: var(--muted); }
.db-kpi-value {
  font: 700 30px/1.1 var(--font-sans); letter-spacing: -0.02em; color: var(--text);
  font-variant-numeric: tabular-nums; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}
.db-kpi-sub { font: 400 12.5px/1.35 var(--font-sans); color: var(--muted); }
.db-kpi-sub.is-alert { color: var(--negative); font-weight: 500; }
.db-kpi-sub.is-good  { color: var(--positive); font-weight: 500; }

.db-grid { display: grid; gap: 16px; margin-bottom: 16px; }
.db-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.db-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.db-span-2 { grid-column: span 2; }

.db-card {
  min-width: 0; padding: 20px 22px; display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-card);
}
.db-card-hd { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.db-card-hd h3 { font: 600 15px/1.3 var(--font-sans); color: var(--text); letter-spacing: -0.005em; }
.db-card-link {
  background: none; border: none; padding: 0; cursor: pointer;
  font: 500 13px/1.3 var(--font-sans); color: var(--accent);
}
.db-card-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.db-card-meta { margin: -8px 0 10px; font: 400 12.5px/1.3 var(--font-sans); color: var(--muted); }
.db-span-2 .db-card-hd { margin-bottom: 0; }
.db-span-2 .db-card-meta { margin: 2px 0 14px; }
.db-empty { padding: 24px 0; font: 400 13px/1.4 var(--font-sans); color: var(--dim); }

/* Bar chart: recessive grid, one blue series, rounded tops, hover tooltip. */
.db-chart { position: relative; height: 240px; padding: 0 0 26px 48px; }
.db-chart-grid { position: absolute; inset: 0 0 26px 48px; display: flex; flex-direction: column; justify-content: space-between; }
.db-chart-line { position: relative; border-top: 1px solid var(--line); height: 0; }
.db-chart-line:last-child { border-top-color: var(--border); }
.db-chart-line span {
  position: absolute; right: calc(100% + 10px); top: -8px;
  font: 400 11.5px/1 var(--font-sans); color: var(--dim); white-space: nowrap; font-variant-numeric: tabular-nums;
}
.db-chart-bars { position: relative; height: 100%; display: flex; align-items: flex-end; gap: 2px; }
.db-bar-col { position: relative; flex: 1; height: 100%; display: flex; align-items: flex-end; justify-content: center; outline: none; cursor: default; }
.db-bar { width: min(64%, 44px); background: var(--accent); border-radius: 4px 4px 0 0; transition: filter .12s; }
.db-bar-col:hover .db-bar, .db-bar-col:focus-visible .db-bar { filter: brightness(1.12); }
.db-bar-x {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0; text-align: center;
  font: 400 12px/1 var(--font-sans); color: var(--muted);
}
.db-bar-tip {
  position: absolute; bottom: calc(100% - 40px); left: 50%; transform: translate(-50%, -100%);
  display: none; flex-direction: column; gap: 2px; padding: 7px 10px; border-radius: 8px; z-index: 3;
  background: #0f172a; color: #fff; white-space: nowrap; pointer-events: none;
  font: 400 11.5px/1.3 var(--font-sans); box-shadow: var(--shadow);
}
[data-theme="dark"] .db-bar-tip { background: #f3f4f6; color: #0f172a; }
.db-bar-tip strong { font: 600 13px/1.2 var(--font-sans); font-variant-numeric: tabular-nums; }
.db-bar-tip span { opacity: .75; }
.db-bar-col:hover .db-bar-tip, .db-bar-col:focus-visible .db-bar-tip { display: flex; }

/* Horizontal bars (collections). */
.db-hbars { display: flex; flex-direction: column; gap: 14px; margin-top: 4px; }
.db-hbar { display: grid; grid-template-columns: 96px 1fr 28px; align-items: center; gap: 12px; }
.db-hbar-label { font: 400 13px/1.2 var(--font-sans); color: var(--text-2); }
.db-hbar-track { height: 22px; }
.db-hbar-fill { display: block; height: 100%; min-width: 3px; background: var(--accent); border-radius: 4px; }
.db-hbar-n { font: 600 13px/1 var(--font-sans); color: var(--text); text-align: right; font-variant-numeric: tabular-nums; }
.db-foot-figures { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: auto; padding-top: 18px; border-top: 1px solid var(--line); }
.db-hbars + .db-foot-figures { margin-top: 22px; }
.db-foot-figures div { display: flex; flex-direction: column; gap: 3px; }
.db-foot-figures span { font: 400 12px/1.2 var(--font-sans); color: var(--muted); }
.db-foot-figures strong { font: 700 20px/1.1 var(--font-sans); color: var(--text); font-variant-numeric: tabular-nums; }
.db-foot-figures small { font: 400 11.5px/1.2 var(--font-sans); color: var(--dim); }

/* Donut + legend. */
.db-donut-wrap { display: flex; align-items: center; gap: 22px; }
.db-donut { position: relative; width: 136px; height: 136px; flex-shrink: 0; }
.db-donut svg { width: 100%; height: 100%; transform: rotate(0deg); }
.db-donut-c { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.db-donut-c strong { font: 700 26px/1 var(--font-sans); color: var(--text); }
.db-donut-c span { margin-top: 3px; font: 400 11.5px/1 var(--font-sans); color: var(--muted); }
.db-legend { list-style: none; flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 9px; }
.db-legend li { display: grid; grid-template-columns: 9px 1fr auto; align-items: center; gap: 9px; font: 400 13px/1.2 var(--font-sans); color: var(--text-2); }
.db-legend i { width: 9px; height: 9px; border-radius: 50%; }
.db-legend span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.db-legend b { font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }

/* Lists. */
.db-list { list-style: none; display: flex; flex-direction: column; }
.db-list > li + li { border-top: 1px solid var(--line); }
.db-row { display: flex; align-items: center; gap: 12px; padding: 11px 0; }
.db-list-name { flex: 1; min-width: 0; font: 500 13.5px/1.3 var(--font-sans); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.db-list-name small { display: block; margin-top: 2px; font: 400 12px/1.2 var(--font-sans); color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.db-list-amt { font: 600 13.5px/1.2 var(--font-sans); color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.db-tag {
  flex-shrink: 0; padding: 3px 9px; border-radius: 999px;
  font: 500 11.5px/1.3 var(--font-sans); color: var(--muted); background: var(--surface-3);
}
.db-tag.is-warn  { color: var(--warning); background: var(--warning-soft); }
.db-tag.is-alert { color: var(--negative); background: var(--negative-soft); }
.db-ev { padding: 10px 0; }
.db-ev-top { display: flex; align-items: baseline; gap: 12px; }
.db-ev-bar { height: 5px; margin: 8px 0 6px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.db-ev-bar span { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.db-ev-sub { font: 400 12px/1.2 var(--font-sans); color: var(--muted); }

@media (max-width: 1100px) {
  .db-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .db-grid-3 { grid-template-columns: 1fr 1fr; }
  .db-grid-3 .db-span-2 { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
  .db-kpis, .db-grid-3, .db-grid-2 { grid-template-columns: 1fr; gap: 12px; }
  .db-span-2, .db-grid-3 .db-span-2 { grid-column: auto; }
  .db-kpi-value { font-size: 26px; }
  .db-chart { height: 200px; }
  .db-bar-x { font-size: 10.5px; }
}

/* Employee summary on the dashboard: quiet type labels, plain figures. */
.es-type { font: 400 13px/1.2 var(--font-sans); color: var(--text-2); }
.es-cur { margin-left: 4px; padding: 1px 6px; border-radius: 999px; font: 500 11px/1.3 var(--font-sans); color: var(--muted); background: var(--surface-3); }
.es-left { font: 600 13.5px/1.3 var(--font-sans); color: var(--text); font-variant-numeric: tabular-nums; }
.es-left--done { color: var(--positive); }


/* ═══════════════════════════════════════════════════════════════════════════
   Quiet layer
   The last word on the shared pieces every page is built from. Sentence-case
   labels in the sans, tabular figures, hairline borders, colour kept for the
   one accent and for states that mean something. Rules lead with :root so
   they outrank the per-theme overrides above without !important.
   ═══════════════════════════════════════════════════════════════════════════ */
body { font-variant-numeric: tabular-nums; }

/* Sidebar: black in both themes. */
:root .sidebar { background: var(--sidebar-bg); border-right: 1px solid #1a1d23; --surface: #15171c; --surface-2: #1b1e24; }
:root .sidebar::before { display: none; }

/* Top bar: blends into the page; the page name is the heading. */
:root .topbar { background: var(--bg); border-bottom: 1px solid var(--border); box-shadow: none; }
:root .topbar-breadcrumb { display: none; }
:root .topbar h1, :root #pageTitle { font: 700 20px/1.2 var(--font-sans); letter-spacing: -0.02em; color: var(--text); }

/* Cards. */
:root .card { border-radius: 14px; border-color: var(--border); box-shadow: var(--shadow-card); }
:root .card:hover { border-color: var(--border); box-shadow: var(--shadow-card); }
:root .card-header { padding: 16px 20px; border-bottom: 1px solid var(--line); background: transparent; }
:root .card-title { font: 600 15px/1.3 var(--font-sans); letter-spacing: -0.005em; color: var(--text); }

/* Tables: plain headers, roomy rows, hairlines. */
:root thead th {
  font: 500 12px/1.2 var(--font-sans); letter-spacing: 0; text-transform: none;
  color: var(--muted); background: var(--surface); border-bottom: 1px solid var(--border);
  padding-top: 12px; padding-bottom: 12px;
}
:root tbody td { font-size: 13px; color: var(--text-2); border-bottom-color: var(--line); }
:root tbody tr:hover { background: var(--surface-2); }

/* Badges: small rounded labels, no capitals, no outline. */
:root .badge {
  font: 500 11.5px/1.35 var(--font-sans); letter-spacing: 0; text-transform: none;
  padding: 2px 8px; border-radius: 999px; border-color: transparent;
}
:root .badge-grey { background: var(--surface-3); color: var(--muted); }
:root .badge-blue, :root .badge-teal { background: var(--accent-soft); color: var(--accent); }
:root .badge-purple { background: var(--accent-soft); color: var(--accent); }

/* Buttons. */
:root .btn { font: 500 13px/1 var(--font-sans); padding: 9px 14px; border-radius: 9px; border-color: var(--border); }
:root .btn-sm { padding: 6px 11px; font-size: 12.5px; border-radius: 8px; }
:root .btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
:root .btn-primary:hover { background: var(--primary-dark); border-color: var(--primary-dark); color: #fff; }
:root .btn-ghost { background: transparent; border-color: var(--border); color: var(--text-2); }
:root .btn-ghost:hover { background: var(--surface-2); color: var(--text); }

/* Forms. */
:root .form-group label,
:root .form-group > label {
  font: 500 12.5px/1.3 var(--font-sans); letter-spacing: 0; text-transform: none; color: var(--text-2);
}
:root .form-group input, :root .form-group select, :root .form-group textarea,
:root .modal input[type="text"], :root .modal input[type="number"], :root .modal input[type="date"],
:root .modal input[type="email"], :root .modal input[type="month"], :root .modal input[type="search"],
:root .modal select, :root .modal textarea {
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border-bright); border-radius: 9px;
  font: 400 13.5px/1.4 var(--font-sans);
}
:root .form-group input:focus, :root .form-group select:focus, :root .form-group textarea:focus,
:root .modal input:focus, :root .modal select:focus, :root .modal textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}

/* Modals: one surface, a quiet header, a soft scrim. */
:root .modal-overlay { background: rgba(8,10,14,0.55); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
:root .modal {
  background: var(--surface); border: 1px solid var(--border); border-top-color: var(--border);
  border-radius: 16px; box-shadow: var(--shadow-lg);
}
:root .modal-header { background: var(--surface); border-bottom: 1px solid var(--line); padding: 18px 22px; }
:root .modal-header h2, :root .modal-header h3 { font: 600 17px/1.25 var(--font-sans); letter-spacing: -0.01em; color: var(--text); }
:root .modal-close {
  width: 32px; height: 32px; border-radius: 8px; font-size: 13px;
  background: transparent; border: 1px solid transparent; color: var(--muted);
}
:root .modal-close:hover { background: var(--surface-3); color: var(--text); }
:root .modal-section-label { font: 600 13px/1.3 var(--font-sans); letter-spacing: 0; text-transform: none; color: var(--text); }
:root .deal-modal-redesign .modal-header { background: var(--surface); }
:root .deal-modal-sec-label {
  font: 600 13px/1.3 var(--font-sans); letter-spacing: 0; text-transform: none;
  color: var(--text); margin-bottom: 10px;
}
:root .deal-mini-lbl { font: 500 12px/1.3 var(--font-sans); color: var(--muted); }

/* Employee summary filter tabs on the dashboard. */
:root .es-tab { font: 500 12.5px/1 var(--font-sans); letter-spacing: 0; text-transform: none; }
:root .es-tab-count, :root .es-tab-count--intl { background: var(--surface-3); color: var(--muted); }
:root .es-tab--active .es-tab-count { background: rgba(255,255,255,0.22); color: #fff; }
.db-date {
  flex-shrink: 0; width: 40px; padding: 5px 0; border-radius: 8px; text-align: center;
  background: var(--accent-soft); color: var(--accent); font: 500 10.5px/1.1 var(--font-sans);
}
.db-date b { display: block; font: 700 15px/1.1 var(--font-sans); }

/* Deal Tracker, quietly: figures in plain ink, state carried by the paid
   figure's colour alone (green paid in full, amber part paid), no row fills. */
:root .deal-stat-cards { gap: 16px; margin-bottom: 16px; }
:root .deal-stat-card {
  display: flex; flex-direction: column; gap: 6px; padding: 16px 18px;
  border-radius: 14px; border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow-card);
}
:root .deal-stat-label { margin: 0; order: 0; font: 500 13px/1.3 var(--font-sans); color: var(--muted); }
:root .deal-stat-value { font: 700 24px/1.15 var(--font-sans); letter-spacing: -0.02em; color: var(--text); }
:root .deal-stat-card.ds--paid .deal-stat-value,
:root .deal-stat-card.ds--remaining .deal-stat-value { color: var(--text); }
:root .deal-stat-sub { font: 400 12.5px/1.3 var(--font-sans); color: var(--muted); }
:root .deal-stat-card.ds--remaining:not(.is-clear) .deal-stat-sub { color: var(--warning); }
:root .deal-stat-link { color: var(--accent); }
:root .deal-stat-card.ds--vat:hover { border-color: var(--border-bright); }

:root .deal-table-card { border-radius: 14px; }
:root #dealsTable thead th { font: 500 12px/1.2 var(--font-sans); letter-spacing: 0; text-transform: none; color: var(--muted); padding: 12px 10px; }
:root #dealsTable td { height: 48px; font-size: 13px; }
/* A paid deal is a green row. A paid figure that does not match the deal
   value plus VAT sits in a yellow cell, so it gets looked at. */
:root #dealsTable tr.deal-row-paid > td          { background: rgba(21,128,61,0.10); }
:root #dealsTable tr.deal-row-paid:hover > td    { background: rgba(21,128,61,0.10); }
[data-theme="dark"] #dealsTable tr.deal-row-paid > td       { background: rgba(76,195,138,0.13); }
[data-theme="dark"] #dealsTable tr.deal-row-paid:hover > td { background: rgba(76,195,138,0.13); }
:root #dealsTable td.deal-cell-check { background: rgba(250,204,21,0.42) !important; }
[data-theme="dark"] #dealsTable td.deal-cell-check { background: rgba(250,204,21,0.26) !important; }
:root .deal-paid-fig { color: var(--positive); font-weight: 600; }
:root .deal-paid-off { color: var(--text); font-weight: 600; }
:root .deal-row-flagged td, :root .deal-row-issue td { background: rgba(232,180,79,0.07); }
:root .deal-row-flagged td:first-child { box-shadow: inset 2px 0 0 var(--warning); }
:root .deal-month-disp .deal-month-for,
:root .deal-month-for {
  padding: 0; background: none; border: none; color: var(--dim);
  font: 400 11px/1.2 var(--font-sans); letter-spacing: 0; text-transform: none;
}
:root .deal-totals-row td { background: var(--surface) !important; font-size: 13px; }
:root .deal-q-btn { font: 500 12.5px/1.2 var(--font-sans); border-radius: 8px; padding: 6px 12px; }
:root .deal-q-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; }
:root .deal-search-input, :root .deal-select, :root .deal-range-input { border-radius: 8px; font-size: 13px; padding: 7px 11px; }
:root .deal-range-label { font: 500 12px/1 var(--font-sans); letter-spacing: 0; text-transform: none; color: var(--muted); }

/* Hotel Expenses: GBP headline figures (same cards as the Deal Tracker), a
   small table per currency, and rows without fills; the status picker's text
   colour says paid or part paid. */
#hotelSummary .deal-stat-cards { margin-bottom: 16px; }
.hotel-cur-card { margin-bottom: 0; }
.hotel-cur-rates { font: 400 12px/1.3 var(--font-sans); color: var(--dim); }
.hotel-cur-table td, .hotel-cur-table th { padding-top: 10px; padding-bottom: 10px; }
.hotel-cur-table .dt-r { text-align: right; }
.hotel-owe { color: var(--text); font-weight: 600; }
.hotel-settled { color: var(--positive); font-weight: 500; }
:root #hotelTable td { font-size: 13px; }
:root .ht-status-sel { font: 500 12.5px/1.2 var(--font-sans); }
/* Paid rows read green at a glance: a soft green row, a green status pill and
   a green paid figure. Part-paid rows get the same treatment in amber. */
:root #hotelTable tr.hotel-row-paid > td          { background: rgba(21,128,61,0.11); }
:root #hotelTable tr.hotel-row-partial > td       { background: rgba(180,83,9,0.10); }
:root #hotelTable tr.hotel-row-paid:hover > td    { background: rgba(21,128,61,0.16); }
:root #hotelTable tr.hotel-row-partial:hover > td { background: rgba(180,83,9,0.15); }
[data-theme="dark"] #hotelTable tr.hotel-row-paid > td          { background: rgba(76,195,138,0.14); }
[data-theme="dark"] #hotelTable tr.hotel-row-partial > td       { background: rgba(232,180,79,0.13); }
[data-theme="dark"] #hotelTable tr.hotel-row-paid:hover > td    { background: rgba(76,195,138,0.20); }
[data-theme="dark"] #hotelTable tr.hotel-row-partial:hover > td { background: rgba(232,180,79,0.19); }
:root .hotel-row-paid .ht-status-sel,
:root .hotel-row-partial .ht-status-sel { border-radius: 999px; padding: 3px 8px; font-weight: 600; }
:root .hotel-row-paid .ht-status-sel    { color: var(--positive); background: var(--positive-soft); }
:root .hotel-row-partial .ht-status-sel { color: var(--warning);  background: var(--warning-soft); }
:root .hotel-row-paid td[data-field="paid_amount"]    { color: var(--positive); }
:root .hotel-row-partial td[data-field="paid_amount"] { color: var(--warning); }
:root .ht-upload-btn { font: 500 12px/1.2 var(--font-sans); border-radius: 8px; }
@media (max-width: 700px) { .hotel-cur-rates { display: none; } }

/* Filter bars: a plain strip, no coloured edge. */
:root .filter-bar { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-card); }
:root .filter-bar select, :root .filter-bar input[type="search"], :root .filter-bar input[type="text"] {
  border: 1px solid var(--border-bright) !important; border-radius: 8px !important; background: var(--surface) !important;
  font: 400 13px/1.3 var(--font-sans) !important;
}

/* Modal details after the quiet layer. */
:root .deal-modal-redesign .modal-header { padding: 22px 28px 16px; }
:root .deal-modal-redesign .modal-header h2 { font: 600 19px/1.2 var(--font-sans) !important; letter-spacing: -0.015em; }
:root .deal-period { min-width: 210px; }
:root .deal-period select:first-child { flex: 1 1 auto; border-radius: 9px 0 0 9px; border-right-width: 0; }
:root .deal-period select:last-child  { flex: 0 0 92px; border-radius: 0 9px 9px 0; font-family: var(--font-sans); }
:root .deal-period-hint { font: 400 12px/1.4 var(--font-sans); color: var(--muted); }
.deal-package-single input { padding: 10px 13px; }

:root .hm-section { padding: 18px 0 18px; border-bottom-color: var(--line); }
:root .hm-section .modal-section-label { padding: 0 20px; margin-bottom: 12px; }
:root .hm-section .modal-section-label::after { display: none; }
:root .hm-col-title { font: 500 12px/1.3 var(--font-sans); letter-spacing: 0; text-transform: none; color: var(--muted); margin: 6px 0 8px; }
:root .hm-footer { background: var(--surface); border-top-color: var(--line); }
/* The pinned header starts at the modal's top edge, so nothing can scroll
   into a gap above it. */
:root .deal-modal-redesign { padding-top: 0; }
:root .deal-modal-redesign .modal-header { margin: 0 -28px; top: 0; }
:root .deal-period select:only-child { flex: 1 1 auto; border-radius: 9px; border-right-width: 1px; }
:root .deal-period:has(> select:only-child) { min-width: 0; }

/* ═══════════════════════════════════════════════════════════════════════════
   Salary, quietly
   One accent (the blue progress bars), plain ink for every amount, grey
   type labels, and sentence-case labels. Amber is left only for the small
   "to pay" counts, which are the one thing on the page that asks for action.
   ═══════════════════════════════════════════════════════════════════════════ */
:root .sal-ov { border-radius: 14px; }
:root .sal-ov-eyebrow { display: none; }
:root .sal-ov-title { margin-top: 0; font: 600 17px/1.3 var(--font-sans); }
:root .sal-ov-note { font: 400 12.5px/1.4 var(--font-sans); }
:root .sal-ov-total-label { font: 500 12.5px/1.3 var(--font-sans); letter-spacing: 0; text-transform: none; color: var(--muted); }
:root .sal-ov-total-value { font: 700 34px/1.05 var(--font-sans); letter-spacing: -0.03em; }
:root .sal-ov-total-note, :root .sal-ov-t-pace, :root .sal-ov-t-alt { font-family: var(--font-sans); }
:root .sal-ov-t-count { font: 400 12px/1.2 var(--font-sans); letter-spacing: 0; text-transform: none; color: var(--muted); }
:root .sal-ov-t-pace { font-size: 12px; font-weight: 500; }
:root .sal-ov-chip, :root .sal-grp-topay {
  font: 500 11.5px/1.3 var(--font-sans); letter-spacing: 0; text-transform: none;
  padding: 2px 8px; border-radius: 999px; background: var(--warning-soft); color: var(--warning);
}
:root .sal-ov-fx { font: 400 12px/1.5 var(--font-sans); color: var(--dim); }
:root .sal-grp-open td, :root .sal-grp-detail td { background: var(--surface-2); }

/* Employee cards. */
:root .sc-card { border-radius: 14px; border: 1px solid var(--border); box-shadow: var(--shadow-card); background: var(--surface); }
:root .sc-accent { display: none; }
:root .sc-emp-name { font: 600 15px/1.3 var(--font-sans); }
:root .sc-emp-role, :root .sc-emp-since { font: 400 12px/1.3 var(--font-sans); color: var(--muted); }
:root .sc-annual-lbl { font: 400 12px/1.3 var(--font-sans); letter-spacing: 0; text-transform: none; color: var(--muted); }
:root .sc-annual-val { font: 700 19px/1.2 var(--font-sans); color: var(--text); }
:root .sc-prog-meta { font: 400 12.5px/1.3 var(--font-sans); color: var(--muted); }
.sc-prog-left { color: var(--text-2); font-weight: 500; }
.sc-prog-left.is-over { color: var(--positive); }

.sc-figs { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.sc-fig { padding: 14px 20px; }
.sc-fig + .sc-fig { border-left: 1px solid var(--line); }
.sc-fig-lbl { margin-bottom: 4px; font: 400 12px/1.3 var(--font-sans); color: var(--muted); }
.sc-fig-val { font: 700 20px/1.2 var(--font-sans); letter-spacing: -0.01em; color: var(--text); }
.sc-fig-val.is-due { color: var(--accent); }
.sc-fig-val.is-none { color: var(--dim); }
.sc-fig-sub { margin-top: 3px; font: 400 12px/1.3 var(--font-sans); color: var(--muted); }
.sc-excess { padding: 8px 20px; border-bottom: 1px solid var(--line); font: 500 12.5px/1.4 var(--font-sans); color: var(--negative); }

:root .sc-sec-title { font: 500 13px/1.3 var(--font-sans); color: var(--text-2); }
:root .sc-sec-sum,
:root .sc-sec-sum.green, :root .sc-sec-sum.red, :root .sc-sec-sum.amber, :root .sc-sec-sum.muted {
  padding: 0; background: none; font: 500 13px/1.3 var(--font-sans); color: var(--text);
}
:root .sc-sec-sum.red { color: var(--negative); }
:root .sc-item-amt.pos { color: var(--text); }
:root .sc-card-footer { background: var(--surface); border-top-color: var(--line); }
:root #salaryEmpTabs, :root .sal-emp-tabs { font-family: var(--font-sans); }
:root .salary-tab { font: 500 12.5px/1.2 var(--font-sans); letter-spacing: 0; text-transform: none; }
:root .sc-fig-lbl { text-transform: none; letter-spacing: 0; }
@media (max-width: 700px) {
  .db-kpis { grid-template-columns: 1fr 1fr; gap: 10px; }
  .db-kpi { padding: 14px; }
  .db-kpi-value { font-size: 22px; }
  .db-kpi-label, .db-kpi-sub { font-size: 12px; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   Deal modal
   A header and a footer that stay put, and a scrolling body in short
   sections: Client, Money, Invoice & payment, Events, Notes, Documents.
   Related fields share a row; every field keeps its label above it.
   ═══════════════════════════════════════════════════════════════════════════ */
:root .dm {
  width: 640px; max-width: 100%; max-height: min(92vh, 900px); padding: 0;
  display: flex; flex-direction: column; overflow: hidden;
}
:root .dm > * { padding-left: 0; padding-right: 0; }
:root .dm .dm-head {
  position: static; margin: 0; padding: 22px 28px 18px; flex-shrink: 0;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  background: var(--surface); border-bottom: 1px solid var(--line); border-radius: 16px 16px 0 0;
}
:root .dm .dm-head h2 { font: 600 19px/1.2 var(--font-sans) !important; letter-spacing: -0.015em; margin: 0; }
.dm-sub { margin-top: 4px; font: 400 12.5px/1.3 var(--font-sans); color: var(--muted); }

:root .dm .dm-body { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 28px 8px; }
.dm-sec { padding: 20px 0; }
.dm-sec + .dm-sec { border-top: 1px solid var(--line); }
.dm-sec.deal-edit-only-row { display: none; }
.deal-modal-editing .dm-sec.deal-edit-only-row { display: block; }
.dm-sec-title { margin: 0; font: 600 14px/1.3 var(--font-sans); color: var(--text); display: flex; align-items: center; gap: 8px; }
.dm-sec-hd { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
/* Spacing comes from the gap between whatever is showing, so a hidden
   edit-only field leaves no hole in Add mode. */
.dm-sec > * + * { margin-top: 14px; }
.dm-sec > .dm-hint { margin-top: 8px; }
.dm-hint:empty { display: none; }
.dm-sec-hd .dm-sec-title { margin: 0; }
.dm-count:not(:empty) {
  padding: 2px 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent);
  font: 500 11.5px/1.3 var(--font-sans);
}
.dm-opt { margin-left: 4px; font: 400 12px/1 var(--font-sans); color: var(--dim); }

.dm-row { display: grid; gap: 12px; }
.dm-row--company { grid-template-columns: minmax(0, 1fr) 88px; }
.dm-row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dm-row--money { grid-template-columns: 116px minmax(0, 1fr) minmax(0, 1fr); }
.deal-modal-editing .dm-sec > .deal-edit-only-row { display: block; }

.dm-field { min-width: 0; }
.dm-field > label, .dm-label-row > label {
  display: block; margin-bottom: 6px; font: 500 12.5px/1.3 var(--font-sans); color: var(--text-2);
}
.dm-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
:root .dm input[type="text"], :root .dm input[type="number"], :root .dm input[type="date"], :root .dm input[type="search"],
:root .dm select, :root .dm textarea {
  width: 100%; min-height: 40px; padding: 9px 12px;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border-bright); border-radius: 9px;
  font: 400 14px/1.4 var(--font-sans);
}
:root .dm textarea { min-height: 96px; resize: vertical; display: block; }
:root .dm input::placeholder, :root .dm textarea::placeholder { color: var(--dim); }
:root .dm .dm-initials { text-align: center; text-transform: uppercase; letter-spacing: 0.12em; font-weight: 600; }
:root .dm .deal-period select { min-height: 40px; }
:root .dm .deal-period-hint { margin-top: 6px; min-height: 0; }
.dm-sec .deal-package-single { margin-top: 14px; }
.dm-hint:not(:empty) { margin-top: 8px; font: 400 12.5px/1.4 var(--font-sans); color: var(--muted); }

.dm-link {
  background: none; border: none; padding: 0; cursor: pointer; white-space: nowrap;
  font: 500 13px/1.3 var(--font-sans); color: var(--accent);
}
.dm-link:hover { text-decoration: underline; text-underline-offset: 3px; }
:root #dealPackageToggleBtn.active { background: none; border: none; color: var(--accent); }

/* Live total under the money fields. */
.dm-summary:empty { display: none; }
.dm-summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 10px 14px; border-radius: 10px;
  background: var(--surface-2); font: 400 13px/1.4 var(--font-sans); color: var(--muted);
}
.dm-summary strong { color: var(--text); font-weight: 600; }
.dm-sum-left { color: var(--warning); font-weight: 500; }
.dm-sum-done { color: var(--positive); font-weight: 500; }
.dm-sum-over { color: var(--negative); font-weight: 500; }

/* Paid into: a two-way segmented control. */
.dm-seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 10px; background: var(--surface-3); }
:root .dm .deal-pay-btn {
  flex: 0 0 auto; min-width: 104px; padding: 7px 16px; border: none; border-radius: 8px;
  background: transparent; color: var(--muted); font: 500 13px/1.2 var(--font-sans); cursor: pointer;
}
:root .dm .deal-pay-btn:hover { color: var(--text); }
:root .dm .deal-pay-btn.active { background: var(--surface); color: var(--text); box-shadow: 0 1px 2px rgba(15,23,42,0.10), 0 0 0 1px var(--border); }
[data-theme="dark"] .dm .deal-pay-btn.active { background: var(--accent); color: #fff; box-shadow: none; }

/* Event picker. */
:root .dm .deal-event-picker { border: 1px solid var(--border-bright); border-radius: 10px; }
:root .dm .deal-event-search {
  min-height: 40px; padding: 9px 12px; border: none; border-bottom: 1px solid var(--line); border-radius: 0;
  background: var(--surface); font: 400 13.5px/1.3 var(--font-sans);
}
:root .dm .deal-event-group-hd { font: 500 11.5px/1.2 var(--font-sans); letter-spacing: 0; text-transform: none; color: var(--muted); }
:root .dm .deal-event-group-n { font: 500 11px/1.2 var(--font-sans); background: var(--surface-3); border: none; }
:root .dm .deal-event-check-item .deal-event-when { font: 400 12px/1.2 var(--font-sans); }
:root .dm .deal-event-team { font: 500 11px/1.3 var(--font-sans); letter-spacing: 0; }
.dm-package-rows:not(.hidden) { display: flex; flex-direction: column; gap: 8px; }
:root .dm .deal-package-row { padding: 8px 10px 8px 14px; border-radius: 10px; border-color: var(--border); gap: 8px; }
:root .dm .deal-package-row .dpr-name { font: 500 13px/1.3 var(--font-sans); }
:root .dm .deal-package-row input[type="text"]   { width: 200px !important; flex-shrink: 0; }
:root .dm .deal-package-row input[type="number"] { width: 120px !important; flex-shrink: 0; }
:root .dm .deal-package-row > span:not(.dpr-name) { font: 500 13px/1 var(--font-sans) !important; }
:root .dm .dm-package-rows > div:last-child:not(.deal-package-row) { padding: 2px 2px 0; font: 500 12.5px/1.4 var(--font-sans) !important; }
@media (max-width: 600px) {
  :root .dm .deal-package-row { flex-wrap: wrap; }
  :root .dm .deal-package-row .dpr-name { flex-basis: 100%; }
  :root .dm .deal-package-row input[type="text"] { flex: 1; width: auto !important; }
}
:root .dm .deal-package-row input { min-height: 36px; }

/* Documents: two quiet drop slots. */
.dm-file {
  display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; cursor: pointer;
  border: 1px dashed var(--border-bright); border-radius: 10px; background: var(--surface);
  transition: border-color .15s, background .15s;
}
.dm-file:hover { border-color: var(--accent); background: var(--accent-soft); }
.dm-file input { display: none; }
.dm-file-name { font: 500 13px/1.3 var(--font-sans); color: var(--text); }
.dm-file-state { font: 400 12px/1.3 var(--font-sans); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dm-file-state:empty::before { content: 'Click to attach a PDF or Word file'; color: var(--dim); }

:root .dm .dm-foot {
  flex-shrink: 0; display: flex; justify-content: flex-end; gap: 10px;
  padding: 14px 28px; border-top: 1px solid var(--line); background: var(--surface); border-radius: 0 0 16px 16px;
}
:root .dm .dm-foot .btn { min-width: 96px; justify-content: center; padding: 10px 16px; }

@media (max-width: 600px) {
  :root .dm .dm-head { padding: 18px 18px 14px; }
  :root .dm .dm-body { padding: 0 18px 8px; }
  :root .dm .dm-foot { padding: 12px 18px; }
  .dm-row--2 { grid-template-columns: 1fr; }
  .dm-row--money { grid-template-columns: 1fr 1fr; }
  .dm-row--money .dm-field:first-child { grid-column: 1 / -1; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   Sign-in page
   Layers, back to front: the page colour, three slow blue glows, the dot
   field (canvas, lit by the pointer), a few floating LPGP marks, the card.
   Light and dark each get their own palette.
   ═══════════════════════════════════════════════════════════════════════════ */
:root:not([data-theme="dark"]) body.login-body {
  --bg: #f4f6f9; --surface: #ffffff; --surface-2: #f7f8fa; --bg-2: #f7f8fa;
  --border: rgba(15,23,42,0.10); --border-bright: rgba(15,23,42,0.16);
  --text: #0f172a; --text-2: #334155; --muted: #64748b; --dim: #94a3b8;
  --accent-rgb: 31 111 235; --accent: #1f6feb; --primary: #1f6feb;
  --accent-soft: rgb(var(--accent-rgb) / 0.10); --accent-line: rgb(var(--accent-rgb) / 0.30);
}
body.login-body { background: var(--bg); position: relative; min-height: 100vh; overflow-x: hidden; }
#loginBg { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
:root .login-wrap { position: relative; z-index: 2; background: transparent !important; background-image: none !important; }

.login-glows { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.login-glows i {
  position: absolute; width: 46vmax; height: 46vmax; border-radius: 50%;
  background: radial-gradient(circle, rgb(var(--accent-rgb) / 0.22) 0%, transparent 62%);
  filter: blur(20px); animation: loginDrift 26s ease-in-out infinite alternate;
}
.login-glows i:nth-child(1) { left: -12vmax; top: -14vmax; }
.login-glows i:nth-child(2) { right: -16vmax; top: 18vh; animation-duration: 32s; animation-delay: -9s; opacity: .8; }
.login-glows i:nth-child(3) { left: 24vw; bottom: -22vmax; animation-duration: 38s; animation-delay: -18s; opacity: .6; }
:root:not([data-theme="dark"]) .login-glows i { background: radial-gradient(circle, rgb(var(--accent-rgb) / 0.13) 0%, transparent 62%); }
@keyframes loginDrift {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(6vw, 4vh) scale(1.08); }
  100% { transform: translate(-4vw, 8vh) scale(0.96); }
}

/* Floating marks: each bobs on its own clock and leans away from the pointer
   by its depth (set from login-bg.js as --px / --py). */
.login-marks { position: fixed; inset: 0; z-index: 1; pointer-events: none; }
.login-marks span {
  position: absolute; left: var(--x); top: var(--y);
  width: var(--s); height: var(--s); border-radius: calc(var(--s) * 0.24);
  display: grid; place-items: center;
  font: 700 calc(var(--s) * 0.42)/1 var(--font-sans); color: rgb(var(--accent-rgb) / 0.55);
  background: linear-gradient(140deg, rgb(var(--accent-rgb) / 0.16), rgb(var(--accent-rgb) / 0.04));
  border: 1px solid rgb(var(--accent-rgb) / 0.22);
  box-shadow: 0 10px 40px rgb(var(--accent-rgb) / 0.12);
  backdrop-filter: blur(2px);
  translate: calc(var(--px, 0) * var(--depth) * -1px) calc(var(--py, 0) * var(--depth) * -1px);
  transition: translate .6s cubic-bezier(.2,.7,.2,1);
  animation: loginFloat 9s ease-in-out infinite; animation-delay: var(--d);
  opacity: .75;
}
:root:not([data-theme="dark"]) .login-marks span { opacity: .65; background: linear-gradient(140deg, rgb(var(--accent-rgb) / 0.12), rgba(255,255,255,0.5)); }
@keyframes loginFloat {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  50%      { transform: translateY(-18px) rotate(4deg); }
}

/* The card: frosted glass over the field. */
:root .login-card {
  background: rgba(16,18,24,0.72); border: 1px solid rgba(255,255,255,0.09);
  backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%);
  box-shadow: 0 30px 80px rgba(0,0,0,0.55), 0 0 0 1px rgb(var(--accent-rgb) / 0.08);
  border-radius: 18px;
}
:root:not([data-theme="dark"]) .login-card {
  background: rgba(255,255,255,0.78); border-color: rgba(15,23,42,0.08);
  box-shadow: 0 30px 80px rgba(15,23,42,0.14), 0 0 0 1px rgba(15,23,42,0.03);
}
:root .login-card label { font: 500 12.5px/1.3 var(--font-sans); letter-spacing: 0; text-transform: none; color: var(--text-2); }
:root .login-card input { padding: 11px 13px; border-radius: 9px; font: 400 14px/1.3 var(--font-sans); }
:root:not([data-theme="dark"]) .login-card input { background: #fff; border: 1px solid var(--border-bright); color: var(--text); }
:root .login-logo-sub { font: 500 10.5px/1 var(--font-sans); letter-spacing: 0.08em; }
:root .login-submit { padding: 13px; border-radius: 10px; font: 600 14px/1 var(--font-sans); letter-spacing: 0; }
:root:not([data-theme="dark"]) .login-theme-btn { background: rgba(255,255,255,0.8); border-color: rgba(15,23,42,0.10); box-shadow: 0 4px 14px rgba(15,23,42,0.08); }

@media (max-width: 600px) {
  .login-marks span:nth-child(n+4) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .login-glows i, .login-marks span { animation: none; }
  .login-marks span { transition: none; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   Calendar
   A plain month: hairline grid, small weekday labels, today as a blue disc,
   and days off as soft blue name pills (outlined for a half day) instead of
   red cells. Reminders keep their category dot.
   ═══════════════════════════════════════════════════════════════════════════ */
:root .cal-page-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 12px; flex-wrap: wrap; }
.cal-title-row { display: flex; align-items: center; gap: 16px; }
:root #calMonthLabel { flex: none; margin: 0; text-align: left; font: 700 22px/1.2 var(--font-sans); letter-spacing: -0.02em; color: var(--text); min-width: 190px; }
:root .cal-nav { flex: none; display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 10px; background: var(--surface); border: 1px solid var(--border); }
.cal-nav-btn, .cal-today-btn {
  height: 30px; border: none; background: transparent; cursor: pointer; border-radius: 7px;
  color: var(--text-2); font: 500 13px/1 var(--font-sans);
}
.cal-nav-btn { width: 30px; font-size: 18px; line-height: 1; }
.cal-today-btn { padding: 0 12px; }
.cal-nav-btn:hover, .cal-today-btn:hover { background: var(--surface-3); color: var(--text); }
:root .cal-controls select {
  min-width: 170px; height: 34px; padding: 0 10px; border-radius: 9px;
  border: 1px solid var(--border-bright); background: var(--surface); color: var(--text); font: 400 13px/1 var(--font-sans);
}

.cal-legend { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-bottom: 14px; font: 400 12.5px/1.2 var(--font-sans); color: var(--muted); }
.cal-legend > span { display: inline-flex; align-items: center; gap: 7px; }
.cal-legend-hint { margin-left: auto; color: var(--dim); }
.cal-key { width: 12px; height: 12px; border-radius: 4px; display: inline-block; }
.cal-key--full { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }
.cal-key--half { border: 1px dashed var(--accent); }
.cal-key--rem { width: 8px; height: 8px; border-radius: 50%; background: var(--warning); }

:root .cal-grid-wrap { border-radius: 14px; border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow-card); }
:root .cal-header-row { background: none; border-bottom: 1px solid var(--border); }
:root .cal-header-row > div { padding: 11px 12px; text-align: left; font: 500 12px/1 var(--font-sans); letter-spacing: 0; text-transform: none; color: var(--muted); }
:root .cal-cell {
  min-height: 112px; padding: 8px 8px 10px; background: var(--surface);
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  box-shadow: none; transition: background .12s;
}
:root .cal-cell:hover { background: var(--surface-2); box-shadow: none; }
:root .cal-cell.weekend { background: var(--surface-2); }
:root .cal-cell.weekend:hover { background: var(--surface-3); }
:root .cal-cell.other-month { background: var(--surface); }
:root .cal-cell.other-month .cal-date { color: var(--dim); opacity: .6; }
:root .cal-cell.has-offs, :root .cal-cell.has-offs:hover { background: inherit; }
:root .cal-cell.has-offs { background: var(--surface); }
:root .cal-cell.has-offs.weekend { background: var(--surface-2); }
:root .cal-cell.has-offs:hover { background: var(--surface-2); }
:root .cal-grid > .cal-cell:nth-last-child(-n+7) { border-bottom: none; }
:root .cal-date {
  width: 26px; height: 26px; margin: 0 0 6px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font: 500 13px/1 var(--font-sans); color: var(--text-2);
}
:root .cal-cell.today { background: var(--surface); }
:root .cal-cell.today .cal-date { background: var(--accent); color: #fff; font-weight: 600; box-shadow: none; font-size: 13px; }

:root .cal-chips { gap: 4px; }
:root .cal-chip {
  display: block; padding: 3px 8px; border-radius: 6px; max-width: 100%;
  font: 500 11.5px/1.35 var(--font-sans); letter-spacing: 0; text-transform: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
:root .chip-full { background: var(--accent-soft); color: var(--accent); box-shadow: inset 2px 0 0 var(--accent); }
:root .chip-half { background: transparent; color: var(--accent); box-shadow: inset 0 0 0 1px rgb(var(--accent-rgb) / 0.45); }
[data-theme="dark"] .chip-full { background: rgb(var(--accent-rgb) / 0.18); color: #9cc2ff; }
[data-theme="dark"] .chip-half { color: #9cc2ff; }
:root .cal-more { font: 500 11px/1.3 var(--font-sans); color: var(--muted); margin-top: 2px; }
:root .cal-reminder-dots { position: absolute; top: 14px; right: 10px; display: flex; gap: 3px; }

/* The two lists under the month. */
:root .cal-upcoming-section { border-radius: 14px; box-shadow: var(--shadow-card); }
:root .cal-upcoming-head { background: none; border-bottom-color: var(--line); padding: 14px 18px; font: 600 14px/1.3 var(--font-sans); letter-spacing: 0; text-transform: none; color: var(--text); }
:root .cal-upcoming-head .cal-upcoming-icon { display: none; }
:root .cal-upcoming-item { border-bottom-color: var(--line); padding: 10px 18px; }
:root .cal-upcoming-badge { background: var(--accent-soft); border: none; border-radius: 8px; }
:root .cal-upcoming-badge-day { font: 700 15px/1.1 var(--font-sans); color: var(--accent); }
:root .cal-upcoming-badge-mon { font: 500 10.5px/1.2 var(--font-sans); letter-spacing: 0; color: var(--accent); }
:root .cal-upcoming-empty { font: 400 13px/1.4 var(--font-sans); color: var(--dim); }

@media (max-width: 700px) {
  :root #calMonthLabel { font-size: 18px; min-width: 0; }
  :root .cal-cell { min-height: 64px; padding: 4px; }
  :root .cal-chip { font-size: 10px; padding: 2px 4px; }
  .cal-legend-hint { display: none; }
}
:root .cal-upcoming-sub .cal-chip { display: inline-block; width: auto; font-size: 11px !important; padding: 1px 7px !important; }
.cal-key--rem { background: var(--accent); }

/* Portfolio teams: one row per portfolio, four people across. */
.pf-teams .table-wrap { margin: 4px -4px 0; }
.pf-teams-table { width: 100%; border-collapse: collapse; }
:root .pf-teams-table th { background: none; padding: 8px 10px; font: 500 12px/1.2 var(--font-sans); color: var(--muted); border-bottom: 1px solid var(--line); }
:root .pf-teams-table td { padding: 11px 10px; border-bottom: 1px solid var(--line); font: 400 13.5px/1.3 var(--font-sans); color: var(--text); }
:root .pf-teams-table tbody tr:last-child td { border-bottom: none; }
:root .pf-teams-table tbody tr:hover { background: transparent; }
.pf-team-series { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; white-space: nowrap; }
.pf-team-name { font-weight: 500; }
.pf-team-empty { color: var(--dim); }
.pf-team-act { text-align: right; white-space: nowrap; }
.pt-body { padding: 18px 22px 4px; }
.pt-body .form-row { margin-bottom: 14px; }
.pt-hint { margin: 0; font: 400 12.5px/1.4 var(--font-sans); color: var(--muted); }
:root .modal > .pt-body { padding-left: 22px; padding-right: 22px; }
.pt-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 22px 20px; }
@media (max-width: 700px) {
  .pf-teams-table thead { display: none; }
  .pf-teams-table tr { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
  :root .pf-teams-table td { border: none; padding: 0; }
  .pf-teams-table td[data-label]::before { content: attr(data-label); display: block; font: 400 11.5px/1.3 var(--font-sans); color: var(--muted); }
  .pf-teams-table td:first-child { grid-column: 1 / -1; }
  .pf-team-act { grid-column: 1 / -1; text-align: left; }
}

/* LPGP logo. The artwork is silver on transparent, so on light surfaces it
   is darkened with a filter rather than shipped twice. */
:root .sidebar-logo-icon {
  width: 30px; height: 30px; object-fit: contain; background: none; box-shadow: none; border-radius: 0;
}
.login-logo-img { height: 30px; width: auto; display: block; }
:root:not([data-theme="dark"]) .login-logo-img { filter: brightness(0.16); }
:root .login-logo { align-items: center; gap: 12px; }
:root .login-logo-text { padding-left: 12px; border-left: 1px solid var(--border); }
:root .login-logo-name { font: 600 15px/1.1 var(--font-sans); color: var(--accent); }

/* Floating marks behind the sign-in card are the logo itself. */
:root .login-marks span { background: none; border: none; box-shadow: none; backdrop-filter: none; opacity: .16; }
.login-marks span img { width: 100%; height: 100%; object-fit: contain; }
:root:not([data-theme="dark"]) .login-marks span { opacity: .10; }
:root:not([data-theme="dark"]) .login-marks span img { filter: brightness(0.2); }
.pt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.pt-grid .form-group { margin: 0; }
:root .pt-grid select { width: 100%; }
.pt-other { margin-top: 6px; }
.pt-other.hidden { display: none; }
@media (max-width: 520px) { .pt-grid { grid-template-columns: 1fr; } }

.pf-team-link {
  background: none; border: none; padding: 0; cursor: pointer; color: var(--text);
  font: 500 13.5px/1.3 var(--font-sans); text-align: left;
}
.pf-team-link:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.pf-team-tag {
  margin-left: 6px; padding: 1px 7px; border-radius: 999px; vertical-align: 1px;
  font: 500 11px/1.3 var(--font-sans); color: var(--muted); background: var(--surface-3);
}

/* Portfolio roles on an employee's record. */
.epr-list { padding: 4px 20px 0; }
.epr-row { padding: 10px 0; border-bottom: 1px solid var(--line); }
.epr-main { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font: 500 13.5px/1.3 var(--font-sans); color: var(--text); }
.epr-year { font-weight: 400; color: var(--muted); }
.epr-roles { margin-left: auto; padding: 2px 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font: 500 12px/1.3 var(--font-sans); }
.epr-stats { margin: 4px 0 0 18px; font: 400 12.5px/1.4 var(--font-sans); color: var(--muted); }
.epr-total { padding: 10px 0 2px; font: 500 12.5px/1.4 var(--font-sans); color: var(--text-2); }
.epr-empty { padding: 8px 0; font: 400 13px/1.4 var(--font-sans); color: var(--dim); }
#empPortfolioWrap .modal-section-label { padding-left: 0; padding-right: 0; }
#empPortfolioWrap .epr-list { padding: 4px 0 0; }


/* ═══════════════════════════════════════════════════════════════════════════
   Employee profile panel (opens from any name)
   ═══════════════════════════════════════════════════════════════════════════ */
.emp-link {
  background: none; border: none; padding: 0; margin: 0; cursor: pointer; text-align: left;
  font: inherit; color: inherit;
}
.emp-link:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.emp-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }

.ep-overlay {
  position: fixed; inset: 0; z-index: 190; background: rgba(8,10,14,0.45);
  opacity: 0; pointer-events: none; transition: opacity .2s;
}
.ep-overlay.open { opacity: 1; pointer-events: auto; }
.ep-panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(480px, 100vw);
  background: var(--surface); border-left: 1px solid var(--border); box-shadow: var(--shadow-lg);
  overflow-y: auto; transform: translateX(24px); transition: transform .22s cubic-bezier(.2,.8,.2,1);
}
.ep-overlay.open .ep-panel { transform: none; }
.ep-head { position: relative; display: flex; gap: 16px; align-items: flex-start; padding: 28px 28px 18px; }
.ep-avatar {
  width: 56px; height: 56px; flex-shrink: 0; border-radius: 16px; display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent); font: 700 19px/1 var(--font-sans);
}
.ep-who { min-width: 0; padding-right: 36px; }
.ep-who h2 { margin: 0; font: 700 21px/1.2 var(--font-sans); letter-spacing: -0.02em; color: var(--text); }
.ep-who p { margin: 4px 0 0; font: 400 13.5px/1.4 var(--font-sans); color: var(--muted); }
.ep-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.ep-chip, .ep-status { padding: 2px 9px; border-radius: 999px; font: 500 12px/1.4 var(--font-sans); background: var(--surface-3); color: var(--muted); }
.ep-status--on { background: var(--positive-soft); color: var(--positive); }
.ep-close { position: absolute; top: 20px; right: 20px; }
.ep-actions { display: flex; gap: 8px; flex-wrap: wrap; padding: 0 28px 20px; border-bottom: 1px solid var(--line); }
:root .ep-danger { color: var(--negative); }
:root .ep-danger:hover { background: var(--negative-soft); color: var(--negative); }
.ep-sec { padding: 20px 28px; border-bottom: 1px solid var(--line); }
.ep-sec:last-child { border-bottom: none; }
.ep-sec h3 { margin: 0 0 12px; font: 600 14px/1.3 var(--font-sans); color: var(--text); }
.ep-details { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; }
.ep-detail span { display: block; font: 400 12px/1.3 var(--font-sans); color: var(--muted); }
.ep-detail strong { display: block; margin-top: 3px; font: 500 13.5px/1.35 var(--font-sans); color: var(--text); overflow-wrap: anywhere; }
.ep-detail strong em { font-style: normal; color: var(--dim); }
.ep-detail a { color: var(--text); text-decoration: none; }
.ep-detail a:hover { color: var(--accent); }
.ep-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ep-tile { padding: 12px 14px; border-radius: 12px; background: var(--surface-2); }
.ep-tile span { display: block; font: 400 12px/1.3 var(--font-sans); color: var(--muted); }
.ep-tile strong { display: block; margin-top: 4px; font: 700 18px/1.2 var(--font-sans); color: var(--text); letter-spacing: -0.01em; }
.ep-tile small { display: block; margin-top: 2px; font: 400 12px/1.3 var(--font-sans); color: var(--muted); }
.ep-list { display: flex; flex-direction: column; }
.ep-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); font: 400 13.5px/1.35 var(--font-sans); color: var(--text); }
.ep-row:last-child { border-bottom: none; }
.ep-row small { display: block; margin-top: 2px; font: 400 12px/1.3 var(--font-sans); color: var(--muted); }
.ep-row strong { font-weight: 600; white-space: nowrap; }
.ep-sec-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.ep-sec-head h3 { margin: 0; }
.ep-doc-add { display: flex; align-items: center; gap: 8px; }
.ep-doc-type { height: 30px; padding: 0 8px; border-radius: 8px; border: 1px solid var(--border-bright); background: var(--surface); color: var(--text); font: 400 12.5px/1 var(--font-sans); }
.ep-row > span:first-child { min-width: 0; }
.ep-doc-link { color: var(--text); text-decoration: none; font-weight: 500; overflow-wrap: anywhere; }
.ep-doc-link:hover { color: var(--accent); }
.ep-doc-btns { display: flex; gap: 4px; flex-shrink: 0; }
.ep-loading, .ep-empty { padding: 4px 0; font: 400 13px/1.4 var(--font-sans); color: var(--dim); }
#epPortfolio { padding: 0; }
@media (max-width: 520px) {
  .ep-head, .ep-actions, .ep-sec { padding-left: 20px; padding-right: 20px; }
  .ep-details, .ep-tiles { grid-template-columns: 1fr; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   Employees page
   ═══════════════════════════════════════════════════════════════════════════ */
.emp-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.emp-summary { margin: 0; font: 400 14px/1.4 var(--font-sans); color: var(--muted); }
.emp-summary strong { color: var(--text); font-weight: 600; }
.emp-filters { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.emp-search {
  flex: 1; min-width: 220px; max-width: 360px; display: flex; align-items: center; gap: 8px;
  padding: 0 12px; height: 38px; border-radius: 10px; border: 1px solid var(--border-bright); background: var(--surface); color: var(--dim);
}
.emp-search input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; color: var(--text); font: 400 13.5px/1 var(--font-sans); }
.emp-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.emp-seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 10px; background: var(--surface-3); }
.emp-seg button {
  border: none; background: transparent; cursor: pointer; padding: 6px 12px; border-radius: 8px;
  font: 500 12.5px/1.2 var(--font-sans); color: var(--muted);
}
.emp-seg button:hover { color: var(--text); }
.emp-seg button.active { background: var(--surface); color: var(--text); box-shadow: 0 1px 2px rgba(15,23,42,0.1), 0 0 0 1px var(--border); }
[data-theme="dark"] .emp-seg button.active { background: var(--surface-2); box-shadow: 0 0 0 1px var(--border-bright); }
.emp-depts { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.emp-chip {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface); color: var(--text-2); font: 500 12.5px/1.2 var(--font-sans);
}
.emp-chip span { font-weight: 500; color: var(--dim); }
.emp-chip:hover { border-color: var(--border-bright); color: var(--text); }
.emp-chip.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.emp-chip.active span { color: rgba(255,255,255,0.8); }

:root .emp-card { margin-bottom: 0; }
:root .emp-table td { padding: 11px 16px; vertical-align: middle; }
:root .emp-table th { padding: 11px 16px; }
.emp-table .dt-r { text-align: right; }
.emp-group td {
  padding: 16px 16px 8px !important; background: var(--surface) !important; cursor: default;
  font: 600 12.5px/1.2 var(--font-sans); color: var(--text); border-bottom: 1px solid var(--line) !important;
}
.emp-group span { margin-left: 8px; font-weight: 400; color: var(--dim); }
.emp-row { cursor: pointer; }
.emp-row.is-left { opacity: .62; }
.emp-name-cell { display: flex; align-items: center; gap: 12px; }
.emp-avatar {
  width: 34px; height: 34px; flex-shrink: 0; border-radius: 10px; display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent); font: 600 12.5px/1 var(--font-sans);
}
.emp-name { display: block; font: 600 13.5px/1.3 var(--font-sans); color: var(--text); }
.emp-row:hover .emp-name { color: var(--accent); }
.emp-name-cell small { display: block; margin-top: 1px; font: 400 12px/1.3 var(--font-sans); color: var(--muted); }
.emp-status { white-space: nowrap; color: var(--text-2); }
.emp-dot { display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: var(--dim); vertical-align: 1px; }
.emp-dot--on { background: var(--positive); }
.emp-act { text-align: right; width: 1%; }
.emp-act .btn { opacity: 0; transition: opacity .12s; }
.emp-row:hover .emp-act .btn, .emp-act .btn:focus-visible { opacity: 1; }
.emp-empty { padding: 36px 0; text-align: center; font: 400 13.5px/1.4 var(--font-sans); color: var(--dim); }
@media (max-width: 760px) {
  .emp-table th:nth-child(3), .emp-table td:nth-child(3),
  .emp-table th:nth-child(4), .emp-table td:nth-child(4),
  .emp-table th:nth-child(5), .emp-table td:nth-child(5) { display: none; }
  .emp-act .btn { opacity: 1; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   Event Kit (office and staff share one layout)
   ═══════════════════════════════════════════════════════════════════════════ */
.ek-loading, .ek-blank { padding: 48px 0; text-align: center; font: 400 14px/1.5 var(--font-sans); color: var(--muted); }
.ek-blank { max-width: 420px; margin: 0 auto; }
.ek-layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 20px; align-items: start; }

/* Event list */
.ek-side { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 10px; max-height: calc(100vh - 110px); }
.ek-search {
  display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; border-radius: 10px;
  border: 1px solid var(--border-bright); background: var(--surface); color: var(--dim);
}
.ek-search input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; color: var(--text); font: 400 13.5px/1 var(--font-sans); }
.ek-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.ek-past { display: flex; align-items: center; gap: 8px; padding: 0 2px; font: 400 12.5px/1.3 var(--font-sans); color: var(--muted); cursor: pointer; }
.ek-past input { accent-color: var(--accent); }
.ek-list { display: flex; flex-direction: column; gap: 4px; overflow-y: auto; padding: 2px; margin: -2px; }
.ek-ev {
  display: flex; flex-direction: column; gap: 3px; width: 100%; padding: 11px 12px; text-align: left; cursor: pointer;
  border: 1px solid transparent; border-radius: 10px; background: transparent; color: var(--text); font: inherit;
  transition: background .12s, border-color .12s;
}
.ek-ev:hover { background: var(--surface-2); }
.ek-ev.active { background: var(--surface); border-color: var(--border-bright); box-shadow: 0 1px 2px rgba(15,23,42,0.06); }
[data-theme="dark"] .ek-ev.active { background: var(--surface-2); border-color: rgb(var(--accent-rgb) / 0.45); box-shadow: none; }
.ek-ev:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.ek-ev.is-past { opacity: .6; }
.ek-ev-name { font: 600 13.5px/1.3 var(--font-sans); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ek-ev-meta { font: 400 12px/1.3 var(--font-sans); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ek-ev-bar { display: block; height: 3px; margin-top: 5px; border-radius: 2px; background: var(--surface-3); overflow: hidden; }
.ek-ev-bar span { display: block; height: 100%; border-radius: 2px; background: var(--positive); transition: width .3s; }
.ek-ev-state { font: 400 11.5px/1.3 var(--font-sans); color: var(--dim); }
.ek-ev-state.is-changes { color: var(--warning); }
.ek-list-empty { padding: 20px 4px; font: 400 13px/1.4 var(--font-sans); color: var(--dim); }

/* Detail */
.ek-main { min-width: 0; }
.ek-hd { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.ek-eyebrow { margin: 0 0 4px; font: 500 12.5px/1.4 var(--font-sans); color: var(--muted); }
.ek-hd h2 { margin: 0; font: 700 22px/1.2 var(--font-sans); letter-spacing: -0.02em; color: var(--text); }
:root .ek-danger { color: var(--muted); flex-shrink: 0; }
:root .ek-danger:hover { color: var(--negative); background: var(--negative-soft); }

/* Process stepper */
.ek-steps {
  list-style: none; margin: 0 0 18px; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--border); border-radius: 14px; background: var(--surface); overflow: hidden;
}
.ek-step { position: relative; display: flex; align-items: flex-start; gap: 10px; padding: 14px 16px; border-left: 1px solid var(--line); }
.ek-step:first-child { border-left: none; }
.ek-step-n {
  width: 24px; height: 24px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center;
  border: 1.5px solid var(--border-bright); color: var(--muted); font: 600 12px/1 var(--font-sans);
}
.ek-step strong { display: block; font: 600 13px/1.3 var(--font-sans); color: var(--text); }
.ek-step small { display: block; margin-top: 2px; font: 400 12px/1.35 var(--font-sans); color: var(--muted); }
.ek-step.done .ek-step-n { background: var(--positive); border-color: var(--positive); color: #fff; }
.ek-step.warn .ek-step-n { border-color: var(--warning); color: var(--warning); }
.ek-step.warn small { color: var(--warning); }

/* Cards */
.ek-cols { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(260px, 1fr); gap: 16px; align-items: start; }
.ek-side-cards { display: flex; flex-direction: column; gap: 16px; }
.ek-card { border: 1px solid var(--border); border-radius: 14px; background: var(--surface); padding: 6px 18px 10px; }
.ek-card-hd { display: flex; flex-direction: column; gap: 2px; padding: 12px 0 10px; border-bottom: 1px solid var(--line); }
.ek-card-hd h3 { margin: 0; font: 600 14px/1.3 var(--font-sans); color: var(--text); }
.ek-card-hd span { font: 400 12.5px/1.4 var(--font-sans); color: var(--muted); }
.ek-card-hd span:empty { display: none; }

/* Material rows */
.ek-item { padding: 14px 0; border-bottom: 1px solid var(--line); }
.ek-item:last-child { border-bottom: none; }
.ek-item-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ek-item-name { font: 600 13.5px/1.3 var(--font-sans); color: var(--text); }
.ek-pill {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; white-space: nowrap;
  font: 500 12px/1.4 var(--font-sans);
}
.ek-pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ek-pill--missing { background: var(--surface-3); color: var(--dim); }
.ek-pill--pending { background: var(--accent-soft); color: var(--accent); }
.ek-pill--ok { background: var(--positive-soft); color: var(--positive); }
.ek-pill--changes { background: var(--warning-soft); color: var(--warning); }
.ek-assets { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ek-asset {
  display: inline-flex; align-items: center; max-width: 100%; padding: 4px 10px; border-radius: 8px;
  background: var(--surface-2); border: 1px solid var(--line); color: var(--text-2); text-decoration: none;
  font: 500 12.5px/1.4 var(--font-sans); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ek-asset:hover { border-color: var(--accent); color: var(--accent); }
.ek-review { margin-top: 8px; font: 400 12.5px/1.45 var(--font-sans); color: var(--muted); }
.ek-review.is-changes {
  padding: 8px 12px; border-radius: 8px; border-left: 3px solid var(--warning);
  background: var(--warning-soft); color: var(--text-2);
}
.ek-review.is-changes strong { color: var(--text); font-weight: 600; }
.ek-item-act { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; }
.ek-item-act label.btn { cursor: pointer; }
:root .ek-icon { padding-left: 9px; padding-right: 9px; color: var(--muted); }
:root .ek-icon:hover { color: var(--negative); }
:root .ek-team-pick .ek-icon:hover { color: var(--accent); }
.ek-inline { display: flex; gap: 6px; margin-top: 10px; }
.ek-inline input, .ek-inline textarea {
  flex: 1; min-width: 0; padding: 7px 10px; border-radius: 8px; border: 1px solid var(--border-bright);
  background: var(--surface); color: var(--text); font: 400 13px/1.4 var(--font-sans); outline: none; resize: vertical;
}
.ek-inline input:focus, .ek-inline textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.ek-inline--col { flex-direction: column; }
.ek-inline--col > div { display: flex; gap: 6px; }

/* Team */
.ek-team-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.ek-team-row > span, .ek-team-row > label { font: 400 13px/1.3 var(--font-sans); color: var(--muted); }
.ek-team-row > strong { font: 600 13.5px/1.3 var(--font-sans); color: var(--text); text-align: right; }
.ek-team-row > strong em { font-style: normal; font-weight: 400; color: var(--dim); }
.ek-team-row > strong small { font-weight: 400; color: var(--accent); }
.ek-team-pick { display: flex; align-items: center; gap: 4px; min-width: 0; flex: 0 1 200px; }
.ek-team-pick select {
  flex: 1; min-width: 0; height: 32px; padding: 0 8px; border-radius: 8px; border: 1px solid var(--border-bright);
  background: var(--surface); color: var(--text); font: 500 13px/1 var(--font-sans);
}
.ek-team-pick select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.ek-shared { padding: 12px 0 4px; }
.ek-shared-lbl { display: block; margin-bottom: 8px; font: 400 13px/1.3 var(--font-sans); color: var(--muted); }
.ek-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.ek-tag {
  display: inline-flex; align-items: center; gap: 4px; padding: 3px 4px 3px 10px; border-radius: 999px;
  background: var(--surface-3); color: var(--text-2); font: 500 12px/1.4 var(--font-sans);
}
.ek-tag button {
  width: 18px; height: 18px; border: none; border-radius: 50%; background: transparent; color: var(--dim);
  cursor: pointer; font-size: 10px; line-height: 1;
}
.ek-tag button:hover { background: var(--negative-soft); color: var(--negative); }
.ek-muted { font: 400 12.5px/1.4 var(--font-sans); color: var(--dim); }

/* Agendas */
.ek-agenda { padding: 12px 0; border-bottom: 1px solid var(--line); }
.ek-agenda:last-child { border-bottom: none; }
.ek-agenda-main { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.ek-agenda-lbl { width: 100%; font: 600 13px/1.3 var(--font-sans); color: var(--text); }
.ek-agenda-main small { font: 400 12px/1.3 var(--font-sans); color: var(--muted); }
.ek-agenda .ek-item-act { margin-top: 8px; }

@media (max-width: 1180px) {
  .ek-cols { grid-template-columns: 1fr; }
  .ek-side-cards { display: grid; grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .ek-layout { grid-template-columns: 1fr; }
  .ek-side { position: static; max-height: none; }
  .ek-list { max-height: 260px; }
  .ek-steps { grid-template-columns: 1fr 1fr; }
  .ek-step:nth-child(3) { border-left: none; }
  .ek-step:nth-child(n+3) { border-top: 1px solid var(--line); }
  .ek-side-cards { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .ek-hd h2 { font-size: 19px; }
  .ek-step { padding: 12px; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   My Deals (staff portal) and portal deals in the Deal Tracker
   ═══════════════════════════════════════════════════════════════════════════ */
:root .dm-row--company { grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr) 72px; }
@media (max-width: 560px) { :root .dm-row--company { grid-template-columns: 1fr 1fr; } :root .dm-row--company > :first-child { grid-column: 1 / -1; } }
.deal-new {
  display: inline-block; margin-left: 8px; padding: 1px 7px; border-radius: 999px; vertical-align: 1px;
  background: var(--accent); color: #fff; font: 600 10.5px/1.5 var(--font-sans); letter-spacing: .02em;
}

.md-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.md-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.md-tile { padding: 16px 18px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); min-width: 0; }
.md-tile span { display: block; font: 400 12.5px/1.3 var(--font-sans); color: var(--muted); }
.md-tile strong { display: block; margin-top: 6px; font: 700 21px/1.2 var(--font-sans); letter-spacing: -0.02em; color: var(--text); overflow-wrap: anywhere; }
.md-tile small { display: block; margin-top: 3px; font: 400 12px/1.3 var(--font-sans); color: var(--dim); }
.md-flow { display: flex; align-items: center; gap: 10px; margin: 0 2px 14px; font: 400 12.5px/1.3 var(--font-sans); color: var(--muted); }
.md-flow span { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.md-flow i {
  width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font: 600 10.5px/1 var(--font-sans);
  font-style: normal; background: var(--surface-3); color: var(--text-2);
}
.md-flow b { flex: 0 1 40px; height: 1px; background: var(--border-bright); }
.md-card { border: 1px solid var(--border); border-radius: 14px; background: var(--surface); overflow: hidden; }
.md-table { width: 100%; border-collapse: collapse; }
.md-table th {
  padding: 11px 16px; text-align: left; font: 500 12px/1.2 var(--font-sans); color: var(--muted);
  border-bottom: 1px solid var(--line); background: transparent;
}
.md-table td { padding: 13px 16px; border-bottom: 1px solid var(--line); vertical-align: middle; font: 400 13.5px/1.35 var(--font-sans); color: var(--text); }
.md-table tr:last-child td { border-bottom: none; }
.md-table .dt-r { text-align: right; }
.md-table td small { display: block; margin-top: 2px; font: 400 12px/1.3 var(--font-sans); color: var(--muted); }
.md-row { cursor: pointer; transition: background .12s; }
.md-row:hover { background: var(--surface-2); }
.md-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.md-row.is-locked { cursor: default; }
.md-row.is-locked:hover { background: transparent; }
.md-co { font-weight: 600; }
.md-row:not(.is-locked):hover .md-co { color: var(--accent); }
.md-evs { max-width: 280px; }
.md-more { margin-left: 4px; padding: 0 6px; border-radius: 999px; background: var(--surface-3); color: var(--muted); font-size: 11.5px; }
.md-when { white-space: nowrap; color: var(--text-2); }
.md-val { white-space: nowrap; font-weight: 600; font-variant-numeric: tabular-nums; }
.md-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; white-space: nowrap; font: 500 12px/1.4 var(--font-sans); }
.md-pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.md-pill--submitted { background: var(--accent-soft); color: var(--accent); }
.md-pill--invoiced { background: var(--warning-soft); color: var(--warning); }
.md-pill--part { background: var(--warning-soft); color: var(--warning); }
.md-pill--paid { background: var(--positive-soft); color: var(--positive); }
.md-pill--cancelled { background: var(--surface-3); color: var(--dim); }
.md-inv { font-variant-numeric: tabular-nums; }
.md-act { width: 1%; text-align: right; color: var(--dim); }
.md-edit { font: 500 12.5px/1 var(--font-sans); color: var(--muted); opacity: 0; transition: opacity .12s; }
.md-row:hover .md-edit, .md-row:focus-visible .md-edit { opacity: 1; color: var(--accent); }
.md-muted { color: var(--dim); }
.md-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 48px 20px; text-align: center; }
.md-empty strong { font: 600 15px/1.3 var(--font-sans); color: var(--text); }
.md-empty span { max-width: 380px; font: 400 13.5px/1.5 var(--font-sans); color: var(--muted); }
.md-empty .btn { margin-top: 10px; }

/* Modal */
.md-row-money { grid-template-columns: 110px minmax(0, 1fr) minmax(0, 1fr); }
.md-split { font: 400 12.5px/1.3 var(--font-sans); color: var(--muted); }
.md-ev-search input { width: 100%; }
.md-ev-list { display: flex; flex-direction: column; gap: 4px; max-height: 260px; overflow-y: auto; margin-top: 8px; }
.md-ev {
  display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; align-items: center; padding: 9px 12px;
  border: 1px solid var(--border); border-radius: 10px; cursor: pointer; transition: border-color .12s, background .12s;
}
.md-ev:hover { border-color: var(--border-bright); }
.md-ev.on { border-color: var(--accent); background: var(--accent-soft); }
.md-ev input { grid-row: span 2; accent-color: var(--accent); width: 15px; height: 15px; }
.md-ev-name { font: 500 13.5px/1.3 var(--font-sans); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.md-ev-meta { font: 400 12px/1.3 var(--font-sans); color: var(--muted); }
.md-ev-none { padding: 12px 2px; font: 400 13px/1.4 var(--font-sans); }
.md-foot-gap { flex: 1; }
:root .md-del { color: var(--negative); }
:root .md-del:hover { background: var(--negative-soft); }

@media (max-width: 900px) {
  .md-tiles { grid-template-columns: 1fr 1fr; }
  .md-table th:nth-child(2), .md-table td:nth-child(2), .md-table th:nth-child(3), .md-table td:nth-child(3) { display: none; }
}
@media (max-width: 520px) {
  .md-flow { flex-wrap: wrap; }
  .md-flow b { display: none; }
  .md-tile strong { font-size: 18px; }
  .md-table td, .md-table th { padding-left: 12px; padding-right: 12px; }
  .md-act { display: none; }
  .md-row-money { grid-template-columns: 1fr 1fr; }
  .md-row-money > :last-child { grid-column: 1 / -1; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   Quiet hover: tables get one faint row tint and nothing else. No per-cell
   fills, no fades, and coloured (paid / part-paid) rows keep their colour.
   ═══════════════════════════════════════════════════════════════════════════ */
:root tbody tr, :root .ht-cell, :root .md-row { transition: none; }
:root #hotelTable tr.hotel-row-paid:hover > td    { background: rgba(21,128,61,0.11); }
:root #hotelTable tr.hotel-row-partial:hover > td { background: rgba(180,83,9,0.10); }
[data-theme="dark"] #hotelTable tr.hotel-row-paid:hover > td    { background: rgba(76,195,138,0.14); }
[data-theme="dark"] #hotelTable tr.hotel-row-partial:hover > td { background: rgba(232,180,79,0.13); }
:root .ht-cell:hover, :root #dealsTable td.deal-cell-edit:hover { cursor: text; }

/* Event Kit: agenda → drafts → approval → final */
.ek-main-cards { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.ek-card-hd h3 { display: flex; align-items: center; gap: 8px; }
.ek-n {
  width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0;
  background: var(--surface-3); color: var(--text-2); font: 600 11px/1 var(--font-sans);
}
.ek-pill--approved { background: var(--accent-soft); color: var(--accent); }
.ek-pill--pending { background: var(--warning-soft); color: var(--warning); }
.ek-files { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.ek-files .ek-assets { margin-top: 0; }
.ek-files-lbl { width: 38px; flex-shrink: 0; font: 500 11.5px/1 var(--font-sans); color: var(--dim); }
.ek-files-lbl.is-final { color: var(--positive); font-weight: 600; }
.ek-files.is-old .ek-asset { opacity: .7; }
.ek-act-sep { width: 1px; height: 18px; margin: 0 4px; background: var(--line); }
:root .ek-quiet { color: var(--muted); }
.ek-ev-bar.is-done span { background: var(--positive); }
.ek-ev-bar span { background: var(--accent); }

/* Producer group team line (Portfolio page) */
.pf-gt {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 22px; padding: 10px 16px;
  border-bottom: 1px solid var(--border); background: var(--surface-2);
}
.pf-gt-person { display: inline-flex; align-items: baseline; gap: 7px; }
.pf-gt-role { font: 400 12px/1.3 var(--font-sans); color: var(--muted); }
.pf-gt-name { font: 600 13px/1.3 var(--font-sans); color: var(--text); }
.pf-gt-none { font: 400 12.5px/1.3 var(--font-sans); color: var(--dim); }
:root .pf-gt-edit { margin-left: auto; }
.pt-name { margin-bottom: 14px; }
.pt-name-hint { margin: 6px 0 0; min-height: 0; font: 400 12.5px/1.4 var(--font-sans); color: var(--warning); }
.pt-name-hint:empty { display: none; }
.ek-team-from { display: block; margin-top: 2px; font: 400 11.5px/1.3 var(--font-sans); color: var(--dim); }

/* My Deals modal: VAT, split switch, custom split rows */
.md-modal .dm-summary { margin-top: 12px; }
.md-split-mode { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.md-split-left { font: 500 12.5px/1.3 var(--font-sans); color: var(--muted); }
.md-split-left.is-ok { color: var(--positive); }
.md-split-left.is-off { color: var(--warning); }
.md-pkgs { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.md-pkg { padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; }
.md-pkg-name { font: 500 13px/1.3 var(--font-sans); color: var(--text); margin-bottom: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.md-pkg-fields { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 8px; }
.md-pkg-amt { position: relative; display: block; }
.md-pkg-amt span { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); font: 400 13px/1 var(--font-sans); color: var(--muted); pointer-events: none; }
:root .md-modal .md-pkg-amt input { padding-left: 26px; }
:root .md-modal .md-pkg input { min-height: 36px; padding-top: 7px; padding-bottom: 7px; font-size: 13.5px; }
.md-off { opacity: .45; pointer-events: none; }
@media (max-width: 520px) { .md-pkg-fields { grid-template-columns: 1fr; } }

/* Invoice generator: paid copy */
.ig-paid { margin: 0 0 18px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; }
.ig-paid.is-on { border-color: rgba(220,38,38,0.45); background: rgba(220,38,38,0.05); }
.ig-paid-toggle { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.ig-paid-toggle input { margin-top: 3px; width: 16px; height: 16px; accent-color: #dc2626; }
.ig-paid-toggle strong { display: block; font: 600 13.5px/1.3 var(--font-sans); color: var(--text); }
.ig-paid-toggle small { display: block; margin-top: 2px; font: 400 12.5px/1.4 var(--font-sans); color: var(--muted); }
.ig-paid-word { color: #dc2626; font-weight: 700; }
.ig-paid-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.ig-paid-fields .form-group { margin: 0; }
.ig-from { position: relative; }
.ig-paid-stamp {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  font: 700 40px/1 Calibri, Carlito, var(--font-sans); color: #ff0000; letter-spacing: .01em;
}
@media (max-width: 520px) { .ig-paid-fields { grid-template-columns: 1fr; } }

/* Hotel tracker: name cells open the edit modal */
.ht-cell.ht-open { cursor: pointer; }
.ht-cell.ht-open:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

/* Probation / onboarding on the employee panel and list */
.emp-probation { margin-left: 6px; padding: 1px 7px; border-radius: 999px; font: 600 10.5px/1.5 var(--font-sans); background: var(--warning-soft); color: var(--warning); vertical-align: 1px; }
.ep-status--wait { background: var(--warning-soft); color: var(--warning); }

/* ═══════════════════════════════════════════════════════════════════════════
   Staff portal: onboarding, payslips, time-off requests
   ═══════════════════════════════════════════════════════════════════════════ */
.ob-overlay { position: fixed; inset: 0; z-index: 3000; overflow-y: auto; -webkit-overflow-scrolling: touch;
  background: radial-gradient(1200px 520px at 50% -140px, rgb(var(--accent-rgb) / 0.20), transparent 70%), var(--bg); animation: ob-fade .25s ease both; }
body.ob-open { overflow: hidden; }
.ob-wrap { min-height: 100%; display: flex; align-items: flex-start; justify-content: center; padding: 36px 16px 60px; }
.ob-card { width: 100%; max-width: 760px; background: var(--surface); border: 1px solid var(--border); border-radius: 22px; padding: 30px 32px 28px;
  box-shadow: 0 24px 70px rgba(0,0,0,.28); animation: ob-rise .35s cubic-bezier(.2,.8,.2,1) both; }
.ob-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; margin-bottom: 18px; }
.ob-hello { display: flex; gap: 14px; align-items: flex-start; }
.ob-wave { font-size: 30px; line-height: 1; animation: ob-wave 1.8s ease-in-out .4s 1; transform-origin: 70% 70%; }
.ob-top h1 { margin: 0 0 4px; font: 700 23px/1.2 var(--font-sans); color: var(--text); letter-spacing: -0.01em; }
.ob-top p { margin: 0; font: 400 13.5px/1.5 var(--font-sans); color: var(--muted); }
.ob-top-actions { display: flex; gap: 8px; flex-shrink: 0; }

.ob-progress { height: 6px; border-radius: 99px; background: var(--surface-2); overflow: hidden; margin-bottom: 16px; }
.ob-progress-bar { height: 100%; width: 0; border-radius: 99px; background: linear-gradient(90deg, var(--accent), var(--positive)); transition: width .55s cubic-bezier(.2,.8,.2,1); }
.ob-steps { display: flex; gap: 8px; margin-bottom: 24px; }
.ob-step { flex: 1; display: flex; align-items: center; gap: 9px; padding: 9px 12px; border: 1.5px solid var(--border); border-radius: 12px; background: transparent;
  color: var(--muted); cursor: pointer; font: 600 12.5px/1.2 var(--font-sans); text-align: left; transition: border-color .2s, background .2s, color .2s, transform .15s; }
.ob-step:not(:disabled):hover { border-color: var(--border-bright); transform: translateY(-1px); }
.ob-step.is-active { border-color: var(--accent); color: var(--text); background: var(--accent-soft); }
.ob-step.is-done { color: var(--text); }
.ob-step.is-locked, .ob-step:disabled { opacity: .5; cursor: not-allowed; }
.ob-dot { flex: 0 0 26px; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid currentColor; display: inline-flex; align-items: center; justify-content: center; }
.ob-dot svg { width: 14px; height: 14px; }
.ob-step.is-done .ob-dot { background: var(--positive); border-color: var(--positive); color: #fff; }
.ob-body.ob-in { animation: ob-step .35s cubic-bezier(.2,.8,.2,1) both; }
#obBody h2 { margin: 0 0 6px; display: flex; align-items: center; gap: 10px; font: 700 18px/1.3 var(--font-sans); color: var(--text); }
#obBody h2 svg { width: 22px; height: 22px; color: var(--accent); }
.ob-help { margin: 0 0 18px; font: 400 13.5px/1.55 var(--font-sans); color: var(--muted); }

.ob-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; }
.ob-span { grid-column: 1 / -1; }
.ob-subhead { margin: 22px 0 12px; font: 700 13px/1.3 var(--font-sans); color: var(--text); }
.ob-subhead span { font-weight: 400; color: var(--muted); }
.ob-field { display: flex; flex-direction: column; gap: 6px; }
.ob-field > label { font: 600 12px/1.2 var(--font-sans); color: var(--muted); display: flex; justify-content: space-between; align-items: center; }
.ob-field small { font: 400 11.5px/1.3 var(--font-sans); color: var(--dim); }
.ob-field.has-error .form-control, .ob-field.has-error .ob-sig { border-color: var(--negative); box-shadow: 0 0 0 3px var(--negative-soft); }
.ob-err { min-height: 0; font: 500 12px/1.3 var(--font-sans); color: var(--negative); }
.ob-err:empty { display: none; }
.ob-actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; margin-top: 22px; }
.ob-primary { min-width: 180px; position: relative; }
.ob-primary.is-busy { color: transparent !important; pointer-events: none; }
.ob-primary.is-busy::after { content: ''; position: absolute; inset: 0; margin: auto; width: 16px; height: 16px; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; animation: ob-spin .7s linear infinite; }

.ob-ok { display: flex; gap: 10px; align-items: center; padding: 11px 14px; margin-bottom: 14px; border-radius: 12px; background: var(--positive-soft); color: var(--positive); font: 600 13px/1.4 var(--font-sans); }
.ob-ok svg { width: 18px; height: 18px; flex-shrink: 0; }
.ob-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
.ob-card-opt { position: relative; cursor: pointer; }
.ob-card-opt input { position: absolute; opacity: 0; }
.ob-card-opt span { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border: 1.5px solid var(--border); border-radius: 14px; color: var(--muted); font: 600 14px/1.2 var(--font-sans); transition: all .18s; }
.ob-card-opt span svg { width: 22px; height: 22px; }
.ob-card-opt:hover span { border-color: var(--border-bright); }
.ob-card-opt input:checked + span { border-color: var(--accent); background: var(--accent-soft); color: var(--text); box-shadow: 0 0 0 3px var(--accent-soft); }
.ob-card-opt input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

.ob-drop { display: block; position: relative; cursor: pointer; border: 2px dashed var(--border-bright); border-radius: 16px; background: var(--surface-2); transition: border-color .2s, background .2s, transform .2s; }
.ob-drop:hover, .ob-drop.is-over { border-color: var(--accent); background: var(--accent-soft); }
.ob-drop.is-over { transform: scale(1.01); }
.ob-drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.ob-drop-empty { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 28px 16px; text-align: center; color: var(--muted); }
.ob-drop-empty svg { width: 30px; height: 30px; color: var(--accent); margin-bottom: 4px; }
.ob-drop-empty b { font: 700 14px/1.3 var(--font-sans); color: var(--text); }
.ob-drop-empty small { font: 400 12.5px/1.4 var(--font-sans); }
.ob-drop-preview { display: none; align-items: center; gap: 14px; padding: 16px; }
.ob-drop.has-file { border-style: solid; border-color: var(--positive); background: var(--positive-soft); }
.ob-drop.has-file .ob-drop-empty { display: none; }
.ob-drop.has-file .ob-drop-preview { display: flex; }
.ob-drop-preview img { width: 64px; height: 64px; object-fit: cover; border-radius: 10px; border: 1px solid var(--border); }
.ob-drop-preview strong { display: block; font: 600 13.5px/1.3 var(--font-sans); color: var(--text); overflow-wrap: anywhere; }
.ob-drop-preview small { color: var(--muted); font: 400 12px/1.3 var(--font-sans); }
.ob-pdf-badge { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 54px; flex-shrink: 0; border-radius: 8px; background: #e5484d; color: #fff; font: 800 11px/1 var(--font-sans); letter-spacing: .04em; }

.ob-doc { border: 1.5px solid var(--border); border-radius: 16px; overflow: hidden; background: var(--surface-2); }
.ob-doc-bar { display: flex; justify-content: space-between; align-items: center; padding: 9px 14px; background: var(--surface); border-bottom: 1px solid var(--border); font: 600 12.5px/1.2 var(--font-sans); color: var(--muted); }
.ob-doc-scroll { max-height: min(62vh, 640px); overflow-y: auto; padding: 14px; -webkit-overflow-scrolling: touch; scroll-behavior: smooth; }
.ob-doc-pages { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.ob-doc-loading { padding: 60px 0; }
.ob-page { position: relative; background: #fff; box-shadow: 0 2px 14px rgba(0,0,0,.25); border-radius: 3px; }
.ob-page canvas { display: block; }
.ob-doc-fail { padding: 28px; text-align: center; color: var(--muted); font: 400 13.5px/1.6 var(--font-sans); }
.ob-nda { padding: 18px; background: var(--surface); border-radius: 10px; white-space: pre-wrap; font: 400 13px/1.7 var(--font-sans); color: var(--text); }
.ob-read { display: flex; align-items: center; gap: 12px; padding: 9px 14px; background: var(--surface); border-top: 1px solid var(--border); font: 500 12px/1.2 var(--font-sans); color: var(--muted); }
.ob-read-bar { flex: 1; height: 5px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.ob-read-bar span { display: block; height: 100%; width: 0; background: var(--accent); transition: width .15s linear; }
.ob-read.is-done { color: var(--positive); }
.ob-read.is-done .ob-read-bar span { background: var(--positive); }

.ob-fillbar { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; font: 600 12.5px/1.3 var(--font-sans); color: var(--muted); }
#obFieldCount.is-complete { color: var(--positive); }
.ob-note { padding: 11px 14px; margin-bottom: 12px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); font: 400 13px/1.55 var(--font-sans); color: var(--muted); }
#obAlt { margin-top: 14px; }
.ob-f { position: absolute; box-sizing: border-box; margin: 0; padding: 0 4px; border: 1.5px solid rgb(var(--accent-rgb) / .55); border-radius: 3px; background: rgb(var(--accent-rgb) / .13);
  color: #0b1220; font-family: Helvetica, Arial, sans-serif; outline: none; transition: background .15s, box-shadow .15s, border-color .15s; }
.ob-f:hover { background: rgb(var(--accent-rgb) / .2); }
.ob-f:focus { background: #fff; border-color: var(--accent); box-shadow: 0 0 0 3px rgb(var(--accent-rgb) / .3); z-index: 2; }
.ob-f.has-error { border-color: #e5484d; background: rgba(229,72,77,.15); }
.ob-f-checkbox, .ob-f-radio { padding: 0; accent-color: var(--accent); cursor: pointer; }
textarea.ob-f { padding: 3px 4px; resize: none; line-height: 1.25; }

.ob-sign { position: relative; margin-top: 18px; padding: 20px; border: 1.5px solid var(--border); border-radius: 16px; background: var(--surface); transition: opacity .3s, border-color .3s, box-shadow .3s; }
.ob-sign:not(.is-locked) { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); animation: ob-unlock .5s ease both; }
.ob-sign.is-locked > *:not(.ob-lockmsg) { opacity: .35; pointer-events: none; filter: grayscale(.4); }
.ob-lockmsg { display: none; align-items: center; gap: 8px; margin-bottom: 12px; font: 600 12.5px/1.3 var(--font-sans); color: var(--muted); }
.ob-sign.is-locked .ob-lockmsg { display: flex; opacity: 1 !important; filter: none !important; }
.ob-lockmsg svg { width: 16px; height: 16px; }
.ob-sign .ob-field { margin-bottom: 14px; }
.ob-sig { width: 100%; height: 150px; border: 1.5px solid var(--border-bright); border-radius: 12px; background: #fff; touch-action: none; cursor: crosshair; }
.ob-sigtools { display: flex; gap: 12px; }
.ob-link { background: none; border: none; color: var(--accent); font: 600 12px/1.2 var(--font-sans); cursor: pointer; padding: 0; text-decoration: none; }
.ob-link:hover { text-decoration: underline; }
.ob-agree { display: flex; gap: 9px; align-items: center; font: 500 13px/1.4 var(--font-sans); color: var(--text); cursor: pointer; }
.ob-agree input { width: 17px; height: 17px; accent-color: var(--accent); }

.ob-done { text-align: center; padding: 18px 0 6px; }
.ob-done h2 { justify-content: center; font-size: 21px; margin-top: 8px; }
.ob-done p { margin: 0 0 16px; color: var(--muted); font: 400 14px/1.5 var(--font-sans); }
.ob-tick { width: 84px; height: 84px; margin: 0 auto; color: var(--positive); }
.ob-tick svg { width: 100%; height: 100%; }
.ob-tick circle { stroke-dasharray: 151; stroke-dashoffset: 151; animation: ob-draw .6s ease-out .1s forwards; }
.ob-tick path { stroke-dasharray: 40; stroke-dashoffset: 40; animation: ob-draw .4s ease-out .6s forwards; }
.ob-summary { list-style: none; margin: 0 auto 16px; padding: 0; display: inline-flex; flex-direction: column; gap: 8px; text-align: left; font: 600 14px/1.3 var(--font-sans); color: var(--text); }
.ob-summary li { display: flex; align-items: center; gap: 10px; }
.ob-tick-sm { width: 22px; height: 22px; border-radius: 50%; background: var(--positive); color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.ob-tick-sm svg { width: 13px; height: 13px; }
.ob-links { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-bottom: 18px; }
.ob-spinner { display: block; width: 28px; height: 28px; margin: 0 auto; border: 3px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: ob-spin .8s linear infinite; }

.ob-banner { display: flex; align-items: center; gap: 14px; margin: 0 0 18px; padding: 12px 16px; border: 1px solid rgb(var(--accent-rgb) / .4); border-radius: 14px; background: var(--accent-soft); animation: ob-rise .4s ease both; }
.ob-banner-icon { width: 38px; height: 38px; flex-shrink: 0; border-radius: 50%; background: var(--accent); color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.ob-banner-icon svg { width: 19px; height: 19px; }
.ob-banner-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ob-banner-text b { font: 700 14px/1.3 var(--font-sans); color: var(--text); }
.ob-banner-text span { font: 400 12.5px/1.4 var(--font-sans); color: var(--muted); }
.ob-banner-x { background: none; border: none; color: var(--muted); font-size: 22px; line-height: 1; cursor: pointer; padding: 4px 6px; }
.ob-prof-bar { height: 6px; border-radius: 99px; background: var(--surface-2); overflow: hidden; margin: 10px 0 12px; }
.ob-prof-bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--positive)); }
.ob-prof-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px; font: 500 13px/1.3 var(--font-sans); color: var(--muted); }
.ob-prof-list li.is-done { color: var(--text); }
.ob-prof-list li span { display: inline-block; width: 18px; color: var(--dim); }
.ob-prof-list li.is-done span { color: var(--positive); font-weight: 800; }

/* Admin: onboarding files manager */
.obf-slot { padding: 16px; margin-bottom: 14px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface-2); }
.obf-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 10px; }
.obf-head h3 { margin: 0; font: 700 15px/1.3 var(--font-sans); color: var(--text); }
.obf-head small { color: var(--muted); font: 400 12px/1.3 var(--font-sans); }
.obf-file { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.obf-file strong { display: block; font: 600 13.5px/1.3 var(--font-sans); color: var(--text); overflow-wrap: anywhere; }
.obf-file small { color: var(--muted); font: 400 12px/1.3 var(--font-sans); }
.obf-empty { margin: 0 0 12px; font: 400 13px/1.55 var(--font-sans); color: var(--muted); }
.obf-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.obf-note { margin-top: 10px; font: 500 12.5px/1.45 var(--font-sans); color: var(--muted); }
.obf-note:empty { display: none; }
.obf-note.is-ok { color: var(--positive); }
.obf-foot { font: 400 12.5px/1.5 var(--font-sans); color: var(--muted); }

@keyframes ob-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ob-rise { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes ob-step { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }
@keyframes ob-unlock { 0% { transform: scale(.985); } 60% { transform: scale(1.008); } 100% { transform: none; } }
@keyframes ob-wave { 0%, 60%, 100% { transform: rotate(0); } 10%, 30% { transform: rotate(16deg); } 20%, 40% { transform: rotate(-10deg); } 50% { transform: rotate(8deg); } }
@keyframes ob-spin { to { transform: rotate(360deg); } }
@keyframes ob-draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .ob-overlay, .ob-card, .ob-body.ob-in, .ob-wave, .ob-banner, .ob-sign { animation: none !important; } .ob-progress-bar { transition: none; } }
@media (max-width: 640px) {
  .ob-wrap { padding: 0; }
  .ob-card { min-height: 100%; border-radius: 0; border: none; padding: 20px 16px 36px; box-shadow: none; }
  .ob-top { flex-direction: column; }
  .ob-top-actions { align-self: flex-end; margin-top: -6px; }
  .ob-top h1 { font-size: 20px; }
  .ob-grid, .ob-choice, .ob-prof-list { grid-template-columns: 1fr; }
  .ob-steplabel { display: none; }
  .ob-step { justify-content: center; padding: 8px; }
  .ob-doc-scroll { max-height: 56vh; padding: 8px; }
  .ob-actions { flex-direction: column-reverse; }
  .ob-actions .btn { width: 100%; }
  .ob-banner { flex-wrap: wrap; }
  .pd-grid { grid-template-columns: 1fr !important; }
}

.ps-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.ps-row:last-child { border-bottom: none; }
.ps-month { font: 600 14px/1.3 var(--font-sans); color: var(--text); }
.ps-sub { margin-top: 2px; font: 400 12px/1.3 var(--font-sans); color: var(--muted); }
.ps-actions { display: flex; gap: 8px; }

.emp-cal-bh { margin-top: 3px; padding: 2px 4px; max-width: 100%; border-radius: 4px; background: #f59e0b30; color: #b45309; font: 600 9px/1.3 var(--font-mono); text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hr-preview { padding: 12px 14px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border); min-height: 48px; font: 400 13px/1.5 var(--font-sans); color: var(--text); }
.hr-big { font: 700 18px/1.3 var(--font-sans); }
.hr-muted { color: var(--muted); font-size: 12.5px; }
.hr-skip { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.hr-chip { padding: 2px 8px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); font: 500 11.5px/1.5 var(--font-sans); color: var(--muted); }
.hr-chip--bh { background: #f59e0b1f; border-color: #f59e0b55; color: #b45309; }
.hr-allow { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); font: 400 12.5px/1.5 var(--font-sans); color: var(--muted); }
.hr-allow b { color: var(--text); }
.hr-neg, .hr-allow b.hr-neg { color: var(--negative); }
.hr-warn { margin-top: 8px; padding: 8px 10px; border-radius: 8px; background: var(--warning-soft); color: var(--warning); font: 500 12.5px/1.4 var(--font-sans); }
.hr-note { padding: 10px 12px; margin-bottom: 12px; border-radius: 8px; background: var(--surface-2); color: var(--muted); font: 500 12.5px/1.4 var(--font-sans); }
.hr-note--bh { background: #f59e0b1f; color: #b45309; }
.hr-req { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.hr-req:last-child { border-bottom: none; }
.hr-req.is-past { opacity: .6; }
.hr-req-main { min-width: 0; }
.hr-req-dates { font: 600 14px/1.4 var(--font-sans); color: var(--text); }
.hr-req-yr { color: var(--dim); font-weight: 500; font-size: 12px; margin-right: 4px; }
.hr-req-sub { margin-top: 3px; font: 400 12.5px/1.4 var(--font-sans); color: var(--muted); }
.hr-req-actions { display: flex; gap: 6px; flex-shrink: 0; }
.hr-cancel { color: var(--negative); }
.hr-badge { padding: 2px 8px; border-radius: 999px; font: 600 11px/1.5 var(--font-sans); background: var(--surface-2); color: var(--muted); }
.hr-badge--pending { background: var(--warning-soft); color: var(--warning); }
.hr-badge--approved { background: var(--positive-soft); color: var(--positive); }
.hr-badge--declined { background: var(--negative-soft); color: var(--negative); }
.hr-badge--mixed { background: var(--accent-soft, var(--surface-2)); color: var(--accent); }
@media (max-width: 560px) { .hr-req { flex-direction: column; align-items: flex-start; } }

/* .form-control is used by the staff portal (profile, onboarding, requests) outside a .form-group */
.form-control {
  width: 100%;
  box-sizing: border-box;
  background: var(--surface);
  color: var(--text);
  border: 1.5px solid var(--border);
  border-radius: 9px;
  padding: 9px 12px;
  font: 400 13px/1.4 var(--font-sans);
  outline: none;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.form-control:hover { border-color: var(--border-bright); }
.form-control:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.form-control::placeholder { color: var(--dim); }
textarea.form-control { resize: vertical; }
/* Date boxes have a wide intrinsic size; let them shrink inside a two-column row on phones */
#empDayOffModal .form-group { min-width: 0; }
#empDayOffModal input[type=date] { min-width: 0; width: 100%; box-sizing: border-box; }

.sc-hist-hint { margin-top: 8px; font: 400 12px/1.4 var(--font-sans); color: var(--muted); }

/* Hotel tracker summary: three cards */
.hotel-stat-cards { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 700px) { .hotel-stat-cards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .hotel-stat-cards { grid-template-columns: 1fr; } }

.pf-group-empty { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 14px 16px; margin-top: 8px; border: 1.5px dashed var(--border-bright); border-radius: 12px; color: var(--muted); font: 400 13px/1.5 var(--font-sans); }
#portStaffModal .pt-body > .form-group { margin-bottom: 14px; }

/* Profile: contract waiting for a signature vs documents already on file */
.ep-sec-note { margin: 2px 0 0; font: 400 12px/1.4 var(--font-sans); color: var(--muted); max-width: 420px; }
.ep-sec--sign { background: var(--accent-soft); }
.ep-contract-wait .ep-doc-link { font-weight: 600; }

/* Profile: personal details folded away */
.ep-pd > summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; cursor: pointer; list-style: none; }
.ep-pd > summary::-webkit-details-marker { display: none; }
.ep-pd > summary h3 { margin: 0; display: flex; align-items: center; gap: 8px; }
.ep-pd > summary h3::before { content: '›'; display: inline-block; color: var(--muted); transition: transform .2s; }
.ep-pd[open] > summary h3::before { transform: rotate(90deg); }

/* Add existing events to a team */
.pa-list { max-height: 52vh; overflow-y: auto; margin: 12px 0 4px; }
.pa-head { position: sticky; top: 0; z-index: 1; padding: 8px 0 6px; background: var(--surface); font: 700 11px/1 var(--font-sans); text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.pa-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.pa-main { flex: 1; min-width: 0; }
.pa-main strong { display: block; font: 600 13.5px/1.3 var(--font-sans); color: var(--text); }
.pa-main small { color: var(--muted); font: 400 12px/1.3 var(--font-sans); }
.pa-team { flex-shrink: 0; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 2px 8px; border-radius: 99px; background: var(--warning-soft); color: var(--warning); font: 600 11px/1.6 var(--font-sans); }

/* Warnings: admin profile and the staff member's own profile */
.ep-count:not(:empty) { display: inline-block; margin-left: 6px; padding: 2px 7px; border-radius: 10px; background: var(--warning-soft); color: var(--warning); font: 600 11px/1.3 var(--font-sans); vertical-align: middle; }
.ep-warn-form { display: flex; flex-direction: column; gap: 8px; margin: 10px 0 12px; }
.ep-warn-form.hidden { display: none; }
.ep-warn-form textarea { width: 100%; resize: vertical; }
.ep-warn-row { display: flex; gap: 8px; flex-wrap: wrap; }
.ep-warn-actions { justify-content: flex-end; }
.ep-warn .ep-warn-reason { white-space: pre-line; color: var(--text); }
.my-warnings { border-left: 3px solid var(--warning); }
.my-warnings-hd { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.my-warnings-count { padding: 3px 9px; border-radius: 10px; background: var(--warning-soft); color: var(--warning); font: 600 12px/1.3 var(--font-sans); }
.my-warning { padding: 12px 0; border-top: 1px solid var(--border); }
.my-warning-top { display: flex; justify-content: space-between; gap: 12px; font: 500 13px/1.3 var(--font-sans); color: var(--text); }
.my-warning-top span { color: var(--muted); font-size: 12px; }
.my-warning-reason { margin-top: 6px; font: 400 13px/1.5 var(--font-sans); color: var(--text); white-space: pre-line; }

.obf-empty code { font-size: 11px; padding: 1px 4px; border-radius: 4px; background: var(--surface); border: 1px solid var(--border); white-space: nowrap; }
.ob-summary .is-later { color: var(--muted); }

/* ID documents: security note (staff) and access history (admin) */
.ob-secure { margin: 0 0 14px; padding: 12px 14px; border-radius: 10px; background: var(--surface-2, var(--surface)); border: 1px solid var(--border); font-size: 0.8rem; line-height: 1.5; color: var(--muted); }
.ob-secure-hd { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; color: var(--text); font-size: 0.86rem; }
.ob-secure-hd svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--positive); }
.ob-secure ul { margin: 0; padding-left: 18px; }
.ob-secure li { margin: 4px 0; }
.ob-secure li b { color: var(--text); font-weight: 600; }
.ep-id-actions { display: inline-flex; gap: 6px; }
.ep-id-history { margin-top: 8px; font-size: 0.78rem; color: var(--muted); line-height: 1.6; }
.ep-id-history b { display: block; color: var(--text); font-weight: 600; margin-bottom: 2px; }

/* Bulk monthly pay (Salary page) */
.bp-note { font-size: 0.82rem; color: var(--muted); margin: 0 0 12px; line-height: 1.5; }
.bp-when { display: grid; grid-template-columns: 1fr 110px 2fr; gap: 10px; margin-bottom: 10px; }
.bp-when select, .bp-when input { width: 100%; }
.bp-list { max-height: 52vh; overflow-y: auto; border: 1px solid var(--border); border-radius: 10px; }
.bp-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-bottom: 1px solid var(--border); cursor: pointer; }
.bp-row:last-child { border-bottom: none; }
.bp-row.is-paid { opacity: 0.6; cursor: default; }
.bp-row .bp-check { flex-shrink: 0; width: 16px; text-align: center; color: var(--positive); }
.bp-who { flex: 1; min-width: 0; }
.bp-who b { display: block; font-weight: 600; color: var(--text); }
.bp-who small { color: var(--muted); font-size: 0.76rem; }
.bp-ded { color: var(--warning); }
.bp-amt { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); }
.bp-amt input { width: 120px; text-align: right; }
.bp-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.bp-foot > div { display: flex; gap: 8px; }
@media (max-width: 560px) { .bp-when { grid-template-columns: 1fr 1fr; } .bp-when .bp-notes { grid-column: 1 / -1; } .bp-amt input { width: 96px; } }