/* Video department — refined operations console.
 *
 * Class prefix: `vd-`. Status pills use the temperature palette (cold,
 * warm, active, alert, mute) — semantic across the whole 10-status chain,
 * not hard-coded per status. The `--accent` (#f5a623) is reserved for
 * primary actions only; KPI accents use the temperature colors.
 */

/* === Temperature palette tokens ============================
 * 2026-06-22 alignment: the video dept now shares the SAME neutral
 * "operations console" aesthetic as the production / editorial / design
 * sheets — white cards, #f8f9fb sticky headers, #6b7280 muted labels,
 * #e5e7eb borders, capsule status pills, orange (#f5a623) reserved for
 * CTAs/active only. The temperature pills keep their semantic hues but
 * are toned to match the production status-pill look. */
:root {
  --vd-st-cold-bg:   #eff6ff;  --vd-st-cold-fg:   #1d4ed8;
  --vd-st-warm-bg:   #fff7ed;  --vd-st-warm-fg:   #c2410c;
  --vd-st-active-bg: #f0fdf4;  --vd-st-active-fg: #15803d;
  --vd-st-alert-bg:  #fef2f2;  --vd-st-alert-fg:  #b91c1c;
  --vd-st-mute-bg:   #f1f5f9;  --vd-st-mute-fg:   #475569;

  --vd-surface:    #ffffff;
  --vd-surface-2:  #f8f9fb;
  --vd-border:     #e5e7eb;
  --vd-border-2:   #d1d5db;
  --vd-text:       #1a1a1a;
  --vd-text-2:     #6b7280;
  --vd-text-3:     #94a3b8;

  --vd-radius-sm: 6px;
  --vd-radius:    8px;
  --vd-radius-lg: 12px;
  --vd-shadow-1: 0 1px 2px rgba(15, 23, 42, 0.03);
  --vd-shadow-2: 0 6px 24px rgba(15, 23, 42, 0.06);

  --vd-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

/* === Page shell ============================================
 * Matches the production sheet wrap: 24px padding, a 22px/700 section
 * heading with a muted count beneath, generous whitespace. */
.vd-page { display: flex; flex-direction: column; gap: 18px; padding: 24px; }
.vd-eyebrow {
  font-family: var(--vd-font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--vd-text-3);
}
.vd-section-hdr {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 4px;
}
.vd-section-hdr h2 {
  margin: 0;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--vd-text);
  font-weight: 700;
}
.vd-section-count {
  font-size: 13px;
  color: var(--vd-text-2);
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
}

/* === Status pill (capsule, matches .prod-status-pill) ======
 * A rounded capsule with a colored dot, 13px/600 label, a faint tint of
 * the status colour on white, and a 1px border in the same hue — exactly
 * the production status-pill shape. The temperature class supplies the
 * --vd-pc (pill colour) used for the dot + border + tint. */
