/* ============================================================
   Rundown — Global Styles
   ============================================================ */

@import url("tokens.css");

html { font-size: var(--base-font-size); }

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

body {
  font-family: var(--font-sans);
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: var(--base-font-size);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Utility */
.mono  { font-family: var(--font-mono); }
.eyebrow {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-4);
}

/* ============================================================
   Top Navigation Bar (all pages)
   ============================================================ */
.top-nav {
  height: 52px; display: flex; align-items: center; gap: 0;
  background: var(--nav-bg); border-bottom: 1px solid var(--line-soft);
  padding: 0 18px; flex-shrink: 0; position: sticky; top: 0; z-index: 50;
}

.top-nav-brand {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 22px;
  font-weight: 400;
  color: var(--accent);
  text-decoration: none;
  letter-spacing: -0.02em;
  margin-right: 18px;
  flex-shrink: 0;
  line-height: 1;
}
.top-nav-brand:hover { color: var(--accent-2); }

.top-nav-links {
  display: flex; align-items: center; gap: 2px; flex: 1;
}

.top-nav-link {
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--ink-3); font-size: 13px; font-weight: 500;
  text-decoration: none; padding: 7px 12px;
  border-radius: var(--r); transition: color 0.15s, background 0.15s;
}
.top-nav-link svg { opacity: 0.7; flex-shrink: 0; }
.top-nav-link:hover { color: var(--ink); background: var(--surface-3); }
.top-nav-link.active { color: var(--ink); background: var(--surface-2); }

/* Calendar secondary controls bar — v2 vocabulary: serif italic date block
   on the left (eyebrow + title, matching .nj-header / .js-header / .panel-
   header), prev/today/next pill buttons, underline-tab view switcher. */
.cal-controls {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 22px; border-bottom: 1px solid var(--line-soft);
  background: var(--bg); flex-shrink: 0;
}

.cal-date-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1;
  min-width: 220px;
  gap: 2px;
}
.cal-date-eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-4);
  line-height: 1;
  min-height: 10px; /* reserves space so layout doesn't jump while loading */
}
.cal-date-block .cal-date-label {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 20px;
  font-weight: 400;
  color: var(--ink);
  line-height: 1.15;
  min-width: 0;
  text-align: left;
  white-space: nowrap;
}

/* Location autocomplete combo */
.loc-combo-wrapper { position: relative; }
.loc-combo-wrapper input { width: 100%; }

.loc-dropdown {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0;
  background: var(--bg-tertiary); border: 1px solid var(--border);
  border-radius: var(--radius-sm); z-index: 200; max-height: 220px;
  overflow-y: auto; display: none;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.loc-dropdown.open { display: block; }

.loc-item {
  padding: 8px 12px; cursor: pointer; transition: background 0.1s;
  display: flex; flex-direction: column; gap: 1px;
}
.loc-item:hover { background: var(--bg-hover); }
.loc-item-name  { font-size: 13px; color: var(--text-primary); }
.loc-item-sub   { font-size: 11px; color: var(--text-muted); }

/* Dashboard sidebar date nav */
.sidebar-date-nav {
  display: flex; align-items: center; gap: 4px; margin-bottom: 10px;
}
.sidebar-date-nav .cal-nav-btn { flex: 1; text-align: center; }
#btn-today-day { flex: 2; }

/* ============================================================
   Editor Layout
   ============================================================ */
.editor-layout {
  display: grid;
  grid-template-columns: 240px 1fr 260px;
  height: calc(100vh - 52px);
  overflow: hidden;
}

/* Nav alerts badge */
.nav-alerts-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  background: var(--danger);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 700;
  padding: 0 5px;
  margin-left: 5px;
  vertical-align: middle;
  line-height: 1;
}

/* Alerts panel */
.alerts-panel {
  background: var(--bg-secondary);
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.alerts-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.alerts-title {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.alerts-header-count {
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  background: var(--danger);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 700;
  padding: 0 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.alerts-body {
  flex: 1;
  overflow-y: auto;
  padding: 10px 0;
}
.alerts-clear {
  font-size: 0.8125rem;
  color: var(--text-secondary);
  padding: 12px 16px;
  margin: 0;
}
.alerts-section {
  padding: 8px 0 4px;
  border-bottom: 1px solid var(--border);
}
.alerts-section:last-child { border-bottom: none; }
.alerts-section-label {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-secondary);
  padding: 0 16px 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.alerts-section-count {
  background: var(--accent);
  color: #fff;
  border-radius: 8px;
  font-size: 0.625rem;
  padding: 1px 5px;
  font-weight: 700;
}
.alerts-jobs { display: flex; flex-direction: column; }
.alerts-job-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 5px 16px;
  border-radius: 0;
}
.alerts-job-row:hover { background: var(--bg-hover, rgba(255,255,255,0.04)); }
.alerts-job-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.alerts-job-time {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-secondary);
  white-space: nowrap;
}
.alerts-job-title {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 150px;
}
.alerts-view-link {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
}
.alerts-view-link:hover { text-decoration: underline; }

/* ============================================================
   Full-page Alerts (/alerts.html)
   ============================================================ */
.alerts-page {
  max-width: 880px;
  margin: 0 auto;
  padding: 32px 24px 64px;
}
.alerts-page-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 16px;
  margin-bottom: 24px;
}
.alerts-page-title {
  font-size: 1.75rem;
  font-weight: 600;
  margin: 0;
  color: var(--text-primary);
}
.alerts-page-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text-secondary);
  font-size: 0.875rem;
}
.alerts-page-body {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.alerts-page-section {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}
.alerts-page-section-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  background: var(--bg-tertiary, transparent);
  border-bottom: 1px solid var(--border);
}
.alerts-page-section-label {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-primary);
}
.alerts-page-jobs {
  display: flex;
  flex-direction: column;
}
.alerts-page-job-row {
  display: grid;
  grid-template-columns: 140px 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  color: inherit;
  transition: background 0.1s ease;
}
.alerts-page-job-row:last-child { border-bottom: none; }
.alerts-page-job-row:hover { background: var(--bg-hover, rgba(255,255,255,0.04)); }
.alerts-page-job-time {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.8125rem;
  color: var(--text-secondary);
}
.alerts-page-job-title {
  font-size: 0.9375rem;
  color: var(--text-primary);
  font-weight: 500;
}
.alerts-page-job-view {
  font-size: 0.8125rem;
  color: var(--accent);
  font-weight: 600;
}

/* ============================================================
   Schedule page — Upcoming Jobs list (tweak 2025-05-25 #6)
   ============================================================ */
.upcoming-jobs-list {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  margin-top: 8px;
}
.upcoming-job-row {
  display: grid;
  grid-template-columns: 110px 110px 1fr auto auto 1.5fr;
  gap: 12px;
  align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  color: inherit;
  font-size: 0.875rem;
  transition: background 0.1s ease;
}
.upcoming-job-row:last-child { border-bottom: none; }
.upcoming-job-row:hover { background: var(--bg-hover, rgba(255,255,255,0.04)); }
.upcoming-col-date,
.upcoming-col-time {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.8125rem;
  color: var(--text-secondary);
  white-space: nowrap;
}
.upcoming-col-client {
  color: var(--text-primary);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.upcoming-col-type {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--bg-tertiary, var(--bg-secondary));
  border-radius: 4px;
  padding: 2px 6px;
  white-space: nowrap;
}
.upcoming-col-type:empty {
  background: transparent;
  padding: 0;
}
.upcoming-col-status {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: 2px 8px;
  white-space: nowrap;
  background: color-mix(in oklch, currentColor 12%, transparent);
}
.upcoming-col-loc {
  color: var(--text-secondary);
  font-size: 0.8125rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.upcoming-empty {
  padding: 20px 14px;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.875rem;
}
.upcoming-jobs-footer {
  margin-top: 12px;
  display: flex;
  justify-content: center;
}

/* "View all alerts" footer link inside the dropdown panel */
.alerts-view-all-footer {
  display: block;
  padding: 10px 16px;
  text-align: center;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  border-top: 1px solid var(--border);
  background: var(--bg-secondary);
}
.alerts-view-all-footer:hover {
  background: var(--bg-hover, rgba(255,255,255,0.04));
  text-decoration: underline;
}

/* Sidebar */
.sidebar {
  background: var(--bg-secondary);
  border-right: 1px solid var(--border);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.sidebar-logo {
  padding: 20px 16px 16px;
  border-bottom: 1px solid var(--border);
}

.sidebar-logo h1 {
  font-size: 18px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: -0.5px;
}

.sidebar-logo p {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}

.sidebar-section {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-light);
}

.sidebar-section-title {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: 10px;
}

#date-picker {
  width: 100%;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  padding: 7px 10px;
  font-size: 13px;
  cursor: pointer;
}
#date-picker:focus { outline: none; border-color: var(--accent); }

.filter-chips { display: flex; flex-wrap: wrap; gap: 5px; }

.filter-chip {
  padding: 3px 8px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  opacity: 0.5;
  transition: opacity 0.15s, border-color 0.15s;
  background: var(--bg-tertiary);
  color: var(--text-primary);
}
.filter-chip.active { opacity: 1; border-color: currentColor; }
.filter-chip:hover  { opacity: 0.85; }

.avail-list { display: flex; flex-direction: column; gap: 7px; }

.avail-item { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; border-radius: var(--radius-sm); padding: 2px 4px; transition: background 0.12s; }
.avail-item:hover { background: var(--bg-hover); }

.avail-avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; flex-shrink: 0; color: #fff;
}

.avail-name { flex: 1; color: var(--text-primary); font-size: 12px; }
.avail-right { display: flex; align-items: center; gap: 5px; flex-shrink: 0; }
.avail-count {
  font-size: 10px; font-weight: 700; color: var(--text-muted);
  background: var(--bg-tertiary); border: 1px solid var(--border);
  border-radius: 10px; padding: 0 5px; min-width: 16px; text-align: center;
}

.avail-badge {
  font-size: 10px; font-weight: 600;
  padding: 2px 6px; border-radius: 20px; text-transform: uppercase;
}

.avail-available { background: color-mix(in oklch, var(--s-delivered)  15%, transparent); color: var(--s-delivered); }
.avail-off       { background: color-mix(in oklch, var(--s-archived)   15%, transparent); color: var(--s-archived); }
.avail-wfh       { background: color-mix(in oklch, var(--s-assigned)   15%, transparent); color: var(--s-assigned); }
.avail-half_day  { background: color-mix(in oklch, var(--s-progress)   15%, transparent); color: var(--s-progress); }
.avail-leave     { background: color-mix(in oklch, var(--danger)        15%, transparent); color: var(--danger); }

/* ============================================================
   Main Content
   ============================================================ */
.main-content { display: flex; flex-direction: column; overflow: hidden; flex: 1; }

.main-header {
  padding: 14px 24px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  flex-shrink: 0;
  background: var(--bg-secondary);
}

.main-header-left h2  {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 22px;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.main-header-left p   { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }

.main-header-actions { display: flex; align-items: center; gap: 8px; }

/* Nav links */
.nav-link {
  color: var(--text-secondary);
  font-size: 12px;
  text-decoration: none;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  transition: color 0.15s, background 0.15s;
  display: flex; align-items: center; gap: 5px;
}
.nav-link:hover { color: var(--text-primary); background: var(--bg-hover); }
.nav-link.primary { color: var(--accent); font-weight: 600; }

/* v2 button vocabulary — single source of truth. Hierarchy:
   .btn-primary   = filled amber (the page/dialog's primary action)
   .btn-secondary = outlined surface (cancel, secondary save)
   .btn-ghost     = transparent + text-only (utility, dismiss, low-stakes)
   .btn-danger    = filled red (destructive)
   .btn-warning   = filled amber (deprecated; use .btn-primary)
   Use these classes everywhere. Page-specific button styles
   (.js-btn-*, .nav-*-btn, .cal-nav-btn) intentionally diverge only for
   surface-specific tone — they should still feel like family. */
.btn-primary {
  background: var(--accent); color: var(--accent-ink);
  border: none; border-radius: var(--r-sm);
  padding: 8px 16px; font-size: 13px; font-weight: 600;
  cursor: pointer; transition: background 0.15s, box-shadow 0.15s;
}
.btn-primary:hover { background: color-mix(in oklch, var(--accent) 88%, white); }
.btn-primary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px color-mix(in oklch, var(--accent) 50%, transparent);
}
.btn-primary:disabled { opacity: 0.4; pointer-events: none; }

.btn-secondary {
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line-soft); border-radius: var(--r-sm);
  padding: 7px 14px; font-size: 13px; font-weight: 500;
  cursor: pointer; transition: background 0.15s, border-color 0.15s;
}
.btn-secondary:hover { background: var(--surface-2); border-color: var(--line); }
.btn-secondary:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in oklch, var(--accent) 30%, transparent);
}

.btn-ghost {
  background: none; color: var(--ink-3);
  border: none; padding: 6px 10px; font-size: 13px; font-weight: 500;
  cursor: pointer; border-radius: var(--r-sm);
  transition: color 0.15s, background 0.15s;
}
.btn-ghost:hover { color: var(--ink); background: var(--surface-2); }

/* Job list */
.job-list { flex: 1; overflow-y: auto; padding: 16px 24px; display: flex; flex-direction: column; gap: 12px; align-content: flex-start; }

.job-list-empty { text-align: center; padding: 60px 20px; color: var(--text-muted); }
.job-list-empty p { font-size: 15px; margin-bottom: 8px; }

/* ============================================================
   Job Cards
   ============================================================ */
.job-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color 0.15s;
  flex-shrink: 0; /* prevent cards from squishing */
}
.job-card:hover   { border-color: var(--line); }
.job-card.expanded { border-color: var(--accent); }

.job-card-header {
  padding: 12px 16px; cursor: pointer;
  display: grid; grid-template-columns: 72px 1fr auto;
  gap: 14px; align-items: center; user-select: none;
  min-height: 72px;
}

.job-number-badge { font-size: 18px; font-weight: 700; color: var(--accent); line-height: 1; }
.job-number-badge small { display: block; font-size: 10px; font-weight: 400; color: var(--text-muted); margin-top: 1px; }

.job-card-meta { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.job-card-row1 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.job-client { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.job-card-row2 { display: flex; align-items: center; gap: 8px; color: var(--text-secondary); font-size: 12px; flex-wrap: wrap; }

.job-time     { color: var(--text-secondary); font-size: 12px; }
.job-location { color: var(--text-muted); font-size: 12px; }

.job-card-right { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0; }

.job-card-edit-btn {
  font-size: 10px; font-weight: 600; padding: 3px 9px;
  background: var(--bg-tertiary); border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text-secondary);
  cursor: pointer; transition: all 0.15s; white-space: nowrap;
}
.job-card-edit-btn:hover { background: var(--accent); color: #000; border-color: var(--accent); }

.photographer-avatar {
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: #fff; flex-shrink: 0;
}

.job-type-badge {
  display: inline-flex; align-items: center;
  padding: 2px 7px; border-radius: var(--radius-sm);
  font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.04em;
  flex-shrink: 0;
  /* background + color set inline per new palette */
}

.status-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 20px;
  font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em;
  white-space: nowrap;
}
.status-badge::before {
  content: ''; width: 5px; height: 5px; border-radius: 50%;
  background: currentColor; flex-shrink: 0;
}

.status-created        { color: var(--s-created);        background: color-mix(in oklch, var(--s-created)        14%, transparent); }
.status-assigned       { color: var(--s-assigned);       background: color-mix(in oklch, var(--s-assigned)       14%, transparent); }
.status-metadata_ready { color: var(--s-metadata_ready); background: color-mix(in oklch, var(--s-metadata_ready) 14%, transparent); }
.status-in_progress    { color: var(--s-in_progress);    background: color-mix(in oklch, var(--s-in_progress)    14%, transparent); }
.status-shot_complete  { color: var(--s-shot_complete);  background: color-mix(in oklch, var(--s-shot_complete)  14%, transparent); }
.status-in_review      { color: var(--s-in_review);      background: color-mix(in oklch, var(--s-in_review)      14%, transparent); }
.status-delivered      { color: var(--s-delivered);      background: color-mix(in oklch, var(--s-delivered)      14%, transparent); }
.status-archived       { color: var(--s-archived);       background: color-mix(in oklch, var(--s-archived)       20%, transparent); }

.job-card-body { display: none; padding: 0 20px 20px; border-top: 1px solid var(--border-light); }
.job-card.expanded .job-card-body { display: block; }

.job-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
.job-detail-item label { display: block; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-muted); margin-bottom: 3px; }
.job-detail-item p { font-size: 13px; color: var(--text-primary); line-height: 1.4; }
.job-detail-item.full-width { grid-column: 1 / -1; }

.job-keywords { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; }

.keyword-chip-display {
  background: var(--bg-tertiary); border: 1px solid var(--border);
  border-radius: 20px; padding: 2px 9px; font-size: 11px; color: var(--text-secondary);
}

.job-caption-box {
  background: var(--bg-primary); border: 1px solid var(--border-light);
  border-radius: var(--radius-sm); padding: 10px 12px;
  font-size: 12px; color: var(--text-secondary); line-height: 1.6; font-style: italic; margin-top: 4px;
}

.job-card-actions { display: flex; gap: 8px; align-items: center; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border-light); flex-wrap: wrap; }

.status-select {
  background: var(--bg-tertiary); border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text-primary);
  padding: 6px 10px; font-size: 12px; cursor: pointer;
}
.status-select:focus { outline: none; border-color: var(--accent); }

/* ============================================================
   Side Panel (Job Form)
   ============================================================ */
.side-panel-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 100; display: none;
}
.side-panel-overlay.open { display: block; }

.side-panel {
  position: fixed; top: 0; right: 0; width: 480px; height: 100vh;
  background: var(--bg-secondary); border-left: 1px solid var(--border);
  z-index: 101; display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform 0.25s ease; overflow: hidden;
}
.side-panel.open { transform: translateX(0); }

/* Full Editor header — v2 design parity with Quick Create modal (.nj-header)
   and Job Sheet drawer (.js-header): mono eyebrow + Instrument Serif italic
   title, refined spacing, soft divider. */
.panel-header {
  padding: 18px 22px 16px;
  border-bottom: 1px solid var(--line-soft, var(--border));
  flex-shrink: 0;
}
.panel-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.panel-eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-4, var(--text-muted));
  line-height: 1;
}
.panel-title,
.panel-header h3 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 400;
  font-style: italic;
  color: var(--ink, var(--text-primary));
  line-height: 1.15;
  margin-top: 4px;
}

.panel-close {
  background: none; border: none; color: var(--text-secondary);
  font-size: 18px; cursor: pointer; padding: 4px 8px;
  border-radius: var(--radius-sm); line-height: 1;
  align-self: flex-start;
}
.panel-close:hover { background: var(--bg-hover); color: var(--text-primary); }

/* Tabs row — reuses .nj-tab styling to match Quick Create modal exactly. */
.panel-tabs {
  display: flex;
  gap: 0;
  margin-top: 14px;
  margin-bottom: -17px; /* pull active underline flush with header border */
}

/* Paste-mode body for the Full Editor. Mirrors .nj-body layout but lives
   inside .side-panel and scrolls in place of the manual form. */
.panel-paste-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.panel-paste-intro {
  font-size: 13px;
  color: var(--ink-2, var(--text-secondary));
  line-height: 1.6;
}
.panel-paste-body textarea {
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  padding: 10px 12px;
  font-family: inherit;
  font-size: 13px;
}
.panel-paste-body textarea:focus { outline: none; border-color: var(--accent); }
.panel-paste-legend {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-4, var(--text-muted));
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.panel-body { flex: 1; overflow-y: auto; padding: 20px; }

.panel-footer {
  padding: 14px 20px; border-top: 1px solid var(--border);
  display: flex; gap: 8px; justify-content: flex-end; flex-shrink: 0;
}

/* Form styles */
.form-section { margin-bottom: 0; padding: 20px 0; border-bottom: 1px solid var(--border-light); }
.form-section:last-child { border-bottom: none; }

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

.form-row  { display: grid; gap: 12px; margin-bottom: 12px; }
.form-row.two-col   { grid-template-columns: 1fr 1fr; }
.form-row.three-col { grid-template-columns: 1fr 1fr 1fr; }

.form-group { display: flex; flex-direction: column; gap: 5px; }
.form-group label { font-size: 11px; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.05em; }

.form-group input,
.form-group select,
.form-group textarea {
  background: var(--bg-tertiary); border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text-primary);
  padding: 8px 10px; font-size: 13px; font-family: inherit;
  transition: border-color 0.15s;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus { outline: none; border-color: var(--accent); }

.form-group textarea { resize: vertical; min-height: 72px; line-height: 1.5; }
.form-group select option { background: var(--bg-tertiary); }

/* Keyword search */
.keyword-search-wrapper { position: relative; }
.keyword-search-wrapper input { width: 100%; }

.keyword-dropdown {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0;
  background: var(--bg-tertiary); border: 1px solid var(--border);
  border-radius: var(--radius-sm); z-index: 200; max-height: 220px;
  overflow-y: auto; display: none;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.keyword-dropdown.open { display: block; }

.kw-group-label {
  padding: 6px 12px 4px; font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-muted);
  background: var(--bg-secondary); position: sticky; top: 0;
}

.kw-item { padding: 8px 12px; font-size: 13px; cursor: pointer; color: var(--text-primary); transition: background 0.1s; }
.kw-item:hover { background: var(--bg-hover); }
.kw-item.already-added { opacity: 0.4; pointer-events: none; }

.selected-keywords { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }

.keyword-chip {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--accent-dim); border: 1px solid rgba(245,158,11,0.3);
  border-radius: 20px; padding: 3px 8px 3px 10px; font-size: 12px; color: var(--accent);
}

