/* SWP Field Operations — theme tokens cloned from Production Suite palette.
   Font floor: 16px (≈12pt) everywhere. iPad / shop-light readability. */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --white: #fff;
  --off-white: #f6f4f0;
  --sand-lt: #ede9e0;
  --sand: #d5cebd;
  --sand-dk: #b0a890;
  --grey-lt: #e6e5e3;
  --grey: #bdbbb7;
  --grey-md: #888480;
  --grey-dk: #504e4a;
  --charcoal: #2b2a27;
  --blue-lt: #dce8f5;
  --blue: #2e6eb5;
  --blue-dk: #1f5490;
  --blue-bg: #eff5fc;
  --blue-app: #1a3a8f;
  --green: #2a7048;
  --green-bg: #e8f4ee;
  --green-accent: #6ee7a0;
  --amber: #a05800;
  --amber-bg: #fdf0e0;
  --red: #a82828;
  --red-bg: #fbe8e8;
  --border: #ccc9c3;
}

html, body { height: 100%; }
body {
  font-family: 'Aptos','Aptos Display',Calibri,sans-serif;
  font-size: 16px;
  line-height: 1.4;
  background: var(--off-white);
  color: var(--charcoal);
  min-height: 100vh;
}

/* ── App bar ───────────────────────────────────────────── */
.app-bar {
  background: var(--blue-app);
  display: flex;
  align-items: center;
  height: 60px;
  padding: 0 24px;
  color: #fff;
}
.app-bar-logo b {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.app-bar-logo span {
  margin-left: 12px;
  font-size: 14px;
  color: rgba(255,255,255,.7);
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.app-bar-right {
  margin-left: auto;
  display: flex;
  gap: 12px;
  align-items: center;
}
.app-bar-link {
  color: rgba(255,255,255,.85);
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 8px 16px;
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,.25);
  transition: background .15s, color .15s, border-color .15s;
}
.app-bar-link:hover {
  background: rgba(255,255,255,.14);
  color: #fff;
  border-color: rgba(255,255,255,.5);
}
.app-bar-link.active {
  background: rgba(255,255,255,.18);
  color: var(--green-accent);
  border-color: var(--green-accent);
}

/* Online/offline indicator inserted into .app-bar-right by app-shell.js */
.net-status {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--green-accent);
  display: inline-block;
  border: 1.5px solid rgba(255,255,255,.4);
  margin-right: 6px;
  transition: background .2s;
  flex-shrink: 0;
}
.net-status.net-offline {
  background: var(--red);
  animation: net-pulse 1.5s infinite;
}
@keyframes net-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}

/* ── Topbar ────────────────────────────────────────────── */
.topbar {
  background: var(--white);
  border-bottom: 2px solid var(--sand);
  padding: 10px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
  font-size: 16px;
}
.topbar .crumbs { font-size: 16px; color: var(--grey-md); }
.topbar .crumbs a { color: var(--blue); text-decoration: none; font-weight: 600; }
.topbar .crumbs a:hover { text-decoration: underline; }
.topbar .crumbs b { color: var(--charcoal); }
.topbar .spacer { flex: 1; }