.vd-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 10px;
  border: 1px solid var(--vd-pc, #e5e7eb);
  border-radius: 999px;
  background: color-mix(in srgb, var(--vd-pc, #e5e7eb) 12%, #fff);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0;
  white-space: nowrap;
  color: #1f2937;
}
.vd-pill::before {
  content: "";
  flex: 0 0 auto;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--vd-pc, #94a3b8);
  opacity: 1;
}
.vd-pill-cold   { --vd-pc: var(--vd-st-cold-fg); }
.vd-pill-warm   { --vd-pc: var(--vd-st-warm-fg); }
.vd-pill-active { --vd-pc: var(--vd-st-active-fg); }
.vd-pill-alert  { --vd-pc: var(--vd-st-alert-fg); }
.vd-pill-mute   { --vd-pc: #94a3b8; }

/* Pill label + chevron — the per-status colour is set inline as --vd-pc by
 * videoUtils.renderStatusPill (sourced from PRODUCTION_STATUS_OPTIONS), so the
 * pill matches the other departments exactly. The dot is the ::before above. */
.vd-pill { max-width: 100%; }
.vd-pill-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vd-pill-chev {
  flex: 0 0 auto;
  display: inline-flex;
  color: #9ca3af;
  margin-left: 1px;
}
.vd-pill-chev svg { display: block; }

/* Interactive status trigger — mirrors .prod-status-pill's hover deepen. */
.vd-pill-interactive,
.vd-pill.vd-status-trigger {
  cursor: pointer;
  user-select: none;
  transition: background .12s ease, border-color .12s ease;
}
.vd-pill.vd-status-trigger:hover {
  background: color-mix(in srgb, var(--vd-pc, #e5e7eb) 22%, #fff);
}

/* === Status dropdown menu (matches .prod-status-menu) ======
 * The popover anchored under an editable status pill. Rows are a colored dot
 * + label, left-aligned, with a hover background — identical in feel to the
 * status menus on the production / editorial / design sheets. */
.vd-status-menu {
  /* Body-portaled + fixed so the sheet's overflow never clips it; top/left are
   * set from JS, anchored to the trigger pill's getBoundingClientRect(). */
  position: fixed;
  z-index: 4000;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 200px;
  max-width: 280px;
  max-height: 280px;
  overflow-y: auto;
  padding: 6px;
  background: var(--vd-surface, #fff);
  border: 1px solid var(--vd-border, #e5e7eb);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .14);
}
.vd-status-option {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 8px 10px;
  border: none;
  border-radius: 7px;
  background: transparent;
  color: #1f2937;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
}
.vd-status-option:hover { background: #f1f5f9; }
.vd-status-option.is-current { background: #eef2ff; font-weight: 600; }
.vd-status-option.is-blocked { opacity: 0.45; cursor: not-allowed; }
.vd-status-option-dot {
  flex: 0 0 auto;
  width: 11px;
  height: 11px;
  border-radius: 50%;
}
.vd-status-option-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* === Type tag (subtle, no dot) ============================= */
.vd-type-tag {
  display: inline-flex;
  align-items: center;
  padding: 1px 8px;
  font-size: 10px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  color: #475569;
  border-radius: 999px;
  font-weight: 600;
}

/* === Age badge ============================================= */
.vd-age {
  display: inline-flex;
  align-items: center;
  font-family: var(--vd-font-mono);
  font-size: 11px;
  color: var(--vd-text-3);
}
.vd-age.overdue { color: var(--vd-st-alert-fg); font-weight: 600; }

/* === Stage progress chip =================================== */
.vd-progress {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--vd-font-mono);
  font-size: 11px;
  color: var(--vd-text-2);
}
.vd-progress-track {
  width: 50px; height: 4px;
  background: var(--vd-st-mute-bg);
  border-radius: 999px; overflow: hidden;
}
.vd-progress-fill {
  height: 100%;
  background: var(--vd-st-warm-fg);
  border-radius: 999px;
  transition: width 200ms ease;
}
.vd-progress-fill.full { background: var(--vd-st-active-fg); }

/* === KPI tile ============================================== */
.vd-kpi-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}
.vd-kpi {
  background: var(--vd-surface);
  border-radius: var(--vd-radius-lg);
  border: 1px solid var(--vd-border);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
  overflow: hidden;
}
.vd-kpi-accent {
  position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: #94a3b8;
}
.vd-kpi-accent.cold   { background: var(--vd-st-cold-fg); }
.vd-kpi-accent.warm   { background: var(--vd-st-warm-fg); }
.vd-kpi-accent.active { background: var(--vd-st-active-fg); }
.vd-kpi-accent.alert  { background: var(--vd-st-alert-fg); }
.vd-kpi-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--vd-text-2);
  font-weight: 700;
}
.vd-kpi-value {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.01em;
  font-feature-settings: "tnum";
  color: var(--vd-text);
}
.vd-kpi-delta { font-size: 12px; color: var(--vd-text-2); }

/* === Panel (matches .dd-card) ============================= */
.vd-panel {
  background: var(--vd-surface);
  border: 1px solid var(--vd-border);
  border-radius: var(--vd-radius-lg);
  overflow: hidden;
}
.vd-panel-hdr {
  padding: 14px 18px;
  border-bottom: 1px solid var(--vd-border);
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--vd-text-2);
}
.vd-panel-hdr .vd-panel-count {
  margin-left: auto;
  background: var(--vd-st-mute-bg); color: var(--vd-st-mute-fg);
  border-radius: 999px; padding: 2px 8px; font-size: 11px;
  font-weight: 600;
  letter-spacing: 0; text-transform: none;
}
.vd-panel-body { padding: 4px 0; }
.vd-panel-row {
  padding: 10px 16px;
  display: flex; align-items: center; gap: 10px;
  border-bottom: 1px solid var(--vd-border);
}
.vd-panel-row:last-child { border-bottom: none; }
.vd-panel-row.clickable { cursor: pointer; }
.vd-panel-row.clickable:hover { background: var(--vd-surface-2); }
.vd-panel-row .vd-row-icon {
  width: 28px; height: 28px; border-radius: 8px;
  background: var(--vd-st-mute-bg); color: var(--vd-st-mute-fg);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; flex-shrink: 0;
}
.vd-panel-row.alert .vd-row-icon { background: var(--vd-st-alert-bg); color: var(--vd-st-alert-fg); }
.vd-panel-row.warm  .vd-row-icon { background: var(--vd-st-warm-bg);  color: var(--vd-st-warm-fg); }
.vd-panel-row.cold  .vd-row-icon { background: var(--vd-st-cold-bg);  color: var(--vd-st-cold-fg); }
.vd-row-title { font-size: 13px; font-weight: 500; color: var(--vd-text); }
.vd-row-sub   { font-size: 12px; color: var(--vd-text-2); }
.vd-row-time  { margin-left: auto; font-family: var(--vd-font-mono); font-size: 11px; color: var(--vd-text-3); }
.vd-row-amount { margin-left: auto; font-family: var(--vd-font-mono); font-size: 13px; font-weight: 600; color: var(--vd-text); white-space: nowrap; }
.vd-budget-grand { border-top: 2px solid var(--vd-border, #e5e7eb); font-weight: 700; }
.vd-budget-grand .vd-row-title { font-weight: 700; }

/* === Sheet wrapper (sits around proagri-sheet) =============
 * White card with a 1px #e5e7eb border + 8px radius, matching the
 * production .prod-sheet-scroll container. The inner proagri-sheet
 * header is restyled below to the production sticky-header look. */
.vd-sheet-wrap {
  background: var(--vd-surface);
  border: 1px solid var(--vd-border);
  border-radius: var(--vd-radius);
  overflow: hidden;
  /* Fill the page column. Inbox 'Awaiting client form', Edits and Shoots all
   * render through this wrap; force the wrap + the proagri-sheet inside it to
   * 100% so the sheet never shrinks to its content width. */
  width: 100%;
  align-self: stretch;
}
.vd-sheet-wrap .proagri-sheet-wrap { width: 100%; }

/* Operations-console table chrome for the proagri-sheet inside the video
 * dept — mirrors .prod-sheet-table thead / rows so the Inbox, Edits and
 * Shoots sheets read exactly like the production / editorial / design
 * sheets: 10-12px uppercase letter-spaced muted #6b7280 headers on a
 * #f8f9fb band, hairline #f0f0f2 row separators, a faint blue-grey row
 * hover, and generous 10px/14px cell padding. */
.vd-sheet-wrap .proagri-sheet-header {
  background: var(--vd-surface-2);
  padding: 10px 14px;
  border-bottom: 1px solid var(--vd-border);
  position: sticky;
  top: 0;
  z-index: 1;
}
.vd-sheet-wrap .proagri-sheet-header-cell {
  font-size: 12px;
  letter-spacing: 0.03em;
  color: var(--vd-text-2);
  font-weight: 600;
}
@media (max-width: 768px) {
  .vd-sheet-wrap .proagri-sheet-header-cell { font-size: 11px; }
}
.vd-sheet-wrap .proagri-sheet-row {
  padding: 10px 14px;
  border-bottom: 1px solid #f0f0f2;
  animation: none;          /* the production sheet has no row-in animation */
}
.vd-sheet-wrap .proagri-sheet-row:last-child { border-bottom: none; }
.vd-sheet-wrap .proagri-sheet-row:hover { background: #f6f8fc; }
.vd-sheet-wrap .proagri-sheet-cell { font-size: 14px; color: var(--vd-text-2); }
.vd-sheet-wrap .proagri-sheet-cell.cell-name { color: var(--vd-text); font-weight: 600; }
.vd-sheet-wrap .proagri-sheet-toolbar {
  padding: 10px 14px;
  border-bottom: 1px solid var(--vd-border);
  background: var(--vd-surface);
}

/* Let video tabs extend past the viewport bottom and scroll the
 * dashboard container instead of capping each sheet. The global
 * .dashboard-content rule sets `overflow: hidden`; we override only
 * when a .vd-page is mounted inside (i.e. on any video tab). Other
 * departments keep their internal-scroll behaviour untouched. */
.dashboard-content:has(.vd-page) {
  overflow-y: auto;
}
.vd-sheet-toolbar {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--vd-border);
  background: var(--vd-surface-2);
  font-size: 12px;
  color: var(--vd-text-2);
}
.vd-sheet-toolbar .vd-sheet-toolbar-title {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--vd-text-2);
}
.vd-sheet-toolbar .vd-sheet-toolbar-chip {
  padding: 3px 8px;
  border: 1px solid var(--vd-border);
  background: var(--vd-surface);
  border-radius: 999px;
}

/* Row-level emphasis applied via proagri-sheet's optional rowClass hook */
.proagri-sheet-row.vd-row-overdue { background: rgba(254, 226, 226, 0.4); }
.proagri-sheet-row.vd-row-overdue:hover { background: rgba(254, 226, 226, 0.55); }
.proagri-sheet-row.vd-row-archived { opacity: 0.6; }

/* Edit-deadline traffic light: a row past its edit deadline (red) demands
 * attention; the day-of (orange) and day-before (yellow) are escalating
 * warnings. Background intensities track the vd-pill-alert / vd-pill-warm
 * palette so the cues are visually consistent across pills, rows, and the
 * dashboard Needs-attention card. */
.proagri-sheet-row.vd-row-past-deadline {
  background: rgba(220, 38, 38, 0.18);
  box-shadow: inset 3px 0 0 0 #dc2626;
}
.proagri-sheet-row.vd-row-past-deadline:hover { background: rgba(220, 38, 38, 0.26); }
.proagri-sheet-row.vd-row-deadline-today {
  background: rgba(245, 158, 11, 0.20);
  box-shadow: inset 3px 0 0 0 #f59e0b;
}
.proagri-sheet-row.vd-row-deadline-today:hover { background: rgba(245, 158, 11, 0.28); }
.proagri-sheet-row.vd-row-deadline-tomorrow {
  background: rgba(234, 179, 8, 0.15);
  box-shadow: inset 3px 0 0 0 #eab308;
}
.proagri-sheet-row.vd-row-deadline-tomorrow:hover { background: rgba(234, 179, 8, 0.22); }

/* === Two-column dashboard grid ============================= */
.vd-dash-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 16px;
}
@media (max-width: 900px) {
  .vd-dash-grid { grid-template-columns: 1fr; }
  .vd-kpi-strip { grid-template-columns: repeat(2, 1fr); }
}

/* === Tab empty / loading states =========================== */
.vd-tab-empty {
  padding: 48px 24px;
  text-align: center;
  color: var(--vd-text-2);
  font-size: 14px;
}
.vd-tab-empty .vd-tab-empty-hint {
  font-size: 12px;
  color: var(--vd-text-3);
  margin-top: 6px;
}

/* === Legacy toolbar + stat-strip (kept while Phase C migrates rest) === */
.vd-toolbar {
  display: flex; gap: 8px; align-items: center;
  padding: 8px 12px;
  border-bottom: 1px solid var(--vd-border);
  flex-wrap: wrap;
}
.vd-toolbar h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--vd-text);
}
.vd-stat-strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; padding: 12px; }
.vd-stat-tile { background: var(--vd-surface); border-left: 3px solid var(--accent, #f5a623); padding: 10px; border-radius: 6px; }
.vd-stat-label { font-size: 11px; color: var(--vd-text-3); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; }
.vd-stat-value { font-size: 1.4em; font-weight: 700; font-feature-settings: "tnum"; color: var(--vd-text); }
.vd-row { display: grid; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--vd-border); align-items: center; font-size: 0.88em; }

/* Old status-pill rules — kept as fallback for tabs not yet migrated. */
.vd-status-pill { padding: 2px 8px; border-radius: 10px; font-size: 0.85em; }
.vd-status-scheduled { background: var(--vd-st-cold-bg); color: var(--vd-st-cold-fg); }
.vd-status-in_progress { background: var(--vd-st-warm-bg); color: var(--vd-st-warm-fg); }
.vd-status-wrapped { background: var(--vd-st-active-bg); color: var(--vd-st-active-fg); }
.vd-status-cancelled { background: var(--vd-st-alert-bg); color: var(--vd-st-alert-fg); }
.vd-status-crew_tbd { background: var(--vd-st-mute-bg); color: var(--vd-st-mute-fg); }

.vd-budget-bar { height: 6px; border-radius: 3px; background: var(--vd-st-mute-bg); overflow: hidden; }
.vd-budget-fill { height: 100%; background: var(--vd-st-active-fg); }
.vd-budget-fill.over { background: var(--vd-st-alert-fg); }
.vd-table { width: 100%; border-collapse: collapse; font-size: 0.88em; }
.vd-table th { text-align: left; padding: 6px 8px; font-weight: 600; color: var(--vd-text-2); border-bottom: 1px solid var(--vd-border); }
.vd-table td { padding: 8px; border-bottom: 1px solid var(--vd-border); }
.vd-clickable { cursor: pointer; }
.vd-clickable:hover { background: var(--vd-surface-2); }
/* ── Shoot detail dashboard ────────────────────────────────────────────────
   No padding of its own: `.vd-page` already pads 24px, and a second padding
   here indented every card 14px further than the page header above it, so the
   back arrow and title never lined up with the cards under them. */
.vd-shoot-grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 5fr);
  gap: 16px;
  align-items: start;
}
.vd-shoot-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

