/* Extracted verbatim from index.html (was the <style> block at line 165).
   The app's main stylesheet. Cascades after base.css. */
    /* Scope checklists (PM template > Applies To). 39 operational types will not fit in a
       dropdown anyone can use, and the point is seeing several ticked at once — so a
       bounded scroll box with real checkboxes, not a multi-select nobody can ctrl-click.

       These live INSIDE .modal, which is why the selectors are .modal-qualified. Three
       rules there would otherwise wreck the layout, and did:
         .modal input  { width:100% }   -> stretched every checkbox to the full column,
                                           shoving its label against the right edge
         .modal label  { display:block } -> killed the flex row entirely
         .modal label  { text-transform:uppercase; font-size:10px; color:var(--muted) }
       Equal specificity and a later position meant .modal won every tie. */
    .mo-checklist { border:1px solid var(--border); border-radius:6px; background:var(--card,#1a1d23);
                    max-height:170px; overflow-y:auto; padding:4px; }
    .modal .mo-checklist label,
    .mo-checklist label {
      display:flex; align-items:center; gap:8px; padding:4px 6px; margin:0;
      font-size:11px; line-height:1.35; cursor:pointer; border-radius:4px;
      text-transform:none; letter-spacing:normal; font-weight:400; color:var(--text);
    }
    .modal .mo-checklist label:hover,
    .mo-checklist label:hover { background:rgba(127,127,127,.14); }
    /* The checkbox keeps its intrinsic size; only the text flexes. */
    .modal .mo-checklist input[type="checkbox"],
    .mo-checklist input[type="checkbox"] {
      width:14px; height:14px; min-width:14px; flex:0 0 14px; margin:0; padding:0;
      accent-color:var(--accent); cursor:pointer;
    }
    /* A long type name ellipses rather than overflowing; the full text is on the title. */
    .mo-checklist label > span {
      flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
    }
    .mo-cl-none { font-size:10px; color:var(--muted); font-style:italic; padding:5px; }
    .mo-cl-grp { font-size:9px; color:var(--muted); text-transform:uppercase;
                 letter-spacing:.05em; padding:7px 6px 2px; font-weight:600; }
    .mo-cl-hd { font-size:10px; color:var(--muted); font-weight:600; text-transform:uppercase;
                letter-spacing:.05em; margin-bottom:4px; display:flex;
                justify-content:space-between; align-items:center; gap:8px; }
    .mo-cl-clr { background:none; border:0; color:var(--muted); font-size:10px; cursor:pointer;
                 padding:0; text-decoration:underline; }
    .mo-cl-clr:hover { color:var(--text); }
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600&family=DM+Mono:wght@400;500&family=Fraunces:ital,wght@0,300;0,600;1,300&display=swap');
:root{
  /* Accents — identical in both themes */
  --accent:#4f8ef7;--green:#2dd4a0;--amber:#f5a524;--red:#f06060;
  --purple:#9b7dea;--teal:#38c4c4;
  /* Extended status palette (added 2026-05-14 — Parts Ordered, Parts Received,
     Work Complete Missing Invoice, Outsourced each get their own distinct hue
     so the WO list reads at a glance instead of being a sea of blue/amber.) */
  --orange:#fb923c;--cyan:#22d3ee;--pink:#f472b6;--indigo:#818cf8;
  --radius:10px;--font:'DM Sans',sans-serif;--mono:'DM Mono',monospace;--display:'Fraunces',serif;
}
/* Light theme tokens */
:root[data-theme="light"]{
  color-scheme: light;
  --bg:#f4f6fa;--bg2:#ffffff;--bg3:#eaeef5;--bg4:#dbe1ec;
  --border:rgba(15,17,23,.08);--border2:rgba(15,17,23,.16);
  --text:#1a1d29;--muted:#5d6275;
  --hover:rgba(15,17,23,.05);--chip-bg:rgba(15,17,23,.07);
  --map-overlay:rgba(255,255,255,.85);
}
/* Dark theme tokens */
:root[data-theme="dark"]{
  /* color-scheme tells the browser to render native UI (select option
     dropdowns, scrollbars, date pickers, autofill) in dark mode. Without
     this, <select> popups, <input type="date"> calendars, and the
     scrollbar gutter all render with the OS-default light background
     even when the page CSS is dark. */
  color-scheme: dark;
  --bg:#0f1117;--bg2:#161820;--bg3:#1d1f2a;--bg4:#222535;
  --border:rgba(255,255,255,.07);--border2:rgba(255,255,255,.12);
  --text:#e8e9f0;--muted:#6b6d7d;
  --hover:var(--hover);--chip-bg:var(--chip-bg);
  --map-overlay:rgba(15,17,23,.7);
}
/* Belt-and-suspenders: explicitly style <option> for browsers that don't
   fully honor color-scheme on the popup list (mostly Safari). bg2 + text
   give the open dropdown the same surface as a modal/panel. */
option{background:var(--bg2);color:var(--text)}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--text);font-family:var(--font);font-size:13px;min-height:100vh;overflow-x:hidden}

/* === SIDEBAR === */
.sidebar{position:fixed;top:0;left:0;width:52px;height:100vh;background:var(--bg2);border-right:1px solid var(--border);display:flex;flex-direction:column;align-items:stretch;padding:12px 0;z-index:200;transition:width .22s ease;overflow-x:hidden;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--border) transparent}
.sidebar::-webkit-scrollbar{width:6px}
.sidebar::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}
.sidebar::-webkit-scrollbar-track{background:transparent}
.sidebar.expanded,.sidebar:hover{width:200px}
.sidebar-logo{display:flex;align-items:center;gap:10px;padding:4px 11px 14px;border-bottom:1px solid var(--border);margin-bottom:8px;overflow:hidden;white-space:nowrap;flex-shrink:0}
.logo-mark{position:relative;width:30px;height:30px;border-radius:6px;background:transparent;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:600;color:white;font-family:var(--display);flex-shrink:0;overflow:hidden}
.logo-mark-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.logo-text{font-family:var(--display);font-size:14px;font-weight:300;color:var(--text);opacity:0;transition:opacity .15s}
.logo-text-ops{color:var(--accent);font-style:italic;margin-left:-0.18em}
.sidebar.expanded .logo-text,.sidebar:hover .logo-text{opacity:1}
/* Tenant chip in the top bar — product chrome stays MaintenanceOps; customer identity lives here */
.tenant-chip{display:flex;align-items:center;gap:8px;padding:4px 10px;border-radius:8px;background:var(--bg3);border:1px solid var(--border);max-width:220px}
.tenant-chip-logo{width:18px;height:18px;border-radius:4px;object-fit:contain;background:var(--bg2);flex-shrink:0}
.tenant-chip-name{font-size:11px;font-weight:500;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav-section-label{font-size:9px;font-weight:600;color:var(--muted);letter-spacing:.08em;text-transform:uppercase;padding:8px 14px 4px;opacity:0;transition:opacity .15s;white-space:nowrap}
.sidebar.expanded .nav-section-label,.sidebar:hover .nav-section-label{opacity:1}
.nav-item{display:flex;align-items:center;gap:11px;padding:9px 11px;cursor:pointer;color:var(--muted);transition:all .15s;white-space:nowrap;overflow:hidden;border-radius:0;position:relative;flex-shrink:0}
.nav-item:hover{background:var(--hover);color:var(--text)}
.nav-item.active{background:rgba(79,142,247,.1);color:var(--accent)}
.nav-item.active::before{content:'';position:absolute;left:0;top:4px;bottom:4px;width:2px;background:var(--accent);border-radius:0 2px 2px 0}
.nav-icon{font-size:22px;width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;line-height:1}
.nav-icon svg{width:26px;height:26px;display:block}
.nav-label{font-size:12px;font-weight:500;opacity:0;transition:opacity .15s;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.sidebar.expanded .nav-label,.sidebar:hover .nav-label{opacity:1}
.nav-badge{background:var(--red);color:white;font-size:9px;font-weight:600;padding:1px 5px;border-radius:9px;flex-shrink:0;opacity:0;transition:opacity .15s}
.sidebar.expanded .nav-badge,.sidebar:hover .nav-badge{opacity:1}
.nav-arrow{font-size:9px;color:var(--muted);opacity:0;transition:opacity .15s,transform .15s;flex-shrink:0}
.sidebar.expanded .nav-arrow,.sidebar:hover .nav-arrow{opacity:1}
.nav-arrow.open{transform:rotate(90deg)}
.nav-sub{overflow:hidden;max-height:0;transition:max-height .2s ease;background:var(--bg)}
.nav-sub.open{max-height:600px}
.nav-sub-item{display:flex;align-items:center;gap:8px;padding:6px 11px 6px 43px;font-size:11px;color:var(--muted);cursor:pointer;white-space:nowrap;transition:all .15s}
.nav-sub-item:hover{color:var(--text);background:var(--hover)}
.nav-sub-item.active{color:var(--accent)}
.nav-sub-dot{width:4px;height:4px;border-radius:50%;background:currentColor;flex-shrink:0}
.sidebar-spacer{flex:1 0 0;min-height:8px}
/* Keep nav items from shrinking when sub-navs expand at short viewport heights —
   without flex-shrink:0 the items collapse and the overflow:auto on .sidebar
   never triggers scroll, leaving Admin/Settings unreachable. */
.sidebar > .nav-item,
.sidebar > .nav-sub,
.sidebar > .nav-section-label,
.sidebar > .sidebar-logo{flex-shrink:0}

/* === TOPBAR === */
.topbar{position:fixed;top:0;left:52px;right:0;height:52px;background:var(--bg2);border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 20px;gap:14px;z-index:100;transition:left .22s ease}
.sidebar:hover ~ .topbar,.sidebar.expanded ~ .topbar{left:200px}
.topbar-title{font-family:var(--display);font-size:17px;font-weight:300;color:var(--text);flex:1}
.topbar-title span{color:var(--accent);font-style:italic;margin-left:-0.12em}
.topbar-breadcrumb{font-size:11px;color:var(--muted);display:flex;align-items:center;gap:5px;flex:1}
.bc-sep{color:var(--border2)}
.bc-active{color:var(--text);font-weight:500}
.topbar-right{display:flex;align-items:center;gap:10px}
/* Notification inbox (topbar bell + dropdown).
   Uses the app's own theme tokens (--bg2/--border/--text/--muted) rather than
   hard-coded colours, so it follows light/dark with one rule set. */
.notif-bell-badge{position:absolute;top:-3px;right:-3px;min-width:15px;height:15px;padding:0 3px;
  border-radius:8px;background:var(--red);color:#fff;font-size:9px;font-weight:700;
  line-height:15px;text-align:center;pointer-events:none}
.notif-panel{position:absolute;top:38px;right:0;width:370px;max-height:460px;z-index:9500;
  display:flex;flex-direction:column;background:var(--bg2);
  border:1px solid var(--border2);border-radius:var(--radius);
  box-shadow:0 12px 32px rgba(0,0,0,.22);overflow:hidden}
.notif-panel-hdr{display:flex;align-items:center;gap:8px;padding:9px 12px;color:var(--text);
  border-bottom:1px solid var(--border)}
.notif-panel-body{overflow-y:auto;max-height:410px}
.notif-row{display:flex;gap:9px;padding:9px 12px;border-bottom:1px solid var(--border);
  cursor:pointer;font-size:11px;line-height:1.35}
.notif-row:hover{background:var(--bg3)}
.notif-row.unread{background:rgba(79,142,247,.10)}
.notif-row.unread .notif-row-title{font-weight:600}
.notif-dot{flex:0 0 6px;width:6px;height:6px;border-radius:50%;margin-top:5px;background:transparent}
.notif-row.unread .notif-dot{background:var(--accent)}
.notif-sev-high .notif-dot,.notif-sev-critical .notif-dot{background:var(--amber)}
.notif-row.unread.notif-sev-critical .notif-dot{background:var(--red)}
.notif-row-title{color:var(--text)}
.notif-row-meta{color:var(--muted);font-size:10px;margin-top:2px}
.notif-empty{padding:22px 12px;text-align:center;color:var(--muted);font-size:11px;line-height:1.5}
.time-display{font-family:var(--mono);font-size:11px;color:var(--muted)}
.avatar{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--purple));display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:600;color:white;cursor:pointer}

/* === CONTENT === */
.content{margin-left:52px;margin-top:52px;padding:20px;min-height:calc(100vh - 52px);transition:margin-left .22s ease}
.sidebar:hover ~ .content,.sidebar.expanded ~ .content{margin-left:200px}
.page{display:none}.page.active{display:block}

/* === KPI STRIP === */
.kpi-strip{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-bottom:18px}
.kpi-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);padding:14px 16px;position:relative;overflow:hidden;cursor:pointer;transition:border-color .2s,transform .2s,box-shadow .15s}
.kpi-card:hover{border-color:var(--border2);transform:translateY(-1px)}
.kpi-card.active{border-color:var(--accent);box-shadow:0 0 0 2px rgba(79,142,247,.28)}
.kpi-card.active::after{content:'✕';position:absolute;top:6px;right:8px;font-size:11px;color:var(--muted);font-weight:600}
.kpi-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;border-radius:2px 2px 0 0}
.kpi-blue::before{background:var(--accent)}.kpi-green::before{background:var(--green)}.kpi-amber::before{background:var(--amber)}.kpi-red::before{background:var(--red)}.kpi-purple::before{background:var(--purple)}.kpi-teal::before{background:var(--teal)}
.kpi-label{font-size:10px;color:var(--muted);font-weight:500;letter-spacing:.04em;text-transform:uppercase;margin-bottom:8px}
.kpi-value{font-size:26px;font-weight:600;color:var(--text);font-family:var(--mono);line-height:1;margin-bottom:5px}
.kpi-sub{font-size:10px;color:var(--muted);display:flex;align-items:center;gap:4px}
.kpi-trend{font-size:9px;padding:1px 5px;border-radius:9px;font-weight:500}
.trend-up{background:rgba(45,212,160,.15);color:var(--green)}.trend-down{background:rgba(240,96,96,.15);color:var(--red)}.trend-flat{background:rgba(107,109,125,.15);color:var(--muted)}

/* === PANELS === */
.panel{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.panel-hdr{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--border)}
.panel-title{font-size:12px;font-weight:600;color:var(--text);display:flex;align-items:center;gap:7px}
.panel-title-dot{width:6px;height:6px;border-radius:50%}
.panel-action{font-size:10px;color:var(--accent);cursor:pointer;font-weight:500}
.panel-body{padding:12px 16px}

/* === DATA TABLE === */
.data-table{width:100%;border-collapse:collapse}
.data-table th{font-size:10px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;padding:8px 12px;border-bottom:1px solid var(--border);text-align:left;background:var(--bg3)}
.data-table td{font-size:11px;color:var(--text);padding:10px 12px;border-bottom:1px solid var(--border)}
.data-table tr:last-child td{border-bottom:none}
.data-table tr:hover td{background:rgba(255,255,255,.02)}
.data-table .mono{font-family:var(--mono);font-size:10px;color:var(--muted)}
.data-table th.sortable{cursor:pointer;user-select:none}
.data-table th.sortable:hover{color:var(--text)}
.data-table th .sort-ind{display:inline-block;margin-left:4px;opacity:.4;font-size:9px;vertical-align:middle}
.data-table th.sort-asc .sort-ind,.data-table th.sort-desc .sort-ind{opacity:1;color:var(--accent)}
.data-table tr.filter-row th{padding:4px 8px;background:var(--bg2);border-bottom:1px solid var(--border);text-transform:none;letter-spacing:0}
.data-table tr.filter-row input{width:100%;background:var(--bg);border:1px solid var(--border);border-radius:4px;padding:3px 6px;font-size:10px;color:var(--text);box-sizing:border-box;font-weight:400}
.data-table tr.filter-row input:focus{outline:none;border-color:var(--accent)}
.data-table tr.filter-row input::placeholder{color:var(--muted);opacity:.7}
.dash-link{color:var(--accent);text-decoration:none;cursor:pointer}
.dash-link:hover{text-decoration:underline}
.activity-timeline{display:flex;flex-direction:column;gap:6px;font-size:11px}
.activity-row{display:flex;gap:10px;padding:8px 10px;background:var(--bg3);border-radius:6px;border-left:2px solid var(--accent)}
.activity-icon{font-size:13px;line-height:1.2;flex-shrink:0;width:18px;text-align:center}
.activity-body{flex:1;min-width:0}
.activity-line{color:var(--text);font-weight:500}
.activity-by{color:var(--muted);font-weight:400;margin-left:2px}
.activity-detail{font-size:10px;color:var(--muted);margin-top:2px}
.activity-time{font-size:10px;color:var(--muted);margin-top:3px;font-family:var(--mono)}
.activity-empty{font-size:11px;color:var(--muted);text-align:center;padding:14px}

/* === STATUS BADGE === */
.status-badge{font-size:9px;padding:2px 7px;border-radius:9px;font-weight:500;white-space:nowrap}
/* Cross-record links (assets/xlink.js): a WO, PO, unit, part … named on any page. */
a.xlink{color:var(--accent);text-decoration:none;cursor:pointer}
a.xlink:hover{text-decoration:underline}
.sb-green{background:rgba(45,212,160,.15);color:var(--green)}
.sb-red{background:rgba(240,96,96,.15);color:var(--red)}
.sb-amber{background:rgba(245,165,36,.15);color:var(--amber)}
.sb-blue{background:rgba(79,142,247,.15);color:var(--accent)}
.sb-purple{background:rgba(155,125,234,.15);color:var(--purple)}
.sb-grey{background:rgba(107,109,125,.15);color:var(--muted)}
.sb-teal{background:rgba(56,196,196,.15);color:var(--teal)}
.sb-orange{background:rgba(251,146,60,.15);color:var(--orange)}
.sb-cyan{background:rgba(34,211,238,.15);color:var(--cyan)}
.sb-pink{background:rgba(244,114,182,.15);color:var(--pink)}
.sb-indigo{background:rgba(129,140,248,.15);color:var(--indigo)}

/* === BUTTONS === */
.btn{font-size:11px;padding:6px 14px;border-radius:7px;border:none;cursor:pointer;font-weight:500;transition:all .15s;font-family:var(--font)}
.btn-primary{background:var(--accent);color:white}.btn-primary:hover{opacity:.9}
.btn-secondary{background:var(--bg3);color:var(--text);border:1px solid var(--border)}.btn-secondary:hover{border-color:var(--border2)}
.btn-danger{background:rgba(240,96,96,.15);color:var(--red);border:1px solid rgba(240,96,96,.2)}.btn-danger:hover{background:rgba(240,96,96,.25)}
.btn-sm{font-size:10px;padding:4px 9px}
.btn-icon{width:28px;height:28px;border-radius:6px;border:1px solid var(--border);background:var(--bg3);color:var(--muted);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font-size:12px;transition:all .15s}
.btn-icon:hover{border-color:var(--border2);color:var(--text)}

/* === TOOLBAR === */
.toolbar{display:flex;align-items:center;gap:8px;margin-bottom:14px}
.search-box{display:flex;align-items:center;gap:7px;background:var(--bg2);border:1px solid var(--border);border-radius:8px;padding:6px 12px;flex:1;max-width:320px}
.search-box input{background:transparent;border:none;outline:none;font-size:11px;color:var(--text);font-family:var(--font);width:100%}
.search-box input::placeholder{color:var(--muted)}
.filter-btn{font-size:10px;padding:6px 12px;border-radius:7px;border:1px solid var(--border);background:var(--bg2);color:var(--muted);cursor:pointer;display:flex;align-items:center;gap:5px;transition:all .15s}
.filter-btn:hover{border-color:var(--border2);color:var(--text)}
.filter-btn.active{border-color:var(--accent);color:var(--accent);background:rgba(79,142,247,.08)}
/* Dropdown filter for toolbars. Sized to sit level with .filter-btn so a
   toolbar can mix the two. Highlights like an active filter-btn once a value
   is chosen, so "this list is filtered" reads the same either way. */
.mo-select{font-size:10px;padding:6px 26px 6px 12px;border-radius:7px;border:1px solid var(--border);background:var(--bg2);color:var(--muted);cursor:pointer;transition:all .15s;appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 13px) 12px,calc(100% - 8px) 12px;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.mo-select:hover{border-color:var(--border2);color:var(--text)}
.mo-select:focus{outline:none;border-color:var(--accent)}
.mo-select.active{border-color:var(--accent);color:var(--accent);background-color:rgba(79,142,247,.08)}

