/* =========================================================================== Quoting -- frontend for /api/quoting/... (see server.py "Quoting module" section). Deliberately thin: almost every visual need is already covered by static/servicing/servicing.css's `.svc-` classes, which that file's own header comment confirms are NOT scoped under a parent selector, so they are safe to reuse directly here rather than duplicating near-identical rules. This file only adds the handful of classes Quoting needs that Servicing doesn't already have: a `.quoting` layout wrapper (mirrors `.servicing`), read-only key/value detail rows for the Quote Workspace, an attention-row highlight for the queue table, and a currency input that isn't scoped to Servicing's cost-calculator markup. =========================================================================== */ .quoting { display: flex; flex-direction: column; gap: var(--space-6); } /* ---- read-only key/value rows (Quote Workspace: Seller / Watch cards) ---- */ .q-field-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); padding: var(--space-2) 0; border-bottom: 1px solid var(--color-divider); font-size: var(--text-sm); } .q-field-row:last-child { border-bottom: none; } .q-field-label { color: var(--color-text-muted); font-weight: 600; flex: 0 0 auto; } /* ---- currency input (Submit Quote) ---------------------------------------- */ .q-currency-input { position: relative; max-width: 220px; } .q-currency-input span { position: absolute; left: var(--space-4); top: 50%; transform: translateY(-50%); color: var(--color-text-muted); font-weight: 700; } .q-currency-input input { width: 100%; padding: 0.55rem 0.85rem 0.55rem 1.75rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-size: var(--text-sm); font-family: var(--font-body); background: var(--color-surface-2); color: var(--color-text); } .q-currency-input input:focus { outline: none; border-color: var(--color-primary); background: var(--color-surface); } /* ---- needs-attention row highlight (Enquiries queue) ------------- */ .q-row-attention { background: var(--color-warning-highlight); } .q-row-attention:hover { filter: brightness(0.97); } /* ---- needs-attention shortlist rows (Dashboard) -------------------------- Unlike servicing.css's `.svc-workload-*` (built for a short fixed-width watchmaker name + a progress bar), these rows carry a client name plus a long free-text watch description, so the name column must truncate with an ellipsis instead of pushing the stage chip/day count outside the card. */ .q-attn-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) 0; border-bottom: 1px solid var(--color-divider); cursor: pointer; } .q-attn-row:last-child { border-bottom: none; } .q-attn-row:hover .q-attn-name { color: var(--color-primary); } .q-attn-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; } .q-attn-name { font-size: var(--text-sm); font-weight: 700; color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .q-attn-watch { font-size: var(--text-xs); color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .q-attn-side { display: flex; align-items: center; gap: var(--space-3); flex: 0 0 auto; } .q-attn-days { font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 700; color: var(--color-text); min-width: 28px; text-align: right; } /* Dashboard hero -- reuses the shared .dd-hero/.dd-hero-photo markup (same pattern as Sales Manager's own hero), with its own photo so it doesn't just repeat the main Dashboard's showroom shot. Photo is the reception/ client lounge; position keeps the SwissTimepieces wall logo in frame. */ .quoting-hero .dd-hero-photo { background-image: url('../assets/hero-quoting.webp?v=20261013'); background-position: center 42%; } /* Phase 2 -- Quotes / Insured Collections / Needs Attention list views. .svc-chip-bad flags an exception state (not booked / overdue) inside an otherwise-neutral .svc-chip, reusing the warning palette already defined for .q-row-attention rather than inventing a new color. */ .svc-chip-bad { background: var(--color-warning-highlight); border-color: var(--color-warning, var(--color-border)); color: var(--color-text); font-weight: 700; } .svc-chip-good { background: rgba(46, 125, 50, 0.12); border-color: var(--color-success, var(--color-border)); color: var(--color-text); font-weight: 700; } /* .svc-chip-muted -- a cancelled collection: not an exception to act on (unlike .svc-chip-bad), just quietly closed out. Sam, 2026-09-30. */ .svc-chip-muted { background: var(--color-surface-2); border-color: var(--color-border); color: var(--color-text-secondary, var(--color-text)); font-weight: 700; opacity: 0.85; } /* .svc-chip-info -- the new 'dropoff' status (pickup cancelled, label kept live, client/WPC visiting a DHL point instead): neither good nor bad, just a different plan -- a calm blue rather than gold/green/red. */ .svc-chip-info { background: rgba(59, 111, 168, 0.12); border-color: #3b6fa8; color: var(--color-text); font-weight: 700; } /* Insured Collections 'to_book' -- Sam, 2026-09-30: "the status 'to book' is a more prominent black and gold label with a sense of urgency to arrange" -- distinct from the plain red .svc-chip-bad Appointments' 'to_book' keeps, since this one specifically needs same-day action (10am DHL cutoff). Reuses the app's established black/gold premium treatment (DHL booked badge/label) but with a soft pulse so it reads as "arrange this" rather than just informational. */ .svc-chip-urgent { background: #14110d; color: #d4af6a; border: 1px solid #d4af6a; font-weight: 700; letter-spacing: 0.03em; animation: q-urgent-pulse 2.4s ease-in-out infinite; } @keyframes q-urgent-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(212, 175, 106, 0.38); } 50% { box-shadow: 0 0 0 5px rgba(212, 175, 106, 0); } } /* Once booked + label generated, Sam wants it "clear it has been sorted and arranged" -- a calm green confirmation line under the DHL cell's booked badge (see dhlCellHtml's arrangedLine). */ .q-arranged-line { display: flex; align-items: center; gap: 6px; font-size: var(--text-xs); font-weight: 700; color: var(--color-success, #2e7d32); margin-top: 2px; } /* Path-switch buttons (Change to Appointment / Book a Collection / Mark as Drop-off Point) -- small, secondary, grouped under the main DHL/status action so they read as alternate routes rather than the primary CTA. */ .q-path-switch-row { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-2); padding-top: var(--space-2); border-top: 1px dashed var(--color-divider); } .q-path-switch-row button { flex-shrink: 0; width: 156px; min-height: 30px; padding: 5px var(--space-2); font-size: 11.5px; line-height: 1.2; text-align: center; justify-content: center; } /* Nav restructure 2026-09-26 -- Dashboard KPI tiles now navigate to their owning tab on click, so they need a pointer cursor + a visible focus/hover affordance beyond the plain .svc-kpi-tile card. */ .svc-kpi-clickable { cursor: pointer; transition: transform 0.12s ease, box-shadow 0.12s ease; } @media (hover: hover) and (pointer: fine) { .svc-kpi-clickable:hover { transform: translateY(-2px); box-shadow: var(--shadow-md, 0 4px 12px rgba(0,0,0,0.08)); } } .svc-kpi-clickable:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } /* Dashboard header refresh icon-button (replaces the old text "Refresh" button in the page-actions slot -- spec wants it top-right of the hero instead). Spins while a refresh is in flight. */ #qDashRefresh.is-spinning svg { animation: spin 0.8s linear infinite; } /* ---- Quote Tracker: clickable stage-count tiles across all stages ---- */ .q-stage-tiles { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-4); } .q-stage-tile { display: flex; align-items: baseline; gap: 6px; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); border: 1px solid var(--color-border); background: var(--color-surface); font-size: var(--text-sm); cursor: pointer; } .q-stage-tile:hover { border-color: var(--color-primary); } .q-stage-tile.active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; } .q-stage-tile .q-stage-tile-count { font-weight: 700; } /* ---- Collections/Appts: segmented sub-view + status filter chips ---- */ /* Luxurious top segment tabs (Sam, 2026-09-30: "the buttons at the top are pushed against the background border. Make the top tabs luxurious and easy to navigate please. Sort spacing out please.") -- previously these sat flush with zero horizontal/top padding directly against the .svc-card edge. Now a proper padded header strip with a bottom divider, underline-style active state in the app's established black/gold accent (matching the DHL booked badge/label treatment) instead of a filled pill, which reads calmer and more premium for primary nav. */ .q-segment-tabs { display: flex; gap: var(--space-6); flex-wrap: wrap; padding: var(--space-5) var(--space-6) 0; margin-bottom: 0; border-bottom: 1px solid var(--color-divider); background: var(--color-surface); } .q-segment-tab { position: relative; padding: 0 0 var(--space-4); margin: 0; border: none; border-radius: 0; background: transparent; font-family: var(--font-display); font-size: var(--text-sm); font-weight: 600; color: var(--color-text-muted); cursor: pointer; letter-spacing: 0.01em; transition: color 0.15s ease; } .q-segment-tab:hover { color: var(--color-text); } .q-segment-tab.active { color: var(--color-text); } .q-segment-tab.active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: linear-gradient(90deg, #d4af6a, #e8c785); border-radius: 2px 2px 0 0; } .q-status-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); padding: var(--space-4) var(--space-6) 0; margin-bottom: var(--space-4); } .q-status-chip { padding: 6px var(--space-3); border-radius: 999px; border: 1px solid var(--color-border); background: var(--color-surface); font-size: var(--text-xs); font-weight: 600; cursor: pointer; } .q-status-chip:hover { border-color: var(--color-primary); } .q-status-chip.active { background: var(--color-text); border-color: var(--color-text); color: var(--color-surface); } /* ---- Book DHL Collection (disabled, tooltip-only until API approved) ---- */ .q-dhl-btn-wrap { position: relative; display: inline-block; } .q-dhl-btn-wrap .q-dhl-tooltip { display: none; position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); background: var(--color-text); color: var(--color-surface); font-size: var(--text-xs); font-weight: 500; padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); white-space: nowrap; z-index: 5; box-shadow: var(--shadow-md, 0 4px 12px rgba(0,0,0,0.16)); } .q-dhl-btn-wrap:hover .q-dhl-tooltip, .q-dhl-btn-wrap:focus-within .q-dhl-tooltip { display: block; } .q-dhl-btn-wrap button[disabled] { cursor: not-allowed; opacity: 0.6; } .q-dhl-tooltip-wrap { display: inline-block; } /* ---- Book DHL Collection: booked state (spec section 16 -- premium black/gold treatment, clearly distinct from a merely-requested date) ---- */ .q-dhl-booked { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; } .q-dhl-booked-badge { background: #14110d; color: #d4af6a; font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.03em; padding: 6px var(--space-3); border-radius: var(--radius-sm); border: 1px solid #d4af6a; /* Wraps onto its own second line rather than forcing the whole table wider (caught in visual QA, 2026-09-30 -- this badge plus a full set of action buttons was pushing the Actions column off-screen with no visible scrollbar, since .svc-card clips overflow). */ white-space: normal; max-width: 160px; display: inline-block; } /* Cancel/Reschedule/Label/etc. action buttons under a booked/missed DHL cell. Stacked VERTICALLY, not wrapped horizontally -- a row can carry 4-5 buttons (Label, Mark Picked Up, Reschedule, Cancel, Refresh) and a horizontal flex-wrap forced the whole table into a horizontal scrollbar with buttons clipped off-screen (caught in visual QA, 2026-09-30, at 1600px wide). A vertical stack instead just grows the row taller, which the table already handles fine, and matches the existing vertical .q-dhl-booked layout (badge/waybill/tracking lines stacked one per line) so the action buttons read as a natural continuation of it. */ .q-dhl-action-row { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); margin-top: var(--space-2); } /* Sam, 2026-09-30: "make the actions buttons slightly smaller and all the same width" -- previously each button (Label/Reschedule/Cancel/Refresh tracking/etc.) sized itself to its own text (width: auto), so a row of them looked ragged. Fixed width + a size step down from the standard .btn-sm keeps every action button in a row visually aligned. */ .q-dhl-action-row button, .q-dhl-action-row a { flex-shrink: 0; width: 156px; min-height: 34px; padding: 6px var(--space-2); font-size: 12px; line-height: 1.25; text-align: center; justify-content: center; } /* Download Label -- black/gold, matching the pickup badge's premium treatment (Sam, 2026-09-30: "make the download label black and gold") rather than the plain grey .btn-secondary every other action button uses -- the label is the one action tied to the physical parcel itself. */ .q-dhl-action-row button[data-dhl-label], .q-dhl-action-row button[data-wc-label] { background: #14110d; color: #d4af6a; border: 1px solid #d4af6a; } .q-dhl-action-row button[data-dhl-label]:hover, .q-dhl-action-row button[data-wc-label]:hover { background: #231d15; color: #e8c785; border-color: #e8c785; } .q-dhl-action-row button[data-dhl-label]:disabled, .q-dhl-action-row button[data-wc-label]:disabled { opacity: 0.6; } /* Workshop Collections table -- fixed column layout (Sam, 2026-09-30 QA: table-layout:auto let a full set of new action buttons + the pickup badge push the table wider than its card, and .svc-card's overflow: hidden clipped that overflow invisibly with no scrollbar -- content was silently unreachable). Fixed columns + explicit wrapping keeps every column within its card on desktop, tablet and mobile. */ .wc-fixed-table td { white-space: normal; overflow-wrap: normal; } .wc-fixed-table th { white-space: normal; font-size: 11px; line-height: 1.3; } .wc-fixed-table .svc-chip { white-space: normal; } .wc-fixed-table .svc-hint { white-space: normal; } .wc-fixed-table .q-dhl-action-row .btn { white-space: normal; text-align: left; line-height: 1.2; } /* Sam, 2026-09-30 QA: "the book dhl collection runs over the open button" -- the standalone not-yet-booked "Book DHL Collection" button (and its disabled/tooltip variants) isn't wrapped in .q-dhl-action-row, so inside a table-layout:fixed cell it kept its default white-space:nowrap and overflowed sideways into the next (Open) column instead of wrapping or shrinking to fit its ~14% column. */ .wc-fixed-table td .q-dhl-btn-wrap, .q-dense-table td .q-dhl-btn-wrap, .wc-fixed-table td > .btn, .q-dense-table td > .btn { display: block; width: 100%; } .wc-fixed-table td .q-dhl-btn-wrap .btn, .q-dense-table td .q-dhl-btn-wrap .btn, .wc-fixed-table td > .btn, .q-dense-table td > .btn { white-space: normal; text-align: center; line-height: 1.2; width: 100%; } /* Below ~720px, fixed percentage columns get too narrow to hold real content (every word wraps onto its own line) -- switch to a stacked card layout instead: each row becomes its own bordered block, each cell becomes a labeled line (label from the cell's data-label attr). */ @media (max-width: 720px) { .wc-fixed-table, .wc-fixed-table thead, .wc-fixed-table tbody, .wc-fixed-table tr, .wc-fixed-table td { display: block; width: auto !important; } .wc-fixed-table colgroup { display: none; } .wc-fixed-table thead { display: none; } .wc-fixed-table tr { border: 1px solid var(--color-border); border-radius: var(--radius-md); margin-bottom: var(--space-4); padding: var(--space-3) var(--space-4); } .wc-fixed-table td { border-bottom: none; padding: var(--space-2) 0; } .wc-fixed-table td:not(:last-child) { border-bottom: 1px dashed var(--color-divider); } .wc-fixed-table td[data-label]::before { content: attr(data-label); display: block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-muted); margin-bottom: var(--space-1); } .wc-fixed-table .q-dhl-action-row button, .wc-fixed-table .q-dhl-action-row a { width: 100%; text-align: left; } } /* The Insured Collections table (8 columns: client, watch, address, date, status, agreement, DHL cell, open) is denser than the 6-column Workshop Collections table and doesn't have room to stay side-by-side columns even at tablet width -- switch it to the same stacked-card layout earlier, at 900px, via its own .q-dense-table marker class. */ @media (max-width: 900px) { .q-dense-table, .q-dense-table thead, .q-dense-table tbody, .q-dense-table tr, .q-dense-table td { display: block; width: auto !important; } .q-dense-table colgroup { display: none; } .q-dense-table thead { display: none; } .q-dense-table tr { border: 1px solid var(--color-border); border-radius: var(--radius-md); margin-bottom: var(--space-4); padding: var(--space-3) var(--space-4); } .q-dense-table td { border-bottom: none; padding: var(--space-2) 0; } .q-dense-table td:not(:last-child) { border-bottom: 1px dashed var(--color-divider); } .q-dense-table td[data-label]::before { content: attr(data-label); display: block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-muted); margin-bottom: var(--space-1); } .q-dense-table .q-dhl-action-row button, .q-dense-table .q-dhl-action-row a { width: 100%; text-align: left; } } /* Cancelled/Completed collapsed section (Sam, 2026-09-30: "cancelled bookings or completed bookings should move from the live pile and into a separate section") -- a plain
/ so it costs nothing visually until opened, styled to sit clearly apart from the live table above it. Shared by both Workshop Collections and Insured Collections. */ .svc-done-section { margin-top: var(--space-5); border-top: 1px dashed var(--color-divider); padding-top: var(--space-4); } .svc-done-section summary { cursor: pointer; font-size: var(--text-sm); font-weight: 700; color: var(--color-text-muted); list-style: none; user-select: none; } .svc-done-section summary::-webkit-details-marker { display: none; } .svc-done-section summary::before { content: '\25b8\2002'; } .svc-done-section[open] summary::before { content: '\25be\2002'; } .svc-done-section .svc-table-wrap { margin-top: var(--space-3); opacity: 0.85; } /* Workshop Collections Overview sub-tab (Sam, 2026-09-30 -- morning 9am team check of what's due in and where from). Responsive card grid + simple item lists, desktop/mobile/tablet. */ .wc-overview-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-4); } .wc-overview-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); } .wc-overview-list li { padding-bottom: var(--space-2); border-bottom: 1px solid var(--color-border); } /* .svc-hint is nowrap by default elsewhere in the app, but the workshop partner name + city + package/waybill hint line here is long enough that it was overflowing past the card edge and being silently clipped by .svc-card's overflow:hidden (caught in visual QA, 2026-09-30). Let it wrap within this list and within the Overview card headings (the "Due Today (Estimated from...)" note had the same problem). Fix 2026-09-30 (later same day, second QA pass): the heading hint is a sibling
of

, not a descendant -- the original selector (`h3 .svc-hint`) never matched, so the nowrap rule was still winning and clipping/overlapping the count badge. Target the actual wrapping div instead, and let it shrink so the count badge has room. */ .wc-overview-list .svc-hint { white-space: normal; } .wc-overview-card-head > div:first-child { min-width: 0; flex: 1 1 auto; } .wc-overview-card-head > div:first-child .svc-hint { white-space: normal; } .wc-overview-list li:last-child { border-bottom: none; padding-bottom: 0; } /* Overview cards carry their own count/packages badge in the header now (2026-09-30 redesign -- removes the old separate KPI-tile row that duplicated every group). Left border tone reuses the existing .svc-kpi-* color tokens. */ .wc-overview-card { border-left: 4px solid var(--color-border); } .wc-overview-card.svc-kpi-info { border-left-color: var(--color-primary); } .wc-overview-card.svc-kpi-warn { border-left-color: var(--color-warning); } .wc-overview-card.svc-kpi-good { border-left-color: var(--color-success); } .wc-overview-card.svc-kpi-bad { border-left-color: var(--color-error); } .wc-overview-card-head { align-items: flex-start; } .wc-overview-count { text-align: right; flex-shrink: 0; } .wc-overview-count-value { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 700; color: var(--color-text); line-height: 1.1; } .wc-overview-count-label { font-size: var(--text-xs); color: var(--color-text-muted); margin-top: 2px; white-space: nowrap; } /* Workshop Overview -- "By Source" luxury morning-briefing dashboard (Phase 6, 2026-10-01, Sam's 9-part Servicing brief item 9): a dark hero strip plus three gold/onyx/champagne-accented source cards (WPC returns / Client servicing collections / Warranty claims) above the existing combined status grid. Reuses the app's own luxury token set (--sidebar-bg, --color-primary gold, --color-primary-ink) rather than inventing a new palette. */ .wc-hero-strip { background: linear-gradient(135deg, var(--sidebar-bg, #000) 0%, #1a1712 100%); border-radius: var(--radius-lg); padding: var(--space-5) var(--space-6); margin-bottom: var(--space-5); position: relative; overflow: hidden; } .wc-hero-strip::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at top right, rgba(186,149,69,0.16), transparent 60%); } .wc-hero-strip-text { position: relative; z-index: 1; } .wc-hero-eyebrow { font-size: var(--text-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-primary); font-weight: 700; margin-bottom: var(--space-2); } .wc-hero-title { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 700; color: var(--color-text-inverse, #EDE7DA); margin-bottom: var(--space-2); } .wc-hero-strip .svc-hint { color: rgba(237,231,218,0.72); max-width: 640px; white-space: normal; } .wc-src-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-4); margin-bottom: var(--space-2); } .wc-src-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: var(--space-5); position: relative; overflow: hidden; border-top: 3px solid var(--color-border); } .wc-src-gold { border-top-color: var(--color-primary); } .wc-src-onyx { border-top-color: var(--color-text); } .wc-src-champagne { border-top-color: var(--color-brass, var(--color-primary)); } .wc-src-card-top { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-4); } .wc-src-icon { display: inline-flex; width: 28px; height: 28px; align-items: center; justify-content: center; border-radius: 50%; background: var(--color-primary-highlight); color: var(--color-primary-active); flex-shrink: 0; } .wc-src-icon svg { width: 16px; height: 16px; } .wc-src-title { font-weight: 700; font-size: var(--text-sm); color: var(--color-text); letter-spacing: 0.01em; } .wc-src-total { font-family: var(--font-display); font-size: var(--text-3xl, 2rem); font-weight: 700; color: var(--color-text); line-height: 1; display: flex; align-items: baseline; gap: var(--space-2); } .wc-src-total-unit { font-size: var(--text-xs); font-weight: 600; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.05em; } .wc-src-sub { font-size: var(--text-xs); color: var(--color-text-muted); margin-top: var(--space-2); margin-bottom: var(--space-4); } .wc-src-missed { color: var(--color-error); font-weight: 700; } .wc-src-breakdown { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2); border-top: 1px solid var(--color-border); padding-top: var(--space-3); } .wc-src-stat { display: flex; flex-direction: column; align-items: center; gap: 2px; } .wc-src-stat-value { font-family: var(--font-display); font-weight: 700; font-size: var(--text-lg); color: var(--color-text); } .wc-src-stat-label { font-size: 10px; color: var(--color-text-muted); text-align: center; line-height: 1.2; } @media (max-width: 640px) { .wc-src-breakdown { grid-template-columns: repeat(2, 1fr); } .wc-hero-strip { padding: var(--space-4); } .wc-hero-title { font-size: var(--text-lg); } } /* ---- Quote Workspace: inline photo thumbnails (was link-only) ---- */ .q-photo-row { display: flex; flex-wrap: wrap; gap: var(--space-3); } .q-photo-thumb { display: block; width: 120px; height: 120px; flex-shrink: 0; overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface-2); transition: border-color .15s ease, transform .15s ease; } .q-photo-thumb:hover { border-color: var(--color-primary); transform: translateY(-1px); } .q-photo-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } /* ---- Small inline photo thumbnail for a table row (Quotes queue) ---- */ .q-row-thumb { display: block; width: 36px; height: 36px; flex-shrink: 0; overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface-2); transition: border-color .15s ease; } .q-row-thumb:hover { border-color: var(--color-primary); } .q-row-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } /* ---- Insured Collections & Appointments: headline count tiles ------------- Sam, 2026-10-03. Four clickable tiles above the segment tabs. Mobile-first: 2 x 2 grid from the smallest phone up, 4 across on wider screens, every tile the same height so labels/hints line up whatever they wrap to. */ .q-count-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); margin-bottom: var(--space-5); } .q-count-tile { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; min-width: 0; width: 100%; text-align: left; padding: var(--space-4); background: var(--color-surface); border: 1px solid var(--color-border); border-left: 4px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); font: inherit; color: var(--color-text); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease; } .q-count-tile.q-count-warn { border-left-color: var(--color-warning); } .q-count-tile.q-count-info { border-left-color: var(--color-primary); } .q-count-tile.q-count-bad { border-left-color: var(--color-error); } .q-count-tile.q-count-good { border-left-color: var(--color-success); } .q-count-tile.active { border-color: #d4af6a; border-left-width: 4px; box-shadow: 0 0 0 1px #d4af6a, var(--shadow-sm); } .q-count-tile.q-count-warn.active { border-left-color: var(--color-warning); } .q-count-tile.q-count-info.active { border-left-color: var(--color-primary); } .q-count-tile.q-count-bad.active { border-left-color: var(--color-error); } .q-count-tile.q-count-good.active { border-left-color: var(--color-success); } .q-count-tile:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } @media (hover: hover) and (pointer: fine) { .q-count-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-md, 0 4px 12px rgba(0,0,0,0.08)); } } .q-count-value { font-family: var(--font-display); font-weight: 700; line-height: 1; font-size: clamp(1.875rem, 1.4rem + 2vw, 2.5rem); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; color: var(--color-primary-ink, var(--color-text)); } .q-count-label { margin-top: var(--space-2); font-size: var(--text-sm); font-weight: 600; line-height: 1.25; color: var(--color-text); overflow-wrap: break-word; } .q-count-hint { margin-top: 2px; font-size: var(--text-xs); line-height: 1.3; color: var(--color-text-muted); overflow-wrap: break-word; } @media (min-width: 640px) { .q-count-tiles { gap: var(--space-4); margin-bottom: var(--space-6); } .q-count-tile { padding: var(--space-5); } } @media (min-width: 1100px) { .q-count-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (max-width: 359px) { .q-count-tile { padding: var(--space-3); } .q-count-label { font-size: var(--text-xs); } } /* Long page title ("Insured Collections & Appointments") wraps evenly rather than leaving a single orphan word on a line of its own. */ #viewQuoting .dd-title { text-wrap: balance; overflow-wrap: break-word; } @media (max-width: 480px) { #viewQuoting .dd-title { font-size: 1.75rem; line-height: 1.15; } } /* ========================================================================== Insured Collections, Collection Booked, Tracking and Appointments (Sam, 2026-10-03). Black / gold palette shared with .q-dhl-booked-badge. ========================================================================== */ #qApptBanner[hidden], #qTrackHost[hidden], #qApptTableWrap[hidden], .q-form-row[hidden] { display: none !important; } /* Segment tabs: six tabs now, so scroll sideways instead of wrapping */ .q-segment-tabs { flex-wrap: nowrap; overflow-x: auto; gap: var(--space-4); padding-left: var(--space-5); padding-right: var(--space-5); scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; } .q-segment-tabs::-webkit-scrollbar { display: none; } .q-segment-tab { flex: 0 0 auto; white-space: nowrap; min-height: 44px; font-size: 14px; } .q-segment-count { display: inline-block; margin-left: 4px; padding: 1px 8px; border-radius: 999px; background: var(--color-surface-offset); color: var(--color-text-muted); font-size: 11px; font-weight: 700; line-height: 1.5; vertical-align: 1px; } .q-segment-tab.active .q-segment-count { background: #14110d; color: #e8c785; } .q-status-chip { font-family: inherit; min-height: 32px; } .q-status-chip-warn { border-color: var(--color-error); color: var(--color-error); } .q-status-chip-warn.active { background: var(--color-error); color: #fff; } /* ---- shared small parts ------------------------------------------------ */ .q-wrap { white-space: normal; overflow-wrap: anywhere; } .q-client-name { font-weight: 600; display: block; } .q-link-btn { background: none; border: none; padding: 4px 0; min-height: 28px; cursor: pointer; color: var(--color-primary-active); font: inherit; font-size: var(--text-xs); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; } .q-manual-badge { display: inline-block; margin-top: 4px; padding: 2px 9px; border-radius: 999px; background: #14110d; color: #e8c785; font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.5; } .q-copy-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 24px; padding: 1px 9px; border: 1px solid var(--color-border); border-radius: 999px; background: var(--color-surface); color: var(--color-text-muted); font: inherit; font-size: 11px; font-weight: 600; cursor: pointer; vertical-align: middle; } .q-copy-btn:hover { border-color: var(--color-primary); color: var(--color-text); } .q-copy-btn.is-copied { background: var(--color-success); border-color: var(--color-success); color: #fff; } code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.92em; overflow-wrap: anywhere; } .q-ref-lines { display: flex; flex-direction: column; gap: 8px; } .q-ref-lines > span { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: 12.5px; } .q-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); margin-bottom: var(--space-3); } .q-form-row .svc-field input, .q-form-row .svc-field select { width: 100%; min-width: 0; box-sizing: border-box; } @media (max-width: 520px) { .q-form-row { grid-template-columns: 1fr; } } .q-modal-btn-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-2); } .q-modal-btn-row .btn { width: 100%; justify-content: center; min-height: 40px; } .q-modal-client { font-weight: 600; margin: 0 0 var(--space-2); overflow-wrap: anywhere; } .q-modal-sub { margin: var(--space-4) 0 var(--space-2); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-muted); } .q-modal-contact { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); } .q-manual-card { margin-top: var(--space-4); } .q-callout { margin: 0 0 var(--space-4); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); border: 1px solid var(--color-border); border-left-width: 4px; background: var(--color-surface-2); font-size: var(--text-xs); line-height: 1.5; overflow-wrap: anywhere; } .q-callout-warn { border-color: var(--color-warning); background: var(--color-warning-highlight); } .q-field-label { color: var(--color-text-muted); flex: 0 0 auto; } .q-field-val { text-align: right; min-width: 0; overflow-wrap: anywhere; } @media (max-width: 520px) { .q-field-row { flex-direction: column; gap: 2px; } .q-field-val { text-align: left; } } /* ---- past collection dates ---------------------------------------------- */ .q-date-flag { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; } .q-date-bad { color: var(--color-error); font-weight: 700; font-variant-numeric: tabular-nums; } .q-date-note { color: var(--color-error); font-size: 11.5px; line-height: 1.35; } .q-date-actions { display: flex; flex-direction: column; gap: 6px; width: 100%; max-width: 156px; } .q-date-actions .btn { width: 100%; min-height: 32px; justify-content: center; white-space: normal; text-align: center; line-height: 1.2; font-size: 12px; } /* ---- Appointments -------------------------------------------------------- */ .q-phone-link { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; margin-top: 6px; min-height: 40px; padding: 0 12px; border-radius: 999px; box-sizing: border-box; background: #14110d; color: #e8c785; border: 1px solid #14110d; font-weight: 700; font-size: 13.5px; text-decoration: none; white-space: nowrap; font-variant-numeric: tabular-nums; } .q-phone-link svg { width: 16px; height: 16px; flex: 0 0 auto; } .q-phone-link:hover { background: #2a2419; border-color: #d4af6a; } td > .q-phone-link, .q-modal-contact .q-phone-link { margin-top: 6px; } .q-modal-contact .q-phone-link { margin-top: 0; font-size: 16px; min-height: 44px; } .q-phone-missing { display: inline-block; margin-top: 6px; font-size: 12px; color: var(--color-text-muted); } .q-appt-actions { display: flex; flex-direction: column; gap: var(--space-2); width: 100%; max-width: 180px; } .q-appt-actions .btn, .q-appt-actions .q-btn-danger-outline { width: 100%; min-height: 34px; padding: 6px var(--space-2); font-size: 12px; line-height: 1.25; justify-content: center; text-align: center; white-space: normal; box-sizing: border-box; } .q-btn-danger-outline { display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-md); border: 1px solid var(--color-error); background: transparent; color: var(--color-error); font-family: inherit; font-weight: 600; cursor: pointer; } .q-btn-danger-outline:hover { background: var(--color-error); color: #fff; } .q-row-stale { background: var(--color-warning-highlight); box-shadow: inset 4px 0 0 var(--color-error); } .q-stale-flag { display: inline-block; margin-top: 4px; padding: 2px 8px; border-radius: 999px; background: var(--color-error); color: #fff; font-size: 10.5px; font-weight: 700; line-height: 1.5; } .q-calls { display: flex; flex-direction: column; gap: 3px; } .q-calls-count { font-weight: 600; } .q-calls-warn { color: var(--color-warning-text, #8a5a00); font-size: 11.5px; font-weight: 700; } #qApptBanner { padding: 0 var(--space-6) var(--space-4); } .q-stale-banner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin: 0; flex-wrap: wrap; } .q-stale-banner > span { flex: 1 1 260px; min-width: 0; } .q-stale-banner .btn { flex: 0 0 auto; min-width: 110px; justify-content: center; } .q-call-history { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; } .q-call-history li { display: grid; grid-template-columns: 110px 1fr; gap: var(--space-3); padding: var(--space-2) 0; border-bottom: 1px solid var(--color-divider); font-size: var(--text-xs); } .q-call-history li:last-child { border-bottom: none; } .q-call-when { color: var(--color-text-muted); font-variant-numeric: tabular-nums; } .q-call-what { overflow-wrap: anywhere; } .q-call-what em { display: block; font-style: normal; color: var(--color-text-muted); } @media (max-width: 520px) { .q-call-history li { grid-template-columns: 1fr; gap: 2px; } } /* ---- 3D parcel (pure CSS) ------------------------------------------------ */ .q-cube-scene { --s: 22px; position: relative; display: inline-block; flex: 0 0 auto; width: var(--s); height: var(--s); perspective: 340px; } .q-cube-lg { --s: 46px; margin: 4px; } .q-cube { position: relative; display: block; width: 100%; height: 100%; transform-style: preserve-3d; transform: rotateX(-24deg) rotateY(35deg); animation: q-cube-spin 11s linear infinite; } .q-cube-f { position: absolute; inset: 0; box-sizing: border-box; overflow: hidden; border: 1px solid rgba(212, 175, 106, 0.7); background: linear-gradient(135deg, #2a2419 0%, #14110d 100%); } .q-cube-f::after { content: ''; position: absolute; top: 0; bottom: 0; left: 40%; width: 20%; background: linear-gradient(180deg, #e8c785, #d4af6a); } .q-cf-front { transform: translateZ(calc(var(--s) / 2)); } .q-cf-front::before { content: ''; position: absolute; z-index: 1; left: 16%; bottom: 16%; width: 30%; height: 22%; background: #f5efe0; border-radius: 1px; } .q-cf-back { transform: rotateY(180deg) translateZ(calc(var(--s) / 2)); } .q-cf-right { transform: rotateY(90deg) translateZ(calc(var(--s) / 2)); } .q-cf-left { transform: rotateY(-90deg) translateZ(calc(var(--s) / 2)); } .q-cf-top { transform: rotateX(90deg) translateZ(calc(var(--s) / 2)); background: #3a3122; } .q-cf-bottom { transform: rotateX(-90deg) translateZ(calc(var(--s) / 2)); } .q-cube-sm .q-cf-front::before { display: none; } @keyframes q-cube-spin { from { transform: rotateX(-24deg) rotateY(0deg); } to { transform: rotateX(-24deg) rotateY(360deg); } } @keyframes q-node-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(212, 175, 106, 0.55); } 50% { box-shadow: 0 0 0 7px rgba(212, 175, 106, 0); } } @media (prefers-reduced-motion: reduce) { .q-cube { animation: none; } .q-rail-step.is-current .q-rail-node { animation: none; } } /* ---- Tracking tab -------------------------------------------------------- */ .q-trk-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); padding: 0 var(--space-6) var(--space-4); } .q-trk-note { flex: 1 1 280px; min-width: 0; margin: 0; font-size: var(--text-xs); line-height: 1.5; color: var(--color-text-muted); } .q-trk-toolbar .btn { flex: 0 0 auto; min-width: 168px; min-height: 40px; justify-content: center; } .q-trk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 480px), 1fr)); gap: var(--space-4); padding: 0 var(--space-6) var(--space-6); align-items: start; } .q-trk-host > .svc-done-section { margin: 0 var(--space-6) var(--space-6); } .q-trk-host > .svc-done-section .q-trk-grid { padding: 0; } .q-trk-card { --trk-accent: var(--color-border); display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; box-sizing: border-box; padding: var(--space-5); background: var(--color-surface); border: 1px solid var(--color-border); border-left: 4px solid var(--trk-accent); border-radius: var(--radius-lg); } .q-trk-tone-info { --trk-accent: #d4af6a; } .q-trk-tone-good { --trk-accent: var(--color-success); } .q-trk-tone-warn { --trk-accent: var(--color-warning); } .q-trk-tone-bad { --trk-accent: var(--color-error); } .q-trk-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); } .q-trk-title { flex: 1 1 150px; min-width: 0; } .q-trk-name { margin: 0; font-family: var(--font-display); font-size: var(--text-base); font-weight: 600; overflow-wrap: anywhere; } .q-trk-watch { margin: 2px 0 0; font-size: var(--text-xs); color: var(--color-text-muted); overflow-wrap: anywhere; } .q-trk-pill { margin-left: auto; padding: 5px 12px; border-radius: 999px; font-size: 11.5px; font-weight: 700; line-height: 1.3; letter-spacing: 0.02em; white-space: nowrap; background: var(--color-surface-offset); color: var(--color-text); border: 1px solid var(--color-border); } .q-trk-pill-info { background: #14110d; color: #e8c785; border-color: #14110d; } .q-trk-pill-good { background: var(--color-success); color: #fff; border-color: var(--color-success); } .q-trk-pill-warn { background: var(--color-warning-highlight); color: var(--color-warning-text, #8a5a00); border-color: var(--color-warning); } .q-trk-pill-bad { background: var(--color-error); color: #fff; border-color: var(--color-error); } .q-trk-ids { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3) var(--space-4); margin: 0; } .q-trk-ids > div { min-width: 0; } .q-trk-ids dt { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-muted); margin-bottom: 3px; } .q-trk-ids dd { margin: 0; font-size: 13px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; overflow-wrap: anywhere; } @media (max-width: 340px) { .q-trk-ids { grid-template-columns: 1fr; } } /* progress rail */ .q-rail { list-style: none; margin: 0; padding: var(--space-2) 0 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); } .q-rail-step { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; min-width: 0; } .q-rail-step::before { content: ''; position: absolute; top: 15px; right: 50%; width: 100%; height: 2px; background: var(--color-border); z-index: 0; } .q-rail-step:first-child::before { display: none; } .q-rail-step.is-done::before, .q-rail-step.is-current::before { background: linear-gradient(90deg, #d4af6a, #e8c785); } .q-rail-node { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; box-sizing: border-box; background: var(--color-surface); border: 2px solid var(--color-border); color: #14110d; } .q-rail-step.is-done .q-rail-node { background: linear-gradient(135deg, #d4af6a, #e8c785); border-color: #d4af6a; } .q-rail-step.is-current .q-rail-node { border-color: #d4af6a; background: var(--color-surface-2); animation: q-node-pulse 2.4s ease-out infinite; } .q-rail-step.is-current.is-exception .q-rail-node { border-color: var(--color-error); } .q-rail-step.is-current.is-exception::before { background: linear-gradient(90deg, #d4af6a, var(--color-error)); } .q-rail-node .q-cube-scene { --s: 16px; } .q-rail-node svg { width: 14px; height: 14px; } .q-rail-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 0 2px; } .q-rail-label { font-size: 12px; font-weight: 600; line-height: 1.25; color: var(--color-text); } .q-rail-step.is-todo .q-rail-label { color: var(--color-text-muted); font-weight: 500; } .q-rail-time { font-size: 11px; line-height: 1.25; color: var(--color-text-muted); font-variant-numeric: tabular-nums; } @media (max-width: 560px) { .q-rail { grid-template-columns: 1fr; padding-top: 0; } .q-rail-step { flex-direction: row; align-items: flex-start; gap: var(--space-3); text-align: left; padding-bottom: 14px; min-height: 32px; } .q-rail-step:last-child { padding-bottom: 0; } .q-rail-step::before { display: none; } .q-rail-step:not(:last-child)::after { content: ''; position: absolute; left: 15px; top: 32px; bottom: 0; width: 2px; background: var(--color-border); } .q-rail-step.is-done:not(:last-child)::after { background: linear-gradient(180deg, #d4af6a, #e8c785); } .q-rail-text { padding-top: 4px; flex: 1 1 auto; } .q-rail-text .q-rail-label { display: inline; } } /* pickup outcome panel */ .q-trk-pickup { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); border: 1px solid var(--color-border); border-left: 4px solid var(--color-border); background: var(--color-surface-2); } .q-trk-pickup-good { border-left-color: var(--color-success); } .q-trk-pickup-bad { border-left-color: var(--color-error); background: color-mix(in srgb, var(--color-error) 6%, #fff); } .q-trk-pickup-warn { border-left-color: var(--color-warning); background: var(--color-warning-highlight); } .q-trk-pickup-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 200px; } .q-trk-pickup-title { font-size: 13px; font-weight: 700; } .q-trk-pickup-text { font-size: 12px; line-height: 1.45; color: var(--color-text-muted); overflow-wrap: anywhere; } .q-trk-pickup-ref { font-size: 12px; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; } .q-trk-last { margin: 0; font-size: 12.5px; line-height: 1.45; overflow-wrap: anywhere; } .q-trk-last > span { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-muted); margin-right: 6px; } .q-trk-checked { font-style: normal; color: var(--color-text-muted); font-size: 11.5px; white-space: nowrap; } .q-trk-timeline summary { cursor: pointer; font-size: 12.5px; font-weight: 600; min-height: 32px; display: flex; align-items: center; } .q-trk-events { list-style: none; margin: var(--space-2) 0 0; padding: 0 0 0 var(--space-4); border-left: 2px solid var(--color-divider); display: flex; flex-direction: column; gap: var(--space-3); } .q-trk-event { position: relative; display: grid; grid-template-columns: 112px 1fr; gap: var(--space-3); font-size: 12px; } .q-trk-event::before { content: ''; position: absolute; left: calc(-1 * var(--space-4) - 5px); top: 4px; width: 8px; height: 8px; border-radius: 50%; background: #d4af6a; } .q-trk-event-exception::before { background: var(--color-error); } .q-trk-event-when { color: var(--color-text-muted); font-variant-numeric: tabular-nums; } .q-trk-event-desc { overflow-wrap: anywhere; } .q-trk-event-loc { display: block; color: var(--color-text-muted); } .q-trk-wrap { white-space: normal; } @media (max-width: 480px) { .q-trk-event { grid-template-columns: 1fr; gap: 1px; } } .q-trk-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: var(--space-2); } .q-trk-actions .btn { display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 38px; padding: 6px var(--space-3); font-size: 12.5px; line-height: 1.2; text-align: center; text-decoration: none; white-space: normal; box-sizing: border-box; } @media (max-width: 720px) { .q-trk-actions { grid-template-columns: 1fr 1fr; } .q-trk-actions .btn:last-child:nth-child(odd) { grid-column: 1 / -1; } .q-cube-lg { --s: 38px; } .q-trk-toolbar { padding: 0 var(--space-4) var(--space-4); } .q-trk-grid { padding: 0 var(--space-4) var(--space-4); } .q-trk-host > .svc-done-section { margin: 0 var(--space-4) var(--space-4); } .q-trk-card { padding: var(--space-4); } #qApptBanner { padding: 0 var(--space-4) var(--space-4); } .q-trk-toolbar .btn { width: 100%; } .q-segment-tabs { padding-left: var(--space-4); padding-right: var(--space-4); gap: var(--space-4); } } @media (max-width: 900px) { .q-appt-actions, .q-date-actions { max-width: none; } .q-dense-table .q-phone-link { margin-top: 4px; } } .q-trk-actions button[data-dhl-label] { background: #14110d; color: #d4af6a; border: 1px solid #d4af6a; } .q-trk-actions button[data-dhl-label]:hover { background: #231d15; color: #e8c785; border-color: #e8c785; } @media (max-width: 520px) { .q-stale-banner .btn { width: 100%; } } /* ---- Collection actions: two symmetrical columns (no tall stacks) ---- */ .q-dhl-action-row.q-dhl-action-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); width: 100%; max-width: 340px; align-items: stretch; } .q-dhl-action-row.q-dhl-action-grid > button, .q-dhl-action-row.q-dhl-action-grid > a { width: 100%; min-width: 0; min-height: 36px; white-space: normal; text-align: center; justify-content: center; } .q-dhl-action-row.q-dhl-action-grid > :last-child:nth-child(odd) { grid-column: 1 / -1; } .q-dense-table .q-dhl-action-row.q-dhl-action-grid button, .q-dense-table .q-dhl-action-row.q-dhl-action-grid a, .wc-fixed-table .q-dhl-action-row.q-dhl-action-grid button, .wc-fixed-table .q-dhl-action-row.q-dhl-action-grid a { text-align: center; } /* ---- Booking confirmation panel (stays open after Book Collection) ---- */ .q-confirm-hero { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); border-radius: 10px; background: rgba(46, 125, 91, 0.10); border: 1px solid rgba(46, 125, 91, 0.35); margin-bottom: var(--space-3); } .q-confirm-hero .q-confirm-tick { flex: 0 0 36px; width: 36px; height: 36px; border-radius: 50%; background: #2e7d5b; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 20px; line-height: 1; } .q-confirm-hero strong { display: block; font-size: 15px; } .q-confirm-hero span { font-size: 12.5px; opacity: 0.8; } .q-confirm-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); margin-bottom: var(--space-3); } .q-confirm-cell { padding: var(--space-2) var(--space-3); border: 1px solid var(--border, rgba(128,128,128,.25)); border-radius: 8px; min-width: 0; } .q-confirm-cell small { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; opacity: .65; margin-bottom: 2px; } .q-confirm-cell b { display: block; font-size: 14px; overflow-wrap: anywhere; } .q-confirm-cell .q-link-btn { margin-top: 2px; font-size: 12px; } .q-confirm-note { font-size: 12.5px; margin: 0 0 var(--space-3); opacity: .85; } .q-confirm-note.warn { color: #b26a00; opacity: 1; } .q-confirm-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); } .q-confirm-actions .btn { width: 100%; min-height: 40px; justify-content: center; text-align: center; } .q-confirm-full { grid-column: 1 / -1; } .q-confirm-val { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); } .q-confirm-val .q-link-btn, .q-confirm-val button { margin: 0; flex: 0 0 auto; } @media (max-width: 520px) { .q-confirm-wide { grid-column: 1 / -1; } .q-confirm-full { grid-column: 1 / -1; } .q-confirm-hero { padding: var(--space-2) var(--space-3); margin-bottom: var(--space-2); } .q-confirm-grid { margin-bottom: var(--space-2); } .q-confirm-note { margin-bottom: var(--space-2); } } /* ---- Cancel sale ---- */ .q-cell-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-top: 6px; } .q-cell-actions .q-link-btn { margin: 0; padding: 0; min-height: 24px; } .q-cancel-sale-link { display: inline-flex; align-items: center; justify-content: center; min-height: 24px; padding: 2px 10px; margin: 0; border: 1px solid #8f1a20; border-radius: var(--radius-sm); background: #c0262d; color: #fff; font: inherit; font-size: 11.5px; font-weight: 700; line-height: 1.3; cursor: pointer; } .q-cancel-sale-link:hover { background: #a51e24; } td > .q-cancel-sale-link { margin-top: 6px; } .q-sale-warn { font-size: 12.5px; padding: var(--space-2) var(--space-3); border-radius: 8px; background: rgba(179,38,30,.07); border: 1px solid rgba(179,38,30,.3); margin-bottom: var(--space-3); } .q-pd-pending { font-size: 12px; color: #b26a00; margin-top: 4px; } .q-check-row { display: flex; align-items: center; gap: var(--space-2); font-size: 13px; margin: var(--space-2) 0 var(--space-3); cursor: pointer; } .q-check-row input { width: 18px; height: 18px; flex: 0 0 18px; } /* Open-in-Pipedrive button on Contract Sent / Awaiting Contract tiles */ .q-pd-btn { display: inline-flex; align-items: center; text-decoration: none; margin: 2px 4px 2px 0; white-space: nowrap; } /* =========================================================================== Quotes tab + Quote popup redesign (2026-10-05) =========================================================================== */ .q-queue-top { display: flex; gap: var(--space-4); margin-bottom: var(--space-4); } .q-outstanding-tile { min-width: 250px; } .q-qthumb { position: relative; width: 84px; height: 84px; border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--color-border); background: var(--color-surface-2); display: flex; align-items: center; justify-content: center; } .q-qthumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .q-thumb-none { font-size: 11px; color: var(--color-text-muted); } .q-thumb-count { position: absolute; right: 4px; bottom: 4px; background: rgba(0,0,0,.65); color: #fff; font-size: 11px; padding: 1px 6px; border-radius: 999px; } .q-queue-table td { vertical-align: middle; } /* Condition pills */ .q-cond { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: var(--text-xs); font-weight: 700; letter-spacing: .01em; border: 1px solid transparent; white-space: nowrap; } .q-cond-new { background: var(--color-primary-highlight); color: var(--color-primary-active); border-color: var(--color-primary); } .q-cond-excellent { background: var(--color-success-highlight); color: var(--color-success); border-color: var(--color-success); } .q-cond-good { background: var(--color-warning-highlight); color: var(--color-warning); border-color: var(--color-warning); } .q-cond-fair, .q-cond-other { background: var(--color-error-highlight); color: var(--color-error); border-color: var(--color-error); } .q-cond-none { background: var(--color-surface-2); color: var(--color-text-muted); border-color: var(--color-border); } .q-cond-note { display: block; margin-top: 4px; font-size: var(--text-xs); color: var(--color-text-muted); font-weight: 500; } /* Popup shell: one view, no scrolling on iPad landscape / desktop */ #smModal.q-ws-modal { max-width: 1140px; padding: 0; overflow: hidden; max-height: 97dvh; } .q-ws { display: flex; flex-direction: column; max-height: 97dvh; } .q-ws-head { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-3) var(--space-5); border-bottom: 1px solid var(--color-border); } .q-ws-title { flex: 1; min-width: 0; } .q-ws-title h3 { margin: 0; font-family: var(--font-display); font-size: var(--text-xl, 1.5rem); font-weight: 500; line-height: 1.15; } .q-ws-sub { color: var(--color-text-muted); font-size: var(--text-sm); margin-top: 2px; overflow-wrap: anywhere; } .q-ws-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: flex-end; } .q-ws-chip { background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: 999px; padding: 3px 12px; font-size: var(--text-xs); font-weight: 600; color: var(--color-text-muted); white-space: nowrap; } .q-ws-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-5); padding: var(--space-3) var(--space-5); min-height: 0; flex: 1; overflow-y: auto; } .q-ws-photo { display: flex; flex-direction: column; gap: var(--space-2); min-height: 0; } .q-ws-photo-main { position: relative; flex: 1; min-height: 260px; background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; overflow: hidden; } .q-ws-photo-main img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; cursor: zoom-in; display: block; } .q-ws-nophoto { color: var(--color-text-muted); font-size: var(--text-sm); } .q-ws-photo-count { position: absolute; right: 10px; bottom: 10px; background: rgba(0,0,0,.65); color: #fff; font-size: 12px; padding: 2px 10px; border-radius: 999px; } .q-ws-photo-strip { display: flex; gap: var(--space-2); } .q-ws-photo-thumb { width: 64px; height: 64px; padding: 0; border: 2px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; background: var(--color-surface-2); cursor: pointer; } .q-ws-photo-thumb.on { border-color: var(--color-primary); } .q-ws-photo-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .q-ws-info { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .q-ws-sec { font-size: var(--text-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--color-primary-active); margin-top: var(--space-1); } .q-ws-info .q-ws-sec:first-child { margin-top: 0; } .q-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); } .q-tile { background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 6px var(--space-3); min-height: 46px; min-width: 0; } .q-tile-wide { grid-column: 1 / -1; } .q-tile-label { font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-muted); font-weight: 700; } .q-tile-value { font-size: var(--text-sm); font-weight: 600; margin-top: 2px; overflow-wrap: anywhere; line-height: 1.3; } .q-tile-value a { color: inherit; text-decoration: underline; text-decoration-color: var(--color-primary); } .q-tile-cond .q-tile-value { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; } .q-tile-cond .q-cond { font-size: var(--text-sm); } .q-tile-cond .q-cond-note { display: inline; margin: 0; } .q-btn-link { text-decoration: none; display: inline-flex; align-items: center; } .q-quote-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-2); align-items: stretch; } .q-quote-input { max-width: none; } .q-quote-input input { height: 100%; min-height: 50px; font-size: var(--text-lg); font-weight: 700; padding-left: 2rem; } .q-quote-input span { font-size: var(--text-lg); } .q-submit-btn { min-height: 50px; font-size: var(--text-sm); font-weight: 700; white-space: nowrap; } .q-ws-chip-ref { max-width: 150px; overflow: hidden; text-overflow: ellipsis; } .q-quote-hint { font-size: var(--text-xs); color: var(--color-text-muted); } .q-ws-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-5); border-top: 1px solid var(--color-border); background: var(--color-surface); flex-wrap: wrap; } .q-ws-foot-group { display: flex; gap: var(--space-2); flex-wrap: wrap; } .q-ws-foot .btn { min-height: 44px; } .q-btn-info { border-color: var(--color-warning); color: var(--color-warning); } .q-btn-decline { border-color: var(--color-error); color: var(--color-error); } .q-ws-flag { background: var(--color-surface-2); } .q-flag-text { flex: 1 1 320px; font-size: var(--text-sm); } .q-flag-input { flex: 1 1 260px; padding: .6rem .85rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-family: var(--font-body); font-size: var(--text-sm); background: var(--color-surface); color: var(--color-text); min-height: 44px; } /* Large photo lightbox */ .q-lightbox { position: fixed; inset: 0; z-index: 10000; background: rgba(0,0,0,.92); display: flex; align-items: center; justify-content: center; padding: 16px; } .q-lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; } .q-lightbox-x { position: absolute; top: 10px; right: 16px; background: none; border: 0; color: #fff; font-size: 40px; cursor: pointer; line-height: 1; } /* Delayed stage-move pills */ .q-pending-stack { position: fixed; right: 16px; bottom: 16px; z-index: 9000; display: flex; flex-direction: column; gap: 8px; max-width: min(420px, calc(100vw - 32px)); } .q-pending { background: var(--color-surface); border: 1px solid var(--color-border); border-left: 4px solid var(--color-primary); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); padding: 10px 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: var(--text-sm); } .q-pending span { color: var(--color-text-muted); font-size: var(--text-xs); } .q-pending-done { border-left-color: var(--color-success); } .q-pending-warn { border-left-color: var(--color-error); } .q-pending-warn span.q-pending-warn { color: var(--color-error); font-weight: 600; } .q-pending-btns { display: flex; gap: 6px; flex-wrap: wrap; } /* Active listings quick view */ .q-al-panel { position: fixed; inset: 0; z-index: 9500; background: rgba(20,18,14,.6); display: flex; align-items: center; justify-content: center; padding: var(--space-4); } .q-al-card { background: var(--color-surface); border: 2px solid var(--color-border); border-radius: var(--radius-lg); width: min(1100px, 100%); max-height: 94dvh; display: flex; flex-direction: column; box-shadow: var(--shadow-lg); overflow: hidden; } .q-al-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--color-border); } .q-al-head h3 { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: var(--text-lg); } .q-al-sub { font-size: var(--text-xs); color: var(--color-text-muted); } .q-al-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-5); border-bottom: 1px solid var(--color-border); } .q-al-tools .svc-search { flex: 1 1 260px; min-height: 44px; } .q-al-chips { display: flex; flex-wrap: wrap; gap: 6px; } .q-al-grid { padding: var(--space-4) var(--space-5); overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--space-3); align-content: start; -webkit-overflow-scrolling: touch; } .q-al-item { display: flex; gap: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-2); text-decoration: none; color: inherit; background: var(--color-surface-2); } .q-al-img { width: 88px; height: 88px; flex: none; border-radius: var(--radius-sm); overflow: hidden; background: var(--color-surface); } .q-al-img img { width: 100%; height: 100%; object-fit: cover; display: block; } .q-al-meta { min-width: 0; display: flex; flex-direction: column; gap: 3px; } .q-al-name { font-weight: 700; font-size: var(--text-sm); line-height: 1.25; } .q-al-line { font-size: var(--text-xs); color: var(--color-text-muted); } .q-al-status { font-weight: 700; color: var(--color-warning); } .q-al-status.ok { color: var(--color-success); } /* Smaller screens: stack and allow the popup to scroll */ @media (max-height: 760px) { .q-quote-hint { display: none; } } @media (max-width: 900px), (max-height: 640px) { #smModal.q-ws-modal { overflow-y: auto; } .q-ws { max-height: none; } .q-ws-body { grid-template-columns: minmax(0, 1fr); } .q-ws-photo-main { height: 300px; min-height: 240px; flex: none; } .q-ws-chips { display: none; } } /* Inline model / reference editor */ .q-model-edit { margin-left: 8px; padding: 2px 10px; font-size: var(--text-xs); font-weight: 700; border-radius: 999px; border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text-muted); cursor: pointer; min-height: 28px; } .q-model-edit.q-model-missing { border-color: var(--color-warning); background: var(--color-warning-highlight); color: var(--color-warning); } .q-tile-model { position: relative; } .q-model-form { position: absolute; z-index: 5; top: -2px; right: -2px; width: min(340px, 92vw); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; padding: 10px; background: var(--color-surface); border: 2px solid var(--color-primary); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); } .q-model-form input { flex: 1 1 100% !important; } .q-model-form input { flex: 1 1 140px; min-width: 0; min-height: 36px; padding: 4px 10px; border: 1px solid var(--color-primary); border-radius: var(--radius-sm); font: inherit; background: var(--color-surface); color: var(--color-text); } .q-model-form .btn { min-height: 36px; padding: 4px 12px; font-size: var(--text-xs); } .q-tile-year { position: relative; } .q-year-form { width: min(260px, 92vw); right: auto; left: -2px; } /* Quotes tab refresh icon (top right) */ .q-queue-top { align-items: flex-start; } .q-queue-refresh { order: 2; margin-left: auto; } .q-queue-refresh.is-spinning svg { animation: spin 0.8s linear infinite; } /* Quote popup: copy ref, Active listings count label */ .q-model-copy { margin-left: 6px; } .q-btn-listings { display: inline-flex; align-items: center; } .q-al-badge { display: inline-block; margin-left: 8px; min-width: 22px; padding: 1px 8px; border-radius: 999px; background: #000; color: #BA9545; font-weight: 800; font-size: var(--text-xs); line-height: 1.5; text-align: center; letter-spacing: 0.02em; } .q-al-badge[hidden] { display: none; } .q-btn-listings.has-listings { border-color: #BA9545; } /* ---- Quote popup: footer fits one row on desktop; wraps tidily on iPad and phones ---- */ .q-ws-foot { padding: var(--space-2) var(--space-4); gap: var(--space-2); } .q-ws-foot .btn { padding-left: 14px; padding-right: 14px; white-space: nowrap; } @media (max-width: 1100px) and (min-width: 901px) { .q-ws-foot .btn { padding-left: 10px; padding-right: 10px; font-size: var(--text-xs); } } @media (max-width: 900px), (max-height: 640px) { .q-ws-photo-main { height: clamp(200px, 28vh, 270px); min-height: 200px; } .q-ws-foot { flex-direction: column; align-items: stretch; padding: var(--space-3); gap: var(--space-2); } .q-ws-foot-group { width: 100%; } .q-ws-foot-group .btn { flex: 1 1 130px; justify-content: center; } .q-ws-foot-group .q-btn-listings { flex-basis: 150px; } .q-ws-body { padding: var(--space-3) var(--space-4); gap: var(--space-3); } .q-ws-head { padding: var(--space-3) var(--space-4); } } @media (max-width: 520px) { .q-tile-email { grid-column: 1 / -1; } .q-quote-row { grid-template-columns: minmax(0, 1fr); } .q-ws-foot-group .btn { flex-basis: 120px; font-size: var(--text-sm); } .q-ws-foot .btn { min-height: 46px; } .q-ws-title h3 { font-size: var(--text-lg, 1.25rem); overflow-wrap: anywhere; } } /* Shorter landscape screens (iPad Safari, small laptops): keep the quote entry pinned in view while the details scroll */ .q-quote-block { display: flex; flex-direction: column; gap: 6px; } .q-quote-block .q-ws-sec { margin-top: var(--space-2); } @media (min-width: 901px) and (max-height: 840px) { .q-quote-block { position: sticky; bottom: 0; z-index: 2; background: var(--color-surface); padding: 4px 0 var(--space-2); margin-top: auto; box-shadow: 0 -10px 10px -10px rgba(0,0,0,.18); } .q-tile { min-height: 40px; padding-top: 4px; padding-bottom: 4px; } .q-ws-info { gap: 4px; } .q-ws-head { padding-top: var(--space-2); padding-bottom: var(--space-2); } .q-quote-input input, .q-submit-btn { min-height: 46px; } } /* Valuations refresh icon: solid black arrow, clearly visible on the light page background */ .icon-btn.icon-btn-header.q-queue-refresh { color: #000; border-color: var(--color-border); background: var(--color-surface); } .icon-btn.icon-btn-header.q-queue-refresh svg { stroke: #000; } @media (hover: hover) and (pointer: fine) { .icon-btn.icon-btn-header.q-queue-refresh:hover { color: #000; border-color: var(--color-primary); background: var(--color-surface-2); } } /* ---- Valuations: toolbar, New valuation, history ---- */ .q-queue-top { flex-wrap: wrap; align-items: center; } .q-val-tools { order: 2; margin-left: auto; display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; justify-content: flex-end; } .q-val-tools .q-queue-refresh { order: 0; margin-left: 0; } .q-val-tools .btn { min-height: 44px; white-space: nowrap; } @media (max-width: 640px) { .q-queue-top { flex-direction: column; align-items: stretch; } .q-val-tools { order: 0; margin-left: 0; width: 100%; justify-content: stretch; flex-wrap: nowrap; } .q-val-tools .btn { flex: 1 1 0; padding-left: 10px; padding-right: 10px; } } /* New valuation modal */ .q-nv { gap: var(--space-3); } .q-nv-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) 110px; gap: var(--space-3); } .q-nv-field { display: flex; flex-direction: column; gap: 4px; font-size: var(--text-xs); font-weight: 700; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .04em; } .q-nv-field input, .q-nv-field select { min-height: 46px; padding: 8px 12px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); font: inherit; font-size: var(--text-base); text-transform: none; letter-spacing: 0; font-weight: 500; background: var(--color-surface); color: var(--color-text); width: 100%; box-sizing: border-box; } .q-nv-field input:focus, .q-nv-field select:focus { outline: none; border-color: var(--color-primary); } .q-nv-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); } .q-nv-actions .btn { min-height: 44px; } .q-nv-similar { min-height: 56px; } @media (max-width: 560px) { .q-nv-grid { grid-template-columns: minmax(0, 1fr) 96px; } .q-nv-grid .q-nv-model { grid-column: 1 / -1; order: -1; } .q-nv-actions .btn { flex: 1 1 calc(50% - 8px); justify-content: center; } } /* Quoted-before list */ .q-sim-none { padding: 10px 12px; border: 1px dashed var(--color-border); border-radius: var(--radius-md); color: var(--color-text-muted); font-size: var(--text-sm); } .q-similar { border: 1px solid #BA9545; border-radius: var(--radius-md); padding: 8px 10px; background: var(--color-surface-2); display: flex; flex-direction: column; gap: 6px; } .q-similar[hidden] { display: none; } .q-nv-similar .q-sim-head, .q-similar .q-sim-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: var(--text-sm); } .q-sim-head .q-al-badge { margin-left: 0; } .q-sim-stats { color: var(--color-text-muted); font-size: var(--text-xs); } .q-sim-list { display: flex; flex-direction: column; gap: 4px; } .q-sim-row { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto auto; align-items: center; gap: 8px; width: 100%; text-align: left; padding: 8px 10px; min-height: 44px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-text); font: inherit; font-size: var(--text-sm); cursor: pointer; } .q-sim-row:hover { border-color: #BA9545; } .q-sim-row.q-sim-sameyear { border-left: 4px solid #BA9545; } .q-sim-date { color: var(--color-text-muted); font-size: var(--text-xs); } .q-sim-what { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .q-sim-all { align-self: flex-start; background: none; border: none; padding: 6px 2px; min-height: 36px; font: inherit; font-size: var(--text-xs); font-weight: 700; color: var(--color-text); text-decoration: underline; cursor: pointer; } @media (max-width: 520px) { .q-sim-row { grid-template-columns: minmax(0, 1fr) auto; } .q-sim-date { grid-column: 1 / -1; } .q-sim-what { white-space: normal; } } /* History page */ .q-hist-top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); } .q-hist-titlebox { flex: 1 1 200px; min-width: 0; } .q-hist-titlebox h3 { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: var(--text-xl, 1.4rem); } .q-hist-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; } .q-hist-top .btn { min-height: 44px; white-space: nowrap; } .q-hist-chips { display: flex; flex-wrap: wrap; gap: 0 var(--space-5); } .q-hist-chips .svc-chip-row { margin: var(--space-2) 0; } .q-hist-chips .svc-chip { text-transform: none; min-height: 36px; } .q-hist-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-2); margin: var(--space-2) 0 var(--space-3); } .q-hist-stats > div { background: #000; color: #fff; border-radius: var(--radius-md); padding: 8px 12px; display: flex; flex-direction: column; gap: 2px; min-width: 0; } .q-hist-stats span { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: #BA9545; } .q-hist-stats b { font-size: var(--text-base); overflow-wrap: anywhere; } @media (max-width: 640px) { .q-hist-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .q-hist-stats > div:last-child { grid-column: 1 / -1; } } .q-hist-list { display: flex; flex-direction: column; gap: var(--space-2); } .q-hist-item { display: grid; grid-template-columns: 84px minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); width: 100%; text-align: left; padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-text); font: inherit; cursor: pointer; } .q-hist-item:hover { border-color: #BA9545; background: var(--color-surface-2); } .q-hist-img { width: 84px; height: 84px; border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--color-border); background: var(--color-surface-2); display: flex; align-items: center; justify-content: center; } .q-hist-img img { width: 100%; height: 100%; object-fit: cover; display: block; } .q-hist-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .q-hist-title { font-size: var(--text-base); overflow-wrap: anywhere; } .q-hist-line { font-size: var(--text-xs); color: var(--color-text-muted); overflow-wrap: anywhere; } .q-hist-side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; } .q-hist-value { font-size: var(--text-lg); white-space: nowrap; } .q-hist-more { display: flex; justify-content: center; padding: var(--space-3) 0 0; } .q-hist-more .btn { min-height: 44px; } @media (max-width: 560px) { .q-hist-item { grid-template-columns: 64px minmax(0, 1fr); } .q-hist-img { width: 64px; height: 64px; } .q-hist-side { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: center; } } /* Valuation detail overlay */ .q-vd-card { width: min(900px, 100%); } .q-vd-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-4); padding: var(--space-4) var(--space-5); overflow-y: auto; -webkit-overflow-scrolling: touch; } .q-vd-photo { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; } .q-vd-main { height: min(52dvh, 440px); min-height: 220px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface-2); display: flex; align-items: center; justify-content: center; overflow: hidden; } .q-vd-main img { width: 100%; height: 100%; object-fit: contain; display: block; } .q-vd-list { margin: 0; display: flex; flex-direction: column; min-width: 0; } .q-vd-row { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: var(--space-2); padding: 7px 0; border-bottom: 1px solid var(--color-divider, var(--color-border)); font-size: var(--text-sm); } .q-vd-row dt { color: var(--color-text-muted); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .04em; padding-top: 2px; } .q-vd-row dd { margin: 0; overflow-wrap: anywhere; } .q-vd-value { font-size: var(--text-lg); margin-right: 6px; } .q-vd-foot { display: flex; flex-wrap: wrap; gap: var(--space-2); padding: var(--space-3) var(--space-5); border-top: 1px solid var(--color-border); } .q-vd-foot .btn { min-height: 44px; } @media (max-width: 760px) { .q-vd-body { grid-template-columns: minmax(0, 1fr); padding: var(--space-3) var(--space-4); } .q-vd-main { height: 260px; } .q-vd-foot { padding: var(--space-3) var(--space-4); } .q-vd-foot .btn { flex: 1 1 calc(50% - 8px); justify-content: center; } .q-al-panel { padding: var(--space-2); } } @media (max-width: 640px) { .q-hist-titlebox { order: -1; flex: 1 1 100%; } .q-hist-top > #qHistBack { flex: 0 0 auto; } .q-hist-actions { flex: 1 1 0; flex-wrap: nowrap; } .q-hist-actions .btn { flex: 1 1 0; padding-left: 8px; padding-right: 8px; white-space: normal; line-height: 1.15; } } .q-nv .svc-hint, .q-vd-row .svc-hint { white-space: normal; } .q-vd-row a { color: var(--color-text); font-weight: 700; text-decoration: underline; } @media (max-width: 520px) { .q-sim-row { grid-template-areas: "date chip" "what val"; grid-template-columns: minmax(0, 1fr) auto; row-gap: 4px; } .q-sim-row .q-sim-date { grid-area: date; grid-column: auto; } .q-sim-row .q-sim-what { grid-area: what; } .q-sim-row .q-sim-val { grid-area: val; text-align: right; } .q-sim-row .svc-chip { grid-area: chip; justify-self: end; } } .q-similar .q-sim-row { min-height: 38px; padding: 5px 10px; } @media (max-width: 520px) { .q-vd-main { height: 200px; min-height: 160px; } } /* ===== Valuations: Quote Data popup, zoom, compare, client flags ===== */ .q-market-btn, .q-market-btn:not(:disabled) { background: #E8D9A8; color: #000; border: 1px solid #BA9545; font-weight: 700; } .q-market-btn:hover:not(:disabled) { background: #DFCB8B; color: #000; } .q-market-btn:disabled { background: #EFE6C8; color: #000; opacity: .55; } .q-nv-actions .q-btn-listings { flex: 1 1 calc(50% - 8px); justify-content: center; } .q-client-flags { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-2) 0 var(--space-3); } .q-client-flag { flex: 1 1 240px; min-height: 48px; text-align: left; display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; border: 1px solid #BA9545; border-left: 5px solid #BA9545; border-radius: var(--radius-md); background: #FBF5E3; color: #000; font: inherit; cursor: pointer; } .q-client-flag b { font-size: var(--text-sm); } .q-client-flag span { font-size: var(--text-xs); color: #3d3523; } .q-client-flag.is-repeat { border-color: #A32D2D; border-left-color: #A32D2D; background: #FBECEC; } .q-client-card { width: min(720px, 100%); } .q-client-list { padding: var(--space-3); overflow: auto; } .q-qd-panel .q-qd-card { width: min(1180px, 100%); height: min(94dvh, 900px); } .q-qd-head { align-items: flex-start; gap: var(--space-3); } .q-qd-title h3 { margin: 0; } .q-qd-back { min-height: 44px; white-space: nowrap; } .q-qd-tools { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; padding: var(--space-2) var(--space-4); } .q-qd-tools .svc-search { flex: 1 1 200px; min-height: 44px; min-width: 0; } .q-qd-stats { display: flex; gap: var(--space-2); padding: 0 var(--space-4) var(--space-2); flex-wrap: wrap; } .q-qd-stats:empty { display: none; } .q-qd-stats div { flex: 1 1 90px; background: #000; color: #BA9545; border-radius: var(--radius-md); padding: 6px 10px; display: flex; flex-direction: column; } .q-qd-stats span { font-size: var(--text-xs); color: #d8c28a; } .q-qd-stats b { font-size: var(--text-base); } .q-qd-grid { flex: 1 1 auto; overflow: auto; padding: var(--space-3) var(--space-4); display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: var(--space-3); align-content: start; -webkit-overflow-scrolling: touch; } .q-qd-grid > .svc-empty, .q-qd-grid > .loading-state { grid-column: 1 / -1; } .q-qd-card-item { display: flex; flex-direction: column; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); overflow: hidden; } .q-qd-same-year { border-color: #BA9545; box-shadow: 0 0 0 1px #BA9545; } .q-qd-photo { position: relative; padding: 0; border: 0; background: var(--color-surface-2); aspect-ratio: 1 / 1; width: 100%; cursor: zoom-in; overflow: hidden; display: block; } .q-qd-img { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; } .q-qd-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .18s ease; } @media (hover: hover) { .q-qd-photo:hover .q-qd-img img { transform: scale(1.45); } } .q-qd-lens { position: absolute; right: 8px; bottom: 8px; background: #000; color: #BA9545; font-size: var(--text-xs); font-weight: 700; padding: 3px 10px; border-radius: 999px; pointer-events: none; } .q-qd-info { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; text-align: left; padding: 8px 10px; border: 0; background: transparent; font: inherit; color: inherit; cursor: pointer; min-height: 44px; } .q-qd-info b { font-size: var(--text-lg); } .q-qd-info span { font-size: var(--text-xs); color: var(--color-text-muted); } .q-qd-pick { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 10px; border-top: 1px solid var(--color-border); font-size: var(--text-sm); cursor: pointer; } .q-qd-pick input { width: 20px; height: 20px; accent-color: #BA9545; } .q-qd-foot { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: flex-end; padding: var(--space-3) var(--space-4); border-top: 1px solid var(--color-border); } .q-qd-foot .btn { min-height: 44px; } .q-detail-zoom { position: relative; width: 100%; height: 100%; padding: 0; border: 0; background: transparent; cursor: zoom-in; display: block; } .q-detail-zoom span { position: absolute; right: 8px; bottom: 8px; background: #000; color: #BA9545; font-size: var(--text-xs); font-weight: 700; padding: 3px 10px; border-radius: 999px; } .q-zoom-layer { position: fixed; inset: 0; background: #080705; display: flex; flex-direction: column; padding-bottom: env(safe-area-inset-bottom); outline: none; } .q-zoom-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4); color: #f1e6c4; } .q-zoom-cap { font-size: var(--text-sm); min-width: 0; overflow-wrap: anywhere; } .q-zoom-top .btn { min-height: 44px; flex: none; } .q-zoom-stage { flex: 1 1 auto; min-height: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; touch-action: none; cursor: zoom-in; } .q-zoom-stage img { max-width: 100%; max-height: 100%; object-fit: contain; user-select: none; -webkit-user-drag: none; transform-origin: center; will-change: transform; } .q-zoom-stage img.is-zoomed { cursor: grab; } .q-zoom-bar { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); padding: var(--space-3) var(--space-4); } .q-zoom-bar .btn { min-height: 44px; min-width: 48px; } .q-compare-card { width: min(1100px, 100%); } .q-compare-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-3); padding: var(--space-4); overflow: auto; } .q-compare-col { display: flex; flex-direction: column; gap: var(--space-2); align-items: flex-start; min-width: 0; } .q-compare-photo { width: 100%; aspect-ratio: 1 / 1; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface-2); padding: 0; overflow: hidden; cursor: zoom-in; } .q-compare-photo img { width: 100%; height: 100%; object-fit: cover; display: block; } .q-compare-price { font-size: var(--text-xl); font-weight: 800; } .q-compare-col dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0; font-size: var(--text-sm); } .q-compare-col dt { color: var(--color-text-muted); } .q-compare-col dd { margin: 0; } @media (max-width: 700px) { .q-qd-panel, .q-compare-layer { padding: 0; } .q-qd-panel .q-qd-card, .q-compare-card { width: 100%; height: 100dvh; max-height: 100dvh; border-radius: 0; border-width: 0; } .q-qd-head { padding: var(--space-3); } .q-qd-back { padding: 0 12px; } .q-qd-tools { padding: var(--space-2) var(--space-3); } .q-qd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); padding: var(--space-2) var(--space-3); } .q-qd-info b { font-size: var(--text-base); } .q-qd-foot { padding: var(--space-2) var(--space-3) calc(var(--space-2) + env(safe-area-inset-bottom)); } .q-qd-foot .btn { flex: 1 1 auto; } .q-compare-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); padding: var(--space-3); } .q-zoom-bar .btn { flex: 1 1 28%; } } @media (min-width: 701px) and (max-width: 1100px) { .q-qd-grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); } } .q-qd-grid { grid-auto-rows: max-content; } .q-qd-photo, .q-qd-info, .q-qd-pick { flex: none; } .q-qd-info .svc-chip { min-height: 0; padding: 2px 10px; } .q-qd-info { width: 100%; } @media (max-width: 700px) { .q-qd-tools .q-al-chips { flex-wrap: nowrap; overflow-x: auto; width: 100%; padding-bottom: 2px; -webkit-overflow-scrolling: touch; } .q-qd-tools .q-al-chips .svc-chip { flex: none; } .q-qd-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 0 var(--space-3) var(--space-2); gap: 6px; } .q-qd-stats div { padding: 4px 8px; min-width: 0; } .q-qd-stats b { font-size: var(--text-sm); } } @media (max-width: 700px) { .q-qd-foot { flex-wrap: nowrap; } .q-qd-foot .btn { flex: 1 1 0; padding: 0 8px; min-width: 0; } } @media (max-width: 700px) { .q-zoom-bar { flex-wrap: nowrap; padding: var(--space-2) var(--space-3); } .q-zoom-bar .btn { flex: 1 1 0; min-width: 0; padding: 0 4px; } } .q-client-flags:empty { display: none; } .q-client-flags { margin: 0 0 var(--space-2); } .q-flag-clear { font-size: var(--text-xs); color: var(--color-text-muted); } .q-ws-foot .q-ws-foot-research { flex: 1 1 100%; } @media (max-width: 700px) { .q-ws-foot .q-ws-foot-research .btn { flex: 1 1 calc(50% - 8px); } } .q-ws-foot .q-ws-foot-research { order: -1; } @media (min-width: 1100px) and (min-height: 641px) { .q-ws-foot { gap: var(--space-2); } .q-ws-foot .btn { padding-left: 11px; padding-right: 11px; font-size: var(--text-sm); } .q-ws-foot .q-ws-foot-research { order: 0; flex: 0 1 auto; flex-wrap: nowrap; } .q-ws-foot > .q-ws-foot-group:first-child + .q-ws-foot-research { margin-right: auto; } } /* ===== Valuations: market value, commission return, trade value and part exchange quotes ===== */ .q-qd-tools { padding-bottom: var(--space-3); } .q-qd-stats { margin-top: var(--space-1); padding-top: var(--space-2); } .q-qd-year { position: absolute; left: 8px; top: 8px; background: #000; color: #e9dcb4; border: 1px solid #000; font-size: var(--text-sm); font-weight: 800; padding: 3px 10px; border-radius: 999px; pointer-events: none; letter-spacing: .02em; } .q-qd-year.is-same { background: #BA9545; color: #000; border-color: #000; box-shadow: 0 0 0 2px #fff; } .q-nv-grid4 { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) 96px minmax(0, 1.2fr); } .q-money { display: flex; align-items: center; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); min-height: 46px; padding-left: 12px; } .q-money:focus-within { border-color: var(--color-primary); } .q-money b { color: var(--color-text-muted); font-size: var(--text-base); text-transform: none; letter-spacing: 0; } .q-nv-field .q-money input { border: 0; min-height: 44px; background: transparent; padding-left: 6px; } .q-nv-field .q-money input:focus { border: 0; outline: none; } .q-nv-value .q-money { border-color: #BA9545; } .q-nv-calc { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); } .q-calc-tile { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); background: var(--color-surface-2); display: flex; flex-direction: column; gap: 4px; min-width: 0; } .q-calc-tile.q-calc-trade { background: #000; color: #f1e6c4; border-color: #000; } .q-calc-label { font-size: var(--text-xs); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #8a6a22; } .q-calc-trade .q-calc-label { color: #BA9545; } .q-calc-sub { font-size: var(--text-xs); color: var(--color-text-muted); min-height: 1.2em; } .q-calc-num { font-size: var(--text-xl); font-weight: 800; line-height: 1.15; overflow-wrap: anywhere; } .q-calc-trade .q-calc-num { color: #BA9545; } .q-calc-note { font-size: var(--text-xs); color: var(--color-text-muted); display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; } .q-calc-trade .q-calc-note { color: #d8c8a0; } .q-calc-src { flex-basis: 100%; } .q-seg { display: flex; border: 1px solid #BA9545; border-radius: 999px; overflow: hidden; align-self: flex-start; max-width: 100%; } .q-seg button { min-height: 40px; padding: 0 14px; border: 0; background: transparent; color: #e9dcb4; font: inherit; font-size: var(--text-sm); font-weight: 700; cursor: pointer; white-space: nowrap; } .q-seg button.on { background: #BA9545; color: #000; } .q-margin { display: inline-flex; align-items: center; gap: 6px; } .q-margin input { width: 64px; min-height: 36px; text-align: center; border: 1px solid #BA9545; border-radius: var(--radius-sm); background: #1a1a1a; color: #fff; font: inherit; font-size: var(--text-sm); padding: 2px 6px; } .q-margin-save { min-height: 40px; padding: 0 12px; font-size: var(--text-xs); background: #E8D9A8; color: #000; border-color: #BA9545; } .q-px { border: 2px solid #BA9545; border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); background: #fffdf7; } .q-px[hidden] { display: none; } .q-px-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; } .q-px-head h4 { margin: 0; font-size: var(--text-lg); } .q-px-done { background: #eaf4ec; border: 1px solid #2f7d4a; border-radius: var(--radius-sm); padding: 8px 12px; font-size: var(--text-sm); } .q-px-client { grid-template-columns: repeat(3, minmax(0, 1fr)); } .q-px-sec { font-size: var(--text-xs); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #8a6a22; margin-top: var(--space-1); } .q-px-items { display: flex; flex-direction: column; gap: var(--space-3); } .q-px-item { border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: var(--space-3); background: var(--color-surface); display: flex; flex-direction: column; gap: var(--space-2); } .q-px-item-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; } .q-px-sum { font-size: var(--text-sm); color: var(--color-text-muted); } .q-px-item-row { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: var(--space-3); align-items: end; } .q-px-guide { font-size: var(--text-xs); color: var(--color-text-muted); padding-bottom: 12px; } .q-px-remove { min-height: 40px; } .q-px-add { align-self: flex-start; min-height: 44px; } .q-px-target { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); } .q-px-target > .btn { min-height: 44px; } .q-px-buy { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: var(--space-3); width: 100%; align-items: start; } .q-px-buy-img { width: 96px; height: 96px; border-radius: var(--radius-sm); background: var(--color-surface-2); overflow: hidden; border: 1px solid var(--color-border); } .q-px-buy-img img { width: 100%; height: 100%; object-fit: cover; display: block; } .q-px-buy-meta { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .q-px-buy-meta span { font-size: var(--text-xs); color: var(--color-text-muted); } .q-px-buy-meta .q-nv-field { max-width: 220px; } .q-px-buy-btns { display: flex; flex-direction: column; gap: var(--space-2); } .q-px-buy-btns .btn { min-height: 44px; } .q-px-totals { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--space-2); } .q-px-tot { background: #000; color: #e9dcb4; border-radius: var(--radius-sm); padding: 8px 12px; display: flex; flex-direction: column; gap: 2px; font-size: var(--text-xs); } .q-px-tot b { color: #BA9545; font-size: var(--text-lg); } .q-px-tot.q-px-cost { background: #BA9545; color: #000; } .q-px-tot.q-px-cost b { color: #000; } .q-px-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); } .q-px-actions .btn { min-height: 44px; } .q-px-notes input { text-transform: none; } .q-pick-card { width: min(980px, 100%); height: min(92dvh, 820px); } .q-pick-item { border: 1px solid var(--color-border); background: var(--color-surface); font: inherit; text-align: left; cursor: pointer; color: inherit; } .q-pick-item:hover, .q-pick-item:focus-visible { border-color: #BA9545; } .q-pxl-card { width: min(980px, 100%); height: min(92dvh, 860px); } .q-pxl-list { flex: 1 1 auto; overflow: auto; padding: var(--space-3) var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); -webkit-overflow-scrolling: touch; } .q-pxl-item { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); background: var(--color-surface); } .q-pxl-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-2); } .q-pxl-top b { font-size: var(--text-base); display: block; } .q-pxl-id { font-size: var(--text-xs); color: var(--color-text-muted); } .q-pxl-contact { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: var(--text-sm); } .q-pxl-contact a { color: inherit; text-decoration: underline; text-decoration-color: #BA9545; min-height: 24px; } .q-pxl-watches { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; } .q-pxl-watches li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--space-3); font-size: var(--text-sm); align-items: baseline; } .q-pxl-watches li span:first-child { overflow-wrap: anywhere; } .q-pxl-watches li span + span { color: var(--color-text-muted); font-size: var(--text-xs); } .q-pxl-sum { display: flex; flex-wrap: wrap; gap: 4px 20px; font-size: var(--text-sm); border-top: 1px solid var(--color-border); padding-top: var(--space-2); } .q-pxl-notes { font-size: var(--text-sm); color: var(--color-text-muted); } .q-pxl-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); } .q-pxl-actions .svc-chip { min-height: 40px; } @media (max-width: 760px) { .q-nv-grid4 { grid-template-columns: minmax(0, 1fr) 96px; } .q-nv-grid4 .q-nv-model { grid-column: 1 / -1; order: -1; } .q-nv-grid4 .q-nv-value { grid-column: 1 / -1; } .q-nv-calc { grid-template-columns: minmax(0, 1fr); } .q-px-client { grid-template-columns: minmax(0, 1fr); } .q-px-item-row { grid-template-columns: minmax(0, 1fr); } .q-px-guide { padding-bottom: 0; } .q-px-buy { grid-template-columns: 72px minmax(0, 1fr); } .q-px-buy-img { width: 72px; height: 72px; } .q-px-buy-btns { grid-column: 1 / -1; flex-direction: row; } .q-px-buy-btns .btn { flex: 1 1 0; } .q-px-actions .btn { flex: 1 1 calc(50% - 8px); } .q-px-actions .btn-primary { flex-basis: 100%; order: -1; } .q-pick-card, .q-pxl-card { width: 100%; height: 100dvh; max-height: 100dvh; border-radius: 0; border-width: 0; } .q-pick-panel, #qPxQuotes { padding: 0; } .q-pxl-list { padding: var(--space-2) var(--space-3); } .q-pxl-watches li { grid-template-columns: minmax(0, 1fr) auto; } .q-pxl-watches li span + span { display: none; } .q-seg button { padding: 0 10px; } .q-px { padding: var(--space-3); } } /* ---- Trade quotes (outright and part exchange), quote data tags, market appetite settings ---- */ .q-calc-market { margin-top: 6px; font-size: var(--text-xs); color: var(--color-primary-active); font-weight: 600; } .q-nv-log { display: flex; margin: var(--space-3) 0 0; } .q-nv-log[hidden] { display: none; } .q-nv-log .btn { min-height: 44px; } .q-px-guide.is-warn, .q-px-guide .is-warn, [data-guide].is-warn, #qPxMainGuide.is-warn { color: #9b2c2c; font-weight: 600; } .q-qd-offer { display: block; font-size: var(--text-sm); font-weight: 700; color: var(--color-primary-active); } .q-mk-card > summary { cursor: pointer; list-style: none; } .q-mk-card > summary::-webkit-details-marker { display: none; } .q-mk-card > summary::after { content: '+'; font-size: 1.4rem; line-height: 1; color: var(--color-primary); margin-left: auto; padding-left: var(--space-3); } .q-mk-card[open] > summary::after { content: '\2212'; } .q-mk-summary { flex-wrap: wrap; min-height: 44px; } .q-mk-tools { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; margin-bottom: var(--space-4); } .q-mk-newfam { display: flex; flex-wrap: wrap; gap: var(--space-2); flex: 1 1 320px; } .q-mk-newfam input { flex: 1 1 140px; min-width: 0; min-height: 44px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 0 var(--space-3); font-size: var(--text-sm); background: var(--color-surface-2); color: var(--color-text); font-family: var(--font-body); } .q-mk-newfam input#qMkBrand { flex: 0 1 110px; } .q-mk-tools .svc-search, .q-mk-tools .btn { min-height: 44px; } .q-mk-list { display: grid; gap: var(--space-3); } .q-mk-fam { border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); } .q-mk-fam > summary { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); padding: var(--space-3) var(--space-4); cursor: pointer; min-height: 48px; list-style: none; } .q-mk-fam > summary::-webkit-details-marker { display: none; } .q-mk-fam[open] > summary { border-bottom: 1px solid var(--color-divider); } .q-mk-name { font-family: var(--font-display); font-weight: 600; font-size: var(--text-md); margin-right: auto; } .q-mk-body { padding: var(--space-4); display: grid; gap: var(--space-4); } .q-mk-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); align-items: end; } .q-mk-f { display: grid; gap: 4px; min-width: 0; } .q-mk-f > span { font-size: var(--text-xs); font-weight: 600; color: var(--color-text-muted); } .q-mk-f input, .q-mk-f select, .q-mk-f textarea, .q-mk-import textarea, .q-mk-add textarea { width: 100%; box-sizing: border-box; min-height: 44px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 8px var(--space-3); font-size: var(--text-sm); font-family: var(--font-body); background: var(--color-surface-2); color: var(--color-text); } .q-mk-f textarea, .q-mk-import textarea, .q-mk-add textarea { min-height: 72px; resize: vertical; } .q-mk-f input:focus, .q-mk-f select:focus, .q-mk-f textarea:focus, .q-mk-import textarea:focus, .q-mk-add textarea:focus { outline: none; border-color: var(--color-primary); background: var(--color-surface); } .q-mk-wide { grid-column: span 2; } .q-mk-full { grid-column: 1 / -1; } .q-mk-check { display: flex; align-items: center; gap: 8px; min-height: 44px; font-size: var(--text-sm); } .q-mk-check input { width: 20px; height: 20px; accent-color: #BA9545; } .q-mk-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); grid-column: 1 / -1; } .q-mk-actions .btn { min-height: 44px; } .q-mk-danger { color: #9b2c2c; } .q-mk-refs-head { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); align-items: baseline; } .q-mk-refs { display: grid; gap: var(--space-2); } .q-mk-ref { display: grid; grid-template-columns: 110px 140px 80px 90px minmax(0, 1fr) auto auto; gap: var(--space-3); align-items: end; padding: var(--space-3); border: 1px solid var(--color-divider); border-radius: var(--radius-sm); background: var(--color-surface-2); } .q-mk-ref .q-mk-actions { grid-column: auto; flex-wrap: nowrap; } .q-mk-refname { font-family: var(--font-display); align-self: center; word-break: break-all; } .q-mk-add { display: grid; gap: var(--space-2); justify-items: start; } .q-mk-add .q-mk-f { width: 100%; } .q-mk-add .btn { min-height: 44px; } .q-mk-import { margin-top: var(--space-4); border: 1px dashed var(--color-border); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); } .q-mk-import > summary { cursor: pointer; font-weight: 600; min-height: 44px; display: flex; align-items: center; } .q-mk-import .q-mk-actions { margin-top: var(--space-3); } @media (max-width: 1100px) { .q-mk-ref { grid-template-columns: 1fr 1fr; } .q-mk-ref .q-mk-refname { grid-column: 1 / -1; } .q-mk-ref .q-mk-wide { grid-column: 1 / -1; } .q-mk-ref .q-mk-actions { grid-column: 1 / -1; } } @media (max-width: 820px) { .q-mk-grid { grid-template-columns: 1fr 1fr; } .q-mk-wide { grid-column: 1 / -1; } } @media (max-width: 480px) { .q-mk-grid, .q-mk-ref { grid-template-columns: 1fr; } .q-mk-actions .btn { flex: 1 1 140px; } } .q-mk-card > summary.q-mk-summary { position: relative; padding-right: 3rem; display: block; } .q-mk-card > summary.q-mk-summary h3 { margin-bottom: 2px; } .q-mk-card > summary.q-mk-summary::after { position: absolute; right: var(--space-5); top: 50%; transform: translateY(-50%); margin: 0; padding: 0; } .q-mk-body, .q-mk-fam, .q-mk-grid, .q-mk-ref, .q-mk-refs, .q-mk-list, .q-mk-add { min-width: 0; max-width: 100%; box-sizing: border-box; } @media (max-width: 480px) { .q-mk-grid, .q-mk-ref { grid-template-columns: minmax(0, 1fr); } .q-mk-body { padding: var(--space-3); } .q-mk-actions .btn { flex: 1 1 120px; padding-left: 8px; padding-right: 8px; } } .q-mk-f, .q-mk-add { grid-template-columns: minmax(0, 1fr); } .q-mk-f input, .q-mk-f select, .q-mk-f textarea { min-width: 0; } .q-mk-ref > *, .q-mk-grid > * { min-width: 0; } .q-mk-body, .q-mk-list, .q-mk-refs { grid-template-columns: minmax(0, 1fr); } #qPxTarget[hidden], #qPxTargetSec[hidden], .q-px-sec[hidden], .q-px-target[hidden] { display: none !important; } /* Photo identification (New valuation) */ .q-id { border: 1px solid var(--color-border); border-radius: var(--radius-md, 12px); padding: var(--space-3); display: grid; gap: var(--space-2); background: var(--color-surface); } .q-id[hidden] { display: none; } .q-id-bar { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; } .q-id-bar .btn { min-height: 46px; display: inline-flex; align-items: center; gap: 8px; } .q-id-cam { flex: 1 1 220px; justify-content: center; font-weight: 700; } .q-id-panel { display: grid; gap: var(--space-2); } .q-id-panel[hidden] { display: none; } .q-id-thumbs { display: flex; gap: 8px; flex-wrap: wrap; } .q-id-thumb { position: relative; width: 72px; height: 72px; border-radius: 10px; overflow: hidden; border: 1px solid var(--color-border); } .q-id-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .q-id-x { position: absolute; top: 2px; right: 2px; width: 26px; height: 26px; border-radius: 50%; border: 0; background: rgba(0,0,0,.65); color: #fff; font-size: 18px; line-height: 1; cursor: pointer; } .q-id-busy { display: flex; align-items: center; gap: 10px; font-weight: 600; padding: 6px 0; } .q-id-spin { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--color-border); border-top-color: var(--color-primary); animation: qIdSpin .8s linear infinite; } @keyframes qIdSpin { to { transform: rotate(360deg); } } .q-id-note { padding: 10px 12px; border-radius: 10px; background: rgba(184,148,70,.12); font-size: var(--text-sm); } .q-id-note.warn { background: rgba(176,42,42,.09); } .q-id-note.ok { background: rgba(46,125,80,.1); } .q-id-seen { display: grid; gap: 6px; } .q-id-seen-title { font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-muted); } .q-id-chip { display: inline-flex; gap: 6px; align-items: baseline; padding: 4px 10px; margin: 0 6px 6px 0; border-radius: 999px; background: var(--color-surface-offset, rgba(0,0,0,.05)); font-size: var(--text-sm); } .q-id-chip i { font-style: normal; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-muted); } .q-id-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space-3); } .q-id-tile { display: flex; flex-direction: column; border: 1px solid var(--color-border); border-radius: 14px; overflow: hidden; background: var(--color-surface); } .q-id-tile-img { aspect-ratio: 4 / 3; background: var(--color-surface-offset, #f3efe6); display: flex; align-items: center; justify-content: center; } .q-id-tile-img img { width: 100%; height: 100%; object-fit: contain; display: block; } .q-id-tile-img span { font-size: 28px; font-weight: 700; color: var(--color-text-muted); letter-spacing: .06em; } .q-id-tile-body { padding: 12px; display: grid; gap: 6px; flex: 1; align-content: start; } .q-id-ref { font-size: var(--text-lg, 18px); font-weight: 700; } .q-id-line { font-size: var(--text-sm); color: var(--color-text-muted); } .q-id-evid { display: flex; flex-wrap: wrap; gap: 4px; } .q-id-evid span { font-size: 11px; padding: 2px 8px; border-radius: 999px; background: rgba(46,125,80,.1); color: #1f6b43; } .q-id-tile-foot { display: flex; flex-direction: column; align-items: stretch; gap: 8px; margin-top: auto; padding-top: 6px; } .q-id-status { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-muted); } .q-id-pick { min-height: 44px; width: 100%; justify-content: center; } .q-id-none { display: flex; justify-content: flex-end; } .q-id-picked { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 10px 12px; border-radius: 10px; background: rgba(46,125,80,.1); } .q-id-refine { border-top: 1px solid var(--color-border); padding-top: var(--space-2); } .q-id-refine summary { cursor: pointer; font-weight: 600; min-height: 36px; display: flex; align-items: center; } .q-id-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-3); margin-top: var(--space-2); align-items: end; } .q-id-form-go .btn { min-height: 46px; width: 100%; } .q-ref { border: 1px solid var(--color-border); border-radius: var(--radius-md, 12px); padding: var(--space-3); display: grid; gap: 8px; background: var(--color-surface-offset, rgba(0,0,0,.02)); } .q-ref[hidden] { display: none; } .q-ref-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; } .q-ref-head b { font-size: var(--text-lg, 18px); } .q-ref-head span { color: var(--color-text-muted); font-size: var(--text-sm); } .q-ref-row { font-size: var(--text-sm); } .q-ref-row > i { display: block; font-style: normal; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-muted); margin-bottom: 4px; } .q-ref-dial { font-size: var(--text-sm); font-weight: 600; } .q-ref-dial.ok { color: #1f6b43; } .q-ref-dial.warn { color: #9b2c2c; } .q-ref-photos { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; } .q-ref-photos figure { margin: 0; width: 96px; flex: 0 0 96px; text-align: center; } .q-ref-photos img { width: 96px; height: 96px; object-fit: contain; background: #fff; border-radius: 10px; border: 1px solid var(--color-border); } .q-ref-photos figcaption { font-size: 11px; color: var(--color-text-muted); margin-top: 2px; } @media (max-width: 560px) { .q-id-bar .btn { flex: 1 1 calc(50% - 8px); justify-content: center; } .q-id-cam { flex-basis: 100%; } .q-id-grid { grid-template-columns: minmax(0, 1fr); } } .q-email-slot { margin-top: 6px; } .q-email-slot:empty { display: none; } .q-email-slot-inline { margin-top: 0; display: contents; } /* ---- Valuations page switch + Part exchange requests ---- */ .q-val-switch { margin-bottom: var(--space-3); } .q-val-switch .svc-chip { min-height: 44px; padding-left: var(--space-4); padding-right: var(--space-4); display: inline-flex; align-items: center; gap: 8px; } .q-val-sw-count { display: inline-block; min-width: 20px; padding: 0 6px; border-radius: 999px; background: var(--color-surface-2); border: 1px solid var(--color-border); font-size: var(--text-xs); line-height: 18px; text-align: center; font-variant-numeric: tabular-nums; } .svc-chip.svc-active .q-val-sw-count { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.35); color: inherit; } .q-pxr-list { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-3) 0 0; } .q-pxr-item { border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); } .q-pxr-item.is-quoted { border-left: 3px solid var(--color-success, #4d7a52); } .q-pxr-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; } .q-pxr-client b { font-size: var(--text-base); } .q-pxr-badges { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; } .q-pxr-badges .svc-chip:empty { display: none; } .q-pxr-cols { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--space-4); } .q-pxr-sec { font-size: var(--text-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-muted); margin: 0 0 var(--space-2); } .q-pxr-panel .q-pxr-sec { margin-top: var(--space-3); } .q-pxr-wlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); } .q-pxr-w { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-3); align-items: start; } .q-pxr-photos { position: relative; display: flex; gap: 6px; flex-wrap: wrap; max-width: 330px; } .q-pxr-ph { position: relative; width: 72px; height: 72px; padding: 0; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--color-border); background: var(--color-surface-2); display: flex; align-items: center; justify-content: center; cursor: zoom-in; } .q-pxr-noph { cursor: default; } .q-pxr-ph img { width: 100%; height: 100%; object-fit: cover; display: block; } .q-pxr-photos.is-lg .q-pxr-ph { width: 96px; height: 96px; } .q-pxr-more { position: absolute; right: 4px; bottom: 4px; padding: 0 6px; border-radius: 999px; background: rgba(20,18,14,.72); color: #fff; font-size: var(--text-xs); line-height: 18px; pointer-events: none; } .q-pxr-wmeta { min-width: 0; } .q-pxr-wmeta b { overflow-wrap: anywhere; } .q-pxr-facts { display: flex; gap: 4px 6px; flex-wrap: wrap; margin-top: 4px; } .q-pxr-fact { font-size: var(--text-xs); padding: 2px 8px; border-radius: 999px; background: var(--color-surface-2); border: 1px solid var(--color-border); } .q-pxr-buy { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: var(--space-3); align-items: start; } .q-pxr-buy-img { width: 84px; height: 84px; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--color-border); background: var(--color-surface-2); display: flex; align-items: center; justify-content: center; } .q-pxr-buy-img img { width: 100%; height: 100%; object-fit: cover; display: block; } .q-pxr-buy-meta { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .q-pxr-buy-meta b { overflow-wrap: anywhere; } .q-pxr-price { font-weight: 600; font-variant-numeric: tabular-nums; } .q-pxr-flags { display: flex; gap: 6px; flex-wrap: wrap; } .q-pxr-flag { font-size: var(--text-xs); padding: 3px 10px; border-radius: var(--radius-sm); background: var(--color-warning-bg, #f6efe0); border: 1px solid var(--color-border); color: var(--color-text); } .q-pxr-actions { display: flex; gap: var(--space-2); justify-content: flex-end; flex-wrap: wrap; border-top: 1px solid var(--color-border); padding-top: var(--space-3); } .q-pxr-actions .btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; } .q-nv-req { margin: var(--space-3) 0; } .q-pxr-panel { border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface-2); padding: var(--space-3) var(--space-4); } .q-pxr-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; } .q-pxr-points { margin: 0; padding-left: 18px; font-size: var(--text-sm); display: flex; flex-direction: column; gap: 4px; } @media (max-width: 760px) { .q-pxr-cols { grid-template-columns: minmax(0, 1fr); } .q-pxr-item { padding: var(--space-3); } .q-pxr-actions .btn { flex: 1 1 0; } .q-val-switch .svc-chip { flex: 1 1 0; justify-content: center; padding-left: 10px; padding-right: 10px; } } .q-pxr-buy-meta span, .q-pxr-buy-meta a { overflow-wrap: anywhere; } .q-pxr-list { padding: var(--space-3) var(--space-4) var(--space-4); min-width: 0; } .q-pxr-item, .q-pxr-cols > section, .q-pxr-w, .q-pxr-buy { min-width: 0; } @media (max-width: 760px) { .q-pxr-list { padding: var(--space-2) var(--space-3) var(--space-3); } } .q-pxr-buy-meta .svc-hint, .q-pxr-wmeta .svc-hint { white-space: normal; display: inline; } .q-pxr-buy-meta > .svc-hint { display: block; } /* ===== Valuations / Part exchange requests: tab bar, tools and stat strip ===== */ .q-vbar { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; border-bottom: 1px solid var(--color-border); margin-bottom: var(--space-4); } .q-vtabs { display: flex; gap: var(--space-5); min-width: 0; } .q-vtab { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 2px; margin: 0; background: none; border: 0; border-radius: 0; cursor: pointer; font: inherit; font-size: var(--text-sm); font-weight: 600; letter-spacing: .01em; color: var(--color-text-muted); white-space: nowrap; transition: color .15s ease; } .q-vtab::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: transparent; transition: background .15s ease; } .q-vtab:hover { color: var(--color-text); } .q-vtab.on { color: var(--color-text); } .q-vtab.on::after { background: var(--color-primary); } .q-vtab:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; border-radius: 4px; } .q-vtab-n { display: inline-block; min-width: 22px; padding: 0 7px; border-radius: 6px; background: var(--color-surface-offset); color: var(--color-brass); font-size: var(--text-xs); font-weight: 700; line-height: 20px; text-align: center; font-variant-numeric: tabular-nums; } .q-vtab-n[hidden] { display: none; } .q-vtab.on .q-vtab-n { background: var(--color-primary); color: var(--color-primary-ink); } .q-vtools { display: flex; align-items: center; gap: var(--space-2); padding-bottom: 8px; flex-wrap: wrap; justify-content: flex-end; } .q-vbtn { min-height: 40px; padding: 0 var(--space-4); border-radius: 8px; font-size: var(--text-sm); font-weight: 600; white-space: nowrap; box-shadow: none; } .q-vrefresh { width: 40px; height: 40px; min-height: 40px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--color-border); background: var(--color-surface); } .q-vstat { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin: 0 0 var(--space-3); padding: 10px 14px; background: var(--color-surface); border: 1px solid var(--color-border); border-left: 3px solid var(--color-primary); border-radius: 8px; } .q-vstat b { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; } .q-vstat-l { font-size: var(--text-sm); font-weight: 600; } .q-vstat-h { font-size: var(--text-xs); color: var(--color-text-muted); } .q-vstat.is-good { border-left-color: var(--color-success); } .q-vstat.is-warn { border-left-color: var(--color-warning); } @media (max-width: 760px) { .q-vbar { gap: var(--space-2); } .q-vtabs { width: 100%; gap: var(--space-4); } .q-vtab { font-size: var(--text-sm); } .q-vtools { width: 100%; justify-content: stretch; flex-wrap: nowrap; padding-bottom: var(--space-2); } .q-vtools .q-vbtn { flex: 1 1 0; padding: 0 8px; } } #qPxrStages { gap: 6px; } #qPxrStages .svc-chip { border-radius: 8px; min-height: 36px; display: inline-flex; align-items: center; gap: 8px; } /* ===== Part exchange request tiles ===== */ .q-pxr-list { gap: var(--space-4); } .q-pxr-item { padding: 0; overflow: hidden; border-radius: 12px; box-shadow: 0 1px 2px rgba(20,18,14,.04); display: flex; flex-direction: column; gap: 0; } .q-pxr-item.is-quoted { border-left: 4px solid var(--color-success); } .q-pxr-head { padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--color-divider); background: var(--color-surface-2); align-items: center; } .q-pxr-client b { font-family: var(--font-display); font-size: var(--text-base); font-weight: 600; } .q-pxr-contact { display: flex; flex-wrap: wrap; gap: 2px var(--space-3); margin-top: 2px; font-size: var(--text-xs); color: var(--color-text-muted); } .q-pxr-contact span { overflow-wrap: anywhere; } .q-pxr-badges .svc-chip { border-radius: 6px; min-height: 28px; padding: 0 10px; font-size: var(--text-xs); } .q-pxr-cols { padding: var(--space-5); gap: var(--space-6, 32px); grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); } .q-pxr-col-buy { padding-left: var(--space-5); border-left: 1px solid var(--color-divider); } .q-pxr-sec { margin-bottom: var(--space-3); font-weight: 700; color: var(--color-brass); } .q-pxr-wlist { gap: var(--space-4); } .q-pxr-w { display: flex; flex-direction: column; gap: var(--space-3); } .q-pxr-wlist > .q-pxr-w + .q-pxr-w { padding-top: var(--space-4); border-top: 1px dashed var(--color-divider); } .q-pxr-wmeta b { font-size: var(--text-base); } .q-pxr-year { margin-left: 8px; font-size: var(--text-sm); color: var(--color-text-muted); font-variant-numeric: tabular-nums; } .q-pxr-fact { border-radius: 6px; padding: 3px 9px; } .q-pxr-photos { gap: var(--space-2); max-width: none; flex-wrap: wrap; } .q-pxr-ph { width: 104px; height: 104px; border-radius: 8px; } .q-pxr-photos.is-lg .q-pxr-ph { width: 112px; height: 112px; } .q-pxr-ph:hover { border-color: var(--color-primary); } .q-pxr-more { right: 6px; bottom: 6px; border-radius: 6px; padding: 1px 7px; font-weight: 700; } .q-pxr-buy { grid-template-columns: 128px minmax(0, 1fr); gap: var(--space-4); } .q-pxr-buy-img { width: 128px; height: 128px; border-radius: 8px; } .q-pxr-buy-meta { gap: 5px; } .q-pxr-buy-meta b { font-size: var(--text-base); line-height: 1.3; } .q-pxr-price { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600; } .q-pxr-al { align-self: flex-start; margin-top: 4px; min-height: 36px; border-radius: 8px; padding: 0 var(--space-4); } .q-pxr-flags { padding: 0 var(--space-5) var(--space-4); } .q-pxr-flag { border-radius: 6px; } .q-pxr-actions { align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-5); border-top: 1px solid var(--color-divider); background: var(--color-surface-2); flex-wrap: wrap; justify-content: flex-end; } .q-pxr-actions .btn { min-height: 40px; padding: 0 var(--space-4); border-radius: 8px; font-size: var(--text-sm); font-weight: 600; box-shadow: none; } .q-pxr-spacer { flex: 1 1 0; } .q-pxr-deal { background: transparent; } .q-pxr-panel .q-pxr-buy { grid-template-columns: 96px minmax(0, 1fr); } .q-pxr-panel .q-pxr-buy-img { width: 96px; height: 96px; } .q-pxr-panel .q-pxr-photos .q-pxr-ph { width: 88px; height: 88px; } @media (max-width: 760px) { .q-pxr-head { padding: var(--space-3) var(--space-4); } .q-pxr-cols { padding: var(--space-4); grid-template-columns: minmax(0, 1fr); gap: var(--space-4); } .q-pxr-col-buy { padding-left: 0; border-left: 0; padding-top: var(--space-4); border-top: 1px solid var(--color-divider); } .q-pxr-ph { width: 30%; max-width: 104px; height: auto; aspect-ratio: 1; } .q-pxr-buy { grid-template-columns: 96px minmax(0, 1fr); } .q-pxr-buy-img { width: 96px; height: 96px; } .q-pxr-flags { padding: 0 var(--space-4) var(--space-3); } .q-pxr-actions { padding: var(--space-3) var(--space-4); } .q-pxr-spacer { display: none; } .q-pxr-actions .btn { flex: 1 1 calc(50% - var(--space-3)); } .q-pxr-actions .q-pxr-deal { flex: 1 1 100%; } } /* ===== Active listings: items are buttons now; in-app listing view ===== */ button.q-al-item { text-align: left; font: inherit; cursor: pointer; width: 100%; } button.q-al-item:hover { border-color: var(--color-primary); } .q-ld-card { width: min(980px, 100%); } .q-ld-body { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--space-5); padding: var(--space-5); overflow-y: auto; } .q-ld-main { aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: var(--color-surface-2); border: 1px solid var(--color-border); display: flex; align-items: center; justify-content: center; } .q-ld-main img { width: 100%; height: 100%; object-fit: contain; display: block; } .q-ld-thumbs { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-3); } .q-ld-th { width: 64px; height: 64px; padding: 0; border-radius: 6px; overflow: hidden; border: 2px solid var(--color-border); background: var(--color-surface-2); cursor: pointer; } .q-ld-th.on { border-color: var(--color-primary); } .q-ld-th img { width: 100%; height: 100%; object-fit: cover; display: block; } .q-ld-info { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; align-items: flex-start; } .q-ld-price { font-family: var(--font-display); font-size: var(--text-xl, 28px); font-weight: 600; } .q-ld-price s { font-size: var(--text-sm); color: var(--color-text-muted); margin-left: 8px; font-weight: 400; } .q-ld-rows { margin: 0; width: 100%; display: flex; flex-direction: column; } .q-ld-row { display: flex; justify-content: space-between; gap: var(--space-3); padding: 8px 0; border-bottom: 1px solid var(--color-divider); font-size: var(--text-sm); } .q-ld-row dt { color: var(--color-text-muted); } .q-ld-row dd { margin: 0; font-weight: 600; text-align: right; overflow-wrap: anywhere; } .q-ld-desc { margin: 0; font-size: var(--text-sm); line-height: 1.55; color: var(--color-text-muted); } @media (max-width: 760px) { .q-ld-body { grid-template-columns: minmax(0, 1fr); padding: var(--space-4); } } /* ========================================================================= Collections deal cards, watch photos at every stage, gold Send email button (Sam, 2026-10-12) ========================================================================= */ [hidden] { display: none !important; } .btn.q-btn-email, .q-btn-email { background: #EBDDB0; color: #14120B; border: 1px solid #CDB06A; font-weight: 600; } .btn.q-btn-email:hover:not(:disabled) { background: #E3D091; border-color: #BA9545; color: #14120B; } .btn.q-btn-email:disabled { opacity: 0.55; cursor: not-allowed; } .q-cards-table, .q-cards-table tbody { display: block; width: 100%; } .q-cards-table thead { display: none; } .q-cards-table colgroup { display: none; } .q-cards-table tr.q-dc-row { display: block; border: 0; background: transparent; } .q-cards-table td.q-dc-host { display: block; padding: var(--space-4) !important; border: 0; background: transparent; } .q-dc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 520px), 1fr)); gap: var(--space-4); align-items: start; } .q-dc { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: var(--space-4); padding: var(--space-4); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: 0 1px 2px rgba(20, 18, 11, 0.04); } .q-dc-attn { border-left: 4px solid var(--color-warning); } .q-dc-thumb.q-qthumb { width: 112px; height: 112px; border-radius: 12px; } .q-dc-body { min-width: 0; display: flex; flex-direction: column; gap: var(--space-3); } .q-dc-head { display: flex; gap: var(--space-3); justify-content: space-between; align-items: flex-start; flex-wrap: wrap; } .q-dc-id { flex: 1 1 200px; min-width: 0; } .q-dc-name { margin: 0; font-family: var(--font-display); font-size: var(--text-base); font-weight: 600; cursor: pointer; overflow-wrap: anywhere; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .q-dc-name:hover { color: var(--color-brass, #9E7E3A); } .q-dc-watch { margin-top: 2px; font-size: var(--text-sm); color: var(--color-text-muted); cursor: pointer; overflow-wrap: anywhere; } .q-dc-side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; } .q-dc-value { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600; white-space: nowrap; } .q-dc-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3) var(--space-4); padding: var(--space-3); background: var(--color-surface-2); border-radius: 10px; } .q-dc-cell { min-width: 0; } .q-dc-label { display: block; font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: 3px; } .q-dc-val { font-size: 13px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; overflow-wrap: anywhere; min-width: 0; } .q-dc-val code { font-size: 12px; } .q-dc-mail { color: inherit; text-decoration: none; border-bottom: 1px dotted var(--color-border); overflow-wrap: anywhere; } .q-dc-dhl { display: flex; flex-direction: column; gap: var(--space-2); align-items: stretch; } .q-dc-dhl .q-dhl-booked { gap: var(--space-2); align-items: flex-start; width: 100%; } .q-dc-dhl .q-dhl-booked-badge { max-width: none; } .q-dc-dhl .q-dhl-action-row, .q-dc-dhl .q-dhl-action-row.q-dhl-action-grid { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; gap: var(--space-2); margin-top: var(--space-1); width: 100%; max-width: none; align-items: center; } .q-dc-dhl .q-dhl-action-row > button, .q-dc-dhl .q-dhl-action-row > a, .q-dc-dhl .q-dhl-action-row.q-dhl-action-grid > button, .q-dc-dhl .q-dhl-action-row.q-dhl-action-grid > a { width: auto; min-width: 112px; min-height: 36px; padding: 6px 14px; font-size: 12.5px; flex: 0 0 auto; white-space: nowrap; } .q-dc-dhl .q-dhl-action-row.q-dhl-action-grid > :last-child:nth-child(odd) { grid-column: auto; } .q-dc-dhl > button.btn, .q-dc-dhl > .q-dhl-btn-wrap button { min-height: 38px; padding: 7px 18px; font-size: 13px; align-self: flex-start; } .q-dc-dhl .q-path-switch-row { flex-direction: row; flex-wrap: wrap; border-top: 1px dashed var(--color-divider); padding-top: var(--space-3); margin-top: var(--space-1); } .q-dc-dhl .q-path-switch-row button { width: auto; min-width: 150px; min-height: 34px; padding: 6px 12px; } .q-dc-dhl .q-email-slot { margin: 0; } .q-dc-dhl .q-email-slot .btn { min-height: 36px; padding: 6px 18px; font-size: 12.5px; } .q-dc-pd { align-self: flex-start; font-size: 12px; color: var(--color-text-muted); text-decoration: none; border-bottom: 1px dotted var(--color-border); } .q-dc-pd:hover { color: var(--color-brass, #9E7E3A); } .q-dc-done { margin-top: var(--space-4); } .q-dc-done > .q-dc-grid { margin-top: var(--space-3); } .q-dc .q-arranged-line { margin: 0; } .q-dc .svc-hint { margin: 0; } .q-watch-with-thumb { display: flex; align-items: center; gap: var(--space-3); } .q-mini-thumb.q-qthumb { width: 52px; height: 52px; flex: 0 0 52px; border-radius: 8px; } .q-trk-head .q-dc-thumb.q-qthumb { width: 72px; height: 72px; flex: 0 0 72px; border-radius: 10px; } .q-book-email { margin-top: var(--space-4); padding: var(--space-3) var(--space-4); border: 1px solid var(--color-border); border-radius: 10px; background: var(--color-surface-2); } .q-book-email-check { display: flex; gap: var(--space-2); align-items: flex-start; font-size: 13px; font-weight: 600; margin-bottom: var(--space-3); } .q-book-email-check input { margin-top: 3px; } .q-book-email .svc-field { margin-bottom: var(--space-2); } .q-confirm-email { margin-top: var(--space-4); padding: var(--space-3) var(--space-4); border: 1px solid var(--color-border); border-radius: 10px; background: var(--color-surface-2); } .q-confirm-email-title { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: var(--space-2); } .q-confirm-email-row { display: flex; gap: var(--space-2); flex-wrap: wrap; } .q-confirm-email-row select { flex: 1 1 220px; min-height: 40px; } .q-confirm-email-row .btn { min-height: 40px; padding: 0 22px; } @media (max-width: 640px) { .q-cards-table td.q-dc-host { padding: var(--space-3) !important; } .q-dc { grid-template-columns: 76px minmax(0, 1fr); gap: var(--space-3); padding: var(--space-3); } .q-dc-thumb.q-qthumb { width: 76px; height: 76px; } .q-dc-side { align-items: flex-start; flex-direction: row; flex-wrap: wrap; align-items: center; } .q-dc-meta { grid-template-columns: 1fr; } .q-dc-dhl .q-dhl-action-row > button, .q-dc-dhl .q-dhl-action-row > a { flex: 1 1 calc(50% - 8px); } } /* ========================================================================= Valuations: history cards, trade quote cards, quote age, convert workflow (Sam, 2026-10-12) ========================================================================= */ .q-type { display: inline-flex; align-items: center; min-height: 24px; padding: 2px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: 0.03em; white-space: nowrap; border: 1px solid transparent; } .q-type-comm { background: #14120B; color: #E8C785; } .q-type-out { background: #F1EADA; color: #5E4A1B; border-color: #DCCB9A; } .q-type-px { background: #E8EFEA; color: #2F5A3F; border-color: #B9CDBF; } .q-age { display: inline-flex; align-items: center; min-height: 24px; padding: 2px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; background: var(--color-surface-2); color: var(--color-text-muted); border: 1px solid var(--color-border); white-space: nowrap; } .q-age.is-old { background: #FBF1DC; color: #8A5A00; border-color: #E5C27A; } .q-stale-note { margin: var(--space-3) var(--space-5); padding: 10px 14px; border-radius: 10px; background: #FBF1DC; border: 1px solid #E5C27A; color: #6B4600; font-size: var(--text-sm); line-height: 1.45; } .q-ch-body .q-stale-note { margin: 0 0 var(--space-4); } .q-hc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 520px), 1fr)); gap: var(--space-4); padding: var(--space-1) 0; } .q-hc-grid-1 { grid-template-columns: 1fr; } .q-hc { display: flex; flex-direction: column; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 1px 2px rgba(20, 18, 11, 0.04); transition: border-color 0.15s, box-shadow 0.15s; } .q-hc:hover { border-color: #BA9545; box-shadow: 0 4px 14px rgba(20, 18, 11, 0.08); } .q-hc.is-stale { border-left: 4px solid #D9A441; } .q-hc-open { display: grid; grid-template-columns: 104px minmax(0, 1fr) auto; gap: var(--space-4); align-items: center; width: 100%; padding: var(--space-4); text-align: left; background: transparent; border: 0; cursor: pointer; color: inherit; font: inherit; } .q-hc-img { width: 104px; height: 104px; border-radius: 12px; overflow: hidden; border: 1px solid var(--color-border); background: var(--color-surface-2); display: flex; align-items: center; justify-content: center; } .q-hc-img img { width: 100%; height: 100%; object-fit: cover; display: block; } .q-hc-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .q-hc-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 2px; } .q-hc-title { font-family: var(--font-display); font-size: var(--text-base); font-weight: 600; overflow-wrap: anywhere; } .q-hc-line { font-size: var(--text-xs); color: var(--color-text-muted); overflow-wrap: anywhere; } .q-hc-side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; text-align: right; } .q-hc-value { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600; white-space: nowrap; } .q-hc-offer { font-size: 12px; color: var(--color-text-muted); } .q-hc-offer b { color: var(--color-text); } .q-hc-flag { margin: 0 var(--space-4); padding: 8px 12px; border-radius: 8px; background: #FBF1DC; border: 1px solid #E5C27A; color: #6B4600; font-size: 12.5px; line-height: 1.4; } .q-hc-foot { display: flex; flex-wrap: wrap; gap: var(--space-2); padding: var(--space-3) var(--space-4) var(--space-4); } .q-hc .q-hc-foot { border-top: 1px solid var(--color-divider); margin-top: var(--space-3); } .q-hc-flag + .q-hc-foot { margin-top: var(--space-3); } .btn.q-hc-btn { min-height: 38px; padding: 6px 16px; font-size: 12.5px; white-space: nowrap; } .q-hc-more { } .q-vd-stale { margin: var(--space-4) var(--space-5) 0; } .q-vd-foot { padding: var(--space-4) var(--space-5); gap: var(--space-3); } .q-vd-convert { border-top: 0; padding-top: 0; } .q-vd-convert .btn { min-height: 40px; padding: 8px 18px; } .q-vd-foot .btn { padding: 8px 18px; } .q-ch-card { width: min(760px, 100%); } .q-ch-body { padding: var(--space-4) var(--space-5) var(--space-5); overflow-y: auto; -webkit-overflow-scrolling: touch; } /* convert banner inside the New valuation modal */ .q-cv-banner { padding: var(--space-3) var(--space-4); border-radius: 10px; background: var(--color-surface-2); border: 1px solid var(--color-border); display: flex; flex-direction: column; gap: var(--space-2); } .q-cv-banner.is-stale { background: #FBF1DC; border-color: #E5C27A; } .q-cv-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-size: var(--text-sm); } .q-cv-warn { font-size: 13px; line-height: 1.45; color: #6B4600; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); align-items: center; } .q-cv-warn .btn { min-height: 36px; } /* Trade quote cards */ .q-pxl-list { padding: var(--space-4) var(--space-5) var(--space-5); } .q-tq-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 430px), 1fr)); gap: var(--space-4); } .q-tq { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: 0 1px 2px rgba(20, 18, 11, 0.04); min-width: 0; } .q-tq-head { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: space-between; align-items: flex-start; } .q-tq-who { min-width: 0; flex: 1 1 200px; display: flex; flex-direction: column; gap: 2px; } .q-tq-who > b { font-family: var(--font-display); font-size: var(--text-base); font-weight: 600; overflow-wrap: anywhere; } .q-tq-sub, .q-tq-contact { font-size: 12px; color: var(--color-text-muted); overflow-wrap: anywhere; } .q-tq-sub a, .q-tq-contact a { color: inherit; text-decoration: underline; text-decoration-color: #BA9545; } .q-tq-contact { display: flex; flex-wrap: wrap; gap: 2px 14px; } .q-tq-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .q-tq-watches { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); } .q-tq-w, .q-tq-buy { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: var(--space-3); align-items: center; padding: var(--space-2); background: var(--color-surface-2); border-radius: 10px; } .q-tq-buy { background: #F6F1E4; border: 1px solid #E6D9B4; } .q-tq-wimg { width: 64px; height: 64px; border-radius: 8px; overflow: hidden; border: 1px solid var(--color-border); background: var(--color-surface); display: flex; align-items: center; justify-content: center; } .q-tq-wimg img { width: 100%; height: 100%; object-fit: cover; display: block; } .q-tq-buyimg img { object-fit: contain; } .q-tq-wmeta { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 12px; color: var(--color-text-muted); } .q-tq-wmeta b { font-size: var(--text-sm); color: var(--color-text); overflow-wrap: anywhere; } .q-tq-wmeta a { color: inherit; text-decoration: underline; text-decoration-color: #BA9545; } .q-tq-k { font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; } .q-tq-woffer { display: flex; flex-direction: column; align-items: flex-end; font-size: 11px; color: var(--color-text-muted); } .q-tq-woffer b { font-size: var(--text-base); color: var(--color-text); font-family: var(--font-display); } .q-tq-sum { display: flex; flex-wrap: wrap; gap: 4px var(--space-5); font-size: var(--text-sm); padding-top: var(--space-2); border-top: 1px solid var(--color-divider); } .q-tq-notes { font-size: 12.5px; color: var(--color-text-muted); } .q-tq .q-hc-flag { margin: 0; } .q-tq-foot { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: space-between; align-items: center; padding-top: var(--space-3); border-top: 1px solid var(--color-divider); } .q-tq-status { display: flex; flex-wrap: wrap; gap: 6px; } .q-tq-status .svc-chip { min-height: 36px; padding: 0 14px; } .q-tq-btns { display: flex; flex-wrap: wrap; gap: var(--space-2); } .q-tq-btns .btn { min-height: 38px; padding: 6px 16px; } /* Panel chrome: keep every button off the border across the Valuations pages */ .q-al-head { padding: var(--space-4) var(--space-5); gap: var(--space-4); } .q-al-head .btn { min-height: 42px; padding: 0 22px; flex: 0 0 auto; } .q-al-tools { padding: var(--space-3) var(--space-5); } .q-hist-top { padding: var(--space-1) var(--space-2) var(--space-3); gap: var(--space-4); } .q-hist-actions { gap: var(--space-3); } .q-hist-top .btn { padding: 0 22px; } .q-hist-chips { padding: 0 var(--space-1); } .q-hist-more { padding: var(--space-4) 0 var(--space-2); } @media (max-width: 640px) { .q-hc-open { grid-template-columns: 76px minmax(0, 1fr); padding: var(--space-3); gap: var(--space-3); } .q-hc-img { width: 76px; height: 76px; } .q-hc-side { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; text-align: left; } .q-hc-foot { padding: var(--space-3); } .q-hc-flag { margin: 0 var(--space-3); } .q-tq-w, .q-tq-buy { grid-template-columns: 52px minmax(0, 1fr) auto; } .q-tq-wimg { width: 52px; height: 52px; } .q-pxl-list { padding: var(--space-3); } .q-al-head { padding: var(--space-3) var(--space-4); } } .q-dc-dhl > .q-dhl-btn-wrap { align-self: flex-start; } .q-dc-dhl .q-dhl-booked { align-items: stretch; } .q-dc-dhl .q-dhl-booked-badge { align-self: flex-start; } /* History page inner spacing: nothing sits on the card border */ .q-hist-list { padding: var(--space-4); } .q-hist-chips { padding: var(--space-2) var(--space-4); } .q-hist-stats { margin-left: var(--space-4); margin-right: var(--space-4); } .q-hist-more { padding: 0 var(--space-4) var(--space-5); } .q-hist-list .svc-empty { padding: var(--space-6) var(--space-4); } @media (max-width: 640px) { .q-hist-list { padding: var(--space-3); } .q-hist-chips { padding: var(--space-2) var(--space-3); } .q-hist-stats { margin-left: var(--space-3); margin-right: var(--space-3); } .q-hist-top { flex-direction: column; align-items: stretch; } .q-hist-actions .btn { flex: 1 1 0; } } /* ========================================================================= Collection cards: two symmetric action rows. Row 1 is the DHL actions, row 2 is Send email plus the conversions. Each row fills the card width and its buttons share it equally. ========================================================================= */ .q-dc-dhl .q-dhl-action-row, .q-dc-dhl .q-dhl-action-row.q-dhl-action-grid { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--space-2); width: 100%; margin-top: var(--space-1); align-items: stretch; } .q-dc-dhl .q-dhl-action-row > button, .q-dc-dhl .q-dhl-action-row > a, .q-dc-dhl .q-dhl-action-row.q-dhl-action-grid > button, .q-dc-dhl .q-dhl-action-row.q-dhl-action-grid > a { width: 100%; min-width: 0; min-height: 38px; padding: 6px 10px; font-size: 12.5px; white-space: normal; line-height: 1.25; text-align: center; justify-content: center; } .q-dc-row2 { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--space-2); width: 100%; align-items: stretch; } .q-dc-row2 > .btn, .q-dc-row2 .q-email-slot > .btn { width: 100%; min-width: 0; min-height: 38px; padding: 6px 10px; font-size: 12.5px; white-space: normal; line-height: 1.25; text-align: center; justify-content: center; } .q-dc-row2:empty { display: none; } .q-dc-dhl .q-email-slot .btn { min-height: 38px; padding: 6px 10px; } .q-btn-conv { font-weight: 600; } .q-dc-convs { display: flex; flex-direction: column; gap: var(--space-2); } .q-dc-conv { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border); border-radius: 10px; background: var(--color-surface-2); font-size: 12.5px; } .q-dc-conv-txt { flex: 1 1 200px; min-width: 0; overflow-wrap: anywhere; } .q-dc-conv-mail { flex: 0 0 auto; min-height: 32px; padding: 4px 14px; font-size: 12px; } @media (max-width: 640px) { .q-dc-dhl .q-dhl-action-row, .q-dc-dhl .q-dhl-action-row.q-dhl-action-grid { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-columns: auto; } .q-dc-dhl .q-dhl-action-row.q-dhl-action-grid > :last-child:nth-child(odd) { grid-column: 1 / -1; } .q-dc-row2 { grid-auto-flow: row; grid-template-columns: minmax(0, 1fr); grid-auto-columns: auto; } .q-dc-dhl .q-dhl-action-row > button, .q-dc-dhl .q-dhl-action-row > a { flex: none; } } /* ========================================================================== Insured Collections & Appointments redesign (Sam, 2026-10-13) Hero banner with refresh, a six-step process bar replacing the four big count tiles and the small tabs, and one card per client for Appointments. Black / ivory / gold, matching the Deliveries banner and the collection cards. ========================================================================== */ #viewQuoting.qa-hero-page > .dd-page-header { display: none; } .qa-hero { position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: 168px; margin-bottom: var(--space-4); padding: 24px 32px; border-radius: var(--radius-lg, 16px); overflow: hidden; isolation: isolate; background: #0b0b0c; } .qa-hero::before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 66%; z-index: -2; background: url('../assets/hero-appointments.webp?v=20261014') 50% 50% / cover no-repeat; } .qa-hero::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(11, 11, 12, 0.97) 0%, rgba(11, 11, 12, 0.88) 36%, rgba(11, 11, 12, 0.35) 62%, rgba(11, 11, 12, 0.05) 100%); } .qa-hero-copy { min-width: 0; max-width: 520px; } .qa-eyebrow { margin: 0 0 6px; font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: #d4af6a; } .qa-title { margin: 0; font-family: var(--font-display); font-size: 1.6rem; line-height: 1.15; font-weight: 700; color: #faf7ef; letter-spacing: -0.01em; text-wrap: balance; } .qa-sub { margin: 8px 0 0; font-size: var(--text-sm); line-height: 1.45; color: rgba(250, 247, 239, 0.78); } .qa-hero-actions { display: flex; align-items: center; gap: 12px; align-self: flex-start; flex: 0 0 auto; } .qa-updated { font-size: 12px; color: rgba(250, 247, 239, 0.82); text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6); white-space: nowrap; } .qa-refresh { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; cursor: pointer; background: rgba(11, 11, 12, 0.72); color: #e8c785; border: 1px solid #d4af6a; backdrop-filter: blur(4px); } .qa-refresh svg { width: 18px; height: 18px; } @media (hover: hover) and (pointer: fine) { .qa-refresh:hover { background: #d4af6a; color: #14110d; } } .qa-refresh:focus-visible { outline: 2px solid #e8c785; outline-offset: 2px; } .qa-refresh.is-spinning svg { animation: qa-spin 0.9s linear infinite; } @keyframes qa-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .qa-refresh.is-spinning svg { animation-duration: 2.4s; } } /* ---- six-step process bar ---- */ .qa-steps { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin-bottom: var(--space-4); } .qa-step { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "n count" "main main"; align-items: center; row-gap: 8px; min-height: 92px; padding: 12px 14px; text-align: left; font: inherit; color: var(--color-text); cursor: pointer; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 12px; box-shadow: 0 1px 2px rgba(20, 18, 11, 0.04); -webkit-tap-highlight-color: transparent; transition: border-color 0.12s ease, box-shadow 0.12s ease, transform 0.12s ease; } .qa-step-n { grid-area: n; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; font-size: 12px; font-weight: 700; background: var(--color-surface-offset); color: var(--color-text-muted); } .qa-step-main { grid-area: main; display: flex; flex-direction: column; min-width: 0; gap: 2px; } .qa-step-label { font-size: 13.5px; font-weight: 700; line-height: 1.2; overflow-wrap: break-word; } .qa-step-hint { font-size: 11.5px; line-height: 1.25; color: var(--color-text-muted); overflow-wrap: break-word; } .qa-step-count { grid-area: count; justify-self: end; font-family: var(--font-display); font-size: 1.6rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; color: var(--color-text); } .qa-step.qa-tone-bad .qa-step-count { color: #9b2c2c; } .qa-step.qa-tone-bad .qa-step-hint { color: #9b2c2c; font-weight: 600; } @media (hover: hover) and (pointer: fine) { .qa-step:hover { border-color: #d4af6a; transform: translateY(-1px); } } .qa-step:focus-visible { outline: 2px solid #b8923f; outline-offset: 2px; } .qa-step.active { background: #14110d; border-color: #d4af6a; box-shadow: 0 0 0 1px #d4af6a, 0 6px 16px rgba(20, 17, 13, 0.22); color: #faf7ef; } .qa-step.active .qa-step-n { background: #d4af6a; color: #14110d; } .qa-step.active .qa-step-hint { color: rgba(250, 247, 239, 0.72); font-weight: 400; } .qa-step.active .qa-step-count { color: #e8c785; } @media (max-width: 1180px) { .qa-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 560px) { .qa-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .qa-step { padding: 9px 10px; min-height: 76px; row-gap: 6px; } .qa-step-hint { display: none; } .qa-step-count { font-size: 1.3rem; } } /* ---- hero on small screens ---- */ @media (max-width: 720px) { .qa-hero { min-height: 150px; padding: 18px 18px; align-items: flex-start; } .qa-hero::before { width: 100%; opacity: 0.8; } .qa-hero::after { background: linear-gradient(90deg, rgba(11, 11, 12, 0.95) 0%, rgba(11, 11, 12, 0.78) 55%, rgba(11, 11, 12, 0.35) 100%); } .qa-title { font-size: 1.3rem; } .qa-sub { display: none; } .qa-updated { display: none; } } /* ---- appointment cards ---- */ .qa-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 560px), 1fr)); } .qa-card { align-items: start; } .qa-card-missed { border-left: 4px solid #b94a48; } .qa-card.q-dc-attn:not(.qa-card-missed) { border-left: 4px solid var(--color-warning); } .qa-thumbs { display: grid; gap: 6px; width: 112px; grid-template-columns: repeat(2, 1fr); } .qa-thumb.q-qthumb { width: 100%; height: auto; aspect-ratio: 1; border-radius: 9px; } .qa-thumbs-2 { grid-template-columns: 1fr; } .qa-thumbs-2 .qa-thumb.q-qthumb { aspect-ratio: 1.45; } .qa-count-badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-family: var(--font-body, inherit); font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; background: #14110d; color: #e8c785; } .qa-watches { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 3px; font-size: var(--text-sm); color: var(--color-text-muted); } .qa-watches li { display: flex; justify-content: space-between; gap: 10px; } .qa-watches li span { min-width: 0; overflow-wrap: anywhere; } .qa-watches li b { font-weight: 600; color: var(--color-text); white-space: nowrap; } .qa-pill { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; white-space: nowrap; border: 1px solid transparent; } .qa-pill-urgent { background: #14110d; color: #e8c785; border-color: #3a321f; } .qa-pill-bad { background: #fbeaea; color: #9b2c2c; border-color: #efc4c4; } .qa-pill-good { background: #e6f2e9; color: #2d6a3e; border-color: #bcdcc6; } .qa-pill-muted { background: var(--color-surface-offset); color: var(--color-text-muted); border-color: var(--color-border); } .qa-miss { display: inline-block; margin-top: 3px; font-size: 11.5px; font-weight: 700; color: #9b2c2c; } .qa-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .qa-actions > .btn, .qa-actions .qa-slot > .btn { display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 38px; padding: 6px 12px; font-size: 13px; line-height: 1.2; white-space: nowrap; text-align: center; } .qa-actions .qa-slot { display: flex; margin: 0; } .qa-actions .qa-slot:empty { display: none; } .qa-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; } .qa-foot .q-cancel-sale-link { margin: 0; padding: 0; background: none; border: 0; border-bottom: 1px dotted #c98d8d; border-radius: 0; color: #9b2c2c; font-size: 12px; font-weight: 500; min-height: 0; box-shadow: none; } .qa-link { background: none; border: 0; padding: 0; font: inherit; font-size: 12px; color: var(--color-text-muted); cursor: pointer; border-bottom: 1px dotted var(--color-border); } .qa-link:hover { color: var(--color-brass, #9E7E3A); } .qa-with { display: grid; gap: 6px; padding: 8px 10px; border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-surface-2); } .qa-with-row { display: flex; align-items: center; gap: 8px; font-size: 13px; } @media (max-width: 640px) { .qa-thumbs { width: 76px; } .qa-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); } .qa-actions > .btn, .qa-actions .qa-slot > .btn { white-space: normal; padding: 6px 8px; line-height: 1.15; min-height: 40px; } .qa-card { grid-template-columns: minmax(0, 1fr); } .qa-card .qa-thumbs { width: auto; display: flex; gap: 8px; } .qa-card .qa-thumb.q-qthumb { width: 64px; height: 64px; aspect-ratio: auto; flex: 0 0 64px; } } /* ========================================================================== Valuations redesign (Sam, 2026-10-13) Hero banner, filter steps, one card per enquiry; the same black / ivory / gold language as the Appointments and Part Exchanges pages. Covers the Valuations queue, Part exchange requests and the history page. ========================================================================== */ #viewQuoting.qv-page > .dd-page-header { display: none; } .qv-root { display: block; } .qv-hero { position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: 176px; margin-bottom: var(--space-4); padding: 26px 32px; border-radius: var(--radius-lg, 16px); overflow: hidden; isolation: isolate; background: #0b0b0c; } .qv-hero::before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 72%; z-index: -2; background: url('../assets/hero-valuations.webp?v=20261013') 58% 50% / cover no-repeat; } .qv-hero::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(11, 11, 12, 0.97) 0%, rgba(11, 11, 12, 0.9) 36%, rgba(11, 11, 12, 0.45) 64%, rgba(11, 11, 12, 0.08) 100%); } .qv-hero-copy { min-width: 0; max-width: 520px; } .qv-eyebrow { margin: 0 0 6px; font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: #d4af6a; } .qv-title { margin: 0; font-family: var(--font-display); font-size: 1.75rem; line-height: 1.12; font-weight: 700; color: #faf7ef; letter-spacing: -0.01em; text-wrap: balance; } .qv-sub { margin: 8px 0 0; font-size: var(--text-sm); line-height: 1.5; color: rgba(250, 247, 239, 0.8); } .qv-hero-actions { display: flex; align-items: center; gap: 10px; align-self: flex-start; flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-end; } .qv-hbtn { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border-radius: 999px; cursor: pointer; font: inherit; font-weight: 600; font-size: 13.5px; white-space: nowrap; background: rgba(11, 11, 12, 0.72); color: #faf7ef; border: 1px solid rgba(212, 175, 106, 0.7); backdrop-filter: blur(4px); } .qv-hbtn-gold { background: #d4af6a; color: #14110d; border-color: #d4af6a; } .qv-refresh { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; cursor: pointer; padding: 0; background: rgba(11, 11, 12, 0.72); color: #e8c785; border: 1px solid #d4af6a; backdrop-filter: blur(4px); } .qv-refresh svg { width: 18px; height: 18px; } .qv-refresh.is-spinning svg { animation: qa-spin 0.9s linear infinite; } @media (hover: hover) and (pointer: fine) { .qv-hbtn:hover { border-color: #e8c785; background: rgba(40, 33, 20, 0.85); } .qv-hbtn-gold:hover { background: #e8c785; } .qv-refresh:hover { background: #d4af6a; color: #14110d; } } .qv-hbtn:focus-visible, .qv-refresh:focus-visible { outline: 2px solid #e8c785; outline-offset: 2px; } /* ---- page switch ---- */ .qv-tabs { display: inline-flex; gap: 2px; padding: 3px; margin-bottom: var(--space-4); background: var(--color-surface-offset); border-radius: 12px; max-width: 100%; overflow-x: auto; scrollbar-width: none; } .qv-tabs::-webkit-scrollbar { display: none; } .qv-tab { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border: 0; border-radius: 9px; background: transparent; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--color-text-muted); cursor: pointer; white-space: nowrap; } .qv-tab.on { background: #14110d; color: #faf7ef; } .qv-tab-n { display: inline-block; min-width: 20px; padding: 0 6px; border-radius: 999px; background: #e9e1cd; color: #5a4713; font-size: 11.5px; font-weight: 700; line-height: 20px; text-align: center; font-variant-numeric: tabular-nums; } .qv-tab-n[hidden] { display: none; } .qv-tab.on .qv-tab-n { background: #d4af6a; color: #14110d; } .qv-tab:focus-visible { outline: 2px solid #b8923f; outline-offset: 2px; } /* ---- filter steps ---- */ .qv-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: var(--space-4); } .qv-steps-2 { grid-template-columns: repeat(2, minmax(0, 320px)); } .qv-step { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "n count" "main main"; align-items: center; row-gap: 8px; min-height: 88px; padding: 12px 14px; text-align: left; font: inherit; color: var(--color-text); cursor: pointer; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 12px; box-shadow: 0 1px 2px rgba(20, 18, 11, 0.04); -webkit-tap-highlight-color: transparent; transition: border-color 0.12s ease, box-shadow 0.12s ease, transform 0.12s ease; } .qv-step-n { grid-area: n; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; font-size: 12px; font-weight: 700; background: var(--color-surface-offset); color: var(--color-text-muted); } .qv-step-count { grid-area: count; justify-self: end; font-family: var(--font-display); font-size: 1.6rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; } .qv-step-main { grid-area: main; display: flex; flex-direction: column; gap: 2px; min-width: 0; } .qv-step-label { font-size: 13.5px; font-weight: 700; line-height: 1.2; } .qv-step-hint { font-size: 11.5px; line-height: 1.25; color: var(--color-text-muted); } .qv-step.qv-tone-bad .qv-step-count { color: #9b2c2c; } .qv-step.qv-tone-bad .qv-step-hint { color: #9b2c2c; font-weight: 600; } @media (hover: hover) and (pointer: fine) { .qv-step:hover { border-color: #d4af6a; transform: translateY(-1px); } } .qv-step:focus-visible { outline: 2px solid #b8923f; outline-offset: 2px; } .qv-step.active { background: #14110d; border-color: #d4af6a; box-shadow: 0 0 0 1px #d4af6a, 0 6px 16px rgba(20, 17, 13, 0.22); color: #faf7ef; } .qv-step.active .qv-step-n { background: #d4af6a; color: #14110d; } .qv-step.active .qv-step-hint { color: rgba(250, 247, 239, 0.72); font-weight: 400; } .qv-step.active .qv-step-count { color: #e8c785; } /* ---- toolbar ---- */ .qv-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; } .qv-search { position: relative; flex: 1 1 320px; min-width: 220px; display: flex; align-items: center; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 12px; padding: 0 12px; min-height: 44px; } .qv-search svg { width: 18px; height: 18px; flex: 0 0 auto; color: var(--color-text-muted); margin-right: 8px; } .qv-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; box-shadow: none; font: inherit; font-size: 14px; color: var(--color-text); padding: 10px 0; } .qv-search:focus-within { border-color: #b8923f; box-shadow: 0 0 0 3px rgba(186, 149, 69, 0.18); } .qv-sort { min-height: 44px; border: 1px solid var(--color-border); border-radius: 12px; background: var(--color-surface); font: inherit; font-size: 13.5px; padding: 0 12px; color: var(--color-text); } .qv-count { font-size: 12.5px; color: var(--color-text-muted); margin: 4px 2px 10px; min-height: 18px; } .qv-filters { display: flex; flex-wrap: wrap; gap: 8px 14px; margin: 2px 0 6px; } .qv-seg { display: inline-flex; flex-wrap: wrap; padding: 3px; gap: 2px; background: var(--color-surface-offset); border-radius: 12px; } .qv-seg .svc-chip { border: 0; background: transparent; box-shadow: none; border-radius: 9px; font-size: 13px; font-weight: 600; color: var(--color-text-muted); padding: 0 12px; min-height: 36px; } .qv-seg .svc-chip.svc-active { background: #14110d; color: #faf7ef; } /* ---- enquiry cards ---- */ .qv-list { display: grid; gap: 14px; } .qv-card { display: grid; grid-template-columns: 112px minmax(0, 1fr) auto; gap: 18px; align-items: center; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 16px; box-shadow: 0 1px 3px rgba(20, 18, 11, 0.05); padding: 16px 18px; cursor: pointer; transition: border-color 0.12s ease, box-shadow 0.12s ease; content-visibility: auto; contain-intrinsic-size: auto 150px; } @media (hover: hover) and (pointer: fine) { .qv-card:hover { border-color: #d4af6a; box-shadow: 0 6px 18px rgba(20, 18, 11, 0.08); } } .qv-card:focus-visible { outline: 2px solid #b8923f; outline-offset: 2px; } .qv-card.is-attn { border-left: 4px solid #b94a48; } .qv-photo { position: relative; width: 112px; height: 112px; border-radius: 14px; overflow: hidden; background: #f3f0e8; border: 1px solid var(--color-border); display: flex; align-items: center; justify-content: center; } .qv-photo img { width: 100%; height: 100%; object-fit: cover; display: block; } .qv-photo .q-thumb-count { right: 6px; bottom: 6px; } .qv-main { min-width: 0; display: grid; gap: 6px; } .qv-head { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; flex-wrap: wrap; } .qv-name { margin: 0; font-family: var(--font-display); font-size: 1.12rem; line-height: 1.2; font-weight: 700; color: var(--color-text); overflow-wrap: anywhere; } .qv-chips, .qv-tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .qv-meta { display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: 12px; color: var(--color-text-muted); } .qv-meta span { overflow-wrap: anywhere; } .qv-watch { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 14.5px; } .qv-watch b { font-weight: 700; overflow-wrap: anywhere; } .qv-watch span { color: var(--color-text-muted); font-size: 13px; font-variant-numeric: tabular-nums; } .qv-attn { font-size: 12.5px; font-weight: 600; color: #9b2c2c; } .qv-side { display: grid; gap: 10px; justify-items: end; align-content: center; min-width: 168px; } .qv-val { display: grid; justify-items: end; gap: 1px; text-align: right; } .qv-val b { font-family: var(--font-display); font-size: 1.35rem; font-variant-numeric: tabular-nums; line-height: 1.1; } .qv-val span { font-size: 11.5px; color: var(--color-text-muted); } .qv-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700; line-height: 1.5; border: 1px solid transparent; } .qv-chip-warn { background: #fbf1d9; color: #7a5a12; border-color: #ecd49a; } .qv-chip-bad { background: #f8e4e4; color: #8d2f2f; border-color: #e8bcbc; } .qv-chip-muted { background: var(--color-surface-offset); color: var(--color-text-muted); border-color: var(--color-border); } .qv-tags .q-cond { font-size: 11.5px; } .qv-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 40px; padding: 0 16px; border-radius: 10px; cursor: pointer; white-space: nowrap; font: inherit; font-size: 13px; font-weight: 600; color: var(--color-text); background: var(--color-surface); border: 1px solid var(--color-border); } .qv-btn-primary { background: #14110d; color: #faf7ef; border-color: #14110d; } @media (hover: hover) and (pointer: fine) { .qv-btn-primary:hover { background: #2a2418; } } .qv-empty { text-align: center; padding: 48px 20px; background: var(--color-surface); border: 1px dashed var(--color-border); border-radius: 16px; color: var(--color-text-muted); } .qv-empty b { display: block; font-size: 1.05rem; color: var(--color-text); margin-bottom: 4px; } .qv-skel { grid-template-columns: 112px 1fr 160px; min-height: 144px; cursor: default; } .qv-skel i { display: block; border-radius: 12px; background: linear-gradient(100deg, #f1ede2 30%, #faf7ef 50%, #f1ede2 70%); background-size: 200% 100%; animation: qv-shimmer 1.2s linear infinite; } @keyframes qv-shimmer { to { background-position: -200% 0; } } /* ---- Part exchange request cards, same family ---- */ .qv-root .q-pxr-list { padding: 0; gap: 14px; } .qv-root .q-pxr-item { border-radius: 16px; box-shadow: 0 1px 3px rgba(20, 18, 11, 0.05); border: 1px solid var(--color-border); transition: border-color 0.12s ease, box-shadow 0.12s ease; content-visibility: auto; contain-intrinsic-size: auto 320px; } @media (hover: hover) and (pointer: fine) { .qv-root .q-pxr-item:hover { border-color: #d4af6a; box-shadow: 0 6px 18px rgba(20, 18, 11, 0.08); } } .qv-root .q-pxr-item.is-quoted { border-left: 4px solid #2f7d4f; } .qv-root .q-pxr-head { background: var(--color-surface); border-bottom: 1px solid var(--color-border); padding: 16px 20px 12px; } .qv-root .q-pxr-client b { font-family: var(--font-display); font-size: 1.12rem; font-weight: 700; } .qv-root .q-pxr-badges .svc-chip { border-radius: 999px; font-weight: 700; } .qv-root .q-pxr-cols { padding: 18px 20px; } .qv-root .q-pxr-sec { font-size: 10.5px; letter-spacing: 0.12em; font-weight: 700; color: var(--color-text-muted); } .qv-root .q-pxr-buy { grid-template-columns: 112px minmax(0, 1fr); } .qv-root .q-pxr-buy-img { width: 112px; height: 112px; border-radius: 14px; background: #f3f0e8; } .qv-root .q-pxr-ph { border-radius: 10px; } .qv-root .q-pxr-price { font-family: var(--font-display); font-size: 1.15rem; } .qv-root .q-pxr-flag { border-radius: 999px; background: #fbf1d9; border-color: #ecd49a; color: #7a5a12; font-weight: 600; } .qv-root .q-pxr-actions { padding: 12px 20px 14px; background: var(--color-surface); } .qv-root .q-pxr-actions .btn { min-height: 40px; border-radius: 10px; font-size: 13px; font-weight: 600; } .qv-root .q-pxr-actions .btn-primary { background: #14110d; color: #faf7ef; border-color: #14110d; } /* ---- History page, same family ---- */ .qv-root .q-hist-list { margin-top: 6px; padding: 0; } .qv-root .q-hc-grid { padding: 0; } .qv-root .q-hc-chips .svc-chip, .qv-root .q-hc-chips .q-type { font-size: 11.5px; min-height: 0; height: auto; padding: 3px 10px; line-height: 1.5; border-radius: 999px; font-weight: 700; } .qv-root .q-hc-grid { gap: 14px; } .qv-root .q-hc { border-radius: 16px; box-shadow: 0 1px 3px rgba(20, 18, 11, 0.05); transition: border-color 0.12s ease, box-shadow 0.12s ease; content-visibility: auto; contain-intrinsic-size: auto 150px; } @media (hover: hover) and (pointer: fine) { .qv-root .q-hc:hover { border-color: #d4af6a; box-shadow: 0 6px 18px rgba(20, 18, 11, 0.08); } } .qv-root .q-hc-title { font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; } .qv-root .q-hc-value { font-family: var(--font-display); } .qv-root .q-hist-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; margin: 4px 0 12px; padding: 14px 8px; border: 0; border-radius: 14px; background: #14110d; color: #faf7ef; } .qv-root .q-hist-stats > div { padding: 0 14px; border-left: 1px solid rgba(212, 175, 106, 0.3); display: grid; gap: 2px; } .qv-root .q-hist-stats > div:first-child { border-left: 0; } .qv-root .q-hist-stats span { font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(250, 247, 239, 0.65); } .qv-root .q-hist-stats b { font-family: var(--font-display); font-size: 1.25rem; color: #e8c785; font-variant-numeric: tabular-nums; } .qv-root .q-hist-more { display: flex; justify-content: center; margin: 16px 0 8px; } /* Trade quotes overlay cards pick up the same polish */ .q-tq { border-radius: 16px; } @media (hover: hover) and (pointer: fine) { .q-tq:hover { border-color: #d4af6a; } } /* ---- responsive ---- */ @media (max-width: 1180px) { .qv-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } .qv-card { grid-template-columns: 96px minmax(0, 1fr); } .qv-photo { width: 96px; height: 96px; } .qv-side { grid-column: 1 / -1; grid-template-columns: 1fr auto; justify-items: stretch; align-items: center; min-width: 0; padding-top: 12px; border-top: 1px solid var(--color-border); } .qv-val { justify-items: start; text-align: left; } .qv-root .q-hist-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 12px; } .qv-root .q-hist-stats > div:nth-child(4) { border-left: 0; } } @media (max-width: 720px) { .qv-hero { min-height: 150px; padding: 18px; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 14px; } .qv-hero::before { width: 100%; opacity: 0.75; } .qv-hero::after { background: linear-gradient(90deg, rgba(11, 11, 12, 0.95) 0%, rgba(11, 11, 12, 0.78) 55%, rgba(11, 11, 12, 0.4) 100%); } .qv-title { font-size: 1.35rem; } .qv-sub { display: none; } .qv-hero-actions { justify-content: flex-start; align-self: stretch; } .qv-hbtn { padding: 0 14px; min-height: 40px; } .qv-tabs { display: flex; width: 100%; } .qv-tab { flex: 1 1 0; justify-content: center; padding: 0 10px; font-size: 13px; } .qv-root .q-pxr-cols { padding: 14px; } .qv-root .q-pxr-col-buy { padding-left: 0; border-left: 0; } .qv-root .q-pxr-head, .qv-root .q-pxr-actions { padding-left: 14px; padding-right: 14px; } .qv-root .q-pxr-buy { grid-template-columns: 88px minmax(0, 1fr); } .qv-root .q-pxr-buy-img { width: 88px; height: 88px; } } @media (max-width: 560px) { .qv-steps, .qv-steps-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .qv-step { padding: 9px 10px; min-height: 76px; row-gap: 6px; } .qv-step-hint { display: none; } .qv-step-count { font-size: 1.3rem; } .qv-card { padding: 14px; gap: 12px; grid-template-columns: 80px minmax(0, 1fr); } .qv-photo { width: 80px; height: 80px; border-radius: 12px; } .qv-side { grid-template-columns: minmax(0, 1fr); gap: 10px; } .qv-btn { width: 100%; } .qv-search { flex-basis: 100%; } .qv-sort { width: 100%; } .qv-seg { width: 100%; } .qv-seg .svc-chip { flex: 1 1 auto; padding: 0 8px; } .qv-root .q-hist-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .qv-root .q-hist-stats > div:nth-child(odd) { border-left: 0; } .qv-skel { grid-template-columns: 80px 1fr; } .qv-skel i:nth-child(3) { display: none; } } /* ========================================================================== Quoting dashboard (Sam, 2026-10-13) A hub for the whole Quoting area: hero, one live tile per sub-tab, pipeline, needs attention, the diary, the oldest enquiries, latest quotes and activity. ========================================================================== */ .qv-hero-dash::before { background: url('../assets/hero-quoting.webp?v=20261013') 60% 44% / cover no-repeat; } .qd-root .qv-hero { margin-bottom: var(--space-5, 20px); } /* ---- hub tiles ---- */ .qd-hub { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: var(--space-5, 20px); } .qd-tile { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-height: 148px; padding: 16px 18px 14px; text-align: left; font: inherit; color: var(--color-text); cursor: pointer; overflow: hidden; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 16px; box-shadow: 0 1px 3px rgba(20, 18, 11, 0.05); -webkit-tap-highlight-color: transparent; transition: border-color 0.12s ease, box-shadow 0.12s ease, transform 0.12s ease; } .qd-tile::before { content: ''; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 0 3px 3px 0; background: #d4af6a; opacity: 0.0; } .qd-tone-bad::before { background: #b94a48; opacity: 1; } .qd-tone-warn::before { background: #c9962f; opacity: 1; } .qd-tone-good::before { background: #3f8a5a; opacity: 1; } .qd-tone-info::before { background: #d4af6a; opacity: 1; } @media (hover: hover) and (pointer: fine) { .qd-tile:hover { border-color: #d4af6a; box-shadow: 0 8px 22px rgba(20, 18, 11, 0.1); transform: translateY(-2px); } .qd-tile:hover .qd-tile-go { background: #14110d; color: #e8c785; } } .qd-tile:focus-visible { outline: 2px solid #b8923f; outline-offset: 2px; } .qd-tile-top { display: flex; align-items: center; justify-content: space-between; width: 100%; margin-bottom: 6px; } .qd-ico { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; background: #14110d; color: #e8c785; } .qd-ico svg { width: 19px; height: 19px; } .qd-tile-go { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--color-surface-offset); color: var(--color-text-muted); transition: background 0.12s ease, color 0.12s ease; } .qd-tile-go svg { width: 14px; height: 14px; } .qd-tile-label { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-muted); } .qd-tile-fig { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; min-width: 0; max-width: 100%; } .qd-tile-fig b { font-family: var(--font-display); font-size: 2.1rem; line-height: 1; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--color-text); } .qd-tile-fig b.is-small { font-size: 1.5rem; } .qd-tile-fig i { font-style: normal; font-size: 13px; font-weight: 600; color: var(--color-text); } .qd-tone-bad .qd-tile-fig b { color: #9b2c2c; } .qd-tile-sub { margin-top: auto; padding-top: 6px; font-size: 12.5px; line-height: 1.35; color: var(--color-text-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* ---- cards ---- */ .qd-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 16px; box-shadow: 0 1px 3px rgba(20, 18, 11, 0.05); padding: 18px 20px; min-width: 0; } .qd-card-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; } .qd-card-h h3 { margin: 0; font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; letter-spacing: -0.005em; } .qd-card-h p { margin: 3px 0 0; font-size: 12.5px; color: var(--color-text-muted); line-height: 1.4; } .qd-link { flex: 0 0 auto; border: 1px solid var(--color-border); background: transparent; border-radius: 999px; padding: 0 14px; min-height: 34px; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--color-text); cursor: pointer; white-space: nowrap; } @media (hover: hover) and (pointer: fine) { .qd-link:hover { border-color: #d4af6a; background: #faf6ea; } } .qd-link:focus-visible { outline: 2px solid #b8923f; outline-offset: 2px; } .qd-cols { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 14px; margin-bottom: 14px; } .qd-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .qd-pipeline { margin-bottom: 14px; } /* ---- pipeline ---- */ .qd-flow { display: grid; grid-template-columns: 3fr 3fr 3.3fr 2fr; gap: 12px; } .qd-flow-group { min-width: 0; position: relative; } .qd-flow-gh { font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #8a6d2a; margin-bottom: 8px; padding-bottom: 6px; border-bottom: 1px solid var(--color-border); } .qd-flow-tiles { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; } .qd-stage { display: flex; flex-direction: column; gap: 4px; padding: 10px 8px 9px; text-align: left; font: inherit; color: inherit; min-width: 0; background: #faf8f2; border: 1px solid var(--color-border); border-radius: 12px; cursor: pointer; transition: border-color 0.12s ease, transform 0.12s ease; } div.qd-stage { cursor: default; } @media (hover: hover) and (pointer: fine) { button.qd-stage:hover { border-color: #d4af6a; transform: translateY(-1px); } } .qd-stage:focus-visible { outline: 2px solid #b8923f; outline-offset: 2px; } .qd-stage-n { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; } .qd-stage-l { font-size: 11px; font-weight: 700; line-height: 1.2; min-height: 2.4em; color: var(--color-text); overflow-wrap: normal; word-break: normal; hyphens: auto; } .qd-stage-bar { display: block; height: 4px; border-radius: 4px; background: #ece6d6; overflow: hidden; } .qd-stage-bar i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, #b8923f, #e8c785); } .qd-stage-m { font-size: 11px; color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .qd-stage.is-zero { background: transparent; } .qd-stage.is-zero .qd-stage-n { color: #b8b2a2; } .qd-stage.is-late { border-color: #e2b9b6; background: #fbf1f0; } .qd-stage.is-late .qd-stage-m { color: #9b2c2c; font-weight: 600; } /* ---- list rows ---- */ .qd-rows { display: grid; gap: 2px; } .qd-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 10px 10px; margin: 0 -10px; width: calc(100% + 20px); text-align: left; font: inherit; color: inherit; background: transparent; border: 0; border-radius: 10px; cursor: pointer; border-bottom: 1px solid #f0ece0; } .qd-row:last-child { border-bottom-color: transparent; } @media (hover: hover) and (pointer: fine) { .qd-row:hover { background: #faf6ea; } } .qd-row:focus-visible { outline: 2px solid #b8923f; outline-offset: -2px; } .qd-row-main { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .qd-row-main b { font-size: 14px; font-weight: 700; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .qd-row-main span { font-size: 12.5px; color: var(--color-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .qd-row-main em { font-style: normal; font-size: 12px; font-weight: 600; color: #9b2c2c; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .qd-row-side { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-end; } .qd-days { min-width: 34px; text-align: right; font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; font-variant-numeric: tabular-nums; color: #9b2c2c; } .qd-money { font-family: var(--font-display); font-size: 0.98rem; font-variant-numeric: tabular-nums; } .qd-ok { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 26px 12px; text-align: center; color: var(--color-text-muted); font-size: 13px; } .qd-ok svg { width: 30px; height: 30px; color: #3f8a5a; margin-bottom: 4px; } .qd-ok b { color: var(--color-text); font-size: 14px; } /* ---- diary ---- */ .qd-sched { display: grid; gap: 12px; } .qd-day-h { display: flex; align-items: center; justify-content: space-between; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-muted); padding-bottom: 6px; border-bottom: 1px solid var(--color-border); margin-bottom: 4px; } .qd-day-h span { display: inline-block; min-width: 20px; padding: 0 6px; border-radius: 999px; background: #e9e1cd; color: #5a4713; font-size: 11px; line-height: 20px; text-align: center; letter-spacing: 0; } .qd-day-h.is-today { color: #8a6d2a; } .qd-day-h.is-today span { background: #d4af6a; color: #14110d; } .qd-ev { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 6px; font: inherit; color: inherit; text-align: left; background: transparent; border: 0; border-radius: 10px; cursor: pointer; } @media (hover: hover) and (pointer: fine) { .qd-ev:hover { background: #faf6ea; } } .qd-ev:focus-visible { outline: 2px solid #b8923f; outline-offset: -2px; } .qd-ev-ico { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex: 0 0 auto; border-radius: 10px; background: #f3efe3; color: #6f5a22; } .qd-ev-ico svg { width: 18px; height: 18px; } .qd-ev-appointment .qd-ev-ico { background: #14110d; color: #e8c785; } .qd-ev-main { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; } .qd-ev-main b { font-size: 13.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .qd-ev-main span { font-size: 12.5px; color: var(--color-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .qd-ev-when { flex: 0 0 auto; font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--color-text); } .qd-ev.is-late .qd-ev-when { color: #9b2c2c; } .qd-ev.is-late .qd-ev-ico { background: #fbe9e7; color: #9b2c2c; } /* ---- quotes strip and activity ---- */ .qd-mini { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 10px; } .qd-mini div { padding: 8px 10px; border-radius: 10px; background: #faf8f2; border: 1px solid var(--color-border); min-width: 0; } .qd-mini b { display: block; font-family: var(--font-display); font-size: 1.05rem; font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .qd-mini span { display: block; font-size: 11px; line-height: 1.25; color: var(--color-text-muted); } .qd-acts { display: grid; gap: 2px; } .qd-act { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 9px 0; border-bottom: 1px solid #f0ece0; } .qd-act:last-child { border-bottom-color: transparent; } .qd-act-dot { width: 8px; height: 8px; margin-top: 6px; border-radius: 50%; background: #d4af6a; } .qd-act-main { display: flex; flex-direction: column; min-width: 0; } .qd-act-main b { font-size: 13px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .qd-act-main span { font-size: 12px; color: var(--color-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .qd-act-who { display: flex; flex-direction: column; align-items: flex-end; font-size: 12px; font-weight: 600; } .qd-act-who em { font-style: normal; font-weight: 400; color: var(--color-text-muted); font-size: 11.5px; white-space: nowrap; } /* ---- responsive ---- */ @media (max-width: 1280px) { .qd-hub { grid-template-columns: repeat(2, minmax(0, 1fr)); } .qd-cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .qd-cols-3 > :last-child { grid-column: 1 / -1; } } @media (max-width: 980px) { .qd-cols { grid-template-columns: minmax(0, 1fr); } .qd-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 720px) { .qd-cols-3 { grid-template-columns: minmax(0, 1fr); } .qd-card { padding: 16px; } .qd-row { padding: 10px 8px; margin: 0 -8px; width: calc(100% + 16px); } .qd-card-h { flex-wrap: wrap; } } @media (max-width: 560px) { .qd-hub { gap: 10px; } .qd-tile { min-height: 132px; padding: 14px 14px 12px; } .qd-tile-fig b { font-size: 1.8rem; } .qd-tile-fig b.is-small { font-size: 1.25rem; } .qd-tile-fig i { font-size: 12px; } .qd-flow { grid-template-columns: minmax(0, 1fr); gap: 12px; } .qd-row-side .qv-chip-muted { display: none; } } /* three-up row: keep money and status chip inside the narrow cards */ .qd-cols-3 .qd-row-side { flex-direction: column; align-items: flex-end; gap: 4px; } .qd-cols-3 .qd-row-main { flex: 1 1 auto; } .qd-cols-3 .qd-row-side .qv-chip, .qd-cols-3 .qd-row-side .svc-chip { font-size: 11px; padding: 2px 8px; min-height: 0; line-height: 1.5; white-space: nowrap; } .qd-card-h > div { min-width: 0; } .qd-card-h h3 { text-wrap: balance; } .qd-row-main { flex: 1 1 0; min-width: 0; } .qd-row-side { max-width: 48%; } .qd-row-side .svc-chip, .qd-row-side .qv-chip { max-width: 100%; overflow: hidden; text-overflow: ellipsis; } .qd-ev-main, .qd-act-main { min-width: 0; } .qd-rows, .qd-acts, .qd-sched { grid-template-columns: minmax(0, 1fr); } .qd-card { overflow: hidden; } /* Mark as arrived (Appointments): one row per watch, ticked on its own */ .q-arr-list { display: flex; flex-direction: column; gap: 8px; margin: 12px 0; } .q-arr-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--color-border, #e3dccd); border-radius: 12px; background: #fffdf8; cursor: pointer; } .q-arr-row:has(.q-arr-chk:checked) { border-color: #b8944a; background: #fbf5e6; } .q-arr-row:has(.q-arr-chk:disabled) { opacity: .6; cursor: default; } .q-arr-chk { width: 20px; height: 20px; flex: none; accent-color: #b8944a; } .q-arr-main { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; } .q-arr-state { text-align: right; max-width: 40%; } @media (max-width: 640px) { .q-arr-row { flex-wrap: wrap; } .q-arr-state { max-width: 100%; text-align: left; flex-basis: 100%; padding-left: 32px; } }