/* `.vd-panel-body` is deliberately `padding: 4px 0` because row-based panels
   get their inset from `.vd-panel-row` (10px 16px). Panels filled with custom
   markup instead had NO horizontal padding at all, which is why the status
   select, the budget total and "+ Assign crew" all sat flush against the card
   border. Additive modifier rather than a change to `.vd-panel-body`, which
   video-dashboard.js also uses. */
.vd-panel-body--pad { padding: 14px 18px; display: flex; flex-direction: column; gap: 12px; }

/* Empty states: a centred orphan line in a tall box read as a broken panel.
   Give it real height, a muted tone and room for the action beneath it. */
.vd-panel-empty {
  padding: 18px 0 4px;
  text-align: center;
  font-size: 12px;
  color: var(--vd-text-3);
}

/* Actions pinned under a panel's content, separated by a rule so the form
   reads as a footer rather than another data row. */
.vd-panel-foot {
  border-top: 1px solid var(--vd-border);
  margin-top: 2px;
  padding-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.vd-panel-foot-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--vd-text-3);
}

/* Budget: the total is the one number that matters, so it leads. The cap sits
   beside it as context, the breakdown below it, controls in the footer. */
.vd-budget-hero { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.vd-budget-total {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--vd-text);
  font-family: var(--vd-font-mono);
  letter-spacing: -0.02em;
}
.vd-budget-cap { font-size: 12px; color: var(--vd-text-2); text-align: right; }
.vd-budget-lines { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--vd-text-2); }
.vd-budget-line { display: flex; justify-content: space-between; gap: 10px; }
.vd-budget-line span:last-child { font-family: var(--vd-font-mono); color: var(--vd-text); }
.vd-budget-exp {
  display: flex; flex-direction: column; gap: 2px;
  border-top: 1px solid var(--vd-border); padding-top: 10px;
}
.vd-budget-exp-row {
  display: flex; align-items: center; gap: 8px; font-size: 12px;
  padding: 4px 0;
}
.vd-budget-exp-row > :first-child {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--vd-text-2);
}
.vd-budget-exp-amt { font-family: var(--vd-font-mono); color: var(--vd-text); }
/* 28px square hit area. The bare 14px "x" was a 10px target. */
.vd-budget-exp-x {
  border: none; background: transparent; cursor: pointer;
  color: var(--vd-text-3); font-size: 16px; line-height: 1;
  width: 28px; height: 28px; border-radius: 6px; flex: 0 0 auto;
  transition: background .15s, color .15s;
}
.vd-budget-exp-x:hover { background: var(--vd-surface-2); color: var(--vd-st-alert-fg, #b91c1c); }
/* Amount is numeric and short, so it does not need to share width equally
   with the category select. */
.vd-budget-add { display: grid; grid-template-columns: minmax(0, 1fr) 104px auto; gap: 8px; }

/* Edit start / Edit end. Side by side while there is room, stacked once each
   field would drop under ~150px, which is where a native date input's
   yyyy/mm/dd text starts colliding with its picker glyph. */
.vd-sched-dates { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.vd-sched-dates > * { min-width: 0; }
@media (max-width: 520px) {
  .vd-sched-dates { grid-template-columns: 1fr; }
}

/* Every control in this dashboard, so focus is always visible for keyboard
   users regardless of which panel it lives in. */
.vd-shoot-grid select:focus-visible,
.vd-shoot-grid input:focus-visible,
.vd-shoot-grid button:focus-visible {
  outline: 2px solid var(--vd-accent, #2563eb);
  outline-offset: 2px;
}

@media (max-width: 1100px) {
  /* Equal columns before the single-column collapse, so the narrow rail does
     not squeeze its date inputs while the wide column has slack. */
  .vd-shoot-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .vd-budget-exp-x { transition: none; }
}
.vd-shoot-sidebar { background: var(--vd-surface-2); padding: 12px; border-radius: var(--vd-radius); font-size: 0.85em; }
.vd-shoot-section-label { font-weight: 600; color: var(--vd-text-3); text-transform: uppercase; font-size: 11px; letter-spacing: 0.08em; margin: 14px 0 6px; }
.vd-shoot-section-label:first-child { margin-top: 0; }
.vd-week-grid { width: 100%; border: 1px solid var(--vd-border); border-radius: var(--vd-radius); overflow: hidden; font-size: 0.78em; background: var(--vd-surface); }
.vd-week-row { display: grid; grid-template-columns: 80px repeat(var(--vd-crew-count, 3), 1fr); border-bottom: 1px solid var(--vd-border); }
.vd-week-row.header { background: var(--vd-surface-2); color: var(--vd-text-3); font-weight: 600; text-transform: uppercase; font-size: 10px; letter-spacing: 0.08em; }
.vd-week-cell { padding: 6px; border-left: 1px solid var(--vd-border); min-height: 32px; }
.vd-shoot-pill { padding: 4px 6px; border-radius: var(--vd-radius-sm); background: var(--vd-st-cold-bg); color: var(--vd-st-cold-fg); margin: 2px; cursor: pointer; font-weight: 500; }
.vd-shoot-pill.warm   { background: var(--vd-st-warm-bg);   color: var(--vd-st-warm-fg); }
.vd-shoot-pill.active { background: var(--vd-st-active-bg); color: var(--vd-st-active-fg); }
.vd-shoot-pill.alert  { background: var(--vd-st-alert-bg);  color: var(--vd-st-alert-fg); }
.vd-shoot-pill.mute   { background: var(--vd-st-mute-bg);   color: var(--vd-st-mute-fg); }
.vd-clash { outline: 2px solid var(--vd-st-alert-fg); outline-offset: -2px; }

/* === Calendar (month grid) ================================ */
.vd-cal-row, .vd-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}
.vd-cal-row-hdr { background: var(--vd-surface-2); border-bottom: 1px solid var(--vd-border); }
.vd-cal-cell {
  min-height: 112px;
  padding: 6px 8px;
  border-right: 1px solid var(--vd-border);
  border-bottom: 1px solid var(--vd-border);
  background: var(--vd-surface);
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow: hidden;
}
.vd-cal-cell:nth-child(7n) { border-right: none; }
.vd-cal-cell-hdr {
  min-height: 0;
  padding: 8px 10px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  color: var(--vd-text-3);
  background: transparent;
  border-right: 1px solid var(--vd-border);
  border-bottom: none;
}
.vd-cal-cell-hdr:nth-child(7n) { border-right: none; }
.vd-cal-dim { background: var(--vd-surface-2); }
.vd-cal-dim .vd-cal-daynum { color: var(--vd-text-3); }
.vd-cal-today {
  box-shadow: inset 0 2px 0 0 var(--accent, #f5a623);
  background: linear-gradient(180deg, rgba(245, 166, 35, 0.04), var(--vd-surface) 60%);
}
.vd-cal-today .vd-cal-daynum {
  color: var(--accent, #f5a623);
  font-weight: 700;
}
.vd-cal-daynum {
  font-size: 12px;
  font-weight: 600;
  color: var(--vd-text-2);
  font-feature-settings: "tnum";
}
.vd-cal-events {
  display: flex;
  flex-direction: column;
  gap: 3px;
  overflow: hidden;
}
.vd-cal-event {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 6px;
  border: none;
  border-radius: 4px;
  font-size: 11px;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  transition: filter 120ms;
}
.vd-cal-event:hover { filter: brightness(0.95); }
.vd-cal-event-time {
  font-family: var(--vd-font-mono);
  font-size: 10px;
  opacity: 0.7;
  flex-shrink: 0;
}
.vd-cal-event-name {
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vd-cal-event-cold   { background: var(--vd-st-cold-bg);   color: var(--vd-st-cold-fg); }
.vd-cal-event-warm   { background: var(--vd-st-warm-bg);   color: var(--vd-st-warm-fg); }
.vd-cal-event-active { background: var(--vd-st-active-bg); color: var(--vd-st-active-fg); }
.vd-cal-event-alert  { background: var(--vd-st-alert-bg);  color: var(--vd-st-alert-fg); }
.vd-cal-event-mute   { background: var(--vd-st-mute-bg);   color: var(--vd-st-mute-fg); }

/* On narrow widths drop to 80px cell height + hide times to keep usable */
@media (max-width: 900px) {
  .vd-cal-cell { min-height: 80px; padding: 4px 6px; }
  .vd-cal-event-time { display: none; }
}

/* === Sprint 3 · Shoot-dashboard day-of features ============= */

/* Crew check-in panel (EXTENSION 1) — built on .vd-panel-row.            */
/* Active row gets a subtle green tint so the producer can sweep eyes     */
/* across the list and see who is on site without reading each checkbox. */
.vd-checkbox-checkin {
  width: 16px; height: 16px;
  accent-color: var(--vd-st-active-fg);
  cursor: pointer;
  flex-shrink: 0;
  margin-right: 4px;
}
.vd-checkbox-checkin:disabled { cursor: wait; opacity: 0.6; }
.vd-checkin-row { gap: 10px; }
.vd-checkin-row-active {
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--vd-st-active-bg) 35%, transparent),
    transparent 40%);
}
.vd-checkin-row-active .vd-row-title { color: var(--vd-st-active-fg); }

/* Expense quick-add chips (EXTENSION 2) — sit above the ledger.         */
.vd-expense-chip-bar { background: var(--vd-surface-2); }
.vd-expense-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border: 1px solid var(--vd-border-2);
  background: var(--vd-surface);
  color: var(--vd-text);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background 120ms, border-color 120ms, transform 80ms;
  font-family: inherit;
}
.vd-expense-chip:hover {
  background: var(--vd-st-warm-bg);
  border-color: var(--vd-st-warm-fg);
  color: var(--vd-st-warm-fg);
}
.vd-expense-chip:active { transform: translateY(1px); }
.vd-expense-chip-icon { font-size: 14px; line-height: 1; }
.vd-expense-chip-other {
  border-style: dashed;
  color: var(--vd-text-2);
}
.vd-expense-chip-other:hover {
  background: var(--vd-surface-2);
  border-color: var(--vd-border-2);
  color: var(--vd-text);
}

/* Quick-add popover. Anchored absolutely by JS; no transform/animation  */
/* dependencies on the parent.                                           */
.vd-expense-quickadd {
  position: absolute;
  z-index: 2000;
  width: 280px;
  background: var(--vd-surface);
  border: 1px solid var(--vd-border-2);
  border-radius: var(--vd-radius);
  box-shadow: var(--vd-shadow-2);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.vd-expense-quickadd-hdr {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--vd-text-3);
  font-weight: 600;
}
.vd-expense-quickadd-row {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.vd-expense-quickadd-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--vd-text-3);
  font-weight: 600;
}
.vd-expense-quickadd-input {
  padding: 6px 8px;
  border: 1px solid var(--vd-border-2);
  border-radius: 6px;
  background: var(--vd-surface-2);
  color: var(--vd-text);
  font-size: 13px;
  font-family: inherit;
  width: 100%;
  box-sizing: border-box;
}
.vd-expense-quickadd-amount {
  font-family: var(--vd-font-mono);
  font-size: 15px;
  font-weight: 600;
}
.vd-expense-quickadd-file {
  padding: 4px 6px;
  font-size: 11px;
  border-style: dashed;
}
.vd-expense-quickadd-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  margin-top: 2px;
}
.vd-expense-quickadd-btn {
  padding: 6px 12px;
  border: 1px solid var(--vd-border-2);
  background: var(--vd-surface);
  color: var(--vd-text);
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
}
.vd-expense-quickadd-btn:hover { background: var(--vd-surface-2); }
.vd-expense-quickadd-btn:disabled { opacity: 0.6; cursor: wait; }
.vd-expense-quickadd-btn-primary {
  background: var(--vd-st-active-fg);
  color: #ffffff;
  border-color: var(--vd-st-active-fg);
}
.vd-expense-quickadd-btn-primary:hover {
  background: color-mix(in srgb, var(--vd-st-active-fg) 88%, black);
}