/* === ACCESS CARDS === */
.access-card{background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius);padding:14px;display:flex;align-items:flex-start;gap:12px;cursor:pointer;transition:all .15s}
.access-card:hover{border-color:var(--border2)}
.access-card.selected{border-color:var(--accent);background:rgba(79,142,247,.06)}
.access-radio{width:16px;height:16px;border-radius:50%;border:2px solid var(--border2);flex-shrink:0;margin-top:2px;display:flex;align-items:center;justify-content:center;transition:all .15s}
.access-card.selected .access-radio{border-color:var(--accent);background:var(--accent)}
.access-radio::after{content:'';width:6px;height:6px;border-radius:50%;background:white;opacity:0}
.access-card.selected .access-radio::after{opacity:1}
.access-info{flex:1}
.access-name{font-size:12px;font-weight:600;color:var(--text);margin-bottom:3px}
.access-desc{font-size:10px;color:var(--muted);line-height:1.5}
.access-perms{display:flex;flex-wrap:wrap;gap:3px;margin-top:7px}
.perm-chip{font-size:9px;padding:1px 6px;border-radius:9px;background:var(--chip-bg);color:var(--muted)}
.perm-chip.allowed{background:rgba(45,212,160,.1);color:var(--green)}

/* === TEAM LANES === */
.team-lane{background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.team-lane-hdr{padding:10px 14px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.team-lane-title{font-size:12px;font-weight:600;color:var(--text);display:flex;align-items:center;gap:8px}
.team-color-bar{width:10px;height:10px;border-radius:3px}
.member-chip{display:flex;align-items:center;gap:8px;padding:7px 10px;border-bottom:1px solid var(--border);transition:background .15s}
.member-chip:last-child{border-bottom:none}
.member-chip:hover{background:var(--hover)}
.member-avatar{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:600;color:white;flex-shrink:0}
.member-name{flex:1;font-size:11px;color:var(--text)}
.member-role{font-size:9px;color:var(--muted)}

/* === INVENTORY === */
.inv-level{display:flex;align-items:center;gap:7px}
.inv-bar{flex:1;height:4px;background:var(--bg3);border-radius:2px;overflow:hidden;max-width:80px}
.inv-fill{height:100%;border-radius:2px}
.inv-qty{font-size:10px;font-family:var(--mono);color:var(--text);min-width:20px}

/* === SCROLLBAR === */
::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:2px}

/* === WO BARS === */
.wo-bar-row{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.wo-bar-label{font-size:11px;color:var(--muted);width:110px;flex-shrink:0}
.wo-bar-track{flex:1;height:6px;background:var(--bg3);border-radius:3px;overflow:hidden}
.wo-bar-fill{height:100%;border-radius:3px}
.wo-bar-count{font-size:11px;font-family:var(--mono);color:var(--text);width:28px;text-align:right;flex-shrink:0}

/* === TECH CARDS === */
.tech-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.tech-card{background:var(--bg3);border-radius:8px;padding:9px 11px;display:flex;align-items:center;gap:9px;border:1px solid transparent;cursor:pointer;transition:border-color .15s}
.tech-card:hover{border-color:var(--border2)}
.tech-avatar{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:600;color:white;flex-shrink:0}
.tech-info{flex:1;min-width:0}
.tech-name{font-size:11px;font-weight:500;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tech-status{font-size:9px;color:var(--muted)}
.tech-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.dot-active{background:var(--green);box-shadow:0 0 6px var(--green);animation:pulse 2s infinite}
.dot-lunch{background:var(--amber)}
.dot-idle{background:var(--muted)}
.dot-travel{background:var(--accent);box-shadow:0 0 6px var(--accent);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}

/* === ALERTS === */
.alert-list{display:flex;flex-direction:column;gap:6px}
.alert-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;background:var(--bg3);border-left:2px solid;cursor:pointer;transition:background .15s}
.alert-item:hover{background:var(--hover)}
.alert-icon{font-size:13px;flex-shrink:0}
.alert-info{flex:1;min-width:0}
.alert-title{font-size:11px;font-weight:500;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.alert-sub{font-size:9px;color:var(--muted);margin-top:1px}
.alert-badge{font-size:9px;padding:2px 6px;border-radius:9px;font-weight:500;flex-shrink:0}
.alert-action{font-size:9px;padding:3px 8px;border-radius:9px;font-weight:500;flex-shrink:0;background:var(--accent);color:#fff;border:none;cursor:pointer;white-space:nowrap}
.alert-action:hover{filter:brightness(1.1)}
.a-red{border-color:var(--red)}.a-amber{border-color:var(--amber)}.a-blue{border-color:var(--accent)}.a-green{border-color:var(--green)}
.badge-red{background:rgba(240,96,96,.15);color:var(--red)}.badge-amber{background:rgba(245,165,36,.15);color:var(--amber)}.badge-blue{background:rgba(79,142,247,.15);color:var(--accent)}.badge-green{background:rgba(45,212,160,.15);color:var(--green)}
.pm-list{display:flex;flex-direction:column;gap:5px}
.pm-row{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;background:var(--bg3);cursor:pointer;border:1px solid transparent;transition:border-color .15s}
.pm-row:hover{border-color:var(--border2)}
.pm-due{font-size:9px;font-family:var(--mono);padding:2px 6px;border-radius:9px;font-weight:500;flex-shrink:0;width:56px;text-align:center}
.pm-info{flex:1;min-width:0}
.pm-asset{font-size:11px;font-weight:500;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pm-desc{font-size:9px;color:var(--muted)}
.pm-hours{font-size:9px;font-family:var(--mono);color:var(--muted);flex-shrink:0}
.feed-list{display:flex;flex-direction:column;gap:1px}
.feed-item{display:flex;gap:10px;padding:7px 0;border-bottom:1px solid var(--border)}
.feed-item:last-child{border-bottom:none}
.feed-time{font-size:9px;font-family:var(--mono);color:var(--muted);width:40px;flex-shrink:0;padding-top:1px}
.feed-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;margin-top:4px}
.feed-text{font-size:11px;color:var(--text);line-height:1.4;flex:1}
.feed-text span{color:var(--muted)}

/* === DISPATCH BOARD (scoped under #page-dispatch) === */
#page-dispatch{--dispatch-queue-w:420px}
#page-dispatch.active{display:flex;flex-direction:column;flex:1;min-height:0}
#page-dispatch .dispatch-shell{display:flex;flex-direction:column;height:calc(100vh - 92px);min-height:520px}
#page-dispatch .dispatch-toolbar{height:48px;background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);display:grid;grid-template-columns:var(--dispatch-queue-w) auto 1fr;align-items:center;padding:0 12px 0 0;gap:10px;flex-shrink:0;margin-bottom:10px}
#page-dispatch .dispatch-toolbar-left{display:flex;gap:10px;align-items:center;min-width:0;padding-left:12px;overflow:hidden}
#page-dispatch .company-sel,#page-dispatch .div-sel{font-size:11px;padding:5px 10px;border-radius:7px;border:1px solid var(--border2);background:var(--bg3);color:var(--text);cursor:pointer;outline:none;font-family:var(--font);min-width:0;flex:0 1 auto;text-overflow:ellipsis}
/* The pill is last in the row, so without this it is always the thing that loses. */
#page-dispatch .role-pill{flex-shrink:0}
#page-dispatch .company-sel option,#page-dispatch .div-sel option{background:var(--bg3)}
#page-dispatch .role-pill{font-size:10px;padding:4px 11px;border-radius:9px;font-weight:500;cursor:pointer;border:1px solid var(--border2);white-space:nowrap}
#page-dispatch .role-manager{background:rgba(79,142,247,.12);color:#4f8ef7;border-color:rgba(79,142,247,.3)}
#page-dispatch .role-lead{background:rgba(45,212,160,.12);color:#2dd4a0;border-color:rgba(45,212,160,.3)}
#page-dispatch .ml{display:flex;gap:6px;align-items:center;justify-self:end}
#page-dispatch .tbtn{font-size:11px;padding:5px 11px;border-radius:7px;border:1px solid var(--border2);background:transparent;color:var(--muted);cursor:pointer;transition:all .15s;white-space:nowrap;font-family:var(--font)}
#page-dispatch .tbtn:hover{color:var(--text);border-color:var(--border)}
#page-dispatch .tbtn-review{border-color:rgba(245,165,36,.4)!important;color:var(--amber)!important;position:relative}
#page-dispatch .rdot{position:absolute;top:-3px;right:-3px;width:7px;height:7px;background:var(--amber);border-radius:50%;border:1px solid var(--bg2)}
#page-dispatch .tbtn-primary{background:var(--accent);color:white;border-color:var(--accent)}
#page-dispatch .tbtn-primary:hover{opacity:.9;color:white}
#page-dispatch .dispatch-app{flex:1;display:flex;overflow:hidden;border:1px solid var(--border);border-radius:var(--radius);background:var(--bg2)}
#page-dispatch .master-queue{width:212px;flex-shrink:0;display:flex;flex-direction:column;border-right:1px solid var(--border)}
#page-dispatch .panel-hdr{display:flex;align-items:center;justify-content:space-between;padding:8px 10px;border-bottom:1px solid var(--border);flex-shrink:0}
#page-dispatch .panel-hdr-title{font-size:11px;font-weight:600;color:var(--text);display:flex;align-items:center;gap:6px}
.cbadge{font-size:9px;font-weight:600;background:var(--bg3);color:var(--muted);border-radius:9px;padding:1px 6px;border:1px solid var(--border);margin-left:6px;display:inline-block}
.cbadge:first-child{margin-left:0}
/* Notification-style modifiers — translucent tint + matching foreground.
   Used for "this panel has N items needing attention" counters, like the
   Needs Rescheduling tile. Much less loud than a solid amber/black pill. */
.cbadge-amber{background:rgba(245,165,36,.15);color:var(--amber);border-color:rgba(245,165,36,.25)}
.cbadge-red{background:rgba(240,96,96,.15);color:var(--red);border-color:rgba(240,96,96,.25)}
.cbadge-blue{background:rgba(79,142,247,.15);color:var(--accent);border-color:rgba(79,142,247,.25)}
/* Triage Inbox + Needs Rescheduling, side by side on the dashboard. Flex (not
   grid) on purpose: both panels hide themselves with display:none when empty,
   and a display:none flex child leaves the flow entirely — so whichever panel
   still has rows widens to the full row instead of stranding an empty column.
   flex-basis:0 makes the split even regardless of how long the rows are, and
   the default align-items:stretch is what matches their heights. */
.dash-triage-row{display:flex;align-items:stretch;gap:14px;margin-bottom:14px}
.dash-triage-row > .panel{flex:1 1 0;min-width:0}
@media (max-width:1100px){.dash-triage-row{flex-direction:column}}
/* Foreman team view banner — see src/features/dashboard/078-foreman-team-view.js */
.dash-team-banner{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin-bottom:12px;padding:9px 14px;border-radius:var(--radius);border:1px solid rgba(79,142,247,.3);background:rgba(79,142,247,.06);font-size:12px;color:var(--text)}
.dash-team-banner-warn{border-color:rgba(245,165,36,.35);background:rgba(245,165,36,.07)}
.dash-team-note{font-size:10px;color:var(--muted)}
/* Admin strip (Home, admins only) — see src/features/dashboard/077-admin-dashboard.js */
#role-admin{margin-bottom:18px}
.admin-dash-hdr{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:14px}
.admin-dash-title{font-family:var(--display);font-size:22px;font-weight:300;color:var(--text);margin-bottom:4px}
.admin-dash-title span{font-style:italic;color:var(--accent)}
.admin-dash-sub{font-size:11px;color:var(--muted)}
.admin-dash-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:14px}
.admin-tile{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);padding:16px 18px;position:relative;overflow:hidden;cursor:default}
.admin-tile[onclick]{cursor:pointer}
.admin-tile[onclick]:hover{border-color:var(--border2)}
.admin-tile::after{content:'';position:absolute;bottom:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--tile-accent,var(--accent)),transparent)}
.admin-tile-label{font-size:11px;color:var(--muted);margin-bottom:8px}
.admin-tile-value{font-size:30px;font-family:var(--mono);font-weight:600;color:var(--text);line-height:1;margin-bottom:8px}
.admin-tile-unit{font-size:14px;color:var(--muted);margin-left:1px}
.admin-tile-sub{font-size:10px;color:var(--muted);line-height:1.5}
.admin-dash-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px}
.admin-row{display:flex;align-items:center;gap:10px;padding:7px 0;border-top:1px dashed var(--border)}
.admin-row:first-child{border-top:0}
.admin-row-dot{width:7px;height:7px;border-radius:50%;flex:0 0 7px}
.admin-row-main{flex:1;min-width:0}
.admin-row-label{font-size:11px;color:var(--text);font-weight:500}
.admin-row-detail{font-size:10px;color:var(--muted);margin-top:2px;overflow-wrap:anywhere}
.admin-row-value{font-size:11px;font-family:var(--mono);color:var(--text);white-space:nowrap;text-align:right}
.admin-row-btn{margin-left:4px}
.admin-sub-row{display:flex;align-items:center;gap:10px;padding:5px 0 5px 17px;font-size:10px}
.admin-sub-name{color:var(--text);font-weight:500;min-width:110px}
.admin-sub-detail{flex:1;min-width:0;color:var(--muted)}
.admin-sub-detail a{color:var(--accent)}
.admin-sub-more{padding:4px 0 4px 17px;font-size:10px;color:var(--muted)}
.admin-dead-list{margin:2px 0 8px 17px;border-left:2px solid rgba(240,96,96,.3);padding-left:10px}
.admin-dead-item{padding:5px 0;font-size:10px;color:var(--text);border-top:1px dashed var(--border)}
.admin-dead-item:first-child{border-top:0}
.admin-dead-err{color:var(--red);margin-top:2px;overflow-wrap:anywhere}
.admin-dead-meta{color:var(--muted);margin-top:2px}
.admin-empty{font-size:11px;color:var(--muted);text-align:center;padding:12px}
@media (max-width:1100px){.admin-dash-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}.admin-dash-row{grid-template-columns:minmax(0,1fr)}}
@media (max-width:560px){.admin-dash-tiles{grid-template-columns:minmax(0,1fr)}.admin-dash-hdr,.admin-row,.admin-sub-row{flex-wrap:wrap}.admin-row-main{flex-basis:calc(100% - 17px)}.admin-row-value{margin-left:17px}}
#page-dispatch .panel-scroll{flex:1;overflow-y:auto;padding:5px}
#page-dispatch .panel-scroll::-webkit-scrollbar{width:3px}
#page-dispatch .panel-scroll::-webkit-scrollbar-thumb{background:var(--border2);border-radius:2px}
#page-dispatch .qcard{background:var(--bg2);border:1px solid var(--border);border-radius:8px;padding:7px 9px;margin-bottom:4px;cursor:grab;position:relative;transition:border-color .15s,transform .1s}
#page-dispatch .qcard:hover{border-color:var(--border2);transform:translateY(-1px)}
#page-dispatch .qcard.dragging{opacity:.35;transform:scale(.97)}
#page-dispatch .qcard-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:3px}
#page-dispatch .qcard-id{font-size:9px;font-family:var(--mono);color:var(--muted)}
#page-dispatch .qcard-title{font-size:11px;font-weight:500;color:var(--text);line-height:1.3;margin-bottom:3px}
#page-dispatch .qcard-asset{font-size:9px;color:var(--muted);margin-bottom:4px}
#page-dispatch .qcard-tags{display:flex;gap:3px;flex-wrap:wrap}
#page-dispatch .tag{font-size:9px;padding:1px 5px;border-radius:9px;background:var(--bg3);color:var(--muted);border:1px solid var(--border)}
#page-dispatch .tag-hi{background:rgba(240,96,96,.12);color:var(--red);border-color:rgba(240,96,96,.25)}
#page-dispatch .tag-lock{background:rgba(45,212,160,.1);color:var(--green);border-color:rgba(45,212,160,.22)}
#page-dispatch .badge{font-size:9px;padding:1px 6px;border-radius:9px;font-weight:500}
#page-dispatch .b-open{background:rgba(79,142,247,.14);color:#4f8ef7}
#page-dispatch .b-pending{background:rgba(245,165,36,.14);color:var(--amber)}
#page-dispatch .b-prog{background:rgba(45,212,160,.14);color:var(--green)}
#page-dispatch .b-parts{background:rgba(155,125,234,.14);color:var(--purple)}
#page-dispatch .b-review{background:rgba(245,165,36,.14);color:var(--amber)}
#page-dispatch .team-board{flex:1;display:flex;flex-direction:column;overflow:hidden}
#page-dispatch .team-board-hdr{display:flex;align-items:center;justify-content:space-between;padding:7px 12px;border-bottom:1px solid var(--border);flex-shrink:0}
#page-dispatch .team-board-title{font-size:11px;font-weight:600;color:var(--text)}
#page-dispatch .team-board-hint{font-size:9px;color:var(--muted)}
/* Queue sort/filter controls (Master Queue, Week/Day queue, Team Board) */
#page-dispatch .dq-tools{display:flex;flex-direction:column;gap:4px;padding:6px 8px;border-bottom:1px solid var(--border);flex-shrink:0}
#page-dispatch .dq-row{display:flex;gap:4px;min-width:0}
#page-dispatch .dq-search,#page-dispatch .dq-sel{font-size:10px;padding:4px 7px;border-radius:6px;border:1px solid var(--border2);background:var(--bg3);color:var(--text);outline:none;font-family:var(--font);min-width:0}
#page-dispatch .dq-search{width:100%;box-sizing:border-box}
#page-dispatch .dq-sel{flex:1 1 0;cursor:pointer;text-overflow:ellipsis}
#page-dispatch .dq-sel option{background:var(--bg3)}
#page-dispatch .dq-search:focus,#page-dispatch .dq-sel:focus{border-color:rgba(79,142,247,.6)}
#page-dispatch .dq-tools-inline{flex-direction:row;align-items:center;padding:0;border:0;margin-left:auto;gap:4px}
#page-dispatch .dq-tools-inline .dq-search{width:170px}
#page-dispatch .dq-tools-inline .dq-sel{flex:0 1 auto}
#page-dispatch .team-board-hdr{gap:10px}
@media (max-width:1100px){#page-dispatch .team-board-hint{display:none}}
#page-dispatch .team-lanes{flex:1;display:flex;overflow-x:auto;overflow-y:hidden;padding:8px;gap:7px}
#page-dispatch .team-lanes::-webkit-scrollbar{height:4px}
#page-dispatch .team-lanes::-webkit-scrollbar-thumb{background:var(--border2);border-radius:2px}
#page-dispatch .lane{flex:1 1 158px;min-width:140px;display:flex;flex-direction:column;background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;transition:border-color .2s,box-shadow .2s,flex-basis .25s ease}
#page-dispatch .lane.active-lane{border-color:rgba(79,142,247,.45);box-shadow:0 0 0 2px rgba(79,142,247,.12)}
#page-dispatch .lane.dov-lane{border-color:var(--green);background:rgba(45,212,160,.06)}
/* Machine-raised critical work (telematics watchdog). Red fill + left border so a dead
   controller reads as urgent at a glance, without relying on the tiny priority tag. */
#page-dispatch .lcard.lcard-critical{background:rgba(224,72,76,.13);border-left-color:#e0484c!important;box-shadow:inset 0 0 0 1px rgba(224,72,76,.28)}
#page-dispatch .lcard.lcard-critical .lc-id{color:#ff8a8d}
#page-dispatch .lane-hdr{padding:8px 10px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;cursor:pointer;transition:background .15s;flex-shrink:0}
#page-dispatch .lane-hdr:hover{background:var(--hover)}
#page-dispatch .lane-hdr.active-hdr{background:rgba(79,142,247,.06)}
#page-dispatch .lane-name{font-size:11px;font-weight:600;color:var(--text);display:flex;align-items:center;gap:6px}
#page-dispatch .lane-dot{width:9px;height:9px;border-radius:3px;flex-shrink:0}
#page-dispatch .lane-meta{display:flex;align-items:center;gap:5px}
#page-dispatch .lane-cnt{font-size:9px;padding:1px 5px;border-radius:9px;background:var(--bg2);color:var(--muted);border:1px solid var(--border)}
#page-dispatch .lane-arrow{font-size:9px;color:var(--muted);transition:transform .2s,color .2s}
#page-dispatch .lane-arrow.open{transform:rotate(90deg);color:var(--accent)}
#page-dispatch .lane-body{flex:1;overflow-y:auto;padding:5px;min-height:60px}
#page-dispatch .lane-body::-webkit-scrollbar{width:3px}
#page-dispatch .lane-body::-webkit-scrollbar-thumb{background:var(--border2);border-radius:2px}
/* Vendor lane: "Needs vendor" group — WOs sent to Vendor with no vendor picked yet. */
#page-dispatch .lane-needs-vendor{border:1px dashed rgba(245,165,36,.55);background:rgba(245,165,36,.07);border-radius:7px;padding:4px 4px 0;margin-bottom:6px}
#page-dispatch .lnv-hdr{display:flex;align-items:center;gap:5px;font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--text);padding:1px 2px 4px}
#page-dispatch .lnv-hdr .lane-cnt{margin-left:auto;text-transform:none;letter-spacing:0;font-weight:400}
#page-dispatch .lnv-dot{width:7px;height:7px;border-radius:50%;background:var(--amber);flex-shrink:0}
#page-dispatch .lane-empty{text-align:center;padding:14px 8px;color:var(--muted);font-size:10px;line-height:1.7;border:1px dashed var(--border);border-radius:7px;margin:3px}
#page-dispatch .lcard{background:var(--bg2);border:1px solid var(--border);border-radius:7px;padding:6px 8px;margin-bottom:4px;cursor:grab;border-left:2px solid;position:relative;transition:border-color .15s}
#page-dispatch .lcard:hover{border-color:var(--border2)}
#page-dispatch .lcard:hover .lc-rm{opacity:1}
#page-dispatch .lc-rm{position:absolute;top:4px;right:6px;font-size:11px;cursor:pointer;color:var(--muted);opacity:0;background:none;border:none;line-height:1;transition:opacity .15s}
#page-dispatch .lc-id{font-size:8px;font-family:var(--mono);color:var(--muted);margin-bottom:2px}
#page-dispatch .lc-title{font-size:10px;font-weight:500;color:var(--text);line-height:1.3;padding-right:12px;margin-bottom:2px}
#page-dispatch .lc-asset{font-size:9px;color:var(--muted);margin-bottom:5px}
#page-dispatch .lc-assign{font-size:9px;padding:3px 7px;border-radius:9px;border:1px solid var(--border2);background:transparent;color:var(--muted);cursor:pointer;display:block;text-align:center;transition:all .15s;width:100%;font-family:var(--font)}
#page-dispatch .lc-assign:hover{border-color:var(--accent);color:var(--accent);background:rgba(79,142,247,.06)}
#page-dispatch .tech-cal{width:0;flex-shrink:0;border-left:1px solid var(--border);background:var(--bg2);overflow:hidden;transition:width .25s ease;display:flex;flex-direction:column}
#page-dispatch .tech-cal.open{width:calc(100% - var(--dispatch-queue-w))}
#page-dispatch .tcal-hdr{padding:8px 12px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:8px;flex-shrink:0}
#page-dispatch .tcal-pill{font-size:10px;padding:2px 9px;border-radius:9px;font-weight:600;color:white;flex-shrink:0}
#page-dispatch .tcal-title{font-size:11px;font-weight:600;color:var(--text);flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#page-dispatch .tcal-close{font-size:16px;cursor:pointer;color:var(--muted);background:none;border:none;padding:0;line-height:1;flex-shrink:0}
#page-dispatch .tcal-close:hover{color:var(--text)}
#page-dispatch .tcal-add{font-size:10px;padding:3px 9px;flex-shrink:0}
#page-dispatch .dav-list{margin-top:8px;max-height:46vh;overflow-y:auto;border:1px solid var(--border);border-radius:7px}
#page-dispatch .dav-row{display:flex;align-items:center;gap:8px;width:100%;text-align:left;padding:7px 10px;border:none;border-bottom:1px solid var(--border);background:transparent;color:var(--text);font-size:11px;cursor:pointer;font-family:var(--font)}
#page-dispatch .dav-row:last-child{border-bottom:none}
#page-dispatch .dav-row:hover{background:var(--bg3)}
#page-dispatch .dav-row:disabled{opacity:.5;cursor:default}
#page-dispatch .dav-row .dav-num{margin-left:auto;font-family:var(--mono);font-size:10px;color:var(--muted)}
#page-dispatch .tcal-nav{display:flex;align-items:center;gap:6px;padding:6px 12px;border-bottom:1px solid var(--border);flex-shrink:0}
#page-dispatch .cnav{background:transparent;border:1px solid var(--border2);border-radius:6px;cursor:pointer;font-size:14px;color:var(--muted);padding:1px 8px;line-height:1.5;transition:all .15s;font-family:var(--font)}
#page-dispatch .cnav:hover{color:var(--text);border-color:var(--border)}
#page-dispatch .crange{font-size:11px;font-weight:500;color:var(--text);flex:1;text-align:center}
#page-dispatch .tcal-body{flex:1;overflow:auto;padding:6px 10px}
#page-dispatch .tcal-body::-webkit-scrollbar{width:3px;height:3px}
#page-dispatch .tcal-body::-webkit-scrollbar-thumb{background:var(--border2);border-radius:2px}
#page-dispatch .cal-week-hdr{display:flex;gap:3px;margin-bottom:4px;padding-left:50px}
#page-dispatch .cal-day-lbl{flex:1;font-size:9px;font-weight:500;color:var(--muted);text-align:center;line-height:1.5}
#page-dispatch .cal-day-lbl.today-col{color:var(--text)}
#page-dispatch .cal-tech-row{display:flex;gap:3px;margin-bottom:3px}
#page-dispatch .cal-tech-lbl{width:46px;flex-shrink:0;font-size:9px;color:var(--muted);padding-top:5px;text-align:right;padding-right:5px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
#page-dispatch .cal-tech-cols{display:flex;gap:3px;flex:1}
#page-dispatch .cal-cell{flex:1;background:var(--bg3);border:1px solid var(--border);border-radius:6px;padding:3px;min-height:42px}
#page-dispatch .cal-cell.dov{border-color:var(--green);background:rgba(45,212,160,.06)}
#page-dispatch .cal-cell.today-cell{border-color:rgba(79,142,247,.35)}
#page-dispatch .sch{border-radius:4px;padding:3px 5px;margin-bottom:2px;font-size:9px;cursor:grab;border-left:2px solid;background:var(--bg2);position:relative}
#page-dispatch .sch:hover .sch-rm{opacity:1}
#page-dispatch .sch-rm{position:absolute;top:2px;right:3px;font-size:8px;cursor:pointer;color:var(--muted);opacity:0;background:none;border:none;line-height:1}
#page-dispatch .sch-title{font-weight:500;color:var(--text);line-height:1.3;padding-right:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#page-dispatch .sch-sub{color:var(--muted);font-size:8px;margin-top:1px}
#page-dispatch .sch-actions{display:flex;gap:2px;margin-top:3px;flex-wrap:wrap}
#page-dispatch .sch-btn{font-size:7px;padding:1px 5px;border-radius:9px;border:1px solid var(--border2);background:transparent;color:var(--muted);cursor:pointer;transition:all .15s;font-family:var(--font)}
#page-dispatch .sch-btn:hover{background:var(--bg3)}
#page-dispatch .sch-btn-send{border-color:rgba(79,142,247,.45);color:var(--accent);margin-left:3px}
#page-dispatch .sch-btn-armed{background:var(--accent);color:#fff;border-color:var(--accent)}
#page-dispatch .sch-btn-sent{border-color:rgba(45,212,160,.35);color:var(--green);margin-left:3px;cursor:default}
#page-dispatch .sch-btn-complete{border-color:rgba(45,212,160,.35);color:var(--green)}
#page-dispatch .sch-btn-flag{border-color:rgba(245,165,36,.35);color:var(--amber)}
#page-dispatch .sch-btn-parts{border-color:rgba(155,125,234,.35);color:var(--purple)}
#page-dispatch .sch-flagged{border-left-color:var(--amber)!important;background:rgba(245,165,36,.07)!important}
/* ── Visit history ────────────────────────────────────────────────────────
   A superseded bubble stays on its own day, dimmed, saying where the work went.
   Showing it is the point of the visit model: the board used to blank Tuesday the
   moment a card was dragged to Thursday. Not grabbable — history is not draggable. */
#page-dispatch .sch-superseded,#page-dispatch .cv-sch.sch-superseded{opacity:.5;cursor:default;border-style:dashed}
#page-dispatch .sch-superseded .sch-title,#page-dispatch .cv-sch.sch-superseded .cv-sch-title{text-decoration:line-through;color:var(--muted)}
#page-dispatch .sch-moved{font-size:8px;color:var(--muted);font-style:italic;margin-top:2px}
/* A day someone actually clocked in on. Solid left edge, not draggable. */
#page-dispatch .sch-attended,#page-dispatch .cv-sch.sch-attended{cursor:default;box-shadow:inset 2px 0 0 var(--green)}
/* Rolled forward automatically because the previous day went unworked. Marked so an
   automatic bubble is never mistaken for one a dispatcher placed. */
#page-dispatch .sch-carryover,#page-dispatch .cv-sch.sch-carryover{border-top:1px dashed var(--amber)}

/* ── Parts-arrival mark ───────────────────────────────────────────────────
   Not a visit: no drag, no clock, no actions. OUTLINE carries receipt state
   (red none / yellow partial / green all) and the TEXT carries timing, so a bubble
   can say "nothing has arrived" and "already late" at the same time — which one
   colour cannot do. Greyed lettering until everything is in, normal once it is. */
#page-dispatch .parts-mark{border-radius:5px;padding:4px 7px;margin-bottom:3px;font-size:10px;
  background:var(--bg2);border:1px dashed;cursor:default;user-select:none}
