/* ── Reset & Base ──────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
.hidden { display: none !important; }

:root,
[data-theme="dark"] {
  --bg:         #0f1117;
  --bg-2:       #1a1d27;
  --bg-3:       #22263a;
  /* Card / input surfaces. These were referenced ~50× across the app
     (var(--bg-card), var(--bg-input)) but never defined — so they fell back
     to transparent, which only *looked* right because cards sit on the
     matching dark page. It broke any surface floating over other content
     (e.g. the Attach-receipt modal over a receipt PDF — text bled through).
     Defined here = opaque card/field surfaces everywhere. (User 2026-06-16.) */
  --bg-card:    #1a1d27;
  --bg-input:   #22263a;
  --bg-hover:   rgba(255,255,255,.04);
  --border:     #2e3349;
  --text:       #e2e6f0;
  --text-muted: #6b7394;
  --accent:     #4f7ef8;
  --accent-dim: #2a4bb5;
  --green:      #2ecc71;
  --red:        #e74c3c;
  --yellow:     #f1c40f;
  --blue:       #3498db;
  --orange:     #e67e22;
  --font:       'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --radius:     6px;
  --radius-lg:  10px;
  --shadow:     0 2px 12px rgba(0,0,0,.4);
}

[data-theme="light"] {
  --bg:         #f4f5f7;
  --bg-2:       #ffffff;
  --bg-3:       #edf0f5;
  --bg-card:    #ffffff;
  --bg-input:   #edf0f5;
  --bg-hover:   rgba(0,0,0,.04);
  --border:     #d0d5e0;
  --text:       #1a1d2e;
  --text-muted: #6b7280;
  --accent:     #2563eb;
  --accent-dim: #1d4ed8;
  --green:      #16a34a;
  --red:        #dc2626;
  --yellow:     #d97706;
  --blue:       #2563eb;
  --orange:     #ea580c;
  --shadow:     0 2px 12px rgba(0,0,0,.1);
}

html { font-size: 15.4px; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Navbar ────────────────────────────────────────────────────────────────── */
.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .6rem 1.5rem;
  background: var(--bg-2);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 100;
}

.nav-brand {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: .02em;
  text-decoration: none;
}

.nav-links { display: flex; align-items: center; gap: 1.25rem; }
.nav-links a { color: var(--text-muted); font-size: .875rem; }
.nav-links a:hover { color: var(--text); text-decoration: none; }
.theme-toggle {
  background: none;
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 3px 10px;
  font-size: .85rem;
  cursor: pointer;
  color: var(--text-muted);
  line-height: 1.4;
  transition: border-color .15s, color .15s;
}
.theme-toggle:hover { color: var(--text); border-color: var(--text-muted); }

/* ── Flash messages ────────────────────────────────────────────────────────── */
.flash-container { padding: .5rem 1.5rem; }
.flash {
  padding: .55rem 1rem;
  border-radius: var(--radius);
  font-size: .875rem;
  margin-bottom: .35rem;
}
.flash-success { background: rgba(46,204,113,.15); border: 1px solid rgba(46,204,113,.3); color: var(--green); }
.flash-error   { background: rgba(231,76,60,.15);  border: 1px solid rgba(231,76,60,.3);  color: var(--red); }

/* ── Main layout ───────────────────────────────────────────────────────────── */
.main-content { padding: 1.25rem 1.5rem 3rem; }

.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 1.25rem;
  gap: 1rem;
  flex-wrap: wrap;
}
.page-header h1 { font-size: 1.4rem; font-weight: 600; }
.breadcrumb { font-size: .8rem; color: var(--text-muted); margin-bottom: .25rem; }
.breadcrumb a { color: var(--text-muted); }

/* ── Cards ─────────────────────────────────────────────────────────────────── */
.card {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
}
.card h3 { margin-bottom: .5rem; font-size: 1rem; }

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1rem;
}

.project-card {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.1rem 1.25rem;
  transition: border-color .15s;
}
.project-card:hover { border-color: var(--accent); }
.project-card-name { font-size: 1rem; font-weight: 600; margin-bottom: .3rem; }
.project-card-meta { font-size: .8rem; color: var(--text-muted); margin-bottom: .75rem; }
.project-card-actions { display: flex; gap: .5rem; }

/* ── Buttons ───────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .45rem .9rem;
  border-radius: var(--radius);
  border: 1px solid transparent;
  font-size: .875rem;
  font-weight: 500;
  cursor: pointer;
  transition: background .12s, opacity .12s;
  text-decoration: none;
  background: none;
  color: var(--text);
}
.btn:hover { text-decoration: none; }
.btn-primary  { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn-primary:hover { background: var(--accent-dim); border-color: var(--accent-dim); }
.btn-outline  { border-color: var(--border); }
.btn-outline:hover { background: var(--bg-3); }
.btn-ghost    { color: var(--text-muted); }
.btn-ghost:hover { color: var(--red); }
.btn-sm       { padding: .3rem .65rem; font-size: .8rem; }
.btn-xs       { padding: .15rem .4rem; font-size: .75rem; }
.btn-block    { width: 100%; justify-content: center; }

/* ── Dropdown ──────────────────────────────────────────────────────────────── */
.dropdown { position: relative; display: inline-block; }
.dropdown-menu {
  display: none;
  position: absolute;
  right: 0; top: 100%;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  min-width: 180px;
  z-index: 200;
  box-shadow: var(--shadow);
}
.dropdown:hover .dropdown-menu { display: block; }
.dropdown-menu a {
  display: block;
  padding: .5rem .9rem;
  color: var(--text);
  font-size: .85rem;
}
.dropdown-menu a:hover { background: var(--bg-3); text-decoration: none; }
.dropdown-divider { height: 1px; background: var(--border); margin: .25rem 0; }

/* ── Forms ─────────────────────────────────────────────────────────────────── */
.field { display: flex; flex-direction: column; gap: .3rem; }
.field label { font-size: .8rem; color: var(--text-muted); }
.field-row  { display: flex; align-items: center; gap: .75rem; margin-bottom: .5rem; }
.field-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin-bottom: .5rem; }
.field-row-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .75rem; margin-bottom: .5rem; }

input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"],
select,
.select-sm {
  background: var(--bg-3);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--radius);
  padding: .35rem .6rem;
  font-size: .875rem;
  outline: none;
  width: 100%;
}
input:focus, select:focus { border-color: var(--accent); }

.checkbox-label { display: flex; align-items: center; gap: .4rem; font-size: .875rem; cursor: pointer; }
.field-input { background: var(--bg-3); border: 1px solid var(--border); color: var(--text);
               border-radius: 4px; padding: .2rem .4rem; font-size: .82rem; width: 100%; }

/* ── Tabs ──────────────────────────────────────────────────────────────────── */
.tabs {
  display: flex;
  gap: .25rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 1rem;
}
.tab-btn {
  /* inline-flex so <button>, <a>, and <span> all anchor on the same
     baseline. Previously the <a class="tab-link"> tabs (Schedule, Call
     Sheets) sat 2-3 px higher than the <button> tabs because anchor
     elements default to baseline alignment while buttons baseline at
     the text middle. inline-flex + align-items:center forces every
     variant to share the same vertical center. */
  display: inline-flex;
  align-items: center;
  line-height: 1.2;
  padding: .5rem 1rem;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-muted);
  cursor: pointer;
  font-size: .875rem;
  transition: color .12s, border-color .12s;
  margin-bottom: -1px;
  font-family: inherit;
  text-decoration: none;
}
.tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); }
.tab-btn:hover  { color: var(--text); }

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

/* ── Tables ────────────────────────────────────────────────────────────────── */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .93rem;
}
.data-table th {
  text-align: left;
  padding: .45rem .6rem;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  font-weight: 500;
  position: sticky;
  top: 44px;
  background: var(--bg-2);
  z-index: 5;
}
/* Line tables: drop sticky thead. Multiple sticky theads at the same
   top:44px overlap each other when more than one section is in view —
   the upper section's column header keeps painting over the next
   section's first data row. Each section is short enough that an
   in-flow header keeps headers visible without the overlap. */
.line-table thead th { position: static; top: auto; }
/* Header alignment: numeric columns + Type/Fringe should hug the right
   edge so the text sits next to its resize handle (which lives on the
   right of each TH). Without this override .data-table th's
   text-align:left wins over .col-num text-align:right by specificity. */
.line-table thead th.col-num,
.line-table thead th.col-qty,
.line-table thead th.col-days,
.line-table thead th.col-rt,
.line-table thead th.col-fr,
.line-table thead th.col-working,
.line-table thead th.col-variance { text-align: right; }
/* Description stays left-aligned — it's the one wide identifying column. */
.line-table thead th.col-desc { text-align: left; }
/* Top Sheet headers: Estimated / Working / Actual / Variance columns
   were left-aligned because .data-table th's tag selector outweighed
   .col-num's class selector for specificity. Right-align them so the
   header text lines up with the right-aligned numeric cells below. */
.topsheet-table thead th.col-num { text-align: right; }
/* Fixed column widths so the table layout doesn't reflow as totals
   change. Code stays narrow, Department fills, the four numeric
   columns are equal-width so they line up under their headers. */
.topsheet-table { table-layout: fixed; }
.topsheet-table th.col-code,
.topsheet-table td.col-code { width: 64px; }
.topsheet-table th.col-num,
.topsheet-table td.col-num  { width: 13%; min-width: 110px; }
.data-table td {
  padding: .45rem .6rem;
  border-bottom: 1px solid rgba(46,51,73,.5);
  vertical-align: middle;
}
.data-table tr:hover td { background: rgba(79,126,248,.04); }

.col-code { width: 60px; }
/* Numeric / money columns never wrap or truncate — a wrapped or clipped
   dollar figure is unreadable. The colgroup <col> widths in budget.html are
   authoritative under table-layout:fixed and are sized to fit worst-case
   content; nowrap here guarantees the digits render on one line (they ride
   the section-block horizontal scroll if a 7-figure outlier overflows). */
.col-num  { text-align: right; white-space: nowrap; }
.col-qty  { text-align: right; width: 56px; white-space: nowrap; }
.col-days { text-align: right; width: 88px; white-space: nowrap; }
/* Description is the one column that tolerates truncation — it's kept
   deliberately slim (22% via the colgroup) so the numeric columns get room,
   and clips its overflow rather than forcing the table wider. The inline
   description text gets a true ellipsis (rule below); the meal-summary
   sub-line and qty badges are free to wrap, so no nowrap on the cell itself. */
.col-desc { overflow: hidden; }
/* Ellipsis the editable description text specifically (full text remains in
   the inline editor on click) without clipping the surrounding badges. */
.col-desc .editable[data-field="description"] {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}
.col-pc   { }
.col-rt   { white-space: nowrap; }
.col-fr   { white-space: nowrap; }
.col-act  { white-space: nowrap; }
/* In non-labor sections, action col fills remaining space — keep delete button at far right */
.no-labor .col-act { text-align: right; }

/* Working Budget section blocks */
.section-block { margin-bottom: 1.5rem; }
.section-header {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .35rem .6rem;
  background: var(--bg-3);
  border-radius: var(--radius) var(--radius) 0 0;
  border: 1px solid var(--border);
  border-bottom: none;
  /* Anchor-link + scroll offsets: when jumping to a section via link,
     leave room below the 44px fixed app header so the section title
     + column header aren't hidden. */
  scroll-margin-top: 48px;
}
/* When a budget section is scrolled into view, keep the first data row
   clear of the 44px fixed app header + the ~30px sticky column header.
   Previously the first row could sit under the sticky thead and look
   cut off. */
.line-table tbody tr.line-row:first-child {
  scroll-margin-top: 90px;
}
/* The sticky thead (top:44px) has z-index:5 and the col-resizer handle
   also sits at z-index:5. With table-layout:fixed and the resizer absolutely
   positioned inside each <th>, the handle could paint over the first row's
   content when the table scrolls under it. Bump the resizer below the
   thead background so the description text in row 1 stays readable. */
.line-table thead th { z-index: 6; }
.line-table .col-resizer { z-index: 4; }
.section-code { font-size: .75rem; color: var(--text-muted); width: 42px; }
.section-name { font-weight: 600; font-size: .875rem; flex: 1; }
.section-total-badge { font-size: .8rem; font-weight: 600; color: var(--text-muted); margin-left: auto; padding: .1rem .5rem; background: var(--bg-2); border-radius: var(--radius); border: 1px solid var(--border); }
.line-table { border: 1px solid var(--border); }

/* Resizable column handles. Each <th> in a budget table gets a 6px
   draggable strip on its right edge. Hover highlights it; dragging
   syncs the matching <col> width across every section's table so the
   user's adjustment carries through the whole page. Persisted to
   localStorage per-budget by the JS in budget.html. */
