/* ========================================================================= RegPlus — monochrome + single-accent mobile-first UI theme (SLDS 2 under the hood). Reskins the SLDS 2 "cosmos" bundle via its own theming custom properties (--slds-c-*, see the component-token section) plus a bottom-nav / big-tile layer of our own on top. Structural markup is unchanged; this is a visual pass only. Palette: black/white/gray as the base, with exactly ONE brand accent (mint) used deliberately for CTAs, selection, and emphasis — plus a single reserved danger-red for critical grades/errors. Scattering many pastel hues across cards reads as a template; one accent used boldly reads as designed. Cards come in two flavors: solid "ink" (near-black, on the Create form) and plain white (list/detail views) — never a rainbow. ========================================================================= */ :root { /* ---- brand accent (the one color in the app) ---- */ --rp-accent: #12d9a8; --rp-accent-dark: #00b389; --rp-accent-soft: #dcfaf1; --rp-accent-on: #06251d; /* ---- reserved danger red (critical grades / errors only) ---- */ --rp-danger: #ff5c5c; --rp-danger-soft: #ffe1e1; --rp-danger-on: #430b0b; /* ---- surfaces: white page + "ink" (near-black) card surfaces ---- */ --rp-bg: #ffffff; --rp-surface: #ffffff; --rp-surface-2: #f2f3f5; --rp-surface-3: #e7e9ed; --rp-border: rgba(15, 17, 21, .08); --rp-border-strong: rgba(15, 17, 21, .14); --rp-ink: #14161a; --rp-ink-2: #1e2126; --rp-ink-3: #2a2d33; --rp-ink-border: rgba(255, 255, 255, .08); /* ---- text (on the white surfaces) ---- */ --rp-text: #15181d; --rp-text-weak: #5b6472; --rp-text-faint: #8b93a1; /* ---- text (on "ink" black surfaces) ---- */ --rp-ink-text: #ffffff; --rp-ink-text-weak: rgba(255, 255, 255, .6); --rp-ink-text-faint: rgba(255, 255, 255, .4); /* ---- shape ---- */ --rp-radius-sm: 12px; --rp-radius-md: 16px; --rp-radius-lg: 22px; --rp-radius-xl: 28px; --rp-radius-pill: 999px; --rp-shadow: 0 16px 40px rgba(20, 24, 32, .14); --rp-shadow-sm: 0 6px 18px rgba(20, 24, 32, .08); /* backwards-compat alias (in case anything still references it) */ --rp-green: var(--rp-accent); --rp-green-dark: var(--rp-accent-dark); --rp-green-soft: var(--rp-accent-soft); color-scheme: light; } /* ---------- base ---------- */ * { -webkit-tap-highlight-color: transparent; } html, body { height: 100%; } body { /* Google Sans is now actually loaded (see the in index.html's ), so it's the top preference everywhere. If that CDN is ever unreachable, `ui-rounded` is next — a real CSS generic family that Safari/iOS resolves to San Francisco Rounded, Apple's own chunky/rounded system font — a close zero-dependency match before falling through to plain system fonts. */ font-family: "Google Sans", ui-rounded, Roboto, -apple-system, "Segoe UI", "Helvetica Neue", system-ui, sans-serif; margin: 0; background: var(--rp-bg); color: var(--rp-text); font-size: 16px; -webkit-font-smoothing: antialiased; } a { color: var(--rp-accent); } ::selection { background: var(--rp-accent-soft); } /* Thin dark scrollbars where supported */ * { scrollbar-width: thin; scrollbar-color: var(--rp-surface-3) transparent; } *::-webkit-scrollbar { width: 8px; height: 8px; } *::-webkit-scrollbar-thumb { background: var(--rp-surface-3); border-radius: 8px; } .rp-vh-100 { min-height: 100vh; } /* ========================================================================= Component-token theming — SLDS2 reads these custom properties for every card / input / button / modal / badge / toast / checkbox, so setting them once here reskins the whole bundle without touching markup. ========================================================================= */ :root { /* card */ --slds-c-card-color-background: var(--rp-surface); --slds-c-card-color-border: var(--rp-border); --slds-c-card-text-color: var(--rp-text); --slds-c-card-radius-border: var(--rp-radius-lg); --slds-c-card-shadow: var(--rp-shadow-sm); /* inputs */ --slds-c-input-color-background: var(--rp-surface-2); --slds-c-input-color-background-focus: var(--rp-surface-2); --slds-c-input-color-border: var(--rp-border-strong); --slds-c-input-color-border-focus: var(--rp-accent); --slds-c-input-radius-border: var(--rp-radius-md); --slds-c-input-text-color: var(--rp-text); --slds-c-input-text-color-focus: var(--rp-text); --slds-c-input-shadow: none; --slds-c-input-shadow-focus: 0 0 0 3px var(--rp-accent-soft); --slds-c-textarea-color-background: var(--rp-surface-2); --slds-c-textarea-color-background-focus: var(--rp-surface-2); --slds-c-textarea-color-border: var(--rp-border-strong); --slds-c-textarea-radius-border: var(--rp-radius-md); --slds-c-textarea-text-color: var(--rp-text); --slds-c-textarea-text-color-focus: var(--rp-text); --slds-c-textarea-shadow: none; --slds-c-textarea-shadow-focus: 0 0 0 3px var(--rp-accent-soft); --slds-c-select-color-background: var(--rp-surface-2); --slds-c-select-color-background-focus: var(--rp-surface-2); --slds-c-select-color-border: var(--rp-border-strong); --slds-c-select-color-border-focus: var(--rp-accent); --slds-c-select-radius-border: var(--rp-radius-md); --slds-c-select-text-color: var(--rp-text); --slds-c-select-text-color-focus: var(--rp-text); --slds-c-select-shadow: none; /* buttons — note: only the per-variant (neutral-/brand-) hover/active tokens are set here, never the plain --slds-c-button-color-background-* ones; SLDS2's own :hover/:active rules populate those from the variant tokens, and setting them unconditionally at :root short-circuits the brand button's non-hover fill (its base rule reads -hover first). */ --slds-c-button-radius-border: var(--rp-radius-md); --slds-c-button-color-background: var(--rp-surface-2); --slds-c-button-color-border: var(--rp-border-strong); --slds-c-button-color-border-hover: var(--rp-border-strong); --slds-c-button-text-color: var(--rp-text); --slds-c-button-text-color-hover: var(--rp-text); --slds-c-button-shadow: none; --slds-c-button-neutral-color-background: var(--rp-surface-2); --slds-c-button-neutral-color-background-hover: var(--rp-surface-3); --slds-c-button-neutral-color-background-active: var(--rp-surface-3); --slds-c-button-neutral-color-border: var(--rp-border-strong); --slds-c-button-neutral-color-border-hover: var(--rp-border-strong); --slds-c-button-brand-color-background: var(--rp-accent); --slds-c-button-brand-color-background-hover: var(--rp-accent-dark); --slds-c-button-brand-color-background-active: var(--rp-accent-dark); --slds-c-button-brand-color-border: var(--rp-accent); --slds-c-button-brand-color-border-hover: var(--rp-accent-dark); --slds-c-button-brand-text-color: var(--rp-accent-on); --slds-c-button-brand-text-color-hover: var(--rp-accent-on); --slds-c-button-inverse-color-background: rgba(255, 255, 255, .08); --slds-c-button-inverse-color-background-hover: rgba(255, 255, 255, .16); --slds-c-button-inverse-color-border: rgba(255, 255, 255, .16); --slds-c-button-inverse-text-color: var(--rp-text); /* modal */ --slds-c-modal-color-background: var(--rp-surface); --slds-c-modal-color-border: var(--rp-border); --slds-c-modal-text-color: var(--rp-text); --slds-c-modal-content-color-background: var(--rp-surface); --slds-c-modal-content-text-color: var(--rp-text); --slds-c-modal-header-color-background: var(--rp-surface); --slds-c-modal-header-text-color: var(--rp-text); --slds-c-modal-footer-color-background: var(--rp-surface); --slds-c-modal-footer-text-color: var(--rp-text); --slds-c-modal-radius-border: var(--rp-radius-xl); /* badge */ --slds-c-badge-color-background: var(--rp-surface-3); --slds-c-badge-text-color: var(--rp-text); --slds-c-badge-color-border: transparent; --slds-c-badge-radius-border: var(--rp-radius-pill); --slds-c-badge-lightest-color-background: var(--rp-surface-3); --slds-c-badge-lightest-color-border: transparent; /* checkbox / toggle */ --slds-c-checkbox-toggle-color-background: var(--rp-surface-3); --slds-c-checkbox-toggle-color-border: var(--rp-border-strong); --slds-c-checkbox-toggle-mark-color-foreground: var(--rp-text-weak); --slds-c-checkbox-color-background: var(--rp-surface-2); --slds-c-checkbox-color-border: var(--rp-border-strong); --slds-c-checkbox-color-background-checked: var(--rp-accent); --slds-c-checkbox-color-border-checked: var(--rp-accent); /* toast */ --slds-c-toast-color-background: var(--rp-surface-3); --slds-c-toast-text-color: var(--rp-text); --slds-c-toast-radius-border: var(--rp-radius-lg); } /* Checked toggle state (SLDS2 checkbox-toggle has no -checked suffix on this token, only reachable via the :checked selector — see CLAUDE.md note). */ .slds-checkbox_toggle [type="checkbox"]:checked + .slds-checkbox_faux_container .slds-checkbox_faux { --slds-c-checkbox-toggle-color-background: var(--rp-accent) !important; --slds-c-checkbox-toggle-color-border: var(--rp-accent-dark) !important; } .slds-checkbox_toggle .slds-checkbox_faux_container .slds-checkbox_faux { --slds-c-checkbox-toggle-switch-color-background: var(--rp-text); } /* ---------- brand color for links / outline-brand / focus (non-tokenized bits) ---------- */ .slds-button_outline-brand { color: var(--rp-accent); border-color: var(--rp-accent); background: transparent; } .slds-button_outline-brand:hover, .slds-button_outline-brand:focus { color: var(--rp-accent-dark); border-color: var(--rp-accent-dark); background: var(--rp-accent-soft); } .slds-input:focus, .slds-textarea:focus, .slds-select:focus { outline: none; } /* SLDS2 already strips native to its longest option text, collapsing it to just its padding — force full width. */ width: 100%; box-sizing: border-box; } .slds-select_container { display: block; width: 100%; } /* Bigger, more tappable form controls across the board */ .slds-input, .slds-textarea, .slds-select, .slds-button { min-height: 50px; font-size: 1rem; } .slds-textarea { min-height: 96px; padding-top: 12px; } .slds-button { font-weight: 600; padding-left: 20px; padding-right: 20px; } .slds-button_icon, .slds-button_icon-border, .slds-button_icon-border-filled { min-height: 44px; min-width: 44px; } /* These read color from SLDS's own global --slds-g-color-on-surface-1 token (cosmos theme defaults it to a blue brand tone) rather than any of our --slds-c-* component tokens, so it slips through untouched otherwise — pin it to our ink text color directly. */ .slds-button_icon-border, .slds-button_icon-border-filled, .slds-modal__close, .slds-modal__close .slds-button__icon { color: var(--rp-text); fill: var(--rp-text); } /* ---------- typography utility overrides ---------- */ h1, h2, h3 { color: var(--rp-text); font-weight: 700; } .slds-text-heading_medium, .slds-text-heading_small { color: var(--rp-text); font-weight: 700; } .slds-text-body_small { color: var(--rp-text); } .slds-text-color_weak { color: var(--rp-text-weak) !important; } .slds-text-color_error { color: var(--rp-danger) !important; } .slds-form-element__label { color: var(--rp-text-weak); font-weight: 600; font-size: .85rem; } .slds-form-element__help { color: var(--rp-text-faint); } .slds-required { color: var(--rp-danger); } .slds-border_bottom { border-bottom: 1px solid var(--rp-border) !important; } /* icons default to current text color already (fill:currentColor inline); dim the "weak" icons that sit next to muted labels */ .slds-icon-text-default { color: var(--rp-text-faint); } /* ---------- Login ---------- */ /* Bold black hero, content sitting directly on the canvas (no floating white card) — matches the reference's full-bleed dark mood-check screens rather than a light card-on-gradient login form. */ .rp-login-bg { background: radial-gradient(circle at 30% -10%, rgba(18, 217, 168, .14), transparent 45%), var(--rp-ink); padding: 24px; } .rp-login-bg h1, .rp-login-bg .slds-form-element__label { color: var(--rp-ink-text); } .rp-login-bg p, .rp-login-bg .slds-text-color_weak { color: var(--rp-ink-text-weak) !important; } .rp-login-bg .rp-logo-badge { background: rgba(18, 217, 168, .16); } .rp-card { border: 1px solid var(--rp-border); border-radius: var(--rp-radius-xl); background: var(--rp-surface); box-shadow: var(--rp-shadow); } .rp-logo-badge { width: 64px; height: 64px; border-radius: var(--rp-radius-lg); background: var(--rp-accent-soft); color: var(--rp-accent); display: flex; align-items: center; justify-content: center; margin-left: auto; margin-right: auto; } /* ---------- Navbar / account menu ---------- */ .rp-navbar { background: var(--rp-bg); border-bottom: 1px solid var(--rp-border); min-height: 64px; position: sticky; top: 0; z-index: 100; } .rp-navbar .slds-button_icon-border-filled { background: var(--rp-surface-2); border-color: var(--rp-border-strong); border-radius: var(--rp-radius-pill); color: var(--rp-text); } .rp-brand { color: var(--rp-text); font-weight: 700; } .rp-side-menu { position: absolute; width: 220px; z-index: 1000; top: 68px; background: var(--rp-surface); border: 1px solid var(--rp-border); border-radius: var(--rp-radius-lg); box-shadow: var(--rp-shadow); overflow: hidden; padding: 6px; } .rp-side-menu .slds-dropdown__list { background: transparent; } .rp-side-menu .slds-dropdown__item > a { justify-content: flex-start; gap: 0.6rem; color: var(--rp-text); border-radius: var(--rp-radius-md); padding: 12px 12px; min-height: 48px; } .rp-side-menu .slds-dropdown__item > a:hover { background: var(--rp-surface-2); } .rp-side-menu .slds-has-divider_top-space { border-top: 1px solid var(--rp-border); margin-top: 6px; padding-top: 6px; } /* ---------- Bottom navigation (fixed, floating light bar) ---------- White/light bar with a soft mint pill behind the whole active item (icon + label together), matching the newest reference — not a black floating pill anymore. */ .rp-bottom-nav { position: fixed; left: 50%; bottom: max(16px, env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 500; display: flex; align-items: stretch; gap: 2px; width: calc(100% - 32px); max-width: 480px; background: var(--rp-surface); border: 1px solid var(--rp-border); border-radius: var(--rp-radius-xl); box-shadow: var(--rp-shadow); padding: 6px; } .rp-bottom-nav__item { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; background: transparent; border: none; border-radius: var(--rp-radius-lg); color: var(--rp-text-faint); padding: 10px 4px 8px; cursor: pointer; min-height: 56px; } .rp-bottom-nav__item:active { background: var(--rp-surface-2); } .rp-bottom-nav__icon { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; } .rp-bottom-nav__icon svg { width: 100%; height: 100%; } .rp-bottom-nav__label { font-size: .68rem; font-weight: 600; letter-spacing: .01em; } .rp-bottom-nav__item.is-active { background: var(--rp-accent-soft); color: var(--rp-accent-dark); } .rp-bottom-nav__item.is-active .rp-bottom-nav__label { color: var(--rp-accent-dark); } /* Reserve room above the floating nav so page content never sits under it */ #landing-view, #create-view, #detail-view, #import-view, #records-view { padding-bottom: 104px; box-sizing: border-box; min-height: 100vh; } /* ---------- Landing / search ---------- */ .rp-search-wrap { min-height: calc(100vh - 64px - 104px); justify-content: flex-start; padding-top: 10vh; } .rp-search-form { max-width: 480px; width: 100%; margin-left: auto; margin-right: auto; } .rp-brand-text { color: var(--rp-text); } .rp-search-group { border-radius: var(--rp-radius-pill); background: var(--rp-surface-2); border: 1px solid var(--rp-border-strong); padding: 6px 6px 6px 4px; box-shadow: var(--rp-shadow-sm); } .rp-search-group .slds-form-element__control, .rp-search-group .slds-input { background: transparent; border: none; box-shadow: none; min-height: 46px; } .rp-search-group .slds-button { border-radius: var(--rp-radius-pill); } /* Mobile landscape: shrink vertical spacing so the search bar stays above the fold */ @media (max-height: 420px) and (orientation: landscape) { .rp-search-wrap h2, .rp-search-wrap .rp-logo-badge { margin-top: 0.5rem !important; margin-bottom: 0.5rem !important; } .rp-search-wrap h2 { font-size: 1.25rem; } .rp-search-wrap { min-height: calc(100vh - 48px); padding-top: 4vh; } .rp-bottom-nav { display: none; } #landing-view, #create-view, #detail-view, #import-view, #records-view { padding-bottom: 24px; } } /* ---------- Vehicle result / record cards (big tappable tiles) ---------- */ .rp-clickable-card { cursor: pointer; transition: transform .08s ease, background-color .08s ease; display: flex; align-items: center; gap: 14px; } .rp-clickable-card:active { transform: scale(0.98); background: var(--rp-surface-2) !important; } .rp-card-icon { flex: 0 0 auto; width: 48px; height: 48px; border-radius: var(--rp-radius-md); background: var(--rp-ink); color: var(--rp-accent); display: flex; align-items: center; justify-content: center; } .rp-card-icon svg { width: 24px; height: 24px; } .rp-card-body { flex: 1 1 auto; min-width: 0; } .rp-card-chevron { flex: 0 0 auto; color: var(--rp-text-faint); width: 18px; height: 18px; } .rp-card-chevron_next { transform: scaleX(-1); } /* ---------- Badges / grade chips ---------- */ .slds-badge { font-weight: 700; padding: 4px 12px; } .slds-badge.slds-theme_warning { background: var(--rp-ink) !important; color: var(--rp-ink-text) !important; } .slds-badge.slds-theme_success { background: var(--rp-accent) !important; color: var(--rp-accent-on) !important; } /* Grade coding, restrained to two tiers rather than a five-color rainbow: A/B/C read as routine (plain dark chip), D/F read as needing attention (the one reserved danger-red) — shared by the search/records card badge, the card's leading icon tile, and the detail view badge; see RP_GRADE_COLORS in app.js. */ .rp-badge-grade { background: var(--rp-ink) !important; color: var(--rp-ink-text) !important; } .rp-badge-grade.grade-critical { background: var(--rp-danger) !important; color: var(--rp-danger-on) !important; } .rp-card-icon.grade-critical { background: var(--rp-danger); color: var(--rp-danger-on); } /* Grade quick-select tiles on the Create form: unselected reads as a plain dark pill, selected is always the one brand accent (mint) — no per-letter rainbow. The -hover/-active variants are pinned too — otherwise .slds-button_brand's own rule checks --slds-c-button-color-background-hover *first*, so a lingering :hover (e.g. right after a pointer click) would fall back to a different shade instead of staying put. */ #cv-grade-group .slds-button_neutral, #cv-province-quick .slds-button_neutral { --slds-c-button-neutral-color-background: var(--rp-ink); --slds-c-button-neutral-color-background-hover: var(--rp-ink-2); --slds-c-button-neutral-color-background-active: var(--rp-ink-2); --slds-c-button-neutral-color-border: var(--rp-ink); --slds-c-button-neutral-color-border-hover: var(--rp-ink-2); --slds-c-button-text-color: var(--rp-ink-text); --slds-c-button-text-color-hover: var(--rp-ink-text); } /* ---------- Create form: solid "ink" sectioned cards ---------- Each field group on the Create form is its own near-black card (mobile pattern: scannable tiles instead of one long uniform list) — restrained to black/white/gray, with the single mint accent appearing deliberately in just two spots per card (the icon glyph, the eyebrow chip) rather than a different pastel hue per section. */ .rp-form-card { background: var(--rp-ink); border-radius: var(--rp-radius-lg); padding: 18px; margin-bottom: 14px; border: 1px solid var(--rp-ink-border); box-shadow: 0 8px 20px rgba(20, 24, 32, .16); color: var(--rp-ink-text); } .rp-form-card__head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; } .rp-form-card__icon { flex: 0 0 auto; width: 40px; height: 40px; border-radius: var(--rp-radius-pill); background: rgba(255, 255, 255, .08); color: var(--rp-accent); display: flex; align-items: center; justify-content: center; } .rp-form-card__icon svg { width: 20px; height: 20px; } .rp-form-card__eyebrow { display: inline-block; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 3px 10px; border-radius: var(--rp-radius-pill); margin-bottom: 6px; background: var(--rp-accent); color: var(--rp-accent-on); } .rp-form-card__title { display: block; font-size: 1.05rem; font-weight: 800; margin: 0; color: var(--rp-ink-text); } .rp-form-card .slds-form-element__label { color: var(--rp-ink-text-weak); font-weight: 700; } .rp-form-card .slds-form-element__help { color: var(--rp-ink-text-faint); } .rp-toggle-card-label .slds-form-element__label { font-size: 1.05rem; font-weight: 800; color: var(--rp-ink-text); } /* "Add more details" reads as a dashed add-a-section tile, not a plain button */ .rp-add-details-btn { display: flex; align-items: center; justify-content: center; gap: 8px; border: 2px dashed var(--rp-border-strong) !important; background: transparent !important; color: var(--rp-accent) !important; border-radius: var(--rp-radius-lg) !important; min-height: 56px; } .rp-add-details-btn:hover { background: var(--rp-accent-soft) !important; border-color: var(--rp-accent) !important; } .slds-form-element__help { font-style: italic; } /* ---------- Create / detail / import form columns ---------- */ .rp-form-col { max-width: 480px; width: 100%; } .rp-form-col-wide { max-width: 720px; width: 100%; } /* SLDS's own .slds-col{flex-grow:0} rule loads after .slds-grow in the bundle and wins on equal specificity — force grow back on explicitly. */ .slds-col.slds-grow { flex: 1 1 auto !important; } /* Quick-select tiles (Province / Grade) — big, chunky, tap-first buttons instead of small pill buttons, so this reads like a tile grid, not a button toolbar. .slds-button-group (from the SLDS markup) normally joins adjacent buttons into one segmented pill by rounding only the first/last button's outer corner and dropping the border between them — once the tiles are spaced out in a wrapping/grid layout instead of touching, that asymmetric corner reads as a lopsided notch on the end tiles. Force every tile to the same full radius + full border, independent of position. */ .rp-quick-group { flex-wrap: wrap; gap: 10px; } .rp-quick-group .slds-button, .rp-quick-group .slds-button:first-child, .rp-quick-group .slds-button:last-child { margin-bottom: 0; min-height: 56px; border-radius: var(--rp-radius-md) !important; border-inline-end-width: var(--slds-g-sizing-border-1, 1px) !important; flex: 1 1 auto; } #cv-grade-group.rp-quick-group { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; } #cv-grade-group.rp-quick-group .slds-button, #cv-grade-group.rp-quick-group .slds-button:first-child, #cv-grade-group.rp-quick-group .slds-button:last-child { min-width: 0; min-height: 64px; padding-left: 0; padding-right: 0; font-size: 1.3rem; font-weight: 800; } .rp-select-with-manage { align-items: flex-end; } .rp-image-preview { max-width: 140px; border-radius: var(--rp-radius-md); border: 1px solid var(--rp-border); } /* ---------- Detail view ---------- */ .rp-detail-image { max-width: 100%; max-height: 220px; object-fit: cover; border-radius: var(--rp-radius-lg); } .rp-detail-list { list-style: none; margin: 0; padding: 0; } .rp-detail-list li { min-height: 52px; } .rp-detail-list li:last-child { border-bottom: none; } /* ---------- Modals as bottom sheets ---------- */ .slds-modal__container { border-radius: var(--rp-radius-xl); overflow: hidden; border: 1px solid var(--rp-border); } .slds-modal__header { border-bottom: 1px solid var(--rp-border); } .slds-modal__footer { border-top: 1px solid var(--rp-border); display: flex; gap: 10px; } .slds-modal__footer .slds-button { flex: 1 1 0; } .slds-backdrop { background: rgba(0, 0, 0, .7); } .slds-backdrop.slds-backdrop_open { background: rgba(0, 0, 0, .7); } /* ---------- Manage-list modal rows ---------- */ #manage-list-items > div { border-color: var(--rp-border) !important; min-height: 48px; } /* ---------- Import view ---------- */ .rp-table-scroll { overflow-x: auto; border-radius: var(--rp-radius-md); border: 1px solid var(--rp-border); } .slds-table { background: var(--rp-surface); color: var(--rp-text); } .slds-table thead th { background: var(--rp-surface-2); color: var(--rp-text-weak); } .slds-table tbody td, .slds-table thead th { border-color: var(--rp-border) !important; } /* ---------- Alerts / notify banners ---------- */ .slds-notify_alert { border-radius: var(--rp-radius-md); border: none; } .slds-notify_alert.slds-theme_info { background: var(--rp-surface-2); color: var(--rp-text); } .slds-notify_alert h2 { color: inherit; } /* ---------- Toast ---------- */ .rp-toast-container { position: fixed; bottom: calc(96px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); z-index: 9000; width: 90%; max-width: 420px; } .slds-notify_toast.slds-theme_success { background: var(--rp-surface-3); border: 1px solid var(--rp-border); } .slds-notify_toast .slds-icon-text-default, .slds-notify_toast svg { color: var(--rp-accent); }