/* ============================================================ DriveProof Portal — shared design system ------------------------------------------------------------ In production this file is `apps/dashboards/web/driveproof.css`. Every color resolves through a CSS variable so the page responds to `` set by portal.js (driven by the topbar toggle and persisted in localStorage / on users.theme_preference). ============================================================ */ /* ─── palette-independent tokens ────────────────────────────── */ :root { /* type */ --font-sans: 'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace; /* spacing */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; /* radii */ --r-1: 3px; --r-2: 4px; --r-3: 6px; --r-4: 10px; /* font sizes */ --fs-xs: 11px; --fs-sm: 12px; --fs-md: 13px; --fs-lg: 15px; --fs-xl: 18px; --fs-2xl: 22px; /* layout */ --rail-w: 56px; --topbar-h: 40px; } /* ─── light palette (default) ──────────────────────────────── */ :root, [data-theme="light"] { --bg: #f3f3f5; --surface: #ffffff; --surface-2: #fafafb; --border: #e1e1e6; --border-2: #d0d0d6; --ink-0: #1c1c1e; --ink-1: #323236; --ink-2: #58585c; --ink-3: #8a8a90; --ink-4: #c0c0c6; --link: #0e639c; --link-hov: #0a4d7a; --accent: #0078d4; --accent-bg: #e6f2fb; --brand: #e03131; /* DriveProof brand red — bolt + destructive only */ --ok: #107c10; --ok-bg: #dff6dd; --warn: #a86b00; --warn-bg: #fdf3d4; --err: #a4262c; --err-bg: #fde7e9; --info: #0078d4; --info-bg: #e6f2fb; /* DriveProof category tokens — light tints */ --cat-commute: #c25a00; --cat-commute-bg: #fde9d3; --cat-business: #107c10; --cat-business-bg: #dff6dd; --cat-personal: #5a5a63; --cat-personal-bg: #ececef; --cat-medical: #0078d4; --cat-medical-bg: #e6f2fb; --cat-robotaxi: #6f3fa3; --cat-robotaxi-bg: #f0e6f8; --cat-charity: #a86b00; --cat-charity-bg: #fdf3d4; --cat-untagged: #a4262c; --cat-untagged-bg: #fde7e9; --cat-rental: #0078d4; --cat-rental-bg: #e6f2fb; --cat-mixed: #6f3fa3; --cat-mixed-bg: #f0e6f8; --cat-inprog: #0078d4; --cat-inprog-bg: #e6f2fb; --rail-bg: #1f1f23; --rail-ink: #c9c9d0; --rail-ink-2: #888892; --rail-active-bg: #2d2d33; --rail-divider: #2c2c33; --rail-accent: #2899f5; --selected-bg: #e6f2fb; --selected-bar: #0078d4; --row-hover: #fafafb; --map-bg: linear-gradient(135deg, #f4f5f7 0%, #e8eaf0 100%); --map-line: #d8dbe4; --map-water: #e0e7f0; --map-route: #0078d4; --map-route-2: #6fdb6f; --map-pin-start: #1c1c1e; --map-pin-end: #a86b00; --map-badge-bg: rgba(255,255,255,0.95); --acct-grad: linear-gradient(135deg, #6b7c93 0%, #4a5568 100%); --acct-fg: #fff; --shadow-1: 0 1px 0 var(--border); --shadow-2: 0 2px 8px rgba(15,20,30,.08); --shadow-pop: 0 4px 14px rgba(15,20,30,.14); } /* ─── dark palette ─────────────────────────────────────────── */ [data-theme="dark"] { --bg: #0a0a0b; --surface: #16161a; --surface-2: #1c1c22; --border: #232329; --border-2: #2c2c34; --ink-0: #f4f4f5; --ink-1: #c8c8cf; --ink-2: #8a8a93; --ink-3: #5a5a63; --ink-4: #3d3d45; --link: #6ab0ff; --link-hov: #8cc1ff; --accent: #4a9eff; --accent-bg: #14202e; --brand: #e03131; --ok: #6fdb6f; --ok-bg: #16261a; --warn: #ffcc44; --warn-bg: #251a00; --err: #ff7070; --err-bg: #2a1818; --info: #6ab0ff; --info-bg: #14202e; --cat-commute: #f0a050; --cat-commute-bg: #2a1f12; --cat-business: #6fdb6f; --cat-business-bg: #14261a; --cat-personal: #c8c8cf; --cat-personal-bg: #232329; --cat-medical: #74b4ff; --cat-medical-bg: #14243a; --cat-robotaxi: #c070f0; --cat-robotaxi-bg: #1f1228; --cat-charity: #ffd266; --cat-charity-bg: #2a2410; --cat-untagged: #ff7070; --cat-untagged-bg: #2a1818; --cat-rental: #74b4ff; --cat-rental-bg: #14243a; --cat-mixed: #c070f0; --cat-mixed-bg: #1f1228; --cat-inprog: #6ab0ff; --cat-inprog-bg: #14202e; --rail-bg: #111114; --rail-ink: #8a8a93; --rail-ink-2: #5a5a63; --rail-active-bg: #1c1c22; --rail-divider: #232329; --rail-accent: #e03131; --selected-bg: #14202e; --selected-bar: #4a9eff; --row-hover: #1c1c22; --map-bg: linear-gradient(135deg, #12131a 0%, #1a1c26 100%); --map-line: #2c2c34; --map-water: #1a2230; --map-route: #4a9eff; --map-route-2: #6fdb6f; --map-pin-start: #f4f4f5; --map-pin-end: #ffd266; --map-badge-bg: rgba(22,22,26,0.95); --acct-grad: linear-gradient(135deg, #3a4658 0%, #1f2733 100%); --acct-fg: #f4f4f5; --shadow-1: 0 1px 0 var(--border); --shadow-2: 0 2px 8px rgba(0,0,0,.45); --shadow-pop: 0 4px 14px rgba(0,0,0,.55); } /* ─── reset ────────────────────────────────────────────────── */ * { box-sizing: border-box; margin: 0; padding: 0; } html, body { background: var(--bg); color: var(--ink-1); font-family: var(--font-sans); font-size: var(--fs-md); -webkit-font-smoothing: antialiased; min-height: 100vh; } .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } a { color: var(--link); text-decoration: none; } a:hover { text-decoration: underline; text-decoration-thickness: 1px; } button { font-family: inherit; } /* ─── shell ────────────────────────────────────────────────── */ .shell { display: grid; grid-template-columns: var(--rail-w) 1fr; min-height: 100vh; } /* ─── left rail ────────────────────────────────────────────── */ .rail { background: var(--rail-bg); color: var(--rail-ink); display: flex; flex-direction: column; padding: 8px 0; position: sticky; top: 0; height: 100vh; } .rail .logo { width: var(--rail-w); height: 48px; display: flex; align-items: center; justify-content: center; color: var(--rail-accent); font-size: 1.2rem; font-weight: 700; border-bottom: 1px solid var(--rail-divider); margin-bottom: 8px; text-decoration: none; } .rail-btn { width: var(--rail-w); height: 48px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--rail-ink-2); text-decoration: none; font-size: 9px; cursor: pointer; transition: background .12s, color .12s; position: relative; } .rail-btn:hover { background: var(--rail-active-bg); color: var(--rail-ink); text-decoration: none; } .rail-btn.active { color: #fff; background: var(--rail-active-bg); } .rail-btn.active::before { content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; background: var(--rail-accent); border-radius: 0 2px 2px 0; } .rail-btn svg { width: 18px; height: 18px; opacity: 0.9; } .rail .spacer { flex: 1; } /* ─── main column ──────────────────────────────────────────── */ .main { display: flex; flex-direction: column; min-width: 0; } /* ─── topbar ───────────────────────────────────────────────── */ .topbar { height: var(--topbar-h); background: var(--surface); border-bottom: 1px solid var(--border); display: flex; align-items: center; padding: 0 16px; gap: 12px; position: sticky; top: 0; z-index: 5; } .topbar .search { width: 320px; height: 26px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-1); padding: 0 8px 0 28px; font-family: inherit; font-size: var(--fs-sm); color: var(--ink-1); outline: none; background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%238a8a90' stroke-width='1.5'%3E%3Ccircle cx='7' cy='7' r='5'/%3E%3Cpath d='M11 11l3 3'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: 8px center; background-size: 12px; } .topbar .search:focus { border-color: var(--accent); } .topbar .search::placeholder { color: var(--ink-3); } .topbar .spacer { flex: 1; } .topbar .top-action { height: 26px; padding: 0 10px; font-size: var(--fs-sm); color: var(--ink-2); background: transparent; border: 1px solid transparent; border-radius: var(--r-1); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; } .topbar .top-action:hover { background: var(--bg); } .topbar .acct { width: 28px; height: 28px; background: var(--acct-grad); color: var(--acct-fg); font-size: var(--fs-xs); font-weight: 600; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; } /* theme toggle (sun/moon pill) */ .theme-toggle { display: inline-flex; background: var(--bg); border: 1px solid var(--border); border-radius: 14px; padding: 2px; height: 26px; } .theme-toggle button { width: 32px; height: 20px; background: transparent; border: none; border-radius: 10px; color: var(--ink-3); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background .12s, color .12s; } .theme-toggle button:hover { color: var(--ink-1); } .theme-toggle button.active { background: var(--surface); color: var(--ink-0); box-shadow: 0 1px 2px rgba(0,0,0,0.15); } .theme-toggle button svg { width: 13px; height: 13px; } /* ─── breadcrumb ───────────────────────────────────────────── */ .crumb-bar { background: var(--surface); padding: 8px 24px; border-bottom: 1px solid var(--border); font-size: var(--fs-sm); color: var(--ink-2); display: flex; align-items: center; gap: 6px; } .crumb-bar a { color: var(--link); } .crumb-bar .sep { color: var(--ink-4); } .crumb-bar .here { color: var(--ink-1); font-weight: 500; } /* ─── page header ──────────────────────────────────────────── */ .pgh { background: var(--surface); padding: 14px 24px 0; border-bottom: 1px solid var(--border); } .pgh-top { display: flex; align-items: flex-start; gap: 16px; } .pgh-icon { width: 36px; height: 36px; background: var(--accent-bg); color: var(--accent); border-radius: var(--r-2); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .pgh-title-block { flex: 1; min-width: 0; } .pgh h1 { font-size: var(--fs-xl); font-weight: 600; color: var(--ink-0); letter-spacing: -0.005em; margin-bottom: 2px; } .pgh-sub { font-size: var(--fs-sm); color: var(--ink-3); display: flex; gap: 12px; align-items: center; flex-wrap: wrap; } .pgh-sub .sep { color: var(--ink-4); } .pgh-sub .mono { color: var(--ink-2); } /* ─── toolbar (button group) ───────────────────────────────── */ .toolbar { display: flex; gap: 1px; margin-top: 14px; background: var(--border); border-radius: var(--r-1); padding: 1px; align-self: flex-start; } .toolbar button, .toolbar a { background: var(--surface); border: none; cursor: pointer; padding: 6px 11px; font-family: inherit; font-size: var(--fs-sm); color: var(--ink-1); display: inline-flex; align-items: center; gap: 6px; text-decoration: none; } .toolbar button:first-child, .toolbar a:first-child { border-radius: var(--r-1) 0 0 var(--r-1); } .toolbar button:last-child, .toolbar a:last-child { border-radius: 0 var(--r-1) var(--r-1) 0; } .toolbar button:hover, .toolbar a:hover { background: var(--accent-bg); color: var(--accent); } .toolbar .ico { width: 14px; height: 14px; opacity: 0.8; } .toolbar .danger:hover { background: var(--err-bg); color: var(--err); } /* ─── tabs ─────────────────────────────────────────────────── */ .tabs { display: flex; gap: 0; padding: 0 24px; margin-top: 14px; border-bottom: 1px solid var(--border); background: var(--surface); } .tabs a { padding: 9px 14px; font-size: var(--fs-md); color: var(--ink-2); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .12s, border-color .12s; } .tabs a:hover { color: var(--ink-0); text-decoration: none; } .tabs a.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 500; } /* ─── content area ─────────────────────────────────────────── */ .content { flex: 1; padding: 16px 24px 32px; overflow-y: auto; } .row-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; } .row-grid-2-1 { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; } .row-grid-1-1 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } /* ─── panel (card) ─────────────────────────────────────────── */ .panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-1); margin-bottom: 16px; } .panel-head { padding: 9px 14px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 10px; } .panel-head h2 { font-size: var(--fs-md); font-weight: 600; color: var(--ink-0); letter-spacing: -0.005em; } .panel-head .sub { font-size: var(--fs-xs); color: var(--ink-3); } .panel-head .actions { margin-left: auto; display: flex; gap: 4px; } .panel-head .actions a { font-size: var(--fs-xs); color: var(--link); padding: 2px 6px; border-radius: 2px; } .panel-head .actions a:hover { background: var(--accent-bg); text-decoration: none; } .panel-body { padding: 12px 14px; } /* ─── properties (key/value grid) ──────────────────────────── */ .props { display: grid; grid-template-columns: 140px 1fr; column-gap: 14px; row-gap: 6px; font-size: var(--fs-sm); } .props .k { color: var(--ink-3); padding: 4px 0; } .props .v { color: var(--ink-1); padding: 4px 0; } .props .v.mono { font-size: 11.5px; color: var(--ink-0); } .props .v.link a { color: var(--link); } .props .v code { background: var(--bg); padding: 1px 5px; border-radius: 2px; font-size: var(--fs-xs); border: 1px solid var(--border); color: var(--ink-1); } /* ─── pills ────────────────────────────────────────────────── */ .pill { display: inline-flex; align-items: center; gap: 5px; padding: 1px 7px; border-radius: 10px; font-size: var(--fs-xs); font-weight: 500; line-height: 1.5; } .pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .pill.ok { background: var(--ok-bg); color: var(--ok); } .pill.warn { background: var(--warn-bg); color: var(--warn); } .pill.err { background: var(--err-bg); color: var(--err); } .pill.info { background: var(--info-bg); color: var(--info); } .pill.neutral { background: var(--bg); color: var(--ink-2); } /* DriveProof category pills */ .pill.cat-commute { background: var(--cat-commute-bg); color: var(--cat-commute); } .pill.cat-business { background: var(--cat-business-bg); color: var(--cat-business); } .pill.cat-personal { background: var(--cat-personal-bg); color: var(--cat-personal); } .pill.cat-medical { background: var(--cat-medical-bg); color: var(--cat-medical); } .pill.cat-robotaxi { background: var(--cat-robotaxi-bg); color: var(--cat-robotaxi); } .pill.cat-charity { background: var(--cat-charity-bg); color: var(--cat-charity); } .pill.cat-untagged { background: var(--cat-untagged-bg); color: var(--cat-untagged); } .pill.cat-rental { background: var(--cat-rental-bg); color: var(--cat-rental); } .pill.cat-mixed { background: var(--cat-mixed-bg); color: var(--cat-mixed); } .pill.cat-inprog { background: var(--cat-inprog-bg); color: var(--cat-inprog); } /* ─── data table ───────────────────────────────────────────── */ table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); } thead th { text-align: left; background: var(--surface-2); color: var(--ink-2); font-weight: 600; padding: 7px 12px; border-bottom: 1px solid var(--border); font-size: 11.5px; white-space: nowrap; position: relative; } thead th .sort { color: var(--ink-4); margin-left: 4px; font-size: 9px; } thead th.sorted { color: var(--ink-0); } thead th.sorted .sort { color: var(--accent); } tbody td { padding: 7px 12px; border-bottom: 1px solid var(--border); color: var(--ink-1); vertical-align: middle; } tbody tr:last-child td { border-bottom: none; } tbody tr:hover td { background: var(--row-hover); } tbody tr.selected td { background: var(--selected-bg); box-shadow: inset 2px 0 0 var(--selected-bar); } .name-cell a { color: var(--link); font-weight: 500; } .num-cell { font-family: var(--font-mono); font-variant-numeric: tabular-nums; text-align: right; color: var(--ink-0); } .num-cell small { color: var(--ink-3); } .small-mute { font-size: var(--fs-xs); color: var(--ink-3); margin-top: 1px; font-family: var(--font-mono); font-variant-numeric: tabular-nums; } .check { width: 14px; height: 14px; border: 1.5px solid var(--border-2); border-radius: 2px; display: inline-block; vertical-align: middle; background: var(--surface); cursor: pointer; } tbody tr.selected .check { background: var(--accent); border-color: var(--accent); background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%23fff' stroke-width='2.2'%3E%3Cpath d='M3 7l3 3 5-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 11px; } /* row clickability */ tbody tr.clickable { cursor: pointer; } tbody tr.clickable:hover td:first-child { box-shadow: inset 2px 0 0 var(--border-2); } /* row flag — visual status indicator without dedicating a column. Works like an unread-email flag: tinted background + a colored bar on the left edge. */ tbody tr.flag-warn td { background: var(--warn-bg); box-shadow: inset 3px 0 0 var(--warn); } tbody tr.flag-chain td { background: var(--err-bg); box-shadow: inset 3px 0 0 var(--err); } tbody tr.flag-info td { background: var(--info-bg); box-shadow: inset 3px 0 0 var(--info); } tbody tr.flag-err td { background: var(--err-bg); box-shadow: inset 3px 0 0 var(--err); } tbody tr.flag-ok td { background: var(--ok-bg); box-shadow: inset 3px 0 0 var(--ok); } /* hover keeps the flag visible — clickable affordance from cursor only */ tbody tr.flag-warn.clickable:hover td, tbody tr.flag-chain.clickable:hover td, tbody tr.flag-info.clickable:hover td, tbody tr.flag-err.clickable:hover td, tbody tr.flag-ok.clickable:hover td { filter: brightness(0.97); } /* ─── stat strip ───────────────────────────────────────────── */ .stat-strip { /* Equal-width tiles regardless of how many panels live in the strip. Was hardcoded at `repeat(5, 1fr)` which broke v2/journey (6 tiles) and v2/drivers (10 tiles) — extras wrapped to a second row. The `auto-fit` + `minmax(0, 1fr)` pair lets the grid size all children equally to fill the row whatever the count. minmax(0, …) is the idiom that lets columns shrink below content's intrinsic width instead of overflowing the container. */ display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-1); margin-bottom: 16px; overflow: hidden; } .stat-strip > div { padding: 12px 16px; border-right: 1px solid var(--border); } .stat-strip > div:last-child { border-right: none; } .stat-strip .l { font-size: var(--fs-xs); color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 4px; } .stat-strip .v { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--fs-xl); font-weight: 500; color: var(--ink-0); letter-spacing: -0.01em; line-height: 1; } .stat-strip .v small { font-size: var(--fs-xs); color: var(--ink-3); margin-left: 2px; font-weight: 400; } .stat-strip .v .accent { color: var(--accent); } .stat-strip .delta { font-size: var(--fs-xs); color: var(--ink-3); margin-top: 5px; } .stat-strip .delta.pos { color: var(--ok); } .stat-strip .delta.neg { color: var(--err); } .stat-strip .delta.warn { color: var(--warn); } .stat-strip.cols-4 { grid-template-columns: repeat(4, 1fr); } .stat-strip.cols-3 { grid-template-columns: repeat(3, 1fr); } /* ─── map mini (SVG placeholder; in production this is a Leaflet div) */ .map-mini { aspect-ratio: 16 / 8; background: var(--map-bg); position: relative; overflow: hidden; margin: -12px -14px 12px; } .map-mini.flat { margin: 0; border-radius: var(--r-1); } .map-mini.tall { aspect-ratio: 4 / 5; } .map-mini svg { position: absolute; inset: 0; width: 100%; height: 100%; } .map-mini .badge { position: absolute; top: 8px; left: 10px; background: var(--map-badge-bg); border: 1px solid var(--border); padding: 3px 8px; font-size: var(--fs-xs); color: var(--ink-2); border-radius: 2px; font-family: var(--font-mono); backdrop-filter: blur(4px); } /* ─── activity log ─────────────────────────────────────────── */ .log { font-family: var(--font-mono); font-size: 11.5px; } .log-row { display: grid; grid-template-columns: 130px 1fr auto; gap: 14px; padding: 6px 0; border-bottom: 1px solid var(--surface-2); align-items: baseline; } .log-row:last-child { border-bottom: none; } .log-row .t { color: var(--ink-3); font-variant-numeric: tabular-nums; } .log-row .m { color: var(--ink-1); } .log-row .m code { background: var(--bg); padding: 1px 4px; border-radius: 2px; font-size: 10.5px; border: 1px solid var(--border); color: var(--ink-1); } .log-row .m a { color: var(--link); } .log-row .u { color: var(--ink-3); font-size: var(--fs-xs); } /* ─── quick-action link ────────────────────────────────────── */ .qa-link { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; color: var(--link); border-bottom: 1px solid var(--surface-2); } .qa-link:last-child { border-bottom: none; } .qa-link:hover { text-decoration: none; color: var(--link-hov); } .qa-link .arrow { color: var(--ink-4); } /* ─── driver avatar ────────────────────────────────────────── */ .avatar { width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: var(--fs-xs); font-weight: 700; flex-shrink: 0; } .avatar.lg { width: 56px; height: 56px; font-size: var(--fs-xl); } .avatar.sm { width: 22px; height: 22px; font-size: 10px; } /* model-tag: compact vehicle model designation chip — e.g. "Evee Y", "Jarvis 3" */ .model-tag { display: inline-block; padding: 1px 6px; margin-left: 6px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-1); font-family: var(--font-mono); font-size: 10px; font-weight: 600; color: var(--ink-2); vertical-align: 1px; line-height: 1.5; letter-spacing: 0.02em; } /* segmented control — Jarvis | Evee | Both etc. */ .seg { display: inline-flex; background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-1); padding: 1px; gap: 1px; align-self: center; } .seg button, .seg a { padding: 4px 10px; background: transparent; border: none; border-radius: 2px; color: var(--ink-2); cursor: pointer; font-family: inherit; font-size: var(--fs-xs); text-decoration: none; display: inline-flex; align-items: center; gap: 4px; line-height: 1.4; } .seg button:hover:not(.active), .seg a:hover:not(.active) { background: var(--surface); color: var(--ink-0); } .seg button.active, .seg a.active { background: var(--surface); color: var(--ink-0); font-weight: 500; box-shadow: 0 1px 2px rgba(0,0,0,0.15); } .seg button.pending, .seg a.pending { color: var(--ink-3); font-style: italic; } .seg .model-tag { margin-left: 2px; padding: 0 4px; } /* ─── form rows (settings) ─────────────────────────────────── */ .form-row { display: grid; grid-template-columns: 220px 1fr; gap: 24px; padding: 18px 0; border-bottom: 1px solid var(--border); align-items: start; } .form-row:last-child { border-bottom: none; } .form-row .label h3 { font-size: var(--fs-md); font-weight: 600; color: var(--ink-0); margin-bottom: 4px; } .form-row .label p { font-size: var(--fs-sm); color: var(--ink-3); line-height: 1.45; } .form-row .control { font-size: var(--fs-sm); } .radio-row { display: flex; gap: 8px; flex-wrap: wrap; } .radio-row label { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-2); cursor: pointer; font-size: var(--fs-sm); color: var(--ink-1); transition: border-color .12s, background .12s; } .radio-row label:hover { border-color: var(--border-2); } .radio-row label.checked { background: var(--accent-bg); border-color: var(--accent); color: var(--accent); } .radio-row input { accent-color: var(--accent); } input[type=text], input[type=email], input[type=number], select { height: 30px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-1); padding: 0 10px; font-family: inherit; font-size: var(--fs-sm); color: var(--ink-0); outline: none; } input:focus, select:focus { border-color: var(--accent); } .btn { height: 28px; padding: 0 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-1); font-family: inherit; font-size: var(--fs-sm); color: var(--ink-1); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; } .btn:hover { background: var(--row-hover); border-color: var(--border-2); } .btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; } .btn-primary:hover { background: var(--link-hov); border-color: var(--link-hov); } .btn-ghost { background: transparent; border-color: transparent; } .btn-ghost:hover { background: var(--row-hover); } /* ─── empty state ──────────────────────────────────────────── */ .empty { text-align: center; padding: 48px 24px; color: var(--ink-3); font-size: var(--fs-sm); } .empty h3 { color: var(--ink-1); font-size: var(--fs-md); margin-bottom: 6px; } /* ─── alert / callout ──────────────────────────────────────── */ .callout { display: flex; gap: 12px; padding: 12px 14px; background: var(--warn-bg); border: 1px solid var(--warn); border-left-width: 3px; border-radius: var(--r-1); margin-bottom: 16px; font-size: var(--fs-sm); color: var(--ink-1); align-items: center; } .callout.info { background: var(--info-bg); border-color: var(--info); } .callout.err { background: var(--err-bg); border-color: var(--err); } .callout .ico { color: var(--warn); flex-shrink: 0; } .callout.info .ico { color: var(--info); } .callout.err .ico { color: var(--err); } .callout strong { color: var(--ink-0); margin-right: 4px; } .callout .cta { margin-left: auto; } /* ─── timeline (day view) ──────────────────────────────────── */ .timeline { position: relative; padding-left: 80px; } .timeline::before { content: ''; position: absolute; left: 64px; top: 8px; bottom: 8px; width: 1px; background: var(--border); } .tl-row { position: relative; padding: 8px 0 12px; border-bottom: 1px dashed var(--surface-2); } .tl-row:last-child { border-bottom: none; } .tl-row .tl-time { position: absolute; left: -80px; top: 10px; width: 70px; text-align: right; font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--ink-3); } .tl-row .tl-dot { position: absolute; left: -22px; top: 13px; width: 12px; height: 12px; border-radius: 50%; background: var(--surface); border: 2px solid var(--accent); } .tl-row.parked .tl-dot { border-color: var(--ink-3); background: var(--bg); } .tl-row.parked { opacity: 0.7; } .tl-row .tl-title { font-size: var(--fs-md); color: var(--ink-0); font-weight: 500; margin-bottom: 2px; } .tl-row .tl-meta { font-size: var(--fs-xs); color: var(--ink-3); font-family: var(--font-mono); } .tl-row .tl-meta .pill { font-family: var(--font-sans); } /* ─── chart placeholder (used on dashboard) ────────────────── */ .bar-chart { display: flex; align-items: flex-end; gap: 6px; height: 120px; padding: 8px 0; } .bar-chart .bar { flex: 1; background: transparent; border-radius: 2px 2px 0 0; min-height: 4px; position: relative; display: flex; flex-direction: column; justify-content: flex-end; opacity: 0.95; } .bar-chart .bar:hover { opacity: 1; } .bar-chart .bar-stack { flex: 1; width: 100%; display: flex; flex-direction: column-reverse; border-radius: 2px 2px 0 0; overflow: hidden; min-height: 0; } .bar-chart .bar-seg { width: 100%; min-height: 0; } .bar-chart .bar .lbl { position: absolute; bottom: -18px; left: 0; right: 0; text-align: center; font-size: 10px; color: var(--ink-3); font-family: var(--font-mono); } .bar-chart .bar.today .lbl { color: var(--accent); font-weight: 600; } .bar-chart .bar.dim { background: var(--ink-4); opacity: 0.5; } .bar-chart-wrap { padding-bottom: 22px; } /* category split bar (horizontal stacked) */ .split-bar { display: flex; height: 8px; border-radius: 999px; overflow: hidden; background: var(--surface-2); margin-bottom: 8px; } .split-bar > span { display: block; } .split-legend { display: flex; flex-wrap: wrap; gap: 10px; font-size: var(--fs-xs); color: var(--ink-2); } .split-legend .dot { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 5px; vertical-align: middle; } /* ─── big stat callouts (reports) ──────────────────────────── */ .big-stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-3); padding: 20px 22px; } .big-stat .l { font-size: var(--fs-xs); color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 8px; } .big-stat .v { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 28px; font-weight: 600; color: var(--ink-0); letter-spacing: -0.015em; line-height: 1; } .big-stat .v small { font-size: var(--fs-md); color: var(--ink-3); margin-left: 4px; font-weight: 400; } .big-stat .delta { font-size: var(--fs-xs); color: var(--ink-3); margin-top: 10px; } .big-stat .delta.pos { color: var(--ok); } /* ─── responsive ───────────────────────────────────────────── */ @media (max-width: 1100px) { .row-grid, .row-grid-2-1 { grid-template-columns: 1fr; } } @media (max-width: 720px) { .shell { grid-template-columns: 1fr; grid-template-rows: auto 1fr; } /* 2026-05-26: tightened mobile rail — icon-only, smaller buttons, active indicator flipped to bottom-bar. Mirrors driveproof.css fix of the same name. See that block for full rationale. */ .rail { flex-direction: row; padding: 0; height: 44px; position: static; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; } .rail .logo { width: 44px; height: 44px; margin-bottom: 0; border-bottom: none; border-right: 1px solid var(--rail-divider); flex-shrink: 0; } .rail-btn { width: 44px; height: 44px; flex-shrink: 0; font-size: 0; line-height: 0; gap: 0; } .rail-btn svg { width: 20px; height: 20px; opacity: 0.85; } .rail-btn.active::before { inset: auto 4px 0 4px; width: auto; height: 2px; border-radius: 2px 2px 0 0; } .rail .spacer { display: none; } .topbar .search { width: 100%; max-width: 160px; } .topbar .top-action span { display: none; } .content { padding: 12px 12px 32px; } .row-grid-1-1 { grid-template-columns: 1fr; } .stat-strip { grid-template-columns: 1fr 1fr; } .stat-strip > div:nth-child(2n) { border-right: none; } .stat-strip > div { border-bottom: 1px solid var(--border); } .tabs { padding: 0 12px; overflow-x: auto; } .crumb-bar, .pgh { padding-left: 14px; padding-right: 14px; } .props { grid-template-columns: 110px 1fr; } .form-row { grid-template-columns: 1fr; gap: 8px; } table thead { display: none; } table, tbody, tr, td { display: block; } tbody tr { padding: 8px 10px; border-bottom: 1px solid var(--border); } tbody td { padding: 2px 0; border: none; } tbody td.num-cell { text-align: left; } }