.keyword-chip-remove {
  background: none; border: none; color: var(--accent);
  cursor: pointer; font-size: 14px; line-height: 1; padding: 0; opacity: 0.7;
}
.keyword-chip-remove:hover { opacity: 1; }

/* ============================================================
   Photographer View  (font-sizes in rem so text-size setting works)
   ============================================================ */
.photographer-layout {
  max-width: 600px; margin: 0 auto;
}

/* Photographer week view */
.phot-week-grid {
  display: flex; flex-direction: column; padding: 12px 16px; gap: 8px;
}
.phot-week-day-section { }
.phot-week-day-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-muted); padding: 8px 0 4px; border-bottom: 1px solid var(--border-light);
  margin-bottom: 6px;
}
.phot-week-day-label.today { color: var(--accent); }
.phot-week-no-jobs { font-size: 12px; color: var(--text-muted); padding: 6px 0 10px; }

.phot-header {
  background: var(--bg-secondary); border-bottom: 1px solid var(--border);
  position: sticky; top: 52px; z-index: 40;
  padding: 10px 16px; display: flex; align-items: center; justify-content: space-between;
  gap: 12px; position: sticky; top: 52px; z-index: 10;
}

.phot-header-left h1 { font-size: 1.1rem; font-weight: 700; color: var(--accent); }
.phot-header-left p  { font-size: 0.75rem; color: var(--text-secondary); margin-top: 1px; }

.phot-header-center {
  display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1;
}

.phot-view-toggle { display: flex; gap: 2px; }
.phot-view-btn {
  font-size: 12px; padding: 3px 10px;
  background: var(--bg-tertiary); border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text-secondary); cursor: pointer;
  transition: all 0.15s;
}
.phot-view-btn.active { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 600; }
.phot-view-btn:hover:not(.active) { background: var(--bg-hover); color: var(--text-primary); }

.phot-date-nav { display: flex; gap: 4px; align-items: center; }

.phot-header-right { display: flex; align-items: center; gap: 8px; }

.connection-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-muted); display: inline-block; margin-right: 5px; }

.phot-job-list { padding: 16px; display: flex; flex-direction: column; gap: 12px; }

.phot-job-card {
  background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden;
}

.phot-card-header { padding: 16px; cursor: pointer; user-select: none; }

.phot-card-time     { font-size: 1.375rem; font-weight: 700; line-height: 1.2; }
.phot-card-client   { font-size: 1.0625rem; font-weight: 600; margin-top: 4px; }
.phot-card-row      { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.phot-card-location { font-size: 0.8125rem; color: var(--text-secondary); margin-top: 4px; }

.phot-card-body { display: none; padding: 0 16px 16px; border-top: 1px solid var(--border-light); }
.phot-job-card.expanded .phot-card-body { display: block; }

.five-ws { margin-top: 14px; display: flex; flex-direction: column; gap: 12px; }

.w-item { display: flex; gap: 12px; }

.w-label {
  font-size: 0.625rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--accent); width: 44px; flex-shrink: 0; padding-top: 2px;
}

.w-content { font-size: 0.875rem; line-height: 1.5; }
.w-content strong  { font-weight: 600; }
.w-content .secondary { color: var(--text-secondary); font-size: 0.8125rem; }

/* Photographer notes — log + compose */
.phot-notes-log {
  display: flex; flex-direction: column; gap: 8px;
  margin-top: 4px; max-height: 220px; overflow-y: auto;
}
.phot-note-item {
  background: var(--bg-secondary); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 8px 10px;
}
.phot-note-meta {
  font-size: 0.6875rem; color: var(--text-muted); margin-bottom: 3px;
}
.phot-note-text {
  font-size: 0.875rem; color: var(--text-primary); white-space: pre-wrap; word-break: break-word;
}
.phot-notes-compose { margin-top: 8px; }
.phot-notes-field {
  width: 100%;
  background: var(--bg-primary); border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text-primary);
  padding: 10px 12px; font-size: 0.875rem; font-family: inherit;
  resize: none; line-height: 1.5; box-sizing: border-box;
}
.phot-notes-field:focus { outline: none; border-color: var(--accent); }
.phot-notes-save-btn { margin-top: 8px; width: 100%; }
.phot-notes-save-btn:disabled { opacity: 0.5; pointer-events: none; }

.phot-notes-label {
  font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--text-muted); margin-top: 14px; margin-bottom: 4px;
}

/* Editor panel notes */
.panel-notes-log {
  max-height: 200px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 6px;
  margin-bottom: 4px;
}
.panel-notes-empty { font-size: 0.8125rem; color: var(--text-muted); margin: 0; }
.panel-note-item {
  background: var(--bg-secondary); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 8px 10px;
}
.panel-note-meta {
  display: flex; gap: 8px; align-items: baseline;
  font-size: 0.6875rem; margin-bottom: 3px;
}
.panel-note-author { font-weight: 600; color: var(--text-primary); }
.panel-note-time   { color: var(--text-muted); }
.panel-note-text   {
  font-size: 0.8125rem; color: var(--text-primary); white-space: pre-wrap; word-break: break-word;
}
#panel-notes-add-btn:disabled { opacity: 0.5; pointer-events: none; }

/* Audit timeline (Phase 6A) */
.panel-history-header {
  display: flex; align-items: center; gap: 6px;
}
.panel-history-count {
  font-size: 0.6875rem; font-weight: 600;
  background: var(--accent); color: #fff;
  border-radius: 10px; padding: 1px 6px; line-height: 1.4;
}
.audit-timeline {
  display: flex; flex-direction: column; gap: 0;
  padding-left: 8px;
  border-left: 2px solid var(--border);
  margin-left: 4px;
  max-height: 300px; overflow-y: auto;
}
.audit-entry {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 6px 0;
  position: relative;
}
.audit-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0; margin-top: 4px;
  margin-left: -13px;
}
.audit-content { flex: 1; min-width: 0; }
.audit-desc {
  font-size: 0.8125rem; color: var(--text-primary); line-height: 1.4;
}
.audit-desc .audit-val {
  font-weight: 600; color: var(--text-primary);
}
.audit-meta {
  font-size: 0.6875rem; color: var(--text-muted); margin-top: 2px;
}

.phot-actions { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }

.btn-action {
  flex: 1; min-width: 100px; padding: 11px 16px;
  border-radius: var(--radius-sm); font-size: 0.8125rem; font-weight: 600;
  cursor: pointer; border: none; transition: opacity 0.15s; text-align: center;
}
.btn-action:disabled { opacity: 0.35; pointer-events: none; }

.btn-start    { background: var(--accent); color: var(--accent-ink); }
.btn-complete { background: var(--s-shot_complete); color: #fff; }
.btn-meta     { background: var(--bg-tertiary); color: var(--text-primary); border: 1px solid var(--border); }
.btn-back     { background: var(--bg-tertiary); color: var(--text-secondary); border: 1px solid var(--border); font-size: 0.75rem; }

/* Metadata view panel */
.phot-metadata-panel {
  margin-top: 12px;
  background: var(--bg-primary); border: 1px solid var(--border-light);
  border-radius: var(--radius-sm); padding: 12px; display: none;
}
.phot-metadata-panel.open { display: block; }

.meta-panel-section { margin-bottom: 12px; }
.meta-panel-section:last-child { margin-bottom: 0; }

.meta-panel-label {
  font-size: 0.625rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.07em; color: var(--text-muted); margin-bottom: 6px;
}

.meta-caption-text { font-size: 0.8125rem; color: var(--text-secondary); line-height: 1.6; font-style: italic; }

.meta-var-pill {
  display: inline-block;
  background: color-mix(in oklch, var(--s-meta) 15%, transparent);
  border: 1px solid color-mix(in oklch, var(--s-meta) 30%, transparent);
  border-radius: 3px;
  padding: 0 5px; font-size: 0.6875rem; color: var(--s-meta); font-style: normal;
}

.meta-keywords { display: flex; flex-wrap: wrap; gap: 5px; }
.meta-keyword-chip {
  background: var(--bg-tertiary); border: 1px solid var(--border);
  border-radius: 20px; padding: 2px 9px; font-size: 0.6875rem; color: var(--text-secondary);
}

/* ---- Photographer status redesign ---- */
.phot-status-wrap { margin-top: 14px; }

.btn-start-full {
  width: 100%; padding: 14px; background: var(--accent); color: var(--accent-ink);
  border: none; border-radius: var(--radius-sm);
  font-size: 1rem; font-weight: 700; cursor: pointer; transition: background 0.15s;
}
.btn-start-full:hover { background: color-mix(in oklch, var(--accent) 88%, white); }

.phot-shooting-row {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  background: color-mix(in oklch, var(--s-progress) 10%, transparent);
  border: 1px solid color-mix(in oklch, var(--s-progress) 25%, transparent);
  border-radius: var(--radius-sm); margin-bottom: 8px;
}

.shoot-pulse-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--s-in_progress); flex-shrink: 0;
  animation: shootPulse 1.4s ease-in-out infinite;
}

@keyframes shootPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.35; transform: scale(0.65); }
}

.shoot-time-label { font-size: 0.8125rem; font-weight: 600; color: var(--s-in_progress); flex: 1; }

.btn-complete-full {
  width: 100%; padding: 12px; background: var(--s-shot_complete); color: #fff;
  border: none; border-radius: var(--radius-sm);
  font-size: 0.9375rem; font-weight: 700; cursor: pointer; transition: filter 0.15s;
}
.btn-complete-full:hover { filter: brightness(1.1); }

.phot-complete-indicator {
  display: flex; align-items: center; gap: 8px; padding: 10px 12px;
  background: color-mix(in oklch, var(--s-shot) 10%, transparent);
  border: 1px solid color-mix(in oklch, var(--s-shot) 25%, transparent);
  border-radius: var(--radius-sm);
  font-size: 0.8125rem; font-weight: 600; color: var(--s-shot_complete); margin-bottom: 8px;
}

.phot-text-link {
  background: none; border: none; padding: 0;
  font-size: 0.75rem; color: var(--text-muted); cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px; transition: color 0.15s;
}
.phot-text-link:hover { color: var(--text-secondary); }

.phot-inline-confirm {
  display: none; margin-top: 8px; padding: 10px 12px;
  background: color-mix(in oklch, var(--s-review) 10%, transparent);
  border: 1px solid color-mix(in oklch, var(--s-review) 30%, transparent);
  border-radius: var(--radius-sm); align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 0.75rem; color: var(--text-primary);
}
.phot-inline-confirm.open { display: flex; }
.phot-inline-confirm span { flex: 1; }

.phot-readonly-badge {
  display: inline-flex; align-items: center; padding: 8px 12px;
  background: var(--bg-tertiary); border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

/* User select screen */
.phot-user-select-screen { padding: 40px 20px; text-align: center; }
.phot-user-select-screen h2 { font-size: 1.375rem; font-weight: 700; color: var(--accent); margin-bottom: 8px; }
.phot-user-select-screen p  { color: var(--text-secondary); margin-bottom: 24px; }

.user-card-list { display: flex; flex-direction: column; gap: 10px; max-width: 280px; margin: 0 auto; }

.user-select-card {
  background: var(--bg-secondary); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px 16px;
  display: flex; align-items: center; gap: 12px;
  cursor: pointer; text-decoration: none; color: var(--text-primary);
  transition: border-color 0.15s;
}
.user-select-card:hover { border-color: var(--accent); }

.user-select-name { font-size: 0.9375rem; font-weight: 600; }
.user-select-code { font-size: 0.75rem; color: var(--text-secondary); margin-top: 1px; }

/* ============================================================
   Calendar Page
   ============================================================ */
.cal-page {
  display: flex; flex-direction: column; height: 100vh; overflow: hidden;
  background: var(--bg-primary);
}

/* Calendar nav bar */
.cal-nav {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 16px; border-bottom: 1px solid var(--border);
  background: var(--bg-secondary); flex-shrink: 0; flex-wrap: wrap;
}

.cal-nav-brand { font-size: 16px; font-weight: 700; color: var(--accent); margin-right: 4px; }

.cal-nav-sep { color: var(--border); margin: 0 4px; }

/* v2 view switcher — underline pattern matching .nj-tabs / .panel-tabs */
.view-toggle {
  display: flex;
  gap: 0;
  align-self: stretch;
  align-items: stretch;
  border-bottom: 0;
}
.view-btn {
  padding: 8px 16px;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--ink-3);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: color 0.12s, border-color 0.12s;
  white-space: nowrap;
}
.view-btn:hover  { color: var(--ink); }
.view-btn.active {
  color: var(--ink);
  border-bottom-color: var(--accent);
  background: transparent;
}

.cal-date-nav { display: flex; align-items: center; gap: 4px; }

