/* ==========================================================================
QuoteSuite Redesign — assets/css/qs-redesign.css
--------------------------------------------------------------------------
Loaded AFTER app.css and any per-page stylesheet. All rules are scoped
under body.qs-v3 so pages that have not opted in stay unaffected.
Component classes use the qs-v3- prefix. Never overwrite existing app.css
classes. If a JS-hooked element needs restyling, add a qs-v3- class
alongside the original class, do not rename or remove hooks.
Sections:
1. Design tokens (colors, type, spacing, radii, shadows)
2. Base + typography (body, headings, links)
3. Layout shell (sidebar, topbar, main, page background)
4. Primitives (buttons, inputs, badges, chips, pills, avatars)
5. Cards (stat, panel, empty state)
6. Data table (table, row states, avatar cells)
7. Tabs (horizontal tab strip)
8. Utilities (spacing, muted text, dividers, focus)
9. Accessibility helpers (skip link, sr-only, focus ring)
LOAD-BEARING RULE — do not remove:
Section 8 contains `body.qs-v3 [hidden] { display: none !important; }`.
This app shows and hides panels, notices and badges by toggling the
[hidden] attribute from JS (protectedPanel, accessDenied, authMessage,
creditWarning, notificationCount, ...). [hidden] only carries the UA's
display:none, which ANY component rule setting display:flex/grid/
inline-flex will out-specify — silently forcing hidden elements visible.
It has already caused the "Access denied" panel to render on top of a
working dashboard. Keep the guard; do not "clean up" the !important.
A related trap, for anyone adding page sections below: several JS functions
OVERWRITE className on the elements they update, e.g.
setMessage() -> el.className = "notice" + tone
renderProfile -> badge.className = statusClass(status)
Any qs-v3- class added to those elements in markup is wiped on first
render. Style them via their ID or their base class (.notice, .status-pill)
instead of adding a new class.
========================================================================== */
/* --------------------------------------------------------------------------
1. Design tokens
-------------------------------------------------------------------------- */
body.qs-v3 {
/* Palette ------------------------------------------------------------- */
--qs-navy-900: #0D2B5E;
--qs-navy-800: #132F63;
--qs-navy-700: #1E3A7A;
--qs-navy-500: #2563EB;
--qs-navy-400: #3B82F6;
--qs-gold-500: #C7A75A;
--qs-gold-400: #D4B872;
--qs-gold-300: #E4CB94;
--qs-gold-100: #FBF5E4;
--qs-ink-900: #0F172A;
--qs-ink-800: #1A2540;
--qs-ink-700: #1F2937;
--qs-ink-600: #374151;
--qs-ink-500: #64748B;
--qs-ink-400: #94A3B8;
--qs-ink-300: #CBD5E1;
--qs-ink-200: #E2E8F0;
--qs-ink-100: #F1F5F9;
--qs-bg: #F5F7FB;
--qs-surface: #FFFFFF;
--qs-surface-alt: #F9FAFB;
--qs-border: #E5E7EB;
--qs-border-strong: #D1D5DB;
--qs-success: #10B981;
--qs-success-soft: #D1FAE5;
--qs-warning: #F59E0B;
--qs-warning-soft: #FEF3C7;
--qs-danger: #EF4444;
--qs-danger-soft: #FEE2E2;
--qs-info: #3B82F6;
--qs-info-soft: #DBEAFE;
--qs-purple-soft: #EDE9FE;
--qs-teal-soft: #CCFBF1;
/* Sidebar-specific (dark surface) ------------------------------------- */
--qs-sidebar-bg: var(--qs-navy-900);
--qs-sidebar-hover: rgba(255, 255, 255, 0.06);
--qs-sidebar-active-bg: var(--qs-navy-500);
--qs-sidebar-text: rgba(255, 255, 255, 0.72);
--qs-sidebar-text-strong: #FFFFFF;
--qs-sidebar-divider: rgba(255, 255, 255, 0.08);
/* Typography --------------------------------------------------------- */
--qs-font-display: "Playfair Display", "Fraunces", Georgia, serif;
--qs-font-ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
system-ui, sans-serif;
--qs-fs-xs: 12px;
--qs-fs-sm: 13px;
--qs-fs-base: 14px;
--qs-fs-lg: 16px;
--qs-fs-xl: 18px;
--qs-fs-2xl: 22px;
--qs-fs-3xl: 28px;
--qs-fs-4xl: 36px;
--qs-fs-5xl: 48px;
--qs-fw-normal: 400;
--qs-fw-medium: 500;
--qs-fw-semibold: 600;
--qs-fw-bold: 700;
--qs-lh-tight: 1.2;
--qs-lh-snug: 1.35;
--qs-lh-normal: 1.5;
--qs-lh-relaxed: 1.7;
/* Spacing scale ------------------------------------------------------ */
--qs-sp-1: 4px;
--qs-sp-2: 8px;
--qs-sp-3: 12px;
--qs-sp-4: 16px;
--qs-sp-5: 20px;
--qs-sp-6: 24px;
--qs-sp-8: 32px;
--qs-sp-10: 40px;
--qs-sp-12: 48px;
--qs-sp-16: 64px;
/* Radii -------------------------------------------------------------- */
--qs-r-sm: 6px;
--qs-r-md: 8px;
--qs-r-lg: 12px;
--qs-r-xl: 16px;
--qs-r-2xl: 20px;
--qs-r-full: 999px;
/* Shadows ------------------------------------------------------------ */
--qs-sh-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
--qs-sh-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
--qs-sh-md: 0 4px 12px rgba(15, 23, 42, 0.08);
--qs-sh-lg: 0 12px 32px rgba(15, 23, 42, 0.10);
--qs-sh-xl: 0 24px 48px rgba(15, 23, 42, 0.14);
--qs-sh-focus: 0 0 0 3px rgba(37, 99, 235, 0.35);
/* Layout ------------------------------------------------------------- */
--qs-sidebar-w: 240px;
--qs-topbar-h: 72px;
--qs-content-max: 1400px;
/* Motion ------------------------------------------------------------- */
--qs-t-fast: 120ms;
--qs-t-base: 180ms;
--qs-t-slow: 240ms;
--qs-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}
/* --------------------------------------------------------------------------
2. Base + typography
-------------------------------------------------------------------------- */
body.qs-v3 {
font-family: var(--qs-font-ui);
font-size: var(--qs-fs-base);
line-height: var(--qs-lh-normal);
color: var(--qs-ink-800);
background: var(--qs-bg);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body.qs-v3 h1,
body.qs-v3 h2,
body.qs-v3 h3,
body.qs-v3 h4 {
color: var(--qs-ink-900);
font-weight: var(--qs-fw-semibold);
line-height: var(--qs-lh-tight);
letter-spacing: -0.01em;
margin: 0;
}
body.qs-v3 h1 { font-size: var(--qs-fs-3xl); }
body.qs-v3 h2 { font-size: var(--qs-fs-2xl); }
body.qs-v3 h3 { font-size: var(--qs-fs-xl); }
body.qs-v3 h4 { font-size: var(--qs-fs-lg); }
body.qs-v3 p { margin: 0; color: var(--qs-ink-700); }
body.qs-v3 .qs-v3-display {
font-family: var(--qs-font-display);
font-weight: var(--qs-fw-normal);
letter-spacing: -0.015em;
}
body.qs-v3 a {
color: var(--qs-navy-500);
text-decoration: none;
transition: color var(--qs-t-fast) var(--qs-ease);
}
body.qs-v3 a:hover { color: var(--qs-navy-700); }
/* --------------------------------------------------------------------------
3. Layout shell
-------------------------------------------------------------------------- */
/* Page frame: sidebar + main. Applied to a wrapper div on redesigned pages */
body.qs-v3 .qs-v3-shell {
display: grid;
grid-template-columns: var(--qs-sidebar-w) 1fr;
min-height: 100vh;
background: var(--qs-bg);
}
/* Sidebar --------------------------------------------------------------- */
body.qs-v3 .qs-v3-sidebar {
background: var(--qs-sidebar-bg);
color: var(--qs-sidebar-text);
display: flex;
flex-direction: column;
padding: var(--qs-sp-6) var(--qs-sp-4);
gap: var(--qs-sp-4);
position: sticky;
top: 0;
height: 100vh;
overflow-y: auto;
}
body.qs-v3 .qs-v3-sidebar-brand {
display: flex;
align-items: center;
gap: var(--qs-sp-2);
padding: var(--qs-sp-2) var(--qs-sp-3);
color: var(--qs-gold-500);
font-family: var(--qs-font-display);
font-size: var(--qs-fs-2xl);
font-weight: var(--qs-fw-semibold);
letter-spacing: -0.01em;
}
body.qs-v3 .qs-v3-sidebar-brand svg { width: 28px; height: 28px; }
body.qs-v3 .qs-v3-sidebar-nav {
display: flex;
flex-direction: column;
gap: 2px;
margin-top: var(--qs-sp-2);
}
body.qs-v3 .qs-v3-nav-item {
display: flex;
align-items: center;
gap: var(--qs-sp-3);
padding: var(--qs-sp-3) var(--qs-sp-4);
border-radius: var(--qs-r-md);
color: var(--qs-sidebar-text);
font-size: var(--qs-fs-base);
font-weight: var(--qs-fw-medium);
background: transparent;
border: 0;
cursor: pointer;
text-align: left;
width: 100%;
transition: background var(--qs-t-fast) var(--qs-ease),
color var(--qs-t-fast) var(--qs-ease);
}
body.qs-v3 .qs-v3-nav-item svg {
width: 18px;
height: 18px;
flex-shrink: 0;
stroke: currentColor;
fill: none;
stroke-width: 1.75;
}
body.qs-v3 .qs-v3-nav-item:hover {
background: var(--qs-sidebar-hover);
color: var(--qs-sidebar-text-strong);
}
body.qs-v3 .qs-v3-nav-item.is-active {
background: var(--qs-sidebar-active-bg);
color: var(--qs-sidebar-text-strong);
font-weight: var(--qs-fw-semibold);
}
body.qs-v3 .qs-v3-nav-item:focus-visible {
outline: none;
box-shadow: 0 0 0 2px var(--qs-gold-500);
}
body.qs-v3 .qs-v3-sidebar-footer {
margin-top: auto;
padding-top: var(--qs-sp-4);
border-top: 1px solid var(--qs-sidebar-divider);
}
body.qs-v3 .qs-v3-plan-card {
background: rgba(255, 255, 255, 0.04);
border: 1px solid var(--qs-sidebar-divider);
border-radius: var(--qs-r-lg);
padding: var(--qs-sp-4);
color: var(--qs-sidebar-text-strong);
font-size: var(--qs-fs-sm);
}
body.qs-v3 .qs-v3-plan-card strong {
display: flex;
align-items: center;
gap: var(--qs-sp-2);
color: var(--qs-gold-500);
font-family: var(--qs-font-display);
font-size: var(--qs-fs-lg);
margin-bottom: var(--qs-sp-1);
}
body.qs-v3 .qs-v3-plan-card span { color: var(--qs-ink-300); font-size: var(--qs-fs-xs); }
/* Main content area ----------------------------------------------------- */
body.qs-v3 .qs-v3-main {
min-width: 0; /* prevents grid children from overflowing */
display: flex;
flex-direction: column;
}
body.qs-v3 .qs-v3-topbar {
min-height: var(--qs-topbar-h);
padding: var(--qs-sp-5) var(--qs-sp-8);
display: flex;
align-items: center;
gap: var(--qs-sp-5);
background: var(--qs-surface);
border-bottom: 1px solid var(--qs-border);
}
body.qs-v3 .qs-v3-topbar-title { flex: 1; min-width: 0; }
body.qs-v3 .qs-v3-topbar-title h1 { font-size: var(--qs-fs-2xl); }
body.qs-v3 .qs-v3-topbar-title p {
color: var(--qs-ink-500);
font-size: var(--qs-fs-sm);
margin-top: 2px;
}
body.qs-v3 .qs-v3-search {
display: flex;
align-items: center;
gap: var(--qs-sp-2);
padding: var(--qs-sp-3) var(--qs-sp-4);
background: var(--qs-surface-alt);
border: 1px solid var(--qs-border);
border-radius: var(--qs-r-md);
min-width: 320px;
transition: border-color var(--qs-t-fast) var(--qs-ease),
box-shadow var(--qs-t-fast) var(--qs-ease);
}
body.qs-v3 .qs-v3-search:focus-within {
border-color: var(--qs-navy-500);
box-shadow: var(--qs-sh-focus);
}
body.qs-v3 .qs-v3-search svg {
width: 16px;
height: 16px;
color: var(--qs-ink-400);
flex-shrink: 0;
}
body.qs-v3 .qs-v3-search input {
border: 0;
background: transparent;
outline: none;
flex: 1;
font-size: var(--qs-fs-sm);
color: var(--qs-ink-800);
/* The search pill (wrapper) supplies the height and padding; reset the
input so app.css's global `input { min-height: 44px }` doesn't stack a
second box inside the padded wrapper (was making the pill ~70px tall). */
min-height: 0;
padding: 0;
}
body.qs-v3 .qs-v3-search kbd {
background: var(--qs-surface);
border: 1px solid var(--qs-border);
border-radius: var(--qs-r-sm);
padding: 2px 6px;
font-size: var(--qs-fs-xs);
color: var(--qs-ink-500);
font-family: var(--qs-font-ui);
}
body.qs-v3 .qs-v3-topbar-icon {
width: 40px;
height: 40px;
border-radius: var(--qs-r-full);
background: transparent;
border: 0;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--qs-ink-500);
cursor: pointer;
position: relative;
transition: background var(--qs-t-fast) var(--qs-ease);
}
body.qs-v3 .qs-v3-topbar-icon:hover { background: var(--qs-ink-100); }
body.qs-v3 .qs-v3-topbar-icon .qs-v3-badge {
position: absolute;
top: 6px;
right: 6px;
min-width: 16px;
height: 16px;
padding: 0 4px;
background: var(--qs-navy-500);
color: #fff;
font-size: 10px;
font-weight: var(--qs-fw-semibold);
border-radius: var(--qs-r-full);
display: inline-flex;
align-items: center;
justify-content: center;
}
body.qs-v3 .qs-v3-credit-pill {
display: inline-flex;
align-items: center;
gap: var(--qs-sp-2);
padding: var(--qs-sp-2) var(--qs-sp-3);
background: var(--qs-gold-100);
border: 1px solid var(--qs-gold-300);
border-radius: var(--qs-r-md);
color: var(--qs-ink-800);
font-size: var(--qs-fs-sm);
font-weight: var(--qs-fw-semibold);
}
body.qs-v3 .qs-v3-credit-pill svg { width: 16px; height: 16px; color: var(--qs-gold-500); }
body.qs-v3 .qs-v3-avatar-btn {
display: inline-flex;
align-items: center;
gap: var(--qs-sp-2);
padding: 4px 10px 4px 4px;
background: transparent;
border: 1px solid var(--qs-border);
border-radius: var(--qs-r-full);
cursor: pointer;
}
body.qs-v3 .qs-v3-content {
padding: var(--qs-sp-8);
display: flex;
flex-direction: column;
gap: var(--qs-sp-6);
/* Full-bleed: content fills the area beside the sidebar (minus its own
padding) rather than being capped at --qs-content-max and centered, which
left large blank margins on wide screens. Individual elements that would
look stretched at full width are capped on their own rule below. */
width: 100%;
box-sizing: border-box;
}
/* --------------------------------------------------------------------------
4. Primitives
-------------------------------------------------------------------------- */
/* Buttons -------------------------------------------------------------- */
body.qs-v3 .qs-v3-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--qs-sp-2);
padding: 10px 16px;
border-radius: var(--qs-r-md);
font-family: inherit;
font-size: var(--qs-fs-sm);
font-weight: var(--qs-fw-semibold);
line-height: 1;
border: 1px solid transparent;
cursor: pointer;
transition: background var(--qs-t-fast) var(--qs-ease),
color var(--qs-t-fast) var(--qs-ease),
border-color var(--qs-t-fast) var(--qs-ease),
box-shadow var(--qs-t-fast) var(--qs-ease),
transform var(--qs-t-fast) var(--qs-ease);
text-decoration: none;
white-space: nowrap;
}
body.qs-v3 .qs-v3-btn svg { width: 16px; height: 16px; }
body.qs-v3 .qs-v3-btn:active { transform: translateY(1px); }
body.qs-v3 .qs-v3-btn:disabled { opacity: 0.5; cursor: not-allowed; }
body.qs-v3 .qs-v3-btn-primary {
background: var(--qs-navy-500);
color: #fff;
border-color: var(--qs-navy-500);
}
body.qs-v3 .qs-v3-btn-primary:hover { background: var(--qs-navy-700); border-color: var(--qs-navy-700); }
body.qs-v3 .qs-v3-btn-primary:focus-visible { box-shadow: var(--qs-sh-focus); outline: none; }
body.qs-v3 .qs-v3-btn-gold {
background: var(--qs-gold-500);
color: var(--qs-ink-900);
border-color: var(--qs-gold-500);
}
body.qs-v3 .qs-v3-btn-gold:hover { background: var(--qs-gold-400); border-color: var(--qs-gold-400); }
body.qs-v3 .qs-v3-btn-secondary {
background: var(--qs-surface);
color: var(--qs-ink-800);
border-color: var(--qs-border-strong);
}
body.qs-v3 .qs-v3-btn-secondary:hover { border-color: var(--qs-ink-400); background: var(--qs-surface-alt); }
body.qs-v3 .qs-v3-btn-ghost {
background: transparent;
color: var(--qs-ink-700);
border-color: transparent;
}
body.qs-v3 .qs-v3-btn-ghost:hover { background: var(--qs-ink-100); }
body.qs-v3 .qs-v3-btn-danger {
background: var(--qs-surface);
color: var(--qs-danger);
border-color: var(--qs-border);
}
body.qs-v3 .qs-v3-btn-danger:hover { background: var(--qs-danger-soft); border-color: var(--qs-danger); }
body.qs-v3 .qs-v3-btn-sm { padding: 6px 10px; font-size: var(--qs-fs-xs); }
body.qs-v3 .qs-v3-btn-lg { padding: 12px 20px; font-size: var(--qs-fs-base); }
/* Inputs --------------------------------------------------------------- */
body.qs-v3 .qs-v3-input,
body.qs-v3 .qs-v3-select,
body.qs-v3 .qs-v3-textarea {
width: 100%;
padding: 10px 14px;
font-family: inherit;
font-size: var(--qs-fs-sm);
color: var(--qs-ink-800);
background: var(--qs-surface);
border: 1px solid var(--qs-border-strong);
border-radius: var(--qs-r-md);
transition: border-color var(--qs-t-fast) var(--qs-ease),
box-shadow var(--qs-t-fast) var(--qs-ease);
box-sizing: border-box;
}
body.qs-v3 .qs-v3-input:focus,
body.qs-v3 .qs-v3-select:focus,
body.qs-v3 .qs-v3-textarea:focus {
border-color: var(--qs-navy-500);
box-shadow: var(--qs-sh-focus);
outline: none;
}
body.qs-v3 .qs-v3-input::placeholder,
body.qs-v3 .qs-v3-textarea::placeholder { color: var(--qs-ink-400); }
body.qs-v3 .qs-v3-textarea { resize: vertical; min-height: 88px; line-height: var(--qs-lh-normal); }
body.qs-v3 .qs-v3-field {
display: flex;
flex-direction: column;
gap: var(--qs-sp-1);
}
body.qs-v3 .qs-v3-label {
/* app.css sets `label { display: grid }`, which turned every label into a
grid container — so a trailing required-asterisk span dropped onto its own
grid row. Force block flow so label text + inline children stay on one line. */
display: block;
font-size: var(--qs-fs-sm);
font-weight: var(--qs-fw-medium);
color: var(--qs-ink-700);
}
body.qs-v3 .qs-v3-hint {
font-size: var(--qs-fs-xs);
color: var(--qs-ink-500);
}
/* Badges / status pills ------------------------------------------------- */
body.qs-v3 .qs-v3-badge {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 8px;
border-radius: var(--qs-r-full);
font-size: var(--qs-fs-xs);
font-weight: var(--qs-fw-semibold);
line-height: 1.6;
}
body.qs-v3 .qs-v3-badge-neutral { background: var(--qs-ink-100); color: var(--qs-ink-700); }
body.qs-v3 .qs-v3-badge-info { background: var(--qs-info-soft); color: #1E40AF; }
body.qs-v3 .qs-v3-badge-success { background: var(--qs-success-soft); color: #065F46; }
body.qs-v3 .qs-v3-badge-warning { background: var(--qs-warning-soft); color: #92400E; }
body.qs-v3 .qs-v3-badge-danger { background: var(--qs-danger-soft); color: #991B1B; }
body.qs-v3 .qs-v3-badge-gold { background: var(--qs-gold-100); color: #7C5A16; }
body.qs-v3 .qs-v3-status-dot {
display: inline-block;
width: 8px;
height: 8px;
border-radius: var(--qs-r-full);
background: var(--qs-ink-300);
margin-right: 6px;
vertical-align: middle;
}
body.qs-v3 .qs-v3-status-dot.is-active { background: var(--qs-success); }
body.qs-v3 .qs-v3-status-dot.is-warning { background: var(--qs-warning); }
body.qs-v3 .qs-v3-status-dot.is-inactive { background: var(--qs-ink-400); }
/* Chip (filter chips) --------------------------------------------------- */
body.qs-v3 .qs-v3-chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
background: var(--qs-surface);
border: 1px solid var(--qs-border);
border-radius: var(--qs-r-full);
font-size: var(--qs-fs-xs);
font-weight: var(--qs-fw-medium);
color: var(--qs-ink-700);
cursor: pointer;
transition: background var(--qs-t-fast) var(--qs-ease),
border-color var(--qs-t-fast) var(--qs-ease);
}
body.qs-v3 .qs-v3-chip svg { width: 14px; height: 14px; }
body.qs-v3 .qs-v3-chip:hover { border-color: var(--qs-ink-400); }
body.qs-v3 .qs-v3-chip.is-active {
background: var(--qs-navy-500);
color: #fff;
border-color: var(--qs-navy-500);
}
/* Avatar --------------------------------------------------------------- */
body.qs-v3 .qs-v3-avatar {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: var(--qs-r-full);
background: var(--qs-navy-700);
color: #fff;
font-size: var(--qs-fs-xs);
font-weight: var(--qs-fw-semibold);
overflow: hidden;
flex-shrink: 0;
}
body.qs-v3 .qs-v3-avatar img { width: 100%; height: 100%; object-fit: cover; }
body.qs-v3 .qs-v3-avatar-sm { width: 24px; height: 24px; font-size: 10px; }
body.qs-v3 .qs-v3-avatar-lg { width: 48px; height: 48px; font-size: var(--qs-fs-base); }
body.qs-v3 .qs-v3-avatar-xl { width: 72px; height: 72px; font-size: var(--qs-fs-xl); }
/* --------------------------------------------------------------------------
5. Cards
-------------------------------------------------------------------------- */
body.qs-v3 .qs-v3-card {
background: var(--qs-surface);
border: 1px solid var(--qs-border);
border-radius: var(--qs-r-xl);
padding: var(--qs-sp-6);
box-shadow: var(--qs-sh-xs);
}
body.qs-v3 .qs-v3-card-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--qs-sp-4);
margin-bottom: var(--qs-sp-5);
}
body.qs-v3 .qs-v3-card-title { font-size: var(--qs-fs-xl); }
body.qs-v3 .qs-v3-card-subtitle {
font-size: var(--qs-fs-sm);
color: var(--qs-ink-500);
margin-top: 2px;
}
/* Stat card (dashboard: Total Quotes, etc.) ----------------------------- */
body.qs-v3 .qs-v3-stat {
background: var(--qs-surface);
border: 1px solid var(--qs-border);
border-radius: var(--qs-r-xl);
padding: var(--qs-sp-5);
display: flex;
align-items: flex-start;
gap: var(--qs-sp-4);
box-shadow: var(--qs-sh-xs);
}
body.qs-v3 .qs-v3-stat-icon {
width: 44px;
height: 44px;
border-radius: var(--qs-r-lg);
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
body.qs-v3 .qs-v3-stat-icon svg { width: 22px; height: 22px; }
body.qs-v3 .qs-v3-stat-icon.tint-blue { background: var(--qs-info-soft); color: #1E40AF; }
body.qs-v3 .qs-v3-stat-icon.tint-green { background: var(--qs-success-soft); color: #065F46; }
body.qs-v3 .qs-v3-stat-icon.tint-purple { background: var(--qs-purple-soft); color: #6D28D9; }
body.qs-v3 .qs-v3-stat-icon.tint-gold { background: var(--qs-gold-100); color: #92640E; }
body.qs-v3 .qs-v3-stat-icon.tint-teal { background: var(--qs-teal-soft); color: #0F766E; }
body.qs-v3 .qs-v3-stat-body { min-width: 0; }
body.qs-v3 .qs-v3-stat-label {
color: var(--qs-ink-500);
font-size: var(--qs-fs-sm);
font-weight: var(--qs-fw-medium);
}
body.qs-v3 .qs-v3-stat-value {
color: var(--qs-ink-900);
font-size: var(--qs-fs-3xl);
font-weight: var(--qs-fw-semibold);
line-height: 1.1;
margin: 4px 0 6px;
}
body.qs-v3 .qs-v3-stat-delta {
font-size: var(--qs-fs-xs);
color: var(--qs-ink-500);
}
body.qs-v3 .qs-v3-stat-delta.is-up { color: var(--qs-success); }
body.qs-v3 .qs-v3-stat-delta.is-down { color: var(--qs-danger); }
body.qs-v3 .qs-v3-stat-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--qs-sp-4);
}
@media (max-width: 1100px) { body.qs-v3 .qs-v3-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { body.qs-v3 .qs-v3-stat-grid { grid-template-columns: 1fr; } }
/* Empty state ----------------------------------------------------------- */
body.qs-v3 .qs-v3-empty {
padding: var(--qs-sp-10) var(--qs-sp-6);
text-align: center;
color: var(--qs-ink-500);
font-size: var(--qs-fs-sm);
border: 1px dashed var(--qs-border);
border-radius: var(--qs-r-lg);
background: var(--qs-surface-alt);
}
/* --------------------------------------------------------------------------
6. Data table
-------------------------------------------------------------------------- */
body.qs-v3 .qs-v3-table-wrap {
overflow-x: auto;
border-radius: var(--qs-r-lg);
}
body.qs-v3 .qs-v3-table {
width: 100%;
border-collapse: collapse;
font-size: var(--qs-fs-sm);
}
body.qs-v3 .qs-v3-table thead th {
text-align: left;
padding: var(--qs-sp-3) var(--qs-sp-4);
color: var(--qs-ink-500);
font-weight: var(--qs-fw-semibold);
font-size: var(--qs-fs-xs);
text-transform: uppercase;
letter-spacing: 0.03em;
background: var(--qs-surface-alt);
border-bottom: 1px solid var(--qs-border);
}
body.qs-v3 .qs-v3-table tbody td {
padding: var(--qs-sp-4);
border-bottom: 1px solid var(--qs-border);
color: var(--qs-ink-800);
vertical-align: middle;
}
body.qs-v3 .qs-v3-table tbody tr:last-child td { border-bottom: 0; }
body.qs-v3 .qs-v3-table tbody tr {
transition: background var(--qs-t-fast) var(--qs-ease);
}
body.qs-v3 .qs-v3-table tbody tr:hover { background: var(--qs-surface-alt); }
body.qs-v3 .qs-v3-table-user {
display: flex;
align-items: center;
gap: var(--qs-sp-3);
}
body.qs-v3 .qs-v3-table-user-name {
display: flex;
align-items: center;
gap: var(--qs-sp-2);
font-weight: var(--qs-fw-semibold);
color: var(--qs-ink-900);
}
body.qs-v3 .qs-v3-table-user-sub {
color: var(--qs-ink-500);
font-size: var(--qs-fs-xs);
margin-top: 2px;
}
body.qs-v3 .qs-v3-table-actions {
display: inline-flex;
gap: var(--qs-sp-1);
}
body.qs-v3 .qs-v3-icon-btn {
width: 32px;
height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
background: transparent;
border: 1px solid var(--qs-border);
border-radius: var(--qs-r-md);
cursor: pointer;
color: var(--qs-ink-600);
transition: background var(--qs-t-fast) var(--qs-ease),
color var(--qs-t-fast) var(--qs-ease);
}
body.qs-v3 .qs-v3-icon-btn svg { width: 16px; height: 16px; }
body.qs-v3 .qs-v3-icon-btn:hover { background: var(--qs-ink-100); color: var(--qs-ink-900); }
/* --------------------------------------------------------------------------
7. Tabs (horizontal)
-------------------------------------------------------------------------- */
body.qs-v3 .qs-v3-tabs {
display: flex;
gap: var(--qs-sp-6);
border-bottom: 1px solid var(--qs-border);
padding: 0 var(--qs-sp-2);
}
body.qs-v3 .qs-v3-tab {
display: inline-flex;
align-items: center;
gap: var(--qs-sp-2);
padding: var(--qs-sp-3) var(--qs-sp-1);
background: transparent;
border: 0;
border-bottom: 2px solid transparent;
color: var(--qs-ink-500);
font-family: inherit;
font-size: var(--qs-fs-sm);
font-weight: var(--qs-fw-medium);
cursor: pointer;
transition: color var(--qs-t-fast) var(--qs-ease),
border-color var(--qs-t-fast) var(--qs-ease);
margin-bottom: -1px;
}
body.qs-v3 .qs-v3-tab svg { width: 16px; height: 16px; }
body.qs-v3 .qs-v3-tab:hover { color: var(--qs-ink-800); }
body.qs-v3 .qs-v3-tab.is-active {
color: var(--qs-navy-500);
border-bottom-color: var(--qs-navy-500);
}
body.qs-v3 .qs-v3-tab:focus-visible {
outline: none;
box-shadow: var(--qs-sh-focus);
border-radius: var(--qs-r-sm);
}
/* --------------------------------------------------------------------------
8. Utilities
-------------------------------------------------------------------------- */
body.qs-v3 .qs-v3-row {
display: flex;
align-items: center;
gap: var(--qs-sp-3);
}
body.qs-v3 .qs-v3-row-between {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--qs-sp-3);
}
body.qs-v3 .qs-v3-stack {
display: flex;
flex-direction: column;
gap: var(--qs-sp-4);
}
body.qs-v3 .qs-v3-grid-2 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--qs-sp-5);
}
body.qs-v3 .qs-v3-grid-3 {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--qs-sp-5);
}
@media (max-width: 900px) {
body.qs-v3 .qs-v3-grid-2,
body.qs-v3 .qs-v3-grid-3 { grid-template-columns: 1fr; }
}
/* LOAD-BEARING — see the "LOAD-BEARING RULE" note in the file header.
The [hidden] attribute is how this app's JS shows/hides panels, notices and
badges (protectedPanel, accessDenied, authMessage, creditWarning, ...). A
component rule carrying display:flex/grid/inline-flex out-specifies the UA's
[hidden]{display:none} and forces the element visible. Guard globally. */
body.qs-v3 [hidden] { display: none !important; }
body.qs-v3 .qs-v3-muted { color: var(--qs-ink-500); }
body.qs-v3 .qs-v3-mono { font-variant-numeric: tabular-nums; }
body.qs-v3 .qs-v3-divider { border-top: 1px solid var(--qs-border); margin: var(--qs-sp-5) 0; }
body.qs-v3 .qs-v3-scroll-shadow { position: relative; }
/* --------------------------------------------------------------------------
9. Accessibility helpers
-------------------------------------------------------------------------- */
/* Screen-reader only */
body.qs-v3 .qs-v3-sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* Skip to content */
body.qs-v3 .qs-v3-skip-link {
position: absolute;
top: -40px;
left: var(--qs-sp-4);
padding: var(--qs-sp-2) var(--qs-sp-4);
background: var(--qs-navy-900);
color: #fff;
border-radius: var(--qs-r-md);
z-index: 1000;
transition: top var(--qs-t-fast) var(--qs-ease);
}
body.qs-v3 .qs-v3-skip-link:focus { top: var(--qs-sp-4); }
/* Consistent focus ring on interactive elements without their own rule */
body.qs-v3 :where(button, [href], input, select, textarea, [tabindex]):not(
.qs-v3-btn, .qs-v3-nav-item, .qs-v3-tab, .qs-v3-input, .qs-v3-select, .qs-v3-textarea
):focus-visible {
outline: 2px solid var(--qs-navy-500);
outline-offset: 2px;
}
/* Reduce motion respect */
@media (prefers-reduced-motion: reduce) {
body.qs-v3 * {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
}
}
/* Print baseline: keep public quote printable */
@media print {
body.qs-v3 .qs-v3-sidebar,
body.qs-v3 .qs-v3-topbar { display: none !important; }
body.qs-v3 .qs-v3-shell { grid-template-columns: 1fr; }
body.qs-v3 .qs-v3-content { padding: 0; }
}
/* v87 actual QuoteSuite renderer inside Agency Branding live preview */
body.qs-v3.qs-v3-branding .qs-v3-branding-layout {
grid-template-columns: minmax(0,1fr) minmax(520px,.96fr);
}
body.qs-v3.qs-v3-branding .qs-v3-branding-preview > .qs-v3-card {
padding: var(--qs-sp-5);
}
body.qs-v3.qs-v3-branding .qs-v3-preview-stage {
display: block;
padding: 12px;
border: 1px solid var(--qs-border);
background: #eef3f8;
}
body.qs-v3.qs-v3-branding .qs-v3-actual-preview-shell {
width: 100%;
overflow: hidden;
border: 1px solid #d9e3ee;
border-radius: 10px;
background: #e8eef5;
box-shadow: 0 8px 24px rgba(20,47,78,.08);
}
body.qs-v3.qs-v3-branding .qs-v3-actual-preview-scroll {
height: min(650px,calc(100vh - 285px));
min-height: 510px;
overflow: auto;
padding: 14px;
overscroll-behavior: contain;
scrollbar-color: #aab8c9 transparent;
}
body.qs-v3.qs-v3-branding .qs-v3-actual-preview-document {
margin: 0 auto;
transform-origin: top center;
transition: width var(--qs-t-base) var(--qs-ease), zoom var(--qs-t-base) var(--qs-ease);
}
body.qs-v3.qs-v3-branding .qs-v3-preview-stage[data-device="desktop"] .qs-v3-actual-preview-document {
width: 820px;
zoom: .62;
}
body.qs-v3.qs-v3-branding .qs-v3-preview-stage[data-device="mobile"] .qs-v3-actual-preview-document {
width: 390px;
zoom: .86;
}
body.qs-v3.qs-v3-branding #publicQuote .quote-rendered {
min-height: 100%;
overflow: hidden;
border: 1px solid #dce5ef;
border-radius: 8px;
background: #fff;
box-shadow: 0 14px 35px rgba(15,38,67,.12);
}
body.qs-v3.qs-v3-branding #publicQuote .letterhead {
background: #fff;
}
body.qs-v3.qs-v3-branding .qs-v3-preview-stage[data-device="mobile"] #publicQuote .letterhead {
align-items: flex-start;
flex-direction: column;
}
body.qs-v3.qs-v3-branding .qs-v3-preview-stage[data-device="mobile"] #publicQuote .day-content,
body.qs-v3.qs-v3-branding .qs-v3-preview-stage[data-device="mobile"] #publicQuote .hotel-row-display,
body.qs-v3.qs-v3-branding .qs-v3-preview-stage[data-device="mobile"] #publicQuote .inclusion-grid,
body.qs-v3.qs-v3-branding .qs-v3-preview-stage[data-device="mobile"] #publicQuote .terms-grid,
body.qs-v3.qs-v3-branding .qs-v3-preview-stage[data-device="mobile"] #publicQuote .quote-pricing-summary {
grid-template-columns: 1fr;
}
body.qs-v3.qs-v3-branding .qs-v3-preview-stage[data-device="mobile"] #publicQuote .quote-pricing-grand {
padding-top: 18px;
padding-left: 0;
text-align: left;
border-top: 1px solid var(--qs-border);
border-left: 0;
}
body.qs-v3.qs-v3-branding .qs-v3-preview-note {
margin-right: auto;
margin-left: auto;
max-width: 560px;
line-height: 1.5;
}
@media (max-width: 1180px) {
body.qs-v3.qs-v3-branding .qs-v3-branding-layout { grid-template-columns: minmax(0,1fr); }
body.qs-v3.qs-v3-branding .qs-v3-branding-preview { position: static; }
body.qs-v3.qs-v3-branding .qs-v3-actual-preview-scroll { height: 650px; }
}
@media (max-width: 640px) {
body.qs-v3.qs-v3-branding .qs-v3-branding-preview > .qs-v3-card { padding: var(--qs-sp-4); }
body.qs-v3.qs-v3-branding .qs-v3-preview-head { align-items: flex-start; flex-direction: column; }
body.qs-v3.qs-v3-branding .qs-v3-preview-toggle { width: 100%; }
body.qs-v3.qs-v3-branding .qs-v3-preview-device { flex: 1; }
body.qs-v3.qs-v3-branding .qs-v3-preview-stage { padding: 7px; }
body.qs-v3.qs-v3-branding .qs-v3-actual-preview-scroll { min-height: 480px; padding: 8px; }
body.qs-v3.qs-v3-branding .qs-v3-preview-stage[data-device="desktop"] .qs-v3-actual-preview-document { zoom: .42; }
body.qs-v3.qs-v3-branding .qs-v3-preview-stage[data-device="mobile"] .qs-v3-actual-preview-document { zoom: .72; }
}
/* v86 keep the selected Ready Package market visible in every interaction state */
body.qs-v3.qs-v3-ready .ready-market-tabs button.is-active,
body.qs-v3.qs-v3-ready .ready-market-tabs button.is-active:hover,
body.qs-v3.qs-v3-ready .ready-market-tabs button.is-active:focus,
body.qs-v3.qs-v3-ready .ready-market-tabs button.is-active:active {
color: #fff !important;
background: #2563eb !important;
border-color: #2563eb !important;
opacity: 1 !important;
box-shadow: 0 5px 14px rgba(37,99,235,.22) !important;
}
body.qs-v3.qs-v3-ready .ready-market-tabs button:not(.is-active):hover,
body.qs-v3.qs-v3-ready .ready-market-tabs button:not(.is-active):focus {
color: #173b68 !important;
background: #eaf2ff !important;
}
/* End of qs-redesign.css base file. Per-page sections are added below this
line under clearly-labelled comment blocks, e.g. "=== LOGIN ===",
"=== DASHBOARD (agent.html) ===", "=== CUSTOMERS ===".
Note: CSS comments do not nest, so section labels are written as plain
text here rather than as example comments. */
/* === LOGIN ===============================================================
login.html — split screen. Left: hero photo + navy scrim + brand + 3
feature bullets. Right: white auth panel.
Hooks preserved and styled by ID/existing class, not by new class:
#loginForm, #email, #password — read by assets/js/auth.js
#authMessage (.notice) — auth.js setMessage() overwrites
className, so never rely on a qs-v3-
class surviving on that element.
========================================================================== */
/* Scrim tints. Derived from --qs-navy-900 (#0D2B5E); declared once here
because CSS cannot apply alpha to an existing hex token directly. */
body.qs-v3.qs-v3-login {
--qs-login-scrim-1: rgba(13, 43, 94, 0.94);
--qs-login-scrim-2: rgba(13, 43, 94, 0.74);
--qs-login-scrim-3: rgba(13, 43, 94, 0.40);
--qs-login-scrim-flat: rgba(13, 43, 94, 0.28);
--qs-login-hero-text: rgba(255, 255, 255, 0.78);
--qs-login-hero-rule: var(--qs-gold-500);
--qs-login-panel-w: 460px;
background: var(--qs-surface);
min-height: 100vh;
margin: 0;
}
/* Split shell ------------------------------------------------------------ */
body.qs-v3 .qs-v3-login-split {
display: grid;
grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
min-height: 100vh;
}
/* Left: hero -------------------------------------------------------------- */
body.qs-v3 .qs-v3-login-hero {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
gap: var(--qs-sp-10);
padding: var(--qs-sp-12) clamp(var(--qs-sp-8), 5vw, var(--qs-sp-16));
overflow: hidden;
/* Solid navy fallback shows if login-hero.jpg is missing or still loading */
background-color: var(--qs-navy-900);
background-image:
linear-gradient(var(--qs-login-scrim-flat), var(--qs-login-scrim-flat)),
linear-gradient(105deg,
var(--qs-login-scrim-1) 0%,
var(--qs-login-scrim-2) 46%,
var(--qs-login-scrim-3) 100%),
url("../images/login-hero.jpg");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
body.qs-v3 .qs-v3-login-brand {
display: inline-flex;
align-items: center;
gap: var(--qs-sp-3);
color: var(--qs-gold-500);
font-family: var(--qs-font-display);
font-size: var(--qs-fs-4xl);
font-weight: var(--qs-fw-bold);
letter-spacing: -0.02em;
line-height: 1;
}
body.qs-v3 .qs-v3-login-brand svg {
width: 1.5em;
height: 1.5em;
flex-shrink: 0;
}
body.qs-v3 .qs-v3-login-hero-title {
font-family: var(--qs-font-display);
font-size: clamp(var(--qs-fs-4xl), 3.4vw, var(--qs-fs-5xl));
font-weight: var(--qs-fw-medium);
line-height: var(--qs-lh-tight);
letter-spacing: -0.02em;
color: #FFFFFF;
/* em-based so the 3-line wrap of the mockup holds as the size clamps */
max-width: 8em;
}
body.qs-v3 .qs-v3-login-rule {
width: var(--qs-sp-16);
height: 2px;
border: 0;
margin: var(--qs-sp-6) 0 0;
background: var(--qs-login-hero-rule);
}
body.qs-v3 .qs-v3-login-features {
display: flex;
flex-direction: column;
gap: var(--qs-sp-6);
margin: 0;
padding: 0;
list-style: none;
max-width: 46ch;
}
body.qs-v3 .qs-v3-login-feature {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: var(--qs-sp-4);
align-items: start;
}
body.qs-v3 .qs-v3-login-feature svg {
width: 26px;
height: 26px;
color: var(--qs-gold-500);
stroke: currentColor;
fill: none;
stroke-width: 1.5;
stroke-linecap: round;
stroke-linejoin: round;
flex-shrink: 0;
margin-top: 2px;
}
body.qs-v3 .qs-v3-login-feature h3 {
color: #FFFFFF;
font-family: var(--qs-font-ui);
font-size: var(--qs-fs-lg);
font-weight: var(--qs-fw-semibold);
letter-spacing: -0.005em;
}
body.qs-v3 .qs-v3-login-feature p {
color: var(--qs-login-hero-text);
font-size: var(--qs-fs-base);
line-height: var(--qs-lh-normal);
margin-top: var(--qs-sp-1);
}
/* Right: auth panel ------------------------------------------------------- */
body.qs-v3 .qs-v3-login-panel {
display: flex;
align-items: center;
justify-content: center;
padding: var(--qs-sp-10) var(--qs-sp-8);
background: var(--qs-surface);
}
body.qs-v3 .qs-v3-login-card {
width: 100%;
max-width: var(--qs-login-panel-w);
display: flex;
flex-direction: column;
}
body.qs-v3 .qs-v3-login-head {
text-align: center;
margin-bottom: var(--qs-sp-8);
}
body.qs-v3 .qs-v3-login-head h1 {
font-family: var(--qs-font-display);
font-size: var(--qs-fs-4xl);
font-weight: var(--qs-fw-bold);
color: var(--qs-navy-900);
letter-spacing: -0.02em;
}
body.qs-v3 .qs-v3-login-head p {
color: var(--qs-ink-500);
font-size: var(--qs-fs-lg);
margin-top: var(--qs-sp-2);
}
/* Form ------------------------------------------------------------------- */
body.qs-v3 #loginForm {
display: flex;
flex-direction: column;
gap: var(--qs-sp-5);
}
body.qs-v3 .qs-v3-login-field {
display: flex;
flex-direction: column;
gap: var(--qs-sp-2);
}
body.qs-v3 .qs-v3-login-field > label {
font-size: var(--qs-fs-base);
font-weight: var(--qs-fw-semibold);
color: var(--qs-ink-900);
}
/* Taller inputs than the base .qs-v3-input primitive, to match the mockup */
body.qs-v3 .qs-v3-login-field .qs-v3-input {
padding: 14px var(--qs-sp-4);
font-size: var(--qs-fs-lg);
border-color: var(--qs-border);
}
body.qs-v3 .qs-v3-login-field .qs-v3-input:hover { border-color: var(--qs-border-strong); }
/* Password + reveal toggle */
body.qs-v3 .qs-v3-login-password { position: relative; }
body.qs-v3 .qs-v3-login-password .qs-v3-input { padding-right: var(--qs-sp-12); }
body.qs-v3 .qs-v3-login-eye {
position: absolute;
top: 50%;
right: var(--qs-sp-2);
transform: translateY(-50%);
width: 36px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
background: transparent;
border: 0;
border-radius: var(--qs-r-sm);
color: var(--qs-ink-500);
cursor: pointer;
transition: color var(--qs-t-fast) var(--qs-ease),
background var(--qs-t-fast) var(--qs-ease);
}
body.qs-v3 .qs-v3-login-eye:hover { color: var(--qs-ink-800); background: var(--qs-ink-100); }
body.qs-v3 .qs-v3-login-eye svg {
width: 20px;
height: 20px;
stroke: currentColor;
fill: none;
stroke-width: 1.6;
stroke-linecap: round;
stroke-linejoin: round;
}
body.qs-v3 .qs-v3-login-eye .qs-v3-eye-off { display: none; }
body.qs-v3 .qs-v3-login-eye[aria-pressed="true"] .qs-v3-eye-on { display: none; }
body.qs-v3 .qs-v3-login-eye[aria-pressed="true"] .qs-v3-eye-off { display: block; }
/* "Forgot password? Contact admin" — informational text, no reset flow
exists backend-side, so this is deliberately not a link. */
body.qs-v3 .qs-v3-login-forgot {
align-self: flex-end;
font-size: var(--qs-fs-sm);
color: var(--qs-ink-500);
margin-top: calc(var(--qs-sp-2) * -1);
}
body.qs-v3 .qs-v3-login-submit {
width: 100%;
padding: 15px var(--qs-sp-5);
font-size: var(--qs-fs-lg);
border-radius: var(--qs-r-md);
margin-top: var(--qs-sp-1);
}
/* #authMessage keeps its .notice class only — auth.js rewrites className */
body.qs-v3 .notice {
margin: var(--qs-sp-4) 0 0;
border-radius: var(--qs-r-md);
border: 1px solid var(--qs-border);
padding: var(--qs-sp-3) var(--qs-sp-4);
font-size: var(--qs-fs-sm);
color: var(--qs-ink-700);
background: var(--qs-surface-alt);
}
body.qs-v3 .notice.success { border-color: var(--qs-success); color: #065F46; background: var(--qs-success-soft); }
body.qs-v3 .notice.error { border-color: var(--qs-danger); color: #991B1B; background: var(--qs-danger-soft); }
body.qs-v3 .notice.info { border-color: var(--qs-info); color: #1E40AF; background: var(--qs-info-soft); }
body.qs-v3 .notice.warning { border-color: var(--qs-warning); color: #92400E; background: var(--qs-warning-soft); }
/* Panel footer ------------------------------------------------------------ */
body.qs-v3 .qs-v3-login-secure {
display: flex;
align-items: center;
justify-content: center;
gap: var(--qs-sp-2);
margin-top: var(--qs-sp-5);
color: var(--qs-ink-500);
font-size: var(--qs-fs-sm);
}
body.qs-v3 .qs-v3-login-secure svg {
width: 14px;
height: 14px;
stroke: currentColor;
fill: none;
stroke-width: 1.6;
flex-shrink: 0;
}
body.qs-v3 .qs-v3-login-help {
margin-top: var(--qs-sp-8);
text-align: center;
color: var(--qs-ink-500);
font-size: var(--qs-fs-base);
}
body.qs-v3 .qs-v3-login-help strong {
color: var(--qs-navy-500);
font-weight: var(--qs-fw-semibold);
}
body.qs-v3 .qs-v3-login-foot {
margin-top: var(--qs-sp-8);
padding-top: var(--qs-sp-5);
border-top: 1px solid var(--qs-border);
display: flex;
flex-direction: column;
align-items: center;
gap: var(--qs-sp-2);
}
body.qs-v3 .qs-v3-login-copy {
color: var(--qs-ink-400);
font-size: var(--qs-fs-sm);
}
body.qs-v3 .qs-v3-login-setup {
color: var(--qs-ink-400);
font-size: var(--qs-fs-xs);
}
body.qs-v3 .qs-v3-login-setup:hover { color: var(--qs-navy-500); }
/* Responsive -------------------------------------------------------------- */
/* Below 1024px the hero becomes a banner above the form and drops bullets */
@media (max-width: 1024px) {
body.qs-v3 .qs-v3-login-split { grid-template-columns: 1fr; min-height: 0; }
body.qs-v3 .qs-v3-login-hero {
gap: var(--qs-sp-6);
padding: var(--qs-sp-10) var(--qs-sp-8);
background-image:
linear-gradient(var(--qs-login-scrim-flat), var(--qs-login-scrim-flat)),
linear-gradient(160deg,
var(--qs-login-scrim-1) 0%,
var(--qs-login-scrim-2) 60%,
var(--qs-login-scrim-3) 100%),
url("../images/login-hero.jpg");
}
body.qs-v3 .qs-v3-login-hero-title { font-size: var(--qs-fs-4xl); max-width: 14em; }
body.qs-v3 .qs-v3-login-features,
body.qs-v3 .qs-v3-login-rule { display: none; }
body.qs-v3 .qs-v3-login-panel { padding: var(--qs-sp-10) var(--qs-sp-6); }
}
@media (max-width: 600px) {
body.qs-v3 .qs-v3-login-hero { padding: var(--qs-sp-8) var(--qs-sp-5); }
body.qs-v3 .qs-v3-login-brand { font-size: var(--qs-fs-3xl); }
body.qs-v3 .qs-v3-login-hero-title { font-size: var(--qs-fs-3xl); }
body.qs-v3 .qs-v3-login-panel { padding: var(--qs-sp-8) var(--qs-sp-5); }
body.qs-v3 .qs-v3-login-head h1 { font-size: var(--qs-fs-3xl); }
body.qs-v3 .qs-v3-login-head p { font-size: var(--qs-fs-base); }
}
/* === WALLET RECHARGE (recharge.html) =================================== */
body.qs-v3.qs-v3-recharge { margin: 0; }
body.qs-v3 .qs-v3-topbar-spacer { flex: 1 1 auto; }
body.qs-v3 .qs-v3-page-actions {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--qs-sp-4);
}
body.qs-v3 .qs-v3-page-actions h1 { font-size: var(--qs-fs-2xl); }
body.qs-v3 .qs-v3-page-actions p { margin-top: var(--qs-sp-1); color: var(--qs-ink-500); }
body.qs-v3 .qs-v3-recharge-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
body.qs-v3 .qs-v3-recharge-layout {
display: grid;
grid-template-columns: minmax(0, 1.7fr) minmax(280px, 0.8fr);
gap: var(--qs-sp-5);
align-items: start;
}
body.qs-v3 .qs-v3-recharge-empty {
min-height: 320px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--qs-sp-3);
padding: var(--qs-sp-8);
text-align: center;
border: 1px dashed var(--qs-border);
border-radius: var(--qs-r-lg);
background: var(--qs-surface-alt);
}
body.qs-v3 .qs-v3-recharge-empty h3 { font-size: var(--qs-fs-xl); }
body.qs-v3 .qs-v3-recharge-empty p { max-width: 52ch; color: var(--qs-ink-500); }
body.qs-v3 .qs-v3-recharge-icon {
width: 64px;
height: 64px;
display: inline-grid;
place-items: center;
border-radius: var(--qs-r-xl);
background: var(--qs-surface-alt);
color: var(--qs-navy-500);
}
body.qs-v3 .qs-v3-recharge-icon svg { width: 30px; height: 30px; }
body.qs-v3 .qs-v3-recharge-request-card { overflow: hidden; }
body.qs-v3 .qs-v3-recharge-start-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 310px; gap: var(--qs-sp-5); align-items: stretch; }
body.qs-v3 .qs-v3-recharge-fieldset { min-width: 0; margin: 0; padding: var(--qs-sp-5); border: 1px solid var(--qs-border); border-radius: var(--qs-r-lg); background: var(--qs-surface-alt); }
body.qs-v3 .qs-v3-recharge-fieldset legend { padding: 0 var(--qs-sp-2); color: var(--qs-navy-900); font-weight: var(--qs-fw-semibold); }
body.qs-v3 .qs-v3-recharge-amounts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--qs-sp-2); margin-bottom: var(--qs-sp-4); }
body.qs-v3 .qs-v3-recharge-amounts button { min-height: 42px; border: 1px solid var(--qs-border); border-radius: var(--qs-r-md); color: var(--qs-ink-700); background: #fff; font: inherit; font-weight: var(--qs-fw-semibold); cursor: pointer; }
body.qs-v3 .qs-v3-recharge-amounts button:hover,
body.qs-v3 .qs-v3-recharge-amounts button.is-selected { border-color: var(--qs-navy-500); color: var(--qs-navy-700); background: var(--qs-info-soft); box-shadow: 0 0 0 2px rgba(37, 99, 235, .08); }
body.qs-v3 .qs-v3-recharge-field { display: grid; gap: 7px; color: var(--qs-ink-700); font-size: var(--qs-fs-sm); font-weight: var(--qs-fw-medium); }
body.qs-v3 .qs-v3-recharge-field b { color: var(--qs-danger); }
body.qs-v3 .qs-v3-recharge-field em { color: var(--qs-ink-400); font-size: var(--qs-fs-xs); font-style: normal; font-weight: var(--qs-fw-normal); }
body.qs-v3 .qs-v3-recharge-field small { color: var(--qs-ink-400); font-size: var(--qs-fs-xs); font-weight: var(--qs-fw-normal); }
body.qs-v3 .qs-v3-recharge-field input,
body.qs-v3 .qs-v3-recharge-field textarea { width: 100%; min-height: 44px; border: 1px solid var(--qs-border); border-radius: var(--qs-r-md); padding: 10px 12px; color: var(--qs-ink-800); background: #fff; font: inherit; }
body.qs-v3 .qs-v3-recharge-field textarea { resize: vertical; }
body.qs-v3 .qs-v3-money-input { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; border: 1px solid var(--qs-border); border-radius: var(--qs-r-md); background: #fff; overflow: hidden; }
body.qs-v3 .qs-v3-money-input > span { padding-left: 12px; color: var(--qs-ink-500); }
body.qs-v3 .qs-v3-money-input input { border: 0; border-radius: 0; }
body.qs-v3 .qs-v3-recharge-methods { display: grid; gap: var(--qs-sp-3); }
body.qs-v3 .qs-v3-recharge-methods label { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--qs-sp-3); align-items: center; min-height: 70px; padding: var(--qs-sp-3) var(--qs-sp-4); border: 1px solid var(--qs-border); border-radius: var(--qs-r-md); background: #fff; cursor: pointer; }
body.qs-v3 .qs-v3-recharge-methods label:has(input:checked) { border-color: var(--qs-navy-500); background: var(--qs-info-soft); box-shadow: 0 0 0 2px rgba(37, 99, 235, .08); }
body.qs-v3 .qs-v3-recharge-methods input { width: 18px; height: 18px; accent-color: var(--qs-navy-500); }
body.qs-v3 .qs-v3-recharge-methods strong,
body.qs-v3 .qs-v3-recharge-methods small { display: block; }
body.qs-v3 .qs-v3-recharge-methods small { margin-top: 2px; color: var(--qs-ink-500); font-size: var(--qs-fs-xs); }
body.qs-v3 .qs-v3-recharge-calculation { display: flex; flex-direction: column; padding: var(--qs-sp-5); border: 1px solid #E8D49E; border-radius: var(--qs-r-lg); background: #FFFBEB; }
body.qs-v3 .qs-v3-recharge-calculation > div { display: flex; justify-content: space-between; gap: var(--qs-sp-3); padding: 7px 0; color: var(--qs-ink-600); font-size: var(--qs-fs-sm); }
body.qs-v3 .qs-v3-recharge-calculation > div.total { margin-top: 5px; padding-top: 13px; border-top: 1px solid #E8D49E; color: var(--qs-navy-900); font-size: var(--qs-fs-base); }
body.qs-v3 .qs-v3-recharge-calculation > div.total strong { font-size: var(--qs-fs-xl); }
body.qs-v3 .qs-v3-recharge-calculation p { margin: auto 0 0; padding-top: var(--qs-sp-4); color: var(--qs-ink-500); font-size: var(--qs-fs-xs); line-height: 1.55; }
body.qs-v3 .qs-v3-recharge-start-form > .qs-v3-btn { grid-column: 1 / -1; justify-self: end; min-width: 220px; }
body.qs-v3 .qs-v3-recharge-payment { border: 1px solid var(--qs-border); border-radius: var(--qs-r-lg); background: var(--qs-surface-alt); overflow: hidden; }
body.qs-v3 .qs-v3-recharge-request-head { display: flex; align-items: center; justify-content: space-between; gap: var(--qs-sp-4); padding: var(--qs-sp-4) var(--qs-sp-5); border-bottom: 1px solid var(--qs-border); background: #fff; }
body.qs-v3 .qs-v3-recharge-request-head > div span,
body.qs-v3 .qs-v3-recharge-request-head > div strong { display: block; }
body.qs-v3 .qs-v3-recharge-request-head > div span { color: var(--qs-navy-500); font-size: var(--qs-fs-xs); font-weight: var(--qs-fw-bold); letter-spacing: .07em; }
body.qs-v3 .qs-v3-recharge-request-head > div strong { margin-top: 3px; color: var(--qs-navy-900); }
body.qs-v3 .qs-v3-recharge-pay-grid { display: grid; grid-template-columns: minmax(280px, .8fr) minmax(320px, 1.2fr); gap: var(--qs-sp-5); padding: var(--qs-sp-5); }
body.qs-v3 .qs-v3-recharge-qr,
body.qs-v3 .qs-v3-recharge-bank,
body.qs-v3 .qs-v3-recharge-confirm-form { padding: var(--qs-sp-5); border: 1px solid var(--qs-border); border-radius: var(--qs-r-lg); background: #fff; }
body.qs-v3 .qs-v3-recharge-section-label { display: block; margin-bottom: var(--qs-sp-4); color: var(--qs-navy-900); font-weight: var(--qs-fw-semibold); }
body.qs-v3 .qs-v3-recharge-qr { grid-row: span 1; text-align: center; }
body.qs-v3 .qs-v3-recharge-qr img { display: block; width: min(100%, 310px); max-height: 390px; margin: 0 auto var(--qs-sp-4); border: 1px solid var(--qs-border); border-radius: var(--qs-r-md); object-fit: contain; }
body.qs-v3 .qs-v3-recharge-qr > strong { display: block; color: var(--qs-navy-900); }
body.qs-v3 .qs-v3-recharge-qr > div { display: flex; align-items: center; justify-content: center; gap: var(--qs-sp-2); margin-top: var(--qs-sp-2); color: var(--qs-ink-500); font-size: var(--qs-fs-xs); overflow-wrap: anywhere; }
body.qs-v3 .qs-v3-recharge-qr button,
body.qs-v3 .qs-v3-recharge-bank button,
body.qs-v3 .qs-v3-recharge-row-actions button { border: 0; padding: 2px 5px; color: var(--qs-navy-500); background: transparent; font: inherit; font-size: var(--qs-fs-xs); font-weight: var(--qs-fw-semibold); cursor: pointer; }
body.qs-v3 .qs-v3-recharge-qr p { margin: var(--qs-sp-4) 0 0; padding: var(--qs-sp-3); border-radius: var(--qs-r-md); color: #92400E; background: var(--qs-warning-soft); font-size: var(--qs-fs-sm); }
body.qs-v3 .qs-v3-recharge-bank dl { display: grid; margin: 0; }
body.qs-v3 .qs-v3-recharge-bank dl > div { display: grid; grid-template-columns: 135px minmax(0, 1fr); gap: var(--qs-sp-3); padding: 11px 0; border-bottom: 1px solid var(--qs-border); }
body.qs-v3 .qs-v3-recharge-bank dt { color: var(--qs-ink-500); font-size: var(--qs-fs-sm); }
body.qs-v3 .qs-v3-recharge-bank dd { margin: 0; color: var(--qs-ink-800); font-weight: var(--qs-fw-semibold); overflow-wrap: anywhere; }
body.qs-v3 .qs-v3-recharge-bank dl > div.total { border-bottom: 0; color: var(--qs-navy-900); }
body.qs-v3 .qs-v3-recharge-bank dl > div.total dd { font-size: var(--qs-fs-xl); }
body.qs-v3 .qs-v3-recharge-confirm-form { display: grid; gap: var(--qs-sp-4); }
body.qs-v3 .qs-v3-recharge-confirm-form input[type="file"] { padding: 7px; }
body.qs-v3 .qs-v3-recharge-declaration { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--qs-sp-2); align-items: start; color: var(--qs-ink-600); font-size: var(--qs-fs-sm); cursor: pointer; }
body.qs-v3 .qs-v3-recharge-declaration input { width: 17px; height: 17px; margin-top: 1px; accent-color: var(--qs-navy-500); }
body.qs-v3 .qs-v3-recharge-form-actions { display: flex; justify-content: flex-end; gap: var(--qs-sp-3); }
body.qs-v3 .qs-v3-recharge-table-wrap { overflow-x: auto; }
body.qs-v3 .qs-v3-recharge-table-wrap table { width: 100%; min-width: 950px; border-collapse: collapse; }
body.qs-v3 .qs-v3-recharge-table-wrap th { padding: 12px; border-bottom: 1px solid var(--qs-border); color: var(--qs-ink-500); background: var(--qs-surface-alt); font-size: var(--qs-fs-xs); text-align: left; text-transform: uppercase; letter-spacing: .03em; }
body.qs-v3 .qs-v3-recharge-table-wrap td { padding: 13px 12px; border-bottom: 1px solid var(--qs-border); color: var(--qs-ink-700); font-size: var(--qs-fs-sm); vertical-align: top; }
body.qs-v3 .qs-v3-recharge-table-wrap td strong,
body.qs-v3 .qs-v3-recharge-table-wrap td small { display: block; }
body.qs-v3 .qs-v3-recharge-table-wrap td small { margin-top: 3px; color: var(--qs-ink-400); }
body.qs-v3 .qs-v3-recharge-status { display: inline-flex; padding: 5px 9px; border-radius: var(--qs-r-full); color: var(--qs-ink-600); background: var(--qs-surface-alt); font-size: var(--qs-fs-xs); font-weight: var(--qs-fw-semibold); white-space: nowrap; }
body.qs-v3 .qs-v3-recharge-status.pending_verification { color: #92400E; background: var(--qs-warning-soft); }
body.qs-v3 .qs-v3-recharge-status.approved { color: #065F46; background: var(--qs-success-soft); }
body.qs-v3 .qs-v3-recharge-status.rejected,
body.qs-v3 .qs-v3-recharge-status.cancelled { color: #991B1B; background: var(--qs-danger-soft); }
body.qs-v3 .qs-v3-recharge-review-note { max-width: 210px; line-height: 1.4; }
body.qs-v3 .qs-v3-recharge-row-actions { display: flex; flex-wrap: wrap; gap: 5px; }
body.qs-v3 .qs-v3-recharge-row-actions a { color: var(--qs-navy-500); font-size: var(--qs-fs-xs); font-weight: var(--qs-fw-semibold); }
body.qs-v3 .qs-v3-recharge-row-actions button.danger { color: var(--qs-danger); }
body.qs-v3 .qs-v3-recharge-no-records { padding: var(--qs-sp-6); color: var(--qs-ink-500); text-align: center; }
@media (max-width: 1100px) {
body.qs-v3 .qs-v3-recharge-layout { grid-template-columns: minmax(0, 1fr); }
body.qs-v3 .qs-v3-recharge-start-form { grid-template-columns: 1fr 1fr; }
body.qs-v3 .qs-v3-recharge-calculation { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
body.qs-v3 .qs-v3-recharge-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body.qs-v3 .qs-v3-recharge-pay-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
body.qs-v3 .qs-v3-recharge-stats { grid-template-columns: 1fr; }
body.qs-v3 .qs-v3-page-actions { flex-direction: column; }
body.qs-v3 .qs-v3-page-actions .qs-v3-btn { width: 100%; }
body.qs-v3 .qs-v3-recharge-empty { min-height: 0; padding: var(--qs-sp-6) var(--qs-sp-4); }
body.qs-v3 .qs-v3-recharge-empty .qs-v3-btn { width: 100%; }
body.qs-v3 .qs-v3-recharge-start-form { grid-template-columns: 1fr; }
body.qs-v3 .qs-v3-recharge-calculation { grid-column: auto; }
body.qs-v3 .qs-v3-recharge-start-form > .qs-v3-btn { width: 100%; min-width: 0; }
body.qs-v3 .qs-v3-recharge-amounts { grid-template-columns: 1fr 1fr; }
body.qs-v3 .qs-v3-recharge-pay-grid { padding: var(--qs-sp-3); }
body.qs-v3 .qs-v3-recharge-qr,
body.qs-v3 .qs-v3-recharge-bank,
body.qs-v3 .qs-v3-recharge-confirm-form { padding: var(--qs-sp-4); }
body.qs-v3 .qs-v3-recharge-bank dl > div { grid-template-columns: 1fr; gap: 3px; }
body.qs-v3 .qs-v3-recharge-form-actions { flex-direction: column-reverse; }
body.qs-v3 .qs-v3-recharge-form-actions .qs-v3-btn { width: 100%; }
}
/* Login enhancements: same visual system, inline OTP and rotating promos. */
body.qs-v3 .qs-v3-login-promo-track {
min-height: clamp(174px, 15vw, 216px);
display: flex;
align-items: flex-end;
}
body.qs-v3 .qs-v3-login-promo-slide { width: 100%; }
body.qs-v3 .qs-v3-login-promo-slide[hidden] { display: none !important; }
body.qs-v3 .qs-v3-login-promo-controls {
display: flex;
align-items: center;
gap: var(--qs-sp-3);
margin-top: var(--qs-sp-5);
}
body.qs-v3 .qs-v3-login-promo-arrow {
width: 30px;
height: 30px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 50%;
padding: 0;
color: #fff;
background: rgba(255, 255, 255, 0.08);
cursor: pointer;
}
body.qs-v3 .qs-v3-login-promo-arrow:hover,
body.qs-v3 .qs-v3-login-promo-arrow:focus-visible { border-color: var(--qs-gold-500); color: var(--qs-gold-500); }
body.qs-v3 .qs-v3-login-promo-arrow svg {
width: 17px;
height: 17px;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
body.qs-v3 .qs-v3-login-promo-dots { display: inline-flex; align-items: center; gap: 7px; }
body.qs-v3 .qs-v3-login-promo-dots button {
width: 7px;
height: 7px;
border: 0;
border-radius: 999px;
padding: 0;
background: rgba(255, 255, 255, 0.45);
cursor: pointer;
transition: width var(--qs-t-fast) var(--qs-ease), background var(--qs-t-fast) var(--qs-ease);
}
body.qs-v3 .qs-v3-login-promo-dots button[aria-selected="true"] { width: 24px; background: var(--qs-gold-500); }
body.qs-v3 .qs-v3-login-forgot a { color: inherit; text-decoration: none; }
body.qs-v3 .qs-v3-login-forgot a:hover,
body.qs-v3 .qs-v3-login-forgot a:focus-visible { color: var(--qs-navy-500); text-decoration: underline; }
body.qs-v3 #loginForm[hidden] { display: none !important; }
body.qs-v3 .qs-v3-login-otp[hidden] { display: none !important; }
body.qs-v3 #loginOtpForm { display: flex; flex-direction: column; gap: var(--qs-sp-5); }
body.qs-v3 .qs-v3-login-otp-note {
margin: 0 0 var(--qs-sp-5);
color: var(--qs-ink-500);
font-size: var(--qs-fs-sm);
line-height: var(--qs-lh-normal);
text-align: center;
}
body.qs-v3 .qs-v3-login-otp-note strong { color: var(--qs-ink-700); }
body.qs-v3 .qs-v3-login-otp-input {
text-align: center;
letter-spacing: 0.3em;
font-variant-numeric: tabular-nums;
}
body.qs-v3 .qs-v3-login-otp-actions {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--qs-sp-4);
margin-top: var(--qs-sp-4);
}
body.qs-v3 .qs-v3-login-text-button {
border: 0;
padding: var(--qs-sp-1) 0;
color: var(--qs-navy-500);
background: transparent;
font: inherit;
font-size: var(--qs-fs-sm);
font-weight: var(--qs-fw-semibold);
cursor: pointer;
}
body.qs-v3 .qs-v3-login-text-button:hover,
body.qs-v3 .qs-v3-login-text-button:focus-visible { text-decoration: underline; }
body.qs-v3 .qs-v3-login-text-button:disabled { color: var(--qs-ink-400); cursor: wait; text-decoration: none; }
body.qs-v3 .qs-v3-login-help button {
border: 0;
padding: 0;
color: var(--qs-navy-500);
background: transparent;
font: inherit;
font-weight: var(--qs-fw-semibold);
cursor: pointer;
}
body.qs-v3 .qs-v3-login-help button:hover,
body.qs-v3 .qs-v3-login-help button:focus-visible { text-decoration: underline; }
body.qs-v3 .qs-v3-login-support-modal {
position: fixed;
inset: 0;
z-index: 1200;
display: grid;
place-items: center;
padding: var(--qs-sp-5);
}
body.qs-v3 .qs-v3-login-support-backdrop {
position: absolute;
inset: 0;
background: rgba(7, 25, 52, .68);
backdrop-filter: blur(5px);
}
body.qs-v3 .qs-v3-login-support-dialog {
position: relative;
width: min(620px, 100%);
max-height: calc(100vh - 40px);
overflow-y: auto;
padding: 34px;
border: 1px solid rgba(215, 223, 235, .95);
border-radius: 22px;
background: #fff;
box-shadow: 0 28px 80px rgba(5, 24, 52, .3);
}
body.qs-v3 .qs-v3-login-support-close {
position: absolute;
top: 18px;
right: 18px;
width: 40px;
height: 40px;
display: grid;
place-items: center;
border: 1px solid var(--qs-border);
border-radius: 12px;
color: var(--qs-ink-600);
background: #fff;
cursor: pointer;
}
body.qs-v3 .qs-v3-login-support-close:hover,
body.qs-v3 .qs-v3-login-support-close:focus-visible { color: var(--qs-navy-700); border-color: var(--qs-navy-400); background: var(--qs-surface-alt); }
body.qs-v3 .qs-v3-login-support-close svg {
width: 19px;
height: 19px;
fill: none;
stroke: currentColor;
stroke-width: 1.9;
stroke-linecap: round;
}
body.qs-v3 .qs-v3-login-support-kicker {
display: inline-block;
margin-bottom: 8px;
color: var(--qs-navy-500);
font-size: 12px;
font-weight: 800;
letter-spacing: .11em;
}
body.qs-v3 .qs-v3-login-support-dialog h2 {
margin: 0 48px 8px 0;
color: var(--qs-navy-900);
font-family: var(--qs-font-display);
font-size: 30px;
line-height: 1.15;
}
body.qs-v3 .qs-v3-login-support-dialog > p:not(.qs-v3-login-support-security) {
margin: 0;
color: var(--qs-ink-500);
font-size: 15px;
line-height: 1.65;
}
body.qs-v3 .qs-v3-login-support-options {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
margin-top: 24px;
}
body.qs-v3 .qs-v3-login-support-option {
min-width: 0;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 13px;
padding: 17px;
border: 1px solid var(--qs-border);
border-radius: 15px;
color: var(--qs-ink-800);
background: #fff;
text-decoration: none;
transition: transform var(--qs-t-fast) var(--qs-ease), border-color var(--qs-t-fast) var(--qs-ease), box-shadow var(--qs-t-fast) var(--qs-ease);
}
body.qs-v3 .qs-v3-login-support-option:hover,
body.qs-v3 .qs-v3-login-support-option:focus-visible {
transform: translateY(-2px);
border-color: var(--qs-navy-400);
box-shadow: 0 10px 26px rgba(18, 54, 102, .11);
}
body.qs-v3 .qs-v3-login-support-option > span:last-child { min-width: 0; }
body.qs-v3 .qs-v3-login-support-option strong { display: block; color: var(--qs-navy-900); font-size: 14px; }
body.qs-v3 .qs-v3-login-support-option small { display: block; margin-top: 4px; overflow-wrap: anywhere; color: var(--qs-ink-500); font-size: 12px; line-height: 1.35; }
body.qs-v3 .qs-v3-login-support-icon {
width: 42px;
height: 42px;
display: grid;
place-items: center;
border-radius: 13px;
color: var(--qs-navy-700);
background: var(--qs-info-soft);
}
body.qs-v3 .qs-v3-login-support-icon.whatsapp { color: #087A46; background: #E6F7EF; }
body.qs-v3 .qs-v3-login-support-icon.email { color: #9A6508; background: #FFF6DE; }
body.qs-v3 .qs-v3-login-support-icon svg {
width: 21px;
height: 21px;
fill: none;
stroke: currentColor;
stroke-width: 1.7;
stroke-linecap: round;
stroke-linejoin: round;
}
body.qs-v3 .qs-v3-login-support-security {
display: flex;
align-items: center;
gap: 9px;
margin: 22px 0 0;
padding-top: 18px;
border-top: 1px solid var(--qs-border);
color: var(--qs-ink-500);
font-size: 13px;
}
body.qs-v3 .qs-v3-login-support-security svg {
width: 16px;
height: 16px;
flex: 0 0 auto;
fill: none;
stroke: currentColor;
stroke-width: 1.6;
}
@media (max-width: 1024px) {
body.qs-v3 .qs-v3-login-promo-track { min-height: auto; align-items: flex-start; }
}
@media (max-width: 600px) {
body.qs-v3 .qs-v3-login-promo-controls { margin-top: var(--qs-sp-4); }
body.qs-v3 .qs-v3-login-otp-actions { align-items: stretch; flex-direction: column; gap: var(--qs-sp-2); }
body.qs-v3 .qs-v3-login-support-modal { padding: 12px; align-items: end; }
body.qs-v3 .qs-v3-login-support-dialog { max-height: calc(100vh - 24px); padding: 28px 20px 22px; border-radius: 20px; }
body.qs-v3 .qs-v3-login-support-options { grid-template-columns: 1fr; }
body.qs-v3 .qs-v3-login-support-option { flex-direction: row; align-items: center; }
}
/* === DASHBOARD (agent.html) ==============================================
Platform brand in the sidebar; agency (tenant) identity in the topbar.
Hooks styled by ID / existing class, never by an added qs-v3- class,
because agent-dashboard.js overwrites className on these:
#accountStatusBadge -> badge.className = statusClass(status)
#creditWarning, #recentQuotesMessage, #creditHistoryMessage -> setMessage()
Also driven by inline style from JS:
#creditWidget -> --credit-used-percent
#creditProgressBar -> width
#recentQuotesList has its innerHTML replaced by agent-dashboard.js, so the
table it emits (.agent-table.recent-quotes-table) is styled here rather
than rewritten.
========================================================================== */
body.qs-v3.qs-v3-dashboard {
--qs-dash-rail: 340px;
margin: 0;
}
/* This topbar carries more than the base one (agency chip + avatar menu), so
the greeting gets flex priority and the search yields. Deliberately no
ellipsis on the greeting: a long agency name wraps rather than truncates. */
body.qs-v3.qs-v3-dashboard .qs-v3-topbar-title { flex: 1 1 400px; }
body.qs-v3.qs-v3-dashboard .qs-v3-search { flex: 0 1 220px; min-width: 0; }
/* Only the title and search may absorb the squeeze; the pill and chip hold
their natural width so the balance and agency name stay readable. */
body.qs-v3.qs-v3-dashboard .qs-v3-credit-pill {
flex-shrink: 0;
white-space: nowrap;
}
body.qs-v3.qs-v3-dashboard .qs-v3-agency-chip,
body.qs-v3.qs-v3-dashboard .qs-v3-topbar-icon { flex-shrink: 0; }
/* Search collapse: icon button only appears once the field is hidden. */
body.qs-v3 .qs-v3-search-toggle { display: none; }
body.qs-v3 .qs-v3-search input { min-width: 0; }
/* Sidebar extras ---------------------------------------------------------- */
body.qs-v3 .qs-v3-plan-card svg { width: 18px; height: 18px; }
body.qs-v3 .qs-v3-plan-link {
display: inline-flex;
align-items: center;
justify-content: space-between;
gap: var(--qs-sp-2);
width: 100%;
margin-top: var(--qs-sp-3);
padding-top: var(--qs-sp-3);
border-top: 1px solid var(--qs-sidebar-divider);
color: var(--qs-sidebar-text-strong);
font-size: var(--qs-fs-xs);
font-weight: var(--qs-fw-medium);
}
body.qs-v3 .qs-v3-plan-link svg { width: 14px; height: 14px; stroke: currentColor; fill: none; }
body.qs-v3 .qs-v3-plan-link:hover { color: var(--qs-gold-400); }
/* Topbar: agency chip ----------------------------------------------------- */
body.qs-v3 .qs-v3-agency-chip {
display: flex;
align-items: center;
gap: var(--qs-sp-3);
padding-left: var(--qs-sp-4);
border-left: 1px solid var(--qs-border);
min-width: 0;
}
body.qs-v3 .qs-v3-agency-logo {
width: 32px;
height: 32px;
border-radius: var(--qs-r-md);
background: var(--qs-ink-100);
color: var(--qs-ink-600);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: var(--qs-fs-xs);
font-weight: var(--qs-fw-semibold);
overflow: hidden;
flex-shrink: 0;
}
/* renderLogo() injects either an ![]()
or .logo-placeholder here */
body.qs-v3 .qs-v3-agency-logo img { width: 100%; height: 100%; object-fit: contain; }
body.qs-v3 .qs-v3-agency-logo .logo-placeholder {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
body.qs-v3 .qs-v3-agency-meta { min-width: 0; line-height: var(--qs-lh-snug); }
body.qs-v3 .qs-v3-agency-meta strong {
display: block;
font-size: var(--qs-fs-sm);
font-weight: var(--qs-fw-semibold);
color: var(--qs-ink-800);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 140px;
}
body.qs-v3 .qs-v3-agency-meta span {
display: block;
font-size: var(--qs-fs-xs);
color: var(--qs-ink-500);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 140px;
}
/* Topbar: avatar menu ----------------------------------------------------- */
body.qs-v3 .qs-v3-avatar-menu { position: relative; flex-shrink: 0; }
body.qs-v3 .qs-v3-avatar-btn:hover { border-color: var(--qs-ink-400); }
body.qs-v3 .qs-v3-avatar-chevron { width: 16px; height: 16px; color: var(--qs-ink-500); }
body.qs-v3 .qs-v3-menu {
position: absolute;
top: calc(100% + var(--qs-sp-2));
right: 0;
min-width: 220px;
padding: var(--qs-sp-2);
background: var(--qs-surface);
border: 1px solid var(--qs-border);
border-radius: var(--qs-r-lg);
box-shadow: var(--qs-sh-lg);
z-index: 50;
}
body.qs-v3 .qs-v3-menu-head {
padding: var(--qs-sp-2) var(--qs-sp-3);
font-size: var(--qs-fs-xs);
color: var(--qs-ink-500);
border-bottom: 1px solid var(--qs-border);
margin-bottom: var(--qs-sp-1);
}
body.qs-v3 .qs-v3-menu-head strong { display: block; color: var(--qs-ink-900); font-size: var(--qs-fs-sm); }
body.qs-v3 .qs-v3-menu-item {
display: block;
width: 100%;
padding: var(--qs-sp-2) var(--qs-sp-3);
border: 0;
border-radius: var(--qs-r-sm);
background: transparent;
color: var(--qs-ink-700);
font-family: inherit;
font-size: var(--qs-fs-sm);
text-align: left;
cursor: pointer;
}
body.qs-v3 .qs-v3-menu-item:hover { background: var(--qs-ink-100); color: var(--qs-ink-900); }
body.qs-v3 .qs-v3-menu-item-danger { color: var(--qs-danger); }
body.qs-v3 .qs-v3-menu-item-danger:hover { background: var(--qs-danger-soft); color: var(--qs-danger); }
/* Content grids ----------------------------------------------------------- */
body.qs-v3 .qs-v3-dash-actions { display: flex; justify-content: flex-end; }
/* Dashboard top block: hero + quick actions on the left, Credit Usage on the
right. Both columns share one row so their bottom edges can align. */
body.qs-v3 .qs-v3-dash-columns {
display: grid;
grid-template-columns: minmax(0, 1fr) var(--qs-dash-rail);
gap: var(--qs-sp-6);
align-items: stretch;
}
body.qs-v3 .qs-v3-dash-col {
display: flex;
flex-direction: column;
gap: var(--qs-sp-6);
min-width: 0;
height: 100%;
}
body.qs-v3.qs-v3-dashboard .qs-v3-dashboard-quick-card {
display: flex;
flex: 1;
flex-direction: column;
}
body.qs-v3.qs-v3-dashboard .qs-v3-dash-col:last-child .credit-widget-panel {
height: 100%;
}
body.qs-v3.qs-v3-dashboard.qs-v3-no-billing .qs-v3-dash-columns {
grid-template-columns: minmax(0, 1fr);
}
body.qs-v3.qs-v3-dashboard.qs-v3-no-billing .qs-v3-dash-col:last-child {
display: none;
}
/* Hero card --------------------------------------------------------------- */
body.qs-v3 .qs-v3-hero-card {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr) 40%;
min-height: 300px;
border-radius: var(--qs-r-xl);
background: var(--qs-navy-900);
overflow: hidden;
box-shadow: var(--qs-sh-sm);
}
body.qs-v3 .qs-v3-hero-content {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
gap: var(--qs-sp-4);
padding: var(--qs-sp-8);
z-index: 1;
}
body.qs-v3 .qs-v3-hero-slide {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
gap: var(--qs-sp-4);
width: 100%;
min-height: 190px;
}
body.qs-v3 .qs-v3-hero-slide[hidden] { display: none; }
body.qs-v3 .qs-v3-hero-controls {
display: flex;
align-items: center;
gap: var(--qs-sp-3);
margin-top: auto;
}
body.qs-v3 .qs-v3-hero-arrow {
width: 28px;
height: 28px;
display: inline-grid;
place-items: center;
border: 1px solid rgba(255, 255, 255, 0.28);
border-radius: var(--qs-r-full);
background: rgba(255, 255, 255, 0.10);
color: #FFFFFF;
font: inherit;
font-size: 20px;
line-height: 1;
cursor: pointer;
}
body.qs-v3 .qs-v3-hero-arrow:hover,
body.qs-v3 .qs-v3-hero-arrow:focus-visible { background: rgba(255, 255, 255, 0.18); }
body.qs-v3 .qs-v3-hero-dots { display: flex; align-items: center; gap: 7px; }
body.qs-v3 .qs-v3-hero-dots button {
width: 7px;
height: 7px;
padding: 0;
border: 0;
border-radius: var(--qs-r-full);
background: rgba(255, 255, 255, 0.40);
cursor: pointer;
}
body.qs-v3 .qs-v3-hero-dots button[aria-current="true"] {
width: 20px;
background: var(--qs-gold-500);
}
body.qs-v3 .qs-v3-hero-kicker {
display: inline-flex;
padding: var(--qs-sp-1) var(--qs-sp-3);
border: 1px solid var(--qs-gold-500);
border-radius: var(--qs-r-full);
color: var(--qs-gold-400);
font-size: var(--qs-fs-xs);
font-weight: var(--qs-fw-medium);
letter-spacing: 0.02em;
}
body.qs-v3 .qs-v3-hero-card h2 {
font-family: var(--qs-font-display);
font-size: var(--qs-fs-3xl);
font-weight: var(--qs-fw-medium);
line-height: var(--qs-lh-tight);
color: #FFFFFF;
max-width: 14em;
}
body.qs-v3 .qs-v3-hero-card p {
color: rgba(255, 255, 255, 0.76);
font-size: var(--qs-fs-base);
max-width: 42ch;
}
body.qs-v3 .qs-v3-hero-btn-ghost {
background: rgba(255, 255, 255, 0.10);
color: #FFFFFF;
border-color: rgba(255, 255, 255, 0.28);
}
body.qs-v3 .qs-v3-hero-btn-ghost:hover { background: rgba(255, 255, 255, 0.18); }
/* Keep both hero button labels readable over the navy banner. The generic
body.qs-v3 a:hover rule otherwise changes link text to navy on hover. */
body.qs-v3 .qs-v3-hero-card .qs-v3-btn-primary:hover,
body.qs-v3 .qs-v3-hero-card .qs-v3-btn-primary:focus-visible,
body.qs-v3 .qs-v3-hero-card .qs-v3-hero-btn-ghost:hover,
body.qs-v3 .qs-v3-hero-card .qs-v3-hero-btn-ghost:focus-visible {
color: #FFFFFF;
text-decoration: none;
}
body.qs-v3 .qs-v3-hero-visual {
position: relative;
background-color: var(--qs-navy-800);
background-image: url("../images/agent-dashboard-hero-v1.png");
background-size: cover;
background-position: center;
}
/* Feathers the photo into the navy panel instead of a hard seam */
body.qs-v3 .qs-v3-hero-visual::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg, var(--qs-navy-900) 0%, rgba(13, 43, 94, 0.55) 38%, rgba(13, 43, 94, 0) 100%);
}
/* Credit usage card ------------------------------------------------------- */
body.qs-v3 .qs-v3-credit-layout {
display: flex;
align-items: center;
gap: var(--qs-sp-5);
margin-bottom: var(--qs-sp-5);
}
/* Ring reads "used", matching --credit-used-percent and the existing
app.css .credit-donut semantics. See changelog note. */
body.qs-v3 .qs-v3-donut {
position: relative;
display: grid;
place-items: center;
width: 112px;
height: 112px;
border-radius: var(--qs-r-full);
flex-shrink: 0;
background: conic-gradient(
var(--qs-navy-500) var(--credit-used-percent, 0%),
var(--qs-ink-200) 0
);
}
body.qs-v3 .qs-v3-donut::after {
content: "";
position: absolute;
inset: 12px;
border-radius: inherit;
background: var(--qs-surface);
}
body.qs-v3 .qs-v3-donut-center {
position: relative;
z-index: 1;
text-align: center;
line-height: 1.1;
}
body.qs-v3 .qs-v3-donut-center strong {
display: block;
font-size: var(--qs-fs-2xl);
font-weight: var(--qs-fw-semibold);
color: var(--qs-ink-900);
}
body.qs-v3 .qs-v3-donut-center span { font-size: var(--qs-fs-xs); color: var(--qs-ink-500); }
body.qs-v3 .qs-v3-credit-headline strong {
display: block;
font-size: var(--qs-fs-2xl);
font-weight: var(--qs-fw-semibold);
color: var(--qs-ink-900);
line-height: var(--qs-lh-tight);
}
/* Child combinator: the spans inside carry the numbers and must keep
the headline size. Only the caption span is targeted here. */
body.qs-v3 .qs-v3-credit-headline > span {
font-size: var(--qs-fs-sm);
color: var(--qs-ink-500);
}
body.qs-v3 .qs-v3-credit-list { margin: 0 0 var(--qs-sp-5); padding: 0; }
body.qs-v3 .qs-v3-credit-list > div {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--qs-sp-3);
padding: var(--qs-sp-3) 0;
border-top: 1px solid var(--qs-border);
}
body.qs-v3 .qs-v3-credit-list dt { color: var(--qs-ink-500); font-size: var(--qs-fs-sm); }
body.qs-v3 .qs-v3-credit-list dd {
margin: 0;
color: var(--qs-ink-900);
font-size: var(--qs-fs-sm);
font-weight: var(--qs-fw-semibold);
}
body.qs-v3 .qs-v3-credit-meter { margin-bottom: var(--qs-sp-4); }
body.qs-v3 .qs-v3-credit-meter strong { font-size: var(--qs-fs-xs); color: var(--qs-ink-700); }
/* #creditProgressBar gets its width inline from JS */
body.qs-v3 .credit-progress {
height: 6px;
margin-top: var(--qs-sp-2);
border-radius: var(--qs-r-full);
background: var(--qs-ink-200);
overflow: hidden;
}
body.qs-v3 .credit-progress span {
display: block;
height: 100%;
border-radius: inherit;
background: var(--qs-navy-500);
transition: width var(--qs-t-slow) var(--qs-ease);
}
body.qs-v3 .qs-v3-credit-usage-btn { width: 100%; margin-top: var(--qs-sp-4); }
/* #accountStatusBadge — className is overwritten by JS to
"status-pill active|suspended", so style the base class. */
body.qs-v3 .status-pill {
display: inline-flex;
align-items: center;
padding: 2px 10px;
border-radius: var(--qs-r-full);
font-size: var(--qs-fs-xs);
font-weight: var(--qs-fw-semibold);
text-transform: capitalize;
background: var(--qs-ink-100);
color: var(--qs-ink-700);
}
body.qs-v3 .status-pill.active { background: var(--qs-success-soft); color: #065F46; }
body.qs-v3 .status-pill.suspended { background: var(--qs-danger-soft); color: #991B1B; }
/* Quote status badges ----------------------------------------------------- */
/* Real, backend-supported statuses (quotes.js cleanQuoteStatus whitelist). */
body.qs-v3 .qs-v3-badge-draft { background: var(--qs-ink-100); color: var(--qs-ink-700); }
body.qs-v3 .qs-v3-badge-saved { background: var(--qs-info-soft); color: #1E40AF; }
body.qs-v3 .qs-v3-badge-sent { background: var(--qs-gold-100); color: #7C5A16; }
/* Forward compatibility: not in the data model yet. If the backend starts
returning these statuses they pick up styling automatically. */
body.qs-v3 .qs-v3-badge-viewed { background: var(--qs-purple-soft); color: #6D28D9; }
body.qs-v3 .qs-v3-badge-accepted { background: var(--qs-success-soft); color: #065F46; }
/* Recent Quotes: styling the markup agent-dashboard.js emits --------------- */
body.qs-v3 .qs-v3-table-card { padding: var(--qs-sp-6) var(--qs-sp-6) var(--qs-sp-2); }
body.qs-v3 .qs-v3-table-card .qs-v3-card-header { margin-bottom: var(--qs-sp-2); }
body.qs-v3 .qs-v3-link-arrow {
display: inline-flex;
align-items: center;
gap: var(--qs-sp-1);
font-size: var(--qs-fs-sm);
font-weight: var(--qs-fw-medium);
white-space: nowrap;
}
body.qs-v3 .qs-v3-link-arrow svg { width: 14px; height: 14px; }
body.qs-v3 .recent-quote-list .table-wrap { overflow-x: auto; }
body.qs-v3 .recent-quote-list table,
body.qs-v3 .qs-v3-table-card .agent-table {
width: 100%;
border-collapse: collapse;
font-size: var(--qs-fs-xs);
}
/* Without a floor these tables squeeze their columns to fit narrow viewports
and shred every word. Give them a minimum and let the wrapper scroll. */
body.qs-v3 .recent-quote-list table {
min-width: 900px;
table-layout: fixed;
}
/* Fixed, professional column widths prevent a long Quote ID from painting
over Customer Name. Narrow screens use the existing horizontal scroller. */
body.qs-v3 .recent-quote-list th:nth-child(1),
body.qs-v3 .recent-quote-list td:nth-child(1) { width: 240px; }
body.qs-v3 .recent-quote-list th:nth-child(2),
body.qs-v3 .recent-quote-list td:nth-child(2) { width: 165px; }
body.qs-v3 .recent-quote-list th:nth-child(3),
body.qs-v3 .recent-quote-list td:nth-child(3) { width: 190px; }
body.qs-v3 .recent-quote-list th:nth-child(4),
body.qs-v3 .recent-quote-list td:nth-child(4) { width: 85px; }
body.qs-v3 .recent-quote-list th:nth-child(5),
body.qs-v3 .recent-quote-list td:nth-child(5) { width: 130px; }
body.qs-v3 .recent-quote-list th:nth-child(6),
body.qs-v3 .recent-quote-list td:nth-child(6) { width: 80px; }
body.qs-v3 #creditHistorySection .qs-v3-table { min-width: 760px; }
body.qs-v3 .recent-quote-list thead th {
text-align: left;
padding: var(--qs-sp-2) 10px;
color: var(--qs-ink-500);
font-weight: var(--qs-fw-semibold);
font-size: var(--qs-fs-xs);
text-transform: uppercase;
letter-spacing: 0.03em;
background: transparent;
border-bottom: 1px solid var(--qs-border);
white-space: nowrap;
}
body.qs-v3 .recent-quote-list tbody td {
padding: var(--qs-sp-2) 10px;
border-bottom: 1px solid var(--qs-border);
color: var(--qs-ink-800);
vertical-align: middle;
}
body.qs-v3 .recent-quote-list tbody tr:last-child td { border-bottom: 0; }
body.qs-v3 .recent-quote-list tbody tr { transition: background var(--qs-t-fast) var(--qs-ease); }
body.qs-v3 .recent-quote-list tbody tr:hover { background: var(--qs-surface-alt); }
body.qs-v3 .recent-quote-list .qs-v3-quote-id {
display: block;
max-width: 100%;
color: var(--qs-ink-500);
font-size: var(--qs-fs-xs);
font-variant-numeric: tabular-nums;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* The row action is emitted as */
body.qs-v3 .recent-quote-list .btn.small {
display: inline-flex;
align-items: center;
padding: 4px 10px;
border-radius: var(--qs-r-md);
border: 1px solid var(--qs-border-strong);
background: var(--qs-surface);
color: var(--qs-ink-800);
font-size: var(--qs-fs-xs);
font-weight: var(--qs-fw-semibold);
text-decoration: none;
}
body.qs-v3 .recent-quote-list .btn.small:hover {
border-color: var(--qs-navy-500);
color: var(--qs-navy-500);
}
body.qs-v3 .qs-v3-table-card .empty-state,
body.qs-v3 .recent-quote-list .empty-state {
padding: var(--qs-sp-10) var(--qs-sp-6);
text-align: center;
color: var(--qs-ink-500);
font-size: var(--qs-fs-sm);
border: 1px dashed var(--qs-border);
border-radius: var(--qs-r-lg);
background: var(--qs-surface-alt);
margin-bottom: var(--qs-sp-4);
}
/* Credit history table cells are dense; keep them from wrapping badly */
body.qs-v3 #creditHistoryBody td { white-space: nowrap; }
body.qs-v3 #creditHistoryBody code {
font-size: var(--qs-fs-xs);
color: var(--qs-ink-600);
background: var(--qs-ink-100);
padding: 2px 6px;
border-radius: var(--qs-r-sm);
}
/* Quick actions ----------------------------------------------------------- */
body.qs-v3 .qs-v3-quick-list { display: flex; flex-direction: column; }
body.qs-v3 .qs-v3-quick-item {
display: flex;
align-items: center;
gap: var(--qs-sp-3);
padding: var(--qs-sp-3) var(--qs-sp-2);
border-bottom: 1px solid var(--qs-border);
color: var(--qs-ink-800);
font-size: var(--qs-fs-sm);
font-weight: var(--qs-fw-medium);
border-radius: var(--qs-r-md);
transition: background var(--qs-t-fast) var(--qs-ease);
}
body.qs-v3 .qs-v3-quick-item:last-child { border-bottom: 0; }
body.qs-v3 .qs-v3-quick-item:hover { background: var(--qs-surface-alt); color: var(--qs-ink-900); }
body.qs-v3 .qs-v3-quick-icon {
width: 32px;
height: 32px;
border-radius: var(--qs-r-md);
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
body.qs-v3 .qs-v3-quick-icon svg { width: 17px; height: 17px; }
body.qs-v3 .qs-v3-quick-icon.tint-blue { background: var(--qs-info-soft); color: #1E40AF; }
body.qs-v3 .qs-v3-quick-icon.tint-green { background: var(--qs-success-soft); color: #065F46; }
body.qs-v3 .qs-v3-quick-icon.tint-purple { background: var(--qs-purple-soft); color: #6D28D9; }
body.qs-v3 .qs-v3-quick-icon.tint-gold { background: var(--qs-gold-100); color: #92640E; }
body.qs-v3 .qs-v3-quick-icon.tint-teal { background: var(--qs-teal-soft); color: #0F766E; }
body.qs-v3 .qs-v3-quick-label { flex: 1; min-width: 0; }
body.qs-v3 .qs-v3-quick-label small {
display: block;
margin-top: 2px;
color: var(--qs-ink-500);
font-size: var(--qs-fs-xs);
font-weight: var(--qs-fw-normal);
}
body.qs-v3 .qs-v3-quick-chevron {
width: 16px;
height: 16px;
color: var(--qs-ink-400);
flex-shrink: 0;
}
/* Dashboard-only 3 x 2 Quick Actions grid ------------------------------- */
body.qs-v3.qs-v3-dashboard .qs-v3-dashboard-quick-card .qs-v3-card-header {
margin-bottom: var(--qs-sp-4);
}
body.qs-v3.qs-v3-dashboard .qs-v3-dashboard-quick-card .qs-v3-quick-list {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--qs-sp-3);
flex: 1;
}
body.qs-v3.qs-v3-dashboard .qs-v3-dashboard-quick-card .qs-v3-quick-item {
min-width: 0;
min-height: 64px;
padding: var(--qs-sp-3);
border: 1px solid var(--qs-border);
border-radius: var(--qs-r-lg);
background: var(--qs-surface);
box-shadow: var(--qs-sh-xs);
}
body.qs-v3.qs-v3-dashboard .qs-v3-dashboard-quick-card .qs-v3-quick-item:hover,
body.qs-v3.qs-v3-dashboard .qs-v3-dashboard-quick-card .qs-v3-quick-item:focus-visible {
color: var(--qs-ink-900);
border-color: var(--qs-border-strong);
box-shadow: var(--qs-sh-sm);
text-decoration: none;
}
/* Full-width Recent Quotes card grid ------------------------------------ */
body.qs-v3 .qs-v3-recent-card-panel { padding: var(--qs-sp-6); }
body.qs-v3 .qs-v3-recent-quote-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--qs-sp-4);
}
body.qs-v3 .qs-v3-recent-quote-grid > .empty-state { grid-column: 1 / -1; }
body.qs-v3 .qs-v3-recent-quote-card {
display: grid;
grid-template-columns: 112px minmax(0, 1fr);
min-width: 0;
overflow: hidden;
border: 1px solid var(--qs-border);
border-radius: var(--qs-r-xl);
background: var(--qs-surface);
box-shadow: var(--qs-sh-xs);
transition: border-color var(--qs-t-fast) var(--qs-ease),
box-shadow var(--qs-t-fast) var(--qs-ease),
transform var(--qs-t-fast) var(--qs-ease);
}
body.qs-v3 .qs-v3-recent-quote-card:hover {
border-color: var(--qs-border-strong);
box-shadow: var(--qs-sh-md);
transform: translateY(-2px);
}
body.qs-v3 .qs-v3-recent-quote-cover {
min-height: 190px;
display: grid;
place-items: center;
overflow: hidden;
background: linear-gradient(145deg, var(--qs-navy-800), var(--qs-navy-500));
color: #FFFFFF;
}
body.qs-v3 .qs-v3-recent-quote-cover img { width: 100%; height: 100%; object-fit: cover; }
body.qs-v3 .qs-v3-recent-quote-cover > span {
font-family: var(--qs-font-display);
font-size: var(--qs-fs-4xl);
font-weight: var(--qs-fw-semibold);
}
body.qs-v3 .qs-v3-recent-quote-body {
min-width: 0;
display: flex;
flex-direction: column;
gap: 6px;
padding: var(--qs-sp-4);
}
body.qs-v3 .qs-v3-recent-quote-head { min-height: 22px; }
body.qs-v3 .qs-v3-recent-quote-body h3 {
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
color: var(--qs-ink-900);
font-size: var(--qs-fs-base);
font-weight: var(--qs-fw-semibold);
line-height: var(--qs-lh-snug);
}
body.qs-v3 .qs-v3-recent-customer {
overflow: hidden;
color: var(--qs-ink-700);
font-size: var(--qs-fs-sm);
text-overflow: ellipsis;
white-space: nowrap;
}
body.qs-v3 .qs-v3-recent-meta {
display: flex;
flex-direction: column;
gap: 2px;
color: var(--qs-ink-500);
font-size: var(--qs-fs-xs);
}
body.qs-v3 .qs-v3-recent-meta span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
body.qs-v3 .qs-v3-recent-actions {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 6px;
margin-top: auto;
padding-top: var(--qs-sp-2);
}
body.qs-v3 .qs-v3-recent-action {
min-width: 0;
min-height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 4px;
padding: 5px 6px;
border: 1px solid var(--qs-border);
border-radius: var(--qs-r-md);
background: var(--qs-surface);
color: var(--qs-ink-700);
font-family: inherit;
font-size: 11px;
font-weight: var(--qs-fw-semibold);
line-height: 1;
text-decoration: none;
cursor: pointer;
}
body.qs-v3 .qs-v3-recent-action svg { width: 14px; height: 14px; flex-shrink: 0; }
body.qs-v3 .qs-v3-recent-action:hover,
body.qs-v3 .qs-v3-recent-action:focus-visible {
border-color: var(--qs-navy-500);
background: var(--qs-surface-alt);
color: var(--qs-navy-500);
text-decoration: none;
}
body.qs-v3 .qs-v3-recent-action-wa { color: #087A4B; }
body.qs-v3 .qs-v3-recent-action-wa:hover,
body.qs-v3 .qs-v3-recent-action-wa:focus-visible { border-color: #16A66A; color: #087A4B; }
body.qs-v3 .qs-v3-recent-action:disabled,
body.qs-v3 .qs-v3-recent-action.is-busy { opacity: 0.62; cursor: wait; }
/* Access denied ----------------------------------------------------------- */
body.qs-v3 .access-denied { display: flex; flex-direction: column; gap: var(--qs-sp-4); align-items: flex-start; }
/* Responsive -------------------------------------------------------------- */
@media (max-width: 1280px) {
body.qs-v3.qs-v3-dashboard { --qs-dash-rail: 300px; }
body.qs-v3 .qs-v3-search { min-width: 200px; }
body.qs-v3 .qs-v3-agency-chip { display: none; }
}
@media (max-width: 1100px) {
body.qs-v3 .qs-v3-dash-columns { grid-template-columns: minmax(0, 1fr); }
body.qs-v3 .qs-v3-hero-card { grid-template-columns: minmax(0, 1fr) 34%; }
body.qs-v3.qs-v3-dashboard .qs-v3-dash-col:last-child .credit-widget-panel { height: auto; }
body.qs-v3 .qs-v3-recent-quote-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
body.qs-v3 .qs-v3-shell { grid-template-columns: 1fr; }
body.qs-v3 .qs-v3-sidebar {
position: static;
height: auto;
flex-direction: row;
align-items: center;
flex-wrap: wrap;
gap: var(--qs-sp-3);
padding: var(--qs-sp-3) var(--qs-sp-4);
}
body.qs-v3 .qs-v3-sidebar-brand { font-size: var(--qs-fs-xl); padding: 0; }
body.qs-v3 .qs-v3-sidebar-nav {
flex-direction: row;
flex-wrap: wrap;
margin-top: 0;
gap: var(--qs-sp-1);
}
body.qs-v3 .qs-v3-nav-item { padding: var(--qs-sp-2) var(--qs-sp-3); font-size: var(--qs-fs-sm); }
body.qs-v3 .qs-v3-sidebar-footer { display: none; }
body.qs-v3 .qs-v3-topbar { flex-wrap: wrap; padding: var(--qs-sp-4); }
body.qs-v3 .qs-v3-topbar-title { flex-basis: 100%; }
body.qs-v3 .qs-v3-search { flex: 1; min-width: 0; }
body.qs-v3 .qs-v3-content { padding: var(--qs-sp-5) var(--qs-sp-4); }
body.qs-v3 .qs-v3-hero-card { grid-template-columns: minmax(0, 1fr); min-height: 0; }
body.qs-v3 .qs-v3-hero-visual { display: none; }
}
@media (max-width: 600px) {
/* Dashboard topbar only: the search collapses behind the icon toggle (which
exists only on the dashboard). Scoped to .qs-v3-dashboard so the content-
area search on quotes/customers/ready-packages stays visible on mobile. */
body.qs-v3.qs-v3-dashboard .qs-v3-search-toggle { display: inline-flex; }
body.qs-v3.qs-v3-dashboard .qs-v3-search { display: none; }
body.qs-v3.qs-v3-dashboard .qs-v3-search.is-open {
display: flex;
order: 99; /* drops onto its own row beneath the topbar items */
flex-basis: 100%;
}
body.qs-v3 .qs-v3-search kbd { display: none; }
body.qs-v3 .qs-v3-credit-layout { flex-direction: column; align-items: flex-start; }
body.qs-v3 .qs-v3-hero-content { padding: var(--qs-sp-6); }
body.qs-v3 .qs-v3-hero-card h2 { font-size: var(--qs-fs-2xl); }
body.qs-v3 .qs-v3-dash-actions .qs-v3-btn { width: 100%; }
body.qs-v3.qs-v3-dashboard .qs-v3-dashboard-quick-card .qs-v3-quick-list { grid-template-columns: 1fr; }
body.qs-v3 .qs-v3-recent-quote-grid { grid-template-columns: 1fr; }
body.qs-v3 .qs-v3-recent-quote-card { grid-template-columns: 96px minmax(0, 1fr); }
body.qs-v3 .qs-v3-recent-action span { display: none; }
}
@media (min-width: 601px) and (max-width: 760px) {
body.qs-v3.qs-v3-dashboard .qs-v3-dashboard-quick-card .qs-v3-quick-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* === PROFILE (profile.html) ============================================
Reuses the dashboard shell (sidebar, topbar, agency chip, avatar menu),
the .qs-v3-tabs primitive, and .status-pill / .qs-v3-credit-list.
Structure note: the Profile and Agency tab panels are wrapped in one