/* ============================================================ Space Auto DS — Canonical component styles Re-derived 1:1 from the Flutter theme (app_themes.dart) + widget sources. Pairs with colors_and_type.css (dark primary). State classes let specimens force a state: :hover (live) · .is-hover · .is-pressed · .is-disabled · .is-selected · .is-focused .on = persistent selected/active state for nav & toggles (vs transient .is-*) ============================================================ */ /* ---------- BUTTONS — CustomButton / StatefulCustomButton ---------- custom_button.dart · ButtonTheme (space_theme_data.dart). Base: padding s12, radius r5, text mediumAction. Disabled = onPressed==null. */ .sb-btn{ font:var(--t-action);border:1px solid transparent;border-radius:var(--r-5); padding:8px 12px;line-height:1;display:inline-flex;align-items:center;justify-content:center;gap:8px; cursor:pointer;white-space:nowrap;background:transparent;color:var(--fg);transition:background .12s,color .12s,border-color .12s; } .sb-btn .ibox{width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;font-size:12px;flex:none;} /* icon cell — IconBoxStyle(box 24, icon 12) per app_themes; centers within the fixed button height */ .sb-btn:disabled,.sb-btn.is-disabled{cursor:default;} /* primary */ .sb-btn--primary{background:var(--blue-01);color:var(--white);} /* blue-fill → inverted fg = systemWhite (var(--white)) */ .sb-btn--primary:hover,.sb-btn--primary.is-hover{background:var(--blue-04);} .sb-btn--primary.is-disabled{background:var(--gray-04);color:var(--global-white);} /* secondary */ .sb-btn--secondary{background:var(--gray-00);color:var(--white);} .sb-btn--secondary:hover,.sb-btn--secondary.is-hover{background:var(--gray-01);} .sb-btn--secondary.is-disabled{background:var(--gray-04);color:var(--white);} /* standard (StandardButtonStyle) — filled gray-00, inverts on hover/pressed */ .sb-btn--standard{background:var(--gray-00);color:var(--white);border-color:transparent;} .sb-btn--standard:hover,.sb-btn--standard.is-hover,.sb-btn--standard.is-pressed{background:var(--white);color:var(--gray-00);border:1px solid var(--gray-00);} .sb-btn--standard.is-disabled{background:var(--gray-05);color:var(--white);border:2px solid var(--gray-06);} /* focus rings (StandardButtonStyle / SecondaryButtonStyle focused = 4px blue-01; no layout shift) */ .sb-btn--standard.is-focused,.sb-btn--secondary.is-focused{box-shadow:0 0 0 4px var(--blue-01);} /* tertiary */ .sb-btn--tertiary{background:var(--gray-06);color:var(--gray-00);} .sb-btn--tertiary:hover,.sb-btn--tertiary.is-hover,.sb-btn--tertiary.is-pressed{background:var(--gray-05);} .sb-btn--tertiary.is-disabled{color:var(--gray-04);} /* destructive */ .sb-btn--destructive{background:var(--red-01);color:var(--global-white);} .sb-btn--destructive:hover,.sb-btn--destructive.is-hover,.sb-btn--destructive.is-pressed{background:var(--red-02);color:var(--red-01);} .sb-btn--destructive.is-disabled{background:var(--gray-04);color:var(--global-white);} /* green (ColoredCustomButtonStyle green) — the check-in confirm (R3a; supersedes the S1-6b secondary confirm) */ .sb-btn--green{background:var(--green-01);color:var(--white);} .sb-btn--green:hover,.sb-btn--green.is-hover,.sb-btn--green.is-pressed{background:var(--green-02);color:var(--green-01);} .sb-btn--green.is-disabled{background:var(--gray-04);color:var(--global-white);} /* destructiveTertiary */ .sb-btn--destructive-tertiary{background:var(--red-02);color:var(--red-01);} .sb-btn--destructive-tertiary:hover,.sb-btn--destructive-tertiary.is-hover,.sb-btn--destructive-tertiary.is-pressed{border-color:var(--red-01);} .sb-btn--destructive-tertiary.is-disabled{color:var(--gray-04);} /* textIcon — boldTiny, pad h-s8 v-s4 */ .sb-btn--text-icon{background:transparent;color:var(--blue-01);font:var(--t-tiny-bold);padding:4px 8px;} .sb-btn--text-icon:hover,.sb-btn--text-icon.is-hover,.sb-btn--text-icon.is-pressed,.sb-btn--text-icon.is-selected,.sb-btn--text-icon.is-focused{color:var(--gray-00);} .sb-btn--text-icon.is-disabled{color:var(--gray-03);} /* text — mediumTiny/gray-02, r3, pad v-s8 */ .sb-btn--text{background:transparent;color:var(--black);font:var(--t-tiny);border-radius:var(--r-3);padding:8px;} .sb-btn--text:hover,.sb-btn--text.is-hover,.sb-btn--text.is-pressed{background:var(--gray-06);color:var(--blue-04);} .sb-btn--text.is-selected{background:var(--blue-03);color:var(--blue-04);} .sb-btn--text.is-focused{color:var(--gray-04);} .sb-btn--text.is-disabled{color:var(--gray-03);} /* counterTextIcon — gray-07, pad right-s12, icon left */ .sb-btn--counter{background:var(--gray-07);color:var(--gray-00);font:var(--t-tiny);padding:6px 12px 6px 6px;} .sb-btn--counter:hover,.sb-btn--counter.is-hover{background:var(--gray-06);} .sb-btn--counter.is-pressed,.sb-btn--counter.is-selected{background:var(--blue-03);color:var(--blue-01);} .sb-btn--counter.is-disabled{color:var(--gray-05);} /* selectTrim — text only, blue-01, icon right */ .sb-btn--select-trim{background:transparent;color:var(--blue-01);font:var(--t-tiny);padding:4px 6px;} .sb-btn--select-trim.is-disabled{color:var(--gray-03);} /* linkText — blue-01, align left */ .sb-btn--link{background:transparent;color:var(--blue-01);font:var(--t-tiny);padding:4px 0;justify-content:flex-start;} .sb-btn--link:hover,.sb-btn--link.is-hover,.sb-btn--link.is-pressed,.sb-btn--link.is-selected{color:var(--blue-04);} .sb-btn--link.is-disabled{color:var(--gray-04);} /* quickAction — gray-06, icon box24·12, pad l-s4 r-s8 t/b-s4, align left */ .sb-btn--quick-action{background:var(--gray-06);color:var(--gray-00);font:var(--t-tiny);padding:4px 8px 4px 4px;justify-content:flex-start;} .sb-btn--quick-action:hover,.sb-btn--quick-action.is-hover,.sb-btn--quick-action.is-pressed{background:var(--gray-05);} .sb-btn--quick-action.is-disabled{color:var(--gray-04);} /* dropdown — white +1px gray-06, icon right */ .sb-btn--dropdown{background:var(--white);color:var(--gray-00);border-color:var(--gray-06);font:var(--t-tiny);padding:6px 6px 6px 4px;} .sb-btn--dropdown:hover,.sb-btn--dropdown.is-hover{background:var(--gray-06);border-color:transparent;} .sb-btn--dropdown.is-selected{background:var(--blue-02);color:var(--blue-01);border-color:transparent;} .sb-btn--dropdown.is-disabled{color:var(--gray-05);border-color:transparent;} /* green (ColoredCustomButtonStyle main=green-01 aux=green-02) → filled accent bg, tint content; inverts on hover */ .sb-btn--green{background:var(--green-01);color:var(--green-02);} .sb-btn--green:hover,.sb-btn--green.is-hover,.sb-btn--green.is-pressed{background:var(--green-02);color:var(--green-01);} .sb-btn--green.is-disabled{background:var(--gray-04);color:var(--green-02);} /* orange (INVERTED: main=orange-02 aux=orange-01) → tint bg, accent content; inverts on hover */ .sb-btn--orange{background:var(--orange-02);color:var(--orange-01);} .sb-btn--orange:hover,.sb-btn--orange.is-hover,.sb-btn--orange.is-pressed{background:var(--orange-01);color:var(--orange-02);} .sb-btn--orange.is-disabled{background:var(--gray-04);color:var(--orange-01);} /* audiences — dashed gray-06 border, transparent, blue-01, boldTiny */ .sb-btn--audiences{background:transparent;color:var(--blue-01);font:var(--t-tiny-bold);border:1px dashed var(--gray-06);} .sb-btn--audiences:hover,.sb-btn--audiences.is-hover,.sb-btn--audiences.is-pressed{background:var(--gray-07);border-style:solid;border-color:var(--gray-06);} .sb-btn--audiences.is-disabled{color:var(--gray-04);} .sb-btn--audiences.is-selected{background:var(--blue-03);} /* chip (ChipCustomButtonStyle) — blue-02 tint + blue-01 border, r7 */ .sb-btn--chip{background:var(--blue-02);color:var(--blue-01);font:var(--t-tiny);border:1px solid var(--blue-01);border-radius:var(--r-7);padding:6px 12px;} .sb-btn--chip:hover,.sb-btn--chip.is-hover,.sb-btn--chip.is-pressed{background:var(--gray-06);color:var(--blue-01);} .sb-btn--chip.is-selected{background:var(--blue-02);color:var(--blue-01);} /* quickFilter — gray-06, selected blue-02+blue-01 border, r7 · mediumTiny (NOT bold) · tall/square (s12 pad) · superseded by .sb-msel/.sb-mselbar */ .sb-btn--quick-filter{background:var(--gray-06);color:var(--gray-00);font:var(--t-tiny);border-radius:var(--r-7);padding:8px 12px;} .sb-btn--quick-filter:hover,.sb-btn--quick-filter.is-hover,.sb-btn--quick-filter.is-pressed,.sb-btn--quick-filter.is-selected{background:var(--blue-02);color:var(--blue-01);border-color:var(--blue-01);} .sb-btn--quick-filter.is-disabled{background:var(--white);color:var(--gray-05);border-color:var(--gray-06);} /* ---------- MULTIUSE SELECTOR — .sb-msel (compact 32px nav/filter chip; SUPERSEDES .sb-btn--quick-filter) ---------- r5, height 32. A centered 12px icon in a 32px icon cell. Icon-only = 32×32; labeled = [icon cell] + label + right pad s8 (the icon cell is the left inset). default gray-06/gray-00 · selected blue-03/blue-01+border · disabled gray-07/gray-05. Date chips: see the .sb-daterange atom. */ .sb-msel{display:inline-flex;align-items:center;height:32px;box-sizing:border-box;border:1px solid transparent;border-radius:var(--r-5);background:var(--gray-06);color:var(--gray-00);cursor:pointer;padding:0;white-space:nowrap;} .sb-msel .mi{width:32px;height:32px;flex:none;display:inline-flex;align-items:center;justify-content:center;font-size:12px;} /* 12px glyph in a 32px cell */ .sb-msel .ml{font:var(--t-action);padding-right:8px;} /* labeled = mediumAction 14/500, right pad s8 */ .sb-msel.on{background:var(--blue-03);color:var(--blue-01);border-color:var(--blue-01);} .sb-msel.is-disabled{background:var(--gray-07);color:var(--gray-05);cursor:default;} /* ---------- ATOM: Date-range indicator — .sb-daterange (Y1) ---------- The header date-range indicator — part of the new header element family, reused across Views experiences (Customers / Showroom / Inbox / Notifications / Inventory pageheads + mobile headers). A lesser-hierarchy clickable INDICATOR, not a chip: transparent bg, 12px calendar glyph (.di) + mediumAction label (.dl), both blue-01. NO angle-down caret — canonical form is icon + label only; clicking opens the standard date-range picker (comp-datepicker). 32px row height so it sits in pageheads/mselbars. SUPERSEDES the hand-rolled .sb-msel--link date chips. */ .sb-daterange{display:inline-flex;align-items:center;gap:6px;height:32px;box-sizing:border-box;padding:0 8px;background:transparent;border:none;border-radius:var(--r-5);color:var(--blue-01);font:var(--t-action);cursor:pointer;white-space:nowrap;} .sb-daterange .di{font-size:12px;flex:none;} .sb-daterange .dl{min-width:0;overflow:hidden;text-overflow:ellipsis;} .sb-daterange.is-disabled{color:var(--gray-04);cursor:default;} .sb-daterange--icon{width:32px;padding:0;justify-content:center;gap:0;} /* mobile collapse: icon-only 32×32 (the responsive rule — secondary pagehead actions collapse to icons) */ /* .sb-msel--link — SUPERSEDED by the .sb-daterange atom (Y1); all date-chip usages migrated. */ .sb-msel--primary{background:var(--blue-01);color:var(--white);} /* filled CTA variant (Add · Mark All Read) — inverted fg = systemWhite var(--white) */ .sb-msel .mc{width:12px;flex:none;display:inline-flex;align-items:center;justify-content:center;font-size:12px;padding-right:8px;box-sizing:content-box;} /* trailing angle cell (12px + 8px right pad) — anatomy mi? + ml + mc */ /* quick-filter bar — composes the chips */ .sb-mselbar{display:flex;align-items:center;gap:8px;background:var(--gray-07);padding:8px 16px;border-bottom:1px solid var(--gray-06);} .sb-mselbar .mdiv{width:1px;height:30px;background:var(--gray-06);flex:none;} /* ---------- MOBILE NAV CHROME — shared header + bottom nav (promoted from specimens; Z1 Figma metrics) ---------- .sb-mh-status = OS status bar · .sb-mh-tabs = SECTION TABS row (the mobile form of the desktop topbar tabs) · .sb-bn-* = bottom nav. The whole header region (status + tabs + pagehead + quick-filter bar) reads as ONE gray-07 band ending in a single gray-06 hairline; the content surface below = var(--white). */ /* OS status bar */ .sb-mh-status{height:44px;display:flex;align-items:center;justify-content:space-between;padding:0 20px;background:var(--gray-07);} .sb-mh-status .clock{font:600 14px/1 var(--font-sans);color:var(--gray-00);} /* intentional off-ramp micro-text (status clock — not a type-scale role) */ .sb-mh-status .sysi{display:flex;align-items:center;gap:6px;color:var(--gray-00);font-size:13px;} /* section tabs row — Figma: 16px sides, 16 top / 8 bottom, equal-flex 30px r7 tabs; labels SemiBold 13/16 (t-tiny + weight 600 — composes to exactly 13/16; NOT a larger ramp); active = gray-06 chip + gray-00. The hairline drops when a pagehead/mselbar row continues the band (single hairline ends the band). */ .sb-mh-tabs{padding:16px 16px 8px;border-bottom:1px solid var(--gray-06);background:var(--gray-07);} .sb-mh-tabs:has(+ .sb-mh-titlebar),.sb-mh-tabs:has(+ .sb-mselbar){border-bottom:none;} .sb-mh-tabs .sb-seg{display:flex;width:100%;height:30px;padding:0;gap:2px;} .sb-mh-tabs .sb-seg button{flex:1;padding:0;height:30px;border-radius:var(--r-7);font:var(--t-tiny);font-weight:600;} /* modifier of .sb-pagehead — mobile titlebar: gap 8 / pad 8×16 / hairline; the TITLE carries flex:1 (no .spring needed — the inverted flex:none trap is dead) */ .sb-mh-titlebar{display:flex;align-items:center;gap:8px;padding:8px 16px;border-bottom:1px solid var(--gray-06);background:var(--gray-07);font-family:var(--font-sans);} .sb-mh-titlebar:has(+ .sb-mselbar){border-bottom:none;} .sb-mh-titlebar .tb-title{font:var(--t-title);color:var(--gray-00);flex:1;min-width:0;} .sb-mh-titlebar .tb-count{font:var(--t-paragraph);color:var(--gray-03);margin-left:4px;} /* optional count beside the title (Y2 mobile shell) */ .sb-mh-titlebar>.sb-msel{flex:none;} /* bottom nav — pinned container + search row */ .sb-bn-bar{background:var(--gray-07);border-top:1px solid var(--gray-06);} /* full-width, screen-pinned container */ .sb-bn-search{padding:8px 16px;} .sb-bn-field{display:flex;align-items:center;height:32px;background:var(--gray-06);border:1px solid var(--gray-05);border-radius:var(--r-7);overflow:hidden;} /* bottom-nav/topbar search affordance (static placeholder, opens search) — gray-06 fill + 1px gray-05 border, vs .sb-search's borderless spec */ .sb-bn-field .si{width:32px;flex:none;display:inline-flex;align-items:center;justify-content:center;font-size:12px;color:var(--gray-04);} .sb-bn-field .sp{font:var(--t-paragraph);color:var(--gray-04);} /* bottom nav — nav row */ .sb-bn-nav{height:72px;padding:0 16px;display:flex;justify-content:space-between;align-items:center;} .sb-bn-item{height:48px;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;background:none;border:none;cursor:pointer;font-size:20px;color:var(--gray-05);position:relative;} .sb-bn-item.on{color:var(--gray-00);} .sb-bn-item .badge{position:absolute;top:2px;right:calc(50% - 20px);background:var(--red-01);color:var(--global-white);font:500 10px/1 var(--font-sans);border-radius:var(--radius-pill);padding:2px 3px;min-width:8px;text-align:center;border:3px solid var(--gray-07);box-sizing:content-box;} /* font ≈ t-indicator but lh:1 (not 1.2) for a single-line count chip; 3px gray-07 ring intentionally coupled to the .sb-bn-bar bg (page-bg halo) */ .sb-bn-avatar{position:relative;width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;} .sb-bn-avatar .pic{width:18px;height:18px;border-radius:50%;background:var(--gray-06);overflow:hidden;display:flex;align-items:center;justify-content:center;font:600 8px/1 var(--font-sans);color:var(--gray-02);} .sb-bn-item.on .sb-bn-avatar .pic{box-shadow:0 0 0 1px var(--blue-01);} /* blue ring = SELECTION cue — only when the avatar tab is the active nav item */ /* intentional off-ramp micro-text (8px avatar initials — below the type scale) */ .sb-bn-avatar .online{position:absolute;top:0;right:0;width:5px;height:5px;border-radius:50%;background:var(--green-01);border:1.5px solid var(--gray-07);} /* TOP-RIGHT online dot (atomic proportional sizing) */ /* ---------- MOBILE BOTTOM SHEET — .sb-sheet (promoted from the Views sheet) ---------- Bottom-anchored sheet over a scrim. Scrim = rgba(0,0,0,.5): NO byte-equal token (sits between --overlay-trans-40 .40 and --overlay-trans-64 .64) → kept literal to preserve ZERO visual change. Shadow 0 -8px 32px rgba(0,0,0,.35): no byte-equal shadow token → kept literal + comment. */ .sb-sheet-scrim{position:absolute;inset:0;background:rgba(0,0,0,.5);} /* no exact overlay token (.40/.64 flank .50); literal to stay render-identical */ .sb-sheet{position:absolute;left:0;right:0;bottom:0;background:var(--gray-07);border-radius:16px 16px 0 0;box-shadow:0 -8px 32px rgba(0,0,0,.35);display:flex;flex-direction:column;} /* 16px top radius = off r-scale: sheet exception; shadow has no byte-equal token (kept literal) */ .sb-sheet-grab{width:36px;height:4px;border-radius:var(--radius-pill);background:var(--gray-05);margin:8px auto;flex:none;} /* DISTINCT affordance: 36×4 PILL = the Views bottom sheet (vs the 48×4 r2 full-screen-sheet grab) */ .sb-sheet-title{display:flex;align-items:center;padding:8px 16px 4px;flex:none;} .sb-sheet-title .t{font:var(--t-title);color:var(--gray-00);flex:1;} .sb-sheet-title .x,.sb-shdlg-panel .mh .x{width:32px;height:32px;border-radius:var(--r-5);background:transparent;border:none;color:var(--gray-02);display:inline-flex;align-items:center;justify-content:center;font-size:14px;cursor:pointer;} /* ONE sheet/panel close-X (NOT folded into .sb-iconbtn--primary: that is gray-00; this is gray-02) */ /* ---------- VIEWS NAV — .sb-viewlist + .sb-viewitem (secondary tab list: icon + label + count) ---------- Powers the desktop Views column and the mobile Views bottom-sheet. Reuses .sb-tag--{color} count chips. */ /* ---------- VIEWS NAV — .sb-viewlist + .sb-viewitem (secondary tab list: icon + label + count) ---------- Powers the desktop Views column and the mobile Views bottom-sheet. Reuses .sb-tag--{color} count chips. NAV METRICS (design): every selectable cell = 32px tall; breathing room comes from the 8px GAP between cells, not cell height. Selected chip = gray-07 on the var(--white) nav surface. */ .sb-viewlist{display:flex;flex-direction:column;gap:8px;padding:8px;} .sb-viewitem{display:flex;align-items:center;gap:10px;width:100%;height:32px;border-radius:var(--r-5);padding:0 12px;cursor:pointer;box-sizing:border-box;background:transparent;border:none;text-align:left;} .sb-viewitem:hover,.sb-viewitem.is-hover{background:var(--gray-07);} .sb-viewitem.on{background:var(--gray-07);} .sb-viewitem .vi-ico{font-size:16px;width:20px;text-align:center;flex:none;} /* colored per view */ .sb-viewitem .vi-label{flex:1;min-width:0;font:var(--t-paragraph);color:var(--gray-00);} .sb-viewitem .vi-count{flex:none;} /* a .sb-tag--{color} chip */ .sb-viewitem .vi-count--plain{font:var(--t-tiny);color:var(--gray-00);} /* "All" row = plain gray-00 text */ .sb-viewitem .vi-count--alert{font:var(--t-tiny);color:var(--red-01);} /* alert count (e.g. Notifications) = red-01 text */ /* sheet exception: the sheet surface IS gray-07, so its selected/hover chips step to gray-06 to stay visible */ .sb-sheet .sb-viewitem.on,.sb-sheet .sb-viewitem:hover,.sb-sheet .sb-viewitem.is-hover{background:var(--gray-06);} /* ---------- DESKTOP RAIL — .sb-rail: TWO-STATE primary desktop nav (X2, per the dedicated Figma) ---------- OPEN (~280px): collapse icon top-right · multi-org DEALERSHIP DROPDOWN pill (.sb-dealersel — desktop-mostly) · full icon+label rows · bottom Settings/Help · user row w/ green status toggle. CLOSED (64px, .sb-rail--collapsed): expand icon · uniform 32×32 icon squares — the BUILDING item first (the dealership dropdown's collapsed form) · bottom gear/help/32px atomic avatar. Closed is what the Contacts shell embeds; slimmer than production. Both states: var(--white) surface + 1px gray-06 right hairline; cells 32px tall / 8px gaps; selected chip gray-07. */ .sb-rail{width:280px;box-sizing:border-box;background:var(--white);border-right:1px solid var(--gray-06);padding:12px;display:flex;flex-direction:column;gap:8px;font-family:var(--font-sans);} .sb-rail .rail-top{display:flex;justify-content:flex-end;} .sb-rail .rail-collapse{width:32px;height:32px;border-radius:var(--r-5);background:transparent;border:none;color:var(--gray-04);display:inline-flex;align-items:center;justify-content:center;font-size:13px;cursor:pointer;} .sb-rail .rail-collapse:hover{background:var(--gray-06);} /* match .sb-iconbtn--primary hover */ .sb-rail .sb-viewlist{padding:0;} /* dealership selector — full-width row, gray-06 fill, r5, 32px tall (nav cell metric) */ .sb-dealersel{display:flex;align-items:center;gap:8px;width:100%;height:32px;box-sizing:border-box;background:var(--gray-06);border:none;border-radius:var(--r-5);padding:0 8px;cursor:pointer;text-align:left;} .sb-dealersel .ds-ico{font-size:14px;color:var(--gray-00);width:20px;text-align:center;flex:none;} .sb-dealersel .ds-name{flex:1;min-width:0;font:var(--t-paragraph-sb);color:var(--gray-00);} .sb-dealersel .ds-chev{font-size:12px;color:var(--gray-04);flex:none;} /* rail user row — 32px avatar (online dot) + two-line name/role + trailing switch */ .sb-railuser{display:flex;align-items:center;gap:10px;padding:8px 4px;} .sb-railuser .ru-text{flex:1;min-width:0;display:flex;flex-direction:column;} .sb-railuser .ru-name{font:var(--t-paragraph-sb);color:var(--gray-00);} .sb-railuser .ru-role{font:var(--t-tiny);color:var(--gray-03);} /* COLLAPSED rail — .sb-rail--collapsed (64px, icon-only variant of the locked rail; W1 Contacts shell). Labels, counts, dealership name and user text hide; rows center their glyphs; the user avatar swaps to the 32px ATOMIC avatar (RR ring + status dot per the global rule). */ .sb-rail--collapsed{width:64px;padding:12px 8px;align-items:center;} .sb-rail--collapsed .rail-top{justify-content:center;width:100%;} .sb-rail--collapsed .sb-viewlist{width:100%;align-items:center;} .sb-rail--collapsed .sb-viewitem{width:32px;height:32px;justify-content:center;padding:0;box-sizing:border-box;} /* uniform 32×32 icon squares; active = the gray-07 chip from .on */ .sb-rail--collapsed .sb-viewitem .vi-label,.sb-rail--collapsed .sb-viewitem .vi-count{display:none;} .sb-rail--collapsed .sb-dealersel{width:32px;justify-content:center;padding:0;} .sb-rail--collapsed .sb-dealersel .ds-name,.sb-rail--collapsed .sb-dealersel .ds-chev{display:none;} .sb-rail--collapsed .sb-railuser{padding:8px 0;justify-content:center;} .sb-rail--collapsed .sb-railuser .ru-text,.sb-rail--collapsed .sb-railuser .sb-switch{display:none;} /* ---------- DESKTOP TOP BAR + PAGE HEAD — .sb-topbar / .sb-pagehead ---------- */ /* top app bar — logo · refresh · tabs · spring · search */ .sb-topbar{display:flex;align-items:center;gap:12px;background:var(--white);border-bottom:1px solid var(--gray-06);padding:8px 16px;font-family:var(--font-sans);} .sb-topbar .tb-logo{height:28px;flex:none;} /* X1: production logo scale (~28px) */ .sb-topbar .tb-refresh{background:transparent;} /* X1: refresh = bare glyph, no chip bg */ .sb-topbar .tb-search{width:380px;flex:none;} /* reuses the .sb-bn-field recipe */ /* content page head — Views chip · title+count · spring · date · filters · add */ /* VIEWS TOGGLE CHIP — two states, reflecting the Views panel's visibility: ON (.sb-msel.on, blue) ONLY while the Views column/sheet is OPEN; otherwise OFF = the default gray-06 chip w/ gray-00 icon. */ /* THE band recipe (pagehead fork): pad 12/16 · gap 12 · title t-title · count t-paragraph gray-03 AFTER the title. .sb-mh-titlebar is a thin documented MODIFIER of this band (mobile gap/pad + hairline) — only real platform differences remain. (.sb-screen-hdr retired in Top-Down R3.) */ .sb-pagehead{display:flex;align-items:center;gap:12px;background:var(--gray-07);padding:12px 16px;font-family:var(--font-sans);} /* X1: gray-07, same band as the mselbar beneath */ .sb-pagehead .ph-title{font:var(--t-title);color:var(--gray-00);} .sb-pagehead .ph-count{font:var(--t-paragraph);color:var(--gray-03);} /* ---------- ICON BUTTONS — CustomIconButton (IconButtonTheme) ---------- */ .sb-iconbtn{display:inline-flex;align-items:center;justify-content:center;border:1px solid transparent;border-radius:var(--r-5);cursor:pointer;background:transparent;color:var(--gray-00);transition:background .12s,color .12s;} .sb-iconbtn.b32{width:32px;height:32px;font-size:14px;} /* boxSize s32 */ .sb-iconbtn.b24{width:24px;height:24px;font-size:12px;} /* boxSize s24 · icon s12 */ .sb-iconbtn.i16{font-size:16px;} .sb-iconbtn.i12{font-size:12px;} .sb-iconbtn.i10{font-size:10px;} /* primary (PrimaryIconButtonStyle) — transparent rest, gray-06 hover, blue-03/blue-01 pressed/selected */ .sb-iconbtn--primary{background:transparent;color:var(--gray-00);} .sb-iconbtn--primary:hover,.sb-iconbtn--primary.is-hover{background:var(--gray-06);} .sb-iconbtn--primary.is-pressed,.sb-iconbtn--primary.is-selected{background:var(--blue-03);color:var(--blue-01);} .sb-iconbtn--primary.is-disabled{background:transparent;color:var(--gray-05);} /* focus rings (PrimaryIconButtonStyle focused = 2px blue-01; focused+selected/pressed = 2px gray-03; no layout shift) */ .sb-iconbtn--primary.is-focused,.sb-iconbtn--bordered.is-focused,.sb-iconbtn--bordered-shadow.is-focused,.sb-iconbtn--info.is-focused,.sb-iconbtn--gray.is-focused,.sb-iconbtn--bordered24.is-focused,.sb-iconbtn--destructive.is-focused{box-shadow:0 0 0 2px var(--blue-01);} .sb-iconbtn--primary.is-focused.is-selected,.sb-iconbtn--primary.is-focused.is-pressed,.sb-iconbtn--destructive.is-focused.is-pressed{box-shadow:0 0 0 2px var(--gray-03);} .sb-iconbtn--secondary{background:var(--gray-00);color:var(--white);} .sb-iconbtn--secondary:hover,.sb-iconbtn--secondary.is-hover{background:var(--gray-01);} .sb-iconbtn--secondary.is-pressed{background:var(--gray-02);} .sb-iconbtn--secondary.is-disabled{background:var(--gray-04);} /* tertiary (TertiaryIconButtonStyle) — gray-06 FILL + gray-00 icon */ .sb-iconbtn--tertiary{background:var(--gray-06);color:var(--gray-00);} .sb-iconbtn--tertiary:hover,.sb-iconbtn--tertiary.is-hover{background:var(--gray-05);} .sb-iconbtn--tertiary.is-selected{background:var(--blue-02);} .sb-iconbtn--tertiary.is-disabled{background:var(--gray-07);color:var(--gray-05);} .sb-iconbtn--bordered{background:var(--white);border-color:var(--gray-06);} .sb-iconbtn--bordered-shadow{background:var(--white);border-color:var(--gray-06);box-shadow:var(--shadow-float);} .sb-iconbtn--bordered:hover,.sb-iconbtn--bordered.is-hover,.sb-iconbtn--bordered-shadow:hover,.sb-iconbtn--bordered-shadow.is-hover{background:var(--gray-06);} .sb-iconbtn--bordered.is-pressed,.sb-iconbtn--bordered.is-selected,.sb-iconbtn--bordered-shadow.is-pressed,.sb-iconbtn--bordered-shadow.is-selected{background:var(--blue-03);color:var(--blue-01);} .sb-iconbtn--info{color:var(--gray-03);} .sb-iconbtn--info:hover,.sb-iconbtn--info.is-hover{background:var(--gray-06);} .sb-iconbtn--gray{color:var(--gray-04);} .sb-iconbtn--gray:hover,.sb-iconbtn--gray.is-hover{background:var(--gray-06);} .sb-iconbtn--bordered24{border-color:var(--gray-05);} .sb-iconbtn--bordered24:hover,.sb-iconbtn--bordered24.is-hover{background:var(--gray-06);} .sb-iconbtn--viewer{background:var(--overlay-trans-64);color:rgba(255,255,255,.8);} /* white-alpha fg: no white-trans token exists — documented literal (same pattern as the sheet) */ .sb-iconbtn--viewer:hover,.sb-iconbtn--viewer.is-hover,.sb-iconbtn--viewer.is-pressed{background:var(--overlay-trans-40);} .sb-iconbtn--viewer.is-pressed{color:rgba(255,255,255,.5);} /* white-alpha fg: documented literal */ /* destructive — red-01 fill, gray-00 icon (NOT white); gray-06 hover, blue-03/blue-01 pressed */ .sb-iconbtn--destructive{background:var(--red-01);color:var(--gray-00);} .sb-iconbtn--destructive:hover,.sb-iconbtn--destructive.is-hover{background:var(--gray-06);} .sb-iconbtn--destructive.is-pressed,.sb-iconbtn--destructive.is-selected{background:var(--blue-03);color:var(--blue-01);} .sb-iconbtn--destructive.is-disabled{background:transparent;color:var(--gray-05);} .sb-iconbtn--red{background:var(--red-01);color:var(--red-02);border-color:var(--gray-06);} .sb-iconbtn--red:hover,.sb-iconbtn--red.is-hover{background:var(--gray-05);} .sb-iconbtn--red.is-selected{background:var(--blue-02);} .sb-iconbtn--red.is-disabled{background:var(--gray-07);color:var(--gray-05);} .sb-iconbtn--green{background:var(--green-01);color:var(--green-02);border-color:var(--gray-06);} .sb-iconbtn--green:hover,.sb-iconbtn--green.is-hover{background:var(--gray-05);} .sb-iconbtn--green.is-selected{background:var(--blue-02);} .sb-iconbtn--green.is-disabled{background:var(--gray-07);color:var(--gray-05);} /* ---------- BADGES — RoundedText (RoundedTextTheme) ---------- radius r3, pad h4/v2, min 16×16, text centered. Two sizes: tiny(13)·indicator(10). */ .sb-tag{display:inline-flex;align-items:center;justify-content:center;border:1px solid transparent;border-radius:var(--r-3);padding:2px 4px;min-width:16px;min-height:16px;font:var(--t-tiny);line-height:1.23;box-sizing:border-box;} .sb-tag.sz-indicator{font:var(--t-indicator);padding:4px 8px;} .sb-tag--gray{background:var(--gray-06);color:var(--gray-00);} .sb-tag--g07{background:var(--gray-07);color:var(--gray-00);} /* roundedText.tiny.gray00.gray07 — EngagementView _TagsSection chips (no border in code; only --white is bordered) */ .sb-tag--white{background:var(--white);color:var(--gray-00);border-color:var(--gray-05);} /* only bordered one */ .sb-tag--disabled{background:var(--gray-06);color:var(--gray-04);} .sb-tag--inactive{background:var(--gray-06);color:var(--gray-03);} .sb-tag--orange{background:var(--orange-02);color:var(--orange-01);} .sb-tag--yellow{background:var(--yellow-02);color:var(--yellow-01);} .sb-tag--indigo{background:var(--indigo-02);color:var(--indigo-01);} .sb-tag--blue{background:var(--blue-03);color:var(--blue-01);} /* named .blue = blue-03 */ .sb-tag--green{background:var(--green-02);color:var(--green-01);} .sb-tag--red{background:var(--red-02);color:var(--red-01);} .sb-tag--purple{background:var(--purple-02);color:var(--purple-01);} .sb-tag--black{background:var(--gray-00);color:var(--white);} /* inverted: white-on-gray00 */ .sb-tag--default{background:var(--blue-02);color:var(--blue-01);} /* unnamed default ctor = blue-02 */ .sb-tag.interactive{cursor:pointer;} /* InteractiveRoundedText · reserved: runtime state */ /* ---------- CHECKBOX — CustomCheckbox (CustomCheckboxTheme {primary 32, box24 24}) ---------- 12px box · r2 · FA solidCheck 8px white. bg transparent → selected blue-01 (sel+disabled gray-05); border 1px gray-00 → disabled gray-05 · FOCUSED 2px blue-01 · selected+focused 1px blue-01. Supports indeterminate (bool? null). title mediumTiny gray-00 (disabled gray-03). */ .sb-checkbox{display:inline-flex;align-items:center;gap:6px;cursor:pointer;} .sb-checkbox .box{width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;flex:none;} .sb-checkbox.sz24 .box{width:24px;height:24px;} /* reserved: box24 size variant */ .sb-checkbox .chk{width:12px;height:12px;border-radius:var(--r-2);box-shadow:inset 0 0 0 1px var(--gray-00);background:transparent;display:flex;align-items:center;justify-content:center;color:var(--white);font-size:8px;box-sizing:border-box;transition:background .12s,box-shadow .12s;} .sb-checkbox .chk .ck{display:none;} .sb-checkbox.is-selected .chk{background:var(--blue-01);box-shadow:none;} .sb-checkbox.is-selected .chk .ck{display:block;} .sb-checkbox.is-focused .chk{box-shadow:inset 0 0 0 2px var(--blue-01);} .sb-checkbox.is-selected.is-focused .chk{box-shadow:0 0 0 1px var(--blue-01),inset 0 0 0 1px var(--white);} .sb-checkbox.is-disabled .chk{box-shadow:inset 0 0 0 1px var(--gray-05);} .sb-checkbox.is-selected.is-disabled .chk{background:var(--gray-05);box-shadow:none;} .sb-checkbox .tt{font:var(--t-tiny);color:var(--gray-00);} .sb-checkbox.is-disabled .tt{color:var(--gray-03);} /* ---------- SWITCH — CustomSwitch (CustomSwitchTheme {primary, secondary, green}) ---------- track 24×12 (radius 6) + 12px thumb · outer container 32×32 (primary/green) / 40×28 (secondary card). track OFF white → ON blue-01 (green → green-01) · on+disabled gray-05; trackSide OFF 1px gray-00 → hover/selected/FOCUSED 2px blue-01 · disabled 1px gray-03; thumb white, thumbSide 1px gray-00 → selected/focused blue-01. */ .sb-switch{width:24px;height:12px;border-radius:var(--radius-pill);background:var(--white);box-shadow:inset 0 0 0 1px var(--gray-00);position:relative;border:none;cursor:pointer;flex:none;padding:0;transition:background .15s,box-shadow .15s;} .sb-switch::after{content:"";position:absolute;top:0;left:0;width:12px;height:12px;border-radius:50%;background:var(--white);box-shadow:inset 0 0 0 1px var(--gray-00);box-sizing:border-box;transition:left .2s,box-shadow .15s;} .sb-switch.on{box-shadow:inset 0 0 0 2px var(--blue-01);} .sb-switch:not(.is-disabled):hover{box-shadow:inset 0 0 0 2px var(--blue-01);} .sb-switch.on::after{left:12px;box-shadow:inset 0 0 0 1px var(--blue-01);} .sb-switch--primary.on,.sb-switch--secondary.on{background:var(--blue-01);} .sb-switch--green.on{background:var(--green-01);} .sb-switch.is-focused{box-shadow:inset 0 0 0 2px var(--blue-01);} .sb-switch.is-focused::after{box-shadow:inset 0 0 0 1px var(--blue-01);} .sb-switch.is-disabled{cursor:default;box-shadow:inset 0 0 0 1px var(--gray-03);} .sb-switch.is-disabled::after{box-shadow:inset 0 0 0 1px var(--gray-03);} .sb-switch.on.is-disabled{background:var(--gray-05);box-shadow:inset 0 0 0 1px var(--gray-03);} /* switch row (MultiUseItemView.row): leading icon + title/subtitle + trailing switch */ .sb-switch-row{display:flex;align-items:center;gap:12px;padding:10px 8px;} .sb-switch-row .lead{width:24px;text-align:center;color:var(--gray-02);font-size:13px;flex:none;} .sb-switch-row .tt{flex:1;min-width:0;} .sb-switch-row .tt .t{font:var(--t-tiny);color:var(--fg);} .sb-switch-row .tt .s{font:var(--t-label);color:var(--fg-secondary);margin-top:2px;} /* ---------- SEGMENTED — SegmentedControl (PrimarySegmentedControlStyle) ---------- height 32, r7. selected-segment pill = gray-06; resting items transparent → hover gray-07; text boldTiny gray-03 → selected gray-00 (disabled gray-05). */ .sb-seg{display:inline-flex;background:transparent;border-radius:var(--r-7);padding:1px;height:32px;box-sizing:border-box;gap:2px;} .sb-seg button{font:var(--t-tiny-bold);border:none;background:transparent;color:var(--gray-03);padding:0 14px;border-radius:var(--r-7);cursor:pointer;white-space:nowrap;} .sb-seg button:hover{background:var(--gray-07);} .sb-seg button.on{background:var(--gray-06);color:var(--gray-00);} .sb-seg button:disabled{color:var(--gray-05);cursor:default;background:transparent;} /* ---------- SEARCH FIELD — SearchField ---------- fill gray-06, hint gray-04, search icon gray-04; button bg gray-00 box32 icon12 r7 right-corners. */ .sb-search{display:flex;align-items:center;background:var(--gray-06);border-radius:var(--r-7);height:32px;overflow:hidden;} /* SearchField (interactive search w/ go button) — the standard search input */ .sb-search .lead{color:var(--gray-04);font-size:13px;padding:0 10px;} .sb-search input{flex:1;border:none;background:transparent;font:var(--t-paragraph);color:var(--fg);outline:none;min-width:0;} .sb-search input::placeholder{color:var(--gray-04);} /* generic image placeholder — use anywhere a real image will go (NOT the DAISI logo) */ .sb-imgph{background:var(--gray-06);display:flex;align-items:center;justify-content:center;color:var(--gray-04);} /* reserved: generic image placeholder */ .sb-search .clear{color:var(--gray-04);font-size:12px;padding:0 10px;cursor:pointer;background:none;border:none;} .sb-search .go{width:32px;height:32px;background:var(--gray-00);color:var(--white);display:flex;align-items:center;justify-content:center;font-size:12px;flex:none;border:none;cursor:pointer;border-radius:0 var(--r-7) var(--r-7) 0;} .sb-search .go:active{background:var(--blue-01);} .sb-search.is-disabled{opacity:.6;} .sb-search.is-disabled .go{background:var(--gray-05);} /* ---------- AVATAR — AvatarView (AvatarViewTheme) ---------- bg gray-06, placeholder semiBoldLabel/gray-02, border systemBlack. primary s32 / box24 / box16. */ .sb-avatar{border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:var(--gray-06);color:var(--gray-02);font:var(--t-label-sb);flex:none;position:relative;overflow:visible;border:1px solid var(--black);} .sb-avatar.s32{width:32px;height:32px;} .sb-avatar.s24{width:24px;height:24px;font:var(--t-indicator);font-weight:600;} .sb-avatar.s16{width:16px;height:16px;font-size:8px;} .sb-avatar img{width:100%;height:100%;border-radius:50%;object-fit:cover;} /* STATUS DOT — TOP-RIGHT, ALWAYS shown (avatar_view.dart): green-01 online / gray-05 offline. Sized per avatar (s16→5 / s24→6 / s32→8) + a thin page-bg (white) separation ring so it never swallows the avatar. */ .sb-avatar.online::after,.sb-avatar.offline::after{content:"";position:absolute;top:0;right:0;border-radius:50%;box-shadow:0 0 0 1.5px var(--white);} .sb-avatar.online::after{background:var(--green-01);} .sb-avatar.offline::after{background:var(--gray-05);} .sb-avatar.s16.online::after,.sb-avatar.s16.offline::after{width:5px;height:5px;} .sb-avatar.s24.online::after,.sb-avatar.s24.offline::after{width:6px;height:6px;} .sb-avatar.s32.online::after,.sb-avatar.s32.offline::after{width:8px;height:8px;} /* ROUND-ROBIN RING — ONLY when in the round robin: green-01 when online / gray-05 when offline; NO ring when out. */ .sb-avatar.rr-on{box-shadow:0 0 0 1.5px var(--green-01);} .sb-avatar.rr-off{box-shadow:0 0 0 1.5px var(--gray-05);} /* ---------- BUTTON FAMILY extras — widget-level constructs ---------- custom_button.dart / custom_icon_button.dart / counter_buttons.dart / selectable_custom_button.dart / radio_button.dart / page_back_button.dart */ /* Loading — child swapped to animated logo (BaseLoadingIndicatorTheme). Spinner ring stand-in. */ .sb-spinner{width:16px;height:16px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;display:inline-block;animation:sb-spin .7s linear infinite;opacity:.9;} @keyframes sb-spin{to{transform:rotate(360deg);}} .sb-btn.is-loading{pointer-events:none;} /* IconPosition — icon left (default) or right via DOM order; helper to flip */ .sb-btn .ibox.right{order:2;} /* Selected (StatefulCustomButton / SelectableCustomButton toggle) reuses .is-selected per-variant. Drawer/nav selected item (DrawerScaffold menuItemStyle): */ .sb-navitem{display:flex;align-items:center;gap:10px;width:100%;text-align:left;border:none;cursor:pointer; background:var(--white);color:var(--gray-00);font:var(--t-tiny);border-radius:var(--r-5);padding:8px 12px;} .sb-navitem:hover{background:var(--gray-07);} .sb-navitem.is-selected{background:var(--gray-06);} /* Counter marker — StatusMarker over an icon button (count badge r3 + unread dot). counter_buttons.dart */ .sb-counter{position:relative;display:inline-flex;} .sb-counter .count{position:absolute;top:-6px;left:calc(100% - 10px);background:var(--red-01);color:var(--global-white); font:var(--t-indicator);font-weight:700;border-radius:var(--r-3);min-width:16px;height:16px; display:flex;align-items:center;justify-content:center;padding:0 4px;box-sizing:border-box;border:1.5px solid var(--white);} .sb-counter .dot{position:absolute;top:-2px;right:-2px;width:8px;height:8px;border-radius:50%;background:var(--red-01);border:1.5px solid var(--white);} /* Radio button — radio_button.dart (custom-painted: border + inner border + indicator). DefaultRadioButtonStyle: 12px circle · 1px gray-00 border · SELECTED = 6px gray-00 inner dot (NOT blue); FOCUSED = 14px + 2px blue-01 ring (focused+selected → 13px/1px) · disabled gray-04. */ .sb-radio{width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;background:none;border:none;padding:0;} .sb-radio .ring{width:12px;height:12px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--gray-00);box-sizing:border-box;display:flex;align-items:center;justify-content:center;transition:width .12s,height .12s,box-shadow .12s;} .sb-radio .ring .dot{width:6px;height:6px;border-radius:50%;background:transparent;transition:background .12s;} .sb-radio.is-selected .ring .dot{background:var(--gray-00);} .sb-radio.is-focused .ring{width:14px;height:14px;box-shadow:inset 0 0 0 2px var(--blue-01);} .sb-radio.is-focused.is-selected .ring{width:13px;height:13px;box-shadow:inset 0 0 0 1px var(--blue-01),inset 0 0 0 1.5px var(--gray-00);} .sb-radio.is-disabled{cursor:default;} .sb-radio.is-disabled .ring{box-shadow:inset 0 0 0 1px var(--gray-04);} .sb-radio.is-disabled.is-selected .ring .dot{background:var(--gray-04);} /* standalone RadioButton — radioButton.primary (app_themes.dart:1504): 16px ring, GREEN-01 selection. Distinct from .sb-radio (the group / item-selector radio = DefaultRadioButtonStyle, gray-00 dot, 12px). */ .sb-rb{width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;background:none;border:none;padding:0;} .sb-rb .ring{width:16px;height:16px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--gray-00);box-sizing:border-box;display:flex;align-items:center;justify-content:center;transition:box-shadow .12s;} .sb-rb .dot{width:12px;height:12px;border-radius:50%;background:transparent;transition:background .12s;} .sb-rb.is-selected .ring{box-shadow:inset 0 0 0 1px var(--green-01);} .sb-rb.is-selected .dot{background:var(--green-01);} .sb-rb.is-focused .ring{box-shadow:inset 0 0 0 1px var(--gray-00),inset 0 0 0 3px var(--blue-01);} .sb-rb.is-focused.is-selected .ring{box-shadow:inset 0 0 0 1px var(--blue-01);} .sb-rb.is-focused.is-selected .dot{width:8px;height:8px;background:var(--gray-00);} .sb-rb.is-disabled .ring{box-shadow:inset 0 0 0 1px var(--gray-04);} .sb-rb.is-disabled.is-selected .dot{width:8px;height:8px;background:var(--gray-04);} /* ---------- TEXT FIELD — CustomTextField + SpaceInputDecoration ---------- custom_text_field.dart / custom_input_decorator.dart. OutlineInputBorder r7, filled, min-height 32, contentPadding h8/v4. ⚠️ LABEL ALWAYS FLOATS — no resting-inside state. 3 variants: --primary (white fill) · --search (gray-06 fill) · --borderless (no border/fill). Border: enabled gray-06 · focus blue-01 · error red-01 · readOnly transparent. Label mediumTiny gray-00 → focus blue-01 · error red-01 · disabled gray-04 · readOnly gray-02. */ .sb-field{position:relative;display:inline-flex;flex-direction:column;gap:4px;min-width:200px;} .sb-field-box{display:flex;align-items:center;gap:6px;min-height:32px;border:1px solid var(--gray-06);border-radius:var(--r-7);background:var(--white);padding:4px 8px;box-sizing:border-box;transition:border-color .12s,background .12s;} .sb-label{position:absolute;top:-7px;left:8px;padding:0 4px;background:var(--white);font:var(--t-tiny);color:var(--gray-00);line-height:1;z-index:1;white-space:nowrap;} /* floats ALWAYS */ .sb-field-input{flex:1;border:none;background:none;outline:none;font:var(--t-paragraph);color:var(--fg);min-width:0;padding:0;} .sb-field-input::placeholder{color:var(--gray-05);} /* hint regularParagraph gray-05 */ .sb-field .pre,.sb-field .suf{color:var(--gray-04);font-size:13px;display:flex;align-items:center;justify-content:center;min-width:32px;height:32px;flex:none;} /* prefix/suffix s32 box (prefixIconConstraints/suffixIconConstraints) */ .sb-field .clear{color:var(--gray-04);background:none;border:none;cursor:pointer;width:32px;height:32px;font-size:12px;padding:0 2px;flex:none;} .sb-field .clear:hover{color:var(--gray-00);} .sb-field .clear:active{color:var(--blue-01);} .sb-field-error{font:var(--t-label);color:var(--red-01);padding-left:8px;} .sb-field-counter{font:var(--t-indicator);color:var(--gray-02);align-self:flex-end;padding-right:4px;} .sb-field textarea.sb-field-input{resize:none;min-height:56px;padding-top:2px;line-height:1.5;} /* states */ .sb-field.is-focused .sb-field-box{border-color:var(--blue-01);} .sb-field.is-focused .sb-label{color:var(--blue-01);} .sb-field.is-hover .sb-field-box{background:var(--gray-06);} .sb-field.is-error .sb-field-box{border-color:var(--red-01);} .sb-field.is-error .sb-label{color:var(--red-01);} .sb-field.is-disabled .sb-field-input{color:var(--gray-04);} .sb-field.is-disabled .sb-label{color:var(--gray-04);} .sb-field.is-readonly .sb-field-box{border-color:transparent;background:transparent;} .sb-field.is-readonly .sb-label{color:var(--gray-02);background:transparent;} /* variant: searchField — gray-06 fill, hover gray-05, hint gray-04, no floating label */ .sb-field--search .sb-field-box{background:var(--gray-06);border-color:transparent;} /* CustomTextField search variant — form contexts */ .sb-field--search.is-hover .sb-field-box{background:var(--gray-05);} .sb-field--search .sb-field-input::placeholder{color:var(--gray-04);} .sb-field--search .pre{color:var(--gray-04);} .sb-field--search .sb-label{display:none;} /* variant: borderless — no border/fill, inline */ .sb-field--borderless .sb-field-box{border-color:transparent;background:transparent;padding-left:0;padding-right:0;} .sb-field--borderless .sb-label{background:transparent;left:0;} /* ---------- UPLOAD FIELD — PrimaryUploadFieldStyle (UploadFieldTheme) ---------- Dashed drop zone: gray-05 dashed (1px) → blue-01 pressed/selected; fill gray-07 → gray-06 hover → blue-03 active; r5, pad s16. */ .sb-upload{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px; border:1px dashed var(--gray-05);border-radius:var(--r-5);background:var(--gray-07);padding:16px;text-align:center;cursor:pointer;transition:background .12s,border-color .12s;} .sb-upload:hover,.sb-upload.is-hover{background:var(--gray-06);} .sb-upload.is-active{border-color:var(--blue-01);background:var(--blue-03);} /* reserved: runtime drag-over state */ .sb-upload .up-title{font:var(--t-paragraph-sb);color:var(--fg);} .sb-upload .up-sub{font:var(--t-tiny);color:var(--fg-secondary);} .sb-upload .up-link{color:var(--blue-01);} /* ---------- STATUS MARKER — StatusMarker (statusMarker.{primary, notifications}) ---------- small count badge, mediumIndicator (10px). RoundedText default radius = r3 (almost-square, never pill). primary blue-01/blue-02 · notifications red-01/white (unread). */ .sb-marker{display:inline-flex;align-items:center;justify-content:center;font:var(--t-indicator); border-radius:var(--r-3);min-width:16px;height:16px;padding:0 5px;box-sizing:border-box;line-height:1;} .sb-marker--primary{background:var(--blue-01);color:var(--blue-02);} .sb-marker--notifications{background:var(--red-01);color:var(--global-white);} /* minutes badge (ValueRoundedText.minutes — was .sb-val-min): bold indicator, gray-00 on gray-07 */ .sb-marker--minutes{font:var(--t-indicator);font-weight:700;background:var(--gray-07);color:var(--gray-00);min-width:0;height:auto;line-height:normal;padding:3px 7px;white-space:nowrap;flex:none;} .sb-marker--minutes.warn{background:var(--orange-02);color:var(--orange-01);} /* slow-response warning */ /* ---------- ICON BOX — IconBox (box 24 / glyph 12) ---------- */ .sb-iconbox{width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;font-size:12px;color:var(--gray-00);flex:none;} .sb-iconbox.b32{width:32px;height:32px;font-size:16px;} /* ---------- ROUND-C SHARED ATOMS (consolidation — replace hand-rolled copies) ---------- */ /* SECTION HEADER STRIP — THE canonical gray-07 strip: min-h 32 · pad 8/16 · .t semiBoldParagraph · gray-06 bottom hairline · .acts = trailing cluster. Consumers with real visual deltas keep a one-line override beside their organism. */ .sb-sechead{display:flex;align-items:center;gap:8px;min-height:32px;background:var(--gray-07);padding:8px 16px;border-bottom:1px solid var(--gray-06);box-sizing:border-box;} .sb-sechead .t{font:var(--t-paragraph-sb);color:var(--gray-00);} .sb-sechead .acts{margin-left:auto;display:flex;align-items:center;gap:8px;} /* CARD SHELL — THE white organism shell */ .sb-card{background:var(--white);border:1px solid var(--gray-06);border-radius:var(--r-5);overflow:hidden;} /* 24×24 card menu button (ellipsis) — ← ap-menu / tk-menu / desc .menu */ .sb-cardmenu{flex:none;width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;color:var(--gray-03);font-size:13px;background:none;border:none;cursor:pointer;} /* 10px ext-link cell — ONE vertical nudge everywhere (was split -1px / +0.5px). Doubled class = specificity 0,2,0: the atom sits ON the FA , and must beat the FA kit's runtime-injected single-class rules (display/em-sizing) like the old 3-deep selectors did. */ .sb-extlink.sb-extlink{font-size:10px;width:12px;height:12px;display:inline-flex;align-items:center;justify-content:center;color:var(--gray-04);flex:none;transform:translateY(-1px);} /* assignee footer cluster — atomic avatar + abbreviated name (.nm truncs via the grouped rule) */ .sb-who{display:flex;align-items:center;gap:6px;min-width:0;} .sb-who .nm{font:var(--t-tiny);color:var(--gray-03);} /* THE one flex spacer (scoped duplicates deleted) */ .spring{flex:1;} /* ---------- COLOR CIRCLE — status dot ---------- */ .sb-dot{width:8px;height:8px;border-radius:50%;display:inline-block;flex:none;} /* ---------- BANNER — BannerView (banner.{primary, error, warning}) ---------- inline banner: tinted 02 bg + 01 title (semiBold) + 01 message (mediumTiny) + action + dismiss + leading FA. */ .sb-banner{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:var(--r-5);} .sb-banner .lead{font-size:14px;flex:none;} .sb-banner .body{flex:1;min-width:0;} .sb-banner .title{font:var(--t-paragraph-sb);} .sb-banner .msg{font:var(--t-tiny);margin-top:2px;} .sb-banner .act{font:var(--t-paragraph);background:none;border:none;cursor:pointer;padding:4px 2px;flex:none;align-self:center;} .sb-banner .dismiss{background:none;border:none;cursor:pointer;font-size:13px;flex:none;align-self:center;} .sb-banner--primary{background:var(--blue-02);} .sb-banner--primary .lead,.sb-banner--primary .title,.sb-banner--primary .msg,.sb-banner--primary .act,.sb-banner--primary .dismiss{color:var(--blue-01);} .sb-banner--error{background:var(--red-02);} .sb-banner--error .lead,.sb-banner--error .title,.sb-banner--error .msg,.sb-banner--error .act,.sb-banner--error .dismiss{color:var(--red-01);} .sb-banner--warning{background:var(--yellow-02);} .sb-banner--warning .lead,.sb-banner--warning .title,.sb-banner--warning .msg,.sb-banner--warning .act{color:var(--gray-00);} .sb-banner--warning .dismiss{color:var(--yellow-01);} /* ---------- MULTI-USE ITEM VIEW — MultiUseItemView (itemView.{row, card, cardDashed}) ---------- multi_use_item_view.dart · ListItemViewStyle (bg/border/radius/pad WidgetState-resolved). bg white → hover gray-06 / pressed gray-05 / SELECTED blue-03 fill (+ blue-01 border). card/cardDashed: r7, pad s8 · row: no radius, bottom gray-06 divider (none on hover/selected). */ .sb-item{display:flex;align-items:center;gap:10px;padding:8px;background:var(--white);box-sizing:border-box;cursor:pointer;font:var(--t-tiny);color:var(--fg);transition:background .12s,border-color .12s;} .sb-item .nm{font:var(--t-paragraph-sb);color:var(--fg);} .sb-item .mt{font:var(--t-label);color:var(--fg-secondary);margin-left:auto;} /* card */ .sb-item--card{border:1px solid var(--gray-05);border-radius:var(--r-7);} .sb-item--card.is-hover{background:var(--gray-06);} .sb-item--card.is-pressed{background:var(--gray-05);} .sb-item--card.is-selected{background:var(--blue-03);border-color:var(--blue-01);} .sb-item--card.is-disabled{border-color:var(--gray-06);color:var(--fg-tertiary);} /* cardDashed */ .sb-item--card-dashed{border:1px dashed var(--gray-05);border-radius:var(--r-7);} .sb-item--card-dashed.is-hover{background:var(--gray-06);} .sb-item--card-dashed.is-pressed{background:var(--gray-05);} .sb-item--card-dashed.is-selected{background:var(--blue-03);border-color:var(--blue-01);} .sb-item--card-dashed.is-disabled{border-color:var(--gray-06);color:var(--fg-tertiary);} /* row */ .sb-item--row{border-bottom:1px solid var(--gray-06);} .sb-item--row.is-hover{background:var(--gray-06);border-bottom-color:transparent;} .sb-item--row.is-pressed{background:var(--gray-05);} .sb-item--row.is-selected{background:var(--blue-03);border-bottom-color:transparent;} .sb-item--row.is-disabled{color:var(--fg-tertiary);} /* statsCard (itemView.statsCard) — the scorecard tile. ListItemView, style statsCard: white + 1px gray-06 + r5, hover gray-06 fill, pad t12/b16/l16/r16. TAPPABLE (onTap → drilldown). Column: [title (mediumIndicator gray-02, ellipsis) + CustomIconButton.info (gray-03)] · value (semiBoldHeading5 gray-00, FittedBox) · delta (conditional showDelta — caret + %; up/down colored, invertColors flips the mapping for "lower-is-better" metrics). Loading = shimmer sized "999". */ .sb-stat{background:var(--white);border:1px solid var(--gray-06);border-radius:var(--r-5);padding:12px 16px 16px;cursor:pointer;transition:background .12s;display:flex;flex-direction:column;text-align:left;width:100%;box-sizing:border-box;font-family:var(--font-sans);} .sb-stat:hover,.sb-stat.is-hover{background:var(--gray-06);} .sb-stat.is-disabled{cursor:default;} .sb-stat .head{display:flex;align-items:center;gap:6px;min-height:24px;} .sb-stat .title{font:var(--t-indicator);color:var(--gray-02);flex:1;min-width:0;} /* mediumIndicator 10px, ellipsis */ .sb-stat .head .sb-iconbtn{margin-left:auto;flex:none;} /* CustomIconButton.info — gray-03 */ .sb-stat .val{font:var(--t-heading5);color:var(--gray-00);letter-spacing:-.01em;margin-top:2px;} /* semiBoldHeading5, FittedBox */ .sb-stat .delta{display:inline-flex;align-items:center;gap:4px;font:var(--t-label);margin-top:6px;color:var(--gray-02);} /* conditional showDelta — % text always mediumLabel gray-02 */ .sb-stat .delta i{font-size:8px;} /* thin long-arrow */ .sb-stat .delta.up i{color:var(--green-01);} /* default: up arrow = good (green) */ .sb-stat .delta.down i{color:var(--red-01);} /* default: down arrow = bad (red) */ .sb-stat .delta.invert.up i{color:var(--red-01);} /* invertColors: lower-is-better → up = red */ .sb-stat .delta.invert.down i{color:var(--green-01);} /* invertColors: lower-is-better → down = green */ .sb-stat .delta.flat,.sb-stat .delta.flat i{color:var(--gray-03);} /* no-change — explicit gray (intent over accident) */ /* loading — shimmer placeholders (value sized like "999") */ .sb-stat.is-loading{cursor:default;} .sb-stat.is-loading .val{color:transparent;} /* legacy alias (older specimens): .k title row */ .sb-stat .k{font:var(--t-indicator);color:var(--gray-02);display:flex;align-items:center;gap:6px;} /* ---------- SKELETON / SHIMMER — SkeletonItemView + ShimmerWrapper ---------- shimmer gradient gray-07 → white → gray-07 (shimmerGradientBuilder). */ .sb-skeleton{background:var(--gray-07);border-radius:var(--r-3);position:relative;overflow:hidden;} .sb-skeleton::after{content:"";position:absolute;inset:0;transform:translateX(-100%); background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--white) 70%,transparent),transparent); animation:sb-shimmer 1.4s ease-in-out infinite;} @keyframes sb-shimmer{to{transform:translateX(100%);}} /* ---------- TABLE — CustomTable (CustomTableStyle) ---------- column-builder grid (TableColumnBuilder: header/cell/total, minWidth 160, isCentered). ⚠️ rows are gray-07-filled (not white) → hover gray-06, pressed blue-02; header boldTiny gray-02. min row height 40; sort/header icon blue-01 → hover gray-03; cell text boldTiny gray-00. */ .sb-table{width:100%;border-collapse:separate;border-spacing:0;} .sb-table th{font:var(--t-tiny-bold);color:var(--gray-02);text-align:left;padding:0 16px;height:40px;white-space:nowrap;background:var(--white);} .sb-table th .sort{color:var(--blue-01);margin-left:6px;font-size:10px;cursor:pointer;} .sb-table th .sort:hover{color:var(--gray-03);} .sb-table th.center,.sb-table td.center{text-align:center;} .sb-table td{font:var(--t-tiny-bold);color:var(--gray-00);padding:0 16px;height:40px;background:var(--gray-07);border-bottom:1px solid var(--gray-06);vertical-align:middle;white-space:nowrap;} .sb-table tbody tr{cursor:pointer;} .sb-table tbody tr:hover td{background:var(--gray-06);} .sb-table tbody tr.is-pressed td{background:var(--blue-02);} .sb-table tr.total td{background:var(--white);color:var(--fg);border-top:1px solid var(--border-strong);border-bottom:none;} /* empty-state slot */ .sb-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:28px;color:var(--fg-tertiary);background:var(--gray-07);border:1px solid var(--gray-06);border-radius:var(--r-5);} .sb-empty i{width:48px;height:48px;border-radius:var(--r-5);background:var(--blue-02);color:var(--blue-01);display:inline-flex;align-items:center;justify-content:center;font-size:18px;} .sb-empty .t{font:var(--t-heading6);color:var(--gray-00);} .sb-empty .s{font:var(--t-paragraph);color:var(--gray-01);} /* ---------- POPOVER / MENU — PopoverMenuStyle (shared floating surface, iOS-style) ---------- container = SOLID gray-06 · 1px gray-05 · r7 · shadow --elevation-popover (gray-00 @15% blur 32); it CLIPS (overflow hidden) so rows run edge-to-edge. ⚠️ rows are FULL-WIDTH, no outer padding / no gaps / no per-row radius; 1px gray-05 separators between rows. mediumTiny gray-00 text. States: hover gray-05 / pressed blue-03 + blue-01 text / destructive red-01 (pressed red-02 bg) / disabled gray-04 / SELECTED = trailing check gray-02. */ .sb-popover{background:var(--gray-06);border:1px solid var(--gray-05);border-radius:var(--r-7);box-shadow:var(--elevation-popover);padding:0;display:inline-flex;flex-direction:column;min-width:184px;box-sizing:border-box;overflow:hidden;} .sb-menuitem{display:flex;align-items:center;gap:10px;padding:9px 12px;background:none;color:var(--gray-00);font:var(--t-tiny);cursor:pointer;border:none;text-align:left;width:100%;box-sizing:border-box;} .sb-menuitem + .sb-menuitem{border-top:1px solid var(--gray-05);} .sb-menuitem .lead{width:16px;text-align:center;font-size:12px;flex:none;} .sb-menuitem .ck{margin-left:auto;color:var(--gray-02);font-size:11px;visibility:hidden;} .sb-menuitem.is-selected .ck{visibility:visible;} .sb-menuitem:hover,.sb-menuitem.is-hover{background:var(--gray-05);} .sb-menuitem.is-pressed{background:var(--blue-03);color:var(--blue-01);} .sb-menuitem.is-error{color:var(--red-01);} .sb-menuitem.is-error.is-pressed{background:var(--red-02);} .sb-menuitem.is-disabled{color:var(--gray-04);cursor:default;} /* SearchableDropdown search row — edge-to-edge gray-07 fill + 1px gray-05 separator above results */ .sb-popover .sb-dd-search{display:flex;align-items:center;gap:8px;background:var(--gray-07);padding:9px 12px;border-bottom:1px solid var(--gray-05);} .sb-popover .sb-dd-search i{color:var(--gray-04);font-size:12px;} .sb-popover .sb-dd-search input{flex:1;border:none;background:none;outline:none;font:var(--t-tiny);color:var(--fg);min-width:0;} .sb-popover .sb-dd-search input::placeholder{color:var(--gray-04);} .sb-popover .no-results{font:var(--t-tiny);color:var(--gray-02);padding:10px;text-align:center;} /* reserved: runtime empty-search state */ /* form dropdown TRIGGER — CustomDropdownStyle: r5 box + 1px gray-05, value/angle gray-00 → disabled gray-04 */ .sb-dropdown{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--gray-05);border-radius:var(--r-5);padding:7px 10px;background:var(--white);color:var(--gray-00);font:var(--t-tiny);cursor:pointer;min-width:160px;box-sizing:border-box;} .sb-dropdown .chev{margin-left:auto;color:var(--gray-00);font-size:11px;} .sb-dropdown.is-disabled,.sb-dropdown.is-disabled .chev{color:var(--gray-04);} /* (button-style dropdown = .sb-btn--dropdown, defined in the Buttons section: white → hover gray-06, selected blue-02) */ /* ---------- TABS — three systems ---------- IN-PAGE TAB BAR (tabBarView, CustomTabBarViewStyle). button pad s8. primary = UNDERLINE (gray-00) + UPPERCASE titles + mediumLabel, fg gray-00 (disabled gray-05). */ .sb-tabbar{display:inline-flex;border-bottom:1px solid var(--gray-06);} .sb-tabbar button{font:var(--t-label);text-transform:uppercase;letter-spacing:.04em;color:var(--gray-00);background:none;border:none;padding:8px;cursor:pointer;position:relative;} .sb-tabbar button.on::after{content:"";position:absolute;left:8px;right:8px;bottom:-1px;height:2px;background:var(--gray-00);} .sb-tabbar button:disabled{color:var(--gray-05);cursor:default;} /* secondary = pure color-shift (fg gray-04 → selected gray-00), boldTiny, NO underline */ .sb-tabbar--secondary{border-bottom:none;gap:6px;} .sb-tabbar--secondary button{font:var(--t-tiny-bold);text-transform:none;letter-spacing:0;color:var(--gray-04);} .sb-tabbar--secondary button.on{color:var(--gray-00);} .sb-tabbar--secondary button.on::after{display:none;} /* MOBILE BOTTOM NAV (tabbedPage) — FA SOLID glyphs · selected gray-00 / unselected gray-03 · LEGACY (old nav) — superseded by .sb-bn-* (new nav) */ .sb-bottomnav{display:flex;background:var(--white);border-top:1px solid var(--gray-06);padding:8px 0 0;} .sb-bottomnav .tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;color:var(--gray-03);font:var(--t-indicator);background:none;border:none;cursor:pointer;padding:2px 0 8px;} .sb-bottomnav .tab i{font-size:18px;} .sb-bottomnav .tab.on{color:var(--gray-00);} /* PAGE INDICATORS — dots 8 / spacing 8, gray-05 → active blue-01, border gray-04 → active blue-01, max 5 */ .sb-dots{display:inline-flex;gap:8px;align-items:center;} .sb-dots .pd{width:8px;height:8px;border-radius:50%;background:var(--gray-05);box-shadow:inset 0 0 0 1px var(--gray-04);box-sizing:border-box;} .sb-dots .pd.on{background:var(--blue-01);box-shadow:inset 0 0 0 1px var(--blue-01);} .sb-dots .pd.dis{opacity:.45;} /* ---------- CHARTS — series palette + bar/line/funnel/pie/tooltip/legend ---------- Series colors come from --series-1..9 (PieChartStyle.colors order). */ .sb-legend{display:flex;flex-wrap:wrap;gap:10px 16px;} .sb-legend .it{display:inline-flex;align-items:center;gap:6px;font:var(--t-label);color:var(--fg-secondary);} .sb-legend .sw{width:10px;height:10px;border-radius:var(--r-2);flex:none;} /* chart tooltip — gray07 bg / gray00 text / 2px gray06 border / r5 (≠ general tooltip) */ .sb-charttip{background:var(--gray-07);color:var(--gray-00);border:2px solid var(--gray-06);border-radius:var(--r-5);padding:6px 9px;font:var(--t-paragraph-sb);display:inline-block;} .sb-charttip .k{font:var(--t-label);color:var(--gray-02);} /* bar chart — bars blue-01, top-rounded r3; axis band gray07; labels mediumIndicator gray03 */ .sb-bars{display:flex;align-items:flex-end;gap:10px;height:120px;padding:8px 8px 0;background:var(--gray-07);border-radius:var(--r-5);} .sb-bars .bar{flex:1;background:var(--series-1);border-radius:var(--r-3) var(--r-3) 0 0;min-width:14px;} .sb-axis{display:flex;gap:10px;padding:5px 8px 0;} .sb-axis span{flex:1;text-align:center;font:var(--t-indicator);color:var(--gray-03);min-width:14px;} /* funnel — labels mediumIndicator gray02 on gray07 */ .sb-funnel{display:flex;flex-direction:column;gap:3px;align-items:center;} .sb-funnel .seg{height:26px;display:flex;align-items:center;justify-content:center;font:var(--t-indicator);color:var(--gray-02);border-radius:var(--r-2);} /* pie via conic-gradient */ .sb-pie{width:104px;height:104px;border-radius:50%;} .sb-pie-center{position:relative;display:inline-flex;align-items:center;justify-content:center;} .sb-pie-center .lbl{position:absolute;font:var(--t-paragraph-sb);color:var(--global-white);} /* ---------- DATE PICKERS — calendar / range / presets / time ---------- day-cell colored by RangeSelectorState (cell = bg + 4px border + semiBoldTitle text). */ .sb-cal{background:var(--white);border:1px solid var(--gray-06);border-radius:var(--r-7);padding:12px;display:inline-block;} .sb-cal-head{font:var(--t-title);color:var(--gray-00);text-transform:uppercase;letter-spacing:.02em;display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;} .sb-cal-head .nav{color:var(--gray-02);font-size:12px;cursor:pointer;} .sb-cal-grid{display:grid;grid-template-columns:repeat(7,48px);} .sb-cal-grid .wd{font:var(--t-tiny);color:var(--gray-00);text-align:center;padding:4px 0;font-weight:500;} .sb-day{height:48px;display:flex;align-items:center;justify-content:center;position:relative; font:var(--t-title);color:var(--gray-00);background:transparent;border:4px solid var(--white);box-sizing:border-box;border-radius:var(--r-7);cursor:pointer;} .sb-day.is-disabled{color:var(--gray-03);cursor:default;} .sb-day.is-hover{background:var(--gray-06);border-color:var(--gray-06);} .sb-day.in-range{background:var(--gray-06);color:var(--blue-01);border-color:var(--white);} .sb-day.is-selected{background:var(--blue-02);color:var(--blue-01);border-color:var(--blue-02);} .sb-day .ev{position:absolute;bottom:3px;left:50%;transform:translateX(-50%);width:4px;height:4px;border-radius:50%;background:var(--blue-01);} /* time picker list */ .sb-timelist{background:var(--white);border:1px solid var(--gray-05);border-radius:var(--r-5);padding:4px;display:inline-flex;flex-direction:column;gap:2px;width:120px;max-height:140px;overflow:auto;} .sb-timelist .t{font:var(--t-tiny);color:var(--gray-00);padding:6px 10px;border-radius:var(--r-5);cursor:pointer;} .sb-timelist .t:hover{background:var(--gray-06);} .sb-timelist .t.on{background:var(--blue-02);color:var(--blue-01);} /* Rolodex — Cupertino date/time wheels (216px tall): centered full-width selection band + dimmed neighbors. Two instances side by side (RolodexDatePicker: Month·Day·Year · RolodexTimePicker: Hour·Minute·AM/PM). */ .sb-rolodex{position:relative;display:flex;height:216px;background:var(--white);border:1px solid var(--gray-05);border-radius:var(--r-7);overflow:hidden;} /* centered selection band */ .sb-rolodex::before{content:"";position:absolute;left:6px;right:6px;top:50%;transform:translateY(-50%);height:36px;background:var(--gray-07);border-radius:var(--r-5);pointer-events:none;} .sb-rolodex .col{position:relative;flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;} .sb-rolodex .col .v{height:36px;line-height:36px;text-align:center;width:100%;font:var(--t-tiny);} .sb-rolodex .col .v.n2{color:var(--gray-05);font-size:12px;} /* far neighbor */ .sb-rolodex .col .v.n1{color:var(--gray-03);} /* near neighbor */ .sb-rolodex .col .v.mid{font:var(--t-title);color:var(--gray-00);position:relative;} /* selected, on the band */ /* ---------- FEEDBACK / OVERLAYS — toast / loading / progress / tooltip / scrim ---------- TOAST (toast theme): r7, SOLID 01 bg + semiBoldParagraph WHITE text + leading FA (≠ banner's 02 tint). */ .sb-toast{display:inline-flex;align-items:center;gap:16px;padding:16px 24px 16px 16px;border-radius:var(--r-7);font:var(--t-paragraph-sb);color:var(--global-white);} .sb-toast i{font-size:12px;width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;} .sb-toast--success{background:var(--green-01);} .sb-toast--error{background:var(--red-01);} .sb-toast--warning{background:var(--orange-01);} .sb-toast--info{background:var(--blue-01);} .sb-toast--progress{background:var(--gray-00);} /* reserved: progress toast variant */ /* LOADING — branded animated-S (loadingIndicator s24/s24/s32/s48). Static logo stand-in + spin. */ .sb-loader{display:inline-block;animation:sb-spin 1.1s linear infinite;} .sb-loader img{display:block;width:100%;height:100%;} .sb-loader.s24{width:24px;height:24px;}.sb-loader.s32{width:32px;height:32px;}.sb-loader.s48{width:48px;height:48px;} /* PROGRESS (progressIndicator): bar gray-00, track gray-06, label mediumIndicator gray-02 */ .sb-progress{display:flex;flex-direction:column;gap:5px;width:180px;} .sb-progress .track{height:6px;border-radius:var(--radius-pill);background:var(--gray-06);overflow:hidden;} .sb-progress .bar{height:100%;border-radius:var(--radius-pill);background:var(--gray-00);} .sb-progress .pl{font:var(--t-indicator);color:var(--gray-02);} /* TOOLTIP (general): bg gray-00 / title semiBoldParagraph white / message mediumTiny gray-06; destructive red */ .sb-tooltip{display:inline-block;background:var(--gray-00);border-radius:var(--r-5);padding:7px 10px;max-width:200px;} .sb-tooltip .tt{font:var(--t-paragraph-sb);color:var(--white);} .sb-tooltip .tm{font:var(--t-tiny);color:var(--gray-06);margin-top:2px;} .sb-tooltip--destructive{background:var(--red-01);} .sb-tooltip--destructive .tt,.sb-tooltip--destructive .tm{color:var(--global-white);} /* OVERLAY scrim — --overlay-trans-64 (rgba(0,0,0,0.64)) + blur container */ .sb-scrim{background:var(--overlay-trans-64);border-radius:var(--r-5);display:flex;align-items:center;justify-content:center;} .sb-scrim.blur{backdrop-filter:blur(2px);} /* ---------- ACTIVITY FEED — ActivityItem (one parameterized template) ---------- stamp row (h32: actor icon + name + direction · spacer · timestamp · ellipsis) above a bordered bubble. 8 color variants = 02 bg + 01 fg + 01 border (neutral gray00 = gray07 header/gray06 content/gray06 border); route by STATE: default gray00 · destructive red · type accents otherwise. selected → blue02. */ .sb-activity{display:flex;flex-direction:column;gap:4px;max-width:420px;} .sb-stamp{display:flex;align-items:center;gap:8px;height:32px;} .sb-stamp .ai{font-size:12px;color:var(--gray-02);width:18px;text-align:center;} .sb-stamp .an{font:var(--t-tiny);color:var(--gray-02);font-weight:500;} .sb-stamp .dir{color:var(--gray-02);font-size:12px;} .sb-stamp .ts{margin-left:auto;font:var(--t-tiny);color:var(--gray-02);font-weight:500;} .sb-stamp .menu{color:var(--gray-03);font-size:13px;width:24px;text-align:center;cursor:pointer;} .sb-bubble{border:2px solid var(--gray-06);border-radius:var(--r-5);overflow:hidden;flex:1;min-width:0;} /* indicator pill — production renders direction as its OWN element (Row[pill · bubble]), not a bubble border */ .sb-airow{display:flex;gap:6px;align-items:stretch;} .sb-ind{width:4px;border-radius:var(--r-2);flex:none;background:var(--gray-06);} .sb-ind--blue{background:var(--blue-01);} .sb-ind--red{background:var(--red-01);} .sb-ind--green{background:var(--green-01);} .sb-ind--purple{background:var(--purple-01);} .sb-ind--orange{background:var(--orange-01);} .sb-ind--indigo{background:var(--indigo-01);} .sb-ind--gray4{background:var(--gray-05);} .sb-bubble .hdr{min-height:40px;background:var(--gray-07);border-bottom:1px solid var(--gray-06);display:flex;align-items:center;gap:8px;padding:4px 8px;} .sb-bubble .hdr .ti{font-size:12px;color:var(--gray-00);width:16px;text-align:center;} .sb-bubble .hdr .title{font:var(--t-paragraph);color:var(--gray-00);} .sb-bubble .hdr .sub{font:var(--t-tiny);color:var(--gray-04);} .sb-bubble .hdr .hide{margin-left:auto;font:var(--t-tiny);font-weight:600;color:var(--blue-01);cursor:pointer;} .sb-bubble .content{padding:12px;background:var(--white);} .sb-bubble .subject{font:var(--t-tiny);color:var(--gray-02);font-weight:500;} .sb-bubble .bdiv{height:1px;background:var(--gray-06);margin:8px 0;} .sb-bubble .body{font:var(--t-tiny);color:var(--gray-02);} .sb-bubble .body a{color:var(--blue-01);} /* colored variants — FULL 2px border in the route 01 color; content tinted (02); header strip stays gray-07; header title+icon take the route 01 color. Direction is the SEPARATE .sb-ind pill (not a border). */ .sb-bubble--blue{border-color:var(--blue-01);} .sb-bubble--blue .content{background:var(--blue-02);} .sb-bubble--blue .hdr .title,.sb-bubble--blue .hdr .ti{color:var(--blue-01);} .sb-bubble--red{border-color:var(--red-01);} .sb-bubble--red .content{background:var(--red-02);} .sb-bubble--red .hdr .title,.sb-bubble--red .hdr .ti{color:var(--red-01);} .sb-bubble--green{border-color:var(--green-01);} .sb-bubble--green .content{background:var(--green-02);} .sb-bubble--green .hdr .title,.sb-bubble--green .hdr .ti{color:var(--green-01);} .sb-bubble--purple{border-color:var(--purple-01);} .sb-bubble--purple .content{background:var(--purple-02);} .sb-bubble--purple .hdr .title,.sb-bubble--purple .hdr .ti{color:var(--purple-01);} .sb-bubble--orange{border-color:var(--orange-01);} .sb-bubble--orange .content{background:var(--orange-02);} .sb-bubble--orange .hdr .title,.sb-bubble--orange .hdr .ti{color:var(--orange-01);} .sb-bubble--indigo{border-color:var(--indigo-01);} .sb-bubble--indigo .content{background:var(--indigo-02);} .sb-bubble--indigo .hdr .title,.sb-bubble--indigo .hdr .ti{color:var(--indigo-01);} /* --- activity feed extensions (production-fidelity, additive) --- */ /* A) muted canceled/opened route — gray border + gray title/icon, white content */ .sb-bubble--gray4{border-color:var(--gray-05);} .sb-bubble--gray4 .content{background:var(--white);} .sb-bubble--gray4 .hdr .title,.sb-bubble--gray4 .hdr .ti{color:var(--gray-04);} /* B) dashed route (scheduled/pending) — 2px dashed border in the route color */ .sb-bubble--dashed{border-style:dashed;} /* D) scheduled countdown chip in the header — mediumTiny, color-stepped by lead time · reserved ramp: not all steps appear in demos */ .sb-sched{font:var(--t-tiny);font-weight:500;white-space:nowrap;} .sb-sched--soon{color:var(--red-01);} /* ≤30m */ .sb-sched--hours{color:var(--yellow-01);} /* <3h */ .sb-sched--today{color:var(--orange-01);} /* <24h */ .sb-sched--later{color:var(--green-01);} /* ≥24h */ /* E) body @mentions */ .sb-bubble .body .mention{font:var(--t-paragraph-sb);color:var(--blue-01);} /* F) record-row pieces in the header (Deal/Folder/Deposit/Appointment/Task) */ .sb-bubble .hdr .eref{display:inline-flex;align-items:center;gap:6px;font:var(--t-tiny);color:var(--gray-00);padding-left:8px;border-left:1px solid var(--gray-06);} .sb-bubble .hdr .eref i{font-size:12px;color:var(--gray-04);} .sb-bubble .hdr .state{margin-left:auto;font:var(--t-tiny);font-weight:600;white-space:nowrap;} /* --- activity rich content (additive) --- */ /* A) call player row — play button + elapsed + seek + duration, with View Transcript link below */ .sb-player{display:flex;align-items:center;gap:10px;} .sb-player .play{width:32px;height:32px;border-radius:var(--r-5);background:var(--green-02);color:var(--green-01);border:none;display:inline-flex;align-items:center;justify-content:center;font-size:12px;cursor:pointer;flex:none;} .sb-player--red .play{background:var(--red-02);color:var(--red-01);} .sb-player .elapsed,.sb-player .duration{font:var(--t-tiny);color:var(--gray-02);flex:none;} .sb-player .seek{flex:1;height:4px;border-radius:var(--radius-pill);background:var(--gray-06);position:relative;} .sb-player .seek .fill{position:absolute;left:0;top:0;bottom:0;width:40%;border-radius:var(--radius-pill);background:var(--green-01);} .sb-player--red .seek .fill{background:var(--red-01);} .sb-player .seek .thumb{position:absolute;left:40%;top:50%;transform:translate(-50%,-50%);width:10px;height:10px;border-radius:50%;background:var(--green-01);} .sb-player--red .seek .thumb{background:var(--red-01);} .sb-transcript{display:inline-block;margin-top:8px;font:var(--t-tiny);font-weight:600;color:var(--blue-01);cursor:pointer;} /* B) attachment thumbnail — 144×108 tile, folded corner, file glyph, filename strip */ .sb-attach{position:relative;width:144px;height:108px;border-radius:var(--r-3);background:var(--gray-06);overflow:hidden;display:flex;align-items:center;justify-content:center;} .sb-attach .corner{position:absolute;top:0;right:0;width:0;height:0;border-top:16px solid var(--gray-05);border-left:16px solid transparent;} .sb-attach .glyph{font-size:16px;color:var(--gray-04);} .sb-attach .fname{position:absolute;left:0;right:0;bottom:0;padding:4px 8px;background:var(--gray-07);font:var(--t-indicator);color:var(--gray-02);} /* C) in-progress outline — 2px solid green-01 all sides, header-only (content hidden) */ .sb-bubble--live{border:2px solid var(--green-01);border-left:2px solid var(--green-01);} .sb-bubble--live .hdr{border-bottom:none;} .sb-bubble--live .hdr .title,.sb-bubble--live .hdr .ti{color:var(--green-01);} .sb-bubble--live .content{display:none;} /* D) PRESCRIPTIVE — forward design from Figma, NOT in production code yet: expandable property-diff panel */ .sb-diff{display:flex;flex-direction:column;gap:4px;} .sb-diff .meta{font:var(--t-tiny);color:var(--gray-02);margin-bottom:4px;} .sb-diff .drow{border-radius:var(--r-3);padding:6px 8px;font:var(--t-tiny);} .sb-diff .drow.minus{background:var(--red-02);color:var(--red-01);} .sb-diff .drow.plus{background:var(--green-02);color:var(--green-01);} /* ---------- SCREEN HEADER — reusable nav-header pattern (SectionView, sectionView.primary) ---------- Reference impl: customers_list_view.dart:29-48. Each screen supplies title/counter/rightActions/quick-filters. */ /* .sb-screen / .sb-screen-hdr / .sb-screen-subbar / .sb-filters-btn — RETIRED (Top-Down R1–R3); successors: .sb-pagehead band + .sb-mselbar (desktop) and the .sb-mh-* band (mobile). .sb-screen-body kept (shells consume). */ .sb-screen-body{background:var(--bg-subtle);padding:16px;} /* ---------- ORGANISM: Customer card — CustomerItemView (customer_item_view.dart) ---------- ListItemView.stateful (itemView.row: white + bottom gray-06 divider, hover gray-06, selected blue-03), padding h8/v12, wrapped in CustomerItemViewScaffold (unread spine: s4 wide, r3, left). Body = ExtendedColumn(spacing s8, padding left s12 / bottom s4). */ .sb-cust{position:relative;background:var(--white);border-bottom:1px solid var(--gray-06);padding:12px 8px;cursor:pointer;} .sb-cust:hover{background:var(--gray-06);} .sb-cust.is-selected{background:var(--blue-03);} .sb-cust .spine{position:absolute;left:8px;top:12px;bottom:12px;width:4px;border-radius:var(--r-3);background:var(--gray-05);} .sb-cust .spine.fresh{background:var(--green-01);} /* unreadAt ≤5min */ .sb-cust .spine.recent{background:var(--orange-01);} /* ≤29min */ .sb-cust .spine.stale{background:var(--red-01);} /* >29min */ .sb-cust .col{display:flex;flex-direction:column;gap:8px;padding-left:12px;} /* canonical footer helpers (promoted from comp-customer-card / comp-mobile-screen local copies) — assignee avatars use the ATOMIC .sb-avatar s24 (the old .sb-cust .av clone is dead) */ .sb-cust .qa{width:32px;height:32px;border-radius:var(--r-5);background:var(--gray-06);color:var(--gray-00);display:flex;align-items:center;justify-content:center;font-size:12px;border:none;cursor:pointer;} .sb-cust .sec{display:flex;align-items:center;gap:8px;min-width:0;} .sb-cust .sec.start{align-items:flex-start;} .sb-cust .ibx,.sb-engage .eg-labels .ibx{width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;font-size:12px;color:var(--gray-04);flex:none;} /* = .sb-iconbox in gray-04 (color delta keeps it scoped) */ /* info section */ .sb-cust .info{display:flex;flex-direction:column;gap:4px;padding-bottom:8px;} .sb-cust .nrow{display:flex;align-items:center;gap:8px;} .sb-cust .name{font:var(--t-paragraph-sb);color:var(--fg);letter-spacing:-.01em;} .sb-cust .lnk{color:var(--gray-03);font-size:10px;} .sb-cust .emoji{font-size:13px;} .sb-cust .ago{margin-left:auto;font:var(--t-tiny);color:var(--gray-04);white-space:nowrap;} .sb-cust .crow{display:flex;align-items:center;gap:8px;} .sb-cust .created{font:var(--t-tiny);color:var(--gray-04);} .sb-cust .ntype{margin-left:auto;font:var(--t-tiny);color:var(--gray-00);white-space:nowrap;} .sb-cust .deal{font:var(--t-tiny);color:var(--gray-00);} .sb-cust .plus{font:var(--t-tiny);color:var(--gray-00);} .sb-cust .summary{font:var(--t-tiny);color:var(--gray-00);overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;} .sb-cust .labels{display:flex;flex-wrap:wrap;gap:6px;align-items:center;flex:1;} .sb-cust .lbl-add{width:20px;height:20px;border-radius:var(--r-3);background:var(--gray-06);color:var(--gray-02);border:none;display:inline-flex;align-items:center;justify-content:center;font-size:9px;cursor:pointer;} /* dealer/footer section */ .sb-cust .footer{display:flex;align-items:center;gap:8px;justify-content:space-between;} .sb-cust .assignee,.sb-deal .assignee,.sb-cprofile .cp-dealer .assignee{display:flex;align-items:center;gap:8px;font:var(--t-tiny);color:var(--gray-02);min-width:0;} /* ONE assignee-row recipe */ .sb-cust .actions{display:flex;gap:8px;} /* ---------- .sb-cust--wide — desktop arrangement of the locked .sb-cust molecule (layout rules only) ---------- Header row (name + colored time-ago + inquiry + 32px actions) over the icon-led body rows + footer avatar cluster. Reuses all locked .sb-cust sub-atoms. Standalone = white card (r5, hairline); inside .sb-custlist the card chrome drops and it becomes a FULL-WIDTH hairline row. */ /* FULL-WIDTH CUSTOMERS LIST — rows sit directly on the white content surface: no well, no side gutters, no per-row card chrome; 16px internal inset; hairlines span edge to edge. */ .sb-custlist{background:var(--white);display:flex;flex-direction:column;} .sb-custlist .sb-cust{padding-left:16px;padding-right:16px;} .sb-custlist .sb-cust--wide{border:none;border-radius:0;border-bottom:1px solid var(--gray-06);} .sb-custlist .sb-cust--wide:last-child{border-bottom:none;} .sb-cust--wide{border:1px solid var(--gray-06);border-radius:var(--r-5);border-bottom:1px solid var(--gray-06);} .sb-cust--wide .wide-head{display:flex;align-items:center;gap:8px;} .sb-cust--wide .wide-head .name{font:var(--t-paragraph-sb);color:var(--gray-00);letter-spacing:-.01em;} .sb-cust--wide .wide-head .ago{margin-left:0;font:var(--t-tiny);} /* colored per recency (override the gray-04 default) */ .sb-cust--wide .wide-head .ago.fresh{color:var(--green-01);} .sb-cust--wide .wide-head .ago.recent{color:var(--orange-01);} .sb-cust--wide .wide-head .ago.stale{color:var(--red-01);} .sb-cust--wide .wide-head .inquiry{font:var(--t-tiny);color:var(--gray-03);} .sb-cust--wide .wide-head .actions{display:flex;gap:8px;flex:none;} /* footer avatar cluster — the atomic .sb-avgroup (the old .av-cluster clone is dead) */ /* ---------- ORGANISM: Deal card — DealItemView (deal_item_view.dart) ---------- ListItemView.stateful, DRAGGABLE, style itemView.dealItem (white CARD, r7, resting hairline → dragged shadowCard glow + blue-01 border). Wrapped in DisabledStateContainer (archived → disabled). Body = Column(spacing s16): header block / labels / footer. */ .sb-deal{position:relative;background:var(--white);border:1px solid transparent;border-radius:var(--r-7); padding:14px;box-shadow:var(--shadow-drag-resting);cursor:pointer;display:flex;flex-direction:column;gap:16px;} .sb-deal.is-dragged{border-color:var(--blue-01);background:var(--blue-03);box-shadow:var(--shadow-drag);} .sb-deal .hblock{display:flex;flex-direction:column;gap:8px;} .sb-deal .crow{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;} .sb-deal .cname{font:var(--t-paragraph-sb);color:var(--gray-00);line-height:1.43;} .sb-deal .csub{font:var(--t-label);color:var(--fg-secondary);margin-top:1px;} .sb-deal .ago{font:var(--t-tiny);white-space:nowrap;flex:none;} .sb-deal .ago.fresh{color:var(--green-01);} .sb-deal .ago.recent{color:var(--orange-01);} .sb-deal .ago.stale{color:var(--red-01);} .sb-deal .ago.none{color:var(--gray-02);} .sb-deal .vrow{display:flex;align-items:flex-start;gap:8px;} .sb-deal .vbox{width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;font-size:16px;color:var(--gray-04);flex:none;} .sb-deal .vmid{flex:1;min-width:0;} .sb-deal .vtitle{font:var(--t-tiny);color:var(--gray-02);} .sb-deal .vtrim{font:var(--t-tiny);color:var(--gray-02);} .sb-deal .vright{display:flex;flex-direction:column;align-items:flex-end;flex:none;} .sb-deal .stock{font:var(--t-tiny);color:var(--gray-04);} .sb-deal .price{font:var(--t-tiny);color:var(--blue-01);} .sb-deal .labels{display:flex;flex-wrap:wrap;gap:8px;align-items:center;} .sb-deal .footer{display:flex;align-items:center;justify-content:space-between;gap:8px;} .sb-deal .actions{display:flex;gap:8px;} /* desking-locked variant (DeskingItemStyle: locked green / unlocked blue — SELECTED fill/border at r5, not a stripe) */ .sb-deal--locked{background:var(--green-01);border:1px solid var(--green-01);border-radius:var(--r-5);} .sb-deal--unlocked{background:var(--blue-03);border:1px solid var(--blue-01);border-radius:var(--r-5);} /* ---------- ORGANISM: Vehicle card — VehicleItemView (vehicle_item_view.dart) ---------- ListItemView.stateful (itemView.row). Body = ExtendedRow(s8): photo thumbnail + spec column + trailing. DisabledStateContainer disables when status != available. */ .sb-veh{position:relative;background:var(--white);border-bottom:1px solid var(--gray-06);padding:8px;cursor:pointer;display:flex;align-items:stretch;gap:8px;} .sb-veh:hover{background:var(--gray-06);} .sb-veh.is-selected{background:var(--blue-03);} .sb-veh:hover,.sb-veh.is-selected{border-bottom-color:transparent;} /* photo thumbnail: 80×60, r7, gray07 bg, border gray06 → blue01 selected, stock bar */ .sb-veh .thumb{width:80px;flex:none;border-radius:var(--r-7);overflow:hidden;background:var(--gray-07);box-shadow:inset 0 0 0 1px var(--gray-06);display:flex;flex-direction:column;} .sb-veh.is-selected .thumb{box-shadow:inset 0 0 0 1px var(--blue-01);} .sb-veh .thumb .img{height:60px;display:flex;align-items:center;justify-content:center;overflow:hidden;} .sb-veh .thumb .img img{width:78%;height:auto;} .sb-veh .thumb .img img.ph{width:64%;opacity:.55;} .sb-veh .thumb .stock{background:var(--white);padding:2px 8px;font:var(--t-tiny);color:var(--gray-00);} .sb-veh.is-selected .thumb .stock{color:var(--blue-01);} /* spec column */ .sb-veh .spec{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;padding:4px 0;gap:1px;} .sb-veh .spec .vtitle{font:var(--t-paragraph-sb);color:var(--gray-00);} .sb-veh .spec .vtrim{font:var(--t-tiny);color:var(--gray-00);} .sb-veh .spec .vcond{font:var(--t-tiny);color:var(--gray-02);} .sb-veh .spec .vstatus{font:var(--t-tiny);} .sb-veh .spec .vstatus.available{color:var(--blue-01);} .sb-veh .spec .vstatus.hidden{color:var(--orange-01);} .sb-veh .spec .vstatus.unavailable{color:var(--red-01);} /* trailing */ .sb-veh .trail{display:flex;align-items:center;gap:8px;flex:none;align-self:center;} .sb-veh .trail .price{font:var(--t-tiny-bold);color:var(--blue-01);} .sb-veh .trail .chev{color:var(--gray-03);font-size:13px;} .sb-veh .noveh{flex:1;display:flex;align-items:center;font:var(--t-paragraph-sb);color:var(--gray-00);} /* ---------- ORGANISM: Appointment card — AppointmentItemView (appointment_item_view.dart) ---------- _AppointmentItemScaffold = ListItemView.stateful (itemView.card), DisabledStateContainer (negative resolution → disabled). Two forms: compact (showDate:true) + dashboard (LeadItemScaffold shell). */ .sb-appt{background:var(--white);border:1px solid var(--gray-06);border-radius:var(--r-7);padding:16px;cursor:pointer;display:flex;gap:8px;} .sb-deal.is-archived,.sb-veh.is-disabled,.sb-appt.is-disabled,.sb-task.is-archived{opacity:.6;filter:grayscale(1);cursor:default;} /* DisabledStateContainer — ONE shared dim */ .sb-appt .col{flex:1;display:flex;flex-direction:column;gap:4px;min-width:0;} .sb-appt .meta{display:flex;flex-wrap:wrap;gap:8px;align-items:center;} /* ---------- APPOINTMENT CARD — REDESIGN v3 (forward spec; Taylor review) ---------- Metadata is plain text, NO chip backgrounds, NO status dots. R1 meta: LEADING CLUSTER time '9:00 am' (semiBoldParagraph gray-00) · relative date (regularParagraph gray-03, after a '·') · DE-COLORED type (mediumTiny gray-03) · spring · STATUS as colored text · menu. DATE RULE: Today/Tomorrow/Yesterday show the WORD only; any other day shows the DATE only ('Jun 14'). R2: customer name (white + ext-link). FOOTER: 16px assignee (atomic avatar — see .sb-avatar) + name · spring · time-rule actions (.sb-msel). STATUS: Set gray-03 · Confirmed blue-01 · Unresolved orange-01 · Completed green-01 · Declined red-01 · Missed gray-04. */ .sb-appt .ap-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px;} .sb-appt .ap-r1{display:flex;align-items:center;gap:8px;} .sb-appt .ap-when{font:var(--t-paragraph-sb);color:var(--gray-00);flex:none;} .sb-appt .ap-date{font:var(--t-paragraph);color:var(--gray-03);flex:none;} .sb-appt .ap-type{font:var(--t-tiny);color:var(--gray-03);flex:none;} .sb-appt .ap-status{font:var(--t-tiny);flex:none;} .sb-appt .ap-status--set{color:var(--gray-03);} .sb-appt .ap-status--confirmed{color:var(--blue-01);} .sb-appt .ap-status--unresolved{color:var(--orange-01);} .sb-appt .ap-status--completed{color:var(--green-01);} .sb-appt .ap-status--declined{color:var(--red-01);} .sb-appt .ap-status--missed{color:var(--gray-04);} .sb-appt .ap-name{display:inline-flex;align-items:center;gap:5px;max-width:100%;background:none;border:none;padding:0;text-align:left;cursor:pointer;} .sb-appt .ap-name .nm{font:var(--t-paragraph-sb);color:var(--gray-00);min-width:0;} .sb-appt .ap-foot{display:flex;align-items:center;gap:8px;padding-top:2px;} .sb-appt .ap-spring{flex:1;} .sb-appt .ap-acts{display:flex;gap:6px;flex:none;} .sb-appt .ap-foot.ap-acts .sb-msel{flex:1;justify-content:center;} .sb-appt .ap-acts .sb-msel .mi{font-size:12px;} .sb-appt .ap-acts .act-complete .mi{color:var(--green-01);} .sb-appt .ap-acts .act-missed .mi{color:var(--orange-01);} .sb-appt .ap-acts .act-declined .mi{color:var(--red-01);} /* UNRESOLVED needs-attention surface — orange-02 tint; keeps the standard 1px gray-06 hairline */ .sb-appt--attn{background:var(--orange-02);} /* DECLINED / MISSED — mirror the done-task treatment: NO whole-card dim (card stays interactive). Strike the time·date cluster + fade it & the type to gray-04; status keeps its color; name/ext-link/avatar/menu stay normal. */ .sb-appt--dim .ap-when,.sb-appt--dim .ap-date{text-decoration:line-through;text-decoration-color:var(--gray-04);} .sb-appt--dim .ap-when{color:var(--gray-04);} .sb-appt--dim .ap-date,.sb-appt--dim .ap-type{color:var(--gray-04);} /* MANAGER ROW — .sb-appt--row: information-minimum single line (~44px); hover/click expands to operator card. time (semiBold 64px) · customer name (ellipsis) · STATUS as colored text (.ap-status) · 16px assignee avatar. No chips, no dots. */ .sb-appt--row{align-items:center;gap:10px;padding:0 12px;min-height:44px;} .sb-appt--row .mr-time{width:64px;flex:none;font:var(--t-paragraph-sb);color:var(--gray-00);} .sb-appt--row .mr-name{flex:1;min-width:0;font:var(--t-paragraph);color:var(--gray-00);} /* ---------- ORGANISM: Task card — TaskItemView (task_item_view.dart) ---------- DRAGGABLE (DragTarget + CustomDraggableView, kanban). Style itemView.taskItem. _TaskItemContent = ListItemView.stateful(taskItem), DisabledStateContainer(isArchived). Row: RadioButton (toggle done) + Expanded[ status labels row + LeadItemScaffold(avatar + titles + customer) ]. */ .sb-task{position:relative;background:var(--white);border:1px solid transparent;border-radius:var(--r-7); padding:8px 16px 16px 8px;cursor:pointer;display:flex;gap:8px;align-items:flex-start;} .sb-task.is-dragged{border-color:var(--blue-01);background:var(--blue-03);box-shadow:var(--shadow-drag);} .sb-task .radio{margin-top:2px;} /* dragging source gap: gray04 fill, gray03 drop shadow · reserved: runtime drag state */ .sb-task-gap{height:56px;border-radius:var(--r-7);background:var(--gray-04);box-shadow:0 2px 0 0 var(--gray-03);} /* ---------- TASK CARD — REDESIGN v3 (forward spec; Taylor review) ---------- R1: completion radio (inline) · TASK TITLE (semiBoldParagraph gray-00, flex) · spring · WHEN text (overdue red-01 / due-soon orange-01 / future·done gray-03) · menu. R2: CUSTOMER NAME subtitle (semiBoldParagraph gray-00 + ext-link), at the CARD's left padding — full width UNDER the radio. FOOTER: 16px assignee (atomic avatar) + name · spring · exactly ONE quick action (.sb-msel): Call / Text / Email (phone/text/email todos) or View (fa-user, opens the customer) for 'action' tasks. DONE strikes the TITLE only. */ .sb-task .tk-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px;} .sb-task .tk-r1{display:flex;align-items:center;gap:8px;} .sb-task .tk-r1 .radio{margin-top:0;} .sb-task .tk-title{flex:1;min-width:0;font:var(--t-paragraph-sb);color:var(--gray-00);} .sb-task .tk-when{flex:none;font:var(--t-tiny);} .sb-task .tk-when--overdue{color:var(--red-01);} .sb-task .tk-when--soon{color:var(--orange-01);} .sb-task .tk-when--future{color:var(--gray-03);} .sb-task .tk-when--done{color:var(--gray-03);} /* R2 customer subtitle — regularParagraph, lighter; sits at the CARD's left padding (full width under the radio) */ .sb-task .tk-name{display:inline-flex;align-items:center;gap:5px;max-width:100%;background:none;border:none;padding:0 0 0 8px;cursor:pointer;} .sb-task .tk-name .nm{font:var(--t-paragraph-sb);color:var(--gray-00);min-width:0;} .sb-task .tk-foot{display:flex;align-items:center;gap:8px;padding:2px 0 0 8px;} .sb-task .tk-spring{flex:1;} /* DONE — green check radio + struck TITLE (row 1); customer row + menu + avatar stay active (card not dimmed) */ .sb-task--done .radio .ring{background:var(--green-01);box-shadow:inset 0 0 0 1px var(--green-01);} .sb-task--done .radio .ring .dot{display:none;} .sb-task--done .radio .ring .chk{color:var(--white);font-size:7px;line-height:1;} .sb-task--done .tk-title{text-decoration:line-through;text-decoration-color:var(--gray-04);} /* ATTENTION TINTS — match the appointment Unresolved treatment: surface tint, standard gray-06 hairline kept */ .sb-task--soon{background:var(--orange-02);} /* due <24h */ .sb-task--over{background:var(--red-02);} /* past due */ /* ---------- ORGANISM: Doc cards ×5 — MultiUseItemView compositions (customer_profile/docs/*) ---------- Each = MultiUseItemView (leadingIconStateful filled / plusStateful empty): leading IconBox + title + subtitle + trailing action. itemType row/card/cardDashed (cardDashed for add-new). */ .sb-doc{display:flex;align-items:center;gap:10px;background:var(--white);border:1px solid var(--gray-05); border-radius:var(--r-7);padding:10px 12px;cursor:pointer;} .sb-doc--dashed{border-style:dashed;background:var(--white);} .sb-doc--card{border-color:var(--gray-05);} .sb-doc .dicon{width:48px;height:48px;display:inline-flex;align-items:center;justify-content:center;font-size:12px;color:var(--gray-00);flex:none;} .sb-doc--dashed .dicon{color:var(--gray-05);} .sb-doc .dbody{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;} .sb-doc .dtitle{font:var(--t-paragraph-sb);color:var(--gray-00);} .sb-doc .dsub{font:var(--t-tiny);color:var(--fg-secondary);} .sb-doc--dashed .dsub{color:var(--gray-04);} .sb-doc .dtrail{flex:none;width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;color:var(--gray-00);font-size:12px;background:none;border:none;cursor:pointer;} .sb-doc .dadd{flex:none;width:32px;height:32px;background:transparent;color:var(--gray-00);border:none;display:inline-flex;align-items:center;justify-content:center;font-size:12px;} /* Trade-In doc card — the multi-section itemView.card form (TradeInItemView): header (vehicle title/trim/meta + overflow) + a row of TypedInputFields (ACV / Allowance / Payoff) + a row of valuation tiles (Low/Avg/High/ Retail + Equity highlighted blue). */ .sb-trade{background:var(--white);border:1px solid var(--gray-05);border-radius:var(--r-7);padding:16px;display:flex;flex-direction:column;gap:16px;} .sb-trade .thead{display:flex;gap:8px;align-items:flex-start;} .sb-trade .tinfo{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;padding:4px 0;} .sb-trade .ttitle{font:var(--t-paragraph-sb);color:var(--gray-00);} .sb-trade .ttrim{font:var(--t-tiny);color:var(--gray-00);} .sb-trade .tmeta{font:var(--t-tiny);color:var(--gray-02);} .sb-trade .tmenu{flex:none;width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;color:var(--gray-00);font-size:12px;background:none;border:none;cursor:pointer;} .sb-trade .trow{display:flex;gap:8px;} .sb-trade .trow .sb-field{min-width:0;flex:1;} .sb-trade .tval{flex:1;min-width:0;background:var(--gray-06);border:1px solid var(--gray-05);border-radius:var(--r-5);padding:8px 2px;display:flex;flex-direction:column;align-items:center;text-align:center;} .sb-trade .tval .v{font:var(--t-tiny);color:var(--gray-00);overflow:hidden;text-overflow:ellipsis;max-width:100%;} .sb-trade .tval .l{font:var(--t-indicator);color:var(--gray-00);} .sb-trade .tval.equity{background:var(--blue-02);} .sb-trade .tval.equity .v,.sb-trade .tval.equity .l{color:var(--blue-01);} /* ---------- ORGANISM: Metric-Chart Scorecard — MarketingChartSection (marketing_chart_section.dart) ---------- Tier-2 composite. SectionView.noPadding (style sectionView.dashboard): • HEADER — title (boldTiny gray-00) + info tooltip (CustomIconButton.info, gray-03). • HEADER-BOTTOM — the SCORECARD ROW: ExtendedListView.adaptive of statsCard tiles (cross/main spacing s8, minItemWidth ~100, MAX 4 columns, padding l8/r8/b8) — one tile per metric. • BODY — the CHART: multi-series LineChart (one LineChartGroup per metric with showInChart; stroke 2px, color = metric color from the series palette --series-1..9 IN ORDER, fill = belowBar @20%, secondary axis + formatter, dateOnly x-axis). 10 grid lines. Loading → LoadingIndicator centered at the LineChart's height. Section is a white surface (resting card: flat + 1px hairline) on the gray-07 well. Sibling variants TrafficChartSection / ConversionsChartSection reuse this exactly (different metrics); the sales dashboard pairs the same scorecards with a FunnelChart in place of the LineChart. */ .sb-metricsec{font-family:var(--font-sans);} /* shell = .sb-card */ /* header (SectionView header, noPadding → compact title row) */ .sb-metricsec .ms-hdr{display:flex;align-items:center;gap:8px;padding:12px 12px 8px 16px;} .sb-metricsec .ms-hdr .ms-title{font:var(--t-tiny-bold);color:var(--gray-00);} /* boldTiny */ .sb-metricsec .ms-hdr .ms-info{color:var(--gray-03);} /* info tooltip — tooltipPosition LEFT (right after the title) */ /* header-bottom: the scorecard row — adaptive grid, MAX 4 columns, pad l8/r8/b8, spacing s8 */ .sb-metricsec .ms-cards{display:grid;grid-template-columns:repeat(4,minmax(100px,1fr));gap:8px;padding:0 8px 8px;} .sb-metricsec--3 .ms-cards{grid-template-columns:repeat(3,minmax(100px,1fr));} /* reserved: 3-col variant */ .sb-metricsec--mobile .ms-cards{grid-template-columns:repeat(2,minmax(100px,1fr));} /* body: the LineChart */ .sb-metricsec .ms-chart{padding:8px 16px 16px;} .sb-metricsec .ms-chart svg{display:block;width:100%;} .sb-metricsec .ms-xaxis{display:flex;justify-content:space-between;padding:4px 4px 0;} .sb-metricsec .ms-xaxis span{font:var(--t-indicator);color:var(--gray-03);} /* dateOnly x-axis labels */ .sb-metricsec .ms-legend{margin-top:10px;} /* loading — LoadingIndicator centered at LineChart height (branded animated-S stand-in) */ .sb-metricsec .ms-chart.is-loading{display:flex;align-items:center;justify-content:center;min-height:160px;padding-top:8px;padding-bottom:16px;} /* ---------- ORGANISM: Report Drilldown — SalesReportDrilldownPage / AudienceReportDrilldownPage ---------- drilldown_page_body.dart. "Tap a metric → see the records." SHELL = CommonScaffold (CommonAppBar title = the metric/report-cell name) + DrilldownPageBody. The Sales dashboard AND the Audience builder wire the SAME body. DS: .sb-drillpage (scaffold) + .sb-drillbody (the list). BODY = CustomRefreshIndicator + LoadingListStateConsumer + ExtendedListView.builder (infinite scroll, loadMore) rendering a POLYMORPHIC list — each row = the matching Tier-1 entity card by type, in its "Drilldown" wrapper (thin wrapper around the card + a drill onTap → cross-tab nav; non-openable → warn toast). STATES: default (typed rows) · loading (MultiUseItemView.row skeletons) · empty (InfoView). */ .sb-drillpage{display:flex;flex-direction:column;background:var(--bg-subtle);border:1px solid var(--gray-06);border-radius:var(--r-5);overflow:hidden;font-family:var(--font-sans);position:relative;} /* CommonAppBar — white band ≈48px: PageBackButton + title (+ count) + rightActions */ .sb-drillpage .appbar{display:flex;align-items:center;gap:6px;min-height:48px;padding:0 8px 0 4px;background:var(--white);border-bottom:1px solid var(--gray-06);flex:none;} .sb-drillpage .appbar .title{font:var(--t-paragraph-sb);color:var(--gray-00);} .sb-drillpage .appbar .count{font:var(--t-tiny);color:var(--gray-00);} /* RoundedText tiny, transparent */ .sb-drillpage .appbar .acts{margin-left:auto;display:flex;align-items:center;gap:6px;} /* DrilldownPageBody — the list well (gray-07), items gapped s8 */ .sb-drillbody{flex:1;overflow:auto;background:var(--bg-subtle);padding:8px;display:flex;flex-direction:column;gap:8px;} /* CustomRefreshIndicator hint (pull-to-refresh) */ .sb-drill-refresh{display:flex;align-items:center;justify-content:center;gap:8px;padding:2px 0 6px;font:var(--t-label);color:var(--gray-03);} /* Drilldown wrapper — thin card surface for ROW-type entities (Customer / Vehicle / UserSession) pulled into the mixed report list; card-type entities (Deal / Task / Appointment) are already cards → used directly. */ .sb-drill-card{background:var(--white);border:1px solid var(--gray-06);border-radius:var(--r-7);overflow:hidden;cursor:pointer;transition:border-color .12s;} .sb-drill-card:hover{border-color:var(--gray-05);} .sb-drill-card>.sb-cust,.sb-drill-card>.sb-veh{border-bottom:none;} /* loading row — MultiUseItemView.row skeleton (generic, NOT the rich per-card shimmer) */ .sb-drill-skel{display:flex;align-items:center;gap:10px;background:var(--white);border:1px solid var(--gray-06);border-radius:var(--r-7);padding:12px;} .sb-drill-skel .sk-body{flex:1;display:flex;flex-direction:column;gap:7px;} /* ---------- ORGANISM: Segment / Audience Builder — SegmentsBuilderSection + SegmentBuilderPage ---------- marketing/segments_builder/segments_builder_section.dart + audiences/segment_builder/. The rule-builder is a SINGLE self-contained column — its live preview is the AudienceSize bar. The RESULTS list is a SEPARATE DrilldownPageBody drill-in PAGE you navigate to (NOT an inline pane). LAYOUT = SectionView "Audiences" (+ rightActions) → ScaffoldSectionContainer (ShadowPosition.bottom) → ExtendedColumn[ _AudienceSizeSegmentView → "Include any {mode} who…" prompt → SegmentsListView → _AddSegmentButton ]. */ .sb-segbuilder{background:var(--white);overflow:hidden;font-family:var(--font-sans);display:flex;flex-direction:column;box-shadow:0 6px 0 -4px var(--shadow-popover-color);} /* SectionView header (gray-07 band): title "Audiences" + rightActions */ .sb-segbuilder .seg-head{padding:8px 8px 8px 16px;flex:none;} /* sb-sechead override: right pad 8 */ /* ScaffoldSectionContainer → ExtendedColumn (pad l16/t16/r16/b32, spacing s8) */ .sb-segbuilder .seg-body{padding:16px 16px 32px;display:flex;flex-direction:column;gap:8px;overflow:auto;} /* _AudienceSizeSegmentView — ExtendedRow: left = "Audience Size" + count (boldTiny BLUE01); right (Expanded) = CustomProgressIndicator STACKED bar (Converted: blue02 track / blue01 fill · Unconverted: gray06 track / gray05 fill — the fill = the audience subset) + legends. Recalculating → shimmer. */ .sb-audsize{display:flex;align-items:center;gap:16px;padding:12px 14px;} .sb-audsize .as-left{flex:none;display:flex;flex-direction:column;gap:2px;} .sb-audsize .as-lbl{font:var(--t-indicator);color:var(--gray-02);} .sb-audsize .as-count{font:var(--t-tiny-bold);color:var(--blue-01);} /* boldTiny BLUE01 — plain Text(decimal), no arrow */ .sb-audsize .as-right{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px;} /* one continuous CustomProgressIndicator bar: gray-05 border, transparent bg, NO gap; segments sized by total, each = outer total color + inner audience fill growing from the left */ .sb-audsize .as-bar{display:flex;height:10px;border:1px solid var(--gray-05);border-radius:var(--r-2);overflow:hidden;background:transparent;} .sb-audsize .as-bar .track{position:relative;overflow:hidden;} .sb-audsize .as-bar .track.conv{background:var(--blue-02);} .sb-audsize .as-bar .track.unconv{background:var(--gray-06);} /* reserved: unconverted track */ .sb-audsize .as-bar .track .fill{position:absolute;left:0;top:0;bottom:0;} .sb-audsize .as-bar .track.conv .fill{background:var(--blue-01);} .sb-audsize .as-bar .track.unconv .fill{background:var(--gray-05);} /* footer row beneath the bar (space-between) */ .sb-audsize .as-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;} .sb-audsize .as-foot .fpct,.sb-audsize .as-foot .ftot{font:var(--t-indicator);color:var(--gray-02);} .sb-audsize .as-legend{display:flex;flex-wrap:wrap;gap:5px 14px;} .sb-audsize .as-legend span{display:inline-flex;align-items:center;gap:5px;font:var(--t-indicator);color:var(--gray-02);} .sb-audsize .as-legend i{width:8px;height:8px;border-radius:var(--r-2);flex:none;} /* prompt line: "Include any {mode} who…" (mode interpolated as plain inline text) + help "?" */ .sb-seg-prompt{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font:var(--t-tiny);color:var(--gray-02);padding:2px 0;} .sb-seg-prompt .help{color:var(--gray-03);} /* SegmentsListView — OR-grouped segments, each a list of VariableInputItemView rows + Add Variable */ .sb-seg-group{border:1px solid var(--gray-06);border-radius:var(--r-7);padding:8px;display:flex;flex-direction:column;gap:8px;background:var(--gray-07);} .sb-seg-or{align-self:center;font:var(--t-label-sb);color:var(--gray-03);text-transform:uppercase;letter-spacing:.08em;padding:1px 0;} /* VariableInputItemView — a ROUNDED SectionView (sectionView.rounded): header [info · title · pencil · trash] + headerBottom (CustomRadioGroup "Is any of"/"Is none of") + content (OperatorsGroupView + value inputs). */ .sb-vcond{border:1px solid var(--gray-06);border-radius:var(--r-5);background:var(--white);overflow:hidden;} .sb-vcond .vc-head{display:flex;align-items:center;gap:8px;background:var(--gray-07);padding:5px 6px 5px 8px;border-bottom:1px solid var(--gray-06);} .sb-vcond .vc-head .info{color:var(--gray-03);} .sb-vcond .vc-head .vc-title{font:var(--t-tiny-bold);color:var(--gray-00);} .sb-vcond .vc-head .vc-acts{margin-left:auto;display:flex;gap:2px;} .sb-vcond .vc-head .vc-acts .del{color:var(--global-red);} /* trash = globalRed */ .sb-vcond .vc-hb{padding:8px;background:var(--gray-07);border-bottom:1px solid var(--gray-06);} /* headerBottom */ .sb-vcond .vc-body{padding:8px;display:flex;flex-direction:column;gap:8px;background:var(--white);} /* CustomRadioGroup radioGroup.secondary — 2-col grid of icon options (RemoteIconRadioGroupItem: icon + name). resting = white + gray-06 hairline · selected = blue-01 border + blue-02 fill + blue-01 content. */ .sb-radiopick{display:grid;grid-template-columns:1fr 1fr;gap:8px;} .sb-radiopick .opt{display:flex;align-items:center;gap:8px;border:1px solid var(--gray-05);border-radius:var(--r-5);background:var(--white);padding:8px 10px;font:var(--t-tiny);color:var(--gray-00);cursor:pointer;text-align:left;} .sb-radiopick .opt i{font-size:12px;color:var(--gray-00);width:16px;text-align:center;flex:none;} .sb-radiopick .opt.sel{border-color:var(--blue-01);background:var(--blue-03);color:var(--blue-01);} .sb-radiopick .opt.sel i{color:var(--blue-01);} /* TypedInputField value(s) below the operators — 1 col, or 2-col grid when multiple */ .sb-val-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;} .sb-vcond .vc-body>.sb-field,.sb-vcond .vc-body>.sb-val-grid{margin-top:3px;} /* clearance for floating labels */ /* add buttons (CustomButton.plus = textIcon · Add Segment = button.audiences dashed) */ .sb-seg-add{align-self:flex-start;} /* ---------- ORGANISM: Descriptive Text Item — DescriptiveTextItemView (descriptive_text.dart) ---------- The READ/summary "rule sentence" form — the SAME widget powers a SEGMENT condition AND an AUTOMATION action. Interactive ListItemView.stateful (style itemView.audienceSegmentItem: gray-07 fill → hover gray-06 / selected blue-03, 1px gray-06 border, r5). ClipRRect r5 → Row[ left bar (s4, barColor = blue-01 for segments) | Expanded ExtendedRow (pad s16): Text.rich(tokens) + ContextMenuButton (when editable) ]. onTap → opens the editor popover. */ .sb-desc{display:flex;align-items:stretch;background:var(--gray-07);border:1px solid var(--gray-06);border-radius:var(--r-5);overflow:hidden;cursor:pointer;transition:background .12s;} .sb-desc:hover,.sb-desc.is-hover{background:var(--gray-06);} .sb-desc.is-selected{background:var(--blue-03);} .sb-desc .bar{width:4px;flex:none;background:var(--blue-01);} /* barColor — blue-01 for segments (parameterized per use) */ .sb-desc .body{flex:1;min-width:0;display:flex;align-items:center;gap:8px;padding:12px 16px;} /* ExtendedRow pad s16 */ .sb-desc .sentence{flex:1;min-width:0;font:var(--t-tiny);} /* Text.rich(tokens) — mediumTiny 1.23 */ .sb-desc .sb-cardmenu{color:var(--gray-02);} /* sb-cardmenu override: gray-02 here · ContextMenuButton */ /* tokens (DescripriveTextItem → toTextSpans, inline per DescriptiveTextItemStyle) */ .sb-desc .t-con{color:var(--gray-03);} /* .gray04(text) → mediumTiny gray-03 — connector words */ .sb-desc .t-val{color:var(--gray-00);} /* .gray06(text) → mediumTiny gray-00 — plain value token */ .sb-desc .t-dyn{color:var(--gray-00);text-decoration:underline;text-decoration-style:dashed;text-decoration-color:var(--gray-00);text-underline-offset:3px;} /* .gray06Underline(text) → gray-00 + DASHED UNDERLINE — dynamic/editable words */ /* "or" divider (SegmentsListView) — h40, mediumTiny gray-02, left-aligned plain text */ .sb-desc-or{height:40px;display:flex;align-items:center;justify-content:flex-start;gap:10px;font:var(--t-tiny);color:var(--gray-02);} /* AddDescriptiveTextItemButton — empty → full-width DASHED row (button.audiences): gray-06 left bar + title + plus. (hasItems form = a plain textIcon "+ {title}" button → use .sb-btn--text-icon.) */ .sb-desc-add{display:flex;align-items:stretch;border:1px dashed var(--gray-06);border-radius:var(--r-5);overflow:hidden;cursor:pointer;background:transparent;transition:background .12s,border-color .12s;} .sb-desc-add:hover{background:var(--gray-07);border-style:solid;} .sb-desc-add .bar{width:4px;flex:none;background:var(--gray-06);} /* gray-06 bar (vs the item's blue-01) */ .sb-desc-add .body{flex:1;display:flex;align-items:center;gap:8px;padding:12px 16px;font:var(--t-tiny-bold);color:var(--blue-01);} .sb-desc-add .plus{margin-left:auto;color:var(--gray-00);} /* ---------- ORGANISM: Customer Profile header + tab shell — CustomerProfileView (customer_profile_components.dart) ---------- SCREEN = BasePageScaffold: appBar = _CustomerProfileAppBar; body = active tab's content (later prompts). _CustomerProfileAppBar = ExtendedColumn (spacing s8) [ _CustomerAppBarInfoSection · SegmentedControl ]. White appBar surface, hairline bottom. DS: .sb-cprofile. */ .sb-cprofile{font-family:var(--font-sans);} /* shell = .sb-card */ .sb-cprofile .cp-appbar{display:flex;flex-direction:column;gap:8px;padding:12px 12px 0;border-bottom:1px solid var(--gray-06);} /* _CustomerAppBarInfoSection (identity block) = Column spacing s4 */ .sb-cprofile .cp-info{display:flex;flex-direction:column;gap:4px;} /* Row: PageBackButton + Expanded CustomerInfoSection */ .sb-cprofile .cp-idrow{display:flex;align-items:flex-start;gap:8px;} .sb-cprofile .cp-back{flex:none;margin-top:2px;} .sb-cprofile .cp-cust{flex:1;min-width:0;display:flex;align-items:flex-start;gap:12px;} /* CustomerInfoSection (showDuplicates:false) — RULE 1: customers NEVER have avatars; name/status lead the header */ .sb-cprofile .cp-id{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;} .sb-cprofile .cp-namerow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;} .sb-cprofile .cp-name{font:var(--t-heading5);color:var(--gray-00);letter-spacing:-.01em;} .sb-cprofile .cp-name-lnk{color:var(--gray-04);font-size:12px;} .sb-cprofile .cp-sentiment{font-size:15px;} .sb-cprofile .cp-contact{display:flex;align-items:center;gap:6px 14px;flex-wrap:wrap;} .sb-cprofile .cp-contact a,.sb-cprofile .cp-contact span{display:inline-flex;align-items:center;gap:6px;font:var(--t-tiny);color:var(--gray-02);text-decoration:none;} .sb-cprofile .cp-contact i{font-size:11px;color:var(--gray-04);} /* DealerInfoSection (leadingChildren = CustomerStatusDropdown · assignee · comm buttons · overflow) */ .sb-cprofile .cp-dealer{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding-bottom:4px;} .sb-cprofile .cp-dealer .av{width:24px;height:24px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font:var(--t-label-sb);flex:none;background:var(--gray-06);color:var(--gray-02);border:1px solid var(--black);} .sb-cprofile .cp-dealer .comm{margin-left:auto;display:flex;align-items:center;gap:6px;} /* ---------- ATOM: Colored status dropdown — .sb-statusdd (X3 · production parity) ---------- RoundedText-based trigger — code truth deal_status_extensions.dart toUiForegroundColor/toUiBackgroundColor: BORDER + LABEL + CARET = the status's 01 color · BACKGROUND = its 02 tint. r5 · content pad 2px/4px · min-height 16 · max-width 138 (ellipsize) · label regularParagraph · optional leading glyph (deal family) · caret = 12px angle-down in a 24px icon box (CustomDropdown matchAngleDownForegroundColor). Open state = the standard popover menu. Used for deal status selection (deals screen) + the customer status update. Customer statuses are dealership-defined on an 8-color enum (incl. gray). SUPERSEDES .sb-dealstatus. */ .sb-statusdd{display:inline-flex;align-items:center;border:1px solid currentColor;border-radius:var(--r-5);padding:2px 4px;min-height:16px;max-width:138px;box-sizing:border-box;font:var(--t-paragraph);cursor:pointer;white-space:nowrap;overflow:hidden;} .sb-statusdd .lb{overflow:hidden;text-overflow:ellipsis;min-width:0;} .sb-statusdd .si{font-size:12px;flex:none;margin-right:4px;} .sb-statusdd .cv,.sb-statusdd i.cv{width:24px;flex:none;display:inline-flex;align-items:center;justify-content:center;font-size:12px;opacity:1;} /* 8-color enum — 01 fg / 02 bg · reserved: full enum kept even where demos use a subset */ .sb-statusdd--orange{color:var(--orange-01);background:var(--orange-02);} .sb-statusdd--blue{color:var(--blue-01);background:var(--blue-02);} .sb-statusdd--indigo{color:var(--indigo-01);background:var(--indigo-02);} .sb-statusdd--yellow{color:var(--yellow-01);background:var(--yellow-02);} .sb-statusdd--green{color:var(--green-01);background:var(--green-02);} .sb-statusdd--purple{color:var(--purple-01);background:var(--purple-02);} .sb-statusdd--red{color:var(--red-01);background:var(--red-02);} .sb-statusdd--gray{color:var(--gray-02);background:var(--gray-06);} /* CUSTOMER aliases: New orange · Active blue · Scheduled indigo · Showroom yellow · Sold green · Nurture purple · Bad red (+ gray) */ .sb-statusdd--new{color:var(--orange-01);background:var(--orange-02);} .sb-statusdd--active{color:var(--blue-01);background:var(--blue-02);} .sb-statusdd--scheduled{color:var(--indigo-01);background:var(--indigo-02);} .sb-statusdd--showroom{color:var(--yellow-01);background:var(--yellow-02);} .sb-statusdd--sold{color:var(--green-01);background:var(--green-02);} .sb-statusdd--nurture{color:var(--purple-01);background:var(--purple-02);} .sb-statusdd--bad{color:var(--red-01);background:var(--red-02);} /* DEAL aliases: Fresh orange (seedling) · Working indigo (pencil) · Finance blue (circle-dollar) · Close green (circle-check) · Lost red — use --red */ .sb-statusdd--fresh{color:var(--orange-01);background:var(--orange-02);} .sb-statusdd--working{color:var(--indigo-01);background:var(--indigo-02);} .sb-statusdd--finance{color:var(--blue-01);background:var(--blue-02);} .sb-statusdd--close{color:var(--green-01);background:var(--green-02);} /* SegmentedControl — full-width tab switcher (expanded:false); uses the base .sb-seg pill. */ .sb-cprofile .cp-tabs{padding:4px 0 0;} /* body placeholder (active tab content built later) */ .sb-cprofile .cp-body{padding:16px;min-height:120px;background:var(--bg-subtle);} .sb-cprofile .cp-body-hint{font:var(--t-tiny);color:var(--gray-04);display:flex;align-items:center;gap:8px;} /* ---------- ORGANISM: Behavioral Insights — EngagementView (info/views/engagement_view.dart) ---------- Part of the Profile tab. SectionView.noPadding (style sectionView.rounded, title "Behavioral Insights" + info tooltip) → Column of 4 ScaffoldSectionContainer sub-sections, each ShadowPosition.bottom = a bottom-shadow divider between them. DS: .sb-engage. */ .sb-engage{font-family:var(--font-sans);} /* shell = .sb-card */ .sb-engage .eg-head{padding:8px 8px 8px 16px;} /* sb-sechead override: right pad 8 */ .sb-engage .eg-head .t{font:var(--t-tiny-bold);} /* sb-sechead override: boldTiny title */ .sb-engage .eg-head .info{margin-left:auto;color:var(--gray-03);} /* ScaffoldSectionContainer sub-section: ShadowPosition.bottom → soft bottom-shadow divider */ .sb-engage .eg-sec{padding:8px 16px 16px 16px;position:relative;box-shadow:0 6px 0 -5px var(--shadow-popover-color);} .sb-engage .eg-sec:last-child{box-shadow:none;} /* _TagsSection — title-row (title + info button) + a WRAP of tag chips clamped to maxRowsCount with see-more */ .sb-engage .eg-shead{display:flex;align-items:center;gap:6px;} .sb-engage .eg-stitle{font:var(--t-paragraph-sb);color:var(--gray-00);} .sb-engage .eg-smsg{font:var(--t-tiny);color:var(--gray-04);margin-top:2px;line-height:1.5;} .sb-engage .eg-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px;overflow:hidden;} .sb-engage .eg-tags.clamp1{max-height:24px;} /* maxRowsCount 1 */ .sb-engage .eg-tags.clamp2{max-height:54px;} /* maxRowsCount 2 */ .sb-engage .eg-more{font:var(--t-indicator);font-weight:600;color:var(--blue-01);background:none;border:none;cursor:pointer;padding:2px 0;margin-top:7px;} .sb-engage .eg-empty{font:var(--t-indicator);color:var(--gray-02);margin-top:9px;} /* _LeadSourceTagsSection — lead-source chip(s) + an edit affordance (set origin) */ .sb-engage .eg-lead{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:9px;} .sb-engage .eg-edit{display:inline-flex;align-items:center;gap:5px;font:var(--t-indicator);font-weight:600;color:var(--gray-03);background:none;border:none;cursor:pointer;padding:2px 4px;border-radius:var(--r-3);} .sb-engage .eg-edit:hover{background:var(--gray-07);color:var(--gray-00);} /* _LabelsSection — IconBox + label RoundedTexts + edit menu (reuses customer-labels) */ .sb-engage .eg-labels{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:9px;} /* ---------- ORGANISM: Daisi AI Summary — _SummarySection (customer_insights_view.dart:192) ---------- The standout block of the Profile tab — CustomerInsightsTable's HEADER. A FakeRichTextField (READ-ONLY rich-text field: disabled:true, maxLines:null), style richTextField.primary, backgroundColor gray-07, headerImage = the Daisi mark (assets.daisiAltImage) + labelText "AI Summary". Body = the generated summary, SELECTABLE (SelectionArea) when present; expandable. DS: .sb-aisum. */ .sb-aisum{background:var(--gray-07);border:1px solid var(--gray-06);border-radius:var(--r-5);padding:12px 14px 14px;font-family:var(--font-sans);} .sb-aisum .ai-head{display:flex;align-items:center;gap:8px;margin-bottom:9px;} .sb-aisum .ai-head img{width:16px;height:16px;flex:none;} /* Daisi mark (daisiAltImage) · headerImageSize 16 */ .sb-aisum .ai-head .lbl{font:var(--t-tiny-bold);color:var(--gray-00);} /* labelText "AI Summary" */ .sb-aisum .ai-body{font:var(--t-tiny);line-height:1.65;color:var(--gray-00);} /* generated summary — selectable */ .sb-aisum .ai-body .more{color:var(--blue-01);font-weight:600;cursor:pointer;} /* ExpandableText see-more */ /* loading (initial fetch) — ~5 rows of flex-width shimmer bars, each a hairline gray-06 outline */ .sb-aisum--loading .ai-rows{display:flex;flex-direction:column;gap:7px;} .sb-aisum--loading .ai-rows .r{display:flex;gap:6px;} .sb-aisum--loading .ai-rows .r span{height:11px;border:1px solid var(--gray-06);border-radius:var(--r-5);background:var(--gray-07);} /* AI-pending (item.loading) — summary being GENERATED: typewriter ExpandableText with an EMPTY cursor cycling status lines (animated_text_kit) — no caret, no label, no sparkles, no dots. Just gray-02 status text. */ .sb-aisum--pending .ai-body{color:var(--gray-02);} /* ---------- ORGANISM: Profile-tab layout + Contact Information — CustomerInsightsTable + CustomerContactInformationView ---------- customer_profile/info/. LAYOUT (CustomerInsightsTable) = ExtendedColumn (spacing s16): AI Summary header (.sb-aisum) + ExtendedListView.adaptive grid (shrinkWrap, non-scrolling — multi-col desktop / 1-col mobile) of 4 cards: (1) Contact Information · (2) Behavioral Insights (.sb-engage) · (3) VehiclesInsightsView · (4) AnalyticsView. DS: .sb-insights-grid wraps the cards. */ .sb-insights-grid{display:grid;grid-template-columns:repeat(2,minmax(280px,1fr));gap:16px;align-items:start;} .sb-insights-grid--1{grid-template-columns:1fr;} /* reserved: single-column variant */ /* Contact Information card (CustomerContactInformationView) = SectionView.noPadding (title "Profile" + tooltip) → Column of _ContactInfoMultiUseItemView rows. DS: .sb-contact. */ .sb-contact{font-family:var(--font-sans);} /* shell = .sb-card */ .sb-contact .ci-head{padding:4px 8px 4px 16px;} /* sb-sechead override: compact pad */ .sb-contact .ci-head .t{font:var(--t-tiny-bold);} /* sb-sechead override: boldTiny title */ .sb-contact .ci-head .info{color:var(--gray-03);} /* _ContactInfoMultiUseItemView row = MultiUseItemView.row: leading IconBox (box48icon16) + title + value subtitle + actions */ .sb-ci-row{display:flex;align-items:center;gap:10px;padding:8px 12px 8px 12px;border-bottom:1px solid var(--gray-06);cursor:pointer;transition:background .12s;} .sb-ci-row:hover{background:var(--gray-07);} .sb-ci-row.no-border{border-bottom:none;} .sb-ci-row .ibx{width:48px;height:48px;display:inline-flex;align-items:center;justify-content:center;color:var(--gray-00);font-size:16px;flex:none;} /* IconBox box48icon16 · leadingIconColor systemGray00 */ .sb-ci-row .ci-mid{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;} .sb-ci-row .ci-title{font:var(--t-paragraph-sb);color:var(--gray-00);font-weight:600;} .sb-ci-row .ci-val{font:var(--t-tiny);color:var(--gray-02);overflow:hidden;text-overflow:ellipsis;} .sb-ci-row .ci-val.lines2{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.4;} .sb-ci-row .ci-acts{flex:none;display:flex;align-items:center;gap:2px;} /* opt-out badge — LEGAL communication-opt-out flag (optoutCalls / optoutSms / optoutEmails) */ .sb-ci-optout{display:inline-flex;align-items:center;gap:4px;font:var(--t-tiny);background:var(--red-02);color:var(--red-01);border-radius:var(--r-3);padding:2px 4px;white-space:nowrap;} /* a row whose channel is opted out (LEGAL flag) OR whose value is empty → onTap is NULL (disabled = subtitle empty || optout). Non-tappable: no comm action, no hover, default cursor + disabled-opacity dim (no line-through). */ .sb-ci-row.is-optout,.sb-ci-row.is-empty{cursor:default;opacity:.6;} /* reserved: runtime data states */ .sb-ci-row.is-optout:hover,.sb-ci-row.is-empty:hover{background:transparent;} /* loading — _ContactInfoLoadingView shimmer rows */ .sb-ci-skel{display:flex;align-items:center;gap:10px;padding:8px 12px;border-bottom:1px solid var(--gray-06);} .sb-ci-skel:last-child{border-bottom:none;} .sb-ci-skel .sk-mid{flex:1;display:flex;flex-direction:column;gap:6px;} /* ---------- ORGANISM: Vehicle Insights — VehiclesInsightsView (info/views/) ---------- SectionView.noPadding (sectionView.rounded): leftActions = CustomTabBarView (tabBarView.SECONDARY, color-shift gray04→gray00, no underline) switching Views ⇆ Favorites (expanded:false); child = TabbedPageView → _CustomerInsightsVehiclesList (TOP-3 vehicles, compact vehicle rows); footer = "View All" SectionActionTextButton (when vehicles exist). DS: .sb-vehins. */ .sb-vehins{font-family:var(--font-sans);} /* shell = .sb-card */ .sb-vehins .vi-head{padding:5px 8px 5px 12px;} /* sb-sechead override: tab-bar pad */ .sb-vehins .vi-head .sb-tabbar--secondary{margin:0;} /* leftActions = the secondary tab bar (no tooltip → no info button) */ .sb-vehins .vi-list{display:flex;flex-direction:column;} /* compact vehicle row (reuses .sb-veh) inside the insights list — slightly tighter */ .sb-vehins .sb-veh{border-bottom:1px solid var(--gray-06);} .sb-vehins .sb-veh:last-of-type{border-bottom:none;} /* footer "View All" SectionActionTextButton */ .sb-vehins .vi-foot{border-top:1px solid var(--gray-06);} .sb-vehins .vi-foot button{width:100%;display:flex;align-items:center;justify-content:center;gap:6px;padding:10px;background:none;border:none;cursor:pointer;font:var(--t-tiny-bold);color:var(--blue-01);} .sb-vehins .vi-foot button:hover{background:var(--gray-07);} /* empty */ .sb-vehins .vi-empty{padding:24px 16px;text-align:center;font:var(--t-tiny);color:var(--gray-04);} .sb-vehins .vi-empty i{font-size:18px;display:block;margin-bottom:8px;color:var(--gray-05);} /* ---------- ORGANISM: Analytics — AnalyticsView (info/views/) ---------- SectionView.noPadding (rounded, title "Analytics" + tooltip): headerBottom = Row of 3 ValueInfoView tiles (valueInfoView.rounded): First Session · Last Activity · Sessions. child = Column of MultiUseItemView.row rows each w/ a trailing ValueRoundedText.minutes badge (response-time metrics). DS: .sb-analytics. */ .sb-analytics{font-family:var(--font-sans);} /* shell = .sb-card */ .sb-analytics .an-head{padding:8px 8px 8px 16px;} /* sb-sechead override: right pad 8 */ .sb-analytics .an-head .t{font:var(--t-tiny-bold);} /* sb-sechead override: boldTiny title */ .sb-analytics .an-head .info{color:var(--gray-03);} /* info tooltip — tooltipPosition LEFT (right after the title) */ /* headerBottom: Row of 3 ValueInfoView tiles (valueInfoView.rounded) */ .sb-valuerow{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:12px;background:var(--gray-07);border-bottom:1px solid var(--gray-06);} .sb-vinfo{border:1px solid var(--gray-06);border-radius:var(--r-5);background:var(--white);padding:10px;display:flex;flex-direction:column;gap:2px;text-align:center;} .sb-vinfo .v-title{font:var(--t-indicator);color:var(--gray-03);font-weight:600;} /* title */ .sb-vinfo .v-value{font:var(--t-paragraph-sb);color:var(--gray-00);letter-spacing:-.01em;} /* value */ .sb-vinfo .v-desc{font:var(--t-indicator);color:var(--gray-04);} /* trailing descriptor ('ago' / 'total') */ /* child: response-time MultiUseItemView.row rows (no leading icon · 2-line title+subtitle) + trailing ValueRoundedText.minutes */ .sb-analytics .an-row{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--gray-06);} .sb-analytics .an-row:last-child{border-bottom:none;} .sb-analytics .an-row .an-mid{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;} .sb-analytics .an-row .an-title{font:var(--t-paragraph-sb);color:var(--gray-00);} .sb-analytics .an-row .an-sub{font:var(--t-tiny);color:var(--gray-02);} .sb-analytics .an-row .an-lbl{flex:1;min-width:0;font:var(--t-tiny);color:var(--gray-00);} /* single-line row label */ /* ---------- ORGANISM: Agenda tab — CustomerAgendaView (agenda/customer_agenda_view.dart) ---------- A tab SHELL over already-built cards. ExtendedColumn: a CustomTabBarView sub-tab bar (padded l16/t8/r16/b8 — TWO sub-tabs Tasks / Appointments) + TabbedPageView → per tab a scrollable list of Task cards / Appointment cards (AgendaAppointmentsListView) + an Add affordance. Each list = cards + empty (InfoView) + loading (skeleton rows). DS: .sb-agenda. */ .sb-agenda{font-family:var(--font-sans);display:flex;flex-direction:column;} /* shell = .sb-card */ /* sub-tab bar — CustomTabBarView (primary underline), padded l16/t8/r16/b8 */ .sb-agenda .ag-tabs{padding:8px 16px;border-bottom:1px solid var(--gray-06);} .sb-agenda .ag-tabs .sb-tabbar{border-bottom:none;} /* TabbedPageView list — gray-07 well, cards gapped s8 */ .sb-agenda .ag-list{padding:12px;display:flex;flex-direction:column;gap:8px;background:var(--bg-subtle);min-height:120px;} /* Add affordance (CustomButton.plus → textIcon / dashed add row) */ .sb-agenda .ag-add{display:flex;align-items:center;justify-content:center;gap:7px;padding:11px;border:1px dashed var(--gray-06);border-radius:var(--r-7);background:transparent;cursor:pointer;font:var(--t-tiny-bold);color:var(--blue-01);transition:background .12s,border-color .12s;} .sb-agenda .ag-add:hover{background:var(--white);border-style:solid;} /* empty (InfoView) = the shared .sb-empty; override: flat on the list well (no chrome) */ .sb-agenda .sb-empty{background:transparent;border:none;padding:28px 16px;} /* ---------- ORGANISM: Deals tab — CustomerDealsListView (deals_list/customer_deals_list_view.dart) ---------- COMPACT profile-specific deal row (CustomerDealItemScaffold) — NOT the full Deal card (no customer-name header; the customer is implied by the profile context). SectionView.noPadding (sectionView.rounded, title "Deals" + tooltip): rightActions = "New Deal" CustomButton (textIcon, canEditCustomer); child = ExtendedListView of _CustomerDealItemView rows; empty = InfoView; loading = skeleton rows. DS: .sb-deals. */ .sb-deals{font-family:var(--font-sans);} /* shell = .sb-card */ .sb-deals .dl-head{padding:5px 8px 5px 16px;} /* sb-sechead override: compact pad */ .sb-deals .dl-head .t{font:var(--t-tiny-bold);} /* sb-sechead override: boldTiny title */ .sb-deals .dl-head .info{color:var(--gray-03);} .sb-deals .dl-head .acts{gap:6px;} /* sb-sechead override: tighter acts gap · rightActions = New Deal */ .sb-deals .dl-list{display:flex;flex-direction:column;} /* _CustomerDealItemView → CustomerDealItemScaffold = ListItemView.row (pad s16), tap → open deal */ .sb-deal-row{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--gray-06);cursor:pointer;transition:background .12s;} .sb-deal-row:last-child{border-bottom:none;} .sb-deal-row:hover{background:var(--gray-06);border-bottom-color:transparent;} .sb-deal-row .dr-thumb{width:42px;height:32px;border-radius:var(--r-3);background:var(--gray-07);box-shadow:inset 0 0 0 1px var(--gray-06);overflow:hidden;flex:none;display:flex;align-items:center;justify-content:center;} .sb-deal-row .dr-thumb img{width:75%;height:auto;opacity:.55;} .sb-deal-row .dr-vdetails{flex:none;width:16px;height:16px;display:inline-flex;align-items:center;justify-content:center;color:var(--gray-02);font-size:12px;background:none;border:none;cursor:pointer;} .sb-deal-row .dr-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;} .sb-deal-row .dr-title{font:var(--t-paragraph-sb);color:var(--gray-00);} .sb-deal-row .dr-trim{font:var(--t-tiny);color:var(--gray-02);} .sb-deal-row .dr-stock{font:var(--t-indicator);color:var(--gray-04);} /* reserved: stock-number cell */ /* priceAndControlWidgets (right): CustomerDealItemPriceView + DealStatusDropdown + overflow */ .sb-deal-row .dr-ctrl{flex:none;display:flex;align-items:center;gap:10px;} .sb-deal-price{display:flex;flex-direction:column;align-items:flex-end;gap:1px;} .sb-deal-price .pl{font:var(--t-indicator);color:var(--gray-02);} /* "Selling Price" — mediumIndicator gray-02 */ .sb-deal-price .pv{font:var(--t-tiny-bold);color:var(--gray-00);} /* price — boldTiny gray-00 */ .sb-deal-price .pv.none{color:var(--gray-04);font-weight:500;} /* "No Price" fallback */ /* DealStatusDropdown — SUPERSEDED by the .sb-statusdd atom (X3); deal aliases live there. */ /* empty (InfoView) = the shared .sb-empty; overrides: flat in the card, tighter gap, clamped subtitle */ .sb-deals .sb-empty{background:transparent;border:none;padding:28px 16px;gap:6px;text-align:center;} .sb-deals .sb-empty .s{max-width:240px;line-height:1.5;} /* ---------- ORGANISM: Docs tab — CustomerDocsView + *CustomerDocsViewSection wrappers (docs/) ---------- MultiColumnLayoutBuilder (RESPONSIVE columns, minItemWidth s368, columnSpacing s16) → ScrollableColumn of 6 titled doc SECTIONS in order: Deal Folders (if available) · Credit Applications · Trade-Ins · Documents · References · More Documents. Each section wrapper = a SectionView (title) → ExtendedListView.builder GRID (crossAxisCount = numberOfColumns, cross/main spacing s16) of doc cards (filled = card, empty/add = cardDashed). DS: .sb-docstab. */ /* SectionView.primary (code passes no style) — flat sections on a WHITE page (BaseTheme.backgroundColor), stacked vertically with NO gap (ScrollableColumn spacing 0). No card chrome. */ .sb-docstab{background:var(--white);display:flex;flex-direction:column;} /* section wrapper — no border/radius/fill (SectionView.primary) */ .sb-docsec{font-family:var(--font-sans);} /* header — sb-sechead w/ compact pad (l12/t4/r8/b4) */ .sb-docsec .ds-head{padding:4px 8px 4px 12px;} /* sb-sechead override: compact pad */ .sb-docsec .ds-head .ds-right{margin-left:auto;display:flex;align-items:center;} /* progress dots (rightActions) — 8px round dots, gap s4, filled blue-01 / empty gray-05 */ .sb-docsec .ds-dots{display:flex;align-items:center;gap:4px;} .sb-docsec .ds-dots i{width:8px;height:8px;border-radius:50%;background:var(--gray-05);} .sb-docsec .ds-dots i.on{background:var(--blue-01);} /* full-bleed gray-07 sub-row under the header (pad l8/r8/b8, no top) */ .sb-docsec .ds-subrow{background:var(--gray-07);padding:0 8px 8px;display:flex;gap:8px;} .sb-docsec .ds-subrow .sb-seg{flex:1;} /* secondary CustomSwitch CARD — white fill, 1px gray-05, r5; title (semiBoldParagraph gray-00) + toggle */ .sb-switchcard{flex:1;min-width:0;display:flex;align-items:center;gap:8px;background:var(--white);border:1px solid var(--gray-05);border-radius:var(--r-5);padding:8px 10px;} .sb-switchcard .scl{flex:1;min-width:0;font:var(--t-paragraph-sb);color:var(--gray-00);} .sb-switchcard .sb-switch{margin-top:1px;} /* the section's card list (ExtendedListView, spacing s16, pad s16) — single column */ .sb-docsec .ds-grid{padding:16px;display:flex;flex-direction:column;gap:16px;} .sb-docsec .ds-grid .sb-doc{border-radius:var(--r-7);min-width:0;} /* doc cards as MultiUseItemView.card — shrink + ellipsis */ .sb-docsec .ds-grid .sb-doc .dbody{min-width:0;} .sb-docsec .ds-grid .sb-doc .dtitle,.sb-docsec .ds-grid .sb-doc .dsub{} .sb-docsec .ds-grid .sb-trade{margin:0;} /* ============================================================ SHOWROOM (Phase S1) — foundations: atoms + molecules In-store appointment management. Prescriptive (no code counterpart yet); composed from existing atoms; locked card conventions override the Figma visuals (statuses = plain colored text, no chip backgrounds on metadata). ============================================================ */ /* VISIT TIMER — .sb-vtimer: plain semiBold text, FIXED thresholds: <2h green-01 · 2–4h orange-01 · >4h red-01. Frozen at checkout = keeps the color it ended on. */ .sb-vtimer{font:var(--t-paragraph-sb);} .sb-vtimer--ok{color:var(--green-01);} /* < 2h */ .sb-vtimer--warn{color:var(--orange-01);} /* 2–4h */ .sb-vtimer--late{color:var(--red-01);} /* > 4h */ /* ROAD-TO-SALE chip — .sb-rts: stateful boolean pill, r3 (never round). Configurable per dealership (2–10 labels); booleans on the appointment. DONE = transparent + 1px green-01 border + green label + 10px check · UNDONE = gray-06 fill, gray-02 label, no icon. */ .sb-rts{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 8px;border-radius:var(--r-3);border:1px solid transparent;background:var(--gray-06);color:var(--gray-02);font:var(--t-tiny);white-space:nowrap;} .sb-rts i{font-size:10px;} .sb-rts--done{background:transparent;border-color:var(--green-01);color:var(--green-01);} /* DEAL SUB-ROW — .sb-dealrow: one-line deal summary for showroom rows. 14px car glyph · vehicle title (mediumAction gray-00) + 10px ext-link · stock + ext-link · spring · price gray-00 · payment type gray-03 · deal STATUS as colored text (locked convention). */ .sb-dealrow{display:flex;align-items:center;gap:8px;min-width:0;} .sb-dealrow .di{font-size:14px;color:var(--gray-04);flex:none;} .sb-dealrow .dv{display:inline-flex;align-items:center;gap:4px;min-width:0;font:var(--t-action);color:var(--gray-00);} .sb-dealrow .dv .tt{} .sb-dealrow .stock{display:inline-flex;align-items:center;gap:4px;font:var(--t-tiny);color:var(--gray-03);flex:none;} .sb-dealrow .price{font:var(--t-tiny);color:var(--gray-00);flex:none;} .sb-dealrow .pay{font:var(--t-tiny);color:var(--gray-03);flex:none;} .sb-dealrow .ds{font:var(--t-tiny);flex:none;} /* deal status colors — code truth (deal_status_extensions.dart): Fresh orange · Working (desking) INDIGO · Finance blue · Close green · Lost red */ .sb-dealrow .ds--fresh{color:var(--orange-01);} .sb-dealrow .ds--working{color:var(--indigo-01);} .sb-dealrow .ds--finance{color:var(--blue-01);} .sb-dealrow .ds--close{color:var(--green-01);} .sb-dealrow .ds--lost{color:var(--red-01);} /* reserved: Lost deal status */ /* BIG METRIC — .sb-bigmetric: gray-07 surface · r7 · 1px gray-06 · 16px pad. label (t-tiny gray-03 + 12px info glyph gray-04) · value (heading5 gray-00) · delta (10px arrow + mediumTiny %) — delta color is SEMANTIC: good=green-01 / bad=red-01 regardless of direction. */ .sb-bigmetric{background:var(--gray-07);border:1px solid var(--gray-06);border-radius:var(--r-7);padding:16px;display:flex;flex-direction:column;gap:4px;min-width:148px;box-sizing:border-box;} .sb-bigmetric .bl{display:flex;align-items:center;gap:6px;font:var(--t-tiny);color:var(--gray-03);} .sb-bigmetric .bl i{font-size:12px;color:var(--gray-04);} .sb-bigmetric .bv{font:var(--t-heading5);color:var(--gray-00);} .sb-bigmetric .bd{display:inline-flex;align-items:center;gap:4px;font:var(--t-tiny);} .sb-bigmetric .bd i{font-size:10px;} .sb-bigmetric .bd--good{color:var(--green-01);} .sb-bigmetric .bd--bad{color:var(--red-01);} /* AVATAR GROUP — .sb-avgroup: overlapping 24px atomic avatars (-4px overlap, page-bg separation ring takes precedence over the RR ring at group scale) + '+N' overflow count. */ .sb-avgroup{display:inline-flex;align-items:center;} .sb-avgroup .sb-avatar{box-shadow:0 0 0 2px var(--white);} .sb-avgroup .sb-avatar + .sb-avatar{margin-left:-4px;} .sb-avgroup .more{margin-left:6px;font:var(--t-tiny);color:var(--gray-03);} /* APPOINTMENT STATUS extension — 'In Showroom' (Phase S1, prescriptive): yellow-01, mirrors the Showroom customer status color. 'Unconfirmed' = display alias of Set in showroom contexts. R3b: showroom-card statuses carry a LEADING 12px glyph (calendar-check / person-xmark / calendar-question), inheriting the status color — still plain text, never a chip. (Taylor's mock showed Confirmed GREEN; kept at the locked blue-01 pending a ruling — see ENGINEER_HANDOFF R3b.) */ .sb-svisit .ap-status i{font-size:12px;margin-right:4px;} .sb-appt .ap-status--inshowroom{color:var(--yellow-01);} /* reserved: S1 prescriptive status */ .sb-appt .ap-status--unconfirmed{color:var(--orange-01);} /* showroom display alias of Set */ /* ---------- ORGANISM: Showroom visit card — .sb-svisit (Phase S1-2 · format-corrected S1-6a) ---------- One card per appointment, THREE lifecycle stages: Anticipated → In Showroom → Ended. NAME-FIRST anatomy (Figma one-for-one): R1 = customer name + ext-link · avatar column at a FIXED x (desktop only) · spring · in-state actions TOP-RIGHT. R2 meta = time · LIVE TIMER · type — NO date (single-day view) and NO kebab menu. Status text appears inline at the END of the meta row ONLY on Anticipated (Confirmed / Unconfirmed / Missed); In Showroom & Ended carry state via timer + actions. In-state actions: Anticipated = 4 icon-only (phone · paper-plane · check-in green · miss red) · In Showroom = labeled 'Check-out' ONLY · Ended = phone + paper-plane. Check-in rewrites the appointment time to the actual arrival and starts the timer; check-out freezes it and requires a visit note. */ .sb-svisit .ap-main{gap:8px;} .sb-svisit .sv-name{display:flex;align-items:center;gap:8px;} .sb-svisit .sv-name .ap-name{flex:0 0 220px;min-width:0;} /* fixed name column → avatar group lands at the same x across cards */ .sb-svisit .sv-acts{display:flex;align-items:center;gap:6px;flex:none;} /* in-state actions, top-right of the name row */ .sb-svisit .sv-checkin .mi{color:var(--green-01);} /* state mover: check in */ .sb-svisit .sv-miss .mi{color:var(--red-01);} /* state mover: miss */ .sb-svisit .sv-checkout .mi,.sb-svisit .sv-checkout .ml{color:var(--red-01);} /* state mover: check out (quiet, NOT loud) */ .sb-svisit .ap-r1 .ap-dot{font:var(--t-tiny);color:var(--gray-03);} /* meta separators */ .sb-svisit .ap-r1 .sb-vtimer{flex:none;} /* timer sits BETWEEN time and type */ .sb-svisit .sv-rts{display:flex;gap:6px;flex-wrap:wrap;} /* road-to-sale chips; wraps to 2 rows on mobile */ .sb-svisit .sv-note{font:var(--t-paragraph);color:var(--gray-02);} /* check-out note — sits between the RTS chips and the deal rows */ .sb-svisit .sv-deals{display:flex;flex-direction:column;gap:8px;padding-top:2px;} /* X1: NO divider — hairlines exist only BETWEEN full rows */ /* deal columns (desktop): fixed title/stock/price columns → PRICE column-aligns across rows; only the STATUS pins right */ .sb-svisit .sb-dealrow .dv{flex:0 0 220px;min-width:0;} .sb-svisit .sb-dealrow .stock{flex:0 0 92px;} .sb-svisit .sb-dealrow .price{flex:0 0 72px;} /* MOBILE — .sb-svisit--mob: NO avatar group; the customer NAME truncates (never the vehicle title); deal rows = full title + deal status only (stock / price / payment drop). Type stays in the meta row. */ .sb-svisit--mob .sv-name .ap-name{flex:1 1 auto;} .sb-svisit--mob .sb-avgroup{display:none;} .sb-svisit--mob .sb-dealrow .dv{flex:1 1 auto;} /* Z1 compact mobile meta — the meta cluster steps to the 13px tiny roles (names stay semiBoldParagraph) */ .sb-svisit--mob .ap-when{font:var(--t-tiny);font-weight:600;} .sb-svisit--mob .ap-date{font:var(--t-tiny);} /* MISSED — red-02 surface tint; name + meta in red-01 with the time struck; 'Missed' inline at the meta-row end */ .sb-svisit--missed{background:var(--red-02);} .sb-svisit--missed .ap-name .nm,.sb-svisit--missed .ap-when,.sb-svisit--missed .ap-r1 .ap-dot,.sb-svisit--missed .ap-type{color:var(--red-01);} .sb-svisit--missed .ap-when{text-decoration:line-through;} /* ---------- TEMPLATE: Showroom screen — .sb-shwm (Phase S1-3 · container-corrected per Figma) ---------- Lives under Contacts alongside Inbox. The view is FOUR FLOATING ROUNDED CONTAINERS on the page background (metrics · Showroom · Anticipated · Completed), separated by 16px of page bg. CONTAINER RECIPE: r7 · 1px gray-06 · var(--white) surface (the token — reads near-black in dark mode). Visit cards are NOT individual floating cards here — they render as FULL-WIDTH TABLE-LIKE ROWS inside their list container: no per-row border/radius/background, 1px gray-06 hairlines between rows, 16px row padding; state tints (missed red-02) span the full row width. Lists stay PRIORITY-ordered (who's here → who's coming → who's been), earliest→latest within. Date + Filters are DECOUPLED from the contacts list: one day at a time; default filter = Sales type only. */ .sb-shwm-body{display:flex;flex-direction:column;gap:16px;} /* the four containers, 16px gaps */ .sb-screen-body.sb-shwm-body{background:var(--white);} /* showroom CONTENT SURFACE = the white token (near-black in dark) — bar above stays gray-07 */ .sb-shwm-ctn{background:var(--white);border:1px solid var(--gray-06);border-radius:var(--r-7);overflow:hidden;} .sb-shwm-ctn--metrics{padding:16px;background:var(--gray-07);} /* INVERTED: gray-07 container, white metric cells */ .sb-shwm-ctn--metrics .sb-bigmetric{background:var(--white);} .sb-shwm-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;} .sb-shwm-metrics--mob{grid-template-columns:repeat(2,1fr);} /* mobile: 2×2 wrap */ /* HEADER STRIP — full-width gray-07 bar at the container top (top corners inherit the container radius) */ /* list header strip = the canonical .sb-sechead exactly (no overrides) */ .sb-shwm-ctn .lh .c{font:var(--t-paragraph);color:var(--gray-03);} /* 'N Total' */ /* duration-bucket LEGEND — STATIC colored text, NOT chips (Taylor): 1px gray-06 vertical dividers between items. (The Anticipated icon+count chips are FILTERS and stay chips.) */ .sb-shwm-ctn .lh .dur{display:inline-flex;align-items:center;font:var(--t-tiny);} .sb-shwm-ctn .lh .dur span+span{border-left:1px solid var(--gray-06);margin-left:8px;padding-left:8px;} .sb-shwm-ctn .lh .dur .d-ok{color:var(--green-01);} .sb-shwm-ctn .lh .dur .d-warn{color:var(--orange-01);} .sb-shwm-ctn .lh .dur .d-late{color:var(--red-01);} .sb-shwm-ctn .lh .bk{display:inline-flex;gap:6px;} /* status-breakdown icon+count chips — click through to the calendar day view */ .sb-shwm-ctn .lh .bk .bi--confirmed .mi,.sb-shwm-ctn .lh .bk .bi--confirmed .ml{color:var(--blue-01);} .sb-shwm-ctn .lh .bk .bi--unconfirmed .mi,.sb-shwm-ctn .lh .bk .bi--unconfirmed .ml{color:var(--orange-01);} .sb-shwm-ctn .lh .bk .bi--missed .mi,.sb-shwm-ctn .lh .bk .bi--missed .ml{color:var(--red-01);} /* BODY ROWS — the locked .sb-svisit anatomy as full-width rows (NO card chrome) */ .sb-shwm-ctn .sb-appt{border:none;border-radius:0;background:transparent;padding:16px;border-bottom:1px solid var(--gray-06);} .sb-shwm-ctn .sb-appt:last-child{border-bottom:none;} .sb-shwm-ctn .sb-svisit--missed{background:var(--red-02);} /* state tint spans the full row, edge to edge */ /* ---------- ORGANISM: Showroom dialogs — .sb-shdlg (Phase S1-4 · S1-6b corrected to EXISTING patterns) ---------- Check-in / check-out use the app's CANONICAL DialogService / CustomActionSheet pattern: a 424px sheet ANCHORED TO THE BOTTOM over the --overlay-trans-64 scrim. The sheet is NOT one card — a 16px-padded COLUMN of SEPARATE stacked section cards (16px gaps; each 16px pad · r7 · gray-07 · 1px gray-06): HEADER card (UPPERCASE centered semiBoldTitle + mediumTiny message) · BODY card (chips / fields) · BUTTON card (stacked full-width CTAs, 8px gap, r5, 12px pad, UPPERCASE mediumAction labels, the EXISTING button taxonomy: secondary / destructive / tertiary — title idiom UPPERCASE, cancel idiom NEVERMIND, last). Add-to-Showroom is NOT a modal — it is DETAIL-PAGE content: desktop = 424px RIGHT PANEL (transparent scrim, main content stays interactive; 1px gray-06 left border), mobile = FULL-SCREEN sheet (5px top corners, 48×4 r2 drag handle, 56px tap-to-close strip). Check-in rewrites the appointment time to the actual arrival + starts the timer; check-out freezes it; its note is REQUIRED → the visit end note. Add creates-or-identifies the customer AND adds the appointment in one step; the customer status flips to Showroom (upstream propagation: appointment → customer, never the reverse). */ /* bottom-anchored action sheet — 424w column of separate section cards */ .sb-shdlg-scrim{position:absolute;inset:0;background:var(--overlay-trans-64);} .sb-shdlg-sheet{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:424px;max-width:100%;box-sizing:border-box;display:flex;flex-direction:column;gap:16px;padding:16px;} .sb-shdlg-card{background:var(--gray-07);border:1px solid var(--gray-06);border-radius:var(--r-7);padding:16px;box-sizing:border-box;display:flex;flex-direction:column;gap:14px;} .sb-shdlg-card--head{padding:16px 32px;gap:6px;align-items:center;text-align:center;} /* extra 16px horizontal padding */ .sb-shdlg-card--head .ttl{font:var(--t-title);color:var(--gray-00);text-transform:uppercase;letter-spacing:.02em;} .sb-shdlg-card--head .msg{font:var(--t-tiny);color:var(--gray-00);line-height:1.45;} .sb-shdlg-card--btns{gap:8px;} .sb-shdlg-card--btns .sb-btn,.sb-shdlg-panel .mf .sb-btn{width:100%;box-sizing:border-box;border-radius:var(--r-5);padding:12px;font:var(--t-action);text-transform:uppercase;letter-spacing:.02em;} /* ONE full-width dialog CTA recipe */ .sb-shdlg-row{display:flex;gap:8px;flex-wrap:wrap;} .sb-shdlg-row .sb-dropdown{flex:1 1 auto;min-width:max-content;justify-content:flex-start;} /* never shrink below content — the row WRAPS instead of crushing a chip */ /* Add-to-Showroom — DETAIL-PAGE content (NOT a modal) */ /* desktop: 424px right panel over a TRANSPARENT scrim (main content stays interactive) */ .sb-shdlg-panel{width:424px;box-sizing:border-box;background:var(--white);border-left:1px solid var(--gray-06);display:flex;flex-direction:column;} .sb-shdlg-panel .mh{display:flex;align-items:center;gap:8px;height:40px;padding:0 8px 0 16px;border-bottom:1px solid var(--gray-06);flex:none;} .sb-shdlg-panel .mh .t{font:var(--t-title);color:var(--gray-00);flex:1;} .sb-shdlg-panel .mb{display:flex;flex-direction:column;gap:14px;padding:16px;overflow-y:auto;flex:1;min-height:0;} .sb-shdlg-panel .mb > *{flex-shrink:0;} /* scroll, never compress — keeps the open dropdown panel at natural height */ .sb-shdlg-panel .mf{padding:16px;border-top:1px solid var(--gray-06);flex:none;} .sb-shdlg-panel .sec{font:var(--t-label);color:var(--gray-03);text-transform:uppercase;letter-spacing:.04em;} /* mobile: full-screen sheet — 5px top corners · centered 48×4 r2 drag handle · 56px tap-to-close strip above */ .sb-shdlg-fs{position:absolute;left:0;right:0;bottom:0;top:56px;background:var(--white);border-radius:var(--r-5) var(--r-5) 0 0;display:flex;flex-direction:column;overflow:hidden;} .sb-shdlg-fs .grab{width:48px;height:4px;border-radius:var(--r-2);background:var(--gray-05);margin:6px auto 2px;flex:none;} /* DISTINCT affordance: 48×4 r2 = full-screen detail sheet (Flutter spec) — NOT the Views-sheet pill */ /* side-by-side name fields */ .sb-shdlg-names{display:flex;gap:8px;} .sb-shdlg-names .sb-field{flex:1;min-width:0;} /* SearchableDropdown — pinned '+ New Lead Source' result row (reuses .sb-popover/.sb-menuitem full-width rows) */ .sb-menuitem--new{color:var(--blue-01);} /* 'Potential Duplicates Found' SectionView — count pill + Dismiss; FULL-BLEED rows (R3a Figma anatomy): name semiBold + Updated/Created meta stack · assigned-salesperson 16px atomic avatar + name · blue-01 'Use' link · Email/Phone two-col mini block · 'Show N More' blue footer. BEHAVIOR (R3a): 'Use' ATTACHES the customer to the form IN PLACE — the navigate-away rule is RETIRED. */ .sb-shdlg-dupes{border:1px solid var(--gray-06);border-radius:var(--r-5);overflow:hidden;} .sb-shdlg-dupes .dh{padding:6px 8px 6px 12px;min-height:0;} /* sb-sechead override: compact pad */ .sb-shdlg-dupes .dh .t{font:var(--t-tiny-sb);flex:1;} /* sb-sechead override: semiBoldTiny, title fills */ .sb-shdlg-dupes .drow{display:flex;flex-direction:column;gap:8px;width:100%;padding:12px;box-sizing:border-box;background:var(--white);border:none;border-bottom:1px solid var(--gray-06);text-align:left;font-family:var(--font-sans);} .sb-shdlg-dupes .dmore{display:block;width:100%;padding:8px 12px;background:var(--white);border:none;font:var(--t-tiny-bold);color:var(--blue-01);cursor:pointer;text-align:center;font-family:var(--font-sans);} /* shared dupe-row / linked-customer anatomy (R3a) */ .sb-custrow-top{display:flex;align-items:flex-start;gap:8px;} .sb-custrow-top .nm{font:var(--t-paragraph-sb);color:var(--gray-00);flex:1;min-width:0;} .sb-custrow-top .use{margin-left:auto;background:none;border:none;font:var(--t-tiny-bold);color:var(--blue-01);cursor:pointer;padding:0;flex:none;} .sb-custrow-top .detach{margin-left:auto;background:none;border:none;font:var(--t-tiny-bold);color:var(--red-01);cursor:pointer;padding:0;flex:none;} .sb-custmeta{display:flex;flex-direction:column;gap:2px;font:var(--t-indicator);color:var(--gray-03);} .sb-custwho{display:flex;align-items:center;gap:6px;font:var(--t-tiny);color:var(--gray-02);} .sb-custmini{display:grid;grid-template-columns:1fr 1fr;gap:8px;} .sb-custmini .c{display:flex;flex-direction:column;gap:2px;min-width:0;} .sb-custmini .k{font:var(--t-indicator);color:var(--gray-03);} .sb-custmini .v{font:var(--t-tiny);color:var(--gray-00);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} /* linked-customer summary card (State C — attached) — same anatomy, red Detach top-right */ .sb-linkedcust{display:flex;flex-direction:column;gap:8px;border:1px solid var(--gray-06);border-radius:var(--r-5);padding:12px;background:var(--white);} /* assignment row — .sb-assignrow (R3a): gray-07 r5 — leading 16px round-robin glyph (or 16px atomic avatar when a named assignee fills it) · title semiBold over sub mediumTiny gray-03 · blue-01 Change + angle-down · × */ .sb-assignrow{display:flex;align-items:center;gap:10px;background:var(--gray-07);border-radius:var(--r-5);padding:8px 10px;} .sb-assignrow .ai{width:16px;flex:none;display:inline-flex;justify-content:center;color:var(--gray-02);font-size:14px;} .sb-assignrow .at{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;} .sb-assignrow .at .t{font:var(--t-paragraph-sb);color:var(--gray-00);} .sb-assignrow .at .s{font:var(--t-tiny);color:var(--gray-03);} .sb-assignrow .change{display:inline-flex;align-items:center;gap:4px;background:none;border:none;cursor:pointer;font:var(--t-tiny-bold);color:var(--blue-01);padding:0;flex:none;} .sb-assignrow .change i{font-size:11px;} .sb-assignrow .ax{width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;background:none;border:none;cursor:pointer;color:var(--gray-03);font-size:12px;flex:none;} /* subscriber chip — .sb-subchip (R3a): blue-01 OUTLINE pill, 16px atomic avatar + name + blue ×; wraps */ .sb-subchips{display:flex;flex-wrap:wrap;gap:6px;align-items:center;} .sb-subchip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--blue-01);border-radius:var(--radius-pill);padding:3px 8px 3px 3px;background:transparent;} .sb-subchip .nm{font:var(--t-tiny);color:var(--gray-00);} .sb-subchip .x{color:var(--blue-01);font-size:11px;background:none;border:none;cursor:pointer;padding:0;display:inline-flex;} /* associated locations — .sb-locgrid (R3a): 2-col grid of selectable field-boxes; selected = blue-03 bg + 1px blue-01 + blue-01 label */ .sb-locgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px;} .sb-locgrid .loc{display:flex;align-items:center;min-height:32px;border:1px solid var(--gray-06);border-radius:var(--r-7);background:var(--white);padding:4px 10px;font:var(--t-paragraph);color:var(--gray-00);cursor:pointer;box-sizing:border-box;} .sb-locgrid .loc.on{background:var(--blue-03);border-color:var(--blue-01);color:var(--blue-01);} /* ---------- TRUNCATION (Round-C consolidation) — THE one single-line ellipsis rule ---------- .trunc is the utility; the selectors below are the existing consumers (triples stripped in place). */ .trunc,.sb-mh-titlebar .tb-title,.sb-viewitem .vi-label,.sb-dealersel .ds-name,.sb-railuser .ru-name,.sb-stat .title,.sb-attach .fname,.sb-cust .deal,.sb-veh .spec .vtitle,.sb-appt .ap-name .nm,.sb-appt--row .mr-name,.sb-task .tk-title,.sb-task .tk-name .nm,.sb-doc .dtitle,.sb-doc .dsub,.sb-trade .ttitle,.sb-analytics .an-row .an-title,.sb-analytics .an-row .an-sub,.sb-analytics .an-row .an-lbl,.sb-deal-row .dr-title,.sb-deal-row .dr-trim,.sb-switchcard .scl,.sb-docsec .ds-grid .sb-doc .dtitle,.sb-docsec .ds-grid .sb-doc .dsub,.sb-dealrow .dv .tt,.sb-shdlg-dupes .drow .nm,.sb-veh .thumb .stock{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}