/* v2 pill nav buttons — soft surface, accent on hover */
.cal-nav-btn {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  color: var(--ink-2);
  border-radius: var(--r-sm);
  padding: 5px 12px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.cal-nav-btn:hover {
  background: var(--surface-2);
  color: var(--ink);
  border-color: var(--line);
}

/* Date label baseline — overridden by .cal-date-block .cal-date-label above
   (serif italic) when used inside the v2 header block. Kept for any other
   reference. */
.cal-date-label {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 20px;
  font-weight: 400;
  color: var(--ink);
  line-height: 1.15;
  white-space: nowrap;
}

.cal-nav-spacer { flex: 1; }

/* Calendar main: sidebar + scrollable body */
.cal-main {
  flex: 1; display: flex; overflow: hidden; min-height: 0;
}

/* Calendar scroll container — min-width:0 lets flex shrink so overflow-x kicks in */
.cal-body {
  flex: 1; overflow: auto; position: relative; min-width: 0;
}

/* ---- Day View ---- */
.cal-inner {
  /* min-width set inline by JS */
  display: flex; flex-direction: column;
}

.cal-time-header {
  display: flex; position: sticky; top: 0; z-index: 20;
  background: var(--bg-secondary); border-bottom: 2px solid var(--border);
}

.cal-corner {
  flex-shrink: 0; position: sticky; left: 0; z-index: 21;
  background: var(--bg-secondary); border-right: 1px solid var(--border);
  border-bottom: 2px solid var(--border);
}

.cal-hour-label {
  flex-shrink: 0; padding: 8px 0 6px 8px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  color: var(--ink-4);
  letter-spacing: 0.02em;
  border-right: 1px solid var(--line-soft);
  white-space: nowrap;
}

.cal-day-row {
  display: flex; min-height: 68px; border-bottom: 1px solid var(--border-light);
}
.cal-day-row:last-child { border-bottom: none; }

/* Availability tinting on rows */
.avail-row-off,
.avail-row-leave {
  background: repeating-linear-gradient(
    -45deg,
    transparent, transparent 8px,
    color-mix(in oklch, var(--danger) 4%, transparent) 8px,
    color-mix(in oklch, var(--danger) 4%, transparent) 10px
  );
}
.avail-row-wfh {
  background: color-mix(in oklch, var(--s-assigned) 4%, transparent);
}
.avail-row-half_day {
  background: color-mix(in oklch, var(--s-progress) 4%, transparent);
}

.cal-row-label {
  flex-shrink: 0; position: sticky; left: 0; z-index: 9;
  background: var(--bg-secondary); border-right: 1px solid var(--border);
  display: flex; align-items: center;
}

.cal-row-label-inner {
  padding: 8px 10px; display: flex; align-items: center; gap: 8px; width: 100%;
}

.cal-row-avatar {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; color: #fff;
}

.cal-row-name {
  font-size: 12px; font-weight: 600; color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.cal-avail-suffix {
  font-size: 10px; font-weight: 600; color: var(--text-muted);
  display: block; margin-top: 1px;
}

.cal-row-body {
  flex-shrink: 0; position: relative;
  cursor: crosshair;
}

/* Gridlines */
.cal-hour-line {
  position: absolute; top: 0; bottom: 0; width: 1px;
  background: var(--border-light); pointer-events: none;
}
.cal-half-line {
  position: absolute; top: 0; bottom: 0; width: 1px;
  background: var(--border-light); opacity: 0.4;
  border-left: 1px dashed var(--border-light); pointer-events: none;
}

.cal-grid-15min {
  position: absolute; top: 0; bottom: 0; width: 0;
  border-left: 1px dotted var(--border-light);
  pointer-events: none; z-index: 0; opacity: 0.5;
}

.cal-grid-30min {
  position: absolute; top: 0; bottom: 0; width: 0;
  border-left: 1px dashed var(--border);
  pointer-events: none; z-index: 0; opacity: 0.4;
}

/* Job block — pastel background + left-border accent (Google Calendar pattern) */
.cal-job-block {
  position: absolute; top: 5px; bottom: 5px;
  border-radius: var(--r-sm); padding: 3px 6px 3px 7px;
  overflow: hidden; cursor: grab;
  border-left: 3px solid transparent; /* color set inline by JS */
  transition: box-shadow 0.12s, transform 0.12s;
  display: flex; flex-direction: column; justify-content: flex-start;
  min-width: 4px;
  /* background + color set inline by JS */
}
/* v2 hover — soft lift to match dashboard chips. Old style used scaleY(1.02)
   which warped the block vertically; soft shadow + translateY reads cleaner
   and matches .job-chip / .unassigned-chip hover. */
.cal-job-block:hover {
  z-index: 5;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  transform: translateY(-1px);
}
.cal-job-block.dragging {
  opacity: 0.95;
  box-shadow: 0 8px 28px rgba(0,0,0,0.45);
  border-left-width: 6px !important;
  transform: scale(1.03) !important;
  z-index: 999;
  pointer-events: none;
  cursor: grabbing !important;
  transition: none !important;
}
.cal-job-block.resizing {
  opacity: 0.9;
  z-index: 100;
  transition: none !important;
  cursor: col-resize !important;
}

/* Resize handle strip on right edge of block */
.cal-resize-handle {
  position: absolute; right: 0; top: 0; bottom: 0;
  width: 6px; cursor: col-resize; z-index: 2;
  border-radius: 0 3px 3px 0;
  transition: background 0.15s;
}
.cal-job-block:hover .cal-resize-handle {
  background: rgba(255,255,255,0.18);
}
.cal-job-block.resizing .cal-resize-handle {
  background: rgba(255,255,255,0.3);
}

/* Ghost placeholder at original position during move drag */
.cal-job-ghost {
  position: absolute; top: 5px; bottom: 5px;
  border: 2px dashed; background: transparent !important;
  opacity: 0.45; pointer-events: none;
  border-radius: var(--radius-sm); z-index: 1;
}

/* Target row highlight during drag-over */
.cal-day-row.drag-target .cal-row-body {
  background: color-mix(in oklch, var(--accent) 7%, transparent);
}
html.light .cal-day-row.drag-target .cal-row-body {
  background: color-mix(in oklch, var(--accent) 6%, transparent);
}

/* Vertical snap guide line */
.drag-time-guide {
  position: absolute; top: 0; bottom: 0; width: 2px;
  background: var(--accent);
  pointer-events: none; z-index: 50;
  box-shadow: 0 0 6px var(--accent);
}
.drag-time-guide::before {
  content: attr(data-time);
  position: absolute; top: 2px; left: 5px;
  background: var(--accent); color: var(--accent-ink);
  font-size: 0.625rem; font-weight: 700;
  padding: 2px 5px; border-radius: 3px;
  white-space: nowrap; line-height: 1.4;
}

/* Floating time tooltip during resize */
.resize-time-tooltip {
  position: fixed;
  background: var(--bg-tertiary); color: var(--text-primary);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 3px 8px; font-size: 0.6875rem; font-weight: 600;
  pointer-events: none; z-index: 1001; white-space: nowrap;
  box-shadow: var(--shadow);
}

/* Floating time tooltip during drag (move) — repositioned above drop indicator */
.drag-time-tooltip {
  position: fixed;
  background: var(--accent); color: var(--accent-ink);
  border-radius: var(--radius-sm);
  padding: 3px 8px; font-size: 0.6875rem; font-weight: 700;
  pointer-events: none; z-index: 1002; white-space: nowrap;
  box-shadow: 0 2px 8px color-mix(in oklch, var(--accent) 40%, transparent);
}

/* Drop indicator — accent vertical line in target row showing exact drop position */
.drop-indicator {
  position: absolute; top: 0; bottom: 0; width: 3px;
  background: var(--accent);
  border-radius: 2px;
  pointer-events: none; z-index: 200;
  box-shadow: 0 0 0 1px color-mix(in oklch, var(--accent) 25%, transparent),
              0 0 8px color-mix(in oklch, var(--accent) 30%, transparent);
}
/* Diamond head at top of the line */
.drop-indicator::before {
  content: '';
  position: absolute; top: -4px; left: 50%; transform: translateX(-50%);
  width: 11px; height: 11px;
  background: var(--accent);
  border-radius: 2px;
  rotate: 45deg;
}
/* Time label sits just above the line via the span.drop-indicator-label child */
.drop-indicator-label {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%; transform: translateX(-50%);
  background: var(--accent); color: var(--accent-ink);
  font-size: 0.625rem; font-weight: 700;
  padding: 2px 6px; border-radius: 3px;
  white-space: nowrap; pointer-events: none;
}

.block-num   { font-size: 0.6875rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.block-client{ font-size: 0.625rem; opacity: 0.85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.block-room  { font-size: 0.625rem; opacity: 0.65; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Current time indicator — amber accent, matches dashboard NOW treatment.
   First indicator on the page also renders a "NOW · 11a" mono label. */
.cal-time-indicator {
  position: absolute; top: 0; bottom: 0; width: 1px;
  background: var(--accent);
  opacity: 0.85;
  box-shadow: 0 0 6px color-mix(in oklch, var(--accent) 40%, transparent);
  pointer-events: none; z-index: 8;
}
.cal-time-indicator.with-label::before {
  content: attr(data-now);
  position: absolute; top: -16px; left: 50%; transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  white-space: nowrap;
  padding: 0 6px;
  background: var(--surface);
  border-radius: var(--r-sm);
}

/* ---- Week View ---- */
.cal-week-grid { display: flex; flex-direction: column; min-width: 100%; }

.cal-week-header {
  display: flex; position: sticky; top: 0; z-index: 20;
  background: var(--bg-secondary); border-bottom: 2px solid var(--border);
}

.cal-week-day-header {
  flex: 1 1 0%; min-width: 0; padding: 10px 4px; text-align: center;
  border-right: 1px solid var(--border-light); cursor: pointer;
  transition: background 0.12s; overflow: hidden;
}
.cal-week-day-header:hover { background: var(--bg-hover); }
.cal-week-day-header.today { color: var(--accent); }
.cal-week-day-header.week-col-alt { background: rgba(255,255,255,0.025); }
html.light .cal-week-day-header.week-col-alt { background: rgba(0,0,0,0.025); }

.week-day-name { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.week-day-date { font-size: 11px; color: var(--text-muted); margin-top: 2px; }

.cal-week-row {
  display: flex; border-bottom: 1px solid var(--border-light); min-height: 80px;
}
.cal-week-row:last-child { border-bottom: none; }

.cal-week-cell {
  flex: 1 1 0%; min-width: 0; padding: 4px; border-right: 1px solid var(--border-light);
  min-height: 80px; cursor: pointer; transition: background 0.1s;
  display: flex; flex-direction: column; gap: 3px; overflow: hidden;
}
.cal-week-cell:hover { background: var(--bg-hover); }
.cal-week-cell.today-cell { background: color-mix(in oklch, var(--accent) 5%, transparent); }
.cal-week-cell.week-col-alt { background: rgba(255,255,255,0.025); }
.cal-week-cell.week-col-alt.today-cell { background: color-mix(in oklch, var(--accent) 7%, transparent); }
html.light .cal-week-cell.week-col-alt { background: rgba(0,0,0,0.025); }

/* Week-view job bar — v2 typography parity with dashboard .job-chip:
   mono time, sans client (--ink), 3px left border for status accent. */
.cal-week-bar {
  display: flex; align-items: center; gap: 4px; padding: 2px 5px 2px 7px;
  border-radius: var(--r-sm); cursor: pointer;
  transition: box-shadow 0.12s, transform 0.12s;
  font-size: 11px;
  overflow: hidden; min-width: 0; flex-shrink: 0; width: 100%;
  border-left: 3px solid transparent; /* color set inline */
}
.cal-week-bar:hover {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
  transform: translateY(-1px);
  z-index: 2; position: relative;
}

.week-bar-time {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-2);
  font-weight: 500;
  white-space: nowrap;
  flex-shrink: 0;
}
.week-bar-num {
  color: var(--ink);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

/* Calendar block bars in week view */
.cal-week-block-bar {
  display: flex; align-items: center; gap: 3px; padding: 2px 4px 2px 6px;
  border-radius: var(--radius-sm); font-size: 0.625rem; overflow: hidden;
  min-width: 0; flex-shrink: 0; width: 100%; border-left: 3px solid transparent;
  /* Subtle diagonal stripe pattern using the block's color */
  background: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 3px,
    color-mix(in srgb, var(--week-block-color, #6b7280) 18%, transparent) 3px,
    color-mix(in srgb, var(--week-block-color, #6b7280) 18%, transparent) 6px
  );
  color: var(--text-muted);
  cursor: default;
  order: -1; /* render before job bars */
}
.cal-week-block-bar:hover { opacity: 0.9; }

/* Week view: job bar hover tooltip */
.week-bar-tooltip {
  display: none;
  position: fixed;
  z-index: 600;
  background: var(--bg-elevated, var(--bg-secondary));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg, 0 8px 24px rgba(0,0,0,0.35));
  padding: 8px 10px;
  min-width: 180px;
  max-width: 260px;
  pointer-events: none;
  color: var(--text-primary);
}
.wbt-title {
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 5px;
  color: var(--text-primary);
}
.wbt-row {
  display: flex;
  gap: 6px;
  align-items: baseline;
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.6;
}
.wbt-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  min-width: 36px;
  flex-shrink: 0;
}

/* Weekend column tint in week view */
.cal-week-cell.weekend-col { background: rgba(255,255,255,0.015); }
html.light .cal-week-cell.weekend-col { background: rgba(0,0,0,0.03); }
.cal-week-day-header.weekend-col { background: rgba(255,255,255,0.015); }
html.light .cal-week-day-header.weekend-col { background: rgba(0,0,0,0.03); }

/* ---- Month View ---- */
/*
 * Month grid — single 7-column grid containing BOTH the header cells and
 * the day cells. .cal-month-header and .cal-month-weeks use display:contents
 * so their children participate directly in this grid, guaranteeing pixel-
 * perfect column alignment regardless of scrollbars or borders.
 */
.cal-month-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  align-content: start;
  min-height: 100%;
  border-top: 1px solid var(--border);
}

/* Wrappers disappear from layout — their children join the parent grid */
.cal-month-header { display: contents; }
.cal-month-weeks  { display: contents; }

/* Day-of-week header cells — sticky per-cell so they work inside display:contents */
.cal-month-dow {
  position: sticky; top: 0; z-index: 20;
  padding: 8px; text-align: center;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--text-muted);
  background: var(--bg-secondary);
  border-bottom: 2px solid var(--border);
  border-right: 1px solid var(--border-light);
}
.cal-month-dow:last-child { border-right: none; }

/* Day cells */
.cal-month-cell {
  border-right: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
  padding: 8px; min-height: 110px;
  cursor: pointer; transition: background 0.1s;
  /* workday base — slightly elevated so weekends read darker by contrast */
  background: rgba(255,255,255,0.045);
  min-width: 0; /* allow grid cell to shrink below content width */
}
.cal-month-cell:last-child { border-right: none; }
.cal-month-cell:hover { background: var(--bg-hover); }
.cal-month-cell.other-month { opacity: 0.35; }
.cal-month-cell.today-cell  { background: color-mix(in oklch, var(--accent) 7%, transparent); }

/* Weekends — noticeably darker / recessed vs workdays */
.cal-month-cell.weekend { background: transparent; }
.cal-month-dow.weekend  { color: var(--text-secondary); background: var(--bg-primary); }

/* Light mode overrides */
html.light .cal-month-cell         { background: var(--surface); }
html.light .cal-month-cell.weekend { background: var(--surface-2); }
html.light .cal-month-cell.today-cell { background: color-mix(in oklch, var(--accent) 7%, transparent); }
html.light .cal-month-dow          { background: var(--surface-2); }
html.light .cal-month-dow.weekend  { background: var(--surface-3); }

.month-cell-date {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-3);
  letter-spacing: 0.02em;
  margin-bottom: 6px;
  line-height: 1;
}
.today-cell .month-cell-date {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; background: var(--accent); color: var(--accent-ink);
  border-radius: 50%; font-size: 12px;
}

.month-cell-count { font-size: 11px; color: var(--text-secondary); margin-bottom: 4px; }
.month-cell-dots  { display: flex; flex-wrap: wrap; gap: 3px; margin-bottom: 4px; }
.month-dot        { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.month-dot-more   { font-size: 10px; color: var(--text-muted); align-self: center; }

.month-avail-summary { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 2px; }
.month-avail-pip {
  font-size: 10px; padding: 1px 5px; border-radius: 3px; font-weight: 600;
}
.month-avail-pip.off  { background: color-mix(in oklch, var(--s-archived)  15%, transparent); color: var(--s-archived); }
.month-avail-pip.wfh  { background: color-mix(in oklch, var(--s-assigned)  15%, transparent); color: var(--s-assigned); }
.month-avail-pip.half { background: color-mix(in oklch, var(--s-progress)  15%, transparent); color: var(--s-progress); }

/* Month-view event bar — v2 typography matches week + dashboard chips. */
.month-event-bar {
  display: flex; align-items: center; gap: 4px;
  font-size: 11px; padding: 2px 6px;
  border-radius: var(--r-sm);
  margin-bottom: 2px; cursor: pointer; overflow: hidden;
  white-space: nowrap; line-height: 1.4;
  min-width: 0;
  border-left: 3px solid transparent; /* color set inline */
  transition: box-shadow 0.12s, transform 0.12s;
}
.month-event-bar:hover {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
  transform: translateY(-1px);
  z-index: 2; position: relative;
}
.month-event-time {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-3);
  font-weight: 500;
  flex-shrink: 0;
}
.month-event-title {
  overflow: hidden; text-overflow: ellipsis;
  font-weight: 500;
  color: var(--ink);
}
.month-event-more {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: 2px 6px;
  cursor: pointer;
  margin-top: 1px;
  transition: color 0.12s, background 0.12s;
  border-radius: var(--r-sm);
}
.month-event-more:hover {
  color: var(--ink);
  background: var(--surface-2);
}

/* Week view: per-column availability pips under day header */
.week-avail-pips { display: flex; gap: 3px; flex-wrap: wrap; justify-content: center; padding-top: 3px; }
.week-avail-pip  { font-size: 9px; padding: 1px 4px; border-radius: 3px; font-weight: 600; }
.week-avail-pip.off  { background: color-mix(in oklch, var(--s-archived)  15%, transparent); color: var(--s-archived); }
.week-avail-pip.wfh  { background: color-mix(in oklch, var(--s-assigned)  15%, transparent); color: var(--s-assigned); }
.week-avail-pip.half { background: color-mix(in oklch, var(--s-progress)  15%, transparent); color: var(--s-progress); }

/* ============================================================
   Job Popover
   ============================================================ */
.job-popover {
  position: fixed; z-index: 500;
  width: 320px; background: var(--bg-secondary);
  border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: 0 12px 40px rgba(0,0,0,0.5);
  animation: popoverIn 0.15s ease;
}

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

.popover-header {
  padding: 14px 16px 12px; border-bottom: 1px solid var(--border-light);
  display: flex; justify-content: space-between; align-items: flex-start;
}

.popover-job-num { font-size: 16px; font-weight: 700; color: var(--accent); margin-right: 6px; }
.popover-client  { font-size: 13px; color: var(--text-primary); font-weight: 600; margin-top: 4px; }

.popover-body { padding: 12px 16px; display: flex; flex-direction: column; gap: 10px; }

.pop-field { display: flex; flex-direction: column; gap: 4px; }

.pop-field label {
  font-size: 10px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--text-muted);
}

.pop-field input,
.pop-field select {
  width: 100%;
  background: var(--bg-tertiary); border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text-primary);
  padding: 6px 9px; font-size: 13px; font-family: inherit;
}
.pop-field input:focus,
.pop-field select:focus { outline: none; border-color: var(--accent); }

.pop-row { display: grid; gap: 8px; }
.pop-row.two-col { grid-template-columns: 1fr 1fr; }
.pop-row-2col { grid-template-columns: 1fr 1fr; display: grid; gap: 8px; }

.pop-duration {
  font-size: 0.8125rem; color: var(--text-secondary); font-weight: 500;
  padding: 6px 0; display: block;
}
.pop-divider { border: none; border-top: 1px solid var(--border); margin: 4px 0; }
.pop-location-text { font-size: 0.8125rem; color: var(--text-muted); }

.pop-location { font-size: 12px; color: var(--text-muted); padding: 0 16px 4px; }

.popover-footer {
  padding: 8px 12px 12px;
  border-top: 1px solid var(--border-light);
  display: flex;
  gap: 8px;
  align-items: center;
}
.popover-footer .btn-ghost { font-size: 11px; }

/* Job detail popover uses a two-row footer — override the single-row default */
.job-popover:not(.block-popover) .popover-footer {
  padding: 0;
  border-top: none;
  display: block;
}

/* Quick Create Modal */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 300;
  display: flex; align-items: center; justify-content: center;
  animation: fadeIn 0.15s ease;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.modal-box {
  background: var(--bg-secondary); border: 1px solid var(--border);
  border-radius: var(--radius); width: 400px; max-width: 92vw;
  box-shadow: 0 16px 48px rgba(0,0,0,0.5);
}

.modal-header {
  padding: 16px 20px; border-bottom: 1px solid var(--border);
  display: flex; justify-content: space-between; align-items: center;
}
.modal-header h3 { font-size: 15px; font-weight: 600; }

.modal-body   { padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.modal-footer { padding: 14px 20px; border-top: 1px solid var(--border); display: flex; gap: 8px; justify-content: flex-end; }

/* ============================================================
   Settings Panel (2C)
   ============================================================ */
.settings-gear-btn {
  background: none; border: none; color: var(--text-muted);
  cursor: pointer; padding: 6px; border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  transition: color 0.15s, background 0.15s;
}
.settings-gear-btn:hover { color: var(--text-primary); background: var(--bg-hover); }

.settings-overlay {
  position: fixed; inset: 0; z-index: 600; display: none;
  background: rgba(0,0,0,0.4);
}
.settings-overlay.open { display: block; }

.settings-panel {
  position: absolute; top: 0; right: 0; width: 280px; height: 100vh;
  background: var(--bg-secondary); border-left: 1px solid var(--border);
  display: flex; flex-direction: column;
  box-shadow: -8px 0 24px rgba(0,0,0,0.3);
}

.settings-header {
  padding: 16px 20px; border-bottom: 1px solid var(--border);
  display: flex; justify-content: space-between; align-items: center;
}
.settings-header h3 { font-size: 15px; font-weight: 600; }

.settings-body { flex: 1; overflow-y: auto; padding: 16px 20px; }

.settings-section { margin-bottom: 24px; }

.settings-section-title {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--text-muted); margin-bottom: 12px;
  padding-bottom: 6px; border-bottom: 1px solid var(--border-light);
}

.settings-row {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-bottom: 10px;
}

.settings-label { font-size: 13px; color: var(--text-primary); }

.theme-toggle { display: flex; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }

.theme-btn {
  padding: 5px 14px; background: none; border: none;
  color: var(--text-secondary); font-size: 12px; cursor: pointer; transition: background 0.12s;
}
.theme-btn.active { background: var(--accent); color: #000; font-weight: 700; }

.font-size-control { display: flex; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }

.font-btn {
  padding: 5px 14px; background: none; border: none;
  color: var(--text-secondary); font-size: 12px; cursor: pointer; transition: background 0.12s;
}
.font-btn.active { background: var(--accent); color: #000; font-weight: 700; }

.font-size-preview { font-size: 18px; color: var(--text-muted); }

/* ============================================================
   Shared utility
   ============================================================ */
.loading-spinner {
  display: inline-block; width: 16px; height: 16px;
  border: 2px solid var(--border); border-top-color: var(--accent);
  border-radius: 50%; animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.toast {
  position: fixed; bottom: 24px; left: 50%;
  transform: translateX(-50%) translateY(80px);
  opacity: 0;
  background: var(--bg-tertiary); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 10px 20px; font-size: 13px;
  z-index: 999; transition: transform 0.25s ease, opacity 0.25s ease;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4); pointer-events: none;
}
.toast.show    { transform: translateX(-50%) translateY(0); opacity: 1; }
.toast.success { border-color: var(--s-delivered); color: var(--s-delivered); }
.toast.error   { border-color: var(--s-in_review); color: var(--s-in_review); }

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--line-soft); }
/* Larger horizontal scrollbar on the day/week grid */
.cal-body::-webkit-scrollbar { height: 10px; }
.cal-body::-webkit-scrollbar-track { background: var(--bg-secondary); }
.cal-body::-webkit-scrollbar-thumb { background: var(--line); border-radius: 5px; border: 2px solid var(--bg-secondary); }
.cal-body::-webkit-scrollbar-thumb:hover { background: var(--ink-4); }

/* ============================================================
   Calendar Filter Sidebar
   ============================================================ */
/* Calendar filter sidebar — v2 vocabulary: --bg surface, mono eyebrows
   for section titles, generous line-height, accent links. */
.cal-filter-sidebar {
  width: 230px; flex-shrink: 0; overflow-y: auto;
  border-right: 1px solid var(--line-soft);
  background: var(--bg);
  display: flex; flex-direction: column;
  transition: width 0.2s ease;
}
.cal-filter-sidebar.collapsed { width: 40px; overflow: hidden; }

/* Sidebar header */
.cfs-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px 10px; border-bottom: 1px solid var(--line-soft);
  flex-shrink: 0;
}
.cfs-title {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-4);
}
.cfs-collapse-btn {
  background: none; border: none; color: var(--ink-4);
  cursor: pointer; font-size: 12px; padding: 4px 6px;
  border-radius: var(--r-sm); line-height: 1; flex-shrink: 0;
  transition: color 0.12s, background 0.12s;
}
.cfs-collapse-btn:hover { color: var(--ink); background: var(--surface-2); }

/* Collapsed: just show the expand button */
.cal-filter-sidebar.collapsed .cfs-title,
.cal-filter-sidebar.collapsed .cfs-section { display: none; }
.cal-filter-sidebar.collapsed .cfs-header { justify-content: center; padding: 10px 0; }

/* Sections — soft divider between, more padding */
.cfs-section { border-bottom: 1px solid var(--line-soft); }
.cfs-section:last-child { border-bottom: none; }

.cfs-section-hdr {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px 8px; cursor: pointer; user-select: none;
  transition: background 0.12s; width: 100%;
}
.cfs-section-hdr:hover { background: var(--surface-2); }

.cfs-section-title {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-3);
  flex: 1;
}

.cfs-chevron {
  width: 12px; height: 12px; flex-shrink: 0;
  color: var(--ink-4); transition: transform 0.18s;
}
.cfs-section.cfs-collapsed .cfs-chevron { transform: rotate(-90deg); }
.cfs-section.cfs-collapsed .cfs-body    { display: none; }

.cfs-all-none { display: flex; align-items: center; gap: 4px; margin-right: 4px; }

.cfs-link {
  background: none; border: none;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
  cursor: pointer; padding: 2px 6px;
  border-radius: var(--r-sm);
  transition: background 0.12s, color 0.12s;
}
.cfs-link:hover {
  background: var(--accent-dim, color-mix(in oklch, var(--accent) 14%, transparent));
  color: var(--accent-2, var(--accent));
}

/* Items */
.cfs-body { padding: 4px 0 10px; }

.cfs-item {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 16px; cursor: pointer;
  transition: background 0.1s;
  min-height: 28px; /* WCAG-friendly touch target */
}
.cfs-item:hover { background: var(--surface-2); }

.cfs-checkbox {
  width: 14px; height: 14px; flex-shrink: 0;
  accent-color: var(--accent); cursor: pointer;
}

.cfs-dot {
  width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0;
}

.cfs-avatar {
  width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 8px; font-weight: 700; color: #fff;
}

.cfs-item-label {
  flex: 1;
  font-size: 12.5px;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cfs-count {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-4);
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  padding: 1px 6px;
  flex-shrink: 0;
  min-width: 20px;
  text-align: center;
}

/* Dashboard reset filters link */
.filter-reset-link {
  font-size: 10px; color: var(--text-muted); cursor: pointer;
  text-decoration: underline; text-underline-offset: 2px;
  background: none; border: none; padding: 0; margin-top: 6px; display: block;
}
.filter-reset-link:hover { color: var(--accent); }

/* ============================================================
   Availability Popover (Part 8)
   ============================================================ */
.avail-popover {
  position: absolute; z-index: 500;
  background: var(--bg-secondary); border: 1px solid var(--border);
  border-radius: var(--radius); width: 240px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.5);
  animation: fadeIn 0.12s ease;
}

.avail-pop-header {
  padding: 12px 14px 10px;
  border-bottom: 1px solid var(--border-light);
}
.avail-pop-name { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.avail-pop-date { font-size: 11px; color: var(--text-muted); margin-top: 1px; }

.avail-pop-body { padding: 12px 14px; }

.avail-status-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 10px;
}
.avail-status-btn {
  padding: 6px 8px; font-size: 11px; font-weight: 600;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--bg-tertiary); color: var(--text-secondary);
  cursor: pointer; transition: all 0.12s; text-align: center;
}
.avail-status-btn:hover { border-color: var(--accent); color: var(--text-primary); }
.avail-status-btn.active { background: var(--accent); color: #000; border-color: var(--accent); }

.avail-pop-notes {
  width: 100%; resize: none; min-height: 50px;
  background: var(--bg-primary); border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text-primary);
  padding: 7px 9px; font-size: 12px; font-family: inherit; line-height: 1.5;
}
.avail-pop-notes:focus { outline: none; border-color: var(--accent); }

.avail-pop-footer {
  padding: 10px 14px; border-top: 1px solid var(--border-light);
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
}

/* ============================================================
   Reports Page (Part 11)
   ============================================================ */
.reports-layout {
  height: calc(100vh - 52px); display: flex; flex-direction: column; overflow: hidden;
}

/* Quick range segmented button group */
.rpt-quick-ranges {
  display: flex; gap: 0; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden;
}
.rpt-range-btn {
  background: transparent; border: none; border-right: 1px solid var(--border);
  color: var(--text-secondary); font-size: 0.75rem; font-weight: 500;
  padding: 6px 12px; cursor: pointer; transition: background 0.15s, color 0.15s;
  font-family: inherit;
}
.rpt-range-btn:last-child { border-right: none; }
.rpt-range-btn:hover { background: var(--bg-tertiary); color: var(--text-primary); }
.rpt-range-btn.active { background: var(--accent); color: var(--accent-ink); font-weight: 600; }

/* Stat card left-border accents */
.rpt-stat-amber  { border-left: 4px solid var(--s-progress)   !important; }
.rpt-stat-green  { border-left: 4px solid var(--s-delivered)  !important; }
.rpt-stat-blue   { border-left: 4px solid var(--s-assigned)   !important; }
.rpt-stat-purple { border-left: 4px solid var(--s-meta)       !important; }

