/* ============================================================
   ArcConnect — styles
   Industrial / utilitarian. Slate base + amber accent.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500;600&display=swap');

:root {
  --bg: #f4f5f7;
  --bg-elev: #ffffff;
  --bg-sunk: #ebedf0;
  --border: #d6d9de;
  --border-strong: #b5b9c0;
  --ink: #14181f;
  --ink-soft: #4a525e;
  --ink-mute: #7a8390;
  --accent: #1e2228;          /* ArcStructural brand black */
  --accent-soft: #eceef1;     /* light grey (selected/hover) */
  --accent-ink: #2b3038;      /* dark grey (former-amber text/icons) */
  --on-accent: #ffffff;       /* text/icons on an accent fill */
  --steel: #1e2228;           /* neutral charcoal (topbar) */
  --steel-soft: #f0f2f5;
  --ok: #1f7a4d;
  --warn: #b85515;
  --bad: #b3242a;
  --info: #2a5fa3;

  /* Run / time-slot palette (matches calendar feel) */
  --run-preload: #b4a5d9;
  --run-early:   #6da4d6;
  --run-late:    #76c08c;
  --run-after:   #f0b069;

  --radius: 6px;
  --radius-sm: 4px;
  --radius-lg: 10px;

  --shadow-sm: 0 1px 2px rgba(15, 20, 30, 0.05);
  --shadow-md: 0 4px 14px rgba(15, 20, 30, 0.07);
  --shadow-lg: 0 12px 32px rgba(15, 20, 30, 0.12);

  --font-sans: "Geist", -apple-system, "Segoe UI", system-ui, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Consolas, monospace;

  --t: 140ms cubic-bezier(.2,.7,.2,1);
}

/* --- Dark mode -------------------------------------------------------------
   Warm graphite: lighter cards that lift off the page, slightly warm so it
   still reads well on a phone in daylight.                                    */
[data-theme="dark"] {
  --bg: #201f24;
  --bg-elev: #3d3b45;
  --bg-sunk: #2c2b31;
  --border: #52505c;
  --border-strong: #666370;
  --ink: #f5f3f7;
  --ink-soft: #d2cfd8;
  --ink-mute: #a09ca7;
  --accent: #605d6b;
  --accent-soft: #494651;
  --accent-ink: #f0edf3;
  --on-accent: #ffffff;
  --steel-soft: #424049;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01", "cv11";
}

button, input, textarea, select {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: 1px solid transparent;
  cursor: pointer;
  padding: 0;
}

a { color: inherit; text-decoration: none; }

/* ---------- App shell ---------- */
.app {
  display: grid;
  grid-template-rows: auto 1fr;
  grid-template-columns: minmax(0, 1fr);
  height: 100vh;
  width: 100%;
  max-width: 100vw;
  overflow: hidden;
}

.topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 18px;
  height: 56px;
  background: var(--steel);
  color: #fff;
  border-bottom: 1px solid var(--steel);
  flex-shrink: 0;
  white-space: nowrap;
  min-width: 0;
  position: relative;
}
.nav-toggle {
  display: none;
  align-items: center;
  gap: 6px;
  color: #fff;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: var(--radius);
  padding: 7px 12px;
  font-size: 13px;
  font-weight: 600;
  margin-left: 8px;
}
.topbar-actions { display: flex; align-items: center; gap: 8px; }
.acct { position: relative; }
.user-chip { cursor: pointer; border: 1px solid transparent; }
.user-chip:hover { background: rgba(255,255,255,0.12); }
.menu-backdrop { position: fixed; inset: 0; z-index: 90; }
.acct-menu {
  position: absolute; top: calc(100% + 6px); right: 0;
  background: var(--bg-elev); color: var(--ink);
  border: 1px solid var(--border-strong); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); width: 260px; z-index: 100; overflow: hidden;
}
.acct-menu-head { padding: 14px 16px; border-bottom: 1px solid var(--border); }
.acct-menu-section { padding: 12px 16px; border-bottom: 1px solid var(--border); }
.acct-menu-item {
  display: block; width: 100%; text-align: left; padding: 12px 16px;
  font-size: 14px; font-weight: 600; background: var(--bg-elev); cursor: pointer;
}
.acct-menu-item:hover { background: var(--steel-soft); }
.acct-menu-item.logout { color: var(--bad); }
.nav-menu {
  position: absolute; top: calc(100% + 6px); left: 12px; right: 12px;
  background: var(--bg-elev); color: var(--ink);
  border: 1px solid var(--border-strong); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); z-index: 100; overflow: hidden; padding: 6px;
  max-height: 70vh; overflow-y: auto;
}
.nav-menu-item {
  display: flex; align-items: center; width: 100%; text-align: left;
  padding: 12px 14px; font-size: 15px; font-weight: 500; border-radius: var(--radius);
  background: var(--bg-elev); cursor: pointer; color: var(--ink);
}
.nav-menu-item:hover { background: var(--steel-soft); }
.nav-menu-item.active { background: var(--accent-soft); color: var(--accent-ink); font-weight: 700; }
.nav-menu-divider { height: 1px; background: var(--border); margin: 6px 4px; }

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  font-size: 15px;
  flex-shrink: 0;
}
.brand-mark {
  width: 30px; height: 34px;
  display: grid; place-items: center;
}
.brand-mark img { width: 100%; height: 100%; object-fit: contain; display: block; }
.brand-chip { background: #fff; border-radius: 5px; padding: 3px 4px; width: 34px; height: 38px; }
.brand-sub {
  color: rgba(255,255,255,0.55);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-left: 4px;
}

.nav {
  display: flex;
  gap: 2px;
  margin-left: 24px;
  flex-wrap: nowrap;
  overflow-x: auto;
  min-width: 0;
  scrollbar-width: none;
}
.nav::-webkit-scrollbar { display: none; }
.nav-btn {
  padding: 8px 14px;
  border-radius: var(--radius);
  color: rgba(255,255,255,0.7);
  font-weight: 500;
  font-size: 13px;
  transition: var(--t);
  display: flex; align-items: center; gap: 7px;
  white-space: nowrap;
  flex-shrink: 0;
}
.nav-btn:hover { color: #fff; background: rgba(255,255,255,0.08); }
.nav-btn.active {
  color: #fff;
  background: rgba(255,255,255,0.12);
}
.nav-btn .badge {
  font-family: var(--font-mono);
  font-size: 11px;
  background: #ffffff;
  color: var(--steel);
  padding: 1px 6px;
  border-radius: 9px;
  font-weight: 600;
}

.topbar-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.user-chip {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px 6px 6px;
  background: rgba(255,255,255,0.07);
  border-radius: 999px;
  font-size: 13px;
}
.user-chip .avatar {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: #ffffff;
  color: var(--steel);
  font-weight: 700;
  display: grid; place-items: center;
  font-size: 11px;
}

.main { overflow: auto; min-width: 0; }

/* ---------- Generic ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px;
  border-radius: var(--radius);
  background: var(--bg-elev);
  border: 1px solid var(--border);
  color: var(--ink);
  font-weight: 500;
  font-size: 13px;
  transition: var(--t);
}
.btn:hover { border-color: var(--border-strong); background: var(--steel-soft); }
.btn-primary {
  background: var(--accent); color: var(--on-accent); border-color: var(--accent);
  font-weight: 600;
}
.btn-primary:hover { background: #d77011; border-color: #d77011; }
.btn-ghost { background: transparent; border-color: transparent; }
.btn-ghost:hover { background: var(--steel-soft); }
.btn-icon {
  width: 32px; height: 32px;
  padding: 0;
  display: grid; place-items: center;
  border-radius: var(--radius);
}
.btn:disabled { opacity: 0.45; cursor: not-allowed; }

.input, .textarea, .select {
  width: 100%;
  padding: 9px 11px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 14px;
  transition: var(--t);
  outline: none;
  font-family: inherit;
}
.input.input-invalid, .textarea.input-invalid {
  border-color: var(--bad);
  background: #fff8f8;
}
.input.input-invalid:focus, .textarea.input-invalid:focus {
  box-shadow: 0 0 0 3px rgba(179, 36, 42, 0.15);
}
.input:focus, .textarea:focus, .select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.input.input-invalid:focus {
  border-color: var(--bad);
}
.textarea { resize: vertical; min-height: 70px; line-height: 1.45; }
.input.mono, .mono-input { font-family: var(--font-mono); letter-spacing: -0.01em; }

.label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 6px;
}
.label .req { color: var(--bad); font-weight: 400; margin-left: 2px; }
.field { margin-bottom: 14px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* Tablet & down — collapse the nav into the hamburger dropdown */
@media (max-width: 1024px) {
  .topbar { gap: 10px; padding: 0 12px; }
  .nav { display: none; }
  .topbar-actions { display: none; }
  .nav-toggle { display: inline-flex; }
  .topbar-right > span { display: none; }   /* hide "X today · Y total" */
  .hub-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Phone (iPhone) — nav scrolls, chrome trims to essentials */
@media (max-width: 640px) {
  .field-row { grid-template-columns: 1fr; gap: 0; }
  .intake-wrap { padding: 16px 14px 60px; }
  .intake-card { padding: 16px 14px 14px; border-radius: var(--radius); }
  .intake-header h1 { font-size: 19px; }
  .topbar { padding: 0 10px; height: 52px; gap: 8px; }
  .topbar-right .acct-name { display: none; }   /* avatar only, but always visible */
  .nav-toggle .badge { margin-left: 2px; }
  .topbar-right > span { display: none; }
  .brand-sub { display: none; }
  .brand { font-size: 0; }                         /* logo mark only on phone */
  .brand .brand-mark { font-size: 14px; }
  .pill { padding: 9px 13px; font-size: 14px; }
  /* 16px keeps iOS from zooming into a field; the padding is what makes them
     tall, so it stays modest. iOS draws date fields at their own intrinsic
     width and centres the value - both overridden so they fit their box. */
  .input, .textarea, .select { font-size: 16px; padding: 9px 11px; }
  input[type="date"], input[type="time"], input[type="datetime-local"] { -webkit-appearance: none; appearance: none; display: block; min-width: 0; max-width: 100%; text-align: left; }
  input[type="date"]::-webkit-date-and-time-value, input[type="time"]::-webkit-date-and-time-value, input[type="datetime-local"]::-webkit-date-and-time-value { text-align: left; }
  .hub-wrap { padding: 28px 16px 48px; }
  .hub-grid { grid-template-columns: 1fr; }
  .hub-header h1 { font-size: 24px; }
  /* Wide data tables scroll inside their OWN wrapper (not the whole paper) */
  .eq-table-scroll, .sched-grid, .runsheet-run, .dlr-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .runsheet-paper, .dl-paper, .dl-wrap > .dlr, .vq-wrap { max-width: 100%; }
  .runsheet-paper, .dl-paper { padding: 14px 14px; }
  .runsheet-header, .dlr-head, .vqr-head { flex-wrap: wrap; gap: 10px; }
  .runsheet-header .meta, .dlr-recordbox, .vqr-titlebox { text-align: left; min-width: 0; }
  .dl-meta, .dlr-meta { grid-template-columns: 1fr 1fr; }
  .sched-wrap, .fix-wrap, .ts-wrap, .dk-wrap, .lot-wrap, .admin-wrap, .missing-wrap, .runsheet-wrap, .vq-wrap, .dl-wrap, .ra-wrap { padding: 14px 12px; }
  .modal { width: 100% !important; max-width: 100%; }
  .drawer { width: 100%; }

  /* Week grid: keep columns usable by scrolling sideways rather than crushing */
  .week-grid { min-width: 720px; }

  /* Day list: each run row scrolls as a unit instead of overlapping */
  .day-view { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .run-rows { min-width: 680px; }
  .run-group-head { min-width: 680px; }

  /* Run sheet table keeps its shape and scrolls */
  .runsheet-table { min-width: 680px; }

  /* Cards: truncate long text instead of wrapping one word per line */
  .delivery-card .dc-job, .delivery-card .dc-route, .delivery-card .dc-items {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }

  /* Missing register: header wraps, button stays one line, list & stats single column */
  .missing-header, .missing-toolbar { flex-wrap: wrap; gap: 8px; }
  .missing-header .btn, .missing-toolbar .btn { white-space: nowrap; flex: 0 0 auto; }
  .missing-stats { grid-template-columns: 1fr 1fr; }
  .missing-list, .missing-grid { grid-template-columns: 1fr; }
  .missing-card { min-width: 0; }
  .missing-card .mc-title, .missing-card .mc-desc { overflow-wrap: anywhere; white-space: normal; }

  /* Titles wrap instead of clipping off the right edge */
  .lot-title, .lot-area-title, .lot-header h1, .dk-csv-view h2, .dlr-title { white-space: normal; overflow-wrap: anywhere; }

  /* Page itself never scrolls sideways — only bounded inner scrollers do */
  html, body { overflow-x: hidden; max-width: 100%; }
  .main { overflow-x: hidden; }

  /* Week cards: drop the age/requester corner that crowds text when narrow */
  .delivery-card .dc-corner { display: none; }

  /* Missing-register rows stack so the description gets full width (no per-word wrap) */
  .missing-row { flex-direction: column; align-items: stretch; gap: 6px; }
  .missing-row > * { min-width: 0; }

  /* Toolbars wrap instead of overflowing off-screen */
  .sched-toolbar, .runsheet-toolbar, .fix-toolbar, .ts-toolbar, .dk-toolbar, .admin-tabs { flex-wrap: wrap; row-gap: 8px; }
  .sched-toolbar .btn, .runsheet-toolbar .btn { font-size: 12px; padding: 7px 10px; }
  .sched-toolbar > div[style*="flex: 1"], .sched-toolbar > div[style*="flex:1"] { flex-basis: 100%; height: 0; }

  /* Action bars (bulk select, late warning) wrap their buttons/chips */
  .bulk-bar { flex-wrap: wrap; row-gap: 8px; position: sticky; bottom: 0; }
  .bulk-bar button { flex: 1 1 auto; }
  .late-warn-bar { flex-wrap: wrap; }

  /* Detail-drawer rows stack label over value */
  .detail-row { grid-template-columns: 1fr; gap: 2px; }

  /* Tweaks panel never wider than the screen */
  .tweaks-panel-host, .tweaks-panel { max-width: 100vw; }

  /* Variation / docket meta grids collapse to one column */
  .vqr-meta, .dlr-head { grid-template-columns: 1fr; }
  .dlr-head { flex-wrap: wrap; }
  .dlr-recordbox { text-align: left; min-width: 0; }
}

.pill-group {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.pill {
  padding: 7px 12px;
  border-radius: 999px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-soft);
  transition: var(--t);
  display: inline-flex; align-items: center; gap: 6px;
}
.pill:hover { border-color: var(--border-strong); }
.pill.active {
  background: var(--steel);
  color: #fff;
  border-color: var(--steel);
}
.pill.amber.active {
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent);
}
.pill .dot { width: 8px; height: 8px; border-radius: 50%; }

.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  background: var(--steel-soft);
  color: var(--ink-soft);
}
.badge.mono { font-family: var(--font-mono); }
.badge.amber { background: var(--accent-soft); color: var(--accent-ink); }

.divider { height: 1px; background: var(--border); margin: 16px 0; }

/* ---------- Autocomplete ---------- */
.autocomplete { position: relative; }
.autocomplete-list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0; right: 0;
  min-width: min(320px, 80vw);
  background: var(--bg-elev);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  max-height: 260px;
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 100;
}
.autocomplete-item {
  padding: 8px 11px;
  cursor: pointer;
  font-size: 13px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  border-bottom: 1px solid var(--border);
}
.autocomplete-item:last-child { border-bottom: none; }
.autocomplete-item:hover, .autocomplete-item.focused { background: var(--steel-soft); }
.autocomplete-item .sub { color: var(--ink-mute); font-size: 11.5px; text-align: left; max-width: 100%; line-height: 1.4; text-wrap: pretty; }
/* Phone frame: the dropdown must stay inside the 430px device, not the real viewport */
.pv-phone .autocomplete-list { min-width: 0; left: 0; right: 0; max-width: 100%; }
.pv-phone .autocomplete-item .sub { white-space: normal; overflow-wrap: anywhere; }
@media (max-width: 620px) {
  .autocomplete-list { min-width: 0; left: 0; right: 0; max-width: 100%; }
  .autocomplete-item .sub { white-space: normal; overflow-wrap: anywhere; }
}
.autocomplete-item .job-sub { display: flex; flex-direction: column; align-items: flex-end; text-align: right; gap: 1px; min-width: 0; }
.autocomplete-item .job-sub-proj { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.02em; text-transform: uppercase; color: var(--ink-soft); white-space: nowrap; }
.autocomplete-item .job-sub-desc { font-size: 11.5px; color: var(--ink-mute); line-height: 1.35; text-wrap: pretty; }
.autocomplete-empty { padding: 10px 12px; color: var(--ink-mute); font-size: 12px; font-style: italic; }

/* ============================================================
   INTAKE FORM
   ============================================================ */
.intake-wrap {
  max-width: 720px;
  margin: 0 auto;
  padding: 28px 24px 80px;
}
.intake-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 20px;
  gap: 16px;
}
.intake-header h1 {
  font-size: 22px;
  margin: 0 0 4px;
  letter-spacing: -0.01em;
}
.intake-header .sub {
  color: var(--ink-mute);
  font-size: 13px;
}
.intake-card {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px 22px 18px;
  box-shadow: var(--shadow-sm);
}
.intake-section {
  padding: 4px 0 12px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 14px;
}
.intake-section:last-of-type { border-bottom: none; margin-bottom: 0; }
.section-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 6px 0 12px;
  display: flex; align-items: center; gap: 8px;
}
.section-title .num {
  width: 18px; height: 18px;
  background: var(--steel);
  color: #fff;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 10px;
  font-family: var(--font-mono);
}

.intake-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.intake-actions .hint { color: var(--ink-mute); font-size: 12px; }

.success-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--steel);
  color: #fff;
  padding: 12px 20px;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  display: flex; align-items: center; gap: 10px;
  font-size: 14px;
  font-weight: 500;
  z-index: 1000;
  animation: toast-in 0.25s cubic-bezier(.2,.7,.2,1);
}
.success-toast .check {
  width: 22px; height: 22px;
  background: var(--accent);
  color: var(--on-accent);
  border-radius: 50%;
  display: grid; place-items: center;
  font-weight: 800;
}
@keyframes toast-in {
  from { opacity: 0; transform: translate(-50%, 20px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

/* ============================================================
   SCHEDULE VIEW
   ============================================================ */
.sched-wrap {
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 0;
}
/* Whole board scrolls as one page — no scrolling inside each run slot. */
.sched-grid, .day-view { min-height: 0; }
.sched-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.sched-toolbar .date-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2px;
}
.sched-toolbar .date-nav button {
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  color: var(--ink-soft);
}
.sched-toolbar .date-nav button:hover { background: var(--steel-soft); }
.sched-toolbar .date-label {
  font-weight: 600;
  font-size: 14px;
  padding: 0 8px;
  min-width: 200px;
  text-align: center;
}
.sched-toolbar .seg {
  display: inline-flex;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2px;
}
.sched-toolbar .seg button {
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--ink-soft);
}
.sched-toolbar .seg button.active {
  background: var(--steel);
  color: #fff;
}

.sched-grid {
  display: grid;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  min-height: 0;
  box-shadow: var(--shadow-sm);
}

/* Week grid: 7 columns Mon-Sun. Rows size to their content so the page scrolls
   as a whole rather than each run slot scrolling independently. */
.week-grid {
  grid-template-columns: 64px repeat(7, minmax(0, 1fr));
  grid-template-rows: 40px repeat(4, auto);
  overflow: visible;
}
.week-grid .day-head { position: sticky; top: 0; z-index: 3; }
.week-grid .corner { position: sticky; top: 0; z-index: 4; }
.week-grid .day-head.weekend { background: var(--bg-sunk); }
.week-grid .day-head.weekend .day-name { color: var(--accent); }
.week-grid .cell.weekend { background: color-mix(in srgb, var(--bg-sunk) 50%, transparent); }
.week-grid .cell {
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 8px;
  min-height: 84px;
  overflow: visible;
}
.week-grid .cell:last-child,
.week-grid .day-head:last-child { border-right: none; }
.week-grid .day-head {
  padding: 8px 10px;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.03em;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--bg-sunk);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.week-grid .day-head .day-name { text-transform: uppercase; color: var(--ink-mute); font-size: 11px; }
.week-grid .day-head .day-date { font-size: 14px; }
.week-grid .day-head.today { background: var(--accent-soft); }
.week-grid .day-head.today .day-name { color: var(--accent-ink); }

.week-grid .run-label {
  background: var(--bg-sunk);
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 10px 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-mute);
  display: flex;
  align-items: flex-start;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  text-align: center;
  justify-content: center;
}

.week-grid .corner {
  background: var(--bg-sunk);
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.delivery-card {
  display: block;
  width: 100%;
  overflow: hidden;
  text-align: left;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-left: 3px solid var(--steel);
  border-radius: var(--radius-sm);
  padding: 6px 8px;
  margin-bottom: 5px;
  font-size: 12px;
  line-height: 1.35;
  transition: var(--t);
  cursor: pointer;
  position: relative;
}
.delivery-card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}
.delivery-card .dc-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 6px;
}
.delivery-card .dc-job {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 11px;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.delivery-card .dc-route {
  color: var(--ink);
  font-size: 11px;
  margin-top: 2px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.delivery-card .dc-route strong { font-weight: 600; }
.delivery-card .dc-items {
  color: var(--ink-mute);
  font-size: 11px;
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.delivery-card .dc-flag {
  position: absolute;
  top: 4px; right: 4px;
  font-size: 10px;
  font-family: var(--font-mono);
  background: var(--bad); color: #fff;
  padding: 1px 4px;
  border-radius: 2px;
  font-weight: 700;
}

/* Day view */
.day-view {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  padding: 4px;
  overflow: visible;
}
.run-group {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.run-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: var(--bg-sunk);
  border-bottom: 1px solid var(--border);
}
.run-group-head .rgh-left { display: flex; align-items: center; gap: 10px; }
.run-group-head .rgh-bar {
  width: 4px; height: 18px; border-radius: 2px; background: var(--steel);
}
.run-group-head .rgh-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.run-group-head .rgh-time { color: var(--ink-mute); font-size: 12px; }
.run-group-head .rgh-count {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  color: var(--ink-soft);
  font-weight: 600;
}

.run-rows { padding: 4px; }
.run-row {
  display: grid;
  grid-template-columns: 36px 60px 1fr 110px 1fr 1fr 110px 90px 32px;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--radius);
  font-size: 13px;
  transition: var(--t);
  border-bottom: 1px solid var(--border);
}
.run-row:last-child { border-bottom: none; }
.run-row:hover { background: var(--steel-soft); }
.run-row .rr-pri {
  font-family: var(--font-mono);
  font-weight: 700;
  background: var(--steel);
  color: #fff;
  width: 28px; height: 28px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 12px;
}
.run-row .rr-job {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 12px;
}
.run-row .rr-items {
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.run-row .rr-route {
  color: var(--ink-soft);
  font-size: 12px;
  display: flex; align-items: center; gap: 6px;
  overflow: hidden;
}
.run-row .rr-courier {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--steel-soft);
  font-size: 12px;
  font-weight: 500;
  border: 1px solid var(--border);
  white-space: nowrap;
}
.run-row .rr-courier .swatch { width: 8px; height: 8px; border-radius: 50%; }
.run-row .rr-truck {
  font-size: 11px;
  color: var(--ink-mute);
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.run-row .rr-move { display: flex; flex-direction: column; gap: 2px; align-items: center; justify-content: center; }
.rr-movebtn { border: 1px solid var(--border); background: var(--bg-elev); color: var(--ink-soft); font-size: 10px; line-height: 1; padding: 2px 5px; border-radius: 4px; cursor: pointer; }
.rr-movebtn:hover:not(:disabled) { background: var(--accent); color: #fff; border-color: var(--accent); }
.rr-movebtn:disabled { opacity: 0.25; cursor: default; }
.run-row .rr-arrow {
  color: var(--ink-mute);
  font-family: var(--font-mono);}

/* Empty states */
.empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--ink-mute);
  font-size: 13px;
}
.empty .icon { font-size: 28px; margin-bottom: 6px; opacity: 0.5; }

/* ============================================================
   DETAIL DRAWER
   ============================================================ */
.drawer-backdrop {
  position: fixed; inset: 0; overflow: hidden;
  background: rgba(15, 20, 30, 0.35);
  z-index: 200;
  animation: fade-in 0.15s ease;
}
.drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 480px;
  max-width: 90vw;
  background: var(--bg-elev);
  border-left: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  z-index: 201;
  display: flex; flex-direction: column;
  animation: drawer-in 0.2s cubic-bezier(.2,.7,.2,1);
}
@keyframes drawer-in { from { transform: translateX(20px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

.drawer-head {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.drawer-head h2 {
  margin: 0;
  font-size: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.drawer-body {
  padding: 18px 20px;
  overflow: auto;
  flex: 1;
}
.drawer-editpanel { background: var(--bg-sunk); border: 1px solid var(--border); border-radius: 12px; padding: 14px; margin-bottom: 16px; display: flex; flex-direction: column; gap: 10px; }
.drawer-editpanel .field { margin-bottom: 0; }
.drawer-foot {
  padding: 14px 20px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--bg-sunk);
}
.drawer-foot .foot-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.drawer-foot .foot-grid .btn { width: 100%; justify-content: center; text-align: center; }
.drawer-foot .foot-full { width: 100%; justify-content: center; }
.drawer-foot .foot-danger { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 30%, var(--border)); }

.detail-row {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.detail-row:last-child { border-bottom: none; }
.detail-row .k {
  color: var(--ink-mute);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
  padding-top: 2px;
}
.detail-row .v { color: var(--ink); }
.detail-row .v.mono { font-family: var(--font-mono); }

/* ============================================================
   PRINT RUN SHEET
   ============================================================ */
.runsheet-wrap {
  max-width: 1120px;
  margin: 0 auto;
  padding: 20px;
}
.runsheet-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  gap: 12px;
  flex-wrap: wrap;
}
.runsheet-paper {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 28px 30px;
  color: #14181f;
}
.runsheet-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding-bottom: 12px;
  border-bottom: 2px solid #14181f;
  margin-bottom: 16px;
}
.runsheet-header h1 {
  font-size: 22px;
  margin: 0 0 4px;
  letter-spacing: 0.02em;
}
.runsheet-header .date {
  font-size: 16px;
  font-weight: 600;
  color: #2b3441;
}
.runsheet-header .meta {
  text-align: right;
  font-size: 12px;
  color: #4a525e;
}
.runsheet-header .meta .label {
  margin-bottom: 0; display: inline; color: inherit; text-transform: none;
  letter-spacing: 0; font-weight: 500;
}

.runsheet-run {
  margin-bottom: 14px;
  break-inside: avoid;
}
.runsheet-run-head {
  background: #2b3441;
  color: #fff;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display: flex;
  justify-content: space-between;
}
.runsheet-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  /* Fixed layout: every slot's table computes identical column widths from the
     header definitions, instead of each sizing to its own content. */
  table-layout: fixed;
}
.runsheet-table td { overflow-wrap: break-word; }
.runsheet-table th {
  background: #f4f5f7;
  text-align: left;
  padding: 6px 8px;
  border: 1px solid #d6d9de;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #4a525e;
  font-weight: 700;
}
.runsheet-table td {
  border: 1px solid #d6d9de;
  padding: 8px;
  vertical-align: top;
}
.runsheet-table td.pri {
  text-align: center;
  font-family: var(--font-mono);
  font-weight: 700;
  width: 32px;
}
.runsheet-table td.job {
  font-family: var(--font-mono);
  font-weight: 600;
  white-space: nowrap;
  width: 72px;
}
.runsheet-table td.courier {
  width: 90px;
  font-weight: 600;
}
.runsheet-table td.loc {
  font-size: 11px;
}
.runsheet-table td.contact {
  width: 110px;
  font-size: 11px;
}
/* merged-run legs: subtle shared band, divider lifted between legs, solid line after the run */
.runsheet-table tr.rs-merged td { background: #fafbfc; }
.runsheet-table tr.rs-merged td { border-bottom-color: #eceef1; }
.runsheet-table tr.rs-merged-last td { border-bottom: 1px solid #d6d9de; }
.runsheet-table td.pri .rs-legcount { font-size: 10px; font-weight: 700; color: var(--ink-mute); margin-top: 3px; letter-spacing: 0.02em; white-space: nowrap; }

@media print {
  body { background: #fff; }
  .topbar, .sched-toolbar, .runsheet-toolbar, .tweaks-panel-host { display: none !important; }
  .runsheet-paper { box-shadow: none; border: none; padding: 0; }
  .runsheet-wrap { padding: 0; max-width: none; }
  .runsheet-run { break-inside: avoid; }
}

/* ============================================================
   EXPORT MODAL
   ============================================================ */
.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(15, 20, 30, 0.45);
  z-index: 300;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 40px 20px;
  overflow: auto;
}
.modal {
  background: var(--bg-elev);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  width: 480px; max-width: 100%;
  overflow: hidden;
  margin: auto;
}
.modal-head { padding: 16px 20px 12px; border-bottom: 1px solid var(--border); }
.modal-head h2 { margin: 0 0 4px; font-size: 16px; }
.modal-head .sub { color: var(--ink-mute); font-size: 12px; }
.modal-body { padding: 16px 20px; }
.modal-foot {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 12px 20px;
  border-top: 1px solid var(--border);
  background: var(--bg-sunk);
}
.export-option {
  display: flex; align-items: center; gap: 14px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 8px;
  cursor: pointer;
  transition: var(--t);
  width: 100%;
  text-align: left;
}
.export-option:hover { border-color: var(--accent); background: var(--accent-soft); }
.export-option .icon {
  width: 38px; height: 38px;
  border-radius: var(--radius);
  background: var(--steel-soft);
  display: grid; place-items: center;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.04em;
}
.export-option .title { font-weight: 600; font-size: 13px; }
.export-option .desc { color: var(--ink-mute); font-size: 12px; margin-top: 2px; }

/* ============================================================
   SHARE MODAL — how site team accesses the form
   ============================================================ */
.share-modal {
  width: 880px;
  max-width: 100%;
}
.share-grid {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 24px;
  padding: 22px;
}
@media (max-width: 760px) {
  .share-grid { grid-template-columns: 1fr; }
  .share-phone { display: none; }
}
.share-options h3 {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 0 0 10px;
}
.share-option {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 10px;
  background: var(--bg-elev);
  transition: var(--t);
  cursor: pointer;
  text-align: left;
  width: 100%;
}
.share-option:hover { border-color: var(--border-strong); }
.share-option.recommended {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.share-option .so-icon {
  width: 44px; height: 44px;
  border-radius: 8px;
  background: var(--steel);
  color: #fff;
  display: grid; place-items: center;
  font-weight: 700;
  font-size: 18px;
  flex-shrink: 0;
}
.share-option.recommended .so-icon { background: var(--accent); color: var(--on-accent); }
.share-option .so-title {
  display: flex; align-items: center; gap: 8px;
  font-weight: 600;
  font-size: 14px;
}
.share-option .so-title .tag {
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 3px;
  background: var(--accent);
  color: var(--on-accent);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.share-option .so-desc {
  color: var(--ink-soft);
  font-size: 12px;
  margin-top: 3px;
  line-height: 1.45;
}
.share-option .so-foot {
  margin-top: 8px;
  font-size: 11px;
  color: var(--ink-mute);
  display: flex;
  align-items: center;
  gap: 6px;
}
.share-option .so-foot .pip {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--ok);
}
.share-option .so-foot .pip.work { background: var(--warn); }
.share-option .so-foot .pip.dev { background: var(--info); }

.share-link-box {
  margin-top: 12px;
  background: var(--bg-sunk);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.share-link-box .url { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.share-link-box .qr-wrap {
  display: flex; flex-direction: column; align-items: center;
  gap: 6px; padding: 12px; background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-top: 12px;
}
.share-link-box .qr-wrap .qr { width: 140px; height: 140px; }
.share-link-box .qr-wrap .qr-label { font-size: 10px; color: var(--ink-mute); font-family: var(--font-sans); }

/* Phone preview */
.share-phone {
  display: grid;
  place-items: center;
  background: var(--bg-sunk);
  border-radius: var(--radius);
  padding: 18px 0;
  border: 1px solid var(--border);
}
.share-phone-frame {
  width: 270px;
  height: 540px;
  border-radius: 36px;
  background: var(--steel);
  padding: 10px;
  box-shadow: 0 18px 40px rgba(0,0,0,0.18), inset 0 0 0 2px #0c1018;
  position: relative;
}
.share-phone-screen {
  width: 100%; height: 100%;
  border-radius: 28px;
  background: var(--bg);
  overflow: hidden;
  position: relative;
}
.share-phone-notch {
  position: absolute;
  top: 16px; left: 50%; transform: translateX(-50%);
  width: 80px; height: 16px;
  background: #0c1018;
  border-radius: 999px;
  z-index: 2;
}
.share-phone-content {
  position: absolute;
  inset: 0;
  padding: 38px 14px 14px;
  overflow: auto;
  font-size: 11px;
}
.share-phone-content .sph-head {
  display: flex; align-items: center; gap: 6px;
  font-weight: 700;
  font-size: 12px;
}
.share-phone-content .sph-head .mark {
  width: 18px; height: 18px;
  background: var(--accent);
  border-radius: 3px;
  display: grid; place-items: center;
  color: var(--on-accent); font-size: 10px; font-family: var(--font-mono);
  font-weight: 800;
}
.share-phone-content h1 {
  font-size: 14px;
  margin: 12px 0 4px;
}
.share-phone-content .sub {
  font-size: 10px;
  color: var(--ink-mute);
  margin-bottom: 12px;
}
.share-phone-content .ph-label {
  font-size: 8px;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ink-mute);
  margin: 8px 0 3px;
}
.share-phone-content .ph-input {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 6px 8px;
  font-size: 10px;
  color: var(--ink);
}
.share-phone-content .ph-input.filled { font-weight: 500; }
.share-phone-content .ph-pills {
  display: flex; gap: 4px; flex-wrap: wrap;
}
.share-phone-content .ph-pill {
  font-size: 9px;
  padding: 3px 7px;
  border-radius: 999px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  color: var(--ink-soft);
}
.share-phone-content .ph-pill.active {
  background: var(--steel);
  color: #fff;
  border-color: var(--steel);
}
.share-phone-content .ph-submit {
  margin-top: 12px;
  background: var(--accent);
  color: var(--on-accent);
  text-align: center;
  padding: 9px;
  border-radius: 5px;
  font-weight: 700;
  font-size: 11px;
}

/* ============================================================
   EMAIL DRAFT MODAL
   ============================================================ */
.email-draft-modal {
  width: 720px;
  max-width: 100%;
}
.email-draft-body {
  padding: 18px 22px;
  max-height: calc(100vh - 200px);
  overflow: auto;
}
.ed-section { margin-bottom: 18px; }
.ed-section .label { margin-bottom: 8px; }
.ed-companies {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
@media (max-width: 640px) { .ed-companies { grid-template-columns: 1fr; } }
.ed-company {
  text-align: left;
  padding: 10px 12px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: var(--t);
}
.ed-company:hover { border-color: var(--border-strong); }
.ed-company.active {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.ed-company-name { font-weight: 600; font-size: 13px; }
.ed-company-email {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-soft);
  margin-top: 1px;
}
.ed-company-meta {
  font-size: 11px;
  color: var(--ink-mute);
  margin-top: 3px;
}

.email-preview {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.email-line {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.email-line .ek {
  color: var(--ink-mute);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  width: 50px;
  font-weight: 600;
}
.email-line .ev { color: var(--ink); }
.email-line .ev.mono { font-family: var(--font-mono); font-size: 12px; }
.email-subject-input {
  flex: 1;
  border: none;
  background: transparent;
  outline: none;
  font: inherit;
  color: var(--ink);
  font-weight: 500;
}
.email-body-wrap {
  background: var(--bg-sunk);
}
.email-body-textarea {
  width: 100%;
  padding: 14px;
  border: none;
  background: transparent;
  outline: none;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.55;
  color: var(--ink);
  resize: vertical;
  min-height: 200px;
}

/* Batch list (multi-delivery booking) */
.batch-list {
  background: var(--bg-sunk);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.batch-row {
  display: grid;
  grid-template-columns: 24px 60px 1fr 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
}
.batch-row:last-child { border-bottom: none; }
.batch-num {
  width: 22px; height: 22px;
  background: var(--steel);
  color: #fff;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 11px;
  font-family: var(--font-mono);
  font-weight: 700;
}
.batch-job { font-weight: 700; font-size: 11px; }
.batch-items { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.batch-route { color: var(--ink-soft); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.batch-date { color: var(--ink-mute); font-size: 11px; white-space: nowrap; }

/* ============================================================
   SELECTION MODE (multi-select on schedule)
   ============================================================ */
.run-row.selected {
  background: var(--accent-soft);
}
.run-row .rr-select {
  display: grid; place-items: center;
}
.checkbox {
  width: 16px; height: 16px;
  border: 1.5px solid var(--border-strong);
  border-radius: 3px;
  background: var(--bg-elev);
  display: grid; place-items: center;
  cursor: pointer;
  transition: var(--t);
  font-size: 10px;
  color: transparent;
  font-weight: 800;
}
.checkbox:hover { border-color: var(--ink-soft); }
.checkbox.checked {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}

.delivery-card.selectable .dc-check {
  position: absolute;
  top: 4px; left: 4px;
  opacity: 0.5;
  transition: var(--t);
}
.delivery-card:hover .dc-check { opacity: 1; }
.delivery-card.selected {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.delivery-card.selected .dc-check { opacity: 1; }

/* Bulk action bar */
.bulk-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--steel);
  color: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  position: sticky;
  top: 0;
  z-index: 20;
}
.bulk-bar .count {
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 99px;
  font-size: 12px;
}
.bulk-bar .bb-info {
  flex: 1;
  font-size: 13px;
  color: rgba(255,255,255,0.85);
}
.bulk-bar .bb-info .meta {
  font-size: 11px;
  color: rgba(255,255,255,0.55);
  margin-left: 8px;
}
.bulk-bar button {
  padding: 7px 12px;
  border-radius: var(--radius);
  background: rgba(255,255,255,0.1);
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  transition: var(--t);
}
.bulk-bar button:hover { background: rgba(255,255,255,0.18); }
.bulk-bar button.primary {
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
}
.bulk-bar button.primary:hover { background: #d77011; }

/* ============================================================
   DRAG & DROP (week grid + day list)
   ============================================================ */
.delivery-card[draggable] { user-select: none; }
.delivery-card.dragging { opacity: 0.35; cursor: grabbing; }

/* ---- Schedule search & filter ---- */
.sched-filter { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; flex-wrap: wrap; }
.sched-search { position: relative; flex: 1 1 240px; min-width: 0; max-width: 420px; }
.sched-search-icon { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--ink-mute); font-size: 16px; pointer-events: none; }
.sched-search-input { width: 100%; padding: 9px 30px 9px 32px; border: 1px solid var(--border); border-radius: var(--radius); font-size: 13px; font-family: inherit; background: var(--bg-elev); color: var(--ink); }
.sched-search-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.sched-search-clear { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); border: none; background: var(--bg-sunk); color: var(--ink-soft); width: 18px; height: 18px; border-radius: 50%; cursor: pointer; font-size: 10px; line-height: 1; }
.sched-filter-courier { font-size: 13px; max-width: 170px; }
.sched-filter-count { font-size: 12px; color: var(--ink-mute); font-weight: 600; }

/* ---- Weekly Report ---- */
.rep-wrap { max-width: 1000px; margin: 0 auto; padding: 24px; }
.rep-toolbar { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.rep-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rep-week { display: flex; align-items: center; gap: 4px; }
.rep-week-label { font-size: 12px; font-weight: 600; color: var(--ink-soft); min-width: 150px; text-align: center; }
.rep-locked { font-size: 13px; color: var(--ink-mute); }
.rep-paper { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 26px 28px; }
.rep-paper-head { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 2px solid var(--ink); padding-bottom: 12px; margin-bottom: 18px; flex-wrap: wrap; gap: 10px; }
.rep-paper-title { font-size: 20px; font-weight: 800; letter-spacing: -0.01em; }
.rep-paper-week { font-size: 13px; color: var(--ink-soft); margin-top: 2px; }
.rep-paper-meta { font-size: 11px; color: var(--ink-mute); text-align: right; line-height: 1.5; }
.rep-section { margin-bottom: 24px; }
.rep-section-title { font-size: 13px; font-weight: 800; letter-spacing: 0.02em; text-transform: uppercase; color: var(--ink); padding-bottom: 6px; border-bottom: 1px solid var(--border); margin-bottom: 12px; }
.rep-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; margin-bottom: 12px; }
.rep-stat { background: var(--bg-sunk); border-radius: var(--radius); padding: 12px; text-align: center; }
.rep-stat-num { font-size: 26px; font-weight: 800; line-height: 1; }
.rep-stat-lbl { font-size: 11px; color: var(--ink-mute); margin-top: 5px; font-weight: 600; }
.rep-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.rep-table th { text-align: left; font-size: 10px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--ink-mute); padding: 6px 8px; border-bottom: 1px solid var(--border); }
.rep-table td { padding: 6px 8px; border-bottom: 1px solid var(--border); vertical-align: top; }
.rep-age { font-family: var(--font-mono); font-weight: 700; font-size: 11px; padding: 1px 7px; border-radius: 10px; }
.rep-foot { margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--border); font-size: 10px; color: var(--ink-mute); }

/* ---- Weekly report: resolution trend chart ---- */
.rep-trend-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 14px; }
.rep-trend-summary .rep-stat { background: var(--bg-sunk); }
.rep-chart-wrap { border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 14px 10px; background: var(--bg-elev); }
.rep-chart { display: block; }
.rep-legend { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; margin-top: 4px; font-size: 11.5px; color: var(--ink-soft); font-weight: 600; }
.rep-legend span { display: inline-flex; align-items: center; gap: 6px; }
.rep-legend .sw { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.rep-legend .sw.line { width: 16px; height: 3px; border-radius: 2px; }
.rep-trend-note { margin-top: 10px; font-size: 12.5px; font-weight: 600; color: var(--ink-soft); background: var(--bg-sunk); border-radius: var(--radius); padding: 9px 12px; }
.rep-crit-tag { color: #b3242a; font-weight: 800; }
.rep-crit-dot { color: #b3242a; font-size: 9px; margin-left: 5px; vertical-align: middle; }
@media (max-width: 640px) {
  .rep-trend-summary { grid-template-columns: repeat(2, 1fr); }
  .rep-stats { grid-template-columns: repeat(3, 1fr); }
  /* Header actions: the week picker on its own line, Generate full width,
     CSV and Print sharing a line - instead of three odd widths wrapping. */
  .rep-actions { width: 100%; }
  .rep-actions .rep-week { flex: 1 1 100%; justify-content: space-between; }
  .rep-actions .btn-primary { flex: 1 1 100%; justify-content: center; min-height: 44px; }
  .rep-actions .btn:not(.btn-primary):not(.btn-icon) { flex: 1 1 calc(50% - 4px); justify-content: center; min-height: 44px; }
  .rep-paper { padding: 18px 14px; }
  .rep-paper-head { flex-direction: column; gap: 6px; }
  .rep-paper-title { font-size: 18px; }
  .rep-paper-meta { text-align: left; }
  .rep-paper-meta div { display: inline; }
  .rep-paper-meta div + div::before { content: "\00a0\00b7\00a0"; }
  /* The report's tables are six columns wide; on a phone they were clipped
     at the paper's edge. Let each one scroll sideways instead. */
  .rep-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; }
  .rep-table td, .rep-table th { white-space: nowrap; }
}
/* Printed from a phone the sheet still lays out like the office copy. */
@media print {
  .rep-actions { display: none !important; }
  .rep-paper { padding: 0; border: 0; box-shadow: none; }
  .rep-paper-head { flex-direction: row; }
  .rep-paper-meta { text-align: right; }
  .rep-paper-meta div { display: block; }
  .rep-paper-meta div + div::before { content: none; }
  .rep-trend-summary { grid-template-columns: repeat(4, 1fr) !important; }
  .rep-stats { grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)) !important; }
  .rep-section { break-inside: avoid; }
}
@media (max-width: 640px) { .rep-wrap { padding: 14px 12px; } .rep-table { display: block; overflow-x: auto; } }
@media print { .topbar, .rep-toolbar { display: none !important; } .rep-wrap { padding: 0; max-width: none; } .rep-paper { box-shadow: none; border: none; } }

/* ---- Late-booking warning bar ---- */
.late-warn-bar { display: flex; gap: 12px; align-items: flex-start; margin: 0 0 12px; padding: 12px 16px; border-radius: var(--radius); background: #fdecee; border: 1px solid #e8a4a8; border-left: 4px solid #b3242a; }
.late-warn-icon { font-size: 20px; line-height: 1.2; }
.late-warn-body { flex: 1; min-width: 0; }
.late-warn-title { font-weight: 800; font-size: 13px; color: #7a181c; letter-spacing: 0.01em; }
.late-warn-sub { font-size: 12px; color: #9a3b3f; margin-top: 2px; }
.late-warn-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.late-warn-chip { font-size: 12px; padding: 3px 9px; border-radius: 5px; border: 1px solid #e8a4a8; background: #fff; color: #7a181c; cursor: pointer; transition: var(--t); }
.late-warn-chip:hover { background: #b3242a; color: #fff; border-color: #b3242a; }
.late-warn-by { color: var(--ink-mute); font-weight: 600; }
.late-warn-chip:hover .late-warn-by { color: #fff; }
.late-warn-more { font-size: 11px; color: #9a3b3f; align-self: center; font-weight: 600; }

/* ---- Merged run card (week grid) ---- */
.merged-run-card {
  border: 1px solid var(--border);
  border-left: 4px solid var(--steel);
  border-radius: var(--radius);
  background: var(--bg-elev);
  box-shadow: var(--shadow-sm);
  padding: 7px 8px 8px;
  margin-bottom: 6px;
}
.mrc-head { display: flex; align-items: center; gap: 6px; justify-content: space-between; }
.mrc-tag { font-size: 10px; font-weight: 800; letter-spacing: 0.04em; color: var(--ink-soft); white-space: nowrap; }
.mrc-dest { font-size: 12px; font-weight: 700; color: var(--ink); margin-top: 3px; overflow-wrap: anywhere; line-height: 1.25; }
.mrc-dest-label { font-size: 10px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-mute); margin-right: 3px; }
.mrc-driver-row { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.mrc-driver { font-size: 10px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; padding: 2px 7px; border-radius: 3px; white-space: nowrap; }
.mrc-truck { font-size: 10px; color: var(--ink-mute); text-transform: uppercase; }
.mrc-legs { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.mrc-leg {
  display: flex; gap: 7px; align-items: flex-start;
  background: var(--bg-sunk);
  border-left: 3px solid var(--steel);
  border-radius: 4px;
  padding: 5px 7px;
  cursor: pointer;
  transition: var(--t);
}
.mrc-leg:hover { background: var(--steel-soft); }
.mrc-leg-no { font-family: var(--font-mono); font-size: 11px; font-weight: 700; color: var(--ink-mute); min-width: 12px; }
.mrc-leg-body { flex: 1; min-width: 0; }
.mrc-leg-top { display: flex; align-items: center; gap: 6px; justify-content: space-between; flex-wrap: wrap; }
.mrc-leg-job { font-weight: 700; font-size: 12px; font-family: var(--font-mono); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mrc-leg-top .status-badge, .mrc-leg-top [class*="badge"] { flex-shrink: 0; }
.mrc-leg-route { font-size: 11px; color: var(--ink-soft); margin-top: 1px; display: flex; gap: 6px; flex-wrap: wrap; }
.mrc-leg-time { font-family: var(--font-mono); font-weight: 600; color: var(--ink-mute); }
.mrc-leg-items { font-size: 11px; color: var(--ink); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; }
.mrc-leg-contact { font-size: 10px; color: var(--ink-mute); margin-top: 1px; }
.cell.drag-over {
  background: var(--accent-soft);
  outline: 2px dashed var(--accent);
  outline-offset: -2px;
}
.run-row[draggable] { user-select: none; }
.run-row.dragging { opacity: 0.4; cursor: grabbing; }
.run-group.drag-over {
  outline: 2px dashed var(--accent);
  outline-offset: -2px;
}
.run-group.drag-over .run-group-head {
  background: var(--accent-soft);
}

/* ============================================================
   CONFIRM REMINDER (1:30 PM prompt)
   ============================================================ */
.reminder-modal {
  width: 920px;
  max-width: 100%;
}
.reminder-grid {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 24px;
  padding: 20px 24px;
  max-height: calc(100vh - 240px);
  overflow: auto;
}
@media (max-width: 800px) {
  .reminder-grid { grid-template-columns: 1fr; }
  .reminder-phone { display: none; }
}
.reminder-h {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 0 0 10px;
}
.reminder-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.reminder-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-left: 3px solid var(--warn);
  border-radius: var(--radius);
  transition: var(--t);
}
.reminder-row:hover { border-color: var(--border-strong); }
.reminder-row .rr-info { flex: 1; min-width: 0; }
.reminder-row .rr-top {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 4px;
}
.reminder-row .rr-items {
  font-weight: 500;
  font-size: 13px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.reminder-row .rr-meta {
  font-size: 11px;
  color: var(--ink-soft);
  margin-bottom: 6px;
}
.reminder-row .rr-reasons {
  display: flex; flex-wrap: wrap; gap: 4px;
}
.reminder-tag {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 6px;
  border-radius: 3px;
  background: #fff3e0;
  color: var(--warn);
  border: 1px dashed #d99a55;
}
.reminder-row .rr-actions {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex-shrink: 0;
}

.reminder-phone {
  display: flex; flex-direction: column; align-items: center;
}
.reminder-phone-screen {
  width: 100%;
  background: #f4f5f7;
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.reminder-sms-head {
  background: #fff;
  padding: 10px 14px;
  display: flex; align-items: center; gap: 10px;
  border-bottom: 1px solid var(--border);
}
.reminder-sms-head .avatar {
  width: 32px; height: 32px;
  background: var(--steel);
  color: #fff;
  border-radius: 50%;
  display: grid; place-items: center;
  font-weight: 700;
  font-size: 13px;
}
.reminder-sms-head .name { font-size: 12px; font-weight: 600; }
.reminder-sms-head .num { font-size: 10px; color: var(--ink-mute); }
.reminder-sms-body {
  padding: 12px;
  display: flex; flex-direction: column; gap: 4px;
  min-height: 200px;
}
.reminder-sms-body .bubble {
  max-width: 90%;
  padding: 8px 12px;
  border-radius: 16px;
  font-size: 12px;
  line-height: 1.45;
}
.reminder-sms-body .bubble.in {
  align-self: flex-start;
  background: #ebedf0;
  color: var(--ink);
  border-bottom-left-radius: 4px;
}
.reminder-sms-body .bubble.bot {
  background: var(--accent-soft);
  border: 1px solid #cfd4db;
}
.reminder-sms-time {
  align-self: center;
  font-size: 10px;
  color: var(--ink-mute);
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.reminder-deploy {
  margin-top: 12px;
  padding: 10px 12px;
  background: var(--bg-sunk);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  width: 100%;
}

/* ============================================================
   HUB (landing page)
   ============================================================ */
.hub-wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: 48px 24px 64px;
}
.hub-header {
  text-align: center;
  margin-bottom: 36px;
}
.hub-header h1 {
  font-size: 32px;
  margin: 0 0 6px;
  letter-spacing: -0.02em;
  font-weight: 700;
}
.hub-sub {
  font-size: 15px;
  color: var(--ink-mute);
}
.hub-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 900px) { .hub-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .hub-grid { grid-template-columns: 1fr; } }
.hub-tile {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-top: 4px solid var(--tile-accent, var(--steel));
  border-radius: var(--radius-lg);
  padding: 20px 22px 18px;
  text-align: left;
  transition: var(--t);
  position: relative;
  min-height: 230px;
  display: flex;
  flex-direction: column;
  cursor: pointer;
}
.hub-tile:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--tile-accent);
}
.hub-tile.stub { opacity: 0.85; }
.hub-tile.stub::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(45deg, transparent 0 6px, rgba(0,0,0,0.012) 6px 12px);
  border-radius: inherit;
  pointer-events: none;
}
.hub-tile-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  min-height: 18px;
  margin-bottom: 14px;
}
.hub-tile-num {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--tile-accent);
  letter-spacing: 0.04em;
}
.hub-tile-badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 99px;
  background: var(--tile-bg);
  color: var(--tile-ink);
}
.hub-tile-tag {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 3px;
  background: var(--bg-sunk);
  color: var(--ink-mute);
  border: 1px dashed var(--border-strong);
}
.hub-tile-icon {
  font-size: 32px;
  line-height: 1;
  margin-bottom: 10px;
}
.hub-tile-title {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 4px;
  color: var(--ink);
}
.hub-tile-desc {
  font-size: 12px;
  color: var(--ink-soft);
  line-height: 1.45;
  margin-bottom: 14px;
}
.hub-tile-cta {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--tile-accent);
}
.hub-tile-cta span { font-size: 14px; transition: var(--t); }
.hub-tile:hover .hub-tile-cta span { transform: translateX(3px); }
.hub-foot {
  margin-top: 36px;
  text-align: center;
  font-size: 11px;
  color: var(--ink-soft);
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
  display: inline-flex;
  gap: 10px;
  width: 100%;
  justify-content: center;
}

/* Stub view shared styling */
.stub-wrap {
  max-width: 760px;
  margin: 0 auto;
  padding: 24px;
}
.stub-wrap h1 {
  font-size: 24px;
  margin: 0 0 4px;
  letter-spacing: -0.01em;
}
.stub-sub {
  font-size: 13px;
  color: var(--ink-mute);
  margin-bottom: 22px;
}
.stub-card {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  margin-bottom: 14px;
}
.stub-card-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 10px;
}
.stub-list {
  margin: 0;
  padding: 0 0 0 18px;
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1.6;
}
.stub-list li { margin: 4px 0; }
.stub-list strong { color: var(--ink); }
.stub-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.stub-table th, .stub-table td {
  text-align: left;
  padding: 7px 8px;
  border-bottom: 1px solid var(--border);
}
.stub-table th {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-mute);
  font-weight: 700;
}
.stub-table td.mono { font-family: var(--font-mono); }
.stub-callout {
  margin-top: 14px;
  padding: 12px 14px;
  background: var(--accent-soft);
  border: 1px solid #cfd4db;
  border-radius: var(--radius);
  font-size: 13px;
  color: var(--accent-ink);
}

/* ============================================================
   MISSING REGISTER
   ============================================================ */
.missing-wrap {
  padding: 24px;
  max-width: 1200px;
  margin: 0 auto;
}
.missing-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 18px;
  gap: 16px;
}
.missing-stats {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}
.missing-stat {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  text-align: left;
}
.missing-stat.muted { background: var(--bg-sunk); }
.missing-stat .ms-val {
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
  font-family: var(--font-mono);
  letter-spacing: -0.02em;
}
.missing-stat .ms-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-mute);
  margin-top: 6px;
}

.missing-filter {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
  padding: 10px 14px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.missing-filter .pill { white-space: nowrap; }

/* Filter toolbar: base layout via classes (no inline widths) */
.ts-filter-group { display: flex; align-items: center; gap: 6px; margin-left: 16px; padding-left: 16px; border-left: 1px solid var(--border); flex-wrap: wrap; min-width: 0; }
.ts-flabel { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-mute); flex-shrink: 0; }
.ts-projsel { width: 180px; max-width: 100%; padding: 6px 10px; font-size: 12px; }
.ts-jobfilter { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.ts-jobinput { width: 110px; max-width: 100%; padding: 6px 10px; font-size: 12px; }
.ts-exportrow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.ts-showing { font-size: 12px; color: var(--ink-mute); }
.ts-tabrow { min-width: 0; }

/* Narrow panes: filter toolbar stacks cleanly, filter group goes full width */
@media (max-width: 720px) {
  .ts-filter-group {
    margin-left: 0 !important;
    padding-left: 0 !important;
    border-left: none !important;
    flex-basis: 100%;
    flex-wrap: wrap;
    margin-top: 4px;
    padding-top: 8px;
    border-top: 1px solid var(--border);
  }
  .ts-toolbar-spacer { display: none; }
}

/* Phone: everything stacks full-width, nothing overflows sideways */
.pv-phone .ts-wrap, .pv-phone .ts-tabrow, .pv-phone .ts-filter-group, .pv-phone .ts-exportrow { min-width: 0; max-width: 100%; }
.pv-phone .ts-wrap { padding: 14px 12px 40px; overflow-x: hidden; }
.pv-phone .ts-toolbar { flex-direction: column; align-items: stretch; gap: 10px; }
.pv-phone .ts-toolbar h1 { font-size: 19px !important; }
.pv-phone .ts-tabrow { display: flex; flex-wrap: wrap; gap: 6px; }
.pv-phone .ts-tabrow .pill { font-size: 12px; padding: 6px 11px; }
.pv-phone .ts-filter-group { margin-left: 0; padding-left: 0; border-left: none; flex-basis: auto; flex-direction: column; align-items: stretch; gap: 8px; margin-top: 2px; padding-top: 10px; border-top: 1px solid var(--border); width: 100%; }
.pv-phone .ts-filter-group > .ts-flabel { margin-bottom: -4px; }
.pv-phone .ts-projsel, .pv-phone .ts-jobinput { width: 100%; font-size: 13px; padding: 9px 11px; }
.pv-phone .ts-jobfilter { display: flex; flex-direction: column; align-items: stretch; gap: 4px; width: 100%; }
.pv-phone .ts-jobfilter .ts-flabel { margin-left: 0 !important; }
.pv-phone .ts-toolbar-spacer { display: none; }
.pv-phone .ts-exportrow { width: 100%; padding-top: 10px; border-top: 1px solid var(--border); }
.pv-phone .ts-exportrow .btn { flex: 1 1 auto; justify-content: center; }
.pv-phone .ts-showing { flex-basis: 100%; margin-left: 0 !important; }
@media (max-width: 560px) {
  .ts-wrap { padding: 14px 12px 40px; overflow-x: hidden; }
  .ts-toolbar { flex-direction: column; align-items: stretch; gap: 10px; }
  .ts-projsel, .ts-jobinput { width: 100%; }
  .ts-jobfilter { flex-direction: column; align-items: stretch; gap: 4px; width: 100%; }
  .ts-jobfilter .ts-flabel { margin-left: 0 !important; }
  .ts-filter-group { flex-direction: column; align-items: stretch; }
  .ts-exportrow { width: 100%; padding-top: 10px; border-top: 1px solid var(--border); }
  .ts-exportrow .btn { flex: 1 1 auto; justify-content: center; }
  .ts-showing { flex-basis: 100%; }
}
/* Module title must never truncate to "Time..." on a phone */
.pv-phone .appheader { padding: 9px 12px; gap: 9px; }
.pv-phone .appheader h1 { white-space: normal; overflow: visible; font-size: 15px; line-height: 1.15; }
.pv-phone .appheader .crumb { font-size: 9px; letter-spacing: .08em; }
.pv-phone .appheader-right { gap: 5px; }
.pv-phone .appheader-right .btn-ghost { padding: 5px 8px; font-size: 11px; }
.pv-phone .appheader .acct-name { display: none; }
@media (max-width: 620px) {
  .appheader h1 { white-space: normal; overflow: visible; font-size: 16px; line-height: 1.15; }
  .appheader .acct-name { display: none; }
}

.missing-list {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.missing-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: var(--t);
}
.missing-row:last-child { border-bottom: none; }
.missing-row:hover { background: var(--steel-soft); }

/* ============================================================
   FIXINGS / CONSUMABLES
   ============================================================ */
.fix-wrap {
  padding: 24px;
  max-width: 1200px;
  margin: 0 auto;
}
.fix-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 18px;
  gap: 16px;
}
.fix-list {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.fix-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: var(--t);
}
.fix-row:last-child { border-bottom: none; }
.fix-row:hover { background: var(--steel-soft); }

.fix-modal {
  width: 760px;
  max-width: 100%;
}

.fix-item-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 4px;
}
.fix-item-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  background: var(--bg-sunk);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.fix-catalog {
  margin-top: 12px;
  padding: 12px;
  background: var(--bg-sunk);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  max-height: 380px;
  overflow: auto;
}
.fix-cat { margin-bottom: 12px; }
.fix-cat:last-child { margin-bottom: 0; }
.fix-cat-head {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding: 4px 0 4px 8px;
  margin-bottom: 6px;
}
.fix-cat-items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 6px;
}
.fix-cat-item {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  gap: 2px 8px;
  padding: 8px 10px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-align: left;
  cursor: pointer;
  transition: var(--t);
}
.fix-cat-item:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.fix-cat-item.added {
  opacity: 0.55;
  cursor: default;
  background: var(--bg-sunk);
}
.fix-cat-item.added:hover {
  border-color: var(--border);
  background: var(--bg-sunk);
}
.fci-desc {
  font-weight: 500;
  font-size: 12px;
  color: var(--ink);
}
.fci-meta {
  grid-column: 1;
  font-size: 11px;
  color: var(--ink-mute);
}
.fci-plus {
  grid-row: 1 / span 2;
  grid-column: 2;
  align-self: center;
  font-size: 20px;
  color: var(--accent);
  font-weight: 300;
  line-height: 1;
}
.fci-tick {
  grid-row: 1 / span 2;
  grid-column: 2;
  align-self: center;
  font-size: 10px;
  font-weight: 700;
  color: var(--ok);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

/* ============================================================
   PACK PICKER (drawings + lotting plan + pack select)
   ============================================================ */
.pack-empty {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  background: var(--bg-sunk);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
}
.pack-picker {
  background: var(--bg-sunk);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
}
.pack-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
}
.pack-head-title { font-size: 13px; font-weight: 600; }
.pack-head-count {
  font-size: 11px; color: var(--ink-mute);
  background: var(--bg-elev); border: 1px solid var(--border);
  padding: 2px 8px; border-radius: 99px;
}
.pack-drawings {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.pack-drawing {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  text-align: left;
  cursor: pointer;
  transition: var(--t);
  padding: 0;
}
.pack-drawing:hover { border-color: var(--accent); box-shadow: var(--shadow-sm); }
.pack-drawing-thumb {
  position: relative;
  height: 120px;
  background: #fff;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
}
.pack-drawing-thumb iframe {
  width: 100%; height: 100%; border: 0;
  pointer-events: none;
  transform: scale(1.0);
  transform-origin: top left;
}
.pack-drawing-overlay {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background: rgba(20,24,31,0);
  transition: var(--t);
  opacity: 0; grid-template-columns: minmax(0, 1fr);}
.pack-drawing-overlay span {
  background: rgba(20,24,31,0.85); color: #fff;
  padding: 5px 12px; border-radius: 99px;
  font-size: 12px; font-weight: 600;
}
.pack-drawing:hover .pack-drawing-overlay { background: rgba(20,24,31,0.18); opacity: 1; }
.pack-drawing-meta {
  padding: 8px 10px;
  display: flex; flex-direction: column; gap: 3px;
}
.pack-drawing-title { font-size: 12px; font-weight: 500; line-height: 1.3; }
.pack-tag-lotting {
  display: inline-block;
  font-size: 10px; font-weight: 700; letter-spacing: 0.06em;
  background: var(--accent-soft); color: var(--accent-ink);
  padding: 1px 6px; border-radius: 3px; width: fit-content;
}
.pack-select { border-top: 1px solid var(--border); padding-top: 12px; }
.pack-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.pack-chip {
  min-width: 34px;
  padding: 6px 10px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg-elev);
  font-size: 13px; font-weight: 600;
  color: var(--ink-soft);
  transition: var(--t);
}
.pack-chip:hover { border-color: var(--border-strong); }
.pack-chip.on { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.pack-selected {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  margin-top: 10px;
}
.pack-selected-chip {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--steel); color: #fff;
  font-size: 12px; font-weight: 600;
  padding: 3px 4px 3px 9px; border-radius: 99px;
}
.pack-selected-chip button {
  background: rgba(255,255,255,0.18); color: #fff;
  width: 15px; height: 15px; border-radius: 99px; font-size: 9px;
}

/* Full-screen viewer */
.pack-viewer-backdrop {
  position: fixed; inset: 0;
  background: rgba(15,20,30,0.6);
  z-index: 400;
  display: grid; place-items: center;
  padding: 24px; grid-template-columns: minmax(0, 1fr);}
.pack-viewer {
  background: var(--bg-elev);
  border-radius: var(--radius-lg);
  width: 1000px; max-width: 100%;
  height: 90vh;
  display: flex; flex-direction: column;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.pack-viewer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}
.pack-viewer-frame { flex: 1; width: 100%; border: 0; background: #525659; }
.pack-viewer-body {
  flex: 1;
  overflow: auto;
  background: #525659;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 16px;
}
.pdf-page-wrap {
  position: relative;
  width: 100%;
  min-height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.pack-viewer-body .pdf-page-wrap { width: auto; align-items: flex-start; }
.pdf-page-canvas {
  background: #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,0.25);
  display: block;
}
.pdf-page-state {
  font-size: 11px;
  color: var(--ink-mute);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 14px;
  text-align: center;
}
.pdf-page-state.error { color: var(--ink-soft); }
.pack-viewer-body .pdf-page-state { color: #d6d9de; }

/* ============================================================
   LOTTED PLANS (hub tab)
   ============================================================ */
.lot-wrap { max-width: 1200px; margin: 0 auto; padding: 24px; }
.lot-header { margin-bottom: 18px; display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.lot-projects { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.lot-search { position: relative; display: flex; align-items: center; margin-bottom: 16px; max-width: 460px; }
.lot-search-icon { position: absolute; left: 12px; font-size: 13px; opacity: 0.55; pointer-events: none; }
.lot-search .input { width: 100%; padding-left: 34px; padding-right: 34px; }
.lot-search-clear { position: absolute; right: 8px; border: none; background: transparent; color: var(--ink-mute); cursor: pointer; font-size: 13px; padding: 4px 6px; border-radius: 6px; }
.lot-search-clear:hover { background: var(--bg-sunk); color: var(--ink); }
.lot-project-tab {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 13px; font-weight: 600; color: var(--ink-soft);
  transition: var(--t);
}
.lot-project-tab:hover { border-color: var(--border-strong); }
.lot-project-tab.active { background: var(--steel); color: #fff; border-color: var(--steel); }
.lot-project-count {
  font-size: 11px; font-weight: 700;
  background: var(--bg-sunk); color: var(--ink-soft);
  padding: 1px 7px; border-radius: 99px;
}
.lot-project-tab.active .lot-project-count { background: rgba(255,255,255,0.2); color: #fff; }
.lot-body-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 14px;
}
.lot-job-group { margin-bottom: 22px; }
.lot-job-head {
  display: flex; align-items: center; gap: 10px;
  padding-bottom: 8px; margin-bottom: 10px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.lot-drawings {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}
.lot-drawing {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden; text-align: left; cursor: pointer;
  transition: var(--t); padding: 0;
}
.lot-drawing:hover { border-color: var(--accent); box-shadow: var(--shadow-sm); }
.lot-drawing-thumb {
  position: relative; height: 170px; background: #fff;
  overflow: hidden; border-bottom: 1px solid var(--border);
  display: flex; align-items: flex-start; justify-content: center;
}
.lot-drawing-meta { padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; }
.lot-drawing-title { font-size: 13px; font-weight: 500; line-height: 1.3; }
.lot-jobpick-label { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 8px; }
.lot-jobpick { display: flex; flex-wrap: wrap; gap: 8px; }
.lot-jobpick-btn {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 12px; border-radius: var(--radius);
  background: var(--bg-elev); border: 1px solid var(--border);
  cursor: pointer; transition: var(--t); text-align: left;
}
.lot-jobpick-btn:hover { border-color: var(--border-strong); }
.lot-jobpick-btn.active { border-color: var(--accent); background: var(--accent-soft); }
.lot-jobpick-no { font-weight: 700; font-size: 13px; }
.lot-jobpick-area { font-size: 12px; color: var(--ink-soft); }
.lot-jobpick-count { font-size: 11px; font-weight: 700; background: var(--bg-sunk); color: var(--ink-soft); padding: 1px 7px; border-radius: 99px; }
.lot-jobpick-btn.active .lot-jobpick-count { background: var(--accent); color: var(--on-accent); }

/* ============================================================
   DOCKET LIBRARY
   ============================================================ */
.dk-wrap { max-width: 1200px; margin: 0 auto; padding: 24px; }
.dk-header { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; margin-bottom: 16px; }
.dk-header .btn { white-space: nowrap; flex: 0 0 auto; }
.dk-count { font-size: 12px; color: var(--ink-mute); background: var(--bg-elev); border: 1px solid var(--border); padding: 3px 10px; border-radius: 99px; white-space: nowrap; }
.dk-searchbar {
  display: flex; align-items: center; gap: 8px;
  background: var(--bg-elev); border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg); padding: 6px 14px; margin-bottom: 18px;
  box-shadow: var(--shadow-sm);
}
.dk-search-icon { font-size: 16px; }

/* Search field (tool register, etc.) — icon sits inside a soft pill */
.dk-search {
  display: flex; align-items: center; gap: 8px;
  background: var(--bg-elev); border: 1px solid var(--border-strong);
  border-radius: 10px; padding: 0 12px; height: 38px;
  transition: border-color .15s, box-shadow .15s;
}
.dk-search:focus-within {
  border-color: var(--ink);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ink) 12%, transparent);
}
.dk-search .dk-search-icon {
  font-size: 14px; line-height: 1; color: var(--ink-mute);
  opacity: .7; flex-shrink: 0;
}
.dk-search-input {
  flex: 1; min-width: 0; border: none; outline: none; background: transparent;
  font: inherit; font-size: 13px; color: var(--ink); padding: 0;
}
.dk-search-input::placeholder { color: var(--ink-mute); }
.dk-section { margin-bottom: 22px; }
.mr-crit-check { display: flex; align-items: center; gap: 8px; font-size: 13px; margin: 4px 0 12px; cursor: pointer; }
.mr-crit-check input { width: 16px; height: 16px; }
.redeliv-bar { display: flex; align-items: center; gap: 12px; background: #f3eefe; border: 1px solid #d4c4f5; border-left: 4px solid #7a5ad0; border-radius: var(--radius); padding: 10px 14px; margin-bottom: 12px; cursor: pointer; transition: var(--t); }
.redeliv-bar:hover { background: #ece3fc; }
.redeliv-icon { font-size: 18px; color: #7a5ad0; }
.redeliv-body { flex: 1; min-width: 0; font-size: 13px; }
.redeliv-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 5px; }
.redeliv-chip { font-size: 11px; background: #fff; border: 1px solid #d4c4f5; border-radius: 4px; padding: 2px 7px; }
.redeliv-more { font-size: 11px; color: var(--ink-mute); align-self: center; }
.redeliv-cta { font-size: 12px; font-weight: 700; color: #5b3ba8; white-space: nowrap; }
.fm-typegroup { margin-bottom: 16px; }
.fm-typehead { display: flex; align-items: center; gap: 10px; padding: 6px 4px; border-bottom: 2px solid var(--border); margin-bottom: 4px; }
.fm-typehead-title { font-weight: 700; font-size: 13px; }
.fm-typehead-code { font-size: 11px; color: var(--ink-mute); }
.fm-typehead-count { margin-left: auto; font-size: 11px; font-weight: 700; background: var(--bg-sunk); border-radius: 999px; padding: 1px 9px; color: var(--ink-soft); }
.fm-prefill { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: #eef4ff; border: 1px solid #c8dbf5; border-radius: var(--radius); padding: 10px 12px; margin-bottom: 16px; }
.fm-prefill-label { font-size: 12px; font-weight: 700; color: #1d4677; white-space: nowrap; }
.fm-prefill .select { min-width: 240px; }
.fm-prefill-note { font-size: 11px; color: #1f7a4d; font-weight: 600; }
.dk-answer { display: flex; align-items: center; gap: 10px; background: #eaf4ff; border: 1px solid #bcd8f5; border-radius: var(--radius); padding: 11px 14px; margin-bottom: 12px; }
.dk-answer-tag { font-family: var(--font-mono); font-weight: 700; font-size: 14px; color: #1d4677; background: #fff; border: 1px solid #bcd8f5; border-radius: 5px; padding: 3px 9px; white-space: nowrap; }
.dk-answer-text { font-size: 13px; color: var(--ink); }
.dk-section-title {
  font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--ink-soft); margin-bottom: 10px;
}
.dk-mark-list {
  display: flex; flex-direction: column; gap: 6px;
  background: var(--accent-soft); border: 1px solid #cfd4db; border-radius: var(--radius-lg);
  padding: 10px;
}
.dk-mark-row {
  display: grid;
  grid-template-columns: 90px 1fr auto 1.4fr auto;
  gap: 12px; align-items: center;
  background: var(--bg-elev); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 9px 12px; cursor: pointer; transition: var(--t);
}
.dk-mark-row:hover { border-color: var(--accent); }
.dk-mark-tag { font-family: var(--font-mono); font-weight: 700; font-size: 13px; color: var(--accent-ink); }
.dk-mark-desc { font-size: 12px; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dk-mark-qty { font-family: var(--font-mono); font-weight: 600; font-size: 12px; }
.dk-mark-where { font-size: 12px; }
.dk-mark-date { color: var(--ink-mute); }
.dk-mark-docket { font-size: 11px; color: var(--ink-mute); }
.dk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.dk-card {
  background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 12px 14px; text-align: left; cursor: pointer; transition: var(--t);
}
.dk-card:hover { border-color: var(--accent); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.dk-card-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.dk-card-no { font-size: 12px; font-weight: 700; color: var(--ink-soft); }
.dk-card-kind { font-size: 10px; font-weight: 700; letter-spacing: 0.05em; padding: 1px 6px; border-radius: 3px; }
.dk-card-kind.data { background: #e0f5e9; color: #1f7a4d; }
.dk-card-kind.scan { background: var(--steel-soft); color: var(--ink-mute); }
.dk-card-kind.cantread { background: #fdecee; color: #b3242a; font-weight: 700; }
.dk-card-job { font-family: var(--font-mono); font-weight: 700; font-size: 14px; margin-bottom: 2px; }
.dk-card-route { font-size: 12px; color: var(--ink-soft); }
.dk-card-run { font-size: 11px; color: var(--ink-mute); margin-top: 2px; }
.dk-card-items { font-size: 11px; color: var(--accent-ink); font-weight: 600; margin-top: 6px; }

/* Docket current-location filter + chips */
.dk-locbar { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; flex-wrap: wrap; }
.dk-locbar-label { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-mute); flex-shrink: 0; white-space: nowrap; }
.dk-loc-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.dk-loc-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; padding: 5px 11px; border-radius: 99px; cursor: pointer;
  background: var(--bg-elev); border: 1px solid var(--border); color: var(--ink-soft);
  transition: var(--t); max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dk-loc-chip:hover { border-color: var(--border-strong); color: var(--ink); }
.dk-loc-chip.active { background: var(--ink); color: #fff; border-color: var(--ink); }
.dk-loc-n { font-size: 10px; font-weight: 700; opacity: 0.7; font-family: var(--font-mono); }
.dk-loc-chip.active .dk-loc-n { opacity: 0.85; }

/* Current location on docket card */
.dk-card-loc {
  display: flex; align-items: center; gap: 5px; margin-top: 8px; padding-top: 8px;
  border-top: 1px dashed var(--border); font-size: 11px; color: var(--ink-soft);
}
.dk-card-loc-pin { font-size: 11px; flex-shrink: 0; }
.dk-card-loc-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dk-card-loc.at-site .dk-card-loc-name { color: var(--good, #1f8a5b); }
.dk-card-loc.partial .dk-card-loc-name { color: #a86a00; }
.dk-card-loc-badge.partial { background: #fdf2d0; color: #a86a00; }
.dk-card-loc-badge {
  font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  background: #e6f4ec; color: #1f8a5b; padding: 1px 6px; border-radius: 99px; flex-shrink: 0;
}

/* Current location strip in the docket viewer */
.dk-loc-strip {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 9px 16px; background: var(--bg-sunk); border-bottom: 1px solid var(--border);
  font-size: 12px; color: var(--ink-soft);
}
.dk-loc-strip-pin { font-size: 13px; }
.dk-loc-strip-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-mute); }
.dk-loc-strip-name { font-size: 14px; color: var(--ink); }
.dk-loc-strip.at-site .dk-loc-strip-name { color: var(--good, #1f8a5b); }
.dk-loc-strip.partial { background: #fdf6e3; }
.dk-loc-strip.partial .dk-loc-strip-name { color: #a86a00; }
.dk-loc-strip-meta { font-size: 11px; color: var(--ink-mute); }
.dk-csv-view { background: #fff; max-width: 760px; margin: 0 auto; padding: 24px; border-radius: var(--radius); }
.dk-csv-meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 18px; padding-bottom: 14px; border-bottom: 2px solid #14181f; }
.dk-csv-meta > div, .dk-csv-meta .dk-meta-cell { display: flex; flex-direction: column; gap: 2px; }
.dk-csv-meta span { font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; color: #888; font-weight: 600; }
.dk-csv-meta strong { font-size: 13px; color: #14181f; }
.dk-csv-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.dk-csv-table th { text-align: left; background: #f4f5f7; padding: 7px 10px; border: 1px solid #d6d9de; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: #4a525e; }
.dk-csv-table td { border: 1px solid #d6d9de; padding: 7px 10px; }
.dk-csv-table tfoot td { background: #f4f5f7; }
.dk-pick-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg-elev); cursor: pointer; text-align: left; transition: var(--t);
}
.dk-pick-row:hover { border-color: var(--accent); background: var(--accent-soft); }

/* ============================================================
   DAY LABOUR DOCKETS
   ============================================================ */
.dl-wrap { max-width: 1100px; margin: 0 auto; padding: 24px; }
.dl-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 16px; gap: 16px; }
.dl-controls { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 18px; padding: 14px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.dl-paper { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: 28px 30px; color: #14181f; }
.dl-paper-head { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 2px solid #14181f; padding-bottom: 12px; margin-bottom: 14px; }
.dl-meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 12px; }
.dl-meta > div { display: flex; flex-direction: column; gap: 2px; }
.dl-meta span { font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; color: #888; font-weight: 600; }
.dl-meta strong { font-size: 14px; }
.dl-section-label { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); margin: 14px 0 8px; }
.dl-hint { font-size: 13px; color: var(--ink-mute); font-style: italic; padding: 12px; background: var(--bg-sunk); border-radius: var(--radius); }
.dl-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.dl-table th, .dl-table td { border: 1px solid #d6d9de; padding: 7px 9px; text-align: center; }
.dl-table th { background: #f4f5f7; font-size: 11px; text-transform: uppercase; letter-spacing: 0.03em; color: #4a525e; }
.dl-th-date { font-size: 10px; color: #999; font-weight: 400; }
.dl-table tfoot td { background: #f4f5f7; }
.dl-equip td { padding: 3px 4px; }
.dl-equip .input { border: 1px solid transparent; background: transparent; }
.dl-equip .input:focus { border-color: var(--accent); background: #fff; }
.dl-signoff { margin-top: 22px; padding-top: 16px; border-top: 2px solid #14181f; }
.dl-sign-grid { display: grid; grid-template-columns: 1.5fr 1.5fr 1fr; gap: 24px; margin-top: 10px; }
.dl-sign-grid > div span { font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; color: #888; font-weight: 600; }
.dl-sign-line { border-bottom: 1px solid #14181f; height: 30px; }
.dl-autobadge { font-size: 12px; font-weight: 600; color: #1f8a5b; background: #e0f5e9; border: 1px solid #9bd5b1; border-radius: var(--radius); padding: 8px 12px; align-self: center; }

/* ---- ArcStructural Day Labour Record (official template layout) ---- */
.dlr { font-size: 13px; }
.dlr-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; border-bottom: 2px solid #14181f; padding-bottom: 12px; }
.dlr-brand { display: flex; gap: 12px; align-items: flex-start; }
.dlr-logo { width: 46px; height: 54px; object-fit: contain; }
.dlr-name { font-size: 19px; font-weight: 800; letter-spacing: 0.04em; color: #14181f; }
.dlr-fine { font-size: 11px; color: #555; line-height: 1.5; }
.dlr-recordbox { text-align: right; min-width: 210px; }
.dlr-title { font-size: 15px; font-weight: 800; letter-spacing: 0.04em; margin-bottom: 8px; }
.dlr-rec-row { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-bottom: 5px; }
.dlr-rec-row > span:first-child { font-size: 11px; font-weight: 600; color: #555; text-transform: uppercase; letter-spacing: 0.03em; }   /* the label only - "assigned on submit" stays sentence case */
.dlr-inp { border: none; border-bottom: 1px solid #b6bcc4; background: transparent; font-size: 13px; padding: 3px 4px; color: #14181f; font-family: inherit; min-width: 90px; }
.dlr-inp:focus { outline: none; border-bottom-color: var(--accent); background: #fffdf8; }
.dlr-inp[readonly] { color: #14181f; border-bottom-style: dotted; }
.dlr-recordbox .dlr-inp { width: 110px; text-align: right; }

.dlr-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 24px; margin: 12px 0; }
.dlr-meta label { display: flex; align-items: center; gap: 8px; }
.dlr-meta label > span { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: #666; white-space: nowrap; min-width: 130px; }
.dlr-meta label .dlr-inp { flex: 1; }

.dlr-band { background: #14181f; color: #fff; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; padding: 6px 12px; margin: 16px 0 0; display: flex; align-items: baseline; gap: 10px; }
.dlr-band-note { font-weight: 500; font-size: 11px; letter-spacing: 0; text-transform: none; color: #b9c0c9; }
.dlr-desc { width: 100%; border: 1px solid #d6d9de; border-top: none; padding: 8px 10px; font-size: 13px; font-family: inherit; resize: vertical; color: #14181f; }
.dlr-desc:focus { outline: none; border-color: var(--accent); }

.dlr-scroll { overflow-x: auto; border: 1px solid #d6d9de; border-top: none; }
.dlr-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.dlr-table th, .dlr-table td { border: 1px solid #d6d9de; padding: 0; text-align: center; }
.dlr-table th { background: #f4f5f7; font-size: 10px; text-transform: uppercase; letter-spacing: 0.02em; color: #4a525e; font-weight: 700; padding: 4px 5px; line-height: 1.2; vertical-align: middle; }
.dlr-th-date { font-size: 10px; color: #999; font-weight: 400; text-transform: none; }
.dlr-table tfoot td { background: #f4f5f7; }
.dlr-table .mono { font-family: var(--font-mono); }
.dlr-hours td, .dlr-equip td { padding: 3px 4px; }
/* Equipment grid: even, fixed-width columns with wrapping headers */
.dlr-equip { table-layout: fixed; width: 100%; }
.dlr-equip th, .dlr-equip td { width: auto; overflow: hidden; }
.dlr-equip col.dlr-eq-daycol { width: 36px; }
.dlr-eq-th { white-space: normal; word-break: normal; overflow-wrap: break-word; line-height: 1.15; vertical-align: middle; height: 34px; }
.dlr-eq-th-comments { white-space: normal; }
.dlr-equip col.dlr-eq-col { width: 8.5%; }
.dlr-equip col.dlr-eq-col-comments { width: 14%; }
.dlr-cell { width: 100%; border: none; background: transparent; font-size: 12px; padding: 5px 6px; font-family: inherit; color: #14181f; }
.dlr-cell.ctr { text-align: center; }
.dlr-cell.mono { font-family: var(--font-mono); }
.dlr-cell:focus { outline: none; background: var(--accent-soft); }
.dlr-x { border: none; background: transparent; color: var(--bad); cursor: pointer; font-size: 12px; padding: 2px 5px; }
.dlr-add { font-size: 12px; margin-top: 6px; }

.dlr-signoff { margin-top: 22px; padding-top: 14px; border-top: 2px solid #14181f; }
.dlr-sign-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: end; }
.dlr-sign-grid label { display: flex; flex-direction: column; gap: 4px; }
.dlr-sign-grid label > span, .dlr-sign-cap { font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; color: #888; font-weight: 600; }
.dlr-note { text-align: center; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; color: #b3242a; margin-top: 18px; padding: 8px; border: 1px solid #e8a4a8; background: #fdecee; border-radius: 4px; }
.dlr-copies { display: flex; justify-content: space-between; font-size: 10px; color: #888; margin-top: 10px; padding-top: 8px; border-top: 1px dashed #d6d9de; }

/* Equipment — easy list on screen, full grid only on print */
.dlr-equip-print { display: none; }
.dlr-equip-screen { border: 1px solid #d6d9de; border-top: none; padding: 10px; }
.dlr-eq-list { display: flex; flex-direction: column; gap: 8px; }
.dlr-eq-item { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; padding: 10px; background: var(--bg-sunk); border: 1px solid var(--border); border-radius: var(--radius); }
.dlr-eq-field { display: flex; flex-direction: column; gap: 3px; }
.dlr-eq-field label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--ink-mute); }
.dlr-eq-field .select, .dlr-eq-field .input { font-size: 13px; padding: 8px 10px; }
.dlr-day-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.dlr-day-chip { font-size: 12px; font-weight: 600; padding: 7px 11px; border-radius: 6px; border: 1px solid var(--border); background: var(--bg-elev); color: var(--ink-soft); cursor: pointer; transition: var(--t); min-width: 40px; }
.dlr-day-chip:hover { border-color: var(--steel); }
.dlr-day-chip.on { background: var(--steel); color: #fff; border-color: var(--steel); }
.dlr-band-reset { margin-left: auto; font-size: 11px; font-weight: 600; background: rgba(255,255,255,0.15); color: #fff; border: none; padding: 3px 9px; border-radius: 4px; cursor: pointer; letter-spacing: 0; text-transform: none; }
.dlr-band-reset:hover { background: rgba(255,255,255,0.28); }
.dlr-manual-tag { margin-left: 6px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #b85515; background: #fdeee2; padding: 1px 5px; border-radius: 3px; }
.dlr-addworker { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 0 0; }
@media print { .dlr-noprint { display: none !important; } }
.dlr-printonly { display: none; }
@media print { .dlr-printonly { display: block !important; } }
.dlr-sign-block { display: flex; flex-direction: column; gap: 4px; }
.dlr-sig-img { max-width: 260px; max-height: 90px; border-bottom: 1px solid #14181f; display: block; }

/* ===== Signed day labour docket — fully locked ===== */
.dlr-lockbar { display: flex; align-items: flex-start; gap: 10px; background: #eef4fb; border: 1px solid #b8cfe3; border-radius: 10px; padding: 11px 14px; margin-bottom: 16px; }
.dlr-lockbar-ico { font-size: 15px; line-height: 1.3; flex-shrink: 0; }
.dlr-lockbar-txt { font-size: 12.5px; color: #2a5a75; line-height: 1.5; }
.dlr-lockbar-txt strong { color: #1d4560; }
/* Hours already claimed on another docket — visible but not counted (#10) */
.dlr-row-claimed { opacity: 0.5; }
.dlr-row-claimed input { pointer-events: none; text-decoration: line-through; }
.dlr-claimed-tag { display: inline-block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; background: #fbe3e1; color: #b3242a; border-radius: 999px; padding: 2px 8px; margin-left: 7px; }
/* Where a row's hours came from — indicator only (#14) */
.dlr-src { display: inline-block; width: 14px; font-size: 12px; font-weight: 700; }
/* Revision box + changed-value highlight (#11, #12) */
.dlr-revrow .dlr-revbox { font-family: var(--font-mono); font-size: 12px; font-weight: 700; background: #fdf3df; color: #8a6512; border: 1px solid #e8cf96; border-radius: 6px; padding: 2px 10px; }
.dlr-changed { background: #fdf3df; box-shadow: inset 0 0 0 1px #e8cf96; }
@media print { .dlr-changed { background: none; box-shadow: none; } }
/* Freeze every field/control on a signed docket — except the signature block,
   whose "Clear & re-sign" button is the one way back to editing. */
.dlr-locked .dlr-inp,
.dlr-locked .dlr-cell,
.dlr-locked .dlr-desc,
.dlr-locked input,
.dlr-locked textarea,
.dlr-locked select,
.dlr-locked .autocomplete { pointer-events: none; background: var(--bg-sunk); color: var(--ink-soft); }
.dlr-locked .dlr-x,
.dlr-locked .dlr-add,
.dlr-locked .dlr-band-reset,
.dlr-locked .dlr-day-chip,
.dlr-locked .dlr-addworker { pointer-events: none; opacity: 0.35; }
.dlr-locked .dlr-sign-block, .dlr-locked .dlr-sign-block * { pointer-events: auto; }
/* Job / project / week sit outside .dl-paper — freeze them too when signed. */
.dl-controls-locked .select,
.dl-controls-locked .input,
.dl-controls-locked .autocomplete { pointer-events: none; background: var(--bg-sunk); color: var(--ink-soft); }
.dl-controls-locked .dl-ctl-allow { pointer-events: auto; }
.dlr-locked .dlr-sign-block input { background: var(--bg-elev); color: var(--ink); }
.dlr-email { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-top: 16px; padding: 12px; background: var(--bg-sunk); border: 1px solid var(--border); border-radius: var(--radius); }
/* Side by side on a wide screen. When the box stacks (the phone rules below)
   this basis would become a HEIGHT, so they reset it. */
.dlr-email > .dlr-eq-field { flex: 1 1 220px; }

/* Day labour register */
.dlr-reg-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.dlr-reg-list { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.dlr-reg-row { display: flex; align-items: center; gap: 14px; padding: 13px 16px; border-bottom: 1px solid var(--border); cursor: pointer; transition: var(--t); }
.dlr-reg-row:last-child { border-bottom: none; }
.dlr-reg-row:hover { background: var(--steel-soft); }
.dlr-reg-no { flex-shrink: 0; font-weight: 700; font-size: 13px; background: var(--accent-soft); color: var(--accent-ink); padding: 3px 9px; border-radius: 4px; align-self: center; }
.dlr-reg-no.draft { background: #ebedf0; color: #5a6270; }
/* Day labour hours — card editor (phone) vs table (wide) */
.dlr-hours-cards { display: none; flex-direction: column; gap: 10px; }
.dlr-wcard { border: 1px solid var(--border); border-radius: 10px; background: var(--bg-sunk); padding: 12px 13px; }
.dlr-wcard-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.dlr-wcard-head b { font-size: 15px; color: var(--ink); display: flex; align-items: center; gap: 6px; }
.dlr-wcard-nameinp { flex: 1; min-width: 0; border: none; border-bottom: 1px solid var(--border); background: transparent; font-size: 15px; font-weight: 600; color: var(--ink); padding: 2px 0; }
.dlr-wcard-nameinp:focus { outline: none; border-bottom-color: var(--accent); }
.dlr-wcard-tot { margin-left: auto; font-weight: 700; font-size: 14px; color: var(--accent-ink); }
.dlr-wcard-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.dlr-wchip { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 2px; border-radius: 8px; background: var(--bg-elev); border: 1px solid var(--border); }
.dlr-wchip span { font-size: 10px; text-transform: uppercase; color: var(--ink-mute); font-weight: 700; }
.dlr-wchip.has { border-color: var(--accent); background: var(--accent-soft); }
.dlr-wchip input { width: 100%; border: none; background: transparent; text-align: center; font-size: 15px; font-weight: 600; color: var(--ink); padding: 2px 0; min-width: 0; }
.dlr-wchip input:focus { outline: none; }
.dlr-wcard-ntot { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 9px; }
.dlr-wcard-ntot label { min-width: 0; display: flex; align-items: center; gap: 7px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: 8px; padding: 6px 10px; }
.dlr-wcard-ntot span { font-size: 11px; text-transform: uppercase; color: var(--ink-mute); font-weight: 700; }
.dlr-wcard-ntot input { flex: 1; border: none; background: transparent; font-size: 15px; font-weight: 600; color: var(--ink); min-width: 0; }
.dlr-wcard-ntot input:focus { outline: none; }
.dlr-wcard-cmt { width: 100%; margin-top: 9px; border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; font-size: 13px; background: var(--bg-elev); color: var(--ink); }
.dlr-wcard.mismatch { border-color: #e0a94a; box-shadow: 0 0 0 1px #e0a94a inset; }
.dlr-wcard.mismatch .dlr-wcard-ntot label { border-color: #e0a94a; background: #fdf6e8; }
.dlr-wcard-warn { margin-top: 8px; font-size: 12px; font-weight: 600; color: #9a6a10; background: #fdf6e8; border: 1px solid #e8cf96; border-radius: 8px; padding: 7px 10px; }
.dlr-cell.warn { background: #fdf6e8; border-color: #e0a94a; color: #9a6a10; }
.dlr-row-mismatch .dlr-rowhead { box-shadow: inset 3px 0 0 #e0a94a; }
.pv-phone .dlr-hours-table { display: none; }
.pv-phone .dlr-hours-cards { display: flex; }
@media (max-width: 640px) {
  .dlr-hours-table { display: none; }
  .dlr-hours-cards { display: flex; }
}
.dlr-reg-main { flex: 1; min-width: 0; }
.dlr-reg-title { font-weight: 600; font-size: 14px; }
.dlr-reg-proj { color: var(--ink-mute); font-weight: 400; }
.dlr-reg-meta { font-size: 11px; color: var(--ink-mute); margin-top: 2px; }
.dlr-reg-status { min-width: 130px; display: flex; justify-content: flex-end; }
/* Same shape as .ce-flag: a direct flex child of .dlr-reg-status, nowrap, so
   without flex-shrink: 0 a longer status label would spill out of the pill. */
.dlr-reg-pill { font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 999px; white-space: nowrap; flex-shrink: 0; }
.dlr-reg-hrs { text-align: right; min-width: 78px; }
.dlr-reg-hrs-n { font-weight: 700; font-size: 16px; }
.dlr-reg-hrs-l { font-size: 10px; color: var(--ink-mute); text-transform: uppercase; letter-spacing: 0.04em; }
.dlr-reg-date { text-align: right; min-width: 84px; font-size: 11px; color: var(--ink-mute); }
.dlr-reg-row .dlr-x { align-self: center; }
/* Phone: reflow the row into a compact 2-row card */
.pv-phone .dlr-reg-row, .dlr-reg-row.rowmob { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "no main hrs" "no meta hrs" "no status status"; column-gap: 12px; row-gap: 4px; align-items: center; padding: 14px; }
.pv-phone .dlr-reg-no { grid-area: no; align-self: start; }
.pv-phone .dlr-reg-main { grid-area: main; }
.pv-phone .dlr-reg-title { white-space: normal; }
.pv-phone .dlr-reg-status { grid-area: status; justify-content: flex-start; min-width: 0; }
.pv-phone .dlr-reg-hrs { grid-area: hrs; align-self: start; min-width: 0; }
.pv-phone .dlr-reg-date { display: none; }
.pv-phone .dlr-reg-row .dlr-x { position: absolute; top: 8px; right: 8px; }
.pv-phone .dlr-reg-row { position: relative; }
@media (max-width: 620px) {
  .dlr-reg-row { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "no main hrs" "no meta hrs" "no status status"; column-gap: 12px; row-gap: 4px; padding: 14px; position: relative; }
  .dlr-reg-no { grid-area: no; align-self: start; }
  .dlr-reg-main { grid-area: main; }
  .dlr-reg-status { grid-area: status; justify-content: flex-start; min-width: 0; }
  .dlr-reg-hrs { grid-area: hrs; align-self: start; min-width: 0; }
  .dlr-reg-date { display: none; }
  .dlr-reg-row .dlr-x { position: absolute; top: 8px; right: 8px; }
}

/* ---- Variation quotes ---- */
.vq-wrap { max-width: 1100px; margin: 0 auto; padding: 24px; }
.vqr { color: #14181f; }
.vqr-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; border-bottom: 2px solid #14181f; padding-bottom: 12px; }
.vqr-titlebox { text-align: right; flex: 1; max-width: 420px; }
.vqr-subtitle { width: 100%; text-align: right; border: none; border-bottom: 1px solid #b6bcc4; font-size: 14px; padding: 4px 2px; margin-top: 6px; font-family: inherit; color: #14181f; }
.vqr-subtitle:focus { outline: none; border-bottom-color: var(--accent); }
.vqr-meta { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px 16px; margin: 12px 0; }
.vqr-meta label { display: flex; flex-direction: column; gap: 2px; }
.vqr-meta label > span { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: #888; }
.vqr-pending { font-size: 12px; color: #999; font-style: italic; padding: 3px 0; }
.vqr-sel { padding: 5px 6px; font-size: 13px; }
@media (max-width: 720px) { .vqr-meta { grid-template-columns: repeat(2, 1fr); } }

.vqr-link { background: #eaf4ff; border: 1px solid #b6d4f0; border-radius: var(--radius); padding: 10px 12px; margin: 14px 0; }
.vqr-link-label { font-size: 12px; font-weight: 700; color: #1d4677; }
.vqr-link-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.vqr-docket-chip { font-size: 12px; font-weight: 600; padding: 5px 10px; border-radius: 6px; border: 1px solid #2a6fdb; background: #fff; color: #1d4677; cursor: pointer; transition: var(--t); }
.vqr-docket-chip:hover:not(:disabled) { background: #2a6fdb; color: #fff; }
.vqr-docket-chip.linked { background: #e0f5e9; border-color: #9bd5b1; color: #1f7a4d; cursor: pointer; }
.vqr-docket-chip.linked:hover { background: #ffe6e6; border-color: #e0a0a0; color: #a33; }
.vqr-chip-x { margin-left: 6px; font-size: 10px; opacity: 0.6; }
.vqr-docket-chip.linked:hover .vqr-chip-x { opacity: 1; }

.vqr-section { margin-top: 16px; }
.vqr-section-head { display: flex; align-items: center; gap: 10px; background: #14181f; color: #fff; padding: 5px 10px; }
.vqr-section-num { font-weight: 800; font-size: 13px; background: rgba(255,255,255,0.18); width: 22px; height: 22px; display: grid; place-items: center; border-radius: 4px; flex-shrink: 0; }
.vqr-section-title { flex: 1; background: transparent; border: none; color: #fff; font-size: 13px; font-weight: 700; letter-spacing: 0.04em; }
.vqr-section-title:focus { outline: none; background: rgba(255,255,255,0.12); }
.vqr-section-total { font-weight: 700; font-size: 13px; }
.vqr-section-head .dlr-x { color: rgba(255,255,255,0.7); }
.vqr-items .ctr { text-align: center; }
.vqr-section-actions { display: flex; gap: 10px; align-items: center; padding: 8px 0; flex-wrap: wrap; }

.vqr-totals { margin-top: 18px; margin-left: auto; max-width: 380px; border: 1px solid #d6d9de; border-radius: var(--radius); overflow: hidden; }
.vqr-total-row { display: flex; justify-content: space-between; padding: 8px 14px; font-size: 14px; border-bottom: 1px solid #eceef1; }
.vqr-total-row:last-child { border-bottom: none; }
.vqr-grand { background: #14181f; color: #fff; font-weight: 800; font-size: 15px; }
.vqr-margin { width: 46px; text-align: center; margin: 0 4px; border: 1px solid #b6bcc4; border-radius: 4px; padding: 2px 4px; font-family: var(--font-mono); }
.vqr-rate-note { font-size: 11px; color: var(--ink-mute); margin-top: 12px; padding-top: 8px; border-top: 1px dashed var(--border); }
.vqr-insert { border: none; background: transparent; color: var(--info); cursor: pointer; font-size: 13px; padding: 2px 4px; }
.vqr-insert:hover { color: var(--steel); }
.vqr-move { border: none; background: transparent; color: var(--ink-mute); cursor: pointer; font-size: 10px; padding: 2px 2px; }
.vqr-move:hover:not(:disabled) { color: var(--steel); }
.vqr-move:disabled { opacity: 0.25; cursor: default; }
.vqr-dln-row td { background: #fffbe6; border-top: 2px solid #e6c34a !important; font-weight: 700; font-size: 11px; color: #6b4a10; letter-spacing: 0.02em; padding: 4px 8px !important; }
.vqr-th-sub { font-size: 10px; font-weight: 600; color: #aaa; text-transform: none; letter-spacing: 0; }
.vqr-steel-row td { background: #fafcff; }
.vqr-steel-row .dlr-cell.vqr-warn { background: #ffecec; border: 1px solid #e0a0a0; color: #a33; }
.vqr-steel-btn { color: var(--steel) !important; font-weight: 600; }
.vqr-weight-badge { background: #eef2f7; color: #44566b; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 4px; margin-right: 4px; }
.vqr-weight-foot td { background: #f4f6f9; border-top: 2px solid #cfd6df !important; padding: 5px 6px !important; }
.vqr-drag { cursor: grab; color: #b3bcc8; font-size: 14px; padding: 0 4px; user-select: none; }
.vqr-drag:active { cursor: grabbing; }
.vqr-drag:hover { color: var(--steel); }
.vqr-drop-target td { box-shadow: inset 0 2px 0 var(--steel); }

/* ---- Schedule of Rates admin ---- */
.ra-wrap { max-width: 980px; margin: 0 auto; padding: 24px; }
.ra-embedded { padding: 8px 0 0; max-width: none; }
.ra-reg { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.ra-reg-head, .ra-reg-row { display: grid; grid-template-columns: 1fr 130px 200px 90px; align-items: center; gap: 12px; padding: 10px 16px; }
.ra-reg-head { background: var(--surface-2, #f4f5f7); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-mute); }
.ra-reg-row { border-top: 1px solid var(--border); cursor: pointer; transition: var(--t); }
.ra-reg-row:hover { background: var(--surface-2, #f7f8fa); }
.ra-reg .ctr { text-align: center; }
.ra-pill { font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 20px; background: #eef0f3; color: #5a6270; }
.ra-pill-on { background: #e0f0ff; color: #1d4677; }
.ra-file-chip { font-size: 12px; color: var(--steel); font-weight: 500; }
.ra-doc { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--surface-2, #f7f8fa); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 16px; margin-bottom: 18px; }
.ra-doc-label { font-weight: 700; font-size: 13px; }
.ra-doc-have, .ra-doc-empty { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; flex: 1; }
.ra-doc-name { font-weight: 600; color: var(--steel); text-decoration: none; }
.ra-doc-name:hover { text-decoration: underline; }
.ra-doc-meta { font-size: 11px; color: var(--ink-mute); }
.ra-cat { margin-bottom: 18px; }
.ra-cat-head { background: #14181f; color: #fff; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; padding: 5px 12px; }
.ra-table { width: 100%; border-collapse: collapse; }
.ra-table th { background: #f4f5f7; font-size: 10px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--ink-mute); padding: 5px 8px; border: 1px solid var(--border); }
.ra-table td { border: 1px solid var(--border); padding: 0; }
.ra-cell { width: 100%; border: none; background: transparent; padding: 6px 8px; font-size: 13px; font-family: inherit; }
.ra-cell.ctr { text-align: center; }
.ra-cell:focus { outline: 2px solid var(--steel); outline-offset: -2px; }
.ra-cell[readonly] { color: #333; }
.vqr-manage-link { background: none; border: none; color: var(--info); font-size: 11px; cursor: pointer; padding: 2px 0; text-align: left; }
.vqr-manage-link:hover { text-decoration: underline; }
.cm-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.cm-table th { text-align: left; font-size: 10px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--ink-mute); padding: 4px 6px; }
.cm-table td { padding: 2px; }
.cm-table .input { padding: 6px 8px; font-size: 12px; }
.vqr-quals { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 20px; padding-top: 16px; border-top: 1px solid #d6d9de; }
.vqr-qual-head { font-size: 12px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: #14181f; margin-bottom: 8px; }
.vqr-qual-row { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.vqr-qual-num { font-size: 11px; font-weight: 700; color: #888; min-width: 16px; }
.vqr-qual-row .dlr-inp { flex: 1; }
@media (max-width: 720px) { .vqr-quals { grid-template-columns: 1fr; } }

@media print {
  .vq-wrap { padding: 0; max-width: none; }
  .vqr-section-head { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .vqr-grand { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

@media print {
  .topbar, .dl-header, .dl-controls { display: none !important; }
  .dl-paper { box-shadow: none; border: none; padding: 0; }
  /* Always print the full desktop docket, even from iPhone preview / narrow width */
  .dlr-hours-table { display: block !important; }
  .dlr-hours-cards { display: none !important; }
  .app-viewport.pv-phone { display: block !important; background: none !important; padding: 0 !important; }
  .pv-phone .device-frame { all: unset !important; display: block !important; }
  .pv-phone .app { border-radius: 0 !important; height: auto !important; overflow: visible !important; }
  .pv-phone .device-frame::before { display: none !important; }
  .preview-toolbar, .sidebar, .appheader { display: none !important; }
  .main-col, .pv-phone .main-col { height: auto !important; overflow: visible !important; }
  .dl-wrap { padding: 0; max-width: none; }
  .dlr-scroll { overflow: visible; }
  .dlr-equip-screen { display: none !important; }
  .dlr-equip-print { display: block !important; overflow: visible; }
  .dlr-band { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .dlr-table th, .dlr-table tfoot td { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .dlr-band-note { display: none !important; }
}

/* ---- One-page docket print: landscape A4, scaled to fit, no clipping ---- */
@page dlDocketPage { size: A4 portrait; margin: 8mm; }
body.dl-printing .dl-paper { page: dlDocketPage; }
body.dl-printing .dlr-scroll { overflow: visible !important; }
body.dl-printing .dlr { font-size: 11px; }
@media print {
  body.dl-printing .dl-paper { page-break-inside: avoid; break-inside: avoid; }
  body.dl-printing .dlr-table th,
  body.dl-printing .dlr-table td { padding-top: 2px !important; padding-bottom: 2px !important; }
  body.dl-printing .dlr-sign-block { page-break-inside: avoid; break-inside: avoid; }
}

/* ---- Client review banner + present-for-signing (clean finished docket) ---- */
.dlr-review-banner { display: flex; align-items: center; gap: 12px; background: var(--steel-soft); border: 1px solid var(--border); border-left: 4px solid var(--steel); border-radius: var(--radius); padding: 12px 16px; margin-bottom: 16px; color: var(--ink-soft); }
/* In present mode, inputs read as plain finished-document text (not editable) */
.dl-presenting input:not([type=checkbox]),
.dl-presenting textarea,
.dl-presenting select {
  border: none !important; background: transparent !important; box-shadow: none !important;
  pointer-events: none; padding: 1px 0 !important; color: #14181f !important;
  -webkit-appearance: none; appearance: none; resize: none; font-weight: 500;
}
.dl-presenting select { background-image: none !important; }
.dl-presenting .dlr-x,
.dl-presenting .dl-addrow,
.dl-presenting .dlr-add-btn,
.dl-presenting .dlr-noprint-edit { display: none !important; }
/* keep the signature area fully interactive while presenting */
.dl-presenting .dlr-sign-block,
.dl-presenting .dlr-sign-block * { pointer-events: auto; }
.dl-presenting .dlr-sign-block .btn { font-weight: 600; }

/* ============================================================
   FORMS
   ============================================================ */
.fm-wrap { max-width: 1100px; margin: 0 auto; padding: 24px; }
.fm-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 18px; gap: 16px; flex-wrap: wrap; }
.pv-phone .fm-header { flex-direction: column; align-items: stretch; gap: 12px; }
.pv-phone .fm-header > div { min-width: 0; }
.fm-catalog { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.fm-card { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px; }
.fm-card-cat { font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-mute); }
.fm-card-title { font-size: 15px; font-weight: 700; margin: 4px 0 2px; }
.fm-card-code { font-size: 11px; color: var(--ink-soft); margin-bottom: 12px; }
.fm-card-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.fm-card-actions .btn { font-size: 12px; padding: 6px 10px; }
.fm-filters { display: flex; gap: 10px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
.fm-list { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.fm-row { display: flex; align-items: center; gap: 14px; padding: 13px 16px; border-bottom: 1px solid var(--border); cursor: pointer; transition: var(--t); }
.fm-row-main { flex: 1; min-width: 0; }
.fm-row-title { font-weight: 600; font-size: 14px; }
.fm-row-sub { font-size: 11px; color: var(--ink-mute); margin-top: 2px; }
.fm-row-by { text-align: right; min-width: 130px; flex-shrink: 0; }
.fm-row-byname { font-size: 12px; font-weight: 500; color: var(--ink-soft); }
.fm-row-bydate { font-size: 11px; color: var(--ink-mute); }
.fm-row-chev { font-size: 14px; color: var(--ink-mute); flex-shrink: 0; }
/* Phone: stack the register row into a card so titles don't wrap one word per line */
.pv-phone .fm-row { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "method main" "method sub" "by by"; column-gap: 10px; row-gap: 4px; align-items: start; padding: 12px 14px; position: relative; }
.pv-phone .fm-method { grid-area: method; align-self: start; }
.pv-phone .fm-row-main { grid-area: main; }
.pv-phone .fm-row-title { white-space: normal; word-break: normal; overflow-wrap: anywhere; line-height: 1.3; }
.pv-phone .fm-ackbadge { grid-area: sub; justify-self: start; }
.pv-phone .fm-row-by { grid-area: by; text-align: left; min-width: 0; display: flex; gap: 8px; align-items: baseline; }
.pv-phone .fm-row-chev { position: absolute; top: 12px; right: 10px; }
.pv-phone .fm-typehead { flex-wrap: wrap; gap: 4px; }
.pv-phone .fm-typehead-title { white-space: normal; overflow-wrap: anywhere; }
.pv-phone .fm-filters > .select, .pv-phone .fm-filters > .input { width: 100% !important; }
.pv-phone .lv-filters > .select, .pv-phone .lv-filters > .input { width: 100% !important; }
/* Phone: the seg toggle already offers "+ New request" — hide the duplicate action button */
.pv-phone .lv-filters > .btn-primary { display: none; }
@media (max-width: 620px) {
  .fm-row { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "method main" "method sub" "by by"; column-gap: 10px; row-gap: 4px; align-items: start; position: relative; }
  .fm-method { grid-area: method; align-self: start; }
  .fm-row-main { grid-area: main; }
  .fm-row-title { white-space: normal; overflow-wrap: anywhere; line-height: 1.3; }
  .fm-ackbadge { grid-area: sub; justify-self: start; }
  .fm-row-by { grid-area: by; text-align: left; min-width: 0; display: flex; gap: 8px; align-items: baseline; }
  .fm-row-chev { position: absolute; top: 12px; right: 10px; }
  .fm-filters > .select, .fm-filters > .input { width: 100% !important; }
  .lv-filters > .select, .lv-filters > .input { width: 100% !important; }
  .lv-filters > .btn-primary { display: none; }
}
.fm-row:last-child { border-bottom: none; }
.fm-row:hover { background: var(--steel-soft); }
.fm-method { font-size: 10px; font-weight: 700; letter-spacing: 0.05em; padding: 2px 7px; border-radius: 3px; flex-shrink: 0; }
.fm-method.scan { background: #fdeee2; color: #b85515; }
.fm-method.in_app { background: #e0f5e9; color: #1f7a4d; }
.fm-ackbadge { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: #fdeee2; color: #b85515; flex-shrink: 0; white-space: nowrap; }
.fm-ackbadge.done { background: #e0f5e9; color: #1f7a4d; }
.fm-ackbanner { background: #fff7ed; border: 1px solid #f0cda1; border-left: 4px solid var(--accent, #E8862E); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 16px; }
.fm-ackbanner-head { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 14px; color: #92400e; margin-bottom: 10px; }
.fm-ackbanner-bell { font-size: 16px; }
.fm-ackrow { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid #f0ddc4; }
.fm-ackrow-main { flex: 1; min-width: 0; }
.fm-ackrow-title { font-size: 13px; font-weight: 600; }
.fm-ackrow-sub { font-size: 11px; color: var(--ink-mute); margin-top: 1px; }
.fm-ackpanel { margin-top: 18px; border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; background: var(--bg-sunk); }
.fm-ackpanel-title { font-size: 12px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 8px; }
.fm-ackpanel-row { display: flex; align-items: center; justify-content: space-between; font-size: 13px; padding: 5px 0; border-top: 1px solid var(--border); }
.fm-ackpanel-row:first-of-type { border-top: none; }
.fm-ack-ok { font-size: 12px; font-weight: 600; color: #1f7a4d; }
.fm-ack-wait { font-size: 12px; font-weight: 600; color: #b85515; }
.fm-ackpanel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.fm-ackpanel-head .fm-ackpanel-title { margin-bottom: 0; }
.fm-ackpanel-hint { font-size: 11.5px; color: var(--ink-soft); background: var(--bg-elev); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; margin-bottom: 8px; line-height: 1.45; }
.fm-ack-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.fm-ack-btn { font-size: 11px; padding: 3px 9px; border: 1px solid var(--border); border-radius: 999px; }
.fm-ack-btn:hover { background: var(--bg-elev); border-color: var(--border-strong); }
.fm-qrbox { display: inline-block; padding: 12px; background: #fff; border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-sm); }
.fm-qrwho { font-size: 13px; color: var(--ink); margin-top: 13px; line-height: 1.5; }
.fm-qrnames { font-size: 11.5px; color: var(--ink-mute); margin-top: 3px; }
.fm-qrnote { font-size: 11.5px; color: var(--ink-mute); margin-top: 9px; line-height: 1.45; }
@media (max-width: 560px) { .fm-ackpanel-row { flex-wrap: wrap; gap: 4px; } }
.fm-modal { width: 640px; max-width: 100%; }
.fm-fill-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.fm-fill-table th { text-align: left; padding: 4px 6px; font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-mute); }
.fm-fill-table td { padding: 2px; }
.fm-fill-table .input { padding: 6px 8px; font-size: 12px; }
.fm-render-row { padding: 8px 0; border-bottom: 1px solid var(--border); }
.fm-render-k { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-mute); margin-bottom: 3px; }
.fm-render-v { font-size: 14px; white-space: pre-wrap; }
.fm-scan-note { text-align: center; padding: 30px; color: var(--ink-soft); display: flex; flex-direction: column; align-items: center; }
.pod-sig { width: 100%; height: 170px; border: 1px dashed var(--border-strong); border-radius: var(--radius); background: #fff; touch-action: none; cursor: crosshair; }
.pod-url { margin-top: 10px; font-size: 11px; color: var(--ink-soft); background: var(--bg-sunk); border: 1px solid var(--border); border-radius: var(--radius); padding: 6px 10px; word-break: break-all; }
.pod-done { padding: 8px 0; }

/* ============================================================
   AUTH (login / signup / admin)
   ============================================================ */
.auth-screen { min-height: 100vh; display: grid; place-items: center; background: var(--steel); padding: 24px; grid-template-columns: minmax(0, 1fr);}
.auth-card { width: 400px; max-width: 100%; background: var(--bg-elev); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 26px 26px 22px; }
.auth-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.auth-ticket { display: flex; align-items: flex-start; gap: 9px; background: var(--bg-sunk); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; cursor: pointer; font-size: 12.5px; color: var(--ink); }
.auth-ticket input { margin-top: 2px; accent-color: var(--accent); flex-shrink: 0; }
.auth-ticket strong { display: block; font-size: 13px; }
.auth-ticket-note { display: block; font-size: 11.5px; color: var(--ink-mute); margin-top: 3px; line-height: 1.45; }
.adm-ticket { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; color: var(--ink-soft); }
.adm-ticket-pill { font-size: 10.5px; font-weight: 700; background: var(--accent-soft); color: var(--ink); border-radius: 999px; padding: 2px 8px; }
.auth-invite { background: var(--accent-soft); border: 1px solid var(--border); border-radius: 10px; padding: 11px 13px; margin-bottom: 14px; }
.auth-invite strong { display: block; font-size: 13.5px; color: var(--ink); }
.auth-invite span { display: block; font-size: 12px; color: var(--ink-soft); margin-top: 3px; line-height: 1.45; }
.auth-invitenote { margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--border); text-align: center; font-size: 12px; color: var(--ink-mute); line-height: 1.5; }
.auth-link { border: none; background: none; padding: 0; font: inherit; font-weight: 600; color: var(--accent-ink); text-decoration: underline; cursor: pointer; }
.admin-listhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.admin-rolefilter { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-mute); }
.admin-rolefilter .select { text-transform: none; letter-spacing: 0; font-weight: 500; font-size: 12.5px; padding: 5px 8px; min-width: 220px; }
.admin-rolegroup { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--ink-mute); padding: 12px 2px 4px; border-bottom: 1px solid var(--border); margin-bottom: 2px; }
.admin-fixednote { font-size: 12.5px; color: var(--ink-soft); background: var(--bg-sunk); border: 1px solid var(--border); border-radius: 10px; padding: 11px 13px; margin-top: 10px; line-height: 1.5; }
.tl-insp-locked { font-size: 11px; color: var(--ink-mute); font-style: italic; }
.auth-err { background: #fdecee; color: #b3242a; border: 1px solid #e8a4a8; border-radius: var(--radius); padding: 8px 12px; font-size: 13px; margin-bottom: 10px; }
.auth-ok { background: #e0f5e9; color: #0e4a2e; border: 1px solid #9bd5b1; border-radius: var(--radius); padding: 8px 12px; font-size: 13px; margin-bottom: 10px; }
.auth-demo { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); }
.auth-demo-row { display: flex; flex-direction: column; gap: 1px; width: 100%; text-align: left; padding: 7px 10px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); margin-bottom: 5px; cursor: pointer; font-size: 12px; transition: var(--t); }
.auth-demo-row:hover { border-color: var(--accent); background: var(--accent-soft); }

.admin-wrap { max-width: 1000px; margin: 0 auto; padding: 24px; }
.admin-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 18px; gap: 16px; }
.admin-section { margin-bottom: 22px; }
.admin-section-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-soft); margin-bottom: 10px; }
.admin-row { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 8px; }
.admin-row.pending { background: #fff8ef; border-color: #d99a55; }
.admin-perm-table { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 8px; }
.admin-perm-table td { padding: 5px 8px; border-bottom: 1px solid var(--border); }
.admin-perm-table tr:last-child td { border-bottom: none; }

.admin-tabs {
  display: inline-flex;
  gap: 4px;
  background: var(--bg-sunk);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 4px;
}
.admin-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 18px;
  border-radius: 7px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-soft);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: var(--t);
  white-space: nowrap;
}
.admin-tab:hover { color: var(--ink); background: var(--bg-elev); }
.admin-tab.active {
  background: var(--steel);
  color: #fff;
  box-shadow: var(--shadow-sm);
}

/* ============================================================
   SITE EQUIPMENT
   ============================================================ */
.eq-wrap { max-width: 1180px; margin: 0 auto; padding: 24px; }
.eq-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 18px; gap: 16px; flex-wrap: wrap; }
.eq-stat { cursor: pointer; text-align: left; transition: var(--t); }
.eq-stat:hover { border-color: var(--border-strong); }
.eq-stat.on { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink) inset; }

/* Tabs (owned / hired / faults) */
.eq-tabs { display: flex; gap: 4px; margin-bottom: 16px; border-bottom: 1px solid var(--border); }
.eq-tab { background: none; border: none; padding: 9px 16px; font-size: 14px; font-weight: 600; color: var(--ink-mute); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; display: inline-flex; align-items: center; gap: 7px; }
.eq-tab:hover { color: var(--ink); }
.eq-tab.on { color: var(--ink); border-bottom-color: var(--ink); }
.eq-tab-badge { background: #b3242a; color: #fff; font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 999px; }

/* Search box */
.eq-search { position: relative; flex: 1 1 280px; min-width: 0; max-width: 460px; }
.eq-search-icon { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--ink-mute); font-size: 16px; pointer-events: none; }
.eq-search-input { width: 100%; padding: 8px 30px 8px 32px; border: 1px solid var(--border); border-radius: var(--radius); font-size: 13px; font-family: inherit; background: var(--bg-elev); color: var(--ink); }
.eq-search-input:focus { outline: none; border-color: var(--accent, #2a6fdb); box-shadow: 0 0 0 3px var(--accent-soft, rgba(42,111,219,.15)); }
.eq-search-clear { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); border: none; background: var(--bg-sunk); color: var(--ink-soft); width: 18px; height: 18px; border-radius: 50%; cursor: pointer; font-size: 10px; }
.eq-hiretype { max-width: 150px; font-size: 11px; padding: 3px 5px; border: 1px solid var(--border); border-radius: 5px; background: var(--bg-elev); color: var(--ink); }
.eq-table td.eq-flag-missing { background: #fff7d6; }
.eq-table td.eq-flag-missing .eq-inline-display, .eq-table td.eq-flag-missing { color: #9a7b1a; }

/* Faults list */
.eq-faults { display: flex; flex-direction: column; gap: 10px; }
.eq-fault-card { display: flex; align-items: center; gap: 14px; background: var(--bg-elev); border: 1px solid var(--border); border-left: 4px solid #b85515; border-radius: var(--radius); padding: 12px 14px; }
.eq-fault-main { flex: 1; min-width: 0; }
.eq-fault-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.eq-fault-unit { font-weight: 700; cursor: pointer; }
.eq-fault-unit:hover { text-decoration: underline; }
.eq-fault-model { color: var(--ink-soft); font-size: 13px; }
.eq-fault-loc { font-size: 11px; color: var(--ink-mute); }
.eq-fault-desc { margin-top: 3px; font-size: 13px; }
.eq-fault-meta { margin-top: 3px; font-size: 11px; color: var(--ink-mute); }

/* Detail log sections */
.eq-logsec { border-top: 1px solid var(--border); padding-top: 12px; margin-top: 12px; }
.eq-logsec-head { display: flex; align-items: center; justify-content: space-between; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--ink-soft); margin-bottom: 8px; }
.eq-logadd { display: flex; gap: 6px; margin-bottom: 8px; flex-wrap: wrap; }
.eq-log-row { display: flex; align-items: center; gap: 10px; padding: 5px 0; border-bottom: 1px solid var(--border); font-size: 12.5px; }
.eq-log-row:last-child { border-bottom: none; }
.eq-qr-wrap { display: flex; gap: 16px; align-items: center; }
.eq-qr { width: 132px; height: 132px; flex-shrink: 0; background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 6px; display: flex; align-items: center; justify-content: center; }
.eq-qr img, .eq-qr canvas { display: block; width: 120px !important; height: 120px !important; }
.eq-qr-side { flex: 1; min-width: 0; }
.eq-qr-cap { font-size: 12.5px; color: var(--ink-soft); line-height: 1.4; margin-bottom: 10px; }
.eq-qr-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.eq-photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.eq-photo-slot { border: 1px solid var(--border); border-radius: 8px; padding: 8px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.eq-photo-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--ink-soft); }
.eq-photo-img { width: 100%; height: 100px; object-fit: cover; border-radius: 6px; border: 1px solid var(--border); }
.eq-photo-meta { font-size: 10.5px; color: var(--ink-mute); }
.eq-photo-add { width: 100%; height: 100px; border: 1.5px dashed var(--border); border-radius: 6px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; cursor: pointer; color: var(--ink-mute); transition: .12s; text-align: center; padding: 4px; }
.eq-photo-add:hover { border-color: var(--steel); color: var(--steel); background: var(--steel-soft); }
.eq-photo-add span:first-child { font-size: 22px; line-height: 1; }
.eq-photo-hint { font-size: 10px; line-height: 1.3; }
.eq-photo-empty { width: 100%; height: 100px; display: flex; align-items: center; justify-content: center; font-size: 11px; color: var(--ink-mute); font-style: italic; }
/* Tool & Lifting register */
.tl-short { font-weight: 600; }
.tl-sub { display: block; font-size: 11px; color: var(--ink-mute); font-weight: 400; margin-top: 2px; }
.tl-nf { display: inline-block; margin-left: 8px; font-size: 10px; font-weight: 800; letter-spacing: 0.05em; color: #8a6d00; background: #f3d98b; border-radius: 3px; padding: 1px 5px; vertical-align: middle; }
.tl-insp-result.nf { background: #f3d98b; color: #8a6d00; }
.tl-more { display: inline-block; margin-left: 8px; font-size: 11px; font-weight: 600; color: var(--ink-mute); opacity: 0; transition: opacity .12s; white-space: nowrap; }
.tl-table tr:hover .tl-more { opacity: 1; color: var(--accent, #d97757); }
.tl-oos { display: inline-block; margin-left: 8px; font-size: 10px; font-weight: 800; letter-spacing: 0.05em; color: #fff; background: #b3242a; border-radius: 3px; padding: 1px 5px; vertical-align: middle; }
.tl-controls { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.tl-flag-section { margin-top: 28px; }
.tl-flag-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; border-left: 3px solid; padding-left: 10px; }
.tl-flag-nl { border-color: #c9a227; }
.tl-flag-oos { border-color: #b3242a; }
.tl-flag-count { color: var(--ink-mute); font-weight: 500; }
.tl-flag-note { font-size: 11px; font-weight: 500; color: var(--ink-mute); text-transform: none; letter-spacing: 0; }
.tl-cat-tag { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; background: var(--bg-sunk); color: var(--ink-soft); border-radius: 999px; padding: 1px 8px; margin-left: 6px; }
.tl-table th, .tl-table td { font-size: 12.5px; }
.tl-insp-date { font-size: 11px; color: var(--ink-mute); margin-top: 2px; }
.tl-insp-rec { border: 1px solid var(--border); border-radius: 8px; padding: 9px 11px; margin-bottom: 8px; background: var(--bg-elev); }
.tl-insp-rec-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.tl-insp-result { font-size: 11px; font-weight: 800; padding: 1px 8px; border-radius: 4px; }
.tl-insp-result.pass { background: #e0f5e9; color: #1f7a4d; }
.tl-insp-result.fail { background: #fdecee; color: #b3242a; }
.tl-insp-checks { display: flex; flex-wrap: wrap; gap: 5px; }
.tl-check { font-size: 11px; padding: 1px 7px; border-radius: 4px; }
.tl-check.ok { background: #eef7f1; color: #2c7a52; }
.tl-check.no { background: #fdecee; color: #b3242a; font-weight: 600; }
.tl-insp-notes { font-size: 12px; color: var(--ink-soft); margin-top: 6px; font-style: italic; }
.tl-insp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tl-checklist { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.tl-checkrow { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-elev); cursor: pointer; font-size: 13px; text-align: left; transition: .1s; }
.tl-checkrow.ok { border-color: #9bd5b1; background: #f1faf4; }
.tl-checkrow.no { border-color: #e8a4a8; background: #fdf3f4; }
.tl-checkbox { width: 22px; height: 22px; border-radius: 5px; display: flex; align-items: center; justify-content: center; font-weight: 800; color: #fff; flex-shrink: 0; }
.tl-checkrow.ok .tl-checkbox { background: #1f7a4d; }
.tl-checkrow.no .tl-checkbox { background: #b3242a; }
.tl-result-banner { margin-top: 12px; padding: 10px 14px; border-radius: 8px; font-size: 13px; font-weight: 600; }
.tl-result-banner.pass { background: #e0f5e9; color: #0e4a2e; }
.tl-result-banner.fail { background: #fdecee; color: #7a181c; }
.eq-log-date { font-family: var(--font-mono); font-size: 11px; color: var(--ink-mute); white-space: nowrap; min-width: 78px; }
.eq-log-body { flex: 1; min-width: 0; }
.eq-log-cost { color: var(--ink-mute); }
.eq-log-by { font-size: 11px; color: var(--ink-mute); white-space: nowrap; }
.eq-log-empty { font-size: 12px; color: var(--ink-mute); font-style: italic; }
.eq-cat { margin-bottom: 18px; }
.eq-cat-head { font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 8px; }
.eq-rows { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.eq-row { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.3fr 80px; gap: 12px; align-items: center; padding: 11px 14px; border-bottom: 1px solid var(--border); cursor: pointer; transition: var(--t); }
.eq-row:last-child { border-bottom: none; }
.eq-row:hover { background: var(--steel-soft); }
.eq-unit { display: flex; flex-direction: column; gap: 1px; }
.eq-make { font-size: 11px; color: var(--ink-mute); }
.eq-resp { font-size: 13px; }
.eq-loc { font-size: 12px; color: var(--ink-soft); }
.eq-svc { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; }
.eq-svc-pill { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 99px; }
.eq-svc-date { font-size: 10px; color: var(--ink-mute); }
.eq-hire { text-align: right; }
.eq-due-row { display: flex; align-items: center; gap: 10px; padding: 9px 12px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); }
.eq-deploy { margin-top: 14px; padding: 10px 12px; background: var(--bg-sunk); border: 1px solid var(--border); border-radius: var(--radius); font-size: 11px; color: var(--ink-soft); line-height: 1.5; }
.eq-hire-block { border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 10px; overflow: hidden; }
.eq-hire-head { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; background: var(--bg-sunk); border-bottom: 1px solid var(--border); }
.eq-hire-items { padding: 4px 12px; }
.eq-hire-item { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--border); font-size: 12px; }
.eq-hire-item:last-child { border-bottom: none; }
@media (max-width: 700px) { .eq-row { grid-template-columns: 1fr auto; } .eq-loc, .eq-resp { display: none; } }
.eq-table-scroll { overflow-x: auto; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.eq-table { width: 100%; border-collapse: collapse; font-size: 12px; white-space: nowrap; }
.eq-table th { text-align: left; background: var(--bg-sunk); padding: 8px 10px; font-size: 10px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--ink-mute); border-bottom: 1px solid var(--border); position: sticky; top: 0; }
.eq-table td { padding: 8px 10px; border-bottom: 1px solid var(--border); }
.eq-table tr:last-child td { border-bottom: none; }
.eq-table tbody tr:hover { background: var(--steel-soft); }
.eq-table .eq-date { font-size: 11px; color: var(--ink-soft); }
.eq-table .eq-editable:hover { background: var(--accent-soft); cursor: text; }
@media print {
  .topbar, .modal-foot, .modal-head .sub { display: none !important; }
  .fm-modal { width: 100%; box-shadow: none; }
  .modal-backdrop { position: static; background: none; padding: 0; }
}
.dk-noresult { text-align: center; padding: 32px 20px; }
.dk-noresult .icon { font-size: 30px; opacity: 0.5; margin-bottom: 8px; }
.dk-noresult .mono { font-family: var(--font-mono); }
.pack-viewer-foot {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px;
  border-top: 1px solid var(--border);
  background: var(--bg-sunk);
  flex-wrap: wrap;
}

/* ============================================================
   TIMESHEETS
   ============================================================ */
.ts-wrap {
  padding: 24px;
  max-width: 1200px;
  margin: 0 auto;
}
.ts-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 18px;
  gap: 16px;
  flex-wrap: wrap;
}
.ts-list {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.ts-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: var(--t);
}
.ts-row:last-child { border-bottom: none; }
.ts-row:hover { background: var(--steel-soft); }
.ts-row-status { width: 168px; flex: 0 0 auto; padding-right: 10px; }
.ts-row-status .ts-badge, .ts-row-status > span { max-width: 100%; white-space: normal; overflow-wrap: anywhere; display: inline-flex; align-items: center; text-align: left; line-height: 1.25; }
.ts-row-main { flex: 1 1 auto; min-width: 0; }
.ts-row-total { width: 90px; flex: 0 0 auto; }
.ts-row-super { min-width: 110px; flex: 0 0 auto; }
.ts-row-chev { flex: 0 0 auto; }

/* Narrow panes (phone / split view): stack the row so nothing gets crushed */
@media (max-width: 720px) {
  .ts-row { flex-wrap: wrap; gap: 6px 12px; align-items: center; }
  .ts-row-status { width: auto; order: 1; }
  .ts-row-total { width: auto; order: 2; margin-left: auto; text-align: right; display: flex; align-items: baseline; gap: 6px; }
  .ts-row-super { order: 3; flex-basis: 100%; min-width: 0; text-align: left; display: flex; align-items: baseline; gap: 6px; }
  .ts-row-main { order: 4; flex-basis: 100%; min-width: 0; }
  .ts-row-chev { display: none; }
  .ts-row-week { display: block; margin-left: 0 !important; margin-top: 2px; }
}

/* Phone preview: the frame is 430px inside a wide browser, so the media query
   above never fires — mirror the stacked row layout off .pv-phone instead. */
.pv-phone .ts-row { flex-wrap: wrap; gap: 6px 12px; align-items: center; }
.pv-phone .ts-row-status { width: auto; flex: 0 0 auto; order: 1; }
.pv-phone .ts-row-total { width: auto; flex: 0 0 auto; order: 2; margin-left: auto; text-align: right; display: flex; align-items: baseline; gap: 6px; }
.pv-phone .ts-row-super { order: 3; flex: 1 1 100%; min-width: 0; text-align: left; display: flex; align-items: baseline; gap: 6px; }
.pv-phone .ts-row-main { order: 4; flex: 1 1 100%; min-width: 0; }
.pv-phone .ts-row-chev { display: none; }
.pv-phone .ts-row-week { display: block; margin-left: 0 !important; margin-top: 2px; }

.ts-modal {
  width: 760px;
  max-width: 100%;
}

.ts-days {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 6px 0 14px;
}
.ts-day {
  background: var(--bg-sunk);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 12px;
  transition: var(--t);
}
.ts-day.mismatch {
  background: #fff8ef;
  border-color: #d99a55;
}
.ts-day-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.ts-day-name {
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.02em;
}
.ts-day-date {
  margin-left: 6px;
  color: var(--ink-mute);
  font-size: 12px;
}
.ts-day-hours-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ts-day-hours-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-mute);
}
.ts-day-hours-control {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-elev);
}
.ts-day-step {
  width: 32px;
  height: 38px;
  background: var(--bg-elev);
  border: none;
  border-right: 1px solid var(--border);
  font-size: 18px;
  font-weight: 600;
  color: var(--ink-soft);
  cursor: pointer;
  transition: var(--t);
  display: grid;
  place-items: center;
}
.ts-day-step:last-child { border-right: none; border-left: 1px solid var(--border); }
.ts-day-step:hover:not(:disabled) {
  background: var(--steel-soft);
  color: var(--ink);
}
.ts-day-step:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.ts-day-hours {
  width: 70px;
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  border: none;
  background: transparent;
  border-radius: 0;
  height: 38px;
}
.ts-day-hours:focus {
  outline: none;
  background: var(--accent-soft);
  box-shadow: none;
}
.ts-day-allocs {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--border);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ts-no-alloc {
  font-size: 12px;
  color: var(--warn);
  padding: 6px 8px;
  background: #fff3cd;
  border-radius: var(--radius);
  border: 1px dashed #d99a55;
}
.ts-alloc-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
/* Searchable project pickers inside allocation rows */
.ts-alloc-proj { flex: 1; min-width: 0; position: relative; }
.ts-alloc-proj .autocomplete, .ts-a-proj .autocomplete { width: 100%; }
.ts-a-proj { flex: 1; min-width: 0; position: relative; }
.ts-a-proj .input { min-height: 42px; font-size: 13.5px; }
.ts-a-proj-ro { display: flex; align-items: center; background: var(--bg-sunk); color: var(--ink-soft); }
.ts-alloc-hours-pair {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-elev);
}
.ts-alloc-hours-cell {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 4px;
}
.ts-alloc-hours-cell.nt { background: #e0f5e9; }
.ts-alloc-hours-cell.ot { background: #fff3cd; border-left: 1px solid var(--border); }
.ts-alloc-hours-tag {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 1px 0 1px 4px;
}
.ts-alloc-hours-cell.nt .ts-alloc-hours-tag { color: #1f7a4d; }
.ts-alloc-hours-cell.ot .ts-alloc-hours-tag { color: #7a4a08; }
.ts-alloc-hours-input {
  width: 55px;
  height: 34px;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  border: none;
  background: transparent;
  border-radius: 0;
  padding: 0 2px;
}
.ts-alloc-hours-input:focus {
  outline: none;
  background: rgba(255,255,255,0.5);
  box-shadow: none;
}
.ts-alloc-row .select {
  flex: 1;
  font-family: var(--font-mono);
  font-weight: 600;
}
.ts-alloc-h {
  font-size: 11px;
  color: var(--ink-mute);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.ts-alloc-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 2px;
}
.ts-alloc-sum {
  font-size: 11px;
  color: var(--ink-mute);
}
.ts-alloc-sum.mismatch {
  color: var(--warn);
  font-weight: 600;
}
.ts-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px;
  margin-top: 8px;
  background: var(--steel);
  color: #fff;
  border-radius: var(--radius);
  font-size: 14px;
}
.ts-total-val {
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* Review modal */
.ts-review-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}
.ts-review-day {
  background: var(--bg-sunk);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px;
  text-align: center;
}
.ts-review-day.ts-review-flagged {
  background: #fdecee;
  border: 1px solid #b3242a;
  box-shadow: 0 0 0 1px #b3242a inset;
}
.ts-review-day.ts-review-flagged .ts-review-day-hours {
  color: #b3242a;
}
.ts-review-flag-msg {
  margin-top: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #b3242a;
  background: #fff;
  border: 1px solid #b3242a;
  border-radius: 3px;
  padding: 2px 4px;
  text-align: center;
}
.ts-review-alloc.missing-job {
  background: #fff;
  border: 1px solid #e8a4a8;
  border-radius: 3px;
  padding: 2px 4px;
  margin: 1px 0;
}
.ts-review-day-name {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-mute);
}
.ts-review-day-date {
  font-size: 11px;
  color: var(--ink-soft);
  margin-bottom: 8px;
}
.ts-review-day-hours {
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1;
  margin-bottom: 8px;
}
.ts-review-day-allocs {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 10px;
  border-top: 1px solid var(--border);
  padding-top: 6px;
  min-height: 32px;
}
.ts-review-alloc {
  display: flex;
  justify-content: space-between;
}
.ts-review-alloc .mono {
  font-family: var(--font-mono);
  font-weight: 600;
}
.ts-summary-card {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
}
.ts-summary-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-mute);
  margin-bottom: 4px;
}
.ts-summary-val {
  font-family: var(--font-mono);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
}

/* ---- Site allowances & pay rates ---- */
.ts-rates { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 18px; }
.ts-rates-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }
.ts-rates-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
.ts-rates-card { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.ts-shift-select { font-size: 11px; padding: 3px 6px; height: 28px; max-width: 130px; border: 1px solid var(--border); border-radius: 5px; background: var(--bg-elev); color: var(--ink); }
.ts-crane-tick { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; color: var(--ink-soft); cursor: pointer; white-space: nowrap; }
.ts-crane-tick input { width: 14px; height: 14px; margin: 0; }
.ts-rates-card-head { background: var(--bg-sunk); padding: 9px 14px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--ink-soft); border-bottom: 1px solid var(--border); }
.ts-rates-table { width: 100%; border-collapse: collapse; }
.ts-rates-table th { font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-mute); text-align: left; padding: 7px 14px; border-bottom: 1px solid var(--border); }
.ts-rates-table td { padding: 6px 14px; border-bottom: 1px solid var(--border); font-size: 13px; vertical-align: middle; }
.ts-rates-table tr:last-child td { border-bottom: none; }
.ts-rates-table .r { text-align: right; }
.ts-rates-table th.r { text-align: right; }
.ts-dollar { color: var(--ink-mute); margin-right: 2px; font-size: 12px; }
.ts-rate-input { width: 78px; text-align: right; padding: 4px 7px; border: 1px solid var(--border); border-radius: 5px; font-size: 13px; font-family: var(--font-mono); background: var(--bg-elev); color: var(--ink); }
.ts-rate-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
@media (max-width: 720px) { .ts-rates-grid { grid-template-columns: 1fr; } }

/* ---- Weekly summary ---- */
.ts-summary { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.ts-sum-nav { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.ts-sum-week { display: flex; align-items: baseline; gap: 7px; font-size: 15px; }
.ts-sum-week-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-mute); }
.ts-sum-week-range { font-size: 12px; color: var(--ink-mute); }
.ts-sum-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; background: var(--border); border-bottom: 1px solid var(--border); }
.ts-sum-stat { background: var(--bg-elev); padding: 14px 16px; display: flex; flex-direction: column; gap: 3px; }
.ts-sum-stat .n { font-size: 26px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.ts-sum-stat .n.mono { font-family: var(--font-mono); }
.ts-sum-stat .l { font-size: 11px; color: var(--ink-mute); font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; }
.ts-sum-stat.warn .n { color: #b3242a; }
.ts-sum-stat.amber .n { color: #1d4677; }
.ts-sum-stat.ok .n { color: #0e4a2e; }
.ts-sum-stat.dim { opacity: 0.45; }
.ts-sum-table { display: flex; flex-direction: column; }
.ts-sum-row { display: grid; grid-template-columns: 2fr 1.6fr 0.7fr 1.2fr; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--border); font-size: 13px; }
.ts-sum-row.has-ts:hover { background: var(--bg-sunk); }
.ts-sum-row.is-missing { background: #fdf4f5; }
.ts-sum-headrow { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-mute); background: var(--bg-sunk); position: sticky; top: 0; }
.ts-sum-row .r { text-align: right; justify-self: end; }
.ts-sum-name { display: flex; align-items: center; gap: 9px; font-weight: 600; min-width: 0; }
.ts-sum-proj { color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ts-sum-hrs { font-family: var(--font-mono); }
.ts-sum-pill { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.ts-sum-foot { padding: 12px 16px; font-size: 12px; color: var(--ink-mute); }
@media (max-width: 640px) {
  .ts-sum-stats { grid-template-columns: repeat(2, 1fr); }
  .ts-sum-row { grid-template-columns: 1.6fr 0.6fr 1fr; }
  .ts-sum-proj { display: none; }
}

/* Week grouping in "All" tab */
.ts-week-group {
  border-bottom: 1px solid var(--border);
}
.ts-week-group:last-child { border-bottom: none; }
.ts-week-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 18px;
  background: var(--bg-sunk);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
  gap: 12px;
}
.ts-week-head-left {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.ts-week-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-mute);
}
.ts-week-date {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.ts-week-head-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.ts-week-stat { font-size: 12px; color: var(--ink-soft); }
.ts-week-pip {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 7px;
  border-radius: 99px;
}
.ts-week-total {
  display: inline-flex;
  align-items: baseline;
  padding-left: 12px;
  border-left: 1px solid var(--border);
}

/* ============================================================
   LEAVE — application form + register (Site / Workshop / Office)
   ============================================================ */
.lv-wrap { max-width: 920px; margin: 0 auto; padding: 24px; }

/* ===== Suppliers register ===== */
.sup-wrap { max-width: 1000px; margin: 0 auto; padding: 24px; }
.sup-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.sup-header h1 { margin: 0; font-size: 22px; letter-spacing: -0.01em; }
.sup-sub { font-size: 13px; color: var(--ink-mute); margin-top: 4px; max-width: 620px; }
.sup-headright { display: flex; gap: 8px; }
.sup-types { background: var(--bg-sunk); border: 1px solid var(--border); border-radius: 12px; padding: 13px 15px; margin-bottom: 14px; }
.sup-types-h { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-mute); margin-bottom: 9px; }
.sup-types-list { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.sup-typechip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; background: var(--bg-elev); border: 1px solid var(--border); border-radius: 999px; padding: 4px 6px 4px 12px; }
.sup-typechip button { border: none; background: none; color: var(--ink-mute); cursor: pointer; font-size: 11px; padding: 0 4px; border-radius: 50%; }
.sup-typechip button:hover { color: var(--bad); }
.sup-types-existing { display: flex; align-items: center; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.sup-types-lbl { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-mute); }
.sup-types-existing .select { max-width: 260px; }
.sup-types-add { display: flex; gap: 8px; max-width: 380px; }
.sup-filters { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.sup-search { flex: 1 1 220px; width: auto; min-width: 180px; }
.sup-filters .select { width: auto; min-width: 190px; flex: 0 0 auto; }
.sup-count { font-size: 12px; color: var(--ink-mute); font-family: var(--font-mono); }
.sup-list { background: var(--bg-elev); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.sup-row { display: flex; align-items: center; gap: 14px; padding: 13px 16px; border-bottom: 1px solid var(--border); }
.sup-row:last-child { border-bottom: none; }
.sup-row-main { flex: 1; min-width: 0; }
.sup-row-name { font-size: 14px; font-weight: 650; color: var(--ink); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sup-typetag { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; background: var(--accent-soft); color: var(--ink-soft); border-radius: 999px; padding: 2px 8px; }
.sup-builtin { font-size: 10px; color: var(--ink-mute); }
.sup-row-addr { font-size: 12.5px; color: var(--ink-soft); margin-top: 2px; }
.sup-noaddr { color: var(--ink-mute); font-style: italic; }
.sup-row-contact { font-size: 11.5px; color: var(--ink-mute); margin-top: 2px; }
.sup-row-actions { display: flex; gap: 4px; flex-shrink: 0; }

/* ===== Job numbers ===== */
.jn-wrap { max-width: 1180px; margin: 0 auto; padding: 24px; }
.jn-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.jn-header h1 { margin: 0; font-size: 22px; letter-spacing: -0.01em; }
.jn-sub { font-size: 13px; color: var(--ink-mute); margin-top: 4px; max-width: 660px; line-height: 1.5; }
.jn-count { text-align: right; font-size: 12px; color: var(--ink-mute); }
.jn-count b { display: block; font-size: 22px; color: var(--ink); font-family: var(--font-mono); }
.jn-jobno { display: flex; gap: 6px; }
.jn-jobno .input { flex: 1; min-width: 0; }
.jn-jobno .input[readonly] { background: var(--bg-sunk); color: var(--ink); font-weight: 700; }
.jn-jobno-btn { flex: 0 0 auto; font-size: 11px; padding: 0 10px; border: 1px solid var(--border); }
.jn-jobno-btn:hover { border-color: var(--accent); background: var(--accent-soft); }
.jn-ctd-missing { background: rgba(179,36,42,0.09); color: var(--bad) !important; font-weight: 700; box-shadow: inset 2px 0 0 var(--bad); }
.jn-ctd-missing .jn-blank { color: var(--bad); font-style: normal; }
.rep-sub { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-mute); margin: 16px 0 6px; }
.rep-none { font-size: 12.5px; color: var(--ok); background: rgba(90,160,111,0.09); border: 1px solid rgba(90,160,111,0.3); border-radius: 8px; padding: 10px 12px; }
.rep-namelist { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.rep-name { font-size: 12px; font-weight: 600; background: rgba(184,85,21,0.1); color: #b85515; border-radius: 999px; padding: 3px 10px; }
/* Variations register — grouped per project */
.vq-proj-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; min-width: 0; }
.vq-proj-name { font-size: 12.5px; font-weight: 700; color: var(--ink); }
.vq-proj-meta { font-size: 11px; color: var(--ink-mute); font-family: var(--font-mono); }
.vq-proj-list { margin: 0 0 12px; }
.jn-ctdchip { border: 1px solid var(--border); background: var(--bg-elev); color: var(--ink-soft); font: inherit; font-size: 12px; font-weight: 600; padding: 7px 12px; border-radius: 999px; cursor: pointer; white-space: nowrap; flex: 0 0 auto; }
.jn-ctdchip:hover { border-color: var(--border-strong); color: var(--ink); }
.jn-ctdchip.has { border-color: #e3a9a2; color: var(--bad); }
.jn-ctdchip.on { background: var(--bad); border-color: var(--bad); color: #fff; }
.jn-inherit { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--ink-mute); font-size: 10.5px; margin-left: 6px; }
.jn-headright { display: flex; gap: 8px; }
.jn-addjob { background: var(--bg-sunk); border: 1px solid var(--accent); border-radius: 12px; padding: 14px 16px; margin-bottom: 14px; }
.jn-addjob-note { font-size: 12px; color: var(--ink-mute); line-height: 1.5; margin-bottom: 12px; max-width: 620px; }
.jn-addedtag { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; background: var(--accent-soft); color: var(--ink-soft); border-radius: 999px; padding: 2px 7px; margin-left: 6px; }
.jn-filters { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.jn-search { flex: 1 1 260px; width: auto; min-width: 200px; }
.jn-filters .select { width: auto; min-width: 210px; flex: 0 0 auto; }
.jn-toggle { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--ink-soft); cursor: pointer; }
.jn-toggle input { accent-color: var(--accent); }
.jn-shown { font-size: 12px; color: var(--ink-mute); font-family: var(--font-mono); }
.jn-scroll { border: 1px solid var(--border); border-radius: 12px; background: var(--bg-elev); overflow-x: auto; max-height: calc(100vh - 300px); overflow-y: auto; }
.jn-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.jn-table th { position: sticky; top: 0; z-index: 2; background: var(--bg-elev); border-bottom: 2px solid var(--border-strong); padding: 8px 10px; text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-mute); font-weight: 700; }
.jn-table td { padding: 8px 10px; border-bottom: 1px solid var(--border); vertical-align: top; }
.jn-no { font-weight: 700; color: var(--ink); white-space: nowrap; }
.jn-donetag { font-size: 9.5px; font-weight: 700; text-transform: uppercase; background: var(--bg-sunk); color: var(--ink-mute); border-radius: 999px; padding: 1px 7px; margin-left: 6px; }
.jn-done { opacity: 0.55; }
.jn-desc { max-width: 280px; }
.jn-addr { max-width: 240px; color: var(--ink-soft); }
.jn-blank { color: var(--ink-mute); font-style: italic; }
.jn-none { padding: 24px; text-align: center; color: var(--ink-mute); font-style: italic; }
.jn-editbtn { font-size: 11px; padding: 3px 9px; }
.jn-hint { font-size: 11px; color: var(--ink-mute); margin-top: 4px; }
@media (max-width: 720px) {
  .sup-wrap, .jn-wrap { padding: 14px; }
  .sup-row { flex-direction: column; align-items: stretch; }
  .sup-row-actions { justify-content: flex-end; }
  .jn-count { text-align: left; }
  .sup-search, .jn-search, .sup-filters .select, .jn-filters .select { width: 100% !important; flex: 1 1 100%; }
}
.pv-phone .sup-wrap, .pv-phone .jn-wrap { padding: 14px; }
.pv-phone .sup-row { flex-direction: column; align-items: stretch; }
.pv-phone .sup-row-actions { justify-content: flex-end; }
.pv-phone .jn-count { text-align: left; }
.pv-phone .sup-search, .pv-phone .jn-search,
.pv-phone .sup-filters .select, .pv-phone .jn-filters .select { width: 100% !important; flex: 1 1 100%; }

/* ===== Labour Forecast board ===== */
.fb-wrap { max-width: 1240px; margin: 0 auto; padding: 24px; user-select: none; }
.fb-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.fb-header h1 { margin: 0; font-size: 22px; letter-spacing: -0.01em; }
.fb-sub { font-size: 13px; color: var(--ink-mute); margin-top: 4px; max-width: 640px; }
.fb-headright { display: flex; gap: 8px; flex-wrap: wrap; }
/* week tabs */
.fb-weeks { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.fb-week { position: relative; text-align: left; background: var(--bg-elev); border: 1px solid var(--border); border-radius: 10px; padding: 8px 14px; cursor: pointer; transition: var(--t); font: inherit; }
.fb-week:hover { border-color: var(--border-strong); }
.fb-week.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; background: var(--accent-soft); }
.fb-week-lbl { display: block; font-size: 13px; font-weight: 650; color: var(--ink); }
.fb-week-date { display: block; font-size: 11px; color: var(--ink-mute); font-family: var(--font-mono); }
.fb-week-dot { position: absolute; top: 7px; right: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--ok); }
.fb-weekmeta { display: flex; gap: 14px; flex-wrap: wrap; margin-left: auto; font-size: 12px; color: var(--ink-soft); }
.fb-weekstep { border: 1px solid var(--border); background: var(--bg-elev); color: var(--ink-soft); font-size: 15px; line-height: 1; width: 30px; height: 30px; border-radius: 8px; cursor: pointer; flex-shrink: 0; }
.fb-weekstep:hover { border-color: var(--accent); color: var(--ink); background: var(--accent-soft); }
.fb-histwrap { position: relative; }
.fb-histbtn { font-size: 12.5px; border: 1px solid var(--border); }
.fb-histbtn.on, .fb-histbtn:hover { border-color: var(--accent); background: var(--accent-soft); color: var(--ink); }
.fb-hist { position: absolute; top: calc(100% + 6px); left: 0; z-index: 120; width: 268px; background: var(--bg-elev); border: 1px solid var(--border-strong); border-radius: 12px; box-shadow: var(--shadow-lg); padding: 12px; }
.fb-hist-h { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-mute); margin-bottom: 7px; }
.fb-hist-date { width: 100%; margin-bottom: 10px; }
.fb-hist-list { max-height: 236px; overflow-y: auto; display: flex; flex-direction: column; border-top: 1px solid var(--border); }
.fb-hist-opt { text-align: left; border: none; background: none; border-bottom: 1px solid var(--border); padding: 7px 8px; cursor: pointer; font: inherit; display: flex; flex-direction: column; gap: 1px; }
.fb-hist-opt:last-child { border-bottom: none; }
.fb-hist-opt:hover { background: var(--bg-sunk); }
.fb-hist-opt.on { background: var(--accent-soft); }
.fb-hist-wk { font-size: 12.5px; font-weight: 650; color: var(--ink); }
.fb-hist-meta { font-size: 11px; color: var(--ink-mute); }
.fb-hist-none { font-size: 12px; color: var(--ink-mute); font-style: italic; padding: 10px 8px; }
.fb-weekmeta b { color: var(--ink); }
.fb-weekmeta .fb-warn { color: var(--warn); } .fb-weekmeta .fb-warn b { color: var(--warn); }
.fb-weekmeta .fb-mute { color: var(--ink-mute); }
/* brush bar */
.fb-brushbar { background: var(--bg-sunk); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; margin-bottom: 14px; }
.fb-brush-lead { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--ink-soft); margin-bottom: 9px; }
.fb-brush-step { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 11px; font-weight: 700; flex-shrink: 0; }
.fb-brush-2 { margin: 9px 0 0; }
.fb-brush-search { max-width: 240px; margin-bottom: 9px; }
.fb-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.fb-chip { font: inherit; font-size: 11.5px; font-weight: 600; border: 1px solid var(--border); background: var(--bg-elev); color: var(--ink); border-radius: 12px; padding: 5px 11px 5px 20px; cursor: pointer; position: relative; transition: var(--t); text-align: left; white-space: normal; overflow-wrap: anywhere; max-width: 100%; line-height: 1.3; }
.fb-chip::before { content: ""; position: absolute; left: 8px; top: 10px; width: 8px; height: 8px; border-radius: 50%; background: var(--c, #c8ccd2); }
.fb-chip:hover { border-color: var(--border-strong); }
.fb-chip.on { background: var(--c); border-color: var(--c); color: #fff; }
.fb-chip.on::before { background: rgba(255,255,255,.85); }
.fb-chip-erase { padding-left: 11px; } .fb-chip-erase::before { display: none; }
.fb-chip-erase.on { background: var(--ink); border-color: var(--ink); color: #fff; }
.fb-chip-add { padding-left: 11px; border-style: dashed; color: var(--ink-soft); }
.fb-chip-add::before { display: none; }
.fb-chip-add:hover { border-color: var(--accent); color: var(--ink); background: var(--accent-soft); }
.fb-protect { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; color: var(--ink-soft); cursor: pointer; }
.fb-protect input { accent-color: var(--accent); }
.fb-undohint { cursor: default; font-weight: 500; color: var(--ink-mute); }
.fb-addproj { margin-top: 9px; padding: 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-elev); }
.fb-addproj-list { max-height: 190px; overflow-y: auto; margin-top: 7px; display: flex; flex-direction: column; }
.fb-addproj-opt { text-align: left; font: inherit; font-size: 12.5px; color: var(--ink); background: transparent; border: none; border-bottom: 1px solid var(--border); padding: 7px 9px; cursor: pointer; }
.fb-addproj-opt:last-child { border-bottom: none; }
.fb-addproj-opt:hover { background: var(--accent-soft); }
.fb-addproj-none { font-size: 12px; color: var(--ink-mute); font-style: italic; padding: 8px; }
.fb-upd-who { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 12px; }
.fb-upd-lbl { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-mute); margin-right: 2px; }
.fb-upd-chip { font-size: 11.5px; font-weight: 600; background: var(--accent-soft); color: var(--ink); border-radius: 999px; padding: 3px 10px; }
.fb-upd-sup { background: var(--bg-sunk); color: var(--ink-mute); }
.fb-upd-msg { font-family: var(--font-mono); font-size: 11.5px; line-height: 1.55; color: var(--ink); background: var(--bg-sunk); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; white-space: pre-wrap; max-height: 300px; overflow-y: auto; margin: 0; }
/* grid */
.fb-scroll { overflow-x: auto; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-elev); }
.fb-grid { width: 100%; border-collapse: collapse; font-size: 12px; }
.fb-grid th, .fb-grid td { border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); }
.fb-grid thead th { position: sticky; top: 0; z-index: 2; background: var(--bg-elev); border-bottom: 2px solid var(--border-strong); padding: 6px 8px; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-mute); font-weight: 700; }
.fb-namecol { position: sticky; left: 0; z-index: 3; background: var(--bg-elev); border-right: 1px solid var(--border-strong) !important; min-width: 132px; text-align: left; }
.fb-grid thead .fb-namecol { z-index: 4; }
.fb-name { padding: 0 10px; font-size: 12.5px; font-weight: 600; color: var(--ink); text-align: left; white-space: nowrap; }
.fb-dayhead { min-width: 92px; text-align: center; }
.fb-dayname { font-size: 11px; font-weight: 700; color: var(--ink); }
.fb-daydate { font-size: 10px; color: var(--ink-mute); font-family: var(--font-mono); font-weight: 400; }
.fb-dayhead.today { background: #eef4fb; } .fb-dayhead.today .fb-dayname { color: #2a5a75; }
.fb-grid .wknd { background: var(--bg-sunk); }
.fb-cell { min-height: 34px; height: auto; padding: 4px 6px; text-align: center; cursor: pointer; color: var(--ink-mute); font-size: 11px; transition: background .1s; }
.fb-cell:hover { box-shadow: 0 0 0 2px var(--accent) inset; }
.fb-cell.has { background: color-mix(in srgb, var(--c) 16%, transparent); color: color-mix(in srgb, var(--c) 78%, #14181f); font-weight: 650; }
.fb-cell.has span { display: block; white-space: normal; overflow-wrap: anywhere; line-height: 1.2; max-width: 104px; margin: 0 auto; }
.fb-cell.leave { font-style: italic; font-weight: 600; background: var(--bg-sunk) !important; color: var(--ink-mute) !important; }
.fb-actcol { width: 78px; text-align: center; white-space: nowrap; border-right: none !important; }
.fb-rowbtn { border: 1px solid var(--border); background: var(--bg-elev); color: var(--ink-soft); font-size: 11px; line-height: 1; padding: 3px 5px; border-radius: 5px; cursor: pointer; margin: 0 1px; }
.fb-rowbtn:hover { background: var(--accent-soft); color: var(--ink); border-color: var(--accent); }
.fb-rowbtn-x:hover { background: var(--bad); color: #fff; border-color: var(--bad); }
.fb-addrow { display: flex; gap: 8px; align-items: center; margin-top: 10px; }
/* summary */
.fb-summary { margin-top: 22px; }
.fb-summary-h { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-mute); margin-bottom: 8px; }
.fb-sumgrid td, .fb-sumgrid th { text-align: center; }
.fb-sumname { padding: 5px 10px; font-size: 12px; font-weight: 600; color: var(--ink); text-align: left !important; white-space: normal; overflow-wrap: anywhere; line-height: 1.3; }
.fb-sumdot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 7px; vertical-align: middle; }
.fb-sumcell { height: 28px; font-family: var(--font-mono); font-size: 12px; color: var(--ink-mute); }
.fb-sumcell.has { color: var(--ink); font-weight: 700; background: var(--accent-soft); }
.fb-sumtot { font-family: var(--font-mono); font-weight: 700; color: var(--ink); background: var(--bg-sunk); }
.fb-toast { position: fixed; bottom: 128px; left: 50%; transform: translateX(-50%); background: var(--ink); color: #fff; font-size: 12.5px; padding: 9px 16px; border-radius: 999px; box-shadow: var(--shadow-lg); z-index: 400; border: 1px solid rgba(255,255,255,.18); }
/* Armed-brush pill — only needed where the palette scrolls out of view */
.fb-armed { display: none; position: fixed; bottom: 76px; left: 50%; transform: translateX(-50%); align-items: center; gap: 9px; background: var(--ink); color: #fff; font-size: 12.5px; font-weight: 600; padding: 9px 10px 9px 14px; border-radius: 999px; box-shadow: var(--shadow-lg); z-index: 380; max-width: 92%; }
.fb-armed-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 0 2px rgba(255,255,255,.25); }
.fb-armed-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fb-armed-x { border: none; background: rgba(255,255,255,.18); color: #fff; font: inherit; font-size: 11.5px; padding: 4px 11px; border-radius: 999px; cursor: pointer; flex-shrink: 0; }
.fb-armed-x:hover { background: rgba(255,255,255,.3); }
.pv-phone .fb-armed { display: flex; }
@media (max-width: 720px) { .fb-armed { display: flex; } }
/* phone */
.pv-phone .fb-wrap, .fb-wrap { }
.pv-phone .fb-header { flex-direction: column; }
.pv-phone .fb-weekmeta { margin-left: 0; }
.pv-phone .fb-namecol { min-width: 96px; }
.pv-phone .fb-name { font-size: 11.5px; white-space: normal; padding: 4px 7px; }
.pv-phone .fb-dayhead { min-width: 74px; }
.pv-phone .fb-cell.has span { max-width: 68px; }
.pv-phone .fb-brush-search { max-width: 100%; }
/* Cap the palette so the grid it drives stays above the fold — every project is
   still reachable by scrolling inside the chip list. */
.pv-phone .fb-chips { max-height: 152px; overflow-y: auto; }
.pv-phone .fb-brush-2 { position: sticky; bottom: 0; background: var(--bg-sunk); padding-top: 8px; margin-bottom: -2px; }
@media (max-width: 720px) {
  .fb-wrap { padding: 14px; }
  .fb-header { flex-direction: column; }
  .fb-weekmeta { margin-left: 0; }
  .fb-namecol { min-width: 96px; }
  .fb-name { font-size: 11.5px; white-space: normal; padding: 4px 7px; }
  .fb-dayhead { min-width: 74px; }
  .fb-cell.has span { max-width: 68px; }
  .fb-brush-search { max-width: 100%; }
  .fb-chips { max-height: 152px; overflow-y: auto; }
  .fb-brush-2 { position: sticky; bottom: 0; background: var(--bg-sunk); padding-top: 8px; margin-bottom: -2px; }
}

/* ===== Variation status pipeline ===== */
.vq-pipe { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin-bottom: 16px; }
.vq-pipe-cell { text-align: left; background: var(--bg-elev); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; cursor: pointer; transition: var(--t); font: inherit; }
.vq-pipe-cell:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.vq-pipe-cell.on { border-color: var(--sc, var(--accent)); box-shadow: 0 0 0 1px var(--sc, var(--accent)) inset; background: var(--sb, var(--accent-soft)); }
.vq-pipe-lbl { display: flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-mute); }
.vq-pipe-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--sc, var(--ink-mute)); flex-shrink: 0; }
.vq-pipe-val { font-family: var(--font-mono); font-size: 15px; font-weight: 700; color: var(--ink); margin-top: 4px; }
.vq-pipe-cnt { font-size: 11px; color: var(--ink-mute); }
.vq-reg-main { flex: 1; min-width: 0; }
.vq-reg-title { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vq-reg-sub { font-size: 11px; color: var(--ink-mute); margin-top: 2px; }
.vq-reg-status { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.vq-statsel { font: inherit; font-size: 11.5px; font-weight: 700; padding: 3px 8px; border-radius: 999px; border: 1px solid var(--border); cursor: pointer; appearance: none; text-align: center; }
.vq-statpill { font-size: 11.5px; font-weight: 700; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.vq-loglink { border: none; background: transparent; cursor: pointer; font-size: 13px; padding: 2px 4px; border-radius: 5px; opacity: 0.6; }
.vq-loglink:hover { opacity: 1; background: var(--bg-sunk); }
.vq-reg-amt { text-align: right; min-width: 100px; flex-shrink: 0; }
.vq-reg-total { font-weight: 700; font-size: 15px; }
.vq-reg-date { font-size: 10px; color: var(--ink-mute); }
.vq-logrow { display: flex; align-items: center; gap: 7px; padding: 8px 0; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.vq-logarrow { color: var(--ink-mute); font-size: 12px; }
.vq-logmeta { margin-left: auto; font-size: 11px; color: var(--ink-mute); }
@media (max-width: 900px) { .vq-pipe { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 620px) {
  .vq-pipe { grid-template-columns: repeat(2, 1fr); }
  .vq-reg-row { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "no main" "no status" "amt amt"; column-gap: 10px; row-gap: 5px; align-items: start; position: relative; }
  .vq-reg-main { grid-area: main; }
  .vq-reg-title { white-space: normal; }
  .vq-reg-status { grid-area: status; }
  .vq-reg-amt { grid-area: amt; text-align: left; display: flex; gap: 8px; align-items: baseline; min-width: 0; }
  .vq-reg-row .dlr-x { position: absolute; top: 10px; right: 8px; }
}
.pv-phone .vq-pipe { grid-template-columns: repeat(2, 1fr); }
.pv-phone .vq-reg-row { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "no main" "no status" "amt amt"; column-gap: 10px; row-gap: 5px; align-items: start; position: relative; }
.pv-phone .vq-reg-main { grid-area: main; }
.pv-phone .vq-reg-title { white-space: normal; }
.pv-phone .vq-reg-status { grid-area: status; }
.pv-phone .vq-reg-amt { grid-area: amt; text-align: left; display: flex; gap: 8px; align-items: baseline; min-width: 0; }
.pv-phone .vq-reg-row .dlr-x { position: absolute; top: 10px; right: 8px; }
.lv-embedded { max-width: none; margin: 0; padding: 0; }
.lv-embedded .lv-filters > .btn-primary { display: inline-flex; }
.lv-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 18px; gap: 16px; flex-wrap: wrap; }
.pv-phone .lv-header { flex-direction: column; align-items: stretch; gap: 12px; }
.pv-phone .lv-header > div { min-width: 0; }
@media (max-width: 620px) {
  .fm-header, .lv-header { flex-direction: column; align-items: stretch; gap: 12px; }
  .fm-header > div, .lv-header > div { min-width: 0; }
}

/* Generic segmented toggle (used by Leave, Forms, etc.) */
.seg { display: inline-flex; flex-shrink: 0; background: var(--bg-sunk); border: 1px solid var(--border); border-radius: var(--radius); padding: 2px; gap: 2px; }
.seg button { padding: 6px 13px; border-radius: var(--radius-sm); border: none; background: transparent; font-size: 13px; font-weight: 600; color: var(--ink-soft); cursor: pointer; white-space: nowrap; transition: var(--t); }
.seg button:hover { color: var(--ink); }
.seg button.active { background: var(--steel); color: #fff; }
.lv-filters { display: flex; gap: 10px; align-items: center; margin-bottom: 16px; flex-wrap: wrap; }

/* Register — department groups */
.lv-deptgroup { margin-bottom: 20px; }
.lv-depthead { display: flex; align-items: center; gap: 10px; padding: 6px 4px; border-bottom: 2px solid var(--steel); margin-bottom: 6px; flex-wrap: wrap; }
.lv-depthead-title { font-weight: 700; font-size: 14px; letter-spacing: -0.01em; }
.lv-depthead-count { font-size: 11px; font-weight: 700; background: var(--bg-sunk); border-radius: 999px; padding: 1px 9px; color: var(--ink-soft); }
.lv-depthead-pending { margin-left: auto; font-size: 11px; font-weight: 700; color: #1d4677; background: #e3edf8; border-radius: 999px; padding: 2px 10px; }

.lv-row { width: 100%; display: flex; align-items: center; gap: 14px; padding: 12px 14px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 6px; cursor: pointer; text-align: left; transition: var(--t); }
.lv-row:hover { border-color: var(--border-strong); background: var(--steel-soft); }
.lv-row-main { flex: 1 1 auto; min-width: 0; }
.lv-row-name { font-weight: 700; font-size: 14px; }
.lv-row-sub { font-size: 12px; color: var(--ink-mute); margin-top: 1px; }
.lv-row-dates { text-align: right; flex-shrink: 0; }
.lv-row-range { font-size: 12.5px; font-weight: 600; }
.lv-row-days { font-size: 11px; color: var(--ink-mute); margin-top: 1px; }
.lv-pill { flex-shrink: 0; font-size: 11px; font-weight: 700; padding: 3px 11px; border-radius: 999px; white-space: nowrap; }
/* Phone: stack the leave row so the name column can't be crushed by the fixed siblings */
.pv-phone .lv-row { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "main pill" "dates pill"; column-gap: 10px; row-gap: 4px; align-items: start; }
.pv-phone .lv-row-main { grid-area: main; min-width: 0; }
.pv-phone .lv-row-name, .pv-phone .lv-row-sub { white-space: normal; overflow-wrap: anywhere; }
.pv-phone .lv-row-dates { grid-area: dates; text-align: left; min-width: 0; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.pv-phone .lv-pill { grid-area: pill; align-self: start; }
@media (max-width: 620px) {
  .lv-row { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "main pill" "dates pill"; column-gap: 10px; row-gap: 4px; align-items: start; }
  .lv-row-main { grid-area: main; min-width: 0; }
  .lv-row-name, .lv-row-sub { white-space: normal; overflow-wrap: anywhere; }
  .lv-row-dates { grid-area: dates; text-align: left; min-width: 0; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
  .lv-pill { grid-area: pill; align-self: start; }
}

/* Form */
.lv-form { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 22px 24px; }
.lv-form-head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 12px; border-bottom: 2px solid var(--steel); margin-bottom: 16px; }
.lv-form-title { font-weight: 700; font-size: 17px; letter-spacing: -0.01em; }
.lv-form-ref { font-size: 11px; color: var(--ink-mute); }
.lv-section-tag { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-mute); margin: 4px 0 10px; }
.lv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.lv-grid-3 { grid-template-columns: 1fr 1fr 1fr; }
.lv-field { display: flex; flex-direction: column; gap: 5px; }
.lv-field > span { font-size: 12px; font-weight: 600; color: var(--ink-soft); }
.lv-inp { width: 100%; border: 1px solid var(--border); border-radius: var(--radius); padding: 9px 11px; font-size: 13.5px; font-family: inherit; background: var(--bg-elev); color: var(--ink); }
.lv-inp:focus { outline: 2px solid var(--steel); outline-offset: -1px; border-color: var(--steel); }
textarea.lv-inp { resize: vertical; }
.lv-hint { font-size: 11.5px; color: var(--ink-mute); margin-top: 5px; }
.lv-uploadbtn { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; padding: 9px 14px; border-radius: 8px; border: 1px dashed var(--border); background: var(--bg-elev); color: var(--ink-soft); cursor: pointer; transition: .12s; width: fit-content; }
.lv-uploadbtn:hover { border-color: var(--steel); color: var(--steel); }
.lv-attach { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-elev); }
.lv-attach-icon { font-size: 18px; }
.lv-attach-name { flex: 1; font-size: 13px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lv-attach-link { font-size: 13px; font-weight: 600; color: var(--steel); text-decoration: none; }
.lv-attach-link:hover { text-decoration: underline; }
.lv-attach-thumb { display: block; max-width: 180px; max-height: 130px; border-radius: 8px; border: 1px solid var(--border); margin-top: 8px; }
.lv-typegrid { display: flex; flex-wrap: wrap; gap: 7px; }
.lv-typebtn { font-size: 12.5px; font-weight: 600; padding: 8px 13px; border-radius: 999px; border: 1px solid var(--border); background: var(--bg-elev); color: var(--ink-soft); cursor: pointer; transition: var(--t); white-space: nowrap; }
.lv-wrap .btn { white-space: nowrap; }
.lv-typebtn:hover { border-color: var(--border-strong); }
.lv-typebtn.active { background: var(--steel); color: #fff; border-color: var(--steel); }
.lv-form-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }
.lv-form-note { font-size: 11.5px; color: var(--ink-mute); margin-top: 12px; line-height: 1.5; }

/* Detail modal */
.lv-backdrop { position: fixed; inset: 0; background: rgba(15,18,24,0.5); display: grid; place-items: center; z-index: 200; padding: 24px; grid-template-columns: minmax(0, 1fr);}
.lv-modal { width: 520px; max-width: 100%; max-height: 90vh; overflow: auto; background: var(--bg-elev); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 22px 24px; }
.lv-modal-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--border); margin-bottom: 14px; }
.lv-modal-name { font-weight: 700; font-size: 18px; }
.lv-modal-dept { font-size: 11px; color: var(--ink-mute); margin-top: 2px; text-transform: uppercase; letter-spacing: 0.05em; }
.lv-detail { display: flex; flex-direction: column; gap: 1px; }
.lv-drow { display: grid; grid-template-columns: 120px 1fr; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--border); }
.lv-drow .k { font-size: 12px; color: var(--ink-mute); }
.lv-drow .v { font-size: 13.5px; color: var(--ink); }
.lv-approve { margin-top: 16px; padding: 14px; background: var(--bg-sunk); border-radius: var(--radius); }
.lv-approve-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 12px; }
.lv-modal-foot { display: flex; align-items: center; gap: 10px; margin-top: 16px; }

@media (max-width: 620px) {
  .lv-grid, .lv-grid-3 { grid-template-columns: 1fr; }
}

/* ============================================================
   Timesheet — Option A mobile day tiles
   ============================================================ */
.ts-days-a { display: flex; flex-direction: column; gap: 8px; }
.ts-a-day { border: 1px solid var(--border); border-radius: 12px; background: var(--bg-elev); overflow: hidden; transition: border-color .12s, box-shadow .12s; }
.ts-a-day.open { border-color: var(--steel); box-shadow: 0 2px 14px rgba(15,18,24,0.07); }
.ts-a-day.warn { border-color: #e8a4a8; }
.ts-a-head { width: 100%; display: flex; align-items: center; gap: 10px; padding: 13px 14px; background: none; border: 0; cursor: pointer; text-align: left; font-family: inherit; color: var(--ink); }
.ts-a-head:hover { background: var(--bg-sunk); }
.ts-a-dayname { display: flex; flex-direction: column; line-height: 1.1; min-width: 46px; font-weight: 700; font-size: 15px; }
.ts-a-dayname small { font-size: 11px; font-weight: 500; color: var(--ink-mute); margin-top: 2px; }
.ts-a-summary { flex: 1; min-width: 0; font-size: 13px; color: var(--ink-soft); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ts-a-summary strong { font-family: var(--font-mono); color: var(--ink); }
.ts-a-sum-jobs { color: var(--ink-mute); font-family: var(--font-mono); font-size: 12px; }
.ts-a-sum-leave { font-weight: 600; color: #7a5a12; background: #fdf3da; padding: 2px 9px; border-radius: 999px; }
.ts-a-sum-shift { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--steel); background: var(--steel-soft); padding: 2px 7px; border-radius: 999px; }
.ts-a-sum-empty { color: var(--ink-mute); font-style: italic; }
.ts-a-warn-dot { color: #b3242a; font-size: 13px; }
.ts-a-total { font-family: var(--font-mono); font-weight: 700; font-size: 19px; min-width: 40px; text-align: right; }
.ts-a-total small { font-size: 12px; font-weight: 500; color: var(--ink-mute); margin-left: 1px; }
.ts-a-chev { color: var(--ink-mute); font-size: 13px; width: 14px; text-align: center; }

.ts-a-body { padding: 4px 14px 16px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 12px; }
.ts-a-quick { display: flex; gap: 8px; flex-wrap: wrap; padding-top: 12px; }
.ts-a-qbtn { font-size: 13px; font-weight: 600; padding: 9px 15px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-elev); color: var(--ink-soft); cursor: pointer; min-height: 40px; }
.ts-a-qbtn:hover { border-color: var(--border-strong); }
.ts-a-qbtn.primary { background: var(--steel); color: #fff; border-color: var(--steel); }
.ts-a-qsel { flex: 1; font-size: 13px; font-weight: 600; padding: 9px 13px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-elev); color: var(--ink-soft); cursor: pointer; min-height: 40px; }

.ts-a-alloc { border: 1px solid var(--border); border-radius: 10px; padding: 11px; background: var(--bg-sunk); display: flex; flex-direction: column; gap: 9px; }
.ts-a-alloc-top { display: flex; gap: 8px; align-items: center; }
.ts-a-proj { flex: 1; min-width: 0; font-size: 13.5px; min-height: 42px; }
.ts-a-job { font-family: var(--font-mono); font-weight: 600; font-size: 14px; min-height: 42px; text-transform: uppercase; }
.ts-a-x { width: 38px; height: 38px; flex: none; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-elev); color: var(--ink-mute); cursor: pointer; font-size: 14px; }
.ts-a-x:hover { color: var(--bad); border-color: var(--bad); }
.ts-a-steppers { display: flex; gap: 10px; }
/* Editor footer: warning gets its own full-width line; buttons stay on one row */
.ts-foot-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; min-width: 0; }
.ts-foot-warn { flex: 1 1 100%; text-align: right; font-size: 12px; color: #b3242a; font-weight: 600; line-height: 1.35; }
.pv-phone .ts-foot-warn { text-align: left; }
@media (max-width: 720px) { .ts-foot-warn { text-align: left; } }
/* Workshop cards carry three steppers (NT / T½ / OT) — on a phone-width card
   they crush side by side, so let them wrap to full-width rows as needed. */
.ts-a-steppers.three { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.ts-a-step { flex: 1; display: flex; align-items: center; gap: 0; border: 1px solid var(--border); border-radius: 9px; overflow: hidden; background: var(--bg-elev); }
.ts-a-step.ot { opacity: 0.96; }
.ts-a-step-tag { font-size: 11px; font-weight: 800; letter-spacing: 0.04em; color: var(--ink-mute); padding: 0 8px; min-width: 30px; }
.ts-a-step.nt .ts-a-step-tag { color: var(--steel); }
.ts-a-step.ot .ts-a-step-tag { color: #b85515; }
.ts-a-step-btn { width: 40px; height: 44px; border: 0; border-left: 1px solid var(--border); background: var(--bg-sunk); font-size: 20px; font-weight: 600; color: var(--ink); cursor: pointer; user-select: none; }
.ts-a-step-btn:hover { background: var(--steel-soft); color: var(--steel); }
.ts-a-step-btn:active { background: var(--steel); color: #fff; }
.ts-a-step-val { width: 100%; border: 0; border-left: 1px solid var(--border); text-align: center; font-family: var(--font-mono); font-weight: 700; font-size: 17px; padding: 0; background: none; color: var(--ink); -moz-appearance: textfield; }
.ts-a-step-val::-webkit-outer-spin-button, .ts-a-step-val::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ts-a-step-val:focus { outline: 2px solid var(--steel); outline-offset: -2px; }

.ts-a-addjob { align-self: flex-start; font-size: 13px; min-height: 40px; }
.ts-a-dayopts { display: flex; flex-direction: column; gap: 10px; padding-top: 4px; border-top: 1px dashed var(--border); }
.ts-a-opt-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; font-weight: 600; color: var(--ink-soft); }
.ts-a-opt-row select { min-height: 40px; min-width: 160px; }
.ts-a-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.ts-a-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; padding: 8px 13px; border-radius: 999px; border: 1px solid var(--border); background: var(--bg-elev); color: var(--ink-soft); cursor: pointer; min-height: 40px; }
.ts-a-chip input { accent-color: var(--steel); width: 16px; height: 16px; }
.ts-a-chip.on { border-color: var(--steel); background: var(--steel-soft); color: var(--steel); }
.ts-a-applyweek { align-self: flex-start; font-size: 12.5px; color: var(--ink-soft); min-height: 38px; }

/* Desktop / Phone layout toggle */
.ts-viewtoggle { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: var(--bg-sunk); }
.ts-viewtoggle-btn { font-size: 12px; font-weight: 600; padding: 6px 11px; border: 0; border-left: 1px solid var(--border); background: none; color: var(--ink-soft); cursor: pointer; white-space: nowrap; }
.ts-viewtoggle-btn:first-child { border-left: 0; }
.ts-viewtoggle-btn:hover { background: var(--bg-elev); }
.ts-viewtoggle-btn.on { background: var(--steel); color: #fff; }

/* ============================================================
   SCHEDULE SETTINGS MODAL (couriers)
   ============================================================ */
.sched-settings-overlay {
  position: fixed; inset: 0; z-index: 250;
  background: rgba(15,18,24,0.5);
  display: grid; place-items: center; padding: 24px; grid-template-columns: minmax(0, 1fr);}
.sched-settings-modal {
  width: 760px; max-width: 100%; max-height: 88vh;
  display: flex; flex-direction: column;
  background: var(--bg-elev); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); overflow: hidden;
}
.sched-settings-head {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;
  padding: 18px 22px; border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.sched-settings-tabs {
  display: flex; gap: 4px; padding: 10px 22px 0; flex-shrink: 0;
  border-bottom: 1px solid var(--border);
}
.sched-settings-tab {
  appearance: none; background: transparent; border: none; cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 600; color: var(--ink-mute);
  padding: 9px 14px; border-radius: 8px 8px 0 0; margin-bottom: -1px;
  border-bottom: 2px solid transparent;
}
.sched-settings-tab:hover { color: var(--ink); background: var(--steel-soft); }
.sched-settings-tab.active { color: var(--ink); border-bottom-color: var(--ink); }
.sched-settings-body { padding: 18px 22px 22px; overflow-y: auto; }

/* Equipment settings — type list editor */
.eqset-grp { font-size: 13px; font-weight: 700; letter-spacing: .02em; }
.eqset-count {
  display: inline-block; min-width: 20px; padding: 1px 7px; margin-left: 6px;
  background: var(--steel-soft); color: var(--ink-mute);
  border-radius: 999px; font-size: 11px; font-weight: 600; text-align: center;
}
.eqset-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 7px 4px; border-bottom: 1px solid var(--border);
}
.eqset-name { font-size: 13px; color: var(--ink); display: flex; align-items: center; gap: 8px; }
.eqset-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.eqset-sel { height: 28px; padding: 2px 6px; font-size: 12px; }
.eqset-tag {
  font-size: 10.5px; font-weight: 600; color: var(--ink-mute);
  background: var(--steel-soft); padding: 1px 7px; border-radius: 999px;
}
.eqset-tag-new { color: #1f8a5b; background: rgba(31,138,91,.12); }
.eqset-locked { font-size: 11px; color: var(--ink-mute); font-style: italic; }
.eqset-del { font-size: 12px; padding: 3px 9px; color: #b3242a; }
.eqset-add { display: flex; gap: 8px; align-items: center; padding: 12px 4px 4px; }
.eqset-add .input { flex: 1; }
.eqset-note { font-size: 12px; color: var(--ink-mute); margin: 16px 4px 0; line-height: 1.5; }

/* Reusable collapsible section header (registers, settings, equipment…) */
.collapsible-head {
  display: flex; align-items: center; gap: 8px; width: 100%;
  text-align: left; font: inherit; cursor: pointer;
  background: var(--bg-sunk); border: none; border-radius: 0;
  -webkit-appearance: none; appearance: none;
}
.collapsible-head:hover { filter: brightness(0.97); }
.collapsible-head:focus-visible { outline: 2px solid var(--steel); outline-offset: -2px; }
.collapsible-chev {
  flex-shrink: 0; font-size: 11px; line-height: 1; color: inherit; opacity: 0.5;
  transition: transform 0.15s ease; transform: rotate(0deg);
}
.collapsible-chev.open { transform: rotate(90deg); }
.collapsible-head-inner { flex: 1; min-width: 0; }
.collapsible-body { animation: collapse-in 0.12s ease; }
@keyframes collapse-in { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 640px) {
  .sched-settings-overlay { padding: 0; }
  .sched-settings-modal { width: 100%; height: 100%; max-height: 100%; border-radius: 0; }
}

/* ============================================================
   Hours Tracking module
   ============================================================ */
.hr-wrap { max-width: 1240px; margin: 0 auto; padding: 24px; }

/* ============================================================
   FABRICATION TRACKER
   ============================================================ */
.fab-wrap { max-width: 1300px; margin: 0 auto; padding: 24px; }
.fab-score { display: flex; background: var(--bg-elev); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-sm); margin-bottom: 16px; overflow: hidden; }
.fab-sb-seg { flex: 1; font: inherit; text-align: left; background: none; border: none; border-right: 1px solid var(--border); padding: 13px 16px 11px; cursor: pointer; transition: var(--t); }
.fab-sb-seg:last-child { border-right: none; }
.fab-sb-seg:hover { background: var(--bg-sunk); }
.fab-sb-seg.on { background: var(--accent-soft); box-shadow: inset 0 -3px 0 var(--accent); }
.fab-sb-v { font-size: 24px; font-weight: 750; color: var(--ink); font-family: var(--font-mono); line-height: 1.05; letter-spacing: -0.02em; white-space: nowrap; }
.fab-sb-u { font-size: 12px; font-weight: 600; color: var(--ink-mute); letter-spacing: 0; }
.fab-sb-l { font-size: 10.5px; font-weight: 650; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-mute); margin-top: 4px; white-space: nowrap; }
.fab-sb-bad .fab-sb-v { color: #b3242a; }
.fab-sb-warn .fab-sb-v { color: #b8801d; }
.fab-sb-ok .fab-sb-v { color: #2f6b46; }
.fab-sb-bad.on { box-shadow: inset 0 -3px 0 #b3242a; background: rgba(179,36,42,0.06); }
.fab-sb-warn.on { box-shadow: inset 0 -3px 0 #e0a94a; background: rgba(224,169,74,0.09); }
.fab-sb-ok.on { box-shadow: inset 0 -3px 0 #5aa06f; background: rgba(90,160,111,0.08); }
/* Phone: the band can't fit six segments across — wrap to a 3-across grid so
   every segment stays visible and tappable. */
.pv-phone .fab-score { display: grid; grid-template-columns: repeat(3, 1fr); }
.pv-phone .fab-sb-seg { border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 10px 12px 9px; }
.pv-phone .fab-sb-seg:nth-child(3n) { border-right: none; }
.pv-phone .fab-sb-seg:nth-child(n+4) { border-bottom: none; }
.pv-phone .fab-sb-l { white-space: normal; line-height: 1.25; }
.pv-phone .fab-sb-v { font-size: 20px; }
@media (max-width: 720px) {
  .fab-score { display: grid; grid-template-columns: repeat(3, 1fr); }
  .fab-sb-seg { border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 10px 12px 9px; }
  .fab-sb-seg:nth-child(3n) { border-right: none; }
  .fab-sb-seg:nth-child(n+4) { border-bottom: none; }
  .fab-sb-l { white-space: normal; line-height: 1.25; }
  .fab-sb-v { font-size: 20px; }
}
.fab-cards { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; margin-bottom: 18px; }
.fab-card { background: var(--bg-elev); border: 1px solid var(--border); border-radius: 12px; padding: 13px 15px; box-shadow: var(--shadow-sm); text-align: left; }
/* Clickable summary cards double as status filters */
.fab-card-btn { font: inherit; cursor: pointer; transition: var(--t); position: relative; }
.fab-card-btn:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.fab-card-btn.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset, var(--shadow-md); background: var(--accent-soft); }
.fab-card-ton { background: var(--bg-sunk); }
.fab-card-v { font-size: 26px; font-weight: 750; letter-spacing: -0.02em; color: var(--ink); line-height: 1.1; }
.fab-card-u { font-size: 15px; font-weight: 600; color: var(--ink-mute); margin-left: 1px; }
.fab-card-l { font-size: 11.5px; color: var(--ink-mute); margin-top: 3px; }
.fab-card.alert { border-color: #c0392b; background: rgba(192,57,43,0.05); }
.fab-card.alert .fab-card-v { color: #c0392b; }
.fab-card.warn { border-color: #e0a94a; background: rgba(224,169,74,0.07); }
.fab-card.warn .fab-card-v { color: #b8801d; }
.fab-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.fab-tabs { display: inline-flex; background: var(--bg-sunk); border: 1px solid var(--border); border-radius: 8px; padding: 3px; }
.fab-tab { border: none; background: transparent; font: inherit; font-size: 13px; font-weight: 600; color: var(--ink-soft); padding: 6px 14px; border-radius: 6px; cursor: pointer; }
.fab-tab:hover { color: var(--ink); }
.fab-tab.on { background: var(--accent); color: #fff; }
.fab-tb-sp { flex: 1; }
.fab-scope { display: inline-flex; gap: 2px; background: var(--bg-sunk); border: 1px solid var(--border); border-radius: 999px; padding: 3px; flex-shrink: 0; }
.fab-scope button { border: none; background: transparent; font: inherit; font-size: 12px; font-weight: 600; color: var(--ink-soft); padding: 5px 13px; border-radius: 999px; cursor: pointer; transition: var(--t); white-space: nowrap; }
.fab-scope button:hover { color: var(--ink); }
.fab-scope button.on { background: var(--accent); color: #fff; }
.pv-phone .fab-scope { width: 100%; } .pv-phone .fab-scope button { flex: 1; }
.fab-search { min-width: 210px; }
.fab-legend-unused { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; font-size: 11.5px; color: var(--ink-soft); margin-bottom: 14px; padding: 8px 12px; background: var(--bg-sunk); border-radius: 8px; }
.fab-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.fab-legend-dot { width: 10px; height: 10px; border-radius: 3px; }
.fab-legend-note { color: var(--ink-mute); font-style: italic; margin-left: auto; }
.fab-empty { text-align: center; color: var(--ink-mute); padding: 40px; font-style: italic; }
/* group header */
.fab-grp-head { display: flex; align-items: baseline; gap: 10px; }
.fab-grp-name { font-weight: 700; font-size: 15px; color: var(--ink); }
.fab-grp-meta { font-size: 12px; color: var(--ink-mute); }
.fab-grp-late { font-size: 11px; font-weight: 700; color: #c0392b; background: rgba(192,57,43,0.1); padding: 1px 8px; border-radius: 999px; }
/* Due chip — bold + scannable */
.fab-due { flex-shrink: 0; width: 84px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; padding: 6px 4px; border: 1px solid; border-left-width: 4px; border-radius: 8px; text-align: center; }
.fab-due-dow { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-mute); }
.fab-due-dm { font-size: 15px; font-weight: 750; color: var(--ink); line-height: 1.1; }
.fab-due-days { font-size: 10px; font-weight: 700; margin-top: 1px; }
/* Compact stage dots */
.fab-dots { display: flex; gap: 3px; flex-shrink: 0; }
.fab-dot { width: 34px; height: 26px; border: 1px solid; border-radius: 6px; cursor: default; padding: 0; display: flex; align-items: center; justify-content: center; opacity: 0.95; }
.fab-dot.editable { cursor: pointer; }
.fab-dot.editable:hover { box-shadow: 0 0 0 2px var(--accent-soft); }
.fab-dot-na { opacity: 0.4; }
.fab-dot-lbl { font-size: 8.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.01em; color: #fff; text-shadow: 0 1px 1px rgba(0,0,0,0.25); }
.fab-dot-na .fab-dot-lbl { color: var(--ink-mute); text-shadow: none; }
/* Compact single-line row */
.fab-row { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-bottom: 1px solid var(--border); cursor: pointer; }
.fab-row:hover { background: var(--bg-sunk); }
.fab-row-late { box-shadow: inset 3px 0 0 #c0392b; }
.fab-row-id { flex: 1; min-width: 0; }
.fab-row-line1 { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.fab-row-job { font-weight: 700; font-size: 13px; color: var(--ink); flex-shrink: 0; }
.fab-row-proj { font-size: 11px; color: var(--accent); font-weight: 600; flex-shrink: 0; }
.fab-row-desc { font-size: 13px; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fab-row-line2 { display: flex; gap: 8px; margin-top: 2px; font-size: 11px; color: var(--ink-mute); }
.fab-row-ton { font-weight: 600; color: var(--ink-soft); }
.fab-row-cmt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-style: italic; }
.fab-row-pctwrap { width: 92px; flex-shrink: 0; display: flex; flex-direction: column; gap: 3px; }
.fab-row-pct { font-size: 12px; font-weight: 700; color: var(--ink); text-align: right; }
.fab-row-x { flex-shrink: 0; }
.fab-icon { width: 26px; height: 26px; border: 1px solid var(--border); background: var(--bg-elev); border-radius: 6px; cursor: pointer; color: var(--ink-soft); font-size: 12px; }
.fab-icon:hover { background: var(--bg-sunk); color: var(--ink); }
.fab-bar { height: 6px; background: var(--bg-sunk); border-radius: 999px; overflow: hidden; }
.fab-bar-fill { height: 100%; border-radius: 999px; transition: width 0.3s; }
/* Board */
.fab-board { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; align-items: start; }
.fab-col { background: var(--bg-sunk); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.fab-col-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 10px 12px; background: var(--bg-elev); border-top: 3px solid; border-bottom: 1px solid var(--border); }
.fab-col-name { font-weight: 700; font-size: 13.5px; }
.fab-col-count { font-size: 11px; color: var(--ink-mute); font-weight: 600; }
.fab-col-body { padding: 8px; display: flex; flex-direction: column; gap: 8px; max-height: calc(100vh - 320px); overflow-y: auto; }
.fab-col-empty { text-align: center; color: var(--ink-mute); padding: 14px; font-size: 20px; }
.fab-bcard { background: var(--bg-elev); border: 1px solid var(--border); border-radius: 9px; box-shadow: var(--shadow-sm); padding: 9px 10px; display: flex; flex-direction: column; gap: 6px; cursor: pointer; }
.fab-bcard:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); }
.fab-bcard-top { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
.fab-bcard-job { font-weight: 700; font-size: 13px; color: var(--ink); }
.fab-bcard-due { font-size: 12px; font-weight: 750; white-space: nowrap; }
.fab-bcard-desc { font-size: 12.5px; color: var(--ink-soft); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fab-bcard-meta { font-size: 11px; color: var(--ink-mute); }
/* phone */
.pv-phone .fab-cards { grid-template-columns: repeat(3, 1fr); }
.pv-phone .fab-board { grid-template-columns: 1fr; }
.pv-phone .fab-col-body { max-height: none; }
.pv-phone .fab-dots { flex-wrap: wrap; }
@media (max-width: 1000px) {
  .fab-board { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .fab-cards { grid-template-columns: repeat(3, 1fr); }
  .fab-form-grid, .fab-stage-editrow { grid-template-columns: 1fr 1fr; }
  .fab-row { flex-wrap: wrap; }
  .fab-row-pctwrap { width: 70px; }
}
@media (max-width: 620px) {
  .fab-board { grid-template-columns: 1fr; }
  .fab-col-body { max-height: none; }
}
/* ===== Checklist field (Yes / No / N-A per item) ===== */
.chk-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.chk-count { font-size: 11.5px; font-weight: 600; color: var(--ink-mute); }
.chk-bulk { display: flex; gap: 6px; }
.chk-all { border: 1px solid var(--border); background: var(--bg-elev); color: var(--ink-soft); font: inherit; font-size: 11.5px; font-weight: 600; padding: 4px 11px; border-radius: 999px; cursor: pointer; }
.chk-all:hover { border-color: var(--border-strong); color: var(--ink); }
.chk-list { display: flex; flex-direction: column; gap: 2px; border: 1px solid var(--border); border-radius: var(--radius); padding: 6px; background: var(--bg-sunk); }
.chk-row { display: flex; align-items: center; gap: 10px; padding: 7px 9px; border-radius: 6px; }
.chk-row:hover { background: var(--bg-elev); }
.chk-row.answered { background: var(--bg-elev); }
.chk-row.flag { box-shadow: inset 3px 0 0 #b3242a; }
.chk-lbl { flex: 1; min-width: 0; font-size: 12.5px; line-height: 1.35; color: var(--ink-soft); }
.chk-row.answered .chk-lbl { color: var(--ink); }
.chk-choices { display: flex; gap: 3px; flex-shrink: 0; }
.chk-c { border: 1px solid var(--border); background: var(--bg-elev); color: var(--ink-mute); font: inherit; font-size: 11px; font-weight: 700; padding: 4px 9px; border-radius: 6px; cursor: pointer; min-width: 38px; }
.chk-c:hover { border-color: var(--border-strong); color: var(--ink); }
.chk-c-yes.on { background: #1f7a4d; border-color: #1f7a4d; color: #fff; }
.chk-c-no.on { background: #b3242a; border-color: #b3242a; color: #fff; }
.chk-c-na.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent, #fff); }
.fm-chk-count { font-size: 11.5px; font-weight: 700; color: var(--ink-mute); margin-bottom: 6px; }
.fm-chk-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.fm-render-full { display: block !important; }
.fm-render-full .fm-render-k { margin-bottom: 8px; }
.fm-render-full .fm-render-v { width: 100%; max-width: none; }
.fm-chk-cell { display: flex; align-items: baseline; gap: 10px; padding: 5px 0; border-top: 1px solid var(--border); font-size: 12px; line-height: 1.4; }
.fm-chk-item { flex: 1; min-width: 0; color: var(--ink); }
.fm-chk-mark { flex-shrink: 0; font-weight: 700; font-size: 11px; }
.fm-chk-mark.m-yes { color: #1f7a4d; }
.fm-chk-mark.m-no { color: #b3242a; }
.fm-chk-mark.m-na { color: var(--ink-mute); }
.fm-chk-cell.fm-chk-no .fm-chk-item { color: #b3242a; font-weight: 600; }
@media (max-width: 700px) { .fm-chk-grid { grid-template-columns: 1fr; } }
.pv-phone .fm-chk-grid { grid-template-columns: 1fr; }
@media (max-width: 700px) { .chk-row { flex-wrap: wrap; gap: 6px; } .chk-choices { margin-left: auto; } }
.pv-phone .chk-row { flex-wrap: wrap; gap: 6px; }
.pv-phone .chk-choices { margin-left: auto; }

/* ===== Attendee multi-select ===== */
.att-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 7px; align-items: center; }
.att-clear { border: none; background: transparent; color: var(--ink-mute); font: inherit; font-size: 11px; text-decoration: underline; cursor: pointer; padding: 2px 4px; }
.att-clear:hover { color: var(--bad); }
.att-toggle { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; text-align: left; padding: 9px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-elev); color: var(--ink-soft); font: inherit; font-size: 13px; cursor: pointer; }
.att-toggle:hover { border-color: var(--border-strong); color: var(--ink); }
.att-chev { font-size: 11px; color: var(--ink-mute); }
.att-panel { margin-top: 7px; border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--bg-elev); padding: 9px; box-shadow: var(--shadow-md); }
.att-search { width: 100%; margin-bottom: 7px; font-size: 13px; }
.att-all { display: block; width: 100%; text-align: left; padding: 7px 9px; margin-bottom: 5px; border: none; border-radius: 6px; background: var(--bg-sunk); color: var(--ink-soft); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.att-all:hover { color: var(--ink); }
.att-list { max-height: 230px; overflow-y: auto; -webkit-overflow-scrolling: touch; display: flex; flex-direction: column; gap: 1px; }
.att-opt { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; padding: 8px 9px; border: none; border-radius: 6px; background: transparent; color: var(--ink); font: inherit; font-size: 13px; cursor: pointer; }
.att-opt:hover { background: var(--bg-sunk); }
.att-opt.on { background: var(--accent-soft); font-weight: 600; }
.att-box { font-size: 14px; flex-shrink: 0; }
.att-none { padding: 10px; font-size: 12px; color: var(--ink-mute); font-style: italic; }
.att-done { width: 100%; justify-content: center; margin-top: 8px; }

/* ===== Phone: wide tables, tab strips & toolbars ===== */
/* Wrappers must NOT clip — let their toolbars wrap instead, or nothing is reachable. */
.pv-phone .runsheet-wrap, .pv-phone .var-paper, .pv-phone .hr-wrap { max-width: 100%; overflow-x: visible; }
.pv-phone .runsheet-paper, .pv-phone .var-wrap { max-width: 100%; }
/* Rates register: stack each row into a card so the Open button is reachable */
.pv-phone .ra-reg-head { display: none; }
.pv-phone .ra-reg { overflow: visible; }
.pv-phone .ra-reg-row { grid-template-columns: 1fr auto; gap: 4px 10px; padding: 12px 14px; align-items: start; }
.pv-phone .ra-reg-row > *:nth-child(1) { grid-column: 1; grid-row: 1; font-weight: 650; }
.pv-phone .ra-reg-row > *:nth-child(2) { grid-column: 2; grid-row: 1; text-align: right !important; }
.pv-phone .ra-reg-row > *:nth-child(3) { grid-column: 1 / -1; text-align: left !important; }
.pv-phone .ra-reg-row > *:nth-child(4) { grid-column: 1 / -1; text-align: left !important; }
.pv-phone .ra-reg-row .btn { width: 100%; justify-content: center; }
.pv-phone .hr-table input, .pv-phone .var-paper input, .pv-phone .dlr-inp { min-width: 0; }
/* Wide data tables: scroll the CONTAINER sideways (never restyle the table itself,
   which breaks column layout). */
.pv-phone .collapsible-body,
.pv-phone .eq-table-scroll,
.pv-phone .runsheet-run,
.pv-phone .hr-tablewrap,
.pv-phone .rates-tablewrap,
.pv-phone .dk-tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
.pv-phone .runsheet-paper { overflow-x: hidden; max-width: 100%; }
.pv-phone .fab-tl-scroll { max-width: 100%; overflow-x: auto; }
.pv-phone .fab-tl { min-width: max-content; }
/* Tab strips scroll sideways instead of overflowing */
.pv-phone .hr-tabs,
.pv-phone .eq-tabs,
.pv-phone .admin-tabs,
.pv-phone .fab-tabs,
.pv-phone .dk-tabs { display: flex; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; scrollbar-width: none; }
.pv-phone .hr-tabs::-webkit-scrollbar,
.pv-phone .eq-tabs::-webkit-scrollbar,
.pv-phone .admin-tabs::-webkit-scrollbar,
.pv-phone .fab-tabs::-webkit-scrollbar,
.pv-phone .dk-tabs::-webkit-scrollbar { display: none; }
.pv-phone .hr-tab, .pv-phone .eq-tab, .pv-phone .admin-tab, .pv-phone .fab-tab, .pv-phone .dk-tab { flex: 0 0 auto; white-space: nowrap; }
/* Toolbars & header rows wrap instead of running off the edge */
.pv-phone .hr-wrap, .pv-phone .eq-wrap, .pv-phone .rates-wrap,
.pv-phone .fab-wrap, .pv-phone .dl-wrap, .pv-phone .var-wrap,
.pv-phone .fx-wrap, .pv-phone .rs-wrap { padding-left: 12px; padding-right: 12px; max-width: 100%; }
/* Header/action clusters wrap so buttons stay reachable */
.pv-phone .eq-header, .pv-phone .eq-header > div,
.pv-phone .dl-header > div, .pv-phone .ra-header, .pv-phone .ra-header > div,
.pv-phone .var-header, .pv-phone .var-header > div,
.pv-phone .hr-header, .pv-phone .hr-header > div { flex-wrap: wrap; }
.pv-phone .eq-header .btn, .pv-phone .dl-header .btn,
.pv-phone .ra-header .btn, .pv-phone .var-header .btn { white-space: normal; }
.pv-phone .hr-toolbar, .pv-phone .eq-toolbar, .pv-phone .rates-toolbar,
.pv-phone .fab-toolbar, .pv-phone .fx-toolbar, .pv-phone .rs-toolbar,
.pv-phone .var-toolbar, .pv-phone .dl-controls { flex-wrap: wrap; gap: 8px; }
.pv-phone .hr-toolbar > *, .pv-phone .eq-toolbar > *, .pv-phone .rates-toolbar > *,
.pv-phone .fab-toolbar > *, .pv-phone .fx-toolbar > *, .pv-phone .var-toolbar > * { min-width: 0; max-width: 100%; }
/* Toolbar dropdowns must sit on one row — the global `.select { width:100% }`
   makes each a full-width flex item, so every filter eats its own line. Same
   fix the supplier / job-number toolbars already use. */
.hr-toolbar .select, .eq-toolbar .select, .fab-toolbar .select,
.rates-toolbar .select, .fx-toolbar .select, .var-toolbar .select {
  width: auto; min-width: 170px; flex: 0 0 auto;
}
.pv-phone .hr-toolbar .select, .pv-phone .eq-toolbar .select,
.pv-phone .fab-toolbar .select, .pv-phone .rates-toolbar .select,
.pv-phone .fx-toolbar .select { width: auto !important; flex: 1 1 45%; min-width: 0; }
.pv-phone .hr-toolbar .input, .pv-phone .eq-toolbar .input,
.pv-phone .fab-toolbar .input, .pv-phone .fx-toolbar .input,
.pv-phone .fab-search { width: auto !important; flex: 1 1 100%; min-width: 0; }
/* Stat/summary card grids go two-up */
.pv-phone .hr-cards, .pv-phone .eq-stats, .pv-phone .fab-summary,
.pv-phone .missing-stats, .pv-phone .fx-stats { grid-template-columns: repeat(2, 1fr) !important; }
/* Nothing inside the page body may exceed the frame */
.pv-phone .main { overflow-x: hidden; }
.pv-phone .main img, .pv-phone .main canvas, .pv-phone .main svg { max-width: 100%; }

/* ===== Missing items / Fabrication errors — row layout ===== */
.mi-row-flags { width: 150px; flex-shrink: 0; display: flex; flex-direction: column; gap: 3px; }
.mi-tag-crit { font-size: 9px; font-weight: 800; color: #b3242a; letter-spacing: 0.04em; }
.mi-tag-redeliv { font-size: 9px; font-weight: 700; color: #7a5ad0; letter-spacing: 0.04em; }
.mi-row-job { width: 96px; flex-shrink: 0; padding-right: 8px; font-family: var(--font-mono); font-weight: 700; font-size: 12px; white-space: nowrap; }
.mi-row-jobmark { font-size: 11px; color: var(--ink-mute); font-weight: 600; }
.mi-row-main { flex: 1; min-width: 0; }
.mi-row-desc { font-weight: 500; font-size: 14px; }
.mi-row-qty { color: var(--ink-mute); margin-left: 8px; font-family: var(--font-mono); font-size: 12px; }
.mi-row-mark { margin-left: 8px; font-size: 11px; background: var(--bg-sunk); padding: 1px 6px; border-radius: 3px; }
.mi-row-sub { font-size: 11px; color: var(--ink-mute); margin-top: 2px; }
.mi-row-by { text-align: right; font-size: 11px; color: var(--ink-mute); min-width: 130px; }
.mi-row-byname { font-weight: 500; color: var(--ink-soft); font-size: 12px; }
.mi-row-photo { width: 34px; height: 34px; object-fit: cover; border-radius: 5px; border: 1px solid var(--border); flex-shrink: 0; }
.mi-row-chev { font-size: 14px; color: var(--ink-mute); }
/* Phone: reflow the row into a stacked card */
.pv-phone .missing-row,
.pv-phone .missing-row { flex-wrap: wrap; align-items: flex-start; gap: 6px 8px; padding: 12px; position: relative; }
.pv-phone .mi-row-flags { width: auto; flex: 0 0 auto; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 6px; order: 1; }
.pv-phone .mi-row-job { width: auto; order: 2; margin-left: auto; padding-right: 22px; text-align: right; }
.pv-phone .mi-row-jobmark { text-align: right; }
.pv-phone .mi-row-main { flex: 1 1 100%; order: 3; }
.pv-phone .mi-row-desc { font-size: 13.5px; }
.pv-phone .mi-row-sub { white-space: normal; overflow-wrap: anywhere; line-height: 1.45; }
.pv-phone .mi-row-by { flex: 1 1 auto; order: 4; text-align: left; min-width: 0; display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; }
.pv-phone .mi-row-photo { order: 5; margin-left: auto; }
.pv-phone .mi-row-chev { position: absolute; top: 12px; right: 10px; }
.pv-phone .missing-toolbar { flex-direction: column; align-items: stretch; gap: 10px; }
.pv-phone .missing-toolbar > div { width: 100%; }
.pv-phone .missing-filter { flex-wrap: wrap; gap: 6px; }
.pv-phone .missing-filter .select { flex: 1 1 45%; width: auto !important; min-width: 0; }
.pv-phone .missing-stats { grid-template-columns: repeat(2, 1fr); }
.pv-phone .drawer { width: 100% !important; max-width: 100%; }
@media (max-width: 700px) {
  .missing-row { flex-wrap: wrap; align-items: flex-start; gap: 6px 8px; padding: 12px; position: relative; }
  .mi-row-flags { width: auto; flex: 0 0 auto; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 6px; order: 1; }
  .mi-row-job { width: auto; order: 2; margin-left: auto; padding-right: 22px; text-align: right; }
  .mi-row-main { flex: 1 1 100%; order: 3; }
  .mi-row-sub { white-space: normal; overflow-wrap: anywhere; line-height: 1.45; }
  .mi-row-by { flex: 1 1 auto; order: 4; text-align: left; min-width: 0; display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; }
  .mi-row-photo { order: 5; margin-left: auto; }
  .mi-row-chev { position: absolute; top: 12px; right: 10px; }
  .missing-filter .select { flex: 1 1 45%; width: auto !important; min-width: 0; }
}

/* ===== Phone delivery schedule (day strip + card list) ===== */
.phday { padding: 0 2px 40px; }
.phday-nav { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.phday-wk { width: 30px; height: 30px; flex-shrink: 0; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-elev); color: var(--ink-soft); font-size: 15px; cursor: pointer; }
.phday-wk:hover { border-color: var(--border-strong); color: var(--ink); }
.phday-wklabel { flex: 1; text-align: center; font-size: 12px; font-weight: 650; color: var(--ink); }
.phday-strip { display: flex; gap: 5px; margin-bottom: 12px; overflow-x: auto; padding-bottom: 3px; -webkit-overflow-scrolling: touch; }
.phday-tab { flex: 1 1 0; min-width: 44px; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px 6px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-elev); cursor: pointer; transition: var(--t); }
.phday-dow { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-mute); }
.phday-num { font-size: 17px; font-weight: 700; color: var(--ink); font-family: var(--font-mono); line-height: 1.1; }
.phday-dot { font-size: 10px; font-weight: 700; min-width: 17px; padding: 0 4px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-ink); }
.phday-dot.empty { background: transparent; color: var(--ink-mute); font-weight: 400; }
.phday-tab.today { border-color: var(--accent); }
.phday-tab.on { background: var(--accent); border-color: var(--accent); }
.phday-tab.on .phday-dow, .phday-tab.on .phday-num { color: #fff; }
.phday-tab.on .phday-dot { background: rgba(255,255,255,0.25); color: #fff; }
.phday-mine { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; width: 100%; text-align: left; padding: 10px 12px; margin-bottom: 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-elev); font-size: 13px; font-weight: 600; color: var(--ink); cursor: pointer; }
.phday-mine.on { border-color: var(--accent); background: var(--accent-soft); }
.phday-mine-check { font-size: 15px; }
.phday-mine-sub { width: 100%; font-size: 11px; font-weight: 400; color: var(--ink-mute); }
.phday-run { margin-bottom: 16px; }
.phday-runhead { display: flex; align-items: center; gap: 7px; margin-bottom: 7px; }
.phday-runbar { width: 4px; height: 15px; border-radius: 2px; flex-shrink: 0; }
.phday-runname { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink); }
.phday-runtime { font-size: 10.5px; color: var(--ink-mute); }
.phday-runcount { margin-left: auto; font-size: 11px; font-weight: 700; font-family: var(--font-mono); color: var(--ink-mute); }
.phcard { border: 1px solid var(--border); border-radius: 10px; background: var(--bg-elev); margin-bottom: 8px; overflow: hidden; box-shadow: var(--shadow-sm); }
.phcard.open { border-color: var(--border-strong); box-shadow: var(--shadow-md); }
.phcard-main { display: block; width: 100%; text-align: left; padding: 11px 12px; border: none; background: transparent; cursor: pointer; font: inherit; }
.phcard-l1 { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.phcard-job { font-size: 14px; font-weight: 700; color: var(--ink); }
.phcard-status { margin-left: auto; font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: #fff; padding: 2px 7px; border-radius: 999px; white-space: nowrap; }
.phcard-route { display: flex; align-items: baseline; gap: 5px; font-size: 12.5px; color: var(--ink-soft); line-height: 1.4; flex-wrap: wrap; }
.phcard-from, .phcard-to { min-width: 0; }
.phcard-to { font-weight: 650; color: var(--ink); }
.phcard-arrow { color: var(--ink-mute); flex-shrink: 0; }
.phcard-tbc { color: var(--bad); font-style: italic; }
.phcard-l3 { display: flex; align-items: center; gap: 7px; margin-top: 6px; flex-wrap: wrap; }
.phcard-courier { font-size: 11px; font-weight: 700; }
.phcard-courier.internal { color: #1f7a4d; }
.phcard-courier.external { color: #b3242a; }
.phcard-nocourier { font-size: 11px; font-weight: 600; color: var(--ink-mute); font-style: italic; }
.phcard-time { font-size: 11px; font-family: var(--font-mono); color: var(--ink-soft); }
.phcard-req { font-size: 9.5px; font-weight: 700; text-transform: uppercase; color: #b3242a; background: #fdecee; border-radius: 4px; padding: 1px 5px; }
.phcard-merged { font-size: 9.5px; font-weight: 700; text-transform: uppercase; color: #5a4bb8; background: #eeeafb; border-radius: 4px; padding: 1px 5px; }
.phcard-chev { margin-left: auto; font-size: 11px; color: var(--ink-mute); }
.phcard-detail { padding: 0 12px 12px; border-top: 1px solid var(--border); }
.phcard-items { font-size: 13px; color: var(--ink); padding: 10px 0 8px; line-height: 1.45; }
.phcard-dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0 0 12px; font-size: 12px; }
.phcard-dl dt { color: var(--ink-mute); font-weight: 600; white-space: nowrap; }
.phcard-dl dd { margin: 0; color: var(--ink); min-width: 0; overflow-wrap: anywhere; }
.phcard-open { width: 100%; justify-content: center; }

/* ===== Quarter-hour time picker + intake phone tidy ===== */
.qtime { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.qtime-sel { min-width: 64px; }
.qtime-preload { flex-shrink: 0; white-space: nowrap; }
.copytime { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--ink-soft); margin-bottom: 6px; cursor: pointer; padding: 6px 9px; background: var(--bg-sunk); border: 1px solid var(--border); border-radius: 8px; }
.copytime input { width: 15px; height: 15px; flex-shrink: 0; accent-color: var(--accent); cursor: pointer; }
.copytime strong { color: var(--ink); white-space: nowrap; }
/* Phone: one field per line, time selects share a full-width row */
.pv-phone .field-row { grid-template-columns: 1fr; gap: 0; }
.pv-phone .qtime { flex-wrap: nowrap; }
.pv-phone .qtime-sel { flex: 1 1 0; min-width: 0; }
.pv-phone .qtime-preload { flex: 0 0 auto; }
.pv-phone .intake-card { padding: 16px 14px 14px; }
.pv-phone .intake-wrap { padding: 16px 12px 60px; }
.pv-phone .pill-group { flex-wrap: wrap; }
.pv-phone .section-title { flex-wrap: wrap; }
@media (max-width: 640px) {
  .qtime { flex-wrap: nowrap; }
  .qtime-sel { flex: 1 1 0; min-width: 0; }
}

/* ===== Timesheet week picker (this week / last week) ===== */
.ts-headrow { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.ts-headrow > * { min-width: 0; }
.ts-weekpick { display: inline-flex; gap: 3px; background: var(--bg-sunk); border: 1px solid var(--border); border-radius: 999px; padding: 3px; }
.ts-weekpick-btn { display: flex; flex-direction: column; align-items: center; gap: 0; border: none; background: transparent; font: inherit; font-size: 12px; font-weight: 600; color: var(--ink-soft); padding: 5px 12px; border-radius: 999px; cursor: pointer; line-height: 1.25; transition: var(--t); }
.ts-weekpick-btn small { font-size: 9.5px; font-weight: 500; opacity: 0.75; }
.ts-weekpick-btn:hover { color: var(--ink); }
.ts-weekpick-btn.on { background: var(--accent); color: #fff; }
.ts-weekpick-btn.on small { opacity: 0.85; }
@media (max-width: 620px) { .ts-weekpick { width: 100%; } .ts-weekpick-btn { flex: 1; } .ts-headrow { width: 100%; } .ts-headrow > .btn-primary { flex: 1; } }
.pv-phone .ts-weekpick { width: 100%; }
.pv-phone .ts-weekpick-btn { flex: 1; }
.pv-phone .ts-headrow { width: 100%; }
.pv-phone .ts-headrow > .btn-primary { flex: 1; }
.pv-phone .ts-headrow > .select { flex: 1; width: auto !important; }

/* ===== Labour forecast import ===== */.fc-modal { width: 860px; max-width: 100%; }
.fc-body { padding: 18px 22px; max-height: calc(100vh - 240px); overflow: auto; }
.fc-hint { font-size: 11.5px; color: var(--ink-mute); margin-bottom: 6px; line-height: 1.45; }
.fc-paste { font-family: var(--font-mono); font-size: 12px; width: 100%; }
.fc-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 10px; }
.fc-summary { display: flex; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.fc-stat { border: 1px solid var(--border); border-radius: 10px; padding: 9px 14px; background: var(--bg-sunk); display: flex; align-items: baseline; gap: 6px; }
.fc-stat b { font-size: 18px; font-family: var(--font-mono); color: var(--ink); }
.fc-stat span { font-size: 11px; color: var(--ink-mute); text-transform: uppercase; letter-spacing: 0.04em; }
.fc-stat.warn { border-color: #e0a94a; background: #fdf6e8; } .fc-stat.warn b { color: #9a6a10; }
.fc-stat.ok { border-color: #8fbf9f; background: #f1f8f3; } .fc-stat.ok b { color: #1f7a4d; }
.fc-flagbox { border: 1px solid #e0a94a; background: #fdf6e8; border-radius: 10px; padding: 12px 14px; margin-bottom: 14px; }
.fc-flagbox-title { font-size: 12px; font-weight: 700; color: #9a6a10; margin-bottom: 8px; }
.fc-flagrow { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-top: 1px solid #ecd9b0; }
.fc-flagrow:first-of-type { border-top: none; }
.fc-flag-raw { flex: 1; min-width: 0; font-size: 13px; color: var(--ink); display: flex; flex-direction: column; }
.fc-flag-raw small { font-size: 10.5px; color: var(--ink-mute); }
.fc-flagrow .select { width: 240px; flex-shrink: 0; font-size: 12.5px; }
.fc-tablewrap { border: 1px solid var(--border); border-radius: 10px; overflow: auto; max-height: 340px; }
.fc-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.fc-table th, .fc-table td { padding: 7px 9px; text-align: center; border-bottom: 1px solid var(--border); border-left: 1px solid var(--border); white-space: nowrap; }
.fc-table th { position: sticky; top: 0; background: var(--bg-sunk); font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-mute); font-weight: 700; z-index: 1; }
.fc-table th.l, .fc-table td.l { text-align: left; border-left: none; font-weight: 600; color: var(--ink); position: sticky; left: 0; background: var(--bg-elev); }
.fc-table th.l { background: var(--bg-sunk); z-index: 2; }
.fc-table td.fc-leave { color: #7a5ad0; font-style: italic; }
.fc-table td.fc-empty { color: var(--ink-mute); }
.fc-table td.fc-fixed { background: #fdf6e8; }
.fc-row-bad td.l { color: #b3242a; }
.fc-unmapped { text-decoration: underline dotted; }
.fc-was { color: var(--ink-mute); font-weight: 400; }
.fc-night { display: inline-block; margin-left: 5px; font-size: 9px; font-weight: 700; text-transform: uppercase; background: #2c3140; color: #fff; border-radius: 3px; padding: 1px 4px; }
.fc-note { font-size: 11.5px; color: #b85515; margin-top: 8px; }
@media (max-width: 620px) {
  .fc-flagrow { flex-wrap: wrap; }
  .fc-flagrow .select { width: 100%; }
}

/* ===== Missing items — searchable delivery picker ===== */
.mi-dsearch { position: relative; display: flex; align-items: center; }
.mi-dsearch-ico { position: absolute; left: 11px; font-size: 13px; opacity: 0.5; pointer-events: none; }
.mi-dsearch .input { width: 100%; padding-left: 33px; padding-right: 32px; }
.mi-dsearch-x { position: absolute; right: 7px; border: none; background: transparent; color: var(--ink-mute); cursor: pointer; font-size: 12px; padding: 4px 6px; border-radius: 6px; }
.mi-dsearch-x:hover { background: var(--bg-sunk); color: var(--ink); }
.mi-dsearch-hint { font-size: 11px; color: var(--ink-mute); margin: 5px 0 7px; }
.mi-dnone { font-size: 12.5px; color: var(--ink-mute); font-style: italic; padding: 12px; border: 1px dashed var(--border); border-radius: var(--radius); }
.mi-dlist { max-height: 230px; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-elev); }
.mi-doption { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; padding: 8px 11px; border: none; border-bottom: 1px solid var(--border); background: transparent; cursor: pointer; font: inherit; transition: var(--t); }
.mi-doption:last-child { border-bottom: none; }
.mi-doption:hover { background: var(--bg-sunk); }
.mi-doption.on { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }
.mi-doption-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.mi-doption-items { font-size: 13px; color: var(--ink); font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mi-doption-meta { font-size: 11px; color: var(--ink-mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mi-doption-date { font-size: 11px; color: var(--ink-mute); white-space: nowrap; flex-shrink: 0; }
.pill-auto { opacity: 0.9; }
.pill-auto:disabled { opacity: 0.45; cursor: default; }
.pill-autotag { font-family: var(--font-mono); font-size: 8.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; background: var(--bg-sunk); border: 1px solid var(--border); border-radius: 3px; padding: 0 3px; margin-left: 5px; color: var(--ink-mute); }
.mi-handover { margin-top: 9px; font-size: 12px; line-height: 1.5; color: #2a5a75; background: #eef4fb; border: 1px solid #b8cfe3; border-radius: 8px; padding: 9px 11px; }
.mi-handover strong { color: #1d4560; }
.redeliv-note { font-size: 11.5px; line-height: 1.45; color: var(--ink-soft); margin: 4px 0 2px; }
.redeliv-note strong { color: var(--ink); }
/* ===== Tool register: unit columns, service register, QR label ===== */
.tl-unitno { font-weight: 700; color: var(--ink); }
.tl-rowacts { display: flex; align-items: center; gap: 4px; }
.tl-iconbtn { border: 1px solid var(--border); background: var(--bg-elev); color: var(--ink-soft); font-size: 11px; line-height: 1; padding: 3px 6px; border-radius: 5px; cursor: pointer; }
.tl-iconbtn:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.tl-faultbtn { color: var(--bad); border-color: #e3a9a2; }
.tl-faultbtn:hover { background: var(--bad); color: #fff; border-color: var(--bad); }
.tl-faultsubmit { background: var(--bad); border-color: var(--bad); }
.tl-faultsubmit:hover:not(:disabled) { background: #8f1d22; border-color: #8f1d22; }
.tl-svc-section { border: 1px solid #e3a9a2; border-radius: var(--radius-lg); padding: 12px 14px; background: #fdf6f5; margin-bottom: 14px; }
.tl-svc-head { color: #b3242a; }
.tl-svc-note { font-size: 11.5px; color: var(--ink-soft); line-height: 1.45; margin-bottom: 9px; }
.tl-svc-fault { font-size: 12px; color: var(--ink-soft); max-width: 320px; }
.tl-qrbody { text-align: center; padding: 10px 22px 16px; }
.tl-qrlabel { display: inline-flex; align-items: center; gap: 12px; border: 2px solid #14181f; border-radius: 10px; padding: 10px 14px; background: #fff; }
.tl-qrbox { line-height: 0; }
.tl-qrmeta { text-align: left; }
.tl-qrunit { font-size: 26px; font-weight: 800; color: #14181f; line-height: 1.05; }
.tl-qrtype { font-size: 12px; color: #454b53; margin-top: 2px; }
.tl-qrbrand { font-size: 9px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #8a9099; margin-top: 8px; }
.tl-qrnote { font-size: 11.5px; color: var(--ink-mute); line-height: 1.45; margin-top: 12px; text-align: left; }
.tl-faultnote { font-size: 11.5px; color: #9a6a10; background: #fdf9f0; border: 1px solid #e8cf96; border-radius: 8px; padding: 8px 10px; margin-top: 10px; line-height: 1.45; }
.tl-faultnote strong { color: #7a5209; }
@media (max-width: 620px) {
  .mi-doption { flex-wrap: wrap; }
  .mi-doption-items, .mi-doption-meta { white-space: normal; }
}

/* ===== Timeline / schedule view ===== */
.fab-tl-controls { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.fab-tl-ctl-lbl { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-mute); }
.fab-seg { display: inline-flex; background: var(--bg-sunk); border: 1px solid var(--border); border-radius: 999px; padding: 3px; gap: 2px; }
.fab-seg button { border: none; background: transparent; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--ink-soft); padding: 5px 14px; border-radius: 999px; cursor: pointer; transition: var(--t); }
.fab-seg button:hover { color: var(--ink); }
.fab-seg button.on { background: var(--accent); color: #fff; }
.fab-tl-hint { font-size: 11.5px; color: var(--ink-mute); font-style: italic; flex: 1; min-width: 200px; }
.fab-tl-scroll { overflow: auto; max-height: calc(100vh - 340px); border: 1px solid var(--border); border-radius: 12px; background: var(--bg-elev); }
.fab-tl { display: grid; align-items: stretch; min-width: max-content; }
.fab-tl-corner { position: sticky; top: 0; left: 0; z-index: 5; background: var(--bg-elev); border-right: 1px solid var(--border-strong); border-bottom: 2px solid var(--border-strong); padding: 10px 12px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-mute); display: flex; align-items: flex-end; }
.fab-tl-whead { position: sticky; top: 0; z-index: 3; background: var(--bg-elev); border-bottom: 2px solid var(--border-strong); border-left: 1px solid var(--border); padding: 8px 10px; }
.fab-tl-whead.current { background: #eef4fb; border-bottom-color: #5b8aa6; }
.fab-tl-overdue.fab-tl-whead { background: #fbecea; border-bottom-color: #c0392b; }
.fab-tl-nodate.fab-tl-whead { background: #fbf6e8; }
.fab-tl-wlabel { font-size: 12.5px; font-weight: 700; color: var(--ink); white-space: nowrap; }
.fab-tl-overdue .fab-tl-wlabel { color: #c0392b; }
.fab-tl-whead.current .fab-tl-wlabel { color: #2a5a75; }
.fab-tl-wton { font-size: 11px; color: var(--ink-mute); font-family: var(--font-mono); margin-top: 1px; min-height: 14px; }
.fab-tl-wbar { height: 4px; border-radius: 999px; background: var(--border); margin-top: 5px; overflow: hidden; }
.fab-tl-wbar span { display: block; height: 100%; border-radius: 999px; background: #5b8aa6; }
.fab-tl-lane { position: sticky; left: 0; z-index: 2; background: var(--bg-elev); border-right: 1px solid var(--border-strong); border-bottom: 1px solid var(--border); padding: 0; }
.fab-tl-lane-inner { position: sticky; top: 62px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.fab-tl-lane-name { font-size: 13px; font-weight: 650; color: var(--ink); line-height: 1.2; }
.fab-tl-lane-meta { font-size: 10.5px; color: var(--ink-mute); font-family: var(--font-mono); }
.fab-tl-lane-late { color: #c0392b; font-weight: 700; }
.fab-tl-cell { border-left: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 6px; display: flex; flex-direction: column; gap: 6px; min-height: 54px; }
.fab-tl-cell.current { background: #f6fafd; }
.fab-tl-cell.fab-tl-overdue { background: #fdf4f3; }
.fab-tl-cell.fab-tl-nodate { background: #fefaf0; }
.fab-chip { text-align: left; width: 100%; background: var(--bg-elev); border: 1px solid var(--border); border-left: 3px solid var(--border-strong); border-radius: 8px; padding: 6px 8px; display: flex; flex-direction: column; gap: 4px; cursor: pointer; transition: var(--t); box-shadow: var(--shadow-sm); }
.fab-chip-late { border-left-color: #c0392b; }
.fab-chip-soon { border-left-color: #e0a94a; }
.fab-chip-ontrack { border-left-color: #5aa06f; }
.fab-chip-paused { border-left-color: #8a7bd0; }
.fab-chip-none { border-left-color: #5b8aa6; }
.fab-chip-done { border-left-color: #8a929c; opacity: 0.62; }
.fab-chip:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.fab-chip-l1 { display: flex; align-items: center; gap: 5px; }
.fab-chip-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.fab-chip-job { font-size: 11.5px; font-weight: 700; color: var(--ink); }
.fab-chip-ton { margin-left: auto; font-size: 10.5px; font-family: var(--font-mono); color: var(--ink-mute); }
.fab-chip-desc { font-size: 11px; color: var(--ink-soft); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fab-chip-bar { height: 3px; border-radius: 999px; background: var(--border); overflow: hidden; }
.fab-chip-bar span { display: block; height: 100%; border-radius: 999px; }
.fab-chip-late .fab-chip-job { color: #c0392b; }
.pv-phone .fab-tl-scroll { max-height: none; }
/* Date accountability — PM review prompt, reason & slippage log */
.fab-chip-review { font-size: 11px; color: #c0392b; flex-shrink: 0; }
.fab-review { border: 1px solid #e3a9a2; background: #fdf4f3; border-radius: 10px; padding: 12px 14px; margin: 14px 0 4px; }
.fab-review-head { font-size: 12px; font-weight: 700; color: #c0392b; text-transform: uppercase; letter-spacing: 0.04em; }
.fab-review-txt { font-size: 12.5px; color: var(--ink-soft); margin: 5px 0 9px; line-height: 1.45; }
.fab-duereason { margin-top: 12px; }
.fab-duereason > span { color: #9a6a10 !important; font-weight: 700; }
.fab-duereason .input { border-color: #e0a94a; background: #fdf9f0; }
.fab-duelog { border: 1px solid var(--border); border-radius: 9px; overflow: hidden; }
.fab-duelog-row { display: flex; align-items: baseline; gap: 10px; padding: 7px 11px; border-bottom: 1px solid var(--border); flex-wrap: wrap; font-size: 12px; }
.fab-duelog-row:last-child { border-bottom: none; }
.fab-duelog-dates { font-weight: 600; color: var(--ink); }
.fab-duelog-who { color: var(--ink-mute); font-size: 11px; }
.fab-duelog-reason { flex: 1 1 100%; color: var(--ink-soft); font-size: 11.5px; font-style: italic; }
.fab-modal { max-width: 640px; width: 94vw; }
.fab-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fab-form-wide { grid-column: 1 / -1; }
.fab-form-section { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-mute); margin: 16px 0 8px; }
.fab-gate-toggles { display: flex; gap: 8px; flex-wrap: wrap; }
.fab-gate-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; border: 1px solid var(--border); border-radius: 8px; padding: 7px 11px; cursor: pointer; }
.fab-gate-toggle.on { border-color: #5aa06f; background: #e5f2ea; color: #256b40; }
.fab-stage-editrow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.fab-stage-edit { display: flex; flex-direction: column; gap: 3px; }
.fab-stage-edit-lbl { font-size: 11px; font-weight: 600; color: var(--ink-soft); }
/* phone */
.pv-phone .fab-cards, .pv-phone .fab-stage-editrow, .pv-phone .fab-form-grid { grid-template-columns: 1fr 1fr; }
.pv-phone .fab-pack { grid-template-columns: 1fr; gap: 8px; }
.pv-phone .fab-pack-actions { position: absolute; right: 12px; }
.pv-phone .fab-stages { flex-wrap: wrap; }
@media (max-width: 900px) {
  .fab-cards { grid-template-columns: repeat(3, 1fr); }
  .fab-pack { grid-template-columns: 1fr; gap: 8px; position: relative; }
  .fab-stages { flex-wrap: wrap; }
  .fab-form-grid, .fab-stage-editrow { grid-template-columns: 1fr 1fr; }
}

/* Cost-type chip */
.hr-cttag { display: inline-block; font-weight: 700; padding: 2px 7px; border-radius: 5px; border: 1px solid; white-space: nowrap; letter-spacing: 0.02em; }
/* Progress / status bar */
.hrp { display: flex; flex-direction: column; gap: 4px; }
.hrp-bar { position: relative; height: 9px; border-radius: 999px; background: var(--bg-sunk); border: 1px solid var(--border); overflow: hidden; }
.hrp-compact .hrp-bar { height: 7px; }
.hrp-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; transition: width 0.3s ease; }
.hrp-over { position: absolute; right: 0; top: 0; bottom: 0; background: repeating-linear-gradient(45deg, #b3242a, #b3242a 3px, #d14b4b 3px, #d14b4b 6px); opacity: 0.85; }
.hrp-bar.hrp-day { background: repeating-linear-gradient(45deg, #f4e6d2, #f4e6d2 4px, #f9f0e2 4px, #f9f0e2 8px); }
.hrp-marker { position: absolute; top: -2px; bottom: -2px; width: 2px; background: var(--ink); box-shadow: 0 0 0 1px #fff; }
.hrp-marker::after { content: ""; position: absolute; top: -3px; left: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--ink); border: 1.5px solid #fff; }
.hrp-line { display: flex; align-items: center; gap: 10px; font-size: 11.5px; color: var(--ink-mute); flex-wrap: wrap; }
.hrp-compact .hrp-line { font-size: 10.5px; gap: 7px; }
.hrp-spent b { color: var(--ink); }
.hrp-left { font-weight: 600; color: var(--ink-soft); }
.hrp-left.neg { color: #b3242a; }
.hrp-pct { color: var(--ink-mute); }
.hrp-pace { font-weight: 700; margin-left: auto; }
.hrp-costplus, .hrp-nobudget { color: #b8801d; font-style: italic; }

/* Project flow chart */
.hr-flow { display: flex; flex-direction: column; gap: 14px; }
.hr-flow-body { padding: 6px 2px 4px; }
.hr-flow-summary { max-width: 640px; margin: 0 0 16px; }
.hr-lanes { display: flex; align-items: stretch; gap: 0; overflow-x: auto; padding-bottom: 6px; }
.hr-lane { flex: 1 1 0; min-width: 230px; display: flex; flex-direction: column; }
.hr-lane-arrow { display: flex; align-items: center; padding: 0 10px; color: var(--ink-mute); font-size: 20px; flex-shrink: 0; }
.hr-lane-head { border-top: 3px solid; border-radius: 8px 8px 0 0; background: var(--bg-sunk); padding: 9px 11px; display: flex; flex-direction: column; gap: 1px; }
.hr-lane-title { font-weight: 700; font-size: 13px; }
.hr-lane-basis { font-size: 10.5px; color: var(--ink-mute); }
.hr-lane-tot { font-size: 11px; font-weight: 600; color: var(--ink-soft); margin-top: 2px; }
.hr-lane-jobs { display: flex; flex-direction: column; gap: 8px; padding: 10px 4px; }
.hr-lane-empty { font-size: 12px; color: var(--ink-mute); font-style: italic; padding: 8px 6px; }
.hr-flow-other { margin-top: 14px; border-top: 1px dashed var(--border); padding-top: 10px; }
.hr-flow-other .hr-lane-jobs { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
/* Flow job card */
.hr-fcard { border: 1px solid var(--border); border-radius: 9px; background: var(--bg-elev); box-shadow: var(--shadow-sm); padding: 10px 11px; display: flex; flex-direction: column; gap: 7px; }
.hr-fcard.over { border-color: #e0a0a3; }
.hr-fcard-top { display: flex; align-items: baseline; gap: 8px; }
.hr-fcard-jdesc { flex: 1; min-width: 0; font-size: 11.5px; color: var(--ink-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hr-job .hr-jobdesc { display: block; font-size: 11px; color: var(--ink-mute); font-weight: 400; white-space: normal; max-width: 260px; line-height: 1.35; margin-top: 1px; }
.hr-fcard-job { font-family: var(--font-mono); font-weight: 700; font-size: 13px; color: var(--ink); }
.hr-fcard-total { font-size: 13px; font-weight: 700; color: var(--ink); }
.hr-fcard-desc { font-size: 11.5px; color: var(--ink-mute); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hr-fcard-set { align-self: flex-start; border: 1px dashed var(--border-strong); background: transparent; color: var(--ink-soft); font-size: 11px; font-weight: 600; padding: 4px 9px; border-radius: 6px; cursor: pointer; }
.hr-fcard-set:hover { background: var(--bg-sunk); color: var(--ink); }
.hr-fcard-edit { display: flex; align-items: flex-end; gap: 6px; flex-wrap: wrap; }
.hr-fcard-edit label { display: flex; flex-direction: column; gap: 2px; font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-mute); font-weight: 700; }
.hr-fcard-edit .hr-inp { width: 72px; }
.hr-pace-tag { font-size: 10.5px; font-weight: 600; margin-left: 4px; }
.pv-phone .hr-lanes { flex-direction: column; }
.pv-phone .hr-lane-arrow { transform: rotate(90deg); padding: 4px 0; align-self: center; }
@media (max-width: 720px) { .hr-lanes { flex-direction: column; } .hr-lane-arrow { transform: rotate(90deg); padding: 4px 0; align-self: center; } }
.hr-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.hr-head h1 { margin: 0 0 3px; font-size: 22px; }
.hr-sub { font-size: 13px; color: var(--ink-mute); max-width: 60ch; line-height: 1.5; }
.hr-head-actions { display: flex; gap: 8px; }

.hr-cards { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 18px; }
.hr-card { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px 18px; }
.hr-card-v { font-size: 26px; font-weight: 750; letter-spacing: -0.02em; color: var(--ink); line-height: 1.1; }
.hr-card-l { font-size: 11.5px; color: var(--ink-mute); margin-top: 5px; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; }
.hr-card-alert { border-color: #b3242a; background: rgba(179,36,42,0.05); }
.hr-card-alert .hr-card-v { color: #b3242a; }
.hr-card-warn { border-color: #c07a2a; background: rgba(192,122,42,0.06); }
.hr-card-warn .hr-card-v { color: #b8801d; }
.hr-demo-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--ink-soft); background: var(--bg-sunk); border: 1px solid var(--border); border-radius: 8px; padding: 7px 12px; cursor: pointer; }
.hr-demo-toggle input { accent-color: var(--accent); }
/* Sparkline */
.hr-spark { display: inline-flex; align-items: flex-end; gap: 2px; height: 20px; width: 72px; }
.hr-spark-bar { flex: 1; border-radius: 1px; min-height: 2px; }
/* Flow card metrics row */
.hr-fcard-metrics { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 10.5px; }
.hr-fcard-eac, .hr-fcard-burn { color: var(--ink-mute); font-weight: 600; }
.hr-fcard-novq { color: #b8801d; font-weight: 700; background: rgba(192,122,42,0.12); border-radius: 4px; padding: 1px 6px; }
/* Portfolio table */
.hr-portfolio { overflow-x: auto; }
.hr-porttable td, .hr-porttable th { vertical-align: middle; }
.hr-porttable td .hrp { min-width: 130px; }
/* Weekly / monthly report */
.hr-report-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.hr-seg { display: inline-flex; background: var(--bg-sunk); border: 1px solid var(--border); border-radius: 8px; padding: 3px; }
.hr-seg button { border: none; background: transparent; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--ink-soft); padding: 6px 13px; border-radius: 6px; cursor: pointer; }
.hr-seg button.on { background: var(--accent); color: #fff; }
.hr-span { font-size: 12px; color: var(--ink-mute); font-weight: 600; display: inline-flex; align-items: center; gap: 7px; }
.hr-span .select { padding: 5px 8px; }
.hr-report-scroll { overflow-x: auto; border: 1px solid var(--border); border-radius: 10px; }
.hr-reporttable { min-width: 100%; border-collapse: collapse; font-size: 13px; }
.hr-reporttable th, .hr-reporttable td { padding: 8px 10px; text-align: right; border-bottom: 1px solid var(--border); white-space: nowrap; }
.hr-reporttable th { background: var(--bg-sunk); font-size: 11px; color: var(--ink-mute); font-weight: 700; }
.hr-rt-sub { font-size: 9.5px; color: var(--ink-mute); font-weight: 400; }
.hr-rt-row { text-align: left !important; position: sticky; left: 0; background: var(--bg-elev); z-index: 1; }
.hr-reporttable th.hr-rt-row { background: var(--bg-sunk); }
.hr-rt-rowsub { display: block; font-size: 10.5px; color: var(--ink-mute); font-weight: 400; }
.hr-rt-tot { border-left: 2px solid var(--border-strong); }
.hr-reporttable tfoot td { background: var(--bg-sunk); border-top: 2px solid var(--border-strong); border-bottom: none; position: sticky; bottom: 0; }
.hr-reporttable tbody tr:hover td { background: var(--bg-sunk); }

/* ============================================================
   PROGRESS TREND (monthly % complete vs % hours)
   ============================================================ */
.pt-wrap { }
.pt-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.pt-legend { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--ink-mute); margin-bottom: 16px; }
.pt-legend span { display: inline-flex; align-items: center; gap: 5px; }
.pt-sw { width: 16px; height: 3px; border-radius: 2px; display: inline-block; }
.pt-sw.dash { background-image: repeating-linear-gradient(90deg, currentColor 0 3px, transparent 3px 5px) !important; }
.pt-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.pt-legend-sep { width: 1px; height: 14px; background: var(--border); }
.pt-flag-key { color: #b3242a; font-weight: 600; }
.pt-flag { color: #b3242a; margin-left: 6px; }
/* Status flow */
.pt-flowlist { display: flex; flex-direction: column; gap: 8px; }
.pt-flowrow { border: 1px solid var(--border); border-radius: 10px; background: var(--bg-elev); padding: 12px 14px; }
.pt-flowrow.worse { border-color: #e0a0a3; background: rgba(179,36,42,0.03); }
.pt-flowhead { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.pt-name { font-weight: 700; font-size: 14px; color: var(--ink); }
.pt-sub { font-size: 12px; color: var(--ink-mute); }
.pt-curgap { margin-left: auto; font-weight: 700; font-size: 13px; }
.pt-chips { display: flex; align-items: center; gap: 0; flex-wrap: wrap; }
.pt-chip { display: flex; flex-direction: column; align-items: center; min-width: 46px; border: 1.5px solid var(--border); border-radius: 8px; padding: 5px 6px; background: var(--bg-elev); }
.pt-chip.empty { color: var(--ink-mute); border-style: dashed; }
.pt-chip-m { font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.03em; opacity: 0.8; }
.pt-chip-g { font-size: 14px; font-weight: 700; font-family: var(--font-mono); }
.pt-conn { width: 18px; height: 2px; background: var(--border-strong); margin: 0 2px; align-self: center; position: relative; }
.pt-conn.down { background: #b3242a; }
.pt-conn.up { background: #1f7a4d; }
.pt-conn.down::after { content: "▼"; position: absolute; top: -7px; left: 50%; transform: translateX(-50%); font-size: 8px; color: #b3242a; }
.pt-conn.up::after { content: "▲"; position: absolute; top: -7px; left: 50%; transform: translateX(-50%); font-size: 8px; color: #1f7a4d; }
/* Line cards */
.pt-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.pt-card { border: 1px solid var(--border); border-radius: 10px; background: var(--bg-elev); padding: 12px 13px; box-shadow: var(--shadow-sm); }
.pt-card.worse { border-color: #e0a0a3; }
.pt-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.pt-card .pt-sub { margin-bottom: 4px; }
.pt-lines { width: 100%; height: 64px; margin: 6px 0; display: block; }
.pt-card-foot { display: flex; justify-content: space-between; font-size: 11.5px; font-weight: 600; }
/* Trend table */
.pt-tablewrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 10px; }
.pt-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.pt-table th, .pt-table td { padding: 8px 10px; text-align: right; border-bottom: 1px solid var(--border); white-space: nowrap; }
.pt-table th { background: var(--bg-sunk); font-size: 11px; color: var(--ink-mute); font-weight: 700; }
.pt-t-row { text-align: left !important; }
.pt-t-sub { display: block; font-size: 10.5px; color: var(--ink-mute); font-weight: 400; }
.pt-tr-worse td { background: rgba(179,36,42,0.04); }
.pt-band { font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 999px; }
.pt-arrow { font-size: 8px; margin-left: 3px; }
.pt-arrow.up { color: #1f7a4d; } .pt-arrow.down { color: #b3242a; } .pt-arrow.flat { color: var(--ink-mute); }

.hr-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.hr-tabs { display: inline-flex; background: var(--bg-sunk); border-radius: 9px; padding: 3px; }
.hr-tab { appearance: none; border: none; background: transparent; cursor: pointer; font: inherit; font-size: 13px; font-weight: 600; color: var(--ink-mute); padding: 7px 15px; border-radius: 7px; }
.hr-tab.on { background: var(--bg-elev); color: var(--ink); box-shadow: var(--shadow-sm); }
.hr-search { max-width: 230px; }
.hr-toolbar .select { height: 38px; font-size: 13px; }

.hr-projects { display: flex; flex-direction: column; gap: 10px; }
.hr-proj-head { display: flex; align-items: center; gap: 12px; width: 100%; }
.hr-proj-name { font-size: 14.5px; font-weight: 700; }
.hr-proj-meta { font-size: 11.5px; color: var(--ink-mute); }
.hr-proj-nums { display: flex; align-items: center; gap: 14px; font-size: 12.5px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.hr-proj-total { font-weight: 750; color: var(--ink); font-size: 14px; }
.hr-proj-allowed { color: var(--ink-mute); font-weight: 600; }

.hr-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.hr-table thead th { text-align: left; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-mute); padding: 9px 12px; border-bottom: 1px solid var(--border); background: var(--bg-sunk); white-space: nowrap; }
.hr-table th.num, .hr-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.hr-table tbody td { padding: 9px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.hr-table tbody tr:hover { background: var(--steel-soft); }
.hr-row-over { background: rgba(179,36,42,0.045); }
.hr-row-over:hover { background: rgba(179,36,42,0.08); }
.hr-job { font-weight: 700; font-family: var(--font-mono); font-size: 12.5px; white-space: nowrap; }
.hr-projcell { color: var(--ink-soft); }
.hr-strong { font-weight: 750; color: var(--ink); }
.hr-mute { color: var(--ink-mute); }
.hr-neg { color: #b3242a; font-weight: 700; }
.hr-pos { color: #1f7a4d; font-weight: 600; }
.hr-pct { display: inline-block; margin-left: 7px; font-size: 11px; color: var(--ink-mute); }
.hr-flag { color: #b8801d; margin-left: 6px; cursor: help; }

.hr-jobtable-wrap { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.hr-jobtable { }

.hr-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font-weight: 700; white-space: nowrap; }
.hr-dot { width: 6px; height: 6px; border-radius: 99px; }

.hr-inp { width: 68px; text-align: right; padding: 5px 7px; border: 1px solid var(--border-strong); border-radius: 6px; font: inherit; font-size: 12.5px; }
.hr-setbtn { appearance: none; border: 1px dashed var(--border-strong); background: transparent; color: var(--ink-mute); font: inherit; font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 6px; cursor: pointer; }
.hr-setbtn:hover { border-color: var(--ink); color: var(--ink); }
.hr-edit-actions { display: flex; gap: 5px; }
.hr-mini { font-size: 11.5px; padding: 5px 10px; }
.hr-note-row td { padding: 4px 12px 10px; border-bottom: 1px solid var(--border); }
.hr-note-inp { width: 100%; max-width: 480px; padding: 6px 9px; border: 1px solid var(--border-strong); border-radius: 6px; font: inherit; font-size: 12.5px; }

.hr-empty { text-align: center; color: var(--ink-mute); padding: 32px 16px; font-size: 13px; }

.hr-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 18px; padding: 14px 16px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-lg); font-size: 12px; color: var(--ink-soft); }
.hr-legend-t { font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; font-size: 10.5px; color: var(--ink-mute); }
.hr-legend-i { display: inline-flex; align-items: center; gap: 6px; }
.hr-legend-note { flex-basis: 100%; color: var(--ink-mute); font-size: 11.5px; padding-top: 4px; border-top: 1px dashed var(--border); margin-top: 2px; }

@media (max-width: 1024px) {
  .hr-cards { grid-template-columns: repeat(2, 1fr); }
  .hr-search { max-width: none; flex: 1; }
}
@media (max-width: 640px) {
  .hr-wrap { padding: 14px; }
  .hr-cards { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .hr-card-v { font-size: 20px; }
  .hr-jobtable-wrap { overflow-x: auto; }
  .hr-jobtable { min-width: 720px; }
}


/* ============================================================
   DEVICE PREVIEW (Desktop / iPhone toggle)
   ============================================================ */
.app-viewport{ height:100vh; width:100%; }
.preview-toolbar{ position:fixed; bottom:16px; left:50%; transform:translateX(-50%); z-index:400; display:flex; gap:3px; background:var(--bg-elev); border:1px solid var(--border-strong); border-radius:999px; padding:4px; box-shadow:var(--shadow-lg); }
.preview-toolbar button{ border:none; background:transparent; font:inherit; font-size:12.5px; font-weight:600; color:var(--ink-mute); padding:7px 16px; border-radius:999px; cursor:pointer; display:flex; align-items:center; gap:7px; transition:var(--t); }
.preview-toolbar button span{ font-size:13px; }
.preview-toolbar button:hover{ color:var(--ink); }
.preview-toolbar button.on{ background:var(--accent); color:#fff; }
/* Phone preview — constrain the whole app into a centred device frame */
.pv-phone{ display:flex; align-items:center; justify-content:center; background:#c7cad0; padding:24px 16px 78px; overflow:auto; }
.pv-phone .device-frame{ width:430px; flex:0 0 430px; height:912px; max-height:calc(100vh - 40px); background:#0d0f12; border-radius:52px; padding:13px; box-shadow:0 40px 90px rgba(0,0,0,.45), inset 0 0 0 2px #2a2d34; position:relative; }
.pv-phone .device-frame::before{ content:""; position:absolute; top:15px; left:50%; transform:translateX(-50%); width:120px; height:26px; background:#0d0f12; border-radius:0 0 16px 16px; z-index:130; }
.pv-phone .app{ height:100%; width:100%; max-width:none; border-radius:40px; overflow:hidden; position:relative; background:var(--bg); }
.pv-phone .sidebar{ position:absolute; left:0; top:0; z-index:120; height:100%; transform:translateX(-100%); transition:transform .22s cubic-bezier(.2,.7,.2,1); box-shadow:var(--shadow-lg); }
.pv-phone .sidebar.open{ transform:none; }
.pv-phone .side-toggle{ display:inline-flex; align-items:center; }
.pv-phone .main-col{ height:100%; width:100%; }
.pv-phone .menu-backdrop{ position:absolute; }
/* Modals/drawers must live inside the device frame, not the real viewport */
.pv-phone .modal-backdrop{ position:absolute; padding:10px; overflow:hidden; }
.pv-phone .modal{ width:100% !important; max-width:100% !important; max-height:100%; display:flex; flex-direction:column; }
.pv-phone .modal-head, .pv-phone .modal-foot{ flex:0 0 auto; }
/* Many modals wrap their body+footer in a <form> (or plain div) — that wrapper must
   also be a shrinkable flex column, or the body can never scroll and the footer
   gets pushed off the bottom of the device frame. */
.pv-phone .modal > form,
.pv-phone .modal > div:not(.modal-head):not(.modal-foot),
.pv-phone .drawer > form,
.pv-phone .drawer > div:not(.drawer-head):not(.drawer-foot){ display:flex; flex-direction:column; flex:1 1 auto; min-height:0; }
.pv-phone .modal-body{ flex:1 1 auto; min-height:0; max-height:none !important; overflow-y:auto; -webkit-overflow-scrolling:touch; }
/* Drawers (missing items, fab errors, schedule detail) behave the same way */
.pv-phone .drawer{ display:flex; flex-direction:column; max-height:100%; }
.pv-phone .drawer-head, .pv-phone .drawer-foot{ flex:0 0 auto; }
.pv-phone .drawer-body{ flex:1 1 auto; min-height:0; max-height:none !important; overflow-y:auto; -webkit-overflow-scrolling:touch; }
.pv-phone .drawer{ position:absolute; width:100% !important; max-width:100%; }
.pv-phone .appheader{ padding-top:30px; }
.pv-desktop .device-frame{ display:contents; }
@media (max-width:960px){ .preview-toolbar{ display:none; } .pv-phone{ display:block; padding:0; background:none; } .pv-phone .device-frame{ display:contents; } .pv-phone .app{ border-radius:0; } .pv-phone .appheader{ padding-top:11px; } }

/* ============================================================
   SIDEBAR SHELL + OPERATIONS HUB (Build & Format Spec)
   ============================================================ */
.app{ display:flex; grid-template-rows:none; grid-template-columns:none; height:100vh; width:100%; max-width:100vw; overflow:hidden; }
.sidebar{ width:256px; flex-shrink:0; background:var(--bg-elev); border-right:1px solid var(--border); display:flex; flex-direction:column; height:100vh; overflow-y:auto; }
.side-logo{ display:flex; align-items:center; gap:10px; padding:20px 20px 18px; border-bottom:1px solid var(--border); }
.side-collapse{ margin-left:auto; border:1px solid var(--border); background:var(--bg); color:var(--ink-mute); font-size:14px; line-height:1; width:24px; height:24px; border-radius:6px; cursor:pointer; padding:0; }
.side-collapse:hover{ background:var(--accent-soft); color:var(--ink); border-color:var(--accent); }
.sidebar.collapsed{ width:0; min-width:0; border-right:none; overflow:hidden; }
.side-toggle.show{ display:inline-flex; align-items:center; }
/* Collapse is a desktop idea — on phone/narrow the drawer pattern owns the sidebar */
.pv-phone .sidebar.collapsed{ width:256px; }
.pv-phone .side-collapse{ display:none; }
@media (max-width:960px){ .sidebar.collapsed{ width:256px; } .side-collapse{ display:none; } }
.side-logo .brand-chip{ width:30px; height:34px; background:#fff; border:1px solid var(--border); border-radius:5px; padding:2px 3px; display:grid; place-items:center; }
.side-logo .brand-chip img{ width:100%; height:100%; object-fit:contain; display:block; }
.side-logo .wm{ font-weight:700; font-size:15px; color:var(--ink); letter-spacing:-0.01em; }
.side-role{ padding:14px 18px; border-bottom:1px solid var(--border); }
.side-role .eyebrow{ font-family:var(--font-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-mute); font-weight:600; margin-bottom:6px; }
.side-role .select{ width:100%; }
.side-scope{ padding:12px 18px; border-bottom:1px solid var(--border); }
.side-scope .eyebrow{ font-family:var(--font-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-mute); font-weight:600; margin-bottom:6px; }
.side-scope.on .eyebrow{ color:var(--ink); }
.side-scope .select{ width:100%; }
.side-scope.on .select{ border-color:var(--accent); box-shadow:0 0 0 1px var(--accent) inset; font-weight:650; }
.sidebar.collapsed .side-scope{ display:none; }
.side-nav{ padding:8px 12px 24px; flex:1; }
.side-hub{ margin:4px 0 2px; }
.side-navlink{ display:flex; align-items:center; gap:10px; width:100%; text-align:left; padding:8px 12px; border-radius:6px; font-size:13.5px; font-weight:500; color:var(--ink-soft); }
.side-navlink:hover{ background:var(--bg-sunk); color:var(--ink); }
.side-navlink.active{ background:var(--accent-soft); color:var(--ink); font-weight:650; }
.side-navlink .dot{ width:6px; height:6px; border-radius:50%; flex-shrink:0; background:var(--d,#9aa1ab); }
.side-navlink .cnt{ margin-left:auto; font-family:var(--font-mono); font-size:11px; font-weight:600; color:#fff; background:var(--bad); border-radius:999px; padding:0 6px; }
.side-group{ font-family:var(--font-mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-mute); font-weight:600; padding:16px 12px 5px; }
.main-col{ flex:1; display:flex; flex-direction:column; min-width:0; height:100vh; }
.main-col .main{ flex:1; overflow:auto; }
.appheader{ position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:14px; padding:11px 24px; background:var(--bg-elev); border-bottom:1px solid var(--border); flex-shrink:0; }
.appheader .crumb{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-mute); font-weight:600; white-space:nowrap; flex-shrink:0; }
.appheader h1{ font-size:19px; font-weight:600; margin:0; letter-spacing:-0.01em; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:1.2; }
.appheader-right{ margin-left:auto; display:flex; align-items:center; gap:8px; }
.appheader .btn-ghost{ color:var(--ink-soft); }
.appheader .btn-ghost:hover{ background:var(--bg-sunk); color:var(--ink); }
.appheader .user-chip{ color:var(--ink); border:1px solid var(--border); border-radius:999px; }
.appheader .user-chip:hover{ background:var(--bg-sunk); }
.appheader .avatar{ background:var(--accent); color:#fff; }
.side-toggle{ display:none; font-size:16px; padding:6px 10px; }
@media (max-width:960px){
  .sidebar{ position:fixed; left:0; top:0; z-index:120; transform:translateX(-100%); transition:transform .2s cubic-bezier(.2,.7,.2,1); box-shadow:var(--shadow-lg); }
  .sidebar.open{ transform:none; }
  .side-toggle{ display:inline-flex; align-items:center; }
}
.hub2{ max-width:1180px; margin:0 auto; padding:32px 28px 64px; }
.hub-hero{ display:flex; align-items:center; gap:14px; margin-bottom:28px; }
.hub-hero .brand-chip{ width:42px; height:46px; background:#fff; border:1px solid var(--border); border-radius:8px; padding:4px 5px; display:grid; place-items:center; flex-shrink:0; }
.hub-hero .brand-chip img{ width:100%; height:100%; object-fit:contain; display:block; }
.hub-hero h1{ font-size:28px; font-weight:700; margin:0; letter-spacing:-0.02em; color:var(--ink); }
.hub-hero .sub{ font-size:14px; color:var(--ink-mute); margin-top:2px; }
.hub-theme{ margin-left:auto; display:flex; align-items:center; gap:7px; flex-shrink:0; padding:8px 14px; border:1px solid var(--border); border-radius:999px; background:var(--bg-elev); color:var(--ink-soft); font-size:13px; font-weight:600; cursor:pointer; transition:var(--t); }
.hub-theme:hover{ border-color:var(--border-strong); color:var(--ink); }
.hub-theme-ico{ font-size:15px; line-height:1; }
@media (max-width:520px){ .hub-theme-lbl{ display:none; } .hub-theme{ padding:8px 11px; } }
.pv-phone .hub-theme-lbl{ display:none; }
.pv-phone .hub-theme{ padding:8px 11px; }
.hub-section{ margin-bottom:26px; }
.hub-sec-head{ display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.hub-sec-head .eyebrow{ font-family:var(--font-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft); font-weight:600; }
.hub-sec-head .rule{ flex:1; height:1px; background:var(--border); }
.hub-sec-head .count{ font-family:var(--font-mono); font-size:11px; color:var(--ink-mute); }
.hub-grid2{ display:grid; grid-template-columns:repeat(auto-fill,minmax(268px,1fr)); gap:14px; }
.htile{ display:flex; flex-direction:column; gap:9px; background:var(--bg-elev); border:1px solid var(--border); border-radius:10px; box-shadow:var(--shadow-sm); padding:16px 16px 14px; text-align:left; cursor:pointer; transition:var(--t); }
.htile:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); border-color:var(--border-strong); }
.htile-top{ display:flex; align-items:center; gap:8px; }
.htile .dot{ width:7px; height:7px; border-radius:50%; background:var(--d,#9aa1ab); flex-shrink:0; }
.htile-name{ font-size:15.5px; font-weight:650; color:var(--ink); }
.htile-desc{ font-size:12.5px; color:var(--ink-soft); line-height:1.5; flex:1; }
.htile-foot{ display:flex; align-items:center; justify-content:space-between; margin-top:2px; }
.htile-open{ font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; color:var(--ink); font-weight:600; }
.htile-badge{ font-family:var(--font-mono); font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; background:var(--accent-soft); border-radius:999px; padding:3px 8px; color:var(--ink-soft); }

/* ============================================================
   DAY LABOUR — CLIENT REVIEW / SIGN SUMMARY
   ============================================================ */
.dl-paper.dl-presenting{ display:none; }
.dls{ max-width:820px; margin:0 auto; }
.dls-topbar{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; flex-wrap:wrap; }
.dls-switch{ display:inline-flex; align-items:center; gap:3px; background:var(--bg-sunk); border:1px solid var(--border); border-radius:999px; padding:3px; }
.dls-switch-lbl{ font-size:11px; font-weight:600; color:var(--ink-mute); text-transform:uppercase; letter-spacing:.06em; padding:0 8px 0 6px; }
.dls-switch button{ border:none; background:transparent; font:inherit; font-size:12.5px; font-weight:600; color:var(--ink-soft); padding:6px 13px; border-radius:999px; cursor:pointer; transition:var(--t); }
.dls-switch button:hover{ color:var(--ink); }
.dls-switch button.on{ background:var(--accent); color:#fff; }
.dls-card{ background:var(--bg-elev); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-md); padding:24px 26px 22px; }
.dls-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:20px; border-bottom:1px solid var(--border); padding-bottom:16px; margin-bottom:16px; }
.dls-kicker{ font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--accent-ink,var(--ink-mute)); font-weight:600; }
.dls-head h2{ font-size:22px; font-weight:700; letter-spacing:-.01em; margin:4px 0 3px; color:var(--ink); }
.dls-sub{ font-size:13.5px; color:var(--ink-mute); }
.dls-meta{ display:flex; gap:22px; text-align:right; flex-shrink:0; }
.dls-meta > div{ display:flex; flex-direction:column; gap:2px; }
.dls-meta span{ font-size:10px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-mute); font-weight:600; }
.dls-meta b{ font-size:14px; color:var(--ink); }
.dls-desc{ font-size:13px; color:var(--ink-soft); background:var(--bg-sunk); border-radius:8px; padding:10px 12px; margin-bottom:16px; line-height:1.5; }
.dls-desc span{ display:block; font-size:10px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-mute); font-weight:700; margin-bottom:3px; }
.dls-corr{ margin-top:9px; padding-top:9px; border-top:1px dashed var(--border); }
.dls-corr span{ margin-bottom:2px; }
.dls-corr b{ font-size:14px; color:var(--ink); font-family:var(--font-mono); }
.dls-email{ margin-top:16px; }
.dls-email label{ display:flex; flex-direction:column; gap:5px; max-width:420px; }
.dls-email label span{ font-size:10px; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-mute); font-weight:700; }
.dls-email-note{ font-size:11.5px; color:var(--ink-mute); margin-top:5px; }
.dls-grand{ display:flex; align-items:center; justify-content:space-between; gap:18px; background:var(--accent); color:#fff; border-radius:12px; padding:16px 20px; margin-bottom:18px; flex-wrap:wrap; }
.dls-grand-main{ display:flex; align-items:baseline; gap:9px; }
.dls-grand-main b{ font-size:34px; font-weight:750; line-height:1; font-family:var(--font-mono); }
.dls-grand-main span{ font-size:13px; opacity:.8; text-transform:uppercase; letter-spacing:.06em; }
.dls-grand-split{ display:flex; gap:22px; }
.dls-grand-split > div{ display:flex; flex-direction:column; align-items:center; }
.dls-grand-split b{ font-size:19px; font-weight:700; font-family:var(--font-mono); line-height:1.1; }
.dls-grand-split span{ font-size:10px; opacity:.75; text-transform:uppercase; letter-spacing:.05em; }
.dls-empty{ font-size:13px; color:var(--ink-mute); font-style:italic; padding:14px 0; }
/* compact table */
.dls-scroll{ overflow-x:auto; border:1px solid var(--border); border-radius:10px; }
.dls-table{ width:100%; border-collapse:collapse; font-size:13px; }
.dls-table th, .dls-table td{ padding:8px 6px; text-align:center; border-bottom:1px solid var(--border); }
.dls-table th{ background:var(--bg-sunk); font-size:10px; text-transform:uppercase; letter-spacing:.03em; color:var(--ink-mute); font-weight:700; }
.dls-table th.l, .dls-table td.l{ text-align:left; padding-left:12px; font-weight:600; color:var(--ink); white-space:nowrap; }
.dls-th-d{ font-size:10px; color:var(--ink-mute); font-weight:400; }
.dls-table td.mono{ font-family:var(--font-mono); color:var(--ink-soft); }
.dls-table td.b, .dls-table .b{ font-weight:700; color:var(--ink); }
.dls-table tfoot td{ background:var(--bg-sunk); border-top:2px solid var(--border-strong); border-bottom:none; }
/* per-person cards */
.dls-people{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:10px; }
.dls-person{ border:1px solid var(--border); border-radius:10px; padding:12px 13px; background:var(--bg-sunk); }
.dls-person-head{ display:flex; align-items:baseline; justify-content:space-between; gap:8px; margin-bottom:9px; }
.dls-person-head b{ font-size:14.5px; color:var(--ink); }
.dls-person-head span{ font-size:13px; font-weight:700; color:var(--accent-ink,var(--ink)); }
.dls-daychips{ display:grid; grid-template-columns:repeat(7,1fr); gap:4px; }
.dls-daychip{ display:flex; flex-direction:column; align-items:center; gap:1px; padding:5px 2px; border-radius:6px; background:var(--bg-elev); border:1px solid var(--border); }
.dls-daychip span{ font-size:9px; text-transform:uppercase; color:var(--ink-mute); font-weight:600; }
.dls-daychip b{ font-size:12px; color:var(--ink-soft); }
.dls-daychip.has{ background:var(--accent-soft); border-color:var(--accent); }
.dls-daychip.has b{ color:var(--ink); }
.dls-ntot{ font-size:11px; color:var(--ink-mute); margin-top:7px; }
/* totals-first */
.dls-totals{ display:flex; flex-direction:column; }
.dls-total-row{ display:flex; align-items:center; gap:12px; padding:9px 4px; border-bottom:1px solid var(--border); }
.dls-total-name{ font-size:14px; color:var(--ink); flex:0 0 30%; min-width:110px; }
.dls-total-days{ flex:1; font-size:11.5px; color:var(--ink-mute); }
.dls-total-h{ font-size:15px; font-weight:700; color:var(--ink); }
/* brief blocks */
.dls-block{ margin-top:16px; }
.dls-block-h{ font-size:10px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-mute); font-weight:700; padding-bottom:5px; border-bottom:1px solid var(--border); margin-bottom:4px; }
.dls-line{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:5px 0; font-size:13px; color:var(--ink-soft); border-bottom:1px dashed var(--border); }
.dls-line span{ min-width:0; }
.dls-line b{ color:var(--ink); white-space:nowrap; }
/* signature */
.dls-sign{ display:grid; grid-template-columns:1fr 1.3fr; gap:22px; align-items:end; margin-top:22px; padding-top:18px; border-top:2px solid var(--border-strong); }
.dls-sign-name{ display:flex; flex-direction:column; gap:5px; }
.dls-sign-name span, .dls-sign-cap{ font-size:10px; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-mute); font-weight:700; }
.dls-sign-pad{ display:flex; flex-direction:column; gap:5px; }
.dls-note{ text-align:center; font-size:11px; font-weight:700; letter-spacing:.03em; color:var(--bad); margin-top:18px; padding:8px; border:1px solid #e8a4a8; background:#fdecee; border-radius:8px; }
@media (max-width:760px){
  .dls-sign{ grid-template-columns:1fr; gap:14px; }
  .dls-head{ flex-direction:column; gap:10px; }
  .dls-meta{ text-align:left; }
  .dls-card{ padding:18px 15px; }
}
.pv-phone .dls-sign{ grid-template-columns:1fr; gap:14px; }
.pv-phone .dls-head{ flex-direction:column; gap:10px; }
.pv-phone .dls-meta{ text-align:left; }
.pv-phone .dls-card{ padding:18px 15px; }
.pv-phone .dls-people{ grid-template-columns:1fr; }

/* ===== Crew entry (fast daily multi-worker timesheet) ===== */
.ce-modal { width: 720px; max-width: 94vw; display: flex; flex-direction: column; max-height: 90vh; }
.ce-body { display: flex; flex-direction: column; gap: 14px; overflow-y: auto; }
.ce-setup { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end; }
.ce-field { display: flex; flex-direction: column; gap: 5px; }
.ce-field-grow { flex: 1; min-width: 200px; }
.ce-field > label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-mute); }
.ce-hint { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--ink-mute); }
.ce-weekseg { display: inline-flex; gap: 4px; }
.ce-days { display: inline-flex; gap: 4px; }
.ce-weekseg button { border: 1px solid var(--border); background: var(--bg-elev); border-radius: 8px; padding: 8px 14px; font: inherit; font-size: 13px; font-weight: 600; color: var(--ink-soft); cursor: pointer; }
.ce-weekseg button.on { background: var(--accent); color: #fff; border-color: var(--accent); }
.ce-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; width: 100%; }
.ce-day { display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 0; border: 1px solid var(--border); background: var(--bg-elev); border-radius: 8px; padding: 7px 4px; cursor: pointer; transition: var(--t); }
.ce-day-dow { font-size: 11px; font-weight: 700; color: var(--ink); }
.ce-day-date { font-size: 10px; color: var(--ink-mute); }
.ce-day:hover { border-color: var(--border-strong); }
.ce-day.on { background: var(--accent); border-color: var(--accent); }
.ce-day.on .ce-day-dow, .ce-day.on .ce-day-date { color: #fff; }
.ce-day.today:not(.on) { border-color: var(--accent); }
.ce-crew-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; border-top: 1px solid var(--border); padding-top: 12px; }
.ce-crew-title { font-size: 14px; font-weight: 700; color: var(--ink); }
.ce-count { font-family: var(--font-mono); font-size: 12px; color: #fff; background: var(--accent); border-radius: 999px; padding: 1px 8px; margin-left: 4px; }
.ce-crew-actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }

/* Delivery Schedule: right-click a slot -> Add delivery here */
.week-grid .cell { position: relative; }
.week-grid .cell.can-add { padding-bottom: 26px; }
/* "+ Add run" in each slot: quiet until you point at the slot. */
.cell-add { position: absolute; left: 4px; right: 4px; bottom: 4px; height: 20px; border: 1px dashed transparent; border-radius: 6px; background: none; color: var(--ink-mute); font: inherit; font-size: 11px; font-weight: 600; cursor: pointer; opacity: 0; transition: opacity .12s, border-color .12s, background .12s; }
.week-grid .cell:hover .cell-add, .cell-add:focus-visible { opacity: 1; border-color: var(--border-strong); }
.cell-add:hover { background: var(--accent-soft); color: var(--ink); border-color: var(--accent); }
@media (hover: none) { .cell-add { opacity: .7; border-color: var(--border); } }
.slot-menu-backdrop { position: fixed; inset: 0; z-index: 400; }
.slot-menu { position: fixed; min-width: 220px; max-width: 260px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow-lg); padding: 6px; animation: fade-in .12s ease-out; }
.slot-menu-head { font-size: 11px; font-weight: 700; color: var(--ink-soft); padding: 6px 10px 7px; border-bottom: 1px solid var(--border); margin-bottom: 4px; display: flex; flex-direction: column; gap: 1px; }
.slot-menu-head span { font-weight: 500; color: var(--ink-mute); font-size: 10.5px; }
.slot-menu-item { display: block; width: 100%; text-align: left; border: 0; background: none; font: inherit; font-size: 13px; font-weight: 600; color: var(--ink); padding: 9px 10px; border-radius: 7px; cursor: pointer; }
.slot-menu-item:hover, .slot-menu-item:focus-visible { background: var(--accent-soft); outline: none; }
/* Delivery attachments (detail drawer) */
.da-box { margin-top: 16px; padding: 12px 14px; background: var(--bg-sunk); border: 1px solid var(--border); border-radius: var(--radius); }
.da-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 8px; }
.da-add { font-size: 12px; padding: 5px 11px; text-transform: none; letter-spacing: 0; }
.da-empty, .da-busy { font-size: 12px; color: var(--ink-mute); padding: 2px 0 4px; }
.da-busy { color: var(--ink-soft); font-style: italic; }
.da-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: 8px; margin-top: 6px; }
.da-kind { flex: 0 0 38px; height: 30px; border-radius: 6px; display: grid; place-items: center; font-family: var(--font-mono); font-size: 10px; font-weight: 700; background: #ebedf0; color: var(--ink-soft); }
.da-kind.da-pdf { background: #fde0e0; color: #b3242a; }
.da-kind.da-img { background: #e0eef8; color: #2a5fa3; }
.da-kind.da-xls { background: #e0f5e9; color: #1f7a43; }
.da-kind.da-doc { background: #e3ecfb; color: #2b57a6; }
.da-name { flex: 1 1 auto; min-width: 0; text-align: left; border: 0; background: none; padding: 0; font: inherit; font-size: 13px; font-weight: 600; color: var(--ink); cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.da-name:hover { text-decoration: underline; }
.da-meta { flex: 0 0 auto; font-size: 11px; color: var(--ink-mute); white-space: nowrap; }
.da-x { flex: 0 0 auto; width: 28px; height: 28px; border: 0; background: none; color: var(--ink-mute); border-radius: 6px; cursor: pointer; }
.da-x:hover { background: var(--bg-sunk); color: var(--bad); }
@media (max-width: 640px) { .da-meta { display: none; } .da-x { width: 36px; height: 36px; } }
.intake-slotnote { font-size: 12.5px; color: var(--ink-soft); background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border)); border-radius: var(--radius); padding: 9px 12px; margin-bottom: 12px; line-height: 1.45; }
.ce-crew-actions .btn { font-size: 12px; }
.ce-add-select { width: auto; min-width: 150px; font-size: 12.5px; padding: 6px 28px 6px 10px; }
.ce-body > * { flex-shrink: 0; }
.ce-picker { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px; background: var(--bg-sunk); border: 1px solid var(--border); border-radius: 10px; max-height: 220px; overflow-y: auto; flex-shrink: 0; }
.ce-pick { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--border); background: var(--bg-elev); border-radius: 999px; padding: 5px 11px; font: inherit; font-size: 12.5px; cursor: pointer; transition: var(--t); }
.ce-pick:hover { border-color: var(--border-strong); }
.ce-pick.on { background: var(--accent-soft); border-color: var(--accent); color: var(--ink); font-weight: 600; }
.ce-pick-check { font-size: 11px; color: var(--accent); font-weight: 700; }
.ce-empty { font-size: 13px; color: var(--ink-mute); text-align: center; padding: 22px; border: 1px dashed var(--border); border-radius: 10px; line-height: 1.5; }
.ce-rows { display: flex; flex-direction: column; gap: 10px; }
.ce-row { border: 1px solid var(--border); border-radius: 10px; padding: 12px 13px; background: var(--bg-elev); }
/* Wraps because the pills below cannot shrink: on a phone the crew row breaks
   onto a second line instead of the pills overflowing across the name. */
.ce-row-head { display: flex; align-items: center; gap: 9px; margin-bottom: 9px; flex-wrap: wrap; }
.ce-avatar { width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 10px; font-weight: 700; display: grid; place-items: center; flex-shrink: 0; }
/* flex-basis auto, not 0: the name's real width has to count when the browser
   decides where the row breaks, or a long name never triggers the wrap. */
.ce-name { font-size: 14px; font-weight: 650; color: var(--ink); flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.ce-row-total { font-size: 13px; font-weight: 700; color: var(--ink); flex-shrink: 0; }
.ce-row-x { border: none; background: transparent; color: var(--ink-mute); cursor: pointer; font-size: 13px; padding: 2px 6px; border-radius: 6px; flex-shrink: 0; }
.ce-row-x:hover { background: var(--bg-sunk); color: var(--bad); }
.ce-lines { display: flex; flex-direction: column; gap: 7px; }
.ce-line { display: flex; align-items: center; gap: 7px; }
.ce-line-job { flex: 1; min-width: 0; }
.ce-hrs { display: flex; align-items: center; gap: 5px; }
.ce-hrs span { font-size: 10px; font-weight: 700; text-transform: uppercase; color: var(--ink-mute); }
.ce-hrs .input { width: 54px; text-align: center; }
.ce-line-x { border: none; background: transparent; color: var(--ink-mute); cursor: pointer; font-size: 12px; padding: 3px 5px; border-radius: 6px; flex-shrink: 0; }
.ce-line-x:hover { background: var(--bg-sunk); color: var(--bad); }
.ce-line-x-sp { width: 21px; flex-shrink: 0; }
.ce-addline { margin-top: 8px; border: none; background: transparent; color: var(--accent); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; padding: 2px 0; }
.ce-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ce-grand { font-size: 13px; color: var(--ink-soft); }
.ce-saved { font-size: 13px; font-weight: 600; color: var(--ok); }
.ce-carried { font-size: 11.5px; color: #2a5a75; background: #eef4fb; border: 1px solid #b8cfe3; border-radius: 8px; padding: 7px 10px; margin-bottom: 8px; line-height: 1.45; }
/* Site allowances — missing-rate warning */
.ts-allow-warn { border: 1px solid #e0a94a; background: #fdf6e8; border-radius: 10px; padding: 12px 14px; margin-bottom: 16px; }
.ts-allow-warn-head { font-size: 13px; font-weight: 700; color: #9a6a10; }
.ts-allow-warn-txt { font-size: 12px; color: var(--ink-soft); margin: 5px 0 9px; line-height: 1.5; }
.ts-allow-warn-list { display: flex; flex-wrap: wrap; gap: 6px; }
.ts-allow-warn-chip { font: inherit; font-size: 11.5px; background: #fff; border: 1px solid #e0cf9c; border-radius: 999px; padding: 4px 10px; color: var(--ink); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.ts-allow-warn-chip:hover { border-color: #d3a44a; background: #fffaf0; }
.ts-allow-warn-chip span { font-family: var(--font-mono); font-size: 10px; color: #9a6a10; font-weight: 700; }
.ce-save { white-space: nowrap; }
.pv-phone .ce-foot { flex-wrap: wrap; gap: 8px; }
.pv-phone .ce-foot .ce-grand, .pv-phone .ce-foot .ce-saved { flex-basis: 100%; order: 2; }
.pv-phone .ce-foot > div { order: 1; margin-left: auto; }
/* Red-flag empty time selects when confirming a TBC delivery */
.qtime-invalid .qtime-sel { border-color: var(--bad); background: #fdecee; }
/* Confirm-reminder footer — stack the caption above the buttons on phone */
.pv-phone .cr-foot { flex-direction: column; align-items: stretch; gap: 10px; }
.pv-phone .cr-foot-note { order: 2; }
.pv-phone .cr-foot-btns { order: 1; flex-wrap: wrap; }
.pv-phone .cr-foot-btns .btn { flex: 1; min-width: 0; white-space: nowrap; font-size: 12px; padding: 8px 6px; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 560px) {
  .cr-foot { flex-direction: column; align-items: stretch; gap: 10px; }
  .cr-foot-note { order: 2; }
  .cr-foot-btns { order: 1; flex-wrap: wrap; }
  .cr-foot-btns .btn { flex: 1; min-width: 0; white-space: nowrap; font-size: 12px; padding: 8px 6px; overflow: hidden; text-overflow: ellipsis; }
}
.pv-phone .ce-modal { max-height: 88vh; height: auto; }
.pv-phone .ce-body { max-height: none; flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.pv-phone .ce-line { flex-wrap: wrap; }
.pv-phone .ce-line-job { flex-basis: 100%; }
@media (max-width: 560px) { .ce-line { flex-wrap: wrap; } .ce-line-job { flex-basis: 100%; } }

/* ============================================================
   DAY LABOUR DOCKET — PHONE / DEVICE-FRAME CARD LAYOUT
   Wide data tables collapse into stacked, labelled cards on phone.
   The printed A4 docket (body.dl-printing / @media print) is untouched.
   ============================================================ */
.dlp-cards .dlr-scroll{ overflow-x:visible; border:none; }
.dlp-cards .dlr-table{ font-size:13px; }
.dlp-cards .dlr-table thead{ display:none; }
.dlp-cards .dlr-table, .dlp-cards .dlr-table tbody, .dlp-cards .dlr-table tfoot, .dlp-cards .dlr-table tr, .dlp-cards .dlr-table td{ display:block; width:auto; }
.dlp-cards .dlr-table tr{ border:1px solid #d6d9de; border-radius:10px; margin:0 0 9px; padding:8px 11px 6px; background:#fff; box-shadow:var(--shadow-sm); }
.dlp-cards .dlr-table tfoot tr{ background:#f4f5f7; }
.dlp-cards .dlr-table td{ border:none; display:flex; align-items:center; justify-content:space-between; gap:12px; text-align:right; padding:5px 0; min-height:38px; }
.dlp-cards .dlr-table td + td{ border-top:1px solid #eef0f2; }
.dlp-cards .dlr-table td::before{ content:attr(data-label); flex:0 0 44%; text-align:left; font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:#6b7480; }
.dlp-cards .dlr-table td.dlr-rowhead{ justify-content:flex-start; border:none; border-bottom:1px solid #e6e8eb; margin-bottom:4px; padding:2px 0 7px; font-size:15px; font-weight:700; text-align:left; }
.dlp-cards .dlr-table td.dlr-rowhead::before{ content:none; }
.dlp-cards .dlr-table td.dlr-rmcell{ justify-content:flex-end; padding-top:2px; }
.dlp-cards .dlr-table td.dlr-rmcell::before{ content:none; }
.dlp-cards .dlr-table td .dlr-cell{ width:100%; max-width:190px; padding:7px 8px; }
.dlp-cards .dlr-table td.dlr-rowhead .dlr-cell{ max-width:none; font-weight:700; }
.dlp-cards .dlr-table td .dlr-cell.ctr{ max-width:120px; text-align:right; }
/* Meta / sign-off / header stack to one column */
.dlp-stack .dlr-meta{ grid-template-columns:1fr; gap:10px; }
.dlp-stack .dlr-meta label{ flex-direction:column; align-items:stretch; gap:3px; }
.dlp-stack .dlr-meta label > span{ min-width:0; }
.dlp-stack .dlr-sign-grid{ grid-template-columns:1fr; gap:16px; }
.dlp-stack .dlr-head{ flex-direction:column; gap:14px; }
.dlp-stack .dlr-recordbox{ text-align:left; min-width:0; width:100%; }
.dlp-stack .dlr-recordbox .dlr-inp{ width:100%; text-align:left; }
.dlp-stack .dl-paper{ padding:16px 14px; }
/* Controls & header actions go full width and wrap */
.dlp-stack .dl-header{ flex-direction:column; align-items:stretch; gap:12px; }
.dlp-stack .dl-header > div{ flex-wrap:wrap; }
.dlp-stack .dl-controls .field{ width:100% !important; }
.dlp-stack .dl-controls .field > div,
.dlp-stack .dl-controls select.select,
.dlp-stack .dl-controls input.input{ width:100% !important; box-sizing:border-box; }
.dlp-stack .dlr-email{ flex-direction:column; align-items:stretch; }
.dlp-stack .dlr-email > .dlr-eq-field{ flex:0 0 auto; }

/* Apply inside the iPhone preview frame … */
.pv-phone .dl-wrap{ }
.pv-phone .dlr-scroll{ overflow-x:visible; border:none; }
.pv-phone .dlr-table thead{ display:none; }
.pv-phone .dlr-table, .pv-phone .dlr-table tbody, .pv-phone .dlr-table tfoot, .pv-phone .dlr-table tr, .pv-phone .dlr-table td{ display:block; width:auto; }
.pv-phone .dlr-table tr{ border:1px solid #d6d9de; border-radius:10px; margin:0 0 9px; padding:8px 11px 6px; background:#fff; box-shadow:var(--shadow-sm); }
.pv-phone .dlr-table tfoot tr{ background:#f4f5f7; }
.pv-phone .dlr-table td{ border:none; display:flex; align-items:center; justify-content:space-between; gap:12px; text-align:right; padding:5px 0; min-height:38px; }
.pv-phone .dlr-table td + td{ border-top:1px solid #eef0f2; }
.pv-phone .dlr-table td::before{ content:attr(data-label); flex:0 0 44%; text-align:left; font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:#6b7480; }
.pv-phone .dlr-table td.dlr-rowhead{ justify-content:flex-start; border:none; border-bottom:1px solid #e6e8eb; margin-bottom:4px; padding:2px 0 7px; font-size:15px; font-weight:700; text-align:left; }
.pv-phone .dlr-table td.dlr-rowhead::before{ content:none; }
.pv-phone .dlr-table td.dlr-rmcell{ justify-content:flex-end; padding-top:2px; }
.pv-phone .dlr-table td.dlr-rmcell::before{ content:none; }
.pv-phone .dlr-table td .dlr-cell{ width:100%; max-width:190px; padding:7px 8px; }
.pv-phone .dlr-table td.dlr-rowhead .dlr-cell{ max-width:none; font-weight:700; }
.pv-phone .dlr-table td .dlr-cell.ctr{ max-width:120px; text-align:right; }
.pv-phone .dlr-meta{ grid-template-columns:1fr; gap:10px; }
.pv-phone .dlr-meta label{ flex-direction:column; align-items:stretch; gap:3px; }
.pv-phone .dlr-meta label > span{ min-width:0; }
.pv-phone .dlr-sign-grid{ grid-template-columns:1fr; gap:16px; }
.pv-phone .dlr-head{ flex-direction:column; gap:14px; }
.pv-phone .dlr-recordbox{ text-align:left; min-width:0; width:100%; }
.pv-phone .dlr-recordbox .dlr-inp{ width:100%; text-align:left; }
.pv-phone .dl-paper{ padding:16px 14px; }
.pv-phone .dl-header{ flex-direction:column; align-items:stretch; gap:12px; }
.pv-phone .dl-header > div{ flex-wrap:wrap; }
.pv-phone .dl-controls .field{ width:100% !important; }
.pv-phone .dl-controls .field > div,
.pv-phone .dl-controls select.select,
.pv-phone .dl-controls input.input{ width:100% !important; box-sizing:border-box; }
.pv-phone .dlr-email{ flex-direction:column; align-items:stretch; }
.pv-phone .dlr-email > .dlr-eq-field{ flex:0 0 auto; }
/* Header actions stack into full-width rows so nothing clips off the frame */
.dl-headactions{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; justify-content:flex-end; }
.dl-headactions > *{ min-width:0; }
.pv-phone .dl-headactions{ width:100%; }
.pv-phone .dl-headactions .admin-tabs{ width:100%; }
.pv-phone .dl-headactions .admin-tab{ flex:1; }
.pv-phone .dl-headactions > .btn{ flex:1 1 46%; justify-content:center; }
@media (max-width:620px){
  .dl-headactions{ width:100%; }
  .dl-headactions .admin-tabs{ width:100%; }
  .dl-headactions .admin-tab{ flex:1; }
  .dl-headactions > .btn{ flex:1 1 46%; justify-content:center; }
}
/* Signature is locked until the docket is saved for signing */
.dl-siglock{ display:flex; flex-direction:column; gap:8px; border:1px dashed var(--border-strong); border-radius:10px; padding:12px 14px; background:var(--bg-sunk); }
.dl-siglock-msg{ font-size:12.5px; color:var(--ink-soft); font-weight:600; display:flex; flex-direction:column; gap:3px; }
.dl-siglock-msg small{ font-size:11px; font-weight:400; color:var(--ink-mute); line-height:1.45; }
.dl-siglock-btn{ align-self:flex-start; font-size:12px; }
.pv-phone .dl-siglock-btn{ align-self:stretch; }

/* … and on a genuinely small screen */
@media (max-width:760px){
  .dlr-scroll{ overflow-x:visible; border:none; }
  .dlr-table thead{ display:none; }
  .dlr-table, .dlr-table tbody, .dlr-table tfoot, .dlr-table tr, .dlr-table td{ display:block; width:auto; }
  .dlr-table tr{ border:1px solid #d6d9de; border-radius:10px; margin:0 0 9px; padding:8px 11px 6px; background:#fff; box-shadow:var(--shadow-sm); }
  .dlr-table tfoot tr{ background:#f4f5f7; }
  .dlr-table td{ border:none; display:flex; align-items:center; justify-content:space-between; gap:12px; text-align:right; padding:5px 0; min-height:38px; }
  .dlr-table td + td{ border-top:1px solid #eef0f2; }
  .dlr-table td::before{ content:attr(data-label); flex:0 0 44%; text-align:left; font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:#6b7480; }
  .dlr-table td.dlr-rowhead{ justify-content:flex-start; border:none; border-bottom:1px solid #e6e8eb; margin-bottom:4px; padding:2px 0 7px; font-size:15px; font-weight:700; text-align:left; }
  .dlr-table td.dlr-rowhead::before{ content:none; }
  .dlr-table td.dlr-rmcell{ justify-content:flex-end; padding-top:2px; }
  .dlr-table td.dlr-rmcell::before{ content:none; }
  .dlr-table td .dlr-cell{ width:100%; max-width:190px; padding:7px 8px; }
  .dlr-table td.dlr-rowhead .dlr-cell{ max-width:none; font-weight:700; }
  .dlr-table td .dlr-cell.ctr{ max-width:120px; text-align:right; }
  .dlr-sign-grid{ grid-template-columns:1fr; gap:16px; }
  .dlr-email{ flex-direction:column; align-items:stretch; }
  .dlr-email > .dlr-eq-field{ flex:0 0 auto; }
  /* Docket head on a phone: the record box sits under the letterhead as a
     tidy two-line ledger - label on the left, value on the right, one row
     each - instead of a right-aligned title box hanging off a left-aligned
     title. */
  .dlr-head{ flex-direction:column; gap:14px; }
  .dlr-recordbox{ text-align:left; min-width:0; width:100%; }
  .dlr-title{ margin-bottom:6px; }
  .dlr-rec-row{ justify-content:space-between; gap:12px; margin:0; padding:7px 0; border-bottom:1px dotted #c5c9cf; }
  .dlr-rec-row > span:first-child{ flex:0 0 auto; }
  .dlr-rec-row > span:last-child{ text-align:right; }
  .dlr-recordbox .dlr-inp, .dlr-recordbox input[type="date"].dlr-inp{ width:auto; max-width:60%; min-width:0; text-align:right; border-bottom:0; padding:0; display:inline-block; }
}

/* ==== AUTO: phone-preview mirror of @media max-width rules ==== */
/* The iPhone preview renders the app inside a ~430px frame that sits within a
   full-width browser window, so width-based media queries never fire. Every
   narrow-screen rule below is mirrored under .pv-phone so the phone preview
   matches a real phone. Generated — edit the source @media rules instead. */
.pv-phone .field-row { grid-template-columns: 1fr; gap: 0; }
.pv-phone .intake-wrap { padding: 16px 14px 60px; }
.pv-phone .intake-card { padding: 16px 14px 14px; border-radius: var(--radius); }
.pv-phone .intake-header h1 { font-size: 19px; }
.pv-phone .topbar { padding: 0 10px; height: 52px; gap: 8px; }
.pv-phone .topbar-right .acct-name { display: none; }
.pv-phone .nav-toggle .badge { margin-left: 2px; }
.pv-phone .topbar-right > span { display: none; }
.pv-phone .brand-sub { display: none; }
.pv-phone .brand { font-size: 0; }
.pv-phone .brand .brand-mark { font-size: 14px; }
.pv-phone .pill { padding: 9px 13px; font-size: 14px; }
.pv-phone .input, .pv-phone .textarea, .pv-phone .select { font-size: 16px; padding: 11px 12px; }
.pv-phone .hub-wrap { padding: 28px 16px 48px; }
.pv-phone .hub-grid { grid-template-columns: 1fr; }
.pv-phone .hub-header h1 { font-size: 24px; }
.pv-phone .eq-table-scroll, .pv-phone .sched-grid, .pv-phone .runsheet-run, .pv-phone .dlr-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.pv-phone .runsheet-paper, .pv-phone .dl-paper, .pv-phone .dl-wrap > .dlr, .pv-phone .vq-wrap { max-width: 100%; }
.pv-phone .runsheet-paper, .pv-phone .dl-paper { padding: 14px 14px; }
.pv-phone .runsheet-header, .pv-phone .dlr-head, .pv-phone .vqr-head { flex-wrap: wrap; gap: 10px; }
.pv-phone .runsheet-header .meta, .pv-phone .dlr-recordbox, .pv-phone .vqr-titlebox { text-align: left; min-width: 0; }
.pv-phone .dl-meta, .pv-phone .dlr-meta { grid-template-columns: 1fr 1fr; }
.pv-phone .sched-wrap, .pv-phone .fix-wrap, .pv-phone .ts-wrap, .pv-phone .dk-wrap, .pv-phone .lot-wrap, .pv-phone .admin-wrap, .pv-phone .missing-wrap, .pv-phone .runsheet-wrap, .pv-phone .vq-wrap, .pv-phone .dl-wrap, .pv-phone .ra-wrap { padding: 14px 12px; }
.pv-phone .modal { width: 100% !important; max-width: 100%; }
.pv-phone .drawer { width: 100%; }
.pv-phone .week-grid { min-width: 720px; }
.pv-phone .day-view { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.pv-phone .run-rows { min-width: 680px; }
.pv-phone .run-group-head { min-width: 680px; }
.pv-phone .runsheet-table { min-width: 680px; }
.pv-phone .delivery-card .dc-job, .pv-phone .delivery-card .dc-route, .pv-phone .delivery-card .dc-items {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv-phone .missing-header, .pv-phone .missing-toolbar { flex-wrap: wrap; gap: 8px; }
.pv-phone .missing-header .btn, .pv-phone .missing-toolbar .btn { white-space: nowrap; flex: 0 0 auto; }
.pv-phone .missing-stats { grid-template-columns: 1fr 1fr; }
.pv-phone .missing-list, .pv-phone .missing-grid { grid-template-columns: 1fr; }
.pv-phone .missing-card { min-width: 0; }
.pv-phone .missing-card .mc-title, .pv-phone .missing-card .mc-desc { overflow-wrap: anywhere; white-space: normal; }
.pv-phone .lot-title, .pv-phone .lot-area-title, .pv-phone .lot-header h1, .pv-phone .dk-csv-view h2, .pv-phone .dlr-title { white-space: normal; overflow-wrap: anywhere; }
.pv-phone .main { overflow-x: hidden; }
.pv-phone .delivery-card .dc-corner { display: none; }
.pv-phone .missing-row { flex-direction: column; align-items: stretch; gap: 6px; }
.pv-phone .missing-row > * { min-width: 0; }
.pv-phone .sched-toolbar, .pv-phone .runsheet-toolbar, .pv-phone .fix-toolbar, .pv-phone .ts-toolbar, .pv-phone .dk-toolbar, .pv-phone .admin-tabs { flex-wrap: wrap; row-gap: 8px; }
.pv-phone .sched-toolbar .btn, .pv-phone .runsheet-toolbar .btn { font-size: 12px; padding: 7px 10px; }
.pv-phone .sched-toolbar > div[style*="flex: 1"], .pv-phone .sched-toolbar > div[style*="flex:1"] { flex-basis: 100%; height: 0; }
.pv-phone .bulk-bar { flex-wrap: wrap; row-gap: 8px; position: sticky; bottom: 0; }
.pv-phone .bulk-bar button { flex: 1 1 auto; }
.pv-phone .late-warn-bar { flex-wrap: wrap; }
.pv-phone .detail-row { grid-template-columns: 1fr; gap: 2px; }
.pv-phone .tweaks-panel-host, .pv-phone .tweaks-panel { max-width: 100vw; }
.pv-phone .vqr-meta, .pv-phone .dlr-head { grid-template-columns: 1fr; }
.pv-phone .dlr-head { flex-wrap: wrap; }
.pv-phone .dlr-recordbox { text-align: left; min-width: 0; }
.pv-phone .autocomplete-list { min-width: 0; left: 0; right: 0; max-width: 100%; }
.pv-phone .autocomplete-item .sub { white-space: normal; overflow-wrap: anywhere; }
.pv-phone .share-grid { grid-template-columns: 1fr; }
.pv-phone .share-phone { display: none; }
.pv-phone .ed-companies { grid-template-columns: 1fr; }
.pv-phone .rep-trend-summary { grid-template-columns: repeat(2, 1fr); }
.pv-phone .rep-wrap { padding: 14px 12px; }
.pv-phone .rep-table { display: block; overflow-x: auto; }
.pv-phone .reminder-grid { grid-template-columns: 1fr; }
.pv-phone .reminder-phone { display: none; }
.pv-phone .hub-grid { grid-template-columns: repeat(2, 1fr); }
.pv-phone .ts-filter-group {
    margin-left: 0 !important;
    padding-left: 0 !important;
    border-left: none !important;
    flex-basis: 100%;
    flex-wrap: wrap;
    margin-top: 4px;
    padding-top: 8px;
    border-top: 1px solid var(--border); }
.pv-phone .ts-toolbar-spacer { display: none; }
.pv-phone .ts-wrap { padding: 14px 12px 40px; overflow-x: hidden; }
.pv-phone .ts-toolbar { flex-direction: column; align-items: stretch; gap: 10px; }
.pv-phone .ts-projsel, .pv-phone .ts-jobinput { width: 100%; }
.pv-phone .ts-jobfilter { flex-direction: column; align-items: stretch; gap: 4px; width: 100%; }
.pv-phone .ts-jobfilter .ts-flabel { margin-left: 0 !important; }
.pv-phone .ts-filter-group { flex-direction: column; align-items: stretch; }
.pv-phone .ts-exportrow { width: 100%; padding-top: 10px; border-top: 1px solid var(--border); }
.pv-phone .ts-exportrow .btn { flex: 1 1 auto; justify-content: center; }
.pv-phone .ts-showing { flex-basis: 100%; }
.pv-phone .appheader h1 { white-space: normal; overflow: visible; font-size: 16px; line-height: 1.15; }
.pv-phone .appheader .acct-name { display: none; }
.pv-phone .dlr-hours-table { display: none; }
.pv-phone .dlr-hours-cards { display: flex; }
.pv-phone .dlr-reg-row { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "no main hrs" "no meta hrs" "no status status"; column-gap: 12px; row-gap: 4px; padding: 14px; position: relative; }
.pv-phone .dlr-reg-no { grid-area: no; align-self: start; }
.pv-phone .dlr-reg-main { grid-area: main; }
.pv-phone .dlr-reg-status { grid-area: status; justify-content: flex-start; min-width: 0; }
.pv-phone .dlr-reg-hrs { grid-area: hrs; align-self: start; min-width: 0; }
.pv-phone .dlr-reg-date { display: none; }
.pv-phone .dlr-reg-row .dlr-x { position: absolute; top: 8px; right: 8px; }
.pv-phone .vqr-meta { grid-template-columns: 1fr 1fr; }
.pv-phone .dlr-meta { grid-template-columns: 1fr 1fr; }
.pv-phone .dlr-meta label, .pv-phone .dlr-meta > * { min-width: 0; }
.pv-phone .dlr-meta .dlr-inp, .pv-phone .dlr-meta input, .pv-phone .dlr-meta select { width: 100%; min-width: 0; box-sizing: border-box; }
.pv-phone .vqr-meta label { min-width: 0; }
.pv-phone .vqr-meta .dlr-inp, .pv-phone .vqr-meta input, .pv-phone .vqr-meta select { width: 100%; min-width: 0; box-sizing: border-box; }
/* Docket meta: stack single-column on phone and let long labels wrap instead of clipping */
.pv-phone .dlr-meta { grid-template-columns: 1fr; }
.pv-phone .dlr-meta label { flex-direction: column; align-items: stretch; gap: 3px; }
.pv-phone .dlr-meta label > span { min-width: 0; white-space: normal; }
.pv-phone .vqr-quals { grid-template-columns: 1fr; }
.pv-phone .fm-ackpanel-row { flex-wrap: wrap; gap: 4px; }
.pv-phone .eq-row { grid-template-columns: 1fr auto; }
.pv-phone .eq-loc, .pv-phone .eq-resp { display: none; }
.pv-phone .ts-row { flex-wrap: wrap; gap: 6px 12px; align-items: center; }
.pv-phone .ts-row-status { width: auto; order: 1; }
.pv-phone .ts-row-total { width: auto; order: 2; margin-left: auto; text-align: right; display: flex; align-items: baseline; gap: 6px; }
.pv-phone .ts-row-super { order: 3; flex-basis: 100%; min-width: 0; text-align: left; display: flex; align-items: baseline; gap: 6px; }
.pv-phone .ts-row-main { order: 4; flex-basis: 100%; min-width: 0; }
.pv-phone .ts-row-chev { display: none; }
.pv-phone .ts-row-week { display: block; margin-left: 0 !important; margin-top: 2px; }
.pv-phone .ts-rates-grid { grid-template-columns: 1fr; }
.pv-phone .ts-sum-stats { grid-template-columns: repeat(2, 1fr); }
.pv-phone .ts-sum-row { grid-template-columns: 1.6fr 0.6fr 1fr; }
.pv-phone .ts-sum-proj { display: none; }
.pv-phone .lv-grid, .pv-phone .lv-grid-3 { grid-template-columns: 1fr; }
.pv-phone .sched-settings-overlay { padding: 0; }
.pv-phone .sched-settings-modal { width: 100%; height: 100%; max-height: 100%; border-radius: 0; }
.pv-phone .fab-cards { grid-template-columns: repeat(3, 1fr); }
.pv-phone .fab-form-grid, .pv-phone .fab-stage-editrow { grid-template-columns: 1fr 1fr; }
.pv-phone .fab-row { flex-wrap: wrap; }
.pv-phone .fab-row-pctwrap { width: 70px; }
.pv-phone .fab-board { grid-template-columns: 1fr; }
.pv-phone .fab-col-body { max-height: none; }
.pv-phone .missing-row { flex-wrap: wrap; align-items: flex-start; gap: 6px 8px; padding: 12px; position: relative; }
.pv-phone .mi-row-flags { width: auto; flex: 0 0 auto; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 6px; order: 1; }
.pv-phone .mi-row-job { width: auto; order: 2; margin-left: auto; padding-right: 22px; text-align: right; }
.pv-phone .mi-row-main { flex: 1 1 100%; order: 3; }
.pv-phone .mi-row-sub { white-space: normal; overflow-wrap: anywhere; line-height: 1.45; }
.pv-phone .mi-row-by { flex: 1 1 auto; order: 4; text-align: left; min-width: 0; display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; }
.pv-phone .mi-row-photo { order: 5; margin-left: auto; }
.pv-phone .mi-row-chev { position: absolute; top: 12px; right: 10px; }
.pv-phone .missing-filter .select { flex: 1 1 45%; width: auto !important; min-width: 0; }
.pv-phone .qtime { flex-wrap: nowrap; }
.pv-phone .qtime-sel { flex: 1 1 0; min-width: 0; }
.pv-phone .ts-weekpick { width: 100%; }
.pv-phone .ts-weekpick-btn { flex: 1; }
.pv-phone .ts-headrow { width: 100%; }
.pv-phone .ts-headrow > .btn-primary { flex: 1; }
.pv-phone .fc-flagrow { flex-wrap: wrap; }
.pv-phone .fc-flagrow .select { width: 100%; }
.pv-phone .mi-doption { flex-wrap: wrap; }
.pv-phone .mi-doption-items, .pv-phone .mi-doption-meta { white-space: normal; }
.pv-phone .fab-pack { grid-template-columns: 1fr; gap: 8px; position: relative; }
.pv-phone .fab-stages { flex-wrap: wrap; }
.pv-phone .hr-lanes { flex-direction: column; }
.pv-phone .hr-lane-arrow { transform: rotate(90deg); padding: 4px 0; align-self: center; }
.pv-phone .hr-wrap { padding: 14px; }
.pv-phone .hr-cards { grid-template-columns: repeat(2, 1fr); gap: 8px; }
.pv-phone .hr-card-v { font-size: 20px; }
.pv-phone .hr-jobtable-wrap { overflow-x: auto; }
.pv-phone .hr-jobtable { min-width: 720px; }
.pv-phone .dls-sign { grid-template-columns:1fr; gap:14px; }
.pv-phone .dls-head { flex-direction:column; gap:10px; }
.pv-phone .dls-meta { text-align:left; }
.pv-phone .dls-card { padding:18px 15px; }
.pv-phone .dl-headactions { width:100%; }
.pv-phone .dl-headactions .admin-tabs { width:100%; }
.pv-phone .dl-headactions .admin-tab { flex:1; }
.pv-phone .dl-headactions > .btn { flex:1 1 46%; justify-content:center; }
.pv-phone .dlr-scroll { overflow-x:visible; border:none; }
.pv-phone .dlr-table thead { display:none; }
.pv-phone .dlr-table, .pv-phone .dlr-table tbody, .pv-phone .dlr-table tfoot, .pv-phone .dlr-table tr, .pv-phone .dlr-table td { display:block; width:auto; }
.pv-phone .dlr-table tr { border:1px solid #d6d9de; border-radius:10px; margin:0 0 9px; padding:8px 11px 6px; background:#fff; box-shadow:var(--shadow-sm); }
.pv-phone .dlr-table tfoot tr { background:#f4f5f7; }
.pv-phone .dlr-table td { border:none; display:flex; align-items:center; justify-content:space-between; gap:12px; text-align:right; padding:5px 0; min-height:38px; }
.pv-phone .dlr-table td + td { border-top:1px solid #eef0f2; }
.pv-phone .dlr-table td::before { content:attr(data-label); flex:0 0 44%; text-align:left; font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:#6b7480; }
.pv-phone .dlr-table td.dlr-rowhead { justify-content:flex-start; border:none; border-bottom:1px solid #e6e8eb; margin-bottom:4px; padding:2px 0 7px; font-size:15px; font-weight:700; text-align:left; }
.pv-phone .dlr-table td.dlr-rowhead::before { content:none; }
.pv-phone .dlr-table td.dlr-rmcell { justify-content:flex-end; padding-top:2px; }
.pv-phone .dlr-table td.dlr-rmcell::before { content:none; }
.pv-phone .dlr-table td .dlr-cell { width:100%; max-width:190px; padding:7px 8px; }
.pv-phone .dlr-table td.dlr-rowhead .dlr-cell { max-width:none; font-weight:700; }
.pv-phone .dlr-table td .dlr-cell.ctr { max-width:120px; text-align:right; }
.pv-phone .dlr-sign-grid { grid-template-columns:1fr; gap:16px; }
.pv-phone .dlr-email { flex-direction:column; align-items:stretch; }
.pv-phone .dlr-email > .dlr-eq-field { flex:0 0 auto; }


/* ============================================================
   PRODUCTION TRACKER — status grid + meeting review
   ============================================================ */
/* ---- Dense status grid ---- */
.fg-scroll { overflow: auto; max-height: calc(100vh - 300px); border: 1px solid var(--border); border-radius: 12px; background: var(--bg-elev); box-shadow: var(--shadow-sm); }
.fg { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12px; }
.fg thead th { position: sticky; top: 0; z-index: 3; background: var(--bg-elev); border-bottom: 2px solid var(--border-strong); padding: 8px 7px; text-align: left; font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-mute); white-space: nowrap; }
.fg tbody td { border-bottom: 1px solid var(--border); padding: 0 7px; height: 34px; vertical-align: middle; color: var(--ink-soft); }
.fg tbody tr:last-child td { border-bottom: none; }
.fg-row:nth-child(even) td { background: color-mix(in srgb, var(--bg-sunk) 45%, transparent); }
.fg-row:hover td, .fg-row:hover .fg-sticky, .fg-row:hover .fg-sticky2 { background: var(--accent-soft); }
/* sticky first two columns */
.fg-sticky { position: sticky; left: 0; z-index: 2; background: var(--bg-elev); }
.fg-sticky2 { position: sticky; left: 88px; z-index: 2; background: var(--bg-elev); box-shadow: 6px 0 6px -6px rgba(0,0,0,.16); }
.fg thead .fg-sticky, .fg thead .fg-sticky2 { z-index: 4; }
.fg-row:nth-child(even) .fg-sticky, .fg-row:nth-child(even) .fg-sticky2 { background: color-mix(in srgb, var(--bg-sunk) 45%, var(--bg-elev)); }
.fg-c-job { width: 88px; } .fg-c-desc { width: 200px; } .fg-c-proj { width: 132px; }
.fg-c-num { width: 58px; text-align: right !important; } .fg-c-who { width: 92px; }
.fg-c-due { width: 104px; } .fg-c-stage { width: 34px; text-align: center !important; }
.fg-c-pct { width: 76px; } .fg-c-age { width: 46px; text-align: right !important; }
/* status edge on the job cell */
.fg-job { border-left: 3px solid transparent; padding-left: 8px !important; white-space: nowrap; }
.fg-late .fg-job { border-left-color: #c0392b; }
.fg-soon .fg-job { border-left-color: #e0a94a; }
.fg-done .fg-job { border-left-color: #8a929c; }
.fg-paused .fg-job { border-left-color: #8a7bd0; }
.fg-none .fg-job { border-left-color: #5b8aa6; }
.fg-done td { color: var(--ink-mute); }
.fg-joblink { border: none; background: none; padding: 0; font: inherit; font-size: 12.5px; font-weight: 700; color: var(--ink); cursor: pointer; }
.fg-joblink:hover { color: var(--accent-ink, var(--accent)); text-decoration: underline; }
.fg-warn { margin-left: 5px; font-size: 11px; color: #c0392b; }
.fg-desc { color: var(--ink); font-weight: 550; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fg-proj, .fg-who { max-width: 132px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; }
.fg-num { text-align: right; font-size: 11.5px; color: var(--ink); }
.fg-due { white-space: nowrap; }
.fg-dateinp { width: 96px; border: 1px solid transparent; background: transparent; font: inherit; font-size: 11px; font-family: var(--font-mono); color: var(--ink); padding: 2px 3px; border-radius: 5px; letter-spacing: -0.2px; }
.fg-dateinp::-webkit-calendar-picker-indicator { opacity: 0; width: 12px; margin-left: -2px; cursor: pointer; }
.fg-dateinp:hover::-webkit-calendar-picker-indicator { opacity: 0.55; }
.fg-dateinp:hover { border-color: var(--border); background: var(--bg-elev); }
.fg-dateinp:focus { border-color: var(--accent); background: var(--bg-elev); outline: none; }
.fg-nodate { display: inline-block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #b8801d; background: rgba(224,169,74,0.16); border-radius: 999px; padding: 1px 6px; margin-left: 2px; }
/* stage cells */
.fg-stagecell { text-align: center; padding: 0 3px !important; }
.fg-stagewrap { position: relative; display: inline-grid; place-items: center; width: 34px; height: 24px; border: 1px solid var(--border); border-radius: 6px; }
.fg-stagewrap:hover { box-shadow: var(--shadow-sm); }
.fg-stageglyph { font-size: 12px; line-height: 1; pointer-events: none; }
/* The select sits invisibly on top: closed it shows nothing (the glyph reads
   through), open it presents the full five-state list. */
.fg-stagesel { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
span.fg-stage { display: inline-grid; place-items: center; }
.fg-c-stage { width: 40px; }
.fg-stage { width: 26px; height: 24px; border: 1px solid var(--border); border-radius: 6px; font-size: 12px; line-height: 1; cursor: pointer; transition: var(--t); padding: 0; }
.fg-stage:hover:not(:disabled) { transform: scale(1.14); box-shadow: var(--shadow-sm); }
.fg-stage:disabled { cursor: default; }
.fg-stage-off { opacity: 0.3; }
/* progress + idle */
.fg-pct { white-space: nowrap; }
.fg-pctnum { display: inline-block; width: 32px; font-size: 11px; font-family: var(--font-mono); color: var(--ink); font-weight: 600; }
.fg-bar { display: inline-block; width: 48px; height: 5px; border-radius: 999px; background: var(--border); overflow: hidden; vertical-align: middle; }
.fg-bar i { display: block; height: 100%; border-radius: 999px; background: var(--accent); }
.fg-age { text-align: right; font-size: 11px; color: var(--ink-mute); }
.fg-age.stuck { color: #c0392b; font-weight: 700; }
.fab-archconfirm { width: 430px; max-width: 92vw; }
.dk-locmodal { width: 420px; max-width: 100%; }
.dk-loc-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.dk-loc-chip { font: inherit; font-size: 12px; font-weight: 600; border: 1px solid var(--border); background: var(--bg-elev); color: var(--ink); border-radius: 999px; padding: 5px 11px; cursor: pointer; }
.dk-loc-chip:hover { border-color: var(--accent); background: var(--accent-soft); }
.dk-loc-chip.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.redeliv-tick { border: 1px solid var(--border); background: var(--bg-elev); border-radius: 999px; font-size: 10px; line-height: 1; padding: 2px 6px; margin-left: 6px; cursor: pointer; }
.redeliv-tick:hover { background: var(--ok); color: #fff; border-color: var(--ok); }
.fab-ready-txt { font-size: 13px; color: var(--ink-soft); margin-bottom: 12px; }
.fab-ready-opts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.fab-ready-opt { font: inherit; font-size: 13px; font-weight: 650; border: 1px solid var(--border); background: var(--bg-elev); color: var(--ink); border-radius: 10px; padding: 14px 8px; cursor: pointer; transition: var(--t); }
.fab-ready-opt:hover { border-color: var(--accent); background: var(--accent-soft); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.fg-ready { display: inline-block; margin-left: 6px; font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: #1f7a4d; background: rgba(90,160,111,0.14); border-radius: 999px; padding: 1px 7px; white-space: nowrap; }
.fab-archconfirm-warn { font-size: 13px; line-height: 1.55; color: var(--ink-soft); background: #fdf6e8; border: 1px solid #e8cf96; border-radius: 10px; padding: 11px 13px; }
.fab-drawstat { font: inherit; font-size: 11px; font-weight: 700; border: 1px solid #e0a94a; background: #fdf6e8; color: #9a6a10; border-radius: 999px; padding: 3px 10px; cursor: pointer; white-space: nowrap; }
.fab-drawstat.ifa { border-color: #5b8aa6; background: #eef4fb; color: #2a5a75; }
span.fab-drawstat { cursor: default; }
.fab-ifcbtn { font-size: 11px; padding: 4px 10px; }
.fg-c-arch { width: 34px; text-align: center !important; }
.fg-archbtn { border: 1px solid var(--border); background: var(--bg-elev); border-radius: 6px; font-size: 12px; line-height: 1; padding: 3px 6px; cursor: pointer; opacity: 0.55; transition: var(--t); }
.fg-archbtn:hover { opacity: 1; border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.fg-empty { text-align: center; color: var(--ink-mute); font-style: italic; padding: 28px 0 !important; }
.fab-archnote { font-size: 12.5px; color: var(--ink-mute); background: var(--bg-sunk); border: 1px solid var(--border); border-radius: 10px; padding: 10px 13px; margin-bottom: 12px; line-height: 1.5; }

/* ---- Meeting review ---- */
.pm-wrap { max-width: 1300px; }
.pm-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.pm-title { font-size: 17px; font-weight: 700; color: var(--ink); letter-spacing: -0.01em; }
.pm-sub { font-size: 12.5px; color: var(--ink-mute); margin-top: 2px; }
.pm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.pm-block { background: var(--bg-elev); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-sm); overflow: hidden; }
.pm-block-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--border); border-top: 3px solid var(--border-strong); }
.pm-block-t { font-size: 12px; font-weight: 700; color: var(--ink); }
.pm-block-n { font-size: 11px; font-family: var(--font-mono); color: var(--ink-mute); white-space: nowrap; }
.pm-late .pm-block-h { border-top-color: #c0392b; background: rgba(192,57,43,0.05); }
.pm-soon .pm-block-h { border-top-color: #e0a94a; background: rgba(224,169,74,0.07); }
.pm-nodate .pm-block-h { border-top-color: #5b8aa6; background: rgba(91,138,166,0.06); }
.pm-stuck .pm-block-h { border-top-color: #8a7bd0; background: rgba(138,123,208,0.06); }
.pm-list { display: flex; flex-direction: column; max-height: 262px; overflow-y: auto; }
.pm-line { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; border: none; background: none; border-bottom: 1px solid var(--border); padding: 7px 14px; font: inherit; cursor: pointer; }
.pm-line:last-child { border-bottom: none; }
.pm-line:hover { background: var(--bg-sunk); }
.pm-line-job { font-size: 11.5px; font-weight: 700; color: var(--ink); flex: 0 0 74px; }
.pm-line-desc { flex: 1; min-width: 0; font-size: 12px; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-line-right { font-size: 11.5px; color: var(--ink-mute); white-space: nowrap; }
.pm-line-right b { color: var(--ink); }
.pm-none { font-size: 12.5px; color: var(--ink-mute); font-style: italic; padding: 18px 14px; }
.pm-more { font-size: 11px; color: var(--ink-mute); padding: 7px 14px; border-top: 1px solid var(--border); background: var(--bg-sunk); }
/* tonnage chart */
.pm-chart .pm-block-h { border-top-color: var(--accent); }
.pm-bars { display: flex; align-items: flex-end; gap: 14px; padding: 16px 16px 6px; height: 190px; }
.pm-bar { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; }
.pm-bar-track { flex: 1; width: 100%; max-width: 62px; display: flex; align-items: flex-end; background: var(--bg-sunk); border-radius: 6px 6px 0 0; }
.pm-bar-plan { width: 100%; background: #c8ccd2; border-radius: 6px 6px 0 0; display: flex; align-items: flex-end; min-height: 2px; }
.pm-bar-done { width: 100%; background: #5aa06f; border-radius: 6px 6px 0 0; }
.pm-bar.current .pm-bar-plan { background: #b9bfc7; }
.pm-bar-ton { font-size: 11px; font-family: var(--font-mono); color: var(--ink); font-weight: 600; margin-top: 5px; }
.pm-bar-lbl { font-size: 10.5px; color: var(--ink-mute); margin-top: 1px; text-align: center; }
.pm-bar.current .pm-bar-lbl { color: var(--ink); font-weight: 700; }
.pm-legend { display: flex; gap: 16px; padding: 4px 16px 14px; font-size: 11px; color: var(--ink-mute); }
.pm-legend span { display: flex; align-items: center; gap: 6px; }
.pm-sw { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.pm-sw-done { background: #5aa06f; } .pm-sw-plan { background: #c8ccd2; }
/* phone */
.pv-phone .pm-grid { grid-template-columns: 1fr; }
.pv-phone .fg-scroll { max-height: none; }
.pv-phone .fg-sticky2 { position: static; box-shadow: none; }
.pv-phone .fg-c-desc { min-width: 150px; }
@media (max-width: 900px) {
  .pm-grid { grid-template-columns: 1fr; }
  .fg-sticky2 { position: static; box-shadow: none; }
}


/* ============================================================
   EQUIPMENT CUSTODY, REQUESTS & SITE BOARD
   ============================================================ */
.eq-spill { display: inline-block; font-size: 10.5px; font-weight: 700; border-radius: 999px; padding: 2px 9px; white-space: nowrap; }
.eq-spill.compact { font-size: 9.5px; padding: 2px 7px; }
.eq-rowacts { display: flex; gap: 5px; align-items: center; }
.eq-cust-btn { font-size: 11px !important; padding: 2px 9px !important; white-space: nowrap; }
.eq-cust-wrap { display: flex; gap: 5px; align-items: center; }
.eq-cust-with { gap: 4px; }
.eq-cust-holder { font-size: 11px; font-weight: 600; color: var(--ink-soft); white-space: nowrap; max-width: 96px; overflow: hidden; text-overflow: ellipsis; }
.eq-cust-nonum { font-size: 10px; color: var(--ink-mute); font-style: italic; white-space: nowrap; }
.eq-ask-note { font-size: 12px; color: var(--ink-soft); line-height: 1.5; margin-bottom: 9px; }
.tl-noteinp { width: 100%; min-width: 120px; border: 1px solid transparent; background: transparent; font: inherit; font-size: 11.5px; color: var(--ink); padding: 3px 5px; border-radius: 5px; }
.tl-noteinp:hover { border-color: var(--border); background: var(--bg-elev); }
.tl-noteinp:focus { border-color: var(--accent); background: var(--bg-elev); outline: none; }
.tl-noteinp::placeholder { color: var(--ink-mute); font-style: italic; }
a.eq-cust-btn { text-decoration: none; }
.eq-cust-held { font-size: 10.5px; font-weight: 700; color: var(--ok); white-space: nowrap; }
.eq-cust-pending { font-size: 10.5px; font-weight: 600; color: #b85515; white-space: nowrap; }
.eq-cust-mute { color: var(--ink-mute); }
.eq-req-hint { font-size: 11.5px; color: var(--ink-mute); margin-top: 6px; line-height: 1.45; }
.eq-req-warn { font-size: 11.5px; font-weight: 600; color: var(--bad); margin-top: 6px; }
.eq-req-photo { display: flex; align-items: center; gap: 10px; }
.eq-req-photo img { width: 96px; height: 72px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); }
/* requests tab */
.eq-reqs-note { font-size: 12.5px; color: var(--ink-mute); background: var(--bg-sunk); border: 1px solid var(--border); border-radius: 10px; padding: 10px 13px; margin-bottom: 14px; line-height: 1.5; }
.eq-reqs-sec { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-mute); margin: 16px 0 7px; }
.eq-reqs-none { font-size: 12.5px; color: var(--ink-mute); font-style: italic; padding: 10px 2px; }
.eq-req-list { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--bg-elev); }
.eq-req-row { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-bottom: 1px solid var(--border); }
.eq-req-row:last-child { border-bottom: none; }
.eq-req-type { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; border-radius: 5px; padding: 3px 7px; flex-shrink: 0; }
.eq-req-transfer { background: rgba(91,138,166,0.14); color: #3f7fa8; }
.eq-req-pickup { background: rgba(196,122,46,0.16); color: #a9791f; }
.eq-req-delivery { background: rgba(90,160,111,0.16); color: #3f7a52; }
.eq-req-offhire { background: rgba(138,123,208,0.16); color: #6b5fc0; }
.eq-req-main { flex: 1; min-width: 0; }
.eq-req-item { font-size: 13px; font-weight: 650; color: var(--ink); }
.eq-req-meta { font-size: 11.5px; color: var(--ink-mute); margin-top: 1px; }
.eq-req-note { font-size: 11.5px; color: var(--ink-soft); font-style: italic; margin-top: 3px; }
.eq-req-thumb { width: 42px; height: 34px; object-fit: cover; border-radius: 6px; border: 1px solid var(--border); flex-shrink: 0; }
.eq-req-acts { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.eq-req-status { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-mute); }
.eq-req-status.is-accepted { color: var(--ok); } .eq-req-status.is-declined { color: var(--bad); } .eq-req-status.is-done { color: var(--ok); }
/* fault states */
.eq-fault-acts { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0; }
.eq-fault-state { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; border-radius: 999px; padding: 2px 8px; }
.eq-fault-state.is-reported { background: rgba(179,36,42,0.12); color: var(--bad); }
.eq-fault-state.is-acknowledged { background: rgba(196,122,46,0.16); color: #a9791f; }
/* movement log extras */
.eq-log-kind { color: var(--ink); margin-right: 7px; }
.eq-log-site { color: var(--ink-mute); margin-left: 7px; }
.eq-log-note { display: block; font-size: 11px; color: var(--ink-mute); font-style: italic; margin-top: 2px; }
/* site board */
.eq-board { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 12px; }
.eq-board-col { border: 1px solid var(--border); border-radius: 12px; background: var(--bg-elev); overflow: hidden; box-shadow: var(--shadow-sm); }
.eq-board-col.yard { border-color: rgba(90,160,111,0.45); }
.eq-board-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 12px; border-bottom: 1px solid var(--border); background: var(--bg-sunk); }
.eq-board-col.yard .eq-board-h { background: rgba(90,160,111,0.09); }
.eq-board-loc { font-size: 12.5px; font-weight: 700; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eq-board-n { font-size: 11px; font-family: var(--font-mono); color: var(--ink-mute); flex-shrink: 0; }
.eq-board-list { display: flex; flex-direction: column; max-height: 300px; overflow-y: auto; }
.eq-board-item { display: grid; grid-template-columns: 62px 1fr auto; grid-template-areas: "unit desc pill" "unit who pill"; gap: 1px 8px; align-items: center; text-align: left; border: none; background: none; border-bottom: 1px solid var(--border); padding: 7px 12px; cursor: pointer; font: inherit; }
.eq-board-item:last-child { border-bottom: none; }
.eq-board-item:hover { background: var(--bg-sunk); }
.eq-board-unit { grid-area: unit; font-size: 11.5px; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eq-board-desc { grid-area: desc; font-size: 12px; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eq-board-who { grid-area: who; font-size: 11px; color: var(--ink-mute); }
.eq-board-item .eq-spill { grid-area: pill; }
.pv-phone .eq-board { grid-template-columns: 1fr; }
.pv-phone .eq-req-row { flex-wrap: wrap; }

/* Custody action pinned to the right edge — these tables are wider than the
   viewport, and the whole point of the column is that it's always tappable. */
.eq-table td.eq-custcol, .eq-table th.eq-custcol {
  position: sticky; right: 0; z-index: 2; white-space: nowrap;
  background: var(--bg-elev); box-shadow: -6px 0 6px -6px rgba(0,0,0,.16);
}
.eq-table th.eq-custcol { z-index: 3; }
.eq-table tbody tr:hover td.eq-custcol { background: var(--bg-sunk); }

/* Weekly summary — day-box grid (option A) */
.ts-sum-cut{background:#fffaf0;border:1px solid #e8cf96;border-radius:9px;padding:9px 13px;font-size:12.5px;color:#8f5a12;margin-bottom:14px;line-height:1.5}
.ts-sum-grid{grid-template-columns:1.4fr 2fr 80px 150px !important}
.ts-sum-days{display:flex;align-items:center;gap:3px;flex-wrap:wrap}
.ts-dc{width:26px;height:22px;border-radius:5px;display:grid;place-items:center;font-size:10px;font-weight:700;font-family:var(--font-mono);flex-shrink:0}
.ts-dc.ok{background:rgba(90,160,111,.16);color:#2f6b46}
.ts-dc.part{background:rgba(196,122,46,.18);color:#8f5a12}
.ts-dc.miss{background:rgba(179,36,42,.12);color:#b3242a}
.ts-dc.na{background:var(--bg-sunk);color:var(--ink-mute)}
.ts-dc-reason{font-size:11px;font-weight:600;color:#b3242a;margin-left:6px;white-space:nowrap}
.pv-phone .ts-sum-grid{grid-template-columns:1fr !important}
.pv-phone .ts-dc-reason{margin-left:0}
@media(max-width:700px){.ts-sum-grid{grid-template-columns:1fr !important}}

/* Stat tiles flow rather than wrap onto a half-empty row */
.ts-sum-stats{grid-template-columns:repeat(auto-fit,minmax(140px,1fr)) !important}

/* Review modal: cards wide enough to show the full project name. Wrapping to a
   second row is fine — the sideways scroll was the problem, not the wrap. */
.ts-review-grid{grid-template-columns:repeat(auto-fit,minmax(150px,1fr)) !important;gap:8px}
.pv-phone .ts-review-grid{grid-template-columns:repeat(auto-fit,minmax(132px,1fr)) !important}

/* Cutoff banner reflects the live window */
.ts-sum-cut.is-grace{background:#fdf1e3;border-color:#e0a94a;color:#8f5a12}
.ts-sum-cut.is-closed{background:#f3f4f6;border-color:#d2d5da;color:#5a6270}

/* Editor: explain a cutoff freeze rather than leaving the form dead */
.ts-cutlock{display:flex;align-items:center;flex-wrap:wrap;gap:4px;background:#f3f4f6;border:1px solid #d2d5da;border-radius:9px;padding:9px 12px;margin-bottom:10px;font-size:12.5px;color:#454b53;line-height:1.5}
.ts-cutlock strong{color:#14181f}

/* Production tracker — visual pass */
.fab-legend { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 11px; color: var(--ink-mute); margin: 0 2px 10px; }
.fab-legend-item { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; }
.fab-legend-dot { width: 8px; height: 8px; border-radius: 50%; }
.fab-legend-note { font-style: italic; }
/* Grid: lighter chrome, tighter rows */
.fg thead th { border-bottom: 1px solid var(--border-strong); font-size: 10px; letter-spacing: 0.07em; }
.fg tbody td { border-bottom: 1px solid color-mix(in srgb, var(--border) 55%, transparent); height: 32px; }
.fg-row:nth-child(even) td { background: color-mix(in srgb, var(--bg-sunk) 30%, transparent); }
.fg-stage { width: 24px; height: 24px; border-radius: 50%; border: none; font-size: 11px; }
.fg-stage:hover:not(:disabled) { transform: scale(1.2); box-shadow: 0 1px 4px rgba(0,0,0,0.18); }
.fg-stage-off { opacity: 0.22; }
/* Done bar colour comes from the grid component (by % complete) */
.fg-pctnum { color: var(--ink-soft); font-weight: 700; }

/* Office staff: no timesheet of their own */
.ts-nosheet{font-size:12.5px;color:#5a6270;background:#f3f4f6;border:1px solid #d2d5da;border-radius:9px;padding:8px 12px;font-weight:600}

/* Timesheet list rows use the Weekly-summary day boxes */
.ts-row-daybox{display:flex;gap:3px;margin-top:5px;flex-wrap:wrap;align-items:center}
.ts-dc.ok{background:rgba(90,160,111,.16);color:#2f6b46}
.ts-dc.part{background:rgba(196,122,46,.18);color:#8f5a12}
.ts-dc.miss{background:rgba(179,36,42,.12);color:#b3242a}
.ts-dc.na{background:#f1f2f4;color:#9aa1ab}

/* Per-day supervisor picker */
.ts-daysup{display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--ink-soft);margin-bottom:8px;flex-wrap:wrap}
.ts-daysup>span{font-weight:700;text-transform:uppercase;letter-spacing:.05em;font-size:10px;color:var(--ink-mute)}
.ts-daysup .select{width:auto;min-width:150px;font-size:12px;padding:4px 8px}
.ts-daysup em{font-style:normal;font-size:10px;font-weight:700;color:#2a5a75;background:#e6f0f7;border-radius:99px;padding:1px 7px}

/* Per-day supervisor in the review grid */
.ts-day-sup{font-size:10px;font-weight:700;border-radius:99px;padding:1px 7px;margin:3px auto 0;background:#f1f2f4;color:#5a6270;display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ts-day-sup.mine{background:#e6f0f7;color:#2a5a75}
.ts-day-sup.signed{background:rgba(90,160,111,.18);color:#2f6b46}
.ts-review-day.ts-day-signed{border-color:rgba(90,160,111,.45)}
.ts-multisup{background:#e6f0f7;border:1px solid #b8cfe3;border-radius:9px;padding:8px 12px;margin-bottom:10px;font-size:12.5px;color:#2a5a75;line-height:1.5}
.ts-multisup strong{color:#1d4560}

/* A day with no supervisor is incomplete, not defaulted */
.ts-daysup .ts-sup-needed{border-color:#e0a94a;background:#fdf9f0}
.ts-daysup em.need{background:#fdf1e3;color:#8f5a12}
/* Approval / list rows: tighter, calmer, aligned */
.ts-row{align-items:center}
.ts-row-sup{font-size:11px;color:var(--ink-mute);text-align:right;line-height:1.35}
.ts-row-sup strong{display:block;font-size:12px;color:var(--ink-soft);font-weight:600}
/* Review grid: quieter cards so the numbers lead */
.ts-review-day{padding:9px 8px}
.ts-review-day-name{font-size:11px}
.ts-review-day-hours{font-size:17px}
.ts-day-sup{margin-top:4px}

/* Desktop row: compact supervisor picker beside the crane ticks */
.ts-daysup-inline{margin:0;gap:5px;flex-wrap:nowrap}
.ts-daysup-inline .select{min-width:118px;font-size:11.5px;padding:3px 6px}
.ts-daysup-inline>span{font-size:9px}

/* Review cards: job number must be readable — it's what's being checked */
.ts-review-grid{grid-template-columns:repeat(auto-fit,minmax(178px,1fr)) !important}
.ts-review-alloc{font-size:11px;line-height:1.45;padding:4px 6px}
.ts-review-alloc>span:first-child{white-space:normal !important;overflow:visible !important;text-overflow:clip !important;display:block}
.ts-review-alloc .ts-rev-job{display:inline-block;font-family:var(--font-mono);font-weight:700;color:var(--ink);background:var(--accent-soft);border-radius:4px;padding:0 4px;margin-top:2px}
/* Layout toggle removed — tiles only */
.ts-viewtoggle{display:none !important}

/* ---- Review on phone: one full-width row per day ---- */
.pv-phone .ts-review-grid{grid-template-columns:1fr !important;gap:6px}
.pv-phone .ts-review-day{display:grid;grid-template-columns:52px 1fr auto;grid-template-areas:"date sup hrs" "date jobs jobs";column-gap:10px;row-gap:4px;align-items:center;text-align:left;padding:9px 11px}
.pv-phone .ts-review-day-name{grid-area:date;font-size:11px;font-weight:700;text-align:left}
.pv-phone .ts-review-day-date{grid-area:date;align-self:end;font-size:10px;margin-top:14px}
.pv-phone .ts-day-sup{grid-area:sup;justify-self:start;margin:0}
.pv-phone .ts-review-day-hours{grid-area:hrs;font-size:18px;text-align:right}
.pv-phone .ts-review-day-allocs{grid-area:jobs;margin-top:2px}
.pv-phone .ts-review-alloc{display:flex;justify-content:space-between;gap:8px;padding:2px 0;border:none;background:none}
.pv-phone .ts-review-alloc>span:first-child{display:block;white-space:normal !important}
/* Footer buttons shouldn't wrap mid-word */
.pv-phone .modal-foot{gap:8px}
.pv-phone .modal-foot .btn{white-space:nowrap;font-size:12.5px;padding:8px 12px}
@media (max-width:640px){
  .ts-review-grid{grid-template-columns:1fr !important}
  .ts-review-day{display:grid;grid-template-columns:52px 1fr auto;grid-template-areas:"date sup hrs" "date jobs jobs";column-gap:10px;align-items:center;text-align:left}
  .ts-review-day-name,.ts-review-day-date{grid-area:date;text-align:left}
  .ts-day-sup{grid-area:sup;justify-self:start;margin:0}
  .ts-review-day-hours{grid-area:hrs;text-align:right}
  .ts-review-day-allocs{grid-area:jobs}
  .modal-foot .btn{white-space:nowrap}
}

/* ---- Weekly summary on phone: name + status on one line, days beneath ---- */
.pv-phone .ts-sum-headrow{display:none}
.pv-phone .ts-sum-row.ts-sum-grid{display:grid;grid-template-columns:1fr auto;grid-template-areas:"name hrs" "days days" "status status";gap:6px 10px;align-items:center;padding:10px 12px}
.pv-phone .ts-sum-name{grid-area:name;font-size:13px;min-width:0}
.pv-phone .ts-sum-hrs{grid-area:hrs;text-align:right;font-size:15px}
.pv-phone .ts-sum-days{grid-area:days;display:flex;flex-wrap:wrap;gap:4px;align-items:center}
.pv-phone .ts-sum-row.ts-sum-grid>span.r:last-child{grid-area:status;justify-self:start;text-align:left}
.pv-phone .ts-dc-reason{font-size:11px}
.pv-phone .ts-sum-stats{grid-template-columns:repeat(2,1fr) !important}
.pv-phone .ts-sum-cut{font-size:12px;line-height:1.45}
@media (max-width:640px){
  .ts-sum-headrow{display:none}
  .ts-sum-row.ts-sum-grid{display:grid;grid-template-columns:1fr auto;grid-template-areas:"name hrs" "days days" "status status";gap:6px 10px;align-items:center}
  .ts-sum-name{grid-area:name;min-width:0}
  .ts-sum-hrs{grid-area:hrs;text-align:right}
  .ts-sum-days{grid-area:days;display:flex;flex-wrap:wrap;gap:4px}
  .ts-sum-row.ts-sum-grid>span.r:last-child{grid-area:status;justify-self:start;text-align:left}
  .ts-sum-stats{grid-template-columns:repeat(2,1fr) !important}
}

/* Day + date leads each review row */
.ts-review-day-name{font-weight:800;letter-spacing:.04em;color:var(--ink)}
.ts-review-day-date{font-weight:600;color:var(--ink-soft)}
.pv-phone .ts-review-day{grid-template-columns:58px 1fr auto}
.pv-phone .ts-review-day-name{font-size:12.5px;font-weight:800;color:var(--ink);line-height:1.1}
.pv-phone .ts-review-day-date{font-size:11px;font-weight:600;margin-top:15px;color:var(--ink-soft)}

/* Day name and date get their own grid cells — no margin overlay, so every row
   sits identically whether or not it has a supervisor chip or job lines. */
.pv-phone .ts-review-day{grid-template-areas:"name sup hrs" "date jobs jobs" !important;align-items:start}
.pv-phone .ts-review-day-name{grid-area:name !important;margin:0 !important;align-self:center}
.pv-phone .ts-review-day-date{grid-area:date !important;margin:0 !important;align-self:start}
.pv-phone .ts-day-sup{align-self:center}
.pv-phone .ts-review-day-hours{align-self:center}
@media (max-width:640px){
  .ts-review-day{grid-template-areas:"name sup hrs" "date jobs jobs" !important;align-items:start}
  .ts-review-day-name{grid-area:name !important;margin:0 !important}
  .ts-review-day-date{grid-area:date !important;margin:0 !important}
}

/* ---- Timesheet list rows: same shape as the Weekly summary ---- */
.ts-row{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;padding:12px 14px;border-bottom:1px solid var(--line,var(--border));cursor:pointer;transition:background .12s}
.ts-row:last-child{border-bottom:none}
.ts-row:hover{background:var(--bg-sunk)}
.ts-row-main{min-width:0}
.ts-row-emp{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-bottom:2px}
.ts-row-name{font-size:14px;font-weight:650;color:var(--ink)}
.ts-row-week{font-size:12px;color:var(--ink-mute);font-family:var(--font-mono)}
.ts-row-supin{font-size:11px;font-weight:600;color:var(--ink-soft);background:var(--bg-sunk);border:1px solid var(--border);border-radius:99px;padding:1px 8px}
.ts-row-right{display:flex;align-items:center;gap:12px;flex-shrink:0}
.ts-row-hrs{font-family:var(--font-mono);font-size:19px;font-weight:700;line-height:1;letter-spacing:-.02em;color:var(--ink);min-width:56px;text-align:right}
.ts-row-total{display:none}
/* Phone: stack the header, keep hours and status on one line under it */
.pv-phone .ts-row{grid-template-columns:1fr;gap:8px;padding:11px 12px}
.pv-phone .ts-row-right{justify-content:space-between;width:100%}
.pv-phone .ts-row-hrs{font-size:17px;text-align:left;min-width:0}
.pv-phone .ts-row-daybox{gap:3px}
@media (max-width:640px){
  .ts-row{grid-template-columns:1fr;gap:8px}
  .ts-row-right{justify-content:space-between;width:100%}
  .ts-row-hrs{text-align:left}
}

/* Hours number with its caption stacked beneath */
.ts-row-hrs{display:flex;flex-direction:column;align-items:flex-end}
.ts-row-hrs em{font-style:normal;font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-mute);margin-top:2px}
.pv-phone .ts-row-hrs{align-items:flex-start}

/* List rows label each box — no MON–SAT header here, unlike the summary */
.ts-row-daybox .ts-dc{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;width:auto;min-width:32px;height:26px;padding:0 5px;border-radius:5px;place-items:unset}
.ts-row-daybox .ts-dc em{font-style:normal;font-size:10px;font-weight:700;letter-spacing:.03em;opacity:.72;line-height:1.1}
.ts-row-daybox .ts-dc b{font-size:11.5px;font-weight:700;line-height:1.1}

/* Weekly summary: jump straight to a week */
.ts-sum-weekpick{width:auto;min-width:150px;flex:0 0 auto;font-size:12.5px}
.ts-sum-weekdate{width:auto;flex:0 0 auto;font-size:12px;font-family:var(--font-mono);max-width:140px}
.pv-phone .ts-sum-weekpick,.pv-phone .ts-sum-weekdate{width:100%;max-width:none}

/* ---- Hours tracking: portfolio cards ---- */
.hr-pcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:12px}
.hr-pcard{background:var(--bg-elev);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow-sm);padding:14px 15px}
.hr-pcard.over{border-color:rgba(179,36,42,.4)}
.hr-pcard-h{display:flex;align-items:center;gap:10px;margin-bottom:11px}
.hr-pcard-name{font-size:14px;font-weight:700;color:var(--ink);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.hr-pcard-figs{display:flex;justify-content:space-between;align-items:flex-end;gap:12px}
.hr-pfig{display:flex;flex-direction:column;min-width:0}
.hr-pfig.r{align-items:flex-end}
.hr-pfig b{font-family:var(--font-mono);font-size:21px;font-weight:700;line-height:1;color:var(--ink);letter-spacing:-.02em}
.hr-pfig b.bad{color:var(--bad)}
.hr-pfig span{font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-mute);font-weight:700;margin-top:3px}
.hr-pbar{height:6px;border-radius:99px;background:var(--border);overflow:hidden;margin:10px 0 6px}
.hr-pbar i{display:block;height:100%;border-radius:99px;background:var(--ok,#5aa06f)}
.hr-pbar i.warn{background:#e0a94a}
.hr-pbar i.over{background:var(--bad)}
.hr-pcard-sub{font-size:11.5px;color:var(--ink-soft)}
.hr-pcard-sub .bad{color:var(--bad);font-weight:700}
.hr-pcard-split{display:flex;flex-wrap:wrap;gap:6px;margin-top:11px;padding-top:10px;border-top:1px solid var(--border)}
.hr-pcard-split span{font-size:10.5px;color:var(--ink-mute);background:var(--bg-sunk);border-radius:99px;padding:2px 9px;white-space:nowrap}
.hr-pcard-split em{font-style:normal;font-family:var(--font-mono);font-weight:700;color:var(--ink)}
.pv-phone .hr-pcards{grid-template-columns:1fr}

/* ===== Monthly progress quick entry ===== */
.pt-entry{background:var(--bg-elev);border:1px solid var(--accent);border-radius:12px;box-shadow:var(--shadow-md);margin-bottom:16px;overflow:hidden}
.pt-entry-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:14px 16px 10px;flex-wrap:wrap}
.pt-entry-title{font-size:14.5px;font-weight:700;color:var(--ink)}
.pt-entry-sub{font-size:12px;color:var(--ink-mute);margin-top:3px;max-width:560px}
.pt-entry-acts{display:flex;align-items:center;gap:10px}
.pt-entry-saved{font-size:12.5px;font-weight:700;color:var(--ok)}
.pt-entry-filters{display:flex;gap:8px;align-items:center;padding:0 16px 10px;flex-wrap:wrap}
.pt-entry-filters .select{width:auto;min-width:180px;flex:0 0 auto}
.pt-entry-filters .input{max-width:220px}
.pt-entry-count{font-size:11.5px;color:var(--ink-mute)}
.pt-entry-list{max-height:420px;overflow-y:auto;border-top:1px solid var(--border)}
.pt-entry-proj{position:sticky;top:0;z-index:1;background:var(--bg-sunk);font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-soft);padding:6px 16px;border-bottom:1px solid var(--border)}
.pt-entry-row{display:grid;grid-template-columns:86px 1fr 54px 86px;gap:10px;align-items:center;padding:6px 16px;border-bottom:1px solid var(--border)}
.pt-entry-row:hover{background:var(--bg-sunk)}
.pt-entry-job{font-size:12px;font-weight:700;color:var(--ink)}
.pt-entry-desc{font-size:12px;color:var(--ink-soft);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pt-entry-prev{font-size:11.5px;font-family:var(--font-mono);color:var(--ink-mute);text-align:right}
.pt-entry-inwrap{display:flex;align-items:center;gap:4px}
.pt-entry-in{width:58px;border:1px solid var(--border);border-radius:7px;padding:5px 7px;font:inherit;font-size:13px;font-weight:700;font-family:var(--font-mono);color:var(--ink);text-align:right;background:var(--bg-elev)}
.pt-entry-in:focus{outline:none;border-color:var(--accent);background:#fdf9f0}
.pt-entry-pct{font-size:11px;color:var(--ink-mute)}
.pv-phone .pt-entry-row{grid-template-columns:72px 1fr 40px 72px;padding:6px 10px}
.pv-phone .pt-entry-desc{white-space:normal;font-size:11px}
@media (max-width:640px){
  .pt-entry-row{grid-template-columns:72px 1fr 40px 72px;padding:6px 10px}
  .pt-entry-desc{white-space:normal;font-size:11px}
}

/* Monthly entry — quoted hours columns */
.pt-entry-row{grid-template-columns:86px 1fr 76px 76px 54px 86px}
.pt-entry-cols{padding:5px 16px;border-bottom:1px solid var(--border);background:var(--bg-sunk)}
.pt-entry-col{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-mute);text-align:right}
.pt-entry-in:disabled{opacity:.45;cursor:not-allowed}
.pv-phone .pt-entry-row{grid-template-columns:64px 1fr 54px 54px 34px 64px;gap:6px;padding:6px 10px}
@media (max-width:640px){.pt-entry-row{grid-template-columns:64px 1fr 54px 54px 34px 64px;gap:6px;padding:6px 10px}}

/* Monthly entry — 6-column grid: job | desc | site hrs | ws hrs | site % | ws % */
.pt-entry-row{grid-template-columns:86px 1fr 76px 76px 82px 82px}
.pt-entry-in::placeholder{color:var(--ink-mute);opacity:.55;font-weight:500}
.pv-phone .pt-entry-row{grid-template-columns:60px 1fr 48px 48px 58px 58px;gap:5px;padding:6px 8px}
@media (max-width:640px){.pt-entry-row{grid-template-columns:60px 1fr 48px 48px 58px 58px;gap:5px;padding:6px 8px}}

.ts-row-forme{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:#9a6a10;background:#fdf3df;border:1px solid #e8cf96;border-radius:999px;padding:2px 8px;white-space:nowrap}

.ts-rev-nav{display:inline-flex;align-items:center;gap:4px;margin-right:6px}
.ts-rev-navpos{font-size:11px;font-family:var(--font-mono);color:var(--ink-mute);white-space:nowrap;padding:0 2px}

/* Signing review: confirm action rides the bottom of the screen */
.dls-confirmbar{position:fixed;left:50%;transform:translateX(-50%);bottom:14px;z-index:320;display:flex;gap:8px;background:var(--bg-elev);border:1px solid var(--border-strong);border-radius:999px;padding:8px;box-shadow:var(--shadow-lg)}
.dls-confirmbar .btn-primary{padding:10px 22px}
.dls{padding-bottom:74px}
.pv-phone .dls-confirmbar{position:absolute;width:calc(100% - 24px);justify-content:stretch}
.pv-phone .dls-confirmbar .btn-primary{flex:1}
@media (max-width:640px){.dls-confirmbar{width:calc(100% - 24px);justify-content:stretch}.dls-confirmbar .btn-primary{flex:1}}

/* Week suggestions under the day-labour job picker */
.dl-weekchips{flex-basis:100%;display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:2px}
.dl-weekchips-lbl{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-mute);margin-right:2px}
.dl-weekchip{font:inherit;font-size:11.5px;font-weight:600;display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:4px 11px;cursor:pointer;border:1px solid var(--border);background:var(--bg-elev);color:var(--ink-soft);transition:var(--t)}
.dl-weekchip b{font-family:var(--font-mono);font-weight:700}
.dl-weekchip.need{border-color:#e8cf96;background:#fdf6e8;color:#9a6a10}
.dl-weekchip.done{color:#3f7a52;border-color:rgba(90,160,111,.45);background:rgba(90,160,111,.08)}
.dl-weekchip:hover{border-color:var(--accent);box-shadow:var(--shadow-sm)}
.dl-weekchip.on{background:var(--accent);border-color:var(--accent);color:#fff}
.dl-weekchip.on b{color:#fff}

/* ============ Equipment: request banner + rich rows (phone) ============ */
.eq-banner{background:linear-gradient(180deg,#fdf6e8,var(--bg-elev));border:1px solid #e8cf96;border-radius:14px;padding:12px 14px;margin-bottom:14px;box-shadow:var(--shadow-sm)}
.eq-banner-h{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink);margin-bottom:8px}
.eq-banner-ico{font-size:15px}
.eq-banner-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:var(--bg-elev);border:1px solid var(--border);border-radius:10px;padding:9px 12px;margin-bottom:6px}
.eq-banner-row:last-of-type{margin-bottom:0}
.eq-banner-main{flex:1;min-width:220px;display:flex;flex-direction:column;gap:2px}
.eq-banner-main>b{font-size:13px}
.eq-banner-meta{font-size:12px;color:var(--ink-soft)}
.eq-banner-note{font-size:11.5px;color:var(--ink-mute);font-style:italic}
.eq-banner-acts{display:flex;gap:6px;flex-wrap:wrap}
.eq-banner-more{font-size:11.5px;color:var(--ink-mute);margin-top:6px}
/* rich rows — hidden on desktop, replace the tables on phone */
.eqr-list{display:none;flex-direction:column;gap:7px;margin:4px 0 10px}
.eqr-row{font:inherit;text-align:left;background:var(--bg-elev);border:1px solid var(--border);border-left:4px solid var(--edge,var(--border-strong));border-radius:10px;padding:9px 11px;cursor:pointer;display:flex;flex-direction:column;gap:5px;box-shadow:var(--shadow-sm)}
.eqr-row:active{background:var(--bg-sunk)}
.eqr-top{display:flex;align-items:center;gap:8px;min-width:0}
.eqr-unit{font-size:12.5px;font-weight:700;color:var(--ink);flex-shrink:0}
.eqr-name{flex:1;min-width:0;font-size:12.5px;font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.eqr-meta{display:flex;align-items:center;gap:10px;font-size:11.5px;color:var(--ink-mute);min-width:0}
.eqr-who{flex-shrink:0}
.eqr-loc{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.eqr-chev{font-size:15px;color:var(--ink-mute)}
.pv-phone .eqr-list{display:flex}
.pv-phone .eqr-list + .eq-table-scroll{display:none}
@media (max-width:720px){.eqr-list{display:flex}.eqr-list + .eq-table-scroll{display:none}}

/* ---- docket send-to-site / part dockets ---- */
.dk-split-strip{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 14px;border-bottom:1px solid var(--border);background:#fdf6e8;font-size:12px}
.dk-split-strip.done{background:rgba(90,160,111,.09)}
.dk-part-chip{display:inline-flex;align-items:center;gap:6px;background:var(--bg-elev);border:1px solid var(--border);border-radius:999px;padding:3px 6px 3px 10px;font-size:11.5px;color:var(--ink-soft)}
.dk-part-undo{border:none;background:var(--bg-sunk);border-radius:999px;font-size:9px;line-height:1;padding:3px 6px;cursor:pointer;color:var(--ink-mute)}
.dk-part-undo:hover{background:var(--bad);color:#fff}
.dk-split-bal{font-size:12px;color:#9a6a10}
.dk-split-done{font-size:12px;color:#1f7a4d}
.dk-row-sent td{opacity:.45;text-decoration:line-through}
.dk-sent-tag{display:inline-block;margin-left:6px;font-size:9px;font-weight:700;background:var(--bg-sunk);border-radius:999px;padding:1px 6px;color:var(--ink-mute);text-decoration:none}
.dk-card-loc-badge.balance{background:rgba(224,169,74,.18);color:#9a6a10}
.dk-sendmodal{width:560px;max-width:100%}
.dk-send-toolbar{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.dk-send-count{font-size:12px;color:var(--ink-soft)}
.dk-send-list{max-height:300px;overflow-y:auto;border:1px solid var(--border);border-radius:10px}
.dk-send-row{display:flex;align-items:center;gap:9px;padding:7px 11px;border-bottom:1px solid var(--border);cursor:pointer;font-size:12.5px}
.dk-send-row:last-child{border-bottom:none}
.dk-send-row.on{background:var(--accent-soft)}
.dk-send-row input{accent-color:var(--accent)}
.dk-send-mark{font-weight:700;flex:0 0 auto}
.dk-send-desc{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink-soft)}
.dk-send-qty{font-family:var(--font-mono);font-size:11.5px}
.dk-send-wt{font-family:var(--font-mono);font-size:11.5px;color:var(--ink-mute)}

.dk-upl-drop{display:flex;flex-direction:column;align-items:center;gap:6px;border:2px dashed var(--border-strong);border-radius:12px;padding:28px 16px;cursor:pointer;text-align:center}
.dk-upl-drop:hover{border-color:var(--accent);background:var(--accent-soft)}

.redeliv-book { border: 1px solid #b8a3e0; background: #fff; color: #5a3fa0; font: inherit; font-size: 11px; font-weight: 700; border-radius: 999px; padding: 2px 9px; margin-left: 7px; cursor: pointer; }
.redeliv-book:hover { background: #5a3fa0; color: #fff; border-color: #5a3fa0; }

/* Status legend above the week grid — the card shading is the status */
.sched-legend { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 2px 0 10px; font-size: 11px; font-weight: 600; color: var(--ink-soft); }
.sched-projfilter { position: relative; margin-left: auto; width: 230px; flex: 0 0 auto; display: flex; align-items: center; gap: 6px; }
.sched-projfilter .autocomplete { flex: 1; min-width: 0; }
.sched-projfilter .input { font-size: 12.5px; padding: 6px 10px; }
.sched-projfilter.full { margin: 0 0 10px; width: 100%; }
.sched-projclear { border: 1px solid var(--border); background: var(--bg-elev); color: var(--ink-mute); border-radius: 6px; width: 26px; height: 26px; font-size: 11px; line-height: 1; cursor: pointer; flex: 0 0 auto; }
.sched-projclear:hover { color: var(--bad); border-color: var(--bad); }
.pv-phone .sched-projfilter { margin-left: 0; width: 100%; }
@media (max-width: 720px) { .sched-projfilter { margin-left: 0; width: 100%; } }
.sched-legend-item { display: inline-flex; align-items: center; gap: 5px; }
.sched-legend-sw { width: 10px; height: 10px; border-radius: 3px; display: inline-block; opacity: .75; }

/* Attach-docket picker in Add Delivery */
.dk-attach-list { display: flex; flex-direction: column; gap: 6px; max-height: 220px; overflow-y: auto; }
.dk-attach { display: flex; align-items: center; gap: 9px; border: 1px solid var(--border); border-radius: 8px; padding: 7px 10px; cursor: pointer; font-size: 12px; background: var(--bg-elev); }
.dk-attach:hover { border-color: var(--border-strong); }
.dk-attach.on { border-color: var(--accent); background: var(--accent-soft); }
.dk-attach input { accent-color: var(--accent); flex-shrink: 0; }
.dk-attach-no { font-weight: 700; color: var(--ink); }
.dk-attach-desc { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-soft); }
.dk-attach-meta { font-size: 11px; color: var(--ink-mute); white-space: nowrap; }
.dk-attach-view { font-size: 11px; font-weight: 700; color: var(--accent-ink, var(--accent)); text-decoration: none; flex-shrink: 0; }
.dk-attach-view:hover { text-decoration: underline; }

/* Copy times from… (approver filling several sheets) */
.ts-copyfrom { position: relative; margin-bottom: 14px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ts-copyfrom-hint { font-size: 11px; color: var(--ink-mute); max-width: 460px; line-height: 1.4; }
.ts-copyfrom-list { position: absolute; top: calc(100% + 6px); left: 0; z-index: 60; width: 300px; max-height: 260px; overflow-y: auto; background: var(--bg-elev); border: 1px solid var(--border-strong); border-radius: 10px; box-shadow: var(--shadow-lg); }
.ts-copyfrom-opt { display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left; font: inherit; border: none; background: none; border-bottom: 1px solid var(--border); padding: 8px 12px; cursor: pointer; }
.ts-copyfrom-opt:last-child { border-bottom: none; }
.ts-copyfrom-opt:hover { background: var(--accent-soft); }
.ts-copyfrom-opt strong { font-size: 13px; color: var(--ink); }
.ts-copyfrom-opt span { font-size: 11px; color: var(--ink-mute); }

.intake-runchip { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 650; color: var(--ink); background: color-mix(in srgb, var(--c, #c8ccd2) 14%, transparent); border: 1px solid color-mix(in srgb, var(--c, #c8ccd2) 45%, transparent); border-radius: 999px; padding: 6px 13px; }
.intake-runchip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c, #c8ccd2); }
.intake-runchip-none { color: var(--ink-mute); font-weight: 500; font-size: 11.5px; background: var(--bg-sunk); border: 1px dashed var(--border-strong); }
.intake-runchip-none::before { display: none; }
/* File pickers — style the native button everywhere (photo uploads, scans) */
input[type="file"] { font-size: 12px; color: var(--ink-mute); }
input[type="file"]::file-selector-button {
  font: inherit; font-size: 12.5px; font-weight: 650; color: var(--ink);
  background: var(--bg-elev); border: 1px solid var(--border-strong);
  border-radius: 999px; padding: 7px 16px; margin-right: 12px; cursor: pointer;
  transition: var(--t); box-shadow: var(--shadow-sm);
}
input[type="file"]::file-selector-button:hover {
  border-color: var(--accent); background: var(--accent-soft); color: var(--ink);
}
/* Send-to-site destination: the field is the last thing in the modal, so the
   suggestion list opens UPWARD and stays inside the dialog instead of being
   cut off at the modal edge. */
.dk-send-dest .autocomplete-list { top: auto; bottom: calc(100% + 4px); max-height: 230px; box-shadow: 0 -8px 24px rgba(15,18,24,0.14); }
/* In-app dialogs (replace native alert/confirm) */
.appdlg-backdrop { position: fixed; inset: 0; background: rgba(15,18,24,0.45); z-index: 900; display: grid; place-items: center; padding: 20px; grid-template-columns: minmax(0, 1fr);}
.appdlg { width: 420px; max-width: 100%; background: var(--bg-elev); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 20px 22px 16px; animation: appdlg-in .14s ease-out; }
@keyframes appdlg-in { from { transform: translateY(6px) scale(.98); opacity: 0; } to { transform: none; opacity: 1; } }
.appdlg-title { font-size: 15px; font-weight: 700; color: var(--ink); margin-bottom: 8px; }
.appdlg-msg { font-size: 13.5px; color: var(--ink-soft); line-height: 1.55; }
.appdlg-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
.appdlg-danger { background: var(--bad); border-color: var(--bad); color: #fff; }
.appdlg-danger:hover { background: #8f1d22; border-color: #8f1d22; }
/* Workshop store consumables in Add Delivery */
.cons-add { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.cons-add .select { max-width: 340px; }
.cons-addqty { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.cons-addqty-lbl { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-mute); }
/* Clean qty control: − 1 + with no native spinner arrows */
.cons-qtybox { display: inline-flex; align-items: center; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: var(--bg-elev); }
.cons-qty-clean { width: 40px; border: none; background: transparent; text-align: center; font: inherit; font-size: 13px; font-weight: 650; color: var(--ink); padding: 7px 0; -moz-appearance: textfield; appearance: textfield; }
.cons-qty-clean::-webkit-outer-spin-button, .cons-qty-clean::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cons-qty-clean:focus { outline: none; background: var(--accent-soft); }
.cons-qtybox .cons-step { border: none; border-radius: 0; width: 30px; height: 32px; }
.cons-newbtn { font-size: 12px; border: 1px dashed var(--border-strong); }
.cons-newbtn:hover { border-color: var(--accent); background: var(--accent-soft); }
.cons-newform { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 8px; padding: 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-sunk); }
.cons-newform .input { flex: 1; min-width: 200px; }
.pv-phone .cons-newform .input { min-width: 100%; }
.pv-phone .cons-add .select { max-width: 100%; width: 100%; }
@media (max-width: 720px) { .cons-add .select { max-width: 100%; width: 100%; } }
.cons-list { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.cons-row { display: flex; align-items: center; gap: 8px; border: 1px solid var(--border); border-radius: 8px; padding: 6px 10px; background: var(--bg-elev); font-size: 12.5px; }
.cons-name { flex: 1; min-width: 0; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cons-qty { display: inline-flex; align-items: center; gap: 4px; }
.cons-step { width: 26px; height: 26px; border: 1px solid var(--border); background: var(--bg-sunk); border-radius: 6px; font-size: 14px; line-height: 1; cursor: pointer; }
.cons-step:hover { background: var(--accent-soft); border-color: var(--accent); }
.cons-qty-inp { width: 44px; text-align: center; padding: 4px 2px; -moz-appearance: textfield; appearance: textfield; }
.cons-qty-inp::-webkit-outer-spin-button, .cons-qty-inp::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cons-unit { width: 92px; flex: 0 0 auto; }
.cons-unit-fixed { font-size: 11.5px; color: var(--ink-mute); width: 92px; flex: 0 0 auto; }
.cons-x { border: none; background: none; color: var(--ink-mute); font-size: 12px; cursor: pointer; padding: 4px; }
.cons-x:hover { color: var(--bad); }
@media (max-width: 720px) { .cons-row { flex-wrap: wrap; } .cons-name { flex-basis: 100%; } }
.pv-phone .cons-row { flex-wrap: wrap; }
.pv-phone .cons-name { flex-basis: 100%; }

.ts-a-proj-ws { display: flex; align-items: center; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-mute); }

.jn-table .num { text-align: right; white-space: nowrap; }

/* Hours Tracking — projection bars */
.hr-pb-note { font-size: 12px; color: var(--ink-mute); margin-bottom: 10px; max-width: 720px; line-height: 1.5; }
.hr-pb-card { background: var(--bg-elev); border: 1px solid var(--border); border-radius: 12px; padding: 8px 18px; }
.hr-pb-row { display: grid; grid-template-columns: 190px 1fr 130px; gap: 14px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--border); }
.hr-pb-row:last-child { border-bottom: none; }
.hr-pb-no { font-weight: 700; font-size: 12.5px; color: var(--ink); }
.hr-pb-desc { display: block; font-size: 11px; color: var(--ink-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hr-pb-track { position: relative; height: 22px; background: var(--bg-sunk); border-radius: 6px; }
.hr-pb-spent { position: absolute; top: 0; bottom: 0; left: 0; background: #5b8aa6; border-radius: 6px 0 0 6px; }
.hr-pb-over { position: absolute; top: 0; bottom: 0; background: rgba(179,36,42,.24); border: 1px dashed var(--bad); border-left: none; border-radius: 0 6px 6px 0; }
.hr-pb-quote { position: absolute; top: -5px; bottom: -5px; width: 2px; background: var(--ink); border-radius: 2px; }
.hr-pb-proj { position: absolute; top: -12px; transform: translateX(-50%); font-size: 11px; }
.hr-pb-proj.r { color: var(--bad); } .hr-pb-proj.g { color: var(--ok); }
.hr-pb-stat { text-align: right; }
.hr-pb-v { font-size: 12.5px; font-weight: 700; } .hr-pb-v.r { color: var(--bad); } .hr-pb-v.g { color: var(--ok); }
.hr-pb-l { font-size: 10px; color: var(--ink-mute); white-space: nowrap; }
.pv-phone .hr-pb-row { grid-template-columns: 1fr; gap: 6px; }
.pv-phone .hr-pb-stat { text-align: left; }
@media (max-width: 720px) { .hr-pb-row { grid-template-columns: 1fr; gap: 6px; } .hr-pb-stat { text-align: left; } }

.hr-pb-seg { margin-bottom: 10px; }
.hr-pb-segrow { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

.hr-pb-clickable { cursor: pointer; }
.hr-pb-clickable:hover .hr-pb-no { color: var(--accent-ink, var(--accent)); }
.hr-pb-chev { display: inline-block; width: 16px; color: var(--ink-mute); font-size: 10px; }
.hr-pb-row.open { padding-bottom: 4px; }
.hr-pb-kids { grid-column: 1 / -1; border-left: 3px solid var(--border-strong); margin: 4px 0 4px 6px; padding-left: 14px; cursor: default; }
.hr-pb-kid { padding: 9px 0; }
.hr-pb-kid .hr-pb-track { height: 16px; }
.hr-pb-kid .hr-pb-quote { top: -3px; bottom: -3px; }
.hr-pb-kid .hr-pb-proj { top: -11px; }

.hr-card-ok .hr-card-v { color: var(--ok); }

/* Projection trend — month-to-month */
.hr-pb-trend { background: var(--bg-elev); border: 1px solid var(--border); border-radius: 12px; padding: 14px 18px; margin-bottom: 12px; }
.hr-pb-trend-h { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; font-size: 12px; font-weight: 700; color: var(--ink); margin-bottom: 12px; }
.hr-pb-trend-tag { font-size: 11px; font-weight: 700; }
.hr-pb-trend-tag.r { color: var(--bad); } .hr-pb-trend-tag.g { color: var(--ok); }
.hr-pb-trend-bars { display: flex; gap: 18px; align-items: flex-end; }
.hr-pb-tm { text-align: center; flex: 0 0 auto; min-width: 54px; }
.hr-pb-tm-stack { display: flex; flex-direction: column-reverse; justify-content: flex-start; width: 34px; margin: 0 auto; background: var(--bg-sunk); border-radius: 6px 6px 0 0; overflow: hidden; }
.hr-pb-tm-seg.g { background: #5aa06f; }
.hr-pb-tm-seg.r { background: #c0392b; }
.hr-pb-tm-n { font-size: 10.5px; font-weight: 700; margin-top: 5px; }
.hr-pb-tm-n .r { color: var(--bad); } .hr-pb-tm-n .g { color: var(--ok); }
.hr-pb-tm-hrs { font-size: 10px; color: var(--bad); font-family: var(--font-mono); min-height: 13px; }
.hr-pb-tm-l { font-size: 10.5px; color: var(--ink-mute); margin-top: 2px; }
/* Phone: 6 months must fit inside ~320px — shrink columns and allow scroll as a fallback */
.pv-phone .hr-pb-trend-bars { gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.pv-phone .hr-tabs { flex-wrap: wrap; }
.pv-phone .hr-tab { flex: 0 0 auto; }
.pv-phone .hr-pb-row { padding-right: 4px; }
.pv-phone .hr-pb-card { padding: 8px 12px; }
.pv-phone .hr-pb-tm { min-width: 42px; }
.pv-phone .hr-pb-tm-stack { width: 26px; }
@media (max-width: 720px) {
  .hr-pb-trend-bars { gap: 8px; overflow-x: auto; padding-bottom: 4px; }
  .hr-tabs { flex-wrap: wrap; }
  .hr-tab { flex: 0 0 auto; }
  .hr-pb-row { padding-right: 4px; }
  .hr-pb-card { padding: 8px 12px; }
  .hr-pb-tm { min-width: 42px; }
  .hr-pb-tm-stack { width: 26px; }
}

.ts-a-step.th .ts-a-step-tag { color: #b8801d; }
.ts-alloc-hours-cell.th .ts-alloc-hours-tag { color: #b8801d; }

.lot-picks { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; max-width: 760px; }
.lot-picks .select { width: 100%; }
.pv-phone .lot-picks { grid-template-columns: 1fr; }
@media (max-width: 720px) { .lot-picks { grid-template-columns: 1fr; } }

.dk-wa-chip { font-size: 12px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: 999px; padding: 3px 11px; white-space: nowrap; }
.dk-wa-chip strong { font-weight: 700; }
.dk-part-chip.linked:hover { border-color: var(--accent); background: var(--accent-soft); }

/* Full Add-Delivery form embedded over the schedule drawer */
.drawer-editmodal-backdrop { position: fixed; inset: 0; background: rgba(14,16,20,0.5); z-index: 320; display: grid; place-items: center; padding: 18px; grid-template-columns: minmax(0, 1fr);}
.drawer-editmodal { width: min(96vw, 880px); max-height: 92vh; overflow-y: auto; background: var(--bg); border-radius: 14px; box-shadow: var(--shadow-lg); padding: 4px 0 12px; }
.drawer-editmodal .intake-wrap { padding: 12px 18px; }
.pv-phone .drawer-editmodal-backdrop { position: absolute; padding: 0; }
.pv-phone .drawer-editmodal { width: 100%; height: 100%; max-height: none; border-radius: 0; }

.dk-replace { margin-top: 14px; padding: 12px; border: 1px dashed var(--border-strong); border-radius: 10px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.dk-replace-h { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-mute); }
.dk-replace-sub { font-size: 12px; color: var(--ink-soft); }
.dk-replace-ok { font-size: 12px; font-weight: 600; color: var(--ok); }
.dk-replace-err { font-size: 12px; font-weight: 600; color: var(--bad); }

/* ===== Hub project scope ===== */
.hub-scope { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--bg-elev); border: 1px solid var(--border); border-radius: 12px; padding: 10px 14px; margin: 0 0 16px; box-shadow: var(--shadow-sm); }
.hub-scope.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset, var(--shadow-sm); }
.hub-scope-lbl { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-mute); white-space: nowrap; }
.hub-scope.on .hub-scope-lbl { color: var(--ink); }
.hub-scope-sel { width: auto; min-width: 220px; max-width: 340px; flex: 0 1 auto; }
.hub-scope-hint { font-size: 12px; color: var(--ink-mute); flex: 1; min-width: 200px; }
.hub-scope-clear { font-size: 12px; border: 1px solid var(--border); }
.pv-phone .hub-scope-sel, .pv-phone .hub-scope-hint { min-width: 0; width: 100%; }
/* The scope card stacks on a phone. It used to stay a wrap-flex row: the hint
   has flex:1 (basis 0) and the phone rule added min-width:0, which removed the
   200px floor that had been forcing it onto its own line. With a full-width
   select beside it the hint shrank to a sliver and spilled one word per line
   down the side of the card. Stacking says what is meant and cannot collapse. */
@media (max-width: 720px) {
  .hub-scope { flex-direction: column; align-items: stretch; gap: 8px; }
  .hub-scope-sel { min-width: 0; width: 100%; max-width: none; }
  .hub-scope-hint { min-width: 0; flex: 0 0 auto; }
  .hub-scope-clear { align-self: flex-start; }
}

/* Daily Entry crane flags */
/* flex-shrink: 0 is load-bearing. Without it the pill's box is squeezed below
   its text width while nowrap holds the text at full width, so the text spills
   out of the pill and paints over the worker's name. */
.ce-flag { font-size: 10.5px; font-weight: 700; border: 1px solid var(--border); border-radius: 999px; padding: 3px 9px; color: var(--ink-mute); cursor: pointer; user-select: none; white-space: nowrap; flex-shrink: 0; }
.ce-flag:hover { border-color: var(--border-strong); color: var(--ink); }
.ce-flag.on { background: var(--accent); border-color: var(--accent); color: #fff; }

/* Contractor timesheets */
.ts-row-contractor { font-size: 9px; font-weight: 800; letter-spacing: 0.05em; background: rgba(196,122,46,0.16); color: #a9791f; border-radius: 999px; padding: 2px 8px; margin-left: 6px; white-space: nowrap; }

/* Contacts register */
.cm-filters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.cm-filters .select { width: auto; min-width: 160px; flex: 0 0 auto; }
.cm-count { font-size: 11.5px; color: var(--ink-mute); font-family: var(--font-mono); }

/* Forms — cleaner catalog cards + register groups */
.fm-catalog { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.fm-card { background: var(--bg-elev); border: 1px solid var(--border); border-radius: 12px; padding: 16px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 6px; transition: var(--t); }
.fm-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); }
.fm-card-cat { align-self: flex-start; font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-mute); background: var(--bg-sunk); border-radius: 999px; padding: 3px 9px; }
.fm-card-title { font-size: 14.5px; font-weight: 700; color: var(--ink); line-height: 1.3; }
.fm-card-code { font-size: 10.5px; color: var(--ink-mute); }
.fm-card-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: auto; padding-top: 10px; }
.fm-card-actions .btn { font-size: 12px; }
.fm-typegroup { margin-bottom: 18px; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--bg-elev); }
.fm-typehead { display: flex; align-items: center; gap: 10px; padding: 9px 14px; background: var(--bg-sunk); border-bottom: 1px solid var(--border); }
.fm-typehead-title { font-size: 12.5px; font-weight: 750; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1; }
.fm-typehead-count { margin-left: auto; font-size: 11px; font-family: var(--font-mono); font-weight: 700; color: var(--ink-mute); background: var(--bg-elev); border: 1px solid var(--border); border-radius: 999px; padding: 1px 8px; }

/* Forms register — collapsible project > type tree with export selection */
.fm-click { cursor: pointer; user-select: none; }
.fm-click:hover { background: var(--accent-soft); }
.fm-chev { width: 14px; font-size: 10px; color: var(--ink-mute); flex: 0 0 auto; }
.fm-tick { accent-color: var(--accent); flex: 0 0 auto; margin: 0; }
.fm-subgroup { border-top: 1px solid var(--border); }
.fm-subhead { display: flex; align-items: center; gap: 9px; padding: 8px 14px 8px 26px; background: var(--bg-elev); }
.fm-subhead-title { font-size: 12.5px; font-weight: 650; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fm-subhead-code { font-size: 10px; color: var(--ink-mute); }
.fm-subhead .fm-typehead-count { margin-left: auto; }
.fm-selchip { font-size: 10px; font-weight: 800; background: var(--accent); color: #fff; border-radius: 999px; padding: 1px 8px; white-space: nowrap; }
.fm-rowsel { display: flex; align-items: center; gap: 0; padding-left: 40px; border-top: 1px solid var(--border); }
.fm-rowsel .fm-tick { margin-right: 4px; }
.fm-rowsel-row { flex: 1; min-width: 0; }
.fm-rowsel-row .fm-row { border-bottom: none; }
.fm-exportbar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 10px; background: var(--accent); color: #fff; border-radius: 10px; padding: 8px 14px; margin-bottom: 10px; font-size: 13px; box-shadow: var(--shadow-md); }
.fm-exportbar .btn { font-size: 12px; }
.fm-exportbar .btn-primary { background: #fff; color: var(--ink); border-color: #fff; }
.fm-exportbar .btn-ghost { color: #fff; }
.pv-phone .fm-rowsel { padding-left: 26px; }

/* ---- ArcConnect modules framed inside the ArcApp shell ------------------- */
.module-page { display: flex; flex-direction: column; gap: 0; height: calc(100vh - 150px); min-height: 460px; }
.module-page-loading { padding: 20px 12px; font-size: 12px; color: var(--mute, #6b7280); border: 1px solid var(--line, #d9dde3); border-bottom: 0; border-radius: 8px 8px 0 0; }
.module-page-frame { flex: 1 1 auto; width: 100%; border: 1px solid var(--line, #d9dde3); border-radius: 8px; background: #fff; }
.module-page-loading + .module-page-frame { border-top: 0; border-radius: 0 0 8px 8px; }
@media (max-width: 720px) { .module-page { height: calc(100vh - 120px); } }

/* ---- Real sign-in (Supabase) replaces the prototype's demo login ---------- */
.login-err { padding: 8px 10px; border-radius: 6px; background: #fbe3e1; color: #b3242a; font-size: 12px; font-weight: 600; }
.side-role-name { font-size: 12.5px; font-weight: 700; color: var(--ink, #14181f); }
.side-role-label { font-size: 11px; color: var(--mute, #6b7280); margin-top: 1px; }

/* ---- Phone touch targets -------------------------------------------------
   The app header controls sat at 36-37px. The design system calls for 44px+
   on phones, which is also the iOS minimum for a comfortable tap. */
@media (max-width: 640px) {
  .appheader .btn,
  .appheader .side-toggle,
  .appheader .user-chip { min-height: 44px; }
}

/* minmax(0,1fr) bounds the track. Without it the column is auto-sized to the
   dialog's max-content, so the child's max-width:100% resolves against its own
   width and does nothing — the dialog then overflows a narrow phone and clips
   its buttons. See tools/ops-build (layout check) which fails the build on this. */

/* ---- Dialog actions on a phone ------------------------------------------
   In-app dialog buttons sat at 36px. These are confirm/cancel decisions on a
   phone — often destructive, like closing a payroll week — so they get the
   same 44px minimum as everything else, and wrap instead of clipping if the
   labels are long. */
@media (max-width: 640px) {
  .appdlg-foot { flex-wrap: wrap; }
  .appdlg-foot .btn { min-height: 44px; }
  .modal-foot { flex-wrap: wrap; }
  .modal-foot .btn { min-height: 44px; }
}

/* ---- Mobile sidebar: scrolling and layering ------------------------------
   Three faults showed up as a "glitchy" drawer on an iPhone.

   1. 100vh is the LARGE viewport on mobile Safari — it ignores the collapsing
      toolbar. The shell, the main column and the drawer were all sized to it,
      so the bottom of the app sat under the browser chrome and the layout
      shifted every time the toolbar showed or hid. dvh tracks the viewport that
      is actually visible. The plain 100vh line stays first as the fallback for
      anything that doesn't know dvh.

   2. Scrolling the open drawer past its end chained to .main behind it, so the
      page slid around underneath. overscroll-behavior: contain stops the chain
      at the drawer.

   3. The backdrop passed touch-scrolls straight through to the page. It now
      swallows them, so nothing moves while the drawer is open.                */
.app       { height: 100vh; height: 100dvh; }
.main-col  { height: 100vh; height: 100dvh; }
.sidebar   { height: 100vh; height: 100dvh; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.main      { overscroll-behavior: contain; }
.menu-backdrop { overscroll-behavior: contain; touch-action: none; }

@media (max-width: 960px) {
  /* The drawer sits above the sticky app header (z-20) and its own backdrop
     (z-110), and scrolls internally so all 27 links stay reachable on a phone. */
  .sidebar { z-index: 120; max-height: 100dvh; overflow-y: auto; }
  /* Room to scroll clear of the iOS home indicator. */
  .side-nav { padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
}
/* Opened from the Home Screen, the app runs edge to edge (viewport-fit=cover),
   so the last row of any screen would sit under the iPhone home indicator.
   A spacer, not padding, so each screen's own padding is left alone; it is
   0px everywhere without an indicator. */
.main-col .main::after { content: ""; display: block; height: env(safe-area-inset-bottom, 0px); }

/* ============================================================
   PHONE LAYOUT RESTORATION — device-preview frame removed
   ============================================================
   The hub app used to render inside a simulated device-preview frame
   (.app-viewport.pv-phone > .device-frame > .app) with a Desktop/iPhone
   toggle. Phone layout was authored twice: as real @media (max-width)
   queries, and as ".pv-phone <selector>" rules that only fired while
   the app sat inside that frame. The frame was a design-review tool
   and has been removed, so every fix that existed ONLY as a .pv-phone
   rule is now dead weight — real phones fell back to the desktop
   layout for those screens (e.g. Admin's tabs/user rows squeezing
   sideways at 390px).

   This block ports the still-relevant .pv-phone declarations to real
   media queries so real phones get them again. The .pv-phone rules
   themselves are left in place (inert, harmless) rather than deleted,
   per review instructions.

   Rules that only made sense inside the fake device frame were left
   OUT of this port on purpose:
     - .app-viewport, .device-frame, .device-frame::before, .app,
       .main-col frame-bezel sizing — the frame no longer exists, and
       the real .app/.main-col height already uses the 100vh/100dvh
       fallback pattern added lower in this file.
     - .menu-backdrop, .modal-backdrop, .drawer-editmodal-backdrop
       "position: absolute" overrides — these overlays are
       `position: fixed` in the real app and must stay fixed on a real
       phone (the frame needed `absolute` only because it was itself
       the positioning context).
     - .modal-head/.modal-body/.modal-foot/.modal > form and the
       .drawer equivalents turning into an internal flex/scroll layout
       — that compensated for the frame's own fixed-height, clipped
       `.app { overflow: hidden; height: 100% }` box. The real .modal
       relies on its `.modal-backdrop { position: fixed; overflow:
       auto }` to scroll the whole dialog, and the real .drawer is
       already `position: fixed; top/right/bottom: 0` with its body
       already `overflow: auto; flex: 1` — neither is height-clipped
       on a real page, so the extra internal-scroll plumbing is not
       needed.
     - .drawer-editmodal / .drawer-editmodal-backdrop "make it a
       full-screen sheet" override — the base rule is already
       responsive (`width: min(96vw, 880px); max-height: 92vh;
       overflow-y: auto`), so nothing is actually broken here.
     - .ce-modal's 88vh vs the real 90vh — cosmetic frame-tuning, not
       a functional gap (both are already real viewport units).
   These are also called out individually in the audit report. */

/* ---- Scrollable tab strips: keep long tab rows on one line and let
   them scroll sideways instead of wrapping/overflowing the module. */
@media (max-width: 640px) {
  .eq-tabs, .fab-tabs, .dk-tabs {
    display: flex; overflow-x: auto; -webkit-overflow-scrolling: touch;
    max-width: 100%; scrollbar-width: none;
  }
  .hr-tabs::-webkit-scrollbar, .eq-tabs::-webkit-scrollbar,
  .admin-tabs::-webkit-scrollbar, .fab-tabs::-webkit-scrollbar,
  .dk-tabs::-webkit-scrollbar { display: none; }
  .eq-tab, .admin-tab, .fab-tab, .dk-tab { flex: 0 0 auto; white-space: nowrap; }
}

/* ---- Module wraps: same reduced side padding as the modules that
   already had a real phone rule (hr-wrap, dl-wrap, sched-wrap, …). */
@media (max-width: 640px) {
  .eq-wrap, .rates-wrap, .fab-wrap, .fx-wrap, .rs-wrap, .var-wrap {
    padding-left: 12px; padding-right: 12px; max-width: 100%;
  }
  .var-paper { max-width: 100%; overflow-x: visible; }
}

/* ---- Header/action clusters wrap instead of running off the edge,
   and their buttons wrap onto a second line rather than clipping. */
@media (max-width: 640px) {
  .eq-header, .eq-header > div,
  .dl-header > div, .ra-header, .ra-header > div,
  .var-header, .var-header > div,
  .hr-header, .hr-header > div { flex-wrap: wrap; }
  .eq-header .btn, .dl-header .btn,
  .ra-header .btn, .var-header .btn { white-space: normal; }
}

/* ---- Toolbars wrap, and their filter controls shrink to fit instead
   of forcing horizontal scroll. */
@media (max-width: 640px) {
  .hr-toolbar, .eq-toolbar, .rates-toolbar,
  .fab-toolbar, .fx-toolbar, .rs-toolbar,
  .var-toolbar, .dl-controls { flex-wrap: wrap; gap: 8px; }
  .hr-toolbar > *, .eq-toolbar > *, .rates-toolbar > *,
  .fab-toolbar > *, .fx-toolbar > *, .var-toolbar > * { min-width: 0; max-width: 100%; }
  .hr-toolbar .select, .eq-toolbar .select,
  .fab-toolbar .select, .rates-toolbar .select,
  .fx-toolbar .select { width: auto !important; flex: 1 1 45%; min-width: 0; }
  .hr-toolbar .input, .eq-toolbar .input,
  .fab-toolbar .input, .fx-toolbar .input,
  .fab-search { width: auto !important; flex: 1 1 100%; min-width: 0; }
}

/* ---- Stat/summary card grids: 2-up instead of crushing every card
   into an unreadable sliver. */
@media (max-width: 640px) {
  .eq-stats, .fab-summary, .fx-stats { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ---- Wide tables and the fab timeline: scroll the CONTAINER
   sideways (never restyle the table itself — that breaks column
   layout), matching the pattern already used for other tables. */
@media (max-width: 640px) {
  .collapsible-body, .hr-tablewrap, .rates-tablewrap, .dk-tablewrap {
    overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%;
  }
  .fab-tl-scroll { max-width: 100%; overflow-x: auto; max-height: none; }
  .fab-tl { min-width: max-content; }
}

/* ---- Inputs inside data tables/registers must not force their row
   wider than the viewport. */
@media (max-width: 640px) {
  .hr-table input, .var-paper input, .dlr-inp { min-width: 0; }
}

/* ---- Nothing embedded in the page body may exceed the viewport
   width (images/canvases/inline SVGs used across a few modules). */
@media (max-width: 640px) {
  .main img, .main canvas, .main svg { max-width: 100%; }
}

/* ---- Rates register: stack each row into a card (matching the
   pattern used for the Docket/Variation registers) so the fixed
   130px/200px/90px columns don't overflow a phone and the Open
   button stays reachable. */
@media (max-width: 640px) {
  .ra-reg-head { display: none; }
  .ra-reg { overflow: visible; }
  .ra-reg-row {
    grid-template-columns: 1fr auto; gap: 4px 10px; padding: 12px 14px; align-items: start;
  }
  .ra-reg-row > *:nth-child(1) { grid-column: 1; grid-row: 1; font-weight: 650; }
  .ra-reg-row > *:nth-child(2) { grid-column: 2; grid-row: 1; text-align: right !important; }
  .ra-reg-row > *:nth-child(3) { grid-column: 1 / -1; text-align: left !important; }
  .ra-reg-row > *:nth-child(4) { grid-column: 1 / -1; text-align: left !important; }
  .ra-reg-row .btn { width: 100%; justify-content: center; }
}

/* ---- Timesheet toolbar: the tab pair wraps onto its own row instead
   of squeezing next to the filter group, and stays readable. */
@media (max-width: 640px) {
  .ts-tabrow { min-width: 0; max-width: 100%; display: flex; flex-wrap: wrap; gap: 6px; }
  .ts-toolbar h1 { font-size: 19px !important; }
  .ts-tabrow .pill { font-size: 12px; padding: 6px 11px; }
  .ts-filter-group > .ts-flabel { margin-bottom: -4px; }
}

/* ---- App header: match the existing 620px title-wrap rule with the
   rest of the header's phone sizing (crumb, right-side actions). */
@media (max-width: 620px) {
  .appheader { padding: 9px 12px; gap: 9px; }
  .appheader .crumb { font-size: 10px; letter-spacing: .08em; }
  .appheader-right { gap: 5px; }
  .appheader-right .btn-ghost { padding: 5px 8px; font-size: 11px; }
  /* Hours register title also must not truncate one-word-per-line. */
  .dlr-reg-title { white-space: normal; }
}

/* ---- Forms: the "type" filter row wraps instead of clipping. */
@media (max-width: 640px) {
  .fm-typehead { flex-wrap: wrap; gap: 4px; }
  .fm-typehead-title { white-space: normal; overflow-wrap: anywhere; }
}

/* ---- Fab tracker: scope toggle goes full width, status dots wrap. */
@media (max-width: 640px) {
  .fab-scope { width: 100%; }
  .fab-scope button { flex: 1; }
  .fab-dots { flex-wrap: wrap; }
}
/* Pack row action button — shares the real @media (max-width: 900px)
   breakpoint that already makes .fab-pack "position: relative". */
@media (max-width: 900px) {
  .fab-pack-actions { position: absolute; right: 12px; }
}

/* ---- Missing register: a couple of row/toolbar details the real
   640px rule for this module doesn't cover yet. */
@media (max-width: 640px) {
  .mi-row-jobmark { text-align: right; }
  .mi-row-desc { font-size: 13.5px; }
  .missing-toolbar > div { width: 100%; }
  .missing-filter { flex-wrap: wrap; gap: 6px; }
}

/* ---- Intake form: quick-time preset row and pill/section headers
   wrap instead of overflowing. */
@media (max-width: 640px) {
  .qtime-preload { flex: 0 0 auto; }
  .pill-group { flex-wrap: wrap; }
  .section-title { flex-wrap: wrap; }
}

/* ---- Timesheet week header: the project/job select fills the row
   alongside the primary button (siblings already fixed at 620px). */
@media (max-width: 620px) {
  .ts-headrow > .select { flex: 1; width: auto !important; }
}

/* ---- Crew entry: footer total/save wraps onto its own row, and the
   modal body actually scrolls within its max-height instead of
   spilling past it (a real gap, sharpest on a short phone viewport —
   the modal is already flex-column with `max-height: 90vh` for real,
   it just never told its body to grow/scroll within that box). */
@media (max-width: 640px) {
  .ce-foot { flex-wrap: wrap; gap: 8px; }
  .ce-foot .ce-grand, .ce-foot .ce-saved { flex-basis: 100%; order: 2; }
  .ce-foot > div { order: 1; margin-left: auto; }
  .ce-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
}

/* ---- Docket Library: header stacks, filter fields go full width,
   and the docket meta/signature-record inputs don't overflow their
   column. (A parallel, never-applied ".dlp-stack" class defines this
   same layout elsewhere in this file — nothing in the app ever adds
   that class, so it was dead too; this phone media query is the
   actual fix and makes that class redundant rather than replacing it,
   since removing it is out of scope for a phone-layout pass.) */
@media (max-width: 640px) {
  .dl-header { flex-direction: column; align-items: stretch; gap: 12px; }
  .dl-controls .field { width: 100% !important; }
  .dl-controls .field > div,
  .dl-controls select.select,
  .dl-controls input.input { width: 100% !important; box-sizing: border-box; }
  .dl-siglock-btn { align-self: stretch; }
  .dlr-recordbox .dlr-inp { width: 100%; text-align: left; }
  .dlr-meta label { flex-direction: column; align-items: stretch; gap: 3px; min-width: 0; }
  .dlr-meta label > span { min-width: 0; white-space: normal; }
  .dlr-meta > * { min-width: 0; }
  .dlr-meta .dlr-inp, .dlr-meta input, .dlr-meta select {
    width: 100%; min-width: 0; box-sizing: border-box;
  }
  .vqr-meta label { min-width: 0; }
  .vqr-meta .dlr-inp, .vqr-meta input, .vqr-meta select {
    width: 100%; min-width: 0; box-sizing: border-box;
  }
}

/* ---- Delivery load sign: people grid drops to one column so names
   never get crushed against the fixed 240px track minimum. */
@media (max-width: 640px) {
  .dls-people { grid-template-columns: 1fr; }
}

/* ---- Fab errors grid: the calc(100vh - 300px) cap leaves almost no
   room on a phone — let the table grow with the page instead, and
   give the description column a floor once the sticky job column
   pushes it narrow. */
@media (max-width: 900px) {
  .fg-scroll { max-height: none; }
  .fg-c-desc { min-width: 150px; }
}

/* ---- Equipment board: one column of location cards instead of the
   auto-fill grid trying to fit multiple 268px columns; request rows
   wrap instead of clipping their action buttons. */
@media (max-width: 640px) {
  .eq-board { grid-template-columns: 1fr; }
  .eq-req-row { flex-wrap: wrap; }
}

/* ---- Timesheet review/summary: a few details the real 640px rules
   for these views don't cover yet. */
@media (max-width: 640px) {
  .ts-dc-reason { margin-left: 0; font-size: 11px; }
  .ts-review-alloc { display: flex; justify-content: space-between; gap: 8px; padding: 2px 0; border: none; background: none; }
  .ts-review-alloc > span:first-child { display: block; white-space: normal !important; }
  .modal-foot { gap: 8px; }
  .ts-sum-cut { font-size: 12px; line-height: 1.45; }
  .ts-row-daybox { gap: 3px; }
  .ts-sum-weekpick, .ts-sum-weekdate { width: 100%; max-width: none; }
}

/* ---- Hours progress cards: single column. */
@media (max-width: 640px) {
  .hr-pcards { grid-template-columns: 1fr; }
  /* 6 months must fit inside ~320px — shrink columns and allow scroll
     as a fallback. */
  .hr-pb-trend-bars { gap: 8px; overflow-x: auto; padding-bottom: 4px; }
}

/* ---- Consumables: new-item input doesn't get crushed by its row. */
@media (max-width: 640px) {
  .cons-newform .input { min-width: 100%; }
}

/* ---- Forms row-select checkbox gets breathing room from the row's
   left edge, matching the phone card padding. */
@media (max-width: 640px) {
  .fm-rowsel { padding-left: 26px; }
}

/* ============================================================
   PHONE LAYOUT — VERIFICATION PASS
   ============================================================
   Measured at 390x844 against the built bundle. These are gaps the
   .pv-phone port above did not close, because they were never
   .pv-phone rules in the first place (Admin, .seg) or because the
   existing real @media rule for the same selector sets a DIFFERENT
   value for the property in question, so a selector-level "already
   covered" check reports them as done (.dlr-meta, .ts-review-day).  */

/* ---- Admin header. `.admin-header` is `display: flex;
   justify-content: space-between; align-items: flex-end` with no
   phone rule at any breakpoint. At 390px the left block (h1 + intro
   sentence) was measured at 78px wide x 206px tall, the Users/Roles
   tabs fell onto two rows, and "+ Invite user" collapsed to a 64x74
   tall square. Stacking the header gives the intro the full column
   and lets the tab strip sit in one row again. */
@media (max-width: 640px) {
  .admin-header { flex-direction: column; align-items: stretch; gap: 12px; }
  .admin-header > div:last-child { flex-wrap: wrap; }
  .admin-header .btn-primary { white-space: nowrap; }
}

/* ---- Admin user rows. `.admin-row` is a non-wrapping flex row, so
   on the invited-user card the Edit / Resend invite / Cancel buttons
   ran off the side — Cancel's right edge measured 414px in a 390px
   viewport, i.e. 24px outside and unreachable (.main clips it).
   The name/email block takes its own line so the actions wrap under
   it. `flex-basis` needs !important only because the block carries an
   inline `style={{ flex: 1 }}`. */
@media (max-width: 640px) {
  .admin-row { flex-wrap: wrap; }
  .admin-row > div:first-child { flex-basis: 100% !important; }
}

/* ---- Segmented controls (`.seg`: Docket Library, Forms, Leave,
   Timesheet) are `inline-flex` with `flex-shrink: 0` and nowrap
   buttons, and had no phone rule. Delivery Dockets measured 418px
   wide in a 390px viewport. Scroll the strip sideways, the same
   treatment .eq-tabs / .fab-tabs / .dk-tabs get above. */
@media (max-width: 640px) {
  .seg {
    max-width: 100%; overflow-x: auto;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .seg::-webkit-scrollbar { display: none; }
  .seg > button { flex: 0 0 auto; }
}

/* ---- Docket meta grid. The real rule at max-width 640 sets
   `.dl-meta, .dlr-meta { grid-template-columns: 1fr 1fr }`, so the
   selector looks covered — but the final .pv-phone value was the
   single column (explicitly commented "stack single-column on
   phone"). Only the label/input half of that pair got ported, which
   left stacked labels inside a still-two-column grid. */
@media (max-width: 640px) {
  .dlr-meta { grid-template-columns: 1fr; gap: 10px; }
  .dlr-head { flex-direction: column; }
  .dlr-recordbox { width: 100%; }
}

/* ---- Timesheet review / summary / list rows. Same shape as above:
   each selector has a real 640px rule, but those rules carry only the
   grid plumbing and dropped the type scale, padding and cross-axis
   alignment the phone layout was authored with. Without the
   `align-self` values every row falls back to the block's
   `align-items: start`, so the supervisor chip and the hours column
   sit top-aligned instead of centred on the day name. */
@media (max-width: 640px) {
  .ts-review-grid { gap: 6px; }
  .ts-review-day { grid-template-columns: 58px 1fr auto; row-gap: 4px; padding: 9px 11px; }
  .ts-review-day-name {
    font-size: 12.5px; font-weight: 800; color: var(--ink);
    line-height: 1.1; align-self: center;
  }
  .ts-review-day-date {
    font-size: 11px; font-weight: 600; color: var(--ink-soft); align-self: start;
  }
  .ts-day-sup { align-self: center; }
  .ts-review-day-hours { font-size: 18px; align-self: center; }
  .ts-review-day-allocs { margin-top: 2px; }
  .modal-foot .btn { font-size: 12.5px; padding: 8px 12px; }

  .ts-sum-row.ts-sum-grid { padding: 10px 12px; }
  .ts-sum-name { font-size: 13px; }
  .ts-sum-hrs { font-size: 15px; }
  .ts-sum-days { align-items: center; }

  .ts-row { padding: 11px 12px; }
  .ts-row-hrs { font-size: 17px; min-width: 0; align-items: flex-start; }
}

/* ============================================================
   PHONE LAYOUT — REVIVING THE SHADOWED @media BLOCK
   ============================================================
   The original phone block lives at the TOP of this file (roughly
   lines 325-420), before almost all of the component CSS. A media
   query adds no specificity, so every one of its declarations that a
   later base rule also sets has been losing the cascade on source
   order alone — `.missing-stats { grid-template-columns: 1fr 1fr }`
   at line 378 vs `repeat(5, 1fr)` at line 2106, and ~40 more.

   That block was therefore already dead before the device frame was
   removed. It stayed invisible because the `.pv-phone <selector>`
   mirror carried the same declarations at (0,2,0) specificity from
   line 5639 onwards, so the preview frame rendered correctly while a
   real phone did not. An audit that asks "does this selector have a
   real @media equivalent?" counts those selectors as covered, which
   is why the port above skipped them.

   Measured at 390x844 before this block: Missing Items laid its five
   stat tiles out in five columns, 464px of content in a 390px
   viewport. Module titles in the app header were `white-space:
   nowrap; overflow: hidden` — the exact truncation the comment at
   line 2208 says must never happen. Every module wrapper kept its
   24px desktop padding instead of 12px, costing 6% of the screen.

   Each declaration below is a shadowed one restated at its original
   breakpoint. Nothing new is introduced. Rules that are already
   revived by a later media query (.pt-entry-row, .fab-stage-editrow,
   .ts-row gap, .ts-row-total) are deliberately not repeated, and the
   `.hub-grid` 1024px rule is left dead because reviving it would
   change tablet/desktop, not phone.                                 */

@media (max-width: 800px) {
  .reminder-phone { display: none; }
}

@media (max-width: 760px) {
  .share-phone { display: none; }
}

@media (max-width: 720px) {
  .hub-scope-hint { width: 100%; }
  .hr-tab { white-space: nowrap; }
}

@media (max-width: 620px) {
  /* "Module title must never truncate to 'Time...' on a phone" — the
     rule at line 2209 that says so is shadowed by line 5310. */
  .appheader h1 { white-space: normal; overflow: visible; font-size: 16px; line-height: 1.15; }
  .fm-row { padding: 12px 14px; }
  .fm-row-title { word-break: normal; }
  .dlr-reg-row { align-items: center; }
}

@media (max-width: 560px) {
  /* The whole 560px block at line 2190 is shadowed the same way: it
     sits before `.ts-wrap { padding: 24px }` at line 3450. */
  .ts-wrap { padding: 14px 12px 40px; overflow-x: hidden; }
  .ts-toolbar { align-items: stretch; gap: 10px; }
  .ts-wrap, .ts-tabrow, .ts-filter-group, .ts-exportrow { min-width: 0; max-width: 100%; }
  .ts-filter-group { gap: 8px; width: 100%; }
  .ts-jobfilter { display: flex; }
  .ts-projsel, .ts-jobinput { font-size: 13px; padding: 9px 11px; }
}

@media (max-width: 640px) {
  /* Module wrappers: phone padding, not the 24px desktop gutter. */
  /* .ts-wrap is deliberately absent: its own 560px rule (line 2191) is
     alive and adds the 40px bottom padding this list would drop. */
  .sched-wrap, .fix-wrap, .dk-wrap, .lot-wrap, .admin-wrap,
  .missing-wrap, .runsheet-wrap, .vq-wrap, .dl-wrap, .ra-wrap { padding: 14px 12px; }
  .hub-wrap { padding: 28px 16px 48px; }
  .intake-wrap { padding: 16px 14px 60px; }
  .intake-card { padding: 16px 14px 14px; border-radius: var(--radius); }
  .intake-header h1 { font-size: 19px; }
  .hub-header h1 { font-size: 24px; }

  /* Paper surfaces and their wrappers stop being desktop-width. */
  .runsheet-paper, .dl-paper { padding: 14px 14px; }
  .runsheet-paper { overflow-x: hidden; }
  .runsheet-wrap, .hr-wrap { max-width: 100%; overflow-x: visible; }
  .vq-wrap { max-width: 100%; }
  .eq-table-scroll, .runsheet-run { max-width: 100%; }

  /* Meta grids collapse instead of keeping 3-5 desktop columns. */
  /* .vqr-meta is deliberately absent: the dead rule said 1fr, but the
     newer, alive 720px rule (line 2990) says 2-up and that is what the
     preview rendered too. */
  .dl-meta { grid-template-columns: 1fr 1fr; }
  .detail-row { grid-template-columns: 1fr; gap: 2px; }
  .missing-stats { grid-template-columns: 1fr 1fr; }

  /* Record boxes stop reserving 210px and right-aligning. */
  .runsheet-header .meta, .dlr-recordbox, .vqr-titlebox { text-align: left; }
  .dlr-recordbox { min-width: 0; }
  .dlr-head, .vqr-head { gap: 10px; }

  /* Missing register toolbar stacks. .missing-row is deliberately
     absent: the newer, alive 700px rule (line 4745) owns that row's
     align-items/gap and is what the preview rendered. */
  .missing-toolbar { flex-direction: column; align-items: stretch; gap: 8px; }

  /* Touch target for the shared pill control. */
  .pill { padding: 9px 13px; font-size: 14px; }

  /* Drawers are full-bleed sheets on a phone, not a 480px panel. */
  .drawer { width: 100%; max-width: 100%; }
}

/* ============================================================
   IPAD / TABLET LAYOUT PASS
   ============================================================
   Nothing existed for the 641-1024px band before this block: the phone
   rules above stop at 640px, the desktop rules start around 1025px, and
   there are zero min-width queries anywhere in this file. This adds a
   real tablet tier, verified against the app's real components served
   locally (not eyeballed) at:
     portrait  768x1024 (iPad 9th), 820x1180 (iPad 10th/Air), 834x1194 (Pro 11)
     landscape 1024x768, 1180x820, 1194x834
     also      1024x1366 (iPad Pro 12.9 portrait)

   The sidebar breakpoint is 960px, so every size above is either the
   960px drawer (portrait) or the fixed 256px sidebar (landscape). In the
   landscape case the *viewport* is 1024-1194px wide but the `.main`
   content column is only ~753-867px wide (256px sidebar + its border +
   the page scrollbar). A `max-width` media query only ever sees viewport
   width, not that narrower content width, so two techniques are used
   below depending on what the fix depends on:

     - `max-width: 1024px` for layout that depends on available
       viewport width (grids, wrapping headers). Measuring every module
       below at 1180x820 and 1194x834 found the `.main` column there is
       852-867px wide either way — comfortably enough room that nothing
       audited actually needed help above 1024px. So 1024px alone covers
       every layout fix found by measurement.
     - `(hover: none) and (pointer: coarse)` for touch concerns that
       don't depend on viewport width at all (tap-target sizing,
       hover-only affordances). This also reaches 1180x820 and 1194x834,
       which sit above the 1024px cutoff but are still touchscreens, and
       it carries `min-width: 641px` wherever it would otherwise change
       phone LAYOUT (see "Touch targets", section 3). Section 4 is
       deliberately un-guarded: it only sets `opacity`, which does not
       participate in layout, and phones have the same hover-reveal bug —
       see the verifier note there. No new width breakpoint values are
       introduced anywhere in this block.
   ============================================================ */

/* ---- 1. Hub tiles: 2-up on iPad in both orientations ---------------------
   Hub.jsx (the component that actually renders under window.Hub) uses
   `.hub-grid2`, an auto-fill grid keyed off available content width —
   NOT `.hub-grid` / `.hub-tile` / `.hub-wrap`, which are described
   elsewhere in this file (and in the brief for this pass) as the live
   hub grid. They are not: `grep -rn "hub-grid\b|hub-tile|hub-wrap"
   ops/*.jsx` returns nothing. That trio, and the whole dead `@media
   (max-width: 1024px)` block near the top of this file that restates
   `.hub-grid`, target markup nothing renders. Restating `.hub-grid`
   below is kept for literal compliance and because dead CSS is free,
   but it changes nothing a user sees; the real fix is the `.hub-grid2`
   rule under it.

   Measured `.hub-grid2` width (not viewport width): 697px at
   768/820/834 portrait and at 1024x768 landscape; 852-867px at
   1180x820/1194x834 landscape; 953px at 1280x900 desktop. The original
   `minmax(268px, 1fr)` fits 3 columns as soon as content is >=832px
   wide (3*268 + 2*14 gap), so every landscape iPad *except* the 1024
   one already rendered 3-up before this change, same as desktop.
   Raising the minimum to 300px moves that threshold to >=928px: still
   2-up at 867px (the widest iPad tested, in either orientation) and
   still 3-up at 953px (desktop, only 25px to spare) and up. Sonnet applied
   this unconditionally (no media query); see the verifier note below for
   why that had to be gated.

   VERIFIER NOTE (the 300px minimum is now media-gated, was unconditional):
   measured `.hub-grid2` width is exactly `viewport - 327.2px` whenever the
   256px sidebar is showing. That puts the widest iPad landscape (1194 ->
   866.8px) and a 1200px laptop (-> 872.8px) only 6px apart, so NO single
   auto-fill minimum can give one 2-up and the other 3-up. Unconditional
   300px therefore bought iPad 2-up at the cost of desktop: 3 columns need
   3*300+2*14 = 928px of grid, i.e. viewport >= 1255px, so every viewport
   from 1160 to 1255 — including a 1200px laptop and a non-maximised window
   on a 1440 screen — silently dropped from 3 columns to 2. Measured: 1200
   -> 872.8px -> 2 cols (was 3 at the old 268px minimum). It also left only
   24.8px of margin at 1280, which a 110% browser zoom erases.

   Gating it to the same tablet condition section 3 uses keeps 268px on
   non-touch desktops and restores every one of those: 1200 -> 3 cols,
   1280 -> 3 cols with 120.8px of margin instead of 24.8px. Verified column
   counts after this change: 768/820/1024/1180/1200 -> 2,2,2,2(touch)/3(desktop),
   1280/1366/1440 -> 3. Phones <=640px keep 268px and stay 1-up either way;
   the one behaviour change is a landscape phone 641-680px wide, where a
   ~604px grid goes 2-up -> 1-up. Accepted: it is a 10px knife-edge and
   1-up at 604px reads fine.

   `.hub-grid` is gated >=641px too. It is dead either way (no JSX renders
   it), but as written at plain `max-width: 1024px` it sat *after* the
   640px `.hub-grid { 1fr }` rule at line 346 and silently beat it, so a
   phone would have gone 2-up if that markup were ever revived. */
@media (min-width: 641px) and (max-width: 1024px) { .hub-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 641px) and (max-width: 1024px),
       (min-width: 641px) and (hover: none) and (pointer: coarse) {
  .hub-grid2 { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
}

/* ---- 2. Day Labour Dockets & Day Labour Variations: header overflow -----
   Measured real page-width overflow (not a bounded inner scroller) on
   Day Labour Variations at every iPad size 768-1024px: `.main`
   scrollWidth 893px vs clientWidth 753-805px, an 88-140px horizontal
   scroll on the whole page. Two causes, both already-solved-on-phone
   problems with nothing carrying the fix past 640px:

   a) `.dl-header`'s right-hand action row (Save/Export/Print for
      Variations, Save/Cancel for Day Labour Dockets, both share this
      class) is a non-wrapping flex row with a segmented control plus
      2-4 buttons that doesn't fit beside the title under 1025px.

   `min-width: 641px` again throughout: most of what follows is already
   live on phone and this only restates it (harmless either way), but
   `.dlr-head`/`.vqr-head` genuinely gaining `flex-wrap` is new behavior,
   and it stays out of the ≤640px band on principle. */
@media (min-width: 641px) and (max-width: 1024px) {
  .dl-header > div { flex-wrap: wrap; }
  .dl-header .btn { white-space: normal; }

  /* b) `.dlr-recordbox` / `.vqr-titlebox` (the "Record No. / Date" box,
        top-right of the printed docket/quote header) stay right-aligned
        with a 210px min-width and a 110px-wide right-aligned input
        inside, and `.dlr-head` / `.vqr-head` don't wrap — together this
        is what actually pushes the page wider than the viewport. */
  .dlr-head, .vqr-head { flex-wrap: wrap; gap: 10px; }
  .dlr-recordbox, .vqr-titlebox { text-align: left; min-width: 0; }

  /* c) `.vqr-meta` (Variation No./Rev/Ref/Date/Project/Job# row) stays
        a 4-column grid until 720px — between 721 and 1024px it measured
        a REAL 121px page overflow (not just a squeeze): a `1fr` grid
        track won't shrink below its content's min-content width unless
        the item inside is told `min-width: 0`, and the Client/Site
        Instruction inputs in the 4th column don't wrap their text, so
        they forced that column (and the whole page) 193px wide instead
        of the ~172px the track actually had. `.dl-meta` (a 3-column
        grid with the identical shape, defined a few hundred lines up)
        is restated the same way alongside it for consistency, though
        it is currently dead CSS — `grep -rn "dl-meta\b" ops/*.jsx`
        returns nothing, matching the file's existing precedent of
        restating dead selectors defensively (see `.dl-meta,
        .dlr-meta` in the 640px block near the top of this file). */
  .vqr-meta { grid-template-columns: repeat(2, 1fr); }
  .vqr-meta label, .vqr-meta .dlr-inp, .vqr-meta input, .vqr-meta select { min-width: 0; }
  .dl-meta { grid-template-columns: repeat(2, 1fr); }
  .dl-meta .dlr-inp, .dl-meta input, .dl-meta select { min-width: 0; }

  /* d) VERIFIER FIX — `.dlr-meta`, the SAME bug as (c) on Day Labour
        Dockets, was missed: the block above restated the dead `.dl-meta`
        but omitted the live `.dlr-meta` (DayLabour.jsx:702), which has its
        own phone fix at lines 6942-6945 that likewise stops at 640px.
        `.dlr-meta` is a 2-column grid whose `label` children are flex rows
        containing a `> span` pinned to `min-width: 130px; white-space:
        nowrap` plus a `.dlr-inp` at `flex: 1` — with the labels left at
        `min-width: auto` the second track refused to shrink below 381px,
        so the grid measured 735.8px inside a 705px paper.

        Measured on Day Labour Dockets, `.main` scrollWidth vs clientWidth:
          768x1024   791 / 753  = 38px page overflow  -> 0 after this rule
          1024x768   791 / 753  = 38px page overflow  -> 0 after this rule
          820x1180   805 / 805  = already clean (805px column is wide enough)
        Tracks go from `330.8px 381px` to an even `309.6px 309.6px`. The
        `> *` form mirrors the existing phone rule at line 6944 rather than
        inventing a new selector shape. */
  .dlr-meta > * { min-width: 0; }
  .dlr-meta .dlr-inp, .dlr-meta input, .dlr-meta select { min-width: 0; }
}

/* ---- 3. Touch targets: extend 44px minimums onto iPad --------------------
   The `min-width: 641px` lower bound on every rule in this section is
   deliberate and load-bearing: without it, `(hover: none) and
   (pointer: coarse)` also matches real phones and would change the
   phone layout, which is out of scope for this pass. */
@media (min-width: 641px) and (max-width: 1024px),
       (min-width: 641px) and (hover: none) and (pointer: coarse) {
  /* Existing @640 rule (search "Phone touch targets" above) restated:
     app-header controls and in-app dialog actions. */
  .appheader .btn, .appheader .side-toggle, .appheader .user-chip { min-height: 44px; }
  .appdlg-foot .btn, .modal-foot .btn { min-height: 44px; }

  /* `.side-navlink` (every link in the drawer/sidebar module list) had
     no touch-target rule at ANY breakpoint, including phone — it sizes
     to font + 8px padding, ~35px tall. The drawer (portrait) and fixed
     sidebar (landscape) are both real touch surfaces at every iPad size
     tested. Left off phone on purpose (see note above); phone's drawer
     keeps its current, denser 27-link list unchanged. */
  .side-navlink { min-height: 44px; }

  /* Tab / segmented-control strips: same gap, no existing size floor at
     any width. `display: inline-flex; align-items/justify-content:
     center` is added alongside `min-height` because these are plain
     `<button>` elements (inline-block) — a bare min-height just pads
     below the text instead of centering it.

     VERIFIER FIX — `.hr-tab` added. The list below was taken from the
     640px rule at line 6769, which itself omits `.hr-tab`; but `.hr-tab`
     is live (HoursTracking.jsx, ProgressTrend.jsx) and measured 32.9px on
     Hours Tracking at 768, 820, 1024 and 1180 — the shortest tab in the
     app and the only tab strip left below 44px after this pass. Note the
     inverse too: `.dk-tab` is kept but is dead — it has no base rule and
     no reference outside this stylesheet. */
  .admin-tab, .eq-tab, .dk-tab, .fab-tab, .hr-tab, .seg button {
    min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
  }
}

/* ---- 4. Hover-only affordances made reachable on touch -------------------
   Audited every `:hover` rule in this file (175 of them). The large
   majority just tint a background or border on an already-fully-visible,
   already-tappable control — irrelevant on touch, since tapping works
   without ever seeing the hover state. These hide or heavily dim an
   affordance until hover, which a touchscreen can never trigger.

   VERIFIER CHANGE 1 — the `min-width: 641px` guard is REMOVED from this
   section only (section 3 keeps it). Sonnet left it on to honour "phone
   unchanged" while noting phones have the identical bug. Measured at
   390x844, where `(hover: none) and (pointer: coarse)` really does match:
   46 `.tl-more` links at computed opacity 0 on Equipment > Tools, and 71
   `.fg-archbtn` buttons at 0.55 on Production Tracker. Those controls are
   invisible or near-invisible to every phone user in production today,
   and phones are the larger population.

   The guard was worth keeping in section 3, where 44px minimums genuinely
   reflow a 27-link drawer. It buys nothing here: every declaration in this
   block is `opacity` (plus one `background`), and opacity does not
   participate in layout. Verified by injecting this block un-gated at
   390x844 on Production Tracker, Equipment, Delivery Schedule and Lotting
   Plans and diffing `.main`: scrollWidth delta 0 and scrollHeight delta 0
   on all four. "Phone unchanged" is preserved in the sense a layout pass
   means it; the only change is that four hidden controls become visible.

   VERIFIER CHANGE 2 — two reveals the 175-rule audit missed are added at
   the end of this block. */
@media (hover: none) and (pointer: coarse) {
  /* ToolRegister row "details ›" link (Equipment > Tools tab): opacity 0
     until the row is hovered, so on a touchscreen this link never
     becomes visible at all, even though tapping the row still works. */
  .tl-more { opacity: 1; }

  /* Delivery card bulk-select checkbox (Delivery Schedule week view):
     0.5 opacity until hover or selected — present but easy to miss as a
     tappable control on a touchscreen. */
  .dc-check { opacity: 1; }

  /* Pack Picker / Lotting Plans drawing thumbnails: the "🔍 View" hint
     is opacity 0 until hover. The thumbnail is a real <button> so
     tapping it already opens the drawing; this only restores the visual
     cue that it's tappable before the tap. */
  .pack-drawing-overlay { opacity: 1; background: rgba(20,24,31,0.18); }

  /* Production Tracker "Up Coming" view archive button: 0.55 opacity
     until hover, not invisible but easy to overlook as an active
     control on touch. */
  .fg-archbtn { opacity: 0.85; }

  /* VERIFIER FIX — Production Tracker date cells. `.fg-dateinp` (71
     instances on the Production Tracker alone) hides its native date
     picker button outright: line 5864 sets the indicator to `opacity: 0`
     and only line 5865, a `:hover` rule, brings it to 0.55. This is the
     same shape as `.tl-more` — an affordance at literal opacity 0 behind
     a hover a touchscreen cannot produce — and is the most severe of the
     set, but the audit missed it because the selector is a `::-webkit-`
     pseudo-element rather than a class. 0.55 matches what a mouse user
     sees on hover. */
  .fg-dateinp::-webkit-calendar-picker-indicator { opacity: 0.55; }

  /* VERIFIER FIX — Variations docket chip "×" (unlink). Base opacity 0.6,
     raised to 1 only by `.vqr-docket-chip.linked:hover`. Sonnet drew its
     cutoff between this (0.6) and `.fg-archbtn` (0.55) and fixed only the
     latter; a 0.05 difference is not a real distinction, so it is included
     here for consistency. */
  .vqr-chip-x { opacity: 1; }
}

/* ---- 5. Audited, no change needed -----------------------------------------
   Measured clean (no page-width overflow, no controls clipped past the
   viewport edge, excluding controls inside a container that is itself
   meant to scroll sideways such as .eq-tabs/.fg-scroll/.dlr-scroll) at
   768x1024, 820x1180, 1024x768 and 1180x820 for: Admin, Delivery
   Schedule, Delivery Dockets, Time Sheet, Production Tracker (Active/
   Archived/All views — the Up Coming view's .fg-scroll table is a bounded
   inner scroller by design, see item 4 for its one real gap), Equipment,
   Job Numbers, Missing Items. Their existing grids/flex-wraps and the
   already-unconditional `overflow: auto` on `.fg-scroll` / `.dlr-scroll`
   / `.eq-table-scroll` / `.fab-tl-scroll` already do the right thing at
   these widths without further changes.

   `.modal` (480px), `.drawer` (480px) and `.appdlg` (420px) all already
   carry a `max-width` (100%, 90vw, 100% respectively) — confirmed none
   of them force full-bleed or run off-screen anywhere in the 641-1024px
   band. */

/* ============================================================
   Notifications bell (ops/notify.jsx)
   ============================================================ */
.nt { position: relative; }
.nt-bell { position: relative; min-width: 40px; justify-content: center; padding-left: 8px; padding-right: 8px; font-size: 17px; }
.nt-count {
  position: absolute; top: 2px; right: 2px; min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 9px; background: var(--bad); color: #fff;
  font-size: 10.5px; font-weight: 700; line-height: 17px; text-align: center;
}
.nt-panel {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 100;
  width: 360px; max-width: calc(100vw - 16px);
  display: flex; flex-direction: column; max-height: min(560px, 75dvh);
  background: var(--bg-elev); color: var(--ink);
  border: 1px solid var(--border-strong); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); overflow: hidden;
}
.nt-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px; border-bottom: 1px solid var(--border); font-size: 14px;
}
.nt-link {
  background: none; border: 0; padding: 4px 0; cursor: pointer;
  color: var(--accent-ink); font-size: 12.5px; font-weight: 600;
}
.nt-list { overflow-y: auto; overscroll-behavior: contain; flex: 1 1 auto; min-height: 0; }
.nt-empty { padding: 28px 18px; font-size: 13px; color: var(--ink-mute); text-align: center; line-height: 1.5; }
.nt-item { display: flex; align-items: flex-start; background: var(--bg-elev); border-bottom: 1px solid var(--border); }
.nt-item:hover { background: var(--steel-soft); }
.nt-open {
  display: flex; gap: 10px; flex: 1 1 auto; min-width: 0; text-align: left; cursor: pointer;
  padding: 12px 4px 12px 16px; background: none; border: 0; color: inherit; font: inherit;
}
/* 44px square: a thumb-sized target that doesn't crowd the text. */
.nt-x {
  flex: 0 0 44px; height: 44px; margin: 4px 4px 0 0; border: 0; border-radius: var(--radius-sm);
  background: none; color: var(--ink-mute); font-size: 20px; line-height: 1; cursor: pointer;
}
.nt-x:hover { background: var(--bg-sunk); color: var(--ink); }
.nt-actions { display: flex; align-items: center; gap: 14px; }
.nt-clear { color: var(--bad); }
.nt-dot { flex: 0 0 8px; height: 8px; margin-top: 6px; border-radius: 50%; background: transparent; }
.nt-item.unread .nt-dot { background: var(--accent); }
.nt-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nt-title { font-size: 13.5px; font-weight: 600; }
.nt-item.unread .nt-title { font-weight: 700; }
.nt-body { font-size: 12.5px; color: var(--ink-soft); line-height: 1.4; overflow-wrap: anywhere; }
.nt-time { font-size: 11px; color: var(--ink-mute); margin-top: 2px; }
.nt-foot { padding: 12px 16px; border-top: 1px solid var(--border); background: var(--bg-sunk); font-size: 12.5px; }
.nt-foot-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.nt-enable { width: 100%; justify-content: center; }
.nt-hint { margin-top: 6px; color: var(--ink-mute); line-height: 1.45; }
.nt-foot-row + .nt-hint, .nt-foot > .nt-hint:first-child { margin-top: 0; }
.nt-err { margin-top: 6px; color: var(--bad); }
/* On a phone the panel hangs from the header across the screen, not off the
   bell, so it can never run off the left edge. */
@media (max-width: 560px) {
  .nt { position: static; }
  .nt-panel { position: fixed; top: calc(env(safe-area-inset-top, 0px) + 60px); left: 8px; right: 8px; width: auto; max-width: none; }
}
/* A phone header holds the title, the sync state, Confirms, the bell and the
   account chip in 375px. Words go, icons stay: "Synced" becomes just its green
   dot (the word is kept when it matters - Offline, or a sync error), and
   Confirms keeps its icon and count. Without this the page title had ~44px
   and spilled across the status. */
@media (max-width: 620px) {
  .appheader-sync:not(.alert) .appheader-sync-text { display: none; }
  .appheader-btn-label { display: none; }
}

/* Equipment's stat tiles: four across on a laptop (was an inline style, which
   no phone rule could override). */
.missing-stats.eq-stats4 { grid-template-columns: repeat(4, 1fr); }
.missing-stats.eq-stats3 { grid-template-columns: repeat(3, 1fr); }
/* The Production Tracker's Add/Edit pack close button had no rule at all. */
.modal-x { border: 0; background: none; color: var(--ink-soft); font-size: 16px; line-height: 1; padding: 6px 10px; border-radius: var(--radius-sm); cursor: pointer; }
.modal-x:hover { background: var(--bg-sunk); color: var(--ink); }

/* ============================================================
   Phone: things the layout audit (Sept 2026) found too small to tap or
   spilling past the screen. Measured at 375px on every screen and popup.
   ============================================================ */
@media (max-width: 640px) {
  /* Segmented controls (Dockets, Forms, Leave) scrolled sideways, cutting
     "Archived (0)" off mid-word. Share the width and let labels wrap. */
  .seg { display: flex; width: 100%; max-width: 100%; }
  .seg button { flex: 1 1 0; min-width: 0; min-height: 40px; padding: 6px 6px; font-size: 12px; line-height: 1.2; white-space: normal; }

  /* Equipment's four stat tiles do not fit four across: 2 x 2. */
  .missing-stats.eq-stats4 { grid-template-columns: 1fr 1fr; }

  /* Icon buttons that were 20-25px: a thumb needs 36. The visual glyph is
     unchanged; only the hit area grows. */
  .dlr-x, .ce-row-x, .ce-line-x, .tl-iconbtn, .fg-archbtn, .modal-x {
    min-width: 36px; min-height: 36px; display: inline-flex; align-items: center; justify-content: center;
  }
  .ce-line-x-sp { width: 36px; }
  /* Text buttons and links that were 18-25px tall. */
  .fg-joblink, .vqr-manage-link, .ce-addline, .eq-cust-btn, .jn-editbtn, .eqset-del, .soc-card-meta a {
    min-height: 36px; display: inline-flex; align-items: center;
  }
  .dk-search-input, .vqr-section-title { min-height: 34px; }
  /* Production Tracker stage cells: 24px circles were a miss on site. */
  .fg-stage { width: 32px; height: 32px; }
  .fg-stagecell .fg-stagewrap { width: 40px; height: 34px; }
  .fg-c-stage { width: 46px; }
  /* flex: 0 0 auto - beside a long label a checkbox otherwise shrinks to 17px. */
  input[type="checkbox"], input[type="radio"] { width: 22px; height: 22px; flex: 0 0 auto; }

  /* Equipment rows: a long unit code took the whole line and pushed the
     status pill off the screen. The code shrinks with an ellipsis, the pill
     never does. */
  .eqr-top .eqr-unit { flex: 0 1 auto; min-width: 0; max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .eqr-top .eq-spill { flex: 0 0 auto; }
  /* "Add gear": two date fields side by side do not fit; stack them. */
  .modal .tl-insp-grid { grid-template-columns: 1fr; }
  /* Section headers inside settings and registers were 21-28px tall. */
  .collapsible-head { min-height: 40px; padding-top: 6px; }
  /* Delivery Dockets: the intro text was squeezed to 88px beside the buttons
     and wrapped to nine lines. Stack them. */
  .dk-header { flex-direction: column; align-items: stretch; gap: 10px; }
  .dk-header > * { min-width: 0; }
  /* Register rows (Variations, Day Labour): the row's delete x sits in the
     corner instead of in the flow, so a 36px target cannot push the row past
     a 360px screen. */
  .dlr-reg-row { position: relative; padding-right: 40px; }
  .dlr-reg-row .dlr-x { position: absolute; top: 6px; right: 4px; }
  /* Daily Entry crew rows: same corner treatment. The row cannot fit a name,
     two pills, the total and the x on one phone line, so the x leaves the
     flow and the name takes the first line on its own (100% less the avatar
     and its gap). The pills and total then share the second line, instead of
     the x being stranded alone on one. */
  .ce-row-head { position: relative; padding-right: 38px; }
  .ce-row-head .ce-row-x { position: absolute; top: 0; right: 0; }
  .ce-name { flex-basis: calc(100% - 33px); }
  /* Crew header: title and count on one line, the worker dropdown and its
     buttons on the next, dropdown taking the spare width. */
  .ce-crew-head { flex-wrap: wrap; row-gap: 8px; }
  .ce-crew-title { white-space: nowrap; }
  .ce-crew-actions { flex: 1 1 100%; justify-content: flex-start; flex-wrap: nowrap; }
  .ce-add-select { flex: 1 1 auto; min-width: 0; width: auto; }
  .ce-crew-actions .btn { flex: 0 0 auto; }
  /* Drawers slide in from 20px right of the screen; on a phone that is 20px
     past the edge for the first 200ms. Fade instead. */
  .drawer { animation-name: fade-in; }
}

/* ============================================================
   social.css — Social Media Register (native ops module)
   Own file so it never touches styles.css (owned by another change in
   flight). Concatenated after styles.css by tools/ops-build/build-ops.mjs.
   Everything here is prefixed .soc- to avoid collisions.
   ============================================================ */

/* ---------- Page shell ---------- */
.soc-wrap { padding: 24px; max-width: 1100px; margin: 0 auto; }
.soc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.soc-head h1 { margin: 0; font-size: 22px; letter-spacing: -0.01em; }
.soc-sub { font-size: 13px; color: var(--ink-mute); margin-top: 4px; max-width: 62ch; }
.soc-headactions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

.soc-tabs { display: flex; gap: 6px; margin-bottom: 16px; }

.soc-error {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 10px 12px; margin-bottom: 14px;
  background: #fbe3e1; color: var(--bad);
  border: 1px solid color-mix(in srgb, var(--bad) 30%, var(--border));
  border-radius: var(--radius); font-size: 12.5px; font-weight: 600;
}
.soc-error .btn { margin-left: auto; flex-shrink: 0; }
.soc-loading { padding: 40px 0; text-align: center; color: var(--ink-mute); font-size: 13px; }

/* ---------- Toolbar: search + status chips ---------- */
.soc-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.soc-search-wrap { position: relative; flex: 1 1 220px; min-width: 160px; }
.soc-search { width: 100%; padding-left: 30px; }
.soc-search-ico { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); font-size: 13px; color: var(--ink-mute); pointer-events: none; }
.soc-filters { display: flex; gap: 6px; flex-wrap: wrap; }
.soc-filters .pill { white-space: nowrap; }

/* ---------- Post list ---------- */
.soc-list { display: flex; flex-direction: column; gap: 10px; }
.soc-card {
  display: flex; gap: 12px; align-items: flex-start; text-align: left;
  padding: 12px 14px; background: var(--bg-elev); border: 1px solid var(--border);
  border-radius: var(--radius-lg); cursor: pointer; transition: var(--t); width: 100%;
}
.soc-card:hover { border-color: var(--border-strong); background: var(--steel-soft); }
.soc-card-thumb {
  width: 72px; height: 72px; border-radius: var(--radius); background: var(--bg-sunk);
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  color: var(--ink-mute); font-size: 22px; overflow: hidden;
}
.soc-card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.soc-card-main { flex: 1; min-width: 0; }
.soc-card-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 3px; }
.soc-card-title { font-weight: 700; font-size: 14.5px; overflow-wrap: anywhere; }
.soc-card-meta { font-size: 12px; color: var(--ink-mute); display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 4px; }
.soc-card-meta .sep { opacity: .5; }
.soc-card-approved { font-size: 11.5px; color: var(--ok); font-weight: 600; margin-top: 4px; }
.soc-card-plats { display: flex; gap: 4px; flex-wrap: wrap; }
.soc-card-foot { display: flex; align-items: center; gap: 10px; margin-top: 6px; font-size: 11.5px; color: var(--ink-mute); }
.soc-card-chev { align-self: center; color: var(--ink-mute); font-size: 18px; flex-shrink: 0; }

.soc-plat {
  font-family: var(--font-mono); font-size: 9px; font-weight: 700; color: var(--on-accent);
  background: var(--accent); padding: 2px 5px; border-radius: 4px; letter-spacing: .02em;
}
.soc-approval-count {
  display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 700;
  color: var(--ok); background: color-mix(in srgb, var(--ok) 14%, transparent); padding: 1px 6px; border-radius: 99px;
}

.soc-status { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; white-space: nowrap; }
.soc-status .dot { width: 6px; height: 6px; border-radius: 99px; flex-shrink: 0; }
.soc-status-idea { background: var(--steel-soft); color: var(--ink-soft); }
.soc-status-idea .dot { background: var(--ink-mute); }
.soc-status-draft { background: var(--bg-sunk); color: var(--ink-soft); }
.soc-status-draft .dot { background: var(--ink-soft); }
.soc-status-review { background: #fbead9; color: var(--warn); }
.soc-status-review .dot { background: var(--warn); }
.soc-status-scheduled { background: #e2ecf7; color: var(--info); }
.soc-status-scheduled .dot { background: var(--info); }
.soc-status-posted { background: #e2f2e9; color: var(--ok); }
.soc-status-posted .dot { background: var(--ok); }

.soc-empty { padding: 40px 20px; text-align: center; color: var(--ink-mute); }
.soc-empty .icon { font-size: 30px; margin-bottom: 8px; opacity: .5; }
.soc-empty .hint { font-size: 12px; margin-top: 6px; }

/* ---------- New idea modal ---------- */
.soc-photo-row { display: flex; gap: 8px; flex-wrap: wrap; }
.soc-photo-thumb { position: relative; width: 64px; height: 64px; border-radius: 6px; overflow: hidden; border: 1px solid var(--border); background: var(--bg-sunk); }
.soc-photo-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.soc-photo-remove {
  position: absolute; top: 2px; right: 2px; background: rgba(0,0,0,.62); color: #fff; border: 0;
  border-radius: 50%; width: 20px; height: 20px; font-size: 12px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.soc-photo-add {
  width: 64px; height: 64px; border: 1.5px dashed var(--border-strong); border-radius: 6px;
  display: flex; align-items: center; justify-content: center; font-size: 22px; color: var(--ink-mute);
  cursor: pointer; background: var(--bg-sunk); flex-shrink: 0;
}
.soc-photo-add input { display: none; }
.soc-photo-progress { font-size: 11.5px; color: var(--ink-mute); margin-top: 6px; }
.soc-platform-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.soc-platform-chip {
  padding: 6px 12px; border-radius: 999px; border: 1.5px solid var(--border); background: var(--bg-elev);
  font-size: 12.5px; font-weight: 600; cursor: pointer; min-height: 32px; color: var(--ink-soft);
}
.soc-platform-chip.on { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }

/* ---------- Editor (post detail) ---------- */
.soc-editor-backdrop {
  position: fixed; inset: 0; background: rgba(14,16,20,0.5); z-index: 300;
  display: flex; justify-content: center; align-items: flex-start; padding: 24px 16px;
  overflow-y: auto;
}
.soc-editor { width: min(96vw, 1080px); background: var(--bg); border-radius: 14px; box-shadow: var(--shadow-lg); margin: 0 auto; }
.soc-editor-head {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;
  padding: 16px 20px; border-bottom: 1px solid var(--border);
  position: sticky; top: 0; background: var(--bg); border-radius: 14px 14px 0 0; z-index: 2;
}
.soc-editor-head h2 { margin: 0 0 4px; font-size: 17px; overflow-wrap: anywhere; }
.soc-editor-headmeta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; color: var(--ink-mute); }
.soc-editor-body { padding: 16px 20px 24px; }
.soc-editor-grid { display: block; }
.soc-editor-side { display: flex; flex-direction: column; gap: 18px; margin-top: 18px; }
.soc-editor-section-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-mute); margin-bottom: 8px; }

.soc-picker-row { display: flex; gap: 8px; align-items: center; margin-top: -6px; margin-bottom: 14px; flex-wrap: wrap; }
.soc-picker-row .select { flex: 1 1 200px; min-width: 0; font-size: 12px; }

.soc-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 4px; }
.soc-actions .btn { min-height: 36px; }
.soc-block-reason { font-size: 11.5px; color: var(--warn); margin: 2px 0 4px; font-weight: 600; }

.soc-approvals-box { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; }
.soc-approvals-empty { font-size: 12px; color: var(--ink-mute); }
.soc-approval-row { display: flex; align-items: center; gap: 8px; font-size: 12.5px; padding: 4px 0; }
.soc-approval-row .tick { color: var(--ok); font-weight: 800; }
.soc-approval-name { font-weight: 600; flex: 1; min-width: 0; overflow-wrap: anywhere; }
.soc-approval-time { color: var(--ink-mute); font-size: 11px; white-space: nowrap; }
.soc-approve-btn.on { background: var(--ok); color: #fff; border-color: var(--ok); }

.soc-photogrid { display: flex; flex-wrap: wrap; gap: 8px; }
.soc-photogrid .soc-photo-thumb { width: 84px; height: 84px; cursor: pointer; }

.soc-comments { display: flex; flex-direction: column; gap: 8px; }
.soc-comment { padding: 8px 10px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: 8px; font-size: 12.5px; }
.soc-comment-meta { font-size: 10.5px; color: var(--ink-mute); margin-bottom: 3px; font-weight: 600; }
.soc-comment-body { overflow-wrap: anywhere; white-space: pre-wrap; }
.soc-comment-add { display: flex; gap: 8px; margin-top: 10px; align-items: flex-end; }
.soc-comment-add textarea { flex: 1; min-height: 40px; }
.soc-comments-empty { font-size: 12px; color: var(--ink-mute); }

.soc-activity { margin-top: 4px; border-top: 1px solid var(--border); padding-top: 10px; }
.soc-activity summary { cursor: pointer; font-size: 12px; font-weight: 700; color: var(--ink-soft); padding: 4px 0; list-style: none; }
.soc-activity summary::-webkit-details-marker { display: none; }
.soc-activity summary::before { content: "▸ "; }
.soc-activity[open] summary::before { content: "▾ "; }
.soc-activity-row { font-size: 11.5px; color: var(--ink-mute); padding: 5px 0; border-top: 1px solid var(--border); }
.soc-activity-row:first-child { border-top: none; }
.soc-activity-row b { color: var(--ink-soft); }

.soc-posturl-inline { display: flex; gap: 8px; margin-top: 8px; align-items: center; flex-wrap: wrap; }
.soc-posturl-inline .input { flex: 1 1 220px; min-width: 0; }

.soc-savebar { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border); }

/* ---------- Lightbox ---------- */
.soc-lightbox-backdrop { position: fixed; inset: 0; background: rgba(8,9,11,.88); z-index: 400; display: flex; align-items: center; justify-content: center; padding: 24px; }
.soc-lightbox-backdrop img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px; }
.soc-lightbox-close { position: absolute; top: 16px; right: 16px; }

/* ---------- Calendar ---------- */
.soc-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; gap: 10px; flex-wrap: wrap; }
.soc-cal-nav { display: flex; align-items: center; gap: 8px; }
.soc-cal-title { font-weight: 700; font-size: 16px; min-width: 150px; text-align: center; }
.soc-cal-draftlink { font-size: 12px; color: var(--ink-mute); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }

.soc-cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.soc-cal-dow { background: var(--bg-sunk); padding: 6px 4px; font-size: 10px; font-weight: 700; text-transform: uppercase; text-align: center; color: var(--ink-mute); }
.soc-cal-day { background: var(--bg-elev); min-height: 92px; padding: 5px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.soc-cal-day.out { background: var(--bg-sunk); }
.soc-cal-day.out .soc-cal-daynum { opacity: .4; }
.soc-cal-day.today .soc-cal-daynum { color: var(--on-accent); background: var(--accent); border-radius: 50%; width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; }
.soc-cal-daynum { font-size: 11px; font-weight: 700; color: var(--ink-soft); }
.soc-cal-chip {
  font-size: 10px; padding: 2px 6px; border-radius: 4px; text-align: left; cursor: pointer; border: 0;
  font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%;
}
.soc-cal-more { font-size: 10px; color: var(--ink-mute); background: none; border: 0; padding: 0; text-align: left; cursor: pointer; }

.soc-agenda { display: flex; flex-direction: column; gap: 16px; }
.soc-agenda-daylabel { font-size: 11.5px; font-weight: 700; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 6px; letter-spacing: .03em; }
.soc-agenda-item {
  display: flex; gap: 10px; align-items: center; padding: 10px 12px; background: var(--bg-elev);
  border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 6px; cursor: pointer; min-height: 44px;
}
.soc-agenda-time { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-mute); flex-shrink: 0; width: 48px; }
.soc-agenda-title { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.soc-agenda-empty { padding: 30px 0; text-align: center; color: var(--ink-mute); font-size: 13px; }

/* ============================================================
   Phone (<= 640px)
   ============================================================ */
@media (max-width: 640px) {
  .soc-wrap { padding: 14px 12px 40px; }
  .soc-head { flex-direction: column; align-items: stretch; gap: 10px; }
  .soc-head h1 { font-size: 19px; }
  .soc-headactions { width: 100%; }
  .soc-headactions .btn { flex: 1 1 auto; justify-content: center; min-height: 44px; }
  .soc-tabs .pill { flex: 1; justify-content: center; min-height: 44px; }
  .soc-toolbar { flex-direction: column; align-items: stretch; }
  /* flex: 0 0 auto, not the desktop "1 1 220px": in a column that basis is a
     HEIGHT, which left a 220px hole under the search box with the magnifier
     floating in the middle of it. */
  .soc-search-wrap { width: 100%; flex: 0 0 auto; }
  /* width:100% (not just align-items:stretch) — a nowrap flex row's intrinsic
     content width otherwise wins and pushes .main into horizontal scroll. */
  .soc-filters { width: 100%; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
  .soc-filters .pill { min-height: 44px; padding: 0 14px; display: inline-flex; align-items: center; flex-shrink: 0; }
  .soc-platform-chip { min-height: 44px; }

  .soc-card { padding: 10px; gap: 10px; }
  .soc-card-thumb { width: 56px; height: 56px; }
  .soc-card-title { font-size: 14px; }

  /* flex-start, not stretch. The backdrop is a fixed, full-screen scroller, so
     "stretch" pins the editor to exactly one screen high: anything longer
     spilled out of its white panel, the post list showed through underneath,
     and the sticky header scrolled away with the too-short panel. flex-start
     lets it grow with its content; min-height: 100% below still fills the
     screen for a short post. */
  .soc-editor-backdrop { padding: 0; align-items: flex-start; overflow-x: hidden; }
  .soc-editor { width: 100%; max-width: 100%; border-radius: 0; min-height: 100%; display: flex; flex-direction: column; }
  /* iOS draws the scheduled date/time field at its own width, wider than the
     panel, and the backdrop then scrolled sideways: the whole editor slid off
     the left of the screen. Fit the field; never scroll the backdrop sideways. */
  .soc-editor input[type="datetime-local"] { -webkit-appearance: none; appearance: none; display: block; width: 100%; min-width: 0; max-width: 100%; text-align: left; }
  .soc-editor input[type="datetime-local"]::-webkit-date-and-time-value { text-align: left; }
  .soc-editor-head { border-radius: 0; }
  .soc-editor-body { padding: 14px 14px 100px; flex: 1; }
  .soc-savebar {
    position: fixed; left: 0; right: 0; bottom: 0; margin: 0; padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    background: var(--bg-elev); border-top: 1px solid var(--border); z-index: 6; justify-content: stretch;
  }
  .soc-savebar .btn { flex: 1; justify-content: center; min-height: 44px; }
  .soc-actions .btn { min-height: 44px; flex: 1 1 calc(50% - 4px); justify-content: center; }
  .soc-photo-add, .soc-photo-thumb { width: 72px; height: 72px; }
  .soc-photogrid .soc-photo-thumb { width: 88px; height: 88px; }

  .soc-cal-title { font-size: 14px; min-width: 0; }
  .soc-agenda-item { min-height: 48px; }

  /* Every control a thumb has to hit gets the same 44px as the pills and action
     buttons above. These were the ones left under it: the month arrows and the
     "N drafts not yet scheduled" link on the calendar (32px and 17px), the
     editor's ✕ (32px), the comment "Post" button and "Delete post" (36.5px).
     A 17px-high link between two calendar rows is a miss-tap on site. */
  .soc-cal-nav .btn-icon { min-height: 44px; min-width: 44px; }
  .soc-cal-draftlink { min-height: 44px; display: flex; align-items: center; text-align: left; }
  .soc-editor-head .btn-icon { min-height: 44px; min-width: 44px; flex-shrink: 0; }
  .soc-comment-add .btn { min-height: 44px; }
  .soc-editor-side > .btn { min-height: 44px; width: 100%; justify-content: center; }
}

/* ============================================================
   Laptop (>= 1025px)
   ============================================================ */
@media (min-width: 1025px) {
  .soc-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }

  .soc-editor-grid { display: grid; grid-template-columns: 1fr 380px; gap: 24px; align-items: start; }
  .soc-editor-side { margin-top: 0; }
  .soc-savebar { justify-content: flex-end; }
}