/* ── Buttons ───────────────────────────────────────────── */
.btn {
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 9px 18px;
  cursor: pointer;
  background: var(--white);
  color: var(--grey-dk);
  white-space: nowrap;
  transition: background .12s, color .12s, border-color .12s;
}
.btn:hover { background: var(--blue-bg); color: var(--blue); border-color: var(--blue); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-primary { background: var(--blue); color: #fff; border-color: var(--blue); }
.btn-primary:hover { background: var(--blue-dk); color: #fff; border-color: var(--blue-dk); }
.btn-green { background: var(--green); color: #fff; border-color: var(--green); }
.btn-green:hover { background: #1f5635; color: #fff; }
.btn-amber { background: var(--amber); color: #fff; border-color: var(--amber); }
.btn-amber:hover { filter: brightness(.92); }
.btn-danger { color: var(--red); border-color: var(--red); }
.btn-danger:hover { background: var(--red-bg); color: var(--red); }
.btn-sm {
  font-size: 13px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 4px;
}
.btn-link {
  background: none;
  border: none;
  color: var(--blue);
  cursor: pointer;
  padding: 6px 10px;
  font-size: 16px;
  font-weight: 600;
}
.btn-link:hover { text-decoration: underline; }
.btn-link.btn-danger { color: var(--red); border: none; }

/* Topbar buttons (Print, Field Crew View) — prominent, colored */
.btn-action {
  font-size: 15px;
  font-weight: 700;
  padding: 8px 18px;
  border-radius: 4px;
  background: var(--amber);
  color: #fff;
  border: 1px solid var(--amber);
  text-decoration: none;
  letter-spacing: 0.04em;
}
.btn-action:hover { filter: brightness(.92); }
.btn-action.alt {
  background: var(--green);
  border-color: var(--green);
}

/* ── Page container ─────────────────────────────────────── */
.page { max-width: 1240px; margin: 0 auto; padding: 18px; }

/* ── Dashboard stat strip ──────────────────────────────── */
.stat-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  gap: 12px;
  margin-bottom: 22px;
  align-items: stretch;
}
.stat-tile {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 16px 18px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 92px;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.stat-tile:hover { border-color: var(--blue); background: var(--blue-bg); }
.stat-tile .stat-label {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--grey-md);
}
.stat-tile .stat-num {
  font-size: 40px;
  font-weight: 800;
  color: var(--charcoal);
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.stat-tile.accent-amber .stat-num { color: var(--amber); }
.stat-tile.accent-green .stat-num { color: var(--green); }
.stat-tile.accent-blue  .stat-num { color: var(--blue-dk); }

.stat-action {
  display: flex;
  align-items: stretch;
}
.stat-action .btn-primary {
  display: flex;
  align-items: center;
  padding: 0 26px;
  font-size: 18px;
}

/* ── Dashboard sections ────────────────────────────────── */
.dash-section { margin-bottom: 26px; }
.dash-section-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--sand);
}
.dash-section-head .ds-title {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--grey-dk);
}
.dash-section-head .ds-count {
  font-size: 14px;
  font-weight: 700;
  color: var(--grey-md);
  background: var(--sand-lt);
  padding: 2px 10px;
  border-radius: 12px;
  border: 1px solid var(--sand);
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
}
.packet-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 14px 16px;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
  display: flex;
  flex-direction: column;
  gap: 5px;
  transition: border-color .15s, background .15s, transform .15s;
}
.packet-card:hover { border-color: var(--blue); background: var(--blue-bg); transform: translateY(-1px); }
.packet-card .pc-num {
  font-size: 18px;
  font-weight: 800;
  color: var(--blue-dk);
  letter-spacing: 0.04em;
}
.packet-card .pc-cust { font-size: 16px; font-weight: 600; color: var(--charcoal); }
.packet-card .pc-job { font-size: 14px; color: var(--grey-md); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.packet-card .pc-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--sand);
  font-size: 14px;
  color: var(--grey-md);
}
.packet-card .pc-foot .pc-rep { font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.packet-card .pc-foot .pc-ago { font-style: italic; }

.section-empty-tile {
  background: var(--white);
  border: 1px dashed var(--sand-dk);
  border-radius: 6px;
  padding: 28px 20px;
  text-align: center;
  color: var(--grey-md);
  font-size: 16px;
}

.drafts-link {
  margin-top: 22px;
  padding: 12px 16px;
  background: var(--sand-lt);
  border: 1px dashed var(--sand-dk);
  border-radius: 6px;
  font-size: 14px;
  color: var(--grey-dk);
  display: flex;
  align-items: center;
  gap: 10px;
}
.drafts-link b { color: var(--charcoal); }
.drafts-link .spacer { flex: 1; }

/* Status pills */
.state-pill {
  display: inline-flex;
  align-items: center;
  font-size: 14px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.status-draft, .status-unfinished { background: var(--sand-lt); color: var(--grey-dk); border: 1px solid var(--sand); }
.status-ready { background: var(--amber-bg); color: var(--amber); border: 1px solid #d8a860; }
.status-delivery_started { background: #fef3cd; color: #856404; border: 1px solid #e6c570; }
.status-delivery_complete { background: var(--blue-bg); color: var(--blue); border: 1px solid var(--blue-lt); }
.status-install_started { background: #e0e7ff; color: #3730a3; border: 1px solid #a5b4fc; }
.status-install_complete { background: var(--green-bg); color: var(--green); border: 1px solid #80c898; }

/* ── Job header banner (packet detail) ─────────────────── */
.job-header {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 16px 20px;
  margin-bottom: 16px;
  box-shadow: 0 1px 4px rgba(0,0,0,.05);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 28px;
}
.job-header .jh-title {
  grid-column: 1 / -1;
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.job-header .jh-num {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--blue-dk);
}
.job-header .jh-customer {
  font-size: 20px;
  font-weight: 600;
  color: var(--charcoal);
}
.job-header .jh-meta {
  font-size: 16px;
  color: var(--charcoal);
}
.job-header .jh-meta b {
  color: var(--grey-dk);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 13px;
  margin-right: 8px;
}

/* ── Sections (packet detail) ──────────────────────────── */
.section {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 6px;
  margin-bottom: 14px;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
  overflow: hidden;
}
.section-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 16px;
  background: var(--sand-lt);
  border-bottom: 1px solid var(--sand);
}
.section-title {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--grey-dk);
}
.section-count {
  font-size: 14px;
  color: var(--grey-md);
  background: var(--white);
  padding: 2px 10px;
  border-radius: 12px;
  border: 1px solid var(--grey-lt);
}
.section-body { padding: 6px 0; }
.section.empty .section-body { padding: 12px 16px; }

.subsection { padding: 8px 16px 12px; }
.subsection + .subsection { border-top: 1px dashed var(--sand); padding-top: 12px; margin-top: 4px; }
.sub-title {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grey-md);
  margin-bottom: 6px;
}

/* ── Inline-edit tables ────────────────────────────────── */
table.rows {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
}
table.rows th {
  background: var(--sand-lt);
  border-bottom: 1px solid var(--sand);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grey-md);
  text-align: left;
  padding: 6px 10px;
}
table.rows td {
  border-bottom: 1px solid var(--grey-lt);
  padding: 3px 5px;
  vertical-align: middle;
}
table.rows tr:last-child td { border-bottom: none; }
table.rows tr:hover td { background: var(--blue-bg); }
table.rows td.action { width: 36px; text-align: right; }

input.cell, select.cell {
  font-family: inherit;
  font-size: 16px;
  color: var(--charcoal);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 2px;
  padding: 6px 8px;
  width: 100%;
  outline: none;
}
input.cell:hover, select.cell:hover { border-color: var(--grey-lt); }
input.cell:focus, select.cell:focus { background: #fffbe8; border-color: var(--amber); }
input.cell.num, input.cell.short { text-align: right; }

.add-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 10px 16px;
  padding: 10px 18px;
  background: var(--white);
  border: 1px dashed var(--sand-dk);
  border-radius: 4px;
  color: var(--grey-dk);
  font-size: 15px;
  cursor: pointer;
  font-weight: 700;
}
.add-row:hover { color: var(--blue); border-color: var(--blue); background: var(--blue-bg); border-style: solid; }
.add-row.empty-only {
  margin: 0;
  width: 100%;
  justify-content: center;
  padding: 16px;
  font-size: 16px;
}

/* ── Modal ─────────────────────────────────────────────── */
.modal-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 100;
  align-items: center;
  justify-content: center;
}
.modal-backdrop.open { display: flex; }
.modal {
  background: var(--white);
  border-radius: 8px;
  min-width: 420px;
  max-width: 560px;
  padding: 22px 24px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  font-size: 16px;
}
.modal h2 {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--charcoal);
  margin-bottom: 16px;
}
.modal label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grey-md);
  margin-bottom: 4px;
  margin-top: 4px;
}
.modal input, .modal select, .modal textarea {
  font-family: inherit;
  font-size: 16px;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 9px 12px;
  width: 100%;
  margin-bottom: 14px;
  outline: none;
  background: var(--white);
}
.modal input:focus, .modal select:focus, .modal textarea:focus { border-color: var(--blue); background: var(--blue-bg); }
.modal .modal-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 10px;
}
.modal .err {
  color: var(--red);
  background: var(--red-bg);
  border: 1px solid var(--red);
  border-radius: 4px;
  padding: 8px 12px;
  margin-bottom: 12px;
  font-size: 14px;
  display: none;
}
.modal .err.open { display: block; }