/* Linked-deliverables auto-advance note (EXTENSION 3) — inline yellow.  */
.vd-auto-note { font-style: italic; }
.vd-auto-hint { line-height: 1.4; }

/* "Mark wrapped" CTA (EXTENSION 4) — sits at the top of the main column */
/* when shoot is in_progress. Big, green, unmistakable.                   */
.vd-wrap-cta {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--vd-st-active-bg) 60%, var(--vd-surface)),
    var(--vd-surface));
  border: 1px solid var(--vd-st-active-fg);
  border-radius: var(--vd-radius);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--vd-st-active-bg) 50%, transparent);
}
.vd-wrap-cta-copy { flex: 1; min-width: 0; }
.vd-wrap-cta-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--vd-st-active-fg);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.vd-wrap-cta-sub {
  font-size: 12px;
  color: var(--vd-text-2);
  margin-top: 4px;
  line-height: 1.4;
}
.vd-wrap-cta-btn {
  padding: 12px 22px;
  font-size: 14px;
  font-weight: 700;
  font-family: inherit;
  border: none;
  border-radius: var(--vd-radius);
  background: var(--vd-st-active-fg);
  color: #ffffff;
  cursor: pointer;
  white-space: nowrap;
  letter-spacing: 0.02em;
  box-shadow: 0 2px 6px color-mix(in srgb, var(--vd-st-active-fg) 30%, transparent);
  transition: transform 80ms, box-shadow 120ms;
}
.vd-wrap-cta-btn:hover {
  background: color-mix(in srgb, var(--vd-st-active-fg) 88%, black);
  box-shadow: 0 4px 10px color-mix(in srgb, var(--vd-st-active-fg) 40%, transparent);
}
.vd-wrap-cta-btn:active { transform: translateY(1px); }
.vd-wrap-cta-btn:disabled { opacity: 0.7; cursor: wait; }

@media (max-width: 720px) {
  .vd-wrap-cta { flex-direction: column; align-items: stretch; text-align: center; }
  .vd-wrap-cta-btn { width: 100%; }
  .vd-expense-quickadd { width: calc(100vw - 32px); max-width: 320px; }
}

/* === Sprint 3 · Shoot Wizard (replaces single-form New Shoot modal) ===
 * 3-step modal: Schedule → Crew → Budget + Review. Lives inside the
 * existing .cl-modal-overlay/.cl-modal shell; everything below is wizard-
 * specific layout + the stepper visual. Class prefix: vd-wizard-*.
 */
.vd-wizard-panel { display: flex; flex-direction: column; gap: 0; padding: 18px 20px 20px; }
.vd-wizard-head { display: flex; flex-direction: column; gap: 4px; margin-bottom: 14px; }
.vd-wizard-subtitle {
  font-size: 12px;
  color: var(--vd-text-2);
  font-style: italic;
}

/* Stepper — 3 numbered dots with progress bars between them. */
.vd-wizard-stepper {
  display: flex; align-items: center; gap: 4px;
  margin: 0 0 18px;
  padding: 0 2px;
}
.vd-wizard-step {
  display: flex; align-items: center; gap: 8px;
  flex-shrink: 0;
  font-size: 12px;
  color: var(--vd-text-3);
  font-weight: 500;
}
.vd-wizard-step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--vd-st-mute-bg);
  color: var(--vd-text-2);
  font-size: 11px;
  font-weight: 600;
  border: 1px solid var(--vd-border);
}
.vd-wizard-step.is-active .vd-wizard-step-num {
  background: #3b82f6; color: #fff; border-color: #3b82f6;
}
.vd-wizard-step.is-done .vd-wizard-step-num {
  background: var(--vd-st-active-bg); color: var(--vd-st-active-fg);
  border-color: var(--vd-st-active-bg);
}
.vd-wizard-step.is-active { color: var(--vd-text); }
.vd-wizard-step.is-done { color: var(--vd-text-2); }
.vd-wizard-step-bar {
  flex: 1;
  height: 2px;
  background: var(--vd-border);
  border-radius: 2px;
  min-width: 24px;
}
.vd-wizard-step-bar.is-done { background: var(--vd-st-active-fg); opacity: 0.5; }

/* Body — vertical stack of fields per step. */
.vd-wizard-body { display: flex; flex-direction: column; gap: 12px; }
.vd-wizard-field { display: flex; flex-direction: column; gap: 6px; }
.vd-wizard-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--vd-text-3);
  font-weight: 600;
}
.vd-wizard-input {
  padding: 8px 10px;
  border: 1px solid var(--vd-border-2);
  border-radius: var(--vd-radius-sm);
  font-size: 13px;
  font-family: inherit;
  background: var(--vd-surface-2);
  color: var(--vd-text);
  width: 100%;
  box-sizing: border-box;
}
.vd-wizard-input:focus {
  outline: none;
  border-color: #3b82f6;
  background: var(--vd-surface);
}
textarea.vd-wizard-input { resize: vertical; min-height: 60px; }
.vd-wizard-helper {
  font-size: 11px;
  color: var(--vd-text-3);
  margin-top: 2px;
}
.vd-wizard-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }

