:root{ --bg:#EAEEE1; --surface:#FAFAF4; --ink:#1C2620; --ink-dim:#57614E; --ink-faint:#8B917E; --line:#D2D6C1; --moss:#2E4A34; --moss-soft:#436B4C; --gold:#C97F1E; --gold-soft:#E3A94C; /* Tracking Sheet status tones (Step 168) */ --ts-green:#2F8150; --ts-amber:#D4930F; --ts-purple:#7A5AA8; --ts-red:#BF3A2B; --clay:#A94A30; --clay-soft:#C97A5E; --chip-bg:#F0EFE2; /* Total Revenue chart (2026-09-17) -- Hadley: colors "more like this screenshot" (a blue Budget, green Actual/Expected) for that chart specifically, to read as a different chart from the maroon/gold Landscaping one above it. Reuses --moss/--moss-soft for Actual/Expected rather than adding a second green token; --budget-blue is new, sampled to sit in the same muted/desaturated register as the rest of this palette rather than a bright, clashing blue. */ --budget-blue:#2E5C8A; --budget-blue-soft:#6C93B8; /* LP Install entry outline colors (Step 141) -- yellow/orange dashed outlines Hadley can put on any schedule entry. Tuned darker than a pure yellow so a 1px dashed line still reads on the light bg. */ --hl-yellow:#C9A000; --hl-orange:#E0650B; /* Gray darkened (Step 143 -- Hadley: "the gray needs to be quite a bit darker to show up well"): was #7E8573, too close to the line color to read as a deliberate outline on the tan tiles. Dark mode goes the other way (lighter) for the same reason. */ --hl-gray:#4A5043; /* Step 180: Revenue Tracker line colors (validated categorical slots 1-4) */ --rt-s1:#2a78d6; --rt-s2:#eb6834; --rt-s3:#1baf7a; --rt-s4:#eda100; --shadow: 0 1px 2px rgba(28,38,32,0.06), 0 8px 24px -12px rgba(28,38,32,0.18); /* Sampled directly from the logo mark's own outline/shovel shade (#183405) -- legible on the light bg above, but that same dark green nearly disappears against the near-black dark-mode bg below, so dark mode swaps in the logo's brightest frond green (#62c706) instead -- still "a shade of the logo," just the one that actually has contrast there. */ --title-green:#183405; } @media (prefers-color-scheme: dark){ :root{ --bg:#131A15; --surface:#1B241C; --ink:#EDEFE5; --ink-dim:#AAB39C; --ink-faint:#727A67; --line:#31402F; --moss:#7CA986; --moss-soft:#5C8B69; --gold:#E3A94C; --gold-soft:#C9862F; --ts-green:#6DBE8C; --ts-amber:#E8B74E; --ts-purple:#B59BDD; --ts-red:#E07A6C; --clay:#D9846A; --clay-soft:#B25B41; --chip-bg:#212C22; --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 10px 28px -14px rgba(0,0,0,0.6); --title-green:#62C706; --budget-blue:#6FA3D8; --budget-blue-soft:#4A7CA8; --hl-yellow:#E6C84A; --hl-orange:#F08A3C; --hl-gray:#C3CAB8; --rt-s1:#3987e5; --rt-s2:#d95926; --rt-s3:#199e70; --rt-s4:#c98500; } } *{box-sizing:border-box;} /* Backstop for narrow screens: if anything still refuses to shrink (a long unbreakable value, a fixed-width chart) this keeps that one element's overflow from widening the whole page and carrying everything else off the right edge with it -- worst case that one spot clips instead. The two known-tight spots (the goal/signed and leads bar charts, and the gross-margin service-category rows) get their own explicit overflow-x:auto/flex-wrap handling above so nothing should actually hit this, but it's here as a floor. ONE of these, not both (2026-09-21, Step 108): html's overflow-x: hidden alone is already enough of a backstop -- body used to ALSO set overflow-x:hidden, redundantly, and that combination (both html and body having a non-'visible' overflow at the same time) turned out to silently break position:sticky for EVERY sticky element on the page, not just the new Cash Flow header this step adds: whichever of the two the browser doesn't treat as the real viewport scroller becomes body's own separate, non-scrolling "scroll container" (it never actually needs to scroll internally, since its height already fits its content) -- and CSS sticky positioning computes relative to the NEAREST such container, so a sticky descendant of a container that itself never scrolls just tracks that container 1:1 and never visibly detaches. Confirmed via a series of minimal Playwright repros varying which of html/body carried the rule: either ALONE works fine (sticky correctly clamps at top:0 and stays there); BOTH together breaks it completely (a sticky element just moves in exact lockstep with scroll, forever). Dropping the duplicate from body (keeping it on html) removes the one that was actually redundant, and fixes sticky positioning page-wide with no loss of the narrow-screen backstop itself. */ html{ overflow-x:hidden; } body{ margin:0; background:var(--bg); color:var(--ink); font-family:'Source Sans 3', system-ui, sans-serif; padding:0 20px 64px; max-width:100vw; } /* 2026-09-17, Step 78 (Hadley: "the live dashboard design across the board of filling the width of the screen is better... fill the screen better") -- this 1180px cap centered the ENTIRE page (every tab, not just one) in a fixed-width column, wasting the rest of any screen wider than about 1220px. The live dashboard's own #homePage/#sectionPage carry no width cap at all, just fixed side padding (Index.html) -- content there genuinely fills the window. Matching that here: no cap, just body's own existing 20px side padding. Every EXISTING responsive breakpoint below (.split-shell at 760px, .grid/.kpis at 860px/460px, etc.) triggers off actual viewport width via its own @media query, not off .wrap's old max-width, so narrow-window compression is unaffected by this -- it was never what those breakpoints depended on. */ .wrap{ margin:0 auto; } /* 2026-09-17, Step 79 (Hadley: "change all the bold display font to be something less bold and narrow and tall") -- 'Big Shoulders Display' is a condensed, elongated display cut by design (that's the whole "Display" in its name); swapped for 'Plus Jakarta Sans', a normal-width, normal-proportioned sans that isn't a condensed display face at all, and dropped the weight from 700 to 600 and removed the positive letter-spacing that was there to open up Big Shoulders' tight condensed letterforms (unneeded on a normal- width font, so it would have just looked loose instead). Governs every card header/section title/name heading in the dashboard (Labor, Customers, Garden Center detail panels -- Sales/Sales Goals/Operations use their own separate inline "eyebrow" header style already, not h1/h2, so they were never affected either way) -- the masthead's own

keeps its separate Cormorant Garamond override, untouched, same as before. */ h1,h2{ font-family:'Plus Jakarta Sans', system-ui, sans-serif; font-weight:600; margin:0; color:var(--ink); } .masthead{ padding:36px 0 20px; border-bottom:1px solid var(--line); margin-bottom:18px; } /* Title lockup: logo + divider + label, matching the live dashboard's own "Schönheit Gardens" header treatment (same font/ color/logo, pulled directly from that page -- see database-plan.md Steps 59-60). The "Live"/fetched-time status line that used to sit above this as its own row now sits below it instead, smaller, no badge -- see .title-meta. */ .title-lockup{ display:flex; align-items:center; gap:14px; } .title-logo{ width:48px; height:48px; object-fit:contain; border-radius:50%; flex-shrink:0; } .title-divider{ width:1px; height:32px; background:var(--line); flex-shrink:0; } .masthead h1{ font-family:'Cormorant Garamond', serif; font-size:clamp(28px,4vw,38px); font-weight:400; letter-spacing:0.2px; color:var(--title-green); } .title-meta{ font-size:12px; color:var(--ink-faint); font-family:'IBM Plex Mono', monospace; margin-top:8px; } .masthead p{ max-width:640px; color:var(--ink-dim); font-size:15px; line-height:1.55; margin-top:10px; } .tabnav{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:22px; } .tabbtn{ font-family:'IBM Plex Mono', monospace; font-size:12.5px; font-weight:600; letter-spacing:0.03em; color:var(--ink-dim); background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:8px 16px; cursor:pointer; transition:background 0.12s,color 0.12s,border-color 0.12s; } .tabbtn:hover{ border-color:var(--moss-soft); color:var(--ink); } .tabbtn.active{ background:var(--moss); border-color:var(--moss); color:#F5F7EE; } @media (prefers-color-scheme: dark){ .tabbtn.active{ color:#131A15; } } .subtabnav{ display:flex; gap:6px; margin-bottom:16px; } .subtabbtn{ font-family:'IBM Plex Mono', monospace; font-size:11.5px; font-weight:600; letter-spacing:0.03em; color:var(--ink-dim); background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:6px 14px; cursor:pointer; transition:background 0.12s,color 0.12s,border-color 0.12s; } .subtabbtn:hover{ border-color:var(--moss-soft); color:var(--ink); } .subtabbtn.active{ background:var(--moss); border-color:var(--moss); color:#F5F7EE; } @media (prefers-color-scheme: dark){ .subtabbtn.active{ color:#131A15; } } .subtabnav{ display:flex; gap:6px; flex-wrap:wrap; margin:10px 0 14px; } .subtabbtn{ font-family:'IBM Plex Mono', monospace; font-size:11.5px; font-weight:600; letter-spacing:0.03em; color:var(--ink-dim); background:var(--chip-bg); border:1px solid var(--line); border-radius:16px; padding:5px 12px; cursor:pointer; transition:background 0.12s,color 0.12s,border-color 0.12s; } .subtabbtn:hover{ border-color:var(--moss-soft); color:var(--ink); } .subtabbtn.active{ background:var(--moss); border-color:var(--moss); color:#F5F7EE; } @media (prefers-color-scheme: dark){ .subtabbtn.active{ color:#131A15; } } .kpis{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:22px; } .kpis.kpis-2{ grid-template-columns:repeat(2,1fr); max-width:480px; } .kpi{ background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:18px 20px; box-shadow:var(--shadow); } /* 2026-09-17, Step 77 (Hadley: "the font in the boxes of the garden center and customers tab is wrong. It should look like the boxes in the operations tab") -- .kpi-label/.kpi-value are the shared classes behind every KPI tile that ISN'T hand-styled inline (Labor, Customers, Garden Center); Sales, Sales Goals, and Operations were restyled to a plain-body-font, 22px/700 inline convention back on 2026-09-15 (see renderOperationsTab's own history comment) but these shared classes were never brought in line with that -- they'd kept 'Big Shoulders Display' at 30px, the one styling inconsistency left in the whole KPI-tile system. Values now match that convention exactly (no font-family override -- inherits body's Source Sans 3, same as every other tab's KPI numbers; 22px, not 30px); label sizing/weight/letter-spacing brought in line too for a precise match, not just an approximation. */ .kpi-label{ font-size:11px; color:var(--ink-faint); text-transform:uppercase; letter-spacing:0.5px; font-weight:700; } .kpi-value{ font-size:22px; font-weight:700; margin-top:6px; font-variant-numeric:tabular-nums; } .kpi-sub{ font-size:12px; color:var(--ink-dim); margin-top:4px; font-family:'IBM Plex Mono',monospace; min-height:1.2em; } .kpi-sub.up{ color:var(--moss-soft); } .kpi-sub.down{ color:var(--clay); } .grid{ display:grid; grid-template-columns:1.4fr 1fr; gap:14px; margin-bottom:14px; } .grid-even{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:14px; } .card{ background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:20px 22px 22px; box-shadow:var(--shadow); } .card h2{ font-size:18px; margin-bottom:2px; } .card .card-sub{ font-size:12px; color:var(--ink-faint); margin-bottom:14px; font-family:'IBM Plex Mono',monospace; } /* LP Install (Step 128, 2026-09-23) -- .lp-shell is a flex row, NOT a position:fixed overlay: Hadley's own spec is that opening the left menu "shouldn't compress the main weekly schedule so you can see both side by side" -- .lp-main-col's min-width guarantees the week grid never shrinks to make room for a side panel; if both panels are open on a narrow window there isn't room for everyone at full size, so .lp-shell scrolls horizontally instead (same "own explicit overflow-x:auto" pattern as the tight spots noted near the top of this stylesheet), rather than ever compressing the schedule. */ /* Independent scrolling (2026-09-23, Step 134 -- Hadley: "make the left and right menus scroll independently of the central scheduling block... you can't see the main scheduling block when you're viewing many of the tickets in the left menu"). The shell is one viewport- tall box and each of its three columns is its own vertical scroller, so scrolling a long Unassigned Tickets list never moves the schedule (and vice versa). Deliberately NOT done with position:sticky side panels: .lp-shell needs overflow-x:auto (see above -- never compress the schedule, scroll sideways instead), and that makes it a scroll container, which silently breaks sticky for anything inside it -- the same trap Step 108 documents for the Cash Flow header. Per- column scrollers sidestep that entirely and keep the horizontal scroll. lpRenderShell_ saves and restores every column's scroll position around each re-render, since innerHTML replacement would otherwise snap all three back to the top on every click. The 100vh height below is only a fallback -- lpFitShellHeight_ sets the real height so the shell runs exactly from where it starts (under the masthead and tabs) to the bottom of the window: nothing is cut off below the fold, and there's no second, page-level scroll needed to reach the bottom of any column. Re-fit on resize and whenever the tab is shown (it can't be measured while hidden). */ body.shell-tab{ padding-bottom:12px; } /* Step 330: Resources tab */ .res-form{ display:flex; flex-wrap:wrap; gap:8px 10px; align-items:flex-end; } .res-form label{ display:flex; flex-direction:column; gap:3px; font-size:10.5px; font-weight:700; letter-spacing:0.5px; text-transform:uppercase; color:var(--ink-faint); } .res-form input, .res-form textarea{ font:inherit; font-size:13px; font-weight:400; letter-spacing:0; text-transform:none; padding:6px 8px; border:1px solid var(--line); border-radius:6px; background:var(--surface); color:var(--ink); max-width:100%; } .res-cat{ font-size:11px; font-weight:700; letter-spacing:0.6px; text-transform:uppercase; color:var(--ink-faint); margin:18px 0 8px; } .res-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:12px; } .res-card{ display:flex; flex-direction:column; gap:6px; padding:14px 16px; border:1px solid var(--line); border-radius:10px; background:var(--surface); box-shadow:var(--shadow); min-width:0; } .res-title{ font-weight:700; font-size:14px; color:var(--ink); text-decoration:none; overflow-wrap:anywhere; } a.res-title:hover, a.res-title:focus-visible{ color:var(--moss); text-decoration:underline; } .res-kind{ align-self:flex-start; font-size:10.5px; font-weight:700; padding:1px 8px; border-radius:999px; border:1px solid var(--line); color:var(--ink-dim); } .res-desc{ font-size:12.5px; color:var(--ink-dim); line-height:1.45; overflow-wrap:anywhere; } .res-acts{ display:flex; gap:6px; margin-top:auto; padding-top:4px; } /* Step 301: the Estimator frame (height set by lpFitShellHeight_) */ .est-shell{ height:80vh; } /* Step 303: no frame border -- the page uses the dashboard look */ .est-frame{ display:block; width:100%; height:100%; border:0; } /* Step 166 -- see lpFitShellHeight_ */ .lp-shell{ display:flex; align-items:flex-start; gap:16px; overflow-x:auto; overflow-y:hidden; height:calc(100vh - 32px); min-height:420px; padding-bottom:4px; } .lp-side-panel{ flex:0 0 320px; width:320px; max-height:100%; overflow-y:auto; background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:16px; box-shadow:var(--shadow); } .lp-main-col{ flex:1 1 auto; min-width:700px; height:100%; overflow-y:auto; padding:0 6px 2px 2px; } /* Side-panel form controls must be able to shrink (2026-09-23, Step 139 -- Hadley: the left menu's Assign button and the right menu's Field Manager / Ticket Status / Notes fields were overflowing their cards). Inputs and selects have an intrinsic minimum width (an defaults to ~20 characters wide; a