/* ── Job header / Cabinet count rows ──────────────────── */
.cab-count-wrap {
  padding: 14px 20px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}
.cab-count-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 8px 0;
}
.cab-count-item label {
  font-size: 16px;
  font-weight: 600;
  color: var(--grey-dk);
}
.cab-count-item input {
  font-family: inherit;
  font-size: 22px;
  font-weight: 700;
  text-align: right;
  width: 110px;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 8px 12px;
  outline: none;
  background: var(--white);
}
.cab-count-item input:focus { border-color: var(--amber); background: #fffbe8; }

/* ── Notes ─────────────────────────────────────────────── */
.notes-list { padding: 4px 16px 10px; }
.note-item {
  border-bottom: 1px dashed var(--grey-lt);
  padding: 8px 0;
}
.note-item:last-child { border-bottom: none; }
.note-meta {
  font-size: 13px;
  color: var(--grey-md);
  margin-bottom: 3px;
}
.note-meta b { color: var(--grey-dk); }
.note-body {
  font-size: 16px;
  color: var(--charcoal);
  white-space: pre-wrap;
}

/* ── Photos ─────────────────────────────────────────────── */
.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
  padding: 10px 16px 0;
}
.photo-tile {
  position: relative;
  background: var(--sand-lt);
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
  transition: border-color .15s, transform .15s;
}
.photo-tile:hover { border-color: var(--blue); transform: translateY(-1px); }
.photo-tile img {
  display: block;
  width: 100%;
  height: 150px;
  object-fit: cover;
  background: #fff;
}
.photo-tile .photo-meta {
  display: flex;
  justify-content: space-between;
  padding: 5px 8px;
  font-size: 13px;
  color: var(--grey-md);
}
.photo-tile .photo-meta .photo-author {
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.photo-tile .photo-caption {
  padding: 0 8px 6px;
  font-size: 14px;
  color: var(--charcoal);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lightbox {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.9);
  z-index: 300;
  align-items: center;
  justify-content: center;
}
.lightbox.open { display: flex; }
.lb-close, .lb-nav {
  position: absolute;
  background: rgba(255,255,255,.12);
  color: #fff;
  border: none;
  font-size: 40px;
  font-weight: 300;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  cursor: pointer;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lb-close:hover, .lb-nav:hover { background: rgba(255,255,255,.22); }
.lb-close { top: 22px; right: 22px; }
.lb-prev { left: 22px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 22px; top: 50%; transform: translateY(-50%); }
.lb-stage {
  max-width: 92vw;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.lb-stage img {
  max-width: 92vw;
  max-height: 78vh;
  object-fit: contain;
  background: #fff;
  border-radius: 4px;
}
.lb-meta {
  background: var(--white);
  color: var(--charcoal);
  padding: 10px 16px;
  border-radius: 4px;
  min-width: 420px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 16px;
}
.lb-meta input {
  font-family: inherit;
  font-size: 16px;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 8px 12px;
  outline: none;
}
.lb-info {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--grey-md);
}
.lb-info .spacer { flex: 1; }

/* ── Action bar (sticky bottom, packet detail) ────────── */
.action-bar {
  position: sticky;
  bottom: 0;
  background: var(--white);
  border-top: 2px solid var(--sand);
  padding: 12px 18px;
  margin: 18px -18px -18px;
  display: flex;
  gap: 12px;
  align-items: center;
  box-shadow: 0 -2px 8px rgba(0,0,0,.06);
  z-index: 50;
  font-size: 16px;
}
.action-bar .spacer { flex: 1; }

/* ── Audit log ─────────────────────────────────────────── */
.audit {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 6px;
  margin-top: 22px;
  padding: 12px 16px;
}
.audit h3 {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--grey-md);
  margin-bottom: 8px;
}
.audit-row {
  display: grid;
  grid-template-columns: 160px 140px 1fr;
  gap: 12px;
  font-size: 14px;
  padding: 4px 0;
  border-bottom: 1px solid var(--grey-lt);
}
.audit-row:last-child { border-bottom: none; }
.audit-row .ts { color: var(--grey-md); font-family: 'Aptos Mono', Consolas, monospace; }
.audit-row .actor { font-weight: 700; color: var(--grey-dk); }

/* ── Toast ─────────────────────────────────────────────── */
.toast {
  position: fixed;
  bottom: 22px;
  right: 22px;
  background: var(--charcoal);
  color: #fff;
  padding: 12px 18px;
  border-radius: 4px;
  font-size: 15px;
  font-weight: 600;
  box-shadow: 0 4px 14px rgba(0,0,0,.3);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .2s, transform .2s;
  pointer-events: none;
  z-index: 400;
}
.toast.show { opacity: 1; transform: translateY(0); }
.toast.err { background: var(--red); }

/* ── Item Lookup page ──────────────────────────────────── */
.lookup-controls {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 12px;
  margin-bottom: 20px;
}
.lookup-controls input,
.lookup-controls select {
  font-family: inherit;
  font-size: 16px;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 10px 14px;
  outline: none;
  background: var(--white);
  width: 100%;
}
.lookup-controls input:focus, .lookup-controls select:focus { border-color: var(--blue); background: var(--blue-bg); }

.lookup-table {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,.05);
}
.lookup-table table { width: 100%; border-collapse: collapse; }
.lookup-table th {
  background: var(--sand-lt);
  border-bottom: 2px solid var(--sand);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--grey-dk);
  text-align: left;
  padding: 10px 14px;
}
.lookup-table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--grey-lt);
  font-size: 16px;
  vertical-align: middle;
}
.lookup-table tr.row { cursor: pointer; }
.lookup-table tr.row:hover td { background: var(--blue-bg); }
.lookup-table tr.row.expanded td { background: var(--sand-lt); font-weight: 600; }
.lookup-table .vendor-cell { font-weight: 700; color: var(--blue-dk); }
.lookup-table .itemnum-cell { font-family: 'Aptos Mono', Consolas, monospace; font-weight: 700; }
.lookup-table .num-cell { text-align: right; font-variant-numeric: tabular-nums; }
.lookup-table .empty-cell {
  padding: 36px;
  text-align: center;
  color: var(--grey-md);
  font-size: 16px;
}

