/* ========================================================================== AlTayer Admin — design layer MudBlazor owns the component look (see Theme/AlTayerTheme.cs). This file owns everything MudBlazor has no opinion about: the brand surfaces, the schedule grid, the delivery-status palette, and the plain inputs on the login page. Colour rules come from docs/mobile-frontend/README.md §4: · brand orange #F9811D works on black (7.67) and FAILS on white (2.57), so light mode uses #B64F0C for anything text-sized; · status is never colour alone — always a dot plus a written label. The theme toggle mirrors its state onto , which is how the tokens below switch. The inline script in App.razor sets it before first paint. ========================================================================== */ :root { --al-brand: #B64F0C; --al-brand-bright: #F9811D; /* Delivery lifecycle — light mode (spec §4.3) */ --al-status-assigned: #57575C; --al-status-accepted: #A84A0D; --al-status-picked-up: #B64F0C; --al-status-in-transit: #B64F0C; --al-status-delivered: #1A7F37; --al-status-cancelled: #C0392B; /* Order-only states (light) */ --al-status-pending: #8A6D1F; --al-status-returned: #7A3E9D; --al-radius-sm: 8px; --al-radius-md: 12px; --al-radius-lg: 20px; /* Elevation, rebuilt as soft brand-neutral shadows. MudBlazor's defaults are tuned for white Material surfaces and read as grey smudges on near-black. */ --al-shadow-sm: 0 1px 2px rgba(11, 11, 12, .06), 0 1px 1px rgba(11, 11, 12, .04); --al-shadow-md: 0 2px 8px rgba(11, 11, 12, .07), 0 1px 2px rgba(11, 11, 12, .05); --al-shadow-lg: 0 12px 32px rgba(11, 11, 12, .12), 0 2px 8px rgba(11, 11, 12, .06); --al-glow: 0 0 0 1px rgba(249, 129, 29, .35); } html[data-al-theme="dark"] { --al-brand: #F9811D; --al-brand-bright: #FFB169; --al-status-assigned: #8A8A8F; --al-status-accepted: #B64F0C; --al-status-picked-up: #DB6613; --al-status-in-transit: #F9811D; --al-status-delivered: #3FB950; --al-status-cancelled: #F85149; /* Order-only states (dark) */ --al-status-pending: #E3B341; --al-status-returned: #BC8CFF; --al-shadow-sm: 0 1px 2px rgba(0, 0, 0, .5); --al-shadow-md: 0 2px 10px rgba(0, 0, 0, .55); --al-shadow-lg: 0 16px 40px rgba(0, 0, 0, .6), 0 2px 8px rgba(0, 0, 0, .4); } /* Painted before Blazor boots so the first frame isn't a white flash on a dark theme. */ html { background: #FAFAF9; } html[data-al-theme="dark"] { background: #0B0B0C; color-scheme: dark; } html, body { font-family: Inter, 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Keyboard focus stays visible and on-brand everywhere. */ :focus-visible { outline: 2px solid var(--al-brand); outline-offset: 2px; } /* -------------------------------------------------------------------------- Scrollbars — the default light scrollbar on a near-black page is a bright bar. -------------------------------------------------------------------------- */ * { scrollbar-width: thin; scrollbar-color: var(--mud-palette-lines-default) transparent; } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background: var(--mud-palette-lines-default); border: 3px solid transparent; background-clip: content-box; border-radius: 999px; } *::-webkit-scrollbar-thumb:hover { background-color: var(--mud-palette-text-disabled); background-clip: content-box; } /* -------------------------------------------------------------------------- Shell -------------------------------------------------------------------------- */ .al-appbar { border-bottom: 1px solid var(--mud-palette-lines-default); backdrop-filter: saturate(140%) blur(12px); background-color: color-mix(in srgb, var(--mud-palette-appbar-background) 85%, transparent) !important; } .al-drawer { border-right: 1px solid var(--mud-palette-lines-default); } .al-brand { display: flex; align-items: center; gap: 10px; min-width: 0; text-decoration: none; color: inherit; } .al-brand__mark { width: 32px; height: 32px; flex: 0 0 32px; } .al-brand__name { font-weight: 700; font-size: 1rem; letter-spacing: -.02em; line-height: 1.1; white-space: nowrap; } .al-brand__sub { font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--mud-palette-text-secondary); line-height: 1.1; } /* Nav items: pill-shaped, brand-tinted when active, with a leading marker. */ .al-nav .mud-nav-link { border-radius: var(--al-radius-sm); margin: 2px 10px; padding-top: 9px; padding-bottom: 9px; font-weight: 500; transition: background-color .12s ease, color .12s ease; } .al-nav .mud-nav-link.active { background: color-mix(in srgb, var(--al-brand-bright) 14%, transparent); color: var(--al-brand); font-weight: 600; } .al-nav .mud-nav-link.active .mud-nav-link-icon { color: var(--al-brand); } .al-nav .mud-nav-link.active::before { content: ""; position: absolute; left: 0; top: 20%; height: 60%; width: 3px; border-radius: 0 3px 3px 0; background: var(--al-brand); } .al-nav .mud-nav-link { position: relative; } .al-nav-section { font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--mud-palette-text-disabled); padding: 18px 22px 6px; } .al-drawer-footer { margin-top: auto; padding: 12px 16px 16px; border-top: 1px solid var(--mud-palette-lines-default); } .al-user-btn { text-transform: none; padding-left: 6px; padding-right: 10px; border-radius: 999px; } .al-user-btn .al-avatar { width: 30px; height: 30px; flex-basis: 30px; font-size: .72rem; } /* Sign-out is a real
post inside the user menu; make its button read as a menu item. */ .al-menu-form button { display: flex; align-items: center; width: 100%; padding: 10px 16px; border: 0; background: none; color: var(--mud-palette-text-primary); font: inherit; font-size: .875rem; text-align: left; cursor: pointer; } .al-menu-form button:hover { background: var(--mud-palette-action-default-hover); } /* -------------------------------------------------------------------------- Page furniture -------------------------------------------------------------------------- */ .al-page { padding-bottom: 48px; } .al-page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; } .al-page-header__title { display: flex; align-items: center; gap: 12px; } /* The icon tile that leads every page title — a soft brand-tinted square. */ .al-tile { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: 0 0 40px; border-radius: var(--al-radius-md); background: color-mix(in srgb, var(--al-brand-bright) 14%, transparent); color: var(--al-brand); } .al-tile--lg { width: 48px; height: 48px; flex-basis: 48px; } .al-muted { color: var(--mud-palette-text-secondary); } .al-faint { color: var(--mud-palette-text-disabled); } .al-mono { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; } .al-card { border: 1px solid var(--mud-palette-lines-default); border-radius: var(--al-radius-md); background: var(--mud-palette-surface); box-shadow: var(--al-shadow-sm) !important; } .al-card--hover { transition: box-shadow .15s ease, border-color .15s ease, transform .15s ease; } .al-card--hover:hover { box-shadow: var(--al-shadow-md) !important; border-color: color-mix(in srgb, var(--al-brand-bright) 45%, var(--mud-palette-lines-default)); } .al-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; } .al-toolbar__search { flex: 1 1 260px; max-width: 360px; } .al-toolbar__filter { flex: 0 1 200px; } /* -------------------------------------------------------------------------- Stat cards (dashboard) -------------------------------------------------------------------------- */ .al-stat { padding: 18px 20px; height: 100%; display: flex; flex-direction: column; gap: 10px; } .al-stat__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .al-stat__label { font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--mud-palette-text-secondary); } .al-stat__value { font-size: 2rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; font-variant-numeric: tabular-nums; } .al-stat__value--empty { color: var(--mud-palette-text-disabled); font-weight: 500; } .al-stat__hint { font-size: .75rem; color: var(--mud-palette-text-disabled); } /* -------------------------------------------------------------------------- Status — dot + label, never colour alone (spec §4.3) -------------------------------------------------------------------------- */ .al-status { display: inline-flex; align-items: center; gap: 7px; font-size: .78rem; font-weight: 600; white-space: nowrap; } .al-status__dot { width: 8px; height: 8px; border-radius: 999px; flex: 0 0 8px; background: currentColor; } .al-status--live .al-status__dot { box-shadow: 0 0 0 0 currentColor; animation: al-pulse 1.8s ease-out infinite; } @keyframes al-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 60%, transparent); } 70% { box-shadow: 0 0 0 6px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } } @media (prefers-reduced-motion: reduce) { .al-status--live .al-status__dot { animation: none; } } .al-status--active { color: var(--al-status-delivered); } .al-status--inactive { color: var(--mud-palette-text-disabled); } .al-status--online { color: var(--al-status-in-transit); } .al-status--assigned { color: var(--al-status-assigned); } .al-status--accepted { color: var(--al-status-accepted); } .al-status--picked-up { color: var(--al-status-picked-up); } .al-status--in-transit { color: var(--al-status-in-transit); } .al-status--delivered { color: var(--al-status-delivered); } .al-status--cancelled { color: var(--al-status-cancelled); } .al-status--pending { color: var(--al-status-pending); } .al-status--returned { color: var(--al-status-returned); } /* -------------------------------------------------------------------------- Tables -------------------------------------------------------------------------- */ .al-table thead th { font-size: .7rem !important; font-weight: 700 !important; letter-spacing: .07em; text-transform: uppercase; color: var(--mud-palette-text-secondary) !important; white-space: nowrap; background: var(--mud-palette-background-gray); } .al-table tbody td { padding-top: 10px; padding-bottom: 10px; } .al-table .al-num { text-align: right; font-variant-numeric: tabular-nums; } /* Row actions stay quiet until the row is hovered — the data is the point. */ .al-row-actions { display: flex; justify-content: flex-end; gap: 2px; opacity: .55; transition: opacity .12s ease; } .al-table tbody tr:hover .al-row-actions, .al-row-actions:focus-within { opacity: 1; } .al-avatar { width: 34px; height: 34px; border-radius: var(--al-radius-sm); display: inline-flex; align-items: center; justify-content: center; font-size: .78rem; font-weight: 700; letter-spacing: .02em; background: color-mix(in srgb, var(--al-brand-bright) 16%, transparent); color: var(--al-brand); flex: 0 0 34px; } .al-cell-stack { display: flex; align-items: center; gap: 10px; min-width: 0; } .al-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .al-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 48px 24px; color: var(--mud-palette-text-secondary); } .al-empty__icon { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: var(--al-radius-lg); background: var(--mud-palette-background-gray); color: var(--mud-palette-text-disabled); margin-bottom: 6px; } /* -------------------------------------------------------------------------- Schedule grid (shared by the Drivers and Shops tabs of /schedule) -------------------------------------------------------------------------- */ .al-grid-scroll { overflow-x: auto; } .al-grid { min-width: 900px; } .al-grid th, .al-grid td { padding: 6px 8px; vertical-align: middle; } .al-grid thead th { border-bottom: 1px solid var(--mud-palette-lines-default); } .al-col-driver { width: 280px; min-width: 280px; } .al-col-day { width: 96px; min-width: 96px; text-align: center; } .al-dayname { font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: var(--mud-palette-text-secondary); } .al-daynum { font-size: 1.05rem; font-weight: 700; line-height: 1.15; } .al-today .al-daynum { color: var(--al-brand); } .al-today { background: color-mix(in srgb, var(--al-brand-bright) 8%, transparent); } .al-cell { width: 100%; min-height: 44px; display: flex; align-items: center; justify-content: center; gap: 4px; border: 1px solid transparent; border-radius: var(--al-radius-sm); font-size: .78rem; font-weight: 600; cursor: pointer; transition: filter .12s ease, box-shadow .12s ease; } .al-cell:hover:not(:disabled) { filter: brightness(1.06); box-shadow: 0 0 0 2px var(--al-brand); } .al-cell:disabled { cursor: progress; opacity: .7; } .al-cell-lock { opacity: .55; } .al-working { background: var(--mud-palette-surface); border-color: var(--mud-palette-lines-default); color: var(--mud-palette-text-secondary); font-weight: 500; } .al-off-baseline { background: var(--mud-palette-action-disabled-background); border-color: var(--mud-palette-lines-default); color: var(--mud-palette-text-primary); } .al-off-override { background: var(--al-status-picked-up); color: #fff; } .al-custom { background: color-mix(in srgb, var(--al-brand-bright) 22%, transparent); border-color: var(--al-brand); color: var(--al-brand); } .al-swatch { width: 14px; height: 14px; border-radius: 4px; display: inline-block; } .al-swatch.al-working { background: var(--mud-palette-surface); border: 1px solid var(--mud-palette-lines-default); } .al-swatch.al-off-baseline { border: 1px solid var(--mud-palette-lines-default); } .al-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; padding: 12px 16px; margin-top: 12px; border: 1px solid var(--mud-palette-lines-default); border-radius: var(--al-radius-md); background: var(--mud-palette-background-gray); } /* -------------------------------------------------------------------------- Login — plain inputs posting to /account/*, so MudBlazor fields can't be used. These are hand-styled to match a MudBlazor outlined field. -------------------------------------------------------------------------- */ .al-login-shell { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; position: relative; overflow: hidden; background: var(--mud-palette-background); } /* Two soft brand glows behind the card — the only decoration on the page. */ .al-login-shell::before, .al-login-shell::after { content: ""; position: absolute; border-radius: 50%; filter: blur(90px); pointer-events: none; } .al-login-shell::before { width: 460px; height: 460px; top: -160px; right: -120px; background: color-mix(in srgb, var(--al-brand-bright) 26%, transparent); } .al-login-shell::after { width: 380px; height: 380px; bottom: -160px; left: -120px; background: color-mix(in srgb, var(--al-brand-bright) 16%, transparent); } .al-login-card { position: relative; width: 100%; max-width: 420px; padding: 36px 32px 32px; border: 1px solid var(--mud-palette-lines-default); border-radius: var(--al-radius-lg); background: var(--mud-palette-surface); box-shadow: var(--al-shadow-lg); } .al-login-head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; margin-bottom: 28px; } .al-login-head .al-brand__mark { width: 52px; height: 52px; flex-basis: 52px; margin-bottom: 8px; } .al-field { margin-bottom: 18px; } .al-field__label { display: block; margin-bottom: 6px; font-size: .78rem; font-weight: 600; color: var(--mud-palette-text-secondary); } .al-input { width: 100%; padding: 12px 14px; border: 1px solid var(--mud-palette-lines-inputs); border-radius: var(--al-radius-sm); background: var(--mud-palette-surface); color: var(--mud-palette-text-primary); font-family: inherit; font-size: .95rem; outline: none; box-sizing: border-box; transition: border-color .12s ease, box-shadow .12s ease; } .al-input::placeholder { color: var(--mud-palette-text-disabled); } .al-input:hover { border-color: var(--mud-palette-text-secondary); } .al-input:focus { border-color: var(--al-brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--al-brand-bright) 22%, transparent); } .al-phone { display: flex; gap: 8px; } /* Fixed-width so the dial code never squeezes the number field. */ .al-phone__code { flex: 0 0 7.5rem; } .al-phone__number { flex: 1 1 auto; min-width: 0; } /* The OTP box is the whole point of that step — make it look like one. */ .al-otp { text-align: center; font-size: 1.6rem; font-weight: 600; letter-spacing: .5em; text-indent: .5em; padding: 14px; font-variant-numeric: tabular-nums; } /* -------------------------------------------------------------------------- Weekly hours editor — seven rows that have to stay readable while half of them are collapsed to the word "Closed". -------------------------------------------------------------------------- */ .al-hours-row { display: grid; grid-template-columns: minmax(140px, 1.2fr) minmax(120px, 1fr) minmax(120px, 1fr) minmax(120px, 1.2fr); align-items: center; gap: 8px; padding: 4px 0; border-bottom: 1px solid var(--mud-palette-divider-light); } .al-hours-row:last-of-type { border-bottom: 0; } .al-hours-row--closed .al-hours-row__day { opacity: .65; } .al-hours-row__note--wide { grid-column: 2 / -1; } @media (max-width: 720px) { .al-hours-row { grid-template-columns: 1fr 1fr; } .al-hours-row__day { grid-column: 1 / -1; } .al-hours-row__note { grid-column: 1 / -1; } } /* -------------------------------------------------------------------------- Map picker (Google Maps) -------------------------------------------------------------------------- */ .al-map { height: 320px; width: 100%; border-radius: var(--al-radius-md); border: 1px solid var(--mud-palette-lines-default); overflow: hidden; background: var(--mud-palette-background-gray); z-index: 0; /* keep the map surface under MudBlazor dialogs/popovers */ } /* -------------------------------------------------------------------------- Fleet map (live dispatch) -------------------------------------------------------------------------- */ .al-fleet-map { width: 100%; height: 100%; min-height: 420px; border-radius: var(--al-radius-md); border: 1px solid var(--mud-palette-lines-default); overflow: hidden; background: var(--mud-palette-background-gray); z-index: 0; } /* Marker popups — content inside a Google InfoWindow. The window itself is always light (Google doesn't theme it), so these just size and mute the text. */ .al-map-pop { font-size: .82rem; line-height: 1.4; color: #202124; } .al-map-pop-muted { color: #5f6368; font-size: .78rem; } /* Legend swatches reused from status colours, but the map needs its own small dots. */ .al-fleet-swatch { width: 12px; height: 12px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--mud-palette-lines-default); flex: 0 0 12px; } /* The map fills the viewport below the header, so a dispatcher isn't scrolling a letterbox. */ .al-fleet-map-wrap { position: relative; height: calc(100vh - 220px); min-height: 460px; } .al-fleet-map-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--mud-palette-background-gray) 70%, transparent); border-radius: var(--al-radius-md); z-index: 1; } .al-map-coords { display: flex; align-items: center; gap: 6px; font-size: .78rem; font-variant-numeric: tabular-nums; color: var(--mud-palette-text-secondary); } .al-map-hint { font-size: .75rem; color: var(--mud-palette-text-disabled); } /* -------------------------------------------------------------------------- Orders — figures, lifecycle timeline, dispatch funnel, evidence photos -------------------------------------------------------------------------- */ .al-figure__label { font-size: .68rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--mud-palette-text-secondary); } .al-figure__value { font-size: 1.05rem; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.3; } .al-figure__value--strong { color: var(--al-brand); font-weight: 700; } .al-figure__hint { font-size: .75rem; color: var(--mud-palette-text-disabled); font-variant-numeric: tabular-nums; } /* Vertical lifecycle timeline */ .al-timeline { position: relative; padding-left: 6px; } .al-timeline__row { position: relative; display: flex; gap: 12px; padding-bottom: 16px; } .al-timeline__row:last-child { padding-bottom: 0; } /* the connecting line */ .al-timeline__row::before { content: ""; position: absolute; left: 5px; top: 14px; bottom: -2px; width: 2px; background: var(--mud-palette-lines-default); } .al-timeline__row:last-child::before { display: none; } .al-timeline__dot { position: relative; z-index: 1; flex: 0 0 12px; width: 12px; height: 12px; margin-top: 3px; border-radius: 50%; background: var(--mud-palette-surface); border: 2px solid var(--mud-palette-lines-default); } .al-timeline__row.is-done .al-timeline__dot { background: var(--al-status-delivered); border-color: var(--al-status-delivered); } .al-timeline__row.is-alert .al-timeline__dot { background: var(--al-status-returned); border-color: var(--al-status-returned); } .al-timeline__row.is-pending .al-timeline__body { opacity: .55; } /* Dispatch funnel */ .al-funnel { display: flex; align-items: stretch; gap: 6px; } .al-funnel__stage { flex: 1 1 0; text-align: center; padding: 10px 6px; border: 1px solid var(--mud-palette-lines-default); border-radius: var(--al-radius-sm); background: var(--mud-palette-background-gray); position: relative; } .al-funnel__stage:not(:last-child)::after { content: "›"; position: absolute; right: -8px; top: 50%; transform: translateY(-50%); color: var(--mud-palette-text-disabled); font-size: 1.1rem; z-index: 1; } .al-funnel__stage.is-highlight { border-color: var(--al-brand); background: color-mix(in srgb, var(--al-brand-bright) 12%, transparent); } .al-funnel__count { font-size: 1.4rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.1; } .al-funnel__stage.is-highlight .al-funnel__count { color: var(--al-brand); } .al-funnel__label { font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; color: var(--mud-palette-text-secondary); margin-top: 2px; } /* Evidence photos */ .al-photo-thumb { padding: 0; border: 1px solid var(--mud-palette-lines-default); border-radius: var(--al-radius-md); background: var(--mud-palette-background-gray); cursor: pointer; overflow: hidden; position: relative; width: 140px; height: 140px; display: block; transition: border-color .12s ease, box-shadow .12s ease; } .al-photo-thumb:hover { border-color: var(--al-brand); box-shadow: var(--al-shadow-md); } .al-photo-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .al-photo-thumb__label { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 4px; justify-content: center; padding: 5px; font-size: .72rem; font-weight: 600; color: #fff; background: linear-gradient(to top, rgba(0,0,0,.7), transparent); } .al-photo-full { display: flex; justify-content: center; } .al-photo-full img { max-width: 100%; max-height: 70vh; border-radius: var(--al-radius-sm); } /* -------------------------------------------------------------------------- Framework error UI -------------------------------------------------------------------------- */ .blazor-error-boundary { background: #C0392B; padding: 1rem; border-radius: var(--al-radius-md); color: white; } .blazor-error-boundary::after { content: "An error has occurred."; }