/* Inline error banner — sits inside .vd-wizard-body. */
.vd-wizard-error {
  background: var(--vd-st-alert-bg);
  color: var(--vd-st-alert-fg);
  border: 1px solid var(--vd-st-alert-fg);
  border-radius: var(--vd-radius-sm);
  padding: 8px 12px;
  font-size: 12px;
  margin-top: 4px;
}

/* Deliverable picker (step 1, only when no preselection) */
.vd-wizard-picker {
  display: flex; flex-direction: column; gap: 6px;
  padding: 10px 12px;
  background: var(--vd-surface-2);
  border: 1px dashed var(--vd-border-2);
  border-radius: var(--vd-radius-sm);
  margin-bottom: 4px;
}
.vd-wizard-picker-list {
  display: flex; flex-direction: column; gap: 4px;
  max-height: 180px; overflow: auto;
}
.vd-wizard-picker-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
  background: var(--vd-surface);
  border: 1px solid var(--vd-border);
  border-radius: var(--vd-radius-sm);
  padding: 6px 10px;
  text-align: left;
  cursor: pointer;
  font-size: 13px;
  color: var(--vd-text);
  font-family: inherit;
}
.vd-wizard-picker-row:hover { border-color: #3b82f6; }
.vd-wizard-picker-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* Crew step layout */
.vd-wizard-crew-picked {
  background: var(--vd-surface-2);
  border: 1px solid var(--vd-border);
  border-radius: var(--vd-radius-sm);
  padding: 10px 12px;
  display: flex; flex-direction: column; gap: 8px;
}
.vd-wizard-crew-hdr {
  display: flex; align-items: baseline; justify-content: space-between;
}
.vd-wizard-crew-total {
  font-family: var(--vd-font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--vd-text);
}
.vd-wizard-crew-empty {
  font-size: 12px;
  color: var(--vd-text-3);
  font-style: italic;
  padding: 6px 0;
}
.vd-wizard-crew-row, .vd-wizard-crew-result {
  display: flex; align-items: center; gap: 10px;
  background: var(--vd-surface);
  border: 1px solid var(--vd-border);
  border-radius: var(--vd-radius-sm);
  padding: 6px 10px;
}
.vd-wizard-crew-avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--vd-st-cold-bg);
  color: var(--vd-st-cold-fg);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600;
  flex-shrink: 0;
}
.vd-wizard-crew-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.vd-wizard-crew-name { font-size: 13px; font-weight: 500; color: var(--vd-text); }
.vd-wizard-crew-role { font-size: 11px; color: var(--vd-text-2); }
.vd-wizard-crew-hours {
  width: 64px;
  padding: 5px 8px;
  border: 1px solid var(--vd-border-2);
  border-radius: var(--vd-radius-sm);
  font-size: 12px;
  font-family: var(--vd-font-mono);
  text-align: right;
  background: var(--vd-surface-2);
}
.vd-wizard-crew-remove {
  width: 24px; height: 24px;
  border: none; background: transparent;
  color: var(--vd-text-3);
  font-size: 18px;
  line-height: 1; cursor: pointer;
  border-radius: 50%;
}
.vd-wizard-crew-remove:hover { background: var(--vd-st-alert-bg); color: var(--vd-st-alert-fg); }

.vd-wizard-crew-add {
  display: flex; flex-direction: column; gap: 8px;
  margin-top: 4px;
}
.vd-wizard-crew-results {
  display: flex; flex-direction: column; gap: 4px;
  max-height: 220px; overflow: auto;
}
.vd-wizard-role-sel {
  width: auto;
  font-size: 12px;
  padding: 5px 8px;
  flex-shrink: 0;
}
.vd-wizard-add-btn { padding: 5px 12px; font-size: 12px; }

/* Step 3 — two-column budget + summary card */
.vd-wizard-twocol {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.vd-wizard-col { display: flex; flex-direction: column; gap: 12px; }
.vd-wizard-summary {
  background: var(--vd-surface-2);
  border: 1px solid var(--vd-border);
  border-radius: var(--vd-radius-sm);
  padding: 12px 14px;
  font-size: 12px;
}
.vd-wizard-summary-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--vd-text-3);
  font-weight: 600;
  margin-bottom: 8px;
}
.vd-wizard-summary-row {
  display: flex; justify-content: space-between; gap: 8px;
  padding: 4px 0;
  border-bottom: 1px solid var(--vd-border);
  font-size: 12px;
}
.vd-wizard-summary-row:last-of-type { border-bottom: none; }
.vd-wizard-summary-key { color: var(--vd-text-3); flex-shrink: 0; }
.vd-wizard-summary-val { color: var(--vd-text); text-align: right; }
.vd-wizard-summary-hint {
  margin-top: 10px;
  font-size: 11px;
  color: var(--vd-text-3);
  font-style: italic;
  padding-top: 8px;
  border-top: 1px dashed var(--vd-border);
}

/* Footer action bar */
.vd-wizard-actions {
  display: flex; align-items: center; gap: 8px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--vd-border);
}
.vd-wizard-cancel { color: var(--vd-st-alert-fg); }
.vd-wizard-cancel:hover { background: var(--vd-st-alert-bg); }
.vd-wizard-next:disabled, .vd-wizard-confirm:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Toast — bottom-right slide-up, auto-hides via JS. */
.vd-toast {
  position: fixed;
  bottom: 24px; right: 24px;
  background: var(--vd-text);
  color: var(--vd-surface);
  padding: 10px 18px;
  border-radius: var(--vd-radius);
  font-size: 13px;
  box-shadow: var(--vd-shadow-2);
  opacity: 1;
  transition: opacity 280ms;
  z-index: 10001;
}

/* Narrow viewport — collapse two-column layouts to stack. */
@media (max-width: 720px) {
  .vd-wizard-row { grid-template-columns: 1fr; }
  .vd-wizard-twocol { grid-template-columns: 1fr; }
  .vd-wizard-panel { width: 96vw; min-width: 0; }
  .vd-wizard-step-label { display: none; }
}

/* ─── Crew avatars on calendar pills ───────────────────────────────
 * Inline avatar group appended to each shoot pill in the Shoots month
 * grid (renderCalendarMonthView). Up to 3 inline avatars + "+N"
 * overflow. Hovering the pill opens a shared floating popup that
 * lists the full crew with role labels. */
