:root{
    /* ---- refined visual system: same Copysystems brand hues (navy accent, warm
       neutrals) — elevated execution, lighter/cleaner surfaces, softer/deeper
       shadows, more radius, a proper type scale. --border, --ink-muted, and --ink
       keep their exact original values on purpose: the printed invoice/quote/
       maintenance-agreement letterhead reads those three tokens directly (and
       inherits --ink for its body text), and this pass leaves that document's
       look untouched. Everything else here is new or refined. ---- */
    --bg:#FAF8F2; --surface:#FFFFFF; --surface-2:#F1ECE0;
    --border:#DAD2BF; --border-soft:#EFE9DA;
    --ink:#22201B; --ink-muted:#6E6656; --ink-faint:#A79F8C;
    --accent:#1F4C8F; --accent-dark:#163A6E; --accent-ink:#FFFFFF; --accent-soft:#E7EEF8;
    --accent-2:#A33B2E;
    --good:#2C7A4B; --good-soft:#E1F0E5;
    --warn:#8A611A; --warn-soft:#F5E8CF;
    --bad:#B23A2E; --bad-soft:#F6E0DC;
    --shadow-sm: 0 1px 2px rgba(33,31,26,0.05);
    --shadow: 0 1px 2px rgba(33,31,26,0.04), 0 6px 16px -4px rgba(33,31,26,0.08);
    --shadow-lg: 0 8px 24px -6px rgba(33,31,26,0.16), 0 2px 6px rgba(33,31,26,0.06);
    --radius: 12px; --radius-sm:8px;
  }
  /* Deliberately no @media (prefers-color-scheme: dark) override — this is a
     branded business tool, and it should look the same (Copysystems' own colors)
     on every device regardless of whether a visitor's phone/OS is set to dark
     mode. A device in dark mode was rendering the whole app in a near-black
     palette, which read as "broken" rather than as an intentional dark theme. */
  *{box-sizing:border-box; -webkit-user-select:text; user-select:text;}
  html,body{margin:0;padding:0;}
  html{ -webkit-text-size-adjust:100%; }
  body{
    background:var(--bg); color:var(--ink);
    font-family:"IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
    font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased;
  }
  .mono{ font-family:"IBM Plex Mono", ui-monospace, SFMono-Regular, monospace; }
  .tabular{ font-variant-numeric: tabular-nums; }
  a{ color:var(--accent); }
  button{ font-family:inherit; }
  ::selection{ background:var(--accent); color:#fff; }
  ::-moz-selection{ background:var(--accent); color:#fff; }

  /* ---- login screen ---- */
  #login-screen{
    min-height:100vh; min-height:100dvh; display:flex; flex-direction:column; align-items:center; justify-content:center;
    padding:max(20px,env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left));
  }
  .login-card{
    width:100%; max-width:360px; background:var(--surface); border:1px solid var(--border-soft);
    border-radius:var(--radius); box-shadow:var(--shadow); padding:28px;
  }
  .login-card .brand-block{ display:flex; justify-content:center; margin-bottom:20px; }
  .login-card .brand-logo{ max-width:220px; width:100%; height:auto; display:block; border-radius:var(--radius-sm); background:#fff; padding:8px 12px; }
  .login-context{ margin:-4px 0 20px; padding:12px 14px; border:1px solid var(--accent); border-radius:var(--radius-sm); background:var(--accent-soft); text-align:center; }
  .login-context strong{ display:block; color:var(--accent-dark); font-size:15px; letter-spacing:.01em; }
  .login-context span{ display:block; margin-top:4px; color:var(--ink-muted); font-size:12px; line-height:1.4; }
  #login-screen.customer-login .login-context{ border-color:var(--good); background:var(--good-soft); }
  #login-screen.customer-login .login-context strong{ color:var(--good); }
  .login-card .field{ display:flex; flex-direction:column; gap:4px; margin-bottom:12px; }
  .login-card label{ font-size:11.5px; color:var(--ink-muted); font-weight:600; text-transform:uppercase; letter-spacing:0.04em; }
  .login-card input{
    background:var(--bg); border:1px solid var(--border-soft); border-radius:7px;
    padding:9px 10px; font-size:14px; color:var(--ink); font-family:inherit;
  }
  .login-card .btn{ width:100%; justify-content:center; margin-top:6px; }
  .login-error{ color:var(--bad); font-size:12.5px; margin-top:10px; min-height:1em; }
  .app-version{ text-align:center; margin-top:16px; font-size:11px; color:var(--ink-muted); }

  #shell{ display:none; min-height:100vh; }
  #shell.ready{ display:flex; }

  #sidebar{
    width:252px; flex:none; background:linear-gradient(180deg,#153660 0%,#102B4E 100%); border-right:0;
    display:flex; flex-direction:column; padding:22px 14px 18px; gap:18px;
    box-shadow:4px 0 18px rgba(16,43,78,.12); position:relative; z-index:3;
  }
  .brand{ padding:0 6px 16px; display:flex; flex-direction:column; justify-content:center; gap:9px; border-bottom:1px solid rgba(255,255,255,.13); }
  .brand::after{ content:"Service Operations"; color:rgba(255,255,255,.68); font-size:10.5px; font-weight:600; letter-spacing:.11em; text-transform:uppercase; padding-left:3px; }
  .brand .brand-logo{ max-width:188px; width:100%; height:auto; display:block; border-radius:var(--radius-sm); background:#fff; padding:7px 10px; box-shadow:0 6px 18px rgba(0,0,0,.16); }
  nav{ display:flex; flex-direction:column; gap:2px; overflow-y:auto; padding-right:2px; scrollbar-width:thin; }
  .nav-group-label{ color:rgba(255,255,255,.46); font-size:9.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; padding:12px 12px 4px; }
  .nav-group-label:first-child{ padding-top:2px; }
  .navlink{
    display:flex; align-items:center; justify-content:space-between; gap:8px; position:relative;
    padding:9px 12px; border-radius:8px; color:rgba(255,255,255,.76); text-decoration:none; cursor:pointer;
    font-size:13.5px; font-weight:500; border:1px solid transparent; background:transparent;
    width:100%; text-align:left; transition:background-color .1s, color .1s;
  }
  .navlink:hover{ background:rgba(255,255,255,.09); color:#fff; }
  .navlink.active{ background:#fff; color:var(--accent-dark); font-weight:650; box-shadow:0 5px 14px rgba(0,0,0,.16); }
  .navlink.active::before{
    content:""; position:absolute; left:5px; top:8px; bottom:8px; width:3px; border-radius:3px;
    background:var(--accent);
  }
  .navlink .count{ font-family:"IBM Plex Mono", monospace; font-size:11px; color:inherit; opacity:0.75; }
  .sidebar-foot{ margin-top:auto; padding:14px 6px 0; display:flex; flex-direction:column; gap:8px; border-top:1px solid rgba(255,255,255,.13); }
  .sidebar-foot .who{ font-size:11.5px; color:rgba(255,255,255,.68); overflow-wrap:anywhere; }
  .sidebar-foot .btn{ width:100%; justify-content:center; }
  .sidebar-foot .btn.secondary{ color:#fff; border-color:rgba(255,255,255,.28); }
  .sidebar-foot .btn.secondary:hover{ background:rgba(255,255,255,.1); }

  #main{ flex:1; min-width:0; display:flex; flex-direction:column; }
  #topbar{
    display:flex; align-items:center; justify-content:space-between; padding:20px 32px; gap:10px;
    background:rgba(255,255,255,.94); border-bottom:1px solid var(--border-soft); position:sticky; top:0; z-index:2;
    backdrop-filter:blur(10px); box-shadow:0 1px 8px rgba(33,31,26,.035);
  }
  #topbar h1{ font-size:20px; margin:0; font-weight:650; letter-spacing:-0.015em; }
  .stock-apply-dock{position:fixed;bottom:16px;left:50%;transform:translateX(-50%);z-index:30;display:flex;gap:8px;flex-wrap:wrap;justify-content:center;padding:10px;background:var(--surface);border:1px solid var(--border-soft);border-radius:10px;box-shadow:var(--shadow-lg);max-width:calc(100vw - 24px);width:max-content;}
  [data-role="customer-warehouses"]{padding-bottom:84px;}
  [data-role="customer-warehouses"] table{table-layout:fixed;width:100%;min-width:1050px;}
  [data-role="customer-warehouses"] th,[data-role="customer-warehouses"] td{overflow-wrap:anywhere;padding:8px;font-size:12px;}
  [data-role="customer-warehouses"] td input:not([type="checkbox"]),[data-role="customer-warehouses"] td select{width:100%;min-width:0;box-sizing:border-box;}
  [data-role="customer-warehouses"] th:nth-child(1){width:4%;}
  [data-role="customer-warehouses"] th:nth-child(2){width:8%;}
  [data-role="customer-warehouses"] th:nth-child(3){width:12%;}
  [data-role="customer-warehouses"] th:nth-child(4){width:10%;}
  [data-role="customer-warehouses"] th:nth-child(5){width:8%;}
  [data-role="customer-warehouses"] th:nth-child(6){width:10%;}
  [data-role="customer-warehouses"] th:nth-child(7){width:17%;}
  [data-role="customer-warehouses"] th:nth-child(8){width:23%;}
  [data-role="customer-warehouses"] th:nth-child(9){width:8%;}
  [data-role="customer-warehouses"] td .btn{max-width:100%;white-space:normal;}
  @media print{.stock-apply-dock{display:none;}}
  #topbar .date{ font-size:12px; color:var(--ink-muted); font-family:"IBM Plex Mono",monospace; }
  /* Tech mode hides the whole sidebar (see #shell.tech-mode #sidebar above), which is
     also where the normal sign-out button lives — so tech-mode shows its own copy here
     in the topbar instead. Hidden everywhere else so there's never two. */
  #topbar-signout-btn, #topbar-app-version{ display:none; }
  #shell.tech-mode #topbar-signout-btn, #shell.tech-mode #topbar-app-version,
  #shell.customer-mode #topbar-signout-btn{ display:inline-block; }
  .app-revision{
    font-family:"IBM Plex Mono",monospace; font-size:10.5px; line-height:1;
    letter-spacing:.04em; color:var(--ink-muted); white-space:nowrap;
    padding:5px 7px; border:1px solid var(--border-soft); border-radius:999px;
  }
  #sidebar .app-revision{ color:rgba(255,255,255,.68); border-color:rgba(255,255,255,.16); align-self:flex-start; }
  #content{ padding:28px 34px 56px; flex:1; width:100%; max-width:1600px; margin:0 auto; }

  /* ---- tech role: a separate, phone-first shell — no sidebar, no admin nav,
     just "my calls" full width, capped to a comfortable reading column even
     on a wide screen. See renderTechHome() and friends. ---- */
#shell.tech-mode #sidebar{ display:none; }
#shell.customer-mode #sidebar{ display:none; }
#shell.customer-mode #topbar{ padding:18px 24px; }
#shell.customer-mode #content{ max-width:1180px; padding:24px 28px 56px; }
.customer-portal-bar{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:20px; }
.customer-portal-eyebrow{ color:var(--accent); font-size:10.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; margin-bottom:3px; }
.customer-portal-actions{ display:flex; gap:7px; flex-wrap:wrap; }
.customer-portal-stat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:20px; }
.customer-portal-two-col{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.customer-portal-quick-actions{ display:flex; gap:9px; flex-wrap:wrap; }
.customer-portal-request-card{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; padding:10px 0; border-bottom:1px solid var(--border-soft); }
.customer-portal-request-card:last-child{ border-bottom:none; }
@media (max-width:700px){
  #shell.customer-mode #topbar{ padding:14px 16px; }
  #shell.customer-mode #content{ padding:18px 16px 40px; }
  .customer-portal-stat-grid{ grid-template-columns:repeat(2,1fr); }
  .customer-portal-two-col{ grid-template-columns:1fr; }
  .customer-portal-actions{ width:100%; }
  .customer-portal-actions .btn{ flex:1; }
}
  #shell.tech-mode #topbar{ padding:16px 16px 0 16px; }
  #shell.tech-mode #content{ padding:12px 16px 40px 16px; max-width:520px; margin:0 auto; width:100%; }
  .tech-bar{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding-bottom:12px; margin-bottom:14px; border-bottom:1px solid var(--border-soft); }
  .tech-bar .who{ font-size:12px; color:var(--ink-muted); }
  .tech-list{ display:flex; flex-direction:column; gap:10px; }
  .tech-list-item{
    display:block; text-align:left; width:100%; background:var(--surface); border:1px solid var(--border-soft);
    border-radius:var(--radius); box-shadow:var(--shadow); padding:13px 14px; cursor:pointer; font:inherit; color:inherit;
  }
  .tech-list-item:hover{ background:var(--surface-2); }
  .tech-list-item .row1{ display:flex; justify-content:space-between; align-items:flex-start; gap:8px; font-weight:600; font-size:14px; }
  .tech-list-item .row2{ font-size:12.5px; color:var(--ink-muted); margin-top:4px; }
  .tech-field-row{ display:flex; justify-content:space-between; gap:10px; padding:9px 0; border-bottom:1px dashed var(--border-soft); font-size:13.5px; }
  .tech-field-row:last-child{ border-bottom:none; }
  .tech-field-row .k{ color:var(--ink-muted); }
  .tech-actions{ display:flex; flex-direction:column; gap:8px; margin-top:16px; }
  .tech-actions .btn{ width:100%; justify-content:center; padding:11px; font-size:13.5px; }
  .ticket-material-list{ display:flex; flex-direction:column; gap:7px; margin:0 0 10px; }
  .ticket-material-row{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:9px 10px; border:1px solid var(--border-soft); border-radius:8px; background:var(--bg); }
  .ticket-material-row .material-name{ flex:1; min-width:150px; }
  .ticket-material-row input{ width:76px; }
  .ticket-material-add{ display:flex; align-items:flex-end; gap:8px; flex-wrap:wrap; }
  .ticket-material-add .field{ margin:0; }
  .ticket-material-add .material-picker{ flex:1; min-width:210px; }

  .stat-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:22px; }
  .stat-tile{
    background:var(--surface); border:1px solid var(--border-soft); border-radius:var(--radius);
    padding:17px 19px; box-shadow:var(--shadow); position:relative; overflow:hidden;
  }
  .stat-tile::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--accent); opacity:.85; }
  .stat-tile.warn::before{ background:var(--warn); }
  .stat-tile.good::before{ background:var(--good); }
  .stat-tile .label{ font-size:11px; text-transform:uppercase; letter-spacing:0.07em; color:var(--ink-muted); font-weight:600; }
  .stat-tile .value{ font-family:"IBM Plex Mono",monospace; font-size:28px; font-weight:650; margin-top:7px; letter-spacing:-0.025em; color:var(--accent-dark); }
  .stat-tile .sub{ font-size:11.5px; color:var(--ink-muted); margin-top:4px; }

  .card{ background:var(--surface); border:1px solid var(--border-soft); border-radius:var(--radius); box-shadow:var(--shadow); margin-bottom:20px; }
  .card-head{ display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid var(--border-soft); gap:10px; flex-wrap:wrap; }
  .card-head h2{ font-size:15.5px; margin:0; font-weight:650; letter-spacing:-0.005em; }
  .card-head .desc{ font-size:12px; color:var(--ink-muted); margin-top:3px; }
  .card-head .head-actions{ display:flex; gap:8px; align-items:center; }
  .card-head .head-actions .hero-img{ height:52px; width:auto; display:block; border-radius:var(--radius-sm); background:#fff; padding:4px 6px; }
  .card-body{ padding:18px 20px; }
  .card-body.flush{ padding:0; }
  .quote-financial-grid{display:grid;grid-template-columns:repeat(4,minmax(145px,1fr));gap:14px 20px;font-size:13px;}
  .quote-financial-grid span:not(.muted){font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums;}

  @media (max-width:1100px){
    #sidebar{ width:226px; }
    #content{ padding:24px 24px 48px; }
    .stat-row{ grid-template-columns:repeat(2,1fr); }
    .quote-financial-grid{grid-template-columns:repeat(2,minmax(145px,1fr));}
  }

  .section-training{display:flex;justify-content:flex-end;margin-bottom:12px;}
  .training-guide{border:1px solid var(--border-soft);border-radius:10px;margin:12px 0;overflow:hidden;}
  .training-guide summary{cursor:pointer;font-weight:600;padding:16px;min-height:44px;}
  .training-article{padding:16px;max-width:850px;overflow-wrap:anywhere;}
  .training-article h2{font-size:19px;margin-top:0;}
  .training-article li{margin:12px 0;line-height:1.6;}
  .training-warning{border-left:4px solid var(--accent);background:var(--surface-2);padding:14px;border-radius:4px;}
  .training-warning p{margin-bottom:0;line-height:1.6;}
  #training-dialog{width:min(860px,94vw);}
  @media (max-width:600px){
    .login-card{ max-width:420px; padding:24px 20px; }
    .login-card input{ font-size:16px; min-height:44px; }
    .login-card .btn{ min-height:44px; touch-action:manipulation; }
    .btn,.icon-btn,.tech-list-item{ touch-action:manipulation; }
    .ticket-material-add{ align-items:stretch; }
    .ticket-material-add .material-picker{ min-width:100%; }
    .ticket-material-add select,.ticket-material-add input,.ticket-material-row input{ font-size:16px; min-height:44px; }
    .ticket-material-row input{ width:84px; }
    .quote-financial-grid{grid-template-columns:1fr;}
  }

  .btn{
    display:inline-flex; align-items:center; gap:6px;
    background:var(--accent); color:var(--accent-ink); border:1px solid var(--accent-dark);
    padding:8px 14px; border-radius:var(--radius-sm); font-size:13px; font-weight:600; cursor:pointer;
    box-shadow:0 1px 2px rgba(31,76,143,0.25); transition:filter .1s, transform .05s;
  }
  .btn:hover{ filter:brightness(1.08); }
  .btn:active{ transform:translateY(1px); }
  .btn:disabled{ opacity:0.5; cursor:not-allowed; filter:none; }
  .btn.secondary{ background:transparent; color:var(--ink); border-color:var(--border); box-shadow:none; }
  .btn.secondary:hover{ background:var(--surface-2); }
  .btn.danger{ background:transparent; color:var(--bad); border-color:var(--bad); box-shadow:none; }
  .btn.danger:hover{ background:var(--bad-soft); }
  .btn.small{ padding:5px 10px; font-size:12px; border-radius:6px; }
  .btn:focus-visible, .navlink:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{
    outline:2px solid var(--accent); outline-offset:1px;
  }

  table{ width:100%; border-collapse:collapse; font-size:13px; }
  thead th{
    text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:0.06em;
    color:var(--ink-muted); font-weight:600; padding:9px 14px; border-bottom:1px solid var(--border-soft); white-space:nowrap;
  }
  tbody td{ padding:10px 14px; border-bottom:1px solid var(--border-soft); vertical-align:top; }
  tbody tr:last-child td{ border-bottom:none; }
  tbody tr:hover{ background:var(--surface-2); }
  td.num, th.num{ text-align:right; font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums; }
  /* Shared hover/typography polish for the ad-hoc search-result and
     "pick one for this customer" rows scattered across Customers, Equipment,
     Models, Supplies, Parts, Quotes, Rate Plans, and Tickets — each row already
     carries its own inline layout styles (padding, borders, flex), so this
     only adds what inline styles can't: a hover state and bolder first-line text. */
  .lookup-row:hover{ background:var(--accent-soft); }
  .table-wrap{ overflow-x:auto; }
  /* Every data table in the app (Supplies, Parts, Team, Tickets, Orders,
     Invoices, Quotes, etc.) sits inside a .table-wrap div — the printed
     invoice/quote/agreement letterhead's tables never do (see
     invoiceDocumentHTML and friends) — so scoping the elevated look here
     dresses up every real screen without touching the letterhead. */
  .table-wrap table thead th{ background:var(--surface-2); font-weight:700; letter-spacing:0.07em; padding:10px 20px; }
  .table-wrap table tbody td{ padding:12px 20px; }
  .table-wrap table tbody tr:hover{ background:var(--accent-soft); }
  .table-wrap table tbody tr.clickable-row{ cursor:pointer; }
  .table-wrap table tbody tr.clickable-row:hover td:first-child{ color:var(--accent); font-weight:700; }
  .muted{ color:var(--ink-muted); }
  .empty-row{ padding:26px 16px; text-align:center; color:var(--ink-muted); font-size:13px; }

  .pill{ display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:99px; font-size:11px; font-weight:700; white-space:nowrap; letter-spacing:0.01em; }
  .pill.good{ background:var(--good-soft); color:var(--good); }
  .pill.warn{ background:var(--warn-soft); color:var(--warn); }
  .pill.bad{ background:var(--bad-soft); color:var(--bad); }
  .pill.neutral{ background:var(--surface-2); color:var(--ink-muted); }
  .pill.accent{ background:var(--accent-soft); color:var(--accent); }

  form.panel{ background:var(--surface-2); border:1px solid var(--border-soft); border-radius:var(--radius-sm); padding:14px; margin:0 0 16px 0; display:none; }
  form.panel.open{ display:block; }
  .field-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:10px 12px; }
  .field{ display:flex; flex-direction:column; gap:4px; }
  .field label{ font-size:11.5px; color:var(--ink-muted); font-weight:600; text-transform:uppercase; letter-spacing:0.04em; }
  .field input, .field select, .field textarea{
    background:var(--surface); border:1px solid var(--border); border-radius:7px;
    padding:9px 11px; font-size:13.5px; color:var(--ink); font-family:inherit;
  }
  .searchable-select{position:relative;min-width:0;}
  .searchable-select-source{display:none!important;}
  .searchable-select-input{width:100%;box-sizing:border-box;}
  .searchable-select-results{position:absolute;z-index:40;top:calc(100% + 4px);left:0;right:0;max-height:300px;overflow:auto;background:var(--surface);border:1px solid var(--border);border-radius:8px;box-shadow:var(--shadow-lg);}
  .searchable-select-option{display:block;width:100%;padding:9px 11px;border:0;border-bottom:1px solid var(--border-soft);background:var(--surface);color:var(--ink);font:inherit;font-size:12.5px;text-align:left;cursor:pointer;}
  .searchable-select-option:last-of-type{border-bottom:0;}
  .searchable-select-option:hover,.searchable-select-option:focus,.searchable-select-option[aria-selected="true"]{background:var(--accent-soft);outline:none;}
  .searchable-select-empty{padding:10px 11px;color:var(--ink-muted);font-size:12px;}
  @media (max-width:600px){
    #login-screen .login-card .field input{
      font-size:16px;
      min-height:44px;
    }
    .ticket-material-add .field select,
    .ticket-material-add .field input,
    .ticket-material-row input{
      font-size:16px;
      min-height:44px;
    }
  }
  .field textarea{ resize:vertical; min-height:56px; }
  .panel-actions{ display:flex; gap:8px; margin-top:12px; }

  .import-drop{ border:1.5px dashed var(--border-soft); border-radius:var(--radius-sm); padding:26px; text-align:center; color:var(--ink-muted); font-size:13px; transition:border-color .12s, background-color .12s; }
  .import-drop input[type=file]{ margin-top:10px; }
  .import-drop.drag-over{ border-color:var(--accent); border-style:solid; background:var(--accent-soft); }
  .flag-row{ background:var(--bad-soft) !important; }
  .flag-row:hover{ background:var(--bad-soft) !important; }

  .toast{
    position:fixed; bottom:18px; right:18px; z-index:50;
    background:var(--ink); color:var(--bg); padding:9px 14px; border-radius:6px;
    font-size:12.5px; box-shadow:var(--shadow); opacity:0; transform:translateY(6px);
    transition:opacity .18s ease, transform .18s ease; pointer-events:none; max-width:320px;
  }
  .toast.show{ opacity:1; transform:translateY(0); }
  .toast.err{ background:var(--bad); color:#fff; }

  .invoice-detail{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
  .invoice-detail .col{ display:flex; flex-direction:column; gap:10px; }
  .kv{ display:flex; justify-content:space-between; padding:6px 0; border-bottom:1px dashed var(--border-soft); font-size:13px; }
  .kv .k{ color:var(--ink-muted); }
  .kv .v{ font-family:"IBM Plex Mono",monospace; }

  dialog{ border:none; border-radius:14px; padding:0; background:var(--surface); color:var(--ink); box-shadow:var(--shadow-lg); width:min(640px,92vw); max-height:88vh; }
  dialog::backdrop{ background:rgba(20,18,14,0.45); }
  /* Archive review occupies the available page, with one vertical scroll surface. */
  #archive-onboarding-dialog{width:calc(100vw - 24px);height:calc(100dvh - 24px);max-width:none;max-height:none;box-sizing:border-box;overflow-x:hidden;overflow-y:auto;scrollbar-gutter:stable;}
  #archive-onboarding-dialog .dialog-head{position:sticky;top:0;z-index:2;background:var(--surface);}
  #archive-onboarding-dialog .dialog-head h3{min-width:0;overflow-wrap:anywhere;}
  #archive-onboarding-dialog .dialog-head .icon-btn{flex-shrink:0;}
  #archive-onboarding-dialog .card-body{min-width:0;overflow-wrap:anywhere;}
  #archive-onboarding-dialog .archive-pagination{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:10px 0;}
  #archive-onboarding-dialog .archive-table-wrap{min-width:0;max-width:100%;overflow:visible;}
  #archive-onboarding-dialog table{width:100%;min-width:0;table-layout:fixed;}
  #archive-onboarding-dialog th,#archive-onboarding-dialog td{white-space:normal;overflow-wrap:anywhere;}
  #archive-onboarding-dialog th:nth-child(1){width:21%;}
  #archive-onboarding-dialog th:nth-child(2){width:19%;}
  #archive-onboarding-dialog th:nth-child(3){width:16%;}
  #archive-onboarding-dialog th:nth-child(4){width:28%;}
  #archive-onboarding-dialog th:nth-child(5){width:16%;}
  #archive-onboarding-dialog input{max-width:100%;min-width:0;box-sizing:border-box;}
  #archive-onboarding-dialog .btn,#archive-onboarding-dialog .pill{max-width:100%;white-space:normal;overflow-wrap:anywhere;}
  #archive-onboarding-dialog td .btn{margin-bottom:6px;}
  @media(max-width:800px){
    #archive-onboarding-dialog{width:calc(100vw - 12px);height:calc(100dvh - 12px);}
    #archive-onboarding-dialog table,#archive-onboarding-dialog tbody,#archive-onboarding-dialog tr,#archive-onboarding-dialog td{display:block;width:100%;box-sizing:border-box;}
    #archive-onboarding-dialog thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);}
    #archive-onboarding-dialog tbody tr{border:1px solid var(--border-soft);border-radius:8px;margin-bottom:14px;}
    #archive-onboarding-dialog td{border-bottom:0;padding:8px 12px;}
    #archive-onboarding-dialog td::before{display:block;font-size:11px;font-weight:700;color:var(--ink-muted);margin-bottom:4px;}
    #archive-onboarding-dialog td:nth-child(1)::before{content:'Customer / Bill To';}
    #archive-onboarding-dialog td:nth-child(2)::before{content:'Serial / model';}
    #archive-onboarding-dialog td:nth-child(3)::before{content:'Source / opening meters';}
    #archive-onboarding-dialog td:nth-child(4)::before{content:'Needs review';}
    #archive-onboarding-dialog td:nth-child(5)::before{content:'Actions';}
  }
  .dialog-head{ display:flex; justify-content:space-between; align-items:center; padding:14px 18px; border-bottom:1px solid var(--border-soft); }
  .dialog-head h3{ margin:0; font-size:15px; }
  .dialog-body{ padding:16px 18px; overflow-y:auto; max-height:70vh; }
  .dialog-foot{ padding:12px 18px; border-top:1px solid var(--border-soft); display:flex; justify-content:flex-end; gap:8px; }
  #quote-email-dialog{width:min(880px,94vw);}
  #quote-email-dialog .quote-email-controls{display:grid;grid-template-columns:1fr 1fr;align-items:end;justify-content:stretch;}
  #quote-email-dialog .quote-email-help,#quote-email-dialog .quote-email-body,#quote-email-dialog .panel-actions{grid-column:1/-1;}
  #quote-email-dialog .quote-email-help{display:flex;flex-direction:column;gap:3px;font-size:12px;color:var(--ink-muted);}
  #quote-email-dialog .quote-email-help b{color:var(--ink);font-size:13px;}
  #quote-email-dialog .panel-actions{justify-content:flex-end;}
  @media(max-width:600px){#quote-email-dialog .quote-email-controls{grid-template-columns:1fr;}}
  .icon-btn{ background:none; border:none; color:var(--ink-muted); cursor:pointer; font-size:16px; line-height:1; padding:4px; }
  .icon-btn:hover{ color:var(--ink); }

  .history-section{ margin-bottom:18px; }
  .history-section h4{ font-size:12px; text-transform:uppercase; letter-spacing:0.06em; color:var(--ink-muted); margin:0 0 8px; }
  .history-row{ display:flex; justify-content:space-between; gap:10px; padding:8px 0; border-bottom:1px dashed var(--border-soft); font-size:13px; }
  .history-row:last-child{ border-bottom:none; }
  .history-row .d{ color:var(--ink-muted); font-family:"IBM Plex Mono",monospace; font-size:12px; white-space:nowrap; }

  .loading-blip{ padding:40px; text-align:center; color:var(--ink-muted); font-size:13px; }

  /* Printing pulls the content out of whatever dialog is open into this plain,
     normal-flow element first (see the "print-page"/"print-invoice" actions) —
     an open <dialog> lives in the browser's "top layer" and can't reliably be
     forced into normal document flow via CSS (position:static is ignored on
     top-layer boxes), which clips any printed content taller than one page.
     A plain div has no such restriction, so multi-page documents paginate correctly. */
  #print-area{ display:none; }

  @media print{
    /* print is only ever triggered from inside an open dialog (invoice / agreement
       document) via window.print() after its content has been copied into
       #print-area — hide everything else, including any lingering dialog and
       toast notification, and print only #print-area. */
    #shell, #sidebar, #topbar, #content, #toast, #login-screen, dialog, .no-print{ display:none !important; }
    body{ background:#fff; }
    #print-area{ display:block !important; padding:16px 18px; }
    #print-area .invoice-document{ width:100%; box-sizing:border-box; }
    #print-area .invoice-table-wrap{ overflow:visible !important; width:100%; }
    #print-area .invoice-line-items{ width:100% !important; max-width:100%; table-layout:fixed; border-collapse:collapse; }
    #print-area .invoice-line-items th,
    #print-area .invoice-line-items td{ padding:2px !important; font-size:9px !important; line-height:1.2; overflow-wrap:normal; word-break:normal; }
    #print-area .invoice-line-items th:nth-child(n+2),
    #print-area .invoice-line-items td:nth-child(n+2),
    #print-area .invoice-line-items .num{ white-space:nowrap; }
    #print-area .invoice-line-items th:nth-child(1){ width:14%; }
    #print-area .invoice-line-items th:nth-child(2){ width:12%; }
    #print-area .invoice-line-items th:nth-child(3){ width:14%; }
    #print-area .invoice-line-items th:nth-child(4),
    #print-area .invoice-line-items th:nth-child(6){ width:16%; }
    #print-area .invoice-line-items th:nth-child(5),
    #print-area .invoice-line-items th:nth-child(7){ width:8%; }
    #print-area .invoice-line-items th:nth-child(8){ width:12%; }
    #print-area .invoice-line-items thead{ display:table-header-group; }
    #print-area .invoice-line-items tbody{ orphans:3; widows:3; }
    #print-area .invoice-line-items tr{ break-inside:avoid; page-break-inside:avoid; }

    /* Invoices use landscape Letter so all eight billing fields remain readable at
       10pt. The branded footer stays in normal document flow after totals: it can
       never cover a device row, while browser pagination carries it to the next page
       only if necessary. */
    body.printing-invoice #print-area{ padding:8px 10px; }
    body.printing-invoice #print-area .invoice-line-items th,
    body.printing-invoice #print-area .invoice-line-items td{ padding:2px 3px !important; font-size:10pt !important; line-height:1.15; }
    body.printing-invoice #print-area .invoice-print-footer{
      text-align:center; margin-top:12px; break-inside:avoid; page-break-inside:avoid;
    }
    body.printing-invoice #print-area .invoice-print-footer .invoice-footer-address{
      font-size:9pt !important; color:var(--ink-muted); margin:0 0 4px;
    }
    body.printing-invoice #print-area .invoice-print-footer img{
      display:inline-block; width:auto; max-width:175px; max-height:40px;
    }
    /* Portrait is available for a compact single-page preference; it uses the
       smaller type required by eight columns on Letter portrait. */
    body.printing-invoice.printing-invoice-portrait #print-area .invoice-line-items th,
    body.printing-invoice.printing-invoice-portrait #print-area .invoice-line-items td{
      font-size:8px !important; padding:1.5px 2px !important; line-height:1.15;
    }
    body.printing-invoice.printing-invoice-portrait #print-area .invoice-print-footer img{
      max-width:140px; max-height:32px;
    }
    /* Maintenance agreements may have any number of equipment rows. Let that table
       paginate for as many pages as it needs, then force the complete 20-term legal
       section onto one final page. Compact spacing is limited to the terms page so
       machine/customer details stay at their normal readable size. */
    body.printing-contract #print-area{ padding:0; }
    body.printing-contract #print-area .contract-equipment-table thead{ display:table-header-group; }
    body.printing-contract #print-area .contract-equipment-table tr{
      break-inside:avoid; page-break-inside:avoid;
    }
    body.printing-contract #print-area .contract-terms-page{
      break-before:page; page-break-before:always;
    }
    body.printing-contract #print-area .contract-terms-page h3{
      font-size:11pt !important; line-height:1.1 !important; margin:0 0 5pt !important;
    }
    body.printing-contract #print-area .contract-terms-intro{
      font-size:9pt !important; line-height:1.15 !important; margin:0 0 4pt !important;
    }
    body.printing-contract #print-area .contract-terms-list{
      font-size:9pt !important; line-height:1.15 !important; margin:0 !important;
      padding-left:16pt !important; orphans:2; widows:2;
    }
    body.printing-contract #print-area .contract-terms-list li{
      margin:0 0 2pt !important;
    }
    body.printing-contract #print-area .contract-terms-list li:last-child{
      font-weight:700 !important;
    }
    .doc-page-break{ page-break-before:always; }
  }
  @media (prefers-reduced-motion: reduce){ *{ transition:none !important; animation:none !important; } }

  /* ---- grouped staff navigation ----
     This is deliberately limited to the normal staff shell. Remote technicians
     and customers keep their existing purpose-built, phone-first layouts. */
  .staff-nav-toggle{ display:none; }
  #shell.ready:not(.tech-mode):not(.customer-mode){ flex-direction:column; }
  #shell:not(.tech-mode):not(.customer-mode) #sidebar{
    width:100%; min-height:68px; flex:none; flex-direction:row; align-items:center;
    padding:8px 18px; gap:13px; position:sticky; top:0; z-index:20;
    box-shadow:0 3px 14px rgba(16,43,78,.18);
  }
  #shell:not(.tech-mode):not(.customer-mode) #sidebar .brand{
    flex:none; flex-direction:row; align-items:center; gap:8px; padding:0;
    border:0; cursor:pointer; border-radius:8px;
  }
  #shell:not(.tech-mode):not(.customer-mode) #sidebar .brand:focus-visible{
    outline:2px solid #fff; outline-offset:3px;
  }
  #shell:not(.tech-mode):not(.customer-mode) #sidebar .brand::after{
    content:"Service Desk"; padding:0; color:rgba(255,255,255,.78);
    font-size:10px; letter-spacing:.09em; white-space:nowrap;
  }
  #shell:not(.tech-mode):not(.customer-mode) #sidebar .brand-logo{
    width:142px; max-width:142px; padding:5px 8px; box-shadow:0 3px 10px rgba(0,0,0,.13);
  }
  #shell:not(.tech-mode):not(.customer-mode) #nav{
    min-width:0; flex:1; display:flex; flex-direction:row; align-items:center;
    gap:3px; overflow:visible; padding:0;
  }
  #shell:not(.tech-mode):not(.customer-mode) #nav > .navlink{
    width:auto; flex:none; padding:8px 9px;
  }
  #shell:not(.tech-mode):not(.customer-mode) .navlink.active{
    box-shadow:0 3px 10px rgba(0,0,0,.13);
  }
  #shell:not(.tech-mode):not(.customer-mode) .navlink.active::before{
    left:8px; right:8px; top:auto; bottom:2px; width:auto; height:3px;
  }
  #shell:not(.tech-mode):not(.customer-mode) .nav-menu{ position:relative; flex:none; }
  #shell:not(.tech-mode):not(.customer-mode) .nav-menu summary{
    display:flex; align-items:center; gap:6px; padding:8px 9px; border:1px solid transparent;
    border-radius:8px; color:rgba(255,255,255,.78); cursor:pointer; font-size:13.5px;
    font-weight:550; list-style:none; white-space:nowrap;
  }
  #shell:not(.tech-mode):not(.customer-mode) .nav-menu summary::-webkit-details-marker{ display:none; }
  #shell:not(.tech-mode):not(.customer-mode) .nav-menu summary:hover,
  #shell:not(.tech-mode):not(.customer-mode) .nav-menu[open] summary,
  #shell:not(.tech-mode):not(.customer-mode) .nav-menu.active summary{
    background:rgba(255,255,255,.1); color:#fff;
  }
  #shell:not(.tech-mode):not(.customer-mode) .nav-menu summary:focus-visible{
    outline:2px solid #fff; outline-offset:1px;
  }
  #shell:not(.tech-mode):not(.customer-mode) .nav-chevron{ font-size:12px; opacity:.75; transition:transform .12s; }
  #shell:not(.tech-mode):not(.customer-mode) .nav-menu[open] .nav-chevron{ transform:rotate(180deg); }
  #shell:not(.tech-mode):not(.customer-mode) .nav-menu-panel{
    position:absolute; top:calc(100% + 8px); left:0; z-index:30; min-width:230px;
    padding:8px; border:1px solid rgba(255,255,255,.16); border-radius:10px;
    background:#102B4E; box-shadow:0 12px 26px rgba(0,0,0,.24);
  }
  #shell:not(.tech-mode):not(.customer-mode) .nav-menu-panel .navlink{ width:100%; }
  #shell:not(.tech-mode):not(.customer-mode) .nav-menu-section{
    padding:5px 10px 7px; color:rgba(255,255,255,.5); font-size:9.5px;
    font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  }
  #shell:not(.tech-mode):not(.customer-mode) .sidebar-foot{
    flex:none; margin:0 0 0 auto; padding:0; border:0; flex-direction:row;
    align-items:center; gap:7px;
  }
  #shell:not(.tech-mode):not(.customer-mode) .sidebar-foot .who{ max-width:150px; }
  #shell:not(.tech-mode):not(.customer-mode) .sidebar-foot .btn{ width:auto; }
  #shell:not(.tech-mode):not(.customer-mode) #sidebar .app-revision{ align-self:center; }
  #shell:not(.tech-mode):not(.customer-mode) #main{ width:100%; }
  #shell:not(.tech-mode):not(.customer-mode) #topbar{ top:68px; }

  @media (max-width:1180px){
    #shell:not(.tech-mode):not(.customer-mode) #sidebar{ gap:9px; padding-left:12px; padding-right:12px; }
    #shell:not(.tech-mode):not(.customer-mode) #sidebar .brand::after,
    #shell:not(.tech-mode):not(.customer-mode) .sidebar-foot .who{ display:none; }
    #shell:not(.tech-mode):not(.customer-mode) #sidebar .brand-logo{ width:128px; max-width:128px; }
  }

  @media (max-width:960px){
    #shell:not(.tech-mode):not(.customer-mode) #sidebar{
      min-height:60px; flex-wrap:wrap; padding:7px 12px; gap:8px;
    }
    #shell:not(.tech-mode):not(.customer-mode) #sidebar .brand-logo{ width:122px; max-width:122px; }
    #shell:not(.tech-mode):not(.customer-mode) .staff-nav-toggle{
      display:inline-flex; align-items:center; justify-content:center; margin-left:auto;
      min-height:40px; padding:7px 13px; border:1px solid rgba(255,255,255,.35);
      border-radius:8px; background:transparent; color:#fff; font-weight:650; cursor:pointer;
    }
    #shell:not(.tech-mode):not(.customer-mode) .staff-nav-toggle:focus-visible{
      outline:2px solid #fff; outline-offset:1px;
    }
    #shell:not(.tech-mode):not(.customer-mode) #nav{
      order:4; width:100%; flex-basis:100%; display:none; flex-direction:column;
      align-items:stretch; gap:3px; max-height:calc(100dvh - 72px); overflow-y:auto;
      padding:8px 0 3px; border-top:1px solid rgba(255,255,255,.13);
    }
    #shell:not(.tech-mode):not(.customer-mode) #sidebar.nav-open #nav{ display:flex; }
    #shell:not(.tech-mode):not(.customer-mode) #nav > .navlink,
    #shell:not(.tech-mode):not(.customer-mode) .nav-menu,
    #shell:not(.tech-mode):not(.customer-mode) .nav-menu summary{ width:100%; }
    #shell:not(.tech-mode):not(.customer-mode) .nav-menu summary{ justify-content:space-between; }
    #shell:not(.tech-mode):not(.customer-mode) .nav-menu-panel{
      position:static; min-width:0; margin-top:2px; padding:4px 4px 5px 12px;
      border:0; box-shadow:none; background:rgba(0,0,0,.08);
    }
    #shell:not(.tech-mode):not(.customer-mode) .sidebar-foot{ margin-left:0; }
    #shell:not(.tech-mode):not(.customer-mode) #topbar{ position:static; }
  }

  @media (max-width:600px){
    #shell:not(.tech-mode):not(.customer-mode) .sidebar-foot .app-revision{ display:none; }
    #shell:not(.tech-mode):not(.customer-mode) .sidebar-foot .btn{ min-height:40px; }
    #shell:not(.tech-mode):not(.customer-mode) #topbar{ padding:14px 16px; }
    #shell:not(.tech-mode):not(.customer-mode) #content{ padding:18px 14px 40px; }
  }
