/* =========================================================
   Digital Logbook portal — shared components
   Built on top of style.css's existing colours/fonts (--bg,
   --amber, --mono etc.), so it matches the rest of the site.
   ========================================================= */

.portal-header{ display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:36px; flex-wrap:wrap; gap:16px; }
.portal-header h1{ font-size:clamp(26px,3.4vw,36px); text-transform:uppercase; }
.portal-user{ font-family:var(--mono); font-size:12.5px; color:var(--grey); text-align:right; }

/* Four-box customer dashboard */
.box-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
@media (max-width:900px){ .box-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .box-grid{ grid-template-columns:1fr; } }

.portal-box{ background:var(--bg-raised); border:1px solid var(--border); padding:26px 22px; }
.portal-box h3{ font-size:16px; margin-bottom:4px; text-transform:uppercase; letter-spacing:0.04em; }
.portal-box .count{ font-family:var(--mono); font-size:12px; color:var(--grey-dim); margin-bottom:18px; }
.portal-box ul{ display:flex; flex-direction:column; gap:10px; }
.portal-box li{ border-top:1px solid var(--border); padding-top:10px; }
.portal-box li:first-child{ border-top:none; padding-top:0; }
.portal-box a{ display:flex; justify-content:space-between; gap:10px; font-size:14px; color:var(--ink); }
.portal-box a:hover{ color:var(--amber); }
.portal-box .empty{ color:var(--grey-dim); font-size:13.5px; }
.portal-box .doc-cat{ font-family:var(--mono); font-size:10.5px; color:var(--grey-dim); text-transform:uppercase; }

/* Digital Logbook hub — the 5 self-service log-type cards + My Account
   link, shown to a signed-in customer on digital-logbook.html. */
.logbook-card-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
@media (max-width:900px){ .logbook-card-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .logbook-card-grid{ grid-template-columns:1fr; } }
.logbook-card{ display:block; background:var(--bg-raised); border:1px solid var(--border); padding:26px 22px; transition:border-color 0.15s; }
.logbook-card:hover{ border-color:var(--amber); }
.logbook-card .cadence{ font-family:var(--mono); font-size:10.5px; letter-spacing:0.06em; text-transform:uppercase; color:var(--amber); margin-bottom:8px; display:block; }
.logbook-card h3{ font-size:17px; margin-bottom:6px; text-transform:uppercase; letter-spacing:0.03em; color:var(--ink); }
.logbook-card p{ font-size:13.5px; color:var(--grey); margin:0; }
.logbook-card.fault-card .cadence{ color:var(--red); }
.logbook-card.account-card{ border-style:dashed; }

/* "Log a Check" categorized index (Sep 2026, per Matt: "more logbook style
   and more intuitive" — picking the right check type was the specific
   problem). Replaces the old flat 6-card grid on digital-logbook.html's Log
   tab: checks are grouped into cadence sections (index "tabs", like the
   dividers in a physical logbook) with an icon per check type, so finding
   the right one is scan-by-shape/group rather than reading six identical
   cards. admin-tools.html/admin-hub.html/admin-setup.html's plain
   .logbook-card-grid above is untouched — this is a separate set of classes
   used only here. */
.idx-group{ margin-bottom:30px; }
.idx-group:last-child{ margin-bottom:0; }
.idx-group-head{ display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.idx-tab{
  font-family:var(--mono); font-size:10.5px; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--bg); background:var(--grey); padding:6px 14px; border-radius:var(--radius-sm);
}
.idx-group.cadence-now .idx-tab{ background:var(--red); }
.idx-group.cadence-week .idx-tab{ background:var(--amber); }
.idx-group.cadence-fortnight .idx-tab{ background:var(--amber); }
.idx-group.cadence-month .idx-tab{ background:var(--amber-mid); }
.idx-group.cadence-quarter .idx-tab{ background:var(--amber-bright); }
.idx-group.cadence-quarter .idx-icon{ color:var(--amber-bright); }
.idx-group.cadence-6mo .idx-tab{ background:var(--amber-deep); }
.idx-group.cadence-6mo .idx-icon{ color:var(--amber-deep); }
/* Sep 2026 — "Customise Your Logbook": annual/custom-cadence groups (a
   customer's own custom checks can be given any of these cadences) and
   fortnightly fall back to the muted grey-dim tab rather than a fresh
   colour each, since the palette above is already fully used and these
   are the least-common cadences in practice. */