#page-dispatch .parts-mark .pm-hdr{display:flex;align-items:center;gap:4px;font-size:8px;
  text-transform:uppercase;letter-spacing:.03em;font-weight:600}
#page-dispatch .parts-mark .pm-dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
#page-dispatch .parts-mark .pm-title{line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
#page-dispatch .parts-mark .pm-sub{font-size:8px;color:var(--muted);font-family:var(--mono)}
/* Nothing has arrived — the work cannot start. */
#page-dispatch .parts-mark.pm-none{border-color:var(--red);color:var(--red)}
#page-dispatch .parts-mark.pm-none .pm-title{color:var(--muted)}
/* Some of it is here. Still not workable. */
#page-dispatch .parts-mark.pm-partial{border-color:var(--amber);color:var(--amber)}
#page-dispatch .parts-mark.pm-partial .pm-title{color:var(--muted)}
/* Everything landed: solid border and full-strength text — this one reads as "go". */
#page-dispatch .parts-mark.pm-all{border-style:solid;border-color:var(--green);color:var(--green)}
#page-dispatch .parts-mark.pm-all .pm-title{color:var(--text);font-weight:500}
#page-dispatch .dispatch-status{height:26px;display:flex;align-items:center;padding:0 12px;font-size:10px;color:var(--muted);flex-shrink:0;margin-top:6px}
#page-dispatch .status-dot{width:6px;height:6px;border-radius:50%;background:var(--green);margin-right:6px;animation:dpulse 2s infinite}
@keyframes dpulse{0%,100%{opacity:1}50%{opacity:.4}}
#page-dispatch .empty-state{text-align:center;padding:24px;color:var(--muted);font-size:11px;line-height:1.8}

/* View mode toggle (All / Week / Day) */
#page-dispatch .view-toggle{display:flex;gap:2px;background:var(--bg3);border-radius:7px;padding:2px;border:1px solid var(--border)}
#page-dispatch .vt-btn{font-size:11px;padding:4px 11px;border-radius:6px;border:none;background:transparent;color:var(--muted);cursor:pointer;font-family:var(--font);font-weight:500}
#page-dispatch .vt-btn.active{background:var(--bg2);color:var(--text);box-shadow:0 1px 3px rgba(0,0,0,.25)}
#page-dispatch .vt-btn:hover:not(.active){color:var(--text)}

/* Combined Queue + Calendar view (Week / Day) */
#page-dispatch .combined-view{flex:1;display:flex;overflow:hidden}
#page-dispatch .cv-queue{width:var(--dispatch-queue-w);flex-shrink:0;display:flex;flex-direction:column;border-right:1px solid var(--border);background:var(--bg2)}
#page-dispatch .cv-cal{flex:1;display:flex;flex-direction:column;overflow:hidden;background:var(--bg2)}
#page-dispatch .cv-cal-hdr{padding:8px 12px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px;flex-shrink:0}
#page-dispatch .cv-range{font-size:12px;font-weight:600;color:var(--text);min-width:130px;text-align:center}
#page-dispatch .cv-member-sel{font-size:11px;padding:4px 10px;border-radius:7px;border:1px solid var(--border2);background:var(--bg3);color:var(--text);outline:none;font-family:var(--font);margin-left:auto}
#page-dispatch .cv-cal-body{flex:1;overflow:auto;padding:10px 12px}
#page-dispatch .cv-cal-body::-webkit-scrollbar{width:4px;height:4px}
#page-dispatch .cv-cal-body::-webkit-scrollbar-thumb{background:var(--border2);border-radius:2px}

#page-dispatch .cv-week-grid{display:grid;grid-template-columns:90px repeat(7,minmax(120px,1fr));gap:5px}
#page-dispatch .cv-week-grid .cv-hdr-cell{font-size:10px;font-weight:600;color:var(--muted);text-align:center;padding:6px 4px}
#page-dispatch .cv-week-grid .cv-hdr-cell.today-col{color:var(--accent)}
#page-dispatch .cv-week-grid .cv-hdr-cell .cv-d{font-size:14px;font-family:var(--mono);color:var(--text);font-weight:500;display:block;margin-top:2px}
#page-dispatch .cv-week-grid .cv-tech-name{font-size:11px;font-weight:500;color:var(--text);padding:8px 8px 8px 0;text-align:right;display:flex;align-items:center;justify-content:flex-end}
#page-dispatch .cv-week-grid .cv-cell{background:var(--bg3);border:1px solid var(--border);border-radius:8px;padding:4px;min-height:64px;transition:border-color .15s,background .15s}
#page-dispatch .cv-week-grid .cv-cell.dov{border-color:var(--green);background:rgba(45,212,160,.07)}
#page-dispatch .cv-week-grid .cv-cell.today-cell{border-color:rgba(79,142,247,.35)}

#page-dispatch .cv-day-grid{display:flex;flex-direction:column;gap:8px}
#page-dispatch .cv-day-row{display:flex;gap:10px;align-items:stretch}
#page-dispatch .cv-day-name{width:90px;flex-shrink:0;font-size:11px;font-weight:500;color:var(--text);padding:10px 8px 0 0;text-align:right}
#page-dispatch .cv-day-cell{flex:1;background:var(--bg3);border:1px solid var(--border);border-radius:8px;padding:8px;min-height:70px;transition:border-color .15s,background .15s}
#page-dispatch .cv-day-cell.dov{border-color:var(--green);background:rgba(45,212,160,.07)}
#page-dispatch .cv-day-cell.today-cell{border-color:rgba(79,142,247,.35)}

#page-dispatch .cv-sch{background:var(--bg2);border:1px solid var(--border);border-left:3px solid;border-radius:5px;padding:5px 7px;margin-bottom:3px;font-size:10px;cursor:grab;position:relative;transition:border-color .15s}
#page-dispatch .cv-sch:hover{border-color:var(--border2)}
#page-dispatch .cv-sch:hover .cv-sch-rm{opacity:1}
#page-dispatch .cv-sch.dragging{opacity:.4}
#page-dispatch .cv-sch.dov{border-top:2px solid var(--accent)}
#page-dispatch .cv-sch-rm{position:absolute;top:2px;right:4px;font-size:11px;cursor:pointer;color:var(--muted);opacity:0;background:none;border:none;line-height:1;transition:opacity .15s}
#page-dispatch .cv-sch-id{font-size:8px;font-family:var(--mono);color:var(--muted)}
#page-dispatch .cv-sch-title{font-weight:500;color:var(--text);line-height:1.3;padding-right:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#page-dispatch .cv-sch-meta{display:flex;gap:4px;margin-top:2px;align-items:center;font-size:8px;color:var(--muted)}
#page-dispatch .cv-sch-pri{font-size:8px;font-weight:600;padding:1px 5px;border-radius:8px}
#page-dispatch .cv-sch-pri-high{background:rgba(240,96,96,.12);color:var(--red)}
#page-dispatch .cv-sch-pri-med{background:rgba(79,142,247,.12);color:var(--accent)}
#page-dispatch .cv-sch-pri-low{background:rgba(107,109,125,.15);color:var(--muted)}
#page-dispatch .pri-high{border-left-color:var(--red)}
#page-dispatch .pri-med{border-left-color:var(--accent)}
#page-dispatch .pri-low{border-left-color:var(--muted)}

/* Day view hourly grid (5am – 9pm) — WOs layer over the hour cells via grid-row span */
#page-dispatch .cv-day-hourly{display:grid;gap:3px;grid-template-rows:48px repeat(17,46px);position:relative}
#page-dispatch .cv-day-hourly .hd-empty,#page-dispatch .cv-day-hourly .hd-tech{position:sticky;top:0;background:var(--bg2);z-index:5;padding:6px 6px;border-bottom:1px solid var(--border);display:flex;flex-direction:column;justify-content:center}
#page-dispatch .cv-day-hourly .hd-tech{font-size:11px;font-weight:600;color:var(--text);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#page-dispatch .cv-day-hourly .hd-tech .hd-team{display:block;font-size:9px;color:var(--muted);font-weight:400;margin-top:1px}
#page-dispatch .cv-day-hourly .hour-lbl{font-size:10px;color:var(--muted);text-align:right;padding:4px 8px 0 0;font-family:var(--mono);white-space:nowrap;z-index:1}
#page-dispatch .cv-day-hourly .hour-cell{background:var(--bg3);border:1px solid var(--border);border-radius:5px;transition:border-color .15s,background .15s;z-index:1}
#page-dispatch .cv-day-hourly .hour-cell.dov{border-color:var(--green);background:rgba(45,212,160,.1)}
#page-dispatch .cv-day-hourly .hour-cell.today-cell{border-color:rgba(79,142,247,.3)}
/* Scheduled WO cards as grid overlays spanning their duration */
#page-dispatch .cv-day-hourly .sch-block{z-index:3;margin:0;cursor:grab;background:var(--bg2);border:1px solid var(--border);border-left:3px solid;border-radius:6px;padding:6px 8px;font-size:10px;overflow:hidden;position:relative;display:flex;flex-direction:column;gap:3px;box-shadow:0 2px 8px rgba(0,0,0,.25)}
#page-dispatch .cv-day-hourly .sch-block:hover{border-color:var(--border2);box-shadow:0 4px 12px rgba(0,0,0,.35)}
#page-dispatch .cv-day-hourly .sch-block:hover .cv-sch-rm{opacity:1}
#page-dispatch .cv-day-hourly .sch-block.dragging{opacity:.4}
#page-dispatch .cv-day-hourly .sch-block.flagged{border-left-color:var(--amber)!important;background:rgba(245,165,36,.06)}
#page-dispatch .cv-day-hourly .sch-block.has-overrun{border-left-color:var(--amber)!important;background:rgba(245,165,36,.07)}
#page-dispatch .cv-day-hourly .sch-block .overrun-badge{font-size:9px;padding:1px 6px;border-radius:9px;background:rgba(245,165,36,.18);color:var(--amber);font-weight:500;display:inline-flex;align-items:center;gap:3px;align-self:flex-start}
#page-dispatch .cv-day-hourly .sch-block .ext-row{display:flex;gap:4px;margin-top:auto;opacity:0;transition:opacity .15s;flex-wrap:wrap}
#page-dispatch .cv-day-hourly .sch-block:hover .ext-row{opacity:1}
#page-dispatch .cv-day-hourly .sch-block .ext-btn{font-size:8px;padding:2px 6px;border:1px solid var(--border2);background:var(--bg3);color:var(--muted);border-radius:9px;cursor:pointer;font-family:var(--font);font-weight:500}
#page-dispatch .cv-day-hourly .sch-block .ext-btn:hover{border-color:var(--amber);color:var(--amber)}

/* Notification bell */
#page-dispatch .tbtn-notif{border-color:rgba(155,125,234,.4)!important;color:var(--purple)!important;position:relative}
#page-dispatch .ndot{position:absolute;top:-3px;right:-3px;width:7px;height:7px;background:var(--purple);border-radius:50%;border:1px solid var(--bg2)}

/* Dispatch modal (lives at top of #page-dispatch but uses position:fixed) */
/* z-index sits ABOVE jobDetailModalLayer (z-index:8000) so any edit modal
   launched from inside the job detail modal (Edit fields / Set geofence /
   etc.) renders on top instead of being hidden behind it. Stays below
   toasts (9000) and lightboxes (9999). */
.modal-layer{position:fixed;inset:0;z-index:8500;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center}
.modal{background:var(--bg2);border-radius:14px;border:1px solid var(--border2);padding:18px;width:380px;max-height:80vh;overflow-y:auto;color:var(--text)}
.modal h3{font-size:14px;font-weight:600;margin-bottom:12px;color:var(--text)}
.modal label{font-size:10px;color:var(--muted);display:block;margin-top:8px;margin-bottom:3px;font-weight:500;text-transform:uppercase;letter-spacing:.04em}
.modal input,.modal select{width:100%;font-size:12px;padding:7px 10px;border-radius:7px;border:1px solid var(--border2);background:var(--bg3);color:var(--text);font-family:var(--font);outline:none}
.modal input:focus,.modal select:focus{border-color:var(--accent)}
.modal .note{font-size:10px;color:var(--muted);margin-top:8px;line-height:1.6;background:var(--bg3);padding:8px 10px;border-radius:7px}
.mbtns{display:flex;gap:6px;margin-top:14px;justify-content:flex-end}
.mbtns button{font-size:11px;padding:6px 14px;border-radius:7px;border:1px solid var(--border2);background:transparent;color:var(--text);cursor:pointer;font-family:var(--font)}
.mbtns .primary{background:var(--accent);color:white;border-color:var(--accent)}
.review-card{border:1px solid rgba(245,165,36,.3);border-radius:8px;padding:10px 12px;margin-bottom:7px;background:rgba(245,165,36,.06)}
.ra-btn{font-size:10px;padding:4px 11px;border-radius:7px;border:1px solid;cursor:pointer;background:transparent;margin-right:5px;font-family:var(--font)}
.ra-approve{border-color:rgba(45,212,160,.4);color:var(--green)}
.ra-reject{border-color:rgba(240,96,96,.4);color:var(--red)}

