:root {
  --bg: #0b0d10;
  --bg-deck: #101318;
  --panel: #161a20;
  --panel-2: #1c212a;
  --panel-3: #23293380;
  --line: #2a313d;
  --line-soft: #1f242d;
  --text: #e8ecf1;
  --text-dim: #93a0b0;
  --text-faint: #5c6675;
  --accent: #ff8a1e;
  --accent-2: #ffb648;
  --gold: #f2c14e;
  --blue: #4fa3ff;
  --green: #3ecf8e;
  --purple: #c77dff;
  --red: #ff5c6c;
  --radius: 10px;
  --shadow: 0 6px 24px rgba(0,0,0,.45);
  font-size: 15px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

input[type="date"],
input[type="time"] {
  color-scheme: dark;
  padding-right: 26px !important;
  background-repeat: no-repeat !important;
  background-position: right 6px center !important;
  background-size: 15px 15px !important;
}
input[type="date"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff8a1e' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cline x1='16' y1='3' x2='16' y2='7'/%3E%3Cline x1='8' y1='3' x2='8' y2='7'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E") !important;
}
input[type="time"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff8a1e' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpolyline points='12 7 12 12 15.5 15.5'/%3E%3C/svg%3E") !important;
}
input[type="date"],
input[type="time"] { position: relative; }
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
  opacity: 0;
  cursor: pointer;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
}
html,
body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Arial, sans-serif;
  background-image:
    radial-gradient(circle at 15% 0%, #1a2230 0%, transparent 45%),
    repeating-linear-gradient(0deg, #ffffff05 0px, #ffffff05 1px, transparent 1px, transparent 42px),
    repeating-linear-gradient(90deg, #ffffff05 0px, #ffffff05 1px, transparent 1px, transparent 42px);
  background-attachment: fixed;
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #333c48; border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: #454f5e; }

button { font-family: inherit; cursor: pointer; }
input,
select { font-family: inherit; }

.topbar {
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 18px;
  background: linear-gradient(180deg, var(--panel), var(--bg-deck));
  border-bottom: 1px solid var(--line);
  position: relative;
  z-index: 50;
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand-mark {
  height: 44px; width: auto;
  display: block;
}
.brand-title { font-weight: 700; letter-spacing: 1.5px; font-size: 14px; }
.brand-sub { font-size: 11.5px; color: var(--text-dim); letter-spacing: .5px; }
.topbar-actions { display: flex; gap: 10px; align-items: center; }

.btn {
  border: 1px solid var(--line);
  background: var(--panel-2);
  color: var(--text);
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all .12s ease;
}
.btn:hover { border-color: #3a4250; background: #232a34; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:disabled { opacity: .4; cursor: not-allowed; transform: none; }
a.btn { text-decoration: none; }
.btn[hidden] { display: none; }
.btn-ghost { background: transparent; }
.btn-accent {
  background: linear-gradient(180deg, var(--accent-2), var(--accent));
  color: #201000;
  border: none;
  box-shadow: 0 2px 10px #ff8a1e40;
}
.btn-accent:hover { filter: brightness(1.08); }
.btn-icon {
  width: 26px; height: 26px; border-radius: 6px;
  border: 1px solid var(--line); background: var(--panel-2); color: var(--text);
  font-size: 16px; line-height: 1; display: flex; align-items: center; justify-content: center;
}
.btn-icon:hover { background: #262d38; }
.ico { font-size: 13px; }

.menu-wrap { position: relative; }
.menu {
  position: absolute; top: 44px; right: 0; width: 260px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: var(--shadow); padding: 8px; display: none; flex-direction: column; gap: 2px;
  z-index: 100;
}
.menu.open { display: flex; }
.menu-section { font-size: 10.5px; letter-spacing: 1px; color: var(--text-faint); padding: 8px 8px 2px; text-transform: uppercase; }
.menu-item {
  background: transparent; border: none; color: var(--text); text-align: left;
  padding: 9px 8px; border-radius: 6px; font-size: 13px; display: block; width: 100%;
}
.menu-item:hover { background: var(--panel-2); }
.menu-item.danger { color: var(--red); }
.file-item { cursor: pointer; }
.menu-hint { display: block; font-size: 11px; color: var(--text-dim); margin-top: 2px; }

.app-shell {
  --rail-left: clamp(190px, 14vw, 260px);
  /* --rail-right-open is set inline when the user drags the divider */
  --rail-right: var(--rail-right-open, clamp(300px, 27vw, 520px));
  position: relative;
  display: grid;
  grid-template-columns: var(--rail-left) minmax(0, 1fr) var(--rail-right);
  height: calc(100vh - 58px);
  transition: grid-template-columns .2s ease;
}
.app-shell.jobs-collapsed { --rail-left: 34px; }
.app-shell.shelf-collapsed { --rail-right: 34px; }
.rail {
  background: var(--panel);
  border-right: 1px solid var(--line);
  overflow-y: auto;
  padding: 14px;
}
.rail-shelf { border-right: none; border-left: 1px solid var(--line); }
.rail-head {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12px; letter-spacing: 1.5px; color: var(--text-dim); margin-bottom: 10px; font-weight: 700;
}

/* The status filter on the Jobs bar, pushed over beside the + button. */
.rail-jobs-status {
  margin-left: auto; margin-right: 6px; padding: 1px 4px; font-size: 10.5px;
  min-width: 0; max-width: 130px; letter-spacing: normal; font-weight: 400;
}
@media print { .rail-jobs-status { display: none !important; } }

.job-list { display: flex; flex-direction: column; gap: 8px; }
.job-card {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: 8px;
  padding: 10px 12px;
  cursor: pointer;
  transition: all .12s ease;
}
.job-card:hover { background: #232a34; }
.job-card[draggable="true"] { cursor: grab; }
.job-card[draggable="true"]:active { cursor: grabbing; }
.job-card.active { background: #262111; border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold) inset; }
/* The places — the office, the shop, the plant — sit under the jobs with a
   heading, and their cards carry only a name. */
.job-list-head { font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--text-faint); font-weight: 800; padding: 10px 4px 4px; }
.job-card.place .job-card-name { font-weight: 700; }
/* On a place, the deck header keeps the name and the shift controls and
   puts away what only a job has. */
body.place-job .deck-meta .meta-field, body.place-job #jobSite, body.place-job #jobStatus, body.place-job #jobDivision,
body.place-job #btnEditJob, body.place-job #btnSyncThisJob { display: none !important; }
.job-card-name { font-weight: 700; font-size: 13.5px; margin-bottom: 3px; }
.job-card-meta { font-size: 11px; color: var(--text-dim); display: flex; justify-content: space-between; }
.job-card-status { display: inline-block; margin-top: 6px; font-size: 10px; padding: 2px 7px; border-radius: 10px; letter-spacing: .5px; text-transform: uppercase; }
.status-planned { background: #2a3140; color: #9db4d8; }
.status-active { background: #1c3a2c; color: var(--green); }
.status-completed { background: #2d2d2d; color: var(--text-faint); }

.deck-wrap { display: flex; flex-direction: column; overflow: hidden; }
.deck-header {
  padding: 14px 20px;
  border-bottom: 1px solid var(--line);
  display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
  background: var(--bg-deck);
}
.deck-title-block { display: flex; flex-direction: column; gap: 8px; flex: 1; }
.job-title-input {
  background: transparent; border: none; color: var(--text);
  font-size: 22px; font-weight: 800; letter-spacing: .3px; padding: 2px 0; outline: none;
  border-bottom: 2px solid transparent;
}
.job-title-input:focus { border-bottom-color: var(--accent); }
.job-title-input::placeholder { color: var(--text-faint); font-weight: 600; }
.deck-meta { display: flex; gap: 14px; align-items: center; }
.meta-field { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-dim); }
.meta-field input,
.meta-text,
#jobStatus,
#jobDivision {
  background: var(--panel-2); border: 1px solid var(--line); color: var(--text);
  border-radius: 6px; padding: 5px 8px; font-size: 12.5px;
}
.meta-text { width: 180px; }


.deck {
  flex: 1;
  overflow-x: auto;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  gap: 18px;
  align-items: flex-start;
  background-image: repeating-linear-gradient(90deg, transparent, transparent 338px, #ffffff08 338px, #ffffff08 340px);
}
.deck-empty {
  margin: auto; text-align: center; color: var(--text-faint); max-width: 320px;
  display: flex; flex-direction: column; align-items: center; gap: 10px; font-size: 13.5px;
}
.deck-empty-icon { font-size: 40px; opacity: .5; }

.shift-card {
  width: 320px;
  flex: 0 0 auto;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}


.set-builder-used {
  margin: 4px 12px 12px;
  display: flex; flex-wrap: wrap; gap: 4px;
}
.shift-head {
  padding: 10px 12px 8px;
  border-bottom: 1px solid var(--line-soft);
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
}
.shift-label-row { display: flex; align-items: center; gap: 6px; }
.shift-label-input {
  background: transparent; border: none; color: var(--text); font-weight: 700; font-size: 14px;
  width: 100%; padding: 2px 0; outline: none; border-bottom: 1px dashed transparent;
}
.daynight-mini {
  flex: 0 0 auto; background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 6px; width: 26px; height: 26px; font-size: 13px; line-height: 1;
}
.daynight-mini:hover { border-color: #454f5e; }
.daynight-toggle { display: flex; gap: 6px; }
.daynight-btn {
  flex: 1; background: var(--panel-2); border: 1px solid var(--line); color: var(--text-dim);
  border-radius: 7px; padding: 8px 0; font-size: 12.5px; cursor: pointer;
}
.daynight-btn.active { border-color: var(--accent); color: var(--text); background: #2a1d0f; }


.shift-label-input:focus { border-bottom-color: var(--accent); }
.shift-time-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-top: 6px;
}
.shift-time-row input {
  background: var(--panel-2); border: 1px solid var(--line); color: var(--text-dim);
  border-radius: 5px; padding: 4px 5px; font-size: 11.5px; width: 100%; min-width: 0;
}
.shift-actions { display: flex; gap: 4px; margin-top: 6px; }
.shift-actions button {
  flex: 1; background: var(--panel-2); border: 1px solid var(--line); color: var(--text-dim);
  border-radius: 5px; font-size: 10.5px; padding: 4px 0;
}
.shift-actions button:hover { color: var(--text); border-color: #454f5e; }
.shift-actions .danger:hover { color: var(--red); border-color: var(--red); }

.zone-label {
  font-size: 10px; letter-spacing: 1px; color: var(--text-faint); padding: 8px 12px 4px; text-transform: uppercase;
}

.set-zone {
  margin: 8px 12px 0;
  border: 2px dashed #2f6b4d;
  border-radius: 8px;
  min-height: 40px;
  padding: 6px 8px;
  display: flex; flex-direction: column; gap: 5px;
  transition: all .15s ease;
}
.set-zone.drag-over { border-color: var(--green); background: #10241a; }
.set-zone .empty-hint { color: var(--text-faint); font-size: 11px; text-align: center; padding: 4px 0; }
.set-chip {
  display: flex; align-items: center; gap: 8px;
  background: #12291f; border: 1px solid #2f6b4d; border-radius: 7px; padding: 6px 8px;
}
.set-chip.kind-roster { background: #0f2338; border-color: #2d5f94; }
.set-chip.kind-equipment_set { background: #241a33; border-color: #6b4fa0; }
.set-chip .set-icon { font-size: 15px; flex: 0 0 auto; }
.set-chip .set-info { flex: 1; min-width: 0; }
.set-chip .set-name { font-weight: 700; font-size: 12px; color: var(--green); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.set-chip.kind-roster .set-name { color: var(--blue); }
.set-chip.kind-equipment_set .set-name { color: var(--purple); }
.set-chip .set-counts { font-size: 10px; color: var(--text-dim); }
.set-chip button { background: none; border: none; color: var(--text-faint); font-size: 13px; padding: 2px 4px; }
.set-chip button:hover { color: var(--text); }
.set-chip .set-unlink:hover { color: var(--red); }
.set-chip .set-sync:hover { color: var(--accent-2); }

.foreman-slot {
  margin: 0 12px 6px;
  border: 2px dashed #3a4250;
  border-radius: 8px;
  min-height: 54px;
  display: flex; align-items: center; gap: 8px; padding: 6px 8px;
  transition: all .15s ease;
}
.foreman-slot.has-foreman { border-style: solid; border-color: var(--gold); background: #2a230f; }
.foreman-slot.drag-over { border-color: var(--accent); background: #2a1d0f; }
.foreman-slot .empty-hint { color: var(--text-faint); font-size: 11px; margin: auto; }
.foreman-badge-icon {
  width: 32px; height: 32px; border-radius: 50%; flex: 0 0 auto;
  background: linear-gradient(135deg, var(--gold), #b8860b);
  display: flex; align-items: center; justify-content: center; font-size: 15px; color: #241900;
  box-shadow: 0 0 10px #f2c14e55;
}
.foreman-info { min-width: 0; }
.foreman-name { font-weight: 700; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.foreman-cat { font-size: 10px; color: var(--text-dim); }
.foreman-clear { margin-left: auto; background: none; border: none; color: var(--text-faint); font-size: 15px; }
.foreman-clear:hover { color: var(--red); }

.crew-tray {
  margin: 0 12px 10px;
  min-height: 40px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  padding: 6px;
  display: flex; flex-wrap: wrap; gap: 5px;
  transition: all .15s ease;
}
.crew-tray.drag-over { border-color: var(--blue); background: #10192a; }
.crew-chip {
  display: flex; align-items: center; gap: 5px;
  background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 20px; padding: 3px 8px 3px 3px; font-size: 11px;
}
/* Time off on a day the shift runs: a dashed edge and a word, red once it
   is approved (they will not be there), amber while it is only asked. It
   sits before the leave rule, so somebody on leave keeps leave's edge. */
.crew-chip.time-off-approved { border-color: var(--red); border-style: dashed; }
.crew-chip.time-off-pending { border-color: var(--accent-2); border-style: dashed; }
.crew-chip.is-on-leave { border-color: var(--purple); border-style: dashed; opacity: .75; }
/* What the clock says, while the shift is running today: green on the
   clock, yellow not. A shift not running today is left as it was. */
.crew-chip.clock-on .chip-name { color: var(--green); font-weight: 700; }
.crew-chip.clock-off .chip-name { color: var(--gold); font-weight: 700; }
.clock-pop {
  position: fixed; z-index: 650; width: 300px; padding: 9px 11px; pointer-events: none;
  background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
  box-shadow: 0 8px 24px #0009; font-size: 11.5px;
}
.clock-pop-name { font-weight: 800; font-size: 12.5px; margin-bottom: 3px; }
.clock-pop-state { font-weight: 700; margin-bottom: 6px; }
.clock-pop-state.on { color: var(--green); }
.clock-pop-state.off { color: var(--gold); }
.clock-pop-title { font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--text-faint); font-weight: 800; margin: 4px 0 3px; }
.clock-pop-row { display: grid; grid-template-columns: 62px 1fr auto; gap: 6px; padding: 3px 0; border-top: 1px solid var(--line-soft); }
.clock-pop-span { white-space: nowrap; }
.clock-pop-live { color: var(--green); font-weight: 700; }
.clock-pop-kind { font-weight: 800; }
.clock-pop-kind.in { color: var(--green); }
.clock-pop-kind.out { color: var(--accent-2); }
.clock-pop-when { color: var(--text-dim); white-space: nowrap; }
.clock-pop-on { font-family: ui-monospace, Consolas, monospace; overflow-wrap: anywhere; }
.chip-leave {
  font-size: 8.5px; font-weight: 700; letter-spacing: .4px; color: var(--purple);
  background: rgba(216, 109, 205, .14); border-radius: 3px; padding: 0 4px; flex: 0 0 auto;
}
.chip-off {
  font-size: 8.5px; font-weight: 700; letter-spacing: .4px; border-radius: 3px; padding: 0 4px; flex: 0 0 auto;
  --k: var(--accent-2); color: var(--k); background: color-mix(in srgb, var(--k) 14%, transparent);
}
.chip-off.approved { --k: var(--red); }
.chip-avatar {
  width: 20px; height: 20px; border-radius: 50%; background: #34455e; color: #cfe0ff;
  display: flex; align-items: center; justify-content: center; font-size: 9.5px; font-weight: 700;
  flex: 0 0 auto;
}
.chip-x { background: none; border: none; color: var(--text-faint); font-size: 12px; padding: 0 2px; }
.chip-x:hover { color: var(--red); }

.equip-zone {
  margin: 0 12px 12px;
  min-height: 54px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  padding: 6px;
  display: flex; flex-direction: column; gap: 1px;
  transition: all .15s ease;
}
.equip-cat-group-head {
  display: flex; align-items: center; gap: 6px; width: 100%;
  background: none; border: none; padding: 4px 2px; cursor: pointer; text-align: left;
  color: var(--text); font-size: 11px; border-radius: 5px;
}
.equip-cat-group-head:hover { background: var(--panel-2); }
.equip-cat-group-chevron { font-size: 9px; color: var(--text-faint); transition: transform .15s ease; flex: 0 0 auto; }
.equip-cat-group.expanded .equip-cat-group-chevron { transform: rotate(90deg); }
.equip-cat-group-name { font-weight: 700; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.equip-cat-group-count {
  font-size: 10px; font-weight: 700; color: var(--text-faint); background: var(--panel-2);
  border-radius: 10px; padding: 1px 7px; flex: 0 0 auto;
}
.equip-cat-group-body { display: none; flex-wrap: wrap; gap: 5px; padding: 2px 0 6px 15px; }
.equip-cat-overbooked,
.zone-overbooked,
.cal-overbooked,
.cal-overbooked-line {
  color: var(--red); font-weight: 700;
}
.equip-cat-overbooked { font-size: 10px; flex: 0 0 auto; }
.zone-overbooked { font-size: 10px; text-transform: none; letter-spacing: 0; margin-left: 6px; }
.cal-overbooked { margin-right: 3px; }
.cal-overbooked-line { font-size: 10px; margin-top: 2px; }
/* A shift on a job with no geofence — the time clock's warning, in amber:
   a gap to close rather than something gone wrong. */
.cal-nofence, .cal-nofence-line { color: var(--warn, #e0a030); font-weight: 700; }
.cal-nofence { margin-right: 3px; }
.cal-nofence-line { font-size: 10px; margin-top: 2px; }
.dash-pill.nofence { border-color: var(--warn, #e0a030); color: var(--warn, #e0a030); font-weight: 700; }
.dash-pill.overbooked { border-color: var(--red); color: var(--red); font-weight: 700; }
.equip-cat-group.expanded .equip-cat-group-body { display: flex; }
.equip-zone.drag-over { border-color: var(--accent); background: #241a0d; }
#shiftDetailCardWrap .crew-tray,
#shiftDetailCardWrap .equip-zone {
  max-height: 150px;
  overflow-y: auto;
}
.equip-chip {
  display: flex; align-items: center; gap: 5px;
  background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 7px; padding: 4px 6px; font-size: 10.5px; max-width: 100%;
}
.equip-chip .eicon { font-size: 13px; }
.equip-chip .etext { display: flex; flex-direction: column; min-width: 0; }
.equip-chip .em { font-weight: 700; font-size: 10.5px; }
.equip-chip .edesc { color: var(--text-dim); font-size: 9.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px; }
.equip-chip-placeholder { cursor: pointer; border-style: dashed; border-color: var(--accent); }
.equip-chip-placeholder:hover { background: #241a0d; border-color: var(--accent-2); }

/* ---- Trucks on a shift ----
   Built on the equipment chip so the two zones read alike, with one thing
   equipment has no room for: who is driving. A truck with nobody on it yet
   says so in amber rather than going quietly blank. */
.truck-zone { display: flex; flex-wrap: wrap; gap: 4px; padding: 0 12px 6px; }
.truck-chip {
  display: flex; align-items: center; gap: 5px;
  background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 7px; padding: 4px 6px; font-size: 10.5px; max-width: 100%;
}
.truck-chip .eicon { font-size: 13px; }
.truck-chip .etext { display: flex; flex-direction: column; min-width: 0; }
.truck-chip .em { font-weight: 700; font-size: 10.5px; }
.truck-chip .edesc {
  color: var(--text-dim); font-size: 9.5px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; max-width: 130px;
}
/* Read-out, not a control: who is driving is decided on the Equipment
   Roster, and the shift card only reports it. */
.truck-driver { color: var(--text-dim); font-size: 9.5px; white-space: nowrap; }
.truck-driver.unmanned { color: var(--accent); font-style: italic; }

/* Choosing a driver: a popover against the chip, the way the colour gear is. */
/* Above a modal, not behind one. These popovers are opened from inside
   dialogs — the row menu in Shift Management, the driver picker — and a
   backdrop sits at 200, so anything lower renders under it: invisible, and
   the click that should land on it dismisses it instead. */
.driver-pop {
  position: fixed; z-index: 650; width: 260px; padding: 6px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
  box-shadow: 0 8px 24px #0009; display: flex; flex-direction: column; gap: 4px;
}
.driver-pop .shelf-search { width: 100%; }
.driver-pop-list { max-height: 260px; overflow-y: auto; display: flex; flex-direction: column; gap: 1px; }
.eq-truck-shift { font-size: 9.5px; color: var(--accent-2); font-weight: 700; margin-left: 4px; white-space: nowrap; }
.driver-pop-cancel { color: var(--text-faint); justify-content: center; }
.driver-pop-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
  width: 100%; text-align: left; padding: 4px 6px; cursor: pointer; font-size: 11px;
  background: none; border: 0; border-radius: 4px; color: var(--text);
}
.driver-pop-row:hover { background: var(--panel-2); }
.driver-pop-row.unmanned { color: var(--accent); font-style: italic; }
.driver-pop-row.is-driver { font-weight: 600; }
.driver-pop-tag { color: var(--text-faint); font-size: 9.5px; white-space: nowrap; }
.driver-pop-head { font-size: 10px; font-weight: 700; color: var(--text-dim); padding: 2px 6px 4px; }
.driver-pop-group {
  font-size: 9px; letter-spacing: .8px; text-transform: uppercase;
  color: var(--text-faint); padding: 6px 6px 2px;
}
/* A truck on the bench is clickable as well as draggable — say so. */
.token-truck { cursor: pointer; }

@media print {
  .truck-driver { color: #000; }
  .truck-chip { background: #fff !important; border-color: #999 !important; color: #000; }
}
.equip-chip-placeholder .em { color: var(--accent-2); }

.shelf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
.shelf-row .shelf-section { min-width: 0; }
.shelf-section { margin-bottom: 22px; }
.shelf-head {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; background: none; border: none; padding: 4px 2px;
  font-size: 12px; letter-spacing: 1.5px; color: var(--text-dim); font-weight: 700;
  margin-bottom: 8px; cursor: pointer; font-family: inherit;
}
.shelf-head:hover { color: var(--text); }
.shelf-chevron { font-size: 11px; color: var(--text-faint); transition: transform .15s ease; flex: 0 0 auto; }
.shelf-head-accent,
.shelf-head-accent .shelf-chevron { color: var(--accent-2); }
.shelf-head-accent:hover,
.shelf-head-accent:hover .shelf-chevron { color: var(--accent); }
/* A card's own settings, sitting just left of the chevron. Out of the head's
   flow because the head is itself a button. */
.shelf-section { position: relative; }
.shelf-gear {
  position: absolute; top: 1px; right: 22px; background: none; border: none; padding: 2px 4px;
  font-size: 14px; line-height: 1; color: var(--text-faint); cursor: pointer; border-radius: 4px;
}
.shelf-gear:hover { color: var(--accent); background: var(--panel-2); }
.shelf-body { overflow: hidden; }
.shelf-section.collapsed .shelf-head { margin-bottom: 0; }
.shelf-section.collapsed .shelf-chevron { transform: rotate(-90deg); }
.shelf-section.collapsed .shelf-body { display: none; }
.shelf-search {
  width: 100%; background: var(--panel-2); border: 1px solid var(--line); color: var(--text);
  border-radius: 6px; padding: 6px 9px; font-size: 12px; margin-bottom: 8px; outline: none;
}
.shelf-search:focus { border-color: var(--accent); }


.shelf-empty { color: var(--text-faint); font-size: 12px; font-style: italic; padding: 8px 2px; }
.chip-filter { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 10px; max-height: 90px; overflow-y: auto; }
.filter-chip {
  background: var(--panel-2); border: 1px solid var(--line); color: var(--text);
  font-size: 10.5px; padding: 3px 8px; border-radius: 12px;
}
.filter-chip.active { background: var(--accent); color: #201000; border-color: var(--accent); font-weight: 700; }
.filter-chip:disabled { opacity: .35; cursor: not-allowed; }

.shelf-subhead { font-size: 10px; letter-spacing: 1px; color: var(--text-faint); text-transform: uppercase; margin-bottom: 5px; }
.shelf-hint { font-size: 10.5px; color: var(--text-dim); margin: -2px 0 8px; line-height: 1.4; }

.shelf-list { display: flex; flex-direction: column; gap: 6px; max-height: 56vh; overflow-y: auto; padding-right: 2px; }
.shelf-list-sets { max-height: 28vh; }

.token {
  display: flex; align-items: center; gap: 8px;
  background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 8px; padding: 7px 9px; cursor: grab; user-select: none;
  transition: all .1s ease;
}
.token:hover { border-color: #454f5e; background: #232a34; }
.token:active { cursor: grabbing; }
.token.sortable-ghost { opacity: .3; }
.token.sortable-drag { opacity: .95; box-shadow: var(--shadow); }
.token-icon {
  width: 28px; height: 28px; border-radius: 50%; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700;
  background: #34455e; color: #cfe0ff;
}
.token-main { min-width: 0; flex: 1; }
.token-title { font-size: 12.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.token-sub { font-size: 10px; color: var(--text-dim); }
#shiftsPanelSection .token-sub { color: var(--text); }

.token-equip-category .token-icon { background: #2c3340; font-size: 15px; }
.token-equip-category { border-left: 3px solid var(--blue); }
.token-count-badge {
  font-size: 10px; font-weight: 700; color: var(--text-dim); background: #ffffff0f;
  border-radius: 10px; padding: 1px 7px; flex: 0 0 auto;
}

.token-set {
  border-left: 3px solid var(--green);
  background: linear-gradient(90deg, #12291f30, var(--panel-2));
  align-items: flex-start;
}
.token-set .token-icon { background: linear-gradient(135deg, var(--green), #1d8a5e); font-size: 14px; }
.token-set.kind-roster { border-left-color: var(--blue); }
.token-set.kind-roster .token-icon { background: linear-gradient(135deg, var(--blue), #2d6fc4); }
/* Calendar Crews shelf: lead on top, crew name under it */
.token-cal-crew .token-main { min-width: 0; }
.token-cal-crew .token-no-lead { font-style: italic; color: var(--text-dim); }
.token-cal-crew .token-dept { color: var(--blue); }
.token-set.kind-equipment_set { border-left-color: var(--purple); }
.token-set.kind-equipment_set .token-icon { background: linear-gradient(135deg, var(--purple), #8b4fd9); }
.token-set .token-deploy-tags { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 4px; }
.set-deploy-tag {
  font-size: 9.5px; color: var(--text-dim); background: #ffffff0a; border: 1px solid var(--line);
  border-radius: 8px; padding: 1px 6px;
}


.set-delete { background: none; border: none; color: var(--text-faint); font-size: 15px; align-self: flex-start; }
.set-delete:hover { color: var(--red); }

.modal-backdrop {
  position: fixed; inset: 0; background: #000000aa; backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center; z-index: 200;
}
.modal {
  width: 360px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  padding: 20px; box-shadow: var(--shadow);
  max-height: 88vh; overflow-y: auto;
}
.modal-title { font-size: 16px; font-weight: 800; margin-bottom: 14px; }
.modal-field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; font-size: 12px; color: var(--text-dim); }
.modal-field input {
  background: var(--panel-2); border: 1px solid var(--line); color: var(--text);
  border-radius: 7px; padding: 8px 10px; font-size: 13.5px; outline: none;
}
.modal-field input:focus { border-color: var(--accent); }
.modal-field select {
  background: var(--panel-2); border: 1px solid var(--line); color: var(--text);
  border-radius: 7px; padding: 8px 10px; font-size: 13.5px; outline: none;
}
.modal-field-row { display: flex; gap: 10px; }
.modal-field-row .modal-field { flex: 1; }
.modal-field-narrow { flex: 0 0 90px !important; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.modal-wide { width: 440px; max-width: 92vw; }
.modal-table { width: min(1280px, 94vw); max-width: 94vw; }
.create-shift-source { color: var(--text-dim); font-weight: 500; font-size: 13px; }
.color-swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.color-swatch {
  width: 28px; height: 28px; border-radius: 50%; border: 2px solid transparent;
  cursor: pointer; padding: 0;
}
.color-swatch.active { border-color: #fff; box-shadow: 0 0 0 2px var(--panel); }

.shift-code-add-row { display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; align-items: flex-end; }
.shift-code-add-row input,
.shift-code-add-row select,
.shift-code-row input,
.shift-code-row select,
.sc-toolbar input {
  background: var(--panel-2); border: 1px solid var(--line); color: var(--text);
  border-radius: 6px; padding: 6px 8px; font-size: 12px; outline: none; font-family: inherit;
}
.shift-code-row input,
.shift-code-row select { background: var(--panel); }
.shift-code-add-row input:focus,
.shift-code-add-row select:focus,
.shift-code-row input:focus,
.shift-code-row select:focus,
.sc-toolbar input:focus { border-color: var(--accent); }
.sc-field { display: flex; flex-direction: column; gap: 3px; flex: 0 0 auto; }
.sc-field > span { font-size: 10.5px; color: var(--text-dim); }
.sc-field input[type="text"] { width: 90px; }
.sc-field input[type="time"] { width: 104px; }
.sc-field input[type="number"] { width: 72px; }
.sc-field-wide { flex: 1 1 130px; min-width: 120px; }
.sc-field-wide input,
.sc-field-wide select { width: 100% !important; box-sizing: border-box; }
.sc-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; }
.sc-toolbar .chip-filter { margin-bottom: 0; }
.sc-toolbar input { flex: 1 1 180px; min-width: 150px; }
.shift-codes-list { display: flex; flex-direction: column; gap: 4px; max-height: 46vh; overflow-y: auto; }
.shift-code-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 7px;
  padding: 6px 10px; font-size: 11.5px;
}
.shift-code-row.editing { border-color: var(--accent); align-items: flex-end; }
.shift-code-row .sc-code { font-weight: 700; color: var(--accent-2); min-width: 62px; flex: 0 0 auto; }
.shift-code-row .sc-name { flex: 1; min-width: 120px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shift-code-row .sc-meta { color: var(--text-dim); flex: 0 0 auto; white-space: nowrap; }
.shift-code-row .sc-next { color: var(--text-faint); font-size: 10px; }
.shift-code-row .sc-applies { color: var(--text-faint); flex: 0 0 auto; white-space: nowrap; max-width: 110px; overflow: hidden; text-overflow: ellipsis; }
.shift-code-row .sc-badge { font-size: 9.5px; font-weight: 700; letter-spacing: .5px; padding: 1px 6px; border-radius: 4px;
  background: var(--panel-3); color: var(--accent-2); border: 1px solid var(--line); text-transform: uppercase; }
.shift-code-row .sc-actions { display: flex; gap: 4px; margin-left: auto; }
.shift-code-row .sc-actions .btn { padding: 4px 10px; font-size: 11.5px; }
.sc-empty { color: var(--text-faint); font-size: 12px; padding: 8px 2px; }
.equip-picker-list {
  display: flex; flex-direction: column; gap: 5px;
  max-height: 46vh; overflow-y: auto; margin-top: 4px; padding-right: 2px;
}
.equip-picker-row {
  display: flex; align-items: center; gap: 10px;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px;
  padding: 8px 10px; text-align: left; width: 100%; color: var(--text);
}
.equip-picker-row:hover:not(:disabled) { border-color: var(--accent); background: #232a34; }
.equip-picker-row:disabled { opacity: .4; cursor: not-allowed; }
.equip-picker-row .eicon { font-size: 16px; flex: 0 0 auto; }
.equip-picker-row .etext { flex: 1; min-width: 0; text-align: left; }
.equip-picker-row .em { font-weight: 700; font-size: 12.5px; }
.equip-picker-row .edesc { display: block; font-size: 11px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.equip-picker-row .division-tag { font-size: 10px; color: var(--text-faint); border: 1px solid var(--line); border-radius: 10px; padding: 2px 7px; flex: 0 0 auto; }
.equip-picker-row .already-tag { font-size: 10px; color: var(--green); flex: 0 0 auto; }
.equip-picker-row .booked-tag {
  font-size: 10px; color: var(--red); flex: 0 1 auto; max-width: 45%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.equip-picker-unknown { border-style: dashed; border-color: #5c6675; margin-bottom: 4px; }
.equip-picker-unknown:hover { border-color: var(--accent); }
.equip-picker-unknown .edesc { white-space: normal; }
.equip-picker-empty { color: var(--text-faint); font-size: 12px; text-align: center; padding: 20px 0; }

.toast {
  position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%);
  background: var(--panel); border: 1px solid var(--line); color: var(--text);
  padding: 10px 18px; border-radius: 8px; font-size: 13px; box-shadow: var(--shadow); z-index: 300;
}
.toast.err { border-color: var(--red); color: var(--red); }
.toast.ok { border-color: var(--green); }

.cal-nav { display: flex; align-items: center; gap: 8px; }
.cal-view-toggle { display: flex; gap: 2px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; padding: 2px; margin-right: 8px; }
.cal-view-btn { background: none; border: none; color: var(--text-dim); font-size: 12px; padding: 6px 12px; border-radius: 6px; cursor: pointer; }
.cal-view-btn.active { background: var(--accent); color: #201000; font-weight: 700; }
.cal-view-btn:not(.active):hover { color: var(--text); }

.cal-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0 20px 20px;
}
.cal-month-drop {
  margin: 8px 0 2px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  padding: 6px;
  text-align: center;
  font-size: 10.5px;
  color: var(--text-faint);
  transition: all .12s ease;
}
.cal-month-drop.drag-over { border-color: var(--accent); background: #241a0d; color: var(--accent-2); }
.cal-weekdays {
  display: grid;
  grid-template-columns: 16px repeat(7, minmax(0, 1fr));
  gap: 8px;
  padding: 10px 0 6px;
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--text-faint);
  text-transform: uppercase;
  text-align: center;
}
.cal-grid { flex: 1; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; }
.cal-week-row { display: grid; grid-template-columns: 16px repeat(7, minmax(0, 1fr)); gap: 8px; flex: 1; }
.cal-week-drop {
  background: none; border: none; border-radius: 5px;
  color: var(--text-faint); font-size: 9px; cursor: pointer; writing-mode: vertical-rl;
}
.cal-week-drop:hover,
.cal-week-drop.drag-over { color: var(--accent-2); background: var(--panel-2); }
.cal-day {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px;
  min-height: 96px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: all .12s ease;
  cursor: pointer;
}
.cal-day:hover { border-color: #454f5e; }
.cal-day.other-month { background: transparent; border-color: var(--line-soft); opacity: .45; }
.cal-day.today { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.cal-day.drag-over { border-color: var(--blue); background: #10192a; }
/* Rain call-out — a > 50% chance of rain gets a gentle pulsing outline
   (outline rather than border/box-shadow so it doesn't fight with .today's
   own highlight; both can be true on the same day and both stay visible). */
@keyframes rain-pulse { 0%,
100% { outline-color: #4fa3ff30; } 50% { outline-color: #4fa3ffb5; } }
.cal-day.rain-alert { outline: 2px solid #4fa3ff30; outline-offset: -2px; animation: rain-pulse 2.4s ease-in-out infinite; }
.cal-day-head { display: flex; align-items: center; justify-content: space-between; gap: 4px; padding: 0 2px; }
.cal-day-num { font-size: 11px; font-weight: 700; color: var(--text-dim); }
.cal-day.today .cal-day-num { color: var(--accent-2); }
.cal-day-weather { display: flex; align-items: center; gap: 2px; font-size: 10.5px; color: var(--text-dim); cursor: default; }
.cal-day-weather-temp { font-weight: 600; }
.cal-cold-icon { font-size: 10px; margin: 0 1px; }
.cal-day-chips { display: flex; flex-direction: column; gap: 3px; overflow-y: auto; }
.cal-chip {
  display: block;
  font-size: 10.5px; padding: 3px 6px; border-radius: 5px;
  background: var(--chip-color, var(--accent));
  color: #0b0d10;
  font-weight: 600;
  cursor: grab;
}
.cal-chip:active { cursor: grabbing; }
.cal-chip-line1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-chip-line2 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 9px; font-weight: 500; opacity: .82; margin-top: 1px; }
.cal-chip.no-job { outline: 1px dashed #ffffff70; outline-offset: -3px; }
.cal-chip.continuation { background: transparent; border: 1px dashed var(--chip-color, var(--accent)); color: var(--chip-color, var(--accent)); cursor: pointer; }
.cal-chip.continuation:hover { background: var(--chip-color, var(--accent)); color: #0b0d10; }
.cal-chip:not(.continuation):hover { filter: brightness(1.12); }
.cal-chip.job-drag-over { outline: 2px solid var(--gold); outline-offset: 1px; }
.cal-chip.phase-drag-over { outline: 2px solid var(--accent); outline-offset: 1px; }
.cal-chip.crew-drag-over { outline: 2px solid var(--blue); outline-offset: 1px; }
/* The hours bar under a chip or week entry: a faint track for the whole
   day, the shift's hours drawn solid on it, a night's spill into the next
   morning fainter still. Drawn in the text colour, so it reads on a filled
   chip and on a dashed continuation alike. */
.cal-hours { display: block; position: relative; height: 3px; margin-top: 3px; }
.cal-hours::before { content: ""; position: absolute; inset: 0; border-radius: 2px; background: currentColor; opacity: .18; }
.cal-hours i { position: absolute; top: 0; bottom: 0; border-radius: 2px; background: currentColor; opacity: .75; }
.cal-hours i.spill { opacity: .32; }
.cal-week-entry .cal-hours { margin-top: 5px; }
/* The day view's card is panel-coloured with the shift's colour down its
   left edge, so the bar takes that colour rather than the text's. */
.cal-day-view-entry .cal-hours { margin-top: 8px; height: 4px; color: var(--chip-color, var(--accent)); }
/* On the wall it is read from across a room, so it is thicker, and in the
   title's colour rather than the dim text under it. */
.dash-shift .cal-hours { margin-top: 6px; height: 5px; color: var(--accent-2); }
.cal-chip-phase-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 4px; vertical-align: middle; }
.cal-chip-more {
  font-size: 10px; color: var(--text-faint); padding: 1px 6px; text-align: left; background: none; border: none;
}
.cal-chip-more:hover { color: var(--text-dim); }

/* ---- "+ Shift" hot zone (top of the Calendar shelf, above Phase): click,
   then drag across days to draw a blank shift. Dressed like the rail's own
   + buttons (.btn-icon): the same panel background and hairline border, so
   the three ways of adding something read as one family. ---- */
.cal-new-shift-zone {
  display: flex; align-items: center; gap: 8px; width: 100%;
  margin: 0 0 18px; padding: 7px 9px;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px;
  color: var(--text); text-align: left; cursor: pointer; transition: all .12s ease;
}
.cal-new-shift-zone:hover { border-color: var(--accent); }
.cal-new-shift-zone.armed {
  border-style: solid; border-color: var(--accent); background: #2a1d0f; color: var(--text);
  box-shadow: 0 0 0 2px #ff8a1e33;
}
.cal-new-shift-plus {
  width: 28px; height: 28px; border-radius: 50%; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 700; line-height: 1;
  background: var(--panel); color: var(--accent-2);
}
.cal-new-shift-zone.armed .cal-new-shift-plus { background: var(--accent); color: #201000; }
.cal-new-shift-main { display: flex; flex-direction: column; min-width: 0; }
.cal-new-shift-label { font-size: 12.5px; font-weight: 700; }
.cal-new-shift-hint { font-size: 10.5px; color: var(--text-faint); }
.cal-new-shift-zone.armed .cal-new-shift-hint { color: var(--accent-2); }
/* While armed, the calendar is a drawing surface. */
body.cal-drawing #calGrid .cal-day, body.cal-drawing #calGrid .cal-day *,
body.cal-drawing #calWeekGrid .cal-week-day, body.cal-drawing #calWeekGrid .cal-week-day *,
body.cal-drawing #calDayViewBody, body.cal-drawing #calDayViewBody * { cursor: crosshair !important; }
body.cal-drawing #calGrid .cal-day:hover, body.cal-drawing #calWeekGrid .cal-week-day:hover { border-color: var(--accent); }
.cal-day.draw-sel, .cal-week-day.draw-sel, .cal-day-view.draw-sel {
  border-color: var(--accent); background: #2a1d0f; box-shadow: 0 0 0 1px var(--accent) inset;
}
.cal-day.other-month.draw-sel { opacity: .8; }
/* A Phase or Crew clicked to draw with */
#shiftsPanelSection .token.draw-armed { outline: 2px solid var(--accent); outline-offset: 1px; background: #2a1d0f; }

.cal-week-grid { flex: 1; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; overflow-y: auto; }
.cal-week-day {
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  padding: 8px; display: flex; flex-direction: column; gap: 6px; min-height: 0;
  transition: all .12s ease;
}
.cal-week-day:hover { border-color: #454f5e; }
.cal-week-day.today { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.cal-week-day.drag-over { border-color: var(--blue); background: #10192a; }
.cal-week-day.rain-alert { outline: 2px solid #4fa3ff30; outline-offset: -2px; animation: rain-pulse 2.4s ease-in-out infinite; }
.cal-week-day-head { font-size: 11.5px; font-weight: 700; color: var(--text-dim); padding-bottom: 4px; border-bottom: 1px solid var(--line-soft); cursor: pointer; }
.cal-week-day.today .cal-week-day-head { color: var(--accent-2); }
.cal-week-day-weather { font-size: 10.5px; color: var(--text-dim); padding: 4px 0 2px; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.cal-week-day-rain { color: var(--blue); }
.cal-week-day-entries { display: flex; flex-direction: column; gap: 6px; overflow-y: auto; flex: 1; }
.cal-week-entry {
  background: var(--chip-color, var(--accent)); color: #0b0d10; border-radius: 7px;
  padding: 6px 8px; font-size: 11px; cursor: grab;
}
.cal-week-entry.continuation { background: transparent; border: 1px dashed var(--chip-color, var(--accent)); color: var(--chip-color, var(--accent)); cursor: pointer; }
.cal-week-entry.continuation:hover { background: var(--chip-color, var(--accent)); color: #0b0d10; }
.cal-week-entry.job-drag-over { outline: 2px solid var(--gold); outline-offset: 1px; }
.cal-week-entry.phase-drag-over { outline: 2px solid var(--accent); outline-offset: 1px; }
.cal-week-entry.crew-drag-over { outline: 2px solid var(--blue); outline-offset: 1px; }
.cal-week-entry-title { font-weight: 700; }
.cal-week-entry-line2 { font-size: 10px; font-weight: 500; opacity: .85; margin-top: 2px; }
.cal-week-entry-meta { font-size: 10px; opacity: .85; margin-top: 2px; }

.cal-day-view { flex: 1; overflow-y: auto; padding-top: 6px; }
.cal-day-view-weather {
  display: flex; align-items: center; gap: 12px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  padding: 12px 14px; margin-bottom: 12px;
}
.cal-day-view-weather.rain-alert { outline: 2px solid #4fa3ff30; outline-offset: -2px; animation: rain-pulse 2.4s ease-in-out infinite; }
.cal-day-view-weather.cold-alert { outline: 2px solid #4fa3ff60; outline-offset: -2px; }
.cal-day-view-weather-icon { font-size: 26px; }
.cal-day-view-weather-label { font-size: 13.5px; font-weight: 700; }
.cal-day-view-weather-sub { font-size: 11.5px; color: var(--text-dim); margin-top: 2px; }
.cal-day-view-drop { border: 2px dashed var(--line); border-radius: 10px; padding: 30px; text-align: center; color: var(--text-faint); font-size: 12.5px; margin-bottom: 12px; transition: all .12s ease; }
.cal-day-view-drop.drag-over { border-color: var(--accent); background: #241a0d; color: var(--accent-2); }
.cal-day-view-entry {
  display: flex; align-items: center; gap: 12px;
  background: var(--panel); border: 1px solid var(--line); border-left: 5px solid var(--chip-color, var(--accent));
  border-radius: 10px; padding: 12px 14px; margin-bottom: 8px; cursor: grab;
}
.cal-day-view-entry:hover { border-color: #454f5e; }
.cal-day-view-entry.continuation { cursor: pointer; opacity: .8; }
.cal-day-view-entry.job-drag-over { outline: 2px solid var(--gold); outline-offset: 2px; }
.cal-day-view-entry.phase-drag-over { outline: 2px solid var(--accent); outline-offset: 2px; }
.cal-day-view-entry.crew-drag-over { outline: 2px solid var(--blue); outline-offset: 2px; }
.cal-day-view-entry-main { flex: 1; min-width: 0; }
.cal-day-view-entry-title { font-size: 14px; font-weight: 700; }
.cal-day-view-entry-sub { font-size: 12px; color: var(--text-dim); margin-top: 3px; }
.cal-day-view-entry-sub2 { font-size: 12px; color: var(--text-dim); margin-top: 2px; font-style: italic; }
.cal-day-view-entry-meta { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.cal-day-view-color { width: 14px; height: 14px; border-radius: 50%; flex: 0 0 auto; cursor: pointer; border: 2px solid #ffffff40; }

.day-detail-list { display: flex; flex-direction: column; gap: 6px; max-height: 40vh; overflow-y: auto; margin: 4px 0 14px; }
.day-detail-empty { color: var(--text-faint); font-size: 12.5px; padding: 10px 2px; }
.day-detail-row {
  display: flex; align-items: center; gap: 10px;
  background: var(--panel-2); border: 1px solid var(--line); border-left: 4px solid var(--chip-color, var(--accent));
  border-radius: 8px; padding: 9px 11px; cursor: pointer;
}
.day-detail-row:hover { border-color: #454f5e; border-left-color: var(--chip-color, var(--accent)); background: #232a34; }
.day-detail-main { flex: 1; min-width: 0; }
.day-detail-job { font-weight: 700; font-size: 13px; }
.day-detail-shift { font-size: 12px; color: var(--text-dim); margin-top: 1px; }
.day-detail-meta { display: flex; gap: 6px; margin-top: 4px; flex-wrap: wrap; }
.day-detail-hint { border-top: 1px solid var(--line-soft); padding-top: 12px; color: var(--text-faint); font-size: 12px; }
.day-detail-weather { font-size: 12px; color: var(--text-dim); margin: -6px 0 12px; }
.day-detail-weather.rain-alert {
  display: inline-block; padding: 4px 8px; border-radius: 6px;
  outline: 2px solid #4fa3ff30; outline-offset: -2px;
  animation: rain-pulse 2.4s ease-in-out infinite;
}
.day-detail-weather.cold-alert {
  display: inline-block; padding: 4px 8px; border-radius: 6px;
  outline: 2px solid #4fa3ff60; outline-offset: -2px;
}

.job-docs-upload { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-bottom: 14px; }
.job-docs-upload .shelf-hint { margin: 0; }
.job-doc-confirm {
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px;
  padding: 12px 14px; margin-bottom: 14px;
}
.job-doc-confirm-head { font-weight: 700; font-size: 13px; margin-bottom: 4px; }
.whoami { font-size: 11px; color: var(--text-dim); margin-left: 4px; white-space: nowrap; }
.users-list { display: flex; flex-direction: column; gap: 5px; max-height: 34vh; overflow-y: auto; margin-bottom: 4px; }
.user-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px;
}
.user-row.inactive { opacity: .55; }
.user-main { flex: 1; min-width: 160px; }
.user-name { font-size: 13px; font-weight: 700; }
.user-handle { font-weight: 400; color: var(--text-dim); font-size: 11.5px; margin-left: 5px; }
.user-meta { font-size: 10.5px; color: var(--text-faint); margin-top: 2px; }
.user-warn { color: var(--accent-2); font-weight: 700; }
.user-row select {
  background: var(--panel); border: 1px solid var(--line); color: var(--text);
  border-radius: 6px; padding: 5px 7px; font-size: 12px; font-family: inherit;
}
.user-row .btn { padding: 5px 9px; font-size: 11.5px; }
/* A temporary password, shown once: large and monospaced, because it is
   read off this screen and typed into another. */
.issued-pw { display: flex; align-items: center; gap: 10px; margin: 10px 0 12px; }
.issued-pw code {
  flex: 1 1 auto; padding: 10px 12px; border-radius: 8px; background: var(--panel-2);
  border: 1px dashed var(--accent); color: var(--text); text-align: center;
  font: 700 17px/1.2 ui-monospace, Consolas, monospace; letter-spacing: .04em; user-select: all;
}
.roles-list { display: flex; gap: 8px; flex-wrap: wrap; }
.role-card {
  flex: 1 1 240px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; padding: 9px 12px;
}
.role-name { font-weight: 700; font-size: 12.5px; }
.role-desc { font-size: 11px; color: var(--text-dim); margin: 3px 0 6px; }
.role-perms { margin: 0; padding-left: 16px; font-size: 11px; color: var(--text-dim); }
/* Settings → Employees: the list of everyone, and one person's whole record
   as a two-column form. The field rows and status/skills blocks are the
   roster panel's own (frp-*), so the two screens read the same. */
.emp-modal { width: min(1100px, 95vw); }
.emp-toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.emp-toolbar .shelf-search { flex: 1 1 220px; }
.emp-toolbar select {
  background: var(--panel-2); border: 1px solid var(--line); color: var(--text);
  border-radius: 6px; padding: 6px 8px; font-size: 12px; font-family: inherit;
}
.emp-check { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text-dim); }
.emp-list { display: flex; flex-direction: column; gap: 4px; max-height: 60vh; overflow-y: auto; padding-right: 2px; }
.emp-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; width: 100%; text-align: left; cursor: pointer;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; color: var(--text);
}
.emp-row:hover { border-color: var(--accent); }
.emp-row.inactive { opacity: .5; }
.emp-name { font-weight: 700; font-size: 13px; flex: 0 0 220px; }
.emp-id { color: var(--text-faint); font-size: 11px; font-weight: 400; margin-left: 6px; }
.emp-meta { flex: 1; min-width: 160px; font-size: 11.5px; color: var(--text-dim); }
.emp-gaps { display: block; font-size: 10.5px; color: var(--accent-2); margin-top: 1px; }
.emp-badges { display: flex; gap: 4px; flex-wrap: wrap; margin-left: auto; }
.emp-badge {
  font-size: 9.5px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; padding: 1px 6px;
  border-radius: 4px; border: 1px solid var(--line); background: var(--panel-3); color: var(--text-dim);
}
.emp-badge.cdl { color: var(--accent-2); }
.emp-badge.fm { color: var(--accent); }
.emp-badge.new { border-left: 3px solid #ffe44d; }
.emp-badge.resign { border-left: 3px solid #ff5c5c; }
.emp-badge.leave { border-left: 3px solid #d86dcd; }
.emp-badge.off { color: var(--red); }
.emp-count { margin-top: 8px; }
.emp-form-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.emp-form-head .btn { padding: 5px 10px; font-size: 12px; }
.emp-form-head h3 { margin: 0; font-size: 14px; }
.emp-form { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; align-items: start; }
.emp-form .frp-row { grid-template-columns: 120px 1fr; }
.emp-form .frp-row select, .emp-form textarea {
  background: var(--panel-2); border: 1px solid var(--line); color: var(--text); border-radius: 6px;
  padding: 5px 7px; font-size: 12.5px; font-family: inherit; min-width: 0; width: 100%;
}
.emp-form textarea { resize: vertical; min-height: 54px; }
.emp-span, .emp-section { grid-column: 1 / -1; }
.emp-section { display: flex; flex-direction: column; gap: 8px; }
.emp-section > .frp-sub { border-top: 1px solid var(--line); padding-top: 10px; margin-top: 4px; }
.emp-toggle { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; }
.emp-driver { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; align-items: start; }
.emp-driver .frp-dskills { grid-template-columns: repeat(3, 1fr); }
.emp-form-actions { grid-column: 1 / -1; display: flex; gap: 8px; margin-top: 8px; align-items: center; }
.emp-err { color: var(--red); font-size: 12px; }
/* Logistics: trucks by the day. A shelf of types, shifts and drivers on the
   left; the days on the right, each holding its truck orders. */
.lg-body {
  --lg-left: 180px;
  display: grid; grid-template-columns: var(--lg-left) minmax(0, 1fr); gap: 12px; padding: 0 14px 14px; flex: 1; min-height: 0;
  position: relative; transition: grid-template-columns .2s ease;
}
/* The shelf folds like the Calendar's rails (.rail-handle, .rail-toggle);
   only where the handle sits, and what the folded strip looks like on this
   page, is set here. */
.lg-body.shelf-collapsed { --lg-left: 34px; }
.lg-handle { top: 2px; left: calc(14px + var(--lg-left) - 12px); }
.lg-body.shelf-collapsed .lg-handle span { transform: scaleX(-1); }
.lg-body:not(.shelf-collapsed) #lgShelf > .rail-toggle { display: none; }
.lg-body.shelf-collapsed #lgShelf {
  padding: 10px 4px; overflow: hidden; cursor: pointer; min-height: calc(100vh - 170px);
  background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
}
.lg-body.shelf-collapsed #lgShelf:hover { background: var(--panel-2); }
.lg-body.shelf-collapsed #lgShelf > :not(.rail-toggle) { display: none !important; }
.lg-body.shelf-collapsed #lgShelf > .rail-toggle {
  flex-direction: column; justify-content: flex-start; height: 100%; margin: 0; padding: 6px 0; gap: 10px;
}
.lg-body.shelf-collapsed #lgShelf .rail-toggle-label { display: block; writing-mode: vertical-rl; white-space: nowrap; }
.lg-body.shelf-collapsed #lgShelf .rail-toggle-arrow { transform: scaleX(-1); }
.lg-shelf { display: flex; flex-direction: column; gap: 6px; overflow-y: auto; min-height: 0; }
.lg-list { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.lg-drivers { max-height: 42vh; overflow-y: auto; }
/* A Field Roster crew's name over its drivers, with how many. */
.lg-group { display: flex; justify-content: space-between; align-items: baseline; font-size: 10px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--text-faint); padding: 6px 2px 1px; }
.lg-group:first-child { padding-top: 0; }
.lg-group[draggable="true"] { cursor: grab; }
.lg-group[draggable="true"]:hover { color: var(--text); }
.lg-group span { font-weight: 700; letter-spacing: 0; color: var(--text-dim); }
/* The month view's day is two halves: day above, night below. */
/* The day is a grid of its date and two equal rows, so the halves stay
   halves and both grow when either fills up — a full day half must push
   the night half down, never run over it. The half's sun or moon is the
   first thing in its wrapping row, with the chips after it. */
.lg-month .lg-day { display: grid; grid-template-rows: auto 1fr 1fr; min-height: 150px; }
.lg-half { display: flex; flex-wrap: wrap; align-content: flex-start; align-items: center; gap: 3px; padding: 3px 4px; min-height: 60px; position: relative; }
/* Day and night are told apart by colour, not by how light or dark the
   half is (Trude, 8 October 2026): an amber edge and a faint amber wash for
   the day shift, indigo for the night. A shade apart read as one grey on a
   full month, and a light half over a dark one would be a theme of its own
   inside each day. The same two colours mark the shelf's Day and Night
   chips, which is the key to them, and the shift cards in the other views. */
:root {
  --lg-day: #ef9f27; --lg-day-wash: rgba(239, 159, 39, .07);
  --lg-night: #8b84e6; --lg-night-wash: rgba(127, 119, 221, .11);
}
:root[data-theme="light"] {
  --lg-day: #c8780f; --lg-day-wash: rgba(200, 120, 15, .08);
  --lg-night: #534ab7; --lg-night-wash: rgba(83, 74, 183, .08);
}
.lg-half-day { border-left: 3px solid var(--lg-day); background: var(--lg-day-wash); }
.lg-half-night { border-left: 3px solid var(--lg-night); background: var(--lg-night-wash); border-radius: 0 0 7px 7px; }
.lg-shiftchip[data-period="day"], .lg-shift.lg-shift-day { border-left: 3px solid var(--lg-day); }
.lg-shiftchip[data-period="night"], .lg-shift.lg-shift-night { border-left: 3px solid var(--lg-night); }
.lg-half.drag-over { outline: 2px dashed var(--accent); outline-offset: -2px; }
.lg-half .lg-day-orders { display: contents; }
/* The month view's order: one pill, "1/3 DT" — drivers out of trucks, then
   the code — side by side with the rest of its half, in its job's colour.
   The whole of it is in the pill's tip. */
.lg-order.compact { display: inline-flex; align-items: center; padding: 1px 8px; border: 1px solid var(--chip-color); border-radius: 10px; font-size: 11.5px; white-space: nowrap; max-width: 100%; position: relative; }
.lg-order.compact.continuation { border-style: dashed; }
.lg-order.compact.no-shift { opacity: .6; }
.lg-order.compact .lg-qty { overflow: hidden; text-overflow: ellipsis; }
.lg-order.compact .lg-fillmini { font-size: inherit; }
/* The cross takes no room in the chip: it sits on its corner, on hover. */
.lg-order.compact .chip-x {
  position: absolute; top: -6px; right: -5px; width: 14px; height: 14px; padding: 0; line-height: 12px; font-size: 11px;
  border-radius: 50%; background: var(--panel-2); border: 1px solid var(--line); display: none; z-index: 1;
}
.lg-order.compact:hover .chip-x { display: block; }
.lg-fillmini { font-size: 10.5px; font-weight: 700; color: var(--accent-2); }
.lg-fillmini.full { color: var(--green); }
.lg-code { font: 800 10.5px ui-monospace, Consolas, monospace; border: 1px solid var(--line); border-radius: 4px; padding: 1px 4px; color: var(--accent); background: var(--panel); flex: 0 0 auto; }
.lg-chip { display: flex; align-items: center; gap: 6px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; font-size: 12px; cursor: grab; }
.lg-chip[draggable="false"] { cursor: default; }
.lg-chip .ico { font-size: 13px; }
.lg-chip-name { font-weight: 700; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* A truck type on the shelf: how many, then its name, and nothing else. */
.lg-type { padding: 4px 8px; flex: 1; min-width: 0; }
.lg-typerow { display: flex; align-items: center; gap: 6px; }
.lg-typerow .lg-count { width: 46px; }
.lg-count-in {
  width: 46px; flex: 0 0 auto; text-align: right; font-weight: 800; font-size: 12px; font-family: inherit;
  background: var(--panel); border: 1px solid var(--line); color: var(--accent-2); border-radius: 6px; padding: 3px 5px;
}
.lg-count-in:focus { border-color: var(--accent); outline: none; }
.lg-count { font-weight: 800; color: var(--accent-2); min-width: 16px; text-align: right; flex: 0 0 auto; }
/* An order's window is the shift card's look (.shift-head and the rest are
   the card's own rules): the card is given a class of its own only because
   body.read-only locks every input inside .shift-card, and somebody with
   Fleet's role and not Operations' has to be able to type in this one. */
.lg-order-card {
  width: 320px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); display: flex; flex-direction: column; overflow: hidden;
}
.lg-order-card .shift-time-row.lg-one { grid-template-columns: 1fr; }
.lg-order-qty {
  flex: 0 0 52px; width: 52px; background: var(--panel-2); border: 1px solid var(--line); color: var(--text);
  border-radius: 5px; padding: 3px 5px; font-size: 14px; font-weight: 700; text-align: center; outline: none;
}
.lg-order-qty:focus { border-color: var(--accent); }
.lg-order-what { font-weight: 700; font-size: 14px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lg-order-notes {
  width: 100%; margin-top: 6px; background: var(--panel-2); border: 1px solid var(--line); color: var(--text);
  border-radius: 5px; padding: 5px 7px; font: inherit; font-size: 12px; resize: vertical; outline: none;
}
.lg-order-notes:focus { border-color: var(--accent); }
/* Who is seated on an order, in its window: a zone per shift. */
.lg-od-shift { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: 12px; padding: 0 12px 10px; }
.lg-od-none { color: var(--text-faint); font-style: italic; font-size: 11.5px; }
.lg-od-driver { display: inline-flex; align-items: center; gap: 4px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; padding: 1px 4px 1px 8px; font-weight: 700; }
.lg-od-driver i { font-style: normal; color: var(--accent-2); font-size: 10px; }
.lg-grid-wrap { overflow: auto; min-width: 0; }
.lg-nav { display: flex; align-items: center; gap: 6px; }
.lg-nav .btn { padding: 5px 10px; }
.lg-title { font-weight: 800; font-size: 14px; margin-left: 8px; }
.lg-views { display: flex; gap: 4px; }
.lg-month { display: flex; flex-direction: column; gap: 4px; }
.lg-dow { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--text-faint); padding: 0 4px; }
.lg-week-row { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.lg-days { display: grid; gap: 8px; }
.lg-week { grid-template-columns: repeat(7, minmax(250px, 1fr)); }
.lg-oneday { grid-template-columns: minmax(300px, 640px); }
.lg-day { background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; min-height: 120px; display: flex; flex-direction: column; }
.lg-day.other-month { opacity: .5; }
.lg-day.today { border-color: var(--accent); }
.lg-day.drag-over { outline: 2px dashed var(--accent); outline-offset: -2px; }
.lg-day-head { font-size: 11px; font-weight: 800; color: var(--text-dim); padding: 5px 8px 2px; cursor: pointer; }
.lg-day-month { cursor: pointer; }
/* The day at a glance: a line a code, day and night side by side. */
.lg-daytally { display: flex; flex-direction: column; gap: 2px; margin-bottom: 12px; font-size: 12px; }
.lg-daytally:empty { display: none; }
/* Trude asked for the day window to be larger (14 October 2026): wider, with the order cards two across so about twice as many show before the list scrolls. */
.lg-day-modal { width: min(960px, 94vw); max-height: 92vh; }
.lg-day-modal .day-detail-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; max-height: 64vh; }
@media (max-width: 700px) { .lg-day-modal .day-detail-list { grid-template-columns: minmax(0, 1fr); } }
.lg-dt-row { display: grid; grid-template-columns: 38px 1fr 1fr 96px; gap: 8px; align-items: baseline; padding: 4px 8px; border-radius: 6px; background: var(--panel-2); }
.lg-dt-row > :nth-child(2) { border-left: 3px solid var(--lg-day); padding-left: 6px; }
.lg-dt-row > :nth-child(3) { border-left: 3px solid var(--lg-night); padding-left: 6px; }
.lg-dt-head { background: none; font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--text-faint); padding-bottom: 0; }
.lg-dt-head > :nth-child(n) { border-left-color: transparent; }
.lg-dt-none { color: var(--text-faint); }
.lg-dt-over, .lg-dt-unset { font-size: 10.5px; font-weight: 700; white-space: nowrap; }
.lg-dt-over { color: var(--red); }
.lg-dt-unset { color: var(--accent-2); display: block; }
.lg-day-readonly .day-detail-row { cursor: default; }
.lg-day.today .lg-day-head { color: var(--accent); }
.lg-day-orders { display: flex; flex-direction: column; gap: 6px; padding: 4px; }
.lg-order { border: 1px solid var(--line); border-left: 4px solid var(--chip-color); border-radius: 8px; background: var(--panel); padding: 6px 8px; font-size: 12px; }
.lg-order.continuation { border-left-style: dashed; }
.lg-order.drag-over { border-color: var(--accent); }
/* In the week and day views an order is a shift card: the card's head
   edge to edge, then its shifts. The pill of the month view keeps its own
   padding. */
.lg-order:not(.compact) { padding: 0; overflow: hidden; border-radius: var(--radius); box-shadow: var(--shadow); }
.lg-order-sub { display: flex; flex-wrap: wrap; gap: 2px 8px; margin-top: 4px; }
.lg-job.unset { color: var(--text-faint); font-style: italic; }
.lg-order-note { margin-top: 5px; color: var(--text-dim); font-size: 11px; white-space: pre-wrap; }
.lg-qty { cursor: pointer; }
.lg-job, .lg-span { color: var(--text-dim); font-size: 11px; }
.lg-cdl { font-size: 9.5px; font-weight: 700; border: 1px solid var(--line); border-radius: 4px; padding: 0 5px; color: var(--accent-2); margin-left: auto; }
.lg-mini { display: flex; flex-wrap: wrap; gap: 3px 8px; font-size: 11px; color: var(--text-dim); margin-top: 3px; }
.lg-mini b { color: var(--accent-2); }
.lg-shifts { display: flex; flex-direction: column; gap: 5px; padding: 8px; }
.lg-shift { border: 1px solid var(--line); border-radius: 7px; padding: 5px 7px; background: var(--panel-2); }
.lg-shift.drag-over { border-color: var(--green); }
.lg-shift-head { display: flex; align-items: center; gap: 6px; font-size: 12px; }
.lg-shift-head .zone-label { padding: 0; flex: 1; }
.lg-seats { display: flex; flex-direction: column; gap: 3px; margin-top: 4px; }
.lg-seat { display: flex; align-items: center; gap: 6px; font-size: 11.5px; padding: 2px 4px; border-radius: 5px; }
.lg-seat.open { color: var(--text-faint); border: 1px dashed var(--line); }
.lg-seat-n { width: 14px; text-align: right; color: var(--text-faint); font-size: 10px; flex: 0 0 auto; }
.lg-driver { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.lg-driver i { font-style: normal; font-weight: 700; color: var(--accent-2); font-size: 10px; margin-left: 3px; }
.lg-shift-head b { white-space: nowrap; }
.lg-shift-drop { border: 1px dashed var(--line); border-radius: 7px; padding: 5px; text-align: center; color: var(--text-faint); font-size: 11px; }
body.no-logistics .lg-shelf .frp-hint { display: none; }
.emp-unit { font-size: 12px; color: var(--text-dim); align-self: flex-end; padding-bottom: 8px; }
/* From the estimate on a shift card: a reading, no controls. A position or
   machine met is green, one short amber — the same amber as the Calendar's
   no-fence flag. */
.est-hand { display: flex; flex-direction: column; gap: 3px; padding: 6px 8px; border-radius: 8px; background: var(--panel-2); border: 1px solid var(--line); font-size: 12px; }
.est-hand-head { font-weight: 700; }
.est-hand-night { font-size: 10px; font-weight: 700; text-transform: uppercase; color: var(--purple); margin-left: 4px; }
.est-hand-line { color: var(--text-dim); }
.est-hand-sub { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-faint); margin-top: 3px; }
.est-hand-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.est-hand-list li::before { content: "\25CF"; margin-right: 5px; font-size: 9px; }
.est-hand-list li.met { color: var(--green); }
.est-hand-list li.short { color: var(--warn, #e0a030); }
/* Production on a shift card: a line per phase, a night at a time. */
.prod-zone { display: flex; flex-direction: column; gap: 4px; padding: 6px 8px; border-radius: 8px; background: var(--panel-2); border: 1px solid var(--line); }
.prod-nights { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 4px; }
.prod-night { background: var(--panel); border: 1px solid var(--line); color: var(--text-dim); border-radius: 10px; padding: 2px 8px; font-size: 11px; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.prod-night.active { border-color: var(--accent); color: var(--text); }
.prod-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); display: inline-block; }
.prod-one-night { font-size: 11px; color: var(--text-faint); }
/* The phase's name takes a line of its own; the figures wrap under it,
   since a shift card is narrow and a name squeezed to nothing says nothing. */
.prod-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: 12px; padding: 3px 0; }
.prod-line + .prod-line { border-top: 1px solid var(--line); }
.prod-line .phase-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--phase-color); flex: 0 0 auto; }
.prod-phase { flex: 1 1 calc(100% - 16px); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.prod-qty, .prod-hours, .prod-unit-in {
  background: var(--panel); border: 1px solid var(--line); color: var(--text); border-radius: 6px; padding: 3px 6px; font-size: 12px; font-family: inherit;
}
.prod-qty { width: 76px; } .prod-hours { width: 56px; } .prod-unit-in { width: 54px; text-transform: uppercase; }
.prod-unit, .prod-in { color: var(--text-dim); font-size: 11px; }
.prod-rate { color: var(--text-faint); font-size: 11px; white-space: nowrap; min-width: 60px; text-align: right; }
/* The Skills tab: four lists, each with an add row and names edited in place. */
.emp-add { margin-bottom: 8px; }
.emp-add .sc-field input.wide { min-width: 220px; }
.emp-add .sc-field input.narrow { width: 70px; }
.emp-llist { max-height: none; margin-bottom: 14px; }
.emp-lrow .user-name { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.emp-inline {
  background: var(--panel); border: 1px solid var(--line); color: var(--text); border-radius: 6px;
  padding: 4px 7px; font-size: 12.5px; font-family: inherit; min-width: 160px;
}
.emp-inline[type="number"] { min-width: 0; width: 60px; }
.emp-inline:focus { border-color: var(--accent); outline: none; }
.emp-rank { font-size: 11.5px; color: var(--text-dim); display: inline-flex; align-items: center; gap: 5px; }
@media (max-width: 760px) { .emp-form, .emp-driver { grid-template-columns: 1fr; } }

body.read-only [data-role="smart-zone"],
body.read-only .set-zone,
body.read-only #btnNewJob,
body.read-only #btnNewRoster,
body.read-only #btnDeleteJob,
body.read-only #frNewDraft,
body.read-only .chip-x:not(.truck-chip .chip-x):not(#equipRosterPage .chip-x),
body.read-only .foreman-clear,
body.read-only .set-unlink,
body.read-only .set-sync,
body.read-only [data-act="del-set"],
body.read-only [data-act="store"],
body.read-only #jobDocUploadBtn { display: none !important; }
/* What a role can't use isn't offered. One class on <body> for each
   permission the person lacks (set in loadMe), one on the control for the
   permission it needs. The server refuses these whatever the page shows;
   this is so nobody is handed a button that only ever says no. */
body.no-operations .needs-operations,
body.no-logistics .needs-logistics,
body.no-manage_data .needs-manage_data,
body.no-admin .needs-admin { display: none !important; }
/* "read-only" is somebody who may not change Operations, which says nothing
   about Logistics. So its rule for crosses leaves two kinds alone: those on
   the Logistics board, which are only drawn for someone who may work on it,
   and the one on a shift's truck — logistics' although it sits on a card
   that is otherwise Operations' — which goes by its own permission here. */
body.no-logistics .truck-chip .chip-x { display: none !important; }
body.read-only .shift-card input,
body.read-only .shift-card select { pointer-events: none; opacity: .75; }
.rd-stat {
  flex: 1 1 120px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 9px;
  padding: 9px 12px; display: flex; flex-direction: column; gap: 2px;
}
.rd-stat b { font-size: 19px; line-height: 1.1; }
.rd-stat span { font-size: 10.5px; color: var(--text-dim); text-transform: uppercase; letter-spacing: .4px; }
@keyframes rd-flash { 0%,
100% { opacity: 1; } 50% { opacity: .25; } }

.shift-detail-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  margin-bottom: 10px;
}
.shift-detail-job { font-size: 13px; font-weight: 700; }
.shift-detail-job.unset { font-weight: 400; font-size: 11.5px; color: var(--text-dim); }
.zone-static { border-style: solid !important; border-color: var(--line) !important; background: transparent !important; }
.zone-static .empty-hint { font-style: italic; color: var(--text-faint); }
.shift-card-focus { box-shadow: 0 0 0 2px var(--accent); transition: box-shadow .2s ease; }
.job-docs-list { display: flex; flex-direction: column; gap: 6px; max-height: 45vh; overflow-y: auto; }
.job-docs-empty { color: var(--text-faint); font-size: 12.5px; padding: 10px 2px; }
.job-doc-row {
  display: flex; align-items: center; gap: 10px;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; padding: 9px 11px;
}
.job-doc-row .jdicon { font-size: 16px; flex: 0 0 auto; }
.job-doc-row .jdmain { flex: 1; min-width: 0; }
.job-doc-row .jdname { font-weight: 700; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.job-doc-row .jdmeta { font-size: 10.5px; color: var(--text-faint); margin-top: 2px; }
.job-doc-row .jdactions { display: flex; gap: 4px; flex: 0 0 auto; }
.job-doc-row .jdactions button {
  background: none; border: none; color: var(--text-faint); font-size: 14px; padding: 3px 5px; cursor: pointer;
}
.job-doc-row .jdactions button:hover { color: var(--text); }
.job-doc-row .jdactions .jd-delete:hover { color: var(--red); }

#equipCategoriesSearch { margin-bottom: 10px; }
.equip-cat-list { display: flex; flex-direction: column; gap: 4px; max-height: 58vh; overflow-y: auto; }
.equip-cat-row {
  display: grid; grid-template-columns: 1fr 52px 92px 82px 92px 18px; gap: 8px; align-items: center;
  padding: 6px 8px; border-radius: 7px; background: var(--panel-2); border: 1px solid var(--line);
}
.equip-cat-row.equip-cat-head {
  background: none; border: none; padding: 0 8px; font-size: 10px; letter-spacing: .5px;
  text-transform: uppercase; color: var(--text-faint); position: sticky; top: 0;
}
.equip-cat-row input {
  background: var(--panel); border: 1px solid var(--line); color: var(--text);
  border-radius: 6px; padding: 5px 7px; font-size: 12px; width: 100%; outline: none;
}
.equip-cat-row input:focus { border-color: var(--accent); }
.equip-cat-row .equip-cat-code { text-transform: uppercase; }
.equip-cat-row .equip-cat-rate-override { border-color: var(--accent); box-shadow: inset 2px 0 0 var(--accent); }
.equip-cat-current { font-size: 12px; color: var(--text); text-align: right; font-variant-numeric: tabular-nums; }
.equip-cat-current-none { color: var(--text-faint); }
.equip-cat-row:has(.equip-cat-current:not(.equip-cat-current-none)) .equip-cat-rate { opacity: .55; }

.rcode-row {
  display: grid; grid-template-columns: 110px 1fr 220px 80px 18px 18px; gap: 8px; align-items: center;
  padding: 6px 8px; border-radius: 7px; background: var(--panel-2); border: 1px solid var(--line);
}
.rcode-row.rcode-head {
  background: none; border: none; padding: 0 8px; font-size: 10px; letter-spacing: .5px;
  text-transform: uppercase; color: var(--text-faint); position: sticky; top: 0;
}
.rcode-row input {
  background: var(--panel); border: 1px solid var(--line); color: var(--text);
  border-radius: 6px; padding: 5px 7px; font-size: 12px; width: 100%; outline: none;
}
.rcode-row input:focus { border-color: var(--accent); }
.rcode-row .rcode-code { text-transform: uppercase; }
.rcode-kind { font-size: 11px; color: var(--text-faint); }
.rcode-saved { color: var(--green); font-size: 14px; opacity: 0; transition: opacity .25s; }
.rcode-saved.show { opacity: 1; }
.rcode-delete { background: none; border: none; color: var(--text-faint); font-size: 15px; cursor: pointer; }
.rcode-delete:hover { color: var(--red); }

.token-phase { border-left: 3px solid var(--phase-color, var(--accent)); }
.token-phase .token-icon { background: var(--phase-color, var(--accent)); }

.phase-tray {
  margin: 0 12px 10px;
  min-height: 34px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  padding: 6px;
  display: flex; flex-wrap: wrap; gap: 5px;
  transition: all .15s ease;
}
.phase-tray.has-phase { border-style: solid; }
.phase-tray.drag-over { border-color: var(--accent); background: #241a0d; }
.phase-chip {
  display: flex; align-items: center; gap: 6px;
  background: var(--panel-2); border: 1px solid var(--phase-color, var(--accent));
  border-radius: 7px; padding: 4px 8px; font-size: 11px; max-width: 100%;
}
.phase-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--phase-color, var(--accent)); flex: 0 0 auto; }
.phase-name { font-size: 11.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.phase-list { display: flex; flex-direction: column; gap: 4px; max-height: 58vh; overflow-y: auto; }
.phase-row {
  display: grid; grid-template-columns: 32px 1fr 64px 18px 18px; gap: 8px; align-items: center;
  padding: 6px 8px; border-radius: 7px; background: var(--panel-2); border: 1px solid var(--line);
}
.phase-row input[type="color"] {
  width: 32px; height: 28px; padding: 0; border: 1px solid var(--line); border-radius: 6px;
  background: var(--panel); cursor: pointer;
}
.phase-row input[type="text"] {
  background: var(--panel); border: 1px solid var(--line); color: var(--text);
  border-radius: 6px; padding: 5px 7px; font-size: 12px; width: 100%; outline: none;
}
.phase-row input[type="text"]:focus { border-color: var(--accent); }
.phase-saved { color: var(--green); font-size: 14px; opacity: 0; transition: opacity .25s; }
.phase-saved.show { opacity: 1; }
.phase-delete { background: none; border: none; color: var(--text-faint); font-size: 15px; cursor: pointer; }
.phase-delete:hover { color: var(--red); }
.equip-cat-count { font-size: 10.5px; color: var(--text-faint); text-align: center; }
.equip-cat-saved { color: var(--green); font-size: 14px; opacity: 0; transition: opacity .25s; }
.equip-cat-saved.show { opacity: 1; }

.logi-asset-list { display: flex; flex-direction: column; gap: 4px; max-height: 58vh; overflow-y: auto; }
.logi-asset-row { display: grid; grid-template-columns: 0.9fr 1.1fr 0.75fr 0.9fr 0.9fr 0.8fr 1.4fr 0.6fr 0.8fr 1.1fr 1fr auto; gap: 5px; align-items: center; }
.logi-asset-row.logi-asset-head { font-size: 10px; text-transform: uppercase; letter-spacing: .5px; color: var(--text-faint); padding: 0 2px; }
.logi-asset-row input { background: var(--panel-2); border: 1px solid var(--line); color: var(--text); border-radius: 5px; padding: 4px 6px; font-size: 11.5px; min-width: 0; }
.logi-asset-row input:focus { border-color: var(--accent); outline: none; }
.logi-asset-row input.logi-saved { border-color: var(--green); }
.logi-asset-row .logi-driver { font-size: 11px; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.logi-del { color: var(--text-faint); }
.logi-del:hover { color: var(--red); }

.dashboard-view {
  position: fixed; inset: 0; background: var(--bg); z-index: 400;
  display: flex; flex-direction: column; padding: 0;
}
.dash-topbar {
  height: 64px; display: flex; align-items: center; justify-content: space-between;
  padding: 0 26px; border-bottom: 1px solid var(--line); background: var(--bg-deck);
}
.dash-topbar .brand-title { font-size: 18px; }
.dash-clock { font-size: 20px; font-weight: 700; color: var(--accent-2); letter-spacing: 1px; font-variant-numeric: tabular-nums; }
.dash-grid {
  flex: 1; overflow-y: auto; padding: 22px 26px; display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 18px; align-content: start;
}
.dash-job {
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
  box-shadow: var(--shadow);
}
.dash-job-head {
  padding: 14px 18px; border-bottom: 1px solid var(--line-soft);
  border-left: 5px solid var(--accent);
  display: flex; justify-content: space-between; align-items: baseline;
}
.dash-job-head .name { font-size: 17px; font-weight: 800; }
.dash-job-head .date { font-size: 12.5px; color: var(--text-dim); }
.dash-shift { padding: 12px 18px; border-bottom: 1px solid var(--line-soft); }
.dash-shift:last-child { border-bottom: none; }
.dash-shift-title { font-weight: 700; font-size: 13.5px; display: flex; justify-content: space-between; color: var(--accent-2); }
.dash-shift-time { color: var(--text-dim); font-size: 11.5px; font-weight: 500; }
.dash-row { font-size: 12px; color: var(--text-dim); margin-top: 6px; display: flex; flex-wrap: wrap; gap: 6px; }
.dash-pill { background: var(--panel-2); border: 1px solid var(--line); border-radius: 12px; padding: 3px 9px; font-size: 11px; }
.dash-pill.gold { border-color: var(--gold); color: var(--gold); font-weight: 700; }
.dash-pill.phase { border-color: var(--chip-color, var(--accent)); color: var(--chip-color, var(--accent)); font-weight: 700; }
/* Approved time off on the day the wall is showing: the shift card's own
   dashed red edge and red OFF, a size up because the wall is read from
   across a room. After .gold, so a foreman who is off gets the red edge
   and keeps the gold name. */
.dash-pill.off { border-color: var(--red); border-style: dashed; }
.dash-off {
  font-size: 9.5px; font-weight: 800; letter-spacing: .4px; border-radius: 3px; padding: 0 4px; margin-left: 3px;
  color: var(--red); background: color-mix(in srgb, var(--red) 14%, transparent);
}

.rail-shelf { container-type: inline-size; }
@container (max-width: 520px) {
  .shelf-row { grid-template-columns: 1fr; gap: 0; }
}
@container (max-width: 420px) {
  .rail-shelf .shelf-hint { display: none; }
  .rail-shelf .token { padding: 5px 8px; gap: 7px; }
  .rail-shelf .token-icon { width: 24px; height: 24px; font-size: 12px; }
}

.rail-toggle {
  display: flex; align-items: center; gap: 6px; width: 100%;
  background: none; border: 1px dashed transparent; border-radius: 6px; color: var(--text-faint);
  font-size: 10px; letter-spacing: 1px; font-weight: 700; padding: 3px 4px; margin: -6px 0 6px;
}
.rail-toggle:hover { color: var(--accent); border-color: var(--line); }
.app-shell:not(.jobs-collapsed) .rail-jobs .rail-toggle,
.app-shell:not(.shelf-collapsed) .rail-shelf .rail-toggle { display: none; }
.app-shell.jobs-collapsed .rail-jobs,
.app-shell.shelf-collapsed .rail-shelf { cursor: pointer; }
.app-shell.jobs-collapsed .rail-jobs:hover,
.app-shell.shelf-collapsed .rail-shelf:hover { background: var(--panel-2); }

.rail-handle {
  position: absolute; top: 18px; z-index: 30;
  width: 24px; height: 24px; border-radius: 50%; padding: 0;
  display: grid; place-items: center;
  background: var(--panel); border: 1px solid var(--line); color: var(--text-dim);
  box-shadow: 0 2px 8px rgba(0,0,0,.35); font-size: 11px; line-height: 1;
  transition: left .2s ease, right .2s ease, color .12s, border-color .12s, transform .12s;
}
.rail-handle:hover { color: var(--accent); border-color: var(--accent); transform: scale(1.12); }
.rail-handle span { transition: transform .2s ease; display: block; }
.rail-handle-left { left: calc(var(--rail-left) - 12px); }
.rail-handle-right { right: calc(var(--rail-right) - 12px); }
.app-shell.jobs-collapsed .rail-handle-left span,
.app-shell.shelf-collapsed .rail-handle-right span { transform: scaleX(-1); }

.rail-resizer {
  position: absolute; top: 0; bottom: 0; z-index: 20; width: 8px;
  right: calc(var(--rail-right) - 4px); cursor: col-resize;
}
.rail-resizer::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 3px; width: 2px;
  background: var(--accent); opacity: 0; transition: opacity .15s;
}
.rail-resizer:hover::after,
.app-shell.resizing .rail-resizer::after { opacity: .8; }
.app-shell.shelf-collapsed .rail-resizer { display: none; }
.app-shell.resizing { transition: none; user-select: none; cursor: col-resize; }
.app-shell.resizing .rail-handle { transition: none; }
.app-shell.resizing iframe,
.app-shell.resizing .deck-wrap { pointer-events: none; }
.rail-toggle-label { display: none; }
.rail-shelf .rail-toggle { justify-content: flex-start; }
.rail-jobs .rail-toggle { justify-content: flex-end; }
.app-shell.jobs-collapsed .rail-jobs,
.app-shell.shelf-collapsed .rail-shelf { padding: 10px 4px; overflow: hidden; }
.app-shell.jobs-collapsed .rail-jobs > :not(.rail-toggle),
.app-shell.shelf-collapsed .rail-shelf > :not(.rail-toggle) { display: none !important; }
.app-shell.jobs-collapsed .rail-jobs .rail-toggle,
.app-shell.shelf-collapsed .rail-shelf .rail-toggle {
  flex-direction: column; justify-content: flex-start; height: 100%; margin: 0; padding: 6px 0; gap: 10px;
}
.app-shell.jobs-collapsed .rail-jobs .rail-toggle-label,
.app-shell.shelf-collapsed .rail-shelf .rail-toggle-label { display: block; writing-mode: vertical-rl; white-space: nowrap; }
.app-shell.jobs-collapsed .rail-jobs .rail-toggle-arrow,
.app-shell.shelf-collapsed .rail-shelf .rail-toggle-arrow { transform: scaleX(-1); }

.deck-meta { flex-wrap: wrap; row-gap: 8px; }
.deck-header { flex-wrap: wrap; }
#calendarMonthLabel { white-space: nowrap; }

@media (max-width: 1600px) {
  .topbar-actions .btn-label { display: none; }
  .topbar-actions .btn { padding: 8px 11px; }
  .topbar-actions .ico { font-size: 15px; }
  .deck-header > .deck-title-block > .shelf-hint { display: none; }
  .deck-header { padding: 12px 16px; }
  .deck { padding: 16px; gap: 14px; }
  .meta-text { width: 150px; }
}
@media (max-width: 1100px) {
  .brand-text { display: none; }
}

:root[data-theme="light"] {
  --bg: #f2f3f6;
  --bg-deck: #fbfbfc;
  --panel: #ffffff;
  --panel-2: #f1f3f6;
  --panel-3: #e6e9ee80;
  --line: #d7dce3;
  --line-soft: #e7eaef;
  --text: #1b2029;
  --text-dim: #5b6472;
  --text-faint: #8a93a1;
  --accent: #e2740f;
  --accent-2: #c25c00;
  --gold: #9c7300;
  --blue: #1f6fd1;
  --green: #128a5c;
  --purple: #8339e0;
  --red: #d6304a;
  --shadow: 0 6px 20px rgba(30,35,45,.1);
}
:root[data-theme="light"] input[type="date"],
:root[data-theme="light"] input[type="time"] {
  color-scheme: light;
}
:root[data-theme="light"] ::-webkit-scrollbar-thumb { background: #c7cdd6; }
:root[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: #aab1bd; }
:root[data-theme="light"] .btn:hover { background: #ebeef2; }
:root[data-theme="light"] .btn-icon:hover { background: #ebeef2; }
:root[data-theme="light"] .job-card:hover { background: #eef1f5; }
:root[data-theme="light"] .job-card.active { background: #fbf1d4; }
:root[data-theme="light"] .status-planned { background: #dde8fa; color: #2f5fa3; }
:root[data-theme="light"] .status-active { background: #d9f3e6; color: #0f7a4f; }
:root[data-theme="light"] .status-completed { background: #e6e7ea; color: var(--text-faint); }
:root[data-theme="light"] .daynight-btn.active { background: #fbe6cc; }
:root[data-theme="light"] .set-zone.drag-over { background: #e2f7eb; }
:root[data-theme="light"] .set-chip { background: #e6f6ec; border-color: #7bc79e; }
:root[data-theme="light"] .set-chip.kind-roster { background: #e2edfb; border-color: #86aedb; }
:root[data-theme="light"] .set-chip.kind-equipment_set { background: #f1e7fb; border-color: #b78fe3; }
:root[data-theme="light"] .foreman-slot.has-foreman { background: #fbf1d4; }
:root[data-theme="light"] .foreman-slot.drag-over { background: #fbe6cc; }
:root[data-theme="light"] .crew-tray.drag-over { background: #e1ecfb; }
:root[data-theme="light"] .chip-avatar { background: #cfdcf0; color: #1f3f66; }
:root[data-theme="light"] .equip-zone.drag-over { background: #fbe6cc; }
:root[data-theme="light"] .phase-tray.drag-over { background: #fbe6cc; }
:root[data-theme="light"] .equip-chip-placeholder:hover { background: #fbe6cc; }
:root[data-theme="light"] .token:hover { background: #eef1f5; }
:root[data-theme="light"] .token-icon { background: #cfdcf0; color: #1f3f66; }
:root[data-theme="light"] .token-equip-category .token-icon { background: #e5e8ed; }
:root[data-theme="light"] .equip-picker-row:hover:not(:disabled) { background: #eef1f5; }
:root[data-theme="light"] .cal-month-drop.drag-over { background: #fbe6cc; }
:root[data-theme="light"] .cal-day.drag-over { background: #e1ecfb; }
:root[data-theme="light"] .cal-new-shift-zone.armed,
:root[data-theme="light"] #shiftsPanelSection .token.draw-armed,
:root[data-theme="light"] .cal-day.draw-sel,
:root[data-theme="light"] .cal-week-day.draw-sel,
:root[data-theme="light"] .cal-day-view.draw-sel { background: #fff1e3; }
:root[data-theme="light"] .cal-week-day.drag-over { background: #e1ecfb; }
:root[data-theme="light"] .cal-day-view-drop.drag-over { background: #fbe6cc; }
:root[data-theme="light"] .day-detail-row:hover { background: #eef1f5; }
:root[data-theme="light"] .equip-chip-placeholder { background: #fffaf3; }
:root[data-theme="light"] body {
  background-image:
    radial-gradient(circle at 15% 0%, #e2e8f5 0%, transparent 45%),
    repeating-linear-gradient(0deg, #00000006 0px, #00000006 1px, transparent 1px, transparent 42px),
    repeating-linear-gradient(90deg, #00000006 0px, #00000006 1px, transparent 1px, transparent 42px);
}
:root[data-theme="light"] .deck {
  background-image: repeating-linear-gradient(90deg, transparent, transparent 338px, #00000008 338px, #00000008 340px);
}
:root[data-theme="light"] .token-count-badge { background: #00000012; }
:root[data-theme="light"] .set-deploy-tag { background: #0000000a; }
:root[data-theme="light"] .token-set { background: linear-gradient(90deg, #d9f2e460, var(--panel-2)); }
@keyframes rain-pulse-light { 0%,
100% { outline-color: #1f6fd130; } 50% { outline-color: #1f6fd1a0; } }
:root[data-theme="light"] .cal-day.rain-alert,
:root[data-theme="light"] .cal-week-day.rain-alert,
:root[data-theme="light"] .cal-day-view-weather.rain-alert,
:root[data-theme="light"] .day-detail-weather.rain-alert {
  outline-color: #1f6fd130;
  animation-name: rain-pulse-light;
}
:root[data-theme="light"] .cal-day-view-weather.cold-alert,
:root[data-theme="light"] .day-detail-weather.cold-alert {
  outline-color: #1f6fd160;
}
@keyframes prod-pop { from { transform: scale(.8); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.modal-xl { width: 940px; max-width: 96vw; max-height: 92vh; overflow-y: auto; }

.fr-page { height: calc(100vh - 58px); overflow: auto; padding: 14px 18px 24px; background: var(--bg-deck); }
.fr-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.fr-titleblock { flex: 1; min-width: 240px; }
.fr-title { font-size: 20px; font-weight: 800; letter-spacing: .3px; }
#frRosterSelect,
#frSectionFilter,
.fr-select { background: var(--panel-2); border: 1px solid var(--line); color: var(--text); border-radius: 6px; padding: 6px 8px; font-size: 12.5px; }
.fr-search { width: 260px; margin: 0; }
.fr-toggle { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text-dim); cursor: pointer; }
.fr-legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: 11px; color: var(--text-dim); margin-bottom: 10px; }
.fr-legend span { display: inline-flex; align-items: center; gap: 5px; }
.fr-sw { width: 12px; height: 12px; border-radius: 3px; display: inline-block; border: 1px solid var(--line); }
.fr-sw.new { background: #ffe44d; } .fr-sw.resign { background: #ff5c5c; } .fr-sw.leave { background: #d86dcd; }
.fr-sw.open { background: none; border: 1px dashed var(--red); }

.fr-sheet { display: flex; flex-direction: column; gap: 12px; min-width: 1180px; }
.fr-band {
  display: flex; align-items: stretch; gap: 3px; overflow-x: auto;
  background: var(--line); border: 1px solid var(--line); border-radius: 8px;
}
.fr-cat { display: flex; flex-direction: column; flex: 0 0 auto; background: hsl(210 15% 12%); }
.fr-cat + .fr-cat { border-left: 1px solid var(--line); }
.fr-cat-head {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 5px 8px; background: var(--panel-2); border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 2;
}
.fr-cat-grip { cursor: grab; color: var(--text-faint); font-size: 12px; line-height: 1; }
.fr-cat-grip:active { cursor: grabbing; }
.fr-cat-name {
  font-size: 11.5px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--text);
  white-space: nowrap;
}
.editing .fr-cat-name { cursor: text; }
.fr-cat-n { font-size: 10px; font-weight: 700; color: var(--accent); }
.fr-cat-actions { display: flex; gap: 3px; }
.fr-cat-actions button,
.fr-group-pm button,
.fr-cat-add {
  background: var(--panel); border: 1px solid var(--line); color: var(--text-dim);
  border-radius: 4px; font-size: 10px; line-height: 1.4; padding: 0 5px; cursor: pointer;
}
.fr-cat-actions button:hover,
.fr-group-pm button:hover,
.fr-cat-add:hover { color: var(--text); border-color: var(--accent); }
.fr-cat-add { align-self: flex-start; margin: 4px 0 0; padding: 2px 8px; font-size: 10.5px; }

/* Field Roster categories fold to a thin strip with the name running down
   it, the way a Logistics yard destination does.
   
   Every rule here is held inside #frSheet on purpose. A Logistics
   destination is also a .fr-cat — it borrows the roster's styles — so an
   unscoped .fr-cat.collapsed reaches across to that board as well, and the
   Jobs column there stacks rather than spreading, where turning a name on
   its side spends height instead of saving width. */
#frSheet .fr-cat-head { cursor: pointer; }
#frSheet .fr-cat-caret {
  width: 12px; flex: 0 0 auto; text-align: center;
  color: var(--text-dim); font-size: 10px; transition: transform .12s;
}
#frSheet .fr-cat.collapsed .fr-cat-caret { transform: rotate(-90deg); }
#frSheet .fr-cat.collapsed .fr-cat-groups { display: none; }
/* The edit buttons and the drag grip go with the crews; the headcount
   stays, which is the one thing worth reading folded. */
#frSheet .fr-cat.collapsed { flex: 0 0 34px; width: 34px; min-width: 34px; }
#frSheet .fr-cat.collapsed .fr-cat-head {
  writing-mode: vertical-rl; flex: 1 1 auto; justify-content: flex-start; align-items: center;
  gap: 8px; padding: 8px 0; border-bottom: 0; position: static;
}
#frSheet .fr-cat.collapsed .fr-cat-actions,
#frSheet .fr-cat.collapsed .fr-cat-grip { display: none; }
#frSheet .fr-cat.collapsed:hover .fr-cat-head { background: var(--panel-3, #23293380); }

.fr-cat-groups { display: flex; align-items: stretch; flex: 1 1 auto; }
.fr-group { display: flex; flex-direction: column; flex: 0 0 auto; }
.fr-group + .fr-group { border-left: 1px dashed var(--line); }
.fr-group-head {
  min-height: 26px; padding: 4px 6px; text-align: center;
  border-bottom: 1px solid var(--line); background: hsl(210 15% 15%);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
}
.fr-group-head .fr-p { background: none; border: 0; font-weight: 700; padding: 0; }
.fr-group.is-unled .fr-group-head { background: transparent; }
.fr-group-pm {
  display: flex; align-items: center; justify-content: center; gap: 5px;
  padding: 2px 4px; border-bottom: 1px solid var(--line);
}
.fr-group-n { font-size: 9px; text-transform: uppercase; letter-spacing: .4px; color: var(--text-faint); }
.fr-crews { display: flex; align-items: stretch; flex: 1 1 auto; }
.fr-crew { display: flex; flex-direction: column; flex: 0 0 152px; min-width: 0; }
.fr-crew + .fr-crew { border-left: 1px solid var(--line); }
.fr-crew-head {
  display: flex; align-items: center; gap: 4px; padding: 3px 6px;
  background: hsl(210 15% 15%); border-bottom: 1px solid var(--line);
}
.editing .fr-crew-head { padding: 5px 6px; min-height: 24px; }
.fr-crew-grip { flex: 0 0 auto; cursor: grab; color: var(--text-faint); font-size: 11px; line-height: 1; }
.fr-crew-grip:active { cursor: grabbing; }
.editing .fr-count { padding: 5px 0; min-height: 24px; }
.editing .fr-crew-head,
.editing .fr-count { cursor: grab; }
.editing .fr-crew-head:active,
.editing .fr-count:active { cursor: grabbing; }
.editing .fr-crew-head:hover,
.editing .fr-count:hover {
  box-shadow: inset 0 0 0 1px var(--accent);
}
.fr-crew-chosen .fr-crew-head,
.fr-crew-chosen .fr-count { box-shadow: inset 0 0 0 1px var(--accent); }
.fr-crew-ghost { opacity: .35; }
.fr-crew-name {
  font-size: 10px; font-weight: 700; letter-spacing: .3px; color: var(--text-dim);
  flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.editing .fr-crew-name { cursor: text; }
.fr-crew-x { background: none; border: 0; color: var(--text-faint); cursor: pointer; font-size: 12px; line-height: 1; padding: 0 2px; }
.fr-crew-x:hover { color: var(--red); }
.fr-crew .fr-col { flex: 1 1 auto; }
.fr-drop-hint { font-size: 10px; color: var(--text-faint); padding: 3px 4px; text-align: center; }
.fr-no-crews { flex: 0 0 152px; align-self: center; }
.fr-lead-gear {
  background: none; border: 0; color: var(--text-faint); cursor: pointer;
  font-size: 11px; line-height: 1; padding: 0; opacity: 0;
}
.fr-group-head:hover .fr-lead-gear { opacity: 1; }
.fr-lead-gear:hover { color: var(--text); }
.fr-color-pop {
  position: fixed; z-index: 600; display: flex; align-items: center; gap: 6px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
  padding: 6px 8px; box-shadow: 0 10px 28px rgba(0, 0, 0, .45);
}
.fr-color-pop input[type="color"] { width: 34px; height: 24px; padding: 0; border: 1px solid var(--line); background: none; cursor: pointer; }
.fr-color-pop button {
  background: var(--panel-2); border: 1px solid var(--line); color: var(--text-dim);
  border-radius: 5px; font-size: 10.5px; padding: 3px 8px; cursor: pointer;
}
.fr-color-pop button:hover { color: var(--text); border-color: var(--accent); }
.fr-cat-head[style*="background"] .fr-cat-name,
.fr-cat-head[style*="background"] .fr-cat-n,
.fr-crew-head[style*="background"] .fr-crew-name,
.fr-group-head[style*="background"] .fr-p { color: #14181f; }
.fr-cat-head[style*="background"] .fr-cat-caret,
.fr-cat-head[style*="background"] .fr-cat-grip,
.fr-crew-head[style*="background"] .fr-crew-grip,
.fr-crew-head[style*="background"] .fr-crew-x,
.fr-group-head[style*="background"] .fr-lead-gear { color: #3d4654; }
@media print {
  .fr-color-pop { display: none; }
  /* A fold is a way of reading the screen, not of the roster — print it whole. */
  body.roster-mode #frSheet .fr-cat.collapsed .fr-cat-groups { display: flex; }
  body.roster-mode #frSheet .fr-cat.collapsed { width: auto; flex: 0 0 auto; min-width: 0; }
  body.roster-mode #frSheet .fr-cat.collapsed .fr-cat-head { writing-mode: horizontal-tb; }
  body.roster-mode #frSheet .fr-cat-caret,
  body.roster-mode .fr-unit-btn { display: none; }
}
@media print {
  body.roster-mode .fr-band { background: #999; border-color: #999; overflow: visible; }
  body.roster-mode .fr-cat { background: #fff; }
  body.roster-mode .fr-cat-head,
body.roster-mode .fr-crew-head,
body.roster-mode .fr-group-head { background: #eee; }
  body.roster-mode .fr-cat-name,
body.roster-mode .fr-crew-name { color: #000; }
  body.roster-mode .fr-cat-add,
body.roster-mode .fr-cat-actions,
body.roster-mode .fr-group-pm { display: none; }
}
.fr-leave-dock {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 18px; z-index: 500;
  display: flex; align-items: center; gap: 10px;
  background: var(--panel); border: 1px solid var(--purple); border-radius: 10px;
  padding: 8px 14px; box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
}
.fr-leave-dock-label { font-size: 11.5px; font-weight: 700; color: var(--purple); letter-spacing: .4px; }
.fr-leave-dock-col {
  min-width: 190px; min-height: 30px; border: 1px dashed var(--purple); border-radius: 6px;
  background: rgba(199, 125, 255, .07); padding: 4px;
}
.fr-leave-dock-hint { font-size: 10.5px; color: var(--text-faint); }
@media print { .fr-leave-dock { display: none; } }

.frp-flags { display: flex; gap: 14px; font-size: 11.5px; color: var(--text-dim); }
.frp-flags label { display: flex; align-items: center; gap: 5px; cursor: pointer; }
@media print {
  body.roster-mode .fr-cat { background: #fff; border-color: #999; }
  body.roster-mode .fr-cat-head,
body.roster-mode .fr-crew-head { background: #eee; color: #000; }
  body.roster-mode .fr-crew { background: #fff; border-color: #bbb; }
  body.roster-mode .fr-cat-name,
body.roster-mode .fr-crew-name { color: #000; }
  body.roster-mode .fr-cat-add,
body.roster-mode .fr-cat-actions,
body.roster-mode .fr-group-pm { display: none; }
}
.fr-cell { --sec: 210 15%; background: hsl(var(--sec) 14%); padding: 5px 6px; min-width: 0; }
.fr-col { display: flex; flex-direction: column; gap: 1px; }

.fr-leave {
  margin-top: 10px; border: 1px solid var(--line); border-left: 3px solid var(--purple);
  border-radius: 8px; background: var(--panel); overflow: hidden;
}
.fr-leave-head {
  font-size: 11.5px; font-weight: 600; color: var(--text);
  padding: 7px 10px; border-bottom: 1px solid var(--line); background: var(--panel-2);
}
.fr-leave-head small { color: var(--text-faint); font-weight: 400; margin-left: 8px; font-size: 10.5px; }
.fr-leave-n {
  font-size: 10px; font-weight: 700; color: var(--purple);
  background: rgba(199, 125, 255, .14); border-radius: 10px; padding: 0 6px; margin-left: 2px;
}
.fr-leave-col {
  flex-direction: row; flex-wrap: wrap; gap: 4px; align-content: flex-start;
  min-height: 46px; padding: 8px 10px; background: transparent;
}
.fr-leave-col .fr-p { min-width: 150px; }
.fr-leave-hint { font-size: 11px; color: var(--text-faint); line-height: 1.5; max-width: 62ch; }
@media print {
  body.roster-mode .fr-leave { border-color: #999; border-left-color: #b06fb0; background: #fff; }
  body.roster-mode .fr-leave-head { background: #f2e6f5; color: #000; }
  body.roster-mode .fr-leave-hint { display: none; }
}
.fr-count {
  background: var(--panel); text-align: center; font-size: 11px; font-weight: 800; color: var(--text-dim);
  padding: 3px 0; font-variant-numeric: tabular-nums;
}
.fr-p {
  font-size: 11.5px; line-height: 1.3; padding: 2px 4px; border-radius: 3px; color: var(--text);
  word-break: break-word; transition: opacity .15s, box-shadow .15s;
}
.fr-p .fr-sk { color: var(--text-dim); font-size: 10.5px; }
.fr-p .fr-id { display: none; color: var(--text-faint); font-size: 10.5px; font-variant-numeric: tabular-nums; }
.show-ids .fr-p .fr-id { display: inline; }
.fr-p.is-fm .fr-n,
.fr-p.is-lead .fr-n { font-weight: 800; }
.fr-star { color: var(--gold); margin-right: 2px; }
.fr-lease { font-size: 8.5px; font-weight: 800; letter-spacing: .4px; color: var(--purple); border: 1px solid currentColor; border-radius: 3px; padding: 0 3px; vertical-align: 1px; }
.fr-p.is-new { background: #ffe44d; color: #1b1b00; }
.fr-p.is-resign { background: #ff5c5c; color: #fff; }
.fr-p.is-leave { background: #d86dcd; color: #fff; }
.fr-p.is-new .fr-sk,
.fr-p.is-new .fr-id,
.fr-p.is-resign .fr-sk,
.fr-p.is-leave .fr-sk { color: inherit; opacity: .75; }
.fr-h { font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: var(--accent-2); padding: 3px 4px 2px; }
.fr-col .fr-h:not(:first-child) { margin-top: 6px; border-top: 1px solid var(--line); padding-top: 6px; }
.fr-o { font-size: 11px; color: var(--red); border: 1px dashed color-mix(in srgb, var(--red) 55%, transparent); border-radius: 3px; padding: 1px 4px; margin: 1px 0; transition: opacity .15s; }
.fr-sheet.searching .fr-p:not(.hit),
.fr-sheet.searching .fr-o:not(.hit) { opacity: .18; }
.fr-sheet .hit { box-shadow: 0 0 0 2px var(--accent); }
.fr-sheet.sec-filtering .fr-p.sec-off,
.fr-sheet.sec-filtering .fr-o.sec-off,
.fr-sheet.sec-filtering .fr-h.sec-off { opacity: .1; }
.fr-muted { color: var(--text-faint); font-size: 12px; }
.fr-empty { padding: 60px 20px; text-align: center; font-size: 15px; color: var(--text-dim); }
.fr-empty small { display: block; margin-top: 6px; color: var(--text-faint); font-size: 12px; }

:root[data-theme="light"] .fr-cell { background: hsl(var(--sec) 94%); }
:root[data-theme="light"] .fr-h { color: #8a4a00; }

/* Print: just the roster, on white, one landscape page (zoom set in JS). */
@media print {
  @page { size: landscape; margin: 0.3in; }
  body.roster-mode > *:not(#rosterPage) { display: none !important; }
  body.roster-mode { background: #fff !important; }
  body.roster-mode .fr-page { height: auto; overflow: visible; padding: 0; background: #fff; color: #000; }
  body.roster-mode .fr-toolbar select,
body.roster-mode .fr-search,
body.roster-mode .fr-toggle,
body.roster-mode #frPrint { display: none !important; }
  body.roster-mode .fr-title,
body.roster-mode .fr-p { color: #000; }
  body.roster-mode .fr-sheet { min-width: 0; }
  body.roster-mode .fr-band { background: #999; border-color: #999; }
  body.roster-mode .fr-cell { background: hsl(var(--sec) 94%) !important; }
  body.roster-mode .fr-count { background: #fff; color: #000; }
  body.roster-mode .fr-h { color: #000; }
  body.roster-mode .fr-sheet.searching .fr-p,
body.roster-mode .fr-sheet.searching .fr-o { opacity: 1 !important; box-shadow: none !important; }
  body.roster-mode .fr-sheet.sec-filtering .sec-off { opacity: 1 !important; }
  body.roster-mode * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

.fr-pill { font-size: 10.5px; font-weight: 800; letter-spacing: .8px; border-radius: 10px; padding: 3px 9px; }
.fr-pill.draft { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); border: 1px dashed var(--accent); }
.fr-pill.pub { background: color-mix(in srgb, var(--green) 14%, transparent); color: var(--green); }
#frExport { text-decoration: none; }
.fr-warnings { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.fr-warn { font-size: 11.5px; background: color-mix(in srgb, var(--gold) 12%, transparent); color: var(--gold); border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent); border-radius: 12px; padding: 3px 10px; cursor: pointer; }
.fr-warn:hover { border-color: var(--gold); }
.fr-sheet .flash { animation: fr-flash 1.4s ease 2; }
@keyframes fr-flash { 0%,
100% { box-shadow: none; } 50% { box-shadow: 0 0 0 3px var(--gold); } }

.fr-tray { background: var(--panel); border: 1px dashed var(--line); border-radius: 8px; padding: 8px 10px; margin-bottom: 10px; }
.fr-tray-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12px; margin-bottom: 6px; }
.fr-tray-hint { color: var(--text-faint); font-size: 11px; flex: 1; }
.fr-tray-head .shelf-search { width: 180px; margin: 0; }
.fr-tray-list { display: flex; flex-wrap: wrap; gap: 4px; min-height: 30px; max-height: 110px; overflow-y: auto; }
.fr-tray-p { background: var(--panel-2); border: 1px solid var(--line); cursor: grab; }

.fr-sheet.editing .fr-p,
.fr-sheet.editing .fr-o,
.fr-sheet.editing .fr-h { cursor: grab; }
.fr-sheet .fr-p,
.fr-sheet .fr-o,
.fr-sheet .fr-h { cursor: pointer; }
.fr-sheet.editing .fr-col { min-height: 60px; }
.fr-sheet .fr-p:hover,
.fr-sheet .fr-o:hover,
.fr-sheet .fr-h:hover { box-shadow: 0 0 0 1px var(--text-faint); }
.fr-sheet .selected { box-shadow: 0 0 0 2px var(--accent) !important; }
.fr-ghost { opacity: .35; }
.fr-o.drop-target { background: color-mix(in srgb, var(--green) 25%, transparent); color: var(--green); border-color: var(--green); border-style: solid; }
.fr-add {
  margin-top: 6px; background: none; border: 1px dashed var(--line); color: var(--text-faint); border-radius: 4px;
  font-size: 10.5px; padding: 3px; opacity: .55; transition: opacity .15s;
}
.fr-col:hover .fr-add { opacity: 1; }
.fr-add:hover { color: var(--accent); border-color: var(--accent); }

.fr-panel {
  position: fixed; top: 58px; right: 0; bottom: 0; width: 340px; max-width: 94vw; z-index: 60;
  background: var(--panel); border-left: 1px solid var(--line); box-shadow: var(--shadow); display: flex; flex-direction: column;
}
.fr-panel-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.fr-panel-title { font-size: 15px; font-weight: 800; }
.fr-panel-body { padding: 12px 14px 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.frp-row { display: grid; grid-template-columns: 110px 1fr; align-items: center; gap: 8px; font-size: 12px; color: var(--text-dim); }
.frp-row input,
.frp-inline input,
.frp-status input[type="date"],
.frp-skills input {
  background: var(--panel-2); border: 1px solid var(--line); color: var(--text); border-radius: 6px; padding: 5px 7px; font-size: 12.5px; min-width: 0;
}
.frp-row input:disabled { opacity: .6; }
.frp-note { font-size: 11.5px; color: var(--text-faint); line-height: 1.4; }
.frp-sub { font-size: 10.5px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--text-faint); margin-top: 6px; }
.frp-hint { text-transform: none; letter-spacing: 0; font-weight: 500; }
.frp-logi { border-top: 1px solid var(--line); margin-top: 10px; padding-top: 4px; }
.frp-logi select { width: 100%; background: var(--panel-2); border: 1px solid var(--line); color: var(--text); border-radius: 6px; padding: 5px 6px; font-size: 12px; }
.frp-dskills { display: grid; grid-template-columns: 1fr 1fr; gap: 3px 10px; margin-top: 4px; }
.frp-dskill { display: flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--text); }
.frp-dskill input { margin: 0; }
.frp-checks { display: flex; gap: 14px; font-size: 12.5px; }
.frp-checks label { display: inline-flex; align-items: center; gap: 5px; }
.frp-status { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 8px; align-items: center; font-size: 12.5px; }
.frp-status label { display: inline-flex; align-items: center; gap: 6px; border-radius: 4px; padding: 2px 5px; }
.frp-status .st-new { border-left: 4px solid #ffe44d; } .frp-status .st-resign { border-left: 4px solid #ff5c5c; } .frp-status .st-leave { border-left: 4px solid #d86dcd; }
.frp-skills { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.frp-skill { display: inline-flex; align-items: center; gap: 3px; font-size: 11.5px; font-weight: 700; background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; padding: 1px 4px 1px 8px; cursor: pointer; }
.frp-skill.primary { border-color: var(--accent); color: var(--accent); }
.frp-skill-x { background: none; border: none; color: var(--text-faint); font-size: 13px; padding: 0 2px; }
.frp-skill-x:hover { color: var(--red); }
.frp-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.frp-actions .danger { color: var(--red); }
.frp-inline { display: flex; gap: 6px; }
.frp-picklist { display: flex; flex-direction: column; gap: 3px; max-height: 280px; overflow-y: auto; }
.frp-pick { display: flex; justify-content: space-between; gap: 8px; text-align: left; background: var(--panel-2); border: 1px solid var(--line); color: var(--text); border-radius: 6px; padding: 5px 8px; font-size: 12px; }
.frp-pick span { color: var(--text-faint); font-size: 11px; }
.frp-pick.un { border-left: 3px solid var(--accent); }
.frp-pick:hover { border-color: var(--accent); }

.frc-base { font-size: 12.5px; color: var(--text-dim); margin-bottom: 10px; }
.frc-sec { margin-bottom: 12px; }
.frc-title { font-size: 11px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--text-faint); margin-bottom: 4px; }
.frc-title span { color: var(--accent); }
.frc-row { font-size: 12.5px; padding: 3px 0; border-bottom: 1px solid var(--line-soft); }
.frc-warn { font-size: 12px; color: var(--gold); background: color-mix(in srgb, var(--gold) 10%, transparent); border-radius: 6px; padding: 8px 10px; margin-bottom: 10px; }
.frc-note { font-size: 11.5px; color: var(--text-faint); margin-top: 10px; }
@media print {
  body.roster-mode .fr-tray,
body.roster-mode .fr-warnings,
body.roster-mode .fr-add,
body.roster-mode #frStatus,
body.roster-mode #frNewDraft,
body.roster-mode #frChanges,
body.roster-mode #frPublish,
body.roster-mode #frDiscard,
body.roster-mode #frExport { display: none !important; }
}

body.fr-panel-open .fr-page { padding-right: 360px; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  pointer-events: none;
}

.me-toolbar { display: grid; grid-template-columns: 1fr 160px 140px; gap: 8px; margin-bottom: 8px; }
.me-toolbar .shelf-search { margin-bottom: 0; }
.me-toolbar select {
  background: var(--panel-2); border: 1px solid var(--line); color: var(--text);
  border-radius: 6px; padding: 6px 8px; font-size: 12.5px;
}
.me-count { font-size: 11px; color: var(--text-faint); margin-bottom: 6px; }
.me-row {
  /* Description takes the slack; category gives some back when the window is
     small, so a narrow one still fits rather than scrolling sideways. */
  display: grid;
  grid-template-columns: 84px minmax(150px, 2fr) minmax(110px, 1fr) 80px 104px 72px 58px 112px;
  gap: 8px; align-items: center;
  padding: 6px 8px; border-radius: 7px; background: var(--panel-2); border: 1px solid var(--line);
  font-size: 12px;
}
.me-row.me-head {
  background: none; border: none; padding: 0 8px; font-size: 10px; letter-spacing: .5px;
  text-transform: uppercase; color: var(--text-faint); position: sticky; top: 0;
}
.me-row.me-out { opacity: .62; border-color: var(--line-soft); }
.me-em { font-variant-numeric: tabular-nums; color: var(--text); }
.me-desc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-dim); }
.me-note { color: var(--red); margin-left: 6px; font-size: 11px; }
.me-cat,
.me-code { color: var(--text-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Fleet edits a machine's record in place; the boxes are the Truck Fleet
   tab's, and the unavailable note sits under the description's box. */
.me-row .me-f {
  background: var(--panel); border: 1px solid var(--line); color: var(--text);
  border-radius: 5px; padding: 4px 6px; font-size: 11.5px; min-width: 0; width: 100%;
}
.me-row .me-f:focus { border-color: var(--accent); outline: none; }
.me-row .me-f.logi-saved { border-color: var(--green); }
.me-desc-edit { display: flex; flex-direction: column; min-width: 0; }
.me-desc-edit .me-note { margin: 2px 0 0; }
.me-shifts { text-align: center; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.me-toggle { display: flex; align-items: center; gap: 6px; cursor: pointer; font-size: 11.5px; color: var(--text-dim); }
.me-toggle input { cursor: pointer; }

.me-tabs { display: flex; gap: 4px; margin: -4px 0 12px; border-bottom: 1px solid var(--line); }
.me-tab {
  background: none; border: none; border-bottom: 2px solid transparent; cursor: pointer;
  color: var(--text-faint); font-size: 12.5px; font-weight: 600; padding: 6px 12px 8px;
}
.me-tab:hover { color: var(--text-dim); }
/* A tab's own + Add button keeps the left of the foot, Close the right. */
.me-add-truck { margin-right: auto; }
.me-tab.active { color: var(--text); border-bottom-color: var(--accent); }

.logi-asset-row select.logi-cdl {
  background: var(--panel-2); border: 1px solid var(--line); color: var(--text);
  border-radius: 5px; padding: 4px 6px; font-size: 11.5px; min-width: 0;
}
.logi-asset-row select.logi-cdl:focus { border-color: var(--accent); outline: none; }
.logi-asset-row select.logi-cdl.logi-saved { border-color: var(--green); }
.logi-driver-unlicensed { color: var(--red); }
.logi-warn { font-size: 11px; }
@keyframes reading-pulse { 0%,
100% { opacity: .25; } 50% { opacity: 1; } }


.jd-type {
  background: var(--panel-2); border: 1px solid var(--line); color: var(--text-dim);
  border-radius: 5px; padding: 3px 5px; font-size: 11px; flex: 0 0 auto;
}
.jd-type:hover { color: var(--text); border-color: var(--accent); }

.fr-unit {
  display: flex; flex-direction: column;
  background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 8px 8px 0 0; border-bottom: 0;
}
.fr-unit-head {
  position: relative;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 5px 10px; border-bottom: 1px solid var(--line);
}
.fr-unit-name {
  font-size: 12.5px; font-weight: 800; letter-spacing: .7px; text-transform: uppercase;
  color: var(--text); white-space: nowrap;
}
.editing .fr-unit-name { cursor: text; }
.fr-unit-gear {
  background: none; border: 0; color: var(--text-faint); cursor: pointer;
  font-size: 11px; line-height: 1; padding: 0; opacity: 0; transition: opacity .12s;
}
.fr-unit:hover .fr-unit-gear { opacity: 1; }
.fr-unit-btn {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  padding: 1px 8px; font-size: 10.5px;
}
.fr-unit-people {
  position: relative;
  display: flex; flex-direction: row; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 4px 14px; padding: 4px 10px; min-height: 28px;
}
.fr-unit-people .fr-p,
.fr-unit-people .fr-o { font-weight: 700; }
.fr-unit-people .fr-add {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  margin: 0; opacity: 0;
}
.fr-unit:hover .fr-unit-people .fr-add { opacity: 1; }
.fr-sheet.editing .fr-unit-people { min-height: 28px; }
.fr-unit[style*="background"] .fr-unit-name,
.fr-unit[style*="background"] .fr-p { color: #14181f; }
.fr-unit[style*="background"] .fr-unit-gear { color: #3d4654; }

@media print {
  body.roster-mode .fr-unit { background: #eee !important; border-color: #999; }
  body.roster-mode .fr-unit-name,
body.roster-mode .fr-unit-people .fr-p { color: #000; }
}


/* ---- A multi-day shift's Phase area, one day at a time -------------------
   The card stays one card: a strip of days across the top of the phases, and
   the tray below shows the day you picked. "All days" is the phases that run
   the whole shift, which is every phase a single-day shift has. */
.phase-days { display: flex; flex-wrap: wrap; gap: 3px; margin: 0 0 5px; }
.phase-day {
  background: var(--panel-2); border: 1px solid var(--line); color: var(--text-dim);
  border-radius: 5px; padding: 2px 7px; font-size: 10.5px; cursor: pointer; white-space: nowrap;
}
.phase-day:hover { color: var(--text); border-color: var(--accent); }
.phase-day.active { color: var(--text); border-color: var(--accent); background: var(--panel); font-weight: 700; }
.phase-day-note { color: var(--text-faint); font-weight: 400; text-transform: none; letter-spacing: 0; }
/* A phase that runs the whole shift, seen while looking at one day of it. */
.phase-chip.is-every-day { border-style: dashed; opacity: .82; }

/* A crew that works one shift across several jobs. On the Crew Builder card,
   under the name: it is how the crew is scheduled, not who is on it, so it
   is set here even for a crew the Field Roster owns. */
.set-travels {
  display: flex; align-items: center; gap: 6px; cursor: pointer;
  padding: 6px 12px 0; font-size: 11px; color: var(--text-dim);
}


/* ---- Add New Job: laid out like Truein's own dialog (see index.html) ---- */
.job-modal-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; align-items: start; }
.job-modal-cols > .job-modal-col:first-child { border-right: 1px solid var(--line); padding-right: 28px; }
.job-modal-col .shelf-subhead:first-child { margin-top: 0; }
.modal-field .req { color: var(--danger, #e05252); font-style: normal; }
.field-count { float: right; color: var(--text-dim); font-weight: 400; }
.job-code-note { font-size: 11px; margin: -6px 0 12px; min-height: 14px; }
.job-code-note.ok { color: var(--ok, #4caf50); }
.job-code-note.warn { color: var(--warn, #e0a030); }
.job-rule {
  display: flex; align-items: flex-start; gap: 8px; cursor: pointer;
  padding: 5px 0; font-size: 12px; color: var(--text);
}
.job-rule input { margin: 2px 0 0; cursor: pointer; flex: 0 0 auto; }
.job-rule-body { padding: 0 0 8px 22px; }
.job-rule-body input {
  width: 100%; padding: 6px 8px; font-size: 12px;
  background: var(--panel-2, #1b1f27); color: var(--text);
  border: 1px solid var(--line); border-radius: 6px;
}
@media (max-width: 860px) {
  .job-modal-cols { grid-template-columns: 1fr; }
  .job-modal-cols > .job-modal-col:first-child { border-right: 0; padding-right: 0; }
}
.job-card-code {
  font-size: 10px; letter-spacing: .04em; padding: 1px 6px; border-radius: 4px;
  background: var(--panel-2, #1b1f27); border: 1px solid var(--line); color: var(--text-dim);
}
.job-card-code.missing { border-style: dashed; color: var(--warn, #e0a030); }

/* ---- Truein sync previews: what would change, before it does ---- */
.tru-changes { max-height: 260px; overflow-y: auto; margin-top: 10px; }
.tru-changes table { width: 100%; border-collapse: collapse; font-size: 11px; }
/* The shift push preview: one line per shift, coloured by what would happen. */
.tru-sec {
  font-size: 10px; letter-spacing: .8px; text-transform: uppercase;
  color: var(--text-faint); padding: 10px 2px 4px;
}
.tru-row {
  display: flex; align-items: baseline; gap: 10px; padding: 3px 8px;
  border-left: 2px solid transparent; border-radius: 4px; font-size: 11.5px;
}
.tru-row.add { border-left-color: var(--ok, #3fb950); }
.tru-row.upd { border-left-color: var(--accent); }
.tru-row.del { border-left-color: var(--text-faint); cursor: pointer; }
.tru-row.del:hover { background: var(--panel-2); }
.tru-row-code { font-family: ui-monospace, monospace; font-weight: 700; flex: 0 0 auto; }
.tru-row-note { color: var(--text-dim); font-size: 10.5px; flex: 1 1 auto; }
.tru-row-pick { font-size: 10.5px; padding: 1px 4px; flex: 0 0 auto; }
/* The job lists run to dozens of rows where the shifts run to a handful. */
.tru-changes-tall { max-height: 52vh; }
.tru-row-pick { max-width: 240px; }
.tru-row.guess { border-left-color: var(--warn, #e0a030); }
/* The row menu on a shift: one control instead of two buttons per line. */
.sc-more {
  background: none; border: 0; color: var(--text-dim); cursor: pointer;
  font-size: 15px; line-height: 1; padding: 0 6px; border-radius: 4px;
}
.sc-more:hover { color: var(--text); background: var(--panel-2); }
.sc-menu { width: 170px; }
.sc-menu .driver-pop-row.danger { color: var(--danger, #f85149); }
.sc-synced { background: none; border: 1px solid var(--line); color: var(--text-faint); }
/* Which days a shift runs: seven toggles, none ticked meaning every day. */
.sc-days { display: flex; gap: 2px; }
.sc-day { position: relative; cursor: pointer; }
.sc-day input { position: absolute; opacity: 0; width: 0; height: 0; }
.sc-day span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 3px; border-radius: 4px;
  border: 1px solid var(--line); background: var(--panel); color: var(--text-dim);
  font-size: 9.5px; font-weight: 700;
}
.sc-day:hover span { color: var(--text); border-color: var(--accent); }
.sc-day.on span { background: var(--accent); border-color: var(--accent); color: #14181f; }
.sc-field small { color: var(--text-faint); font-weight: 400; }
.tru-changes th {
  position: sticky; top: 0; text-align: left; padding: 5px 8px;
  background: var(--panel-2, #1b1f27); color: var(--text-dim); font-weight: 600;
}
.tru-changes td { padding: 4px 8px; border-top: 1px solid var(--line); }

/* ---- Employees shelf: everyone on file, draggable onto a shift ---- */
.token-member { border-left: 3px solid var(--green, #3ecf8e); }
.token-member.is-foreman { border-left-color: var(--accent); }
.token-member .token-icon { background: #2c3340; font-size: 14px; }
.token-member .token-tail { margin-left: auto; padding-left: 8px; }
.staff-eeid { font-size: 10px; color: var(--text-faint); font-family: ui-monospace, monospace; }
.staff-noid {
  font-size: 9px; padding: 1px 5px; border-radius: 4px; white-space: nowrap;
  border: 1px dashed var(--line); color: var(--warn, #e0a030);
}
:root[data-theme="light"] .token-member .token-icon { background: #e5e8ed; }
.filter-chip.chip-other { border-style: dashed; }
.filter-chip.chip-other.active { border-style: solid; }

/* ---- Job geofences: list + form beside a Leaflet map ---- */
.geo-modal { width: min(1100px, 96vw); max-width: 96vw; max-height: 94vh; display: flex; flex-direction: column; }
.geo-search { position: relative; display: flex; gap: 8px; margin-bottom: 10px; }
.geo-search input {
  flex: 1; min-width: 0; background: var(--panel-2); border: 1px solid var(--line); color: var(--text);
  border-radius: 7px; padding: 8px 10px; font-size: 13.5px; outline: none;
}
.geo-search input:focus { border-color: var(--accent); }
.geo-results {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 1000;
  background: var(--panel); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow);
  max-height: 260px; overflow-y: auto;
}
.geo-result {
  display: block; width: 100%; text-align: left; background: none; border: 0; color: var(--text);
  padding: 8px 10px; font-size: 12.5px; line-height: 1.35; cursor: pointer; border-bottom: 1px solid var(--line-soft);
}
.geo-result:last-child { border-bottom: 0; }
.geo-result:hover, .geo-result:focus { background: var(--panel-2); outline: none; }
.geo-result-empty { padding: 10px; font-size: 12.5px; color: var(--text-dim); }
.geo-body { display: grid; grid-template-columns: 320px 1fr; gap: 12px; min-height: 0; flex: 1; }
.geo-side { display: flex; flex-direction: column; gap: 8px; min-height: 0; overflow-y: auto; }
.geo-map {
  min-height: 460px; height: 62vh; border-radius: 10px; border: 1px solid var(--line);
  background: var(--panel-2); z-index: 0;
}
.geo-list { display: flex; flex-direction: column; gap: 6px; }
.geo-empty { font-size: 12.5px; color: var(--text-dim); padding: 6px 2px; line-height: 1.45; }
.geo-item {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; cursor: pointer;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; color: var(--text);
}
.geo-item:hover { border-color: var(--text-faint); }
.geo-item.active { border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }
.geo-item-main { flex: 1; min-width: 0; }
.geo-item-code { font-weight: 700; font-size: 13px; }
.geo-item-name { font-size: 12px; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.geo-item-radius { font-size: 12px; color: var(--text-dim); white-space: nowrap; font-variant-numeric: tabular-nums; }
.geo-add { align-self: flex-start; }
.geo-form { border-top: 1px solid var(--line); padding-top: 10px; }
.geo-form .modal-field { margin-bottom: 8px; min-width: 0; }
.geo-form .modal-field input { width: 100%; min-width: 0; box-sizing: border-box; }
.geo-side { overflow-x: hidden; }
.geo-form input[type="range"] { width: 100%; margin: 0 0 10px; accent-color: var(--accent); }
.geo-feet { color: var(--text-faint); font-weight: 400; }
.geo-address { font-size: 11.5px; color: var(--text-dim); line-height: 1.4; margin: -2px 0 8px; min-height: 0; }
.geo-form-actions { display: flex; gap: 8px; justify-content: flex-end; }
.geo-delete { margin-right: auto; color: #ff5c6c; }
.geo-hint { margin: 8px 0 0; }
.geo-map .leaflet-control-attribution { font-size: 10px; }
.geo-map .leaflet-container, .geo-map.leaflet-container { font: inherit; }
body.read-only #geoAddBtn,
body.read-only #geoSaveBtn,
body.read-only #geoDeleteBtn { display: none !important; }
body.read-only .geo-form input { pointer-events: none; opacity: .75; }
@media (max-width: 760px) {
  .geo-body { grid-template-columns: 1fr; }
  .geo-map { height: 46vh; min-height: 300px; order: -1; }
}

/* ---- Employees shelf: everyone on file, draggable onto a shift ---- */
.token-member { border-left: 3px solid var(--green, #3ecf8e); }
.token-member.is-foreman { border-left-color: var(--accent); }
.token-member .token-icon { background: #2c3340; font-size: 14px; }
.token-member .token-tail { margin-left: auto; padding-left: 8px; }
.staff-eeid { font-size: 10px; color: var(--text-faint); font-family: ui-monospace, monospace; }
.staff-noid {
  font-size: 9px; padding: 1px 5px; border-radius: 4px; white-space: nowrap;
  border: 1px dashed var(--line); color: var(--warn, #e0a030);
}
:root[data-theme="light"] .token-member .token-icon { background: #e5e8ed; }
.filter-chip.chip-other { border-style: dashed; }
.filter-chip.chip-other.active { border-style: solid; }

/* ---- Job geofences: list + form beside a Leaflet map ---- */
.geo-modal { width: min(1100px, 96vw); max-width: 96vw; max-height: 94vh; display: flex; flex-direction: column; }
.geo-search { position: relative; display: flex; gap: 8px; margin-bottom: 10px; }
.geo-search input {
  flex: 1; min-width: 0; background: var(--panel-2); border: 1px solid var(--line); color: var(--text);
  border-radius: 7px; padding: 8px 10px; font-size: 13.5px; outline: none;
}
.geo-search input:focus { border-color: var(--accent); }
.geo-results {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 1000;
  background: var(--panel); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow);
  max-height: 260px; overflow-y: auto;
}
.geo-result {
  display: block; width: 100%; text-align: left; background: none; border: 0; color: var(--text);
  padding: 8px 10px; font-size: 12.5px; line-height: 1.35; cursor: pointer; border-bottom: 1px solid var(--line-soft);
}
.geo-result:last-child { border-bottom: 0; }
.geo-result:hover, .geo-result:focus { background: var(--panel-2); outline: none; }
.geo-result-empty { padding: 10px; font-size: 12.5px; color: var(--text-dim); }
.geo-body { display: grid; grid-template-columns: 320px 1fr; gap: 12px; min-height: 0; flex: 1; }
.geo-side { display: flex; flex-direction: column; gap: 8px; min-height: 0; overflow-y: auto; }
.geo-map {
  min-height: 460px; height: 62vh; border-radius: 10px; border: 1px solid var(--line);
  background: var(--panel-2); z-index: 0;
}
.geo-list { display: flex; flex-direction: column; gap: 6px; }
.geo-empty { font-size: 12.5px; color: var(--text-dim); padding: 6px 2px; line-height: 1.45; }
.geo-item {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; cursor: pointer;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; color: var(--text);
}
.geo-item:hover { border-color: var(--text-faint); }
.geo-item.active { border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }
.geo-item-main { flex: 1; min-width: 0; }
.geo-item-code { font-weight: 700; font-size: 13px; }
.geo-item-name { font-size: 12px; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.geo-item-radius { font-size: 12px; color: var(--text-dim); white-space: nowrap; font-variant-numeric: tabular-nums; }
.geo-add { align-self: flex-start; }
.geo-form { border-top: 1px solid var(--line); padding-top: 10px; }
.geo-form .modal-field { margin-bottom: 8px; min-width: 0; }
.geo-form .modal-field input { width: 100%; min-width: 0; box-sizing: border-box; }
.geo-side { overflow-x: hidden; }
.geo-form input[type="range"] { width: 100%; margin: 0 0 10px; accent-color: var(--accent); }
.geo-feet { color: var(--text-faint); font-weight: 400; }
.geo-address { font-size: 11.5px; color: var(--text-dim); line-height: 1.4; margin: -2px 0 8px; min-height: 0; }
.geo-form-actions { display: flex; gap: 8px; justify-content: flex-end; }
.geo-delete { margin-right: auto; color: #ff5c6c; }
.geo-hint { margin: 8px 0 0; }
.geo-map .leaflet-control-attribution { font-size: 10px; }
.geo-map .leaflet-container, .geo-map.leaflet-container { font: inherit; }
body.read-only #geoAddBtn,
body.read-only #geoSaveBtn,
body.read-only #geoDeleteBtn { display: none !important; }
body.read-only .geo-form input { pointer-events: none; opacity: .75; }
@media (max-width: 760px) {
  .geo-body { grid-template-columns: 1fr; }
  .geo-map { height: 46vh; min-height: 300px; order: -1; }
}

.shift-code-select {
  width: 100%; padding: 5px 8px; font-size: 12px; border-radius: 6px;
  background: var(--panel-2, #1b1f27); color: var(--text); border: 1px solid var(--line);
}
.shift-code-select:focus { border-color: var(--accent); outline: none; }

/* ---- crews left behind by an older roster ---- */
.orphan-list { max-height: 340px; overflow-y: auto; border: 1px solid var(--line); border-radius: 8px; margin-top: 10px; }
.orphan-row {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  border-bottom: 1px solid var(--line); font-size: 12px;
}
.orphan-row:last-child { border-bottom: 0; }
.orphan-row input { margin: 0; cursor: pointer; }
.orphan-row .o-name { flex: 1 1 auto; }
.orphan-row .o-meta { color: var(--text-dim); font-size: 11px; }
.orphan-row .o-warn { color: var(--warn, #e0a030); font-size: 11px; }
.orphan-empty { padding: 14px 10px; font-size: 12px; color: var(--text-faint); }
#btnOrphanCrews { color: var(--warn, #e0a030); }

/* ---- a shift's crews, one block per foreman ---- */
.crew-group { margin-bottom: 10px; }
.crew-group:last-child { margin-bottom: 0; }
.crew-group .crew-tray { margin-top: 4px; padding-left: 10px; border-left: 2px solid var(--line); }
.crew-group-head {
  font-size: 10px; letter-spacing: .05em; text-transform: uppercase;
  color: var(--text-dim); padding: 4px 12px 0;
}
.equip-source-group { margin-bottom: 8px; }
.equip-source-group:last-child { margin-bottom: 0; }
.equip-source-group > .equip-cat-group { padding-left: 10px; border-left: 2px solid var(--line); }

/* ---- a job's colour, on its settings ---- */
.job-color-row { display: flex; align-items: center; gap: 10px; }
.job-color-row .color-swatches { flex: 1 1 auto; }
.job-color-custom {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 6px; cursor: pointer;
  border: 1px dashed var(--line); display: grid; place-items: center; overflow: hidden;
}
.job-color-custom:hover { border-color: var(--accent); }
.job-color-custom input { width: 34px; height: 34px; border: 0; padding: 0; background: none; cursor: pointer; }

/* ---- taking a day off a multi-day shift ---- */
.phase-day-wrap { position: relative; display: inline-flex; align-items: center; }
.phase-day-x {
  border: 0; background: transparent; cursor: pointer; padding: 0 4px;
  color: var(--text-faint); font-size: 13px; line-height: 1;
}
.phase-day-wrap:hover .phase-day-x { color: var(--danger, #e05252); }

/* ---- notes on a shift ---- */
.shift-notes-for { font-weight: 400; color: var(--text-dim); font-size: 13px; }
.note-compose { margin: 10px 0 6px; }
.note-compose textarea {
  width: 100%; min-height: 64px; resize: vertical; padding: 9px 11px;
  font: inherit; font-size: 13px; line-height: 1.45;
  background: var(--panel-2, #1b1f27); color: var(--text);
  border: 1px solid var(--line); border-radius: 8px;
}
.note-compose textarea:focus { border-color: var(--accent); outline: none; }
.note-compose-foot { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.note-count { font-size: 11px; color: var(--text-faint); margin-right: auto; }
.note-count.near { color: var(--warn, #e0a030); }
.note-list { max-height: 44vh; overflow-y: auto; margin-top: 8px; }
.note-row {
  border: 1px solid var(--line); border-radius: 8px; padding: 9px 11px; margin-bottom: 8px;
  background: var(--panel-2, #1b1f27);
}
.note-row:last-child { margin-bottom: 0; }
.note-meta {
  display: flex; align-items: center; gap: 8px; margin-bottom: 5px;
  font-size: 11px; color: var(--text-dim);
}
.note-meta .note-who { font-weight: 700; color: var(--text); }
.note-meta .note-edited { font-style: italic; }
.note-meta .note-actions { margin-left: auto; display: flex; gap: 4px; }
.note-meta button {
  border: 0; background: transparent; color: var(--text-dim); cursor: pointer;
  font-size: 11px; padding: 1px 5px; border-radius: 4px;
}
.note-meta button:hover { color: var(--text); background: rgba(255,255,255,.06); }
.note-meta button.danger:hover { color: var(--danger, #e05252); }
/* Line breaks and runs of spaces are kept as written, and a long unbroken
   string wraps instead of stretching the panel. */
.note-body { font-size: 13px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.note-empty { padding: 14px 4px; font-size: 12px; color: var(--text-faint); }
.shift-note-btn.has-notes { color: var(--accent); }
.cal-note-mark { margin-right: 2px; font-size: 9px; opacity: .85; }

/* ---- who worked a day (the sealed record) ---- */
.crew-log { max-height: 52vh; overflow-y: auto; margin-top: 10px; }
.crew-log-day { border: 1px solid var(--line); border-radius: 8px; margin-bottom: 10px; }
.crew-log-day:last-child { margin-bottom: 0; }
.crew-log-head {
  display: flex; align-items: center; gap: 10px; padding: 7px 11px;
  background: var(--panel-2, #1b1f27); border-bottom: 1px solid var(--line);
  font-size: 12px; font-weight: 700;
}
.crew-log-head .cl-when { font-weight: 400; color: var(--text-dim); font-size: 11px; margin-left: auto; }
.crew-log-amended {
  font-size: 10px; padding: 1px 6px; border-radius: 4px; font-weight: 700;
  border: 1px solid var(--warn, #e0a030); color: var(--warn, #e0a030);
}
.crew-log-gen { padding: 8px 11px; }
.crew-log-gen + .crew-log-gen { border-top: 1px dashed var(--line); }
.crew-log-gen-label { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-dim); margin-bottom: 5px; }
.crew-log-gen.superseded { opacity: .62; }
.crew-log-names { display: flex; flex-wrap: wrap; gap: 5px; }
.crew-log-name {
  font-size: 11px; padding: 2px 7px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--panel-2, #1b1f27);
}
.crew-log-name.foreman { border-color: var(--accent); color: var(--accent); font-weight: 700; }
.crew-log-empty { padding: 14px 4px; font-size: 12px; color: var(--text-faint); }

/* ---- Equipment Roster: logistics' board ---- */
.eq-hint { padding: 6px 16px 0; font-size: 12px; color: var(--text-dim); }
.eq-counts { font-size: 11.5px; color: var(--text-dim); margin-top: 2px; }
.eq-board {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 10px; padding: 10px 16px 16px; align-content: start;
}
.eq-dest {
  border: 1px solid var(--line); border-radius: 10px; overflow: hidden;
  background: var(--panel); display: flex; flex-direction: column; min-height: 130px;
}
.eq-dest.drag-over { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.eq-dest-head {
  display: flex; align-items: center; gap: 6px; padding: 7px 10px;
  background: var(--dest-color, var(--panel-2, #1b1f27));
  border-bottom: 1px solid var(--line);
}
.eq-dest-name { font-weight: 800; font-size: 13px; flex: 1 1 auto; }
.eq-dest-badge {
  font-size: 9px; letter-spacing: .05em; text-transform: uppercase;
  padding: 1px 6px; border-radius: 4px; border: 1px solid var(--line); color: var(--text-dim);
}
.eq-dest-badge.job { border-color: var(--accent); color: var(--accent); }
.eq-dest-badge.static { border-style: dashed; }
.eq-dest-badge.place { border-color: var(--accent-2); color: var(--accent-2); }
.eq-dest-n { font-size: 11px; color: var(--text-dim); }
.eq-dest-tools { display: flex; gap: 2px; }
.eq-dest-tools button {
  border: 0; background: transparent; color: var(--text-dim); cursor: pointer;
  font-size: 12px; padding: 1px 4px; border-radius: 4px;
}
.eq-dest-tools button:hover { color: var(--text); background: rgba(255,255,255,.08); }
.eq-dest-tools button.danger:hover { color: var(--danger, #e05252); }
.eq-dest-body { padding: 6px; flex: 1 1 auto; min-height: 44px; }
.eq-item {
  display: flex; align-items: center; gap: 6px; padding: 4px 6px; border-radius: 6px;
  font-size: 11.5px; cursor: grab;
}
.eq-item:hover { background: rgba(255,255,255,.05); }
.eq-item .eq-em { font-family: ui-monospace, monospace; font-weight: 700; white-space: nowrap; flex: 0 0 auto; }
.eq-item .eq-type { color: var(--text-dim); flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eq-item .eq-out { color: var(--warn, #e0a030); font-size: 10px; }
.eq-dest-add {
  width: calc(100% - 12px); margin: 0 6px 6px; padding: 4px; cursor: pointer;
  border: 1px dashed var(--line); background: transparent; color: var(--text-dim);
  border-radius: 6px; font-size: 11px;
}
.eq-dest-add:hover { border-color: var(--accent); color: var(--accent); }
.eq-dest-empty { padding: 10px 6px; font-size: 11px; color: var(--text-faint); font-style: italic; }
.eq-pick-list { max-height: 200px; overflow-y: auto; border: 1px solid var(--line); border-radius: 8px; margin: 6px 0 12px; }
.eq-pick {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  padding: 6px 10px; border: 0; border-bottom: 1px solid var(--line);
  background: transparent; color: var(--text); font-size: 12px; cursor: pointer;
}
.eq-pick:last-child { border-bottom: 0; }
.eq-pick:hover { background: var(--panel-2, #1b1f27); }
.eq-new-grid { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; }
.eq-new-grid .sc-field { flex: 0 0 130px; }
.eq-new-grid .sc-field-wide { flex: 1 1 190px; }

/* ---- Equipment Roster: jobs down the side, everywhere else in the board -- */
.eq-layout { display: grid; grid-template-columns: 290px 1fr; gap: 12px; padding: 10px 16px 16px; align-items: start; }
.eq-layout .eq-board { padding: 0; }
.eq-jobs { border: 1px solid var(--line); border-radius: 10px; background: var(--panel); overflow: hidden; }
.eq-jobs-head {
  display: flex; align-items: center; gap: 8px; padding: 7px 10px;
  background: var(--panel-2, #1b1f27); border-bottom: 1px solid var(--line); font-size: 13px;
}
.eq-jobs-n { font-size: 11px; color: var(--text-dim); margin-right: auto; }
.eq-jobs-head .btn { padding: 2px 8px; font-size: 11px; }
.eq-jobs-list { max-height: calc(100vh - 300px); overflow-y: auto; }
/* A job in the column: the same destination, folded. */
.eq-jobs .eq-dest { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; min-height: 0; }
.eq-jobs .eq-dest:last-child { border-bottom: 0; }
.eq-jobs .eq-dest-head { cursor: pointer; }
.eq-dest-caret { width: 12px; text-align: center; color: var(--text-dim); font-size: 10px; transition: transform .12s; }
.eq-dest.collapsed .eq-dest-caret { transform: rotate(-90deg); }
.eq-dest.collapsed .eq-dest-body,
.eq-dest.collapsed .eq-dest-add { display: none; }
.eq-dest.collapsed.drag-over .eq-dest-head { box-shadow: 0 0 0 2px var(--accent) inset; }
@media (max-width: 900px) {
  .eq-layout { grid-template-columns: 1fr; }
  .eq-jobs-list { max-height: none; }
}

/* ---- Equipment Roster: highlight search and destination filter ---- */
.eq-layout.searching .eq-dest-body .eq-item:not(.hit) { opacity: .18; }
.eq-layout .eq-item.hit { box-shadow: 0 0 0 2px var(--accent); }
.eq-dest.has-hit .eq-dest-head { box-shadow: inset 3px 0 0 var(--accent); }
.eq-dest-hits { font-size: 10px; font-weight: 800; color: var(--accent); }
.eq-dest.filtered-out { display: none; }

/* What a job's shifts are still waiting for: a row of dashed chips under the
   destination's name, in the TBD slot's own colours from the shift card. */
.eq-needs { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px 6px 2px; }
.eq-need {
  display: flex; align-items: center; gap: 4px; padding: 2px 7px; border-radius: 6px;
  border: 1px dashed var(--accent); color: var(--accent-2); font-size: 11px; font-weight: 700;
}
.eq-need-n { color: var(--text); }
.eq-need.drag-over { background: rgba(242,169,0,.18); border-style: solid; }
.eq-dest-needs {
  font-size: 9px; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap;
  padding: 1px 6px; border-radius: 4px; border: 1px dashed var(--accent); color: var(--accent-2);
}
/* Folded, the chips go with the rest of the body; the count in the name bar
   stays, so a folded job still says it is waiting for something. */
.eq-dest.collapsed .eq-needs { display: none; }
/* ...and only then: open, the chips already say it, and the Jobs column
   is too narrow to spend on saying it twice — it cost the job its name. */
.eq-dest:not(.collapsed) .eq-dest-needs { display: none; }

/* ---- Equipment Roster: the bench (Unplaced) ----
   A right-hand column built from the Equipment Shelf's parts (.rail,
   .shelf-section, .chip-filter, .token), so it reads the same as the shelf
   on the job page. It stays in view while the board scrolls. */
#equipRosterPage .eq-layout {
  --eq-left: 290px; --eq-right: 320px;
  grid-template-columns: var(--eq-left) minmax(0, 1fr) var(--eq-right);
  position: relative; transition: grid-template-columns .2s ease;
}
#equipRosterPage .eq-layout.no-jobs { grid-template-columns: minmax(0, 1fr) var(--eq-right); }
.eq-bench {
  position: sticky; top: 0; align-self: start;
  max-height: calc(100vh - 150px); overflow-y: auto;
  border: 1px solid var(--line); border-radius: 10px; padding: 12px;
}
.eq-bench.drag-over { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.eq-bench .shelf-section { margin-bottom: 0; }
.eq-bench-title { cursor: default; }
.eq-bench-title:hover { color: var(--text-dim); }
/* The count keeps the right-hand end, with the gear after it. */
.eq-bench-title .token-count-badge { margin-left: auto; }
.eq-bench-title .shelf-gear { position: static; margin-left: 6px; }
.eq-type-chips { max-height: 132px; }
.filter-chip .chip-n { opacity: .6; font-weight: 600; margin-left: 2px; }
.filter-chip.active .chip-n { opacity: .85; }
.eq-bench-bar { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.eq-bench-bar .btn { padding: 3px 9px; font-size: 11.5px; }
.eq-bench-showing { font-size: 11px; color: var(--text-dim); margin-right: auto; }
.eq-bench-list { max-height: none; overflow: visible; }
.eq-bench-group {
  display: flex; align-items: center; gap: 6px; width: 100%; text-align: left;
  background: none; border: 0; cursor: pointer; padding: 8px 2px 2px; margin: 0;
}
.eq-bench-group:hover { color: var(--accent); }
.eq-bench-group .chip-n { color: var(--text-dim); letter-spacing: 0; }
.eq-bench-token .token-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eq-bench-token[draggable="false"] { cursor: default; }
.eq-bench-token .eq-out { color: var(--warn, #e0a030); font-size: 10px; flex: 0 0 auto; }
@media (max-width: 1250px) {
  #equipRosterPage .eq-layout { --eq-left: 240px; --eq-right: 270px; }
}
@media (max-width: 900px) {
  #equipRosterPage .eq-layout,
  #equipRosterPage .eq-layout.no-jobs { grid-template-columns: 1fr; }
  .eq-bench { position: static; max-height: none; }
}

/* Print: just the equipment board, like the Field Roster prints just its sheet. */
@media print {
  body.equip-mode > *:not(#equipRosterPage) { display: none !important; }
  body.equip-mode { background: #fff !important; }
  body.equip-mode #equipRosterPage { height: auto; overflow: visible; padding: 0; background: #fff; color: #000; }
  body.equip-mode .fr-toolbar select,
  body.equip-mode .fr-toolbar .btn,
  body.equip-mode .fr-search,
  body.equip-mode .eq-hint,
  body.equip-mode .eq-bench,
  body.equip-mode .eq-dest-tools,
  body.equip-mode .eq-dest-add,
  body.equip-mode .eq-jobs-head .btn,
  body.equip-mode .chip-x { display: none !important; }
  body.equip-mode .eq-jobs-list { max-height: none; overflow: visible; }
  body.equip-mode .eq-dest.collapsed .eq-dest-body { display: block; }
  body.equip-mode .eq-dest, body.equip-mode .eq-jobs { background: #fff; border-color: #999; break-inside: avoid; }
  body.equip-mode .eq-dest-head { background: #eee; color: #000; }
  body.equip-mode .eq-item, body.equip-mode .fr-title { color: #000; }
}
.eq-layout.no-jobs { grid-template-columns: 1fr; }
body.no-logistics #eqBenchNew { display: none !important; }

/* ---- Equipment Roster, laid out like the Field Roster ----
   Destinations are .fr-cat categories and panels are .fr-crew columns, so
   they wear the roster's own styles; what's here only undoes the old card
   look and fits the jobs column, which stacks rather than spreading. */
#equipRosterPage .eq-dest {
  border: 0; border-radius: 0; overflow: visible; min-height: 0;
  background: hsl(210 15% 12%); box-shadow: none;
}
#equipRosterPage .eq-dest-head { padding: 5px 8px; background: var(--panel-2); gap: 6px; }
#equipRosterPage .eq-dest.collapsed .eq-panels { display: none; }
#equipRosterPage [data-eq-drop].drag-over { box-shadow: inset 0 0 0 2px var(--accent); }
#equipRosterPage .eq-cell .eq-item { padding: 2px 4px; }
#equipRosterPage .eq-layout.editing .eq-cell { min-height: 64px; }
#equipRosterPage .eq-loose-head .fr-crew-name { font-style: italic; color: var(--text-faint); }
#equipRosterPage .eq-layout.searching .eq-cell .eq-item:not(.hit) { opacity: .18; }

/* ---- Sticky notes on the Logistics board ----
   Yellow squares that float over the page wherever they are dragged. The
   page is the scrolling box, so a layer pinned to its corner scrolls with
   the board and the notes with it. The layer itself has no size: only the
   notes take clicks, and the board under them stays workable.
   The handwriting faces are ones the machine already has (Segoe Print on
   Windows, Bradley Hand and Chalkboard on a Mac) because the CSP allows no
   font from anywhere but here, and none is bundled. */
#equipRosterPage { position: relative; }
.eq-notes { position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 40; }
.eq-fnote {
  position: absolute; width: 220px; min-height: 170px;
  background: #fde68a; color: #3b2f0b; border-radius: 2px;
  box-shadow: 2px 4px 10px rgba(0, 0, 0, .45);
  padding: 6px 10px 10px; display: flex; flex-direction: column;
  font-family: "Segoe Print", "Bradley Hand", "Chalkboard SE", "Comic Sans MS", cursive;
}
.eq-fnote:focus-within { z-index: 1; }
.eq-fnote.dragging { z-index: 2; box-shadow: 6px 12px 22px rgba(0, 0, 0, .55); }
/* A note that is only on this screen: paler, with a dashed edge. */
.eq-fnote.temp { background: #fef3c7; outline: 2px dashed rgba(59, 47, 11, .4); outline-offset: -5px; }
.eq-fnote-head {
  display: flex; align-items: center; gap: 6px; margin-bottom: 4px;
  cursor: grab; user-select: none; touch-action: none;
}
.eq-fnote.dragging .eq-fnote-head { cursor: grabbing; }
.eq-fnote-tag {
  font: 700 9px/1 system-ui, sans-serif; letter-spacing: .06em; text-transform: uppercase;
  color: rgba(59, 47, 11, .7); white-space: nowrap;
}
.eq-note-name {
  flex: 1 1 auto; min-width: 0; font-weight: 700; font-size: 13px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.eq-note-x {
  background: none; border: 0; padding: 0 2px; cursor: pointer;
  color: rgba(59, 47, 11, .55); font-size: 16px; line-height: 1;
}
.eq-note-x:hover { color: #3b2f0b; }
.eq-note-text {
  flex: 1 1 auto; min-height: 120px; width: 100%; margin: 0; padding: 0;
  background: transparent; border: 0; outline: none; resize: vertical;
  color: inherit; font: inherit; font-size: 14px; line-height: 1.45;
  white-space: pre-wrap; overflow-wrap: anywhere;
}
textarea.eq-note-text:focus { box-shadow: 0 1px 0 rgba(59, 47, 11, .4); }
textarea.eq-note-text::placeholder { color: rgba(59, 47, 11, .45); }
/* On paper a place on the screen means nothing, so the notes print in a row
   above the board instead of over it. */
@media print {
  body.equip-mode .eq-notes { position: static; width: auto; height: auto; display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0; }
  body.equip-mode .eq-fnote {
    position: static; min-height: 0; background: #fff; box-shadow: none; outline: 0; border: 1px solid #999;
  }
  body.equip-mode .eq-fnote .eq-note-x, body.equip-mode .eq-fnote-tag { display: none; }
  body.equip-mode .eq-note-text { min-height: 0; }
}

/* The yard: a unit bar, then its destinations side by side. */
.eq-yard { min-width: 0; }
.eq-unit { border-radius: 8px 8px 0 0; }
.eq-unit .fr-unit-head { gap: 10px; }
.eq-band { border-radius: 0 0 8px 8px; min-height: 120px; }
/* An open destination takes the width the collapsed ones gave up, so a
   machine reads as its full description instead of an ellipsis. It never
   shrinks below its basis, so a yard wider than the screen still scrolls
   rather than squeezing every column thin; and it is capped, because one
   destination left open should not stretch the width of a monitor. The cap
   fits the longest description on file (57 characters) with room to spare. */
.eq-band .eq-dest:not(.collapsed) { flex: 1 0 auto; }
.eq-band .fr-crew { flex: 1 0 200px; max-width: 420px; }

/* The jobs column: the same unit bar and categories, one above another,
   with each job's panels stacked inside it. */
.eq-jobs .eq-unit { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; }
.eq-jobs .eq-unit .fr-unit-head { justify-content: flex-start; }
.eq-unit-btn { margin-left: auto; padding: 2px 8px; font-size: 11px; }
/* On the Jobs bar beside Collapse all. Narrow, because the column is. */
.eq-jobs-status {
  margin-left: auto; padding: 1px 4px; font-size: 10.5px; max-width: 130px;
}
.eq-jobs-status + .eq-unit-btn { margin-left: 6px; }
/* The Jobs bar is the width of the column, which isn't enough for a title, a
   count, a filter and a button side by side — the count wrapped into a
   column and the button onto two lines. So the count gets a line of its own
   under the title, and the controls keep the top line to themselves. */
.eq-jobs .eq-unit .fr-unit-head { flex-wrap: wrap; row-gap: 3px; padding-right: 20px; }  /* clear of the fold handle on the edge */
.eq-jobs .eq-jobs-n { order: 9; flex: 0 0 100%; margin: 0; line-height: 1.3; }
.eq-jobs .eq-unit-btn { white-space: nowrap; flex: 0 0 auto; }
/* The filter is the one thing on the top line that can give: it starts from
   a small basis, so the line never wraps on a narrow column, and grows into
   whatever room there is. */
.eq-jobs .eq-jobs-status { flex: 1 1 70px; min-width: 70px; }
@media print { .eq-jobs-status { display: none !important; } }
.eq-jobs .fr-cat + .fr-cat { border-left: 0; border-top: 1px solid var(--line); }
.eq-jobs .fr-cat-head { position: static; justify-content: flex-start; cursor: pointer; }
.eq-jobs .fr-cat-head .fr-cat-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.eq-jobs .eq-panels { flex-direction: column; }
.eq-jobs .fr-crew { flex: 0 0 auto; }
.eq-jobs .fr-crew + .fr-crew { border-left: 0; border-top: 1px solid var(--line); }

@media print {
  body.equip-mode .fr-cat-actions,
  body.equip-mode .fr-cat-grip,
  body.equip-mode .fr-crew-grip,
  body.equip-mode .fr-crew-x,
  body.equip-mode .fr-add,
  body.equip-mode .eq-unit-btn { display: none !important; }
  body.equip-mode .eq-dest.collapsed .eq-panels { display: flex; }
  body.equip-mode .fr-cat, body.equip-mode .fr-cell { background: #fff !important; }
  body.equip-mode .fr-cat-head, body.equip-mode .fr-crew-head, body.equip-mode .fr-unit { background: #eee !important; color: #000; }
}

/* ---- Equipment Roster: Jobs and Unplaced fold like the Calendar's rails ----
   The same round handle on the column's edge and the same thin strip with
   the name running down it (.rail-handle, .rail-toggle); only where they sit
   is set here. */
#equipRosterPage .eq-layout.jobs-collapsed { --eq-left: 34px; }
#equipRosterPage .eq-layout.bench-collapsed { --eq-right: 34px; }
.eq-handle-left { top: 18px; left: calc(16px + var(--eq-left) - 12px); }
.eq-handle-right { top: 18px; right: calc(16px + var(--eq-right) - 12px); }
.eq-layout.jobs-collapsed .eq-handle-left span,
.eq-layout.bench-collapsed .eq-handle-right span { transform: scaleX(-1); }
.eq-layout.no-jobs .eq-handle-left { display: none; }

.eq-layout:not(.jobs-collapsed) #eqJobsCol > .rail-toggle,
.eq-layout:not(.bench-collapsed) #eqTray > .rail-toggle { display: none; }
#eqJobsCol > .rail-toggle { justify-content: flex-end; }
#eqTray > .rail-toggle { justify-content: flex-start; }
.eq-layout.jobs-collapsed #eqJobsCol,
.eq-layout.bench-collapsed #eqTray {
  padding: 10px 4px; overflow: hidden; cursor: pointer;
  min-height: calc(100vh - 170px);
}
.eq-layout.jobs-collapsed #eqJobsCol:hover,
.eq-layout.bench-collapsed #eqTray:hover { background: var(--panel-2); }
.eq-layout.jobs-collapsed #eqJobsCol > :not(.rail-toggle),
.eq-layout.bench-collapsed #eqTray > :not(.rail-toggle) { display: none !important; }
.eq-layout.jobs-collapsed #eqJobsCol > .rail-toggle,
.eq-layout.bench-collapsed #eqTray > .rail-toggle {
  flex-direction: column; justify-content: flex-start; height: 100%; margin: 0; padding: 6px 0; gap: 10px;
}
.eq-layout.jobs-collapsed #eqJobsCol .rail-toggle-label,
.eq-layout.bench-collapsed #eqTray .rail-toggle-label { display: block; writing-mode: vertical-rl; white-space: nowrap; }
.eq-layout.jobs-collapsed #eqJobsCol .rail-toggle-arrow,
.eq-layout.bench-collapsed #eqTray .rail-toggle-arrow { transform: scaleX(-1); }
@media (max-width: 900px) {
  .eq-handle-left, .eq-handle-right { display: none; }
  .eq-layout.jobs-collapsed #eqJobsCol > :not(.rail-toggle),
  .eq-layout.bench-collapsed #eqTray > :not(.rail-toggle) { display: revert !important; }
  .eq-layout #eqJobsCol > .rail-toggle,
  .eq-layout #eqTray > .rail-toggle { display: none !important; }
  .eq-layout.jobs-collapsed #eqJobsCol,
  .eq-layout.bench-collapsed #eqTray { min-height: 0; padding: revert; cursor: auto; }
}
@media print {
  body.equip-mode .rail-handle, body.equip-mode .rail-toggle { display: none !important; }
}

/* ---- Equipment Roster: a machine's details ---- */
.eq-detail { width: 560px; }
/* The machine's picture at the top of its popup and its report: as wide as
   the sections, capped so a square stock shot doesn't push the fields off
   the screen. */
.eq-detail-pic { display: block; width: 100%; max-height: 260px; object-fit: contain; border-radius: 10px;
                 background: var(--panel-2); margin-bottom: 12px; }
/* The picture buttons keep the left of the popup's foot, Close the right. */
.eq-detail-pic-btn { margin-right: auto; }
.eq-detail-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.eq-detail-table th, .eq-detail-table td {
  text-align: left; vertical-align: top; padding: 5px 6px; border-bottom: 1px solid var(--line-soft);
}
.eq-detail-table th { width: 44%; font-weight: 600; color: var(--text-dim); }
.eq-detail-table th code {
  display: block; font-size: 10px; font-weight: 400; color: var(--text-faint);
  font-family: ui-monospace, monospace; margin-top: 1px;
}
.eq-detail-table td { color: var(--text); word-break: break-word; }
.eq-detail-sets { display: flex; flex-wrap: wrap; gap: 4px; }
#equipRosterPage .eq-item, #equipRosterPage .eq-bench-token { cursor: pointer; }
#equipRosterPage .eq-layout.editing .eq-item[draggable="true"],
#equipRosterPage .eq-bench-token[draggable="true"] { cursor: grab; }

/* ---- Equipment Roster: everything folds ----
   A destination in the yard folds to a thin strip with its name running
   down it, like the Jobs and Unplaced strips; so does a panel. In the Jobs
   column, where things stack, a folded panel is just its name bar. */
.eq-band .eq-dest-head { cursor: pointer; }
.eq-band .eq-dest.collapsed { flex: 0 0 34px; width: 34px; min-width: 34px; }
.eq-band .eq-dest.collapsed .eq-panels { display: none; }
.eq-band .eq-dest.collapsed .fr-cat-head {
  writing-mode: vertical-rl; flex: 1 1 auto; justify-content: flex-start; align-items: center;
  gap: 8px; padding: 8px 0; border-bottom: 0; position: static;
}
.eq-band .eq-dest.collapsed .fr-cat-actions,
.eq-band .eq-dest.collapsed .eq-dest-badge,
.eq-band .eq-dest.collapsed .fr-cat-grip,
.eq-band .eq-dest.collapsed .eq-dest-hits { display: none; }
.eq-band .eq-dest.collapsed:hover .fr-cat-head { background: var(--panel-3, #23293380); }

.eq-panel-fold { font-size: 10px; transition: transform .15s ease; }
.eq-panel.collapsed .eq-panel-fold { transform: rotate(-90deg); }
.eq-panel.collapsed .eq-cell { display: none; }
.eq-band .eq-panel.collapsed { flex: 0 0 30px; min-width: 30px; cursor: pointer; }
.eq-band .eq-panel.collapsed .fr-crew-head {
  writing-mode: vertical-rl; flex: 1 1 auto; justify-content: flex-start; align-items: center;
  padding: 6px 0; gap: 6px;
}
.eq-band .eq-panel.collapsed .fr-crew-head > :not(.eq-panel-fold):not(.fr-crew-name):not(.eq-panel-n) { display: none; }
.eq-band .eq-panel.collapsed .eq-panel-fold { transform: none; }
.eq-band .eq-panel.collapsed:hover .fr-crew-head { background: var(--panel-3, #23293380); }
@media print {
  body.equip-mode .eq-dest.collapsed .eq-panels,
  body.equip-mode .eq-panel.collapsed .eq-cell { display: flex !important; }
  body.equip-mode .eq-band .eq-dest.collapsed,
  body.equip-mode .eq-band .eq-panel.collapsed { width: auto; flex: 0 0 auto; }
  body.equip-mode .eq-band .eq-dest.collapsed .fr-cat-head,
  body.equip-mode .eq-band .eq-panel.collapsed .fr-crew-head { writing-mode: horizontal-tb; }
  body.equip-mode .eq-panel-fold { display: none !important; }
}

/* Address search is for people who can place a geofence (it needs `schedule`
   on the server too), so a viewer isn't shown a box that would refuse them. */
body.read-only .geo-search { display: none; }

/* A panel's count sits in its name bar (there is none under the list). */
.eq-panel-n { flex: 0 0 auto; }

/* ---- Logistics reports ----
   A window over the board: a list to pick from down the left, the report on
   the right. Built from the theme's own variables throughout, so it follows
   dark and light without a rule of its own for either. */
.rp-modal {
  width: min(1180px, 95vw); height: min(860px, 92vh); max-height: 92vh;
  padding: 0; overflow: hidden; display: flex; flex-direction: column;
}
.rp-head { display: flex; align-items: center; gap: 12px; padding: 16px 20px 8px; }
.rp-head .modal-title { margin: 0; }
.rp-board { flex: 1 1 auto; font-size: 12px; color: var(--text-dim); display: flex; align-items: center; gap: 8px; }
.rp-modal .me-tabs { margin: 0; padding: 0 20px; }
.rp-layout { flex: 1 1 auto; min-height: 0; display: flex; }
.rp-side {
  flex: 0 0 290px; min-width: 0; display: flex; flex-direction: column; gap: 8px;
  padding: 12px; border-right: 1px solid var(--line); background: var(--bg-deck);
}
.rp-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 3px; }
.rp-list-head {
  font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--text-faint);
  padding: 8px 6px 3px;
}
.rp-pick {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; cursor: pointer;
  background: none; border: 1px solid transparent; border-radius: 8px; padding: 7px 9px; color: var(--text);
}
.rp-pick:hover { background: var(--panel-2); }
.rp-pick.active { background: var(--panel-2); border-color: var(--accent); }
.rp-pick-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.rp-pick-name { font-size: 12.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-pick-sub { font-size: 10.5px; color: var(--text-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-pick-need {
  flex: 0 0 auto; font-size: 9px; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap;
  padding: 2px 6px; border-radius: 4px; border: 1px dashed var(--accent); color: var(--accent-2);
}
.rp-em { font-family: ui-monospace, Consolas, monospace; font-weight: 700; }
.rp-empty-side { font-size: 11.5px; color: var(--text-faint); padding: 10px 8px; }

/* Where something is, as a pill: orange for a job, blue for the yard, grey
   for the bench. The same three mean the same thing all over the report. */
.rp-where {
  flex: 0 0 auto; max-width: 46%; font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 10px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  --k: var(--text-faint); color: var(--k); border: 1px solid var(--k);
  background: color-mix(in srgb, var(--k) 12%, transparent);
}
.rp-where.job { --k: var(--accent); }
.rp-where.yard { --k: var(--blue); }
.rp-where.bench { --k: var(--text-faint); }
.rp-where.big { max-width: 100%; font-size: 14px; padding: 5px 12px; border-radius: 14px; }

.rp-main { flex: 1 1 auto; min-width: 0; overflow-y: auto; padding: 18px 22px 24px; }
.rp-empty { height: 100%; display: flex; align-items: center; justify-content: center; color: var(--text-faint); font-size: 13px; }
.rp-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 14px; }
.rp-title { font-size: 20px; font-weight: 800; line-height: 1.2; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rp-sub { font-size: 12px; color: var(--text-dim); margin-top: 3px; }
.rp-title-side { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.rp-status { font-size: 11px; font-weight: 800; padding: 4px 10px; border-radius: 12px; white-space: nowrap; }
.rp-status.ok { color: var(--green); border: 1px solid var(--green); }
.rp-status.out { color: var(--red); border: 1px solid var(--red); }

.rp-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 18px; }
.rp-tile {
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px;
  display: flex; flex-direction: column; gap: 2px;
}
.rp-tile.wide { grid-column: span 2; justify-content: center; }
.rp-tile.warn { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--panel-2)); }
.rp-tile-n { font-size: 28px; font-weight: 800; line-height: 1.1; }
.rp-tile.warn .rp-tile-n { color: var(--accent-2); }
.rp-tile-l { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint); font-weight: 700; }
.rp-now { margin-top: 6px; display: flex; }

.rp-sec { margin-bottom: 20px; }
.rp-sec-title {
  font-size: 11px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--text-faint);
  margin-bottom: 8px; display: flex; align-items: center; gap: 6px;
}
.rp-sec-title span { color: var(--accent); }
.rp-sec-hint { font-size: 11.5px; color: var(--text-dim); margin: -3px 0 9px; }
.rp-none { font-size: 12px; color: var(--text-faint); font-style: italic; padding: 4px 0; }

/* The mix: the whole job as one bar. */
.rp-mix { display: flex; height: 14px; gap: 2px; border-radius: 7px; overflow: hidden; margin-bottom: 12px; }
.rp-mix-seg { background: var(--c); min-width: 4px; }
.rp-mix-seg.need {
  background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--c) 55%, transparent) 0 4px, transparent 4px 8px);
  box-shadow: inset 0 0 0 1px var(--c);
}
.rp-bars { display: flex; flex-direction: column; gap: 7px; }
.rp-bar-row { display: grid; grid-template-columns: minmax(120px, 230px) 1fr 108px; align-items: center; gap: 10px; }
.rp-bar-label { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--c); margin-right: 7px; }
.rp-bar-track { display: flex; height: 14px; border-radius: 7px; background: var(--panel-2); overflow: hidden; }
.rp-bar-fill { background: var(--c); border-radius: 7px; min-width: 6px; }
.rp-bar-need {
  border: 1.5px dashed var(--c); border-radius: 7px; min-width: 10px; margin-left: 2px;
  background: color-mix(in srgb, var(--c) 14%, transparent);
}
.rp-bar-value { font-size: 12.5px; font-weight: 800; white-space: nowrap; }
.rp-bar-plus { font-size: 10.5px; font-weight: 700; color: var(--accent-2); margin-left: 5px; }
.rp-key { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 10px; font-size: 10.5px; color: var(--text-faint); }
.rp-key span { display: inline-flex; align-items: center; gap: 6px; }
.rp-key i { display: inline-block; width: 16px; height: 9px; border-radius: 5px; }
.rp-key-solid { background: var(--accent); }
.rp-key-need { border: 1.5px dashed var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.rp-key i.rp-key-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--k); }
.rp-key-dot.job { --k: var(--accent); }
.rp-key-dot.yard { --k: var(--blue); }
.rp-key-dot.bench { --k: var(--text-faint); }

.rp-needs { display: flex; flex-wrap: wrap; gap: 6px; }
.rp-need-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 8px;
  border: 1px dashed var(--accent); color: var(--accent-2); font-size: 12px; font-weight: 700;
}
.rp-need-chip b { color: var(--text); }
.rp-need-q { font-size: 11px; }

.rp-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
/* Actual vs estimate: the Fleet reports' table, a row a phase with its
   flags and rain days in a quieter row under it. */
.act-table td { white-space: nowrap; }
.act-table td.act-name { white-space: normal; font-weight: 700; }
.act-table tr.act-detail td { border-top: 0; padding-top: 0; font-size: 11.5px; color: var(--text-dim); white-space: normal; }
.act-table tr.act-detail:hover td, .act-table tr.act-op:hover td { background: none; }
.act-dim { color: var(--text-faint); font-size: 11px; }
.act-shared { text-decoration: underline dotted; text-underline-offset: 3px; cursor: help; }
.act-over { color: var(--red); font-weight: 800; }
.act-flag { color: var(--accent-2); font-weight: 700; }
.act-rain { color: var(--blue); }
.act-list { margin: 0; padding-left: 18px; font-size: 12.5px; }
.act-list li { margin: 2px 0; }
.act-report + .act-report { border-top: 1px solid var(--line); padding-top: 18px; }
.rp-table th {
  text-align: left; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint);
  padding: 6px 8px; border-bottom: 1px solid var(--line);
}
.rp-table td { padding: 6px 8px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.rp-table tr.rp-group-start td { border-top: 1px solid var(--line); }
.rp-table tbody tr:hover td { background: var(--panel-2); }
.rp-count { color: var(--accent); font-weight: 800; margin-left: 2px; }
.rp-link {
  background: none; border: 0; padding: 0; cursor: pointer; color: var(--text);
  font: 700 12.5px ui-monospace, Consolas, monospace; text-decoration: underline dotted; text-underline-offset: 3px;
}
.rp-link:hover { color: var(--accent); }
.rp-nodriver { color: var(--red); font-weight: 700; }

/* Where a machine has been: a stop per board along one line, oldest first.
   The piece of line leading INTO a stop lights up when the machine moved to
   get there, so the eye lands on the moves and slides past the rest. */
.rp-timeline { display: flex; align-items: stretch; padding: 4px 0 2px; }
.rp-stop { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 5px; --k: var(--text-faint); }
.rp-stop.job { --k: var(--accent); }
.rp-stop.yard { --k: var(--blue); }
.rp-stop.bench { --k: var(--text-faint); }
.rp-stop-date { font-size: 11px; font-weight: 800; color: var(--text-dim); }
.rp-stop-rail { position: relative; width: 100%; height: 18px; display: flex; align-items: center; justify-content: center; }
.rp-stop-rail::before {
  content: ""; position: absolute; left: -50%; right: 50%; top: 50%; height: 2px; margin-top: -1px;
  background: var(--line);
}
.rp-stop:first-child .rp-stop-rail::before { display: none; }
.rp-stop.moved .rp-stop-rail::before { background: var(--k); height: 3px; margin-top: -1.5px; }
.rp-stop.draft .rp-stop-rail::before {
  background: repeating-linear-gradient(90deg, var(--k) 0 6px, transparent 6px 11px);
}
.rp-stop-dot {
  position: relative; width: 14px; height: 14px; border-radius: 50%;
  background: var(--k); box-shadow: 0 0 0 3px var(--panel), 0 0 0 4px var(--k);
}
.rp-stop.draft .rp-stop-dot { background: var(--panel); }
.rp-stop-place {
  max-width: 94%; font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 10px;
  color: var(--k); border: 1px solid var(--k); background: color-mix(in srgb, var(--k) 12%, transparent);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rp-stop-note { font-size: 10px; color: var(--text-faint); text-transform: uppercase; letter-spacing: .06em; }
.rp-stop.moved .rp-stop-note { color: var(--k); font-weight: 800; }

.rp-moves { display: flex; flex-direction: column; gap: 6px; }
.rp-move { display: flex; align-items: center; gap: 9px; font-size: 12.5px; }
.rp-move-date { flex: 0 0 96px; color: var(--text-dim); font-weight: 700; font-size: 11.5px; }
.rp-move .rp-where { max-width: 38%; font-size: 11.5px; }
.rp-move-arrow { color: var(--text-faint); }
.rp-details .frc-sec { margin-bottom: 14px; }

@media (max-width: 760px) {
  .rp-layout { flex-direction: column; }
  .rp-side { flex: 0 0 34%; border-right: 0; border-bottom: 1px solid var(--line); }
  .rp-bar-row { grid-template-columns: 110px 1fr 84px; }
}

/* ---- Time clock (the office's side) ---- */
.tc-modal { width: min(1100px, 95vw); }
.tc-pilot {
  font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; vertical-align: middle; margin-left: 6px;
  padding: 2px 7px; border-radius: 5px; border: 1px dashed var(--accent); color: var(--accent-2); font-weight: 800;
}
.tc-toolbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin-bottom: 12px; }
.tc-toolbar .shelf-search { flex: 1 1 260px; margin: 0; }
.tc-toolbar input[type="date"] {
  background: var(--panel-2); border: 1px solid var(--line); color: var(--text);
  border-radius: 6px; padding: 5px 7px; font-size: 12px; font-family: inherit;
}
.tc-stat {
  display: flex; flex-direction: column; padding: 5px 12px; border-radius: 9px;
  background: var(--panel-2); border: 1px solid var(--line); min-width: 84px;
}
.tc-stat b { font-size: 17px; line-height: 1.1; }
.tc-stat span { font-size: 9.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--text-faint); font-weight: 700; }
.tc-stat.warn { border-color: var(--accent); }
.tc-stat.warn b { color: var(--accent-2); }
.tc-export { margin-left: auto; }
.tc-scroll { max-height: 52vh; overflow-y: auto; border: 1px solid var(--line-soft); border-radius: 8px; }
.tc-scroll thead th { position: sticky; top: 0; background: var(--panel); }
.tc-hours { font-weight: 800; text-align: right; font-variant-numeric: tabular-nums; }
.tc-flag {
  display: inline-block; font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 8px; white-space: nowrap;
  --k: var(--accent); color: var(--k); border: 1px solid var(--k);
}
.tc-flag.on_clock { --k: var(--green); }
.tc-flag.open { --k: var(--red); }
.tc-note { margin-top: 10px; }
.tc-pin { text-decoration: none; font-size: 11px; margin-left: 2px; }
.tc-board, .tc-place {
  font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap;
  padding: 1px 7px; border-radius: 6px; color: var(--blue); border: 1px solid var(--blue);
}
.tc-place { color: var(--green); border-color: var(--green); }
.tc-truck { color: var(--purple); border-color: var(--purple); }
/* A machine's equipment-data tag, told apart from its clock-in tag in the
   Tags list, and the flags its entries carry on the Equipment tab. */
.tc-purpose {
  font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap;
  padding: 1px 7px; border-radius: 6px; color: var(--gold); border: 1px solid var(--gold); margin-left: 4px;
}
.tc-flag.needs_service, .tc-flag.meter_lower { --k: var(--red); }
.tc-flag.unscheduled { --k: var(--text-faint); }
.rcode-row .rcode-needs {
  background: var(--panel); border: 1px solid var(--line); color: var(--text);
  border-radius: 5px; padding: 4px 6px; font-size: 11.5px; min-width: 0; font-family: inherit;
}
.rcode-row .rcode-needs:focus { border-color: var(--accent); outline: none; }
.tc-flag.requirement_unset { --k: var(--text-faint); }
.tc-place-row { align-items: flex-end; }
.tc-place-row .sc-field-wide { flex: 0 1 320px; }
/* The box is a plain text input outside the rows that style their own, so
   it is dressed here to match them rather than the browser's white. */
.tc-place-row input[type="text"] {
  background: var(--panel-2); border: 1px solid var(--line); color: var(--text);
  border-radius: 6px; padding: 7px 9px; font-size: 12.5px; outline: none; font-family: inherit;
}
.tc-place-row input[type="text"]:focus { border-color: var(--accent); }
.tc-list { max-height: 40vh; }
.tc-found { max-height: none; margin-bottom: 12px; }
.tc-n { color: var(--accent); }
/* The Exceptions tab: a request, why it was refused, the person's words,
   and — while it waits — a note, the as-of tick and the two answers. */
.tc-ex-list { max-height: none; }
.tc-ex-row { align-items: flex-start; }
.tc-ex-status { margin-left: 6px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--text-dim); }
.tc-ex-row.pending .tc-ex-status { color: var(--accent-2); }
.tc-ex-row.approved .tc-ex-status { color: var(--green); }
.tc-ex-row.declined .tc-ex-status { color: var(--red); }
.tc-ex-refusal { font-size: 12.5px; color: var(--red); margin-top: 3px; }
.tc-ex-reason { font-size: 13px; margin-top: 3px; }
.tc-ex-act { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.tc-ex-act .tc-ex-note {
  flex: 1 1 220px; background: var(--panel-2); border: 1px solid var(--line); color: var(--text);
  border-radius: 6px; padding: 7px 9px; font-size: 12.5px; outline: none; font-family: inherit;
}
.tc-ex-act .tc-ex-note:focus { border-color: var(--accent); }
.tc-ex-asof { display: flex; align-items: center; gap: 6px; font-size: 12.5px; }
/* The Time off tab. A row is three columns — who, the request, and what can
   be done with it — and the last is a fixed width whether or not it holds
   buttons, so the middle one starts and ends at the same place all the way
   down the list. */
.tc-toff-list { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; }
.tc-toff-row {
  display: grid; grid-template-columns: 190px minmax(0, 1fr) 236px; gap: 4px 14px; align-items: start;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px;
}
.tc-toff-row.over, .tc-toff-row.withdrawn, .tc-toff-row.declined { opacity: .7; }
.tc-toff-who .user-handle { margin-left: 0; }
.tc-toff-who .user-name { overflow-wrap: anywhere; }
.tc-toff-main { overflow-wrap: anywhere; }
.tc-toff-span { font-size: 13px; font-weight: 700; }
.tc-toff-days { font-weight: 400; color: var(--text-dim); }
.tc-toff-flag { font-size: 12px; color: var(--accent-2); margin-top: 3px; }
.tc-toff-office { font-size: 11.5px; font-weight: 700; color: var(--accent-2); margin-top: 3px; }
.tc-toff-side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.tc-toff-status { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--text-dim); }
.tc-toff-row.pending .tc-toff-status { color: var(--accent-2); }
.tc-toff-row.approved .tc-toff-status { color: var(--green); }
.tc-toff-row.declined .tc-toff-status { color: var(--red); }
.tc-toff-btns { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.tc-toff-btns .btn { padding: 5px 9px; font-size: 11.5px; }
.tc-toff-note, .tc-toff-form input[type="date"], .tc-toff-form input[type="text"] {
  background: var(--panel-2); border: 1px solid var(--line); color: var(--text);
  border-radius: 6px; padding: 6px 8px; font-size: 12px; outline: none; font-family: inherit;
}
.tc-toff-note { width: 100%; box-sizing: border-box; background: var(--panel); }
.tc-toff-note:focus, .tc-toff-form input:focus { border-color: var(--accent); }
.tc-toff-form { padding: 10px; border: 1px dashed var(--line); border-radius: 8px; }
.tc-toff-form .btn { padding: 6px 10px; font-size: 12px; }
@media (max-width: 760px) {
  /* Too narrow for three columns: the row stacks, and the last column,
     now a line of its own, lines up with the rest from the left. */
  .tc-toff-row { grid-template-columns: minmax(0, 1fr); }
  .tc-toff-side { align-items: flex-start; }
  .tc-toff-btns { justify-content: flex-start; }
}
.tc-url {
  display: block; margin-top: 4px; font: 11px ui-monospace, Consolas, monospace; color: var(--text-dim);
  user-select: all; overflow-wrap: anywhere; text-decoration: none;
}
a.tc-url:hover, a.tc-url:focus-visible { text-decoration: underline; }

/* The Hours tab: the filter bar, and the hours as a tree. */
.tc-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin-bottom: 10px; }
/* The Map tab: the punches drawn where they were made. */
.tc-map { height: 58vh; min-height: 340px; }
.tc-goto { flex: 0 0 auto; }
/* The Go-to dropdowns sit on the toolbar, not in the filter bar, so they
   take the filter dropdowns' dark dress here. */
.tc-goto select {
  max-width: 220px; background: var(--panel-2); border: 1px solid var(--line); color: var(--text);
  border-radius: 6px; padding: 6px 8px; font-size: 12px; font-family: inherit;
}
.tc-goto select:focus { border-color: var(--accent); outline: none; }
.tc-legend { display: inline-flex; align-items: center; gap: 5px 10px; flex-wrap: wrap; font-size: 11px; color: var(--text-dim); }
.tc-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid #fff; vertical-align: -1px; }
.tc-dot.in { background: #3ecf8e; }
.tc-dot.out { background: #ffb648; }
.tc-dot.look { background: var(--panel-2); border: 2.5px solid #ff5c6c; }
.tc-dot.fence { background: #4fa3ff22; border: 1.5px solid #4fa3ff; }
.tc-dot-card { font-size: 12px; line-height: 1.4; color: #111; min-width: 180px; }
.tc-dot-card .tc-dot-name { font-weight: 800; font-size: 13px; margin-bottom: 2px; }
.tc-dot-card .tc-dot-flags { color: #b4232f; font-weight: 700; margin-top: 2px; }
.tc-dot-card .tc-dot-acc { color: #666; font-size: 11px; margin-top: 2px; }
.tc-filters .sc-field select, .tc-filters .sc-field input[type="search"] {
  background: var(--panel-2); border: 1px solid var(--line); color: var(--text);
  border-radius: 6px; padding: 6px 8px; font-size: 12px; font-family: inherit; min-width: 120px;
}
.tc-filters .sc-field select:focus, .tc-filters .sc-field input:focus { border-color: var(--accent); outline: none; }
.tc-filters .sc-field.tc-hide { display: none; }
.tc-presets { display: flex; gap: 4px; }
.tc-summary { align-items: center; gap: 8px; }
.tc-range { font-size: 12px; font-weight: 800; }
.tc-chip {
  background: color-mix(in srgb, var(--accent) 14%, transparent); border: 1px solid var(--accent); color: var(--accent-2);
  font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 12px; cursor: pointer;
}
.tc-totals { font-size: 12px; color: var(--text-dim); }
.tc-totals b { color: var(--text); font-size: 13px; }
.tc-warn { color: var(--accent-2); font-weight: 700; }
.tc-spacer { flex: 1 1 auto; }
.btn.tc-small { padding: 5px 9px; font-size: 11.5px; }
.tc-tree { max-height: 52vh; overflow-y: auto; border: 1px solid var(--line-soft); border-radius: 8px; }
.tc-node {
  display: flex; align-items: center; gap: 8px; padding: 7px 10px 7px calc(10px + var(--d) * 22px);
  border-bottom: 1px solid var(--line-soft); cursor: pointer; font-size: 12.5px;
}
.tc-node:hover { background: var(--panel-2); }
.tc-node.d0 { background: var(--panel-2); font-weight: 700; }
.tc-node.d0:hover { background: var(--panel-3, #23293380); }
.tc-caret { width: 12px; color: var(--text-faint); font-size: 11px; }
.tc-node-label { display: flex; align-items: center; gap: 6px; min-width: 0; }
.tc-node-meta { font-size: 11px; color: var(--text-faint); white-space: nowrap; }
.tc-node-hours { margin-left: auto; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tc-lvl { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-faint); font-weight: 700; }
.tc-kind-machine {
  font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap;
  padding: 1px 7px; border-radius: 6px; color: var(--text-dim); border: 1px solid var(--line);
}
.tc-stretch {
  display: grid; grid-template-columns: 70px 1fr auto 60px; gap: 10px; align-items: center;
  padding: 5px 10px 5px calc(22px + var(--d) * 22px); border-bottom: 1px solid var(--line-soft);
  font-size: 12px; color: var(--text-dim);
}
.tc-stretch .tc-hours { color: var(--text); }
.tc-stretch-flags { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }

/* ============================================================ ESTIMATING ==
   Trude's mockup of 9 October 2026: crew positions and saved setups on the
   left, the job block, the street sequence and the street blocks in the
   middle, equipment and the haul simulator on the right. The cards are the
   shift card's family (.zone-label and the rest are the card's rules). */
.est-toolbar-gap { flex: 1; }
.est-body { display: grid; grid-template-columns: 230px minmax(0, 1fr) 240px; gap: 12px; padding: 0 14px 14px; flex: 1; min-height: 0; }
.est-rail { display: flex; flex-direction: column; gap: 6px; min-height: 0; min-width: 0; }
.est-rail-head { font-size: 13px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; margin-top: 6px; }
.est-rail-head span { display: block; font-size: 10.5px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--text-faint); margin-top: 2px; }
.est-chips { display: flex; flex-direction: column; gap: 5px; }
.est-chip { display: flex; align-items: center; gap: 6px; background: var(--panel); border: 1px solid var(--line); border-radius: 9px; padding: 7px 8px; font-size: 12px; min-width: 0; }
.est-chip-grip { color: var(--text-faint); font-size: 12px; letter-spacing: -3px; flex: 0 0 auto; }
.est-chip-ico { font-size: 18px; flex: 0 0 26px; text-align: center; }
.est-chip-ico.big { font-size: 24px; flex-basis: 34px; }
.est-chip-main { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; }
.est-chip-main b { width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.est-chip-sub { color: var(--text-dim); font-size: 10.5px; }
.est-chip-rate { font-weight: 800; color: var(--text); font-size: 12px; white-space: nowrap; }
.est-tag { font-size: 9.5px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--text-dim); background: var(--panel-2); border: 1px solid var(--line); border-radius: 4px; padding: 1px 5px; }
.est-note { margin-top: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; font-size: 11px; color: var(--text-dim); }
.est-haul { margin-top: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 9px; padding: 8px 10px; display: flex; flex-direction: column; gap: 6px; }
.est-haul .est-rail-head { margin-top: 0; font-size: 12px; }
.est-haul-row { display: flex; flex-direction: column; gap: 3px; font-size: 11px; color: var(--text-dim); }
.est-haul-row select { background: var(--panel-2); border: 1px solid var(--line); color: var(--text-dim); border-radius: 5px; padding: 4px 6px; font-size: 11.5px; }
.est-haul-box { border: 1px dashed var(--line); border-radius: 6px; padding: 8px; font-size: 11px; text-align: center; }

.est-center { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.est-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); display: flex; flex-direction: column; overflow: hidden; overflow-x: auto; }
.est-card.drag-over { outline: 2px dashed var(--accent); outline-offset: -2px; }
.dimtext { color: var(--text-faint); }
.unpriced { color: var(--accent-2); font-style: italic; font-size: 11px; }
.est-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--c, #8a93a2); flex: 0 0 auto; vertical-align: middle; }

/* The job block */
.est-job-head { padding: 10px 14px 8px; border-bottom: 1px solid var(--line-soft); background: linear-gradient(180deg, var(--panel-2), var(--panel)); }
.est-job-title { display: flex; align-items: center; gap: 6px; font-size: 18px; font-weight: 800; text-transform: uppercase; letter-spacing: .3px; }
.est-job-title input { background: transparent; border: none; border-bottom: 1px dashed transparent; color: var(--text); font: inherit; padding: 2px 0; outline: none; min-width: 0; }
.est-job-title input:focus { border-bottom-color: var(--accent); }
.est-owner-in { flex: 0 1 230px; }
.est-title-in { flex: 1 1 240px; }
.est-bid-in { flex: 0 1 150px; }
.est-title-sep { color: var(--text-faint); }
.est-job-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 8px; }
.est-kv { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text-dim); }
.est-kv input, .est-kv select, .est-pill-in input, .est-filter, .est-field input, .est-field select, .est-inh input, .est-table input, .est-table select, .est-addrow input, .est-addrow select, .est-notes, .est-rate-pill input, .est-inline {
  background: var(--panel-2); border: 1px solid var(--line); color: var(--text); border-radius: 6px; padding: 4px 7px; font-size: 12px; font-family: inherit; min-width: 0;
}
.est-kv input:focus, .est-pill-in input:focus, .est-field input:focus, .est-inh input:focus, .est-table input:focus, .est-notes:focus, .est-rate-pill input:focus, .est-inline:focus { border-color: var(--accent); outline: none; }
.est-kv input.narrow, .est-table input.narrow { width: 60px; }
.est-rule-in { width: 150px; }
.est-date-sm { width: 128px; }
.est-completion { white-space: nowrap; }
.est-pill-in { display: inline-flex; align-items: center; gap: 5px; background: #2a1d0f; border: 1px solid #5a3d12; border-radius: 8px; padding: 2px 6px; }
.est-pill-in input { background: transparent; border: none; color: var(--accent-2); font-weight: 700; width: 150px; padding: 2px 0; }
.est-warnpill { background: #2c1d10; border: 1px solid #7a4a12; color: var(--accent-2); border-radius: 8px; padding: 4px 9px; font-size: 11.5px; font-weight: 700; cursor: pointer; white-space: nowrap; font-family: inherit; }
.est-warnpill.ok { background: #10261a; border-color: #1f5c38; color: var(--green); }
.est-st-row .est-warnpill, .est-st-name .est-warnpill { padding: 2px 7px; font-size: 10.5px; cursor: default; }
.est-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 8px 14px 4px; }
.est-group-label { font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--text-faint); font-weight: 800; margin-bottom: 5px; }
.est-tiles { display: flex; flex-wrap: wrap; gap: 6px; }
.est-tile { display: flex; align-items: center; gap: 8px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 9px; padding: 7px 10px; min-width: 0; }
.est-tile .est-dot { width: 10px; height: 10px; }
.est-tile-label { display: block; font-size: 10px; color: var(--text-dim); }
.est-tile b { font-size: 16px; line-height: 1.1; }
.est-tile-unit { font-size: 11px; color: var(--text-dim); }
.est-tiles.small .est-tile { padding: 4px 8px; }
.est-tiles.small .est-tile b { font-size: 13px; }
.est-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 7px 14px; border-top: 1px solid var(--line-soft); font-size: 12px; }
.est-row-label { background: none; border: none; color: var(--text); font: inherit; font-weight: 800; font-size: 12.5px; cursor: pointer; padding: 0; white-space: nowrap; }
.est-row-label i { font-style: normal; color: var(--text-faint); }
.est-pills { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.est-pill { display: inline-flex; align-items: center; gap: 5px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 7px; padding: 2px 7px; font-size: 11px; white-space: nowrap; }
.est-pill.dim { color: var(--text-dim); }
.est-rate-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; }
.est-rate-pill input { width: 64px; text-align: right; font-weight: 700; }
.est-rate-pill span:last-child { font-weight: 500; color: var(--text-dim); }
.est-suppliers .est-kv select { color: var(--text-dim); }

/* The street sequence toolbar, and the street blocks */
.est-seq { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 6px 2px; font-size: 12px; }
.est-search { width: 180px; }
.est-filter { width: auto; }
.est-seq-info { flex: 1 1 100%; }
.est-ai { border-color: #5b3fa0; color: #c9b3ff; }
.est-streets { display: flex; flex-direction: column; gap: 8px; }
.est-add-street { align-self: flex-start; }
.est-foot { font-size: 11px; color: var(--text-faint); padding: 6px 2px 0; }
.est-street.open { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), var(--shadow); }
.est-st-row { display: flex; align-items: center; gap: 10px; padding: 9px 12px; cursor: pointer; }
.est-st-row:hover { background: var(--panel-2); }
.est-grip { cursor: grab; color: var(--text-faint); font-size: 14px; letter-spacing: -4px; user-select: none; flex: 0 0 auto; }
.est-num { font-weight: 800; font-size: 13px; color: var(--text-dim); background: var(--panel-2); border: 1px solid var(--line); border-radius: 6px; padding: 2px 6px; flex: 0 0 auto; }
.est-st-rowname { font-size: 13px; text-transform: uppercase; letter-spacing: .3px; white-space: nowrap; }
.est-st-rowdims { white-space: nowrap; }
.est-st-row .est-pills { flex: 1; }
.est-toggle { background: none; border: none; color: var(--text-dim); font-size: 16px; cursor: pointer; padding: 0 2px; flex: 0 0 auto; }
.est-mpill, .est-method { font-size: 10.5px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; border-radius: 7px; padding: 2px 8px; border: 1px solid var(--line); background: var(--panel-2); color: var(--text-dim); }
.est-method { font-family: inherit; text-transform: none; }
.m-fdr .est-mpill, .est-method.m-fdr { background: #10261a; border-color: #1f5c38; color: var(--green); }
.m-mill .est-mpill, .est-method.m-mill { background: #0f1f33; border-color: #1f4a7a; color: #7cc0ff; }
.m-patch .est-mpill, .est-method.m-patch { background: #211436; border-color: #4a2f7a; color: #c9a6ff; }
.est-st-head { display: flex; align-items: flex-start; gap: 12px; padding: 10px 12px 8px; border-bottom: 1px solid var(--line-soft); background: linear-gradient(180deg, var(--panel-2), var(--panel)); }
.est-st-title { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.est-st-name { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.est-st-name-in { background: transparent; border: none; border-bottom: 1px dashed transparent; color: var(--text); font-weight: 800; font-size: 16px; text-transform: uppercase; letter-spacing: .3px; padding: 0; outline: none; flex: 1 1 160px; min-width: 0; }
.est-st-name-in:focus { border-bottom-color: var(--accent); }
.est-st-limits, .est-st-dims { font-size: 12px; color: var(--text-dim); display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.est-inline { padding: 1px 5px; font-size: 12px; width: 150px; }
.est-inline.num { width: 70px; text-align: right; }
.est-st-side { flex: 0 1 auto; min-width: 0; }
.est-mini-label { font-size: 9.5px; letter-spacing: 1px; text-transform: uppercase; color: var(--text-faint); font-weight: 800; margin-bottom: 4px; }
.est-phase-wrap { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(220px, 1fr); gap: 10px; padding: 8px 12px; align-items: start; }
.est-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.est-table th { text-align: left; font-size: 10px; letter-spacing: .5px; text-transform: uppercase; color: var(--text-faint); font-weight: 700; padding: 3px 6px; border-bottom: 1px solid var(--line-soft); white-space: nowrap; }
.est-table th.num, .est-table td.num { text-align: right; }
.est-table td { padding: 5px 6px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.est-table tr.dim td { color: var(--text-dim); }
.est-table input[type="number"] { width: 78px; text-align: right; }
.est-table input.wide { width: 100%; min-width: 160px; }
.est-table select { width: auto; max-width: 180px; }
.est-table .est-opname { width: 130px; }
.est-phase-row { cursor: pointer; }
.est-phase-row:hover td { background: var(--panel-2); }
.est-phase-row.sel td { background: #2a1d0f; }
.est-phase-row.sel td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.est-unit { font-size: 10.5px; }
.est-basis { font-size: 10.5px; padding: 1px 3px; }
.est-qty { display: inline-flex; gap: 3px; align-items: center; }
.est-qty select { width: 62px; }
.est-sub { font-size: 10.5px; color: var(--text-faint); margin-top: 2px; white-space: nowrap; }
.est-sub.warn, em.warn { color: var(--accent-2); font-style: normal; font-weight: 700; }
.est-inh { display: inline-flex; align-items: center; gap: 3px; }
.est-inh.inh input, select.inh { color: var(--text-dim); font-style: italic; border-style: dashed; }
.est-inh.own input, select.own { border-color: var(--accent); }
.est-from { font-size: 9px; color: var(--text-faint); font-style: normal; text-transform: uppercase; letter-spacing: .5px; }
.est-reset { background: none; border: 1px solid var(--line); color: var(--accent-2); border-radius: 4px; font-size: 11px; line-height: 1; padding: 2px 4px; cursor: pointer; }
.est-reset:hover { border-color: var(--accent); }
.est-phase-side { background: var(--panel-2); border: 1px solid var(--line); border-radius: 9px; padding: 8px 10px; font-size: 12px; display: flex; flex-direction: column; gap: 6px; }
.est-switchrow { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.est-switchrow .est-inh input { width: 52px; text-align: right; }
.est-sep { color: var(--text-faint); }
.est-switch { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-weight: 700; }
.est-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.est-switch-track { width: 30px; height: 16px; border-radius: 8px; background: var(--line); position: relative; transition: background .15s; flex: 0 0 auto; }
.est-switch-track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--text); transition: left .15s; }
.est-switch input:checked + .est-switch-track { background: var(--accent); }
.est-switch input:checked + .est-switch-track::after { left: 16px; }
.est-help { font-size: 11px; margin: 0; }
.est-setup { margin: 0 12px 8px; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; }
.est-setup-head { display: flex; align-items: center; gap: 6px; padding: 6px 10px; background: var(--panel-2); font-size: 11px; letter-spacing: .5px; text-transform: uppercase; font-weight: 800; color: var(--text-dim); }
.est-setup-head b { color: var(--text); font-size: 12px; }
.est-badge { margin-left: auto; font-size: 10px; letter-spacing: 0; text-transform: none; font-weight: 600; color: var(--accent-2); background: #2c1d10; border: 1px solid #7a4a12; border-radius: 6px; padding: 1px 7px; }
.est-setup-body { display: grid; grid-template-columns: minmax(0, 1fr) 210px; gap: 10px; padding: 10px; }
.est-setup-drop { border: 1px dashed var(--line); border-radius: 8px; padding: 18px 14px; font-size: 12px; text-align: center; align-self: stretch; display: flex; align-items: center; justify-content: center; }
.est-cost-box { background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; font-size: 12px; display: flex; flex-direction: column; gap: 4px; }
.est-cost-line { display: flex; justify-content: space-between; gap: 8px; }
.est-cost-line.total { border-top: 1px solid var(--line); padding-top: 4px; font-weight: 800; }
.est-cost-shifts { font-size: 12px; margin-top: 2px; }
.est-cost-shifts b { font-size: 14px; color: var(--accent-2); }
.est-st-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; padding: 8px 12px; border-top: 1px solid var(--line-soft); font-size: 12px; color: var(--text-dim); }
.est-spacer { flex: 1; }
.btn-sm { padding: 4px 10px; font-size: 11.5px; }
.btn-sm.danger { color: var(--red); }
.est-details { padding: 4px 12px 10px; border-top: 1px dashed var(--line); }
.est-details .zone-label { padding-left: 0; padding-right: 0; }
.est-details .est-table { margin-bottom: 6px; }
.est-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 6px 10px; margin-top: 8px; }
.est-pad-x { padding: 0 14px 10px; }
.est-field { display: flex; flex-direction: column; gap: 2px; font-size: 10.5px; color: var(--text-dim); min-width: 0; }
.est-field input, .est-field select { width: 100%; }
.est-notes { width: 100%; resize: vertical; margin-top: 4px; }
.est-notes.est-pad-x { width: calc(100% - 28px); margin: 4px 14px 10px; padding: 4px 7px; }
.est-addrow { display: flex; gap: 6px; align-items: center; padding: 4px 0 8px; flex-wrap: wrap; }
.est-job .est-addrow { padding: 4px 14px 10px; }
.est-addrow input { flex: 1 1 160px; }
.est-addrow input.narrow { flex: 0 0 80px; }
.est-addrow select { width: auto; }
.est-oprow-acts { white-space: nowrap; }
.btn-mini { background: var(--panel-2); border: 1px solid var(--line); color: var(--text-dim); border-radius: 4px; font-size: 10px; padding: 2px 5px; cursor: pointer; }
.btn-mini:hover { color: var(--text); border-color: #454f5e; }
.est-table td.ok { color: var(--green); }
.est-table td.short { color: var(--accent-2); }
.est-table td.over { color: var(--red); }
.est-job .est-table { width: calc(100% - 28px); margin: 0 14px 8px; }
.est-flags { display: flex; flex-direction: column; gap: 4px; padding: 0 14px 8px; }
.est-details .est-flags { padding: 0 0 8px; }
.est-flag { display: flex; gap: 8px; align-items: flex-start; font-size: 12px; background: var(--panel-2); border: 1px solid var(--line); border-left: 3px solid var(--accent-2); border-radius: 6px; padding: 6px 8px; }
.est-flag.kind-conflict { border-left-color: var(--red); }
.est-flag.kind-missing { border-left-color: var(--accent-2); }
.est-flag.kind-addendum { border-left-color: var(--accent); }
.est-flag.kind-info { border-left-color: var(--line); }
.est-flag.resolved { opacity: .5; }
.est-flag.resolved .est-flag-text { text-decoration: line-through; }
.est-flag-text { flex: 1; }
.est-flag-text i { color: var(--text-faint); font-size: 10.5px; }
.est-problems { display: flex; flex-direction: column; gap: 4px; padding: 0 14px 8px; }
.est-problem { font-size: 12px; color: var(--accent-2); background: #2c1d10; border: 1px solid #7a4a12; border-radius: 6px; padding: 5px 8px; }
.lg-chip-sub { color: var(--text-dim); font-size: 11px; white-space: nowrap; }
body.no-estimating .needs-estimating { display: none !important; }
@media (max-width: 1250px) { .est-two { grid-template-columns: 1fr; } .est-phase-wrap, .est-setup-body { grid-template-columns: 1fr; } }
/* The crew and equipment builder (phase 2): a machine's card with the slots
   its staffing opens, the general crew, the drop zones and the rails'
   controls. */
.est-rate-in { width: 52px; text-align: right; padding: 1px 4px; font-size: 11px; background: var(--panel-2); border: 1px solid var(--line); color: var(--text); border-radius: 4px; }
.est-chip-rate .est-rate-in { font-weight: 700; }
.est-gear { flex: 0 0 auto; font-size: 12px; padding: 2px 5px; }
.est-tag.incl { color: var(--green); border-color: #1f5c38; }
.est-tag.unset { color: var(--text-faint); border-style: dashed; }
.est-chip.est-drag[draggable="true"] { cursor: grab; }
.est-setup-hint { font-weight: 500; letter-spacing: 0; text-transform: none; }
.est-badge.red { color: #ff8a7a; background: #2e1512; border-color: #7a2a22; }
.est-badge.ok { color: var(--green); background: #10261a; border-color: #1f5c38; }
.est-setup-head .est-badge { margin-left: 0; }
.est-apply { background: var(--panel-2); border: 1px solid var(--line); color: var(--text); border-radius: 5px; padding: 3px 6px; font-size: 11px; font-family: inherit; text-transform: none; letter-spacing: 0; font-weight: 500; }
.est-setup-main { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.est-machines { display: flex; flex-wrap: wrap; gap: 8px; min-height: 56px; border: 1px dashed var(--line); border-radius: 8px; padding: 8px; }
.est-drop.drag-over { border-color: var(--accent); background: #2a1d0f; }
.est-phase-row.drag-over td { background: #2a1d0f; }
.est-drop-hint { font-size: 12px; align-self: center; margin: 0 auto; text-align: center; }
.est-machine { flex: 1 1 300px; max-width: 360px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 9px; padding: 7px 8px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.est-machine-top { display: flex; align-items: center; gap: 6px; }
.est-machine-ico { font-size: 26px; flex: 0 0 auto; }
.est-machine-name { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 12px; }
.est-machine-name b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.est-machine-name .dimtext { font-size: 10.5px; }
.est-count { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; }
.est-slots { display: flex; flex-wrap: wrap; gap: 4px; border: 1px dashed transparent; border-radius: 6px; padding: 3px; min-height: 26px; }
.est-slots.drag-over { border-color: var(--accent); }
.est-slot { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; border-radius: 6px; padding: 2px 6px; border: 1px solid var(--line); background: var(--panel); white-space: nowrap; }
.est-slot.filled { border-color: #1f5c38; }
.est-slot.filled.incl { border-style: dotted; opacity: .85; }
.est-slot.extra { border-color: var(--accent-2); border-style: dotted; }
.est-slot.open { border: 1px dashed var(--accent-2); color: var(--accent-2); background: transparent; cursor: pointer; font-family: inherit; }
.est-slot.open i { font-style: italic; font-weight: 500; }
.est-slot.open:hover { background: #2a1d0f; }
.est-slot .chip-x, .est-slot .btn-mini { margin-left: 2px; }
.est-slot-none { font-size: 10.5px; font-weight: 500; }
/* The machine as a hub with spokes (estSetupHtml): the lines are an SVG
   stretched over the box, the hub and the nodes sit on it at the places the
   page worked out, in percentages, so the three agree at any width. */
.est-spokes { position: relative; width: 100%; height: var(--h, 120px); border: 1px dashed transparent; border-radius: 8px; }
.est-spokes.drag-over { border-color: var(--accent); }
.est-spoke-lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.est-spoke-lines line { stroke: var(--text-faint); stroke-width: 1.5; }
.est-spoke-lines marker path { fill: var(--text-faint); }
.est-hub { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 112px; height: 72px; border-radius: 12px;
           background: #0f1218; border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.est-hub .est-pic { width: 112px; height: 72px; border-radius: 12px; }
.est-hub svg { width: 88px; height: 56px; }
.est-hub-n { position: absolute; right: 5px; bottom: 4px; font-size: 12px; font-weight: 800; color: #fff; background: #000a; border-radius: 8px; padding: 1px 6px; }
.est-spoke-node { position: absolute; transform: translate(-50%, -50%); white-space: nowrap; max-width: 170px; }
.est-spoke-name { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
/* The × that takes a person off: always there, read as a control. */
.est-spoke-node .chip-x { color: var(--text-dim); font-size: 13px; flex: 0 0 auto; }
.est-spoke-node .chip-x:hover { color: var(--red); }
/* + person sits in the diagram's bottom-right corner, out of the ring's way. */
.est-add-person { position: absolute; right: 4px; bottom: 4px; }
.est-crew { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; border: 1px dashed var(--line); border-radius: 8px; padding: 6px 8px; min-height: 36px; }
.est-crew .est-mini-label { margin: 0 6px 0 0; }
.est-setup .est-addrow { padding: 0; }
.est-setup .est-addrow select { max-width: 200px; }
.est-cost-total { color: var(--accent-2); font-size: 15px; }
.est-staffing { display: flex; flex-direction: column; gap: 6px; margin: 6px 0; }
.est-staff-row { display: flex; gap: 6px; align-items: center; }
.est-staff-row select { flex: 1; min-width: 0; }
.est-staff-row input { width: 64px; }
.est-check { flex-direction: row !important; align-items: center; gap: 8px !important; margin-top: 20px; }
.est-check input { width: auto; }
/* Costs and the rollup (phase 3). */
.est-st-cost { font-weight: 600; color: var(--text); }
.est-st-rowcost { font-weight: 800; white-space: nowrap; }
.est-opcosts { border-top: 1px solid var(--line-soft); padding: 8px 10px; display: flex; flex-direction: column; gap: 6px; font-size: 12px; }
.est-matline { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.est-matline .est-inh input { width: 70px; text-align: right; }
.est-item-line { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 11px; }
/* The catalogue pick and where a copied price came from (10 October 2026). */
.est-item-pick { max-width: 260px; font-size: 11px; }
.est-item-note { font-size: 10.5px; color: var(--text-dim); display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.est-item-cell { min-width: 200px; }
.est-item-cell .est-item-note { display: flex; margin-top: 2px; }
/* The bid form's catalogue item, and the mark when its unit isn't the pay item's (11 October 2026). */
.est-bid-item-cell { white-space: nowrap; }
.est-bid-item { max-width: 170px; font-size: 11px; }
.est-unit-warn { color: var(--warn, #e0a030); font-weight: 700; cursor: help; }
.est-cat-scroll { max-height: 56vh; overflow: auto; }
.est-cat-table input.narrow { width: 70px; }
.est-cat-table tr.est-cat-sub td:first-child { padding-left: 16px; }
#estCatalogModal .me-toolbar { grid-template-columns: 1fr 160px; }
.est-opcost-total { font-size: 12px; }
.est-costs { margin-bottom: 4px; }
.est-costs input, .est-costs select { padding: 2px 5px; font-size: 11.5px; }
.est-costs input[type="number"] { width: 76px; }
.est-costs input.inh { color: var(--text-dim); font-style: italic; border-style: dashed; }
.est-costs input[type="checkbox"] { width: auto; }
.est-addcost input { flex: 1 1 120px; }
.est-addcost select { max-width: 180px; }
.est-rollup { font-size: 11.5px; }
.est-rollup th.num, .est-rollup td.num { white-space: nowrap; }
.est-rollup-total td { border-top: 1px solid var(--line); font-weight: 700; }
.est-rollup tfoot td { border-bottom: none; }
/* Suppliers and the haul (phase 4). */
.est-supplier-table input.wide { min-width: 200px; }
.est-minutes { white-space: nowrap; }
.est-minutes input { width: 54px; margin-left: 2px; }
.est-haul-panel { border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; display: flex; flex-direction: column; gap: 6px; background: var(--panel-2); }
.est-haul-panel.short { border-color: #7a2a22; }
.est-haul-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.est-haul-head .est-mini-label { margin: 0; }
.est-haul-head select { max-width: 180px; }
.est-haul-grid { display: flex; flex-wrap: wrap; gap: 4px 10px; }
.est-haul-in { display: flex; flex-direction: column; gap: 1px; font-size: 10px; color: var(--text-dim); }
.est-haul-in .est-inh input { width: 64px; text-align: right; }
.est-haul-in select { width: auto; font-size: 10.5px; padding: 1px 3px; margin-left: 2px; }
.est-haul-sum { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: baseline; font-size: 11.5px; }
.est-haul .est-haul-row b { font-size: 12px; color: var(--text); }
.est-haul .est-haul-row b.warn { color: var(--accent-2); }
/* The schedule and the route order (phase 5). */
.est-sched { display: flex; flex-direction: column; gap: 4px; padding-bottom: 10px; }
.est-sched-row { display: grid; grid-template-columns: 220px 1fr; gap: 10px; align-items: center; }
.est-sched-name { font-size: 12px; font-weight: 700; display: flex; flex-direction: column; }
.est-sched-name .dimtext { font-weight: 500; font-size: 10.5px; }
.est-sched-track { position: relative; height: 22px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 5px; }
.est-sched-bar { position: absolute; top: 3px; bottom: 3px; background: #2a1d0f; border: 1px solid #5a3d12; border-radius: 4px; }
.est-sched-op { position: absolute; top: 7px; bottom: 7px; background: var(--c); border-radius: 3px; opacity: .9; }
.est-sched-axis { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--text-faint); margin-left: 230px; }
.est-crews { max-width: 460px; margin-top: 6px; }
/* The Schedule fold's As scheduled view: the Calendar beside the plan as
   sent. The slip is green on time or early, amber a few days, red more. */
.est-sched-views { display: flex; gap: 4px; margin-bottom: 4px; }
.est-sched-views .btn-mini { font-size: 11px; padding: 2px 8px; }
.est-sched-views .btn-mini.on { color: var(--text); border-color: var(--accent-2); }
.est-asched-job { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12.5px; align-items: baseline; }
.est-asched-wrap { overflow-x: auto; }
.est-asched { margin-top: 4px; }
.est-asched td:not(:first-child) { white-space: nowrap; }
.est-asched-street td { font-weight: 700; border-top: 1px solid var(--line); }
.est-asched-changes { font-size: 11.5px; }
.est-asched-changes ul { margin: 2px 0 4px 18px; padding: 0; }
.est-slip { font-weight: 700; }
.est-slip.ok { color: var(--green); }
.est-slip.warn { color: var(--gold); }
.est-slip.bad { color: var(--red); }
.est-mark { font-size: 10.5px; font-weight: 700; border: 1px solid currentColor; border-radius: 8px; padding: 0 6px; }
.est-mark.moved { color: var(--blue); }
.est-mark.kept { color: var(--accent-2); }
.est-mark.missing { color: var(--red); }
.est-route-sum { font-size: 12.5px; margin: 4px 0 8px; }
.est-route-sum .ok { color: var(--green); }
.est-route { margin-bottom: 8px; }
/* Scenarios, baselines and the handoff (phase 6). */
.est-banner { padding: 7px 14px; font-size: 12px; background: var(--panel-2); border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.est-banner.frozen { background: #2c1d10; color: var(--accent-2); }
.est-banner.sent { background: #10261a; color: var(--green); }
.est-compare td.ok { color: var(--green); }
.est-compare td.over { color: var(--accent-2); }
.est-sent-list { margin: 6px 0 8px 18px; padding: 0; font-size: 12.5px; display: flex; flex-direction: column; gap: 4px; }
/* The bid importer (phase 7). */
.est-import-step { display: flex; align-items: center; gap: 8px; font-size: 13px; margin: 8px 0; }
.est-spin { width: 14px; height: 14px; border: 2px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: est-spin .9s linear infinite; flex: 0 0 auto; }
@keyframes est-spin { to { transform: rotate(360deg); } }
/* The pictures: machines as silhouettes, positions as the hard hat. */
.est-chip-ico svg { width: 28px; height: 28px; display: block; }
.est-chip-ico.big svg { width: 58px; height: 36px; }
.est-chip-ico.big { flex-basis: 58px; }
.est-machine-ico svg { width: 64px; height: 40px; display: block; }
.est-slot svg, .est-slot.open svg { width: 14px; height: 14px; vertical-align: -2px; margin-right: 1px; }
.est-chip .est-chip-ico:not(.big) { background: var(--panel-2); border-radius: 50%; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; flex: 0 0 32px; }
.est-st-foot svg, .est-setup-head svg, .est-crew .est-mini-label svg { width: 14px; height: 14px; vertical-align: -2px; }
/* A machine's own picture, where its silhouette would be. */
.est-pic { display: block; width: 58px; height: 36px; object-fit: cover; border-radius: 7px; background: #0f1218; }
.est-machine-ico .est-pic { width: 64px; height: 40px; }
.est-pic-pick { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
.est-pic-pick .est-pic, .est-pic-pick svg { width: 96px; height: 60px; border-radius: 8px; }
.est-pic-pick input { flex: 1; min-width: 0; font-size: 12px; }
.est-pic-row span i { font-style: normal; font-weight: 500; }
/* The estimator's rails: each scrolls its own lists under a fixed head and
   stays put while the middle scrolls, and each folds to a strip like the
   Logistics shelf (.rail-handle, .rail-toggle are the Calendar's rules). */
/* No transition on the columns: the browser freezes a variable-driven
   grid-template-columns mid-transition, and the rail never moves. */
.est-body { --est-left: 230px; --est-right: 240px; grid-template-columns: var(--est-left) minmax(0, 1fr) var(--est-right); position: relative; }
.est-body.left-collapsed { --est-left: 34px; }
.est-body.right-collapsed { --est-right: 34px; }
.est-rail { position: sticky; top: 0; align-self: start; max-height: calc(100vh - 150px); overflow: hidden; }
.est-rail .est-chips { overflow-y: auto; min-height: 60px; flex: 1 1 auto; padding-right: 2px; }
#estLeft .est-chips:first-of-type { flex: 1 1 55%; }
#estLeft #estSetups { flex: 0 1 30%; }
#estLeft .est-note, #estRight .est-haul { margin-top: auto; flex: 0 0 auto; }
.est-handle { top: 2px; }
.est-handle-left { left: calc(14px + var(--est-left) - 12px); right: auto; }
.est-handle-right { right: calc(14px + var(--est-right) - 12px); left: auto; }
.est-body.left-collapsed .est-handle-left span, .est-body.right-collapsed .est-handle-right span { transform: scaleX(-1); }
.est-body:not(.left-collapsed) #estLeft > .rail-toggle, .est-body:not(.right-collapsed) #estRight > .rail-toggle { display: none; }
.est-body.left-collapsed #estLeft, .est-body.right-collapsed #estRight {
  padding: 10px 4px; overflow: hidden; cursor: pointer; min-height: calc(100vh - 170px);
  background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
}
.est-body.left-collapsed #estLeft:hover, .est-body.right-collapsed #estRight:hover { background: var(--panel-2); }
.est-body.left-collapsed #estLeft > :not(.rail-toggle), .est-body.right-collapsed #estRight > :not(.rail-toggle) { display: none !important; }
.est-body.left-collapsed #estLeft > .rail-toggle, .est-body.right-collapsed #estRight > .rail-toggle {
  flex-direction: column; justify-content: flex-start; height: 100%; margin: 0; padding: 6px 0; gap: 10px;
}
.est-body.left-collapsed #estLeft .rail-toggle-label, .est-body.right-collapsed #estRight .rail-toggle-label { display: block; writing-mode: vertical-rl; white-space: nowrap; }
.est-body.left-collapsed #estLeft .rail-toggle-arrow, .est-body.right-collapsed #estRight .rail-toggle-arrow { transform: scaleX(-1); }
@media (max-width: 1250px) { .est-body { --est-left: 180px; --est-right: 190px; } .est-body.left-collapsed { --est-left: 34px; } .est-body.right-collapsed { --est-right: 34px; } }