/* Loading state */
.reports-loading {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 12px; color: var(--text-muted); font-size: 0.875rem;
}
.rpt-spinner {
  width: 28px; height: 28px; border: 3px solid var(--border);
  border-top-color: var(--accent); border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.reports-controls {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 24px; border-bottom: 1px solid var(--border);
  background: var(--bg-secondary); flex-shrink: 0;
  flex-wrap: wrap;
}
.report-range-group {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.report-range-group label {
  font-size: 11px; font-weight: 600; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.05em;
}
.report-range-group input[type="date"] {
  background: var(--bg-tertiary); border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text-primary);
  padding: 6px 10px; font-size: 13px; font-family: inherit;
}
.report-range-group input[type="date"]:focus { outline: none; border-color: var(--accent); }

.reports-summary {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 12px; padding: 16px 24px; flex-shrink: 0;
}
.rpt-stat-card {
  background: var(--bg-secondary); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px 20px; text-align: center;
}
.rpt-stat-num {
  font-size: 28px; font-weight: 700; color: var(--accent); line-height: 1;
}
.rpt-stat-label {
  font-size: 11px; color: var(--text-muted); margin-top: 6px;
  text-transform: uppercase; letter-spacing: 0.05em;
}

.reports-charts {
  flex: 1; overflow-y: auto; padding: 0 24px 24px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-content: start;
  padding-top: 16px;
}
.rpt-chart-card {
  background: var(--bg-secondary); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px;
}
.rpt-chart-card.rpt-chart-wide { grid-column: 1 / -1; }
.rpt-chart-title {
  font-size: 12px; font-weight: 600; color: var(--text-secondary);
  text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 12px;
}
.rpt-chart-card canvas { width: 100%; display: block; }

.reports-empty {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 16px; color: var(--text-muted);
  font-size: 14px;
}
.reports-empty svg { opacity: 0.4; }

@media (max-width: 700px) {
  .reports-summary { grid-template-columns: 1fr 1fr; }
  .reports-charts  { grid-template-columns: 1fr; }
  .rpt-chart-card.rpt-chart-wide { grid-column: auto; }
}

/* ============================================================
   Login Page
   ============================================================ */

body.login-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: var(--bg-primary);
}

.login-card {
  width: 100%;
  max-width: 380px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 36px 32px 32px;
  box-shadow: var(--shadow-lg);
}

.login-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 28px;
  gap: 4px;
}

.login-brand {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 32px;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--accent);
  line-height: 1;
}

.login-tagline {
  font-size: 12px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.login-form .form-group { margin-bottom: 16px; }
.login-form label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.login-form input {
  width: 100%;
  box-sizing: border-box;
  padding: 9px 12px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-primary);
  font-size: 14px;
  font-family: inherit;
  transition: border-color 0.15s;
}
.login-form input:focus {
  outline: none;
  border-color: var(--accent);
}

.login-error {
  background: color-mix(in oklch, var(--danger) 12%, transparent);
  border: 1px solid color-mix(in oklch, var(--danger) 35%, transparent);
  color: var(--danger);
  border-radius: var(--radius);
  padding: 9px 12px;
  font-size: 13px;
  margin-bottom: 14px;
}

.login-submit {
  width: 100%;
  padding: 10px;
  font-size: 14px;
  margin-top: 4px;
  justify-content: center;
}
.login-submit:disabled { opacity: 0.6; cursor: not-allowed; }

/* ============================================================
   User Menu (replaces settings gear)
   ============================================================ */

.user-menu-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.user-avatar-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
}

.user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.02em;
  flex-shrink: 0;
  user-select: none;
}

.user-menu-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 220px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow-lg);
  z-index: 500;
  padding: 12px;
}
.user-menu-dropdown.open { display: block; }

.um-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.um-avatar { width: 36px; height: 36px; font-size: 13px; }

.um-info { min-width: 0; }
.um-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.um-role {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 1px;
}

.um-divider {
  height: 1px;
  background: var(--border);
  margin: 10px -12px;
}

.um-menu-link {
  display: block;
  padding: 8px 4px;
  font-size: 13px;
  color: var(--text-secondary);
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: color 0.12s;
}
.um-menu-link:hover { color: var(--text-primary); }

.um-signout-btn {
  width: 100%;
  padding: 8px;
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
  text-align: center;
}
.um-signout-btn:hover {
  background: color-mix(in oklch, var(--danger) 10%, transparent);
  border-color: color-mix(in oklch, var(--danger) 40%, transparent);
  color: var(--danger);
}

/* ============================================================
   Schedule Page
   ============================================================ */
.sched-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  height: calc(100vh - 52px);
  overflow: hidden;
}

/* Photographer list in sidebar */
.sched-phot-list { display: flex; flex-direction: column; gap: 4px; }

.sched-phot-item {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 8px; border-radius: var(--radius-sm);
  cursor: pointer; transition: background 0.12s;
}
.sched-phot-item:hover  { background: var(--bg-hover); }
.sched-phot-item.active { background: var(--accent-dim); }
.sched-phot-item.active .sched-phot-name { color: var(--accent); font-weight: 600; }

.sched-phot-name { font-size: 13px; color: var(--text-primary); }

/* Main panel */
.sched-empty {
  display: flex; align-items: center; justify-content: center;
  height: 100%; color: var(--text-muted); font-size: 14px;
}

.sched-panel {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.sched-section {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  flex-shrink: 0; /* keep card height equal to its content — don't squash */
}

.sched-section-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid var(--border);
  gap: 12px;
}

.sched-section-title {
  font-size: 14px; font-weight: 600; color: var(--text-primary);
}

.sched-section-sub {
  font-size: 12px; color: var(--text-secondary); margin-top: 2px;
}

/* Defaults table */
.sched-table-wrap { overflow-x: auto; }

.sched-table {
  width: 100%; border-collapse: collapse;
  font-size: 13px;
}

.sched-table thead th {
  text-align: left; padding: 10px 20px;
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--text-muted);
  background: var(--bg-tertiary); border-bottom: 1px solid var(--border);
}

.sched-table tbody tr {
  border-bottom: 1px solid var(--border-light);
  transition: background 0.1s;
}
.sched-table tbody tr:last-child { border-bottom: none; }
.sched-table tbody tr:hover { background: var(--bg-hover); }
.sched-table tbody tr.shift-off { opacity: 0.55; }

.sched-table td { padding: 10px 20px; vertical-align: middle; }

.shift-day { font-weight: 500; min-width: 110px; }

.toggle-wrap { display: flex; align-items: center; gap: 8px; cursor: pointer; }

.toggle-wrap input[type="checkbox"] {
  width: 15px; height: 15px; cursor: pointer; accent-color: var(--accent);
}

.toggle-label { font-size: 12px; color: var(--text-secondary); }

.shift-time select,
.time-sel {
  background: var(--bg-tertiary); border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text-primary);
  padding: 5px 8px; font-size: 12px; cursor: pointer;
  font-family: inherit;
}
.shift-time select:focus,
.time-sel:focus { outline: none; border-color: var(--accent); }
.shift-time select:disabled { opacity: 0.4; cursor: default; }

.shift-dash { color: var(--text-muted); padding: 5px 8px; display: inline-block; }

/* Override list */
.override-empty { padding: 20px 20px; color: var(--text-muted); font-size: 13px; }

.override-row {
  display: grid;
  grid-template-columns: 130px 100px 160px 1fr auto;
  gap: 12px; align-items: center;
  padding: 10px 20px;
  border-bottom: 1px solid var(--border-light);
  font-size: 13px;
}
.override-row:last-child { border-bottom: none; }
.override-row:hover { background: var(--bg-hover); }

.override-date  { font-weight: 500; color: var(--text-primary); }
.override-times { color: var(--text-secondary); }
.override-notes { color: var(--text-muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.override-actions { display: flex; gap: 4px; flex-shrink: 0; }

/* Override form */
.override-form {
  padding: 16px 20px;
  background: var(--bg-tertiary);
  border-bottom: 1px solid var(--border);
}

.override-form-grid {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end;
  margin-bottom: 12px;
}

.override-form-grid .form-group { display: flex; flex-direction: column; gap: 4px; }
.override-form-grid label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); }

.override-form-grid input[type="date"],
.override-form-grid select,
.override-form-grid input[type="text"] {
  background: var(--bg-secondary); border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text-primary);
  padding: 7px 10px; font-size: 13px; font-family: inherit;
}
.override-form-grid input:focus,
.override-form-grid select:focus { outline: none; border-color: var(--accent); }

.ov-notes-field { flex: 1; min-width: 200px; }
.ov-notes-field input { width: 100%; }

.override-form-actions { display: flex; gap: 8px; justify-content: flex-end; }

/* ============================================================
   Admin Page (legacy — kept for backward compat)
   ============================================================ */
.admin-layout {
  max-width: 760px;
  margin: 32px auto;
  padding: 0 24px 48px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* ============================================================
   Settings Page
   ============================================================ */

.sp-layout {
  display: flex;
  height: calc(100vh - 48px); /* below top-nav */
  overflow: hidden;
}

/* ── Sidebar ── */
.sp-sidebar {
  width: 220px;
  flex-shrink: 0;
  background: var(--bg-secondary);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: 20px 12px;
  gap: 2px;
  overflow-y: auto;
}

.sp-sidebar-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sp-sidebar-bottom {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.sp-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: var(--radius);
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: background 0.12s, color 0.12s;
}
.sp-nav-item:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}
.sp-nav-item.active {
  background: var(--accent-dim);
  color: var(--accent);
  font-weight: 500;
}

.sp-nav-icon {
  flex-shrink: 0;
  opacity: 0.7;
}
.sp-nav-item.active .sp-nav-icon { opacity: 1; }

/* ── Content pane ── */
.sp-content {
  flex: 1;
  overflow-y: auto;
  padding: 36px 48px 60px;
  background: var(--bg-primary);
}

@media (max-width: 700px) {
  .sp-content { padding: 24px 20px 48px; }
  .sp-sidebar  { width: 180px; }
}

/* Settings sub-page heading — v2 italic serif title above mono description.
   Mirrors the Today / Reports / Schedule / Job Sheet header treatments. */
.sp-section-title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 26px;
  font-weight: 400;
  color: var(--ink);
  line-height: 1.15;
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}
.sp-section-title::before {
  content: 'SETTINGS';
  display: block;
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-4);
  margin-bottom: 4px;
}

.sp-section-desc {
  font-size: 13px;
  color: var(--ink-3);
  margin-bottom: 24px;
  max-width: 560px;
  line-height: 1.5;
}

.sp-hint {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 10px;
}

/* ── Card ── */
.sp-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}

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

.sp-card-header-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

/* ── Row (setting item) ── */
.sp-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 18px 20px;
}

.sp-row-label { flex: 1; }

.sp-row-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
}

.sp-row-sub {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 2px;
}

.sp-divider {
  height: 1px;
  background: var(--border);
}

/* ── Theme toggle ── */
.sp-theme-toggle {
  display: flex;
  gap: 6px;
}

.sp-theme-btn {
  padding: 7px 18px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.sp-theme-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
.sp-theme-btn.active {
  background: var(--accent-dim);
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 500;
}

/* ── Font size control ── */
.sp-font-control {
  display: flex;
  gap: 8px;
}

.sp-font-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 16px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  font-family: inherit;
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
  min-width: 68px;
}
.sp-font-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
.sp-font-btn.active {
  background: var(--accent-dim);
  border-color: var(--accent);
  color: var(--accent);
}

.sp-font-label {
  font-size: 11px;
  letter-spacing: 0.02em;
}

/* ── Block card list ── */
.sp-block-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 20px;
  border-bottom: 1px solid var(--border-light);
}
.sp-block-row-last { border-bottom: none; }

.sp-block-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}

.sp-block-name {
  flex: 1;
  font-size: 13px;
  color: var(--text-primary);
}

.sp-block-actions {
  display: flex;
  gap: 4px;
}

.sp-sort-btns {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex-shrink: 0;
}

.sp-form-row {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

/* ── Account ── */
.sp-user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  flex-shrink: 0;
}

.sp-signout-btn {
  padding: 7px 18px;
  border-radius: var(--radius);
  border: 1px solid color-mix(in oklch, var(--danger) 30%, transparent);
  background: none;
  color: var(--danger);
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.sp-signout-btn:hover {
  background: color-mix(in oklch, var(--danger) 8%, transparent);
  border-color: color-mix(in oklch, var(--danger) 60%, transparent);
}

/* ── Toggle switch (used in Calendar settings) ── */
.sp-toggle {
  position: relative;
  display: inline-flex;
  cursor: pointer;
  flex-shrink: 0;
}
.sp-toggle input {
  position: absolute;
  opacity: 0;
  width: 0; height: 0;
}
.sp-toggle-track {
  width: 44px; height: 24px;
  border-radius: 12px;
  background: var(--border);
  transition: background 0.18s;
  display: flex; align-items: center;
  padding: 2px;
}
.sp-toggle input:checked + .sp-toggle-track {
  background: var(--accent);
}
.sp-toggle-thumb {
  width: 20px; height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
  transition: transform 0.18s;
}
.sp-toggle input:checked + .sp-toggle-track .sp-toggle-thumb {
  transform: translateX(20px);
}

/* ============================================================
   Phase 3b — Blocking Cards
   ============================================================ */

/* Calendar block card */
.cal-block-card {
  position: absolute;
  top: 4px;
  bottom: 4px;
  border-left: 3px solid var(--block-color);
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 11px;
  font-style: italic;
  overflow: hidden;
  cursor: pointer;
  white-space: nowrap;
  color: var(--block-color);
  opacity: 0.9;
  user-select: none;
  background:
    repeating-linear-gradient(
      -45deg,
      transparent,
      transparent 4px,
      rgba(128,128,128,0.06) 4px,
      rgba(128,128,128,0.06) 8px
    ),
    var(--block-bg);
  z-index: 1;
}
.cal-block-card:hover { opacity: 1; box-shadow: 0 2px 8px rgba(0,0,0,0.15); }
.cal-block-card.dragging { opacity: 0.5; pointer-events: none; }
.cal-block-card.resizing { cursor: col-resize; }

/* Block type badge (in block popover header) */
.block-type-badge {
  display: inline-block;
  font-size: 11px; font-weight: 600;
  padding: 2px 8px;
  border-radius: 3px;
  border-left-width: 3px !important;
  border-left-style: solid;
}

/* Right-click context menu */
.grid-context-menu {
  position: fixed;
  z-index: 1200;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
  min-width: 180px;
  padding: 4px 0;
  font-size: 13px;
}
.ctx-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px;
  cursor: pointer;
  color: var(--text-primary);
  white-space: nowrap;
}
.ctx-menu-item:hover { background: var(--bg-hover); }
.ctx-menu-sep {
  height: 1px;
  background: var(--border);
  margin: 4px 0;
}
.ctx-menu-dot {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Block popover (reuses .job-popover but narrower) */
.block-popover { min-width: 280px; max-width: 320px; }

/* Admin page — Block Types form */
.bt-color-wrap { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bt-color-wrap input[type="color"] {
  width: 36px; height: 32px;
  padding: 2px 2px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-secondary);
  cursor: pointer;
}

.bt-color-presets { display: flex; flex-wrap: wrap; gap: 4px; }
.bt-color-swatch {
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
  transition: transform 0.1s, border-color 0.1s;
}
.bt-color-swatch:hover { transform: scale(1.2); border-color: rgba(255,255,255,0.4); }

/* ============================================================
   Phase 3c — Shift Band Visualization
   ============================================================ */

/* Off-hours overlay — sits above grid lines, below job/block cards */
.cal-row-off-hours {
  position: absolute;
  top: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 1;
  background:
    repeating-linear-gradient(
      -45deg,
      transparent,
      transparent 6px,
      rgba(128,128,128,0.03) 6px,
      rgba(128,128,128,0.03) 12px
    ),
    rgba(128,128,128,0.08);
}
.light .cal-row-off-hours {
  background:
    repeating-linear-gradient(
      -45deg,
      transparent,
      transparent 6px,
      rgba(0,0,0,0.015) 6px,
      rgba(0,0,0,0.015) 12px
    ),
    rgba(0,0,0,0.04);
}

/* Shift start/end boundary lines */
.shift-boundary {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--accent);
  opacity: 0.3;
  z-index: 2;
  pointer-events: none;
}

.shift-boundary-label {
  position: absolute;
  top: 2px;
  font-size: 9px;
  color: var(--accent);
  opacity: 0.6;
  white-space: nowrap;
  pointer-events: none;
  z-index: 2;
  line-height: 1;
}

/* Amber triangle on job blocks that fall outside the photographer's shift */
.cal-job-block.outside-shift::before {
  content: '';
  position: absolute;
  top: 2px;
  right: 2px;
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-top: 6px solid #f59e0b;
  z-index: 5;
}

/* OFF-day photographer rows: job blocks at 60% opacity */
.cal-day-row.row-off .cal-job-block { opacity: 0.6; }
.cal-day-row.row-off .cal-block-card { opacity: 0.4; }

/* Schedule conflict warning toast */
.schedule-toast {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-secondary);
  border: 1px solid #f59e0b;
  border-left: 4px solid #f59e0b;
  border-radius: var(--radius);
  padding: 10px 16px;
  font-size: 13px;
  color: var(--text-primary);
  box-shadow: var(--shadow-lg);
  z-index: 2000;
  max-width: 500px;
  text-align: center;
  animation: schedToastIn 0.2s ease, schedToastOut 0.3s ease 3.7s forwards;
}
@keyframes schedToastIn  { from { opacity:0; transform:translateX(-50%) translateY(10px); } }
@keyframes schedToastOut { to   { opacity:0; transform:translateX(-50%) translateY(10px); } }

/* Calendar-page availability popover */
.cal-avail-popover {
  position: fixed;
  z-index: 1100;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  width: 280px;
  padding: 0;
  overflow: hidden;
}
.cal-avail-pop-header {
  padding: 12px 14px 10px;
  border-bottom: 1px solid var(--border);
}
.cal-avail-pop-name { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.cal-avail-pop-date { font-size: 11px; color: var(--text-muted); margin-top: 1px; }
.cal-avail-pop-body { padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.cal-avail-status-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.cal-avail-status-btn {
  padding: 6px 8px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.cal-avail-status-btn:hover  { background: var(--bg-hover); color: var(--text-primary); }
.cal-avail-status-btn.active { background: var(--accent-dim); border-color: var(--accent); color: var(--accent); font-weight: 600; }
.cal-avail-shift-section { display: flex; flex-direction: column; gap: 6px; }
.cal-avail-shift-label {
  font-size: 10px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.07em; color: var(--text-muted);
}
.cal-avail-shift-row { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.cal-avail-shift-row label { color: var(--text-secondary); min-width: 36px; }
.cal-avail-shift-row select {
  flex: 1; background: var(--bg-tertiary); border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text-primary);
  padding: 4px 6px; font-size: 12px; font-family: inherit; cursor: pointer;
}
.cal-avail-shift-row select:focus { outline: none; border-color: var(--accent); }
.cal-avail-shift-default { font-size: 11px; color: var(--text-muted); font-style: italic; }
.cal-avail-pop-notes {
  width: 100%; background: var(--bg-tertiary); border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text-primary);
  padding: 6px 8px; font-size: 12px; font-family: inherit; resize: none;
  box-sizing: border-box;
}
.cal-avail-pop-notes:focus { outline: none; border-color: var(--accent); }
.cal-avail-pop-footer {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; border-top: 1px solid var(--border);
}

/* Editor availability popover — shift override upgrade */
.avail-pop-shift-section { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.avail-pop-shift-label {
  font-size: 10px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.07em; color: var(--text-muted);
}
.avail-pop-shift-row { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.avail-pop-shift-row label { color: var(--text-secondary); min-width: 36px; }
.avail-pop-shift-row select {
  flex: 1; background: var(--bg-tertiary); border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text-primary);
  padding: 4px 6px; font-size: 12px; font-family: inherit; cursor: pointer;
}
.avail-pop-shift-row select:focus { outline: none; border-color: var(--accent); }
.avail-pop-shift-default { font-size: 11px; color: var(--text-muted); font-style: italic; margin-top: 2px; }
.avail-pop-divider { height: 1px; background: var(--border); margin: 2px 0; }

/* ============================================================
   Phase 3d — Reassignment dialog
   ============================================================ */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.reassign-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.55);
  display: flex; align-items: center; justify-content: center;
  z-index: 5000;
  animation: fadeIn 0.15s ease;
}

.reassign-dialog {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 12px;
  width: 500px; max-width: 90vw; max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  padding: 28px;
}

.reassign-title {
  font-size: 16px; font-weight: 600;
  color: var(--text-primary); margin-bottom: 4px;
}

.reassign-subtitle {
  font-size: 13px; color: var(--text-secondary); margin-bottom: 20px;
}

.reassign-job-list {
  border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; margin-bottom: 20px;
}

.reassign-job-item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px; border-bottom: 1px solid var(--border-light);
  cursor: pointer; transition: background 0.1s;
}
.reassign-job-item:last-child { border-bottom: none; }
.reassign-job-item:hover { background: var(--bg-hover); }
.reassign-job-item input[type="checkbox"] { margin-top: 3px; accent-color: var(--accent); flex-shrink: 0; }

.reassign-job-info { flex: 1; min-width: 0; }
.reassign-job-title { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.reassign-job-detail { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }

.reassign-options { display: flex; flex-direction: column; gap: 10px; margin-bottom: 24px; }

.reassign-option {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--text-primary); cursor: pointer;
}
.reassign-option input[type="radio"] { accent-color: var(--accent); flex-shrink: 0; }
.reassign-option select {
  background: var(--bg-tertiary); border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text-primary);
  padding: 6px 10px; font-size: 13px; font-family: inherit; margin-left: 4px;
}