tr.history-row td { background: #fafaf7; padding: 0; }
.history-block { padding: 12px 28px 16px; }
.history-block h4 {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--grey-md);
  margin-bottom: 8px;
}
.history-list { width: 100%; border-collapse: collapse; }
.history-list th, .history-list td {
  padding: 5px 12px;
  font-size: 14px;
  text-align: left;
  border: none;
  background: transparent;
}
.history-list th {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grey-md);
  border-bottom: 1px solid var(--grey-lt);
  padding-bottom: 7px;
}
.history-list td a { color: var(--blue); text-decoration: none; font-weight: 700; }
.history-list td a:hover { text-decoration: underline; }
.history-list .qty { text-align: right; font-variant-numeric: tabular-nums; }

/* ──────────────────────────────────────────────────────── */
/*           FIELD CREW VIEW — packet-style render           */
/* ──────────────────────────────────────────────────────── */

.crew-page { padding: 18px; max-width: 1000px; margin: 0 auto; }

/* Crew job header */
.crew-job-header {
  background: var(--white);
  border: 2px solid var(--blue-dk);
  border-radius: 8px;
  padding: 18px 24px;
  margin-bottom: 18px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 24px;
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
}
.crew-job-header .cjh-num {
  font-size: 32px;
  font-weight: 800;
  color: var(--blue-dk);
  letter-spacing: 0.04em;
}
.crew-job-header .cjh-customer {
  font-size: 22px;
  font-weight: 700;
  color: var(--charcoal);
}
.crew-job-header .cjh-address {
  grid-column: 1 / -1;
  font-size: 17px;
  color: var(--grey-dk);
}

/* 4 BIG packet-status buttons */
.packet-status-bar {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-bottom: 22px;
}
@media (min-width: 800px) {
  .packet-status-bar { grid-template-columns: repeat(4, 1fr); }
}
.ps-btn {
  background: var(--white);
  border: 2px solid var(--border);
  border-radius: 10px;
  padding: 22px 18px;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--grey-dk);
  cursor: pointer;
  text-align: center;
  transition: border-color .15s, background .15s, transform .12s;
  min-height: 110px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
}
.ps-btn:hover { border-color: var(--blue); background: var(--blue-bg); }
.ps-btn:active { transform: scale(0.98); }
.ps-btn .stamp {
  font-size: 13px;
  font-weight: 600;
  color: var(--grey-md);
  letter-spacing: 0.02em;
  text-transform: none;
  margin-top: 4px;
}
.ps-btn.done {
  border-color: var(--green);
  background: var(--green-bg);
  color: var(--green);
}
.ps-btn.done .stamp { color: var(--green); }
.ps-btn.current {
  border-color: var(--amber);
  background: var(--amber-bg);
  color: var(--amber);
}

/* Crew sections (each maps to an Excel sheet section) */
.crew-section {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 6px;
  margin-bottom: 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,.05);
  overflow: hidden;
}
.crew-section h2 {
  background: var(--sand-lt);
  border-bottom: 1px solid var(--sand);
  padding: 10px 16px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--grey-dk);
  margin: 0;
}
.crew-section h3 {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--grey-md);
  padding: 10px 16px 4px;
}
.crew-section-body { padding: 8px 16px 14px; }

/* Per-row check tables — the heart of the crew view */
table.check-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}
table.check-table th {
  background: var(--white);
  border-bottom: 2px solid var(--sand);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--grey-dk);
  text-align: center;
  padding: 6px 4px;
  white-space: normal;
  line-height: 1.2;
}
table.check-table th.al { text-align: left; padding-left: 12px; }
table.check-table td {
  border-bottom: 1px solid var(--grey-lt);
  padding: 4px 4px;
  vertical-align: middle;
  text-align: center;
}
table.check-table td.al { text-align: left; padding-left: 12px; }
table.check-table td.row-label {
  font-weight: 700;
  color: var(--grey-dk);
  width: 60px;
}
table.check-table tr:last-child td { border-bottom: none; }
table.check-table tr:hover td:not(.row-label) { background: #fcfbf8; }

/* The check tile itself */
.check-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 44px;
  border-radius: 4px;
  border: 1.5px solid var(--grey-lt);
  background: var(--white);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--grey-md);
  flex-direction: column;
  gap: 2px;
  padding: 4px 6px;
  text-align: center;
  line-height: 1.15;
  transition: all .12s;
  user-select: none;
}
.check-tile:hover {
  border-color: var(--blue);
  background: var(--blue-bg);
  color: var(--blue);
}
.check-tile.checked {
  background: var(--green-bg);
  border-color: var(--green);
  color: var(--green);
}
.check-tile.checked:hover {
  background: #d8ebdf;
}
.check-tile .ct-mark { font-size: 18px; font-weight: 800; }
.check-tile .ct-who {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.check-tile .ct-when { font-size: 11px; font-weight: 500; }
.check-tile.read-only {
  cursor: default;
  background: var(--sand-lt);
  color: var(--grey-md);
  border-color: var(--sand);
}
.check-tile.read-only:hover {
  background: var(--sand-lt);
  color: var(--grey-md);
  border-color: var(--sand);
}

/* Side-by-side Upper / Base */
.dual-cabinets {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}
@media (max-width: 900px) {
  .dual-cabinets { grid-template-columns: 1fr; gap: 16px; }
}
.dual-cabinets .crew-section-body { padding: 8px 12px 14px; }

/* Installer notes (dated) */
.installer-notes-list { padding: 4px 16px 10px; }
.installer-note {
  border-left: 3px solid var(--blue);
  padding: 6px 12px;
  margin-bottom: 10px;
  background: var(--blue-bg);
  border-radius: 0 4px 4px 0;
}
.installer-note .in-meta {
  font-size: 13px;
  color: var(--grey-md);
  margin-bottom: 3px;
}
.installer-note .in-meta b { color: var(--blue-dk); }
.installer-note .in-body { font-size: 16px; color: var(--charcoal); white-space: pre-wrap; }

/* ──────────────────────────────────────────────────────── */
/*                     DFS (Daily Field Schedule)            */
/* ──────────────────────────────────────────────────────── */

/* DFS list page — quick day shortcuts */
.dfs-quick {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 22px;
}
.dfs-quick-tile {
  background: var(--white);
  border: 2px solid var(--border);
  border-radius: 8px;
  padding: 18px 22px;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: border-color .15s, background .15s, transform .12s;
  box-shadow: 0 1px 4px rgba(0,0,0,.05);
}
.dfs-quick-tile:hover { border-color: var(--blue); background: var(--blue-bg); transform: translateY(-1px); }
.dfs-quick-tile .dfs-q-label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--grey-md);
}
.dfs-quick-tile .dfs-q-date {
  font-size: 22px;
  font-weight: 800;
  color: var(--blue-dk);
  letter-spacing: 0.04em;
}
.dfs-quick-tile .dfs-q-meta { font-size: 13px; color: var(--grey-md); }
.dfs-quick-tile.today { border-color: var(--green); background: var(--green-bg); }
.dfs-quick-tile.today .dfs-q-date { color: var(--green); }

