/* public/parts-app/theme.css ─────────────────────────────────────────────────────────────── Find A Part – Design System (Dark / Light Theme) ─────────────────────────────────────────────────────────────── All colours are CSS custom properties. No hardcoded colours. Theme is controlled by `data-theme="light"` or `data-theme="dark"` on the `` element. */ /* ───────────────────────────────────────────────────────────── LIGHT THEME – Default ───────────────────────────────────────────────────────────── */ :root, [data-theme="light"] { /* ── Six-Colour Palette ── */ --color-primary-50: #EBF3F8; --color-primary-100: #D0E4EF; --color-primary-200: #A1C9DF; --color-primary-300: #72AECF; --color-primary-400: #4393BF; --color-primary-500: #145A8A; --color-primary-600: #0B3C5D; --color-primary-700: #082E47; --color-primary-800: #061F30; --color-primary-900: #03111A; --color-secondary-50: #FEF8EB; --color-secondary-100: #FDEFCE; --color-secondary-200: #FBE0A1; --color-secondary-300: #F9D074; --color-secondary-400: #F7C147; --color-secondary-500: #F59E0B; --color-secondary-600: #D97706; --color-secondary-700: #B45309; --color-secondary-800: #92400E; --color-secondary-900: #78350F; /* ── Status Colours ── */ --color-success-50: #F0FDF4; --color-success-100: #DCFCE7; --color-success-200: #BBF7D0; --color-success-300: #86EFAC; --color-success-400: #4ADE80; --color-success-500: #16A34A; --color-success-600: #15803D; --color-success-700: #166534; --color-success-800: #14532D; --color-success-900: #0B3D1A; --color-danger-50: #FEF2F2; --color-danger-100: #FEE2E2; --color-danger-200: #FECACA; --color-danger-300: #FCA5A5; --color-danger-400: #F87171; --color-danger-500: #DC2626; --color-danger-600: #B91C1C; --color-danger-700: #991B1B; --color-danger-800: #7F1D1D; --color-danger-900: #450A0A; --color-warning-50: #FFF7ED; --color-warning-100: #FFEDD5; --color-warning-200: #FED7AA; --color-warning-300: #FDBA74; --color-warning-400: #FB923C; --color-warning-500: #F97316; --color-warning-600: #EA580C; --color-warning-700: #C2410C; --color-warning-800: #9A3412; --color-warning-900: #7C2D12; --color-info-50: #F0F9FF; --color-info-100: #E0F2FE; --color-info-200: #BAE6FD; --color-info-300: #7DD3FC; --color-info-400: #38BDF8; --color-info-500: #0EA5E9; --color-info-600: #0284C7; --color-info-700: #0369A1; --color-info-800: #075985; --color-info-900: #0C4A6E; /* ── Semantic Colour Variables ── */ --color-bg: #F7F9FC; --color-bg-secondary: #F1F4F9; --color-surface: #FFFFFF; --color-surface-hover: #F8FAFC; --color-surface-active: #F1F5F9; --color-text: #0F172A; --color-text-secondary: #334155; --color-text-muted: #5B6B7C; --color-text-inverse: #FFFFFF; --color-border: #D9E2EC; --color-border-focus: #0B3C5D; --color-shadow: rgba(15, 23, 42, 0.08); --color-shadow-heavy: rgba(15, 23, 42, 0.16); /* ── Component Semantic Colours ── */ --color-primary: var(--color-primary-600); --color-primary-hover: var(--color-primary-500); --color-primary-active: var(--color-primary-700); --color-secondary: var(--color-secondary-500); --color-secondary-hover: var(--color-secondary-600); --color-secondary-active: var(--color-secondary-700); --color-success: var(--color-success-500); --color-success-bg: var(--color-success-50); --color-danger: var(--color-danger-500); --color-danger-bg: var(--color-danger-50); --color-warning: var(--color-warning-500); --color-warning-bg: var(--color-warning-50); --color-info: var(--color-info-500); --color-info-bg: var(--color-info-50); /* ── Typography ── */ --font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-family-heading: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-size-base: 16px; --font-size-xs: 11px; --font-size-sm: 13px; --font-size-md: 16px; --font-size-lg: 20px; --font-size-xl: 24px; --font-size-2xl: 30px; --font-size-3xl: 36px; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-weight-extrabold: 800; --line-height-tight: 1.2; --line-height-normal: 1.5; --line-height-relaxed: 1.75; /* ── Spacing (4px grid) ── */ --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 28px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; /* ── Radius ── */ --radius-none: 0; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 24px; --radius-pill: 9999px; /* ── Shadows ── */ --shadow-sm: 0 1px 2px var(--color-shadow); --shadow-md: 0 4px 12px var(--color-shadow); --shadow-lg: 0 12px 32px var(--color-shadow-heavy); --shadow-focus: 0 0 0 3px var(--color-primary-100); /* ── Motion ── */ --duration-fast: 150ms; --duration-normal: 200ms; --duration-slow: 300ms; --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); /* ── Z‑Index Scale ── */ --z-dropdown: 100; --z-sticky: 200; --z-modal: 300; --z-toast: 400; --z-banner: 500; } /* ───────────────────────────────────────────────────────────── DARK THEME ───────────────────────────────────────────────────────────── */ [data-theme="dark"] { /* ── Semantic Colour Variables (Dark) ── */ --color-bg: #0B1120; --color-bg-secondary: #111827; --color-surface: #111827; --color-surface-hover: #1E293B; --color-surface-active: #1E293B; --color-text: #E5E7EB; --color-text-secondary: #94A3B8; --color-text-muted: #64748B; --color-text-inverse: #0F172A; --color-border: #1F2937; --color-border-focus: #38BDF8; --color-shadow: rgba(0, 0, 0, 0.3); --color-shadow-heavy: rgba(0, 0, 0, 0.5); /* ── Component Semantic Colours (Dark) ── */ --color-primary: var(--color-primary-400); --color-primary-hover: var(--color-primary-300); --color-primary-active: var(--color-primary-500); --color-secondary: var(--color-secondary-400); --color-secondary-hover: var(--color-secondary-300); --color-secondary-active: var(--color-secondary-500); --color-success-bg: rgba(22, 163, 74, 0.15); --color-danger-bg: rgba(220, 38, 38, 0.15); --color-warning-bg: rgba(249, 115, 22, 0.15); --color-info-bg: rgba(14, 165, 233, 0.15); /* ── Shadows (Dark) ── */ --shadow-sm: 0 1px 2px var(--color-shadow); --shadow-md: 0 4px 12px var(--color-shadow); --shadow-lg: 0 12px 32px var(--color-shadow-heavy); --shadow-focus: 0 0 0 3px rgba(56, 189, 248, 0.3); } /* ───────────────────────────────────────────────────────────── SYSTEM PREFERENCE FALLBACK ───────────────────────────────────────────────────────────── */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { /* ── Semantic Colour Variables (Dark) ── */ --color-bg: #0B1120; --color-bg-secondary: #111827; --color-surface: #111827; --color-surface-hover: #1E293B; --color-surface-active: #1E293B; --color-text: #E5E7EB; --color-text-secondary: #94A3B8; --color-text-muted: #64748B; --color-text-inverse: #0F172A; --color-border: #1F2937; --color-border-focus: #38BDF8; --color-shadow: rgba(0, 0, 0, 0.3); --color-shadow-heavy: rgba(0, 0, 0, 0.5); --color-primary: var(--color-primary-400); --color-primary-hover: var(--color-primary-300); --color-primary-active: var(--color-primary-500); --color-secondary: var(--color-secondary-400); --color-secondary-hover: var(--color-secondary-300); --color-secondary-active: var(--color-secondary-500); --color-success-bg: rgba(22, 163, 74, 0.15); --color-danger-bg: rgba(220, 38, 38, 0.15); --color-warning-bg: rgba(249, 115, 22, 0.15); --color-info-bg: rgba(14, 165, 233, 0.15); --shadow-sm: 0 1px 2px var(--color-shadow); --shadow-md: 0 4px 12px var(--color-shadow); --shadow-lg: 0 12px 32px var(--color-shadow-heavy); --shadow-focus: 0 0 0 3px rgba(56, 189, 248, 0.3); } } /* ───────────────────────────────────────────────────────────── BASE STYLES – Applies theme to the entire app ───────────────────────────────────────────────────────────── */ html { font-size: var(--font-size-base); box-sizing: border-box; -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: hidden; /* ← prevents horizontal scroll at the root */ max-width: 100vw; /* ← constrains root to viewport width */ } *, *::before, *::after { box-sizing: inherit; } body { font-family: var(--font-family); font-size: var(--font-size-md); font-weight: var(--font-weight-normal); line-height: var(--line-height-normal); color: var(--color-text); background-color: var(--color-bg); transition: background-color var(--duration-normal) var(--ease-out), color var(--duration-normal) var(--ease-out); min-height: 100vh; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; /* ← prevents horizontal scroll on body */ max-width: 100vw; /* ← constrains body to viewport width */ } /* ───────────────────────────────────────────────────────────── HEADINGS & TYPOGRAPHY ───────────────────────────────────────────────────────────── */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-family-heading); font-weight: var(--font-weight-bold); line-height: var(--line-height-tight); color: var(--color-text); margin: 0 0 var(--space-4) 0; } h1 { font-size: var(--font-size-3xl); font-weight: var(--font-weight-extrabold); } h2 { font-size: var(--font-size-2xl); font-weight: var(--font-weight-bold); } h3 { font-size: var(--font-size-xl); font-weight: var(--font-weight-semibold); } h4 { font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); } h5 { font-size: var(--font-size-md); font-weight: var(--font-weight-semibold); } h6 { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); } p { margin: 0 0 var(--space-4) 0; color: var(--color-text-secondary); } a { color: var(--color-primary); text-decoration: none; transition: color var(--duration-fast) var(--ease-out); } a:hover, a:focus { color: var(--color-primary-hover); text-decoration: underline; } /* ───────────────────────────────────────────────────────────── SEMANTIC COLOUR UTILITIES ───────────────────────────────────────────────────────────── */ .text-primary { color: var(--color-primary) !important; } .text-secondary { color: var(--color-secondary) !important; } .text-success { color: var(--color-success) !important; } .text-danger { color: var(--color-danger) !important; } .text-warning { color: var(--color-warning) !important; } .text-info { color: var(--color-info) !important; } .text-muted { color: var(--color-text-muted) !important; } .text-inverse { color: var(--color-text-inverse) !important; } .bg-primary { background-color: var(--color-primary) !important; } .bg-secondary { background-color: var(--color-secondary) !important; } .bg-success { background-color: var(--color-success-bg) !important; } .bg-danger { background-color: var(--color-danger-bg) !important; } .bg-warning { background-color: var(--color-warning-bg) !important; } .bg-info { background-color: var(--color-info-bg) !important; } /* ───────────────────────────────────────────────────────────── BADGE / CHIP STYLES ───────────────────────────────────────────────────────────── */ .badge { display: inline-flex; align-items: center; padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); line-height: 1.4; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-inverse); background-color: var(--color-text-muted); } .badge--primary { background-color: var(--color-primary); } .badge--secondary { background-color: var(--color-secondary); color: var(--color-text-inverse); } .badge--success { background-color: var(--color-success); } .badge--danger { background-color: var(--color-danger); } .badge--warning { background-color: var(--color-warning); } .badge--info { background-color: var(--color-info); } .badge--outline { background-color: transparent; color: var(--color-text); border: 1px solid var(--color-border); } /* ───────────────────────────────────────────────────────────── BUTTONS ───────────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 44px; min-width: 44px; padding: 0 var(--space-4); font-family: var(--font-family); font-size: var(--font-size-md); font-weight: var(--font-weight-medium); line-height: 1; border: none; border-radius: var(--radius-sm); cursor: pointer; transition: all var(--duration-fast) var(--ease-out); text-decoration: none; user-select: none; touch-action: manipulation; } .btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } .btn--primary { background-color: var(--color-primary); color: var(--color-text-inverse); } .btn--primary:hover { background-color: var(--color-primary-hover); } .btn--primary:active { background-color: var(--color-primary-active); } .btn--secondary { background-color: var(--color-secondary); color: var(--color-text-inverse); } .btn--secondary:hover { background-color: var(--color-secondary-hover); } .btn--secondary:active { background-color: var(--color-secondary-active); } .btn--outline { background-color: transparent; color: var(--color-primary); border: 1px solid var(--color-primary); } .btn--outline:hover { background-color: var(--color-primary); color: var(--color-text-inverse); } .btn--ghost { background-color: transparent; color: var(--color-text-secondary); } .btn--ghost:hover { background-color: var(--color-surface-hover); color: var(--color-text); } .btn--danger { background-color: var(--color-danger); color: var(--color-text-inverse); } .btn--danger:hover { background-color: var(--color-danger-600); } .btn--success { background-color: var(--color-success); color: var(--color-text-inverse); } .btn--success:hover { background-color: var(--color-success-600); } .btn:disabled, .btn--disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; } /* ───────────────────────────────────────────────────────────── CARDS ───────────────────────────────────────────────────────────── */ .card { background-color: var(--color-surface); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); padding: var(--space-4); transition: box-shadow var(--duration-fast) var(--ease-out), background-color var(--duration-normal) var(--ease-out); } .card:hover { box-shadow: var(--shadow-md); } .card--clickable { cursor: pointer; } .card--clickable:hover { transform: translateY(-2px); } .card--selected { border: 2px solid var(--color-primary); box-shadow: var(--shadow-md); } /* ───────────────────────────────────────────────────────────── INPUTS ───────────────────────────────────────────────────────────── */ .input { width: 100%; min-height: 44px; padding: 0 var(--space-4); font-family: var(--font-family); font-size: var(--font-size-md); color: var(--color-text); background-color: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm); transition: border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out); } .input:focus { outline: none; border-color: var(--color-primary); box-shadow: var(--shadow-focus); } .input--error { border-color: var(--color-danger); } .input--error:focus { border-color: var(--color-danger); box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.2); } .input--success { border-color: var(--color-success); } .input--success:focus { border-color: var(--color-success); box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.2); } .textarea { width: 100%; min-height: 100px; padding: var(--space-3) var(--space-4); font-family: var(--font-family); font-size: var(--font-size-md); color: var(--color-text); background-color: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm); resize: vertical; transition: border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out); } .textarea:focus { outline: none; border-color: var(--color-primary); box-shadow: var(--shadow-focus); } /* ───────────────────────────────────────────────────────────── SKELETON LOADERS ───────────────────────────────────────────────────────────── */ .skeleton { display: inline-block; background: var(--color-border); border-radius: var(--radius-sm); min-height: 20px; position: relative; overflow: hidden; } .skeleton::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient( 90deg, transparent 0%, var(--color-surface) 20%, transparent 40% ); animation: skeleton-shimmer 1.5s ease-in-out infinite; } @keyframes skeleton-shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } /* ───────────────────────────────────────────────────────────── REDUCED MOTION ───────────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .skeleton::after { animation: none !important; } } /* ───────────────────────────────────────────────────────────── RESPONSIVE UTILITIES ───────────────────────────────────────────────────────────── */ @media (max-width: 640px) { html { font-size: 15px; } h1 { font-size: var(--font-size-2xl); } h2 { font-size: var(--font-size-xl); } h3 { font-size: var(--font-size-lg); } .card { padding: var(--space-3); } } @media (min-width: 1024px) { html { font-size: 18px; } } /* ───────────────────────────────────────────────────────────── VEHICLE SELECTOR ───────────────────────────────────────────────────────────── */ .vehicle-selector { position: relative; display: inline-block; min-width: 180px; cursor: pointer; } .vehicle-selector__trigger { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); min-height: 44px; background-color: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm); transition: border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out), background-color var(--duration-normal) var(--ease-out); user-select: none; } .vehicle-selector__trigger:hover { border-color: var(--color-primary); background-color: var(--color-surface-hover); } .vehicle-selector__trigger:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } .vehicle-selector__trigger[aria-expanded="true"] { border-color: var(--color-primary); box-shadow: var(--shadow-focus); } .vehicle-selector__icon { flex-shrink: 0; color: var(--color-text-muted); display: flex; align-items: center; } .vehicle-selector__label { flex: 1; font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 60px; } .vehicle-selector__chevron { flex-shrink: 0; color: var(--color-text-muted); transition: transform var(--duration-fast) var(--ease-out); display: flex; align-items: center; } .vehicle-selector__trigger[aria-expanded="true"] .vehicle-selector__chevron { transform: rotate(180deg); } /* ── Dropdown ── */ .vehicle-selector__dropdown { position: absolute; top: calc(100% + var(--space-2)); left: 0; right: 0; min-width: 280px; max-width: 360px; background-color: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); z-index: var(--z-dropdown); display: none; overflow: hidden; animation: dropdown-in var(--duration-fast) var(--ease-out); } [data-theme="dark"] .vehicle-selector__dropdown { border-color: var(--color-border); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5); } @keyframes dropdown-in { 0% { opacity: 0; transform: translateY(-8px); } 100% { opacity: 1; transform: translateY(0); } } .vehicle-selector__header { display: flex; align-items: center; justify-content: space-between; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--color-text-muted); } .vehicle-selector__header .btn--sm { padding: var(--space-1) var(--space-3); font-size: var(--font-size-xs); min-height: 32px; min-width: 32px; } .vehicle-selector__list { max-height: 240px; overflow-y: auto; padding: var(--space-1) 0; } .vehicle-selector__list::-webkit-scrollbar { width: 4px; } .vehicle-selector__list::-webkit-scrollbar-track { background: var(--color-bg); } .vehicle-selector__list::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: var(--radius-pill); } .vehicle-selector__item { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); cursor: pointer; transition: background-color var(--duration-fast) var(--ease-out); min-height: 48px; } .vehicle-selector__item:hover { background-color: var(--color-surface-hover); } .vehicle-selector__item--active { background-color: var(--color-primary-50); } [data-theme="dark"] .vehicle-selector__item--active { background-color: rgba(11, 60, 93, 0.3); } .vehicle-selector__item--active .vehicle-selector__item-name { color: var(--color-primary); font-weight: var(--font-weight-semibold); } .vehicle-selector__item-icon { flex-shrink: 0; font-size: 20px; line-height: 1; color: var(--color-text-muted); } .vehicle-selector__item-name { flex: 1; font-size: var(--font-size-sm); color: var(--color-text); } .vehicle-selector__item .badge { font-size: var(--font-size-xs); padding: var(--space-1) var(--space-2); } .vehicle-selector__empty { padding: var(--space-4); text-align: center; color: var(--color-text-muted); font-size: var(--font-size-sm); } .vehicle-selector__empty p { margin-bottom: var(--space-3); color: var(--color-text-muted); } .vehicle-selector__actions { display: flex; gap: var(--space-2); padding: var(--space-2) var(--space-4); border-top: 1px solid var(--color-border); flex-wrap: wrap; } .vehicle-selector__actions .btn--sm { padding: var(--space-1) var(--space-3); font-size: var(--font-size-xs); min-height: 36px; min-width: 36px; gap: var(--space-1); justify-content: center; flex: 1; color: var(--color-text-muted); background-color: transparent; border: 1px solid transparent; border-radius: var(--radius-sm); transition: all var(--duration-fast) var(--ease-out); } .vehicle-selector__actions .btn--sm:hover { background-color: var(--color-surface-hover); color: var(--color-text); border-color: var(--color-border); } .vehicle-selector__actions .btn--sm svg { flex-shrink: 0; } /* ───────────────────────────────────────────────────────────── MODAL OVERLAY ───────────────────────────────────────────────────────────── */ .modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(15, 23, 42, 0.6); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); z-index: calc(var(--z-modal) + 10); display: flex; align-items: center; justify-content: center; padding: var(--space-4); animation: modal-overlay-in var(--duration-normal) var(--ease-out); } @keyframes modal-overlay-in { 0% { opacity: 0; } 100% { opacity: 1; } } /* ───────────────────────────────────────────────────────────── MODAL ───────────────────────────────────────────────────────────── */ .modal { background-color: var(--color-surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); max-width: 520px; width: 100%; max-height: 90vh; display: flex; flex-direction: column; animation: modal-in var(--duration-normal) var(--ease-out); overflow: hidden; } [data-theme="dark"] .modal { background-color: var(--color-surface); border: 1px solid var(--color-border); } @keyframes modal-in { 0% { opacity: 0; transform: scale(0.96) translateY(16px); } 100% { opacity: 1; transform: scale(1) translateY(0); } } .modal__header { display: flex; align-items: center; justify-content: space-between; padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--color-border); flex-shrink: 0; } .modal__header h3 { margin: 0; font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); color: var(--color-text); } .modal__close { background: none; border: none; font-size: 24px; line-height: 1; color: var(--color-text-muted); cursor: pointer; padding: var(--space-2); min-height: 44px; min-width: 44px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out); } .modal__close:hover { background-color: var(--color-surface-hover); color: var(--color-text); } .modal__body { padding: var(--space-5); overflow-y: auto; flex: 1; } .modal__body p { color: var(--color-text-secondary); margin-bottom: var(--space-4); font-size: var(--font-size-sm); } .modal__body .form-group { margin-bottom: var(--space-4); } .modal__body .form-group label { display: block; font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-text); margin-bottom: var(--space-1); } .modal__body .form-group .input { width: 100%; } .modal__body .form-group .input--error { border-color: var(--color-danger); } .modal__body .form-group .input--error:focus { border-color: var(--color-danger); box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.2); } .modal__body .form-group label input[type="checkbox"] { margin-right: var(--space-2); width: 18px; height: 18px; vertical-align: middle; accent-color: var(--color-primary); cursor: pointer; } .modal__footer { display: flex; justify-content: flex-end; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-top: 1px solid var(--color-border); flex-shrink: 0; } .modal__footer .btn { min-width: 80px; } /* ── Vehicle lookup result in modal ── */ .vehicle-lookup-result .card { background-color: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-4); margin-top: var(--space-4); } .vehicle-lookup-result .card h4 { margin: 0 0 var(--space-2) 0; font-size: var(--font-size-md); font-weight: var(--font-weight-semibold); color: var(--color-text); } .vehicle-lookup-result .card p { margin: var(--space-1) 0; font-size: var(--font-size-sm); color: var(--color-text-secondary); } .vehicle-lookup-result .card .btn { margin-top: var(--space-3); } /* ── Toast inside modal ── */ .modal__body .toast { margin-bottom: var(--space-4); padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); width: 100%; text-align: left; } .modal__body .toast--warning { background-color: var(--color-warning-bg); color: var(--color-warning); } .modal__body .toast--error { background-color: var(--color-danger-bg); color: var(--color-danger); } .modal__body .toast--info { background-color: var(--color-info-bg); color: var(--color-info); } /* ── Responsive modal ── */ @media (max-width: 640px) { .modal { max-width: 100%; max-height: 100vh; border-radius: var(--radius-md); margin: var(--space-2); } .modal__header { padding: var(--space-3) var(--space-4); } .modal__body { padding: var(--space-4); } .modal__footer { padding: var(--space-3) var(--space-4); flex-wrap: wrap; } .modal__footer .btn { flex: 1; min-width: 60px; } .vehicle-selector__dropdown { left: -8px; right: -8px; min-width: unset; width: calc(100% + 16px); } .vehicle-selector { min-width: 140px; } .vehicle-selector__label { font-size: var(--font-size-xs); } } @media (max-width: 480px) { .vehicle-selector { min-width: 100px; } .vehicle-selector__trigger { padding: var(--space-1) var(--space-2); min-height: 36px; } .vehicle-selector__label { font-size: var(--font-size-xs); min-width: 40px; } .vehicle-selector__icon svg { width: 16px; height: 16px; } .vehicle-selector__chevron svg { width: 14px; height: 14px; } } /* ── Reduced motion ── */ @media (prefers-reduced-motion: reduce) { .vehicle-selector__dropdown { animation: none; } .modal-overlay { animation: none; } .modal { animation: none; } .vehicle-selector__chevron { transition: none; } } /* ───────────────────────────────────────────────────────────── SEARCH PAGE COMPONENTS ───────────────────────────────────────────────────────────── */ /* ── Container ── */ .search-container { max-width: 1280px; margin: 0 auto; padding: var(--space-4); width: 100%; } /* ── Vehicle Banner ── */ .vehicle-banner { background-color: var(--color-warning-bg); border: 1px solid var(--color-warning); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); margin-bottom: var(--space-4); animation: banner-in var(--duration-normal) var(--ease-out); } @keyframes banner-in { 0% { opacity: 0; transform: translateY(-8px); } 100% { opacity: 1; transform: translateY(0); } } .vehicle-banner__content { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; } .vehicle-banner__icon { flex-shrink: 0; color: var(--color-warning); display: flex; align-items: center; } .vehicle-banner__icon svg { width: 24px; height: 24px; } .vehicle-banner__text { flex: 1; font-size: var(--font-size-sm); color: var(--color-text); } .vehicle-banner .btn { flex-shrink: 0; } /* ── Search Bar ── */ .search-bar { margin-bottom: var(--space-4); } .search-bar__input-wrapper { position: relative; display: flex; align-items: center; background-color: var(--color-surface); border: 2px solid var(--color-border); border-radius: var(--radius-md); transition: border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out); } .search-bar__input-wrapper:focus-within { border-color: var(--color-primary); box-shadow: var(--shadow-focus); } .search-bar__icon { flex-shrink: 0; padding: 0 var(--space-3); color: var(--color-text-muted); display: flex; align-items: center; } .search-bar__icon svg { width: 20px; height: 20px; } .search-bar__input { flex: 1; min-height: 48px; padding: var(--space-2) var(--space-3); border: none; background: transparent; font-family: var(--font-family); font-size: var(--font-size-md); color: var(--color-text); outline: none; } .search-bar__input::placeholder { color: var(--color-text-muted); } .search-bar__clear { flex-shrink: 0; padding: var(--space-2) var(--space-3); background: none; border: none; color: var(--color-text-muted); cursor: pointer; display: flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; border-radius: var(--radius-sm); transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out); } .search-bar__clear:hover { background-color: var(--color-surface-hover); color: var(--color-text); } .search-bar__clear svg { width: 16px; height: 16px; } /* ── Category Grid ── */ .category-grid { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-4); } .category-chip { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); min-height: 40px; background-color: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-pill); cursor: pointer; transition: all var(--duration-fast) var(--ease-out); user-select: none; font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-text-secondary); } .category-chip:hover { border-color: var(--color-primary); background-color: var(--color-surface-hover); color: var(--color-text); } .category-chip--active { background-color: var(--color-primary); border-color: var(--color-primary); color: var(--color-text-inverse); } .category-chip--active:hover { background-color: var(--color-primary-hover); border-color: var(--color-primary-hover); } .category-chip__icon { display: flex; align-items: center; line-height: 1; } .category-chip__icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .category-chip--active .category-chip__icon { color: var(--color-text-inverse); } .category-chip__label { font-size: var(--font-size-sm); white-space: nowrap; } /* ── Toolbar ── */ .toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-4); padding: var(--space-2) 0; border-bottom: 1px solid var(--color-border); } .toolbar__left { display: flex; align-items: center; gap: var(--space-3); } .toolbar__count { font-size: var(--font-size-sm); color: var(--color-text-muted); } .toolbar__right { display: flex; align-items: center; gap: var(--space-3); } .toolbar__sort { min-height: 40px; padding: 0 var(--space-3); font-family: var(--font-family); font-size: var(--font-size-sm); color: var(--color-text); background-color: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm); cursor: pointer; outline: none; transition: border-color var(--duration-fast) var(--ease-out); } .toolbar__sort:focus { border-color: var(--color-primary); box-shadow: var(--shadow-focus); } /* ── Results Grid ── */ .results-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-4); margin-bottom: var(--space-4); } /* ── Skeleton Grid ── */ .skeleton-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-4); margin-bottom: var(--space-4); } .skeleton-card { background-color: var(--color-surface); border-radius: var(--radius-md); padding: var(--space-4); box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: var(--space-3); } .skeleton-image { width: 100%; height: 140px; border-radius: var(--radius-sm); } .skeleton-text { height: 16px; border-radius: var(--radius-sm); } /* ── Product Card ── */ .part-card { background-color: var(--color-surface); border-radius: var(--radius-md); padding: var(--space-4); box-shadow: var(--shadow-sm); transition: box-shadow var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out); display: flex; flex-direction: column; gap: var(--space-2); position: relative; border: 1px solid var(--color-border); } .part-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); } .part-card__badges { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-bottom: var(--space-1); } .part-card__badges .badge { font-size: var(--font-size-xs); padding: var(--space-1) var(--space-2); text-transform: uppercase; letter-spacing: 0.04em; } .part-card__image { width: 100%; aspect-ratio: 1/1; max-height: 160px; background-color: var(--color-bg); border-radius: var(--radius-sm); overflow: hidden; display: flex; align-items: center; justify-content: center; } .part-card__image img { width: 100%; height: 100%; object-fit: contain; transition: transform var(--duration-normal) var(--ease-out); } .part-card:hover .part-card__image img { transform: scale(1.02); } .part-card__brand { font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.04em; } .part-card__title { font-size: var(--font-size-md); font-weight: var(--font-weight-semibold); color: var(--color-text); line-height: var(--line-height-tight); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .part-card__part-number { font-size: var(--font-size-xs); font-family: monospace; color: var(--color-text-muted); letter-spacing: 0.02em; } .part-card__fitment { margin-top: var(--space-1); } .fitment-chip { display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); } .fitment-chip svg { width: 14px; height: 14px; flex-shrink: 0; } .fitment--fits { background-color: var(--color-success-bg); color: var(--color-success); } .fitment--no-fit { background-color: var(--color-danger-bg); color: var(--color-danger); } .fitment--unknown { background-color: var(--color-warning-bg); color: var(--color-warning); } .part-card__stock { margin-top: var(--space-1); } .stock-chip { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); } .stock-chip svg { width: 12px; height: 12px; flex-shrink: 0; } .stock-chip--in-stock { color: var(--color-success); } .stock-chip--low-stock { color: var(--color-warning); } .stock-chip--out-of-stock { color: var(--color-danger); } .stock-chip--unknown { color: var(--color-text-muted); } .part-card__delivery { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--font-size-xs); color: var(--color-text-muted); } .part-card__delivery svg { width: 14px; height: 14px; } .part-card__price { display: flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-1); } .part-card__price .price { font-size: var(--font-size-lg); font-weight: var(--font-weight-bold); color: var(--color-text); } .part-card__price .price--trade { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-text-muted); text-decoration: line-through; } .part-card__offers { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding-top: var(--space-2); border-top: 1px solid var(--color-border); margin-top: var(--space-1); } .part-card__offers-count { font-size: var(--font-size-xs); color: var(--color-text-muted); } .part-card__offers-btn { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--font-size-xs); color: var(--color-primary); background: none; border: none; cursor: pointer; padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); transition: background-color var(--duration-fast) var(--ease-out); } .part-card__offers-btn:hover { background-color: var(--color-primary-50); } .part-card__offers-btn svg { width: 14px; height: 14px; } .part-card__actions { display: flex; gap: var(--space-2); margin-top: var(--space-2); } .part-card__actions .btn { flex: 1; font-size: var(--font-size-sm); min-height: 40px; justify-content: center; } .part-card__actions .btn--secondary { background-color: var(--color-secondary); color: var(--color-text-inverse); } .part-card__actions .btn--secondary:hover { background-color: var(--color-secondary-hover); } .part-card__actions .btn--secondary:disabled { opacity: 0.5; cursor: not-allowed; } .part-card__actions .btn--outline { flex: 0 0 44px; padding: 0; } .part-card__actions .btn--outline:disabled { opacity: 0.3; cursor: not-allowed; } .part-card__actions .btn--outline svg { width: 18px; height: 18px; } /* ── Empty State ── */ .empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--space-8) var(--space-4); text-align: center; gap: var(--space-3); background-color: var(--color-surface); border-radius: var(--radius-md); border: 1px dashed var(--color-border); } .empty-state__icon { font-size: 48px; line-height: 1; color: var(--color-text-muted); } .empty-state__icon svg { width: 64px; height: 64px; stroke: var(--color-text-muted); } .empty-state__title { font-size: var(--font-size-xl); font-weight: var(--font-weight-semibold); color: var(--color-text); margin: 0; } .empty-state__description { font-size: var(--font-size-md); color: var(--color-text-muted); max-width: 400px; margin: 0; } /* ── Pagination ── */ .pagination { display: flex; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-4) 0; flex-wrap: wrap; } .pagination .btn { min-width: 44px; min-height: 40px; padding: 0 var(--space-3); font-size: var(--font-size-sm); justify-content: center; } .pagination .btn:disabled { opacity: 0.4; cursor: not-allowed; } .pagination__ellipsis { display: flex; align-items: center; padding: 0 var(--space-2); color: var(--color-text-muted); font-size: var(--font-size-sm); } /* ── Offers Modal (reuses modal styles from vehicle.js) ── */ .offers-list { display: flex; flex-direction: column; gap: var(--space-3); } .offer-item { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3); background-color: var(--color-bg); border-radius: var(--radius-sm); border: 1px solid var(--color-border); } .offer-item__supplier { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--color-text); } .offer-item__details { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); } .offer-item__price { font-size: var(--font-size-md); font-weight: var(--font-weight-bold); color: var(--color-text); } .offer-item__stock { font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); display: inline-flex; align-items: center; gap: var(--space-1); } .offer-item__stock svg { width: 12px; height: 12px; } .offer-item__stock.in_stock { color: var(--color-success); } .offer-item__stock.low_stock { color: var(--color-warning); } .offer-item__stock.out_of_stock { color: var(--color-danger); } .offer-item__stock.unknown { color: var(--color-text-muted); } .offer-item__delivery { font-size: var(--font-size-xs); color: var(--color-text-muted); display: inline-flex; align-items: center; gap: var(--space-1); } .offer-item__delivery svg { width: 14px; height: 14px; } .offer-item__actions { display: flex; gap: var(--space-2); margin-top: var(--space-1); } .offer-item__actions .btn { flex: 1; font-size: var(--font-size-sm); min-height: 36px; justify-content: center; } .offer-item__actions .btn--outline { flex: 0 0 40px; padding: 0; } .offer-item__actions .btn--outline svg { width: 16px; height: 16px; } /* ── Responsive ── */ @media (max-width: 768px) { .search-container { padding: var(--space-2); } .results-container { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--space-3); } .skeleton-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--space-3); } .part-card { padding: var(--space-3); } .part-card__image { max-height: 120px; } .part-card__title { font-size: var(--font-size-sm); } .part-card__price .price { font-size: var(--font-size-md); } .toolbar { flex-direction: column; align-items: stretch; gap: var(--space-2); } .toolbar__left, .toolbar__right { justify-content: space-between; } .vehicle-banner__content { flex-direction: column; align-items: stretch; text-align: center; } .vehicle-banner .btn { align-self: center; } .part-card__actions .btn { font-size: var(--font-size-xs); } .pagination .btn { min-width: 36px; min-height: 36px; font-size: var(--font-size-xs); padding: 0 var(--space-2); } .offer-item__actions { flex-wrap: wrap; } .offer-item__actions .btn { flex: 1 1 100%; } .offer-item__actions .btn--outline { flex: 0 0 40px; } .category-chip { padding: var(--space-1) var(--space-2); font-size: var(--font-size-xs); min-height: 32px; } .category-chip__icon svg { width: 14px; height: 14px; } } @media (max-width: 480px) { .search-container { padding: var(--space-2) var(--space-1); } .results-container { grid-template-columns: 1fr 1fr; gap: var(--space-2); } .skeleton-grid { grid-template-columns: 1fr 1fr; gap: var(--space-2); } .part-card { padding: var(--space-2); } .part-card__image { max-height: 80px; } .part-card__title { font-size: var(--font-size-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .part-card__brand { font-size: 9px; } .part-card__part-number { font-size: 9px; } .part-card__price .price { font-size: var(--font-size-sm); } .part-card__price .price--trade { font-size: var(--font-size-xs); } .part-card__offers { flex-direction: column; align-items: stretch; gap: var(--space-1); } .part-card__actions { flex-wrap: wrap; } .part-card__actions .btn { font-size: var(--font-size-xs); min-height: 32px; padding: 0 var(--space-2); } .part-card__actions .btn--outline { flex: 0 0 32px; } .fitment-chip { font-size: 9px; padding: 0 var(--space-1); } .fitment-chip svg { width: 10px; height: 10px; } .stock-chip { font-size: 9px; } .stock-chip svg { width: 10px; height: 10px; } .search-bar__input { font-size: var(--font-size-sm); min-height: 40px; } .search-bar__icon svg { width: 16px; height: 16px; } .category-grid { gap: var(--space-1); } .category-chip { padding: var(--space-1); font-size: 9px; min-height: 28px; } .category-chip__icon svg { width: 12px; height: 12px; } .toolbar__count { font-size: var(--font-size-xs); } .toolbar__sort { font-size: var(--font-size-xs); min-height: 32px; padding: 0 var(--space-2); } .pagination .btn { min-width: 32px; min-height: 32px; font-size: var(--font-size-xs); padding: 0 var(--space-1); } } /* ── Reduced motion ── */ @media (prefers-reduced-motion: reduce) { .vehicle-banner { animation: none; } .part-card:hover { transform: none; } .part-card:hover .part-card__image img { transform: none; } } /* ───────────────────────────────────────────────────────────── FILTERS – Sidebar (Desktop) & Bottom Sheet (Mobile) ───────────────────────────────────────────────────────────── */ /* ── Section Container ── */ .filter-section { margin-bottom: var(--space-4); padding-bottom: var(--space-4); border-bottom: 1px solid var(--color-border); } .filter-section:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; } .filter-section__title { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--color-text-secondary); margin-bottom: var(--space-3); text-transform: uppercase; letter-spacing: 0.04em; } .filter-section__content { display: flex; flex-direction: column; gap: var(--space-2); } /* ── Filter Chips ── */ .filter-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); } .filter-chip { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-3); min-height: 36px; background-color: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-pill); cursor: pointer; transition: all var(--duration-fast) var(--ease-out); user-select: none; font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-text-secondary); } .filter-chip:hover { border-color: var(--color-primary); background-color: var(--color-surface-hover); color: var(--color-text); } .filter-chip--active { background-color: var(--color-primary); border-color: var(--color-primary); color: var(--color-text-inverse); } .filter-chip--active:hover { background-color: var(--color-primary-hover); border-color: var(--color-primary-hover); } .filter-chip--disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; } .filter-chip__count { font-size: var(--font-size-xs); background-color: var(--color-bg); padding: var(--space-1) var(--space-2); border-radius: var(--radius-pill); color: var(--color-text-muted); min-width: 20px; text-align: center; } .filter-chip--active .filter-chip__count { background-color: rgba(255, 255, 255, 0.2); color: var(--color-text-inverse); } /* ── Filter Checkboxes ── */ .filter-checkboxes { display: flex; flex-direction: column; gap: var(--space-2); max-height: 180px; overflow-y: auto; padding-right: var(--space-2); } .filter-checkboxes::-webkit-scrollbar { width: 4px; } .filter-checkboxes::-webkit-scrollbar-track { background: var(--color-bg); } .filter-checkboxes::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: var(--radius-pill); } .filter-checkbox { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-1) var(--space-2); min-height: 36px; cursor: pointer; border-radius: var(--radius-sm); transition: background-color var(--duration-fast) var(--ease-out); } .filter-checkbox:hover { background-color: var(--color-surface-hover); } .filter-checkbox__box { flex-shrink: 0; width: 20px; height: 20px; border: 2px solid var(--color-border); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; transition: all var(--duration-fast) var(--ease-out); background-color: var(--color-surface); } .filter-checkbox__box svg { width: 14px; height: 14px; stroke: var(--color-text-inverse); stroke-width: 3; opacity: 0; transition: opacity var(--duration-fast) var(--ease-out); } .filter-checkbox--checked .filter-checkbox__box { background-color: var(--color-primary); border-color: var(--color-primary); } .filter-checkbox--checked .filter-checkbox__box svg { opacity: 1; } .filter-checkbox__label { flex: 1; font-size: var(--font-size-sm); color: var(--color-text); } .filter-checkbox__count { font-size: var(--font-size-xs); color: var(--color-text-muted); } /* ── Toggle Switch ── */ .filter-toggle { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2); border-radius: var(--radius-sm); background-color: var(--color-bg); cursor: pointer; transition: background-color var(--duration-fast) var(--ease-out); } .filter-toggle:hover { background-color: var(--color-surface-hover); } .filter-toggle__label { flex: 1; font-size: var(--font-size-sm); color: var(--color-text); } .filter-toggle__hint { font-size: var(--font-size-xs); color: var(--color-text-muted); } .toggle-switch { flex-shrink: 0; width: 44px; height: 26px; background-color: var(--color-border); border-radius: var(--radius-pill); position: relative; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-out); } .toggle-switch__thumb { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; background-color: var(--color-surface); border-radius: 50%; transition: transform var(--duration-fast) var(--ease-out); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15); } .toggle-switch--active { background-color: var(--color-primary); } .toggle-switch--active .toggle-switch__thumb { transform: translateX(18px); } /* ── Price Slider ── */ .filter-price { padding: var(--space-2) 0; } .filter-price__labels { display: flex; justify-content: space-between; font-size: var(--font-size-xs); color: var(--color-text-muted); margin-bottom: var(--space-2); } .filter-price__slider { width: 100%; height: 4px; -webkit-appearance: none; appearance: none; background-color: var(--color-border); border-radius: var(--radius-pill); outline: none; transition: background-color var(--duration-fast) var(--ease-out); } .filter-price__slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; background-color: var(--color-primary); border-radius: 50%; cursor: pointer; border: 2px solid var(--color-surface); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15); transition: background-color var(--duration-fast) var(--ease-out); } .filter-price__slider::-webkit-slider-thumb:hover { background-color: var(--color-primary-hover); } .filter-price__slider::-moz-range-thumb { width: 18px; height: 18px; background-color: var(--color-primary); border-radius: 50%; cursor: pointer; border: 2px solid var(--color-surface); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15); } .filter-price__slider::-moz-range-track { height: 4px; background-color: var(--color-border); border-radius: var(--radius-pill); } .filter-price__hint { font-size: var(--font-size-xs); color: var(--color-text-muted); margin-top: var(--space-1); } /* ── Reset Button ── */ .filters__reset { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--font-size-sm); } .filters__reset svg { width: 16px; height: 16px; } /* ── Desktop Sidebar ── */ .filters-sidebar { background-color: var(--color-surface); border-radius: var(--radius-md); padding: var(--space-4); border: 1px solid var(--color-border); position: sticky; top: var(--space-4); max-height: calc(100vh - 120px); overflow-y: auto; } .filters-sidebar::-webkit-scrollbar { width: 4px; } .filters-sidebar::-webkit-scrollbar-track { background: var(--color-bg); } .filters-sidebar::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: var(--radius-pill); } .filters-sidebar__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-4); padding-bottom: var(--space-3); border-bottom: 1px solid var(--color-border); } .filters-sidebar__title { font-size: var(--font-size-md); font-weight: var(--font-weight-semibold); color: var(--color-text); margin: 0; } .filters-sidebar__body { display: flex; flex-direction: column; gap: var(--space-2); } /* ── Mobile Bottom Sheet ── */ .filters-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(15, 23, 42, 0.5); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); z-index: var(--z-modal); display: none; align-items: flex-end; justify-content: center; animation: overlay-in var(--duration-normal) var(--ease-out); } .filters-overlay--open { display: flex; } @keyframes overlay-in { 0% { opacity: 0; } 100% { opacity: 1; } } .filters-sheet { background-color: var(--color-surface); border-radius: var(--radius-lg) var(--radius-lg) 0 0; max-width: 560px; width: 100%; max-height: 90vh; display: flex; flex-direction: column; transform: translateY(100%); transition: transform var(--duration-normal) var(--ease-out); box-shadow: 0 -4px 32px var(--color-shadow-heavy); } .filters-sheet--open { transform: translateY(0); } .filters-sheet__header { display: flex; align-items: center; justify-content: space-between; padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--color-border); flex-shrink: 0; } .filters-sheet__title { font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); color: var(--color-text); margin: 0; } .filters-sheet__close { background: none; border: none; color: var(--color-text-muted); cursor: pointer; padding: var(--space-2); min-height: 44px; min-width: 44px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); transition: background-color var(--duration-fast) var(--ease-out); } .filters-sheet__close:hover { background-color: var(--color-surface-hover); color: var(--color-text); } .filters-sheet__close svg { width: 20px; height: 20px; } .filters-sheet__body { padding: var(--space-4) var(--space-5); overflow-y: auto; flex: 1; } .filters-sheet__body .filter-section:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; } .filters-sheet__footer { padding: var(--space-4) var(--space-5); border-top: 1px solid var(--color-border); flex-shrink: 0; } .filters__apply { width: 100%; } .filters__apply-btn { width: 100%; min-height: 48px; font-size: var(--font-size-md); font-weight: var(--font-weight-semibold); justify-content: center; } /* ── Filter Section with Actions ── */ .filter-section--actions { border-bottom: none !important; padding-bottom: 0 !important; margin-bottom: 0 !important; } /* ── Empty State in Filters ── */ .filters__empty-text { font-size: var(--font-size-sm); color: var(--color-text-muted); padding: var(--space-2) 0; } /* ── Responsive ── */ @media (max-width: 768px) { .filters-sidebar { display: none; } .filters-sheet__body { padding: var(--space-3) var(--space-4); } .filters-sheet__header { padding: var(--space-3) var(--space-4); } .filters-sheet__footer { padding: var(--space-3) var(--space-4); } .filter-chips { gap: var(--space-1); } .filter-chip { padding: var(--space-1) var(--space-2); font-size: var(--font-size-xs); min-height: 32px; } .filter-chip__count { font-size: 9px; padding: 0 var(--space-1); min-width: 16px; } .filter-checkbox { min-height: 32px; padding: var(--space-1) var(--space-2); } .filter-checkbox__box { width: 18px; height: 18px; } .filter-checkbox__box svg { width: 12px; height: 12px; } .filter-checkbox__label { font-size: var(--font-size-xs); } .filter-toggle { padding: var(--space-2); } .filter-toggle__label { font-size: var(--font-size-xs); } .toggle-switch { width: 40px; height: 24px; } .toggle-switch__thumb { width: 18px; height: 18px; top: 3px; left: 3px; } .toggle-switch--active .toggle-switch__thumb { transform: translateX(16px); } } @media (min-width: 769px) { .filters-overlay { display: none !important; } } /* ── Reduced motion ── */ @media (prefers-reduced-motion: reduce) { .filters-overlay { animation: none; } .filters-sheet { transition: none; } .toggle-switch__thumb { transition: none; } .filter-checkbox__box svg { transition: none; } } /* ── Search Layout ── */ .search-layout { display: grid; grid-template-columns: 280px 1fr; gap: var(--space-4); margin-top: var(--space-4); } .search-filters { position: relative; } .search-main { min-width: 0; } /* ── Mobile Filter Button ── */ .mobile-filter-button { display: none; position: fixed; bottom: var(--space-4); right: var(--space-4); z-index: var(--z-sticky); } .mobile-filter-button .btn { padding: var(--space-3) var(--space-4); box-shadow: var(--shadow-lg); gap: var(--space-2); font-weight: var(--font-weight-semibold); } .mobile-filter-button__badge { background-color: var(--color-danger); color: var(--color-text-inverse); border-radius: var(--radius-pill); padding: 0 var(--space-2); font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); min-width: 20px; text-align: center; } @media (max-width: 768px) { .search-layout { grid-template-columns: 1fr; gap: var(--space-3); } .search-filters { display: none; } .mobile-filter-button { display: block; } } @media (min-width: 769px) { .mobile-filter-button { display: none !important; } } /* ───────────────────────────────────────────────────────────── TOAST – Syncing Type ───────────────────────────────────────────────────────────── */ .toast--syncing { background-color: var(--color-secondary-500); color: var(--color-text); } /* ───────────────────────────────────────────────────────────── TABS (Supplier Dashboard) ───────────────────────────────────────────────────────────── */ .tab-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-2) var(--space-4); min-height: 44px; font-family: var(--font-family); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-text-secondary); background: none; border: none; border-bottom: 2px solid transparent; cursor: pointer; transition: color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out); } .tab-btn:hover { color: var(--color-text); } .tab-btn--active { color: var(--color-primary); border-bottom-color: var(--color-primary); } .tab-content { display: none; } .tab-content--active { display: block; animation: tab-in var(--duration-normal) var(--ease-out); } @keyframes tab-in { 0% { opacity: 0; transform: translateY(8px); } 100% { opacity: 1; transform: translateY(0); } } .tab-content__toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); flex-wrap: wrap; } .tab-content__search { display: flex; align-items: center; gap: var(--space-2); flex: 1; max-width: 400px; position: relative; } .tab-content__search-icon { position: absolute; left: var(--space-3); color: var(--color-text-muted); display: flex; align-items: center; pointer-events: none; } .tab-content__search .input { padding-left: var(--space-8); } .tab-content__subtitle { font-size: var(--font-size-md); font-weight: var(--font-weight-semibold); color: var(--color-text); margin: 0; } .tab-content__filters .input { min-height: 36px; padding: 0 var(--space-3); font-size: var(--font-size-sm); } /* ───────────────────────────────────────────────────────────── TABLE RESPONSIVE & SKELETON ROWS ───────────────────────────────────────────────────────────── */ .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; /* ← prevent container from expanding */ } .table { width: 100%; border-collapse: collapse; font-size: var(--font-size-sm); } .table thead th { text-align: left; padding: var(--space-3) var(--space-3); font-weight: var(--font-weight-semibold); color: var(--color-text-muted); border-bottom: 2px solid var(--color-border); font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: 0.04em; } .table tbody td { padding: var(--space-3) var(--space-3); border-bottom: 1px solid var(--color-border); color: var(--color-text); vertical-align: middle; } .table tbody tr:hover { background-color: var(--color-surface-hover); } .table--compact tbody td { padding: var(--space-2) var(--space-2); font-size: var(--font-size-xs); } .table-empty { text-align: center !important; color: var(--color-text-muted) !important; padding: var(--space-6) !important; font-size: var(--font-size-sm); } .skeleton-row td { padding: var(--space-2) var(--space-3); } /* ───────────────────────────────────────────────────────────── INVENTORY SUMMARY CARDS (Supplier Dashboard) ───────────────────────────────────────────────────────────── */ .inventory-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-3); } .inventory-card { background-color: var(--color-surface); border-radius: var(--radius-md); padding: var(--space-4); border: 1px solid var(--color-border); transition: box-shadow var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out); } .inventory-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); } .inventory-card--low { border-left: 4px solid var(--color-warning); } .inventory-card--out { border-left: 4px solid var(--color-danger); } .inventory-card__header { display: flex; flex-direction: column; gap: var(--space-1); margin-bottom: var(--space-2); } .inventory-card__name { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--color-text); } .inventory-card__number { font-size: var(--font-size-xs); font-family: monospace; color: var(--color-text-muted); } .inventory-card__stats { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-2); } .inventory-card__price { font-size: var(--font-size-md); font-weight: var(--font-weight-bold); color: var(--color-text); } .inventory-card__stock { font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); padding: var(--space-1) var(--space-2); border-radius: var(--radius-pill); } .stock--in { background-color: var(--color-success-bg); color: var(--color-success); } .stock--low { background-color: var(--color-warning-bg); color: var(--color-warning); } .stock--out { background-color: var(--color-danger-bg); color: var(--color-danger); } .inventory-card__condition { font-size: var(--font-size-xs); color: var(--color-text-muted); } /* ───────────────────────────────────────────────────────────── ORDER DETAILS & TIMELINE ───────────────────────────────────────────────────────────── */ .order-details { display: flex; flex-direction: column; gap: var(--space-4); } .order-details__header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-2); } .order-details__meta { display: flex; flex-wrap: wrap; gap: var(--space-4); font-size: var(--font-size-sm); padding: var(--space-3); background-color: var(--color-bg); border-radius: var(--radius-sm); } .order-details__section { margin-top: var(--space-2); } .order-details__section h4 { font-size: var(--font-size-md); font-weight: var(--font-weight-semibold); margin-bottom: var(--space-3); } .timeline { display: flex; flex-direction: column; gap: var(--space-2); padding-left: var(--space-4); border-left: 2px solid var(--color-border); margin-left: var(--space-1); } .timeline-item { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-2) 0; } .timeline-item__dot { flex-shrink: 0; width: 12px; height: 12px; border-radius: 50%; margin-top: 4px; border: 2px solid var(--color-surface); box-shadow: 0 0 0 2px var(--color-border); } .timeline-item__dot--orange { background-color: var(--color-warning); } .timeline-item__dot--blue { background-color: var(--color-info); } .timeline-item__dot--purple { background-color: var(--color-secondary); } .timeline-item__dot--green { background-color: var(--color-success); } .timeline-item__dot--gray { background-color: var(--color-text-muted); } .timeline-item__content { display: flex; flex-direction: column; gap: 2px; } .timeline-item__status { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-text); } .timeline-item__date { font-size: var(--font-size-xs); color: var(--color-text-muted); } .timeline-item__by { font-size: var(--font-size-xs); color: var(--color-text-muted); font-style: italic; } /* ───────────────────────────────────────────────────────────── BULK ORDER ───────────────────────────────────────────────────────────── */ .bulk-order-container { max-width: 1200px; margin: 0 auto; padding: var(--space-4); } .bulk-order-container__header { margin-bottom: var(--space-6); } .bulk-order-container__title { font-size: var(--font-size-2xl); font-weight: var(--font-weight-bold); margin: 0; } .bulk-order-container__subtitle { color: var(--color-text-muted); margin: var(--space-2) 0 0 0; } .bulk-order-container__tabs { display: flex; gap: var(--space-2); margin-bottom: var(--space-4); border-bottom: 1px solid var(--color-border); } .drop-zone { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-3); padding: var(--space-8) var(--space-4); border: 2px dashed var(--color-border); border-radius: var(--radius-md); background-color: var(--color-bg); cursor: pointer; transition: border-color var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out); min-height: 200px; } .drop-zone:hover { border-color: var(--color-primary); background-color: var(--color-surface-hover); } .drop-zone--drag-over { border-color: var(--color-primary); background-color: var(--color-primary-50); } [data-theme="dark"] .drop-zone--drag-over { background-color: rgba(11, 60, 93, 0.2); } .drop-zone__icon svg { width: 48px; height: 48px; stroke: var(--color-text-muted); } .drop-zone__text { text-align: center; } .drop-zone__text strong { display: block; font-size: var(--font-size-md); color: var(--color-text); } .drop-zone__text span { font-size: var(--font-size-sm); color: var(--color-text-muted); } .drop-zone__hint { font-size: var(--font-size-xs); color: var(--color-text-muted); } .drop-zone__input { display: none; } .file-info { display: flex; align-items: center; justify-content: space-between; padding: var(--space-3) var(--space-4); background-color: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm); margin-top: var(--space-3); flex-wrap: wrap; gap: var(--space-2); } .file-info__details { display: flex; align-items: center; gap: var(--space-2); } .file-info__icon { font-size: 24px; line-height: 1; } .file-info__name { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-text); } .file-info__size { font-size: var(--font-size-xs); color: var(--color-text-muted); } .file-info__actions { display: flex; gap: var(--space-2); } .progress-container { margin-top: var(--space-3); } .progress-bar { width: 100%; height: 6px; background-color: var(--color-border); border-radius: var(--radius-pill); overflow: hidden; } .progress-bar__fill { height: 100%; background-color: var(--color-primary); border-radius: var(--radius-pill); transition: width var(--duration-slow) var(--ease-out); width: 0%; } .progress-label { display: block; font-size: var(--font-size-xs); color: var(--color-text-muted); margin-top: var(--space-1); } .paste-container { display: flex; flex-direction: column; gap: var(--space-4); } .paste-container__hint { font-size: var(--font-size-sm); color: var(--color-text-muted); padding: var(--space-3); background-color: var(--color-bg); border-radius: var(--radius-sm); } .paste-container__hint code { background-color: var(--color-surface); padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); font-size: var(--font-size-xs); } .paste-container__textarea { width: 100%; min-height: 150px; padding: var(--space-3) var(--space-4); font-family: var(--font-family); font-size: var(--font-size-sm); color: var(--color-text); background-color: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm); resize: vertical; transition: border-color var(--duration-fast) var(--ease-out); } .paste-container__textarea:focus { outline: none; border-color: var(--color-primary); box-shadow: var(--shadow-focus); } .paste-container__actions { display: flex; gap: var(--space-2); flex-wrap: wrap; } /* ── Validation Results ── */ .validation-results { margin-top: var(--space-4); padding: var(--space-4); background-color: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); animation: tab-in var(--duration-normal) var(--ease-out); } .validation-results__summary { display: flex; gap: var(--space-4); margin-bottom: var(--space-4); flex-wrap: wrap; } .validation-results__count { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill); } .validation-results__count.valid { background-color: var(--color-success-bg); color: var(--color-success); } .validation-results__count.invalid { background-color: var(--color-danger-bg); color: var(--color-danger); } .validation-results__count.total { background-color: var(--color-bg); color: var(--color-text-muted); } .validation-results__table-container { overflow-x: auto; } .row-valid { background-color: var(--color-success-bg); } .row-invalid { background-color: var(--color-danger-bg); } .status-badge { display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); } .status-badge--valid { background-color: var(--color-success-bg); color: var(--color-success); } .status-badge--invalid { background-color: var(--color-danger-bg); color: var(--color-danger); } .validation-results__actions { display: flex; gap: var(--space-2); margin-top: var(--space-4); flex-wrap: wrap; } /* ── Confirmation Summary ── */ .confirm-summary { display: flex; flex-direction: column; gap: var(--space-4); } .confirm-summary__stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: var(--space-3); } .confirm-stat { text-align: center; padding: var(--space-3); background-color: var(--color-bg); border-radius: var(--radius-sm); } .confirm-stat__label { display: block; font-size: var(--font-size-xs); color: var(--color-text-muted); } .confirm-stat__value { display: block; font-size: var(--font-size-lg); font-weight: var(--font-weight-bold); color: var(--color-text); } .confirm-summary__suppliers { font-size: var(--font-size-sm); color: var(--color-text); } .confirm-summary__warning { padding: var(--space-3); background-color: var(--color-warning-bg); color: var(--color-warning); border-radius: var(--radius-sm); font-size: var(--font-size-sm); } .confirm-summary__items { max-height: 200px; overflow-y: auto; } .confirm-summary__items-list { display: flex; flex-direction: column; gap: var(--space-1); } .confirm-item { display: flex; justify-content: space-between; padding: var(--space-1) var(--space-2); font-size: var(--font-size-sm); border-bottom: 1px solid var(--color-border); } .confirm-item__price { font-weight: var(--font-weight-medium); } /* ── Success Summary ── */ .success-summary { text-align: center; padding: var(--space-4); } .success-summary__icon { font-size: 48px; line-height: 1; margin-bottom: var(--space-3); } .success-summary h3 { margin-bottom: var(--space-4); } .success-summary__details { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--space-3); margin-top: var(--space-3); } .success-stat { text-align: center; padding: var(--space-3); background-color: var(--color-bg); border-radius: var(--radius-sm); } .success-stat__label { display: block; font-size: var(--font-size-xs); color: var(--color-text-muted); } .success-stat__value { display: block; font-size: var(--font-size-md); font-weight: var(--font-weight-semibold); color: var(--color-text); } /* ───────────────────────────────────────────────────────────── QUOTE DETAILS & HISTORY ───────────────────────────────────────────────────────────── */ .quotes-container { max-width: 1200px; margin: 0 auto; padding: var(--space-4); } .quotes-container__header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-4); } .quotes-container__title { font-size: var(--font-size-2xl); font-weight: var(--font-weight-bold); margin: 0; } .quotes-container__toolbar { display: flex; gap: var(--space-2); } .quote-details { display: flex; flex-direction: column; gap: var(--space-4); } .quote-details__header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-2); } .quote-details__meta { display: flex; flex-wrap: wrap; gap: var(--space-4); font-size: var(--font-size-sm); padding: var(--space-3); background-color: var(--color-bg); border-radius: var(--radius-sm); } .quote-details__section { margin-top: var(--space-2); } .quote-details__section h4 { font-size: var(--font-size-md); font-weight: var(--font-weight-semibold); margin-bottom: var(--space-3); } .history { display: flex; flex-direction: column; gap: var(--space-2); } .history-entry { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); padding: var(--space-2) var(--space-3); background-color: var(--color-bg); border-radius: var(--radius-sm); font-size: var(--font-size-sm); } .history-entry__from { font-weight: var(--font-weight-semibold); color: var(--color-primary); } .history-entry__message { color: var(--color-text); } .history-entry__date { font-size: var(--font-size-xs); color: var(--color-text-muted); margin-left: auto; } .respond-form { display: flex; flex-direction: column; gap: var(--space-4); } .respond-items { display: flex; flex-direction: column; gap: var(--space-3); } .respond-item { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); padding: var(--space-3); background-color: var(--color-bg); border-radius: var(--radius-sm); border: 1px solid var(--color-border); } .respond-item__name { flex: 1; font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-text); } .respond-item__row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; } .respond-item__row label { font-size: var(--font-size-xs); color: var(--color-text-muted); } .respond-item__row .input { width: 120px; min-height: 36px; padding: 0 var(--space-2); font-size: var(--font-size-sm); } /* ───────────────────────────────────────────────────────────── PRICING TIERS ───────────────────────────────────────────────────────────── */ .pricing-container { max-width: 1200px; margin: 0 auto; padding: var(--space-4); } .pricing-container__header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-4); } .pricing-container__title { font-size: var(--font-size-2xl); font-weight: var(--font-weight-bold); margin: 0; } .pricing-container__toolbar { display: flex; gap: var(--space-2); } .pricing-container__selector { display: flex; align-items: flex-end; gap: var(--space-3); margin-bottom: var(--space-4); flex-wrap: wrap; } .pricing-container__selector .form-group { flex: 1; max-width: 400px; } .pricing-curve { margin-top: var(--space-6); padding: var(--space-4); background-color: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); } .pricing-curve__title { font-size: var(--font-size-md); font-weight: var(--font-weight-semibold); margin: 0 0 var(--space-3) 0; } .pricing-curve__chart { width: 100%; min-height: 200px; } /* ───────────────────────────────────────────────────────────── PURCHASE ORDER ───────────────────────────────────────────────────────────── */ .po-container { max-width: 1200px; margin: 0 auto; padding: var(--space-4); } .po-container__header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-4); } .po-container__title { font-size: var(--font-size-2xl); font-weight: var(--font-weight-bold); margin: 0; } .po-container__toolbar { display: flex; gap: var(--space-2); } .po-input-section { margin-bottom: var(--space-6); padding: var(--space-4); background-color: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); } .po-input-section__title h3 { margin: 0 0 var(--space-1) 0; } .po-input-section__hint { font-size: var(--font-size-sm); color: var(--color-text-muted); margin: 0 0 var(--space-3) 0; } .po-input-section__form { display: flex; align-items: flex-end; gap: var(--space-3); flex-wrap: wrap; } .po-input-wrapper { display: flex; align-items: center; gap: var(--space-2); } .po-input-wrapper .input { flex: 1; } .po-validation { margin-top: var(--space-2); font-size: var(--font-size-sm); } .validation-error { color: var(--color-danger); } .validation-success { color: var(--color-success); } .po-lookup-section { margin-bottom: var(--space-6); padding: var(--space-4); background-color: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); } .po-lookup-section__title h3 { margin: 0 0 var(--space-3) 0; } .po-lookup-section__form { display: flex; align-items: flex-end; gap: var(--space-3); flex-wrap: wrap; } .po-lookup-section__form .form-group { flex: 1; max-width: 400px; } .po-lookup-result { margin-top: var(--space-3); } .po-lookup-result__empty { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3); background-color: var(--color-bg); border-radius: var(--radius-sm); color: var(--color-text-muted); font-size: var(--font-size-sm); } .po-lookup-result__empty .po-lookup-result__icon svg { width: 20px; height: 20px; stroke: var(--color-text-muted); } .po-lookup-result__found { padding: var(--space-3); background-color: var(--color-surface); border: 1px solid var(--color-success); border-radius: var(--radius-sm); } .po-lookup-result__header { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); flex-wrap: wrap; } .po-lookup-result__badge { padding: var(--space-1) var(--space-3); background-color: var(--color-success); color: var(--color-text-inverse); border-radius: var(--radius-pill); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); } .po-lookup-result__po { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--color-text); } .po-lookup-result__details { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-2); margin-bottom: var(--space-3); } .po-lookup-result__detail { display: flex; flex-direction: column; } .po-lookup-result__label { font-size: var(--font-size-xs); color: var(--color-text-muted); } .po-lookup-result__value { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-text); } .po-lookup-result__value code { font-size: var(--font-size-xs); background: var(--color-bg); padding: 0 var(--space-1); border-radius: var(--radius-sm); } .po-history-section { padding: var(--space-4); background-color: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); } .po-history-section__title { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-3); } .po-history-section__title h3 { margin: 0; } .po-history-section__count { font-size: var(--font-size-sm); color: var(--color-text-muted); } /* ───────────────────────────────────────────────────────────── FLEET MANAGEMENT ───────────────────────────────────────────────────────────── */ .fleet-container { max-width: 1200px; margin: 0 auto; padding: var(--space-4); } .fleet-container__header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-4); } .fleet-container__title { font-size: var(--font-size-2xl); font-weight: var(--font-weight-bold); margin: 0; } .fleet-container__toolbar { display: flex; gap: var(--space-2); } .vehicles-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-4); margin-bottom: var(--space-6); } .vehicle-card { background-color: var(--color-surface); border-radius: var(--radius-md); border: 1px solid var(--color-border); overflow: hidden; transition: box-shadow var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out); } .vehicle-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); } .vehicle-card--default { border-color: var(--color-primary); } .vehicle-card--active { border-color: var(--color-secondary); } .vehicle-card__image { width: 100%; aspect-ratio: 16/9; background-color: var(--color-bg); overflow: hidden; } .vehicle-card__image img { width: 100%; height: 100%; object-fit: cover; } .vehicle-card__body { padding: var(--space-4); } .vehicle-card__header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-2); } .vehicle-card__name { font-size: var(--font-size-md); font-weight: var(--font-weight-semibold); color: var(--color-text); } .vehicle-card__details { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); font-size: var(--font-size-xs); color: var(--color-text-muted); margin-bottom: var(--space-2); } .vehicle-card__identifiers { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); font-size: var(--font-size-xs); color: var(--color-text-muted); margin-bottom: var(--space-3); font-family: monospace; } .vehicle-card__vin, .vehicle-card__plate { background-color: var(--color-bg); padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); } .vehicle-card__actions { display: flex; gap: var(--space-2); flex-wrap: wrap; } .vehicle-card__actions .btn { font-size: var(--font-size-xs); min-height: 32px; } .fleet-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-3); padding: var(--space-8); text-align: center; background-color: var(--color-surface); border-radius: var(--radius-md); border: 1px dashed var(--color-border); } .fleet-empty__icon svg { width: 48px; height: 48px; stroke: var(--color-text-muted); } .fleet-empty__title { font-size: var(--font-size-xl); font-weight: var(--font-weight-semibold); color: var(--color-text); margin: 0; } .fleet-empty__description { color: var(--color-text-muted); margin: 0; } /* ── Reminders Section ── */ .reminders-section { padding: var(--space-4); background-color: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); } .reminders-section__header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-4); } .reminders-section__title { font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); margin: 0; } .reminders-list { display: flex; flex-direction: column; gap: var(--space-2); } .reminder-item { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-2); padding: var(--space-3) var(--space-4); background-color: var(--color-bg); border-radius: var(--radius-sm); border: 1px solid var(--color-border); } .reminder-item__info { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); flex: 1; } .reminder-item__vehicle { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-text); } .reminder-item__type { font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); padding: var(--space-1) var(--space-2); background-color: var(--color-primary-50); color: var(--color-primary); border-radius: var(--radius-pill); } [data-theme="dark"] .reminder-item__type { background-color: rgba(11, 60, 93, 0.3); } .reminder-item__detail { font-size: var(--font-size-xs); color: var(--color-text-muted); } .reminder-item__actions { display: flex; gap: var(--space-1); } .reminders-empty { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); padding: var(--space-6); text-align: center; color: var(--color-text-muted); } .reminders-empty__icon svg { width: 32px; height: 32px; stroke: var(--color-text-muted); } .vin-input-wrapper { display: flex; align-items: center; gap: var(--space-2); } .vin-input-wrapper .input { flex: 1; } /* ───────────────────────────────────────────────────────────── DASHBOARDS – Garage & Supplier ───────────────────────────────────────────────────────────── */ .garage-dashboard, .supplier-dashboard { max-width: 1200px; width: 100%; /* ← ensure full width on small screens */ margin: 0 auto; padding: var(--space-4); box-sizing: border-box; /* ← padding included in width */ overflow-x: hidden; /* ← prevent inner content from expanding */ } /* ── Global constraint: no view should overflow horizontally ── */ #app > div { max-width: 100vw; overflow-x: hidden; box-sizing: border-box; } .garage-dashboard__header, .supplier-dashboard__header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-4); } .garage-dashboard__title, .supplier-dashboard__title { font-size: var(--font-size-2xl); font-weight: var(--font-weight-bold); margin: 0; } .garage-dashboard__toolbar, .supplier-dashboard__toolbar { display: flex; gap: var(--space-2); } /* ── KPI Grid ── */ .kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-4); margin-bottom: var(--space-6); } .kpi-card { background-color: var(--color-surface); border-radius: var(--radius-md); padding: var(--space-4); border: 1px solid var(--color-border); transition: box-shadow var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out); } .kpi-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); } .kpi-card__icon { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--radius-sm); background-color: var(--color-primary-50); color: var(--color-primary); margin-bottom: var(--space-2); } [data-theme="dark"] .kpi-card__icon { background-color: rgba(11, 60, 93, 0.3); } .kpi-card__icon svg { width: 20px; height: 20px; } .kpi-card__value { font-size: var(--font-size-2xl); font-weight: var(--font-weight-bold); color: var(--color-text); line-height: var(--line-height-tight); } .kpi-card__label { font-size: var(--font-size-sm); color: var(--color-text-muted); } .kpi-card__trend { font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); margin-top: var(--space-1); } .kpi-card__sub { font-size: var(--font-size-xs); color: var(--color-text-muted); margin-top: var(--space-1); } /* ── Quick Actions ── */ .quick-actions { margin-bottom: var(--space-6); } .quick-actions__title { font-size: var(--font-size-md); font-weight: var(--font-weight-semibold); color: var(--color-text); margin: 0 0 var(--space-3) 0; } .quick-actions__grid { display: flex; flex-wrap: wrap; gap: var(--space-2); } .quick-action-btn { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4); background-color: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm); cursor: pointer; font-family: var(--font-family); font-size: var(--font-size-sm); color: var(--color-text); transition: all var(--duration-fast) var(--ease-out); min-height: 44px; } .quick-action-btn:hover { border-color: var(--color-primary); background-color: var(--color-surface-hover); box-shadow: var(--shadow-sm); } .quick-action-btn svg { width: 20px; height: 20px; stroke: var(--color-primary); } /* ── Recent Orders ── */ .recent-orders, .pending-quotes { margin-bottom: var(--space-6); } .recent-orders__header, .pending-quotes__header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-3); } .recent-orders__title, .pending-quotes__title { font-size: var(--font-size-md); font-weight: var(--font-weight-semibold); color: var(--color-text); margin: 0; } /* ── Pending Quote Item ── */ .pending-quotes__list { display: flex; flex-direction: column; gap: var(--space-2); } .pending-quote-item { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-2); padding: var(--space-3) var(--space-4); background-color: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm); } .pending-quote-item__info { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); flex: 1; } .pending-quote-item__id { font-size: var(--font-size-xs); font-family: monospace; color: var(--color-text-muted); } .pending-quote-item__supplier { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-text); } .pending-quote-item__items { font-size: var(--font-size-xs); color: var(--color-text-muted); } .pending-quote-item__total { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--color-text); } .pending-quote-item__actions { display: flex; gap: var(--space-2); flex-wrap: wrap; } .pending-quote-item__actions .btn { font-size: var(--font-size-xs); min-height: 32px; } /* ── Sales Trend ── */ .sales-trend { margin-bottom: var(--space-6); padding: var(--space-4); background-color: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); } .sales-trend__header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-3); } .sales-trend__title { font-size: var(--font-size-md); font-weight: var(--font-weight-semibold); color: var(--color-text); margin: 0; } .sales-trend__controls { display: flex; gap: var(--space-1); } .sales-trend__controls .btn { min-height: 32px; padding: 0 var(--space-3); font-size: var(--font-size-xs); } .sales-trend__period { font-size: var(--font-size-sm); color: var(--color-text-muted); } .sales-trend__chart { min-height: 180px; width: 100%; } /* ── Inventory Alerts ── */ .inventory-alerts { margin-bottom: var(--space-6); padding: var(--space-4); background-color: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); } .inventory-alerts__header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-3); } .inventory-alerts__title { font-size: var(--font-size-md); font-weight: var(--font-weight-semibold); color: var(--color-text); margin: 0; } .inventory-alerts__controls { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; } .inventory-alerts__count { font-size: var(--font-size-sm); color: var(--color-text-muted); } .threshold-control { display: flex; align-items: center; gap: var(--space-2); } .threshold-control label { font-size: var(--font-size-xs); color: var(--color-text-muted); } .threshold-control .input { width: 60px; min-height: 32px; padding: var(--space-1) var(--space-2); font-size: var(--font-size-xs); } .inventory-alerts__list { display: flex; flex-direction: column; gap: var(--space-2); } .alert-item { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-2); padding: var(--space-3) var(--space-4); background-color: var(--color-danger-bg); border-radius: var(--radius-sm); border-left: 4px solid var(--color-danger); } .alert-item__name { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-text); } .alert-item__stock { font-size: var(--font-size-xs); color: var(--color-danger); font-weight: var(--font-weight-semibold); } .alert-item .btn { font-size: var(--font-size-xs); min-height: 32px; } /* ───────────────────────────────────────────────────────────── RESTOCK MODAL (extends existing modal styles) ───────────────────────────────────────────────────────────── */ #restock-modal .modal__body .form-group .input:disabled { background-color: var(--color-bg); color: var(--color-text-muted); cursor: not-allowed; } /* ───────────────────────────────────────────────────────────── RESPONSIVE FIXES FOR DASHBOARDS ───────────────────────────────────────────────────────────── */ @media (max-width: 768px) { .kpi-grid { grid-template-columns: repeat(2, 1fr); } .vehicles-grid { grid-template-columns: 1fr; } .inventory-grid { grid-template-columns: 1fr 1fr; } .pending-quote-item { flex-direction: column; align-items: stretch; } .pending-quote-item__actions { justify-content: flex-start; } .po-input-section__form, .po-lookup-section__form { flex-direction: column; align-items: stretch; } .po-input-wrapper { flex-wrap: wrap; } .pricing-container__selector { flex-direction: column; align-items: stretch; } .pricing-container__selector .form-group { max-width: 100%; } .sales-trend__header { flex-direction: column; align-items: stretch; } .inventory-alerts__header { flex-direction: column; align-items: stretch; } .inventory-alerts__controls { justify-content: flex-start; } .threshold-control { flex-wrap: wrap; } } @media (max-width: 480px) { .kpi-grid { grid-template-columns: 1fr 1fr; gap: var(--space-2); } .kpi-card { padding: var(--space-3); } .kpi-card__value { font-size: var(--font-size-xl); } .inventory-grid { grid-template-columns: 1fr; } .quick-actions__grid { flex-direction: column; } .quick-action-btn { width: 100%; justify-content: center; } .validation-results__summary { flex-direction: column; align-items: stretch; } .confirm-summary__stats { grid-template-columns: 1fr 1fr; } } /* ───────────────────────────────────────────────────────────── SIDE PANEL – Fixed overlay ───────────────────────────────────────────────────────────── */ /* Overlay */ .side-panel-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.4); backdrop-filter: blur(4px); z-index: calc(var(--z-modal) + 1); animation: overlay-fade-in 0.2s ease-out; } @keyframes overlay-fade-in { 0% { opacity: 0; } 100% { opacity: 1; } } .side-panel { position: fixed; top: 0; right: 0; /* ← anchor to right */ bottom: 0; width: 300px; max-width: 80vw; background-color: var(--color-surface); border-left: 1px solid var(--color-border); /* border on left side now */ z-index: calc(var(--z-modal) + 2); display: flex; flex-direction: column; transform: translateX(100%); /* start off-screen to the right */ transition: transform 0.2s ease-out; box-shadow: var(--shadow-lg); overflow-y: auto; } .side-panel--open { transform: translateX(0); /* slide in to visible */ } /* Header inside panel */ .side-panel__header { display: flex; align-items: center; justify-content: space-between; padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--color-border); flex-shrink: 0; } .side-panel__brand { display: flex; align-items: center; gap: var(--space-2); } .side-panel__brand img { height: 32px; width: auto; } .side-panel__brand-name { font-size: var(--font-size-lg); font-weight: var(--font-weight-bold); color: var(--color-text); } .side-panel__close { background: none; border: none; padding: var(--space-2); min-height: 44px; min-width: 44px; cursor: pointer; color: var(--color-text-muted); display: flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); transition: background-color 0.15s ease; } .side-panel__close:hover { background-color: var(--color-surface-hover); color: var(--color-text); } /* Navigation */ .side-panel__nav { flex: 1; padding: var(--space-3) 0; overflow-y: auto; } .side-panel__list { list-style: none; margin: 0; padding: 0; } .side-panel__item { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-5); min-height: 48px; cursor: pointer; color: var(--color-text-secondary); transition: background-color 0.15s ease, color 0.15s ease; border: none; background: none; width: 100%; text-align: left; font-family: var(--font-family); font-size: var(--font-size-md); font-weight: var(--font-weight-medium); } .side-panel__item:hover { background-color: var(--color-surface-hover); color: var(--color-text); } .side-panel__item--active { background-color: var(--color-primary-50); color: var(--color-primary); border-right: 3px solid var(--color-primary); } [data-theme="dark"] .side-panel__item--active { background-color: rgba(11, 60, 93, 0.3); } .side-panel__item-icon { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; } .side-panel__item-icon svg { width: 20px; height: 20px; stroke: currentColor; } .side-panel__item-label { flex: 1; } /* Footer */ .side-panel__footer { border-top: 1px solid var(--color-border); padding: var(--space-3) var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); flex-shrink: 0; } .side-panel__footer-btn { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); min-height: 44px; background: none; border: none; border-radius: var(--radius-sm); cursor: pointer; font-family: var(--font-family); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-text-secondary); transition: background-color 0.15s ease; width: 100%; text-align: left; } .side-panel__footer-btn:hover { background-color: var(--color-surface-hover); color: var(--color-text); } .side-panel__footer-icon { flex-shrink: 0; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; } .side-panel__footer-icon svg { width: 20px; height: 20px; stroke: currentColor; } /* ── Responsive ── */ @media (max-width: 480px) { .side-panel { width: 280px; } .side-panel__header { padding: var(--space-3) var(--space-4); } .side-panel__item { padding: var(--space-3) var(--space-4); font-size: var(--font-size-sm); } } @media (prefers-reduced-motion: reduce) { .side-panel, .side-panel-overlay { animation: none; transition: none; } } /* ───────────────────────────────────────────────────────────── APP HEADER – Fixed to top of viewport with correct ordering ───────────────────────────────────────────────────────────── */ .app-header { position: fixed; top: 0; left: 0; right: 0; width: 100%; /* ← explicit width */ max-width: 100vw; /* ← cap to viewport width */ box-sizing: border-box; /* ← padding included in width */ z-index: var(--z-sticky); display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); background-color: var(--color-surface); border-bottom: 1px solid var(--color-border); min-height: 56px; transition: background-color 0.2s ease; box-shadow: 0 1px 2px var(--color-shadow); } /* ── Reordering: Vehicle Selector (Left) → Title (Center) → Menu (Right) ── */ .vehicle-selector-wrapper { order: 1; flex-shrink: 0; margin-right: var(--space-3); } .app-header__title { order: 2; flex: 1; text-align: center; } .app-header__menu { order: 3; margin-left: auto; flex-shrink: 0; background: none; border: none; padding: var(--space-2); min-height: 44px; min-width: 44px; cursor: pointer; color: var(--color-text); display: flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); transition: background-color 0.15s ease; } .app-header__menu:hover { background-color: var(--color-surface-hover); } .app-header__menu svg { stroke: var(--color-text); } .vehicle-selector { min-width: 140px; } /* ── Compensate for fixed header ── */ #app { padding-top: 56px; max-width: 100vw; /* ← prevent stretching */ overflow-x: hidden; /* ← prevent inner overflow from expanding body */ box-sizing: border-box; } @media (max-width: 480px) { #app { padding-top: 52px; } } /* ── Ensure loading state remains centered ── */ #app-loading { margin-top: -56px; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 24px; text-align: center; } /* ───────────────────────────────────────────────────────────── ORDERS CONTAINER – Header alignment ───────────────────────────────────────────────────────────── */ .orders-container { max-width: 1200px; margin: 0 auto; padding: var(--space-4); width: 100%; box-sizing: border-box; } .orders-container__header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-4); } .orders-container__title { font-size: var(--font-size-2xl); font-weight: var(--font-weight-bold); color: var(--color-text); margin: 0; } .orders-container__toolbar { display: flex; align-items: center; gap: var(--space-2); } /* ───────────────────────────────────────────────────────────── REORDER CONTAINER ───────────────────────────────────────────────────────────── */ .reorder-container { max-width: 1200px; margin: 0 auto; padding: var(--space-4); width: 100%; box-sizing: border-box; } .reorder-container__header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-2); } .reorder-container__title { font-size: var(--font-size-2xl); font-weight: var(--font-weight-bold); color: var(--color-text); margin: 0; } .reorder-container__subtitle { color: var(--color-text-muted); font-size: var(--font-size-sm); margin-bottom: var(--space-4); } .reorder-list { display: flex; flex-direction: column; gap: var(--space-2); } .reorder-item { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); background-color: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); flex-wrap: wrap; } .reorder-item__info { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; } .reorder-item__name { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--color-text); } .reorder-item__number { font-size: var(--font-size-xs); font-family: monospace; color: var(--color-text-muted); } .reorder-item__meta { font-size: var(--font-size-xs); color: var(--color-text-muted); } .reorder-item__price { font-size: var(--font-size-md); font-weight: var(--font-weight-bold); color: var(--color-text); flex-shrink: 0; } .reorder-item__actions { flex-shrink: 0; } @media (max-width: 640px) { .orders-container__header, .reorder-container__header { flex-direction: column; align-items: stretch; } .orders-container__title, .reorder-container__title { font-size: var(--font-size-xl); } } /* ───────────────────────────────────────────────────────────── VIN LOOKUP VIEW ───────────────────────────────────────────────────────────── */ .vin-lookup-container { max-width: 900px; margin: 0 auto; padding: var(--space-4); width: 100%; box-sizing: border-box; } .vin-lookup-container__header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-2); } .vin-lookup-container__title { font-size: var(--font-size-2xl); font-weight: var(--font-weight-bold); color: var(--color-text); margin: 0; } .vin-lookup-container__subtitle { color: var(--color-text-muted); font-size: var(--font-size-sm); margin-bottom: var(--space-5); } /* ── Input Card ── */ .vin-lookup-card { padding: var(--space-5); background-color: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); margin-bottom: var(--space-5); } .vin-input-wrapper { display: flex; flex-direction: column; gap: var(--space-2); } .vin-input-wrapper__label { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--color-text); } .vin-input-wrapper__row { display: flex; gap: var(--space-2); flex-wrap: wrap; } .vin-input-wrapper__input { flex: 1; min-width: 200px; font-family: monospace; font-size: var(--font-size-md); letter-spacing: 0.15em; text-transform: uppercase; } .vin-input-wrapper__meta { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-2); font-size: var(--font-size-xs); } .vin-input-wrapper__count { color: var(--color-text-muted); font-variant-numeric: tabular-nums; } .vin-input-wrapper__hint { color: var(--color-warning); } /* ── Result Card ── */ .vin-result { animation: fade-in var(--duration-normal) var(--ease-out); } @keyframes fade-in { 0% { opacity: 0; transform: translateY(8px); } 100% { opacity: 1; transform: translateY(0); } } .vin-result-card { padding: var(--space-5); background-color: var(--color-surface); border-radius: var(--radius-md); border: 1px solid var(--color-border); box-shadow: var(--shadow-sm); } .vin-result-card--success { border-left: 4px solid var(--color-success); } .vin-result-card--warning { border-left: 4px solid var(--color-warning); } .vin-result-card--error { border-left: 4px solid var(--color-danger); } .vin-result-card__header { display: flex; align-items: flex-start; gap: var(--space-3); margin-bottom: var(--space-4); } .vin-result-card__icon { flex-shrink: 0; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); background-color: var(--color-success-bg); color: var(--color-success); } .vin-result-card__icon--warning { background-color: var(--color-warning-bg); color: var(--color-warning); } .vin-result-card__icon--error { background-color: var(--color-danger-bg); color: var(--color-danger); } .vin-result-card__icon svg { width: 24px; height: 24px; } .vin-result-card__title { flex: 1; min-width: 0; } .vin-result-card__title h3 { margin: 0 0 var(--space-1) 0; font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); color: var(--color-text); } .vin-result-card__badge { display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-1) var(--space-2); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); color: var(--color-success); background-color: var(--color-success-bg); border-radius: var(--radius-pill); } .vin-result-card__badge svg { width: 12px; height: 12px; } .vin-result-card__subtitle { font-size: var(--font-size-sm); color: var(--color-text-muted); margin: 0; } .vin-result-card__message { font-size: var(--font-size-sm); color: var(--color-text-secondary); margin-bottom: var(--space-4); } /* ── Detail Grid ── */ .vin-result-card__details { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--space-3); padding: var(--space-4); background-color: var(--color-bg); border-radius: var(--radius-sm); margin-bottom: var(--space-4); } .vin-detail { display: flex; flex-direction: column; gap: 2px; } .vin-detail__label { font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.04em; } .vin-detail__value { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-text); } .vin-detail__value--mono { font-family: monospace; letter-spacing: 0.08em; } /* ── Actions ── */ .vin-result-card__actions { display: flex; gap: var(--space-2); flex-wrap: wrap; } .vin-result-card__actions .btn { flex: 1; min-width: 180px; justify-content: center; } @media (max-width: 640px) { .vin-lookup-container__title { font-size: var(--font-size-xl); } .vin-input-wrapper__row { flex-direction: column; } .vin-input-wrapper__row .btn { width: 100%; } .vin-result-card__actions .btn { min-width: 100%; } } /* ───────────────────────────────────────────────────────────── INVENTORY VIEW (Supplier) ───────────────────────────────────────────────────────────── */ .inventory-container { max-width: 1200px; margin: 0 auto; padding: var(--space-4); width: 100%; box-sizing: border-box; } .inventory-container__header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-2); } .inventory-container__title { font-size: var(--font-size-2xl); font-weight: var(--font-weight-bold); color: var(--color-text); margin: 0; } .inventory-container__subtitle { color: var(--color-text-muted); font-size: var(--font-size-sm); margin-bottom: var(--space-5); } .inventory-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-3); margin-bottom: var(--space-6); } .inventory-kpi { padding: var(--space-4); background-color: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); border-left: 4px solid var(--color-primary); } .inventory-kpi--warning { border-left-color: var(--color-warning); } .inventory-kpi--danger { border-left-color: var(--color-danger); } .inventory-kpi__icon { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background-color: var(--color-primary-50); border-radius: var(--radius-sm); color: var(--color-primary); margin-bottom: var(--space-2); } [data-theme="dark"] .inventory-kpi__icon { background-color: rgba(11,60,93,0.3); } .inventory-kpi__icon svg { width: 20px; height: 20px; } .inventory-kpi__value { font-size: var(--font-size-2xl); font-weight: var(--font-weight-bold); color: var(--color-text); line-height: 1.1; } .inventory-kpi__label { font-size: var(--font-size-sm); color: var(--color-text-muted); margin-top: var(--space-1); } .inventory-kpi__sub { font-size: var(--font-size-xs); color: var(--color-text-muted); margin-top: var(--space-1); } .inventory-container__section { padding: var(--space-4); background-color: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); } .inventory-container__section-header { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-4); } .inventory-container__section-title { font-size: var(--font-size-md); font-weight: var(--font-weight-semibold); color: var(--color-text); margin: 0; } .inventory-container__search { max-width: 300px; min-height: 40px; font-size: var(--font-size-sm); } .inventory-table-container { overflow-x: auto; } /* ───────────────────────────────────────────────────────────── ANALYTICS VIEW (Supplier) ───────────────────────────────────────────────────────────── */ .analytics-container { max-width: 1200px; margin: 0 auto; padding: var(--space-4); width: 100%; box-sizing: border-box; } .analytics-container__header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-2); } .analytics-container__title { font-size: var(--font-size-2xl); font-weight: var(--font-weight-bold); color: var(--color-text); margin: 0; } .analytics-container__subtitle { color: var(--color-text-muted); font-size: var(--font-size-sm); margin-bottom: var(--space-5); } .analytics-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-3); margin-bottom: var(--space-6); } .analytics-kpi { padding: var(--space-4); background-color: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); } .analytics-kpi__icon { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background-color: var(--color-primary-50); border-radius: var(--radius-sm); color: var(--color-primary); margin-bottom: var(--space-2); } [data-theme="dark"] .analytics-kpi__icon { background-color: rgba(11,60,93,0.3); } .analytics-kpi__icon svg { width: 20px; height: 20px; } .analytics-kpi__value { font-size: var(--font-size-xl); font-weight: var(--font-weight-bold); color: var(--color-text); line-height: 1.2; } .analytics-kpi__label { font-size: var(--font-size-sm); color: var(--color-text-muted); margin-top: var(--space-1); } .analytics-kpi__sub { font-size: var(--font-size-xs); color: var(--color-text-muted); margin-top: var(--space-1); } .analytics-section { padding: var(--space-4); background-color: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); margin-bottom: var(--space-4); } .analytics-section__title { font-size: var(--font-size-md); font-weight: var(--font-weight-semibold); color: var(--color-text); margin: 0 0 var(--space-4) 0; } .analytics-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); } @media (max-width: 768px) { .analytics-two-col { grid-template-columns: 1fr; } .inventory-container__header, .analytics-container__header { flex-direction: column; align-items: stretch; } .inventory-container__title, .analytics-container__title { font-size: var(--font-size-xl); } } .analytics-list { display: flex; flex-direction: column; gap: var(--space-3); } .analytics-list-item { display: flex; flex-direction: column; gap: var(--space-1); } .analytics-list-item__header { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-2); } .analytics-list-item__name { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .analytics-list-item__value { font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); color: var(--color-text-muted); flex-shrink: 0; } .analytics-list-item__bar { width: 100%; height: 6px; background-color: var(--color-bg); border-radius: var(--radius-pill); overflow: hidden; } .analytics-list-item__bar-fill { height: 100%; background-color: var(--color-primary); border-radius: var(--radius-pill); transition: width 0.5s ease-out; } .analytics-list-item__bar-fill--warning { background-color: var(--color-warning); } .analytics-list-item__bar-fill--info { background-color: var(--color-info); } .analytics-list-item__bar-fill--primary { background-color: var(--color-primary); } .analytics-list-item__bar-fill--success { background-color: var(--color-success); } /* ───────────────────────────────────────────────────────────── SERVICE REMINDER BANNER – Fixed below the header ───────────────────────────────────────────────────────────── */ .reminder-banner { position: fixed; top: 56px; /* sits directly below the fixed header */ left: 0; right: 0; z-index: 94; /* below the sticky header (100) */ display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); background-color: var(--color-warning-bg); border-bottom: 1px solid var(--color-warning); box-shadow: 0 2px 4px var(--color-shadow); animation: reminder-banner-in var(--duration-normal) var(--ease-out); max-width: 100vw; box-sizing: border-box; flex-wrap: wrap; } @keyframes reminder-banner-in { 0% { opacity: 0; transform: translateY(-8px); } 100% { opacity: 1; transform: translateY(0); } } .reminder-banner__icon { flex-shrink: 0; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background-color: var(--color-warning); color: var(--color-text-inverse); } .reminder-banner__icon svg { width: 22px; height: 22px; } .reminder-banner__content { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 2px; } .reminder-banner__title { display: flex; align-items: center; gap: var(--space-2); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--color-text); flex-wrap: wrap; } .reminder-banner__badge { display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-1) var(--space-2); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); color: var(--color-warning); background-color: var(--color-surface); border-radius: var(--radius-pill); } .reminder-banner__badge svg { width: 12px; height: 12px; } .reminder-banner__message { font-size: var(--font-size-sm); color: var(--color-text-secondary); } .reminder-banner__message strong { color: var(--color-text); font-weight: var(--font-weight-semibold); } .reminder-banner__actions { display: flex; align-items: center; gap: var(--space-1); flex-shrink: 0; } .reminder-banner__view { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--font-size-sm); color: var(--color-warning); background: none; border: 1px solid var(--color-warning); border-radius: var(--radius-sm); padding: var(--space-1) var(--space-3); min-height: 36px; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-out); } .reminder-banner__view:hover { background-color: var(--color-surface); } .reminder-banner__view svg { width: 14px; height: 14px; } /* ── Remind Client button (solid amber, distinct from outline View) ── */ .reminder-banner__remind { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); background-color: var(--color-secondary); color: var(--color-text); border: 1px solid var(--color-secondary); border-radius: var(--radius-sm); padding: var(--space-1) var(--space-3); min-height: 36px; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out); } .reminder-banner__remind:hover { background-color: var(--color-secondary-hover); border-color: var(--color-secondary-hover); } .reminder-banner__remind:active { background-color: var(--color-secondary-active); border-color: var(--color-secondary-active); } .reminder-banner__remind svg { width: 14px; height: 14px; flex-shrink: 0; } /* ── Counter badge (shown when multiple reminders exist) ── */ .reminder-banner__counter { display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-1) var(--space-2); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); color: var(--color-primary); background-color: var(--color-surface); border: 1px solid var(--color-primary); border-radius: var(--radius-pill); } .reminder-banner__counter svg { width: 12px; height: 12px; } /* ── On mobile, stack the buttons horizontally but full-width ── */ @media (max-width: 640px) { .reminder-banner__remind, .reminder-banner__view { flex: 1; justify-content: center; } .reminder-banner__actions { gap: var(--space-2); } } .reminder-banner__dismiss { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; background: none; border: none; border-radius: var(--radius-sm); color: var(--color-text-muted); cursor: pointer; transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out); } .reminder-banner__dismiss:hover { background-color: var(--color-surface); color: var(--color-text); } /* ── Push #app content down when banner is visible ── */ body.has-reminder-banner #app { padding-top: 130px; /* 56px header + ~74px banner */ } /* ── Mobile: stack content vertically ── */ @media (max-width: 640px) { .reminder-banner { padding: var(--space-2) var(--space-3); gap: var(--space-2); } .reminder-banner__icon { width: 32px; height: 32px; } .reminder-banner__icon svg { width: 18px; height: 18px; } .reminder-banner__title { font-size: var(--font-size-xs); } .reminder-banner__message { font-size: var(--font-size-xs); } .reminder-banner__actions { width: 100%; justify-content: flex-end; } body.has-reminder-banner #app { padding-top: 145px; } } /* ── Reduced motion ── */ @media (prefers-reduced-motion: reduce) { .reminder-banner { animation: none; } } /* ───────────────────────────────────────────────────────────── IMAGE PICKER ───────────────────────────────────────────────────────────── */ .image-picker { display: flex; flex-direction: column; gap: var(--space-3); width: 100%; } .image-picker__label { display: flex; align-items: center; gap: var(--space-2); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-text); } .image-picker__count { font-size: var(--font-size-xs); color: var(--color-text-muted); font-weight: var(--font-weight-normal); } .image-picker__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: var(--space-3); } /* ── Tiles ── */ .image-picker__tile { position: relative; aspect-ratio: 1 / 1; border-radius: var(--radius-md); overflow: hidden; background-color: var(--color-bg); border: 2px solid var(--color-border); transition: border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out); } .image-picker__tile--primary { border-color: var(--color-primary); box-shadow: 0 0 0 2px var(--color-primary-100); } .image-picker__tile--uploading { opacity: 0.85; } .image-picker__tile--error { border-color: var(--color-danger); } .image-picker__tile-image { width: 100%; height: 100%; object-fit: cover; display: block; } .image-picker__badge { position: absolute; top: var(--space-2); left: var(--space-2); padding: 2px var(--space-2); font-size: 10px; font-weight: var(--font-weight-semibold); text-transform: uppercase; letter-spacing: 0.05em; border-radius: var(--radius-pill); background-color: var(--color-primary); color: var(--color-text-inverse); pointer-events: none; } .image-picker__tile-btn { position: absolute; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border: none; border-radius: 50%; cursor: pointer; background-color: rgba(15, 23, 42, 0.75); color: #FFFFFF; transition: background-color var(--duration-fast) var(--ease-out); } .image-picker__tile-btn:hover { background-color: rgba(15, 23, 42, 0.95); } .image-picker__tile-btn svg { width: 14px; height: 14px; } .image-picker__tile-btn--delete { top: var(--space-2); right: var(--space-2); } .image-picker__tile-btn--star { bottom: var(--space-2); left: var(--space-2); } .image-picker__tile-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2); background-color: rgba(15, 23, 42, 0.6); color: #FFFFFF; padding: var(--space-2); text-align: center; } .image-picker__tile-overlay--error { background-color: rgba(220, 38, 38, 0.85); } .image-picker__progress { width: 80%; height: 4px; background-color: rgba(255, 255, 255, 0.3); border-radius: var(--radius-pill); overflow: hidden; } .image-picker__progress-bar { height: 100%; background-color: var(--color-secondary); border-radius: var(--radius-pill); transition: width 0.2s linear; } .image-picker__tile-progress-text { font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); } .image-picker__tile-error-text { font-size: var(--font-size-xs); line-height: 1.3; } /* ── Add Tile ── */ .image-picker__add { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-1); aspect-ratio: 1 / 1; border: 2px dashed var(--color-border); border-radius: var(--radius-md); background-color: var(--color-surface); color: var(--color-text-muted); cursor: pointer; transition: border-color var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out); font-family: var(--font-family); padding: var(--space-2); } .image-picker__add:hover { border-color: var(--color-primary); background-color: var(--color-primary-50); color: var(--color-primary); } .image-picker__add svg { width: 22px; height: 22px; } .image-picker__add-label { font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); text-align: center; } [data-theme="dark"] .image-picker__add:hover { background-color: rgba(11, 60, 93, 0.25); } /* ── Empty State ── */ .image-picker__empty { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); padding: var(--space-4); text-align: center; color: var(--color-text-muted); font-size: var(--font-size-sm); } .image-picker__empty svg { width: 32px; height: 32px; opacity: 0.5; } .image-picker__empty p { margin: 0; } /* ───────────────────────────────────────────────────────────── IMAGE SOURCE SHEET (Bottom sheet picker) ───────────────────────────────────────────────────────────── */ .image-sheet-overlay { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.5); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); z-index: 400; /* above the part/vehicle modal (300) */ display: flex; align-items: flex-end; justify-content: center; animation: image-sheet-overlay-in var(--duration-normal) var(--ease-out); } @keyframes image-sheet-overlay-in { 0% { opacity: 0; } 100% { opacity: 1; } } .image-sheet { background-color: var(--color-surface); border-radius: var(--radius-lg) var(--radius-lg) 0 0; padding: var(--space-4) var(--space-4) calc(var(--space-4) + env(safe-area-inset-bottom, 0px)); width: 100%; max-width: 480px; display: flex; flex-direction: column; gap: var(--space-2); box-shadow: 0 -4px 32px var(--color-shadow-heavy); animation: image-sheet-in var(--duration-normal) var(--ease-out); } @keyframes image-sheet-in { 0% { transform: translateY(100%); } 100% { transform: translateY(0); } } .image-sheet__handle { width: 40px; height: 4px; background-color: var(--color-border); border-radius: var(--radius-pill); margin: 0 auto var(--space-2); } .image-sheet__title { font-size: var(--font-size-md); font-weight: var(--font-weight-semibold); color: var(--color-text); text-align: center; margin: 0 0 var(--space-2) 0; } .image-sheet__option { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); min-height: 60px; background-color: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-md); cursor: pointer; font-family: var(--font-family); text-align: left; transition: background-color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out); } .image-sheet__option:hover { background-color: var(--color-surface-hover); border-color: var(--color-primary); } .image-sheet__option-icon { flex-shrink: 0; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background-color: var(--color-primary-50); color: var(--color-primary); } [data-theme="dark"] .image-sheet__option-icon { background-color: rgba(11, 60, 93, 0.3); } .image-sheet__option-text { flex: 1; display: flex; flex-direction: column; gap: 2px; } .image-sheet__option-text strong { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--color-text); } .image-sheet__option-text small { font-size: var(--font-size-xs); color: var(--color-text-muted); } .image-sheet__cancel { margin-top: var(--space-2); padding: var(--space-3); min-height: 48px; background: none; border: none; border-radius: var(--radius-md); font-family: var(--font-family); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-text-muted); cursor: pointer; transition: background-color var(--duration-fast) var(--ease-out); } .image-sheet__cancel:hover { background-color: var(--color-surface-hover); color: var(--color-text); } /* ── Responsive ── */ @media (max-width: 480px) { .image-picker__grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-2); } .image-picker__tile-btn { width: 26px; height: 26px; } .image-picker__tile-btn svg { width: 12px; height: 12px; } } /* ── Reduced motion ── */ @media (prefers-reduced-motion: reduce) { .image-sheet-overlay, .image-sheet { animation: none; } .image-picker__progress-bar { transition: none; } } /* ── Offers Modal Header (with thumbnail) ── */ .offers-modal__header { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); padding-bottom: var(--space-4); border-bottom: 1px solid var(--color-border); } .offers-modal__image { flex-shrink: 0; width: 80px; height: 80px; border-radius: var(--radius-md); overflow: hidden; background-color: var(--color-bg); border: 1px solid var(--color-border); } .offers-modal__image img { width: 100%; height: 100%; object-fit: cover; display: block; } .offers-modal__title { flex: 1; min-width: 0; } .offers-modal__title h4 { margin: 0 0 var(--space-1) 0; font-size: var(--font-size-md); font-weight: var(--font-weight-semibold); color: var(--color-text); } @media (max-width: 480px) { .offers-modal__image { width: 64px; height: 64px; } }