#import-reconciliation-dialog {width:calc(100vw - 24px);height:calc(100dvh - 24px);max-width:none;max-height:none;box-sizing:border-box;overflow-y:auto;overflow-x:hidden;}
#import-reconciliation-dialog .dialog-head {position:sticky;top:0;background:var(--surface,#fff);z-index:2;}
#import-reconciliation-dialog .head-actions {display:flex;flex-wrap:wrap;gap:8px;margin:12px 0;}
.import-recon-row {display:grid;grid-template-columns:1fr 1.5fr 1fr;gap:16px;padding:16px 0;border-bottom:1px solid var(--border-soft);min-width:0;}
.import-recon-row>div {min-width:0;overflow-wrap:anywhere;}
.import-recon-row button {margin:5px 0;white-space:normal;}
.import-recon-source {font-size:12px;}
@media(max-width:800px){.import-recon-row{grid-template-columns:1fr;}#import-reconciliation-dialog{width:calc(100vw - 12px);height:calc(100dvh - 12px);}}
/* Customer lookup keeps the matched machine/site usable on phones. */
.lookup-match { margin-top:4px; font-size:12px; overflow-wrap:anywhere; }
.customer-machine-book { display:flex; border:1px solid var(--border-soft); border-radius:10px; overflow:hidden; background:var(--surface); }
.customer-machine-list { flex:0 0 240px; border-right:1px solid var(--border); max-height:420px; overflow-y:auto; }
.customer-machine-detail { flex:1; min-width:0; padding:14px; overflow-wrap:anywhere; }
.lookup-machine { display:block; width:100%; text-align:left; background:transparent; color:inherit; border:0; font:inherit; overflow-wrap:anywhere; }
.billing-agreement-group { padding:10px 0; border-bottom:1px solid var(--border-soft); }
[data-role="customer-billing-summary"] details { margin:10px 0; }
[data-role="customer-billing-summary"] summary,.customer-machine-list summary { cursor:pointer; }
[data-quarterly-months][hidden] { display:none!important; }
@media(max-width:650px) {
  .customer-machine-book { flex-direction:column; }
  .customer-machine-list { flex:auto; max-height:260px; border-right:0; border-bottom:1px solid var(--border); }
  [data-role="customer-billing-summary"] .history-row { flex-wrap:wrap; overflow-wrap:anywhere; }
}
/* Consolidated meter review keeps the existing horizontal table scroll local. */
.gmi-group { margin: 16px 0 24px; min-width: 0; }
.gmi-selection { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 12px 0; }
.gmi-group input[type="checkbox"] { min-width: 20px; min-height: 20px; }
#meter-invoice-review-dialog { width: min(1040px, calc(100vw - 32px)); max-width: calc(100vw - 32px); }
#meter-invoice-review-dialog td:not(:first-child) { white-space: nowrap; }