.line-table thead th { position: relative; }
.line-table .col-resizer {
  position: absolute;
  top: 0;
  right: 0;
  width: 6px;
  height: 100%;
  cursor: col-resize;
  user-select: none;
  z-index: 5;
  background: transparent;
  transition: background 0.12s;
}
.line-table .col-resizer:hover,
.line-table .col-resizer.col-resizer-active {
  background: rgba(91, 138, 249, 0.45);
}
body.col-resizing { cursor: col-resize; user-select: none; }
body.col-resizing * { cursor: col-resize !important; }
.section-subtotal-row td { background: var(--bg-3); border-top: 1px solid var(--border); }
.section-grand-total-row td {
  background: var(--bg-2, #1a1a1a);
  border-top: 2px solid var(--accent, #4f7ef8);
  border-bottom: 1px solid var(--border);
}
.section-grand-total-row td:first-child { padding-right: 1rem !important; }
.kit-fee-subtotal-row td, .agent-fee-subtotal-row td {
  background: rgba(255,255,255,.015);
  border-top: 1px dashed var(--border);
}
.kit-fee-subtotal-row td { background: var(--bg-3); border-top: 1px dashed var(--border); font-size: .78rem; }
.agent-fee-subtotal-row td { background: var(--bg-3); border-top: 1px dashed var(--border); font-size: .78rem; }
.labor-line td { background: rgba(79,126,248,.03); }
.kit-fee-row td { background: rgba(79,126,248,.015); }
.kit-fee-row .col-desc { padding-left: 1.5rem !important; }
.kit-fee-row .col-desc::before { content: '↳ '; color: var(--muted); font-size: .8em; }

/* Department sub-group header rows inside Production Staff section */
.dept-group-header-row td {
  padding: .25rem .6rem .15rem;
  background: var(--bg-3, #1a1a2e);
  border-top: 1px solid var(--border);
  border-bottom: none;
}
.dept-group-label {
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--accent, #4f7ef8);
  opacity: .75;
}

/* Kit-fee rows: make every editable cell easier to click into. The
   subtle blue tint background on these rows + small cell padding made
   the editable spans hard to target. Per user 2026-05-05 — duration
   field on kit-fee rows specifically. Apply to all editable.num cells
   on kit-fee rows for consistency. */
.kit-fee-row .editable.num {
  min-width: 36px;
  padding: 2px 8px;
  display: inline-block;
}
.kit-fee-row .editable.num:hover {
  background: var(--bg-3);
  outline: 1px solid var(--accent);
  outline-offset: -1px;
}

/* Schedule-driven rows — italicize the description as a subtle "this
   is pulled from the schedule, not directly editable" signal. The
   duration count + "Days" label already render in the schedule's blue
   italic via .sched-days / .sched-unit; matching italics on the
   description ties the visual hint together. Per user 2026-05-05. */
.line-row.schedule-driven .editable[data-field="description"] {
  font-style: italic;
}

/* Inline edit */
.editable {
  cursor: text;
  border-radius: 3px;
  padding: 1px 3px;
  min-width: 20px;
  display: inline-block;
}
.editable:hover { background: var(--bg-3); }

/* Empty description fields are nearly impossible to click — give them
   a visible click target with placeholder hint text. Per user
   2026-05-04: blank rows from Insert Row Above/Below were tricky to
   click into. The :empty:before pseudo-element shows on a wider hit
   area; clicks anywhere on the area open the editor as before. */
.editable[data-field="description"]:empty {
  min-width: 220px;
  min-height: 1.4em;
  padding: 4px 8px;
  border: 1px dashed var(--border);
  background: rgba(91,138,249,.04);
  vertical-align: middle;
}
.editable[data-field="description"]:empty:before {
  content: "Click to add description…";
  color: var(--text-muted);
  font-style: italic;
  font-size: .82rem;
  opacity: .8;
  pointer-events: none;
}
.editable[data-field="description"]:empty:hover {
  background: var(--bg-3);
  border-color: var(--accent);
}
.inline-input {
  background: var(--bg-3);
  border: 1px solid var(--accent);
  color: var(--text);
  border-radius: 3px;
  padding: 1px 4px;
  font-size: .82rem;
  width: 80px;
}
.inline-select {
  background: var(--bg-3);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 3px;
  padding: 1px 3px;
  font-size: .8rem;
  width: 100%;
}
.sched-days { color: var(--blue); font-style: italic; }

/* Variance colors. Convention 2026-05-10: negative = over budget = red,
   positive = remaining = blue. (Was green for "under" — switched to blue
   per user, matches the budget-tab var-pos / var-neg classes below.) */
.over  { color: var(--red); }
.under { color: var(--blue, #4f7ef8); }
.muted { color: var(--text-muted); }
/* Non-labor discount percentage display */
.disc-pct { color: var(--red, #e05252); font-style: italic; }

/* Top sheet */
.topsheet-table tfoot tr td,
.topsheet-table tfoot tr th { border-top: 1px solid var(--border); }
.subtotal-row td { background: var(--bg-3); }
.fee-row td      { color: var(--text-muted); font-size: .8rem; }
.fee-row-dispersed td { color: var(--text); }
.grand-total-row td { background: rgba(79,126,248,.1); }

/* Production Company Fee badges */
.fee-mode-badge {
  display: inline-block;
  font-size: .68rem;
  font-weight: 600;
  padding: .1rem .4rem;
  border-radius: 99px;
  margin-left: .5rem;
  background: rgba(79,126,248,.15);
  color: var(--accent);
  vertical-align: middle;
}
.fee-mode-badge.dispersed-badge {
  background: rgba(46,204,113,.15);
  color: var(--green);
}

/* Per-rate-cell dispersed fee badge */
.fee-disp-badge {
  display: block;
  font-size: .65rem;
  color: var(--green);
  font-weight: 600;
  margin-top: .1rem;
  letter-spacing: .02em;
}

/* Working toolbar */
.working-toolbar {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: .75rem;
  /* flex-wrap so the search field can drop to its own row, clearing
     the floating mode switcher (which sits at top:56px right:14px and
     would otherwise overlay a right-aligned search input). */
  flex-wrap: wrap;
}
.working-toolbar .wb-search-wrap {
  /* flex-basis:100% forces the search field to wrap onto its own row
     below the other toolbar controls — keeps it out from under the
     floating Estimated/Working/Actual switcher. */
  flex-basis: 100%;
  margin-left: 0 !important;
  display: flex;
  align-items: center;
}

/* Tools grid */
.tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
}

/* Badge */
.badge {
  font-size: .7rem;
  padding: .1rem .4rem;
  border-radius: 99px;
  background: rgba(231,76,60,.2);
  color: var(--red);
  margin-left: .3rem;
}

/* Empty state */
.empty-state {
  padding: 3rem;
  text-align: center;
  color: var(--text-muted);
}

/* ── Modal ─────────────────────────────────────────────────────────────────── */
.modal { position: fixed; inset: 0; z-index: 500; display: flex; align-items: center; justify-content: center; }
.modal.hidden { display: none; }
.modal-overlay { position: absolute; inset: 0; background: rgba(0,0,0,.6); }
/* Legacy STANDALONE modal-overlay containers (union/client/support on the
   People tab): .modal-overlay was designed as a backdrop INSIDE a fixed
   .modal wrapper — used top-level it anchors to the DOCUMENT top with no
   centering, so the dialog opened thousands of px above a scrolled page
   ("I click add union and nothing seems to happen", 2026-07-13). Fixed +
   centered here; the JS keeps toggling inline display:none/flex. */
#union-modal.modal-overlay,
#client-modal.modal-overlay,
#support-modal.modal-overlay {
  position: fixed;
  z-index: 500;
  align-items: center;
  justify-content: center;
}
.modal-box {
  position: relative;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  width: 520px;
  max-width: calc(100vw - 2rem);
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
  box-shadow: var(--shadow);
  z-index: 1;
}
.modal-box h2 { font-size: 1.1rem; margin-bottom: 1rem; }
.modal-actions { display: flex; justify-content: flex-end; gap: .5rem; margin-top: 1rem; }

/* ── Budget header ─────────────────────────────────────────────────────────── */
.budget-header { align-items: flex-end; }
.budget-header-right { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.budget-header-left .breadcrumb { margin-bottom: .2rem; }

/* ── Collab presence avatars ───────────────────────────────────────────────── */
.collab-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent-dim);
  color: #fff;
  font-size: .65rem;
  font-weight: 700;
  border: 2px solid var(--bg-2);
  cursor: default;
  letter-spacing: .02em;
  animation: avatarFadeIn .3s ease;
}
.collab-overflow {
  background: var(--bg-3) !important;
  color: var(--text-muted);
  font-size: .6rem;
  border-color: var(--border);
}
@keyframes avatarFadeIn {
  from { opacity: 0; transform: scale(.7); }
  to   { opacity: 1; transform: scale(1); }
}

/* ── Cursor presence badge (shows who is editing a row) ───────────────────── */
.edit-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  color: #fff;
  font-size: .5rem;
  font-weight: 700;
  margin-right: 4px;
  vertical-align: middle;
  animation: avatarFadeIn .3s ease;
}

/* ── Conflict override toast ──────────────────────────────────────────────── */
.conflict-toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: var(--bg-3);
  border: 1px solid #d97706;
  color: var(--text);
  border-radius: 8px;
  padding: 10px 16px;
  font-size: .82rem;
  z-index: 900;
  box-shadow: 0 4px 16px rgba(0,0,0,.4);
  animation: avatarFadeIn .3s ease;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ── Smart CSV Import Modal ──────────────────────────────────────────────── */
.import-mapping-table,
.import-preview-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .85rem;
}
.import-mapping-table th,
.import-preview-table th {
  text-align: left;
  padding: .4rem .5rem;
  border-bottom: 1px solid var(--border);
  color: var(--text-muted);
  font-weight: 600;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.import-mapping-table td,
.import-preview-table td {
  padding: .4rem .5rem;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.import-mapping-table select.import-target-sel {
  width: 100%;
  padding: 4px 8px;
  font-size: .85rem;
}
.import-preview-table select.import-action-sel {
  padding: 3px 6px;
  font-size: .8rem;
}
.import-preview-table tr.duplicate { background: rgba(217, 119, 6, .08); }
.import-preview-table tr.junk { opacity: .55; font-style: italic; }

/* Raw preview header picker */
.import-header-picker {
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
}
.import-rawpreview-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .78rem;
  font-family: 'SF Mono', Menlo, Consolas, monospace;
}
.import-rawpreview-row {
  cursor: pointer;
  transition: background .12s ease;
}
.import-rawpreview-row:hover { background: rgba(37, 99, 235, .08); }
.import-rawpreview-row.above-header { opacity: .45; }
.import-rawpreview-row.is-header {
  background: rgba(22, 163, 74, .15);
  font-weight: 600;
  position: sticky;
  top: 0;
}
.import-rawpreview-row.is-header::before {
  content: '▶ header';
  position: absolute;
  left: -4px;
  font-size: .65rem;
  color: #4ade80;
}
.import-rawpreview-table td {
  padding: 3px 6px;
  border-bottom: 1px dashed var(--border);
  max-width: 140px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.import-rawpreview-num {
  width: 28px;
  text-align: right;
  color: var(--text-muted);
  background: var(--bg-2);
}
.import-confidence-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: .72rem;
  font-weight: 600;
}
.import-confidence-badge.conf-high { background: rgba(22, 163, 74, .18); color: #4ade80; }
.import-confidence-badge.conf-med  { background: rgba(217, 119, 6, .18); color: #fbbf24; }
.import-confidence-badge.conf-low  { background: rgba(220, 38, 38, .18); color: #f87171; }

/* ── Login ─────────────────────────────────────────────────────────────────── */
.login-page { display: flex; align-items: center; justify-content: center; min-height: 100vh; }
.login-card {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2rem;
  width: 360px;
  box-shadow: var(--shadow);
}
.login-card h1 { font-size: 1.5rem; margin-bottom: .25rem; color: var(--accent); }
.login-sub { color: var(--text-muted); margin-bottom: 1.25rem; font-size: .875rem; }
.login-card .field { margin-bottom: .75rem; }

/* ── Gantt ─────────────────────────────────────────────────────────────────── */
.gantt-toolbar {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: .75rem;
  flex-wrap: wrap;
}
.gantt-sched-mode-label { font-size: .72rem; letter-spacing: .04em; padding: .2rem .55rem; }
.legend { display: flex; gap: .5rem; flex-wrap: wrap; }
.day-chip {
  font-size: .75rem;
  padding: .15rem .5rem;
  border-radius: 99px;
  font-weight: 500;
}

.gantt-scroll-wrap {
  overflow-x: auto;
  overflow-y: auto;
  max-height: calc(100vh - 190px); /* self-contained scroll region */
}
.gantt-table { border-collapse: collapse; font-size: .8rem; white-space: nowrap; }
.gantt-table th, .gantt-table td {
  border: 1px solid var(--border);
  padding: 0;
}
.gantt-table thead th {
  position: sticky;
  top: 0;           /* top of the scroll wrap, not the viewport */
  z-index: 10;
  background: var(--bg-2);
}
.gantt-row-label {
  min-width: 220px;
  max-width: 260px;
  padding: .4rem .6rem;
  white-space: normal;
  position: sticky;
  left: 0;
  background: var(--bg-2);
  z-index: 10;
}
.gantt-date-col { min-width: 44px; text-align: center; }
.gantt-date-head { display: flex; flex-direction: column; align-items: center; padding: .25rem .1rem; }
.gantt-dow { font-size: .68rem; color: var(--text-muted); }
.gantt-day { font-size: .75rem; }
.gantt-cell {
  width: 44px;
  height: 38px;
  cursor: pointer;
  text-align: center;
  vertical-align: middle;
  transition: opacity .1s;
  user-select: none;
  position: relative;
}
.gantt-cell:hover { opacity: .8; }
/* ▾ dropdown button injected into each cell — small target in the
   bottom-right corner. Hidden until hover (and always visible on
   touch devices) so the cell stays clean. Per user 2026-04-28: this
   is the dedicated edit-target so cell-body click can be reserved
   for selection (Excel-style). */
.gantt-cell-dropdown {
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 22px;
  height: 18px;
  padding: 0;
  margin: 0;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 4px;
  background: rgba(0,0,0,.7);
  color: #fff;
  font-size: 14px;
  line-height: 14px;
  font-weight: 700;
  cursor: pointer;
  /* Reverted from blue/white per user 2026-04-29 — the bright fill was
     clunky against the colored day-type cells. Subtle dark fill with a
     soft white border is the prior, cleaner design. */
  opacity: 1;
  transition: background .12s, transform .08s, border-color .12s;
  z-index: 2;
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gantt-cell-dropdown:hover {
  background: var(--blue);
  border-color: #fff;
  transform: scale(1.12);
}

/* ── Hotkey help overlay <kbd> styling ─────────────────────────────── */
#hotkey-help-overlay kbd {
  display: inline-block;
  min-width: 24px;
  padding: 2px 7px;
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  border-radius: 4px;
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, 'SF Mono', Menlo, monospace;
  font-size: .78rem;
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
}
.cell-label { font-size: .68rem; font-weight: 700; color: #fff; display: block; line-height: 1.3; }
.cell-ot-badge { font-size: .57rem; font-weight: 600; color: var(--orange); display: block; line-height: 1; }

/* OT / DT cell highlighting */
.gantt-cell.day-has-ot { border-top: 3px solid var(--orange) !important; }
.gantt-cell.day-has-dt { border-top: 3px solid var(--red) !important; }
.gantt-line-code { font-size: .7rem; color: var(--text-muted); margin-right: .3rem; }
.gantt-line-desc { font-size: .8rem; cursor: default; }
.gantt-line-desc:hover { text-decoration: underline dotted; cursor: text; }
.gantt-label-custom { color: var(--accent); font-style: italic; }
.gantt-label-original { font-size: .72rem; color: var(--text-muted); font-style: normal; margin-left: .3rem; }
.weekend { opacity: .6; }

/* Gantt day type colors */
.day-work     { background: rgba(46,204,113,.35); }
.day-travel        { background: rgba(52,152,219,.35); }
/* Travel variants: keep the blue family but lighter so they're
   visually distinct from full-rate Travel — half = mid-blue,
   unpaid = grey-blue (no comp = drained color). */
.day-travel_half   { background: rgba(52,152,219,.20);
                     border: 1px dashed rgba(52,152,219,.55); }
.day-travel_unpaid { background: rgba(52,152,219,.10);
                     border: 1px dashed rgba(125,150,170,.55); }
.day-hold          { background: rgba(241,196,15,.25); }
.day-half          { background: rgba(241,196,15,.15); }
.day-kill_fee      { background: rgba(231,76,60,.3); }
.day-off           { background: transparent; }
/* Legend chips */
.day-chip.day-work          { background: rgba(46,204,113,.35); color: var(--green); }
.day-chip.day-travel        { background: rgba(52,152,219,.35); color: var(--blue); }
.day-chip.day-travel_half   { background: rgba(52,152,219,.20); color: var(--blue);
                              border: 1px dashed rgba(52,152,219,.55); }
.day-chip.day-travel_unpaid { background: rgba(52,152,219,.10); color: #8aa2b8;
                              border: 1px dashed rgba(125,150,170,.55); }
.day-chip.day-hold          { background: rgba(241,196,15,.25); color: var(--yellow); }
.day-chip.day-half          { background: rgba(241,196,15,.15); color: var(--yellow); }
.day-chip.day-kill_fee      { background: rgba(231,76,60,.3);   color: var(--red); }
.day-chip.day-off           { background: var(--bg-3);          color: var(--text-muted); }

/* Schedule toggle */
.sched-toggle { display: flex; align-items: center; gap: .25rem; cursor: pointer; margin-left: .4rem; }
.sched-toggle-label { font-size: .7rem; color: var(--text-muted); }

/* Day picker context menu */
.day-picker {
  position: fixed;
  z-index: 600;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .35rem;
  display: flex;
  flex-direction: column;
  gap: .2rem;
  box-shadow: var(--shadow);
  min-width: 110px;
}
.day-picker.hidden { display: none; }
.day-pick-btn {
  padding: .3rem .6rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: .8rem;
  text-align: left;
  color: var(--text);
  background: none;
}
.day-pick-btn:hover { background: var(--bg-3); }
.day-pick-btn.day-note-btn { color: var(--text-muted); border-top: 1px solid var(--border); margin-top: .2rem; padding-top: .4rem; }
.day-pick-btn.day-ot-btn { color: var(--orange); }

/* Unbudgeted rows in compare */
.unbudgeted-row { opacity: .75; }

/* ── Quick Entry Panel — two-panel sidebar layout ──────────────────────────── */
.cascade-overlay { position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:400; }
.cascade-overlay.hidden { display:none; }

.cascade-panel {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: var(--bg-2);
  border-top: 2px solid var(--accent);
  z-index: 500;
  height: 78vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 -6px 32px rgba(0,0,0,.6);
}
.cascade-panel.hidden { display: none; }

/* ── Header ── */
.qe-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: .55rem 1.1rem; border-bottom: 1px solid var(--border);
  background: var(--bg-3); flex-shrink: 0; gap: .75rem;
}
.qe-header-left  { display:flex; align-items:center; gap:.75rem; flex:1; }
.qe-header-right { display:flex; align-items:center; gap:.6rem; flex-shrink:0; }
.qe-title { font-weight:700; font-size:.95rem; color:var(--accent); white-space:nowrap; }
.qe-count { font-size:.8rem; color:var(--text-muted); white-space:nowrap; }

.qe-union-toggle { display:flex; border:1px solid var(--border); border-radius:99px; overflow:hidden; }
.qe-union-btn    { padding:.22rem .65rem; background:none; border:none; color:var(--text-muted);
                   cursor:pointer; font-size:.75rem; transition:background .1s,color .1s; }
.qe-union-btn.active { background:var(--accent); color:#fff; }

.qe-search {
  flex:1; max-width:260px;
  background:var(--bg-2); border:1px solid var(--border); color:var(--text);
  border-radius:var(--radius); padding:.28rem .6rem; font-size:.82rem;
}
.qe-search:focus { border-color:var(--accent); outline:none; }

/* ── Body: sidebar + main ── */
.qe-body {
  display: flex;
  flex: 1;
  overflow: hidden;
}

/* Sidebar */
.qe-sidebar {
  width: 210px;
  flex-shrink: 0;
  border-right: 1px solid var(--border);
  overflow-y: auto;
  background: var(--bg-2);
}
.qe-cat-btn {
  display: flex; align-items: center; gap:.4rem; width:100%;
  padding: .42rem .75rem; background:none; border:none; border-bottom:1px solid rgba(46,51,73,.35);
  color: #b0b8d0; cursor:pointer; text-align:left; font-size:.8rem; font-weight: 500;
  transition: background .1s, color .1s;
}
.qe-cat-btn:hover  { background:var(--bg-3); color:var(--text); }
.qe-cat-btn.active { background:rgba(79,126,248,.12); color:var(--accent);
                     border-left:2px solid var(--accent); }
.qe-cat-code { font-size:.68rem; color: #6b7394; width:36px; flex-shrink:0; }
.qe-cat-name { flex:1; line-height:1.3; }
.qe-cat-sel  { font-size:.7rem; border-radius:99px; padding:.05rem .35rem; flex-shrink:0; }
.qe-cat-sel.has-sel { background:var(--accent); color:#fff; }

/* Main content area */
.qe-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.qe-main-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: .45rem .85rem; background: var(--bg-3); border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.qe-main-body { flex:1; overflow-y:auto; overflow-x:auto; }

.qe-welcome { padding:2rem; text-align:center; color:var(--text-muted); }

/* Items table */
.qe-table { width:100%; border-collapse:collapse; font-size:.8rem; min-width:620px; }
.qe-table thead th {
  position:sticky; top:0; background:var(--bg-3); padding:.38rem .55rem;
  text-align:left; color:var(--text-muted); border-bottom:1px solid var(--border);
  font-weight:500; font-size:.72rem; white-space:nowrap; z-index:2;
}
.qe-table tbody tr  { border-bottom:1px solid rgba(46,51,73,.35); }
.qe-table tbody tr:hover td { background:rgba(79,126,248,.05); }
.qe-row-checked td  { background:rgba(79,126,248,.08) !important; }

.qe-th-check  { width:32px; }
.qe-th-label  { min-width:160px; }
.qe-th-qty    { width:63px; }
.qe-th-days   { width:63px; }
.qe-th-rate   { width:120px; }
.qe-th-kit    { width:110px; }
.qe-th-fringe { width:60px; }
.qe-th-comp   { width:80px; }

.qe-td-check,
.qe-td-label  { padding:.3rem .55rem; }
.qe-td-qty, .qe-td-days, .qe-td-rate, .qe-td-kit, .qe-td-fringe, .qe-td-comp { padding:.18rem .35rem; }

.qe-item-label { font-size:.82rem; }

.qe-input {
  background:var(--bg-3); border:1px solid var(--border); color:var(--text);
  border-radius:4px; padding:.18rem .3rem; font-size:.78rem; width:100%;
}
.qe-input:focus { border-color:var(--accent); outline:none; }
.qe-select {
  background:var(--bg-3); border:1px solid var(--border); color:var(--text);
  border-radius:4px; padding:.18rem .25rem; font-size:.75rem; width:100%;
}
.qe-rate-wrap { display:flex; align-items:center; gap:2px; }
.qe-dollar, .qe-rate-lbl { font-size:.7rem; color:var(--text-muted); white-space:nowrap; }
.qe-rate-wrap .qe-input { flex:1; min-width:48px; }

.qe-group-header td {
  padding: .35rem .5rem .2rem;
  background: var(--bg-2);
  border-top: 1px solid var(--border);
}
.qe-group-label {
  font-size: .68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted);
}

.qe-comp-badge {
  font-size:.68rem; padding:.05rem .35rem; border-radius:3px;
  background:var(--bg-3); color:var(--text-muted);
}
.qe-comp-badge.labor   { background:rgba(79,126,248,.15); color:var(--accent); }
.qe-comp-badge.rental  { background:rgba(52,152,219,.15); color:var(--blue); }
.qe-comp-badge.purchase{ background:rgba(241,196,15,.12); color:var(--yellow); }

/* ── Tray ── */
.qe-tray {
  display: flex; align-items: center; gap:.75rem;
  padding: .5rem 1rem; border-top: 1px solid var(--border);
  background: var(--bg-3); flex-shrink: 0; min-height: 46px;
}
.qe-tray-chips {
  flex: 1; display:flex; flex-wrap:wrap; gap:.3rem; overflow:hidden; max-height:56px;
}
.qe-tray-actions { display:flex; align-items:center; gap:.5rem; flex-shrink:0; }

.qe-chip {
  display:inline-flex; align-items:center; gap:.3rem;
  background:rgba(79,126,248,.18); border:1px solid rgba(79,126,248,.3);
  border-radius:99px; padding:.1rem .5rem; font-size:.72rem;
}
.qe-chip-name { color:var(--text); }
.qe-chip-code { color:var(--text-muted); font-size:.65rem; }
.qe-chip-remove {
  background:none; border:none; color:var(--text-muted); cursor:pointer;
  font-size:.7rem; padding:0 .1rem; line-height:1;
}
.qe-chip-remove:hover { color:var(--red); }

/* ── Line Numbers (Feature 2) + drag handle ────────────────────────────── */
.line-number {
  font-size: .7rem;
  color: var(--text-muted);
  font-family: monospace;
  margin-right: .4rem;
  user-select: none;
  cursor: grab;
  padding: 2px 4px;
  border-radius: 3px;
  display: inline-block;
  transition: background .15s;
}
.line-number:hover {
  background: rgba(255,255,255,.08);
  color: var(--text);
}
.line-number:active { cursor: grabbing; }
.kit-fee-row .line-number { cursor: default; }
.kit-fee-row .line-number:hover { background: none; color: var(--text-muted); }

/* Sortable.js visual states */
.sortable-ghost {
  opacity: .35;
  background: var(--accent-dim, rgba(37,99,235,.2)) !important;
}
.sortable-drag {
  box-shadow: 0 8px 24px rgba(0,0,0,.5);
  opacity: .95;
}
.sortable-chosen {
  background: rgba(37,99,235,.08);
}

/* ── Section Pulse (Feature 3) ──────────────────────────────────────────── */
.section-pulse {
  animation: sectionPulse .8s ease;
}
@keyframes sectionPulse {
  0%,100% { background: var(--bg-3); }
  50%      { background: rgba(79,126,248,.25); }
}

/* ── Tax Credit rows (Feature 4) ─────────────────────────────────────────── */
.tax-credit-row td {
  padding: .35rem .5rem;
}
.section-divider-row td {
  padding-top: .75rem;
}
.net-budget-row td {
  padding: .5rem .5rem;
  border-top: 2px solid var(--border);
}

/* ── Schedule selection (CHANGE 4) ────────────────────────────────────────── */
.gantt-cell.selected {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  z-index: 1;
  position: relative;
}
.select-mode-active {
  cursor: crosshair;
}
.gantt-cell.select-mode-active {
  cursor: crosshair;
}

/* Copied state: dashed orange outline */
.gantt-scroll-wrap.has-copy .gantt-cell.copied {
  outline: 2px dashed var(--orange);
  outline-offset: -2px;
  z-index: 1;
  position: relative;
}
.payroll-chip {
  font-size: .75rem;
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: .2rem .5rem;
  color: var(--text-muted);
}

/* Payroll profile selector in gantt toolbar */
.payroll-profile-select {
  font-size: .78rem;
  background: var(--bg-3);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--radius);
  padding: .22rem .45rem;
  cursor: pointer;
  max-width: 240px;
}
.payroll-profile-select:focus { border-color: var(--accent); outline: none; }

/* OT/DT legend chips in toolbar */
.day-chip.day-has-ot-legend { background: rgba(230,126,34,.25); color: var(--orange); }
.day-chip.day-has-dt-legend { background: rgba(231,76,60,.2);   color: var(--red); }

/* Live totals panel */
.gantt-totals-panel {
  margin-bottom: .75rem;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.gantt-totals-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: .4rem .75rem;
  background: var(--bg-3);
  cursor: pointer;
  user-select: none;
  border-bottom: 1px solid var(--border);
}
.gantt-totals-header:hover { background: rgba(79,126,248,.08); }
.gantt-totals-title { font-size: .8rem; font-weight: 600; color: var(--text-muted); }
.gantt-totals-toggle { font-size: .7rem; color: var(--text-muted); }
.gantt-totals-body { overflow-x: auto; }
.gantt-totals-table {
  width: auto; min-width: 100%; border-collapse: collapse; font-size: .78rem;
}
.gantt-totals-table th {
  padding: .28rem .6rem; text-align: left; color: var(--text-muted);
  background: var(--bg-2); border-bottom: 1px solid var(--border);
  font-weight: 500; font-size: .7rem; white-space: nowrap;
}
.gantt-totals-table td { padding: .25rem .6rem; border-bottom: 1px solid rgba(46,51,73,.3); }
.gantt-totals-table th.col-num, .gantt-totals-table td.col-num { text-align: right; }
.totals-section-name { color: var(--text); white-space: nowrap; }
.totals-ot.has-ot { color: var(--orange); font-weight: 600; }
.totals-dt.has-dt { color: var(--red); font-weight: 600; }
.totals-total { color: var(--text); }

/* Sched OT display in working budget */
.sched-ot { font-size: .82rem; color: var(--orange); }

/* Select mode button active state */
#btn-select-mode.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
/* Locked: slightly different shade */
.select-mode-locked #btn-select-mode,
#btn-select-mode.locked {
  background: var(--accent-dim);
  color: #fff;
  border-color: var(--accent-dim);
}

/* ── Department header in gantt ────────────────────────────────────────────── */
.gantt-dept-header td {
  background: var(--bg-3);
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted);
  padding: .3rem .6rem;
  border-top: 1px solid var(--border);
}

/* Sub-department header within a section */
.gantt-sub-dept-header td {
  background: rgba(79,126,248,.06);
  font-size: .68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--accent);
  padding: .2rem .6rem .2rem 1.2rem;
  border-top: 1px solid rgba(79,126,248,.15);
}

/* Locked select mode: pulsing border on the scroll wrapper */
.gantt-scroll-wrap.select-mode-locked {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  animation: selectLockPulse 2s ease infinite;
}
@keyframes selectLockPulse {
  0%, 100% { outline-color: var(--accent); }
  50%       { outline-color: var(--accent-dim); }
}

/* ── QE Agent% column (CHANGE 7) ─────────────────────────────────────────── */
.qe-th-agent { width: 4rem; }
.qe-td-agent { width: 4rem; }

/* ── Phase 2: Week separator columns ────────────────────────────────────────── */
.gantt-table th.week-start-col,
.gantt-table td.week-start-col {
  border-left: 2px solid var(--accent) !important;
}
.week-label {
  font-size: .58rem;
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: .04em;
  line-height: 1;
}

/* ── Phase 2: Date picker inputs in toolbar ──────────────────────────────────── */
.gantt-date-label {
  display: flex;
  align-items: center;
  gap: .3rem;
  font-size: .78rem;
  color: var(--text-muted);
  white-space: nowrap;
}
.gantt-date-input {
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-size: .78rem;
  padding: .25rem .4rem;
  cursor: pointer;
}
.gantt-date-input:focus { border-color: var(--accent); outline: none; }

/* ── Phase 2: Travel flag corner dots ────────────────────────────────────────── */
.flag-dot {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 99px;
  pointer-events: none;
}
/* Flight: top-right, blue */
.flag-flight {
  top: 2px;
  right: 2px;
  background: var(--blue);
}
/* Mileage: top-left, green */
.flag-mileage {
  top: 2px;
  left: 2px;
  background: var(--green);
}
/* Car rental: top-left (stacked with mileage offset) */
.flag-car-rental {
  top: 2px;
  left: 10px;
  background: #8e44ad;
}
/* Car service (chauffeur / black car): top-left, teal — distinct from the
   purple rental dot so they read apart at a glance. */
.flag-car-service {
  top: 2px;
  left: 18px;
  background: #14b8a6;
}
/* Hotel: bottom-left + bottom-right, yellow — connect adjacent days */
.flag-hotel-l {
  bottom: 2px;
  left: 0;
  width: 50%;
  height: 5px;
  border-radius: 3px 0 0 3px;
  background: var(--yellow);
}
.flag-hotel-r {
  bottom: 2px;
  right: 0;
  width: 50%;
  height: 5px;
  border-radius: 0 3px 3px 0;
  background: var(--yellow);
}

/* ── Phase 2: Flag toggle buttons in picker ──────────────────────────────────── */
.day-picker-divider {
  height: 1px;
  background: var(--border);
  margin: .2rem 0;
}
.day-picker-flags {
  display: flex;
  flex-direction: column;
  gap: .15rem;
}
.flag-toggle-label {
  font-size: .68rem;
  color: var(--text-muted);
  padding: .1rem .4rem 0;
}
.flag-toggle-btn {
  padding: .25rem .6rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  cursor: pointer;
  font-size: .75rem;
  text-align: left;
  color: var(--text);
  background: none;
  transition: background .12s;
}
.flag-toggle-btn:hover { background: var(--bg-3); }
.flag-toggle-btn.flag-active {
  background: rgba(52,152,219,.25);
  border-color: var(--blue);
  color: var(--blue);
}
/* Day-type buttons in the single-cell picker + bulk-action menu — same
   highlight when the cell already has that type / note / OT, or when
   every cell in a multi-cell selection unanimously has that flag. */
.day-pick-btn.flag-active,
.select-action-btn.flag-active {
  background: rgba(52,152,219,.25);
  border-color: var(--blue);
  color: var(--blue);
  box-shadow: inset 0 0 0 1px var(--blue);
}
/* Partial coverage in a mixed selection — soft highlight so the user
   sees "some cells have this flag, not all" before clicking. */
.select-action-btn.flag-partial {
  background: rgba(52,152,219,.10);
  color: var(--blue);
}

/* ── Phase 2: Working meal rows ──────────────────────────────────────────────── */
.gantt-meal-row { }
.gantt-meal-label {
  font-size: .72rem;
  color: var(--text-muted);
  font-style: italic;
}
.gantt-meal-cell {
  width: 44px;
  height: 24px;
  cursor: pointer;
  text-align: center;
  vertical-align: middle;
  position: relative;
  background: var(--bg);
  transition: background .1s;
  border: 1px solid var(--border);
}
.gantt-meal-cell:hover { background: var(--bg-3); }
.gantt-meal-cell.meal-active {
  background: rgba(241,196,15,.2);
}
.meal-dot {
  font-size: .7rem;
  color: var(--yellow);
  line-height: 1;
}

/* OT/DT legend chips */
.day-chip.day-has-ot-legend {
  background: rgba(230,126,34,.25);
  color: var(--orange);
  border-top: 3px solid var(--orange);
}
.day-chip.day-has-dt-legend {
  background: rgba(231,76,60,.2);
  color: var(--red);
  border-top: 3px solid var(--red);
}

/* ── Payroll selector wrap (select + info button side-by-side) ────────────── */
.payroll-selector-wrap {
  display: flex;
  align-items: center;
  gap: .3rem;
}
.payroll-info-btn {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg-3);
  color: var(--text-muted);
  font-size: .72rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .12s, color .12s;
}
.payroll-info-btn:hover {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

/* ── Payroll info popup ──────────────────────────────────────────────────────── */
.payroll-info-popup {
  position: fixed;
  top: 120px;
  right: 24px;
  z-index: 700;
  width: 340px;
  max-height: 60vh;
  overflow-y: auto;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: .75rem 1rem;
  font-size: .8rem;
  line-height: 1.55;
}
.payroll-info-popup.hidden { display: none; }
.payroll-info-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .5rem;
  padding-bottom: .4rem;
  border-bottom: 1px solid var(--border);
}
.payroll-info-header strong { font-size: .88rem; color: var(--text); }
.payroll-info-close {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: .9rem;
  padding: 0 .2rem;
}
.payroll-info-close:hover { color: var(--red); }
.payroll-info-body ul {
  padding-left: 1.2rem;
  margin: 0 0 .6rem 0;
}
.payroll-info-body li { margin-bottom: .3rem; }
.payroll-info-tip {
  margin-top: .5rem;
  padding-top: .4rem;
  border-top: 1px solid var(--border);
  font-size: .72rem;
  color: var(--text-muted);
  font-style: italic;
}
.payroll-info-all {
  margin-top: .6rem;
  padding-top: .5rem;
  border-top: 1px solid var(--border);
}
.payroll-info-all ul {
  margin-top: .3rem;
  font-size: .75rem;
  color: var(--text-muted);
}

/* ── Select mode badge ────────────────────────────────────────────────────────── */
.select-mode-badge {
  background: var(--accent);
  color: #fff;
  font-size: .75rem;
  font-weight: 600;
  padding: .4rem 1rem;
  border-radius: var(--radius);
  margin-bottom: .5rem;
  text-align: center;
  letter-spacing: .01em;
  animation: selectBadgePulse 3s ease infinite;
}
.select-mode-badge.hidden { display: none; }
@keyframes selectBadgePulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: .85; }
}

/* ── Refined select mode active states ────────────────────────────────────────── */
/* Override the old "locked" pulsing outline — replaced by badge */
.gantt-scroll-wrap.select-mode-active {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.gantt-scroll-wrap.select-mode-locked {
  outline: none;
  animation: none;
}

/* Crosshair cursor on the whole page in select mode */
body.gantt-select-mode .gantt-cell {
  cursor: crosshair;
}

/* ── Day picker section label ─────────────────────────────────────────────────── */
.day-picker-section-label {
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted);
  padding: .1rem .5rem .2rem;
}

/* Copied cells: dashed green while in paste-ready mode */
.gantt-scroll-wrap.has-copy .gantt-cell.copied {
  outline: 2px dashed var(--green);
  outline-offset: -2px;
  z-index: 1;
  position: relative;
}

/* ── Budget row context menu ─────────────────────────────────────────────────── */
.budget-ctx-menu {
  position: fixed;
  z-index: 500;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  min-width: 190px;
  padding: .3rem 0;
}
.budget-ctx-menu.hidden { display: none; }

/* ── Line row insert/move dropdown ───────────────────────────────────────────── */
.line-row-menu {
  position: fixed;
  z-index: 600;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  min-width: 170px;
  padding: .3rem 0;
}
.line-row-menu.hidden { display: none; }
.line-row-menu button {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: .4rem .85rem;
  font-size: .82rem;
  color: var(--text);
  cursor: pointer;
  white-space: nowrap;
}
.line-row-menu button:hover { background: var(--bg-3); color: var(--accent); }

.ctx-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: .4rem .8rem;
  font-size: .82rem;
  color: var(--text);
  cursor: pointer;
}
.ctx-menu-item:hover { background: var(--bg-3); color: var(--accent); }