.vd-pill-crew-group {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;          /* push to right edge of pill */
  flex-shrink: 0;             /* avoid being squeezed by client name */
  padding-left: 4px;
}
.vd-pill-crew-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #fff;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
  box-shadow: 0 0 0 1.5px var(--vd-surface, #fff);
}
/* Stack avatars slightly so the group reads as a cluster. */
.vd-pill-crew-group .vd-pill-crew-avatar + .vd-pill-crew-avatar {
  margin-left: -4px;
}
.vd-pill-crew-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 3px;
  margin-left: -2px;
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.18);
  color: var(--vd-text, #0f172a);
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 0 0 1.5px var(--vd-surface, #fff);
}

/* Shared crew popup — single element, repositioned per hover. */
.vd-crew-popup {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 9999;
  min-width: 200px;
  max-width: 280px;
  padding: 8px;
  background: var(--vd-surface, #fff);
  border: 1px solid var(--vd-border, rgba(15, 23, 42, 0.08));
  border-radius: var(--vd-radius, 6px);
  box-shadow: var(--vd-shadow-2, 0 6px 24px rgba(15, 23, 42, 0.12));
  color: var(--vd-text, #0f172a);
  font-size: 12px;
  pointer-events: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-2px);
  transition: opacity 120ms ease, transform 120ms ease, visibility 0s linear 120ms;
}
.vd-crew-popup.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 120ms ease, transform 120ms ease, visibility 0s;
}
.vd-crew-popup-hdr {
  padding: 2px 4px 6px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--vd-border, rgba(15, 23, 42, 0.08));
  font-size: 11px;
  font-weight: 600;
  color: var(--vd-text-3, #94a3b8);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.vd-crew-popup-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px;
  border-radius: 4px;
}
.vd-crew-popup-row + .vd-crew-popup-row { margin-top: 2px; }
.vd-crew-popup-row:hover { background: var(--vd-surface-2, #fafbfc); }
.vd-crew-popup-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.vd-crew-popup-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--vd-text, #0f172a);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vd-crew-popup-role {
  font-size: 11px;
  color: var(--vd-text-2, #475569);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ────────────────────────────────────────────────────────────
 * Video → Availability tab
 * Pure analytics surface over /api/video/availability. Uses the
 * existing --vd-* tokens so it inherits the department palette.
 * ──────────────────────────────────────────────────────────── */

.vd-avail-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 12px;
  background: var(--vd-surface);
  border: 1px solid var(--vd-border);
  border-radius: var(--vd-radius, 10px);
}

.vd-avail-view-toggle {
  display: inline-flex;
  border: 1px solid var(--vd-border-2);
  border-radius: 8px;
  overflow: hidden;
  background: var(--vd-surface-2);
}
.vd-avail-view-btn {
  appearance: none;
  border: none;
  background: transparent;
  padding: 6px 14px;
  font-size: 12px;
  font-family: inherit;
  color: var(--vd-text-2);
  cursor: pointer;
  font-weight: 500;
  border-right: 1px solid var(--vd-border);
}
.vd-avail-view-btn:last-child { border-right: none; }
.vd-avail-view-btn:hover { background: var(--vd-surface); color: var(--vd-text); }
.vd-avail-view-btn.active {
  background: var(--vd-st-cold-bg);
  color: var(--vd-st-cold-fg);
  font-weight: 600;
}

.vd-avail-range {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.vd-avail-date {
  padding: 5px 10px;
  border: 1px solid var(--vd-border-2);
  border-radius: 6px;
  background: var(--vd-surface);
  color: var(--vd-text);
  font-size: 12px;
  font-family: inherit;
}

.vd-avail-body {
  min-height: 200px;
}

.vd-avail-scroll {
  width: 100%;
  overflow-x: auto;
  background: var(--vd-surface);
  border: 1px solid var(--vd-border);
  border-radius: var(--vd-radius, 10px);
}

.vd-avail-grid {
  display: grid;
  min-width: 960px;
  background: var(--vd-surface);
}

.vd-avail-cell {
  min-height: 44px;
  padding: 4px 6px;
  border-right: 1px solid var(--vd-border);
  border-bottom: 1px solid var(--vd-border);
  display: flex;
  flex-direction: column;
  gap: 3px;
  align-items: flex-start;
  justify-content: flex-start;
  box-sizing: border-box;
  background: var(--vd-surface);
}
.vd-avail-grid.compact .vd-avail-cell {
  min-height: 36px;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  padding: 3px 4px;
}
.vd-avail-cell.today {
  background: var(--vd-st-warm-bg);
}
.vd-avail-cell.today.vd-avail-hdr {
  color: var(--vd-st-warm-fg);
  font-weight: 700;
}

.vd-avail-hdr {
  background: var(--vd-surface-2);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--vd-text-3);
  font-weight: 600;
  position: sticky;
  top: 0;
  z-index: 2;
  align-items: center;
  justify-content: center;
}
.vd-avail-hdr-top { font-size: 11px; color: var(--vd-text-2); }
.vd-avail-hdr-sub { font-size: 10px; color: var(--vd-text-3); }

.vd-avail-sticky-col {
  position: sticky;
  left: 0;
  z-index: 3;
  background: var(--vd-surface);
  border-right: 1px solid var(--vd-border-2);
  box-shadow: 1px 0 0 var(--vd-border);
}
.vd-avail-hdr.vd-avail-sticky-col {
  background: var(--vd-surface-2);
  z-index: 4;
}

.vd-avail-person {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}
.vd-avail-person-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.vd-avail-person-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--vd-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 160px;
}
.vd-avail-person-role {
  font-size: 11px;
  color: var(--vd-text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 160px;
}

.vd-avail-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.3;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vd-avail-chip.shoot {
  background: var(--vd-st-cold-bg);
  color: var(--vd-st-cold-fg);
}
.vd-avail-chip.edit {
  background: #ede9fe;
  color: #6d28d9;
}
.vd-avail-chip.free {
  background: transparent;
  color: var(--vd-text-3);
  font-weight: 400;
}
.vd-avail-chip.compact {
  padding: 0;
  width: 18px;
  height: 18px;
  justify-content: center;
  font-size: 10px;
  font-weight: 600;
}
.vd-avail-chip.compact.free {
  background: var(--vd-st-mute-bg);
  color: var(--vd-text-3);
}

.vd-avail-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--vd-surface);
  border: 1px solid var(--vd-border);
  border-radius: var(--vd-radius, 10px);
  overflow: hidden;
}
.vd-avail-table thead th {
  text-align: left;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--vd-text-3);
  font-weight: 600;
  padding: 10px 14px;
  background: var(--vd-surface-2);
  border-bottom: 1px solid var(--vd-border);
}
.vd-avail-table tbody td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--vd-border);
  vertical-align: middle;
  font-size: 13px;
  color: var(--vd-text);
}
.vd-avail-table tbody tr:last-child td { border-bottom: none; }
.vd-avail-table tbody tr.free-today {
  background: var(--vd-st-active-bg);
}
.vd-avail-table tbody tr.free-today td:first-child {
  box-shadow: inset 3px 0 0 var(--vd-st-active-fg);
}
.vd-avail-next7 {
  font-family: var(--vd-font-mono, monospace);
  font-size: 12px;
  color: var(--vd-text-2);
}

.vd-avail-action-btn {
  appearance: none;
  border: 1px solid var(--vd-border-2);
  background: var(--vd-surface);
  color: var(--vd-text);
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 500;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
}
.vd-avail-action-btn:hover {
  background: var(--vd-st-cold-bg);
  color: var(--vd-st-cold-fg);
  border-color: var(--vd-st-cold-fg);
}

/* ── Drag-and-drop on shoot pills (Sprint 13) ─────────────────────────
   Targets both calendar pill flavours (.vd-cal-event in month view,
   .vd-shoot-pill in week view) and both cell flavours (.vd-cal-cell
   month, .vd-week-cell week). The spec-level .vd-pill/.vd-cal-cell
   selectors are kept too so any future pill rename inherits the
   behaviour. */
.vd-pill[draggable],
.vd-cal-event[draggable],
.vd-shoot-pill[draggable] { cursor: grab; }
.vd-pill[draggable]:active,
.vd-cal-event[draggable]:active,
.vd-shoot-pill[draggable]:active { cursor: grabbing; }
.vd-pill.dragging,
.vd-cal-event.dragging,
.vd-shoot-pill.dragging { opacity: 0.4; transform: scale(0.96); }
.vd-cal-cell.drop-target,
.vd-week-cell.drop-target {
  background: var(--vd-st-cold-bg);
  outline: 2px dashed var(--vd-st-cold-fg);
  outline-offset: -2px;
}

/* === Editing stages (Sprint 14) =====================================
   Mini-checkboxes inline on the Edits sheet (next to the progress bar)
   and full-width rows on the per-deliverable dashboard panel. Both
   surfaces PATCH /api/deliverables/:id/stages on toggle. */
.vd-stage-cb input[type="checkbox"]:checked + span { color: var(--vd-st-active-fg, currentColor); font-weight: 600; }
.vd-stage-row { white-space: nowrap; }
.vd-dash-stages-panel { display: flex; flex-direction: column; gap: 6px; }
.vd-dash-stage-row { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 6px; }
.vd-dash-stage-row.done { color: var(--vd-text-3); text-decoration: line-through; }