.dfs-list {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,.05);
}
.dfs-list-row {
  display: grid;
  grid-template-columns: 140px 80px 1fr 100px 100px 90px;
  gap: 14px;
  padding: 12px 18px;
  align-items: center;
  border-bottom: 1px solid var(--grey-lt);
  font-size: 15px;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: background .12s;
}
.dfs-list-row:last-child { border-bottom: none; }
.dfs-list-row:hover { background: var(--blue-bg); }
.dfs-list-row.head {
  background: var(--sand-lt);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grey-dk);
  cursor: default;
}
.dfs-list-row.head:hover { background: var(--sand-lt); }
.dfs-list-row .dl-date { font-weight: 700; color: var(--blue-dk); }
.dfs-list-row .dl-day { color: var(--grey-md); }
.dfs-list-row .dl-num { text-align: right; font-variant-numeric: tabular-nums; }

/* DFS day editor */
.dfs-day-header {
  background: var(--white);
  border: 2px solid var(--blue-dk);
  border-radius: 8px;
  padding: 16px 22px;
  margin-bottom: 16px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 20px;
  align-items: center;
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
}
.dfs-day-header .ddh-date {
  font-size: 28px;
  font-weight: 800;
  color: var(--blue-dk);
  letter-spacing: 0.03em;
}
.dfs-day-header .ddh-weekday {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--grey-md);
}
.dfs-day-header .ddh-meta {
  font-size: 14px;
  color: var(--grey-dk);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.dfs-day-header .ddh-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

.dfs-layout {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 16px;
}
@media (max-width: 1100px) {
  .dfs-layout { grid-template-columns: 1fr; }
}

.dfs-rows-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,.05);
}

table.dfs-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}
table.dfs-table th {
  background: var(--sand-lt);
  border-bottom: 2px solid var(--sand);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grey-dk);
  text-align: left;
  padding: 8px 8px;
  white-space: nowrap;
}
table.dfs-table th.al { text-align: left; }
table.dfs-table th.ar { text-align: right; }
table.dfs-table td {
  border-bottom: 1px solid var(--grey-lt);
  padding: 6px 6px;
  vertical-align: middle;
}
table.dfs-table tr:last-child td { border-bottom: none; }
table.dfs-table tr:hover td:not(.row-action) { background: #fcfbf8; }
table.dfs-table .row-action { width: 36px; text-align: right; padding-right: 10px; }

table.dfs-table input.cell,
table.dfs-table select.cell {
  font-family: inherit;
  font-size: 15px;
  color: var(--charcoal);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 2px;
  padding: 6px 8px;
  width: 100%;
  outline: none;
}
table.dfs-table input.cell:hover, table.dfs-table select.cell:hover { border-color: var(--grey-lt); }
table.dfs-table input.cell:focus, table.dfs-table select.cell:focus { background: #fffbe8; border-color: var(--amber); }
table.dfs-table input.cell.stop { text-align: center; }

.dfs-table .typemarks {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  max-width: 220px;
}
.dfs-table .tm-chip {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 10px;
  background: var(--blue-bg);
  color: var(--blue-dk);
  border: 1px solid var(--blue-lt);
  cursor: pointer;
}
.dfs-table .tm-chip.off {
  background: var(--white);
  color: var(--grey-md);
  border-color: var(--grey-lt);
}
.dfs-table .tm-chip:hover { filter: brightness(.95); }

.dfs-table .status-cell select {
  font-weight: 700;
  letter-spacing: 0.02em;
}

.dfs-table .status-row-complete td { background: #f4fbf6; }
.dfs-table .status-row-cnd td { background: #fef9e7; }
.dfs-table .status-row-cl td { background: #fbe8e8; }

.dfs-empty-row {
  padding: 28px;
  text-align: center;
  color: var(--grey-md);
  font-size: 15px;
}

/* Sidebar: ready pool + CL parking */
.dfs-sidebar {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.dfs-sidebar-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0,0,0,.05);
}
.dfs-sidebar-card h3 {
  background: var(--sand-lt);
  border-bottom: 1px solid var(--sand);
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--grey-dk);
  margin: 0;
}
.dfs-sidebar-card h3 .count {
  background: var(--white);
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 10px;
  border: 1px solid var(--grey-lt);
  color: var(--grey-md);
  margin-left: 8px;
}
.dfs-sidebar-list { max-height: 480px; overflow-y: auto; }
.dfs-pool-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--grey-lt);
  font-size: 14px;
}
.dfs-pool-row:last-child { border-bottom: none; }
.dfs-pool-row .dp-job { font-weight: 700; color: var(--blue-dk); font-size: 15px; }
.dfs-pool-row .dp-cust { color: var(--charcoal); font-size: 14px; }
.dfs-pool-row .dp-meta { color: var(--grey-md); font-size: 12px; margin-top: 2px; }
.dfs-pool-row .dp-add {
  background: var(--green);
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  align-self: center;
}
.dfs-pool-row .dp-add:hover { background: #1f5635; }
.dfs-pool-row .dp-add:disabled { background: var(--grey); cursor: not-allowed; }

.dfs-sidebar-empty {
  padding: 16px 14px;
  font-size: 14px;
  color: var(--grey-md);
}

/* "Add by job#" search input in sidebar */
.dfs-pool-search {
  padding: 8px 12px;
  border-bottom: 1px solid var(--grey-lt);
}
.dfs-pool-search input {
  font-family: inherit;
  font-size: 14px;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 8px 10px;
  width: 100%;
  outline: none;
}
.dfs-pool-search input:focus { border-color: var(--blue); background: var(--blue-bg); }

/* ── Drawings modal file list ──────────────────────────── */
.drawings-section { margin: 14px 0 8px; }
.drawings-section h3 {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--grey-md);
  margin-bottom: 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--sand);
}
.file-row {
  padding: 8px 4px;
  border-bottom: 1px solid var(--grey-lt);
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  gap: 10px;
  align-items: center;
  font-size: 14px;
}
.file-row .file-name {
  font-family: 'Aptos Mono', Consolas, monospace;
  font-weight: 600;
  color: var(--charcoal);
}
.file-row .file-meta { font-size: 12px; color: var(--grey-md); white-space: nowrap; }
.file-row .file-path {
  grid-column: 1 / -1;
  font-family: 'Aptos Mono', Consolas, monospace;
  font-size: 11px;
  color: var(--grey-md);
  word-break: break-all;
  padding-left: 4px;
}