/* === EQUIPMENT SHOP (scoped under #page-shop-*) === */
#page-shop-board{flex-direction:column;min-height:0}
#page-shop-board.active{display:flex}
#page-shop-board .shop-toolbar{display:flex;align-items:center;gap:10px;margin-bottom:10px;flex-wrap:wrap}
#page-shop-board .shop-title{font-size:18px;font-weight:600;color:var(--text);margin-right:auto}
#page-shop-board .shop-refresh{font-size:11px;color:var(--muted)}
#page-shop-board .shop-legend{display:flex;gap:14px;font-size:11px;color:var(--muted);align-items:center;padding:6px 12px;background:var(--bg2);border:1px solid var(--border);border-radius:7px;margin-bottom:10px;flex-wrap:wrap}
#page-shop-board .shop-legend-item{display:flex;align-items:center;gap:5px}
#page-shop-board .shop-legend-dot{width:9px;height:9px;border-radius:50%}
#page-shop-board .shop-board{flex:1;display:grid;grid-template-columns:repeat(7,minmax(180px,1fr));gap:8px;overflow-x:auto;min-height:480px}
#page-shop-board .shop-lane{background:var(--bg2);border:1px solid var(--border);border-radius:9px;display:flex;flex-direction:column;min-height:0;overflow:hidden}
#page-shop-board .shop-lane-hdr{padding:9px 11px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:7px;flex-shrink:0;background:var(--bg3)}
#page-shop-board .shop-lane-dot{width:9px;height:9px;border-radius:50%}
#page-shop-board .shop-lane-name{font-size:11px;font-weight:600;color:var(--text);text-transform:uppercase;letter-spacing:.04em;flex:1}
#page-shop-board .shop-lane-cnt{font-size:10px;font-weight:600;color:var(--muted);background:var(--bg2);padding:2px 8px;border-radius:9px;border:1px solid var(--border)}
#page-shop-board .shop-lane-body{flex:1;overflow-y:auto;padding:7px;display:flex;flex-direction:column;gap:6px}
#page-shop-board .shop-lane-body::-webkit-scrollbar{width:3px}
#page-shop-board .shop-lane-body::-webkit-scrollbar-thumb{background:var(--border2);border-radius:2px}
#page-shop-board .shop-card{background:var(--bg3);border:1px solid var(--border);border-radius:7px;padding:8px 10px;cursor:grab;transition:border-color .15s,transform .1s}
#page-shop-board .shop-card:hover{border-color:var(--border2);transform:translateY(-1px)}
#page-shop-board .shop-card.dragging{opacity:.4;transform:scale(.97)}
#page-shop-board .shop-card-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:3px}
#page-shop-board .shop-card-unit{font-size:11px;font-weight:600;color:var(--text);font-family:var(--mono)}
#page-shop-board .shop-card-time{font-size:9px;color:var(--muted)}
#page-shop-board .shop-card-model{font-size:11px;color:var(--text);margin-bottom:3px;line-height:1.25}
#page-shop-board .shop-card-meta{font-size:9px;color:var(--muted);margin-bottom:4px}
#page-shop-board .shop-card-tags{display:flex;flex-wrap:wrap;gap:3px}
#page-shop-board .shop-tag{font-size:9px;padding:1px 6px;border-radius:9px;background:var(--bg2);color:var(--muted);border:1px solid var(--border)}
#page-shop-board .shop-tag-def{background:rgba(240,96,96,.12);color:var(--red);border-color:rgba(240,96,96,.25)}
#page-shop-board .shop-tag-pm{background:rgba(245,165,36,.12);color:var(--amber);border-color:rgba(245,165,36,.25)}
#page-shop-board .shop-tag-gps{background:rgba(79,142,247,.12);color:var(--accent);border-color:rgba(79,142,247,.25)}
#page-shop-board .shop-tag-pri{background:rgba(155,125,234,.12);color:#9b7dea;border-color:rgba(155,125,234,.25)}
#page-shop-board .shop-tag-rdy{background:rgba(45,212,160,.14);color:var(--green);border-color:rgba(45,212,160,.25);font-weight:600}
#page-shop-board .shop-lane.drop-target{background:var(--bg-elev,#1f2532);outline:2px dashed var(--accent);outline-offset:-2px}
#page-shop-board .shop-empty{font-size:10px;color:var(--muted);text-align:center;padding:18px 6px;font-style:italic}
#page-shop-board .shop-drop-line{height:2px;background:var(--accent);border-radius:2px;margin:1px 2px;box-shadow:0 0 4px var(--accent);pointer-events:none}

/* TV mode — hide chrome, scale fonts, expand lanes */
body.shop-tv-mode .sidebar,
body.shop-tv-mode .topbar{display:none!important}
body.shop-tv-mode .content{margin-left:0!important;padding:14px 18px}
body.shop-tv-mode #page-shop-board .shop-title{font-size:30px}
body.shop-tv-mode #page-shop-board .shop-board{grid-template-columns:repeat(7,minmax(260px,1fr));gap:12px}
body.shop-tv-mode #page-shop-board .shop-lane-name{font-size:15px}
body.shop-tv-mode #page-shop-board .shop-lane-cnt{font-size:14px;padding:3px 12px}
body.shop-tv-mode #page-shop-board .shop-card{padding:14px 16px}
body.shop-tv-mode #page-shop-board .shop-card-unit{font-size:18px}
body.shop-tv-mode #page-shop-board .shop-card-model{font-size:16px}
body.shop-tv-mode #page-shop-board .shop-card-meta{font-size:12px}
body.shop-tv-mode #page-shop-board .shop-tag{font-size:11px;padding:2px 9px}

/* Mobile intake form */

/* Desktop "+ New Intake" modal — reuses the mobile intake field look inside a dialog */
#shopIntakeModalLayer .modal{width:480px;max-height:88vh;overflow-y:auto}
#shopIntakeModalLayer .mi-field{margin-bottom:12px}
#shopIntakeModalLayer .mi-label{font-size:10px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin-bottom:4px;font-weight:600;display:block}
#shopIntakeModalLayer .mi-input,
#shopIntakeModalLayer .mi-select,
#shopIntakeModalLayer .mi-textarea{width:100%;font-size:13px;padding:8px 10px;border:1px solid var(--border2);border-radius:7px;background:var(--bg3);color:var(--text);font-family:var(--font);box-sizing:border-box}
#shopIntakeModalLayer .mi-textarea{min-height:64px;resize:vertical}
#shopIntakeModalLayer .mi-input:focus,
#shopIntakeModalLayer .mi-select:focus,
#shopIntakeModalLayer .mi-textarea:focus{outline:none;border-color:var(--accent)}
#shopIntakeModalLayer .mi-check{display:flex;align-items:center;gap:9px;padding:9px 11px;background:var(--bg3);border:1px solid var(--border2);border-radius:7px;cursor:pointer;font-size:12px;color:var(--text)}
#shopIntakeModalLayer .mi-check input{width:16px;height:16px;margin:0}
#shopIntakeModalLayer .mi-check.damage-active{border-color:rgba(240,96,96,.45);background:rgba(240,96,96,.06)}
#shopIntakeModalLayer .mi-damage-block{margin-top:9px;display:none}
#shopIntakeModalLayer .mi-damage-block.active{display:block}
#shopIntakeModalLayer .mi-photos{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
#shopIntakeModalLayer .mi-photo{aspect-ratio:1;background:var(--bg3);border:1px dashed var(--border2);border-radius:7px;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:22px;cursor:pointer;background-size:cover;background-position:center;position:relative;overflow:hidden}
#shopIntakeModalLayer .mi-photo-del{position:absolute;top:3px;right:3px;background:rgba(0,0,0,.7);color:#fff;width:18px;height:18px;border-radius:50%;font-size:11px;display:flex;align-items:center;justify-content:center;cursor:pointer}
#shopIntakeModalLayer .mi-help{font-size:10px;color:var(--muted);margin-top:4px}

/* Intake detail modal */
#shopIntakeDetailLayer .shop-detail-row{display:flex;justify-content:space-between;gap:14px;padding:7px 0;border-bottom:1px solid var(--border);font-size:12px}
#shopIntakeDetailLayer .shop-detail-row:last-of-type{border-bottom:none}
#shopIntakeDetailLayer .shop-detail-k{color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.04em;font-weight:600}
#shopIntakeDetailLayer .shop-detail-v{color:var(--text);text-align:right}
#shopIntakeDetailLayer .shop-detail-notes{font-size:12px;color:var(--text);white-space:pre-wrap;background:var(--bg3);padding:8px 10px;border-radius:6px;margin-top:4px}
#shopIntakeDetailLayer .shop-detail-photos{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:6px}
#shopIntakeDetailLayer .shop-detail-photos img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:6px;border:1px solid var(--border);cursor:pointer}

/* Setup → Telematics integration screen */
#page-setup-integrations .tel-provider-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:12px}
#page-setup-integrations .tel-provider-card{background:var(--bg2);border:1px solid var(--border);border-radius:9px;padding:14px}
#page-setup-integrations .tel-badge{margin-left:auto;font-size:10px;font-weight:600;padding:2px 9px;border-radius:9px;background:var(--bg3);color:var(--muted);border:1px solid var(--border);text-transform:uppercase;letter-spacing:.04em}
#page-setup-integrations .tel-kv{display:flex;justify-content:space-between;gap:10px;font-size:11px;padding:3px 0;color:var(--text)}
#page-setup-integrations .tel-kv > span:first-child{color:var(--muted);text-transform:uppercase;letter-spacing:.04em;font-size:10px;font-weight:600;white-space:nowrap}
#page-setup-integrations .tel-kv > span:last-child{text-align:right}
#page-setup-integrations .tel-activity-row{display:flex;gap:10px;align-items:flex-start;padding:9px 4px;border-bottom:1px solid var(--border)}
#page-setup-integrations .tel-activity-row:last-child{border-bottom:none}

/* Intake queue + inspections list scaffolding */
#page-shop-intake .shop-table-wrap,
#page-shop-inspections .shop-table-wrap{background:var(--bg2);border:1px solid var(--border);border-radius:9px;padding:10px}

/* Setup › Inspections — selected row in the left-hand template list */
#page-setup-inspections .ins-row:hover{background:var(--surface-2)}
#page-setup-inspections .ins-row-sel{background:var(--surface-2);box-shadow:inset 3px 0 0 var(--accent)}
.ins-opt-row input[type=text]{font-size:12px;padding:6px 9px;border-radius:7px;border:1px solid var(--border2);background:var(--bg3);color:var(--text)}

/* Notifications dropdown panel (bell) */
.bell-panel{position:absolute;top:100%;right:0;width:340px;max-height:420px;overflow-y:auto;background:var(--bg2);border:1px solid var(--border);border-radius:9px;box-shadow:0 8px 24px rgba(0,0,0,.45);z-index:300;display:none;margin-top:6px}
.bell-panel.open{display:block}
.bell-panel-hdr{padding:9px 12px;font-size:11px;font-weight:600;color:var(--text);text-transform:uppercase;letter-spacing:.05em;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.bell-panel-clear{font-size:10px;color:var(--accent);cursor:pointer;background:none;border:none;font-family:inherit}
.bell-panel-item{padding:10px 12px;border-bottom:1px solid var(--border);font-size:12px;color:var(--text);cursor:pointer}
.bell-panel-item:last-child{border-bottom:none}
.bell-panel-item:hover{background:var(--bg3)}
.bell-panel-item-time{font-size:10px;color:var(--muted);margin-top:2px}
.bell-panel-empty{padding:22px 12px;text-align:center;color:var(--muted);font-size:11px;font-style:italic}

/* In-app toast (extends existing chat toast pattern) */
.mo-toast-stack{position:fixed;bottom:18px;right:18px;display:flex;flex-direction:column;gap:8px;z-index:9500;pointer-events:none}
.mo-toast{background:var(--bg2);border:1px solid var(--border);border-left:3px solid var(--accent);border-radius:8px;padding:10px 14px;min-width:260px;max-width:380px;box-shadow:0 6px 20px rgba(0,0,0,.4);pointer-events:auto;cursor:pointer;animation:moToastIn .25s ease}
.mo-toast-shop{border-left-color:var(--green)}
.mo-toast-hdr{font-size:11px;font-weight:600;color:var(--text);margin-bottom:2px}
.mo-toast-body{font-size:11px;color:var(--muted)}
@keyframes moToastIn{from{transform:translateX(20px);opacity:0}to{transform:translateX(0);opacity:1}}

/* === TOGGLE SWITCH (used in edit modals) === */
.toggle-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 0;text-transform:none;letter-spacing:0;font-size:12px;color:var(--text);font-weight:400}
.toggle-row .toggle-text{flex:1}
.toggle-row .toggle-text-sub{font-size:10px;color:var(--muted);margin-top:2px;font-weight:400}
.toggle-switch{position:relative;display:inline-block;width:38px;height:22px;flex-shrink:0}
/* Input is invisible but overlays the whole switch so the pill itself is the
   click target. A 0x0 input only works when an ancestor <label> forwards the
   click — most toggles (e.g. the shared edit-modal renderer) have no such label. */
.toggle-switch input{opacity:0;position:absolute;inset:0;width:100%;height:100%;margin:0;z-index:1;cursor:pointer}
.toggle-track{position:absolute;cursor:pointer;inset:0;background:var(--bg3);border:1px solid var(--border2);border-radius:22px;transition:.18s}
.toggle-track::before{content:'';position:absolute;height:14px;width:14px;left:3px;top:3px;background:var(--muted);border-radius:50%;transition:.18s}
.toggle-switch input:checked + .toggle-track{background:var(--accent);border-color:var(--accent)}
.toggle-switch input:checked + .toggle-track::before{transform:translateX(16px);background:white}
.toggle-switch input:focus + .toggle-track{box-shadow:0 0 0 2px rgba(79,142,247,.25)}
.toggle-switch input:disabled{cursor:not-allowed}
.toggle-switch input:disabled + .toggle-track{opacity:.55;cursor:not-allowed}

/* === SETTINGS GEAR + POPOVER === */
.settings-wrap{position:relative}
.topbar-icon-btn{width:28px;height:28px;border-radius:50%;border:1px solid var(--border);background:var(--bg3);color:var(--muted);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s;padding:0}
.topbar-icon-btn:hover{border-color:var(--border2);color:var(--text)}
.settings-popover{position:absolute;top:calc(100% + 6px);right:0;background:var(--bg2);border:1px solid var(--border);border-radius:9px;padding:6px;min-width:210px;box-shadow:0 10px 24px rgba(0,0,0,.35);z-index:300}
.settings-section-label{font-size:9px;font-weight:600;color:var(--muted);letter-spacing:.08em;text-transform:uppercase;padding:6px 10px 4px}
.settings-option{display:flex;align-items:center;gap:10px;width:100%;padding:7px 10px;border:none;background:transparent;color:var(--text);cursor:pointer;border-radius:6px;font-family:var(--font);font-size:12px;text-align:left}
.settings-option:hover{background:var(--hover)}
.settings-radio{width:14px;height:14px;border-radius:50%;border:2px solid var(--border2);flex-shrink:0;display:flex;align-items:center;justify-content:center}
.settings-option.selected .settings-radio{border-color:var(--accent)}
.settings-option.selected .settings-radio::after{content:'';width:6px;height:6px;border-radius:50%;background:var(--accent)}
.settings-icon{flex-shrink:0;color:var(--muted);width:14px;height:14px}
.settings-option.selected .settings-icon{color:var(--accent)}
.settings-label{flex:1}

