:root {
  --bg:#0a0a0a; --card:#171717; --fg:#f5f5f5; --muted:#a3a3a3;
  --accent:#dc2626; --accent-ink:#ffffff;
  --ok:#22c55e; --err:#f87171; --warn:#fbbf24;
  --border:#262626; --grid:#3f3f46;
  --row-st: rgba(220,38,38,0.04);
  --row-ot: rgba(251,191,36,0.05);
  --row-dt: rgba(248,113,113,0.06);
  --off-job: #050505;
  --sticky-bg: #1f1f1f;
}
* { box-sizing: border-box; }
body { margin:0; font-family: -apple-system, "Segoe UI", system-ui, sans-serif; background:var(--bg); color:var(--fg); font-size: 14px; }
.bar {
  display: flex; align-items: stretch;
  padding: 0 24px;
  border-bottom: 1px solid var(--border); background: var(--card);
  position: sticky; top: 0; z-index: 10;
}
.bar a { color: var(--accent); text-decoration: none; }
.bar > .brand { align-self: center; padding: 8px 0; margin-right: 28px; }
.bar-right { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.bar-foreman { display: flex; flex-direction: column; line-height: 1.1; align-items: flex-end; }

/* Salesforce-Lightning-style tabs sitting to the right of the logo,
   with the active underline flush against the bar's bottom border. */
.bar-tabs {
  display: flex; align-items: stretch; gap: 2px;
}
.bar-tab {
  display: inline-flex; align-items: center;
  padding: 0 20px; font-size: 14px; font-weight: 500;
  color: var(--muted); border-bottom: 3px solid transparent;
  margin-bottom: -1px;  /* sit on the bar's bottom border */
  transition: color .15s, border-color .15s, background .15s;
}
.bar-tab:hover { color: var(--fg); background: rgba(255,255,255,0.03); }
.bar-tab.active {
  color: var(--fg); font-weight: 600;
  border-bottom-color: var(--accent);
  background: rgba(220,38,38,0.06);
}
.bar-link { font-size: 13px; }
.warn-link { color: var(--warn) !important; }
.warn-link:hover { color: var(--err) !important; }

/* ─── Brand wordmark ─── */
.brand {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  text-decoration: none; line-height: 1;
}
.brand-mark {
  height: 32px; width: auto; display: block;
}
.brand-tagline {
  font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted); font-weight: 600;
}
.login-card .brand { align-items: center; margin-bottom: 18px; }
/* Per-page sizing for the brand-mark lives lower in the file (last-rule wins). */
.login-card .brand-tagline { font-size: 12px; color: var(--fg); margin-top: 6px; }

/* Time | Expenses nav toggle in the bar */
.nav-toggle {
  display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden;
  background: var(--sticky-bg);
}
.nav-link {
  padding: 6px 14px; font-size: 13px; font-weight: 600;
  color: var(--muted); text-decoration: none;
}
.nav-link:hover { color: var(--fg); }
.nav-link.active { background: var(--accent); color: var(--accent-ink); }

/* Expense grid styling */
.time-grid.expense-grid input,
.time-grid.expense-grid select {
  width: 100%; min-width: 70px; padding: 6px 8px; font-size: 13px;
  background: transparent; border: 1px solid transparent; color: var(--fg);
}
.time-grid.expense-grid input:focus,
.time-grid.expense-grid select:focus { background: var(--bg); border-color: var(--accent); }
.time-grid.expense-grid input[disabled] { color: var(--muted); }
.time-grid.expense-grid input[type="checkbox"] { width: auto; min-width: 0; }
.time-grid.expense-grid td { padding: 4px; vertical-align: middle; }
.time-grid.expense-grid tr.saving td { box-shadow: inset 0 -2px 0 var(--accent); }
.time-grid.expense-grid tr.saved-flash td { box-shadow: inset 0 -2px 0 var(--ok); transition: box-shadow 0.6s; }
.time-grid.expense-grid tr.error td { background: rgba(248,113,113,0.06); box-shadow: inset 0 -2px 0 var(--err); }
.time-grid.expense-grid .job-gl-col { min-width: 220px; }
.time-grid.expense-grid select[data-field="job_gl"] { min-width: 220px; }

/* Receipt thumbnails */
.receipt-cell { min-width: 110px; padding: 4px; }
.receipt-thumb-wrap {
  display: inline-block; position: relative; margin: 2px;
  border-radius: 6px; overflow: hidden;
  border: 1px solid var(--border); cursor: zoom-in;
}
.receipt-thumb-wrap:hover { border-color: var(--accent); }
.receipt-thumb {
  display: block; width: 80px; height: 80px; object-fit: cover; background: var(--bg);
}
.receipt-thumb.file-thumb {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-size: 22px; gap: 2px;
}
.receipt-thumb.file-thumb .small { font-size: 10px; text-transform: uppercase; }
.receipt-thumb-wrap .receipt-del {
  position: absolute; top: 2px; right: 2px;
  width: 22px; height: 22px; line-height: 18px; padding: 0; font-size: 14px;
  background: rgba(0,0,0,0.7); border: 1px solid var(--border); color: #fff;
  border-radius: 50%;
}
.receipt-thumb-wrap .receipt-del:hover { background: var(--err); border-color: var(--err); }
.receipt-cell input[type="file"] { width: 100%; font-size: 11px; padding: 4px 0; border: none; background: transparent; }

/* Company-card dropdown coloring */
.cc-col { min-width: 140px; }
.req { color: var(--accent); margin-left: 2px; }
.cc-select.cc-empty { background: rgba(248,113,113,0.10); border-color: var(--err); }
.cc-select.cc-yes   { background: rgba(220,38,38,0.10);  border-color: var(--accent); color: var(--accent); font-weight: 600; }
.cc-select.cc-no    { background: rgba(34,197,94,0.06);  border-color: var(--ok); }
.kind-select.kind-empty { background: rgba(248,113,113,0.10); border-color: var(--err); }

/* ─── Dashboard ─── */
.hello { margin: 0 0 6px; font-size: 26px; }
.dash-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.dash-tile {
  display: block; padding: 18px 20px; border-radius: 12px;
  background: var(--sticky-bg); border: 1px solid var(--border); color: var(--fg);
  text-decoration: none; transition: border-color 0.15s, transform 0.05s;
}
.dash-tile:hover { border-color: var(--accent); transform: translateY(-1px); }
.tile-num { font-size: 32px; font-weight: 700; color: var(--accent); line-height: 1; }
.tile-label { margin-top: 6px; font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
.tile-cta { margin-top: 12px; font-size: 13px; color: var(--fg); }

.dash-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  max-width: 1400px; margin: 16px auto; padding: 0 24px; align-items: start;
}
/* Cards inside .dash-row are positioned by the grid — kill the global card
   centering so each half fills its column edge-to-edge. */