/* ──────────────────────────────────────────────────────── */
/*                  PURCHASING — KANBAN BOARD                */
/* ──────────────────────────────────────────────────────── */

.purchasing-page {
  padding: 0;
  max-width: none;
  width: 100%;
}

.kanban {
  display: grid;
  grid-template-columns: repeat(5, minmax(260px, 1fr));
  gap: 12px;
  padding: 16px;
  height: calc(100vh - 112px);
  overflow-x: auto;
  overflow-y: hidden;
}
@media (max-width: 1280px) {
  .kanban { grid-auto-flow: column; grid-template-columns: repeat(5, 280px); }
}

.lane {
  background: var(--sand-lt);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--sand);
}
.lane-head {
  padding: 12px 14px;
  border-bottom: 1px solid var(--sand);
  background: var(--white);
  display: flex;
  align-items: center;
  gap: 10px;
}
.lane-title {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--grey-dk);
  flex: 1;
}
.lane-count {
  background: var(--sand);
  color: var(--grey-dk);
  font-size: 13px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 12px;
}
.lane.lane-waiting .lane-title { color: var(--grey-md); }
.lane.lane-to_order .lane-title { color: var(--amber); }
.lane.lane-ordered .lane-title { color: var(--blue-dk); }
.lane.lane-partially_received .lane-title { color: var(--amber); }
.lane.lane-fully_received .lane-title { color: var(--green); }

.lane-body {
  padding: 10px;
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.lane.drop-target { background: var(--blue-bg); border-color: var(--blue); }
.lane.drop-target .lane-body { background: var(--blue-bg); }

/* Kanban card */
.kanban-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 12px 14px;
  cursor: grab;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
  transition: border-color .15s, box-shadow .15s, transform .12s;
}
.kanban-card:hover { border-color: var(--blue); box-shadow: 0 2px 8px rgba(0,0,0,.1); }
.kanban-card:active { cursor: grabbing; }
.kanban-card.dragging { opacity: 0.5; }
.kanban-card .kc-jobnum {
  font-size: 17px;
  font-weight: 800;
  color: var(--blue-dk);
  letter-spacing: 0.04em;
}
.kanban-card .kc-customer {
  font-size: 15px;
  font-weight: 600;
  color: var(--charcoal);
  margin-top: 2px;
}
.kanban-card .kc-meta {
  font-size: 12px;
  color: var(--grey-md);
  margin-top: 3px;
}
.kanban-card .kc-pos {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.kc-po {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  padding: 4px 6px;
  background: var(--off-white);
  border-radius: 4px;
}
.kc-po .vendor { font-weight: 700; color: var(--charcoal); }
.kc-po .po-num { font-family: 'Aptos Mono', Consolas, monospace; color: var(--grey-md); font-size: 12px; }
.kc-po .po-num.empty { color: var(--red); font-style: italic; }
.po-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;
}
.po-dot.open { background: #c53030; }
.po-dot.partial { background: #d69e2e; }
.po-dot.received { background: var(--green); }

.lane-empty {
  padding: 18px 10px;
  text-align: center;
  color: var(--grey-md);
  font-size: 13px;
  font-style: italic;
}

/* Purchasing top bar with archive toggle */
.purchasing-topbar {
  background: var(--white);
  border-bottom: 2px solid var(--sand);
  padding: 8px 18px;
  display: flex;
  gap: 12px;
  align-items: center;
}

/* ── Detail slide-out panel ──────────────────────────── */
.detail-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.35);
  z-index: 200;
}
.detail-overlay.open { display: block; }
.detail-panel {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: 720px;
  max-width: 95vw;
  background: var(--white);
  z-index: 201;
  transform: translateX(100%);
  transition: transform .25s ease-out;
  display: flex;
  flex-direction: column;
  box-shadow: -2px 0 14px rgba(0,0,0,.18);
}
.detail-overlay.open .detail-panel { transform: translateX(0); }

