/* css/modules/er.css: the .er-* module — split out of css/app.css by #360's sibling stage (#362). Load order is core.css, then every modules/*.css alphabetically; rules here are in their original relative order, and no selector in this file appears in any other (asserted in tests/css-split-check.js). */ /* ========================================================================== THE ENGINE ROOM (#247) — `er-` prefix Verified unused in css/app.css and driver/driver.css before adding. Behaviour hooks plus the minimum styling; the board's own .sched/.sc/.sum-row rules do the heavy lifting and are deliberately reused rather than duplicated. ========================================================================== */ /* --- driver qualifications on the row (Anthony: "it used to be a little column there") — dense enough to sit under a name without stealing height --- */ .er-quals{display:flex;flex-wrap:wrap;gap:3px;margin:3px 0 2px} .er-q{display:inline-block;padding:1px 5px;border-radius:4px;background:#eef2fa; border:1px solid var(--line);color:var(--ink);font-size:9px;font-weight:900;letter-spacing:.3px} /* "No tickets on file" is a gap in the register, NOT a driver who holds none — so it reads as an absence of data rather than as a qualification chip. */ .er-q--none{background:transparent;border-style:dashed;color:var(--muted); font-weight:800;letter-spacing:0;text-transform:none} /* --- depot / projects grouping (his sheet's row order, top to bottom) --- */ .er-grp__hd{position:sticky;left:0;background:#f4f7fc;border-top:2px solid var(--line); border-bottom:1px solid var(--line);padding:7px 12px;text-align:left;white-space:nowrap} .er-grp__name{font-size:12px;font-weight:900;letter-spacing:.6px;text-transform:uppercase;color:var(--ink)} .er-grp__n{margin-left:8px;font-size:11px;font-weight:800;color:var(--muted)} .er-grp__idle{margin-left:10px;padding:1px 7px;border-radius:99px;background:var(--orange); color:#fff;font-size:10px;font-weight:900} .er-grp__ok{margin-left:10px;font-size:10px;font-weight:900;color:var(--ok)} /* The projects note. That division is booked months ahead and shares drivers, so it is on this board for coordination even though it is managed elsewhere. */ .er-grp__note{margin-left:10px;font-size:10px;font-weight:700;color:var(--muted); font-style:italic;white-space:normal} /* --- the idle signal. This is the morning scan: "I literally go down. I see that every driver is working." A cell holding only a time is YARD DUTIES, not work, so it is marked rather than counted as covered. --- */ .er-idle{display:block;margin:2px 0;padding:2px 6px;border-radius:5px; border:1px dashed var(--orange);background:#fff7ee;color:#8a4b06; font-size:10px;font-weight:900;text-align:center} /* --- what the truck is pulling, by code (TR / DD / FT / F100 / DL) --- */ .er-rig{display:flex;flex-wrap:wrap;gap:3px;margin-top:3px} .er-unit{display:inline-flex;align-items:center;gap:3px;padding:1px 5px;border-radius:4px; background:#fff;border:1px solid var(--line);font-size:9px;font-weight:800;color:var(--ink)} .er-unit i{font-style:normal;font-weight:900;color:var(--blue);letter-spacing:.3px} /* --- the pools rail. "A pool of drivers, a pool of trucks, a pool of trailers and a pool of dollies is what makes up a job." --- */ .er-rail{padding:18px 20px;margin-top:18px} .er-rail__hd{margin-bottom:14px} .er-rail__sub{display:block;margin-top:4px;color:var(--muted);font-weight:700;font-size:12.5px;line-height:1.6} .er-rail__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:12px} .er-pool{border:1px solid var(--line);border-radius:10px;padding:11px 12px;background:#fbfcfe} .er-pool--err{border-style:dashed;background:transparent} /* Each pool is a
COLLAPSED BY DEFAULT — four open cards pushed the board itself below the fold. The summary is the whole point: it carries the free/total count and the source, so the question the rail answers is readable without opening anything. Chrome drops the disclosure triangle once a summary is `display:flex`, so the marker is suppressed on both engines and drawn back as .er-pool__caret. */ .er-pool__hd{display:flex;align-items:baseline;justify-content:space-between;gap:8px; cursor:pointer;list-style:none;user-select:none} .er-pool__hd::-webkit-details-marker{display:none} .er-pool__hd:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:5px} .er-pool__ttl{display:flex;flex-direction:column;gap:1px;min-width:0} .er-pool__hd b{font-size:12px;font-weight:900;letter-spacing:.5px;text-transform:uppercase} /* The SOURCE rides in the SUMMARY, not only in the footer, because the footer is now behind the fold: 'register' is the live 1,189-asset register and 'fleet' is the sample list of a couple of dozen, and a count without it reads as the whole business either way. */ .er-pool__src{font-size:9.5px;font-weight:800;color:var(--muted);letter-spacing:0} .er-pool__n{font-size:18px;font-weight:900;color:var(--ok);white-space:nowrap;margin-left:auto} .er-pool__n i{font-style:normal;font-size:12px;font-weight:800;color:var(--muted)} /* Nothing free is a shortage (red); nothing on the register is a pool nobody has entered (muted, italic — the same treatment the dolly footer row gives it). They must not render the same: they need different phone calls. */ .er-pool__n--out{color:var(--red)} .er-pool__n--none{font-size:11.5px;font-weight:800;color:var(--muted);font-style:italic} .er-pool__caret{flex:0 0 auto;align-self:center;width:0;height:0; border-left:4px solid transparent;border-right:4px solid transparent; border-top:5px solid var(--muted);transition:transform .12s ease} .er-pool__bd{margin-top:9px} .er-pool__chips{display:flex;flex-wrap:wrap;gap:4px;min-height:22px} .er-chip{display:inline-flex;align-items:center;gap:4px;padding:2px 7px;border-radius:5px; background:#fff;border:1px solid var(--line);font-size:11px;font-weight:800;cursor:grab} .er-chip i{font-style:normal;font-weight:900;color:var(--blue);font-size:9px;letter-spacing:.3px} .er-pool__none{font-size:11px;font-weight:800;color:var(--red)} .er-pool__more{font-size:11px;font-weight:800;color:var(--muted);align-self:center} /* The footer keeps the fuller statement — how many are allocated or away, and the source again in words — for whoever has opened the section. */ .er-pool__ft{margin-top:8px;padding-top:7px;border-top:1px solid var(--line); font-size:10.5px;font-weight:700;color:var(--muted);line-height:1.5} .er-pool__note{display:block;margin-top:4px;font-size:11px;font-weight:700;color:var(--muted)} /* ========================================================================== HIRED-IN CAPACITY — SUBCONTRACTORS AND GREY FLEET (#260) -------------------------------------------------------------------------- Anthony French, 14 Aug: "this has gaps in it because we use subcontractors as well. We also use our Hazelmere grey guys down here in the projects area." Everything here is drawn so a hired-in row can NEVER be mistaken for one of ours, in either direction: • HATCHED, not coloured, wherever the claim is "we hold nothing". A green chip on somebody nobody has checked is the one failure with a licence consequence; a red one puts a warning on correctly arranged work. Same treatment .cmp-pill--indet, .cmp-ros--unknown, .adb-c--unknown and .ses-att--none already use, for exactly the same reason. • THE HIRED COUNT IS NEVER GREEN. The four pools' .er-pool__n is green because it is capacity we can allocate; hired-in capacity is not, so it carries its own muted treatment and reads "booked / rows", never "free". • A HIRED ROW IS TINTED, faintly, so a scan down the board can see where the boundary is without reading a word. Faint on purpose — it must not compete with the conflict outlines, which are what somebody is acting on. All prefixes verified unused in css/app.css, driver/driver.css and portal/portal.css first. ========================================================================== */ /* --- the carrier on the row --- */ .er-car{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;margin:3px 0 2px; padding:3px 6px;border-radius:6px;font-size:10.5px;font-weight:800;line-height:1.4; background:repeating-linear-gradient(135deg,#f4f2ea,#f4f2ea 5px,#eae6d8 5px,#eae6d8 10px); border:1px dashed #c9b877;color:#6f5c1c} .er-car i{font-style:normal;font-weight:900;font-size:9px;letter-spacing:.4px; padding:0 4px;border-radius:3px;background:#fff;border:1px solid #c9b877;color:#7a6520} .er-car b{font-size:11px;font-weight:900;color:#5c4c14} .er-car__cov,.er-car__ph{flex:0 0 100%;font-size:9.5px;font-weight:700;color:#7a6a3a;letter-spacing:0} /* A projects row is OUR capacity managed elsewhere, not something we bought, so it is blue-grey rather than the hired hatch — a different fact, drawn differently, but still not the plain treatment an employed row gets. */ .er-car--projects{background:repeating-linear-gradient(135deg,#eef1f7,#eef1f7 5px,#e0e6f0 5px,#e0e6f0 10px); border-color:#a9b6cd;color:#3c4a63} .er-car--projects i{border-color:#a9b6cd;color:#2f3d55} .er-car--projects b{color:#2f3d55} /* The control that sets it. Quiet until hovered — it is a per-row setting somebody touches rarely, and forty of them shouting would be the noise the rest of this board is careful to avoid. */ .er-car__set{display:block;margin-top:3px;padding:1px 5px;border:1px dashed var(--line); border-radius:5px;background:transparent;color:var(--muted); font-family:inherit;font-size:9.5px;font-weight:800;cursor:pointer} .er-car__set:hover{border-color:var(--blue);color:var(--blue)} .er-row--hired > .sched__lane{background:#fdfcf6} .er-row--projects > .sched__lane{background:#f8fafd} /* "We hold no record" — NOT a qualification chip and NOT the "no tickets on file" one beside it. That one says our register has a gap; this says the record belongs to somebody else's employer, which is a different sentence with a different action. Hatched for the reason at the top of this block. */ .er-q--norec{background:repeating-linear-gradient(135deg,#f4f2ea,#f4f2ea 4px,#eae6d8 4px,#eae6d8 8px); border:1px dashed #c9b877;color:#7a6520;font-weight:800;letter-spacing:0;text-transform:none} /* An empty day on a hired-in row. Muted, never the orange of .er-idle: that orange means "one of our drivers has nothing on", which is money going out the door. Capacity we arranged and did not call on costs us nothing. */ .er-idle--hired{border-style:dashed;border-color:#c9b877;background:#faf8f0;color:#7a6520} /* --- the rail card that is NOT a pool --- */ .er-hired{border:1px solid #e3dcc4;border-radius:10px;padding:11px 12px;background:#fdfcf6} .er-pool__n--hired{color:#7a6520;font-size:16px} .er-chip--hired{cursor:default;background:#fffdf6;border-color:#ddd2ae} .er-chip--hired i{color:#8a7326} .er-chip--projects{background:#f7f9fc;border-color:#c8d3e4} .er-chip--projects i{color:#3c4a63} .er-chip__st{font-style:normal;font-size:9px;font-weight:800;color:var(--muted);letter-spacing:0} /* Carriers on file — the master records, managed in place. */ .er-car__admin{margin-top:9px;padding-top:8px;border-top:1px solid var(--line)} .er-car__admin-hd{display:flex;align-items:center;gap:8px;margin-bottom:6px} .er-car__admin-hd b{font-size:11.5px} .er-car__admin-hd .btn{margin-left:auto} .er-car__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px} .er-car__list li{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px; padding:5px 7px;border:1px solid var(--line);border-radius:7px;background:#fff} .er-car__nm{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:900} .er-car__nm i{font-style:normal;font-size:8.5px;font-weight:900;letter-spacing:.4px; padding:1px 4px;border-radius:3px;background:#f4f2ea;border:1px solid #c9b877;color:#7a6520} .er-car__meta{font-size:10px;font-weight:700;color:var(--muted)} .er-car__list .reg-btns{margin-left:auto;display:flex;gap:4px} .er-car__none,.er-car__note{margin:6px 0 0;font-size:10.5px;font-weight:700; color:var(--muted);line-height:1.55} .er-car__help{margin:0 0 10px;padding:9px 11px;border-radius:9px;background:#faf8f0; border:1px solid #e3dcc4;font-size:12px;font-weight:700;color:#6f5c1c;line-height:1.55} /* --- what the utilisation panel did NOT count --- */ .er-grp__hired{font-size:10px;font-weight:800;color:#7a6520;padding:1px 6px; border-radius:5px;background:#faf8f0;border:1px dashed #c9b877} .er-util__note--hired{color:#6f5c1c} .er-util__hired{display:inline-block;margin-left:6px;padding:0 5px;border-radius:4px; font-size:9px;font-weight:900;letter-spacing:.2px; background:#faf8f0;border:1px dashed #c9b877;color:#7a6520} /* The row whose ONLY work was hired-in. A zero here would read as spare when the asset was on the road, so it is called out rather than left to arithmetic. */ .er-util__hired--only{background:#fff3e2;border-color:var(--orange);color:#8a4b06} .er-util__r--hired td{background:#fdfcf6} /* DAYS OUT WITH A CARRIER — its own column, never folded into idle (#297). Dashed like the chip above so it reads as the same distinct fact rather than as one of our own figures; a day here is deliberately absent from `Idle days`. */ .er-util__oh{color:#7a6520;border-bottom:1px dashed #c9b877} /* The #/crew half of this block lives further down, immediately after the .crew-q--* family — `.crew-q` is declared there and would otherwise win on background and border, which is exactly how a hatched refusal turns into a flat pill without anybody touching it. */ /* --- the dollies row in the day footer --- */ .er-src{display:block;font-size:9.5px;font-weight:800;color:var(--muted);text-transform:none;letter-spacing:0} /* "None on register" is a pool nobody has entered, not a shortage — the two need different phone calls, so they must not render the same. */ .er-none{font-size:10.5px;font-weight:800;color:var(--muted);font-style:italic} /* ---- Allocate from the pool (#247) -------------------------------------- A driver chip is NOT draggable — a row on this board is a driver — so it must not carry the grab cursor that promises a drag. The rig chips sit ON the run, because what a truck is pulling belongs to the job rather than to the lane's single default trailer. */ .er-chip--static{cursor:default;opacity:.92} .er-chip--dragging{opacity:.45} /* The drop target is the RUN, not the day cell: a cell holds several runs and a trailer belongs to one of them. Outlined rather than filled so the run's own type colour still reads underneath. */ .er-drop{outline:2px solid var(--blue);outline-offset:1px; box-shadow:0 0 0 4px rgba(37,82,164,.16)} .er-rig{display:flex;flex-wrap:wrap;gap:3px;margin-top:4px} .er-rig__a{display:inline-flex;align-items:center;gap:3px;padding:1px 3px 1px 5px; border-radius:5px;background:rgba(255,255,255,.82);border:1px solid var(--line); font-size:9.5px;font-weight:900;letter-spacing:.2px;color:var(--ink);line-height:1.5} .er-rig__a i{font-style:normal;opacity:.65} /* 18px is under the 44px touch minimum on purpose: this is a dispatcher's pointer-driven board, not a driver's tablet, and a 44px control per trailer would push a five-asset road train past the height of its own cell. */ .er-rig__x{border:0;background:transparent;cursor:pointer;padding:0 2px; font-size:12px;line-height:1;font-weight:900;color:var(--muted);min-width:14px} .er-rig__x:hover{color:var(--red)} .er-rig__x:focus-visible{outline:2px solid var(--blue);outline-offset:1px;border-radius:3px} /* ---- collapsing a depot group (#247) ------------------------------------- "You've got forty plus drivers on there, sorting is quite big and clunky." A
cannot wrap table rows, so the header is a real