:root { color-scheme: light; --brand: #df1730; --brand-dark: #b80f24; --brand-soft: #fff0f2; --ink: #181b21; --ink-2: #2f343d; --muted: #6f7580; --muted-2: #949aa4; --line: #e3e5e9; --line-strong: #d3d6dc; --surface: #ffffff; --surface-soft: #f7f7f8; --canvas: #f1f2f4; --success: #168a5b; --success-soft: #eaf7f1; --warning: #c17b09; --warning-soft: #fff6df; --danger: #d62c42; --danger-soft: #fff0f2; --info: #3468c0; --info-soft: #edf3ff; --sidebar: #171a20; --sidebar-2: #20242c; --sidebar-text: #f8f8f9; --sidebar-muted: #9ea4ae; --shadow-sm: 0 1px 2px rgb(23 27 35 / 6%), 0 4px 14px rgb(23 27 35 / 4%); --shadow-md: 0 12px 36px rgb(23 27 35 / 12%); --shadow-lg: 0 24px 80px rgb(23 27 35 / 20%); --radius-sm: 8px; --radius: 14px; --radius-lg: 20px; /* Surfaces volontairement sombres dans les deux thèmes (cuve, toasts, pastilles, totaux mis en avant). Ne jamais utiliser --ink comme fond : --ink est une couleur de TEXTE et s'inverse avec le thème. */ --inverse: #181b21; --inverse-2: #262b33; --inverse-text: #ffffff; --inverse-muted: #9ca2ad; /* Bandeau supérieur : translucide, il a besoin de ses propres couleurs. */ --topbar-bg: rgb(247 248 249 / 88%); --topbar-border: rgb(211 214 220 / 80%); --sidebar-width: 264px; --topbar-height: 82px; } /* Thème sombre. Appliqué via data-theme="dark" sur , posé par core.js avant le rendu pour éviter tout clignotement au chargement. */ html[data-theme="dark"] { color-scheme: dark; --brand: #ff4257; --brand-dark: #df1730; --brand-soft: #3a1a20; --ink: #f2f3f5; --ink-2: #e6e8ec; --muted: #99a0ac; --muted-2: #7c838f; --line: #2b3038; --line-strong: #3a4048; --surface: #1b1f26; --surface-soft: #22272f; --canvas: #14171c; --success: #3ec98a; --success-soft: #163227; --warning: #f0a63b; --warning-soft: #33270f; --danger: #ff6070; --danger-soft: #3a1a20; --info: #6ea2ff; --info-soft: #1a2740; --sidebar: #101317; --sidebar-2: #171b21; /* En thème sombre ces surfaces restent sombres, mais légèrement plus claires que le fond pour rester détachées. */ --inverse: #262c35; --inverse-2: #333a45; --inverse-text: #f6f7f9; --inverse-muted: #a8aeb9; --topbar-bg: rgb(27 31 38 / 88%); --topbar-border: rgb(43 48 56 / 90%); --shadow-sm: 0 1px 2px rgb(0 0 0 / 30%), 0 4px 14px rgb(0 0 0 / 22%); --shadow-md: 0 12px 36px rgb(0 0 0 / 42%); --shadow-lg: 0 24px 80px rgb(0 0 0 / 55%); } * { box-sizing: border-box; } html { min-width: 320px; background: var(--canvas); scroll-behavior: smooth; } body { min-width: 320px; min-height: 100vh; margin: 0; overflow-x: hidden; background: radial-gradient(circle at 82% 0%, rgb(223 23 48 / 4%), transparent 25rem), var(--canvas); color: var(--ink); font-family: "Segoe UI Variable", "Segoe UI", Inter, system-ui, -apple-system, BlinkMacSystemFont, sans-serif; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } button, input, select, textarea { font: inherit; } button, select { cursor: pointer; } button { color: inherit; } svg { display: block; } .is-hidden { display: none !important; } .noscript { padding: 16px; background: var(--danger); color: var(--inverse-text); text-align: center; font-weight: 700; } .app-shell { min-height: 100vh; } .sidebar { position: fixed; z-index: 50; inset: 0 auto 0 0; display: flex; width: var(--sidebar-width); flex-direction: column; overflow: hidden; background: linear-gradient(155deg, rgb(255 255 255 / 4%), transparent 28%), linear-gradient(180deg, var(--sidebar), #111319 100%); color: var(--sidebar-text); box-shadow: 8px 0 30px rgb(15 18 23 / 8%); } .sidebar::before { position: absolute; inset: 0 0 auto; height: 3px; background: linear-gradient(90deg, var(--brand), #ff5266 65%, transparent); content: ""; } .brand { display: flex; width: 100%; align-items: center; gap: 12px; border: 0; padding: 23px 22px 26px; background: transparent; color: #fff; text-align: left; } .brand-logo { width: auto; height: 44px; flex: 0 0 auto; object-fit: contain; } .brand-logo-large { height: 72px; margin-bottom: 6px; } .brand-copy { display: grid; gap: 2px; } .brand-copy strong { font-size: 18px; font-weight: 850; letter-spacing: 0.08em; } .brand-copy small { color: var(--sidebar-muted); font-size: 11px; letter-spacing: 0.035em; } .company-context { padding: 0 15px 16px; } .company-empty-button { display: flex; width: 100%; align-items: center; gap: 10px; border: 1px dashed rgb(255 255 255 / 15%); border-radius: 12px; padding: 12px; background: rgb(255 255 255 / 3%); color: var(--sidebar-muted); font-size: 12px; text-align: left; } .company-empty-button svg { width: 19px; color: #fff; } .main-nav { flex: 1; overflow-y: auto; padding: 0 12px 20px; scrollbar-width: thin; scrollbar-color: rgb(255 255 255 / 12%) transparent; } .nav-label { margin: 19px 11px 7px; color: #777e89; font-size: 10px; font-weight: 800; letter-spacing: 0.13em; text-transform: uppercase; } .nav-item { position: relative; display: flex; width: 100%; min-height: 42px; align-items: center; gap: 11px; border: 0; border-radius: 10px; padding: 8px 11px; background: transparent; color: #b8bdc6; font-size: 13px; font-weight: 620; text-align: left; transition: 160ms ease; } .nav-item:hover { background: rgb(255 255 255 / 6%); color: #fff; } .nav-item.is-active { background: linear-gradient(90deg, rgb(223 23 48 / 22%), rgb(223 23 48 / 8%)); color: #fff; } .nav-item.is-active::before { position: absolute; inset: 8px auto 8px -12px; width: 3px; border-radius: 0 3px 3px 0; background: var(--brand); content: ""; } .nav-icon { width: 18px; height: 18px; flex: 0 0 auto; color: #8f959f; } .nav-item.is-active .nav-icon, .nav-item:hover .nav-icon { color: #fff; } .nav-badge { display: grid; width: 18px; height: 18px; margin-left: auto; place-items: center; border-radius: 999px; background: var(--brand); color: #fff; font-size: 10px; font-weight: 900; } .sidebar-footer { border-top: 1px solid rgb(255 255 255 / 7%); padding: 14px 15px 16px; } .role-switcher { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 2px 8px; border-radius: 11px; padding: 10px 11px; background: rgb(255 255 255 / 4%); } .role-switcher .status-dot { width: 7px; height: 7px; border-radius: 50%; background: #39c889; box-shadow: 0 0 0 4px rgb(57 200 137 / 12%); } .role-switcher label { color: var(--sidebar-muted); font-size: 10px; } .role-switcher select { grid-column: 1 / -1; width: 100%; margin-top: 5px; border: 0; outline: 0; background: transparent; color: #fff; font-size: 12px; font-weight: 700; } .role-switcher select option { color: var(--ink); } .sidebar-footer > p { margin: 10px 3px 0; color: #666d77; font-size: 9px; line-height: 1.4; } .workspace { min-height: 100vh; margin-left: var(--sidebar-width); } .topbar { position: sticky; z-index: 30; top: 0; display: flex; height: var(--topbar-height); align-items: center; gap: 16px; border-bottom: 1px solid var(--topbar-border); padding: 0 clamp(20px, 3vw, 42px); background: var(--topbar-bg); box-shadow: 0 4px 18px rgb(0 0 0 / 6%); backdrop-filter: blur(18px); } .page-heading { min-width: 0; } .page-heading p { overflow: hidden; margin: 0 0 2px; color: var(--muted); font-size: 10px; font-weight: 750; letter-spacing: 0.1em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; } .page-heading h1 { overflow: hidden; margin: 0; font-size: clamp(19px, 2vw, 24px); font-weight: 760; letter-spacing: -0.035em; text-overflow: ellipsis; white-space: nowrap; } .topbar-actions { display: flex; align-items: center; gap: 9px; margin-left: auto; } .button { display: inline-flex; min-height: 40px; align-items: center; justify-content: center; gap: 8px; border: 1px solid transparent; border-radius: 9px; padding: 9px 14px; font-size: 12px; font-weight: 750; line-height: 1; text-decoration: none; transition: 160ms ease; } .button svg { width: 16px; height: 16px; } .button-primary { border-color: var(--brand); background: var(--brand); color: #fff; box-shadow: 0 7px 16px rgb(223 23 48 / 18%); } .button-primary:hover { border-color: var(--brand-dark); background: var(--brand-dark); transform: translateY(-1px); } .button-secondary { border-color: var(--line-strong); background: var(--surface); color: var(--ink-2); } .button-secondary:hover { border-color: var(--line-strong); background: var(--surface-soft); } .button-ghost { border-color: transparent; background: transparent; color: var(--muted); } .button-ghost:hover { background: var(--surface-soft); color: var(--ink); } .button-danger { border-color: var(--danger); background: var(--danger-soft); color: var(--danger); } .button-danger:hover { border-color: var(--danger); } .button-small { min-height: 34px; padding: 7px 10px; font-size: 11px; } .icon-button { position: relative; display: grid; width: 40px; height: 40px; flex: 0 0 auto; place-items: center; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink-2); transition: 160ms ease; } .icon-button:hover { border-color: var(--line-strong); background: var(--surface-soft); } .icon-button svg { width: 18px; height: 18px; } .menu-button { display: none; } .notification-wrap { position: relative; } .notification-count { position: absolute; top: -5px; right: -5px; display: grid; min-width: 18px; height: 18px; place-items: center; border: 2px solid var(--canvas); border-radius: 999px; padding: 0 4px; background: var(--brand); color: #fff; font-size: 9px; font-weight: 850; } .notification-panel { position: absolute; top: 49px; right: 0; width: min(360px, calc(100vw - 30px)); overflow: hidden; border: 1px solid var(--line); border-radius: 15px; background: var(--surface); box-shadow: var(--shadow-lg); } .notification-header { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); padding: 15px 17px; } .notification-header strong { font-size: 13px; } .notification-header span { color: var(--muted); font-size: 10px; } .notification-list { max-height: 370px; overflow-y: auto; } .notification-item { display: grid; grid-template-columns: 35px 1fr; gap: 11px; border-bottom: 1px solid var(--line); padding: 14px 16px; } .notification-item:last-child { border-bottom: 0; } .notification-item-icon { display: grid; width: 35px; height: 35px; place-items: center; border-radius: 10px; } .notification-item-icon svg { width: 17px; } .notification-item-icon.danger { background: var(--danger-soft); color: var(--danger); } .notification-item-icon.warning { background: var(--warning-soft); color: var(--warning); } .notification-item-icon.info { background: var(--info-soft); color: var(--info); } .notification-item strong, .notification-item p { margin: 0; } .notification-item strong { display: block; margin-bottom: 3px; font-size: 12px; } .notification-item p { color: var(--muted); font-size: 11px; line-height: 1.45; } .profile-button { display: flex; align-items: center; gap: 9px; border: 0; padding: 3px 0 3px 8px; background: transparent; text-align: left; } .profile-avatar { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 10px; background: var(--inverse); color: var(--inverse-text); font-size: 11px; font-weight: 850; } .profile-copy { display: grid; gap: 1px; } .profile-copy strong { font-size: 11px; } .profile-copy small { color: var(--muted); font-size: 9px; } .page-content { width: 100%; max-width: 1720px; margin: 0 auto; padding: clamp(22px, 3vw, 38px) clamp(20px, 3vw, 42px) 50px; outline: 0; } .page-intro { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 24px; } .page-intro-copy h2, .page-intro-copy p { margin: 0; } .page-intro-copy h2 { margin-bottom: 5px; font-size: clamp(21px, 2.5vw, 30px); font-weight: 760; letter-spacing: -0.045em; } .page-intro-copy p { max-width: 700px; color: var(--muted); font-size: 13px; line-height: 1.6; } .intro-actions, .toolbar-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .section-eyebrow { margin: 0 0 6px; color: var(--brand); font-size: 10px; font-weight: 850; letter-spacing: 0.12em; text-transform: uppercase; } .kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; } .kpi-grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .kpi-card { position: relative; min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); padding: 19px 18px 17px; background: var(--surface); box-shadow: var(--shadow-sm); } .kpi-card::after { position: absolute; inset: auto -20px -34px auto; width: 90px; height: 90px; border-radius: 50%; background: rgb(24 27 33 / 2%); content: ""; } .kpi-card.accent::before { position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--brand); content: ""; } .kpi-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 17px; } .kpi-label { color: var(--muted); font-size: 10px; font-weight: 750; letter-spacing: 0.08em; text-transform: uppercase; } .kpi-icon { display: grid; width: 31px; height: 31px; place-items: center; border-radius: 9px; background: var(--surface-soft); color: var(--ink-2); } .kpi-icon svg { width: 15px; } .kpi-card.accent .kpi-icon { background: var(--brand-soft); color: var(--brand); } .kpi-value { overflow: hidden; margin-bottom: 7px; font-size: clamp(22px, 2.6vw, 30px); font-weight: 770; letter-spacing: -0.05em; line-height: 1; text-overflow: ellipsis; white-space: nowrap; } .kpi-meta { display: flex; align-items: center; gap: 6px; color: var(--muted-2); font-size: 10px; } .kpi-meta .positive { color: var(--success); } .kpi-meta .negative { color: var(--danger); } .dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(310px, 0.75fr); gap: 18px; margin-bottom: 18px; } .lower-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.65fr); gap: 18px; } .card { min-width: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm); } .card-header { display: flex; min-height: 67px; align-items: center; justify-content: space-between; gap: 15px; border-bottom: 1px solid var(--line); padding: 15px 18px; } .card-title { min-width: 0; } .card-title h3, .card-title p { margin: 0; } .card-title h3 { overflow: hidden; font-size: 14px; font-weight: 750; letter-spacing: -0.01em; text-overflow: ellipsis; white-space: nowrap; } .card-title p { margin-top: 3px; color: var(--muted); font-size: 10px; } .card-body { padding: 18px; } .chart-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; } .legend-item { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 9px; } .legend-dot { width: 7px; height: 7px; border-radius: 50%; } .chart-wrap { position: relative; } /* Le graphique garde ses proportions : sans cela il était étiré en largeur et les courbes se déformaient avec lui. */ .chart-wrap svg { display: block; width: 100%; height: auto; max-height: 300px; margin: 0 auto; } .chart-grid-line { stroke: var(--line); stroke-width: 1; } .chart-axis-label { fill: var(--muted); font-size: 10px; } .chart-line { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.2; } .chart-point { stroke: var(--surface); stroke-width: 2; } .chart-point.profit { fill: var(--success); } .chart-baseline { stroke: var(--line-strong); stroke-width: 1; } .chart-bar { transition: opacity 140ms ease; } .chart-bar.revenue { fill: var(--brand); } .chart-bar.expenses { fill: var(--muted-2); } .chart-wrap:hover .chart-bar { opacity: 0.55; } .chart-wrap .chart-bar:hover { opacity: 1; } .chart-area { opacity: 0.08; } .chart-point { stroke: #fff; stroke-width: 2; } .empty-chart-copy { position: absolute; inset: 0; display: grid; place-content: center; padding: 20px; color: var(--muted); text-align: center; pointer-events: none; } .empty-chart-copy strong { display: block; margin-bottom: 4px; color: var(--ink-2); font-size: 12px; } .empty-chart-copy span { font-size: 10px; } .tank-card { position: relative; overflow: hidden; background: linear-gradient(145deg, rgb(255 255 255 / 6%), transparent 45%), var(--inverse); color: var(--inverse-text); --tank-tone: #8b929d; } /* La jauge et la zone active suivent le niveau réel de la cuve. */ .tank-card.is-success { --tank-tone: #3ec98a; } .tank-card.is-warning { --tank-tone: #f0a63b; } .tank-card.is-danger { --tank-tone: #ff6070; } .tank-card .card-header { border-color: rgb(255 255 255 / 9%); } .tank-card .card-title p { color: var(--inverse-muted); } .tank-status { display: grid; grid-template-columns: 128px 1fr; align-items: center; gap: 22px; } .tank-gauge { position: relative; display: grid; width: 128px; height: 128px; place-items: center; } .tank-gauge svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); } .tank-gauge-track, .tank-gauge-value { fill: none; stroke-width: 9; } .tank-gauge-track { stroke: rgb(255 255 255 / 10%); } .tank-gauge-value { stroke: var(--tank-tone, var(--brand)); stroke-linecap: round; transition: stroke-dasharray 600ms ease, stroke 300ms ease; } .tank-gauge-copy { position: relative; display: grid; text-align: center; } .tank-gauge-copy strong { font-size: 24px; letter-spacing: -0.05em; } .tank-gauge-copy span { color: var(--inverse-muted); font-size: 9px; } .tank-details { display: grid; gap: 14px; } .tank-level-number strong { display: block; margin-bottom: 3px; font-size: 25px; letter-spacing: -0.04em; } .tank-level-number span { color: var(--inverse-muted); font-size: 10px; } /* Zones de la cuve : celle où se situe le niveau actuel est mise en avant. */ .tank-zones { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding-right: 4px; } .tank-zone { display: grid; gap: 1px; min-width: 0; border: 1px solid rgb(255 255 255 / 9%); border-radius: 8px; padding: 6px 7px; background: rgb(255 255 255 / 4%); color: var(--inverse-muted); font-size: 9px; font-weight: 700; } .tank-zone i { width: 100%; height: 3px; margin-bottom: 3px; border-radius: 999px; background: rgb(255 255 255 / 14%); } .tank-zone small { color: var(--inverse-muted); font-size: 8px; font-weight: 600; } .tank-update { justify-self: start; height: auto; padding: 11px 20px; font-size: 12px; font-weight: 750; } /* Aperçu des derniers prélèvements dans la cuve. */ .depot-feed { border-top: 1px solid rgb(255 255 255 / 9%); padding-top: 12px; } .depot-feed-title { margin: 0 0 8px; color: var(--inverse-muted); font-size: 9px; font-weight: 750; letter-spacing: 0.06em; text-transform: uppercase; } .depot-feed-empty { margin: 0; color: var(--inverse-muted); font-size: 10px; } .depot-feed-list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; } .depot-feed-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; } .depot-feed-main { min-width: 0; } .depot-feed-main strong, .depot-feed-main small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .depot-feed-main strong { font-size: 10px; font-weight: 700; } .depot-feed-main small { margin-top: 1px; color: var(--inverse-muted); font-size: 9px; } .depot-feed-liters { flex: 0 0 auto; color: var(--tank-tone, var(--inverse-text)); font-size: 11px; font-weight: 750; } .tank-zone.is-on { border-color: var(--tank-tone, var(--brand)); background: rgb(255 255 255 / 9%); color: #fff; } .tank-zone.is-on i { background: var(--tank-tone, var(--brand)); } .tank-card .button-secondary { border-color: rgb(255 255 255 / 15%); background: rgb(255 255 255 / 8%); color: #fff; } .quick-actions-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; } .quick-action { display: grid; min-height: 102px; align-content: space-between; border: 1px solid var(--line); border-radius: 11px; padding: 13px; background: var(--surface); text-align: left; transition: 160ms ease; } .quick-action:hover { border-color: var(--line-strong); background: var(--surface-soft); transform: translateY(-1px); } .quick-action:hover .quick-action-icon { transform: scale(1.06); transition: transform 160ms ease; } .quick-action-icon { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 9px; background: var(--surface-soft); color: var(--muted); } .quick-action-icon.brand { background: var(--brand-soft); color: var(--brand); } .quick-action-icon.warning { background: var(--warning-soft); color: var(--warning); } .quick-action-icon.success { background: var(--success-soft); color: var(--success); } .quick-action-icon.info { background: var(--info-soft); color: var(--info); } .quick-action-icon svg { width: 16px; } /* Sans couleur explicite, un lien visité vire au violet. */ .quick-action strong { display: block; margin-top: 12px; color: var(--ink); font-size: 11px; } .quick-action span:last-child { display: block; margin-top: 2px; color: var(--muted); font-size: 9px; } .activity-list { display: grid; } .activity-item { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 12px; border-bottom: 1px solid var(--line); padding: 13px 18px; } .activity-item:last-child { border-bottom: 0; } .activity-icon { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 10px; background: var(--surface-soft); color: var(--muted); } .activity-icon svg { width: 17px; } .activity-copy { min-width: 0; } .activity-copy strong, .activity-copy span, .activity-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .activity-copy strong { font-size: 12px; } .activity-copy > span { margin-top: 3px; color: var(--ink-2); font-size: 10px; font-weight: 600; } .activity-copy small { margin-top: 2px; color: var(--muted); font-size: 9px; } .activity-amount { display: grid; justify-items: end; gap: 2px; text-align: right; } .activity-value { color: var(--ink); font-size: 12px; font-weight: 780; } .activity-amount small { color: var(--muted); font-size: 8px; letter-spacing: 0.04em; text-transform: uppercase; } .activity-icon.route { background: var(--brand-soft); color: var(--brand); } .activity-icon.depot { background: var(--success-soft); color: var(--success); } .activity-icon.station { background: var(--warning-soft); color: var(--warning); } .empty-state { display: grid; min-height: 240px; place-items: center; padding: 35px 20px; text-align: center; } .empty-state.compact { min-height: 170px; } .empty-state-icon { display: grid; width: 54px; height: 54px; margin: 0 auto 14px; place-items: center; border: 1px solid var(--line); border-radius: 16px; background: var(--surface-soft); color: var(--muted); } .empty-state-icon svg { width: 23px; } .empty-state h3, .empty-state p { margin: 0; } .empty-state h3 { margin-bottom: 6px; font-size: 14px; } .empty-state p { max-width: 430px; color: var(--muted); font-size: 11px; line-height: 1.55; } .empty-state .button { margin-top: 15px; } .toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 14px; } .toolbar-filters { display: flex; flex: 1; flex-wrap: wrap; align-items: center; gap: 8px; } .search-field { position: relative; min-width: min(320px, 100%); flex: 0 1 360px; } .search-field > svg, .search-field > [data-icon] { position: absolute; z-index: 1; top: 50%; left: 12px; width: 16px; height: 16px; color: var(--muted); transform: translateY(-50%); pointer-events: none; } .search-field > [data-icon] > svg { width: 16px; height: 16px; } .search-field input { padding-left: 37px; } .input, .select, .textarea { width: 100%; border: 1px solid var(--line-strong); border-radius: 9px; outline: 0; background: var(--surface); color: var(--ink); font-size: 12px; transition: 140ms ease; } .input, .select { height: 40px; padding: 0 11px; } .textarea { min-height: 88px; resize: vertical; padding: 10px 11px; line-height: 1.5; } .input:focus, .select:focus, .textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgb(223 23 48 / 8%); } .input::placeholder, .textarea::placeholder { color: var(--muted-2); } .filter-select { width: auto; min-width: 145px; border: 1px solid var(--line-strong); border-radius: 9px; padding: 0 32px 0 11px; background: var(--surface); color: var(--muted); font-size: 11px; } .table-card { overflow: hidden; } .table-wrap { overflow-x: auto; } .data-table { width: 100%; min-width: 900px; border-collapse: collapse; } .data-table th { height: 45px; border-bottom: 1px solid var(--line-strong); padding: 0 14px; background: var(--surface-soft); color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: 0.07em; text-align: left; text-transform: uppercase; white-space: nowrap; } .data-table td { height: 57px; border-bottom: 1px solid var(--line); padding: 8px 14px; color: var(--ink-2); font-size: 11px; vertical-align: middle; } .data-table tbody tr:last-child td { border-bottom: 0; } .data-table tbody tr:hover td { background: var(--surface-soft); } .table-primary { display: block; color: var(--ink); font-weight: 730; white-space: nowrap; } .table-secondary { display: block; max-width: 210px; overflow: hidden; margin-top: 3px; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; } .table-actions { display: flex; justify-content: flex-end; gap: 5px; } .table-action { display: grid; width: 31px; height: 31px; place-items: center; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--muted); } .table-action:hover { border-color: var(--line-strong); color: var(--ink); } .table-action.danger:hover { border-color: var(--danger); background: var(--danger-soft); color: var(--danger); } .table-action svg { width: 14px; } .badge { display: inline-flex; min-height: 23px; align-items: center; gap: 5px; border-radius: 999px; padding: 4px 8px; font-size: 9px; font-weight: 760; white-space: nowrap; } .badge::before { width: 5px; height: 5px; border-radius: 50%; background: currentColor; content: ""; } .badge-success { background: var(--success-soft); color: var(--success); } .badge-warning { background: var(--warning-soft); color: var(--warning); } .badge-danger { background: var(--danger-soft); color: var(--danger); } .badge-neutral { background: var(--surface-soft); color: var(--muted); } .entity-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } .entity-card { position: relative; display: grid; gap: 16px; min-height: 190px; border: 1px solid var(--line); border-radius: var(--radius); padding: 17px; background: var(--surface); box-shadow: var(--shadow-sm); } .entity-card-header { display: flex; align-items: flex-start; gap: 12px; } .entity-avatar { display: grid; width: 43px; height: 43px; flex: 0 0 auto; place-items: center; border-radius: 12px; background: var(--inverse); color: var(--inverse-text); font-size: 12px; font-weight: 850; text-transform: uppercase; } .entity-avatar.brand { background: var(--brand-soft); color: var(--brand); } .entity-card-title { min-width: 0; flex: 1; } .entity-card-title strong, .entity-card-title span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .entity-card-title strong { margin-top: 2px; font-size: 13px; } .entity-card-title span { margin-top: 4px; color: var(--muted); font-size: 9px; } .entity-kebab { display: grid; width: 30px; height: 30px; flex: 0 0 auto; place-items: center; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--muted); } .entity-kebab:hover { border-color: var(--line); background: var(--surface-soft); } .entity-kebab svg { width: 15px; } .entity-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .entity-meta-item span, .entity-meta-item strong { display: block; } .entity-meta-item span { margin-bottom: 3px; color: var(--muted); font-size: 9px; } .entity-meta-item strong { overflow: hidden; font-size: 10px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; } .entity-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; border-top: 1px solid var(--line); padding-top: 13px; } .vehicle-pair { display: flex; align-items: center; gap: 7px; } .plate { display: inline-flex; min-height: 24px; align-items: center; border: 1px solid var(--line-strong); border-radius: 6px; padding: 3px 8px; background: var(--surface); color: var(--ink); font-family: ui-monospace, "Cascadia Code", monospace; font-size: 10px; font-weight: 750; letter-spacing: 0.04em; white-space: nowrap; } .split-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr); gap: 18px; } .tank-overview-card { position: relative; overflow: hidden; background: var(--inverse); color: var(--inverse-text); } .tank-overview-card::after { position: absolute; right: -110px; bottom: -130px; width: 320px; height: 320px; border: 45px solid rgb(255 255 255 / 3%); border-radius: 50%; content: ""; } .tank-overview-content { position: relative; z-index: 1; display: grid; gap: 25px; } .tank-overview-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; } .tank-overview-top h3, .tank-overview-top p { margin: 0; } .tank-overview-top h3 { margin-bottom: 5px; font-size: 15px; } .tank-overview-top p { color: var(--inverse-muted); font-size: 10px; } .tank-number { display: flex; align-items: baseline; gap: 8px; } .tank-number strong { font-size: clamp(33px, 5vw, 50px); letter-spacing: -0.06em; line-height: 1; } .tank-number span { color: var(--inverse-muted); font-size: 12px; } .tank-bar { position: relative; height: 10px; overflow: hidden; border-radius: 999px; background: rgb(255 255 255 / 10%); } .tank-bar-fill { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: linear-gradient(90deg, var(--brand), #ff4b61); } .tank-bar-markers { position: absolute; inset: 0; } .tank-bar-markers span { position: absolute; top: -3px; width: 1px; height: 16px; background: rgb(255 255 255 / 45%); } .tank-bar-markers span:nth-child(1) { left: 40%; } .tank-bar-markers span:nth-child(2) { left: 50%; } .tank-bar-markers span:nth-child(3) { left: 60%; } .tank-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; overflow: hidden; border: 1px solid rgb(255 255 255 / 9%); border-radius: 11px; background: rgb(255 255 255 / 9%); } .tank-stat { padding: 12px; background: rgb(255 255 255 / 4%); } .tank-stat span, .tank-stat strong { display: block; } .tank-stat span { margin-bottom: 4px; color: var(--inverse-muted); font-size: 9px; } .tank-stat strong { font-size: 12px; } .tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); padding: 0 18px; } .tab-button { position: relative; min-height: 48px; border: 0; padding: 0 11px; background: transparent; color: var(--muted); font-size: 11px; font-weight: 700; } .tab-button.is-active { color: var(--ink); } .tab-button.is-active::after { position: absolute; inset: auto 8px -1px; height: 2px; border-radius: 2px 2px 0 0; background: var(--brand); content: ""; } .results-cost-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(330px, 0.9fr); gap: 18px; margin-top: 18px; } .cost-list { display: grid; } .cost-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 12px; border-bottom: 1px solid var(--line); padding: 12px 18px; } .cost-row:last-child { border-bottom: 0; } .cost-row strong, .cost-row span { display: block; } .cost-row strong { font-size: 11px; } .cost-row span { margin-top: 3px; color: var(--muted); font-size: 9px; } .cost-row-value { font-size: 11px; font-weight: 760; } .settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .settings-card { min-height: 220px; } .settings-card.full { grid-column: 1 / -1; } .settings-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; border-bottom: 1px solid var(--line); padding: 14px 18px; } .settings-row:last-child { border-bottom: 0; } .settings-row-copy strong, .settings-row-copy span { display: block; } .settings-row-copy strong { margin-bottom: 4px; font-size: 11px; } .settings-row-copy span { max-width: 500px; color: var(--muted); font-size: 9px; line-height: 1.5; } .info-banner { display: flex; align-items: flex-start; gap: 12px; border: 1px solid var(--info); border-radius: var(--radius); margin-bottom: 18px; padding: 13px 15px; background: var(--info-soft); color: var(--info); } .info-banner > svg { width: 18px; flex: 0 0 auto; } .info-banner strong, .info-banner p { margin: 0; } .info-banner strong { display: block; margin-bottom: 3px; font-size: 11px; } .info-banner p { font-size: 10px; line-height: 1.5; } .modal-root:empty { display: none; } .modal-backdrop { position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; overflow-y: auto; padding: 22px; background: rgb(12 14 18 / 58%); backdrop-filter: blur(5px); animation: fade-in 150ms ease; } .modal { width: min(650px, 100%); max-height: calc(100vh - 44px); overflow: hidden; border: 1px solid rgb(255 255 255 / 35%); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-lg); animation: modal-in 180ms ease; } .modal.modal-wide { width: min(980px, 100%); } .modal-header { display: flex; min-height: 74px; align-items: center; gap: 13px; border-bottom: 1px solid var(--line); padding: 14px 19px; } .modal-header-icon { display: grid; width: 38px; height: 38px; flex: 0 0 auto; place-items: center; border-radius: 11px; background: var(--brand-soft); color: var(--brand); } .modal-header-icon svg { width: 18px; } .modal-title { min-width: 0; flex: 1; } .modal-title h2, .modal-title p { margin: 0; } .modal-title h2 { font-size: 15px; letter-spacing: -0.02em; } .modal-title p { margin-top: 3px; color: var(--muted); font-size: 9px; } .modal-close { display: grid; width: 34px; height: 34px; flex: 0 0 auto; place-items: center; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--muted); } .modal-close:hover { background: var(--surface-soft); color: var(--ink); } .modal-close svg { width: 16px; } .modal-body { max-height: calc(100vh - 190px); overflow-y: auto; padding: 19px; } .modal-footer { display: flex; align-items: center; justify-content: flex-end; gap: 8px; border-top: 1px solid var(--line); padding: 13px 19px; background: var(--surface-soft); } .form-section { margin-bottom: 22px; } .form-section:last-child { margin-bottom: 0; } .form-section-title { display: flex; align-items: center; gap: 9px; margin: 0 0 13px; color: var(--ink-2); font-size: 10px; font-weight: 850; letter-spacing: 0.08em; text-transform: uppercase; } .form-section-title::after { height: 1px; flex: 1; background: var(--line); content: ""; } .form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; } .form-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .form-field { min-width: 0; } .form-field.full { grid-column: 1 / -1; } .form-field label { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; color: var(--ink-2); font-size: 10px; font-weight: 700; } .form-field label .optional { color: var(--muted-2); font-size: 8px; font-weight: 500; } .field-hint { margin: 5px 0 0; color: var(--muted); font-size: 8px; line-height: 1.4; } .calculation-panel { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; overflow: hidden; border: 1px solid var(--line); border-radius: 11px; background: var(--line); } .calculation-item { padding: 13px; background: var(--surface-soft); } .calculation-item span, .calculation-item strong { display: block; } .calculation-item span { margin-bottom: 5px; color: var(--muted); font-size: 8px; font-weight: 750; letter-spacing: 0.06em; text-transform: uppercase; } .calculation-item strong { font-size: 16px; letter-spacing: -0.03em; } .calculation-item.highlight { background: var(--inverse); color: var(--inverse-text); } .calculation-item.highlight span { color: var(--inverse-muted); } .form-callout { display: flex; align-items: flex-start; gap: 10px; border: 1px solid var(--warning); border-radius: 10px; padding: 11px; background: var(--warning-soft); color: var(--warning); font-size: 9px; line-height: 1.5; } .form-callout svg { width: 16px; flex: 0 0 auto; } .confirm-copy { color: var(--muted); font-size: 12px; line-height: 1.65; } .confirm-copy strong { color: var(--ink); } .toast-region { position: fixed; z-index: 200; right: 18px; bottom: 18px; display: grid; width: min(360px, calc(100vw - 36px)); gap: 8px; pointer-events: none; } .toast { display: grid; grid-template-columns: 30px 1fr; align-items: center; gap: 10px; border: 1px solid rgb(255 255 255 / 15%); border-radius: 12px; padding: 12px 14px; background: var(--inverse); color: var(--inverse-text); box-shadow: var(--shadow-md); animation: toast-in 200ms ease; } .toast-icon { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 9px; background: rgb(255 255 255 / 9%); color: var(--inverse-text); } .toast-icon svg { width: 15px; } .toast strong, .toast span { display: block; } .toast strong { margin-bottom: 2px; font-size: 11px; } .toast span { color: var(--inverse-muted); font-size: 9px; line-height: 1.4; } .sidebar-overlay { display: none; } @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes modal-in { from { opacity: 0; transform: translateY(10px) scale(0.985); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } @media (max-width: 1400px) { .kpi-grid-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 1180px) { .kpi-grid, .kpi-grid-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dashboard-grid, .lower-grid, .split-grid, .results-cost-grid { grid-template-columns: 1fr; } .entity-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 900px) { :root { --topbar-height: 72px; } .sidebar { transform: translateX(-104%); transition: transform 220ms ease; } .app-shell.sidebar-open .sidebar { transform: translateX(0); } .sidebar-overlay { position: fixed; z-index: 45; inset: 0; display: block; border: 0; background: rgb(10 12 16 / 50%); opacity: 0; pointer-events: none; transition: opacity 200ms ease; } .app-shell.sidebar-open .sidebar-overlay { opacity: 1; pointer-events: auto; } .workspace { margin-left: 0; } .menu-button { display: grid; } .profile-copy { display: none; } .profile-button { padding-left: 0; } .settings-grid { grid-template-columns: 1fr; } .settings-card.full { grid-column: auto; } } @media (max-width: 680px) { .topbar { gap: 10px; padding: 0 14px; } .page-heading p { display: none; } .top-quick-add span:last-child { display: none; } .top-quick-add { width: 40px; padding: 0; } .profile-button { display: none; } .page-content { padding: 20px 14px 40px; } .page-intro { align-items: flex-start; flex-direction: column; } .intro-actions, .toolbar-actions { width: 100%; } .intro-actions .button, .toolbar-actions .button { flex: 1; } .kpi-grid, .kpi-grid-5, .entity-grid { grid-template-columns: 1fr; } .toolbar { align-items: stretch; flex-direction: column; } .toolbar-filters { width: 100%; } .search-field { min-width: 100%; } .filter-select { flex: 1; } .tank-status { grid-template-columns: 1fr; justify-items: center; text-align: center; } .tank-details { width: 100%; } .tank-overview-top { flex-direction: column; } .tank-stats, .calculation-panel { grid-template-columns: 1fr; } .form-grid, .form-grid.cols-3 { grid-template-columns: 1fr; } .form-field.full { grid-column: auto; } .modal-backdrop { align-items: end; padding: 0; } .modal, .modal.modal-wide { width: 100%; max-height: 94vh; border-radius: 18px 18px 0 0; border-bottom: 0; } .modal-body { max-height: calc(94vh - 145px); } .modal-footer { padding-bottom: max(13px, env(safe-area-inset-bottom)); } .modal-footer .button { flex: 1; } .quick-actions-grid { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; } } /* AF Trans V2 · pages séparées, comptes et carte */ .brand, .nav-item, .company-empty-button, .button, .quick-action { text-decoration: none; } .company-empty-button { display: grid; gap: 3px; color: #fff; } .company-empty-button strong, .company-empty-button span { display: block; } .company-empty-button span { color: var(--sidebar-muted); font-size: 10px; } .sidebar-footer { display: grid; gap: 10px; } .signed-in-user { display: flex; align-items: center; gap: 10px; } .signed-in-user > span:last-child { min-width: 0; } .signed-in-user small, .signed-in-user strong { display: block; } .signed-in-user small { margin-bottom: 3px; color: var(--sidebar-muted); font-size: 9px; } .signed-in-user strong { overflow: hidden; color: #fff; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; } .sidebar-logout { display: flex; min-height: 36px; align-items: center; gap: 8px; border: 1px solid rgb(255 255 255 / 8%); border-radius: 9px; padding: 8px 10px; background: rgb(255 255 255 / 4%); color: var(--sidebar-muted); font-size: 10px; } .sidebar-logout:hover { background: rgb(255 255 255 / 8%); color: #fff; } .sidebar-logout svg { width: 15px; } .profile-button { cursor: default; } .native-dialog { width: min(680px, calc(100vw - 36px)); max-height: calc(100vh - 44px); overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 0; background: var(--surface); box-shadow: var(--shadow-lg); color: var(--ink); animation: modal-in 180ms ease; } .native-dialog.modal-wide { width: min(1040px, calc(100vw - 36px)); } .native-dialog.confirm-dialog { width: min(480px, calc(100vw - 36px)); } .native-dialog::backdrop { background: rgb(12 14 18 / 60%); backdrop-filter: blur(5px); animation: fade-in 150ms ease; } .native-dialog form { margin: 0; } .native-dialog .modal-header > div { min-width: 0; flex: 1; } .native-dialog .modal-header h2, .native-dialog .modal-header p { margin: 0; } .native-dialog .modal-header h2 { font-size: 17px; letter-spacing: -0.025em; } .native-dialog .modal-header > button { display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--muted); font-size: 20px; } .native-dialog .modal-body { max-height: calc(100vh - 190px); } .form-field { display: grid; align-content: start; gap: 6px; } .form-field > span { color: var(--ink-2); font-size: 10px; font-weight: 750; } .form-field > span small, .form-field > small { color: var(--muted); font-size: 8px; font-weight: 500; line-height: 1.45; } .form-section-title { align-items: flex-start; } .form-section-title > span { display: grid; width: 28px; height: 28px; flex: 0 0 auto; place-items: center; border-radius: 8px; background: var(--brand-soft); color: var(--brand); font-size: 9px; } .form-section-title > div h3, .form-section-title > div p { margin: 0; } .form-section-title > div h3 { color: var(--ink); font-size: 11px; letter-spacing: 0; text-transform: none; } .form-section-title > div p { margin-top: 2px; color: var(--muted); font-size: 8px; font-weight: 500; letter-spacing: 0; text-transform: none; } .route-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; margin-bottom: 22px; } .route-form-card { border: 1px solid var(--line); border-radius: 13px; padding: 15px; background: var(--surface-soft); } .route-form-heading { display: flex; align-items: center; gap: 9px; margin-bottom: 13px; } .route-form-heading h3, .route-form-heading p { margin: 0; } .route-form-heading h3 { font-size: 12px; } .route-form-heading p { margin-top: 2px; color: var(--muted); font-size: 9px; } .route-dot { width: 10px; height: 10px; border: 3px solid var(--surface); border-radius: 50%; box-shadow: 0 0 0 1px var(--line-strong); } .route-dot.start { background: var(--success); } .route-dot.end { background: var(--brand); } .input-suffix { position: relative; } .input-suffix .input { padding-right: 54px; } .input-suffix > span { position: absolute; top: 50%; right: 12px; color: var(--muted); font-size: 9px; font-weight: 700; transform: translateY(-50%); } .calculation-panel { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 15px; } .form-error { margin: 14px 0 0; border: 1px solid var(--danger); border-radius: 9px; padding: 10px 12px; background: var(--danger-soft); color: var(--danger); font-size: 10px; font-weight: 650; } .form-note { margin: 13px 0 0; border-radius: 9px; padding: 10px 12px; background: var(--info-soft); color: var(--info); font-size: 9px; line-height: 1.5; } .checkbox-field { display: flex; align-items: center; grid-template-columns: auto 1fr; } .checkbox-field input { width: 17px; height: 17px; accent-color: var(--brand); } .visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; } .chart-line.revenue { stroke: var(--brand); } .chart-line.expenses { stroke: var(--muted-2); } .chart-line.profit { stroke: var(--success); } .legend-dot.revenue { background: var(--brand); } .legend-dot.expenses { background: var(--muted-2); } .legend-dot.profit { background: var(--success); } .spaced-card { margin-top: 18px; } .fuel-summary-body { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; padding: 0 18px 18px; } .fuel-summary-body > div { border-radius: 10px; padding: 14px; background: var(--surface-soft); } .fuel-summary-body span, .fuel-summary-body strong { display: block; } .fuel-summary-body span { margin-bottom: 5px; color: var(--muted); font-size: 9px; } .fuel-summary-body strong { font-size: 17px; } .table-wrap > .empty-state { margin: 22px; } .vehicle-grid { grid-template-columns: repeat(3, minmax(250px, 1fr)); } .vehicle-card { overflow: hidden; padding: 0; } .vehicle-card > :not(.vehicle-photo) { margin-right: 17px; margin-left: 17px; } .vehicle-card > .entity-card-footer { margin-bottom: 16px; } .vehicle-photo { position: relative; display: grid; aspect-ratio: 16 / 10; place-items: center; overflow: hidden; background: linear-gradient(145deg, rgb(223 23 48 / 10%), transparent 55%), #eef0f3; color: var(--muted); } /* Fond neutre derrière une photo, pour ne pas teinter les bandes latérales. */ .vehicle-photo:has(img) { background: var(--surface-soft); } /* La photo est affichée en entier : aucun recadrage, quel que soit son format. */ .vehicle-photo img { width: 100%; height: 100%; object-fit: contain; } .vehicle-photo > span:not(.vehicle-kind-badge) { display: grid; width: 48px; height: 48px; place-items: center; border-radius: 14px; background: var(--surface); box-shadow: var(--shadow-sm); } .vehicle-photo > span svg { width: 24px; } .vehicle-photo > small { font-size: 9px; } .vehicle-kind-badge { position: absolute; top: 12px; left: 12px; border: 1px solid rgb(255 255 255 / 45%); border-radius: 999px; padding: 5px 9px; background: rgb(24 27 33 / 82%); color: #fff; font-size: 8px; font-weight: 800; backdrop-filter: blur(8px); } .vehicle-photo-editor { margin-bottom: 18px; } .photo-drop { display: flex; align-items: center; gap: 14px; border: 1px dashed var(--line-strong); border-radius: 13px; padding: 12px; background: var(--surface-soft); cursor: pointer; } .photo-drop:hover { border-color: var(--brand); background: var(--brand-soft); } .photo-preview { display: grid; width: 88px; height: 64px; flex: 0 0 auto; place-items: center; overflow: hidden; border-radius: 10px; background: var(--surface); color: var(--brand); box-shadow: var(--shadow-sm); } .photo-preview img { width: 100%; height: 100%; object-fit: cover; } .photo-preview svg { width: 23px; } .photo-drop strong, .photo-drop small { display: block; } .photo-drop strong { font-size: 11px; } .photo-drop small { margin-top: 4px; color: var(--muted); font-size: 9px; } .plate-input { text-transform: uppercase; } .month-picker { display: grid; gap: 4px; } .month-picker > span { color: var(--muted); font-size: 8px; font-weight: 700; text-transform: uppercase; } .driver-performance-list { display: grid; } .performance-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 11px; border-bottom: 1px solid var(--line); padding: 13px 18px; } .performance-row:last-child { border-bottom: 0; } .performance-row > span { min-width: 0; } .performance-row strong, .performance-row small { display: block; } .performance-row strong { font-size: 10px; } .performance-row small { margin-top: 3px; color: var(--muted); font-size: 8px; } .performance-row > span:last-child { text-align: right; } .account-list { display: grid; } .account-row { display: grid; grid-template-columns: auto minmax(180px, 1fr) auto auto auto; align-items: center; gap: 12px; border-bottom: 1px solid var(--line); padding: 12px 18px; } .account-row:last-child { border-bottom: 0; } .account-copy { min-width: 0; } .account-copy strong, .account-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .account-copy strong { font-size: 11px; } .account-copy small { margin-top: 3px; color: var(--muted); font-size: 9px; } .account-date { color: var(--muted); font-size: 9px; } .settings-form { padding: 18px; } .settings-form-actions { display: flex; justify-content: flex-end; margin-top: 15px; } .settings-body { padding: 0 18px 18px; } .settings-body > p { margin: 0 0 15px; color: var(--muted); font-size: 10px; line-height: 1.6; } .settings-row { padding-right: 0; padding-left: 0; } .settings-row span > strong, .settings-row span > small { display: block; } .settings-row span > strong { font-size: 10px; } .settings-row span > small { margin-top: 4px; color: var(--muted); font-size: 8px; } .danger-zone { border-color: var(--danger); } .launcher-screen { display: grid; min-height: 100vh; place-items: center; padding: 24px; background: var(--canvas); } .launcher-card { width: min(560px, 100%); border: 1px solid var(--line); border-radius: 22px; padding: 34px; background: var(--surface); box-shadow: var(--shadow-md); } .launcher-card h1 { margin: 12px 0; font-size: clamp(24px, 5vw, 38px); letter-spacing: -0.045em; } .launcher-card p, .launcher-card li { color: var(--muted); font-size: 12px; line-height: 1.7; } .launcher-note { border-radius: 10px; padding: 10px 12px; background: var(--brand-soft); color: var(--brand) !important; font-weight: 700; } .auth-page { background: var(--canvas); } .auth-layout { display: grid; min-height: 100vh; grid-template-columns: minmax(420px, 1.1fr) minmax(420px, .9fr); } .auth-visual { position: relative; display: flex; min-height: 100vh; flex-direction: column; justify-content: space-between; overflow: hidden; padding: 42px 54px; background: radial-gradient(circle at 20% 80%, rgb(223 23 48 / 28%), transparent 28rem), linear-gradient(145deg, rgb(255 255 255 / 3%), transparent 60%), #14171d; color: #fff; } .auth-visual::after { position: absolute; right: -150px; bottom: -190px; width: 620px; height: 620px; border: 85px solid rgb(255 255 255 / 3%); border-radius: 50%; content: ""; } .auth-brand, .auth-mobile-brand { display: flex; align-items: center; gap: 13px; } .auth-brand strong, .auth-brand small { display: block; } .auth-brand strong { font-size: 18px; letter-spacing: .1em; } .auth-brand small { margin-top: 3px; color: #9ca2ac; font-size: 10px; } .auth-visual-copy { position: relative; z-index: 1; max-width: 670px; } .auth-visual-copy h1 { margin: 15px 0; font-size: clamp(42px, 6vw, 76px); letter-spacing: -.065em; line-height: .98; } .auth-visual-copy > p:last-child { max-width: 540px; color: #b0b5bd; font-size: 14px; line-height: 1.7; } .auth-security { position: relative; z-index: 1; color: #8f96a1; font-size: 10px; } .auth-security span { color: var(--success); } .auth-panel { display: grid; place-items: center; padding: 38px; } .auth-card { width: min(410px, 100%); } .auth-mobile-brand { display: none; margin-bottom: 35px; } .auth-form h2, .auth-form > p, .auth-state h2, .auth-state > p { margin: 0; } .auth-form h2, .auth-state h2 { margin: 7px 0 8px; font-size: 29px; letter-spacing: -.045em; } .auth-form > p:not(.section-eyebrow):not(.form-error), .auth-state > p { margin-bottom: 25px; color: var(--muted); font-size: 11px; line-height: 1.65; } .auth-form { display: grid; gap: 14px; } .auth-submit { min-height: 48px; margin-top: 5px; justify-content: center; } .auth-state { text-align: center; } .auth-spinner { display: block; width: 34px; height: 34px; margin: 0 auto 14px; border: 3px solid var(--line); border-top-color: var(--brand); border-radius: 50%; animation: auth-spin .8s linear infinite; } @keyframes auth-spin { to { transform: rotate(360deg); } } .error-state { display: grid; min-height: 50vh; place-content: center; justify-items: center; text-align: center; } .error-state h2 { margin: 0; } .error-state p { color: var(--muted); } @media (max-width: 1180px) { .vehicle-grid { grid-template-columns: repeat(2, minmax(240px, 1fr)); } } @media (max-width: 900px) { .auth-layout { grid-template-columns: 1fr; } .auth-visual { display: none; } .auth-panel { min-height: 100vh; } .auth-mobile-brand { display: flex; } .route-form-grid { grid-template-columns: 1fr; } .account-row { grid-template-columns: auto minmax(0, 1fr) auto auto; } .account-date { display: none; } } @media (max-width: 680px) { .native-dialog, .native-dialog.modal-wide, .native-dialog.confirm-dialog { width: 100%; max-width: none; max-height: 94vh; margin: auto 0 0; border-radius: 18px 18px 0 0; } .native-dialog .modal-body { max-height: calc(94vh - 145px); } .native-dialog .modal-footer .button { flex: 1; } .calculation-panel, .fuel-summary-body { grid-template-columns: 1fr; } .vehicle-grid { grid-template-columns: 1fr; } .account-row { grid-template-columns: auto minmax(0, 1fr) auto; } .account-row > .badge { display: none; } .auth-panel { padding: 25px 18px; } .auth-form h2, .auth-state h2 { font-size: 25px; } }