.detail-header {
  background: var(--blue-app);
  color: #fff;
  padding: 16px 22px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.detail-header .dh-num {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.04em;
}
.detail-header .dh-customer {
  font-size: 16px;
  font-weight: 600;
  color: rgba(255,255,255,.85);
}
.detail-header .dh-close {
  margin-left: auto;
  background: rgba(255,255,255,.15);
  color: #fff;
  border: none;
  font-size: 24px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  line-height: 1;
}
.detail-header .dh-close:hover { background: rgba(255,255,255,.25); }

.detail-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 22px;
}

.detail-meta {
  background: var(--off-white);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px 14px;
  margin-bottom: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 14px;
}
.detail-meta b {
  font-size: 12px;
  color: var(--grey-md);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  margin-right: 6px;
}

.detail-section {
  margin-bottom: 18px;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}
.detail-section h3 {
  background: var(--sand-lt);
  border-bottom: 1px solid var(--sand);
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--grey-dk);
}
.detail-section table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.detail-section th {
  background: var(--white);
  border-bottom: 1px solid var(--sand);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--grey-md);
  text-align: left;
  padding: 6px 8px;
}
.detail-section td {
  padding: 4px 8px;
  border-bottom: 1px solid var(--grey-lt);
  vertical-align: middle;
}
.detail-section tr:last-child td { border-bottom: none; }
.detail-section td.status-cell { text-align: center; width: 30px; }
.detail-section .dot-cell { display: inline-flex; }
.detail-section input.cell {
  font-family: inherit;
  font-size: 14px;
  border: 1px solid transparent;
  background: transparent;
  padding: 5px 7px;
  width: 100%;
  border-radius: 2px;
  outline: none;
}
.detail-section input.cell:hover { border-color: var(--grey-lt); }
.detail-section input.cell:focus { background: #fffbe8; border-color: var(--amber); }
.detail-section input.cell.po-num { font-family: 'Aptos Mono', Consolas, monospace; font-weight: 700; }
.detail-section input.cell.num { text-align: right; }

.detail-footer {
  border-top: 1px solid var(--sand);
  padding: 12px 22px;
  display: flex;
  gap: 10px;
  align-items: center;
  background: var(--off-white);
}
.detail-footer .lane-pick label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grey-md);
  margin-right: 6px;
}
.detail-footer select {
  font-family: inherit;
  font-size: 14px;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 6px 10px;
  outline: none;
  background: var(--white);
}
.detail-footer .spacer { flex: 1; }

/* ──────────────────────────────────────────────────────── */
/*                     WORK ORDERS BLOCK                     */
/* ──────────────────────────────────────────────────────── */

.workorders-block {
  background: var(--white);
  border: 2px solid var(--sand-dk);
  border-radius: 8px;
  padding: 14px 18px;
  margin-bottom: 22px;
  box-shadow: 0 1px 4px rgba(0,0,0,.05);
}
.wo-block-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding-bottom: 8px;
  margin-bottom: 6px;
  border-bottom: 2px solid var(--sand);
}
.wo-block-title {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--amber);
}
.wo-block-count {
  font-size: 13px;
  font-weight: 700;
  color: var(--grey-md);
  background: var(--amber-bg);
  padding: 2px 10px;
  border-radius: 12px;
  border: 1px solid #d8a860;
}
.wo-list {}
.wo-row {
  display: grid;
  grid-template-columns: 110px 1fr 200px auto;
  gap: 14px;
  align-items: center;
  padding: 10px 6px;
  border-bottom: 1px solid var(--grey-lt);
  font-size: 15px;
  cursor: pointer;
  transition: background .12s;
}
.wo-row:last-child { border-bottom: none; }
.wo-row:hover { background: var(--blue-bg); }
.wo-row .wo-job { font-weight: 800; color: var(--blue-dk); letter-spacing: 0.04em; }
.wo-row .wo-mid { display: flex; flex-direction: column; min-width: 0; }
.wo-row .wo-cust { font-weight: 600; color: var(--charcoal); }
.wo-row .wo-cust .wo-jobname { color: var(--grey-md); font-weight: 400; margin-left: 6px; }
.wo-row .wo-desc {
  font-size: 13px;
  color: var(--grey-md);
  font-style: italic;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}
.wo-row .wo-meta {
  font-size: 13px;
  color: var(--grey-md);
  display: flex;
  flex-direction: column;
  text-align: right;
}
.wo-row .wo-meta b {
  color: var(--grey-dk);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 12px;
}
.wo-row .wo-actions { display: flex; gap: 6px; }
.wo-row .wo-actions button { font-size: 13px; padding: 5px 12px; }
.wo-row.complete { opacity: 0.65; }
.wo-row.complete .wo-job { color: var(--green); text-decoration: line-through; }

.wo-empty {
  padding: 18px;
  text-align: center;
  color: var(--grey-md);
  font-style: italic;
}

.wo-block-foot {
  display: flex;
  align-items: center;
  padding-top: 10px;
  margin-top: 6px;
}

/* ──────────────────────────────────────────────────────── */
/*                       INVENTORY                           */
/* ──────────────────────────────────────────────────────── */

.inv-controls { margin-bottom: 14px; }
.inv-controls input {
  font-family: inherit;
  font-size: 16px;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 10px 14px;
  outline: none;
  background: var(--white);
  width: 100%;
  max-width: 480px;
}
.inv-controls input:focus { border-color: var(--blue); background: var(--blue-bg); }

.inv-add-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 14px 18px;
  margin-bottom: 18px;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.inv-add-card h3 {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--grey-md);
  margin-bottom: 10px;
}
.inv-add-grid {
  display: grid;
  grid-template-columns: 1.4fr 1.4fr 0.6fr 0.6fr 0.7fr 1.6fr auto;
  gap: 8px;
  align-items: stretch;
}
.inv-add-grid input {
  font-family: inherit;
  font-size: 15px;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 8px 10px;
  outline: none;
}
.inv-add-grid input:focus { border-color: var(--blue); background: var(--blue-bg); }

