/* AutoSteward layout - the page frame, sidebar, header, tables, buttons, fields and type treatment. * * WHAT IT IS. "Bold flat" (direction B, the owner's pick on 2026-09-28) with a few things borrowed * from the two directions it beat, where they add polish without softening it: * from B, kept whole: the preset's own sidebar with a SOLID accent block for the current page, * heavy ink rules instead of boxes, UPPERCASE titles standing on a thick rule, big bold money in * even-width figures, the out-the-door total in a solid ink box, ruled dashboard figures, and * compact tables; * from A: more room between sections and under page titles (still on the 2px rhythm), and the * row under the pointer lighting up in a table - with the zebra stripes dropped for it; * from C: solid status chips in tables (made solid and bold rather than pastel), and the layout * fixes that measured the fewest flaws; * corners: one 2px corner on cards, buttons and fields - nearly square, never round. * The dealership photo stays on the sign-in screen: a fresh install paints no photo behind the * working screens (Display > Branding, "Application after sign-in", defaults to Blank). * * It is LAYOUT, not colour: every colour is read from the chosen design preset's tokens (--ink, * --surface-strong, --accent, --sidebar-*), so each preset in StewardDesign.DESIGNS keeps its own * colours and fonts, light and dark. The exceptions are fixed fills that must carry white text in * both appearances: the status chips' green and amber, and the quiet-delete red. * * It applies to everyone, always: a plain stylesheet, so there is no attribute to set and nothing * to flash before first paint. Rules are written `html:root body ...` - the specificity the * preview layer had as `html[data-layout] body ...` - because that is what lets them out-rank * styles.css, design-themes.css and identity.css while loading BEFORE controls.css, which tests pin * as the last stylesheet. * * A handful of --L-* tokens drive it (set on html:root just below): * --L-gutter / --L-stack / --L-top page padding, gap between sections, space above the title * --L-radius / --L-ctl-r the corner of panels and of controls * --L-row-y / --L-cell-x table cell padding * --L-rule / --L-rule-ctl / --L-heavy hairline, control outline, heavy ink rule * --L-cta / --L-cta-ink the one colour that means "act on this" (the preset's accent) * * RULES THIS FILE KEEPS (CLAUDE.md, Render system): sizes only from the --fs-* scale with the paired * --lh-* step, weights 400/500/600/700 only, no font shorthand, spacing on the even 2px rhythm * (radii exempt). No markup and no behaviour live here. */ /* ---------------------------------------------------------------- tokens */ html:root{ --L-gutter:32px;--L-stack:28px;--L-top:32px; --L-radius:2px;--L-ctl-r:2px; --L-row-y:8px;--L-cell-x:10px; --L-rule:color-mix(in srgb,var(--ink) 14%,transparent); --L-rule-ctl:color-mix(in srgb,var(--ink) 34%,transparent); --L-heavy:2px solid var(--ink); --L-panel-bg:var(--surface-strong);--L-panel-border:1px solid var(--L-rule);--L-panel-shadow:none; --L-title-fs:var(--fs-h1);--L-title-lh:var(--lh-h1);--L-title-case:uppercase;--L-title-track:.02em; --L-nav-h:40px; --L-cta:var(--accent);--L-cta-ink:var(--accent-ink); --L-danger-ink:#b42318; --L-th-rule:2px solid var(--ink);--L-th-rule-color:var(--ink); /* Nearly square, one corner everywhere: re-point the app's own corner tokens too, so a component * that reads them gets the same 2px instead of the preset's 8-16px. */ --radius:2px;--radius-sm:2px;--r-control:2px;--r-panel:2px;--r-card:2px;--r-stadium:2px;--r-surface:2px; } html:root[data-theme="dark"]{--L-danger-ink:#ff9b8f;--L-rule:color-mix(in srgb,var(--ink) 16%,transparent)} /* ---------------------------------------------------------------- the shell: header */ html:root body .desktop-app-header{ min-height:60px;gap:8px;padding:0 var(--L-gutter); box-shadow:none;backdrop-filter:none; background:var(--L-header-bg,var(--header-bg)); border-bottom:1px solid var(--L-rule); } html:root body .desktop-app-header :is(button,.button){white-space:nowrap} html:root body .breadcrumb-bar{min-width:0;font-size:var(--fs-small);line-height:var(--lh-small);color:var(--muted)} html:root body .breadcrumb-bar span{color:var(--ink);font-weight:600} /* One height for everything in the header, so the row reads as a row. */ html:root body .desktop-app-header :is(.header-search-button,.header-help-button,.manager-attention-button,.account-menu-button){ min-height:44px;height:44px;padding:0 12px;gap:8px; font-size:var(--fs-small);line-height:var(--lh-small);font-weight:500; border-radius:var(--L-ctl-r);box-shadow:none; } html:root body .header-search-button{min-width:180px;justify-content:flex-start;color:var(--muted)} html:root body .header-search-button kbd{margin-left:auto;font-size:var(--fs-micro);line-height:var(--lh-micro);padding:0 6px;border-radius:var(--L-radius)} html:root body .header-search-icon{font-size:var(--fs-lead);line-height:var(--lh-lead)} /* Manager Attention: a quiet button with a count, not a red slab, and a label that never wraps. Its * bell is the outline icon from design-icons.js, so it takes the text colour like every other icon. */ html:root body .manager-attention-button{color:var(--ink);background:transparent;border:1px solid var(--L-rule-ctl,var(--line))} html:root body .header-manager-attention{flex:none} html:root body .manager-attention-icon{flex:0 0 18px;width:18px;height:18px} html:root body .manager-attention-count{min-width:22px;height:22px;padding:0 6px;border-radius:var(--L-radius);font-size:var(--fs-micro);line-height:22px;font-weight:700;color:#fff;background:var(--red-solid,#c9363e)} html:root body .account-menu-button{border:0;background:transparent} html:root body .account-avatar{width:30px;height:30px;font-size:var(--fs-small);line-height:30px} html:root body .account-button-copy strong{font-size:var(--fs-small);line-height:var(--lh-small);font-weight:600} html:root body .account-button-copy small{font-size:var(--fs-micro);line-height:var(--lh-micro);color:var(--muted)} /* ---------------------------------------------------------------- the shell: sidebar */ html:root body .sidebar-brand{min-height:60px;padding:0 20px;gap:10px} html:root body .sidebar-nav{padding:8px 12px 16px} /* Expand all / Collapse all stay, as small text, so they stop competing with the pages. */ html:root body .sidebar-nav-tools{justify-content:flex-end;gap:8px;margin:0 0 4px;padding:0} html:root body .sidebar-nav-tool{min-height:26px;padding:0 6px;font-size:var(--fs-micro);line-height:var(--lh-micro);font-weight:500;color:var(--sidebar-muted);background:transparent;border:0} html:root body .sidebar-nav-group{margin:0 0 4px} html:root body .sidebar-nav-group h2{margin:12px 0 2px;padding:0 8px} html:root body .sidebar-group-toggle{min-height:28px;padding:0;font-size:var(--fs-micro);line-height:var(--lh-micro);font-weight:600;letter-spacing:.08em} html:root body .sidebar-link{ min-height:var(--L-nav-h);height:auto;margin:0 0 2px;padding:6px 12px;gap:12px; font-size:var(--fs-body);line-height:var(--lh-body);font-weight:500; border:0;box-shadow:none; } /* Icons: one family (design-icons.js draws every icon from its one line set), one size, one stroke. */ html:root body .sidebar-link-icon{flex:0 0 20px;width:20px;height:20px;color:var(--sidebar-muted)} html:root body .sidebar-link-icon .dms-ico{width:20px;height:20px;stroke-width:1.75px} html:root body .sidebar-link:hover{background:color-mix(in srgb,var(--sidebar-ink) 7%,transparent)} html:root body .sidebar-link:hover .sidebar-link-icon{color:var(--sidebar-ink)} html:root body .sidebar-link.active::before{display:none} /* The version card becomes a quiet footnote. */ html:root body .sidebar-release{margin:0;padding:12px 20px 16px;border:0;border-top:1px solid color-mix(in srgb,var(--sidebar-ink) 10%,transparent);border-radius:0;background:transparent} html:root body .sidebar-release strong{font-size:var(--fs-micro);line-height:var(--lh-micro);font-weight:600;color:var(--sidebar-muted)} html:root body .sidebar-release span{font-size:var(--fs-micro);line-height:var(--lh-micro);color:var(--sidebar-muted)} /* ---------------------------------------------------------------- page frame and heading */ html:root body main.page-shell{padding:var(--L-top,28px) var(--L-gutter) 48px} html:root body main.page-shell>*+*{margin-top:var(--L-stack)} /* An empty mount point (a banner slot with nothing in it) takes no gap, or two gaps stack into one hole. */ html:root body main.page-shell>:empty{margin-top:0} html:root body :is(.page-heading,.dashboard-heading){margin:0 0 var(--L-stack);padding:0;align-items:flex-end;gap:16px} /* The eyebrow repeats the title in capitals ("Inventory management" over "Vehicles"). */ html:root body .page-heading .eyebrow{display:none} html:root body :is(.page-heading,.dashboard-heading) h1{ margin:0;font-size:var(--L-title-fs);line-height:var(--L-title-lh);font-weight:700; text-transform:var(--L-title-case,none);letter-spacing:var(--L-title-track,0); } html:root body :is(.page-heading,.dashboard-heading) h1+p, html:root body :is(.page-heading,.dashboard-heading)>div>p{ /* Muted, but never below 4.5:1: the preset's --muted measured 4.23:1 on Alpine's page. */ max-width:68ch;margin:4px 0 0;color:color-mix(in srgb,var(--muted) 72%,var(--ink));font-size:var(--fs-body);line-height:var(--lh-body); } html:root body .dashboard-heading .timestamp{font-size:var(--fs-small);line-height:var(--lh-small);color:var(--muted)} /* ---------------------------------------------------------------- panels */ html:root body :is(.panel,.info-card){border-radius:var(--L-radius);box-shadow:var(--L-panel-shadow);border:var(--L-panel-border);background:var(--L-panel-bg)} html:root body .panel-heading{padding:16px var(--L-cell-x);border-bottom:1px solid var(--L-rule);min-height:0} html:root body .panel-heading h2{font-size:var(--fs-lead);line-height:var(--lh-lead);font-weight:600} /* ---------------------------------------------------------------- buttons */ html:root body .button{ min-height:var(--control-height);padding:0 16px;gap:8px; font-size:var(--fs-body);line-height:var(--lh-body);font-weight:600; border-radius:var(--L-ctl-r); } html:root body .button.compact{min-height:32px;padding:0 12px;font-size:var(--fs-small);line-height:var(--lh-small)} html:root body .button.primary{color:var(--L-cta-ink);background:var(--L-cta);border-color:var(--L-cta);box-shadow:none} html:root body .button.primary:hover:not(:disabled){color:var(--L-cta-ink);background:color-mix(in srgb,var(--L-cta) 86%,#000);border-color:color-mix(in srgb,var(--L-cta) 86%,#000)} /* A delete is still findable, and still behind its confirmation - it simply stops shouting. */ html:root body .button.danger-outline{color:var(--L-danger-ink);background:transparent;border-color:transparent;box-shadow:none} html:root body .button.danger-outline:hover:not(:disabled){color:var(--L-danger-ink);background:color-mix(in srgb,var(--red-solid,#c9363e) 10%,transparent);border-color:transparent} html:root body .link-btn{font-weight:600} /* ---------------------------------------------------------------- fields */ html:root body :is(.vehicle-filter-grid,.customer-search-bar) label>span, html:root body label.sw-field>span, html:root body .sw-field>legend{font-size:var(--fs-small);line-height:var(--lh-small);font-weight:600;color:var(--ink)} html:root body .sw-field small, html:root body .sw-field>span small{display:block;font-size:var(--fs-micro);line-height:var(--lh-micro);font-weight:400;color:var(--muted)} html:root body #app :is(input:not([type=checkbox]):not([type=radio]):not([type=file]),select){ min-height:var(--control-height);height:var(--control-height);border-radius:var(--L-ctl-r);box-shadow:none; font-size:var(--fs-body);line-height:var(--lh-body); } /* ---------------------------------------------------------------- tables */ html:root body .data-table{font-size:var(--fs-body)} html:root body .data-table :is(th,td){padding:var(--L-row-y) var(--L-cell-x);line-height:var(--lh-body);border-left:0;border-right:0} html:root body .data-table th{ padding-top:10px;padding-bottom:10px;white-space:normal;vertical-align:bottom; font-size:var(--fs-micro);line-height:var(--lh-micro);font-weight:600;letter-spacing:.04em; color:var(--muted);background:var(--L-th-bg,transparent); border-top:0;border-bottom:var(--L-th-rule,1px solid var(--L-rule)); } html:root body .data-table td{background:transparent;border-top:0;border-bottom:1px solid var(--L-rule)} html:root body .data-table tbody tr:last-child td{border-bottom:0} html:root body .data-table tbody tr:hover{background:color-mix(in srgb,var(--ink) 4%,transparent)} html:root body .data-table tbody tr.selected{background:color-mix(in srgb,var(--accent) 10%,transparent)} html:root body .data-table tbody tr:is(:hover,.selected) td{background:transparent} html:root body .data-table tbody tr.selected td:first-child{box-shadow:inset 3px 0 0 var(--accent)} html:root body .data-table .mono{font-size:var(--fs-small);line-height:var(--lh-small);letter-spacing:0;color:var(--muted)} /* A link in a row is still a 28px target (26px is the harness's floor for a reliable hit). */ html:root body .data-table .link-btn{display:inline-flex;align-items:center;min-height:28px;padding:0;text-decoration:none} html:root body .data-table .link-btn:hover{text-decoration:underline} /* Money and counts line up on their decimal point. */ html:root body :is(.data-table td.column-number,.data-table td.column-money,.dash-tile-value,.sw-otd-summary dd,.dash-car-sub){font-variant-numeric:tabular-nums} html:root body .veh-thumb{width:56px;height:40px;border-radius:calc(var(--L-radius) / 2);overflow:hidden} /* Row actions: three quiet text buttons instead of three boxed ones on every line. */ html:root body .row-actions{gap:6px} /* Row actions stay on one line INSIDE a table row; elsewhere (a form footer in a narrow column) they * wrap, or they spill across the next card and a click lands on it (measured on a customer record). */ html:root body .data-table .row-actions{flex-wrap:nowrap} html:root body #app .row-actions .button.compact:not(.primary):not(.danger){min-height:30px;padding:0 10px;background:transparent;border-color:transparent;box-shadow:none;font-weight:500} html:root body #app .row-actions .button.compact:not(.primary):not(.danger):hover:not(:disabled){background:color-mix(in srgb,var(--ink) 7%,transparent)} /* ---------------------------------------------------------------- inventory toolbar */ html:root body .vehicle-filter-panel{padding:0;border:0;box-shadow:none;background:transparent} html:root body .vehicle-filter-panel .filter-title-row{padding:0 0 8px;border:0;background:transparent;min-height:0} html:root body .vehicle-filter-panel .filter-title-row strong{font-size:var(--fs-small);line-height:var(--lh-small);font-weight:600;color:var(--muted)} html:root body .vehicle-filter-panel .filter-title-row span{font-size:var(--fs-small);line-height:var(--lh-small);color:var(--muted)} html:root body .vehicle-filter-grid{padding:0;gap:12px;align-items:end} html:root body .vehicle-filter-grid label{gap:4px} /* The one thing a dealer does most on this screen stays loud; the other ten become a tool row. */ html:root body .vehicle-action-bar{padding:0;gap:6px;border:0;background:transparent;box-shadow:none;align-items:center} html:root body #app .vehicle-action-bar .button:not(.primary):not(.danger){ min-height:34px;padding:0 10px;font-size:var(--fs-small);line-height:var(--lh-small);font-weight:500; color:var(--ink);background:transparent;border-color:transparent;box-shadow:none; } html:root body #app .vehicle-action-bar .button:not(.primary):not(.danger):hover:not(:disabled){background:color-mix(in srgb,var(--ink) 7%,transparent)} /* The quiet delete keeps its red: the tool-row rule above would otherwise paint it ink like its neighbours. */ html:root body #app .vehicle-action-bar .button.danger-outline:not(.primary):not(.danger){color:var(--L-danger-ink)} html:root body #app .vehicle-action-bar .button.primary{margin-right:8px} html:root body .vehicle-action-bar .action-divider{height:20px;margin:0 6px;background:var(--L-rule)} html:root body .inventory-view-bar{padding:0;border:0;background:transparent;box-shadow:none;justify-content:flex-end} html:root body .selection-strip{padding:0;border:0;background:transparent;font-size:var(--fs-small);line-height:var(--lh-small);color:var(--muted)} html:root body .inv-views{padding:0;gap:6px;background:transparent;border:0;box-shadow:none} html:root body .inv-view{min-height:30px;padding:0 14px;font-size:var(--fs-small);line-height:var(--lh-small);font-weight:600;border-radius:var(--L-ctl-r);border:0;box-shadow:none;background:transparent;color:var(--muted)} html:root body .inv-view.active{background:color-mix(in srgb,var(--ink) 8%,transparent);color:var(--ink);box-shadow:none} /* ---------------------------------------------------------------- customers toolbar */ html:root body .customer-search-bar{padding:0;gap:8px;border:0;background:transparent;box-shadow:none;align-items:end} html:root body .customer-search-bar>span{margin-left:auto;align-self:center;font-size:var(--fs-small);line-height:var(--lh-small);color:var(--muted)} html:root body #app #resetCustomerSearch{background:transparent;border-color:transparent;box-shadow:none} html:root body #applyCustomerSearch:not(:hover){color:var(--ink);background:var(--surface-strong);border-color:var(--L-rule-ctl,var(--line))} html:root body #applyCustomerSearch{box-shadow:none} html:root body .customer-search-bar label{flex:0 1 480px} html:root body .customer-search-bar>span{order:4} html:root body #newCustomer{order:5;margin-left:16px} /* ---------------------------------------------------------------- dashboard */ html:root body .dash-tile-label{font-size:var(--fs-micro);line-height:var(--lh-micro);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)} html:root body .dash-tile-value{font-size:var(--fs-display);line-height:var(--lh-display);font-weight:700} html:root body .dash-tile-sub{font-size:var(--fs-small);line-height:var(--lh-small);color:var(--muted)} html:root body .dash-system-head{font-size:var(--fs-micro);line-height:var(--lh-micro);font-weight:600;letter-spacing:.06em} html:root body .dash-sys-tile strong{font-size:var(--fs-lead);line-height:var(--lh-lead);font-weight:700} html:root body .dash-sys-tile small{font-size:var(--fs-small);line-height:var(--lh-small);color:var(--muted)} html:root body .dash-lot-head h2, html:root body .rf-lead{font-size:var(--fs-h3);line-height:var(--lh-h3);font-weight:700} html:root body .dash-car-name{min-height:28px;font-size:var(--fs-body);line-height:var(--lh-body);font-weight:600} html:root body .dash-car-sub{font-size:var(--fs-small);line-height:var(--lh-small)} html:root body .dash-car-days{font-size:var(--fs-micro);line-height:var(--lh-micro);color:var(--muted)} /* The quick-fix forms on a lot card (asking price, what you paid, smog) are kept, one tight row each. */ html:root body .dash-car-fix{gap:2px;margin-top:8px} html:root body .dash-car-fixlabel{font-size:var(--fs-micro);line-height:var(--lh-micro);font-weight:600;color:var(--muted)} html:root body .dash-car-fixrow{gap:6px} html:root body .dash-car-fixrow :is(input,select){min-height:32px;height:32px} html:root body .dash-car-fixrow .button.compact{min-height:32px} html:root body .rf-signal h3{font-size:var(--fs-body);line-height:var(--lh-body);font-weight:600} html:root body .rf-signal p{font-size:var(--fs-small);line-height:var(--lh-small);color:var(--muted)} html:root body .quick-card strong{font-size:var(--fs-body);line-height:var(--lh-body);font-weight:600} /* ---------------------------------------------------------------- the sale wizard */ html:root body .sw-veh-card{box-shadow:none} html:root body .sw-veh-facts dt{font-size:var(--fs-micro);line-height:var(--lh-micro);font-weight:600;color:var(--muted)} html:root body .sw-veh-facts dd{font-size:var(--fs-small);line-height:var(--lh-small);font-weight:500} html:root body .sw-head h2{font-size:var(--fs-h2);line-height:var(--lh-h2);font-weight:700} html:root body .sw-blurb{font-size:var(--fs-body);line-height:var(--lh-body);color:var(--muted)} html:root body .sw-rail-title{font-size:var(--fs-small);line-height:var(--lh-small);font-weight:500} html:root body .sw-money-block>h3{font-size:var(--fs-lead);line-height:var(--lh-lead);font-weight:700} html:root body .sw-grid{gap:16px 20px} /* THE FIGURE THE BUYER ASKS FOR is the biggest thing on the step. */ html:root body .sw-otd-summary dt{font-size:var(--fs-small);line-height:var(--lh-small);color:var(--muted)} html:root body .sw-otd-summary dd{font-size:var(--fs-body);line-height:var(--lh-body);font-weight:600} html:root body .sw-otd-summary .sw-otd-total dt{font-size:var(--fs-lead);line-height:var(--lh-lead);font-weight:700;color:var(--ink)} html:root body .sw-otd-summary .sw-otd-total dd{font-size:var(--fs-h1);line-height:var(--lh-h1);font-weight:700} html:root body .sw-tender{border-radius:var(--L-ctl-r)} html:root body .sw-tender-name{font-size:var(--fs-small);line-height:var(--lh-small)} html:root body .sw-choice strong{font-size:var(--fs-body);line-height:var(--lh-body);font-weight:700} html:root body .sw-choice span{font-size:var(--fs-small);line-height:var(--lh-small)} /* ---------------------------------------------------------------- phones */ @media (max-width:900px){ html:root body .desktop-app-header{padding:0 12px} html:root body .header-search-button{min-width:0} html:root body main.page-shell{padding:20px 16px 40px} html:root body .account-button-copy{display:none} } /* ---------------------------------------------------------------- inventory: one tool row * The view switch (Table / Gallery / Board) sat alone on its own 50px row above the tool buttons. * It now shares the tool row, on the right, so the table starts 60px higher. Same controls. */ html:root body main.page-shell:has(>.vehicle-action-bar){display:flex;flex-wrap:wrap;align-content:flex-start;column-gap:16px} html:root body main.page-shell:has(>.vehicle-action-bar)>*{flex:1 1 100%;order:10;min-width:0} html:root body main.page-shell:has(>.vehicle-action-bar)>.page-heading{order:0} html:root body main.page-shell:has(>.vehicle-action-bar)>.vehicle-filter-panel{order:1} html:root body main.page-shell:has(>.vehicle-action-bar)>.vehicle-action-bar{order:2} html:root body main.page-shell:has(>.vehicle-action-bar)>.selection-strip{order:3;flex:1 1 0;align-self:center} html:root body main.page-shell:has(>.vehicle-action-bar)>.inventory-view-bar{order:4;flex:0 0 auto;align-self:center} html:root body main.page-shell:has(>.vehicle-action-bar)>:is(.inventory-view-bar,.selection-strip){margin-top:12px} /* Short identifiers never break mid-word ("Hond / a"). */ html:root body .inventory-width-profile td:is(.vehicle-column-make,.vehicle-column-model,.vehicle-column-trim){white-space:nowrap;overflow-wrap:normal} /* THE INVENTORY TABLE FITS THE PAGE. Its colgroup gives every column a PERCENTAGE and every cell a * minimum in ch, and under table-layout:auto the browser then widens the whole table until the most * demanding ratio is met - Purchase Date's 12ch at 7% alone asks for a 1,480px table, which is why it * scrolled sideways on a 1440px screen. Letting the content size the columns, and letting long * headers take two lines, brings all fourteen columns inside the page. */ html:root body .inventory-width-profile col{width:auto} html:root body .inventory-width-profile :is(th,td){min-width:0} html:root body .inventory-width-profile th{white-space:normal} html:root body .inventory-width-profile td.vehicle-column-vendor{overflow-wrap:normal} /* A table always sits on a solid surface, even over a dealer's background photo. */ html:root body .panel.table-wrap{background:var(--surface-strong)} /* No doubled gap where a flex page stacks the heading's margin on the next block's. */ html:root body main.page-shell:has(>.vehicle-action-bar)>.page-heading{margin-bottom:0} html:root body main.page-shell:has(>.vehicle-action-bar)>.table-wrap{margin-top:16px} /* Footnotes and guardrail notes: small print, not a grey box in the middle of the page. */ html:root body :is(.panel-footnote,main.page-shell>.rule-callout){max-width:72ch;padding:0;border:0;background:transparent;box-shadow:none;font-size:var(--fs-small);line-height:var(--lh-small);color:var(--muted)} html:root body :is(.panel-footnote,main.page-shell>.rule-callout) strong{color:var(--ink);font-weight:600} html:root body .dash-sys-tile>span{min-width:0} html:root body .dash-sys-tile strong{white-space:normal;overflow:visible;text-overflow:clip} html:root body #app .row-actions .button.compact:not(.primary):not(.danger){padding:0 8px} html:root body .dash-sys-do.button.compact{min-height:28px;padding:0 8px;font-size:var(--fs-micro);line-height:var(--lh-micro)} /* Toolbars and filter strips are open rows, not boxes - some dark-appearance rules still paint them. */ html:root body #app :is(.vehicle-filter-panel .filter-title-row,.vehicle-filter-grid,.vehicle-action-bar,.inventory-view-bar,.selection-strip){background:transparent;border-radius:0;box-shadow:none} html:root body #app :is(.vehicle-filter-panel,.customer-search-bar){background:transparent;box-shadow:none} html:root body #app main.page-shell>.rule-callout{background:transparent;box-shadow:none;border:0} html:root body .button.compact.pricing-detail-button{min-height:44px} /* The dark appearance paints these with !important (styles.css "dark patch"), so this file has to * answer in kind for its open rows to stay open in dark as well as light. */ html:root[data-theme="dark"] body #app :is(.selection-strip,.vehicle-action-bar,.panel-footnote,.dashboard-footer){background:transparent!important;border-color:transparent!important} html:root[data-theme="dark"] body #app :is(.vehicle-filter-panel .filter-title-row,.vehicle-filter-grid){background:transparent!important} html:root[data-theme="dark"] body #app :is(.vehicle-filter-panel,.customer-search-bar){background:transparent!important} html:root[data-theme="dark"] body #app main.page-shell>.rule-callout{background:transparent!important;border-color:transparent!important} /* Cells never paint; the row does (zebra, hover, selection). */ html:root body #app .data-table tbody tr td{background:transparent} html:root[data-theme="dark"] body #app .data-table tbody tr:is(:hover,.selected) td{background:transparent!important} html:root[data-theme="dark"] body #app .data-table{background:transparent!important} html:root[data-theme="dark"] body #app .data-table th{background:var(--L-th-bg,transparent)!important;border-color:var(--L-rule)!important;border-bottom-color:var(--L-th-rule-color,var(--L-rule))!important} html:root[data-theme="dark"] body #app .data-table td{background:transparent!important;border-color:var(--L-rule)!important} /* Below 1280px the header gives the breadcrumb room: the search keeps its icon and label, the * shortcut hint and the account's name and role step aside (the avatar still opens the menu). */ @media (max-width:1279px){ html:root body .header-search-button{min-width:0} html:root body .header-search-button kbd, html:root body .account-button-copy{display:none} } html:root body .pricing-detail-button b{font-weight:700} /* CORNERS: one 2px corner on every card, button and field (radii are exempt from the spacing rhythm), * including the ones a preset or a component rounds further. Pieces that butt edge to edge - the ruled * figure strip, the housekeeping strip, the lot grid, segmented switches, the step rail - stay square, * because a rounded corner where two boxes meet leaves a notch. */ html:root body :is(.button,.panel,.info-card,input,select,textarea,.sw-veh-card,.sale-wizard,.sw-tender,.sw-choice,.status,.veh-thumb,.header-search-button,.manager-attention-button,.account-menu-button,.header-help-button,.sidebar-link,.dash-insight,.notice){border-radius:var(--L-radius)} html:root body :is(.dash-tile,.dash-car,.dash-sys-tile,.quick-card,.inv-views,.inv-view,.rf-signal,.sw-rail-step button,.financing-type-segmented,.sw-finance-choice){border-radius:0} html:root body .dms-ico{stroke-linecap:square;stroke-linejoin:miter} /* ---- sidebar: the preset's own rail, square, the active page a solid accent block ---- */ html:root body .dms-sidebar{box-shadow:none;border-right:1px solid color-mix(in srgb,var(--sidebar-ink) 14%,transparent)} html:root body .sidebar-brand{border-bottom:1px solid color-mix(in srgb,var(--sidebar-ink) 14%,transparent)} html:root body .sidebar-nav-group h2 .sidebar-group-toggle{letter-spacing:.1em;font-weight:700} html:root body .sidebar-link.active{color:var(--accent-ink);background:var(--accent);box-shadow:none;border-radius:var(--L-radius);font-weight:600} html:root body .sidebar-link.active .sidebar-link-icon{color:var(--accent-ink)} /* ---- header: flat, a single rule underneath ---- */ html:root body .desktop-app-header{border-bottom:1px solid var(--L-rule)} html:root body .header-search-button{border:1px solid var(--L-rule-ctl);background:var(--surface-strong)} /* ---- page heading: an uppercase title standing on a heavy rule ---- */ html:root body :is(.page-heading,.dashboard-heading){padding-bottom:16px;border-bottom:var(--L-heavy)} html:root body .sw-page-heading{padding-bottom:0;border-bottom:0} /* The car card heading keeps its own centred column, so it lines up with the wizard card under it * (the heading margin above resets margin-left/right to 0). */ html:root body .sw-page-heading{margin-left:auto;margin-right:auto} /* ---- buttons: flat rectangles; the secondary ones an outline, never a bevel ---- */ html:root body .button:not(.primary):not(.danger):not(.danger-outline){background:var(--surface-strong);border:1px solid var(--L-rule-ctl);box-shadow:none} html:root body .button:not(.primary):not(.danger):not(.danger-outline):hover:not(:disabled){border-color:var(--ink);background:var(--surface-strong)} html:root body .button.primary{text-transform:none} /* ---- panels: a hairline box, no shadow; tables inside it carry the heavy rule ---- */ html:root body .panel.table-wrap{border:0} html:root body .data-table th{color:var(--ink);font-weight:700;letter-spacing:.06em;text-transform:uppercase} /* No stripes: the hairline between rows already separates them, and a stripe competed with the one * thing that should light up - the row under the pointer. */ html:root body .data-table tbody tr:hover{background:color-mix(in srgb,var(--ink) 6%,transparent)} html:root body .data-table tbody tr.selected{background:color-mix(in srgb,var(--accent) 14%,transparent)} html:root body .data-table tbody tr.selected td:first-child{box-shadow:inset 4px 0 0 var(--accent)} html:root body .data-table .link-btn{color:var(--ink);font-weight:700} /* STATUS CHIPS: solid and bold, so a column of them reads at a glance - green for a car you can sell * or a finished job, red for sold, amber for something half done, the preset's accent for everything * else (In Inventory, Pending...), and an outline for "not started". Every fill carries white or the * accent's own ink at 4.5:1 or better; --red-solid is the app's fill red that stays dark in dark. */ html:root body .data-table :is(.status,.sale-state,.forms-state,.severity){ display:inline-flex;align-items:center;min-width:0;padding:2px 6px; font-size:var(--fs-micro);line-height:var(--lh-micro);font-weight:700;letter-spacing:.02em;white-space:nowrap;text-transform:uppercase; color:var(--accent-ink);background:var(--accent);border:1px solid transparent; } html:root body .data-table :is(.status.available,.forms-state.complete,.sale-state.active,.severity.low){color:#fff;background:#15803d} html:root body .data-table :is(.status.sold,.status.error,.severity.high){color:#fff;background:var(--red-solid,#c9363e)} html:root body .data-table :is(.status.attention,.status.warning,.status.suspended,.forms-state.partial,.sale-state.draft,.severity.medium){color:#fff;background:#b45309} html:root body .data-table :is(.forms-state.not-started,.status.archived){color:var(--ink);background:transparent;border-color:var(--L-rule-ctl)} /* The dark appearance paints every status with !important (styles.css), so the chips answer in kind. */ html:root[data-theme="dark"] body .data-table :is(.status,.sale-state,.forms-state,.severity){color:var(--accent-ink)!important;background:var(--accent)!important;border-color:transparent!important} html:root[data-theme="dark"] body .data-table :is(.status.available,.forms-state.complete,.sale-state.active,.severity.low){color:#fff!important;background:#15803d!important} html:root[data-theme="dark"] body .data-table :is(.status.sold,.status.error,.severity.high){color:#fff!important;background:var(--red-solid,#c9363e)!important} html:root[data-theme="dark"] body .data-table :is(.status.attention,.status.warning,.status.suspended,.forms-state.partial,.sale-state.draft,.severity.medium){color:#fff!important;background:#b45309!important} html:root[data-theme="dark"] body .data-table :is(.forms-state.not-started,.status.archived){color:var(--ink)!important;background:transparent!important;border-color:var(--L-rule-ctl)!important} html:root body .veh-thumb{width:52px;height:36px} /* ---- inventory: filters in one ruled bar, tools in one ruled row ---- */ html:root body .vehicle-filter-panel{padding:12px 0;border-bottom:1px solid var(--L-rule)} html:root body .vehicle-filter-panel .filter-title-row strong{color:var(--ink);font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:var(--fs-micro);line-height:var(--lh-micro)} html:root body #app .vehicle-action-bar .button:not(.primary):not(.danger){border:0;border-right:1px solid var(--L-rule);min-height:32px;padding:0 10px;background:transparent} html:root body #app .vehicle-action-bar .button:not(.primary):not(.danger):hover:not(:disabled){background:color-mix(in srgb,var(--ink) 7%,transparent);border-color:var(--L-rule)} html:root body .vehicle-action-bar .action-divider{display:none} html:root body .inv-views{gap:0} html:root body .inv-view{border:1px solid var(--L-rule-ctl)} html:root body .inv-view+.inv-view{border-left:0} html:root body .inv-view.active{background:var(--ink);color:var(--surface-strong);border-color:var(--ink);box-shadow:none} html:root body #app .row-actions .button.compact:not(.primary):not(.danger){border:0} /* The inventory and sales tables carry eleven to fourteen columns; both are set one step smaller so * every column fits the page instead of scrolling the table sideways. */ html:root body :is(.vehicle-master-table,.sales-info-table){font-size:var(--fs-small)} html:root body :is(.vehicle-master-table,.sales-info-table) :is(th,td){padding-left:6px;padding-right:6px} html:root body :is(.vehicle-master-table,.sales-info-table) :is(th,td):first-child{padding-left:12px} html:root body :is(.vehicle-master-table,.sales-info-table) :is(th,td):last-child{padding-right:12px} html:root body #app .vehicle-action-bar{gap:0} html:root body :is(.vehicle-master-table,.sales-info-table) .link-btn{font-size:inherit;line-height:inherit} html:root body :is(.vehicle-master-table,.sales-info-table) .mono{font-size:var(--fs-micro);line-height:var(--lh-micro)} /* A name breaks between words, never inside one ("Tradei / n"); the VIN is set small enough to need no floor. */ html:root body .sales-info-table td:is(.sales-column-buyer,.sales-column-vehicle){overflow-wrap:normal} html:root body .sales-info-table :is(th,td).sales-column-vin{min-width:0} html:root body .vehicle-master-table .veh-thumb{width:44px;height:32px} /* Fourteen uppercase headers: no tracking, so the column set fits at the Large text size too. */ html:root body .data-table.vehicle-master-table th{letter-spacing:0} /* One step down from the table size the text setting picks (the app pins that size with !important). */ html:root body :is(.vehicle-master-table,.sales-info-table) td{font-size:var(--fs-small)!important;line-height:var(--lh-small)} html:root body .data-table th{letter-spacing:.02em} /* ---- dashboard: figures on a heavy rule, housekeeping as a ruled strip ---- */ html:root body .dash-tiles{gap:0;border-bottom:1px solid var(--L-rule)} html:root body .dash-tile{padding:20px 24px 20px 0;margin:0;background:transparent;border:0;border-right:1px solid var(--L-rule);box-shadow:none} html:root body .dash-tile+.dash-tile{padding-left:24px} html:root body .dash-tile:last-child{border-right:0} /* When the figures wrap (the strip is narrower than four 240px columns: a phone, a small window, a * big text size) a rule on the right of each tile and an indent on every tile but the first no longer * line up. There the figures stack on hairlines instead, all flush with the page title. */ html:root body .dash-tiles{container-type:inline-size} @container (max-width:959px){ html:root body .dash-tile,html:root body .dash-tile+.dash-tile{padding:16px 16px 16px 0;border-right:0;border-bottom:1px solid var(--L-rule)} html:root body .dash-tile:last-child{border-bottom:0} } html:root body .dash-tile-label{color:var(--ink);font-weight:700} html:root body .dash-tile-value{font-size:var(--fs-display);line-height:var(--lh-display);letter-spacing:-.01em} html:root body .dash-system{padding:0;background:transparent;border:0;box-shadow:none} html:root body .dash-system-head{margin:0 0 8px;color:var(--ink);font-weight:700;text-transform:uppercase} html:root body .dash-sys-row{gap:0;border:1px solid var(--L-rule)} html:root body .dash-sys-tile{padding:12px 16px;background:var(--surface-strong);border:0;border-right:1px solid var(--L-rule);box-shadow:none} html:root body .dash-sys-tile:last-child{border-right:0} html:root body .dash-sys-tile.has-work{box-shadow:inset 0 3px 0 var(--amber-solid,#b45309)} html:root body .dash-insight{padding:12px 16px;border:0;border-left:4px solid var(--amber-solid,#b45309);background:color-mix(in srgb,var(--amber-solid,#b45309) 8%,var(--surface-strong));box-shadow:none} html:root body .dash-insight p{font-size:var(--fs-body);line-height:var(--lh-body);font-weight:600} html:root body .dash-lot-head{padding-bottom:8px;border-bottom:var(--L-heavy)} html:root body .dash-lot-head h2{text-transform:uppercase;letter-spacing:.02em} html:root body .dash-car-grid{gap:0;border-left:1px solid var(--L-rule)} html:root body .dash-car{border:0;border-right:1px solid var(--L-rule);border-bottom:1px solid var(--L-rule);box-shadow:none;background:var(--surface-strong)} html:root body .dash-car-photo{border-radius:0} html:root body .dash-car-sub{font-weight:700;color:var(--ink)} html:root body .role-focus{padding:0;border:0;background:transparent;box-shadow:none} html:root body .rf-head{padding-bottom:8px;border-bottom:var(--L-heavy)} html:root body .rf-role{border-radius:0;font-size:var(--fs-micro);line-height:var(--lh-micro);font-weight:700;letter-spacing:.06em;text-transform:uppercase} html:root body .rf-lead{text-transform:uppercase;letter-spacing:.02em} html:root body .rf-signals{gap:0;background:transparent;border:0;box-shadow:none} html:root body .rf-signal{padding:12px 0;margin:0;background:transparent;border:0;border-bottom:1px solid var(--L-rule);box-shadow:none} html:root body .quick-card{min-height:0;padding:12px 16px;border:0;border-bottom:1px solid var(--L-rule);background:transparent;box-shadow:none} /* ---- the sale wizard: ruled sections, a solid step rail, the total in a black box ---- */ html:root body .sale-wizard{border:1px solid var(--L-rule);box-shadow:none;background:var(--surface-strong)} html:root body .sw-veh-card{border:1px solid var(--L-rule);border-top:var(--L-heavy);background:var(--surface-strong)} html:root body .sw-veh-facts h1{text-transform:uppercase;letter-spacing:.02em} html:root body .sw-head{padding-bottom:12px;border-bottom:var(--L-heavy)} html:root body .sw-head h2{text-transform:uppercase;letter-spacing:.02em} html:root body .sw-rail{gap:0;border:1px solid var(--L-rule)} html:root body .sw-rail-step button{min-height:48px;border:0;border-right:1px solid var(--L-rule);background:var(--surface-strong);box-shadow:none} html:root body .sw-rail-step:last-child button{border-right:0} html:root body .sw-rail-step.sw-current button{background:var(--ink);color:var(--surface-strong);box-shadow:none} html:root body .sw-rail-step.sw-current .sw-rail-num{background:var(--surface-strong);color:var(--ink)} html:root body .sw-rail-num{border-radius:0} html:root body .sw-money-block{padding:0 0 20px;border:0;border-bottom:1px solid var(--L-rule);background:transparent;box-shadow:none} html:root body .sw-money-block>h3{padding-bottom:8px;margin-bottom:12px;border-bottom:var(--L-heavy);text-transform:uppercase;letter-spacing:.04em;font-size:var(--fs-body);line-height:var(--lh-body)} html:root body .sw-otd-summary{padding:16px 20px;border:0;background:var(--ink);color:var(--surface-strong)} html:root body .sw-otd-summary :is(dt,dd){color:var(--surface-strong)} html:root body .sw-otd-summary dt{color:color-mix(in srgb,var(--surface-strong) 72%,var(--ink))} html:root body .sw-otd-summary .sw-otd-total{padding-top:8px;border-top:1px solid color-mix(in srgb,var(--surface-strong) 30%,transparent)} /* Not uppercased: text-transform changes innerText, and the walk (and anything else that reads the * total off the page) matches "Total out the door" as written. Measured: every sale flow failed on it. */ html:root body .sw-otd-summary .sw-otd-total dt{color:var(--surface-strong);font-size:var(--fs-lead);line-height:var(--lh-lead)} html:root body .sw-tender{padding:8px 12px;border:1px solid var(--L-rule);background:var(--surface-strong);box-shadow:none} /* A payment tile we hold no artwork for shows its name, which takes two lines ("Cash App"); the tile * grows to hold them instead of cutting the second line off (measured: 8px hidden). Artwork tiles keep * their 22px. */ html:root body .sw-tender .pay-mark{height:auto;min-height:22px} /* The "Example" caption on a stand-in photo is a small chip in the corner, not a band glued to three * edges of the tile, and the image is a block so it leaves no descender gap under itself (measured: * 6px of hidden overflow in every tile). */ html:root body .sw-veh-photo-stock img{display:block} html:root body .sw-veh-photo-tag{left:8px;right:auto;bottom:8px;padding:0 6px} html:root body .sw-choice>*{border-radius:0} html:root body .sw-actions{padding-top:16px;border-top:var(--L-heavy)} /* Inside the page, structure is square (a section, a strip, a table, a joined control) - including * shapes a component draws as a stadium or a circle - and the things a dealer reads as one object * (a card, a button, a field, a status, the out-the-door box) carry the one 2px corner. The #app * id is what lets both answer the component stylesheets, which round far more. */ html:root body #app :is(div,section,dl,details,summary,label,span,button,a,article,aside,fieldset,table,textarea,select,input:not([type=checkbox]):not([type=radio]),img){border-radius:0} html:root body #app :is(.button,.panel,.info-card,.modal-card,input:not([type=checkbox]):not([type=radio]),select,textarea,.sw-veh-card,.sale-wizard,.sw-otd-summary,.sw-tender,.sw-choice>*,.sw-outside-finance,.notice,.dash-insight,.status,.sale-state,.forms-state,.severity,.veh-thumb){border-radius:var(--L-radius)} html:root body .sw-outside-finance{border:1px solid var(--L-rule);background:var(--surface-strong)} html:root body .sw-leave{border:0;background:transparent;box-shadow:none;text-decoration:underline} /* Marketing's car list: a long listing title ("2016 AUDI Q5 2.0T PREMIUM SPORT UTILITY 4D") wraps * onto a second line instead of being cut off with no way to read the rest (the walk measured it * 106px wider than its 245px column at 1180 and 1440). */ html:root body .mk-row-main strong{white-space:normal;text-overflow:clip;overflow-wrap:normal}