/* AU ONE ERP · construction/uipatch.css Extracted verbatim from construction.html lines 1124-1974. */ /* ===== roofing sub-tabs (one Roofing tab, two sub-tabs) ===== */ .roofsub{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin:0 0 12px;padding:0 0 3px} .roofsub::-webkit-scrollbar{height:0} @media(hover:hover) and (pointer:fine){.roofsub{scrollbar-width:thin;padding-bottom:7px}} .rsub{flex:none;border:1px solid var(--line);background:var(--paper2);color:var(--ink2);font:inherit;font-weight:800;font-size:13px;padding:9px 16px;border-radius:11px;cursor:pointer;white-space:nowrap;display:flex;align-items:center;gap:6px} .rsub.on{background:var(--brand,#e0922f);color:#fff;border-color:var(--brand,#e0922f);box-shadow:0 2px 8px rgba(224,146,47,.35)} .rsub:not(.on):hover{border-color:var(--brand,#e0922f);color:var(--ink)} html[data-theme="dark"] .rsub{background:#222a33;color:#cdd6e0;border-color:#3a4654} html[data-theme="dark"] .rsub.on{background:#e0a93a;color:#1b2128;border-color:#e0a93a} /* ===== Trade Switcher (Estimator) — always-visible Phase → Trade hierarchy. Replaces "open the hamburger drawer to find another trade" with a persistent two-tier bar: 6 phase pills (top row) narrow down to that phase's trade pills (bottom row), sticky just under the header so it's reachable from anywhere inside a trade's content, not just at the top of the page. ===== */ .tradebar{position:sticky;top:var(--hdrh,62px);z-index:35;background:var(--paper3);border-bottom:1px solid var(--line);display:none} .tradebar.show{display:block} .tb-row{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:8px 12px} .tb-row::-webkit-scrollbar{height:0} .tb-trades{border-top:1px dashed var(--line)} .tb-phase{flex:none;display:flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--paper2);color:var(--ink2);font:inherit;font-weight:800;font-size:12px;letter-spacing:.02em;padding:7px 13px;border-radius:20px;cursor:pointer;white-space:nowrap} .tb-phase.on{background:var(--ink);color:#fff;border-color:var(--ink)} .tb-phase:not(.on):hover{border-color:var(--olive);color:var(--ink)} .tb-trade{flex:none;display:flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--paper2);color:var(--ink2);font:inherit;font-weight:700;font-size:12.5px;padding:7px 14px;border-radius:11px;cursor:pointer;white-space:nowrap} .tb-trade .nicon svg{width:15px;height:15px} .tb-trade.on{background:var(--olive);color:#fff;border-color:var(--olive);box-shadow:0 2px 8px rgba(111,125,51,.35)} .tb-trade:not(.on):hover{border-color:var(--olive);color:var(--ink)} .tb-trade .ndot{background:rgba(0,0,0,.14);color:inherit;border-radius:20px;font-size:10px;font-weight:800;padding:1px 6px;margin-left:2px} .tb-trade.on .ndot{background:rgba(255,255,255,.28)} /* BUGFIX (2026-07-14): these were written as `html[data-theme="dark"] ...` but the app only ever toggles `document.documentElement.setAttribute('data-theme', t)` -- it never adds a `dark` class to . So these rules NEVER matched, and dark mode fell through to the light-mode-only `.tb-phase.on{background:var(--ink);color:#fff}` rule above -- in dark mode `--ink` flips to a light/cream color, giving white text on a near-white background (unreadable). Corrected selector so these actually apply. */ html[data-theme="dark"] .tradebar{background:#181d24;border-color:#2c3540} html[data-theme="dark"] .tb-phase{background:#222a33;color:#cdd6e0;border-color:#3a4654} html[data-theme="dark"] .tb-phase.on{background:#eef0dd;color:#1b1f24;border-color:#eef0dd} html[data-theme="dark"] .tb-trade{background:#222a33;color:#cdd6e0;border-color:#3a4654} html[data-theme="dark"] .tb-trade.on{background:#8b9540;color:#12130a;border-color:#8b9540} /* Head Dashboard — project focus MULTI-select (view all projects, or any chosen subset at once). A checkbox panel rather than a native