/* ── Select action menu ───────────────────────────────────────────────────────── */
.select-action-menu {
  position: fixed;
  z-index: 500;
  background: var(--bg-2);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  min-width: 210px;
  padding: .3rem 0;
}
.select-action-menu.hidden { display: none; }
.select-action-label {
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--accent);
  padding: .3rem .8rem .1rem;
}
.select-action-section {
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-muted);
  padding: .3rem .8rem .1rem;
  margin-top: .2rem;
}
.select-action-divider {
  border-top: 1px solid var(--border);
  margin: .3rem 0;
}
.select-action-btn {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: .35rem .8rem;
  font-size: .82rem;
  color: var(--text);
  cursor: pointer;
}
.select-action-btn:hover { background: var(--bg-3); color: var(--accent); }

/* ── Working Meal & Per Diem flag dots ────────────────────────────────────────── */
.flag-dot.flag-working-meal {
  bottom: 3px;
  left: 3px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--green);
  position: absolute;
}
.flag-dot.flag-per-diem {
  bottom: 3px;
  right: 10px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #9b59b6;    /* full-day = purple */
  position: absolute;
}
/* Partial-day per diem variants. Stacked along the bottom edge so a cell
   can show multiple at once (e.g. breakfast + dinner but not lunch). */
.flag-dot.flag-per-diem-b {
  bottom: 3px; right: 18px;
  width: 5px; height: 5px; border-radius: 50%;
  background: #f39c12;    /* breakfast = amber */
  position: absolute;
}
.flag-dot.flag-per-diem-l {
  bottom: 3px; right: 26px;
  width: 5px; height: 5px; border-radius: 50%;
  background: #3498db;    /* lunch = blue */
  position: absolute;
}
.flag-dot.flag-per-diem-d {
  bottom: 3px; right: 34px;
  width: 5px; height: 5px; border-radius: 50%;
  background: #e74c3c;    /* dinner = red */
  position: absolute;
}

/* ── Gantt overflow arrows ────────────────────────────────────────────────────── */
.gantt-overflow-arrow {
  display: inline-block;
  font-size: .65rem;
  font-weight: 700;
  padding: 0 .2rem;
  border-radius: 3px;
  cursor: pointer;
  user-select: none;
  vertical-align: middle;
  transition: background .15s;
}
.gantt-overflow-left {
  background: var(--accent-dim);
  color: var(--accent);
  margin-left: .25rem;
}
.gantt-overflow-right {
  background: var(--accent-dim);
  color: var(--accent);
  margin-left: .25rem;
}
.gantt-overflow-arrow:hover {
  background: var(--accent);
  color: #fff;
}

/* ── Calc detail panel (floating popover) ────────────────────────────────────── */
.calc-detail-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 600;
  background: rgba(0,0,0,.45);
}
.calc-detail-overlay.visible { display: block; }

.calc-detail-panel {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 601;
  width: min(640px, 94vw);
  max-height: 80vh;
  overflow-y: auto;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 0;
}
.calc-detail-panel.visible { display: block; }

.calc-detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .75rem 1rem;
  border-bottom: 1px solid var(--border);
  background: var(--bg-3);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  position: sticky;
  top: 0;
  z-index: 1;
}
.calc-detail-title {
  font-weight: 700;
  font-size: .95rem;
  color: var(--text);
}
.calc-detail-close {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 1rem;
  cursor: pointer;
  padding: 0 .25rem;
}
.calc-detail-close:hover { color: var(--red); }

.calc-detail-body {
  padding: 1rem;
}
.calc-detail-loading {
  text-align: center;
  color: var(--text-muted);
  padding: 2rem;
  font-style: italic;
}

.calc-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem .9rem;
  margin-bottom: .75rem;
  font-size: .8rem;
  color: var(--text-muted);
}
.calc-meta strong { color: var(--text); }

.calc-rule {
  font-size: .78rem;
  background: var(--bg-3);
  border-left: 3px solid var(--accent);
  padding: .35rem .6rem;
  border-radius: 0 var(--radius) var(--radius) 0;
  margin-bottom: .85rem;
  color: var(--text);
}
.no-ot {
  font-style: italic;
  color: var(--text-muted);
}

/* Per-week table */
.calc-weeks-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .8rem;
  margin-bottom: .85rem;
}
.calc-weeks-table th {
  text-align: right;
  padding: .3rem .45rem;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
}
.calc-weeks-table th:first-child { text-align: left; }
.calc-weeks-table td {
  padding: .3rem .45rem;
  text-align: right;
  border-bottom: 1px solid var(--border);
  color: var(--text);
}
.calc-weeks-table td:first-child { text-align: left; color: var(--text-muted); }
.calc-weeks-table tfoot td {
  font-weight: 700;
  border-top: 2px solid var(--border);
  border-bottom: none;
  color: var(--text);
}
.ot-val { color: var(--orange); font-weight: 600; }
.dt-val { color: var(--red);    font-weight: 600; }

/* Cost summary at bottom */
.calc-cost-summary {
  background: var(--bg-3);
  border-radius: var(--radius);
  padding: .6rem .8rem;
  font-size: .82rem;
}
.calc-cost-row {
  display: flex;
  justify-content: space-between;
  padding: .2rem 0;
  border-bottom: 1px solid var(--border);
  color: var(--text-muted);
}
.calc-cost-row:last-of-type { border-bottom: none; }
.calc-cost-row span:last-child { color: var(--text); font-variant-numeric: tabular-nums; }
.calc-cost-total {
  display: flex;
  justify-content: space-between;
  padding: .35rem 0 .1rem;
  font-weight: 700;
  font-size: .9rem;
  color: var(--text);
  border-top: 2px solid var(--border);
  margin-top: .3rem;
}

/* ── Days/Weeks Unit Toggle ─────────────────────────────────────────────── */
.col-days-cell { white-space: nowrap; }
.days-unit-toggle {
  display: inline-block;
  margin-left: 3px;
  padding: 0 4px;
  font-size: .68rem;
  line-height: 1.4;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: var(--bg-2);
  color: var(--text-muted);
  cursor: pointer;
  vertical-align: middle;
  transition: background .1s, color .1s;
}
.days-unit-toggle.active {
  background: var(--blue);
  color: #fff;
  border-color: var(--blue);
}
.days-unit-toggle:hover { background: var(--bg-3); }
.days-unit-toggle.active:hover { background: var(--blue); }

/* Estimator-inherited days (read-only, muted) */
.estimator-inherited {
  color: var(--text-muted);
  font-style: italic;
  font-size: .85rem;
}

/* ── Quick Estimator Phases in Settings Modal ───────────────────────────── */
.phases-editor { display: flex; flex-direction: column; gap: .4rem; margin-top: .3rem; }
.phase-row {
  display: flex;
  align-items: center;
  gap: .5rem;
}
.phase-row .phase-name {
  flex: 1;
  padding: .25rem .4rem;
  font-size: .85rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-2);
  color: var(--text);
}
.phase-row .phase-qty {
  padding: .25rem .4rem;
  font-size: .85rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-2);
  color: var(--text);
  text-align: center;
}
.phase-unit-toggle {
  display: flex;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.phase-unit-btn {
  padding: .2rem .5rem;
  font-size: .78rem;
  background: var(--bg-2);
  color: var(--text-muted);
  border: none;
  cursor: pointer;
  transition: background .1s, color .1s;
}
.phase-unit-btn + .phase-unit-btn { border-left: 1px solid var(--border); }
.phase-unit-btn.active { background: var(--blue); color: #fff; }
.phase-unit-btn:hover:not(.active) { background: var(--bg-3); }

/* ── Context Menu Extras ────────────────────────────────────────────────── */
.ctx-divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: .2rem 0;
}
.ctx-menu-label {
  padding: .2rem .8rem;
  font-size: .72rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  pointer-events: none;
}

/* ── Tab link (anchor styled as tab button) ─────────────────────────────── */
a.tab-link {
  text-decoration: none;
  display: inline-block;
}
a.tab-link:hover { background: var(--bg-3); }

/* ── Inline rename ──────────────────────────────────────────────────────── */
.editable-heading { cursor: pointer; }
.editable-heading:hover { opacity: .8; }
.rename-input {
  font: inherit;
  font-size: inherit;
  font-weight: inherit;
  border: none;
  border-bottom: 2px solid var(--blue);
  background: transparent;
  color: inherit;
  outline: none;
  width: 100%;
  min-width: 200px;
}

/* ── Settings tab panel ─────────────────────────────────────────────────── */
.settings-panel {
  max-width: 900px;
  padding: 1.5rem 0;
}
.settings-heading {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
  color: var(--text);
}
.settings-grid {
  display: grid;
  /* Min 380px so the 3-column Start/End/Target row inside Budget Info
     has room to show all three labels without the Target Budget field
     getting clipped behind the Display box. */
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}
.settings-section {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.2rem;
}
.settings-section h3 {
  font-size: .85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-muted);
  margin-bottom: .8rem;
}
.settings-hint {
  font-size: .78rem;
  color: var(--text-muted);
  margin-bottom: .6rem;
  line-height: 1.4;
}
.settings-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-top: .5rem;
  border-top: 1px solid var(--border);
}
.settings-saved-msg {
  font-size: .85rem;
  color: var(--green);
  font-weight: 600;
}

/* ── Budget Mode Switcher ───────────────────────────────────────────────── */
.mode-switcher {
  display: flex;
  gap: .4rem;
  flex-wrap: wrap;
}
.mode-btn {
  padding: .35rem .8rem;
  font-size: .82rem;
  font-weight: 500;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-2);
  color: var(--text-muted);
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.mode-btn:hover { background: var(--bg-3); color: var(--text); }
.mode-btn.active {
  background: var(--blue);
  color: #fff;
  border-color: var(--blue);
  font-weight: 600;
}

/* ── Quick Estimator mode banner ────────────────────────────────────────── */
.qe-mode-banner {
  background: color-mix(in srgb, var(--blue) 12%, var(--bg-2));
  border: 1px solid color-mix(in srgb, var(--blue) 30%, var(--border));
  border-radius: var(--radius);
  padding: .5rem .9rem;
  font-size: .83rem;
  color: var(--text);
  margin-bottom: .75rem;
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
}
.qe-mode-banner .btn-link {
  background: none; border: none; color: var(--blue);
  cursor: pointer; font-size: inherit; padding: 0; text-decoration: underline;
}
.actual-mode-banner {
  background: color-mix(in srgb, var(--green) 10%, var(--bg-2));
  border: 1px solid color-mix(in srgb, var(--green) 25%, var(--border));
  border-radius: var(--radius);
  padding: .5rem .9rem;
  font-size: .83rem;
  color: var(--text);
  margin-bottom: .75rem;
}

/* ── QE phase badge on rows ─────────────────────────────────────────────── */
.qe-phase-badge {
  display: inline-block;
  margin-left: .4rem;
  padding: 1px 5px;
  font-size: .68rem;
  background: color-mix(in srgb, var(--blue) 15%, var(--bg-3));
  color: var(--blue);
  border-radius: 3px;
  vertical-align: middle;
  font-weight: 500;
}

/* ── Three-phase system ──────────────────────────────────────────────────── */
.init-working-banner {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .6rem 1rem;
  background: color-mix(in srgb, var(--accent) 12%, var(--bg-2));
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border));
  border-radius: var(--radius);
  margin-bottom: .75rem;
  font-size: .85rem;
  flex-wrap: wrap;
}
.init-working-banner strong { color: var(--accent); }

.topsheet-controls {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: .5rem;
}