/* === Per-deliverable budget dashboard (Sprint 18) =================== */
.vd-budget-modal { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 9999; display: flex; align-items: center; justify-content: center; }
.vd-budget-modal-card { background: var(--vd-surface); border: 1px solid var(--vd-border); border-radius: 10px; min-width: 560px; max-width: 760px; max-height: 88vh; display: flex; flex-direction: column; }
.vd-budget-modal-hdr { padding: 12px 16px; border-bottom: 1px solid var(--vd-border); display: flex; justify-content: space-between; align-items: center; font-weight: 600; }
.vd-budget-modal-body { padding: 16px; overflow-y: auto; flex: 1; }
.vd-budget-modal-ftr { padding: 10px 16px; border-top: 1px solid var(--vd-border); display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.vd-budget-cap-row { display: flex; gap: 8px; align-items: center; margin-bottom: 16px; }
.vd-budget-cap-row input { padding: 6px 10px; border: 1px solid var(--vd-border-2); border-radius: 6px; background: var(--vd-surface-2); color: var(--vd-text); font-size: 14px; width: 160px; font-family: var(--vd-font-mono); }
.vd-budget-exp-table { width: 100%; border-collapse: collapse; }
.vd-budget-exp-table th, .vd-budget-exp-table td { padding: 6px 8px; border-bottom: 1px solid var(--vd-border); text-align: left; font-size: 12px; }
.vd-budget-exp-table th { color: var(--vd-text-3); font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; font-size: 10px; }
.vd-budget-add-form { display: grid; grid-template-columns: 100px 1fr 100px 120px; gap: 8px; padding: 8px 0; align-items: center; }
.vd-budget-add-form input, .vd-budget-add-form select { padding: 4px 6px; border: 1px solid var(--vd-border-2); border-radius: 4px; background: var(--vd-surface-2); color: var(--vd-text); font-size: 12px; }
.vd-budget-dots { background: none; border: none; cursor: pointer; padding: 4px 8px; font-size: 16px; color: var(--vd-text-3); }
.vd-budget-dots-menu { position: absolute; background: var(--vd-surface); border: 1px solid var(--vd-border); border-radius: 6px; padding: 4px; min-width: 180px; z-index: 100; box-shadow: 0 4px 12px rgba(0,0,0,0.2); }
.vd-budget-dots-menu button { display: block; width: 100%; text-align: left; padding: 6px 10px; border: none; background: none; cursor: pointer; font-size: 12px; color: var(--vd-text); border-radius: 4px; }
.vd-budget-dots-menu button:hover { background: var(--vd-surface-2); }

/* ── Full-page deliverable budget dashboard (replaces the modal) ── */
.vd-budget-page { display: flex; flex-direction: column; gap: 16px; }
.vd-budget-content { display: flex; flex-direction: column; gap: 18px; }

.vd-budget-top { display: flex; align-items: center; }
.vd-back-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px 6px 10px;
  border: 1px solid var(--vd-border); border-radius: 8px;
  background: var(--vd-surface); color: var(--vd-text-2);
  font-size: 12px; font-weight: 600; cursor: pointer;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.vd-back-btn:hover { background: var(--vd-surface-2); color: var(--vd-text); border-color: var(--vd-border-2); }
.vd-back-btn span { font-size: 14px; line-height: 1; }

.vd-budget-hdr { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.vd-budget-title { margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -0.02em; color: var(--vd-text); }
.vd-budget-meta { display: inline-flex; align-items: center; gap: 8px; color: var(--vd-text-2); font-size: 13px; }
.vd-budget-month-tag {
  background: var(--vd-st-mute-bg); color: var(--vd-st-mute-fg);
  border-radius: 999px; padding: 2px 10px; font-size: 11px;
  font-family: var(--vd-font-mono);
}

/* progress bar inside the "Total spent" KPI tile */
.vd-budget-bar { width: 100%; height: 5px; background: var(--vd-st-mute-bg); border-radius: 999px; overflow: hidden; margin-top: 2px; }
.vd-budget-bar-fill { height: 100%; background: var(--vd-st-warm-fg); border-radius: 999px; transition: width 240ms ease; }
.vd-budget-bar-fill.over { background: var(--vd-st-alert-fg); }

/* editable cap inside its KPI tile */
.vd-budget-cap-edit { display: flex; gap: 6px; align-items: center; margin-top: 2px; }
.vd-budget-cap-edit input {
  flex: 1; min-width: 0; padding: 6px 8px;
  border: 1px solid var(--vd-border-2); border-radius: 6px;
  background: var(--vd-surface-2); color: var(--vd-text);
  font-size: 15px; font-family: var(--vd-font-mono); font-weight: 600;
}
.vd-budget-cap-edit button { padding: 6px 12px; font-size: 12px; white-space: nowrap; }

.vd-budget-subhdr {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--vd-text-3); font-weight: 600;
}

/* spend-by-kind breakdown */
.vd-budget-breakdown {
  background: var(--vd-surface); border: 1px solid var(--vd-border);
  border-radius: var(--vd-radius); padding: 14px 16px;
  display: flex; flex-direction: column; gap: 10px;
}
.vd-bk-row { display: flex; align-items: center; gap: 12px; }
.vd-bk-label { flex: 0 0 90px; font-size: 12px; color: var(--vd-text-2); }
.vd-bk-track { flex: 1; height: 8px; background: var(--vd-st-mute-bg); border-radius: 999px; overflow: hidden; }
.vd-bk-fill { height: 100%; background: var(--accent, #f5a623); border-radius: 999px; transition: width 240ms ease; }
.vd-bk-amt { flex: 0 0 auto; font-size: 12px; font-weight: 600; font-family: var(--vd-font-mono); color: var(--vd-text); }

/* expenses section header + month filter */
.vd-budget-exp-hdr { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.vd-budget-exp-hdr .vd-budget-subhdr { margin-right: auto; }
.vd-budget-filter { display: inline-flex; align-items: center; gap: 6px; }
.vd-budget-month-input {
  padding: 5px 10px; border: 1px solid var(--vd-border-2); border-radius: 6px;
  background: var(--vd-surface); color: var(--vd-text); font-size: 12px;
}
.vd-budget-month-input:disabled { opacity: 0.5; }
.vd-budget-allbtn {
  padding: 5px 12px; border: 1px solid var(--vd-border-2); border-radius: 6px;
  background: var(--vd-surface); color: var(--vd-text-2);
  font-size: 12px; font-weight: 600; cursor: pointer;
}
.vd-budget-allbtn.active { background: var(--accent, #f5a623); color: #1a1a1a; border-color: transparent; }
.vd-budget-list { width: 100%; }

@media (max-width: 720px) {
  .vd-budget-title { font-size: 18px; }
  .vd-budget-exp-hdr .vd-budget-subhdr { margin-right: 0; flex: 1 0 100%; }
  .vd-bk-label { flex-basis: 64px; }
  /* Stack the cap editor so the value stays readable in the narrow tile. */
  .vd-budget-cap-edit { flex-wrap: wrap; }
  .vd-budget-cap-edit input { flex: 1 0 100%; }
  .vd-budget-cap-edit button { flex: 1 0 100%; }
  .vd-budget-filter { flex: 1 1 auto; }
  .vd-budget-month-input { flex: 1; }
}

/* ── Sprint 23 · Shoot dashboard Activity panel ── */
.vd-activity-entry.vd-activity-system { border-left-color: var(--vd-st-cold-fg); }
.vd-activity-entry.vd-activity-status_change { border-left: 3px solid var(--vd-st-warm-fg); background: var(--vd-surface-2); }
.vd-activity-timeline > .vd-activity-entry + .vd-activity-entry { border-top: 1px solid var(--vd-border-2); padding-top: 12px; }

/* ════════════════════════════════════════════════════════════════════
 * MOBILE / RESPONSIVE PASS  (Team F — first responsive pass, ≤720px)
 * One consolidated block. CSS-only; targets the stable class names the
 * video JS emits. Everything is inside the media query so there are no
 * desktop regressions. `!important` is used ONLY where an element carries
 * an inline `grid-template-columns` (set in JS) that must be overridden
 * for the narrow viewport.
 * ════════════════════════════════════════════════════════════════════ */
@media (max-width: 720px) {

  /* --- Page chrome: trim the generous desktop padding so content gets
   *     more of the narrow viewport. --- */
  .vd-page { padding: 12px; gap: 14px; }
  .vd-section-hdr { flex-wrap: wrap; }

  /* --- KPI strips: 5-col (and the budget tab's inline 3-col) → 2 cols.
   *     The budget strip sets grid-template-columns inline in JS, so it
   *     needs !important to be overridden here. --- */
  .vd-kpi-strip { grid-template-columns: repeat(2, 1fr) !important; gap: 10px; }
  .vd-kpi { padding: 12px 12px; }
  .vd-kpi-value { font-size: 22px; }

  /* Legacy 5-up stat strip → 2 cols. */
  .vd-stat-strip { grid-template-columns: repeat(2, 1fr); }

  /* --- Dashboard split layouts → single column. --- */
  .vd-dash-grid { grid-template-columns: 1fr; }
  /* No padding override: the grid is unpadded by design now, `.vd-page` owns
     the page inset. */
  .vd-shoot-grid { grid-template-columns: 1fr; }
  .vd-shoot-sidebar { font-size: 0.9em; }
  /* Stacked, the budget footer form has the full width, so the category select
     no longer needs to fight the amount field for room. */
  .vd-budget-add { grid-template-columns: minmax(0, 1fr) 96px auto; }
  .vd-panel-body--pad { padding: 12px 14px; }

  /* --- Wide sheets / tables: let them scroll horizontally instead of
   *     squashing or overflowing the page. The wrappers clip with
   *     overflow:hidden on desktop; switch to horizontal auto-scroll and
   *     give inner tables a sensible min-width so columns stay readable. --- */
  .vd-sheet-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .vd-sheet-wrap .proagri-sheet { min-width: 640px; }
  .vd-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; }
  .vd-budget-exp-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; }

  /* Legacy week grid: scroll rather than squash the crew columns. */
  .vd-week-grid { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .vd-week-row { min-width: 480px; }

  /* --- Month calendar: shrink the tall day cells so a full month fits
   *     without an enormous scroll; keep the 7-col grid but make it
   *     horizontally scrollable for the densest views. --- */
  .vd-cal-grid { min-width: 0; }
  .vd-cal-cell { min-height: 76px; padding: 4px 5px; }
  .vd-cal-event-name { font-size: 11px; }

  /* --- Budget tab --- */
  /* Header + meta row stack instead of crowding. */
  .vd-budget-hdr { gap: 8px; }
  .vd-budget-top { flex-wrap: wrap; }
  /* The add-expense form is a rigid 4-col grid on desktop; stack it. */
  .vd-budget-add-form { grid-template-columns: 1fr 1fr; }
  .vd-budget-add-form > button,
  .vd-budget-add-form input[type="submit"] { grid-column: 1 / -1; }
  /* Breakdown rows: let the label wrap above the bar on very narrow widths. */
  .vd-bk-label { flex-basis: 72px; }
  /* Dots menu shouldn't run off-screen. */
  .vd-budget-dots-menu { max-width: calc(100vw - 24px); }

  /* --- Crew popup: keep it inside the viewport. --- */
  .vd-crew-popup { max-width: calc(100vw - 24px); }

  /* --- Generic two-up panel grids fall back to a single column. --- */
  .vd-panel-row { flex-wrap: wrap; }
}

/* Square white-bordered back button — mirrors .dd-back-btn so the shoot
 * detail header reads like the deliverable-dashboard back control. */
.vd-back-btn-square {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--vd-border);
  border-radius: 8px;
  background: #fff;
  color: #374151;
  cursor: pointer;
  flex: 0 0 auto;
  transition: background .12s, border-color .12s;
}
.vd-back-btn-square:hover { background: #f3f4f6; border-color: var(--vd-border-2); }
.vd-back-btn-square svg { width: 20px; height: 20px; display: block; }

/* === Video tab host (2026-06-22 rebuild) =================== */
.vd-shell { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.vd-tabbar {
  display: flex; gap: 4px; padding: 10px 16px 0; flex-wrap: wrap;
  border-bottom: 1px solid var(--vd-border);
  background: var(--vd-surface);
  position: sticky; top: 0; z-index: 5;
}
.vd-tab {
  appearance: none; border: none; background: transparent; cursor: pointer;
  font-size: 13px; font-weight: 600; color: var(--vd-text-2);
  padding: 9px 16px; border-radius: 8px 8px 0 0;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color .15s ease, background .15s ease, border-color .15s ease;
}
.vd-tab:hover { color: var(--vd-text); background: var(--vd-surface-2); }
.vd-tab.active {
  color: var(--accent, #f5a623);
  border-bottom-color: var(--accent, #f5a623);
}
.vd-tabbody { flex: 1; min-height: 0; overflow-y: auto; }

@media (max-width: 640px) {
  .vd-tabbar { padding: 8px 10px 0; gap: 2px; }
  .vd-tab { padding: 8px 12px; font-size: 12px; }
  .vd-page { padding: 12px; gap: 16px; }
}

/* Text-style action buttons inside the video dept (Inbox / Edits / shoot
 * detail) reuse .proagri-sheet-row-action-btn for color, but that base class is
 * a fixed 28px icon square — which clips text labels. In the video dept the
 * `.action-view` variant is ALWAYS a text button, and any `.action-advance`
 * that carries an inline min-width (the "Schedule shoot ›" pill) is too; let
 * those size to their content. Bare `.action-advance` (the `›` row arrow) stays
 * the 28px icon square. */
.vd-shell .proagri-sheet-row-action-btn.action-view,
.vd-page .proagri-sheet-row-action-btn.action-view,
.vd-shell .proagri-sheet-row-action-btn.action-advance[style*="min-width"],
.vd-page .proagri-sheet-row-action-btn.action-advance[style*="min-width"] {
  width: auto;
  height: auto;
  min-height: 30px;
  padding-top: 4px;
  padding-bottom: 4px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  background: rgba(128, 128, 128, 0.08);
  color: var(--vd-text-2, #475569);
}
.vd-shell .proagri-sheet-row-action-btn.action-advance[style*="min-width"],
.vd-page .proagri-sheet-row-action-btn.action-advance[style*="min-width"] {
  background: rgba(245, 166, 35, 0.12);
  color: var(--accent, #f5a623);
}

/* Inbox "returned · ready to schedule" rich card. 3-col on desktop, stacks on
 * mobile so the "Schedule shoot ›" action never overflows the card edge. */
.vd-inbox-card {
  display: grid;
  grid-template-columns: minmax(200px, 1fr) 2fr auto;
  gap: 16px;
  align-items: center;
  padding: 14px 16px;
  background: var(--vd-surface);
  border: 1px solid var(--vd-border);
  border-radius: var(--vd-radius);
  box-shadow: var(--vd-shadow-1);
  margin-bottom: 10px;
}
@media (max-width: 720px) {
  .vd-inbox-card {
    grid-template-columns: 1fr;
    gap: 10px;
    align-items: stretch;
  }
  .vd-inbox-card .vd-inbox-card-actions {
    justify-content: flex-start;
  }
  .vd-inbox-card .vd-inbox-card-actions .proagri-sheet-row-action-btn {
    width: 100%;
  }
}

/* ── #134 dark mode overrides ─────────────────────────────── */
/* theme.css re-declares the whole --vd-* token block (surfaces, borders, text,
   shadows and all five status pairs), so the token-driven rules follow it
   automatically. Only the bare literals are repeated here.

   Two consequences of that flip drive most of what follows:
     · --vd-st-*-fg are now LIGHT, so anywhere they back #fff text the label has
       to become dark ink instead.
     · .vd-pill mixes its hue against a hardcoded #fff, which has to be re-mixed
       against the dark surface. */

/* Status pill. --vd-pc is set inline by videoUtils.renderStatusPill from
   PRODUCTION_STATUS_OPTIONS, i.e. a mid-tone hex that sits near 2:1 on slate,
   so the hue is mixed toward white for the text and dot and the tint carries
   the fill. Mixing a value that is ALREADY light with white keeps it light, so
   this holds for both the inline hues and the token defaults. */
html[data-theme="dark"] .vd-pill {
  background: color-mix(in srgb, var(--vd-pc, #94a3b8) 20%, #0f172a);
  border-color: color-mix(in srgb, var(--vd-pc, #94a3b8) 38%, transparent);
  color: color-mix(in srgb, var(--vd-pc, #94a3b8) 55%, #ffffff);
}
html[data-theme="dark"] .vd-pill::before {
  background: color-mix(in srgb, var(--vd-pc, #94a3b8) 60%, #ffffff);
}
@supports not (color: color-mix(in srgb, red 50%, white)) {
  html[data-theme="dark"] .vd-pill {
    background: rgba(148, 163, 184, 0.16);
    color: #cbd5e1;
  }
}

/* Status dropdown */
html[data-theme="dark"] .vd-status-menu { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55); }
html[data-theme="dark"] .vd-status-option { color: #e2e8f0; }
html[data-theme="dark"] .vd-status-option:hover { background: #334155; }
html[data-theme="dark"] .vd-status-option.is-current { background: rgba(96, 165, 250, 0.16); }

/* Type tag */
html[data-theme="dark"] .vd-type-tag {
  background: rgba(148, 163, 184, 0.16);
  border-color: rgba(148, 163, 184, 0.24);
  color: #cbd5e1;
}

/* Sheet rows */
html[data-theme="dark"] .vd-sheet-wrap .proagri-sheet-row { border-bottom-color: rgba(148, 163, 184, 0.12); }
html[data-theme="dark"] .vd-sheet-wrap .proagri-sheet-row:hover { background: #273449; }
/* The overdue wash was a pale pink fill; on dark it becomes a red tint of the
   same weight. The deadline traffic-light rows below it are already alpha over
   the surface, so they carry across unchanged. */
html[data-theme="dark"] .proagri-sheet-row.vd-row-overdue { background: rgba(239, 68, 68, 0.12); }
html[data-theme="dark"] .proagri-sheet-row.vd-row-overdue:hover { background: rgba(239, 68, 68, 0.18); }

/* Buttons that sit on a now-light status colour need dark ink. */
html[data-theme="dark"] .vd-expense-quickadd-btn-primary,
html[data-theme="dark"] .vd-wrap-cta-btn { color: #0b1220; }

/* Wizard focus + hover accents */
html[data-theme="dark"] .vd-wizard-input:focus,
html[data-theme="dark"] .vd-wizard-picker-row:hover { border-color: #60a5fa; }

/* Crew avatar cluster on calendar pills */
html[data-theme="dark"] .vd-pill-crew-more { background: rgba(255, 255, 255, 0.16); }

/* Availability chip — editing days keep their purple */
html[data-theme="dark"] .vd-avail-chip.edit {
  background: rgba(124, 58, 237, 0.22);
  color: #c4b5fd;
}

/* Budget modal scrim */
html[data-theme="dark"] .vd-budget-modal { background: rgba(0, 0, 0, 0.62); }

/* Square back button */
html[data-theme="dark"] .vd-back-btn-square {
  background: #1e293b;
  color: #cbd5e1;
}
html[data-theme="dark"] .vd-back-btn-square:hover { background: #334155; }

/* Text-style row action buttons — the grey film is too faint on slate */
html[data-theme="dark"] .vd-shell .proagri-sheet-row-action-btn.action-view,
html[data-theme="dark"] .vd-page .proagri-sheet-row-action-btn.action-view {
  background: rgba(255, 255, 255, 0.08);
}