.inv-list-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,.05);
}
table.inv-table { width: 100%; border-collapse: collapse; font-size: 15px; }
table.inv-table th {
  background: var(--sand-lt);
  border-bottom: 2px solid var(--sand);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grey-dk);
  text-align: left;
  padding: 8px 10px;
}
table.inv-table td {
  padding: 6px 10px;
  border-bottom: 1px solid var(--grey-lt);
  vertical-align: middle;
}
table.inv-table tr:last-child td { border-bottom: none; }
table.inv-table tr:hover td { background: #fcfbf8; }
table.inv-table input.inv-cell {
  font-family: inherit;
  font-size: 15px;
  border: 1px solid transparent;
  background: transparent;
  padding: 5px 7px;
  border-radius: 2px;
  outline: none;
  width: 100%;
}
table.inv-table input.inv-cell:hover { border-color: var(--grey-lt); }
table.inv-table input.inv-cell:focus { background: #fffbe8; border-color: var(--amber); }
.empty-cell { padding: 32px; text-align: center; color: var(--grey-md); }

/* ── On-hand inventory DOT (renders on packet/crew/purchasing hardware rows) ── */
.inv-dot {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1.5px solid rgba(0,0,0,.15);
  vertical-align: middle;
}
.inv-dot.inv-green  { background: var(--green); }
.inv-dot.inv-yellow { background: #d69e2e; }
.inv-dot.inv-grey   { background: var(--grey-lt); }

/* ──────────────────────────────────────────────────────── */
/*                   ADMIN / VOCAB EDITOR                    */
/* ──────────────────────────────────────────────────────── */

.admin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
}
.vocab-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 14px 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,.05);
}
.vocab-card h3 {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue-dk);
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--sand);
}
.vocab-list {
  list-style: none;
  padding: 0;
  margin: 0 0 12px;
  max-height: 280px;
  overflow-y: auto;
}
.vocab-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 4px;
  border-bottom: 1px solid var(--grey-lt);
  font-size: 15px;
}
.vocab-list li:last-child { border-bottom: none; }
.vocab-list li .vocab-val { color: var(--charcoal); font-weight: 500; }
.vocab-list li button {
  font-size: 13px;
  color: var(--red);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
}
.vocab-list li button:hover { background: var(--red-bg); }
.vocab-add {
  display: flex;
  gap: 6px;
}
.vocab-add input {
  flex: 1;
  font-family: inherit;
  font-size: 15px;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 8px 10px;
  outline: none;
}
.vocab-add input:focus { border-color: var(--blue); background: var(--blue-bg); }

/* ──────────────────────────────────────────────────────── */
/*                       PRINT                               */
/* ──────────────────────────────────────────────────────── */

@media print {
  body { background: #fff; color: #000; font-size: 11pt; }
  .no-print { display: none !important; }
  .page, .crew-page { padding: 0; max-width: none; }

  .job-header, .crew-job-header {
    border: 1.5pt solid #000;
    box-shadow: none;
    margin-bottom: 8pt;
    padding: 8pt 12pt;
    page-break-inside: avoid;
    page-break-after: avoid;
  }
  .job-header .jh-num, .crew-job-header .cjh-num { font-size: 18pt; color: #000; }
  .job-header .jh-customer, .crew-job-header .cjh-customer { font-size: 14pt; color: #000; }
  .job-header .jh-meta, .crew-job-header .cjh-address { font-size: 10pt; color: #333; }

  .section, .crew-section {
    border: 0.75pt solid #888;
    box-shadow: none;
    page-break-inside: avoid;
    margin-bottom: 6pt;
  }
  .section.empty { display: none; }
  .section-head, .crew-section h2 {
    background: #eee !important;
    border-bottom: 0.5pt solid #888;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    padding: 4pt 8pt;
    font-size: 11pt;
  }
  .section-title { color: #000; font-size: 11pt; }
  .section-count { background: #fff; border: 0.5pt solid #888; color: #333; }
  .subsection { padding: 4pt 8pt; }
  .subsection + .subsection { border-top: 0.5pt dotted #888; }
  .sub-title { color: #555; font-size: 10pt; }

  table.rows, table.check-table { font-size: 10pt; }
  table.rows th, table.check-table th { background: #f4f4f4 !important; color: #333; padding: 2pt 4pt; -webkit-print-color-adjust: exact; print-color-adjust: exact; font-size: 9pt; }
  table.rows td, table.check-table td { padding: 1pt 4pt; }

  input.cell, select.cell {
    border: none;
    background: transparent;
    padding: 0;
    color: #000;
    -webkit-appearance: none;
    appearance: none;
  }
  select.cell { background-image: none !important; }
  .add-row { display: none !important; }

  .cab-count-wrap { padding: 6pt 12pt; }
  .cab-count-item input {
    border: none;
    background: transparent;
    font-size: 16pt;
    padding: 0;
    width: auto;
  }

  /* Check tiles look like checkboxes on paper */
  .check-tile {
    min-height: 20pt;
    border: 0.75pt solid #555 !important;
    background: #fff !important;
    color: #000 !important;
    font-size: 9pt;
    border-radius: 0 !important;
  }
  .check-tile .ct-mark { font-size: 12pt; }
  .check-tile .ct-who, .check-tile .ct-when { font-size: 8pt; }
  .check-tile.checked { background: #e8f4ee !important; border-color: #2a7048 !important; color: #2a7048 !important; }
  .check-tile.read-only { background: #f0f0f0 !important; }

  .packet-status-bar { display: none; }
  .dual-cabinets { display: block; }

  .photo-grid {
    grid-template-columns: repeat(3, 1fr);
    padding: 4pt 8pt;
  }
  .photo-tile { border: 0.5pt solid #888; page-break-inside: avoid; }
  .photo-tile img { height: 1.5in; }

  .notes-list, .installer-notes-list { padding: 0 8pt 4pt; }
  .note-item, .installer-note { page-break-inside: avoid; }
  .installer-note { background: #f8f8f8 !important; border-left: 1.5pt solid #555 !important; }

  .state-pill {
    border: 0.5pt solid #555 !important;
    background: #fff !important;
    color: #000 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}