:root { --slate-950: #020617; --slate-900: #0f172a; --slate-800: #1e293b; --slate-700: #334155; --slate-600: #475569; --slate-500: #64748b; --slate-400: #94a3b8; --slate-300: #cbd5e1; --slate-200: #e2e8f0; --slate-100: #f1f5f9; --slate-50: #f8fafc; --white: #ffffff; --emerald-950: #022c22; --emerald-900: #064e3b; --emerald-800: #065f46; --emerald-700: #047857; --emerald-600: #059669; --emerald-500: #10b981; --emerald-100: #d1fae5; --emerald-50: #ecfdf5; --amber-900: #78350f; --amber-800: #92400e; --amber-700: #b45309; --amber-200: #fde68a; --amber-100: #fef3c7; --amber-50: #fffbeb; --red-900: #7f1d1d; --red-800: #991b1b; --red-700: #b91c1c; --red-100: #fee2e2; --red-50: #fef2f2; --blue-700: #1d4ed8; --blue-100: #dbeafe; --blue-50: #eff6ff; --purple-700: #7e22ce; --purple-100: #f3e8ff; --shadow-sm: 0 8px 25px rgba(15, 23, 42, 0.08); --shadow: 0 20px 60px rgba(15, 23, 42, 0.12); --radius: 24px; } /* Dark is the default theme. These remaps live in the stylesheet (loaded in ), so the very first paint is already dark — no light→dark flash on load. Picking "light" sets html[data-theme="light"], which falls back to the :root values above. (db.js still injects the finer component overrides + handles the toggle.) */ html:not([data-theme="light"]) { --white:#0f172a; --slate-50:#0b1220; --slate-100:#16223c; --slate-200:#2a3550; --slate-300:#3b4a6b; --slate-400:#6b7a99; --slate-500:#9aa7bf; --slate-600:#c2ccdc; --slate-700:#dbe2ec; --slate-800:#e8edf4; --slate-900:#eef2f7; --slate-950:#ffffff; --emerald-50:#06281d; --emerald-100:#0a3a2a; --amber-50:#2a1f06; --amber-100:#3a2c08; --amber-200:#4a3a10; --red-50:#2a0c0c; --red-100:#3a1212; --blue-50:#0b1b33; --blue-100:#102a4a; --purple-100:#241039; color-scheme: dark; } html:not([data-theme="light"]) body { background:#0b1424; color:var(--slate-900); } * { box-sizing: border-box; padding: 0; margin: 0; } html { scroll-behavior: smooth; } body { min-height: 100vh; font-family: Inter, Arial, sans-serif; color: var(--slate-900); background: var(--slate-50); line-height: 1.5; overflow-x: hidden; /* (mobile) guard against accidental horizontal scroll */ } /* ── (V2.2) app-wide motion ── */ .btn { transition: transform .12s ease, box-shadow .18s ease, background .18s ease; } .btn:active { transform: scale(.96); } @keyframes dhBadgePulse { 0%,100%{ box-shadow:0 0 0 0 rgba(217,119,6,0); } 50%{ box-shadow:0 0 0 4px rgba(217,119,6,.16); } } .badge-amber { animation: dhBadgePulse 2.2s ease-in-out infinite; } @keyframes dhRowIn { from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } } .upcoming-shift-row, .arow { animation: dhRowIn .35s ease both; } @media (prefers-reduced-motion: reduce) { *, ::before, ::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } } a { color: inherit; text-decoration: none; } button, input, select, textarea { font: inherit; } .app { min-height: 100vh; display: grid; grid-template-columns: 292px 1fr; } .sidebar { position: sticky; top: 0; height: 100vh; background: var(--slate-950); color: white; padding: 24px; display: flex; flex-direction: column; overflow-y: auto; } .brand { display: flex; align-items: center; gap: 12px; padding-bottom: 26px; border-bottom: 1px solid rgba(255, 255, 255, 0.10); } .brand-icon { width: 48px; height: 48px; border-radius: 18px; display: grid; place-items: center; background: var(--white); color: var(--slate-950); font-size: 25px; box-shadow: var(--shadow-sm); } .brand-title { font-size: 22px; font-weight: 950; letter-spacing: -0.05em; } .brand-subtitle { color: var(--slate-300); font-size: 12px; margin-top: -2px; } .driver-card { margin: 22px 0; border-radius: 24px; padding: 18px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.10); } .driver-row { display: flex; align-items: center; gap: 12px; } .avatar { width: 46px; height: 46px; border-radius: 16px; background: var(--emerald-500); color: white; display: grid; place-items: center; font-weight: 950; font-size: 18px; } .driver-name { font-weight: 900; letter-spacing: -0.03em; } .driver-meta { color: var(--slate-300); font-size: 12px; margin-top: 2px; } .readiness { margin-top: 16px; } .readiness-top { display: flex; justify-content: space-between; font-size: 12px; color: var(--slate-300); font-weight: 800; margin-bottom: 8px; } .progress { height: 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.12); overflow: hidden; } .progress span { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--emerald-500); transition: width 0.4s ease; } .nav { display: grid; gap: 8px; margin-top: 6px; } .nav a { display: flex; align-items: center; justify-content: center; text-align: center; gap: 10px; color: var(--slate-300); padding: 12px 14px; border-radius: 16px; font-weight: 800; font-size: 14px; transition: 0.18s; } .nav a:hover, .nav a.active { background: rgba(255, 255, 255, 0.10); color: white; } .sidebar-footer { margin-top: auto; padding-top: 22px; } .urgent-card { background: var(--amber-100); color: var(--amber-900); border-radius: 20px; padding: 16px; font-size: 13px; } .urgent-card strong { display: block; font-size: 15px; margin-bottom: 4px; } .main { min-width: 0; } .topbar { position: sticky; top: 0; z-index: 30; min-height: 76px; background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(14px); border-bottom: 1px solid var(--slate-200); display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 0 30px; } .mobile-menu { display: none; border: 0; background: var(--slate-950); color: white; width: 42px; height: 42px; border-radius: 14px; cursor: pointer; font-size: 20px; } .search { max-width: 460px; width: 100%; display: flex; align-items: center; gap: 10px; background: var(--slate-50); border: 1px solid var(--slate-200); border-radius: 16px; padding: 11px 14px; } .search input { border: 0; outline: 0; background: transparent; width: 100%; font-size: 14px; } .top-actions { display: flex; align-items: center; gap: 10px; } .icon-btn { width: 42px; height: 42px; border-radius: 15px; border: 1px solid var(--slate-200); background: var(--white); cursor: pointer; display: grid; place-items: center; font-size: 18px; position: relative; } .dot { position: absolute; top: 8px; right: 8px; width: 9px; height: 9px; border-radius: 999px; background: var(--red-700); border: 2px solid white; } .content { padding: 30px; } .page-head { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 24px; } .eyebrow { color: var(--emerald-700); font-size: 13px; font-weight: 950; letter-spacing: 0.08em; text-transform: uppercase; } h1 { margin-top: 6px; font-size: clamp(34px, 4vw, 54px); color: var(--slate-950); line-height: 1; letter-spacing: -0.065em; } h2 { color: var(--slate-950); font-size: 28px; line-height: 1.1; letter-spacing: -0.05em; } h3 { color: var(--slate-950); font-size: 20px; line-height: 1.15; letter-spacing: -0.035em; } .muted { color: var(--slate-500); font-size: 14px; } .btn { border: 0; border-radius: 14px; padding: 12px 16px; font-weight: 900; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: 0.18s; white-space: nowrap; } .btn:hover { transform: translateY(-1px); } .btn-dark { background: var(--slate-950); color: white; } .btn-dark:hover { background: var(--slate-800); } .btn-outline { background: var(--white); border: 1px solid var(--slate-200); color: var(--slate-800); } .btn-outline:hover { background: var(--slate-50); } .btn-amber { background: var(--amber-100); color: var(--amber-900); } .btn-emerald { background: var(--emerald-600); color: white; } .grid { display: grid; gap: 20px; } .overview-grid { grid-template-columns: repeat(4, 1fr); margin-bottom: 22px; } .card { background: var(--white); border: 1px solid var(--slate-200); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow-sm); } .stat-card { overflow: hidden; position: relative; } .stat-card::after { content: ""; position: absolute; right: -30px; top: -30px; width: 105px; height: 105px; border-radius: 999px; background: var(--emerald-50); } .stat-icon { position: relative; z-index: 2; width: 46px; height: 46px; border-radius: 16px; display: grid; place-items: center; background: var(--slate-950); color: white; font-size: 22px; margin-bottom: 16px; } .stat-value { position: relative; z-index: 2; font-size: 31px; font-weight: 950; color: var(--slate-950); letter-spacing: -0.055em; } .stat-label { position: relative; z-index: 2; margin-top: 3px; color: var(--slate-500); font-size: 14px; font-weight: 700; } .dash-grid { grid-template-columns: 1fr; align-items: start; } .card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; } .badge { display: inline-flex; align-items: center; border-radius: 999px; padding: 6px 10px; font-size: 12px; font-weight: 950; background: var(--slate-100); color: var(--slate-700); white-space: nowrap; } .badge-green { background: var(--emerald-100); color: var(--emerald-800); } .badge-amber { background: var(--amber-100); color: var(--amber-800); } .badge-red { background: var(--red-100); color: var(--red-800); } .badge-blue { background: var(--blue-100); color: var(--blue-700); } .active-shift { background: radial-gradient(circle at top right, rgba(16, 185, 129, 0.14), transparent 32%), white; } .shift-main { display: flex; justify-content: space-between; gap: 20px; margin-bottom: 18px; } .big-rate { background: var(--emerald-50); color: var(--emerald-900); border-radius: 20px; padding: 16px; min-width: 130px; text-align: right; align-self: flex-start; } .big-rate span { display: block; color: var(--emerald-700); font-size: 12px; font-weight: 900; } .big-rate strong { font-size: 23px; letter-spacing: -0.04em; } .info-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 18px 0; } .info-box { border: 1px solid var(--slate-200); border-radius: 18px; padding: 14px; background: var(--slate-50); } .info-box span { display: block; color: var(--slate-500); font-size: 12px; font-weight: 900; margin-bottom: 4px; } .info-box strong { color: var(--slate-950); font-size: 14px; } .step-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-top: 18px; } .step { border: 1px solid var(--slate-200); border-radius: 18px; background: var(--white); padding: 14px; text-align: left; cursor: pointer; transition: 0.18s; color: var(--slate-600); } .step strong { display: block; font-size: 12px; margin-bottom: 4px; } .step.active { border-color: #86efac; background: var(--emerald-50); color: var(--emerald-900); } .timeline { display: grid; gap: 12px; } .timeline-item { display: flex; gap: 12px; padding: 14px; border-radius: 18px; background: var(--slate-50); border: 1px solid var(--slate-200); } .timeline-dot { width: 32px; height: 32px; border-radius: 12px; background: var(--emerald-100); color: var(--emerald-800); display: grid; place-items: center; flex: 0 0 auto; font-weight: 950; } .section { margin-top: 26px; } .section-title-row { display: flex; justify-content: space-between; align-items: end; gap: 16px; margin-bottom: 16px; } .table-card { overflow-x: auto; padding: 0; } table { width: 100%; border-collapse: collapse; min-width: 780px; } th, td { text-align: left; padding: 16px 18px; border-bottom: 1px solid var(--slate-200); font-size: 14px; } th { color: var(--slate-500); background: var(--slate-50); font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; font-weight: 950; } tr:last-child td { border-bottom: 0; } td strong { color: var(--slate-950); } .booking-grid { grid-template-columns: repeat(3, 1fr); } .booking-card { border: 1px solid var(--slate-200); border-radius: 22px; padding: 18px; background: var(--white); } .booking-card-top { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 14px; } .document-grid { grid-template-columns: repeat(4, 1fr); } .document-card { border: 1px solid var(--slate-200); border-radius: 22px; background: var(--white); padding: 18px; } .document-icon { width: 44px; height: 44px; border-radius: 16px; display: grid; place-items: center; background: var(--slate-100); font-size: 21px; margin-bottom: 14px; } .payout-grid { grid-template-columns: 0.8fr 1.2fr; align-items: start; } .pay-summary { display: grid; gap: 12px; } .pay-row { display: flex; justify-content: space-between; gap: 12px; border: 1px solid var(--slate-200); background: var(--slate-50); border-radius: 18px; padding: 14px; } .pay-row strong { color: var(--slate-950); } .notification-grid { grid-template-columns: 0.8fr 1.2fr; } .toggle-list { display: grid; gap: 12px; } .toggle-card { display: flex; justify-content: space-between; gap: 14px; align-items: center; border: 1px solid var(--slate-200); border-radius: 20px; padding: 16px; background: var(--white); cursor: pointer; } .switch { width: 52px; height: 30px; border-radius: 999px; background: var(--slate-300); position: relative; flex: 0 0 auto; transition: 0.18s; } .switch::after { content: ""; position: absolute; top: 4px; left: 4px; width: 22px; height: 22px; border-radius: 999px; background: var(--white); transition: 0.18s; box-shadow: 0 3px 8px rgba(15, 23, 42, 0.18); } .toggle-card.active .switch { background: var(--emerald-600); } .toggle-card.active .switch::after { transform: translateX(22px); } .garage-prefs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } .garage-pref { border: 1px solid var(--slate-200); border-radius: 18px; background: var(--slate-50); padding: 14px; cursor: pointer; } .garage-pref.active { border-color: #86efac; background: var(--emerald-50); } .checkin-actions { display: flex; gap: 12px; margin-top: 18px; flex-wrap: wrap; } .checkin-actions .btn { flex: 1; min-width: 160px; } .checkin-actions .btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; } .rating-section { display: grid; gap: 14px; margin-top: 16px; } .rating-row { display: flex; align-items: center; gap: 14px; } .rating-label { min-width: 130px; font-size: 14px; font-weight: 800; color: var(--slate-700); } .rating-bar-wrap { flex: 1; height: 10px; border-radius: 999px; background: var(--slate-200); overflow: hidden; } .rating-bar { height: 100%; border-radius: inherit; background: var(--emerald-500); transition: width 0.4s; } .rating-bar.amber { background: var(--amber-700); } .rating-bar.red { background: var(--red-700); } .rating-score { min-width: 40px; text-align: right; font-weight: 900; font-size: 14px; color: var(--slate-950); } .warning-list { display: grid; gap: 10px; margin-top: 16px; } .warning-item { border: 1px solid var(--amber-200); background: var(--amber-50); border-radius: 18px; padding: 14px 16px; display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; } .warning-item.disputed { border-color: var(--blue-100); background: var(--blue-50); } .vehicle-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 16px; } .vehicle-card { border: 1px solid var(--slate-200); border-radius: 20px; padding: 18px; background: var(--white); cursor: pointer; transition: 0.18s; text-align: center; } .vehicle-card.known { border-color: #86efac; background: var(--emerald-50); } .vehicle-card.agency-approved { border-color: #6ee7b7; background: var(--emerald-50); } .vehicle-card .vehicle-img { font-size: 38px; margin-bottom: 10px; } .vehicle-card h3 { font-size: 15px; } .route-list { display: grid; gap: 10px; margin-top: 16px; } .route-item { display: flex; align-items: center; justify-content: space-between; gap: 14px; border: 1px solid var(--slate-200); border-radius: 18px; padding: 14px 16px; background: var(--white); cursor: pointer; } .route-item.known { border-color: #86efac; background: var(--emerald-50); } .route-number { width: 44px; height: 44px; border-radius: 14px; background: var(--slate-950); color: white; display: grid; place-items: center; font-weight: 950; font-size: 14px; flex: 0 0 auto; } .route-item.known .route-number { background: var(--emerald-600); } .other-work-list { display: grid; gap: 12px; margin-top: 16px; } .other-work-item { border: 1px solid var(--slate-200); border-radius: 18px; padding: 16px; background: var(--white); display: flex; justify-content: space-between; align-items: center; gap: 16px; } .country-row { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,0.10); } .country-row label { font-size: 12px; color: var(--slate-300); font-weight: 800; white-space: nowrap; } .country-select { background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.15); color: white; border-radius: 10px; padding: 6px 10px; font-size: 13px; font-weight: 800; width: 100%; outline: none; } .country-select option { background: var(--slate-900); } .score-big { font-size: 52px; font-weight: 950; letter-spacing: -0.06em; color: var(--slate-950); line-height: 1; } .score-label { color: var(--slate-500); font-size: 14px; margin-top: 4px; } .visibility-toggle { display: flex; align-items: center; gap: 10px; margin-top: 14px; font-size: 13px; font-weight: 800; color: var(--slate-600); } @media (max-width: 940px) { .vehicle-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 720px) { .vehicle-grid { grid-template-columns: 1fr; } } /* ── Payout summary ── */ .payout-summary-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; margin-bottom: 20px; } .payout-summary-card { background: var(--white); border: 1px solid var(--slate-200); border-radius: 22px; padding: 22px; box-shadow: var(--shadow-sm); } .payout-period { color: var(--slate-500); font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.07em; } .payout-amount { font-size: 30px; font-weight: 950; color: var(--slate-950); letter-spacing: -0.05em; margin-top: 4px; } /* ── Licence categories ── */ .licence-section-head { margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--slate-200); } .licence-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; margin-top: 16px; } .licence-card { border: 1.5px solid var(--slate-200); border-radius: 20px; padding: 18px 14px; background: var(--white); cursor: pointer; transition: 0.18s; text-align: center; } .licence-card:hover { border-color: var(--slate-400); } .licence-card.owned { border-color: #86efac; background: var(--emerald-50); } .licence-letter { font-size: 38px; font-weight: 950; color: var(--slate-800); letter-spacing: -0.05em; line-height: 1; } .licence-card.owned .licence-letter { color: var(--emerald-700); } .licence-card h3 { font-size: 13px; margin-top: 8px; color: var(--slate-700); } /* ── Depot map modal ── */ .map-modal .modal { width: min(800px,100%); } #leafletMap { height: 360px; border-radius: 18px; z-index: 1; position: relative; } /* ── Booking view modal ── */ .job-desc-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--slate-100); font-size: 14px; } .job-desc-row:last-child { border-bottom: 0; } .job-desc-row span:first-child { color: var(--slate-500); font-weight: 800; flex-shrink: 0; } /* (alignment pass) keep the value of label:value rows flush to the right edge */ .job-desc-row span:last-child { margin-left: auto; text-align: right; } /* ── Calendar modal ── */ .cal-header { display: grid; grid-template-columns: repeat(7,1fr); gap: 4px; margin-bottom: 4px; } .cal-header span { text-align: center; font-size: 11px; font-weight: 900; color: var(--slate-500); text-transform: uppercase; } .cal-grid { display: grid; grid-template-columns: repeat(7,1fr); gap: 4px; } .cal-day { aspect-ratio: 1; border-radius: 10px; display: grid; place-items: center; font-size: 13px; font-weight: 800; cursor: default; color: var(--slate-700); } .cal-day.has-shift { background: var(--emerald-100); color: var(--emerald-800); border: 1.5px solid #86efac; } .cal-day.today-cal { background: var(--slate-950); color: white; } .cal-month-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-top: 18px; } .cal-stat { background: var(--slate-50); border-radius: 16px; padding: 16px; text-align: center; } .cal-stat strong { display: block; font-size: 22px; font-weight: 950; letter-spacing: -0.04em; color: var(--slate-950); margin-top: 3px; } /* ── OW calendar picker ── */ .ow-cal-grid { display: grid; grid-template-columns: repeat(7,1fr); gap: 4px; margin-top: 10px; } .ow-cal-day { aspect-ratio: 1; border-radius: 10px; display: grid; place-items: center; font-size: 13px; font-weight: 800; cursor: pointer; border: 1px solid transparent; transition: 0.15s; color: var(--slate-700); } .ow-cal-day:hover:not(.ow-empty) { background: var(--slate-100); } .ow-cal-day.ow-selected { background: var(--emerald-600); color: white; } .ow-cal-day.ow-empty { cursor: default; } .ow-time-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; } .rest-info { background: var(--amber-50); border: 1px solid var(--amber-200); border-radius: 16px; padding: 12px 14px; margin-top: 12px; font-size: 13px; color: var(--amber-900); font-weight: 800; } /* ── Job card urgency colour coding (green → amber → red) ── */ .job-green { background: var(--emerald-50) !important; border-color: #86efac !important; border-left: 6px solid var(--emerald-500) !important; } .job-amber { background: var(--amber-50) !important; border-color: var(--amber-200) !important; border-left: 6px solid var(--amber-700) !important; } .job-red { background: var(--red-50) !important; border-color: #fecaca !important; border-left: 6px solid var(--red-700) !important; } /* ── Favourited shift row ── */ .fav-row td { background: var(--amber-50); } .fav-row td:first-child { border-left: 4px solid var(--amber-700); } /* ── Full shift row (no vacancies) ── */ .shift-full td { background: var(--red-50); } .shift-full td:first-child { border-left: 5px solid var(--red-700); } /* ── Color timers ── */ .timer-green { color: var(--emerald-700) !important; } .timer-amber { color: var(--amber-700) !important; } .timer-red { color: var(--red-700) !important; animation: pulse-red 1s infinite; } .timer-expired { color: var(--slate-400) !important; } @keyframes pulse-red { 0%,100%{opacity:1} 50%{opacity:0.5} } /* ── Notifications 3-part ── */ .notif-part { margin-top: 20px; } .notif-part-title { font-size: 17px; font-weight: 950; color: var(--slate-950); letter-spacing: -0.03em; margin-bottom: 12px; } .agency-notif-list { display: grid; gap: 10px; } .agency-notif-item { display: flex; justify-content: space-between; align-items: center; gap: 14px; border: 1px solid var(--slate-200); border-radius: 18px; padding: 14px 16px; background: var(--white); cursor: pointer; } .agency-notif-item.active { border-color: #86efac; background: var(--emerald-50); } @media (max-width:940px) { .payout-summary-grid { grid-template-columns: repeat(2,1fr); } .licence-grid { grid-template-columns: repeat(2,1fr); } } @media (max-width:600px) { .payout-summary-grid { grid-template-columns: repeat(2,1fr); } .licence-grid { grid-template-columns: repeat(2,1fr); } } /* ── Page section card (one per page now) ── */ .content > section { display: block; background: var(--slate-100); border: 1.5px solid var(--slate-200); border-radius: 28px; padding: 28px; margin-top: 0; } /* ── Other-work calendar entry markers ── */ .ow-cal-day { position: relative; } .ow-cal-day.ow-has-entry { border-color: #86efac; background: var(--emerald-50); color: var(--emerald-800); } .ow-dot { position: absolute; bottom: 3px; left: 50%; transform: translateX(-50%); width: 5px; height: 5px; border-radius: 999px; background: var(--emerald-600); } /* ── Dashboard timer cards ── */ .dash-timer-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 16px; margin-top: 22px; } .dash-timer-card { background: var(--white); border: 1px solid var(--slate-200); border-radius: 22px; padding: 22px; box-shadow: var(--shadow-sm); } .dash-timer-card .label { color: var(--slate-500); font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.07em; } .dash-timer-card .value { font-size: 26px; font-weight: 950; letter-spacing: -0.04em; color: var(--slate-950); margin-top: 6px; } .dash-timer-card .sub { color: var(--slate-500); font-size: 13px; margin-top: 6px; } @media (max-width:720px){ .dash-timer-grid { grid-template-columns: 1fr; } } /* ── Upcoming shifts ── */ .upcoming-list { display: grid; gap: 14px; margin-top: 16px; } .upcoming-shift-row { border: 1px solid var(--slate-200); border-radius: 22px; padding: 20px 22px; background: var(--white); display: flex; align-items: center; gap: 18px; flex-wrap: wrap; } .upcoming-shift-row.is-today { border-color: #86efac; background: var(--emerald-50); } .upcoming-shift-row.cancelled { opacity: 0.52; background: var(--slate-50); } .upcoming-details { flex: 1; min-width: 0; } .cancel-area { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-end; } .cancel-timer { font-size: 12px; font-weight: 900; color: var(--amber-700); white-space: nowrap; } .cancel-timer.expired { color: var(--slate-400); } .checkin-btns { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; } .checkin-btns .btn { flex: 1; min-width: 140px; } .checkin-btns .btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; } .modal-backdrop { position: fixed; inset: 0; background: rgba(2, 6, 23, 0.58); z-index: 100; display: none; align-items: center; justify-content: center; padding: 20px; } .modal-backdrop.open { display: flex; } .modal { width: min(560px, 100%); background: var(--white); border-radius: 28px; padding: 26px; box-shadow: var(--shadow); } .modal-head { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 18px; } .close-button { border: 0; width: 44px; height: 44px; border-radius: 999px; cursor: pointer; background: var(--red-700); color: #fff; font-size: 22px; font-weight: 900; line-height: 1; } .close-button:hover { background: var(--red-800); } /* confirm = green, deny/cancel = red (used site-wide) */ .btn-confirm { background: var(--emerald-600) !important; color:#fff !important; } .btn-deny { background: var(--red-700) !important; color:#fff !important; } .contact-opt { display:inline-flex; align-items:center; gap:8px; border:1px solid var(--slate-200); border-radius:12px; padding:10px 14px; font-weight:700; font-size:14px; cursor:pointer; background:var(--slate-50); } .contact-opt:has(input:checked) { background: var(--emerald-50); border-color: var(--emerald-600); color: var(--emerald-800); } /* (#32 V1.4) clearer contrast — inputs/selects/textareas look distinctly clickable */ input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="number"], input[type="date"], input[type="time"], input[type="search"], select, textarea { background: var(--slate-50); border: 1.5px solid var(--slate-300); transition: border-color .15s, box-shadow .15s, background .15s; } input:focus, select:focus, textarea:focus { outline: none; background: var(--white); border-color: var(--emerald-600); box-shadow: 0 0 0 3px rgba(5,150,105,0.15); } select { cursor: pointer; } /* cards/sections sit on a subtle tint so panels are distinguishable from page */ .card { border: 1px solid var(--slate-200); } .section-white .card, .card.card { background: var(--white); } .stat-card:hover { border-color: var(--emerald-600); } .form-field { margin-top: 16px; } .form-field label { display: block; color: var(--slate-700); font-size: 14px; font-weight: 950; margin-bottom: 8px; } .form-field select, .form-field textarea, .form-field input { width: 100%; border: 1px solid var(--slate-200); border-radius: 16px; padding: 13px 14px; outline: 0; background: var(--white); } .form-field textarea { min-height: 130px; resize: vertical; } .modal-actions { display: flex; gap: 10px; margin-top: 20px; } .toast { position: fixed; right: 22px; bottom: 22px; background: var(--slate-950); color: white; padding: 14px 18px; border-radius: 16px; box-shadow: var(--shadow); display: none; z-index: 120; max-width: 360px; font-weight: 800; } .toast.show { display: block; animation: pop 0.22s ease-out; } @keyframes pop { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } .mobile-overlay { display: none; } @media (max-width: 1200px) { .overview-grid, .document-grid { grid-template-columns: repeat(2, 1fr); } .dash-grid, .payout-grid, .notification-grid { grid-template-columns: 1fr; } .step-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 940px) { .app { grid-template-columns: 1fr; } .sidebar { position: fixed; inset: 0 auto 0 0; width: 292px; z-index: 80; transform: translateX(-105%); transition: 0.22s; } .sidebar.open { transform: translateX(0) !important; } .mobile-overlay { position: fixed; inset: 0; background: rgba(2, 6, 23, 0.58); z-index: 70; } .mobile-overlay.open { display: block; } .mobile-menu { display: grid; place-items: center; } .topbar { padding: 0 18px; } .content { padding: 22px 18px; } .page-head { flex-direction: column; align-items: stretch; } .top-actions { display: none; } } @media (max-width: 720px) { .overview-grid, .booking-grid, .document-grid, .garage-prefs, .info-grid { grid-template-columns: 1fr; } .step-grid { grid-template-columns: 1fr; } .shift-main, .card-head, .section-title-row { flex-direction: column; align-items: stretch; } .big-rate { width: 100%; text-align: left; } .modal-actions { flex-direction: column; } h1 { font-size: 38px; } } /* (V2.0 #9) mobile polish pass — roomier tap targets, no cramped rows, legible text */ @media (max-width: 720px) { .content { padding-left: 16px; padding-right: 16px; } h1 { font-size: clamp(26px, 8vw, 34px); line-height: 1.15; } h2 { font-size: clamp(20px, 6vw, 24px); } /* comfortable, finger-friendly buttons that never crowd each other */ .btn { min-height: 44px; padding: 11px 16px; font-size: 14px; } /* button groups wrap and breathe instead of squashing on one line */ .section-title-row > div, .card-head > div { width: 100%; } .section-title-row div[style*="display:flex"], .checkin-btns, .modal-actions { flex-wrap: wrap; gap: 10px; } .section-title-row .btn, .card-head .btn { flex: 1 1 auto; } /* full-width inputs at 16px stop iOS from zooming on focus */ input, select, textarea { font-size: 16px; } input:not([type="checkbox"]):not([type="radio"]), select, textarea { width: 100%; } /* tables scroll sideways rather than overflow the screen */ .table-card { overflow-x: auto; -webkit-overflow-scrolling: touch; } .table-card table { min-width: 560px; } /* stacked job/shift rows */ .upcoming-shift-row, .job-acc-head, .drv-row { flex-direction: column; align-items: stretch; } .upcoming-shift-row .btn, .drv-row .btn { width: 100%; } .stat-card { padding: 16px; } .stat-value { font-size: 26px; } } @media (max-width: 420px) { .content { padding-left: 12px; padding-right: 12px; } .badge { font-size: 11px; } }