:root {
  --bg: #0f1419;
  --panel: #1a2129;
  --panel-2: #222c36;
  --border: #2e3a47;
  --text: #e6edf3;
  --muted: #8b98a5;
  --accent: #4ea1ff;
  --green: #2ea043;
  --yellow: #d8a200;
  --red: #e5484d;
  --high: #e5484d;
  --medium: #d8a200;
  --low: #2ea043;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

header.topbar {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 10px 18px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 10;
}
.brand { font-weight: 700; font-size: 16px; color: #fff; }
.shop-tabs { display: flex; gap: 4px; padding: 3px; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; }
.shop-tab {
  padding: 5px 14px;
  border-radius: 6px;
  color: var(--muted);
  font-weight: 600;
  font-size: 13px;
}
.shop-tab:hover { text-decoration: none; color: var(--text); }
.shop-tab.active { background: var(--accent); color: #04121f; }
nav.tabs { display: flex; gap: 6px; }
nav.tabs a {
  padding: 6px 12px;
  border-radius: 6px;
  color: var(--muted);
}
nav.tabs a.active { background: var(--panel-2); color: #fff; }
.topbar .spacer { flex: 1; }
.meta { color: var(--muted); font-size: 12px; }
.sysclock { color: var(--text); font-size: 12px; font-variant-numeric: tabular-nums; background: var(--panel-2); border: 1px solid var(--border); border-radius: 6px; padding: 4px 8px; white-space: nowrap; }

.controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
}
.controls label { color: var(--muted); margin-right: 4px; }
select, input[type=date], input[type=text], input[type=number] {
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 13px;
}
button, .btn {
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 13px;
  cursor: pointer;
}
button:hover, .btn:hover { background: #2c3845; }
button.primary { background: var(--accent); border-color: var(--accent); color: #04121f; font-weight: 600; }
button.green { background: var(--green); border-color: var(--green); color: #03140a; }
button.danger { background: transparent; border-color: var(--red); color: var(--red); }
.inline { display: inline; }

main { padding: 16px 18px 60px; }

/* Lanes */
.lanes {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
@media (max-width: 1400px) { .lanes { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 800px) { .lanes { grid-template-columns: 1fr; } }
.lane {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  min-height: 120px;
}
.lane h2 {
  font-size: 13px;
  margin: 0;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.lane h2 .count {
  background: var(--panel-2);
  border-radius: 10px;
  padding: 1px 8px;
  font-size: 12px;
  color: var(--muted);
}
.lane .lane-body { padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.lane .empty { color: var(--muted); font-size: 12px; padding: 6px 2px; }

/* Job card */
.card {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 9px 10px;
}
.card.urgent { border-left: 3px solid var(--red); }
.card.due { border-left: 3px solid var(--yellow); }
.card .row1 { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.card .wo { font-weight: 600; }
.card .time { color: var(--muted); font-size: 12px; }
.card .name { margin: 2px 0; }
.card .vehicle { color: var(--muted); font-size: 12px; }
.card .note { font-size: 12px; color: #c8d3de; margin-top: 4px; max-height: 48px; overflow: hidden; }
.card .badges { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.card .stage { font-size: 11px; color: var(--muted); margin-top: 4px; }
.card .services { font-size: 12px; color: #d7e6c8; margin-top: 4px; max-height: 48px; overflow: hidden; line-height: 1.35; }
.card form { display: inline; }
.card .actions { margin-top: 7px; display: flex; flex-wrap: wrap; gap: 4px; }
.card .actions button { padding: 3px 8px; font-size: 12px; }

.badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 1px 7px;
  border-radius: 10px;
  border: 1px solid var(--border);
}
.badge.high { background: rgba(229,72,77,.15); color: #ff8a8d; border-color: var(--high); }
.badge.medium { background: rgba(216,162,0,.15); color: #ffd24a; border-color: var(--medium); }
.badge.low { background: rgba(46,160,67,.15); color: #6ee7a0; border-color: var(--low); }
.badge.customer { background: rgba(78,161,255,.12); color: #9ecbff; border-color: var(--accent); }
.badge.internal { background: rgba(155,120,255,.15); color: #c4b1ff; border-color: #7c5cff; }
.badge.employee { background: rgba(255,170,90,.15); color: #ffc488; border-color: #d98a3a; }
.badge.suspect { background: rgba(229,72,77,.18); color: #ff9a9d; border-color: var(--red); }
.badge.ovr { background: rgba(255,255,255,.08); color: var(--muted); }
.badge.snoozed { background: rgba(139,152,165,.15); color: var(--muted); }

/* --- Missing-parts (Parts Check) feature --- */
.badge.parts-flag { background: rgba(229,72,77,.20); color: #ff9a9d; border-color: var(--red); font-weight: 600; text-decoration: none; }
a.badge.parts-flag:hover { background: rgba(229,72,77,.34); }
.badge.parts-ok { background: rgba(46,160,67,.15); color: #6ee7a0; border-color: var(--low); }

/* --- Quick Estimate builder (job detail) --- */
.estimate-builder { border-left: 3px solid var(--accent); }
.eb-add { margin: 8px 0; }
.eb-op { background: rgba(255,255,255,.03); border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px; margin: 8px 0; }
.eb-op-head { display: flex; align-items: center; gap: 8px; }
.eb-lines { margin: 6px 0 0; }
.eb-lines td { padding: 2px 6px; border: none; }
.eb-qty { color: var(--muted); width: 44px; }
.eb-pn { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; color: #9ecbff; white-space: nowrap; }
.eb-share { width: 44px; text-align: right; font-size: 12px; }
.eb-actions { margin-top: 10px; }
.eb-copy { width: 100%; margin-top: 8px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px;
  background: var(--panel, #11151c); color: var(--text, #cdd6e0); border: 1px solid var(--border); border-radius: 8px; padding: 8px; }
.eb-empty { padding: 6px 0; }
/* --- call-back ribbon (site-wide) --- */
.callbar { border-bottom: 1px solid var(--border); background: rgba(255,255,255,.03); }
.callbar > summary { padding: 7px 16px; cursor: pointer; list-style: none; user-select: none; display: flex; align-items: center; gap: 10px; }
.callbar > summary::-webkit-details-marker { display: none; }
.callbar > summary::before { content: '▸'; color: var(--muted); }
.callbar[open] > summary::before { content: '▾'; }
.callbar-red { background: rgba(229,72,77,.12); }
.callbar-yellow { background: rgba(216,162,0,.12); }
.cb-hint { font-size: 12px; }
.cb-pill { border-radius: 10px; padding: 1px 9px; font-size: 12px; font-weight: 600; }
.cb-tag { border-radius: 6px; padding: 0 6px; font-size: 11px; font-weight: 600; margin-left: 4px; }
.cb-red { background: rgba(229,72,77,.22); color: #ff9a9d; }
.cb-yellow { background: rgba(216,162,0,.22); color: #ffd24a; }
.callbar-body { max-height: 46vh; overflow: auto; }
.cb-table { margin: 0; }
.cb-table tr.cb-past td { background: rgba(229,72,77,.08); }
.cb-table tr.cb-soon td { background: rgba(216,162,0,.08); }
/* sortable headers + call status cells (invoices) */
th.sortable a { color: inherit; text-decoration: none; cursor: pointer; white-space: nowrap; }
th.sortable a:hover { text-decoration: underline; }
.sort-ar { color: var(--accent); }
td.cb-past { background: rgba(229,72,77,.10); }
td.cb-soon { background: rgba(216,162,0,.10); }
/* --- call/delivery controls (job detail) --- */
.cd-grid { display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-start; }
.cd-item { display: flex; flex-direction: column; gap: 4px; }
.cd-item label { font-size: 12px; color: var(--muted); }
.cd-row { display: flex; gap: 6px; align-items: center; }
.deliv-input { font-size: 12px; }
.eb-off { opacity: .45; }
.eb-toggle { background: none; border: none; cursor: pointer; font-size: 16px; padding: 0 4px; }
.eb-linetotal { margin-left: auto; font-weight: 700; }
.eb-scope { font-size: 11px; }
.qf { font-size: 11px; color: var(--muted); }
.qf input { display: block; margin-top: 2px; }
.qedit summary { cursor: pointer; color: var(--muted); }
.badge.ai { background: rgba(0,200,255,.14); color: #7fe3ff; border-color: #16b6e0; }
.eb-note { font-size: 11px; }
.eb-ai-note { font-size: 11px; margin: 2px 0 0; padding-left: 2px; border-left: 2px solid #16b6e0; padding-left: 7px; }
.eb-price { text-align: right; white-space: nowrap; }
.invsales-pill { background: rgba(46,160,67,.16); color: #8ce0a6; border: 1px solid var(--low); border-radius: 6px; padding: 4px 12px; font-size: 14px; }
.invsales-pill strong { font-size: 16px; }
tr.done-row { background: rgba(46,160,67,.10); }
tr.done-row .inv-done-amt { color: #8ce0a6; font-weight: 700; }
.done-cell { text-align: center; }
.complete-form { display: inline; }
.complete-btn { background: rgba(46,160,67,.16); color: #8ce0a6; border: 1px solid var(--low); border-radius: 6px; padding: 3px 9px; cursor: pointer; font-weight: 600; }
.complete-btn:hover { background: rgba(46,160,67,.30); }
.completed-btn { background: var(--low, #2ea043); color: #fff; border: 1px solid var(--low); border-radius: 6px; padding: 3px 9px; cursor: pointer; font-weight: 600; }
.plan-chip[draggable="true"] > .chip-sum { cursor: grab; }
.plan-chip.dragging { opacity: .5; }
.plan-day.drop-target { outline: 2px dashed var(--accent, #4ea1ff); outline-offset: -2px; background: rgba(78,161,255,.07); }
.plan-drag-hint { margin: 4px 0 0; font-size: 11px; }
.parts-btn { cursor: pointer; display: inline-block; background: rgba(216,162,0,.16); color: #ffd24a; border: 1px solid var(--medium); border-radius: 6px; padding: 3px 9px; font-weight: 600; list-style: none; }
.parts-btn::-webkit-details-marker { display: none; }
.parts-pop { display: inline-block; position: relative; }
.parts-pop[open] > .parts-form { position: absolute; z-index: 20; top: 110%; left: 0; background: var(--panel, #1b1f24); border: 1px solid var(--medium); border-radius: 6px; padding: 8px; white-space: nowrap; box-shadow: 0 4px 14px rgba(0,0,0,.4); }
.parts-form label { font-size: 11px; color: var(--muted); }
.parts-badge { background: rgba(216,162,0,.16); color: #ffd24a; border: 1px solid var(--medium); border-radius: 6px; padding: 2px 7px; font-size: 12px; font-weight: 600; }
.badge.parts-wait { background: rgba(216,162,0,.16); color: #ffd24a; border-color: var(--medium); }
.parts-wait-section h2 { color: #ffd24a; }
.canned-codes { display: flex; flex-wrap: wrap; gap: 6px; }
.canned-card { border: 1px solid var(--border); border-radius: 8px; margin: 6px 0; background: var(--panel-2); }
.canned-sum { cursor: pointer; padding: 7px 10px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.canned-sum::-webkit-details-marker { display: none; }
.canned-sum::before { content: "\25B8"; color: var(--muted); font-size: 10px; }
.canned-card[open] > .canned-sum::before { content: "\25BE"; }
.canned-meta { margin-left: auto; font-size: 12px; }
.canned-body { padding: 4px 12px 10px; }
td.num, th.num { text-align: right; white-space: nowrap; }
.canned-make { border: 1px solid var(--border); border-radius: 8px; margin: 8px 0; }
.canned-make-sum { cursor: pointer; padding: 10px 12px; font-weight: 700; font-size: 15px; }
.canned-make-sum::-webkit-details-marker { display: none; }
.canned-make-sum::before { content: "\25B8 "; color: var(--muted); }
.canned-make[open] > .canned-make-sum::before { content: "\25BE "; }
.canned-make-body { padding: 2px 10px 8px; }
.canned-group { margin: 4px 0; border-left: 2px solid var(--border); }
.canned-group-sum { cursor: pointer; padding: 5px 10px; font-weight: 600; }
.canned-group-sum::-webkit-details-marker { display: none; }
.canned-group-sum::before { content: "\25B8 "; color: var(--muted); font-size: 10px; }
.canned-group[open] > .canned-group-sum::before { content: "\25BE "; }
.canned-group-body { padding: 2px 10px 6px; }
.cashbar-actual strong { color: #6ee7a0; }
.eb-totals { margin: 12px 0 6px; max-width: 320px; }
.eb-totals > div { display: flex; justify-content: space-between; padding: 3px 2px; }
.eb-totals .eb-grand { border-top: 2px solid var(--border); margin-top: 4px; padding-top: 6px; font-size: 16px; }
.eb-totals .eb-grand strong { color: #6ee7a0; }
.eb-taxrate { width: 46px; text-align: right; }
.eb-symptom { margin: 10px 0; padding-top: 8px; border-top: 1px dashed var(--border); }
.eb-aiwork { margin-top: 6px; }
.svc-nest { margin-top: 6px; }
.svc-group { margin: 8px 0; }
.svc-head { font-weight: 600; padding: 6px 8px; background: rgba(255,255,255,.04); border-left: 3px solid var(--accent); border-radius: 4px; }
.nested-parts { margin: 4px 0 4px 22px; width: calc(100% - 22px); }
.nested-parts td, .nested-parts th { padding: 3px 8px; }
.svc-noparts { margin: 2px 0 6px 22px; font-size: 12px; }
.parts-verify { border-left: 3px solid var(--red); }
.parts-verify .pv-h { margin: 12px 0 4px; font-size: 13px; }
.pv-list, .ps-list { list-style: none; margin: 0; padding: 0; }
.pv-item, .ps-sugg { padding: 7px 10px; border-radius: 8px; margin: 5px 0; background: rgba(255,255,255,.03);
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pv-missing { background: rgba(229,72,77,.08); }
.pv-consider { background: rgba(216,162,0,.07); }
.pv-name, .ps-item { font-weight: 600; }
.pv-why, .ps-why { flex-basis: 100%; font-size: 12px; }
.ps-pn { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; background: rgba(78,161,255,.12);
  color: #9ecbff; padding: 1px 7px; border-radius: 6px; }
.pv-x button, .ps-x button { background: none; border: 1px solid var(--border); color: var(--muted);
  border-radius: 6px; padding: 2px 8px; cursor: pointer; font-size: 12px; }
.pv-x button:hover, .ps-x button:hover { color: #fff; border-color: var(--muted); }
.pv-off, .ps-off { opacity: .6; }
.ps-job { background: var(--panel, rgba(255,255,255,.02)); border: 1px solid var(--border); border-radius: 10px;
  padding: 10px 14px; margin: 10px 0; }
.ps-job-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.ps-wo { font-weight: 700; }
.ps-veh { color: var(--muted); }
.ps-dismissed { margin-top: 6px; }
.ps-dot { font-size: 11px; }
/* hidden / not-relevant bottom drawer (minimize tab) */
.ps-drawer-spacer { height: 56px; }
.ps-drawer { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: var(--panel, #11151c); border-top: 1px solid var(--border); box-shadow: 0 -4px 16px rgba(0,0,0,.3); }
.ps-drawer > summary { padding: 9px 16px; cursor: pointer; font-weight: 600; list-style: none; user-select: none; }
.ps-drawer > summary::-webkit-details-marker { display: none; }
.ps-drawer > summary::before { content: '▸ '; }
.ps-drawer[open] > summary::before { content: '▾ '; }
.ps-drawer[open] > summary { border-bottom: 1px solid var(--border); }
.ps-hidden-count { background: rgba(255,255,255,.12); border-radius: 10px; padding: 1px 8px; margin-left: 4px; }
.ps-hidden-list { max-height: 42vh; overflow: auto; margin: 0; padding: 8px 16px; }
.ps-hidden-list .ps-sugg { gap: 6px; }
.badge.diag { background: rgba(0,200,255,.16); color: #7fe3ff; border-color: #16b6e0; }
/* Authorization badges */
.badge.auth-ok { background: rgba(46,160,67,.18); color: #8ce0a6; border-color: var(--low); font-weight: 700; }
.badge.auth-inspect { background: rgba(0,200,255,.14); color: #7fe3ff; border-color: #16b6e0; }
.badge.auth-await { background: rgba(216,162,0,.16); color: #ffd24a; border-color: var(--medium); }
.badge.auth-hold { background: rgba(229,72,77,.18); color: #ff9a9d; border-color: var(--red); font-weight: 700; }
.badge.auth-sched { background: rgba(255,255,255,.06); color: var(--muted); }
.hold-section h2, .wf-hold-section h2 { color: #ffd24a; }
.auth-cell { white-space: nowrap; }
.auth-cell label { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; cursor: pointer; color: #8ce0a6; }
.auth-cell input[type=checkbox] { width: 15px; height: 15px; cursor: pointer; accent-color: var(--low); }
.badge.hours { background: rgba(46,160,67,.16); color: #8ce0a6; border-color: var(--low); }
.badge.pending { background: rgba(216,162,0,.14); color: #ffd24a; border-color: var(--medium); }
.badge.parts { background: rgba(255,255,255,.06); color: #c8d3de; }

/* Estimate-detail section on the job page */
.svc-list { margin: 6px 0 0; padding-left: 18px; color: #d7e6c8; font-size: 13px; }
.svc-list li { margin: 2px 0; }

/* Diagnostic intake lane (full width, top of board) */
.diag-lane { margin-bottom: 14px; border-color: #16b6e0; }
.diag-lane > h2 { border-bottom-color: #16b6e0; color: #7fe3ff; }
.diag-body {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 8px;
}
.diag-foot {
  display: flex; flex-wrap: wrap; gap: 14px;
  padding: 8px 12px; border-top: 1px solid var(--border); font-size: 12px;
}
.diag-foot .over { color: var(--red); font-weight: 600; }

/* Technician recommendations on cards */
.recs { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; font-size: 12px; }
.recs-label { color: var(--muted); }
.rec {
  background: rgba(78,161,255,.10);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1px 7px;
  cursor: help;
}
.rec-diag { border-color: #16b6e0; color: #7fe3ff; background: rgba(0,200,255,.12); }
.rec-cap { border-color: var(--yellow); color: #ffd24a; }

/* Weekly */
.week-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.day-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
  border-top: 5px solid var(--border);
}
.day-card.Green { border-top-color: var(--green); }
.day-card.Yellow { border-top-color: var(--yellow); }
.day-card.Red { border-top-color: var(--red); }
.day-card h3 { margin: 0 0 8px; font-size: 15px; }
.day-card .status { font-weight: 700; }
.day-card .status.Green { color: var(--green); }
.day-card .status.Yellow { color: var(--yellow); }
.day-card .status.Red { color: var(--red); }
.day-card dl { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; margin: 8px 0 0; }
.day-card dt { color: var(--muted); }
.day-card dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.loadbar { height: 6px; background: var(--panel-2); border-radius: 4px; margin-top: 8px; overflow: hidden; }
.loadbar > span { display: block; height: 100%; }
.loadbar > span.Green { background: var(--green); }
.loadbar > span.Yellow { background: var(--yellow); }
.loadbar > span.Red { background: var(--red); }

/* Tables / detail */
table.data { width: 100%; border-collapse: collapse; }
table.data th, table.data td { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--border); font-size: 13px; }
table.data th { color: var(--muted); font-weight: 600; }

.section { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 16px; margin-bottom: 16px; }
.section h2 { margin-top: 0; font-size: 15px; }
.kv { display: grid; grid-template-columns: 180px 1fr; gap: 6px 14px; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; }
.reason { color: var(--muted); font-style: italic; }
.detail-note { white-space: pre-wrap; background: var(--panel-2); padding: 10px; border-radius: 8px; border: 1px solid var(--border); }
.banner { padding: 8px 12px; border-radius: 8px; margin-bottom: 12px; font-weight: 600; }
.banner.red { background: rgba(229,72,77,.15); color: #ff9a9d; }
.banner.yellow { background: rgba(216,162,0,.15); color: #ffd24a; }
.banner.green { background: rgba(46,160,67,.12); color: #6ee7a0; }
.muted { color: var(--muted); }
.actionbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* Technician setup */
.tech-card {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 10px;
}
.tech-card.needs-setup { border-left: 3px solid var(--yellow); }
.tech-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; gap: 10px; }
.tech-name { font-weight: 600; font-size: 14px; }
details.tech-card > summary {
  cursor: pointer;
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  list-style: none;
}
details.tech-card > summary::-webkit-details-marker { display: none; }
details.tech-card > summary::before { content: "▸"; color: var(--muted); margin-right: 4px; }
details.tech-card[open] > summary::before { content: "▾"; }
details.tech-card > form { margin-top: 12px; }
.tf-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(120px, 1fr));
  gap: 10px;
  margin: 8px 0 12px;
}
.tf-grid label, .tf-name { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
.tf-name { margin-bottom: 6px; max-width: 360px; }
.tf-grid .tf-wide { grid-column: 1 / -1; }
.tf-grid .tf-check { flex-direction: row; align-items: center; gap: 6px; color: var(--text); align-self: end; }
.tf-grid input[type=text], .tf-grid input[type=number], .tf-grid select, .tf-name input { width: 100%; }
@media (max-width: 700px) { .tf-grid { grid-template-columns: 1fr 1fr; } }
.tf-current {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; margin-bottom: 6px;
  background: rgba(46,160,67,.08);
  border: 1px solid var(--border); border-radius: 6px;
  font-size: 13px;
}
.tech-card.not-current { opacity: 0.75; border-left: 3px solid var(--muted); }
.tf-caps {
  background: rgba(78,161,255,.06);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 10px;
  margin-bottom: 6px;
  display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center;
}
.tf-caps-title { width: 100%; font-size: 13px; font-weight: 600; }
.tf-caps > label { display: flex; align-items: center; gap: 5px; font-size: 13px; }
.tf-caps .tf-diagcap { flex-direction: column; align-items: flex-start; gap: 2px; font-size: 12px; color: var(--muted); }
.tf-caps .tf-diagcap input { width: 70px; }

/* Proposed workflow */
.wf-lanes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}
.wf-lane.over { border-color: var(--red); }
.wf-lane .loadbar { margin: 0 10px; }
.wf-item {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  padding: 8px 10px;
}
.wf-item.risk { border-left-color: var(--red); }
.wf-time { font-weight: 600; font-size: 12px; color: #9ecbff; margin-bottom: 3px; }
.risk-text { color: #ff9a9d; font-weight: 600; }
.due-text { color: #ffd24a; font-weight: 600; }
.note-inline { color: var(--muted); font-size: 12px; }
tr.risk-row td { background: rgba(229,72,77,.08); }
.wf-overflow { padding: 8px 10px; border-top: 1px solid var(--border); font-size: 12px; }
.wf-overflow .over { color: var(--red); font-weight: 600; margin-bottom: 4px; }
.wf-spill { color: var(--muted); padding: 2px 0; }

/* Insights */
.metric-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-bottom: 16px; }
.metric { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 16px; text-align: center; }
.metric-val { font-size: 30px; font-weight: 700; color: #fff; }
.metric-label { color: var(--muted); margin-top: 4px; }
.suggestions { margin: 0; padding-left: 0; list-style: none; }
.suggestions li { padding: 8px 10px; background: rgba(216,162,0,.10); border: 1px solid var(--border); border-radius: 8px; margin-bottom: 6px; }

/* 5-day plan */
.plan-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
@media (max-width: 1300px) { .plan-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px) { .plan-grid { grid-template-columns: 1fr; } }
.plan-day { background: var(--panel); border: 1px solid var(--border); border-top: 5px solid var(--border); border-radius: 10px; padding: 10px; }
.plan-day.Green { border-top-color: var(--green); }
.plan-day.Yellow { border-top-color: var(--yellow); }
.plan-day.Red { border-top-color: var(--red); }
.plan-day h2 { font-size: 14px; margin: 0 0 8px; display: flex; align-items: center; gap: 6px; }
.plan-day h2 .status { font-size: 11px; padding: 1px 7px; border-radius: 10px; }
.plan-day h2 .day-sales { margin-left: auto; font-size: 14px; font-weight: 800; color: #6ee7a0; }
.plan-day h2 .status.Green { color: var(--green); } .plan-day h2 .status.Yellow { color: var(--yellow); } .plan-day h2 .status.Red { color: var(--red); }
.cap-form { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-bottom: 8px; }
.cap-form label { display: flex; flex-direction: column; font-size: 11px; color: var(--muted); }
.cap-form input[type=number] { width: 64px; }
.cap-form input.overridden { border-color: var(--accent); }
.cap-form .cap-note { flex: 1; min-width: 80px; font-size: 12px; }
.plan-stats { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; margin: 8px 0; font-size: 12px; }
.plan-stats dt { color: var(--muted); } .plan-stats dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.plan-stats .done-val { color: #6ee7a0; } .plan-stats .carry-val { color: #ff9a9d; }
.plan-jobs { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.jobs-label { font-size: 11px; font-weight: 600; color: var(--muted); margin-top: 4px; }
.jobs-label.carry-label { color: #ff9a9d; }
.carry-note { font-size: 11px; color: #ffb38a; padding: 5px 0 2px; border-top: 1px dashed var(--border); margin-top: 4px; }
.skipped { font-size: 11px; color: var(--muted); margin-bottom: 6px; padding: 4px 6px; background: rgba(139,152,165,.08); border-radius: 6px; }
.skipped .linkbtn { color: var(--muted); font-size: 11px; }
.skipped .linkbtn:hover { color: var(--accent); }
.reopen-btn { background: var(--panel-2); border: 1px solid var(--green); color: #6ee7a0; border-radius: 10px; padding: 1px 8px; font-size: 11px; cursor: pointer; }
.reopen-btn:hover { background: rgba(46,160,67,.15); }
/* Plan chip = condensed collapsible tile (summary one line, expands on click) */
.plan-chip { background: var(--panel-2); border: 1px solid var(--border); border-left: 3px solid var(--green);
  border-radius: 7px; margin-bottom: 4px; }
.plan-chip.pinned { border-left-color: var(--accent); }
.plan-chip.overdue { border-left-color: var(--red); }
.carry-label ~ .plan-chip { border-left-color: var(--red); }
.chip-sum { display: flex; align-items: center; gap: 6px; font-size: 12px; padding: 5px 8px; cursor: pointer;
  list-style: none; }
.chip-sum::-webkit-details-marker { display: none; }
.chip-sum::before { content: "\25B8"; color: var(--muted); font-size: 10px; }   /* ▸ */
.plan-chip[open] > .chip-sum::before { content: "\25BE"; }                        /* ▾ */
.chip-sum .chip-wo { font-weight: 700; color: var(--accent); }
.chip-sum-name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chip-load { color: var(--muted); margin-left: auto; white-space: nowrap; }
.chip-body { padding: 0 8px 7px; }
.chip-badges { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; margin-bottom: 4px; }
.chip-move { margin-top: 0; }
.chip-move select { width: 100%; font-size: 11px; padding: 2px 4px; }
.leftover-jobs { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; }
.sched-form { gap: 8px; }
.day-chk { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; }
.plan-day.Closed { border-top-color: var(--muted); }
.plan-day.closed { opacity: 0.72; background: repeating-linear-gradient(45deg, var(--panel), var(--panel) 10px, rgba(255,255,255,.02) 10px, rgba(255,255,255,.02) 20px); }
.plan-day h2 .status.Closed { color: var(--muted); }
.avail-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.avail-row button { padding: 3px 8px; font-size: 12px; }
.closed-note { font-size: 12px; color: var(--muted); padding: 6px 0; }
.cap-source { font-size: 11px; color: var(--muted); margin: 2px 0 4px; }
.linkbtn { background: none; border: none; color: var(--accent); padding: 0; font-size: 11px; cursor: pointer; }
.linkbtn:hover { text-decoration: underline; }
.crew { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.crew-tech button { background: rgba(46,160,67,.14); border: 1px solid var(--border); border-radius: 10px; padding: 2px 7px; font-size: 11px; cursor: pointer; color: var(--text); }
.crew-tech button .x { color: var(--muted); }
.crew-tech.off button { background: rgba(139,152,165,.12); color: var(--muted); text-decoration: line-through; }
.crew-tech.vac { background: rgba(216,162,0,.14); border: 1px solid var(--border); border-radius: 10px; padding: 2px 7px; font-size: 11px; color: #ffd24a; }
.tf-workdays { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
.wd-row { display: flex; flex-wrap: wrap; gap: 8px; }
.wd-chk { display: inline-flex; align-items: center; gap: 3px; color: var(--text); }

/* Per-shop weekly schedule editor (collapsible) */
.sched-collapse { background: var(--panel); border: 1px solid var(--border); border-radius: 10px;
  padding: 8px 12px; margin-bottom: 12px; }
.sched-collapse > summary { cursor: pointer; list-style: none; font-weight: 700; font-size: 13px; user-select: none; }
.sched-collapse > summary::-webkit-details-marker { display: none; }
.sched-collapse > summary::before { content: "\25B8 "; color: var(--muted); }   /* ▸ */
.sched-collapse[open] > summary::before { content: "\25BE "; }                    /* ▾ */
.sched-body { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.sched-editor { flex-direction: column; align-items: flex-start; gap: 6px; }
.sched-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.sched-day { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px;
  border: 1px solid var(--border); border-radius: 8px; background: rgba(46,160,67,.08); }
.sched-day.closed { background: rgba(139,152,165,.08); opacity: .7; }
.sched-day .day-chk { font-weight: 600; min-width: 46px; }
.sched-day input[type=time] { font-size: 11px; padding: 1px 3px; }
.sched-save { font-size: 11px; padding: 1px 7px; cursor: pointer; }

/* Invoices list — compact so the inline master-edit controls fit on screen */
table.invoices { width: 100%; table-layout: auto; }
table.invoices td, table.invoices th { font-size: 11px; padding: 4px 5px; white-space: normal; vertical-align: middle; }
table.invoices th { white-space: normal; }                 /* headers may wrap to 2 lines */
table.invoices td.mcell { white-space: nowrap; }           /* edit controls stay on one line */
/* truncate the wide free-text columns so they can't blow the table past the screen */
table.invoices td, table.invoices th { padding: 4px 4px; }
table.invoices td.tcell { max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
table.invoices input[type=datetime-local] { width: 78px; font-size: 10px; padding: 1px 2px; }
table.invoices .minisel { max-width: 68px; font-size: 11px; padding: 1px 2px; }
table.invoices .minihrs { width: 38px; }
table.invoices .mininote { width: 56px; }
/* keep the Action cell tight so it never gets clipped at the right edge */
table.invoices .actions-cell { gap: 3px; }
table.invoices .actions-cell button, table.invoices .actions-cell .btn.mini { font-size: 11px; padding: 1px 5px; }
table.invoices .exc-cell { text-align: center; }
table.invoices input[type=checkbox] { width: 15px; height: 15px; cursor: pointer; }
tr.excluded-row td { opacity: 0.5; text-decoration: line-through; }
tr.excluded-row .exc-cell { opacity: 1; text-decoration: none; }
tr.excluded-row .exc-cell input { accent-color: var(--red); }

/* ---- Interactive workflow board ---- */
.wf-hint { font-size: 12px; margin: 4px 0 12px; }
.wf-board { display: grid; gap: 12px; align-items: start; }
.wf-board.lanes { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.wf-board.single { grid-template-columns: minmax(320px, 720px); }
.wf-col { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 10px; }
.wf-col.over { border-color: var(--red); }
.wf-col.unassigned { background: rgba(216,162,0,.06); border-style: dashed; }
.wf-col-head { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; margin-bottom: 6px; }
.wf-col-name { font-weight: 700; font-size: 14px; }
.wf-col-count { font-size: 11px; color: var(--muted); white-space: nowrap; }
.wf-col-body { display: flex; flex-direction: column; gap: 8px; min-height: 60px; border-radius: 8px; padding: 2px; }
.wf-col-body.drop-target { background: rgba(78,161,255,.10); outline: 2px dashed var(--accent); outline-offset: -2px; }

.wf-card { background: var(--bg); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 8px; padding: 8px 9px; cursor: grab; }
.wf-card:active { cursor: grabbing; }
.wf-card.dragging { opacity: .45; }
.wf-card.inprog { border-left-color: #16b6e0; background: rgba(0,200,255,.06); }
.wf-card.risk { border-left-color: var(--red); }
.wf-card-head { display: flex; align-items: center; gap: 6px; }
.wf-card-head .grip { color: var(--muted); cursor: grab; font-size: 13px; }
.wf-card-head .wo { font-weight: 700; }
.wf-card-head .wf-hours { font-size: 11px; color: var(--low); font-weight: 600; }
.wf-hours-form { display: inline-flex; align-items: center; gap: 1px; font-size: 11px; color: var(--low); }
.wf-hours-form .hours-input, .chip-load .hours-input { width: 42px; padding: 1px 3px; font-size: 11px; text-align: right;
  background: var(--panel); color: var(--low); border: 1px solid var(--border); border-radius: 4px; font-weight: 600; }
.wf-hours-form .hours-input:focus, .chip-load .hours-input:focus { outline: 1px solid var(--accent); }
.wf-hours-form .hours-input.ovr, .chip-load .hours-input.ovr { color: #ffd24a; border-color: var(--medium); background: rgba(216,162,0,.12); }
/* Keep the editable hours compact inside the plan chip summary. */
.chip-load { display: inline-flex; align-items: center; gap: 2px; }
.chip-load form.inline { display: inline-flex; align-items: center; gap: 1px; }
.chip-load .hours-input::-webkit-outer-spin-button,
.chip-load .hours-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input.overridden { border-color: var(--medium) !important; background: rgba(216,162,0,.12); }
.wf-card-head .wf-time { margin-left: auto; font-size: 11px; color: var(--muted); }
.wf-card-name { font-size: 13px; margin-top: 2px; }
.wf-card-veh { font-size: 11px; color: var(--muted); }
.wf-card .services { font-size: 11px; color: #d7e6c8; margin-top: 3px; max-height: 32px; overflow: hidden; }
.wf-card .note { font-size: 11px; color: #c8d3de; margin-top: 3px; max-height: 30px; overflow: hidden; }
.wf-card-meta { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-top: 5px; }
.wf-card-actions { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 7px; align-items: center; }
.wf-card-actions button { padding: 1px 6px; font-size: 11px; cursor: pointer; }
.wf-card-actions select { font-size: 11px; padding: 1px 2px; max-width: 96px; }
.wf-card-actions .reorder-btns { display: inline-flex; gap: 2px; }
.badge.inprog { background: rgba(0,200,255,.16); color: #7fe3ff; border-color: #16b6e0; }
.wf-empty { font-size: 12px; color: var(--muted); padding: 14px 6px; text-align: center; border: 1px dashed var(--border); border-radius: 6px; }
.wf-card.carryover { border-left-style: dashed; }
/* Collapsible "won't be completed today" panel below a tech's day */
.wf-overflow { margin-top: 8px; border: 1px dashed var(--medium); border-radius: 8px; background: rgba(216,162,0,.06); }
.wf-overflow > summary { cursor: pointer; list-style: none; padding: 7px 9px; font-size: 12px; font-weight: 600; color: #ffd24a; user-select: none; }
.wf-overflow > summary::-webkit-details-marker { display: none; }
.wf-overflow > summary::before { content: "▸ "; }
.wf-overflow[open] > summary::before { content: "▾ "; }
.wf-overflow > summary:hover { background: rgba(216,162,0,.12); border-radius: 8px; }
.wf-overflow-body { display: flex; flex-direction: column; gap: 8px; padding: 4px 7px 8px; }
.wf-overflow-body .wf-card.carryover { opacity: 1; }
.wf-hours-row { gap: 6px; }
.wf-hours-row input[type=time] { font-size: 12px; padding: 2px 4px; }

/* 5-Day Plan: technician on/off filter */
.tech-filter-row { gap: 6px; flex-wrap: wrap; }
.tech-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; font-size: 12px;
  border: 1px solid var(--low); border-radius: 14px; background: rgba(46,160,67,.12); color: #8ce0a6;
  text-decoration: none; cursor: pointer; }
.tech-chip:hover { background: rgba(46,160,67,.22); }
.tech-chip.off { background: rgba(139,152,165,.10); border-color: var(--border); color: var(--muted);
  text-decoration: line-through; }
.plan-chip .chip-tech { font-size: 11px; color: #9ecbff; margin-top: 1px; }
/* Per-technician grouping inside each plan day */
.tech-group { margin-bottom: 8px; }
.tech-group-head { font-size: 11px; font-weight: 700; color: #9ecbff; padding: 3px 0 2px;
  border-bottom: 1px solid var(--border); margin-bottom: 4px; }
.tech-group.unassigned .tech-group-head { color: #ffd24a; }
.chip-work { font-size: 11px; margin: 2px 0 6px; }
.chip-work-label { color: var(--muted); font-weight: 600; margin-bottom: 2px; }
.chip-work-list { margin: 0; padding-left: 16px; color: #d7e6c8; }
.chip-work-list li { margin: 1px 0; }
.chip-work-note { color: #c8d3de; }
.chip-controls { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.chip-controls select { font-size: 11px; padding: 1px 2px; max-width: 100%; }
.chip-assign select { color: #9ecbff; }

/* Site-wide cash bar (under the header on every screen) */
.cashbar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 7px 16px; background: rgba(46,160,67,.10); border-bottom: 1px solid var(--low);
  font-size: 13px; color: #cfe9d6; }
.cashbar > strong { color: #8ce0a6; }
.cashbar-item strong { color: #6ee7a0; font-size: 15px; }
.cashbar-note { color: var(--muted); font-size: 11px; margin-left: auto; }

/* Weekly cash projection */
.cash-banner { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  background: rgba(46,160,67,.12); color: #8ce0a6; border: 1px solid var(--low); }
.cash-banner .cash-big { font-size: 20px; font-weight: 800; color: #6ee7a0; }
.day-card dd.cash { color: #6ee7a0; font-weight: 700; }
.day-card dd.cash-cum { color: #8ce0a6; }
.day-card.by-friday { box-shadow: inset 3px 0 0 var(--low); }

.wf-done .wf-done-list { display: flex; flex-direction: column; gap: 4px; }
.wf-done-item { display: flex; gap: 10px; align-items: center; font-size: 13px; padding: 3px 0; border-bottom: 1px solid var(--border); }
.wf-done-item a { font-weight: 600; }

/* ---- Customer intake inbox ---- */
.nav-count { display:inline-block; min-width:16px; padding:0 5px; margin-left:2px;
  background:var(--low,#ff5d5d); color:#fff; border-radius:9px; font-size:11px;
  font-weight:700; text-align:center; line-height:16px; vertical-align:middle; }
nav.seg { display:inline-flex; gap:2px; }
nav.seg a { padding:4px 10px; font-size:13px; color:var(--muted); border:1px solid var(--border);
  border-radius:6px; text-decoration:none; }
nav.seg a.on { background:var(--panel-2); color:#fff; border-color:var(--panel-2); }
.intake-card { border-left:3px solid var(--border); }
.intake-card.unmatched { border-left-color:var(--med,#ffc44d); }
.intake-card.matched { border-left-color:var(--ok,#4ea1ff); }
.ic-head { display:flex; justify-content:space-between; align-items:baseline; flex-wrap:wrap; gap:8px; }
.ic-name { font-size:17px; font-weight:700; }
.ic-phone { margin-left:10px; font-size:14px; }
.ic-form { font-weight:600; }
.ic-match { margin:8px 0; display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:13px; }
table.ic-responses { width:100%; margin:6px 0; }
table.ic-responses td { padding:4px 8px; border-bottom:1px solid var(--border); vertical-align:top; }
.ic-q { color:var(--muted); width:48%; }
.ic-a { font-weight:600; }
.ic-actions { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:10px; }
.ic-actions .btn, a.btn { display:inline-block; padding:5px 11px; background:var(--panel-2);
  color:#fff; border-radius:6px; text-decoration:none; font-size:13px; font-weight:600; }
.link-btn { background:none; border:none; color:var(--muted); cursor:pointer;
  text-decoration:underline; font-size:13px; padding:2px 4px; }

/* ---- Dispatch board ---- */
.seg-link { padding:3px 9px; font-size:13px; color:var(--muted); border:1px solid var(--border);
  border-radius:6px; text-decoration:none; margin-left:3px; }
.seg-link.on { background:var(--panel-2); color:#fff; border-color:var(--panel-2); }
.dash-row { display:flex; gap:12px; margin:10px 0; }
.kpi { flex:1; background:var(--panel); border:1px solid var(--border); border-radius:10px; padding:14px 16px; }
.kpi.ready { border-left:3px solid var(--ok,#4ea1ff); }
.kpi.held  { border-left:3px solid var(--med,#ffc44d); }
.kpi-n { font-size:24px; font-weight:800; }
.kpi-l { color:var(--muted); font-size:13px; }
.lane-head { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px; margin-bottom:6px; }
.lane-name { font-size:16px; font-weight:700; }
.lane-top { font-size:12px; text-transform:capitalize; }
.lane-load { display:flex; align-items:center; gap:8px; }
.loadbar { width:120px; height:8px; background:var(--panel-2); border-radius:5px; overflow:hidden; }
.loadbar > span { display:block; height:100%; background:var(--ok,#4ea1ff); }
.loadbar > span.over { background:var(--low,#ff5d5d); }
.over-row { background:rgba(255,93,93,.06); }
.alts { font-size:11px; color:var(--muted); margin-top:2px; }
.small { font-size:12px; }
.nowrap { white-space:nowrap; }

.link-btn.danger { color: var(--low,#ff5d5d); }

/* ---- 5-Day Plan: lane Tiles + Gantt views ---- */
.view-toggle { display:inline-flex; gap:2px; }
.badge.daypart { background:rgba(127,119,221,.28); color:#cecbf6; border:1px solid rgba(127,119,221,.55); }
.badge.daypart.finish { background:rgba(93,225,171,.25); color:#9fe1cb; border-color:rgba(93,225,171,.5); }
.lane-grid .tech-group-head { font-size:12px; }
.gantt { display:grid; grid-auto-rows:30px; gap:4px; align-items:stretch; margin-top:10px; overflow-x:auto; }
.g-dh { font-size:12px; color:var(--muted); display:flex; align-items:baseline; gap:5px; }
.g-dh b { color:var(--text); font-weight:600; }
.g-tn { font-size:12px; font-weight:600; color:var(--text); display:flex; align-items:center; gap:6px;
  border-right:1px solid var(--border); padding-right:8px; white-space:nowrap; overflow:hidden; }
.g-tn.unassigned { color:var(--muted); font-weight:500; }
.g-bar { display:flex; flex-direction:column; justify-content:center; overflow:hidden; border-radius:6px;
  padding:2px 8px; font-size:11.5px; line-height:1.15; text-decoration:none; color:var(--text);
  background:rgba(78,161,255,.16); border:1px solid rgba(78,161,255,.5); }
.g-bar:hover { background:rgba(78,161,255,.26); }
.g-bar-name { font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.g-bar-h { color:var(--muted); font-size:11px; }
.g-bar.g-unfin { border-style:dashed; }
.g-bar.g-unassigned { background:rgba(139,152,165,.14); border-color:rgba(139,152,165,.45); }

.view-toggle { display:inline-flex; align-items:center; gap:3px; }
.view-toggle .seg-link { font-size:13px; padding:4px 12px; }
.view-toggle .seg-link.on { background:var(--accent); color:#06243b; border-color:var(--accent); font-weight:600; }

.daypart-edit { display:inline-flex; align-items:center; gap:1px; vertical-align:middle; }
.dayhrs-input { width:40px; padding:0 2px; margin:0 1px; font-size:11px; text-align:right;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); border-radius:4px; color:inherit; }
.badge.daypart.set { background:rgba(255,196,77,.26); color:#ffd98a; border:1px solid rgba(255,196,77,.55); }
.daypart-edit .linkbtn { font-size:12px; padding:0 2px; }

label.daypart { cursor:pointer; }
.dh-panel { display:none; }
.dh-toggle:checked ~ .dh-panel { display:inline-flex; align-items:center; gap:2px; margin-left:3px; }

/* per-day hours expandable box (Tiles view, spanning jobs only) */
.dh-box { margin:0 0 8px; font-size:12px; }
.dh-box > summary { cursor:pointer; color:var(--accent); padding:3px 2px; list-style:none; user-select:none; }
.dh-box > summary::-webkit-details-marker { display:none; }
.dh-box > summary::before { content:'\25B8\00a0'; }
.dh-box[open] > summary::before { content:'\25BE\00a0'; }
.dh-box-body { display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:5px 0 5px 14px; }
.dh-box-body label { font-size:12px; color:var(--muted); }
.dh-box-body .dayhrs-input { width:58px; text-align:center; }

/* make the per-day hours field clearly an editable box (spanning jobs only) */
.daypart .dayhrs-input { width:44px; padding:1px 2px; margin:0 2px; font-size:11px; text-align:center;
  color:var(--text); background:var(--bg); border:1px solid var(--accent); border-radius:4px; }
.daypart-edit form.inline { display:inline; }
.dh-revert { font-size:12px; padding:0 2px; }

/* expanded-chip "span days" purple button + time setting */
.span-ctl { display:inline-block; margin-top:4px; }
.span-ctl > summary { list-style:none; cursor:pointer; display:inline-block; font-size:12px;
  padding:3px 11px; border-radius:6px; background:#7f77dd; color:#fff; border:1px solid #534ab7; user-select:none; }
.span-ctl > summary::-webkit-details-marker { display:none; }
.span-ctl > summary::before { content:'\25B8\00a0'; }
.span-ctl[open] > summary::before { content:'\25BE\00a0'; }
.span-ctl[open] > summary { background:#534ab7; }
.span-body { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:6px; font-size:12px; }
.span-body label { color:var(--text); }
.span-input { width:48px; }

/* Phase 3: drag-to-reassign drop highlights */
.tech-group.lane-drop { border:1px dashed transparent; border-radius:8px; padding:2px; transition:none; }
.tech-group.lane-drop.drop-target { border-color:var(--accent); background:rgba(78,161,255,.12); }
.g-tn.lane-drop.drop-target { background:rgba(78,161,255,.20); outline:1px dashed var(--accent); outline-offset:-2px; }
.plan-chip.dragging, .g-bar.dragging { opacity:.45; }
.g-bar { cursor:grab; }
.plan-chip[data-wo] > summary { cursor:grab; }

.drag-grip { cursor:grab; color:var(--muted); font-size:13px; line-height:1; padding:0 4px 0 0; user-select:none; }
.drag-grip:hover { color:var(--accent); }
.drag-grip:active { cursor:grabbing; }

.drag-ghost { position:fixed; z-index:9999; pointer-events:none; background:var(--accent); color:#06243b;
  font-size:12px; font-weight:600; padding:3px 9px; border-radius:6px; box-shadow:0 3px 10px rgba(0,0,0,.45); }
body.drag-active { cursor:grabbing; }
body.drag-active, body.drag-active * { user-select:none !important; }

/* grip is the drag handle (native DnD) — make it obvious + reset the tile cursor */
.drag-grip { cursor:grab; color:var(--muted); font-size:15px; line-height:1; padding:1px 5px 1px 1px; user-select:none; border-radius:4px; }
.drag-grip:hover { color:var(--accent); background:rgba(78,161,255,.14); }
.drag-grip:active { cursor:grabbing; }
.plan-chip[data-wo] > summary { cursor:pointer; }
.plan-chip.dragging { opacity:.5; }

/* draggable tile wrapper (a plain div — native drag works on it, unlike <details>) */
.tile-wrap { display:block; }
.tile-wrap.dragging { opacity:.5; }
.plan-chip[data-wo] > summary { cursor:grab; }
.plan-chip[data-wo] > summary:active { cursor:grabbing; }

/* external drag handle (outside the <details>, so it isn't swallowed) */
.tile-wrap { display:flex; align-items:stretch; gap:4px; }
.tile-wrap > details { flex:1 1 auto; min-width:0; }
.tile-wrap.dragging { opacity:.45; }
.tile-handle { flex:0 0 auto; display:flex; align-items:center; justify-content:center;
  cursor:grab; color:var(--muted); font-size:15px; line-height:1; padding:0 6px;
  border-radius:6px; background:rgba(255,255,255,.05); user-select:none; }
.tile-handle:hover { color:var(--accent); background:rgba(78,161,255,.18); }
.tile-handle:active { cursor:grabbing; }
.plan-chip[data-wo] > summary { cursor:pointer; user-select:none; }

/* "Update data" button + dropdown panel (header) */
.update-wrap { position: relative; display: inline-block; }
.update-panel[hidden] { display: none; }   /* collapse by default; the explicit display below must not win over [hidden] */
.update-panel {
  position: absolute; right: 0; top: calc(100% + 8px);
  width: 290px; padding: 12px 14px; z-index: 30;
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 10px; box-shadow: 0 10px 28px rgba(0,0,0,.45);
  display: flex; flex-direction: column; gap: 8px;
}
.update-panel .upd-title { font-size: 13px; color: var(--muted); margin-bottom: 2px; }
.update-panel label { display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }
.update-panel .upd-actions { display: flex; gap: 8px; margin-top: 6px; }
.update-panel .upd-note { font-size: 11px; color: var(--muted); line-height: 1.35; }
.upd-status { font-size: 13px; padding: 6px 8px; border-radius: 6px; background: rgba(255,255,255,.05); }
.upd-status.ok   { background: rgba(50,180,90,.16);  color: #79e09a; }
.upd-status.err  { background: rgba(216,70,70,.16);  color: #ff8a8a; }
.upd-status.warn { background: rgba(216,162,0,.16);  color: #ffd24a; }

/* Invoices master-edit row — compact inline controls */
table.invoices td.mcell { white-space: nowrap; vertical-align: middle; }
.minisel { font-size: 12px; padding: 2px 4px; border-radius: 5px;
  background: var(--panel); color: var(--fg); border: 1px solid var(--border); }
.minihrs { width: 52px; font-size: 12px; padding: 2px 4px; border-radius: 5px;
  background: var(--panel); color: var(--fg); border: 1px solid var(--border); }
.mininote { width: 96px; font-size: 12px; padding: 2px 5px; border-radius: 5px;
  background: var(--panel); color: var(--fg); border: 1px solid var(--border); }
.minisel.overridden, .minihrs.overridden { border-color: var(--accent); color: var(--accent); font-weight: 600; }
.authchk { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.actions-cell { display: flex; gap: 4px; align-items: center; flex-wrap: nowrap; }
.actions-cell form { display: inline; }
.actions-cell button, .actions-cell .btn.mini {
  font-size: 12px; padding: 2px 7px; line-height: 1.4; border-radius: 5px; }
.btn.mini { text-decoration: none; }