/* Aviator Flight Deck — design tokens + Bootstrap overrides Day/night via [data-theme] on . Night is default. */ /* ========== Tokens — Night (default) ========== */ :root, [data-theme="dark"] { --bg: #0e0f12; --bg-2: #0a0b0e; --surface: #14171c; --surface-2: #1a1d22; --line: #1d2026; --line-2: #2a2e35; --text: #e8eaf0; --text-dim: #9aa0aa; --text-mute: #7a808a; --text-faint:#52596a; --gilt: #b89968; --gilt-2: #d4b783; --gilt-soft: rgba(184,153,104,0.10); --gilt-hair: rgba(184,153,104,0.16); --signal: #5cb8ff; --good: #4ec97a; --good-soft: rgba(78,201,122,0.10); --warn: #f0a93b; --warn-soft: rgba(240,169,59,0.10); --bad: #ff5963; --bad-soft: rgba(255,89,99,0.10); --noir: #0e0f12; --bone: #fafaf7; --shadow: 0 1px 0 rgba(255,255,255,0.02), 0 8px 24px rgba(0,0,0,0.35); --hairline: linear-gradient(90deg, transparent, rgba(184,153,104,0.4), transparent); --grid-dots: rgba(255,255,255,0.04); /* Typography */ --font-display: "Space Grotesk", system-ui, sans-serif; --font-ui: "Inter Tight", system-ui, sans-serif; --font-body: "Inter", system-ui, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, monospace; /* Bootstrap overrides */ --bs-body-bg: var(--bg); --bs-body-color: var(--text); --bs-body-font-family: var(--font-body); --bs-body-font-size: 13.5px; --bs-primary: var(--gilt); --bs-primary-rgb: 184, 153, 104; --bs-dark: var(--noir); --bs-border-color: var(--line); --bs-secondary-color: var(--text-mute); --bs-link-color: var(--gilt); --bs-link-hover-color: var(--gilt-2); --bs-emphasis-color: var(--text); --bs-secondary-bg: var(--surface-2); --bs-tertiary-bg: var(--bg-2); } /* ========== Tokens — Day ========== */ [data-theme="light"] { --bg: #fafaf7; --bg-2: #f4f4f0; --surface: #ffffff; --surface-2: #fafaf7; --line: #e6e6e2; --line-2: #f0f0ec; --text: #0e0f12; --text-dim: #4a4e57; --text-mute: #7a808a; --text-faint:#9aa0aa; --gilt: #9d8254; --gilt-2: #b89968; --gilt-soft: rgba(157,130,84,0.08); --gilt-hair: rgba(157,130,84,0.20); --signal: #2c7be5; --good: #1f8f4a; --good-soft: rgba(31,143,74,0.08); --warn: #b67809; --warn-soft: rgba(182,120,9,0.08); --bad: #c53030; --bad-soft: rgba(197,48,48,0.08); --shadow: 0 1px 0 rgba(0,0,0,0.02), 0 4px 14px rgba(0,0,0,0.06); --hairline: linear-gradient(90deg, transparent, rgba(157,130,84,0.35), transparent); --grid-dots: rgba(0,0,0,0.04); --bs-primary-rgb: 157, 130, 84; } /* ========== Base ========== */ * { box-sizing: border-box; } html { background: var(--bg); } body { background: var(--bg) !important; color: var(--text) !important; font-family: var(--font-body) !important; font-size: 13.5px; -webkit-font-smoothing: antialiased; font-feature-settings: "ss01", "cv11"; } ::selection { background: var(--gilt-hair); color: var(--text); } /* ========== Bootstrap component overrides ========== */ /* Navbar */ .navbar { background: var(--bg-2) !important; border-bottom: 1px solid var(--line); } .navbar-brand { font-family: var(--font-display) !important; font-weight: 600 !important; letter-spacing: -0.012em; color: var(--text) !important; } .navbar .text-light { color: var(--text-dim) !important; } .navbar .badge.bg-secondary { background: var(--gilt-soft) !important; color: var(--gilt) !important; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.06em; font-weight: 500; } .navbar .btn-outline-light { border-color: var(--line-2) !important; color: var(--text-dim) !important; font-family: var(--font-ui); font-size: 12px; } .navbar .btn-outline-light:hover { background: var(--gilt-soft) !important; color: var(--gilt) !important; border-color: var(--gilt) !important; } .navbar .form-select { background-color: var(--surface-2) !important; color: var(--text-dim) !important; border-color: var(--line-2) !important; font-family: var(--font-ui); font-size: 12px; } /* Sidebar */ .sidebar { background: var(--bg-2) !important; border-right: 1px solid var(--line) !important; min-height: calc(100vh - 56px); } .sidebar .nav-link { color: var(--text-dim) !important; font-family: var(--font-ui); font-size: 13.5px; font-weight: 500; letter-spacing: -0.005em; padding: 9px 24px !important; position: relative; transition: all 0.12s; } .sidebar .nav-link:hover { color: var(--text) !important; background: var(--surface-2) !important; } .sidebar .nav-link.active { color: var(--text) !important; background: var(--gilt-soft) !important; } .sidebar .nav-link.active::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--gilt); } .sidebar .nav-link.active i { color: var(--gilt) !important; } .sidebar .nav-link i { color: var(--text-mute); width: 14px; font-size: 14px; } .sidebar hr { border-color: var(--line) !important; } .sidebar .text-muted { color: var(--text-faint) !important; } .sidebar .nav-link.text-muted strong { font-family: var(--font-mono) !important; font-size: 9.5px !important; letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-faint) !important; } /* Admin section group headers */ .sidebar .sidebar-toggle { font-family: var(--font-mono) !important; } .sidebar .sidebar-toggle strong { font-size: 9.5px !important; letter-spacing: 0.18em !important; } .sidebar .sidebar-toggle:hover { background: var(--surface-2) !important; } /* Sidebar sub-nav */ .sidebar .collapse .nav-link { font-size: 13px; } /* Badge in sidebar */ .sidebar .badge.bg-warning { background: var(--warn-soft) !important; color: var(--warn) !important; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.06em; font-weight: 500; } /* Cards */ .card { background: var(--surface) !important; border-color: var(--line) !important; color: var(--text); } .card-header { background: var(--bg-2) !important; border-bottom-color: var(--line) !important; color: var(--text) !important; font-family: var(--font-ui); } .card-body { color: var(--text); } .card.shadow-sm { box-shadow: var(--shadow) !important; } /* Tables */ .table { color: var(--text) !important; --bs-table-bg: var(--surface); --bs-table-border-color: var(--line); --bs-table-striped-bg: var(--bg-2); --bs-table-hover-bg: var(--surface-2); font-family: var(--font-ui); font-size: 13px; } .table th { font-family: var(--font-mono) !important; font-size: 10px !important; letter-spacing: 0.18em !important; text-transform: uppercase; color: var(--text-mute) !important; font-weight: 500 !important; background: var(--bg-2); border-bottom-color: var(--line) !important; padding: 13px 16px !important; } .table td { border-bottom-color: var(--line) !important; padding: 14px 16px !important; vertical-align: middle; } .table-hover tbody tr:hover > * { background-color: var(--surface-2) !important; color: var(--text) !important; } .table-striped > tbody > tr:nth-of-type(odd) > * { background-color: var(--bg-2) !important; } /* Forms */ .form-control, .form-select { background-color: var(--surface-2) !important; border-color: var(--line) !important; color: var(--text) !important; font-family: var(--font-ui); } .form-control:focus, .form-select:focus { border-color: var(--gilt) !important; box-shadow: 0 0 0 3px var(--gilt-soft) !important; background-color: var(--surface) !important; } .form-label { font-family: var(--font-ui); font-size: 11px; font-weight: 600; letter-spacing: 0.06em; color: var(--text-dim); text-transform: uppercase; } .form-check-input:checked { background-color: var(--gilt) !important; border-color: var(--gilt) !important; } .form-check-label { color: var(--text-dim); } /* Buttons */ .btn-primary { background-color: var(--gilt) !important; border-color: var(--gilt) !important; color: var(--noir) !important; font-family: var(--font-ui); font-weight: 600; letter-spacing: -0.005em; } .btn-primary:hover { background-color: var(--gilt-2) !important; border-color: var(--gilt-2) !important; } .btn-outline-primary { border-color: var(--gilt) !important; color: var(--gilt) !important; } .btn-outline-primary:hover { background-color: var(--gilt) !important; color: var(--noir) !important; } .btn-outline-secondary { border-color: var(--line-2) !important; color: var(--text-dim) !important; } .btn-outline-secondary:hover { border-color: var(--text-mute) !important; background-color: var(--surface-2) !important; color: var(--text) !important; } .btn { font-family: var(--font-ui); font-weight: 600; letter-spacing: -0.005em; } /* Alerts */ .alert { border-radius: 6px; font-family: var(--font-ui); } .alert-success { background-color: var(--good-soft) !important; color: var(--good) !important; border-color: var(--good) !important; } .alert-danger { background-color: var(--bad-soft) !important; color: var(--bad) !important; border-color: var(--bad) !important; } .alert-warning { background-color: var(--warn-soft) !important; color: var(--warn) !important; border-color: var(--warn) !important; } .alert-info { background-color: rgba(92,184,255,0.10) !important; color: var(--signal) !important; border-color: var(--signal) !important; } /* Badges */ .badge.bg-success { background: var(--good-soft) !important; color: var(--good) !important; } .badge.bg-danger { background: var(--bad-soft) !important; color: var(--bad) !important; } .badge.bg-warning { background: var(--warn-soft) !important; color: var(--warn) !important; } .badge.bg-info { background: rgba(92,184,255,0.10) !important; color: var(--signal) !important; } .badge.bg-secondary { background: var(--surface-2) !important; color: var(--text-mute) !important; } .badge.bg-primary { background: var(--gilt-soft) !important; color: var(--gilt) !important; } .badge { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; font-weight: 500; } /* Pagination */ .page-link { background-color: var(--surface) !important; border-color: var(--line) !important; color: var(--text-dim) !important; font-family: var(--font-mono); font-size: 11px; } .page-link:hover { background-color: var(--surface-2) !important; color: var(--text) !important; } .page-item.active .page-link { background-color: var(--gilt) !important; border-color: var(--gilt) !important; color: var(--noir) !important; } /* Dropdowns */ .dropdown-menu { background-color: var(--surface) !important; border-color: var(--line) !important; } .dropdown-item { color: var(--text-dim) !important; font-family: var(--font-ui); } .dropdown-item:hover { background-color: var(--surface-2) !important; color: var(--text) !important; } /* Modal */ .modal-content { background-color: var(--surface) !important; border-color: var(--line) !important; color: var(--text); } .modal-header { border-bottom-color: var(--line) !important; } .modal-footer { border-top-color: var(--line) !important; } .btn-close { filter: invert(1); } [data-theme="light"] .btn-close { filter: none; } /* Breadcrumbs */ .breadcrumb-item a { color: var(--gilt) !important; } .breadcrumb-item.active { color: var(--text-mute) !important; } /* Text helpers */ .text-muted { color: var(--text-mute) !important; } .text-secondary { color: var(--text-dim) !important; } .text-success { color: var(--good) !important; } .text-danger { color: var(--bad) !important; } .text-warning { color: var(--warn) !important; } .text-primary { color: var(--gilt) !important; } .text-info { color: var(--signal) !important; } .text-dark { color: var(--text) !important; } /* Background helpers */ .bg-light { background-color: var(--bg-2) !important; } .bg-dark { background-color: var(--noir) !important; } .bg-body { background-color: var(--bg) !important; } /* Accordion */ .accordion-button { background-color: var(--surface) !important; color: var(--text) !important; font-family: var(--font-ui); } .accordion-button:not(.collapsed) { background-color: var(--surface-2) !important; color: var(--text) !important; } .accordion-button::after { filter: invert(0.7); } [data-theme="light"] .accordion-button::after { filter: none; } .accordion-body { background-color: var(--surface) !important; color: var(--text); } .accordion-item { background-color: var(--surface) !important; border-color: var(--line) !important; } /* Nav pills/tabs */ .nav-tabs { border-bottom-color: var(--line) !important; } .nav-tabs .nav-link { color: var(--text-dim) !important; font-family: var(--font-ui); font-weight: 500; } .nav-tabs .nav-link:hover { border-color: var(--line-2) !important; } .nav-tabs .nav-link.active { background-color: var(--surface) !important; border-color: var(--line) var(--line) var(--surface) !important; color: var(--text) !important; } /* Progress bars */ .progress { background-color: var(--line) !important; } .progress-bar { background-color: var(--gilt) !important; } /* Container */ .container-fluid { background-color: var(--bg); } /* ========== Typography ========== */ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: var(--font-display); color: var(--text); letter-spacing: -0.02em; } h1, .h1 { font-weight: 600; } h2, .h2 { font-weight: 600; } h3, .h3 { font-weight: 600; } h4, .h4 { font-family: var(--font-ui); font-weight: 600; } h5, .h5 { font-family: var(--font-ui); font-weight: 600; } h6, .h6 { font-family: var(--font-ui); font-weight: 600; } /* ========== Flight Deck utilities ========== */ .eyebrow { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gilt); font-weight: 500; } .eyebrow-inline { display: inline-flex; align-items: center; gap: 6px; } .eyebrow-inline::before { content: "//"; color: var(--text-faint); font-weight: 400; } .chip { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; padding: 4px 9px; border-radius: 3px; font-weight: 500; } .chip::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; } .chip.ok { color: var(--good); background: var(--good-soft); } .chip.warn { color: var(--warn); background: var(--warn-soft); } .chip.bad { color: var(--bad); background: var(--bad-soft); } .chip.due { color: var(--warn); background: var(--warn-soft); } .chip.paid { color: var(--good); background: var(--good-soft); } .chip.posted{ color: var(--text-mute); background: var(--bg-2); } .chip.gilt { color: var(--gilt); background: var(--gilt-soft); } .tail-num { font-family: var(--font-mono); font-size: 11.5px; color: var(--gilt); background: var(--gilt-soft); padding: 3px 8px; border-radius: 3px; letter-spacing: 0.06em; font-weight: 500; display: inline-block; } .figure { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; line-height: 1; } .figure .c { color: var(--text-mute); font-weight: 500; } .num-tabular { font-variant-numeric: tabular-nums; } /* ========== App shell ========== */ .fd-app { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; background: var(--bg); } /* ========== Sidebar ========== */ .fd-sidebar { background: var(--bg-2); border-right: 1px solid var(--line); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto; } [data-theme="light"] .fd-sidebar { background: var(--surface); } .fd-sb-mark { padding: 18px 20px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: center; } .fd-sb-mark-link { display: block; text-decoration: none; } .fd-sb-logo-img { height: 32px; width: auto; display: block; margin: 0 auto; } .fd-sb-logo-dark { display: block; } .fd-sb-logo-light { display: none; } [data-theme="light"] .fd-sb-logo-dark { display: none; } [data-theme="light"] .fd-sb-logo-light { display: block; } .fd-sb-nav { padding: 14px 0; flex: 1; overflow-y: auto; display: flex; flex-direction: column; } .fd-sb-grp { padding: 14px 24px 6px; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-faint); font-weight: 500; } .fd-sb-link { display: flex; align-items: center; gap: 12px; padding: 9px 24px; color: var(--text-dim); font-size: 13.5px; font-family: var(--font-ui); font-weight: 500; position: relative; text-decoration: none; letter-spacing: -0.005em; transition: all 0.1s; } .fd-sb-link:hover { color: var(--text); background: var(--surface-2); } .fd-sb-link.active { color: var(--text); background: var(--gilt-soft); } .fd-sb-link.active::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--gilt); } .fd-sb-link i { font-size: 14px; color: var(--text-mute); width: 14px; text-align: center; } .fd-sb-link.active i { color: var(--gilt); } .fd-sb-badge { margin-left: auto; font-family: var(--font-mono); font-size: 9.5px; color: var(--warn); background: var(--warn-soft); padding: 2px 7px; border-radius: 3px; letter-spacing: 0.06em; font-weight: 500; } .fd-sb-sub-nav { padding-left: 0; } .fd-sb-sub-link { padding-left: 40px !important; font-size: 12.5px !important; } .fd-sb-sub-link .tail-num-inline { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; } .fd-sb-toggle { cursor: pointer; } .fd-sb-toggle .fd-sb-chevron { font-size: 9px; transition: transform 0.2s; width: 10px !important; margin-right: -4px; } .fd-sb-toggle[aria-expanded="true"] .fd-sb-chevron { transform: rotate(90deg); } .fd-sb-foot { padding: 14px 24px; border-top: 1px solid var(--line); display: flex; align-items: center; gap: 10px; } .fd-sb-avatar { width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, var(--surface-2), var(--bg)); border: 1px solid var(--line-2); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 12px; font-weight: 600; color: var(--text); flex-shrink: 0; } .fd-sb-user { flex: 1; min-width: 0; } .fd-sb-user strong { display: block; color: var(--text); font-size: 13px; font-weight: 500; font-family: var(--font-ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fd-sb-user span { font-family: var(--font-mono); font-size: 9.5px; color: var(--text-mute); letter-spacing: 0.06em; } /* ========== Main area ========== */ .fd-main-wrap { display: flex; flex-direction: column; min-width: 0; } .fd-main { padding: 28px 44px 64px; flex: 1; } /* ========== Topbar ========== */ .fd-topbar { display: flex; justify-content: space-between; align-items: center; padding: 12px 44px; border-bottom: 1px solid var(--line); background: var(--bg); gap: 20px; } .fd-topbar-left { font-family: var(--font-mono); font-size: 11px; color: var(--text-mute); letter-spacing: 0.14em; text-transform: uppercase; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .fd-live { color: var(--good); display: inline-flex; align-items: center; gap: 6px; } .fd-live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--good); box-shadow: 0 0 6px var(--good); animation: fd-pulse 2s infinite; display: inline-block; } @keyframes fd-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } } .fd-sep { color: var(--text-faint); } .fd-topbar-right { display: flex; gap: 8px; align-items: center; } .fd-theme-toggle { display: inline-flex; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; background-color: var(--surface-2); } .fd-theme-toggle .theme-toggle-btn { border: 0; background: transparent; padding: 0 12px; height: 34px; color: var(--text-mute); font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 500; cursor: pointer; } .fd-icon-btn { width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 6px; display: flex; align-items: center; justify-content: center; color: var(--text-dim); font-size: 14px; background-color: var(--surface-2); cursor: pointer; transition: all 0.12s; } .fd-icon-btn:hover { color: var(--text); border-color: var(--line-2); } .fd-impersonate-form { display: inline-flex; } .fd-impersonate-select { background: var(--surface-2); border: 1px solid var(--line); border-radius: 6px; color: var(--text-dim); font-family: var(--font-ui); font-size: 12px; padding: 6px 10px; height: 34px; } .fd-impersonate-bar { background: var(--warn-soft); color: var(--warn); text-align: center; padding: 6px 44px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; } .fd-impersonate-stop { background: var(--noir); color: var(--text); border: 1px solid var(--line-2); border-radius: 4px; font-family: var(--font-ui); font-size: 11px; padding: 2px 10px; cursor: pointer; margin-left: 8px; } .fd-dev-badge { position: fixed; top: 10px; right: 10px; z-index: 9999; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.14em; color: var(--warn); background: var(--warn-soft); padding: 3px 10px; border-radius: 4px; pointer-events: none; } /* ========== Theme toggle ========== */ .theme-toggle-btn.active { background: var(--gilt-soft) !important; color: var(--gilt) !important; } /* ========== Dev bar restyle ========== */ [style*="background:#ff6b00"] { background: var(--surface-2) !important; color: var(--warn) !important; font-family: var(--font-mono) !important; font-size: 10px !important; letter-spacing: 0.14em !important; padding: 4px 0 !important; font-weight: 500 !important; } /* ========== Impersonation bar ========== */ .bg-warning.text-dark.text-center { background: var(--warn-soft) !important; color: var(--warn) !important; font-family: var(--font-mono) !important; font-size: 10px !important; letter-spacing: 0.12em !important; } /* ========== Status badges (existing) ========== */ .status-badge { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; font-weight: 500; } .status-badge.pending, .status-badge.pending_approval, .status-badge.pending_additional { background: var(--warn-soft) !important; color: var(--warn) !important; } .status-badge.approved, .status-badge.completed { background: var(--good-soft) !important; color: var(--good) !important; } .status-badge.denied, .status-badge.cancelled { background: var(--bad-soft) !important; color: var(--bad) !important; } .status-badge.draft, .status-badge.billed { background: var(--surface-2) !important; color: var(--text-mute) !important; } .status-badge.in_progress { background: rgba(92,184,255,0.10) !important; color: var(--signal) !important; } /* Category badges */ .category-badge.airworthiness { background: var(--bad-soft) !important; color: var(--bad) !important; } .category-badge.recommended { background: var(--warn-soft) !important; color: var(--warn) !important; } .category-badge.elective { background: var(--good-soft) !important; color: var(--good) !important; } /* ========== Stat cards ========== */ .stat-card { background: var(--surface) !important; border: 1px solid var(--line) !important; border-left: 4px solid !important; } .stat-card.income { border-left-color: var(--good) !important; } .stat-card.expense { border-left-color: var(--bad) !important; } .stat-card.balance { border-left-color: var(--gilt) !important; } .stat-card.documents { border-left-color: var(--text-mute) !important; } /* ========== Track stepper reskin ========== */ .track-stepper { background: var(--surface) !important; border-color: var(--line) !important; } .track-stepper-label { color: var(--text-dim) !important; } .track-stepper .step { background: var(--surface) !important; color: var(--text-mute) !important; border-color: var(--line) !important; } .track-stepper .step:hover { background: var(--surface-2) !important; color: var(--text) !important; border-color: var(--line-2) !important; } .track-stepper .step.active { background: var(--gilt) !important; color: var(--noir) !important; border-color: var(--gilt) !important; box-shadow: 0 0 0 2px var(--gilt-soft) !important; } .track-stepper .step.completed { background: var(--good-soft) !important; color: var(--good) !important; border-color: var(--good) !important; } .track-stepper .step.na { background: var(--bad-soft) !important; color: var(--bad) !important; border-color: var(--bad) !important; } .track-stepper .step.cancelled { background: var(--bad) !important; color: #fff !important; border-color: var(--bad) !important; } .track-stepper .step.cancel-step, .track-stepper .step.na-step { background: var(--surface) !important; color: var(--text-faint) !important; border-color: var(--line) !important; border-left-style: dashed !important; } .track-stepper .step.cancel-step:hover { color: var(--bad) !important; background: var(--bad-soft) !important; } /* ========== Scrollbars ========== */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: var(--bg-2); } ::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 5px; border: 2px solid var(--bg-2); } ::-webkit-scrollbar-thumb:hover { background: var(--text-faint); } /* ========== Flight Deck cards & gauges ========== */ .fd-card { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; position: relative; overflow: hidden; } [data-theme="dark"] .fd-card-elevated::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--hairline); pointer-events: none; } .fd-gauge-lbl { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.16em; color: var(--text-mute); text-transform: uppercase; margin-bottom: 6px; } .fd-gauge-val { font-family: var(--font-display); font-size: 22px; font-weight: 600; color: var(--text); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1; } .fd-gauge-unit { font-size: 11px; color: var(--text-mute); font-weight: 400; margin-left: 2px; } .fd-bar { height: 4px; background: var(--line); border-radius: 2px; margin-top: 7px; overflow: hidden; position: relative; } .fd-bar-fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--gilt); border-radius: 2px; transition: width 0.4s; } .fd-bar.warn .fd-bar-fill { background: var(--warn); } .fd-bar.bad .fd-bar-fill { background: var(--bad); } .fd-bar.good .fd-bar-fill { background: var(--good); } /* ========== Hub pages (admin + billing) ========== */ .fd-hub-tile:hover { border-color: var(--gilt) !important; } .fd-hub-row { display: flex; justify-content: space-between; align-items: center; padding: 11px 24px; border-bottom: 1px solid var(--line); font-family: var(--font-ui); font-size: 13px; font-weight: 500; color: var(--text-dim); text-decoration: none; transition: all 0.1s; } .fd-hub-row:last-child { border-bottom: 0; } .fd-hub-row:hover { background: var(--surface-2); color: var(--text); } .fd-hub-row i { font-size: 13px; } .fd-hub-count { font-family: var(--font-mono); font-size: 11px; color: var(--text-mute); letter-spacing: 0.04em; font-variant-numeric: tabular-nums; } /* ========== Responsive grid utility classes (desktop) ========== */ .fd-grid-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .fd-grid-3col { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .fd-grid-hud-3 { display: grid; grid-template-columns: 1.4fr 1fr 1fr; } .fd-grid-hud-4 { display: grid; grid-template-columns: repeat(4, 1fr); } .fd-grid-5col-strip { display: grid; grid-template-columns: repeat(5, 1fr); } .fd-grid-wo-detail { display: grid; grid-template-columns: 1.5fr 1fr; gap: 18px; align-items: start; } .fd-grid-fleet { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .fd-grid-approval-row { display: grid; grid-template-columns: auto 1fr auto auto auto; gap: 16px; align-items: center; } .fd-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* Hamburger (hidden on desktop) */ .fd-hamburger { display: none; } /* Sidebar backdrop (hidden by default) */ .fd-sidebar-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 1040; } /* Sidebar close button (hidden on desktop) */ .fd-sidebar-close { display: none; } /* ========== Mobile: 768px ========== */ @media (max-width: 768px) { /* App shell — single column */ .fd-app { grid-template-columns: 1fr; } /* Sidebar — hidden, overlay when open */ .fd-sidebar { display: none; position: fixed; top: 0; left: 0; bottom: 0; width: 280px; z-index: 1050; overflow-y: auto; } body.fd-sidebar-open .fd-sidebar { display: flex; } body.fd-sidebar-open .fd-sidebar-backdrop { display: block; } body.fd-sidebar-open { overflow: hidden; } /* Sidebar close button */ .fd-sidebar-close { display: flex; position: absolute; top: 18px; right: 16px; z-index: 10; } /* Hamburger — visible */ .fd-hamburger { display: flex; } /* Topbar — compact */ .fd-topbar { padding: 10px 16px; } .fd-clock, .fd-sep { display: none; } .fd-topbar-left > span:not(.fd-live) { display: none; } .fd-impersonate-form { display: none; } /* Main content — reduced padding */ .fd-main { padding: 20px 16px 64px; } /* Dev badge — reposition */ .fd-dev-badge { top: auto; bottom: 10px; right: 10px; } /* Impersonation bar */ .fd-impersonate-bar { padding: 6px 16px; font-size: 9px; } /* All grids stack */ .fd-grid-2col, .fd-grid-3col, .fd-grid-hud-3, .fd-grid-hud-4, .fd-grid-5col-strip, .fd-grid-wo-detail, .fd-grid-fleet { grid-template-columns: 1fr !important; } /* Approval queue rows — stack */ .fd-grid-approval-row { grid-template-columns: 1fr !important; gap: 8px !important; padding: 16px !important; } /* Work order right rail — unstick */ .fd-grid-wo-detail > *:last-child { position: static !important; } /* Gauge cards — 2 columns on tablet, will go 1 on phone */ .fd-grid-gauges { grid-template-columns: 1fr 1fr !important; } /* Cards with border-right dividers — remove on stack */ .fd-grid-hud-3 > *, .fd-grid-hud-4 > *, .fd-grid-5col-strip > * { border-right: none !important; border-bottom: 1px solid var(--line); } .fd-grid-hud-3 > *:last-child, .fd-grid-hud-4 > *:last-child, .fd-grid-5col-strip > *:last-child { border-bottom: none; } /* Page titles — smaller */ .h-display, h1[style*="font-size:32px"], h1[style*="font-size:36px"] { font-size: 26px !important; } /* Sidebar mark — relative for close button */ .fd-sb-mark { position: relative; } /* Tables — ensure scroll */ .table { font-size: 12px !important; } } /* ========== Small phone: 480px ========== */ @media (max-width: 480px) { .fd-gauge-val { font-size: 18px !important; } .fd-topbar-right .fd-theme-toggle { display: none; } .figure { font-size: 36px !important; } .figure .c { font-size: 20px !important; } } /* ========== Print — preserve existing + add fonts ========== */ @media print { body { font-family: var(--font-body) !important; } h1, h2, h3, .figure { font-family: var(--font-display) !important; } .tail-num, .num-tabular, code { font-family: var(--font-mono) !important; } } /* ======================================================================== PWA standalone mode (Add to Home Screen launch). Hide the 240px sidebar by default, collapse the grid, slim down the topbar. The hamburger button (.fd-hamburger in fd-topbar) toggles a body class to show the sidebar on demand. Desktop browser experience is unaffected. The wizard (.ob-wiz) and done (.ob-done) screens have their own rules and keep working as before. ======================================================================== */ @media all and (display-mode: standalone) { .fd-app { grid-template-columns: 1fr; } .fd-sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: 240px; transform: translateX(-100%); z-index: 200; transition: transform .18s ease-out; box-shadow: 0 0 24px rgba(0,0,0,.18); } body.fd-sidebar-open .fd-sidebar { transform: translateX(0); } body.fd-sidebar-open .fd-sidebar-backdrop { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 199; } .fd-hamburger { display: inline-flex !important; } .fd-topbar { padding: 8px 16px; } /* Safe-area insets for notch / home-indicator */ .fd-topbar { padding-top: max(8px, env(safe-area-inset-top)); } .fd-main { padding-bottom: max(28px, env(safe-area-inset-bottom)); } }