/* === THEME PICKER (Settings page) === */
.theme-picker{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.theme-card{position:relative;padding:14px;background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius);cursor:pointer;text-align:left;font-family:var(--font);color:var(--text);transition:all .15s}
.theme-card:hover{border-color:var(--border2)}
.theme-card.selected{border-color:var(--accent);background:rgba(79,142,247,.08)}
.theme-card .settings-radio{position:absolute;top:14px;right:14px}
.theme-card.selected .settings-radio{border-color:var(--accent)}
.theme-card.selected .settings-radio::after{content:'';width:6px;height:6px;border-radius:50%;background:var(--accent)}
.theme-card-label{font-size:13px;font-weight:600;margin-bottom:2px;color:var(--text)}
.theme-card-sub{font-size:10px;color:var(--muted)}
.theme-preview{height:78px;border-radius:6px;margin-bottom:10px;border:1px solid var(--border);overflow:hidden;display:flex}
.theme-preview-auto{background:linear-gradient(to right,#f4f6fa 0%,#f4f6fa 50%,#0f1117 50%,#0f1117 100%)}
.theme-preview-light{background:#f4f6fa}
.theme-preview-light .tp-side{width:22%;background:#ffffff;border-right:1px solid rgba(15,17,23,.08)}
.theme-preview-light .tp-bar{height:9px;background:#ffffff;border-bottom:1px solid rgba(15,17,23,.08)}
.theme-preview-light .tp-cards>div{background:#ffffff;border:1px solid rgba(15,17,23,.08)}
.theme-preview-dark{background:#0f1117}
.theme-preview-dark .tp-side{width:22%;background:#161820;border-right:1px solid rgba(255,255,255,.07)}
.theme-preview-dark .tp-bar{height:9px;background:#161820;border-bottom:1px solid rgba(255,255,255,.07)}
.theme-preview-dark .tp-cards>div{background:#1d1f2a}
.tp-main{flex:1;display:flex;flex-direction:column}
.tp-cards{flex:1;display:grid;grid-template-columns:1fr 1fr 1fr;gap:3px;padding:5px}
.tp-cards>div{border-radius:2px}

/* === FLEET MAP === */
.fleet-map-panel{margin-bottom:14px}
#fleetMap{height:300px;background:var(--bg3);border-radius:0 0 var(--radius) var(--radius)}
.leaflet-container{background:var(--bg3);font-family:var(--font)}
.leaflet-popup-content-wrapper{background:var(--bg3);color:var(--text);border:1px solid var(--border);border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,.5)}
.leaflet-popup-tip{background:var(--bg3);border:1px solid var(--border)}
.leaflet-popup-content{font-size:11px;margin:9px 13px;line-height:1.5}
.leaflet-popup-content strong{font-weight:600;color:var(--text)}
.leaflet-popup-content .pop-sub{font-size:10px;color:var(--muted);margin-top:2px}

/* Google Maps InfoWindow theming.
   The rules above are scoped to .leaflet-popup-* and were orphaned when the maps
   moved to Google's AdvancedMarkerElement — .pop-sub matched nothing inside a
   gm-style bubble, so popup text fell back to the app's --text/--muted on Google's
   hard-coded white background (light grey on white: effectively invisible).
   These restore the same look on the Google DOM. !important is needed because
   Google ships its own background/colour rules for these nodes.
   Written against theme vars so it follows light and dark. */
.gm-style .gm-style-iw-c{
  background:var(--bg3) !important;color:var(--text) !important;
  border:1px solid var(--border);border-radius:8px;
  box-shadow:0 6px 18px rgba(0,0,0,.45);padding:10px 13px !important}
.gm-style .gm-style-iw-d{background:transparent !important;color:var(--text) !important;
  overflow:auto !important;max-height:none !important}
/* The little pointer under the bubble is a separate node with its own background. */
.gm-style .gm-style-iw-tc::after{background:var(--bg3) !important}
.gm-style .gm-style-iw-c strong{font-weight:600;color:var(--text)}
.gm-style .gm-style-iw-c .pop-sub{font-size:10px;color:var(--muted);margin-top:2px;line-height:1.5}
.gm-style .gm-style-iw-c a{color:var(--accent)}
/* Close button: Google renders the X as a mask on a span's background-color. */
.gm-style .gm-ui-hover-effect>span{background-color:var(--muted) !important}
/* Newer Maps builds wrap the title in a header row that carries its own bg. */
.gm-style .gm-style-iw-chr,.gm-style .gm-style-iw-ch{background:transparent !important;color:var(--text) !important}
.leaflet-control-zoom a{background:var(--bg2)!important;color:var(--text)!important;border:1px solid var(--border)!important}
.leaflet-control-zoom a:hover{background:var(--bg3)!important}
.leaflet-control-attribution{background:var(--map-overlay)!important;color:var(--muted)!important;font-size:9px!important}
.leaflet-control-attribution a{color:var(--accent)!important}
.mech-marker{background:var(--accent);border:2px solid var(--bg2);border-radius:50%;width:26px;height:26px;display:flex;align-items:center;justify-content:center;color:white;font-size:9px;font-weight:700;box-shadow:0 0 0 4px rgba(79,142,247,.22)}
.mech-marker.working{background:var(--green);box-shadow:0 0 0 4px rgba(45,212,160,.22)}
.mech-marker.lunch{background:var(--amber);box-shadow:0 0 0 4px rgba(245,165,36,.22)}
.eq-marker{background:var(--red);border:2px solid var(--bg2);border-radius:5px;width:24px;height:24px;display:flex;align-items:center;justify-content:center;color:white;font-size:13px;box-shadow:0 0 0 4px rgba(240,96,96,.22)}
.eq-marker.amber{background:var(--amber);box-shadow:0 0 0 4px rgba(245,165,36,.22)}
/* OEM fault-code badge. Rides on the corner of the marker rather than recolouring
   it, so "has a malfunction code" composes with the existing down / open-WO /
   running states instead of hiding one of them. */
.eq-marker{position:relative}
.eq-fault-badge{position:absolute;top:-7px;right:-7px;min-width:14px;height:14px;padding:0 3px;
  border-radius:7px;background:var(--amber);color:#1a1206;border:2px solid var(--bg2);
  font-size:9px;font-weight:800;line-height:10px;display:flex;align-items:center;justify-content:center;
  box-shadow:0 1px 3px rgba(0,0,0,.5)}
.eq-fault-badge.sev3{background:var(--red);color:#fff;animation:telFaultPulse 1.8s ease-in-out infinite}
.eq-fault-badge.sev1{background:var(--muted);color:#fff}
@keyframes telFaultPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.18)}}
.map-legend{display:flex;align-items:center;gap:14px;font-size:10px;color:var(--muted)}
.map-legend .swatch{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:5px;vertical-align:middle}
.map-legend .swatch.sq{border-radius:3px}

/* ─── TELEMATICS DASHBOARD ─────────────────────────────────────────────── */
.tel-ribbon{display:flex;align-items:center;gap:14px;background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);padding:10px 14px;margin-bottom:10px;flex-wrap:wrap}
.tel-stat{display:flex;flex-direction:column;gap:2px;min-width:84px;padding:2px 10px;border-right:1px solid var(--border)}
.tel-stat:last-of-type{border-right:none}
.tel-stat-label{font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;font-weight:600}
.tel-stat-value{font-size:20px;font-family:var(--mono);font-weight:600;color:var(--text);line-height:1.1}
.tel-controls{display:flex;align-items:center;gap:14px;background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);padding:8px 14px;margin-bottom:10px;flex-wrap:wrap}
.tel-toggle{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--text);cursor:pointer;user-select:none}
.tel-toggle input{width:14px;height:14px;accent-color:var(--accent)}
.job-marker{background:var(--purple);border:2px solid var(--bg2);width:18px;height:18px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:10px;font-weight:700;box-shadow:0 0 0 4px rgba(155,125,234,.28);transform:rotate(45deg);cursor:pointer}
.job-marker > span{transform:rotate(-45deg)}
.job-marker-label{display:inline-flex;align-items:center;gap:6px;background:var(--bg2);border:1px solid var(--purple);border-radius:7px;padding:3px 9px 3px 7px;box-shadow:0 2px 8px rgba(0,0,0,.4);cursor:pointer;white-space:nowrap;max-width:230px}
.job-marker-label .jml-dot{width:9px;height:9px;background:var(--purple);border:1.5px solid var(--bg2);transform:rotate(45deg);flex:0 0 auto}
.job-marker-label .jml-code{font-size:11px;font-weight:700;color:var(--text);font-family:var(--mono)}
.job-marker-label .jml-desc{font-size:10px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:150px}
.tel-cluster{background:var(--accent);color:#fff;border:2px solid var(--bg2);border-radius:50%;width:36px;height:36px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;box-shadow:0 0 0 4px rgba(79,142,247,.22);cursor:pointer}
.tel-cluster.jobs{background:var(--purple);box-shadow:0 0 0 4px rgba(155,125,234,.28)}
.tel-hover-card{position:absolute;z-index:6;pointer-events:none;background:var(--bg2);border:1px solid var(--border);border-radius:8px;padding:12px 14px;box-shadow:0 8px 24px rgba(0,0,0,.32);min-width:280px;max-width:340px;font-size:11px;color:var(--text)}
.tel-hover-card .thc-title{font-size:13px;font-weight:600;color:var(--text);margin-bottom:2px}
.tel-hover-card .thc-sub{font-size:10px;color:var(--muted);margin-bottom:8px}
.tel-hover-card .thc-stat-row{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:10px}
.tel-hover-card .thc-stat{background:var(--bg3);border-radius:6px;padding:6px 8px}
.tel-hover-card .thc-stat-label{font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.tel-hover-card .thc-stat-value{font-size:12px;font-weight:600;color:var(--text);font-family:var(--mono);margin-top:2px}
.tel-hover-card .thc-machines{border-top:1px solid var(--border);padding-top:8px}
.tel-hover-card .thc-machines-hdr{font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;font-weight:600;margin-bottom:6px}
.tel-hover-card .thc-machine{display:flex;align-items:center;gap:8px;padding:4px 0;font-size:11px}
.tel-hover-card .thc-machine + .thc-machine{border-top:1px dashed var(--border)}
.tel-hover-card .thc-machine-name{flex:1;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tel-hover-card .thc-tag{font-size:9px;font-weight:600;padding:2px 7px;border-radius:10px;text-transform:uppercase;letter-spacing:.04em}
.tel-hover-card .thc-tag.active{background:rgba(45,212,160,.18);color:var(--green)}
.tel-hover-card .thc-tag.down{background:rgba(240,96,96,.18);color:var(--red)}
.tel-hover-card .thc-tag.idle{background:rgba(107,109,125,.22);color:var(--muted)}
.tel-hover-card .thc-util{font-family:var(--mono);font-size:10px;color:var(--muted);min-width:34px;text-align:right}
.tel-hover-card .thc-util.high{color:var(--green)}
.tel-hover-card .thc-util.mid{color:var(--amber)}
.tel-hover-card .thc-util.low{color:var(--red)}
/* Referenced-equipment highlight: when the user arrives from a deep-link
   (Equipment-detail thumbnail → Telematics), the target marker is exempted
   from clustering so it stays visible at every zoom level, with a pulsing
   purple ring + a floating code badge so they never lose track of it. */
/* Stale fix: the machine hasn't reported in over a day, so this is its LAST KNOWN
   position, not where it is. Hollow + dashed + faded so it can't be mistaken for a
   live position at a glance, while still being findable. */
.eq-marker.stale{background:transparent !important;border:2px dashed var(--muted) !important;
  color:var(--muted);opacity:.62;box-shadow:none !important}
.eq-marker.referenced{background:var(--purple);width:30px;height:30px;font-size:15px;box-shadow:0 0 0 4px rgba(155,125,234,.5),0 0 0 9px rgba(155,125,234,.2);animation:telRefPulse 1.6s ease-in-out infinite;z-index:10}
@keyframes telRefPulse{0%,100%{box-shadow:0 0 0 4px rgba(155,125,234,.55),0 0 0 9px rgba(155,125,234,.18)}50%{box-shadow:0 0 0 6px rgba(155,125,234,.7),0 0 0 16px rgba(155,125,234,.12)}}
.tel-ref-pin{display:flex;flex-direction:column;align-items:center;gap:3px}
/* Machine art markers: the unit's photo sticker (Apple Vision cut-out, one per make +
   model) or, without one, the drawn icon in the unit's colour. Status no longer paints
   the whole marker — it is the dot in the corner, so the machine stays recognisable. */
.eq-marker.eq-machine{background:transparent !important;border:0 !important;box-shadow:none !important;
  width:auto;height:auto;border-radius:0;animation:none}
.eq-machine .eq-art{display:block;height:34px;width:auto;max-width:64px;pointer-events:none;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.45))}
.eq-machine .eq-art.drawn{filter:drop-shadow(1.5px 0 0 #fff) drop-shadow(-1.5px 0 0 #fff) drop-shadow(0 1.5px 0 #fff) drop-shadow(0 -1.5px 0 #fff) drop-shadow(0 1px 2px rgba(0,0,0,.45))}
.eq-machine .eq-status{position:absolute;left:-3px;bottom:-2px;width:11px;height:11px;border-radius:50%;
  border:2px solid #fff;background:#8b9198;box-shadow:0 1px 3px rgba(0,0,0,.45)}
.eq-machine.running .eq-status{background:var(--green)}
.eq-machine.amber .eq-status{background:var(--amber)}
.eq-machine.down .eq-status{background:var(--red)}
.eq-machine.stale .eq-art{opacity:.7;filter:grayscale(.55) drop-shadow(0 1px 2px rgba(0,0,0,.35))}
.eq-machine.stale .eq-status{background:transparent;border:2px dashed #8b9198}
.eq-machine.referenced .eq-art{height:46px;max-width:86px;filter:drop-shadow(0 0 2px #fff) drop-shadow(0 0 7px rgba(155,125,234,.95))}
.tel-ref-pin .tel-ref-label{background:var(--purple);color:#fff;font-size:10px;font-weight:700;letter-spacing:.04em;padding:3px 8px;border-radius:10px;white-space:nowrap;box-shadow:0 2px 8px rgba(0,0,0,.35);max-width:140px;overflow:hidden;text-overflow:ellipsis}
.tel-ref-banner{display:flex;align-items:center;gap:10px;background:rgba(155,125,234,.12);border:1px solid rgba(155,125,234,.45);color:var(--text);border-radius:var(--radius);padding:8px 14px;margin-bottom:10px;font-size:11px}
.tel-ref-banner strong{color:var(--purple);font-weight:700;letter-spacing:.04em}
.tel-ref-banner .tel-ref-clear{margin-left:auto;background:transparent;border:0;color:var(--muted);cursor:pointer;font-size:14px;padding:0 4px}
.tel-ref-banner .tel-ref-clear:hover{color:var(--text)}

/* ─── WORK ORDERS PAGE ─────────────────────────────────────────────────── */
.wo-clock-strip{display:flex;align-items:center;gap:14px;background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:12px 16px;margin-bottom:14px}
.wo-clock-status{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--text)}
.wo-clock-dot{width:10px;height:10px;border-radius:50%;background:var(--muted);box-shadow:0 0 0 3px rgba(107,109,125,.18)}
.wo-clock-dot.on{background:var(--green);box-shadow:0 0 0 3px rgba(45,212,160,.22);animation:woPulse 2.4s ease-in-out infinite}
.wo-clock-dot.lunch{background:var(--amber);box-shadow:0 0 0 3px rgba(245,165,36,.28);animation:woPulse 2.4s ease-in-out infinite}
@keyframes woPulse{0%,100%{box-shadow:0 0 0 3px rgba(45,212,160,.22)}50%{box-shadow:0 0 0 6px rgba(45,212,160,.32)}}
.wo-clock-wo{flex:1;font-size:11px;color:var(--muted)}
.wo-clock-wo strong{color:var(--text);font-weight:600}
.wo-clock-actions{display:flex;gap:6px}
.wo-clock-actions button{font-size:11px;padding:6px 12px;border-radius:6px;border:1px solid var(--border);background:var(--bg3);color:var(--text);cursor:pointer;font-weight:500}
.wo-clock-actions button.primary{background:var(--accent);color:#fff;border-color:transparent}
.wo-clock-actions button.danger{background:var(--red);color:#fff;border-color:transparent}
.wo-clock-actions button.lunch{background:var(--amber);color:#1a1a1a;border-color:transparent;font-weight:600}
.wo-clock-strip.wo-inline-clock{margin-bottom:14px;background:linear-gradient(135deg,var(--bg2),var(--bg3));border-color:var(--accent);box-shadow:0 1px 0 rgba(79,142,247,.15)}
.wo-clock-strip.wo-inline-clock .wo-clock-status{font-size:13px}
.wo-clock-strip.wo-inline-clock .wo-clock-actions button{font-size:12px;padding:7px 14px}
.wo-clock-actions button:disabled{opacity:.5;cursor:not-allowed}

.wo-weekly-panel{background:var(--bg2);border:1px solid var(--border);border-radius:10px;margin-bottom:14px;overflow:hidden}
.wo-weekly-grid{display:grid;grid-template-columns:42px repeat(7,1fr);gap:1px;background:var(--border);max-height:380px;overflow-y:auto}
.wo-weekly-grid .wg-header{background:var(--bg3);font-size:10px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.04em;padding:6px 8px;text-align:center;position:sticky;top:0;z-index:1}
.wo-weekly-grid .wg-hour{background:var(--bg2);font-size:9px;color:var(--muted);font-family:var(--mono);padding:4px 6px;text-align:right;position:sticky;left:0;z-index:1}
.wo-weekly-grid .wg-cell{background:var(--bg2);min-height:24px;position:relative}
.wo-weekly-grid .wg-cell.today{background:var(--bg3)}
.wo-weekly-grid .wg-block{position:absolute;left:2px;right:2px;background:var(--accent);color:#fff;font-size:10px;padding:3px 5px;border-radius:4px;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;z-index:2;border:1px solid rgba(255,255,255,.18);transition:filter .15s}
.wo-weekly-grid .wg-block:hover{filter:brightness(1.18)}
.wo-weekly-grid .wg-block.selected{box-shadow:0 0 0 2px var(--amber)}
.wo-weekly-grid .wg-block.pri-9{background:var(--red)}
.wo-weekly-grid .wg-block.pri-6{background:var(--amber)}
.wo-weekly-grid .wg-block.pri-7{background:var(--accent)}
.wo-weekly-grid .wg-block.pri-5{background:var(--muted)}
.wo-weekly-grid .wg-block.pri-8{background:var(--muted)}
.wo-weekly-empty{padding:30px;text-align:center;color:var(--muted);font-size:11px}

.wo-body-panel{background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:0;min-height:200px}
.wo-body-empty{padding:40px;text-align:center;color:var(--muted);font-size:12px}
.wo-body-hdr{display:flex;justify-content:space-between;align-items:flex-start;padding:14px 18px;border-bottom:1px solid var(--border);gap:14px}
.wo-body-hdr-l h2{font-size:18px;font-weight:600;margin:0 0 4px;color:var(--text)}
.wo-body-hdr-l .wo-meta{display:flex;gap:8px;font-size:10px;color:var(--muted);align-items:center;flex-wrap:wrap}
.wo-body-hdr-r{display:flex;flex-direction:column;align-items:flex-end;gap:6px;font-size:10px;color:var(--muted);font-family:var(--mono);text-align:right}

.wo-body-grid{display:grid;grid-template-columns:1fr 320px;gap:0}
@media (max-width: 1100px){.wo-body-grid{grid-template-columns:1fr}}

.wo-body-main{padding:14px 18px}
.wo-body-side{padding:14px 18px;border-left:1px solid var(--border);background:var(--bg)}
@media (max-width: 1100px){.wo-body-side{border-left:none;border-top:1px solid var(--border)}}

.wo-section-title{font-size:10px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.06em;margin-top:14px;margin-bottom:8px;padding-bottom:6px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.wo-section-title:first-child{margin-top:0}

/* 3 C's */
.wo-3c{display:grid;grid-template-columns:1fr;gap:14px}
.wo-3c-block label{display:block;font-size:10px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.04em;margin-bottom:4px}
.wo-3c-complaint{background:var(--bg3);border:1px solid var(--border);border-radius:6px;padding:10px 12px;font-size:12px;line-height:1.5;color:var(--text);white-space:pre-wrap;max-height:160px;overflow-y:auto}
.wo-3c-complaint-locked{font-size:9px;color:var(--muted);margin-top:4px;font-style:italic}
.wo-3c-cause-textarea{width:100%;min-height:60px;background:var(--surface-2);border:1px solid var(--border);border-radius:6px;color:var(--text);padding:8px 10px;font:inherit;font-size:12px;resize:vertical;line-height:1.5}
.wo-3c-cause-row{display:flex;gap:6px;align-items:flex-start}
.wo-3c-cause-row .wo-mic-btn{flex-shrink:0}
.wo-3c-save-row{display:flex;justify-content:flex-end;gap:6px;margin-top:6px}
.wo-3c-save-row button{font-size:10px;padding:5px 10px;border-radius:5px;background:var(--accent);color:#fff;border:none;cursor:pointer}
.wo-3c-save-row .save-status{font-size:10px;color:var(--muted);align-self:center;margin-right:auto}

.wo-correction-log{display:flex;flex-direction:column;gap:8px;max-height:320px;overflow-y:auto;padding-right:4px}
.wo-entry{background:var(--bg3);border-radius:6px;padding:8px 10px;border-left:2px solid var(--border)}
.wo-entry.entry-clockin{border-left-color:var(--green)}
.wo-entry.entry-clockout{border-left-color:var(--red)}
.wo-entry.entry-note{border-left-color:var(--accent)}
.wo-entry-meta{font-size:9px;color:var(--muted);margin-bottom:3px;display:flex;gap:6px;align-items:center}
.wo-entry-meta .who{color:var(--text);font-weight:500}
.wo-entry-meta .pill{font-size:8px;padding:1px 5px;border-radius:6px;background:rgba(45,212,160,.18);color:var(--green);font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.wo-entry-meta .pill.out{background:rgba(240,96,96,.18);color:var(--red)}
.wo-entry-meta .pill.note{background:rgba(79,142,247,.18);color:var(--accent)}
.wo-entry-body{font-size:12px;color:var(--text);line-height:1.5;white-space:pre-wrap;margin-top:2px}
.wo-correction-input{margin-top:10px;display:flex;gap:6px;align-items:flex-start}
.wo-correction-input textarea{flex:1;min-height:48px;background:var(--surface-2);border:1px solid var(--border);border-radius:6px;color:var(--text);padding:8px 10px;font:inherit;font-size:12px;resize:vertical}
.wo-correction-input .actions{display:flex;flex-direction:column;gap:4px}
.wo-correction-input button.add{font-size:10px;padding:6px 12px;border-radius:5px;background:var(--accent);color:#fff;border:none;cursor:pointer}

/* Readiness panel — submit/close gating with checklist */
.wo-readiness{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px;padding:10px;background:var(--bg3);border-radius:8px;border:1px solid var(--border)}
.wo-readiness.done{display:block;text-align:center;padding:14px;font-size:12px;color:var(--muted)}
@media (max-width:900px){.wo-readiness{grid-template-columns:1fr}}
.wo-readiness-col{display:flex;flex-direction:column;gap:5px}
.wo-readiness-hdr{display:flex;justify-content:space-between;align-items:center;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);padding-bottom:6px;border-bottom:1px solid var(--border)}
.wo-readiness-btn{font-size:10px;padding:5px 10px;border-radius:5px;background:var(--accent);color:#fff;border:none;cursor:pointer;font-weight:500;text-transform:uppercase;letter-spacing:.04em}
.wo-readiness-btn.close{background:var(--green)}
.wo-readiness-btn:disabled{background:var(--bg2);color:var(--muted);cursor:not-allowed;border:1px solid var(--border)}
.wo-readiness-state.done{font-size:10px;color:var(--green);font-weight:600}
.wo-check-row{display:grid;grid-template-columns:14px 1fr auto;gap:6px;align-items:center;font-size:11px;padding:3px 0;color:var(--text)}
.wo-check-row.ok .wo-check-mark{color:var(--green)}
.wo-check-row.fail .wo-check-mark{color:var(--red)}
.wo-check-row.fail{color:var(--text)}
.wo-check-mark{font-weight:700;font-size:13px;text-align:center}
.wo-check-detail{font-size:9px;color:var(--muted);font-style:italic;grid-column:2/-1;margin-top:-2px}

/* Focused single-WO mode — used when URL hash is #wo/<id>. Hides shell chrome
   so the user can stack multiple WOs in browser tabs without sidebar clutter. */
body.wo-focused-mode #sidebar,
body.wo-focused-mode .topbar,
body.wo-focused-mode #toolbar,
body.wo-focused-mode .content > .page{display:none!important}
body.wo-focused-mode .content{margin-left:0!important;padding:0!important;width:100%!important;max-width:100%!important}
body.wo-focused-mode #woFocusedShell{display:block!important}

/* WO body header action buttons (Submit / Close) */
.wo-header-actions{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap;justify-content:flex-end}
.wo-header-btn{font-size:10px;padding:6px 10px;border-radius:5px;border:1px solid var(--border);background:var(--bg3);color:var(--text);cursor:pointer;font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.wo-header-btn.submit{background:var(--accent);color:#fff;border-color:transparent}
.wo-header-btn.close{background:var(--green);color:#fff;border-color:transparent}
.wo-header-btn:hover{filter:brightness(1.1)}

/* === EQUIPMENT page === */
.eq-shell{display:grid;grid-template-columns:380px 1fr;gap:14px;align-items:start;height:calc(100vh - 110px)}
.eq-list-pane{background:var(--bg2);border:1px solid var(--border);border-radius:10px;display:flex;flex-direction:column;overflow:hidden;height:100%}
.eq-toolbar{display:flex;gap:6px;align-items:center;padding:10px;border-bottom:1px solid var(--border);flex-shrink:0;flex-wrap:wrap}
.eq-toolbar input,.eq-toolbar select{background:var(--surface-2);border:1px solid var(--border);color:var(--text);padding:5px 8px;border-radius:5px;font-size:11px}
.eq-toolbar input{flex:1;min-width:120px}
#eqListBody{overflow-y:auto;flex:1;padding:4px 0}
.eq-list-row{display:grid;grid-template-columns:1fr auto;gap:6px;padding:8px 12px;border-bottom:1px solid var(--border);cursor:pointer;font-size:11px}
.eq-list-row:hover{background:var(--bg3)}
.eq-list-row.selected{background:var(--bg3);border-left:3px solid var(--accent);padding-left:9px}
.eq-list-row .l-top{display:flex;align-items:center;gap:6px;font-weight:600;color:var(--text)}
.eq-list-row .l-unit{font-family:var(--mono);color:var(--accent)}
.eq-list-row .l-sub{color:var(--muted);font-size:10px;margin-top:2px;display:flex;align-items:center;gap:4px;min-width:0}
.eq-list-row .l-sub .l-mm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.eq-list-row .l-sub .l-type{color:var(--muted);font-weight:600;letter-spacing:.04em;text-transform:uppercase;flex-shrink:0}
.eq-list-row .l-sub .l-dot{flex-shrink:0}
.eq-list-row .l-right{text-align:right}
.eq-list-row .l-right .open-wos{font-size:9px;background:var(--red);color:#fff;padding:1px 6px;border-radius:8px;font-weight:600}
.eq-list-row .l-right .no-wos{font-size:9px;color:var(--muted)}
/* Pagers sit outside #eqListBody (a sibling above and below) so they stay put
   while the rows scroll — "nav at the top and bottom of the list". */
.eq-pager{display:flex;align-items:center;gap:4px;padding:6px 10px;flex-shrink:0;font-size:10px;color:var(--muted);flex-wrap:wrap}
.eq-pager.top{border-bottom:1px solid var(--border)}
.eq-pager.bottom{border-top:1px solid var(--border)}
.eq-pager:empty{display:none}
.eq-pager button{background:var(--surface-2);border:1px solid var(--border);color:var(--text);border-radius:4px;font-size:10px;padding:3px 7px;cursor:pointer;line-height:1.4;font-family:inherit}
.eq-pager button:hover:not(:disabled){background:var(--bg3);border-color:var(--accent)}
.eq-pager button:disabled{opacity:.35;cursor:default}
.eq-pager button.current{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
.eq-pager .eq-pager-gap{padding:0 2px;color:var(--muted)}
.eq-pager .eq-pager-range{margin-left:auto;white-space:nowrap}
.eq-pager select{background:var(--surface-2);border:1px solid var(--border);color:var(--text);border-radius:4px;font-size:10px;padding:2px 4px;font-family:inherit}
/* Type "bubbles" — one per equipment type actually present in the fleet, each with
   a live count. Sits between the toolbar and the top pager: it's a filter control
   so it belongs with the toolbar, and the pager stays glued to the rows it pages.
   Capped height + scroll so the long tail can never eat the 380px list pane. */
.eq-type-chips{display:flex;flex-wrap:wrap;gap:4px;padding:8px 10px;border-bottom:1px solid var(--border);flex-shrink:0;max-height:74px;overflow-y:auto}
.eq-type-chips.expanded{max-height:170px}
.eq-type-chips:empty{display:none}
.eq-chip{display:inline-flex;align-items:center;gap:4px;max-width:160px;background:var(--surface-2);border:1px solid var(--border);color:var(--text);font-size:10px;font-family:inherit;padding:3px 8px;border-radius:11px;cursor:pointer;line-height:1.5;white-space:nowrap;overflow:hidden;transition:border-color .15s,background .15s}
.eq-chip .n{overflow:hidden;text-overflow:ellipsis}
.eq-chip .c{font-family:var(--mono);font-size:9px;color:var(--muted);flex-shrink:0}
.eq-chip:hover{border-color:var(--accent);color:var(--accent)}
.eq-chip.active{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
.eq-chip.active .c{color:rgba(255,255,255,.8)}
.eq-chip.zero{opacity:.4}
/* Unclassified = the All / MISC / NONE / blank catch-alls. Dashed so it reads as
   "no real type assigned" rather than as another equipment class. */
.eq-chip.untyped{border-style:dashed;color:var(--muted)}
.eq-chip.untyped.active{color:#fff;border-style:solid}
.eq-chip.more{background:transparent;border-style:dashed;color:var(--muted)}
#eqTypeFilter{max-width:132px}

.eq-detail-pane{background:var(--bg2);border:1px solid var(--border);border-radius:10px;height:100%;overflow-y:auto}
.eq-empty{padding:60px 20px;text-align:center;color:var(--muted);font-size:13px;font-style:italic}
.eq-detail-hdr{padding:14px 18px;border-bottom:1px solid var(--border);display:grid;grid-template-columns:1fr 140px 140px;gap:14px;align-items:start}
.eq-detail-hdr .photo{width:140px;height:105px;border-radius:8px;background:var(--bg3) center/cover no-repeat;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:24px;color:var(--muted)}
.eq-detail-hdr .photo.has-img{border-style:solid}
.eq-detail-hdr h2{font-size:18px;font-weight:600;margin:0 0 4px;color:var(--text)}
.eq-detail-hdr .hdr-meta{display:flex;gap:8px;flex-wrap:wrap;font-size:10px;color:var(--muted);align-items:center;margin-bottom:6px}
.eq-detail-hdr .hdr-row{display:grid;grid-template-columns:auto 1fr;gap:3px 12px;font-size:11px;font-family:var(--mono)}
.eq-detail-hdr .hdr-row .k{color:var(--muted)}
.eq-detail-hdr .hdr-map{width:140px;height:105px;border-radius:8px;background:var(--bg3);border:1px solid var(--border);overflow:hidden;cursor:pointer;position:relative;transition:border-color .15s,box-shadow .15s}
.eq-detail-hdr .hdr-map:hover{border-color:var(--accent);box-shadow:0 0 0 2px rgba(79,142,247,.25)}
.eq-detail-hdr .hdr-map-empty{display:flex;align-items:center;justify-content:center;height:100%;font-size:9px;color:var(--muted);text-align:center;padding:6px}
.eq-detail-hdr .hdr-map-overlay{position:absolute;inset:0;z-index:5;background:transparent}
.eq-detail-hdr .hdr-map-hint{position:absolute;left:6px;bottom:6px;z-index:6;background:rgba(0,0,0,.55);color:#fff;font-size:8px;padding:2px 6px;border-radius:3px;letter-spacing:.04em;text-transform:uppercase;font-weight:600;pointer-events:none}

.eq-tabs{display:flex;gap:2px;border-bottom:1px solid var(--border);padding:0 18px}
.eq-tab{font-size:11px;padding:10px 14px;cursor:pointer;color:var(--muted);font-weight:500;border-bottom:2px solid transparent;margin-bottom:-1px}
.eq-tab.active{color:var(--text);border-bottom-color:var(--accent)}
.eq-tab .tab-count{font-size:9px;background:var(--bg3);color:var(--muted);padding:1px 5px;border-radius:8px;margin-left:5px;font-family:var(--mono)}
.eq-tab.active .tab-count{background:var(--accent);color:#fff}
.eq-tab-pane{padding:14px 18px;display:none}
.eq-tab-pane.active{display:block}
.eq-insp-row{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;background:var(--bg3);border-radius:6px;padding:10px 12px;border-left:3px solid var(--border2)}
.eq-insp-row.due{border-left-color:var(--amber)}
.eq-insp-row.overdue{border-left-color:var(--red)}
.eq-insp-row.done{border-left-color:var(--green)}
.eq-insp-row.failed{border-left-color:var(--red)}
.eq-insp-hist{cursor:pointer}
.eq-insp-hist:hover{background:var(--surface-2)}
.insp-form-section{margin-bottom:16px;border:1px solid var(--border);border-radius:8px;overflow:hidden;background:var(--bg2)}
.insp-form-section-hdr{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;background:var(--bg3);border-bottom:1px solid var(--border);font-size:12px;font-weight:600}
.insp-form-item{padding:10px 12px;border-bottom:1px solid var(--border);display:grid;gap:6px}
.insp-form-item:last-child{border-bottom:none}
.insp-form-item.header-only{background:var(--bg3);font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.insp-form-item.failing{background:rgba(240,96,96,.08)}
.insp-pf{display:flex;gap:6px;flex-wrap:wrap}
.insp-pf button{font-size:11px;padding:6px 12px;border-radius:6px;border:1px solid var(--border2);background:var(--bg3);color:var(--text);cursor:pointer}
.insp-pf button.active.pass{background:var(--green);border-color:var(--green);color:#fff}
.insp-pf button.active.fail{background:var(--red);border-color:var(--red);color:#fff}
.insp-pf button.active.na{background:var(--muted);border-color:var(--muted);color:#fff}
.insp-form-item input[type=text],.insp-form-item input[type=number],.insp-form-item input[type=date],.insp-form-item textarea,.insp-form-item select{width:100%;font-size:12px;padding:7px 9px;border-radius:6px;border:1px solid var(--border2);background:var(--bg3);color:var(--text);box-sizing:border-box}
.insp-opt{display:flex;align-items:center;gap:8px;font-size:12px;padding:4px 0}
.insp-result-ans{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid var(--border);font-size:12px}
.insp-result-ans.fail{color:var(--red)}
.insp-badge{font-size:9px;font-weight:600;letter-spacing:.04em;padding:2px 6px;border-radius:4px;background:var(--bg3);color:var(--muted)}
.insp-badge.pass{background:rgba(45,212,160,.15);color:var(--green)}
.insp-badge.fail{background:rgba(240,96,96,.15);color:var(--red)}

.eq-spec-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 20px;font-size:11px}
.eq-spec-section{margin-bottom:14px}
.eq-spec-section h4{font-size:10px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.06em;margin:0 0 8px;padding-bottom:6px;border-bottom:1px solid var(--border)}
/* Equipment manuals: Manuals tab on equipment detail + buttons on the WO equipment card */
.mo-man-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.mo-man-head-l{font-size:10px;color:var(--muted)}
.mo-man-head-l .mono,.mo-man-sub .mono{font-family:var(--mono);color:var(--text)}
.mo-man-head-r{display:flex;gap:6px;align-items:center}
.mo-man-head-r a.btn{text-decoration:none;display:inline-flex;align-items:center}
.mo-man-count{font-size:9px;background:var(--bg3);color:var(--muted);padding:1px 5px;border-radius:8px;margin-left:4px;font-family:var(--mono);font-weight:500;letter-spacing:0}
.mo-man-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:7px 10px;background:var(--bg3);border-radius:6px;margin-bottom:5px}
.mo-man-main{min-width:0;flex:1}
.mo-man-title{font-size:12px;color:var(--text);font-weight:500;text-decoration:none;word-break:break-word}
a.mo-man-title:hover{color:var(--accent);text-decoration:underline}
.mo-man-sub{font-size:10px;color:var(--muted);margin-top:2px}
.mo-man-side{display:flex;align-items:center;gap:6px;flex:0 0 auto}
.mo-man-badge{font-size:8px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;padding:2px 6px;border-radius:4px;white-space:nowrap}
.mo-man-badge.pro{background:rgba(45,212,160,.15);color:var(--green)}
.mo-man-badge.pdf{background:rgba(79,142,247,.15);color:var(--accent)}
.mo-man-badge.link{background:var(--bg2);color:var(--muted);border:1px solid var(--border)}
.mo-man-empty{font-size:11px;color:var(--muted);font-style:italic;padding:14px;background:var(--bg3);border-radius:6px;text-align:center}
.mo-man-form{background:var(--bg3);border:1px solid var(--border);border-radius:8px;padding:12px;margin-bottom:14px;display:flex;flex-direction:column;gap:10px}
.mo-man-form-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;font-size:11px;color:var(--text)}
.mo-man-lbl{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;font-weight:600;min-width:70px}
.mo-man-radio{display:inline-flex;align-items:center;gap:5px;cursor:pointer}
.mo-man-radio.disabled{opacity:.45;cursor:not-allowed}
.mo-man-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px}
.mo-man-form-grid label{display:flex;flex-direction:column;gap:3px;font-size:10px;color:var(--muted)}
.mo-man-form-grid label.wide{grid-column:1/-1}
.mo-man-form input:not([type=radio]),.mo-man-form select{background:var(--surface-2,var(--bg2));border:1px solid var(--border);color:var(--text);padding:5px 7px;border-radius:5px;font-size:11px;font-family:inherit;box-sizing:border-box;width:100%}
.mo-man-form input:focus,.mo-man-form select:focus{outline:none;border-color:var(--accent)}
.mo-man-form-foot{display:flex;justify-content:flex-end;align-items:center;gap:10px}
.mo-man-status{font-size:10px;color:var(--muted)}
.mo-man-btns{margin-top:10px;padding-top:9px;border-top:1px solid var(--border)}
.mo-man-btns-lbl{font-size:9px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px}
.mo-man-btns-row{display:flex;gap:5px;flex-wrap:wrap}
.mo-man-btn{font-size:10px;padding:4px 9px;border-radius:6px;border:1px solid var(--border);background:var(--bg2);color:var(--text);cursor:pointer;text-decoration:none;font-family:var(--font);font-weight:500;display:inline-flex;align-items:center;gap:4px;line-height:1.4}
.mo-man-btn:hover:not([disabled]){border-color:var(--accent);color:var(--accent)}
.mo-man-btn[disabled]{opacity:.4;cursor:not-allowed}
.mo-man-btn-tag{font-size:8px;font-family:var(--mono);background:var(--bg3);color:var(--muted);padding:0 4px;border-radius:4px}
.mo-man-btn-wrap{position:relative;display:inline-block}
.mo-man-pop{display:none;position:absolute;top:calc(100% + 4px);left:0;background:var(--bg2);border:1px solid var(--border);border-radius:8px;padding:4px;min-width:230px;max-width:300px;max-height:280px;overflow:auto;box-shadow:0 10px 24px rgba(0,0,0,.35);z-index:300}
.mo-man-btn-wrap.open .mo-man-pop{display:block}
.mo-man-btn-wrap:last-child .mo-man-pop{left:auto;right:0}
.mo-man-pop-item{display:grid;grid-template-columns:1fr auto;gap:1px 8px;align-items:center;padding:6px 8px;border-radius:5px;text-decoration:none;color:var(--text)}
.mo-man-pop-item:hover{background:var(--bg3)}
.mo-man-pop-item .t{font-size:11px;font-weight:500;grid-column:1}
.mo-man-pop-item .s{font-size:9px;color:var(--muted);grid-column:1;grid-row:2}
.mo-man-pop-item .mo-man-badge{grid-column:2;grid-row:1/span 2}
@media (max-width:640px){.mo-man-form-grid{grid-template-columns:1fr}.mo-man-row{flex-wrap:wrap}}
.eq-spec-row{display:flex;justify-content:space-between;padding:3px 0;color:var(--text)}
.eq-spec-row .k{color:var(--muted)}
.eq-spec-row .v{font-family:var(--mono);text-align:right}

.eq-side-rail{display:grid;grid-template-columns:1fr;gap:10px;margin-top:14px}
.eq-warranty-card{background:var(--bg3);border-radius:8px;padding:12px}
.eq-warranty-card.expired{border-left:3px solid var(--red)}
.eq-warranty-card.soon{border-left:3px solid var(--amber)}
.eq-warranty-card.active{border-left:3px solid var(--green)}
.eq-warranty-card.none{border-left:3px solid var(--muted)}

.eq-map{width:100%;height:200px;border-radius:8px;background:var(--bg3);border:1px solid var(--border);position:relative;overflow:hidden}
.eq-map-empty{display:flex;align-items:center;justify-content:center;height:100%;font-size:10px;color:var(--muted);text-align:center;padding:14px}

.eq-wo-list{display:flex;flex-direction:column;gap:6px}
.eq-wo-item{padding:10px 12px;background:var(--bg3);border-radius:6px;cursor:pointer;border-left:3px solid var(--border);transition:background .15s}
.eq-wo-item:hover{background:var(--hover);filter:brightness(1.05)}
.eq-wo-item .wo-line1{display:flex;justify-content:space-between;align-items:center;margin-bottom:3px;font-size:11px}
.eq-wo-item .wo-id{font-family:var(--mono);color:var(--accent);font-weight:600}
.eq-wo-item .wo-title{font-size:11px;color:var(--text)}
.eq-wo-item .wo-sub{font-size:10px;color:var(--muted);margin-top:3px;display:flex;gap:8px}

.eq-pm-item{background:var(--bg3);border-radius:6px;padding:10px 12px;margin-bottom:6px;border-left:3px solid var(--purple)}
.eq-pm-parts{margin-top:6px;padding-left:10px;border-left:1px solid var(--border)}
.eq-pm-parts li{font-size:10px;color:var(--muted);padding:1px 0}

/* WO typeahead picker (Create-PO modal) */
.wo-typeahead-dropdown{position:absolute;left:0;right:0;top:100%;margin-top:2px;background:var(--bg2);border:1px solid var(--border);border-radius:6px;max-height:280px;overflow-y:auto;z-index:50;box-shadow:0 8px 24px rgba(0,0,0,.4)}
.wo-typeahead-item{padding:8px 10px;cursor:pointer;border-bottom:1px solid var(--border);font-size:11px}
.wo-typeahead-item:last-child{border-bottom:none}
.wo-typeahead-item:hover,.wo-typeahead-item.active{background:var(--bg3)}
.wo-typeahead-item .ti-l{display:flex;justify-content:space-between;align-items:center;margin-bottom:2px}
.wo-typeahead-item .ti-id{font-family:var(--mono);font-weight:600;color:var(--text)}
.wo-typeahead-item .ti-status{font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.wo-typeahead-item .ti-r{color:var(--muted);font-size:10px}
.wo-typeahead-empty{padding:10px 12px;color:var(--muted);font-size:10px;font-style:italic;text-align:center}

/* Multi-row Request Parts modal */
.parts-row{display:grid;grid-template-columns:1fr 90px 28px;gap:6px;margin-bottom:6px;align-items:center}
.parts-row-hdr{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;font-weight:600;margin-bottom:4px;padding-bottom:4px;border-bottom:1px solid var(--border)}
.parts-row input{background:var(--surface-2);border:1px solid var(--border);border-radius:5px;color:var(--text);padding:6px 8px;font:inherit;font-size:12px}
.parts-row input.parts-num{font-family:var(--mono);text-transform:uppercase}
.parts-row input.parts-qty{font-family:var(--mono);text-align:right}
.parts-row .parts-row-del{background:transparent;border:none;color:var(--muted);cursor:pointer;font-size:18px;line-height:1;padding:0;border-radius:4px}
.parts-row .parts-row-del:hover{color:var(--red);background:rgba(240,96,96,.12)}

/* Toast stack for chat notifications — top-right, stacked, auto-dismiss */
#woToastStack{position:fixed;top:60px;right:14px;z-index:9000;display:flex;flex-direction:column;gap:8px;max-width:340px;pointer-events:none}
.wo-toast{pointer-events:auto;background:var(--bg2);border:1px solid var(--border);border-left:3px solid var(--accent);border-radius:8px;padding:10px 12px;font-size:11px;color:var(--text);box-shadow:0 6px 20px rgba(0,0,0,.4);cursor:pointer;animation:woToastIn .25s ease-out;display:flex;flex-direction:column;gap:3px;transition:opacity .25s,transform .25s}
.wo-toast.dismissing{opacity:0;transform:translateX(20px)}
.wo-toast:hover{filter:brightness(1.12)}
.wo-toast-hdr{display:flex;justify-content:space-between;align-items:center;font-size:10px;color:var(--muted)}
.wo-toast-hdr strong{color:var(--accent);font-weight:600;font-size:11px}
.wo-toast-body{font-size:12px;line-height:1.4;color:var(--text);margin-top:2px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.wo-toast-close{position:absolute;top:4px;right:6px;color:var(--muted);background:none;border:none;cursor:pointer;font-size:14px;padding:0 4px;line-height:1}
.wo-toast-close:hover{color:var(--text)}
@keyframes woToastIn{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}

/* WO Costs card — sits above Chat in the side rail */
.wo-costs-card{padding:10px 12px}
.wo-cost-row{display:flex;justify-content:space-between;font-size:11px;padding:4px 0;color:var(--text);align-items:center}
.wo-cost-row .k{color:var(--muted)}
.wo-cost-row .v{font-family:var(--mono);font-weight:500}
.wo-cost-row.manual .k::before{content:'✎ ';color:var(--muted);opacity:.5;font-style:italic}
.wo-cost-sub{display:flex;gap:10px;justify-content:flex-end;align-items:center;font-size:9px;color:var(--muted);padding:0 0 4px;text-transform:uppercase;letter-spacing:.04em}
.wo-cost-sub .wo-cost-input{width:62px;font-size:10px;padding:2px 4px}
.wo-cost-row.total{margin-top:6px;padding-top:8px;border-top:1px solid var(--border);font-weight:600;font-size:12px}
.wo-cost-row.total .v{color:var(--accent);font-weight:700}
.wo-cost-input{width:88px;background:var(--surface-2);border:1px solid var(--border);color:var(--text);padding:3px 6px;border-radius:4px;font:inherit;font-size:11px;font-family:var(--mono);text-align:right}
.wo-cost-input:focus{outline:none;border-color:var(--accent)}

/* WO Chat — live thread on the right side of the WO body */
.wo-chat-card{display:flex;flex-direction:column;padding:10px}
.wo-chat-live{display:inline-flex;align-items:center;gap:5px;font-size:8px;color:var(--green);text-transform:uppercase;letter-spacing:.06em;font-weight:600}
.wo-chat-live-dot{width:6px;height:6px;border-radius:50%;background:var(--green);animation:woPulse 2s ease-in-out infinite}
.wo-chat-msgs{display:flex;flex-direction:column;gap:6px;max-height:340px;min-height:140px;overflow-y:auto;padding:8px 4px;background:var(--bg);border:1px solid var(--border);border-radius:6px;margin-bottom:8px}
.wo-chat-msg{padding:5px 8px;border-radius:6px;background:var(--bg2);max-width:85%;align-self:flex-start;font-size:11px;line-height:1.4}
.wo-chat-msg.mine{align-self:flex-end;background:var(--accent);color:#fff}
.wo-chat-msg.mine .wo-chat-meta{color:rgba(255,255,255,.78)}
.wo-chat-msg.sys{align-self:center;background:transparent;border:1px dashed var(--border);font-style:italic;color:var(--muted);font-size:10px}
.wo-chat-meta{display:flex;justify-content:space-between;gap:8px;font-size:9px;color:var(--muted);margin-bottom:2px}
.wo-chat-who{font-weight:600;color:var(--text)}
.wo-chat-msg.mine .wo-chat-who{color:#fff}
.wo-chat-time{font-family:var(--mono)}
.wo-chat-body{white-space:pre-wrap;word-break:break-word}
.wo-chat-input{display:flex;gap:4px;align-items:stretch}
.wo-chat-input textarea{flex:1;background:var(--surface-2);border:1px solid var(--border);border-radius:6px;padding:6px 8px;color:var(--text);font:inherit;font-size:11px;resize:none}
.wo-chat-input button{background:var(--accent);color:#fff;border:none;padding:6px 12px;border-radius:6px;cursor:pointer;font-size:14px;font-weight:600}
.wo-chat-input button:hover{filter:brightness(1.15)}

/* === AI CHAT WIDGET === */
.ai-chat-modal{position:fixed;inset:0;background:rgba(0,0,0,0.4);display:flex;align-items:center;justify-content:center;z-index:9999}
.ai-chat-content{width:480px;max-width:95vw;height:580px;max-height:90vh;background:var(--bg2);border:1px solid var(--border);border-radius:12px;display:flex;flex-direction:column;box-shadow:0 20px 60px rgba(0,0,0,0.3);overflow:hidden}
.ai-chat-header{padding:12px 16px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;font-weight:600;color:var(--text);font-size:13px}
.ai-chat-header .ai-chat-role-badge{font-size:10px;font-weight:500;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-left:6px}
.ai-chat-msgs{flex:1;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:8px;background:var(--bg)}
.ai-chat-msg{padding:8px 12px;border-radius:10px;max-width:85%;font-size:13px;line-height:1.45;word-wrap:break-word;white-space:pre-wrap}
.ai-chat-msg.bot{align-self:flex-start;background:var(--bg3);color:var(--text);border:1px solid var(--border)}
.ai-chat-msg.user{align-self:flex-end;background:var(--accent);color:#fff}
.ai-chat-msg.sys{align-self:center;background:transparent;border:1px dashed var(--border);font-style:italic;color:var(--muted);font-size:11px;padding:4px 10px}
.ai-chat-msg b,.ai-chat-msg strong{font-weight:700}
.ai-chat-msg a{color:inherit;text-decoration:underline;cursor:pointer}
.ai-chat-tool-badge{display:inline-block;align-self:flex-start;font-size:10px;background:var(--bg3);color:var(--muted);border:1px solid var(--border);border-radius:8px;padding:2px 8px;margin-top:-4px}
.ai-chat-confirm{align-self:stretch;background:var(--bg3);border-left:3px solid var(--amber);border-radius:6px;padding:10px 12px;font-size:12px;color:var(--text);display:flex;flex-direction:column;gap:8px}
.ai-chat-confirm-actions{display:flex;gap:8px}
.ai-chat-confirm-actions button{padding:5px 12px;border-radius:5px;font-size:12px;font-weight:600;cursor:pointer;border:1px solid var(--border)}
.ai-chat-confirm-actions .ai-chat-btn-go{background:var(--accent);color:#fff;border-color:var(--accent)}
.ai-chat-confirm-actions .ai-chat-btn-cancel{background:var(--bg2);color:var(--text)}
.ai-chat-suggestion-chips{display:flex;flex-wrap:wrap;gap:6px;padding:10px 12px 0;background:var(--bg)}
.ai-chat-chip{cursor:pointer;background:var(--bg3);border:1px solid var(--border);color:var(--text);font-size:11px;padding:5px 10px;border-radius:14px;transition:all .15s;font-family:inherit}
.ai-chat-chip:hover{border-color:var(--accent);color:var(--accent)}
.ai-chat-input{display:flex;align-items:stretch;padding:8px 12px;border-top:1px solid var(--border);background:var(--bg2)}
.ai-chat-typing{align-self:flex-start;font-size:11px;color:var(--muted);font-style:italic;padding:4px 10px}
.ai-chat-empty{color:var(--muted);font-size:12px;text-align:center;padding:20px;font-style:italic}

/* Photo strip under the Correction box */
.wo-photo-strip{margin-top:6px}
.wo-photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px;margin-top:4px}
.wo-photo-thumb{position:relative;aspect-ratio:4/3;border-radius:6px;background:var(--bg3) center/cover no-repeat;border:1px solid var(--border);cursor:zoom-in;overflow:hidden;transition:transform .15s,border-color .15s}
.wo-photo-thumb:hover{border-color:var(--accent);transform:scale(1.02)}
.wo-photo-meta{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(to top,rgba(0,0,0,.65),transparent);color:#fff;font-size:9px;padding:8px 6px 4px;font-weight:500;text-shadow:0 1px 2px rgba(0,0,0,.6);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Photo lightbox — created on demand by woPhotoLightbox() */
#woPhotoLightbox{position:fixed;inset:0;background:rgba(0,0,0,.88);display:none;align-items:center;justify-content:center;z-index:9999;cursor:zoom-out;padding:20px}
#woPhotoLightbox img{max-width:96vw;max-height:94vh;border-radius:8px;box-shadow:0 8px 32px rgba(0,0,0,.6);object-fit:contain}

.wo-mic-btn{background:var(--bg3);border:1px solid var(--border);border-radius:5px;padding:6px 8px;cursor:pointer;color:var(--muted);font-size:13px;line-height:1;transition:all .15s}
.wo-mic-btn:hover{color:var(--text);border-color:var(--accent)}
.wo-mic-btn.recording{background:var(--red);color:#fff;border-color:transparent;animation:woPulse 1.4s infinite}
.wo-mic-btn:disabled{opacity:.4;cursor:not-allowed}

/* Tabs */
.wo-tabs{display:flex;gap:2px;border-bottom:1px solid var(--border);margin-top:14px}
.wo-tab{font-size:11px;padding:8px 14px;cursor:pointer;color:var(--muted);font-weight:500;border-bottom:2px solid transparent;margin-bottom:-1px}
.wo-tab.active{color:var(--text);border-bottom-color:var(--accent)}
.wo-tab .tab-count{font-size:9px;background:var(--bg3);color:var(--muted);padding:1px 5px;border-radius:8px;margin-left:5px;font-family:var(--mono)}
.wo-tab.active .tab-count{background:var(--accent);color:#fff}
.wo-tab-pane{padding:14px 0;display:none}
.wo-tab-pane.active{display:block}

/* Side cards */
.wo-card{background:var(--bg3);border-radius:8px;padding:12px;margin-bottom:12px}
.wo-card-title{font-size:10px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px}
.wo-card-row{display:flex;justify-content:space-between;font-size:11px;padding:3px 0;color:var(--text)}
.wo-card-row .k{color:var(--muted)}
.wo-card-row .v{font-family:var(--mono);text-align:right}
.wo-equipment-photo{width:100%;height:120px;background:var(--bg);border:1px dashed var(--border);border-radius:6px;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:10px;margin-bottom:10px;background-size:cover;background-position:center}
.wo-equipment-photo.has-img{border:1px solid var(--border);border-style:solid}

.wo-map{width:100%;height:200px;border-radius:6px;background:var(--bg);border:1px solid var(--border);position:relative;overflow:hidden}
.wo-map-empty{display:flex;align-items:center;justify-content:center;height:100%;font-size:10px;color:var(--muted);text-align:center;padding:14px}
.wo-map-pin-link{font-size:10px;color:var(--accent);margin-top:6px;display:inline-block;text-decoration:none}

/* Parts table */
.wo-parts-table{width:100%;border-collapse:collapse;font-size:11px}
.wo-parts-table th{text-align:left;padding:6px 8px;color:var(--muted);font-weight:600;font-size:9px;text-transform:uppercase;letter-spacing:.04em;border-bottom:1px solid var(--border)}
.wo-parts-table td{padding:6px 8px;border-bottom:1px solid var(--border);color:var(--text);vertical-align:top}
.wo-parts-empty{padding:14px;text-align:center;color:var(--muted);font-size:11px}
.wo-parts-section-title{font-size:10px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.06em;margin-top:14px;margin-bottom:6px;display:flex;align-items:center;justify-content:space-between}
.wo-parts-section-title:first-child{margin-top:0}
.wo-request-part-btn{font-size:10px;padding:4px 10px;border-radius:5px;background:var(--accent);color:#fff;border:none;cursor:pointer}

/* Manager / Admin views */
.wo-manager-table{width:100%;border-collapse:collapse;font-size:11px;background:var(--bg2);border-radius:8px;overflow:hidden}
.wo-manager-table th{background:var(--bg3);text-align:left;padding:8px 10px;color:var(--muted);font-weight:600;font-size:9px;text-transform:uppercase;letter-spacing:.04em}
.wo-manager-table tr{cursor:pointer}
.wo-manager-table tr:hover{background:var(--hover)}
.wo-manager-table tr.selected{background:var(--bg3)}
.wo-manager-table td{padding:8px 10px;border-top:1px solid var(--border);vertical-align:top}
/* Top filter bar — broad slicing (Team / Tech / Job / Vendor / Sort) above the WO table */
.wo-top-filters{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:10px;padding:10px 12px;background:var(--bg2);border:1px solid var(--border);border-radius:8px}
.wo-top-filters select{background:var(--surface-2);border:1px solid var(--border);color:var(--text);padding:6px 10px;border-radius:5px;font-size:11px;min-width:130px}
.wo-top-filters select:focus{outline:none;border-color:var(--accent)}
.wo-filter-pill{background:var(--accent);color:#fff;border:none;padding:6px 12px;border-radius:5px;font-size:11px;font-weight:600;cursor:pointer;text-transform:uppercase;letter-spacing:.04em}
.wo-filter-pill:hover{filter:brightness(1.12)}

/* Group-by-Job header rows in the WO list */
.wo-job-header td{background:var(--bg3);font-size:11px;font-weight:600;color:var(--text);padding:8px 10px;text-transform:uppercase;letter-spacing:.04em;border-top:2px solid var(--accent)!important}
.wo-job-header .job-num{color:var(--accent);font-family:var(--mono);margin-right:8px}

/* Per-column filter row sits under the table header. Sticky so it stays put while scrolling. */
.wo-manager-table thead tr.wo-filter-row th{background:var(--bg2);padding:4px 6px;border-top:1px solid var(--border);position:sticky;top:30px;z-index:1}
.wo-manager-table thead tr:first-child th{position:sticky;top:0;z-index:2}
.wo-col-filter{width:100%;background:var(--surface-2);border:1px solid var(--border);color:var(--text);padding:4px 6px;border-radius:4px;font-size:10px;font-family:inherit;box-sizing:border-box}
.wo-col-filter:focus{outline:none;border-color:var(--accent)}

.wo-admin-actions{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.wo-admin-actions button{font-size:10px;padding:6px 12px;border-radius:5px;background:var(--bg3);color:var(--text);border:1px solid var(--border);cursor:pointer}

/* Telematics → Install (079-tracker-install.js). Same field look as the shop intake
   modal; the tracker/unit pickers use the shared .wo-typeahead-* dropdown. */
#page-telematics-install .ti-form{max-width:560px}
#page-telematics-install .ti-field{margin-bottom:12px}
#page-telematics-install .ti-label{font-size:10px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin-bottom:4px;font-weight:600;display:block}
#page-telematics-install .ti-input{width:100%;font-size:13px;padding:8px 10px;border:1px solid var(--border2);border-radius:7px;background:var(--bg3);color:var(--text);font-family:var(--font);box-sizing:border-box}
#page-telematics-install textarea.ti-input{min-height:56px;resize:vertical}
#page-telematics-install .ti-input:focus{outline:none;border-color:var(--accent)}
#page-telematics-install .ti-input:disabled{opacity:.5;cursor:not-allowed}
#page-telematics-install .ti-hours-row{display:flex;gap:10px;align-items:center}
#page-telematics-install .ti-hours-row .ti-input{flex:1;min-width:0}
#page-telematics-install .ti-check{display:flex;gap:6px;align-items:center;font-size:12px;white-space:nowrap;cursor:pointer}
.ti-hint{font-size:10px;color:var(--muted);font-weight:400;text-transform:none;letter-spacing:0}
.ti-card{background:var(--bg3);border-radius:6px;padding:8px 10px;font-size:11px;margin-top:6px}
.ti-card-grid{display:grid;grid-template-columns:auto 1fr;gap:3px 12px;font-family:var(--mono)}
.ti-card-grid>span:nth-child(odd){color:var(--muted)}
#page-telematics-install .ti-warn{background:var(--bg3);border-left:3px solid var(--amber);border-radius:6px;padding:10px 12px;margin-bottom:12px;font-size:12px}
#page-telematics-install .ti-error{color:var(--red);font-size:12px;margin-bottom:10px}
#page-telematics-install .ti-ok{color:var(--green);font-size:12px;margin-bottom:10px}
/* Install photo slots (079 _tiPhotoSet) — unscoped: the Move modal lives on <body>. */
.ti-photos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.ti-photo{background:var(--bg3);border:1px solid var(--border2);border-radius:8px;padding:8px;display:flex;flex-direction:column;gap:6px;min-width:0}
.ti-photo-missing{border-color:var(--red);box-shadow:0 0 0 1px var(--red)}
.ti-photo-label{font-size:11px;font-weight:600;color:var(--text)}
.ti-photo-req{color:var(--red)}
.ti-photo-input{display:none}
.ti-photo-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:96px;border:1px dashed var(--border2);border-radius:6px;cursor:pointer;color:var(--muted);font-size:12px}
.ti-photo-empty:hover{border-color:var(--accent);color:var(--text)}
.ti-photo-missing .ti-photo-empty{border-color:var(--red);color:var(--red)}
.ti-photo-cam{font-size:22px;line-height:1}
.ti-photo-thumb{width:100%;height:96px;object-fit:cover;border-radius:6px;display:block;background:var(--bg2)}
.ti-photo-actions{display:flex;gap:6px;flex-wrap:wrap}
.ti-photo-actions .btn{flex:1;text-align:center;cursor:pointer}
.ti-need{color:var(--amber);font-size:11px;margin-bottom:8px}
.ti-photo-count{white-space:nowrap}
.ti-photo-count-none{opacity:.6}
.ti-gallery{position:fixed;inset:0;background:rgba(8,12,20,.7);z-index:9000;display:flex;align-items:center;justify-content:center;padding:16px}
.ti-gallery-box{background:var(--bg2);color:var(--text);border:1px solid var(--border);border-radius:12px;padding:18px;width:min(760px,100%);max-height:calc(100vh - 32px);overflow-y:auto;box-sizing:border-box}
.ti-gallery-head{display:flex;gap:10px;align-items:flex-start;justify-content:space-between;margin-bottom:12px}
.ti-gallery-head h3{margin:0;font-size:15px}
.ti-gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}
.ti-gallery-item{margin:0;background:var(--bg3);border-radius:8px;overflow:hidden}
.ti-gallery-item img{width:100%;height:150px;object-fit:cover;display:block;cursor:zoom-in;background:var(--bg2)}
.ti-gallery-item figcaption{padding:6px 8px;font-size:11px;display:flex;flex-direction:column;gap:2px}
.ti-gallery-item figcaption span{color:var(--muted);font-size:10px}
.ti-gallery-broken{height:40px !important;cursor:default !important}
.ti-gallery .ti-error{color:var(--red);font-size:12px}
@media (max-width:640px){#page-telematics-install .ti-form{max-width:none}#page-telematics-install .ti-input{font-size:16px}}

/* ── Equipment → Photos tab (080) ─────────────────────────────────────────── */
/* Seven tabs no longer fit a phone: let the strip scroll instead of wrapping. */
.eq-tabs{overflow-x:auto;scrollbar-width:none}
.eq-tabs::-webkit-scrollbar{display:none}
.eq-tab{white-space:nowrap;flex:0 0 auto}
.eqph-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.eqph-source{min-width:200px;max-width:100%;background:var(--surface-2);border:1px solid var(--border);color:var(--text);padding:5px 8px;border-radius:5px;font-size:11px}
.eqph-total{color:var(--muted);font-size:11px}
.eqph-add{margin-left:auto}
.eqph-empty{padding:30px 10px;text-align:center;color:var(--muted);font-size:12px;display:flex;flex-direction:column;gap:10px;align-items:center}
.eqph-hint{color:var(--muted);font-size:11px}
.eqph-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}
.eqph-tile{display:flex;flex-direction:column;padding:0;border:1px solid var(--border);border-radius:9px;background:var(--bg3);overflow:hidden;cursor:pointer;text-align:left;color:var(--text);font:inherit;min-width:0}
.eqph-tile:hover,.eqph-tile:focus-visible{border-color:var(--accent);outline:none}
.eqph-img{display:block;aspect-ratio:4/3;background:var(--bg);position:relative;overflow:hidden}
.eqph-img img{width:100%;height:100%;object-fit:cover;display:block}
.eqph-img.broken img{display:none}
.eqph-img.broken::after{content:'Image unavailable';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:10px}
.eqph-meta{display:flex;flex-direction:column;gap:4px;padding:6px 8px 8px;min-width:0}
.eqph-date{font-size:11px;font-weight:500}
.eqph-tags{display:flex;align-items:center;gap:5px;min-width:0;flex-wrap:wrap}
.eqph-sub{font-size:10px;color:var(--muted);font-family:var(--mono);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;max-width:100%}
.eqph-pill{--c:var(--muted);display:inline-block;font-size:9px;font-weight:600;letter-spacing:.02em;padding:2px 7px;border-radius:9px;white-space:nowrap;color:var(--c);background:color-mix(in srgb,var(--c) 16%,transparent);border:1px solid color-mix(in srgb,var(--c) 35%,transparent)}
.eqph-f-wo{--c:var(--accent)}
.eqph-f-insp{--c:var(--purple)}
.eqph-f-request{--c:var(--amber)}
.eqph-f-shop{--c:var(--teal)}
.eqph-f-gps{--c:var(--cyan)}
.eqph-f-part{--c:var(--green)}
.eqph-f-damaged{--c:var(--red)}
.eqph-f-removed{--c:var(--orange)}
.eqph-f-general{--c:var(--muted)}
.eqph-f-pdi{--c:var(--indigo)}
.eqph-f-profile{--c:var(--pink)}
.eqph-more{display:flex;justify-content:center;align-items:center;gap:8px;padding:14px 0 4px}
/* lightbox */
.eqph-lb{position:fixed;inset:0;z-index:9000;background:rgba(8,12,20,.82);display:flex;align-items:center;justify-content:center;padding:16px}
.eqph-lb-box{display:flex;background:var(--bg2);color:var(--text);border:1px solid var(--border);border-radius:12px;overflow:hidden;width:min(1100px,100%);max-height:calc(100vh - 32px)}
.eqph-lb-img{flex:1 1 auto;min-width:0;background:#000;position:relative;display:flex;align-items:center;justify-content:center}
.eqph-lb-img img{max-width:100%;max-height:calc(100vh - 32px);object-fit:contain;display:block}
.eqph-lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:56px;border:none;border-radius:8px;background:rgba(0,0,0,.45);color:#fff;font-size:30px;line-height:1;cursor:pointer}
.eqph-lb-nav.prev{left:8px}.eqph-lb-nav.next{right:8px}
.eqph-lb-nav:disabled{opacity:.25;cursor:default}
.eqph-lb-side{flex:0 0 290px;padding:14px 16px;display:flex;flex-direction:column;gap:8px;overflow-y:auto;font-size:12px}
.eqph-lb-head{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.eqph-lb-close{border:none;background:none;color:var(--muted);font-size:22px;line-height:1;cursor:pointer;padding:0 2px}
.eqph-lb-row{display:flex;gap:8px}
.eqph-lb-row .k{flex:0 0 64px;color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.04em;padding-top:2px}
.eqph-lb-caption{white-space:pre-wrap;background:var(--bg3);padding:8px 10px;border-radius:6px}
.eqph-lb-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.eqph-lb-actions a.btn{text-decoration:none;display:inline-flex;align-items:center}
.eqph-lb-pos{margin-top:auto}
/* upload modal */
.eqph-up{width:440px;max-width:96vw;max-height:90vh}
.eqph-up input[type=text],.eqph-up textarea,.eqph-up select{width:100%;box-sizing:border-box}
.eqph-up textarea{background:var(--bg3);border:1px solid var(--border);border-radius:6px;color:var(--text);padding:7px 9px;font:inherit;resize:vertical}
.eqph-up-pick{display:flex;gap:8px;flex-wrap:wrap}
.eqph-up-btn{position:relative;overflow:hidden;display:inline-flex !important;align-items:center;margin:0 !important;text-transform:none !important;letter-spacing:0 !important;font-size:10px !important;color:var(--text) !important}
.eqph-up-btn input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%}
.eqph-up-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(70px,1fr));gap:6px;margin-top:8px}
.eqph-up-list .eqph-hint{grid-column:1 / -1}
.eqph-up-item{position:relative;aspect-ratio:1;border-radius:6px;overflow:hidden;background:var(--bg3);border:1px solid var(--border)}
.eqph-up-item img{width:100%;height:100%;object-fit:cover;display:block}
.eqph-up-noimg{display:flex;align-items:center;justify-content:center;height:100%}
.eqph-up-rm{position:absolute;top:2px;right:2px;width:20px;height:20px;border-radius:50%;border:none;background:rgba(0,0,0,.6);color:#fff;font-size:14px;line-height:1;cursor:pointer}
.eqph-up-err{color:var(--red);font-size:11px;min-height:14px;margin-top:6px}
.eqph-up-foot{display:flex;justify-content:flex-end;gap:8px;margin-top:10px}
/* Phone: the 380px list + detail grid left the detail pane ~2px wide, so no tab
   (Photos included) was usable. Stack them: list on top (scrolls), detail below. */
@media (max-width:760px){
  .eq-shell{grid-template-columns:minmax(0,1fr);height:auto}
  .eq-list-pane{height:auto;max-height:45vh}
  .eq-detail-pane{height:auto;overflow:visible;min-width:0}
  .eq-detail-hdr{grid-template-columns:repeat(2,minmax(0,1fr))}
  .eq-detail-hdr > div:first-child{grid-column:1 / -1}
  .eq-detail-hdr .photo,.eq-detail-hdr .hdr-map{width:100%}
  .eq-tabs{padding:0 8px}
  .eq-tab-pane{padding:12px}
}
@media (max-width:640px){
  .eqph-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px}
  .eqph-source{min-width:0;flex:1 1 160px}
  .eqph-lb{padding:0}
  .eqph-lb-box{flex-direction:column;max-height:100vh;height:100%;border-radius:0}
  .eqph-lb-img{flex:1 1 auto;min-height:0}
  .eqph-lb-img img{max-height:100%}
  .eqph-lb-side{flex:0 0 auto;max-height:50vh}
  .eqph-up input[type=text],.eqph-up textarea{font-size:16px}
}

/* === TIME & PAYROLL — Today / Time & Location board (086-time-location.js) ===
   No pay figures anywhere in .tl-* — hours only. */
.tl-page-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.tl-seg{display:flex;gap:2px;background:var(--bg3);border-radius:8px;padding:2px;border:1px solid var(--border)}
.tl-seg-btn{font-size:12px;padding:6px 14px;border-radius:6px;border:none;background:transparent;color:var(--muted);cursor:pointer;font-family:var(--font);font-weight:500;white-space:nowrap}
.tl-seg-btn.active{background:var(--bg2);color:var(--text);box-shadow:0 1px 3px rgba(0,0,0,.25)}
.tl-seg-btn:hover:not(.active){color:var(--text)}
.tl-filters{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.tl-f{display:flex;flex-direction:column;gap:3px;min-width:0}
.tl-f label{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;font-weight:600}
.tl-f input,.tl-f select{font-size:12px;padding:6px 9px;border-radius:7px;border:1px solid var(--border2);background:var(--bg3);color:var(--text);font-family:var(--font);min-width:0}
.tl-f select{width:170px;max-width:100%}
.tl-today-btn{align-self:flex-end;margin-bottom:2px}
.tl-f-actions{display:flex;align-items:center;gap:8px;margin-left:auto}
.tl-live-note{font-size:10px;color:var(--muted)}
.tl-chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.tl-chip{font-size:11px;padding:4px 10px;border-radius:14px;border:1px solid var(--border2);background:var(--bg2);color:var(--text);cursor:pointer;font-family:var(--font);display:inline-flex;align-items:center;gap:6px}
.tl-chip:hover{border-color:var(--accent)}
.tl-chip.on{background:rgba(79,142,247,.16);border-color:var(--accent);color:var(--accent);font-weight:600}
.tl-chip-n{font-family:var(--mono);font-size:10px;color:var(--muted);background:var(--bg3);border-radius:8px;padding:0 6px}
.tl-chip.on .tl-chip-n{color:var(--accent)}
.tl-chip-out_of_fence.on,.tl-chip-missing_out.on,.tl-chip-deduct_suggested.on{background:rgba(240,96,96,.14);border-color:var(--red);color:var(--red)}
.tl-chip-clear{font-size:11px;background:none;border:none;color:var(--muted);cursor:pointer;text-decoration:underline;font-family:var(--font)}
.tl-board{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:14px;align-items:start}
.tl-list-panel{min-width:0}
.tl-list{max-height:calc(100vh - 290px);min-height:240px;overflow-y:auto}
.tl-map-panel{position:sticky;top:12px;min-width:0}
.tl-map{height:calc(100vh - 330px);min-height:320px;background:var(--bg3)}
.tl-legend{display:flex;gap:12px;flex-wrap:wrap;padding:8px 12px;font-size:10px;color:var(--muted);border-top:1px solid var(--border)}
.tl-legend span{display:inline-flex;align-items:center;gap:5px}
.tl-dot{display:inline-block;width:9px;height:9px;border-radius:50%}
.tl-line{display:inline-block;width:16px;height:3px;border-radius:2px;background:#f5a524}
.tl-empty{padding:22px 14px;text-align:center;color:var(--muted);font-size:12px;line-height:1.6}
.tl-row-head,.tl-row-main{display:grid;grid-template-columns:14px minmax(110px,1.1fr) minmax(140px,1.8fr) 128px 52px minmax(120px,1.2fr) auto;gap:10px;align-items:center}
.tl-row-head{padding:7px 14px;font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;font-weight:600;border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--bg2);z-index:1}
.tl-row{border-bottom:1px solid var(--border)}
.tl-row-main{padding:9px 14px;cursor:pointer;font-size:12px}
.tl-row-main:hover{background:var(--hover,rgba(127,127,127,.06))}
.tl-row.sel>.tl-row-main{background:rgba(79,142,247,.08);box-shadow:inset 3px 0 0 var(--accent)}
.tl-sdot{width:9px;height:9px;border-radius:50%;background:var(--muted);opacity:.5}
.tl-sdot-live{background:var(--green);opacity:1;box-shadow:0 0 0 3px rgba(45,212,160,.22)}
.tl-sdot-red{background:var(--red);opacity:1}
.tl-who{min-width:0}
.tl-name{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tl-sub{font-size:10px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tl-for{font-size:11px;min-width:0;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.tl-sep{color:var(--muted)}
.tl-indirect{color:var(--purple);font-weight:500}
.tl-times{font-family:var(--mono);font-size:11px;white-space:nowrap}
.tl-arrow{color:var(--muted);margin:0 3px}
.tl-hrs{font-family:var(--mono);font-size:12px;font-weight:600;text-align:right}
.tl-badges{display:flex;align-items:center;gap:5px;flex-wrap:wrap;min-width:0}
.tl-acts{display:flex;align-items:center;gap:6px;justify-content:flex-end}
.tl-exp{background:none;border:none;color:var(--muted);cursor:pointer;font-size:11px;padding:4px}
.tl-fence{display:inline-block;font-size:10px;font-weight:600;padding:2px 7px;border-radius:9px;white-space:nowrap;border:1px solid transparent}
.tl-fence-green{background:rgba(45,212,160,.14);color:var(--green)}
.tl-fence-red{background:rgba(240,96,96,.14);color:var(--red)}
.tl-fence-amber{background:rgba(245,165,36,.15);color:var(--amber)}
.tl-fence-grey{background:var(--bg3);color:var(--muted)}
.tl-fence-dashed{border:1px dashed var(--border2)}
.tl-flag{font-size:9px;font-weight:700;padding:1px 6px;border-radius:8px;text-transform:uppercase;letter-spacing:.04em}
.tl-flag-amber{background:rgba(245,165,36,.15);color:var(--amber)}
.tl-flag-red{background:rgba(240,96,96,.14);color:var(--red)}
.tl-edited{color:var(--amber);font-size:12px}
.tl-approved{color:var(--green);font-weight:700;font-size:13px}
.tl-lock{font-size:10px;color:var(--muted);white-space:nowrap}
.tl-muted{color:var(--muted)}
.tl-red-txt{color:var(--red)}
.tl-live-txt{color:var(--green);font-weight:600}
.tl-timeline{background:var(--bg3);padding:6px 14px 10px 38px;display:flex;flex-direction:column;gap:2px}
.tl-punch{padding:7px 0;border-bottom:1px dashed var(--border);font-size:11px}
.tl-punch:last-child{border-bottom:none}
.tl-punch.sel{background:rgba(79,142,247,.07);margin:0 -8px;padding-left:8px;padding-right:8px;border-radius:6px}
.tl-punch-line{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tl-ptime{font-family:var(--mono);font-weight:600;min-width:62px}
.tl-ptype{font-size:9px;font-weight:700;padding:1px 6px;border-radius:7px;background:var(--bg2);color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.tl-ptype-in{color:var(--green)}
.tl-ptype-out{color:var(--accent)}
.tl-pfor{min-width:0}
.tl-link{background:none;border:none;color:var(--accent);cursor:pointer;font-size:10px;padding:0;font-family:var(--font);text-decoration:underline}
.tl-reason{margin:3px 0 0 70px;color:var(--text);font-style:italic}
.tl-deduct{margin:6px 0 2px 70px;padding:8px 10px;border-radius:8px;border:1px solid rgba(240,96,96,.35);background:rgba(240,96,96,.06);display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.tl-deduct.dismissed{opacity:.6;border-style:dashed}
.tl-deduct-txt{flex:1 1 260px;line-height:1.5}
.tl-deduct-btns{display:flex;gap:6px;flex-wrap:wrap}
.tl-adjs{margin:4px 0 0 70px;display:flex;flex-direction:column;gap:4px}
.tl-adj{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tl-adj.undone{opacity:.55;text-decoration:line-through}
.tl-adj-min{font-family:var(--mono);font-weight:700;color:var(--red)}
.tl-audit{margin:4px 0 0 70px}
.tl-audit summary{cursor:pointer;color:var(--muted);font-size:10px}
.tl-audit-row{display:flex;gap:8px;flex-wrap:wrap;padding:3px 0;font-size:10px}
.tl-audit-field{font-weight:600;font-family:var(--mono)}
.tl-err{color:var(--red);font-size:11px;margin-top:10px;background:rgba(240,96,96,.08);padding:8px 10px;border-radius:6px}
.tl-detail-body{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:0;align-items:stretch}
.tl-detail-list{max-height:520px;overflow-y:auto;border-right:1px solid var(--border)}
.tl-detail-map{height:auto;min-height:380px}
.tl-dday{border-bottom:1px solid var(--border)}
.tl-dday-hdr{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:9px 14px;cursor:pointer;font-size:12px}
.tl-dday-hdr:hover{background:var(--hover,rgba(127,127,127,.06))}
.tl-dday-date{font-weight:600;min-width:96px}
.tl-dday .tl-timeline{padding-left:24px}
/* Clock widget: out-of-fence reason sheet (070) */
.clock-reason-list{display:flex;flex-direction:column;gap:2px}
.modal .clock-reason-opt{display:flex;align-items:center;gap:8px;text-transform:none;letter-spacing:0;font-size:13px;font-weight:400;color:var(--text);margin:0;padding:8px 6px;border-radius:6px;cursor:pointer}
.modal .clock-reason-opt:hover{background:var(--bg3)}
.modal .clock-reason-opt input{width:16px;height:16px;flex:0 0 16px;margin:0;padding:0;accent-color:var(--accent)}
@media (max-width:1200px){
  .tl-board,.tl-detail-body{grid-template-columns:minmax(0,1fr)}
  .tl-map-panel{position:static}
  .tl-map{height:360px}
  .tl-list{max-height:none}
  .tl-detail-list{border-right:none;border-bottom:1px solid var(--border)}
}
@media (max-width:760px){
  .tl-row-head{display:none}
  .tl-row-main{grid-template-columns:14px minmax(0,1fr) auto;grid-template-areas:"dot who hrs" ". for for" ". times times" ". badges acts"}
  .tl-row-main>.tl-sdot{grid-area:dot}.tl-who{grid-area:who}.tl-hrs{grid-area:hrs}.tl-for{grid-area:for}.tl-times{grid-area:times}.tl-badges{grid-area:badges}.tl-acts{grid-area:acts}
  .tl-f{flex:1 1 140px}.tl-f select{width:100%}
  .tl-f-actions{margin-left:0;width:100%}
  .tl-timeline{padding-left:14px}
  .tl-reason,.tl-deduct,.tl-adjs,.tl-audit{margin-left:0}
  .tl-seg{width:100%}.tl-seg-btn{flex:1}
}
/* === PARTS → CYCLE COUNTS (087) === quantities only, never cost. */
.cyc-lock-badge{margin-left:6px;vertical-align:middle}
.cyc-toolbar{flex-wrap:wrap}
.cyc-empty{padding:24px;color:var(--muted);font-size:11px;text-align:center}
.cyc-err-text{color:var(--red)}
.cyc-err{color:var(--red);font-size:11px;margin:8px 0}
.cyc-flash{color:var(--green);font-size:11px;margin:8px 0}
.cyc-muted{color:var(--muted)}
.cyc-sub{font-size:9px;color:var(--muted);margin-top:1px}
.cyc-opt{color:var(--muted);font-weight:400;text-transform:none;letter-spacing:0}
.cyc-hint{font-size:10px;color:var(--muted);margin-top:6px;line-height:1.45}
.cyc-hint kbd{font-family:var(--mono);font-size:9px;padding:0 4px;border:1px solid var(--border2);border-radius:3px;background:var(--bg3)}
.cyc-keys{margin:0 0 10px}
.cyc-textarea{width:100%;background:var(--surface-2,var(--bg3));border:1px solid var(--border2);border-radius:7px;color:var(--text);padding:8px;font:inherit;font-size:12px;resize:vertical;box-sizing:border-box}
.cyc-label{font-size:10px;color:var(--muted);display:block;margin:14px 0 4px;font-weight:500;text-transform:uppercase;letter-spacing:.04em}
.cyc-table-wrap{overflow-x:auto}
.cyc-num{text-align:right!important;white-space:nowrap}
.cyc-row{cursor:pointer}
.cyc-row:focus{outline:2px solid var(--accent);outline-offset:-2px}
.cyc-bar{height:6px;border-radius:3px;background:var(--bg3);overflow:hidden;flex:1;min-width:60px}
.cyc-bar span{display:block;height:100%;background:var(--accent);transition:width .2s}
.cyc-prog-mini{display:flex;align-items:center;gap:8px;min-width:120px}
/* start modal */
.cyc-start-modal,.cyc-add-modal{width:440px;max-width:calc(100vw - 32px)}
.cyc-seg{display:flex;gap:6px}
.cyc-seg .filter-btn{flex:1;justify-content:center;font-family:var(--font)}
.cyc-conflicts{margin:6px 0 0 16px;padding:0}
/* detail */
.cyc-head{margin-bottom:12px}
.cyc-back{margin-bottom:10px}
.cyc-title-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.cyc-title{font-size:16px;font-weight:600;color:var(--text);margin:0}
.cyc-scope{font-size:12px;color:var(--text)}
.cyc-meta{font-size:10px;color:var(--muted);margin-top:4px}
.cyc-note-block{font-size:11px;color:var(--text);margin-top:6px;background:var(--bg3);border-radius:6px;padding:6px 10px}
.cyc-banner{font-size:11px;padding:8px 12px;border-radius:7px;background:rgba(79,142,247,.08);border:1px solid rgba(79,142,247,.25);color:var(--text);margin-bottom:10px}
.cyc-banner-warn{background:rgba(245,165,36,.08);border-color:rgba(245,165,36,.3)}
.cyc-banner-ok{background:rgba(45,212,160,.08);border-color:rgba(45,212,160,.3)}
.cyc-sheet-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.cyc-search{flex:1 1 240px;max-width:360px}
.cyc-progress{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--muted);flex:0 1 220px;min-width:160px}
.cyc-progress strong{color:var(--text)}
.cyc-actions{display:flex;gap:6px;flex-wrap:wrap;margin-left:auto}
.cyc-actions .btn:disabled,.cyc-review-actions .btn:disabled{opacity:.45;cursor:not-allowed}
.cyc-check{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--text);cursor:pointer;white-space:nowrap}
.cyc-check input{margin:0}
.cyc-summary{font-size:11px;color:var(--muted);margin-left:auto}
.cyc-review-actions{display:flex;gap:8px;align-items:center;margin-top:12px;flex-wrap:wrap}
/* count sheet */
.cyc-sheet .cyc-bin-row td{background:var(--bg3);font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);padding:6px 12px}
.cyc-sheet .cyc-bin-row.done td{color:var(--green)}
.cyc-sheet .cyc-bin-row .mono{color:var(--text);font-size:11px;text-transform:none}
.cyc-sheet td{padding:6px 12px;vertical-align:middle}
.cyc-qty{width:96px;text-align:right;font-family:var(--mono);font-size:13px;padding:6px 8px;border-radius:6px;border:1px solid var(--border2);background:var(--bg3);color:var(--text);outline:none;-moz-appearance:textfield}
.cyc-qty::-webkit-outer-spin-button,.cyc-qty::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.cyc-qty:focus{border-color:var(--accent);box-shadow:0 0 0 2px rgba(79,142,247,.25)}
.cyc-note{width:100%;min-width:120px;font-size:11px;padding:5px 8px;border-radius:6px;border:1px solid transparent;background:transparent;color:var(--text);outline:none}
.cyc-note:hover:not(:disabled),.cyc-note:focus{border-color:var(--border2);background:var(--bg3)}
.cyc-line.counted .cyc-qty{border-color:rgba(45,212,160,.45)}
.cyc-line.err .cyc-qty{border-color:var(--red)}
.cyc-sheet tr.cyc-line:focus-within td{background:rgba(79,142,247,.06)}
.cyc-state{font-size:10px;white-space:nowrap}
.cyc-ok{color:var(--green);font-weight:600}
/* review */
.cyc-cb{width:28px}
.cyc-cb input{margin:0}
.cyc-var-pos{color:var(--accent);font-weight:600}
.cyc-var-neg{color:var(--red);font-weight:600}
.cyc-moved{color:var(--amber);font-weight:600}
@media (max-width:640px){
  .cyc-search{max-width:none}
  .cyc-actions,.cyc-summary{margin-left:0}
  .cyc-qty{width:80px;font-size:16px}
  .cyc-textarea,.cyc-start-modal input,.cyc-add-modal input{font-size:16px}
}
.cyc-start-modal .mbtns button:disabled,.cyc-add-modal .mbtns button:disabled{opacity:.45;cursor:not-allowed}