.reassign-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 4px; }

.reassign-btn-skip {
  background: none; border: 1px solid var(--border); border-radius: var(--radius-sm);
  color: var(--text-secondary); padding: 8px 16px; font-size: 13px;
  cursor: pointer; font-family: inherit;
}
.reassign-btn-skip:hover { color: var(--text-primary); border-color: var(--text-muted); }

.reassign-btn-apply {
  background: var(--accent); border: none; border-radius: var(--radius-sm);
  color: #000; padding: 8px 20px; font-size: 13px; font-weight: 600;
  cursor: pointer; font-family: inherit;
}
.reassign-btn-apply:hover { filter: brightness(1.08); }
.reassign-btn-apply:disabled { opacity: 0.5; cursor: default; }

/* ============================================================
   Phase 4A: Copy / Paste / Bulk Assign
   ============================================================ */

/* Paste mode banner — sits between .cal-controls and .cal-main in the flex column */
.paste-mode-banner {
  flex-shrink: 0;
  background: var(--bg-secondary);
  border-bottom: 2px solid var(--accent);
  color: var(--text-primary);
  font-size: 13px;
  padding: 8px 20px;
  text-align: center;
  z-index: 30;
}
.paste-mode-banner .paste-cancel-link {
  color: var(--accent); cursor: pointer; text-decoration: underline; margin-left: 6px;
}

/* Group filter banner (dashboard) */
.group-filter-banner {
  background: var(--bg-secondary);
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: 12px; padding: 6px 14px;
  margin-bottom: 10px; display: flex; align-items: center; gap: 8px;
}
.group-filter-clear {
  background: none; border: none; color: var(--accent);
  cursor: pointer; font-size: 12px; padding: 0; text-decoration: underline;
}

/* Event group link icon on job cards */
.event-group-link {
  background: none; border: none; cursor: pointer;
  font-size: 12px; padding: 0 2px; color: var(--text-muted);
  line-height: 1; vertical-align: middle;
  transition: color 0.15s;
}
.event-group-link:hover { color: var(--accent); }

/* Panel copy-actions row (above footer) */
.panel-copy-actions {
  padding: 10px 20px 0;
  display: flex; gap: 8px;
  border-top: 1px solid var(--border-light);
}

/* Modal overlay (shared: bulk assign) */
.modal-overlay {
  position: fixed; inset: 0; z-index: 2100;
  background: rgba(0,0,0,0.55);
  display: flex; align-items: center; justify-content: center;
}
.modal-panel {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  width: 440px; max-width: calc(100vw - 32px);
  display: flex; flex-direction: column;
  max-height: 80vh; overflow: hidden;
}
.modal-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 18px 20px 14px; border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.modal-title {
  font-size: 15px; font-weight: 700; color: var(--text-primary);
}
.modal-subtitle {
  font-size: 12px; color: var(--text-muted); margin-top: 3px;
}
.modal-body { flex: 1; overflow-y: auto; padding: 16px 20px; }
.modal-footer {
  padding: 14px 20px; border-top: 1px solid var(--border);
  display: flex; gap: 8px; justify-content: flex-end; flex-shrink: 0;
}
.modal-section-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--text-muted); margin-bottom: 8px;
}

/* Photographer checklist inside bulk assign modal */
.bulk-phot-list {
  display: flex; flex-direction: column; gap: 4px;
  max-height: 220px; overflow-y: auto;
}
.bulk-phot-row {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 8px; border-radius: var(--radius-sm);
  cursor: pointer; font-size: 13px; color: var(--text-primary);
}
.bulk-phot-row:hover { background: var(--bg-hover); }
.bulk-phot-row input[type="checkbox"] { cursor: pointer; }
.bulk-phot-row input:disabled { cursor: default; opacity: 0.6; }
.bulk-source-tag {
  font-size: 10px; color: var(--text-muted);
  background: var(--bg-tertiary); border-radius: 3px; padding: 1px 5px;
  margin-left: auto;
}

/* Why a photographer can't take this slot — shown in place of the checkbox
   being silently pickable and then refused on save. */
.bulk-conflict-tag {
  font-size: 10px; color: var(--warning, #f59e0b);
  background: transparent; border-radius: 3px; padding: 1px 5px;
  margin-left: auto; text-align: right;
}
.bulk-phot-row:has(input:disabled) span:not(.bulk-source-tag):not(.bulk-conflict-tag) {
  color: var(--text-muted);
}

/* Time offset row */
.bulk-offset-row {
  display: flex; align-items: center; gap: 10px; font-size: 13px;
  color: var(--text-secondary);
}
.bulk-offset-label { color: var(--text-muted); font-size: 12px; }

/* ============================================================
   Cancel / Delete
   ============================================================ */

/* Danger ghost button (Cancel Job / Delete Job) */
.panel-action-danger {
  color: var(--text-muted); font-size: 12px;
  transition: color 0.15s;
}
.panel-action-danger:hover { color: var(--danger); }

/* Cancelled job card */
.job-card-cancelled,
.job-card-deleted {
  opacity: 0.55;
}
.job-card-cancelled .job-card-header,
.job-card-deleted  .job-card-header {
  text-decoration: line-through;
  text-decoration-color: color-mix(in oklch, var(--danger) 40%, transparent);
}

/* Cancelled status badge */
.status-badge.status-cancelled {
  background: color-mix(in oklch, var(--danger) 15%, transparent);
  color: var(--danger);
  border: 1px solid color-mix(in oklch, var(--danger) 30%, transparent);
}

/* Deleted status badge — gray, matches "Deleted" system status color */
.status-badge.status-deleted {
  background: color-mix(in oklch, #6B7280 15%, transparent);
  color: #6B7280;
  border: 1px solid color-mix(in oklch, #6B7280 30%, transparent);
}

/* Calendar job block — cancelled / deleted visual treatment (stripe + dim + strikethrough) */
.cal-job-block.is-cancelled,
.cal-job-block.is-deleted {
  opacity: 0.6;
  background-image: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 4px,
    rgba(0, 0, 0, 0.18) 4px,
    rgba(0, 0, 0, 0.18) 6px
  );
}
.cal-job-block.is-cancelled .block-num,
.cal-job-block.is-cancelled .block-client,
.cal-job-block.is-deleted   .block-num,
.cal-job-block.is-deleted   .block-client {
  text-decoration: line-through;
  text-decoration-color: rgba(255, 255, 255, 0.6);
}

/* Week/month bars — same treatment */
.cal-week-bar.is-cancelled,
.cal-week-bar.is-deleted,
.month-event-bar.is-cancelled,
.month-event-bar.is-deleted {
  opacity: 0.6;
  background-image: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 3px,
    rgba(0, 0, 0, 0.18) 3px,
    rgba(0, 0, 0, 0.18) 5px
  );
}
.cal-week-bar.is-cancelled .week-bar-num,
.cal-week-bar.is-deleted   .week-bar-num,
.month-event-bar.is-cancelled .month-event-title,
.month-event-bar.is-deleted   .month-event-title {
  text-decoration: line-through;
  text-decoration-color: rgba(255, 255, 255, 0.6);
}

/* Danger item in context menus */
.ctx-menu-item-danger { color: var(--danger); }

/* Required field marker + inline field error */
.required-marker {
  color: var(--danger, #ef4444);
  margin-left: 2px;
  font-weight: 600;
}
.field-error {
  margin-top: 4px;
  font-size: 12px;
  color: var(--danger, #ef4444);
  line-height: 1.3;
}
.form-group.has-error input,
.form-group.has-error textarea,
.form-group.has-error select {
  border-color: var(--danger, #ef4444) !important;
  box-shadow: 0 0 0 1px color-mix(in oklch, var(--danger, #ef4444) 30%, transparent);
}
/* Same treatment inside the New Job modal, which uses .nj-field wrappers */
.nj-field.has-error .rd-input {
  border-color: var(--danger, #ef4444) !important;
  box-shadow: 0 0 0 1px color-mix(in oklch, var(--danger, #ef4444) 30%, transparent);
}

/* ============================================================
   Paste Snap Line
   ============================================================ */

.paste-snap-line {
  position: absolute;
  top: 0; bottom: 0;
  width: 2px;
  background: var(--danger);
  pointer-events: none;
  z-index: 20;
}

.paste-snap-line::before {
  content: '';
  position: absolute;
  top: 4px; left: -4px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--danger);
}

.paste-snap-label {
  position: absolute;
  top: 18px;
  right: 8px;       /* positions to the LEFT of the snap line */
  left: auto;
  transform: translateX(-100%);
  background: var(--danger);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 3px;
  white-space: nowrap;
  pointer-events: none;
}

/* ============================================================
   Paste Ghost Card
   ============================================================ */

.paste-ghost-card {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.85;
  border-left: 4px solid;
  border-radius: var(--radius);
  padding: 7px 12px;
  font-size: 12px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.5);
  transform: none;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 160px;
  max-width: 260px;
  backdrop-filter: blur(2px);
  transition: none;
}

.ghost-num {
  font-size: 10px;
  font-weight: 700;
  opacity: 0.7;
  flex-shrink: 0;
}

.ghost-client {
  font-weight: 600;
  color: inherit;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

.ghost-type {
  font-size: 10px;
  opacity: 0.65;
  flex-shrink: 0;
}

/* ============================================================
   Popover Footer (two-row redesign)
   ============================================================ */

.pop-footer-utils {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 12px 8px;
  border-top: 1px solid var(--border-light);
}

.pop-footer-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px 12px;
  justify-content: flex-end;
}

.pop-util-btn {
  font-size: 11px !important;
  padding: 3px 7px !important;
  color: var(--text-muted) !important;
  border: 1px solid transparent !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
}

.pop-util-btn:hover {
  color: var(--text-secondary) !important;
  background: var(--bg-hover) !important;
  border-color: var(--border) !important;
}

.pop-danger-btn {
  color: var(--text-muted) !important;
}

.pop-danger-btn:hover {
  color: var(--danger) !important;
  background: color-mix(in oklch, var(--danger) 8%, transparent) !important;
  border-color: color-mix(in oklch, var(--danger) 25%, transparent) !important;
}

/* ============================================================
   Confirm Modal
   ============================================================ */

.confirm-modal {
  max-width: 380px;
  width: 90vw;
}

.confirm-modal-body {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.5;
}

.confirm-modal-body p {
  margin-top: 8px;
}

/* Warning button (Cancel Job confirmation) */
.btn-warning {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  border: none;
  background: var(--s-review);
  color: #fff;
  transition: filter 0.15s;
}

.btn-warning:hover { filter: brightness(1.1); }

/* Danger button (Delete Job confirmation) */
.btn-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  border: none;
  background: var(--danger);
  color: #fff;
  transition: filter 0.15s;
}

.btn-danger:hover { filter: brightness(1.1); }
.ctx-menu-item-danger:hover { background: color-mix(in oklch, var(--danger) 8%, transparent); }

/* ============================================================
   Phase 4B — Event Groups
   ============================================================ */

/* ── Calendar: group indicator bar on job blocks ── */
.group-indicator-bar {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  border-radius: 2px 2px 0 0;
  pointer-events: none;
  z-index: 2;
}

/* ── Context menu: colored group dot ── */
.ctx-group-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  margin-right: 6px;
  flex-shrink: 0;
  vertical-align: middle;
}

/* ── Event Group Panel (calendar slide-out) ── */
.event-group-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.35);
  z-index: 490;
}

.event-group-panel {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 360px; max-width: 92vw;
  background: var(--bg-secondary);
  border-left: 1px solid var(--border);
  box-shadow: -6px 0 24px rgba(0,0,0,0.4);
  z-index: 500;
  display: flex;
  flex-direction: column;
  animation: slideInRight 0.2s ease;
}

@keyframes slideInRight {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}

.egp-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--border-light);
  flex-shrink: 0;
}

.egp-header-text { flex: 1; min-width: 0; }

.egp-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.egp-subtitle {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 3px;
}

.egp-group-dot {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

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

.egp-loading, .egp-error {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-muted);
  font-size: 14px;
}

.egp-section-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.egp-job-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-light);
  background: var(--bg-tertiary);
  font-size: 13px;
}

.egp-job-phot {
  font-weight: 600;
  color: var(--text-primary);
  min-width: 0;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.egp-job-time {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}

.egp-open-job {
  font-size: 13px !important;
  padding: 2px 6px !important;
  flex-shrink: 0;
}

.egp-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border-top: 1px solid var(--border-light);
  flex-shrink: 0;
}

.egp-footer-btn {
  font-size: 13px !important;
}

/* ── Dashboard: event group badge ── */
.event-group-badge {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 3px;
  border: 1px solid var(--border);
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
  white-space: nowrap;
}
.event-group-badge:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

/* ── Dashboard: group filter banner (enhanced) ── */
.group-filter-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: var(--accent-dim);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 12px;
  font-size: 13px;
  color: var(--text-primary);
  flex-wrap: wrap;
}

.group-filter-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-block;
}

.group-filter-actions {
  display: flex;
  gap: 4px;
  margin-left: 4px;
}

.group-filter-action-btn {
  font-size: 12px !important;
  padding: 3px 8px !important;
}

.group-filter-clear {
  margin-left: auto;
  font-size: 12px;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
}
.group-filter-clear:hover { color: var(--text-primary); background: var(--bg-hover); }

/* ── Shared: form hint text ── */
.form-hint {
  display: block;
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 4px;
}

/* ── Settings: Block card list hint ────────────────────────────────────── */
.sp-block-hint {
  display: block;
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}

/* ── Settings: Status type badges ──────────────────────────────────────── */
.st-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 3px;
  letter-spacing: 0.3px;
  white-space: nowrap;
}
.st-badge-system      { background: rgba(107,114,128,.18); color: var(--text-muted); }
.st-badge-photographer { background: rgba(59,130,246,.15); color: #3B82F6; }
.st-badge-terminal    { background: rgba(245,158,11,.15); color: #D97706; }

.sp-field-hint {
  font-size: 11px;
  font-weight: 400;
  color: var(--text-muted);
  margin-left: 4px;
}

/* ── Settings: Photographer Management ─────────────────────────────────── */

.sp-phot-filter {
  display: flex;
  gap: 2px;
  background: var(--bg-tertiary);
  border-radius: var(--radius-sm);
  padding: 2px;
}

.sp-filter-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.sp-filter-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
.sp-filter-btn.active { background: var(--bg-primary); color: var(--text-primary); box-shadow: 0 1px 2px rgba(0,0,0,.15); }

.sp-phot-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--border-light);
}
.sp-phot-row-last { border-bottom: none; }

.sp-phot-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}

.sp-phot-info {
  flex: 1;
  min-width: 0;
}
.sp-phot-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
}
.sp-phot-role {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 1px;
}

.sp-phot-status {
  flex-shrink: 0;
}

.sp-status-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 20px;
  letter-spacing: 0.02em;
}
.sp-status-badge.active {
  background: color-mix(in srgb, #22c55e 18%, transparent);
  color: #22c55e;
}
.sp-status-badge.inactive {
  background: var(--bg-tertiary);
  color: var(--text-muted);
}

.sp-phot-actions {
  flex-shrink: 0;
}

/* ── Settings: Deactivation modal ──────────────────────────────────────── */

.sp-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 900;
}

.sp-modal {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 32px;
  max-width: 420px;
  width: 90%;
  box-shadow: 0 8px 32px rgba(0,0,0,.4);
}

.sp-modal-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 10px;
}

.sp-modal-body {
  font-size: 14px;
  color: var(--text-secondary);
  margin: 0 0 20px;
  line-height: 1.5;
}

.sp-modal-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ── Photographer Settings page (mobile-first) ────────────────────────────── */
.ps-layout {
  max-width: 480px; margin: 0 auto; padding: 20px 16px 48px;
  display: flex; flex-direction: column; gap: 0;
}
.ps-page-header { margin-bottom: 24px; }
.ps-page-title  { font-size: 1.5rem; font-weight: 700; color: var(--text-primary); margin: 0; }

.ps-group-label {
  font-size: 0.6875rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.07em; color: var(--text-muted);
  margin: 20px 4px 6px;
}
.ps-group-label:first-of-type { margin-top: 0; }

.ps-card {
  background: var(--bg-secondary); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden;
}
.ps-divider { height: 1px; background: var(--border-light); }

.ps-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 16px;
}
.ps-row-col { flex-direction: column; align-items: flex-start; }
.ps-row-text { flex: 1; min-width: 0; }
.ps-row-title { font-size: 0.9375rem; font-weight: 600; color: var(--text-primary); }
.ps-row-sub   { font-size: 0.8125rem; color: var(--text-muted); margin-top: 2px; }

/* Account row */
.ps-account-row {
  display: flex; align-items: center; gap: 14px; padding: 16px;
}
.ps-account-avatar {
  width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.875rem; font-weight: 700; color: #fff;
}
.ps-account-name { font-size: 0.9375rem; font-weight: 600; color: var(--text-primary); }
.ps-account-role { font-size: 0.8125rem; color: var(--text-muted); margin-top: 2px; }

.ps-signout-btn {
  width: 100%; padding: 14px 16px; text-align: left;
  background: none; border: none; cursor: pointer;
  font-size: 0.9375rem; font-weight: 500;
  color: var(--s-in_review); transition: background 0.1s;
}
.ps-signout-btn:hover { background: var(--bg-hover); }

/* ── Phase 6C: Recurring Jobs ──────────────────────────────────────────── */

/* Toggle row */
.recurrence-toggle-row {
  display: flex;
  align-items: center;
}

.toggle-label {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
}

.toggle-label input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-track {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 20px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: 10px;
  transition: background 0.2s, border-color 0.2s;
  flex-shrink: 0;
}

.toggle-track::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  background: var(--text-muted);
  border-radius: 50%;
  transition: transform 0.2s, background 0.2s;
}

.toggle-label input:checked + .toggle-track {
  background: var(--accent);
  border-color: var(--accent);
}

.toggle-label input:checked + .toggle-track::after {
  transform: translateX(16px);
  background: #fff;
}

.toggle-label input:disabled + .toggle-track {
  opacity: 0.6;
  cursor: not-allowed;
}

.toggle-text {
  font-size: 14px;
  color: var(--text-secondary);
}

/* Recurrence fields (shown when toggle is on) */
.recurrence-fields {
  margin-top: 12px;
}

#form-recurrence-day {
  background: var(--bg-tertiary);
  color: var(--text-muted);
  cursor: default;
}

/* Instance notice */
.recurring-instance-notice {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: var(--accent-dim);
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--text-secondary);
}

.recur-instance-icon {
  font-size: 16px;
  color: var(--accent);
  flex-shrink: 0;
}

/* Recurring tag on dashboard job cards */
.recurring-tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  font-weight: 500;
  padding: 2px 6px;
  border-radius: 3px;
  background: var(--accent-dim);
  color: var(--accent);
  border: 1px solid var(--accent);
  white-space: nowrap;
}

/* Recurring icon on calendar day-view blocks */
.recur-icon {
  position: absolute;
  top: 3px;
  right: 5px;
  font-size: 11px;
  opacity: 0.75;
  line-height: 1;
  pointer-events: none;
  z-index: 1;
}

/* ── Color swatch picker ───────────────────────────────────────────────────── */
.color-swatch-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}
.color-swatch {
  width: 28px;
  height: 28px;
  border-radius: 5px;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
  transition: transform 0.1s, border-color 0.1s;
  outline: none;
  flex-shrink: 0;
}
.color-swatch:hover { transform: scale(1.15); }
.color-swatch.selected {
  border-color: #fff;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.6), 0 0 0 4px rgba(0,0,0,0.3);
  transform: scale(1.1);
}
html.light .color-swatch.selected {
  border-color: #222;
  box-shadow: 0 0 0 2px rgba(0,0,0,0.5), 0 0 0 4px rgba(255,255,255,0.4);
}
.color-swatch-custom {
  width: 28px;
  height: 28px;
  border-radius: 5px;
  border: 2px dashed var(--border);
  cursor: pointer;
  padding: 0;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: var(--text-muted);
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}
.color-swatch-custom input[type="color"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  border: none;
  padding: 0;
}

/* Deep-link highlight pulse — fired when navigating from an alert "View" link */
@keyframes jobHighlightPulse {
  0%   { box-shadow: 0 0 0 0 rgba(251, 191, 36, 0.9); }
  50%  { box-shadow: 0 0 0 8px rgba(251, 191, 36, 0.4); }
  100% { box-shadow: 0 0 0 0 rgba(251, 191, 36, 0); }
}
.job-highlight-pulse {
  animation: jobHighlightPulse 0.7s ease-out 3;
  z-index: 10 !important;
}

/* ============================================================
   Tri-tone swatch row (Status Colors settings panel)
   ============================================================ */
.tritone-swatch-row {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  max-width: 260px;
}
.tritone-swatch {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid transparent;
  transition: transform 0.1s, outline 0.1s;
  flex-shrink: 0;
}
.tritone-swatch.active {
  border-color: var(--text-primary);
  transform: scale(1.22);
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.5; }
}

/* ============================================================
   Dashboard v2 — Nav additions
   ============================================================ */
.top-nav-v2 {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-4);
  font-style: normal;
  font-weight: 400;
}

.top-nav-right {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.nav-bell {
  position: relative;
  width: 32px;
  height: 32px;
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--r);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-3);
  transition: color 0.15s, background 0.15s;
}
.nav-bell:hover { background: var(--surface-3); color: var(--ink); }
.nav-bell .nav-alerts-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 700;
  padding: 0 4px;
}

/* ============================================================
   Dashboard v2 — Sub-header (mhv2)
   ============================================================ */