.dash-row .card { max-width: none; margin: 0; }
.half-card { max-width: none; }
.dash-list { list-style: none; padding: 0; margin: 0; }
.dash-list > li {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.8fr) minmax(0, 0.7fr) minmax(0, 1fr);
  gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border);
  font-size: 13px; align-items: baseline;
}
.dash-list > li:last-child { border-bottom: none; }
.dash-emp { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-num { color: var(--accent); font-weight: 600; text-align: right; }
.dash-cc { text-align: right; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.dash-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.dash-table th, .dash-table td { padding: 8px 10px; border-bottom: 1px solid var(--border); text-align: left; }
.dash-table th { color: var(--muted); font-weight: 600; }
.row-clickable { cursor: pointer; }
.row-clickable:hover { background: rgba(220,38,38,0.04); }

/* ─── EWA stage pills ─── */
.stage-pill {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
}
.stage-preliminary    { background: rgba(163,163,163,0.15); color: var(--muted); }
.stage-customer-approval { background: rgba(251,191,36,0.15); color: var(--warn); }
.stage-signed         { background: rgba(56,189,248,0.15); color: #38bdf8; }
.stage-complete       { background: rgba(34,197,94,0.15); color: var(--ok); }

/* ─── EWA forms ─── */
.card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; margin-bottom: 12px; }
.card-head h1, .card-head h2 { margin: 0; }
.ewa-form, .ewa-form-row { display: flex; flex-direction: column; gap: 12px; }
.ewa-form-row { flex-direction: row; gap: 14px; flex-wrap: wrap; }
.ewa-form-row > label { flex: 1; min-width: 220px; }
.ewa-form textarea, .card textarea { width: 100%; resize: vertical; min-height: 60px; padding: 8px 10px; border-radius: 6px; border: 1px solid var(--border); background: var(--bg); color: var(--fg); font-size: 14px; font-family: inherit; }
.ewa-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.line-source { font-weight: 600; font-size: 13px; }

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

/* Office-fills cell on the EWA material lines */
.office-only { background: rgba(163,163,163,0.05); text-align: center; }

/* Buttons row above EWA line items */
.ewa-add-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.primary-link {
  margin-left: auto; padding: 8px 16px; border-radius: 6px;
  background: var(--accent); color: var(--accent-ink); text-decoration: none;
  font-weight: 700; font-size: 14px;
}
.primary-link:hover { filter: brightness(1.1); }

/* ─── Customer signature page ─── */
body.sign-bg { background: #f5f5f5; color: #1a1a1a; }
body.sign-bg .muted { color: #6b6b6b; }
.sign-card {
  max-width: 920px; margin: 24px auto; padding: 32px;
  background: #ffffff; border: 1px solid #e5e5e5; border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.04);
}
.sign-header { display: flex; align-items: center; gap: 18px; border-bottom: 1px solid #e5e5e5; padding-bottom: 16px; }
.sign-logo { height: 50px; width: auto; }
.sign-header h1 { margin: 0; font-size: 22px; color: #1a1a1a; }
.sign-summary { padding: 18px 0; }
.sign-block { margin-bottom: 14px; }
.sign-block h3, .sign-card-inner h3 { margin: 0 0 6px; font-size: 14px; text-transform: uppercase; letter-spacing: 0.04em; color: #6b6b6b; }
.sign-block p { margin: 0; line-height: 1.5; }
.sign-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px 16px;
  margin: 14px 0; padding: 14px; background: #fafafa; border-radius: 8px;
  font-size: 13px;
}
.sign-table { width: 100%; border-collapse: collapse; font-size: 13px; margin: 8px 0; }
.sign-table th, .sign-table td { padding: 8px 10px; border-bottom: 1px solid #e5e5e5; text-align: left; }
.sign-table th { color: #6b6b6b; font-weight: 600; text-transform: uppercase; font-size: 11px; letter-spacing: 0.04em; }
.sign-table tfoot td { background: #fafafa; border-bottom: none; border-top: 2px solid #1a1a1a; font-size: 14px; }
.sign-table .r { text-align: right; }
.line-type { font-weight: 600; }

.sign-card-inner { padding: 18px 0; border-top: 1px solid #e5e5e5; }
.sign-card-inner input, .sign-card-inner select {
  background: #ffffff; color: #1a1a1a; border: 1px solid #d4d4d4;
  font-size: 14px; padding: 10px 12px; border-radius: 6px;
}
.sign-card-inner input:focus, .sign-card-inner select:focus { outline: 2px solid var(--accent); }
.sign-card-inner label { color: #1a1a1a; }

.sig-canvas-wrap { position: relative; margin: 8px 0; }
#sig-canvas {
  display: block; width: 100%; height: 240px;
  background: #ffffff; border: 2px dashed #d4d4d4; border-radius: 6px; cursor: crosshair;
  touch-action: none;
}
#sig-clear { position: absolute; top: 8px; right: 8px; padding: 4px 10px; font-size: 12px; }

.sig-actions { display: flex; gap: 12px; margin-top: 14px; }
.sig-actions button { padding: 12px 22px; }
#sig-status { margin-top: 10px; font-size: 13px; }
#sig-status.error { color: var(--err); }

.sign-footer { margin-top: 24px; text-align: center; padding-top: 16px; border-top: 1px solid #e5e5e5; }

@media (max-width: 600px) {
  .sign-card { padding: 20px; margin: 12px; }
  .sign-grid { grid-template-columns: repeat(2, 1fr); }
  .sign-header { flex-direction: column; align-items: flex-start; }
}

/* Lightbox dialog (full-size receipt viewer) */
.lightbox {
  border: none; background: transparent; padding: 0;
  max-width: 95vw; max-height: 95vh; width: auto; height: auto;
}
.lightbox::backdrop { background: rgba(0,0,0,0.85); }
.lightbox img {
  display: block; max-width: 92vw; max-height: 88vh; object-fit: contain;
  border: 1px solid var(--border); border-radius: 8px; background: var(--card);
}
.lightbox-close {
  position: absolute; top: 8px; right: 8px;
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(0,0,0,0.7); border: 1px solid var(--border); color: #fff;
  font-size: 20px; cursor: pointer; line-height: 32px;
}
.lightbox-close:hover { background: var(--err); border-color: var(--err); }
.lightbox-caption { margin-top: 8px; text-align: center; color: var(--fg); }

/* Sized for the real Ferguson logo PNG */
.bar .brand-mark { height: 44px; }       /* prominent in the top-left */
.login-card .brand-mark { height: 90px; } /* big and centered on the login card */
.bar .brand-tagline { font-size: 9.5px; letter-spacing: 0.2em; margin-top: 1px; }
.brand-stack { display: flex; flex-direction: column; line-height: 1.1; }
.brand-slogan {
  font-size: 10px; color: var(--accent); font-style: italic;
  letter-spacing: 0.02em; margin-top: 2px; opacity: 0.9;
}

/* ---- Dispatch board: top toolbar + timeline + right rail ---- */
.dispatch-top {
  position: sticky; top: 56px; z-index: 50;
  background: var(--card); border-bottom: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 8px;
  padding: 10px 16px;
}
/* Drop the LR strip + main board below the toolbar's stacking layer so
   open popover menus from the toolbar can never be hidden behind them. */
.lr-strip { position: relative; z-index: 1; }
.dispatch-main2 { position: relative; z-index: 1; }
.dt-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dt-row-1 { justify-content: flex-start; }
.dt-spacer { flex: 1; }

.zoom-pills, .view-pills {
  display: flex; gap: 2px; background: var(--bg); padding: 2px; border-radius: 8px;
}
.zoom-pill, .view-pill {
  padding: 6px 14px; font-size: 12px; font-weight: 600;
  color: var(--muted); border-radius: 6px; text-decoration: none;
}
.zoom-pill:hover, .view-pill:hover { color: var(--fg); }
.zoom-pill.active, .view-pill.active { background: var(--accent); color: #fff; }
.date-nav { display: flex; align-items: center; gap: 6px; }
.date-nav input[type="date"] { padding: 5px 8px; font-size: 12px; }

.dt-row-2 { padding-top: 4px; border-top: 1px solid var(--border); }

/* "Showing crew on … <picker>" row that appears under the view tabs when the
   user is on By Job / By Person. Big, prominent, single-purpose. */
.dt-context {
  padding: 6px 0 0; gap: 10px; align-items: center;
}
.dt-context-label { white-space: nowrap; }
.dt-select-wide {
  flex: 1 1 360px; min-width: 240px; max-width: 520px;
  padding: 8px 10px; font-size: 13px;
}
.dt-clear-context { text-decoration: underline; }
.dt-search {
  flex: 1 1 240px; min-width: 200px; padding: 7px 10px; font-size: 13px;
  background: var(--bg); color: var(--fg);
  border: 1px solid var(--border); border-radius: 6px;
}
.dt-search:focus { border-color: var(--accent); outline: none; }
.dt-select {
  padding: 6px 8px; font-size: 12px;
  background: var(--bg); color: var(--fg);
  border: 1px solid var(--border); border-radius: 6px;
  max-width: 200px;
}

/* Filter popovers — button + JS-toggled dropdown panel. */
.dt-popover { position: relative; }
.dt-popover-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; font-size: 12px; font-weight: 500;
  background: var(--bg); color: var(--fg);
  border: 1px solid var(--border); border-radius: 6px;
  white-space: nowrap; cursor: pointer; font-family: inherit;
  user-select: none;
}
.dt-popover-btn:hover { border-color: var(--accent); }
.dt-popover.open .dt-popover-btn {
  background: rgba(220,38,38,0.10); border-color: var(--accent); color: var(--fg);
}
.dt-caret { font-size: 10px; opacity: 0.7; transition: transform .12s; }
.dt-popover.open .dt-caret { transform: rotate(180deg); }
.dt-count {
  background: var(--accent); color: #fff;
  padding: 1px 7px; border-radius: 999px;
  font-size: 10px; font-weight: 700;
}
.dt-popover-menu {
  display: none;
  /* position:fixed at z=9999 so the menu floats above EVERY parent
     stacking context — and JS portals it to <body> on open so even nested
     transforms / sticky parents can't trap it. */
  position: fixed !important; z-index: 9999 !important;
  min-width: 200px; max-width: 320px;
  flex-direction: column; gap: 2px;
  padding: 8px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--card); box-shadow: 0 12px 28px rgba(0,0,0,0.5);
}
/* Match by a class on the menu itself, NOT a parent — the menu gets
   portaled out of its <details> wrapper so parent-descendant selectors
   no longer apply. */
.dt-popover-menu.is-open { display: flex; }
.dt-popover-menu label {
  display: block;
  padding: 6px 12px; border-radius: 4px;
  font-size: 12px; cursor: pointer; white-space: nowrap;
  user-select: none;
  transition: background .12s, color .12s;
}
.dt-popover-menu label:hover { background: rgba(255,255,255,0.06); color: var(--fg); }
/* Hide the actual checkbox/radio — the label itself shows selection state
   via a red highlight, like a chip selector. */
.dt-popover-menu input[type="checkbox"],
.dt-popover-menu input[type="radio"] {
  position: absolute; opacity: 0; width: 0; height: 0; margin: 0;
}
.dt-popover-menu label:has(input:checked) {
  background: rgba(220,38,38,0.20); color: #fff; font-weight: 600;
}
.dt-popover-menu label:has(input:checked):hover {
  background: rgba(220,38,38,0.28);
}
.dt-popover-scroll { max-height: 280px; overflow-y: auto; }

.dt-groupby {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--muted); white-space: nowrap;
}
.dt-groupby select {
  padding: 6px 8px; font-size: 12px;
  background: var(--bg); color: var(--fg);
  border: 1px solid var(--border); border-radius: 6px;
}
.dt-apply {
  padding: 6px 14px; font-size: 12px; font-weight: 600;
  background: var(--accent); color: #fff; border: 1px solid var(--accent);
  border-radius: 6px; cursor: pointer;
}
.dt-clear {
  padding: 6px 14px; font-size: 12px; font-weight: 600;
  text-decoration: none; cursor: pointer;
  background: transparent; color: #60a5fa;
  border: 1px solid #60a5fa; border-radius: 6px;
}
.dt-clear:hover { background: rgba(96,165,250,0.12); color: #93c5fd; border-color: #93c5fd; }
.dt-stats { margin-left: auto; }

/* Open Labor Requests strip — horizontally-scrolling card row above
   the timeline, sits below the toolbar. The user clicks a card to drill
   into that work order's labor board (By Job view). */
.lr-strip {
  margin-top: 60px;
  background: var(--card); border-bottom: 1px solid var(--border);
  padding: 8px 16px;
}
.lr-strip-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 6px;
}
.lr-strip-head h3 {
  margin: 0; font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--muted); font-weight: 700;
}
.lr-strip-scroll {
  display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px;
  scroll-snap-type: x proximity;
}
.lr-card {
  flex: 0 0 240px; min-width: 240px;
  scroll-snap-align: start;
  display: flex; flex-direction: column; gap: 4px;
  padding: 8px 10px; border-radius: 8px;
  background: var(--bg); color: var(--fg); text-decoration: none;
  border: 1px solid var(--border); border-left-width: 4px;
  transition: border-color .15s, transform .05s;
  cursor: pointer;
}
.lr-card:hover { border-color: var(--accent); transform: translateY(-1px); }
.lr-card.lr-full { opacity: 0.6; }
.lr-card-actions {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-top: 6px;
}
.lr-card-schedule {
  flex: 1; padding: 6px 10px; font-size: 12px; font-weight: 700;
  background: var(--accent); color: #fff; border: 0; border-radius: 6px;
  cursor: pointer; font-family: inherit;
}
.lr-card-schedule:hover { filter: brightness(1.1); }
.lr-card-board { text-decoration: none; white-space: nowrap; }
.lr-card-board:hover { color: var(--fg); }
.lr-card-top { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; }
.lr-card-top strong { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lr-card-mid { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lr-card-bot { display: flex; justify-content: space-between; align-items: center; margin-top: 2px; }
.lr-fill { font-size: 11px; padding: 1px 8px; border-radius: 999px; font-weight: 600; }
.lr-fill-empty   { background: rgba(220,38,38,0.18); color: #fca5a5; }
.lr-fill-partial { background: rgba(234,179,8,0.18); color: #facc15; }
.lr-fill-full    { background: rgba(34,197,94,0.18); color: #4ade80; }
.lr-union-pill {
  font-size: 10px; padding: 1px 6px; border-radius: 4px;
  background: rgba(255,255,255,0.06); color: var(--muted); white-space: nowrap;
}
/* Tint the card's left border by union (uses .color-N from the bar palette). */
.lr-card.lr-color-0  { border-left-color: #dc2626; }
.lr-card.lr-color-1  { border-left-color: #ea580c; }
.lr-card.lr-color-2  { border-left-color: #d97706; }
.lr-card.lr-color-3  { border-left-color: #65a30d; }
.lr-card.lr-color-4  { border-left-color: #16a34a; }
.lr-card.lr-color-5  { border-left-color: #0d9488; }
.lr-card.lr-color-6  { border-left-color: #0284c7; }
.lr-card.lr-color-7  { border-left-color: #2563eb; }
.lr-card.lr-color-8  { border-left-color: #7c3aed; }
.lr-card.lr-color-9  { border-left-color: #c026d3; }
.lr-card.lr-color-10 { border-left-color: #db2777; }
.lr-card.lr-color-11 { border-left-color: #475569; }

/* Union legend — small chips on the toolbar showing which color = which union. */
.union-legend {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  padding: 4px 0;
}
.union-chip {
  font-size: 11px; padding: 2px 10px; border-radius: 4px; color: #fff;
  font-weight: 600; letter-spacing: 0.02em;
  border: 0; cursor: pointer; font-family: inherit;
  transition: filter .12s, transform .05s;
}
.union-chip:hover { filter: brightness(1.18); }
.union-chip:active { transform: translateY(1px); }

/* Color picker that floats next to the clicked chip. */
.union-picker {
  position: fixed !important; z-index: 9999 !important;
  width: 220px; padding: 10px;
  background: var(--card); border: 1px solid var(--border); border-radius: 8px;
  box-shadow: 0 18px 40px rgba(0,0,0,0.55);
  display: flex; flex-direction: column; gap: 8px;
}
.union-picker-title {
  font-size: 11px; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.05em;
}
.union-picker-title strong { color: var(--fg); text-transform: none; letter-spacing: 0; font-size: 12px; }
.union-picker-swatches {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px;
}
.union-swatch {
  height: 24px; border: 1px solid rgba(255,255,255,0.1);
  border-radius: 4px; cursor: pointer; padding: 0;
  transition: transform .08s, border-color .12s;
}
.union-swatch:hover { transform: scale(1.08); border-color: var(--fg); }
.union-swatch.is-current { box-shadow: 0 0 0 2px var(--fg); }
.union-picker-foot { display: flex; justify-content: flex-end; }
.union-picker-foot button {
  font-size: 11px; padding: 4px 10px; border-radius: 4px;
  background: transparent; color: var(--muted); border: 1px solid var(--border);
  cursor: pointer;
}
.union-picker-foot button:hover { color: var(--fg); border-color: var(--fg); }

/* Designation group header that spans across the timeline. */
.dgrid-group-header {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em;
  font-weight: 700; color: var(--muted);
  background: rgba(220,38,38,0.06);
  border-bottom: 1px solid var(--border); border-top: 1px solid var(--border);
  padding: 4px 10px; height: 22px;
  position: sticky; top: 74px; z-index: 2;  /* sits below the 3-tier date header */
  display: flex; align-items: center;
}
.dgrid-group-asset { grid-column: 1; left: 0; }
.dgrid-group-row { grid-column: 2 / -1; }

/* Main area: timeline only — the gantt is a context view; scheduling
   actions happen in the modal launched from each Labor Request card. */
.dispatch-main2 {
  display: block;
  height: calc(100vh - 220px); /* below header bar + dispatch-top + LR strip */
  background: var(--bg);
}

.timeline-pane { min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.empty-state { padding: 60px 20px; text-align: center; color: var(--muted); font-size: 14px; }

.dispatch-wrap { flex: 1; min-height: 0; overflow: auto; background: var(--bg); }

/* Zoom-driven density */
.dispatch-main2[data-zoom="day"]     { --day-w: 320px; --row-h: 60px; --bar-h: 38px; --bar-font: 13px; }
.dispatch-main2[data-zoom="week"]    { --day-w: 110px; --row-h: 48px; --bar-h: 30px; --bar-font: 12px; }
.dispatch-main2[data-zoom="month"]   { --day-w: 38px;  --row-h: 40px; --bar-h: 22px; --bar-font: 10px; }
.dispatch-main2[data-zoom="quarter"] { --day-w: 14px;  --row-h: 32px; --bar-h: 18px; --bar-font: 0;    }
.dispatch-main2[data-zoom="year"]    { --day-w: 5px;   --row-h: 26px; --bar-h: 14px; --bar-font: 0;    }

/* Scheduling-defaults block at the top of the right rail */
.sched-defaults {
  padding: 12px 14px; border-bottom: 1px solid var(--border);
  background: rgba(255,255,255,0.02);
}
.sched-defaults h4 {
  margin: 0 0 6px; font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--muted); font-weight: 700;
}
.sched-types { display: flex; flex-direction: column; gap: 4px; }
.sched-type {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 6px 8px; border: 1px solid var(--border); border-radius: 6px;
  cursor: pointer; font-size: 12px; line-height: 1.25;
  background: var(--bg);
}
.sched-type:hover { border-color: var(--accent); }
.sched-type input { margin-top: 2px; accent-color: var(--accent); }
.sched-type span { display: flex; flex-direction: column; min-width: 0; }
.sched-type:has(input:checked) {
  border-color: var(--accent); background: rgba(220,38,38,0.08);
}

.sched-days { display: flex; gap: 4px; }
.sched-day {
  flex: 1; min-width: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  height: 30px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--bg); font-size: 12px; font-weight: 600; color: var(--muted);
  user-select: none;
}
.sched-day input { display: none; }
.sched-day:hover { border-color: var(--accent); color: var(--fg); }
.sched-day:has(input:checked) {
  background: var(--accent); color: #fff; border-color: var(--accent);
}

/* Right availability rail */
.avail-rail {
  border-left: 1px solid var(--border); background: var(--card);
  display: flex; flex-direction: column; min-width: 0;
}
.avail-header {
  padding: 12px 14px 8px; border-bottom: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 2px;
}
.avail-header h3 { margin: 0; font-size: 14px; }
.avail-tabs {
  display: flex; gap: 0;
  border-bottom: 1px solid var(--border);
}
.avail-tab {
  flex: 1; padding: 10px 8px; font-size: 12px; font-weight: 600;
  background: transparent; border: 0; color: var(--muted);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; font-family: inherit;
}
.avail-tab:hover { color: var(--fg); }
.avail-tab.active { color: var(--fg); border-bottom-color: var(--accent); background: rgba(220,38,38,0.05); }
.avail-count {
  font-size: 11px; padding: 1px 6px; border-radius: 999px;
  background: rgba(255,255,255,0.06); color: var(--muted);
}
.avail-tab.active .avail-count { background: var(--accent); color: #fff; }
.avail-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.avail-dot-green  { background: #22c55e; }
.avail-dot-yellow { background: #eab308; }
.avail-dot-red    { background: var(--accent); }

.avail-list {
  list-style: none; padding: 8px; margin: 0;
  flex: 1; min-height: 0; overflow-y: auto;
  display: flex; flex-direction: column; gap: 4px;
}
.avail-item {
  display: flex; flex-direction: column; gap: 2px;
  padding: 8px 10px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--bg); cursor: grab;
  transition: border-color .12s, transform .05s;
}
.avail-item:hover { border-color: var(--accent); }
.avail-item:active { cursor: grabbing; transform: scale(0.98); }
.avail-item-dragging { opacity: 0.4; outline: 2px dashed var(--accent); }

/* Visual feedback when dragging an asset over an LR card. */
.lr-card-drophover {
  border-color: #4ade80 !important;
  background: rgba(34,197,94,0.10);
  transform: translateY(-2px) scale(1.01);
  box-shadow: 0 8px 22px rgba(34,197,94,0.25);
}

/* Schedule modal — owns the full scheduling workflow per LR. */
.schedule-dlg {
  width: min(820px, 96vw); max-height: 92vh;
  padding: 0; border: 1px solid var(--border); border-radius: 12px;
  background: var(--card); color: var(--fg);
  box-shadow: 0 24px 60px rgba(0,0,0,0.6);
}
.schedule-dlg::backdrop { background: rgba(0,0,0,0.6); backdrop-filter: blur(2px); }
.schedule-dlg[open] { display: flex; flex-direction: column; }
.sd-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 14px; padding: 14px 20px; border-bottom: 1px solid var(--border);
}
.sd-header h3 { margin: 2px 0; font-size: 18px; }
.sd-meta { line-height: 1.4; }
.sd-body {
  padding: 14px 20px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 18px;
}
.sd-section h4 {
  margin: 0 0 8px; font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--muted); font-weight: 700;
}
.sd-when {
  display: flex; flex-wrap: wrap; gap: 14px; align-items: center;
  margin-bottom: 10px;
}
.sd-when label { display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--muted); }
.sd-when label input[type="date"] { padding: 6px 8px; }
.sd-days { display: flex; gap: 4px; }
.sd-types { display: flex; gap: 6px; flex-wrap: wrap; }
.sd-types .sched-type { flex: 1; min-width: 180px; }

.sd-search-row {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  margin-bottom: 10px;
}
#sd-search {
  flex: 1; min-width: 220px; padding: 8px 10px; font-size: 13px;
  background: var(--bg); color: var(--fg);
  border: 1px solid var(--border); border-radius: 6px;
}
#sd-search:focus { border-color: var(--accent); outline: none; }
.sd-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px; font-size: 12px;
  background: var(--bg); border: 1px solid var(--border); border-radius: 6px;
  cursor: pointer; user-select: none;
}
.sd-toggle:has(input:checked) {
  background: rgba(220,38,38,0.15); border-color: var(--accent); color: var(--fg);
}
.sd-toggle input { accent-color: var(--accent); }

/* Selected pile — drop target at the top of the modal */
.sd-pile {
  min-height: 64px;
  border: 1.5px dashed var(--border); border-radius: 8px;
  padding: 8px; background: var(--bg);
  display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-start;
  transition: border-color .15s, background .15s;
}
.sd-pile-drophover {
  border-color: #4ade80; border-style: solid;
  background: rgba(34,197,94,0.08);
}
.sd-pile-empty {
  padding: 10px 12px; text-align: center; width: 100%;
}
.sd-pile-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 8px 6px 10px; border-radius: 999px;
  background: rgba(220,38,38,0.18); border: 1px solid rgba(220,38,38,0.4);
  font-size: 12px;
}
.sd-pile-chip strong { font-weight: 600; }
.sd-pile-chip .muted { font-size: 11px; }
.sd-pile-remove {
  width: 20px; height: 20px; padding: 0;
  border: 0; border-radius: 50%;
  background: rgba(255,255,255,0.10); color: var(--fg);
  cursor: pointer; line-height: 1; font-size: 14px;
}
.sd-pile-remove:hover { background: rgba(255,255,255,0.20); }

/* Drag affordance on each available row */
.sd-asset { grid-template-columns: 14px 24px minmax(0, 1fr) auto !important; }
.sd-drag-handle {
  display: inline-block; color: var(--muted); font-weight: 700;
  cursor: grab; user-select: none; line-height: 1;
}
.sd-asset[draggable="true"] { cursor: grab; }
.sd-asset-dragging { opacity: 0.45; outline: 2px dashed var(--accent); }

.sd-results-meta {
  display: flex; justify-content: space-between; padding: 4px 2px;
}
.sd-results {
  list-style: none; padding: 0; margin: 0;
  border: 1px solid var(--border); border-radius: 8px;
  max-height: 380px; overflow-y: auto;
  background: var(--bg);
}
.sd-asset {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: center; gap: 10px;
  padding: 8px 12px; border-bottom: 1px solid var(--border);
  cursor: pointer;
}
.sd-asset:last-child { border-bottom: 0; }
.sd-asset:hover { background: rgba(255,255,255,0.04); }
.sd-asset-selected { background: rgba(220,38,38,0.10); }
.sd-asset-selected:hover { background: rgba(220,38,38,0.16); }
.sd-asset > input[type="checkbox"] { accent-color: var(--accent); }
.sd-asset-main { display: flex; flex-direction: column; min-width: 0; }
.sd-asset-main strong { font-size: 13px; }
.sd-asset-main span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sd-asset-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sd-pill {
  font-size: 10px; font-weight: 700; letter-spacing: 0.04em;
  padding: 2px 8px; border-radius: 999px;
}
.sd-pill-union { background: rgba(96,165,250,0.20); color: #93c5fd; }
.sd-pill-on    { background: rgba(234,179,8,0.18);  color: #facc15; }

.sd-pagination {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 8px; gap: 8px;
}

.sd-footer {
  padding: 12px 20px; border-top: 1px solid var(--border);
  display: flex; justify-content: flex-end; gap: 8px;
}
#sd-submit {
  padding: 8px 18px; font-weight: 700; min-width: 160px;
}
.avail-item-main strong { font-size: 13px; color: var(--fg); }
.avail-item-meta { display: flex; gap: 6px; }
.avail-pill {
  padding: 1px 8px; border-radius: 999px; font-size: 10px; font-weight: 600;
  letter-spacing: 0.02em;
}
.avail-pill-green  { background: rgba(34,197,94,0.15);  color: #4ade80; }
.avail-pill-yellow { background: rgba(234,179,8,0.15);  color: #facc15; }
.avail-pill-red    { background: rgba(220,38,38,0.20);  color: #fca5a5; }
.avail-empty { padding: 12px; }
.avail-footer { padding: 8px 14px; border-top: 1px solid var(--border); margin: 0; }

.dispatch-grid {
  --asset-col: 200px;
  display: grid;
  /* minmax(day-w, 1fr) lets columns stretch to fill the viewport when the
     window is shorter than the available width, but keeps the natural
     min-width so the timeline scrolls horizontally when it overflows. */
  grid-template-columns: var(--asset-col) repeat(var(--day-count), minmax(var(--day-w), 1fr));
  background: var(--bg);
  width: 100%;
  min-width: max-content;
}
/* Multi-tier date header — months on top, weeks under, days at the bottom.
   Each tier sticks to the top of the scroll container at progressively
   higher offsets so they all stay visible while scrolling vertically. */
.dgrid-corner {
  grid-column: 1;
  position: sticky; left: 0; z-index: 4;
  background: var(--card); border-right: 1px solid var(--grid); border-bottom: 1px solid var(--grid);
  display: flex; align-items: center;
}
.dgrid-corner-tier1 { top: 0;    height: 22px; z-index: 6; }
.dgrid-corner-tier2 { top: 22px; height: 22px; z-index: 5; }
.dgrid-corner-tier3 { top: 44px; height: 30px; z-index: 4; }
.dgrid-corner > span {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 0 10px;
  font-size: 9px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--muted);
  white-space: nowrap;
}
.dgrid-corner > span em { font-style: normal; font-weight: 500; opacity: 0.75; }
.dgrid-corner-tier1 > span { color: var(--accent); }

.dgrid-tier, .dgrid-header {
  grid-column: 2 / -1;
  position: sticky; z-index: 3;
  display: grid; grid-template-columns: repeat(var(--day-count), minmax(var(--day-w), 1fr));
  background: var(--card); border-bottom: 1px solid var(--grid);
}
.dgrid-tier-month { top: 0;    height: 22px; z-index: 5; }
.dgrid-tier-week  { top: 22px; height: 22px; z-index: 4; }
.dgrid-header     { top: 44px; height: 30px; z-index: 3; }

.dgrid-month-band {
  display: flex; align-items: center; padding: 0 8px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--accent);
  background: rgba(220,38,38,0.08);
  border-right: 2px solid var(--accent);
  white-space: nowrap; overflow: hidden;
}
.dgrid-week-band {
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 600; color: var(--muted);
  background: rgba(255,255,255,0.025);
  border-right: 1px solid rgba(255,255,255,0.10);
  white-space: nowrap; overflow: hidden;
}
.dgrid-week-band:nth-child(odd) { background: rgba(255,255,255,0.04); }

/* Zoom-conditional visibility of header tiers:
   - Day:    only days     (no months, no weeks)
   - Week:   months + days (skip weeks since the whole window IS one)
   - Month:  all three tiers
   - Quarter: months + weeks (days hidden)
   - Year:   months only */
.dispatch-main2[data-zoom="day"]     .dgrid-tier-month,
.dispatch-main2[data-zoom="day"]     .dgrid-tier-week,
.dispatch-main2[data-zoom="day"]     .dgrid-corner-tier1,
.dispatch-main2[data-zoom="day"]     .dgrid-corner-tier2 { display: none; }
.dispatch-main2[data-zoom="day"]     .dgrid-corner-tier3 { top: 0; }
.dispatch-main2[data-zoom="day"]     .dgrid-header       { top: 0; }

.dispatch-main2[data-zoom="week"]    .dgrid-tier-week,
.dispatch-main2[data-zoom="week"]    .dgrid-corner-tier2 { display: none; }
.dispatch-main2[data-zoom="week"]    .dgrid-corner-tier3 { top: 22px; }
.dispatch-main2[data-zoom="week"]    .dgrid-header       { top: 22px; }

/* Quarter: keep month + week, hide the day labels (day cells stay for grid
   alignment / weekend tint, but their text is invisible at this zoom).
   Day-row + corner are kept short but tall enough to read the corner label. */
.dispatch-main2[data-zoom="quarter"] .dgrid-day .dgrid-dow,
.dispatch-main2[data-zoom="quarter"] .dgrid-day .dgrid-dom { display: none; }
.dispatch-main2[data-zoom="quarter"] .dgrid-corner-tier3   { height: 16px; }
.dispatch-main2[data-zoom="quarter"] .dgrid-header         { height: 16px; }
.dispatch-main2[data-zoom="quarter"] .dgrid-corner-tier3 > span { font-size: 8px; padding: 0 6px; }
.dispatch-main2[data-zoom="quarter"] .dgrid-week-band { font-size: 9px; }
.dispatch-main2[data-zoom="quarter"] .dgrid-month-band { font-size: 10px; }

/* Year: months only — hide weeks AND day labels. */
.dispatch-main2[data-zoom="year"]    .dgrid-tier-week,
.dispatch-main2[data-zoom="year"]    .dgrid-corner-tier2,
.dispatch-main2[data-zoom="year"]    .dgrid-corner-tier3 { display: none; }
.dispatch-main2[data-zoom="year"]    .dgrid-header       { display: none; }
.dispatch-main2[data-zoom="year"]    .dgrid-corner-tier1 { height: 28px; }
.dispatch-main2[data-zoom="year"]    .dgrid-tier-month   { height: 28px; }
.dispatch-main2[data-zoom="year"]    .dgrid-month-band   { font-size: 10px; padding: 0 6px; }
.dgrid-day {
  font-size: 10px; text-align: center;
  padding: 4px 1px;
  /* Per-column right border AND a 1-pixel inset shadow so the column line
     keeps reading even when the cell has a background fill (weekend tint,
     today highlight). This is what visually connects the header to the
     body grid below. */
  border-right: 1px solid var(--grid); position: relative; min-width: 0;
  display: flex; flex-direction: column; justify-content: center;
  box-shadow: inset -1px 0 0 var(--grid);
}
/* Alternating week shading on the date header — subtle stripes that
   carry down into the row cells too so each week is visually grouped. */
.dgrid-day.week-odd  { background: rgba(255,255,255,0.025); }
.dgrid-day.week-even { background: transparent; }
.dgrid-day.weekend.week-odd  { background: rgba(255,255,255,0.045); }
.dgrid-day.weekend.week-even { background: rgba(255,255,255,0.025); }
.dgrid-day.today {
  background: rgba(220,38,38,0.18);
  box-shadow: inset 0 -2px 0 var(--accent);
}
/* Thin separator at the start of every week (Monday). Matched 1:1 with the
   body cell's week-start border so the column line reads continuously
   from the day header all the way down through every gantt row. */
.dgrid-day.week-start { border-left: 1px solid rgba(255,255,255,0.18); }
/* Red divider where a new month begins — overrides the week separator
   above when a Monday also happens to be the 1st. Same width as the body
   cell so the line stays straight; the band tier above gives it weight. */
.dgrid-day.month-start { border-left: 1px solid var(--accent) !important; }
.dgrid-day .dgrid-dow { color: var(--muted); font-size: 9px; line-height: 1.1; }
.dgrid-day .dgrid-dom { color: var(--fg); font-weight: 600; font-size: 11px; line-height: 1.2; }
/* Hide DOW + DOM at heavily zoomed-out levels — only the month band stays. */
.dispatch-main2[data-zoom="quarter"] .dgrid-dow,
.dispatch-main2[data-zoom="quarter"] .dgrid-dom,
.dispatch-main2[data-zoom="year"]    .dgrid-dow,
.dispatch-main2[data-zoom="year"]    .dgrid-dom { display: none; }
/* Also belt-and-suspenders: clip whatever is still in the day cell so it
   never bleeds across columns at narrow widths. */
.dgrid-day .dgrid-dow,
.dgrid-day .dgrid-dom { overflow: hidden; white-space: nowrap; text-overflow: clip; }

.dgrid-asset {
  /* Stays in the first column of the parent grid (the asset column). */
  grid-column: 1;
  position: sticky; left: 0; z-index: 2; background: var(--card);
  display: flex; flex-direction: column; justify-content: center;
  padding: 4px 10px; border-right: 1px solid var(--grid); border-bottom: 1px solid var(--grid);
  font-size: 12px; min-height: var(--row-h);
  overflow: hidden;
}
/* At Quarter/Year zoom the row height is tight; trim the asset cell font
   so the name + designation don't overflow into a second clipped line. */
.dispatch-main2[data-zoom="quarter"] .dgrid-asset-name,
.dispatch-main2[data-zoom="year"]    .dgrid-asset-name { font-size: 11px; }
.dispatch-main2[data-zoom="quarter"] .dgrid-asset-desig,
.dispatch-main2[data-zoom="year"]    .dgrid-asset-desig { font-size: 9px; }
.dgrid-asset-name, .dgrid-asset-desig {
  display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 100%;
}
.dgrid-asset-name { color: var(--fg); font-size: 13px; }
.dgrid-asset-desig { font-size: 10px; }

.dgrid-row {
  /* Span all the day columns of the parent grid (column 2 → end). */
  grid-column: 2 / -1;
  position: relative; z-index: 0;
  /* Inner grid: day cells + bars on day-width columns × N lane rows.
     --lanes is set inline by the template based on overlap detection. */
  display: grid;
  grid-template-columns: repeat(var(--day-count), minmax(var(--day-w), 1fr));
  grid-template-rows: repeat(var(--lanes, 1), var(--bar-h));
  row-gap: 3px;
  padding: 5px 0;
  border-bottom: 1px solid var(--grid);
  min-height: var(--row-h);
}
.dgrid-cell {
  /* Backdrop fills every lane in its column so weekend / today shading
     extends behind every stacked bar. The inset box-shadow draws the
     column separator on top of any cell background so the gridline
     keeps reading even when a today/weekend tint paints over it — this
     is what makes the body columns visually connect to the header. */
  grid-row: 1 / -1;
  border-right: 1px solid var(--grid);
  box-shadow: inset -1px 0 0 var(--grid);
}
.dgrid-cell.week-odd  { background: rgba(255,255,255,0.020); }
.dgrid-cell.week-even { background: transparent; }
.dgrid-cell.weekend.week-odd  { background: rgba(255,255,255,0.040); }
.dgrid-cell.weekend.week-even { background: rgba(255,255,255,0.020); }
.dgrid-cell.today { background: rgba(220,38,38,0.10) !important; }
.dgrid-cell.week-start { border-left: 1px solid rgba(255,255,255,0.18); }
/* Subtler month-start divider in the body — the bold red bar in every
   row was reading as an artifact. The header keeps the loud accent so the
   month boundary is still obvious where it matters. */
.dgrid-cell.month-start { border-left: 1px solid rgba(220,38,38,0.35) !important; }

.dgrid-bar {
  /* --lane (1-based) is set inline by the template; defaults to 1. */
  grid-row: var(--lane, 1);
  align-self: stretch;
  margin: 0 1px;
  border: 0; border-radius: 4px;
  font-family: inherit; font-size: var(--bar-font); font-weight: 600;
  color: #fff; padding: 0 6px; text-align: left;
  cursor: pointer; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  box-shadow: 0 1px 0 rgba(0,0,0,0.3);
  transition: filter .12s, transform .05s;
}
.dgrid-bar:hover { filter: brightness(1.15); z-index: 1; }
.dgrid-bar:active { transform: translateY(1px); }
.dgrid-bar .bar-label { display: block; overflow: hidden; text-overflow: ellipsis; }
.dispatch-shell[data-zoom="quarter"] .bar-label,
.dispatch-shell[data-zoom="year"]    .bar-label { display: none; }

/* Twelve-hue palette. Each `.color-N` class sets two CSS variables so any
   element (gantt bar, union chip, swatch, LR-card border) can pick the
   visual treatment that fits — gradient for bars, flat for chips/swatches. */
.color-0  { --hue-flat: #dc2626; --hue-grad: linear-gradient(180deg, #dc2626, #991b1b); }
.color-1  { --hue-flat: #ea580c; --hue-grad: linear-gradient(180deg, #ea580c, #9a3412); }
.color-2  { --hue-flat: #d97706; --hue-grad: linear-gradient(180deg, #d97706, #92400e); }
.color-3  { --hue-flat: #65a30d; --hue-grad: linear-gradient(180deg, #65a30d, #3f6212); }
.color-4  { --hue-flat: #16a34a; --hue-grad: linear-gradient(180deg, #16a34a, #14532d); }
.color-5  { --hue-flat: #0d9488; --hue-grad: linear-gradient(180deg, #0d9488, #115e59); }
.color-6  { --hue-flat: #0284c7; --hue-grad: linear-gradient(180deg, #0284c7, #075985); }
.color-7  { --hue-flat: #2563eb; --hue-grad: linear-gradient(180deg, #2563eb, #1e3a8a); }
.color-8  { --hue-flat: #7c3aed; --hue-grad: linear-gradient(180deg, #7c3aed, #4c1d95); }
.color-9  { --hue-flat: #c026d3; --hue-grad: linear-gradient(180deg, #c026d3, #701a75); }
.color-10 { --hue-flat: #db2777; --hue-grad: linear-gradient(180deg, #db2777, #831843); }
.color-11 { --hue-flat: #475569; --hue-grad: linear-gradient(180deg, #475569, #1e293b); }
.dgrid-bar     { background: var(--hue-grad); }
.union-chip,
.union-swatch  { background: var(--hue-flat); }

/* Compact info bubble that pops up next to the clicked bar. Styled to feel
   like the map info-bubbles dispatchers are used to: tight rounded card,
   bold field labels with normal-weight values inline, status pill at top. */
.bar-pin {
  position: fixed !important; z-index: 900 !important;
  width: min(320px, 92vw); max-height: 70vh;
  padding: 12px 14px 12px 14px; overflow-y: auto;
  background: var(--card); color: var(--fg);
  border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 18px 40px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.04) inset;
  font-size: 12px; line-height: 1.45;
}
.bar-pin[hidden] { display: none; }
.bar-pin h3 {
  margin: 0 22px 8px 0; font-size: 15px; line-height: 1.25;
  word-break: break-word;
}
.bar-pin-close {
  position: absolute; top: 6px; right: 6px;
  width: 24px; height: 24px; padding: 0;
  background: transparent; border: 0; cursor: pointer;
  color: var(--muted); font-size: 18px; line-height: 1;
  border-radius: 4px;
}
.bar-pin-close:hover { color: var(--fg); background: rgba(255,255,255,0.06); }

.bar-pin-pills {
  display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 10px;
}
.bar-pin-pill {
  display: inline-flex; align-items: center;
  padding: 2px 8px; border-radius: 999px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em;
  background: rgba(220,38,38,0.18); color: #fca5a5;
}
.bar-pin-pill[hidden] { display: none; }
.bar-pin-pill-stage { background: rgba(34,197,94,0.18); color: #4ade80; }

.bar-pin-rows { display: flex; flex-direction: column; gap: 4px; }
.bar-pin-rows > div { word-break: break-word; }
.bar-pin-rows strong { color: var(--muted); font-weight: 600; margin-right: 4px; }
.bar-pin-rows a { color: var(--accent); text-decoration: none; }
.bar-pin-rows a:hover { text-decoration: underline; }

/* Speech-bubble pointer — two stacked triangles (border + fill) that anchor
   on the side closest to the clicked bar. JS sets --pointer-x so the tip
   tracks the bar's center even when the bubble itself clamps to the viewport. */
.bar-pin-arrow {
  position: absolute;
  width: 0; height: 0;
  pointer-events: none;
}
/* Pointer drops DOWN out of the bubble (bubble is ABOVE the bar). */
.bar-pin[data-placement="above"] .bar-pin-arrow {
  left: var(--pointer-x, 50%);
  bottom: -10px;
  margin-left: -10px;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid var(--card);
  filter: drop-shadow(0 1px 0 var(--border));
}
/* Pointer rises UP into the bubble (bubble is BELOW the bar). */
.bar-pin[data-placement="below"] .bar-pin-arrow {
  left: var(--pointer-x, 50%);
  top: -10px;
  margin-left: -10px;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid var(--card);
  filter: drop-shadow(0 -1px 0 var(--border));
}

/* Year-rollover nag banner on the Payroll/Admin home page */
.year-rate-alert {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  background: rgba(234, 179, 8, 0.08);
  border-color: rgba(234, 179, 8, 0.45);
}
.year-rate-alert strong { color: #fbbf24; }

/* ---- Settings: mileage rate ---- */
.rate-summary { display: flex; gap: 24px; flex-wrap: wrap; align-items: center; margin: 12px 0 24px; }
.rate-current { padding: 14px 18px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); }
.rate-big { font-size: 32px; font-weight: 700; color: var(--accent); line-height: 1.1; }
.rate-unit { font-size: 14px; color: var(--muted); font-weight: 400; margin-left: 4px; }
.rate-warn {
  flex: 1; min-width: 280px; padding: 12px 14px; border-radius: 8px;
  border: 1px solid rgba(220,38,38,0.4); background: rgba(220,38,38,0.08);
  font-size: 13px; line-height: 1.4;
}
.rate-warn code { background: var(--bg); padding: 1px 6px; border-radius: 3px; }

/* ---- Add-employee modal: search results + placeholder pill ---- */
.search-results {
  display: flex; flex-direction: column; gap: 4px; margin-top: 6px;
  max-height: 280px; overflow-y: auto;
}
.search-result {
  text-align: left; padding: 8px 12px; border: 1px solid var(--border);
  background: var(--bg); border-radius: 6px; cursor: pointer;
  color: var(--fg); font-family: inherit; font-size: 13px;
  display: flex; align-items: center; gap: 8px;
}
.search-result:hover { border-color: var(--accent); background: rgba(220,38,38,0.08); }
.ph-pill, .ph-row-pill {
  display: inline-block; padding: 1px 6px; border-radius: 4px;
  background: rgba(234, 179, 8, 0.18); color: #fbbf24;
  font-size: 10px; font-weight: 700; letter-spacing: 0.05em;
}
/* Highlight placeholder rows on the time grid (anything containing
   "[PLACEHOLDER]" in its row label gets a subtle yellow tint). */
.crew-name.is-placeholder { color: #fbbf24; }
.crew-name.is-placeholder::before { content: "PH "; font-size: 10px; opacity: 0.8; }

/* ---- Read-only state when payroll period is Locked/Posted ---- */
.period-readonly {
  position: relative;
  opacity: 0.65;
  filter: grayscale(0.4);
}
.period-readonly::after {
  content: '🔒 Read-only';
  position: absolute; top: 14px; right: 18px;
  padding: 4px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.04em;
  background: rgba(220,38,38,0.15); border: 1px solid rgba(220,38,38,0.5);
  color: #fca5a5; pointer-events: none;
}
.period-readonly input,
.period-readonly select,
.period-readonly textarea,
.period-readonly button { cursor: not-allowed !important; }
.period-readonly input:disabled,
.period-readonly select:disabled { background: var(--bg) !important; color: var(--muted) !important; }

/* ---- Period lock banner ---- */
.lock-banner {
  max-width: 1400px; margin: 12px auto 0; padding: 10px 18px;
  display: flex; align-items: center; gap: 12px;
  border-radius: 8px; font-size: 13px;
}
.lock-banner.lock-Open    { display: none; }
.lock-banner.lock-Locked  { background: rgba(234, 179, 8, 0.10); border: 1px solid rgba(234, 179, 8, 0.4); color: #fbbf24; }
.lock-banner.lock-Posted  { background: rgba(220, 38, 38, 0.12); border: 1px solid rgba(220, 38, 38, 0.5); color: #fca5a5; }
.lock-banner .lock-icon { font-size: 18px; }
.lock-banner strong { color: inherit; }
.lock-banner .lock-meta { margin-left: auto; opacity: 0.85; font-size: 12px; }

/* ---- PACT footer — subtle creed line at the bottom of the page ---- */
.pact-footer {
  max-width: 1400px; margin: 24px auto 16px; padding: 10px 24px;
  display: flex; align-items: center; justify-content: center; gap: 14px;
  font-size: 11px; color: var(--muted); letter-spacing: 0.02em;
}
.pact-letters {
  letter-spacing: 0.4em; font-weight: 700; color: var(--accent); opacity: 0.7;
  font-size: 10px;
}
.pact-quote { font-style: italic; opacity: 0.7; }
@media (max-width: 720px) {
  .pact-letters { display: none; }
  .pact-footer { font-size: 10px; flex-direction: column; gap: 4px; }
}

/* ---- Ambient PACT background watermark (every page except login) ---- */
body:not(.login-bg)::before {
  content: '';
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    radial-gradient(circle at 20% 15%, rgba(220,38,38,0.08), transparent 35%),
    radial-gradient(circle at 85% 80%, rgba(220,38,38,0.06), transparent 40%),
    repeating-linear-gradient(
      135deg,
      transparent 0,
      transparent 120px,
      rgba(220,38,38,0.025) 120px,
      rgba(220,38,38,0.025) 121px
    );
}
body:not(.login-bg) > *:not(.pact-footer):not(.bar-panel):not(.bar-pin):not(.union-picker):not(.dt-popover-menu) { position: relative; z-index: 1; }

/* ─── Login screen ─── */
html, body.login-bg { height: 100%; }
body.login-bg {
  min-height: 100vh; margin: 0; padding: 24px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at center, #1a0606 0%, #000000 70%);
  position: relative; overflow: hidden;
}

/* PACT watermark — repeating values text drifting across the background. */
.pact-watermark {
  position: absolute; inset: 0; z-index: 0; overflow: hidden;
  pointer-events: none; user-select: none;
  display: flex; flex-direction: column; justify-content: space-around;
  transform: rotate(-12deg) scale(1.2); transform-origin: center;
  opacity: 0.05;
}
.pact-watermark span {
  white-space: nowrap; font-size: 28px; font-weight: 700;
  color: var(--accent); letter-spacing: 0.18em; text-transform: uppercase;
  font-family: -apple-system, "Segoe UI", system-ui, sans-serif;
  animation: drift 60s linear infinite;
}
.pact-watermark span:nth-child(even) { animation-direction: reverse; animation-duration: 80s; }
@keyframes drift {
  from { transform: translateX(-30%); }
  to   { transform: translateX(30%); }
}

.login-card { position: relative; z-index: 1; }

.login-slogan {
  margin: 0 0 14px; text-align: center; font-size: 14px;
  color: var(--accent); letter-spacing: 0.04em;
}

.brand-creed {
  position: relative; z-index: 1; margin-top: 22px;
  text-align: center; max-width: 540px;
}
.creed-line { margin: 4px 0; }
.creed-line strong { color: var(--fg); font-size: 14px; letter-spacing: 0.02em; }
.login-card {
  background: var(--card); border: 1px solid var(--border); border-radius: 14px;
  padding: 36px 32px; width: 100%; max-width: 440px;
  box-shadow: 0 20px 60px rgba(220,38,38,0.15), 0 4px 20px rgba(0,0,0,0.5);
  margin: auto;
}
.login-card h1 { margin-top: 0; font-size: 22px; }
.login-form { display: flex; flex-direction: column; gap: 14px; margin-top: 4px; }
.login-form button { margin-top: 4px; padding: 12px; font-size: 15px; }
.login-form label { font-size: 13px; }
.login-footnote { margin-top: 18px; padding: 12px; background: rgba(0,0,0,0.5);
  border-radius: 8px; line-height: 1.5; }
.login-footnote code {
  background: rgba(220,38,38,0.10); padding: 1px 5px; border-radius: 4px;
  color: var(--accent); font-size: 11px;
}

.sso-btn {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  width: 100%; padding: 12px; margin: 14px 0;
  background: #ffffff; color: #1f2937; border: 1px solid #e5e7eb;
  font-weight: 600; font-size: 14px; border-radius: 8px;
}
.sso-btn:disabled { opacity: 0.65; cursor: not-allowed; }
.sso-btn .ms-logo {
  display: inline-grid; grid-template-columns: 9px 9px; grid-template-rows: 9px 9px; gap: 2px;
}
.sso-btn .ms-logo > span:nth-child(1) { background: #f25022; }
.sso-btn .ms-logo > span:nth-child(2) { background: #7fba00; }
.sso-btn .ms-logo > span:nth-child(3) { background: #00a4ef; }
.sso-btn .ms-logo > span:nth-child(4) { background: #ffb900; }

.or-divider {
  position: relative; text-align: center; margin: 8px 0 14px;
  color: var(--muted); font-size: 12px;
}
.or-divider::before {
  content: ''; position: absolute; top: 50%; left: 0; right: 0;
  height: 1px; background: var(--border); z-index: 0;
}
.or-divider > span { background: var(--card); position: relative; z-index: 1; padding: 0 12px; }

/* ─── Impersonation banner ─── */
.impersonation-banner {
  background: rgba(245,158,11,0.12);
  border: 1px solid var(--warn);
  color: #fde68a;
}
.impersonation-banner a { margin-left: 8px; }
.card { max-width: 1400px; margin: 16px auto; padding: 20px 24px; background: var(--card); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 4px 16px rgba(0,0,0,0.2); }
h1 { margin:0 0 8px; } h2 { margin:0 0 12px; font-size: 18px; }
.badge { font-size: 12px; padding: 2px 8px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); vertical-align: middle; margin-left: 6px; }
.muted { color: var(--muted); font-size: 13px; }
.small { font-size: 12px; }
label { display:flex; flex-direction:column; gap:6px; font-weight: 600; font-size: 14px; }

input, select, button, textarea {
  padding: 8px 10px; border-radius: 6px; border: 1px solid var(--border);
  background: var(--bg); color: var(--fg); font-size: 14px; font-family: inherit;
}
input:focus, select:focus { outline: 2px solid var(--accent); border-color: var(--accent); }
button { background: var(--accent); color: var(--accent-ink); border: none; font-weight: 700; cursor: pointer; padding: 10px 18px; }
button:hover { filter: brightness(1.1); }

.ok   { background: rgba(34,197,94,0.10);  border-color: var(--ok);   color: #bbf7d0; }
.err  { background: rgba(239,68,68,0.10);  border-color: var(--err);  color: #fecaca; }
.warn { background: rgba(245,158,11,0.10); border-color: var(--warn); color: #fde68a; }

/* ---- week strip ---- */
.week-strip { padding: 14px 24px; }
.strip-row { display:flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.week-nav { display:flex; gap: 6px; align-items:center; flex-wrap: wrap; margin-bottom: 10px; }

/* Day/Week toggle */
.view-toggle {
  display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden;
  background: var(--sticky-bg);
}
.view-btn {
  padding: 6px 14px; font-size: 13px; font-weight: 600;
  background: transparent; color: var(--muted); border: none; border-radius: 0; cursor: pointer;
}
.view-btn:hover { color: var(--fg); }
.view-btn.active { background: var(--accent); color: var(--accent-ink); }

/* In Week view, hide the redundant day pills (date input remains for week-jumping) */
body.view-mode-week .day-pill { display: none; }
.dow-total { font-size: 10px; color: var(--accent); margin-top: 2px; }
body.view-mode-day .dow-total { display: none; }
.day-pill {
  display:flex; flex-direction: column; align-items:center; padding: 6px 14px;
  border-radius: 10px; text-decoration:none; color: var(--fg); border:1px solid var(--border);
  min-width: 64px; background: transparent; cursor: pointer; font-family: inherit; font-size: 13px;
}
.day-pill:hover { border-color: var(--accent); }
.day-pill .dow { font-size: 11px; color: var(--muted); }
.day-pill .dom { font-weight: 700; }
.day-pill.active { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.day-pill.active .dow { color: var(--accent-ink); }

/* ---- grid table ---- */
.grid-wrap { overflow-x: auto; border:1px solid var(--grid); border-radius: 8px; }
.time-grid {
  border-collapse: separate; border-spacing: 0; width: 100%;
  min-width: 720px; font-size: 13px;
}
.time-grid th, .time-grid td {
  border-right: 1px solid var(--grid); border-bottom: 1px solid var(--grid);
  padding: 6px 8px; text-align: center; vertical-align: middle;
}
.time-grid thead th { background: var(--sticky-bg); font-weight: 600; }
.time-grid .job-col { min-width: 160px; }
.time-grid .job-num { font-weight: 700; font-size: 14px; }
.time-grid .job-name { font-size: 12px; }
.time-grid .job-meta { font-size: 11px; }
.time-grid .cost-code-row, .time-grid .phase-row { background: var(--sticky-bg); padding: 4px 8px; }
.cost-code-select { width: 100%; font-size: 12px; padding: 4px 6px; }
.warn-pill { background: var(--warn); color: #422006; padding: 2px 6px; border-radius: 999px; font-size: 11px; }
.add-cc-btn {
  margin-top: 6px; padding: 4px 10px; font-size: 11px; font-weight: 600;
  background: transparent; color: var(--accent); border: 1px dashed var(--accent);
  border-radius: 6px; cursor: pointer;
}
.add-cc-btn:hover { background: rgba(220,38,38,0.1); }
.job-header { vertical-align: top; }
.job-header.split { background: rgba(220,38,38,0.05); }

/* ─── Plan the week panel ─── */
.lr-list { display: grid; gap: 14px; }
.lr-block {
  border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px;
  background: rgba(0,0,0,0.4);
}
.lr-block > header { display:flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 10px; }
.lr-job { font-weight: 700; font-size: 15px; }
.lr-subtitle { margin-left: 8px; }
.lr-meta { font-size: 12px; }

.cc-search { position: relative; }
.cc-search-input { width: 100%; padding: 8px 12px; }
.cc-search-results {
  position: absolute; top: 100%; left: 0; right: 0; margin: 4px 0 0;
  list-style: none; padding: 4px 0; background: var(--sticky-bg);
  border: 1px solid var(--border); border-radius: 8px; max-height: 280px; overflow-y: auto;
  z-index: 5; box-shadow: 0 8px 20px rgba(0,0,0,0.4);
}
.cc-result {
  padding: 8px 12px; cursor: pointer; display: grid;
  grid-template-columns: 80px 1fr auto; gap: 12px; align-items: center;
}
.cc-result:hover { background: rgba(220,38,38,0.10); }
.cc-result-empty { padding: 10px 12px; }
.cc-num { font-family: ui-monospace, monospace; font-size: 12px; color: var(--accent); }
.cc-desc { font-size: 13px; }
.cc-cust { font-size: 11px; }

.cc-selected {
  list-style: none; padding: 0; margin: 10px 0 0;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.cc-selected > li.muted { font-style: italic; padding: 4px 0; }
.cc-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 8px 4px 10px; background: rgba(220,38,38,0.10);
  border: 1px solid var(--accent); border-radius: 999px; font-size: 12px;
}
.cc-chip .cc-num { color: var(--accent); }
.cc-chip .cc-desc { color: var(--fg); }
.cc-remove {
  background: transparent; border: none; color: var(--muted); cursor: pointer;
  font-size: 16px; line-height: 1; padding: 0 4px;
}
.cc-remove:hover { color: var(--err); }

/* Compact cost code header in the grid */
.time-grid .cost-code-row .cc-num { font-size: 11px; }
.time-grid .cost-code-row .cc-desc-small { font-size: 12px; font-weight: 500; }

/* ─── Today's jobs strip ─── */
.today-jobs {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; margin: 14px 0 18px;
}
.today-jobs > .muted { width: 100%; margin-bottom: 4px; }
.job-card {
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto auto;
  column-gap: 10px; row-gap: 2px; align-items: center;
  text-align: left; min-width: 220px; max-width: 320px; padding: 10px 12px;
  background: rgba(220,38,38,0.05); border: 1px dashed var(--accent); color: var(--fg);
  border-radius: 10px; cursor: pointer; font-family: inherit;
}
.job-card:hover { background: rgba(220,38,38,0.12); }
.job-card:disabled { opacity: 0.5; cursor: not-allowed; border-style: solid; border-color: var(--border); background: transparent; }
.job-card .job-num { grid-column: 1 / 2; font-weight: 700; }
.job-card .job-name { grid-column: 2 / 3; font-size: 12px; }
.job-card .job-meta { grid-column: 1 / 3; font-size: 11px; }
.job-card .add-pill {
  grid-column: 1 / 3; margin-top: 4px; padding: 3px 8px; background: var(--accent);
  color: var(--accent-ink); border-radius: 999px; font-size: 11px; font-weight: 700; justify-self: start;
}

/* ─── In-grid header tweaks ─── */
.job-header-row { display:flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.cc-header { display:flex; justify-content: space-between; align-items: center; gap: 6px; }
.cc-header > div:first-child { text-align: left; }
.cc-header-actions { display:flex; gap: 2px; }
.icon-btn {
  background: transparent; border: 1px solid var(--border); color: var(--muted);
  width: 22px; height: 22px; line-height: 18px; padding: 0; border-radius: 6px;
  cursor: pointer; font-size: 14px;
}
.icon-btn:hover { color: var(--fg); border-color: var(--muted); }
.icon-btn.fill-btn:hover  { color: var(--accent); border-color: var(--accent); }
.icon-btn.remove-btn:hover { color: var(--err); border-color: var(--err); }

.add-cc-btn {
  width: 28px; height: 28px; padding: 0; line-height: 24px;
  font-weight: 700; font-size: 16px;
  background: transparent; color: var(--accent); border: 1px dashed var(--accent);
}
.add-cc-btn:hover { background: rgba(220,38,38,0.1); }

/* Off-job cells stay visually present but no input — prevents data entry mistakes */
.hours-cell.off-job { background: var(--off-job); }

/* Whole-shift validation: if the day total isn't 8/10/12/16, warn */
.warn-total { color: var(--warn) !important; }

/* ─── Crew totals panel ─── */
.crew-totals-title { margin: 22px 0 8px; font-size: 14px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.time-grid.crew-totals { font-size: 13px; min-width: 0; }
.time-grid.crew-totals th, .time-grid.crew-totals td { padding: 6px 10px; }
.time-grid.crew-totals .ct-emp { text-align: left; min-width: 180px; background: var(--sticky-bg); }
.time-grid.crew-totals .ct-grand { background: rgba(220,38,38,0.08); font-weight: 700; min-width: 70px; }
.time-grid.crew-totals tfoot td { background: var(--sticky-bg); border-top: 2px solid var(--accent); }

/* ─── Picker dialog ─── */
dialog {
  border: 1px solid var(--border); border-radius: 12px; background: var(--card); color: var(--fg);
  padding: 0; max-width: 640px; width: 90vw; max-height: 80vh;
  flex-direction: column;
}
dialog[open] { display: flex; }      /* show only when open — matches native behavior */
dialog::backdrop { background: rgba(0,0,0,0.6); }
dialog > header {
  display:flex; justify-content: space-between; align-items: flex-start;
  padding: 14px 18px; border-bottom: 1px solid var(--border);
}
dialog > header h3 { margin: 0; }
dialog > footer {
  display:flex; justify-content: flex-end; gap: 10px; padding: 12px 18px;
  border-top: 1px solid var(--border);
}
dialog .picker-body { padding: 14px 18px; overflow-y: auto; flex: 1; min-height: 100px; }
dialog .picker-actions { display:flex; justify-content: space-between; align-items: center; margin: 10px 0; }
dialog button.ghost { background: transparent; color: var(--muted); border: 1px solid var(--border); }
dialog button.ghost:hover { color: var(--fg); border-color: var(--muted); }

#cc-picker-search { width: 100%; padding: 10px 12px; }

.cc-picker-list { list-style: none; padding: 0; margin: 0; }
.cc-picker-list > li { border-bottom: 1px solid var(--border); }
.cc-picker-list > li:last-child { border-bottom: none; }
.cc-picker-list label {
  display: grid; grid-template-columns: 24px 80px 1fr auto; gap: 12px; align-items: center;
  padding: 8px 4px; cursor: pointer; font-weight: 400;
}
.cc-picker-list label:hover { background: var(--row-st); }
.cc-picker-list .cc-num { font-family: ui-monospace, monospace; font-size: 12px; color: var(--accent); }
.cc-picker-list .cc-desc { font-size: 13px; }
.cc-picker-list .cc-cust { font-size: 11px; }

/* Recently-used section in the picker */
.cc-picker-list .picker-section-header {
  padding: 10px 12px 4px; font-size: 11px; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.04em; background: var(--sticky-bg);
}
.cc-picker-list .picker-section-header:not(:first-child) { margin-top: 4px; border-top: 1px solid var(--border); }
.cc-picker-list .recent-item label { background: rgba(220,38,38,0.04); }
.recent-pill {
  display: inline-block; padding: 2px 7px; background: rgba(220,38,38,0.15);
  color: var(--accent); border-radius: 999px; font-size: 10px; font-weight: 700;
}

#fill-col .picker-body { display: grid; gap: 14px; }
#fill-col label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; }

.fill-col-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.fill-col-crew-header {
  display:flex; justify-content: space-between; align-items: center; gap: 10px;
  margin-bottom: 8px; flex-wrap: wrap;
}
.fill-col-quick { display:flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.fill-col-quick button.small { padding: 4px 10px; font-size: 12px; }
.fill-col-quick #fill-col-filter { padding: 4px 8px; font-size: 12px; min-width: 140px; }

.fill-col-list {
  list-style: none; padding: 0; margin: 0; max-height: 320px; overflow-y: auto;
  border: 1px solid var(--border); border-radius: 8px; background: var(--sticky-bg);
}
.fill-col-list > li { border-bottom: 1px solid var(--border); }
.fill-col-list > li:last-child { border-bottom: none; }
.fill-col-list label {
  display: grid; grid-template-columns: 24px 1.5fr 1.2fr auto auto; gap: 10px;
  align-items: center; padding: 8px 12px; cursor: pointer; font-weight: 400; font-size: 13px;
}
.fill-col-list label:hover { background: var(--row-st); }
.fill-col-list .emp-name-row { font-weight: 600; }
.fill-col-list .off-job-row label { color: var(--muted); }

/* Submit row layout */
.submit-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; flex-wrap: wrap; }
.submit-actions { display: flex; gap: 10px; align-items: center; }
button.ghost { background: transparent; color: var(--muted); border: 1px solid var(--border); font-weight: 500; }
button.ghost:hover { color: var(--fg); border-color: var(--accent); }

/* ─── Autosave status indicators ─── */
.autosave-status {
  display: inline-block; padding: 4px 10px; margin-top: 8px;
  border-radius: 6px; font-size: 12px; color: var(--muted);
}
.autosave-status.saving { color: var(--accent); }
.autosave-status.saved  { color: var(--ok); }
.autosave-status.error  { color: var(--err); }

.hours-cell.saving      { box-shadow: inset 0 -2px 0 var(--accent); }
.hours-cell.saved-flash { box-shadow: inset 0 -2px 0 var(--ok); transition: box-shadow 0.6s; }
.hours-cell.error       { box-shadow: inset 0 -2px 0 var(--err); background: rgba(239,68,68,0.08); }

/* Visual group divider when crew is grouped by their job-set */
.time-grid tr.group-start td.emp-name { border-top: 3px solid var(--accent); }
.time-grid tr.group-start td.sticky-col.rate-col { border-top: 3px solid var(--accent); }

/* ─── Week grid ─── */
.time-grid.week-grid .day-col { min-width: 70px; }
.time-grid.week-grid .day-col .dow { font-size: 11px; color: var(--muted); }
.time-grid.week-grid .day-col .dom { font-weight: 700; font-size: 13px; }
.time-grid.week-grid th.day-col-totals {
  background: var(--sticky-bg); padding: 4px 6px; font-size: 11px;
}
.time-grid.week-grid td.cc-cell {
  text-align: left; padding: 8px 12px; background: var(--sticky-bg); vertical-align: top;
}
.time-grid.week-grid td.cc-cell .cc-num { font-size: 11px; color: var(--accent); }
.time-grid.week-grid td.cc-cell .cc-desc-small { font-weight: 600; font-size: 13px; }
.time-grid.week-grid .week-row-total { color: var(--accent); font-weight: 700; }
/* Week view sticky-col chain — explicit widths so left: offsets are predictable.
   Replaces the broken adjacent-sibling rule which assumed cells were 180px each. */
.time-grid.week-grid .col-emp  { left: 0;     min-width: 180px; max-width: 180px; width: 180px; }
.time-grid.week-grid .col-cc   { left: 180px; min-width: 200px; max-width: 200px; width: 200px; }
.time-grid.week-grid .col-rate { left: 380px; min-width: 100px; max-width: 100px; width: 100px; }

.time-grid tbody td.emp-name { text-align: left; padding: 8px 12px; background: var(--sticky-bg); }
.time-grid tbody td.emp-name > div:first-child { font-weight: 600; }
.role-pill { display:inline-block; margin-top: 4px; padding: 1px 6px; font-size: 10px;
  border-radius: 999px; background: var(--accent); color: var(--accent-ink); }

.rate-col { font-size: 12px; min-width: 70px; text-align: left; padding-left: 12px; }
.rate-st { background: var(--row-st); }
.rate-ot { background: var(--row-ot); }
.rate-dt { background: var(--row-dt); }

.hours-cell { padding: 2px; }
.hours-cell input { width: 100%; padding: 8px 6px; text-align: center; border-radius: 0; border: none; background: transparent; color: var(--fg); font-size: 14px; }
.hours-cell input:focus { background: var(--accent); color: var(--accent-ink); outline: none; }
.hours-cell.off-job { background: var(--off-job); }
.hours-cell.off-job input { color: var(--muted); }

.totals-col { background: var(--sticky-bg); font-weight: 700; min-width: 60px; }
.row-total, .col-total, #grand-total { color: var(--accent); }
.grand-total { background: rgba(220,38,38,0.10); }

/* sticky first 2 columns so scrolling jobs horizontally keeps employee/rate visible */
.sticky-col { position: sticky; left: 0; background: var(--sticky-bg); z-index: 2; }
td.sticky-col + td.sticky-col, th.sticky-col + th.sticky-col { left: 160px; z-index: 2; }

.emp-first td { border-top: 2px solid var(--border); }

/* ---- submit row ---- */
.submit-row { display:flex; align-items:center; justify-content: space-between; margin-top: 14px; gap: 16px; flex-wrap: wrap; }
.dry-run { display:flex; align-items: center; gap: 8px; color: var(--muted); font-weight: 500; }
.dry-run input { width: auto; }

/* ---- generic table (existing entries, dry run) ---- */
table { width:100%; border-collapse: collapse; font-size: 13px; }
table th, table td { padding: 8px 10px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
table th { color: var(--muted); font-weight: 600; }
code { font-size: 12px; color: var(--muted); }

/* ---- EWA labor modal: multi-day pills + crew grid ---- */
#labor-day-pills { display:flex; flex-wrap:wrap; gap:6px; }
#labor-day-pills .day-pill {
  display:inline-flex; flex-direction:row; align-items:center; gap:6px;
  padding:6px 12px; border:1px solid var(--border); border-radius:999px;
  cursor:pointer; user-select:none; min-width:0; font-size:13px;
  background:transparent; color:var(--fg);
}
#labor-day-pills .day-pill:hover { border-color: var(--accent); }
#labor-day-pills .day-pill input { margin:0; accent-color: var(--accent); }
#labor-day-pills .day-pill:has(input:checked) {
  background: var(--accent); color: var(--accent-ink); border-color: var(--accent);
}

.crew-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap:6px; }
.crew-pill {
  display:flex; align-items:center; gap:8px; padding:8px 10px;
  border:1px solid var(--border); border-radius:8px; cursor:pointer;
  font-size:13px; background:transparent;
}
.crew-pill:hover { border-color: var(--accent); }
.crew-pill input { margin:0; accent-color: var(--accent); }
.crew-pill:has(input:checked) { border-color: var(--accent); background: rgba(220,38,38,0.06); }

/* ---- Jobs list grid ---- */
.job-grid {
  display:grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px; margin-top: 12px;
}
.job-card {
  display: block; padding: 14px 16px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--card); color: var(--fg); text-decoration: none;
  transition: border-color .15s, transform .15s, background .15s;
}
.job-card * { color: inherit; }
.job-card:hover { border-color: var(--accent); transform: translateY(-1px); }
.job-card-head { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom: 4px; }
.job-card h3 { margin: 0; font-size: 15px; }
.job-meta { display:grid; grid-template-columns: max-content 1fr; gap: 2px 12px; margin: 8px 0 0; font-size: 13px; }
.job-meta dt { color: var(--muted); }
.job-meta dd { margin: 0; }

/* ---- Project detail (Salesforce-style: main + side rail) ---- */
.job-page {
  display: grid; grid-template-columns: minmax(0, 1fr) 340px;
  gap: 16px; align-items: start;
  max-width: 1400px; margin: 16px auto; padding: 0 24px;
}
@media (max-width: 980px) { .job-page { grid-template-columns: 1fr; padding: 0 12px; } }
.job-main, .job-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
/* Inside the project page, cards are positioned by the grid — kill the
   centering margin/max-width from the global .card rule so each column
   fills its track edge-to-edge. */
.job-page .card { max-width: none; margin: 0; box-shadow: 0 2px 8px rgba(0,0,0,0.18); }

.kv-grid {
  display: grid;
  grid-template-columns: minmax(140px, max-content) minmax(0, 1fr) minmax(140px, max-content) minmax(0, 1fr);
  gap: 8px 16px; margin: 6px 0 0; font-size: 13px;
}
@media (max-width: 720px) { .kv-grid { grid-template-columns: minmax(140px, max-content) minmax(0, 1fr); } }
.kv-grid dt { color: var(--muted); font-weight: 500; align-self: center; }
.kv-grid dd { margin: 0; align-self: center; word-break: break-word; }
.kv-grid dd.full { grid-column: 2 / -1; }

.multiline { white-space: pre-wrap; font-size: 13px; line-height: 1.45; margin: 4px 0 12px; }
.kv-section { margin: 14px 0 4px; font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; }

.map-wrap {
  position: relative; width: 100%; aspect-ratio: 1 / 1; min-height: 320px;
  border-radius: 8px; overflow: hidden; border: 1px solid var(--border);
  background: var(--bg); margin-bottom: 10px;
}
/* Wide variant for the map when it sits in the main column instead of the rail. */
.map-wrap-wide { aspect-ratio: 16 / 9; min-height: 380px; }
.map-wrap iframe,
.map-wrap #facility-map { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.map-fallback {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 12px; pointer-events: none;
}
.hard-hat-marker { background: transparent; border: 0; }
.hard-hat-marker svg { display: block; }
/* Tame Leaflet's popup so it matches the dark theme. */
.leaflet-popup-content-wrapper, .leaflet-popup-tip {
  background: var(--card); color: var(--fg); border: 1px solid var(--border);
}
.leaflet-popup-content { font-size: 12px; margin: 8px 10px; }
.leaflet-control-attribution { font-size: 10px; }

.related-list { list-style: none; padding: 0; margin: 0 0 10px; }
.related-list li { padding: 10px 0; border-bottom: 1px solid var(--border); }
.related-list li:last-child { border-bottom: 0; }
.related-list .related-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; text-decoration: none; color: var(--fg);
}
.related-list .related-row:hover strong { color: var(--accent); }
.related-list .related-meta { display: block; margin-top: 4px; }

.btn-link {
  display:inline-block; padding: 8px 14px; border-radius: 8px;
  border: 1px solid var(--border); background: transparent; color: var(--fg);
  text-decoration: none; font-size: 13px; cursor: pointer;
}
.btn-link:hover { border-color: var(--accent); }
.btn-link.primary-link { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }

/* ---- Project page header + top-level tabs ---- */
.project-header {
  max-width: 1400px; margin: 16px auto 0; padding: 0 24px;
}
.project-header h1 { margin: 4px 0 2px; }
.page-tabs {
  display: flex; gap: 2px; margin-top: 14px;
  border-bottom: 1px solid var(--border);
}
.page-tab {
  display: inline-block; padding: 10px 18px; text-decoration: none;
  color: var(--muted); font-size: 14px; font-weight: 500;
  border-bottom: 3px solid transparent; margin-bottom: -1px;
}
.page-tab:hover { color: var(--fg); }
.page-tab.active { color: var(--fg); border-bottom-color: var(--accent); font-weight: 600; }

/* ---- Tabs ---- */
.card-head-stack { flex-wrap: wrap; row-gap: 8px; }
.week-form-inline { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.week-form-inline label { display: flex; align-items: center; gap: 6px; }
.week-form-inline input[type="date"] { padding: 4px 6px; }
.tabs {
  display: flex; gap: 4px; border-bottom: 1px solid var(--border);
  margin: 4px 0 14px; flex-wrap: wrap;
}
.tab {
  background: transparent; border: 0; color: var(--muted);
  padding: 8px 12px; cursor: pointer; font-family: inherit; font-size: 13px;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  display: inline-flex; align-items: center; gap: 6px;
}
.tab:hover { color: var(--fg); }
.tab.active { color: var(--fg); border-bottom-color: var(--accent); font-weight: 600; }
.tab-badge {
  background: var(--bg); color: var(--fg); border: 1px solid var(--border);
  padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 500;
}
.tab.active .tab-badge { border-color: var(--accent); color: var(--accent); }
.tab-panel { animation: fadeIn 0.15s ease-out; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.dash-table .r { text-align: right; }

/* ---- Date inputs: make the calendar icon visible on the dark theme ---- */
html { color-scheme: dark; }
input[type="date"],
input[type="datetime-local"],
input[type="time"],
input[type="month"],
input[type="week"] {
  color-scheme: dark !important;
  color: var(--fg) !important;
  background: var(--bg) !important;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 8px;
}
input[type="date"]:focus,
input[type="datetime-local"]:focus,
input[type="time"]:focus { border-color: var(--accent); outline: none; }

/* Chrome/Edge calendar icon — replace with our own white SVG so it's
   readable on the dark theme regardless of how the browser would render
   the default indicator under color-scheme: dark. */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator,
input[type="week"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 1;
  filter: none;
  width: 18px; height: 18px;
  padding: 0; margin-left: 6px;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px 16px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='18' rx='2' ry='2'/><line x1='16' y1='2' x2='16' y2='6'/><line x1='8' y1='2' x2='8' y2='6'/><line x1='3' y1='10' x2='21' y2='10'/></svg>");
}
input[type="date"]::-webkit-calendar-picker-indicator:hover,
input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23dc2626' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='18' rx='2' ry='2'/><line x1='16' y1='2' x2='16' y2='6'/><line x1='8' y1='2' x2='8' y2='6'/><line x1='3' y1='10' x2='21' y2='10'/></svg>");
}

/* Corner version stamp — pinned to the bottom-right of every page,
   injected by the small fetch in _bar.html. Kept tiny + muted so the
   app reads as a finished product; click-through opens /about for the
   full release notes. The PACT footer (also fixed) sits centered, so
   we offset right so the two never collide. */
.version-stamp {
  position: fixed; right: 14px; bottom: 12px;
  z-index: 5;
  font-size: 10px; font-weight: 600; letter-spacing: 0.05em;
  color: var(--muted); text-decoration: none;
  padding: 3px 8px; border-radius: 999px;
  background: rgba(0,0,0,0.4); border: 1px solid rgba(255,255,255,0.06);
  backdrop-filter: blur(4px);
  opacity: 0.6;
  transition: opacity .15s, color .15s, border-color .15s;
}
.version-stamp:hover { opacity: 1; color: var(--fg); border-color: rgba(255,255,255,0.18); }

/* Changelog body on /about — typography for the markdown the page renders.
   Keeps headings, lists, and inline code consistent with the rest of the
   admin pages without needing a third-party markdown library. */
.changelog-body { line-height: 1.55; }
.changelog-body h2 {
  margin: 22px 0 8px; padding-bottom: 4px;
  border-bottom: 1px solid var(--border);
  font-size: 16px;
}
.changelog-body h3 { margin: 16px 0 6px; font-size: 13px; color: var(--accent); text-transform: uppercase; letter-spacing: 0.04em; }
.changelog-body h4 { margin: 12px 0 4px; font-size: 12px; color: var(--muted); }
.changelog-body ul { margin: 6px 0 12px; padding-left: 22px; }
.changelog-body li { margin: 3px 0; }
.changelog-body p  { margin: 6px 0; }
.changelog-body hr { border: 0; border-top: 1px solid var(--border); margin: 18px 0; }
.changelog-body code { background: var(--bg); padding: 1px 5px; border-radius: 3px; font-size: 12px; }