/* ============================================================================= LIQUID GLASS — The Active Pharm / CDPartner design system (2026-11-02) ----------------------------------------------------------------------------- One visual language for every portal on this deployment: the clinic (customer) portal, the Active Pharm admin, the consultant portal and the signed-out pages. Ported from the AtlasMPS Glass UI system York approved on 2026-10-23 (atlasmps-custom.css, BUTTON SYSTEM / SURFACE RADIUS / GLASS UI) and retuned for The Active Pharm's cool navy/cyan palette. Two layers, as Apple's Liquid Glass guidance draws them: Functional layer sidebar, menus, popovers, tooltips, toasts, dialogs, sheets, the phone tab bar and sticky action bars float above the page in a translucent glass material (blur, a lift in saturation, a hairline edge). Content layer cards, tables, forms and everything inside the page stay opaque, on hairlines with barely-there shadows. Glass never goes on content. The top bar keeps the portal's solid brand color (York: the true brand, never a faded glass tint). Loaded LAST in every layout (api/views/layouts.php). Pages that link their own stylesheet in the body (active-pharm-shop.css) still lose to the role rules here, because those rules sit in cascade layers with !important: an important declaration in a layer beats every unlayered important one, whatever its specificity. For !important the FIRST declared layer wins, so segmented controls beat the button roles of the buttons inside them, buttons beat surfaces, and glass comes last. Change a button's role class instead of overriding a role here. Tokens: --ui-* (this file). The Active Pharm's own --ap-* tokens (active-pharm-tokens.css) follow the same radius and shadow scale, so the shop's .ap-* components and the admin reskin move with this system. Accessibility: Reduce Transparency, Increase Contrast and browsers without backdrop-filter get opaque surfaces; Reduce Motion drops the movement; touch screens get 44px targets. ============================================================================= */ @layer lg-controls, lg-buttons, lg-surfaces, lg-glass; /* ── 1. Tokens ───────────────────────────────────────────────────────────── */ :root { --ui-font: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --ui-ease: cubic-bezier(0.2, 0.8, 0.2, 1); --ui-spring: cubic-bezier(0.32, 0.72, 0, 1); /* Radius: one concentric scale. Buttons and chips are capsules. */ --ui-r-xs: 6px; --ui-r-sm: 8px; --ui-r-field: 10px; --ui-r-card: 14px; --ui-r-menu: 14px; --ui-r-sheet: 22px; --ui-r-pill: 999px; /* Neutrals, cool to sit with the navy brand. label-3 is 4.8:1 on the canvas. */ --ui-canvas: #F2F4F7; --ui-surface-2: #F8FAFC; --ui-card: #FFFFFF; --ui-label-1: #0F172A; --ui-label-2: #475569; --ui-label-3: #5B6B80; --ui-label-4: #94A3B8; --ui-sep: rgba(15, 23, 42, 0.08); --ui-sep-strong: rgba(15, 23, 42, 0.13); --ui-fill: rgba(100, 116, 139, 0.12); --ui-fill-hover: rgba(15, 23, 42, 0.045); --ui-fill-selected: rgba(15, 23, 42, 0.07); --ui-fill-strong: rgba(100, 116, 139, 0.2); --ui-field-bg: #FFFFFF; --ui-field-disabled: #F1F5F9; --ui-field-border: rgba(15, 23, 42, 0.16); --ui-field-border-hover: rgba(15, 23, 42, 0.28); --ui-check-border: rgba(15, 23, 42, 0.34); --ui-zebra-solid: #F9FAFB; /* Status colors: ink on a soft tint. Every pill, alert and chip uses these. */ --ui-green: #166534; --ui-green-tint: rgba(34, 160, 84, 0.12); --ui-green-solid: #15803D; --ui-amber: #9A5600; --ui-amber-tint: rgba(232, 146, 12, 0.15); --ui-amber-solid: #B45309; --ui-red: #B91C1C; --ui-red-tint: rgba(220, 38, 38, 0.10); --ui-red-solid: #C62828; --ui-blue: #1D5FB8; --ui-blue-tint: rgba(29, 110, 220, 0.11); --ui-blue-solid: #1D5FB8; --ui-purple: #6E3DB8; --ui-purple-tint: rgba(126, 72, 210, 0.11); --ui-purple-solid: #6E3DB8; --ui-grey: #475569; --ui-grey-tint: rgba(100, 116, 139, 0.14); --ui-grey-solid: #64748B; /* Brand: the tenant's primary does the interactive work; the accent (cyan) is identity, used in content, never for text or focus (2.1:1 on white). */ --ui-brand: var(--sa-btn-brand, var(--sa-primary-color, #21426B)); --ui-brand-fg: var(--sa-btn-brand-fg, var(--sa-on-primary, #FFFFFF)); --ui-brand-ink: var(--sa-brand-text, var(--ui-brand)); --ui-brand-tint: color-mix(in srgb, var(--ui-brand) 10%, transparent); --ui-brand-tint-strong: color-mix(in srgb, var(--ui-brand) 16%, transparent); --ui-accent: var(--sa-secondary-color, #0CC3F7); --ui-focus: color-mix(in srgb, var(--ui-brand) 55%, transparent); /* Elevation: navy-tinted, soft and short for content; deep for floating. */ --ui-elev-1: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.03); --ui-elev-2: 0 1px 2px rgba(15, 23, 42, 0.05), 0 8px 24px -12px rgba(15, 37, 62, 0.18); --ui-elev-3: 0 2px 6px rgba(15, 23, 42, 0.06), 0 16px 40px -12px rgba(15, 37, 62, 0.30); --ui-elev-4: 0 4px 12px rgba(15, 23, 42, 0.08), 0 32px 80px -20px rgba(15, 37, 62, 0.42); /* Glass: regular for bars and menus, thick for text-heavy panes (sidebar, dialogs). */ --ui-glass: rgba(255, 255, 255, 0.78); --ui-glass-thick: rgba(255, 255, 255, 0.86); --ui-glass-menu: rgba(255, 255, 255, 0.92); --ui-glass-edge: rgba(255, 255, 255, 0.62); --ui-glass-hairline: rgba(15, 23, 42, 0.08); --ui-glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.7); --ui-backdrop: saturate(1.6) blur(22px); --ui-backdrop-thick: saturate(1.4) blur(32px); --ui-scrim: rgba(10, 18, 32, 0.34); --ui-tooltip: rgba(15, 23, 42, 0.9); /* Controls */ --ui-seg-thumb: #FFFFFF; --ui-seg-thumb-shadow: 0 1px 2px rgba(15, 23, 42, 0.12), 0 0 0 0.5px rgba(15, 23, 42, 0.06); --ui-switch-off: #E2E8F0; --ui-knob-shadow: 0 1px 2px rgba(0, 0, 0, 0.22), 0 0 0 0.5px rgba(0, 0, 0, 0.04); --ui-btn-secondary-bg: #E9EDF2; --ui-btn-secondary-hover: #DDE3EA; --ui-btn-secondary-fg: #0F172A; --ui-btn-outline-border: rgba(15, 23, 42, 0.18); --ui-btn-danger: #B91C1C; --ui-btn-danger-hover: #991B1B; --ui-btn-danger-fg: #FFFFFF; /* Phone chrome: the tab bar's height, so pages can keep content clear of it. */ --ui-tabbar-h: 64px; --ui-safe-bottom: env(safe-area-inset-bottom, 0px); } [data-theme-mode="dark"] { --ui-canvas: #0B0E14; --ui-surface-2: #121722; --ui-card: #161B26; --ui-label-1: #F1F5F9; --ui-label-2: #CBD5E1; --ui-label-3: #94A3B8; --ui-label-4: #64748B; --ui-sep: rgba(255, 255, 255, 0.08); --ui-sep-strong: rgba(255, 255, 255, 0.13); --ui-fill: rgba(148, 163, 184, 0.16); --ui-fill-hover: rgba(255, 255, 255, 0.05); --ui-fill-selected: rgba(255, 255, 255, 0.08); --ui-fill-strong: rgba(148, 163, 184, 0.28); --ui-field-bg: #10141D; --ui-field-disabled: #141925; --ui-field-border: rgba(255, 255, 255, 0.14); --ui-field-border-hover: rgba(255, 255, 255, 0.26); --ui-check-border: rgba(255, 255, 255, 0.32); --ui-zebra-solid: #191F2B; --ui-green: #4ADE80; --ui-green-tint: rgba(48, 209, 88, 0.16); --ui-green-solid: #15803D; --ui-amber: #FBBF24; --ui-amber-tint: rgba(255, 159, 10, 0.17); --ui-amber-solid: #B45309; --ui-red: #F87171; --ui-red-tint: rgba(255, 69, 58, 0.17); --ui-red-solid: #C62828; --ui-blue: #7CB4FF; --ui-blue-tint: rgba(10, 132, 255, 0.19); --ui-blue-solid: #2A6FD6; --ui-purple: #C89BFF; --ui-purple-tint: rgba(191, 90, 242, 0.19); --ui-purple-solid: #7E4BC9; --ui-grey: #CBD5E1; --ui-grey-tint: rgba(148, 163, 184, 0.2); --ui-grey-solid: #475569; /* Dark mode: the tenant's brand lifted a step so a filled button separates from the dark surfaces, with the tenant's own readable text color (--sa-on-primary, set per tenant in layouts.php). The Active Pharm pins its navy in dark mode; a tenant without a pinned brand gets the theme's near-white primary, and then dark text. */ --ui-brand: var(--sa-btn-brand, color-mix(in srgb, var(--sa-primary-color, #21426B) 80%, #FFFFFF)); --ui-brand-fg: var(--sa-btn-brand-fg, var(--sa-on-primary, #0B1220)); --ui-brand-ink: var(--sa-brand-text, #DCE7F5); --ui-focus: rgba(203, 225, 255, 0.6); --ui-elev-1: 0 1px 2px rgba(0, 0, 0, 0.3); --ui-elev-2: 0 1px 2px rgba(0, 0, 0, 0.35), 0 8px 24px -12px rgba(0, 0, 0, 0.6); --ui-elev-3: 0 2px 6px rgba(0, 0, 0, 0.4), 0 16px 40px -12px rgba(0, 0, 0, 0.7); --ui-elev-4: 0 4px 12px rgba(0, 0, 0, 0.45), 0 32px 80px -20px rgba(0, 0, 0, 0.8); --ui-glass: rgba(22, 27, 38, 0.76); --ui-glass-thick: rgba(20, 25, 35, 0.86); --ui-glass-menu: rgba(28, 34, 46, 0.92); --ui-glass-edge: rgba(255, 255, 255, 0.09); --ui-glass-hairline: rgba(0, 0, 0, 0.45); --ui-glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.06); --ui-scrim: rgba(0, 0, 0, 0.5); --ui-tooltip: rgba(51, 65, 85, 0.94); --ui-seg-thumb: #475569; --ui-seg-thumb-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); --ui-switch-off: #334155; --ui-btn-secondary-bg: #222A38; --ui-btn-secondary-hover: #2C3646; --ui-btn-secondary-fg: #E2E8F0; --ui-btn-outline-border: rgba(255, 255, 255, 0.2); --ui-btn-danger: #F87171; --ui-btn-danger-hover: #FCA5A5; --ui-btn-danger-fg: #1A0B0B; } @media (prefers-reduced-transparency: reduce) { :root { --ui-glass: #FFFFFF; --ui-glass-thick: #FFFFFF; --ui-glass-menu: #FFFFFF; --ui-backdrop: none; --ui-backdrop-thick: none; --ui-tooltip: #0F172A; } [data-theme-mode="dark"] { --ui-glass: #161B26; --ui-glass-thick: #161B26; --ui-glass-menu: #1C2230; } } @media (prefers-contrast: more) { :root { --ui-glass: #FFFFFF; --ui-glass-thick: #FFFFFF; --ui-glass-menu: #FFFFFF; --ui-backdrop: none; --ui-backdrop-thick: none; --ui-sep: rgba(15, 23, 42, 0.24); --ui-sep-strong: rgba(15, 23, 42, 0.36); --ui-field-border: rgba(15, 23, 42, 0.5); --ui-glass-hairline: rgba(15, 23, 42, 0.4); --ui-label-3: #334155; } [data-theme-mode="dark"] { --ui-glass: #161B26; --ui-glass-thick: #161B26; --ui-glass-menu: #1C2230; --ui-sep: rgba(255, 255, 255, 0.26); --ui-sep-strong: rgba(255, 255, 255, 0.38); --ui-field-border: rgba(255, 255, 255, 0.5); --ui-glass-hairline: rgba(255, 255, 255, 0.4); --ui-label-3: #CBD5E1; } } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { :root { --ui-glass: #FFFFFF; --ui-glass-thick: #FFFFFF; --ui-glass-menu: #FFFFFF; } [data-theme-mode="dark"] { --ui-glass: #161B26; --ui-glass-thick: #161B26; --ui-glass-menu: #1C2230; } } /* ── 2. Type and control sizes ─────────────────────────────────────────────── Unlayered and without !important on purpose: a page that sizes its own controls keeps them; these replace only the theme's defaults. The system font on Apple devices (SF Pro), Inter everywhere else; The Active Pharm's display serif stays on the few hero headlines that use it. */ :root { --default-font-family: var(--ui-font); --default-text-color: var(--ui-label-1); } body { font-family: var(--ui-font); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* One control height, 36px, for buttons, fields and selects. */ .btn:where(:not(.btn-icon):not(.btn-link):not(.btn-close):not(.btn-sm):not(.btn-lg)) { padding-top: 0.4375rem; padding-bottom: 0.4375rem; } .btn:where(:not(.btn-icon):not(.btn-link):not(.btn-close)) { padding-left: 1.05rem; padding-right: 1.05rem; } .btn.btn-sm:where(:not(.btn-icon):not(.btn-link)) { padding-left: 0.8rem; padding-right: 0.8rem; } .form-control:where(:not(.form-control-sm):not(.form-control-lg):not(textarea)), .form-select:where(:not(.form-select-sm):not(.form-select-lg)) { padding-top: 0.4375rem; padding-bottom: 0.4375rem; line-height: 1.43; } .form-label { font-size: 0.8125rem; font-weight: 500; color: var(--ui-label-1); margin-bottom: 0.375rem; } .form-text { font-size: 0.75rem; color: var(--ui-label-3); } .form-check-label { color: var(--ui-label-1); } .card-title { font-weight: 600; letter-spacing: -0.011em; } .modal-title { font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.012em; } .table, .ap-shell { font-variant-numeric: tabular-nums; } ::selection { background-color: color-mix(in srgb, var(--ui-brand) 18%, transparent); } /* ── 3. Controls: one segmented control, one switch, one checkbox ────────── Every view switcher, filter group, period picker and mode toggle is a grey capsule track with a raised white thumb on the selected segment; every on/off switch is a 36 by 20 track with a 16px knob in the brand color. A new segmented or switch class goes in these lists. */ @layer lg-controls { :where(.sa-filter-group__options, .sa-view-switcher, .sa-view-toggle, .ap-view-toggle, .ap-mode-toggle, .tb-seg, .tbi-segs, .ap-filter-pills, .sa-time-pills, .rn-view-toggle, .cp-view-toggle, .notif-toolbar__left:has(> .notif-filter-btn), .lg-seg, .btn-group:has(> .btn-check):not(:has(> .dropdown-toggle)), .btn-group:has(> .btn.active):not(:has(> .dropdown-toggle))) { /* display is never !important here: pages hide a whole control (or one segment) with display:none. */ display: inline-flex; align-items: center !important; flex-wrap: nowrap; gap: 2px !important; padding: 2px !important; border: 0 !important; border-radius: var(--ui-r-pill) !important; background: var(--ui-fill) !important; box-shadow: none !important; overflow: visible !important; } /* Filter groups can hold many statuses: let them scroll sideways on a phone instead of wrapping into a wall. */ :is(.sa-filter-group__options, .ap-filter-pills) { max-width: 100%; overflow-x: auto !important; scrollbar-width: none; } :is(.sa-filter-group__options, .ap-filter-pills)::-webkit-scrollbar { display: none; } :where(.sa-filter-group__options, .sa-view-switcher, .sa-view-toggle, .ap-view-toggle, .ap-mode-toggle, .tb-seg, .tbi-segs, .ap-filter-pills, .sa-time-pills, .rn-view-toggle, .cp-view-toggle, .notif-toolbar__left:has(> .notif-filter-btn), .lg-seg, .btn-group:has(> .btn-check):not(:has(> .dropdown-toggle)), .btn-group:has(> .btn.active):not(:has(> .dropdown-toggle))) > :where(button, a, label, .btn):where(:not([class*="__label"]):not([class*="__hint"]):not([class*="__count"])) { display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: 1 1 auto; min-height: 30px; min-width: 30px; margin: 0 !important; padding: 4px 12px !important; border: 0 !important; border-radius: var(--ui-r-pill) !important; background: transparent !important; background-image: none !important; box-shadow: none !important; color: var(--ui-label-2) !important; font-size: 0.8125rem; font-weight: 500; line-height: 1.2; white-space: nowrap; transition: background-color 0.18s var(--ui-ease), color 0.18s var(--ui-ease), box-shadow 0.18s var(--ui-ease); filter: none !important; transform: none !important; } :where(.sa-filter-group__options, .sa-view-switcher, .sa-view-toggle, .ap-view-toggle, .ap-mode-toggle, .tb-seg, .tbi-segs, .ap-filter-pills, .sa-time-pills, .rn-view-toggle, .cp-view-toggle, .notif-toolbar__left:has(> .notif-filter-btn), .lg-seg, .btn-group:has(> .btn-check):not(:has(> .dropdown-toggle)), .btn-group:has(> .btn.active):not(:has(> .dropdown-toggle))) > :where(button, a, label, .btn):where(:not([class*="__label"]):not([class*="__hint"]):not([class*="__count"])):hover { color: var(--ui-label-1) !important; background: var(--ui-fill-hover) !important; } /* The selected segment: a raised thumb, whichever way the page marks selection. */ :where(.sa-filter-group__options, .sa-view-switcher, .sa-view-toggle, .ap-view-toggle, .ap-mode-toggle, .tb-seg, .tbi-segs, .ap-filter-pills, .sa-time-pills, .rn-view-toggle, .cp-view-toggle, .notif-toolbar__left:has(> .notif-filter-btn), .lg-seg, .btn-group:has(> .btn-check):not(:has(> .dropdown-toggle)), .btn-group:has(> .btn.active):not(:has(> .dropdown-toggle))) > :where(button, a, label, .btn):is(.active, .is-active, .selected, .is-on, [aria-pressed="true"], [aria-selected="true"], [aria-checked="true"]), :where(.btn-group, .tb-seg) > :is(input:checked) + :is(label, .btn), .tb-seg label > input:checked + span { background: var(--ui-seg-thumb) !important; color: var(--ui-label-1) !important; box-shadow: var(--ui-seg-thumb-shadow) !important; font-weight: 600; } .tb-seg label > span { border-radius: var(--ui-r-pill) !important; } :where(.sa-filter-group__options, .sa-view-switcher, .sa-view-toggle, .ap-view-toggle, .ap-mode-toggle, .ap-filter-pills, .tb-seg, .lg-seg) > :where(button, a, label, .btn):focus-visible { outline: 2px solid var(--ui-focus) !important; outline-offset: 1px !important; } /* Switches: Bootstrap's knob is the background image, white with a soft shadow. */ .form-switch .form-check-input { width: 36px !important; height: 20px !important; margin-top: 0.1em; border: 0 !important; border-radius: var(--ui-r-pill) !important; background-color: var(--ui-switch-off) !important; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-10 -10 20 20'%3e%3cdefs%3e%3cfilter id='s' x='-50%25' y='-50%25' width='200%25' height='200%25'%3e%3cfeDropShadow dy='.6' stdDeviation='.6' flood-opacity='.28'/%3e%3c/filter%3e%3c/defs%3e%3ccircle r='7.6' fill='%23fff' filter='url(%23s)'/%3e%3c/svg%3e") !important; background-size: 20px 20px !important; background-position: left center !important; background-repeat: no-repeat !important; box-shadow: none !important; cursor: pointer; transition: background-position 0.2s var(--ui-ease), background-color 0.2s var(--ui-ease) !important; } .form-switch .form-check-input:checked { background-color: var(--ui-brand) !important; background-position: right center !important; } [data-theme-mode="dark"] .form-switch .form-check-input:checked { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-10 -10 20 20'%3e%3ccircle r='7.6' fill='%230B1220'/%3e%3c/svg%3e") !important; } .form-switch:has(> .form-check-label):not(.form-check-reverse):not(.ps-0):not(.p-0) { padding-left: 46px !important; } .form-switch:has(> .form-check-label):not(.form-check-reverse):not(.ps-0):not(.p-0) > .form-check-input { margin-left: -46px !important; } /* Checkboxes and radios: a soft square and a circle, filled with the brand when checked. */ .form-check-input[type="checkbox"]:not(:where(.form-switch) *) { border-radius: 5px !important; } .form-check-input:checked:not(:where(.form-switch) *) { background-color: var(--ui-brand) !important; border-color: var(--ui-brand) !important; } .form-check-input:not(:checked):not(:where(.form-switch) *) { background-color: var(--ui-field-bg) !important; border: 1px solid var(--ui-check-border) !important; } [data-theme-mode="dark"] .form-check-input[type="checkbox"]:checked:not(:where(.form-switch) *) { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%230B1220' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e") !important; } [data-theme-mode="dark"] .form-check-input[type="radio"]:checked { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%230B1220'/%3e%3c/svg%3e") !important; } .form-check-input:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-brand) 18%, transparent) !important; } .form-check-input:focus-visible { outline: 2px solid var(--ui-focus) !important; outline-offset: 2px !important; } /* Plain checkboxes the shop draws without Bootstrap's class. */ .ap-shell input[type="checkbox"]:not(.form-check-input), .ap-shell input[type="radio"]:not(.form-check-input) { accent-color: var(--ui-brand); } } /* ── 4. Buttons: every button is a capsule and plays one of five roles ───── Primary the main action of a page, form or dialog: the brand, filled. Secondary supporting actions (Cancel, Close, Back, toolbar actions): grey. Tertiary every other action: outline. Text inline actions (Edit, Change, Clear all): brand-colored text. Destructive delete, remove, deactivate: red, filled to confirm, outline elsewhere. Semantic colors mean state, never action: btn-success / btn-info / btn-warning / btn-dark render as Primary. A button that closes a dialog is Secondary unless it carries a Primary or Destructive class. */ @layer lg-buttons { :where(.btn, .ap-btn, .al-btn, .atlas-btn, .hc-btn, .ed-btn, .pa-action-btn, .pa-bulk-btn, .pa-cancel-btn, .tb-btn, .cp-export-btn, .cp-preset-btn, .psb-action-btn, .pst-add-btn, .tsk-new-btn, .msg-sidebar__new-btn, .msg-compose__send, .msg-thread__action-btn, .msg-thread__back-btn, .msg-bulk-bar__btn, .mb-view-btn, .mb-card__restore-btn, .sa-order-success__pdf-btn, .up-action-card__btn, .sa-customize-btn, .sa-dash-action-btn, .sa-back-to-clinic-btn, .ag-btn, .lg-btn, .btn-auth-submit, .sa-export-pill, .actlog-icon-btn, .notif-actions-btn, .rn-filter-pill, .rn-cat-pill, .sa-sort-btn):where(:not(.btn-close):not(.btn-icon):not(.ap-btn-icon)) { border-radius: var(--ui-r-pill) !important; } :where(.btn, .ap-btn, .al-btn, .atlas-btn, .hc-btn, .ed-btn, .pa-action-btn, .pa-bulk-btn, .tb-btn, .cp-export-btn, .ag-btn, .lg-btn):focus-visible { outline: 2px solid var(--ui-focus) !important; outline-offset: 2px !important; box-shadow: none !important; } /* Icon-only buttons: a circle. */ :where(.btn-icon, .ap-btn-icon) { border-radius: var(--ui-r-pill) !important; } /* Joined edges stay square: button groups and input groups (the button takes the field's corners). */ .input-group > .btn { border-radius: var(--ui-r-field) !important; } .btn-group > .btn:not(:last-child):not(.dropdown-toggle), .btn-group > .btn.dropdown-toggle-split:first-child, .btn-group > .btn-group:not(:last-child) > .btn, .input-group:not(.has-validation) > .btn:not(:last-child):not(.dropdown-toggle), .input-group.has-validation > .btn:nth-last-child(n+3) { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; } .btn-group > .btn:nth-child(n+3), .btn-group > :not(.btn-check) + .btn, .btn-group > .btn-group:not(:first-child) > .btn, .input-group > .btn:not(:first-child) { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; } /* Tertiary: outline. First, so a module's role modifier wins over its base class. */ :where(.btn-outline-primary, .btn-outline-secondary, .btn-outline-success, .btn-outline-info, .btn-outline-warning, .btn-outline-dark, .al-btn, .al-btn--ghost, .atlas-btn, .hc-btn, .ed-btn, .pa-action-btn, .pa-bulk-btn, .tb-btn, .cp-export-btn, .psb-action-btn, .msg-thread__action-btn, .msg-thread__back-btn, .msg-bulk-bar__btn, .mb-view-btn, .mb-card__restore-btn, .sa-order-success__pdf-btn, .up-action-card__btn, .sa-customize-btn, .sa-dash-action-btn, .sa-back-to-clinic-btn, .lg-btn--tertiary, .actlog-icon-btn, .notif-actions-btn, .rn-filter-pill, .sa-sort-btn) { background-color: transparent !important; background-image: none !important; border: 1px solid var(--ui-btn-outline-border) !important; color: var(--ui-label-1) !important; } :where(.btn-outline-primary, .btn-outline-secondary, .btn-outline-success, .btn-outline-info, .btn-outline-warning, .btn-outline-dark, .al-btn, .al-btn--ghost, .atlas-btn, .hc-btn, .ed-btn, .pa-action-btn, .pa-bulk-btn, .tb-btn, .cp-export-btn, .psb-action-btn, .msg-thread__action-btn, .msg-thread__back-btn, .msg-bulk-bar__btn, .mb-view-btn, .mb-card__restore-btn, .sa-order-success__pdf-btn, .up-action-card__btn, .sa-customize-btn, .sa-dash-action-btn, .sa-back-to-clinic-btn, .lg-btn--tertiary, .actlog-icon-btn, .notif-actions-btn, .rn-filter-pill, .sa-sort-btn):is(:hover, :focus-visible, :active, .show):not(:disabled):not(.disabled) { background-color: var(--ui-fill-hover) !important; border-color: var(--ui-brand-ink) !important; color: var(--ui-brand-ink) !important; } :where(.btn-outline-primary, .btn-outline-secondary, .btn-outline-success, .btn-outline-info, .btn-outline-warning, .btn-outline-dark).active, .btn-check:checked + :where(.btn-outline-primary, .btn-outline-secondary, .btn-outline-success, .btn-outline-info, .btn-outline-dark) { background-color: var(--ui-brand) !important; border-color: var(--ui-brand) !important; color: var(--ui-brand-fg) !important; } /* Secondary: grey, filled. */ :where(.btn-secondary, .btn-light, .ap-btn-secondary, .pa-cancel-btn, .cp-preset-btn, .lg-btn--secondary, .sa-export-pill, :is(.btn, .ap-btn, .al-btn, .atlas-btn, .hc-btn, .ed-btn)[data-bs-dismiss="modal"]) { background-color: var(--ui-btn-secondary-bg) !important; background-image: none !important; border-color: var(--ui-btn-secondary-bg) !important; color: var(--ui-btn-secondary-fg) !important; } :where(.btn-secondary, .btn-light, .ap-btn-secondary, .pa-cancel-btn, .cp-preset-btn, .lg-btn--secondary, .sa-export-pill, :is(.btn, .ap-btn, .al-btn, .atlas-btn, .hc-btn, .ed-btn)[data-bs-dismiss="modal"]):is(:hover, :focus-visible, :active, .active, .show):not(:disabled):not(.disabled) { background-color: var(--ui-btn-secondary-hover) !important; border-color: var(--ui-btn-secondary-hover) !important; color: var(--ui-btn-secondary-fg) !important; } /* Primary: the brand, filled. */ :where(.btn-primary, .btn-success, .btn-info, .btn-warning, .btn-dark, .btn-primary-light, .btn-sa-primary, .ap-btn-primary, .al-btn--primary, .atlas-btn--primary, .atlas-btn--accent, .hc-btn-primary, .ed-btn--primary, .pa-action-btn--primary, .pa-bulk-btn--primary, .pst-add-btn, .tsk-new-btn, .msg-sidebar__new-btn, .msg-compose__send, .tb-btn--primary, .lg-btn--primary, .btn-auth-submit) { background-color: var(--ui-brand) !important; background-image: none !important; border-color: var(--ui-brand) !important; color: var(--ui-brand-fg) !important; filter: none !important; } :where(.btn-primary, .btn-success, .btn-info, .btn-warning, .btn-dark, .btn-primary-light, .btn-sa-primary, .ap-btn-primary, .al-btn--primary, .atlas-btn--primary, .atlas-btn--accent, .hc-btn-primary, .ed-btn--primary, .pa-action-btn--primary, .pa-bulk-btn--primary, .pst-add-btn, .tsk-new-btn, .msg-sidebar__new-btn, .msg-compose__send, .tb-btn--primary, .lg-btn--primary, .btn-auth-submit):is(:hover, :focus-visible, :active, .active, .show):not(:disabled):not(.disabled) { background-color: color-mix(in srgb, var(--ui-brand), #FFFFFF 12%) !important; border-color: color-mix(in srgb, var(--ui-brand), #FFFFFF 12%) !important; color: var(--ui-brand-fg) !important; } [data-theme-mode="dark"] :where(.btn-primary, .btn-success, .btn-info, .btn-warning, .btn-dark, .btn-primary-light, .btn-sa-primary, .ap-btn-primary, .al-btn--primary, .atlas-btn--primary, .atlas-btn--accent, .hc-btn-primary, .ed-btn--primary, .pa-action-btn--primary, .pa-bulk-btn--primary, .pst-add-btn, .tsk-new-btn, .msg-sidebar__new-btn, .msg-compose__send, .tb-btn--primary, .lg-btn--primary):is(:hover, :focus-visible, :active, .active, .show):not(:disabled):not(.disabled) { background-color: color-mix(in srgb, var(--ui-brand), #000000 10%) !important; border-color: color-mix(in srgb, var(--ui-brand), #000000 10%) !important; } .btn-check:checked + .btn-primary { background-color: var(--ui-brand) !important; color: var(--ui-brand-fg) !important; } /* Text buttons take the brand, not Bootstrap blue. */ :where(.btn-link, .ap-btn-text, .lg-btn--text) { background: transparent !important; border-color: transparent !important; color: var(--ui-brand-ink) !important; } :where(.btn-link, .ap-btn-text, .lg-btn--text):is(:hover, :focus-visible) { color: var(--ui-brand-ink) !important; text-decoration: underline; text-underline-offset: 3px; } /* Destructive. */ :where(.btn-danger, .lg-btn--danger) { background-color: var(--ui-btn-danger) !important; background-image: none !important; border-color: var(--ui-btn-danger) !important; color: var(--ui-btn-danger-fg) !important; } :where(.btn-danger, .lg-btn--danger):is(:hover, :focus-visible, :active, .active, .show):not(:disabled):not(.disabled) { background-color: var(--ui-btn-danger-hover) !important; border-color: var(--ui-btn-danger-hover) !important; color: var(--ui-btn-danger-fg) !important; } :where(.btn-outline-danger, .psb-action-btn--danger, .msg-thread__action-btn--danger, .msg-bulk-bar__btn--danger, .sa-notif-action-btn--danger) { background-color: transparent !important; background-image: none !important; border: 1px solid color-mix(in srgb, var(--ui-btn-danger) 45%, transparent) !important; color: var(--ui-btn-danger) !important; } :where(.btn-outline-danger, .psb-action-btn--danger, .msg-thread__action-btn--danger, .msg-bulk-bar__btn--danger, .sa-notif-action-btn--danger):is(:hover, :focus-visible, :active):not(:disabled):not(.disabled) { background-color: var(--ui-red-tint) !important; border-color: var(--ui-btn-danger) !important; color: var(--ui-btn-danger) !important; } /* Disabled: quiet, never a different color family. */ :where(.btn, .ap-btn):is(:disabled, .disabled) { opacity: 0.45 !important; } } /* ── 5. Surfaces: one radius scale ──────────────────────────────────────── Cards, panels and tiles: --ui-r-card. Fields: --ui-r-field. Dialogs and sheets: --ui-r-sheet. Menus: --ui-r-menu. A new card or field class goes in these lists. Joined edges (input groups) stay square. */ .card { --bs-card-border-radius: var(--ui-r-card); --bs-card-inner-border-radius: calc(var(--ui-r-card) - 1px); } .modal { --bs-modal-border-radius: var(--ui-r-sheet); --bs-modal-inner-border-radius: calc(var(--ui-r-sheet) - 1px); } .accordion { --bs-accordion-border-radius: var(--ui-r-card); --bs-accordion-inner-border-radius: calc(var(--ui-r-card) - 1px); } @layer lg-surfaces { :where(.card, .custom-card, .sa-stat-card, .sa-chart-card, .sa-kpi-card, .cs-stat-card, .ps-stat-card, .cs-panel, .sa-dash-panel, .ps-panel, .resource-card, .pp-info-card, .pa-tile, .pa-card, .ed-panel, .ed-kpi-card, .ed-info-card, .dist-panel-box, .up-panel, .sa-template-card, .generic-action-card, .cp-stat-tile, .cp-kpi-tile, .cp-account-card, .wiki-search-box, .up-action-card, .tb-panel, .tbi-panel, .sa-tab-card, .sa-selection-card, .sa-hco-chart-card, .ep-searchable-card, .sp-card, .sa-staff-card, .sa-folder-grid-card, .sa-folder-card, .sa-file-grid-card, .rr-stat-tile, .pp-stat-card, .mb-card, .tsk-detail-panel, .tsk-card, .sp-check-card, .sa-wizard-panel, .sa-signature-card, .sa-map-card, .sa-dir-card, .sa-customize-panel, .psm-card, .pse-card, .pending-card, .pending-approval-card, .hc-card, .cb-result-box, .cb-card, .sa-report-card, .sa-quick-actions-card, .sa-mod-card, .sa-hco-location-card, .sa-ent-card, .role-card, .psb-module-card, .ps-login-config-card, .ps-entity-theme-card, .pp-docs-upload-card, .pee-token-panel, .pee-template-card, .pee-card, .ms-card, .mb-add-panel, .atlas-card, .al-card, .ag-card, .ap-panel, .ap-stat-tile, .ap-kpi-tile, .ap-product-card, .ap-checkout-panel, .ap-attention-card, .ap-reorder-all-card, .ap-pdp-panel, .ap-location-card, .ap-doclib-upload-card, .ap-doclib-panel, .ap-category-tile, .ap-category-box, .ap-attention-panel, .ap-order-summary, .ap-glance-panel, .ap-rail-section, .ap-cart-spotlight, .ap-cta-banner, .sa-controls-bar, .sa-template-cards, .lg-card) { border-radius: var(--ui-r-card) !important; } :where(.form-control, .form-select, .input-group-text, .choices__inner, .dt-input, .sa-gs-input, .ap-input, .ap-select, .sa-select, input:is(:not([type]), [type="text"], [type="email"], [type="search"], [type="password"], [type="number"], [type="tel"], [type="url"], [type="date"], [type="datetime-local"], [type="time"], [type="month"]), select, textarea) { border-radius: var(--ui-r-field) !important; } /* Search fields are capsules. */ :where(.ap-search .ap-input, .ap-doclib-search .ap-input, .sa-gs-input, div.dt-container .dt-search input, input[type="search"]) { border-radius: var(--ui-r-pill) !important; } .card > .card-header:first-child, .modal-content > .modal-header:first-child { border-top-left-radius: calc(var(--ui-r-card) - 1px) !important; border-top-right-radius: calc(var(--ui-r-card) - 1px) !important; } .card > .card-footer:last-child { border-bottom-left-radius: calc(var(--ui-r-card) - 1px) !important; border-bottom-right-radius: calc(var(--ui-r-card) - 1px) !important; } .card > .table-responsive:last-child, .card > .card-body.p-0:last-child > .table-responsive:last-child { border-bottom-left-radius: calc(var(--ui-r-card) - 1px) !important; border-bottom-right-radius: calc(var(--ui-r-card) - 1px) !important; } .accordion:not(.accordion-flush) > .accordion-item:first-of-type { border-top-left-radius: var(--ui-r-card) !important; border-top-right-radius: var(--ui-r-card) !important; } .accordion:not(.accordion-flush) > .accordion-item:last-of-type { border-bottom-left-radius: var(--ui-r-card) !important; border-bottom-right-radius: var(--ui-r-card) !important; } .input-group:not(.has-validation) > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating), .input-group.has-validation > :nth-last-child(n+3):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating) { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; } .input-group > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; } .choices.is-open:not(.is-flipped) > .choices__inner { border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; } .choices:not(.is-flipped) > .choices__list--dropdown { border-radius: 0 0 var(--ui-r-field) var(--ui-r-field) !important; } :where(.alert, .ap-alert-bar, .ap-pdp-notice) { border-radius: var(--ui-r-field) !important; } :where(.badge, .ap-badge, .sa-pill, .sa-badge, .sa-status-pill):not(.rounded-circle) { border-radius: var(--ui-r-pill) !important; } } /* ── 6. Content layer: opaque, hairlines, room to breathe ──────────────────── */ @layer lg-glass { /* The canvas: a quiet cool ground with a faint wash of the brand, so glass has something to catch. */ body:has(.app-sidebar) { background-color: var(--ui-canvas) !important; background-image: radial-gradient(1200px 600px at 100% -10%, color-mix(in srgb, var(--ui-brand) 6%, transparent), transparent 70%), radial-gradient(900px 520px at -5% 105%, color-mix(in srgb, var(--ui-accent) 5%, transparent), transparent 70%) !important; background-attachment: fixed !important; } [data-theme-mode="dark"] body:has(.app-sidebar) { background-image: radial-gradient(1200px 600px at 100% -10%, rgba(12, 195, 247, 0.05), transparent 70%) !important; } .main-content.app-content { background: transparent !important; } /* Cards: white on a hairline, almost no shadow. */ :is(.card.custom-card, .card:not([class*="bg-"])):not(.border-0) { border: 1px solid var(--ui-sep) !important; } :is(.card.custom-card, .card:not([class*="bg-"])):not(.shadow-none) { box-shadow: var(--ui-elev-1) !important; } :is(.card.custom-card, .card:not([class*="bg-"])) { background-color: var(--ui-card) !important; } [data-theme-mode="dark"] :is(.card.custom-card, .card:not([class*="bg-"])):not(.shadow-none) { box-shadow: none !important; } .card.custom-card > .card-header:not([class*="bg-"]) { border-bottom: 1px solid var(--ui-sep) !important; background-color: transparent !important; } .card.custom-card > .card-footer:not([class*="bg-"]) { border-top: 1px solid var(--ui-sep) !important; background-color: transparent !important; } .card .card-header .card-title, .card-header > :is(h4, h5, h6, .card-title) { text-transform: none !important; letter-spacing: -0.01em !important; color: var(--ui-label-1); } @media (min-width: 992px) { .card.custom-card > .card-header:not(:is([class*=" p-"], [class^="p-"], [class*=" px-"], [class*=" py-"], [style*="padding"])) { padding: 14px 18px !important; } .card.custom-card > .card-body:not(:is([class*=" p-"], [class^="p-"], [class*=" px-"], [class*=" py-"], [style*="padding"])) { padding: 18px !important; } } /* Stat and KPI tiles: white, a large number, sentence-case label, the status in an icon chip. */ :is(.sa-stat-card, .sa-kpi-card) { background: var(--ui-card) !important; background-image: none !important; border: 1px solid var(--ui-sep) !important; box-shadow: none !important; } :is(.sa-stat-card--clickable, a.sa-stat-card) { transition: border-color 0.15s var(--ui-ease), box-shadow 0.15s var(--ui-ease), translate 0.15s var(--ui-ease) !important; } :is(.sa-stat-card--clickable, a.sa-stat-card):hover { border-color: var(--ui-sep-strong) !important; box-shadow: var(--ui-elev-2) !important; } :is(.sa-stat-card__title, .sa-kpi-card__label) { text-transform: none !important; letter-spacing: 0 !important; font-size: 0.8125rem !important; font-weight: 500 !important; color: var(--ui-label-2) !important; } :is(.sa-stat-card__value, .sa-kpi-card__value) { font-weight: 700 !important; letter-spacing: -0.022em !important; color: var(--ui-label-1) !important; font-variant-numeric: tabular-nums; } /* Page titles: large type on the canvas instead of a colored band. */ .page-header-breadcrumb:not(.sa-cust-hero):not(.atlas-hero) { background: transparent !important; background-image: none !important; border: 0 !important; box-shadow: none !important; padding-block-start: 1.5rem !important; padding-block-end: 0.75rem !important; margin-bottom: 0 !important; min-height: 0 !important; } .page-header-breadcrumb:not(.sa-cust-hero):not(.atlas-hero) :is(h1, h2, h3, h4, .h4) { color: var(--ui-label-1) !important; font-size: 1.6rem !important; font-weight: 700 !important; letter-spacing: -0.024em !important; line-height: 1.15 !important; } .page-header-breadcrumb .breadcrumb { font-size: 0.8125rem; } .page-header-breadcrumb .breadcrumb-item a { color: var(--ui-label-2) !important; text-decoration: none; } .page-header-breadcrumb .breadcrumb-item.active { color: var(--ui-label-3) !important; } @media (max-width: 991.98px) { .page-header-breadcrumb:not(.sa-cust-hero):not(.atlas-hero) { padding-block-start: 0.875rem !important; padding-block-end: 0.5rem !important; } .page-header-breadcrumb:not(.sa-cust-hero):not(.atlas-hero) :is(h1, h2, h3, h4, .h4) { font-size: 1.35rem !important; } } /* Tables: sentence-case headers on a hairline, regular-weight cells, tabular numbers. */ :is(.table, table.dataTable):not(.table-dark) > thead:not(.table-dark) > tr > :is(th, td) { background-color: var(--ui-card) !important; color: var(--ui-label-2) !important; text-transform: none !important; letter-spacing: 0 !important; font-size: 0.78rem !important; font-weight: 600 !important; border-top: 0 !important; border-bottom: 1px solid var(--ui-sep-strong) !important; } .table > tbody > tr > td { border-bottom-color: var(--ui-sep) !important; } .table-hover > tbody > tr:hover > * { --bs-table-bg-state: var(--ui-fill-hover); } div.dt-container .dt-info { color: var(--ui-label-3) !important; font-size: 0.8125rem; } div.dt-container :is(.dt-length, .dt-search) label { color: var(--ui-label-2); font-size: 0.8125rem; font-weight: 500; } /* Fields: a hairline that firms on hover, a soft brand ring on focus, red only when something is wrong. */ :is(.form-control, .form-select, .choices__inner, .ap-input, .ap-select):not(.is-invalid):not(.is-invalid-ap):not(.is-valid) { border-color: var(--ui-field-border) !important; transition: border-color 0.15s var(--ui-ease), box-shadow 0.15s var(--ui-ease), background-color 0.15s var(--ui-ease) !important; } :is(.form-control, .form-select):not([class*="bg-"]):not(.form-control-plaintext):not(:disabled) { background-color: var(--ui-field-bg) !important; color: var(--ui-label-1) !important; } :is(.form-control, .form-select, .ap-input, .ap-select):disabled { background-color: var(--ui-field-disabled) !important; color: var(--ui-label-3) !important; } :is(.form-control, .form-select, .ap-input)::placeholder { color: var(--ui-label-3) !important; opacity: 1; } :is(.form-control, .form-select, .ap-input, .ap-select):hover:not(:focus):not(:disabled):not(.is-invalid):not(.is-invalid-ap) { border-color: var(--ui-field-border-hover) !important; } :is(.form-control, .form-select, .ap-input, .ap-select):focus:not(.is-invalid):not(.is-invalid-ap), .choices.is-focused > .choices__inner { border-color: color-mix(in srgb, var(--ui-brand) 70%, transparent) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-brand) 18%, transparent) !important; outline: none !important; } [data-theme-mode="dark"] :is(.form-control, .form-select, .ap-input, .ap-select):focus:not(.is-invalid):not(.is-invalid-ap) { border-color: rgba(203, 225, 255, 0.55) !important; box-shadow: 0 0 0 3px rgba(124, 180, 255, 0.22) !important; } :is(.form-control, .form-select).is-invalid, .is-invalid-ap { border-color: var(--ui-red) !important; } :is(.form-control, .form-select).is-invalid:focus, .is-invalid-ap:focus { box-shadow: 0 0 0 3px var(--ui-red-tint) !important; } :is(.invalid-feedback, .ap-form-error) { color: var(--ui-red) !important; font-size: 0.78rem; } .form-select:not([multiple]):not([size]) { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23475569' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.6' d='m4 6 4 4 4-4'/%3e%3c/svg%3e") !important; background-repeat: no-repeat !important; background-position: right 0.75rem center !important; background-size: 14px 14px !important; padding-right: 2.25rem !important; } [data-theme-mode="dark"] .form-select:not([multiple]):not([size]) { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23CBD5E1' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.6' d='m4 6 4 4 4-4'/%3e%3c/svg%3e") !important; } .input-group-text { background-color: var(--ui-fill) !important; color: var(--ui-label-2) !important; border-color: var(--ui-field-border) !important; } /* Tabs: text tabs with a brand underline on the active one. */ .nav-tabs { border-bottom: 1px solid var(--ui-sep) !important; } .nav-tabs .nav-link { border: 0 !important; background: transparent !important; color: var(--ui-label-2); font-weight: 500; transition: color 0.15s var(--ui-ease), box-shadow 0.15s var(--ui-ease); } .nav-tabs .nav-link:hover { color: var(--ui-label-1); } .nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link { color: var(--ui-label-1) !important; font-weight: 600; box-shadow: inset 0 -2px 0 var(--ui-brand) !important; } [data-theme-mode="dark"] .nav-tabs .nav-link.active { box-shadow: inset 0 -2px 0 var(--ui-label-1) !important; } /* Long tab rows scroll sideways on a phone instead of wrapping. */ @media (max-width: 767.98px) { .nav-tabs:not(.flex-column) { flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .nav-tabs:not(.flex-column)::-webkit-scrollbar { display: none; } .nav-tabs:not(.flex-column) .nav-link { white-space: nowrap; } } /* Status pills: one capsule shape for every family, sentence case, a soft tint of the status color. */ :is(.badge, .sa-pill, .sa-badge, .sa-status-pill):not(.rounded-circle):not(:empty) { background-image: none !important; text-transform: none !important; letter-spacing: 0.005em !important; font-weight: 600 !important; line-height: 1.3 !important; white-space: nowrap !important; } .bg-primary-transparent { background-color: var(--ui-brand-tint) !important; color: var(--ui-brand-ink) !important; } .bg-success-transparent { background-color: var(--ui-green-tint) !important; color: var(--ui-green) !important; } .bg-warning-transparent { background-color: var(--ui-amber-tint) !important; color: var(--ui-amber) !important; } .bg-danger-transparent { background-color: var(--ui-red-tint) !important; color: var(--ui-red) !important; } .bg-info-transparent { background-color: var(--ui-blue-tint) !important; color: var(--ui-blue) !important; } :is(.bg-secondary-transparent, .bg-light-transparent, .bg-dark-transparent) { background-color: var(--ui-grey-tint) !important; color: var(--ui-grey) !important; } .badge.bg-primary { background-color: var(--ui-brand) !important; color: var(--ui-brand-fg) !important; } .badge.bg-success { background-color: var(--ui-green-solid) !important; color: #FFFFFF !important; } .badge.bg-warning { background-color: var(--ui-amber-solid) !important; color: #FFFFFF !important; } .badge.bg-danger { background-color: var(--ui-red-solid) !important; color: #FFFFFF !important; } .badge.bg-info { background-color: var(--ui-blue-solid) !important; color: #FFFFFF !important; } .badge.bg-secondary { background-color: var(--ui-grey-solid) !important; color: #FFFFFF !important; } .ap-badge { text-transform: none !important; letter-spacing: 0.005em !important; font-weight: 600 !important; border-color: transparent !important; } .ap-badge-brand { background: var(--ui-brand-tint) !important; color: var(--ui-brand-ink) !important; } .ap-badge-success { background: var(--ui-green-tint) !important; color: var(--ui-green) !important; } .ap-badge-warning { background: var(--ui-amber-tint) !important; color: var(--ui-amber) !important; } .ap-badge-danger { background: var(--ui-red-tint) !important; color: var(--ui-red) !important; } .ap-badge-neutral { background: var(--ui-grey-tint) !important; color: var(--ui-grey) !important; } /* Alerts: a soft tint with the status in the icon and the edge; the text stays readable ink. */ .alert:is(.alert-success, .alert-warning, .alert-danger, .alert-info, .alert-primary, .alert-secondary, .alert-light):not([class*="alert-solid"]) { background-color: var(--_al-tint) !important; background-image: none !important; border: 1px solid var(--_al-edge) !important; color: var(--ui-label-1) !important; } .alert-success { --_al-tint: var(--ui-green-tint); --_al-ink: var(--ui-green); --_al-edge: color-mix(in srgb, var(--ui-green) 24%, transparent); } .alert-warning { --_al-tint: var(--ui-amber-tint); --_al-ink: var(--ui-amber); --_al-edge: color-mix(in srgb, var(--ui-amber) 26%, transparent); } .alert-danger { --_al-tint: var(--ui-red-tint); --_al-ink: var(--ui-red); --_al-edge: color-mix(in srgb, var(--ui-red) 24%, transparent); } .alert-info { --_al-tint: var(--ui-blue-tint); --_al-ink: var(--ui-blue); --_al-edge: color-mix(in srgb, var(--ui-blue) 24%, transparent); } :is(.alert-primary, .alert-secondary, .alert-light) { --_al-tint: var(--ui-grey-tint); --_al-ink: var(--ui-label-2); --_al-edge: var(--ui-sep-strong); } .alert:not([class*="alert-solid"]) > :is(i, .lni, .fa, .fas, .far, .fa-solid, svg):first-child { color: var(--_al-ink) !important; } .alert:not([class*="alert-solid"]) a:not(.btn) { color: inherit !important; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; } /* Lists, pagination, progress. */ .list-group-item { border-color: var(--ui-sep) !important; } .list-group-item-action:hover { background-color: var(--ui-fill-hover) !important; } .list-group-item.active { background-color: var(--ui-brand-tint) !important; border-color: var(--ui-sep) !important; color: var(--ui-label-1) !important; font-weight: 600; } .pagination { gap: 4px; } .pagination .page-item .page-link { display: inline-flex !important; align-items: center; justify-content: center; min-width: 34px; height: 34px; padding: 0 10px !important; margin-left: 0 !important; border: 0 !important; border-radius: var(--ui-r-pill) !important; background-color: transparent !important; color: var(--ui-label-2) !important; font-size: 0.8125rem; font-weight: 500; box-shadow: none !important; } .pagination .page-item:not(.active):not(.disabled) .page-link:hover { background-color: var(--ui-fill-hover) !important; color: var(--ui-label-1) !important; } .pagination .page-item.active .page-link { background-color: var(--ui-brand) !important; color: var(--ui-brand-fg) !important; font-weight: 600; } .pagination .page-item.disabled .page-link { color: var(--ui-label-4) !important; } .progress { background-color: var(--ui-fill) !important; border-radius: var(--ui-r-pill) !important; } .progress-bar { border-radius: var(--ui-r-pill) !important; } .progress-bar:not([class*="bg-"]) { background-color: var(--ui-brand) !important; } } /* ── 7. Functional layer: the glass ─────────────────────────────────────── */ @layer lg-glass { /* Top bar: the portal's own solid brand color (York: the true brand, not a faded glass tint or a gradient), with a fine edge and a soft shadow. */ html[data-entity="2000"] .app-header, body:has(.ap-shell) .app-header { background: var(--ap-chrome, var(--sa-primary-color, #21426B)) !important; background-image: none !important; border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 1px 0 rgba(0, 0, 0, 0.06), 0 10px 30px -18px rgba(0, 0, 0, 0.45) !important; } html[data-entity="2000"][data-theme-mode="dark"] .app-header, html[data-theme-mode="dark"] body:has(.ap-shell) .app-header { background: #0F1A2B !important; background-image: none !important; border-bottom-color: rgba(255, 255, 255, 0.06) !important; } .app-header .sa-topbar-action-inner, .app-header .mainuserProfile > .header-link { display: inline-flex; align-items: center; min-height: 36px; border-radius: var(--ui-r-pill); transition: background-color 0.15s var(--ui-ease); } .app-header .header-element.sa-topbar-action:hover { background-color: transparent !important; } .app-header :is(.sa-topbar-action:hover .sa-topbar-action-inner, .mainuserProfile > .header-link:hover) { background-color: rgba(255, 255, 255, 0.12) !important; } .app-header :is(.header-element.sa-topbar-action, .header-element.mainuserProfile) { border-inline: 0 !important; } .app-header .js-cart-badge { background: var(--ui-accent) !important; color: #0B1D33 !important; } /* Global search: a capsule of white glass on the brand bar. */ .app-header .sa-gs-input { background: rgba(255, 255, 255, 0.14) !important; border: 1px solid rgba(255, 255, 255, 0.18) !important; color: #FFFFFF !important; border-radius: var(--ui-r-pill) !important; box-shadow: none !important; } .app-header .sa-gs-input::placeholder { color: rgba(255, 255, 255, 0.72) !important; } .app-header .sa-gs-input:focus { background: rgba(255, 255, 255, 0.22) !important; border-color: rgba(255, 255, 255, 0.4) !important; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.14) !important; } .sa-theme-switch__label { text-transform: none !important; letter-spacing: 0 !important; font-weight: 500 !important; } /* Sidebar: thick glass with a hairline edge; sections are quiet captions; the current page is a wash of the brand. */ .app-sidebar { background: var(--ui-glass-thick) !important; background-image: none !important; -webkit-backdrop-filter: var(--ui-backdrop-thick); backdrop-filter: var(--ui-backdrop-thick); border-right: 1px solid var(--ui-glass-hairline) !important; box-shadow: inset -1px 0 0 var(--ui-glass-edge) !important; } .app-sidebar .main-sidebar-header { background: transparent !important; border-bottom-color: var(--ui-sep) !important; } .app-sidebar :is(.sa-sb-modules-label, .sa-sb-section-toggle, .slide__category, .category-name) { text-transform: none !important; letter-spacing: 0 !important; font-size: 0.75rem !important; font-weight: 600 !important; color: var(--ui-label-3) !important; } .app-sidebar .side-menu__item { border-radius: var(--ui-r-sm) !important; color: var(--ui-label-1) !important; transition: background-color 0.15s var(--ui-ease), color 0.15s var(--ui-ease) !important; } .app-sidebar .side-menu__item .side-menu__icon { color: var(--ui-label-2) !important; } .app-sidebar .side-menu__item:hover { background: var(--ui-fill-hover) !important; } .app-sidebar .side-menu__item.active, .app-sidebar .slide.active > .side-menu__item { background: var(--ui-brand-tint) !important; color: var(--ui-label-1) !important; font-weight: 600 !important; box-shadow: none !important; } .app-sidebar .side-menu__item.active .side-menu__icon, .app-sidebar .slide.active > .side-menu__item .side-menu__icon { color: var(--ui-brand-ink) !important; } [data-theme-mode="dark"] .app-sidebar .side-menu__item.active .side-menu__icon { color: var(--ui-label-1) !important; } /* Menus and popovers: regular glass, rounder corners, real depth. */ .dropdown-menu, .popover, .flatpickr-calendar, .ap-search-suggest, .ap-patient-dropdown-list, .sa-gs-results, .choices__list--dropdown { background: var(--ui-glass-menu) !important; -webkit-backdrop-filter: var(--ui-backdrop-thick); backdrop-filter: var(--ui-backdrop-thick); border: 1px solid var(--ui-glass-edge) !important; box-shadow: var(--ui-glass-highlight), 0 0 0 1px var(--ui-glass-hairline), var(--ui-elev-3) !important; } .dropdown-menu, .popover, .flatpickr-calendar, .ap-search-suggest, .sa-gs-results { border-radius: var(--ui-r-menu) !important; } .dropdown-menu { padding: 6px !important; } .dropdown-menu .dropdown-item { border-radius: var(--ui-r-sm) !important; padding-block: 0.5rem !important; color: var(--ui-label-1); transition: background-color 0.12s var(--ui-ease); } .dropdown-menu .dropdown-item > :is(i, .lni, .fa, .fas, .far, .fa-solid):first-child { color: var(--ui-label-2); } .dropdown-menu .dropdown-item:hover, .dropdown-menu .dropdown-item:focus { background-color: var(--ui-fill-hover) !important; } .dropdown-menu .dropdown-item.active, .dropdown-menu .dropdown-item:active { background-color: var(--ui-brand-tint) !important; color: inherit !important; } .dropdown-menu .dropdown-header { text-transform: none !important; letter-spacing: 0 !important; font-size: 0.75rem !important; font-weight: 600 !important; color: var(--ui-label-3) !important; } .dropdown-menu .dropdown-divider { border-top-color: var(--ui-sep) !important; margin: 6px 4px !important; } /* A header menu reads dark ink on light glass, never the bar's white text. */ .app-header .dropdown-menu, .app-header .dropdown-menu :is(a, span, h6, p, div, i):not(.badge):not(.btn) { color: var(--ui-label-1) !important; } .app-header .dropdown-menu :is(.text-muted, small) { color: var(--ui-label-3) !important; } .popover { --bs-popover-bg: var(--ui-glass-thick); --bs-popover-header-bg: transparent; --bs-popover-border-color: var(--ui-glass-edge); } .tooltip { --bs-tooltip-bg: var(--ui-tooltip); --bs-tooltip-border-radius: var(--ui-r-xs); } .tooltip .tooltip-inner { background-color: var(--ui-tooltip) !important; color: #FFFFFF !important; border-radius: var(--ui-r-xs) !important; } /* Dialogs: the page dims and softens behind; the dialog is thick glass; close is a round grey button. */ .modal-backdrop { --bs-backdrop-opacity: 1; background-color: var(--ui-scrim) !important; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .modal-backdrop.fade:not(.show) { opacity: 0 !important; } .modal-content { background: var(--ui-glass-thick) !important; -webkit-backdrop-filter: var(--ui-backdrop-thick); backdrop-filter: var(--ui-backdrop-thick); border: 1px solid var(--ui-glass-edge) !important; border-radius: var(--ui-r-sheet) !important; box-shadow: var(--ui-glass-highlight), 0 0 0 1px var(--ui-glass-hairline), var(--ui-elev-4) !important; } .modal-content > .modal-header:not([class*="bg-"]), .modal-content > .modal-footer { background-color: transparent !important; border-color: var(--ui-sep) !important; } .modal.fade .modal-dialog { transform: translateY(10px) scale(0.985) !important; transition: transform 0.28s var(--ui-spring), opacity 0.24s var(--ui-ease) !important; } .modal.show .modal-dialog { transform: none !important; } :is(.modal, .offcanvas, .toast, .alert) .btn-close:not(.btn-close-white), :is(.ap-modal__close, .ap-cart-drawer__close) { box-sizing: border-box !important; width: 30px !important; height: 30px !important; padding: 0 !important; border-radius: var(--ui-r-pill) !important; background-color: var(--ui-fill) !important; background-size: 10px 10px !important; background-position: center !important; opacity: 1 !important; box-shadow: none !important; color: var(--ui-label-2) !important; transition: background-color 0.15s var(--ui-ease) !important; } :is(.modal, .offcanvas, .toast, .alert) .btn-close:not(.btn-close-white):hover, :is(.ap-modal__close, .ap-cart-drawer__close):hover { background-color: var(--ui-fill-strong) !important; color: var(--ui-label-1) !important; } :is(.modal, .offcanvas, .toast, .alert) .btn-close:not(.btn-close-white):focus-visible, :is(.ap-modal__close, .ap-cart-drawer__close):focus-visible { outline: 2px solid var(--ui-focus) !important; outline-offset: 2px !important; } [data-theme-mode="dark"] :is(.modal, .offcanvas, .toast, .alert) .btn-close:not(.btn-close-white) { filter: none !important; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23F1F5F9'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") !important; } .offcanvas { background: var(--ui-glass-thick) !important; -webkit-backdrop-filter: var(--ui-backdrop-thick); backdrop-filter: var(--ui-backdrop-thick); box-shadow: var(--ui-elev-4) !important; } /* The shop's own dialog, cart preview drawer and their scrims follow the same material. */ :is(.ap-modal-overlay, .ap-cart-drawer-overlay) { background: var(--ui-scrim) !important; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .ap-modal { background: var(--ui-glass-thick) !important; -webkit-backdrop-filter: var(--ui-backdrop-thick); backdrop-filter: var(--ui-backdrop-thick); border: 1px solid var(--ui-glass-edge) !important; border-radius: var(--ui-r-sheet) !important; box-shadow: var(--ui-glass-highlight), 0 0 0 1px var(--ui-glass-hairline), var(--ui-elev-4) !important; } .ap-cart-drawer { background: var(--ui-glass-thick) !important; -webkit-backdrop-filter: var(--ui-backdrop-thick); backdrop-filter: var(--ui-backdrop-thick); border-left: 1px solid var(--ui-glass-hairline) !important; box-shadow: var(--ui-elev-4) !important; } :is(.ap-modal__header, .ap-modal__footer, .ap-cart-drawer__header, .ap-cart-drawer__footer) { border-color: var(--ui-sep) !important; background: transparent !important; } /* Toasts: glass cards, like a system notification. */ .toast, .sa-toast, .ui-toast { background: var(--ui-glass-thick) !important; -webkit-backdrop-filter: var(--ui-backdrop); backdrop-filter: var(--ui-backdrop); border: 1px solid var(--ui-glass-edge) !important; border-radius: var(--ui-r-card) !important; box-shadow: var(--ui-glass-highlight), 0 0 0 1px var(--ui-glass-hairline), var(--ui-elev-3) !important; } /* Motion: brief, purposeful. */ .dropdown-menu.show, .popover.show { animation: lg-pop 0.16s var(--ui-ease) both; } :where(.btn, .ap-btn) { transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, scale 0.12s ease !important; } :where(.btn, .ap-btn):active:not(:disabled):not(.disabled) { scale: 0.97; } /* Touch screens: Apple's 44pt targets. */ @media (pointer: coarse) { :where(.btn, .ap-btn):not(.btn-sm):not(.ap-btn-sm):not(.btn-icon):not(.ap-btn-icon):not(.btn-close):not(.btn-link):not(.ap-btn-text) { min-height: 44px; } :where(.btn.btn-sm, .ap-btn.ap-btn-sm):not(.btn-icon) { min-height: 36px; } :where(.form-control:not(textarea), .form-select, .ap-input:not(textarea), .ap-select) { min-height: 44px; } .app-sidebar .side-menu__item { min-height: 44px; } .form-check-input { width: 1.25em; height: 1.25em; } /* iOS zooms into any field under 16px. */ :where(input, select, textarea):not([type="checkbox"]):not([type="radio"]):not([type="range"]) { font-size: max(16px, 1em) !important; } } } @keyframes lg-pop { from { opacity: 0; translate: 0 -4px; scale: 0.98; } to { opacity: 1; translate: 0 0; scale: 1; } } @keyframes lg-sheet-in { from { translate: 0 100%; } to { translate: 0 0; } } /* ── 8. Phone chrome: tab bar, sheets, sticky action bars ────────────────── Below 992px the sidebar is a drawer, so each portal's top-level places sit in a floating glass tab bar within thumb reach (api/views/layouts.php, lgRenderTabBar()). Tabs navigate, never act; "More" opens the full menu. Dialogs, the shop's quick view and the cart preview become bottom sheets. */ .lg-tabbar { display: none; } @media (max-width: 991.98px) { .lg-tabbar { position: fixed; z-index: 1040; left: 12px; right: 12px; bottom: calc(10px + var(--ui-safe-bottom)); display: flex; align-items: stretch; justify-content: space-around; gap: 2px; height: var(--ui-tabbar-h); padding: 6px; border-radius: 32px; background: var(--ui-glass); -webkit-backdrop-filter: var(--ui-backdrop); backdrop-filter: var(--ui-backdrop); border: 1px solid var(--ui-glass-edge); box-shadow: var(--ui-glass-highlight), 0 0 0 1px var(--ui-glass-hairline), 0 12px 36px -10px rgba(15, 37, 62, 0.35); } .lg-tabbar__item { position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 4px 2px; border: 0; border-radius: 26px; background: transparent; color: var(--ui-label-2); font: 600 0.66rem/1.1 var(--ui-font); letter-spacing: 0.01em; text-decoration: none; -webkit-tap-highlight-color: transparent; transition: background-color 0.2s var(--ui-ease), color 0.2s var(--ui-ease); } .lg-tabbar__item > i, .lg-tabbar__icon > i { font-size: 1.35rem; line-height: 1; } .lg-tabbar__item span:not(.lg-tabbar__icon):not(.lg-tabbar__badge) { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lg-tabbar__item:hover { color: var(--ui-label-1); } .lg-tabbar__item.is-active { color: var(--ui-brand-ink); background: var(--ui-brand-tint); } [data-theme-mode="dark"] .lg-tabbar__item.is-active { color: var(--ui-label-1); background: var(--ui-fill-selected); } .lg-tabbar__item:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: -2px; } .lg-tabbar__icon { position: relative; display: inline-flex; } .lg-tabbar__badge { position: absolute; top: -5px; left: 60%; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--ui-red-solid); color: #FFFFFF; font: 700 0.62rem/18px var(--ui-font); text-align: center; box-shadow: 0 0 0 2px var(--ui-card); } .lg-tabbar__badge:empty, .lg-tabbar__badge[data-count="0"] { display: none; } /* Content clears the bar; the theme's scroll-to-top and the shop's floating order button step aside. */ body:has(.lg-tabbar) .main-content.app-content { padding-bottom: calc(var(--ui-tabbar-h) + 28px + var(--ui-safe-bottom)) !important; } body:has(.lg-tabbar) :is(.scrollToTop, .ap-order-fab) { display: none !important; } body:has(.lg-tabbar) .app-header .sidemenu-toggle { display: none !important; } body:has(.lg-tabbar) footer.footer { display: none !important; } /* A focused task (checkout) hides the tab bar so its own action bar owns the bottom edge. */ body:has(.lg-task-flow) .lg-tabbar { display: none; } body:has(.lg-task-flow) .main-content.app-content { padding-bottom: calc(96px + var(--ui-safe-bottom)) !important; } } /* A sticky action bar: the total and the one next step, pinned to the bottom on phones. */ .lg-actionbar { display: none; } @media (max-width: 991.98px) { .lg-actionbar { position: fixed; z-index: 1039; left: 12px; right: 12px; bottom: calc(10px + var(--ui-safe-bottom)); display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 18px; border-radius: 28px; background: var(--ui-glass); -webkit-backdrop-filter: var(--ui-backdrop); backdrop-filter: var(--ui-backdrop); border: 1px solid var(--ui-glass-edge); box-shadow: var(--ui-glass-highlight), 0 0 0 1px var(--ui-glass-hairline), 0 12px 36px -10px rgba(15, 37, 62, 0.35); } body:has(.lg-tabbar):not(:has(.lg-task-flow)) .lg-actionbar { bottom: calc(var(--ui-tabbar-h) + 18px + var(--ui-safe-bottom)); } .lg-actionbar[hidden] { display: none; } .lg-actionbar__meta { flex: 1; min-width: 0; line-height: 1.2; } .lg-actionbar__label { font-size: 0.72rem; color: var(--ui-label-3); font-weight: 500; } .lg-actionbar__value { font-size: 1.05rem; font-weight: 700; color: var(--ui-label-1); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; } .lg-actionbar .ap-btn, .lg-actionbar .btn { min-height: 46px; padding-inline: 1.25rem !important; font-size: 0.9rem; flex-shrink: 0; } body:has(.lg-actionbar:not([hidden])) .main-content.app-content { padding-bottom: calc(var(--ui-tabbar-h) + 100px + var(--ui-safe-bottom)) !important; } } @layer lg-glass { @media (max-width: 575.98px) { /* Bootstrap dialogs become bottom sheets with a grabber. */ .modal .modal-dialog:not(.modal-fullscreen):not([class*="modal-fullscreen-"]) { margin: 0 !important; width: 100% !important; max-width: none !important; min-height: 100% !important; display: flex !important; align-items: flex-end !important; } .modal .modal-dialog:not(.modal-fullscreen):not([class*="modal-fullscreen-"]) > .modal-content { width: 100%; max-height: 94dvh; border-radius: var(--ui-r-sheet) var(--ui-r-sheet) 0 0 !important; border-bottom: 0 !important; padding-bottom: var(--ui-safe-bottom); } .modal .modal-dialog:not(.modal-fullscreen):not([class*="modal-fullscreen-"]) > .modal-content > .modal-body { overflow-y: auto; -webkit-overflow-scrolling: touch; } .modal .modal-dialog:not(.modal-fullscreen):not([class*="modal-fullscreen-"]) > .modal-content::before { content: ""; flex: none; align-self: center; width: 38px; height: 5px; margin-top: 7px; border-radius: 3px; background: var(--ui-fill-strong); } .modal.fade .modal-dialog:not(.modal-fullscreen):not([class*="modal-fullscreen-"]) { transform: translateY(100%) !important; transition: transform 0.36s var(--ui-spring) !important; } .modal.show .modal-dialog:not(.modal-fullscreen):not([class*="modal-fullscreen-"]) { transform: none !important; } .modal-footer { flex-wrap: nowrap !important; gap: 8px; } .modal-footer > .btn { flex: 1 1 0; margin: 0 !important; } /* The shop's quick view / quick order and the cart preview: sheets too. */ .ap-modal, .ap-modal--wide { top: auto !important; bottom: 0 !important; left: 0 !important; width: 100% !important; max-height: 92dvh !important; border-radius: var(--ui-r-sheet) var(--ui-r-sheet) 0 0 !important; border-bottom: 0 !important; transform: translateY(100%) !important; transition: transform 0.36s var(--ui-spring), visibility 0.36s !important; opacity: 1 !important; padding-bottom: var(--ui-safe-bottom); } .ap-modal.is-open { transform: none !important; } .ap-cart-drawer { top: auto !important; bottom: 0 !important; width: 100% !important; max-height: 88dvh !important; height: auto !important; border-left: 0 !important; border-radius: var(--ui-r-sheet) var(--ui-r-sheet) 0 0 !important; transform: translateY(100%) !important; padding-bottom: var(--ui-safe-bottom); } .ap-cart-drawer.is-open { transform: none !important; } :is(.ap-modal, .ap-cart-drawer)::before { content: ""; position: absolute; top: 7px; left: 50%; translate: -50% 0; width: 38px; height: 5px; border-radius: 3px; background: var(--ui-fill-strong); z-index: 2; } } } /* ── 9. Reduced motion ─────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .dropdown-menu.show, .popover.show { animation: none !important; } .modal.fade .modal-dialog { transition: none !important; } :where(.btn, .ap-btn):active { scale: none !important; } .lg-tabbar__item, .ap-modal, .ap-cart-drawer { transition: none !important; } } /* ── 10. No eyebrows ──────────────────────────────────────────────────────── York: never a small label above a headline. The TAP pages had theirs removed from the markup; the shared multi-tenant heroes and the sign-in card still print one, so they are retired here. */ :is(.auth-split-eyebrow, .atlas-hero__eyebrow, .role-hero__eyebrow, .sa-home-hero__eyebrow, .ag-hero__eyebrow, .ap-eyebrow, .ap-cart-hero__eyebrow, .ap-orders-hero__eyebrow) { display: none !important; } /* ── 11. Summary tiles on a phone ─────────────────────────────────────────── A row of stat tiles becomes one swipeable strip instead of a two-column wall that pushes the page's real content (the list) below the fold. */ @media (max-width: 575.98px) { :is(.ap-stats-row, .ap-kpi-grid, .ap-glance-stats) { display: flex !important; flex-wrap: nowrap !important; gap: 10px !important; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 2px; } :is(.ap-stats-row, .ap-kpi-grid, .ap-glance-stats)::-webkit-scrollbar { display: none; } :is(.ap-stats-row, .ap-kpi-grid, .ap-glance-stats) > * { flex: 0 0 min(72%, 220px) !important; scroll-snap-align: start; min-width: 0; } } /* ── 12. Signed-out pages (sign in, sign up, password) ────────────────────── The particle network stays (York); the card takes the sheet radius and the submit button is a Primary capsule. On a phone the brand panel shrinks to the logo and headline so the form is on the first screen, and the legal links bar never covers the form. */ @layer lg-surfaces { :where(.auth-split-card, .auth-unauth-card) { border-radius: var(--ui-r-sheet) !important; } } .btn-auth-submit { box-shadow: 0 10px 24px -12px color-mix(in srgb, var(--ui-brand) 70%, transparent) !important; min-height: 48px; } .lg-legal-bar { position: fixed; bottom: 0; left: 0; width: 100%; z-index: 2; padding: 10px 12px calc(10px + var(--ui-safe-bottom)); font-size: 0.75rem; line-height: 1.6; color: var(--ui-label-3); background: var(--ui-glass); -webkit-backdrop-filter: var(--ui-backdrop); backdrop-filter: var(--ui-backdrop); border-top: 1px solid var(--ui-glass-hairline); } .lg-legal-bar a { color: inherit; } .lg-legal-bar a:hover { color: var(--ui-label-1); } /* The bar is pinned over the bottom of the screen, so the scrolling sign-in area has to end above it at every width: in a short window (or with the welcome notice above the card) Sign In otherwise sat underneath it. */ @media (min-width: 768px) { body:has(.lg-legal-bar) .auth-centered { padding-bottom: calc(56px + var(--ui-safe-bottom)) !important; } } @media (max-width: 767.98px) { .auth-centered { padding-bottom: 72px !important; } .auth-split-card .auth-split-hero { padding: 1.75rem 1.5rem 1.5rem !important; } .auth-split-card :is(.auth-split-sub, .auth-split-divider, .auth-split-features, .auth-split-hero-decor) { display: none !important; } .auth-split-card .auth-split-headline { font-size: 1.65rem !important; margin: 0.9rem 0 0 !important; line-height: 1.15 !important; } .auth-split-card .auth-split-logo-wrap { margin-bottom: 0 !important; transform: scale(0.86); transform-origin: center top; } } /* Signed-out pages carry the tenant's brand only on the card (--auth-accent-start), not on :root, so the card restates the brand tokens (a var that references another var resolves where it is declared). */ .auth-split-card { --ui-brand: var(--auth-accent-start, #21426B); --ui-brand-ink: var(--auth-accent-start, #21426B); --ui-brand-fg: #FFFFFF; --ui-focus: color-mix(in srgb, var(--auth-accent-start, #21426B) 55%, transparent); } /* ── 13. Phone top bar ────────────────────────────────────────────────────── Below 992px the top bar is the brand bar with only what a thumb needs: the logo (on a small white plate, so any tenant or white-label logo reads on the brand color), search, notifications, the theme switch and the account menu. Cart lives in the tab bar, and the contact strip above the bar steps aside on phones (the same contacts are on Support). */ @layer lg-glass { @media (max-width: 991.98px) { html[data-entity="2000"] .app-header :is(i, .header-link-icon, .sidebar-toggle-icon) { color: #FFFFFF !important; } /* Light mode only: in dark mode the theme already swaps in the white logo, which reads on the bar as is. */ html[data-entity="2000"]:not([data-theme-mode="dark"]) .app-header .header-logo :is(.toggle-logo, .toggle-dark, .desktop-logo, .desktop-dark) { background: #FFFFFF !important; border-radius: 10px !important; padding: 5px 9px !important; height: 34px !important; width: auto !important; max-width: 150px !important; object-fit: contain; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12) !important; } body:has(.lg-tabbar) .app-header #headerCartAction { display: none !important; } .app-header .sa-theme-switch__label { display: none !important; } } @media (max-width: 767.98px) { html[data-entity="2000"] { --sa-utility-bar-h: 0px !important; } html[data-entity="2000"] .sa-utility-topbar { display: none !important; } } } /* Phones get Apple's 16px content margins (the theme's were about 11px). */ @layer lg-glass { @media (max-width: 575.98px) { .main-content.app-content > .container-fluid { padding-inline: 16px !important; } } } /* ── 14. Header search everywhere ────────────────────────────────────────── Search used to vanish below 1500px (no room beside fully labelled header actions) and the phone search icon opened a modal that never existed. 992-1500px: the header actions go icon-only (they keep their aria/title labels) so the search field fits. Below 992px: the search icon slides the same field down under the bar (lgToggleSearch() in layouts.php). */ @layer lg-glass { @media (min-width: 992px) and (max-width: 1500px) { .app-header .sa-global-search { display: flex !important; flex: 1 1 18rem; min-width: 11rem !important; max-width: 26rem; } .app-header .header-content-left:has(.sa-global-search) { flex: 1 1 auto; min-width: 0; } .app-header :is(#headerCartAction, #notificationBell, #clinicNotificationBell) .sa-topbar-action-inner { font-size: 0 !important; gap: 0 !important; padding-inline: 10px !important; } .app-header :is(#headerCartAction, #notificationBell, #clinicNotificationBell) .sa-topbar-action-inner > i { font-size: 1.15rem !important; margin: 0 !important; } .app-header :is(#headerCartAction .js-cart-badge, .sa-notification-badge) { font-size: 0.65rem !important; } .app-header .sa-theme-switch__label { display: none !important; } } @media (max-width: 991.98px) { html.lg-search-open .app-header .sa-global-search { display: flex !important; position: fixed; z-index: 1045; left: 12px; right: 12px; min-width: 0 !important; margin: 0 !important; top: calc(var(--sa-utility-bar-h, 0px) + 60px); padding: 6px; border-radius: var(--ui-r-pill); background: var(--ui-glass-menu); -webkit-backdrop-filter: var(--ui-backdrop); backdrop-filter: var(--ui-backdrop); box-shadow: var(--ui-glass-highlight), 0 0 0 1px var(--ui-glass-hairline), var(--ui-elev-3); } html.lg-search-open .app-header .sa-global-search .sa-gs-input-wrap { width: 100%; } html.lg-search-open .app-header .sa-global-search .sa-gs-input { width: 100%; height: 44px; background: var(--ui-field-bg) !important; color: var(--ui-label-1) !important; border-color: var(--ui-field-border) !important; } html.lg-search-open .app-header .sa-global-search .sa-gs-input::placeholder { color: var(--ui-label-3) !important; } html.lg-search-open .app-header .sa-global-search .sa-gs-icon { color: var(--ui-label-3) !important; } .sa-gs-results { z-index: 1046 !important; max-width: calc(100vw - 24px); } } } /* ── 15. Admin page titles ────────────────────────────────────────────────── The title row sits outside .main-content and is pushed under the fixed header by the theme's top: 4rem, which never counted the 28px contact strip above The Active Pharm's header, so every admin title slid 28px under the bar. Its controls bar is a card like the rest of the content layer. */ @media (min-width: 992px) { html[data-entity="2000"] .page-header-breadcrumb { top: calc(4rem + var(--sa-utility-bar-h, 0px)) !important; } } .sa-controls-bar { background: var(--ui-card) !important; border: 1px solid var(--ui-sep) !important; box-shadow: var(--ui-elev-1) !important; } @media (max-width: 991.98px) { html[data-entity="2000"] .page-header-breadcrumb { top: calc(52px + var(--sa-utility-bar-h, 0px)) !important; } } @media (max-width: 991.98px) { html[data-entity="2000"][data-theme-mode="dark"] .app-header .header-logo :is(.toggle-logo, .toggle-dark) { height: 30px !important; width: auto !important; max-width: 150px !important; object-fit: contain; } } /* ── 16. Touch targets the audit flagged ─────────────────────────────────── The quantity stepper's minus/plus were 22px wide: too small for a thumb. */ @media (pointer: coarse) { .ap-qty-stepper button { min-width: 36px !important; min-height: 36px !important; } .ap-qty-stepper input { min-height: 36px; } } /* ── 17. Global cleanup from the component census (2026-11-02) ───────────── A scan of every route in light and dark, at phone and desktop widths, flagged these; each is fixed at the family level, not per page. */ /* Sentence case everywhere: small capitalised labels read as shouting and are hard to scan. */ :is(.ap-cf-title, .ap-cf-unit__label, .ap-kpi-tile__label, .ap-orders-table th, .ap-stat-tile__label, .cp-kpi-tile__label, .cs-stat-card__label, .ps-stat-card__label, .sa-mini-stat__desc, .ap-order-summary__title, .ap-review-row strong, .sa-filter-group__label, .ap-catalog-filters__field > label) { text-transform: none !important; letter-spacing: 0 !important; } /* Nothing smaller than 12px: legal links, sidebar footer, badges, helper text, bulk toggles. */ .app-sidebar :is(.sidebar-footer, .main-sidebar-footer, [class*="footer"]) :is(a, div, span), .app-sidebar a.text-decoration-none { font-size: 0.68rem !important; } :is(.badge, .ap-badge, .sa-pill, .sa-badge, .sa-status-pill):not(.rounded-circle) { font-size: max(0.66rem, 12px) !important; } :is(.ap-cf-help, .bulk-template-on, .bulk-template-off, .form-text, .sa-fc-count) { font-size: max(0.66rem, 12px) !important; } /* Muted text that fell below 4.5:1. */ .sa-fc-count { color: var(--ui-label-3) !important; } /* The cart's Add New Patient was a 23px sliver of a button; it's a real secondary action. */ .ap-cf-add-patient-btn { min-height: 34px !important; padding: 0 0.9rem !important; border-radius: var(--ui-r-pill) !important; border: 0 !important; background: var(--ui-btn-secondary-bg) !important; color: var(--ui-btn-secondary-fg) !important; font-weight: 600 !important; } .ap-cf-add-patient-btn:hover { background: var(--ui-btn-secondary-hover) !important; } /* The cyan Start New Order keeps dark ink in both themes (the dark theme lightens span text globally). */ .ap-start-order-btn, .ap-start-order-btn * { color: var(--ap-on-accent, #0F2942) !important; } /* Admin census: status badges onto the shared status tints (dark mode had them at 2.4-3.3:1). */ .sa-badge, .sa-status-pill { background-color: var(--ui-grey-tint) !important; color: var(--ui-grey) !important; border-color: transparent !important; } :is(.sa-badge--delivered, .sa-badge--completed, .sa-status-pill--delivered, .sa-badge--active) { background-color: var(--ui-green-tint) !important; color: var(--ui-green) !important; } :is(.sa-badge--pending, .sa-badge--awaiting, .sa-status-pill--pending, .sa-badge--admin) { background-color: var(--ui-amber-tint) !important; color: var(--ui-amber) !important; } :is(.sa-badge--placed, .sa-badge--shipped, .sa-badge--approved, .sa-status-pill--placed, .sa-status-pill--shipped) { background-color: var(--ui-blue-tint) !important; color: var(--ui-blue) !important; } :is(.sa-badge--denied, .sa-badge--cancelled, .sa-status-pill--denied) { background-color: var(--ui-red-tint) !important; color: var(--ui-red) !important; } /* Mini stats carry inline light tints and ink; in dark mode they follow the theme. */ [data-theme-mode="dark"] .sa-mini-stat { background: var(--ui-surface-2) !important; border-color: var(--ui-sep) !important; } [data-theme-mode="dark"] :is(.sa-mini-stat__value, .sa-mini-stat__desc) { color: var(--ui-label-1) !important; opacity: 1 !important; } [data-theme-mode="dark"] .sa-mini-stat__desc { color: var(--ui-label-2) !important; } /* Header role pill: white on the brand bar, sentence case. */ .app-header .sa-topbar-role-pill { background: rgba(255, 255, 255, 0.14) !important; color: #FFFFFF !important; border-color: rgba(255, 255, 255, 0.22) !important; text-transform: none !important; letter-spacing: 0 !important; font-size: 0.7rem !important; } /* Muted helper text that fell below 4.5:1 (date range "to", card counts, pagination summary, release-notes controls). */ :is(.sa-date-sep, .sa-customer-cards-count, .sa-pagination__summary, .actlog-loading) { color: var(--ui-label-3) !important; } [data-theme-mode="dark"] :is(.rn-view-btn, .rn-version-num) { color: var(--ui-label-2) !important; } [data-theme-mode="dark"] .rn-view-btn.active, [data-theme-mode="dark"] .rn-view-btn.active i { color: var(--ui-label-1) !important; } /* Transaction billing's faint ink (tier table, chart axis) was #94A3B8 on white: 2.6:1. */ :root[data-entity="2000"] { --tb-faint: var(--ui-label-3); } /* Sentence case and a 12px floor for the activity log, notifications, stat breakdowns, chips and KPI captions. */ :is(.sa-stat-card__breakdown-label, .actlog-kpi__lbl, .actlog-date-header, .actlog-row__badge, .notif-kpi__lbl, .notif-date-header, .notif-row__badge, .rn-scope-pill) { text-transform: none !important; letter-spacing: 0 !important; } :is(.sa-kpi-card__sub, .sa-kpi-card__prev, .sa-stat-card__subtitle, .sa-time-pill, .sa-legend-label, .actlog-kpi__lbl, .actlog-chip, .actlog-date-header, .actlog-row__badge, .actlog-row__time, .sa-product-chip, .rn-scope-pill, .notif-kpi__lbl, .notif-date-header, .notif-row__badge, .notif-row__time, .actlog-loading, .sa-sync-status, .sa-updated-at) { font-size: max(0.66rem, 12px) !important; } /* Release-notes category chips: capsules. */ .rn-cat-pill { border-radius: var(--ui-r-pill) !important; } /* Consultant census. Filter chips: grey at rest, the brand when selected (in dark mode the platform brand is near-white, so the selected chip takes the brand's readable ink instead of hard-coded white). */ .cp-account-filter { background: var(--ui-btn-secondary-bg) !important; border-color: transparent !important; color: var(--ui-btn-secondary-fg) !important; min-height: 34px; } .cp-account-filter:hover { background: var(--ui-btn-secondary-hover) !important; } .cp-account-filter.active, .cp-account-filter.active * { background-color: var(--ui-brand) !important; color: var(--ui-brand-fg) !important; } .cp-account-filter.active { border-color: var(--ui-brand) !important; } [data-theme-mode="dark"] .cp-account-card__logo { background: var(--ui-fill-strong) !important; color: var(--ui-label-1) !important; } :is(.cp-account-card__badge--ok, .cp-kpi-tile__change.is-up, .cp-kpi-tile__change) { color: var(--ui-green) !important; } .cp-account-card__badge--ok { background: var(--ui-green-tint) !important; } :is(.cp-summary__label, .cp-kpi__label, .cp-stat-tile__label, .cp-kpi-tile__label, .cp-account-card__badge, .cs-stat-card__label) { text-transform: none !important; letter-spacing: 0 !important; font-size: max(0.7rem, 12px) !important; } /* Dark mode: the theme's muted grey (#737373) is 3.4:1 on its dark cards; labels and muted copy use the tokens. */ [data-theme-mode="dark"] :is(.text-muted, .form-label, label:not(.btn):not(.form-check-label), .cp-kpi-tile__label, .cp-kpi-tile__change-note, .cp-view-toggle button, .sa-filter-group__label) { color: var(--ui-label-3) !important; } [data-theme-mode="dark"] .form-label { color: var(--ui-label-2) !important; } /* Uppercase form labels (consultant analytics, filter labels): sentence case. */ :is(.form-label, .sa-filter-group__label, .cp-filter-label) { text-transform: none !important; letter-spacing: 0 !important; } /* Signed-out pages in dark mode: the brand navy links vanish on the dark panel. */ [data-theme-mode="dark"] .auth-split-card :is(.auth-forgot-link, .auth-footer-link a, a:not(.btn)) { color: #9CC3F5 !important; } [data-theme-mode="dark"] .auth-split-card .auth-footer-link { color: var(--ui-label-2) !important; } /* Toast stack: top right on desktop; on a phone it spans the width under the top bar, like a system banner. */ #saToastContainer { top: calc(16px + env(safe-area-inset-top, 0px)) !important; right: 16px !important; } @media (max-width: 575.98px) { #saToastContainer { top: calc(10px + env(safe-area-inset-top, 0px)) !important; left: 12px !important; right: 12px !important; } #saToastContainer > * { max-width: none !important; min-width: 0 !important; } } /* ── 18. Data tables: search, sorting, paging ────────────────────────────── Every DataTables search field is a capsule with a magnifier; sort arrows are quiet until a column is sorted, then the active arrow takes the brand; the info line and pager sit on one quiet footer row. */ div.dt-container .dt-search input, div.dt-container .dt-input[type="search"] { padding-left: 2.3rem !important; min-height: 38px; min-width: min(260px, 100%); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cg fill='none' stroke='%235B6B80' stroke-width='1.6' stroke-linecap='round'%3e%3ccircle cx='7' cy='7' r='4.6'/%3e%3cpath d='m10.5 10.5 3 3'/%3e%3c/g%3e%3c/svg%3e") !important; background-repeat: no-repeat !important; background-position: 0.85rem center !important; background-size: 15px 15px !important; } [data-theme-mode="dark"] div.dt-container .dt-search input, [data-theme-mode="dark"] div.dt-container .dt-input[type="search"] { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cg fill='none' stroke='%2394A3B8' stroke-width='1.6' stroke-linecap='round'%3e%3ccircle cx='7' cy='7' r='4.6'/%3e%3cpath d='m10.5 10.5 3 3'/%3e%3c/g%3e%3c/svg%3e") !important; } table.dataTable > thead > tr > :is(th, td) .dt-column-order { color: var(--ui-label-4) !important; } table.dataTable > thead > tr > :is(th, td).dt-ordering-asc .dt-column-order::before, table.dataTable > thead > tr > :is(th, td).dt-ordering-desc .dt-column-order::after { color: var(--ui-brand-ink) !important; opacity: 1 !important; } table.dataTable > thead > tr > :is(th, td).dt-orderable-asc:hover, table.dataTable > thead > tr > :is(th, td).dt-orderable-desc:hover { outline: none !important; color: var(--ui-label-1) !important; } div.dt-container .dt-paging .dt-paging-button { min-width: 34px !important; height: 34px; border-radius: var(--ui-r-pill) !important; border: 0 !important; background: transparent !important; color: var(--ui-label-2) !important; font-weight: 500; padding: 0 10px !important; margin: 0 2px !important; } div.dt-container .dt-paging .dt-paging-button:hover:not(.disabled):not(.current) { background: var(--ui-fill-hover) !important; color: var(--ui-label-1) !important; } div.dt-container .dt-paging .dt-paging-button.current { background: var(--ui-brand) !important; color: var(--ui-brand-fg) !important; font-weight: 600; } div.dt-container .dt-paging .dt-paging-button.disabled { color: var(--ui-label-4) !important; } div.dt-container .dt-length select { min-height: 34px; } /* Row action menus (the "..." buttons) are quiet grey circles. */ table :is(.btn-icon, [data-bs-toggle="dropdown"]).btn { border-radius: var(--ui-r-pill) !important; } /* ── 19. Tables as cards on phones ───────────────────────────────────────── table-responsive.css turns each DataTables row into a stack of label/value lines below 576px. Each row is a content card; its first column becomes the card's title (no label), labels are quiet and values carry the ink. */ @layer lg-glass { @media (max-width: 575.98px) { .dt-container table.dataTable:not(.sa-no-cards) > tbody > tr { background: var(--ui-card) !important; border: 1px solid var(--ui-sep) !important; border-radius: var(--ui-r-card) !important; box-shadow: var(--ui-elev-1) !important; padding: 0.55rem 0.9rem !important; margin-bottom: 0.65rem !important; } .dt-container table.dataTable:not(.sa-no-cards) > tbody > tr > * { background: transparent !important; box-shadow: none !important; } .dt-container table.dataTable:not(.sa-no-cards) > tbody > tr > td { border-bottom-color: var(--ui-sep) !important; padding: 0.45rem 0 !important; color: var(--ui-label-1) !important; } .dt-container table.dataTable:not(.sa-no-cards) > tbody > tr > td[data-label]::before { color: var(--ui-label-3) !important; opacity: 1 !important; font-weight: 500 !important; } .dt-container table.dataTable:not(.sa-no-cards) > tbody > tr > td:first-child { justify-content: flex-start !important; text-align: left !important; font-size: 1rem; font-weight: 600; padding-top: 0.35rem !important; } .dt-container table.dataTable:not(.sa-no-cards) > tbody > tr > td:first-child::before { display: none !important; } .dt-container .dt-layout-row { gap: 0.6rem; } .dt-container .dt-search, .dt-container .dt-search input { width: 100% !important; } } } /* ── 20. Icon aliases ────────────────────────────────────────────────────── The app names about a hundred LineIcons that don't exist in the LineIcons 5 font it loads (cdn.lineicons.com/5.0), so they rendered blank (warning, checkmark-circle, trash-can, credit-cards, lock-1, heart-filled, ...). Each is mapped to the nearest real glyph by meaning. Generated from the font's own codes on 2026-11-02; a new icon name should be checked against the font, not added here. */ .lni.lni-alarm::before { content: "\ea08"; } .lni.lni-arrow-down::before { content: "\ea27"; } .lni.lni-arrow-right-circle-1::before { content: "\ea2b"; } .lni.lni-arrow-top-right::before { content: "\ea24"; } .lni.lni-arrow-up::before { content: "\ea2c"; } .lni.lni-arrow-up-right::before { content: "\ea24"; } .lni.lni-arrow-upward-short-wide::before { content: "\ea2c"; } .lni.lni-arrows-horizontal::before { content: "\ea25"; } .lni.lni-bar-chart-1::before { content: "\ea37"; } .lni.lni-bell-1-concierge::before { content: "\ebce"; } .lni.lni-bolt::before { content: "\ea49"; } .lni.lni-bolt-1::before { content: "\ea49"; } .lni.lni-box-closed-archive::before { content: "\ea51"; } .lni.lni-box-closed-open::before { content: "\ea52"; } .lni.lni-box-closeds::before { content: "\ea52"; } .lni.lni-briefcase::before { content: "\ea57"; } .lni.lni-buildings-1-circle-xmark::before { content: "\ea5e"; } .lni.lni-calculator::before { content: "\ea66"; } .lni.lni-calendar-2::before { content: "\ea68"; } .lni.lni-chat-alt-2::before { content: "\ea77"; } .lni.lni-check-circle::before { content: "\ea79"; } .lni.lni-checkmark::before { content: "\ea78"; } .lni.lni-checkmark-circle::before { content: "\ea79"; } .lni.lni-checkmark-circle-1::before { content: "\ea79"; } .lni.lni-chevron-right::before { content: "\ea7f"; } .lni.lni-clipboard-check::before { content: "\ea87"; } .lni.lni-clock::before { content: "\ea08"; } .lni.lni-close::before { content: "\ec52"; } .lni.lni-cloud-1::before { content: "\ea88"; } .lni.lni-cog::before { content: "\eaf5"; } .lni.lni-cog-1::before { content: "\eaf5"; } .lni.lni-copy::before { content: "\ea87"; } .lni.lni-credit-cards::before { content: "\eaa3"; } .lni.lni-diamonds-1-down::before { content: "\eaac"; } .lni.lni-diamonds-1-notch::before { content: "\eaac"; } .lni.lni-diamonds-1-pause::before { content: "\eaac"; } .lni.lni-domain::before { content: "\eafb"; } .lni.lni-download::before { content: "\eab9"; } .lni.lni-envelope::before { content: "\eacd"; } .lni.lni-envelope-1-open::before { content: "\eacd"; } .lni.lni-envelope-2::before { content: "\eacd"; } .lni.lni-eye-1::before { content: "\ead6"; } .lni.lni-file-1::before { content: "\eade"; } .lni.lni-file-multiple-circle-exclamation::before { content: "\eade"; } .lni.lni-file-multiple-invoice::before { content: "\eade"; } .lni.lni-files::before { content: "\eade"; } .lni.lni-flask::before { content: "\ea6e"; } .lni.lni-funnel::before { content: "\eaf0"; } .lni.lni-funnel-1-circle-xmark::before { content: "\eaf0"; } .lni.lni-grid-alt::before { content: "\eb39"; } .lni.lni-hammer::before { content: "\eb08"; } .lni.lni-hand::before { content: "\eb0c"; } .lni.lni-headphone-alt::before { content: "\eb12"; } .lni.lni-heart-filled::before { content: "\eb13"; } .lni.lni-history::before { content: "\ebb5"; } .lni.lni-home-2-medical::before { content: "\eb1a"; } .lni.lni-image::before { content: "\eb93"; } .lni.lni-image-1::before { content: "\eb93"; } .lni.lni-info-circle::before { content: "\eb21"; } .lni.lni-information::before { content: "\eb21"; } .lni.lni-invoice::before { content: "\eade"; } .lni.lni-link::before { content: "\eb43"; } .lni.lni-list::before { content: "\eb55"; } .lni.lni-list-1::before { content: "\eb55"; } .lni.lni-lock-1::before { content: "\eb46"; } .lni.lni-lock-2::before { content: "\eb47"; } .lni.lni-lock-alt::before { content: "\eb46"; } .lni.lni-magnifier-1::before { content: "\ebc7"; } .lni.lni-map::before { content: "\eb4c"; } .lni.lni-map-marker::before { content: "\eb4c"; } .lni.lni-map-marker-3::before { content: "\eb4c"; } .lni.lni-map-marker-5-pin::before { content: "\eb4d"; } .lni.lni-more-alt::before { content: "\eb56"; } .lni.lni-mouse-pointer-1::before { content: "\eb6b"; } .lni.lni-package::before { content: "\ea52"; } .lni.lni-paper-plane::before { content: "\ea04"; } .lni.lni-paperclip::before { content: "\eb88"; } .lni.lni-pencil::before { content: "\eb90"; } .lni.lni-photoss::before { content: "\eb93"; } .lni.lni-pin::before { content: "\eb4e"; } .lni.lni-pop-up-1::before { content: "\ea24"; } .lni.lni-presentation::before { content: "\ea37"; } .lni.lni-pulse::before { content: "\ec1c"; } .lni.lni-receipt::before { content: "\eade"; } .lni.lni-refresh-circle-1-clockwise-right::before { content: "\ebb5"; } .lni.lni-reload::before { content: "\ebb5"; } .lni.lni-revenue::before { content: "\eab7"; } .lni.lni-save::before { content: "\eaea"; } .lni.lni-search-3::before { content: "\ebc7"; } .lni.lni-search-alt::before { content: "\ebc7"; } .lni.lni-share::before { content: "\ebcf"; } .lni.lni-shield-1::before { content: "\ebd2"; } .lni.lni-star-1::before { content: "\ebf3"; } .lni.lni-text::before { content: "\ec0a"; } .lni.lni-trash-2::before { content: "\ec17"; } .lni.lni-trash-can::before { content: "\ec17"; } .lni.lni-truck-delivery-1-fast::before { content: "\ec1f"; } .lni.lni-user-1::before { content: "\ec2e"; } .lni.lni-user-2::before { content: "\ec2e"; } .lni.lni-user-4-clock::before { content: "\ec2e"; } .lni.lni-user-4-nurse::before { content: "\ec2e"; } .lni.lni-user-4-tie::before { content: "\ec2e"; } .lni.lni-user-multiple-4-line::before { content: "\ec2f"; } .lni.lni-users-2::before { content: "\ec2f"; } .lni.lni-wallet-3::before { content: "\ec40"; } .lni.lni-warning::before { content: "\eb21"; } .lni.lni-world::before { content: "\eafb"; } .lni.lni-write::before { content: "\eb90"; } /* ── 21. Census round two: rules that lost to more specific page selectors ── */ :root[data-entity="2000"] :is(.tb-page, .tb-send, .tb-drawer) { --tb-faint: var(--ui-label-3); } @layer lg-glass { .app-header .sa-topbar-role-pill { background: rgba(255, 255, 255, 0.14) !important; color: #FFFFFF !important; border-color: rgba(255, 255, 255, 0.22) !important; text-transform: none !important; letter-spacing: 0 !important; } [data-theme-mode="dark"] .auth-split-card :is(.auth-forgot-link, .auth-footer-link a) { color: #9CC3F5 !important; } [data-theme-mode="dark"] :is(.rn-version-num, .rn-view-btn) { color: var(--ui-label-2) !important; } :is(.sa-date-sep, .sa-customer-cards-count, .sa-pagination__summary, .actlog-loading) { color: var(--ui-label-3) !important; } :is(.sa-kpi-card__change, .sa-stat-card__breakdown-label, .sa-template-card__status, .notif-filter-btn, .notif-actions-btn, .sa-kpi-card__sub, .sa-kpi-card__prev) { font-size: max(0.66rem, 12px) !important; } } /* ── 22. Segmented controls on narrow screens ────────────────────────────── A segmented control can't shrink (its segments don't wrap), so in a grid it pushed checkout's column to 524px on a 390px phone and clipped the form and the order summary. Grid columns may now shrink below their content; a long control scrolls sideways, and checkout's three shipping choices share the width evenly with labels that may wrap. */ .ap-cart-layout > *, .row > [class*="col"] { min-width: 0; } @layer lg-controls { @media (max-width: 575.98px) { :where(.sa-filter-group__options, .sa-view-switcher, .sa-view-toggle, .ap-view-toggle, .ap-mode-toggle, .tb-seg, .sa-time-pills, .rn-view-toggle, .cp-view-toggle, .lg-seg) { max-width: 100%; overflow-x: auto !important; scrollbar-width: none; } #coShipMethodToggle { display: flex; width: 100%; overflow: visible !important; } #coShipMethodToggle > .ap-view-toggle__btn { flex: 1 1 0 !important; min-width: 0 !important; white-space: normal !important; text-align: center; line-height: 1.15 !important; padding: 6px 4px !important; font-size: 0.78rem !important; } #coShipMethodToggle > .ap-view-toggle__btn i { display: none !important; } } } /* Clip check (content cut off by an overflow:hidden parent at 390px): header button rows wrap, and a long status badge in a phone table card may break onto two lines instead of running past the card. */ @media (max-width: 575.98px) { .btn-list { flex-wrap: wrap !important; max-width: 100%; } .page-header-breadcrumb > * { min-width: 0; max-width: 100%; } .dt-container table.dataTable:not(.sa-no-cards) > tbody > tr > td :is(.badge, .sa-badge, .sa-pill, .sa-status-pill) { white-space: normal !important; text-align: center; max-width: 100%; } .dt-container table.dataTable:not(.sa-no-cards) > tbody > tr > td > * { min-width: 0; max-width: 62%; } } /* ── 23. Census round three ───────────────────────────────────────────────── */ @layer lg-glass { /* Release notes: section labels as status tints in sentence case (white on amber was 3.3:1). */ .rn-section-label { text-transform: none !important; letter-spacing: 0 !important; background: var(--ui-grey-tint) !important; color: var(--ui-grey) !important; border-radius: var(--ui-r-pill) !important; } .rn-section--added > .rn-section-label { background: var(--ui-green-tint) !important; color: var(--ui-green) !important; } .rn-section--improved > .rn-section-label { background: var(--ui-blue-tint) !important; color: var(--ui-blue) !important; } .rn-section--fixed > .rn-section-label { background: var(--ui-amber-tint) !important; color: var(--ui-amber) !important; } .rn-version-tagline { color: var(--ui-label-2) !important; } /* Notifications: muted copy and module badges on tokens, in both themes. */ :is(.notif-kpi__lbl, .notif-row__time) { color: var(--ui-label-3) !important; } .notif-row__badge { background: var(--ui-grey-tint) !important; border-color: transparent !important; color: var(--ui-grey) !important; } } .sa-last-updated, .sa-last-updated span:not(.sa-live-dot) { font-size: max(0.66rem, 12px) !important; color: var(--ui-label-3) !important; } @layer lg-glass { /* Release-notes version list: readable in both themes, rows with soft corners. */ .rn-sidebar-item { border-radius: var(--ui-r-sm) !important; } .rn-sidebar-date { color: var(--ui-label-3) !important; } [data-theme-mode="dark"] .rn-sidebar-ver { color: var(--ui-label-1) !important; } }