/* GoMechanic-approximate theme. Exact brand hex can be dropped into these vars. */ :root { --brand: #e4002b; /* GoMechanic red (approx) */ --brand-dark: #b8001f; --brand-tint: #fdeced; --ink: #1a1a1a; --muted: #6b7280; --bg: #f4f5f7; --card: #ffffff; --border: #e2e4e8; --success: #1e7e34; --success-tint: #e6f4ea; --warn-tint: #fff6e0; --alert-tint: #fdecea; --alert: #d32f2f; } * { box-sizing: border-box; } body { font-family: -apple-system, Segoe UI, Roboto, Arial, sans-serif; margin: 0; background: var(--bg); color: var(--ink); } .hidden { display: none !important; } .screen { max-width: 1100px; margin: 0 auto; padding: 16px; } /* CC Admin's Pickups view is desktop-only and column-heavy (Lead ID, CX Status, Agent, Garage, Scheduled, Slot status, ML Remark, Allocation) - the standard 1100px cap forced constant horizontal scrolling. Wider, but still capped (not unbounded) so line length stays reasonable on an ultrawide monitor. */ #cca-screen { max-width: 1700px; } /* Real bug fixed 2026-08-02: .ff-card's own max-width increases were previously capped anyway by #agent-screen inheriting the default 1100px .screen limit - the wider card never actually got the room. Per this codebase's own convention (garages get phone-responsive treatment, agents are desktop - see the mobile @media block below), widening the whole agent portal is safe - this also gives the Pickups tab's own wide table (8 columns) more room. */ #agent-screen { max-width: 1600px; } /* Garage Admin's "Pickups by Slot" tab is column-heavy (Garage, Total, City, 5 slot windows, Unscheduled) the same way CC Admin's pickups view is (see #cca-screen above) - same widening, same reasoning. */ #ga-screen { max-width: 1700px; } /* Brand mark */ .brand-mark { font-size: 26px; font-weight: 800; letter-spacing: -0.5px; color: var(--ink); } .brand-go { color: var(--brand); } .brand-sub { font-size: 13px; color: var(--muted); margin: 2px 0 10px; } /* Landing */ #landing-screen { display: flex; min-height: 100vh; align-items: center; justify-content: center; } .landing-card { background: var(--card); padding: 36px; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.08); width: 100%; max-width: 420px; text-align: center; border-top: 4px solid var(--brand); } .landing-help { font-size: 14px; color: var(--muted); margin: 18px 0 12px; } .landing-links { display: flex; flex-direction: column; gap: 12px; } .landing-link { display: flex; flex-direction: column; gap: 3px; text-decoration: none; border: 1px solid var(--border); border-radius: 10px; padding: 16px; text-align: left; transition: border-color 0.15s, box-shadow 0.15s; } .landing-link:hover { border-color: var(--brand); box-shadow: 0 2px 10px rgba(228,0,43,0.12); } .landing-link-title { font-size: 16px; font-weight: 700; color: var(--brand); } .landing-link-sub { font-size: 13px; color: var(--muted); } /* Login */ #login-screen { display: flex; min-height: 100vh; align-items: center; justify-content: center; } .login-card { background: var(--card); padding: 32px; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.08); width: 100%; max-width: 360px; display: flex; flex-direction: column; gap: 14px; border-top: 4px solid var(--brand); } .login-card label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--muted); } .login-card input { padding: 10px; font-size: 15px; border: 1px solid var(--border); border-radius: 6px; } .login-card input:focus { outline: none; border-color: var(--brand); } .login-card button[type=submit] { padding: 11px; font-size: 15px; font-weight: 600; border: none; border-radius: 6px; background: var(--brand); color: #fff; cursor: pointer; margin-top: 4px; } .login-card button[type=submit]:hover { background: var(--brand-dark); } /* Topbar */ .topbar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; padding-bottom: 12px; border-bottom: 2px solid var(--brand); } .topbar h1 { font-size: 20px; font-weight: 800; margin: 0; } .topbar-sub { font-weight: 500; color: var(--muted); font-size: 16px; } .topbar-right { display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--muted); } .link-button { background: none; border: none; color: var(--brand); cursor: pointer; font-size: 13px; padding: 0; font-weight: 500; } .link-button:disabled { color: var(--muted); cursor: not-allowed; } .icon-button { background: var(--card); border: 1px solid var(--border); border-radius: 6px; cursor: pointer; font-size: 16px; line-height: 1; padding: 5px 9px; color: #444; } .icon-button:hover { background: #f0f0f0; } .icon-button.spinning { animation: spin 0.6s linear; } @keyframes spin { from { transform: rotate(0); } to { transform: rotate(360deg); } } /* Filter bar */ .filter-bar { display: flex; align-items: flex-end; gap: 16px; margin-bottom: 12px; flex-wrap: wrap; background: var(--card); border-radius: 8px; padding: 12px 14px; } .filter-field { font-size: 12px; color: var(--muted); display: flex; flex-direction: column; gap: 5px; font-weight: 500; } .filter-field select, .filter-field input { padding: 7px 9px; font-size: 14px; border-radius: 6px; border: 1px solid var(--border); min-width: 140px; } .filter-field select:focus, .filter-field input:focus { outline: none; border-color: var(--brand); } .filter-field.search-field input { min-width: 200px; } .count { font-size: 13px; color: var(--muted); margin-left: auto; align-self: center; } .filter-bar .link-button { align-self: center; font-size: 13px; white-space: nowrap; } /* Date pills (garage view) */ .pill-group { display: flex; gap: 6px; flex-wrap: wrap; } .day-pill { padding: 7px 14px; border-radius: 20px; border: 1px solid var(--border); background: var(--card); cursor: pointer; font-size: 13px; color: #444; } .day-pill:hover { border-color: var(--brand); } .day-pill.active { background: var(--brand); border-color: var(--brand); color: #fff; } .day-pill .pill-count { opacity: 0.75; margin-left: 3px; } .day-pill .today-tag { margin-left: 5px; font-size: 10px; text-transform: uppercase; letter-spacing: 0.3px; background: var(--brand-tint); color: var(--brand); padding: 1px 5px; border-radius: 8px; font-weight: 600; } .day-pill.active .today-tag { background: rgba(255,255,255,0.25); color: #fff; } /* Pagination */ .pagination { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 14px 0; } .page-btn { padding: 7px 16px; border-radius: 6px; border: 1px solid var(--border); background: var(--card); cursor: pointer; font-size: 13px; } .page-btn:hover:not(:disabled) { border-color: var(--brand); color: var(--brand); } .page-btn:disabled { opacity: 0.4; cursor: default; } #agent-page-info, #garage-page-info { font-size: 13px; color: var(--muted); } /* Reminders panel */ .reminders-panel { background: var(--warn-tint); border: 1px solid #f0d878; border-radius: 8px; padding: 12px 16px; margin-bottom: 16px; } .reminders-header { display: flex; justify-content: space-between; align-items: center; } .reminders-header h2 { font-size: 15px; margin: 0; } .script-text { font-size: 13px; color: #6b5a1a; background: var(--card); border-radius: 6px; padding: 8px; margin: 8px 0; } .reminders-list { max-height: 320px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; } .reminder-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 8px; background: var(--card); border-radius: 6px; font-size: 13px; } .reminder-row.overdue { border-left: 4px solid var(--brand); } .reminder-row:not(.overdue) { border-left: 4px solid #f0a800; } .reminder-meta { display: flex; flex-direction: column; } .reminder-meta .lead-id { font-weight: 600; } .reminder-meta .sub { color: var(--muted); font-size: 12px; } /* Live agent progress card (2026-08-26) - sits where the reminders card used to, same rounded-card language as .lb-card/.tp-card elsewhere in this file. */ .agent-progress-card { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 12px 16px; margin-bottom: 16px; } .agent-progress-head { display: flex; justify-content: space-between; align-items: center; } .agent-progress-head h2 { font-size: 15px; margin: 0; } .agent-progress-updated { font-size: 11px; color: var(--muted); } .agent-progress-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; margin-top: 10px; } .ap-stat { text-align: center; padding: 10px 8px; border-radius: 8px; background: var(--bg); } .ap-stat-value { font-size: 24px; font-weight: 800; color: var(--ink); } .ap-stat-label { font-size: 11px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; margin-top: 2px; } .ap-stat-sub { font-size: 11px; color: var(--muted); margin-top: 2px; } .ap-stat-hero { background: linear-gradient(135deg, #fff8e1, var(--card)); border: 1px solid #f5c542; } .ap-stat-hero .ap-stat-value { color: #8a6d1a; } .reminder-actions button { margin-left: 6px; padding: 4px 10px; border-radius: 5px; border: 1px solid var(--border); background: var(--card); cursor: pointer; font-size: 12px; } .reminder-actions .ack-btn { border-color: var(--brand); color: var(--brand); } .reminders-note { font-size: 12px; color: #8a7530; margin: 6px 0 0; } /* Tables */ .table-wrap { background: var(--card); border-radius: 8px; overflow-x: auto; box-shadow: 0 1px 3px rgba(0,0,0,0.04); } table { width: 100%; border-collapse: collapse; font-size: 13px; } th, td { text-align: left; padding: 9px 12px; border-bottom: 1px solid #eee; white-space: nowrap; } th { background: #fafafa; color: var(--muted); font-weight: 600; position: sticky; top: 0; } tr.escalated { background: var(--alert-tint); } tr.escalated td:first-child { border-left: 3px solid var(--alert); } tr.due-soon { background: var(--warn-tint); } /* Task Framework categories table: drag-and-drop priority reordering (2026-08-25, replaces manually juggling the Priority number field around the table's unique-priority constraint). */ .tf-category-row { cursor: grab; } .tf-category-row.tf-dragging { opacity: 0.4; } .tf-drag-handle { display: inline-block; color: var(--muted); cursor: grab; margin-right: 4px; letter-spacing: -2px; } .tf-category-row.tf-drag-over-before { box-shadow: inset 0 2px 0 0 var(--primary, #2563eb); } .tf-category-row.tf-drag-over-after { box-shadow: inset 0 -2px 0 0 var(--primary, #2563eb); } /* Zebra banding across the productivity dashboard's data tables (2026-08-22, direct instruction). :where() carries zero specificity so every row-state class defined elsewhere in this file (weekoff, totals, kpi, other, cat, hover) - regardless of where it sits in the cascade - always wins over this plain banding instead of fighting it on selector order. */ .lb-table :where(tbody tr:nth-child(even)), .tp-table :where(tbody tr:nth-child(even)) { background: #fafbfc; } /* Garage x Slot pickups pivot (Garage Admin + CC Admin "Pickups by Slot") */ .slot-matrix-table { table-layout: fixed; } .slot-matrix-table th, .slot-matrix-table td { white-space: normal; word-break: break-word; } .slot-matrix-table th:first-child, .slot-matrix-table td:first-child { width: 20%; } .slot-matrix-table th:nth-child(2), .slot-matrix-table td:nth-child(2) { width: 9%; text-align: center; } .slot-matrix-table th:nth-child(3), .slot-matrix-table td:nth-child(3) { width: 11%; } .slot-matrix-table th:nth-child(n+4), .slot-matrix-table td:nth-child(n+4) { text-align: center; } .slot-matrix-table tbody tr:nth-child(even) { background: #fafafa; } .slot-matrix-table tbody tr:hover { background: var(--brand-tint); } .slot-matrix-table td:nth-child(2) { font-weight: 700; } .slot-matrix-table td.sm-nonzero { color: var(--brand); font-weight: 600; } .slot-matrix-table td.sm-zero { color: #c4c8cf; } .slot-matrix-table td.sm-full { color: #d64545; font-weight: 700; background: #fdecec; } .slot-matrix-table tfoot .sm-totals-row td { border-top: 2px solid var(--brand); background: var(--brand-tint); } .mark-toggle { padding: 6px 12px; border-radius: 6px; border: 1px solid var(--border); background: var(--card); cursor: pointer; font-size: 12px; } .mark-toggle:hover { border-color: var(--success); } .mark-toggle.picked { background: var(--success); color: #fff; border-color: var(--success); } .mark-toggle:disabled { opacity: 0.6; cursor: default; } .empty, .loading { padding: 24px; text-align: center; color: var(--muted); font-size: 14px; } .error { color: var(--alert); font-size: 13px; padding: 8px 0; } /* Status tags + TAT */ .statuscell { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; } .tag { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 600; white-space: nowrap; } .tag-upcoming { background: #eef2f7; color: #4b5563; } .tag-within { background: #fff2cc; color: #8a6d1a; } .tag-delayed { background: var(--brand-tint); color: var(--brand-dark); } .tag-done { background: var(--success-tint); color: var(--success); } .tag-cx { background: #ede9fe; color: #5b21b6; white-space: nowrap; } .tat { font-size: 11px; color: var(--muted); } /* Garage status stepper (2 real nodes: Scheduled -> Picked up) - garage portal only. */ .stepper { display: flex; align-items: center; gap: 4px; } .step-node { display: flex; flex-direction: column; align-items: center; gap: 3px; } .step-dot { width: 10px; height: 10px; border-radius: 50%; background: #d0d3d8; flex-shrink: 0; } .step-dot.upcoming { background: #9ca7b5; } .step-dot.within { background: #f0a800; } .step-dot.delayed { background: var(--brand); } .step-dot.done { background: var(--success); } .step-line { width: 24px; height: 2px; background: #d0d3d8; flex-shrink: 0; } .step-line.done { background: var(--success); } .step-label { font-size: 9px; color: var(--muted); white-space: nowrap; } /* Find a Garage form (agent only) - routing/recommendation + slot-timing lookup, not a booking form (this tool doesn't create bookings - see src/lib/cceBooking.js). */ .booking-card { background: var(--card); border-radius: 8px; padding: 18px 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.04); border-top: 3px solid var(--brand); max-width: 640px; display: flex; flex-direction: column; gap: 12px; } .booking-card h2 { font-size: 16px; margin: 0; } .booking-hint { font-size: 12px; color: var(--muted); margin: -6px 0 0; } .booking-lead-status { font-size: 13px; color: var(--muted); } .booking-lead-card { background: var(--bg); border-radius: 6px; padding: 10px 12px; font-size: 13px; display: flex; flex-direction: column; gap: 2px; } .booking-lead-sub { color: var(--muted); font-size: 12px; } .booking-fields { display: flex; flex-direction: column; gap: 12px; } .booking-job-fields { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end; } .checkbox-field { flex-direction: row !important; align-items: center; gap: 6px !important; font-size: 13px; color: var(--ink); } .booking-categories { display: flex; flex-wrap: wrap; gap: 8px; } .category-chip { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 14px; border: 1px solid var(--border); font-size: 12px; color: var(--muted); cursor: pointer; } .category-chip:has(input:checked) { border-color: var(--brand); color: var(--brand); background: var(--brand-tint); } .booking-address-row { display: flex; gap: 10px; align-items: flex-end; } .booking-slots { display: flex; flex-wrap: wrap; gap: 8px; } .slot-btn { padding: 8px 12px; border-radius: 6px; border: 1px solid var(--border); background: var(--card); cursor: pointer; font-size: 13px; display: flex; flex-direction: column; align-items: center; gap: 2px; } .slot-btn .slot-cap { font-size: 11px; color: var(--muted); } .slot-btn:hover:not(:disabled) { border-color: var(--brand); } .slot-btn.active { background: var(--brand); border-color: var(--brand); color: #fff; } .slot-btn.active .slot-cap { color: rgba(255,255,255,0.85); } .slot-btn.full, .slot-btn:disabled { opacity: 0.45; cursor: default; } .slot-btn.cutoff { background: #f1f1f1; } .booking-confirm { align-self: flex-start; background: var(--brand); color: #fff; border-color: var(--brand); font-weight: 600; } .booking-confirm:hover:not(:disabled) { background: var(--brand-dark); } .booking-confirm:disabled { opacity: 0.5; cursor: default; } /* Garage recommendation cards - the routing/ranking output of GET /booking/recommendations. Purely advisory, mechanical top-pick display (2026-08-15) - no expand/allocate interaction anymore, see HANDOVER.md. */ .booking-recommendations { display: flex; flex-direction: column; gap: 8px; } .rec-card { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; } .rec-card.rec-recommended { border-color: var(--brand); border-width: 2px; } .rec-card-header { display: flex; align-items: center; gap: 12px; padding: 10px 14px; } .rec-rank { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; background: var(--bg); color: var(--muted); font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; } .rec-card-main { flex: 1; min-width: 0; } .rec-name { font-weight: 600; font-size: 13px; } .rec-sub { font-size: 12px; color: var(--muted); margin-top: 2px; } .rec-sub.rec-full { color: #d64545; } .tag-recommended { background: var(--brand-tint); color: var(--brand); font-weight: 700; } /* Mobile (garages may use phones; agents are desktop). Turn the garage table into stacked cards below this breakpoint. */ @media (max-width: 640px) { .screen { padding: 10px; } .topbar h1 { font-size: 17px; } .topbar-sub { font-size: 13px; } .filter-field { flex: 1 1 100%; } .filter-field select, .filter-field input, .filter-field.search-field input { min-width: 0; width: 100%; } .count { margin-left: 0; } #garage-screen .table-wrap { overflow-x: visible; box-shadow: none; background: transparent; } #garage-screen thead { display: none; } #garage-screen table, #garage-screen tbody, #garage-screen tr, #garage-screen td { display: block; width: 100%; } #garage-screen tr { background: var(--card); border: 1px solid var(--border); border-radius: 10px; margin: 0 0 10px; padding: 6px 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.04); } #garage-screen tr.due-soon { border-color: #f0d878; } #garage-screen td { border: none; padding: 6px 0; white-space: normal; display: flex; justify-content: space-between; align-items: center; gap: 12px; } #garage-screen td::before { content: attr(data-label); font-weight: 600; color: var(--muted); font-size: 12px; } #garage-screen td[data-label="Status"] .stepper { align-items: flex-end; } /* Pickup toggle spans the full card width and is touch-sized. */ #garage-screen td[data-label="Picked up?"] { padding-top: 8px; } #garage-screen td[data-label="Picked up?"]::before { display: none; } #garage-screen .mark-toggle { width: 100%; padding: 12px; font-size: 15px; } /* Copy actions stack vertically and stay touch-sized, like the pickup toggle. */ #garage-screen td[data-label="Copy"] { flex-direction: column; align-items: stretch; gap: 6px; padding-top: 8px; } #garage-screen td[data-label="Copy"]::before { display: none; } #garage-screen .copy-btn { border: 1px solid var(--border); border-radius: 6px; padding: 8px; text-align: center; } } /* Admin panel */ .admin-create-card { background: var(--card); border-radius: 8px; padding: 16px 18px; margin-bottom: 16px; box-shadow: 0 1px 3px rgba(0,0,0,0.04); border-top: 3px solid var(--brand); } .admin-create-card h2 { font-size: 15px; margin: 0 0 12px; } .create-form { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; } .create-form label { font-size: 12px; color: var(--muted); display: flex; flex-direction: column; gap: 5px; font-weight: 500; } .create-form input, .create-form select { padding: 7px 9px; font-size: 14px; border-radius: 6px; border: 1px solid var(--border); min-width: 150px; } .create-form input:focus, .create-form select:focus { outline: none; border-color: var(--brand); } .create-form button { padding: 8px 18px; font-size: 14px; font-weight: 600; border: none; border-radius: 6px; background: var(--brand); color: #fff; cursor: pointer; } .create-form button:hover { background: var(--brand-dark); } .create-result { font-size: 13px; margin: 12px 0 0; color: var(--success); } .create-result.error { color: var(--alert); } .pill-yes { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 11px; background: var(--success-tint); color: var(--success); } .pill-no { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 11px; background: #f1f1f1; color: var(--muted); } /* Agent portal: Pickups as an expandable card (2026-08-16 - replaced its own tab) */ .pickups-expando { background: var(--card-bg, #fff); border: 1px solid var(--border); border-radius: 8px; padding: 12px 16px; margin-bottom: 16px; } .pickups-expando-summary { cursor: pointer; font-weight: 600; font-size: 15px; list-style: none; } .pickups-expando-summary::-webkit-details-marker { display: none; } .pickups-expando-summary::before { content: '▸ '; } .pickups-expando[open] .pickups-expando-summary::before { content: '▾ '; } .pickups-expando .filter-bar { margin-top: 12px; } /* Garage Booking admin tab */ .bk-slots-editor { display: flex; flex-direction: column; gap: 8px; } .bk-slot-row { display: flex; gap: 8px; align-items: center; } .bk-slot-row input { padding: 6px 8px; font-size: 13px; border-radius: 6px; border: 1px solid var(--border); } /* Admin tabs */ .tab-nav { display: flex; gap: 4px; margin-bottom: 16px; border-bottom: 1px solid var(--border); } .tab-btn { padding: 10px 18px; font-size: 14px; font-weight: 600; border: none; background: none; color: var(--muted); cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -1px; } .tab-btn.active { color: var(--brand); border-bottom-color: var(--brand); } /* Garage admin sub-tabs (e.g. Active/Disabled within Garages & Slots) - visually matches .tab-btn but a distinct class so it's not caught by the top-level tab listener (document.querySelectorAll('.tab-btn')), which would otherwise mis-toggle the real top nav's active state when a sub-tab is clicked. */ .sub-tab-nav { margin-bottom: 12px; border-bottom-width: 1px; } .sub-tab-btn { padding: 6px 14px; font-size: 13px; font-weight: 600; border: none; background: none; color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; } .sub-tab-btn.active { color: var(--brand); border-bottom-color: var(--brand); } .sub-tab-count { font-weight: 400; color: var(--muted); font-size: 12px; } /* Agent Pickups tab: Today / Last 7 days toggle (2026-08-15) */ .range-toggle { display: flex; gap: 4px; } .range-toggle-btn { font-size: 13px; padding: 6px 12px; } .range-toggle-btn.active { background: var(--brand); color: #fff; border-color: var(--brand); } /* Analytics */ .an-card { background: var(--card); border-radius: 8px; padding: 16px 18px; margin-bottom: 16px; box-shadow: 0 1px 3px rgba(0,0,0,0.04); } .an-card h3 { font-size: 14px; margin: 0 0 12px; } .an-sub { font-weight: 400; color: var(--muted); font-size: 12px; margin-left: 6px; } /* TTOs Today card (agent daily reconciliation) */ .tto-nav-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 4px; border-radius: 9px; background: var(--alert); color: #fff; font-size: 11px; font-weight: 700; vertical-align: middle; } .tto-list { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; } .tto-card { border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; background: var(--card); } .tto-card-done { border-color: var(--success, #2e7d32); background: color-mix(in srgb, var(--success, #2e7d32) 5%, var(--card)); } .tto-card-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; } .tto-cust { font-weight: 600; } .tto-phone { color: var(--muted); font-size: 12px; margin-left: 8px; } .tto-when { color: var(--muted); font-size: 12px; margin-left: 8px; } .tto-ctx { color: var(--muted); font-size: 12px; margin-top: 2px; } .tto-controls { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin-top: 10px; } .tto-reason-wrap { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; } .tto-status-pill { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 6px; white-space: nowrap; } .tto-status-pending { background: var(--brand-tint, #fdecea); color: var(--alert); } .tto-status-done { background: color-mix(in srgb, var(--success, #2e7d32) 15%, transparent); color: var(--success, #2e7d32); } .tto-row-status { font-size: 12px; align-self: center; } /* TTO report breakdown (productivity admin section) */ .tto-report-breakdown { display: flex; flex-wrap: wrap; gap: 24px; margin-top: 16px; } .tto-report-col { flex: 1 1 240px; } .tto-report-col h4 { font-size: 13px; margin: 0 0 8px; } .tto-report-col ul { list-style: none; margin: 0; padding: 0; } .tto-report-col li { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; border-bottom: 1px solid var(--border); font-size: 13px; } .tto-report-col li b { font-variant-numeric: tabular-nums; } .tto-report-none { color: var(--muted); } .tto-garage-tbl { width: 100%; border-collapse: collapse; font-size: 12px; } .tto-garage-tbl th { background: #fafafa; color: var(--muted); font-weight: 600; padding: 6px 8px; border-bottom: 1px solid #eee; text-align: left; } .tto-garage-tbl td { padding: 6px 8px; border-bottom: 1px solid #f0f0f0; } .tto-garage-tbl tbody tr:nth-child(even) { background: #fafafa; } .ab-sparkline { display: inline-flex; align-items: flex-end; gap: 2px; height: 24px; vertical-align: middle; } .ab-sparkline-bar { width: 5px; min-height: 1px; background: var(--brand); border-radius: 1px; opacity: 0.75; } .ab-sparkline-bar.ab-sparkline-today { opacity: 1; } .gl-pass { background: var(--success-tint); color: var(--success); font-weight: 700; padding: 2px 8px; border-radius: 6px; font-family: ui-monospace, Menlo, Consolas, monospace; } .kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 16px; } .kpi { background: var(--card); border-radius: 8px; padding: 14px 16px; box-shadow: 0 1px 3px rgba(0,0,0,0.04); border-top: 3px solid var(--brand); } .kpi-value { font-size: 24px; font-weight: 800; color: var(--ink); } .kpi-label { font-size: 12px; color: var(--muted); font-weight: 600; margin-top: 2px; } .kpi-sub { font-size: 11px; color: var(--muted); margin-top: 3px; } /* Signal comparison stacked bar */ .signal-bar { display: flex; height: 30px; border-radius: 6px; overflow: hidden; background: #f1f1f1; } .signal-bar > div { height: 100%; } .seg-both { background: var(--success); } .seg-tracker { background: #1a73e8; } .seg-workforce { background: #f0a800; } .seg-neither { background: #d0d3d8; } .signal-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; font-size: 12px; color: var(--muted); } .legend-item { display: inline-flex; align-items: center; gap: 5px; } .legend-dot { width: 11px; height: 11px; border-radius: 3px; display: inline-block; } /* Daily trend */ .daily-row { display: flex; align-items: center; gap: 12px; padding: 3px 0; font-size: 12px; } .daily-date { width: 92px; color: var(--muted); flex-shrink: 0; } .daily-track { flex: 1; display: flex; height: 16px; background: #f4f5f7; border-radius: 4px; overflow: hidden; } .daily-fill { background: var(--success); height: 100%; } .daily-rest { background: #e2e4e8; height: 100%; } .daily-nums { width: 150px; text-align: right; color: var(--muted); flex-shrink: 0; } /* Lead status / exclusions ranked bars (reuse .daily-row layout, wider label) */ .status-label { width: 190px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .status-fill { background: #5b21b6; } .exclusion-fill { background: var(--alert); } .an-exclusions-card { border-top: 3px solid var(--alert); } .an-exclusions-summary { font-size: 12px; color: var(--muted); margin: 0 0 10px; } /* Breakdown mini tables */ .an-breakdowns { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; } .mini-table-wrap { overflow-x: auto; } .mini-table { width: 100%; min-width: 260px; table-layout: fixed; border-collapse: collapse; font-size: 12px; } .mini-table th { text-align: left; padding: 6px 8px; color: var(--muted); font-weight: 600; border-bottom: 1px solid var(--border); position: static; background: none; } .mini-table td { padding: 6px 8px; border-bottom: 1px solid #f0f0f0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mini-table th:not(:first-child), .mini-table td:not(:first-child) { text-align: right; } /* Name column gets the lion's share; the three numeric columns stay narrow and fixed. */ .mini-table th:first-child, .mini-table td:first-child { width: auto; } .mini-table th:nth-child(2), .mini-table td:nth-child(2) { width: 44px; } .mini-table th:nth-child(3), .mini-table td:nth-child(3) { width: 58px; } .mini-table th:nth-child(4), .mini-table td:nth-child(4) { width: 62px; } @media (max-width: 640px) { .kpi-row { grid-template-columns: repeat(2, 1fr); } } /* ---- Find a Garage: derived categories + manual override ---- */ .derived-chip { background: var(--success-tint); border-color: var(--success); color: var(--success); cursor: default; } .derived-chip .cat-ids { font-size: 10px; color: var(--muted); font-family: monospace; margin-right: 3px; } .manual-override-details { border: 1px solid var(--border); border-radius: 6px; padding: 8px 12px; } .manual-override-summary { cursor: pointer; font-weight: 600; color: var(--muted); margin: 0; list-style: none; } .manual-override-summary::-webkit-details-marker { display: none; } .manual-override-summary::before { content: '+ '; } details[open] .manual-override-summary::before { content: '- '; } /* ---- Garage rec cards: greyed-out ineligible + reasons (2026-08-15) ---- Debug/transparency view - the "see more" list shows every nearby garage, greying out ones that fail a criterion and listing exactly why, instead of silently hiding them (agents were "ambiguous as to why abc garage rather than xyz was recommended"). Blocked garages are hard-excluded server-side and never reach this markup at all. */ .rec-card.rec-ineligible { opacity: 0.55; } .rec-card.rec-ineligible .rec-name { color: var(--muted); } .rec-reasons { margin: 4px 0 0; padding-left: 18px; font-size: 12px; color: var(--alert); } .rec-reasons li { margin: 1px 0; } .rec-cat-summary { margin: 0 0 8px; } /* ---- My Garage: slot capacity grid ---- */ .slot-grid-table { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 4px; } .slot-grid-table th { text-align: center; padding: 7px 10px; background: #fafafa; color: var(--muted); font-weight: 600; border-bottom: 1px solid var(--border); white-space: nowrap; } .slot-grid-table th:first-child { text-align: left; } .slot-grid-table td { padding: 6px 8px; border-bottom: 1px solid #f0f0f0; text-align: center; white-space: nowrap; } .slot-grid-table td:first-child { text-align: left; } .slot-grid-table .slot-cap-input { width: 64px; padding: 5px 7px; font-size: 13px; border: 1px solid var(--border); border-radius: 5px; text-align: center; } .slot-grid-table .slot-cap-input:focus { outline: none; border-color: var(--brand); } .slot-label-text { font-weight: 500; } /* ---- Copy button row (4 variants) ---- */ /* Keep the 4 copy buttons readable at small widths */ #garage-screen td[data-label="Copy"] { flex-wrap: wrap; } /* Mobile: copy cell stacks vertically and stays touch-sized */ @media (max-width: 640px) { #garage-screen td[data-label="Copy"] { flex-direction: column; align-items: stretch; gap: 6px; padding-top: 8px; } #garage-screen td[data-label="Copy"]::before { display: none; } #garage-screen .copy-btn { border: 1px solid var(--border); border-radius: 6px; padding: 8px; text-align: center; } /* The garage now has 3 tabs (Pickups / Allocated Pickups / My Garage) - let the bar scroll sideways instead of squashing or wrapping the labels on a phone. */ .tab-nav { overflow-x: auto; -webkit-overflow-scrolling: touch; } .tab-btn { white-space: nowrap; flex: 0 0 auto; padding: 10px 14px; } /* Allocated Pickups: the "Request phone" action stacks full-width & touch-sized like the pickup toggle; a shared number / "Requested" tag stays inline. */ #garage-screen td[data-label="Phone"]:has(.allocated-request-btn) { flex-direction: column; align-items: stretch; gap: 6px; padding-top: 8px; } #garage-screen td[data-label="Phone"]:has(.allocated-request-btn)::before { display: none; } #garage-screen .allocated-request-btn { width: 100%; padding: 12px; font-size: 15px; } } /* ---- Garage Admin / CC Admin role dashboards ---- */ /* ---- Service Mapping: per-service/per-package ON/OFF toggles ---- */ .sm-toggle-list { display: flex; flex-direction: column; gap: 0; } .sm-group-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--muted); padding: 10px 0 4px; border-top: 1px solid var(--border); margin-top: 4px; } .sm-group-header:first-child { margin-top: 0; border-top: none; } .sm-group-count { font-weight: 400; font-size: 11px; margin-left: 4px; } .sm-group-actions { display: flex; gap: 10px; text-transform: none; letter-spacing: normal; } .sm-group-actions .link-button { font-size: 11px !important; } .sm-toggle-row { display: flex; align-items: center; justify-content: space-between; padding: 6px 8px; border-radius: 5px; transition: background 0.1s; } .sm-toggle-row:hover { background: var(--bg); } .sm-toggle-row.sm-enabled { background: var(--success-tint); } .sm-toggle-row.sm-enabled:hover { background: #d4eeda; } .sm-toggle-label { display: flex; align-items: center; gap: 8px; cursor: pointer; flex: 1; min-width: 0; font-size: 13px; } .sm-toggle-label input[type="checkbox"] { flex-shrink: 0; width: 16px; height: 16px; accent-color: var(--success); cursor: pointer; } .sm-toggle-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sm-toggle-badge { flex-shrink: 0; font-size: 10px; font-weight: 700; letter-spacing: 0.5px; padding: 2px 7px; border-radius: 9px; margin-left: 8px; } .sm-toggle-badge.on { background: var(--success-tint); color: var(--success); } .sm-toggle-badge.off { background: #f1f1f1; color: var(--muted); } .sm-section-summary { font-size: 12px; color: var(--muted); margin-bottom: 6px; } .sm-bulk-actions { display: flex; gap: 12px; margin-bottom: 8px; } .sm-bulk-btn { font-size: 12px !important; } /* Saved/unsaved indicator badge */ .sm-unsaved { font-size: 12px; font-weight: 600; color: #8a6d1a; background: var(--warn-tint); border: 1px solid #f0d878; border-radius: 10px; padding: 2px 10px; } .sm-saved { font-size: 12px; font-weight: 600; color: var(--success); background: var(--success-tint); border: 1px solid #a8d5b5; border-radius: 10px; padding: 2px 10px; } /* Derived chip type variant for packages */ .derived-chip-package { background: #ede9fe; border-color: #7c3aed; color: #5b21b6; } .derived-chip-service { background: var(--success-tint); border-color: var(--success); color: var(--success); } /* ---- Service picker (agent: Find a Garage override) ---- */ .svc-picker { display: flex; flex-direction: column; gap: 8px; position: relative; } .svc-search-input { padding: 8px 10px; font-size: 13px; border: 1px solid var(--border); border-radius: 6px; width: 100%; } .svc-search-input:focus { outline: none; border-color: var(--brand); } .svc-dropdown { position: absolute; top: calc(100% - 4px); left: 0; right: 0; background: var(--card); border: 1px solid var(--border); border-radius: 6px; box-shadow: 0 4px 16px rgba(0,0,0,0.10); z-index: 100; max-height: 240px; overflow-y: auto; } /* offset: account for selected chips + search box height */ .svc-picker .svc-dropdown { top: auto; margin-top: 2px; } .svc-dropdown-item { display: flex; align-items: center; gap: 8px; padding: 7px 12px; font-size: 13px; cursor: pointer; user-select: none; } .svc-dropdown-item:hover { background: var(--bg); } .svc-dropdown-item.svc-dropdown-checked { background: var(--brand-tint); } .svc-dropdown-item input[type="checkbox"] { flex-shrink: 0; accent-color: var(--brand); } .svc-dropdown-empty { color: var(--muted); font-style: italic; cursor: default; } .svc-dropdown-empty:hover { background: none; } .svc-kind-badge { font-size: 10px; font-weight: 700; letter-spacing: 0.4px; padding: 1px 5px; border-radius: 8px; margin-left: 4px; flex-shrink: 0; } .svc-kind-pkg { background: #ede9fe; color: #5b21b6; } .svc-selected-chips { display: flex; flex-wrap: wrap; gap: 6px; min-height: 0; } .svc-chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; border-radius: 12px; font-size: 12px; font-weight: 500; } .svc-chip-svc { background: var(--success-tint); border: 1px solid var(--success); color: var(--success); } .svc-chip-pkg { background: #ede9fe; border: 1px solid #7c3aed; color: #5b21b6; } .svc-chip-remove { background: none; border: none; cursor: pointer; padding: 0 2px; font-size: 14px; line-height: 1; opacity: 0.6; color: inherit; } .svc-chip-remove:hover { opacity: 1; } .svc-no-selection { font-size: 12px; color: var(--muted); font-style: italic; } /* Tyre/battery brand sub-options nested inside the service picker dropdown, and the resulting selected-brand chips - visually distinct from service/package chips. */ .svc-brand-group { display: flex; flex-direction: column; background: var(--bg); } .svc-brand-item { padding-left: 30px; font-size: 12.5px; color: var(--muted); } .svc-brand-item.svc-dropdown-checked { color: var(--ink); font-weight: 600; } .svc-chip-brand { border: 1px dashed; } .svc-chip-brand-tyre { background: #fff7ed; border-color: #c2410c; color: #c2410c; } .svc-chip-brand-battery { background: #eff6ff; border-color: #1d4ed8; color: #1d4ed8; } /* Multi-select filter (CC Admin agent picker) */ .filter-field select[multiple] { min-height: 62px; border-radius: 6px; border: 1px solid var(--border); font-size: 13px; padding: 4px 6px; } .filter-field select[multiple]:focus { outline: none; border-color: var(--brand); } .filter-field select[multiple] option:checked { background: var(--brand-tint); color: var(--brand-dark); } /* Garage disable/enable column */ .ga-override-label { font-size: 10px; font-weight: 600; letter-spacing: 0.3px; color: var(--muted); background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 1px 6px; margin-left: 4px; vertical-align: middle; white-space: nowrap; } .ga-disable-cell { white-space: nowrap; } .ga-disable-cell .link-button + .link-button { margin-left: 8px; } /* Public leaderboard (no login - shared office display) - deliberately more energetic than this tool's usual clinical/ops-dashboard look, same reasoning as the Fastest Finger tab's gamified styling: this is meant to motivate agents glancing at a shared screen, not read like a spreadsheet. */ .lb-screen { max-width: 900px; } .lb-header h1 { display: flex; align-items: center; gap: 8px; } .lb-table th, .lb-table td { text-align: center; } .lb-table th:nth-child(2), .lb-table td:nth-child(2) { text-align: left; } .lb-rank-cell { font-weight: 700; color: var(--muted); } .lb-medal { font-size: 22px; filter: drop-shadow(0 1px 1px rgba(0,0,0,0.15)); } .lb-incentive { font-weight: 700; color: var(--success); white-space: nowrap; } .lb-rank-1 { background: linear-gradient(90deg, #fff3c4, #fff8e1); box-shadow: inset 3px 0 0 #f5c542; } .lb-rank-2 { background: linear-gradient(90deg, #eef0f2, #f5f5f5); box-shadow: inset 3px 0 0 #b0b8c1; } .lb-rank-3 { background: linear-gradient(90deg, #fbe0c8, #fdf0e6); box-shadow: inset 3px 0 0 #d98f4e; } .lb-rank-1 td, .lb-rank-2 td, .lb-rank-3 td { font-size: 15px; } .lb-bonus-badge { display: inline-block; margin-left: 4px; padding: 1px 7px; border-radius: 999px; font-size: 10px; font-weight: 800; letter-spacing: 0.2px; background: linear-gradient(135deg, var(--brand), #ff7a3d); color: #fff; vertical-align: middle; } /* Productivity dashboard - reuses the leaderboard's card/table look, but the first column (Agent) is the identity column here, not a rank cell. */ .pd-screen { max-width: 1050px; } .pd-table th:nth-child(1), .pd-table td:nth-child(1) { text-align: left; } .pd-group-head { background: var(--brand-tint); color: var(--brand-dark); font-weight: 800; } .pd-group-head-alt { background: var(--success-tint); color: var(--success); border-left: 2px solid var(--border); } .pd-subhead th { font-size: 11px; color: var(--muted); font-weight: 700; text-transform: uppercase; } .pd-table td:nth-child(5), .pd-table th:nth-child(5) { border-left: 2px solid var(--border); } .pd-row-weekoff { opacity: 0.55; background: #fafafa; } .pd-weekoff-tag { display: inline-block; padding: 1px 7px; border-radius: 999px; font-size: 10px; font-weight: 700; letter-spacing: 0.2px; background: var(--border); color: var(--muted); vertical-align: middle; } /* Achievement% color bands - >=100 green, 50-99 orange, <50 red. */ .pd-ach-green { color: var(--success); font-weight: 700; background: var(--success-tint); border-radius: 6px; } .pd-ach-orange { color: #8a6d1a; font-weight: 700; background: #fff3c4; border-radius: 6px; } .pd-ach-red { color: var(--alert); font-weight: 700; background: var(--alert-tint); border-radius: 6px; } .pd-other td { color: var(--muted); font-style: italic; border-top: 1px dashed var(--border); } .pd-total td { font-weight: 800; border-top: 2px solid var(--brand); background: var(--card); } /* Productivity dashboard was live/today-only (direct instruction 2026-08-22); 2026-10-05 re-added a date range (weekly/monthly agent review): preset buttons + From/To + Apply, with the resolved period shown as a label. */ .pd-today-bar { align-items: flex-end; } .pd-today-bar .tp-toggle { align-self: flex-end; flex-wrap: wrap; } .pd-today-label { font-size: 14px; font-weight: 700; color: var(--ink); align-self: center; } .pd-today-bar .lb-rate-pill { align-self: center; } @media (max-width: 640px) { .pd-range-presets { width: 100%; } .pd-range-presets .tp-toggle-btn { flex: 1 1 30%; padding: 8px 6px; font-size: 12px; } } .lb-rate-pill { display: inline-block; padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; background: var(--brand-tint); color: var(--brand-dark); border: 1px solid var(--brand); } .lb-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 16px; } .lb-card { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; text-align: center; } .lb-card-label { font-size: 12px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; } .lb-card-value { font-size: 26px; font-weight: 800; color: var(--ink); margin-top: 4px; } /* Total incentive is the "hero" stat - the one everyone glances at first. */ .lb-card-hero { background: linear-gradient(135deg, #fff8e1, #fff); border: 2px solid #f5c542; } .lb-card-hero .lb-card-value { color: #8a6d1a; } /* Sortable table headers (CC Admin pickups) */ .cca-sortable { cursor: pointer; user-select: none; white-space: nowrap; } .cca-sortable:hover { color: var(--brand); } .cca-sortable .sort-arrow { font-size: 10px; margin-left: 3px; color: var(--brand); } .cca-share-requested { background: var(--brand); color: #fff; border-color: var(--brand); } /* Pending "Request phone" banner - deliberately loud (garage requests must not go unnoticed by a CC admin who isn't scanning every row). Click to filter the table down to just the pending rows. */ .cca-phone-banner { display: block; width: 100%; text-align: left; margin: 0 0 12px; padding: 10px 14px; background: var(--brand-tint); border: 1px solid var(--brand); border-radius: 8px; color: var(--brand-dark); font-weight: 700; font-size: 14px; cursor: pointer; } .cca-phone-banner:hover { background: #fbdadf; } .cca-phone-banner.cca-phone-banner-active { background: var(--brand); color: #fff; } /* ── Fastest Finger First (gamified lead capture) ───────────────────────────── Deliberately more playful than the rest of this tool's fairly clinical/ops- dashboard look - this is a race, it should feel like one, not a spreadsheet. */ /* Real bug fixed 2026-08-02: .ff-card also carries .booking-card, which caps at 640px (fine for the narrow "Find a Garage" form it was designed for) - far too narrow for a 6-column table (Lead ID + tag, Source, Status badge, Age, Pickup datetime, Capture button), which was overflowing/truncating badly. Per this codebase's own convention (garages get phone-responsive treatment, agents are desktop - see the mobile @media block above), widening this is safe. */ .ff-card { max-width: 1560px; } .ff-card .table-wrap table { table-layout: fixed; } .ff-card .table-wrap td, .ff-card .table-wrap th { white-space: normal; word-break: break-word; } .ff-title-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .ff-title-row h2 { margin: 0; } .ff-mode-pill { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: 0.4px; text-transform: uppercase; background: linear-gradient(135deg, var(--brand), #ff7a3d); color: #fff; } /* Tasks tab (fully merged single blind queue, 2026-08-14 - no P0/assigned section styling anymore, see public/app.js renderTasksQueue()) */ .tsk-all-clear { background: #f1f1f1; border: 1px solid var(--border); border-radius: 8px; padding: 24px; text-align: center; color: var(--muted); font-size: 14px; } .fu-card-locked { opacity: 0.55; } .fu-card-locked .fu-card-blind-title { color: var(--muted); } .ff-claim-card { background: linear-gradient(135deg, #fff8e1, #fff); border: 2px solid #f5c542; border-radius: 10px; padding: 16px 18px 20px; font-size: 13px; display: flex; flex-direction: column; gap: 5px; } .ff-claim-card .booking-lead-sub { margin-top: 8px; line-height: 1.5; } .ff-claim-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 15px; font-weight: 800; color: #8a6d1a; margin-bottom: 4px; } .ff-countdown-badge { background: #8a6d1a; color: #fff; padding: 2px 10px; border-radius: 999px; font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; } .ff-crm-btn { background: var(--brand); color: #fff; border-color: var(--brand); font-weight: 700; } .ff-crm-btn:hover { background: var(--brand-dark); } /* Real behavior change 2026-08-14 (direct instruction): "no UI flair, an agent would totally miss this... what to do on a task should be very very prominent." A solid banner strip for the task type + a boxed instruction line, at the very top of both the P0 claim card and the revealed assigned- task card - the first thing an agent's eye should hit. */ .fu-type-banner { display: flex; align-items: center; gap: 8px; background: var(--brand); color: #fff; font-weight: 800; font-size: 15px; padding: 8px 14px; border-radius: 8px; margin-bottom: 10px; } .fu-type-banner-icon { font-size: 18px; line-height: 1; } .fu-instruction { display: flex; align-items: flex-start; gap: 8px; background: #fff8e1; border: 1px solid #f5c542; border-left: 5px solid var(--brand); border-radius: 6px; padding: 10px 12px; font-size: 14px; font-weight: 700; color: #5c4400; margin-bottom: 10px; } .fu-instruction-icon { font-size: 16px; line-height: 1.3; flex-shrink: 0; } /* Geo-provenance notice on the Book / Find-a-Garage address rows (2026-08-26). Same visual weight as .fu-instruction above, for the same reason - an unverified map pin silently driving garage distance ranking is exactly the class of thing an agent misses when it's rendered as a quiet grey line. */ .geo-warn { display: flex; align-items: flex-start; gap: 8px; background: #fff8e1; border: 1px solid #f5c542; border-left: 5px solid var(--brand); border-radius: 6px; padding: 10px 12px; font-size: 14px; font-weight: 700; color: #5c4400; margin: 6px 0; } .geo-warn-icon { font-size: 16px; line-height: 1.3; flex-shrink: 0; } .geo-warn-sub { font-weight: 500; font-size: 13px; margin-top: 3px; } .geo-note { color: #6b7280; font-size: 12px; padding: 4px 0; display: inline-block; } /* Real behavior change 2026-08-14: the per-row SOS/HOT tags, status badges, and the pool table itself are gone - fresh orders and assigned follow-ups are now ONE indistinguishable blind queue (see renderTasksQueue() in app.js), so there is no longer anything to visually rank or highlight before capture. */ .fu-capture-btn { background: var(--brand); color: #fff; border-color: var(--brand); font-weight: 700; transition: transform 0.1s ease; } .fu-capture-btn:hover:not(:disabled) { background: var(--brand-dark); transform: scale(1.04); } /* ── CC Admin Pickups UI rethink (2026-08-02) ───────────────────────────────── Native