/* Vehicle Manager Pro design system. Ported from Shop Manager Pro (shopmanagerpro.app/public/res/app.css): same tokens, same rg-* components, same top bar. Themes: , set before first paint by the script in index.php's . Rule of thumb: no literal colours in pages; use the tokens below. */ /* ── Tokens ─────────────────────────────────────────────── */ :root { --rg-bg: #f4f6f9; --rg-surface: #ffffff; --rg-surface-2: #f8fafc; --rg-surface-3: #eef2f7; --rg-border: #e3e8ef; --rg-popup-border: #c5cedb; --rg-text: #1a2332; --rg-muted: #5b6b80; --rg-accent: #2563eb; --rg-accent-hover: #1d4ed8; --rg-accent-soft: #eaf1fb; --rg-accent2: #0ea5e9; --rg-success: #15803d; --rg-warn: #d97706; --rg-danger: #dc2626; --rg-purple: #7c3aed; --rg-cyan: #0891b2; --rg-danger-bg: #fdecec; --rg-on-accent: #ffffff; --rg-input-bg: #ffffff; --rg-placeholder: #a8b3c3; --rg-hover: rgba(15, 23, 42, .04); --rg-overlay: rgba(16, 24, 40, .6); --rg-focus-ring: rgba(37, 99, 235, .35); /* The top bar and phone bars: dark navy in every theme, so Vehicle Manager Pro is easy to tell from Shop Manager Pro (near-black #111) when both are open. Its menus share the navy. */ --rg-nav-bg: #0b1f3a; --vmp-menu-bg: #10284a; --rg-scrollbar: #c5ccd6; --rg-accent-text: #2563eb; --rg-accent2-text: #0369a1; --rg-success-text: #15803d; --rg-warn-text: #b45309; --rg-danger-text: #c81e1e; --rg-purple-text: #7c3aed; --rg-cyan-text: #0e7490; --rg-success-ink: #166534; --rg-warn-ink: #92400e; --rg-danger-ink: #991b1b; --rg-info-ink: #1e40af; --rg-slate-100: #eef2f7; --rg-slate-200: #e2e8f0; --rg-slate-300: #cbd5e1; --rg-radius: 10px; --rg-shadow: 0 1px 3px rgba(0, 0, 0, .08), 0 1px 2px rgba(0, 0, 0, .04); --rg-shadow-md: 0 4px 12px rgba(0, 0, 0, .10); --rg-shadow-pop: 0 24px 64px rgba(16, 24, 40, .34), 0 2px 8px rgba(16, 24, 40, .14); --rg-font: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; --rg-mono: 'DM Mono', ui-monospace, Consolas, monospace; --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px); --safe-l: env(safe-area-inset-left, 0px); --safe-r: env(safe-area-inset-right, 0px); --nav-h: 64px; color-scheme: light; } :root[data-theme="dark"], :root[data-theme="oled"] { color-scheme: dark; --rg-bg: #0f1115; --rg-surface: #171a21; --rg-surface-2: #1e222b; --rg-surface-3: #252a34; --rg-border: #2a303b; --rg-popup-border: #3d4656; --rg-text: #e6e9ef; --rg-muted: #9aa4b2; --rg-accent-soft: #16223a; --rg-danger-bg: #3a1a1c; --rg-input-bg: #12151b; --rg-placeholder: #6b7585; --rg-hover: rgba(255, 255, 255, .05); --rg-overlay: rgba(0, 0, 0, .74); --rg-focus-ring: rgba(96, 165, 250, .45); --rg-nav-bg: #0a1b33; --vmp-menu-bg: #0f2544; --rg-scrollbar: #394150; --rg-accent-text: #6ea8fe; --rg-accent2-text: #38bdf8; --rg-success-text: #4ade80; --rg-warn-text: #fbbf24; --rg-danger-text: #f87171; --rg-purple-text: #b69cfb; --rg-cyan: #22d3ee; --rg-cyan-text: #67e8f9; --rg-success-ink: #86efac; --rg-warn-ink: #fcd34d; --rg-danger-ink: #fca5a5; --rg-info-ink: #93c5fd; --rg-slate-100: #20242d; --rg-slate-200: #2a303b; --rg-slate-300: #394150; --rg-shadow: 0 1px 3px rgba(0, 0, 0, .55), 0 1px 2px rgba(0, 0, 0, .35); --rg-shadow-md: 0 6px 18px rgba(0, 0, 0, .6); --rg-shadow-pop: 0 24px 64px rgba(0, 0, 0, .85), 0 0 0 1px rgba(255, 255, 255, .03); } :root[data-theme="oled"] { --rg-bg: #000000; --rg-surface: #0a0a0a; --rg-surface-2: #111111; --rg-surface-3: #181818; --rg-border: #232323; --rg-popup-border: #3a3a3a; --rg-accent-soft: #0c1830; --rg-danger-bg: #2a0e10; --rg-input-bg: #000000; --rg-overlay: rgba(0, 0, 0, .82); --rg-nav-bg: #06132a; --vmp-menu-bg: #0a1a33; --rg-scrollbar: #2e2e2e; --rg-slate-100: #141414; --rg-slate-200: #232323; --rg-slate-300: #333333; --rg-shadow: 0 0 0 1px #1c1c1c; --rg-shadow-md: 0 0 0 1px #2a2a2a; } /* Older pages read these names (light_mode.css / dark_mode.css). They now follow the theme. */ :root { --main-bg-color: var(--rg-surface); --main-body-color: var(--rg-surface); --primary-body-color: var(--rg-bg); --secondary-body-color: var(--rg-surface); --main-border-color: var(--rg-border); --nav-btn-color: var(--rg-surface); --nav-btn-border: var(--rg-border); --nav-btn-hover: var(--rg-hover); --nav-btn-hover-border: var(--rg-slate-300); --nav-btn-text: var(--rg-text); --main-text-color: var(--rg-text); --main-href-color: var(--rg-accent-text); --subscription-text-color: var(--rg-text); --blur-strength: 0px; --blur-strength-body: 0px; --sticky-header-height: 0px; } :root[data-theme="dark"] *, :root[data-theme="oled"] * { scrollbar-color: var(--rg-scrollbar) transparent; } /* ── Base ───────────────────────────────────────────────── */ html, body { background: var(--rg-bg); } body { margin: 0; font-family: var(--rg-font); font-size: .875rem; color: var(--rg-text); -webkit-font-smoothing: antialiased; } a { color: var(--rg-accent-text); text-decoration: none; } a:hover { color: var(--rg-accent-text); } hr { border: 0; border-top: 1px solid var(--rg-border); opacity: 1; margin: 12px 0; } ::placeholder { color: var(--rg-placeholder); } :focus-visible { outline: 2px solid var(--rg-accent); outline-offset: 2px; } /* The app: bars on top, content scrolls, phone tabs at the bottom. */ .vmp-app { height: 100dvh; display: flex; flex-direction: column; background: var(--rg-bg); } .vmp-content { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; position: relative; } .vmp-content > .main { min-height: 100%; position: relative; display: flex; flex-direction: column; } /* A page's root fills the height, so its background reaches the bottom. */ .vmp-content > .main > :not(style):not(script) { flex: 1 0 auto; } /* ── Top bar (desktop) ──────────────────────────────────── */ .vmp-nav { align-items: center; gap: 10px; min-height: 52px; padding: var(--safe-t) calc(20px + var(--safe-r)) 0 calc(20px + var(--safe-l)); background: var(--rg-nav-bg); border-bottom: 1px solid rgba(255, 255, 255, .08); flex-shrink: 0; position: relative; z-index: 1030; } .vmp-brand { display: flex; align-items: center; gap: 9px; text-decoration: none; flex-shrink: 0; margin-right: 4px; } .vmp-mark { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 7px; background: var(--rg-accent); color: #fff; font-size: .62rem; font-weight: 700; letter-spacing: .02em; } .vmp-word { color: #e5e7eb; font-size: .95rem; font-weight: 500; letter-spacing: -.01em; white-space: nowrap; } .vmp-word b { font-weight: 700; color: #fff; } .vmp-links { display: flex; align-items: center; gap: 2px; flex: 0 0 auto; padding: 3px; border-radius: 10px; background: rgba(255, 255, 255, .055); position: relative; } .vmp-links-pill { position: absolute; left: 0; top: 0; z-index: 0; border-radius: 7px; background: rgba(255, 255, 255, .15); box-shadow: 0 1px 2px rgba(0, 0, 0, .45); opacity: 0; pointer-events: none; transition: transform .3s cubic-bezier(.22, 1, .36, 1), width .3s cubic-bezier(.22, 1, .36, 1), opacity .15s ease; } .vmp-links.vmp-has-pill .vmp-links-pill { opacity: 1; } @media (prefers-reduced-motion: reduce) { .vmp-links-pill { transition: opacity .15s ease; } } .vmp-link { display: inline-flex; align-items: center; gap: 7px; position: relative; z-index: 1; height: 32px; padding: 0 12px; border-radius: 7px; border: 0; background: none; color: #9ca3af; font-family: inherit; font-size: .875rem; font-weight: 500; text-decoration: none; white-space: nowrap; cursor: pointer; transition: color .12s, background .12s; } .vmp-link i { font-size: .82rem; } .vmp-link:hover { color: #fff; background: rgba(255, 255, 255, .07); } .vmp-link.active { color: #fff; } .vmp-link.active:hover { background: none; } .vmp-link.dropdown-toggle::after { margin-left: 5px; opacity: .6; } .vmp-link-dropdown { position: relative; } .vmp-bar-entry { display: contents; } .vmp-bar-entry.vmp-nav-over { display: none; } .vmp-link-more { display: none; } .vmp-nav-overflowing .vmp-link-more { display: block; } .vmp-navdot { width: .5em; height: .5em; border-radius: 50%; background: var(--rg-danger); } /* Search: a button that opens the search panel */ .vmp-search { display: inline-flex; align-items: center; gap: 9px; flex: 1 1 auto; min-width: 44px; max-width: 440px; height: 34px; padding: 0 10px; border-radius: 9px; border: 1px solid rgba(255, 255, 255, .09); background: rgba(255, 255, 255, .06); color: rgba(255, 255, 255, .5); font-family: inherit; font-size: .84rem; text-align: left; cursor: pointer; transition: background .12s, border-color .12s, color .12s; } .vmp-search:hover { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .16); color: rgba(255, 255, 255, .75); } .vmp-search-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .vmp-search-key { margin-left: auto; flex: none; padding: 1px 6px; border-radius: 4px; background: rgba(255, 255, 255, .11); color: rgba(255, 255, 255, .6); font-family: var(--rg-mono); font-size: .7rem; line-height: 1.5; } .vmp-nav .vmp-search.vmp-search-compact { flex: 0 0 34px; width: 34px; min-width: 34px; justify-content: center; padding: 0; gap: 0; } .vmp-nav .vmp-search.vmp-search-compact .vmp-search-label, .vmp-nav .vmp-search.vmp-search-compact .vmp-search-key { display: none; } /* The tray: the main action, then controls for this account */ .vmp-tray { display: flex; align-items: center; gap: 6px; margin-left: auto; flex-shrink: 0; } .vmp-tray-sep { width: 1px; height: 22px; margin: 0 2px; background: rgba(255, 255, 255, .12); flex: none; } .vmp-cta { display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0; background: var(--rg-accent); color: #fff; border-radius: 8px; padding: 8px 15px; font-size: .85rem; font-weight: 600; text-decoration: none; white-space: nowrap; transition: background .12s; } .vmp-cta:hover { background: var(--rg-accent-hover); color: #fff; } .vmp-navbtn { position: relative; display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 36px; height: 36px; border: 1px solid transparent; border-radius: 9px; background: transparent; color: rgba(255, 255, 255, .7); font-family: inherit; font-size: .95rem; text-decoration: none; cursor: pointer; transition: background .12s, color .12s, border-color .12s; } .vmp-navbtn:hover { background: rgba(255, 255, 255, .08); color: #fff; } .vmp-navbtn.active, .vmp-navbtn[aria-expanded="true"] { background: rgba(255, 255, 255, .12); color: #fff; border-color: rgba(255, 255, 255, .18); } .vmp-navbtn.dropdown-toggle::after { display: none; } .vmp-count { position: absolute; top: 2px; right: 0; min-width: 17px; padding: 0 4px; border-radius: 9px; background: var(--rg-danger); color: #fff; font-size: .62rem; font-weight: 700; line-height: 17px; text-align: center; } .vmp-account-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: 1px solid rgba(255, 255, 255, .14); border-radius: 50%; background: transparent; cursor: pointer; transition: border-color .12s, background .12s; } .vmp-account-btn:hover, .vmp-account-btn[aria-expanded="true"] { border-color: rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .08); } .vmp-account-btn.dropdown-toggle::after { display: none; } /* The photo is rounded itself (not the button clipping it), so the What's new dot can sit over the edge */ .vmp-account-btn img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; } .vmp-account-mark { font-size: .72rem; font-weight: 700; letter-spacing: .02em; color: #e5e7eb; } /* Narrow desktops: give ground one rung at a time (vmp-nav-fit) */ .vmp-nav.vmp-fit-2 .vmp-cta span { display: none; } .vmp-nav.vmp-fit-2 .vmp-cta { padding: 8px 11px; } .vmp-nav.vmp-fit-2 { gap: 12px; } .vmp-nav.vmp-fit-3 .vmp-link span { display: none; } .vmp-nav.vmp-fit-3 .vmp-link { padding: 8px 10px; } .vmp-nav.vmp-fit-3 .vmp-links { gap: 1px; } .vmp-nav.vmp-fit-4 { gap: 8px; padding-inline: calc(12px + var(--safe-l)) calc(12px + var(--safe-r)); } .vmp-nav.vmp-fit-4 .vmp-link { padding: 8px 8px; } .vmp-nav > :not(.vmp-links):not(.vmp-search) { flex-shrink: 0; } /* Menus from the bars: dark in every theme */ .dropdown-menu.vmp-menu { background: var(--vmp-menu-bg); border: 1px solid rgba(255, 255, 255, .1); border-radius: 10px; padding: 6px; min-width: 232px; box-shadow: 0 10px 30px rgba(0, 0, 0, .35); backdrop-filter: none; } .vmp-menu-label { font-size: .62rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #6b7280; padding: 7px 10px 4px; } .vmp-menu .dropdown-item, .vmp-menu .dropdown-item.active { display: flex; align-items: center; gap: 10px; border-radius: 6px; padding: 8px 10px; color: #d1d5db; font-size: .875rem; background: none; } .vmp-menu .dropdown-item:hover, .vmp-menu .dropdown-item:focus, .vmp-menu .dropdown-item.active:hover { background: rgba(255, 255, 255, .09); color: #fff; } .vmp-menu .dropdown-item.active { background: rgba(255, 255, 255, .12); color: #fff; font-weight: 600; } .vmp-menu .dropdown-item.active i { color: #fff; } .vmp-menu .dropdown-item i { width: 15px; text-align: center; color: #9ca3af; font-size: .8rem; } .vmp-menu .dropdown-item .vmp-menu-ext { margin-left: auto; width: auto; font-size: .65rem; opacity: .6; } .vmp-menu .dropdown-item .vmp-menu-badge { margin-left: auto; min-width: 18px; padding: 0 5px; border-radius: 9px; background: var(--rg-danger); color: #fff; font-size: .66rem; font-weight: 700; line-height: 18px; text-align: center; } /* Actions at the top of a bar menu (Nav's `act`: Start a sale, Buy a vehicle): coloured text, a divider after the last */ .vmp-menu li.vmp-menu-act .dropdown-item { font-weight: 600; } .vmp-menu li.vmp-menu-act.is-sale .dropdown-item, .vmp-menu li.vmp-menu-act.is-sale .dropdown-item i { color: #93c5fd; } .vmp-menu li.vmp-menu-act.is-buy .dropdown-item, .vmp-menu li.vmp-menu-act.is-buy .dropdown-item i { color: #86efac; } .vmp-menu li.vmp-menu-act + li:not(.vmp-menu-act) { margin-top: 5px; padding-top: 5px; border-top: 1px solid rgba(255, 255, 255, .1); } .vmp-menu .dropdown-divider { border-color: rgba(255, 255, 255, .1); margin: 5px 0; } .vmp-menu-who { padding: 8px 12px 6px; } .vmp-menu-name { font-size: .85rem; font-weight: 700; color: #fff; } .vmp-menu-mail { font-size: .72rem; color: #9ca3af; } .vmp-menu-out { color: #fca5a5 !important; } .vmp-menu-out:hover { background: color-mix(in srgb, var(--rg-danger) 15%, transparent) !important; color: #fff !important; } .vmp-menu-theme { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 10px; } .vmp-menu-theme-label { display: flex; align-items: center; gap: 10px; color: #d1d5db; font-size: .875rem; } .vmp-menu-theme-label i { width: 15px; text-align: center; color: #9ca3af; font-size: .8rem; } .vmp-theme-seg { display: inline-flex; gap: 2px; padding: 2px; border-radius: 8px; background: rgba(255, 255, 255, .06); } .vmp-theme-seg button { width: 30px; height: 26px; border: 0; border-radius: 6px; background: none; color: #9ca3af; font-size: .78rem; cursor: pointer; } .vmp-theme-seg button:hover { color: #fff; background: rgba(255, 255, 255, .08); } .vmp-theme-seg button.on { color: #fff; background: var(--rg-accent); } /* Notifications panel */ .vmp-bell-panel { width: 360px; max-width: calc(100vw - 24px); padding: 0; overflow: hidden; background: var(--rg-surface); border: 1px solid var(--rg-popup-border); border-radius: 12px; box-shadow: var(--rg-shadow-pop); } .vmp-bell-head { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--rg-border); font-weight: 700; color: var(--rg-text); } .vmp-bell-head button { margin-left: auto; border: 0; background: none; color: var(--rg-accent-text); font: inherit; font-size: .78rem; font-weight: 600; cursor: pointer; } .vmp-bell-list { max-height: min(60vh, 460px); overflow-y: auto; } .vmp-bell-item { display: flex; gap: 10px; padding: 11px 14px; border-bottom: 1px solid var(--rg-border); } .vmp-bell-item:last-child { border-bottom: 0; } .vmp-bell-text { flex: 1; min-width: 0; } .vmp-bell-title { font-size: .84rem; font-weight: 600; color: var(--rg-text); } .vmp-bell-body { font-size: .78rem; color: var(--rg-muted); margin-top: 2px; word-break: break-word; } .vmp-bell-x { flex: none; align-self: flex-start; border: 0; background: none; color: var(--rg-muted); padding: 2px 4px; border-radius: 6px; cursor: pointer; } .vmp-bell-x:hover { background: var(--rg-hover); color: var(--rg-text); } .vmp-bell-empty { padding: 32px 16px; text-align: center; color: var(--rg-muted); font-size: .84rem; } .vmp-bell-empty i { display: block; font-size: 1.3rem; opacity: .5; margin-bottom: 8px; } /* ── Phone: app bar on top, tabs at the bottom ─────────── */ .vmp-appbar { display: grid; grid-template-columns: minmax(max-content, 1fr) minmax(0, max-content) minmax(max-content, 1fr); align-items: center; column-gap: 10px; min-height: 52px; padding: var(--safe-t) calc(10px + var(--safe-r)) 0 calc(10px + var(--safe-l)); background: var(--rg-nav-bg); border-bottom: 1px solid rgba(255, 255, 255, .08); flex-shrink: 0; position: relative; z-index: 1030; } .vmp-appbar .vmp-brand { justify-self: start; } .vmp-appbar .vmp-mark { width: 28px; height: 28px; font-size: .58rem; } .vmp-appbar-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #e5e7eb; font-size: .88rem; font-weight: 600; text-align: center; } .vmp-appbar-actions { justify-self: end; display: flex; align-items: center; gap: 2px; } .vmp-appbar-btn { position: relative; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 0; border-radius: 10px; background: transparent; color: #9ca3af; font-size: 1rem; } .vmp-appbar-btn:active, .vmp-appbar-btn[aria-expanded="true"] { background: rgba(255, 255, 255, .1); color: #fff; } .vmp-appbar-btn.dropdown-toggle::after { display: none; } .vmp-appbar .vmp-account-btn { width: 34px; height: 34px; } .vmp-tabs { flex-shrink: 0; height: calc(var(--nav-h) + var(--safe-b)); padding: 0 var(--safe-r) var(--safe-b) var(--safe-l); display: flex; justify-content: space-around; align-items: center; background: var(--rg-nav-bg); border-top: 1px solid rgba(255, 255, 255, .08); position: relative; z-index: 1020; /* under Bootstrap modals (1055) */ } .vmp-tabs a { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: #9ca3af; font-size: 11px; text-decoration: none; position: relative; } .vmp-tabs i { font-size: 17px; display: flex; align-items: center; justify-content: center; height: 26px; min-width: 44px; border-radius: 13px; transition: background .12s; } .vmp-tabs a.active { color: #fff; } .vmp-tabs a.active i { background: rgba(255, 255, 255, .14); } .vmp-tabs a:active i { background: rgba(255, 255, 255, .2); } .vmp-tabs .vmp-navdot { position: absolute; top: 8px; left: calc(50% + 12px); } .vmp-more-overlay { display: none; position: fixed; inset: 0; background: var(--rg-overlay); z-index: 1250; } .vmp-more-overlay.open { display: block; } .vmp-more-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1300; max-height: calc(100dvh - 48px); overflow-y: auto; overscroll-behavior: contain; background: var(--vmp-menu-bg); border-radius: 16px 16px 0 0; padding: 8px var(--safe-r) calc(10px + var(--safe-b)) var(--safe-l); transform: translateY(100%); visibility: hidden; transition: transform .2s ease, visibility 0s linear .2s; } .vmp-more-sheet.open { transform: translateY(0); visibility: visible; transition: transform .2s ease, visibility 0s; } .vmp-more-handle { width: 36px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .25); margin: 6px auto 8px; } .vmp-more-sheet a { display: flex; align-items: center; gap: 12px; padding: 13px 20px; color: #e5e7eb; text-decoration: none; font-size: 14px; } .vmp-more-sheet a i { width: 20px; text-align: center; color: #9ca3af; font-size: 16px; } .vmp-more-sheet a.active, .vmp-more-sheet a.active i { color: #fff; } .vmp-more-sheet a.vmp-sheet-cta { margin: 4px 14px 8px; border-radius: 8px; background: var(--rg-accent); color: #fff; font-weight: 600; justify-content: center; } .vmp-more-sheet a.vmp-sheet-cta i { color: #fff; } .vmp-sheet-label { font-size: .62rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #6b7280; padding: 12px 20px 4px; } /* Public pages (signed out): a plain bar */ .vmp-sitebar { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 0 20px; background: var(--rg-nav-bg); flex-shrink: 0; } .vmp-sitebar .vmp-sitelink { white-space: nowrap; color: #d1d5db; font-weight: 600; font-size: .875rem; } .vmp-sitebar .vmp-sitelink:hover { color: #fff; } .vmp-footer { display: flex; flex-wrap: wrap; gap: 6px 16px; justify-content: center; padding: 18px 16px; color: var(--rg-muted); font-size: .75rem; } .vmp-footer a { color: var(--rg-muted); } .vmp-footer a:hover { color: var(--rg-text); } /* ── Search panel (press /) ─────────────────────────────── */ .rg-cmdk-backdrop { position: fixed; inset: 0; z-index: 2100; display: flex; justify-content: center; padding: calc(72px + var(--safe-t)) 16px calc(20px + var(--safe-b)); background: color-mix(in srgb, var(--rg-overlay) 45%, transparent); animation: rg-fade .14s ease-out; } .rg-cmdk { width: 100%; max-width: 580px; max-height: 100%; height: fit-content; display: flex; flex-direction: column; background: var(--rg-surface); border: 1px solid var(--rg-popup-border); border-radius: 16px; box-shadow: var(--rg-shadow-pop); animation: rg-rise .18s cubic-bezier(.22, 1, .36, 1); overflow: hidden; } @keyframes rg-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes rg-rise { from { opacity: 0; transform: translateY(-8px) scale(.985); } to { opacity: 1; transform: none; } } .rg-cmdk-input-row { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--rg-border); } .rg-cmdk-lead { flex: none; width: 18px; display: flex; align-items: center; justify-content: center; color: var(--rg-muted); font-size: .92rem; line-height: 1; } /* line-height 1 or the glyph sits high */ .rg-cmdk .rg-cmdk-input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; font-family: inherit; font-size: 1.05rem; color: var(--rg-text); } .rg-cmdk-input:focus-visible { outline: none; } .rg-cmdk-input::placeholder { color: var(--rg-muted); } .rg-cmdk-spin { flex: none; color: var(--rg-muted); font-size: .85rem; } .rg-cmdk-x { flex: none; display: none; align-items: center; justify-content: center; width: 34px; height: 34px; border: 0; border-radius: 9px; background: var(--rg-bg); color: var(--rg-muted); } .rg-cmdk-list { padding: 6px; overflow-y: auto; max-height: min(60vh, 520px); } .rg-cmdk-group { padding: 9px 10px 5px; font-size: .67rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--rg-muted); } .rg-cmdk-list > div:first-child > .rg-cmdk-group { padding-top: 4px; } .rg-cmdk-item { position: relative; display: flex; align-items: center; gap: 11px; width: 100%; padding: 9px 10px; border: 0; border-radius: 9px; background: transparent; text-align: left; cursor: pointer; font-family: inherit; } .rg-cmdk-item.active { background: var(--rg-accent-soft); } .rg-cmdk-item.active::before { content: ''; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px; border-radius: 0 3px 3px 0; background: var(--rg-accent); } .rg-cmdk-icon { flex: none; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 9px; background: var(--rg-slate-100); color: var(--rg-muted); font-size: .85rem; overflow: hidden; } .rg-cmdk-icon img { width: 100%; height: 100%; object-fit: cover; } .rg-cmdk-icon.is-page { background: color-mix(in srgb, var(--rg-accent) 10%, transparent); color: var(--rg-accent-text); } .rg-cmdk-icon.is-vehicle { background: color-mix(in srgb, var(--rg-accent2) 12%, transparent); color: var(--rg-accent2-text); } .rg-cmdk-icon.is-customer { background: color-mix(in srgb, var(--rg-success) 12%, transparent); color: var(--rg-success-text); } .rg-cmdk-icon.is-deal { background: color-mix(in srgb, var(--rg-warn) 12%, transparent); color: var(--rg-warn-text); } .rg-cmdk-icon.is-trim { background: color-mix(in srgb, var(--rg-purple) 12%, transparent); color: var(--rg-purple-text); } .rg-cmdk-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; } .rg-cmdk-label { font-size: .88rem; font-weight: 600; color: var(--rg-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rg-cmdk-sub { font-size: .74rem; color: var(--rg-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rg-cmdk-go { flex: none; color: var(--rg-accent-text); font-size: .78rem; } .rg-cmdk-empty { padding: 30px 18px; text-align: center; font-size: .84rem; color: var(--rg-muted); } .rg-cmdk-foot { display: flex; align-items: center; gap: 14px; padding: 9px 16px; border-top: 1px solid var(--rg-border); background: var(--rg-bg); font-size: .71rem; color: var(--rg-muted); } .rg-cmdk-foot span { display: flex; align-items: center; gap: 5px; } .rg-cmdk-foot i { font-size: .66rem; } .rg-cmdk-foot kbd { padding: 1px 5px; border: 1px solid var(--rg-border); border-radius: 4px; background: var(--rg-surface); color: var(--rg-muted); font-family: inherit; font-size: .68rem; } @media (max-width: 559.98px) { .rg-cmdk-foot .rg-cmdk-hint-keys { display: none; } } /* On a phone or tablet the panel is the whole screen, as in Shop Manager Pro. */ @media (max-width: 991.98px) { .rg-cmdk-backdrop { padding: 0; background: rgba(15, 23, 42, .2); } .rg-cmdk { max-width: none; width: 100%; height: 100%; max-height: 100%; border: 0; border-radius: 0; box-shadow: none; animation: none; } .rg-cmdk-input-row { padding: calc(10px + var(--safe-t)) 12px 10px; } .rg-cmdk .rg-cmdk-input { font-size: 16px; } /* 16px or iOS zooms the page on focus */ .rg-cmdk-list { max-height: none; flex: 1; } .rg-cmdk-x { display: flex; } .rg-cmdk-foot { display: none; } .rg-cmdk-item { padding-block: 11px; } } @media (prefers-reduced-motion: reduce) { .rg-cmdk, .rg-cmdk-backdrop { animation: none; } } /* ── Page building blocks (rg-*) ────────────────────────── */ .rg-page { background: var(--rg-bg); color: var(--rg-text); min-height: 100%; display: flex; flex-direction: column; } .rg-topbar { background: var(--rg-surface); border-bottom: 1px solid var(--rg-border); padding: 0 20px; min-height: 58px; display: flex; align-items: center; gap: 14px; position: sticky; top: 0; z-index: 200; } .rg-topbar-title { font-size: 1.15rem; font-weight: 700; letter-spacing: -.3px; white-space: nowrap; margin: 0; } .rg-topbar-sub { font-size: .72rem; color: var(--rg-muted); margin-top: 1px; } .rg-topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; } .rg-back { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 8px; color: var(--rg-muted); } .rg-back:hover { background: var(--rg-hover); color: var(--rg-text); } .rg-content { padding: 18px 20px 32px; flex: 1; width: 100%; max-width: 1500px; margin-inline: auto; } .rg-content-wide { max-width: 1180px; } .rg-content-narrow { max-width: 820px; } @media (max-width: 991.98px) { /* Phones and tablets (2026-10-16): the title keeps at least 150px; actions that don't fit beside it go to a line of their own as one group, and there share the whole width (the title takes all the spare room while they share a line, so they only stretch on their own). A detail page (one with a back arrow) keeps its sub line, on one line. */ .rg-topbar { padding: 8px 12px; min-height: 52px; gap: 8px; flex-wrap: wrap; align-content: center; } .rg-topbar > :where(:not(.rg-back, .rg-topbar-actions, .rg-search)) { flex: 999 1 150px; min-width: 0; } /* (:where: a page can change it) */ .rg-topbar-title { min-width: 0; font-size: 1.02rem; overflow: hidden; text-overflow: ellipsis; } .rg-topbar-sub { display: none; } .rg-back ~ div > .rg-topbar-sub { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rg-back { flex: none; margin-left: -6px; } .rg-topbar-actions { flex: 1 0 auto; max-width: 100%; gap: 6px; } .rg-topbar-actions > :not(.ng-hide) { flex: 1 1 auto; justify-content: center; } .rg-topbar-actions > .dropdown { display: flex; } .rg-topbar-actions > .dropdown > button { flex: 1 1 auto; justify-content: center; } .rg-topbar .rg-search { order: 10; flex: 1 0 100%; max-width: none; padding-bottom: 8px; } .rg-content { padding: 12px 12px 24px; } } .rg-search { flex: 1; max-width: 400px; position: relative; } .rg-search input { width: 100%; height: 36px; border: 1px solid var(--rg-border); border-radius: 8px; background: var(--rg-input-bg); padding: 0 12px 0 36px; font-family: inherit; font-size: .875rem; color: var(--rg-text); outline: none; transition: border-color .15s, box-shadow .15s; } .rg-search input:focus { border-color: var(--rg-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--rg-accent) 12%, transparent); } .rg-search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--rg-muted); font-size: .8rem; pointer-events: none; } .rg-card { background: var(--rg-surface); border: 1px solid var(--rg-border); border-radius: var(--rg-radius); box-shadow: var(--rg-shadow); overflow: hidden; } .rg-card.rg-card-open { overflow: visible; } .rg-card + .rg-card { margin-top: 14px; } .rg-card-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--rg-border); } .rg-card-title { font-size: .95rem; font-weight: 700; margin: 0; } .rg-card-sub { font-size: .78rem; color: var(--rg-muted); } .rg-card-head-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; } .rg-card-body { padding: 16px; } .rg-card-foot { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--rg-border); background: var(--rg-surface-2); } .rg-grid { display: grid; gap: 14px; } .rg-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rg-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } @media (max-width: 991.98px) { .rg-grid-2, .rg-grid-3 { grid-template-columns: 1fr; } } .rg-split { display: grid; grid-template-columns: 1fr; gap: 14px; } @media (min-width: 992px) { .rg-split { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; } } .rg-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 18px; } .rg-stat { background: var(--rg-surface); border: 1px solid var(--rg-border); border-radius: var(--rg-radius); box-shadow: var(--rg-shadow); padding: 16px; display: flex; align-items: center; gap: 14px; color: var(--rg-text); } a.rg-stat:hover, .rg-stat.rg-tappable:hover { box-shadow: var(--rg-shadow-md); color: var(--rg-text); } .rg-stat-icon { width: 40px; height: 40px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: color-mix(in srgb, var(--rg-accent) 10%, transparent); color: var(--rg-accent-text); } .rg-stat-icon.rg-i-warn { background: color-mix(in srgb, var(--rg-warn) 12%, transparent); color: var(--rg-warn-text); } .rg-stat-icon.rg-i-success { background: color-mix(in srgb, var(--rg-success) 12%, transparent); color: var(--rg-success-text); } .rg-stat-icon.rg-i-danger { background: color-mix(in srgb, var(--rg-danger) 12%, transparent); color: var(--rg-danger-text); } .rg-stat-num { font-family: var(--rg-mono); font-size: 1.6rem; font-weight: 500; line-height: 1.1; letter-spacing: -.02em; } .rg-stat-label { font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--rg-muted); margin-top: 2px; } .rg-table-wrap { overflow-x: auto; } .rg-table { width: 100%; border-collapse: collapse; font-size: .875rem; color: var(--rg-text); } .rg-table th { text-align: left; font-size: .7rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--rg-muted); padding: 10px 16px; border-bottom: 1px solid var(--rg-border); white-space: nowrap; background: var(--rg-surface); } .rg-table td { padding: 12px 16px; border-bottom: 1px solid var(--rg-border); vertical-align: middle; } .rg-table tbody tr:last-child td { border-bottom: 0; } .rg-table tbody tr.rg-row-link { cursor: pointer; } .rg-table tbody tr.rg-row-link:hover, .rg-table tbody tr.rg-row-selected { background: var(--rg-bg); } .rg-table .rg-num { text-align: right; font-variant-numeric: tabular-nums; } .rg-mono { font-family: var(--rg-mono); font-size: .8rem; color: var(--rg-muted); } .rg-strong { font-weight: 600; } .rg-muted { color: var(--rg-muted); } .rg-pill { display: inline-block; font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 3px 9px; border-radius: 20px; white-space: nowrap; border: 1px solid transparent; background: var(--rg-slate-100); color: var(--rg-muted); border-color: var(--rg-border); } .rg-pill-blue { background: color-mix(in srgb, var(--rg-accent) 10%, transparent); color: var(--rg-accent-text); border-color: color-mix(in srgb, var(--rg-accent) 22%, transparent); } .rg-pill-warn { background: color-mix(in srgb, var(--rg-warn) 12%, transparent); color: var(--rg-warn-text); border-color: color-mix(in srgb, var(--rg-warn) 25%, transparent); } .rg-pill-success { background: color-mix(in srgb, var(--rg-success) 12%, transparent); color: var(--rg-success-text); border-color: color-mix(in srgb, var(--rg-success) 25%, transparent); } .rg-pill-danger { background: color-mix(in srgb, var(--rg-danger) 12%, transparent); color: var(--rg-danger-text); border-color: color-mix(in srgb, var(--rg-danger) 25%, transparent); } .rg-pill-purple { background: color-mix(in srgb, var(--rg-purple) 12%, transparent); color: var(--rg-purple-text); border-color: color-mix(in srgb, var(--rg-purple) 25%, transparent); } .rg-pill-cyan { background: color-mix(in srgb, var(--rg-cyan) 12%, transparent); color: var(--rg-cyan-text); border-color: color-mix(in srgb, var(--rg-cyan) 28%, transparent); } .rg-empty { padding: 44px 20px; text-align: center; color: var(--rg-muted); } .rg-empty i { font-size: 1.6rem; opacity: .5; display: block; margin-bottom: 10px; } .rg-empty-title { font-weight: 700; color: var(--rg-text); margin-bottom: 4px; } .rg-label { display: block; font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--rg-muted); margin-bottom: 4px; } .rg-input { width: 100%; min-height: 38px; border: 1px solid var(--rg-border); border-radius: 8px; background: var(--rg-input-bg); padding: 8px 12px; font-family: inherit; font-size: .875rem; color: var(--rg-text); outline: none; transition: border-color .15s, box-shadow .15s; } .rg-input:focus { border-color: var(--rg-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--rg-accent) 12%, transparent); } .rg-input[disabled], .rg-input[readonly] { background: var(--rg-bg); color: var(--rg-muted); } textarea.rg-input { resize: vertical; } select.rg-input { appearance: auto; } .rg-mono-input { font-family: var(--rg-mono); letter-spacing: .06em; text-transform: uppercase; } .rg-mono-input::placeholder { font-family: var(--rg-font); letter-spacing: 0; text-transform: none; } .rg-field { margin-bottom: 14px; } .rg-hint { font-size: .76rem; color: var(--rg-muted); margin-top: 4px; } .rg-check { display: inline-flex; align-items: center; gap: 7px; font-size: .84rem; color: var(--rg-text); cursor: pointer; } .rg-check input { accent-color: var(--rg-accent); width: 16px; height: 16px; } @media (max-width: 991.98px) { .rg-input { font-size: 16px; min-height: 44px; } } .rg-toggle-switch { display: inline-flex; align-items: center; gap: 10px; font-size: .84rem; color: var(--rg-text); cursor: pointer; } .rg-toggle-switch > input { position: absolute; width: 1px; height: 1px; clip-path: inset(50%); overflow: hidden; } .rg-toggle-track { position: relative; flex: 0 0 auto; width: 38px; height: 22px; border-radius: 999px; background: var(--rg-slate-300); transition: background .18s ease; } .rg-toggle-track::after { content: ""; position: absolute; inset: 3px auto 3px 3px; width: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(16, 24, 40, .35); transition: transform .18s ease; } .rg-toggle-switch > input:checked + .rg-toggle-track { background: var(--rg-accent); } .rg-toggle-switch > input:checked + .rg-toggle-track::after { transform: translateX(16px); } .rg-toggle-switch > input:focus-visible + .rg-toggle-track { outline: 2px solid var(--rg-accent); outline-offset: 2px; } .rg-btn-primary, .rg-btn-ghost, .rg-btn-danger, .rg-btn-success { display: inline-flex; align-items: center; justify-content: center; gap: 6px; text-decoration: none; height: 36px; padding: 0 15px; border-radius: 8px; font-family: inherit; font-size: .85rem; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background .15s, border-color .15s, box-shadow .15s, transform .1s; } .rg-btn-primary { background: var(--rg-accent); color: var(--rg-on-accent); border: 1px solid var(--rg-accent); } .rg-btn-primary:hover:not(:disabled) { background: var(--rg-accent-hover); border-color: var(--rg-accent-hover); color: var(--rg-on-accent); box-shadow: var(--rg-shadow-md); transform: translateY(-1px); } .rg-btn-success { background: var(--rg-success); color: #fff; border: 1px solid var(--rg-success); } .rg-btn-success:hover:not(:disabled) { background: color-mix(in srgb, var(--rg-success) 85%, #000); color: #fff; } .rg-btn-ghost { background: var(--rg-surface); color: var(--rg-text); border: 1px solid var(--rg-border); } .rg-btn-ghost:hover:not(:disabled) { background: var(--rg-bg); border-color: var(--rg-slate-300); color: var(--rg-text); } .rg-btn-danger { background: color-mix(in srgb, var(--rg-danger) 6%, transparent); color: var(--rg-danger-text); border: 1px solid color-mix(in srgb, var(--rg-danger) 35%, transparent); } .rg-btn-danger:hover:not(:disabled) { background: var(--rg-danger); border-color: var(--rg-danger); color: #fff; } .rg-btn-primary:disabled, .rg-btn-ghost:disabled, .rg-btn-danger:disabled, .rg-btn-success:disabled, .rg-btn-primary.disabled, .rg-btn-ghost.disabled, .rg-btn-danger.disabled, .rg-btn-success.disabled { opacity: .45; cursor: not-allowed; box-shadow: none; transform: none; pointer-events: none; } .rg-btn-mini { height: 26px; padding: 0 9px; font-size: .74rem; } .rg-btn-sm { height: 32px; padding: 0 12px; font-size: .8rem; } .rg-btn-icon { width: 36px; padding: 0; } .rg-btn-link { border: 0; background: none; padding: 0; color: var(--rg-accent-text); font: inherit; font-weight: 600; cursor: pointer; } .rg-alert { display: flex; align-items: flex-start; gap: 9px; border-radius: 8px; padding: 10px 13px; font-size: .83rem; line-height: 1.45; border: 1px solid transparent; margin-bottom: 12px; } .rg-alert i { margin-top: 2px; flex-shrink: 0; } .rg-alert-danger { background: color-mix(in srgb, var(--rg-danger) 7%, transparent); border-color: color-mix(in srgb, var(--rg-danger) 25%, transparent); color: var(--rg-danger-ink); } .rg-alert-warn { background: color-mix(in srgb, var(--rg-warn) 8%, transparent); border-color: color-mix(in srgb, var(--rg-warn) 25%, transparent); color: var(--rg-warn-ink); } .rg-alert-success { background: color-mix(in srgb, var(--rg-success) 8%, transparent); border-color: color-mix(in srgb, var(--rg-success) 25%, transparent); color: var(--rg-success-ink); } .rg-alert-info { background: color-mix(in srgb, var(--rg-accent) 7%, transparent); border-color: color-mix(in srgb, var(--rg-accent) 22%, transparent); color: var(--rg-info-ink); } /* The bottom line is a shadow, not a border: a tab overlapping a border by 1px made the scrolling bar show a scrollbar. */ .rg-tabs { display: flex; gap: 6px; padding: 10px 16px 0; box-shadow: inset 0 -1px 0 var(--rg-border); overflow-x: auto; overflow-y: hidden; scrollbar-width: none; } .rg-tabs::-webkit-scrollbar { display: none; } /* rg-sticky-tabs (js/vmp_shell.js): stays under the page's top bar; the right edge fades while tabs are off to the side */ [rg-sticky-tabs] { position: sticky; z-index: 150; background: var(--rg-bg); } .rg-tabs-ink { position: absolute; left: 0; bottom: 0; z-index: 1; height: 2px; border-radius: 2px 2px 0 0; background: var(--rg-accent); opacity: 0; pointer-events: none; transition: transform .3s cubic-bezier(.22, 1, .36, 1), width .3s cubic-bezier(.22, 1, .36, 1), opacity .15s ease; } .rg-tabs.rg-has-ink .rg-tabs-ink { opacity: 1; } @media (prefers-reduced-motion: reduce) { .rg-tabs-ink { transition: opacity .15s ease; } } .rg-tabs.rg-tabs-more { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent); } .rg-tab-count { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 9px; font-size: .7rem; font-weight: 700; line-height: 1.5; font-variant-numeric: tabular-nums; background: var(--rg-slate-100); color: var(--rg-muted); } .rg-tab-active .rg-tab-count { background: var(--rg-accent-soft); color: var(--rg-accent-text); } .rg-tab { border: 1px solid transparent; border-bottom: 0; background: transparent; color: var(--rg-muted); font-family: inherit; font-size: .8rem; font-weight: 600; padding: 8px 14px; border-radius: 8px 8px 0 0; cursor: pointer; white-space: nowrap; text-decoration: none; } .rg-tab:hover { color: var(--rg-text); background: var(--rg-bg); } .rg-tab.rg-tab-active, .rg-tab.active { color: var(--rg-accent-text); background: var(--rg-surface); border-color: var(--rg-border); border-bottom: 1px solid var(--rg-surface); } .rg-seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 9px; background: var(--rg-slate-100); border: 1px solid var(--rg-border); } .rg-seg button { border: 0; background: none; color: var(--rg-muted); font: inherit; font-size: .8rem; font-weight: 600; padding: 5px 11px; border-radius: 6px; cursor: pointer; } .rg-seg button:hover { color: var(--rg-text); } .rg-seg button.on, .rg-seg button.active { background: var(--rg-surface); color: var(--rg-text); box-shadow: var(--rg-shadow); } .rg-modal-backdrop { position: fixed; inset: 0; z-index: 1900; display: flex; align-items: center; justify-content: center; padding: calc(20px + var(--safe-t)) 16px calc(20px + var(--safe-b)); background: var(--rg-overlay); animation: rg-fade .12s ease-out; } .rg-modal { display: flex; flex-direction: column; width: 100%; max-width: 880px; max-height: 100%; background: var(--rg-bg); border-radius: 14px; border: 1px solid var(--rg-popup-border); box-shadow: var(--rg-shadow-pop); overflow: hidden; animation: rg-rise .16s ease-out; color: var(--rg-text); } .rg-modal-head { flex: none; background: var(--rg-surface); border-bottom: 1px solid var(--rg-border); padding: 0 16px; min-height: 58px; display: flex; align-items: center; gap: 14px; } .rg-modal-title { font-size: 1.05rem; font-weight: 700; letter-spacing: -.2px; margin: 0; } .rg-modal-sub { font-size: .72rem; color: var(--rg-muted); margin-top: 1px; } .rg-modal-head-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; } .rg-modal-body { flex: 1 1 auto; overflow-y: auto; padding: 16px; } .rg-modal-foot { flex: none; display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 12px 16px; background: var(--rg-surface); border-top: 1px solid var(--rg-border); } @media (max-width: 767.98px) { .rg-modal-backdrop { padding: 0; } .rg-modal { max-width: none; height: 100%; border-radius: 0; border: 0; } } .rg-dl { display: grid; grid-template-columns: max-content 1fr; gap: 8px 16px; margin: 0; font-size: .86rem; } .rg-dl dt { color: var(--rg-muted); font-weight: 500; } .rg-dl dd { margin: 0; color: var(--rg-text); min-width: 0; overflow-wrap: anywhere; } /* ── Bridge: older markup picks up the new look ─────────── */ /* Inputs */ .vmp-input, .vmp-select, textarea.vmp-input, .vmp-input[type=date], input.vmp-input:not([type=date]) { height: auto; min-height: 38px; width: 100%; background: var(--rg-input-bg) !important; color: var(--rg-text); border: 1px solid var(--rg-border); border-radius: 8px; padding: 8px 12px; font-family: inherit; font-size: .875rem; outline: none; color-scheme: inherit; transition: border-color .15s, box-shadow .15s; } .vmp-select { appearance: auto; -webkit-appearance: auto; background-image: none !important; padding-right: 8px; } .vmp-select option { background: var(--rg-surface); color: var(--rg-text); } .vmp-input:hover, .vmp-select:hover { background: var(--rg-input-bg) !important; border-color: var(--rg-slate-300); } .vmp-input:focus, .vmp-select:focus, .vmp-input:active, .vmp-select:active { background: var(--rg-input-bg) !important; border-color: var(--rg-accent) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--rg-accent) 12%, transparent); } .vmp-input:disabled, .vmp-select:disabled { background: var(--rg-bg) !important; color: var(--rg-muted); filter: none; pointer-events: none; } .vmp-group { display: flex; } .vmp-group-text { display: flex; align-items: center; padding: 0 12px; color: var(--rg-muted); background: var(--rg-surface-2); border: 1px solid var(--rg-border); border-radius: 8px; white-space: nowrap; } .vmp-group > :not(:first-child) { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; margin-left: -1px; } .vmp-group > :not(:last-child) { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; } input[type=text], input[type=password], input[type=email], input[type=date], select { color: var(--rg-text); background-color: var(--rg-input-bg); } /* Buttons */ .vmp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; padding: 0 14px; border-radius: 8px; font-family: inherit; font-size: .85rem; font-weight: 600; background: var(--rg-surface) !important; color: var(--rg-text); border: 1px solid var(--rg-border); text-decoration: none; cursor: pointer; white-space: nowrap; transition: background .15s, border-color .15s; } .vmp-btn:hover { background: var(--rg-bg) !important; color: var(--rg-text); border-color: var(--rg-slate-300); } .vmp-btn.vmp-btn-primary, .vmp-btn.text-white.vmp-btn-primary { background: var(--rg-accent) !important; border-color: var(--rg-accent); color: #fff !important; } .vmp-btn.vmp-btn-primary:hover { background: var(--rg-accent-hover) !important; border-color: var(--rg-accent-hover); } .vmp-btn.vmp-btn-success { background: var(--rg-success) !important; border-color: var(--rg-success); color: #fff !important; } .vmp-btn.vmp-btn-success:hover { background: color-mix(in srgb, var(--rg-success) 85%, #000) !important; } .vmp-btn.vmp-btn-warning { background: color-mix(in srgb, var(--rg-warn) 10%, var(--rg-surface)) !important; border-color: color-mix(in srgb, var(--rg-warn) 40%, transparent); color: var(--rg-warn-text) !important; } .vmp-btn.vmp-btn-danger { background: color-mix(in srgb, var(--rg-danger) 6%, var(--rg-surface)) !important; border-color: color-mix(in srgb, var(--rg-danger) 35%, transparent); color: var(--rg-danger-text) !important; } .vmp-btn.vmp-btn-danger:hover { background: var(--rg-danger) !important; border-color: var(--rg-danger); color: #fff !important; } .vmp-btn:disabled, .vmp-btn.disabled { opacity: .45; pointer-events: none; filter: none; } .nav-item .vmp-btn { border-radius: 8px; } /* Bootstrap, tuned to the tokens */ .btn { font-family: inherit; font-weight: 600; font-size: .85rem; border-radius: 8px; } .btn-primary { --bs-btn-bg: var(--rg-accent); --bs-btn-border-color: var(--rg-accent); --bs-btn-hover-bg: var(--rg-accent-hover); --bs-btn-hover-border-color: var(--rg-accent-hover); --bs-btn-active-bg: var(--rg-accent-hover); --bs-btn-disabled-bg: var(--rg-accent); --bs-btn-disabled-border-color: var(--rg-accent); } .btn-outline-primary { --bs-btn-color: var(--rg-accent-text); --bs-btn-border-color: var(--rg-accent); --bs-btn-hover-bg: var(--rg-accent); --bs-btn-hover-border-color: var(--rg-accent); } .btn-secondary, .btn-light, .btn-dark, .btn-outline-secondary, .btn-outline-light, .btn-outline-dark { --bs-btn-bg: var(--rg-surface); --bs-btn-color: var(--rg-text); --bs-btn-border-color: var(--rg-border); --bs-btn-hover-bg: var(--rg-bg); --bs-btn-hover-color: var(--rg-text); --bs-btn-hover-border-color: var(--rg-slate-300); --bs-btn-active-bg: var(--rg-bg); --bs-btn-active-color: var(--rg-text); --bs-btn-active-border-color: var(--rg-slate-300); --bs-btn-disabled-bg: var(--rg-surface); --bs-btn-disabled-color: var(--rg-muted); --bs-btn-disabled-border-color: var(--rg-border); } .form-control, .form-select { background-color: var(--rg-input-bg); color: var(--rg-text); border-color: var(--rg-border); border-radius: 8px; font-size: .875rem; } .form-control:focus, .form-select:focus { background-color: var(--rg-input-bg); color: var(--rg-text); border-color: var(--rg-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--rg-accent) 12%, transparent); } .form-control:disabled, .form-control[readonly] { background-color: var(--rg-bg); } .form-label { font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--rg-muted); margin-bottom: 4px; } .input-group-text { background: var(--rg-surface-2); color: var(--rg-muted); border-color: var(--rg-border); } .form-check-input:checked { background-color: var(--rg-accent); border-color: var(--rg-accent); } .table { --bs-table-bg: transparent; --bs-table-color: var(--rg-text); --bs-table-border-color: var(--rg-border); --bs-table-striped-bg: var(--rg-hover); --bs-table-hover-bg: var(--rg-hover); font-size: .875rem; } .table > thead th { font-size: .7rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--rg-muted); } .table-dark { --bs-table-bg: var(--rg-surface); --bs-table-color: var(--rg-text); --bs-table-border-color: var(--rg-border); --bs-table-striped-bg: var(--rg-hover); --bs-table-hover-bg: var(--rg-hover); --bs-table-hover-color: var(--rg-text); --bs-table-striped-color: var(--rg-text); } /* Pop-up windows: Bootstrap's .modal drawn as Shop Manager Pro's rg-modal. A surface head (58px, title + sub line + close), the body on the page grey, a surface foot with the actions on the right. Escape and a press-and-release on the backdrop close it (Bootstrap); the first field gets focus (js/vmp_shell.js). Full screen on phones. Set only max-width per window, nothing else. */ .modal { background: var(--rg-overlay); } .modal-dialog { margin-top: 20px; margin-bottom: 20px; } .modal.fade .modal-dialog { transform: translateY(8px) scale(.98); transition: transform .16s ease-out; } .modal.show .modal-dialog { transform: none; } .modal-content { background: var(--rg-bg); color: var(--rg-text); border: 1px solid var(--rg-popup-border); border-radius: 14px; box-shadow: var(--rg-shadow-pop); overflow: hidden; } .modal-header { flex: none; display: flex; align-items: center; gap: 14px; min-height: 58px; padding: 10px 16px; background: var(--rg-surface); border-bottom: 1px solid var(--rg-border); border-radius: 0; } .modal-header > :first-child { min-width: 0; } .modal-title, .modal-header h1, .modal-header h2 { font-size: 1.05rem; font-weight: 700; letter-spacing: -.2px; margin: 0; line-height: 1.3; } .modal-sub, .modal-header p { font-size: .72rem; color: var(--rg-muted); margin: 1px 0 0; } .modal-body { padding: 16px; } .modal-footer { flex: none; display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 12px 16px; background: var(--rg-surface); border-top: 1px solid var(--rg-border); border-radius: 0; } .modal-footer > * { margin: 0; } .modal-footer .spacer { flex: 1; } /* The close button: the same small square in every window */ .modal-header .btn-close, .modal-header .rg-modal-x, .modal-header .close { margin: 0 0 0 auto; flex: none; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 9px; background: none; opacity: 1; color: var(--rg-muted); font-size: 1.25rem; line-height: 1; cursor: pointer; box-shadow: none; } .modal-header .btn-close { background: none; } .modal-header .btn-close::before { content: "\00d7"; font-size: 1.5rem; } .modal-header .btn-close:hover, .modal-header .rg-modal-x:hover, .modal-header .close:hover { background: var(--rg-hover); color: var(--rg-text); } @media (max-width: 767.98px) { .modal-dialog, .modal-dialog.modal-dialog-centered { margin: 0; padding: 0; max-width: none !important; min-height: 100%; height: 100%; align-items: stretch; } .modal-content { border-radius: 0; border: 0; min-height: 100%; } .modal-dialog-scrollable .modal-content { max-height: 100%; } } @media (prefers-reduced-motion: reduce) { .modal.fade .modal-dialog { transition: none; transform: none; } } /* Confirm / ask / tell: the Dialog service (js/vmp_shell.js), in place of the browser's alert and confirm */ .rg-dialog-backdrop { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; padding: calc(20px + var(--safe-t)) 16px calc(20px + var(--safe-b)); background: var(--rg-overlay); animation: rg-fade .12s ease-out; } .rg-dialog { width: 100%; max-width: 460px; max-height: 100%; overflow-y: auto; background: var(--rg-surface); color: var(--rg-text); border-radius: 14px; border: 1px solid var(--rg-popup-border); box-shadow: var(--rg-shadow-pop); animation: rg-rise .16s ease-out; } .rg-dialog-head { display: flex; align-items: center; gap: 10px; padding: 16px 18px 0; font-size: 1rem; font-weight: 700; } .rg-dialog-head i { color: var(--rg-accent-text); } .rg-dialog-head i.rg-dialog-danger { color: var(--rg-danger-text); } .rg-dialog-body { padding: 12px 18px 4px; } .rg-dialog-message { font-size: .88rem; line-height: 1.6; white-space: pre-line; margin: 0; } .rg-dialog-error { margin-top: 6px; font-size: .78rem; color: var(--rg-danger-text); } .rg-dialog-body .rg-input { margin-top: 12px; } .rg-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 18px 16px; } @media (prefers-reduced-motion: reduce) { .rg-dialog, .rg-dialog-backdrop { animation: none; } } /* ── Toasts (Toast / in js/vmp_shell.js), top right under the page's own bar; Shop Manager Pro's look ── */ .rg-toasts { position: fixed; z-index: 1070; top: calc(var(--safe-t) + 118px); right: calc(18px + var(--safe-r)); display: flex; flex-direction: column; gap: 8px; width: 330px; max-width: calc(100vw - 32px); pointer-events: none; } .rg-toast { pointer-events: auto; display: flex; align-items: center; gap: 11px; padding: 11px 10px 11px 12px; background: var(--rg-surface); border: 1px solid var(--rg-border); border-left: 3px solid var(--rg-accent); border-radius: 11px; box-shadow: 0 12px 32px rgba(16, 24, 40, .18); animation: rg-toast-in .2s ease-out; } .rg-toast-success { border-left-color: var(--rg-success); } .rg-toast-error { border-left-color: var(--rg-danger); } @keyframes rg-toast-in { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } } .rg-toast-icon { display: flex; align-items: center; justify-content: center; flex: none; width: 28px; height: 28px; border-radius: 8px; font-size: .78rem; background: color-mix(in srgb, var(--rg-accent) 12%, transparent); color: var(--rg-accent-text); } .rg-toast-success .rg-toast-icon { background: color-mix(in srgb, var(--rg-success) 14%, transparent); color: var(--rg-success-text); } .rg-toast-error .rg-toast-icon { background: color-mix(in srgb, var(--rg-danger) 12%, transparent); color: var(--rg-danger-text); } .rg-toast-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1 1 auto; } .rg-toast-title { font-size: .85rem; font-weight: 600; color: var(--rg-text); } .rg-toast-body { font-size: .78rem; color: var(--rg-muted); } .rg-toast-x { flex: none; border: 0; background: transparent; color: var(--rg-muted); font-size: .8rem; cursor: pointer; padding: 4px 6px; border-radius: 6px; } .rg-toast-x:hover { color: var(--rg-text); background: var(--rg-hover); } @media (max-width: 991.98px) { .rg-toasts { top: calc(var(--safe-t) + 104px); right: 12px; left: 12px; width: auto; max-width: none; } } @media (prefers-reduced-motion: reduce) { .rg-toast { animation: none; } } .card { background: var(--rg-surface); color: var(--rg-text); border: 1px solid var(--rg-border); border-radius: var(--rg-radius); box-shadow: var(--rg-shadow); } .list-group-item { background: var(--rg-surface); color: var(--rg-text); border-color: var(--rg-border); } .nav-tabs { border-color: var(--rg-border); } .nav-tabs .nav-link { color: var(--rg-muted); font-weight: 600; font-size: .85rem; } .nav-tabs .nav-link.active { color: var(--rg-accent-text); background: var(--rg-surface); border-color: var(--rg-border) var(--rg-border) var(--rg-surface); } .text-muted { color: var(--rg-muted) !important; } .bg-dark, .bg-black { background-color: var(--rg-surface) !important; color: var(--rg-text); } .bg-white, .bg-light { background-color: var(--rg-surface) !important; } .text-white, .text-light { color: var(--rg-text) !important; } .text-dark, .text-black { color: var(--rg-text) !important; } .border, .border-top, .border-bottom, .border-start, .border-end { border-color: var(--rg-border) !important; } /* Coloured surfaces keep white text */ .btn-primary.text-white, .btn-success.text-white, .btn-danger.text-white, .bg-primary .text-white, .bg-success .text-white, .bg-danger .text-white, .badge.text-white, .bg-primary.text-white, .bg-success.text-white, .bg-danger.text-white, .bg-info.text-white, .bg-secondary.text-white { color: #fff !important; } /* Dropdowns inside pages (the bar's menus are .vmp-menu) */ .dropdown-menu { background: var(--rg-surface); border: 1px solid var(--rg-popup-border); border-radius: 10px; box-shadow: var(--rg-shadow-md); padding: 6px; backdrop-filter: none; font-size: .875rem; } .dropdown-item { color: var(--rg-text); border-radius: 6px; padding: 7px 10px; } /* Every dropdown (the bar's menus, the ⋯ menus) slides up into place and back down as it closes; near the top of the screen it slides down instead (.rg-slide-down, set by js/vmp_shell.js). Vertical only. `translate`, not transform: Popper positions with transform. Closing: vmp_shell.js holds Bootstrap's hide until the slide ends. */ @keyframes rg-menu-in { from { opacity: 0; translate: 0 8px; } } @keyframes rg-menu-out { to { opacity: 0; translate: 0 8px; } } @keyframes rg-menu-in-down { from { opacity: 0; translate: 0 -8px; } } @keyframes rg-menu-out-down { to { opacity: 0; translate: 0 -8px; } } .dropdown-menu.show { animation: rg-menu-in .16s cubic-bezier(.2, .8, .2, 1); } .dropdown-menu.show.rg-slide-down { animation-name: rg-menu-in-down; } .dropdown-menu.is-closing { animation: rg-menu-out .11s ease-in forwards; pointer-events: none; } .dropdown-menu.is-closing.rg-slide-down { animation-name: rg-menu-out-down; } @media (prefers-reduced-motion: reduce) { .dropdown-menu.show, .dropdown-menu.is-closing { animation: none; } } .dropdown-item:hover, .dropdown-item:focus { color: var(--rg-text); background: var(--rg-hover); } .dropdown-item.active, .dropdown-item:active { color: var(--rg-accent-text); background: var(--rg-accent-soft); } .dropdown-divider { border-color: var(--rg-border); } .dropdown-header { font-size: .62rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--rg-muted); } /* Old page wrappers */ .wrapper { box-sizing: border-box; min-height: 100%; background: var(--rg-bg); color: var(--rg-text); } .wrapper.home, .wrapper.dashboard, .wrapper.account, .wrapper.changelog { padding: 0; } .wrapper.dash, .wrapper.logsheet, .wrapper.credit-apps, .wrapper.inventory { background: var(--rg-bg); } .glass-blur { background: var(--rg-surface); border: 1px solid var(--rg-border); box-shadow: var(--rg-shadow); backdrop-filter: none; border-radius: var(--rg-radius); color: var(--rg-text); } .glass-blur::before { display: none; } /* angular-loading-bar sits under the top bar */ #loading-bar .bar { background: var(--rg-accent); height: 2px; } #loading-bar .peg { box-shadow: 0 0 10px var(--rg-accent), 0 0 5px var(--rg-accent); } #loading-bar-spinner { display: none; } @media print { .vmp-nav, .vmp-appbar, .vmp-tabs, .vmp-more-sheet, .vmp-more-overlay { display: none !important; } .vmp-app { height: auto; display: block; } .vmp-content { overflow: visible; } } /* ── Blur effects (Settings › Preferences; ) ─────────── Off by default. On: the page behind pop-ups blurs a little, and menus, search and the sticky page header become frosted glass. */ :root[data-blur="on"] .modal, :root[data-blur="on"] .rg-dialog-backdrop, :root[data-blur="on"] .vmp-more-overlay, :root[data-blur="on"] .modals { backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); } :root:not([data-blur="on"]) .modals { backdrop-filter: none; -webkit-backdrop-filter: none; } /* index.php's old overlay blurred always */ :root[data-blur="on"] .vmp-more-sheet { background: color-mix(in srgb, var(--vmp-menu-bg) 80%, transparent); backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4); } /* The bar's menus: clearly see-through glass (at 80% the dark navy looked solid, worst on the OLED theme's black); the blur also darkens what's behind so the white text reads over a white page */ :root[data-blur="on"] .dropdown-menu.vmp-menu { background: color-mix(in srgb, var(--vmp-menu-bg) 45%, transparent); backdrop-filter: blur(18px) saturate(1.8) brightness(.62); -webkit-backdrop-filter: blur(18px) saturate(1.8) brightness(.62); } /* Lighter text so it reads over a white page showing through */ :root[data-blur="on"] .vmp-menu .dropdown-item { color: #f3f4f6; } :root[data-blur="on"] .vmp-menu .dropdown-item i { color: #cbd5e1; } :root[data-blur="on"] .vmp-menu .vmp-menu-label { color: #cbd5e1; } :root[data-blur="on"] .dropdown-menu:not(.vmp-menu), :root[data-blur="on"] .vmp-bell-panel, :root[data-blur="on"] .sp-panel { background: color-mix(in srgb, var(--rg-surface) 82%, transparent); backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4); } :root[data-blur="on"] .rg-cmdk { background: color-mix(in srgb, var(--rg-surface) 55%, transparent); backdrop-filter: blur(12px) saturate(1.4); -webkit-backdrop-filter: blur(12px) saturate(1.4); } /* The top bar's glass is a layer behind its contents, not the bar itself: an element with backdrop-filter is the backdrop for everything inside it, so the Print and ⋯ menus in a top bar blurred only the bar, not the page. */ :root[data-blur="on"] .rg-topbar { background: transparent; } :root[data-blur="on"] .rg-topbar::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: color-mix(in srgb, var(--rg-surface) 82%, transparent); backdrop-filter: blur(8px) saturate(1.5); -webkit-backdrop-filter: blur(8px) saturate(1.5); } @media (prefers-reduced-transparency: reduce) { :root[data-blur="on"] *, :root[data-blur="on"] .rg-topbar::before { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } :root[data-blur="on"] .rg-cmdk { background: var(--rg-surface); } } /* ── Select dropdowns (js/vmp_shell.js), from Shop Manager Pro ─────────────── */ .rg-select-native { position: absolute !important; min-width: 0 !important; max-width: 1px !important; width: 1px !important; height: 1px !important; min-height: 0 !important; padding: 0 !important; border: 0 !important; clip-path: inset(50%); overflow: hidden; white-space: nowrap; opacity: 0; pointer-events: none; } .rg-select-btn { display: flex; align-items: center; gap: 8px; text-align: left; cursor: pointer; line-height: 1.3; } .rg-select-btn:disabled { cursor: default; opacity: .6; } .rg-select-btn:hover:not(:disabled) { border-color: color-mix(in srgb, var(--rg-accent) 45%, var(--rg-border)); } .rg-select-btn.is-open { border-color: var(--rg-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--rg-accent) 12%, transparent); } .rg-select-btn.ng-invalid { border-color: var(--rg-danger); } .rg-select-text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rg-select-btn.is-placeholder .rg-select-text { color: var(--rg-placeholder); } .rg-select-caret { flex: 0 0 auto; font-size: .68rem; color: var(--rg-muted); transition: transform .15s; } .rg-select-btn.is-open .rg-select-caret { transform: rotate(180deg); color: var(--rg-accent-text); } .rg-select-pop { position: fixed; z-index: 3100; /* over the old Plate Manager overlay (.modals, 3000) */ display: flex; flex-direction: column; min-width: 180px; border: 1px solid var(--rg-popup-border); border-radius: 10px; background: var(--rg-surface); box-shadow: var(--rg-shadow-md); overflow: hidden; animation: rg-select-in .1s ease-out; } @keyframes rg-select-in { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .rg-select-pop { animation: none; } } .rg-select-find { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; margin: 6px; padding: 0 10px; height: 34px; border: 1px solid var(--rg-border); border-radius: 8px; background: var(--rg-input-bg); color: var(--rg-muted); font-size: .78rem; } .rg-select-find:focus-within { border-color: var(--rg-accent); } .rg-select-find input { flex: 1 1 auto; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--rg-text); font-size: .86rem; } .rg-select-find input::placeholder { color: var(--rg-placeholder); } .rg-select-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 4px; } .rg-select-group { padding: 8px 10px 4px; font-size: .64rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--rg-muted); } .rg-select-opt { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 7px; color: var(--rg-text); font-size: .86rem; cursor: pointer; } .rg-select-opt > span { flex: 1 1 auto; min-width: 0; } .rg-select-opt.is-hi { background: var(--rg-hover); } .rg-select-opt.is-on { color: var(--rg-accent-text); font-weight: 600; } .rg-select-opt.is-on > .fa { font-size: .72rem; } .rg-select-opt.is-blank > span { color: var(--rg-muted); } .rg-select-sub { display: block; margin-top: 1px; font-size: .74rem; font-weight: 400; color: var(--rg-muted); overflow-wrap: anywhere; } .rg-select-opt.is-disabled { opacity: .45; cursor: default; } .rg-select-none { padding: 14px 10px; text-align: center; font-size: .8rem; color: var(--rg-muted); } @media (max-width: 991.98px) { .rg-select-opt { padding: 11px 12px; font-size: 1rem; } .rg-select-find input { font-size: 16px; } } /* VMP: the button takes the field look of the select it replaces */ button.rg-select-btn.rg-input, button.rg-select-btn.f-input { width: 100%; color: var(--rg-text); font-family: inherit; text-align: left; } button.rg-select-btn.d-inline, button.rg-select-btn.d-inline-block { display: inline-flex !important; width: auto; min-width: 140px; } /* The select's screen-size display classes (d-md-inline-block...) would make the button a block, and the arrow would sit right after the text instead of at the right edge: keep it a flex box at every size */ button.rg-select-btn.d-block { display: flex !important; } @media (min-width: 576px) { button.rg-select-btn.d-sm-inline-block, button.rg-select-btn.d-sm-inline { display: inline-flex !important; } button.rg-select-btn.d-sm-block { display: flex !important; } } @media (min-width: 768px) { button.rg-select-btn.d-md-inline-block, button.rg-select-btn.d-md-inline { display: inline-flex !important; } button.rg-select-btn.d-md-block { display: flex !important; } } @media (min-width: 992px) { button.rg-select-btn.d-lg-inline-block, button.rg-select-btn.d-lg-inline { display: inline-flex !important; } button.rg-select-btn.d-lg-block { display: flex !important; } } @media (min-width: 1200px) { button.rg-select-btn.d-xl-inline-block, button.rg-select-btn.d-xl-inline { display: inline-flex !important; } button.rg-select-btn.d-xl-block { display: flex !important; } } @media (min-width: 1400px) { button.rg-select-btn.d-xxl-inline-block, button.rg-select-btn.d-xxl-inline { display: inline-flex !important; } button.rg-select-btn.d-xxl-block { display: flex !important; } } :root[data-blur="on"] .rg-select-pop { background: color-mix(in srgb, var(--rg-surface) 82%, transparent); backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4); } /* What's new: the dot on the account menu's item and button (js/vmp_shell.js hasWhatsNew) */ .vmp-new-dot { display: inline-block; width: 8px; height: 8px; margin-left: auto; border-radius: 50%; background: var(--rg-accent); flex: none; } .vmp-account-btn { position: relative; } .vmp-new-dot-btn { position: absolute; top: -2px; right: -2px; margin: 0; width: 11px; height: 11px; box-shadow: 0 0 0 2px var(--rg-nav-bg); } /* ── The version, bottom-left of every page (index.php, api/version.php), as Shop Manager Pro shows it ── */ /* "A new version is ready · Reload" (index.php, vmpCheckBuild) */ .vmp-update { position: fixed; left: 50%; translate: -50% 0; bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 3001; display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 14px; border-radius: 999px; background: var(--rg-surface); color: var(--rg-text); border: 1px solid var(--rg-border); box-shadow: var(--rg-shadow-md); font-size: .84rem; width: max-content; max-width: calc(100vw - 24px); animation: rg-menu-in .2s ease-out; } .vmp-update i { color: var(--rg-accent-text); flex: none; } .vmp-update span { flex: 1 1 auto; min-width: 0; line-height: 1.35; } .vmp-update .rg-btn-primary { flex: none; } /* A phone (2026-10-16): a card across the screen, 12px in from each side, above the tab bar and the version badge (and a vehicle's save bar). Centred with left 50% it could only use the right half of the screen: the text wrapped to five lines. */ @media (max-width: 767.98px) { .vmp-update { left: 12px; right: 12px; translate: none; width: auto; max-width: none; bottom: calc(106px + env(safe-area-inset-bottom)); padding: 10px 10px 10px 14px; border-radius: 14px; gap: 12px; } .vmp-update i { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--rg-accent-soft); } body:has(.veh-savebar:not(.ng-hide)) .vmp-update { bottom: calc(168px + env(safe-area-inset-bottom)); } } .vmp-version { position: fixed; left: 12px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 3000; pointer-events: none; padding: 2px 9px; border-radius: 999px; font: 500 11px/1.6 var(--rg-mono); color: var(--rg-muted); background: color-mix(in srgb, var(--rg-surface) 85%, transparent); border: 1px solid var(--rg-border); } .vmp-version.is-dev { font-weight: 700; color: var(--rg-warn-ink); background: color-mix(in srgb, var(--rg-warn) 30%, var(--rg-surface)); border-color: color-mix(in srgb, var(--rg-warn) 55%, transparent); box-shadow: var(--rg-shadow); } @media (max-width: 767.98px) { .vmp-version { bottom: calc(74px + env(safe-area-inset-bottom)); } } @media print { .vmp-version { display: none; } } /* ── Trim library (js/trim_library.js): the spec sheet, and the trim lookup window ── */ .tl-spec { columns: 2 260px; column-gap: 18px; } .tl-spec-group { break-inside: avoid; margin: 0 0 14px; } .tl-spec-group h4 { display: flex; align-items: center; gap: 7px; margin: 0 0 6px; font-size: .74rem; font-weight: 700; color: var(--rg-muted); text-transform: none; letter-spacing: .1px; } .tl-spec-group h4 .fa { width: 14px; text-align: center; } .tl-spec-group ul { list-style: none; margin: 0; padding: 0; } .tl-spec-group li { display: flex; align-items: baseline; gap: 8px; padding: 3px 0; font-size: .85rem; color: var(--rg-text); } .tl-spec-group li .fa-check { flex: none; font-size: .66rem; color: var(--rg-success-text); } .tl-spec-group li span { flex: 1 1 auto; min-width: 0; } .tl-spec-group li small { flex: none; font-size: .72rem; color: var(--rg-muted); font-variant-numeric: tabular-nums; } .tl-spec-group li.is-muted { opacity: .55; } .tl-spec-empty, .tl-msg, .tl-hint { font-size: .84rem; color: var(--rg-muted); } .tl-msg { display: flex; align-items: center; gap: 8px; padding: 10px 2px; } .tl-hint { margin: 0 0 10px; font-size: .76rem; } .tl-find { display: flex; align-items: center; gap: 8px; margin: 0; height: 38px; padding: 0 10px; border: 1px solid var(--rg-border); border-radius: 8px; background: var(--rg-input-bg); color: var(--rg-muted); font-size: .8rem; } .tl-find:focus-within { border-color: var(--rg-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--rg-accent) 12%, transparent); } .tl-find input { flex: 1 1 auto; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--rg-text); font-size: .88rem; } @media (max-width: 767.98px) { .tl-find input { font-size: 16px; } } .tl-list-head { margin: 14px 2px 4px; font-size: .7rem; font-weight: 700; color: var(--rg-muted); } .tl-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 8px; background: none; color: var(--rg-text); font: inherit; font-size: .86rem; text-align: left; cursor: pointer; } .tl-row:hover { background: var(--rg-hover); } .tl-row.is-on { background: var(--rg-accent-soft); color: var(--rg-accent-text); } .tl-row .tl-row-main { flex: 1 1 auto; min-width: 0; font-weight: 600; } .tl-row small { display: block; font-weight: 500; color: var(--rg-muted); font-size: .74rem; } .tl-row .fa-chevron-right { color: var(--rg-muted); font-size: .7rem; } .tl-detail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 14px; } .tl-detail-head b { display: block; font-size: 1rem; color: var(--rg-text); } .tl-detail-head span { font-size: .78rem; color: var(--rg-muted); } .tl-lookup { max-width: 960px; height: min(720px, 100%); } .tl-lookup-body { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: 300px minmax(0, 1fr); } .tl-lookup-list { padding: 14px; overflow-y: auto; border-right: 1px solid var(--rg-border); background: var(--rg-surface); } .tl-lookup-detail { padding: 16px; overflow-y: auto; } .tl-lookup .tl-back { display: none; } @media (max-width: 767.98px) { .tl-lookup-body { grid-template-columns: minmax(0, 1fr); } .tl-lookup-list { border-right: 0; } .tl-lookup-body.has-sel .tl-lookup-list, .tl-lookup-body:not(.has-sel) .tl-lookup-detail { display: none; } .tl-lookup .tl-back:not(.ng-hide) { display: inline-flex; } } /* ── Dealer plates (js/plates.js): a plate as a tag, and the plate window ── */ .pl-tag { display: inline-flex; align-items: center; gap: 5px; flex: none; padding: 2px 8px; border: 1.5px solid var(--rg-border-strong, var(--rg-slate-300)); border-radius: 6px; background: var(--rg-surface); color: var(--rg-text); font-family: var(--rg-mono); font-size: .78rem; font-weight: 700; letter-spacing: .04em; white-space: nowrap; } .pl-tag.is-out { border-color: color-mix(in srgb, var(--rg-warn) 60%, transparent); background: color-mix(in srgb, var(--rg-warn) 10%, var(--rg-surface)); color: var(--rg-warn-text); } .pl-tag.is-locked { opacity: .6; } .pl-dialog { max-width: 520px; height: auto; } .pl-msg { font-size: .84rem; color: var(--rg-muted); padding: 6px 0; } .pl-pick { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 8px; border: 0; background: none; color: var(--rg-text); font: inherit; font-size: .86rem; text-align: left; cursor: pointer; } .pl-pick + .pl-pick { border-top: 1px solid var(--rg-border); } .pl-pick:hover { background: var(--rg-hover); } .pl-pick .pl-pick-main, .pl-pick .pl-pick-sub { flex: 1 1 auto; min-width: 0; } .pl-pick .pl-pick-sub { color: var(--rg-muted); font-size: .8rem; } .pl-pick small { display: block; color: var(--rg-muted); font-size: .74rem; } .pl-pick .fa-chevron-right { color: var(--rg-muted); font-size: .7rem; } .pl-results { max-height: 240px; overflow-y: auto; margin-top: 4px; } .pl-chosen { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; border: 1px solid var(--rg-border); border-radius: 8px; background: var(--rg-surface); font-size: .86rem; font-weight: 600; } .pl-alt { display: inline-block; margin-top: 6px; font-size: .78rem; } .pl-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; } @media (max-width: 575.98px) { .pl-row { grid-template-columns: 1fr; } } @media (max-width: 767.98px) { .pl-dialog { height: 100%; } .pl-form .rg-input { font-size: 16px; } } /* A table cell whose text may wrap (long descriptions, names), where rg-table cells otherwise don't */ .rg-wrap { white-space: normal; overflow-wrap: anywhere; } /* (js/doc_scanner.js): the photo with the paper's corners to drag */ .vce { position: relative; width: 100%; max-height: 60vh; margin: 0 auto; touch-action: none; user-select: none; background: #111; border-radius: 10px; overflow: hidden; } .vce img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; pointer-events: none; } .vce svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } .vce polygon { fill: color-mix(in srgb, var(--rg-accent) 18%, transparent); stroke: var(--rg-accent); stroke-width: .006; vector-effect: non-scaling-stroke; stroke-width: 2px; } .vce-h { position: absolute; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; border: 3px solid #fff; background: var(--rg-accent); box-shadow: 0 2px 8px rgba(0, 0, 0, .5); cursor: grab; touch-action: none; padding: 0; } .vce-h:active { cursor: grabbing; transform: scale(1.15); } @media (pointer: coarse) { .vce-h { width: 40px; height: 40px; margin: -20px 0 0 -20px; } } /* (js/payments.js, pages/payments/): taking a payment on a customer's account, from the sale page, Complete Deal, the customer page and Receivables */ .pp-pop { position: fixed; inset: 0; z-index: 1085; display: flex; align-items: center; justify-content: center; padding: 16px; } .pp-back { position: absolute; inset: 0; background: rgba(15, 23, 42, .5); animation: rg-menu-in .15s ease-out; } .pp-box { position: relative; width: 100%; max-width: 640px; max-height: calc(100vh - 32px); overflow-y: auto; background: var(--rg-surface); color: var(--rg-text); border: 1px solid var(--rg-border); border-radius: 14px; box-shadow: 0 24px 60px rgba(0, 0, 0, .35); animation: rg-menu-in .18s ease-out; } .pp-head { display: flex; align-items: flex-start; gap: 12px; padding: 16px 18px 6px; } .pp-head h2 { margin: 0; font-size: 1.1rem; font-weight: 700; } .pp-sub { font-size: .82rem; color: var(--rg-muted); margin-top: 2px; } .pp-x { margin-left: auto; width: 32px; height: 32px; border: 1px solid var(--rg-border); border-radius: 8px; background: var(--rg-surface); color: var(--rg-text); cursor: pointer; } .pp-bal { margin: 8px 18px 0; padding: 9px 12px; border-radius: 9px; background: color-mix(in srgb, var(--rg-warn) 10%, transparent); font-size: .86rem; display: flex; align-items: center; gap: 10px; } .pp-bal .rg-btn-link { margin-left: auto; } .pp-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px 14px; padding: 14px 18px 4px; } .pp-f { display: flex; flex-direction: column; gap: 4px; margin: 0; min-width: 0; } .pp-f > span { font-size: .66rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--rg-muted); } .pp-f em { font-style: normal; font-weight: 500; letter-spacing: 0; text-transform: none; } .pp-f input, .pp-f select { height: 40px; padding: 0 10px; border: 1px solid var(--rg-border); border-radius: 8px; background: var(--rg-input-bg, var(--rg-surface)); color: var(--rg-text); font: inherit; min-width: 0; } .pp-wide { grid-column: 1 / -1; } .pp-money { position: relative; display: block; } .pp-money i { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); font-style: normal; font-weight: 700; color: var(--rg-muted); } .pp-money input { width: 100%; padding-left: 24px; font-size: 1.05rem; font-weight: 700; } .pp-chips { display: flex; flex-wrap: wrap; gap: 6px; } .pp-chips button { border: 1px solid var(--rg-border); border-radius: 999px; background: var(--rg-surface); color: var(--rg-text); padding: 5px 12px; font: inherit; font-size: .82rem; cursor: pointer; } .pp-chips button.on { background: var(--rg-accent); border-color: var(--rg-accent); color: #fff; } .pp-err { margin: 8px 18px 0; color: var(--rg-danger-text); font-size: .84rem; } .pp-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 14px 18px; margin-top: 10px; border-top: 1px solid var(--rg-border); } .pp-after { margin-right: auto; font-size: .84rem; color: var(--rg-muted); } .pp-after b { color: var(--rg-text); } @media (max-width: 575.98px) { .pp-pop { padding: 0; align-items: flex-end; } .pp-box { max-width: none; border-radius: 16px 16px 0 0; max-height: 94vh; } .pp-grid { grid-template-columns: minmax(0, 1fr); } .pp-foot .rg-btn-primary { flex: 1 1 100%; order: -1; } } /* A deal's ledger (sales_ledger): debits, credits and the running balance */ .ldg { width: 100%; border-collapse: collapse; font-size: .84rem; } .ldg th { text-align: left; font-size: .64rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--rg-muted); padding: 6px 8px; border-bottom: 1px solid var(--rg-border); } .ldg td { padding: 7px 8px; border-bottom: 1px solid var(--rg-border); vertical-align: top; } .ldg .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } .ldg .ldg-cr { color: var(--rg-success-text); } .ldg .ldg-dr { color: var(--rg-text); } .ldg .ldg-date { color: var(--rg-muted); white-space: nowrap; } .ldg tr.is-payment td { background: color-mix(in srgb, var(--rg-success) 4%, transparent); } .ldg tfoot td { font-weight: 700; border-bottom: 0; border-top: 2px solid var(--rg-border); } .ldg .ldg-owe { color: var(--rg-danger-text); } /* A voided payment: still listed, crossed out, not counted (its balance is the line before's) */ .ldg tr.is-void td { color: var(--rg-muted); } .ldg tr.is-void .ldg-what, .ldg tr.is-void .ldg-dr, .ldg tr.is-void .ldg-cr { text-decoration: line-through; color: var(--rg-muted); } .ldg .ldg-void-tag { margin-left: 6px; padding: 1px 7px; border-radius: 999px; font-size: .66rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; background: color-mix(in srgb, var(--rg-danger) 12%, transparent); color: var(--rg-danger-text); } .ldg .ldg-void-why { font-size: .78rem; color: var(--rg-muted); } .ldg .ldg-paid { color: var(--rg-success-text); } /* The payment popup: what it is, what it pays, the tally, the receipt view */ .pp-wait { padding: 30px 18px; color: var(--rg-muted); text-align: center; font-size: .88rem; } .pp-sub b.pp-owe, .pp-owe { color: var(--rg-danger-text); } .pp-cred { color: var(--rg-warn-text); } .pp-ok { color: var(--rg-success-text); } .pp-kinds { display: flex; flex-wrap: wrap; gap: 4px; margin: 10px 18px 0; padding: 3px; border-radius: 10px; background: var(--rg-surface-2); } .pp-kinds button { flex: 1 1 auto; border: 0; border-radius: 8px; background: none; color: var(--rg-muted); padding: 6px 10px; font: inherit; font-size: .8rem; font-weight: 600; cursor: pointer; white-space: nowrap; } .pp-kinds button.on { background: var(--rg-surface); color: var(--rg-text); box-shadow: 0 1px 3px rgba(0, 0, 0, .15); } .pp-kinds button.danger.on { color: var(--rg-danger-text); } .pp-note { margin: 0; font-size: .8rem; color: var(--rg-muted); } .pp-hint { margin: 10px 18px 0; padding: 8px 12px; border-radius: 8px; font-size: .84rem; background: color-mix(in srgb, var(--rg-warn) 12%, transparent); } .pp-hint .fa { color: var(--rg-warn-text); margin-right: 4px; } .pp-apply { margin: 14px 18px 0; border: 1px solid var(--rg-border); border-radius: 10px; overflow: hidden; } .pp-apply-head { display: flex; align-items: center; gap: 12px; padding: 8px 12px; background: var(--rg-surface-2); font-size: .66rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--rg-muted); } .pp-apply-head span { margin-right: auto; } .pp-apply-head .rg-btn-link { font-size: .78rem; letter-spacing: 0; text-transform: none; } .pp-empty { padding: 12px; font-size: .84rem; color: var(--rg-muted); } .pp-item { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 9px 12px; border-top: 1px solid var(--rg-border); } .pp-item.on { background: color-mix(in srgb, var(--rg-accent) 6%, transparent); } .pp-item-pick { flex: 1 1 240px; min-width: 0; display: flex; align-items: flex-start; gap: 10px; margin: 0; cursor: pointer; } .pp-item-pick input { width: 17px; height: 17px; margin-top: 2px; accent-color: var(--rg-accent); flex: none; } .pp-item-name { font-size: .86rem; min-width: 0; } .pp-item-name small { display: block; font-size: .76rem; color: var(--rg-muted); } .pp-item-quick { display: flex; gap: 4px; } .pp-item-quick button { border: 1px solid var(--rg-border); border-radius: 999px; background: var(--rg-surface); color: var(--rg-text); padding: 2px 9px; font: inherit; font-size: .74rem; cursor: pointer; } .pp-item-amt { width: 120px; flex: none; } .pp-item-amt input { height: 34px; width: 100%; padding: 0 8px 0 22px; border: 1px solid var(--rg-border); border-radius: 8px; background: var(--rg-input-bg, var(--rg-surface)); color: var(--rg-text); font: inherit; font-weight: 600; text-align: right; } .pp-foot { flex-direction: column; align-items: stretch; } .pp-tally { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: .84rem; color: var(--rg-muted); } .pp-tally b { color: var(--rg-text); font-variant-numeric: tabular-nums; } .pp-tally .pp-owe b, .pp-tally .pp-cred b { color: inherit; } .pp-btns { display: flex; justify-content: flex-end; gap: 8px; } .pp-done { padding: 14px 18px 0; } .pp-done-amt { font-size: 1.8rem; font-weight: 800; font-variant-numeric: tabular-nums; } .pp-done-amt .fa { color: var(--rg-success-text); font-size: 1.4rem; } .pp-done-what { color: var(--rg-muted); font-size: .86rem; margin-bottom: 10px; } .pp-done-list { list-style: none; margin: 0 0 10px; padding: 0; border: 1px solid var(--rg-border); border-radius: 10px; } .pp-done-list li { display: flex; flex-wrap: wrap; gap: 2px 10px; padding: 8px 12px; font-size: .86rem; border-top: 1px solid var(--rg-border); } .pp-done-list li:first-child { border-top: 0; } .pp-done-list li span { flex: 1; } .pp-done-list li small { flex-basis: 100%; color: var(--rg-muted); font-size: .76rem; } .pp-done-loan { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; margin-bottom: 10px; border-radius: 10px; background: var(--rg-surface-2); font-size: .84rem; } .pp-done-bal { font-size: .9rem; } @media (max-width: 575.98px) { .pp-item-amt { width: 100%; } .pp-btns .rg-btn-primary, .pp-btns .rg-btn-danger { flex: 1; } } /* The ledger's extra rows: not counted (greyed), voided (crossed out), not posted yet, balance forward; balance colours */ .ldg tr.is-out td { color: var(--rg-muted); opacity: .7; } .ldg tr.is-pending td { color: var(--rg-muted); font-style: italic; background: var(--rg-surface-2); } .ldg .ldg-cred { color: var(--rg-warn-text); } .ldg .ldg-zero { color: var(--rg-success-text); } .ldg td.ldg-owe, .ldg td.ldg-cred, .ldg td.ldg-zero { font-weight: 700; } /* */ .al-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 12px; padding: 10px 16px; } .al-f { display: flex; flex-direction: column; gap: 2px; margin: 0; font-size: .66rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--rg-muted); } .al-f input { height: 34px; padding: 0 8px; border: 1px solid var(--rg-border); border-radius: 8px; background: var(--rg-input-bg, var(--rg-surface)); color: var(--rg-text); font: inherit; font-size: .84rem; letter-spacing: 0; text-transform: none; font-weight: 400; } .al-q { position: relative; flex: 1 1 180px; } .al-q .fa { position: absolute; left: 10px; bottom: 11px; font-size: .78rem; } .al-q input { padding-left: 28px; width: 100%; } .al-drift { margin: 0 16px 8px; padding: 8px 12px; border-radius: 8px; background: color-mix(in srgb, var(--rg-danger) 10%, transparent); color: var(--rg-danger-text); font-size: .84rem; } .al-table td { font-size: .82rem; } .al-kind { white-space: nowrap; color: var(--rg-muted); } @media (max-width: 575.98px) { .al-table .al-kind { display: none; } .al-table td, .al-table th { padding-left: 6px; padding-right: 6px; } } .al-sub { display: block; font-size: .76rem; color: var(--rg-muted); } .al-void { color: var(--rg-danger-text); } .al-to { font-size: .78rem !important; } .al-credit { color: var(--rg-warn-text); white-space: nowrap; } .al-pill { padding: 1px 7px; border-radius: 999px; font-size: .66rem; font-weight: 700; font-style: normal; background: var(--rg-border); color: var(--rg-muted); } .al-fwd td { font-weight: 600; color: var(--rg-muted); background: var(--rg-surface-2); } .al-none { text-align: center; padding: 18px !important; } .al-acts { white-space: nowrap; } .al-ico { width: 28px; height: 28px; border: 0; border-radius: 6px; background: none; color: var(--rg-muted); cursor: pointer; } .al-ico:hover { background: var(--rg-surface-2); color: var(--rg-text); } .al-ico.danger:hover { color: var(--rg-danger-text); } /* */ .ln { padding: 12px 16px; } .ln-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; } .ln-pill { padding: 2px 10px; border-radius: 999px; font-size: .74rem; font-weight: 700; } .ln-pill.is-ok { background: color-mix(in srgb, var(--rg-success) 14%, transparent); color: var(--rg-success-text); } .ln-pill.is-warn { background: color-mix(in srgb, var(--rg-warn) 16%, transparent); color: var(--rg-warn-text); } .ln-pill.is-bad { background: color-mix(in srgb, var(--rg-danger) 14%, transparent); color: var(--rg-danger-text); } .ln-pill.is-muted { background: var(--rg-surface-2); color: var(--rg-muted); } .ln-terms { font-size: .82rem; color: var(--rg-muted); } .ln-why { margin: 6px 0 0; font-size: .8rem; color: var(--rg-muted); } .ln-figs { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin: 12px 0 8px; } .ln-fig span { display: block; font-size: .64rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--rg-muted); } .ln-fig b { font-size: 1.05rem; font-variant-numeric: tabular-nums; } .ln-fig small { display: block; font-size: .74rem; color: var(--rg-muted); } .ln-fig.is-owe b { color: var(--rg-danger-text); } .ln-bar { height: 5px; border-radius: 3px; background: var(--rg-surface-2); overflow: hidden; } .ln-bar span { display: block; height: 100%; background: var(--rg-success); } .ln-fee { margin-top: 10px; padding: 8px 12px; border-radius: 8px; font-size: .84rem; background: color-mix(in srgb, var(--rg-warn) 12%, transparent); } .ln-fee .fa { color: var(--rg-warn-text); } .ln-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; } .ln-actions .ln-wo { margin-left: auto; color: var(--rg-danger-text); } .ln-table { margin-top: 10px; max-height: 340px; overflow-y: auto; } .ln-s-PAID td { color: var(--rg-success-text); } .ln-s-LATE td { color: var(--rg-danger-text); font-weight: 600; } .ln-s-PART td, .ln-s-DUE td { color: var(--rg-warn-text); font-weight: 600; } .ln-s-CLOSED td { color: var(--rg-muted); } /* Print on a dealership computer (js/vmp_companion.js vmpPrintTo, 2026-10-14) */ .vmp-print-to { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 6px 0 10px; font-size: .85rem; } .vmp-print-to label { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--rg-muted); min-width: 0; max-width: 100%; white-space: nowrap; } /* the app's dropdown (js/vmp_shell.js), compact beside "Print on" */ .vmp-print-to button.rg-select-btn.rg-input { width: auto; min-width: 220px; max-width: 100%; flex: 1 1 auto; min-height: 32px; padding: 5px 10px; font-size: .85rem; } .vmp-print-to .vmp-print-note { color: var(--rg-muted); font-size: .8rem; } .vmp-print-to .vmp-print-note.off { color: var(--rg-warn-text); } /* A computer's print queue (, js/vmp_companion.js) */ .vmp-pq { display: flex; flex-direction: column; gap: 6px; width: 100%; } .vmp-pq-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 8px 10px; border: 1px solid var(--rg-border); border-radius: 8px; background: var(--rg-surface); font-size: .82rem; } .vmp-pq-row > .fa { flex: none; color: var(--rg-muted); } .vmp-pq-row.is-failed { border-color: color-mix(in srgb, var(--rg-danger) 35%, var(--rg-border)); background: color-mix(in srgb, var(--rg-danger) 6%, var(--rg-surface)); } .vmp-pq-row.is-failed > .fa { color: var(--rg-danger-text); } .vmp-pq-text { flex: 1 1 170px; min-width: 0; display: flex; flex-direction: column; gap: 1px; white-space: normal; } .vmp-pq-text > span { color: var(--rg-muted); overflow-wrap: anywhere; } /* beside the text when there's room, else under it (a deal's narrow side column) */ .vmp-pq-acts { display: flex; gap: 6px; margin-left: auto; } /* ── A vehicle's auction payment, on its Costs tab (vmp-auction-payment, pages/payables/payables.js) ── */ .vap { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--rg-border); } .vap-head { display: flex; align-items: center; gap: 8px; font-size: .84rem; font-weight: 700; color: var(--rg-text); margin-bottom: 8px; } .vap-head > .fa { color: var(--rg-muted); } .vap-line { display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; font-size: .84rem; } .vap-form { display: grid; grid-template-columns: 150px 150px minmax(0, 1fr) auto; gap: 8px; margin-top: 10px; } @media (max-width: 575.98px) { .vap-form { grid-template-columns: 1fr 1fr; } .vap-form .rg-btn-primary { grid-column: 1 / -1; justify-content: center; } } /* ── The morning briefing (js/vmp_briefing.js), after Shop Manager Pro's ── */ .vbr-back.is-closing { animation: vbr-fade-out .2s ease-in forwards; } .vbr { max-width: 1040px; height: min(100%, 760px); animation: vbr-rise .38s cubic-bezier(.2, .9, .3, 1.15); } .vbr-back.is-closing .vbr { animation: vbr-sink .2s ease-in forwards; } @keyframes vbr-rise { from { opacity: 0; transform: translateY(24px) scale(.98); } to { opacity: 1; transform: none; } } @keyframes vbr-sink { to { opacity: 0; transform: translateY(16px) scale(.98); } } @keyframes vbr-fade-out { to { opacity: 0; } } .vbr-top { flex: none; position: relative; display: flex; align-items: center; padding: 22px 56px 20px 22px; color: var(--rg-on-accent); background: linear-gradient(120deg, var(--rg-accent), color-mix(in srgb, var(--rg-accent) 55%, var(--rg-purple))); } .vbr-hero { display: flex; align-items: center; gap: 16px; } .vbr-hero h2 { margin: 0; font-size: 1.45rem; font-weight: 800; letter-spacing: -.4px; } .vbr-hero p { margin: 2px 0 0; font-size: .9rem; opacity: .92; } .vbr-mug { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 14px; background: color-mix(in srgb, var(--rg-on-accent) 18%, transparent); font-size: 1.3rem; } .vbr-x { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; border: 0; border-radius: 10px; background: transparent; color: inherit; font-size: 1.1rem; cursor: pointer; } .vbr-x:hover { background: color-mix(in srgb, var(--rg-on-accent) 18%, transparent); } .vbr-body { padding: 0; } .vbr-state { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 40px 16px; color: var(--rg-muted); font-size: .92rem; } .vbr-body > .rg-alert { margin: 16px; } .vbr-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); min-height: 100%; } .vbr-rail { display: flex; flex-direction: column; gap: 4px; padding: 14px 10px; border-right: 1px solid var(--rg-border); background: var(--rg-surface); } .vbr-tab { display: flex; align-items: flex-start; gap: 10px; width: 100%; padding: 10px 12px; border: 0; border-radius: 10px; background: none; color: var(--rg-text); font: inherit; text-align: left; cursor: pointer; animation: vbr-in .35s ease-out both; } .vbr-tab:nth-child(2) { animation-delay: .06s; } .vbr-tab:nth-child(3) { animation-delay: .12s; } @keyframes vbr-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } .vbr-tab > .fa { width: 18px; margin-top: 2px; text-align: center; color: var(--rg-muted); } .vbr-tab b { display: block; font-size: .88rem; } .vbr-tab small { display: block; font-size: .74rem; color: var(--rg-muted); line-height: 1.35; margin-top: 2px; } .vbr-tab:hover { background: var(--rg-hover); } .vbr-tab.is-on { background: var(--rg-accent-soft); } .vbr-tab.is-on b, .vbr-tab.is-on > .fa { color: var(--rg-accent-text); } .vbr-tab.is-empty b::after { content: "\2713"; margin-left: 6px; color: var(--rg-success-text); font-weight: 700; } .vbr-detail { padding: 18px 20px 22px; min-width: 0; } .vbr-sec-title { display: flex; align-items: center; gap: 9px; margin: 0 0 12px; font-size: 1.05rem; font-weight: 700; } .vbr-sec-title > .fa { color: var(--rg-accent-text); } .vbr-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 14px; } .vbr-tile { display: block; padding: 12px 14px; border: 1px solid var(--rg-border); border-radius: 12px; background: var(--rg-surface); color: var(--rg-text); text-decoration: none; animation: vbr-in .35s ease-out both; } .vbr-tile:hover { border-color: var(--rg-accent); } .vbr-tile span { display: block; font-size: .74rem; font-weight: 600; color: var(--rg-muted); } .vbr-tile b { display: block; font-family: var(--rg-mono); font-size: 1.25rem; margin-top: 2px; } .vbr-tile.is-bad b { color: var(--rg-danger-text); } .vbr-tile.is-warn b { color: var(--rg-warn-text); } .vbr-row { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border: 1px solid var(--rg-border); border-radius: 10px; background: var(--rg-surface); color: var(--rg-text); text-decoration: none; animation: vbr-in .35s ease-out both; } .vbr-row + .vbr-row { margin-top: 6px; } .vbr-row:hover { border-color: var(--rg-accent); } .vbr-row-main { flex: 1 1 auto; min-width: 0; } .vbr-row-main b { display: block; font-size: .88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vbr-row-main small { display: block; font-size: .76rem; color: var(--rg-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vbr-row-amt { flex: none; font-size: .86rem; font-weight: 600; } .vbr-row-go { flex: none; color: var(--rg-muted); font-size: .76rem; } .vbr-empty { display: flex; align-items: center; gap: 8px; padding: 16px; border: 1px dashed var(--rg-border); border-radius: 10px; color: var(--rg-success-text); font-size: .88rem; } .vbr-more { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; font-size: .84rem; } @media (max-width: 767.98px) { .vbr { height: 100%; } .vbr-top { padding: calc(18px + var(--safe-t)) 52px 16px 16px; } .vbr-hero h2 { font-size: 1.2rem; } .vbr-hero p { font-size: .82rem; } .vbr-mug { width: 40px; height: 40px; font-size: 1.1rem; } .vbr-layout { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; } /* (the chip row its own height, not half the window) */ .vbr-rail { flex-direction: row; align-items: center; overflow-x: auto; scrollbar-width: none; gap: 6px; padding: 10px 12px; border-right: 0; border-bottom: 1px solid var(--rg-border); } .vbr-row { align-items: flex-start; flex-wrap: wrap; gap: 4px 10px; } .vbr-row-main { flex: 1 1 100%; } .vbr-row-main b { white-space: normal; } .vbr-row-amt { margin-right: auto; } .vbr-row-go { display: none; } .vbr-tab { flex: none; width: auto; align-items: center; padding: 8px 12px; border: 1px solid var(--rg-border); border-radius: 999px; } .vbr-tab small { display: none; } .vbr-detail { padding: 14px 12px 18px; } .vbr-hint { display: none; } } @media (prefers-reduced-motion: reduce) { .vbr, .vbr-tab, .vbr-tile, .vbr-row, .vbr-back.is-closing, .vbr-back.is-closing .vbr { animation: none; } } /* ── A button waiting on its request (RgBusy, js/vmp_shell.js): disabled, with a spinner in place of its icon ── */ .rg-busy { cursor: progress !important; } button.rg-busy:disabled { opacity: .8; } a.rg-busy { pointer-events: none; opacity: .7; } .rg-busy-swap > i.fa:not(.rg-busy-spin), .rg-busy-swap > i[class*="fa-"]:not(.rg-busy-spin), .rg-busy-swap > .fas:not(.rg-busy-spin), .rg-busy-swap > .fa-solid:not(.rg-busy-spin) { display: none; } .rg-busy-spin { margin-right: .4em; } .rg-busy-spin:only-child, .rg-btn-icon > .rg-busy-spin { margin-right: 0; }