/* ===================================================================================================================== Move theme (bundle L1) · redesign direction B, "Stripe × Samsara" ("cells") Plain CSS, no build step. Linked from every admin page and both sign-in pages with a ?v= cache-buster (App\Support\MoveTheme::headHtml). Filament's own CSS sits in cascade layers, so these unlayered rules win over it. --------------------------------------------------------------------------------------------------------------------- TOKEN CONTRACT (stable names; L2 · Today dashboard and L3 · driver app read these, never redefine them) Use them with a fallback, e.g. color: var(--mv-ink, #111C24); --------------------------------------------------------------------------------------------------------------------- Brand (white-label safe: these follow Filament's primary scale, which a company's own colour replaces) --mv-brand var(--primary-600) charge teal #0B6670 by default · primary button, links, active item, focus, mark --mv-brand-hover var(--primary-700) #08525A by default --mv-brand-tint var(--primary-50) #E6F2F3 by default · active menu item, selected row --mv-brand-ring the brand at 16% · focus ring around inputs Filament v5 holds every shade as a complete colour (oklch(...)), not an "r g b" triplet: use var(--primary-600) directly, never rgb(var(--primary-600)). Outside Filament pages (the driver app) --primary-* do not exist, so the brand tokens fall back to the Move teal. Ink and surfaces --mv-ink #111C24 (text) · --mv-ink-2 #4A5763 (secondary, 7.4:1) · --mv-ink-3 #5F6B76 (labels, 5.5:1) --mv-line #E3E8EC (hairlines) · --mv-line-2 #EEF1F4 (inner dividers) · --mv-bg #F6F8F9 (page) · --mv-surface #FFFFFF (cards) --mv-radius 10px (cards) · --mv-radius-sm 8px (inputs, buttons) · --mv-radius-xs 5px (chips) --mv-shadow 0 1px 2px rgba(17,28,36,.06), 0 1px 1px rgba(17,28,36,.04) Status (text on tint; money goes green → amber → red, vehicles are blue or hollow) --mv-paid #17703A on --mv-paid-bg #E7F4EC Paid / On rent (--mv-paid-mark #2E9E57 for filled cells) --mv-due #8A4B00 on --mv-due-bg #FFF3D6 Due (--mv-due-mark #D98E04) --mv-over #B42318 on --mv-over-bg #FDECEA Overdue / Breakdown (--mv-over-mark #D9493A) --mv-shop #1D5BBF on --mv-shop-bg #E8F0FC In workshop (--mv-shop-mark #3B76D9) --mv-idle #4B5563 on --mv-idle-bg #EEF0F3 Idle (outlined cell) (--mv-idle-mark #8A96A1) Type --mv-font 'Geist', 'Noto Sans Devanagari', ui-sans-serif, system-ui, sans-serif (self-hosted, public/fonts/geist) --mv-mono 'Geist Mono', ui-monospace, monospace (registrations: KA01 DM 2002) Layout --mv-sidebar 14.5rem (232px) · --mv-topbar 3.5rem (56px) Reusable classes (any bundle may use them): .mv-mono (a plate), .mv-chip + .mv-chip--paid|due|over|shop|idle, .mv-card, .mv-label, .mv-figure. ===================================================================================================================== */ @font-face { font-family: 'Geist'; src: url('/fonts/geist/Geist-Variable.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: 'Geist Mono'; src: url('/fonts/geist/GeistMono-Variable.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; } :root { --mv-brand: var(--primary-600, #0B6670); --mv-brand-hover: var(--primary-700, #08525A); --mv-brand-tint: var(--primary-50, #E6F2F3); --mv-brand-ring: color-mix(in oklab, var(--mv-brand) 16%, transparent); --mv-ink: #111C24; --mv-ink-2: #4A5763; --mv-ink-3: #5F6B76; --mv-line: #E3E8EC; --mv-line-2: #EEF1F4; --mv-bg: #F6F8F9; --mv-surface: #FFFFFF; --mv-radius: 10px; --mv-radius-sm: 8px; --mv-radius-xs: 5px; --mv-shadow: 0 1px 2px rgba(17, 28, 36, .06), 0 1px 1px rgba(17, 28, 36, .04); --mv-paid: #17703A; --mv-paid-bg: #E7F4EC; --mv-paid-mark: #2E9E57; --mv-due: #8A4B00; --mv-due-bg: #FFF3D6; --mv-due-mark: #D98E04; --mv-over: #B42318; --mv-over-bg: #FDECEA; --mv-over-mark: #D9493A; --mv-shop: #1D5BBF; --mv-shop-bg: #E8F0FC; --mv-shop-mark: #3B76D9; --mv-idle: #4B5563; --mv-idle-bg: #EEF0F3; --mv-idle-mark: #8A96A1; --mv-font: 'Geist', 'Noto Sans Devanagari', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif; --mv-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace; --mv-sidebar: 14.5rem; --mv-topbar: 3.5rem; } /* Dark mode (Filament's own switch): the same names, re-tuned rather than inverted. */ html.dark { --mv-brand: var(--primary-400, #2F8E97); --mv-brand-hover: var(--primary-300, #66AFB6); --mv-brand-tint: color-mix(in oklab, var(--primary-500, #127A84) 18%, transparent); --mv-ink: #E8EDF1; --mv-ink-2: #B7C1CA; --mv-ink-3: #97A3AE; --mv-line: #26313A; --mv-line-2: #1E2830; --mv-bg: #0F1418; --mv-surface: #161E24; --mv-shadow: none; --mv-paid: #6FD39A; --mv-paid-bg: #12301F; --mv-due: #F2C14E; --mv-due-bg: #2B2410; --mv-over: #FF8A80; --mv-over-bg: #331A18; --mv-shop: #8DB4F5; --mv-shop-bg: #15243D; --mv-idle: #B7C1CA; --mv-idle-bg: #1E2830; } /* ------------------------------------------------------------------ Filament's theme scale: radii and type */ html.fi { --radius-md: 6px; --radius-lg: var(--mv-radius-sm); --radius-xl: var(--mv-radius); --radius-2xl: 12px; --font-family: var(--mv-font); --mono-font-family: var(--mv-mono); } .fi-body { --topbar-height: var(--mv-topbar); font-family: var(--mv-font); font-feature-settings: 'tnum' 1; background-color: var(--mv-bg); color: var(--mv-ink); -webkit-font-smoothing: antialiased; } /* ------------------------------------------------------------------ Reusable pieces */ .mv-mono, .fi-body code, .fi-body kbd { font-family: var(--mv-mono); } .mv-mono { font-size: .92em; letter-spacing: -.01em; } .mv-label { font-size: 12px; font-weight: 500; color: var(--mv-ink-3); } .mv-figure { font-size: 21px; font-weight: 600; letter-spacing: -.03em; color: var(--mv-ink); font-variant-numeric: tabular-nums; } .mv-card { background: var(--mv-surface); border: 1px solid var(--mv-line); border-radius: var(--mv-radius); box-shadow: var(--mv-shadow); } .mv-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 500; line-height: 18px; padding: 1px 7px; border-radius: var(--mv-radius-xs); white-space: nowrap; } .mv-chip::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .mv-chip--paid { color: var(--mv-paid); background: var(--mv-paid-bg); } .mv-chip--due { color: var(--mv-due); background: var(--mv-due-bg); } .mv-chip--over { color: var(--mv-over); background: var(--mv-over-bg); } .mv-chip--shop { color: var(--mv-shop); background: var(--mv-shop-bg); } .mv-chip--idle { color: var(--mv-idle); background: var(--mv-idle-bg); } /* ------------------------------------------------------------------ The Move mark and wordmark (a company's own logo replaces both) */ .mv-logo { display: inline-flex; align-items: center; gap: 9px; height: 100%; color: var(--mv-ink); text-decoration: none; } .mv-mark { display: inline-flex; align-items: flex-end; gap: 2px; height: 18px; flex: none; } .mv-mark i { display: block; width: 5px; border-radius: 1.5px; background: var(--mv-ink); transform: skewX(-14deg); } .mv-mark i:nth-child(1) { height: 8px; opacity: .35; } .mv-mark i:nth-child(2) { height: 13px; opacity: .6; } .mv-mark i:nth-child(3) { height: 18px; background: var(--mv-brand); } .mv-wordmark { font-size: 19px; font-weight: 650; letter-spacing: -.035em; line-height: 1; color: var(--mv-ink); } .mv-logo--lg .mv-mark { height: 22px; gap: 2.5px; } .mv-logo--lg .mv-mark i { width: 6px; } .mv-logo--lg .mv-mark i:nth-child(1) { height: 10px; } .mv-logo--lg .mv-mark i:nth-child(2) { height: 16px; } .mv-logo--lg .mv-mark i:nth-child(3) { height: 22px; } .mv-logo--lg .mv-wordmark { font-size: 23px; letter-spacing: -.04em; } .fi-logo:has(.mv-logo) { display: flex; align-items: center; } /* ===================================================================================================================== App shell: a full-height light sidebar on the left, the top bar over the main column only (desktop). ===================================================================================================================== */ @media (min-width: 64rem) { .fi-body { --sidebar-width: var(--mv-sidebar); } .fi-body.fi-body-has-topbar.fi-body-has-navigation .fi-topbar-ctn { margin-inline-start: var(--sidebar-width); } .fi-body.fi-body-has-topbar.fi-body-has-navigation > .fi-layout { margin-top: calc(-1 * var(--topbar-height)); } .fi-body.fi-body-has-topbar.fi-body-has-navigation .fi-main-ctn { padding-top: var(--topbar-height); } .fi-body.fi-body-has-topbar .fi-sidebar { top: 0; height: 100dvh; } .fi-body.fi-body-has-topbar .fi-sidebar-header { display: flex; } /* The logo lives at the top of the sidebar; the top bar keeps only search, notices and the account. */ .fi-body.fi-body-has-navigation .fi-topbar-start { display: none; } } /* ------------------------------------------------------------------ Sidebar */ .fi-sidebar.fi-main-sidebar { background-color: var(--mv-surface); border-inline-end: 1px solid var(--mv-line); } .fi-body-has-topbar .fi-sidebar-header, .fi-sidebar-header { height: auto; min-height: var(--mv-topbar); padding: 0 12px; background-color: transparent; box-shadow: none; justify-content: flex-start; flex-wrap: wrap; align-content: flex-start; } .fi-sidebar-header-logo-ctn { display: flex; align-items: center; min-height: var(--mv-topbar); padding-inline: 8px; } .fi-sidebar-nav { padding: 4px 12px 16px; row-gap: 0; scrollbar-width: thin; } .fi-sidebar-nav-groups { margin-inline: 0; row-gap: 2px; } .fi-sidebar-group-items { row-gap: 1px; } /* An entry: 14px, secondary ink; the open one is brand on a brand tint. */ .fi-sidebar-item-btn { min-height: 34px; padding: 6px 8px; border-radius: 6px; column-gap: 10px; justify-content: flex-start; } .fi-sidebar-item-btn > .fi-icon { width: 18px; height: 18px; color: var(--mv-ink-3); } .fi-sidebar-item-label { font-size: 14px; font-weight: 500; color: var(--mv-ink-2); line-height: 1.35; } @media (hover: hover) { .fi-sidebar-item-btn:hover { background-color: var(--mv-line-2); } } .fi-sidebar-item-btn:focus-visible { background-color: var(--mv-line-2); outline: 2px solid var(--mv-brand); outline-offset: -2px; } .fi-sidebar-item.fi-active > .fi-sidebar-item-btn { background-color: var(--mv-brand-tint); } .fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-sidebar-item-label, .fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-icon { color: var(--mv-brand); } .fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-sidebar-item-label { font-weight: 600; } /* Entries inside a workspace: no icons and no tree line, indented under the heading's label. */ .fi-sidebar-group .fi-sidebar-item-grouped-border { display: none; } .fi-sidebar-group:has(> .fi-sidebar-group-btn) .fi-sidebar-item-btn { padding-inline-start: 36px; min-height: 32px; } .fi-sidebar-group:has(> .fi-sidebar-group-btn) .fi-sidebar-item-label { font-size: 13.5px; font-weight: 450; } /* The top of the menu (Today) sits apart from the workspaces below it. */ .fi-sidebar-group:not(:has(> .fi-sidebar-group-btn)) { margin-bottom: 8px; } /* A company brand without a picture: its name, set like the wordmark. */ .fi-sidebar-header .fi-logo:not(:has(.mv-logo)):not(img) { font-size: 17px; font-weight: 650; letter-spacing: -.02em; line-height: 1.2; color: var(--mv-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: calc(var(--mv-sidebar) - 40px); } /* Badges beside an entry: a small rounded count. */ .fi-sidebar-item-badge-ctn { margin-inline-start: auto; } .fi-sidebar-item-badge-ctn .fi-badge { min-width: 22px; padding: 0 7px; border-radius: 10px; font-size: 12px; font-weight: 600; line-height: 20px; box-shadow: none; } /* A workspace heading reads like an entry (icon + 14px label), with a quiet chevron. */ .fi-sidebar-group-btn { min-height: 34px; padding: 6px 8px; border-radius: 6px; column-gap: 10px; } @media (hover: hover) { .fi-sidebar-group.fi-collapsible > .fi-sidebar-group-btn:hover { background-color: var(--mv-line-2); } } .fi-sidebar-group-btn > .fi-icon { width: 18px; height: 18px; color: var(--mv-ink-3); } .fi-sidebar-group-label { font-size: 14px; font-weight: 500; color: var(--mv-ink-2); line-height: 1.35; } .fi-sidebar-group.fi-active > .fi-sidebar-group-btn > .fi-icon, .fi-sidebar-group.fi-active > .fi-sidebar-group-btn > .fi-sidebar-group-label { color: var(--mv-ink); } .fi-sidebar-group.fi-active > .fi-sidebar-group-btn > .fi-sidebar-group-label { font-weight: 600; } .fi-sidebar-group-collapse-btn { width: 24px; height: 24px; margin: -4px -4px -4px 0; } .fi-sidebar-group-collapse-btn .fi-icon { width: 14px; height: 14px; color: var(--mv-ink-3); } /* The company at the top of the sidebar (display only). */ .mv-switcher { display: flex; align-items: center; gap: 10px; padding: 8px; margin: 0 0 12px; border: 1px solid var(--mv-line); border-radius: var(--mv-radius-sm); background: var(--mv-surface); min-width: 0; flex: 1 0 100%; } .mv-switcher__badge { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: 6px; background: var(--mv-ink); color: #fff; font-size: 12px; font-weight: 600; letter-spacing: .01em; } html.dark .mv-switcher__badge { background: var(--mv-brand); color: #031B1E; } .mv-switcher__text { min-width: 0; line-height: 1.25; } .mv-switcher__name { display: block; font-size: 14px; font-weight: 600; color: var(--mv-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mv-switcher__meta { display: block; font-size: 12px; color: var(--mv-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Pinned shortcuts under the workspaces. */ .mv-pins { margin-top: 14px; } .mv-pins__title { font-size: 12px; font-weight: 500; color: var(--mv-ink-3); padding: 6px 8px 4px; margin: 0; } .mv-pins ul { list-style: none; margin: 0; padding: 0; } .mv-pins a { display: flex; align-items: center; min-height: 32px; padding: 5px 8px; border-radius: 6px; color: var(--mv-ink-2); font-size: 13.5px; text-decoration: none; } .mv-pins a:hover { background: var(--mv-line-2); } .mv-pins a:focus-visible { outline: 2px solid var(--mv-brand); outline-offset: -2px; } .mv-pins a[aria-current='page'] { color: var(--mv-brand); background: var(--mv-brand-tint); font-weight: 600; } /* MOVE-R35: "Find a screen" at the top of the menu; it stays in view while the menu scrolls. */ .mv-find { position: sticky; top: -4px; z-index: 2; margin: -4px -12px 8px; padding: 8px 12px 6px; background: var(--mv-surface); } .mv-find__label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .mv-find__field { position: relative; display: flex; align-items: center; } .mv-find__icon { position: absolute; inset-inline-start: 9px; width: 16px; height: 16px; color: var(--mv-ink-3); pointer-events: none; } .mv-find__input { width: 100%; min-height: 34px; padding: 6px 30px 6px 32px; border: 1px solid var(--mv-line); border-radius: var(--mv-radius-sm); background: var(--mv-bg); color: var(--mv-ink); font: inherit; font-size: 13.5px; line-height: 1.3; box-shadow: none; appearance: none; } .mv-find__input::placeholder { color: var(--mv-ink-3); opacity: 1; } .mv-find__input:focus { outline: none; background: var(--mv-surface); border-color: var(--mv-brand); box-shadow: 0 0 0 3px var(--mv-brand-ring); } .mv-find__input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; display: none; } .mv-find__clear { position: absolute; inset-inline-end: 3px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--mv-radius-xs); color: var(--mv-ink-3); } .mv-find__clear:hover { color: var(--mv-ink); background: var(--mv-line-2); } .mv-find__clear:focus-visible { outline: 2px solid var(--mv-brand); outline-offset: -2px; } .mv-find__clear .fi-icon, .mv-find__clear svg { width: 16px; height: 16px; } .mv-find__kbd { position: absolute; inset-inline-end: 8px; min-width: 18px; padding: 0 5px; border: 1px solid var(--mv-line); border-radius: var(--mv-radius-xs); background: var(--mv-surface); color: var(--mv-ink-2); font-family: var(--mv-mono); font-size: 11px; line-height: 16px; text-align: center; pointer-events: none; } .mv-find__none { margin: 10px 8px 2px; font-size: 13px; color: var(--mv-ink-3); } /* While searching: entries and workspaces without a match step aside, and the pinned shortcuts (copies of menu entries) with them. */ .fi-sidebar-nav .mv-find-miss, .fi-sidebar-nav.mv-finding .mv-pins { display: none !important; } /* The entry Enter will open. */ .fi-sidebar-nav.mv-finding .fi-sidebar-item-btn.mv-find-best { box-shadow: inset 0 0 0 1px var(--mv-brand); } html.dark .mv-find__input { color-scheme: dark; } @media (max-width: 767px), (pointer: coarse) { .mv-find__input { min-height: 2.75rem; font-size: 16px; } /* a finger-sized box; 16px stops phones zooming in on focus */ .mv-find__kbd { display: none; } .mv-find__clear { width: 2.75rem; height: 2.75rem; inset-inline-end: 0; } .mv-find__input { padding-inline-end: 2.75rem; } } /* Foot of the sidebar: the plan, and who runs Move. */ .mv-sidefoot { margin: 0 12px 12px; padding: 10px 8px 2px; border-top: 1px solid var(--mv-line-2); font-size: 12px; line-height: 1.5; color: var(--mv-ink-3); } .mv-sidefoot b { color: var(--mv-ink-2); font-weight: 500; } /* ------------------------------------------------------------------ Top bar */ .fi-topbar { min-height: var(--mv-topbar); background-color: var(--mv-surface); box-shadow: none; border-bottom: 1px solid var(--mv-line); padding-inline: 16px; } @media (min-width: 64rem) { .fi-topbar { padding-inline: 28px; } } .fi-topbar-end { flex: 1; column-gap: 6px; min-width: 0; } .fi-topbar-end > .fi-global-search-ctn, .fi-topbar-end > div:has(> .fi-global-search-ctn) { flex: 1; max-width: 520px; margin-inline-end: auto; } .fi-global-search-ctn { width: 100%; } .fi-global-search-field .fi-input-wrp { height: 36px; background-color: var(--mv-bg); box-shadow: none; border: 1px solid var(--mv-line); border-radius: var(--mv-radius-sm); } .fi-global-search-field .fi-input-wrp:focus-within { background-color: var(--mv-surface); border-color: var(--mv-brand); box-shadow: 0 0 0 3px var(--mv-brand-ring); } .fi-global-search-field .fi-input { font-size: 14px; } .fi-global-search-field .fi-input::placeholder { color: var(--mv-ink-3); opacity: 1; } /* The ⌘K hint at the end of the search box. */ .fi-global-search-field .fi-input-wrp-suffix, .fi-global-search-field .fi-input-wrp-label { font-family: var(--mv-mono); font-size: 12px; color: var(--mv-ink-2); } .fi-global-search-field .fi-input-wrp-suffix .fi-input-wrp-label { background: var(--mv-surface); border: 1px solid var(--mv-line); border-radius: 5px; padding: 1px 6px; line-height: 18px; } .fi-global-search-results-ctn { border-radius: var(--mv-radius); box-shadow: 0 2px 4px rgba(17, 28, 36, .04), 0 16px 32px -12px rgba(17, 28, 36, .18); border: 1px solid var(--mv-line); } .fi-global-search-result-group-header { font-size: 12px; font-weight: 600; color: var(--mv-ink-3); text-transform: none; letter-spacing: 0; background: var(--mv-bg); } .fi-global-search-result-group-header::first-letter { text-transform: uppercase; } .fi-global-search-result-link { padding-block: 9px; } .fi-global-search-result-heading { font-size: 14px; font-weight: 500; color: var(--mv-ink); } .fi-global-search-result-details { display: flex; flex-wrap: wrap; gap: 2px 14px; margin-top: 2px; font-size: 12.5px; color: var(--mv-ink-3); } .fi-global-search-result-detail-label { color: var(--mv-ink-3); } .fi-global-search-result-detail-value { color: var(--mv-ink-2); } .fi-global-search-result-link:focus-visible, .fi-global-search-result-link:hover { background-color: var(--mv-brand-tint); } @media (max-width: 40rem) { /* No keyboard shortcut to show on a phone. */ .fi-global-search-field .fi-input-wrp-suffix { display: none; } } .fi-topbar .fi-icon-btn { color: var(--mv-ink-2); } .fi-topbar .fi-user-avatar { width: 32px; height: 32px; } /* ===================================================================================================================== Page content: Stripe's surface (white sheets, hairlines, a soft two-layer shadow, 10px corners). ===================================================================================================================== */ .fi-main { padding-top: 6px; } @media (min-width: 64rem) { .fi-main { padding-inline: 28px; } } .fi-header-heading { font-size: 26px; line-height: 1.15; font-weight: 650; letter-spacing: -.03em; color: var(--mv-ink); } .fi-header-subheading { font-size: 14px; color: var(--mv-ink-3); } .fi-breadcrumbs-item-label { font-size: 13px; color: var(--mv-ink-3); } /* Cards: sections, stat cells, table boxes, widgets. */ .fi-section:not(.fi-section-not-contained), .fi-wi-stats-overview-stat, .fi-ta-ctn, .fi-wi-chart .fi-section, .fi-in-section, .fi-fo-repeater-item, .fi-modal-window, .fi-dropdown-panel { --tw-ring-color: var(--mv-line); box-shadow: 0 0 0 1px var(--mv-line), var(--mv-shadow); border-radius: var(--mv-radius); } .fi-section:not(.fi-section-not-contained), .fi-wi-stats-overview-stat, .fi-ta-ctn { background-color: var(--mv-surface); } .fi-section-header-heading { font-size: 14px; font-weight: 600; letter-spacing: -.005em; color: var(--mv-ink); } .fi-section-header-description { font-size: 13px; color: var(--mv-ink-3); } .fi-section:not(.fi-section-not-contained) > .fi-section-header { padding: 16px 20px; } .fi-section:not(.fi-section-not-contained) > .fi-section-content-ctn { border-color: var(--mv-line-2); } /* One large tabular figure per card with a quiet 12px label above it. */ .fi-wi-stats-overview-stat { padding: 18px 20px; } .fi-wi-stats-overview-stat-label { font-size: 12px; font-weight: 500; color: var(--mv-ink-3); } .fi-wi-stats-overview-stat-value { font-size: 24px; font-weight: 600; letter-spacing: -.035em; color: var(--mv-ink); } .fi-wi-stats-overview-stat-description { font-size: 12.5px; } /* ------------------------------------------------------------------ Tables (look only: columns, actions and tabs belong to the screens) */ .fi-ta-ctn { overflow: visible; } /* v1.53: not hidden, or the filter and column pop-overs of a short list are cut off at the card's edge */ .fi-ta-header-toolbar { border-color: var(--mv-line-2); } .fi-ta-table > thead { background-color: var(--mv-bg); } .fi-ta-table > thead > tr { border-bottom: 1px solid var(--mv-line); } .fi-ta-header-cell { padding-block: 9px; font-size: 12px; font-weight: 600; color: var(--mv-ink-3); letter-spacing: .01em; } .fi-ta-header-cell .fi-ta-header-cell-sort-btn, .fi-ta-header-cell .fi-ta-header-cell-sort-btn .fi-icon { color: var(--mv-ink-3); } .fi-ta-table > tbody > tr, .fi-ta-row { border-color: var(--mv-line-2); } .fi-ta-table > :not(:last-child), .fi-ta-table > tbody > :not(:last-child) { border-color: var(--mv-line-2); } .fi-ta-cell { font-size: 14px; color: var(--mv-ink); } .fi-ta-text-item-description, .fi-ta-text .fi-ta-text-description { color: var(--mv-ink-3); font-size: 12.5px; } @media (hover: hover) { .fi-ta-row.fi-clickable:hover, .fi-ta-row:hover { background-color: color-mix(in oklab, var(--mv-bg) 70%, transparent); } } .fi-ta-row.fi-selected { background-color: var(--mv-brand-tint); } .fi-ta-empty-state-heading { color: var(--mv-ink); font-weight: 600; } .fi-ta-empty-state-description { color: var(--mv-ink-3); } .fi-pagination { font-size: 13px; } /* Status chips: text on tint (Filament's colour scales are set to the status palette, see App\Support\MoveTheme). */ .fi-badge { border-radius: var(--mv-radius-xs); font-size: 12px; font-weight: 500; line-height: 18px; padding: 1px 7px; min-width: 0; box-shadow: none; } .fi-ta-cell .fi-badge:is(.fi-color-success, .fi-color-warning, .fi-color-danger, .fi-color-info)::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; } /* ------------------------------------------------------------------ Buttons */ .fi-btn { border-radius: 7px; font-weight: 500; font-size: 14px; } .fi-btn.fi-color-primary:not(.fi-outlined) { background-color: var(--mv-brand); color: #fff; box-shadow: 0 1px 2px rgba(17, 28, 36, .12); } @media (hover: hover) { .fi-btn.fi-color-primary:not(.fi-outlined):hover { background-color: var(--mv-brand-hover); } } .fi-btn.fi-color-gray:not(.fi-outlined), .fi-btn:not(.fi-color) { background-color: var(--mv-surface); box-shadow: 0 0 0 1px var(--mv-line), 0 1px 1px rgba(17, 28, 36, .04); color: var(--mv-ink); } @media (hover: hover) { .fi-btn.fi-color-gray:not(.fi-outlined):hover, .fi-btn:not(.fi-color):hover { background-color: var(--mv-bg); } } .fi-btn:focus-visible, .fi-icon-btn:focus-visible, .fi-link:focus-visible, .fi-tabs-item:focus-visible { outline: 2px solid var(--mv-brand); outline-offset: 2px; } .fi-link.fi-color-primary { color: var(--mv-brand); } /* ------------------------------------------------------------------ Inputs */ .fi-input-wrp { border-radius: var(--mv-radius-sm); box-shadow: 0 0 0 1px #CBD3DA, 0 1px 1px rgba(17, 28, 36, .04); } html.dark .fi-input-wrp { box-shadow: 0 0 0 1px var(--mv-line); } .fi-input-wrp:not(.fi-disabled):not(:has(.fi-ac-action:focus)):focus-within { box-shadow: 0 0 0 1px var(--mv-brand), 0 0 0 4px var(--mv-brand-ring); } .fi-fo-field-label-content { font-size: 14px; font-weight: 500; color: var(--mv-ink); } /* MOVE-12: only boxes that can be changed take the brand colour. Filament's own grey for a ticked box that cannot be changed sits in a CSS layer, so an unlayered rule here for every ticked box painted it over: on a list's column menu the columns that are always shown looked exactly like the ones that can be hidden, and clicking them seemed to do nothing. */ .fi-checkbox-input:checked:not(:disabled), .fi-radio-input:checked:not(:disabled) { background-color: var(--mv-brand); } /* ------------------------------------------------------------------ Tabs (saved views above a list) */ .fi-tabs-item { border-radius: 6px; } .fi-tabs-item-label { font-size: 14px; color: var(--mv-ink-2); } .fi-tabs-item.fi-active { background-color: var(--mv-brand-tint); } .fi-tabs-item.fi-active .fi-tabs-item-label, .fi-tabs-item.fi-active > .fi-icon { color: var(--mv-brand); font-weight: 600; } /* ===================================================================================================================== Slim notices at the top of a page (plan, trial, suspension, announcements): one line, not a box. ===================================================================================================================== */ .mv-notices { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 14px; } .mv-notice { margin: 0 0 8px; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; padding: 7px 12px; border-radius: var(--mv-radius-sm); border: 1px solid var(--mv-line); background: var(--mv-surface); font-size: 13px; line-height: 1.45; color: var(--mv-ink-2); } .mv-notice::before { content: ''; width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--mv-shop-mark); align-self: center; } .mv-notice__text { flex: 1; min-width: min(100%, 14rem); } .mv-notice__text strong { color: var(--mv-ink); font-weight: 600; } .mv-notice__text a, .mv-notice__action, .mv-notice button { color: var(--mv-ink-2); font-weight: 500; text-decoration: underline; text-underline-offset: 2px; background: none; border: 0; padding: 0; font: inherit; cursor: pointer; } .mv-notice form { margin: 0; } .mv-notice--warning { background: var(--mv-due-bg); border-color: color-mix(in oklab, var(--mv-due-mark) 35%, transparent); } .mv-notice--warning::before { background: var(--mv-due-mark); } .mv-notice--danger { background: var(--mv-over-bg); border-color: color-mix(in oklab, var(--mv-over-mark) 35%, transparent); } .mv-notice--danger::before { background: var(--mv-over-mark); } .mv-notice--danger .mv-notice__text strong { color: var(--mv-over); } .mv-notice--warning .mv-notice__text strong { color: var(--mv-due); } .mv-notice--support { background: var(--mv-due-bg); border-color: var(--mv-due-mark); } .mv-notice--support::before { background: var(--mv-due-mark); } /* ===================================================================================================================== Admin sign-in: a calm form column and the product story beside it, with an HTML preview of Today bleeding off the edge. ===================================================================================================================== */ .mv-login { display: grid; grid-template-columns: minmax(0, 1fr); min-height: 100dvh; background: var(--mv-surface); color: var(--mv-ink); font-family: var(--mv-font); font-size: 14px; line-height: 1.45; font-feature-settings: 'tnum' 1; } @media (min-width: 64rem) { .mv-login { grid-template-columns: minmax(26rem, 35rem) minmax(0, 1fr); } .mv-login--solo { grid-template-columns: minmax(0, 1fr); } } .mv-login__form { display: flex; flex-direction: column; padding: 28px 20px 24px; min-width: 0; } @media (min-width: 40rem) { .mv-login__form { padding: 40px 64px 32px; } } .mv-login--solo .mv-login__form { align-items: center; } .mv-login__brand { display: flex; align-items: center; min-height: 32px; } .mv-login__brand img { height: 2.25rem; width: auto; max-width: 12rem; object-fit: contain; } .mv-login__brand-name { font-size: 20px; font-weight: 650; letter-spacing: -.03em; } .mv-login__box { margin: auto 0; width: 100%; max-width: 400px; padding: 40px 0; } .mv-login__title { font-size: 28px; font-weight: 650; letter-spacing: -.035em; line-height: 1.15; margin: 0; color: var(--mv-ink); } .mv-login__lede { color: var(--mv-ink-2); font-size: 15px; margin: 8px 0 28px; } .mv-login__legal { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 12px; color: var(--mv-ink-3); width: 100%; max-width: 432px; } .mv-login__alt { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--mv-line); font-size: 14px; color: var(--mv-ink-2); } .mv-login__alt a { color: var(--mv-brand); font-weight: 600; text-decoration: none; } .mv-login__alt a:hover { text-decoration: underline; } .mv-login__forgot { font-size: 13px; color: var(--mv-brand); font-weight: 500; background: none; border: 0; padding: 0; cursor: pointer; font-family: inherit; } .mv-login__forgot:hover { text-decoration: underline; } .mv-login__hint { font-size: 13px; color: var(--mv-ink-2); background: var(--mv-bg); border: 1px solid var(--mv-line); border-radius: var(--mv-radius-sm); padding: 8px 10px; margin: 0 0 14px; } /* Filament's form inside the column: 44px fields, 15px text, a full-width brand button. */ .mv-login .fi-fo-field-label-content { font-size: 14px; font-weight: 500; } .mv-login .fi-input-wrp { min-height: 44px; } .mv-login .fi-input { font-size: 15px; min-height: 42px; } .mv-login .fi-sc-form, .mv-login form { row-gap: 18px; } .mv-login .fi-btn.fi-color-primary { min-height: 46px; font-size: 15px; font-weight: 600; border-radius: var(--mv-radius-sm); } .mv-login .fi-fo-checkbox-list-option-label, .mv-login .fi-checkbox-input + span, .mv-login label:has(.fi-checkbox-input) { color: var(--mv-ink-2); } /* The story side. */ .mv-login__story { display: none; } @media (min-width: 64rem) { .mv-login__story { display: flex; flex-direction: column; background: var(--mv-bg); border-inline-start: 1px solid var(--mv-line); position: relative; overflow: hidden; padding: 64px 0 0 64px; min-width: 0; } } .mv-eyebrow { font-size: 13px; font-weight: 500; color: var(--mv-brand); display: flex; align-items: center; gap: 8px; margin: 0; } .mv-eyebrow__cells { display: inline-flex; gap: 2px; } .mv-eyebrow__cells i { width: 7px; height: 7px; border-radius: 1.5px; background: var(--mv-brand); } .mv-eyebrow__cells i:nth-child(n+4) { background: transparent; box-shadow: inset 0 0 0 1.2px var(--mv-brand); } .mv-story__title { font-size: 42px; line-height: 1.08; letter-spacing: -.045em; font-weight: 650; max-width: 660px; margin: 16px 64px 0 0; color: var(--mv-ink); } .mv-story__title span { color: var(--mv-ink-2); } .mv-story__body { display: flex; flex-direction: column; gap: 36px; margin-top: 36px; flex: 1; min-height: 0; } .mv-proof { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; padding-right: 64px; margin: 0; } .mv-proof > div { padding-top: 12px; border-top: 1px solid #D9E0E5; } .mv-proof dt { font-size: 15px; font-weight: 600; letter-spacing: -.01em; margin-bottom: 3px; color: var(--mv-ink); } .mv-proof dd { font-size: 14px; color: var(--mv-ink-2); line-height: 1.45; margin: 0; } @media (max-width: 80rem) { .mv-proof { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* The product preview (illustrative figures, written as static content). */ .mv-preview { background: #fff; border: 1px solid var(--mv-line); border-right: 0; border-bottom: 0; border-radius: 12px 0 0 0; box-shadow: 0 2px 4px rgba(17, 28, 36, .04), 0 24px 48px -12px rgba(17, 28, 36, .16); overflow: hidden; flex: 1; min-height: 320px; color: #111C24; } .mv-preview__top { height: 40px; display: flex; align-items: center; gap: 10px; padding: 0 16px; border-bottom: 1px solid #EEF1F4; } .mv-preview__top .mv-mark { height: 14px; gap: 1.5px; } .mv-preview__top .mv-mark i { width: 4px; } .mv-preview__top .mv-mark i:nth-child(1) { height: 6px; } .mv-preview__top .mv-mark i:nth-child(2) { height: 10px; } .mv-preview__top .mv-mark i:nth-child(3) { height: 14px; } .mv-preview__top b { font-size: 13px; font-weight: 600; } .mv-preview__search { margin-left: 8px; flex: 0 1 220px; height: 26px; border: 1px solid #E3E8EC; background: #F6F8F9; border-radius: 6px; font-size: 12px; color: #5F6B76; display: flex; align-items: center; padding: 0 8px; justify-content: space-between; gap: 8px; white-space: nowrap; overflow: hidden; } .mv-preview__search kbd { font-family: var(--mv-mono); font-size: 11px; color: #4A5763; background: none; border: 0; padding: 0; } .mv-preview__body { padding: 16px 18px; display: grid; grid-template-columns: 1.12fr 1fr 1fr; gap: 12px; align-items: start; } .mv-pc { border: 1px solid #E3E8EC; border-radius: 8px; padding: 14px; } .mv-pc--next { margin-top: 12px; } .mv-pc__label { font-size: 12px; color: #5F6B76; font-weight: 500; display: flex; justify-content: space-between; gap: 8px; } .mv-pc__amount { font-size: 32px; font-weight: 600; letter-spacing: -.045em; line-height: 1; margin: 8px 0 6px; } .mv-pc__sub { font-size: 13px; color: #4A5763; } .mv-pc__sub b { color: #B42318; font-weight: 600; } .mv-pc__bar { display: flex; gap: 2px; height: 9px; margin: 14px 0 8px; } .mv-pc__bar i { border-radius: 2px; } .mv-pc__legend { display: flex; gap: 18px; font-size: 12px; color: #5F6B76; line-height: 1.3; } .mv-pc__legend b { display: block; color: #111C24; font-weight: 600; font-size: 13px; } .mv-pc__kpis { display: grid; grid-template-columns: 1fr 1fr; margin-top: 14px; border-top: 1px solid #EEF1F4; } .mv-pc__kpis div { padding: 10px 0 0; font-size: 12px; color: #5F6B76; } .mv-pc__kpis b { display: block; font-size: 17px; color: #111C24; font-weight: 600; letter-spacing: -.02em; } .mv-pc .mv-pc__h { font-size: 13px; font-weight: 600; display: flex; justify-content: space-between; margin: 0 0 4px; } .mv-pc .mv-pc__h span { font-weight: 500; color: #5F6B76; font-size: 12px; } .mv-pc .mv-pc__h.mv-pc__split { margin-top: 12px; padding-top: 10px; border-top: 1px solid #E3E8EC; } .mv-qr { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 7px 0; border-top: 1px solid #EEF1F4; font-size: 13px; } .mv-pc .mv-pc__h + .mv-qr { border-top: 0; } .mv-qr__name { font-weight: 500; line-height: 1.2; min-width: 0; } .mv-qr__name span { display: block; font-size: 11.5px; color: #5F6B76; font-weight: 400; font-family: var(--mv-mono); } .mv-qr__amt { text-align: right; font-weight: 600; line-height: 1.2; white-space: nowrap; } .mv-qr__amt span { display: block; font-size: 12px; font-weight: 500; color: #B42318; } .mv-qr__chip { background: #FDECEA; color: #B42318; font-size: 12px; font-weight: 500; padding: 1px 7px; border-radius: 5px; } .mv-cells { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); gap: 2.5px; margin: 10px 0 9px; } .mv-cells i { aspect-ratio: 1; border-radius: 2px; } .mv-cells .r { background: #2E9E57; } .mv-cells .w { background: #3B76D9; } .mv-cells .i { background: #fff; box-shadow: inset 0 0 0 1.3px #8A96A1; } .mv-pc__leg { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; color: #4A5763; } .mv-pc__leg b { color: #111C24; } .mv-pc__rate { display: flex; align-items: baseline; gap: 8px; margin: 6px 0 4px; } .mv-pc__rate b { font-size: 22px; font-weight: 600; letter-spacing: -.03em; } .mv-pc__rate span { font-size: 12px; color: #5F6B76; } .mv-pc svg { display: block; width: 100%; height: auto; } /* ===================================================================================================================== Driver app sign-in (resources/views/driver/login.blade.php). Phone first: 44px+ targets, works at 360px, Hindi fits. ===================================================================================================================== */ .mv-dl { font-family: var(--mv-font); color: var(--mv-ink); } .mv-dl__card { background: var(--mv-surface); border: 1px solid var(--mv-line); border-radius: 14px; box-shadow: var(--mv-shadow); padding: 22px 18px 18px; } .mv-dl__mark { display: flex; align-items: center; gap: 8px; margin-bottom: 18px; } .mv-dl__title { font-size: 24px; font-weight: 650; letter-spacing: -.03em; line-height: 1.2; margin: 0; } .mv-dl__lede { font-size: 15px; color: var(--mv-ink-2); margin: 6px 0 4px; } .mv-dl label { font-size: 15px; font-weight: 600; color: var(--mv-ink); margin: 16px 0 6px; display: block; } .mv-dl input[type=tel], .mv-dl input[type=password] { width: 100%; min-height: 52px; padding: 12px 14px; font: inherit; font-size: 18px; color: var(--mv-ink); background: var(--mv-surface); border: 1px solid #CBD3DA; border-radius: 10px; box-shadow: 0 1px 1px rgba(17, 28, 36, .04); } .mv-dl input[type=tel] { font-family: var(--mv-mono); letter-spacing: .02em; } .mv-dl input:focus { outline: none; border-color: var(--mv-dl-brand, var(--mv-brand)); box-shadow: 0 0 0 3px color-mix(in oklab, var(--mv-dl-brand, var(--mv-brand)) 18%, transparent); } .mv-dl input.pin { letter-spacing: 10px; text-align: center; font-size: 22px; font-family: var(--mv-mono); } .mv-dl__btn { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 52px; margin-top: 20px; border: 0; border-radius: 10px; background: var(--mv-dl-brand, var(--mv-brand)); color: #fff; font: inherit; font-size: 17px; font-weight: 600; cursor: pointer; box-shadow: 0 1px 2px rgba(17, 28, 36, .12); } .mv-dl__btn:focus-visible { outline: 3px solid var(--mv-dl-brand, var(--mv-brand)); outline-offset: 2px; } .mv-dl__err { color: var(--mv-over); font-size: 14px; margin-top: 8px; } .mv-dl__help { display: flex; gap: 10px; align-items: flex-start; margin: 16px 0 0; padding: 12px 14px; border-radius: 10px; background: var(--mv-bg); border: 1px solid var(--mv-line); font-size: 14px; color: var(--mv-ink-2); line-height: 1.5; } .mv-dl__help svg { flex: none; width: 18px; height: 18px; margin-top: 1px; stroke: var(--mv-ink-3); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .mv-dl__foot { margin: 18px 4px 0; font-size: 12.5px; color: var(--mv-ink-3); text-align: center; } @media (prefers-color-scheme: dark) { .mv-dl { --mv-ink: #E8EDF1; --mv-ink-2: #B7C1CA; --mv-ink-3: #97A3AE; --mv-line: #26313A; --mv-bg: #0F1418; --mv-surface: #182027; --mv-over: #FF8A80; } .mv-dl input[type=tel], .mv-dl input[type=password] { border-color: #33414C; } .mv-dl .mv-mark i { background: #E8EDF1; } .mv-dl .mv-mark i:nth-child(3) { background: var(--mv-dl-brand, #2F8E97); } } /* ---- v1.53 integration: K1's table parts (S.No column, Actions heading) in L1's table look ---- */ /* S.No: a narrow, quiet column of tabular numbers, so the row's own first column stays the eye's starting point. */ .fi-ta-header-cell.fi-ta-header-cell-sno, .fi-ta-cell.fi-ta-cell-sno { width: 1%; white-space: nowrap; padding-inline-end: 4px; } .fi-ta-cell.fi-ta-cell-sno { color: var(--mv-ink-3); font-size: 13px; font-variant-numeric: tabular-nums; } /* Row buttons under "Actions" sit a little closer, so four of them (e.g. Papers, Edit, Make inactive, Delete) fit beside a full row at 1440px. */ .fi-ta-actions { gap: 6px 8px; } /* The S.No column costs a column's padding: give it back by trimming the inner padding a little (12px → 10px; the row's end 24px → 16px). */ .fi-ta-header-cell:not(:first-child):not(:last-child), .fi-ta-cell:not(:first-child):not(:last-child) > .fi-ta-col > :is(.fi-ta-text, .fi-ta-icon) { padding-inline: 10px; } .fi-ta-header-cell:last-child, .fi-ta-cell:last-child:has(> .fi-ta-actions) { padding-inline-end: 16px; } /* ===================================================================================================================== Sign-in fixes (v1.53.1). 1. Small laptops and tablets held sideways (64–80rem wide, ~768px tall): the story column was taller than the screen, so the form, centred in the taller row, pushed Sign in below the fold. Each column is now held to the screen height: the form column scrolls on its own if it must, and the story is clipped (the preview already bleeds off the edge). 2. Phones and narrow tablets (under 64rem): the story was hidden, so a prospect opening the link on a phone learnt nothing about Move. It now follows the form as a short block (headline and the four proof points, no preview). ===================================================================================================================== */ @media (min-width: 64rem) { .mv-login { height: 100dvh; min-height: 0; overflow: hidden; } .mv-login__form { height: 100dvh; overflow-y: auto; } .mv-login__box { padding: 24px 0; } .mv-login__story { height: 100dvh; } } @media (min-width: 64rem) and (max-width: 80rem) { .mv-login__story { padding: 48px 0 0 48px; } .mv-story__title { font-size: 34px; margin-right: 48px; } .mv-story__body { gap: 28px; margin-top: 28px; } .mv-proof { padding-right: 48px; gap: 18px; } /* Two preview cards instead of three, so names in "Call today" stay on one line. */ .mv-preview__body { grid-template-columns: 1.15fr 1fr; } .mv-preview__body > :nth-child(3) { display: none; } } @media (min-width: 64rem) and (max-height: 760px) { .mv-login__box { padding: 12px 0; } .mv-login__lede { margin-bottom: 18px; } .mv-login .fi-sc-form, .mv-login form { row-gap: 14px; } } @media (max-width: 63.999rem) { .mv-login__story { display: block; background: var(--mv-bg); border-top: 1px solid var(--mv-line); padding: 32px 20px 40px; } .mv-story__title { font-size: 26px; line-height: 1.15; margin: 12px 0 0; } .mv-story__body { margin-top: 24px; gap: 0; } .mv-proof { grid-template-columns: minmax(0, 1fr); gap: 16px; padding-right: 0; } .mv-login__story .mv-preview { display: none; } } @media (min-width: 40rem) and (max-width: 63.999rem) { .mv-login__story { padding: 40px 64px 48px; } .mv-proof { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 28px; } } @media (min-width: 64rem) and (max-width: 72rem) { /* The narrowest two-column screens (about 1024px): the preview keeps only the money card, at full width. */ .mv-preview__body { grid-template-columns: minmax(0, 1fr); } .mv-preview__body > :nth-child(2) { display: none; } } /* MOVE-R30: short laptop screens (1366×768, 1280×720, 1280×800). The preview was cut off at the bottom of the screen in the middle of a card. It now shows fewer cards by the screen's HEIGHT, as it already does by width, so whatever it shows ends cleanly inside the screen; the story above it is a little tighter. The form column is not touched (it already fits without scrolling). */ @media (min-width: 64rem) and (max-height: 53.75rem) { .mv-login__story { padding-top: 40px; } .mv-story__body { gap: 24px; margin-top: 24px; } /* "Call today" is the tallest card: it goes first. */ .mv-preview__body { grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); } .mv-preview__body > :nth-child(2) { display: none; } } @media (min-width: 72rem) and (max-height: 53.75rem) { .mv-preview__body > :nth-child(3) { display: block; } /* fleet status (and the trend) beside the money card instead */ } @media (min-width: 64rem) and (max-height: 47.5rem) { .mv-preview__body .mv-pc--next { display: none; } /* then the collection trend */ } @media (min-width: 64rem) and (max-width: 71.999rem) and (max-height: 53.75rem) { /* About 1024px wide: the four proof points take two rows, and not even the money card fits under them, so no preview. */ .mv-login__story .mv-preview { display: none; } } /* MOVE-R30 (v1.57): the v1.54 rules above went by the SCREEN's height, but a 1366×768 laptop running Chrome on Windows leaves the page only about 600–660px once the browser bars and the taskbar are taken off, so the money card was still cut off in the middle. 1. Whatever height the window is, the preview now fades out over its last 56px instead of stopping mid-line. 2. On short windows (up to 44.5rem, about 710px: 1366×768 and 1280×800 laptops) the story is tighter and the cards drop their lower detail lines, so the money and fleet cards end inside the window. 3. Below 34rem (about 540px) there is no room for a preview at all: it is left out. */ @media (min-width: 64rem) { .mv-login__story .mv-preview { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 56px), transparent); } } @media (min-width: 64rem) and (max-height: 44.5rem) { .mv-login__story { padding-top: 28px; } .mv-story__title { font-size: 32px; margin-top: 12px; } .mv-story__body { gap: 18px; margin-top: 18px; } .mv-proof dd { font-size: 13px; line-height: 1.4; } .mv-login__story .mv-preview { min-height: 0; } .mv-preview__body { padding: 12px 14px; } .mv-preview__body .mv-pc__kpis, .mv-preview__body .mv-pc__legend { display: none; } } @media (min-width: 64rem) and (max-height: 34rem) { .mv-login__story .mv-preview { display: none; } } /* MOVE-R30 (v1.58.1): the preview was drawn as a window running off the right and bottom edges on purpose, and on a laptop that read as "cut off". It is now a whole card: four edges inside the story column, rounded corners, a margin on the right like the text above, and only as tall as its cards (no fade). The slot it sits in takes the space left under the proof points; when that space is shorter than the card, the card is left out instead of being cut (a container query on the slot's height). */ @media (min-width: 64rem) { .mv-preview-slot { flex: 1; min-height: 0; container-type: size; padding: 0 64px 32px 0; box-sizing: border-box; } .mv-login__story .mv-preview { flex: none; min-height: 0; height: auto; max-width: 1200px; border: 1px solid var(--mv-line); border-radius: 12px; -webkit-mask-image: none; mask-image: none; } } @media (min-width: 64rem) and (max-width: 80rem) { .mv-preview-slot { padding-right: 48px; } } @container (max-height: 480px) { .mv-preview__body .mv-pc__kpis, .mv-preview__body .mv-pc__legend, .mv-preview__body .mv-pc--next { display: none; } } @container (max-height: 215px) { .mv-login__story .mv-preview { display: none; } } /* Design review (v1.54): placeholder text in every box ("Search", "e.g. 1500.00", "Start typing to search…") used gray-400 (#8A96A1, 3.0:1 on white). It now uses the labels' grey (#5F6B76, 5.5:1), still lighter than a typed value (#111C24). */ .fi-input::placeholder, .fi-select-input::placeholder, .fi-fo-textarea textarea::placeholder, .fi-input-wrp input::placeholder, .fi-input-wrp textarea::placeholder, .fi-fo-tags-input input::placeholder, .choices__input::placeholder, .fi-select-input-placeholder, .choices__placeholder, .fi-ta-search-field input::placeholder { color: var(--mv-ink-3); opacity: 1; } html.dark .fi-input::placeholder, html.dark .fi-select-input::placeholder, html.dark .fi-input-wrp input::placeholder, html.dark .fi-input-wrp textarea::placeholder, html.dark .choices__placeholder, html.dark .fi-select-input-placeholder { color: var(--mv-ink-3); } /* beats Filament's .dark rule; the token is #97A3AE in dark mode */ /* Design review (v1.54): on a phone the S.No column took the room the name and phone number need (the phone was cut off on Drivers). Phones leave it out; tablets and computers keep it. */ @media (max-width: 40rem) { .fi-ta-header-cell.fi-ta-header-cell-sno, .fi-ta-cell.fi-ta-cell-sno { display: none; } } /* Design review (v1.54), FINDING-005, made general by MOVE-R28: on EVERY list whose last column holds the row buttons, that column stays pinned at the right edge when the list is wider than its card and scrolls sideways, so "Record payment", "Edit" and the rest never scroll out of sight. A solid background (following the row's hover and selected colours) so the columns sliding underneath do not show through, and a soft edge on its left that appears only while there is something hidden under it: when the list fits, it looks exactly as before. Not pinned: - on phones (under 640px), where the buttons would cover most of a narrow row; they scroll as before; - on a list where a row has five buttons or more side by side: pinned, they would hide every other column, so such a list scrolls as before. (Rental agreements had up to nine; its rarer steps now sit under a More menu, so it has at most four and is pinned too.) */ :root { --mv-sticky-edge: rgba(17, 28, 36, .12); } html.dark { --mv-sticky-edge: rgba(0, 0, 0, .5); } @media (min-width: 40rem) { .fi-ta-table:has(> tbody > tr > td:last-child > .fi-ta-actions):not(:has(> tbody > tr > td:last-child > .fi-ta-actions > :nth-child(5))) > thead > tr > th:last-child, .fi-ta-table:has(> tbody > tr > td:last-child > .fi-ta-actions):not(:has(> tbody > tr > td:last-child > .fi-ta-actions > :nth-child(5))) > tbody > tr > td:last-child:has(> .fi-ta-actions) { position: sticky; right: 0; z-index: 1; } .fi-ta-table:has(> tbody > tr > td:last-child > .fi-ta-actions):not(:has(> tbody > tr > td:last-child > .fi-ta-actions > :nth-child(5))) > thead > tr > th:last-child { background-color: var(--mv-bg); } .fi-ta-table:has(> tbody > tr > td:last-child > .fi-ta-actions):not(:has(> tbody > tr > td:last-child > .fi-ta-actions > :nth-child(5))) > tbody > tr > td:last-child:has(> .fi-ta-actions) { /* the row's own tint (hover, selected) laid over the card colour, so the cell matches its row and is never see-through */ background-color: var(--mv-surface); background-image: linear-gradient(var(--mv-row-tint, transparent), var(--mv-row-tint, transparent)); } /* an open menu of row buttons stays above the next rows' pinned cells */ .fi-ta-table:has(> tbody > tr > td:last-child > .fi-ta-actions):not(:has(> tbody > tr > td:last-child > .fi-ta-actions > :nth-child(5))) > tbody > tr > td:last-child:has(> .fi-ta-actions):is(:hover, :focus-within) { z-index: 2; } /* The edge: only while the list can scroll and is not at its right end (a scroll-driven animation does nothing when nothing scrolls). */ @supports (animation-timeline: scroll()) { .fi-ta-table:has(> tbody > tr > td:last-child > .fi-ta-actions):not(:has(> tbody > tr > td:last-child > .fi-ta-actions > :nth-child(5))) > thead > tr > th:last-child, .fi-ta-table:has(> tbody > tr > td:last-child > .fi-ta-actions):not(:has(> tbody > tr > td:last-child > .fi-ta-actions > :nth-child(5))) > tbody > tr > td:last-child:has(> .fi-ta-actions) { animation: mv-sticky-edge linear both; animation-timeline: scroll(nearest inline); } } @supports not (animation-timeline: scroll()) { .fi-ta-table:has(> tbody > tr > td:last-child > .fi-ta-actions):not(:has(> tbody > tr > td:last-child > .fi-ta-actions > :nth-child(5))) > thead > tr > th:last-child, .fi-ta-table:has(> tbody > tr > td:last-child > .fi-ta-actions):not(:has(> tbody > tr > td:last-child > .fi-ta-actions > :nth-child(5))) > tbody > tr > td:last-child:has(> .fi-ta-actions) { box-shadow: inset 1px 0 0 var(--mv-line-2); } } } /* MOVE-12: in a list's column menu, a column that is always shown says so; its tick is grey (above) and its name quieter. */ .fi-ta-col-manager-label:has(> .fi-checkbox-input:disabled) { color: var(--mv-ink-3); cursor: default; } .fi-ta-col-manager-label:has(> .fi-checkbox-input:disabled)::after { content: "Always shown"; margin-inline-start: auto; padding-inline-start: 12px; font-size: 12px; font-weight: 400; color: var(--mv-ink-3); } @keyframes mv-sticky-edge { 0%, 98% { box-shadow: inset 1px 0 0 var(--mv-line), -8px 0 8px -8px var(--mv-sticky-edge); } 100% { box-shadow: none; } } .fi-ta-row { --mv-row-tint: transparent; } @media (hover: hover) { .fi-ta-row:hover { --mv-row-tint: color-mix(in oklab, var(--mv-bg) 70%, transparent); } } .fi-ta-row.fi-selected { --mv-row-tint: var(--mv-brand-tint); } /* Design review (v1.54), FINDING-004: Fleet rules (and Standard fleet rules) is ~150 settings in ~30 sections. An "On this page" index of the form's own section headings: a sticky column on wide screens; on smaller ones a jump list that stays under the top bar. */ .mv-rules { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; } .mv-rules__form { min-width: 0; } .mv-rules__index { position: sticky; top: var(--mv-topbar-h, 56px); z-index: 5; } .mv-rules__index-title { display: block; margin: 0 0 6px; font-size: 12px; font-weight: 600; letter-spacing: .02em; color: var(--mv-ink-3); } .mv-rules__jump { display: block; padding: 10px 0 8px; background: var(--mv-bg); box-shadow: 0 1px 0 var(--mv-line); } .mv-rules__jump-select { display: block; width: 100%; min-height: 44px; padding: 8px 36px 8px 12px; font: inherit; font-size: 15px; color: var(--mv-ink); background-color: var(--mv-surface); border: 1px solid var(--mv-line); border-radius: 8px; } .mv-rules__jump-select:focus-visible { outline: 2px solid var(--mv-brand); outline-offset: 2px; } .mv-rules__list { display: none; } .mv-rules__list ul { margin: 0; padding: 0; list-style: none; } .mv-rules__link { display: block; padding: 5px 10px; border-left: 2px solid var(--mv-line); font-size: 13px; line-height: 1.35; color: var(--mv-ink-2); text-decoration: none; } .mv-rules__link:hover { color: var(--mv-ink); background: color-mix(in oklab, var(--mv-line-2) 70%, transparent); } .mv-rules__link.is-current { border-left-color: var(--mv-brand); color: var(--mv-brand); font-weight: 600; background: var(--mv-brand-tint); } .mv-rules__link:focus-visible { outline: 2px solid var(--mv-brand); outline-offset: 1px; border-radius: 2px; } .mv-rules-section { scroll-margin-top: calc(var(--mv-topbar-h, 56px) + 84px); } .mv-rules-section:focus { outline: none; } .mv-rules-section:focus-visible > .fi-section { box-shadow: 0 0 0 2px var(--mv-brand); } @media (min-width: 80rem) { .mv-rules { grid-template-columns: minmax(0, 1fr) 232px; gap: 24px; } .mv-rules__index { grid-column: 2; grid-row: 1; top: calc(var(--mv-topbar-h, 56px) + 16px); max-height: calc(100vh - var(--mv-topbar-h, 56px) - 32px); overflow-y: auto; padding-bottom: 8px; } .mv-rules__form { grid-column: 1; grid-row: 1; } .mv-rules__jump { display: none; } .mv-rules__list { display: block; } .mv-rules-section { scroll-margin-top: calc(var(--mv-topbar-h, 56px) + 16px); } } @media (prefers-reduced-motion: no-preference) { .mv-rules__link { transition: color .15s, background-color .15s; } } /* Design review (v1.54), FINDING-007 (owner's option A): a long help text under a field folds behind a small ⓘ beside the label (resources/views/vendor/filament-forms/components/field-wrapper.blade.php). Short hints and money/irreversible warnings stay in view. */ .mv-help-toggle { position: relative; flex: none; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin: -1px 0 -1px -6px; padding: 0; border: 0; border-radius: 999px; background: transparent; color: var(--mv-ink-3, #5F6B76); cursor: pointer; } .mv-help-toggle::after { content: ""; position: absolute; inset: -7px; } /* a 36px target on a computer */ .mv-help-toggle__icon { width: 16px; height: 16px; } .mv-help-toggle:hover { color: var(--mv-ink, #111C24); background: var(--mv-line-2, #EEF1F4); } .mv-help-toggle[aria-expanded="true"] { color: var(--mv-brand); background: var(--mv-brand-tint); } .mv-help-toggle:focus-visible { outline: 2px solid var(--mv-brand); outline-offset: 1px; } .mv-help { margin-top: 2px; } .mv-help[hidden] { display: none; } @media (max-width: 40rem) { .mv-help-toggle::after { inset: -11px; } /* 44px on a phone */ } /* Design review (v1.54), FINDING-012: the figures above a list (Drivers, Rental agreements, Tasks, checks, alerts) as a row of labelled chips, each a link to the list it counts (App\Filament\Support\StatChips). The label comes first in the page; the number is shown on top. */ .fi-header-subheading:has(> .mv-stats) { max-width: none; } /* Filament keeps a subheading to 672px, made for a sentence */ .mv-stats { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; margin-top: 4px; } .mv-stat { display: inline-flex; flex-direction: column; min-width: 96px; background: var(--mv-surface, #FFFFFF); border-radius: 8px; box-shadow: 0 0 0 1px var(--mv-line, #E3E8EC); } .mv-stat__main { display: flex; flex-direction: column; gap: 1px; padding: 7px 12px 8px; border-radius: 8px; color: var(--mv-ink, #111C24); text-decoration: none; } .mv-stat__n { order: -1; font-size: 18px; line-height: 1.2; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .mv-stat__l { font-size: 12px; line-height: 1.3; color: var(--mv-ink-3, #5F6B76); } .mv-stat__l::first-letter { text-transform: uppercase; } .mv-stat__sub { margin: -4px 12px 8px; font-size: 12px; line-height: 1.3; color: var(--mv-ink-3, #5F6B76); } .mv-stat__sub a { color: var(--mv-brand); font-weight: 600; text-decoration: none; } a.mv-stat__main:hover { background: var(--mv-brand-tint); } a.mv-stat__main:hover .mv-stat__n { color: var(--mv-brand); } .mv-stat__sub a:hover { text-decoration: underline; } a.mv-stat__main:focus-visible, .mv-stat__sub a:focus-visible { outline: 2px solid var(--mv-brand); outline-offset: 2px; } @media (max-width: 40rem) { .mv-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; } .mv-stat { min-width: 0; } .mv-stat__main { padding: 7px 10px 8px; min-height: 44px; } .mv-stat__sub { margin-inline: 10px; } } /* MOVE-R38: Delete on a set-up list row that something uses: shown, but plainly grey (not a paler red), with the reason on hover and on keyboard focus (App\Filament\Support\DeleteUnused). It stays focusable, so it keeps a focus ring. */ .fi-link.mv-delete-blocked.fi-disabled, .fi-link.mv-delete-blocked.fi-disabled:where(.dark, .dark *) { color: var(--mv-ink-3, #5F6B76); opacity: 1; cursor: not-allowed; } .fi-link.mv-delete-blocked.fi-disabled:focus-visible { outline: 2px solid var(--mv-brand); outline-offset: 2px; border-radius: 4px; } /* MOVE-13: plain drop-down lists (the browser's own