::selection { background: #3390FF; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); } /* Colour tokens (the light + dark :root palette) now live in SCSS: resources/scss/tokens.scss compiled to public/assets/css/tokens.css, loaded before this file on every page that needs them (admin, login, public DSR). Per-company brand overrides still come from the company_theme_styles partial. */ .text-muted { color: var(--muted) !important; } /* Checked checkboxes/radios: Tabler fills them with --tblr-primary (mapped to --primary) and overlays a hardcoded white checkmark. In dark mode --primary is a pale near-white, so the white mark vanishes. Pin the checked fill to the dark brand green (constant across themes) so the mark stays legible. */ .form-check-input:checked { background-color: var(--brand-primary); border-color: var(--brand-primary); } a.nav-link>.logo { max-height: 60px; } .navbar-nav .nav-link { height: 100%; } .navbar-nav .dropdown-menu { top: 99%; } .navbar-collapse .dropdown-toggle:after { font-size: 16px; margin-left: 0.4rem; top: 2px; position: relative; } /* Logo header: only present when doubleTopBar is enabled */ header.logo-header { top: 0; position: fixed; width: 100%; z-index: 1051; transition: transform var(--nav-transition-speed) ease; background: transparent !important; backdrop-filter: blur(var(--nav-blur)); -webkit-backdrop-filter: blur(var(--nav-blur)); } header.logo-header.nav-hidden { transform: translateY(calc(-1 * var(--header-height))); } /* Menu header: fixed at top (contains logo when doubleTopBar is off) */ header.menu-container { position: fixed; top: 0; width: 100%; z-index: 1050; transition: transform var(--nav-transition-speed) ease; background: transparent !important; backdrop-filter: blur(var(--nav-blur)); -webkit-backdrop-filter: blur(var(--nav-blur)); } header.menu-container .navbar { background: transparent !important; box-shadow: none !important; border-bottom: 1px solid #E5EEE7; } /* Auto-hide nav on scroll down */ header.menu-container.nav-hidden { transform: translateY(calc(-1 * var(--menu-height))); } .navbar-overlap:after { display: none !important; } .page-wrapper { padding-top: var(--menu-height); color: var(--dark); background: var(--Background-Calendar, linear-gradient(108deg, #F7F8FB 0%, #ECF2EE 50.51%, #D7E5DB 79.86%, #F7F8FB 100%), #FFF); } /* Developer-only "dark mode": a brute-force full-page invert so you can code in the dark without burning your retinas. Toggled from the top menu (Developer role) via window.toggleDevInvert(); persisted in localStorage.devInvert. hue-rotate(180deg) keeps hues roughly themselves after the invert. Media is re-inverted so photos, logos and videos still render normally. */ /* Fade the invert in/out (42ms). The transition sits on the always-present element so both adding and removing .dev-invert animate, which also powers the six-press strobe easter egg (see window.toggleDevInvert). */ html { transition: filter 42ms linear; } html.dev-invert { filter: invert(1) hue-rotate(180deg); background-color: #fff; } html.dev-invert img, html.dev-invert video, html.dev-invert iframe, html.dev-invert embed, html.dev-invert object, html.dev-invert canvas, html.dev-invert [style*="background-image"], html.dev-invert .no-dev-invert { filter: invert(1) hue-rotate(180deg); } /* Top-layer content (popovers like the x-select panel, native , and a 's ::backdrop) is painted outside , so the page-level invert above never reaches it. Re-apply the SAME filter to each open top-layer element so it matches the inverted page. Keep this byte-for-byte identical to the html.dev-invert filter or the colours won't line up. Media/.no-dev-invert inside these still re-invert correctly via the descendant rules above (the popover stays a DOM descendant of ; only its painting moves). */ html.dev-invert [popover]:popover-open, html.dev-invert dialog:open, html.dev-invert dialog:open::backdrop { filter: invert(1) hue-rotate(180deg); } /* Sticky filters bar — pinned to --brand-primary so the company colour stays * identical in light and dark mode (it's a recognisable anchor across themes). */ nav.navbar.navbar-filters { position: sticky; top: var(--menu-height); z-index: 1040; background-color: var(--brand-primary) !important; color: var(--brand-primary-contrast) !important; transition: top var(--nav-transition-speed) ease; padding: .5rem !important; border-radius: 29px; margin-bottom: .5rem; } nav.navbar.navbar-filters .nav-link, nav.navbar.navbar-filters .navbar-toggler, nav.navbar.navbar-filters .la, nav.navbar.navbar-filters a { color: var(--brand-primary-contrast) !important; } nav.navbar.navbar-filters .nav-link:hover, nav.navbar.navbar-filters .nav-link:focus, nav.navbar.navbar-filters a:hover, nav.navbar.navbar-filters a:focus { color: var(--brand-primary-contrast) !important; background-color: rgba(255, 255, 255, 0.2); border-radius: 5px; } /* Filter dropdowns: white surface with brand-coloured text in both modes. */ nav.navbar.navbar-filters .dropdown-menu, nav.navbar.navbar-filters .dropdown-menu a, nav.navbar.navbar-filters .dropdown-menu a:hover, nav.navbar.navbar-filters .dropdown-menu a:focus, nav.navbar.navbar-filters .dropdown-menu .nav-link, nav.navbar.navbar-filters .dropdown-menu .nav-link:hover, nav.navbar.navbar-filters .dropdown-menu .nav-link:focus { background-color: var(--brand-primary-contrast); color: #333333 !important; } nav.navbar.navbar-filters .datatable_search_stack, nav.navbar.navbar-filters #datatable_search_stack { background-color: rgba(255, 255, 255, 0.6); border: 1px solid var(--brand-primary-contrast); border-radius: 100px; padding: .25rem .75rem; } nav.navbar.navbar-filters .datatable_search_stack .form-control, nav.navbar.navbar-filters #datatable_search_stack .form-control { background-color: transparent; color: var(--brand-primary); border: none; box-shadow: none; } nav.navbar.navbar-filters .datatable_search_stack .form-control::placeholder, nav.navbar.navbar-filters #datatable_search_stack .form-control::placeholder { color: var(--brand-primary); opacity: .7; } nav.navbar.navbar-filters .datatable_search_stack .input-icon-addon, nav.navbar.navbar-filters #datatable_search_stack .input-icon-addon { color: var(--brand-primary); } /* Active filter: semi-transparent white bg with contrast-colour text. */ nav.navbar.navbar-filters li.active > a.nav-link, nav.navbar.navbar-filters li.active > a.nav-link:hover, nav.navbar.navbar-filters li.active > a.nav-link:focus { background-color: rgba(255, 255, 255, 0.2) !important; color: var(--brand-primary-contrast) !important; border-radius: 5px; } body.nav-is-hidden .navbar-filters { top: 0; } /* CRUD table headers use a separate sticky copy. The real DataTables header * always stays in the table; JavaScript only mirrors its rendered widths and * reveals this copy once the original reaches the sticky toolbar. */ .crud-floating-header__sentinel { height: .0625rem; margin-bottom: -.0625rem; pointer-events: none; } .crud-floating-header { position: sticky; top: var(--crud-floating-header-top, var(--menu-height)); z-index: 1030; height: 0; pointer-events: none; transition: top var(--nav-transition-speed) ease; } .crud-floating-header__viewport { overflow: hidden; visibility: hidden; opacity: 0; pointer-events: none; background-color: var(--background); box-shadow: 0 .25rem .75rem color-mix(in srgb, var(--dark) 15%, transparent); } .crud-floating-header.is-visible .crud-floating-header__viewport { visibility: visible; opacity: 1; pointer-events: auto; } .crud-floating-header__table { table-layout: fixed; margin: 0 !important; transition: none !important; transform-origin: left top; } .crud-floating-header__table > thead { visibility: visible !important; } .activity-sticky-header { position: sticky; top: var(--menu-height); z-index: 1020; transition: top var(--nav-transition-speed) ease, background-color 0.2s ease, box-shadow 0.2s ease; } .activity-sticky-header.is-stuck { background-color: rgba(255, 255, 255, 0.5); box-shadow: 0 2px 8px rgba(255, 255, 255, 0.5); } body.nav-is-hidden .activity-sticky-header { top: 0; } /* Fixed bottom action buttons on list pages */ #bottom_buttons { position: fixed; z-index: 9001; bottom: 0; left: 0; right: 0; background-color: var(--secondary); padding: .5rem 1rem; border-radius: 0; box-shadow: 0 -4px 24px var(--light); } /* Prevent table content from being hidden behind fixed bottom bar */ [bp-section="crud-operation-list"] { padding-bottom: 3.5rem; } /* Length menu in bottom bar: keep on one line */ #bottom_bar_length, #bottom_bar_length .dataTables_length, #bottom_bar_length .dt-length { display: flex; align-items: center; flex-wrap: nowrap; white-space: nowrap; } #bottom_bar_length .dataTables_length label, #bottom_bar_length .dt-length label { display: flex; align-items: center; gap: .35rem; white-space: nowrap; margin-bottom: 0; } #bottom_bar_length .dataTables_length select, #bottom_bar_length .dt-length select { width: auto; } /* Remove extra spacing on paginator in bottom bar */ #bottom_bar_pagination .dataTables_paginate, #bottom_bar_pagination .dt-paging { margin: 0; padding: 0; } #bottom_bar_pagination ul.pagination { padding-bottom: 0; margin-bottom: 0; } body[bp-layout=horizontal-overlap] .breadcrumb .active, body[bp-layout=horizontal-overlap] .header-operation, body[bp-layout=horizontal-overlap] [bp-section=page-heading] { color: var(--dark); } /* Combine page header + breadcrumbs into one row */ .page-body > main { display: flex; flex-wrap: wrap; align-items: baseline; } .page-body > main > nav[aria-label="breadcrumb"] { order: 2; flex: 0 0 auto; margin-left: auto; margin-bottom: 0; } .page-body > main > nav[aria-label="breadcrumb"] .breadcrumb { margin-bottom: 0; } .page-body > main > .header-operation[bp-section="page-header"] { order: 1; flex: 1 1 auto; width: auto; min-width: 0; margin-bottom: 0; } /* All other main children (content, widgets) flow below */ .page-body > main > .container-fluid, .page-body > main > div { order: 3; flex: 0 0 100%; } .table-header-icon { font-size: 20px; } .mr-2 { margin-right: 4px; } a.nav-link i { font-size: 30px !important; } .dropdown-separator { padding: 1rem 1rem 0; margin: 0; color: var(--tblr-gray-500); } .page.page-center { background-image: linear-gradient(to bottom, rgb(255, 255, 255), #9ab646dd), url("/img/traffic-332857_1920.jpg"); background-size: cover; background-position: center center; } .navbar-overlap:after { height: 7rem; } .infringements-very-low { background-color: var(--warning-light); } .infringements-low { background-color: var(--warning-light); } .infringements-medium { background-color: var(--warning); } .infringements-high { background-color: var(--danger); } .infringements-very-high { background-color: var(--danger); } .infringements-none, .status-pending { background-color: var(--tblr-gray-500); } .status-parsing { background-color: var(--tblr-yellow); } .status-parsed { background-color: var(--tblr-info); } .status-analyzing { background-color: var(--tblr-warning); } .status-analyzed { background-color: var(--success); } .status-analyzed-limited-data { background-color: var(--success); } .status-no-companylock, .status-no-activities, .status-error-parsing, .status-error-analyzing, .badge-danger { background-color: var(--danger); } .status-skipped { background-color: var(--tblr-table-bg); } /* #862: a file whose driver or company is not linked yet. It had no entry here, so its badge fell through to Tabler's near-white default background under the white badge text below and the label was unreadable. Pale warning marks it as needing action and carries dark text at full contrast. .status-unknown covers a status value outside the known list, which used to land on the same dead end. */ .status-unknown-company-contact, .status-unknown { background-color: var(--warning-light); } /* Badge labels are light on every filled background. White badges are the sole exception; the status variants below render on the same white/table surface without using Bootstrap's bg-white utility. !important is needed to make this rule authoritative over Bootstrap's text color utilities. */ .badge { color: var(--light) !important; } .badge.bg-white, .badge.status-skipped, .badge.status-unknown-company-contact, .badge.status-unknown { color: var(--dark) !important; } /* #853: Bootstrap handles the in-flow layout, top alignment, spacing, shape, typography and colour. Component CSS keeps the circles compact and lets adjacent counters overlap like one notification cluster. */ .task-menu-badge-group { isolation: isolate; } .task-menu-badge-group:not(.task-menu-badge-group--wide) .task-menu-badge { mix-blend-mode: multiply; } .task-menu-badge-group:not(.task-menu-badge-group--wide) .task-menu-badge + .task-menu-badge { margin-left: -0.25rem; } .task-menu-badge { transform: none !important; min-width: 0; width: clamp(0.75rem, 4vw, 1rem); height: clamp(0.75rem, 4vw, 1rem); } .task-menu-badge.bg-warning.text-white { color: var(--light) !important; } .btn-group .dt-button-collection { width: unset; min-width: 218px; max-width: 90vw; } /* DataTables button dropdowns in bottom bar: open upwards. Override the inline top set by DataTables JS which miscalculates for position:fixed containers when the page is scrolled. */ #bottom_buttons .dt-button-collection { top: auto !important; bottom: 100%; } #crudTable td, #crudTable td.dtr-control:first-child { padding-top: .25rem; padding-bottom: .25rem; } .border-color-danger { border-color: var(--danger); } .border-color-warning { border-color: var(--warning); } .border-color-warning-light { border-color: var(--warning-light); } .border-color-success { border-color: var(--success); } .border-color-success-light { border-color: var(--success-light); } .text-success-light { color: var(--success-light); } /* Save actions bar on create/edit pages */ #saveActions { display: block; position: fixed; z-index: 9001; bottom: 0; left: 0; right: 0; background-color: var(--secondary); padding: .5rem 1rem; border-radius: 0; box-shadow: 0 -4px 24px var(--light); } form:has(#saveActions) { padding-bottom: 3.5rem; } #saveActions { margin: 0; } /* Show page bottom bar: add padding so content isn't hidden */ [bp-section="crud-operation-show"], body:has(#bottom_buttons) main { padding-bottom: 3.5rem; } /* "Set End of Service" button: pushed to the right */ #bottom_buttons .js-end-of-service-button { margin-left: auto; order: 90; } /* Destructive buttons in bottom bars: rightmost */ #bottom_buttons .btn.btn-danger, #bottom_buttons a[bp-button="delete"], #bottom_buttons a[bp-button="bulkDelete"], #bottom_buttons a[bp-button="destroy"], #bottom_buttons a[bp-button="bulkDestroy"], #bottom_buttons a[bp-button="trash"], #bottom_buttons a[bp-button="bulkTrash"], #bottom_buttons [data-button-type="delete"], #bottom_buttons .bulk-button-delete { order: 100; } /* Show-page bottom bar: let the row wrap instead of squeezing the buttons into each other. Below roughly a tablet the six actions do not fit on one line and used to overlap into unreadable labels. */ #bottom_buttons .crud-show-actions, .dialog__inline-actions.crud-show-actions { flex-wrap: wrap; row-gap: 0.25rem; } /* Show-page bottom bar: the reprocess actions join the drastic group on the right (#860), between the ordinary navigation and "Set End of Service". The first button of the group carries the auto margin that opens the gap and the ones after it sit flush against it, so the group reads as one block instead of drifting apart. */ #bottom_buttons .bottom-bar-right { margin-left: auto; order: 80; } #bottom_buttons .bottom-bar-right ~ .bottom-bar-right, #bottom_buttons .bottom-bar-right ~ .js-end-of-service-button { margin-left: 0; } /* Once the bar wraps there is no left/right split left to keep, so the drastic group packs against the left edge instead of dangling off the row above it. The wrapped bar is also taller than the 3.5rem the layout reserves, so the page gets room for four rows of buttons and keeps its last card readable. */ @media (max-width: 47.98em) { #bottom_buttons .bottom-bar-right, #bottom_buttons .js-end-of-service-button { margin-left: 0; } [bp-section="crud-operation-show"], body:has(#bottom_buttons) main { padding-bottom: 12rem; } } /* Push destructive buttons to the right only when no end-of-service button is present */ #bottom_buttons .d-flex:not(:has(.js-end-of-service-button)) > a[bp-button="delete"], #bottom_buttons .d-flex:not(:has(.js-end-of-service-button)) > a[bp-button="bulkDelete"], #bottom_buttons .d-flex:not(:has(.js-end-of-service-button)) > a[bp-button="bulkDestroy"], #bottom_buttons .d-flex:not(:has(.js-end-of-service-button)) > .bulk-button-delete, #bottom_buttons .d-flex:not(:has(.js-end-of-service-button)) > .btn.btn-danger { margin-left: auto; } /** If you see this, you're probably thinking WTF, but this piece of technology makes it so the date selector on the contact page can make duplicates without seeing them.. best fix is a quick fix right???? */ h2.text-dark+h2.text-dark { display: none; } .nowrap { white-space: nowrap; } .bg-danger-light { background-color: var(--danger-light) !important; } .bg-warning-light { background-color: var(--warning-light) !important; } .bg-info-light { background-color: var(--info-light) !important; } .bg-danger-lighter { background-color: var(--danger-light) !important; } .bg-warning-lighter { background-color: var(--warning-light) !important; } .bg-info-lighter { background-color: var(--info-light) !important; } .bg-success-lighter { background-color: var(--success-light) !important; } .opacity-50 { opacity: 0.5; } #contact-moment-create-form-content { display: none; } .form-group:has([name="create_task"]:checked)+#contact-moment-create-form-content { display: block; } .rounded-lg { border-radius: 16px; } .btn-none { padding: 0; margin: 0; border: none; background: none; outline: none; } .z-index-1 { z-index: 1; } .task.card:hover { transform: scale(1.01); } .task .task-description { overflow: hidden; height: 0; opacity: 0; transition: opacity 0.1s ease-in-out; } .task.card:hover .task-description { height: auto; opacity: 1; } .task.card a:hover .la { transform: scale(1.2); } /* Mobile baseline (#764) The admin is used in the field, where the previous desktop-first flex rows either ran out of the viewport or made the navigation take over the page. Keep the desktop navigation untouched, but give the mobile bar a real viewport-bounded, scrollable menu and make dashboard content one-column. */ .dashboard-admin-grid, .dashboard-admin-cards { display: flex; align-items: flex-start; gap: 2rem; } .dashboard-admin-grid { justify-content: space-between; } .dashboard-company .card-body { min-width: 0; } @media (max-width: 991.98px) { /* The desktop header has no visible content at this breakpoint but still occupied its fixed height above the mobile bar. */ header.menu-container { display: none; } aside.navbar.d-lg-none { position: fixed; inset: 0 0 auto; z-index: 1052; min-height: var(--menu-height); padding: .5rem 1rem; background: color-mix(in srgb, var(--background, #fff) 94%, transparent); border-bottom: 1px solid var(--border, #e5eee7); backdrop-filter: blur(var(--nav-blur, 12px)); -webkit-backdrop-filter: blur(var(--nav-blur, 12px)); } aside.navbar.d-lg-none .navbar-toggler { color: var(--dark, #1f2937); } aside.navbar.d-lg-none #mobile-menu { max-height: calc(100dvh - var(--menu-height) - 1rem); margin: .5rem -1rem -0.5rem; padding: .5rem 1rem 1rem; overflow-y: auto; overscroll-behavior: contain; background: var(--background, #fff); border-top: 1px solid var(--border, #e5eee7); box-shadow: 0 .75rem 1.5rem rgb(0 0 0 / .12); } aside.navbar.d-lg-none #mobile-menu .nav-link, aside.navbar.d-lg-none #mobile-menu .dropdown-item { min-height: 2.75rem; display: flex; align-items: center; } .page-wrapper { padding-top: var(--menu-height); overflow-x: clip; } .page-body > main { align-items: flex-start; } .page-body > main > nav[aria-label="breadcrumb"] { order: 3; width: 100%; margin: .25rem 0 0; overflow-x: auto; } .dashboard-admin-grid, .dashboard-admin-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; } .dashboard-admin-grid > .card, .dashboard-admin-cards > .card, .dashboard-company .row > [class*="col-"] { min-width: 0; width: 100%; } .dashboard-company .card-body:has(.table), .dashboard-admin-grid .card-body:has(.table) { overflow-x: auto; -webkit-overflow-scrolling: touch; } .dashboard-company .summary-filter { flex: 1 1 4.5rem; padding: .5rem .25rem; } .dashboard-company .card-body > .d-flex.justify-content-around { flex-wrap: wrap; gap: .5rem; } .field-row { align-items: flex-start; flex-direction: column; gap: .15rem; } .field-label { width: auto; min-width: 0; } } /* Filter count badges */ .category-count, .assigned-to-count, .company-count { font-size: 0.75rem; min-width: 20px; text-align: center; padding: 0.25rem 0.5rem; border-radius: 10px; font-weight: 500; } .task-filter .form-check { margin-bottom: 0.5rem; } .task-filter .form-check>div:first-child { flex: 1; } .blur { filter: blur(.5rem); } .btn { border-radius: 8px; padding: 8px 14px; &.btn-sm { padding: 4px 10px; font-size: .8rem; } &.btn-primary { background-color: var(--primary) !important; color: var(--light) !important; } &.bg-primary-lighter { background-color: var(--primary-light) !important; color: var(--light) !important; } &:hover { filter: var(--highlight); } &.btn-success { background-color: var(--success) !important; color: var(--light) !important; } } /* Show-page action bar (#819). Backpack 7 hardcodes `btn btn-sm btn-link` on its update and delete buttons and defaults every other line-stack button to the same. Inside a table row that is right, but this stack is also a show page's action bar, where it turns the whole bar into small text links in Tabler's link blue. The v6 button overrides dropped in #816 gave edit a solid primary, delete a solid danger and the rest an outline; that look is restored here rather than by forking Backpack's views again. Buttons that carry their own colour (btn-outline-danger, btn-warning) are untouched. */ .crud-show-actions .btn.btn-link { --tblr-btn-color: var(--primary); --tblr-btn-bg: transparent; --tblr-btn-border-color: var(--primary); --tblr-btn-hover-color: var(--primary); --tblr-btn-hover-bg: transparent; --tblr-btn-hover-border-color: var(--primary); color: var(--primary); border-color: var(--primary); text-decoration: none; } /* Backpack's Tabler theme pins `#bottom_buttons a.btn.btn-sm { padding: 5px 10px }`, which outranks any class-only selector. The neighbouring buttons in this bar are not btn-sm, so without matching that id the restored buttons end up visibly shorter than the ones next to them. */ #bottom_buttons .crud-show-actions .btn.btn-link, .dialog__inline-actions.crud-show-actions .btn.btn-link { /* Undo the rest of btn-sm as well, or these sit 3px shorter than the button beside them. 2.5rem is also the minimum hit target we hold ourselves to. */ --tblr-btn-line-height: 1.25rem; --tblr-btn-icon-size: 1.25rem; padding: 0.5rem 0.875rem; font-size: inherit; min-height: 2.5rem; /* Same rule adds margin-top: 5px, which knocks these 2px out of line with the buttons beside them. */ margin-top: 0; } .crud-show-actions [bp-button="update"].btn.btn-link { --tblr-btn-hover-color: var(--light); background-color: var(--primary); border-color: var(--primary); color: var(--light); } .crud-show-actions [bp-button="delete"].btn.btn-link { --tblr-btn-color: var(--danger); --tblr-btn-hover-color: var(--light); background-color: var(--danger); border-color: var(--danger); color: var(--light); } /* A button that disables itself (the activity button when the driver has no activities) must keep reading as unavailable, not as an action. */ .crud-show-actions .btn.btn-link.disabled { --tblr-btn-color: var(--text-muted); background-color: transparent; border-color: transparent; color: var(--text-muted); } .text-primary { color: var(--primary) !important; } /* ────────────────────────────────────────────────────────────── Admin card + field-row surfaces ────────────────────────────────────────────────────────────── Previously duplicated inline across contact_show / company_show / vehicle_show / company_gap_analysis(_select).blade.php. Using CSS vars so dark mode flips naturally. */ .card { border: 1px solid var(--border); box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.15); } .card-header { background-color: var(--background); border-bottom: 1px solid var(--border); padding: 1rem 1.25rem; } .card-title { font-size: 1.1rem; font-weight: 600; color: var(--dark); margin: 0; } /* Field display rows — two-column label/value used on entity show pages. */ .field-group { border-bottom: 1px solid var(--background); padding: 0.5rem 0; } .field-group:last-child { border-bottom: none; } .field-row { display: flex; align-items: baseline; gap: 0.5rem; } .field-label { width: 50%; font-size: 0.875rem; font-weight: 600; color: var(--dark); min-width: 120px; flex-shrink: 0; } .field-value { font-size: 0.875rem; color: var(--dark); word-wrap: break-word; flex: 1; } /* ────────────────────────────────────────────────────────────── Driving Style Report (DSR) ────────────────────────────────────────────────────────────── */ .dsr-banner-img { aspect-ratio: 1280 / 200; overflow: hidden; } .dsr-banner-img img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 12px 12px 0 0; } .dsr-date-header .date-start { color: #888; font-weight: 500; font-size: 0.78rem; } .dsr-date-header .date-arrow { color: #bbb; font-size: 0.65rem; line-height: 1; } .dsr-date-header .date-end { font-weight: 600; color: var(--dark); font-size: 0.88rem; } .dsr-section-cell { width: 210px; border-left: 4px solid var(--primary); border-right: 1px solid #eee; background: #fafcfa; padding: 1rem 1.25rem; vertical-align: middle; } .dsr-icon-box { width: 48px; height: 48px; border-radius: 12px; background: var(--dsr-green-light); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .dsr-icon-box i { font-size: 1.4rem; color: var(--dsr-green); } .dsr-section-start td { border-top: 2px solid #e0e0e0; } .dsr-bg-dark { background: linear-gradient(135deg, var(--dsr-green-darker) 0%, var(--dsr-green-dark) 50%, #4a7c3f 100%); } .dsr-bg-light { background: linear-gradient(135deg, var(--dsr-green-light) 0%, #c8e6c9 40%, #a5d6a7 100%); } .dsr-bg-bar { background: linear-gradient(90deg, var(--dsr-green-light), #f0f7f0, var(--dsr-green-light)); } /* DSR main overview table */ .dsr-table { width: 100%; border-collapse: collapse; } .dsr-table thead th { padding: 1rem 0.75rem; text-align: center; vertical-align: middle; background: #f6faf6; border-bottom: 2px solid #ddd; font-size: 0.88rem; } .dsr-table tbody td { padding: 0.55rem 0.75rem; border-bottom: 1px solid #f0f0f0; font-size: 0.88rem; color: #444; } .dsr-chart-wrapper svg { max-width: 100%; height: auto; } /* DSR summary score table (dark header) */ .dsr-summary-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; } .dsr-summary-table thead th { background: var(--dsr-green-darker); color: #fff; padding: 0.5rem 0.6rem; text-align: center; border: 1px solid #4a7c3f; font-size: 0.8rem; font-weight: 600; } .dsr-summary-table thead th .date-start { font-size: 0.72rem; opacity: 0.8; } .dsr-summary-table thead th .date-arrow { font-size: 0.6rem; opacity: 0.5; line-height: 1; } .dsr-summary-table thead th .date-end { font-weight: 700; } .dsr-summary-table tbody td { padding: 0.4rem 0.6rem; text-align: center; border: 1px solid #4a7c3f; font-weight: 600; color: var(--dark); } .dsr-summary-table tbody td:first-child { text-align: left; background: var(--dsr-green-dark); color: #fff; font-weight: 500; } /* DSR per-vehicle table */ .dsr-vehicle-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; } .dsr-vehicle-table thead th { background: var(--dsr-green); color: #fff; padding: 0.4rem 0.6rem; text-align: center; border: 1px solid #4a9e4e; font-weight: 600; font-size: 0.85rem; } .dsr-vehicle-table tbody td { padding: 0.25rem 0.5rem; border: 1px solid #b5d8b7; color: var(--dark); font-size: 0.8rem; } .dsr-vehicle-table .vt-label, .dsr-vehicle-table .vt-label-r { font-weight: 600; background: #3d8b40; white-space: nowrap; color: #fff; } .dsr-vehicle-table .vt-label { text-align: right; padding-right: 0.75rem; } .dsr-vehicle-table .vt-label-r { text-align: left; padding-left: 0.75rem; } /* Score color utilities */ .score-bg-excellent { background: #00bc55; } .score-bg-good { background: #a2d668; } .score-bg-fair { background: #ffe07d; } .score-bg-mediocre { background: #f5c304; } .score-bg-poor { background: #ff5757; } .score-text-excellent { color: #00bc55; font-weight: 700; } .score-text-good { color: #a2d668; font-weight: 700; } .score-text-fair { color: #ffe07d; font-weight: 700; } .score-text-mediocre { color: #f5c304; font-weight: 700; } .score-text-poor { color: #ff5757; font-weight: 700; } .score-cell-excellent { background: #00bc55; color: #fff; } .score-cell-good { background: #a2d668; color: #fff; } .score-cell-fair { background: #ffe07d; color: #333; } .score-cell-mediocre { background: #f5c304; color: #333; } .score-cell-poor { background: #ff5757; color: #fff; } /* ────────────────────────────────────────────────────────────── DSR — Mobile responsive styles ────────────────────────────────────────────────────────────── */ /* Horizontal scroll wrapper for all DSR tables */ .dsr-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } @media (max-width: 767px) { /* Banner: taller aspect ratio on small screens */ .dsr-banner-img { aspect-ratio: 1280 / 350; } /* Section cells: compact on mobile — icon only, label hidden */ .dsr-section-cell { width: 48px !important; min-width: 48px; max-width: 48px; padding: 0.4rem !important; border-left: 3px solid var(--primary); border-right: none; text-align: center; } .dsr-section-cell .d-flex { flex-direction: column; align-items: center; gap: 0 !important; } /* Label text below icon, compact */ .dsr-section-cell .d-flex > div:last-child { font-size: 0.6rem; line-height: 1.1; } .dsr-section-cell .d-flex > div:last-child .fst-italic { display: none; } .dsr-icon-box { width: 36px; height: 36px; border-radius: 8px; } .dsr-icon-box i { font-size: 1.1rem; } /* Tables: horizontal scroll via wrapper, keep table display for rowspan */ .dsr-table, .dsr-summary-table, .dsr-vehicle-table { white-space: nowrap; } /* Cap label columns at 33% on mobile */ .dsr-table tbody td:not(.dsr-section-cell):first-child, .dsr-table tbody td:nth-child(2), .dsr-summary-table tbody td:first-child, .dsr-vehicle-table tbody th.vt-label { max-width: 33%; white-space: normal; } /* 2-line clamp on label text via inner span */ .dsr-label-clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: normal; max-width: 120px; } /* Reduce font sizes and padding */ .dsr-table thead th, .dsr-table tbody td { padding: 0.4rem 0.5rem; font-size: 0.78rem; } .dsr-summary-table thead th, .dsr-summary-table tbody td { padding: 0.3rem 0.4rem; font-size: 0.72rem; } .dsr-vehicle-table thead th, .dsr-vehicle-table tbody td { padding: 0.2rem 0.4rem; font-size: 0.72rem; } .dsr-date-header .date-start { font-size: 0.65rem; } .dsr-date-header .date-end { font-size: 0.75rem; } .dsr-date-header .date-arrow { font-size: 0.55rem; } /* Coach footer: stack vertically */ .card > .d-flex.align-items-center[style*="border-top:3px"] { flex-direction: column; text-align: center; padding: 1rem !important; gap: 1rem !important; } .card > .d-flex.align-items-center[style*="border-top:3px"] > div[style*="flex:0 0 260px"] { flex: 1 1 auto !important; } /* Summary section: stack chart and table */ .dsr-bg-dark .row.g-3 .col-md-5, .dsr-bg-dark .row.g-3 .col-md-7 { padding: 0 0.5rem; } .dsr-bg-dark .row.g-3 { flex-direction: column; } .dsr-bg-dark h3 { font-size: 1.1rem !important; } /* Vehicle table section: reduce padding */ .dsr-bg-light { padding: 1rem !important; } .dsr-bg-light h2 { font-size: 1.1rem !important; } /* General container padding reduction */ .container.py-4[style*="max-width:1280px"] { padding-left: 0.5rem !important; padding-right: 0.5rem !important; } /* Page title */ .container.py-4 h1.text-primary { font-size: 1.3rem; } /* Questions bar */ .dsr-bg-bar { font-size: 0.78rem !important; padding: 0.5rem 0.75rem !important; } } /* ========================================================================== Developer / preview "rainbow" affordances -------------------------------------------------------------------------- Eye-catching animated rainbow styling for developer-only and impersonation preview controls, applied purely via class name: - .rainbow-nav-item : sidebar nav button (taakmanager preview button) - .rainbow-text : animated rainbow gradient on a dropdown item label - .rainbow-border : animated rainbow gradient border around a control or a whole region; what @experimental wraps its slot in - .rainbow-btn : a .btn filled with the animated gradient, for an action that is still behind isExperimental() Seeing any of these while the experimental toggle is OFF means unreleased work has leaked into a real user's view (#744). Never use them for product UI. ========================================================================== */ @keyframes rainbow-shift { to { background-position: 200% center; } } /* Rainbow preview nav buttons (taakmanager / stop-impersonating): a solid, attention-grabbing rainbow bar. The class is merged onto the element itself. White text + icon are forced so they stand out over the company's primary/link colour. */ a.rainbow-nav-item.nav-link { background-image: linear-gradient( 90deg, #ff0040, #ff8c00, #ffe600, #00d26a, #00b3ff, #7a5cff, #ff0040 ); background-size: 200% auto; animation: rainbow-shift 4s linear infinite; margin: 0.25rem 0.5rem; border-radius: 0.5rem; color: #fff !important; font-weight: 700; text-shadow: 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.45); box-shadow: 0 0 0.625rem rgba(0, 0, 0, 0.2); } a.rainbow-nav-item.nav-link, a.rainbow-nav-item.nav-link span, a.rainbow-nav-item.nav-link i { color: #fff !important; } a.rainbow-nav-item.nav-link:hover, a.rainbow-nav-item.nav-link:focus { color: #fff !important; filter: brightness(1.08); } /* Animated rainbow border around a control (V1/V4 engine switch). */ .rainbow-border { animation: rainbow-shift 4s linear infinite; padding: 0.25rem 0.5rem; border-radius: 0.5rem; box-shadow: 0 0 0 0.125rem transparent; /* Paint the gradient on the border box only, keep the inside neutral. */ background-origin: border-box; background-clip: padding-box, border-box; background-image: linear-gradient(var(--tblr-card-bg, #fff), var(--tblr-card-bg, #fff)), linear-gradient(90deg, #ff0040, #ff8c00, #ffe600, #00d26a, #00b3ff, #7a5cff, #ff0040); border: 0.125rem solid transparent; background-size: auto, 200% auto; } /* A button for an experimental action: same palette as the nav variant, sized like any other .btn. Use as class="btn rainbow-btn" so the base .btn rules (radius, padding) still apply. White text and icon are forced so they stay readable over the gradient, whatever the company's primary colour is. */ .btn.rainbow-btn { background-image: linear-gradient( 90deg, #ff0040, #ff8c00, #ffe600, #00d26a, #00b3ff, #7a5cff, #ff0040 ); background-size: 200% auto; animation: rainbow-shift 4s linear infinite; border: 0; font-weight: 700; text-shadow: 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.45); } .btn.rainbow-btn, .btn.rainbow-btn i, .btn.rainbow-btn span { color: #fff !important; } .btn.rainbow-btn:hover, .btn.rainbow-btn:focus { color: #fff !important; filter: brightness(1.08); } /* Static rainbow gradient text on an icon (dev tools trigger): same palette as the animated variants but without the shifting animation. */ .rainbow-icon { background-image: linear-gradient( 90deg, #ff0040, #ff8c00, #ffe600, #00d26a, #00b3ff, #7a5cff ); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* Rainbow gradient text on dropdown item labels (developer-only menu items). */ .rainbow-text > span { background-image: linear-gradient( 90deg, #ff0040, #ff8c00, #ffe600, #00d26a, #00b3ff, #7a5cff, #ff0040 ); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; font-weight: 700; animation: rainbow-shift 4s linear infinite; } /* ================================================================== x-dialog + x-select components. These replaced a small set of Tailwind (`tw:`) utilities. Layout is done with Bootstrap/Tabler utilities in the markup; the rules below carry only what Bootstrap utilities cannot express here: the design tokens (var(--background/--text/--border/--primary/...)), the .375rem radius (Tabler pins --tblr-border-radius to 0, so .rounded is square), the brand focus ring, the SVG chevron, the combo placeholder, and the dialog open animation. ================================================================== */ .app-dialog { padding: 0; border: 0; max-width: 92vw; max-height: 85vh; color: var(--text); background-color: var(--background); border-radius: 0.5rem; box-shadow: var(--shadow-card); overscroll-behavior: contain; } .app-dialog[open] { display: flex; flex-direction: column; overflow: hidden; animation: dialog-in 0.15s ease-out; } .app-dialog::backdrop { background-color: rgba(0, 0, 0, 0.45); -webkit-backdrop-filter: blur(0.125rem); backdrop-filter: blur(0.125rem); } /* The document scrolls on the root element, not , so lock both: with only body:has() the host page still scrolled behind an open dialog. */ :root:has(.app-dialog[open]), body:has(.app-dialog[open]) { overflow: hidden; } .app-dialog--sm { width: min(32rem, 92vw); } .app-dialog--md { width: min(56rem, 92vw); } .app-dialog--lg { width: min(72rem, 94vw); } .app-dialog--xl { width: min(90rem, 96vw); } .dialog__header { gap: 0.75rem; padding: 0.75rem 1.25rem; border-bottom: 1px solid var(--border); } .dialog__footer { padding: 0.75rem 1.25rem; border-top: 1px solid var(--border); } /* No padding: the fragment loaded into the dialog owns its own insets, so a page can sit flush against the dialog edges (the settings sidebar does). */ .dialog__body { flex: 1 1 0%; min-height: 0; overflow-y: auto; } .dialog__close { width: 2.5rem; height: 2.5rem; line-height: 1; border-radius: 0.375rem; color: var(--text-muted); cursor: pointer; } .dialog__close:hover { background-color: var(--background-muted); color: var(--text); } .dialog__close--header { font-size: 2.25rem; } /* Rendered before .dialog__body in the DOM, so it needs to sit above it. */ .dialog__close--corner { z-index: 10; font-size: 1.5rem; } .dialog__inline-actions { margin: 1rem 0 0; padding: 0.75rem 1.25rem; border-top: 1px solid var(--border); background-color: var(--background); } @keyframes dialog-in { from { opacity: 0; transform: translateY(0.5rem); } to { opacity: 1; transform: translateY(0); } } /* ---- x-select (components/select.blade.php), enhanced by the vendored Choices.js (public/assets/vendor/choices). These override its stock stylesheet with the design tokens and the .375rem radius; per-company theming keeps working because every color is a var(). ---- */ .choices { margin-bottom: 0; } .choices .choices__inner { background-color: var(--background); border: 1px solid var(--border); border-radius: 0.375rem; color: var(--text); font-size: 0.875rem; min-height: 2.25rem; padding: 0.25rem 2rem 0.25rem 0.5rem; } .choices:hover .choices .choices__inner { border-color: var(--text-subtle); } .choices.is-focused .choices__inner, .choices.is-open .choices .choices__inner { border-color: var(--primary); box-shadow: 0 0 0 0.125rem color-mix(in srgb, var(--primary) 25%, transparent); } .choices.is-disabled .choices .choices__inner { background-color: var(--background-muted); } .choices .choices__list--single { padding: 0.125rem 1rem 0.125rem 0.25rem; } .choices .choices__placeholder { color: var(--text-subtle); opacity: 1; } .choices .choices__input, .choices .choices__input:focus { background-color: transparent; color: var(--text); font-size: 0.875rem; margin-bottom: 0; } .choices .choices__list--dropdown, .choices .choices__list[aria-expanded] { background-color: var(--background); border: 1px solid var(--border); border-radius: 0.375rem; z-index: 1100; } .choices .choices__list--dropdown .choices__item--selectable.is-highlighted, .choices .choices__list[aria-expanded] .choices__item--selectable.is-highlighted { background-color: var(--primary); color: #fff; } .choices .choices__item--choice[aria-selected="true"] { background-color: var(--background-muted); } .choices .choices__list--multiple .choices__item { background-color: var(--primary); border: 0; border-radius: 0.25rem; font-size: 0.75rem; } .choices .choices__button { border-left-color: rgb(255 255 255 / 0.5); } /* An option's data-icon, prepended by the component's template override. */ .choices .choices__icon { width: 1.5em; height: 1.5em; margin-right: 0.375rem; vertical-align: -0.375em; } /* Choices' chevron, recolored to the token text. */ .choices[data-type*="select-one"]::after { border-color: var(--text) transparent transparent; } .choices[data-type*="select-one"].is-open::after { border-color: transparent transparent var(--text); } /* Structured dropdown rows ({title, bold, sub, side} custom properties). */ .choices .choices__rich { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .choices .choices__rich-main strong { font-weight: 600; } .choices .choices__rich-sub { font-size: 0.75rem; color: var(--text-muted); } .choices .choices__rich-side { color: var(--text-muted); white-space: nowrap; font-variant-numeric: tabular-nums; } .choices .is-highlighted .choices__rich-sub, .choices .is-highlighted .choices__rich-side { color: rgb(255 255 255 / 0.75); } /* Optgroup headings in the dropdown. */ .choices .choices__heading { border-bottom: 1px solid var(--border); color: var(--text-muted); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; padding: 0.5rem 0.625rem 0.25rem; }