.idx-group.cadence-annual .idx-tab, .idx-group.cadence-custom .idx-tab{ background:var(--grey-dim); }
.idx-group-count{ font-size:12px; color:var(--grey-dim); font-family:var(--mono); }
.idx-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
@media (max-width:900px){ .idx-cards{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .idx-cards{ grid-template-columns:1fr; } }
.idx-card{
  display:flex; gap:12px; align-items:flex-start;
  background:var(--bg-raised); border:1px solid var(--border); border-radius:var(--radius-md);
  padding:16px; transition:border-color .15s, transform .15s;
}
.idx-card:hover{ border-color:var(--amber-mid); transform:translateY(-2px); }
.idx-icon{
  flex:none; width:36px; height:36px; border-radius:var(--radius-sm); background:var(--bg-raised-2);
  display:flex; align-items:center; justify-content:center; color:var(--amber);
}
.idx-group.cadence-now .idx-icon{ color:var(--red); }
.idx-icon svg{ width:19px; height:19px; }
/* Sep 2026 — the four Customise Your Logbook presets that reuse the site's
   own /icons/*.png set (see logbook-types.js) render as <img>, not inline
   <svg>, so they need their own sizing rule here — same 19px box, just not
   matched by the svg-only rule above. */
.idx-icon img{ width:19px; height:19px; object-fit:contain; }
.idx-card h4{ font-size:14px; text-transform:uppercase; letter-spacing:0.02em; margin-bottom:3px; }
.idx-card p{ font-size:12px; color:var(--grey-dim); line-height:1.45; margin:0; }
.idx-help{
  margin-top:8px; display:flex; gap:12px; align-items:flex-start;
  background:var(--bg-raised); border:1px dashed var(--border-strong); border-radius:var(--radius-md);
  padding:16px 18px; font-size:13px; color:var(--grey);
}
.idx-help svg{ flex:none; width:18px; height:18px; color:var(--amber); margin-top:1px; }

/* "Customise Your Logbook" (Sep 2026, per Matt) — the toolbar row above the
   index, and the modal's preset toggle rows / custom-check list. Reuses
   the existing .switch/.track/.thumb toggle component (built originally
   for contact.html's emergency-response toggle) rather than a new control,
   and the existing .modal-backdrop/.modal shell used by admin-customer.html's
   Add Log Entry / Clear Logbook modals. */
.idx-toolbar{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:22px; }
.idx-toolbar-note{ font-size:13px; color:var(--grey-dim); margin:0; }
.customise-list{ display:flex; flex-direction:column; gap:0; max-height:260px; overflow-y:auto; border:1px solid var(--border); border-radius:var(--radius-md); }
.customise-list:empty{ display:none; }
.customise-row{ display:flex; align-items:center; gap:14px; padding:12px 14px; border-bottom:1px solid var(--border); }
.customise-row:last-child{ border-bottom:none; }
.customise-row .idx-icon{ width:30px; height:30px; }
.customise-row .idx-icon svg{ width:16px; height:16px; }
.customise-row .idx-icon img{ width:16px; height:16px; object-fit:contain; }
.customise-row-label{ flex:1; font-size:13.5px; line-height:1.4; }
.customise-row-label small{ color:var(--grey-dim); font-family:var(--mono); font-size:11px; letter-spacing:0.03em; text-transform:uppercase; }

/* Real ViaByte logo on the Leads card (see admin-hub.html) — sized
   noticeably larger than the plain mono cadence labels on sibling cards
   since it's an actual brand mark, not a category tag, and given ViaByte's
   own cyan on hover instead of the site's amber so this one card reads as
   "someone else's tool, linked in" rather than just another admin page. */
.viabyte-badge-logo{ display:block; height:26px; width:auto; margin-bottom:10px; }
.viabyte-card:hover{ border-color:#06B6D4; }

/* "Build a Report" CTA row on the Digital Logbook home page. */
.report-cta{ display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; background:var(--bg-raised); border:1px solid var(--border); padding:24px 26px; margin-top:22px; }
.report-cta h3{ font-size:16px; text-transform:uppercase; letter-spacing:0.03em; margin-bottom:6px; }
.report-cta p{ font-size:13.5px; color:var(--grey); margin:0; max-width:520px; }

/* Small-print access/retention notice, shown under the hub cards and
   reused (as plain text) in the report PDF footer. */
.portal-disclaimer{ font-size:12px; color:var(--grey-dim); margin-top:18px; line-height:1.6; }

/* Report builder filter form (report.html) */
.filter-row{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:22px; }
.checkbox-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px 20px; }
@media (max-width:560px){ .checkbox-grid{ grid-template-columns:1fr; } }
.checkbox-grid label{ display:flex; align-items:center; gap:9px; font-size:14px; color:var(--ink); cursor:pointer; }
.checkbox-grid input[type="checkbox"]{ width:auto; }
/* Sep 2026 — My Event Log tab's Quick Range buttons reuse this same
   .filter-row/.range-btn markup, and (unlike report.html's own quick-range
   row, which is fire-and-forget) track which range is currently applied —
   same active-state convention as .lead-filter-btn/.section-tab-btn
   elsewhere, just on a plain .btn.btn-outline instead of a bespoke class. */
.range-btn.active{ color:var(--amber); border-color:var(--amber); }

/* Service history — the chronological logbook itself, above the four-box
   grid on the Digital Logbook page. */
.history-box{ margin-bottom:20px; }
.history-box ul{ display:flex; flex-direction:column; gap:0; }
.history-entry{ display:flex; align-items:baseline; gap:18px; padding:14px 0; border-top:1px solid var(--border); }
.history-entry:first-child{ border-top:none; padding-top:0; }
.history-date{ font-family:var(--mono); font-size:12px; color:var(--grey-dim); white-space:nowrap; min-width:90px; }
.history-body{ flex:1; }
.history-body a{ font-size:15px; color:var(--ink); }
.history-body a:hover{ color:var(--amber); }
.history-site{ font-size:12.5px; color:var(--grey-dim); margin-top:2px; }

/* Status badges (Sep 2026 redesign, per Matt: the old bordered-text pills were "rough on the
   eyes" — the worst offender was .paid's #6FCF97, a pale mint that's low-contrast on the cream
   --bg. Now a soft filled pill (tinted background + a small dot, both in the status colour,
   text in a darker shade of the same colour) rather than an outline — same colours everywhere
   this reads status (invoices, quotes, the QuickBooks import preview) since they all go through
   the one shared badge() helper in portal-utils.js. color-mix keeps each tint tied to the
   existing --amber/--red/--grey-dim variables instead of hardcoding new hex values. */
.badge{
  display:inline-flex; align-items:center; gap:5px;
  font-family:var(--mono); font-size:10.5px; font-weight:700; letter-spacing:0.04em; text-transform:uppercase;
  padding:4px 10px; border-radius:var(--radius-full);
  background:color-mix(in srgb, var(--grey-dim) 14%, white);
  color:var(--grey);
  white-space:nowrap; line-height:1.3;
}
.badge::before{ content:''; width:6px; height:6px; border-radius:50%; background:currentColor; flex:none; }
.badge.draft{ background:color-mix(in srgb, var(--grey-dim) 14%, white); color:var(--grey-dim); }
.badge.sent{ background:color-mix(in srgb, var(--amber) 14%, white); color:var(--amber); }
.badge.accepted, .badge.paid{ background:color-mix(in srgb, #1F9D55 16%, white); color:#1F9D55; }
.badge.declined, .badge.overdue{ background:color-mix(in srgb, var(--red) 14%, white); color:var(--red); }

/* Dropdown "Options" menus (Sep 2026, per Matt: consolidate action buttons into one menu,
   make it stand out visually) — shared by the invoice page's own Options button and the
   compact per-row menus on the customer page / document search invoice rows. */
.dropdown-toggle-btn{
  background:none; border:1px solid var(--amber); color:var(--amber);
  border-radius:6px; padding:10px 16px; font-size:12px; cursor:pointer;
  display:inline-flex; align-items:center; gap:6px; font-family:var(--body);
}
.dropdown-toggle-btn:hover{ background:rgba(255,255,255,0.06); }
.dropdown-toggle-btn.row-options-btn{
  border-color:var(--border-strong); color:var(--grey); border-radius:6px;
  padding:6px 11px; font-size:16px; line-height:1;
}
.dropdown-toggle-btn.row-options-btn:hover{ border-color:var(--amber); color:var(--amber); }
.dropdown-menu{
  position:absolute; top:calc(100% + 10px); min-width:230px;
  background:var(--bg-raised); border:1px solid var(--border-strong);
  border-radius:10px; padding:8px; z-index:30;
  box-shadow:0 16px 40px rgba(0,0,0,0.45);
}
.dropdown-menu.menu-hidden{ display:none; }
.dropdown-menu.align-left{ left:0; }
.dropdown-menu.align-left::before{ content:''; position:absolute; top:-6px; left:20px; width:12px; height:12px; background:var(--bg-raised); border-left:1px solid var(--border-strong); border-top:1px solid var(--border-strong); transform:rotate(45deg); }
.dropdown-menu.align-right{ right:0; }
.dropdown-menu.align-right::before{ content:''; position:absolute; top:-6px; right:16px; width:12px; height:12px; background:var(--bg-raised); border-left:1px solid var(--border-strong); border-top:1px solid var(--border-strong); transform:rotate(45deg); }
.dropdown-menu-item{
  display:block; width:100%; box-sizing:border-box; text-align:left;
  background:none; border:none; color:var(--ink); font-size:13px; font-family:var(--body);
  padding:11px 12px; cursor:pointer; text-decoration:none; border-radius:6px;
}
.dropdown-menu-item:hover{ background:var(--bg); color:var(--amber); }
.dropdown-menu-item + .dropdown-menu-item{ margin-top:2px; }

/* Admin tables */
.data-table{ width:100%; border-collapse:collapse; }
.data-table th{ text-align:left; font-family:var(--mono); font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--grey-dim); padding:10px 14px; border-bottom:1px solid var(--border-strong); }
.data-table td{ padding:14px; border-bottom:1px solid var(--border); font-size:14.5px; }
.data-table tr:hover td{ background:var(--bg-raised); }
.data-table a{ color:var(--ink); }
.data-table a:hover{ color:var(--amber); }

.toolbar{ display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:24px; flex-wrap:wrap; }
.toolbar input[type="search"]{ font-family:var(--body); font-size:14.5px; padding:12px 14px; background:var(--bg); border:1px solid var(--border-strong); color:var(--ink); min-width:240px; }

/* Editable line-item tables (quotes, invoices, certificates) */
.data-table input, .data-table select{
  width:100%; font-family:var(--body); font-size:14px;
  padding:8px 10px;
  background:var(--bg);
  border:1px solid var(--border-strong);
  color:var(--ink);
}
.data-table input:focus, .data-table select:focus{ border-color:var(--amber); outline:none; }
.data-table input[type="number"]{ text-align:right; }
.remove-item-btn:hover{ color:#ff8478 !important; }

/* Checklist items that take two small readings/selections instead of a
   single Pass/Fail/N/A dropdown (see certificate-types.js's 'compound'
   checklist item type) — e.g. Q=/A= amp or volt readings. */
.checklist-compound-cell{ display:flex; gap:10px; flex-wrap:wrap; }
.checklist-subfield{ display:flex; flex-direction:column; gap:4px; font-family:var(--mono); font-size:10px; letter-spacing:0.05em; text-transform:uppercase; color:var(--grey-dim); flex:1; min-width:72px; }
/* Computed fields (battery capacity, voltage-drop %, % tested) — read-only,
   recalculated live from other inputs; the muted look signals "derived",
   not "needs filling in". */
.checklist-subfield-computed, .data-table input[readonly]{ background:var(--bg-raised); color:var(--grey); cursor:default; }

/* Signature capture (engineer / responsible person on site) — a white
   signing surface regardless of the site's dark theme, since that's what
   ends up on the printed PDF; touch-action:none stops mobile/tablet
   browsers from scrolling the page while someone's mid-signature. */
.signature-canvas{ width:100%; height:160px; display:block; background:#fff; border:1px solid var(--border-strong); border-radius:6px; touch-action:none; }

/* Simple modal for quick-add forms */
.modal-backdrop{ position:fixed; inset:0; background:rgba(0,0,0,0.6); display:flex; align-items:center; justify-content:center; z-index:200; padding:20px; }
.modal-backdrop.hidden{ display:none; }
.modal{ background:var(--bg-raised); border:1px solid var(--border-strong); max-width:520px; width:100%; padding:30px; max-height:90vh; overflow-y:auto; }
.modal h2{ font-size:20px; margin-bottom:20px; text-transform:uppercase; }
/* Modal action-row button sizing — was a repeated inline style
   (style="flex:1; justify-content:center;") on ~48 Save/Cancel-style
   buttons across the admin modals; any extra per-button sizing
   (min-width, display:none, red "danger" colouring) stays inline since
   that part genuinely varies by button. */
.modal-btn-flex{ flex:1; justify-content:center; }

/* Customer page (admin-customer.html) section tabs (Sep 2026, per Matt: the page was one long
   scroll of Overview/Sites/Certificates/Quotes/Invoices/RAMS/etc — split into tabs, Excel-sheet
   style, so each area is findable instead of scrolled past). Visually modelled on .lead-filter-btn
   below (chip on --bg-raised, amber border+text when active) so it reads as the same "tab/filter"
   idiom already used on the Leads page, but under its own class names since this is genuinely
   different — content panels being shown/hidden, not a table being filtered. All panels render
   into the DOM at load (nothing here is lazy-loaded), so no page JS beyond admin-customer.js's
   existing load*() calls needs to change — the tabs only toggle which panel is visible. */
.section-tabs{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:26px; border-bottom:1px solid var(--border); padding-bottom:0; }
.section-tab-btn{
  font-family:var(--mono); font-size:12px; letter-spacing:0.04em; text-transform:uppercase;
  padding:11px 16px; background:none; border:none; border-bottom:2px solid transparent;
  color:var(--grey); cursor:pointer; transition:border-color .15s, color .15s;
}
.section-tab-btn:hover{ color:var(--ink); }
.section-tab-btn.active{ color:var(--amber); border-bottom-color:var(--amber); }
.section-tab-panel[hidden]{ display:none; }

/* Site cards + their systems tables — originally admin-sites.html's own inline <style> block.
   Moved here (Sep 2026) so the same markup can render both on that standalone page (still used
   as a deep-link target from Scheduling, admin-system.html's back-link, and the certificate
   "add site" hint — all left pointing at admin-sites.html on purpose) and inline in the Sites &
   Systems tab on admin-customer.html, without duplicating the CSS in two places. */
.site-card{ background:var(--bg-raised); border:1px solid var(--border-strong); padding:22px 24px; margin-bottom:20px; }
.site-card-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:16px; flex-wrap:wrap; margin-bottom:14px; }
.site-card-head h3{ font-size:17px; margin-bottom:4px; }
.site-card-head p{ color:var(--grey); font-size:13.5px; }
.site-card-actions{ display:flex; gap:14px; flex-shrink:0; }
.site-card-actions button{ background:none; border:none; color:var(--amber); cursor:pointer; font-size:12.5px; font-family:var(--mono); text-transform:uppercase; letter-spacing:0.04em; padding:0; }
.site-card-actions button.danger{ color:var(--red); }
.systems-table{ width:100%; border-collapse:collapse; margin-top:6px; }
.systems-table th{ text-align:left; font-family:var(--mono); font-size:10.5px; letter-spacing:0.06em; text-transform:uppercase; color:var(--grey-dim); padding:8px 10px; border-bottom:1px solid var(--border-strong); }
.systems-table td{ padding:10px 10px; border-bottom:1px solid var(--border); font-size:13.5px; }
.systems-table tr:last-child td{ border-bottom:none; }
.inactive-row td{ color:var(--grey-dim); }
.interval-pill{ font-family:var(--mono); font-size:11px; color:var(--grey); }
.empty-note{ color:var(--grey-dim); font-size:13px; padding:10px 0; }
.row-actions button{ background:none; border:none; cursor:pointer; font-size:12.5px; margin-right:14px; padding:0; }
.row-actions .edit-btn{ color:var(--amber); }
.row-actions .toggle-btn{ color:var(--grey); }
.row-actions .delete-btn{ color:var(--red); }
.row-actions .assets-btn{ color:var(--grey); }

/* Leads page (admin-leads.html) — status filter tabs above the table, and
   colour-coded status <select>s inline in each row (New/In Process/Win/
   Dead), matching the .badge colour convention used elsewhere. */
.lead-filters{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:20px; }
.lead-filter-btn{ font-family:var(--mono); font-size:11.5px; letter-spacing:0.04em; text-transform:uppercase; padding:8px 14px; background:var(--bg-raised); border:1px solid var(--border-strong); color:var(--grey); cursor:pointer; transition:border-color .15s, color .15s; }
.lead-filter-btn:hover{ color:var(--ink); }
.lead-filter-btn.active{ color:var(--amber); border-color:var(--amber); }
.lead-filter-count{ color:var(--grey-dim); margin-left:6px; }
.lead-filter-btn.active .lead-filter-count{ color:var(--amber); }

.status-select{ font-family:var(--mono); font-size:12px; letter-spacing:0.03em; text-transform:uppercase; min-width:130px; }
.status-select.status-new{ border-color:var(--border-strong); color:var(--grey); }
.status-select.status-inprocess{ border-color:var(--amber); color:var(--amber); }
.status-select.status-win{ border-color:#6FCF97; color:#6FCF97; }

/* Filled, compact status pills — the inline-editable status <select> for invoices and quotes
   on admin-customer.html and in Document Search (admin-search.html). Sep 2026, per Matt:
   smaller, and colour-filled rather than outlined. A separate component from .status-select
   above (built for the Leads page's own dropdown) rather than restyling it, so Leads is
   untouched. */
.status-pill{
  font-family:var(--mono); font-size:10.5px; font-weight:600; letter-spacing:0.05em; text-transform:uppercase;
  padding:5px 24px 5px 9px; border:none; border-radius:5px; color:#fff; cursor:pointer;
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  background-repeat:no-repeat; background-position:right 8px center; background-size:8px 5px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 5'%3E%3Cpath fill='white' d='M0 0h8L4 5z'/%3E%3C/svg%3E");
}
.status-pill.status-pill-draft{ background-color:#71798A; }
.status-pill.status-pill-sent{ background-color:#A65F07; }
.status-pill.status-pill-paid, .status-pill.status-pill-accepted{ background-color:#1F9D55; }
.status-pill.status-pill-overdue, .status-pill.status-pill-declined{ background-color:#C23A2E; }
.due-overdue{ color:var(--red); }
.due-soon{ color:var(--amber); }
.status-select.status-dead{ border-color:var(--red); color:var(--red); }

/* Accounts overview (Sep 2026) — colour modifiers for style.css's existing .stat/.num tiles
   (built for the marketing homepage's own stat row), used as-is here for the overview tiles,
   plus the forecast table's simple CSS bar (no charting library loaded anywhere in this app —
   this keeps the same minimal-dependency approach). */
.stat .num.num-red{ color:var(--red); }
.stat .num.num-green{ color:#1F9D55; }
.stat .stat-sub{ font-family:var(--mono); }

/* Clickable overview tiles (Sep 2026, per Matt) — jumps down to the matching table
   (admin-accounts.js's data-jump handler). Cursor + a subtle lift/border-colour change on
   hover/focus is the only visual difference from a plain (non-clickable) .stat tile. */
.stat.stat-link{ cursor:pointer; transition:border-color .15s ease, transform .15s ease; }
.stat.stat-link:hover, .stat.stat-link:focus-visible{ border-color:var(--amber-mid); transform:translateY(-2px); outline:none; }
.forecast-bar-track{ background:var(--bg); border:1px solid var(--border-strong); border-radius:4px; height:10px; overflow:hidden; }
.forecast-bar{ height:100%; background:var(--amber); border-radius:4px 0 0 4px; }
.forecast-bar.forecast-bar-overdue{ background:var(--red); }

/* Next Call date, Table View column — blank means "no retry scheduled,
   always in the queue"; the colour cues match the status-select convention
   (amber = needs attention soon, red = needs attention now). */
.next-call-input{ min-width:130px; }
.next-call-input.next-call-today{ border-color:var(--amber); color:var(--amber); }
.next-call-input.next-call-overdue{ border-color:var(--red); color:var(--red); }

/* Import Leads modal — mapping step maps each source-file column to a
   leads field via a small label+select grid. */
.mapping-row{ display:flex; align-items:center; gap:14px; margin-bottom:12px; }
.mapping-row label{ flex:0 0 160px; font-size:13.5px; color:var(--ink); }
.mapping-row label .required-star{ color:var(--red); }
.mapping-row select{ flex:1; }
.import-summary-line{ display:flex; justify-content:space-between; font-size:14.5px; padding:8px 0; border-top:1px solid var(--border); }
.import-summary-line:first-child{ border-top:none; }

/* Table View / Queue View toggle (admin-leads.html) — same visual language
   as the status filter tabs directly below it, so the two read as one
   control cluster rather than competing widgets. */
.view-toggle{ display:flex; gap:8px; margin-bottom:14px; }
.view-toggle-btn{ font-family:var(--mono); font-size:11.5px; letter-spacing:0.04em; text-transform:uppercase; padding:8px 14px; background:var(--bg-raised); border:1px solid var(--border-strong); color:var(--grey); cursor:pointer; transition:border-color .15s, color .15s; }
.view-toggle-btn:hover{ color:var(--ink); }
.view-toggle-btn.active{ color:var(--amber); border-color:var(--amber); background:var(--bg); }

/* Queue View (admin-leads.html) — one lead at a time with big action
   buttons, for working a cold-call list fast from a desktop. Logging an
   outcome auto-advances to the next lead in the snapshot list. */
.queue-progress-row{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:14px; }
.queue-progress{ font-family:var(--mono); font-size:12px; color:var(--grey-dim); text-transform:uppercase; letter-spacing:0.04em; margin:0; }
.queue-due-toggle{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--grey); cursor:pointer; }
.queue-due-toggle input{ width:auto; margin:0; }
.queue-card{ background:var(--bg-raised); border:1px solid var(--border); border-radius:var(--radius-lg); padding:32px; max-width:640px; }
.queue-card.hidden{ display:none; }
.queue-card-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:16px; flex-wrap:wrap; margin-bottom:6px; }
.queue-category{ font-family:var(--mono); font-size:11px; letter-spacing:0.06em; text-transform:uppercase; color:var(--amber); margin-bottom:6px; }
.queue-name{ font-size:22px; text-transform:uppercase; letter-spacing:0.02em; margin-bottom:4px; }
.queue-rating{ font-family:var(--mono); font-size:12.5px; color:var(--grey-dim); }
.queue-maps-link{ font-family:var(--mono); font-size:12px; color:var(--amber); white-space:nowrap; }
.queue-maps-link:hover{ color:var(--amber-bright); }
.queue-address{ font-size:14.5px; color:var(--grey); margin:10px 0 22px; }

/* Phone number gets its own oversized display + a Copy button rather than
   relying on tel: links — a desktop with no calling app registered can't
   do anything with a tel: link, but copy-and-paste into an iPhone or a
   VoIP softphone always works. The tel: link stays as a secondary option
   in case a softphone handler ever gets registered on the machine. */
.queue-phone-row{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:6px; }
.queue-phone{ font-family:var(--mono); font-size:26px; letter-spacing:0.02em; color:var(--ink); }
.queue-copy-btn{ padding:10px 16px; font-size:11.5px; }
.queue-tel-link{ font-family:var(--mono); font-size:12px; color:var(--grey-dim); border-bottom:1px dotted var(--grey-dim); }
.queue-tel-link:hover{ color:var(--ink); }
.queue-copy-confirm{ font-family:var(--mono); font-size:11.5px; color:#6FCF97; margin-bottom:18px; }
.queue-copy-confirm.hidden{ display:none; }

.queue-card textarea#queue-notes{ width:100%; font-family:var(--body); font-size:14px; padding:10px 12px; background:var(--bg); border:1px solid var(--border-strong); color:var(--ink); resize:vertical; }
.queue-card textarea#queue-notes:focus{ border-color:var(--amber); outline:none; }

/* Next Call scheduling row inside the queue card — a date input plus
   quick-pick shortcuts, all saving immediately (no separate save step,
   matching the outcome buttons below it). */
.queue-retry-row{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.queue-retry-row input[type="date"]{ font-family:var(--body); font-size:13.5px; padding:9px 10px; background:var(--bg); border:1px solid var(--border-strong); color:var(--ink); }
.queue-retry-row input[type="date"]:focus{ border-color:var(--amber); outline:none; }
.queue-retry-quick, .queue-retry-clear{ font-family:var(--mono); font-size:11px; letter-spacing:0.03em; text-transform:uppercase; padding:8px 10px; background:var(--bg-raised-2); border:1px solid var(--border-strong); color:var(--grey); cursor:pointer; border-radius:var(--radius-sm); transition:border-color .15s, color .15s; }
.queue-retry-quick:hover{ border-color:var(--amber); color:var(--amber); }
.queue-retry-clear{ background:none; border-color:transparent; text-decoration:underline; text-underline-offset:2px; }
.queue-retry-clear:hover{ color:var(--red); }

.queue-actions{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin:22px 0 20px; }
@media (max-width:520px){ .queue-actions{ grid-template-columns:1fr; } }
.queue-action-btn{ font-family:var(--mono); font-weight:600; font-size:12.5px; letter-spacing:0.04em; text-transform:uppercase; padding:14px 16px; border:1.5px solid var(--border-strong); background:var(--bg); color:var(--ink); cursor:pointer; border-radius:var(--radius-md); transition:border-color .15s, color .15s, background .15s; text-align:left; }
.queue-action-btn:hover{ border-color:var(--ink); }
.queue-action-interested{ border-color:var(--amber); color:var(--amber); }
.queue-action-interested:hover{ background:var(--amber); color:#fff; }
.queue-action-dead{ border-color:var(--red); color:var(--red); }
.queue-action-dead:hover{ background:var(--red); color:#fff; }
.queue-action-win{ grid-column:1 / -1; border-color:#6FCF97; color:#217A4E; }
.queue-action-win:hover{ background:#6FCF97; color:#0E2E1D; }

.queue-nav{ display:flex; justify-content:space-between; gap:12px; }
.queue-empty{ background:var(--bg-raised); border:1px dashed var(--border-strong); border-radius:var(--radius-lg); padding:40px 32px; max-width:640px; text-align:center; }
.queue-empty.hidden{ display:none; }
.queue-empty h3{ text-transform:uppercase; letter-spacing:0.03em; margin-bottom:8px; }

/* =========================================================
   Engineer hub remodel (Sep 2026, per Matt) — a slim, purpose-built top
   bar plus a Klipboard-style week banner (tap a date, see that day's
   jobs) in place of the old marketing-style header + flat jobs table.
   engineer-hub.html only.
   ========================================================= */
.eng-topbar{ display:flex; align-items:center; justify-content:space-between; padding-bottom:12px; border-bottom:1px solid var(--border); }
.eng-topbar-left{ display:flex; align-items:center; gap:10px; }
.eng-badge{ flex:none; width:32px; height:32px; border-radius:var(--radius-sm); background:var(--amber); color:#fff; display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-weight:700; font-size:12px; }
.eng-topbar-name{ font-weight:700; font-size:15px; }
.eng-topbar-actions{ display:flex; align-items:center; gap:12px; }
.eng-icon-btn{ width:32px; height:32px; border-radius:var(--radius-full); border:1px solid var(--border-strong); background:none; display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--grey); padding:0; transition:border-color .15s, color .15s; }
.eng-icon-btn:hover{ border-color:var(--amber); color:var(--amber); }
.eng-icon-btn svg{ width:15px; height:15px; }
.eng-logout-link{ font-family:var(--mono); font-size:11px; color:var(--grey-dim); background:none; border:none; padding:0; cursor:pointer; text-decoration:underline; text-underline-offset:2px; }
.eng-logout-link:hover{ color:var(--ink); }
.eng-sync-status{ font-family:var(--mono); font-size:10.5px; color:var(--grey-dim); text-align:right; margin:6px 0 0; }

.eng-week-head{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:12px; }
.eng-week-label{ font-family:var(--mono); font-size:11.5px; letter-spacing:0.04em; text-transform:uppercase; color:var(--grey-dim); }
.eng-week-nav{ display:flex; gap:6px; }
.eng-week-nav-btn{ width:26px; height:26px; border-radius:var(--radius-sm); border:1px solid var(--border-strong); background:none; color:var(--grey); display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0; font-size:15px; line-height:1; transition:border-color .15s, color .15s; }
.eng-week-nav-btn:hover{ border-color:var(--amber); color:var(--amber); }

.eng-daystrip{ display:flex; gap:6px; margin-bottom:18px; }
.eng-day-chip{ flex:1; padding:8px 0; border-radius:var(--radius-full); text-align:center; cursor:pointer; border:1px solid var(--border-strong); background:none; font-family:var(--body); position:relative; transition:border-color .15s, background .15s; }
.eng-day-chip .eng-day-abbr{ display:block; font-family:var(--mono); font-size:9px; letter-spacing:0.04em; color:var(--grey-dim); }
.eng-day-chip .eng-day-date{ display:block; font-size:15px; font-weight:500; color:var(--ink); margin-top:2px; }
.eng-day-chip.is-today{ border-color:var(--amber); }
.eng-day-chip.is-selected{ background:var(--amber); border-color:var(--amber); }
.eng-day-chip.is-selected .eng-day-abbr{ color:rgba(255,255,255,0.75); }
.eng-day-chip.is-selected .eng-day-date{ color:#fff; font-weight:700; }
.eng-day-chip.has-jobs::after{ content:""; position:absolute; bottom:5px; left:50%; transform:translateX(-50%); width:4px; height:4px; border-radius:var(--radius-full); background:var(--amber); }
.eng-day-chip.is-selected.has-jobs::after{ background:#fff; }

.eng-day-section-head{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:12px; }
.eng-day-count{ font-family:var(--mono); font-size:11px; color:var(--grey); background:var(--bg-raised); padding:4px 10px; border-radius:var(--radius-full); }

.eng-job-list{ display:flex; flex-direction:column; gap:10px; margin-bottom:24px; }
.eng-job-card{ background:var(--bg); border:1px solid var(--border); border-radius:var(--radius-lg); padding:14px 16px; }
.eng-job-card-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:10px; }
.eng-job-customer{ font-weight:700; font-size:14.5px; }
.eng-job-site{ font-size:12.5px; color:var(--grey); margin-top:2px; }
.eng-job-contact{ font-size:12px; color:var(--grey-dim); margin-top:6px; }
.eng-job-card-bottom{ display:flex; justify-content:space-between; align-items:center; margin-top:10px; }
.eng-job-type{ font-family:var(--mono); font-size:10.5px; letter-spacing:0.04em; text-transform:uppercase; color:var(--grey-dim); }
.eng-job-action{ font-size:12px; font-weight:600; color:var(--amber); border:1px solid var(--amber); padding:6px 13px; border-radius:var(--radius-full); white-space:nowrap; transition:background .15s, color .15s; }
.eng-job-action:hover{ background:var(--amber); color:#fff; }

/* Job/certificate status badges (Sep 2026, per Matt) — Not Started /
   In Progress / Completed, reusing the site's existing token palette and
   the green already established by .queue-action-win for a "done" state. */
.eng-status-badge{ font-family:var(--mono); font-size:9.5px; font-weight:700; letter-spacing:0.05em; text-transform:uppercase; padding:4px 9px; border-radius:var(--radius-full); white-space:nowrap; border:1px solid transparent; }
.eng-status-not-started{ background:rgba(20,23,28,0.06); color:var(--grey-dim); border-color:var(--border); }
.eng-status-in-progress{ background:rgba(166,95,7,0.10); color:var(--amber); border-color:rgba(166,95,7,0.30); }
.eng-status-completed{ background:rgba(111,207,151,0.16); color:#217A4E; border-color:#6FCF97; }

/* Diary entries (office/other — see offline-store.js's diary_cache) sit in
   the same .eng-job-list as job cards but are read-only context, not
   something to act on — dashed border and no action button/site line mark
   that difference at a glance. */
.eng-diary-card{ background:var(--bg-raised); border:1px dashed var(--border-strong); border-radius:var(--radius-lg); padding:12px 16px; }
.eng-diary-type{ flex:none; font-family:var(--mono); font-size:10px; letter-spacing:0.04em; text-transform:uppercase; color:var(--grey-dim); background:var(--bg); padding:4px 9px; border-radius:var(--radius-full); border:1px solid var(--border-strong); }

.eng-empty-day{ text-align:center; padding:28px 10px; color:var(--grey-dim); font-size:13px; line-height:1.5; background:var(--bg-raised); border-radius:var(--radius-lg); }

/* ---- Tabs + Customers/Documents search (Sep 2026, per Matt) ---- */

.eng-tabbar{ display:flex; gap:4px; background:var(--bg-raised); border:1px solid var(--border); border-radius:var(--radius-full); padding:4px; margin:18px 0 16px; }
.eng-tab-btn{ flex:1; text-align:center; font-family:var(--body); font-size:13px; font-weight:600; color:var(--grey-dim); background:none; border:none; padding:9px 10px; border-radius:var(--radius-full); cursor:pointer; transition:background .15s, color .15s; }
.eng-tab-btn.is-active{ background:var(--ink); color:var(--bg); }

.eng-search-bar{ margin-bottom:14px; }
.eng-search-input{ width:100%; font-family:var(--body); font-size:14.5px; padding:12px 16px; background:var(--bg); border:1px solid var(--border-strong); border-radius:var(--radius-md); color:var(--ink); }
.eng-search-input:focus{ border-color:var(--amber); outline:none; }

.eng-doc-filters{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px; }
.eng-filter-pill{ font-family:var(--mono); font-size:11px; letter-spacing:0.03em; text-transform:uppercase; padding:7px 13px; background:var(--bg-raised); border:1px solid var(--border-strong); border-radius:var(--radius-full); color:var(--grey); cursor:pointer; transition:border-color .15s, color .15s; }
.eng-filter-pill:hover{ color:var(--ink); }
.eng-filter-pill.is-active{ color:var(--amber); border-color:var(--amber); }

.eng-doc-count{ color:var(--grey-dim); font-size:12.5px; margin:-4px 0 12px; }

.eng-customer-result{ cursor:pointer; transition:border-color .15s; }
.eng-customer-result:hover{ border-color:var(--amber); }

/* Customer detail — swapped in over the search results, back button up top */
.eng-detail-panel{ display:block; }
.eng-detail-back{ background:none; border:none; color:var(--amber); font-weight:600; font-size:13px; padding:0; margin-bottom:16px; cursor:pointer; }
.eng-detail-header{ padding-bottom:14px; border-bottom:1px solid var(--border); margin-bottom:16px; }
.eng-detail-section{ margin-bottom:20px; }
.eng-detail-section .eyebrow{ margin-bottom:8px; }
.eng-detail-row{ padding:10px 0; border-bottom:1px solid var(--border); display:block; }
.eng-detail-row:last-child{ border-bottom:none; }
.eng-detail-row-link{ text-decoration:none; color:inherit; display:block; }
.eng-detail-row-link:hover .eng-detail-row-main{ color:var(--amber); }
.eng-detail-row-main{ font-weight:600; font-size:13.5px; color:var(--ink); }
.eng-detail-row-sub{ font-size:12.5px; color:var(--grey); margin-top:2px; }
.eng-detail-tags{ display:flex; gap:6px; flex-wrap:wrap; margin-top:6px; }
.eng-detail-tag{ font-family:var(--mono); font-size:10px; letter-spacing:0.03em; text-transform:uppercase; color:var(--grey-dim); background:var(--bg-raised); border:1px solid var(--border-strong); padding:3px 8px; border-radius:var(--radius-full); }

.eng-cta-bar{ position:sticky; bottom:0; background:var(--bg); padding:14px 0 6px; margin-top:4px; border-top:1px solid var(--border); }
.eng-cta-btn{ display:block; background:var(--ink); color:var(--bg); text-align:center; padding:14px; border-radius:var(--radius-md); font-weight:600; font-size:13.5px; }
.eng-cta-btn:hover{ opacity:0.9; }
.queue-empty p{ color:var(--grey); font-size:14px; margin:0; }