/* Zone Web — Material Design 3 (Material You) stylesheet. Hand-rolled MD3: tonal color roles, elevation, shape & state layers, navigation drawer + app bar, filled buttons / FAB, filled text fields, cards, chips and data tables. No build step, no component framework. Roboto + Material Symbols are loaded from the page ; everything degrades to the system font stack if they fail to load. */ /* ── Self-hosted fonts ── Served from /static/fonts so there are no render-blocking requests to Google Fonts on every page (the cause of the earlier sluggish feel). Material Symbols is subset to only the ~27 icons this app uses (~4 KB). */ @font-face { font-family: "Roboto"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/roboto-400.woff2") format("woff2"); } @font-face { font-family: "Roboto"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/roboto-500.woff2") format("woff2"); } @font-face { font-family: "Roboto"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/roboto-700.woff2") format("woff2"); } @font-face { font-family: "Material Symbols Outlined"; font-style: normal; font-weight: 400; font-display: block; src: url("../fonts/material-symbols.woff2") format("woff2"); } /* ── Design tokens (light) ── */ :root { --sidebar-w: 248px; /* Color roles — indigo seed (#4f46e5) expanded into an MD3 tonal set */ --md-primary: #0F74BC; --md-on-primary: #ffffff; --md-primary-container: #d4e9fb; --md-on-primary-container: #082a45; --md-secondary: #4f6070; --md-secondary-container: #dceaf6; --md-on-secondary-container: #0e1d2a; --md-tertiary: #7d5260; --md-error: #ba1a1a; --md-on-error: #ffffff; --md-error-container: #ffdad6; --md-on-error-container: #410002; --md-success: #2e6b3e; --md-success-container: #b6f2bf; --md-on-success-container: #00210d; --md-background: #fdfbff; --md-surface: #fdfbff; --md-surface-dim: #dad9e0; --md-surface-container-low: #f5f3fb; --md-surface-container: #efedf5; --md-surface-container-high: #e9e7ef; --md-on-surface: #1b1b1f; --md-on-surface-variant: #46464f; --md-outline: #777680; --md-outline-variant: #c7c5d0; --md-surface-variant: #e4e1ec; --md-inverse-surface: #303034; --md-inverse-on-surface: #f2eff7; /* Shape scale */ --shape-xs: 4px; --shape-sm: 8px; --shape-md: 12px; --shape-lg: 16px; --shape-xl: 28px; --shape-full: 999px; /* Elevation */ --elev-1: 0 1px 2px rgba(0,0,0,.28), 0 1px 3px 1px rgba(0,0,0,.10); --elev-2: 0 1px 2px rgba(0,0,0,.28), 0 2px 6px 2px rgba(0,0,0,.10); --elev-3: 0 4px 8px 3px rgba(0,0,0,.10), 0 1px 3px rgba(0,0,0,.28); /* Legacy aliases (kept so older inline references still resolve) */ --bg: var(--md-background); --surface: var(--md-surface); --border: var(--md-outline-variant); --text: var(--md-on-surface); --muted: var(--md-on-surface-variant); --primary: var(--md-primary); --primary-light: var(--md-primary-container); --danger: var(--md-error); --warning: #b8860b; /* Accent palette — used for category chips, KPI cards and status colour. Each accent has a saturated foreground and a soft container background. */ --c-indigo: #4f46e5; --c-indigo-bg: #e0e7ff; --c-blue: #2563eb; --c-blue-bg: #dbeafe; --c-cyan: #0891b2; --c-cyan-bg: #cffafe; --c-teal: #0d9488; --c-teal-bg: #ccfbf1; --c-green: #16a34a; --c-green-bg: #dcfce7; --c-amber: #d97706; --c-amber-bg: #fef3c7; --c-orange: #ea580c; --c-orange-bg: #ffedd5; --c-red: #dc2626; --c-red-bg: #fee2e2; --c-purple: #7c3aed; --c-purple-bg: #ede9fe; --c-pink: #db2777; --c-pink-bg: #fce7f3; /* Brand-blue gradient (logo blue #0F74BC), theme-independent so white text stays legible in light and dark mode — primary buttons + FAB. */ --accent-gradient: linear-gradient(135deg, #1488d6, #0F74BC); } @media (prefers-color-scheme: dark) { :root { --c-indigo: #aeb2ff; --c-indigo-bg: #262463; --c-blue: #7eb0ff; --c-blue-bg: #1e3a5f; --c-cyan: #5fd4e6; --c-cyan-bg: #164e57; --c-teal: #5fd9c8; --c-teal-bg: #10453f; --c-green: #7fd99a; --c-green-bg: #14502a; --c-amber: #f0b94e; --c-amber-bg: #4d3408; --c-orange: #ff9d6b; --c-orange-bg: #4a2410; --c-red: #ff9a8f; --c-red-bg: #4a1515; --c-purple: #c4a6ff; --c-purple-bg: #2e1d52; --c-pink: #ff9ecb; --c-pink-bg: #4a1733; } } @media (prefers-color-scheme: dark) { :root { --md-primary: #8ecaff; --md-on-primary: #00344f; --md-primary-container: #0a5285; --md-on-primary-container: #d4e9fb; --md-secondary: #b6c6d6; --md-secondary-container: #354654; --md-on-secondary-container: #d4e9fb; --md-error: #ffb4ab; --md-on-error: #690005; --md-error-container: #93000a; --md-on-error-container: #ffdad6; --md-success: #9bd5a4; --md-success-container: #14512a; --md-on-success-container: #b6f2bf; --md-background: #131316; --md-surface: #131316; --md-surface-dim: #131316; --md-surface-container-low: #1b1b1f; --md-surface-container: #1f1f23; --md-surface-container-high: #2a2a2e; --md-on-surface: #e4e1e6; --md-on-surface-variant: #c7c5d0; --md-outline: #918f9a; --md-outline-variant: #46464f; --md-surface-variant: #46464f; --md-inverse-surface: #e4e1e6; --md-inverse-on-surface: #303034; } } /* ── Reset & base ── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif; background: var(--md-background); color: var(--md-on-surface); display: flex; min-height: 100vh; line-height: 1.5; -webkit-font-smoothing: antialiased; } a { color: var(--md-primary); text-decoration: none; } a:hover { text-decoration: underline; } .muted { color: var(--md-on-surface-variant); } .small { font-size: 0.8rem; } .material-symbols-outlined { font-family: "Material Symbols Outlined"; font-weight: normal; font-style: normal; line-height: 1; letter-spacing: normal; text-transform: none; direction: ltr; font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24; -webkit-font-feature-settings: "liga"; user-select: none; /* Clip each glyph to a fixed 1em box so the unrendered ligature text (e.g. "space_dashboard") can never push or wrap neighbouring labels while the icon font is still loading — or if it fails to load at all. */ display: inline-flex; align-items: center; justify-content: center; width: 1em; height: 1em; overflow: hidden; white-space: nowrap; flex-shrink: 0; } /* ── Navigation drawer (sidebar) ── */ .sidebar { width: var(--sidebar-w); background: var(--md-background); border-right: 1px solid var(--md-outline-variant); display: flex; flex-direction: column; padding: 12px; flex-shrink: 0; position: sticky; top: 0; height: 100vh; } .sidebar-logo { padding: 12px 12px 16px; display: flex; } .sidebar-logo-link { display: block; } .sidebar-logo-img { display: block; width: 150px; max-width: 100%; /* Reserve the box before the SVG loads so the nav never jumps. */ aspect-ratio: 637 / 150; height: auto; } .sidebar-nav { list-style: none; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; flex: 1; } .sidebar-nav::-webkit-scrollbar { width: 6px; } .sidebar-nav::-webkit-scrollbar-thumb { background: var(--md-outline-variant); border-radius: 3px; } .sidebar-nav a { position: relative; overflow: hidden; display: flex; align-items: center; gap: 12px; height: 52px; padding: 0 16px; border-radius: var(--shape-full); color: var(--md-on-surface-variant); font-size: 0.875rem; font-weight: 500; text-decoration: none; transition: background 0.15s, color 0.15s; } .sidebar-nav a .nav-icon, .sidebar-nav a .material-symbols-outlined { font-size: 22px; flex-shrink: 0; } .sidebar-nav a::after { content: ""; position: absolute; inset: 0; background: var(--md-on-surface); opacity: 0; transition: opacity 0.15s; pointer-events: none; } .sidebar-nav a:hover { text-decoration: none; } .sidebar-nav a:hover::after { opacity: 0.06; } .sidebar-nav a.active { background: var(--md-primary-container); color: var(--md-on-primary-container); font-weight: 600; } .sidebar-nav a.active .nav-icon, .sidebar-nav a.active .material-symbols-outlined { color: var(--md-primary); } .sidebar-nav a.sidebar-sub { height: 48px; } .sidebar-section { padding: 18px 16px 6px; font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--md-on-surface-variant); } /* User block at the foot of the drawer */ .sidebar-user { margin-top: 8px; padding: 12px; border-radius: var(--shape-lg); background: var(--md-surface-container); display: flex; align-items: center; gap: 8px; } .sidebar-user-info { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; } .sidebar-user-name { font-weight: 600; font-size: 0.85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sidebar-user-role { font-size: 0.72rem; color: var(--md-on-surface-variant); } .sidebar-change-pw, .sidebar-lang { font-size: 0.72rem; color: var(--md-primary); margin-top: 4px; display: inline-flex; align-items: center; gap: 4px; } .logout-btn { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--shape-full); color: var(--md-on-surface-variant); font-size: 1.1rem; flex-shrink: 0; transition: background 0.15s, color 0.15s; } .logout-btn:hover { background: var(--md-error-container); color: var(--md-on-error-container); text-decoration: none; } /* ── App bar (topbar) ── */ .main-content { flex: 1; display: flex; flex-direction: column; min-width: 0; } .topbar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 12px; height: 64px; padding: 0 24px; background: var(--md-background); color: var(--md-on-surface); border-bottom: 1px solid var(--md-outline-variant); } .page-title { font-size: 1.375rem; font-weight: 500; flex: 1; color: var(--md-on-surface); } .menu-toggle, .lang-toggle { background: none; border: none; cursor: pointer; color: var(--md-on-surface-variant); height: 44px; min-width: 44px; padding: 0 10px; border-radius: var(--shape-full); font-size: 0.85rem; font-weight: 500; display: inline-flex; align-items: center; justify-content: center; gap: 6px; transition: background 0.15s; } .menu-toggle { display: none; font-size: 1.5rem; } .lang-toggle:hover, .menu-toggle:hover { background: var(--md-surface-container-high); text-decoration: none; } .content { flex: 1; padding: 24px; display: flex; flex-direction: column; gap: 24px; } /* ── Snackbar-style flash banners ── */ .flash-area { display: flex; flex-direction: column; gap: 10px; } .alert { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-radius: var(--shape-md); font-size: 0.9rem; background: var(--md-surface-container-high); color: var(--md-on-surface); } .alert::before { font-family: "Material Symbols Outlined"; font-size: 20px; content: "info"; } .alert--error { background: var(--md-error-container); color: var(--md-on-error-container); } .alert--error::before { content: "error"; } .alert--success { background: var(--md-success-container); color: var(--md-on-success-container); } .alert--success::before { content: "check_circle"; } /* ── Cards ── */ .card { background: var(--md-surface-container-low); padding: 24px; border-radius: var(--shape-lg); border: 1px solid var(--md-outline-variant); } .card--elevated { border: none; box-shadow: var(--elev-1); background: var(--md-surface); } .card-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; } .card-header h2 { font-size: 1.15rem; font-weight: 600; } /* ── Buttons ── */ .btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 24px; background: transparent; color: var(--md-primary); border: none; border-radius: var(--shape-full); font-family: inherit; font-size: 0.875rem; font-weight: 500; letter-spacing: 0.02em; cursor: pointer; text-decoration: none; transition: box-shadow 0.15s, background 0.15s; } .btn .material-symbols-outlined { font-size: 18px; } .btn::after { content: ""; position: absolute; inset: 0; background: currentColor; opacity: 0; transition: opacity 0.15s; pointer-events: none; } .btn:hover { text-decoration: none; } .btn:hover::after { opacity: 0.08; } .btn:focus-visible { outline: none; } .btn:focus-visible::after { opacity: 0.12; } /* Filled (primary) */ .btn--primary { background: var(--accent-gradient); color: #fff; } .btn--primary:hover { box-shadow: var(--elev-1); } /* Tonal */ .btn--tonal { background: var(--md-secondary-container); color: var(--md-on-secondary-container); } /* Outlined */ .btn--outlined { border: 1px solid var(--md-outline); color: var(--md-primary); } /* Danger (filled error) */ .btn--danger { background: var(--md-error); color: var(--md-on-error); } .btn--danger:hover { box-shadow: var(--elev-1); } /* Block */ .btn--block { width: 100%; } /* Small (table row actions) */ .btn--sm { height: 34px; padding: 0 16px; font-size: 0.8rem; } /* Floating action button */ .fab { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 8px; height: 56px; padding: 0 20px; border: none; border-radius: var(--shape-lg); background: var(--accent-gradient); color: #fff; font-family: inherit; font-size: 0.9rem; font-weight: 600; cursor: pointer; box-shadow: var(--elev-2); text-decoration: none; transition: box-shadow 0.15s; } .fab:hover { box-shadow: var(--elev-3); text-decoration: none; } .fab .material-symbols-outlined { font-size: 22px; } /* ── Filled text fields ── */ /* Outlined fields with the label above the control — cleaner and lighter than a filled box with a floating label. The label sits after the input in the markup (a holdover from the floating-label era) but `order: -1` floats it to the top, so no template changes are needed. */ .entry-form, .auth-form { display: flex; flex-direction: column; gap: 16px; } .field { display: flex; flex-direction: column; gap: 6px; } .field label { order: -1; font-size: 0.75rem; font-weight: 600; color: var(--md-on-surface-variant); text-transform: uppercase; letter-spacing: 0.04em; } .field input, .field textarea, .field select { width: 100%; padding: 10px 14px; border: 1px solid var(--md-outline-variant); border-radius: var(--shape-sm); background: var(--md-surface); color: var(--md-on-surface); font-family: inherit; font-size: 0.92rem; outline: none; transition: border-color 0.15s; } .field textarea { resize: vertical; min-height: 76px; } .field select { cursor: pointer; } .field input:focus, .field textarea:focus, .field select:focus { border-color: var(--md-primary); } .field input:disabled { opacity: 0.6; cursor: not-allowed; } .field input::placeholder, .field textarea::placeholder { color: var(--md-outline); } .field .field-hint { font-size: 0.72rem; color: var(--md-on-surface-variant); } .form-actions { display: flex; gap: 10px; margin-top: 4px; } /* Two-column form rows (collapse to one column on narrow screens) */ .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } /* ── Selectable checkbox chips (multi-select) ── */ .checkbox-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-top: 8px; } .field-label { display: block; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--md-on-surface-variant); } .checkbox-item { position: relative; overflow: hidden; display: flex; align-items: center; gap: 8px; padding: 10px 14px; border: 1px solid var(--md-outline); border-radius: var(--shape-sm); cursor: pointer; font-size: 0.9rem; color: var(--md-on-surface); transition: background 0.15s, border-color 0.15s; } .checkbox-item:hover { background: var(--md-surface-container); } .checkbox-item input { accent-color: var(--md-primary); width: 18px; height: 18px; } .checkbox-item:has(input:checked) { background: var(--md-secondary-container); border-color: var(--md-secondary-container); color: var(--md-on-secondary-container); } /* ── Chips ── */ .chip { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; margin: 2px 4px 2px 0; background: var(--md-surface-container-high); color: var(--md-on-surface-variant); border: 1px solid var(--md-outline-variant); border-radius: var(--shape-sm); font-size: 0.78rem; font-weight: 500; } /* Category-coded chips */ .chip--bus { background: var(--c-blue-bg); color: var(--c-blue); border-color: transparent; } .chip--minibus { background: var(--c-cyan-bg); color: var(--c-cyan); border-color: transparent; } .chip--navette { background: var(--c-teal-bg); color: var(--c-teal); border-color: transparent; } .chip--camion_tsf { background: var(--c-orange-bg); color: var(--c-orange); border-color: transparent; } .chip--machine_tsf { background: var(--c-red-bg); color: var(--c-red); border-color: transparent; } .chip--citerne { background: var(--c-indigo-bg); color: var(--c-indigo); border-color: transparent; } .chip--service { background: var(--c-green-bg); color: var(--c-green); border-color: transparent; } .chip--autre { background: var(--md-surface-container-high); color: var(--md-on-surface-variant); } /* ── Approvals ── */ .nav-badge { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; display: inline-flex; align-items: center; justify-content: center; background: var(--c-amber); color: #fff; border-radius: var(--shape-full); font-size: 0.72rem; font-weight: 700; } .approval-card { border: 1px solid var(--md-outline-variant); border-left: 4px solid var(--md-primary); border-radius: var(--shape-md); padding: 14px 16px; } .approval-card--approved { border-left-color: var(--c-green); } .approval-card--rejected { border-left-color: var(--c-red); } .approval-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .approval-card__head strong { margin-left: 6px; } .approval-card__reason { margin-top: 6px; } .approval-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px 18px; margin: 12px 0 4px; } .approval-fields dt { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--md-on-surface-variant); } .approval-fields dd { font-size: 0.9rem; } .approval-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; } .approval-note { flex: 1; min-width: 180px; padding: 8px 12px; border: 1px solid var(--md-outline-variant); border-radius: var(--shape-sm); font-family: inherit; font-size: 0.85rem; background: var(--md-surface); color: var(--md-on-surface); } .approval-note:focus { outline: none; border-color: var(--md-primary); } /* ── Permission grid (roles) ── */ .perm-legend { display: flex; flex-wrap: wrap; gap: 18px; margin-bottom: 18px; font-size: 0.8rem; color: var(--md-on-surface-variant); } .perm-legend__item { display: inline-flex; align-items: center; gap: 7px; } .perm-legend .dot { width: 11px; height: 11px; border-radius: 50%; } .dot--cannot { background: var(--md-outline); } .dot--direct { background: var(--c-green); } .dot--approval { background: var(--c-amber); } .perm-card { border: 1px solid var(--md-outline-variant); border-radius: var(--shape-md); margin-bottom: 14px; overflow: hidden; } .perm-card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px 14px; background: var(--md-surface-container); } .perm-card__title { font-weight: 700; font-size: 0.9rem; } .perm-card__quick { display: inline-flex; align-items: center; gap: 6px; } .perm-card__quick .muted { margin-right: 2px; } .perm-card__quick .btn { height: 28px; padding: 0 12px; font-size: 0.74rem; } .perm-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 14px; } .perm-row + .perm-row { border-top: 1px solid var(--md-outline-variant); } .perm-row__label { font-size: 0.88rem; } .tri { display: inline-flex; border: 1px solid var(--md-outline-variant); border-radius: var(--shape-full); overflow: hidden; flex-shrink: 0; } .tri__opt { position: relative; } .tri__opt input { position: absolute; opacity: 0; pointer-events: none; } .tri__opt span { display: inline-block; padding: 6px 14px; font-size: 0.78rem; font-weight: 500; color: var(--md-on-surface-variant); cursor: pointer; transition: background 0.12s, color 0.12s; border-right: 1px solid var(--md-outline-variant); } .tri__opt:last-child span { border-right: none; } .tri__opt input:checked + span { background: var(--md-outline); color: #fff; } .tri__opt--direct input:checked + span { background: var(--c-green); color: #fff; } .tri__opt--approval input:checked + span { background: var(--c-amber); color: #fff; } /* ── Maintenance: severity badges + alert cards ── */ .badge--info { background: var(--c-blue-bg); color: var(--c-blue); } .badge--warning { background: var(--c-amber-bg); color: var(--c-amber); } .badge--critical { background: var(--c-red-bg); color: var(--c-red); } .alert-list { display: flex; flex-direction: column; gap: 10px; } .alert-card { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 16px; border-radius: var(--shape-md); background: var(--md-surface-container-low); border: 1px solid var(--md-outline-variant); border-left: 4px solid var(--md-outline); } .alert-card--info { border-left-color: var(--c-blue); } .alert-card--warning { border-left-color: var(--c-amber); } .alert-card--critical { border-left-color: var(--c-red); } .alert-card__msg { font-weight: 600; font-size: 0.92rem; } .alert-card__meta { font-size: 0.8rem; color: var(--md-on-surface-variant); margin-top: 3px; } .alert-card__actions { display: flex; gap: 6px; flex-wrap: wrap; flex-shrink: 0; } .alert-card__status { font-size: 0.8rem; flex-shrink: 0; } /* ── Expense total summary ── */ .expense-total { display: flex; align-items: baseline; gap: 8px; padding: 12px 16px; margin-bottom: 14px; background: var(--md-surface-container); border-radius: var(--shape-md); font-size: 0.92rem; color: var(--md-on-surface-variant); } .expense-total strong { font-size: 1.15rem; color: var(--md-on-surface); } /* ── Roster (daily pointage sheet) ── */ .roster-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; flex-wrap: wrap; } .roster-nav-btn { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--md-outline-variant); border-radius: var(--shape-full); color: var(--md-on-surface-variant); background: var(--md-surface); } .roster-nav-btn:hover { background: var(--md-surface-container); text-decoration: none; } .roster-date-form input { padding: 9px 12px; border: 1px solid var(--md-outline-variant); border-radius: var(--shape-sm); font-family: inherit; font-size: 0.9rem; background: var(--md-surface); color: var(--md-on-surface); cursor: pointer; } .roster-stats { display: flex; gap: 8px; margin-left: auto; } .roster-stat { font-size: 0.8rem; font-weight: 600; padding: 5px 12px; border-radius: var(--shape-full); } .roster-stat--done { background: var(--c-green-bg); color: var(--c-green); } .roster-stat--pending { background: var(--md-surface-container-high); color: var(--md-on-surface-variant); } .roster-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; } .roster-vehicle { background: var(--md-surface-container-low); border: 1px solid var(--md-outline-variant); border-left: 3px solid var(--md-outline-variant); border-radius: var(--shape-lg); padding: 14px; } .roster-vehicle.is-done { border-left-color: var(--c-green); } .roster-vehicle__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; } .roster-vehicle__code { font-weight: 700; font-size: 1rem; margin-right: 6px; } .roster-add { width: 32px; height: 32px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--shape-full); background: var(--md-primary-container); color: var(--md-on-primary-container); } .roster-add:hover { filter: brightness(0.96); text-decoration: none; } .roster-add .material-symbols-outlined { font-size: 20px; } .roster-entries { display: flex; flex-direction: column; gap: 6px; } .roster-entry { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--shape-sm); background: var(--md-surface-container); color: var(--md-on-surface); font-size: 0.85rem; } .roster-entry:hover { background: var(--md-surface-container-high); text-decoration: none; } .roster-entry__activity { font-weight: 600; } .roster-entry__op { color: var(--md-on-surface-variant); } .roster-entry__fuel { margin-left: auto; color: var(--md-on-surface-variant); } .roster-empty { display: block; text-align: center; padding: 14px; border: 1px dashed var(--md-outline-variant); border-radius: var(--shape-sm); color: var(--md-on-surface-variant); font-size: 0.85rem; } .roster-empty:hover { background: var(--md-surface-container); border-color: var(--md-primary); color: var(--md-primary); text-decoration: none; } .roster-empty.is-static { pointer-events: none; } /* ── Filter bar (select + date inputs) ── */ .filter-bar { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin-bottom: 16px; } .filter-bar .btn { margin-bottom: 1px; } .filter-or { color: var(--md-on-surface-variant); font-size: 0.82rem; padding-bottom: 9px; } /* ── Filter chips (clickable) ── */ .filter-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; } .filter-chip { height: 34px; padding: 0 16px; display: inline-flex; align-items: center; border-radius: var(--shape-full); border: 1px solid var(--md-outline-variant); color: var(--md-on-surface-variant); font-size: 0.82rem; font-weight: 500; text-decoration: none; transition: background 0.15s, color 0.15s, border-color 0.15s; } .filter-chip:hover { background: var(--md-surface-container); text-decoration: none; } .filter-chip.active { background: var(--accent-gradient); color: #fff; border-color: transparent; } /* ── Status badges ── */ .badge { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: var(--shape-full); font-size: 0.74rem; font-weight: 600; } .badge--active { background: var(--c-green-bg); color: var(--c-green); } .badge--inactive { background: var(--md-surface-container-high); color: var(--md-on-surface-variant); } /* ── Definition grid (detail pages) ── */ .detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; } .detail-grid dt { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--md-on-surface-variant); font-weight: 600; margin-bottom: 4px; } .detail-grid dd { font-size: 0.98rem; } /* ── "Coming soon" placeholder cards ── */ .coming-soon { display: flex; align-items: center; gap: 16px; } .coming-soon .material-symbols-outlined { font-size: 32px; color: var(--md-outline); } .coming-soon h3 { font-size: 1rem; font-weight: 600; } /* ── Data tables ── */ .data-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; } .data-table th { text-align: left; padding: 12px 16px; font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--md-on-surface-variant); border-bottom: 1px solid var(--md-outline-variant); } .data-table td { padding: 14px 16px; border-bottom: 1px solid var(--md-outline-variant); vertical-align: middle; } .data-table tbody tr { transition: background 0.12s; } .data-table tbody tr:hover { background: var(--md-surface-container); } .data-table tr:last-child td { border-bottom: none; } .data-table code { background: var(--md-primary-container); color: var(--md-on-primary-container); padding: 2px 8px; border-radius: var(--shape-xs); font-size: 0.82rem; } .row-actions { display: flex; gap: 6px; white-space: nowrap; justify-content: flex-end; } /* ── Empty state ── */ .empty-state { text-align: center; padding: 56px 20px; color: var(--md-on-surface-variant); } .empty-state .material-symbols-outlined { font-size: 48px; color: var(--md-outline); } .empty-state .btn, .empty-state .fab { margin-top: 16px; } /* ── Auth (login) ── */ .auth-body { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: var(--md-background); padding: 16px; } .auth-card { background: var(--md-surface-container-low); padding: 40px; border-radius: var(--shape-xl); width: min(420px, 100%); box-shadow: var(--elev-2); } .auth-card__title { font-size: 1.6rem; font-weight: 700; color: var(--md-primary); } .auth-card__tagline { color: var(--md-on-surface-variant); margin: 4px 0 28px; font-size: 0.9rem; } .auth-logo { display: block; width: 210px; max-width: 100%; aspect-ratio: 637 / 150; height: auto; margin: 0 auto 28px; } .auth-form { gap: 20px; } .auth-form .btn { margin-top: 8px; height: 48px; } /* ── Error page ── */ .error-page { text-align: center; padding: 48px 24px; } .error-page h1 { font-size: 4rem; margin: 0; color: var(--md-primary); font-weight: 700; } .error-page p { margin: 12px 0 28px; color: var(--md-on-surface-variant); } /* ── Dashboard: welcome banner + KPI cards ── */ .welcome-banner { padding: 28px 32px; border-radius: var(--shape-lg); background: linear-gradient(120deg, var(--md-primary), #7c3aed 60%, #9333ea); color: #fff; box-shadow: var(--elev-2); } .welcome-banner h2 { font-size: 1.4rem; font-weight: 700; margin-bottom: 4px; } .welcome-banner p { opacity: 0.92; font-size: 0.92rem; } .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; } .stat-card { display: flex; align-items: center; gap: 16px; padding: 20px; border-radius: var(--shape-lg); background: var(--md-surface-container-low); border: 1px solid var(--md-outline-variant); transition: box-shadow 0.15s, transform 0.15s; } .stat-card:hover { box-shadow: var(--elev-2); transform: translateY(-2px); } .stat-icon { width: 56px; height: 56px; border-radius: var(--shape-md); font-size: 28px; flex-shrink: 0; } .stat-value { font-size: 1.7rem; font-weight: 700; line-height: 1.1; } .stat-label { font-size: 0.82rem; color: var(--md-on-surface-variant); margin-top: 2px; } .stat-icon--indigo { background: var(--c-indigo-bg); color: var(--c-indigo); } .stat-icon--blue { background: var(--c-blue-bg); color: var(--c-blue); } .stat-icon--teal { background: var(--c-teal-bg); color: var(--c-teal); } .stat-icon--green { background: var(--c-green-bg); color: var(--c-green); } .stat-icon--amber { background: var(--c-amber-bg); color: var(--c-amber); } .stat-icon--red { background: var(--c-red-bg); color: var(--c-red); } a.stat-card { text-decoration: none; color: inherit; } .stat-unit { font-size: 0.9rem; font-weight: 600; color: var(--md-on-surface-variant); } /* ── Dashboard panels (alerts + activity) ── */ .dash-panels { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; margin-top: 20px; } .dash-panel { margin: 0; } .link-more { font-size: 0.82rem; font-weight: 600; color: var(--c-blue); text-decoration: none; } .link-more:hover { text-decoration: underline; } .empty-state--soft { padding: 28px 16px; } .empty-state--soft .material-symbols-outlined { color: var(--c-green); } .activity-list { list-style: none; margin: 0; padding: 0; } .activity-item { display: flex; align-items: center; gap: 12px; padding: 10px 2px; border-bottom: 1px solid var(--md-outline-variant); } .activity-item:last-child { border-bottom: none; } .activity-main { flex: 1; font-size: 0.9rem; } /* ── Dashboard charts ── */ .dash-charts { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; margin-top: 20px; } @media (max-width: 860px) { .dash-charts { grid-template-columns: 1fr; } } .dash-chart { margin: 0; } .chart-box { position: relative; height: 260px; } /* ── Insights ── */ .variance { font-weight: 700; } .variance--good { color: var(--c-green); } .variance--warn { color: var(--c-amber); } .variance--danger { color: var(--c-red); } .chip--idle { background: var(--c-amber-bg); color: var(--c-amber); border-color: transparent; margin-left: 6px; } .row-idle { background: var(--c-amber-bg); } /* ── Audit log ── */ .audit-table td { vertical-align: top; } .audit-detail { max-width: 360px; } .nowrap { white-space: nowrap; } .audit-action { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.03em; background: var(--md-surface-container-high); color: var(--md-on-surface-variant); } .audit-action--create { background: var(--c-green-bg); color: var(--c-green); } .audit-action--update { background: var(--c-blue-bg); color: var(--c-blue); } .audit-action--delete { background: var(--c-red-bg); color: var(--c-red); } .audit-action--approve { background: var(--c-green-bg); color: var(--c-green); } .audit-action--reject { background: var(--c-red-bg); color: var(--c-red); } .audit-action--login_failed { background: var(--c-amber-bg); color: var(--c-amber); } .pager { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 16px; } .pager-info { font-size: 0.85rem; color: var(--md-on-surface-variant); } /* ── Settings ── */ .settings-group { border: 1px solid var(--md-outline-variant); border-radius: var(--shape-md); padding: 16px 18px 6px; margin: 0 0 20px; } .settings-group legend { padding: 0 8px; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--md-on-surface-variant); } .field--error input, .field--error select { border-color: var(--c-red); } .field-error { font-size: 0.74rem; color: var(--c-red); margin-top: 4px; } /* ── Dashboard skeleton note ── */ .skeleton-note h3 { font-size: 0.85rem; margin: 16px 0 6px; color: var(--md-on-surface); } .skeleton-note ul { margin: 0 0 12px 20px; color: var(--md-on-surface-variant); font-size: 0.88rem; } /* ── Ripple ── */ .ripple { position: absolute; border-radius: 50%; background: currentColor; opacity: 0.22; transform: scale(0); animation: ripple 0.5s ease-out; pointer-events: none; } @keyframes ripple { to { transform: scale(2.4); opacity: 0; } } /* ── Modal dialog ── */ .modal-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); display: flex; align-items: flex-start; justify-content: center; padding: 6vh 16px; z-index: 200; opacity: 0; transition: opacity 0.2s; overflow-y: auto; } .modal-overlay.open { opacity: 1; } .modal { background: var(--md-surface-container-low); border-radius: var(--shape-lg); box-shadow: var(--elev-3); width: min(720px, 100%); max-height: 88vh; display: flex; flex-direction: column; transform: translateY(-10px) scale(0.98); transition: transform 0.2s; } .modal-overlay.open .modal { transform: none; } .modal__header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 22px; border-bottom: 1px solid var(--md-outline-variant); } .modal__header h2 { font-size: 1.1rem; font-weight: 600; } .modal__close { background: none; border: none; cursor: pointer; color: var(--md-on-surface-variant); width: 36px; height: 36px; border-radius: var(--shape-full); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .modal__close:hover { background: var(--md-surface-container-high); } .modal__body { padding: 22px; overflow-y: auto; } .modal__loading { padding: 48px; text-align: center; color: var(--md-on-surface-variant); } /* ── Drawer scrim (mobile) ── */ .sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 99; } .sidebar-overlay.open { display: block; } /* ── Compact density pass ── Tightens the default Material metrics for a denser, less bulky fleet-management UI. Kept as one block so sizing is easy to tune. */ .btn { height: 36px; padding: 0 18px; font-size: 0.84rem; } .btn--sm { height: 30px; padding: 0 13px; font-size: 0.78rem; } .fab { height: 42px; padding: 0 18px; border-radius: var(--shape-md); font-size: 0.85rem; box-shadow: var(--elev-1); } .fab:hover { box-shadow: var(--elev-2); } .fab .material-symbols-outlined { font-size: 20px; } .topbar { height: 56px; padding: 0 20px; } .page-title { font-size: 1.2rem; } .sidebar-nav a { height: 46px; font-size: 0.86rem; } .sidebar-nav a.sidebar-sub { height: 42px; } .content { padding: 20px; gap: 18px; } .card { padding: 20px; } .card-header { margin-bottom: 14px; } .card-header h2 { font-size: 1.05rem; } .auth-form .btn { height: 44px; } .data-table th { padding: 9px 14px; } .data-table td { padding: 11px 14px; } .welcome-banner { padding: 22px 26px; } .welcome-banner h2 { font-size: 1.2rem; } .stat-card { padding: 16px; gap: 14px; } .stat-icon { width: 46px; height: 46px; font-size: 24px; } .stat-value { font-size: 1.45rem; } .chip { height: 24px; padding: 0 10px; } .filter-chip { height: 30px; padding: 0 14px; } /* ── Responsive ── */ @media screen and (max-width: 768px) { .menu-toggle { display: inline-flex; } .sidebar { position: fixed; top: 0; left: 0; transform: translateX(-100%); transition: transform 0.25s ease; z-index: 100; box-shadow: var(--elev-3); } .sidebar.open { transform: translateX(0); } .main-content { margin-left: 0; } .topbar { padding: 0 12px; } .page-title { font-size: 1.15rem; } .topbar .lang-toggle { display: none; } .content { padding: 16px; gap: 16px; } .card { padding: 18px; } .form-row { grid-template-columns: 1fr; } }