.mhv2 {
  display: flex;
  align-items: center;
  padding: 14px 22px;
  border-bottom: 1px solid var(--line-soft);
  flex-shrink: 0;
  gap: 14px;
  background: var(--bg);
}

.mhv2-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-4);
  margin-bottom: 4px;
  line-height: 1;
}

.mhv2-date {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 26px;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--ink);
  line-height: 1.1;
  margin: 0;
}

.mhv2-view-toggle {
  display: flex;
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--r);
  padding: 2px;
  gap: 1px;
}

.mhv2-nav-group {
  display: flex;
  align-items: center;
  gap: 4px;
}

.mhv2-nav-btn {
  height: 28px;
  min-width: 28px;
  padding: 0 10px;
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--r);
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s, color 0.12s;
}
.mhv2-nav-btn:hover { background: var(--surface-3); color: var(--ink); }

.view-btn {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  padding: 4px 12px;
  height: 28px;
  border-radius: var(--r-sm);
  color: var(--ink-3);
  background: transparent;
  transition: background 0.12s, color 0.12s;
}
.view-btn:hover { color: var(--ink); }
.view-btn.active { background: var(--surface); border: 1px solid var(--line); color: var(--ink); }

.mhv2-right {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
  margin-left: auto;
}

/* Tri-tone stats */
.tri-stats {
  display: flex;
  align-items: flex-end;
  gap: 18px;
}

.tri-stat {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  position: relative;
}

.tri-stat-num {
  /* v2 stat number — Instrument Serif italic to match Reports stat tiles
     and the page-level italic-serif vocabulary. Was font-mono 22/500. */
  font-family: var(--font-display);
  font-style: italic;
  font-size: 30px;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1;
  color: var(--tri-upcoming);
}

.tri-stat-label {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-4);
  margin-top: 3px;
}

.tri-stat-done .tri-stat-num     { color: var(--tri-done); }
.tri-stat-live .tri-stat-num     { color: var(--tri-live); }
.tri-stat-upcoming .tri-stat-num { color: var(--tri-upcoming); }
.tri-stat-late .tri-stat-num     { color: var(--tri-late); }
.tri-stat-warn .tri-stat-num     { color: var(--warn); }

/* Accent-variant labels (Live, Late, Unassigned) match their tone color */
.tri-stat-live .tri-stat-label   { color: var(--tri-live); }
.tri-stat-late .tri-stat-label   { color: var(--tri-late); }
.tri-stat-warn .tri-stat-label   { color: var(--warn); }

/* Live pulsing dot */
.stat-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--tri-live);
  animation: pulse 2s ease-in-out infinite;
  position: absolute;
  top: 4px;
  left: -12px;
}

/* ============================================================
   Dashboard v2 — Main scroll body
   ============================================================ */
.main-scroll {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 16px 22px;
}

/* ============================================================
   Dashboard v2 — Photographer Rails
   ============================================================ */
.rails-section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 10px;
}

.rails-title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 22px;
  font-weight: 400;
  color: var(--ink);
}

.rails-meta {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.05em;
  color: var(--ink-4);
  margin-left: 8px;
}

.rails-tone-legend {
  display: flex;
  gap: 14px;
  align-items: center;
}

.rails-legend-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-4);
}

.rails-legend-bar {
  width: 14px;
  height: 3px;
  border-radius: 2px;
  flex-shrink: 0;
}

/* Hour ruler */
.hour-ruler {
  position: relative;
  height: 18px;
  margin-left: 168px;
  margin-right: 64px;
  margin-bottom: 2px;
}

.hour-ruler-label {
  position: absolute;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-4);
  transform: translateX(-50%);
  white-space: nowrap;
}

/* NOW label — minimalist amber mono text at the top of the ruler.
   Sits above the vertical line that runs through every rail below. */
.now-pill {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  background: transparent;
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0 6px;
  white-space: nowrap;
  z-index: 5;
  line-height: 1.6;
}

/* Rail row */
.phot-rail {
  display: flex;
  align-items: stretch;
  height: calc(var(--row-h) + 14px);
  margin-bottom: 4px;
}

.phot-rail-label {
  width: 168px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding-right: 10px;
  min-width: 0;
}

.rail-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  text-transform: uppercase;
}

.rail-name-block {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.rail-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rail-avail {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-3);
  white-space: nowrap;
  margin-top: 1px;
}

.phot-rail-track {
  flex: 1;
  background: var(--surface);
  border-radius: var(--r);
  border: 1px solid var(--line-soft);
  position: relative;
  overflow: hidden;
}

/* Hour gridlines */
.rail-hour-line {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--line-soft);
  pointer-events: none;
}

/* Off-hours hatch */
.rail-off-hatch {
  position: absolute;
  top: 0;
  bottom: 0;
  background: repeating-linear-gradient(
    135deg,
    transparent 0 8px,
    color-mix(in oklch, var(--ink-4) 8%, transparent) 8px 9px
  );
  pointer-events: none;
}

/* Now vertical line — amber accent runs through every rail.
   Stronger and continuous so it reads as a single line at a glance. */
.rail-now-line {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--accent);
  opacity: 0.85;
  box-shadow: 0 0 6px color-mix(in oklch, var(--accent) 40%, transparent);
  z-index: 3;
  pointer-events: none;
}

/* Rail overlay text (ON LEAVE / UNAVAILABLE) */
.rail-status-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-4);
  pointer-events: none;
}

/* Job chip on rail */
.job-chip {
  position: absolute;
  top: 4px;
  bottom: 4px;
  border-radius: var(--r-sm);
  padding: 0 8px 0 8px;
  overflow: hidden;
  cursor: pointer;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  min-width: 18px;
  z-index: 2;
  transition: box-shadow 0.12s, transform 0.12s;
}
/* Subtle hover: keep the chip's tinted color, just lift it slightly and
   add a soft drop shadow. filter:brightness(1.15) was washing the chip
   to near-white because the base background is already a 14% tint over
   --surface. */
.job-chip:hover {
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
  transform: translateY(-1px);
}

.job-chip-time {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-2);
  white-space: nowrap;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 3px;
}

.job-chip-client {
  font-size: 12px;
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}

.job-chip-type {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  white-space: nowrap;
  flex-shrink: 0;
  margin-left: auto;
}

/* Live pulse dot on chip */
.chip-live-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--tri-live);
  animation: pulse 2.5s ease-in-out infinite;
  flex-shrink: 0;
  margin-right: 4px;
  vertical-align: middle;
}

/* Utilization column — small "Booked" eyebrow above the % so the number
   has a label the way prototype stat cards do. */
.phot-rail-util {
  width: 64px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  padding-left: 8px;
  gap: 1px;
  font-family: var(--font-mono);
  color: var(--ink-4);
}
.phot-rail-util-eyebrow {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.phot-rail-util-pct {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-2);
  line-height: 1;
}
.phot-rail-util.high .phot-rail-util-pct { color: var(--warn); }

/* Unassigned row styling */
.phot-rail.unassigned-rail .phot-rail-track {
  border-style: dashed;
  border-color: color-mix(in oklch, var(--warn) 30%, var(--line-soft));
}

/* Unassigned chip strip (replaces full timeline rail) */
.unassigned-strip {
  margin-bottom: 4px;
  padding: 8px 12px;
  border: 1px dashed color-mix(in oklch, var(--warn) 35%, var(--line-soft));
  border-radius: var(--r);
  background: color-mix(in oklch, var(--warn) 4%, var(--surface));
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.unassigned-strip-label {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--warn);
  flex-shrink: 0;
  margin-right: 4px;
}

.unassigned-strip-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  flex: 1;
  min-width: 0;
  min-height: 26px; /* keeps the strip visible even when empty so it can host a drop */
  align-items: center;
}
.unassigned-strip-empty {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: color-mix(in oklch, var(--warn) 70%, var(--ink-3));
  font-style: italic;
  letter-spacing: 0.02em;
  padding: 2px 4px;
  opacity: 0.85;
}

/* ── Rail drag-and-drop visuals ──────────────────────────────────────────── */
.job-chip,
.unassigned-chip { cursor: grab; }
.job-chip:active,
.unassigned-chip:active { cursor: grabbing; }

.rail-chip-dragging {
  opacity: 0.35;
  filter: grayscale(0.4);
}

.rail-drag-ghost {
  pointer-events: none;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
  border-radius: var(--r-sm);
  /* Slight lift / tilt cue. */
  transform: rotate(-1.5deg);
  opacity: 0.96;
}

.rail-drop-target {
  outline: 2px dashed var(--accent);
  outline-offset: -3px;
  background-color: color-mix(in oklch, var(--accent) 6%, var(--surface));
  transition: outline-color 0.1s, background-color 0.1s;
}
.unassigned-strip.rail-drop-target {
  outline: 2px dashed var(--warn);
  background-color: color-mix(in oklch, var(--warn) 10%, var(--surface));
}

.rail-drag-time-tip {
  position: fixed;
  z-index: 1000;
  background: var(--ink);
  color: var(--bg);
  padding: 3px 7px;
  border-radius: var(--r-sm);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  pointer-events: none;
  display: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.unassigned-chip {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: var(--r-sm);
  font-size: 12px;
  cursor: pointer;
  border-left: 3px solid transparent;
  transition: filter 0.12s;
}
.unassigned-chip {
  transition: box-shadow 0.12s, transform 0.12s;
}
.unassigned-chip:hover {
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
  transform: translateY(-1px);
}

.unassigned-chip-time {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-2);
  white-space: nowrap;
  flex-shrink: 0;
}

.unassigned-chip-client {
  font-size: 12px;
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
}

.unassigned-chip-type {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.unassigned-auto-btn {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
  padding: 4px 10px;
  cursor: pointer;
  flex-shrink: 0;
  transition: color 0.12s, background 0.12s;
}
.unassigned-auto-btn:hover { color: var(--ink); background: var(--surface-3); }

/* Inbox row hover + action buttons */
.inbox-item-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--line-soft);
  transition: background 0.1s;
  position: relative;
}
.inbox-item-row:last-child { border-bottom: none; }
.inbox-item-row:hover { background: color-mix(in oklch, var(--accent) 4%, var(--surface)); }

.inbox-row-actions {
  display: none;
  gap: 4px;
  flex-shrink: 0;
  align-items: center;
}
.inbox-item-row:hover .inbox-row-actions { display: flex; }

.inbox-action-btn {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ink-3);
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
  padding: 3px 8px;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.12s, background 0.12s;
}
.inbox-action-btn:hover { color: var(--ink); background: var(--surface-3); }

/* Inbox collapsed danger state */
.inbox-collapsed-danger {
  background: color-mix(in oklch, var(--danger, #e74c3c) 8%, var(--surface)) !important;
  border-color: color-mix(in oklch, var(--danger, #e74c3c) 35%, var(--line-soft)) !important;
}

/* ============================================================
   Settings — Density selector
   ============================================================ */
.density-selector {
  display: flex;
  gap: 4px;
}
.density-btn {
  flex: 1;
  padding: 8px 0;
  border-radius: var(--r);
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-3);
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  transition: background 0.12s, color 0.12s, border-color 0.12s;
  text-align: center;
}
.density-btn:hover { color: var(--ink); }
.density-btn.active {
  background: var(--surface-3);
  color: var(--ink);
  border-color: var(--accent);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   PHASE UI-2 — Modals & Interactions
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ── Keyframes ─────────────────────────────────────────────────────────────── */
@keyframes slideR {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}
@keyframes pop {
  from { opacity: 0; transform: translateX(-50%) scale(0.96); }
  to   { opacity: 1; transform: translateX(-50%) scale(1); }
}
@keyframes rsIn {
  from { opacity: 0; transform: translateY(20px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes cmdIn {
  from { opacity: 0; transform: translateY(-12px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Shared button variants (ui2) ──────────────────────────────────────────── */
.js-btn-primary, .js-btn-secondary, .js-btn-ghost, .js-btn-danger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: var(--r);
  font-size: 13px;
  font-weight: 500;
  font-family: var(--font-sans);
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.12s, color 0.12s, border-color 0.12s, opacity 0.12s;
  white-space: nowrap;
}
.js-btn-primary {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
}
.js-btn-primary:hover { opacity: 0.88; }
.js-btn-secondary {
  background: var(--surface-2);
  color: var(--ink);
  border-color: var(--line);
}
.js-btn-secondary:hover { background: var(--surface-3); }
.js-btn-ghost {
  background: transparent;
  color: var(--ink-3);
  border-color: transparent;
}
.js-btn-ghost:hover { background: var(--surface-2); color: var(--ink); }
.js-btn-danger {
  background: transparent;
  color: var(--danger);
  border-color: var(--danger);
}
.js-btn-danger:hover { background: color-mix(in srgb, var(--danger) 10%, transparent); }
.js-btn-primary:disabled,
.js-btn-secondary:disabled,
.js-btn-ghost:disabled,
.js-btn-danger:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ── Job Sheet ─────────────────────────────────────────────────────────────── */
.js-overlay {
  position: fixed;
  inset: 0;
  background: transparent;
  z-index: 80;
  pointer-events: none;
}
.js-overlay.open { pointer-events: all; }

.job-sheet {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 520px;
  max-width: 100vw;
  background: var(--bg);
  border-left: 1px solid var(--line);
  z-index: 90;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.18s ease-out;
  overflow: hidden;
}
.job-sheet.open {
  transform: translateX(0);
  animation: slideR 0.18s ease-out;
}

.js-header {
  padding: 18px 22px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.js-header-row1 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.js-job-num {
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-4);
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
}
.js-type-tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: var(--r-sm);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--accent-dim);
  color: var(--accent-ink);
}
.js-status-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  background: var(--surface-2);
  color: var(--ink-2);
  border: 1px solid var(--line-soft);
  margin-left: auto;
}
.js-status-chip::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

/* Status chip rendered as a <button> with a caret — opens the status menu.
   Looks identical to the static chip but reads as interactive. */
.js-status-chip-btn {
  cursor: pointer;
  font-family: inherit;
  transition: filter 0.12s, box-shadow 0.12s;
}
.js-status-chip-btn:hover {
  filter: brightness(1.08);
}
.js-status-chip-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px color-mix(in oklch, currentColor 30%, transparent);
}
.js-status-chip-btn svg {
  opacity: 0.7;
  margin-left: 1px;
}

/* Dropdown menu — fixed-positioned, anchored via JS at open time to the
   chip's bounding rect so it sits flush under whichever spot the chip
   lands in the header row. */
.js-status-menu {
  position: fixed;
  z-index: 1000;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-pop);
  padding: 4px;
  min-width: 200px;
  max-height: 360px;
  overflow-y: auto;
}
.js-status-menu-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 500;
  font-family: var(--font-sans);
  color: var(--ink);
  background: transparent;
  border: 0;
  border-radius: var(--r-sm);
  cursor: pointer;
  text-align: left;
  transition: background 0.08s;
}
.js-status-menu-row + .js-status-menu-row { margin-top: 1px; }
.js-status-menu-row:hover,
.js-status-menu-row:focus-visible {
  background: var(--surface-2);
  outline: none;
}
.js-status-menu-loading,
.js-status-menu-empty {
  color: var(--ink-4);
  cursor: default;
  font-style: italic;
}
.js-status-menu-loading:hover,
.js-status-menu-empty:hover { background: transparent; }
.js-status-menu-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}
.js-client {
  font-size: 26px;
  font-weight: 400;
  font-style: italic;
  color: var(--ink);
  font-family: var(--font-display);
  letter-spacing: -0.01em;
  line-height: 1.15;
  margin-bottom: 4px;
}
.js-headline {
  font-size: 13.5px;
  font-weight: 400;
  color: var(--ink-2);
  font-family: var(--font-sans);
  line-height: 1.4;
}
.js-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: var(--r);
  background: transparent;
  border: none;
  color: var(--ink-3);
  cursor: pointer;
  transition: background 0.1s, color 0.1s;
  flex-shrink: 0;
}
.js-icon-btn:hover { background: var(--surface-2); color: var(--ink); }

.js-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.js-footer {
  padding: 12px 20px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  background: var(--bg);
}
.js-footer-spacer { flex: 1; }

/* Pipeline */
.js-pipeline { display: flex; flex-direction: column; gap: 8px; }
.js-pipeline-stages {
  display: flex;
  gap: 3px;
}
/* Pipeline stages now render as <button> so they can be clicked to set
   status. Default button-reset so they look identical to the old <div>
   layout, with hover affordance only on clickable stages. */
.js-stage {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: transparent;
  border: 0;
  padding: 4px 2px 2px;
  border-radius: var(--r-sm);
  cursor: default;
  font-family: inherit;
  transition: background 0.12s, transform 0.12s;
}
.js-stage-clickable { cursor: pointer; }
.js-stage-clickable:hover {
  background: var(--surface-2);
}
.js-stage-clickable:hover .js-stage-label {
  color: var(--ink);
}
.js-stage-clickable:active { transform: translateY(1px); }
.js-stage-system { opacity: 0.65; cursor: not-allowed; }
.js-stage-system .js-stage-label { font-style: italic; }

/* Future-dated jobs: workflow statuses are nonsensical before the job has
   happened, so non-current stages render extra-muted with a lock cursor. */
.js-stage-future-locked { opacity: 0.45; cursor: not-allowed; }
.js-stage-future-locked .js-stage-label { font-style: italic; }

.js-pipeline-locked-note {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-4);
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
  padding: 4px 8px;
  margin-bottom: 10px;
}
.js-pipeline-locked-note svg { opacity: 0.7; }

.js-status-chip-btn.js-status-chip-locked {
  cursor: not-allowed;
  opacity: 0.85;
}
.js-status-chip-btn.js-status-chip-locked:hover {
  filter: none;
}
.js-stage-bar {
  height: 4px;
  border-radius: 2px;
  background: var(--line);
  transition: background 0.15s;
}
.js-stage-bar.filled { background: var(--accent); }
.js-stage-bar.cur    { background: var(--accent); }
.js-stage-label {
  font-size: 10px;
  color: var(--ink-4);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.js-stage-label.cur { color: var(--accent); font-weight: 600; }

/* Quick facts grid */
.js-facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.js-fact {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.js-fact-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.js-fact-val {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.2;
}
.js-fact-sub {
  font-size: 11px;
  color: var(--ink-3);
}
.js-fact-action {
  margin-top: 4px;
  font-size: 12px;
  color: var(--accent);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: transparent;
  transition: text-decoration-color 0.1s;
  align-self: flex-start;
}
.js-fact-action:hover { text-decoration-color: var(--accent); }

/* Section heading */
.js-section { display: flex; flex-direction: column; gap: 10px; }
.js-section-title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.js-caption {
  font-size: 13px;
  color: var(--ink-3);
  font-style: italic;
}
.js-reassign-btn {
  align-self: flex-start;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-dim);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius: var(--r);
  cursor: pointer;
  transition: background 0.12s;
}
.js-reassign-btn:hover { background: color-mix(in srgb, var(--accent) 18%, transparent); }

/* Activity timeline */
.js-timeline { position: relative; display: flex; flex-direction: column; gap: 0; }
.js-tl-line {
  position: absolute;
  left: 11px;
  top: 12px;
  bottom: 0;
  width: 2px;
  background: var(--line-soft);
}
.js-tl-entry {
  display: flex;
  gap: 12px;
  padding: 0 0 16px;
  position: relative;
  z-index: 1;
}
.js-tl-node {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--surface-2);
  border: 2px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-3);
  flex-shrink: 0;
}
.js-tl-node.accent {
  background: var(--accent-dim);
  border-color: var(--accent);
  color: var(--accent);
}
.js-tl-content { flex: 1; min-width: 0; }
.js-tl-who {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 2px;
}
.js-tl-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
}
.js-tl-role {
  font-size: 11px;
  color: var(--ink-4);
}
.js-tl-time {
  font-size: 11px;
  color: var(--ink-4);
  margin-left: auto;
  flex-shrink: 0;
}
.js-tl-desc {
  font-size: 12px;
  color: var(--ink-3);
  line-height: 1.4;
}
.js-tl-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.js-tl-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: var(--r-sm);
  font-size: 11px;
  font-weight: 500;
  background: var(--surface-2);
  color: var(--ink-2);
  border: 1px solid var(--line-soft);
}

/* ── Reassign Sheet ────────────────────────────────────────────────────────── */
.rs-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 110;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s;
}
.rs-overlay.open {
  opacity: 1;
  pointer-events: all;
  animation: fadeIn 0.15s;
}
.reassign-sheet {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-pop);
  width: min(840px, 92vw);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
}
.rs-overlay.open .reassign-sheet {
  animation: nj-pop 0.18s cubic-bezier(0.2, 0.9, 0.3, 1.2);
  opacity: 1;
}
.rs-header {
  padding: 18px 22px;
  border-bottom: 1px solid var(--line-soft);
  flex-shrink: 0;
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.rs-filters {
  padding: 10px 22px;
  border-bottom: 1px solid var(--line-soft);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.rs-chip {
  padding: 4px 10px;
  border-radius: var(--r-sm);
  font-size: 11px;
  font-weight: 500;
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--surface-2);
  color: var(--ink-3);
  border: 1px solid var(--line-soft);
  cursor: pointer;
  transition: background 0.1s, color 0.1s, border-color 0.1s;
}
.rs-chip:hover { background: var(--surface-3); color: var(--ink); }
.rs-chip.active {
  background: var(--accent-dim);
  color: var(--accent);
  border-color: transparent;
}
.rs-list {
  flex: 1;
  overflow-y: auto;
  padding: 12px 14px;
  display: block;
}
.rs-card {
  display: flex;
  align-items: stretch;
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  padding: 12px;
  margin-bottom: 8px;
  cursor: pointer;
  text-align: left;
  color: inherit;
  font: inherit;
  transition: all 0.12s;
  position: relative;
}
.rs-card:hover:not(.unavailable):not(.selected) {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--line-soft));
}
.rs-card.selected {
  border-color: var(--accent);
  background: var(--accent-dim);
}
.rs-card.unavailable {
  opacity: 0.5;
  cursor: not-allowed;
}
.rs-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.rs-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}
.rs-name { font-size: 14px; font-weight: 600; color: var(--ink); }
.rs-status-badge {
  margin-left: auto;
  padding: 2px 7px;
  border-radius: var(--r-sm);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.rs-timeline {
  display: flex;
  position: relative;
  height: 28px;
  background: var(--surface-2);
  border-radius: var(--r-sm);
  overflow: hidden;
}
.rs-timeline-block {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: 2px;
  opacity: 0.85;
}
.rs-timeline-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 4px;
}
.rs-timeline-label {
  font-size: 9px;
  color: var(--ink-4);
  font-family: var(--font-mono);
}
.rs-card-jobs {
  margin-top: 6px;
  font-size: 11px;
  color: var(--ink-3);
}
.rs-footer {
  padding: 12px 20px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  background: var(--bg);
}
.rs-footer-info {
  flex: 1;
  font-size: 13px;
  color: var(--ink-3);
}
.rs-footer-info strong { color: var(--ink); }