.var-basis-toggle {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.var-btn {
  background: var(--bg-3);
  border: none;
  color: var(--text-muted);
  padding: .22rem .6rem;
  font-size: .75rem;
  cursor: pointer;
  border-right: 1px solid var(--border);
  transition: background .15s, color .15s;
}
.var-btn:last-child { border-right: none; }
.var-btn:hover { background: var(--bg-2); color: var(--text); }
.var-btn.active {
  background: var(--accent);
  color: #fff;
}

.col-working { width: 112px; text-align: right; white-space: nowrap; }
.working-editable { cursor: pointer; }
.working-editable:hover { text-decoration: underline; text-decoration-style: dotted; }

.col-variance { width: 102px; text-align: right; white-space: nowrap; }
.frozen-est { color: var(--text-muted); font-style: italic; font-size: .9em; }
.frozen-est-header { color: var(--text-muted); font-style: italic; font-weight: 500; }
.qty-reduce-inst-row {
  display: flex; align-items: center; gap: .6rem;
  padding: .45rem .6rem; border-radius: var(--radius);
  border: 1px solid var(--border); cursor: pointer;
  transition: background .12s;
}
.qty-reduce-inst-row:has(input:checked) { background: color-mix(in srgb, var(--accent) 10%, var(--bg-2)); border-color: var(--accent); }
.qty-reduce-inst-label { flex: 1; font-size: .85rem; }

/* Variance classes for the Budget tab. JS assigns var-pos when computed
   variance > 0 (remaining = favorable = BLUE) and var-neg when < 0
   (over budget = unfavorable = RED). Color convention switched
   2026-05-10 per user — "negative pushes you over budget should be red,
   positive should be blue". The class NAMES are kept (pos/neg refer to
   the math sign) so the JS doesn't need to change. */
.var-pos  { color: var(--blue, #4f7ef8); font-style: italic; font-weight: 600; }   /* + variance = under / remaining */
.var-neg  { color: var(--red,  #e74c3c); font-style: italic; font-weight: 600; }   /* - variance = over budget */
.var-zero { color: var(--text-muted); font-style: italic; }

/* ── Budget mode system ──────────────────────────────────────────────────── */
.budget-name-row {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
}

/* Mode badge next to h1 */
.mode-badge {
  display: inline-flex;
  align-items: center;
  padding: .2rem .55rem;
  border-radius: 4px;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  line-height: 1;
  flex-shrink: 0;
}
.mode-badge.mode-estimated { background: color-mix(in srgb, var(--accent) 18%, var(--bg-3)); color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); }
.mode-badge.mode-working   { background: color-mix(in srgb, var(--orange) 18%, var(--bg-3)); color: var(--orange); border: 1px solid color-mix(in srgb, var(--orange) 35%, transparent); }
.mode-badge.mode-actual    { background: color-mix(in srgb, var(--red) 18%, var(--bg-3));    color: var(--red);    border: 1px solid color-mix(in srgb, var(--red) 35%, transparent); }
.mode-badge.mode-estimator { background: color-mix(in srgb, var(--yellow) 18%, var(--bg-3)); color: var(--yellow); border: 1px solid color-mix(in srgb, var(--yellow) 35%, transparent); }

/* Mode indicator strip below tabs */
.mode-indicator-strip {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .35rem .9rem;
  margin-bottom: .5rem;
  border-radius: 0 0 var(--radius) var(--radius);
  border-left: 3px solid;
  font-size: .8rem;
}
.mode-indicator-strip.mode-estimated { background: color-mix(in srgb, var(--accent) 8%, var(--bg-2));  border-color: var(--accent); }
.mode-indicator-strip.mode-working   { background: color-mix(in srgb, var(--orange) 8%, var(--bg-2));  border-color: var(--orange); }
.mode-indicator-strip.mode-actual    { background: color-mix(in srgb, var(--red) 8%, var(--bg-2));     border-color: var(--red); }
.mode-indicator-strip.mode-estimator { background: color-mix(in srgb, var(--yellow) 8%, var(--bg-2));  border-color: var(--yellow); }

.mode-indicator-pill {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .15rem .45rem;
  border-radius: 3px;
  flex-shrink: 0;
}
.mode-estimated .mode-indicator-pill { background: var(--accent); color: #fff; }
.mode-working   .mode-indicator-pill { background: var(--orange); color: #fff; }
.mode-actual    .mode-indicator-pill { background: var(--red);    color: #fff; }
.mode-estimator .mode-indicator-pill { background: var(--yellow); color: #000; }

.mode-indicator-desc { color: var(--text-muted); flex: 1; }
.mode-indicator-change { font-size: .78rem; white-space: nowrap; }

/* ── Gantt range buttons ─────────────────────────────────────────────────── */
.gantt-range-btns {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin-left: .25rem;
}
.gantt-range-btns .btn {
  border-radius: 0;
  border: none;
  border-right: 1px solid var(--border);
  padding: .25rem .55rem;
  font-size: .8rem;
}
.gantt-range-btns .btn:last-child { border-right: none; }

/* ── Actuals tab ─────────────────────────────────────────────────────────── */
.actuals-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: .75rem;
}
.actuals-table .unbudgeted-row td { opacity: .8; }
.badge-unbudgeted {
  display: inline-block;
  font-size: .68rem;
  padding: .08rem .35rem;
  background: color-mix(in srgb, var(--orange) 20%, var(--bg-3));
  color: var(--orange);
  border-radius: 3px;
  margin-left: .3rem;
  vertical-align: middle;
}

/* ── Tab row with mode switcher ──────────────────────────────────────────── */
.tabs-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border);
  margin-bottom: .5rem;
  flex-wrap: wrap;
  gap: .25rem;
}
.tabs-row .tabs {
  border-bottom: none;
  margin-bottom: 0;
  flex: 1;
  flex-wrap: wrap;
}

/* Mode segmented control in top bar */
.mode-switcher-bar { flex-shrink: 0; display: flex; align-items: center; padding: .2rem 0; }
.mode-seg-control, .mode-switcher-seg {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-3);
}
/* Float the Estimated/Working/Actual mode switcher so it stays visible
   while scrolling long tables (Top Sheet, Budget, Schedule). The inline
   sticky .tabs-row pattern was failing on phone + wide-table horizontal
   scroll because the switcher sat at the right edge of the tabs row and
   scrolled off-screen along with the table. position:fixed escapes the
   parent scroll context entirely. 2026-05-11. */
.mode-switcher-seg {
  position: fixed;
  top: 56px;
  right: 14px;
  z-index: 60;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .45);
}
@media (max-width: 640px) {
  /* Tighter on phones, slightly smaller font so it doesn't dominate. */
  .mode-switcher-seg { top: 50px; right: 8px; font-size: .78rem; }
  .mode-switcher-seg .mode-seg-btn { padding: .25rem .55rem; }
}
.mode-seg-btn {
  background: transparent;
  border: none;
  border-right: 1px solid var(--border);
  color: var(--text-muted);
  padding: .3rem .75rem;
  font-size: .8rem;
  cursor: pointer;
  transition: background .15s, color .15s;
  white-space: nowrap;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  line-height: 1;
  font-family: inherit;
}
.mode-seg-btn:last-child { border-right: none; }
.mode-seg-btn:hover { background: var(--bg-2); color: var(--text); }
.mode-seg-inactive { opacity: .4; cursor: default; pointer-events: none; }
.mode-seg-btn.active {
  background: var(--accent);
  color: #fff;
  font-weight: 600;
}
/* Per-mode active button colors. 2026-05-10 user spec:
     Estimated → blue   (default --accent, no rule needed)
     Working   → orange
     Actual    → red
   Selectors moved off the broken [value="…"] form (these are <a> tags,
   not <input>) onto the actual class on the element. */
.mode-seg-btn.mode-working.active  { background: var(--orange); color: #fff; }
.mode-seg-btn.mode-actual.active   { background: var(--red);    color: #fff; }

/* ── Version management UI ──────────────────────────────────────────────── */
.version-dropdown { position: relative; }
.version-dropdown .dropdown-menu.version-menu {
  min-width: 300px;
  max-width: 360px;
  max-height: 420px;
  overflow-y: auto;
  padding: .4rem 0;
}
.version-item {
  display: flex;
  align-items: center;
  padding: .1rem .6rem;
  border-bottom: 1px solid rgba(46,51,73,.2);
  gap: .4rem;
}
.version-item:last-child { border-bottom: none; }
.version-item-active { background: color-mix(in srgb, var(--accent) 8%, var(--bg-2)); }
.version-item-archived { opacity: .6; }
.version-item-archived .version-item-name { text-decoration: line-through; color: var(--text-muted); }
.version-item-actions { display: flex; gap: .15rem; flex-shrink: 0; }
.version-setactive-btn { color: var(--accent) !important; font-size: .65rem !important; }
.version-item-link {
  flex: 1;
  display: block;
  padding: .45rem 0;
  text-decoration: none;
  color: var(--text);
}
.version-item-link:hover { color: var(--accent); }
.version-item-name { font-size: .85rem; font-weight: 600; display: inline; }
.version-item-meta { display: flex; gap: .3rem; align-items: center; margin-top: .2rem; flex-wrap: wrap; }
.version-item-ts { font-size: .7rem; color: var(--text-muted); }
.version-parent-ref { font-size: .7rem; color: var(--text-muted); font-style: italic; }
.version-group-header {
  padding: .4rem .6rem .2rem;
  font-size: .78rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: .4rem;
}
.version-group-header:first-child { border-top: none; }
.version-item-subrow { padding-left: 1rem; }
.version-menu-footer { padding: .5rem .6rem; border-top: 1px solid var(--border); }

/* Status badges */
.version-status-badge {
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .03em;
  padding: .1rem .4rem;
  border-radius: 10px;
  text-transform: uppercase;
}
.vs-current    { background: color-mix(in srgb, var(--green) 20%, var(--bg-3));  color: var(--green); }
.vs-superseded { background: color-mix(in srgb, var(--yellow) 20%, var(--bg-3)); color: var(--yellow); }
.vs-archived   { background: var(--bg-3); color: var(--text-muted); }

/* Warning box in new version modal */
.version-warning-box {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  background: color-mix(in srgb, var(--yellow) 12%, var(--bg-2));
  border: 1px solid color-mix(in srgb, var(--yellow) 40%, transparent);
  border-radius: var(--radius);
  padding: .75rem 1rem;
  margin-bottom: 1rem;
  font-size: .875rem;
}
.version-warning-icon { font-size: 1.25rem; flex-shrink: 0; color: var(--yellow); }
.version-warning-box p { margin: .25rem 0 0; color: var(--text-muted); font-size: .8rem; }

/* Option buttons in version modal */
.version-option-btn {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  padding: .65rem .9rem;
  gap: .2rem;
  line-height: 1.3;
}
.version-option-desc {
  font-size: .77rem;
  color: var(--text-muted);
  font-weight: 400;
}
.version-option-sm { padding: .4rem .75rem; gap: .1rem; }
.version-option-current { border-color: var(--accent) !important; }
.version-source-group { margin-bottom: .1rem; }
.version-source-label { font-size: .7rem; font-weight: 600; text-transform: uppercase;
  color: var(--text-muted); letter-spacing: .05em; margin-bottom: .3rem; }

/* ── Locations tab ───────────────────────────────────────────────────────── */
.locations-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}
.locations-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1rem;
}
.location-card {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .75rem 1rem;
}
.location-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .4rem;
}
.location-type-badge {
  font-size: .68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: .12rem .4rem;
  border-radius: 3px;
  background: var(--bg-3);
  color: var(--text-muted);
}
.loc-stage    { background: color-mix(in srgb, var(--accent) 18%, var(--bg-3)); color: var(--accent); }
.loc-office   { background: color-mix(in srgb, var(--blue) 18%, var(--bg-3));   color: var(--blue); }
.loc-exterior { background: color-mix(in srgb, var(--green) 18%, var(--bg-3));  color: var(--green); }
.loc-holding  { background: color-mix(in srgb, var(--yellow) 18%, var(--bg-3)); color: var(--yellow); }
.loc-parking  { background: color-mix(in srgb, var(--text-muted) 25%, var(--bg-3)); color: var(--text-muted); }
.loc-vendor   { background: color-mix(in srgb, var(--orange) 18%, var(--bg-3)); color: var(--orange); }
.loc-delivery { background: color-mix(in srgb, var(--orange) 15%, var(--bg-3)); color: var(--orange); }
.loc-other    { background: var(--bg-3); color: var(--text-muted); }

.location-card-name { font-size: 1rem; font-weight: 600; margin-bottom: .3rem; }
.location-card-address { font-size: .8rem; margin-bottom: .35rem; }
.map-link { color: var(--accent); text-decoration: none; }
.map-link:hover { text-decoration: underline; }
.location-card-contacts { font-size: .78rem; margin-bottom: .3rem; }
.contact-row { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; margin-bottom: .15rem; }
.contact-label { color: var(--text-muted); font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; }
.contact-link { color: var(--accent); text-decoration: none; font-size: .75rem; }
.contact-link:hover { text-decoration: underline; }
.location-card-billing { font-size: .75rem; color: var(--green); margin-bottom: .2rem; }
.location-card-notes { font-size: .78rem; font-style: italic; margin-top: .25rem; }
.location-card-projects { display: flex; flex-wrap: wrap; gap: 4px; margin-top: .4rem; }
.proj-tag {
  display: inline-block;
  font-size: .7rem;
  padding: 2px 7px;
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text-muted);
  white-space: nowrap;
}
.location-card-actions { display: flex; gap: .25rem; align-items: center; }
.location-card-global { border-left: 3px solid var(--accent); opacity: .88; }
.location-card-global .location-card-name::after { content: ' ↗'; font-size: .7rem; color: var(--accent); }

/* Location modal tabs (New / Import from Library) */
.loc-modal-tabs { display: flex; gap: .25rem; margin-bottom: 1rem; border-bottom: 1px solid var(--border); padding-bottom: .5rem; }
.loc-modal-tab { background: none; border: 1px solid var(--border); border-radius: 4px; padding: .3rem .9rem; font-size: .85rem; cursor: pointer; color: var(--text-muted); }
.loc-modal-tab.active { background: var(--accent); color: #fff; border-color: var(--accent); }

/* Library import list */
.loc-lib-item { background: var(--bg-2); border: 1px solid var(--border); border-radius: 6px; padding: .6rem .75rem; display: flex; flex-direction: column; gap: .25rem; }
.loc-lib-item-name { font-weight: 600; font-size: .9rem; display: flex; align-items: center; gap: .5rem; }
.loc-lib-item-used { opacity: .6; }
.loc-lib-item button { align-self: flex-start; margin-top: .25rem; }

/* Representation modal items */
.rep-item { background: var(--bg-2); border: 1px solid var(--border); border-radius: 6px; padding: .5rem .75rem; display: flex; flex-direction: column; gap: .2rem; }
.rep-item-header { display: flex; align-items: center; gap: .5rem; }
.rep-role-badge { font-size: .68rem; padding: .15rem .4rem; border-radius: 4px; background: var(--accent); color: #fff; text-transform: uppercase; letter-spacing: .03em; }
.rep-fee-badge { font-size: .72rem; padding: .1rem .35rem; border-radius: 4px; background: var(--bg-3); color: var(--text-muted); border: 1px solid var(--border); }

/* Location rows in gantt */
.gantt-location-row .gantt-row-label { background: color-mix(in srgb, var(--green) 5%, var(--bg-2)); }
.location-rate-badge { font-size: .65rem; color: var(--green); margin-left: .35rem; }
.gantt-loc-cell {
  width: 44px; height: 38px; cursor: pointer;
  text-align: center; vertical-align: middle;
  background: transparent;
  transition: background .12s;
}
.gantt-loc-cell:hover { background: rgba(255,255,255,.05); }
.loc-day-use     { background: rgba(46,204,113,.35); }   /* Shoot / Use */
.loc-day-prep    { background: rgba(155,89,182,.30); }   /* Prep */
.loc-day-scout   { background: rgba(52,152,219,.30); }   /* Scout */
.loc-day-hold    { background: rgba(241,196,15,.25); }   /* Hold */
.loc-day-load_in { background: rgba(26,188,156,.30); }   /* Load-in */
.loc-day-load_out{ background: rgba(230,126,34,.30); }   /* Load-out */
.loc-day-strike  { background: rgba(231,76,60,.25); }    /* Strike */
.loc-day-pickup  { background: rgba(52,73,94,.40); }     /* Pick-up */
.loc-day-dropoff { background: rgba(127,140,141,.35); }  /* Drop-off */
.loc-day-travel  { background: rgba(41,128,185,.35); }   /* Travel */
.loc-day-label  { font-size: .52rem; line-height: 1; font-weight: 700; color: #fff;
                  letter-spacing: -.02em; display: inline-block; max-width: 42px;
                  overflow: hidden; white-space: nowrap; }

/* ── Light-theme schedule/Gantt legibility ─────────────────────────────────────
   The day-type / location-day cell fills above are low-alpha colors (~.25–.40)
   tuned to wash over the DARK page background, and the cell/chip labels are hard
   white (#fff). On the app-wide LIGHT theme (data-theme="light", set on <html>)
   those pale fills all but vanish over white and white labels disappear entirely.
   This block mirrors the app's [data-theme="light"] override pattern to keep the
   SAME hue families but at higher opacity + dark label text so day types, chips,
   flags and status markers stay legible in light mode. Dark theme is untouched.
   (User 2026-07-09: "the white view … is really hard to see the colors".)      */

/* Cell + legend labels: white → dark ink so text reads on the lighter fills. */
[data-theme="light"] .cell-label,
[data-theme="light"] .loc-day-label,
[data-theme="light"] .loc-legend-chip { color: #1a1d2e; }

/* Crew day-type cell fills — bump alpha so the hue reads solid on white. */
[data-theme="light"] .day-work          { background: rgba(46,204,113,.55); }
[data-theme="light"] .day-travel        { background: rgba(52,152,219,.50); }
[data-theme="light"] .day-travel_half   { background: rgba(52,152,219,.30);
                                           border-color: rgba(41,128,185,.75); }
[data-theme="light"] .day-travel_unpaid { background: rgba(120,145,168,.22);
                                           border-color: rgba(100,120,140,.7); }
[data-theme="light"] .day-hold          { background: rgba(230,170,10,.50); }
[data-theme="light"] .day-half          { background: rgba(230,170,10,.28); }
[data-theme="light"] .day-kill_fee      { background: rgba(231,76,60,.50); }

/* Location-row day-type cell fills — same idea, matched to the loc palette. */
[data-theme="light"] .loc-day-use      { background: rgba(46,204,113,.55); }
[data-theme="light"] .loc-day-prep     { background: rgba(155,89,182,.50); }
[data-theme="light"] .loc-day-scout    { background: rgba(52,152,219,.50); }
[data-theme="light"] .loc-day-hold     { background: rgba(230,170,10,.50); }
[data-theme="light"] .loc-day-load_in  { background: rgba(26,188,156,.55); }
[data-theme="light"] .loc-day-load_out { background: rgba(230,126,34,.55); }
[data-theme="light"] .loc-day-strike   { background: rgba(231,76,60,.50); }
[data-theme="light"] .loc-day-pickup   { background: rgba(52,73,94,.85); color: #fff; }
[data-theme="light"] .loc-day-dropoff  { background: rgba(127,140,141,.55); }
[data-theme="light"] .loc-day-travel   { background: rgba(41,128,185,.55); }
/* Pick-up is a dark slate fill even in light mode → keep its label white. */
[data-theme="light"] .loc-day-pickup .loc-day-label { color: #fff; }

/* Legend chips share the .loc-day-* fills above; the boosted opacity + dark ink
   already applies. Travel-half/unpaid crew chips carry a dashed border colour. */
[data-theme="light"] .day-chip.day-travel_unpaid { color: #4a6072; }

/* Legend/grid hover on loc cells used a white overlay (invisible on white). */
[data-theme="light"] .gantt-loc-cell:hover { background: rgba(0,0,0,.05); }

/* Flag dots: raise a couple that are near-white / low-contrast on the pale
   fills. Same hues, just darker for ≥3:1 against a light cell. Hotel yellow
   in particular is illegible on white, so darken to an amber. */
[data-theme="light"] .flag-hotel-l,
[data-theme="light"] .flag-hotel-r      { background: #d97706; }
[data-theme="light"] .flag-dot.flag-per-diem-b { background: #d97706; }
[data-theme="light"] .meal-dot          { color: #b45309; }

/* ── Schedule locations legend/key ─────────────────────────────────────── */
.loc-legend {
  display: flex; flex-wrap: wrap; gap: .5rem 1.1rem; align-items: center;
  margin: .35rem 0 .55rem; padding: .45rem .6rem;
  background: var(--bg-2); border: 1px solid var(--border); border-radius: 6px;
  font-size: .72rem;
}
.loc-legend-group { display: flex; flex-wrap: wrap; gap: .3rem .55rem; align-items: center; }
.loc-legend-title { font-weight: 700; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .04em; font-size: .64rem; margin-right: .15rem; }
.loc-legend-chip {
  display: inline-flex; align-items: center; gap: .25rem;
  padding: .08rem .38rem; border-radius: 4px; font-weight: 700;
  font-size: .62rem; color: #fff; white-space: nowrap;
}
.loc-legend-item { display: inline-flex; align-items: center; gap: .2rem;
  color: var(--text); white-space: nowrap; }

/* Crew assignment in budget lines */
.assigned-crew-name {
  font-size: .75rem;
  cursor: pointer;
  color: var(--accent);
  white-space: nowrap;
  display: inline-block;
  margin-right: .3rem;
}
.assigned-crew-name.no-assignment { color: var(--text-muted); font-style: italic; }
.assigned-crew-name:hover { text-decoration: underline; }

/* Location assignment span — mirrors .assigned-crew-name but for 3300 lines */
.assigned-location-name {
  font-size: .75rem;
  cursor: pointer;
  color: var(--accent);
  white-space: nowrap;
  display: inline-block;
  margin-right: .3rem;
}
.assigned-location-name.no-assignment { color: var(--text-muted); font-style: italic; }
.assigned-location-name:hover { text-decoration: underline; }

/* Budget crew tiles (crew assigned via schedule) */
.budget-crew-tiles {
  display: flex;
  flex-wrap: wrap;
  gap: .2rem;
  margin-bottom: .25rem;
}
.budget-crew-tile {
  display: inline-block;
  font-size: .7rem;
  padding: .1rem .4rem;
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent) 15%, var(--bg-3));
  color: var(--accent);
  white-space: nowrap;
  max-width: 10rem;
  overflow: hidden;
  text-overflow: ellipsis;
}
.budget-crew-tile.unassigned { background: transparent; color: var(--text-muted); }

/* Crew assign modal */
.crew-assign-list { max-height: 240px; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--radius); margin-top: .4rem; }
.crew-assign-item { padding: .4rem .7rem; cursor: pointer; border-bottom: 1px solid rgba(46,51,73,.3); }
.crew-assign-item:last-child { border-bottom: none; }
.crew-assign-item:hover { background: var(--bg-3); }

/* Wide modal */
.modal-wide { max-width: 680px; }

/* Field section labels */
.field-section-label {
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted);
  margin: .75rem 0 .3rem;
  border-bottom: 1px solid var(--border);
  padding-bottom: .2rem;
}

/* Gantt row crew chip */
.gantt-crew-chip {
  display: inline-block;
  margin-top: .2rem;
  padding: .1rem .35rem;
  font-size: .68rem;
  font-weight: 600;
  border-radius: 3px;
  background: var(--accent);
  color: #fff;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 130px;
  vertical-align: middle;
  transition: opacity .15s;
}
.gantt-crew-chip:hover { opacity: .8; }
.gantt-crew-chip.unassigned {
  background: transparent;
  color: var(--text-muted);
  border: 1px dashed var(--border);
  font-weight: 400;
}

/* Crew picker popover */
.crew-picker-popover {
  position: absolute;
  z-index: 1100;
  width: 240px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 4px 16px rgba(0,0,0,.35);
  overflow: hidden;
}
.crew-picker-header { padding: .4rem; border-bottom: 1px solid var(--border); }
.crew-picker-search {
  width: 100%;
  padding: .3rem .5rem;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 3px;
  color: var(--text);
  font-size: .82rem;
  box-sizing: border-box;
}
.crew-picker-list { max-height: 200px; overflow-y: auto; }
.crew-picker-item {
  padding: .35rem .6rem;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: .1rem;
  border-bottom: 1px solid rgba(46,51,73,.2);
}
.crew-picker-item:last-child { border-bottom: none; }
.crew-picker-item:hover { background: var(--bg-3); }
.crew-picker-name { font-size: .82rem; font-weight: 500; }
.crew-picker-dept { font-size: .7rem; color: var(--text-muted); }
.crew-picker-empty { padding: .5rem .6rem; font-size: .8rem; color: var(--text-muted); }
.crew-picker-footer { padding: .35rem .5rem; border-top: 1px solid var(--border); }
.btn-xs { padding: .15rem .45rem; font-size: .72rem; }

/* ── Contact Sheet Tab ───────────────────────────────────────────────────── */
.contact-sheet-toolbar {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .75rem 0 .5rem;
  border-bottom: 2px solid var(--border);
  margin-bottom: 1.25rem;
}
.contact-sheet-section {
  margin-bottom: 2rem;
}
.contact-sheet-section-header {
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-muted);
  padding: .4rem 0;
  margin-bottom: .5rem;
  border-bottom: 1px solid var(--border);
}
.contact-sheet-section-icon { margin-right: .3rem; }
.contact-sheet-empty { padding: 1.5rem 0; color: var(--text-muted); }
.contact-dept-header {
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--accent);
  padding: .6rem 0 .2rem;
  margin-top: .75rem;
}
.contact-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .98rem;          /* larger, easier to read (user 2026-06-01) */
  margin-bottom: .25rem;
}
.contact-table th {
  text-align: left;
  font-size: .8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-muted);
  padding: .4rem .55rem;
  border-bottom: 1px solid var(--border);
}
.contact-row-item td {
  padding: .58rem .55rem;
  border-bottom: 1px solid rgba(46,51,73,.15);
  vertical-align: middle;
}
/* Per-person document status + doc list folded into the contact sheet —
   bump these up too so they're readable alongside the larger rows. */
.cs-docs { font-size: .82rem !important; }
.cs-docs-badges, .loc-docs-badges, .vendor-badges { font-size: .82rem !important; }
.cs-docs-toggle, .loc-docs-toggle, .vendor-docs-toggle { font-size: .82rem !important; }
.cs-docs-list, .loc-docs-list, .vendor-docs-list { font-size: .82rem !important; }
.cs-docs-list a, .loc-docs-list a, .vendor-docs-list a { font-size: .85rem; }
.vendor-card { font-size: .9rem; }
.vendor-loanout { font-size: .85rem !important; }
.contact-row-secondary td { background: rgba(46,51,73,.06); }
.contact-row-item:last-child td { border-bottom: none; }
.contact-role { font-size: .8rem; color: var(--text-muted); }
.contact-instance {
  font-size: .68rem;
  background: var(--bg-3);
  padding: 0 .25rem;
  border-radius: 3px;
}
.contact-name { font-weight: 500; }
.contact-address { font-size: .72rem; color: var(--text-muted); margin-top: .15rem; }
.map-link-sm { color: var(--accent); text-decoration: none; font-size: .72rem; }
.map-link-sm:hover { text-decoration: underline; }
.contact-link { color: var(--accent); text-decoration: none; }
.contact-link:hover { text-decoration: underline; }
.contact-role-badge {
  display: inline-block;
  font-size: .65rem;
  font-weight: 700;
  padding: .1rem .35rem;
  border-radius: 3px;
  background: var(--bg-3);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.contact-role-dayof {
  background: rgba(59,130,246,.15);
  color: #3b82f6;
}

/* Add crew modal helpers */
.field-row { display: flex; gap: .75rem; }
.field-row .field { flex: 1; }
.form-error { color: var(--danger); font-size: .8rem; margin: .25rem 0 0; }
.modal-footer { display: flex; justify-content: flex-end; gap: .5rem; padding: .75rem 1rem; border-top: 1px solid var(--border); }

/* Crew picker header X button */
.crew-picker-header { display: flex; align-items: center; gap: .3rem; }
.crew-picker-header .crew-picker-search { flex: 1; }
.crew-picker-x {
  background: none; border: none; color: var(--text-muted);
  cursor: pointer; font-size: .85rem; padding: .2rem .3rem; line-height: 1;
  flex-shrink: 0;
}
.crew-picker-x:hover { color: var(--text); }

.crew-picker-popover.hidden { display: none; }

.crew-chip-remove {
  display: inline-block;
  margin-left: .3rem;
  font-size: .65rem;
  opacity: .6;
  vertical-align: middle;
  cursor: pointer;
  line-height: 1;
}
.crew-chip-remove:hover { opacity: 1; }

/* ── Contact Sheet unified table ─────────────────────────────────────────── */
.contact-table { table-layout: fixed; width: 100%; }

/* Crew table columns */
#cs-crew-table .cs-col-role    { width: 16%; }
#cs-crew-table .cs-col-name    { width: 16%; }
#cs-crew-table .cs-col-phone   { width: 13%; }
#cs-crew-table .cs-col-email   { width: 16%; }
#cs-crew-table .cs-col-company { width: 12%; }
#cs-crew-table .cs-col-agent   { width: 13%; }
.contact-agent { font-size: .82rem; }
.cs-agent-name { font-weight: 500; }

/* Location table columns */
#cs-loc-table .cs-col-location { width: 24%; }
#cs-loc-table .cs-col-type     { width: 9%; }
#cs-loc-table .cs-col-contact  { width: 20%; }
#cs-loc-table .cs-col-phone    { width: 15%; }
#cs-loc-table .cs-col-email    { width: 22%; }
#cs-loc-table .cs-col-role     { width: 10%; }

.contact-table td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.contact-table td.contact-name { white-space: normal; }  /* allow location name to wrap */
.contact-table td.cs-rep-cell { overflow: visible; white-space: nowrap; }

/* Dept header row inside single table */
.cs-dept-row td {
  background: var(--bg-1);
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--accent);
  padding: .5rem .5rem .2rem;
  border-bottom: none;
}

/* Row selection */
.cs-row { cursor: pointer; }
.cs-row:hover { background: rgba(99,102,241,.06); }
.cs-row.cs-selected { background: rgba(99,102,241,.14) !important; }

/* Omit field styling */
.cs-field.cs-omit .cs-val { opacity: .35; text-decoration: line-through; }
.cs-invalid-email a { color: #e53935 !important; }
.cs-invalid-email::after { content: ' ⚠'; color: #e53935; font-size: .7rem; font-weight: 700; vertical-align: middle; }
.cs-omit-badge {
  display: inline-block;
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--danger, #ef4444);
  background: rgba(239,68,68,.12);
  border: 1px solid rgba(239,68,68,.3);
  border-radius: 3px;
  padding: 0 .3rem;
  margin-left: .35rem;
  vertical-align: middle;
}

/* Right-click context menu */
.cs-ctx-menu {
  position: absolute;
  z-index: 1200;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 4px 16px rgba(0,0,0,.35);
  padding: .3rem 0;
  min-width: 180px;
}
.cs-ctx-menu.hidden { display: none; }
.cs-ctx-label {
  font-size: .7rem;
  color: var(--text-muted);
  padding: .2rem .7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.cs-ctx-divider { border-top: 1px solid var(--border); margin: .25rem 0; }
.cs-ctx-btn {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: .35rem .75rem;
  font-size: .82rem;
  color: var(--text);
  cursor: pointer;
}
.cs-ctx-btn:hover { background: var(--bg-3); }
.cs-ctx-clear { color: var(--danger, #ef4444); }


/* ── Call Sheet Module ────────────────────────────────────────────────────── */

/* Screen: date navigation controls */
.cs-date-nav {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .5rem 1.25rem;
  background: var(--bg-2);
  border-bottom: 1px solid var(--border);
}
.cs-date-nav-btn {
  white-space: nowrap;
  flex-shrink: 0;
}
.cs-date-jump-form {
  flex: 1;
  max-width: 340px;
}
.cs-date-jump-form select {
  width: 100%;
  padding: .3rem .6rem;
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-size: .82rem;
}
.cs-print-btn {
  white-space: nowrap;
}

/* Outer wrapper */
.callsheet-wrapper {
  max-width: 1080px;
  margin: 1.5rem auto 3rem;
  padding: 0 1rem;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 15px;
}

/* Each page */
.callsheet-page {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 0;
  margin-bottom: 2rem;
  overflow: hidden;
}

/* Page break separator (screen only — decorative) */
.callsheet-page-break {
  border: none;
  border-top: 2px dashed var(--border);
  margin: .5rem 0 1.5rem;
  opacity: .5;
}

/* ── Main header bar ──────────────────────────────────────────────────────── */
.callsheet-header-main {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  background: #1a1d27;
  color: #e2e6f0;
  padding: .9rem 1.25rem;
  /* Was a 3px blue accent — read as a stray blue stripe once the white logo
     strip moved directly below (user 2026-07-09). Neutral hairline now. */
  border-bottom: 1px solid #2a2f3d;
  position: relative;
}

/* ── Call-sheet logo strip ──────────────────────────────────────────────────
   A dedicated WHITE band rendered BETWEEN the dark header and the crew-call bar
   (the sheet ships white, so logos must be seen against the truth — hence the
   strip stays white in the dark editing theme too). Three slots (left / center /
   right); each placed logo is sized by HEIGHT (percent of strip height, 40-100)
   so mixed aspect ratios sit on a common baseline, with automatic gap spacing.
   Rendered identically on screen, in the read-only recipient view, and (server-
   side, with data: URIs) in the PDF. (User 2026-07-09.) */
.cs-logo-strip {
  display: none;               /* only shown when it has logos (JS/Jinja add .has-logos) */
  flex-wrap: wrap;             /* 10+ logos flow onto extra rows automatically */
  align-items: center;
  justify-content: center;     /* auto-space the flow as a centered group */
  gap: .6rem 1rem;             /* row-gap column-gap */
  background: #fff;
  color: #16181d;
  border-top: 1px solid #d5d9e0;
  border-bottom: 1px solid #d5d9e0;
  padding: .45rem 1.25rem;     /* lean vertical footprint — see pagination note below */
  min-height: 2.6rem;
}
.cs-logo-strip.has-logos { display: flex; }
/* PAGINATION NOTE: the strip adds height between the header and the day-sheet
   body. Kept deliberately lean (padding + min-height above) so a modest sheet
   still fits page 1. Extra logo ROWS grow it — if a real sheet tips the day sheet
   onto page 2, trim padding/min-height/gap before touching the day-sheet layout.
   (User 2026-07-09.) */
/* Internal edit mode keeps the strip visible even when empty, as a drop-target
   hint, whenever the Logos panel is open. */
.cs-logo-strip.cs-logos-editable.cs-strip-hint { display: flex; }
.cs-logo-item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Size by HEIGHT: h (40-100) maps to a rem height so mixed aspect ratios align on
   a common baseline and weasyprint never has to resolve a percentage height. The
   template/JS set --cs-logo-h = h; 100 → 4.5rem, 40 → 1.8rem. */
.cs-logo-item img {
  width: auto;
  height: calc(var(--cs-logo-h, 70) / 100 * 4.5rem);
  max-height: 4.5rem;
  object-fit: contain;
  display: block;
}
/* Editing affordances — only inside .cs-logos-editable (internal, not recipient). */
.cs-logos-editable.cs-logo-strip.cs-strip-dragover {
  background: rgba(79,126,248,.06);
}
.cs-logos-editable .cs-logo-item { cursor: grab; }
.cs-logos-editable .cs-logo-item:hover { outline: 1px dashed rgba(139,170,248,.8); outline-offset: 2px; }
.cs-logos-editable .cs-logo-item.cs-logo-dragging { opacity: .45; }
/* Insert-position indicator while dragging to reorder: a vertical bar on the side
   of the nearest item where the dragged logo will land. */
.cs-logos-editable .cs-logo-item.cs-logo-insert-before,
.cs-logos-editable .cs-logo-item.cs-logo-insert-after { position: relative; }
.cs-logos-editable .cs-logo-item.cs-logo-insert-before::before,
.cs-logos-editable .cs-logo-item.cs-logo-insert-after::after {
  content: '';
  position: absolute;
  top: -4px; bottom: -4px;
  width: 3px;
  border-radius: 2px;
  background: #4f7ef8;
  z-index: 3;
}
.cs-logos-editable .cs-logo-item.cs-logo-insert-before::before { left: -.55rem; }
.cs-logos-editable .cs-logo-item.cs-logo-insert-after::after   { right: -.55rem; }
.cs-logo-remove {
  position: absolute;
  top: -8px; right: -8px;
  width: 18px; height: 18px;
  border-radius: 50%;
  border: none;
  background: #c0392b;
  color: #fff;
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
  display: none;
  padding: 0;
  z-index: 2;
}
.cs-logo-resize {
  position: absolute;
  bottom: -6px; right: -6px;
  width: 12px; height: 12px;
  background: #4f7ef8;
  border: 2px solid #fff;
  border-radius: 2px;
  cursor: ns-resize;          /* height-based resize */
  display: none;
  z-index: 2;
}
.cs-logos-editable .cs-logo-item:hover .cs-logo-remove,
.cs-logos-editable .cs-logo-item:hover .cs-logo-resize { display: block; }
/* Open-Logos button now sits on the dark header band (strip may be empty). */
.cs-logos-open-btn {
  position: absolute;
  bottom: 6px; right: 8px;
  z-index: 4;
  font-size: .7rem;
  padding: 2px 7px;
  background: rgba(79,126,248,.22);
  color: #cdd8ff;
  border: 1px solid rgba(139,170,248,.4);
  border-radius: 4px;
  cursor: pointer;
}
.cs-logos-open-btn:hover { background: rgba(79,126,248,.4); }
.cs-logo-strip-empty-hint {
  flex: 1 1 auto;
  text-align: center;
  font-size: .78rem;
  color: #9aa2b4;
  pointer-events: none;
}
.cs-logo-strip.has-logos .cs-logo-strip-empty-hint { display: none; }

/* ── Logos mini-panel (floating, screen only) ─────────────────────────────── */
.cs-logos-panel {
  position: fixed;
  right: 18px; bottom: 18px;
  width: 320px;
  max-height: 70vh;
  overflow: auto;
  background: var(--card-bg, #fff);
  border: 1px solid var(--border, #d5d9e2);
  border-radius: 10px;
  box-shadow: 0 12px 34px rgba(0,0,0,.28);
  z-index: 1200;
  font-size: .84rem;
}
.cs-logos-panel-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border, #e2e5ec);
}
.cs-logos-panel-header h3 { margin: 0; font-size: .95rem; }
.cs-logos-panel-body { padding: 12px; }
.cs-logos-hint { margin: 0 0 10px; font-size: .76rem; color: var(--text-muted, #7a8194); }
.cs-logos-library { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.cs-logos-empty { font-size: .78rem; color: var(--text-muted, #7a8194); padding: 6px 0; }
.cs-logos-lib-row {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 6px;
  border: 1px solid var(--border, #e2e5ec);
  border-radius: 6px;
}
.cs-logos-lib-thumb {
  width: 44px; height: 30px;
  object-fit: contain;
  background: #f1f3f7;
  border-radius: 3px;
  flex: 0 0 auto;
}
.cs-logos-lib-name {
  flex: 1 1 auto;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: .8rem;
}
.cs-logos-upload { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.cs-logos-panel-footer {
  display: flex; align-items: center; gap: 8px;
  padding-top: 8px; border-top: 1px solid var(--border, #e2e5ec);
}
.callsheet-company-name {
  font-size: .9rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: #a0a8c8;
}
.callsheet-header-sub {
  font-size: .82rem;
  color: #7880a0;
  margin-top: .2rem;
}
.callsheet-mode-pill {
  display: inline-block;
  background: rgba(79,126,248,.25);
  color: #8baaf8;
  border-radius: 3px;
  padding: .05rem .35rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  vertical-align: middle;
  margin-left: .3rem;
}
.callsheet-header-center {
  text-align: center;
}
.callsheet-project-title {
  font-size: 1.55rem;
  font-weight: 800;
  letter-spacing: .01em;
  color: #fff;
  line-height: 1.15;
}
.callsheet-header-label {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #7880a0;
  margin-top: .15rem;
}
.callsheet-header-right-block {
  text-align: right;
}
.callsheet-date-display {
  font-size: 1rem;
  font-weight: 600;
  color: #e2e6f0;
}
.callsheet-day-num {
  font-size: .8rem;
  color: #a0a8c8;
  margin-top: .15rem;
}

/* ── General crew call bar ─────────────────────────────────────────────────── */
.callsheet-crew-call-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  background: var(--accent, #4f7ef8);
  color: #fff;
  padding: .55rem 1.25rem;
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: .06em;
}
.callsheet-call-label {
  font-size: .78rem;
  letter-spacing: .14em;
  opacity: .85;
}
.callsheet-call-time {
  font-size: 1.25rem;
  font-weight: 800;
}

/* ── Page 2 header bar ─────────────────────────────────────────────────────── */
.callsheet-header-p2-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--text-primary);
  color: var(--bg-primary, #fff);
  padding: .65rem 1.1rem;
  margin-bottom: .85rem;
  border-radius: 2px;
}
.callsheet-p2-left { flex: 0 0 auto; }
.callsheet-p2-center { flex: 1; text-align: center; }
.callsheet-p2-right { flex: 0 0 auto; text-align: right; font-size: .85rem; }
.callsheet-p2-version { font-size: .78rem; margin-top: .15rem; opacity: .8; }
.callsheet-p2-budget-sub { font-size: .75rem; opacity: .75; margin-top: .1rem; }

/* ── Audience selector bar ─────────────────────────────────────────────────── */
.cs-audience-bar {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .4rem 1rem;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color);
  font-size: .78rem;
}
.cs-audience-label { font-weight: 600; color: var(--text-muted); }
.cs-audience-pills { display: flex; gap: .35rem; }
.cs-aud-pill {
  padding: .2rem .65rem;
  border: 1px solid var(--border-color);
  border-radius: 1rem;
  background: none;
  cursor: pointer;
  font-size: .73rem;
  color: var(--text-muted);
  transition: all .15s;
}
.cs-aud-pill:hover { border-color: var(--accent); color: var(--accent); }
.cs-aud-pill.active { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }

/* Light-preview toggle: sits at the far right of the audience bar. */
.cs-light-toggle {
  margin-left: auto;
  padding: .2rem .7rem;
  border: 1px solid var(--border-color);
  border-radius: 1rem;
  background: none;
  cursor: pointer;
  font-size: .73rem;
  color: var(--text-muted);
  transition: all .15s;
  white-space: nowrap;
}
.cs-light-toggle:hover { border-color: #f0b429; color: #f0b429; }
.cs-light-toggle.active { background: #f0b429; border-color: #f0b429; color: #16181d; font-weight: 600; }

/* ── CS suppress checkboxes ────────────────────────────────────────────────── */
.cs-suppress-cell { white-space: nowrap; }
.cs-suppress-check { display: inline-flex; align-items: center; gap: .15rem; margin-right: .3rem; cursor: pointer; }
.cs-suppress-check input[type="checkbox"] { width: .85rem; height: .85rem; cursor: pointer; }
.cs-suppress-label { font-size: .65rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; }

/* ── Inline CS checkboxes ──────────────────────────────────────────────────── */
.cs-inline-check { display: inline-flex; align-items: center; gap: .3rem; cursor: pointer; font-size: .78rem; }
.cs-inline-check input[type="checkbox"] { cursor: pointer; }

/* ── Two-column layout ─────────────────────────────────────────────────────── */
.callsheet-two-col {
  display: flex;
  gap: 0;
  border-top: 1px solid var(--border);
}
.callsheet-col {
  flex: 1;
  min-width: 0;
}
.callsheet-col-left {
  border-right: 1px solid var(--border);
}

/* ── Section block ─────────────────────────────────────────────────────────── */
.callsheet-section {
  padding: .85rem 1.25rem;
  border-top: 1px solid var(--border);
}
.callsheet-section:first-child {
  border-top: none;
}
.callsheet-section-title {
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: .6rem;
}

/* ── Callsheet tables ──────────────────────────────────────────────────────── */
.callsheet-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .88rem;
}
.callsheet-table th {
  text-align: left;
  padding: .35rem .5rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  background: var(--bg-3);
}
.callsheet-table td {
  padding: .38rem .5rem;
  border-bottom: 1px solid rgba(46,51,73,.6);
  vertical-align: middle;
}
.callsheet-table tr:last-child td {
  border-bottom: none;
}
.callsheet-table tr:hover td {
  background: rgba(79,126,248,.04);
}

/* ── Department header rows ────────────────────────────────────────────────── */
.callsheet-dept-header td {
  background: #1a1d27 !important;
  color: #a0a8c8;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: .45rem .65rem;
  border-bottom: 1px solid var(--border) !important;
  border-top: 1px solid var(--border);
}

/* ── Day type badges ───────────────────────────────────────────────────────── */
.callsheet-day-type-badge {
  display: inline-block;
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .08em;
  padding: .1rem .35rem;
  border-radius: 3px;
  text-transform: uppercase;
}
.callsheet-dt-work    { background: rgba(46,204,113,.18); color: #2ecc71; }
.callsheet-dt-travel  { background: rgba(52,152,219,.18); color: #3498db; }
.callsheet-dt-hold    { background: rgba(241,196,15,.18);  color: #f1c40f; }
.callsheet-dt-half    { background: rgba(230,126,34,.18);  color: #e67e22; }
.callsheet-dt-kill_fee { background: rgba(231,76,60,.18); color: #e74c3c; }
.callsheet-dt-use     { background: rgba(46,204,113,.18); color: #2ecc71; }
.callsheet-dt-prep    { background: rgba(155,89,182,.18); color: #9b59b6; }
.callsheet-dt-scout   { background: rgba(52,152,219,.18); color: #3498db; }
.callsheet-dt-load_in { background: rgba(26,188,156,.18); color: #1abc9c; }
.callsheet-dt-load_out{ background: rgba(230,126,34,.18); color: #e67e22; }
.callsheet-dt-strike  { background: rgba(231,76,60,.18);  color: #e74c3c; }
.callsheet-dt-pickup  { background: rgba(52,73,94,.22);   color: #7f8fa4; }
.callsheet-dt-dropoff { background: rgba(127,140,141,.20); color: #95a5a6; }

/* Location-type line above the location name on the call sheet */
.callsheet-location-typeline {
  font-size: .68rem; font-weight: 700; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .04em; margin-bottom: .1rem;
}
.callsheet-location-type-icon { font-size: .8rem; }

/* ── Location cards ────────────────────────────────────────────────────────── */
.callsheet-location-card {
  padding: .4rem 0;
  border-bottom: 1px solid rgba(46,51,73,.5);
}
.callsheet-location-card:last-child {
  border-bottom: none;
}
.callsheet-location-header {
  display: flex;
  align-items: center;
  gap: .4rem;
  flex-wrap: wrap;
  margin-bottom: .2rem;
}
.callsheet-location-name {
  font-weight: 700;
  font-size: .9rem;
  color: var(--text);
}
.callsheet-location-type {
  font-size: .7rem;
  color: var(--text-muted);
  background: var(--bg-3);
  border-radius: 3px;
  padding: .05rem .3rem;
}
.callsheet-location-address {
  font-size: .85rem;
  color: var(--text-muted);
  margin-bottom: .15rem;
}
.callsheet-map-link {
  color: var(--accent);
  text-decoration: none;
}
.callsheet-map-link:hover { text-decoration: underline; }
.callsheet-location-contact {
  font-size: .75rem;
  color: var(--text-muted);
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
}
.callsheet-contact-label {
  font-weight: 700;
  color: var(--text-muted);
  min-width: 3.5rem;
}
.callsheet-location-note {
  font-size: .72rem;
  color: var(--text-muted);
  font-style: italic;
  margin-top: .2rem;
}

/* ── Key times table ───────────────────────────────────────────────────────── */
.callsheet-time-cell {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--text);
  min-width: 4rem;
}
.callsheet-times-divider td {
  height: .4rem;
  background: var(--bg-3);
  border-bottom: 1px solid var(--border) !important;
}

/* ── Info block (weather etc) ──────────────────────────────────────────────── */
.callsheet-info-block {
  display: flex;
  flex-direction: column;
  gap: .35rem;
}
.callsheet-info-row {
  display: flex;
  gap: .5rem;
  font-size: .85rem;
  align-items: baseline;
}
.callsheet-info-label {
  font-weight: 700;
  font-size: .78rem;
  color: var(--text-muted);
  min-width: 7rem;
  flex-shrink: 0;
}
.callsheet-notes-area,
.callsheet-remarks-area {
  min-height: 4rem;
  font-size: .85rem;
  padding: .4rem;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  background: rgba(0,0,0,.12);
}

/* ── Talent / ATL sections ─────────────────────────────────────────────────── */
.callsheet-section-talent .callsheet-section-title {
  color: #a855f7;
}
.callsheet-section-talent .callsheet-table th {
  color: #a855f7;
}
.callsheet-section-atl .callsheet-section-title {
  color: var(--accent);
}

/* ── Cast time grid (pickup → drop-off) ────────────────────────────────────── */
.callsheet-cast-grid { table-layout: auto; }
.callsheet-cast-grid th.cs-cast-num,
.callsheet-cast-grid td.cs-cast-num {
  width: 2rem; text-align: left; padding-right: .25rem;
}
.callsheet-cast-grid th.cs-cast-time-th { text-align: center; white-space: nowrap; }
.callsheet-cast-grid td.cs-tt-cell {
  text-align: center;
  min-width: 4.2rem;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
/* Day-type badge trailing the cast member's name. */
.cs-cast-dt { margin-left: .4rem; vertical-align: middle; }

/* ── Contact cells ─────────────────────────────────────────────────────────── */
.callsheet-contact-cell { font-size: .82rem; }
.callsheet-contact-item { line-height: 1.4; }
.callsheet-email { color: var(--text-muted); font-size: .77rem; }
.callsheet-phone-cell { font-variant-numeric: tabular-nums; font-size: .85rem; }
.callsheet-email-cell { font-size: .82rem; color: var(--text-muted); }
.callsheet-name-cell { font-weight: 500; font-size: .88rem; }
.callsheet-role-cell { font-weight: 500; font-size: .85rem; }
.callsheet-row-num { color: var(--text-muted); font-size: .78rem; text-align: right; width: 1.8rem; }
.callsheet-dept-cell { color: var(--text-muted); font-size: .82rem; }
.callsheet-hours-cell { text-align: center; color: var(--text-muted); }

/* ── Meal indicators ───────────────────────────────────────────────────────── */
.callsheet-meal-yes {
  color: #2ecc71;
  font-weight: 700;
  font-size: .78rem;
}
.callsheet-meal-no {
  color: var(--text-muted);
  font-size: .78rem;
}

/* ── Placeholder / empty state ─────────────────────────────────────────────── */
.callsheet-placeholder {
  color: var(--text-muted);
  font-size: .78rem;
  font-style: italic;
}
.callsheet-empty-state {
  text-align: center;
  padding: 1.25rem;
}
.callsheet-empty-row {
  text-align: center;
  padding: .75rem;
}
.callsheet-pad-row td {
  height: 1.5rem;
  border-bottom: 1px solid rgba(46,51,73,.3) !important;
}

/* ── Footer ────────────────────────────────────────────────────────────────── */
.callsheet-footer {
  text-align: center;
  font-size: .65rem;
  color: var(--text-muted);
  font-style: italic;
  padding: .6rem 1rem;
  border-top: 1px solid var(--border);
  background: var(--bg-3);
  letter-spacing: .03em;
}

/* ── Print media query ─────────────────────────────────────────────────────── */

/* ══════════════════════════════════════════════════════════════════════════
   DESIGNED LIGHT THEME — SINGLE SOURCE OF TRUTH.
   These rules were migrated OUT of the @media print blocks so they apply in
   BOTH the on-screen Light-preview toggle (body.light-preview) AND the pdf/
   recipient render (body.pdf-mode) — written once via :is(...). Browser PRINT
   goes through this same scope: window.onbeforeprint adds body.light-preview
   (see callsheet.html), so the @media print blocks now carry ONLY structural
   essentials (page breaks, @page, chrome hiding). Do NOT move colour/theming
   rules back into @media print — they belong here. (User 2026-07-09.)
   ════════════════════════════════════════════════════════════════════════ */
:is(body.light-preview, body.pdf-mode) [contenteditable] {
    border: none !important;
    outline: none !important;
    background: transparent !important;
    cursor: text !important;
  }
:is(body.light-preview, body.pdf-mode) .cs-editable {
    border: none !important;
    background: transparent !important;
  }
/* PDF / recipient: an empty editable must NEVER paint its placeholder text —
   'Click to add weather info' leaked into the weasyprint PDF via the
   .cs-editable:empty::before content:attr(data-placeholder) rule. Same guard
   for empty rich-schedule cells ('Type here…'). (2026-07-13.) */
body.recipient-mode .cs-editable:empty::before,
  body.pdf-mode .cs-editable:empty::before,
  body.recipient-mode .cs-rich-cell:empty::before,
  body.pdf-mode .cs-rich-cell:empty::before { content: none !important; }
:is(body.light-preview, body.pdf-mode) .cs-schedule-notes {
    border: none !important;
    resize: none !important;
    background: transparent !important;
  }
/* ══════════════════════════════════════════════════════════════════════════
     DESIGNED LIGHT THEME — the single source of truth for the printed / emailed
     call sheet. Shared by browser print (this @media print block, which
     weasyprint also honours) AND the pdf_mode render. Do NOT reintroduce a
     borderless-white flip elsewhere — edit these rules so the two never drift.
     Palette: primary #16181d · muted #5a6472 · hairline #d5d9e0 · tint #fafbfc
     · band #f0f2f5 · accent #1d4ed8 (deep blue, prints clean in grayscale).
     ════════════════════════════════════════════════════════════════════════ */
:is(body.light-preview, body.pdf-mode) {
    background: #fff !important;
    color: #16181d !important;
    font-size: 9.5pt;
  }
/* ══════════════════════════════════════════════════════════════════════════
   ALWAYS-WHITE CHROME (internal editing view only).
   The call-sheet page is unconditionally the designed light theme, INCLUDING
   the internal editing chrome (view links, date nav, edit banner, version
   dropdown, distribution + logos panels, message tabs, rich toolbars). That
   chrome was designed on dark and uses the dark theme tokens, so on white it
   would read washed-out. These rules give it intentional light styling. Scoped
   to :not(.recipient-mode):not(.pdf-mode) — those paths hide the chrome anyway
   and must not be touched. The dark app navbar (base.html, OUTSIDE
   .main-content) is untouched. (User 2026-07-09: "always make the call sheet
   white no matter what".)
   ════════════════════════════════════════════════════════════════════════ */
body.light-preview:not(.recipient-mode):not(.pdf-mode) .main-content {
    background: #fff;
  }
/* Chrome bars: light band, hairline border, dark text. */
body.light-preview:not(.recipient-mode):not(.pdf-mode) .cs-screen-header,
  body.light-preview:not(.recipient-mode):not(.pdf-mode) .tabs-row,
  body.light-preview:not(.recipient-mode):not(.pdf-mode) .cs-date-nav,
  body.light-preview:not(.recipient-mode):not(.pdf-mode) .cs-edit-banner {
    background: #f4f6f9 !important;
    border-color: #d5d9e0 !important;
    color: #1f2733 !important;
  }
body.light-preview:not(.recipient-mode):not(.pdf-mode) .page-header,
  body.light-preview:not(.recipient-mode):not(.pdf-mode) .cs-screen-header h1,
  body.light-preview:not(.recipient-mode):not(.pdf-mode) .breadcrumb,
  body.light-preview:not(.recipient-mode):not(.pdf-mode) .breadcrumb a,
  body.light-preview:not(.recipient-mode):not(.pdf-mode) .cs-edit-hint,
  body.light-preview:not(.recipient-mode):not(.pdf-mode) .cs-save-status {
    color: #1f2733 !important;
  }
/* Tabs. */
body.light-preview:not(.recipient-mode):not(.pdf-mode) .tab-btn,
  body.light-preview:not(.recipient-mode):not(.pdf-mode) .tab-link {
    color: #5a6472 !important;
  }
body.light-preview:not(.recipient-mode):not(.pdf-mode) .tab-btn:hover,
  body.light-preview:not(.recipient-mode):not(.pdf-mode) .tab-link:hover {
    color: #1d4ed8 !important;
  }
body.light-preview:not(.recipient-mode):not(.pdf-mode) .tab-btn.active {
    color: #16181d !important;
    border-bottom-color: #1d4ed8 !important;
  }
/* Buttons + selects in the chrome (outlined/ghost variants on white). */
body.light-preview:not(.recipient-mode):not(.pdf-mode) .cs-screen-header .btn-outline,
  body.light-preview:not(.recipient-mode):not(.pdf-mode) .cs-date-nav .btn,
  body.light-preview:not(.recipient-mode):not(.pdf-mode) .cs-screen-header .btn-ghost,
  body.light-preview:not(.recipient-mode):not(.pdf-mode) .mode-seg-btn,
  body.light-preview:not(.recipient-mode):not(.pdf-mode) .version-picker-btn,
  body.light-preview:not(.recipient-mode):not(.pdf-mode) .cs-date-jump-form select {
    background: #fff !important;
    border-color: #cfd5df !important;
    color: #1f2733 !important;
  }
body.light-preview:not(.recipient-mode):not(.pdf-mode) .cs-screen-header .btn-outline:hover,
  body.light-preview:not(.recipient-mode):not(.pdf-mode) .cs-date-nav .btn:hover,
  body.light-preview:not(.recipient-mode):not(.pdf-mode) .mode-seg-btn:hover,
  body.light-preview:not(.recipient-mode):not(.pdf-mode) .version-picker-btn:hover {
    border-color: #1d4ed8 !important;
    color: #1d4ed8 !important;
  }
body.light-preview:not(.recipient-mode):not(.pdf-mode) .mode-seg-btn.active {
    background: #1d4ed8 !important;
    border-color: #1d4ed8 !important;
    color: #fff !important;
  }
/* View-switcher pills (btn-ghost / btn-primary). */
body.light-preview:not(.recipient-mode):not(.pdf-mode) .cs-screen-header .btn-primary {
    background: #1d4ed8 !important;
    border-color: #1d4ed8 !important;
    color: #fff !important;
  }
/* Version dropdown menu + distribution/logos/message panels. */
body.light-preview:not(.recipient-mode):not(.pdf-mode) .dropdown-menu,
  body.light-preview:not(.recipient-mode):not(.pdf-mode) .version-menu,
  body.light-preview:not(.recipient-mode):not(.pdf-mode) .cs-distribution-panel,
  body.light-preview:not(.recipient-mode):not(.pdf-mode) .cs-logos-panel {
    background: #fff !important;
    border-color: #d5d9e0 !important;
    color: #1f2733 !important;
    box-shadow: 0 6px 24px rgba(20, 24, 40, .12) !important;
  }
body.light-preview:not(.recipient-mode):not(.pdf-mode) .cs-msg-block {
    border-color: #d5d9e0 !important;
    color: #1f2733 !important;
  }
body.light-preview:not(.recipient-mode):not(.pdf-mode) .version-item-name,
  body.light-preview:not(.recipient-mode):not(.pdf-mode) .version-item-link {
    color: #16181d !important;
  }
body.light-preview:not(.recipient-mode):not(.pdf-mode) .version-item:hover {
    background: #f0f3f8 !important;
  }
/* Message tabs / inputs inside panels. */
body.light-preview:not(.recipient-mode):not(.pdf-mode) .cs-msg-tab {
    color: #5a6472 !important;
  }
body.light-preview:not(.recipient-mode):not(.pdf-mode) .cs-msg-tab.active {
    color: #16181d !important;
    border-color: #1d4ed8 !important;
  }
body.light-preview:not(.recipient-mode):not(.pdf-mode) .cs-msg-block input,
  body.light-preview:not(.recipient-mode):not(.pdf-mode) .cs-msg-block textarea,
  body.light-preview:not(.recipient-mode):not(.pdf-mode) .cs-distribution-panel input,
  body.light-preview:not(.recipient-mode):not(.pdf-mode) .cs-distribution-panel textarea,
  body.light-preview:not(.recipient-mode):not(.pdf-mode) .cs-distribution-panel select {
    background: #fff !important;
    border-color: #cfd5df !important;
    color: #16181d !important;
  }
:is(body.light-preview, body.pdf-mode) .callsheet-wrapper {
    max-width: 100%;
    margin: 0;
    padding: 0;
  }
:is(body.light-preview, body.pdf-mode) .callsheet-page-break { display: none; }
/* 🖼 Logos button legible on the white masthead (was styled for a dark band). */
body.light-preview:not(.recipient-mode):not(.pdf-mode) .cs-logos-open-btn {
    background: #f0f2f5 !important;
    color: #1f2733 !important;
    border: 1px solid #cfd5df !important;
  }
body.light-preview:not(.recipient-mode):not(.pdf-mode) .cs-logos-open-btn:hover {
    background: #e4e8ef !important;
    border-color: #1d4ed8 !important;
    color: #1d4ed8 !important;
  }
/* ── Masthead: white boxed header (classic AD call sheet) ─────────────────────
   Redesign 2026-07-13 (user: "looks terrible / wonky"). The sheet is always the
   designed light theme now, so the header is a WHITE bordered box (heavy ink
   bottom rule separating it from the body) rather than a dark band — the industry-
   standard call-sheet masthead. Legacy dark-band base styles stay in the base
   .callsheet-* rules for any non-light path; these light overrides win. */
:is(body.light-preview, body.pdf-mode) .callsheet-header-main {
    background: #fff !important;
    color: #16181d !important;
    padding: .55rem 1rem !important;
    border-bottom: 1.5px solid #16181d !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
:is(body.light-preview, body.pdf-mode) .callsheet-header-p2-bar {
    background: #fff !important;
    color: #16181d !important;
    border: 1.5px solid #16181d !important;
    border-radius: 3px !important;
    padding: .4rem .85rem !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
:is(body.light-preview, body.pdf-mode) .callsheet-project-title {
    color: #16181d !important;
    font-weight: 800 !important;
    font-size: 1.6rem !important;
    letter-spacing: .015em !important;
    line-height: 1.1 !important;
  }
:is(body.light-preview, body.pdf-mode) .callsheet-header-label {
    color: #5a6472 !important;
    letter-spacing: .2em !important;
  }
:is(body.light-preview, body.pdf-mode) .callsheet-date-display {
    color: #16181d !important;
    font-weight: 700 !important;
    font-size: .95rem !important;
  }
:is(body.light-preview, body.pdf-mode) .callsheet-company-name {
    color: #16181d !important;
    font-size: .8rem !important;
  }
:is(body.light-preview, body.pdf-mode) .callsheet-header-sub,
  :is(body.light-preview, body.pdf-mode) .callsheet-day-num,
  :is(body.light-preview, body.pdf-mode) .callsheet-p2-budget-sub,
  :is(body.light-preview, body.pdf-mode) .callsheet-p2-version { color: #5a6472 !important; }
/* ── Logo strip: white band (logos against the truth), hairline top+bottom ─── */
:is(body.light-preview, body.pdf-mode) .callsheet-page {
    background: #fff !important;
    border: 1px solid #d5d9e0 !important;
    border-radius: 5px !important;
  }
:is(body.light-preview, body.pdf-mode) .cs-logo-strip {
    background: #fff !important;
    color: #16181d !important;
    border-top: none !important;
    border-bottom: 1px solid #d5d9e0 !important;
    padding: .35rem 1rem !important;
    min-height: 2rem !important;
    gap: .4rem .9rem !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
:is(body.light-preview, body.pdf-mode) .cs-logo-item img {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
/* ── General crew call: solid near-black anchor band, BIG time ────────────────
   This is the visual anchor of the page (classic AD call sheet). Near-black
   #16181d band, white text, small tracked label + a large tabular time. */
:is(body.light-preview, body.pdf-mode) .callsheet-crew-call-bar {
    background: #16181d !important;
    color: #fff !important;
    padding: .5rem 1rem !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
:is(body.light-preview, body.pdf-mode) .callsheet-call-label { color: #c2c8d6 !important; opacity: 1; }
:is(body.light-preview, body.pdf-mode) .callsheet-call-time {
    color: #fff !important;
    font-size: 1.45rem !important;
    font-weight: 800 !important;
    font-variant-numeric: tabular-nums;
  }
/* ── Section headers: full-width solid dark bands (classic AD call sheet) ─────
   Redesign 2026-07-13. Every section header is a near-black #16181d band with
   white tracked-out uppercase text — strong hierarchy, no pale left-bars, no
   dashed dividers. Flexed so any right-aligned meta (e.g. "Next shoot day") and
   the editing toggles sit at the end of the band. */
:is(body.light-preview, body.pdf-mode) .callsheet-section {
    padding: .5rem .7rem .55rem !important;
    border-top: 1px solid #e4e7ec !important;
  }
:is(body.light-preview, body.pdf-mode) .callsheet-section-title {
    background: #16181d !important;
    color: #fff !important;
    border: none !important;
    padding: .3rem .6rem !important;
    margin: 0 0 .5rem !important;
    font-size: .7rem !important;
    font-weight: 700 !important;
    letter-spacing: .1em !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
/* Titles already flexed inline (KP, Locations, Quote, crew p2) keep their
   space-between; align items centered so the leading 👁 + right meta line up. */
:is(body.light-preview, body.pdf-mode) .callsheet-section-title[style*="flex"] { align-items: center; }
/* All section-header variants share the dark band → force white text (base
   talent/atl/clients colours would otherwise paint ink-on-ink). */
:is(body.light-preview, body.pdf-mode) .callsheet-section-talent .callsheet-section-title,
  :is(body.light-preview, body.pdf-mode) .callsheet-section-atl .callsheet-section-title,
  :is(body.light-preview, body.pdf-mode) .callsheet-section-clients .callsheet-section-title { color: #fff !important; }
/* Meta text and inline hints inside the dark band read as a light muted. */
:is(body.light-preview, body.pdf-mode) .callsheet-section-title .muted,
  :is(body.light-preview, body.pdf-mode) .callsheet-section-title span[style*="text-muted"],
  :is(body.light-preview, body.pdf-mode) .callsheet-section-title strong { color: #c2c8d6 !important; }
/* ── Two-column zones: top-aligned, hairline divider ──────────────────────
   align-items:flex-start (2026-07-13): columns hug their own content instead
   of stretching to the taller sibling — kills the dead-white voids below
   short sections (e.g. empty Key Personnel above a tall Locations column). */
:is(body.light-preview, body.pdf-mode) .callsheet-two-col {
    border-top: 1px solid #e4e7ec !important;
    align-items: flex-start;
  }
:is(body.light-preview, body.pdf-mode) .callsheet-col-left { border-right: 1px solid #e4e7ec !important; }
/* Sections never carry their own min-height — they end at their content. */
:is(body.light-preview, body.pdf-mode) .callsheet-col .callsheet-section { min-height: 0 !important; }
/* ── Tables: dense tabular grid, tiny muted headers, tabular times ──────────
   Redesign 2026-07-13. Outer hairline box + tint header row + tight cell
   padding = a call sheet is scanned, not read. */
:is(body.light-preview, body.pdf-mode) .callsheet-table {
    border: 1px solid #d5d9e0 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
:is(body.light-preview, body.pdf-mode) .callsheet-table th {
    background: #f0f2f5 !important;
    color: #5a6472 !important;
    font-size: .62rem !important;
    letter-spacing: .06em !important;
    padding: .24rem .5rem !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    border-bottom: 1px solid #d5d9e0 !important;
  }
:is(body.light-preview, body.pdf-mode) .callsheet-table td {
    border-bottom: 1px solid #e8ebef !important;
    color: #16181d !important;
    padding: .28rem .5rem !important;
    font-size: .78rem !important;
  }
:is(body.light-preview, body.pdf-mode) .callsheet-table tr:hover td { background: transparent !important; }
:is(body.light-preview, body.pdf-mode) .callsheet-time-cell { color: #1d4ed8 !important; font-weight: 700 !important; font-variant-numeric: tabular-nums; }
:is(body.light-preview, body.pdf-mode) .callsheet-times-divider td {
    background: #f0f2f5 !important;
    border-bottom: 1px solid #d5d9e0 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
/* ── Location cards: bordered light tint, clear hierarchy ───────────────── */
:is(body.light-preview, body.pdf-mode) .callsheet-location-card {
    background: #fafbfc !important;
    border: 1px solid #d5d9e0 !important;
    border-radius: 4px !important;
    padding: .35rem .5rem !important;
    margin-bottom: .35rem !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
:is(body.light-preview, body.pdf-mode) .cs-loc-item .callsheet-location-card { border-bottom: 1px solid #d5d9e0 !important; }
:is(body.light-preview, body.pdf-mode) .callsheet-location-typeline { color: #5a6472 !important; }
:is(body.light-preview, body.pdf-mode) .callsheet-location-name { color: #16181d !important; }
:is(body.light-preview, body.pdf-mode) .callsheet-location-address { color: #5a6472 !important; }
:is(body.light-preview, body.pdf-mode) .callsheet-location-contact { color: #5a6472 !important; }
:is(body.light-preview, body.pdf-mode) .callsheet-location-note { color: #5a6472 !important; }
:is(body.light-preview, body.pdf-mode) .callsheet-contact-label { color: #16181d !important; }
:is(body.light-preview, body.pdf-mode) .callsheet-location-type { color: #5a6472 !important; background: #eef0f3 !important; }
:is(body.light-preview, body.pdf-mode) .callsheet-map-link { color: #1d4ed8 !important; }
/* ── Day-info fields (weather / notes) as bordered light cards ──────────── */
/* Weather / notes fields read as plain document text (no input box). The edit
   affordance (faint tint + border) appears only on hover/focus, internal view. */
:is(body.light-preview, body.pdf-mode) .cs-info-field,
  :is(body.light-preview, body.pdf-mode) .cs-weather-field,
  :is(body.light-preview, body.pdf-mode) .cs-notes-area {
    background: transparent !important;
    border: 1px solid transparent !important;
    border-radius: 4px !important;
    color: #16181d !important;
    padding: .1rem .2rem !important;
  }
:is(body.light-preview, body.pdf-mode) .cs-notes-area { min-height: 0 !important; }
body.light-preview:not(.recipient-mode):not(.pdf-mode) .cs-weather-field:hover,
  body.light-preview:not(.recipient-mode):not(.pdf-mode) .cs-weather-field:focus,
  body.light-preview:not(.recipient-mode):not(.pdf-mode) .cs-notes-area:hover,
  body.light-preview:not(.recipient-mode):not(.pdf-mode) .cs-notes-area:focus {
    background: #fafbfc !important;
    border-color: #d5d9e0 !important;
  }
:is(body.light-preview, body.pdf-mode) .callsheet-info-label { color: #16181d !important; }
/* ── Hospital rows ──────────────────────────────────────────────────────── */
:is(body.light-preview, body.pdf-mode) .cs-hospital-row { border-bottom: 1px solid #e8ebef !important; }
:is(body.light-preview, body.pdf-mode) .cs-hospital-name { color: #16181d !important; }
:is(body.light-preview, body.pdf-mode) .cs-hospital-addr,
  :is(body.light-preview, body.pdf-mode) .cs-hospital-phone { color: #5a6472 !important; }
/* ── Schedule / advance textareas: collapse to content (no giant empty box).
     min-height:12rem on screen becomes ~2.4in of blank paper otherwise — the
     root cause of the page-1 spillover. Height follows content; empty renders
     as a slim placeholder card. (User 2026-07-09.) ───────────────────────── */
:is(body.light-preview, body.pdf-mode) .cs-schedule-notes {
    min-height: 1.4rem !important;
    height: auto !important;
    background: #fafbfc !important;
    border: 1px solid #d5d9e0 !important;
    border-radius: 4px !important;
    color: #16181d !important;
    resize: none !important;
    padding: .3rem .45rem !important;
    margin: .2rem 0 .1rem !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
/* Advance-schedule chips */
:is(body.light-preview, body.pdf-mode) .cs-advance-line {
    background: #fafbfc !important;
    border: 1px solid #d5d9e0 !important;
    color: #5a6472 !important;
  }
/* Rich schedule grid: shrink cell min-height for PDF so an empty/short grid does
   NOT reintroduce the page-1 blank-space bug (same discipline as .cs-schedule-notes
   above — height follows content). The empty-cell placeholder is suppressed in
   PDF (no interaction). weasyprint renders the CSS grid + inline b/i/u/text-align
   fine (verified 68.1). (User 2026-07-09.) */
body.pdf-mode .cs-rich-cell { min-height: 1.2rem !important; }
body.pdf-mode .cs-rich-cell:empty::before { content: none !important; }
body.pdf-mode .cs-rich-cell:empty { display: none !important; }
/* ── Misc text tokens ───────────────────────────────────────────────────── */
:is(body.light-preview, body.pdf-mode) .callsheet-info-label { color: #16181d !important; }
:is(body.light-preview, body.pdf-mode) .callsheet-email-cell,
  :is(body.light-preview, body.pdf-mode) .callsheet-phone-cell { color: #5a6472 !important; }
:is(body.light-preview, body.pdf-mode) .callsheet-name-cell { color: #16181d !important; }
:is(body.light-preview, body.pdf-mode) .callsheet-dept-cell { color: #5a6472 !important; }
:is(body.light-preview, body.pdf-mode) .callsheet-role-cell { color: #16181d !important; }
:is(body.light-preview, body.pdf-mode) .callsheet-row-num { color: #8a92a0 !important; }
:is(body.light-preview, body.pdf-mode) .callsheet-hours-cell { color: #5a6472 !important; }
:is(body.light-preview, body.pdf-mode) .callsheet-email { color: #5a6472 !important; }
:is(body.light-preview, body.pdf-mode) .callsheet-contact-item { color: #16181d !important; }
:is(body.light-preview, body.pdf-mode) .callsheet-contact-cell { color: #16181d !important; }
:is(body.light-preview, body.pdf-mode) .callsheet-placeholder { color: #8a92a0 !important; }
:is(body.light-preview, body.pdf-mode) .callsheet-mode-pill { display: none; }
:is(body.light-preview, body.pdf-mode) .callsheet-meal-yes { color: #16181d !important; }
:is(body.light-preview, body.pdf-mode) .callsheet-meal-no { color: #8a92a0 !important; }
/* Day type badges: plain outlined labels */
:is(body.light-preview, body.pdf-mode) .callsheet-day-type-badge {
    background: none !important;
    border: 1px solid #b8bfc9 !important;
    color: #16181d !important;
    padding: .05rem .25rem;
    font-size: 7pt;
  }
:is(body.light-preview, body.pdf-mode) .callsheet-footer {
    color: #5a6472 !important;
    background: #f0f2f5 !important;
    border-top: 1px solid #d5d9e0 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
:is(body.light-preview, body.pdf-mode) a { color: #1d4ed8 !important; }
:is(body.light-preview, body.pdf-mode) .cs-quote-type-select,
  :is(body.light-preview, body.pdf-mode) #cs-quote-refresh-btn,
  :is(body.light-preview, body.pdf-mode) #crew-view-toggle,
  :is(body.light-preview, body.pdf-mode) .cs-advance-lines,
  :is(body.light-preview, body.pdf-mode) .cs-dept-notes-container .btn,
  :is(body.light-preview, body.pdf-mode) .cs-useful-contacts-grid .cs-contact-detail { }
:is(body.light-preview, body.pdf-mode) .cs-quote-section { background: #fff !important; }
:is(body.light-preview, body.pdf-mode) .cs-quote-display { background: #fafbfc !important; border: 1px solid #d5d9e0 !important;
    border-radius: 4px !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
:is(body.light-preview, body.pdf-mode) .cs-quote-text { font-style: italic; color: #5a6472 !important; min-height: 0 !important; }
:is(body.light-preview, body.pdf-mode) .cs-contact-card { border: 1px solid #d5d9e0 !important; background: #fafbfc !important;
    -webkit-print-color-adjust: exact; print-color-adjust: exact; }
:is(body.light-preview, body.pdf-mode) .cs-contact-role { color: #5a6472 !important; }
:is(body.light-preview, body.pdf-mode) .cs-contact-name { color: #16181d !important; }
:is(body.light-preview, body.pdf-mode) .cs-dept-note-label { color: #16181d !important; font-weight: 700; }
:is(body.light-preview, body.pdf-mode) .cs-dept-note-text { border: 1px solid #d5d9e0 !important; color: #16181d !important;
    background: #fafbfc !important;
    -webkit-print-color-adjust: exact; print-color-adjust: exact; }
/* Version chips → ONE tidy meta line (CS chip + Script/Sched), consistent
   gaps, right-aligned under the date in the masthead right block. */
:is(body.light-preview, body.pdf-mode) .callsheet-versions {
    color: #5a6472 !important;
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: nowrap;
    gap: .4rem !important;
    margin-top: .25rem !important;
  }
:is(body.light-preview, body.pdf-mode) .cs-version-val { color: #16181d !important; }
:is(body.light-preview, body.pdf-mode) .callsheet-version-sub {
    color: #5a6472 !important;
    display: inline-flex;
    align-items: center;
    gap: .2rem;
    margin-top: 0 !important;
  }
:is(body.light-preview, body.pdf-mode) .callsheet-version-badge {
    background: #fff !important;
    color: #16181d !important;
    border: 1px solid #d5d9e0 !important;
    font-weight: 700 !important;
    font-size: .68rem !important;
    padding: .1rem .4rem !important;
    margin-bottom: 0 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
:is(body.light-preview, body.pdf-mode) .callsheet-version-badge .cs-version-val { color: #16181d !important; }
:is(body.light-preview, body.pdf-mode) .cs-dept-box-header {
    background: #16181d !important;
    color: #fff !important;
    font-size: .62rem !important;
    font-weight: 700 !important;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: .2rem .45rem;
    border-bottom: none !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
:is(body.light-preview, body.pdf-mode) .cs-dept-box { border: 1px solid #d5d9e0 !important; }
:is(body.light-preview, body.pdf-mode) .cs-dept-header-label { color: #fff !important; }
:is(body.light-preview, body.pdf-mode) .cs-dept-box-table { font-size: 9.5pt; }
:is(body.light-preview, body.pdf-mode) .cs-dept-box-table tr { border-bottom: 1px solid #e8ebef !important; }
:is(body.light-preview, body.pdf-mode) .cs-dept-box-table td { padding: .14rem .4rem; }
/* Column proportions (2026-07-13): role gets the slack — common role titles
   ('Director - Mini Series Edit') were wrapping while name had spare width. */
:is(body.light-preview, body.pdf-mode) .cs-dept-role { font-size: 9pt; color: #5a6472 !important; width: 46% !important; }
:is(body.light-preview, body.pdf-mode) .cs-dept-name { font-size: 9.5pt; color: #16181d !important; width: 36% !important; }
:is(body.light-preview, body.pdf-mode) .cs-dept-call { font-size: 9pt; color: #1d4ed8 !important; width: 18% !important; font-variant-numeric: tabular-nums; }
:is(body.light-preview, body.pdf-mode) .cs-dept-header-label:focus { background: none; }
/* Recipient-highlight tint for the printed crew list (pale blue / green) */
:is(body.light-preview, body.pdf-mode) .cs-dept-box-table tr.cs-row-confirmed,
  :is(body.light-preview, body.pdf-mode) tr.cs-row-confirmed { background: #eef6f0 !important;
    -webkit-print-color-adjust: exact; print-color-adjust: exact; }
:is(body.light-preview, body.pdf-mode) .cs-dept-box-table tr.cs-row-viewed,
  :is(body.light-preview, body.pdf-mode) tr.cs-row-viewed { background: #eef3fb !important;
    -webkit-print-color-adjust: exact; print-color-adjust: exact; }
/* Legacy dept-header rows (flat table view) — same dark band as section headers. */
:is(body.light-preview, body.pdf-mode) .callsheet-dept-header td {
    background: #16181d !important;
    color: #fff !important;
    border-bottom: none !important;
    border-top: none !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

/* ══════════════════════════════════════════════════════════════════════════
   EDITING CHROME RECEDES (internal editing view only).
   Redesign 2026-07-13. The internal view should read as the finished document
   until you interact: rich toolbars, section-header controls, +Add rows and row
   ✕ buttons stay quiet/hidden and reveal on hover / focus-within. All screen-only
   (scoped :not(.recipient-mode):not(.pdf-mode)); recipient/pdf strip this chrome
   anyway. Nothing here changes what those modes hide. (User 2026-07-13.)
   ════════════════════════════════════════════════════════════════════════ */
/* Rich schedule toolbars (Columns 1-6 · B/I/U · align): hidden until you hover
   the schedule section or focus a cell. display:none so they add no dead space. */
body.light-preview:not(.recipient-mode):not(.pdf-mode) .cs-rich-toolbar { display: none !important; }
body.light-preview:not(.recipient-mode):not(.pdf-mode) .cs-rich-sched:hover > .cs-rich-toolbar,
  body.light-preview:not(.recipient-mode):not(.pdf-mode) .cs-rich-sched:focus-within > .cs-rich-toolbar { display: flex !important; }
/* Empty rich cells: no permanent "Type here…" box — placeholder only on hover/focus. */
body.light-preview:not(.recipient-mode):not(.pdf-mode) .cs-rich-cell { min-height: 2.2rem !important; }
body.light-preview:not(.recipient-mode):not(.pdf-mode) .cs-rich-cell:empty::before { content: '' !important; }
body.light-preview:not(.recipient-mode):not(.pdf-mode) .cs-rich-cell[contenteditable="true"]:hover:empty::before,
  body.light-preview:not(.recipient-mode):not(.pdf-mode) .cs-rich-cell[contenteditable="true"]:focus:empty::before {
    content: 'Type here…' !important;
    color: #aab2bf !important;
  }
/* Section-header editing controls (hints, quote picker, autofill, crew toggle):
   quiet until you hover the section. The 👁 hide-toggle keeps its own behaviour. */
body.light-preview:not(.recipient-mode):not(.pdf-mode) .callsheet-section-title .cs-screen-only:not(.cs-hide-toggle) {
    opacity: 0;
    transition: opacity .12s;
  }
body.light-preview:not(.recipient-mode):not(.pdf-mode) .callsheet-section:hover .callsheet-section-title .cs-screen-only:not(.cs-hide-toggle),
  body.light-preview:not(.recipient-mode):not(.pdf-mode) .callsheet-section-title:hover .cs-screen-only:not(.cs-hide-toggle),
  body.light-preview:not(.recipient-mode):not(.pdf-mode) .callsheet-section-title:focus-within .cs-screen-only:not(.cs-hide-toggle) {
    opacity: 1;
  }
/* "+ Add" affordances: small muted ghost rows, quiet until section hover — no
   heavy dashed rule. */
body.light-preview:not(.recipient-mode):not(.pdf-mode) .cs-row-toolbar {
    border-top: none !important;
    padding: .2rem 0 .1rem !important;
    margin-top: .1rem !important;
    opacity: .5;
    transition: opacity .12s;
  }
body.light-preview:not(.recipient-mode):not(.pdf-mode) .callsheet-section:hover .cs-row-toolbar { opacity: 1; }
/* Row-level ✕ / action buttons inside tables: faint until the row is hovered. */
body.light-preview:not(.recipient-mode):not(.pdf-mode) .callsheet-table td .btn-ghost {
    opacity: .3;
    transition: opacity .12s;
  }
body.light-preview:not(.recipient-mode):not(.pdf-mode) .callsheet-table tr:hover td .btn-ghost { opacity: 1; }
/* Empty Key-Personnel ghost row (JS "+ add key personnel"): slim + quiet. */
body.light-preview:not(.recipient-mode):not(.pdf-mode) .kp-empty-cell {
    color: #9aa2b1 !important;
    font-style: normal !important;
    font-size: .72rem !important;
    padding: .2rem .3rem !important;
  }

/* ── Distribution panel: full-width app card (was a narrow centered ~500px float) ── */
body.light-preview:not(.recipient-mode):not(.pdf-mode) .cs-distribution-panel {
    max-width: none !important;
    width: 100% !important;
    margin: 1.25rem 0 3rem !important;
    box-sizing: border-box;
  }

@media print {
  /* Hidden-in-this-callsheet elements are fully omitted from print/PDF. */
  .cs-hidden-el { display: none !important; }
  /* Hide all screen-only chrome */
  .cs-screen-header,
  .cs-screen-only,
  .cs-edit-banner,
  .cs-row-toolbar,
  .kp-actions,
  .kp-select-wrap,
  .kp-drag-handle,
  .cs-drag-handle,
  .cs-future-badge,
  nav, .navbar,
  .page-header,
  .tabs, .tabs-row,
  .cs-date-nav,
  .callsheet-wrapper .btn,
  .dropdown,
  .version-dropdown,
  .mode-switcher-seg,
  .cs-print-btn,
  footer {
    display: none !important;
  }
  .kp-table th:first-child,
  .kp-table th:last-child,
  .kp-table td:first-child,
  .kp-table td:last-child { display: none !important; }
  /* Each page is a bordered light shell; crew page begins a fresh sheet. */
  .callsheet-page {
    background: #fff !important;
    border: 1px solid #d5d9e0 !important;
    border-radius: 5px !important;
    margin: 0 0 .18in;
    box-shadow: none;
    overflow: visible;
    page-break-inside: auto;
  }
  .callsheet-page-1 { page-break-after: auto; }
  .callsheet-page-2 { page-break-before: always; }
  /* Keep small blocks intact where they comfortably can — no orphaned tiny
     spillovers. The crew-grid section is intentionally excluded (it's the big
     flowing container that MUST be allowed to break across the crew pages). */
  .cs-loc-item,
  .cs-dept-box,
  .callsheet-location-card,
  .cs-hospital-row { page-break-inside: avoid; }
  /* Day-sheet sections avoid mid-block splits; the page-2 crew section flows. */
  .callsheet-page-1 .callsheet-section { page-break-inside: avoid; }
  /* Day-sheet section titles must never sit alone at the foot of a page. On the
     crew page we do NOT chain avoid on the header bar + title + grid: weasyprint
     honours each avoid separately and would cascade the header and title onto
     their own single-element pages. Instead the crew header + its section title
     are pinned to the top of the crew page (which already starts fresh) so the
     grid always follows them on the same sheet. (User 2026-07-09.) */
  .callsheet-page-1 .callsheet-section-title { page-break-after: avoid; break-after: avoid; }
  @page {
    size: letter portrait;
    margin: .45in;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   RECIPIENT MODE — the tokenized recipient view + login-gated preview render
   callsheet.html with <body class="recipient-mode">. Same full sheet, but ALL
   internal editing chrome is suppressed on screen (mirroring the @media print
   discipline) and a personal layer is prepended. (User 2026-07-08.)
   ════════════════════════════════════════════════════════════════════════════ */
body.recipient-mode .navbar,
body.recipient-mode nav,
body.recipient-mode footer,
body.recipient-mode .flash-container,
body.recipient-mode .cs-screen-header,
body.recipient-mode .cs-screen-only,
body.recipient-mode .cs-edit-banner,
body.recipient-mode .cs-audience-bar,
body.recipient-mode .cs-distribution-panel,
body.recipient-mode .cs-row-toolbar,
body.recipient-mode .kp-actions,
body.recipient-mode .kp-select-wrap,
body.recipient-mode .kp-drag-handle,
body.recipient-mode .cs-drag-handle,
body.recipient-mode .cs-drag-hint,
body.recipient-mode .cs-hide-toggle,
body.recipient-mode .cs-dept-reset,
body.recipient-mode .cs-dept-del,
body.recipient-mode .cs-dept-empty-hint,
body.recipient-mode .cs-future-badge,
body.recipient-mode .page-header,
body.recipient-mode .tabs,
body.recipient-mode .tabs-row,
body.recipient-mode .cs-date-nav,
body.recipient-mode .mode-switcher-seg {
  display: none !important;
}
/* Hidden-in-this-callsheet elements: fully omitted, just like print/PDF. */
body.recipient-mode .cs-hidden-el { display: none !important; }
/* Neutralize any leftover editable styling (contenteditable is stripped in JS,
   but belt-and-suspenders for borders/backgrounds). */
body.recipient-mode [contenteditable],
body.recipient-mode .cs-editable {
  border: none !important;
  outline: none !important;
  background: transparent !important;
  cursor: default !important;
}
/* The KP table hides its screen-only first/last action columns. */
body.recipient-mode .kp-table th:first-child,
body.recipient-mode .kp-table th:last-child,
body.recipient-mode .kp-table td:first-child,
body.recipient-mode .kp-table td:last-child { display: none !important; }
/* Center the sheet and give the page room (no app main padding fight). */
body.recipient-mode .main-content { padding: 0 !important; }
body.recipient-mode .callsheet-wrapper { margin: 0 auto; }
/* Recipient's own crew row — subtle tint so they can find themselves. */
body.recipient-mode tr.cs-recip-me { background: rgba(37, 99, 235, .18) !important; }

/* ── Personal layer (banner / confirm bar / your-details card) ─────────────── */
.cs-recip-preview-banner {
  background: #4a2500; border-bottom: 1px solid #d97706; color: #fbbf24;
  padding: 8px 20px; text-align: center; font-size: .82rem; font-weight: 600;
  letter-spacing: .03em;
}
.cs-recip-bar {
  background: #1a1d27; border-bottom: 1px solid #2a2d3a;
  padding: 14px 20px; position: sticky; top: 0; z-index: 100;
}
.cs-recip-bar-inner {
  max-width: 900px; margin: 0 auto;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.cs-recip-logo { font-size: .7rem; letter-spacing: .15em; text-transform: uppercase; color: #6b7280; flex-shrink: 0; }
.cs-recip-info { flex: 1; min-width: 0; }
.cs-recip-name { font-weight: 600; font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #e8e9ec; }
.cs-recip-sub { font-size: .78rem; color: #9ca3af; margin-top: 2px; }
.cs-recip-call-pill {
  background: #0c1a3a; border: 1px solid #1d4ed8; border-radius: 8px;
  padding: 6px 14px; text-align: center; flex-shrink: 0;
}
.cs-recip-pill-lbl { font-size: .6rem; text-transform: uppercase; letter-spacing: .08em; color: #6b7280; }
.cs-recip-pill-time { font-size: 1.15rem; font-weight: 700; color: #60a5fa; line-height: 1.1; }
.cs-recip-btn-confirm {
  background: #2563eb; color: #fff; border: none; border-radius: 8px;
  padding: 9px 20px; font-size: .88rem; font-weight: 600; cursor: pointer;
  transition: background .15s; flex-shrink: 0; white-space: nowrap;
}
.cs-recip-btn-confirm:hover { background: #1d4ed8; }
.cs-recip-confirmed-pill {
  display: flex; align-items: center; gap: 6px;
  background: #052e16; border: 1px solid #16a34a; color: #4ade80;
  border-radius: 8px; padding: 8px 16px; font-size: .82rem; font-weight: 600;
  flex-shrink: 0;
}
.cs-recip-confirmed-preview { background: #12151e; border-color: #374151; color: #9ca3af; }
.cs-recip-outer { max-width: 900px; margin: 18px auto 0; padding: 0 16px; }

/* Your-details travel card (ported from callsheet_confirm.html). */
.recipient-mode .yd-card, .cs-recip-outer .yd-card {
  background: #10231a; border: 1px solid #16a34a; border-radius: 12px;
  padding: 0; margin-bottom: 18px; overflow: hidden;
}
.yd-hdr {
  font-size: .82rem; font-weight: 800; letter-spacing: .04em;
  color: #4ade80; background: #0c1a12; padding: 11px 18px;
  border-bottom: 1px solid #16532f;
}
.yd-body { padding: 6px 18px 14px; }
.yd-item { padding: 12px 0; border-bottom: 1px solid #16532f; }
.yd-item:last-child { border-bottom: none; }
.yd-line1 { font-size: .95rem; font-weight: 600; color: #e8e9ec; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.yd-kind-icon { font-size: 1.1rem; }
.yd-detail { font-size: .83rem; color: #9ca3af; margin-top: 3px; line-height: 1.5; }
.yd-notes { font-size: .82rem; color: #cbd5e1; margin-top: 5px; font-style: italic; }
.yd-conf-wrap { margin-top: 8px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.yd-conf-lbl { font-size: .64rem; text-transform: uppercase; letter-spacing: .1em; color: #6b7280; }
.yd-conf-no {
  font-family: "SF Mono", "Courier New", monospace; font-size: 1.35rem;
  font-weight: 800; letter-spacing: .06em; color: #052e16;
  background: #4ade80; border-radius: 7px; padding: 5px 14px;
  user-select: all;
}
/* Cast member's own time card (📋 Your times) — big, readable timeline. */
.yd-times { display: flex; flex-wrap: wrap; gap: 10px 22px; padding: 12px 18px 16px; }
.yd-time { display: flex; flex-direction: column; gap: 2px; min-width: 5rem; }
.yd-time-lbl {
  font-size: .62rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .1em; color: #6b7280;
}
.yd-time-val {
  font-size: 1.25rem; font-weight: 800; color: #e8e9ec;
  font-variant-numeric: tabular-nums;
}

/* ── Recipient mobile (~390px) — sheet is desktop-oriented; keep it usable. ── */
@media (max-width: 640px) {
  body.recipient-mode .cs-recip-bar { padding: 10px 12px; }
  body.recipient-mode .cs-recip-bar-inner { gap: 8px; }
  body.recipient-mode .cs-recip-outer { padding: 0 10px; }
  body.recipient-mode .callsheet-wrapper,
  body.recipient-mode .callsheet-page { padding-left: 8px; padding-right: 8px; }
  body.recipient-mode .callsheet-two-col { display: block; }
  body.recipient-mode .callsheet-two-col .callsheet-col { width: 100%; }
}

/* ── Call Sheet Editing UI ──────────────────────────────────────────────────── */

.cs-screen-only { /* shown on screen, hidden in print via @media print */ }

/* ── Hide / show elements (per-day overrides) ─────────────────────────────── */
/* Hidden element in the internal editing view: dimmed + dashed so it can still
   be found and un-hidden. Fully removed in print/PDF/public (rule below). */
.cs-hidden-el {
  opacity: .35;
  outline: 1px dashed var(--text-muted, #888);
  outline-offset: 2px;
}
/* The 👁 toggle: subtle until you hover its container. */
.cs-hide-toggle {
  cursor: pointer;
  font-size: .8rem;
  opacity: 0;
  margin-right: .3rem;
  transition: opacity .12s;
  user-select: none;
  vertical-align: baseline;
}
.cs-hideable:hover > .cs-hide-toggle,
.cs-hideable:hover .cs-hide-toggle,
.callsheet-section-title:hover .cs-hide-toggle,
tr:hover .cs-hide-toggle,
.cs-hide-toggle:hover { opacity: .75; }
/* Per-audience hide chip (👁 hide-per-view). Always visible (unlike the 👁 which
   is hover-only) so per-view hides stay discoverable from the Internal view.
   cs-screen-only ⇒ never prints; recipient/PDF renders never create it. */
.cs-hidden-badge {
  display: inline-block;
  font-size: .6rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .02em;
  padding: 1px 4px;
  margin-right: .3rem;
  border-radius: 3px;
  background: #fdecef;
  color: #a3234a;
  border: 1px solid #f4c3ce;
  vertical-align: .05em;
  cursor: default;
  user-select: none;
}
.cs-hide-toggle:hover { opacity: 1 !important; }

.cs-edit-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .4rem 1rem;
  margin: .4rem auto .25rem;
  max-width: 960px;
  font-size: .78rem;
  color: var(--text-muted);
}
.cs-edit-hint { opacity: .75; }
.cs-save-status {
  font-size: .75rem;
  font-weight: 600;
  color: var(--text-muted);
  min-width: 5rem;
  text-align: right;
  transition: color .2s;
}
.cs-save-status.saving { color: var(--accent); }
.cs-save-status.saved  { color: #4caf50; }
.cs-save-status.error  { color: #e53935; }

/* Editable field highlighting */
.cs-editable {
  border-radius: 3px;
  padding: .05rem .2rem;
  outline: none;
  cursor: text;
  transition: background .15s, box-shadow .15s;
  display: inline-block;
  min-width: 2rem;
}
/* inline-block is for INLINE editable spans — on a <td> it ejects the cell
   from the table's column grid entirely (cast-grid columns didn't line up
   under their headers; Key Times cells drifted the same way). Table cells
   stay table cells. (User 2026-07-14.) */
td.cs-editable {
  display: table-cell;
  min-width: 0;
}
.cs-editable:hover {
  background: rgba(79,126,248,.07);
  box-shadow: 0 0 0 1.5px rgba(79,126,248,.25);
}
.cs-editable:focus {
  background: rgba(79,126,248,.1);
  box-shadow: 0 0 0 2px rgba(79,126,248,.4);
}
.cs-editable:empty::before {
  content: attr(data-placeholder);
  color: var(--text-muted);
  opacity: .55;
  pointer-events: none;
}

/* Weather / notes editable areas */
.cs-info-field {
  position: relative;
}
.cs-weather-field {
  display: block;
  width: 100%;
  min-height: 1.4rem;
  font-size: .82rem;
}
.cs-notes-area,
.cs-remarks-area {
  display: block;
  min-height: 3.5rem;
  width: 100%;
  font-size: .82rem;
  line-height: 1.5;
  padding: .35rem .4rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: text;
}
.cs-notes-area:hover,
.cs-remarks-area:hover {
  border-color: rgba(79,126,248,.35);
  background: rgba(79,126,248,.04);
}
.cs-notes-area:focus,
.cs-remarks-area:focus {
  border-color: var(--accent);
  background: rgba(79,126,248,.06);
  box-shadow: 0 0 0 2px rgba(79,126,248,.2);
}

/* Schedule notes textarea (legacy — retained for any fallback markup). */
.cs-schedule-notes {
  width: 100%;
  min-height: 12rem;
  padding: .6rem .75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text);
  font-size: .82rem;
  font-family: 'SFMono-Regular', 'Consolas', monospace;
  line-height: 1.6;
  resize: vertical;
  box-sizing: border-box;
  margin: .35rem 0 .5rem;
}
.cs-schedule-notes:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(79,126,248,.2);
  outline: none;
}

/* ── Rich schedule sections (Today's Shooting + Advance) ───────────────────────
   1-6 column grid of contenteditable cells with a column control + B/I/U/align
   toolbar. Screen chrome uses the light-restyled tokens (the sheet is always the
   designed light theme); the grid itself is styled the same on screen + PDF via
   the shared light-theme block below. (User 2026-07-09.) */
.cs-rich-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem;
  margin: .35rem 0 .3rem;
  padding: .3rem .4rem;
  background: #f4f6f9;
  border: 1px solid #d5d9e0;
  border-radius: 5px;
}
.cs-rich-cols-label { font-size: .72rem; color: #5a6472; font-weight: 600; }
.cs-rich-cols, .cs-rich-fmt { display: inline-flex; align-items: center; gap: 2px; }
.cs-rich-fmt { margin-left: .35rem; }
.cs-rich-fmt-sep {
  width: 1px; height: 1.1rem; background: #d5d9e0; margin: 0 .25rem;
}
.cs-rich-col-btn,
.cs-rich-fmt-btn {
  min-width: 1.7rem;
  height: 1.7rem;
  padding: 0 .35rem;
  border: 1px solid #cfd5df;
  border-radius: 4px;
  background: #fff;
  color: #1f2733;
  font-size: .82rem;
  line-height: 1;
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.cs-rich-col-btn:hover,
.cs-rich-fmt-btn:hover { border-color: #1d4ed8; color: #1d4ed8; }
.cs-rich-col-btn.active {
  background: #1d4ed8; border-color: #1d4ed8; color: #fff; font-weight: 700;
}
.cs-rich-fmt-btn:active { background: #e6ecf7; }

/* The grid + cells: light styling shared by screen and PDF (weasyprint renders
   CSS grid fine — verified 68.1). Hairline separators via cell borders. */
.cs-rich-grid {
  display: grid;
  gap: 0;
  margin: .2rem 0 .4rem;
  border: 1px solid #d5d9e0;
  border-radius: 5px;
  overflow: hidden;
  background: #fff;
}
.cs-rich-cell {
  min-height: 3.5rem;
  padding: .45rem .55rem;
  font-size: .82rem;
  line-height: 1.5;
  color: #16181d;
  border-left: 1px solid #e4e7ec;
  outline: none;
  overflow-wrap: anywhere;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.cs-rich-cell:first-child { border-left: none; }
.cs-rich-cell[contenteditable="true"]:hover { background: rgba(29,78,216,.03); }
.cs-rich-cell[contenteditable="true"]:focus { background: rgba(29,78,216,.06); }
.cs-rich-cell:empty::before {
  content: 'Type here…';
  color: #9aa2b1;
  pointer-events: none;
}

/* Row toolbar (Add Row / Spacer buttons) */
.cs-row-toolbar {
  display: flex;
  gap: .4rem;
  padding: .35rem 0 .15rem;
  border-top: 1px dashed var(--border);
  margin-top: .35rem;
}

/* Key Personnel "+ Add from contacts" picker */
.kp-add-picker { position: relative; }
.kp-picker-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 50;
  margin-top: .2rem;
  width: 15rem;
  max-width: 80vw;
  background: var(--bg-panel, var(--bg));
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
  padding: .35rem;
}
.kp-picker-filter {
  width: 100%;
  box-sizing: border-box;
  padding: .25rem .4rem;
  font-size: .75rem;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  margin-bottom: .3rem;
}
.kp-picker-list { max-height: 14rem; overflow-y: auto; }
.kp-picker-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .05rem;
  width: 100%;
  text-align: left;
  padding: .3rem .4rem;
  background: transparent;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  color: var(--text);
}
.kp-picker-item:hover { background: rgba(127,127,127,.15); }
.kp-picker-name { font-size: .78rem; font-weight: 500; }
.kp-picker-meta { font-size: .68rem; }
.kp-picker-empty { padding: .35rem .4rem; font-size: .72rem; }
.kp-empty-cell { padding: .4rem .3rem; font-size: .74rem; font-style: italic; }

/* Future-wiring badge */
.cs-future-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: .95rem;
  height: .95rem;
  background: rgba(79,126,248,.12);
  border: 1px solid rgba(79,126,248,.3);
  border-radius: 50%;
  font-size: .6rem;
  color: var(--accent);
  vertical-align: middle;
  cursor: help;
  line-height: 1;
}

/* Drag handle */
.cs-drag-handle {
  cursor: grab;
  color: var(--text-muted);
  opacity: .45;
  padding: 0 .3rem;
  font-size: .9rem;
  user-select: none;
}
.cs-drag-handle:hover { opacity: .9; }
.cs-drag-handle:active { cursor: grabbing; }

/* Location sortable drag-and-drop */
.cs-loc-item {
  display: flex;
  align-items: flex-start;
  gap: .25rem;
  transition: opacity .15s;
}
.cs-loc-item.dragging {
  opacity: .4;
}
.cs-loc-item.drag-over {
  border-top: 2px solid var(--accent);
}
.cs-loc-item .callsheet-location-card {
  flex: 1;
}

/* Key personnel table */
#kp-table .kp-drag-handle {
  width: 1.5rem;
  text-align: center;
  vertical-align: middle;
  cursor: grab;
}
#kp-table .kp-actions {
  width: 2rem;
  text-align: center;
}
#kp-table .kp-role-cell,
#kp-table .kp-name-cell,
#kp-table .kp-phone-cell {
  display: block;
  min-height: 1.25rem;
}
#kp-table .kp-select-wrap {
  margin-bottom: .25rem;
}
#kp-table .kp-contact-select {
  width: 100%;
  font-size: .72rem;
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: .15rem .25rem;
  background: var(--bg);
  color: var(--text-muted);
}
.kp-spacer-row td { padding: .35rem !important; background: var(--bg) !important; }
.kp-spacer-cell { border-bottom: 1px dashed var(--border) !important; }
.kp-row.dragging td { opacity: .4; }

/* Hospital rows */
.cs-hospital-row {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .3rem 0;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.cs-hospital-row:last-child { border-bottom: none; }
.cs-hospital-name {
  font-weight: 600;
  min-width: 8rem;
  flex: 2;
}
.cs-hospital-addr {
  flex: 3;
  color: var(--text-muted);
  font-size: .82rem;
}
.cs-hospital-phone {
  min-width: 6rem;
  flex: 1;
  font-size: .82rem;
}

/* ── Call Sheet: Version fields in header ────────────────────────────────── */
.callsheet-versions {
  margin-top: .3rem;
  font-size: .7rem;
  color: #7880a0;
  display: flex;
  align-items: center;
  gap: .2rem;
  flex-wrap: wrap;
}
.cs-version-label { opacity: .7; }
.cs-version-val {
  color: #a0a8c8;
  font-weight: 600;
  min-width: 1.5rem;
  border-radius: 2px;
}
.cs-version-val:hover { background: rgba(255,255,255,.1); }
.cs-version-val:focus { background: rgba(255,255,255,.15); outline: none; }
.cs-version-sep { opacity: .4; margin: 0 .15rem; }

/* ── Dept toggle flat view ───────────────────────────────────────────────── */
#crew-call-tbody.cs-crew-flat .cs-crew-dept-row { display: none; }

/* ── Useful contacts grid ────────────────────────────────────────────────── */
.cs-useful-contacts-grid {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  padding: .4rem 0;
}
.cs-contact-card {
  flex: 0 0 auto;
  min-width: 8rem;
  max-width: 14rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .5rem .65rem;
}
.cs-contact-role {
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-muted);
  margin-bottom: .15rem;
}
.cs-contact-name {
  font-size: .9rem;
  font-weight: 600;
  color: var(--text);
}
.cs-contact-detail {
  font-size: .75rem;
  color: var(--text-muted);
  margin-top: .15rem;
}

/* ── Quote of the Day ────────────────────────────────────────────────────── */
.cs-quote-section { background: var(--bg-2); }
.cs-quote-display {
  padding: .5rem .25rem;
  position: relative;
}
.cs-quote-text {
  display: block;
  font-size: .95rem;
  font-style: italic;
  line-height: 1.65;
  color: var(--text);
  min-height: 2.5rem;
  white-space: pre-line;
}
.cs-quote-placeholder {
  color: var(--text-muted);
  font-size: .82rem;
  font-style: italic;
  opacity: .6;
  margin-top: .25rem;
}
.cs-quote-type-select {
  font-size: .72rem;
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: .15rem .3rem;
  background: var(--bg);
  color: var(--text);
}

/* ── Department Notes ────────────────────────────────────────────────────── */
.cs-dept-notes-container { display: flex; flex-direction: column; gap: .4rem; padding: .25rem 0; }
.cs-dept-note-row { display: flex; align-items: flex-start; gap: .5rem; }
.cs-dept-note-label {
  min-width: 8rem;
  font-size: .78rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  padding-top: .35rem;
  flex-shrink: 0;
}
.cs-dept-note-text {
  flex: 1;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text);
  font-size: .82rem;
  padding: .35rem .5rem;
  resize: vertical;
  min-height: 2.5rem;
  font-family: inherit;
}
.cs-dept-note-text:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 2px rgba(79,126,248,.2); }

/* ── Advance Schedule ────────────────────────────────────────────────────── */
.cs-advance-notes { min-height: 5rem; font-family: inherit; font-size: .82rem; }
.cs-advance-lines {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
  margin-bottom: .5rem;
}
.cs-advance-line {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: .15rem .5rem;
  font-size: .78rem;
  color: var(--text-muted);
}

/* ── Print: suppress new screen-only elements ─────────────────────────────── */
@media print {
  .cs-dept-note-row { page-break-inside: avoid; }
}

/* ── Contact Sheet: Role Numbers ─────────────────────────────────────────── */
.cs-role-num-badge {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  border-radius: 3px;
  padding: .1rem .4rem;
  font-size: .72rem;
  font-weight: 700;
  min-width: 1.5rem;
  text-align: center;
  cursor: pointer;
}
.cs-role-num-empty {
  background: transparent;
  color: var(--text-muted);
  border: 1px dashed var(--border);
  cursor: pointer;
}
.cs-role-num-empty:hover { border-color: var(--accent); color: var(--accent); }

/* Distribution badge in contact sheet */
.cs-dist-yes { color: #4caf50; font-weight: 600; }

/* Support contact (Rep) button */
.cs-rep-cell { width: 3rem; }
.cs-rep-btn { opacity: 0; transition: opacity .15s; font-size: .7rem; }
tr:hover .cs-rep-btn { opacity: 1; }

/* ── Callsheet: Version badge ─────────────────────────────────────────────── */
.callsheet-version-badge {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  background: var(--accent, #4f7ef8);
  color: #fff;
  border-radius: 4px;
  padding: .2rem .6rem;
  font-size: .85rem;
  font-weight: 800;
  letter-spacing: .03em;
  margin-bottom: .2rem;
}
.callsheet-version-badge .cs-version-val {
  color: #fff !important;
  font-weight: 800;
}
.callsheet-version-badge .cs-version-val:hover { background: rgba(255,255,255,.2); }
.callsheet-version-badge .cs-version-val:focus { background: rgba(255,255,255,.25); outline: none; }
.callsheet-version-sub { font-size: .68rem; color: #7880a0; }

/* ── Distribution panel ───────────────────────────────────────────────────── */
.cs-distribution-panel {
  max-width: 960px;
  margin: 1rem auto 2rem;
  padding: 1rem 1.25rem;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  max-height: 80vh;
}
.cs-dist-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: .75rem;
  border-bottom: 1px solid var(--border);
  padding-bottom: .6rem;
}
.cs-dist-header h3 { margin: 0; font-size: 1rem; flex: 1; }
.cs-dist-new-send { border-top: 1px solid var(--border); padding-top: 12px; margin-top: 8px; }
.cs-dist-send-record {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 12px;
  margin-bottom: 8px;
}
/* Recipient status badges in history */
.cs-recip-badge {
  display: inline-block;
  font-size: .72rem;
  padding: 2px 7px;
  border-radius: 4px;
  font-weight: 500;
  cursor: default;
}
.cs-status-pending   { background: var(--bg-3); color: var(--text-muted); border: 1px solid var(--border); }
.cs-status-sent      { background: #1e3a5f; color: #60a5fa; border: 1px solid #2563eb; }
.cs-status-viewed    { background: #2d2a00; color: #fbbf24; border: 1px solid #d97706; }
.cs-status-confirmed { background: #052e16; color: #4ade80; border: 1px solid #16a34a; }

/* ── % Edit Popup (top sheet quick edit) ──────────────────────────────────── */
.pct-edit-popup {
  position: fixed;
  background: var(--bg-primary, #fff);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: .6rem .75rem;
  box-shadow: 0 4px 16px rgba(0,0,0,.18);
  z-index: 9999;
  min-width: 220px;
}
.pct-edit-label { font-weight: 600; font-size: .85rem; }
.pct-edit-note { font-size: .72rem; color: var(--text-muted); margin-top: .3rem; }

/* ── Top Sheet Collapse Button ─────────────────────────────────────────────── */
.ts-collapse-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: .85rem;
  padding: 0 .25rem 0 0;
  color: var(--text-muted);
  vertical-align: middle;
  line-height: 1;
}
.ts-collapse-btn:hover { color: var(--accent); }

/* ── Compact Dept Grid (Call Sheet Page 2) ─────────────────────────────────── */
.cs-dept-grid {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  align-items: flex-start;
}
.cs-dept-box {
  /* 2 columns (was 3) — bigger text beats squished columns. (User 2026-07-08) */
  flex: 0 0 calc(50% - .3rem);
  min-width: 260px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  overflow: hidden;
  page-break-inside: avoid;
  break-inside: avoid;
}
.cs-dept-box.cs-dept-dragover {
  outline: 2px dashed var(--accent, #4f8cff);
  outline-offset: -2px;
}
.cs-dept-box-header {
  background: var(--text-primary, #1a1a2e);
  color: #fff;
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .05em;
  padding: .4rem .6rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .4rem;
}
.cs-dept-header-label { outline: none; flex: 1 1 auto; min-width: 1ch; }
.cs-dept-header-label:focus { background: rgba(255,255,255,.15); border-radius: 3px; }
.cs-dept-del {
  cursor: pointer; color: #fca5a5; font-weight: 700; font-size: .8rem;
  padding: 0 .2rem; display: none; opacity: .55; transition: opacity .12s;
}
.cs-dept-del:hover { color: #fff; opacity: 1; }
/* Both header affordances read faint until you hover the department box, so the
   header text stays clean but the controls are discoverable. JS toggles their
   base display (custom depts always get the ✕; a renamed standard dept gets the
   ↩); the box-hover rule below just bumps opacity. (User 2026-07-09.) */
.cs-dept-box:hover .cs-dept-del,
.cs-dept-box:hover .cs-dept-rename-reset { opacity: 1; }
.cs-dept-rename-reset {
  cursor: pointer; color: #fff; font-weight: 700; font-size: .8rem;
  padding: 0 .15rem; opacity: .55; transition: opacity .12s;
}
.cs-dept-rename-reset:hover { color: var(--accent, #4f8cff); opacity: 1; }
.cs-dept-box-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .86rem;
}
.cs-dept-box-table tr { border-bottom: 1px solid var(--border-color); }
.cs-dept-box-table tr:last-child { border-bottom: none; }
.cs-dept-box-table td { padding: .34rem .5rem; line-height: 1.45; }
.cs-dept-role { color: var(--text-muted); font-size: .82rem; width: 40%; }
.cs-dept-name { font-weight: 500; font-size: .86rem; width: 38%; }
.cs-crew-member-row[draggable="true"] { cursor: grab; }
.cs-crew-member-row.cs-row-dragging { opacity: .45; }
.cs-drag-handle { cursor: grab; color: var(--text-muted); margin-right: .25rem; font-size: .78rem; }
.cs-dept-reset { cursor: pointer; color: var(--text-muted); margin-right: .2rem; display: none; }
.cs-dept-reset:hover { color: var(--accent, #4f8cff); }
/* Confirmation status badges on crew rows */
.cs-conf-badge {
  display: inline-block; font-size: .64rem; font-weight: 600;
  letter-spacing: .03em; border-radius: 3px; padding: 1px 4px;
  vertical-align: middle; margin-left: 4px; white-space: nowrap;
}
.cs-conf-confirmed { background: #052e16; color: #4ade80; border: 1px solid #16a34a; }
.cs-conf-viewed    { background: #1c1500; color: #fbbf24; border: 1px solid #d97706; }
.cs-conf-sent      { background: #0c1a3a; color: #60a5fa; border: 1px solid #1d4ed8; }
/* Row backgrounds on the crew table */
tr.cs-row-confirmed { background: #071a0f; }
tr.cs-row-viewed    { background: #1a1200; }
.cs-dept-call {
  font-size: .82rem;
  font-weight: 600;
  color: var(--text-primary);
  width: 22%;
  text-align: right;
  white-space: nowrap;
}
@media (max-width: 700px) {
  .cs-dept-box { flex: 0 0 100%; }
}
@media print {
  /* column-count (not flex) so weasyprint can flow dept boxes down the page and
     across page breaks — a flex grid is treated as one unbreakable block and
     would strand the crew header on a near-empty page. (User 2026-07-09.) */
  .cs-dept-grid { display: block; column-count: 2; column-gap: .35rem; }
  .cs-dept-box {
    display: inline-block;
    width: 100%;
    font-size: 9.5pt;
    border: 1px solid #d5d9e0 !important;
    border-radius: 4px !important;
    overflow: hidden;
    margin: 0 0 .35rem;
    page-break-inside: avoid;
    break-inside: avoid;
  }
}

/* ── Working Budget Search ─────────────────────────────────────────────────── */
.wb-search-wrap { display: flex; align-items: center; }
.wb-search-input {
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-size: .82rem;
  padding: .25rem .6rem;
  width: 200px;
  outline: none;
}
.wb-search-input:focus { border-color: var(--accent); }
.wb-search-input::placeholder { color: var(--text-muted); }

/* ── Budget Mode Safety Banner ─────────────────────────────────────────────── */
.mode-safety-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: rgba(241,196,15,.12);
  border: 1px solid rgba(241,196,15,.3);
  border-radius: var(--radius);
  padding: .5rem 1rem;
  margin-bottom: .75rem;
  font-size: .85rem;
  color: var(--yellow);
}

/* ── Rate cell $ prefix ──────────────────────────────────────────────────── */
.col-rate-cell { position: relative; }
.currency-prefix {
  color: var(--text-muted);
  font-size: .8em;
  margin-right: 1px;
  user-select: none;
}
/* Derived rate (back-calculated from total) shown slightly dimmed */
.editable[data-derived="1"] { color: var(--text-muted); font-style: italic; }
.editable[data-derived="1"]:hover { color: var(--text); font-style: normal; }

/* ── Budget line table: fixed layout for column alignment across sections ─── */
.line-table { table-layout: fixed; width: 100%; }

/* Scrollable wrapper so tables don't overflow on tablet/phone */
.section-block { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Keep a minimum width so the table scrolls rather than squishing */
@media (max-width: 1100px) {
  .line-table { min-width: 860px; }
  /* Always show the ⋮ menu button on touch devices — it's the primary context menu trigger */
  .line-row-menu-btn { display: inline-flex !important; opacity: 1 !important; }
}
/* iPad portrait: hide Payroll Co + tighten qty/days/rate so desc column has breathing room */
@media (max-width: 900px) {
  .section-block { max-width: 100vw; }
  .line-table { min-width: 640px; }
  .col-pc { width: 0 !important; max-width: 0 !important; padding: 0 !important;
            overflow: hidden; border: none !important; }
  .col-rt, .col-fr { width: 0 !important; max-width: 0 !important;
                     padding: 0 !important; overflow: hidden; border: none !important; }
  .col-ot { width: 0 !important; max-width: 0 !important;
            padding: 0 !important; overflow: hidden; border: none !important; }
  .col-qty  { width: 48px; }
  .col-days { width: 54px; }
  .col-desc { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .col-desc .editable { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
@media (max-width: 600px) {
  .line-table { min-width: 520px; }
  .col-working, .col-variance { width: 0 !important; max-width: 0 !important;
    padding: 0 !important; overflow: hidden; border: none !important; }
}

/* Hidden columns: keep in layout (width:0) so fixed-table column positions stay consistent.
   col-pc was previously always-hidden; per user 2026-04-28 we now show Payroll Co.
   on labor sections in place of Qty. col-labor-only handles per-section visibility,
   and the new .has-labor .col-qty rule below hides Qty for labor sections. */
.no-labor .col-labor-only,
.line-table.has-labor .col-qty,
.col-empty,
.line-table:not(.has-working) .col-working,
.line-table:not(.has-working) .col-variance {
  width: 0 !important;
  max-width: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  overflow: hidden;
  white-space: nowrap;
  border-left: none !important;
  border-right: none !important;
}

/* ── Dropdown copy context menu ──────────────────────────────────────────── */
/* Google Places Autocomplete dropdown above modals */
.pac-container { z-index: 9999 !important; }

/* ── Variance basis column-header highlight ──────────────────────────────
   When the user picks a variance basis (W vs E, A vs W, A vs E), the two
   columns being compared get visual outlines on the table header: blue
   for the FIRST budget in the comparison (the one we're checking),
   red for the SECOND (the baseline). The third column is unmarked.
   Updated by applyBasisHighlight() in budget.html. */
.var-col-header {
  position: relative;
  transition: box-shadow .15s, color .15s;
}
.var-col-header.var-col-first {
  box-shadow: inset 0 0 0 2px rgba(91, 138, 249, .55);
  color: #5b8af9;
  border-radius: 4px;
}
.var-col-header.var-col-second {
  box-shadow: inset 0 0 0 2px rgba(239, 68, 68, .55);
  color: #ef4444;
  border-radius: 4px;
}

/* ── Schedule-driven line override state ─────────────────────────────────
   sync_omit was originally a hard "exclude from budget" flag (line-through,
   pointer-events:none). Repurposed 2026-05-07 to mean "manually
   overridden" — the line stays in the budget but stops being clobbered
   by sync_schedule_driven_lines on each page load. Visual treatment:
   duration + quantity render blue italic (matching the labor-line
   accent color) so the user instantly knows this line is decoupled
   from the schedule and won't change when they edit Gantt cells. */
tr.sync-omitted td .editable[data-field="days"],
tr.sync-omitted td .editable[data-field="quantity"] {
  color: var(--blue);
  font-style: italic;
}
tr.sync-omitted .col-days::after {
  content: "✎";
  margin-left: .35rem;
  font-size: .68rem;
  color: var(--blue);
  opacity: .7;
}
/* Tooltip hint via title is set inline in the template. */

/* ── Location search field ──────────────────────────────────────────────── */
.loc-search-field {
  margin-bottom: 1rem;
  background: color-mix(in srgb, var(--accent) 8%, var(--bg-1));
  border: 1.5px solid color-mix(in srgb, var(--accent) 40%, transparent);
  border-radius: 8px;
  padding: .75rem 1rem .65rem;
}
.loc-search-field input {
  width: 100%;
  box-sizing: border-box;
  margin-top: .35rem;
}
.loc-search-label {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .03em;
  color: var(--accent);
  text-transform: uppercase;
}
.loc-search-hint {
  font-size: .72rem;
  color: var(--muted);
  margin-top: .3rem;
}

.ctx-menu {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 4px 16px rgba(0,0,0,.35);
  min-width: 220px;
  padding: .25rem 0;
  font-size: .85rem;
}
.ctx-menu-title {
  padding: .4rem .75rem .25rem;
  color: var(--text-muted);
  font-size: .78rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: .15rem;
}
.ctx-item {
  padding: .4rem .75rem;
  cursor: pointer;
  transition: background .1s;
}
.ctx-item:hover { background: var(--bg-3); color: var(--accent); }

/* ── Floating budget total bar ───────────────────────────────────────────── */
.budget-float-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 200;
  background: var(--bg-2);
  border-top: 2px solid var(--border);
  box-shadow: 0 -4px 20px rgba(0,0,0,.35);
  padding: .6rem 2rem;
}
.float-bar-inner {
  display: flex;
  align-items: center;
  gap: 2rem;
  justify-content: flex-end;
  max-width: 1600px;
  margin: 0 auto;
}
.float-bar-item {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .1rem;
}
.float-bar-label {
  font-size: .7rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.float-bar-value {
  font-size: .95rem;
  font-weight: 600;
  color: var(--text);
}
.float-bar-fee .float-bar-value { color: var(--text-muted); font-weight: 400; }
.float-bar-grand {
  border-left: 1px solid var(--border);
  padding-left: 2rem;
}
.float-bar-grand .float-bar-label { color: var(--accent); }
.float-bar-grand .float-bar-value { font-size: 1.15rem; color: var(--accent); }

/* ── Per-view color cue ──────────────────────────────────────────────────────
   2026-05-10 user spec: "make it very apparent which budget I'm in".
   <body> gets one of view-estimated / view-working / view-actual, set by
   JS at page load based on the active budget's mode. These rules apply
   subtle accent strips and section borders so the view is identifiable
   at a glance without changing the entire page palette.

   Color map: estimated = blue, working = orange, actual = red.
*/
.view-working   .section-block { border-top: 3px solid var(--orange); }
.view-actual    .section-block { border-top: 3px solid var(--red);    }
.view-estimated .section-block { border-top: 3px solid var(--accent); }

/* Thin strip across the top of the budget area as a constant reminder. */
.view-working   #working-budget-wrap::before,
.view-actual    #working-budget-wrap::before,
.view-estimated #working-budget-wrap::before {
  content: '';
  display: block;
  height: 4px;
  margin: -8px 0 12px;
  border-radius: 2px;
}
.view-working   #working-budget-wrap::before { background: var(--orange); }
.view-actual    #working-budget-wrap::before { background: var(--red); }
.view-estimated #working-budget-wrap::before { background: var(--accent); }

/* ── Sticky tabs + variance toolbar ──────────────────────────────────────────
   2026-05-10 user request: keep the budget mode switcher and the variance
   basis buttons visible while scrolling through long budget sections.

   tabs-row sticks at top:0; the working-toolbar (Quick Entry / variance
   buttons / search) sticks just below it. topsheet-controls (Top Sheet
   variance toggle) does the same. Z-indexes layer cleanly: tabs-row 50,
   toolbars 40, content default. Backgrounds are explicit so the sticky
   bars don't show table content underneath. */
.tabs-row {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bg);
  padding-top: .25rem;
  /* small gradient fade so content below blends out as it scrolls under */
}
.working-toolbar {
  position: sticky;
  top: 44px;
  z-index: 40;
  background: var(--bg);
  padding: .35rem 0;
}
.topsheet-controls {
  position: sticky;
  top: 44px;
  z-index: 40;
  background: var(--bg);
  padding: .35rem 0;
}

/* ── View-specific subtotal/grand-total emphasis ─────────────────────────────
   2026-05-10 user request: reinforce the active budget view by styling
   the subtotal/grand-total headings in the matching color. The active
   column's value, the "Total [Section]" label, and the section header
   badge all pick up the view accent so the user always knows which
   budget they're looking at by scanning the totals.

   Inline-style colors on the grand-total cells get overridden via
   higher-specificity selectors. Estimated view stays the default blue;
   Working shifts to orange, Actual to red. */

/* ── Active grand-total column: color value text per view ─────────────── */
.view-estimated .sec-grand-est strong,
.view-estimated .sec-grand-est { color: var(--accent) !important; }
.view-working   .sec-grand-working strong,
.view-working   .sec-grand-working { color: var(--orange) !important; }
.view-actual    .sec-grand-actual strong,
.view-actual    .sec-grand-actual span { color: var(--red) !important; }

/* Bump the active column slightly so it visually leads when scanning. */
.view-estimated .sec-grand-est strong,
.view-working   .sec-grand-working strong,
.view-actual    .sec-grand-actual strong {
  font-size: 1.02rem;
  letter-spacing: .01em;
}

/* ── "Total [Section Name]" label: accent the active view ─────────────── */
.view-estimated .section-grand-total-row .col-desc {
  color: var(--accent) !important;
  font-weight: 800 !important;
}
.view-working   .section-grand-total-row .col-desc {
  color: var(--orange) !important;
  font-weight: 800 !important;
}
.view-actual    .section-grand-total-row .col-desc {
  color: var(--red) !important;
  font-weight: 800 !important;
}

/* ── Section header badge (the dollar pill next to "2000 Production Staff")
       picks up the view color too. .section-total-badge is the inline
       badge in each section heading. */
.view-estimated .section-total-badge {
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
}
.view-working   .section-total-badge {
  background: color-mix(in srgb, var(--orange) 15%, transparent);
  color: var(--orange);
  border: 1px solid color-mix(in srgb, var(--orange) 35%, transparent);
}
.view-actual    .section-total-badge {
  background: color-mix(in srgb, var(--red) 15%, transparent);
  color: var(--red);
  border: 1px solid color-mix(in srgb, var(--red) 35%, transparent);
}

/* Call-sheet per-person call time (User 2026-06-22): when there's no individual
   override, show the general crew call as a bracketed, muted placeholder so every
   person's effective call time is visible; an actual individual override shows in
   bold so it stands out. */
.cs-crew-call-cell:empty::before {
  content: attr(data-general);
  color: var(--text-muted);
  font-style: italic;
  opacity: .65;
}
.cs-crew-call-cell:not(:empty) { font-weight: 600; }