/** * RFS Field GBB Proposal ("RettFire App") -- app styles. * Adapted from the standalone "Rettinger GBB Proposal" prototype (Archive.zip), * scoped under #rfs-gbb-app so it can't leak into (or be overridden by) the * surrounding WordPress theme. All original class names/behavior preserved. * * ===== v2.0.0 theming ===== * Every color used to be a hardcoded hex value scattered across ~90 rules * (plus a handful of inline styles in rfs-gbb-app.js). That's replaced here * with a small set of purpose-named custom properties ("semantic tokens") * defined once under #rfs-gbb-app (light values) and re-defined under * #rfs-gbb-app[data-theme="dark"] (dark values). Every component rule below * references a token, never a raw hex -- that's what makes the light/dark/ * system toggle (see toggleThemeMenu()/setThemePref() in rfs-gbb-app.js) * a single attribute flip instead of a second copy of the whole stylesheet. * * Every light-mode token pair and every dark-mode token pair below was * checked against WCAG 2.1 AA (4.5:1 normal text / 3:1 large text & UI * component boundaries) with a small contrast-ratio script before being * chosen -- see the --accent vs --accent-strong split just below: the * original brand orange (#ef7626) reads great as an icon/border/badge * color but only hits ~2.9:1 with white text, so button fills use the * separately-tuned --accent-strong (4.5:1+ with white text in both * themes) while --accent stays around for everything that isn't body text. * * Old variable names (--navy, --gold, --gold2, --card, --muted, --good, * --better, --best) are kept as aliases pointing at the new tokens, since * a handful of inline styles in rfs-gbb-app.js reference var(--gold) etc. * directly. */ #rfs-gbb-app { /* ---- Light theme (default) ---- */ --bg:#f7f6f3; --surface:#ffffff; /* card backgrounds */ --surface-alt:#f5f3ef; /* inset panels, table stripes, footer bars */ --surface-inset:#f5f3ef; /* expanded configurable-item panels */ --surface-selected:#fff3e7;/* chosen radio/option row background */ --surface-disabled:#eceae5;/* "Coming Soon" card fill */ --border:#e5e0d8; --border-subtle:#eee; --border-strong:#c9c2b6; --text:#242424; --text-secondary:#6b6459; /* darkened slightly from the original #726c62 to clear 4.5:1 on --bg */ --text-disabled:#9a9488; --accent:#ef7626; /* decorative: icons, left-borders, focus rings, badges w/ dark text, non-text UI */ --accent-strong:#ba5c1e; /* text-bearing buttons/badges -- white text @4.53:1 in both themes */ --accent-strong-hover:#a4511a; --accent-text:#be5a19; /* links / price highlights on a light surface -- 4.5:1 on white */ --accent-soft:#f2efe9; /* tinted chip/badge backgrounds */ --on-accent:#ffffff; /* text color placed on --accent-strong */ --good:#64748b; --on-good:#ffffff; --better:#ba5c1e; --on-better:#ffffff; /* was raw --gold; text-bearing tier headers need the AA-safe shade */ --best:#242424; --on-best:#ffffff; --success-bg:#e6f4ea; --success-text:#276740; --success-border:#bfe3cb; --warning-bg:#fff3e0; --warning-text:#7a4a12; --warning-border:#f0c896; --danger-bg:#fbeaea; --danger-text:#8c2f2f; --danger-border:#e3b8b8; --amber-bg:#fff8ec; --amber-text:#7a5a12; --amber-border:#eddcae; /* ===== v3.16.1: AA-safe filled-button/toast colors ===== --danger-text/--success-text are tuned for TEXT sitting on a tinted *-bg background (banners, notes) -- in dark mode they're light pastels (see the dark block below), which fail contrast when reused as a solid fill behind white text (.btn.danger, .toast.toast-success/ -error previously did exactly that). Same fix pattern as --accent- strong above: a dedicated "-strong" pair that stays the same AA-with-white-text shade in both themes. Design backlog item 2. */ --danger-strong:#8c2f2f; --success-strong:#276740; --status-open:#2f9e57; --status-open-bg:#e5f6ea; --status-open-text:#1e7a3d; --status-onhold:#e0a415; --status-onhold-bg:#fdf1da; --status-onhold-text:#8a5f0a; --status-done:#9a9a9a; --status-done-bg:#eceeef; --status-done-text:#5c5c5c; --status-cancelled:#c94b4b; --status-cancelled-bg:#fbe7e7; --status-cancelled-text:#9c2c2c; --shadow-card:0 1px 3px rgba(36,34,30,.06); --shadow-pop:0 4px 14px rgba(36,34,30,.12); /* light --accent (#ef7626 = 239,118,38) as the "chosen" ring around .prop-card.chosen/.profile-card.chosen -- previously the same rgba was hardcoded raw in both rules instead of referencing a token, so it silently stopped matching the border color in dark mode (see the dark-theme redefinition below). Design backlog item 3. */ --ring-accent:0 0 0 3px rgba(239,118,38,.18); /* Shared sizing tokens -- the "uniform cards" pass (see .card, .profile-card, .job-card, .prop-card, .tier-col, .photo-slot, .settings-tier, etc.) pulls corner radius and heading scale from these instead of one-off values, so every card in the app matches. */ --radius-card:12px; --radius-control:7px; --radius-chip:20px; /* ===== v3.0.0: radius/type-scale tokens ===== --radius-sm replaces what used to be 21 separate raw "8px" border- radius declarations scattered across photo previews, sig canvases, banners/notes and inputs -- same value, but a future radius change now only has to happen here. --radius-pill is the corner radius shared by every ".pill" (see the Pill component below). */ --radius-sm:8px; --radius-pill:10px; /* ===== v3.3.0: spacing scale ===== A 4px-grid margin/padding/gap scale, replacing what used to be raw literals (drifting between e.g. 8px/10px/12px/14px for what was meant to be the same "inset note" padding, or 14px/16px/18px for what was meant to be the same "card" padding). Not every margin/gap in the file needs to land exactly on this grid -- fine one-off values are left alone -- but anywhere a value was drifting across visually-identical components, it now converges on one of these. */ --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px; --space-6:24px; /* Shared vertical padding for .btn/inputs/nav buttons so controls that sit in the same row (a button next to a text field, the topbar's nav buttons next to the theme toggle) render at matching heights instead of each hand-tuning its own padding. */ --control-pad-y:9px; /* v3.16.3: every .btn variant (default, .secondary, .small, .danger, .btn-icon, .btn.continue, anchors styled as .btn like .job-striven- link) now resolves to this same rendered height via min-height + flex centering on the base .btn rule below, instead of each variant's own padding/font-size combination landing at a different height. Was visibly inconsistent wherever a .btn.small (e.g. "View in Striven") sat in the same row as a 44px .btn-icon (Call/Navigate) -- see .job-quick-actions. 44px doubles as the app's touch-target minimum (see --control-size-checkbox's sibling fix, design backlog item 12), so this is also an accessibility win, not just a visual one. */ --control-height:44px; /* Checkbox sizing had three near-identical but never-matching raw values (19px .item-row, 18px .checkbox-line, 17px table.editor) -- one shared token, the same way --control-pad-y already unifies button/input heights. Design backlog item 18. */ --control-size-checkbox:18px; --fs-card-title:1rem; --fw-card-title:700; --fs-card-subtitle:.82rem; /* Small-label type scale -- collapses 6 raw font-size values that were all "micro uppercase eyebrow" or "small label" text, hand-tuned a hair apart from each other (.68/.7rem, and .72/.74/.75/.78rem), down to two real steps. --fs-sm/--fs-sm2 fold in the next tier up (.8/.82/.83rem and .85/.88rem) for the same reason. */ --fs-2xs:.7rem; --fs-xs:.75rem; --fs-sm:.8rem; --fs-sm2:.85rem; /* ===== v3.14.0: type scale, upper half ===== Finishes what the small-label scale above started. Everything from "body copy" up through "biggest headline" used to be raw literals hand-tuned per component (.9/.95/1/1.05/1.1/1.15/1.3/1.4/1.6rem, ten different values with no real step logic) -- now real named steps, same "tokenize it, don't necessarily change how it looks" spirit as the --fs-2xs..--fs-sm2 pass. --fs-tier-total is a dedicated token (not just another step) because it's used by BOTH of the app's two separate tier-price-card implementations (.tier-head .total on the Proposal Builder screen, .prop-card .ph .total on the Customer Proposal screen) -- they'd drifted to two different sizes (1.5rem vs 1.6rem) for the exact same number; sharing one token means they can't drift apart again. */ --fs-md:.9rem; --fs-md2:.95rem; --fs-lg:1.05rem; --fs-lg2:1.1rem; --fs-xl:1.15rem; --fs-2xl:1.3rem; --fs-3xl:1.4rem; --fs-tier-total:1.6rem; /* Base line-height + letter-spacing tokens -- same "collapse the raw one-offs" treatment as the type scale above. --lh-base is the app's default body line-height (applied once on #rfs-gbb-app; a handful of spots that already hand-set line-height:1.5 now just point at this token instead). --lh-heading is the tighter value headings need so multi-line titles don't look loose. --ls-tight/--ls-wide collapse 9 slightly-different letter-spacing values (.2/.3/.4/.5/.6px) down to two real steps: --ls-tight for regular running text that just needed a touch of polish (.brand, profile-card h3), --ls-wide for uppercase eyebrow/label text that wants more visible tracking (.group-label, .pill-uppercase, .pf-label, .job-task, condition-table headers, .profile-code-badge). */ --lh-base:1.5; --lh-heading:1.25; --ls-tight:.2px; --ls-wide:.5px; /* Shared structural tokens for the two parallel tier-price-card implementations (.tier-col family on the Proposal Builder screen, .prop-card family on the Customer Proposal screen) -- see the "shared component structure" comment further down by .tier-head. */ --tier-card-head-pad:14px 16px; --tier-card-body-pad:var(--space-3) var(--space-4); /* Back-compat aliases -- rfs-gbb-app.js has a few inline styles that reference these var names directly (var(--gold), var(--border), var(--muted)). */ --navy:var(--text); --navy2:var(--text-secondary); --gold:var(--accent); --gold2:var(--accent-text); --card:var(--surface); --muted:var(--text-secondary); } /* ---- Dark theme ---- */ #rfs-gbb-app[data-theme="dark"] { --bg:#17181a; --surface:#212226; --surface-alt:#2a2b30; --surface-inset:#2a2b30; --surface-selected:#3a2c1c; --surface-disabled:#242527; --border:#3c3e44; --border-subtle:#33353a; --border-strong:#4c4f57; --text:#f0efec; --text-secondary:#b7b2a9; --text-disabled:#726d64; --accent:#ff8a42; /* bright enough for link/icon text on dark bg (7.5:1+) */ --accent-strong:#ba5c1e; /* same button fill as light -- already AA-safe w/ white text */ --accent-strong-hover:#a4511a; --accent-text:#ff9d5c; --accent-soft:#33291d; --on-accent:#ffffff; --good:#7c8fab; --on-good:#ffffff; --better:#ba5c1e; --on-better:#ffffff; --best:#4a4d55; --on-best:#ffffff; --success-bg:#173325; --success-text:#7ee2a8; --success-border:#2b5a3f; --warning-bg:#3a2a10; --warning-text:#ffc373; --warning-border:#5c4420; --danger-bg:#3a1717; --danger-text:#ff9d9d; --danger-border:#5c2a2a; --amber-bg:#332a10; --amber-text:#e8c064; --amber-border:#54431c; --danger-strong:#8c2f2f; --success-strong:#276740; --status-open:#3fbd6c; --status-open-bg:#173325; --status-open-text:#7ee2a8; --status-onhold:#e6ac2f; --status-onhold-bg:#3a2a10; --status-onhold-text:#ffc373; --status-done:#8a8a8a; --status-done-bg:#2a2b30; --status-done-text:#b7b2a9; --status-cancelled:#e06565; --status-cancelled-bg:#3a1717; --status-cancelled-text:#ff9d9d; --shadow-card:0 1px 3px rgba(0,0,0,.35); --shadow-pop:0 6px 20px rgba(0,0,0,.5); /* dark --accent (#ff8a42 = 255,138,66) as the "chosen" ring instead of the light theme's orange baked in raw -- design backlog item 3. */ --ring-accent:0 0 0 3px rgba(255,138,66,.22); } /* Follow OS setting when the tech hasn't explicitly picked light/dark (setThemePref() only sets data-theme="light"/"dark" directly -- "system" removes the attribute entirely and leaves it to this media query). */ @media (prefers-color-scheme: dark) { #rfs-gbb-app:not([data-theme="light"]):not([data-theme="dark"]) { --bg:#17181a; --surface:#212226; --surface-alt:#2a2b30; --surface-inset:#2a2b30; --surface-selected:#3a2c1c; --surface-disabled:#242527; --border:#3c3e44; --border-subtle:#33353a; --border-strong:#4c4f57; --text:#f0efec; --text-secondary:#b7b2a9; --text-disabled:#726d64; --accent:#ff8a42; --accent-strong:#ba5c1e; --accent-strong-hover:#a4511a; --accent-text:#ff9d5c; --accent-soft:#33291d; --on-accent:#ffffff; --good:#7c8fab; --on-good:#ffffff; --better:#ba5c1e; --on-better:#ffffff; --best:#4a4d55; --on-best:#ffffff; --success-bg:#173325; --success-text:#7ee2a8; --success-border:#2b5a3f; --warning-bg:#3a2a10; --warning-text:#ffc373; --warning-border:#5c4420; --danger-bg:#3a1717; --danger-text:#ff9d9d; --danger-border:#5c2a2a; --amber-bg:#332a10; --amber-text:#e8c064; --amber-border:#54431c; --danger-strong:#8c2f2f; --success-strong:#276740; --status-open:#3fbd6c; --status-open-bg:#173325; --status-open-text:#7ee2a8; --status-onhold:#e6ac2f; --status-onhold-bg:#3a2a10; --status-onhold-text:#ffc373; --status-done:#8a8a8a; --status-done-bg:#2a2b30; --status-done-text:#b7b2a9; --status-cancelled:#e06565; --status-cancelled-bg:#3a1717; --status-cancelled-text:#ff9d9d; --shadow-card:0 1px 3px rgba(0,0,0,.35); --shadow-pop:0 6px 20px rgba(0,0,0,.5); --ring-accent:0 0 0 3px rgba(255,138,66,.22); } } #rfs-gbb-app * {box-sizing:border-box;} #rfs-gbb-app {margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;background:var(--bg);color:var(--text);line-height:var(--lh-base);transition:background-color .15s ease, color .15s ease;} /* ===== v3.3.0: focus-visible ring ===== * The stylesheet has always earmarked --accent for "focus rings" (see the * theming comment at the top of this file), but no rule ever actually drew * one -- every interactive element fell back to the browser's own default, * which looks different (and often clashes with the theme) across Chrome/ * Safari/Firefox and light/dark mode. Scoped to :focus-visible so it only * shows for keyboard/assistive-tech focus, not every mouse click. */ #rfs-gbb-app :is(button, input, select, textarea, a, .pill-link, .chip, .config-option, .config-option-plain, .profile-card):focus-visible { outline:2px solid var(--accent); outline-offset:2px; } /* ===== v3.16.1: disabled form-control styling ===== * No input:disabled/select:disabled/textarea:disabled rule existed * anywhere, even though Settings' edit-mode toggle disables every field * when not editing -- those fell back to raw browser default disabled * styling, which looks out of place against this app's dark theme. * Design backlog item 6. */ #rfs-gbb-app :is(input, select, textarea):disabled { background:var(--surface-disabled); color:var(--text-disabled); border-color:var(--border); cursor:not-allowed; opacity:1; } /* ===== v3.14.0: shared "clickable" design system ===== * There was no base link style anywhere in this file (a bare fell back * to browser defaults -- blue/purple, no theme awareness) and every * button-like element (.btn, .pill-link, .chip, header.topbar nav button) * hand-tuned its own hover transition (or had none at all, producing an * abrupt color snap on hover where .btn/.chip already animate smoothly). * This is the one place that now defines "what does a clickable thing look * like" for anything not already covered by a more specific component rule. */ #rfs-gbb-app a {color:var(--accent-text);text-decoration:none;} #rfs-gbb-app a:hover {text-decoration:underline;} #rfs-gbb-app :is(.pill-link, .chip, .config-option, .config-option-plain) {transition:background-color .15s ease, border-color .15s ease, color .15s ease;} #rfs-gbb-app header.topbar {background:var(--surface);color:var(--text);padding:var(--space-3) var(--space-5);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;border-bottom:4px solid var(--accent);box-shadow:var(--shadow-card);} #rfs-gbb-app header.topbar .brand {display:flex;align-items:center;gap:var(--space-3);font-size:var(--fs-lg2);font-weight:700;letter-spacing:var(--ls-tight);color:var(--text);} /* iOS-style "squircle" corner rounding -- a % radius (not a fixed px value) so it scales proportionally as syncBrandLogoHeight() (see rfs-gbb-app.js) resizes this icon to match the brand text block. */ #rfs-gbb-app header.topbar .brand img {height:42px;width:auto;display:block;border-radius:22%;} #rfs-gbb-app header.topbar .brand small {display:block;font-weight:400;font-size:var(--fs-2xs);color:var(--text-secondary);letter-spacing:var(--ls-tight);} #rfs-gbb-app header.topbar nav button {background:transparent;border:1px solid var(--border-strong);color:var(--text);padding:8px 14px;border-radius:var(--radius-control);cursor:pointer;font-size:var(--fs-sm2);margin-left:var(--space-2);transition:background-color .15s ease, border-color .15s ease, color .15s ease;} #rfs-gbb-app header.topbar nav button:hover {background:var(--accent-strong);border-color:var(--accent-strong);color:var(--on-accent);} #rfs-gbb-app main {max-width:1200px;margin:0 auto;padding:var(--space-5);} #rfs-gbb-app .screen {display:none;} #rfs-gbb-app .screen.active {display:block;} #rfs-gbb-app h1 {font-size:var(--fs-3xl);font-weight:700;line-height:var(--lh-heading);margin:0 0 var(--space-1);} #rfs-gbb-app h2 {font-size:var(--fs-xl);font-weight:700;line-height:var(--lh-heading);margin:0 0 var(--space-3);} #rfs-gbb-app .subtitle {color:var(--text-secondary);margin:0 0 var(--space-5);font-size:var(--fs-md);} /* v3.7.1: the current-service-profile pill (Checklist/Cold Call/Select Items screens) used to just be inline text inside .subtitle's sentence -- it happened to land near the top-right on a wide viewport by accident of word-wrap, but had no real position and could wrap anywhere (or get lost in the sentence) at other widths. This is the same flex/wrap approach already used for e.g. .job-card (space-between + flex-wrap:wrap) so it behaves consistently with the rest of the app's responsive layout instead of being plain paragraph text. See .profile-tag below for the pill itself. */ #rfs-gbb-app .screen-header-row {display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:var(--space-1);} #rfs-gbb-app .screen-header-row h1 {margin-bottom:0;} #rfs-gbb-app .card {background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-card);padding:var(--space-4);margin-bottom:var(--space-4);box-shadow:var(--shadow-card);} #rfs-gbb-app label {display:block;font-size:var(--fs-sm);font-weight:600;color:var(--text-secondary);margin-bottom:var(--space-1);} #rfs-gbb-app input[type=text], #rfs-gbb-app input[type=tel], #rfs-gbb-app input[type=date], #rfs-gbb-app input[type=number], #rfs-gbb-app textarea, #rfs-gbb-app select { width:100%;padding:var(--control-pad-y) 10px;border:1px solid var(--border);border-radius:var(--radius-control);font-size:var(--fs-md2);margin-bottom:14px;background:var(--surface);color:var(--text); } #rfs-gbb-app input::placeholder, #rfs-gbb-app textarea::placeholder {color:var(--text-disabled);opacity:1;} #rfs-gbb-app .grid2 {display:grid;grid-template-columns:1fr 1fr;gap:0 var(--space-4);} #rfs-gbb-app .grid3 {display:grid;grid-template-columns:1fr 1fr 1fr;gap:0 var(--space-4);} @media(max-width:700px) { #rfs-gbb-app .grid2, #rfs-gbb-app .grid3 {grid-template-columns:1fr;} } /* .btn's vertical padding matches --control-pad-y (the same value used by text inputs/selects above) so a button sitting next to a field in the same row renders at very close to the same height instead of looking taller, the way it did when the two hand-tuned their padding separately. */ #rfs-gbb-app .btn {display:inline-flex;align-items:center;justify-content:center;min-height:var(--control-height);background:var(--accent-strong);color:var(--on-accent);border:none;padding:var(--control-pad-y) 22px;border-radius:var(--radius-control);font-size:var(--fs-md2);font-weight:600;cursor:pointer;transition:background-color .15s ease, border-color .15s ease, color .15s ease;} #rfs-gbb-app .btn:hover {background:var(--accent-strong-hover);} #rfs-gbb-app .btn.secondary {background:var(--surface);color:var(--text);border:1px solid var(--border-strong);} #rfs-gbb-app .btn.secondary:hover {background:var(--surface-alt);} /* v3.16.1: was background:var(--danger-text) -- that token is tuned for text on a tinted background, and in dark mode it's a light pastel (~2:1 contrast with the white text this button renders). --danger- strong stays AA-safe with white text in both themes. Used on dozens of "Remove" buttons app-wide. Design backlog item 2. */ #rfs-gbb-app .btn.danger {background:var(--danger-strong);} /* Only overrides horizontal padding/font-size -- min-height/flex-centering still come from the base .btn rule above, so a .btn.small renders shorter/denser text but at the exact same height as a full-size .btn. */ #rfs-gbb-app .btn.small {padding:6px 12px;font-size:var(--fs-sm);} #rfs-gbb-app .btn[disabled] {opacity:.45;cursor:not-allowed;} #rfs-gbb-app .actions-row {display:flex;justify-content:space-between;align-items:center;margin-top:var(--space-5);flex-wrap:wrap;gap:10px;} #rfs-gbb-app .tiers-wrap {display:grid;grid-template-columns:1fr 1fr 1fr;gap:var(--space-4);} @media(max-width:900px) { #rfs-gbb-app .tiers-wrap {grid-template-columns:1fr;} } #rfs-gbb-app .tier-col {background:var(--surface);border-radius:var(--radius-card);border:1px solid var(--border);overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--shadow-card);} #rfs-gbb-app .tier-head {padding:var(--tier-card-head-pad);color:var(--on-accent);} #rfs-gbb-app .tier-head.good {background:var(--good);color:var(--on-good);} #rfs-gbb-app .tier-head.better {background:var(--better);color:var(--on-better);} #rfs-gbb-app .tier-head.best {background:var(--best);color:var(--on-best);} #rfs-gbb-app .tier-head h3 {margin:0;font-size:var(--fs-card-title);font-weight:var(--fw-card-title);} #rfs-gbb-app .tier-head .total {font-size:var(--fs-tier-total);font-weight:700;margin-top:4px;} #rfs-gbb-app .tier-body {padding:var(--tier-card-body-pad);flex:1;} #rfs-gbb-app .group-label {font-size:var(--fs-xs);font-weight:700;text-transform:uppercase;letter-spacing:var(--ls-wide);color:var(--text-secondary);margin:14px 0 6px;} #rfs-gbb-app .item-row {display:flex;align-items:center;justify-content:space-between;padding:7px 0;border-bottom:1px solid var(--border-subtle);gap:8px;} #rfs-gbb-app .item-row:last-child {border-bottom:none;} #rfs-gbb-app .item-row .iname {font-size:var(--fs-sm2);flex:1;} #rfs-gbb-app .item-row .iprice {font-size:var(--fs-sm2);color:var(--text-secondary);white-space:nowrap;} #rfs-gbb-app .item-row.included .iname {color:var(--text);} #rfs-gbb-app .item-row input[type=checkbox] {width:var(--control-size-checkbox);height:var(--control-size-checkbox);flex-shrink:0;} #rfs-gbb-app .item-row input[type=number].qtyinput {width:56px;padding:5px;margin:0;flex-shrink:0;font-size:var(--fs-sm2);} #rfs-gbb-app .tier-foot {padding:var(--space-3) var(--space-4);background:var(--surface-alt);border-top:1px solid var(--border);} #rfs-gbb-app .tier-foot .row {display:flex;justify-content:space-between;font-size:var(--fs-sm2);padding:2px 0;} #rfs-gbb-app .tier-foot .row.total {font-weight:700;font-size:var(--fs-card-title);border-top:1px solid var(--border);margin-top:6px;padding-top:8px;} #rfs-gbb-app .altfuel-card {background:var(--amber-bg);border:1px solid var(--amber-border);border-radius:var(--radius-card);padding:var(--space-4);margin-top:18px;} #rfs-gbb-app .altfuel-card h3 {margin:0 0 4px;font-size:var(--fs-card-title);font-weight:var(--fw-card-title);color:var(--amber-text);} #rfs-gbb-app .altfuel-card p.note {font-size:var(--fs-card-subtitle);color:var(--amber-text);margin:0 0 10px;opacity:.85;} #rfs-gbb-app .altfuel-row {display:flex;justify-content:space-between;align-items:center;padding:6px 0;border-bottom:1px dashed var(--amber-border);font-size:var(--fs-sm2);} #rfs-gbb-app .altfuel-row:last-child {border-bottom:none;} #rfs-gbb-app .proposal-cards {display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;margin-bottom:20px;perspective:1200px;} @media(max-width:900px) { #rfs-gbb-app .proposal-cards {grid-template-columns:1fr;} } #rfs-gbb-app .prop-card {border:2px solid var(--border);border-radius:var(--radius-card);overflow:hidden;cursor:pointer;background:var(--surface);transition:border-color .15s ease, box-shadow .15s ease, transform .15s ease;transform-style:preserve-3d;display:flex;flex-direction:column;} /* v3.8.0: a true 3D flip for the tier-price header, replacing a prior rotate-and-swap trick (squish the whole card flat via an inline rotateY(90deg), swap innerHTML at the midpoint, unsquish). Both faces now sit in the DOM at once inside a perspective wrapper; flipCard() only toggles .is-flipped, and the two faces rotate past each other in 3D via CSS, hiding whichever is backface-out. .ph-front stays in normal flow (it sets .ph-flip-inner's height); .ph-back is absolutely positioned over it -- min-height below is sized for the taller (back) face's extra line so neither face clips. */ #rfs-gbb-app .prop-card .ph-flip {perspective:1000px;} #rfs-gbb-app .prop-card .ph-flip-inner {position:relative;min-height:158px;transition:transform .5s cubic-bezier(.4,.1,.2,1);transform-style:preserve-3d;} #rfs-gbb-app .prop-card .ph-flip.is-flipped .ph-flip-inner {transform:rotateY(180deg);} #rfs-gbb-app .prop-card .ph-front, #rfs-gbb-app .prop-card .ph-back {backface-visibility:hidden;-webkit-backface-visibility:hidden;width:100%;box-sizing:border-box;} #rfs-gbb-app .prop-card .ph-back {position:absolute;top:0;left:0;height:100%;transform:rotateY(180deg);} /* Matches .profile-card's hover lift below -- both are "clickable option card" components and should behave identically. */ /* v3.16.1: hover used to only move border-color + lift 2px, with no shadow change -- the "lift" read weaker than the elevation implied. Now deepens to --shadow-pop on hover too. Design backlog item 17. */ #rfs-gbb-app .prop-card:hover {border-color:var(--accent);transform:translateY(-2px);box-shadow:var(--shadow-pop);} #rfs-gbb-app .prop-card.chosen {border-color:var(--accent);box-shadow:var(--ring-accent);} #rfs-gbb-app .prop-card .ph {padding:var(--tier-card-head-pad);color:var(--on-accent);} #rfs-gbb-app .prop-card .ph.good {background:var(--good);color:var(--on-good);} #rfs-gbb-app .prop-card .ph.better {background:var(--better);color:var(--on-better);} #rfs-gbb-app .prop-card .ph.best {background:var(--best);color:var(--on-best);} #rfs-gbb-app .prop-card .ph h3 {margin:0;font-size:var(--fs-card-title);font-weight:var(--fw-card-title);} #rfs-gbb-app .prop-card .ph .total {font-size:var(--fs-tier-total);font-weight:700;} #rfs-gbb-app .prop-card .ph .total-suffix {font-size:var(--fs-sm2);font-weight:600;opacity:.85;margin-left:2px;} #rfs-gbb-app .prop-card .ph .financing-sub {font-size:var(--fs-xs);opacity:.9;margin-top:2px;} /* v3.12.0: .total-orig (struck-through "regular" price) and .discount-badge ("10% off — sign today" pill) removed along with the sign-today discount itself -- see the FINANCING section comment in rfs-gbb-app.js. flip-link is rendered on a colored tier-header background, so it uses the pill-overlay color modifier (translucent white) rather than one of the surface-based color modifiers -- everything else (shape, size, radius) comes from ".pill.pill-md". */ #rfs-gbb-app .prop-card .ph .flip-link {display:inline-block;margin-top:8px;border:none;cursor:pointer;font-family:inherit;} #rfs-gbb-app .prop-card .ph .flip-link:hover {background:rgba(255,255,255,.34);} #rfs-gbb-app .prop-card .pb .financing-line {font-size:var(--fs-sm);color:var(--accent-text);font-weight:600;padding:8px 0 2px;border-top:1px dashed var(--border);margin-top:6px;} #rfs-gbb-app .prop-card .pb {padding:var(--tier-card-body-pad);flex:1;} #rfs-gbb-app .prop-card .pb .li {font-size:var(--fs-sm);display:flex;justify-content:space-between;padding:4px 0;color:var(--text-secondary);} #rfs-gbb-app .prop-card .pick {padding:12px 16px;border-top:1px solid var(--border);display:flex;align-items:center;gap:8px;background:var(--surface-alt);margin-top:auto;} #rfs-gbb-app .prop-card .pick input {width:19px;height:19px;} #rfs-gbb-app .prop-card .pick label {margin:0;font-size:var(--fs-sm2);font-weight:600;color:var(--accent-text);cursor:pointer;} #rfs-gbb-app .decline-row {margin-bottom:20px;} #rfs-gbb-app .decline-row label {font-weight:600;color:var(--text);font-size:var(--fs-md);} /* v3.14.0: signature pads get a deliberate framed "mat" (themed ring via box-shadow, doesn't affect layout box) around the white drawing surface -- previously just a dashed border + flat white background, which read as an unstyled/placeholder box rather than an intentional signing area, especially in dark mode where the white rectangle otherwise floats with no visual relationship to anything else on the page. */ #rfs-gbb-app canvas#sigpad {border:1px solid var(--border-strong);border-radius:var(--radius-sm);width:100%;height:180px;touch-action:none;background:#fff;box-shadow:0 0 0 6px var(--surface-alt), var(--shadow-card);margin:10px 0;} #rfs-gbb-app .sig-actions {margin-top:8px;display:flex;gap:10px;} /* v3.16.1: these dense multi-column grids had no horizontal-scroll wrapper or responsive handling, unlike the rest of the app's explicit 480px/600px breakpoints for narrow (iPad Split View) widths -- a Striven Item ID column pushed some of them wider than the app's own fixed-width shell could show. display:block turns the outer into a plain scrollable block box (the browser still generates the real table layout underneath via its anonymous-table-box rules), which is a no-op when the table already fits -- only narrow viewports with a wide table actually get a scrollbar. Design backlog item 11. */ #rfs-gbb-app table.editor {width:100%;border-collapse:collapse;margin-bottom:10px;display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;} #rfs-gbb-app table.editor th {text-align:left;font-size:var(--fs-xs);color:var(--text-secondary);text-transform:uppercase;padding:4px 6px;} #rfs-gbb-app table.editor td {padding:4px 6px;} #rfs-gbb-app table.editor input[type=text], #rfs-gbb-app table.editor input[type=number] {margin-bottom:0;padding:6px 8px;font-size:var(--fs-sm2);} #rfs-gbb-app table.editor input[type=checkbox] {width:var(--control-size-checkbox);height:var(--control-size-checkbox);} #rfs-gbb-app .settings-tier {border:1px solid var(--border);border-radius:var(--radius-card);padding:var(--space-4);margin-bottom:var(--space-4);} /* v3.16.1: was a raw 10px, landing exactly between the --space-2 (8px) and --space-3 (12px) tokens. Rounded up to --space-3. Design backlog item 14. */ #rfs-gbb-app .settings-group {background:var(--surface-alt);border:1px solid var(--border);border-radius:var(--radius-sm);padding:var(--space-3);margin-bottom:10px;} #rfs-gbb-app .settings-group-head {display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;} #rfs-gbb-app .settings-group-head input {margin:0;flex:1;margin-right:8px;} /* v3.8.0: collapsible tier section header -- same role as .settings-group- head (which already toggles its own group) but for the tier-level card itself; cursor:pointer + a visible chevron on the whole row (not just a tiny icon) since this is the primary "find the section I want" click target on the whole screen now that everything starts collapsed. */ #rfs-gbb-app .settings-section-head {display:flex;justify-content:space-between;align-items:center;cursor:pointer;} #rfs-gbb-app .settings-section-head .co-toggle {font-size:var(--fs-sm);color:var(--text-secondary);} /* v3.8.0: red-flag state for an unparseable/negative price -- see validatePriceInput()/parsePriceOrKeep() in rfs-gbb-app.js. Border only (not a background fill) so it reads clearly in both themes without a dedicated dark-mode variant. */ #rfs-gbb-app .price-input.invalid {border-color:var(--danger-text);box-shadow:0 0 0 1px var(--danger-text);} /* ===== v3.0.0: Pill component ===== * Every "small rounded label" in the app -- the tier badge in Settings, * job status, arrival time, the technician chip, profile code/"Coming * Soon" badges, the price-list "see variants"/"Configurable" tags, doc * links, the tier-card discount ribbon -- used to be ~10 separately * hand-tuned classes (.badge, .arrival-badge, .tech-badge, * .profile-code-badge, .profile-soon-badge, .status-badge*, .doc-link, * .included-tag, .profile-tag/.profile-tag-chip, .discount-badge) each * with its own slightly-off padding/font-size (2px 7px vs 2px 8px vs 2px * 9px vs 3px 10px...). They're collapsed onto this single base class plus * size/color modifiers so every pill in the app is guaranteed to actually * match, not just look similar. (.chip / .chip-active in the Cold Call * wizard are intentionally left as their own class -- the JS selection * logic toggles that exact class name via classList -- but .chip still * pulls its font-size/radius from these same tokens below.) */ #rfs-gbb-app .pill {display:inline-block;flex-shrink:0;border-radius:var(--radius-pill);font-weight:600;line-height:1.4;white-space:nowrap;vertical-align:middle;} #rfs-gbb-app .pill-sm {font-size:var(--fs-2xs);padding:2px 8px;} #rfs-gbb-app .pill-md {font-size:var(--fs-xs);padding:3px 10px;} #rfs-gbb-app .pill-lg {font-size:var(--fs-sm);padding:5px 12px;border-radius:var(--radius-chip);} #rfs-gbb-app .pill-flex {display:inline-flex;align-items:center;gap:8px;} #rfs-gbb-app .pill-uppercase {text-transform:uppercase;letter-spacing:var(--ls-wide);font-weight:700;} #rfs-gbb-app .pill-link {cursor:pointer;font-family:inherit;border:1px solid var(--border);} #rfs-gbb-app .pill-link:hover {background:var(--surface-selected);} #rfs-gbb-app .pill-neutral {background:var(--accent-soft);color:var(--text-secondary);} #rfs-gbb-app .pill-accent {background:var(--accent-soft);color:var(--accent-text);} #rfs-gbb-app .pill-strong {background:var(--accent-strong);color:var(--on-accent);font-weight:700;} #rfs-gbb-app .pill-outline {background:var(--surface-alt);border:1px solid var(--border-strong);color:var(--text-secondary);} #rfs-gbb-app .pill-overlay {background:rgba(255,255,255,.22);color:#fff;} #rfs-gbb-app .pill-status-open {background:var(--status-open-bg);color:var(--status-open-text);} #rfs-gbb-app .pill-status-onhold {background:var(--status-onhold-bg);color:var(--status-onhold-text);} #rfs-gbb-app .pill-status-done {background:var(--status-done-bg);color:var(--status-done-text);} #rfs-gbb-app .pill-status-cancelled {background:var(--status-cancelled-bg);color:var(--status-cancelled-text);} #rfs-gbb-app .pill-status-other {background:var(--accent-soft);color:var(--text-secondary);} /* ===== v3.3.0: config-option component ===== * The proposal tier picker (renderConfigItemHtml) and the invoice item * picker (renderInvConfigItemHtml) in rfs-gbb-app.js each build three * levels of "pick one" radio rows -- model/tier, option-group choice, * sub-choice -- and used to hand-type the exact same layout/padding/ * conditional-highlight styling as an inline `style="..."` attribute in * both places independently. Collapsed onto this one component so the two * pickers can't drift apart from each other the way the old badge classes * did. * * .config-option is the "boxed" row (model/tier level): always has a * border, and gets a highlighted border+background when .chosen is added. * .config-option-plain is the "unboxed" row (option-group / sub-choice * levels): same flex layout, no border/background of its own. * .config-option-sub is a modifier for the one-level-deeper sub-choice * rows, which sit slightly smaller/tighter than their parent level. * .co-name/.co-sku/.co-price are the child pieces inside a row. */ #rfs-gbb-app .config-item {border-bottom:1px solid var(--border-subtle);padding:7px 0;} #rfs-gbb-app .config-item-head {display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);cursor:pointer;} #rfs-gbb-app .config-item-actions {display:flex;align-items:center;gap:var(--space-2);flex-shrink:0;} #rfs-gbb-app .co-toggle {font-size:var(--fs-2xs);color:var(--muted);} /* v3.16.1: same 10px -> --space-3 rounding as .settings-group above. Design backlog item 14. */ #rfs-gbb-app .config-expand-panel {margin-top:var(--space-2);padding:var(--space-3);background:var(--surface-inset);border:1px solid var(--border);border-radius:var(--radius-sm);} #rfs-gbb-app .config-subchoices {margin-left:22px;margin-bottom:6px;} #rfs-gbb-app .config-option, #rfs-gbb-app .config-option-plain {display:flex;align-items:center;justify-content:space-between;padding:6px var(--space-2);cursor:pointer;} #rfs-gbb-app .config-option {border:1px solid var(--border);border-radius:var(--radius-control);margin-bottom:6px;background:var(--surface);} #rfs-gbb-app .config-option.chosen {border-color:var(--accent);background:var(--surface-selected);} #rfs-gbb-app .config-option-sub {padding:4px var(--space-2);} #rfs-gbb-app .config-option .co-name, #rfs-gbb-app .config-option-plain .co-name {font-size:var(--fs-sm2);} #rfs-gbb-app .config-option-sub .co-name {font-size:var(--fs-sm);} #rfs-gbb-app .co-sku {font-size:var(--fs-xs);color:var(--muted);} #rfs-gbb-app .config-option-sub .co-sku {font-size:var(--fs-2xs);} #rfs-gbb-app .co-price {font-size:var(--fs-sm);color:var(--muted);} #rfs-gbb-app .config-note-input {margin-bottom:0;font-size:var(--fs-sm);} #rfs-gbb-app .toast {position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--text);color:var(--bg);padding:10px 20px;border-radius:var(--radius-sm);font-size:var(--fs-sm2);font-weight:600;opacity:0;pointer-events:none;transition:opacity .2s;z-index:999;max-width:90vw;text-align:center;box-shadow:var(--shadow-card);} #rfs-gbb-app .toast.show {opacity:1;} /* v3.6.4: distinct, consistent styling per toast() "type" -- success (e.g. "Proposal attached to Striven task ✓") is unmistakably green rather than the same neutral pill as everything else, and error/ fallback messages are unmistakably red -- see toast()'s docblock in rfs-gbb-app.js. Plain toast() calls with no type keep the original neutral look. */ /* v3.16.1: same fix as .btn.danger above -- *-text tokens fill with white text on top used to be unreadable in dark mode. Design backlog item 2. */ #rfs-gbb-app .toast.toast-success {background:var(--success-strong);color:var(--on-accent, #fff);} #rfs-gbb-app .toast.toast-error {background:var(--danger-strong);color:var(--on-accent, #fff);} /* ===== v3.0.0: themed confirm dialog (replaces window.confirm()) ===== * Every destructive action that used to pop the OS's native confirm() -- * switching technician, removing a fireplace section, and resetting the * Invoice/Membership/tier price lists -- routes through showConfirm() in * rfs-gbb-app.js instead, which builds this in-app modal from the same * tokens as everything else and resolves a Promise. z-index is * above .rfs-gbb-fullscreen's 999999 so it always sits on top, even when * the app has re-parented itself to in fullscreen mode. */ #rfs-gbb-app .confirm-overlay {position:fixed;inset:0;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;padding:20px;z-index:1000000;} #rfs-gbb-app .confirm-modal {background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-card);box-shadow:var(--shadow-pop);padding:20px;max-width:380px;width:100%;} #rfs-gbb-app .confirm-modal-title {margin:0 0 8px;font-size:var(--fs-card-title);font-weight:var(--fw-card-title);color:var(--text);} #rfs-gbb-app .confirm-modal-msg {margin:0 0 18px;font-size:var(--fs-md);color:var(--text-secondary);line-height:var(--lh-base);} #rfs-gbb-app .confirm-modal-actions {display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap;} #rfs-gbb-app .confirm-modal-actions .btn {padding:var(--control-pad-y) 16px;} #rfs-gbb-app .print-header {display:none;} #rfs-gbb-app footer.appfoot {text-align:center;color:var(--text-secondary);font-size:var(--fs-xs);padding:24px 0;} #rfs-gbb-app .signed-badge {display:inline-block;background:var(--success-bg);color:var(--success-text);border:1px solid var(--success-border);padding:var(--space-2) var(--space-3);border-radius:var(--radius-sm);font-size:var(--fs-md);margin-bottom:14px;} #rfs-gbb-app .flex-between {display:flex;justify-content:space-between;align-items:center;} #rfs-gbb-app .qty-note {font-size:var(--fs-2xs);color:var(--text-secondary);} /* ===== Theme toggle control (header) ===== */ #rfs-gbb-app .theme-toggle {display:inline-flex;align-items:center;background:var(--surface-alt);border:1px solid var(--border);border-radius:20px;padding:3px;gap:2px;} /* padding matches header.topbar nav button (8px 14px) above -- the two sit side by side in the topbar and used to be visibly different heights (6px/11px here vs 8px/14px there). */ #rfs-gbb-app .theme-toggle button {background:transparent;border:none;color:var(--text-secondary);font-size:var(--fs-xs);font-weight:600;padding:8px 14px;border-radius:16px;cursor:pointer;line-height:1;display:flex;align-items:center;gap:5px;} #rfs-gbb-app .theme-toggle button.active {background:var(--accent-strong);color:var(--on-accent);} #rfs-gbb-app .theme-toggle button:hover:not(.active) {background:var(--border-subtle);color:var(--text);} /* ===== v2: richer visual Service Profile ID guide (photo + "look for" cues) ===== * Replaces the earlier centered-text-only .profile-card layout with a * photo + description card, plus a disabled/"Coming Soon" state for * profiles that don't have a working flow yet (PIT/PEL/SP). * * v2.0.0: added a List/Grid view toggle (.profile-wrap.view-grid) and a * much more visually distinct disabled-card treatment (desaturated photo * + dashed border + the "Coming Soon" pill) that reads clearly as "not * available" in both light and dark mode without relying on color alone * (WCAG 1.4.1 -- don't use color as the only visual cue). * * v3.2.0: dropped the diagonal "COMING SOON" corner-ribbon pseudo-element * that used to sit on top of this -- the .profile-soon-badge pill (see * below) plus the desaturated/dashed treatment already communicate * "disabled" on their own, so the ribbon was redundant. */ #rfs-gbb-app .profile-wrap {display:flex;flex-direction:column;gap:14px;max-width:780px;margin:0 auto;} #rfs-gbb-app .profile-card {background:var(--surface);border:2px solid var(--border);border-radius:var(--radius-card);cursor:pointer;transition:border-color .15s ease, box-shadow .15s ease, transform .15s ease;padding:var(--space-4);display:flex;gap:var(--space-4);align-items:flex-start;text-align:left;position:relative;overflow:hidden;} /* v3.16.1: same hover-shadow + ring-token fixes as .prop-card above -- design backlog items 17 and 3. */ #rfs-gbb-app .profile-card:hover {border-color:var(--accent);transform:translateY(-2px);box-shadow:var(--shadow-pop);} #rfs-gbb-app .profile-card.chosen {border-color:var(--accent);box-shadow:var(--ring-accent);background:var(--surface-selected);} /* Disabled / "Coming Soon" state -- dashed border, muted+desaturated fill, reduced-opacity photo, "not-allowed" cursor, and the .profile-soon-badge pill (not color alone) so it's obvious at a glance in either theme. */ #rfs-gbb-app .profile-card.profile-card-disabled {cursor:not-allowed;border-style:dashed;border-color:var(--border-strong);background:var(--surface-disabled);} #rfs-gbb-app .profile-card.profile-card-disabled:hover {border-color:var(--border-strong);transform:none;} #rfs-gbb-app .profile-card.profile-card-disabled .profile-card-img {filter:grayscale(85%);opacity:.55;} #rfs-gbb-app .profile-card.profile-card-disabled .profile-card-inner {opacity:.68;} #rfs-gbb-app .profile-card-img {flex-shrink:0;width:130px;height:104px;border-radius:var(--radius-sm);overflow:hidden;background:var(--surface-alt);} #rfs-gbb-app .profile-card-img img {width:100%;height:100%;object-fit:cover;display:block;} #rfs-gbb-app .profile-card-inner {flex:1;min-width:0;} #rfs-gbb-app .profile-card-head {display:flex;align-items:center;gap:8px;margin-bottom:4px;flex-wrap:wrap;} #rfs-gbb-app .profile-code-badge {letter-spacing:var(--ls-wide);} #rfs-gbb-app .profile-soon-badge {margin-left:auto;} #rfs-gbb-app .profile-card h3 {margin:0;font-size:var(--fs-card-title);font-weight:var(--fw-card-title);color:var(--text);letter-spacing:var(--ls-tight);} #rfs-gbb-app .profile-card-desc {margin:0 0 8px;font-size:var(--fs-card-subtitle);color:var(--text-secondary);line-height:1.4;} #rfs-gbb-app .profile-lookfor {font-size:var(--fs-xs);color:var(--text-secondary);margin-bottom:6px;line-height:1.8;} #rfs-gbb-app .profile-lookfor-label {font-weight:600;color:var(--text);margin-right:2px;} #rfs-gbb-app .profile-tag-chip {margin:2px 3px 0 0;} #rfs-gbb-app .profile-pick-hint {font-size:var(--fs-xs);color:var(--text-secondary);} #rfs-gbb-app .profile-card.chosen .profile-pick-hint {color:var(--accent-text);font-weight:600;} #rfs-gbb-app .profile-card.profile-card-disabled .profile-pick-hint {font-style:italic;} /* v3.7.2 made this position:fixed to sit at the true right edge of the window; v3.8.1 fixed it overlapping header.topbar by measuring `top` against the bar's real height. v3.9.0: removed position:fixed entirely, per direct request -- a fixed pill stays parked in the same screen position even while the page scrolls, i.e. it kept floating over content the technician had scrolled to, which there's no need for. Plain static flow now: .screen-header-row is already `display:flex;justify-content:space-between`, so the pill still lands at the right edge of that row, level with the headline -- it just scrolls away with everything else instead of staying pinned. Kept the larger font-size/padding from the earlier "bump it up in size" requests, since that part of the ask still stands. */ #rfs-gbb-app .profile-tag {font-size:var(--fs-lg);padding:8px 18px;box-shadow:var(--shadow-card);} @media(max-width:600px) { #rfs-gbb-app .profile-tag {font-size:var(--fs-md2);padding:6px 14px;} } /* List/Grid toggle -- .profile-wrap.view-grid switches the same cards into a responsive card-grid layout so more profiles fit above the fold. */ #rfs-gbb-app .profile-view-toggle {display:flex;justify-content:flex-end;margin-bottom:10px;} #rfs-gbb-app .profile-wrap.view-grid {display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px;max-width:none;} /* v3.16.1: was a raw 14px, overriding the base rule's var(--space-4) [16px] -- the same component rendered at two different paddings depending on List vs Grid view. Now matches List view exactly. Design backlog item 13. */ #rfs-gbb-app .profile-wrap.view-grid .profile-card {flex-direction:column;align-items:stretch;text-align:left;padding:var(--space-4);height:100%;} #rfs-gbb-app .profile-wrap.view-grid .profile-card-img {width:100%;height:120px;} #rfs-gbb-app .profile-wrap.view-grid .profile-lookfor {display:none;} /* keep grid cards compact; List view keeps full detail */ #rfs-gbb-app .profile-wrap.view-grid .profile-card-desc {-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;display:-webkit-box;} #rfs-gbb-app .profile-wrap.view-grid .profile-pick-hint {margin-top:auto;padding-top:8px;display:block;} #rfs-gbb-app .profile-wrap.view-grid .profile-card-inner {display:flex;flex-direction:column;flex:1;} /* ===== v2: Checklist / Cold Call site photos, condition tables, chips, prepared-for banner ===== */ #rfs-gbb-app .prepared-for-banner {background:var(--amber-bg);border:1px solid var(--amber-border);border-radius:var(--radius-card);padding:14px 20px;margin:4px 0 18px;} #rfs-gbb-app .prepared-for-banner .pf-label {font-size:var(--fs-xs);font-weight:700;text-transform:uppercase;letter-spacing:var(--ls-wide);color:var(--amber-text);margin-bottom:3px;} #rfs-gbb-app .prepared-for-banner .pf-name {font-size:var(--fs-2xl);font-weight:700;color:var(--text);line-height:var(--lh-heading);} #rfs-gbb-app .prepared-for-banner .pf-address {font-size:var(--fs-md2);color:var(--text-secondary);margin-top:2px;} /* Site Photos card grid -- this is the reference component for "uniform cards" throughout the app: fixed-structure flex column (label -> help text -> image area -> actions), actions pinned to the bottom with margin-top:auto so every slot's buttons line up in a row regardless of label length, consistent --radius-card corner rounding, consistent header/subheader type scale. v3.3.0: standalone full-width cards (.card, .altfuel-card, .settings- tier, .job-card, .profile-card) all pad at var(--space-4) [16px] evenly on every side; cards nested inside a denser layout -- this one and .coldcall-subsection -- use the slightly tighter var(--space-3) var(--space-4) [12px/16px] instead. Both used to drift a px or two off their own family (14px vs 16px vs 18px) for no real reason. */ #rfs-gbb-app .checklist-photos-grid {display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px;align-items:stretch;} #rfs-gbb-app .photo-slot {display:flex;flex-direction:column;border:1px solid var(--border);border-radius:var(--radius-card);padding:var(--space-3) var(--space-4);background:var(--surface-alt);height:100%;} #rfs-gbb-app .photo-slot .ps-label {font-size:var(--fs-card-subtitle);font-weight:var(--fw-card-title);color:var(--text);margin-bottom:2px;} #rfs-gbb-app .photo-slot .ps-help {font-size:var(--fs-xs);color:var(--text-secondary);margin-bottom:8px;} #rfs-gbb-app .photo-slot .ps-preview {width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--surface);display:block;margin-bottom:8px;} #rfs-gbb-app .photo-slot .ps-placeholder {width:100%;aspect-ratio:4/3;border-radius:var(--radius-sm);border:1px dashed var(--border-strong);background:var(--surface);display:flex;align-items:center;justify-content:center;color:var(--text-secondary);font-size:var(--fs-xs);margin-bottom:8px;text-align:center;padding:8px;} #rfs-gbb-app .photo-slot .ps-actions {display:flex;gap:6px;flex-wrap:wrap;margin-top:auto;} #rfs-gbb-app .photo-slot input[type=file] {position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;} #rfs-gbb-app .photo-slot label.btn {position:relative;overflow:hidden;} #rfs-gbb-app .invoice-field-value {font-size:var(--fs-md2);color:var(--text);margin-bottom:14px;} #rfs-gbb-app canvas#invoicesigpad, #rfs-gbb-app canvas#membershipsigpad {border:1px solid var(--border-strong);border-radius:var(--radius-sm);width:100%;height:180px;touch-action:none;background:#fff;box-shadow:0 0 0 6px var(--surface-alt), var(--shadow-card);margin:10px 0;} #rfs-gbb-app .checklist-defects {display:flex;flex-direction:column;gap:6px;margin-bottom:6px;} #rfs-gbb-app .checkbox-line {display:flex;align-items:center;gap:8px;font-size:var(--fs-md);font-weight:400;color:var(--text);cursor:pointer;} /* v3.16.1: .item-row/.checkbox-line/table.editor checkbox sizing now share --control-size-checkbox instead of three near-matching-but- different raw values (19px/18px/17px). Design backlog item 18. */ #rfs-gbb-app .checkbox-line input {width:var(--control-size-checkbox);height:var(--control-size-checkbox);margin:0;flex-shrink:0;} #rfs-gbb-app table.condition-table {width:100%;border-collapse:collapse;margin-bottom:6px;} #rfs-gbb-app table.condition-table th {font-size:var(--fs-2xs);text-transform:uppercase;letter-spacing:var(--ls-wide);color:var(--text-secondary);text-align:center;padding:4px 6px;} #rfs-gbb-app table.condition-table th:first-child {text-align:left;} #rfs-gbb-app table.condition-table td {padding:6px;border-bottom:1px solid var(--border-subtle);font-size:var(--fs-sm2);color:var(--text);} #rfs-gbb-app table.condition-table td.rowlabel {white-space:nowrap;} #rfs-gbb-app table.condition-table td.radiocell {text-align:center;} #rfs-gbb-app table.condition-table td.radiocell input {width:17px;height:17px;} #rfs-gbb-app table.condition-table tr.condition-section-row td {background:var(--surface-alt);font-weight:700;font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:var(--ls-wide);color:var(--text-secondary);padding-top:12px;border-bottom:1px solid var(--border);} #rfs-gbb-app .checklist-ref-row {display:flex;gap:20px;align-items:flex-start;flex-wrap:wrap;} #rfs-gbb-app .checklist-ref-fields {flex:1;min-width:260px;} #rfs-gbb-app .checklist-ref-img {flex-shrink:0;width:170px;margin:0 auto;} #rfs-gbb-app .checklist-ref-img img {width:100%;height:auto;display:block;border:1px solid var(--border);border-radius:var(--radius-sm);background:#fff;padding:6px;} @media(max-width:700px) { #rfs-gbb-app .checklist-ref-img {width:140px;} } #rfs-gbb-app .chip-group {display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px;} /* v3.8.0: wizard step indicator (currently just the Cold Call inspection's 3 pages -- the longest, most-likely-to-need-a-progress-cue flow in the app) -- see renderCCWizardSteps() in rfs-gbb-app.js. Labels hide under 480px (the narrowest realistic width this app targets, iPad Split View/Slide Over) so 3 steps' worth of dots + connecting lines still fit one row instead of wrapping awkwardly. */ #rfs-gbb-app .wizard-steps {display:flex;align-items:center;margin:4px 0 var(--space-5);} #rfs-gbb-app .wizard-step {display:flex;align-items:center;gap:8px;flex-shrink:0;} #rfs-gbb-app .wizard-step-dot {display:flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;font-size:var(--fs-xs);font-weight:700;border:2px solid var(--border-strong);color:var(--text-secondary);background:var(--surface);flex-shrink:0;} #rfs-gbb-app .wizard-step-label {font-size:var(--fs-sm2);color:var(--text-secondary);white-space:nowrap;} #rfs-gbb-app .wizard-step.current .wizard-step-dot {border-color:var(--accent-strong);background:var(--accent-strong);color:var(--on-accent);} #rfs-gbb-app .wizard-step.current .wizard-step-label {color:var(--text);font-weight:700;} #rfs-gbb-app .wizard-step.done .wizard-step-dot {border-color:var(--accent-strong);background:var(--accent-soft);color:var(--accent-text);} #rfs-gbb-app .wizard-step.done .wizard-step-label {color:var(--text);} #rfs-gbb-app .wizard-step-sep {flex:1;height:2px;background:var(--border);margin:0 10px;min-width:16px;} @media(max-width:480px) { #rfs-gbb-app .wizard-step-label {display:none;} #rfs-gbb-app .wizard-step-sep {margin:0 6px;} } #rfs-gbb-app .chip {background:var(--surface);border:1px solid var(--border);color:var(--text);border-radius:var(--radius-chip);padding:6px 14px;font-size:var(--fs-sm);cursor:pointer;font-family:inherit;} #rfs-gbb-app .chip:hover {border-color:var(--accent);} #rfs-gbb-app .chip.chip-active {background:var(--accent-strong);border-color:var(--accent-strong);color:var(--on-accent);font-weight:600;} #rfs-gbb-app .coldcall-subsection {background:var(--surface-alt);border:1px solid var(--border);border-radius:var(--radius-card);padding:var(--space-3) var(--space-4);margin-bottom:14px;} #rfs-gbb-app .coldcall-subsection h3 {margin:0 0 8px;font-size:var(--fs-card-title);font-weight:var(--fw-card-title);color:var(--text);} /* ===== v3.3.0: "inset note" padding ===== * .cc-solution-note, .sample-note, .auth-error, .offline-banner, * .settings-permission-note, .attach-status, .diag-sample, and * .signed-badge above are all the same component -- a colored, bordered, * single-line-or-two note -- but each hand-tuned its own padding (8px 10px * vs 10px 14px vs 8px 12px vs 8px 14px). They now all share * var(--space-2) var(--space-3) [8px 12px]. */ #rfs-gbb-app .cc-solution-note {background:var(--warning-bg);border:1px solid var(--warning-border);border-radius:var(--radius-control);padding:var(--space-2) var(--space-3);margin:8px 0;font-size:var(--fs-sm);color:var(--warning-text);} /* v3.9.0: the Review & Sign preview -- flat page IMAGES (rasterized by pdf.js, see rasterizePdfBlobToImages() in rfs-gbb-app.js) swiped through directly by this app's own JS, replacing an embedded PDF