/* ── Command Palette ───────────────────────────────────────────────────────── */
.cmd-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 130;
  opacity: 0;
  pointer-events: none;
}
.cmd-backdrop.open {
  opacity: 1;
  pointer-events: all;
  animation: fadeIn 0.12s;
}
.cmd-palette {
  position: fixed;
  top: 100px;
  left: 50%;
  transform: translateX(-50%);
  width: 580px;
  max-width: calc(100vw - 32px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-pop);
  z-index: 140;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}
.cmd-palette.open {
  opacity: 1;
  pointer-events: all;
  animation: pop 0.14s ease-out;
}
.cmd-search {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line-soft);
}
.cmd-search-icon { color: var(--ink-4); flex-shrink: 0; }
.cmd-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  font-size: 15px;
  color: var(--ink);
  font-family: var(--font-sans);
  caret-color: var(--accent);
}
.cmd-input::placeholder { color: var(--ink-4); }
.cmd-esc {
  display: inline-flex;
  align-items: center;
  padding: 2px 6px;
  border-radius: var(--r-sm);
  font-size: 11px;
  font-weight: 500;
  font-family: var(--font-mono);
  color: var(--ink-4);
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  flex-shrink: 0;
}
.cmd-results {
  max-height: 400px;
  overflow-y: auto;
  padding: 6px 0;
}
.cmd-group-label {
  padding: 6px 16px 2px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.cmd-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 18px;
  cursor: pointer;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  color: inherit;
  font: inherit;
  transition: background 0.08s;
}
.cmd-item.active, .cmd-item:hover { background: var(--surface-2); }
.cmd-item.active .cmd-label-text { color: var(--ink); }
.cmd-glyph {
  width: 22px;
  flex-shrink: 0;
  color: var(--ink-4);
  font-size: 13px;
}
.cmd-label { flex: 1; min-width: 0; }
.cmd-label-text {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cmd-label-sub {
  font-size: 11px;
  color: var(--ink-4);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cmd-kbd {
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 10px;
  font-family: var(--font-mono);
  color: var(--ink-3);
  background: var(--surface-3);
  border: 1px solid var(--line);
  flex-shrink: 0;
}
.cmd-empty {
  padding: 32px 16px;
  text-align: center;
  font-size: 13px;
  color: var(--ink-4);
}

/* Nav jump button */
.nav-jump-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: var(--r);
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-3);
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  cursor: pointer;
  transition: background 0.1s, color 0.1s;
}
.nav-jump-btn:hover { background: var(--surface-3); color: var(--ink); }
.nav-jump-kbd {
  display: inline-flex;
  align-items: center;
  padding: 1px 5px;
  border-radius: var(--r-sm);
  font-size: 10px;
  font-family: var(--font-mono);
  color: var(--ink-4);
  background: var(--surface-3);
  border: 1px solid var(--line);
}

/* ── New Job Modal ─────────────────────────────────────────────────────────── */
@keyframes nj-pop {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}
.nj-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 110;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
}
.nj-overlay.open {
  opacity: 1;
  pointer-events: all;
  animation: fadeIn 0.15s;
}
.nj-modal {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-pop);
  width: 560px;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 80px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  transition: width 0.2s;
}
.nj-modal.parsed { width: 640px; }
.nj-overlay.open .nj-modal {
  animation: nj-pop 0.16s cubic-bezier(0.2, 0.9, 0.3, 1.2);
  opacity: 1;
}
.nj-header {
  padding: 18px 22px 0;
  border-bottom: 1px solid var(--line-soft);
  flex-shrink: 0;
}
.nj-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}
.nj-eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-4);
  font-family: var(--font-mono);
}
.nj-title {
  font-size: 22px;
  font-weight: 400;
  font-style: italic;
  color: var(--ink);
  font-family: var(--font-display);
  margin-top: 2px;
  line-height: 1.15;
}
.nj-tabs {
  display: flex;
  gap: 0;
  margin-bottom: -1px;
}
.nj-tab {
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-3);
  cursor: pointer;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  transition: color 0.1s, border-color 0.1s;
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: inherit;
}
.nj-tab:hover { color: var(--ink); }
.nj-tab.active {
  color: var(--ink);
  border-bottom-color: var(--accent);
}
.nj-ai-badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 5px;
  border-radius: 8px;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  background: color-mix(in oklch, var(--accent) 18%, transparent);
  color: var(--accent);
}
.nj-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.nj-footer {
  padding: 12px 20px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  background: var(--bg);
}
.nj-footer-spacer { flex: 1; }
.nj-field { display: flex; flex-direction: column; gap: 5px; }
.nj-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.nj-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.nj-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.nj-open-link {
  font-size: 12px;
  color: var(--accent);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: transparent;
  transition: text-decoration-color 0.1s;
}
.nj-open-link:hover { text-decoration-color: var(--accent); }
.nj-toggle-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
}
.nj-toggle-track {
  width: 36px;
  height: 20px;
  border-radius: 10px;
  background: var(--surface-3);
  border: 1px solid var(--line);
  position: relative;
  cursor: pointer;
  transition: background 0.15s;
  flex-shrink: 0;
  box-sizing: border-box;
}
.nj-toggle-track.on { background: var(--accent); border-color: var(--accent); }
.nj-toggle-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  transition: left 0.15s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.nj-toggle-track.on .nj-toggle-thumb { left: 18px; }
.nj-toggle-label {
  font-size: 13px;
  color: var(--ink-2);
}

/* Shared input style for all ui2 forms */
.rd-input {
  width: 100%;
  padding: 8px 10px;
  border-radius: var(--r);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  font-size: 13px;
  font-family: var(--font-sans);
  outline: none;
  transition: border-color 0.12s;
  box-sizing: border-box;
}
.rd-input:focus { border-color: var(--accent); }
.rd-input::placeholder { color: var(--ink-4); }
.rd-input[type="date"]::-webkit-calendar-picker-indicator { opacity: 0.4; cursor: pointer; }
textarea.rd-input {
  resize: vertical;
  min-height: 70px;
  line-height: 1.5;
}
select.rd-input { cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23888'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; padding-right: 28px; }

/* ── Batch Action Bar ──────────────────────────────────────────────────────── */
/* Pinned to the top of the viewport (below the 52px top nav) so it never
   covers the bottom photographer rails. Dropdown opens downward. */
.batch-bar {
  position: fixed;
  top: -80px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-pop);
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 150;
  transition: top 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
  white-space: nowrap;
}
.batch-bar.show { top: 64px; }
.batch-count {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-right: 10px;
  border-right: 1px solid var(--line-soft);
}
.batch-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 11px;
  font-weight: 700;
}
.batch-label {
  font-size: 13px;
  color: var(--ink-3);
  font-weight: 500;
}
.batch-status-wrapper { position: relative; }
/* Dropdown opens DOWNWARD now that the bar is top-anchored. */
.batch-status-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-pop);
  min-width: 200px;
  padding: 4px;
  max-height: 360px;
  overflow-y: auto;
  display: none;
  z-index: 160;
}
.batch-status-menu.open { display: block; }
.batch-status-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 500;
  font-family: var(--font-sans);
  color: var(--ink);
  background: transparent;
  border: 0;
  border-radius: var(--r-sm);
  cursor: pointer;
  text-align: left;
  transition: background 0.08s, color 0.08s;
}
.batch-status-opt + .batch-status-opt { margin-top: 1px; }
.batch-status-opt:hover,
.batch-status-opt:focus-visible {
  background: var(--surface-2);
  outline: none;
}
.batch-status-opt:active { background: var(--surface-3); }
.batch-status-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 0 2px color-mix(in oklch, currentColor 0%, transparent);
}
.batch-status-opt-label {
  flex: 1;
  color: var(--ink);
}
/* Batch chip selected overlay */
.batch-selected {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  position: relative;
}
.batch-check {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  pointer-events: none;
}

/* ── Responsive ────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .job-sheet  { width: 100vw; }
  .reassign-sheet { width: 100vw; max-height: 92vh; border-radius: var(--r-lg) var(--r-lg) 0 0; }
  .rs-card    { width: 100%; }
  .nj-modal   { width: 100vw; max-height: 92vh; border-radius: var(--r-lg) var(--r-lg) 0 0; align-self: flex-end; }
  .nj-grid-2, .nj-grid-3 { grid-template-columns: 1fr; }
  .batch-bar  { width: calc(100vw - 32px); }
}

/* ============================================================
   Reports v2 — Activity header, BigStat cards, chart cards
   ============================================================ */
.rpt-page {
  flex: 1;
  overflow-y: auto;
  padding: 24px 32px;
  background: var(--bg);
}
.rpt-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
}
.rpt-header-title { display: flex; flex-direction: column; gap: 4px; }
.rpt-header-h1 {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 28px;
  color: var(--ink);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.rpt-range-seg {
  display: flex;
  gap: 1px;
  background: var(--surface-2);
  padding: 2px;
  border-radius: var(--r);
  border: 1px solid var(--line-soft);
}
.rpt-range-btn {
  padding: 5px 12px;
  border-radius: var(--r-sm);
  font-size: 12px;
  font-weight: 500;
  background: transparent;
  color: var(--ink-3);
  border: 1px solid transparent;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.1s, color 0.1s;
}
.rpt-range-btn.active {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--line);
}
.rpt-range-btn:hover:not(.active) { color: var(--ink); }
.rpt-csv-btn { font-size: 13px; padding: 6px 14px; }

/* BigStat cards */
.rpt-bigstats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 22px;
}
.rpt-bigstat {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  padding: 18px;
}
.rpt-bigstat .eyebrow { margin-bottom: 10px; }
.rpt-bigstat-n {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 44px;
  color: var(--ink);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.02em;
}
.rpt-bigstat-delta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-3);
  margin-top: 8px;
}

/* Chart cards & rows */
.rpt-charts-row {
  display: grid;
  gap: 14px;
  margin-bottom: 14px;
}
.rpt-charts-row-1 { grid-template-columns: 2fr 1fr; }
.rpt-charts-row-2 { grid-template-columns: 1fr 1fr; }
.rpt-card {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  padding: 18px;
  min-width: 0; /* allow canvas to shrink */
}
.rpt-card-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}
.rpt-card-sub {
  font-size: 11.5px;
  color: var(--ink-3);
  margin-top: 2px;
  margin-bottom: 14px;
}
.rpt-card .rpt-card-title + canvas,
.rpt-card .rpt-card-sub + canvas { margin-top: 12px; }
.rpt-card canvas { width: 100% !important; display: block; }

/* Custom date range row */
#rpt-custom-range {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  padding: 12px 18px;
  margin-bottom: 14px;
}

@media (max-width: 900px) {
  .rpt-bigstats { grid-template-columns: 1fr 1fr; }
  .rpt-charts-row-1, .rpt-charts-row-2 { grid-template-columns: 1fr; }
  .rpt-page { padding: 18px; }
}

/* ============================================================
   Calendar v2 — Show: All/Mine/Unassigned/Conflicts chips
   ============================================================ */
.cal-show-chips {
  display: flex;
  align-items: center;
  gap: 6px;
}
.cal-chip {
  padding: 4px 10px;
  border-radius: var(--r-sm);
  font-size: 11px;
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--surface-2);
  color: var(--ink-3);
  border: 1px solid var(--line-soft);
  cursor: pointer;
  transition: background 0.1s, color 0.1s, border-color 0.1s;
  font-weight: 500;
}
.cal-chip:hover { color: var(--ink); }
.cal-chip.active {
  background: var(--accent-dim);
  color: var(--accent);
  border-color: transparent;
}

/* ============================================================
   Schedule v2 — Sidebar polish + right-pane header
   ============================================================ */
.sched-phot-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 8px 0;
}
.sched-phot-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 14px;
  background: transparent;
  border: 0;
  border-left: 2px solid transparent;
  border-radius: 0;
  text-align: left;
  cursor: pointer;
  transition: background 0.1s;
  color: inherit;
  font: inherit;
}
.sched-phot-item:hover { background: var(--surface-2); }
.sched-phot-item.active {
  background: var(--surface-2);
  border-left-color: var(--accent);
}
.sched-phot-item.active .sched-phot-name { color: var(--ink); font-weight: 500; }

.sched-phot-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.sched-phot-name { font-size: 13px; color: var(--ink); }
.sched-phot-status {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-4);
}

/* Right-pane photographer header */
.sched-phot-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 24px;
}
.sched-phot-avatar-lg {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  color: white;
  font-size: 16px;
  flex-shrink: 0;
}
.sched-phot-header-name {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 26px;
  color: var(--ink);
  font-weight: 400;
  line-height: 1.1;
}
.sched-phot-header-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-3);
  margin-top: 3px;
}

/* ============================================================
   Photographer mobile v2 — Eyebrow + italic date + time gutter
   ============================================================ */
.phot-header {
  background: var(--bg);
  border-bottom: 1px solid var(--line-soft);
  padding: 14px 18px 12px;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  position: sticky;
  top: 52px;
  z-index: 10;
}
.phot-header-left h1 {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 30px;
  color: var(--ink);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.01em;
}
.phot-header-left p {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-4);
  margin-top: 2px;
  order: -1; /* Display eyebrow ABOVE the date */
}
.phot-header-left { display: flex; flex-direction: column; }

.phot-header-center {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  justify-content: space-between;
  flex: none;
  width: 100%;
}
.phot-view-btn {
  font-size: 12px;
  padding: 4px 10px;
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
  color: var(--ink-3);
  cursor: pointer;
  font-family: inherit;
}
.phot-view-btn.active {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--line);
  font-weight: 500;
}

.phot-job-list {
  padding: 8px 16px 22px;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.phot-job-card {
  /* Block layout so the expanded body slides DOWN under the header
     instead of becoming a flex sibling that gets clipped off-screen
     on mobile widths. The header itself is still flex internally. */
  display: block;
  padding: 14px 4px;
  background: transparent;
  border: 0;
  border-radius: 0;
  border-top: 1px solid var(--line-soft);
  overflow: visible;
  position: relative;
}
.phot-job-card:first-child { border-top: 0; }
.phot-job-card.live::before {
  content: '';
  position: absolute;
  inset: 6px -8px 6px -8px;
  background: color-mix(in oklch, var(--accent) 6%, transparent);
  border-radius: var(--r-sm);
  z-index: -1;
}
.phot-card-header {
  display: flex;
  gap: 12px;
  flex: 1;
  align-items: stretch;
  cursor: pointer;
  user-select: none;
  padding: 0;
}
/* Time gutter */
.phot-card-time {
  width: 56px;
  flex-shrink: 0;
  font-family: var(--font-mono);
  text-align: right;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.4;
}
.phot-card-time-sub {
  font-size: 10px;
  font-weight: 400;
  color: var(--ink-4);
}
/* Card body in inner div */
.phot-card-inner {
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-left-width: 3px;
  border-radius: var(--r-sm);
}
.phot-job-card.live .phot-card-inner {
  background: color-mix(in oklch, var(--accent) 10%, var(--surface));
  border-color: var(--accent);
}
.phot-card-client {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  margin-top: 4px;
}
.phot-card-row { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.phot-card-location {
  font-size: 12px;
  color: var(--ink-2);
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ==================================================================
   Nav alerts popover (bell dropdown)
   ================================================================== */
.nav-alerts-pop {
  position: fixed;
  z-index: 9000;
  width: 320px;
  /* Cap at ~600px so an expanded section scrolls internally rather than
     running off the viewport. 85vh keeps it on screen on short displays. */
  max-height: min(600px, 85vh);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-pop);
}
.nav-alerts-pop-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line-soft);
}
.nav-alerts-pop-title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 18px;
  color: var(--ink);
}
.nav-alerts-pop-close {
  background: transparent;
  border: none;
  color: var(--ink-2);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: var(--r-sm);
}
.nav-alerts-pop-close:hover { color: var(--ink-2); background: var(--surface-3); }
.nav-alerts-pop-body { overflow-y: auto; padding: 6px 0; }
.nav-alert-group-title {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
  padding: 10px 14px 4px;
}
.nav-alert-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 14px;
  text-decoration: none;
  color: inherit;
  border-left: 2px solid transparent;
}
.nav-alert-row:hover {
  background: var(--surface-3);
  border-left-color: var(--accent);
}
.nav-alert-row-title { font-size: 13px; color: var(--ink); }
.nav-alert-row-sub   { font-family: var(--font-mono); font-size: 11px; color: var(--ink-2); }
.nav-alert-empty {
  padding: 24px 14px;
  text-align: center;
  color: var(--ink-2);
  font-size: 13px;
}
.nav-alert-empty-sub {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-2);
}
/* Expand/collapse toggle for a section with more than 5 alerts. Rendered as a
   real <button> so it's keyboard-reachable — it used to be an <a> to
   alerts.html, which navigated away instead of expanding in place. */
.nav-alert-group-more {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--accent);
  text-decoration: none;
  padding: 4px 14px 8px;
  cursor: pointer;
  transition: color 0.12s, background 0.12s;
}
.nav-alert-group-more:hover {
  color: var(--accent-2, var(--accent));
  background: var(--surface-3);
}
.nav-alert-group-more:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.nav-alert-view-all {
  display: block;
  padding: 10px 16px;
  text-align: center;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  border-top: 1px solid var(--line-soft);
  margin-top: 4px;
  background: var(--surface-2);
  transition: background 0.12s;
}
.nav-alert-view-all:hover {
  background: var(--surface-3);
  text-decoration: underline;
}

/* ==================================================================
   Schedule sidebar — header with "+ Add"
   ================================================================== */
.sched-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 4px;
}
.sched-sidebar-add {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--accent);
  text-decoration: none;
  padding: 2px 6px;
  border-radius: var(--r-sm);
  transition: background 0.12s;
}
.sched-sidebar-add:hover {
  background: color-mix(in oklch, var(--accent) 14%, transparent);
}

/* ==================================================================
   Photographer mobile — header stats row + bottom tab bar
   ================================================================== */
.phot-header-stats {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-3);
}
.phot-header-stats .phot-stat strong {
  color: var(--ink);
  font-weight: 600;
}
.phot-header-stats .phot-stat-now {
  color: var(--accent);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
}
.phot-header-stats .phot-stat-sep {
  color: var(--ink-4);
}

/* Bottom tab bar — sticky, mobile-style */
.phot-tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: var(--surface);
  border-top: 1px solid var(--line);
  padding: 6px 0 calc(6px + env(safe-area-inset-bottom));
}
.phot-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  background: transparent;
  border: none;
  color: var(--ink-3);
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 0.04em;
  cursor: pointer;
  padding: 6px 0;
}
.phot-tab svg { display: block; }
.phot-tab.active { color: var(--accent); }
.phot-tab:active { transform: scale(0.96); }

/* Make sure the job list doesn't sit behind the tabbar */
.phot-job-list { padding-bottom: 84px; }

/* ==================================================================
   Inbox snooze menu (15m / 1h / 4h / Tomorrow)
   ================================================================== */
.inbox-snooze-menu {
  position: fixed;
  z-index: 9100;
  width: 180px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-pop);
  padding: 4px;
  display: flex;
  flex-direction: column;
}
.inbox-snooze-opt {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  background: transparent;
  border: none;
  color: var(--ink-2);
  font-family: var(--font-sans);
  font-size: 13px;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  cursor: pointer;
  text-align: left;
}
.inbox-snooze-opt:hover { background: var(--surface-3); }
.inbox-snooze-opt-label { font-weight: 500; }
.inbox-snooze-opt-sub {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-4);
  letter-spacing: 0.04em;
}

/* ==================================================================
   Empty-day cheeky message rotator
   ================================================================== */
.empty-day-cheeky {
  text-align: center;
  padding: 60px 24px;
}
.empty-day-quote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 28px;
  line-height: 1.2;
  color: var(--ink-2);
  margin: 0 0 8px;
}
.empty-day-attr {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.empty-day-sub {
  margin-top: 18px;
  font-size: 13px;
  color: var(--ink-3);
}

/* Inbox row meta (e.g. "in 45m" timer on Snoozed tab) */
.inbox-row-meta {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-4);
  align-self: center;
  margin-right: 4px;
}

/* ==================================================================
   Reports — new DOM-based charts (donut + photog bars + status pipe)
   ================================================================== */
.rpt-empty-tiny {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-4);
  padding: 24px 0;
  text-align: center;
}

