*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
--bg:#F5F1E8;--surf:#ffffff;--surf2:#FAF7F0;
--bdr:#E4DCC8;--bdr2:#D4C9B0;
--tx:#1C1814;--txm:#887F70;--txd:#C2B8A2;
--out-bg:#F3DBD7;--out-bdr:#A73027;
--cov-bg:#D9E9DD;--cov-bdr:#2D5F3F;
--mix-bg:#F5E9C7;--mix-bdr:#B8860B;
--green:#2D5F3F;--red:#A73027;--amber:#B8860B;--blue:#8B6508;
}
html,body{height:100%;overflow:hidden;font-family:'IBM Plex Sans',sans-serif;background:var(--bg);color:var(--tx);font-size:14px}
/* HEADER */
.hd{height:52px;background:var(--surf);border-bottom:1px solid var(--bdr);box-shadow:0 1px 3px rgba(0,0,0,.06);display:flex;align-items:center;padding:0 14px;gap:12px;position:sticky;top:0;z-index:20}
.brand{font-family:'IBM Plex Sans',sans-serif;font-size:16px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--blue);flex-shrink:0}
.vd{width:1px;height:20px;background:var(--bdr2);flex-shrink:0}
.dt{font-family:'IBM Plex Sans',sans-serif;font-size:11px;font-weight:600;letter-spacing:.5px;color:var(--txm);text-transform:uppercase;flex-shrink:0}
.conn{display:flex;align-items:center;gap:5px;flex-shrink:0}
.conn-dot{width:7px;height:7px;border-radius:50%;background:var(--txd);transition:background .4s}
.conn-dot.live{background:var(--green)}
.conn-dot.off{background:var(--red)}
.conn-lbl{font-family:'IBM Plex Sans',sans-serif;font-size:10px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--txd);transition:color .4s}
.conn.live .conn-lbl{color:var(--green)}.conn.off .conn-lbl{color:var(--red)}
.stats{display:flex;gap:6px;margin-left:auto}
.sp{display:flex;align-items:center;gap:5px;padding:3px 9px;border-radius:16px;border:1px solid var(--bdr2);font-family:'IBM Plex Sans',sans-serif;font-size:11px;font-weight:700}
.sp .n{font-size:14px;font-weight:700;line-height:1}
.sp.act{border-color:rgba(22,163,74,.3);color:var(--green);background:rgba(22,163,74,.06)}
.sp.out{border-color:rgba(220,38,38,.3);color:var(--red);background:rgba(220,38,38,.05)}
.sp.gap{border-color:rgba(217,119,6,.3);color:var(--amber);background:rgba(217,119,6,.06)}
.hd-btns{display:flex;gap:5px}
.btn{padding:4px 10px;border-radius:6px;border:1px solid var(--bdr2);background:transparent;color:var(--txm);font-family:'IBM Plex Sans',sans-serif;font-size:11px;font-weight:600;cursor:pointer;transition:all .12s}
.btn:hover{color:var(--tx);border-color:var(--bdr2);background:var(--surf2)}
.btn.danger:hover{color:var(--red);border-color:var(--out-bdr)}
/* FILTERS */
.ft{height:38px;background:var(--surf);border-bottom:1px solid var(--bdr);display:flex;align-items:center;padding:0 14px;gap:4px;overflow-x:auto;flex-shrink:0}
.ft::-webkit-scrollbar{display:none}
.fl{font-family:'IBM Plex Sans',sans-serif;font-size:10px;font-weight:700;letter-spacing:.5px;color:var(--txd);text-transform:uppercase;margin-right:3px;flex-shrink:0}
.fb{padding:3px 9px;border-radius:6px;border:1px solid transparent;background:transparent;color:var(--txm);font-family:'IBM Plex Sans',sans-serif;font-size:11px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;cursor:pointer;transition:all .12s;white-space:nowrap;flex-shrink:0}
.fb:hover{color:var(--tx);border-color:var(--bdr2);background:var(--surf2)}
.fb.on{color:var(--blue);border-color:rgba(139,101,8,.35);background:rgba(139,101,8,.08)}
/* WAVE GROUP HEADERS */
.wave-hdr{grid-column:1/-1;display:flex;align-items:center;gap:10px;padding:4px 2px 2px;margin-top:4px}
.wave-hdr:first-child{margin-top:0}
.wave-lbl{font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--blue);white-space:nowrap}
.wave-line{flex:1;height:1px;background:var(--bdr)}
.wave-ct{font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--txd);white-space:nowrap}
.fsep{width:1px;height:14px;background:var(--bdr2);margin:0 3px;flex-shrink:0}
/* LAYOUT */
.lay{display:flex;height:calc(100vh - 90px)}
.gw{flex:1;overflow-y:auto;padding:10px}
.gw::-webkit-scrollbar{width:4px}
.gw::-webkit-scrollbar-thumb{background:#ccc;border-radius:2px}
.dg{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:7px;align-content:start}
/* CARDS */
.dc{background:var(--surf);border:1px solid var(--bdr);border-radius:8px;padding:9px 10px 8px;transition:border-color .15s,background .15s;box-shadow:0 1px 2px rgba(0,0,0,.04);align-self:start;overflow:hidden}
.dc:hover{border-color:#bbb;box-shadow:0 2px 6px rgba(0,0,0,.08)}
.dc.cam{background:var(--out-bg);border-color:var(--out-bdr)}
.dc.cok{background:var(--cov-bg);border-color:var(--cov-bdr)}
.dc.cmix{background:var(--mix-bg);border-color:var(--mix-bdr)}
.dc.hid{display:none}
.ct{display:flex;justify-content:space-between;align-items:flex-start;gap:4px;margin-bottom:6px}
.dn{font-family:'IBM Plex Sans',sans-serif;font-size:13px;font-weight:700;line-height:1.25;flex:1;min-width:0;word-break:break-word;overflow-wrap:break-word}
.bt{font-family:'IBM Plex Sans',sans-serif;font-size:10px;font-weight:600;color:var(--txd);background:var(--surf2);border:1px solid var(--bdr);padding:1px 5px;border-radius:4px;white-space:nowrap;flex-shrink:0}
/* RUN ROWS */
.rl{display:flex;flex-direction:column;gap:1px}
.rr{display:flex;align-items:center;gap:4px;padding:3px 3px;border-radius:3px;cursor:pointer;transition:background .1s;user-select:none}
.rr:hover{background:rgba(255,255,255,.05)}
.rr.rout{background:rgba(220,38,38,.06)}
.rr.rout .rs,.rr.rout .ri{color:rgba(220,38,38,.5)}
.rr.rout .rd{opacity:.4}
.rr.rout .rc{text-decoration:line-through;opacity:.6}
.rr.rcov{background:rgba(22,163,74,.05)}
.rr.rcov .rs,.rr.rcov .ri{color:rgba(63,185,80,.65)}
.rr.rcov .rd{opacity:.6}
.rd{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.rd.AM{background:var(--green)}
.rd.MIDDAY{background:var(--amber)}
.rd.PM{background:var(--blue)}
.rc{font-family:'IBM Plex Sans',sans-serif;font-size:11px;font-weight:700;padding:1px 3px;border-radius:2px;white-space:nowrap;flex-shrink:0;cursor:pointer}
.rc:hover{opacity:.75}
.rs{font-size:11px;color:var(--txm);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}
.ri{font-family:'IBM Plex Sans',sans-serif;font-size:11px;color:var(--txd);white-space:nowrap;flex-shrink:0}
.rlv{font-family:'IBM Plex Mono',monospace;font-size:9px;color:var(--txd);opacity:.7;white-space:nowrap;flex-shrink:0;margin-left:2px;letter-spacing:-.02em}
.rxt{font-size:10px;font-weight:800;margin-left:1px;flex-shrink:0;width:9px;text-align:center}
.rr.rout .rxt{color:var(--red)}
.rr.rcov .rxt{color:var(--green)}
/* PER-RUN SUB ROW */
.sub-row{display:flex;align-items:center;gap:4px;padding:2px 3px 4px 14px}
.si-lbl{font-family:'IBM Plex Sans',sans-serif;font-size:10px;font-weight:700;color:var(--amber);flex-shrink:0}
.si{flex:1;background:rgba(255,255,255,.04);border:1px solid var(--mix-bdr);border-radius:3px;padding:3px 6px;font-family:'IBM Plex Sans',sans-serif;font-size:11px;color:var(--tx);min-width:0}
.si::placeholder{color:var(--txd)}
.si:focus{outline:none;background:rgba(255,255,255,.07);border-color:var(--amber)}
.si.covered{border-color:rgba(22,163,74,.5);color:var(--green)}
/* CARD FOOTER */
.cf{display:flex;align-items:center;justify-content:space-between;margin-top:7px;padding-top:6px;border-top:1px solid rgba(255,255,255,.04);gap:4px}
.sl{font-family:'IBM Plex Sans',sans-serif;font-size:10px;font-weight:700;letter-spacing:.8px;text-transform:uppercase}
.sl.act{color:var(--green)}
.sl.out{color:var(--red)}
.sl.mid{color:var(--amber)}
.sl.cov{color:var(--green)}
.cf-btns{display:flex;gap:3px;flex-shrink:0;flex-wrap:wrap;justify-content:flex-end}
.ab{font-family:'IBM Plex Sans',sans-serif;font-size:10px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;padding:2px 7px;border-radius:3px;border:1px solid var(--bdr2);background:transparent;color:var(--txm);cursor:pointer;transition:all .12s;white-space:nowrap}
.ab.mo:hover{border-color:var(--out-bdr);color:var(--red);background:rgba(248,81,73,.07)}
.ab.re{border-color:rgba(63,185,80,.4);color:var(--green)}
.ab.re:hover{background:rgba(63,185,80,.07)}
/* SIDEBAR */
.sb{width:270px;flex-shrink:0;background:var(--surf);border-left:1px solid var(--bdr);display:flex;flex-direction:column;overflow:hidden}
/* When the sidebar is an accordion, .sbb owns the single scroll surface and
* section dividers go edge-to-edge — drop the body padding. */
.sbb.sb-acc{padding:0}
.sb-sect{border-bottom:1px solid var(--bdr)}
.sb-sect:last-child{border-bottom:none}
.sb-sect-hdr{width:100%;display:flex;align-items:center;gap:8px;padding:10px 13px;background:var(--surf);border:none;cursor:pointer;text-align:left;color:var(--tx);font-family:'IBM Plex Sans',sans-serif;font-size:11px;font-weight:800;letter-spacing:2px;text-transform:uppercase;transition:background .1s}
.sb-sect-hdr:hover{background:var(--surf2)}
.sb-chevron{display:inline-block;width:10px;font-size:10px;color:var(--txm);flex-shrink:0}
.sb-sect-title{flex:1;color:var(--red)}
.sb-sect.sp .sb-sect-title{color:var(--green)}
.sb-sect-body{padding:9px}
.sb-empty{font-size:11px;color:var(--txd);padding:6px 0;text-align:center;font-style:italic}
.sb-add-btn{display:block;width:100%;padding:6px 8px;margin-bottom:8px;border:1px dashed var(--bdr2);background:transparent;color:var(--txm);font-family:'IBM Plex Sans',sans-serif;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;border-radius:3px;cursor:pointer;transition:all .12s}
.sb-add-btn:hover{border-color:var(--green);color:var(--green);background:rgba(63,185,80,.05)}
/* Flat gap row (no driver-grouping — within one wave each row is one run). */
.gi-top{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-bottom:3px}
.gi-actions{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end}
.gi-meta{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--txm);margin-bottom:2px}
.gi-ctx{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gi-driver{font-size:10px;color:var(--txd);letter-spacing:.01em}
/* Spares wave grouping (inside the spares accordion). */
.sp-wave{margin-bottom:8px}
.sp-wave:last-child{margin-bottom:0}
.sp-wlbl{font-family:'IBM Plex Sans',sans-serif;font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--txm);padding:4px 0;display:flex;align-items:center;gap:5px}
.sp-wct{color:var(--txd);font-weight:600;font-size:10px;background:var(--surf2);padding:1px 6px;border-radius:8px;min-width:18px;text-align:center}
.sp-rows{display:flex;flex-direction:column;gap:2px}
.sp-row{display:flex;align-items:center;gap:6px;padding:3px 4px;font-size:11px;border-radius:3px}
.sp-row:hover{background:rgba(255,255,255,.03)}
.sp-role{font-family:'IBM Plex Mono',monospace;font-size:9px;font-weight:800;padding:1px 5px;border-radius:3px;flex-shrink:0;letter-spacing:.04em}
.sp-role.drv{background:rgba(63,185,80,.15);color:var(--green)}
.sp-role.mon{background:rgba(96,165,250,.18);color:#93c5fd}
.sp-run{font-family:'IBM Plex Sans',sans-serif;font-weight:700;font-size:11px;padding:1px 4px;border-radius:2px;flex-shrink:0}
.sp-name{flex:1;min-width:0;color:var(--tx);font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gcb-sp{background:var(--green)}
.sbh{padding:9px 13px;border-bottom:1px solid var(--bdr);display:flex;align-items:center;gap:7px;flex-shrink:0}
.sbt{font-family:'IBM Plex Sans',sans-serif;font-size:11px;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:var(--red);flex:1}
.gcb{font-family:'IBM Plex Sans',sans-serif;font-size:11px;font-weight:800;background:var(--red);color:#fff;padding:1px 7px;border-radius:10px;min-width:20px;text-align:center}
.gcb.z{background:var(--green)}
.sbb{flex:1;overflow-y:auto;padding:9px}
.sbb::-webkit-scrollbar{width:4px}
.sbb::-webkit-scrollbar-thumb{background:var(--bdr2);border-radius:2px}
.ssh{font-family:'IBM Plex Sans',sans-serif;font-size:10px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;padding:3px 0 5px;margin-bottom:2px;display:flex;align-items:center;gap:6px}
.ssh.am{color:var(--red)}
.ssh.mp{color:var(--amber);margin-top:10px;border-top:1px solid var(--bdr);padding-top:10px}
.ssh-ct{font-size:10px;font-weight:800;padding:1px 6px;border-radius:8px;min-width:16px;text-align:center}
.ssh.am .ssh-ct{background:rgba(248,81,73,.15);color:var(--red)}
.ssh.mp .ssh-ct{background:rgba(210,153,34,.15);color:var(--amber)}
.gi{border:1px solid rgba(248,81,73,.2);border-radius:5px;padding:7px 9px;margin-bottom:5px;background:rgba(248,81,73,.04)}
.gi.gm{border-color:rgba(210,153,34,.2);background:rgba(210,153,34,.04)}
.gi.gc{border-color:rgba(22,163,74,.25);background:rgba(22,163,74,.04)}
.gdn{font-family:'IBM Plex Sans',sans-serif;font-size:11px;font-weight:700;text-transform:uppercase;color:var(--tx);margin-bottom:4px;display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.gdn-asg{font-family:'IBM Plex Mono',monospace;font-size:13px;font-weight:800;color:var(--tx);letter-spacing:.02em;text-transform:none}
.gdn-sub{font-size:10px;font-weight:600;color:var(--txm);text-transform:none;letter-spacing:.01em}
.gr{display:flex;flex-direction:column;gap:3px}
.grun{display:flex;align-items:center;gap:4px;font-size:11px}
.grd{width:5px;height:5px;border-radius:50%;flex-shrink:0}
.grd.AM{background:var(--green)}.grd.MIDDAY{background:var(--amber)}.grd.PM{background:var(--blue)}
.grc{font-family:'IBM Plex Sans',sans-serif;font-weight:700;font-size:11px;flex-shrink:0}
.gri{color:var(--txm);font-size:11px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gsub{font-family:'IBM Plex Sans',sans-serif;font-size:10px;font-weight:700;color:var(--green);margin-left:4px;flex-shrink:0}
.gsub.needed{color:var(--red)}
.se{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;padding:20px;text-align:center;color:var(--txd)}
.se-ic{font-size:24px;margin-bottom:6px;opacity:.5}
.se-tx{font-family:'IBM Plex Sans',sans-serif;font-size:13px;font-weight:700;letter-spacing:1px;text-transform:uppercase;line-height:1.5}
.sbl{padding:7px 13px;border-top:1px solid var(--bdr);display:flex;flex-wrap:wrap;gap:6px;flex-shrink:0}
.li{display:flex;align-items:center;gap:3px;font-size:11px;color:var(--txd)}
.ld{width:5px;height:5px;border-radius:50%}
/* SCHOOL COLORS */
.kp{background:rgba(6,182,212,.14);color:#67e8f9}
.ky{background:rgba(59,130,246,.14);color:#93c5fd}
.js{background:rgba(139,92,246,.14);color:#c4b5fd}
.jnr{background:rgba(168,85,247,.14);color:#d8b4fe}
.jh{background:rgba(236,72,153,.14);color:#f9a8d4}
.sc{background:rgba(34,197,94,.14);color:#86efac}
.pn{background:rgba(245,158,11,.14);color:#fde68a}
.pb{background:rgba(249,115,22,.14);color:#fdba74}
.pr{background:rgba(239,68,68,.14);color:#fca5a5}
.hw{background:rgba(20,184,166,.14);color:#5eead4}
.aa{background:rgba(244,63,94,.14);color:#fda4af}
.ln{background:rgba(132,204,22,.14);color:#bef264}
.cv{background:rgba(100,116,139,.14);color:#94a3b8}
/* ABSENCE BANNER on driver cards */
.abs-banner{margin-top:6px;padding:5px 8px;background:var(--mix-bg);border:1px solid var(--mix-bdr);border-radius:4px;cursor:pointer}
.abs-banner-hdr{display:flex;align-items:center;gap:5px;font-size:10px;font-weight:700;color:var(--amber);letter-spacing:.04em;text-transform:uppercase}
.abs-banner-rows{margin-top:4px;display:flex;flex-direction:column;gap:2px}
.abs-row{font-size:11px;color:var(--tx);display:flex;align-items:center;gap:5px}
.abs-run{font-size:9px;font-weight:700;padding:1px 4px;border-radius:2px;background:rgba(184,134,11,.15);color:var(--amber);flex-shrink:0;font-family:'IBM Plex Mono',monospace}
/* MODULE TABS */
.mtabs{height:38px;background:var(--surf);border-bottom:1px solid var(--bdr);display:flex;align-items:flex-end;padding:0 14px;gap:0;flex-shrink:0}
.mtab{padding:9px 16px;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--txm);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .1s,border-color .1s;white-space:nowrap}
.mtab:hover{color:var(--tx)}
.mtab.on{color:var(--blue);border-bottom-color:var(--blue)}
/* Top-level workspace switcher — Dispatch / Core / Time / Routing */
.apps{height:42px;background:var(--surf2);border-bottom:1px solid var(--bdr);display:flex;align-items:flex-end;padding:0 14px;gap:0;flex-shrink:0}
.app{padding:11px 22px 9px;font-size:13px;font-weight:600;letter-spacing:-.005em;color:var(--txm);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .12s,border-color .12s,background .12s;white-space:nowrap;display:flex;align-items:center;gap:6px}
.app:hover{color:var(--tx);background:var(--surf)}
.app.on{color:var(--green);border-bottom-color:var(--green);background:var(--surf)}
.app.on::before{content:'';display:inline-block;width:4px;height:4px;background:var(--green);border-radius:50%}
.app.placeholder{color:var(--txd)}
.app.placeholder::after{content:'soon';font-size:8px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--txd);background:var(--bdr2);padding:1px 5px;border-radius:6px;margin-left:2px;font-family:'IBM Plex Mono',monospace}
/* Placeholder workspace views */
.app-placeholder{display:flex;align-items:center;justify-content:center;min-height:60vh;padding:32px;text-align:center}
.app-placeholder-card{max-width:420px}
.app-placeholder-name{font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--txd);margin-bottom:10px}
.app-placeholder-h{font-size:28px;font-weight:700;letter-spacing:-.02em;color:var(--tx);margin:0 0 12px;line-height:1.1}
.app-placeholder-d{font-size:14px;color:var(--txm);line-height:1.55;margin:0 0 22px}
.app-placeholder-list{text-align:left;font-size:13px;color:var(--tx);line-height:1.7;background:var(--surf);border:1px solid var(--bdr);border-radius:6px;padding:14px 18px;list-style:none}
.app-placeholder-list li{position:relative;padding-left:18px}
.app-placeholder-list li::before{content:'·';position:absolute;left:7px;top:-2px;color:var(--txd);font-size:18px;font-weight:700}
/* CALLOUTS PANEL */
.co-wrap{display:flex;flex:1;overflow:hidden;height:calc(100vh - 128px)}
.co-left{width:380px;flex-shrink:0;background:var(--surf);border-right:1px solid var(--bdr);display:flex;flex-direction:column;overflow:hidden}
.co-right{flex:1;overflow-y:auto;background:var(--bg);padding:14px}
.co-right::-webkit-scrollbar{width:4px}
.co-right::-webkit-scrollbar-thumb{background:var(--bdr2);border-radius:2px}
.co-section{padding:12px 14px;border-bottom:1px solid var(--bdr);flex-shrink:0}
.co-lbl{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--txd);margin-bottom:6px}
.co-search{width:100%;padding:7px 10px;border:1px solid var(--bdr);border-radius:4px;font-size:13px;font-family:'IBM Plex Sans',sans-serif;background:var(--surf);color:var(--tx)}
.co-search:focus{outline:none;border-color:var(--blue)}
.co-results{overflow-y:auto;flex:1;padding:8px}
.co-results::-webkit-scrollbar{width:3px}
.co-results::-webkit-scrollbar-thumb{background:var(--bdr2);border-radius:2px}
.co-result{background:var(--surf);border:1px solid var(--bdr);border-radius:4px;padding:9px 11px;margin-bottom:5px;cursor:pointer;transition:border-color .1s}
.co-result:hover{border-color:var(--blue)}
.co-result.sel{border-color:var(--blue);background:rgba(139,101,8,.05)}
.co-rname{font-size:13px;font-weight:700;color:var(--tx)}
.co-rmeta{font-size:11px;color:var(--txm);margin-top:2px}
.co-rtag{font-size:9px;font-weight:700;padding:1px 5px;border-radius:2px;margin-right:3px;font-family:'IBM Plex Mono',monospace}
.co-empty{font-size:12px;color:var(--txd);padding:20px;text-align:center}
/* CALENDAR */
.cal-wrap{padding:12px 14px;flex-shrink:0}
.cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.cal-title{font-size:12px;font-weight:700;color:var(--tx);letter-spacing:.02em}
.cal-nav{background:none;border:1px solid var(--bdr);border-radius:3px;padding:2px 8px;cursor:pointer;font-size:12px;color:var(--txm);font-family:'IBM Plex Sans',sans-serif}
.cal-nav:hover{background:var(--surf2);color:var(--tx)}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.cal-dow{font-size:9px;font-weight:700;text-align:center;color:var(--txd);padding:2px 0;letter-spacing:.05em}
.cal-day{font-size:11px;text-align:center;padding:4px 2px;border-radius:3px;cursor:pointer;border:1px solid transparent;color:var(--tx);transition:background .08s}
.cal-day:hover{background:var(--surf2)}
.cal-day.sel{background:var(--amber);color:#fff;font-weight:700;border-color:var(--amber)}
.cal-day.today{border-color:var(--bdr2);font-weight:700}
.cal-day.other{color:var(--txd)}
.cal-day.past{opacity:.5}
.cal-day.empty{cursor:default}
/* QUICK DATE CHIPS */
.chip-row{display:flex;gap:5px;flex-wrap:wrap;padding:0 14px 10px}
.chip{font-size:10px;font-weight:700;padding:3px 9px;border-radius:12px;border:1px solid var(--bdr);background:var(--surf);color:var(--txm);cursor:pointer;letter-spacing:.03em;white-space:nowrap}
.chip:hover{border-color:var(--amber);color:var(--amber)}
/* NOTES + SAVE */
.co-notes{width:100%;padding:6px 9px;border:1px solid var(--bdr);border-radius:4px;font-size:12px;font-family:'IBM Plex Sans',sans-serif;background:var(--surf);color:var(--tx);resize:vertical;min-height:44px}
.co-notes:focus{outline:none;border-color:var(--blue)}
.co-save{width:100%;padding:8px;background:var(--blue);border:none;border-radius:4px;font-size:12px;font-weight:700;color:#fff;cursor:pointer;font-family:'IBM Plex Sans',sans-serif;letter-spacing:.04em}
.co-save:hover{opacity:.88}
.co-save:disabled{opacity:.4;cursor:default}
/* LOG TABLE */
.log-day{background:var(--surf);border:1px solid var(--bdr);border-radius:6px;margin-bottom:10px;overflow:hidden}
.log-day-hdr{display:flex;align-items:baseline;justify-content:space-between;padding:12px 16px;border-bottom:2px solid var(--bdr)}
.log-day-date{font-size:14px;font-weight:700;color:var(--tx);display:flex;align-items:center;gap:8px}
.log-today-badge{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;background:var(--amber);color:#fff;padding:2px 8px;border-radius:10px}
.log-day-count{font-size:11px;color:var(--txd);font-family:'IBM Plex Mono',monospace;white-space:nowrap}
.log-col-hdr{display:grid;grid-template-columns:20% 17% 8% 22% 1fr 70px 28px;padding:5px 16px;background:var(--surf2);border-bottom:1px solid var(--bdr)}
.log-col-hdr span{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--txd)}
.log-student-row{display:grid;grid-template-columns:20% 17% 8% 22% 1fr 70px 28px;align-items:start;padding:10px 16px;border-bottom:1px solid var(--bdr);transition:background .08s}
.log-student-row.last{border-bottom:none}
.log-student-row:hover{background:var(--surf2)}
.log-student-name{font-size:13px;font-weight:700;color:var(--tx);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-right:10px;line-height:1.4}
.log-student-school{font-size:12px;color:var(--txm);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-right:10px;line-height:1.4}
.log-student-run{padding-right:8px;padding-top:1px}
.log-run-tag{font-size:9px;font-weight:700;font-family:'IBM Plex Mono',monospace;background:rgba(139,101,8,.12);color:var(--amber);padding:2px 6px;border-radius:2px;white-space:nowrap}
.log-student-notes{font-size:11px;color:var(--txm);line-height:1.5;padding-right:8px;word-break:break-word}
.log-student-driver{font-size:11px;color:var(--txm);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-right:8px;line-height:1.4}
.log-bus-tag{font-size:9px;font-weight:700;font-family:'IBM Plex Mono',monospace;background:var(--surf2);border:1px solid var(--bdr);color:var(--txm);padding:1px 5px;border-radius:2px;margin-right:4px;white-space:nowrap}
.log-student-del{display:flex;align-items:flex-start;justify-content:center;padding-top:2px}
.log-del{background:none;border:none;color:var(--txd);cursor:pointer;font-size:11px;width:22px;height:22px;border-radius:3px;display:flex;align-items:center;justify-content:center;padding:0}
.log-del:hover{color:var(--red);background:rgba(167,48,39,.1)}
/* ─── V3: BUS-FIRST CARD LAYOUT ─────────────────────────────────────────── */
/* min-height tightened post-PM-removal — only AM chips render now, the
absence banner can still grow the card vertically when there are no-shows. */
.dc{padding:0;display:flex;flex-direction:column;min-height:158px;overflow:hidden;position:relative}
.dc-head{padding:6px 10px 3px;display:flex;align-items:flex-start;justify-content:space-between;gap:6px;border-bottom:1px solid var(--bdr);margin-bottom:2px}
.dc-id{display:flex;flex-direction:column;flex:1;min-width:0;line-height:1.05}
/* Assignment label — the prominent identifier (e.g., 'A-204'). This is what
the team thinks of as "the route slot." Mono font, slightly larger. */
.asg-num{font-family:'IBM Plex Mono',monospace;font-size:14px;font-weight:700;letter-spacing:.04em;color:var(--tx);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Bus label — the physical bus filling this assignment today (e.g., 'Bus 224').
Smaller, secondary visual weight. Always shown, even when bus number matches
assignment number, so the team's eye is trained where to look. */
.bus-num{font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:600;letter-spacing:.04em;color:var(--txm);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* When the bus is filling a different assignment than its own number implies
(a "swap"), the bus label gets a subtle accent so it's visible at a glance. */
.bus-num.swap{color:var(--amber);font-weight:700}
/* Live-inference swap — planned (struck) followed by inferred. Distinct from
the .swap legacy class which is just asg-numeric-vs-bus-number heuristic. */
.bus-num.is-swap { color: var(--tx); font-weight: 600; }
.bus-num-planned { color: var(--txm); font-weight: 500; text-decoration: line-through; opacity: .75; }
.bus-num-inferred { color: var(--green); font-weight: 700; }
.dc-status{flex-shrink:0;margin-top:1px}
.dc-staff{padding:0 10px 3px;border-bottom:1px solid var(--bdr);margin-bottom:2px}
.staff-row{display:flex;align-items:center;gap:6px;padding:2px 6px;margin:0 -6px;border-radius:4px;cursor:pointer;transition:background .1s}
.staff-row:hover{background:rgba(0,0,0,.04)}
.staff-row.out .staff-name{text-decoration:line-through;color:var(--red);opacity:.7}
.staff-row.empty .staff-name{color:var(--txd);font-style:italic}
.staff-row.empty:hover .staff-name{color:var(--blue);text-decoration:underline}
/* Open-slot decoration — pulsing red dot on the specific D or M row when a
callout is active but no substitute has been assigned. Keeps the rest of
the card neutral; only the affected role draws the eye. */
.staff-row.is-open-sub .staff-name { color: var(--red); font-weight: 700; }
.staff-row.is-open-sub .staff-lbl { color: var(--red); }
.staff-open-dot {
display: inline-block;
width: 7px; height: 7px;
border-radius: 99px;
background: var(--red);
flex-shrink: 0;
animation: staffOpenPulse 1.6s ease-in-out infinite;
}
@keyframes staffOpenPulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(167,48,39,.45); }
50% { box-shadow: 0 0 0 5px rgba(167,48,39,0); }
}
.staff-lbl{font-family:'IBM Plex Mono',monospace;font-size:9px;font-weight:700;letter-spacing:.08em;color:var(--txd);width:32px;flex-shrink:0}
.staff-name{font-size:12px;font-weight:600;color:var(--tx);flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3}
.out-tag{display:inline-block;font-size:8px;font-weight:700;background:var(--red);color:#fff;padding:1px 5px;border-radius:2px;letter-spacing:.05em;vertical-align:middle;margin-left:4px}
.sub-info{font-size:10px;color:var(--green);font-weight:600;flex-shrink:0;display:flex;align-items:center;gap:3px}
.sub-info.empty{color:var(--red)}
.sub-info::before{content:'→';color:var(--txd)}
.dc-runs{padding:0 10px 4px;flex:1}
.dc-footer{padding:0 8px 8px;margin-top:auto}
/* Run rows in new layout */
.rr{cursor:pointer;padding:3px 4px;border-radius:3px}
.rr:hover{background:rgba(0,0,0,.04)}
.rstate{display:inline-flex;align-items:center;gap:3px;font-family:'IBM Plex Mono',monospace;font-size:9px;font-weight:700;padding:1px 4px;border-radius:3px;letter-spacing:.04em}
.rstate.cov{background:rgba(45,95,63,.15);color:var(--green)}
.rstate.out{background:rgba(167,48,39,.15);color:var(--red)}
.rstate.split{background:rgba(184,134,11,.15);color:var(--amber)}
/* ─── UNIFIED PICKER ─────────────────────────────────────────────────────── */
.picker-bg{position:fixed;inset:0;z-index:90}
.picker{position:fixed;background:var(--surf);border:1px solid var(--bdr2);border-radius:8px;box-shadow:0 12px 32px rgba(0,0,0,.18);z-index:100;width:340px;max-height:520px;display:flex;flex-direction:column;overflow:hidden}
.picker-h{padding:11px 14px 9px;border-bottom:1px solid var(--bdr)}
.picker-h-kicker{font-family:'IBM Plex Mono',monospace;font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--txd);margin-bottom:3px}
.picker-h-subject{font-size:13px;font-weight:700;color:var(--tx);line-height:1.3}
.picker-h-context{font-size:11px;color:var(--txm);margin-top:2px}
.picker-scope{display:flex;gap:3px;padding:9px 12px;border-bottom:1px solid var(--bdr);background:var(--surf2)}
.picker-scope-btn{flex:1;padding:5px 6px;font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--txm);background:var(--surf);border:1px solid var(--bdr);border-radius:3px;cursor:pointer;font-family:inherit}
.picker-scope-btn:hover{color:var(--tx);border-color:var(--bdr2)}
.picker-scope-btn.on{background:var(--blue);color:#fff;border-color:var(--blue)}
.picker-search{padding:8px 12px;border-bottom:1px solid var(--bdr)}
.picker-search input{width:100%;padding:6px 9px;border:1px solid var(--bdr);border-radius:3px;font-size:13px;font-family:inherit;background:var(--surf);color:var(--tx)}
.picker-search input:focus{outline:none;border-color:var(--blue)}
.picker-list{overflow-y:auto;flex:1;min-height:80px;max-height:280px}
.picker-list::-webkit-scrollbar{width:4px}
.picker-list::-webkit-scrollbar-thumb{background:var(--bdr2);border-radius:2px}
.picker-spare{padding:7px 12px;border-bottom:1px solid var(--bdr);cursor:pointer;display:flex;align-items:center;gap:8px;transition:background .08s}
.picker-spare:hover{background:var(--surf2)}
.picker-spare-info{flex:1;min-width:0}
.picker-spare-name{font-size:13px;font-weight:600;color:var(--tx);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.picker-spare-meta{font-size:10px;color:var(--txm);margin-top:1px;display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.picker-tag{font-size:8px;font-weight:700;padding:1px 5px;border-radius:3px;letter-spacing:.04em;text-transform:uppercase;flex-shrink:0;white-space:nowrap}
.picker-tag.am{background:rgba(45,95,63,.14);color:var(--green)}
.picker-tag.pm{background:rgba(139,101,8,.14);color:var(--blue)}
.picker-tag.days{background:rgba(184,134,11,.14);color:var(--amber)}
.picker-tag.spare{background:rgba(45,95,63,.10);color:var(--green);border:1px solid rgba(45,95,63,.25)}
.picker-tag.role{background:rgba(0,0,0,.06);color:var(--txm)}
.picker-tag.busy{background:rgba(167,48,39,.12);color:var(--red)}
.picker-actions{padding:9px 12px;border-top:1px solid var(--bdr);display:flex;gap:6px;background:var(--surf2)}
.picker-actions .btn{flex:1;justify-content:center;padding:6px 10px;font-size:11px}
.picker-empty{padding:24px 12px;text-align:center;color:var(--txd);font-size:12px;font-style:italic}
.picker-typed{padding:7px 12px;border-bottom:1px solid var(--bdr);background:rgba(45,95,63,.04);cursor:pointer;font-size:12px;color:var(--green);font-weight:600}
.picker-typed:hover{background:rgba(45,95,63,.08)}
/* ─── SPARE POOL PANEL (second right sidebar) ──────────────────────────── */
.lay-3col{display:flex;height:calc(100vh - 128px)}
.sp-panel{width:230px;flex-shrink:0;background:var(--surf);border-left:1px solid var(--bdr);display:flex;flex-direction:column;overflow:hidden}
.sp-panel-h{padding:9px 13px;border-bottom:1px solid var(--bdr);display:flex;align-items:center;gap:6px;flex-shrink:0}
.sp-panel-t{font-family:'IBM Plex Sans',sans-serif;font-size:11px;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:var(--green);flex:1}
.sp-panel-ct{font-family:'IBM Plex Sans',sans-serif;font-size:11px;font-weight:800;background:var(--green);color:#fff;padding:1px 7px;border-radius:10px;min-width:20px;text-align:center}
.sp-panel-ct.zero{background:var(--bdr2);color:var(--txm)}
.sp-panel-body{flex:1;overflow-y:auto;padding:8px}
.sp-panel-body::-webkit-scrollbar{width:4px}
.sp-panel-body::-webkit-scrollbar-thumb{background:var(--bdr2);border-radius:2px}
.sp-section-h{font-size:9px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--txd);padding:3px 0 6px;display:flex;align-items:center;gap:6px;margin-top:8px}
.sp-section-h:first-child{margin-top:0}
.sp-section-h.allocated{color:var(--amber)}
.sp-section-ct{font-size:9px;font-weight:800;padding:1px 6px;border-radius:8px;background:rgba(45,95,63,.14);color:var(--green)}
.sp-section-h.allocated .sp-section-ct{background:rgba(184,134,11,.14);color:var(--amber)}
.sp-item{border:1px solid var(--bdr);border-radius:5px;padding:7px 9px;margin-bottom:4px;background:var(--surf2)}
.sp-item.allocated{border-color:rgba(184,134,11,.3);background:rgba(184,134,11,.04)}
.sp-item-name{font-size:12px;font-weight:700;color:var(--tx)}
.sp-item-meta{font-size:10px;color:var(--txm);margin-top:3px;display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.sp-item-tag{font-size:8px;font-weight:700;padding:1px 4px;border-radius:3px;letter-spacing:.04em;text-transform:uppercase}
.sp-item-tag.am{background:rgba(45,95,63,.14);color:var(--green)}
.sp-item-tag.pm{background:rgba(139,101,8,.14);color:var(--blue)}
.sp-item-tag.days{background:rgba(184,134,11,.14);color:var(--amber)}
.sp-item-tag.role{background:rgba(0,0,0,.06);color:var(--txm)}
.sp-item-allocated{font-size:10px;color:var(--amber);margin-top:4px;padding-top:4px;border-top:1px dashed rgba(184,134,11,.2)}
.sp-empty{font-size:11px;color:var(--txd);font-style:italic;text-align:center;padding:14px 6px}
/* ─── SPARES DEFINITION TAB ────────────────────────────────────────────── */
.sps-wrap{flex:1;overflow:auto;background:var(--bg);padding:14px;height:calc(100vh - 128px)}
.sps-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.sps-title{font-size:14px;font-weight:700;color:var(--tx);letter-spacing:-.01em}
.sps-subtitle{font-size:11px;color:var(--txm);margin-top:2px}
.sps-list{background:var(--surf);border:1px solid var(--bdr);border-radius:8px;overflow:hidden;max-width:1100px}
.sps-row{display:grid;grid-template-columns:220px 90px 1fr 1fr 90px;align-items:center;padding:10px 14px;border-bottom:1px solid var(--bdr);gap:12px}
.sps-row.head{background:var(--surf2);font-size:9px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--txd)}
.sps-row.head span{font-size:9px}
.sps-row:not(.head):hover{background:var(--surf2)}
.sps-row:last-child{border-bottom:none}
.sps-name{font-size:13px;font-weight:700;color:var(--tx)}
.sps-role{font-size:11px;color:var(--txm);text-transform:uppercase;font-family:'IBM Plex Mono',monospace;letter-spacing:.05em}
.sps-schedule{font-size:11px;color:var(--tx);display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.sps-notes{font-size:11px;color:var(--txm);font-style:italic;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sps-actions{display:flex;gap:4px;justify-content:flex-end}
.sps-empty{padding:32px;text-align:center;color:var(--txd);font-size:13px}
.sps-modal-bg{position:fixed;inset:0;background:rgba(28,24,20,.5);z-index:200;display:flex;align-items:center;justify-content:center;padding:24px}
.sps-modal{background:var(--surf);border-radius:8px;width:100%;max-width:480px;box-shadow:0 16px 32px rgba(0,0,0,.18)}
.sps-modal-h{padding:14px 18px;border-bottom:1px solid var(--bdr)}
.sps-modal-t{font-size:14px;font-weight:700;color:var(--tx)}
.sps-modal-b{padding:14px 18px}
.sps-form-row{margin-bottom:12px}
.sps-form-lbl{font-size:9px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--txd);margin-bottom:5px}
.sps-form-input,.sps-form-select{width:100%;padding:7px 10px;border:1px solid var(--bdr);border-radius:4px;font-size:13px;font-family:inherit;background:var(--surf);color:var(--tx)}
.sps-form-input:focus,.sps-form-select:focus{outline:none;border-color:var(--blue)}
.sps-form-radio{display:flex;gap:6px;flex-wrap:wrap}
.sps-form-radio label{display:flex;align-items:center;gap:5px;padding:5px 10px;border:1px solid var(--bdr);border-radius:5px;cursor:pointer;font-size:12px;user-select:none;background:var(--surf)}
.sps-form-radio input{margin:0}
.sps-form-radio label.on{background:rgba(139,101,8,.08);border-color:var(--blue);color:var(--blue);font-weight:700}
.sps-days{display:flex;gap:4px;flex-wrap:wrap}
.sps-days label{display:flex;align-items:center;justify-content:center;width:36px;height:32px;border:1px solid var(--bdr);border-radius:4px;cursor:pointer;font-size:11px;font-weight:700;user-select:none;background:var(--surf)}
.sps-days label.on{background:var(--blue);color:#fff;border-color:var(--blue)}
.sps-days input{display:none}
.sps-modal-f{padding:10px 18px;border-top:1px solid var(--bdr);display:flex;gap:6px;justify-content:flex-end}
/* ─── ASSIGNMENTS TAB ───────────────────────────────────────────────────── */
.asg-list{background:var(--surf);border:1px solid var(--bdr);border-radius:8px;overflow:hidden;max-width:1100px}
.asg-row{display:grid;grid-template-columns:80px 1fr 1fr 110px 80px;align-items:center;padding:9px 14px;border-bottom:1px solid var(--bdr);gap:12px}
.asg-row.head{background:var(--surf2);font-size:9px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--txd)}
.asg-row.head span{font-size:9px}
.asg-row:not(.head):hover{background:var(--surf2)}
.asg-row:last-child{border-bottom:none}
.asg-bus{font-family:'IBM Plex Mono',monospace;font-size:14px;font-weight:700;color:var(--tx);letter-spacing:.04em}
.asg-name{font-size:13px;font-weight:600;color:var(--tx)}
.asg-name.empty{color:var(--txd);font-style:italic;font-weight:500}
.asg-eff{font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--txd);letter-spacing:.04em}
.asg-actions{display:flex;justify-content:flex-end}
.asg-pending{font-size:9px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;background:rgba(139,101,8,.14);color:var(--blue);padding:1px 6px;border-radius:3px;margin-left:6px}
.asg-modal-effective{padding:9px 12px;background:var(--surf2);border:1px solid var(--bdr);border-radius:5px;font-size:11px;color:var(--txm);display:flex;align-items:center;gap:8px;margin-bottom:14px}
.asg-modal-effective::before{content:'→';color:var(--green);font-weight:700;font-size:14px}
.asg-modal-effective strong{color:var(--tx);font-weight:700}
/* Inline cell editing on Assignments table */
.asg-cell{cursor:pointer;padding:4px 6px;margin:-4px -6px;border-radius:3px;border:1px solid transparent;transition:background .1s,border-color .1s;position:relative;display:inline-block;min-width:120px}
.asg-cell:hover{background:rgba(45,95,63,.06);border-color:rgba(45,95,63,.2)}
.asg-cell:hover::after{content:'edit';position:absolute;right:4px;top:50%;transform:translateY(-50%);font-size:8px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--green);opacity:.7;pointer-events:none}
.asg-cell.editing{background:var(--surf);border-color:var(--blue);padding:0;margin:0;cursor:text}
.asg-cell.editing::after{display:none}
.asg-cell-input{width:100%;padding:5px 8px;border:none;background:transparent;font-family:inherit;font-size:13px;font-weight:600;color:var(--tx);outline:none}
.asg-cell-vacant{color:var(--red);font-style:italic;font-weight:500}
.asg-typeahead{position:absolute;top:100%;left:-1px;right:-1px;background:var(--surf);border:1px solid var(--bdr2);border-top:none;border-radius:0 0 5px 5px;box-shadow:0 8px 18px rgba(0,0,0,.12);max-height:260px;overflow-y:auto;z-index:80;min-width:240px}
.asg-typeahead-item{padding:6px 10px;font-size:12px;cursor:pointer;border-bottom:1px solid var(--bdr);display:flex;align-items:center;gap:6px}
.asg-typeahead-item:hover,.asg-typeahead-item.kbd-on{background:rgba(45,95,63,.08)}
.asg-typeahead-item:last-child{border-bottom:none}
.asg-typeahead-item-name{flex:1;font-weight:600;color:var(--tx);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.asg-typeahead-item-meta{font-size:9px;color:var(--txd);font-family:'IBM Plex Mono',monospace;letter-spacing:.04em;flex-shrink:0}
.asg-typeahead-vacant{padding:6px 10px;font-size:12px;cursor:pointer;color:var(--red);font-style:italic;border-bottom:1px solid var(--bdr);background:rgba(167,48,39,.04)}
.asg-typeahead-vacant:hover{background:rgba(167,48,39,.08)}
.asg-typeahead-empty{padding:10px;font-size:11px;color:var(--txd);text-align:center;font-style:italic}
/* Inline confirmation popover */
.asg-confirm{position:absolute;background:var(--surf);border:1px solid var(--blue);border-radius:5px;box-shadow:0 8px 20px rgba(0,0,0,.15);padding:9px 11px;z-index:90;min-width:300px}
.asg-confirm-msg{font-size:11px;color:var(--tx);line-height:1.5;margin-bottom:8px}
.asg-confirm-msg strong{font-weight:700}
.asg-confirm-msg .from{color:var(--txm);text-decoration:line-through}
.asg-confirm-msg .to{color:var(--green)}
.asg-confirm-msg .eff{font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--blue);background:rgba(139,101,8,.08);padding:1px 5px;border-radius:3px;letter-spacing:.04em}
.asg-confirm-actions{display:flex;gap:5px;justify-content:flex-end}
.asg-confirm-actions .btn{font-size:11px;padding:4px 10px}
/* ─── SPARES: two-column layout + modal typeahead ───────────────────────── */
.sps-cols{display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:1200px}
.sps-col{background:var(--surf);border:1px solid var(--bdr);border-radius:8px;overflow:hidden}
.sps-col-h{padding:9px 14px;background:var(--surf2);border-bottom:1px solid var(--bdr);display:flex;align-items:center;justify-content:space-between}
.sps-col-h .t{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--txd)}
.sps-col-h .ct{font-size:10px;font-weight:700;background:var(--bdr2);color:var(--txm);padding:1px 7px;border-radius:8px;font-family:'IBM Plex Mono',monospace}
.sps-spare-row{display:grid;grid-template-columns:1fr auto;gap:6px 12px;padding:9px 14px;border-bottom:1px solid var(--bdr);align-items:center}
.sps-spare-row:last-child{border-bottom:none}
.sps-spare-row:hover{background:var(--surf2)}
.sps-spare-name{font-size:13px;font-weight:700;color:var(--tx)}
.sps-spare-tags{display:flex;gap:4px;flex-wrap:wrap;grid-column:1;font-size:10px}
.sps-spare-notes{grid-column:1/-1;font-size:11px;color:var(--txm);font-style:italic;padding-top:2px}
.sps-spare-actions{grid-column:2;grid-row:1/3;display:flex;gap:4px;justify-self:end}
.sps-emp-pick{position:relative}
.sps-emp-dropdown{position:absolute;top:100%;left:0;right:0;max-height:220px;overflow-y:auto;background:var(--surf);border:1px solid var(--bdr2);border-radius:0 0 5px 5px;box-shadow:0 4px 14px rgba(0,0,0,.1);z-index:10;margin-top:-1px}
.sps-emp-item{padding:7px 10px;font-size:12px;cursor:pointer;border-bottom:1px solid var(--bdr);display:flex;align-items:center;justify-content:space-between;gap:6px}
.sps-emp-item:hover{background:rgba(45,95,63,.08)}
.sps-emp-item:last-child{border-bottom:none}
.sps-emp-item-meta{font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:.04em;color:var(--txd);text-transform:uppercase;flex-shrink:0}
.sps-emp-empty{padding:12px;font-size:11px;color:var(--txd);text-align:center;font-style:italic}
.sps-emp-selected{font-size:11px;color:var(--green);margin-top:4px;display:flex;align-items:center;gap:6px}
.sps-emp-selected strong{color:var(--tx);font-weight:700}
/* ─── CALLOUTS: notification tracking ───────────────────────────────────── */
.log-notify{display:flex;align-items:center;gap:6px;padding:0;justify-content:center}
.log-notify input[type="checkbox"]{margin:0;cursor:pointer;width:14px;height:14px;accent-color:var(--green)}
.log-notify-lbl{font-size:9px;color:var(--txd);text-transform:uppercase;letter-spacing:.05em;font-weight:700}
.log-notify.notified .log-notify-lbl{color:var(--green)}
.log-notify-na{font-size:9px;color:var(--txd);font-style:italic;text-align:center}
/* Board absence banner — notification state */
.abs-row{display:flex;align-items:center;gap:5px}
.abs-row.notified{opacity:.5}
.abs-row.notified .abs-name{text-decoration:line-through;color:var(--txm)}
.abs-row .notify-mark{font-size:8px;font-family:'IBM Plex Mono',monospace;font-weight:700;letter-spacing:.04em;flex-shrink:0;padding:0 3px;border-radius:2px}
.abs-row.notified .notify-mark{background:rgba(45,95,63,.14);color:var(--green)}
.abs-row:not(.notified) .notify-mark{background:rgba(184,134,11,.14);color:var(--amber)}
/* ─── ABSENCE BANNER: 3-state color (red→amber→green by notified count) ── */
.abs-banner.state-none{background:rgba(167,48,39,.08);border-color:rgba(167,48,39,.28)}
.abs-banner.state-none .abs-banner-hdr{color:var(--red)}
.abs-banner.state-some{background:rgba(184,134,11,.08);border-color:rgba(184,134,11,.28)}
.abs-banner.state-some .abs-banner-hdr{color:var(--amber)}
.abs-banner.state-all{background:rgba(45,95,63,.08);border-color:rgba(45,95,63,.28)}
.abs-banner.state-all .abs-banner-hdr{color:var(--green)}
/* ─── STAFF ROW "OUT" BUTTON ────────────────────────────────────────────── */
.staff-out-btn{font-family:'IBM Plex Mono',monospace;font-size:9px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:2px 7px;border-radius:3px;border:1px solid var(--bdr);background:var(--surf);color:var(--txm);cursor:pointer;flex-shrink:0;transition:background .1s,border-color .1s,color .1s}
.staff-out-btn:hover{border-color:var(--red);color:var(--red);background:rgba(167,48,39,.06)}
.staff-out-btn.is-out{border-color:var(--red);background:var(--red);color:#fff}
.staff-out-btn.is-out:hover{background:rgba(167,48,39,.85)}
/* ─── SPARE POOL: split by role with role-distinct shades ──────────────── */
.sp-role-section{margin-bottom:10px}
.sp-role-section:last-child{margin-bottom:0}
.sp-role-h{display:flex;align-items:center;gap:6px;padding:5px 8px;border-radius:4px 4px 0 0;font-size:9px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;border:1px solid;border-bottom:none}
.sp-role-h.drivers{background:rgba(45,95,63,.12);color:var(--green);border-color:rgba(45,95,63,.25)}
.sp-role-h.monitors{background:rgba(139,101,8,.12);color:var(--blue);border-color:rgba(139,101,8,.25)}
.sp-role-h .sp-role-ct{margin-left:auto;font-family:'IBM Plex Mono',monospace;font-size:9px;font-weight:800;padding:1px 6px;border-radius:7px;background:rgba(255,255,255,.55)}
.sp-role-body{border:1px solid;border-top:none;border-radius:0 0 4px 4px;padding:5px;min-height:30px}
.sp-role-body.drivers{border-color:rgba(45,95,63,.25);background:rgba(45,95,63,.03)}
.sp-role-body.monitors{border-color:rgba(139,101,8,.25);background:rgba(139,101,8,.03)}
.sp-item.drivers{border-color:rgba(45,95,63,.2);background:var(--surf)}
.sp-item.monitors{border-color:rgba(139,101,8,.2);background:var(--surf)}
.sp-item.standing{border-left:3px solid var(--green)}
.sp-item-standing-tag{font-size:8px;font-weight:800;letter-spacing:.04em;color:var(--green);margin-right:3px}
.sp-item.draggable{cursor:grab}
.sp-item.draggable:active{cursor:grabbing}
.sp-item.dragging{opacity:.45;transform:scale(.98)}
/* ─── NEEDS COVERAGE: role-distinct shading + zebra for both ───────────── */
.gi.role-driver{border-left:3px solid var(--green);background:rgba(45,95,63,.04)}
.gi.role-monitor{border-left:3px solid var(--blue);background:rgba(139,101,8,.04)}
.gi.role-both{border-left:3px solid transparent;background:repeating-linear-gradient(135deg,rgba(45,95,63,.06) 0 8px,rgba(139,101,8,.06) 8px 16px);border-image:linear-gradient(135deg,var(--green),var(--blue)) 1}
.gi.role-both{position:relative;border:1px solid var(--bdr);overflow:hidden}
.gi.role-both::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(135deg,var(--green) 0 50%,var(--blue) 50% 100%)}
.gi.drop-target{outline:2px dashed var(--green);outline-offset:-2px;background:rgba(45,95,63,.10)}
.gi.drop-target.role-monitor{outline-color:var(--blue);background:rgba(139,101,8,.10)}
.gi.drop-target.role-both{outline-color:var(--amber)}
/* Per-route drop targets inside a gap card */
.grun{position:relative;border-radius:3px;padding:2px 4px;margin:1px -4px;transition:background .1s,outline .1s}
.grun.drop-target{outline:1.5px dashed var(--green);outline-offset:0;background:rgba(45,95,63,.08)}
.grun.drop-target.role-monitor-target{outline-color:var(--blue);background:rgba(139,101,8,.08)}
.grun.drop-eligible{background:rgba(45,95,63,.04)}
.grun.drop-eligible.role-monitor-target{background:rgba(139,101,8,.04)}
/* Clear-sub X — appears next to assigned sub names in gap rows */
.gsub-clear{display:inline-flex;align-items:center;justify-content:center;width:13px;height:13px;border-radius:50%;background:transparent;border:none;color:var(--txd);font-size:10px;font-weight:700;cursor:pointer;margin-left:3px;padding:0;line-height:1;transition:background .1s,color .1s;flex-shrink:0;vertical-align:middle}
.gsub-clear:hover{background:var(--red);color:#fff}
.gsub{display:inline-flex;align-items:center}
.gi-clear-all{font-size:9px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:2px 7px;border-radius:3px;border:1px solid var(--bdr);background:var(--surf);color:var(--txm);cursor:pointer;transition:background .1s,border-color .1s,color .1s}
.gi-clear-all:hover{border-color:var(--red);color:var(--red);background:rgba(167,48,39,.06)}
.gi-bottom{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:4px}
/* ─── SPARE ITEM: per-wave allocation indicators ──────────────────────── */
.sp-waves{display:flex;gap:3px;margin-top:4px;flex-wrap:wrap}
.sp-wave{display:inline-flex;align-items:center;gap:3px;font-size:9px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:2px 5px;border-radius:3px;font-family:'IBM Plex Mono',monospace;border:1px solid transparent}
.sp-wave.open{background:rgba(45,95,63,.10);color:var(--green);border-color:rgba(45,95,63,.2)}
.sp-wave.taken{background:rgba(184,134,11,.12);color:var(--amber);border-color:rgba(184,134,11,.25)}
.sp-wave.taken .sp-wave-loc{font-weight:600;letter-spacing:0;text-transform:none}
.sp-item-allocated-detail{font-size:10px;color:var(--amber);margin-top:3px;line-height:1.4}
.sp-item-allocated-detail .alloc-line{display:block}
/* Drop target rejection — red dashed outline */
.gi.drop-reject{outline:2px dashed var(--red) !important;background:rgba(167,48,39,.08) !important}
.grun.drop-reject{outline:1.5px dashed var(--red) !important;background:rgba(167,48,39,.08) !important}
.drop-reject-tooltip{position:fixed;background:var(--red);color:#fff;font-size:11px;padding:5px 9px;border-radius:4px;z-index:200;pointer-events:none;box-shadow:0 4px 10px rgba(0,0,0,.18);font-weight:600;max-width:240px;line-height:1.3}
/* ─── SIGN-IN SCREEN ─────────────────────────────────────────────────────── */
.signin-overlay{position:fixed;inset:0;z-index:1000;background:var(--bg);display:flex;align-items:center;justify-content:center;padding:32px}
.signin-card{max-width:420px;width:100%;text-align:center}
.signin-brand{font-family:'IBM Plex Mono',monospace;font-size:11px;letterspacing:.18em;text-transform:uppercase;color:var(--txd);letter-spacing:.18em;margin-bottom:16px}
.signin-title{font-size:42px;font-weight:700;letter-spacing:-.025em;margin:0 0 12px;line-height:1}
.signin-divider{width:32px;height:1px;background:var(--bdr2);margin:18px auto}
.signin-sub{font-size:14px;color:var(--txm);line-height:1.55;margin-bottom:32px}
.signin-btn{width:100%;display:flex;align-items:center;justify-content:center;gap:10px;padding:13px 18px;font-size:14px;font-weight:600;background:var(--surf);border:1px solid var(--bdr2);border-radius:6px;cursor:pointer;font-family:inherit;color:var(--tx);transition:background .12s,border-color .12s}
.signin-btn:hover{background:var(--surf2);border-color:var(--ink-3)}
.signin-btn:disabled{opacity:.6;cursor:wait}
.signin-foot{margin-top:32px;font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--txd)}
.signin-error{margin-top:14px;padding:9px 12px;background:rgba(167,48,39,.06);border:1px solid rgba(167,48,39,.25);border-radius:5px;font-size:12px;color:var(--red);line-height:1.45;text-align:left}
/* ─── USER MENU ─────────────────────────────────────────────────────────── */
.user-menu-wrap{position:relative;margin-left:8px}
.user-chip{display:flex;align-items:center;gap:7px;padding:4px 4px 4px 10px;background:transparent;border:1px solid var(--bdr);border-radius:14px;cursor:pointer;color:var(--tx);font-family:inherit;font-size:12px;font-weight:500}
.user-chip:hover{background:var(--surf2)}
.user-avatar{width:22px;height:22px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:#fff;font-family:'IBM Plex Mono',monospace;flex-shrink:0}
.user-menu-pop{position:absolute;top:30px;right:0;background:var(--surf);border:1px solid var(--bdr2);border-radius:6px;box-shadow:0 8px 22px rgba(0,0,0,.12);z-index:50;min-width:230px;overflow:hidden}
.user-menu-h{padding:11px 13px;border-bottom:1px solid var(--bdr)}
.user-menu-h-name{font-size:13px;font-weight:600;color:var(--tx)}
.user-menu-h-email{font-size:11px;color:var(--txd);margin-top:2px}
.user-menu-h-role{display:inline-block;margin-top:5px;font-size:9px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:1px 6px;border-radius:3px;background:rgba(45,95,63,.12);color:var(--green)}
.user-menu-action{display:block;width:100%;padding:8px 13px;text-align:left;background:transparent;border:none;cursor:pointer;font-family:inherit;font-size:12px;color:var(--tx)}
.user-menu-action:hover{background:var(--surf2)}
.user-menu-action.danger{color:var(--red)}
/* ─── ACCESS DENIED LANDING ─────────────────────────────────────────────── */
.access-denied{max-width:460px;text-align:center}
.access-denied h2{font-size:22px;font-weight:700;letter-spacing:-.01em;margin:0 0 10px;color:var(--tx)}
.access-denied p{font-size:13px;color:var(--txm);line-height:1.6;margin:0 0 18px}
.access-denied .signed-in-as{padding:10px 14px;background:var(--surf2);border-radius:5px;font-size:12px;color:var(--txm);margin-bottom:18px;font-family:'IBM Plex Mono',monospace}
.access-denied .signed-in-as strong{color:var(--tx);font-weight:700}
/* ─── SOFT CUTOVER BANNER ──────────────────────────────────────────────── */
.cutover-banner{position:relative;padding:7px 14px;background:rgba(184,134,11,.10);border-bottom:1px solid rgba(184,134,11,.25);font-size:12px;color:var(--amber);text-align:center;font-weight:600;letter-spacing:.01em}
.cutover-banner b{color:var(--tx)}
.cutover-banner .x{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;color:var(--amber);font-size:16px;font-weight:700;padding:0 6px;line-height:1}
.gi-actions{margin-top:6px;padding-top:5px;border-top:1px dashed rgba(0,0,0,.08);display:flex;flex-wrap:wrap;gap:4px;font-size:9px;color:var(--txd);font-style:italic}
.gi-drop-hint{font-size:9px;font-style:italic;color:var(--txd);margin-top:4px;letter-spacing:.04em}
.gi.drop-target .gi-drop-hint{color:var(--green);font-weight:600;font-style:normal}
/* ─── CALLOUTS LOG SECTION DIVIDER ───────────────────────────────────────── */
.log-section-divider{display:flex;align-items:center;gap:12px;padding:18px 0 10px;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--txd)}
.log-section-divider:first-child{padding-top:6px}
.log-section-divider::before,.log-section-divider::after{content:'';flex:1;height:1px;background:var(--bdr2)}
.log-section-divider.upcoming{color:var(--green)}
.log-section-divider.historic{color:var(--txm)}
@media print{
.sb,.hd-btns,.ft,.ab,.si,.sub-row,.cf,.mtabs,.abs-banner,.sp-panel{display:none!important}
.lay,.lay-3col{height:auto}.gw{overflow:visible}
body{background:#fff;color:#000}
.dc{border:1px solid #ccc;break-inside:avoid;min-height:auto}
.dc.cam{background:#fee2e2;border-color:#A73027}
.dc.cok{background:#dcfce7;border-color:#2D5F3F}
.dc.cmix{background:#fef3c7;border-color:#d97706}
.rr.rout{background:#fee2e2}.rr.rcov{background:#dcfce7}
}
/* ─── EVOLUTION: day status, monitors, lock flow ───────────────────────── */
.day-pill{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:14px;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;border:1px solid var(--bdr2);flex-shrink:0;background:var(--surf2);color:var(--txm)}
.day-pill.draft{background:rgba(184,134,11,.08);border-color:rgba(184,134,11,.3);color:var(--amber)}
.day-pill.editing{background:rgba(45,95,63,.08);border-color:rgba(45,95,63,.3);color:var(--green)}
.day-pill.locked{background:rgba(28,24,20,.06);border-color:var(--bdr2);color:var(--tx)}
.day-pill .pill-dot{width:6px;height:6px;border-radius:50%}
.day-pill.draft .pill-dot{background:var(--amber)}
.day-pill.editing .pill-dot{background:var(--green)}
.day-pill.locked .pill-dot{background:var(--tx)}
.btn.lock{border-color:var(--green);color:var(--green);font-weight:700}
.btn.lock:hover{background:rgba(45,95,63,.08);color:var(--green);border-color:var(--green)}
.lock-banner{padding:7px 13px;background:rgba(28,24,20,.04);border-bottom:1px solid var(--bdr);font-size:11px;color:var(--txm);display:flex;align-items:center;gap:8px}
.lock-banner b{color:var(--tx);font-weight:700}
/* MONITOR row inside card */
.mr{display:flex;align-items:center;gap:5px;padding:3px 0 5px;margin-top:2px;border-bottom:1px dashed rgba(0,0,0,.06);margin-bottom:4px;font-size:11px}
.mr-lbl{font-family:'IBM Plex Mono',monospace;font-size:9px;font-weight:700;letter-spacing:.08em;color:var(--txd);width:40px;flex-shrink:0}
.mr-name{font-weight:600;color:var(--tx);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mr-name.empty{color:var(--txd);font-weight:500;font-style:italic;cursor:pointer}
.mr-name.empty:hover{color:var(--blue);text-decoration:underline}
.mr-ab{font-size:9px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:1px 5px;border-radius:3px;border:1px solid var(--bdr2);background:transparent;color:var(--txm);cursor:pointer;flex-shrink:0}
.mr-ab:hover{border-color:var(--out-bdr);color:var(--red)}
.mr-ab.re{border-color:rgba(45,95,63,.4);color:var(--green)}
/* Dual D/M dots on run rows — replaces single rxt indicator */
.rstatus{display:flex;gap:2px;flex-shrink:0;margin-left:1px}
.rdm{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;border-radius:3px;font-size:8px;font-weight:800;font-family:'IBM Plex Mono',monospace;border:1px solid transparent;background:rgba(0,0,0,.04);color:var(--txd)}
.rdm.ok{background:rgba(45,95,63,.12);color:var(--green)}
.rdm.out{background:rgba(167,48,39,.12);color:var(--red)}
.rdm.cov{background:rgba(45,95,63,.18);color:var(--green)}
.rdm.mix{background:rgba(184,134,11,.14);color:var(--amber)}
/* Sub row evolution: two-line layout when both seats out */
.sub-row.dual{flex-direction:column;align-items:stretch;gap:3px;padding-left:14px}
.sub-row .sub-line{display:flex;align-items:center;gap:4px;width:100%}
.sub-row .si-lbl.m-lbl{color:var(--blue)}
.sub-row .si.m-si{border-color:rgba(139,101,8,.4)}
.sub-row .si.m-si:focus{border-color:var(--blue)}
.sub-row .si.m-si.covered{border-color:rgba(45,95,63,.5);color:var(--green)}
/* Make permanent toggle */
.perm{display:flex;align-items:center;gap:4px;font-size:9px;color:var(--txd);cursor:pointer;padding:1px 4px;border-radius:3px;flex-shrink:0;letter-spacing:.04em;text-transform:uppercase;font-weight:600;white-space:nowrap;user-select:none}
.perm:hover{color:var(--tx);background:rgba(0,0,0,.04)}
.perm input{margin:0;cursor:pointer;width:11px;height:11px;accent-color:var(--blue)}
.perm.on{color:var(--blue)}
/* Read-only state when day is locked */
body.locked .si,body.locked .ab,body.locked .mr-ab,body.locked .perm{pointer-events:none;opacity:.55}
body.locked .rr,body.locked .mr-name.empty{cursor:default}
body.locked .btn.danger{display:none}
/* CALLOUTS — segmented control (Students / Drivers / Monitors) */
.co-seg{display:flex;background:var(--surf2);border:1px solid var(--bdr);border-radius:5px;padding:2px;margin-bottom:9px;gap:1px}
.co-seg-btn{flex:1;padding:5px 8px;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--txm);background:transparent;border:none;border-radius:3px;cursor:pointer;font-family:inherit;transition:background .1s,color .1s}
.co-seg-btn:hover{color:var(--tx)}
.co-seg-btn.on{background:var(--surf);color:var(--blue);box-shadow:0 1px 2px rgba(0,0,0,.04)}
/* Role pills in sidebar gap items */
.role-pill{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;border-radius:3px;font-size:8px;font-weight:800;font-family:'IBM Plex Mono',monospace;flex-shrink:0;margin-left:3px}
.role-pill.D{background:rgba(45,95,63,.15);color:var(--green)}
.role-pill.M{background:rgba(139,101,8,.15);color:var(--blue)}
/* Monitor picker popover */
.mp-pop{position:absolute;background:var(--surf);border:1px solid var(--bdr2);border-radius:6px;box-shadow:0 8px 24px rgba(0,0,0,.12);z-index:50;min-width:240px;max-height:320px;display:flex;flex-direction:column;overflow:hidden}
.mp-search{padding:8px 10px;border-bottom:1px solid var(--bdr)}
.mp-search input{width:100%;padding:5px 8px;border:1px solid var(--bdr);border-radius:3px;font-size:12px;font-family:inherit}
.mp-search input:focus{outline:none;border-color:var(--blue)}
.mp-list{overflow-y:auto;flex:1}
.mp-item{padding:7px 11px;font-size:12px;cursor:pointer;border-bottom:1px solid var(--bdr)}
.mp-item:hover{background:var(--surf2)}
.mp-item-name{font-weight:600;color:var(--tx)}
.mp-item-meta{font-size:10px;color:var(--txd);margin-top:1px}
.mp-actions{padding:6px 10px;border-top:1px solid var(--bdr);display:flex;gap:4px}
.mp-pop .perm{margin-left:auto}
/* Lock day modal */
.lock-modal-bg{position:fixed;inset:0;background:rgba(28,24,20,.5);z-index:200;display:flex;align-items:center;justify-content:center;padding:24px}
.lock-modal{background:var(--surf);border-radius:8px;border:1px solid var(--bdr);width:100%;max-width:440px;box-shadow:0 16px 32px rgba(0,0,0,.18)}
.lock-modal-h{padding:14px 18px;border-bottom:1px solid var(--bdr)}
.lock-modal-t{font-size:14px;font-weight:700;color:var(--tx);margin-bottom:2px}
.lock-modal-s{font-size:11px;color:var(--txm)}
.lock-modal-b{padding:14px 18px;font-size:13px;color:var(--tx);line-height:1.55}
.lock-modal-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:10px 0;padding:10px;background:var(--surf2);border-radius:5px}
.lock-stat{text-align:center}
.lock-stat-n{font-size:18px;font-weight:700;color:var(--tx);font-family:'IBM Plex Mono',monospace}
.lock-stat-l{font-size:10px;color:var(--txd);text-transform:uppercase;letter-spacing:.06em;margin-top:2px}
.lock-modal-f{padding:10px 18px;border-top:1px solid var(--bdr);display:flex;gap:6px;justify-content:flex-end}
/* ──────────────────────────────────────────────────────────────────────────
Shell layout, overlays, and overrides — appended after the verbatim port
of the production stylesheet so they take precedence when needed.
────────────────────────────────────────────────────────────────────────── */
html, body { height: 100%; overflow: hidden; }
[hidden] { display: none !important; }
/* Overlays: sign-in, denied, loading */
.overlay { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: var(--bg); z-index: 100; padding: 24px; }
.overlay-card { background: var(--surf); border: 1px solid var(--bdr); border-radius: 8px; padding: 32px; max-width: 420px; width: 100%; text-align: center; box-shadow: 0 2px 8px rgba(0,0,0,.04); }
.overlay-h { font-size: 20px; font-weight: 700; margin-bottom: 8px; }
.overlay-sub { font-size: 13px; color: var(--txm); margin-bottom: 20px; }
.btn-primary, .btn-secondary { display: inline-block; padding: 10px 22px; border-radius: 6px; border: 1px solid; font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: opacity .12s, background .12s, color .12s; }
.btn-primary { background: var(--green); color: #fff; border-color: var(--green); }
.btn-primary:hover { opacity: .9; }
.btn-secondary { background: transparent; color: var(--txm); border-color: var(--bdr2); }
.btn-secondary:hover { color: var(--tx); background: var(--surf2); }
.error { color: var(--red); font-size: 13px; margin-top: 12px; }
/* App shell — semantic wrappers (#header, #workspace) drive the layout
so the verbatim .hd / .lay rules don't have to know our outer structure. */
#app { display: flex; flex-direction: column; height: 100vh; overflow: hidden; }
#header, #app-tabs, #module-tabs { flex-shrink: 0; }
/* Override: production .lay used calc(100vh - 90px) to subtract a 52px
header + 38px filter row. We don't render the filter row yet, and the
surrounding flex column already gives us correct sizing, so let .lay
fill its parent. */
#workspace { flex: 1; overflow: auto; min-height: 0; }
#workspace .lay { height: 100%; }
/* Assignment-board mode: kill the workspace-level scroll so the left grid
(.gw) and the right inspector rail (.mgr-insp-rail) each own their own
vertical overflow. Without this, .lay overflows #workspace's bottom (the
subview bar above it eats some height) and the document scrolls both
panels together. Uses :has() so it auto-applies whenever the manager
board's .lay structure is present, with no need to toggle classes
across tab switches. */
#workspace:has(.mgr-insp-rail) { overflow: hidden; display: flex; flex-direction: column; }
#workspace:has(.mgr-insp-rail) > #mgr-body { flex: 1; min-height: 0; overflow: hidden; }
#workspace:has(.mgr-insp-rail) .lay { height: 100%; }
/* ──────────────────────────────────────────────────────────────────────────
Callouts tab — feature-specific styles.
Layout (.co-wrap, .co-left, .co-right, .co-section, .co-lbl, .co-search,
.co-results) comes from the verbatim production CSS above.
────────────────────────────────────────────────────────────────────────── */
#workspace .co-wrap { height: 100%; }
.callout-section { margin-bottom: 14px; }
.callout-section-hdr {
display: flex; align-items: center; justify-content: space-between;
padding: 6px 4px; font-size: 10px; font-weight: 700;
letter-spacing: 1px; text-transform: uppercase; color: var(--txd);
}
.callout-section-ct {
font-family: 'IBM Plex Mono', monospace; font-size: 10px; color: var(--txd);
}
.callout-item {
display: flex; align-items: center; justify-content: space-between;
padding: 6px 8px; margin: 1px 0; border-radius: 4px; cursor: pointer;
border: 1px solid transparent; transition: background .1s, border-color .1s;
}
.callout-item:hover { background: var(--surf2); border-color: var(--bdr); }
.callout-item.is-saving { opacity: .5; pointer-events: none; }
.callout-name { font-size: 13px; color: var(--tx); flex: 1; min-width: 0; }
.callout-add-btn {
font-size: 10px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
padding: 2px 6px; border-radius: 3px; flex-shrink: 0;
}
.callout-item--driver .callout-add-btn { color: var(--red); background: rgba(167,48,39,.10); }
.callout-item--monitor .callout-add-btn { color: var(--amber); background: rgba(184,134,11,.10); }
.callout-item--student .callout-add-btn { color: var(--blue); background: rgba(139,101,8,.10); }
.callout-empty {
padding: 8px; font-size: 11px; color: var(--txd); font-style: italic; text-align: center;
}
.callout-log-hdr {
display: flex; align-items: center; justify-content: space-between;
padding: 8px 12px; border-bottom: 1px solid var(--bdr); margin-bottom: 8px;
}
.callout-log-ct {
background: var(--red); color: #fff; padding: 1px 8px; border-radius: 10px;
font-size: 11px; font-weight: 800;
}
.callout-log-rows { display: flex; flex-direction: column; gap: 4px; padding: 0 12px 14px; }
.callout-log-row {
display: flex; align-items: center; gap: 8px;
padding: 7px 9px; border-radius: 5px;
border: 1px solid var(--bdr); background: var(--surf);
}
.callout-log-role {
font-family: 'IBM Plex Mono', monospace; font-size: 9px; font-weight: 700;
letter-spacing: .08em; padding: 2px 5px; border-radius: 3px; flex-shrink: 0;
}
.callout-log-row--driver .callout-log-role { background: rgba(167,48,39,.12); color: var(--red); }
.callout-log-row--monitor .callout-log-role { background: rgba(184,134,11,.12); color: var(--amber); }
.callout-log-row--student .callout-log-role { background: rgba(139,101,8,.12); color: var(--blue); }
.callout-log-name { flex: 1; font-size: 13px; color: var(--tx); font-weight: 500; min-width: 0; }
.callout-log-scope {
font-size: 10px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
color: var(--txm); padding: 2px 6px; border-radius: 3px;
background: var(--surf2); flex-shrink: 0;
}
.callout-undo-btn {
background: transparent; border: 1px solid transparent; color: var(--txd);
font-size: 14px; cursor: pointer; padding: 2px 8px; border-radius: 3px;
transition: color .12s, border-color .12s;
}
.callout-undo-btn:hover { color: var(--red); border-color: rgba(167,48,39,.3); }
.callout-log-empty { padding: 24px; text-align: center; }
.callout-log-empty-tx { font-size: 14px; font-weight: 600; color: var(--txm); margin-bottom: 4px; }
.callout-log-empty-sub { font-size: 12px; color: var(--txd); }
/* ──────────────────────────────────────────────────────────────────────────
Assignments tab (read-only first cut)
────────────────────────────────────────────────────────────────────────── */
.asg-wrap { padding: 18px; }
.asg-header { margin-bottom: 14px; }
.asg-title { font-size: 18px; font-weight: 700; margin-bottom: 4px; }
.asg-sub { font-size: 12px; color: var(--txm); }
.asg-note {
margin-top: 10px; padding: 8px 12px; border-radius: 4px;
background: rgba(184,134,11,.08); border: 1px solid rgba(184,134,11,.28);
color: var(--amber); font-size: 12px;
}
.asg-table {
background: var(--surf); border: 1px solid var(--bdr); border-radius: 6px; overflow: hidden;
}
.asg-row {
display: grid;
grid-template-columns: 110px 80px minmax(140px, 1fr) minmax(140px, 1fr) 60px;
align-items: center; gap: 8px;
padding: 8px 14px; border-bottom: 1px solid var(--bdr);
font-size: 13px;
}
.asg-row:last-child { border-bottom: none; }
.asg-row-hdr {
background: var(--surf2);
font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
color: var(--txd);
}
.asg-cell { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.asg-num-cell { font-family: 'IBM Plex Mono', monospace; font-weight: 700; color: var(--blue); }
.asg-runs-cell { text-align: center; font-family: 'IBM Plex Mono', monospace; color: var(--txm); }
.asg-empty { color: var(--txd); font-style: italic; }
.asg-mixed { color: var(--amber); font-weight: 600; }
/* ──────────────────────────────────────────────────────────────────────────
Callouts — calendar widget
────────────────────────────────────────────────────────────────────────── */
.callout-calendar { background: var(--surf); border: 1px solid var(--bdr); border-radius: 6px; padding: 8px; }
.cal-header { display: flex; align-items: center; justify-content: space-between; padding: 4px 6px 8px; border-bottom: 1px solid var(--bdr); margin-bottom: 8px; }
.cal-month-label { font-size: 12px; font-weight: 700; letter-spacing: .04em; color: var(--tx); }
.cal-nav { background: transparent; border: 1px solid var(--bdr2); color: var(--txm); width: 24px; height: 24px; border-radius: 4px; cursor: pointer; font-size: 14px; line-height: 1; padding: 0; }
.cal-nav:hover:not(:disabled) { color: var(--tx); background: var(--surf2); }
.cal-nav:disabled { opacity: .35; cursor: not-allowed; }
.cal-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin-bottom: 4px; }
.cal-weekdays > div { font-size: 9px; font-weight: 700; letter-spacing: .08em; color: var(--txd); text-align: center; padding: 2px 0; }
.cal-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cal-day { aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; font-size: 12px; color: var(--tx); border-radius: 4px; cursor: pointer; user-select: none; transition: background .1s, color .1s, border-color .1s; border: 1px solid transparent; }
.cal-day:hover:not(.cal-day-blank):not(.cal-day-past):not(.cal-day-disabled) { background: var(--surf2); border-color: var(--bdr); }
.cal-day-blank { cursor: default; }
.cal-day-past { color: var(--txd); cursor: not-allowed; opacity: .45; }
.cal-day-today { font-weight: 700; color: var(--blue); border-color: var(--blue); }
.cal-day-selected { background: var(--green); color: #fff; border-color: var(--green); font-weight: 600; }
.cal-day-selected.cal-day-today { background: var(--green); color: #fff; }
.cal-day-disabled { cursor: not-allowed; opacity: .35; }
/* ──────────────────────────────────────────────────────────────────────────
Callouts — left pane (add flow)
────────────────────────────────────────────────────────────────────────── */
.callout-selected { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: var(--surf2); border: 1px solid var(--bdr); border-radius: 6px; }
.callout-selected-kind { font-family: 'IBM Plex Mono', monospace; font-size: 9px; font-weight: 700; letter-spacing: .1em; padding: 2px 5px; border-radius: 3px; flex-shrink: 0; background: rgba(139,101,8,.12); color: var(--blue); }
.callout-selected--driver .callout-selected-kind { background: rgba(167,48,39,.12); color: var(--red); }
.callout-selected--monitor .callout-selected-kind { background: rgba(184,134,11,.12); color: var(--amber); }
.callout-selected--student .callout-selected-kind { background: rgba(139,101,8,.12); color: var(--blue); }
.callout-selected-name { flex: 1; font-size: 14px; font-weight: 600; color: var(--tx); }
.callout-cancel-btn { background: transparent; border: 1px solid transparent; color: var(--txd); cursor: pointer; padding: 2px 8px; border-radius: 3px; font-size: 14px; }
.callout-cancel-btn:hover { color: var(--red); border-color: rgba(167,48,39,.3); }
.callout-indefinite { display: flex; align-items: center; gap: 8px; padding: 8px 10px; cursor: pointer; user-select: none; font-size: 13px; color: var(--tx); }
.callout-indefinite input { cursor: pointer; }
.callout-confirm-btn { width: 100%; padding: 10px 14px; }
.callout-confirm-btn:disabled { opacity: .5; cursor: not-allowed; }
/* ──────────────────────────────────────────────────────────────────────────
Callouts — right pane (day-grouped log)
────────────────────────────────────────────────────────────────────────── */
.callout-log-hdr-row { padding: 8px 14px 4px; border-bottom: 1px solid var(--bdr); margin-bottom: 8px; }
.callout-day-section { padding: 0 12px 14px; margin-bottom: 6px; border-bottom: 1px solid var(--bdr); }
.callout-day-section:last-child { border-bottom: none; }
.callout-day-section.is-today { background: rgba(45,95,63,.03); }
.callout-day-hdr { display: flex; align-items: center; gap: 10px; padding: 10px 4px 8px; }
.callout-day-label { font-size: 13px; font-weight: 700; color: var(--tx); }
.callout-day-today-badge { font-family: 'IBM Plex Mono', monospace; font-size: 9px; font-weight: 700; letter-spacing: .1em; padding: 2px 6px; border-radius: 3px; background: var(--blue); color: #fff; }
.callout-day-counts { margin-left: auto; font-size: 11px; color: var(--txm); }
/* Consolidation banner — sits between the day header and the day cols.
Surfaces AM runs whose remaining roster is ≤1 after the day's absences
so the dispatcher can consider folding them into another run. */
.callout-banner {
margin: 0 4px 10px;
padding: 8px 12px;
background: rgba(184,134,11,.08);
border: 1px solid var(--amber);
border-left-width: 4px;
border-radius: 4px;
}
.callout-banner-hdr {
font-size: 11.5px; font-weight: 700; color: var(--amber);
letter-spacing: .03em; text-transform: uppercase;
margin-bottom: 5px;
}
.callout-banner-list {
list-style: none; margin: 0; padding: 0;
display: flex; flex-direction: column; gap: 3px;
}
.callout-banner-item {
font-size: 12px; color: var(--tx); line-height: 1.4;
}
.callout-banner-item strong { color: var(--tx); font-weight: 700; }
.callout-banner-school {
margin-left: 4px;
font-size: 10.5px; color: var(--txm);
}
.callout-banner-detail { font-size: 10.5px; color: var(--txm); }
.callout-day-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.callout-day-cols--3 { grid-template-columns: 1fr 1fr 1fr; }
.callout-day-col { background: var(--surf); border: 1px solid var(--bdr); border-radius: 5px; padding: 6px 8px; }
.callout-day-col-hdr { font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--txd); padding: 2px 0 6px; border-bottom: 1px solid var(--bdr); margin-bottom: 6px; }
.callout-day-empty { font-size: 11px; color: var(--txd); font-style: italic; padding: 4px 2px; }
.callout-row { display: flex; align-items: center; gap: 6px; padding: 6px 7px; border-radius: 4px; margin: 2px 0; border: 1px solid transparent; }
.callout-row + .callout-row { margin-top: 1px; }
.callout-row--driver { background: rgba(167,48,39,.06); }
.callout-row--monitor { background: rgba(184,134,11,.04); }
.callout-row--student { background: var(--surf2); }
.callout-row--school { background: rgba(67, 160, 71, .07); border-color: rgba(67, 160, 71, .25); }
.callout-row-role { font-family: 'IBM Plex Mono', monospace; font-size: 9px; font-weight: 700; letter-spacing: .08em; padding: 1px 4px; border-radius: 3px; flex-shrink: 0; }
.callout-row--driver .callout-row-role { background: rgba(167,48,39,.18); color: var(--red); }
.callout-row--monitor .callout-row-role { background: rgba(184,134,11,.18); color: var(--amber); }
.callout-row-name { flex: 1; font-size: 12px; color: var(--tx); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.callout-row-badge { font-size: 12px; color: var(--amber); flex-shrink: 0; cursor: help; }
/* Notice classification chip on staff callouts. NCNS is the loud one
(red), notified is yellow, planned is muted green. */
.callout-notice-chip {
font-size: 9px; font-weight: 800; letter-spacing: .04em;
padding: 1px 6px;
border-radius: 999px;
flex-shrink: 0;
cursor: help;
}
.callout-notice-chip.is-ncns { background: rgba(167,48,39,.15); color: var(--red); border: 1px solid rgba(167,48,39,.4); }
.callout-notice-chip.is-sick { background: rgba(96,165,250,.15); color: #93c5fd; border: 1px solid rgba(96,165,250,.4); }
.callout-notice-chip.is-notified { background: rgba(184,134,11,.18); color: var(--amber); border: 1px solid rgba(184,134,11,.4); }
.callout-notice-chip.is-planned { background: rgba(45,95,63,.12); color: var(--green); border: 1px solid rgba(45,95,63,.35); }
/* Reason picker (NCNS / Sick / Planned) inside the left-pane add flow. */
.callout-reason-row { display: flex; gap: 6px; flex-wrap: wrap; }
.callout-reason-btn {
font-family: 'IBM Plex Sans', sans-serif; font-size: 11px; font-weight: 700;
letter-spacing: .04em; text-transform: uppercase;
padding: 6px 12px; border-radius: 4px;
border: 1px solid var(--bdr2); background: transparent; color: var(--txm);
cursor: pointer; transition: all .12s;
}
.callout-reason-btn:hover { border-color: var(--tx); color: var(--tx); }
.callout-reason-btn.is-on { border-color: var(--blue); background: rgba(59,130,246,.12); color: var(--blue); }
/* Per-row wave toggles on saved callout rows. Three clickable pills
(AM / MD / PM). All three "off" = out all day (the default), shown as
a dim outline that says "out all day" via the parent's title. Any pill
"on" scopes the callout to that wave only. */
.callout-row-waves {
display: inline-flex; gap: 3px; flex-shrink: 0; padding: 1px 0;
}
.callout-row-wave {
font-family: 'IBM Plex Mono', monospace; font-size: 9px; font-weight: 800;
letter-spacing: .04em;
min-width: 24px; padding: 2px 5px;
border: 1px solid var(--bdr2); background: transparent; color: var(--txd);
border-radius: 3px; cursor: pointer; transition: all .12s;
}
.callout-row-waves.is-all-day .callout-row-wave {
/* All-day default: subtle "all three implied" hint via faint amber border */
border-color: rgba(210,153,34,.25); color: var(--txm);
}
.callout-row-wave:hover { border-color: var(--tx); color: var(--tx); }
.callout-row-wave.is-on {
border-color: var(--amber); background: rgba(210,153,34,.18); color: var(--amber);
}
/* NS checkbox for student absences. */
.callout-noshow { display: flex; align-items: center; gap: 8px; padding: 8px 10px; cursor: pointer; user-select: none; font-size: 13px; color: var(--tx); }
.callout-noshow input { cursor: pointer; }
.callout-noshow strong { color: var(--amber); }
/* NS badge on absent-student rows in the right pane. */
.callout-row-badge.is-ns {
background: rgba(184,134,11,.18); color: var(--amber);
border: 1px solid rgba(184,134,11,.4);
padding: 1px 5px; border-radius: 3px;
font-size: 9px; font-weight: 800; letter-spacing: .06em;
}
/* Driver-of-absent-student context line. */
.callout-row-context--drv strong { color: var(--tx); font-weight: 700; }
.callout-row-drv--missing { color: var(--red); font-style: italic; }
.callout-row-drv + .callout-row-drv { margin-left: 6px; }
/* ──────────────────────────────────────────────────────────────────────────
Calendar — weekend muted, hover subtler
────────────────────────────────────────────────────────────────────────── */
.cal-day:hover:not(.cal-day-blank):not(.cal-day-past):not(.cal-day-disabled):not(.cal-day-weekend) {
background: transparent;
border-color: var(--bdr2);
}
.cal-day-selected:hover { background: var(--green); border-color: var(--green); }
.cal-day-weekend { color: var(--txd); opacity: .35; cursor: not-allowed; }
.cal-day-weekend:hover { background: transparent; border-color: transparent; }
/* ──────────────────────────────────────────────────────────────────────────
Callouts right-pane — student row enrichment + notified toggle
────────────────────────────────────────────────────────────────────────── */
.callout-row { gap: 8px; align-items: flex-start; }
.callout-row-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.callout-row-line1 { display: flex; align-items: center; gap: 6px; min-width: 0; }
.callout-row-context {
font-size: 10px; color: var(--txm); line-height: 1.3;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.callout-row-notify {
display: flex; align-items: center; gap: 4px; flex-shrink: 0;
font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
cursor: pointer; user-select: none;
padding: 3px 7px; border-radius: 3px;
background: rgba(167,48,39,.10); color: var(--red);
transition: background .12s, color .12s;
}
.callout-row-notify input { cursor: pointer; margin: 0; }
.callout-row-notify.is-notified {
background: rgba(45,95,63,.12);
color: var(--green);
}
/* ──────────────────────────────────────────────────────────────────────────
Manager card — driver staff row, absence banner button (board-only)
────────────────────────────────────────────────────────────────────────── */
.staff-row.drv.out .staff-name { text-decoration: line-through; opacity: .65; }
.out-tag {
display: inline-block; margin-left: 4px;
font-family: 'IBM Plex Mono', monospace; font-size: 9px; font-weight: 700; letter-spacing: .06em;
padding: 1px 4px; border-radius: 3px;
background: var(--red); color: #fff;
}
.abs-row { display: flex; align-items: center; gap: 5px; }
.abs-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; color: var(--tx); }
.abs-row.notified .abs-name { text-decoration: line-through; opacity: .6; }
.abs-notify-btn {
flex-shrink: 0; cursor: pointer;
font-family: 'IBM Plex Sans', sans-serif; font-size: 9px; font-weight: 700;
letter-spacing: .04em; text-transform: uppercase;
padding: 1px 5px; border-radius: 3px;
border: 1px solid transparent;
background: rgba(167,48,39,.14); color: var(--red);
transition: background .12s, color .12s, border-color .12s;
}
.abs-notify-btn:hover:not(:disabled) { background: rgba(167,48,39,.22); }
.abs-notify-btn.is-notified { background: rgba(45,95,63,.14); color: var(--green); }
.abs-notify-btn.is-notified:hover:not(:disabled) { background: rgba(45,95,63,.22); }
.abs-notify-btn:disabled { opacity: .5; cursor: progress; }
/* ──────────────────────────────────────────────────────────────────────────
Sidebar — wave subhead spacing tweak
────────────────────────────────────────────────────────────────────────── */
.gdn .bus-num { color: var(--txm); font-size: 10px; font-weight: 600; margin-left: 4px; }
.callout-empty-hint { padding: 36px 14px; text-align: center; color: var(--txd); font-size: 12px; line-height: 1.5; }
/* ──────────────────────────────────────────────────────────────────────────
Manager card — DRV / MON staff rows with OUT/IN toggle (this turn)
────────────────────────────────────────────────────────────────────────── */
.staff-row { display: flex; align-items: center; gap: 6px; padding: 4px 6px; margin: 0 -6px; border-radius: 4px; }
.staff-row .staff-lbl { font-family: 'IBM Plex Mono', monospace; font-size: 9px; font-weight: 700; letter-spacing: .08em; color: var(--txm); flex-shrink: 0; min-width: 26px; }
.staff-row .staff-name { flex: 1; font-size: 12px; font-weight: 600; color: var(--tx); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.staff-row.mon.empty .staff-name { color: var(--txd); font-style: italic; font-weight: 400; }
.staff-out-btn {
flex-shrink: 0;
font-family: 'IBM Plex Sans', sans-serif;
font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
padding: 2px 8px; border-radius: 3px;
border: 1px solid var(--bdr2);
background: transparent; color: var(--txm);
cursor: pointer;
transition: background .12s, color .12s, border-color .12s;
}
.staff-out-btn:hover:not(:disabled):not(.is-disabled) {
border-color: var(--out-bdr); color: var(--red); background: rgba(167,48,39,.06);
}
.staff-out-btn.is-out {
background: var(--green); color: #fff; border-color: var(--green);
}
.staff-out-btn.is-out:hover:not(:disabled) { opacity: .9; }
.staff-out-btn.is-disabled {
cursor: not-allowed; opacity: .5;
display: inline-block; padding: 2px 8px;
}
.staff-out-btn:disabled { opacity: .5; cursor: progress; }
/* ──────────────────────────────────────────────────────────────────────────
Assignments tab — split rows + run chips + actions
────────────────────────────────────────────────────────────────────────── */
/* Override the earlier .asg-row grid to fit Runs + Actions columns. */
.asg-row {
grid-template-columns: 110px 60px minmax(120px, 1fr) minmax(120px, 1fr) minmax(220px, 2fr) 160px;
align-items: center;
}
/* Split-group treatment: continuation rows fade the assignment number a bit
so the eye groups them, plus a left edge accent on every split row. */
.asg-row.in-split { background: rgba(184, 134, 11, .04); }
.asg-num-cell.is-split { border-left: 2px solid rgba(184,134,11,.45); padding-left: 10px; margin-left: -12px; }
.asg-num-cell.is-continuation { color: rgba(139,101,8,.5); font-weight: 600; }
/* Runs cell allows wrapping chips. */
.asg-runs-cell {
white-space: normal;
display: flex;
flex-wrap: wrap;
gap: 4px;
padding: 6px 0;
overflow: visible;
text-overflow: clip;
}
.asg-run-chip {
display: inline-flex; align-items: center;
font-family: 'IBM Plex Sans', sans-serif;
font-size: 11px; font-weight: 700;
padding: 2px 7px; border-radius: 3px;
white-space: nowrap;
cursor: default;
}
/* Actions cell — small buttons side-by-side. */
.asg-actions-cell {
display: flex; gap: 4px; flex-wrap: wrap;
overflow: visible; text-overflow: clip;
}
.asg-btn {
font-family: 'IBM Plex Sans', sans-serif;
font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
padding: 4px 10px; border-radius: 3px;
border: 1px solid var(--bdr2);
background: transparent; color: var(--txm);
cursor: pointer;
transition: background .12s, color .12s, border-color .12s;
}
.asg-btn:hover:not(:disabled) {
color: var(--blue); border-color: rgba(139,101,8,.4); background: rgba(139,101,8,.06);
}
.asg-btn:disabled { opacity: .5; cursor: progress; }
/* ──────────────────────────────────────────────────────────────────────────
Picker popover (lib/picker.js)
────────────────────────────────────────────────────────────────────────── */
.picker-overlay { position: fixed; inset: 0; z-index: 200; }
.picker-popover {
position: fixed; width: 280px;
background: var(--surf); border: 1px solid var(--bdr2); border-radius: 8px;
box-shadow: 0 8px 28px rgba(0,0,0,.14);
display: flex; flex-direction: column;
max-height: 360px; overflow: hidden;
}
.picker-header {
font-size: 11px; font-weight: 700; letter-spacing: .08em;
text-transform: uppercase; color: var(--txd);
padding: 10px 12px 6px;
}
.picker-search {
margin: 0 10px 6px; padding: 6px 10px;
border: 1px solid var(--bdr); border-radius: 4px;
font-family: inherit; font-size: 12px;
background: var(--surf2); color: var(--tx);
}
.picker-search:focus { outline: none; border-color: var(--blue); background: var(--surf); }
.picker-list { overflow-y: auto; flex: 1; padding: 0 4px 4px; }
.picker-item {
display: flex; align-items: center; gap: 8px;
padding: 6px 10px; border-radius: 4px; margin: 1px 0;
cursor: pointer; transition: background .1s;
}
.picker-item:hover { background: var(--surf2); }
.picker-item.is-highlight { background: rgba(139,101,8,.08); }
.picker-item.is-saving { opacity: .5; pointer-events: none; }
.picker-item-main { flex: 1; min-width: 0; }
.picker-item-label { font-size: 13px; color: var(--tx); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.picker-item-secondary { font-size: 10px; color: var(--txm); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.picker-item-tag {
font-family: 'IBM Plex Mono', monospace; font-size: 9px; font-weight: 700;
padding: 2px 5px; border-radius: 3px;
background: var(--surf2); color: var(--txm); flex-shrink: 0;
}
.picker-empty { padding: 16px; text-align: center; font-size: 11px; color: var(--txd); font-style: italic; }
.picker-actions {
display: flex; gap: 4px; padding: 6px 8px;
border-top: 1px solid var(--bdr);
}
.picker-action-btn {
flex: 1; padding: 6px 8px;
font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
border: 1px solid var(--bdr2); border-radius: 3px;
background: transparent; color: var(--txm); cursor: pointer;
}
.picker-action-btn:hover:not(:disabled) {
color: var(--blue); border-color: rgba(139,101,8,.4); background: rgba(139,101,8,.06);
}
.picker-action-btn:disabled { opacity: .5; cursor: progress; }
.inline-editor {
width: 100%;
padding: 2px 4px;
font-family: inherit; font-size: inherit; font-weight: inherit; color: var(--tx);
background: var(--surf2); border: 1px solid var(--blue); border-radius: 3px;
}
.inline-editor:focus { outline: none; box-shadow: 0 0 0 2px rgba(139,101,8,.2); }
/* ──────────────────────────────────────────────────────────────────────────
Click-to-edit affordances on Assignments tab
────────────────────────────────────────────────────────────────────────── */
.asg-cell.is-editable {
cursor: pointer;
border-radius: 3px;
transition: background .12s, box-shadow .12s;
}
.asg-cell.is-editable:hover {
background: rgba(139,101,8,.06);
box-shadow: inset 0 -1px 0 rgba(139,101,8,.4);
}
.asg-run-chip.is-editable { cursor: pointer; }
.asg-run-chip.is-editable:hover { box-shadow: 0 0 0 2px rgba(139,101,8,.4); }
.asg-delete-btn {
font-family: 'IBM Plex Sans', sans-serif;
font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
padding: 4px 10px; border-radius: 3px;
border: 1px solid var(--bdr2);
background: transparent; color: var(--txm); cursor: pointer;
}
.asg-delete-btn:hover:not(:disabled) {
color: var(--red); border-color: var(--out-bdr); background: rgba(167,48,39,.06);
}
.asg-delete-btn:disabled { opacity: .5; cursor: progress; }
/* ──────────────────────────────────────────────────────────────────────────
Coverage states on Manager card — green-bordered (fully covered),
yellow (partial), red (open). The yellow + red classes already exist
from the verbatim production CSS port; just override .cok to be a clean
green border on a normal background instead of a green fill.
────────────────────────────────────────────────────────────────────────── */
.dc.cok {
background: var(--surf);
border: 2px solid var(--cov-bdr);
}
/* Sidebar gap-tag click affordance */
.gsub.needed { cursor: pointer; transition: opacity .12s; }
.gsub.needed:hover { opacity: .75; }
/* ──────────────────────────────────────────────────────────────────────────
Assignments — refined click-to-edit affordance.
Replaces the earlier .asg-cell.is-editable rules with a span-scoped
hover indicator that hugs the text, plus a 5-column grid (Actions
column was removed).
────────────────────────────────────────────────────────────────────────── */
.asg-row {
grid-template-columns: 110px 60px minmax(120px, 1fr) minmax(120px, 1fr) minmax(220px, 2fr);
}
.cell-editable {
display: inline-block;
padding: 1px 5px;
border-radius: 3px;
cursor: pointer;
transition: background .12s;
max-width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
vertical-align: middle;
}
.cell-editable:hover { background: rgba(139,101,8,.10); }
/* Old cell-level affordance no longer applies; a no-op override keeps it
from leaking onto cells that still have the .is-editable class. */
.asg-cell.is-editable, .asg-cell.is-editable:hover { background: transparent; box-shadow: none; }
/* Inline Delete in the Runs cell when the row is empty. */
.asg-runs-cell .asg-empty { margin-right: 8px; }
.asg-runs-cell .asg-delete-btn { font-size: 10px; padding: 3px 8px; }
/* ──────────────────────────────────────────────────────────────────────────
Employees tab — temporary add-employee form
────────────────────────────────────────────────────────────────────────── */
.emp-wrap {
display: grid;
grid-template-columns: minmax(340px, 480px) 1fr;
gap: 28px;
padding: 24px;
max-width: 1200px;
margin: 0 auto;
}
@media (max-width: 900px) { .emp-wrap { grid-template-columns: 1fr; } }
.emp-h { font-size: 16px; font-weight: 700; margin: 0 0 6px; }
.emp-help { font-size: 12px; color: var(--txm); margin: 0 0 16px; line-height: 1.5; }
.emp-help code {
font-family: 'IBM Plex Mono', monospace; font-size: 11px;
background: var(--surf2); padding: 1px 5px; border-radius: 3px;
}
.emp-form { display: flex; flex-direction: column; gap: 12px; }
.emp-row { display: flex; flex-direction: column; gap: 4px; }
.emp-row label {
font-size: 10px; font-weight: 700; letter-spacing: .04em;
text-transform: uppercase; color: var(--txd);
}
.emp-row input, .emp-row select {
padding: 8px 10px;
border: 1px solid var(--bdr);
border-radius: 4px;
background: var(--surf);
font-family: inherit;
font-size: 13px;
color: var(--tx);
}
.emp-row input:focus, .emp-row select:focus {
outline: none;
border-color: var(--blue);
box-shadow: 0 0 0 2px rgba(139,101,8,.15);
}
.emp-required { color: var(--red); }
.emp-actions { margin-top: 8px; }
.emp-actions .btn-primary { padding: 10px 18px; }
.emp-msg {
padding: 8px 12px; border-radius: 4px; font-size: 12px; margin: 0;
}
.emp-msg.is-ok { background: rgba(45,95,63,.10); color: var(--green); border: 1px solid rgba(45,95,63,.25); }
.emp-msg.is-err { background: rgba(167,48,39,.10); color: var(--red); border: 1px solid rgba(167,48,39,.25); }
.emp-recent-empty {
padding: 18px; text-align: center;
color: var(--txd); font-size: 12px; font-style: italic;
}
.emp-recent-table {
width: 100%; border-collapse: collapse; font-size: 12px;
background: var(--surf); border: 1px solid var(--bdr); border-radius: 6px; overflow: hidden;
}
.emp-recent-table th, .emp-recent-table td {
padding: 7px 10px; text-align: left; border-bottom: 1px solid var(--bdr);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px;
}
.emp-recent-table th {
background: var(--surf2);
font-weight: 700; font-size: 9px; letter-spacing: .08em; text-transform: uppercase;
color: var(--txd);
}
.emp-recent-table tr:last-child td { border-bottom: none; }
.emp-recent-id {
font-family: 'IBM Plex Mono', monospace; font-weight: 700;
color: var(--blue); width: 1%;
}
/* Field-level helper text under an input (e.g., the ADP-number note). */
.emp-field-note {
margin: 4px 0 0;
font-size: 11px; color: var(--txm); font-style: italic;
}
/* ── Roster lists (Drivers / Monitors) + status toggle ─────────────── */
.emp-wrap2 {
display: flex; flex-direction: column;
gap: 28px;
padding: 24px;
max-width: 1200px;
margin: 0 auto;
}
.emp-rosters-section {
background: var(--surf);
border: 1px solid var(--bdr); border-radius: 8px;
padding: 16px 18px;
}
.emp-rosters-hd {
display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
margin-bottom: 12px;
}
.emp-rosters-grid {
display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}
@media (max-width: 760px) { .emp-rosters-grid { grid-template-columns: 1fr; } }
.emp-stat-toggle {
display: inline-flex; gap: 0;
background: var(--surf2);
border: 1px solid var(--bdr); border-radius: 999px;
padding: 2px;
margin-left: auto;
}
.emp-stat-btn {
padding: 4px 14px;
font-size: 11px; font-weight: 600;
background: transparent; border: none;
border-radius: 999px;
color: var(--txm);
cursor: pointer;
}
.emp-stat-btn:hover:not(.is-on) { color: var(--tx); }
.emp-stat-btn.is-on {
background: var(--green); color: white;
}
.emp-roster {
background: var(--surf2);
border: 1px solid var(--bdr); border-radius: 6px;
overflow: hidden;
}
.emp-roster-hd {
display: flex; align-items: baseline; gap: 8px;
padding: 10px 14px;
background: var(--surf);
border-bottom: 1px solid var(--bdr);
}
.emp-roster-hd .emp-h { margin: 0; font-size: 13px; }
.emp-roster-count {
font-size: 11px; font-weight: 700;
color: var(--txd);
margin-left: auto;
}
.emp-roster-empty {
padding: 18px; text-align: center;
color: var(--txd); font-size: 12px; font-style: italic;
}
.emp-roster-list {
list-style: none; margin: 0; padding: 0;
max-height: 420px; overflow-y: auto;
}
.emp-roster-item {
display: grid;
/* Reserve fixed widths for phone + button so the button never shifts
when phone is missing on some rows. */
grid-template-columns: minmax(0, 1fr) 130px 100px;
gap: 10px;
align-items: center;
padding: 7px 14px;
border-bottom: 1px solid var(--bdr);
font-size: 12px;
}
.emp-roster-item:last-child { border-bottom: none; }
.emp-roster-name { font-weight: 600; color: var(--tx); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.emp-roster-meta {
font-size: 11px; color: var(--txm);
text-align: right; white-space: nowrap;
}
.emp-flip-btn {
padding: 3px 10px;
font-size: 11px; font-weight: 600;
background: var(--surf);
border: 1px solid var(--bdr); border-radius: 4px;
color: var(--red);
cursor: pointer;
}
.emp-flip-btn:hover:not(:disabled) {
background: rgba(167,48,39,.08);
border-color: rgba(167,48,39,.4);
}
.emp-flip-btn.is-activate { color: var(--green); }
.emp-flip-btn.is-activate:hover:not(:disabled) {
background: rgba(45,95,63,.08);
border-color: rgba(45,95,63,.4);
}
.emp-flip-btn:disabled { opacity: .5; cursor: not-allowed; }
.emp-form-section {
max-width: 480px;
background: var(--surf);
border: 1px solid var(--bdr); border-radius: 8px;
padding: 18px;
}
/* ──────────────────────────────────────────────────────────────────────────
Assignments tab — timeline view + unassigned panel
────────────────────────────────────────────────────────────────────────── */
.asg-page {
padding: 18px 24px;
max-width: 1500px;
margin: 0 auto;
font-size: 13px;
}
.asg-page-header { margin-bottom: 14px; }
.asg-page-header .asg-title { font-size: 18px; font-weight: 700; margin-bottom: 4px; }
.asg-page-header .asg-sub { font-size: 12px; color: var(--txm); line-height: 1.5; }
.asg-title-row {
display: flex; align-items: center; gap: 12px; margin-bottom: 4px;
}
.asg-new-btn {
margin-left: auto;
padding: 6px 14px;
font-size: 12px; font-weight: 700;
background: var(--green); color: white;
border: 1px solid var(--green); border-radius: 4px;
cursor: pointer;
}
.asg-new-btn:hover { filter: brightness(1.08); }
.asg-note-amber {
background: rgba(184,134,11,.08);
border: 1px solid rgba(184,134,11,.28);
color: var(--amber);
}
.asg-grid { display: flex; flex-direction: column; }
/* Each timeline row uses the SAME grid template as the axis row so columns
line up. The right-hand cell holds the bars (positioned absolutely). */
.asg-tl-row {
display: grid;
grid-template-columns: 100px 60px minmax(140px, 1fr) minmax(140px, 1fr) minmax(420px, 3fr);
align-items: center;
gap: 10px;
padding: 6px 14px;
border-bottom: 1px solid var(--bdr);
min-height: 40px;
}
.asg-tl-axis-row {
background: var(--surf2);
position: sticky; top: 0; z-index: 5;
font-size: 10px; font-weight: 700;
letter-spacing: .04em; text-transform: uppercase;
color: var(--txd);
min-height: 30px;
}
.asg-tl-row.in-split { background: rgba(184,134,11,.04); }
/* Time axis: hour ticks positioned absolutely along the lane. */
.asg-tl-axis {
position: relative;
height: 18px;
}
.asg-tick {
position: absolute; top: 0;
font-family: 'IBM Plex Mono', monospace;
font-size: 9px; font-weight: 600;
color: var(--txd);
transform: translateX(-50%);
white-space: nowrap;
}
/* Bar lane: relative-positioned container; bars positioned absolutely. */
.asg-tl-bars {
position: relative;
height: 30px;
}
.asg-tl-grid {
position: absolute; inset: 0; pointer-events: none;
}
.asg-grid-line {
position: absolute; top: 0; bottom: 0; width: 1px;
background: rgba(0,0,0,.05);
}
.asg-bar {
position: absolute;
top: 4px; height: 22px;
border-radius: 4px;
border: 1px solid rgba(0,0,0,.10);
display: flex; align-items: center; justify-content: center;
padding: 0 6px;
font-size: 10px; font-weight: 700;
color: var(--tx);
cursor: pointer;
overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
transition: transform .12s, box-shadow .12s;
box-sizing: border-box;
min-width: 18px;
}
.asg-bar:hover {
transform: translateY(-1px);
box-shadow: 0 2px 6px rgba(0,0,0,.18);
z-index: 2;
}
.asg-bar-code {
display: inline-block;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
max-width: 100%;
}
.asg-bar-combo { border-style: dashed; border-color: rgba(184,134,11,.6); }
.asg-undated-note {
position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
font-size: 9px; font-style: italic; color: var(--amber);
background: rgba(184,134,11,.08);
padding: 2px 6px; border-radius: 3px;
pointer-events: none;
}
.asg-empty-row-actions {
position: absolute; left: 0; top: 0; bottom: 0;
display: flex; align-items: center; gap: 12px;
padding: 0 6px;
}
/* Open driver/monitor — red italic, hints "Needs Coverage" downstream */
.asg-open { color: var(--red); font-style: italic; font-weight: 600; }
/* ── Unassigned panel ───────────────────────────────────────────────────── */
.asg-unassigned {
margin-top: 28px;
padding: 14px 18px;
background: var(--surf);
border: 1px solid var(--bdr);
border-radius: 6px;
}
.asg-unassigned-title {
font-size: 14px; font-weight: 700; margin: 0 0 10px;
color: var(--tx);
}
.asg-unassigned-cols {
display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
}
@media (max-width: 900px) {
.asg-unassigned-cols { grid-template-columns: 1fr; }
}
.asg-unassigned-h {
font-size: 10px; font-weight: 700; letter-spacing: .06em;
text-transform: uppercase; color: var(--txd);
margin-bottom: 8px;
}
.asg-unassigned ul {
list-style: none; padding: 0; margin: 0;
display: flex; flex-wrap: wrap; gap: 5px;
}
.asg-unassigned li {
padding: 4px 10px;
border: 1px solid var(--bdr);
border-radius: 12px;
background: var(--surf2);
font-size: 12px; color: var(--tx);
}
.asg-unassigned li.asg-unassigned-empty {
border: none; background: none;
font-style: italic; color: var(--txd);
padding-left: 0;
}
/* ──────────────────────────────────────────────────────────────────────────
Assignments tab — Hours column override (6-col grid)
────────────────────────────────────────────────────────────────────────── */
.asg-tl-row {
grid-template-columns: 100px 60px minmax(140px, 1fr) minmax(140px, 1fr) 70px minmax(360px, 3fr);
}
/* Hours cell: data rows inherit body font (matches Bus/Driver/Monitor),
axis-row inherits the heading font from .asg-tl-axis-row.
Left-aligned so the value/heading sit on the FAR side of the column from
the timeline, giving the leftmost tick clean breathing room. */
.asg-hours-cell {
text-align: left;
white-space: nowrap;
color: var(--txm);
}
/* Inset the timeline lane and axis so the leftmost bar / leftmost tick
doesn't visually overlap the Hours column. */
.asg-tl-axis,
.asg-tl-bars {
margin-left: 18px;
margin-right: 18px;
}
/* Anchor the leftmost / rightmost ticks to their cell edges instead of
centering. This keeps "6 AM" fully inside the timeline cell instead of
half-bleeding into the Hours column on the left. */
.asg-tick.is-first { transform: translateX(0); }
.asg-tick.is-last { transform: translateX(-100%); }
/* ──────────────────────────────────────────────────────────────────────────
Manager board — daily_run_log affordances.
* Bus number on a card is now click-to-edit (daily override).
* Runs flagged combined=true today render a COMBINED tag and dim out
instead of appearing as Needs Coverage.
────────────────────────────────────────────────────────────────────────── */
/* Bus number — clickable, with a today-only override badge. */
.dc-id .bus-num[data-action="edit-bus"] {
cursor: pointer;
border-radius: 3px;
padding: 1px 4px;
margin: 0 -4px;
transition: background .12s;
}
.dc-id .bus-num[data-action="edit-bus"]:hover {
background: rgba(45,95,63,.10);
}
.bus-num.is-override {
color: var(--amber);
font-weight: 700;
}
.bus-override-tag {
display: inline-block;
margin-left: 4px;
padding: 0 4px;
font-size: 8px;
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
background: rgba(184,134,11,.18);
color: var(--amber);
border-radius: 2px;
vertical-align: 1px;
}
/* Combined run row — dimmed; tag is clickable to undo. */
.rr.rcombined {
opacity: .55;
background: rgba(0,0,0,.02);
}
.rr.rcombined .rc { text-decoration: line-through; }
.run-combined-tag {
margin-left: auto;
padding: 1px 5px;
font-size: 8px;
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
background: rgba(45,95,63,.14);
color: var(--green);
border-radius: 2px;
cursor: pointer;
user-select: none;
}
.run-combined-tag:hover {
background: rgba(45,95,63,.22);
}
/* Closed-school run row + tag. Same dim treatment as combined; tag carries
the school-closure semantics so dispatchers know not to cover this run. */
.rr.rclosed {
opacity: .5;
background: rgba(0,0,0,.02);
}
.rr.rclosed .rs, .rr.rclosed .ri, .rr.rclosed .rlv { color: var(--txd); }
.rr.rclosed .rc { text-decoration: line-through; }
.run-closed-tag {
margin-left: auto;
padding: 1px 5px;
font-size: 8px;
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
background: rgba(100,116,139,.18);
color: #94a3b8;
border-radius: 2px;
}
/* Whole-card closed treatment: every run on the card is for a closed school.
The card gets a slate-grey tint, sub-pickers / Out toggles are pointer-
disabled, and the banner across the top signals NO COVERAGE NEEDED. */
.dc.dc-closed {
background: rgba(100,116,139,.06);
border-color: rgba(100,116,139,.35);
opacity: .85;
}
.dc.dc-closed .dc-staff,
.dc.dc-closed .dc-runs { opacity: .65; }
.dc.dc-closed [data-action="cover-driver"],
.dc.dc-closed [data-action="cover-monitor"],
.dc.dc-closed .card-reset-btn { pointer-events: none; opacity: .4; }
.dc-closed-banner {
background: #64748b; color: #fff;
font-family: 'IBM Plex Sans', sans-serif;
font-size: 10px; font-weight: 800; letter-spacing: .12em;
padding: 4px 11px;
text-align: center;
}
/* Card has at least one closed run but not all — subtle slate border tint. */
.dc.dc-closed-some { border-color: rgba(100,116,139,.45); }
/* Sub row — appears under a run when a daily_assignments coverage row
exists, naming who's filling in for the day. */
.rr-sub {
display: flex;
align-items: center;
gap: 6px;
padding: 1px 24px 2px;
font-size: 10px;
line-height: 1.3;
color: var(--green);
background: rgba(45,95,63,.05);
}
.rr-sub-lbl {
font-family: 'IBM Plex Mono', monospace;
font-size: 8px;
font-weight: 700;
letter-spacing: .04em;
color: var(--green);
background: rgba(45,95,63,.14);
padding: 0 4px;
border-radius: 2px;
}
.rr-sub-name {
font-weight: 600;
}
/* Stack the status label and reset button vertically inside dc-status so a
long status ("NEEDS COVERAGE") plus the reset button can't push dc-id
(assignment / bus) out of the card head. */
.dc-status {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 3px;
}
/* Card reset button — small pill under the status label. */
.card-reset-btn {
padding: 1px 6px;
font-size: 9px;
font-weight: 600;
letter-spacing: .04em;
text-transform: uppercase;
color: var(--txm);
background: transparent;
border: 1px solid var(--bdr);
border-radius: 3px;
cursor: pointer;
transition: background .12s, color .12s, border-color .12s;
white-space: nowrap;
}
.card-reset-btn:hover {
background: rgba(220,38,38,.08);
color: var(--red);
border-color: rgba(220,38,38,.4);
}
.card-reset-btn:disabled {
opacity: .5;
cursor: wait;
}
/* Per-card print button. Lives next to the asg-num. */
.card-print-btn {
display: inline-block;
vertical-align: middle;
margin-left: 6px;
padding: 0 5px;
font-size: 12px;
line-height: 1.4;
background: transparent;
border: 1px solid var(--bdr);
border-radius: 3px;
cursor: pointer;
color: var(--txm);
transition: background .12s, color .12s, border-color .12s;
}
.card-print-btn:hover {
background: rgba(45,95,63,.10);
color: var(--green);
border-color: rgba(45,95,63,.4);
}
.card-print-btn:disabled { opacity: .5; cursor: wait; }
/* ──────────────────────────────────────────────────────────────────────────
Reports tab — on-screen layout. Headsheet styling is shared between the
on-screen preview and the printed page; the @media print block at the
bottom hides chrome and forces page breaks.
────────────────────────────────────────────────────────────────────────── */
/* Reports tab — sidebar layout. */
.rep-shell {
display: grid;
grid-template-columns: 220px 1fr;
min-height: calc(100vh - 120px);
background: var(--surf2);
}
.rep-sidebar {
background: var(--surf);
border-right: 1px solid var(--bdr);
padding: 14px 0;
overflow-y: auto;
}
.rep-side-section { padding: 0 8px 16px; }
.rep-side-h {
padding: 4px 12px 6px;
font-size: 9px; font-weight: 700;
letter-spacing: .08em; text-transform: uppercase;
color: var(--txd);
}
.rep-side-item {
display: block; width: 100%;
padding: 6px 12px;
text-align: left;
font-size: 12px; font-weight: 500;
background: transparent;
border: none; border-radius: 4px;
color: var(--tx);
cursor: pointer;
}
.rep-side-item:hover { background: rgba(0,0,0,.04); }
.rep-side-item.is-active {
background: var(--green); color: white; font-weight: 600;
}
.rep-main { padding: 0; overflow-x: hidden; }
.rep-topline {
padding: 10px 18px;
background: var(--surf);
border-bottom: 1px solid var(--bdr);
font-size: 11px; color: var(--txm);
}
.bff-load-err {
margin: 10px 22px 0;
padding: 12px 16px;
background: rgba(167, 48, 39, 0.06);
border: 1px solid rgba(167, 48, 39, 0.30);
border-radius: 4px;
font-size: 12px;
color: #A73027;
}
.bff-load-err b { display: block; margin-bottom: 6px; color: #7A1F19; }
.bff-load-err ul { margin: 4px 0 8px 0; padding-left: 18px; font-family: var(--ff-mono, monospace); }
.bff-load-err li { font-size: 11px; line-height: 1.45; }
.bff-load-err-hint { color: var(--txm); font-size: 11px; font-style: italic; }
.rep-content { padding: 20px 22px; }
.rep-content-hd { margin-bottom: 16px; }
.rep-h2 { margin: 0; font-size: 18px; font-weight: 700; color: var(--tx); }
.rep-sub { margin: 4px 0 0; font-size: 11px; color: var(--txm); }
.rep-content-toolbar {
display: flex; align-items: center; gap: 14px;
padding: 10px 0 16px;
}
.rep-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.rep-chips-schools { padding: 0 0 6px; }
.rep-filter-stack { display: flex; flex-direction: column; gap: 6px; padding: 0 0 10px; }
.rep-chip {
padding: 4px 12px;
font-size: 11px; font-weight: 600;
background: var(--surf);
border: 1px solid var(--bdr); border-radius: 16px;
color: var(--tx);
cursor: pointer;
}
.rep-chip:hover { background: rgba(0,0,0,.04); }
.rep-chip.is-active {
background: var(--green); color: white; border-color: var(--green);
}
/* DOB report */
.dob-list { display: flex; flex-direction: column; gap: 18px; }
.dob-block { background: var(--surf); border: 1px solid var(--bdr); border-radius: 6px; overflow: hidden; }
.dob-school {
display: flex; align-items: center; gap: 10px;
padding: 10px 14px; margin: 0;
background: var(--surf2);
border-bottom: 1px solid var(--bdr);
font-size: 13px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--tx);
}
.dob-school-ct { margin-left: auto; font-size: 11px; font-weight: 600; color: var(--txm); letter-spacing: 0; text-transform: none; }
.dob-table {
width: 100%; border-collapse: collapse; font-size: 13px;
/* Fixed layout so the column widths below are honored regardless of
cell content — keeps Student / School / DOB aligned in every row. */
table-layout: fixed;
}
.dob-table col.dob-c-name { width: 45%; }
.dob-table col.dob-c-school { width: 40%; }
.dob-table col.dob-c-dob { width: 15%; }
.dob-table th, .dob-table td {
padding: 6px 14px; text-align: left; vertical-align: middle;
border-bottom: 1px solid var(--bdr);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dob-table th {
font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
color: var(--txd); background: var(--surf2);
}
.dob-table td:last-child,
.dob-table th:last-child { font-family: 'IBM Plex Mono', monospace; font-size: 12px; }
@media print {
body * { visibility: hidden; }
.rep-content-dob, .rep-content-dob * { visibility: visible; }
.rep-content-dob {
position: absolute; top: 0; left: 0; right: 0;
padding: 12px 18px;
}
.rep-content-dob .rep-content-toolbar,
.rep-content-dob .rep-filter-stack { display: none; }
.dob-block { page-break-before: always; break-before: page; border: none; }
.dob-block:first-child { page-break-before: auto; break-before: auto; }
.dob-school { background: transparent; border-bottom: 2px solid #000; color: #000; }
.dob-table th { background: transparent; color: #000; border-bottom: 1px solid #000; }
.dob-table td { border-bottom: 1px solid #ccc; color: #000; }
}
.rep-pdf-btn {
margin-left: auto;
padding: 7px 16px;
font-size: 12px; font-weight: 600;
background: var(--green); color: white;
border: 1px solid var(--green); border-radius: 4px;
cursor: pointer;
}
.rep-pdf-btn:hover:not(:disabled) { filter: brightness(1.1); }
.rep-pdf-btn:disabled { opacity: .5; cursor: not-allowed; }
.rep-session-picker {
display: inline-flex; align-items: center; gap: 6px;
font-size: 11px; color: var(--txm);
}
.rep-session-picker > span { font-weight: 600; }
.rep-session-picker select {
padding: 4px 8px; font-size: 12px; font-weight: 600;
background: var(--surf); color: var(--txp);
border: 1px solid var(--bdr); border-radius: 4px; cursor: pointer;
}
.rep-session-picker select:hover { border-color: var(--green); }
.rep-empty {
padding: 30px; text-align: center;
color: var(--txm); font-style: italic;
background: var(--surf); border: 1px dashed var(--bdr); border-radius: 6px;
}
.rep-empty-card {
padding: 30px;
background: var(--surf); border: 1px solid var(--bdr); border-radius: 6px;
max-width: 640px;
}
.rep-empty-card p { margin: 0 0 14px; color: var(--txm); font-size: 12px; }
.rep-roster-list { display: flex; flex-direction: column; gap: 10px; }
/* Pushes the PDF button to the right when the toolbar has no chips on
the left (used by the Headsheets view). */
.rep-toolbar-spacer { flex: 1; }
/* PDF generation progress bar — appears below the toolbar while a PDF
is rendering. Removed when generation completes (success or failure). */
.rep-pdf-progress {
margin: 0 0 16px;
padding: 10px 14px;
background: var(--surf);
border: 1px solid var(--bdr);
border-radius: 4px;
}
.rep-pdf-progress-bar {
height: 5px;
background: rgba(0,0,0,.08);
border-radius: 3px;
overflow: hidden;
margin-bottom: 6px;
}
.rep-pdf-progress-fill {
height: 100%;
background: var(--green);
width: 0;
transition: width .15s ease-out;
}
.rep-pdf-progress-text {
font-size: 11px;
color: var(--txm);
font-variant-numeric: tabular-nums;
}
/* Headsheets continuous-scroll list — each headsheet flows below the
previous, separated by a thin horizontal divider, matching the roster's
continuous look. */
.hs-list .headsheet + .headsheet {
border-top: 1px solid var(--bdr);
margin-top: 28px;
padding-top: 24px;
}
/* Headsheet card — same look on screen and print. */
.headsheet {
background: white;
border: 1px solid var(--bdr);
border-radius: 4px;
padding: 22px 28px;
margin: 0 auto 18px;
max-width: 8.0in;
font-family: 'IBM Plex Sans', sans-serif;
font-size: 11px;
color: #111;
}
/* Header — Assignment is the headline; driver / monitor / bus stack underneath. */
.hs-hd {
display: flex; align-items: stretch; gap: 18px;
border-bottom: 2px solid #111;
padding-bottom: 8px; margin-bottom: 14px;
}
.hs-hd-asg {
font-size: 36px; font-weight: 700; line-height: 1;
letter-spacing: .02em;
min-width: 110px;
display: flex; align-items: center;
}
.hs-hd-rows { display: flex; flex-direction: column; justify-content: center; gap: 2px; flex: 1; }
.hs-hd-row { display: flex; gap: 10px; align-items: baseline; font-size: 12px; }
.hs-hd-lbl {
font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
color: #888; min-width: 60px;
}
.hs-hd-val { font-weight: 600; color: #111; }
/* Run row — left meta column + stop table on the right (matches the
school roster's layout). The .hs-run.is-combo variant adds an amber
COMBO badge to the meta column. */
.hs-run {
display: flex;
align-items: flex-start;
gap: 16px;
margin: 0 0 14px;
page-break-inside: avoid;
}
.hs-run + .hs-run {
border-top: 1px solid var(--bdr);
padding-top: 14px;
}
.hs-run-meta {
flex-shrink: 0;
width: 150px;
padding-top: 18px; /* aligns first meta line with the first stop row, past the table header */
display: flex;
flex-direction: column;
gap: 1px;
font-size: 11px;
line-height: 1.3;
}
.hs-run-meta .meta-run { font-weight: 700; font-size: 14px; color: #111; }
.hs-run-meta .meta-school { color: #444; font-weight: 600; }
.hs-run-meta .meta-time {
color: var(--txm); font-size: 10px;
letter-spacing: .04em; text-transform: uppercase;
margin-top: 2px;
}
.hs-run-meta .meta-combo-tag {
align-self: flex-start;
font-size: 8px; font-weight: 700; letter-spacing: .08em;
text-transform: uppercase;
background: var(--amber); color: #111;
padding: 1px 6px; border-radius: 2px;
margin-bottom: 4px;
}
/* Chained-run rendering. The strong .hs-run + .hs-run border-top
indicates "different headsheet section"; chained runs render as
ONE section with internal "…" continuation rows that show the
driver stays out — no depot bookend between them. Each segment
keeps its OWN left meta column (school + run code + bell) so the
chain reads like a stack of single runs with a continues marker
between them. */
.hs-run.is-chain {
flex-direction: column;
gap: 6px;
}
.hs-run.is-chain .hs-chain-row {
display: flex;
align-items: flex-start;
gap: 16px;
}
.hs-run.is-chain .hs-chain-link {
display: flex; justify-content: center; align-items: center;
font-size: 22px; font-weight: 700;
color: #C68A00; letter-spacing: 6px;
padding: 4px 0 8px;
line-height: 1;
/* Align with the stops column so it visually bridges the two tables
instead of the meta column. The 150px + 16px gap matches the
.hs-run-meta width + .hs-run gap. */
margin-left: 166px;
}
.hs-run.is-chain .hs-chain-link::before {
content: 'continues — no depot return';
font-size: 9px; font-weight: 700; letter-spacing: .12em;
text-transform: uppercase; color: var(--txm);
margin-right: 10px; line-height: 1;
}
.hs-run.is-chain .meta-combo-tag {
background: #DCE7DE; color: #2D5F3F;
}
.hs-run-stops { flex: 1; min-width: 0; }
.hs-run-stops .hs-stops { width: 100%; }
.hs-run-stops .hs-col-time { width: 12%; }
.hs-run-stops .hs-col-name { width: 28%; }
.hs-run-stops .hs-col-addr { width: 40%; }
.hs-run-stops .hs-col-city { width: 20%; }
/* Per-stop run tag — shown on combo runs so each merged stop is clearly
attributed to its run/school. */
.hs-runtag {
background: rgba(255,255,255,.0);
border: 1px solid #555;
color: #111;
font-weight: 700;
}
/* Stop table — ABSOLUTE pixel widths so columns line up across every
section / every group, regardless of parent container width. The total
adds up to 720px, fits comfortably within an 8.0in printed page after
margins. */
.hs-stops {
width: 720px;
max-width: 100%;
border-collapse: collapse;
font-size: 11px;
table-layout: fixed;
}
.hs-col-time { width: 75px; }
.hs-col-name { width: 220px; }
.hs-col-addr { width: 280px; }
.hs-col-city { width: 145px; }
.hs-stops thead th {
text-align: left; font-size: 9px; font-weight: 700;
letter-spacing: .04em; text-transform: uppercase;
color: #888; padding: 4px 6px;
border-bottom: 1px solid #ccc;
}
.hs-stops td {
padding: 4px 6px;
border-bottom: 1px dotted #eee;
vertical-align: top;
}
.hs-stops tr:last-child td { border-bottom: none; }
.hs-time { font-weight: 600; white-space: nowrap; }
.hs-name { font-weight: 600; word-break: break-word; }
.hs-name-line { line-height: 1.25; }
.hs-tags {
margin-top: 1px;
display: flex; flex-wrap: wrap; gap: 4px;
}
.hs-addr { color: #333; word-break: break-word; }
.hs-city { color: #666; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hs-tag {
display: inline-block;
padding: 0 5px;
font-size: 8px; font-weight: 700; letter-spacing: .04em;
text-transform: uppercase; border-radius: 2px;
vertical-align: 1px;
}
.hs-wc { background: rgba(45, 95, 63, .15); color: var(--green); }
.hs-req { background: rgba(184,134,11, .15); color: var(--amber); }
/* Bookend rows (depot / school) — emphasized so they read as bracketing. */
.hs-bookend td { background: #f7f3ea; font-weight: 600; }
.hs-bookend .hs-name-line { letter-spacing: .04em; text-transform: uppercase; font-size: 10.5px; }
/* Absent student — strike-through. Only set when absentIds passed
(manager-board view); the Reports tab never strikes. */
.hs-absent .hs-name-line,
.hs-absent .hs-time,
.hs-absent .hs-addr,
.hs-absent .hs-city { text-decoration: line-through; color: #999; }
.hs-absent .hs-tag { opacity: .5; }
.hs-no-stops { font-style: italic; color: #888; padding: 8px 6px; font-size: 10px; }
/* ──────────────────────────────────────────────────────────────────────────
Headsheet view modal — manager-board entry point. Read-only preview with
a Print button.
────────────────────────────────────────────────────────────────────────── */
.hs-modal-overlay {
position: fixed; inset: 0;
background: rgba(0,0,0,.45);
z-index: 100;
display: flex; align-items: flex-start; justify-content: center;
overflow-y: auto;
padding: 24px 16px;
}
.hs-modal {
background: white;
border-radius: 6px;
max-width: 8.4in;
width: 100%;
box-shadow: 0 12px 36px rgba(0,0,0,.3);
display: flex; flex-direction: column;
max-height: calc(100vh - 48px);
}
.hs-modal-toolbar {
display: flex; align-items: center; gap: 8px;
padding: 10px 14px;
border-bottom: 1px solid var(--bdr);
background: var(--surf);
}
.hs-modal-title { font-size: 13px; font-weight: 600; color: var(--tx); }
.hs-modal-spacer { flex: 1; }
.hs-modal-print {
padding: 5px 12px;
font-size: 12px; font-weight: 600;
background: var(--green); color: white;
border: 1px solid var(--green); border-radius: 4px;
cursor: pointer;
}
.hs-modal-print:hover { filter: brightness(1.1); }
.hs-modal-close {
width: 28px; height: 28px; padding: 0;
font-size: 18px; line-height: 1;
background: transparent;
border: 1px solid var(--bdr); border-radius: 4px;
cursor: pointer;
color: var(--txm);
}
.hs-modal-close:hover { background: rgba(0,0,0,.05); color: var(--tx); }
.hs-modal-body {
padding: 16px;
overflow-y: auto;
background: var(--surf2);
}
.hs-modal-body .headsheet { max-width: none; margin: 0; }
/* School roster — continuous-scroll layout (no card styling per group).
Each run uses a left meta column (Assignment/Bus/Run/Driver) next to its
stop table, so the data sits side-by-side like the legacy printed roster. */
.rstr-group {
background: transparent;
border: none;
border-radius: 0;
padding: 0;
margin: 0 0 28px;
max-width: none;
}
.rstr-group + .rstr-group {
border-top: 1px solid var(--bdr);
padding-top: 18px;
}
.rstr-group-hd {
font-size: 14px; font-weight: 700;
letter-spacing: .02em;
color: #111;
border-bottom: 2px solid #111;
padding-bottom: 4px; margin-bottom: 12px;
}
.rstr-run {
display: flex;
align-items: flex-start;
gap: 16px;
margin: 0 0 14px;
page-break-inside: avoid;
}
.rstr-run-meta {
flex-shrink: 0;
width: 150px;
display: flex; flex-direction: column; gap: 1px;
font-size: 11px; line-height: 1.3;
padding-top: 18px; /* aligns first meta line with first stop row, past the table header */
}
.meta-asg { font-weight: 700; font-size: 14px; color: #111; }
.meta-bus { color: var(--txm); font-weight: 600; }
.meta-run { font-weight: 700; color: #111; }
.meta-drv { color: #444; font-style: italic; margin-top: 2px; }
.rstr-run-stops { flex: 1; min-width: 0; }
/* Override the headsheet's fixed-pixel table widths — roster lives in a
flex slot whose width depends on container, so use percentages for
consistent alignment across every run on the page. */
.rstr-run-stops .hs-stops { width: 100%; }
.rstr-run-stops .hs-col-time { width: 12%; }
.rstr-run-stops .hs-col-name { width: 28%; }
.rstr-run-stops .hs-col-addr { width: 40%; }
.rstr-run-stops .hs-col-city { width: 20%; }
/* Full-page divider used in the school-roster PDF — appears as the first
page (ARRIVALS) and again before the departure groups (DEPARTURES). */
.rstr-divider {
display: flex;
align-items: center;
justify-content: center;
min-height: 6.5in; /* nearly fills landscape letter content area */
font-size: 80px;
font-weight: 700;
letter-spacing: .18em;
color: #111;
text-transform: uppercase;
border-top: 6px solid #111;
border-bottom: 6px solid #111;
margin: 0;
background: white;
}
/* Print target — used for single-headsheet print. Hidden during normal use;
shown (and others hidden) when body has .printing-single. */
#print-target { display: none; }
/* Off-screen render container used by manual jsPDF + html2canvas. We use
`position: absolute` with negative left so the container has real
dimensions for layout (html2canvas captures the element's bounding box
regardless of its on-page coordinates). Avoid `position: fixed` and
`z-index: -1` — both have produced empty canvases in past testing.
Letter page content area = 8.5in − 0.8in margins = 7.7in; landscape
page content area = 11in − 0.8in = 10.2in. */
.pdf-render-container {
position: absolute;
left: -10000px;
top: 0;
width: 7.7in;
background: white;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
color-adjust: exact;
}
.pdf-render-container.is-landscape { width: 10.2in; }
.pdf-render-container .headsheet,
.pdf-render-container .rstr-group {
border: none;
box-shadow: none;
margin: 0;
padding: 0.2in 0.3in;
}
.pdf-render-container .rstr-group + .rstr-group,
.pdf-render-container .hs-list .headsheet + .headsheet {
border-top: none;
padding-top: 0.2in;
margin-top: 0;
}
/* ──────────────────────────────────────────────────────────────────────────
PRINT MEDIA — one headsheet per page; hide app chrome.
────────────────────────────────────────────────────────────────────────── */
@media print {
@page { size: letter; margin: 0.4in; }
/* CRITICAL: force the browser to print background colors so the on-screen
look (black run bars, cream depot rows, amber tags) actually lands on
paper. Without this, browsers strip backgrounds by default and the
output looks like plain text. */
body, .headsheet, .headsheet *,
.rstr-group, .rstr-group *,
#print-target, #print-target * {
-webkit-print-color-adjust: exact !important;
print-color-adjust: exact !important;
color-adjust: exact !important;
}
/* Hide the app shell when printing. */
#header,
#app-tabs,
#module-tabs,
.rep-sidebar,
.rep-topline,
.rep-content-toolbar,
.rep-content-hd,
.hs-modal-toolbar {
display: none !important;
}
.rep-shell { grid-template-columns: 1fr; }
.rep-main { padding: 0; }
.rep-content { padding: 0; }
/* Stiffen row dividers — #eee is so faint it disappears on paper. */
.hs-stops td { border-bottom: 1px dotted #aaa !important; }
/* Each headsheet starts on its own page. */
.headsheet { page-break-after: always; border: none; padding: 0.2in 0.3in; box-shadow: none; }
.headsheet:last-child { page-break-after: auto; }
/* Each roster group starts on its own page. */
.rstr-group { page-break-after: always; border: none; padding: 0.2in 0.3in; }
.rstr-group:last-child { page-break-after: auto; }
/* When printing via #print-target (any "Generate PDF" / "Print" button),
hide everything else and show only the rendered target. The 'single-item'
variant additionally collapses page-break-after so a single-headsheet
print doesn't produce a trailing blank page. */
body.printing-pdf > * { display: none !important; }
body.printing-pdf #print-target { display: block !important; }
body.printing-single-item #print-target .headsheet,
body.printing-single-item #print-target .rstr-group {
page-break-after: auto;
}
}
/* ─── BusBFF — Yellows view ───────────────────────────────────────────── */
.yel-shell { padding: 14px 16px; }
.yel-mode-row {
display: flex; align-items: center; gap: 14px;
padding-bottom: 10px; margin-bottom: 10px;
}
.yel-mode-toggle {
display: inline-flex; border: 1px solid var(--bdr); border-radius: 6px;
overflow: hidden;
}
.yel-mode {
padding: 8px 18px; font-size: 12px; font-weight: 700;
background: var(--surf); color: var(--txm); border: 0; cursor: pointer;
letter-spacing: .04em; text-transform: uppercase;
}
.yel-mode + .yel-mode { border-left: 1px solid var(--bdr); }
.yel-mode.is-on { background: var(--green); color: white; }
.yel-mode-hint { font-size: 12px; color: var(--txd); font-style: italic; }
.yel-actions {
display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
padding: 10px 0;
border-bottom: 1px solid var(--bdr);
margin-bottom: 12px;
}
.yel-action-group {
display: flex; align-items: center; gap: 6px;
padding: 4px 10px 4px 0;
}
.yel-action-group + .yel-action-group {
border-left: 1px solid var(--bdr); padding-left: 14px;
}
.yel-action-label {
font-size: 9px; font-weight: 700; letter-spacing: .06em;
text-transform: uppercase; color: var(--txd);
margin-right: 4px;
}
.yel-gen-spinner {
font-size: 12px; color: var(--txd); font-style: italic;
align-self: center;
}
.yel-controls {
display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap;
padding-bottom: 10px;
border-bottom: 1px solid var(--bdr);
margin-bottom: 12px;
}
.yel-control {
display: flex; flex-direction: column; gap: 3px;
}
.yel-control span {
font-size: 9px; font-weight: 700; letter-spacing: .06em;
text-transform: uppercase; color: var(--txd);
}
.yel-control select, .yel-control input {
padding: 6px 10px;
border: 1px solid var(--bdr); border-radius: 4px;
font-size: 12px;
background: var(--surf);
}
.yel-control-search { flex: 1; min-width: 200px; }
.yel-control-search input { width: 100%; }
.yel-btn {
padding: 7px 14px;
font-size: 12px; font-weight: 700;
background: var(--green); color: white;
border: 1px solid var(--green); border-radius: 4px;
cursor: pointer;
}
.yel-btn:disabled { opacity: .5; cursor: not-allowed; }
.yel-btn-secondary {
background: transparent; color: var(--green);
}
.yel-status { padding: 18px; color: var(--txm); font-style: italic; }
.yel-status-err { color: var(--red); font-weight: 600; font-style: normal; }
.yel-empty {
padding: 30px; text-align: center;
color: var(--txm); font-style: italic;
background: var(--surf); border: 1px dashed var(--bdr); border-radius: 6px;
}
.yel-empty code {
font-family: 'IBM Plex Mono', monospace;
background: var(--surf2); padding: 1px 5px; border-radius: 3px;
}
.yel-results {
display: flex; flex-direction: column;
background: var(--surf);
border: 1px solid var(--bdr); border-radius: 6px;
overflow: hidden;
}
.yel-result {
display: flex; align-items: center; gap: 12px;
padding: 8px 14px;
text-align: left;
background: transparent;
border: none; border-bottom: 1px solid var(--bdr);
cursor: pointer;
}
.yel-result:last-child { border-bottom: none; }
.yel-result:hover { background: var(--surf2); }
.yel-result-num { font-family: 'IBM Plex Mono', monospace; font-weight: 800; color: var(--tx); min-width: 70px; }
.yel-result-meta { font-size: 11px; color: var(--txm); }
/* Caveat / Dancing Script for handwritten marks + signature stamp.
Loaded via in index.html for reliability (CSS @import in the
middle of a stylesheet is sometimes ignored). */
/* The Yellow form itself — sized to fit 11" × 8.5" landscape with 0.3" margins.
Available print area = 10.4" × 7.9" ≈ 998 × 758 px at 96dpi. */
.yel-pages { background: var(--surf2); padding: 12px; }
.yel-page {
background: white;
border: 1px solid #444;
padding: 6px 10px 8px;
margin: 0 auto 14px;
width: 998px;
/* Min-height keeps the canvas Letter-landscape sized on screen but lets
the school-verification block extend below if the per-day signature
row pushes it past the strict print bound. The @media print rules
below force the actual print canvas to 11×8.5in so the printed
output still fits one page. */
min-height: 758px;
font-family: Arial, Helvetica, sans-serif;
font-size: 8px;
color: #000;
page-break-after: always;
display: flex; flex-direction: column;
}
.yel-page:last-child { page-break-after: auto; margin-bottom: 0; }
.yel-header {
display: grid;
grid-template-columns: 1.2fr 1.4fr 0.55fr;
gap: 6px;
padding-bottom: 3px;
border-bottom: 1px solid #888;
margin-bottom: 3px;
}
.yel-county { font-size: 9px; font-weight: 700; }
.yel-log-line { font-size: 10px; margin-top: 1px; }
.yel-legend {
font-size: 7px;
background: #FFFCD8;
padding: 3px 5px;
border: 1px solid #999;
line-height: 1.25;
}
.yel-legend strong { font-size: 7px; }
.yel-page-of { font-size: 9px; text-align: right; }
.yel-oneway { font-size: 8px; margin-top: 2px; }
.yel-meta {
display: grid;
grid-template-columns: 0.7fr 1fr 1.1fr 1.4fr;
gap: 6px;
font-size: 9px;
margin-bottom: 3px;
align-items: end;
}
.yel-meta-left { line-height: 1.15; font-size: 9px; }
.yel-meta-driver { font-size: 10px; font-weight: 700; }
.yel-meta-school { font-size: 9px; }
.yel-meta-loc { font-size: 8px; line-height: 1.2; }
.yel-grid {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
flex: 1 1 auto;
min-height: 0;
height: 100%;
}
.yel-grid th, .yel-grid td {
border: 1px solid #444;
text-align: center;
padding: 0;
font-size: 9px;
vertical-align: middle;
line-height: 1;
}
.yel-grid thead th { height: 16px; }
.yel-grid tbody td { height: 28px; }
.yel-name-col { width: 88px; text-align: left; padding: 2px 4px; font-size: 9px; line-height: 1.15; }
/* Two-line name layout — last on top, first below. Matches the
attendance-sheets convention and keeps long names from clipping. */
.yel-name-last { display: block; font-weight: 700; }
.yel-name-first { display: block; font-weight: 400; }
.yel-trip-col { width: 22px; font-size: 8px; }
.yel-day-col { width: 28px; font-weight: 600; background: #eee; }
.yel-doy-banner {
font-size: 9px; font-weight: 700; letter-spacing: .04em;
background: #eee;
padding: 2px 0;
}
.yel-cell { width: 28px; }
.yel-cell-na { background: #ddd; }
.yel-weekend { background: #FFF159; }
/* Driver signature row — drivers sign or initial inside each day cell, so
the row needs noticeable vertical room. 80px gives a real signing area
while still leaving room for the school-verification block within the
11×8.5 print canvas. Targeting row + td + cell-class covers all three
table-layout interpretations of height. */
.yel-sig-row,
.yel-sig-row td,
.yel-cell-sig { height: 80px; }
/* School-closed days — slate-grey wash, same pattern as the manager card
closed treatment. Applied to the day-number header, P/U + D/O cells, and
the driver-signature cell. */
.yel-day-col.yel-closed,
.yel-cell.yel-closed {
background: repeating-linear-gradient(
-45deg,
rgba(100,116,139,.18),
rgba(100,116,139,.18) 4px,
rgba(100,116,139,.30) 4px,
rgba(100,116,139,.30) 8px
);
color: rgba(255,255,255,.9);
}
@media print {
.yel-day-col.yel-closed,
.yel-cell.yel-closed {
background: repeating-linear-gradient(
-45deg,
#999, #999 3px, #ccc 3px, #ccc 6px
);
color: #000;
}
}
/* Handwritten blue P/A marks. Caveat is a casual handwritten Google Font;
slightly larger so the strokes stand out against the row. */
.yel-mark {
font-family: 'Caveat', 'Patrick Hand', cursive;
color: #1740b5;
font-weight: 700;
font-size: 14px;
line-height: 1;
display: inline-block;
transform: translateY(-1px);
}
/* NS (No-Show) — slightly tighter and a hair smaller so two letters fit. */
.yel-mark-ns { font-size: 12px; letter-spacing: -.5px; }
.yel-footer {
margin-top: 4px;
font-size: 8px;
flex: 0 0 auto;
}
.yel-verify {
display: flex; gap: 6px; align-items: baseline;
margin-top: 4px;
}
.yel-verify strong { white-space: nowrap; font-size: 8px; }
.yel-verify span { font-size: 8px; }
.yel-sig-line {
display: grid; grid-template-columns: 2fr 1fr 1fr 1fr;
gap: 10px;
margin-top: 8px;
}
.yel-sig-block { display: flex; flex-direction: column; }
.yel-sig-bar {
border-bottom: 1px solid #000;
height: 26px;
position: relative;
display: flex; align-items: flex-end; justify-content: center;
padding-bottom: 2px;
}
.yel-sig-lbl { font-size: 8px; padding-top: 2px; color: #333; }
.yel-sig-printed {
font-size: 12px;
font-family: Arial, sans-serif;
font-weight: 500;
}
.yel-sig-stamp {
/* The stamp sits above the line; can be replaced with an ![]()
when
Justin uploads the actual stamp image. */
}
.yel-stamp-text {
font-family: 'Dancing Script', 'Caveat', cursive;
font-size: 18px;
color: #1740b5;
line-height: 1;
transform: rotate(-3deg);
font-weight: 700;
white-space: nowrap;
}
.yel-sig-stamp { overflow: visible; }
.yel-sig-stamp img,
.yel-sig-img {
max-height: 48px;
width: auto;
/* The source PNG has whitespace above the strokes — pull the image up so
the signature crosses the printed line naturally. */
position: absolute;
bottom: -6px;
left: 50%;
transform: translateX(-50%);
pointer-events: none;
}
/* PRINT: hide everything except the Yellow pages, force one per page,
landscape. @page margin: 0 suppresses the browser's auto-injected
header/footer (page title, URL, page number, date) — there's no
margin space for it to render in. The printer's safe area is built
into .yel-page's padding instead. */
@media print {
html, body { margin: 0; padding: 0; }
body * { visibility: hidden; }
.yel-pages, .yel-pages * { visibility: visible; }
.yel-pages { position: absolute; left: 0; top: 0; padding: 0; background: white; }
.yel-page {
box-shadow: none;
border: none;
margin: 0;
width: 11in;
height: 8.5in;
padding: 0.3in;
}
body.yel-printing-all > * { visibility: hidden; }
body.yel-printing-all #yel-print-root,
body.yel-printing-all #yel-print-root * { visibility: visible; }
body.yel-printing-all #yel-print-root { position: absolute; left: 0; top: 0; }
@page { size: 11in 8.5in; margin: 0; }
}
/* ─── Header avatar (signed-in user circle) ───────────────────────────── */
.hd-avatar {
display: inline-flex; align-items: center; justify-content: center;
width: 28px; height: 28px;
margin-right: 8px;
background: var(--green); color: white;
font-size: 11px; font-weight: 800; letter-spacing: .02em;
border-radius: 50%;
cursor: help;
user-select: none;
}
/* ─── BusBFF — Edit Students view ─────────────────────────────────────── */
.sed-shell { padding: 16px 18px; max-width: 1100px; }
.sed-search-row {
display: flex; align-items: center; gap: 12px;
margin-bottom: 12px;
}
.sed-search {
flex: 1; padding: 8px 12px;
font-size: 13px;
border: 1px solid var(--bdr); border-radius: 4px;
background: var(--surf); color: var(--tx);
}
.sed-search:focus {
outline: none; border-color: var(--green);
box-shadow: 0 0 0 2px rgba(45, 95, 63, .15);
}
.sed-new-btn {
padding: 8px 16px;
font-size: 12px; font-weight: 700;
background: var(--green); color: white;
border: 1px solid var(--green); border-radius: 4px;
cursor: pointer;
}
.sed-new-btn:hover { filter: brightness(1.08); }
.sed-empty, .sed-status {
padding: 18px; text-align: center;
color: var(--txm); font-size: 12px; font-style: italic;
background: var(--surf); border: 1px dashed var(--bdr); border-radius: 6px;
}
.sed-results {
display: flex; flex-direction: column;
background: var(--surf);
border: 1px solid var(--bdr); border-radius: 6px;
overflow: hidden;
}
.sed-result {
display: flex; flex-direction: column;
padding: 10px 14px;
text-align: left;
background: transparent;
border: none; border-bottom: 1px solid var(--bdr);
cursor: pointer;
}
.sed-result:last-child { border-bottom: none; }
.sed-result:hover { background: var(--surf2); }
.sed-result-name { font-weight: 600; font-size: 13px; color: var(--tx); }
.sed-result-meta { font-size: 11px; color: var(--txm); margin-top: 2px; }
/* Form */
.sed-form {
margin-top: 16px;
background: var(--surf);
border: 1px solid var(--bdr); border-radius: 8px;
overflow: hidden;
}
.sed-form-hd {
display: flex; align-items: center; gap: 12px;
padding: 14px 18px;
border-bottom: 1px solid var(--bdr);
background: var(--surf2);
}
.sed-form-hd h3 { margin: 0; font-size: 16px; font-weight: 700; flex: 1; }
.sed-id { font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: var(--txm); margin-left: 6px; }
.sed-new-tag { background: var(--green); color: white; font-size: 9px; font-weight: 800; letter-spacing: .06em; padding: 2px 6px; border-radius: 999px; margin-left: 6px; }
.sed-close-btn {
padding: 5px 12px; font-size: 11px;
background: transparent;
border: 1px solid var(--bdr); border-radius: 4px;
color: var(--txm); cursor: pointer;
}
.sed-section {
padding: 14px 18px;
border: none; border-bottom: 1px solid var(--bdr);
margin: 0;
}
.sed-section:last-of-type { border-bottom: none; }
/* ── Enrollments section (student-editor) ─────────────────────────────── */
.sed-enr-hint, .sed-enr-empty {
font-size: 12px; color: var(--txm); font-style: italic;
padding: 8px 4px;
}
.sed-enr-chips {
display: flex; flex-wrap: wrap; gap: 10px;
margin-bottom: 10px;
}
.sed-enr-chip {
position: relative;
background: var(--surf2); border: 1px solid var(--bdr2);
border-left: 3px solid var(--green); border-radius: 5px;
padding: 8px 12px 8px 12px; min-width: 220px;
font-family: 'IBM Plex Sans', sans-serif;
}
/* Edit + remove buttons stacked top-right of the chip; the chip itself
* pads-right just enough for the action column. */
.sed-enr-chip-actions {
position: absolute; top: 5px; right: 6px;
display: flex; align-items: center; gap: 4px;
}
.sed-enr-edit {
background: var(--surf); border: 1px solid var(--bdr2);
color: var(--blue); font: inherit; font-size: 10.5px; font-weight: 700;
padding: 2px 8px; border-radius: 3px; cursor: pointer;
letter-spacing: .02em;
transition: background 80ms, color 80ms, border-color 80ms;
}
.sed-enr-edit:hover { background: var(--blue); color: #fff; border-color: var(--blue); }
.sed-enr-chip.is-inactive { border-left-color: var(--bdr); opacity: .8; }
.sed-enr-chip-h {
display: flex; justify-content: space-between; align-items: baseline;
gap: 8px; margin-bottom: 4px;
}
.sed-enr-chip-sess { font-size: 12px; font-weight: 700; color: var(--tx); }
.sed-enr-chip-st {
font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
color: var(--green);
}
.sed-enr-chip.is-inactive .sed-enr-chip-st { color: var(--txd); }
.sed-enr-chip-school { font-size: 11px; font-weight: 600; color: var(--tx); }
.sed-enr-chip-bell, .sed-enr-chip-times {
font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; color: var(--txm);
}
.sed-enr-chip-svc { font-size: 10.5px; color: var(--txm); margin-top: 2px; }
.sed-enr-remove {
background: none; border: 0; color: var(--txd); cursor: pointer;
font-size: 16px; line-height: 1; padding: 0 4px;
}
.sed-enr-remove:hover { color: var(--red); }
.sed-enr-actions {
display: flex; flex-wrap: wrap; gap: 6px;
margin-bottom: 10px;
}
.sed-enr-add-btn {
background: var(--surf); border: 1px dashed var(--bdr2);
color: var(--green); font-weight: 600; font-size: 12px;
padding: 6px 12px; border-radius: 4px; cursor: pointer;
}
.sed-enr-add-btn:hover, .sed-enr-add-btn.is-on {
background: rgba(45,95,63,.06); border-color: var(--green);
}
.sed-enr-form {
background: var(--surf); border: 1px solid var(--bdr2); border-radius: 6px;
padding: 12px 14px; margin-top: 8px;
}
.sed-enr-form-h {
display: flex; justify-content: space-between; align-items: baseline;
gap: 12px; margin-bottom: 10px;
}
.sed-enr-form-title { font-size: 13px; font-weight: 700; color: var(--tx); }
.sed-enr-form-err { font-size: 11px; color: var(--red); font-weight: 600; }
.sed-enr-warn {
font-size: 11px; color: var(--amber); font-style: italic;
background: rgba(184,134,11,.08); padding: 6px 10px; border-radius: 4px;
margin: 8px 0;
}
.sed-enr-form-actions {
display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px;
}
.sed-enr-cancel {
background: none; border: 1px solid var(--bdr2);
color: var(--txm); padding: 6px 14px; border-radius: 4px; cursor: pointer;
font-size: 12px;
}
.sed-enr-save {
background: var(--green); color: #fff;
padding: 6px 16px; border: 0; border-radius: 4px; cursor: pointer;
font-size: 12px; font-weight: 700;
}
.sed-enr-save:disabled { opacity: .6; cursor: default; }
.sed-section legend {
font-size: 10px; font-weight: 700; letter-spacing: .08em;
text-transform: uppercase; color: var(--txd);
padding: 0 4px;
}
.sed-grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px;
margin-bottom: 12px;
}
.sed-fld {
display: flex; flex-direction: column;
gap: 4px;
}
.sed-fld span {
font-size: 10px; font-weight: 700; letter-spacing: .04em;
text-transform: uppercase; color: var(--txd);
}
.sed-fld input, .sed-fld select, .sed-fld textarea {
padding: 7px 10px;
border: 1px solid var(--bdr); border-radius: 4px;
font-family: inherit; font-size: 13px;
background: var(--surf); color: var(--tx);
}
.sed-fld input:focus, .sed-fld select:focus, .sed-fld textarea:focus {
outline: none; border-color: var(--green);
box-shadow: 0 0 0 2px rgba(45, 95, 63, .15);
}
.sed-checkbox-fld {
flex-direction: row; align-items: center; gap: 6px;
}
.sed-checkbox-fld input { margin: 0; width: 14px; height: 14px; }
.sed-checkbox-fld span { text-transform: none; letter-spacing: 0; font-weight: 600; color: var(--tx); }
.sed-addr {
margin-bottom: 12px;
}
.sed-addr-label {
font-size: 10px; font-weight: 700; letter-spacing: .04em;
text-transform: uppercase; color: var(--txd);
margin-bottom: 4px;
display: flex; align-items: center; gap: 8px;
}
.sed-addr-validate {
margin-left: auto;
padding: 2px 10px;
font-size: 10px; font-weight: 700; letter-spacing: .04em;
background: transparent;
border: 1px solid var(--bdr); border-radius: 3px;
color: var(--green);
cursor: pointer;
text-transform: none;
}
.sed-addr-validate:hover:not(:disabled) {
background: rgba(45, 95, 63, .08);
border-color: var(--green);
}
.sed-addr-validate:disabled { opacity: .5; cursor: wait; }
.sed-addr-validation {
margin-top: 6px;
padding: 8px 10px;
font-size: 11px;
border-radius: 4px;
}
.sed-addr-validation-ok {
background: rgba(45, 95, 63, .10);
color: var(--green);
font-weight: 600;
}
.sed-addr-validation-err {
background: rgba(167, 48, 39, .10);
color: var(--red);
font-weight: 600;
}
.sed-addr-validation-diff {
background: rgba(184, 134, 11, .10);
border: 1px solid rgba(184, 134, 11, .25);
}
.sed-addr-diff-hd {
font-size: 10px; font-weight: 700; letter-spacing: .04em;
text-transform: uppercase; color: var(--amber);
margin-bottom: 4px;
}
.sed-addr-diff-row {
display: grid;
grid-template-columns: 60px 1fr 16px 1fr;
gap: 6px; align-items: baseline;
font-size: 12px;
margin: 2px 0;
}
.sed-addr-diff-lbl { font-size: 10px; color: var(--txm); font-weight: 700; }
.sed-addr-diff-mine { color: var(--red); text-decoration: line-through; }
.sed-addr-diff-arrow { color: var(--txd); text-align: center; }
.sed-addr-diff-theirs { color: var(--green); font-weight: 600; }
.sed-addr-diff-actions {
display: flex; gap: 8px;
margin-top: 8px;
}
.sed-addr-diff-accept {
padding: 5px 12px;
font-size: 11px; font-weight: 700;
background: var(--green); color: white;
border: 1px solid var(--green); border-radius: 3px;
cursor: pointer;
}
.sed-addr-diff-keep {
padding: 5px 12px;
font-size: 11px;
background: transparent;
border: 1px solid var(--bdr); border-radius: 3px;
color: var(--txm);
cursor: pointer;
}
.sed-addr-grid {
display: grid; grid-template-columns: 2fr 1fr 60px 80px; gap: 6px;
}
.sed-addr-grid input {
padding: 7px 10px;
border: 1px solid var(--bdr); border-radius: 4px;
font-size: 13px;
background: var(--surf);
}
.sed-addr-grid input:focus {
outline: none; border-color: var(--green);
}
.sed-contact {
background: var(--surf2);
border: 1px solid var(--bdr); border-radius: 6px;
padding: 10px 12px;
margin-bottom: 8px;
}
.sed-contact.is-deleted { opacity: .4; text-decoration: line-through; }
.sed-contact-head {
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
margin-bottom: 8px;
}
.sed-contact-rel {
font-size: 9px; font-weight: 700; letter-spacing: .04em;
text-transform: uppercase; color: var(--amber);
}
.sed-pill {
display: inline-flex; align-items: center;
padding: 1px 7px;
font-size: 9px; font-weight: 700; letter-spacing: .04em;
text-transform: uppercase;
background: rgba(45, 95, 63, .12); color: var(--green);
border-radius: 999px;
}
.sed-contact-del {
margin-left: auto;
padding: 2px 8px;
font-size: 11px;
background: var(--surf); color: var(--red);
border: 1px solid var(--bdr); border-radius: 3px;
cursor: pointer;
}
.sed-contact-grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 6px;
}
.sed-contact-grid input {
padding: 6px 9px;
border: 1px solid var(--bdr); border-radius: 4px;
font-size: 12px;
}
.sed-add-row-btn {
margin-top: 4px;
padding: 6px 14px;
font-size: 11px; font-weight: 600;
background: transparent;
border: 1px dashed var(--bdr); border-radius: 4px;
color: var(--txm); cursor: pointer;
}
.sed-add-row-btn:hover { border-color: var(--green); color: var(--green); }
.sed-form-actions {
display: flex; justify-content: flex-end; gap: 12px;
padding: 14px 18px;
background: var(--surf2);
border-top: 1px solid var(--bdr);
}
.sed-error {
flex: 1;
padding: 7px 12px;
background: rgba(167, 48, 39, .10);
color: var(--red);
font-size: 12px; font-weight: 600;
border: 1px solid rgba(167, 48, 39, .25); border-radius: 4px;
}
.sed-save-btn {
padding: 8px 22px;
font-size: 13px; font-weight: 700;
background: var(--green); color: white;
border: 1px solid var(--green); border-radius: 4px;
cursor: pointer;
}
.sed-save-btn:disabled { opacity: .5; cursor: wait; }
.sed-save-btn:hover:not(:disabled) { filter: brightness(1.08); }
/* ─── Manager — sub-view toggle (Assignment Board / Run Board) ────────── */
.mgr-subview {
display: flex; justify-content: space-between; align-items: center;
gap: 12px;
padding: 8px 12px;
background: var(--surf);
border-bottom: 1px solid var(--bdr);
}
.mgr-subview-row {
display: flex; align-items: center; gap: 0;
}
.mgr-subview-row--right { margin-left: auto; }
.mgr-subview-btn {
padding: 5px 16px;
font-size: 12px; font-weight: 600;
background: transparent;
border: 1px solid var(--bdr);
color: var(--txm);
cursor: pointer;
}
.mgr-subview-row .mgr-subview-btn:first-child { border-radius: 4px 0 0 4px; }
.mgr-subview-row .mgr-subview-btn:last-child { border-radius: 0 4px 4px 0; border-left: none; }
.mgr-subview-row .mgr-subview-btn:only-child { border-radius: 4px; }
.mgr-subview-btn:hover:not(.is-on) { background: var(--surf2); color: var(--tx); }
.mgr-subview-lbl {
font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
color: var(--txm); margin-right: 8px;
}
.mgr-subview-btn.is-on {
background: var(--green); color: white; border-color: var(--green);
}
/* ─── Manager Timeline view ───────────────────────────────────────────── */
.tl-shell { background: var(--surf); }
.tl-toolbar {
padding: 8px 14px;
background: var(--surf2);
border-bottom: 1px solid var(--bdr);
font-size: 11px; color: var(--txm);
}
.tl-toolbar-hint strong { color: var(--tx); font-weight: 700; }
.tl-scroll {
position: relative;
overflow-x: auto;
overflow-y: visible;
max-height: calc(100vh - 200px);
}
.tl-table {
border-collapse: collapse;
font-size: 12px;
table-layout: fixed;
}
.tl-table th, .tl-table td {
padding: 8px 10px;
border-bottom: 1px solid var(--bdr);
vertical-align: middle;
background: var(--surf);
}
.tl-table thead th {
position: sticky; top: 0; z-index: 5;
background: var(--surf2);
font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
color: var(--txd);
text-align: left;
}
.tl-asg-col { width: 110px; min-width: 110px; }
.tl-status-col { width: 110px; min-width: 110px; }
.tl-timing-col { width: 120px; min-width: 120px; }
.tl-track-col { padding: 0 !important; }
.tl-sortable { cursor: pointer; }
.tl-sortable:hover { color: var(--tx); }
.tl-asg-cell { line-height: 1.2; }
.tl-asg-num { font-weight: 700; font-size: 13px; color: var(--tx); }
.tl-asg-bus { font-size: 11px; color: var(--txm); margin-top: 2px; }
.tl-status-pill, .tl-timing-pill {
display: inline-block;
padding: 2px 8px;
font-size: 10px; font-weight: 700; letter-spacing: .04em;
text-transform: uppercase;
border-radius: 999px;
white-space: nowrap;
}
.tl-status-base { background: rgba(45,95,63,.12); color: var(--green); }
.tl-status-route { background: rgba(184,134,11,.16); color: var(--amber); }
.tl-status-school { background: rgba(139,101,8,.18); color: var(--blue); }
.tl-status-deadhead { background: var(--bdr); color: var(--txm); }
.tl-timing-early { background: rgba(45,95,63,.10); color: var(--green); }
.tl-timing-ontime { background: rgba(45,95,63,.14); color: var(--green); }
.tl-timing-late { background: rgba(184,134,11,.18); color: var(--amber); }
.tl-timing-late-15 { background: rgba(167,48,39,.18); color: var(--red); }
/* Time axis at top of the track column */
.tl-axis {
position: relative;
height: 28px;
background: var(--surf2);
border-left: 1px solid var(--bdr);
}
.tl-tick {
position: absolute; top: 0; bottom: 0;
border-left: 1px solid var(--bdr);
font-size: 9px; color: var(--txm);
padding-left: 3px;
display: flex; align-items: center;
}
.tl-tick:first-child { border-left: none; }
.tl-tick span { padding-top: 2px; }
/* Per-row track */
.tl-track {
position: relative;
height: 36px;
background:
repeating-linear-gradient(
to right,
transparent 0,
transparent calc(60px - 1px), /* 1 hour @ 5px/min - border */
var(--bdr) calc(60px - 1px),
var(--bdr) 60px
);
border-left: 1px solid var(--bdr);
}
.tl-track-cell { padding: 0 !important; }
/* Stop dots */
.tl-stop {
position: absolute; top: 50%;
width: 10px; height: 10px;
margin-left: -5px; margin-top: -5px;
border-radius: 50%;
cursor: help;
z-index: 2;
transition: transform 0.1s;
}
.tl-stop:hover { transform: scale(1.5); z-index: 4; }
.tl-stop-future { background: var(--bdr2); border: 1px solid var(--txd); }
.tl-stop-future-late { background: var(--red); border: 1px solid var(--red); box-shadow: 0 0 0 2px rgba(167,48,39,.2); }
.tl-stop-inside { background: var(--amber); border: 2px solid var(--amber);
box-shadow: 0 0 0 4px rgba(184,134,11,.35);
animation: tl-pulse 1.4s ease-in-out infinite; }
.tl-stop-visited { background: var(--green); border: 1px solid var(--green); }
.tl-stop-absent {
background: transparent;
border: 2px dashed var(--txd);
width: 12px; height: 12px;
margin-left: -6px; margin-top: -6px;
}
@keyframes tl-pulse {
0%, 100% { box-shadow: 0 0 0 4px rgba(184,134,11,.35); }
50% { box-shadow: 0 0 0 8px rgba(184,134,11,.10); }
}
/* School marker (purple diamond) */
.tl-school {
position: absolute; top: 50%;
width: 14px; height: 14px;
margin-left: -7px; margin-top: -7px;
background: #6b2d8b; /* purple */
transform: rotate(45deg);
border-radius: 2px;
z-index: 3;
cursor: help;
}
.tl-school-future { background: rgba(107,45,139,.35); }
.tl-school-visited { background: #6b2d8b; box-shadow: 0 0 0 2px rgba(107,45,139,.25); }
/* Bus icon — last-known position */
.tl-bus {
position: absolute; top: 50%;
margin-top: -10px; margin-left: -9px;
width: 18px; height: 18px;
font-size: 14px;
line-height: 18px; text-align: center;
z-index: 4;
pointer-events: none;
filter: drop-shadow(0 1px 2px rgba(0,0,0,.3));
}
/* Now line — vertical, full table height, sticky */
.tl-now-line {
position: absolute; top: 0;
width: 0; border-left: 2px dashed var(--red);
pointer-events: none;
z-index: 6;
}
/* ─── Manager — sort-by-status toolbar ────────────────────────────────── */
.dg-toolbar {
display: flex; align-items: center; gap: 12px;
padding: 6px 12px;
background: var(--surf);
border-bottom: 1px solid var(--bdr);
font-size: 11px;
}
.dg-tb-toggle {
display: inline-flex; align-items: center; gap: 6px;
cursor: pointer; user-select: none;
font-weight: 600; color: var(--tx);
}
.dg-tb-toggle input { cursor: pointer; }
.dg-tb-sub { color: var(--txm); font-size: 10px; letter-spacing: .04em; }
.dg-tb-lbl {
font-size: 10px; font-weight: 800; letter-spacing: .08em;
text-transform: uppercase; color: var(--txm);
}
.dg-tb-pill {
padding: 3px 9px; font-size: 11px; font-weight: 700; letter-spacing: .03em;
text-transform: uppercase; cursor: pointer;
background: var(--surf); border: 1px solid var(--bdr2); border-radius: 14px;
color: var(--txm); font-family: 'IBM Plex Sans', sans-serif;
}
.dg-tb-pill:hover:not(.is-on) { color: var(--tx); border-color: var(--txm); }
.dg-tb-pill.is-on { background: var(--blue); color: white; border-color: var(--blue); }
/* "Leave at" pill in the card header — shows the earliest AM depot-depart
* time. Lives inside .dc-id (under asg-num + bus row) so the asg-num gets
* the full left-column width. applyBoardStatuses hides it (hidden attr)
* once the bus has actually left the depot. */
.dc-depart {
display: inline-flex; align-self: flex-start; align-items: center; gap: 4px;
padding: 2px 7px; border-radius: 11px;
background: rgba(184, 134, 11, .12);
border: 1px solid rgba(184, 134, 11, .35);
flex-shrink: 0;
margin-top: 3px;
}
.dc-depart[hidden] { display: none !important; }
.dc-depart-lbl { font-size: 9px; font-weight: 800; letter-spacing: .06em; color: var(--amber); white-space: nowrap; }
.dc-depart-time { font-size: 11px; font-weight: 800; color: var(--tx); font-family: 'IBM Plex Mono', monospace; white-space: nowrap; }
.dc-depart { white-space: nowrap; }
/* Wave divider — appears between depot-depart-time buckets when sorting by
* Wave. Spans the full grid row regardless of column count. */
.dg-wave-hdr {
grid-column: 1 / -1;
display: flex; align-items: baseline; gap: 10px;
padding: 10px 12px 6px;
border-bottom: 2px solid var(--blue);
margin-top: 8px;
}
.dg-wave-hdr:first-child { margin-top: 0; }
.dg-wave-hdr.is-none {
border-bottom-color: var(--bdr);
color: var(--txm); font-size: 12px; font-style: italic;
}
.dg-wave-time {
font-size: 16px; font-weight: 800; color: var(--blue);
font-family: 'IBM Plex Sans', sans-serif; letter-spacing: .02em;
}
.dg-wave-count {
font-size: 11px; color: var(--txm); font-weight: 600;
text-transform: uppercase; letter-spacing: .04em;
}
/* ─── Live telematics status — manager-board card decoration ──────────── */
/* Card status — colored "header tab" at the top of the card, with the
status message rendered inside it in white. The card body underneath
stays normal. A thin colored border around the rest of the card frames
the look so the status color reads at-a-glance from across the room.
Coverage classes (.cam/.cmix/.cok) still apply to the background. */
.dc.live-green,
.dc.live-yellow,
.dc.live-red {
border-width: 2px;
padding: 8px 9px 7px;
}
.dc.live-green { border-color: var(--green); }
.dc.live-yellow { border-color: var(--amber); }
.dc.live-red {
border-color: var(--red);
box-shadow: 0 0 0 1px rgba(167, 48, 39, .15), 0 1px 4px rgba(167, 48, 39, .12);
}
.dc.live-grey { /* leave default styling */ }
/* The status header — a thick colored tab at the top of the card with
the status message in white. Negative margins pull it out to the card
edges (escaping .dc's inner padding) and the top-only rounded corners
match the card's outer radius minus its border width. */
.dc-live-banner {
margin: -8px -9px 6px; /* matches live- card padding to reach edges */
padding: 4px 10px; /* slimmer top tab — less visual weight */
font-size: 10px;
font-weight: 800;
letter-spacing: .04em;
text-transform: uppercase;
text-align: center;
color: white;
display: flex; align-items: center; justify-content: center; gap: 8px;
border-radius: 6px 6px 0 0;
border-bottom: 1px solid rgba(0, 0, 0, .08);
}
.dc-live-msg {
flex: 1;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
/* Centered text — block flex defaults left-align in some browsers */
text-align: center;
}
.dc-live-banner[data-color="green"] { background: var(--green); }
.dc-live-banner[data-color="yellow"] { background: var(--amber); color: white; }
.dc-live-banner[data-color="red"] { background: var(--red); }
.dc-live-banner[data-color="neutral"] {
background: var(--surf2);
color: var(--txm);
font-weight: 700;
text-transform: none;
letter-spacing: 0;
}
/* Bus-number row + Motive live-location link icon */
.bus-num-row {
display: flex; align-items: center; gap: 4px;
}
.bus-motive-link {
display: inline-flex;
align-items: center; justify-content: center;
width: 18px; height: 18px;
font-size: 11px;
text-decoration: none;
background: var(--surf2);
border: 1px solid var(--bdr);
border-radius: 3px;
cursor: pointer;
flex-shrink: 0;
transition: background 0.1s;
}
.bus-motive-link:hover {
background: var(--surf);
border-color: var(--bdr2);
}
.bus-motive-link[hidden] { display: none; }
/* Per-run colored dot, anchored to the right edge of the run row. */
.rr { position: relative; }
.rr-live-dot {
display: inline-block;
width: 8px; height: 8px;
border-radius: 50%;
margin-left: 6px;
background: var(--bdr);
flex-shrink: 0;
align-self: center;
}
.rr-live-dot[data-color="green"] { background: var(--green); }
.rr-live-dot[data-color="yellow"] { background: var(--amber); }
.rr-live-dot[data-color="red"] { background: var(--red); box-shadow: 0 0 0 2px rgba(167, 48, 39, .2); }
.rr-live-dot[data-color="grey"] { background: var(--bdr); }
/* Radiating highlight on the run row that's currently active (the one
driving the card banner). Pulse animation tinted to match the run's
color so dispatchers can see at a glance which run is "happening now". */
@keyframes rr-pulse-green {
0%,100% { box-shadow: 0 0 0 0 rgba(45,95,63,.55), inset 0 0 0 1px rgba(45,95,63,.45); }
50% { box-shadow: 0 0 0 6px rgba(45,95,63,0), inset 0 0 0 1px rgba(45,95,63,.55); }
}
@keyframes rr-pulse-yellow {
0%,100% { box-shadow: 0 0 0 0 rgba(184,134,11,.55), inset 0 0 0 1px rgba(184,134,11,.45); }
50% { box-shadow: 0 0 0 6px rgba(184,134,11,0), inset 0 0 0 1px rgba(184,134,11,.55); }
}
@keyframes rr-pulse-red {
0%,100% { box-shadow: 0 0 0 0 rgba(167,48,39,.65), inset 0 0 0 1px rgba(167,48,39,.55); }
50% { box-shadow: 0 0 0 7px rgba(167,48,39,0), inset 0 0 0 1px rgba(167,48,39,.65); }
}
.rr.rr-active {
position: relative;
border-radius: 4px;
animation-duration: 1.8s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
.rr.rr-active[data-active-color="green"] { animation-name: rr-pulse-green; background: rgba(45,95,63,.06); }
.rr.rr-active[data-active-color="yellow"] { animation-name: rr-pulse-yellow; background: rgba(184,134,11,.10); }
.rr.rr-active[data-active-color="red"] { animation-name: rr-pulse-red; background: rgba(167,48,39,.08); }
@media (prefers-reduced-motion: reduce) {
.rr.rr-active { animation: none; }
}
/* ─── Hover tooltip — per-run stop progress timeline ──────────────────── */
.rr-tip {
position: absolute;
z-index: 9999;
width: 320px;
max-height: 70vh;
overflow-y: auto;
background: var(--surf);
border: 1px solid var(--bdr);
border-radius: 8px;
box-shadow: 0 8px 24px rgba(0, 0, 0, .15);
font-size: 11px;
pointer-events: none;
}
.rr-tip-loading {
padding: 14px; text-align: center; color: var(--txm); font-style: italic;
}
.rr-tip-empty {
padding: 14px; text-align: center; color: var(--txm); font-style: italic;
}
.rr-tip-hd {
padding: 8px 12px;
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
border-bottom: 1px solid var(--bdr);
font-weight: 700;
}
.rr-tip-hd[data-color="green"] { background: rgba(45, 95, 63, .10); color: var(--green); }
.rr-tip-hd[data-color="yellow"] { background: rgba(184, 134, 11, .14); color: var(--amber); }
.rr-tip-hd[data-color="red"] { background: rgba(167, 48, 39, .12); color: var(--red); }
.rr-tip-hd[data-color="grey"] { background: var(--surf2); color: var(--tx); }
.tip-bus { font-family: 'IBM Plex Mono', monospace; font-size: 12px; font-weight: 800; }
.tip-swap {
font-size: 9px; font-weight: 800; letter-spacing: .06em;
padding: 1px 6px;
background: rgba(0, 0, 0, .12);
color: inherit;
border-radius: 999px;
}
.tip-assess { flex: 1; font-size: 11px; font-weight: 600; }
.tip-stops {
list-style: none; margin: 0; padding: 6px 0;
}
.tip-stop {
display: grid;
grid-template-columns: 28px 1fr;
align-items: start;
gap: 8px;
padding: 6px 12px;
position: relative;
}
.tip-stop + .tip-stop { border-top: 1px dashed var(--bdr); }
.tip-stop-num {
display: inline-flex; align-items: center; justify-content: center;
width: 22px; height: 22px;
font-weight: 700; font-size: 10px;
background: var(--bdr); color: var(--txm);
border-radius: 50%;
}
.tip-stop.is-visited .tip-stop-num {
background: var(--green); color: white;
}
.tip-stop.is-current .tip-stop-num {
background: var(--amber); color: white;
box-shadow: 0 0 0 3px rgba(184, 134, 11, .25);
}
.tip-stop-body {
display: flex; flex-direction: column; gap: 1px;
min-width: 0;
}
.tip-stop-name {
font-weight: 700; font-size: 12px; color: var(--tx);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tip-stop-street {
font-weight: 400; font-size: 10px; color: var(--txm);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tip-sib {
display: inline-block;
padding: 0 5px;
margin-left: 4px;
font-size: 9px; font-weight: 700;
background: var(--bdr);
color: var(--txm);
border-radius: 999px;
}
.tip-stop-times {
display: flex; align-items: baseline; gap: 6px;
font-size: 10px; color: var(--txm);
flex-wrap: wrap;
}
.tip-stop-sched { color: var(--txm); }
.tip-stop-actual { color: var(--tx); font-weight: 600; }
.tip-stop-delta {
font-weight: 700;
padding: 0 4px;
border-radius: 3px;
}
.tip-d-good { background: rgba(45, 95, 63, .10); color: var(--green); }
.tip-d-ok { background: rgba(45, 95, 63, .08); color: var(--green); }
.tip-d-warn { background: rgba(184, 134, 11, .15); color: var(--amber); }
.tip-d-bad { background: rgba(167, 48, 39, .12); color: var(--red); }
.tip-d-none { color: var(--txd); }
.tip-stop.is-current { background: rgba(184, 134, 11, .08); }
/* School row at the top of D-route timelines */
.tip-stop.is-school { background: rgba(45, 95, 63, .07); }
.tip-stop.is-school .tip-stop-num {
background: var(--green); color: white;
font-size: 9px; font-weight: 800;
}
.tip-stop.is-school .tip-stop-name { color: var(--green); }
/* Base (depot) row at stop 1 of AM/Arrival timelines. Differentiated from
the school row by a blue tint so they don't visually collide. */
.tip-stop.is-base { background: rgba(59, 130, 246, .07); }
.tip-stop.is-base .tip-stop-num {
background: var(--blue); color: white;
font-size: 9px; font-weight: 800;
}
.tip-stop.is-base .tip-stop-name { color: var(--blue); }
/* ─── BusBFF — Student Lookup ─────────────────────────────────────────── */
.bff-content { max-width: 1100px; }
.bff-search-row {
display: flex; align-items: center; gap: 12px;
margin-bottom: 14px;
}
.bff-search {
flex: 1;
padding: 10px 14px;
font-size: 14px;
background: var(--surf);
border: 1px solid var(--bdr); border-radius: 6px;
color: var(--tx);
}
.bff-search:focus {
outline: none;
border-color: var(--green);
box-shadow: 0 0 0 2px rgba(45, 95, 63, .15);
}
.bff-search-spinner {
font-size: 11px; color: var(--txm); font-style: italic;
}
.bff-empty {
padding: 30px;
text-align: center;
color: var(--txm); font-style: italic;
background: var(--surf); border: 1px dashed var(--bdr); border-radius: 6px;
}
.bff-empty-inline { padding: 18px; margin-top: 6px; }
.bff-status {
padding: 24px; color: var(--txm); font-style: italic;
}
.bff-status-err { color: var(--red); font-style: normal; font-weight: 600; }
.bff-results {
display: flex; flex-direction: column; gap: 4px;
background: var(--surf);
border: 1px solid var(--bdr); border-radius: 6px;
overflow: hidden;
}
.bff-result {
display: flex; flex-direction: column; gap: 2px;
padding: 10px 14px;
text-align: left;
background: transparent; border: none;
border-bottom: 1px solid var(--bdr);
cursor: pointer;
}
.bff-result:last-child { border-bottom: none; }
.bff-result:hover { background: var(--surf2); }
.bff-result-name { font-weight: 600; font-size: 13px; color: var(--tx); }
.bff-result-meta { font-size: 11px; color: var(--txm); }
/* Kind chip on each result so the unified Lookup makes clear what you're
picking. Same palette as the manager-board inspector for consistency. */
.bff-result-kind {
display: inline-block;
font-size: 9.5px; font-weight: 700; letter-spacing: .04em;
text-transform: uppercase;
padding: 1px 5px; margin-right: 6px;
border-radius: 99px; border: 1px solid var(--bdr2);
background: var(--surf2); color: var(--txm);
}
.bff-result--employee .bff-result-kind { color: var(--blue); border-color: var(--blue); }
.bff-result--run .bff-result-kind { color: var(--green); border-color: var(--green); }
.bff-result--student .bff-result-kind { color: var(--amber); border-color: var(--amber); }
/* ===== BusBFF — Employee detail card (in-place from unified Lookup) ===== */
.bff-back {
background: none; border: 0; padding: 4px 0;
font: inherit; color: var(--txm); cursor: pointer;
font-size: 11.5px;
margin-bottom: 8px;
}
.bff-back:hover { color: var(--blue); }
/* Standing-assignment rows in the BusBFF employee card are clickable → run
detail card. Just a hover state hint; the existing data-bff-run-number
delegation handles the navigation. */
.el-run-clickable { cursor: pointer; }
.el-run-clickable:hover td { background: rgba(45,74,120,.05); color: var(--blue); }
.el-run-clickable:hover td b { color: var(--blue); }
.bff-emp-card { padding: 14px; background: var(--surf); border: 1px solid var(--bdr); border-radius: 8px; }
.bff-emp-head { border-bottom: 1px solid var(--bdr); padding-bottom: 10px; margin-bottom: 12px; }
.bff-emp-name { font-family: 'IBM Plex Mono', monospace; font-size: 18px; font-weight: 700; color: var(--tx); }
.bff-emp-sub { font-size: 11.5px; color: var(--txm); margin-top: 3px; text-transform: uppercase; letter-spacing: .04em; }
.bff-emp-phone { font-family: 'IBM Plex Mono', monospace; font-size: 13px; margin-top: 6px; }
.bff-emp-phone a { color: var(--blue); text-decoration: none; }
.bff-emp-phone a:hover { text-decoration: underline; }
.bff-emp-runs-h { font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--txm); margin-bottom: 6px; }
.bff-emp-run {
width: 100%; display: grid; grid-template-columns: 80px 1fr auto;
gap: 8px; align-items: baseline;
background: var(--surf2); border: 1px solid var(--bdr2); border-radius: 4px;
padding: 7px 10px; margin-bottom: 5px;
font: inherit; text-align: left; cursor: pointer;
}
.bff-emp-run:hover { border-color: var(--green); background: rgba(45,95,63,.04); }
.bff-emp-run-num { font-family: 'IBM Plex Mono', monospace; font-size: 12.5px; font-weight: 700; color: var(--tx); }
.bff-emp-run-meta { font-size: 11px; color: var(--txm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bff-emp-run-bell { font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: var(--txm); }
.bff-emp-runs-empty { padding: 12px; color: var(--txm); font-size: 11.5px; font-style: italic; }
/* ===== BusBFF — Run detail card (in-place from unified Lookup) ===== */
.bff-run-card { padding: 14px; background: var(--surf); border: 1px solid var(--bdr); border-radius: 8px; }
.bff-run-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--bdr); margin-bottom: 12px; }
.bff-run-head-l { min-width: 0; }
.bff-run-head-r { text-align: right; }
.bff-run-num { font-family: 'IBM Plex Mono', monospace; font-size: 18px; font-weight: 700; color: var(--tx); line-height: 1.1; }
.bff-run-school { font-size: 11px; color: var(--txm); margin-top: 3px; }
.bff-run-people { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; }
.bff-role-lbl { font-size: 9px; font-weight: 700; letter-spacing: .06em; color: var(--txm); width: 22px; display: inline-block; }
.bff-emp-link, .bff-emp-static {
display: inline-flex; align-items: baseline; gap: 6px;
background: none; border: 0; padding: 0; font: inherit; text-align: left;
font-size: 12px; font-weight: 600; color: var(--tx);
}
.bff-emp-link { cursor: pointer; color: var(--blue); }
.bff-emp-link:hover { text-decoration: underline; }
.bff-emp-link .bff-role-lbl { color: var(--txm); }
.bff-run-bus-row { font-family: 'IBM Plex Mono', monospace; font-size: 13px; font-weight: 700; color: var(--tx); }
.bff-run-bus { color: var(--tx); }
.bff-run-bus-planned { color: var(--txm); font-weight: 500; text-decoration: line-through; opacity: .75; }
.bff-run-bus-inferred { color: var(--green); font-weight: 700; }
.bff-run-phase {
display: inline-block; margin-top: 4px;
font-size: 9.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
padding: 1px 6px; border-radius: 99px; background: var(--surf2);
color: var(--txm); border: 1px solid var(--bdr2);
}
.bff-run-phase--green { color: var(--green); border-color: var(--green); background: rgba(45,95,63,.06); }
.bff-run-phase--yellow { color: var(--amber); border-color: var(--amber); background: rgba(184,134,11,.08); }
.bff-run-phase--red { color: var(--red); border-color: var(--red); background: rgba(167,48,39,.06); }
.bff-run-base {
display: flex; align-items: center; justify-content: space-between;
gap: 10px; padding: 10px; margin-bottom: 12px;
background: var(--surf); border: 1px solid var(--bdr2); border-radius: 6px;
border-left: 3px solid var(--bdr2);
}
.bff-run-base--on { border-left-color: var(--green); }
.bff-run-base--late { border-left-color: var(--amber); }
.bff-run-base--verylate { border-left-color: var(--red); }
.bff-run-base--pending { border-left-color: var(--bdr2); }
.bff-run-base-lbl { font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--txm); }
.bff-run-base-times { display: flex; align-items: baseline; gap: 10px; font-family: 'IBM Plex Mono', monospace; }
.bff-run-base-t { display: flex; flex-direction: column; align-items: flex-end; }
.bff-run-base-t-lbl { font-size: 8.5px; color: var(--txd); letter-spacing: .04em; text-transform: uppercase; }
.bff-run-base-t-val { font-size: 12px; font-weight: 600; color: var(--tx); }
.bff-run-base-d { font-size: 12px; font-weight: 700; color: var(--tx); min-width: 32px; text-align: right; }
.bff-run-stops { display: flex; flex-direction: column; gap: 4px; }
.bff-run-stops-h {
display: flex; justify-content: space-between; align-items: baseline;
font-size: 10.5px; font-weight: 700; color: var(--txm); letter-spacing: .04em; text-transform: uppercase;
margin-bottom: 4px;
}
.bff-run-stops-count { color: var(--tx); }
.bff-run-stops-empty { padding: 12px; color: var(--txm); font-size: 11.5px; text-align: center; }
.bff-run-stop {
display: grid; grid-template-columns: 22px 1fr auto; gap: 8px; align-items: center;
padding: 6px 8px; background: var(--surf2); border: 1px solid var(--bdr2);
border-radius: 4px; border-left: 3px solid var(--bdr2);
}
.bff-run-stop--on { border-left-color: var(--green); }
.bff-run-stop--late { border-left-color: var(--amber); }
.bff-run-stop--verylate { border-left-color: var(--red); }
.bff-run-stop--visited { border-left-color: var(--blue); }
.bff-run-stop--pending { opacity: .65; }
.bff-run-stop-ord { font-family: 'IBM Plex Mono', monospace; font-size: 11px; font-weight: 700; color: var(--txm); text-align: center; }
.bff-run-stop-body { min-width: 0; }
.bff-run-stop-stu { font-size: 11.5px; font-weight: 600; color: var(--tx); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bff-run-stop-addr { font-size: 10px; color: var(--txm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bff-run-stop-times { display: flex; flex-direction: column; align-items: flex-end; font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; line-height: 1.3; }
.bff-run-stop-target { color: var(--txm); }
.bff-run-stop-actual { color: var(--tx); font-weight: 600; }
.bff-run-stop-delta { color: var(--txm); font-weight: 700; }
.bff-run-stop--on .bff-run-stop-delta { color: var(--green); }
.bff-run-stop--late .bff-run-stop-delta { color: var(--amber); }
.bff-run-stop--verylate .bff-run-stop-delta { color: var(--red); }
.bff-run-stu-link {
background: none; border: 0; padding: 0; font: inherit;
color: var(--blue); cursor: pointer; text-align: left;
}
.bff-run-stu-link:hover { text-decoration: underline; }
/* ===== BusBFF — Schools sub-view ===================================== */
.bff-schools-shell {
display: grid; grid-template-columns: 240px 1fr;
gap: 14px; height: 100%;
}
.bff-schools-list {
display: flex; flex-direction: column; gap: 3px;
overflow-y: auto;
padding: 4px;
background: var(--surf2);
border: 1px solid var(--bdr); border-radius: 6px;
font-family: 'IBM Plex Sans', sans-serif;
}
.bff-schools-li {
display: flex; flex-direction: column; align-items: flex-start;
padding: 8px 12px;
background: transparent; border: 0; border-radius: 4px;
text-align: left; cursor: pointer;
font: inherit;
}
.bff-schools-li:hover { background: var(--surf); }
.bff-schools-li.is-on { background: var(--surf); border-left: 3px solid var(--green); padding-left: 9px; }
.bff-schools-li-name { font-size: 12.5px; font-weight: 700; color: var(--tx); }
.bff-schools-li-meta { font-size: 10.5px; color: var(--txm); margin-top: 2px; }
.bff-schools-detail {
padding: 18px 20px;
background: var(--surf); border: 1px solid var(--bdr); border-radius: 6px;
overflow-y: auto;
}
.bff-schools-head { border-bottom: 1px solid var(--bdr); padding-bottom: 12px; margin-bottom: 14px; }
.bff-schools-name { font-family: 'IBM Plex Mono', monospace; font-size: 18px; font-weight: 700; color: var(--tx); margin: 0 0 4px; }
.bff-schools-addr { font-size: 12px; color: var(--txm); }
.bff-schools-phone { font-family: 'IBM Plex Mono', monospace; font-size: 13px; margin-top: 4px; }
.bff-schools-phone a { color: var(--blue); text-decoration: none; }
.bff-schools-phone a:hover { text-decoration: underline; }
.bff-schools-sess-tabs {
display: flex; gap: 6px; flex-wrap: wrap;
margin-bottom: 14px;
}
.bff-schools-sess-tab {
background: var(--surf2); color: var(--tx);
border: 1px solid var(--bdr2); border-radius: 99px;
padding: 5px 14px;
font-size: 12px; font-weight: 600; cursor: pointer;
font-family: 'IBM Plex Sans', sans-serif;
display: inline-flex; align-items: baseline; gap: 6px;
}
.bff-schools-sess-tab.is-on { background: var(--green); color: #fff; border-color: var(--green); }
.bff-schools-sess-state {
font-size: 9px; font-weight: 700; letter-spacing: .06em;
text-transform: uppercase; opacity: .8;
}
.bff-schools-sess-tab.is-on .bff-schools-sess-state { color: #fff; opacity: .9; }
.bff-schools-sess-empty {
padding: 16px; color: var(--txm); font-style: italic; font-size: 12px;
background: var(--surf2); border-radius: 4px;
}
.bff-schools-dl {
display: grid; grid-template-columns: 130px 1fr; gap: 8px 18px;
margin: 0;
}
.bff-schools-dl dt {
font-size: 10.5px; font-weight: 700; letter-spacing: .04em;
text-transform: uppercase; color: var(--txm);
padding-top: 4px;
}
.bff-schools-dl dd {
margin: 0; font-size: 13px; color: var(--tx);
font-family: 'IBM Plex Sans', sans-serif;
}
.bff-schools-bell {
font-family: 'IBM Plex Mono', monospace; font-size: 12.5px; font-weight: 600;
}
.bff-schools-notes {
white-space: pre-wrap; font-size: 12px; line-height: 1.5;
color: var(--tx);
}
.bff-schools-dl dd a { color: var(--blue); text-decoration: none; }
.bff-schools-dl dd a:hover { text-decoration: underline; }
/* Per-session school address row + editor */
.bff-schools-addr-line { font-size: 12.5px; color: var(--tx); }
.bff-schools-addr-status {
display: inline-block; margin-left: 8px;
font-size: 9px; font-weight: 700; letter-spacing: .06em;
text-transform: uppercase;
padding: 1px 6px; border-radius: 99px;
border: 1px solid currentColor;
}
.bff-schools-addr-status--ok { color: var(--green); background: rgba(45,95,63,.07); }
.bff-schools-addr-status--warn { color: var(--amber); background: rgba(184,134,11,.10); }
.bff-schools-addr-status--none { color: var(--txd); background: var(--surf2); }
.bff-schools-addr-edit-btn {
display: inline-block; margin-top: 4px;
font: inherit; font-size: 11px; color: var(--blue);
background: none; border: 0; padding: 2px 0; cursor: pointer;
}
.bff-schools-addr-edit-btn:hover { text-decoration: underline; }
.bff-schools-addr-edit {
display: grid; grid-template-columns: 1fr 1fr 60px 80px; gap: 6px;
margin-top: 4px;
}
.bff-schools-addr-input {
font: inherit; font-size: 12.5px; padding: 5px 8px;
border: 1px solid var(--bdr2); border-radius: 4px;
background: var(--surf); color: var(--tx);
}
.bff-schools-addr-input:focus {
outline: none; border-color: var(--blue);
}
.bff-schools-addr-match {
margin-top: 6px; padding: 6px 10px;
background: rgba(45,95,63,.06); color: var(--green);
border-radius: 4px; font-size: 11.5px;
}
.bff-schools-addr-err {
margin-top: 6px; padding: 6px 10px;
background: rgba(167,48,39,.06); color: var(--red);
border-radius: 4px; font-size: 11.5px;
}
.bff-schools-addr-actions {
display: flex; gap: 8px; justify-content: flex-end; margin-top: 8px;
}
.bff-schools-addr-cancel {
background: none; border: 1px solid var(--bdr2);
color: var(--txm); padding: 5px 12px; border-radius: 4px; cursor: pointer;
font-size: 11.5px;
}
.bff-schools-addr-validate {
background: var(--green); color: #fff;
border: 0; padding: 5px 14px; border-radius: 4px; cursor: pointer;
font-size: 11.5px; font-weight: 700;
}
.bff-schools-addr-validate:disabled { opacity: .6; cursor: default; }
.bff-schools-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.bff-schools-head-l { min-width: 0; flex: 1; }
.bff-schools-head-r { flex-shrink: 0; }
.bff-schools-edit-btn {
background: none; border: 1px solid var(--bdr2); border-radius: 4px;
color: var(--txm); font-size: 11px; padding: 4px 12px;
cursor: pointer; font-family: inherit;
}
.bff-schools-edit-btn:hover { color: var(--blue); border-color: var(--blue); }
.bff-schools-head--editing { display: block; }
.bff-schools-name-input {
width: 100%; font: inherit; font-family: 'IBM Plex Mono', monospace;
font-size: 16px; font-weight: 700; color: var(--tx);
padding: 6px 10px; border: 1px solid var(--bdr2); border-radius: 4px;
background: var(--surf); margin-bottom: 8px;
}
.bff-schools-name-input:focus { outline: none; border-color: var(--blue); }
.bff-schools-phone-input {
width: 200px; font: inherit; font-family: 'IBM Plex Mono', monospace;
font-size: 13px; padding: 5px 10px;
border: 1px solid var(--bdr2); border-radius: 4px; background: var(--surf);
margin-top: 8px;
}
.bff-schools-phone-input:focus { outline: none; border-color: var(--blue); }
.bff-schools-sess-edit { display: flex; flex-direction: column; gap: 10px; padding-top: 4px; }
.bff-schools-sess-fld { display: flex; flex-direction: column; gap: 4px; }
.bff-schools-sess-fld > span {
font-size: 10.5px; font-weight: 700; letter-spacing: .04em;
text-transform: uppercase; color: var(--txm);
}
.bff-schools-sess-fld input,
.bff-schools-sess-fld textarea {
font: inherit; font-size: 13px; color: var(--tx);
padding: 6px 10px; border: 1px solid var(--bdr2); border-radius: 4px;
background: var(--surf); width: 100%; resize: vertical;
}
.bff-schools-sess-fld input:focus,
.bff-schools-sess-fld textarea:focus { outline: none; border-color: var(--blue); }
.bff-schools-sess-actions { margin-top: 14px; text-align: right; }
/* ===== BusBFF — Session Change TAF ==================================== */
.bff-sctaf-shell { padding: 16px 20px; max-width: 880px; font-family: 'IBM Plex Sans', sans-serif; }
.bff-sctaf-header {
display: flex; justify-content: space-between; align-items: flex-start;
gap: 16px; padding-bottom: 14px; margin-bottom: 16px;
border-bottom: 1px solid var(--bdr);
}
.bff-sctaf-title h2 { margin: 0; font-size: 18px; font-weight: 700; color: var(--tx); }
.bff-sctaf-sub { font-size: 12px; color: var(--txm); margin-top: 4px; max-width: 60ch; }
.bff-sctaf-counts { display: flex; gap: 6px; flex-shrink: 0; flex-wrap: wrap; }
.bff-sctaf-count {
font-size: 11px; font-weight: 700;
padding: 3px 10px; border-radius: 99px;
border: 1px solid currentColor;
font-family: 'IBM Plex Mono', monospace;
}
.bff-sctaf-count--enrolled { color: var(--green); background: rgba(45,95,63,.06); }
.bff-sctaf-count--opened { color: var(--blue); background: rgba(45,74,120,.06); }
.bff-sctaf-count--bulk { color: var(--amber); background: rgba(184,134,11,.06); }
.bff-sctaf-target {
display: flex; align-items: baseline; gap: 12px;
margin-bottom: 14px; padding: 10px 14px;
background: var(--surf2); border: 1px solid var(--bdr2); border-radius: 6px;
}
.bff-sctaf-target-lbl {
font-size: 10.5px; font-weight: 700; letter-spacing: .04em;
text-transform: uppercase; color: var(--txm);
}
.bff-sctaf-target select {
font: inherit; font-size: 13px; padding: 5px 10px;
border: 1px solid var(--bdr2); border-radius: 4px; background: var(--surf);
}
.bff-sctaf-form {
display: grid;
grid-template-columns: 1fr 1fr 180px auto auto;
gap: 10px; align-items: end;
margin-bottom: 18px;
}
.bff-sctaf-fld { display: flex; flex-direction: column; gap: 4px; }
.bff-sctaf-fld label {
font-size: 10.5px; font-weight: 700; letter-spacing: .04em;
text-transform: uppercase; color: var(--txm);
}
.bff-sctaf-fld input {
font: inherit; font-size: 14px;
padding: 7px 10px; border: 1px solid var(--bdr2); border-radius: 4px;
background: var(--surf); color: var(--tx);
}
.bff-sctaf-fld input:focus { outline: none; border-color: var(--blue); }
.bff-sctaf-search-btn {
font: inherit; font-weight: 700; font-size: 13px;
background: var(--green); color: #fff;
padding: 8px 18px; border: 0; border-radius: 4px; cursor: pointer;
}
.bff-sctaf-search-btn:disabled { opacity: .6; cursor: default; }
.bff-sctaf-clear-btn {
font: inherit; font-size: 13px;
background: none; color: var(--txm);
padding: 8px 12px; border: 1px solid var(--bdr2); border-radius: 4px; cursor: pointer;
}
.bff-sctaf-hint { padding: 20px; color: var(--txm); font-style: italic; font-size: 13px; text-align: center; }
.bff-sctaf-results-h {
font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
color: var(--txm); margin-bottom: 8px;
}
.bff-sctaf-row {
display: flex; justify-content: space-between; align-items: center;
gap: 14px; padding: 10px 14px;
background: var(--surf); border: 1px solid var(--bdr2); border-radius: 6px;
border-left: 3px solid var(--green);
margin-bottom: 8px;
}
.bff-sctaf-row.is-enrolled { border-left-color: var(--bdr2); opacity: .8; }
.bff-sctaf-row-l { min-width: 0; flex: 1; }
.bff-sctaf-name { font-size: 14px; font-weight: 700; color: var(--tx); }
.bff-sctaf-meta { font-size: 11px; color: var(--txm); margin-top: 2px; font-family: 'IBM Plex Mono', monospace; }
.bff-sctaf-enr {
display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px;
}
.bff-sctaf-enr-chip {
font-size: 10.5px; padding: 2px 8px;
background: rgba(45,95,63,.06); color: var(--green); border-radius: 99px;
border: 1px solid rgba(45,95,63,.2);
}
.bff-sctaf-enr-empty { font-size: 10.5px; color: var(--txd); font-style: italic; }
.bff-sctaf-row-r { display: flex; flex-direction: column; gap: 5px; flex-shrink: 0; }
.bff-sctaf-act {
font: inherit; font-size: 11.5px; font-weight: 600;
padding: 6px 14px; border-radius: 4px; cursor: pointer;
border: 1px solid var(--bdr2); background: var(--surf); color: var(--tx);
}
.bff-sctaf-act:hover { border-color: var(--blue); color: var(--blue); }
.bff-sctaf-act--primary { background: var(--green); color: #fff; border-color: var(--green); }
.bff-sctaf-act--primary:hover { background: var(--green); color: #fff; }
.bff-sctaf-act--primary:disabled { opacity: .6; cursor: not-allowed; }
.bff-sctaf-act--ok { background: var(--surf2); color: var(--txm); cursor: default; }
/* Wrap that hosts both the result row + (when active) the inline enroll form. */
.bff-sctaf-row-wrap { margin-bottom: 8px; }
.bff-sctaf-row-wrap.is-enrolling .bff-sctaf-row {
margin-bottom: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0;
}
/* Inline enroll form (matches the not-found form's visual language). */
.bff-sctaf-inline {
padding: 14px 16px 12px;
background: var(--surf2);
border: 1px solid var(--bdr2); border-top: 0;
border-radius: 0 0 6px 6px;
}
.bff-sctaf-inline-h {
font-size: 12px; font-weight: 700; letter-spacing: .02em;
color: var(--tx); margin-bottom: 10px;
}
.bff-sctaf-inline-err {
padding: 8px 10px; margin-bottom: 10px;
font-size: 12px; color: var(--red);
background: rgba(176,38,38,.08); border: 1px solid var(--red); border-radius: 4px;
}
.bff-sctaf-inline-grid {
display: grid;
grid-template-columns: minmax(0, 2fr) minmax(0, 1.2fr) minmax(0, 1.2fr);
gap: 8px 12px; margin-bottom: 10px;
}
.bff-sctaf-inline-fld { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.bff-sctaf-inline-fld > span {
font-size: 10.5px; font-weight: 700; letter-spacing: .04em;
text-transform: uppercase; color: var(--txm);
}
.bff-sctaf-inline-auto {
font-style: normal; font-weight: 600; color: var(--green);
text-transform: none; letter-spacing: 0; margin-left: 4px;
}
.bff-sctaf-inline-fld input,
.bff-sctaf-inline-fld select {
font: inherit; font-size: 12.5px; padding: 6px 8px;
border: 1px solid var(--bdr2); border-radius: 4px; background: var(--surf);
}
.bff-sctaf-inline-fld input:focus,
.bff-sctaf-inline-fld select:focus { outline: none; border-color: var(--blue); }
.bff-sctaf-inline-fld input[readonly] { background: var(--surf2); color: var(--txm); cursor: default; }
.bff-sctaf-inline-fld--wide { grid-column: span 1; }
.bff-sctaf-inline-fld--narrow { grid-column: span 1; }
/* Yes/no + radio pill groups */
.bff-sctaf-inline-yesno {
display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
margin-bottom: 10px;
}
.bff-sctaf-inline-yesno-lbl {
font-size: 10.5px; font-weight: 700; letter-spacing: .04em;
text-transform: uppercase; color: var(--txm); margin-right: 4px;
}
.bff-sctaf-inline-radio {
display: inline-flex; align-items: center; gap: 6px;
padding: 5px 11px; border: 1px solid var(--bdr2); border-radius: 4px;
background: var(--surf); font-size: 12px; font-weight: 600; cursor: pointer;
}
.bff-sctaf-inline-radio input { display: none; }
.bff-sctaf-inline-radio.is-on { background: var(--blue); color: #fff; border-color: var(--blue); }
.bff-sctaf-inline-radio:hover:not(.is-on) { background: var(--surf2); }
.bff-sctaf-inline-addr-block { margin-bottom: 10px; }
.bff-sctaf-inline-addr-lbl {
font-size: 11px; color: var(--tx); margin-bottom: 5px;
display: flex; gap: 6px; flex-wrap: wrap; align-items: baseline;
}
.bff-sctaf-inline-addr-current {
font-size: 11px; color: var(--txm); font-family: 'IBM Plex Mono', monospace;
font-weight: 600;
}
.bff-sctaf-inline-addrs-loading {
font-size: 11px; color: var(--txm); font-style: italic; margin-bottom: 10px;
}
.bff-sctaf-inline-actions {
display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px;
}
.bff-sctaf-inline-cancel {
font: inherit; font-size: 12px; font-weight: 600;
padding: 6px 14px; border-radius: 4px; cursor: pointer;
background: var(--surf); color: var(--tx); border: 1px solid var(--bdr2);
}
.bff-sctaf-inline-cancel:hover { background: var(--surf2); }
.bff-sctaf-inline-confirm {
font: inherit; font-size: 12px; font-weight: 700;
padding: 6px 16px; border-radius: 4px; cursor: pointer;
background: var(--green); color: #fff; border: 1px solid var(--green);
}
.bff-sctaf-inline-confirm:hover { filter: brightness(1.05); }
.bff-sctaf-inline-confirm:disabled { opacity: .6; cursor: not-allowed; }
.bff-sctaf-nomatch {
padding: 20px; background: var(--surf2);
border: 1px solid var(--bdr2); border-radius: 6px;
}
.bff-sctaf-nomatch-h { font-size: 14px; font-weight: 700; color: var(--tx); }
.bff-sctaf-nomatch-b { font-size: 12px; color: var(--txm); margin-top: 4px; max-width: 56ch; }
.bff-sctaf-bulk-btn {
margin-top: 12px;
font: inherit; font-size: 12px; font-weight: 700;
background: var(--amber); color: #fff;
padding: 7px 16px; border: 0; border-radius: 4px; cursor: pointer;
}
/* Single-bar live search */
.bff-sctaf-searchbar { position: relative; margin-bottom: 16px; }
.bff-sctaf-q-input {
width: 100%; box-sizing: border-box;
font: inherit; font-size: 16px;
padding: 12px 16px; border: 2px solid var(--bdr2); border-radius: 6px;
background: var(--surf); color: var(--tx);
}
.bff-sctaf-q-input:focus { outline: none; border-color: var(--blue); }
.bff-sctaf-q-spin {
position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
font-size: 11px; color: var(--txm); font-style: italic;
}
.bff-sctaf-add-anyway {
display: block; width: 100%; margin-top: 10px;
font: inherit; font-size: 12px;
background: var(--surf2); color: var(--txm);
padding: 8px 14px; border: 1px dashed var(--bdr2); border-radius: 4px; cursor: pointer;
}
.bff-sctaf-add-anyway:hover { color: var(--amber); border-color: var(--amber); }
/* Not-Found minimal intake form */
.bff-sctaf-nf {
padding: 18px 20px; background: var(--surf);
border: 1px solid var(--bdr); border-radius: 6px;
border-left: 3px solid var(--amber);
}
.bff-sctaf-nf-h { font-size: 14px; font-weight: 700; color: var(--tx); }
.bff-sctaf-nf-sub { font-size: 12px; color: var(--txm); margin: 4px 0 14px; }
.bff-sctaf-nf-grid {
display: grid; grid-template-columns: 1fr 1fr 1fr 1fr;
gap: 10px; margin-bottom: 14px;
}
.bff-sctaf-nf-fld { display: flex; flex-direction: column; gap: 4px; }
.bff-sctaf-nf-fld--wide { grid-column: span 2; }
.bff-sctaf-nf-fld > span {
font-size: 10.5px; font-weight: 700; letter-spacing: .04em;
text-transform: uppercase; color: var(--txm);
}
.bff-sctaf-nf-fld input,
.bff-sctaf-nf-fld select {
font: inherit; font-size: 13px;
padding: 6px 10px; border: 1px solid var(--bdr2); border-radius: 4px;
background: var(--surf); color: var(--tx); width: 100%; box-sizing: border-box;
}
.bff-sctaf-nf-fld input:focus,
.bff-sctaf-nf-fld select:focus { outline: none; border-color: var(--blue); }
.bff-sctaf-nf-actions { display: flex; justify-content: flex-end; gap: 10px; }
/* ─── Student Card ────────────────────────────────────────────────────── */
.bff-card-wrap { display: flex; flex-direction: column; gap: 16px; }
.bff-back {
align-self: flex-start;
padding: 6px 12px;
font-size: 12px; font-weight: 500;
background: transparent;
border: 1px solid var(--bdr); border-radius: 4px;
color: var(--txm);
cursor: pointer;
}
.bff-back:hover { background: rgba(0,0,0,.04); color: var(--tx); }
.bff-header {
padding-bottom: 12px;
}
.bff-header-name {
font-size: 26px; font-weight: 800; color: var(--tx);
letter-spacing: -.01em;
}
.bff-header-sub {
margin-top: 2px;
font-size: 12px; color: var(--txm);
display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.bff-sep { color: var(--txd); }
.bff-section {
background: var(--surf);
border: 1px solid var(--bdr); border-radius: 8px;
overflow: hidden;
}
.bff-section-hd {
display: flex; align-items: center; gap: 10px;
padding: 14px 18px;
border-bottom: 1px solid var(--bdr);
}
.bff-section-icon {
display: inline-flex; align-items: center; justify-content: center;
width: 28px; height: 28px;
background: var(--surf2); border-radius: 6px;
font-size: 14px;
}
.bff-section-title {
font-size: 14px; font-weight: 700; color: var(--tx);
}
.bff-section-body { padding: 18px; }
.bff-sub-h {
font-size: 10px; font-weight: 700; letter-spacing: .08em;
text-transform: uppercase; color: var(--txd);
margin: 0 0 8px;
}
.bff-sub-h:not(:first-child) { margin-top: 18px; }
/* DOB / school / status info grid at the top of Student Information */
.bff-info-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
margin-bottom: 16px;
}
.bff-info-cell {
padding: 10px 12px;
background: var(--surf2);
border: 1px solid var(--bdr);
border-radius: 6px;
}
.bff-info-label { font-size: 10px; font-weight: 700; letter-spacing: .08em; color: var(--txd); margin-bottom: 4px; }
.bff-info-val { font-size: 14px; font-weight: 600; color: var(--tx); }
/* Addresses */
.bff-addr-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.bff-addr-card {
padding: 12px 14px;
background: var(--surf2);
border: 1px solid var(--bdr); border-radius: 6px;
}
.bff-addr-label {
font-size: 9px; font-weight: 700; letter-spacing: .08em;
text-transform: uppercase; color: var(--txd);
margin-bottom: 6px;
}
.bff-addr-val {
font-size: 13px; font-weight: 600; color: var(--tx);
line-height: 1.35;
}
.bff-addr-sub { font-weight: 400; color: var(--txm); font-size: 12px; }
/* Contacts */
.bff-contact-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 10px;
}
.bff-contact {
padding: 10px 14px;
background: var(--surf2);
border: 1px solid var(--bdr); border-radius: 6px;
}
.bff-contact-hd {
display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
margin-bottom: 2px;
}
.bff-contact-name { font-weight: 700; font-size: 13px; color: var(--tx); }
.bff-contact-rel {
font-size: 9px; font-weight: 700; letter-spacing: .08em;
color: var(--amber);
margin-bottom: 6px;
}
.bff-contact-phone {
display: flex; align-items: center; gap: 6px;
font-size: 12px; margin-top: 2px;
}
.bff-contact-phone-kind {
color: var(--txm); font-size: 11px; min-width: 42px;
}
.bff-contact-phone-empty { color: var(--txd); font-style: italic; }
.bff-tag {
display: inline-flex; align-items: center;
padding: 1px 7px;
font-size: 9px; font-weight: 700; letter-spacing: .04em;
text-transform: uppercase;
background: var(--surf); border: 1px solid var(--bdr); border-radius: 999px;
color: var(--txm);
}
.bff-tag-primary {
background: rgba(45, 95, 63, .12);
border-color: rgba(45, 95, 63, .35);
color: var(--green);
}
.bff-tag-amber {
background: rgba(184, 134, 11, .14);
border-color: rgba(184, 134, 11, .4);
color: var(--amber);
}
.bff-link {
color: var(--tx); text-decoration: underline; text-decoration-color: var(--bdr2);
text-underline-offset: 2px;
}
.bff-link:hover { text-decoration-color: var(--green); }
/* Routes */
.bff-route-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
@media (max-width: 760px) {
.bff-route-grid { grid-template-columns: 1fr; }
.bff-addr-grid { grid-template-columns: 1fr; }
}
.bff-tile {
padding: 14px 16px;
background: var(--surf2);
border: 1px solid var(--bdr); border-radius: 6px;
display: flex; flex-direction: column; gap: 10px;
}
.bff-tile[data-accent="amber"] .bff-tile-label { color: var(--amber); }
.bff-tile[data-accent="green"] .bff-tile-label { color: var(--green); }
.bff-tile-empty { opacity: .6; }
.bff-tile-empty-msg { font-size: 12px; color: var(--txm); font-style: italic; }
.bff-tile-hd {
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.bff-tile-label {
font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.bff-tile-run {
font-size: 28px; font-weight: 800; color: var(--tx);
letter-spacing: -.01em;
line-height: 1;
}
.bff-tile-rows { margin: 0; display: flex; flex-direction: column; gap: 0; }
.bff-tile-row {
display: flex; align-items: baseline; gap: 12px;
padding: 6px 0;
border-bottom: 1px solid var(--bdr);
font-size: 12px;
}
.bff-tile-row:last-child { border-bottom: none; }
.bff-tile-row dt { color: var(--txm); flex: 0 0 auto; }
.bff-tile-row dd { margin: 0; flex: 1; text-align: right; font-weight: 600; color: var(--tx); }
.bff-tile-row-hl {
background: rgba(184, 134, 11, .14);
border-radius: 4px;
padding: 6px 8px;
margin: 2px -8px;
}
.bff-tile-row-hl dt { color: var(--amber); font-weight: 700; }
.bff-amber { color: var(--amber); }
.bff-today-tag {
display: inline-block;
padding: 1px 6px;
margin-left: 4px;
font-size: 9px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
background: rgba(184, 134, 11, .15); color: var(--amber);
border-radius: 999px;
}
/* Route progress strip — telematics-ready, currently a static schedule view */
.bff-prog {
margin-top: 6px;
padding: 10px 4px 4px;
border-top: 1px dashed var(--bdr);
}
.bff-prog-rail {
position: relative;
height: 6px;
background: var(--bdr);
border-radius: 999px;
margin: 4px 6px 16px;
}
.bff-prog-fill {
position: absolute; left: 0; top: 0; bottom: 0;
background: linear-gradient(to right, var(--amber), var(--green));
border-radius: 999px;
width: 0%;
transition: width 1s linear;
}
.bff-prog-dot {
position: absolute; top: 50%;
width: 10px; height: 10px;
margin-left: -5px; margin-top: -5px;
background: var(--surf);
border: 2px solid var(--bdr2); border-radius: 50%;
}
.bff-prog-dot.is-this {
background: var(--amber);
border-color: var(--amber);
width: 12px; height: 12px;
margin-left: -6px; margin-top: -6px;
box-shadow: 0 0 0 3px rgba(184, 134, 11, .25);
}
.bff-prog-status {
font-size: 10px; color: var(--txm); font-style: italic;
text-align: center;
}
/* Program strip */
.bff-program-strip {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
margin-top: 12px;
padding: 12px 14px;
background: var(--surf2);
border: 1px solid var(--bdr); border-radius: 6px;
}
@media (max-width: 760px) {
.bff-program-strip { grid-template-columns: 1fr 1fr; }
}
.bff-program-label {
font-size: 9px; font-weight: 700; letter-spacing: .08em;
text-transform: uppercase; color: var(--txd);
margin-bottom: 4px;
}
.bff-program-val {
font-size: 13px; font-weight: 700; color: var(--tx);
}
/* All stops list */
.bff-stops-section { margin-top: 16px; }
.bff-stops-title {
font-size: 10px; font-weight: 700; letter-spacing: .08em;
text-transform: uppercase; color: var(--txd);
margin-bottom: 6px;
}
.bff-stops {
list-style: none; margin: 0; padding: 0;
background: var(--surf2);
border: 1px solid var(--bdr); border-radius: 6px;
overflow: hidden;
}
.bff-stop {
display: grid;
grid-template-columns: 32px 1fr auto;
gap: 10px;
align-items: center;
padding: 8px 12px;
border-bottom: 1px solid var(--bdr);
font-size: 12px;
}
.bff-stop:last-child { border-bottom: none; }
.bff-stop-num {
display: inline-flex; align-items: center; justify-content: center;
width: 22px; height: 22px;
font-weight: 700; font-size: 11px;
background: var(--bdr); color: var(--txm);
border-radius: 50%;
}
.bff-stop-body { display: flex; flex-direction: column; gap: 1px; }
.bff-stop-name { font-weight: 600; color: var(--tx); }
.bff-stop-addr { font-size: 11px; color: var(--txm); }
.bff-stop-time { font-weight: 600; color: var(--tx); white-space: nowrap; }
.bff-stop.is-this {
background: rgba(184, 134, 11, .12);
}
.bff-stop.is-this .bff-stop-num {
background: var(--amber); color: white;
}
.bff-stop.is-this .bff-stop-name { color: var(--amber); font-weight: 800; }
.bff-stop.is-this .bff-stop-time { color: var(--amber); font-weight: 800; }
/* ─── Routing tab ───────────────────────────────────────────────────── */
.rt-subview {
display: flex; gap: 0; padding: 12px 14px 0;
background: var(--surf2); border-bottom: 1px solid var(--bdr);
}
.rt-subview-btn {
padding: 7px 14px; font-size: 11px; font-weight: 700; letter-spacing: .04em;
text-transform: uppercase; color: var(--txm); cursor: pointer;
background: transparent; border: 1px solid var(--bdr2);
font-family: 'IBM Plex Sans', sans-serif; transition: all .1s;
}
.rt-subview-btn:first-child { border-radius: 4px 0 0 4px; }
.rt-subview-btn:last-child { border-radius: 0 4px 4px 0; border-left: none; }
.rt-subview-btn:hover:not(.is-on) { background: var(--surf); color: var(--tx); }
.rt-subview-btn.is-on { background: var(--surf); color: var(--blue); border-color: var(--blue); }
.rt-page {
display: grid; grid-template-columns: 360px 1fr; gap: 0;
height: calc(100vh - 100px); overflow: hidden;
}
.rt-left {
border-right: 1px solid var(--bdr); padding: 16px; overflow-y: auto;
background: var(--surf);
}
.rt-right { overflow-y: auto; padding: 16px 22px; }
.rt-section-h {
font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
color: var(--txm); margin-bottom: 8px;
}
.rt-search {
width: 100%; padding: 9px 11px; border: 1px solid var(--bdr2); border-radius: 6px;
font-family: 'IBM Plex Sans', sans-serif; font-size: 14px;
background: var(--surf2);
}
.rt-search:focus { outline: none; border-color: var(--amber); background: var(--surf); }
.rt-results { margin-top: 10px; display: flex; flex-direction: column; gap: 4px; }
.rt-hint { color: var(--txm); font-size: 12px; padding: 6px 4px; }
.rt-err { color: var(--red); font-size: 12px; padding: 6px 4px; }
.rt-result-row {
padding: 8px 10px; border-radius: 5px; cursor: pointer; border: 1px solid transparent;
}
.rt-result-row:hover { background: var(--surf2); border-color: var(--bdr2); }
.rt-name { font-weight: 600; color: var(--tx); font-size: 13px; }
.rt-meta { font-size: 11px; color: var(--txm); margin-top: 1px; }
.rt-empty {
color: var(--txm); padding: 32px 8px; text-align: center; font-size: 13px;
}
.rt-status { color: var(--txm); padding: 16px 8px; font-size: 13px; }
.rt-detail-h { margin-bottom: 12px; }
.rt-detail-name { font-size: 22px; font-weight: 700; color: var(--tx); }
.rt-detail-school { font-size: 13px; color: var(--txm); margin-top: 2px; }
.rt-controls {
display: flex; gap: 12px; margin: 10px 0 16px;
padding-bottom: 10px; border-bottom: 1px solid var(--bdr);
}
.rt-control-group { display: flex; align-items: center; gap: 6px; }
.rt-control-lbl { font-size: 11px; color: var(--txm); font-weight: 600; }
.rt-pill {
padding: 4px 10px; border-radius: 12px; font-size: 11px; font-weight: 700;
letter-spacing: .04em; text-transform: uppercase; cursor: pointer;
border: 1px solid var(--bdr2); color: var(--txm); background: transparent;
}
.rt-pill:hover:not(.is-on) { color: var(--tx); border-color: var(--txm); }
.rt-pill.is-on { background: var(--blue); color: white; border-color: var(--blue); }
/* Placement proposal cards */
.rt-prop-list { display: flex; flex-direction: column; gap: 10px; }
.rt-prop-card {
display: grid; grid-template-columns: 36px 1fr 140px; gap: 12px;
padding: 12px 14px; background: var(--surf); border: 1px solid var(--bdr2);
border-radius: 6px;
}
.rt-prop-rank { font-size: 18px; font-weight: 800; color: var(--blue); }
.rt-prop-main {}
.rt-prop-h { margin-bottom: 8px; }
.rt-prop-title { font-size: 15px; font-weight: 700; color: var(--tx); }
.rt-prop-sub { font-size: 12px; color: var(--txm); margin-top: 1px; }
.rt-prop-grid { font-size: 12px; width: 100%; }
.rt-prop-grid td { padding: 1px 0; vertical-align: top; }
.rt-prop-grid td:first-child { color: var(--txm); width: 130px; }
.rt-prop-grid td:nth-child(2) { color: var(--tx); }
.rt-warn {
margin-top: 8px; padding: 7px 9px; background: rgba(184, 134, 11, .08);
border-left: 3px solid var(--amber); border-radius: 3px;
color: var(--amber); font-size: 12px;
}
.rt-warn ul { margin: 4px 0 0 18px; padding: 0; }
.rt-warn li { margin: 1px 0; }
.rt-prop-action { display: flex; align-items: center; justify-content: flex-end; }
.rt-place-btn {
padding: 8px 14px; font-size: 11px; font-weight: 700; letter-spacing: .04em;
text-transform: uppercase; background: var(--green); color: white;
border: 1px solid var(--green); border-radius: 5px; cursor: pointer;
}
.rt-place-btn:hover:not(:disabled) { filter: brightness(1.1); }
.rt-place-btn:disabled { opacity: .5; cursor: default; }
.rt-excluded-wrap { margin-top: 14px; }
.rt-excluded-wrap summary {
cursor: pointer; color: var(--txm); font-size: 12px; padding: 4px 0;
}
.rt-excluded { margin-top: 6px; padding-left: 8px; }
.rt-excluded-row {
font-size: 11px; color: var(--txm); padding: 2px 0;
font-family: 'IBM Plex Mono', ui-monospace, monospace;
}
/* Resequence summary + table */
.rt-resq-summary {
background: var(--surf2); border: 1px solid var(--bdr2); border-radius: 6px;
padding: 14px 16px; margin-bottom: 14px;
}
.rt-resq-savings {
font-size: 18px; color: var(--txm); margin-bottom: 10px;
}
.rt-resq-savings.is-pos { color: var(--green); }
.rt-resq-row {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
padding-top: 10px; border-top: 1px solid var(--bdr);
}
.rt-resq-cell .lbl { font-size: 11px; color: var(--txm); text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
.rt-resq-cell .val { font-size: 14px; color: var(--tx); margin-top: 3px; }
.rt-resq-cell .val.is-pos { color: var(--green); }
.rt-resq-cell .val.is-neg { color: var(--red); }
.rt-resq-table {
background: var(--surf); border: 1px solid var(--bdr2); border-radius: 6px;
overflow: hidden;
}
.rt-resq-head {
display: grid; grid-template-columns: 50px 50px 1fr 110px 110px 90px;
padding: 8px 12px; background: var(--surf2); border-bottom: 1px solid var(--bdr);
font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--txm);
}
.rt-resq-row-r {
display: grid; grid-template-columns: 50px 50px 1fr 110px 110px 90px;
padding: 7px 12px; border-bottom: 1px solid var(--bdr);
font-size: 12px; align-items: center;
}
.rt-resq-row-r:last-child { border-bottom: none; }
.rt-resq-row-r.is-moved { background: rgba(184, 134, 11, .04); }
.rt-num { font-family: 'IBM Plex Mono', monospace; color: var(--txm); }
.rt-resq-row-r.is-moved .rt-num:nth-child(2) { color: var(--amber); }
.rt-stop-id { color: var(--tx); font-family: 'IBM Plex Mono', monospace; font-size: 11px; }
.rt-time { color: var(--tx); font-family: 'IBM Plex Mono', monospace; }
.rt-ride { color: var(--tx); }
.rt-ride.is-over { color: var(--red); font-weight: 700; }
.rt-resq-action { margin-top: 14px; display: flex; align-items: center; gap: 12px; }
.rt-apply-btn {
padding: 10px 18px; font-size: 12px; font-weight: 700; letter-spacing: .04em;
text-transform: uppercase; background: var(--green); color: white;
border: 1px solid var(--green); border-radius: 5px; cursor: pointer;
}
.rt-apply-btn:hover:not(:disabled) { filter: brightness(1.1); }
.rt-apply-btn.is-muted { background: var(--surf2); color: var(--txm); border-color: var(--bdr2); }
.rt-apply-btn:disabled { opacity: .5; cursor: default; }
.rt-resq-warn { font-size: 12px; color: var(--amber); }
/* Routing — Queue view */
.rt-q-page { padding: 20px 28px; max-width: 1100px; }
.rt-q-header {
display: flex; justify-content: space-between; align-items: flex-start;
margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--bdr);
}
.rt-q-h { margin: 0 0 4px; font-size: 22px; font-weight: 700; color: var(--tx); }
.rt-q-sub { font-size: 13px; color: var(--txm); max-width: 700px; line-height: 1.5; }
.rt-q-empty {
text-align: center; padding: 48px 20px; color: var(--txm); font-size: 14px;
background: var(--surf2); border-radius: 6px; border: 1px dashed var(--bdr);
}
.rt-q-rows { display: flex; flex-direction: column; gap: 8px; }
.rt-q-row {
display: grid; grid-template-columns: 1.6fr 1fr auto; gap: 16px;
padding: 12px 14px; background: var(--surf); border: 1px solid var(--bdr2);
border-radius: 6px;
}
.rt-q-name-col { min-width: 0; }
.rt-q-name { font-size: 15px; font-weight: 700; color: var(--tx); }
.rt-q-school { font-size: 12px; color: var(--txm); margin-top: 2px; }
.rt-q-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.rt-need-chip {
font-size: 10px; padding: 2px 7px; border-radius: 9px;
background: rgba(184, 134, 11, .08); color: var(--amber);
border: 1px solid rgba(184, 134, 11, .2); white-space: nowrap;
}
.rt-q-reason-col { font-size: 12px; min-width: 0; }
.rt-q-reason { font-weight: 700; color: var(--blue); }
.rt-q-age { color: var(--txm); margin-top: 2px; }
.rt-q-by { color: var(--txm); margin-top: 1px; font-family: 'IBM Plex Mono', monospace; font-size: 11px; }
.rt-q-notes {
margin-top: 4px; color: var(--txm); font-size: 11px; white-space: nowrap;
overflow: hidden; text-overflow: ellipsis; max-width: 280px;
}
.rt-q-actions { display: flex; gap: 6px; align-items: center; }
.rt-q-route {
padding: 7px 14px; font-size: 11px; font-weight: 700; letter-spacing: .04em;
text-transform: uppercase; background: var(--green); color: white;
border-color: var(--green);
}
.rt-q-route:hover { filter: brightness(1.1); }
.rt-q-skip {
padding: 7px 12px; font-size: 11px; font-weight: 700; letter-spacing: .04em;
text-transform: uppercase;
}
.rt-q-skip:hover { border-color: var(--red); color: var(--red); }
.rt-q-history { margin-top: 28px; }
.rt-q-history summary {
cursor: pointer; color: var(--txm); font-size: 12px; padding: 6px 0;
font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
}
.rt-q-recent-list { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; }
.rt-q-recent-row {
display: grid; grid-template-columns: 1fr 1.5fr; gap: 12px;
padding: 6px 10px; background: var(--surf2); border-radius: 4px;
font-size: 12px;
}
.rt-q-recent-meta { color: var(--txm); font-family: 'IBM Plex Mono', monospace; font-size: 11px; }
/* Routing — Placement view (entered from queue) */
.rt-placement-page { padding: 16px 28px; max-width: 1100px; }
.rt-back-link {
background: none; border: none; color: var(--blue); cursor: pointer;
font-family: 'IBM Plex Sans', sans-serif; font-size: 12px; font-weight: 600;
padding: 4px 0; margin-bottom: 8px;
}
.rt-back-link:hover { text-decoration: underline; }
/* ─── Map tab ─────────────────────────────────────────────────────── */
.mp-layout {
display: grid; grid-template-columns: 300px 1fr 0fr;
height: calc(100vh - 100px); overflow: hidden;
transition: grid-template-columns 200ms ease;
}
.mp-layout.is-focused { grid-template-columns: 300px 1fr 380px; }
.mp-sidebar {
background: var(--surf); border-right: 1px solid var(--bdr);
overflow-y: auto; padding: 14px 14px 24px;
}
.mp-side-section { margin-bottom: 18px; }
.mp-side-h {
display: flex; align-items: center; justify-content: space-between;
font-size: 11px; font-weight: 800; letter-spacing: .04em;
text-transform: uppercase; color: var(--txm); margin-bottom: 8px;
}
.mp-filter-row {
display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
}
.mp-filter-row label {
font-size: 11px; color: var(--txm); font-weight: 600; width: 60px;
}
.mp-filter-row select {
flex: 1 1 0; min-width: 0; max-width: 100%;
padding: 5px 7px; border: 1px solid var(--bdr2); border-radius: 4px;
font-family: 'IBM Plex Sans', sans-serif; font-size: 12px;
background: var(--surf2);
text-overflow: ellipsis;
}
.mp-stat { margin-top: 6px; font-size: 11px; color: var(--txm); }
.mp-filter-check {
display: flex; align-items: center; gap: 6px;
margin: 4px 0 2px; font-size: 12px; color: var(--tx);
cursor: pointer; user-select: none;
}
.mp-filter-check input { cursor: pointer; }
.mp-run-toggle { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--bdr2); }
.mp-run-toggle[hidden] { display: none; }
/* Find / highlight UI in the Map sidebar. Sits at the top so it's
always reachable; the workflow this serves ("find this kid, see
nearby runs") happens many times a morning when staff is short. */
.mp-find-row {
display: flex; align-items: stretch; gap: 4px;
position: relative;
}
.mp-find-row input[type=search] {
flex: 1; padding: 6px 8px; border: 1px solid var(--bdr2); border-radius: 4px;
font-family: 'IBM Plex Sans', sans-serif; font-size: 12px;
background: var(--surf2); color: var(--tx);
}
.mp-find-row input[type=search]:focus {
outline: none; border-color: var(--green); background: var(--surf);
}
.mp-find-clear {
flex-shrink: 0; width: 24px; padding: 0; cursor: pointer;
border: 1px solid var(--bdr2); border-radius: 4px;
background: var(--surf2); color: var(--txm); font-size: 12px;
}
.mp-find-clear:hover { background: var(--surf); color: var(--tx); }
.mp-find-dropdown {
margin-top: 4px;
border: 1px solid var(--bdr2); border-radius: 4px;
background: var(--surf); max-height: 260px; overflow-y: auto;
box-shadow: 0 2px 6px rgba(0,0,0,.08);
}
.mp-find-dropdown[hidden] { display: none; }
.mp-find-item {
display: block; width: 100%; text-align: left;
padding: 6px 8px; background: transparent; border: none; border-bottom: 1px solid var(--bdr2);
font-family: 'IBM Plex Sans', sans-serif; cursor: pointer;
}
.mp-find-item:last-child { border-bottom: none; }
.mp-find-item:hover { background: var(--surf2); }
.mp-find-item-name { font-size: 12px; font-weight: 600; color: var(--tx); }
.mp-find-item-sub { font-size: 10.5px; color: var(--txm); margin-top: 1px; }
.mp-find-item-geocode { background: var(--surf2); }
.mp-find-item-geocode .mp-find-item-name { color: var(--green); }
.mp-find-empty { padding: 8px; font-size: 11px; color: var(--txm); text-align: center; }
.mp-find-current {
margin-top: 6px; padding: 6px 8px;
background: rgba(255,31,143,.08);
border: 1px solid rgba(255,31,143,.35); border-left: 3px solid #FF1F8F;
border-radius: 4px; font-family: 'IBM Plex Sans', sans-serif;
}
.mp-find-current[hidden] { display: none; }
.mp-find-current-label { font-size: 12px; font-weight: 600; color: var(--tx); }
.mp-find-current-sub { font-size: 10.5px; color: var(--txm); margin-top: 1px; }
/* Base-map style toggle in the Modes section. Standard / Mono pair —
tiny pills so it doesn't dominate the sidebar. */
.mp-base-style {
display: flex; align-items: center; gap: 4px;
margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--bdr2);
}
.mp-base-style-lbl {
font-size: 10.5px; color: var(--txm); text-transform: uppercase;
letter-spacing: .04em; margin-right: 4px;
}
.mp-base-style-btn {
flex: 1; padding: 4px 6px; font-size: 11px;
border: 1px solid var(--bdr2); border-radius: 3px;
background: var(--surf2); color: var(--tx);
cursor: pointer; font-family: 'IBM Plex Sans', sans-serif;
}
.mp-base-style-btn:hover { background: var(--surf); }
.mp-base-style-btn.is-on {
background: var(--green); color: white; border-color: var(--green);
}
.mp-q-empty {
padding: 14px 6px; color: var(--txm); font-size: 12px; text-align: center;
background: var(--surf2); border-radius: 4px;
}
.mp-q-row {
padding: 8px 10px; border: 1px solid var(--bdr2); border-radius: 5px;
background: var(--surf); margin-bottom: 6px;
}
.mp-q-name { font-size: 13px; font-weight: 700; color: var(--tx); display: flex; align-items: center; gap: 6px; }
.mp-dir-badge {
font-size: 9px; font-weight: 800; letter-spacing: .05em;
padding: 1px 5px; border-radius: 3px; flex-shrink: 0;
}
.mp-dir-badge.is-am { background: rgba(67, 160, 71, .15); color: var(--green); border: 1px solid rgba(67, 160, 71, .35); }
.mp-dir-badge.is-pm { background: rgba(184, 134, 11, .15); color: var(--amber); border: 1px solid rgba(184, 134, 11, .35); }
.mp-q-reason { font-size: 11px; color: var(--blue); margin-top: 1px; }
.mp-q-school { font-size: 11px; color: var(--txm); margin-top: 1px; }
.mp-q-acts { display: flex; gap: 4px; margin-top: 6px; }
.mp-q-acts .btn { padding: 3px 8px; font-size: 10px; }
.mp-q-focus:hover { color: var(--blue); border-color: var(--blue); }
.mp-q-skip:hover { color: var(--red); border-color: var(--red); }
.mp-main { position: relative; display: flex; flex-direction: column; }
.mp-map-wrap { position: relative; flex: 1 1 auto; min-height: 0; }
.mp-map { width: 100%; height: 100%; }
.mp-actions {
position: absolute; top: 12px; right: 12px; z-index: 5;
display: flex; gap: 6px;
background: rgba(255, 255, 255, 0.95); border: 1px solid var(--bdr2);
border-radius: 6px; padding: 6px; box-shadow: 0 2px 8px rgba(0,0,0,.1);
}
.mp-action-btn {
padding: 7px 12px; font-size: 11px; font-weight: 700; letter-spacing: .04em;
text-transform: uppercase; cursor: pointer;
background: var(--surf); border: 1px solid var(--bdr2); border-radius: 4px;
color: var(--tx); font-family: 'IBM Plex Sans', sans-serif;
}
.mp-action-btn:hover { border-color: var(--blue); color: var(--blue); }
.mp-legend {
flex: 0 0 auto;
background: var(--surf); border-top: 1px solid var(--bdr);
padding: 6px 12px; display: flex; flex-wrap: wrap; gap: 12px;
font-size: 11px; color: var(--tx); max-height: 56px; overflow-y: auto;
}
.mp-legend-item { display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.mp-legend-dot {
width: 10px; height: 10px; border-radius: 50%;
border: 1px solid rgba(0,0,0,.2); display: inline-block;
}
/* Student / generic map dot. Tuned for contrast on Google Maps' base layer
(which mixes whites, greens, beige, and blues — a flat colored disc gets
washed out). The triple-layer effect — bright fill + white inner ring +
dark outer ring + drop shadow — gives every dot a "carved out" look that
reads at a glance against ANY background. Mirrors the Google My Maps
pin readability without the tall teardrop footprint. */
.mp-dot {
width: 10px; height: 10px; border-radius: 50%;
border: 1.75px solid #fff;
box-shadow:
0 0 0 1.25px rgba(0,0,0,.55), /* darker outer ring */
0 1px 3px rgba(0,0,0,.35); /* drop shadow lifts dot off the map */
cursor: pointer; transition: transform .08s ease-out;
}
.mp-dot:hover { transform: scale(1.45); }
/* Highlight overlay — used by the Find feature in the sidebar to mark
the student/address the dispatcher is solving for. Lives on top of
every other marker (z-index via element-side `style.zIndex`). The
pulsing ring is a separate ::before pseudo-element so it doesn't
distort the dot itself on hover/transform. */
.mp-pin-highlight {
position: relative;
width: 16px; height: 16px; border-radius: 50%;
background: #FF1F8F; /* hot pink — contrasts on every map color */
border: 2.5px solid #fff;
box-shadow:
0 0 0 1.5px rgba(0,0,0,.7),
0 2px 6px rgba(0,0,0,.45);
cursor: pointer;
}
.mp-pin-highlight::before {
content: '';
position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
width: 36px; height: 36px; border-radius: 50%;
border: 3px solid #FF1F8F;
opacity: .8;
animation: mp-pin-pulse 1.4s ease-out infinite;
pointer-events: none;
}
@keyframes mp-pin-pulse {
0% { transform: translate(-50%,-50%) scale(.6); opacity: .85; }
100% { transform: translate(-50%,-50%) scale(1.9); opacity: 0; }
}
/* Bottom-right OLD vs NEW comparison panel (shown on hover of a proposal card) */
.mp-compare {
position: absolute;
right: 12px;
bottom: 70px; /* keep clear of the school-color legend at the bottom */
width: 460px; max-height: 50vh;
background: rgba(255,255,255,0.97);
border: 1px solid var(--bdr2); border-radius: 8px;
box-shadow: 0 4px 14px rgba(0,0,0,.18);
z-index: 6; overflow-y: auto;
font-family: 'IBM Plex Sans', sans-serif;
}
.mp-compare[hidden] { display: none; }
.mp-compare-h {
padding: 8px 12px; border-bottom: 1px solid var(--bdr);
background: var(--surf2);
}
.mp-compare-title { font-size: 13px; font-weight: 700; color: var(--tx); }
.mp-compare-sub { font-size: 11px; color: var(--txm); margin-top: 1px; }
.mp-compare-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.mp-compare-col { border-right: 1px solid var(--bdr); }
.mp-compare-col:last-child { border-right: none; }
.mp-compare-col-h {
padding: 5px 10px; font-size: 10px; font-weight: 800; letter-spacing: .06em;
text-transform: uppercase; color: white;
}
.mp-compare-col-h.is-old { background: #C62828; }
.mp-compare-col-h.is-new { background: #1565C0; }
.mp-compare-rows {}
.mp-compare-row {
display: grid; grid-template-columns: 70px 1fr; gap: 8px;
padding: 3px 10px; font-size: 11px;
border-bottom: 1px solid rgba(0,0,0,.05);
}
.mp-compare-row.is-anchor { background: rgba(0,0,0,.03); font-weight: 600; }
.mp-compare-row.is-new { background: rgba(21, 101, 192, .08); font-weight: 700; }
.mp-compare-time {
font-family: 'IBM Plex Mono', monospace; color: var(--tx); white-space: nowrap;
}
.mp-compare-label { color: var(--tx); }
.mp-compare-tag {
display: inline-block; background: #1565C0; color: white;
font-size: 9px; font-weight: 800; padding: 1px 5px;
border-radius: 3px; margin-right: 5px; letter-spacing: .04em;
}
.mp-anchor {
display: flex; align-items: center; justify-content: center;
width: 22px; height: 22px; border-radius: 4px;
background: rgba(255,255,255,.95);
border: 2px solid #1565C0; color: #1565C0;
font-family: 'IBM Plex Sans', sans-serif; font-size: 12px; font-weight: 800;
letter-spacing: 0; box-shadow: 0 1px 3px rgba(0,0,0,.25);
pointer-events: auto; cursor: pointer;
}
.mp-anchor-depot {
background: #1565C0; color: #fff; border-color: #0D47A1;
width: 26px; height: 26px; font-size: 14px;
}
.mp-anchor-school { /* border-color set inline per school's palette */ }
/* Mode buttons (Student / Bus / Route) — pick one. Live in the sidebar
under Filters. Active mode gets the green-on-white treatment that the
rest of the toolbar pills use. */
.mp-mode-stack, .mp-routing-stack {
display: flex; flex-direction: column; gap: 4px;
margin-top: 4px;
}
.mp-mode-btn, .mp-routing-btn {
text-align: left;
padding: 6px 10px;
font-family: 'IBM Plex Sans', sans-serif;
font-size: 12px; font-weight: 600;
background: var(--surf2, #fff); color: var(--tx, #1e293b);
border: 1px solid var(--bdr, #cbd5e1); border-radius: 4px;
cursor: pointer;
transition: all .12s;
}
.mp-mode-btn:hover, .mp-routing-btn:hover {
border-color: var(--blue, #3b82f6); color: var(--blue, #3b82f6);
}
.mp-mode-btn.is-on {
background: var(--green, #16a34a); color: #fff; border-color: var(--green, #16a34a);
}
.mp-mode-foot {
display: flex; align-items: center; gap: 6px;
margin-top: 6px; min-height: 18px;
}
.mp-mode-stamp {
flex: 1;
font-size: 10px; color: var(--txm, #64748b);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mp-mode-stamp.mp-layers-err { color: #b91c1c; font-weight: 600; }
.mp-mode-refresh {
font-size: 13px; line-height: 1;
padding: 2px 7px;
background: #fff; border: 1px solid #cbd5e1; border-radius: 3px;
cursor: pointer; color: #334155;
}
.mp-mode-refresh:hover { background: #f1f5f9; }
.mp-side-subh {
display: flex; align-items: center; justify-content: space-between;
margin-top: 10px;
font-size: 11px; font-weight: 700; letter-spacing: .08em;
text-transform: uppercase; color: var(--txm, #64748b);
}
/* ─── Build Routes — combo origin chip + pill ───────────────────────── */
.mp-build-anchor-chip.mp-build-anchor-origin {
background: #faf5ff; border: 1px solid #7c3aed; color: #7c3aed;
padding: 2px 7px; border-radius: 3px; font-size: 11px; font-weight: 600;
display: inline-block;
}
.mp-build-combo-pill {
display: inline-block; margin-left: 6px;
padding: 1px 6px; border-radius: 9px;
background: #f3e8ff; color: #6d28d9;
font-size: 10px; font-weight: 600; vertical-align: middle;
}
/* ─── Build Routes — Optimize-changes button + dirty pill ─────────────── */
.mp-build-dirty-pill {
display: inline-block; margin-left: 8px;
padding: 1px 7px; border-radius: 10px;
background: var(--amber, #b8881e); color: #fff;
font-size: 10px; font-weight: 600; vertical-align: middle;
}
.mp-build-opt-row { margin: 6px 0 10px; }
.mp-build-opt-btn {
background: var(--amber, #b8881e); color: #fff; border-color: var(--amber, #b8881e);
font-weight: 600;
}
.mp-build-opt-btn:hover { background: #a07212; border-color: #a07212; }
/* ─── Combo origin pool panel (Build Routes) ─────────────────────────── */
.mp-combo-step { padding: 10px 12px; background: #fbfaf6; border: 1px solid var(--bdr, #e5e7eb); border-radius: 5px; margin-bottom: 10px; }
.mp-combo-list { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.mp-combo-row {
display: grid; grid-template-columns: 1fr auto auto;
gap: 10px; align-items: center;
padding: 5px 8px; font-size: 12px;
background: var(--surf2); border-radius: 4px;
}
.mp-combo-label { font-weight: 600; color: var(--txp); }
.mp-combo-bell { color: var(--txm, #666); font-variant-numeric: tabular-nums; }
.mp-combo-stats { color: var(--txm, #666); font-size: 11px; }
.mp-combo-stats b { color: var(--green, #2f8645); }
.mp-combo-toggle {
display: flex; align-items: center; gap: 6px; padding-top: 6px;
border-top: 1px dashed var(--bdr, #e5e7eb);
font-size: 12px; color: var(--txp); cursor: pointer; user-select: none;
}
.mp-combo-toggle input { cursor: pointer; }
/* ─── Routing-progress panel (TO / FROM counter + drilldown) ─────────── */
.mp-prog { margin-top: 6px; font-size: 12px; color: var(--txp, #1c1814); }
.mp-prog-row {
background: #f7f5f1;
border: 1px solid var(--bdr, #e5e7eb);
border-radius: 5px;
margin-bottom: 6px;
overflow: hidden;
}
.mp-prog-row.is-open { background: #fff; }
.mp-prog-head {
display: flex; align-items: center; gap: 8px;
width: 100%; padding: 7px 10px;
background: transparent; border: 0; cursor: pointer;
font: inherit; color: inherit; text-align: left;
}
.mp-prog-head:hover { background: #efeae3; }
.mp-prog-label { font-weight: 600; min-width: 80px; }
.mp-prog-stats { flex: 1; color: var(--txm, #555); font-size: 11px; }
.mp-prog-stats b { color: var(--txp, #1c1814); }
.mp-prog-chev { font-size: 10px; color: var(--txm, #888); }
.mp-prog-bar {
height: 3px; background: rgba(0,0,0,.06); position: relative; margin: 0 10px 6px;
}
.mp-prog-bar > span {
display: block; height: 100%; background: var(--green, #2f8645); transition: width 0.2s ease;
}
.mp-prog-detail { padding: 4px 10px 10px; border-top: 1px dashed var(--bdr, #e5e7eb); }
.mp-prog-line {
display: grid; grid-template-columns: 1fr auto auto auto;
gap: 8px; padding: 5px 4px; font-size: 11px;
border-bottom: 1px dotted rgba(0,0,0,.06);
background: transparent; border-left: 0; border-right: 0; border-top: 0;
width: 100%; text-align: left; cursor: pointer;
font: inherit; color: inherit;
}
.mp-prog-line:hover { background: #f8f5ef; }
.mp-prog-line:last-of-type { border-bottom: 0; }
.mp-prog-line-school { color: var(--txp); }
.mp-prog-line-bell { color: var(--txm, #666); font-variant-numeric: tabular-nums; }
.mp-prog-line-n { font-weight: 600; color: var(--red, #b94335); min-width: 18px; text-align: right; }
.mp-prog-line-chev { font-size: 9px; color: var(--txm, #888); align-self: center; }
.mp-prog-students {
padding: 2px 0 6px 12px;
border-left: 2px solid var(--red, #b94335);
margin: 0 4px 6px 4px; background: rgba(185,67,53,0.05);
}
.mp-prog-student {
display: flex; justify-content: space-between; align-items: center;
padding: 2px 6px; font-size: 11px;
}
.mp-prog-student-name { color: var(--txp); }
.mp-prog-student-id { color: var(--txm, #888); font-size: 10px; font-variant-numeric: tabular-nums; }
/* ─── Buses-on-road histogram (replaces routing-queue panel) ──────────── */
.mp-load-hist {
margin-top: 6px;
font-size: 12px;
color: var(--txp, #1c1814);
}
.mp-load-head {
padding: 8px 10px;
background: #f7f5f1;
border: 1px solid var(--bdr, #e5e7eb);
border-radius: 5px;
color: var(--txm, #64748b);
font-size: 11px;
margin-bottom: 8px;
}
.mp-load-head b { color: var(--txp, #1c1814); font-size: 12.5px; }
.mp-load-list {
display: flex;
flex-direction: column;
gap: 4px;
}
.mp-load-block {
border: 1px solid transparent;
border-radius: 5px;
}
.mp-load-block.is-expanded {
border-color: var(--bdr, #e5e7eb);
background: #fcfbf8;
}
/* Single-row clickable button: hour label · bar · Peak · Starts · caret.
Grid lets the bar grow to fill remaining width; the two number columns
and caret stay pinned right. */
.mp-load-row {
display: grid;
grid-template-columns: 36px 1fr 32px 32px 14px;
column-gap: 8px;
align-items: center;
width: 100%;
padding: 8px 10px;
background: transparent;
border: 0;
border-radius: 5px;
cursor: pointer;
font: inherit;
color: inherit;
text-align: left;
}
/* Header row uses the same column template as data rows, so headings
line up over Peak / Starts. */
.mp-load-header {
display: grid;
grid-template-columns: 36px 1fr 32px 32px 14px;
column-gap: 8px;
align-items: center;
padding: 0 10px 4px;
border-bottom: 1px solid var(--bdr, #e5e7eb);
margin-bottom: 4px;
}
.mp-load-thead {
text-align: right;
font-size: 9.5px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--txm, #64748b);
}
.mp-load-row:hover:not(:disabled) { background: #f1efe9; }
.mp-load-row:disabled { cursor: default; opacity: .55; }
.mp-load-block.is-expanded > .mp-load-row { background: transparent; }
.mp-load-hr {
font-variant-numeric: tabular-nums;
text-align: right;
color: var(--txm, #64748b);
font-size: 11.5px;
font-weight: 600;
}
.mp-load-bar {
height: 16px;
background: #f1efe9;
border-radius: 3px;
overflow: hidden;
display: block;
}
.mp-load-bar-fill {
display: block;
height: 100%;
background: #2D5F3F; /* Astra green */
transition: width 120ms ease-out;
}
.mp-load-bar-fill.is-over { background: #A73027; } /* red when over fleet */
.mp-load-num {
font-variant-numeric: tabular-nums;
text-align: right;
font-weight: 700;
font-size: 12px;
}
/* Secondary number (starts) — same weight, lighter color so the eye lands
on Peak first. */
.mp-load-num.is-starts { color: var(--txm, #64748b); font-weight: 600; }
.mp-load-caret {
text-align: center;
color: var(--txm, #64748b);
font-size: 10px;
}
.mp-load-foot {
margin-top: 8px;
color: var(--txm, #64748b);
font-size: 10.5px;
line-height: 1.4;
}
.mp-load-empty {
padding: 12px 10px;
color: var(--txm, #64748b);
font-size: 11.5px;
line-height: 1.4;
}
/* Drilldown — schools contributing to the clicked hour. Indented under
the row, single-column list of "School · AM N · PM N" pills. */
.mp-load-drill {
padding: 4px 10px 10px;
display: flex;
flex-direction: column;
gap: 4px;
}
.mp-load-drill-head {
font-size: 10.5px;
color: var(--txm, #64748b);
text-transform: uppercase;
letter-spacing: .06em;
margin-bottom: 4px;
}
.mp-load-drill-empty {
padding: 4px 10px 10px;
color: var(--txm, #64748b);
font-size: 11px;
}
.mp-load-drill-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 6px;
font-size: 11.5px;
}
.mp-load-drill-name {
flex: 1 1 auto;
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.mp-load-drill-split {
display: flex;
gap: 4px;
flex: 0 0 auto;
}
.mp-load-pill {
display: inline-block;
padding: 1px 6px;
border-radius: 9px;
font-size: 10.5px;
font-weight: 600;
font-variant-numeric: tabular-nums;
}
.mp-load-pill.is-am { background: #E3F2FD; color: #1565C0; }
.mp-load-pill.is-pm { background: #FFF3E0; color: #B85700; }
/* Bus-view dim treatment for student dots — visible but recessed so the
bus pills and route highlights pop. */
.mp-dot.mp-dot-bus-dim:not(.mp-dot-route) { opacity: .35; }
/* Live bus marker — pill-shaped so it doesn't blend with the square depot/
school anchors. Color signals freshness + ignition: live & ignition-on =
bright orange (the bus is moving), live & ignition-off = orange outline,
stale = muted grey, cold = greyed out. */
.mp-bus {
display: flex; align-items: center; justify-content: center;
min-width: 30px; height: 22px; padding: 0 7px;
border-radius: 11px;
background: #fff;
border: 2px solid #C2410C;
color: #9A3412;
font-family: 'IBM Plex Mono', monospace;
font-size: 11px; font-weight: 800; letter-spacing: -.02em;
box-shadow: 0 1px 3px rgba(0,0,0,.30);
pointer-events: auto; cursor: pointer;
white-space: nowrap;
}
.mp-bus:hover { transform: scale(1.10); transition: transform .12s; }
.mp-bus.mp-bus-on {
background: #F97316; color: #fff; border-color: #C2410C;
}
.mp-bus.mp-bus-stale {
border-color: #94A3B8; color: #64748B;
box-shadow: 0 1px 2px rgba(0,0,0,.20);
}
.mp-bus.mp-bus-stale.mp-bus-on { background: #94A3B8; color: #fff; }
.mp-bus.mp-bus-cold {
border-color: #CBD5E1; color: #94A3B8;
background: #F8FAFC;
opacity: .8;
}
/* Route-progress colors when a bus is on an active run. Mirrors the manager
board's get_board_status() color palette so dispatchers see the same
meaning across views. */
.mp-bus.mp-bus-status-green { background: #16A34A; color: #fff; border-color: #166534; }
.mp-bus.mp-bus-status-amber { background: #D97706; color: #fff; border-color: #92400E; }
.mp-bus.mp-bus-status-red { background: #DC2626; color: #fff; border-color: #7F1D1D; }
.mp-bus.mp-bus-status-grey { background: #94A3B8; color: #fff; border-color: #475569; }
/* Student-marker states that go with a selected bus's route. Highlight
the on-route students; dim others to make the active route pop. */
.mp-dot.mp-dot-route {
/* Numbered pill — bigger than the plain dot so the stop_order is legible.
Visited vs pending color comes from the .mp-dot-visited/.mp-dot-pending
modifiers below. */
width: 22px; height: 22px;
display: flex; align-items: center; justify-content: center;
font-family: 'IBM Plex Sans', sans-serif; font-size: 11px; font-weight: 800;
color: #fff;
border: 2px solid #fff;
box-shadow: 0 0 0 1px rgba(0,0,0,.35), 0 2px 4px rgba(0,0,0,.25);
z-index: 5;
}
.mp-dot.mp-dot-pending {
/* Not yet visited — bright red so the dispatcher knows pickup pending. */
background: #DC2626 !important;
}
.mp-dot.mp-dot-visited {
/* Already picked up — green-tinted with a check overlay. */
background: #16A34A !important;
opacity: .85;
}
.mp-dot.mp-dot-visited::after {
content: '✓';
position: absolute;
font-size: 10px;
margin-left: 14px;
margin-top: -14px;
color: #16A34A;
background: #fff;
border-radius: 50%;
width: 12px; height: 12px;
display: flex; align-items: center; justify-content: center;
box-shadow: 0 1px 2px rgba(0,0,0,.3);
}
.mp-dot.mp-dot-dim {
opacity: .22;
}
/* Muted bus pill — applied to every bus EXCEPT the currently-selected one
while a route is up so the map reads cleanly. */
.mp-bus.mp-bus-muted {
opacity: .25 !important;
filter: grayscale(.6);
transform: scale(.85);
z-index: 1;
}
/* Bus click popup — adds a status banner + driver/school/stops grid. */
.mp-popup.mp-popup-bus { min-width: 220px; }
.mp-popup-status {
margin-top: 6px;
padding: 5px 8px;
border-radius: 4px;
font-size: 12px;
color: #fff;
}
.mp-popup-status-green { background: #16A34A; }
.mp-popup-status-amber { background: #D97706; }
.mp-popup-status-red { background: #DC2626; }
.mp-popup-status-grey { background: #64748b; }
.mp-popup-rowset {
margin-top: 6px;
border-top: 1px solid #e2e8f0;
padding-top: 6px;
}
.mp-popup-row {
display: flex; justify-content: space-between;
font-size: 12px; padding: 1px 0;
}
.mp-popup-row span { color: #64748b; }
.mp-popup-row strong { color: #1e293b; font-weight: 600; }
.mp-popup-tag {
display: inline-block; margin-left: 5px;
font-family: 'IBM Plex Mono', monospace; font-size: 9px; font-weight: 800;
letter-spacing: .04em; text-transform: uppercase;
padding: 1px 5px; border-radius: 999px;
vertical-align: middle;
}
.mp-popup-tag-motive { background: #FCD34D; color: #78350f; }
/* Scheduled-vs-actual time rows + trending verdict line. */
.mp-popup-row-time strong {
font-family: 'IBM Plex Mono', monospace;
font-size: 12px;
}
.mp-popup-actual { margin-left: 4px; color: #475569; font-weight: 600; }
.mp-popup-actual em {
font-style: normal; color: #64748b; font-size: 10px;
}
.mp-popup-pending { color: #94a3b8; font-style: italic; font-weight: 500; }
.mp-popup-row-trend strong { font-weight: 700; }
.mp-trend-good { color: #16a34a; }
.mp-trend-ok { color: #ca8a04; }
.mp-trend-warn { color: #ea580c; }
.mp-trend-bad { color: #dc2626; }
.mp-popup-times-sm {
margin-top: 6px;
font-size: 11px;
color: #94a3b8;
}
.mp-popup-loading { color: #64748b; font-style: italic; }
.mp-popup-err { color: #b91c1c; }
.mp-dot-new {
width: 16px; height: 16px; background: #1565C0 !important;
box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(21, 101, 192, .5);
animation: mpDotPulse 1.2s ease-in-out infinite;
}
/* Focus marker: the small dot stays anchored at the lat/lng; an absolutely-
* positioned label box floats to the right with a leader line, so the
* label doesn't cover the map under the marker. */
.mp-focus-wrap {
position: relative;
width: 16px; height: 16px;
/* AdvancedMarkerElement anchors at bottom-center of content. The label
* being absolutely positioned doesn't expand the bounding box's flow,
* so the dot keeps its true position over the lat/lng. */
}
.mp-focus-label {
position: absolute;
left: 28px;
top: 50%;
transform: translateY(-50%);
background: #ffffff;
border: 1.5px solid #1565C0;
border-radius: 6px;
padding: 6px 10px;
white-space: nowrap;
box-shadow: 0 3px 10px rgba(0, 0, 0, .15);
font-family: 'IBM Plex Sans', sans-serif;
line-height: 1.4;
}
.mp-focus-label::before {
/* Leader line from the dot's right edge to the label's left edge. */
content: '';
position: absolute;
left: -14px;
top: 50%;
width: 14px; height: 2px;
background: #1565C0;
transform: translateY(-50%);
}
.mp-focus-name { font-size: 12px; font-weight: 700; color: var(--tx); }
.mp-focus-meta { font-size: 11px; color: var(--txm); }
.mp-focus-needs { font-size: 11px; color: var(--amber); font-weight: 600; margin-top: 2px; }
@keyframes mpDotPulse {
0%, 100% { box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(21, 101, 192, .5); }
50% { box-shadow: 0 0 0 2px #fff, 0 0 0 8px rgba(21, 101, 192, .2); }
}
/* Right-side Proposals panel */
.mp-proposals {
background: var(--surf); border-left: 1px solid var(--bdr);
overflow-y: auto; overflow-x: hidden;
}
.mp-proposals[hidden] { display: none; }
.mp-pr-header {
display: flex; align-items: center; justify-content: space-between;
padding: 14px 14px 6px; border-bottom: 1px solid var(--bdr);
}
.mp-pr-title { font-size: 14px; font-weight: 700; color: var(--tx); letter-spacing: .03em; text-transform: uppercase; }
.mp-pr-close {
padding: 0 8px; font-size: 18px; line-height: 1; min-width: 28px;
}
.mp-pr-sub {
padding: 8px 14px 12px; font-size: 12px; color: var(--txm);
border-bottom: 1px solid var(--bdr); background: var(--surf2);
}
.mp-pr-sub b { color: var(--tx); }
.mp-pr-body { padding: 10px 12px 24px; }
.mp-pr-list { display: flex; flex-direction: column; gap: 8px; }
.mp-pr-card {
display: grid; grid-template-columns: 28px 1fr; gap: 8px;
padding: 10px 11px; background: var(--surf); border: 1px solid var(--bdr2);
border-radius: 5px; cursor: default; transition: border-color .1s, box-shadow .1s;
}
.mp-pr-card:hover { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue); }
.mp-pr-rank { font-size: 16px; font-weight: 800; color: var(--blue); }
.mp-pr-card-h {
display: flex; align-items: baseline; gap: 8px; margin-bottom: 2px;
}
.mp-pr-run { font-size: 14px; font-weight: 700; color: var(--tx); }
.mp-pr-bus { font-size: 11px; color: var(--txm); }
.mp-pr-asn { font-size: 11px; color: var(--txm); margin-bottom: 8px; }
.mp-pr-metrics {
display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; font-size: 11px;
}
.mp-pr-metrics .lbl { color: var(--txm); margin-right: 4px; }
.mp-pr-metrics .val { color: var(--tx); }
.mp-pr-metrics .val b { color: var(--green); }
.mp-pr-metrics .val.is-over { color: var(--red); font-weight: 700; }
.mp-pr-place-btn {
display: block; width: 100%; margin-top: 10px;
padding: 7px 10px; font-size: 11px; font-weight: 700;
letter-spacing: .04em; text-transform: uppercase;
background: var(--green); color: white; border-color: var(--green);
}
.mp-pr-place-btn:hover:not(:disabled) { filter: brightness(1.1); }
.mp-pr-place-btn:disabled { opacity: .5; cursor: default; }
.mp-adj-picked { margin: 14px 0 10px; font-size: 13px; color: var(--tx); }
.mp-adj-dir-btns { display: flex; gap: 8px; }
/* TAF form */
.mp-taf-editing-banner {
display: flex; align-items: center; justify-content: space-between;
padding: 8px 10px; margin-bottom: 10px;
background: rgba(21, 101, 192, .08); border: 1px solid rgba(21, 101, 192, .3);
border-radius: 4px; font-size: 12px; color: var(--tx);
}
.mp-taf-fs {
border: 1px solid var(--bdr); border-radius: 5px; padding: 8px 10px 4px;
margin: 0 0 10px; background: var(--surf);
}
.mp-taf-fs legend {
font-size: 10px; font-weight: 800; text-transform: uppercase;
letter-spacing: .05em; color: var(--blue); padding: 0 6px;
}
.mp-taf-field { display: flex; flex-direction: column; gap: 2px; margin: 4px 0; }
.mp-taf-lbl { font-size: 10px; color: var(--txm); text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
.mp-taf-field input, .mp-taf-field select {
padding: 5px 7px; border: 1px solid var(--bdr2); border-radius: 3px;
font-family: 'IBM Plex Sans', sans-serif; font-size: 12px;
background: var(--surf2);
}
.mp-taf-field input:focus, .mp-taf-field select:focus { outline: none; border-color: var(--blue); background: var(--surf); }
.mp-taf-checks { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 4px; }
.mp-taf-hint {
font-size: 11px; color: var(--txm); line-height: 1.5;
margin: 6px 0 10px;
padding: 8px 10px; background: var(--surf2); border-left: 2px solid var(--bdr2);
border-radius: 3px;
}
.mp-taf-hint em { font-style: normal; color: var(--tx); font-weight: 600; }
.mp-taf-check { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--tx); cursor: pointer; }
.mp-taf-addr { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin: 4px 0; }
.mp-taf-addr input { padding: 5px 7px; border: 1px solid var(--bdr2); border-radius: 3px; font-size: 12px; background: var(--surf2); flex: 1; min-width: 80px; }
.mp-taf-validate { padding: 5px 9px; font-size: 11px; }
.mp-taf-validated { font-size: 10px; color: var(--green); padding: 2px 0 4px; font-family: 'IBM Plex Mono', monospace; }
.mp-taf-checkrow {
display: flex; align-items: center; gap: 6px;
margin-top: 6px; padding: 4px 0;
font-size: 12.5px; color: var(--tx); cursor: pointer;
}
.mp-taf-checkrow input { cursor: pointer; }
.mp-taf-checkrow:hover span { color: var(--green); }
.mp-taf-submit { margin-top: 12px; }
.mp-taf-msg { margin-top: 8px; font-size: 12px; }
.mp-taf-search { padding: 4px 0; }
.taf-wrap { max-width: 720px; margin: 0 auto; padding: 8px; }
/* Build Routes mode */
.mp-build-step { margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--bdr); }
.mp-build-step:last-child { border-bottom: none; }
.mp-build-h { font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--blue); margin-bottom: 6px; }
.mp-build-hint { font-size: 11px; color: var(--txm); margin-bottom: 6px; }
.mp-build-selection { font-size: 12px; color: var(--tx); padding: 6px 8px; background: var(--surf2); border-radius: 4px; }
.mp-build-constraints { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; margin-bottom: 10px; }
.mp-build-constraints label { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--txm); }
.mp-build-constraints input { width: 64px; padding: 4px 6px; border: 1px solid var(--bdr2); border-radius: 3px; font-size: 12px; }
.mp-build-route-card { padding: 8px 10px; margin: 6px 0; background: var(--surf); border: 1px solid var(--bdr2); border-left-width: 4px; border-radius: 4px; }
.mp-build-route-h { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.mp-build-route-h span:not(.mp-build-color) { font-size: 12px; font-weight: 700; color: var(--tx); }
.mp-build-color { width: 12px; height: 12px; border-radius: 50%; border: 1px solid rgba(0,0,0,.2); }
.mp-build-route-stats { font-size: 11px !important; color: var(--txm) !important; font-weight: normal !important; flex: 1; }
.mp-build-route-stops { margin-top: 6px; line-height: 1.7; }
.mp-build-stop { display: inline-flex; align-items: center; padding: 2px 7px; border-radius: 3px; background: var(--surf2); font-size: 11px; cursor: pointer; border: 1px solid transparent; }
.mp-build-stop:hover { border-color: var(--blue); }
.mp-build-stop.is-moving { background: var(--blue); color: white; border-color: var(--blue); }
.mp-build-stop-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 4px; flex-shrink: 0; vertical-align: middle; }
.mp-build-move-target { padding: 3px 8px; font-size: 10px; background: var(--green); color: white; border-color: var(--green); }
.mp-build-save-row { margin-top: 12px; }
.mp-build-save-hint { font-size: 11px; color: var(--amber); margin-top: 4px; }
.mp-build-sel-dot {
width: 14px; height: 14px; border-radius: 50%; background: #1565C0;
border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(21, 101, 192, .8);
}
.mp-build-route-dot {
width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid #fff;
box-shadow: 0 0 0 1px rgba(0, 0, 0, .25);
}
.mp-build-traffic {
display: flex; align-items: center; gap: 8px;
padding: 8px 10px;
background: #fcfbf8;
border: 1px solid var(--bdr, #e5e7eb);
border-radius: 5px;
font-size: 12px;
margin-bottom: 8px;
cursor: pointer;
}
.mp-build-traffic input { margin: 0; }
.mp-build-traffic-hint {
color: var(--txm, #64748b);
font-size: 10.5px;
margin-left: auto;
}
.mp-build-traffic-hint b {
color: var(--txp, #1c1814);
text-transform: uppercase;
letter-spacing: .04em;
}
.mp-build-modes { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0; }
.mp-build-step.is-mode { background: rgba(21, 101, 192, .06); border-radius: 4px; padding: 8px 10px; }
.mp-build-click-list { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.mp-build-stop-x {
background: none; border: none; color: var(--txm); cursor: pointer;
font-size: 12px; padding: 0 2px;
}
.mp-build-stop-x:hover { color: var(--red); }
.mp-build-anchor-chip {
display: inline-block; padding: 2px 7px; border-radius: 3px;
font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
border: 1px solid;
}
.mp-build-anchor-depot { background: #1565C0; color: #fff; border-color: #0D47A1; }
.mp-build-anchor-school { background: #fff; color: var(--tx); }
.mp-build-arrow { color: var(--txm); font-size: 11px; }
.mp-build-unrouted {
margin: 0 0 12px;
background: color-mix(in srgb, var(--amber) 14%, var(--surf));
border: 1px solid color-mix(in srgb, var(--amber) 55%, transparent);
border-radius: 6px;
padding: 8px 10px;
}
.mp-build-unrouted summary {
cursor: pointer; font-size: 13px; color: var(--tx);
padding: 2px 0; list-style: none;
display: flex; align-items: center; gap: 6px;
}
.mp-build-unrouted summary::-webkit-details-marker { display: none; }
.mp-build-unrouted summary b { color: var(--tx); }
.mp-build-unrouted summary:hover { color: var(--red); }
.mp-build-unrouted-badge {
display: inline-flex; align-items: center; justify-content: center;
width: 18px; height: 18px; border-radius: 50%;
background: var(--amber); color: #fff;
font-size: 11px; font-weight: 700;
}
.mp-build-unrouted-group { margin: 10px 0 4px; }
.mp-build-unrouted-reason {
font-size: 11px; color: var(--txm); font-weight: 600;
text-transform: uppercase; letter-spacing: .04em;
margin-bottom: 4px;
}
.mp-build-unrouted-list { display: flex; flex-wrap: wrap; gap: 3px; }
.mp-build-filter-readout {
background: var(--surf2); border: 1px solid var(--bdr); border-radius: 4px;
padding: 6px 10px; margin-bottom: 8px; font-size: 12px; color: var(--tx);
}
.mp-build-filter-readout > div { padding: 1px 0; }
.mp-build-readout-lbl {
display: inline-block; width: 60px; font-size: 10px; font-weight: 600;
color: var(--txm); text-transform: uppercase; letter-spacing: .04em;
}
.mp-build-route-card { cursor: pointer; transition: border-color .1s, box-shadow .1s; }
.mp-build-route-card:hover { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue); }
.mp-build-summary {
padding: 10px 12px; margin: 6px 0 10px;
background: var(--surf2); border: 1px solid var(--bdr); border-radius: 5px;
}
.mp-build-summary-row {
display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px;
padding-bottom: 8px; border-bottom: 1px solid var(--bdr);
}
.mp-build-summary-stat .lbl { font-size: 10px; color: var(--txm); text-transform: uppercase; letter-spacing: .04em; font-weight: 700; }
.mp-build-summary-stat .val { font-size: 14px; color: var(--tx); margin-top: 2px; }
.mp-build-hist-title {
font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
color: var(--txm); margin: 8px 0 4px;
}
.mp-build-hist { display: flex; flex-direction: column; gap: 2px; }
.mp-build-hist-row {
display: grid; grid-template-columns: 32px 1fr 24px; align-items: center; gap: 8px;
font-size: 11px;
}
.mp-build-hist-label { color: var(--txm); font-family: 'IBM Plex Mono', monospace; text-align: right; }
.mp-build-hist-count { color: var(--tx); font-family: 'IBM Plex Mono', monospace; }
.mp-build-hist-bar {
display: block; height: 10px; background: rgba(0,0,0,.04); border-radius: 2px; overflow: hidden;
}
.mp-build-hist-bar > span {
display: block; height: 100%; background: var(--blue); transition: width .2s;
}
.mp-popup { font-family: 'IBM Plex Sans', sans-serif; min-width: 200px; max-width: 280px; }
.mp-popup-name { font-size: 14px; font-weight: 700; color: var(--tx); }
.mp-popup-school { font-size: 12px; color: var(--txm); margin-top: 2px; }
.mp-popup-addr { font-size: 11px; color: var(--txm); margin-top: 4px; font-family: 'IBM Plex Mono', monospace; }
.mp-popup-needs { font-size: 11px; color: var(--amber); margin-top: 6px; font-weight: 600; }
.mp-popup-times { font-size: 11px; color: var(--tx); margin-top: 6px; }
/* ═══════════════════════════════════════════════════════════════════════
* Substitutions / Coverage Worksheet
* ─ One row per absent employee · per-slot cells · click to assign sub
* ═══════════════════════════════════════════════════════════════════════ */
.subs-wrap { padding: 16px 24px 32px; }
/* ── header ────────────────────────────────────────────────────────────── */
.subs-header {
display: flex; align-items: flex-end; justify-content: space-between; gap: 24px;
padding-bottom: 12px; margin-bottom: 12px;
border-bottom: 1px solid var(--ln);
}
.subs-title { font-size: 22px; font-weight: 700; color: var(--tx); }
.subs-subtitle { font-size: 13px; color: var(--txm); margin-top: 2px; }
.subs-counts { display: flex; align-items: center; gap: 18px; }
.subs-count-tile, .subs-countdown { text-align: center; min-width: 56px; }
.subs-count-tile .n, .subs-countdown .n { font-size: 26px; font-weight: 700; line-height: 1; color: var(--tx); }
.subs-count-tile .n.alarm { color: var(--red); }
.subs-count-tile .n.warn { color: var(--amber); }
.subs-count-tile .n.good { color: var(--green); }
.subs-count-tile .lbl, .subs-countdown .lbl {
font-size: 11px; color: var(--txm); letter-spacing: .06em; margin-top: 2px;
text-transform: uppercase;
}
.subs-countdown { padding-left: 18px; border-left: 1px solid var(--ln); }
/* ── filter bar ────────────────────────────────────────────────────────── */
.subs-filterbar {
display: flex; align-items: center; gap: 10px; padding: 10px 0;
margin-bottom: 12px; border-bottom: 1px solid var(--ln);
}
.subs-filter-lbl { font-size: 12px; color: var(--txm); }
.subs-chip {
padding: 4px 11px; font-size: 12px; font-weight: 600;
border: 1px solid var(--ln); border-radius: 99px;
background: #fff; color: var(--tx); cursor: pointer;
}
.subs-chip.alarm { border-color: var(--red); color: var(--red); }
.subs-chip.warn { border-color: var(--amber); color: var(--amber); }
.subs-chip.is-on { background: var(--tx); color: #fff; border-color: var(--tx); }
.subs-chip.alarm.is-on { background: var(--red); border-color: var(--red); }
.subs-chip.warn.is-on { background: var(--amber); border-color: var(--amber); }
.subs-filter-hint { margin-left: auto; font-size: 11px; color: var(--txm); font-family: 'IBM Plex Mono', monospace; }
/* ── table ─────────────────────────────────────────────────────────────── */
.subs-table {
background: #fff; border: 1px solid var(--ln); border-radius: 6px; overflow: hidden;
}
.subs-thead, .subs-row {
display: grid;
grid-template-columns: 40px 1.7fr 60px 1.7fr 90px 1.3fr 1.3fr 1.3fr 110px;
}
.subs-thead {
background: var(--bg-soft); border-bottom: 1px solid var(--ln);
font-size: 10px; font-weight: 700; color: var(--txm);
letter-spacing: .08em; text-transform: uppercase;
}
.subs-thead > div { padding: 9px 10px; border-right: 1px solid var(--ln); }
.subs-thead > div:last-child { border-right: 0; }
.subs-row { border-bottom: 1px solid var(--ln); background: #fff; }
.subs-row.is-alt { background: #fbfaf6; }
.subs-row > div { border-right: 1px solid var(--ln); }
.subs-row > div:last-child { border-right: 0; }
.subs-cell-num { padding: 12px 10px; font-size: 12px; color: var(--txm); font-family: 'IBM Plex Mono', monospace; }
.subs-cell-name { padding: 10px 10px; }
.subs-name { font-size: 14px; font-weight: 700; color: var(--tx); text-decoration: line-through; text-decoration-thickness: 1.5px; }
.subs-name-sub { font-size: 11px; color: var(--txm); margin-top: 2px; }
.subs-cell-role { padding: 10px 10px; display: flex; align-items: center; }
.subs-role { padding: 2px 8px; font-size: 11px; font-weight: 700; border-radius: 99px; letter-spacing: .04em; }
.subs-role.drv { background: rgba(184, 52, 26, .12); color: var(--red); border: 1px solid var(--red); }
.subs-role.mon { background: rgba(0, 90, 156, .10); color: #005a9c; border: 1px solid #005a9c; }
.subs-cell-bus { padding: 10px 10px; }
.subs-bus { font-size: 14px; font-weight: 700; color: var(--tx); }
.subs-asg { font-size: 11px; color: var(--txm); margin-top: 2px; }
.subs-cell-scope { padding: 10px 10px; display: flex; align-items: center; }
.subs-scope { padding: 2px 6px; font-size: 10px; border-radius: 3px; letter-spacing: .06em; font-family: 'IBM Plex Mono', monospace; font-weight: 700; }
.subs-scope.full { border: 1px solid var(--red); color: var(--red); }
.subs-scope.partial { border: 1px solid var(--amber); color: var(--amber); }
/* ── run cells (per slot) ──────────────────────────────────────────────── */
.subs-runcell {
padding: 8px 10px; cursor: pointer; position: relative; min-height: 56px;
display: flex; flex-direction: column; justify-content: center;
}
.subs-runcell.state-open { background: #fff4ef; }
.subs-runcell.state-working { background: #fff6dd; }
.subs-runcell.state-filled { background: #eef6e7; }
.subs-runcell.state-na { background: #f6f3eb; cursor: default; }
.subs-runcell.state-none { background: rgba(0,0,0,.025); cursor: default; color: var(--txm); }
.subs-runcell.is-active { box-shadow: inset 0 0 0 2px var(--amber); background: #fff7d6; }
.subs-runcell-head {
display: flex; align-items: center; justify-content: space-between;
}
.subs-slot-lbl {
font-size: 10px; font-weight: 700; letter-spacing: .06em;
font-family: 'IBM Plex Mono', monospace; color: var(--txm);
}
.subs-runcell.state-open .subs-slot-lbl { color: var(--red); }
.subs-runcell.state-working .subs-slot-lbl { color: var(--amber); }
.subs-runcell.state-filled .subs-slot-lbl { color: var(--green); }
.subs-runcell-meta {
font-size: 10px; color: var(--txm);
font-family: 'IBM Plex Mono', monospace;
}
.subs-cta { font-size: 13px; font-weight: 600; margin-top: 4px; color: var(--red); }
.subs-sub-line {
font-size: 13px; font-weight: 700; margin-top: 4px;
display: flex; align-items: center; gap: 6px; color: var(--tx);
}
.subs-sub-line .check { color: var(--green); font-weight: 700; }
.subs-sub-line .dot { width: 6px; height: 6px; border-radius: 99px; background: var(--amber); display: inline-block; }
.subs-na-text { font-size: 11px; color: var(--txm); margin-top: 2px; }
.subs-na-sub { font-size: 10px; color: var(--txm); }
.subs-cell-day { padding: 10px 10px; display: flex; align-items: center; }
.subs-stamp.good {
border: 1.5px solid var(--green); color: var(--green); padding: 2px 8px;
border-radius: 4px; font-size: 11px; font-weight: 700; letter-spacing: .06em;
}
.subs-day-progress { font-size: 12px; color: var(--red); font-weight: 600; }
.subs-day-none { color: var(--txm); }
.subs-empty {
padding: 32px 24px; text-align: center; color: var(--txm); font-size: 14px;
border: 1px dashed var(--ln); border-radius: 6px;
}
.subs-empty-h {
font-size: 15px; font-weight: 700; color: var(--tx); margin-bottom: 4px;
}
.subs-empty-p {
font-size: 13px; color: var(--txm); margin: 0 0 12px; line-height: 1.5;
max-width: 560px; margin-left: auto; margin-right: auto;
}
.subs-empty-cta {
display: inline-block; padding: 7px 14px;
background: var(--green); color: #fff;
border-radius: 4px; font-size: 12.5px; font-weight: 600;
text-decoration: none;
}
.subs-empty-cta:hover { filter: brightness(1.05); }
/* ─── Date tabs (Today / Tomorrow / Other day…) ───────────────────────── */
.subs-date-tabs {
display: flex; gap: 6px;
margin: 0 0 14px;
flex-wrap: wrap;
}
.subs-date-tab {
display: flex; flex-direction: column; align-items: flex-start;
padding: 7px 14px;
background: var(--surf2); color: var(--tx);
border: 1px solid var(--bdr); border-radius: 4px;
cursor: pointer;
font-family: 'IBM Plex Sans', sans-serif;
min-width: 140px;
}
.subs-date-tab:hover:not(.is-on):not(:disabled) { background: var(--surf); border-color: var(--green); }
.subs-date-tab.is-on { background: var(--tx); color: #fff; border-color: var(--tx); }
.subs-date-tab--other {
border-style: dashed;
background: transparent;
}
.subs-date-tab:disabled { opacity: .6; cursor: not-allowed; }
.subs-date-tab-l { font-size: 12.5px; font-weight: 700; }
.subs-date-tab-d { font-size: 10.5px; opacity: .85; margin-top: 2px; font-weight: 500; }
.subs-date-tab.is-on .subs-date-tab-d { opacity: .75; }
/* ─── Closure banner ──────────────────────────────────────────────────── */
.subs-closure-banner {
margin: 0 0 14px;
padding: 8px 12px;
background: rgba(167,48,39,.06);
border: 1px solid var(--red);
border-left-width: 4px;
border-radius: 4px;
font-size: 12.5px; color: var(--tx); line-height: 1.5;
}
.subs-closure-banner strong { color: var(--red); }
.subs-closure-reason {
display: block; margin-top: 2px;
color: var(--txm); font-size: 11.5px; font-style: italic;
}
/* ─── Spares section (standby roster for the day) ─────────────────────── */
.subs-spares {
margin-top: 22px;
border-top: 1px solid var(--bdr);
padding-top: 18px;
}
.subs-spares-h {
display: flex; justify-content: space-between; align-items: flex-end;
margin-bottom: 10px;
}
.subs-spares-title { font-size: 14px; font-weight: 700; color: var(--tx); }
.subs-spares-sub { font-size: 11.5px; color: var(--txm); margin-top: 2px; max-width: 720px; line-height: 1.45; }
.subs-spares-grid {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
}
.subs-spare-col {
background: var(--surf); border: 1px solid var(--bdr); border-radius: 5px;
padding: 10px 12px;
}
.subs-spare-col-h {
display: flex; align-items: center; gap: 8px;
margin-bottom: 8px;
padding-bottom: 6px;
border-bottom: 1px solid var(--bdr);
}
.subs-spare-col-lbl {
font-size: 11px; font-weight: 700; letter-spacing: .06em;
text-transform: uppercase; color: var(--txm); flex: 1;
}
.subs-spare-col-count {
display: inline-block; min-width: 22px; text-align: center;
padding: 1px 7px;
background: var(--surf2); color: var(--tx);
border-radius: 99px; border: 1px solid var(--bdr);
font-family: 'IBM Plex Mono', monospace;
font-size: 10.5px; font-weight: 700;
}
.subs-spare-add {
padding: 3px 10px;
background: transparent;
border: 1px dashed var(--bdr2);
border-radius: 4px;
color: var(--green); font-size: 11px; font-weight: 700;
cursor: pointer;
font-family: 'IBM Plex Sans', sans-serif;
}
.subs-spare-add:hover { background: rgba(45,95,63,.08); border-color: var(--green); border-style: solid; }
.subs-spare-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.subs-spare-item {
display: flex; justify-content: space-between; align-items: center;
padding: 6px 8px;
background: var(--surf2);
border: 1px solid var(--bdr); border-radius: 4px;
font-size: 12px;
}
.subs-spare-name { font-weight: 600; color: var(--tx); }
.subs-spare-meta { display: flex; align-items: center; gap: 6px; margin-top: 2px; }
.subs-spare-role {
display: inline-block; padding: 0 6px;
border-radius: 99px;
font-size: 9.5px; font-weight: 700;
letter-spacing: .04em; text-transform: uppercase;
border: 1px solid currentColor;
}
.subs-spare-role--driver { color: #1565C0; background: rgba(21,101,192,.08); }
.subs-spare-role--monitor { color: #6D4C41; background: rgba(109,76,65,.10); }
.subs-spare-notes { font-size: 11px; color: var(--txm); font-style: italic; }
.subs-spare-empty { font-size: 11.5px; color: var(--txm); font-style: italic; padding: 6px 4px; }
.subs-spare-x {
width: 22px; height: 22px;
padding: 0; line-height: 1;
background: transparent; color: var(--txm);
border: 1px solid var(--bdr); border-radius: 3px;
font-size: 11px; font-weight: 700; cursor: pointer;
}
.subs-spare-x:hover { color: var(--red); border-color: var(--red); background: rgba(167,48,39,.08); }
/* ─── Spare picker popover (anchored under a column's + Add button) ──── */
.subs-spare-picker {
width: 280px;
background: var(--surf);
border: 1px solid var(--tx);
border-radius: 5px;
box-shadow: 0 8px 24px rgba(0,0,0,.18);
font-family: 'IBM Plex Sans', sans-serif;
}
.subs-spare-picker-h {
display: flex; justify-content: space-between; align-items: center;
padding: 7px 10px;
border-bottom: 1px solid var(--bdr);
font-size: 12px; font-weight: 600; color: var(--tx);
}
.subs-spare-picker-h b { font-weight: 700; }
.subs-spare-picker-close {
background: transparent; border: 0; padding: 0;
font-size: 11px; color: var(--txm); cursor: pointer;
text-transform: lowercase;
}
.subs-spare-picker-search {
width: 100%; padding: 7px 10px;
font: inherit; font-size: 12.5px;
background: var(--surf2);
border: 0; border-bottom: 1px solid var(--bdr);
color: var(--tx);
}
.subs-spare-picker-search:focus { outline: none; background: var(--surf); }
.subs-spare-picker-list { max-height: 320px; overflow-y: auto; padding: 4px; display: flex; flex-direction: column; gap: 2px; }
.subs-spare-picker-row {
display: flex; justify-content: space-between; align-items: center;
padding: 6px 8px;
background: var(--surf2); border: 1px solid var(--bdr); border-radius: 3px;
font: inherit; color: var(--tx); cursor: pointer;
text-align: left;
}
.subs-spare-picker-row:hover { background: var(--surf); border-color: var(--green); }
.subs-spare-picker-name { font-size: 12px; font-weight: 600; }
.subs-spare-picker-empty { padding: 10px 8px; color: var(--txm); font-style: italic; font-size: 11.5px; }
@media (max-width: 900px) {
.subs-spares-grid { grid-template-columns: 1fr; }
.subs-date-tab { min-width: 100px; }
}
/* ── picker popover ────────────────────────────────────────────────────── */
.subs-picker {
background: #fff; border: 1px solid var(--ln); border-radius: 6px;
box-shadow: 0 6px 24px rgba(0,0,0,.12);
z-index: 1000;
font-family: 'IBM Plex Sans', sans-serif;
}
.subs-picker-head {
display: flex; align-items: center; gap: 8px; padding: 8px 12px;
border-bottom: 1px solid var(--ln); background: var(--bg-soft);
border-top-left-radius: 6px; border-top-right-radius: 6px;
}
.subs-picker-context { font-size: 11px; color: var(--txm); flex: 1; }
.subs-picker-close {
border: 0; background: transparent; cursor: pointer;
font-size: 16px; color: var(--txm); padding: 0 4px;
}
.subs-picker-search {
width: calc(100% - 24px); margin: 8px 12px 0; padding: 6px 8px;
border: 1px solid var(--ln); border-radius: 4px; font-size: 14px;
font-family: 'IBM Plex Sans', sans-serif; outline: none;
}
.subs-picker-search:focus { border-color: var(--green); }
.subs-picker-list { padding: 6px 8px 8px; max-height: 320px; overflow-y: auto; }
.subs-picker-row {
display: flex; align-items: center; gap: 8px; padding: 6px 8px;
width: 100%; border: 1px solid transparent; border-radius: 4px;
background: transparent; font-size: 13px; cursor: pointer; text-align: left;
}
.subs-picker-row.is-top { background: #fff7d6; border-color: var(--amber); }
.subs-picker-row:hover { background: var(--bg-soft); }
.subs-picker-idx {
font-family: 'IBM Plex Mono', monospace; font-size: 10px; color: var(--txm); min-width: 16px;
}
.subs-picker-name { font-weight: 600; color: var(--tx); flex: 1; }
.subs-picker-role { font-size: 10px; color: var(--txm); font-family: 'IBM Plex Mono', monospace; }
.subs-tag.good {
font-size: 10px; color: var(--green); border: 1px solid var(--green);
padding: 1px 5px; border-radius: 3px; font-weight: 600;
}
.subs-picker-hours { font-size: 10px; color: var(--txm); font-family: 'IBM Plex Mono', monospace; }
.subs-picker-empty { padding: 12px; color: var(--txm); font-size: 12px; text-align: center; }
.subs-picker-footer {
padding: 6px 12px; border-top: 1px solid var(--ln); text-align: right;
}
.subs-picker-clear {
padding: 4px 10px; font-size: 12px; border: 1px solid var(--ln);
background: #fff; color: var(--red); border-radius: 4px; cursor: pointer;
}
/* Schools list in the Bus + Assignment column */
.subs-schools {
font-size: 11px; color: var(--txm); margin-top: 2px;
line-height: 1.35;
}
/* Print headsheet button in picker header */
.subs-picker-print {
padding: 3px 8px; font-size: 11px; cursor: pointer;
background: var(--bg-soft); color: var(--tx);
border: 1px solid var(--ln); border-radius: 4px; margin-right: 4px;
font-family: 'IBM Plex Sans', sans-serif;
}
.subs-picker-print:hover { background: var(--green); color: white; border-color: var(--green); }
.subs-picker-print:disabled { opacity: .6; cursor: default; }
/* ===== Reports tab ====================================================
Sidebar + workspace layout mirroring BusBFF. The Week Grid report
carries its own .wg-* prefix so future reports (.bc-*, .wow-*) can
live alongside without collisions. */
.rp-layout {
display: grid; grid-template-columns: 240px 1fr;
gap: 0; min-height: calc(100vh - 96px);
background: var(--bg);
}
.rp-sidebar {
background: var(--surf2); border-right: 1px solid var(--bdr);
padding: 14px 10px; overflow-y: auto;
}
.rp-side-section { margin-bottom: 14px; }
.rp-side-h {
font-family: 'IBM Plex Sans', sans-serif; font-size: 10.5px;
font-weight: 700; color: var(--txm); text-transform: uppercase;
letter-spacing: .06em; padding: 6px 8px;
}
.rp-side-list { display: flex; flex-direction: column; gap: 3px; }
.rp-side-item {
display: block; text-align: left; width: 100%;
padding: 8px 10px; border: 1px solid transparent; border-radius: 5px;
background: transparent; color: var(--tx); cursor: pointer;
font-family: 'IBM Plex Sans', sans-serif;
}
.rp-side-item:hover { background: var(--surf); border-color: var(--bdr2); }
.rp-side-item.is-on { background: var(--surf); border-color: var(--green); }
.rp-side-item-label {
display: flex; align-items: center; gap: 6px;
font-size: 13px; font-weight: 600;
}
.rp-side-item-hint {
font-size: 11px; color: var(--txm); margin-top: 2px; line-height: 1.3;
}
.rp-side-status {
font-size: 9px; font-weight: 700; color: var(--amber);
background: rgba(184,134,11,.12);
padding: 1px 5px; border-radius: 3px; letter-spacing: .04em;
}
.rp-main { padding: 18px 24px; overflow-y: auto; background: var(--bg); }
.rp-page { max-width: 1400px; }
.rp-loading { padding: 60px 0; color: var(--txm); text-align: center; font-size: 13px; }
.rp-error {
padding: 16px; background: var(--surf); border: 1px solid var(--red);
border-radius: 6px; color: var(--red); font-size: 13px;
}
.rp-error-hint { color: var(--txm); margin-top: 6px; font-size: 12px; }
.rp-error code {
font-family: 'IBM Plex Mono', monospace; font-size: 11.5px;
background: var(--surf2); padding: 1px 4px; border-radius: 3px;
}
.rp-empty {
padding: 36px 28px; text-align: center;
background: var(--surf); border: 1px dashed var(--bdr2); border-radius: 8px;
}
.rp-empty-h { font-size: 16px; font-weight: 700; color: var(--tx); margin-bottom: 6px; }
.rp-empty p { color: var(--txm); font-size: 13px; margin: 4px 0; line-height: 1.4; }
.rp-soon {
padding: 36px 28px; background: var(--surf); border: 1px dashed var(--bdr2); border-radius: 8px;
max-width: 640px;
}
.rp-soon-h { font-size: 18px; font-weight: 700; color: var(--tx); margin-bottom: 8px; }
.rp-soon p { color: var(--txm); font-size: 13.5px; line-height: 1.5; }
.rp-h {
display: flex; align-items: flex-start; justify-content: space-between;
gap: 16px; margin-bottom: 14px;
}
.rp-h-title { font-size: 19px; font-weight: 700; color: var(--tx); margin: 0; }
.rp-h-sub { font-size: 12px; color: var(--txm); margin-top: 4px; }
.rp-h-controls { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.rp-h-nav {
padding: 5px 10px; font-size: 12px;
border: 1px solid var(--bdr2); background: var(--surf); color: var(--tx);
border-radius: 4px; cursor: pointer; font-family: 'IBM Plex Sans', sans-serif;
}
.rp-h-nav:hover:not(:disabled) { background: var(--surf2); }
.rp-h-nav:disabled { opacity: .4; cursor: default; }
.rp-h-threshold {
display: flex; align-items: center; gap: 4px; margin-left: 4px;
font-size: 11.5px; color: var(--txm);
}
.rp-h-threshold select {
padding: 4px 6px; border: 1px solid var(--bdr2); background: var(--surf);
color: var(--tx); border-radius: 4px; font-size: 11.5px;
font-family: 'IBM Plex Sans', sans-serif;
}
/* Week Grid */
.wg-hero {
display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr;
gap: 12px; margin-bottom: 16px;
}
.wg-hero-card {
background: var(--surf); border: 1px solid var(--bdr);
border-radius: 6px; padding: 12px 14px;
}
.wg-hero-card--lead { background: var(--surf); }
.wg-hero-card-label {
font-size: 10.5px; color: var(--txm); text-transform: uppercase;
letter-spacing: .04em; font-weight: 600;
}
.wg-hero-card-stack { display: flex; align-items: baseline; gap: 8px; margin-top: 4px; }
.wg-hero-pct { font-size: 54px; font-weight: 700; line-height: 1; color: var(--tx); }
.wg-hero-pct--great { color: var(--green); }
.wg-hero-pct--good { color: var(--green); }
.wg-hero-pct--ok { color: var(--amber); }
.wg-hero-pct--warn { color: var(--amber); }
.wg-hero-pct--bad { color: var(--red); }
.wg-hero-pct--pending { color: var(--txm); }
.wg-hero-pct-sub { font-size: 16px; font-weight: 600; color: var(--txm); }
.wg-hero-card-foot { font-size: 11.5px; color: var(--txm); margin-top: 4px; line-height: 1.3; }
.wg-hero-num { font-size: 44px; font-weight: 700; line-height: 1; margin-top: 4px; }
.wg-hero-num--alarm { color: var(--red); }
.wg-hero-num--warn { color: var(--amber); }
.wg-hero-num--good { color: var(--green); }
.wg-main {
display: grid; grid-template-columns: 1.55fr .8fr;
gap: 14px;
}
.wg-matrix, .wg-offenders {
background: var(--surf); border: 1px solid var(--bdr);
border-radius: 6px; padding: 12px 14px;
}
.wg-section-h {
display: flex; align-items: baseline; justify-content: space-between;
margin-bottom: 8px; gap: 8px;
}
.wg-section-h h2 { font-size: 15px; font-weight: 700; color: var(--tx); margin: 0; }
.wg-section-sub { font-size: 11px; color: var(--txm); }
.wg-table {
width: 100%; border-collapse: separate; border-spacing: 4px 5px;
}
.wg-cell-row-h {
text-align: left; min-width: 92px; padding-right: 6px;
}
.wg-cell-col-h {
text-align: center; padding: 0 4px 4px; vertical-align: bottom;
}
.wg-cell-col-h--week { border-left: 1.5px dashed var(--bdr2); padding-left: 8px; }
.wg-cell-col-h-dow { font-size: 11.5px; font-weight: 700; color: var(--tx); }
.wg-cell-col-h-date{ font-size: 10px; color: var(--txm); }
.wg-cell-row-name { font-size: 12px; font-weight: 700; color: var(--tx); }
.wg-cell-row-sub { font-size: 10px; color: var(--txm); margin-top: 1px; }
.wg-totals td { border-top: 1.5px solid var(--tx); padding-top: 6px !important; }
.wg-cell-week { border-left: 1.5px dashed var(--bdr2); padding-left: 8px; }
.wg-cell {
min-height: 46px; padding: 5px 7px; border-radius: 5px;
border: 1.5px solid; box-sizing: border-box;
}
.wg-cell--bold { border-width: 2px; box-shadow: 1.5px 1.5px 0 var(--tx); }
.wg-cell--great { background: #d8eed8; border-color: #3d6e3d; color: #2d5a2d; }
.wg-cell--good { background: #e6f0d8; border-color: #5b8a3d; color: #3d6e3d; }
.wg-cell--ok { background: #faecc6; border-color: #a86b14; color: #7d4f0c; }
.wg-cell--warn { background: #f6d8b8; border-color: #b8651a; color: #8c4914; }
.wg-cell--bad { background: #f4d2c6; border-color: #b8341a; color: #8c2614; }
.wg-cell--pending { background: #eee8d8; border-color: #7a7065; color: #7a7065; }
.wg-cell--empty {
background: transparent; border-style: dashed; border-color: var(--bdr2);
color: var(--txm); display: flex; align-items: center; justify-content: center;
font-size: 11px;
}
.wg-cell--future {
background: transparent; border-style: dashed; border-color: var(--bdr2);
color: var(--txm); display: flex; align-items: center; justify-content: center;
font-size: 11px; opacity: .55;
}
.wg-cell-top { display: flex; align-items: baseline; justify-content: space-between; gap: 4px; }
.wg-cell-pct { font-size: 17px; font-weight: 700; line-height: 1; }
.wg-cell--bold .wg-cell-pct { font-size: 19px; }
.wg-cell-live { font-size: 8.5px; opacity: .75; font-family: 'IBM Plex Mono', monospace; }
.wg-cell-foot { font-size: 10.5px; margin-top: 3px; opacity: .9; line-height: 1.2; }
.wg-legend {
display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px;
font-size: 11px; color: var(--txm);
}
.wg-legend-item { display: inline-flex; align-items: center; gap: 5px; }
.wg-legend-swatch {
display: inline-block; width: 14px; height: 14px; border-radius: 3px;
border-width: 1.5px; min-height: 14px; padding: 0;
}
/* Repeat-offender rail */
.wg-empty-rail {
padding: 16px; text-align: center; color: var(--txm); font-size: 12.5px;
border: 1px dashed var(--bdr2); border-radius: 5px;
}
.wg-off {
display: grid; grid-template-columns: 88px 1fr 60px; gap: 10px;
align-items: center; padding: 6px 8px; margin-bottom: 6px;
border-radius: 5px; border: 1px solid;
}
.wg-off--alarm { background: rgba(167,48,39,.05); border-color: var(--red); }
.wg-off--warn { background: rgba(184,134,11,.06); border-color: var(--amber); }
.wg-off-bus { font-size: 16px; font-weight: 700; line-height: 1; }
.wg-off--alarm .wg-off-bus { color: var(--red); }
.wg-off--warn .wg-off-bus { color: var(--amber); }
.wg-off-school { font-size: 10px; color: var(--txm); margin-top: 1px; }
.wg-off-driver { font-size: 11.5px; color: var(--tx); }
/* Fixed 5-column grid so the same weekday lines up across every offender
row, even when one bus has a "+12m" chip and another has "—". */
.wg-off-days {
display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px;
margin-top: 3px;
}
.wg-off-day {
padding: 1px 0; min-height: 14px;
font-family: 'IBM Plex Mono', monospace; font-size: 9px; font-weight: 700;
text-align: center; border-radius: 2px; border: 1.2px solid;
display: flex; align-items: center; justify-content: center;
}
.wg-off-day--late { background: #f4d2c6; color: var(--red); border-color: var(--red); }
.wg-off-day--on { background: #d8eed8; color: var(--green); border-color: var(--green); }
.wg-off-day--pending { background: #eee8d8; color: var(--txm); border-color: var(--txm); }
.wg-off-day--novisit { background: transparent; color: var(--txm); border-color: var(--txm); border-style: dotted; }
.wg-off-day--empty { background: transparent; color: var(--txm); border-color: var(--bdr2); border-style: dashed; opacity: .5; }
.wg-off-ratio { font-size: 13px; font-weight: 700; text-align: right; }
.wg-off-ratio-sub { font-size: 9.5px; color: var(--txm); text-align: right; }
@media (max-width: 1100px) {
.wg-main { grid-template-columns: 1fr; }
.wg-hero { grid-template-columns: 1fr 1fr; }
}
/* Scope toggle (Morning / All) — shared across all three reports. */
.rp-h-scope {
display: inline-flex; gap: 0; border: 1px solid var(--bdr2);
border-radius: 4px; overflow: hidden; margin-right: 4px;
}
.rp-h-scope-btn {
padding: 5px 10px; font-size: 11.5px;
background: var(--surf); color: var(--tx); border: none;
cursor: pointer; font-family: 'IBM Plex Sans', sans-serif;
border-right: 1px solid var(--bdr2);
}
.rp-h-scope-btn:last-child { border-right: none; }
.rp-h-scope-btn:hover { background: var(--surf2); }
.rp-h-scope-btn.is-on {
background: var(--green); color: white;
}
/* ===== Report 2 · Bus Consistency ====================================== */
.bc-chips {
display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
margin-bottom: 12px;
}
.bc-chip-lbl {
font-size: 11px; color: var(--txm); margin-right: 4px;
text-transform: uppercase; letter-spacing: .04em;
}
.bc-chip {
padding: 4px 10px; font-size: 11.5px;
background: var(--surf); color: var(--tx);
border: 1px solid var(--bdr2); border-radius: 999px;
cursor: pointer; font-family: 'IBM Plex Sans', sans-serif;
}
.bc-chip:hover { background: var(--surf2); }
.bc-chip.is-on { background: var(--tx); color: var(--surf); border-color: var(--tx); }
.bc-main {
display: grid; grid-template-columns: 1.55fr .85fr; gap: 14px;
}
.bc-matrix, .bc-card {
background: var(--surf); border: 1px solid var(--bdr);
border-radius: 6px; padding: 12px 14px;
}
.bc-rail {
display: flex; flex-direction: column; gap: 14px;
}
.bc-table {
width: 100%; border-collapse: separate; border-spacing: 4px 4px;
}
.bc-table thead th {
font-size: 11px; color: var(--txm); font-weight: 600;
padding: 0 4px 4px; vertical-align: bottom; text-align: center;
}
.bc-col-bus { min-width: 110px; text-align: left !important; }
.bc-col-school { min-width: 64px; text-align: left !important; }
.bc-col-day { min-width: 56px; }
.bc-col-day-dow { font-weight: 700; color: var(--tx); }
.bc-col-day-date { font-size: 10px; }
.bc-col-tot { min-width: 56px; line-height: 1.1; }
.bc-row {
border-radius: 5px;
}
.bc-row td { padding: 4px 6px; vertical-align: middle; }
.bc-row--alarm td:first-child { background: rgba(167,48,39,.07); }
.bc-row--warn td:first-child { background: rgba(184,134,11,.07); }
.bc-row--chronic td:first-child {
border-left: 3px solid var(--red);
}
.bc-cell-bus {
border-radius: 4px 0 0 4px;
position: relative;
}
.bc-bus-num { font-size: 14px; font-weight: 700; color: var(--tx); line-height: 1.1; }
.bc-row--alarm .bc-bus-num { color: var(--red); }
.bc-row--warn .bc-bus-num { color: var(--amber); }
.bc-bus-driver { font-size: 10.5px; color: var(--txm); margin-top: 1px; }
.bc-chronic-pill {
display: inline-block; margin-top: 3px;
font-size: 8.5px; font-weight: 700; letter-spacing: .05em;
text-transform: uppercase;
background: var(--red); color: white;
padding: 1px 5px; border-radius: 2px;
}
.bc-cell-school {
font-size: 11px; color: var(--txm);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
max-width: 78px;
}
.bc-day {
min-height: 28px; padding: 3px 4px; border-radius: 3px;
border: 1.2px solid; box-sizing: border-box;
display: flex; align-items: center; justify-content: center;
font-family: 'IBM Plex Mono', monospace; font-size: 11px; font-weight: 700;
}
.bc-day--great { background: #d8eed8; border-color: #3d6e3d; color: #2d5a2d; }
.bc-day--good { background: #e6f0d8; border-color: #5b8a3d; color: #3d6e3d; }
.bc-day--ok { background: #faecc6; border-color: #a86b14; color: #7d4f0c; }
.bc-day--warn { background: #f6d8b8; border-color: #b8651a; color: #8c4914; }
.bc-day--bad { background: #f4d2c6; border-color: #b8341a; color: #8c2614; }
.bc-day--pending { background: #eee8d8; border-color: #7a7065; color: #7a7065; border-style: dashed; }
.bc-day--novisit { background: transparent; border-color: var(--txm); color: var(--txm); border-style: dotted; }
.bc-day--empty { background: transparent; border-color: var(--bdr2); color: var(--txm); border-style: dashed; opacity: .5; }
.bc-day--future { background: transparent; border-color: var(--bdr2); color: var(--txm); border-style: dashed; opacity: .35; }
.bc-cell-ratio, .bc-cell-avg { text-align: center; }
.bc-ratio { font-size: 14px; font-weight: 700; color: var(--tx); }
.bc-ratio span { color: var(--txm); font-weight: 500; }
.bc-avg {
display: inline-block; padding: 2px 7px; border-radius: 3px;
font-family: 'IBM Plex Mono', monospace; font-size: 11.5px; font-weight: 700;
border: 1.2px solid;
}
.bc-avg.bc-day--great { background: #d8eed8; border-color: #3d6e3d; color: #2d5a2d; }
.bc-avg.bc-day--good { background: #e6f0d8; border-color: #5b8a3d; color: #3d6e3d; }
.bc-avg.bc-day--ok { background: #faecc6; border-color: #a86b14; color: #7d4f0c; }
.bc-avg.bc-day--warn { background: #f6d8b8; border-color: #b8651a; color: #8c4914; }
.bc-avg.bc-day--bad { background: #f4d2c6; border-color: #b8341a; color: #8c2614; }
.bc-legend {
margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--bdr2);
display: flex; flex-wrap: wrap; gap: 12px; font-size: 11px; color: var(--txm);
}
.bc-legend-item { display: inline-flex; align-items: center; gap: 4px; }
.bc-legend-swatch {
display: inline-block; width: 14px; height: 14px; border-radius: 3px;
border-width: 1.2px;
}
.bc-legend-hint { color: var(--txm); font-style: italic; }
/* Chronic + Distribution cards */
.bc-card--chronic .bc-chronic-row {
display: grid; grid-template-columns: auto 1fr auto; gap: 8px;
padding: 6px 8px; margin-bottom: 5px;
background: rgba(167,48,39,.05); border: 1px solid var(--red);
border-radius: 4px; align-items: center;
}
.bc-chronic-bus { font-size: 15px; font-weight: 700; color: var(--red); line-height: 1; }
.bc-chronic-driver { font-size: 11.5px; color: var(--tx); }
.bc-chronic-school { font-size: 10px; color: var(--txm); }
.bc-chronic-stat { text-align: right; }
.bc-chronic-pct {
font-size: 14px; font-weight: 700; color: var(--red);
font-family: 'IBM Plex Mono', monospace;
}
.bc-chronic-sub { font-size: 9.5px; color: var(--txm); }
.bc-empty { padding: 12px; text-align: center; color: var(--txm); font-size: 12.5px; }
.bc-dist-row {
display: grid; grid-template-columns: 88px 1fr 28px; gap: 8px;
align-items: center; margin-bottom: 4px;
}
.bc-dist-label { font-size: 11.5px; color: var(--tx); }
.bc-dist-bar {
background: var(--surf2); border: 1px solid var(--bdr2);
border-radius: 3px; height: 14px; overflow: hidden;
}
.bc-dist-fill {
display: block; height: 100%;
}
.bc-dist-fill--great { background: #3d6e3d; }
.bc-dist-fill--good { background: #7cb342; }
.bc-dist-fill--warn { background: #b8651a; }
.bc-dist-fill--bad { background: #b8341a; }
.bc-dist-n { font-size: 12.5px; font-weight: 700; text-align: right; color: var(--tx); }
.bc-dist-foot { font-size: 11.5px; color: var(--txm); margin-top: 8px; line-height: 1.4; }
.bc-dist-foot strong { color: var(--tx); }
/* ===== Report 3 · Week-over-Week ====================================== */
.wow-hero, .wow-schools {
background: var(--surf); border: 1px solid var(--bdr);
border-radius: 6px; padding: 12px 14px; margin-bottom: 14px;
}
.wow-chart-wrap { margin-top: 6px; }
.wow-chart {
width: 100%; height: auto; max-width: 100%;
font-family: 'IBM Plex Sans', sans-serif;
}
.wow-grid {
stroke: var(--bdr2); stroke-width: 1; stroke-dasharray: 3 3;
}
.wow-grid--target {
stroke: #5b8a3d; stroke-dasharray: 6 4; stroke-width: 1.2;
}
.wow-axis-label { font-size: 10px; fill: var(--txm); }
.wow-target-label { font-size: 10px; fill: #3d6e3d; font-weight: 600; }
.wow-line {
fill: none; stroke: var(--tx); stroke-width: 2.4;
stroke-linecap: round; stroke-linejoin: round;
}
.wow-point { stroke-width: 1.5; }
.wow-point--great { fill: #cfe5cf; stroke: #3d6e3d; }
.wow-point--good { fill: #e0eed4; stroke: #5b8a3d; }
.wow-point--ok { fill: #f5ecc6; stroke: #a86b14; }
.wow-point--warn { fill: #f4d8b8; stroke: #b8651a; }
.wow-point--bad { fill: #f5d2c6; stroke: #b8341a; }
.wow-point--pending { fill: #ebe7dc; stroke: #7a7065; }
.wow-point--partial { stroke-dasharray: 3 2; }
.wow-point-label { font-size: 10.5px; font-weight: 700; fill: var(--tx); }
.wow-x-label { font-size: 10.5px; font-weight: 600; fill: var(--tx); }
.wow-x-sub { font-size: 9px; fill: var(--txm); }
.wow-school-list {
display: flex; flex-direction: column; gap: 6px;
}
.wow-school-row {
display: grid; grid-template-columns: 200px 1fr 60px 60px;
gap: 12px; align-items: center;
padding: 6px 4px; border-bottom: 1px dashed var(--bdr);
}
.wow-school-row:last-child { border-bottom: none; }
.wow-school-name { font-size: 12.5px; font-weight: 700; color: var(--tx); }
.wow-school-sched { font-size: 10.5px; color: var(--txm); margin-top: 1px; font-weight: 500; }
.wow-spark { width: 100%; height: 32px; }
.wow-spark-line { fill: none; stroke: var(--tx); stroke-width: 1.6; stroke-linejoin: round; }
.wow-spark-target { stroke: #5b8a3d; stroke-dasharray: 3 2; stroke-width: 1; }
.wow-spark-point--great { fill: #3d6e3d; }
.wow-spark-point--good { fill: #5b8a3d; }
.wow-spark-point--ok { fill: #a86b14; }
.wow-spark-point--warn { fill: #b8651a; }
.wow-spark-point--bad { fill: #b8341a; }
.wow-spark-point--pending { fill: #7a7065; }
.wow-spark-empty { font-size: 11px; fill: var(--txm); }
.wow-school-pct {
font-size: 16px; font-weight: 700; text-align: right;
}
.wow-school-pct--great { color: #3d6e3d; }
.wow-school-pct--good { color: #3d6e3d; }
.wow-school-pct--ok { color: var(--amber); }
.wow-school-pct--warn { color: var(--amber); }
.wow-school-pct--bad { color: var(--red); }
.wow-school-pct--pending { color: var(--txm); }
.wow-trend {
display: inline-block; font-family: 'IBM Plex Mono', monospace;
font-size: 11px; font-weight: 700; padding: 2px 6px; border-radius: 3px;
text-align: right; min-width: 50px;
}
.wow-trend--up { background: rgba(45,95,63,.12); color: #2d5f3f; }
.wow-trend--down { background: rgba(167,48,39,.12); color: var(--red); }
.wow-trend--flat { background: var(--surf2); color: var(--txm); }
@media (max-width: 1100px) {
.bc-main { grid-template-columns: 1fr; }
.wow-school-row { grid-template-columns: 1fr 1fr; }
}
/* Bus Consistency: sortable column headers. */
.bc-sort {
cursor: pointer; user-select: none;
}
.bc-sort:hover { background: var(--surf2); }
.bc-sort-ind {
display: inline-block; margin-left: 3px; font-size: 9px;
color: var(--green); vertical-align: 1px;
}
/* Week Grid cell hover tooltip — appears next to the cursor showing the
per-run breakdown for the hovered school×day cell. Positioned via JS;
only the styling lives here. */
.wg-cell--hoverable { cursor: help; }
.wg-tooltip {
position: fixed; z-index: 9999;
max-width: 380px; min-width: 280px;
background: var(--surf); color: var(--tx);
border: 1px solid var(--bdr2); border-radius: 6px;
box-shadow: 0 6px 20px rgba(0,0,0,.18);
font-family: 'IBM Plex Sans', sans-serif;
pointer-events: none;
padding: 8px 10px;
}
.wg-tooltip[hidden] { display: none; }
.wg-tip-head {
padding-bottom: 6px; margin-bottom: 6px;
border-bottom: 1px solid var(--bdr);
}
.wg-tip-title { font-size: 13px; font-weight: 700; color: var(--tx); }
.wg-tip-sub { font-size: 11px; color: var(--txm); margin-top: 2px; }
.wg-tip-rows {
display: flex; flex-direction: column; gap: 3px;
max-height: 280px; overflow-y: auto;
}
.wg-tip-row {
display: grid; grid-template-columns: 80px 1fr auto; gap: 8px;
align-items: baseline; padding: 3px 6px; border-radius: 3px;
font-size: 11.5px;
}
.wg-tip-row--late { background: rgba(167,48,39,.07); }
.wg-tip-row--on { background: rgba(45,95,63,.06); }
.wg-tip-row--pending { background: var(--surf2); color: var(--txm); }
.wg-tip-row--novisit { background: var(--surf2); color: var(--txm); font-style: italic; }
.wg-tip-bus { font-weight: 700; color: var(--tx); }
.wg-tip-run { font-weight: 500; color: var(--txm); margin-left: 2px; font-size: 10.5px; }
.wg-tip-times { font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: var(--txm); }
.wg-tip-sched { color: var(--txm); }
.wg-tip-actual { color: var(--tx); font-weight: 600; }
.wg-tip-delta {
font-family: 'IBM Plex Mono', monospace; font-weight: 700;
text-align: right; min-width: 50px;
}
.wg-tip-row--late .wg-tip-delta { color: var(--red); }
.wg-tip-row--on .wg-tip-delta { color: var(--green); }
.wg-tip-row--pending .wg-tip-delta { color: var(--txm); }
/* Tooltip row layout: main row with bus / times / delta, then an optional
depot-exit line below it. */
.wg-tip-row {
display: flex; flex-direction: column; gap: 2px;
}
.wg-tip-row-main {
display: grid; grid-template-columns: minmax(80px, auto) 1fr auto; gap: 8px;
align-items: baseline;
}
.wg-tip-depot {
display: grid; grid-template-columns: 80px 1fr auto; gap: 8px;
align-items: baseline; padding-left: 12px;
font-size: 10.5px; color: var(--txm);
border-left: 2px solid var(--bdr2);
}
.wg-tip-depot-lbl {
font-size: 9.5px; color: var(--txm); text-transform: uppercase;
letter-spacing: .04em; font-weight: 600;
}
.wg-tip-depot-delta {
font-family: 'IBM Plex Mono', monospace; font-weight: 600;
text-align: right; min-width: 50px; color: var(--txm);
}
/* Badges for substitute / low-confidence / manual-override callouts. */
.wg-tip-badge {
display: inline-block; margin-left: 4px; padding: 1px 5px;
font-size: 9px; font-weight: 700; letter-spacing: .03em;
border-radius: 3px; vertical-align: 1px;
font-family: 'IBM Plex Sans', sans-serif;
text-transform: uppercase;
}
.wg-tip-badge--sub { background: rgba(184,134,11,.15); color: var(--amber); }
.wg-tip-badge--lowconf { background: rgba(167,48,39,.12); color: var(--red); }
.wg-tip-badge--manual { background: rgba(45,95,63,.12); color: var(--green); }
/* Tooltip — pinned vs hover.
Hover: pointer-events: none so the mouse passes through; auto-dismisses.
Pinned (via click): pointer-events: auto, has a close button, scrolls
when content overflows. */
.wg-tooltip {
pointer-events: none; /* hover state */
}
.wg-tooltip--pinned {
pointer-events: auto;
max-height: 70vh;
overflow-y: auto;
box-shadow: 0 8px 28px rgba(0,0,0,.28);
border-color: var(--green);
/* Once pinned, freeze the tooltip in place (positionTip stops updating). */
}
.wg-tip-close {
position: absolute; top: 6px; right: 8px;
width: 22px; height: 22px; padding: 0;
background: var(--surf2); color: var(--txm);
border: 1px solid var(--bdr2); border-radius: 4px;
cursor: pointer; font-size: 12px; line-height: 1;
font-family: 'IBM Plex Sans', sans-serif;
}
.wg-tip-close:hover { background: var(--surf); color: var(--tx); }
.wg-cell--hoverable {
cursor: pointer;
}
.wg-cell--hoverable::after {
/* Subtle click affordance — invisible until hover, then a tiny pin icon
hints "click me to lock". */
content: '📌';
position: absolute; right: 3px; top: 1px;
font-size: 9px; opacity: 0;
transition: opacity .12s ease-out;
pointer-events: none;
}
.wg-cell--hoverable { position: relative; }
.wg-cell--hoverable:hover::after { opacity: .5; }
/* Run Consistency — grouped table. Inherits .bc-* cell + day styling. */
.rc-frame {
background: var(--surf); border: 1px solid var(--bdr);
border-radius: 6px; padding: 12px 14px;
}
.rc-table {
width: 100%; border-collapse: separate; border-spacing: 4px 4px;
margin-top: 8px;
}
.rc-table thead th {
font-size: 11px; color: var(--txm); font-weight: 600;
padding: 0 4px 4px; vertical-align: bottom; text-align: center;
background: var(--surf2);
}
.rc-col-school { min-width: 110px; text-align: left !important; }
.rc-col-run { min-width: 76px; text-align: left !important; }
.rc-col-bus { min-width: 76px; text-align: left !important; }
.rc-col-driver { min-width: 110px; text-align: left !important; }
.rc-group-head td {
background: linear-gradient(to right, var(--surf2), var(--surf));
border-top: 1px solid var(--bdr2);
padding: 8px 8px 4px;
}
.rc-group-name { font-size: 13px; font-weight: 700; color: var(--tx); }
.rc-group-sub { font-size: 10.5px; color: var(--txm); margin-top: 1px; }
.rc-cell-school { font-size: 11px; color: var(--txm); padding-left: 4px; }
.rc-cell-run { padding-left: 4px; }
.rc-run-num { font-size: 13px; font-weight: 700; color: var(--tx); }
.rc-cell-bus { padding-left: 4px; }
.rc-bus-num { font-size: 13px; font-weight: 700; color: var(--tx); }
.rc-bus-varies {
display: inline-block; margin-left: 4px;
font-size: 9px; font-weight: 700; padding: 1px 4px;
background: rgba(184,134,11,.12); color: var(--amber);
border-radius: 2px; vertical-align: 1px;
}
.rc-cell-driver { font-size: 11.5px; color: var(--tx); padding-left: 4px; }
/* ===== Manager — Today's Substitutions rail ===========================
Right side of Manager board. Pulls run_completion_inference rows for
today where actual_bus differs from default. Confidence-colored. */
.mgr-subs-rail {
flex: 0 0 280px; max-width: 280px;
background: var(--surf2); border-left: 1px solid var(--bdr);
display: flex; flex-direction: column;
overflow: hidden;
}
.mgr-subs-rail-h {
display: flex; align-items: center; justify-content: space-between;
padding: 10px 12px; border-bottom: 1px solid var(--bdr);
font-size: 12.5px; font-weight: 700; color: var(--tx);
background: var(--surf);
}
.mgr-subs-refresh {
width: 22px; height: 22px; padding: 0;
background: var(--surf2); color: var(--txm);
border: 1px solid var(--bdr2); border-radius: 4px;
cursor: pointer; font-size: 12px;
}
.mgr-subs-refresh:hover { background: var(--surf); color: var(--tx); }
.mgr-subs-refresh:disabled { opacity: .5; cursor: default; }
.mgr-subs-body { overflow-y: auto; padding: 8px 10px; flex: 1; }
.mgr-subs-loading, .mgr-subs-empty {
padding: 14px 10px; color: var(--txm); font-size: 12px;
text-align: center; line-height: 1.4;
}
.mgr-subs-summary {
display: flex; align-items: baseline; justify-content: space-between;
margin-bottom: 8px; padding: 4px 2px;
font-size: 11px; color: var(--txm);
}
.mgr-subs-count { font-weight: 700; color: var(--tx); }
.mgr-subs-flag {
font-size: 10px; color: var(--amber); font-weight: 600;
padding: 1px 6px; background: rgba(184,134,11,.12); border-radius: 3px;
}
.mgr-subs-list { display: flex; flex-direction: column; gap: 5px; }
.mgr-subs-divider {
margin: 6px 0 2px; padding: 4px 6px;
font-size: 10px; color: var(--txm); text-transform: uppercase;
letter-spacing: .04em; border-top: 1px dashed var(--bdr2);
}
.mgr-subs-row {
display: grid; grid-template-columns: 1fr auto auto; gap: 6px;
align-items: center; padding: 6px 8px;
background: var(--surf); border: 1px solid var(--bdr2);
border-left: 3px solid var(--bdr2); border-radius: 4px;
font-family: 'IBM Plex Sans', sans-serif;
}
.mgr-subs-row--great { border-left-color: var(--green); }
.mgr-subs-row--good { border-left-color: var(--green); }
.mgr-subs-row--warn { border-left-color: var(--amber); }
.mgr-subs-row--bad { border-left-color: var(--red); }
.mgr-subs-run {
display: flex; flex-direction: column; min-width: 0;
}
.mgr-subs-run-num { font-size: 12px; font-weight: 700; color: var(--tx); }
.mgr-subs-school { font-size: 10px; color: var(--txm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mgr-subs-time { font-size: 9.5px; color: var(--txm); font-family: 'IBM Plex Mono', monospace; }
.mgr-subs-swap {
display: flex; align-items: center; gap: 3px;
font-family: 'IBM Plex Mono', monospace; font-size: 11px;
}
.mgr-subs-from { color: var(--txm); text-decoration: line-through; }
.mgr-subs-arrow { color: var(--txm); font-size: 10px; }
.mgr-subs-to { color: var(--tx); font-weight: 700; }
.mgr-subs-conf {
font-size: 11px; font-weight: 700;
font-family: 'IBM Plex Mono', monospace;
color: var(--txm); min-width: 36px; text-align: right;
}
.mgr-subs-row--great .mgr-subs-conf { color: var(--green); }
.mgr-subs-row--good .mgr-subs-conf { color: var(--green); }
.mgr-subs-row--warn .mgr-subs-conf { color: var(--amber); }
.mgr-subs-row--bad .mgr-subs-conf { color: var(--red); }
@media (max-width: 1100px) {
.mgr-subs-rail { display: none; }
}
/* ===== Manager — Inspector rail =======================================
Replaces the substitutions panel. Two stacked sections:
1. Focus search — find any employee / bus / student / run
2. Run inspector — base depart + every stop, target vs actual + delta
Loads when a card is clicked or a search result is picked. */
.mgr-insp-rail {
flex: 0 0 320px; max-width: 320px;
background: var(--surf2); border-left: 1px solid var(--bdr);
display: flex; flex-direction: column;
overflow: hidden;
/* min-height: 0 lets this flex column shrink properly inside .lay so the
inner .mgr-insp-body (overflow-y:auto) actually scrolls instead of
pushing the whole rail past its container. */
min-height: 0;
font-family: 'IBM Plex Sans', sans-serif;
}
.mgr-insp-search {
position: relative;
padding: 10px 12px; border-bottom: 1px solid var(--bdr);
background: var(--surf);
}
.mgr-insp-q {
width: 100%; box-sizing: border-box;
padding: 7px 10px;
font-family: 'IBM Plex Sans', sans-serif; font-size: 12.5px;
color: var(--tx); background: var(--surf2);
border: 1px solid var(--bdr2); border-radius: 4px;
outline: none;
}
.mgr-insp-q:focus { border-color: var(--blue); box-shadow: 0 0 0 2px rgba(45,74,120,.10); }
.mgr-insp-results {
position: absolute; top: 100%; left: 12px; right: 12px;
background: var(--surf); border: 1px solid var(--bdr); border-radius: 4px;
box-shadow: 0 6px 18px rgba(0,0,0,.10);
max-height: 380px; overflow-y: auto;
z-index: 20;
margin-top: 2px;
}
.mgr-insp-loading, .mgr-insp-empty-results, .mgr-insp-err {
padding: 10px 12px; color: var(--txm); font-size: 12px; text-align: left;
}
.mgr-insp-err { color: var(--red); }
.mgr-insp-result {
display: grid; grid-template-columns: 64px 1fr auto; gap: 8px;
align-items: baseline;
width: 100%; padding: 7px 10px;
background: transparent; border: 0; border-bottom: 1px solid var(--bdr);
text-align: left; cursor: pointer;
font-family: inherit;
}
.mgr-insp-result:last-child { border-bottom: 0; }
.mgr-insp-result:hover { background: var(--surf2); }
.mgr-insp-result-kind {
font-size: 9.5px; font-weight: 700; letter-spacing: .04em;
text-transform: uppercase; color: var(--txm);
padding: 1px 5px; border: 1px solid var(--bdr2); border-radius: 99px;
background: var(--surf2);
width: max-content;
}
.mgr-insp-result--employee .mgr-insp-result-kind { color: var(--blue); border-color: var(--blue); }
.mgr-insp-result--run .mgr-insp-result-kind { color: var(--green); border-color: var(--green); }
.mgr-insp-result--student .mgr-insp-result-kind { color: var(--amber); border-color: var(--amber); }
.mgr-insp-result-label { font-size: 12.5px; font-weight: 600; color: var(--tx); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mgr-insp-result-sub { font-size: 10.5px; color: var(--txm); white-space: nowrap; }
/* Body — the run inspector itself */
.mgr-insp-body { overflow-y: auto; padding: 12px; flex: 1; }
.mgr-insp-empty {
text-align: left; padding: 18px 8px;
}
.mgr-insp-empty-h { font-size: 13px; font-weight: 700; color: var(--tx); margin-bottom: 6px; }
.mgr-insp-empty-b { font-size: 11.5px; color: var(--txm); line-height: 1.4; max-width: 28ch; }
.mgr-insp-head {
display: flex; align-items: flex-start; justify-content: space-between;
gap: 12px; padding-bottom: 10px;
border-bottom: 1px solid var(--bdr);
}
.mgr-insp-head-l { min-width: 0; }
.mgr-insp-head-r { text-align: right; }
.mgr-insp-run { font-family: 'IBM Plex Mono', monospace; font-size: 16px; font-weight: 700; color: var(--tx); line-height: 1.1; }
.mgr-insp-school { font-size: 10.5px; color: var(--txm); margin-top: 3px; }
.mgr-insp-people { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; }
.mgr-insp-emp, .mgr-insp-emp-link {
display: inline-flex; align-items: baseline; gap: 6px;
font-size: 11.5px; font-weight: 600; color: var(--tx);
background: none; border: 0; padding: 0; font-family: inherit; text-align: left;
}
.mgr-insp-emp-lbl {
font-size: 9px; font-weight: 700; letter-spacing: .06em;
color: var(--txm); width: 22px;
}
.mgr-insp-emp-link { cursor: pointer; color: var(--blue); }
.mgr-insp-emp-link:hover { text-decoration: underline; }
.mgr-insp-emp-link .mgr-insp-emp-lbl { color: var(--txm); }
.mgr-insp-bus-row { font-family: 'IBM Plex Mono', monospace; font-size: 13px; font-weight: 700; color: var(--tx); }
.mgr-insp-bus { color: var(--tx); }
.mgr-insp-bus-planned { color: var(--txm); font-weight: 500; text-decoration: line-through; opacity: .75; }
.mgr-insp-bus-inferred { color: var(--green); font-weight: 700; }
.mgr-insp-phase {
display: inline-block; margin-top: 4px;
font-size: 9.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
padding: 1px 6px; border-radius: 99px;
background: var(--surf2); color: var(--txm); border: 1px solid var(--bdr2);
}
.mgr-insp-phase--green { color: var(--green); border-color: var(--green); background: rgba(45,95,63,.06); }
.mgr-insp-phase--yellow { color: var(--amber); border-color: var(--amber); background: rgba(184,134,11,.08); }
.mgr-insp-phase--red { color: var(--red); border-color: var(--red); background: rgba(167,48,39,.06); }
/* Base depart row */
.mgr-insp-base {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
margin: 12px 0; padding: 10px;
border-radius: 6px; background: var(--surf);
border: 1px solid var(--bdr2);
border-left: 3px solid var(--bdr2);
}
.mgr-insp-base--on { border-left-color: var(--green); }
.mgr-insp-base--late { border-left-color: var(--amber); }
.mgr-insp-base--verylate { border-left-color: var(--red); }
.mgr-insp-base--pending { border-left-color: var(--bdr2); }
.mgr-insp-base-lbl { font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--txm); }
.mgr-insp-base-times { display: flex; align-items: baseline; gap: 10px; font-family: 'IBM Plex Mono', monospace; }
.mgr-insp-base-t { display: flex; flex-direction: column; align-items: flex-end; }
.mgr-insp-base-t-lbl { font-size: 8.5px; color: var(--txd); letter-spacing: .04em; text-transform: uppercase; }
.mgr-insp-base-t-val { font-size: 12px; font-weight: 600; color: var(--tx); }
.mgr-insp-base-d { font-size: 12px; font-weight: 700; color: var(--tx); min-width: 32px; text-align: right; }
/* Stops list */
.mgr-insp-stops {
display: flex; flex-direction: column; gap: 4px;
}
.mgr-insp-stops-h {
display: flex; justify-content: space-between; align-items: baseline;
font-size: 10.5px; font-weight: 700; color: var(--txm); letter-spacing: .04em; text-transform: uppercase;
margin-bottom: 4px;
}
.mgr-insp-stops-count { color: var(--tx); }
.mgr-insp-stops-empty { padding: 12px; color: var(--txm); font-size: 11.5px; text-align: center; }
.mgr-insp-stop {
display: grid; grid-template-columns: 22px 1fr auto;
gap: 8px; align-items: center;
padding: 6px 8px;
background: var(--surf); border: 1px solid var(--bdr2); border-radius: 4px;
border-left: 3px solid var(--bdr2);
}
.mgr-insp-stop--on { border-left-color: var(--green); }
.mgr-insp-stop--late { border-left-color: var(--amber); }
.mgr-insp-stop--verylate { border-left-color: var(--red); }
.mgr-insp-stop--visited { border-left-color: var(--blue); }
.mgr-insp-stop--pending { opacity: .65; }
.mgr-insp-stop-ord {
font-family: 'IBM Plex Mono', monospace;
font-size: 11px; font-weight: 700; color: var(--txm);
text-align: center;
}
.mgr-insp-stop-body { min-width: 0; }
.mgr-insp-stop-stu { font-size: 11.5px; font-weight: 600; color: var(--tx); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Clickable student name in the inspector — render the button as a link so
the row still reads as a name, not a button. Underline on hover only. */
.mgr-insp-stu-link {
background: none; border: 0; padding: 0;
font: inherit; color: var(--blue); cursor: pointer;
text-align: left;
}
.mgr-insp-stu-link:hover { text-decoration: underline; }
.mgr-insp-stu-link:focus { outline: none; text-decoration: underline; }
.mgr-insp-stop-addr { font-size: 10px; color: var(--txm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mgr-insp-stop-times {
display: flex; flex-direction: column; align-items: flex-end;
font-family: 'IBM Plex Mono', monospace; font-size: 10.5px;
line-height: 1.3;
}
.mgr-insp-stop-target { color: var(--txm); }
.mgr-insp-stop-actual { color: var(--tx); font-weight: 600; }
.mgr-insp-stop-delta { color: var(--txm); font-weight: 700; }
.mgr-insp-stop--on .mgr-insp-stop-delta { color: var(--green); }
.mgr-insp-stop--late .mgr-insp-stop-delta { color: var(--amber); }
.mgr-insp-stop--verylate .mgr-insp-stop-delta { color: var(--red); }
/* Card highlight when invoked from search */
.dc.mgr-insp-hi {
box-shadow: 0 0 0 2px var(--blue), 0 4px 12px rgba(45,74,120,.18);
transition: box-shadow .18s;
}
@media (max-width: 1100px) {
.mgr-insp-rail { display: none; }
}
/* ===== Optimize Route — side-by-side compare panel =================
Reuses the floating .mp-compare host (same id/class) but the body
structure is new: .mp-cmp-* with a 2-column grid for current vs
proposed and editable per-student dwell inputs in the proposed col. */
.mp-compare {
/* override the existing 460px width — side-by-side needs more room */
width: 720px;
max-height: 65vh;
display: flex; flex-direction: column;
overflow: hidden;
}
.mp-cmp-h {
display: flex; align-items: flex-start; justify-content: space-between;
gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--bdr);
background: var(--surf2);
}
.mp-cmp-title { font-size: 13.5px; font-weight: 700; color: var(--tx); }
.mp-cmp-sub { font-size: 11px; color: var(--txm); margin-top: 2px; line-height: 1.3; }
.mp-cmp-actions { display: flex; gap: 6px; flex-shrink: 0; }
.mp-cmp-reopt {
padding: 4px 8px; font-size: 11.5px;
background: var(--green); color: white;
border: 1px solid var(--green); border-radius: 4px;
}
.mp-cmp-reopt:hover { filter: brightness(0.92); }
.mp-cmp-close {
padding: 4px 8px; font-size: 12px;
background: var(--surf); border: 1px solid var(--bdr2); color: var(--txm);
border-radius: 4px;
}
.mp-cmp-grid {
display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
background: var(--bdr); overflow-y: auto; flex: 1;
}
.mp-cmp-col { background: var(--surf); }
.mp-cmp-col-h {
padding: 6px 10px; font-size: 11px; font-weight: 700;
letter-spacing: .04em; color: white; text-align: center;
position: sticky; top: 0; z-index: 1;
}
.mp-cmp-col-h--old { background: #C62828; }
.mp-cmp-col-h--new { background: #1565C0; }
.mp-cmp-row {
display: grid; grid-template-columns: 22px 54px 1fr auto; gap: 6px;
align-items: center; padding: 4px 8px; font-size: 11.5px;
border-bottom: 1px solid var(--bdr);
}
.mp-cmp-col--old .mp-cmp-row { grid-template-columns: 22px 54px 1fr; }
.mp-cmp-row:last-child { border-bottom: none; }
.mp-cmp-row--anchor {
background: var(--surf2); color: var(--txm); font-style: italic;
}
.mp-cmp-row--moved {
background: rgba(255,193,7,0.10);
border-left: 3px solid #FF8F00;
}
/* Combined-sweep sibling rows — stops that belong to a paired run (e.g.,
LN-5 stops shown alongside CLV-1 because the bus does both back-to-back).
Slightly muted background + a discreet left rail in amber so the
dispatcher sees segment boundaries without losing the rows entirely. */
.mp-cmp-row--sibling {
background: rgba(255,193,7,0.04);
border-left: 2px dashed rgba(255,143,0,0.6);
}
.mp-cmp-row--sibling .mp-cmp-label,
.mp-cmp-row--sibling .mp-cmp-time { color: var(--txm); }
.mp-cmp-runtag {
display: inline-block; margin-left: 6px;
padding: 0 5px; border-radius: 2px;
background: var(--amber); color: #fff;
font-size: 9.5px; font-weight: 700; letter-spacing: .04em;
line-height: 14px; vertical-align: middle;
}
/* Inline legend note that lives next to the swatches but reads as helper
text rather than as a legend entry. */
.adj-leg-note { color: var(--txm); font-style: italic; }
/* Endpoint rows — depot leave and school arrival — shown alongside the
numbered address stops so the dispatcher sees the full picture (when
the bus leaves the yard, when it lands at school). Visually quiet so
they don't look like reorderable stops. */
.mp-cmp-row--endpoint {
background: var(--surf2);
border-left: 3px solid var(--bdr2);
}
.mp-cmp-row--endpoint .mp-cmp-pos {
color: var(--txm);
font-family: 'IBM Plex Sans', sans-serif;
font-size: 11px;
text-align: center;
}
.mp-cmp-row--endpoint .mp-cmp-label {
color: var(--tx);
font-style: italic;
}
.mp-cmp-row--endpoint .mp-cmp-label b {
font-style: normal;
font-weight: 700;
color: var(--txm);
text-transform: uppercase;
letter-spacing: .04em;
font-size: 10.5px;
}
.mp-cmp-row--depot { border-left-color: #6D4C41; } /* depot — brown */
.mp-cmp-row--school { border-left-color: #1565C0; } /* school — blue */
.mp-cmp-pos {
font-family: 'IBM Plex Mono', monospace; font-size: 10px;
color: var(--txm); text-align: right;
}
.mp-cmp-time {
font-family: 'IBM Plex Mono', monospace; font-size: 11px;
font-weight: 600; color: var(--tx);
}
.mp-cmp-col--new .mp-cmp-time { color: #1565C0; }
.mp-cmp-col--old .mp-cmp-time { color: #C62828; }
.mp-cmp-label {
font-size: 11.5px; color: var(--tx);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mp-cmp-dwell {
display: inline-flex; align-items: center; gap: 3px;
font-size: 10.5px;
}
.mp-cmp-dwell-input {
width: 44px; padding: 1px 4px;
font-family: 'IBM Plex Mono', monospace; font-size: 11px;
border: 1px solid var(--bdr2); border-radius: 3px;
background: var(--surf); text-align: right;
transition: background .2s ease-out, border-color .15s ease-out;
}
.mp-cmp-dwell-input:focus {
outline: none; border-color: var(--green); background: var(--surf2);
}
.mp-cmp-dwell-input.is-saved {
background: rgba(45,95,63,.10); border-color: var(--green);
}
.mp-cmp-dwell-input.is-invalid {
background: rgba(167,48,39,.10); border-color: var(--red);
}
.mp-cmp-dwell-unit { color: var(--txm); font-size: 9.5px; }
.mp-cmp-dwell-obs {
display: inline-block; padding: 0 4px;
font-family: 'IBM Plex Mono', monospace; font-size: 9.5px;
background: var(--surf2); border: 1px solid var(--bdr2);
border-radius: 2px; color: var(--txm); cursor: help;
}
.mp-cmp-dwell-obs--none { opacity: .35; }
@media (max-width: 1100px) {
.mp-compare { width: calc(100vw - 40px); }
.mp-cmp-grid { grid-template-columns: 1fr; }
}
/* ===== Adjust Student — multi-step flow =============================== */
.adj-step-head {
padding: 10px 12px; border-bottom: 1px solid var(--bdr);
background: var(--surf2);
}
.adj-student { font-size: 14px; font-weight: 700; color: var(--tx); }
.adj-student-sub { font-size: 11.5px; color: var(--txm); margin-top: 2px; line-height: 1.4; }
/* Placement-mode picker — surfaced when the dispatcher is dropping an
unrouted student. School + direction toggle + the student's pickup or
dropoff address. Filters the candidate run list below. */
.adj-placement-picker {
margin-top: 8px;
padding: 8px 10px;
background: var(--surf);
border: 1px solid var(--bdr);
border-radius: 6px;
display: flex; flex-direction: column; gap: 6px;
}
.adj-pick-row {
display: grid;
grid-template-columns: 82px 1fr;
align-items: center;
gap: 8px;
}
.adj-pick-lbl { font-size: 11px; font-weight: 600; color: var(--txm); text-transform: uppercase; letter-spacing: .04em; }
.adj-pick-input { font-size: 12.5px; color: var(--tx); width: 100%; padding: 4px 6px; }
select.adj-pick-input { background: var(--surf2); border: 1px solid var(--bdr); border-radius: 4px; }
.adj-pick-dir { display: flex; gap: 4px; }
.adj-pick-dir-btn {
flex: 1; padding: 6px 8px;
font-size: 11.5px; font-weight: 600;
color: var(--txm); background: var(--surf2);
border: 1px solid var(--bdr); border-radius: 4px;
cursor: pointer; transition: background .12s;
}
.adj-pick-dir-btn:hover { background: var(--surf3); }
.adj-pick-dir-btn.is-on { background: var(--blue); color: #fff; border-color: var(--blue); }
.adj-pick-addr .adj-pick-input { font-style: italic; color: var(--txm); }
/* Source-step CTA card for placing the student into a direction they
don't currently have a run in. Dashed border to read as "empty slot"
vs. the solid existing-run cards above. */
.adj-card--add {
border-style: dashed;
background: var(--surf2);
color: var(--txm);
}
.adj-card--add:hover { background: var(--surf3); color: var(--tx); }
.adj-card--add .adj-card-run { font-weight: 600; }
.adj-card--add .adj-card-dir { font-style: italic; color: var(--txm); }
/* ─── Split-route configuration step ─────────────────────────────────
Reached via the "Split route" button on the preview step. Two side
columns (source / new) with live recomputed stats, plus a roster of
students with per-student side toggles. */
.adj-split { padding: 8px 0 4px; }
.adj-split-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.adj-split-col {
border: 1px solid var(--bdr); border-radius: 6px;
background: var(--surf2);
padding: 8px 10px;
}
.adj-split-col header {
display: flex; justify-content: space-between; align-items: baseline;
margin-bottom: 6px;
}
.adj-split-col-title { font-weight: 700; font-size: 13px; color: var(--tx); }
.adj-split-col-count { font-size: 11.5px; color: var(--txm); }
.adj-split-col--source { border-top: 3px solid #A73027; }
.adj-split-col--new { border-top: 3px solid #2D5F3F; }
.adj-split-stats { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
.adj-split-stats--empty,
.adj-split-stats--err {
font-size: 11.5px; color: var(--txm); font-style: italic;
grid-column: 1 / -1;
}
.adj-split-stats--err { color: var(--red); }
.adj-split-stat {
display: flex; flex-direction: column;
background: var(--surf); border: 1px solid var(--bdr); border-radius: 4px;
padding: 4px 6px;
}
.adj-split-stat span { font-size: 10px; color: var(--txm); text-transform: uppercase; letter-spacing: .04em; }
.adj-split-stat b { font-size: 13px; color: var(--tx); margin-top: 1px; }
.adj-split-roster { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.adj-split-row {
display: grid; grid-template-columns: 1fr auto;
align-items: center; gap: 12px;
padding: 6px 10px;
background: var(--surf2);
border: 1px solid var(--bdr); border-radius: 4px;
}
.adj-split-row--me { border-color: #2D5F3F; background: rgba(45,95,63,.06); }
.adj-split-name { font-size: 12.5px; color: var(--tx); }
.adj-split-name .adj-split-sub {
display: block; font-size: 11px; color: var(--txm); margin-top: 1px;
}
.adj-split-tag {
display: inline-block; margin-left: 4px;
padding: 1px 6px; border-radius: 8px;
background: #2D5F3F; color: #fff;
font-size: 9.5px; font-weight: 700; letter-spacing: .04em;
}
.adj-split-toggle { display: flex; gap: 3px; }
.adj-split-toggle-btn {
font-size: 11px; font-weight: 600;
padding: 4px 8px;
color: var(--txm); background: var(--surf);
border: 1px solid var(--bdr); border-radius: 4px;
cursor: pointer; transition: background .12s;
}
.adj-split-toggle-btn:hover { background: var(--surf3); }
.adj-split-toggle-btn.is-on { background: var(--blue); color: #fff; border-color: var(--blue); }
.adj-split-loading {
font-size: 11.5px; color: var(--txm); font-style: italic;
margin: 0 0 8px;
}
.adj-split { color: var(--tx); }
/* ─── Modify Routes (Routing → Modify Routes) ───────────────────────
Two-pane layout: pickers row across the top, then map (left) +
sidebar of route cards (right). Sidebar mirrors the look of Build
Routes' right panel — expandable route cards with student lists.
When the dispatcher picks a source student + destination route the
Adjust panel mounts inline over the sidebar. */
.rt-modify { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.rt-modify-pickers {
display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
padding: 10px 14px;
background: var(--surf2);
border-bottom: 1px solid var(--bdr);
}
.rt-modify-picker { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--tx); }
.rt-modify-picker span { color: var(--txm); text-transform: uppercase; font-size: 10.5px; letter-spacing: .04em; }
.rt-modify-picker select {
font-size: 12.5px; padding: 4px 8px;
background: var(--surf); border: 1px solid var(--bdr); border-radius: 4px;
color: var(--tx);
min-width: 160px;
}
.rt-modify-dir { display: inline-flex; gap: 4px; }
.rt-modify-dir-btn {
font-size: 11.5px; font-weight: 600;
padding: 5px 10px;
color: var(--txm); background: var(--surf);
border: 1px solid var(--bdr); border-radius: 4px;
cursor: pointer; transition: background .12s;
}
.rt-modify-dir-btn:hover { background: var(--surf3); }
.rt-modify-dir-btn.is-on { background: var(--blue); color: #fff; border-color: var(--blue); }
.rt-modify-counts { margin-left: auto; font-size: 11.5px; color: var(--txm); }
.rt-modify-body { display: grid; grid-template-columns: 1fr 460px; gap: 0; flex: 1; min-height: 0; }
.rt-modify-map { background: var(--surf2); border-right: 1px solid var(--bdr); min-height: 0; }
.rt-modify-side {
overflow-y: auto;
padding: 10px 12px;
background: var(--surf);
min-height: 0;
}
.rt-modify-loading,
.rt-modify-empty { font-size: 12px; color: var(--txm); font-style: italic; padding: 4px 0; }
.rt-modify-err { font-size: 12px; color: var(--red); padding: 4px 0; }
.rt-modify-move-banner {
margin-bottom: 8px;
padding: 8px 10px;
background: rgba(45,95,63,.10);
border: 1px solid #2D5F3F; border-radius: 4px;
font-size: 12px; color: var(--tx);
}
.rt-modify-move-banner .btn { margin-left: 8px; padding: 3px 8px; font-size: 11px; }
.rt-modify-routes { display: flex; flex-direction: column; gap: 6px; }
.rt-modify-route {
background: var(--surf2);
border: 1px solid var(--bdr); border-radius: 4px;
}
.rt-modify-route.is-target { border-color: var(--blue); }
.rt-modify-route header {
display: flex; align-items: center; justify-content: space-between;
padding: 6px 8px;
gap: 8px;
}
.rt-modify-route-expand {
background: none; border: none; cursor: pointer;
color: var(--tx); font-size: 12.5px; text-align: left;
flex: 1;
}
.rt-modify-route-expand b { margin-right: 6px; }
.rt-modify-route-meta { color: var(--txm); font-size: 11px; }
.rt-modify-pick-target {
padding: 4px 10px; font-size: 11.5px;
background: var(--blue); color: #fff; border-color: var(--blue);
}
.rt-modify-reopt {
padding: 3px 8px; font-size: 11px;
background: var(--surf); color: var(--txm);
border: 1px solid var(--bdr); border-radius: 4px;
cursor: pointer;
}
.rt-modify-reopt:hover { background: var(--surf3); color: var(--tx); }
.rt-modify-reopt:disabled { opacity: .55; cursor: default; }
.rt-modify-students { list-style: none; margin: 0; padding: 0 8px 8px; }
.rt-modify-student {
display: grid; grid-template-columns: 32px 70px 1fr auto;
align-items: center; gap: 8px;
padding: 5px 6px;
border-top: 1px solid var(--bdr);
font-size: 11.5px;
}
.rt-modify-student.is-source { background: rgba(45,95,63,.12); }
.rt-modify-stop-order { font-weight: 700; color: var(--txm); text-align: center; }
.rt-modify-stop-time { color: var(--txm); }
.rt-modify-stop-name { color: var(--tx); }
.rt-modify-stop-addr { display: block; color: var(--txm); font-size: 10.5px; margin-top: 1px; }
.rt-modify-pick-source {
padding: 3px 8px; font-size: 11px;
background: var(--surf); color: var(--tx);
border: 1px solid var(--bdr); border-radius: 4px;
cursor: pointer;
}
.rt-modify-pick-source:hover { background: var(--surf3); }
.rt-modify-student.is-source .rt-modify-pick-source { background: #2D5F3F; color: #fff; border-color: #2D5F3F; }
/* Adjust overlay slot — fills the sidebar when active. */
.rt-modify-adjust { height: 100%; }
/* Panel-mode (Map page) — the whole thing IS the sidebar, no map pane. */
.rt-modify--panel { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.rt-modify--panel .rt-modify-side { flex: 1; }
.rt-modify-close {
position: absolute; top: 8px; right: 10px;
padding: 3px 8px; font-size: 11px;
background: var(--surf); color: var(--txm);
border: 1px solid var(--bdr); border-radius: 4px;
cursor: pointer;
}
.rt-modify-close:hover { background: var(--surf3); color: var(--tx); }
.rt-modify--panel { position: relative; }
/* Preview step legend — describes the per-stop position-change markers
shown on the map. The BEFORE polyline overlay was retired because the
two paths overlap heavily and obscured the change. */
.adj-preview-legend {
display: flex; flex-wrap: wrap; gap: 14px;
margin-top: 8px; padding-top: 6px;
border-top: 1px dashed var(--bdr);
font-size: 10.5px; color: var(--txm);
}
.adj-leg-item { display: inline-flex; align-items: center; gap: 6px; }
/* ─── Per-stop change marker (map + legend) ──────────────────────────
Pill that sits at each student's pickup. Numbers reflect the FULL
combined-sweep position (so a CLV-1 stop after LN-5 might be numbered 5,
not 3). Three states:
same — solid gray-ish, just the new number
changed — amber, shows BEFORE→AFTER
new — green, AFTER number + NEW badge
The .--legend variant shrinks the pill for the inline legend chip. */
.adj-stopmark {
display: inline-flex; align-items: center; gap: 3px;
padding: 2px 7px; border-radius: 10px;
font-family: 'IBM Plex Sans', sans-serif;
font-size: 11px; font-weight: 700; line-height: 1.1;
color: #fff;
box-shadow: 0 1px 3px rgba(0,0,0,.25);
white-space: nowrap;
cursor: default;
}
.adj-stopmark--same {
background: #455A64; /* slate — neutral, recedes */
}
.adj-stopmark--changed {
background: var(--amber); /* shifted position — needs attention */
}
.adj-stopmark--new {
background: var(--green); /* inserted student — primary signal */
}
.adj-stopmark-n { font-weight: 700; letter-spacing: .02em; }
.adj-stopmark-tag {
font-size: 8.5px; font-weight: 800; letter-spacing: .06em;
padding: 0 4px; border-radius: 3px;
background: rgba(255,255,255,0.22);
}
.adj-stopmark--legend {
font-size: 9.5px; padding: 1px 6px;
box-shadow: none;
}
.adj-stopmark--legend .adj-stopmark-tag { font-size: 7.5px; padding: 0 3px; }
.adj-session-row {
display: flex; align-items: center; gap: 8px;
padding: 8px 12px 4px;
}
.adj-session-label {
font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em;
color: var(--txm);
}
.adj-session-pick {
flex: 1 1 auto; min-width: 0;
background: var(--surf); color: var(--tx);
border: 1px solid var(--bdr2); border-radius: 4px;
padding: 4px 6px; font-size: 12px;
font-family: 'IBM Plex Sans', sans-serif;
}
.adj-list {
display: flex; flex-direction: column; gap: 6px;
padding: 10px 12px;
}
.adj-card {
display: block; text-align: left; width: 100%;
padding: 8px 10px;
background: var(--surf); border: 1px solid var(--bdr2);
border-radius: 5px; cursor: pointer;
font-family: 'IBM Plex Sans', sans-serif;
}
.adj-card:hover { background: var(--surf2); border-color: var(--green); }
.adj-card-h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.adj-card-run { font-size: 13.5px; font-weight: 700; color: var(--tx); }
.adj-card-dir { font-size: 10.5px; color: var(--txm); }
.adj-card-meta { font-size: 11px; color: var(--txm); margin-top: 2px; }
.adj-card-meta b { color: var(--tx); }
.adj-back {
margin: 12px; padding: 6px 10px;
background: var(--surf2); color: var(--txm);
border: 1px solid var(--bdr2); border-radius: 4px;
font-size: 11.5px; cursor: pointer;
}
.adj-back:hover { background: var(--surf); color: var(--tx); }
/* Step 4 — Preview */
.adj-preview { padding: 10px 12px; overflow-y: auto; max-height: calc(100vh - 220px); }
.adj-preview-summary {
display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
margin-bottom: 12px;
}
.adj-stat {
padding: 6px 10px; background: var(--surf2);
border: 1px solid var(--bdr); border-radius: 4px;
}
.adj-stat-lbl { font-size: 10px; color: var(--txm); text-transform: uppercase; letter-spacing: .04em; }
.adj-stat-val { font-size: 13.5px; color: var(--tx); margin-top: 2px; }
.adj-stat-val.is-good { color: var(--green); }
.adj-stat-val.is-warn { color: var(--amber); }
.adj-stat-val b { font-weight: 700; }
.adj-preview-pair {
display: flex; flex-direction: column; gap: 14px;
}
.adj-preview-section {
background: var(--surf); border: 1px solid var(--bdr);
border-radius: 6px; padding: 8px 10px;
}
.adj-preview-section-h { font-size: 12px; font-weight: 700; color: var(--tx); margin-bottom: 6px; }
.adj-preview-compare {
position: static; width: auto; max-height: none;
margin: 0; box-shadow: none; border: 1px solid var(--bdr);
border-radius: 4px;
}
.adj-preview-compare .mp-cmp-grid { max-height: 220px; }
.adj-preview-note {
margin-top: 6px; font-size: 10.5px; color: var(--txm);
line-height: 1.4; font-style: italic;
}
/* Empty AFTER column shown before "Compute move" is clicked, or when the
optimizer excluded the chosen run (with an explanatory message). */
.adj-after-placeholder {
padding: 18px 12px;
font-size: 11px; color: var(--txm);
text-align: center; font-style: italic;
background: rgba(0,0,0,0.02);
}
.adj-after-placeholder.is-warn {
color: var(--amber, #B7791F); font-style: normal;
background: rgba(255, 196, 0, 0.06);
border-top: 1px solid rgba(255, 196, 0, 0.25);
}
.adj-after-placeholder b { color: var(--tx); }
/* "Place anyway" override button + hint shown under the wheelchair-bus
exclusion placeholder. Lets the dispatcher stage a wheelchair student
onto a non-accessible bus, with a clear caution to reconcile later. */
.adj-force-wc {
display: block; width: 100%;
margin: 8px 0 4px;
padding: 8px 12px;
font-size: 11px; font-weight: 600;
background: var(--amber, #B7791F); color: #fff;
border: none; border-radius: 4px;
cursor: pointer;
}
.adj-force-wc:hover { filter: brightness(1.08); }
.adj-after-hint {
padding: 4px 12px 12px;
font-size: 10px; color: var(--txm);
text-align: center; line-height: 1.4;
}
/* Caution chip rendered above the AFTER manifest when the proposal only
exists because p_force_wheelchair bypassed the gate. */
.adj-after-warn {
margin: 0; padding: 6px 10px;
font-size: 10px; font-weight: 600;
color: var(--amber, #B7791F);
background: rgba(255, 196, 0, 0.08);
border-bottom: 1px solid rgba(255, 196, 0, 0.25);
text-align: center;
}
.adj-preview-actions {
display: flex; flex-wrap: wrap; gap: 6px;
margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--bdr);
align-items: center;
}
.adj-preview-actions .btn,
.adj-preview-actions .adj-back,
.adj-preview-actions .adj-approve,
.adj-preview-actions .adj-print {
font-size: 11.5px;
padding: 6px 10px;
white-space: nowrap;
line-height: 1.2;
flex: 0 1 auto;
}
.adj-preview-actions .adj-back { margin-right: auto; }
.adj-preview-actions .adj-approve { font-weight: 700; }
.adj-approve, .adj-commit {
padding: 8px 14px; background: var(--green); color: white;
border: 1px solid var(--green); border-radius: 4px;
font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.adj-approve:hover, .adj-commit:hover { filter: brightness(0.92); }
.adj-commit:disabled { opacity: .6; cursor: default; }
/* Print-headsheet button — distinct from Approve (green) so the dispatcher
can't accidentally pick the wrong action. Uses an amber accent. */
.adj-print {
padding: 8px 14px; background: #fff; color: var(--amber);
border: 1px solid var(--amber); border-radius: 4px;
font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.adj-print:hover { background: rgba(184,134,11,.07); }
/* Step 5 — Confirm */
.adj-confirm-summary {
padding: 12px 14px; margin: 0 12px 12px;
background: rgba(45,95,63,0.06);
border: 1px solid var(--green); border-radius: 4px;
font-size: 12px; color: var(--tx); line-height: 1.6;
}
.adj-confirm-summary b { font-weight: 700; }
.adj-confirm-actions {
display: flex; justify-content: space-between; gap: 8px; padding: 0 12px;
}
.adj-confirm-note { padding: 10px 12px; font-size: 12px; }
.rt-ok { color: var(--green); font-weight: 600; }
/* ===== Route info popup (shared between Run view + Adjust) =========== */
/* ─── Quick Edit (routing/quick-edit.js) ──────────────────────────── */
.qe-shell {
display: flex; flex-direction: column;
height: 100%;
font-family: 'IBM Plex Sans', sans-serif;
color: var(--tx);
background: var(--surf);
}
.qe-head {
display: flex; align-items: center; gap: 16px;
padding: 10px 14px;
background: var(--surf2);
border-bottom: 1px solid var(--bdr);
}
.qe-head-title { font-size: 15px; font-weight: 700; }
.qe-head-meta { font-size: 11.5px; color: var(--txm); flex: 1 1 auto; }
.qe-head-session {
display: flex; align-items: center; gap: 6px;
font-size: 11.5px; color: var(--txm);
}
.qe-head-session select {
font-size: 12px; padding: 3px 6px;
background: var(--surf); color: var(--tx);
border: 1px solid var(--bdr); border-radius: 4px;
}
.qe-flash {
padding: 8px 14px; font-size: 12px;
display: flex; justify-content: space-between; align-items: center;
}
.qe-flash--ok { background: #E8F0E4; color: #2D5F3F; border-bottom: 1px solid #B6CDB1; }
.qe-flash--amber { background: #FFF1D6; color: #8B5A00; border-bottom: 1px solid #E6C77B; }
.qe-flash--red { background: #FBEDEA; color: #A73027; border-bottom: 1px solid #D4A89E; }
.qe-flash-x {
background: transparent; border: 0; color: inherit;
font-size: 16px; cursor: pointer; padding: 0 4px; line-height: 1;
}
.qe-body {
display: grid; grid-template-columns: 1fr 320px;
gap: 14px; padding: 14px;
flex: 1 1 auto;
overflow: auto;
}
.qe-main { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.qe-side { min-width: 0; }
.qe-toolbar {
display: flex; gap: 8px; margin-bottom: 8px;
}
.qe-act--add {
background: #C68A00; color: #fff; border-color: #8B5A00;
}
.qe-act--add:hover { background: #B07900; }
.qe-pick--form .qe-form {
display: flex; flex-direction: column; gap: 10px;
padding: 0 16px 12px;
}
.qe-pick--form .qe-form label {
display: flex; flex-direction: column; gap: 4px;
font-size: 11.5px; color: var(--txm);
}
.qe-pick--form .qe-form select,
.qe-pick--form .qe-form input {
padding: 7px 9px; font-size: 13px;
background: var(--surf2); color: var(--tx);
border: 1px solid var(--bdr); border-radius: 4px;
}
.qe-form-foot {
display: flex; justify-content: flex-end; gap: 8px;
padding: 0 16px 14px;
}
.qe-pick-cancel, .qe-pick-confirm {
font-size: 12px; padding: 6px 14px; border-radius: 4px; cursor: pointer;
}
.qe-pick-cancel {
background: var(--surf2); color: var(--tx); border: 1px solid var(--bdr);
}
.qe-pick-cancel:hover { background: var(--surf3); }
.qe-pick-confirm {
background: #2D5F3F; color: #fff; border: 1px solid #1F4530; font-weight: 600;
}
.qe-pick-confirm:hover:not(:disabled) { background: #25503A; }
.qe-pick-confirm:disabled { opacity: 0.6; cursor: not-allowed; }
.ab-root--quick-edit { display: flex; flex-direction: column; height: 100%; }
.ab-qe-mount { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.qe-search { position: relative; }
.qe-search input {
width: 100%; padding: 10px 12px;
font-size: 14px;
background: var(--surf2); color: var(--tx);
border: 1px solid var(--bdr); border-radius: 6px;
}
.qe-search input:focus { outline: 2px solid #2D5F3F; outline-offset: -2px; }
.qe-res-list {
position: absolute; top: 100%; left: 0; right: 0;
margin-top: 4px;
background: var(--surf); border: 1px solid var(--bdr); border-radius: 6px;
box-shadow: 0 8px 24px rgba(0,0,0,.12);
max-height: 360px; overflow-y: auto;
z-index: 30;
}
.qe-res {
display: flex; align-items: center; gap: 10px;
width: 100%; padding: 8px 12px;
background: transparent; border: 0;
border-bottom: 1px solid var(--bdr);
text-align: left; cursor: pointer;
font-size: 12.5px; color: var(--tx);
}
.qe-res:hover { background: var(--surf2); }
.qe-res-tag {
display: inline-block; padding: 2px 6px;
font-size: 10px; font-weight: 700; letter-spacing: 0.5px;
border-radius: 3px;
}
.qe-res-tag--run { background: #DCE7DE; color: #2D5F3F; }
.qe-res-tag--stu { background: #DFE9F2; color: #1F4870; }
.qe-res-tag--asg { background: #F2E7D2; color: #6B4A0C; }
.qe-res-meta { color: var(--txm); font-size: 11px; }
.qe-focus {
background: var(--surf2);
border: 1px solid var(--bdr); border-radius: 8px;
padding: 14px;
}
.qe-focus-head {
display: flex; align-items: center; justify-content: space-between;
gap: 16px; margin-bottom: 10px;
}
.qe-focus-title { display: flex; align-items: center; gap: 8px; font-size: 16px; }
.qe-focus-sub { color: var(--txm); font-size: 12px; }
.qe-focus-asg { font-size: 12px; }
.qe-warn { color: #A73027; }
.qe-tag {
display: inline-block; padding: 3px 8px;
font-size: 11px; font-weight: 700; letter-spacing: 0.5px;
border-radius: 3px;
}
.qe-tag--run { background: #DCE7DE; color: #2D5F3F; }
.qe-tag--stu { background: #DFE9F2; color: #1F4870; }
.qe-tag--asg { background: #F2E7D2; color: #6B4A0C; }
.qe-actions {
display: flex; flex-wrap: wrap; gap: 8px;
margin-bottom: 12px;
}
.qe-act {
font-size: 12px; padding: 6px 12px;
background: #2D5F3F; color: #fff; font-weight: 600;
border: 1px solid #1F4530; border-radius: 4px; cursor: pointer;
}
.qe-act:hover { background: #25503A; }
.qe-act--ghost {
background: var(--surf); color: #A73027; border-color: #D4A89E;
}
.qe-act--ghost:hover { background: #FBEDEA; border-color: #A73027; }
.qe-act--chain {
background: var(--surf); color: #6B4A0C; border-color: #C68A00;
}
.qe-act--chain:hover { background: #FBF1DA; }
.qe-chain-note {
margin: 6px 0 0; padding: 6px 10px;
background: #FBF1DA; border-left: 3px solid #C68A00;
font-size: 11.5px; color: #6B4A0C;
border-radius: 3px;
}
/* Assignment Builder chain markers — small ⛓ icons embedded in the
timeline block. Forward (continues_to set) is clickable to unlink.
Incoming (chain_origin_school_id set) is a visual indicator only. */
.ab-block.is-chained { box-shadow: inset 0 0 0 1px #C68A00; }
.ab-chain-mark {
display: inline-flex; align-items: center; justify-content: center;
position: absolute; top: 1px;
width: 14px; height: 14px;
font-size: 11px; line-height: 1;
background: #C68A00; color: #fff;
border-radius: 50%;
text-shadow: 0 1px 0 rgba(0,0,0,.25);
}
.ab-chain-mark--in { left: -7px; }
.ab-chain-mark--out { right: -7px; cursor: pointer; }
.ab-chain-mark--out:hover { background: #8B5A00; }
.qe-tbl {
width: 100%; border-collapse: collapse; font-size: 12px;
}
.qe-tbl th {
text-align: left; font-weight: 600;
padding: 6px 8px; background: var(--surf3);
border-bottom: 1px solid var(--bdr);
color: var(--txm); font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px;
}
.qe-tbl td { padding: 6px 8px; border-bottom: 1px solid var(--bdr); vertical-align: middle; }
.qe-row-num { width: 36px; color: var(--txm); font-variant-numeric: tabular-nums; }
.qe-row-time { width: 80px; color: var(--txm); font-variant-numeric: tabular-nums; }
.qe-row-name { font-weight: 600; }
.qe-row-addr { color: var(--txm); }
.qe-row-act { width: 130px; text-align: right; }
.qe-mini {
font-size: 11px; padding: 3px 8px;
background: var(--surf); color: var(--tx);
border: 1px solid var(--bdr); border-radius: 3px; cursor: pointer;
}
.qe-mini:hover { background: var(--surf3); }
.qe-strag {
background: var(--surf2);
border: 1px solid var(--bdr); border-radius: 8px;
padding: 12px;
}
.qe-strag h3 { margin: 0 0 8px; font-size: 13px; }
.qe-strag details { margin-bottom: 6px; }
.qe-strag summary {
cursor: pointer; font-size: 12px; font-weight: 600;
padding: 4px 0; display: flex; justify-content: space-between;
}
.qe-count {
background: var(--surf3); color: var(--tx);
padding: 1px 6px; border-radius: 999px; font-size: 11px; font-weight: 600;
}
.qe-strag-list { display: flex; flex-direction: column; gap: 3px; margin-top: 4px; }
.qe-strag-row {
display: flex; flex-direction: column; gap: 2px;
padding: 6px 8px; background: var(--surf);
border: 1px solid var(--bdr); border-radius: 4px;
text-align: left; cursor: pointer; font-size: 11.5px;
}
.qe-strag-row:hover { background: var(--surf3); }
.qe-strag-row span { color: var(--txm); font-size: 10.5px; }
.qe-strag-row.is-new {
background: rgba(198, 138, 0, 0.14);
border-color: #C68A00;
animation: qe-flash-new 1.6s ease-out 2;
}
.qe-strag-badge {
display: inline-block; margin-left: 6px; padding: 1px 5px;
background: #C68A00; color: #fff;
font-size: 9px; font-weight: 700; letter-spacing: 0.5px;
border-radius: 3px; vertical-align: middle;
}
@keyframes qe-flash-new {
0% { background: rgba(198, 138, 0, 0.45); }
100% { background: rgba(198, 138, 0, 0.14); }
}
.qe-empty {
padding: 16px; text-align: center; color: var(--txm);
font-size: 12px; font-style: italic;
}
.qe-empty--big { padding: 48px; font-size: 13.5px; }
/* Action picker overlay */
.qe-pick-overlay {
position: fixed; inset: 0; z-index: 10000;
background: rgba(20, 24, 35, 0.55);
display: flex; align-items: center; justify-content: center;
padding: 20px;
}
.qe-pick {
background: var(--surf); border: 1px solid var(--bdr2); border-radius: 8px;
width: min(520px, 100%);
max-height: calc(100vh - 60px);
display: flex; flex-direction: column;
box-shadow: 0 18px 60px rgba(0,0,0,.4);
}
.qe-pick header {
display: flex; align-items: center; justify-content: space-between;
padding: 12px 16px;
background: #2D5F3F; color: #fff;
border-radius: 8px 8px 0 0;
}
.qe-pick-title { font-size: 14px; font-weight: 700; }
.qe-pick-x {
background: transparent; border: 0; color: #fff;
font-size: 20px; cursor: pointer; padding: 0 6px;
}
.qe-pick-sub { padding: 8px 16px; font-size: 12px; color: var(--txm); }
.qe-pick input {
margin: 0 16px 8px; padding: 8px 10px;
font-size: 13px;
background: var(--surf2); color: var(--tx);
border: 1px solid var(--bdr); border-radius: 4px;
}
.qe-pick-list {
flex: 1 1 auto;
overflow-y: auto;
padding: 0 16px 8px;
display: flex; flex-direction: column; gap: 4px;
}
.qe-pick-row {
display: flex; gap: 10px; align-items: center;
padding: 8px 10px;
background: var(--surf2); border: 1px solid var(--bdr); border-radius: 4px;
text-align: left; cursor: pointer; font-size: 12.5px;
}
.qe-pick-row:hover { background: var(--surf3); }
.qe-pick-row span { color: var(--txm); font-size: 11px; }
.qe-pick-create {
margin: 0 16px 14px;
padding: 8px 10px;
background: #FFF1D6; color: #8B5A00;
border: 1px solid #E6C77B; border-radius: 4px;
cursor: pointer; font-size: 12px; font-weight: 600;
}
.qe-pick-create:hover { background: #FCE7B8; }
/* ─── Split Route modal (map/split-route.js) ──────────────────────── */
.mp-split-overlay {
position: fixed; inset: 0; z-index: 10001;
background: rgba(20, 24, 35, 0.55);
display: flex; align-items: center; justify-content: center;
padding: 20px;
}
.mp-split-modal {
background: var(--surf); color: var(--tx);
border: 1px solid var(--bdr2); border-radius: 8px;
box-shadow: 0 18px 60px rgba(0,0,0,.4);
width: min(880px, 100%);
max-height: calc(100vh - 40px);
display: flex; flex-direction: column;
overflow: hidden;
font-family: 'IBM Plex Sans', sans-serif;
}
.mp-split-head {
display: flex; align-items: center; justify-content: space-between;
padding: 12px 16px;
background: #2D5F3F; color: #fff;
}
.mp-split-title { font-size: 14px; font-weight: 700; }
.mp-split-x {
background: transparent; border: 0; color: #fff;
font-size: 20px; line-height: 1; cursor: pointer;
padding: 0 6px;
}
.mp-split-x:disabled { opacity: 0.4; cursor: default; }
.mp-split-body { padding: 14px 16px; overflow-y: auto; flex: 1 1 auto; }
.mp-split-loading, .mp-split-err {
padding: 24px; text-align: center; color: var(--txm);
font-style: italic;
}
.mp-split-err { color: #A73027; font-style: normal; }
.mp-split-err--inline {
margin: 10px 0 0; padding: 8px 10px;
background: #FBEDEA; border: 1px solid #D4A89E;
border-radius: 4px; text-align: left; font-size: 12px;
}
.mp-split-tools {
display: flex; align-items: center; justify-content: space-between;
gap: 12px; margin-bottom: 10px;
}
.mp-split-toolgroup { display: flex; align-items: center; gap: 6px; }
.mp-split-toollbl { font-size: 11.5px; color: var(--txm); }
.mp-split-toolbtn {
font-size: 11.5px; padding: 4px 8px;
background: var(--surf2); border: 1px solid var(--bdr);
border-radius: 4px; color: var(--tx); cursor: pointer;
}
.mp-split-toolbtn:hover { background: var(--surf3); }
.mp-split-counts { display: flex; gap: 6px; }
.mp-split-pill {
display: inline-block;
padding: 3px 10px; border-radius: 999px;
font-size: 11px; font-weight: 600;
}
.mp-split-pill--kept { background: #E8F0E4; color: #2D5F3F; border: 1px solid #B6CDB1; }
.mp-split-pill--new { background: #FFF1D6; color: #8B5A00; border: 1px solid #E6C77B; }
.mp-split-tbl {
width: 100%; border-collapse: collapse; font-size: 12px;
}
.mp-split-tbl th {
text-align: left; font-weight: 600;
padding: 6px 8px; background: var(--surf2);
border-bottom: 1px solid var(--bdr);
color: var(--txm); font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px;
}
.mp-split-tbl td { padding: 6px 8px; border-bottom: 1px solid var(--bdr); vertical-align: middle; }
.mp-split-row--new td { background: #FFFBF1; }
.mp-split-stop { font-variant-numeric: tabular-nums; color: var(--txm); width: 50px; }
.mp-split-time { font-variant-numeric: tabular-nums; width: 80px; color: var(--txm); }
.mp-split-name { font-weight: 600; }
.mp-split-addr { color: var(--txm); }
.mp-split-toggle { width: 130px; }
.mp-split-seg {
display: inline-flex; border: 1px solid var(--bdr); border-radius: 4px; overflow: hidden;
}
.mp-split-segbtn {
padding: 4px 10px; font-size: 11px;
background: var(--surf); color: var(--tx);
border: 0; cursor: pointer;
}
.mp-split-segbtn + .mp-split-segbtn { border-left: 1px solid var(--bdr); }
.mp-split-segbtn.is-on {
background: #2D5F3F; color: #fff; font-weight: 600;
}
.mp-split-segbtn[data-split-side="new"].is-on {
background: #C68A00;
}
.mp-split-empty {
text-align: center; padding: 24px;
color: var(--txm); font-style: italic;
}
.mp-split-foot {
display: flex; align-items: center; justify-content: space-between;
gap: 12px; margin-top: 14px;
padding-top: 12px; border-top: 1px solid var(--bdr);
}
.mp-split-foot-hint { font-size: 12px; color: var(--txm); }
.mp-split-foot-hint b { color: var(--tx); }
.mp-split-foot-actions { display: flex; gap: 8px; }
.mp-split-btn {
font-size: 12px; padding: 6px 14px; border-radius: 4px;
border: 1px solid var(--bdr); cursor: pointer;
}
.mp-split-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.mp-split-btn--ghost { background: var(--surf2); color: var(--tx); }
.mp-split-btn--ghost:hover:not(:disabled) { background: var(--surf3); }
.mp-split-btn--primary { background: #2D5F3F; color: #fff; border-color: #1F4530; font-weight: 600; }
.mp-split-btn--primary:hover:not(:disabled) { background: #25503A; }
.mp-rinfo {
position: fixed; z-index: 9999;
min-width: 220px; max-width: 320px;
background: var(--surf); color: var(--tx);
border: 1px solid var(--bdr2); border-radius: 6px;
box-shadow: 0 6px 20px rgba(0,0,0,.18);
font-family: 'IBM Plex Sans', sans-serif;
pointer-events: none; /* hover state */
padding: 8px 10px;
font-size: 12px;
}
.mp-rinfo[hidden] { display: none; }
.mp-rinfo--pinned {
pointer-events: auto;
box-shadow: 0 8px 28px rgba(0,0,0,.28);
border-color: var(--green);
}
.mp-rinfo-body { display: flex; flex-direction: column; gap: 3px; }
.mp-rinfo-row {
display: grid; grid-template-columns: 80px 1fr; gap: 6px;
align-items: baseline;
}
.mp-rinfo-lbl { font-size: 10px; color: var(--txm); text-transform: uppercase; letter-spacing: .04em; }
.mp-rinfo-val { font-size: 12px; color: var(--tx); }
.mp-rinfo-val.mp-rinfo-mono { font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: var(--txm); }
.mp-rinfo-tag {
display: inline-block; margin-left: 4px; padding: 0 5px;
font-size: 9px; font-weight: 700; letter-spacing: .03em;
background: rgba(45,95,63,.12); color: var(--green);
border-radius: 2px; vertical-align: 1px;
}
.mp-rinfo-close {
position: absolute; top: 4px; right: 6px;
width: 20px; height: 20px; padding: 0;
background: var(--surf2); color: var(--txm);
border: 1px solid var(--bdr2); border-radius: 4px;
cursor: pointer; font-size: 11px;
}
.mp-rinfo-close:hover { background: var(--surf); color: var(--tx); }
.mp-rinfo-action {
display: block; width: 100%; margin-top: 8px; padding: 6px 8px;
background: var(--green); color: white;
border: 1px solid var(--green); border-radius: 4px;
cursor: pointer; font-size: 12px; font-weight: 600;
font-family: 'IBM Plex Sans', sans-serif;
}
.mp-rinfo-action:hover { filter: brightness(0.92); }
/* Adjust step 3 — small helpers */
.adj-instructions {
font-size: 11.5px; color: var(--txm); margin-top: 6px; line-height: 1.45;
padding: 6px 8px; background: var(--surf); border: 1px dashed var(--bdr2); border-radius: 4px;
}
.adj-instructions b { color: var(--tx); }
.adj-color-chip {
display: inline-block; width: 10px; height: 10px; border-radius: 50%;
margin-right: 4px; vertical-align: middle;
border: 1.2px solid rgba(0,0,0,.35);
}
/* Combo run flag — runs that pick up students attending a different
school. Day-of moves onto these are usually a no-go because the
schedule is tightly negotiated; the badge tells the dispatcher
"don't even try this one." */
.adj-combo-badge {
display: inline-block; margin-left: 6px;
padding: 0 6px; border-radius: 3px;
background: var(--red); color: #fff;
font-size: 9px; font-weight: 700; letter-spacing: .05em;
line-height: 14px; vertical-align: middle;
}
.adj-card--combo {
border-color: var(--red);
background: rgba(167,48,39,.04);
}
.adj-card--combo:hover {
background: rgba(167,48,39,.08);
border-color: var(--red);
}
.adj-card-combo {
margin-top: 4px;
font-size: 10.5px; color: var(--red); font-weight: 600;
}
/* ─── Combined-with sibling block (placement mode) ────────────────────── */
.adj-combined-badge {
display: inline-block; margin-left: 6px;
padding: 0 6px; border-radius: 3px;
background: var(--amber); color: #fff;
font-size: 9px; font-weight: 700; letter-spacing: .05em;
line-height: 14px; vertical-align: middle;
}
.adj-card--combined {
/* Left rail signals the combined relationship without overpowering the
red combo treatment (combined + combo can co-exist). */
box-shadow: inset 3px 0 0 var(--amber);
}
.adj-card-sibs {
margin-top: 6px; padding-top: 6px;
border-top: 1px dashed var(--bdr);
font-size: 11px;
}
.adj-card-sibs-lbl {
font-size: 10px; font-weight: 700; letter-spacing: .04em;
text-transform: uppercase; color: var(--txm);
margin-bottom: 3px;
}
.adj-card-sib {
display: flex; align-items: baseline; gap: 6px;
margin-bottom: 2px;
}
.adj-card-sib b { color: var(--tx); }
.adj-card-sib-meta { color: var(--txm); font-size: 10.5px; }
.adj-color-chip--sm { width: 8px; height: 8px; }
/* ─── Write-ups (People → Write-ups) ──────────────────────────────────── */
/* Three-state surface:
- form : employee search + infraction picker + date + notes
- preview : the rendered write-up document (same HTML used for print)
- saved : success confirmation + new/reprint actions
Recent-list collapsed at the bottom of form/saved states. */
.wu-page {
max-width: 920px; margin: 0 auto; padding: 18px 22px 40px;
font-family: 'IBM Plex Sans', sans-serif;
}
.wu-loading, .wu-error { padding: 24px; color: var(--txm); }
.wu-error { color: var(--red); }
.wu-header {
display: flex; align-items: center; gap: 12px;
margin-bottom: 14px;
padding-bottom: 10px;
border-bottom: 1px solid var(--bdr);
}
.wu-h { font-size: 18px; font-weight: 700; color: var(--tx); margin: 0; }
.wu-h-sub { font-size: 12px; color: var(--txm); margin: 0; }
.wu-h-actions { margin-left: auto; display: flex; gap: 6px; }
.wu-back { font-size: 12px; padding: 5px 10px; }
.wu-form { display: flex; flex-direction: column; gap: 12px; }
.wu-fld {
border: 1px solid var(--bdr); border-radius: 5px;
padding: 10px 12px;
background: var(--surf);
}
.wu-fld[disabled] { opacity: .5; pointer-events: none; }
.wu-fld legend {
padding: 0 6px; font-size: 11px; font-weight: 700;
letter-spacing: .05em; text-transform: uppercase;
color: var(--txm);
}
.wu-fld input[type="date"],
.wu-fld input[type="text"],
.wu-fld textarea {
width: 100%;
padding: 7px 9px;
font: inherit; color: var(--tx);
background: var(--surf2);
border: 1px solid var(--bdr);
border-radius: 4px;
font-size: 13px;
}
.wu-fld textarea { resize: vertical; min-height: 60px; font-family: inherit; }
.wu-fld input:focus,
.wu-fld textarea:focus { outline: 2px solid rgba(45,95,63,.35); outline-offset: 0; border-color: var(--green); }
.wu-search { font-size: 14px; }
.wu-results { display: flex; flex-direction: column; gap: 3px; margin-top: 8px; max-height: 280px; overflow-y: auto; }
.wu-result {
text-align: left; padding: 7px 9px;
background: var(--surf2); border: 1px solid var(--bdr); border-radius: 4px;
font: inherit; color: var(--tx); cursor: pointer;
}
.wu-result:hover { background: var(--surf); border-color: var(--green); }
.wu-result-name { font-weight: 600; font-size: 13px; }
.wu-result-meta { font-size: 11px; color: var(--txm); margin-top: 1px; }
.wu-hint { font-size: 11.5px; color: var(--txm); font-style: italic; padding: 6px 2px; }
.wu-selected {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.wu-selected-name { font-weight: 700; font-size: 14px; color: var(--tx); }
.wu-selected-meta { font-size: 11.5px; color: var(--txm); margin-top: 1px; }
.wu-change { font-size: 11px; padding: 4px 10px; }
/* Infraction picker — categorized list with search */
.wu-inf-search {
width: 100%;
padding: 7px 10px;
font: inherit; color: var(--tx);
background: var(--surf2);
border: 1px solid var(--bdr);
border-radius: 4px;
font-size: 13px;
margin-bottom: 8px;
}
.wu-inf-search:focus { outline: 2px solid rgba(45,95,63,.35); outline-offset: 0; border-color: var(--green); }
.wu-cat-tabs {
display: flex; flex-wrap: wrap; gap: 4px;
margin-bottom: 8px;
}
.wu-cat-tab {
display: inline-flex; align-items: center; gap: 6px;
padding: 5px 10px;
background: var(--surf2);
border: 1px solid var(--bdr); border-radius: 99px;
font-size: 11.5px; font-weight: 600;
color: var(--tx);
cursor: pointer;
font-family: 'IBM Plex Sans', sans-serif;
}
.wu-cat-tab:hover:not(.is-on) { background: var(--surf); border-color: var(--green); }
.wu-cat-tab.is-on {
background: var(--green); color: #fff; border-color: var(--green);
}
.wu-cat-count {
display: inline-block;
min-width: 18px; padding: 0 5px;
background: rgba(0,0,0,.10);
border-radius: 9px;
font-family: 'IBM Plex Mono', monospace;
font-size: 10px; font-weight: 600;
text-align: center;
}
.wu-cat-tab.is-on .wu-cat-count { background: rgba(255,255,255,.22); color: #fff; }
.wu-inf-list {
display: flex; flex-direction: column; gap: 3px;
max-height: 360px; overflow-y: auto;
padding: 2px;
}
.wu-inf-row {
display: flex; justify-content: space-between; align-items: center;
text-align: left;
padding: 8px 10px;
background: var(--surf2);
border: 1px solid var(--bdr); border-radius: 4px;
font: inherit; color: var(--tx);
cursor: pointer;
}
.wu-inf-row:hover { background: var(--surf); border-color: var(--green); }
.wu-inf-label { font-size: 13px; font-weight: 600; }
.wu-inf-chips {
display: flex; flex-wrap: wrap; gap: 4px;
margin-top: 3px;
}
.wu-chip {
display: inline-block;
padding: 1px 7px; border-radius: 99px;
font-size: 10px; font-weight: 700; letter-spacing: .02em;
border: 1px solid currentColor;
white-space: nowrap;
}
.wu-chip--driver { color: #1565C0; background: rgba(21,101,192,.08); }
.wu-chip--monitor { color: #6D4C41; background: rgba(109,76,65,.10); }
.wu-chip--both { color: var(--txm); background: rgba(0,0,0,.04); }
.wu-chip--level-coaching { color: var(--txm); background: rgba(0,0,0,.04); }
.wu-chip--level-written { color: var(--blue); background: rgba(139,101,8,.08); }
.wu-chip--level-final-written { color: var(--amber); background: rgba(184,134,11,.10); }
.wu-chip--level-suspension { color: var(--red); background: rgba(167,48,39,.08); }
.wu-chip--level-termination { color: var(--red); background: rgba(167,48,39,.14); }
.wu-chip--major {
color: #fff; background: var(--red); border-color: var(--red);
}
.wu-inf-cat-chip {
display: inline-block;
padding: 1px 7px; border-radius: 99px;
font-size: 10px; font-weight: 600;
color: var(--txm); background: rgba(0,0,0,.04);
border: 1px solid var(--bdr);
}
.wu-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
.wu-primary {
padding: 8px 16px;
background: var(--green); color: #fff;
border: 1px solid var(--green); border-radius: 4px;
font-size: 13px; font-weight: 600; cursor: pointer;
}
.wu-primary:hover:not(:disabled) { filter: brightness(1.08); }
.wu-primary:disabled { opacity: .5; cursor: not-allowed; }
.wu-recent {
margin-top: 22px; padding: 0; background: var(--surf);
border: 1px solid var(--bdr); border-radius: 5px;
}
.wu-recent summary {
padding: 8px 12px; cursor: pointer;
font-size: 12px; font-weight: 700; color: var(--tx);
}
.wu-recent-empty { padding: 10px 12px; color: var(--txm); font-style: italic; font-size: 12px; }
.wu-recent-tbl { width: 100%; border-collapse: collapse; font-size: 12px; }
.wu-recent-tbl th, .wu-recent-tbl td { padding: 6px 10px; border-top: 1px solid var(--bdr); text-align: left; }
.wu-recent-tbl th { background: var(--surf2); font-weight: 700; color: var(--txm); font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; }
.wu-recent-tbl .wu-recent-row { cursor: pointer; }
.wu-recent-tbl .wu-recent-row:hover { background: rgba(45,95,63,.04); }
.wu-recent-tbl .wu-recent-row:focus { outline: 2px solid var(--green); outline-offset: -2px; }
.wu-th-actions, .wu-td-actions { width: 28px; text-align: center; padding-right: 6px; }
.wu-row-x {
width: 22px; height: 22px;
padding: 0; line-height: 1;
background: transparent; color: var(--txm);
border: 1px solid var(--bdr); border-radius: 3px;
font-size: 11px; font-weight: 700; cursor: pointer;
}
.wu-row-x:hover { background: rgba(167,48,39,.10); color: var(--red); border-color: var(--red); }
.wu-recent summary { display: flex; align-items: center; gap: 10px; }
.wu-recent summary > span { flex: 1; }
.wu-link {
background: transparent; border: 0; padding: 0;
font-size: 11.5px; color: var(--green); font-weight: 600;
cursor: pointer; text-decoration: underline;
}
.wu-link:hover { color: var(--tx); }
.wu-snapshot {
font-family: 'IBM Plex Mono', monospace;
font-size: 11.5px; line-height: 1.55;
white-space: pre-wrap; word-wrap: break-word;
background: #fbf8f1; border: 1px dashed #c8c0a8;
padding: 12px 14px; border-radius: 3px;
color: #1c1814;
margin: 0;
}
.wu-danger {
padding: 6px 12px;
background: #fff; color: var(--red);
border: 1px solid var(--red); border-radius: 4px;
font-size: 12px; font-weight: 600; cursor: pointer;
}
.wu-danger:hover { background: rgba(167,48,39,.08); }
/* ─── The rendered Write-up document (preview + print) ─────────────────
Styled like a corporate letter. The same HTML node is cloned into the
print window — keep dimensions and color values print-safe. */
.wu-doc {
background: #fff; color: #1c1814;
border: 1px solid var(--bdr); border-radius: 4px;
padding: 40px 48px;
font-family: 'IBM Plex Sans', sans-serif;
font-size: 13px;
line-height: 1.55;
box-shadow: 0 2px 8px rgba(0,0,0,.04);
}
.wu-letterhead { text-align: center; margin-bottom: 18px; padding-bottom: 14px; border-bottom: 2px solid #1c1814; }
.wu-letterhead-brand {
font-family: 'IBM Plex Sans', sans-serif;
font-size: 22px; font-weight: 700; letter-spacing: .04em;
color: var(--green);
}
.wu-letterhead-sub { font-size: 12px; color: #555; margin-top: 2px; }
.wu-title {
font-size: 18px; font-weight: 700; text-transform: uppercase;
letter-spacing: .05em; text-align: center;
margin: 6px 0 22px; color: #1c1814;
}
.wu-meta {
display: grid; grid-template-columns: 1fr 1fr; gap: 4px 24px;
padding: 12px 14px;
background: #f5f1e8;
border: 1px solid #c8c0a8;
border-radius: 4px;
margin-bottom: 18px;
font-size: 12.5px;
}
.wu-meta-lbl {
display: inline-block; min-width: 100px;
color: #777; font-size: 10.5px; font-weight: 700;
letter-spacing: .04em; text-transform: uppercase;
margin-right: 8px;
}
.wu-sect { margin-bottom: 16px; }
.wu-sect h3 {
font-size: 11.5px; font-weight: 700;
letter-spacing: .06em; text-transform: uppercase;
color: #777; margin: 0 0 6px; padding-bottom: 4px;
border-bottom: 1px solid #e0d8c8;
}
.wu-sect p { margin: 0 0 6px; }
.wu-stats { list-style: none; padding-left: 0; margin: 0; }
.wu-stats li {
padding: 5px 10px; border-bottom: 1px dotted #c8c0a8;
font-size: 12.5px;
}
.wu-stats li:last-child { border-bottom: none; }
.wu-stats strong { font-family: 'IBM Plex Mono', monospace; color: #1c1814; }
.wu-sig-row { display: flex; gap: 24px; margin-top: 18px; }
.wu-sig-block { flex: 1; }
.wu-sig-line { border-bottom: 1px solid #1c1814; height: 28px; }
.wu-sig-lbl { font-size: 10.5px; color: #777; margin-top: 3px; }
/* Footer signatures — employee block + Chanel stamp side-by-side, with
symmetric structure: signature space → name (bold) → role label →
date line → "Date" label. The employee column mirrors Chanel's
stamp/name/title/date stack so the layout reads uniform. */
.wu-footer-sigs {
display: grid; grid-template-columns: 1fr 1fr; gap: 28px;
margin-top: 22px; padding-top: 12px;
border-top: 1px solid #c8c0a8;
align-items: start;
}
.wu-footer-emp .wu-emp-sigspace { height: 60px; } /* matches .wu-sig-stamp max-height */
.wu-footer-emp .wu-emp-name { max-width: 280px; }
.wu-footer-emp .wu-emp-datespace {
margin-top: 16px;
border-bottom: 1px solid #1c1814;
height: 28px;
max-width: 280px;
}
.wu-footer-emp .wu-sig-lbl { max-width: 280px; }
.wu-issued { margin-top: 22px; }
.wu-sig-issued { position: relative; padding-top: 6px; }
.wu-sig-stamp {
display: block; max-height: 60px; max-width: 220px;
margin-bottom: -8px; margin-left: -4px;
}
.wu-sig-printed {
border-top: 1px solid #1c1814; padding-top: 4px;
font-weight: 700; font-size: 13px; max-width: 280px;
}
.wu-sig-title { font-size: 11.5px; color: #555; }
.wu-sig-date { font-size: 11.5px; color: #555; margin-top: 2px; }
.wu-saved {
background: var(--surf); border: 1px solid var(--bdr); border-radius: 5px;
padding: 18px 20px; font-size: 13px; line-height: 1.5;
}
.wu-saved p { margin: 0 0 8px; }
.wu-saved-actions { display: flex; gap: 8px; margin-top: 10px; }
/* ─── People tab — left-side submenu shell ────────────────────────────── */
.ppl-shell {
display: grid;
grid-template-columns: 200px 1fr;
min-height: calc(100vh - 110px);
gap: 0;
background: var(--bg);
}
.ppl-side {
background: var(--surf2);
border-right: 1px solid var(--bdr);
padding: 12px 8px 12px 12px;
}
.ppl-side-title {
font-size: 10px; font-weight: 700;
letter-spacing: .08em; text-transform: uppercase;
color: var(--txm);
padding: 0 6px 8px;
border-bottom: 1px solid var(--bdr);
margin-bottom: 8px;
}
.ppl-side-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.ppl-side-btn {
display: block; width: 100%;
text-align: left;
padding: 7px 10px;
background: transparent;
border: 1px solid transparent;
border-radius: 4px;
color: var(--tx);
font-size: 13px;
font-weight: 500;
cursor: pointer;
font-family: 'IBM Plex Sans', sans-serif;
}
.ppl-side-btn:hover:not(.is-on) { background: var(--surf); border-color: var(--bdr); }
.ppl-side-btn.is-on {
background: var(--green); color: #fff; font-weight: 600;
border-color: var(--green);
}
.ppl-body { padding: 0; min-width: 0; background: var(--bg); }
.ppl-empty {
padding: 32px;
}
.ppl-empty-h {
font-size: 18px; font-weight: 700; color: var(--tx); margin-bottom: 6px;
}
.ppl-empty-sub {
font-size: 13px; color: var(--txm); line-height: 1.5; max-width: 520px;
}
/* Submenu section header — non-interactive label that introduces a group
of related items (currently used for "Employees" above the Lookup +
Add-new pair). Visually muted so it doesn't compete with active buttons. */
.ppl-side-group {
list-style: none;
padding: 12px 12px 4px;
font-size: 10.5px;
font-weight: 700;
color: var(--txm);
text-transform: uppercase;
letter-spacing: .06em;
}
.ppl-side-group + li .ppl-side-btn { margin-top: 0; }
/* Indented items appear under a section header for visual hierarchy. */
.ppl-side-btn--indent { padding-left: 22px; }
@media (max-width: 900px) {
.ppl-shell { grid-template-columns: 1fr; }
.ppl-side { border-right: none; border-bottom: 1px solid var(--bdr); }
.ppl-side-list { flex-direction: row; flex-wrap: wrap; }
.ppl-side-group { width: 100%; padding-top: 6px; padding-bottom: 6px; }
.ppl-side-btn--indent { padding-left: 12px; }
}
/* ─── Employee Lookup ─────────────────────────────────────────────────── */
.el-page {
max-width: 1180px; margin: 0 auto; padding: 18px 22px 40px;
font-family: 'IBM Plex Sans', sans-serif;
}
.el-header { margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--bdr); }
.el-h { font-size: 18px; font-weight: 700; color: var(--tx); margin: 0; }
.el-h-sub { font-size: 12px; color: var(--txm); margin: 4px 0 0; }
.el-search-row { margin-bottom: 14px; }
.el-search {
width: 100%;
padding: 9px 12px;
font: inherit; color: var(--tx);
background: var(--surf2);
border: 1px solid var(--bdr);
border-radius: 4px;
font-size: 14px;
}
.el-search:focus { outline: 2px solid rgba(45,95,63,.35); border-color: var(--green); }
.el-grid {
display: grid; grid-template-columns: minmax(280px, 1fr) minmax(0, 2.2fr);
gap: 18px;
align-items: start;
}
.el-results-col { background: var(--surf); border: 1px solid var(--bdr); border-radius: 5px; padding: 6px; min-height: 220px; }
.el-detail-col { background: var(--surf); border: 1px solid var(--bdr); border-radius: 5px; padding: 16px 18px; min-height: 280px; }
.el-results-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.el-result {
width: 100%; display: block; text-align: left;
padding: 8px 10px;
background: var(--surf2); border: 1px solid var(--bdr); border-radius: 4px;
font: inherit; color: var(--tx); cursor: pointer;
}
.el-result:hover { background: var(--surf); border-color: var(--green); }
.el-result.is-on { background: rgba(45,95,63,.08); border-color: var(--green); }
.el-result-name { font-weight: 600; font-size: 13px; }
.el-result-meta { font-size: 11px; color: var(--txm); margin-top: 2px; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.el-hint { padding: 12px 10px; color: var(--txm); font-style: italic; font-size: 12px; }
.el-detail-empty { padding: 32px 10px; text-align: center; }
.el-err { color: var(--red); font-style: normal; }
.el-detail-head {
display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;
margin-bottom: 14px; padding-bottom: 10px;
border-bottom: 1px solid var(--bdr);
}
.el-detail-name { font-size: 20px; font-weight: 700; color: var(--tx); margin: 0; }
.el-detail-sub { font-size: 12px; color: var(--txm); margin-top: 3px; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.el-flip {
padding: 7px 14px;
border-radius: 4px;
font-size: 12px; font-weight: 700; cursor: pointer;
font-family: 'IBM Plex Sans', sans-serif;
}
.el-flip.is-deact {
background: #fff; color: var(--red);
border: 1px solid var(--red);
}
.el-flip.is-deact:hover:not(:disabled) { background: rgba(167,48,39,.08); }
.el-flip.is-act {
background: var(--green); color: #fff;
border: 1px solid var(--green);
}
.el-flip.is-act:hover:not(:disabled) { filter: brightness(1.05); }
.el-flip:disabled { opacity: .5; cursor: wait; }
.el-badge {
display: inline-block;
padding: 1px 8px; border-radius: 99px;
font-size: 10px; font-weight: 700; letter-spacing: .04em;
text-transform: uppercase;
border: 1px solid currentColor;
}
.el-badge--active { color: var(--green); background: rgba(45,95,63,.08); }
.el-badge--inactive { color: var(--red); background: rgba(167,48,39,.08); }
.el-badge--unknown { color: var(--txm); background: rgba(0,0,0,.04); }
.el-facts {
display: grid; grid-template-columns: 140px 1fr; gap: 4px 14px;
margin: 0 0 18px;
font-size: 12.5px;
}
.el-facts dt { color: var(--txm); font-weight: 600; font-size: 11px; padding: 4px 0; border-bottom: 1px dotted var(--bdr); }
.el-facts dd { color: var(--tx); margin: 0; padding: 4px 0; border-bottom: 1px dotted var(--bdr); }
.el-facts dd:last-child, .el-facts dt:last-of-type { border-bottom: none; }
.el-muted { color: var(--txm); font-style: italic; }
.el-section { margin-top: 18px; }
.el-section-h {
font-size: 11.5px; font-weight: 700; letter-spacing: .05em;
text-transform: uppercase; color: var(--txm);
margin: 0 0 8px; padding-bottom: 4px;
border-bottom: 1px solid var(--bdr);
}
.el-empty { padding: 8px 0; color: var(--txm); font-style: italic; font-size: 12px; }
.el-runs { width: 100%; border-collapse: collapse; font-size: 12px; }
.el-runs th {
background: var(--surf2); color: var(--txm);
padding: 6px 8px; text-align: left;
font-size: 10.5px; font-weight: 700;
text-transform: uppercase; letter-spacing: .04em;
border-bottom: 1px solid var(--bdr);
}
.el-runs td { padding: 6px 8px; border-bottom: 1px solid var(--bdr); }
.el-runs tr:last-child td { border-bottom: none; }
.el-future-note {
margin-top: 22px;
padding: 10px 12px;
background: var(--surf2);
border: 1px dashed var(--bdr);
border-radius: 4px;
color: var(--txm); font-size: 11.5px; font-style: italic; line-height: 1.45;
}
@media (max-width: 900px) {
.el-grid { grid-template-columns: 1fr; }
}
/* ─── Add Employee — standalone page wrapper ─────────────────────────── */
.emp-add-page {
max-width: 600px; margin: 0 auto; padding: 18px 22px 40px;
font-family: 'IBM Plex Sans', sans-serif;
}
/* Combo callout inside the polyline hover/click popup. */
.mp-rinfo-combo {
margin-top: 6px; padding: 5px 8px;
background: rgba(167,48,39,.08);
border: 1px solid var(--red);
border-radius: 4px;
color: var(--red); font-size: 11px; font-weight: 600;
}
.mp-rinfo-combo b { font-weight: 700; }
/* Red radiating-dot variant of the highlight pin — used by Adjust Student
to mark the selected student's home. Keeps the same shape + animation
as the pink Find pin, just swaps the fill + ring color. */
.mp-pin-highlight--red { background: #D32F2F; }
.mp-pin-highlight--red::before { border-color: #D32F2F; }
/* ═══ Run Board ════════════════════════════════════════════════════════════
The morning live-monitoring view under Manager → Run Board. One square
per active morning run, grouped into school lanes. Status palette is
calibrated for legibility at 50×50 with 9–15px labels inside, mapped
onto the existing app tokens (--green, --red, --amber, --blue) where
they fit and falling back to dedicated tones where they don't (notified
purple, arrived muted-slate, watch's brighter amber than the in-app
default).
See public/js/manager/run-board.js for the JS that drives this surface. */
.rb-shell {
display: grid;
grid-template-columns: minmax(0, 1.85fr) minmax(280px, .75fr);
gap: 14px;
padding: 12px 14px;
align-items: start;
}
.rb-main { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.rb-rail { display: flex; flex-direction: column; gap: 10px; position: sticky; top: 12px; }
.rb-loading, .rb-error {
padding: 24px; color: var(--txm);
}
.rb-error { color: var(--red); }
/* ── Header ───────────────────────────────────────────────────────────── */
.rb-header {
display: flex; justify-content: space-between; align-items: flex-end;
gap: 14px;
padding-bottom: 10px;
border-bottom: 1.5px solid var(--bdr2);
}
.rb-title {
font-size: 22px; font-weight: 700; line-height: 1.1;
color: var(--tx); letter-spacing: -.01em;
}
.rb-subtitle {
font-size: 11.5px; color: var(--txm); margin-top: 3px;
}
.rb-header-r {
display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
justify-content: flex-end;
}
.rb-chip {
padding: 3px 10px; border-radius: 16px;
font-size: 11px; font-weight: 700; letter-spacing: .02em;
border: 1px solid var(--bdr2);
}
.rb-chip--alarm { border-color: rgba(167,48,39,.45); color: var(--red); background: rgba(167,48,39,.07); }
.rb-chip--warn { border-color: rgba(184,134,11,.45); color: var(--amber); background: rgba(184,134,11,.07); }
.rb-chip--good { border-color: rgba(45,95,63,.35); color: var(--green); background: rgba(45,95,63,.06); }
.rb-live {
display: inline-flex; align-items: center; gap: 5px;
font-size: 11px; font-weight: 700; color: var(--green);
margin-left: 6px;
}
.rb-live-dot {
width: 7px; height: 7px; border-radius: 50%;
background: var(--green);
box-shadow: 0 0 0 0 rgba(45,95,63,.5);
animation: rb-pulse 1.8s ease-out infinite;
}
@keyframes rb-pulse {
0% { box-shadow: 0 0 0 0 rgba(45,95,63,.45); }
70% { box-shadow: 0 0 0 6px rgba(45,95,63,0); }
100% { box-shadow: 0 0 0 0 rgba(45,95,63,0); }
}
/* ── Must-notify ticker ──────────────────────────────────────────────── */
.rb-ticker {
display: flex; align-items: center; gap: 9px;
flex-wrap: wrap;
padding: 7px 11px;
background: #FBE8E4;
border: 1.5px solid var(--red);
border-radius: 6px;
box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.rb-ticker--empty { background: #FAF6E8; border-color: var(--bdr2); }
.rb-ticker-h {
font-size: 14px; font-weight: 700; color: var(--red);
}
.rb-ticker--empty .rb-ticker-h { color: var(--txm); }
.rb-ticker-empty { font-size: 12px; color: var(--txm); font-style: italic; }
.rb-ticker-chip {
display: inline-flex; align-items: center; gap: 6px;
background: #fff;
border: 1.3px solid var(--red);
border-radius: 5px;
padding: 3px 8px;
font-size: 12px;
}
.rb-ticker-eta {
font-size: 14px; font-weight: 700; color: var(--red);
line-height: 1;
}
.rb-ticker-run { font-weight: 700; color: var(--tx); }
.rb-ticker-bus { font-size: 10px; color: var(--txm); font-family: 'IBM Plex Mono', monospace; }
.rb-ticker-trend { color: var(--red); font-weight: 700; }
.rb-ticker-where { font-size: 11px; color: var(--tx); opacity: .85; }
.rb-ticker-btn {
padding: 2px 9px;
background: var(--red); color: #fff;
border: 1px solid var(--red);
border-radius: 4px;
font-size: 11px; font-weight: 700;
cursor: pointer;
}
.rb-ticker-btn:hover { filter: brightness(1.08); }
/* ── Heatstrip ────────────────────────────────────────────────────────── */
.rb-heatstrip {
background: var(--surf);
border: 1px solid var(--bdr);
border-radius: 6px;
padding: 12px 14px;
box-shadow: 0 1px 2px rgba(0,0,0,.03);
}
.rb-heatstrip-h {
display: flex; justify-content: space-between; align-items: flex-end;
margin-bottom: 10px;
gap: 14px; flex-wrap: wrap;
}
.rb-heatstrip-title { font-size: 18px; font-weight: 700; color: var(--tx); }
.rb-heatstrip-sub { font-size: 11px; color: var(--txm); margin-top: 2px; }
.rb-heatstrip-h-r {
display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
}
.rb-dir { display: inline-flex; gap: 0; }
.rb-dir-btn {
padding: 4px 10px;
background: transparent;
border: 1px solid var(--bdr2);
color: var(--txm);
font-size: 11px; font-weight: 600;
font-family: 'IBM Plex Sans', sans-serif;
cursor: pointer;
}
.rb-dir-btn:first-child { border-radius: 4px 0 0 4px; }
.rb-dir-btn:last-child { border-radius: 0 4px 4px 0; border-left: none; }
.rb-dir-btn:hover:not(.is-on) { background: var(--surf2); color: var(--tx); }
.rb-dir-btn.is-on { background: var(--green); border-color: var(--green); color: #fff; }
.rb-legend {
display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
}
.rb-legend-item {
display: inline-flex; align-items: center; gap: 4px;
font-size: 10px; color: var(--txm);
}
.rb-legend-sw {
width: 11px; height: 11px; border-radius: 2px;
border: 1.2px solid currentColor;
display: inline-block;
}
/* ── Lane (one per school) ────────────────────────────────────────────── */
.rb-lanes {}
.rb-lane {
display: grid;
grid-template-columns: 132px 1fr;
gap: 10px;
align-items: center;
padding: 8px 4px;
border-top: 1.2px dashed var(--bdr2);
}
.rb-lane:first-child { border-top: none; }
.rb-lane-name { font-size: 14px; font-weight: 700; line-height: 1.1; color: var(--tx); }
.rb-lane-sub { font-size: 10.5px; color: var(--txm); margin-top: 1px; }
.rb-lane-pips { display: flex; gap: 3px; margin-top: 4px; flex-wrap: wrap; }
.rb-pip {
display: inline-block;
padding: 0 5px; border-radius: 99px;
font-size: 10px; font-weight: 700;
line-height: 15px;
border: 1px solid currentColor;
}
.rb-pip--alarm { color: var(--red); background: rgba(167,48,39,.08); }
.rb-pip--warn { color: var(--amber); background: rgba(184,134,11,.10); }
.rb-pip--good { color: var(--green); background: rgba(45,95,63,.07); }
.rb-pip--tag { color: #2D4A78; background: rgba(45,74,120,.08); }
.rb-pip--purple { color: #5E1A52; background: rgba(140,36,119,.10); }
.rb-lane-squares { display: flex; gap: 5px; flex-wrap: wrap; }
/* ── Square — the central UI primitive ────────────────────────────────── */
.rb-square {
position: relative;
width: 50px; height: 50px;
border-radius: 4px;
border: 1.6px solid;
display: flex; flex-direction: column;
align-items: center; justify-content: center;
line-height: 1;
padding: 0; margin: 0;
cursor: pointer;
font-family: 'IBM Plex Sans', sans-serif;
box-shadow: 1.5px 1.5px 0 var(--tx);
transition: transform .12s, box-shadow .12s;
}
.rb-square.is-alarm { box-shadow: 1.8px 2px 0 var(--red); }
.rb-square:hover { transform: translate(-1px, -1px); box-shadow: 2.5px 2.5px 0 var(--tx); z-index: 5; }
.rb-square.is-alarm:hover { box-shadow: 2.8px 3px 0 var(--red); }
.rb-square.is-open { outline: 2px solid var(--tx); outline-offset: 1px; z-index: 6; }
.rb-square-run {
font-size: 14.5px; font-weight: 700; letter-spacing: .01em;
}
.rb-square-sub {
display: flex; align-items: center; gap: 3px;
font-size: 9px; margin-top: 2px;
opacity: .88;
font-family: 'IBM Plex Mono', monospace;
}
.rb-square-bus { font-weight: 600; }
.rb-square-trend{ font-weight: 700; }
/* Status palette — fills + text + border. Mirrors the design's palette
but uses our token colors for the surrounding borders to keep visual
continuity with the rest of the app. */
.rb-square--critical { background: #E25239; border-color: #B8341A; color: #fff; }
.rb-square--incident { background: #fff; border-color: #B8341A; color: #B8341A; }
.rb-square--notified { background: #8C2477; border-color: #5E1A52; color: #fff; }
.rb-square--watch { background: #E0A226; border-color: #A86B14; color: #1D1A16; }
.rb-square--ontime { background: #7C9E6A; border-color: #3D6E3D; color: #fff; }
.rb-square--arrived { background: #A3B3C9; border-color: #2D4A78; color: #1D1A16; }
/* When used as a tag swatch inside a tooltip the same selector applies — but
small-size variants in legend/tooltip shouldn't carry the heavy shadow. */
.rb-tip-tag.rb-square--critical,
.rb-tip-tag.rb-square--incident,
.rb-tip-tag.rb-square--notified,
.rb-tip-tag.rb-square--watch,
.rb-tip-tag.rb-square--ontime,
.rb-tip-tag.rb-square--arrived { box-shadow: none; }
/* ── Assignment Block (v2) ────────────────────────────────────────────────
Each block = one assignment. Wider than the legacy square so we can fit
the bus badge, driver, monitor, and footer chips. Status palette is the
same — but the block itself is paper-white; the colored chip in the
bottom-left (delta) and a top accent line carry the status signal so
"open slot" red dots stay readable. */
.rb-block {
position: relative;
width: 168px;
min-height: 124px;
display: flex; flex-direction: column;
gap: 5px;
padding: 8px 10px 9px;
border-radius: 5px;
border: 1.4px solid var(--bdr2);
background: var(--surf);
color: var(--tx);
font-family: 'IBM Plex Sans', sans-serif;
text-align: left;
cursor: pointer;
box-shadow: 1.5px 1.5px 0 var(--tx);
transition: transform .12s, box-shadow .12s;
}
.rb-block:hover { transform: translate(-1px, -1px); box-shadow: 2.5px 2.5px 0 var(--tx); z-index: 5; }
.rb-block.is-open { outline: 2px solid var(--tx); outline-offset: 1px; z-index: 6; }
/* Top-edge status accent — colored stripe so the block reads its status at
a glance without flooding the whole tile with color. */
.rb-block::before {
content: ""; position: absolute; top: 0; left: 0; right: 0;
height: 4px; border-radius: 4px 4px 0 0;
background: var(--bdr2);
}
.rb-block--critical::before { background: #B8341A; }
.rb-block--watch::before { background: #A86B14; }
.rb-block--ontime::before { background: #3D6E3D; }
.rb-block--arrived::before { background: #2D4A78; }
.rb-block--notified::before { background: #5E1A52; }
.rb-block--incident::before { background: #B8341A; }
/* Head row — assignment number left, run badges right */
.rb-bk-head {
display: flex; justify-content: space-between; align-items: center;
gap: 6px; padding-top: 2px;
}
.rb-bk-asn {
font-size: 12.5px; font-weight: 700;
font-family: 'IBM Plex Mono', monospace;
color: var(--txm);
letter-spacing: .01em;
}
.rb-bk-runs { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.rb-bk-run-badge {
display: inline-block;
padding: 1px 6px;
font-size: 11px; font-weight: 700;
border-radius: 3px;
border: 1.2px solid currentColor;
background: var(--surf);
line-height: 1.3;
letter-spacing: .01em;
}
.rb-bk-run-badge--critical { color: #B8341A; background: rgba(184,52,26,.06); }
.rb-bk-run-badge--watch { color: #A86B14; background: rgba(168,107,20,.06); }
.rb-bk-run-badge--ontime { color: #3D6E3D; background: rgba(61,110,61,.06); }
.rb-bk-run-badge--arrived { color: #2D4A78; background: rgba(45,74,120,.06); }
.rb-bk-run-badge--notified { color: #5E1A52; background: rgba(94,26,82,.06); }
.rb-bk-run-badge--incident { color: #B8341A; background: rgba(184,52,26,.06); }
/* Bus row — planned vs inferred. Strikethrough planned when they differ. */
.rb-bk-bus-row {
display: flex; align-items: baseline; gap: 6px;
font-family: 'IBM Plex Mono', monospace;
}
.rb-bk-bus { font-size: 16px; font-weight: 700; color: var(--tx); }
.rb-bk-bus--planned-only { font-size: 16px; font-weight: 600; color: var(--txm); }
.rb-bk-bus-planned {
font-size: 13px; color: var(--txm); font-weight: 500;
text-decoration: line-through;
}
.rb-bk-bus-inferred {
font-size: 16px; font-weight: 700; color: var(--green);
}
/* People — driver + monitor stacked, with red-dot on open (no-sub) slot. */
.rb-bk-people {
display: flex; flex-direction: column; gap: 2px;
font-size: 11.5px;
line-height: 1.3;
}
.rb-bk-role {
display: inline-flex; align-items: baseline; gap: 5px;
color: var(--tx);
}
.rb-bk-lbl {
font-size: 9.5px; font-weight: 700;
color: var(--txm); letter-spacing: .04em;
width: 9px; flex-shrink: 0;
}
.rb-bk-name {
font-weight: 500;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
max-width: 110px;
}
.rb-bk-sub-tag {
font-size: 8.5px; font-weight: 700;
color: var(--amber);
border: 1px solid var(--amber);
border-radius: 3px;
padding: 0 3px;
letter-spacing: .04em;
text-transform: uppercase;
}
.rb-bk-role--open {
color: var(--red);
font-weight: 700;
font-size: 11.5px;
letter-spacing: .03em;
}
.rb-bk-dot {
display: inline-block;
width: 7px; height: 7px;
border-radius: 99px;
background: var(--red);
flex-shrink: 0;
animation: rbBkDotPulse 1.8s ease-in-out infinite;
}
@keyframes rbBkDotPulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(167,48,39,.45); }
50% { box-shadow: 0 0 0 4px rgba(167,48,39,0); }
}
/* Footer — delta + absent + motive deeplink */
.rb-bk-foot {
display: flex; align-items: center; gap: 6px;
margin-top: auto;
padding-top: 4px;
border-top: 1px dashed var(--bdr);
}
.rb-bk-delta {
font-family: 'IBM Plex Mono', monospace;
font-size: 13px; font-weight: 700;
padding: 1px 7px;
border-radius: 3px;
border: 1.2px solid currentColor;
line-height: 1.3;
}
.rb-bk-delta--critical { color: #B8341A; background: rgba(184,52,26,.08); }
.rb-bk-delta--watch { color: #A86B14; background: rgba(168,107,20,.08); }
.rb-bk-delta--ontime { color: #3D6E3D; background: rgba(61,110,61,.08); }
.rb-bk-delta--arrived { color: #2D4A78; background: rgba(45,74,120,.08); }
.rb-bk-absent {
font-family: 'IBM Plex Mono', monospace;
font-size: 11.5px; font-weight: 700;
color: var(--red);
padding: 1px 5px;
background: rgba(167,48,39,.07);
border: 1px solid rgba(167,48,39,.30);
border-radius: 3px;
display: inline-flex; align-items: baseline; gap: 3px;
}
.rb-bk-absent-lbl { font-size: 9px; font-weight: 600; opacity: .8; }
.rb-bk-motive {
margin-left: auto;
font-size: 14px;
text-decoration: none;
opacity: .65;
}
.rb-bk-motive:hover { opacity: 1; }
/* ── Watch row ────────────────────────────────────────────────────────── */
.rb-watch {
border: 1.3px dashed var(--bdr2);
border-radius: 6px;
padding: 8px 12px;
background: var(--surf2);
}
.rb-watch-h {
display: flex; justify-content: space-between; align-items: center;
gap: 12px; flex-wrap: wrap;
}
.rb-watch-title { font-size: 14.5px; font-weight: 700; color: var(--amber); line-height: 1; }
.rb-watch-sub { font-size: 10.5px; color: var(--txm); margin-top: 2px; }
.rb-watch-chips { display: flex; gap: 5px; flex-wrap: wrap; justify-content: flex-end; }
.rb-watch-chip {
padding: 2px 9px;
background: rgba(184,134,11,.10);
border: 1.2px solid var(--amber);
color: var(--amber);
border-radius: 99px;
font-size: 11.5px; font-weight: 700;
cursor: pointer;
font-family: 'IBM Plex Sans', sans-serif;
}
.rb-watch-chip:hover { background: rgba(184,134,11,.20); }
.rb-watch-empty { font-size: 11px; color: var(--txm); font-style: italic; }
/* ── Right rail ──────────────────────────────────────────────────────── */
.rb-card {
background: var(--surf);
border: 1px solid var(--bdr);
border-radius: 6px;
padding: 11px 13px;
box-shadow: 0 1px 2px rgba(0,0,0,.03);
}
.rb-card-lbl { font-size: 10px; color: var(--txm); letter-spacing: .06em; text-transform: uppercase; font-weight: 700; }
.rb-card-title { font-size: 14px; font-weight: 700; color: var(--tx); margin-bottom: 6px; }
.rb-next-school {
font-size: 22px; font-weight: 700; color: var(--tx); line-height: 1.1; margin-top: 2px;
}
.rb-next-meta {
font-size: 11.5px; color: var(--amber); margin-top: 4px;
}
.rb-next-crit { color: var(--red); font-weight: 700; }
.rb-notif-empty { font-size: 11.5px; color: var(--txm); font-style: italic; }
.rb-notif-list { display: flex; flex-direction: column; gap: 5px; max-height: 320px; overflow-y: auto; }
.rb-notif-row {
padding: 4px 7px;
border-left: 2.5px solid #2D4A78;
background: var(--surf2);
border-radius: 0 4px 4px 0;
}
.rb-notif-meta { display: flex; justify-content: space-between; align-items: center; }
.rb-notif-at { font-family: 'IBM Plex Mono', monospace; font-size: 10px; color: var(--txm); }
.rb-notif-tag {
font-size: 9px; padding: 1px 5px; border-radius: 2px;
border: 1px solid var(--bdr2); color: var(--txm); text-transform: uppercase; letter-spacing: .04em;
}
.rb-notif-tag--sent { border-color: var(--green); color: var(--green); background: rgba(45,95,63,.06); }
.rb-notif-tag--internal { border-color: var(--bdr2); color: var(--txm); }
.rb-notif-body { font-size: 11.5px; color: var(--tx); line-height: 1.3; margin-top: 1px; }
.rb-notif-who { font-size: 10px; color: var(--txm); }
/* ── Hover tooltip (non-interactive) ─────────────────────────────────── */
.rb-tip {
position: absolute; z-index: 999;
width: 288px; padding: 10px 12px;
background: var(--surf);
border: 1.3px solid var(--tx);
border-radius: 6px;
box-shadow: 3px 4px 0 var(--tx);
text-align: left;
pointer-events: none;
font-family: 'IBM Plex Sans', sans-serif;
}
.rb-tip[hidden] { display: none; }
.rb-tip-head {
display: flex; justify-content: space-between; align-items: baseline;
gap: 8px;
}
.rb-tip-run { font-size: 22px; font-weight: 700; line-height: 1; color: var(--tx); }
.rb-tip-sub { font-size: 11px; color: var(--txm); margin-left: 6px; }
.rb-tip-tag {
padding: 1px 7px; border-radius: 3px; border: 1px solid;
font-size: 10px; font-weight: 700; letter-spacing: .03em;
text-transform: uppercase;
white-space: nowrap;
}
.rb-tip-line { font-size: 11.5px; color: var(--txm); margin-top: 3px; }
.rb-tip-trend { font-weight: 700; color: var(--tx); font-family: 'IBM Plex Mono', monospace; }
.rb-tip-banner {
margin-top: 7px; padding: 5px 9px;
border-radius: 4px;
display: flex; align-items: baseline; gap: 8px;
border: 1.2px solid;
}
.rb-tip-eta { font-size: 20px; font-weight: 700; line-height: 1; }
.rb-tip-eta-lbl { font-size: 11px; opacity: .9; }
.rb-tip-progress { margin-top: 7px; }
.rb-tip-progress-h { display: flex; justify-content: space-between; font-size: 11px; color: var(--txm); }
.rb-mono { font-family: 'IBM Plex Mono', monospace; font-size: 10px; }
.rb-tip-ticks { display: flex; gap: 2px; margin-top: 3px; }
.rb-tip-tick {
flex: 1; height: 9px; border-radius: 1.5px;
background: var(--surf2);
border: 1px solid var(--bdr2);
}
.rb-tip-tick.is-on { background: var(--green); border-color: var(--green); }
.rb-tip-now {
font-size: 11.5px; color: var(--tx); margin-top: 7px;
}
.rb-tip-now b { font-weight: 700; }
.rb-tip-why {
font-size: 11.5px; color: var(--red); margin-top: 2px;
}
.rb-tip-foot {
font-size: 10px; color: var(--txm); margin-top: 7px; text-align: right;
}
/* ── Click menu (interactive) ────────────────────────────────────────── */
.rb-menu {
position: absolute; z-index: 1000;
width: 240px; padding: 9px 11px;
background: var(--surf);
border: 1.4px solid var(--tx);
border-radius: 6px;
box-shadow: 3px 4px 0 var(--tx);
text-align: left;
font-family: 'IBM Plex Sans', sans-serif;
}
.rb-menu[hidden] { display: none; }
.rb-menu-head {
display: flex; justify-content: space-between; align-items: baseline;
margin-bottom: 6px;
}
.rb-menu-run { font-size: 17px; font-weight: 700; color: var(--tx); }
.rb-menu-sub { font-size: 11px; color: var(--txm); margin-left: 5px; }
.rb-menu-esc {
background: transparent; border: 0; padding: 0;
font-size: 11px; color: var(--txm); cursor: pointer;
text-transform: lowercase;
}
.rb-menu-esc:hover { color: var(--tx); }
.rb-menu-ctx { font-size: 11px; color: var(--red); margin-bottom: 7px; font-weight: 600; }
.rb-menu-actions { display: flex; flex-direction: column; gap: 4px; }
.rb-menu-btn {
display: flex; justify-content: space-between; align-items: center;
padding: 5px 9px;
background: #fff;
color: var(--tx);
border: 1.2px solid var(--bdr2);
border-radius: 5px;
font-size: 12.5px; font-weight: 600;
cursor: pointer; text-align: left;
font-family: 'IBM Plex Sans', sans-serif;
}
.rb-menu-btn:hover { background: var(--surf2); border-color: var(--tx); }
.rb-menu-btn.is-primary {
background: var(--red); color: #fff; border-color: var(--red);
box-shadow: 1.5px 1.5px 0 var(--tx);
}
.rb-menu-btn.is-primary:hover { filter: brightness(1.08); background: var(--red); }
.rb-kbd {
font-family: 'IBM Plex Mono', monospace;
font-size: 9.5px; padding: 0 5px;
border: 1px solid var(--bdr2); border-radius: 3px;
color: inherit; opacity: .75;
}
.rb-menu-btn.is-primary .rb-kbd { border-color: #fff; }
/* Responsive — collapse the rail under the main column on narrow screens. */
@media (max-width: 1100px) {
.rb-shell { grid-template-columns: 1fr; }
.rb-rail { position: static; }
.rb-lane { grid-template-columns: 112px 1fr; }
}
/* ─── Routing section (top-level tab) ─────────────────────────────────────
Phase 1 shell: left submenu + body. Mirrors .ppl-* shape from People so
the navigation rhythm matches across the app. The Workbench sub-view
uses a split map/panel layout (.rt-wb). Other sub-views render
placeholder cards (.rt-stub) until their phases land. */
.rt-shell {
display: grid;
grid-template-columns: 220px 1fr;
min-height: calc(100vh - 100px);
background: var(--bg);
}
.rt-side {
background: var(--surf);
border-right: 1px solid var(--bdr);
padding: 14px 10px;
display: flex; flex-direction: column;
}
.rt-side-title {
font-size: 10.5px; font-weight: 700; letter-spacing: .08em;
text-transform: uppercase; color: var(--txm);
padding: 0 6px 8px;
}
.rt-side-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.rt-side-btn {
display: flex; align-items: center; gap: 6px;
width: 100%; padding: 8px 10px;
background: transparent; color: var(--tx);
border: 1px solid transparent; border-radius: 4px;
font-size: 12.5px; font-weight: 500;
cursor: pointer; text-align: left;
font-family: 'IBM Plex Sans', sans-serif;
}
.rt-side-btn:hover:not(.is-on) { background: var(--surf2); border-color: var(--bdr); }
.rt-side-btn.is-on {
background: var(--green); color: #fff; font-weight: 600;
border-color: var(--green);
}
.rt-side-stub {
margin-left: auto;
font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
padding: 1px 6px; border-radius: 99px;
background: rgba(0,0,0,.06); color: var(--txm);
}
.rt-side-btn.is-on .rt-side-stub { background: rgba(255,255,255,.22); color: #fff; }
.rt-side-foot {
margin-top: auto;
padding: 10px 6px 4px;
border-top: 1px dashed var(--bdr);
font-size: 10.5px; color: var(--txm); line-height: 1.45;
}
.rt-side-foot-lbl {
font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
color: var(--tx); font-size: 10px; margin-bottom: 4px;
}
.rt-body { min-width: 0; background: var(--bg); }
/* Workbench — map left, Adjust wizard right. */
.rt-wb {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(380px, 460px);
height: calc(100vh - 100px);
}
.rt-wb-map {
position: relative;
border-right: 1px solid var(--bdr);
min-width: 0;
}
.rt-wb-panel {
background: var(--surf);
overflow-y: auto;
overflow-x: hidden;
padding: 0;
}
.rt-wb-loading {
padding: 18px; color: var(--txm); font-size: 13px;
}
.rt-wb-err {
padding: 18px; color: var(--red); font-size: 13px;
}
/* Placeholders for Phases 2-4. */
.rt-stub {
max-width: 760px;
margin: 0 auto;
padding: 28px 28px 60px;
font-family: 'IBM Plex Sans', sans-serif;
}
.rt-stub-h {
margin-bottom: 18px;
padding-bottom: 14px;
border-bottom: 1px solid var(--bdr);
}
.rt-stub-phase {
display: inline-block;
padding: 2px 9px; border-radius: 99px;
background: rgba(184,134,11,.12);
color: var(--amber);
font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
margin-bottom: 8px;
}
.rt-stub-title { font-size: 22px; font-weight: 700; color: var(--tx); margin: 0; }
.rt-stub-sub { font-size: 13px; color: var(--txm); margin: 6px 0 0; line-height: 1.5; }
.rt-stub-body { margin-top: 4px; }
.rt-stub-coming {
font-size: 10.5px; font-weight: 700; letter-spacing: .06em;
text-transform: uppercase; color: var(--txm);
margin-bottom: 8px;
}
.rt-stub-list {
list-style: none; margin: 0; padding: 0;
display: flex; flex-direction: column; gap: 8px;
}
.rt-stub-list li {
padding: 9px 12px 9px 32px;
background: var(--surf);
border: 1px solid var(--bdr); border-radius: 4px;
font-size: 12.5px; color: var(--tx); line-height: 1.5;
position: relative;
}
.rt-stub-list li::before {
content: '→';
position: absolute; left: 12px; top: 9px;
color: var(--green); font-weight: 700;
}
.rt-stub-foot {
margin-top: 22px;
padding-top: 14px;
border-top: 1px dashed var(--bdr);
font-size: 12.5px; color: var(--txm);
}
.rt-stub-cta {
font-weight: 700; color: var(--green);
text-decoration: none;
}
.rt-stub-cta:hover { text-decoration: underline; }
@media (max-width: 960px) {
.rt-shell { grid-template-columns: 1fr; }
.rt-side { border-right: none; border-bottom: 1px solid var(--bdr); }
.rt-side-list { flex-direction: row; flex-wrap: wrap; }
.rt-side-foot { display: none; }
.rt-wb { grid-template-columns: 1fr; height: auto; }
.rt-wb-map { height: 360px; border-right: none; border-bottom: 1px solid var(--bdr); }
}
/* ─── Routing Workspace ───────────────────────────────────────────────────
Map-first read view of all runs for a (school, direction). Three regions
stacked vertically: header, constraint strip, body (map + sidebar). */
.rt-ws { display: flex; flex-direction: column; height: calc(100vh - 100px); min-width: 0; }
.rt-ws-loading, .rt-ws-err { padding: 20px; color: var(--txm); font-size: 13px; }
.rt-ws-err { color: var(--red); }
.rt-ws-head {
display: flex; justify-content: space-between; align-items: center;
gap: 14px; flex-wrap: wrap;
padding: 12px 16px;
background: var(--surf);
border-bottom: 1px solid var(--bdr);
}
.rt-ws-head-l { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.rt-ws-pickers { display: flex; gap: 12px; }
.rt-ws-picker { display: flex; flex-direction: column; gap: 3px; }
.rt-ws-picker-lbl {
font-size: 9.5px; font-weight: 700; letter-spacing: .06em;
text-transform: uppercase; color: var(--txm);
}
.rt-ws-picker select {
padding: 5px 28px 5px 9px;
font: inherit; font-size: 12.5px;
background: var(--surf2) no-repeat right 8px center;
background-image: linear-gradient(45deg, transparent 50%, var(--txm) 50%),
linear-gradient(135deg, var(--txm) 50%, transparent 50%);
background-size: 5px 5px, 5px 5px;
background-position: calc(100% - 14px) center, calc(100% - 9px) center;
background-repeat: no-repeat;
border: 1px solid var(--bdr); border-radius: 4px;
color: var(--tx); appearance: none; cursor: pointer;
min-width: 180px;
}
.rt-ws-stats { display: flex; gap: 14px; align-items: center; }
.rt-ws-stat {
font-size: 12px; color: var(--txm);
}
.rt-ws-stat b { color: var(--tx); font-weight: 700; }
.rt-ws-stat.is-warn b { color: var(--red); }
.rt-ws-head-r { display: flex; gap: 6px; }
.rt-ws-btn {
padding: 6px 14px;
background: var(--surf2);
border: 1px solid var(--bdr2); border-radius: 4px;
color: var(--tx); font-size: 12px; font-weight: 600;
cursor: pointer;
font-family: 'IBM Plex Sans', sans-serif;
}
.rt-ws-btn:hover { background: var(--surf); border-color: var(--green); color: var(--green); }
.rt-ws-btn--primary {
background: var(--green); color: #fff; border-color: var(--green);
}
.rt-ws-btn--primary:hover { background: var(--green); color: #fff; filter: brightness(1.06); }
.rt-ws-cstrip {
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
padding: 7px 16px;
background: var(--surf2);
border-bottom: 1px solid var(--bdr);
font-size: 11px;
}
.rt-ws-cstrip-lbl {
font-size: 9.5px; font-weight: 700; letter-spacing: .06em;
text-transform: uppercase; color: var(--txm); margin-right: 4px;
}
.rt-ws-chip {
padding: 2px 9px;
background: var(--surf); border: 1px solid var(--bdr); border-radius: 99px;
color: var(--txm); font-size: 11px;
}
.rt-ws-chip b { color: var(--tx); font-weight: 700; }
.rt-ws-cstrip-hint {
margin-left: auto; font-size: 10.5px; color: var(--txm); font-style: italic;
}
.rt-ws-body {
flex: 1; min-height: 0;
display: grid; grid-template-columns: 1fr 360px;
}
.rt-ws-mapcol { position: relative; min-width: 0; border-right: 1px solid var(--bdr); }
.rt-ws-side {
overflow-y: auto;
background: var(--surf);
}
.rt-ws-tabs {
display: flex;
background: var(--surf2);
border-bottom: 1px solid var(--bdr);
position: sticky; top: 0; z-index: 2;
}
.rt-ws-tab {
flex: 1;
padding: 9px 8px;
background: transparent; color: var(--txm);
border: 0; border-bottom: 2px solid transparent;
font-size: 11.5px; font-weight: 600;
letter-spacing: .04em;
cursor: pointer;
font-family: 'IBM Plex Sans', sans-serif;
}
.rt-ws-tab:hover:not(.is-on) { color: var(--tx); background: var(--surf); }
.rt-ws-tab.is-on { color: var(--green); border-bottom-color: var(--green); background: var(--surf); }
.rt-ws-tabbody { padding: 8px; }
.rt-ws-empty {
padding: 18px 12px;
color: var(--txm); font-size: 12px; font-style: italic;
text-align: center;
}
.rt-ws-empty--good { color: var(--green); }
.rt-ws-runlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.rt-ws-runcard {
background: var(--surf2);
border: 1px solid var(--bdr); border-radius: 4px;
transition: border-color .12s;
}
.rt-ws-runcard.is-focused { border-color: var(--green); background: rgba(45,95,63,.04); }
.rt-ws-runcard.is-held { box-shadow: inset 3px 0 0 var(--amber); }
.rt-ws-runcard-h {
display: flex; align-items: center; gap: 7px;
padding: 7px 9px;
cursor: pointer;
}
.rt-ws-runcard-h:hover { background: var(--surf); }
.rt-ws-runchip { display: inline-block; width: 12px; height: 12px; border-radius: 50%; border: 1px solid rgba(0,0,0,.25); }
.rt-ws-runnum { font-weight: 700; color: var(--tx); font-size: 13px; min-width: 60px; }
.rt-ws-runmeta { font-size: 11px; color: var(--txm); flex: 1; }
.rt-ws-runpin {
background: transparent; border: 1px solid transparent;
border-radius: 3px; padding: 2px 5px;
font-size: 11px; line-height: 1; cursor: pointer;
opacity: 0.35; filter: grayscale(1); transition: opacity .12s;
}
.rt-ws-runpin:hover { opacity: 0.85; filter: none; background: var(--surf); }
.rt-ws-runpin.is-on {
opacity: 1; filter: none;
background: #FFF3E0; border-color: var(--amber);
}
.rt-ws-runcaret { background: transparent; border: 0; color: var(--txm); cursor: pointer; font-size: 12px; }
/* ─── Held panel ───────────────────────────────────────────────────── */
.rt-ws-held {
margin: 0 0 8px;
background: #FFFBF0;
border: 1px solid #FFE0B2;
border-radius: 4px;
padding: 8px 9px 9px;
}
.rt-ws-held-h {
display: flex; align-items: center; gap: 7px;
margin-bottom: 6px;
}
.rt-ws-held-h-lbl {
font-size: 11px; font-weight: 700; letter-spacing: .04em;
text-transform: uppercase; color: #6D4C00;
}
.rt-ws-held-h-count {
font-size: 10px; font-weight: 700;
background: var(--amber); color: #fff;
padding: 1px 6px; border-radius: 9px;
}
.rt-ws-held-clear {
margin-left: auto; padding: 2px 8px;
font: inherit; font-size: 10.5px; color: #6D4C00;
background: transparent; border: 1px solid #FFCC80;
border-radius: 3px; cursor: pointer;
}
.rt-ws-held-clear:hover { background: #FFE0B2; }
.rt-ws-held-search {
display: flex; gap: 4px; margin-bottom: 4px;
}
.rt-ws-held-search input {
flex: 1; padding: 4px 7px; font: inherit; font-size: 12px;
background: #fff; color: var(--tx);
border: 1px solid #FFCC80; border-radius: 3px;
box-sizing: border-box;
}
.rt-ws-held-search button {
padding: 4px 10px; font: inherit; font-size: 13px; font-weight: 700;
background: var(--amber); color: #fff;
border: none; border-radius: 3px; cursor: pointer;
}
.rt-ws-held-msg {
font-size: 10.5px; color: #6D4C00;
margin: 2px 0 4px;
font-style: italic;
}
.rt-ws-held-empty {
font-size: 11px; color: var(--txm); font-style: italic;
padding: 4px 0 0;
}
.rt-ws-held-list {
list-style: none; padding: 0; margin: 4px 0 0;
display: flex; flex-direction: column; gap: 3px;
}
.rt-ws-held-row {
display: flex; align-items: center; gap: 6px;
padding: 4px 6px;
background: #fff;
border: 1px solid #FFE0B2;
border-radius: 3px;
cursor: pointer;
font-size: 11.5px;
}
.rt-ws-held-row:hover { background: #FFF8E1; }
.rt-ws-held-chip {
display: inline-block; width: 10px; height: 10px;
border-radius: 50%; border: 1px solid rgba(0,0,0,.25);
flex: 0 0 auto;
}
.rt-ws-held-num { font-weight: 700; color: var(--tx); min-width: 50px; }
.rt-ws-held-meta { color: var(--txm); flex: 1; font-size: 10.5px; }
.rt-ws-held-x {
background: transparent; border: none; cursor: pointer;
color: var(--txm); font-size: 14px; line-height: 1;
padding: 0 3px;
}
.rt-ws-held-x:hover { color: var(--red); }
.rt-ws-runbody {
padding: 6px 11px 10px;
border-top: 1px solid var(--bdr);
}
.rt-ws-runfacts {
display: grid; grid-template-columns: auto 1fr; gap: 2px 10px;
margin: 4px 0 8px; font-size: 11.5px;
}
.rt-ws-runfacts dt { color: var(--txm); font-weight: 600; font-size: 10.5px; }
.rt-ws-runfacts dd { margin: 0; color: var(--tx); }
.rt-ws-stops { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.rt-ws-stop {
display: grid; grid-template-columns: 22px 50px 1fr; gap: 6px;
padding: 4px 6px; font-size: 11.5px;
border-bottom: 1px dotted var(--bdr);
}
.rt-ws-stop:last-child { border-bottom: none; }
.rt-ws-stop-n {
font-family: 'IBM Plex Mono', monospace; font-size: 10.5px;
color: var(--txm); text-align: right; font-weight: 700;
}
.rt-ws-stop-t {
font-family: 'IBM Plex Mono', monospace; font-size: 11px;
color: var(--tx); font-weight: 600;
}
.rt-ws-stop-name { color: var(--tx); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rt-ws-stutbl { width: 100%; border-collapse: collapse; font-size: 12px; }
.rt-ws-stutbl th {
background: var(--surf2); color: var(--txm);
padding: 5px 7px; text-align: left;
font-size: 10.5px; font-weight: 700;
text-transform: uppercase; letter-spacing: .04em;
border-bottom: 1px solid var(--bdr);
}
.rt-ws-stutbl td { padding: 5px 7px; border-bottom: 1px solid var(--bdr); }
.rt-ws-stutbl tbody tr { cursor: pointer; }
.rt-ws-stutbl tbody tr:hover { background: var(--surf2); }
.rt-ws-unroutedlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.rt-ws-unrouted {
display: flex; gap: 8px; align-items: flex-start;
padding: 7px 9px;
background: rgba(167,48,39,.04);
border: 1px solid rgba(167,48,39,.25);
border-radius: 4px;
}
.rt-ws-unrouted-bang {
width: 22px; height: 22px;
background: var(--red); color: #fff;
border-radius: 50%; flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
font-size: 12.5px; font-weight: 700;
}
.rt-ws-unrouted-body { flex: 1; min-width: 0; }
.rt-ws-unrouted-name { font-weight: 600; font-size: 12.5px; color: var(--tx); }
.rt-ws-unrouted-meta { font-size: 11px; color: var(--txm); margin-top: 1px; }
.rt-ws-warn-tag {
display: inline-block; padding: 0 6px; border-radius: 99px;
background: rgba(184,134,11,.12); color: var(--amber);
border: 1px solid var(--amber);
font-size: 9.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
/* Map pins (numbered stops + school + depot + unrouted) — small CSS pills
rendered as AdvancedMarkerElement content. */
.rt-ws-stop-pin {
display: flex; align-items: center; justify-content: center;
width: 22px; height: 22px;
border-radius: 50%;
color: #fff; font-size: 10.5px; font-weight: 700;
border: 1.5px solid #fff;
box-shadow: 0 1px 4px rgba(0,0,0,.35);
cursor: pointer;
transform: translate(0, -50%); /* anchor to bottom-center */
}
.rt-ws-stop-pin.is-dim { opacity: .35; }
.rt-ws-pin {
display: flex; align-items: center; justify-content: center;
min-width: 26px; height: 26px; padding: 0 6px;
border-radius: 6px;
font-size: 14px;
border: 1.5px solid #1c1814;
background: #fff; color: #1c1814;
box-shadow: 0 2px 6px rgba(0,0,0,.30);
transform: translate(0, -50%);
}
.rt-ws-pin--school { background: #2D5F3F; color: #fff; border-color: #1c1814; font-size: 13px; }
.rt-ws-pin--depot { background: #6D4C41; color: #fff; border-color: #1c1814; font-weight: 700; }
.rt-ws-unrouted-pin {
width: 22px; height: 22px; border-radius: 50%;
background: #A73027; color: #fff;
display: flex; align-items: center; justify-content: center;
font-weight: 700; font-size: 12px;
border: 1.5px solid #fff;
box-shadow: 0 1px 4px rgba(167,48,39,.55);
transform: translate(0, -50%);
}
/* Session-enrollment underlay dot — student enrolled for the selected
session but not yet routed via a run. Smaller + lower contrast than
the routed stop pin so a fully-routed Fall view stays readable;
color comes from the school via inline-style background. */
.rt-ws-enroll-pin {
width: 10px; height: 10px; border-radius: 50%;
background: #888;
border: 1.5px solid #fff;
box-shadow: 0 1px 3px rgba(0,0,0,.35);
opacity: .85;
transform: translate(0, -50%);
}
@media (max-width: 960px) {
.rt-ws-body { grid-template-columns: 1fr; }
.rt-ws-side { border-top: 1px solid var(--bdr); max-height: 360px; }
}
/* ─── Routing → Change Queue ─────────────────────────────────────────── */
.rt-q {
max-width: 1200px; margin: 0 auto; padding: 18px 22px 40px;
font-family: 'IBM Plex Sans', sans-serif;
}
.rt-q-head {
display: flex; justify-content: space-between; align-items: flex-end;
gap: 18px; flex-wrap: wrap;
padding-bottom: 12px; margin-bottom: 14px;
border-bottom: 1px solid var(--bdr);
}
.rt-q-h { font-size: 18px; font-weight: 700; color: var(--tx); margin: 0; }
.rt-q-sub { font-size: 12px; color: var(--txm); margin: 4px 0 0; max-width: 620px; line-height: 1.5; }
.rt-q-sub b { color: var(--tx); }
.rt-q-tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.rt-q-tab {
padding: 5px 12px;
background: var(--surf2); color: var(--txm);
border: 1px solid var(--bdr); border-radius: 99px;
font-size: 11.5px; font-weight: 600; cursor: pointer;
font-family: 'IBM Plex Sans', sans-serif;
}
.rt-q-tab:hover:not(.is-on) { background: var(--surf); color: var(--tx); border-color: var(--green); }
.rt-q-tab.is-on { background: var(--green); color: #fff; border-color: var(--green); }
.rt-q-loading, .rt-q-empty, .rt-q-err {
padding: 22px; text-align: center;
font-size: 13px; color: var(--txm);
background: var(--surf); border: 1px dashed var(--bdr); border-radius: 5px;
}
.rt-q-err { color: var(--red); border-color: var(--red); }
.rt-q-tbl { width: 100%; border-collapse: collapse; font-size: 12px; background: var(--surf); border: 1px solid var(--bdr); border-radius: 5px; overflow: hidden; }
.rt-q-tbl th {
background: var(--surf2); color: var(--txm);
padding: 8px 10px; text-align: left;
font-size: 10.5px; font-weight: 700;
letter-spacing: .04em; text-transform: uppercase;
border-bottom: 1px solid var(--bdr);
}
.rt-q-tbl td { padding: 8px 10px; border-bottom: 1px solid var(--bdr); vertical-align: middle; }
.rt-q-tbl tr:last-child td { border-bottom: none; }
.rt-q-tbl tr:hover td { background: var(--surf2); }
.rt-q-th-type { width: 70px; }
.rt-q-th-dir { width: 40px; }
.rt-q-th-action { width: 1%; text-align: right; }
.rt-q-chip {
display: inline-block; padding: 2px 8px;
border-radius: 99px;
font-size: 10px; font-weight: 700; letter-spacing: .05em;
border: 1px solid currentColor;
}
.rt-q-chip--new { color: var(--green); background: rgba(45,95,63,.10); }
.rt-q-chip--move { color: var(--blue); background: rgba(139,101,8,.10); }
.rt-q-chip--other { color: var(--txm); background: rgba(0,0,0,.04); }
.rt-q-stu { font-weight: 600; }
.rt-q-name { color: var(--tx); }
.rt-q-need {
display: inline-block; margin-left: 5px;
padding: 0 5px; border-radius: 99px;
background: rgba(184,134,11,.10); color: var(--amber);
border: 1px solid var(--amber);
font-size: 9.5px; font-weight: 700;
}
.rt-q-when { color: var(--txm); font-size: 11px; white-space: nowrap; }
.rt-q-notes { color: var(--txm); font-style: italic; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rt-q-action { white-space: nowrap; text-align: right; }
.rt-q-btn {
padding: 4px 11px;
background: var(--surf2); color: var(--tx);
border: 1px solid var(--bdr2); border-radius: 4px;
font-size: 11px; font-weight: 600; cursor: pointer;
font-family: 'IBM Plex Sans', sans-serif;
}
.rt-q-btn:hover:not(:disabled) { background: var(--surf); border-color: var(--green); color: var(--green); }
.rt-q-btn--primary {
background: var(--green); color: #fff; border-color: var(--green);
}
.rt-q-btn--primary:hover:not(:disabled) { background: var(--green); color: #fff; filter: brightness(1.08); }
.rt-q-btn:disabled { opacity: .55; cursor: wait; }
.rt-q-btn + .rt-q-btn { margin-left: 4px; }
.rt-q-recent {
margin-top: 22px;
background: var(--surf); border: 1px solid var(--bdr); border-radius: 5px;
padding: 6px 12px;
}
.rt-q-recent summary {
cursor: pointer; padding: 6px 0;
font-size: 12px; font-weight: 700; color: var(--txm);
text-transform: uppercase; letter-spacing: .04em;
}
.rt-q-recent-list { list-style: none; margin: 0; padding: 6px 0 4px; display: flex; flex-direction: column; gap: 4px; }
.rt-q-recent-list li { font-size: 12px; padding: 4px 0; border-bottom: 1px dotted var(--bdr); }
.rt-q-recent-list li:last-child { border-bottom: none; }
.rt-q-recent-name { font-weight: 600; color: var(--tx); margin-right: 8px; }
.rt-q-recent-meta { color: var(--txm); font-size: 11px; }
/* ─── Routing → Assignment Builder (timeline) ────────────────────────── */
.rt-ab {
max-width: 1480px; margin: 0 auto; padding: 18px 22px 40px;
font-family: 'IBM Plex Sans', sans-serif;
}
.rt-ab-head {
display: flex; justify-content: space-between; align-items: flex-end;
gap: 18px; flex-wrap: wrap;
padding-bottom: 12px; margin-bottom: 14px;
border-bottom: 1px solid var(--bdr);
}
.rt-ab-h { font-size: 18px; font-weight: 700; color: var(--tx); margin: 0; }
.rt-ab-sub { font-size: 12px; color: var(--txm); margin: 4px 0 0; max-width: 720px; line-height: 1.5; }
.rt-ab-stats { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.rt-ab-stat { font-size: 12px; color: var(--txm); }
.rt-ab-stat b { color: var(--tx); font-weight: 700; }
.rt-ab-stat.is-warn b { color: var(--amber); }
.rt-ab-toolbar {
display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
margin-bottom: 12px;
}
.rt-ab-toolbar input[type=search] {
flex: 1; min-width: 240px; max-width: 360px;
padding: 7px 10px;
font: inherit; font-size: 13px;
background: var(--surf2); color: var(--tx);
border: 1px solid var(--bdr); border-radius: 4px;
}
.rt-ab-toolbar input[type=search]:focus { outline: 2px solid rgba(45,95,63,.35); border-color: var(--green); }
.rt-ab-loading, .rt-ab-empty, .rt-ab-err {
padding: 22px; text-align: center;
font-size: 13px; color: var(--txm);
background: var(--surf); border: 1px dashed var(--bdr); border-radius: 5px;
}
.rt-ab-err { color: var(--red); border-color: var(--red); }
/* ── Timeline shell ───────────────────────────────────────────────────── */
.rt-ab-tl {
background: var(--surf);
border: 1px solid var(--bdr); border-radius: 5px;
overflow-x: auto;
}
.rt-ab-tl-label-col-width { width: 110px; } /* keep in sync with the .rt-ab-tl-label width below */
.rt-ab-tl-axis {
display: flex;
position: sticky; top: 0; z-index: 2;
background: var(--surf2);
border-bottom: 1px solid var(--bdr);
height: 30px;
}
.rt-ab-tl-label-spacer { flex: 0 0 110px; border-right: 1px solid var(--bdr); }
.rt-ab-tl-axis-track {
flex: 1; position: relative; min-width: 720px;
}
.rt-ab-tl-stats-h {
flex: 0 0 195px;
display: grid; grid-template-columns: 1fr 1fr 1fr;
align-items: center; gap: 0;
border-left: 1px solid var(--bdr);
}
.rt-ab-tl-stat-col {
font-size: 10px; font-weight: 700; letter-spacing: .05em;
text-transform: uppercase; color: var(--txm);
text-align: center;
border-right: 1px solid var(--bdr);
padding: 0 4px;
cursor: help;
}
.rt-ab-tl-stat-col:last-child { border-right: none; }
.rt-ab-tl-tick {
position: absolute; top: 0; bottom: 0;
border-left: 1px dotted var(--bdr2);
padding-left: 4px;
display: flex; align-items: center;
}
.rt-ab-tl-tick:first-child { border-left: none; padding-left: 6px; }
.rt-ab-tl-tick-label {
font-family: 'IBM Plex Mono', monospace;
font-size: 10.5px; font-weight: 600; color: var(--txm);
}
.rt-ab-tl-rows {}
.rt-ab-tl-row {
display: flex;
border-bottom: 1px solid var(--bdr);
}
.rt-ab-tl-row:last-child { border-bottom: none; }
.rt-ab-tl-row:hover .rt-ab-tl-label { background: var(--surf2); }
.rt-ab-tl-label {
flex: 0 0 110px;
padding: 8px 10px;
border-right: 1px solid var(--bdr);
background: var(--surf);
display: flex; align-items: center; gap: 4px;
position: sticky; left: 0; z-index: 1;
}
.rt-ab-tl-asg {
font-weight: 700; font-size: 12.5px; color: var(--tx);
letter-spacing: .02em;
}
.rt-ab-tl-note { color: var(--amber); font-size: 14px; cursor: help; }
.rt-ab-tl-track {
flex: 1; position: relative;
height: 38px;
min-width: 720px;
background: var(--bg);
}
.rt-ab-tl-stats {
flex: 0 0 195px;
display: grid; grid-template-columns: 1fr 1fr 1fr;
align-items: center;
border-left: 1px solid var(--bdr);
background: var(--surf);
}
.rt-ab-tl-stat {
font-family: 'IBM Plex Mono', monospace;
font-size: 11.5px; font-weight: 600;
color: var(--tx);
text-align: center;
border-right: 1px solid var(--bdr);
padding: 0 4px;
}
.rt-ab-tl-stat:last-child { border-right: none; color: var(--green); }
.rt-ab-tl-gridline {
position: absolute; top: 0; bottom: 0;
width: 0; border-left: 1px dotted var(--bdr);
pointer-events: none;
}
.rt-ab-tl-empty {
position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
font-size: 11px; color: var(--txm); font-style: italic;
}
/* Each run block — three sub-segments: pre-DH, body, post-DH */
.rt-ab-run {
position: absolute; top: 4px; bottom: 4px;
display: flex; align-items: stretch;
overflow: hidden;
border-radius: 4px;
cursor: pointer;
box-shadow: 0 1px 2px rgba(0,0,0,.08);
white-space: nowrap;
}
.rt-ab-run:hover { box-shadow: 0 2px 6px rgba(0,0,0,.18); z-index: 3; }
.rt-ab-run--selected {
outline: 3px solid var(--green);
outline-offset: 1px;
z-index: 5;
box-shadow: 0 4px 12px rgba(0,0,0,.25);
}
.rt-ab-body {
flex: 1 1 auto;
display: flex; align-items: center; gap: 6px;
padding: 0 8px;
color: #fff;
border: 1.5px solid;
border-radius: 4px;
min-width: 0;
}
/* Zebra stripes overlaid on top of the run's base color → "combo" signal.
Diagonal white stripes work over any base color and keep the run label
readable. */
.rt-ab-body--combo {
background-image: repeating-linear-gradient(
45deg,
rgba(255,255,255,0.28) 0 7px,
transparent 7px 14px
);
}
/* ─── Move-mode shell ──────────────────────────────────────────────── */
.rt-ab-movebar {
display: flex; align-items: center; gap: 10px;
padding: 8px 12px; margin: 0 0 10px;
background: #FFF8E1;
border: 1px solid #FFD54F;
border-left: 4px solid var(--amber);
border-radius: 4px;
font-size: 12.5px; color: var(--tx);
}
.rt-ab-movebar-dot {
display: inline-block; width: 12px; height: 12px;
border-radius: 3px; flex: 0 0 auto;
box-shadow: 0 0 0 1px rgba(0,0,0,.15);
}
.rt-ab-movebar-cta {
margin-left: auto; color: var(--txm); font-size: 11.5px;
}
.rt-ab-movebar-cta kbd {
display: inline-block; padding: 1px 5px;
font: 600 10.5px 'IBM Plex Mono', monospace;
background: #fff; border: 1px solid var(--bdr); border-radius: 3px;
}
.rt-ab-movebar-cancel {
padding: 4px 10px; font: inherit; font-size: 11.5px;
background: var(--surf); color: var(--tx);
border: 1px solid var(--bdr); border-radius: 4px; cursor: pointer;
}
.rt-ab-movebar-cancel:hover { background: var(--surf2); }
/* ─── Recent changes (undo) panel ───────────────────────────────────── */
.rt-ab-history {
margin: 0 0 10px;
border: 1px solid var(--bdr); border-radius: 4px;
background: var(--surf);
}
.rt-ab-history-summary {
list-style: none; cursor: pointer;
display: flex; align-items: center; gap: 10px;
padding: 7px 12px;
font-size: 12px; color: var(--tx);
}
.rt-ab-history-summary::-webkit-details-marker { display: none; }
.rt-ab-history-summary::before {
content: '▸'; color: var(--txm); font-size: 10px;
transition: transform .12s;
}
.rt-ab-history[open] .rt-ab-history-summary::before { transform: rotate(90deg); }
.rt-ab-history-lbl { font-weight: 700; }
.rt-ab-history-count {
font-size: 11px; color: var(--txm);
font-family: 'IBM Plex Mono', monospace;
}
.rt-ab-history-hint { margin-left: auto; font-size: 11px; color: var(--txm); font-style: italic; }
.rt-ab-history-tbl {
width: 100%; border-collapse: collapse; font-size: 12px;
border-top: 1px solid var(--bdr);
}
.rt-ab-history-tbl thead {
background: var(--surf2);
font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em;
color: var(--txm);
}
.rt-ab-history-tbl th, .rt-ab-history-tbl td {
padding: 6px 12px; text-align: left;
border-bottom: 1px solid var(--bdr);
}
.rt-ab-history-tbl tr:last-child td { border-bottom: none; }
.rt-ab-history-tbl tr.is-undone { opacity: 0.55; text-decoration: line-through; }
.rt-ab-hist-when { color: var(--txm); width: 80px; font-family: 'IBM Plex Mono', monospace; font-size: 11px; }
.rt-ab-hist-run { width: 80px; }
.rt-ab-hist-move { font-family: 'IBM Plex Mono', monospace; font-size: 11.5px; }
.rt-ab-hist-arrow { color: var(--txm); margin: 0 6px; }
.rt-ab-hist-action { width: 80px; text-align: right; }
.rt-ab-hist-undo {
padding: 3px 10px; font: inherit; font-size: 11.5px;
background: var(--surf2); color: var(--tx);
border: 1px solid var(--bdr); border-radius: 3px; cursor: pointer;
}
.rt-ab-hist-undo:hover:not(:disabled) {
background: #FFEBEE; border-color: var(--red); color: var(--red);
}
.rt-ab-hist-undo:disabled { opacity: 0.5; cursor: not-allowed; }
/* In move mode, every row becomes a drop target — pointer cursor + faint
highlight on hover so the dispatcher sees what they'd land on. */
.rt-ab-tl-row--droptarget { cursor: pointer; }
.rt-ab-tl-row--droptarget:hover .rt-ab-tl-track {
background: linear-gradient(transparent, rgba(76,175,80,0.08), transparent);
}
.rt-ab-tl-row--source .rt-ab-tl-track {
background: rgba(255,235,59,0.10);
}
/* ─── Toast ───────────────────────────────────────────────────────── */
.rt-ab-toast {
position: fixed; left: 50%; bottom: 28px;
transform: translateX(-50%);
padding: 10px 16px;
font-size: 13px; font-weight: 600;
background: var(--tx); color: #fff;
border-radius: 6px;
box-shadow: 0 6px 20px rgba(0,0,0,.25);
z-index: 9999;
max-width: 80vw;
}
.rt-ab-toast[hidden] { display: none; }
.rt-ab-toast--ok { background: #2E7D32; }
.rt-ab-toast--warn { background: #EF6C00; }
.rt-ab-toast--error { background: #C62828; }
/* ─── Combo tooltip block ─────────────────────────────────────────── */
.rt-ab-tooltip-combo {
color: var(--amber); font-weight: 700; letter-spacing: .04em;
}
.rt-ab-tooltip-schools {
list-style: none; padding: 0; margin: 4px 0 2px;
display: flex; flex-direction: column; gap: 2px;
}
.rt-ab-tooltip-schools li {
display: flex; justify-content: space-between; gap: 10px;
font-size: 11px;
}
.rt-ab-tooltip-school-name { color: var(--tx); }
.rt-ab-tooltip-school-n { color: var(--txm); font-family: 'IBM Plex Mono', monospace; }
.rt-ab-tooltip-home {
font-size: 9.5px; padding: 0 4px;
background: var(--green); color: #fff;
border-radius: 2px; vertical-align: middle;
font-weight: 700; letter-spacing: .04em;
}
.rt-ab-runlabel { font-size: 11.5px; font-weight: 700; letter-spacing: .02em; }
.rt-ab-runtimes {
font-family: 'IBM Plex Mono', monospace;
font-size: 10.5px; opacity: .9;
overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
/* Hatched deadhead bands — repeating diagonal stripes in the run's color */
.rt-ab-dh {
flex: 0 0 auto;
background-image: repeating-linear-gradient(
45deg,
rgba(255,255,255,0) 0,
rgba(255,255,255,0) 4px,
rgba(0,0,0,0.35) 4px,
rgba(0,0,0,0.35) 5px
);
/* `background-color` is set inline per-run (the run's color at 13% alpha)
so each block's DH bands tint to match the body. */
}
.rt-ab-dh--pre { border-radius: 4px 0 0 4px; }
.rt-ab-dh--post { border-radius: 0 4px 4px 0; }
/* ── Orphan runs section ──────────────────────────────────────────────── */
.rt-ab-orphans {
margin-top: 18px;
background: var(--surf); border: 1px solid rgba(184,134,11,.4); border-radius: 5px;
padding: 6px 12px;
}
.rt-ab-orphans summary {
cursor: pointer; padding: 6px 0;
font-size: 12px; font-weight: 700; color: var(--amber);
text-transform: uppercase; letter-spacing: .04em;
}
.rt-ab-orphan-tbl { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.rt-ab-orphan-tbl th, .rt-ab-orphan-tbl td { padding: 4px 8px; border-bottom: 1px dotted var(--bdr); text-align: left; }
.rt-ab-orphan-tbl th { color: var(--txm); font-size: 10px; text-transform: uppercase; letter-spacing: .04em; font-weight: 700; }
/* ─── Builder hover tooltip (rendered to document.body, never clipped) ── */
.rt-ab-tooltip {
position: absolute;
z-index: 9999;
pointer-events: none;
background: var(--surf);
border: 1px solid var(--tx);
border-radius: 5px;
box-shadow: 0 4px 14px rgba(0,0,0,.22);
padding: 9px 12px;
font-family: 'IBM Plex Sans', sans-serif;
font-size: 12px;
color: var(--tx);
min-width: 230px;
max-width: 320px;
}
.rt-ab-tooltip[hidden] { display: none; }
.rt-ab-tooltip-h {
display: flex; align-items: baseline; gap: 8px;
margin-bottom: 4px;
}
.rt-ab-tooltip-run {
font-size: 15px; font-weight: 700; color: var(--tx);
}
.rt-ab-tooltip-type {
font-size: 10px; font-weight: 700;
letter-spacing: .06em; text-transform: uppercase;
color: var(--txm);
padding: 1px 6px;
background: var(--surf2); border: 1px solid var(--bdr); border-radius: 99px;
}
.rt-ab-tooltip-line { font-size: 11.5px; color: var(--tx); margin: 1px 0; }
.rt-ab-tooltip-line b { font-weight: 700; }
.rt-ab-tooltip-hr {
border: 0; border-top: 1px dotted var(--bdr);
margin: 6px 0;
}
.rt-ab-tooltip-grid {
display: grid;
grid-template-columns: 1fr auto;
gap: 1px 10px;
font-size: 11.5px;
}
.rt-ab-tooltip-grid span { color: var(--txm); }
.rt-ab-tooltip-grid b {
font-family: 'IBM Plex Mono', monospace;
font-weight: 600; color: var(--tx);
text-align: right;
}
.rt-ab-tooltip-grid-sm { font-size: 11px; }
.rt-ab-tooltip-grid-sm b { color: var(--green); }
.rt-ab-tooltip-dim { color: var(--txm); font-size: 10.5px; }
@media (max-width: 960px) {
.rt-ab-tl-stats-h, .rt-ab-tl-stats { flex-basis: 150px; }
}
/* ─── Builder summary tiles (above the toolbar) ──────────────────────── */
.rt-ab-summary {
display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px;
margin-bottom: 14px;
}
.rt-ab-sum-tile {
background: var(--surf);
border: 1px solid var(--bdr); border-radius: 5px;
padding: 12px 14px;
display: flex; flex-direction: column; gap: 2px;
border-left-width: 4px;
}
.rt-ab-sum-tile--amonly { border-left-color: var(--green); }
.rt-ab-sum-tile--pmonly { border-left-color: #1565C0; }
.rt-ab-sum-tile--under { border-left-color: var(--amber); }
.rt-ab-sum-tile--over { border-left-color: var(--red); }
.rt-ab-sum-tile--total {
background: var(--tx); color: #fff;
border-color: var(--tx);
border-left-color: var(--tx);
}
.rt-ab-sum-tile--total .rt-ab-sum-n,
.rt-ab-sum-tile--total .rt-ab-sum-lbl,
.rt-ab-sum-tile--total .rt-ab-sum-sub,
.rt-ab-sum-tile--total .rt-ab-sum-avg,
.rt-ab-sum-tile--total .rt-ab-sum-avg b { color: #fff; }
.rt-ab-sum-tile--total .rt-ab-sum-sub,
.rt-ab-sum-tile--total .rt-ab-sum-avg { opacity: .85; }
.rt-ab-sum-n {
font-size: 28px; font-weight: 700; color: var(--tx);
font-family: 'IBM Plex Sans', sans-serif;
line-height: 1; margin-bottom: 4px;
}
.rt-ab-sum-n--big {
font-size: 32px;
}
.rt-ab-sum-lbl {
font-size: 12px; font-weight: 700; color: var(--tx);
letter-spacing: .02em;
}
.rt-ab-sum-sub {
font-size: 10.5px; color: var(--txm);
}
.rt-ab-sum-avg {
margin-top: 6px;
font-size: 11px; color: var(--txm);
font-family: 'IBM Plex Mono', monospace;
}
.rt-ab-sum-avg b { color: var(--tx); font-weight: 700; }
/* Sort selector in the toolbar */
.rt-ab-sort {
display: flex; align-items: center; gap: 6px;
font-size: 11px; color: var(--txm);
}
.rt-ab-sort-lbl {
font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
}
.rt-ab-sort select {
padding: 5px 24px 5px 9px;
font: inherit; font-size: 12px;
background: var(--surf2); color: var(--tx);
border: 1px solid var(--bdr); border-radius: 4px;
cursor: pointer;
appearance: none;
background-image:
linear-gradient(45deg, transparent 50%, var(--txm) 50%),
linear-gradient(135deg, var(--txm) 50%, transparent 50%);
background-position: calc(100% - 12px) center, calc(100% - 8px) center;
background-size: 4px 4px, 4px 4px;
background-repeat: no-repeat;
}
@media (max-width: 960px) {
.rt-ab-summary { grid-template-columns: repeat(2, 1fr); }
}
/* ═══════════════════════════════════════════════════════════════════════
Messages — top-level tab (Compose / History / Suppressed)
═══════════════════════════════════════════════════════════════════════ */
.rt-msg-shell {
display: grid; grid-template-columns: 220px 1fr; gap: 0;
min-height: calc(100vh - 120px);
}
.rt-msg-side {
background: var(--surf); border-right: 1px solid var(--bdr);
padding: 16px 0; display: flex; flex-direction: column;
}
.rt-msg-side-title {
padding: 0 16px 12px; font-size: 12px; font-weight: 700;
letter-spacing: .08em; text-transform: uppercase; color: var(--txm);
}
.rt-msg-side-list { list-style: none; padding: 0; margin: 0; flex: 1; }
.rt-msg-side-list li { margin: 0; }
.rt-msg-side-btn {
width: 100%; text-align: left;
padding: 10px 16px; border: none;
background: transparent; color: var(--tx);
font: inherit; font-size: 13.5px; cursor: pointer;
border-left: 3px solid transparent;
}
.rt-msg-side-btn:hover { background: var(--surf2); }
.rt-msg-side-btn.is-on { background: var(--surf2); border-left-color: var(--green); font-weight: 600; }
.rt-msg-side-foot {
padding: 12px 16px; margin-top: auto;
border-top: 1px solid var(--bdr);
background: #FAFAFA;
}
.rt-msg-side-foot-lbl {
font-size: 11px; font-weight: 700; letter-spacing: .05em;
text-transform: uppercase; color: var(--txm); margin-bottom: 4px;
}
.rt-msg-side-foot-txt { font-size: 11.5px; color: var(--txm); line-height: 1.45; }
.rt-msg-body { padding: 18px 24px; }
.rt-msg-h {
font-size: 14px; font-weight: 700; letter-spacing: .02em;
margin: 0 0 10px; color: var(--tx);
}
.rt-msg-h-n {
font-size: 11.5px; color: var(--txm);
font-weight: 500; margin-left: 8px;
}
.rt-msg-loading, .rt-msg-rec-empty {
padding: 18px; color: var(--txm); font-size: 13px;
}
.rt-msg-err {
padding: 12px; border-radius: 4px;
background: #FFEBEE; border-left: 4px solid var(--red);
color: var(--tx); font-size: 13px;
}
/* ─── Compose layout ────────────────────────────────────────────────── */
.rt-msg-compose { max-width: 1500px; }
.rt-msg-cols {
display: grid; grid-template-columns: 320px 1fr 360px; gap: 14px;
align-items: start;
}
.rt-msg-col {
background: var(--surf); border: 1px solid var(--bdr);
border-radius: 5px; padding: 14px;
}
.rt-msg-col-aud { min-width: 0; }
.rt-msg-col-rec { min-width: 0; }
.rt-msg-col-body { position: sticky; top: 12px; }
/* Audience picker */
.rt-msg-aud-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.rt-msg-aud-opt {
display: flex; gap: 8px; align-items: flex-start;
padding: 8px 10px; border-radius: 4px;
border: 1px solid var(--bdr); cursor: pointer;
background: #fff;
}
.rt-msg-aud-opt:hover { background: var(--surf2); }
.rt-msg-aud-opt.is-on {
background: #E8F5E9; border-color: var(--green);
}
.rt-msg-aud-opt input { margin-top: 3px; }
.rt-msg-aud-lbl { font-size: 13px; font-weight: 600; color: var(--tx); }
.rt-msg-aud-hint { font-size: 11px; color: var(--txm); margin-top: 1px; }
.rt-msg-aud-sub {
padding-top: 10px; border-top: 1px dashed var(--bdr);
}
.rt-msg-aud-empty { font-size: 12px; color: var(--txm); font-style: italic; padding: 6px 0; }
.rt-msg-pick-lbl {
display: block; font-size: 11px; font-weight: 700;
letter-spacing: .05em; text-transform: uppercase;
color: var(--txm); margin: 6px 0 4px;
}
.rt-msg-pick-input {
width: 100%; padding: 6px 9px; font: inherit; font-size: 13px;
background: #fff; color: var(--tx);
border: 1px solid var(--bdr); border-radius: 4px;
box-sizing: border-box;
}
.rt-msg-pick-results {
margin-top: 6px; max-height: 220px; overflow-y: auto;
border: 1px solid var(--bdr); border-radius: 4px;
display: flex; flex-direction: column;
}
.rt-msg-pick-results:empty { display: none; }
.rt-msg-pick-row {
display: flex; justify-content: space-between; align-items: baseline;
padding: 6px 10px; border: none; background: #fff; cursor: pointer;
text-align: left; font: inherit; font-size: 13px; color: var(--tx);
border-bottom: 1px solid var(--bdr);
}
.rt-msg-pick-row:last-child { border-bottom: none; }
.rt-msg-pick-row:hover { background: var(--surf2); }
.rt-msg-pick-row.is-picked { background: var(--surf2); color: var(--txm); cursor: default; }
.rt-msg-pick-row.is-picked b { color: var(--txm); }
.rt-msg-pick-row-tag {
font-size: 9.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
color: var(--green); margin-left: 6px;
}
.rt-msg-pick-meta { font-size: 11px; color: var(--txm); }
.rt-msg-pick-hint { padding: 6px 10px; font-size: 11.5px; color: var(--txm); }
.rt-msg-pick-hint--err { color: var(--red); }
/* Picked-employee chip row (Compose → Employee(s) audience). */
.rt-msg-pick-chips {
margin-top: 10px; padding: 8px; background: var(--surf2);
border: 1px solid var(--bdr2); border-radius: 4px;
display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
}
.rt-msg-pick-chips-lbl {
font-size: 10.5px; font-weight: 700; letter-spacing: .04em;
text-transform: uppercase; color: var(--txm); margin-right: 4px;
}
.rt-msg-pick-chip {
display: inline-flex; align-items: center; gap: 4px;
padding: 3px 4px 3px 10px; background: var(--surf); border: 1px solid var(--bdr2);
border-radius: 99px; font-size: 11.5px; line-height: 1.2;
}
.rt-msg-pick-chip.is-warn { border-color: var(--amber); }
.rt-msg-pick-chip-role {
font-style: normal; font-size: 9.5px; font-weight: 700; letter-spacing: .03em;
text-transform: uppercase; color: var(--blue); margin-left: 2px;
}
.rt-msg-pick-chip-warn-tag {
font-style: normal; font-size: 9.5px; font-weight: 700; letter-spacing: .03em;
text-transform: uppercase; color: var(--amber); margin-left: 2px;
}
.rt-msg-pick-chip-x {
margin-left: 4px; padding: 0 5px;
background: none; border: 0; color: var(--txd); cursor: pointer;
font-size: 14px; line-height: 1; border-radius: 99px;
}
.rt-msg-pick-chip-x:hover { color: #fff; background: var(--red); }
.rt-msg-pick-go {
margin-top: 8px; padding: 6px 12px; font: inherit; font-size: 12.5px;
background: var(--green); color: #fff; border: none; border-radius: 4px;
cursor: pointer; font-weight: 600;
}
.rt-msg-pick-go:hover { background: #2E7D32; }
/* Recipients table */
.rt-msg-rec-toolbar {
display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
font-size: 12px; color: var(--txm);
}
.rt-msg-rec-allnone {
padding: 3px 8px; font: inherit; font-size: 11.5px;
background: var(--surf2); color: var(--tx);
border: 1px solid var(--bdr); border-radius: 3px; cursor: pointer;
}
.rt-msg-rec-summary { margin-left: auto; font-family: 'IBM Plex Mono', monospace; }
.rt-msg-rec-tblwrap {
max-height: 540px; overflow-y: auto;
border: 1px solid var(--bdr); border-radius: 4px;
}
.rt-msg-rec-tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.rt-msg-rec-tbl thead {
position: sticky; top: 0; background: var(--surf);
font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
color: var(--txm); font-weight: 700;
}
.rt-msg-rec-tbl th, .rt-msg-rec-tbl td {
padding: 5px 8px; border-bottom: 1px solid var(--bdr);
text-align: left; vertical-align: middle;
}
.rt-msg-rec-th-cb { width: 30px; }
.rt-msg-rec-th-kind { width: 70px; }
.rt-msg-rec-th-status { width: 110px; }
.rt-msg-rec-tbl tr.is-disabled { opacity: 0.55; background: #FAFAFA; }
.rt-msg-rec-name { font-weight: 500; }
.rt-msg-rec-phone { font-family: 'IBM Plex Mono', monospace; color: var(--txm); }
.rt-msg-rec-kind { font-size: 11px; text-transform: uppercase; color: var(--txm); }
.rt-msg-rec-tag {
display: inline-block; padding: 1px 5px; margin-right: 3px;
font-size: 10px; font-weight: 700; letter-spacing: .03em;
text-transform: uppercase; border-radius: 2px;
}
.rt-msg-rec-tag--warn { background: #FFF3E0; color: #E65100; }
.rt-msg-rec-tag--block { background: #FFEBEE; color: #C62828; }
/* Body editor */
.rt-msg-body {
width: 100%; box-sizing: border-box;
padding: 8px 10px; font: inherit; font-size: 13px;
background: #fff; color: var(--tx);
border: 1px solid var(--bdr); border-radius: 4px;
resize: vertical; min-height: 110px;
}
.rt-msg-body-meta {
display: flex; justify-content: space-between; align-items: center;
margin-top: 6px; font-size: 11.5px; color: var(--txm);
font-family: 'IBM Plex Mono', monospace;
}
.rt-msg-body-cost b { color: var(--tx); }
.rt-msg-send-btn {
width: 100%; margin-top: 10px;
padding: 10px; font: inherit; font-size: 14px; font-weight: 700;
background: var(--green); color: #fff;
border: none; border-radius: 4px; cursor: pointer;
}
.rt-msg-send-btn:hover:not(:disabled) { background: #2E7D32; }
.rt-msg-send-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.rt-msg-body-foot {
margin-top: 8px; font-size: 10.5px; color: var(--txm); line-height: 1.4;
}
/* Result panel */
.rt-msg-result {
padding: 12px 16px; margin-bottom: 14px;
border-radius: 5px; border-left: 4px solid;
}
.rt-msg-result--ok { background: #E8F5E9; border-left-color: var(--green); }
.rt-msg-result--warn { background: #FFF3E0; border-left-color: var(--amber); }
.rt-msg-result--stub { background: #FFFDE7; border-left-color: #F9A825; }
.rt-msg-result-h { font-weight: 700; font-size: 13.5px; margin-bottom: 6px; }
.rt-msg-result-counts {
display: flex; gap: 14px; font-size: 12.5px;
font-family: 'IBM Plex Mono', monospace; color: var(--tx);
}
.rt-msg-result-counts b { color: var(--tx); font-weight: 700; }
.rt-msg-result-fails {
margin: 8px 0 0; padding-left: 20px; font-size: 12px; color: #C62828;
}
.rt-msg-result-close {
margin-top: 10px; padding: 4px 12px; font: inherit; font-size: 12px;
background: var(--tx); color: #fff;
border: none; border-radius: 4px; cursor: pointer;
}
/* ─── History ──────────────────────────────────────────────────────── */
.rt-msg-hist-tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.rt-msg-hist-tbl thead {
font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
color: var(--txm); font-weight: 700; background: var(--surf);
}
.rt-msg-hist-tbl th, .rt-msg-hist-tbl td {
padding: 8px 10px; border-bottom: 1px solid var(--bdr);
text-align: left; vertical-align: top;
}
.rt-msg-hist-cb { width: 30px; }
.rt-msg-hist-th-counts { width: 320px; }
.rt-msg-hist-expand {
background: transparent; border: none; cursor: pointer;
font-size: 14px; color: var(--txm);
}
.rt-msg-hist-body { font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: var(--tx); max-width: 360px; }
.rt-msg-hist-counts { display: flex; flex-wrap: wrap; gap: 4px; }
.rt-msg-hist-chip {
font-size: 10.5px; padding: 1px 6px;
background: #E8F5E9; color: #1B5E20; border-radius: 2px;
}
.rt-msg-hist-chip.is-warn { background: #FFEBEE; color: #B71C1C; }
.rt-msg-hist-chip b { font-weight: 700; }
.rt-msg-hist-detrow td { background: #FAFAFA; padding: 12px; }
.rt-msg-hist-dettbl { width: 100%; border-collapse: collapse; font-size: 12px; }
.rt-msg-hist-dettbl th, .rt-msg-hist-dettbl td {
padding: 4px 8px; border-bottom: 1px solid var(--bdr); text-align: left;
}
.rt-msg-hist-err { color: var(--red); cursor: help; }
/* ─── Suppressed ──────────────────────────────────────────────────── */
.rt-msg-supp-head {
display: flex; align-items: flex-start; gap: 14px; margin-bottom: 14px;
}
.rt-msg-supp-head > div { flex: 1; }
.rt-msg-supp-sub { font-size: 12px; color: var(--txm); margin: 4px 0 0; line-height: 1.5; }
.rt-msg-supp-add-btn {
padding: 7px 14px; font: inherit; font-size: 13px;
background: var(--green); color: #fff; border: none; border-radius: 4px;
cursor: pointer; font-weight: 600; flex: 0 0 auto;
}
.rt-msg-supp-tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.rt-msg-supp-tbl thead {
font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
color: var(--txm); font-weight: 700; background: var(--surf);
}
.rt-msg-supp-tbl th, .rt-msg-supp-tbl td {
padding: 7px 10px; border-bottom: 1px solid var(--bdr); text-align: left;
}
.rt-msg-supp-phone { font-family: 'IBM Plex Mono', monospace; }
.rt-msg-supp-action { width: 80px; text-align: right; }
.rt-msg-supp-lift {
padding: 3px 10px; font: inherit; font-size: 11.5px;
background: var(--surf2); color: var(--tx);
border: 1px solid var(--bdr); border-radius: 3px; cursor: pointer;
}
.rt-msg-supp-lift:hover { background: #FFEBEE; border-color: var(--red); color: var(--red); }
.rt-msg-supp-dlg {
padding: 20px; border: 1px solid var(--bdr); border-radius: 6px;
box-shadow: 0 10px 30px rgba(0,0,0,.2); min-width: 360px;
}
.rt-msg-supp-dlg::backdrop { background: rgba(0,0,0,.3); }
.rt-msg-supp-dlg h4 { margin: 0 0 12px; font-size: 14px; }
.rt-msg-supp-dlg label { display: block; margin-bottom: 10px; font-size: 12px; color: var(--txm); }
.rt-msg-supp-dlg input {
display: block; width: 100%; margin-top: 3px;
padding: 6px 8px; font: inherit; font-size: 13px;
border: 1px solid var(--bdr); border-radius: 3px; box-sizing: border-box;
}
.rt-msg-supp-dlg menu {
display: flex; gap: 8px; justify-content: flex-end; margin: 12px 0 0; padding: 0;
}
.rt-msg-supp-dlg menu button {
padding: 6px 14px; font: inherit; font-size: 12.5px;
border: 1px solid var(--bdr); border-radius: 4px; cursor: pointer;
background: var(--surf2); color: var(--tx);
}
.rt-msg-supp-dlg menu button[value="confirm"],
.rt-msg-supp-dlg menu #rt-msg-supp-dlg-ok {
background: var(--green); color: #fff; border-color: var(--green);
}
@media (max-width: 1200px) {
.rt-msg-cols { grid-template-columns: 1fr; }
.rt-msg-col-body { position: static; }
}
/* ===== BusBFF — To Be Completed (TBC) queue ============================ */
.bff-tbc-shell { padding: 16px 20px; max-width: 880px; font-family: 'IBM Plex Sans', sans-serif; }
.bff-tbc-header {
display: flex; justify-content: space-between; align-items: flex-start;
gap: 16px; padding-bottom: 14px; margin-bottom: 14px;
border-bottom: 1px solid var(--bdr);
}
.bff-tbc-title h2 { margin: 0; font-size: 18px; font-weight: 700; color: var(--tx); }
.bff-tbc-sub { font-size: 12px; color: var(--txm); margin-top: 4px; max-width: 64ch; }
.bff-tbc-total {
font-size: 11px; font-weight: 700;
padding: 4px 12px; border-radius: 99px;
color: var(--amber); background: rgba(184,134,11,.08);
border: 1px solid var(--amber);
font-family: 'IBM Plex Mono', monospace; flex-shrink: 0;
}
.bff-tbc-status { padding: 24px; text-align: center; color: var(--txm); font-size: 13px; }
.bff-tbc-status--err { color: var(--red); }
.bff-tbc-empty {
padding: 28px; text-align: center; color: var(--txm); font-size: 13px;
background: var(--surf2); border: 1px dashed var(--bdr2); border-radius: 6px;
max-width: 60ch; margin: 0 auto;
}
.bff-tbc-target {
display: flex; align-items: baseline; gap: 12px;
margin-bottom: 16px; padding: 10px 14px;
background: var(--surf2); border: 1px solid var(--bdr2); border-radius: 6px;
}
.bff-tbc-target-lbl {
font-size: 10.5px; font-weight: 700; letter-spacing: .04em;
text-transform: uppercase; color: var(--txm);
}
.bff-tbc-target select {
font: inherit; font-size: 13px; padding: 5px 10px;
border: 1px solid var(--bdr2); border-radius: 4px; background: var(--surf);
}
.bff-tbc-group { margin-bottom: 18px; }
.bff-tbc-group-h {
display: flex; justify-content: space-between; align-items: baseline;
padding: 6px 4px; margin-bottom: 6px;
border-bottom: 1px solid var(--bdr2);
}
.bff-tbc-group-name { font-size: 13px; font-weight: 700; color: var(--tx); }
.bff-tbc-group-count {
font-size: 10.5px; font-weight: 700; color: var(--txm);
font-family: 'IBM Plex Mono', monospace;
}
.bff-tbc-rows { display: flex; flex-direction: column; gap: 4px; }
.bff-tbc-row {
display: flex; align-items: stretch; gap: 0;
background: var(--surf); border: 1px solid var(--bdr2); border-radius: 5px;
overflow: hidden;
}
.bff-tbc-row-main {
flex: 1; min-width: 0;
display: flex; flex-direction: column; gap: 2px;
padding: 10px 12px;
background: transparent; border: 0; text-align: left;
font: inherit; color: var(--tx); cursor: pointer;
transition: background 80ms;
}
.bff-tbc-row-main:hover { background: var(--surf2); }
.bff-tbc-row-name { font-size: 13.5px; font-weight: 600; }
.bff-tbc-row-meta { font-size: 11.5px; color: var(--txm); font-family: 'IBM Plex Mono', monospace; }
.bff-tbc-row-right {
display: flex; align-items: center; gap: 8px;
padding: 10px 12px;
border-left: 1px solid var(--bdr2);
flex-shrink: 0;
}
.bff-tbc-complete {
font: inherit; font-size: 11px; font-weight: 700;
padding: 5px 11px; border-radius: 4px;
color: var(--green); background: var(--surf);
border: 1px solid var(--green); cursor: pointer;
transition: background 80ms, color 80ms;
white-space: nowrap;
}
.bff-tbc-complete:hover { background: var(--green); color: #fff; }
.bff-tbc-missing {
font-size: 10.5px; font-weight: 700;
padding: 2px 8px; border-radius: 99px;
color: var(--red); background: rgba(176,38,38,.08);
border: 1px solid var(--red);
font-family: 'IBM Plex Mono', monospace; white-space: nowrap;
}
.bff-tbc-missing--ok { color: var(--green); background: rgba(45,95,63,.08); border-color: var(--green); }
/* SCTAF "queued" pill is now a clickable button — give it button affordances */
.bff-sctaf-count--btn {
cursor: pointer; font-family: 'IBM Plex Mono', monospace;
transition: background 80ms, transform 60ms;
}
.bff-sctaf-count--btn:hover { background: rgba(184,134,11,.14); }
.bff-sctaf-count--btn:active { transform: translateY(1px); }
/* ===== Equipment (bus OOS tracking) ==================================== */
.eq-shell { padding: 0; font-family: 'IBM Plex Sans', sans-serif; position: relative; }
.eq-subnav {
display: flex; gap: 4px; padding: 12px 20px 0;
border-bottom: 1px solid var(--bdr);
background: var(--surf);
position: sticky; top: 0; z-index: 5;
}
.eq-subnav-btn {
padding: 8px 16px; border: 0; background: transparent; cursor: pointer;
font: inherit; font-size: 13px; font-weight: 600; color: var(--txm);
border-radius: 5px 5px 0 0; border: 1px solid transparent;
border-bottom: 0;
}
.eq-subnav-btn:hover { color: var(--tx); background: var(--surf2); }
.eq-subnav-btn.is-active {
color: var(--tx); background: var(--surf2);
border-color: var(--bdr); border-bottom: 1px solid var(--surf2);
position: relative; top: 1px;
}
.eq-body { padding: 16px 20px; max-width: 1100px; }
.eq-h { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 12px; margin-bottom: 14px; border-bottom: 1px solid var(--bdr); }
.eq-h h2 { margin: 0; font-size: 18px; font-weight: 700; }
.eq-h-count { font-size: 11px; font-weight: 700; color: var(--amber); font-family: 'IBM Plex Mono', monospace; }
.eq-h-tools { display: flex; gap: 8px; }
.eq-status { padding: 24px; text-align: center; color: var(--txm); font-size: 13px; }
.eq-status--err { color: var(--red); }
.eq-empty {
padding: 32px; text-align: center; color: var(--txm); font-size: 13px;
background: var(--surf2); border: 1px dashed var(--bdr2); border-radius: 6px;
max-width: 60ch; margin: 0 auto;
}
.eq-empty-h { font-size: 14px; font-weight: 700; color: var(--tx); margin-bottom: 4px; }
.eq-empty-b { font-size: 12px; }
/* OOS view — grouped cards */
.eq-oos-group { margin-bottom: 22px; }
.eq-oos-group-h {
font-size: 13px; font-weight: 700; margin: 0 0 8px;
text-transform: uppercase; letter-spacing: .04em; color: var(--txm);
}
.eq-oos-group-n {
display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 99px;
font-size: 10.5px; color: var(--amber);
background: rgba(184,134,11,.10); border: 1px solid var(--amber);
font-family: 'IBM Plex Mono', monospace;
}
.eq-oos-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.eq-oos-card {
background: var(--surf); border: 1px solid var(--bdr2); border-left: 3px solid var(--red);
border-radius: 5px; padding: 10px 12px; font-size: 12px;
}
.eq-oos-card-h { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; }
.eq-oos-card-bus { font-size: 15px; font-weight: 700; }
.eq-oos-card-days { font-size: 10.5px; color: var(--txm); font-family: 'IBM Plex Mono', monospace; }
.eq-oos-card-badges { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.eq-oos-card-badge {
font-size: 9.5px; font-weight: 700; padding: 2px 7px; border-radius: 99px;
text-transform: uppercase; letter-spacing: .02em;
}
.eq-oos-card-badge--subtype { color: var(--blue); background: rgba(45,74,120,.08); border: 1px solid var(--blue); }
.eq-oos-card-badge--children { color: var(--red); background: rgba(176,38,38,.08); border: 1px solid var(--red); }
.eq-oos-card-line { font-size: 11.5px; color: var(--txm); margin-bottom: 2px; line-height: 1.4; }
.eq-oos-card-line strong { color: var(--tx); font-weight: 600; }
.eq-oos-card-foot { margin-top: 8px; padding-top: 6px; border-top: 1px dashed var(--bdr2); }
.eq-oos-card-foot--passive { font-size: 10.5px; color: var(--txd); font-style: italic; }
.eq-oos-return-btn {
width: 100%; padding: 6px 10px; background: var(--surf2); border: 1px solid var(--green);
color: var(--green); font: inherit; font-size: 11.5px; font-weight: 700; cursor: pointer;
border-radius: 4px; transition: background 80ms, color 80ms;
}
.eq-oos-return-btn:hover { background: var(--green); color: #fff; }
/* Log Event form */
.eq-log { max-width: 720px; }
.eq-log-row { display: flex; flex-direction: column; gap: 4px; margin-bottom: 14px; }
.eq-log-lbl { font-size: 11px; font-weight: 700; color: var(--txm); text-transform: uppercase; letter-spacing: .04em; }
.eq-log-hint { font-size: 10.5px; color: var(--txd); margin-top: 2px; }
.eq-log-hint-inline {
font-size: 10px; font-weight: 600; color: var(--txd); text-transform: none;
letter-spacing: 0; margin-left: 4px;
}
.eq-input {
font: inherit; font-size: 13px; padding: 7px 10px;
border: 1px solid var(--bdr2); border-radius: 4px; background: var(--surf);
}
.eq-input:focus { outline: none; border-color: var(--blue); }
.eq-input--ta { font-family: inherit; resize: vertical; min-height: 60px; }
.eq-form-err {
padding: 8px 12px; background: rgba(176,38,38,.08); border: 1px solid var(--red);
color: var(--red); border-radius: 4px; font-size: 12px; margin-bottom: 14px;
}
.eq-log-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
.eq-btn {
font: inherit; font-size: 13px; padding: 8px 16px; border-radius: 4px; cursor: pointer;
border: 1px solid transparent;
}
.eq-btn--primary { background: var(--green); color: #fff; border-color: var(--green); font-weight: 700; }
.eq-btn--primary:hover { background: var(--green-dark, #1d4029); }
.eq-btn--primary:disabled { opacity: .5; cursor: not-allowed; }
.eq-btn--ghost { background: var(--surf); color: var(--tx); border-color: var(--bdr2); }
.eq-btn--ghost:hover { background: var(--surf2); }
.eq-reason-row { display: flex; flex-wrap: wrap; gap: 6px; }
.eq-reason {
display: inline-flex; align-items: center; gap: 6px;
padding: 6px 12px; border: 1px solid var(--bdr2); border-radius: 4px;
cursor: pointer; background: var(--surf); font-size: 12px; font-weight: 600;
}
.eq-reason input { display: none; }
.eq-reason.is-on { background: var(--blue); color: #fff; border-color: var(--blue); }
.eq-reason:hover:not(.is-on) { background: var(--surf2); }
.eq-yesno { display: flex; gap: 6px; }
.eq-yesno-btn {
display: inline-flex; align-items: center; gap: 6px;
padding: 6px 14px; border: 1px solid var(--bdr2); border-radius: 4px;
cursor: pointer; background: var(--surf); font-size: 12px; font-weight: 600;
}
.eq-yesno-btn input { display: none; }
.eq-yesno-btn.is-on { background: var(--blue); color: #fff; border-color: var(--blue); }
/* Bus picker dropdown */
.eq-bus-picker { position: relative; max-width: 360px; }
.eq-bus-picker-input { width: 100%; box-sizing: border-box; }
.eq-bus-picker-clear {
position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
background: none; border: 0; color: var(--txd); cursor: pointer; font-size: 18px;
}
.eq-bus-picker-clear:hover { color: var(--red); }
.eq-bus-picker-list {
position: absolute; top: 100%; left: 0; right: 0; z-index: 10;
margin-top: 2px; background: var(--surf); border: 1px solid var(--bdr2);
border-radius: 4px; box-shadow: 0 6px 24px rgba(0,0,0,.08);
max-height: 220px; overflow-y: auto;
}
.eq-bus-picker-item {
display: block; width: 100%; padding: 8px 12px; border: 0; background: transparent;
text-align: left; font: inherit; font-size: 13px; cursor: pointer;
border-bottom: 1px solid var(--bdr2);
}
.eq-bus-picker-item:hover { background: var(--surf2); }
.eq-bus-picker-empty { position: absolute; top: 100%; left: 0; right: 0;
margin-top: 2px; padding: 8px 12px; background: var(--surf); border: 1px solid var(--bdr2);
border-radius: 4px; font-size: 12px; color: var(--txm); }
/* Return-to-service modal */
.eq-modal-backdrop {
position: fixed; inset: 0; background: rgba(0,0,0,.4);
display: flex; align-items: center; justify-content: center; z-index: 100;
}
.eq-modal {
background: var(--surf); border: 1px solid var(--bdr2); border-radius: 6px;
width: 92%; max-width: 540px; box-shadow: 0 20px 60px rgba(0,0,0,.2);
}
.eq-modal-h { padding: 14px 18px; border-bottom: 1px solid var(--bdr); }
.eq-modal-h h3 { margin: 0; font-size: 15px; font-weight: 700; }
.eq-modal-b { padding: 16px 18px; }
.eq-modal-meta { font-size: 11.5px; color: var(--txm); margin-bottom: 12px; font-family: 'IBM Plex Mono', monospace; }
.eq-modal-b .eq-input { width: 100%; box-sizing: border-box; margin-top: 4px; }
.eq-modal-f { padding: 12px 18px; border-top: 1px solid var(--bdr); display: flex; justify-content: flex-end; gap: 8px; }
/* History table */
.eq-history-tbl { width: 100%; border-collapse: collapse; font-size: 12px; }
.eq-history-tbl th, .eq-history-tbl td {
text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--bdr2); vertical-align: top;
}
.eq-history-tbl th { font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--txm); font-weight: 700; background: var(--surf2); }
.eq-history-tbl tbody tr:hover { background: var(--surf2); }
.eq-history-res { max-width: 360px; }
/* ===== Messages — Inbox ================================================ */
.rt-msg-inbox { padding: 16px 20px; max-width: 900px; font-family: 'IBM Plex Sans', sans-serif; }
.rt-msg-inbox-h { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding-bottom: 12px; margin-bottom: 14px; border-bottom: 1px solid var(--bdr); }
.rt-msg-inbox-h-title { margin: 0; font-size: 18px; font-weight: 700; }
.rt-msg-inbox-h-sub { font-size: 12px; color: var(--txm); margin-top: 4px; max-width: 64ch; }
.rt-msg-inbox-refresh {
font: inherit; font-size: 12px; font-weight: 600;
padding: 6px 12px; background: var(--surf); color: var(--tx);
border: 1px solid var(--bdr2); border-radius: 4px; cursor: pointer;
white-space: nowrap;
}
.rt-msg-inbox-refresh:hover { background: var(--surf2); border-color: var(--blue); color: var(--blue); }
.rt-msg-inbox-empty {
padding: 32px; text-align: center; color: var(--txm); font-size: 13px;
background: var(--surf2); border: 1px dashed var(--bdr2); border-radius: 6px;
max-width: 60ch; margin: 0 auto;
}
.rt-msg-inbox-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.rt-msg-inbox-row {
background: var(--surf); border: 1px solid var(--bdr2);
border-left: 3px solid var(--blue); border-radius: 5px;
padding: 12px 14px;
}
.rt-msg-inbox-row-h { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.rt-msg-inbox-row-phone { font-size: 14px; font-weight: 700; font-family: 'IBM Plex Mono', monospace; }
.rt-msg-inbox-row-when { font-size: 11px; color: var(--txm); font-family: 'IBM Plex Mono', monospace; }
.rt-msg-inbox-row-body { font-size: 13px; line-height: 1.5; color: var(--tx); white-space: pre-wrap; word-break: break-word; }
.rt-msg-inbox-row-last {
margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--bdr2);
font-size: 11.5px; color: var(--txm); line-height: 1.45;
}
.rt-msg-inbox-row-last-lbl { color: var(--txd); font-style: italic; margin-right: 4px; }
.rt-msg-inbox-row-last--none { color: var(--txd); font-style: italic; }
/* ===== Reports → Employee Attendance =================================== */
.rp-att { padding: 16px 20px; max-width: 1100px; font-family: 'IBM Plex Sans', sans-serif; }
.rp-att-h { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--bdr); }
.rp-att-h-title { margin: 0; font-size: 18px; font-weight: 700; color: var(--tx); }
.rp-att-h-sub { font-size: 12px; color: var(--txm); margin-top: 4px; font-family: 'IBM Plex Mono', monospace; }
.rp-att-totals { display: flex; gap: 8px; flex-wrap: wrap; }
.rp-att-tile {
min-width: 80px; padding: 6px 12px; border: 1px solid var(--bdr2);
border-radius: 4px; background: var(--surf); text-align: center;
}
.rp-att-tile-n { font-size: 16px; font-weight: 700; color: var(--tx); font-family: 'IBM Plex Mono', monospace; }
.rp-att-tile-l { font-size: 10px; text-transform: uppercase; color: var(--txm); letter-spacing: .04em; }
.rp-att-search-row { display: flex; gap: 8px; align-items: center; margin-bottom: 14px; }
.rp-att-search {
flex: 1; max-width: 340px; font: inherit; font-size: 13px;
padding: 7px 10px; border: 1px solid var(--bdr2); border-radius: 4px; background: var(--surf);
}
.rp-att-search:focus { outline: none; border-color: var(--blue); }
.rp-att-search-clear, .rp-att-refresh {
font: inherit; font-size: 12px; font-weight: 600;
padding: 6px 12px; background: var(--surf); color: var(--tx);
border: 1px solid var(--bdr2); border-radius: 4px; cursor: pointer;
white-space: nowrap;
}
.rp-att-search-clear:hover, .rp-att-refresh:hover { background: var(--surf2); border-color: var(--blue); color: var(--blue); }
.rp-att-empty {
padding: 32px; text-align: center; color: var(--txm); font-size: 13px;
background: var(--surf2); border: 1px dashed var(--bdr2); border-radius: 6px;
}
.rp-att-tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.rp-att-tbl th, .rp-att-tbl td {
padding: 8px 10px; border-bottom: 1px solid var(--bdr2); vertical-align: middle;
}
.rp-att-tbl th {
text-align: left; font-size: 10.5px; text-transform: uppercase;
letter-spacing: .04em; color: var(--txm); font-weight: 700;
background: var(--surf2); position: sticky; top: 0; z-index: 1;
}
.rp-att-c-name { width: 32%; }
.rp-att-c-role { width: 12%; color: var(--txm); }
.rp-att-c-num { text-align: right; font-family: 'IBM Plex Mono', monospace; width: 8%; }
.rp-att-c-total { font-weight: 700; }
.rp-att-row { cursor: pointer; transition: background 80ms; }
.rp-att-row:hover { background: var(--surf2); }
.rp-att-row.is-zero .rp-att-c-num,
.rp-att-row.is-zero .rp-att-c-name,
.rp-att-row.is-zero .rp-att-c-role { color: var(--txd); }
.rp-att-row.is-heavy .rp-att-c-total { color: var(--red); }
.rp-att-row.is-open { background: var(--surf2); }
.rp-att-caret { display: inline-block; width: 12px; color: var(--txm); font-size: 10px; }
.rp-att-detrow td { padding: 0 10px 10px; background: var(--surf2); }
.rp-att-detail { padding: 10px 12px; background: var(--surf); border: 1px solid var(--bdr2); border-radius: 5px; }
.rp-att-detail--empty { color: var(--txm); font-size: 12px; }
.rp-att-detail-h { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--txm); margin-bottom: 8px; }
.rp-att-callout-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.rp-att-callout {
padding: 8px 10px; background: var(--surf2); border: 1px solid var(--bdr2);
border-left: 3px solid var(--blue); border-radius: 4px;
}
.rp-att-callout-when { font-size: 12.5px; font-weight: 700; color: var(--tx); }
.rp-att-callout-meta { display: flex; gap: 8px; align-items: center; font-size: 11px; margin-top: 2px; }
.rp-att-callout-role { color: var(--txm); font-family: 'IBM Plex Mono', monospace; }
.rp-att-callout-waves { color: var(--txm); font-family: 'IBM Plex Mono', monospace; }
.rp-att-callout-notes { margin-top: 4px; font-size: 11.5px; color: var(--txm); white-space: pre-wrap; }
.rp-att-cls {
font-size: 9.5px; font-weight: 700; padding: 2px 7px; border-radius: 99px;
text-transform: uppercase; letter-spacing: .02em;
background: var(--surf); color: var(--txm); border: 1px solid var(--bdr2);
}
.rp-att-cls--ncns { color: var(--red); background: rgba(176,38,38,.08); border-color: var(--red); }
.rp-att-cls--sick { color: var(--amber); background: rgba(184,134,11,.08); border-color: var(--amber); }
.rp-att-cls--planned { color: var(--blue); background: rgba(45,74,120,.08); border-color: var(--blue); }
/* ===== Routing (Experimental) ========================================= */
.rxp-shell { display: flex; flex-direction: column; height: 100%; font-family: 'IBM Plex Sans', sans-serif; }
.rxp-top {
display: flex; justify-content: space-between; align-items: center;
gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--bdr);
background: var(--surf); flex-shrink: 0;
}
.rxp-top-title strong { font-size: 14px; color: var(--tx); }
.rxp-top-tag {
margin-left: 8px; padding: 2px 8px; font-size: 9.5px; font-weight: 700;
text-transform: uppercase; letter-spacing: .04em;
background: rgba(184,134,11,.1); color: var(--amber);
border: 1px solid var(--amber); border-radius: 99px;
}
.rxp-top-controls { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.rxp-fld { display: flex; flex-direction: column; gap: 2px; }
.rxp-fld > span {
font-size: 9.5px; font-weight: 700; letter-spacing: .04em;
text-transform: uppercase; color: var(--txm);
}
.rxp-fld select {
font: inherit; font-size: 12px; padding: 5px 8px;
border: 1px solid var(--bdr2); border-radius: 4px; background: var(--surf);
}
.rxp-run-btn {
font: inherit; font-size: 12px; font-weight: 700;
padding: 6px 16px; border-radius: 4px; cursor: pointer;
background: var(--blue); color: #fff; border: 1px solid var(--blue);
}
.rxp-run-btn:hover { filter: brightness(1.07); }
.rxp-run-btn:disabled { opacity: .5; cursor: not-allowed; }
.rxp-body { display: grid; grid-template-columns: 240px 1fr 360px; gap: 0; flex: 1; min-height: 0; }
.rxp-side { background: var(--surf2); overflow-y: auto; padding: 12px; }
.rxp-side-left { border-right: 1px solid var(--bdr); }
.rxp-side-right { border-left: 1px solid var(--bdr); }
.rxp-main { position: relative; overflow: hidden; min-width: 0; min-height: 0; }
.rxp-map { width: 100%; height: 100%; }
.rxp-legend {
position: absolute; bottom: 8px; left: 8px;
background: rgba(255,255,255,.95); padding: 8px 10px; border-radius: 5px;
font-size: 10px; max-width: 280px; max-height: 180px; overflow-y: auto;
display: grid; grid-template-columns: auto 1fr; gap: 2px 6px; align-items: center;
border: 1px solid var(--bdr2);
}
.rxp-legend-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; }
.rxp-legend-name { color: var(--tx); }
.rxp-panel { background: var(--surf); border: 1px solid var(--bdr2); border-radius: 5px; padding: 12px; margin-bottom: 10px; }
.rxp-panel h3 { font-size: 13px; font-weight: 700; margin: 0 0 10px; color: var(--tx); }
.rxp-panel h4 { font-size: 11px; font-weight: 700; margin: 14px 0 6px; color: var(--txm); text-transform: uppercase; letter-spacing: .04em; }
.rxp-panel-foot { font-size: 10.5px; color: var(--txd); margin-top: 10px; font-style: italic; }
.rxp-knob { display: block; margin-bottom: 8px; }
.rxp-knob-lbl { font-size: 10px; font-weight: 700; color: var(--txm); text-transform: uppercase; letter-spacing: .04em; }
.rxp-knob-row { display: flex; align-items: center; gap: 6px; margin-top: 3px; }
.rxp-knob-row input { font: inherit; font-size: 12px; padding: 4px 6px; border: 1px solid var(--bdr2); border-radius: 4px; width: 70px; }
.rxp-knob-suffix { font-size: 10.5px; color: var(--txm); }
.rxp-toggle { display: flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 11.5px; color: var(--tx); cursor: pointer; }
.rxp-status { padding: 16px; text-align: center; color: var(--txm); font-size: 12px; }
.rxp-status--err { color: var(--red); }
.rxp-msg { font-size: 11.5px; color: var(--txm); line-height: 1.4; margin: 6px 0; }
.rxp-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; margin-bottom: 8px; }
.rxp-tile { padding: 6px 8px; border: 1px solid var(--bdr2); border-radius: 4px; background: var(--surf); text-align: center; }
.rxp-tile-n { font-size: 16px; font-weight: 700; color: var(--tx); font-family: 'IBM Plex Mono', monospace; }
.rxp-tile-l { font-size: 9.5px; text-transform: uppercase; color: var(--txm); letter-spacing: .04em; }
.rxp-chart { width: 100%; height: auto; display: block; margin-bottom: 4px; }
.rxp-chart-foot { font-size: 10px; color: var(--txm); font-family: 'IBM Plex Mono', monospace; text-align: center; }
.rxp-asgn-list { display: flex; flex-direction: column; gap: 4px; }
.rxp-asgn {
padding: 7px 10px; border: 1px solid var(--bdr2); border-radius: 4px;
background: var(--surf); cursor: pointer; transition: background 80ms, border-color 80ms;
border-left: 3px solid var(--bdr2);
}
.rxp-asgn:hover { background: var(--surf2); }
.rxp-asgn.is-open { background: rgba(45,74,120,.06); border-color: var(--blue); border-left-color: var(--blue); }
.rxp-asgn.is-full { border-left-color: var(--green); }
.rxp-asgn.is-short { border-left-color: var(--amber); }
.rxp-asgn-h { display: flex; justify-content: space-between; align-items: baseline; }
.rxp-asgn-name { font-size: 12.5px; font-weight: 700; color: var(--tx); }
.rxp-asgn-shift { font-size: 11px; font-family: 'IBM Plex Mono', monospace; color: var(--txm); }
.rxp-asgn-meta { font-size: 10.5px; color: var(--txm); font-family: 'IBM Plex Mono', monospace; margin-top: 2px; }
.rxp-sheet { background: var(--surf); border: 1px solid var(--blue); border-radius: 5px; padding: 10px 12px; margin-top: 10px; }
.rxp-sheet-totals { font-size: 11.5px; color: var(--txm); margin: 6px 0 10px; }
.rxp-sheet-trips { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.rxp-sheet-trip { padding: 6px 8px; background: var(--surf2); border: 1px solid var(--bdr2); border-radius: 4px; }
.rxp-sheet-trip-h { font-size: 12px; font-weight: 700; color: var(--tx); }
.rxp-sheet-trip-meta { font-size: 10.5px; color: var(--txm); font-family: 'IBM Plex Mono', monospace; margin-top: 2px; }
.rxp-tag { display: inline-block; padding: 1px 7px; font-size: 9.5px; font-weight: 700; border-radius: 99px; margin-left: 6px; text-transform: uppercase; letter-spacing: .03em; }
.rxp-tag--full { background: rgba(45,95,63,.1); color: var(--green); border: 1px solid var(--green); }
.rxp-tag--short { background: rgba(184,134,11,.1); color: var(--amber); border: 1px solid var(--amber); }
.rxp-runstats {
font-size: 10.5px; color: var(--txm); font-family: 'IBM Plex Mono', monospace;
padding: 6px 8px; background: var(--surf2); border-radius: 4px;
margin-bottom: 10px; line-height: 1.6;
}
.rxp-runstats strong { color: var(--tx); }
.rxp-warn {
font-size: 11px; padding: 6px 8px; margin-bottom: 8px; border-radius: 4px;
background: rgba(184,134,11,.10); color: var(--tx); border: 1px solid var(--amber);
line-height: 1.4;
}
/* ─── Assignment Builder (top-level tab) ─────────────────────────────── */
.ab-root { padding: 16px 18px; max-width: 1400px; }
.ab-loading, .ab-err { padding: 24px; color: var(--txm); }
.ab-err { color: #A73027; }
.ab-head {
display: flex; align-items: center; justify-content: space-between;
gap: 16px;
padding: 10px 0 14px;
border-bottom: 1px solid var(--bdr);
margin-bottom: 14px;
}
.ab-head-l { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.ab-head-r { display: flex; gap: 6px; flex-wrap: wrap; }
.ab-picker { display: flex; align-items: center; gap: 8px; }
.ab-picker-lbl {
font-size: 11px; font-weight: 700; letter-spacing: .08em;
text-transform: uppercase; color: var(--txm);
}
.ab-picker select {
padding: 6px 10px;
border: 1px solid var(--bdr2); border-radius: 4px;
font-size: 13px; background: #fff;
}
.ab-counts { display: flex; gap: 10px; flex-wrap: wrap; }
.ab-count {
font-size: 11px; color: var(--txm);
padding: 4px 10px; background: #f7f5f1;
border: 1px solid var(--bdr); border-radius: 12px;
}
.ab-count b { color: var(--txp); margin-right: 3px; }
.ab-count--warn {
background: #fff3cd; border-color: #c79a16; color: #8a6300;
}
.ab-count--warn b { color: #8a6300; }
.ab-count--floor {
background: #e7f1ff; border-color: #5b8def; color: #1f3e80;
}
.ab-count--floor b { color: #1f3e80; }
/* Union-Adjusted total that was bumped to the 5.5h split-shift minimum.
Same number weight as the normal total but tinted + arrow marker. */
.ab-stat--floored { color: #1f3e80; }
.ab-stat--floored small { color: #1f3e80; opacity: .8; }
.ab-floor-mark {
font-size: .55em; font-weight: 700; margin-left: 2px;
vertical-align: super; color: #1f3e80;
}
.ab-btn { font-size: 12px; padding: 6px 12px; }
.ab-btn--danger {
background: #fff; color: #8B1A1A;
border: 1px dashed #8B1A1A;
font-weight: 600;
}
.ab-btn--danger:hover { background: #FBEAEA; color: #6B0F0F; }
/* Chain markers on AB timeline blocks. The OUT marker is clickable to
break the chain (handled in the block click handler with a confirm). */
.ab-chain-mark {
position: absolute; top: -6px;
display: inline-flex; align-items: center; justify-content: center;
width: 16px; height: 16px;
background: #C68A00; color: #fff;
border-radius: 50%;
font-size: 10px;
box-shadow: 0 1px 3px rgba(0,0,0,.25);
z-index: 3;
}
.ab-chain-mark--in { left: -8px; background: #2D5F3F; }
.ab-chain-mark--out { right: -8px; cursor: pointer; }
.ab-chain-mark--out:hover { background: #B07900; }
.ab-block.is-chained { box-shadow: inset 0 0 0 2px rgba(198,138,0,.4); }
.qe-act--chain { border-color: #C68A00; color: #6B4A0C; }
.qe-act--chain:hover { background: #FAF1DC; }
.qe-chain-note {
margin: 6px 0 0; padding: 6px 10px;
background: #FAF1DC; color: #6B4A0C;
border-left: 3px solid #C68A00;
font-size: 11.5px; line-height: 1.4;
}
.ab-btn--primary { background: #2D5F3F; color: #fff; border-color: #2D5F3F; }
.ab-btn--primary:disabled { opacity: .45; cursor: default; }
.ab-btn--on { background: #5B6B1A; color: #fff; border-color: #5B6B1A; }
.ab-btn--on:hover { background: #6B7B2A; }
.ab-btn--commit { background: #A06A1A; color: #fff; border-color: #A06A1A; }
.ab-btn--commit:hover { background: #B07A2A; }
.ab-btn--commit:disabled { opacity: .55; cursor: default; }
/* Sub-nav under the header: Live | Draft */
.ab-subnav {
display: flex; gap: 4px;
padding: 6px 0 0;
border-bottom: 1px solid var(--bdr);
margin-bottom: 8px;
}
.ab-subnav-btn {
font-size: 12.5px; font-weight: 600;
padding: 6px 14px;
color: var(--txm); background: transparent;
border: 1px solid transparent;
border-bottom: 2px solid transparent;
border-radius: 4px 4px 0 0;
cursor: pointer;
transition: background .12s, color .12s, border-color .12s;
}
.ab-subnav-btn:hover { background: var(--surf2); color: var(--tx); }
.ab-subnav-btn.is-on {
color: var(--tx);
background: var(--surf);
border-color: var(--bdr);
border-bottom-color: var(--surf);
position: relative;
top: 1px;
}
.ab-subnav-btn.is-disabled,
.ab-subnav-btn[disabled] {
color: var(--txd); opacity: .45;
cursor: not-allowed; pointer-events: none;
}
/* Run Inventory — Clean Slate panel listing unassigned runs with a
per-row "+ Add to…" picker (existing bucket or new assignment). */
.ab-inventory {
margin-top: 18px; padding: 12px 14px;
border: 1px dashed var(--bdr);
background: var(--surf);
border-radius: 6px;
}
.ab-inv-h { display: flex; align-items: baseline; gap: 12px; margin-bottom: 8px; }
.ab-inv-h h3 { margin: 0; font-size: 14px; font-weight: 700; color: var(--tx); }
.ab-inv-meta { font-size: 11.5px; color: var(--txm); }
.ab-inv-empty { font-size: 12px; color: var(--txm); font-style: italic; }
.ab-inv-list { display: flex; flex-direction: column; gap: 12px; }
.ab-inv-group { display: flex; flex-direction: column; gap: 3px; }
.ab-inv-group-h {
display: flex; align-items: baseline; gap: 8px;
padding: 4px 6px 2px;
border-bottom: 1px solid var(--bdr);
margin-bottom: 4px;
}
.ab-inv-group-name { font-size: 12px; font-weight: 700; color: var(--tx); text-transform: uppercase; letter-spacing: 0.4px; }
.ab-inv-group-meta { font-size: 11px; color: var(--txm); }
.ab-inv-row {
display: grid;
grid-template-columns: 80px 150px 1fr 220px;
align-items: center; gap: 10px;
padding: 6px 8px;
background: var(--surf2);
border: 1px solid var(--bdr); border-radius: 4px;
font-size: 12px;
}
.ab-inv-row:hover { background: var(--surf3); }
.ab-inv-run b { color: var(--tx); }
.ab-inv-time { color: var(--txm); }
.ab-inv-school { color: var(--tx); }
.ab-inv-add {
font-size: 11.5px;
padding: 4px 6px;
background: var(--surf); border: 1px solid var(--bdr); border-radius: 4px;
color: var(--tx);
max-width: 220px;
}
/* Summary tiles */
.ab-summary { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.ab-summary--empty {
padding: 14px; background: #f7f5f1; border-radius: 5px;
color: var(--txm); font-size: 13px;
}
.ab-summary-tile {
flex: 1 1 140px; min-width: 120px;
padding: 10px 14px;
background: #fcfbf8;
border: 1px solid var(--bdr); border-radius: 5px;
display: flex; flex-direction: column;
}
.ab-summary-tile b {
font-size: 22px; font-variant-numeric: tabular-nums;
color: var(--txp); line-height: 1;
}
.ab-summary-tile span {
margin-top: 6px; font-size: 10.5px;
text-transform: uppercase; letter-spacing: .06em;
color: var(--txm);
}
.ab-summary-tile.is-warn b { color: #A73027; }
/* ─── Time-distribution histogram (Route vs Union Adjusted) ─────────
Mirrors the map page's mp-load bar histogram: one row per 30-min bin,
horizontal bar with the count pinned to the right. Two stacked bars
per bin so the dispatcher sees Route vs Union Adjusted side-by-side. */
.ab-hist-card {
padding: 8px 10px;
background: #f7f5f1;
border: 1px solid var(--bdr, #e5e7eb);
border-radius: 5px;
margin-bottom: 14px;
}
.ab-hist-head {
display: flex; align-items: baseline; justify-content: space-between;
margin-bottom: 8px;
}
.ab-hist-title {
font-size: 11px; font-weight: 700; letter-spacing: .06em;
text-transform: uppercase; color: var(--txm, #64748b);
}
.ab-hist-legend { display: flex; gap: 14px; font-size: 11px; color: var(--txm, #64748b); }
.ab-hist-legend-item { display: inline-flex; align-items: center; gap: 5px; }
.ab-hist-sw {
display: inline-block; width: 11px; height: 11px; border-radius: 2px;
}
.ab-hist-sw--route { background: var(--txp, #1c1814); }
.ab-hist-sw--union { background: #1f3e80; }
.ab-hist-header {
display: grid;
grid-template-columns: 56px 1fr 0;
column-gap: 10px;
align-items: center;
padding: 0 10px 4px;
border-bottom: 1px solid var(--bdr, #e5e7eb);
margin-bottom: 4px;
}
.ab-hist-thead {
text-align: right; font-size: 9.5px; font-weight: 700;
letter-spacing: .08em; text-transform: uppercase; color: var(--txm, #64748b);
padding-right: 36px; /* leaves room for the right-aligned count column */
}
.ab-hist-list { display: flex; flex-direction: column; gap: 4px; }
.ab-hist-row {
display: grid;
grid-template-columns: 56px 1fr;
column-gap: 10px;
align-items: center;
padding: 4px 10px;
border-radius: 4px;
}
.ab-hist-row:hover { background: #f1efe9; }
.ab-hist-row.is-floor { background: #fdf4e6; }
.ab-hist-label {
font-variant-numeric: tabular-nums;
text-align: right;
font-size: 11.5px; font-weight: 600;
color: var(--txm, #64748b);
}
.ab-hist-bars { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ab-hist-line {
display: grid;
grid-template-columns: 1fr 28px;
column-gap: 8px;
align-items: center;
}
.ab-hist-bar {
height: 14px;
background: #f1efe9;
border-radius: 3px;
overflow: hidden;
display: block;
}
.ab-hist-fill {
display: block; height: 100%;
transition: width 120ms ease-out;
}
.ab-hist-fill--route { background: var(--txp, #1c1814); }
.ab-hist-fill--union { background: #1f3e80; }
.ab-hist-num {
font-variant-numeric: tabular-nums;
text-align: right;
font-weight: 700; font-size: 12px;
color: var(--txp, #1c1814);
}
/* Timeline */
.ab-body { margin-top: 6px; }
.ab-timeline-head {
display: grid;
grid-template-columns: 220px 1fr 220px;
align-items: center; gap: 12px;
margin-bottom: 6px;
padding: 4px 0;
}
.ab-ruler {
/* grid-column from the old 3-column layout removed — ruler now sits
inside the .ab-th-tl cell and fills its width naturally. */
position: relative; height: 18px;
border-bottom: 1px solid var(--bdr);
width: 100%;
}
.ab-tick {
position: absolute; top: 0;
transform: translateX(-50%);
font-size: 10.5px; color: var(--txm);
font-variant-numeric: tabular-nums;
line-height: 1;
}
.ab-rows { display: flex; flex-direction: column; gap: 4px; }
.ab-add-asg-row {
display: flex; justify-content: center;
padding: 14px 12px 8px;
border-top: 1px dashed var(--bdr);
margin-top: 8px;
}
.ab-add-asg-btn {
font-size: 12px; font-weight: 600;
padding: 6px 14px;
background: var(--surf); color: #2D5F3F;
border: 1px dashed #2D5F3F; border-radius: 4px;
cursor: pointer;
}
.ab-add-asg-btn:hover { background: #E8F0E9; border-style: solid; }
.ab-row {
display: grid;
grid-template-columns: 220px 1fr 220px;
gap: 12px;
align-items: stretch;
padding: 8px 0;
border-bottom: 1px solid var(--bdr);
}
.ab-row.is-over-half { background: rgba(167, 48, 39, 0.03); }
.ab-row--empty { background: rgba(45, 95, 63, 0.04); border: 1px dashed rgba(45, 95, 63, 0.3); }
.ab-row--empty .ab-row-asg-meta { color: var(--txm); font-size: 11px; font-style: italic; }
.ab-row-tl--empty { position: relative; min-height: 32px; }
.ab-row-empty-band {
position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center;
font-size: 10px; font-weight: 700; letter-spacing: 0.14em;
text-transform: uppercase; color: var(--txm);
pointer-events: none;
}
/* Inline rename/delete icons next to an assignment label. Small,
color-neutral by default so they don't dominate the row. */
.ab-asg-tools {
display: inline-flex; gap: 4px;
margin-left: 6px; vertical-align: middle;
}
.ab-asg-iconbtn {
width: 18px; height: 18px;
display: inline-flex; align-items: center; justify-content: center;
background: transparent; color: var(--txm);
border: 1px solid transparent; border-radius: 3px;
font-size: 11px; line-height: 1; cursor: pointer; padding: 0;
}
.ab-asg-iconbtn:hover { background: var(--surf2); color: var(--tx); border-color: var(--bdr); }
.ab-asg-iconbtn--danger:hover { background: #FBEDEA; color: #A73027; border-color: #D4A89E; }
.ab-row-l { padding: 4px 0; }
.ab-row-label {
font-size: 13px; font-weight: 700; color: var(--txp);
letter-spacing: .02em;
}
.ab-row-meta {
font-size: 11px; color: var(--txm);
margin-top: 2px;
}
.ab-row-tl {
position: relative;
min-height: 36px;
background: #fafaf7;
border: 1px solid var(--bdr);
border-radius: 4px;
overflow: hidden; /* clip blocks at the column edges — no bleed into Assignment column */
/* Vertical hour gridlines, 12 columns over the 6 AM → 6 PM axis. The
1px line sits at the END of each 1/12 slice so it lines up under the
ruler's hour tick above. */
background-image: linear-gradient(
to right,
rgba(0, 0, 0, 0) calc(100% / 12 - 1px),
rgba(0, 0, 0, 0.08) calc(100% / 12 - 1px),
rgba(0, 0, 0, 0.08) calc(100% / 12),
rgba(0, 0, 0, 0) calc(100% / 12)
);
background-size: calc(100% / 12) 100%;
background-repeat: repeat-x;
}
.ab-block {
position: absolute; top: 4px; bottom: 4px;
border-radius: 3px;
display: flex; align-items: center; justify-content: center;
color: #fff;
font-size: 10.5px; font-weight: 700;
letter-spacing: .04em;
box-shadow: inset 0 -1px 0 rgba(0,0,0,.18);
cursor: pointer;
overflow: hidden;
}
.ab-block-lbl {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
padding: 0 6px;
}
.ab-deadhead {
position: absolute; top: 4px; bottom: 4px;
/* Faint zebra stripes — deadhead bands are reference only, the run
blocks above carry the primary visual weight. */
background-image: repeating-linear-gradient(
45deg,
rgba(167, 48, 39, 0.12) 0,
rgba(167, 48, 39, 0.12) 4px,
rgba(167, 48, 39, 0.03) 4px,
rgba(167, 48, 39, 0.03) 8px
);
border-radius: 2px;
z-index: 0;
pointer-events: none;
}
.ab-deadhead.is-bridge {
/* Bridge bands are between runs, not at the boundary — slightly
different angle so the dispatcher can pick them out at a glance. */
background-image: repeating-linear-gradient(
-45deg,
rgba(167, 48, 39, 0.12) 0,
rgba(167, 48, 39, 0.12) 4px,
rgba(167, 48, 39, 0.03) 4px,
rgba(167, 48, 39, 0.03) 8px
);
}
.ab-block { z-index: 1; }
/* Mini-headsheet hover popup. Floats on body so it can escape the
timeline's overflow:hidden. Max-height + scroll so long routes don't
blow the viewport. */
.ab-headsheet-pop {
position: absolute;
display: none;
z-index: 10000;
width: 280px;
max-height: 70vh; overflow: auto;
background: #fff;
border: 1px solid #B85700;
border-radius: 6px;
box-shadow: 0 6px 18px rgba(0,0,0,.18);
font-family: 'IBM Plex Sans', sans-serif;
font-size: 12px;
color: #2a2a2a;
}
.ab-hs-head {
padding: 8px 10px;
background: #2D5F3F; color: #fff;
border-radius: 5px 5px 0 0;
font-size: 12px;
display: flex;
align-items: center;
gap: 8px;
}
.ab-hs-head b { color: #fff; font-weight: 700; }
.ab-hs-head-info { flex: 1 1 auto; min-width: 0; }
/* Compact icon-button row — anchored to the right of the header so the
stop table reads cleanly top-to-bottom and chained partner runs in
the same popup don't get a giant action strip in the middle. */
.ab-hs-iconrow {
display: flex; gap: 4px; flex-shrink: 0;
}
.ab-hs-iconbtn {
width: 22px; height: 22px;
display: inline-flex; align-items: center; justify-content: center;
background: rgba(255,255,255,0.12); color: #fff;
border: 1px solid rgba(255,255,255,0.25);
border-radius: 3px;
font-size: 13px; line-height: 1;
cursor: pointer; padding: 0;
}
.ab-hs-iconbtn:hover { background: rgba(255,255,255,0.22); border-color: rgba(255,255,255,0.45); }
.ab-hs-iconbtn--chain { color: #FFD27F; }
.ab-hs-iconbtn--chain:hover { background: rgba(198,138,0,0.35); }
.ab-hs-iconbtn--danger { color: #FFB4A8; }
.ab-hs-iconbtn--danger:hover { background: rgba(167,48,39,0.45); border-color: #FFB4A8; }
.ab-hs-meta {
padding: 4px 10px;
background: #F5F1E8; color: #5D4037;
font-size: 10.5px;
border-bottom: 1px solid #E4D9C3;
}
.ab-hs-actions {
display: flex; gap: 6px; flex-wrap: wrap;
padding: 6px 10px;
background: #F5F1E8;
border-bottom: 1px solid #E4D9C3;
}
.ab-hs-act {
font-size: 11px;
padding: 4px 8px;
background: #fff;
border: 1px solid #C9B791;
border-radius: 4px;
color: #5D4037;
cursor: pointer;
}
.ab-hs-act:hover { background: #FAF6EC; border-color: #A88B5B; }
.ab-hs-act--danger { color: #A73027; border-color: #D4A89E; }
.ab-hs-act--danger:hover { background: #FBEDEA; border-color: #A73027; }
.ab-hs-act--chain { color: #6B4A0C; border-color: #C68A00; }
.ab-hs-act--chain:hover { background: #FBF1DA; border-color: #8B5A00; }
.ab-hs-body { padding: 4px 0; }
.ab-hs-loading, .ab-hs-err {
padding: 14px 10px; text-align: center; color: #6D4C41;
font-style: italic;
}
.ab-hs-err { color: #A73027; }
.ab-hs-row {
display: grid;
grid-template-columns: 56px 1fr;
gap: 8px;
padding: 3px 10px;
align-items: baseline;
}
.ab-hs-time {
font-size: 11px; color: #6D4C41;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.ab-hs-lbl { font-size: 12px; color: #2a2a2a; }
.ab-hs-detail { color: #8D6E63; font-size: 10.5px; margin-left: 4px; }
.ab-hs-row.ab-hs-origin,
.ab-hs-row.ab-hs-school,
.ab-hs-row.ab-hs-depot-end {
background: #FAF6EE;
font-weight: 700;
}
.ab-hs-row.ab-hs-origin { border-top: 1px solid #E4D9C3; }
.ab-hs-row.ab-hs-school { border-top: 1px solid #E4D9C3; border-bottom: 1px solid #E4D9C3; }
.ab-hs-row.ab-hs-depot-end { border-top: 1px solid #E4D9C3; }
.ab-hs-row.ab-hs-stop:hover { background: #F5F1E8; }
/* Separator between stacked headsheets when the popup surfaces multiple
runs (mixed-pair or back-to-back overlap). */
.ab-hs-sep {
height: 6px;
background: #E4D9C3;
border-top: 1px solid #B85700;
border-bottom: 1px solid #B85700;
}
/* Chained variant — replaces the generic divider when the popup is
showing two linked runs as one combined route. Echoes the headsheet
look so the popup matches what the dispatcher will see on paper. */
.ab-hs-sep--chain {
height: auto;
padding: 6px 12px;
background: #FBF1DA;
border: 1px solid #C68A00;
color: #6B4A0C;
font-size: 10px; font-weight: 700;
letter-spacing: 0.12em; text-transform: uppercase;
text-align: center;
border-radius: 3px;
margin: 4px 0;
}
.ab-row-r {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 6px;
align-items: center;
}
.ab-stat {
text-align: center;
font-size: 13px;
font-variant-numeric: tabular-nums;
font-weight: 700;
color: var(--txp);
padding: 6px 4px;
background: #fcfbf8;
border: 1px solid var(--bdr);
border-radius: 4px;
display: flex; flex-direction: column; gap: 2px;
}
.ab-stat small {
font-size: 9.5px; font-weight: 600;
letter-spacing: .06em; text-transform: uppercase;
color: var(--txm);
}
.ab-stat--total { background: #f1efe9; }
/* ── Force-link overlap modal ─────────────────────────────────────────
Fires from moveRunToBucket / addInventoryRunToBucket when a move
would land an overlapping run into a bucket. Lets the dispatcher
confirm the chain (start moving run from predecessor's school) and
shows a per-stop preview of both runs in the combined timeline. */
.ab-fl-overlay {
position: fixed; inset: 0;
background: rgba(0,0,0,0.45);
z-index: 1000;
display: flex; align-items: center; justify-content: center;
padding: 24px;
}
.ab-fl-modal {
background: #fff; border-radius: 8px;
width: 720px; max-width: 100%; max-height: 92vh;
display: flex; flex-direction: column;
box-shadow: 0 16px 48px rgba(0,0,0,0.25);
font-family: var(--ff, system-ui, sans-serif);
}
.ab-fl-head {
display: flex; align-items: center; justify-content: space-between;
padding: 14px 18px;
border-bottom: 1px solid var(--bdr);
}
.ab-fl-title { font-size: 14px; font-weight: 700; color: var(--tx); }
.ab-fl-x {
background: none; border: 1px solid var(--bdr); border-radius: 4px;
width: 28px; height: 28px; font-size: 18px; line-height: 1;
color: var(--txm); cursor: pointer;
}
.ab-fl-x:hover { background: rgba(0,0,0,0.04); }
.ab-fl-sub {
padding: 12px 18px;
font-size: 12px; color: var(--txm); line-height: 1.45;
background: rgba(45, 95, 63, 0.04);
border-bottom: 1px solid var(--bdr);
}
.ab-fl-sub b { color: var(--tx); }
.ab-fl-body {
padding: 16px 18px;
flex: 1; overflow-y: auto;
}
.ab-fl-loading, .ab-fl-err {
padding: 32px; text-align: center;
font-size: 12px; color: var(--txm); font-style: italic;
}
.ab-fl-err { color: #A73027; font-style: normal; }
.ab-fl-summary {
background: #FAF8F1; border: 1px solid var(--bdr);
border-radius: 6px; padding: 12px 14px;
font-size: 12px;
}
.ab-fl-line { padding: 4px 0; color: var(--tx); }
.ab-fl-line b { color: var(--tx); }
.ab-fl-transit {
color: var(--txm); padding-left: 12px;
border-left: 2px dashed var(--bdr); margin: 4px 0;
}
.ab-fl-src { color: var(--txl, #999); font-size: 10px; }
.ab-fl-was-new { display: inline-block; margin-left: 4px; }
.ab-fl-was { color: var(--txm); text-decoration: line-through; }
.ab-fl-new { color: var(--green, #2D5F3F); font-weight: 600; }
.ab-fl-bell { margin-top: 10px; padding: 8px 12px; border-radius: 4px;
font-size: 12px; font-weight: 600; }
.ab-fl-bell--ok { background: rgba(45,95,63,0.08); color: var(--green, #2D5F3F); }
.ab-fl-bell--warn { background: rgba(255,196,0,0.10); color: var(--amber, #B7791F); }
.ab-fl-bell--late { background: rgba(167,48,39,0.10); color: #A73027; }
.ab-fl-stops { margin-top: 14px; }
.ab-fl-stops summary {
cursor: pointer; font-size: 11px; font-weight: 600; color: var(--txm);
padding: 6px 0;
}
.ab-fl-stops-block { margin-top: 8px; }
.ab-fl-stops-h {
font-size: 11px; font-weight: 700; color: var(--tx);
padding: 6px 0;
}
.ab-fl-stops-tbl {
width: 100%; border-collapse: collapse; font-size: 11px;
}
.ab-fl-stops-tbl th, .ab-fl-stops-tbl td {
text-align: left; padding: 4px 6px;
border-bottom: 1px solid var(--bdr);
}
.ab-fl-stops-tbl th { color: var(--txm); font-weight: 600; }
.ab-fl-stops-tbl td.ab-fl-was { color: var(--txm); text-decoration: line-through; }
.ab-fl-stops-tbl td.ab-fl-new { color: var(--green, #2D5F3F); font-weight: 600; }
.ab-fl-stops-tbl tfoot td.ab-fl-dropoff {
font-weight: 600; color: var(--tx);
background: rgba(45,95,63,0.04);
}
.ab-fl-addr { color: var(--txl, #999); font-size: 10px; }
.ab-fl-empty { font-style: italic; color: var(--txl, #999); text-align: center; }
.ab-fl-foot {
display: flex; justify-content: flex-end; gap: 8px;
padding: 12px 18px;
border-top: 1px solid var(--bdr);
background: #FAF8F1;
}
.ab-fl-cancel { background: #fff; }
.ab-fl-confirm {
background: var(--amber, #B7791F); color: #fff;
font-weight: 600;
}
.ab-fl-confirm:disabled {
opacity: 0.6; cursor: not-allowed;
}
.ab-fl-confirm:not(:disabled):hover { filter: brightness(1.05); }
/* Suggester modal — wider table, pills, section header row */
.ab-fl-modal--wide { width: 920px; max-width: 100%; }
.ab-sg-tbl { font-size: 11px; }
.ab-sg-tbl tr.ab-sg-section td {
background: rgba(0,0,0,0.04);
color: var(--txm);
font-weight: 600; font-size: 10px;
text-transform: uppercase; letter-spacing: 0.4px;
padding: 6px 8px;
}
.ab-sg-tbl tr[data-suggest-run]:hover {
background: rgba(45,95,63,0.04); cursor: pointer;
}
.ab-sg-pill {
display: inline-block; padding: 2px 8px; border-radius: 10px;
font-size: 10px; font-weight: 600;
}
.ab-sg-pill--ok { background: rgba(45,95,63,0.10); color: var(--green, #2D5F3F); }
.ab-sg-pill--warn { background: rgba(255,196,0,0.12); color: var(--amber, #B7791F); }
.ab-sg-pill--late { background: rgba(167,48,39,0.10); color: #A73027; }
.ab-sg-pill--miss { background: rgba(0,0,0,0.06); color: var(--txm); }
.ab-sg-pill--shift { background: rgba(20,80,180,0.08); color: #1E4D8C; }
.ab-sg-pick {
font-size: 11px; padding: 4px 10px;
background: var(--green, #2D5F3F); color: #fff;
border: none; border-radius: 4px; cursor: pointer;
}
.ab-sg-pick:hover { filter: brightness(1.08); }
/* Cache-warmup banner in the suggester modal */
.ab-sg-warm {
background: rgba(255, 196, 0, 0.08);
border: 1px solid rgba(255, 196, 0, 0.30);
border-radius: 4px;
padding: 10px 14px;
margin-bottom: 12px;
font-size: 11px;
color: var(--tx);
display: flex; justify-content: space-between; align-items: center;
gap: 12px;
}
.ab-sg-warm b { color: var(--amber, #B7791F); }
.ab-sg-warm-btn {
background: var(--amber, #B7791F); color: #fff;
border: none; border-radius: 4px;
font-size: 11px; font-weight: 600;
padding: 6px 14px;
cursor: pointer; white-space: nowrap;
}
.ab-sg-warm-btn:hover { filter: brightness(1.08); }
/* The per-row "+ Suggest" button on each assignment row */
.ab-row-suggest {
margin-top: 4px;
font-size: 10px; padding: 3px 8px;
background: #fff; color: var(--green, #2D5F3F);
border: 1px solid var(--green, #2D5F3F); border-radius: 4px;
cursor: pointer;
white-space: nowrap;
}
.ab-row-suggest:hover { background: rgba(45,95,63,0.06); }
/* Flash messages */
.ab-flash {
position: fixed; bottom: 24px; right: 24px;
padding: 10px 16px;
border-radius: 4px;
font-size: 13px;
color: #fff;
background: #2D5F3F;
box-shadow: 0 4px 12px rgba(0,0,0,.18);
z-index: 50;
animation: ab-flash-in 200ms ease-out;
}
.ab-flash.is-amber { background: #B85700; }
.ab-flash.is-red { background: #A73027; }
@keyframes ab-flash-in {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
/* Assignment Builder — Phase 2 additions */
.ab-root.is-moving { cursor: cell; }
.ab-move-banner {
display: flex; align-items: center; justify-content: space-between;
gap: 12px;
padding: 10px 14px;
background: #FFF3E0;
border: 1px solid #FFB74D;
border-radius: 5px;
margin-bottom: 10px;
font-size: 12.5px;
color: #5D4037;
}
.ab-move-banner b { font-weight: 700; }
.ab-move-banner kbd {
font-family: inherit; font-size: 11px;
padding: 1px 6px; background: #fff;
border: 1px solid #b5a784; border-radius: 3px;
}
.ab-row.is-move-target { outline: 2px dashed #2D5F3F; outline-offset: -2px; }
.ab-row.is-move-target:hover { background: rgba(45, 95, 63, 0.05); }
.ab-block.is-move-source {
outline: 2px solid #FFA000; outline-offset: 1px;
filter: brightness(1.1);
}
/* Needs badges on the block */
.ab-block.has-wc { box-shadow: inset 0 0 0 2px rgba(255,255,255,.55), inset 0 -1px 0 rgba(0,0,0,.18); }
.ab-block-badges {
display: inline-flex; gap: 2px;
margin-left: 4px;
flex-shrink: 0;
}
.ab-need {
display: inline-block;
background: rgba(255,255,255,.85);
color: #1c1814;
font-size: 10px;
line-height: 1;
padding: 1px 3px;
border-radius: 2px;
}
/* Crew picker rail under the assignment label */
.ab-row-crew {
display: flex; flex-direction: column; gap: 3px;
margin-top: 6px;
}
.ab-crew {
display: grid;
grid-template-columns: 26px 1fr;
align-items: center;
gap: 4px;
}
.ab-crew-lbl {
font-size: 9.5px; font-weight: 700;
letter-spacing: .08em; text-transform: uppercase;
color: var(--txm);
text-align: right;
}
.ab-crew select {
font-size: 11px;
padding: 3px 5px;
border: 1px solid var(--bdr2);
border-radius: 3px;
background: #fff;
width: 100%;
min-width: 0;
}
/* Assignment Builder — column-layout overrides (supersedes the Phase 1
2-col grid). Header row + each data row share the same column track so
driver / monitor / bus line up vertically across all assignments. */
.ab-table-head {
display: grid;
grid-template-columns: 160px 1fr 130px 150px 150px 110px 220px;
gap: 12px;
padding: 6px 0 4px;
border-bottom: 1px solid var(--bdr);
margin-bottom: 4px;
font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase;
color: var(--txm); font-weight: 700;
}
.ab-th { display: flex; align-items: end; }
.ab-th-tl { padding-bottom: 0; }
.ab-th-stats { justify-content: center; }
.ab-rows .ab-row {
display: grid;
grid-template-columns: 160px 1fr 130px 150px 150px 110px 220px;
gap: 12px;
align-items: center;
padding: 8px 0;
border-bottom: 1px solid var(--bdr);
}
.ab-row-anchor { display: flex; align-items: center; min-width: 0; }
.ab-anchor-tag {
display: inline-block;
background: color-mix(in srgb, var(--amber) 18%, var(--surf));
color: var(--tx);
border: 1px solid color-mix(in srgb, var(--amber) 55%, transparent);
border-radius: 3px;
padding: 2px 7px;
font-size: 11.5px; font-weight: 600;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
max-width: 100%;
}
.ab-anchor-empty { color: var(--txm); font-size: 12px; }
.ab-row-asg {
display: flex; flex-direction: column; gap: 2px;
}
.ab-row-num {
font-size: 13.5px; font-weight: 700; color: var(--txp);
letter-spacing: .02em;
}
.ab-row-runs {
font-size: 10.5px; color: var(--txm);
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
word-break: break-all;
}
.ab-row-meta { font-size: 10.5px; color: var(--txm); margin-top: 1px; }
/* Override the older 220-px label column rules so nothing inherits. */
.ab-row-l, .ab-row-crew, .ab-crew, .ab-crew-lbl { display: none !important; }
/* Searchable typeahead */
.ab-ta {
position: relative;
width: 100%;
}
.ab-ta-display {
display: flex; align-items: center; justify-content: space-between;
gap: 4px;
width: 100%;
padding: 6px 8px;
background: #fff;
border: 1px solid var(--bdr2);
border-radius: 4px;
font-size: 12px;
color: var(--txp);
cursor: pointer;
text-align: left;
min-height: 32px;
}
.ab-ta-display:hover { background: #fcfbf8; }
.ab-ta-name {
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
flex: 1 1 auto;
}
.ab-ta-name.is-empty { color: var(--txm); font-style: italic; }
.ab-ta-clear {
background: none; border: 0;
color: var(--txm);
font-size: 16px; line-height: 1;
padding: 0 4px;
cursor: pointer;
flex: 0 0 auto;
}
.ab-ta-clear:hover { color: #A73027; }
.ab-ta.is-open .ab-ta-display { border-color: #2D5F3F; box-shadow: 0 0 0 2px rgba(45, 95, 63, .15); }
/* Conflict outline — both rows pointing at the same crew member glow red. */
.ab-ta.is-conflict .ab-ta-display {
border-color: #A73027;
background: #FFEBEE;
box-shadow: 0 0 0 2px rgba(167, 48, 39, .18);
}
.ab-ta.is-conflict .ab-ta-name { color: #A73027; font-weight: 700; }
.ab-ta-pop {
position: absolute;
top: calc(100% + 4px); left: 0; right: 0;
z-index: 20;
background: #fff;
border: 1px solid var(--bdr);
border-radius: 4px;
box-shadow: 0 4px 12px rgba(0, 0, 0, .18);
overflow: hidden;
min-width: 200px;
}
.ab-ta-input {
width: 100%;
padding: 6px 8px;
border: 0;
border-bottom: 1px solid var(--bdr);
font-size: 12px;
outline: none;
background: #fcfbf8;
}
.ab-ta-list {
list-style: none; margin: 0; padding: 0;
max-height: 280px; overflow-y: auto;
}
.ab-ta-list li {
padding: 6px 10px;
font-size: 12px;
cursor: pointer;
color: var(--txp);
}
.ab-ta-list li:hover { background: #f1efe9; }
.ab-ta-list li.ab-ta-empty {
color: var(--txm); font-style: italic; cursor: default;
}
.ab-ta-list li.ab-ta-empty:hover { background: transparent; }
/* Pack the 3-tile stats column tighter to leave room for the new picker
columns. The old 220 px column shrunk to ~220 px but with 3 cells we
can keep them inline. */
.ab-row-r {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 4px;
}
.ab-row-r .ab-stat { font-size: 12px; padding: 4px 2px; }
.ab-row-r .ab-stat small { font-size: 9px; }
/* Assignment Builder — combine-opportunities panel */
.ab-combine {
margin: 0 0 14px;
padding: 12px 14px;
background: #FFF8E1;
border: 1px solid #FFD54F;
border-radius: 6px;
}
.ab-combine-head h3 {
margin: 0;
font-size: 13.5px;
color: #5D4037;
letter-spacing: .02em;
}
.ab-combine-hint {
display: block;
margin-top: 4px;
font-size: 11.5px;
color: #6D4C41;
line-height: 1.4;
}
.ab-combine-list {
list-style: none; margin: 10px 0 0; padding: 0;
display: flex; flex-direction: column; gap: 6px;
}
.ab-combine-row {
background: #fff;
border: 1px solid #F0E0A0;
border-radius: 4px;
padding: 0;
overflow: hidden;
}
.ab-combine-summary {
display: grid;
grid-template-columns: 1fr auto 88px;
align-items: center;
gap: 12px;
padding: 8px 12px;
}
.ab-combine-route {
font-size: 12.5px;
color: var(--txp, #1c1814);
}
.ab-combine-route b {
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-weight: 700;
}
.ab-combine-arrow {
color: #B85700; font-weight: 700;
margin: 0 6px;
}
.ab-combine-meta {
display: flex; gap: 12px;
font-size: 11px; color: #6D4C41;
white-space: nowrap;
}
.ab-combine-meta b { color: #5D4037; font-weight: 700; }
.ab-combine-btn { font-size: 11.5px; padding: 4px 10px; }
.ab-combine-btn--primary { background: #2D5F3F; color: #fff; border-color: #2D5F3F; }
.ab-combine-btn--primary:disabled {
background: #ccc; border-color: #ccc; cursor: not-allowed; opacity: .55;
}
.ab-combine-row.is-open { border-color: #B85700; }
.ab-combine-meta-mini {
font-size: 11px; color: #6D4C41; margin-left: 8px; font-weight: 400;
}
.ab-combine-saved {
background: #2D5F3F; color: #fff;
padding: 1px 6px; border-radius: 3px;
font-size: 10.5px; font-weight: 600;
}
.ab-combine-saved b { color: #fff; font-weight: 800; }
.ab-combo-pair .ab-combine-head h3 { color: #B85700; }
.ab-idle-fit .ab-combine-head h3 { color: #2D5F3F; }
/* Collapsible suggestion panels. / drives the toggle
so we don't need JS for it. The chevron rotates with [open]. */
.ab-collapsible > summary.ab-combine-head {
cursor: pointer;
list-style: none;
position: relative;
padding-right: 28px;
}
.ab-collapsible > summary.ab-combine-head::-webkit-details-marker { display: none; }
.ab-collapsible > summary.ab-combine-head::after {
content: '▸';
position: absolute;
right: 8px; top: 10px;
color: var(--txm);
font-size: 14px;
transition: transform .15s ease;
}
.ab-collapsible[open] > summary.ab-combine-head::after { transform: rotate(90deg); }
.ab-combine-row .ab-combine-meta { flex-wrap: wrap; white-space: normal; }
.ab-combine-preview {
padding: 10px 12px;
background: #FFF3E0;
border-top: 1px solid #F0E0A0;
}
.ab-combine-preview-cols {
display: grid;
grid-template-columns: 1fr 1fr 1.2fr;
gap: 12px;
}
.ab-combine-preview-col {
background: #fff;
border: 1px solid #FFD54F;
border-radius: 4px;
padding: 8px 10px;
font-size: 11.5px;
color: var(--txp, #1c1814);
}
.ab-combine-preview-col.is-combined {
background: #E8F5E9;
border-color: #66BB6A;
}
.ab-combine-preview-h {
font-size: 10.5px; font-weight: 700;
letter-spacing: .06em; text-transform: uppercase;
color: var(--txm, #64748b);
margin-bottom: 6px;
padding-bottom: 4px;
border-bottom: 1px solid var(--bdr, #e5e7eb);
}
.ab-combine-preview-line {
padding: 2px 0;
line-height: 1.4;
}
.ab-combine-preview-line b {
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
color: #5D4037;
}
.ab-combine-preview-foot {
display: flex; align-items: center; gap: 10px;
margin-top: 10px;
}
.ab-combine-preview-note {
font-size: 10.5px; color: #6D4C41;
line-height: 1.4;
flex: 1 1 auto;
}
/* ─── Attendance Sheets (AstraDB) ──────────────────────────────────── */
.att-root { display: flex; flex-direction: column; gap: 16px; padding: 18px; max-width: 880px; }
.att-loading, .att-err { padding: 24px; color: var(--txm); }
.att-err { color: #A73027; }
.att-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.att-head h2 { margin: 0; font-size: 22px; }
.att-sub { margin: 4px 0 0; font-size: 12.5px; color: var(--txm); max-width: 520px; line-height: 1.4; }
.att-session { display: flex; flex-direction: column; gap: 3px; font-size: 11px; color: var(--txm); }
.att-session select { font-size: 12px; padding: 5px 8px; background: var(--surf); color: var(--tx); border: 1px solid var(--bdr); border-radius: 4px; }
.att-flash { padding: 8px 12px; border-radius: 4px; font-size: 12.5px; }
.att-flash--ok { background: #DCE7DE; color: #1F4530; border: 1px solid #2D5F3F; }
.att-flash--amber { background: #FBF1DA; color: #6B4A0C; border: 1px solid #C68A00; }
.att-flash--red { background: #FBEDEA; color: #A73027; border: 1px solid #D4A89E; }
.att-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--bdr); }
.att-tab {
font-size: 12px; padding: 8px 14px; background: transparent; border: 0;
border-bottom: 2px solid transparent; color: var(--txm); cursor: pointer;
}
.att-tab:hover { color: var(--tx); }
.att-tab.is-on { color: var(--tx); border-bottom-color: #2D5F3F; font-weight: 600; }
.att-pane { display: flex; flex-direction: column; gap: 12px; }
.att-field { display: flex; flex-direction: column; gap: 4px; font-size: 11.5px; color: var(--txm); }
.att-field input, .att-field select {
font-size: 13px; padding: 7px 10px; background: var(--surf); color: var(--tx);
border: 1px solid var(--bdr); border-radius: 4px;
}
.att-pick-list { display: flex; flex-direction: column; gap: 3px; max-height: 360px; overflow-y: auto;
border: 1px solid var(--bdr); border-radius: 4px; background: var(--surf); }
.att-pick-row {
display: grid; grid-template-columns: 80px 1fr 110px; align-items: center; gap: 10px;
text-align: left; padding: 7px 10px;
background: transparent; border: 0; border-bottom: 1px solid var(--bdr);
font-size: 12.5px; color: var(--tx); cursor: pointer;
}
.att-pick-row:last-child { border-bottom: 0; }
.att-pick-row:hover { background: var(--surf2); }
.att-pick-row.is-on { background: #DCE7DE; }
.att-pick-row-asg { color: var(--txm); font-size: 11px; text-align: right; }
.att-empty { padding: 14px; color: var(--txm); font-size: 12px; text-align: center; }
.att-actions { display: flex; gap: 10px; }
.att-btn {
font-size: 13px; padding: 8px 16px; border-radius: 4px; cursor: pointer; font-weight: 600;
background: var(--surf2); color: var(--tx); border: 1px solid var(--bdr);
}
.att-btn:hover:not(:disabled) { background: var(--surf3); }
.att-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.att-btn--primary { background: #2D5F3F; color: #fff; border-color: #1F4530; }
.att-btn--primary:hover:not(:disabled) { background: #25503A; }
.att-btn--danger { background: #fff; color: #8B1A1A; border: 1px dashed #8B1A1A; }
.att-btn--danger:hover:not(:disabled) { background: #FBEAEA; }
.att-note { font-size: 11.5px; color: var(--txm); line-height: 1.4; margin: 0; }
.att-format { display: flex; flex-direction: column; gap: 4px; padding: 10px 14px; border: 1px solid var(--bdr); border-radius: 4px; background: var(--surf); font-size: 12.5px; color: var(--tx); }
.att-format legend { padding: 0 4px; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--txm); }
.att-format label { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.att-format-hint { color: var(--txm); font-size: 11.5px; }