/* ═══════════════════════════════════════════════════════════════════════════ AutoFlotte — DataBlox theme ─────────────────────────────────────────────────────────────────────────── Loaded AFTER styles.css so it wins on equal specificity. It does three things, in order: 1. Re-points the Bootstrap design tokens at DataBlox's palette (Tailwind violet accent + gray/slate neutrals). Nearly every component in the template reads `--bs-*`, so re-pointing the variables re-skins the app without touching markup; the handful of places the template compiled a literal hex into (`.btn-primary` & friends) are patched below. 2. Rebuilds the sidebar as DataBlox's rail: a gray-100 surface beside the white content area, pill nav rows, and a collapse toggle riding the right border. 3. Adapts the shell for the PWA on mobile — off-canvas drawer with a backdrop, safe-area insets, and touch-sized targets. Everything here is additive: no rule in styles.css was edited, so the template can still be re-generated. ═══════════════════════════════════════════════════════════════════════════ */ /* ── 1. Palette ──────────────────────────────────────────────────────────── */ /* DataBlox styles itself with Tailwind's default ramps: violet for the brand accent, gray for surfaces/chrome, slate for text. These are those literal values, named once here so the mappings below read as intent. */ :root { --af-violet-50: #f5f3ff; --af-violet-100: #ede9fe; --af-violet-200: #ddd6fe; --af-violet-300: #c4b5fd; --af-violet-400: #a78bfa; --af-violet-500: #8b5cf6; --af-violet-600: #7c3aed; --af-violet-700: #6d28d9; --af-violet-800: #5b21b6; /* The same shades as bare channels, for the `rgba(…, alpha)` and `--bs-*-rgb` forms Bootstrap needs. accent.js rewrites both lists together, so they can never drift apart. */ --af-violet-300-rgb: 196, 181, 253; --af-violet-400-rgb: 167, 139, 250; --af-violet-600-rgb: 124, 58, 237; --af-violet-700-rgb: 109, 40, 217; /* The three faint tints, locked to their light values. The product mock-ups in showcase.css are drawn as screenshots of a light-mode app and are used on pages that can be in dark mode, so they read these instead of the shades below, which [data-bs-theme=dark] darkens. */ --af-violet-50-lt: #f5f3ff; --af-violet-100-lt: #ede9fe; --af-violet-200-lt: #ddd6fe; --af-gray-50: #f9fafb; --af-gray-100: #f3f4f6; --af-gray-200: #e5e7eb; --af-gray-300: #d1d5db; --af-gray-400: #9ca3af; --af-gray-500: #6b7280; --af-gray-600: #4b5563; --af-slate-500: #64748b; --af-slate-600: #475569; --af-slate-700: #334155; --af-slate-800: #1e293b; --af-slate-900: #0f172a; /* Sidebar rail surface — the one tone that separates chrome from content. */ --af-rail-bg: var(--af-gray-100); --af-rail-border: var(--af-gray-200); } /* ── 2. Bootstrap token remap (light) ────────────────────────────────────── */ :root, [data-bs-theme=light] { /* Read off the ramp above rather than repeating its hexes: accent.js re-points --af-violet-* on when the user picks another accent, and everything downstream of these tokens follows without a second list to keep in step. */ --bs-primary: var(--af-violet-600); --bs-primary-rgb: var(--af-violet-600-rgb); --bs-primary-text-emphasis: var(--af-violet-800); --bs-primary-bg-subtle: var(--af-violet-50); --bs-primary-border-subtle: var(--af-violet-200); /* Secondary is the template's "ink" colour (headings on dark chips, etc.). */ --bs-secondary: #1e293b; --bs-secondary-rgb: 30, 41, 59; --bs-secondary-text-emphasis: #0f172a; --bs-secondary-bg-subtle: #f1f5f9; --bs-secondary-border-subtle: #cbd5e1; /* Semantic colours move to Tailwind's ramps so status chips sit in the same family as the accent instead of the template's original saturated set. */ --bs-success: #10b981; --bs-success-rgb: 16, 185, 129; --bs-success-text-emphasis: #047857; --bs-success-bg-subtle: #ecfdf5; --bs-success-border-subtle: #a7f3d0; --bs-info: #6366f1; --bs-info-rgb: 99, 102, 241; --bs-info-text-emphasis: #4338ca; --bs-info-bg-subtle: #eef2ff; --bs-info-border-subtle: #c7d2fe; --bs-warning: #f59e0b; --bs-warning-rgb: 245, 158, 11; --bs-warning-text-emphasis: #b45309; --bs-warning-bg-subtle: #fffbeb; --bs-warning-border-subtle: #fde68a; --bs-danger: #ef4444; --bs-danger-rgb: 239, 68, 68; --bs-danger-text-emphasis: #b91c1c; --bs-danger-bg-subtle: #fef2f2; --bs-danger-border-subtle: #fecaca; --bs-light: #f3f4f6; --bs-light-rgb: 243, 244, 246; --bs-dark: #0f172a; --bs-dark-rgb: 15, 23, 42; /* Text + surfaces */ --bs-body-color: #475569; --bs-body-color-rgb: 71, 85, 105; --bs-body-bg: #ffffff; --bs-body-bg-rgb: 255, 255, 255; --bs-heading-color: #0f172a; --bs-secondary-color: rgba(71, 85, 105, 0.72); --bs-secondary-color-rgb: 71, 85, 105; --bs-secondary-bg: #f9fafb; --bs-secondary-bg-rgb: 249, 250, 251; --bs-tertiary-color: rgba(71, 85, 105, 0.5); --bs-tertiary-bg: #f9fafb; --bs-border-color: #e5e7eb; --bs-border-color-translucent: rgba(15, 23, 42, 0.08); --bs-link-color: var(--af-violet-600); --bs-link-color-rgb: var(--af-violet-600-rgb); --bs-link-hover-color: var(--af-violet-700); --bs-link-hover-color-rgb: var(--af-violet-700-rgb); /* DataBlox's content area is one flat white surface; the rail carries the only tone. */ --custom-body-bg: #ffffff; --app-sidebar-bg: var(--af-rail-bg); --app-header-bg: #ffffff; --custom-modal-backdrop-bg: #0f172a; } /* ── 3. Dark theme ───────────────────────────────────────────────────────── */ /* DataBlox's dark mode is VS Code "Dark+": #1e1e1e base, #252526 for anything elevated (cards, header, rail), #333 hairlines. The accent lightens to violet-400 so it stays readable on those surfaces. */ [data-bs-theme=dark] { /* The three faint tints have to stay dark here — a 97%-lightness wash behind a chip would be a hole punched in a dark panel. Overriding them on the ramp rather than on the tokens keeps the mapping below identical in both themes, and gives accent.js one shape to generate. */ --af-violet-50: #2c2545; --af-violet-100: #352c55; --af-violet-200: #4c3f75; --bs-primary: var(--af-violet-400); --bs-primary-rgb: var(--af-violet-400-rgb); --bs-primary-text-emphasis: var(--af-violet-300); --bs-primary-bg-subtle: var(--af-violet-50); --bs-primary-border-subtle: var(--af-violet-200); --bs-success: #34d399; --bs-success-rgb: 52, 211, 153; --bs-success-bg-subtle: #1c3329; --bs-info: #818cf8; --bs-info-rgb: 129, 140, 248; --bs-info-bg-subtle: #262a47; --bs-warning: #fbbf24; --bs-warning-rgb: 251, 191, 36; --bs-warning-bg-subtle: #322a18; --bs-danger: #f87171; --bs-danger-rgb: 248, 113, 113; --bs-danger-bg-subtle: #3a2526; /* Secondary was the one family left on its light values here. In light mode it is the template's ink — a near-black chip colour over a #f1f5f9 wash — and both were coming through unchanged on a dark page: every `bg-secondary-subtle` (the neutral stat tiles on Réservations, Véhicules, Clients and Maintenance, and the count badges beside them) was a near-white box holding the page's light text, and the "Timbre fiscal" series on the dashboard chart reads --bs-secondary and was drawing a #1e293b bar on a #252526 card. Flipped end for end, the way the four families above are. */ --bs-secondary: #94a3b8; --bs-secondary-rgb: 148, 163, 184; --bs-secondary-text-emphasis: #cbd5e1; --bs-secondary-bg-subtle: #2a2d2e; --bs-secondary-border-subtle: #3f3f3f; --bs-body-bg: #1e1e1e; --bs-body-bg-rgb: 30, 30, 30; --bs-body-color: #d4d4d4; --bs-body-color-rgb: 212, 212, 212; --bs-heading-color: #e6e6e6; --bs-secondary-color: rgba(212, 212, 212, 0.7); --bs-secondary-bg: #252526; --bs-secondary-bg-rgb: 37, 37, 38; --bs-tertiary-bg: #2a2d2e; --bs-border-color: #333333; --bs-border-color-translucent: rgba(255, 255, 255, 0.08); --bs-light: #2a2d2e; --bs-light-rgb: 42, 45, 46; --bs-link-color: var(--af-violet-400); --bs-link-color-rgb: var(--af-violet-400-rgb); --bs-link-hover-color: var(--af-violet-300); --custom-body-bg: #1e1e1e; --app-sidebar-bg: #252526; --app-header-bg: #252526; --af-rail-bg: #252526; --af-rail-border: #333333; --af-gray-100: #2a2d2e; --af-gray-200: #333333; --af-gray-400: #8a8a8a; --af-gray-500: #9d9d9d; --af-gray-600: #b0b0b0; --af-slate-700: #cccccc; --af-slate-900: #e6e6e6; } /* Cards sit one surface step above the page in dark mode (the VS Code panel tone) — otherwise they vanish into the #1e1e1e background. */ [data-bs-theme=dark] .card, [data-bs-theme=dark] .offcanvas, [data-bs-theme=dark] .modal-content, [data-bs-theme=dark] .dropdown-menu { --bs-card-bg: #252526; --bs-offcanvas-bg: #252526; --bs-modal-bg: #252526; --bs-dropdown-bg: #252526; } /* ── 4. Components the template compiled a literal hex into ──────────────── */ .btn-primary { --bs-btn-bg: var(--bs-primary); --bs-btn-border-color: var(--bs-primary); --bs-btn-hover-bg: var(--af-violet-700); --bs-btn-hover-border-color: var(--af-violet-700); --bs-btn-active-bg: var(--af-violet-800); --bs-btn-active-border-color: var(--af-violet-800); --bs-btn-disabled-bg: var(--bs-primary); --bs-btn-disabled-border-color: var(--bs-primary); --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb); } .btn-outline-primary { --bs-btn-color: var(--bs-primary); --bs-btn-border-color: var(--bs-primary); --bs-btn-hover-bg: var(--bs-primary); --bs-btn-hover-border-color: var(--bs-primary); --bs-btn-active-bg: var(--af-violet-700); --bs-btn-active-border-color: var(--af-violet-700); --bs-btn-disabled-color: var(--bs-primary); --bs-btn-disabled-border-color: var(--bs-primary); --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb); } /* `.btn-info` and `.btn-outline-info` compiled the template's own violet (#7008E7) rather than reading --bs-info, so they were the one pair of components that could still paint a second, brighter purple next to the brand one. Point them back at the token. */ .btn-info { --bs-btn-bg: var(--bs-info); --bs-btn-border-color: var(--bs-info); --bs-btn-hover-bg: var(--bs-info-text-emphasis); --bs-btn-hover-border-color: var(--bs-info-text-emphasis); --bs-btn-active-bg: var(--bs-info-text-emphasis); --bs-btn-active-border-color: var(--bs-info-text-emphasis); --bs-btn-disabled-bg: var(--bs-info); --bs-btn-disabled-border-color: var(--bs-info); --bs-btn-focus-shadow-rgb: var(--bs-info-rgb); } .btn-outline-info { --bs-btn-color: var(--bs-info); --bs-btn-border-color: var(--bs-info); --bs-btn-hover-bg: var(--bs-info); --bs-btn-hover-border-color: var(--bs-info); --bs-btn-active-bg: var(--bs-info-text-emphasis); --bs-btn-active-border-color: var(--bs-info-text-emphasis); --bs-btn-disabled-color: var(--bs-info); --bs-btn-disabled-border-color: var(--bs-info); --bs-btn-focus-shadow-rgb: var(--bs-info-rgb); } /* Dark mode lightens the accent to violet-400 so it reads on the VS Code surfaces — and that turns every component that fills with the accent and writes white on top into pale-on-pale: the selected ledger tab, the current page in a pagination, the chosen agency in the switcher's menu. Bootstrap keeps each of those pairs in a per-component variable, declared on the component itself, so the ink has to be corrected there rather than on the root: the same correction .btn-primary carries below. */ [data-bs-theme=dark] .nav-pills { --bs-nav-pills-link-active-color: #1e1e1e; } [data-bs-theme=dark] .pagination { --bs-pagination-active-color: #1e1e1e; } [data-bs-theme=dark] .dropdown-menu { --bs-dropdown-link-active-color: #1e1e1e; } /* A pie tooltip is filled with the slice's own colour, so its ink follows the fill rather than the page. Light mode draws those slices from the saturated end of every ramp and takes white; dark mode draws them from the pastel end — violet-400, #34d399, #f87171 — and takes the same near-black the button and the pills above take. The class is set on the chart (dashboard.js). */ [data-bs-theme=dark] .apexcharts-tooltip.af-tooltip-onfill, [data-bs-theme=dark] .apexcharts-tooltip.af-tooltip-onfill .apexcharts-tooltip-series-group { color: #1e1e1e; } /* The tile and the count inside a selected tab invert with it (§11l). */ [data-bs-theme=dark] .nav-pills .nav-link.active .af-tab-ic, [data-bs-theme=dark] .nav-pills .nav-link.active .af-tab .badge { background-color: rgba(0, 0, 0, 0.18) !important; color: #1e1e1e !important; } /* Bootstrap compiles `.text-bg-*` with the text colour that suits the light theme's fill and writes it !important, so the badge kept white text after the accent lightened to violet-400 for dark mode — 2.7:1, the same mismatch the button below is corrected for. */ [data-bs-theme=dark] .text-bg-primary { color: #1e1e1e !important; } [data-bs-theme=dark] .btn-primary { --bs-btn-color: #1e1e1e; --bs-btn-hover-bg: var(--af-violet-300); --bs-btn-hover-border-color: var(--af-violet-300); --bs-btn-active-bg: var(--af-violet-300); --bs-btn-active-border-color: var(--af-violet-300); --bs-btn-hover-color: #1e1e1e; --bs-btn-active-color: #1e1e1e; --bs-btn-disabled-color: #1e1e1e; } /* DataBlox's cards: a 12px radius, a real hairline, and no coloured shadow. */ .card { --bs-card-border-radius: 0.75rem; --bs-card-inner-border-radius: calc(0.75rem - var(--bs-border-width)); --bs-card-box-shadow: none; box-shadow: none; } /* ── 5. App shell ────────────────────────────────────────────────────────── */ .app-header { background-color: var(--app-header-bg); border-bottom: 1px solid var(--bs-border-color); } /* The burger is a fixed-height flex item in a stretch row; without this it pins to the top of the header band instead of sitting in it. */ .app-header-inner { align-items: center; } /* The template pads the content area 10px below the fixed header, which reads as a sliver of empty page under the header border before the breadcrumb. Every page already opens with its own head or card spacing. */ .app-wrapper { padding-top: 0; } .app-menubar { background-color: var(--af-rail-bg); border-right: 1px solid var(--af-rail-border); /* The template's 30px ambient shadow reads as a seam next to a flat rail. */ box-shadow: none; /* Column flex so the nav takes the leftover height between the brand and the theme row (the template sized it with a calc() that assumed both). */ display: flex; flex-direction: column; /* dvh tracks the collapsing mobile URL bar; 100vh above it would push the theme row under the browser chrome. */ height: 100dvh; } .app-navbar-brand { background-color: var(--af-rail-bg); border-right: 1px solid var(--af-rail-border); border-bottom: 1px solid transparent; padding: 15px 20px; flex-shrink: 0; } .app-navbar-brand span { color: var(--af-slate-900); } /* The nav is the rail's only growing region: the brand sits above it and the theme row below, so it takes the leftover height and scrolls on its own. (The template hard-codes a calc() height that assumes a fixed footer.) */ .app-navbar.af-sidebar-scroll { height: auto; flex: 1 1 auto; min-height: 0; width: 100%; padding: 10px 12px; } /* ── 6. Sidebar nav — DataBlox rail rows ─────────────────────────────────── */ .af-nav { list-style: none; padding: 0; margin: 0; } .af-nav li { margin-bottom: 2px; } .af-nav-heading { font-size: 10.5px; font-weight: 700; color: var(--af-gray-400); text-transform: uppercase; letter-spacing: 0.06em; padding: 14px 12px 6px; list-style: none; } .af-nav-divider { border-top: 1px solid var(--af-rail-border); margin: 8px 4px; list-style: none; } .af-nav-link { display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 12px; border-radius: 12px; border: 1px solid transparent; color: var(--af-gray-500); text-decoration: none; font-size: 14px; font-weight: 500; white-space: nowrap; transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; } .af-nav-link i { font-size: 18px; line-height: 1; display: inline-flex; color: var(--af-gray-400); flex-shrink: 0; transition: color 0.15s ease; } .af-nav-link:hover { background-color: var(--af-gray-200); color: var(--af-gray-600); } .af-nav-link:hover i { color: var(--af-gray-600); } /* Active row: a white card lifted off the rail with a violet hairline — the DataBlox treatment, rather than a filled primary block. */ .af-nav-link.active, .af-nav-link.active:hover { background-color: var(--bs-body-bg); border-color: var(--af-violet-300); color: var(--bs-primary); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06); } .af-nav-link.active i, .af-nav-link.active:hover i { color: var(--bs-primary); } [data-bs-theme=dark] .af-nav-link.active, [data-bs-theme=dark] .af-nav-link.active:hover { background-color: #2c2545; border-color: #4c3f75; box-shadow: none; } /* Rail footer (theme switch) */ .af-sidebar-footer { flex-shrink: 0; border-top: 1px solid var(--af-rail-border); padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); display: flex; align-items: center; justify-content: space-between; gap: 8px; } .af-sidebar-footer .theme-btn { background-color: var(--af-gray-200); flex-shrink: 0; } /* ── 7. Collapse toggle ──────────────────────────────────────────────────── */ /* The chip riding the rail's right border, exactly as in DataBlox. Centred in the header band so it lines up with the search button across the seam, and above both the header and the content (which share z-index 9). */ .af-rail-toggle { position: absolute; top: calc(var(--app-header-height) / 2 - 13px); right: -13px; z-index: 11; height: 26px; width: 26px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; border: 1px solid var(--bs-border-color); background-color: var(--bs-body-bg); color: var(--af-gray-400); box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08); transition: color 0.15s ease, border-color 0.15s ease; } .af-rail-toggle:hover { border-color: var(--af-violet-300); color: var(--bs-primary); } .af-rail-toggle i { font-size: 13px; line-height: 1; display: inline-flex; } /* Which chevron shows is purely a function of the rail's state, so the markup carries both and CSS picks one. */ .af-rail-toggle .af-icon-expand { display: none; } [data-app-sidebar=mini] .af-rail-toggle .af-icon-collapse { display: none; } [data-app-sidebar=mini] .af-rail-toggle .af-icon-expand { display: inline-flex; } /* ── 7b. Header search field ─────────────────────────────────────────────── */ /* The global search is drawn as the field it stands for. It is still a button — pressing it raises the modal that owns the real input — so nothing here may suggest a caret. */ .af-header-start { padding-left: 16px; } /* Far enough right to clear the collapse chip, which overhangs the rail's seam by 13px and would otherwise sit almost against the field. */ @media (min-width: 1200px) { .af-header-start { padding-left: 44px; } } .af-search-trigger { display: inline-flex; align-items: center; gap: 8px; width: 280px; max-width: 100%; height: 38px; padding: 0 10px; border: 1px solid var(--bs-border-color); border-radius: 8px; background-color: var(--af-rail-bg); /* A solid slate rather than --bs-secondary-color: that token is 72% alpha, which lands at 3.56:1 on the rail and made the one control on the header that invites typing the faintest thing on it. The panel it opens reads off the same value — see §11s. */ color: var(--af-slate-600); font-size: 0.875rem; text-align: left; transition: border-color 0.15s ease, background-color 0.15s ease; } [data-bs-theme=dark] .af-search-trigger { color: #b4b4b4; } .af-search-trigger:hover, .af-search-trigger:focus-visible { border-color: var(--af-violet-300); background-color: var(--bs-body-bg); } .af-search-trigger-icon { display: inline-flex; flex-shrink: 0; font-size: 1rem; line-height: 1; color: var(--bs-primary); } .af-search-trigger-text { flex-grow: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .af-search-trigger-kbd { flex-shrink: 0; padding: 1px 6px; border: 1px solid var(--bs-border-color); border-radius: 5px; background-color: var(--bs-body-bg); color: var(--bs-secondary-color); font-size: 11px; line-height: 1.5; } /* A narrow header keeps the icon alone: the placeholder needs room it does not have, and the shortcut it advertises needs a keyboard. */ @media (max-width: 767.98px) { .af-search-trigger { width: 38px; padding: 0; justify-content: center; } .af-search-trigger-text, .af-search-trigger-kbd { display: none; } } /* Below the desktop breakpoint the rail is an off-canvas drawer driven by the header's burger, so the edge toggle would be meaningless. */ @media (max-width: 1199.98px) { .af-rail-toggle { display: none; } } /* ── 8. Collapsed (mini) rail ────────────────────────────────────────────── */ [data-app-sidebar=mini] .app-navbar-brand { justify-content: center; padding: 15px 10px; } /* Only the wordmark folds away — the mark itself is what tells you which app this rail belongs to, so it stays. Targeting the class rather than `span` matters: .af-logo-mark is a span too, and hiding both left the collapsed rail with no logo at all. */ [data-app-sidebar=mini] .app-navbar-brand .af-logo-word { display: none; } [data-app-sidebar=mini] .app-navbar.af-sidebar-scroll { padding: 10px 8px; } /* Collapsed rows are 40px squares centred in the rail, not full-width bars — the icon is the whole row, so the active chip should be square too. */ [data-app-sidebar=mini] .af-nav-link { justify-content: center; width: 40px; margin: 0 auto; padding: 0; gap: 0; } [data-app-sidebar=mini] .af-nav-link span { display: none; } [data-app-sidebar=mini] .af-nav-heading { display: none; } [data-app-sidebar=mini] .af-nav-divider { margin: 6px 4px; } [data-app-sidebar=mini] .af-sidebar-footer { justify-content: center; padding-left: 8px; padding-right: 8px; } [data-app-sidebar=mini] .af-sidebar-footer .af-sidebar-footer-label { display: none; } [data-app-sidebar=mini] .af-sidebar-footer .theme-btn { width: 58px; gap: 4px; } /* ── 9. Mobile drawer ────────────────────────────────────────────────────── */ /* The rail slides in over the content; the backdrop both dims the page and gives a tap target to dismiss it (main.js toggles `.show`). */ /* Above the fixed header (z-index 9) so the whole page dims, and below the drawer itself — Bootstrap's own offcanvas layer, so modals still win. */ .app-sidebar-backdrop { position: fixed; inset: 0; z-index: 1040; background-color: rgba(15, 23, 42, 0.4); opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; } .app-sidebar-backdrop.show { opacity: 1; visibility: visible; } @media (min-width: 1200px) { .app-sidebar-backdrop { display: none; } } /* Locks the page behind an open drawer so a scroll gesture on the dimmed content doesn't move it. */ body.af-drawer-open { overflow: hidden; } @media (max-width: 1199.98px) { .app-menubar { /* Rides above the backdrop; the template's z-index 9 would put the drawer under it (and under the header). */ z-index: 1045; } /* Only while open — the closed drawer parks 10px off-screen, so a permanent shadow would bleed a grey sliver down the left edge of every page. */ .app-menubar.open { box-shadow: 8px 0 24px rgba(15, 23, 42, 0.12); } /* Off-canvas, the rail is the whole surface — the brand's right border was only there to line up with the header. */ .app-navbar-brand { width: 100%; min-width: 0; border-right: 0; border-bottom: 1px solid var(--af-rail-border); } } /* ── 10. Mobile / PWA shell ──────────────────────────────────────────────── */ @media (max-width: 991.98px) { :root { --app-header-height: 64px; } .app-wrapper { padding-left: 16px; padding-right: 16px; } /* Comfortable thumb targets in the drawer. */ .af-nav-link { height: 46px; font-size: 15px; } } /* The burger: same pill-button language as the rest of the chrome. */ .app-toggler { height: 40px; width: 40px; margin: 0 6px 0 12px; display: inline-flex; align-items: center; justify-content: center; background-color: var(--bs-body-bg); border: 1px solid var(--bs-border-color); border-radius: 10px; box-shadow: none; color: var(--af-gray-500); } .app-toggler:hover { color: var(--bs-primary); border-color: var(--af-violet-300); } [data-bs-theme=dark] .app-toggler { background-color: var(--bs-secondary-bg); } /* Installed-PWA insets: in standalone display the app draws under the status bar / home indicator (the viewport is `viewport-fit=cover`), so the fixed chrome has to pad itself out of those regions. */ @media (display-mode: standalone) { .app-header { height: calc(var(--app-header-height) + env(safe-area-inset-top)); padding-top: env(safe-area-inset-top); } .app-header-start, .app-header-end { height: var(--app-header-height); } .app-wrapper { margin-top: calc(var(--app-header-height) + env(safe-area-inset-top)); padding-bottom: calc(30px + env(safe-area-inset-bottom)); } .app-menubar { padding-top: env(safe-area-inset-top); } /* The rail is padded down by the inset, so the toggle has to follow to stay level with the header's controls. */ .af-rail-toggle { top: calc(env(safe-area-inset-top) + var(--app-header-height) / 2 - 13px); } } /* Left/right insets matter in landscape on notched phones. */ @media (max-width: 1199.98px) { .app-wrapper { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); } } /* ── 10b. Brand mark ─────────────────────────────────────────────────────── */ /* The wheel on its tile, drawn in CSS rather than served as logo.svg, because the tile has to follow the accent the user picked and a flat cannot: the hex inside the file would stay violet next to a re-coloured app. The wheel itself is the same `wheel.svg`, used as a mask so the fill comes from CSS. Proportions are logo.svg's: a 45-unit tile with a 14-unit radius (31%) around a 35-unit wheel (78%). */ .af-logo-mark, .af-loader-mark { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; border-radius: 31%; background: var(--bs-primary); } .af-logo-mark::before, .af-loader-mark::before { content: ""; display: block; width: 78%; height: 78%; background-color: #fff; -webkit-mask: url("../images/wheel.svg") center / contain no-repeat; mask: url("../images/wheel.svg") center / contain no-repeat; } .af-logo-mark { width: 34px; height: 34px; } /* The page loader is the same mark with the wheel turning inside it. Keyframes come from .af-loader-spin's rule in styles.css. */ .af-loader-mark::before { animation: af-spin 1s linear infinite; } @media (prefers-reduced-motion: reduce) { .af-loader-mark::before { animation: none; } } /* The loader belongs to the page being loaded, so it centres on the content area rather than the window: styles.css pins it `inset: 0`, which put the mark in the middle of the whole screen — pulled left under the rail and up behind the header. Inset by the same two variables .app-wrapper uses and it lands in the middle of the space the page is about to fill. The rail's own width variable drops to 80px when it collapses, so this follows it. */ .af-page-loader { inset: var(--app-header-height) 0 0 var(--app-sidebar-width); } /* Below the desktop breakpoint the rail is a drawer over the page and .app-wrapper drops its margin, so the content starts at the left edge. */ @media (max-width: 1199.98px) { .af-page-loader { left: 0; } } /* ── 11. Avatars ─────────────────────────────────────────────────────────── */ /* Squircles, not circles. DataBlox draws every avatar as a rounded square whose radius steps with the box (see avatarRadius() in its lib/avatar): 12px up to 64px, 16px above. The template sprinkles `rounded-circle` on avatars across ~17 files, so the utility is overridden here on `.avatar` rather than edited out of each one — and `.avatar` covers both person avatars and the icon chips built from the same primitive, which is what keeps the stat tiles on car-detail matching the dashboard's. */ .avatar { border-radius: 12px; } .avatar.rounded-circle { border-radius: 12px !important; } .avatar.avatar-xl, .avatar.avatar-xxl { border-radius: 16px; } .avatar.avatar-xl.rounded-circle, .avatar.avatar-xxl.rounded-circle { border-radius: 16px !important; } /* An avatar carrying a status dot must not clip: the dot sits on the corner, outside the box, and the markup pairs `avatar-status-*` with `overflow-hidden` (which a circular avatar needed to crop its photo). Releasing the clip is safe — `.avatar img` rounds itself off the inherited radius. */ .avatar[class*=avatar-status] { overflow: visible !important; } /* The dot's per-size `right` offsets were compensating for a circle's curve — on a square it just floats inside the box. Pin it to the corner, and square it off too so it echoes the box it is pinned to. */ .avatar[class*=avatar-status]::after, .avatar[class*=avatar-status].avatar-xxs::after, .avatar[class*=avatar-status].avatar-xs::after, .avatar[class*=avatar-status].avatar-sm::after, .avatar[class*=avatar-status].avatar-lg::after, .avatar[class*=avatar-status].avatar-xl::after, .avatar[class*=avatar-status].avatar-xxl::after { bottom: -2px; right: -2px; border-radius: 3px; } /* ── 11a. Squares, not circles ───────────────────────────────────────────── */ /* House rule for the whole app: nothing is a circle. Every icon chip, initials bubble and icon button is a squircle like the avatars above, so a stat tile, a table cell and a rail row all read as one family. `.rounded-circle` is sprinkled across ~20 fragments, partials and rendered strings, so the utility is neutralised here once rather than edited out of every call site — new markup that copies the template's habit lands square by default too. The radius is a percentage, not a px value, so the 20px delete badge on a photo thumbnail and the 44px lightbox arrow keep the same curve-to-box ratio instead of one of them coming out a lozenge. Every element carrying the class is a square box; the utility is never put on a wide one, where a percentage would draw elliptical corners. */ .rounded-circle { border-radius: 30% !important; } /* The template's own circles, drawn with a literal 50% instead of the utility, so the rule above cannot reach them: the theme switch and its sliding knob, round pagination, the Tagify avatar wraps, and the picker rows shared by the booking form and the calendar filters. */ .theme-btn { border-radius: 12px; } .theme-btn::after { border-radius: 8px; } .pagination-rounded .page-link { border-radius: 8px; } .tagify__tag__avatar-wrap { border-radius: 4px; } .tagify__dropdown__item__avatar-wrap { border-radius: 10px; } .cal-dd-avatar-wrap { border-radius: 10px; } .cal-cust-initial { border-radius: 5px; } /* Round survives in exactly two places, where a square would be wrong rather than merely different: a spinner is a rotating ring, and a square radio reads as a checkbox. Both are left as the template draws them. */ /* ── 11b. Header agency switcher ─────────────────────────────────────────── */ /* The template draws `.badge-standard` as a full pill. It is used in exactly one place — the agency/company chip in the header — and it sits in a row of squircles (the avatar beside it, the icon buttons around it), so square it off to match. The inner count badge follows one step tighter, the way a nested corner has to so the two curves stay concentric. */ .badge-standard { border-radius: 12px; } .badge-standard .badge { border-radius: 8px; } /* The chip names the agency you are looking at, so it sits in the middle of the header — but between the two clusters, not centred on the page over the top of them. It used to be absolutely centred, which reads the same while the header is wide and draws the chip over the search field, the calendar and the avatar the moment it is not. As a flex item it takes whatever the clusters leave and ellipsises the name instead of growing past them. */ .af-header-agency { display: flex; justify-content: center; flex: 1 1 auto; min-width: 0; margin: 0 12px; } .af-header-agency > div { min-width: 0; max-width: 100%; } /* `text-truncate` on its own does nothing to a flex item: its min-width is `auto`, so it refuses to shrink below the name it is holding. */ .af-header-agency .text-truncate { min-width: 0; } .af-header-agency .dropdown-menu { min-width: 260px; } /* While the rail is a drawer, the chip is the agency's name and nothing else. Measured on a 390px screen, "Agence :" and the car count take every pixel there is and leave the name exactly none — and the name is the whole point of the chip. Which of agency and company you are in is spelled out in the menu the chip opens, one tap away; the count is on the Véhicules page. */ @media (max-width: 991.98px) { .af-header-agency { margin: 0 8px; } .af-header-agency .badge-standard .text-muted, .af-header-agency .badge-standard > .badge { display: none; } /* The count badge was standing in for the chip's right padding and for most of its height, so both have to be stated once it is gone. */ .af-header-agency .badge-standard { padding: 2px 10px; min-height: 32px; font-size: 13px; } /* Popper keeps a dropdown inside the viewport vertically, not horizontally, and 260px of menu does not fit beside a 360px phone's edge. */ .af-header-agency .dropdown-menu { min-width: 0; width: max-content; max-width: calc(100vw - 24px); } } /* The header's "Nouvelle réservation" — the same card the Réservations page heads with (§11k), so the one action is drawn one way wherever it appears. It is hidden rather than shrunk on the small shell: the strip there is already holding a burger, a search field, the agency chip and an avatar, and the dashboard's own tile carries the action instead (`d-lg-none` on that one, this rule on this one — the two are complementary, so exactly one of them is on screen at any width). Plain CSS, no display utility: x-show has to be able to hide it for a read-only account, and an !important utility would outrank the inline style it hides with. */ .af-action.af-new-booking { display: none; /* A flex item in the header row: without this it is squeezed and the label folds onto a second line, which lifts the whole band. The agency chip beside it is the one thing in that row built to give ground. */ flex-shrink: 0; white-space: nowrap; /* The page's card is sized by its two lines; a control in the header is sized by the row it stands in — 40px, level with the calendar button beside it, with the tile brought in to fit inside that. */ block-size: 40px; padding-block: 0; padding-inline: 4px 12px; gap: 8px; } .af-new-booking .af-action-ic { width: 32px; height: 32px; border-radius: 9px; font-size: 0.875rem; } @media (min-width: 992px) { .af-action.af-new-booking { display: inline-flex; } } /* The card is drawn on --bs-body-bg, which is the page's own tone: on a light header the two match and the card is its border, in dark the header is the elevated #252526 and the page is #1e1e1e, so the same card came out as a hole punched in the header. Here it takes the surface it is actually on. */ [data-bs-theme=dark] .af-action.af-new-booking { background-color: var(--app-header-bg); } /* Below xxl the card is its icon tile and nothing else — 38px of tile inside a border the hover paints violet, which is 40px all told and level with the calendar button beside it. The rail arrives at 1200 and takes 260px off this row; at 1280 the two lines would leave the agency chip under 100px. */ @media (max-width: 1399.98px) { .af-action.af-new-booking { inline-size: 40px; padding: 0; justify-content: center; border-color: transparent; /* One step out from the tile's own radius, so the hover ring follows its curve instead of cutting across it. */ border-radius: 12px; } /* Two classes deep, because the label carries `.af-action-t` as well and that rule — a class selector like this one, further down the file — sets it back to `display: block`. Left at one class the words stayed, spilling out of the 40px box over the calendar button beside it. */ .af-new-booking .af-new-booking-text { display: none; } } /* Below the tablet breakpoint every pixel the rest of the header gives up is one the name keeps. The period selector is one page's chrome while the chip is which books you are reading, so it drops its icon and swaps "Toutes les années" for "Toutes" (the store's shortLabel, picked in the markup by breakpoint). The cap is sized so neither a year nor "Toutes" is ever what gets cut — the ellipsis is a backstop for a label neither anticipated. */ @media (max-width: 767.98px) { .af-header-start { padding-left: 4px; } .app-toggler { margin: 0 4px 0 8px; } .af-period-toggle { max-width: 88px; } .af-period-toggle > i { display: none; } .af-period-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } } /* ── 11c. Accent swatches ────────────────────────────────────────────────── */ /* The colour picker in the profile panel (user-offcanvas.hbs). Squircles like every other small tile in the app, with the selection ring drawn outside the box so it never eats into the colour it is marking. */ .af-swatch { width: 26px; height: 26px; padding: 0; border: 0; border-radius: 8px; cursor: pointer; position: relative; transition: transform 0.15s ease, box-shadow 0.15s ease; } .af-swatch:hover { transform: scale(1.1); } .af-swatch.is-active { /* Two rings: a body-coloured gap, then the ink one. Reads on a white panel and on a dark one, and needs no extra element. */ box-shadow: 0 0 0 2px var(--bs-body-bg), 0 0 0 4px var(--bs-heading-color); transform: none; } /* The pipette tile: an empty dashed square holding a native colour input that covers it entirely and is invisible, so the whole tile is the hit area. */ .af-swatch-pick { display: flex; align-items: center; justify-content: center; overflow: hidden; border: 1px dashed var(--bs-border-color); color: var(--bs-secondary-color); font-size: 12px; } .af-swatch-pick:hover { border-color: var(--af-violet-400); color: var(--bs-primary); } .af-swatch-pick input[type=color] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: 0; padding: 0; } /* ── 11d. Side panels — the contract head ────────────────────────────────── */ /* Every offcanvas wears the head of the paper contract: the French title on the left over a small context line, the Arabic one on the right, and the accent rule running the whole width below. The close button sits after the Arabic title so the two languages keep the edges of the panel. */ .af-panel-head { display: flex; align-items: flex-start; gap: 1rem; padding: 1.05rem 1.25rem 0.85rem; border-bottom: 2px solid var(--bs-primary); } .af-panel-head-titles { min-width: 0; flex: 1; } .af-panel-head .af-panel-title { margin: 0; font-size: 0.9375rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.3; color: var(--bs-heading-color); } .af-panel-head .af-panel-sub { margin-top: 0.15rem; font-size: 0.8125rem; line-height: 1.3; color: var(--bs-secondary-color); } .af-panel-head .af-panel-title-ar { font-size: 1.0625rem; font-weight: 700; line-height: 1.4; white-space: nowrap; color: var(--bs-heading-color); } /* Bootstrap's .offcanvas-header gives the close button a negative margin that pulls it into the padding; here it is a flex item like any other. */ .af-panel-head .btn-close { margin: 0.15rem 0 0 0; flex-shrink: 0; } @media (max-width: 575.98px) { .af-panel-head { padding-inline: 1rem; gap: 0.65rem; } .af-panel-head .af-panel-title { font-size: 0.8125rem; } .af-panel-head .af-panel-title-ar { font-size: 0.9375rem; } } /* ── 11e. Side panels — footer actions ───────────────────────────────────── */ /* One footer everywhere: Annuler then the primary save on the left, anything destructive pushed to the far edge by .ms-auto. On phones the offcanvas is full-width and four buttons no longer fit on one line — they squeeze into each other, clip their labels and end up with different heights. Below sm they wrap into a grid of equal-width, equal-height buttons instead. */ .af-panel-actions { display: flex; align-items: center; gap: 0.5rem; } @media (max-width: 575.98px) { .af-panel-actions { flex-wrap: wrap; align-items: stretch; } .af-panel-actions > .btn { flex: 1 1 calc(50% - 0.25rem); /* two per row, gap = .5rem */ min-width: 0; margin-left: 0 !important; /* neutralise .ms-auto so the grid stays even */ justify-content: center; text-align: center; padding-inline: 0.5rem; font-size: 0.8125rem; line-height: 1.25; } } /* ── 11f. Contract recap ─────────────────────────────────────────────────── */ /* The invoice block in the booking panel, printed the way the contract prints it: dotted rules between the lines, the total in an accent band, and the amount spelled out underneath. */ .af-recap { border: 1px solid var(--bs-border-color); border-radius: 14px; background: var(--bs-body-bg); padding: 1rem 1.15rem 1.15rem; } .af-recap-row { display: flex; align-items: baseline; gap: 0.75rem; padding: 0.5rem 0; border-bottom: 1px dashed var(--bs-border-color); } .af-recap-label { color: var(--bs-secondary-color); min-width: 0; } /* Three columns, as on the contract: the label runs from the left, the figures share a fixed column of their own, and the Arabic keeps the right edge. */ .af-recap-value { flex: 0 0 auto; width: 7rem; margin-left: auto; text-align: right; font-weight: 600; color: var(--bs-heading-color); font-variant-numeric: tabular-nums; white-space: nowrap; } /* `text-align: right`, not `end`: these spans are dir="rtl", where `end` is the LEFT edge — which left the Arabic floating mid-row with the gutter empty beside it. */ .af-recap-ar { flex: 0 0 auto; width: 10.5rem; text-align: right; font-size: 0.8125rem; color: var(--bs-secondary-color); } .af-recap-total { display: flex; align-items: center; gap: 0.75rem; margin-top: 0.75rem; padding: 0.7rem 1rem; border-radius: 10px; background: var(--bs-primary-bg-subtle); } .af-recap-total-label { font-weight: 600; color: var(--bs-primary-text-emphasis); } .af-recap-total-value { margin-left: auto; text-align: right; font-size: 1.125rem; font-weight: 700; color: var(--bs-primary); font-variant-numeric: tabular-nums; white-space: nowrap; } /* 10.5rem less the band's own inset, so the total lands in the same two columns as the lines above it. */ .af-recap-total-ar { flex: 0 0 auto; width: 9.5rem; text-align: right; font-size: 0.8125rem; color: var(--bs-primary-text-emphasis); } .af-recap-words { margin: 0.6rem 0 0; font-size: 0.8125rem; font-style: italic; color: var(--bs-secondary-color); } .af-recap-foot { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; justify-content: space-between; margin-top: 0.9rem; padding-top: 0.9rem; border-top: 1px solid var(--bs-border-color); } @media (max-width: 575.98px) { .af-recap { padding-inline: 0.85rem; } /* Below sm the three columns no longer fit; the Arabic gutter is the one that gives way, since the figure is what the row is there to show. */ .af-recap-ar, .af-recap-total-ar { display: none; } } /* ── 11g. Side panels — a field that only reads ──────────────────────────── */ /* A value the panel shows but never edits (the vehicle of an existing maintenance). A disabled