/* Donut: SVG on the left, color legend on the right */
.rpt-donut-wrap {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 160px;
}
.rpt-donut-svg {
  width: 140px;
  height: 140px;
  flex-shrink: 0;
}
.rpt-donut-num {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 22px;
  fill: var(--ink);
}
.rpt-donut-lbl {
  font-family: var(--font-mono);
  font-size: 8px;
  fill: var(--ink-3);
  letter-spacing: 0.1em;
}
.rpt-donut-legend {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}
.rpt-donut-legend-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}
.rpt-donut-legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  flex-shrink: 0;
}
.rpt-donut-legend-name {
  color: var(--ink-2);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rpt-donut-legend-n {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--ink-4);
  font-size: 11px;
}

/* By Photographer — avatar | name | bar | count */
.rpt-photbars {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 160px;
}
.rpt-photbar-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
}
.rpt-photbar-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  font-size: 9.5px;
  font-weight: 700;
  color: white;
  letter-spacing: 0.02em;
}
.rpt-photbar-name {
  width: 78px;
  color: var(--ink-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex-shrink: 0;
}
.rpt-photbar-track {
  flex: 1;
  height: 14px;
  background: var(--surface-2);
  border-radius: 2px;
  overflow: hidden;
}
.rpt-photbar-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.2s;
  /* v2 muted treatment — drop saturation slightly so the rainbow of
     photographer colors doesn't compete with the rest of the report's
     refined typography. */
  opacity: 0.75;
}
.rpt-photbar-n {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  width: 30px;
  text-align: right;
  color: var(--ink-3);
  font-size: 11px;
}

/* Status Pipeline — stage rows with status color */
.rpt-statuspipe {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 160px;
}
.rpt-stage-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
}
.rpt-stage-label {
  width: 110px;
  color: var(--ink-2);
  flex-shrink: 0;
}
.rpt-stage-track {
  flex: 1;
  height: 12px;
  background: var(--surface-2);
  border-radius: 2px;
  overflow: hidden;
}
.rpt-stage-fill {
  height: 100%;
  border-radius: 2px;
  /* Same muting as photographer bars — keeps the pipeline status colors
     legible without overpowering the rest of the page's typography. */
  opacity: 0.78;
}
.rpt-stage-n {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  width: 38px;
  text-align: right;
  color: var(--ink-3);
  font-size: 11px;
}

/* ==================================================================
   Schedule — 7-day card grid (replaces the legacy table)
   ================================================================== */
.sched-week-card-wrap {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  padding: 16px;
}
.sched-week-grid {
  display: grid;
  /* minmax(0, 1fr) lets columns shrink below their content min size so
     SAT and SUN don't push the grid wider than its container on narrow
     viewports. */
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
}
.sched-day-card {
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 10px 6px;
  background: var(--surface-2);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 0;
  overflow: hidden;
  transition: border-color 0.12s, background 0.12s;
}
.sched-day-card-off {
  border-color: var(--line-soft);
  background: transparent;
  opacity: 0.55;
}
.sched-day-eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.sched-day-times {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  margin-top: 2px;
}
.sched-day-time {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  color: var(--ink);
  font-weight: 500;
  line-height: 1.4;
}
.sched-day-sep {
  color: var(--ink-4);
  font-size: 9px;
  margin: 1px 0;
}
.sched-day-off-label {
  margin-top: 8px;
  font-size: 11px;
  color: var(--ink-4);
}
.sched-day-edit {
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-3);
  background: transparent;
  border: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: var(--r-sm);
}
.sched-day-edit:hover {
  color: var(--ink);
  background: var(--surface-3);
  text-decoration: none;
}
.sched-week-applies {
  margin-top: 14px;
  padding: 10px 12px;
  background: var(--surface-2);
  border-radius: var(--r-sm);
  font-size: 12px;
  color: var(--ink-3);
  display: flex;
  align-items: center;
  gap: 8px;
}
.sched-week-applies svg {
  color: var(--accent);
  flex-shrink: 0;
}

/* Mobile: stack to 2 columns so cards stay readable */
@media (max-width: 700px) {
  .sched-week-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   Phase 8A — Requester Portal
   ============================================================ */

/* ── Nav: pending-request badge ─────────────────────────────── */
.nav-requests-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 17px;
  height: 17px;
  border-radius: 9px;
  background: var(--warn);
  color: var(--accent-ink);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  padding: 0 5px;
  margin-left: 2px;
  line-height: 1;
}

/* ── Portal shell ───────────────────────────────────────────── */
.rq-nav-label {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-family: var(--font-mono);
  color: var(--ink-4);
}

.rq-wrap {
  max-width: 820px;
  margin: 0 auto;
  padding: 28px 20px 80px;
}

.rq-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: 22px;
}

.rq-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--ink-3);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  padding: 9px 14px;
  margin-bottom: -1px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: color 0.14s, border-color 0.14s;
}
.rq-tab:hover  { color: var(--ink); }
.rq-tab.active { color: var(--ink); border-bottom-color: var(--accent); }
.rq-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.rq-tab-count {
  display: none;
  min-width: 17px;
  height: 17px;
  border-radius: 9px;
  background: var(--warn);
  color: var(--accent-ink);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  padding: 0 5px;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.rq-tab-count:not(:empty) { display: inline-flex; }

/* ── Request form card ──────────────────────────────────────── */
.rq-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}

.rq-card-header {
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--line-soft);
}
.rq-card-title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 22px;
  font-weight: 400;
  color: var(--ink);
  margin: 0 0 4px;
  line-height: 1.15;
}
.rq-card-sub {
  font-size: 13px;
  color: var(--ink-3);
  margin: 0;
}

.rq-card-body { padding: 24px; }

.rq-section { margin-bottom: 28px; }
.rq-section:last-child { margin-bottom: 0; }

.rq-section-title {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line-soft);
}

.rq-note {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.5;
  color: var(--ink-3);
  margin: -4px 0 14px;
}

.rq-row {
  display: grid;
  gap: 14px;
  margin-bottom: 14px;
}
.rq-row.one   { grid-template-columns: 1fr; }
.rq-row.two   { grid-template-columns: 1fr 1fr; }
.rq-row.three { grid-template-columns: 1fr 1fr 1fr; }
.rq-row:last-child { margin-bottom: 0; }

.rq-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 24px;
  border-top: 1px solid var(--line-soft);
  background: var(--surface-2);
}

/* Location autocomplete */
.rq-autocomplete {
  position: absolute;
  top: calc(100% + 4px);
  left: 0; right: 0;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  max-height: 220px;
  overflow-y: auto;
  z-index: 60;
  display: none;
  box-shadow: var(--shadow);
}
.rq-autocomplete.open { display: block; }
.rq-autocomplete-item {
  padding: 8px 12px;
  font-size: 13px;
  color: var(--ink-2);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
}
.rq-autocomplete-item:hover { background: var(--surface-3); }
.rq-autocomplete-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-4);
  background: var(--surface);
  padding: 2px 6px;
  border-radius: 3px;
  flex-shrink: 0;
}

/* ── Submission confirmation ────────────────────────────────── */
.rq-success {
  display: none;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 52px 32px;
  gap: 10px;
}
.rq-success-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: color-mix(in oklch, var(--s-delivered) 18%, transparent);
  color: var(--s-delivered);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
}
.rq-success-title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 26px;
  font-weight: 400;
  color: var(--ink);
  margin: 0;
}
.rq-success-number {
  font-family: var(--font-mono);
  font-size: 34px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--accent);
  margin: 2px 0;
}
.rq-success-when {
  font-size: 14px;
  color: var(--ink-2);
  margin: 0;
}
.rq-success-line {
  font-size: 13px;
  color: var(--ink-3);
  margin: 6px 0 0;
  max-width: 380px;
  line-height: 1.55;
}
.rq-success-actions {
  display: flex;
  gap: 10px;
  margin-top: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

/* ── My Requests list ───────────────────────────────────────── */
.rq-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rq-empty {
  padding: 48px 20px;
  text-align: center;
  font-size: 14px;
  color: var(--ink-3);
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
}

.rq-item {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: border-color 0.14s;
}
.rq-item:hover     { border-color: var(--line); }
.rq-item.expanded  { border-color: var(--line); }

.rq-item-head {
  width: 100%;
  display: grid;
  grid-template-columns: 84px 1fr auto auto;
  align-items: center;
  gap: 14px;
  padding: 13px 16px;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  font-family: var(--font-sans);
}
.rq-item-head:hover { background: var(--surface-2); }
.rq-item-head:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.rq-num {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink-4);
}
.rq-client {
  font-size: 14px;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rq-when {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-3);
  white-space: nowrap;
}

.rq-chip {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 3px 9px;
  border-radius: 20px;
  white-space: nowrap;
}
.rq-chip-pending   { color: var(--ink-3);       background: color-mix(in oklch, var(--ink-3)       16%, transparent); }
.rq-chip-info      { color: var(--warn);        background: color-mix(in oklch, var(--warn)        16%, transparent); }
.rq-chip-approved  { color: var(--s-delivered); background: color-mix(in oklch, var(--s-delivered) 16%, transparent); }
.rq-chip-declined  { color: var(--danger);      background: color-mix(in oklch, var(--danger)      16%, transparent); }
.rq-chip-withdrawn { color: var(--ink-4);       background: color-mix(in oklch, var(--ink-4)       16%, transparent); }

.rq-item-body {
  padding: 4px 16px 16px;
  border-top: 1px solid var(--line-soft);
}

.rq-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 12px 18px;
  padding-top: 14px;
}
.rq-detail-grid-tight { padding-top: 10px; }

.rq-detail-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-4);
  margin-bottom: 3px;
}
.rq-detail-val {
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.45;
  word-break: break-word;
}

/* The confirmed / rescheduled line — the most important row on the page */
.rq-confirmed {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: var(--r);
  background: color-mix(in oklch, var(--s-delivered) 10%, transparent);
  border: 1px solid color-mix(in oklch, var(--s-delivered) 30%, transparent);
  color: var(--s-delivered);
  font-size: 15px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.rq-confirmed-moved {
  background: color-mix(in oklch, var(--warn) 10%, transparent);
  border-color: color-mix(in oklch, var(--warn) 32%, transparent);
  color: var(--warn);
}
.rq-confirmed-was {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink-3);
  text-decoration: line-through;
}
.rq-confirmed-arrow { color: var(--ink-4); }
.rq-confirmed-note {
  margin-top: 6px;
  font-size: 12px;
  color: var(--warn);
}

.rq-declined {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: var(--r);
  background: color-mix(in oklch, var(--danger) 8%, transparent);
  border: 1px solid color-mix(in oklch, var(--danger) 28%, transparent);
}
.rq-declined-title {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--danger);
  margin-bottom: 5px;
}
.rq-declined-reason {
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.5;
}

/* Message thread + reply */
.rq-thread {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.rq-thread-loading,
.rq-thread-empty {
  font-size: 12px;
  color: var(--ink-4);
}
.rq-msg {
  padding: 10px 12px;
  border-radius: var(--r);
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
}
.rq-msg-mine {
  background: color-mix(in oklch, var(--accent) 7%, transparent);
  border-color: color-mix(in oklch, var(--accent) 22%, transparent);
}
.rq-msg-who {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-4);
  margin-bottom: 4px;
}
.rq-msg-body {
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.5;
  white-space: pre-wrap;
}

.rq-reply { margin-top: 14px; }
.rq-reply-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-4);
  margin-bottom: 6px;
}
.rq-reply-input {
  width: 100%;
  box-sizing: border-box;
  padding: 9px 12px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  color: var(--ink);
  font-family: inherit;
  font-size: 13px;
  resize: vertical;
}
.rq-reply-input:focus { outline: none; border-color: var(--accent); }
.rq-reply-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 8px;
}

.rq-item-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line-soft);
}

@media (max-width: 680px) {
  .rq-row.two, .rq-row.three { grid-template-columns: 1fr; }
  .rq-item-head {
    grid-template-columns: 1fr auto;
    row-gap: 6px;
  }
  .rq-num  { grid-column: 1; }
  .rq-chip { grid-column: 2; grid-row: 1; }
  .rq-client, .rq-when { grid-column: 1 / -1; }
}

/* ============================================================
   Phase 8A — Editor request queue + Review Sheet
   ============================================================ */

.rvq-page {
  max-width: 1080px;
  margin: 0 auto;
  padding: 24px 22px 72px;
}

.rvq-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: 20px;
}
.rvq-eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-4);
  line-height: 1;
  margin-bottom: 4px;
}
.rvq-title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 26px;
  font-weight: 400;
  color: var(--ink);
  line-height: 1.1;
  margin: 0;
}

.rvq-filters { display: flex; gap: 4px; flex-wrap: wrap; }
.rvq-filter {
  background: none;
  border: 1px solid transparent;
  border-radius: var(--r);
  color: var(--ink-3);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  padding: 6px 11px;
  cursor: pointer;
  transition: color 0.14s, background 0.14s, border-color 0.14s;
}
.rvq-filter:hover  { color: var(--ink); background: var(--surface-2); }
.rvq-filter.active {
  color: var(--ink);
  background: var(--surface-2);
  border-color: var(--line);
}

.rvq-empty {
  padding: 60px 20px;
  text-align: center;
  font-size: 14px;
  color: var(--ink-3);
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
}

.rvq-group { margin-bottom: 28px; }
.rvq-group-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 10px;
}
.rvq-group-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--surface-3);
  color: var(--ink-2);
  font-size: 10px;
}

.rvq-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 10px;
}

.rvq-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-md);
  cursor: pointer;
  font-family: var(--font-sans);
  transition: border-color 0.14s, background 0.14s, transform 0.1s;
}
.rvq-card:hover {
  background: var(--surface-2);
  border-color: var(--line);
  border-left-color: var(--accent);
}
.rvq-card:active { transform: translateY(1px); }
.rvq-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Left accent carries the status */
.rvq-card-info_needed { border-left-color: var(--warn); }
.rvq-card-approved    { border-left-color: var(--s-delivered); }
.rvq-card-declined    { border-left-color: var(--danger); }
.rvq-card-withdrawn   { border-left-color: var(--ink-4); }

.rvq-card-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 2px;
}
.rvq-card-num {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink-4);
}
.rvq-card-type {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--cool);
  background: var(--cool-dim);
  padding: 2px 6px;
  border-radius: 3px;
}
.rvq-card-ago {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-4);
}
.rvq-card-client {
  font-size: 15px;
  color: var(--ink);
  line-height: 1.3;
}
.rvq-card-headline {
  font-size: 12px;
  color: var(--ink-3);
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rvq-card-when {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-2);
  margin-top: 2px;
}
.rvq-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px solid var(--line-soft);
  font-size: 11.5px;
  color: var(--ink-3);
}
.rvq-card-loc { color: var(--ink-4); }

/* ── Review Sheet body ──────────────────────────────────────── */
.rvs-block { display: flex; flex-direction: column; gap: 8px; }

.rvs-requester {
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r);
}
.rvs-requester-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}
.rvs-requester-office {
  font-size: 12.5px;
  color: var(--ink-2);
  margin-top: 1px;
}
.rvs-requester-contact {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--ink-3);
}
.rvs-requester-sub {
  margin-top: 6px;
  font-size: 11px;
  color: var(--ink-4);
}

.rvs-facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 16px;
}
.rvs-fact-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-4);
  margin-bottom: 2px;
}
.rvs-fact-val {
  font-size: 13px;
  color: var(--ink);
  line-height: 1.4;
  word-break: break-word;
}

.rvs-notes {
  margin-top: 8px;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r);
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.55;
  white-space: pre-wrap;
}

.rvs-approved {
  padding: 10px 12px;
  border-radius: var(--r);
  background: color-mix(in oklch, var(--s-delivered) 10%, transparent);
  border: 1px solid color-mix(in oklch, var(--s-delivered) 28%, transparent);
  font-size: 13px;
  color: var(--ink-2);
}

/* Availability preview — internal only */
.rvs-avail {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r);
}
.rvs-avail-loading { font-size: 12px; color: var(--ink-4); padding: 2px; }
.rvs-avail-summary {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding-bottom: 6px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--line-soft);
}
.rvs-avail-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 2px;
  font-size: 12.5px;
}
.rvs-avail-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--ink-4);
}
.rvs-avail-name { color: var(--ink); }
.rvs-avail-detail {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-4);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 55%;
}
.rvs-avail-free    .rvs-avail-dot { background: var(--s-delivered); }
.rvs-avail-free    .rvs-avail-detail { color: var(--s-delivered); }
.rvs-avail-busy    .rvs-avail-dot { background: var(--warn); }
.rvs-avail-outside .rvs-avail-dot { background: var(--ink-4); }
.rvs-avail-off     .rvs-avail-dot { background: var(--danger); }
.rvs-avail-off     .rvs-avail-name,
.rvs-avail-outside .rvs-avail-name { color: var(--ink-3); }

.rvs-avail-note {
  font-size: 11px;
  color: var(--ink-4);
  font-style: italic;
}

/* Inline action strips */
.rvs-strip {
  padding: 14px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.rvs-strip-title {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.rvs-strip-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}
.rvs-strip-grid.two { grid-template-columns: 1fr 1fr; }
.rvs-strip-textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 9px 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  color: var(--ink);
  font-family: inherit;
  font-size: 13px;
  resize: vertical;
}
.rvs-strip-textarea:focus { outline: none; border-color: var(--accent); }
.rvs-strip-hint { font-size: 11px; color: var(--ink-4); }
.rvs-strip-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.rvs-reschedule-note {
  padding: 8px 10px;
  border-radius: var(--r);
  background: color-mix(in oklch, var(--warn) 12%, transparent);
  border: 1px solid color-mix(in oklch, var(--warn) 32%, transparent);
  color: var(--warn);
  font-size: 12.5px;
}

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

/* ============================================================
   Phase 8A — Settings: Requesters
   ============================================================ */

.sp-req-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 20px;
  border-bottom: 1px solid var(--border-light);
}
.sp-req-row-last { border-bottom: none; }

.sp-req-main { flex: 1; min-width: 0; }
.sp-req-name {
  font-size: 14px;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sp-req-sub {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sp-req-count {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}
.sp-req-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.sp-status-badge.sp-invite-pending {
  background: color-mix(in oklch, var(--warn) 18%, transparent);
  color: var(--warn);
}
.sp-status-badge.sp-invite-accepted {
  background: color-mix(in oklch, var(--s-delivered) 18%, transparent);
  color: var(--s-delivered);
}
.sp-status-badge.sp-invite-expired {
  background: var(--bg-tertiary);
  color: var(--text-muted);
}

/* Toast variant used when an approval succeeds with a warning */
.toast.warn { border-color: var(--warn); color: var(--warn); }

/* Approval refused because of a time conflict — stays until it's resolved */
.rvs-strip-conflict {
  padding: 9px 11px;
  border-radius: var(--r);
  background: color-mix(in oklch, var(--danger) 10%, transparent);
  border: 1px solid color-mix(in oklch, var(--danger) 38%, transparent);
  color: var(--danger);
  font-size: 12.5px;
  line-height: 1.5;
}

/* Collapsed filter rail — the funnel has to read as "filters" on its own,
   and an active filter needs to be visible while the panel is shut. */
.cfs-collapse-btn-icon {
  position: relative;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cfs-collapse-btn.cfs-has-filters { color: var(--accent); }
.cfs-filter-dot {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  border: 1px solid var(--bg);
}
.cal-filter-sidebar.collapsed { cursor: pointer; }
.cal-filter-sidebar.collapsed:hover .cfs-collapse-btn {
  color: var(--ink);
  background: var(--surface-2);
}

/* ── Settings → Email (Phase 8A-2) ────────────────────────────────────────── */

/* Configured or not is the first thing an admin needs to know here — if the key
   is missing, every row below is a row that never left the building. */
.sp-email-strip {
  padding: 11px 14px;
  border-radius: var(--r);
  font-size: 13px;
  line-height: 1.5;
  border: 1px solid transparent;
}
.sp-email-strip-ok {
  background: color-mix(in oklch, var(--s-delivered) 12%, transparent);
  border-color: color-mix(in oklch, var(--s-delivered) 38%, transparent);
  color: var(--s-delivered);
}
.sp-email-strip-off {
  background: color-mix(in oklch, var(--warn) 12%, transparent);
  border-color: color-mix(in oklch, var(--warn) 38%, transparent);
  color: var(--warn);
}
.sp-email-strip-muted {
  background: var(--bg-tertiary);
  color: var(--text-muted);
}

.sp-email-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 11px 20px;
  border-bottom: 1px solid var(--border-light);
}
.sp-email-row-last { border-bottom: none; }
.sp-email-when {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text-muted);
  white-space: nowrap;
  flex: 0 0 118px;
}
.sp-email-main { flex: 1; min-width: 0; }
.sp-email-to {
  font-size: 13.5px;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sp-email-sub {
  font-size: 11.5px;
  color: var(--text-muted);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sp-email-req {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}

/* The three failure states share one red: for the reader they mean the same
   thing — this message did not land. */
.sp-status-badge.sp-email-delivered {
  background: color-mix(in oklch, var(--s-delivered) 18%, transparent);
  color: var(--s-delivered);
}
.sp-status-badge.sp-email-sent {
  background: var(--bg-tertiary);
  color: var(--text-secondary);
}
.sp-status-badge.sp-email-queued {
  background: var(--bg-tertiary);
  color: var(--text-muted);
}
.sp-status-badge.sp-email-bounced,
.sp-status-badge.sp-email-complained,
.sp-status-badge.sp-email-failed {
  background: color-mix(in oklch, var(--danger) 16%, transparent);
  color: var(--danger);
}

/* Members: the per-user opt-out sits with the person it applies to. */
.sp-phot-notify {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: var(--text-muted);
  white-space: nowrap;
  flex-shrink: 0;
  cursor: pointer;
}
.sp-phot-notify input { cursor: pointer; margin: 0; }