/* Part 145 Maintenance System — design system. Hand-written on purpose: no build step, no toolchain to break, nothing to install. Change colours in one place (the :root block) and the whole app follows. */ :root { /* Capital Air brand system — navy dominant, grey neutral, red as a disciplined accent. Change values here and the whole app follows. */ --bg: #f4f6f9; --surface: #ffffff; --surface-2: #eef1f6; /* subtle raised/again-surface, e.g. table headers, insets */ --border: #e2e7ee; --border-strong: #d2dae4; --text: #1b2733; --text-muted: #5a6675; --text-faint: #8894a2; /* Primary = Capital Air navy. */ --primary: #12315c; --primary-dark: #0e2647; --primary-light: #e7edf6; /* navy tint for hovers/insets/active */ --primary-tint: #f2f6fb; /* barely-there navy wash */ /* Deep-navy scale for the sidebar shell + the red accent. */ --navy-deep: #0e2647; --navy-2: #183a66; --navy-line: #294d7c; --red: #c41e2a; /* brand accent — mark, active indicator, danger */ --red-soft: #fbe9ea; --ok: #1f9d57; --ok-light: #e6f5ec; --warn: #c77d14; --warn-light: #fbf0dd; --danger: #c41e2a; --danger-light: #fbe9ea; --neutral: #5a6675; --neutral-light: #eef1f6; /* Area accents — each functional area carries a muted, distinct colour so the app reads as varied, not monochrome navy. Applied to hub tiles, section headers and small accents. */ --a-fleet: #31659e; --a-fleet-tint: #e9eff8; --a-stores: #1f7f77; --a-stores-tint: #e1f0ee; --a-quality: #b07a22; --a-quality-tint: #f6ecd7; --a-people: #5a55a6; --a-people-tint: #ebeaf6; --a-commercial: #2f8355; --a-commercial-tint: #e3f1e9; --a-setup: #566575; --a-setup-tint: #eceff3; --radius: 9px; --radius-sm: 6px; --radius-lg: 12px; /* Layered, low-contrast elevation — depth without heaviness. */ --shadow-sm: 0 1px 2px rgba(16, 32, 50, 0.04); --shadow: 0 1px 2px rgba(16, 32, 50, 0.04), 0 6px 20px rgba(16, 32, 50, 0.06); --shadow-md: 0 2px 6px rgba(16, 32, 50, 0.06), 0 8px 26px rgba(16, 32, 50, 0.08); --shadow-lg: 0 12px 40px rgba(16, 32, 50, 0.14); --ring: 0 0 0 3px var(--primary-light); /* Spacing scale — one rhythm the whole app snaps to. */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --transition: 0.15s ease; --font: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --mono: "IBM Plex Mono", ui-monospace, "Cascadia Code", Consolas, monospace; color-scheme: light; } /* ---- DARK THEME ------------------------------------------------------------------ The initial theme is set on by an inline script in base.html (saved choice → OS preference → light), so there's no flash. Because the whole app reads these tokens, redefining their VALUES here flips every screen at once. The navy shell stays navy (it's the brand); only the neutrals, text and elevation change. */ :root[data-theme="dark"] { color-scheme: dark; --bg: #0c1420; --surface: #131f2e; --surface-2: #1b2a3a; --border: #26374a; --border-strong: #33475e; --text: #e7eef6; --text-muted: #9aabbd; --text-faint: #6d7f92; --primary: #5488c9; /* navy lightened so links/accents stay legible on dark */ --primary-dark: #6d9ed7; /* hover goes LIGHTER in dark */ --primary-light: #1a2e48; /* dark navy tint for insets / active rows */ --primary-tint: #142132; --navy-deep: #0a1524; /* the sidebar shell — a touch deeper than content */ --navy-2: #18324f; --navy-line: #26426b; --red: #e05561; --red-soft: #3a2029; --ok: #3fbb77; --ok-light: #123122; --warn: #d69a3f; --warn-light: #2e2614; --danger: #e05561; --danger-light: #3a2029; --neutral: #9aabbd; --neutral-light: #1b2a3a; --a-fleet: #5b93d0; --a-fleet-tint: #152840; --a-stores: #3fada2; --a-stores-tint: #0f2a27; --a-quality: #d5a34a; --a-quality-tint: #2c2413; --a-people: #8b86d6; --a-people-tint: #1f1d3a; --a-commercial: #4cae76; --a-commercial-tint: #122a1d; --a-setup: #8494a6; --a-setup-tint: #1b2a3a; --shadow-sm: 0 1px 2px rgba(0,0,0,.45); --shadow: 0 1px 2px rgba(0,0,0,.45), 0 8px 24px rgba(0,0,0,.5); --shadow-md: 0 2px 6px rgba(0,0,0,.5), 0 12px 30px rgba(0,0,0,.55); --shadow-lg: 0 16px 44px rgba(0,0,0,.6); --ring: 0 0 0 3px rgba(84,136,201,.35); } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font); font-size: 14px; line-height: 1.55; color: var(--text); background: radial-gradient(1100px 320px at 84% -8%, color-mix(in srgb, var(--primary) 8%, transparent), transparent 66%), var(--bg); background-attachment: fixed; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } @media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } } ::selection { background: rgba(18, 49, 92, 0.16); } /* Skip link — the first thing a keyboard user reaches, so they can jump the nav. Off-screen until focused, then anchored top-left. */ .skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--primary); color: #fff; padding: 10px 16px; border-radius: 0 0 var(--radius) 0; font-weight: 600; text-decoration: none; box-shadow: var(--shadow-md); } .skip-link:focus { left: 0; } /* The main region is a script-free focus target for the skip link; no focus ring needed on it. */ main:focus { outline: none; } /* Bare links (outside tables/nav) get the primary colour and a tidy hover. */ main a { color: var(--primary); text-decoration-color: rgba(18, 49, 92, 0.35); text-underline-offset: 2px; } main a:hover { color: var(--primary-dark); } h1, h2, h3 { text-wrap: balance; } /* --- App shell: left sidebar + main column ----------------------------- */ .layout { display: flex; min-height: 100vh; align-items: stretch; } .sidebar { width: 242px; flex: none; z-index: 30; background: var(--navy-deep); border-right: 1px solid var(--navy-line); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto; } .sidebar::-webkit-scrollbar { width: 8px; } .sidebar::-webkit-scrollbar-thumb { background: var(--navy-line); border-radius: 8px; } .sb-brand { padding: 16px 18px 15px; border-bottom: 1px solid var(--navy-line); } .sb-brand a { display: flex; align-items: center; gap: 11px; text-decoration: none; color: #fff; } .sb-brand .mark { width: 36px; height: 36px; border-radius: 9px; background: #0a1e3a; display: grid; place-items: center; flex: none; } .sb-brand .mark svg { width: 21px; height: 21px; display: block; } .sb-brand .bn { font-weight: 700; font-size: 15px; letter-spacing: 0.2px; display: block; color: #fff; } .sb-brand .bn .air { color: #9db4d4; } .sb-brand small { display: block; font-weight: 500; font-size: 9.5px; letter-spacing: 0.6px; text-transform: uppercase; color: #89a0c0; margin-top: 3px; } .sb-nav { flex: 1; padding: 10px 11px 20px; display: flex; flex-direction: column; gap: 1px; } .sb-group { font-size: 10px; font-weight: 700; letter-spacing: 0.7px; text-transform: uppercase; color: #7c93b4; margin: 15px 10px 5px; display: flex; align-items: center; justify-content: space-between; cursor: pointer; user-select: none; } .sb-group:hover { color: #9db4d4; } .sb-group .chev { opacity: 0.5; font-size: 10px; transition: transform var(--transition); } .grp.collapsed .chev { transform: rotate(-90deg); } .grp.collapsed .sb-link { display: none; } .sb-link { display: flex; align-items: center; gap: 10px; padding: 7px 11px; border-radius: 8px; text-decoration: none; color: #bac8dc; font-size: 13px; font-weight: 500; border-left: 3px solid transparent; margin-left: -3px; transition: background var(--transition), color var(--transition), border-color var(--transition); } .sb-link .dot { width: 6px; height: 6px; border-radius: 50%; background: #4a628a; flex: none; } .sb-link .sb-ico { width: 16px; height: 16px; text-align: center; color: #93a6bf; opacity: 0.85; flex: none; } .sb-link .sb-ico svg { width: 16px; height: 16px; display: block; } .sb-link:hover { background: var(--navy-2); color: #eaf1f9; } .sb-link:hover .dot { background: #7c93b4; } .sb-link.active { background: var(--navy-2); color: #fff; font-weight: 600; border-left-color: var(--red); } .sb-link.active .dot { background: var(--red); } .sb-link.active .sb-ico { opacity: 1; color: #cfe0f5; } .sb-home.active { border-left-color: var(--red); } /* count badge on a nav item */ .sb-link .sb-count { margin-left: auto; background: var(--navy-line); color: #cfe0f5; font-size: 10.5px; font-weight: 600; padding: 1px 7px; border-radius: 20px; font-family: var(--mono); } .sb-link .sb-count.alert { background: var(--red); color: #fff; } .main { flex: 1; min-width: 0; display: flex; flex-direction: column; } .topstrip { display: flex; align-items: center; gap: 12px; height: 46px; padding: 0 20px; z-index: 20; background: var(--surface); border-bottom: 1px solid var(--border); position: sticky; top: 0; } .topstrip .ts-spacer { flex: 1; } .topstrip .ts-back { display: inline-flex; align-items: center; gap: 5px; flex: none; font: inherit; font-size: 13px; font-weight: 500; color: var(--text-muted); background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 5px 11px; cursor: pointer; transition: color var(--transition), border-color var(--transition), background var(--transition); } .topstrip .ts-back:hover { color: var(--primary); border-color: var(--primary); background: var(--surface-2); } .topstrip .ts-back span { font-size: 15px; line-height: 1; } .topstrip .theme-toggle { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border: 1px solid var(--border); background: var(--surface); border-radius: var(--radius-sm); color: var(--text-muted); cursor: pointer; transition: color var(--transition), border-color var(--transition), background var(--transition); } .topstrip .theme-toggle:hover { color: var(--primary); border-color: var(--primary); background: var(--surface-2); } .topstrip .theme-toggle svg { width: 17px; height: 17px; } .topstrip .theme-toggle .ic-sun { display: none; } :root[data-theme="dark"] .topstrip .theme-toggle .ic-moon { display: none; } :root[data-theme="dark"] .topstrip .theme-toggle .ic-sun { display: block; } .topstrip .crumb { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--text-muted); min-width: 0; } .topstrip .crumb a { color: var(--text-muted); text-decoration: none; font-weight: 500; } .topstrip .crumb a:hover { color: var(--primary); } .topstrip .crumb .sep { color: var(--text-faint); } .topstrip .crumb .grp { white-space: nowrap; } .topstrip .crumb .cur { color: var(--text); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .topstrip .user { font-size: 13px; color: var(--text-muted); white-space: nowrap; display: flex; align-items: center; gap: 8px; } .topstrip .user .me { color: var(--text); font-weight: 500; } .topstrip .user a { color: var(--primary); text-decoration: none; font-weight: 600; } .topstrip .user a:hover { text-decoration: underline; } .topstrip .user .ro-tag { font-size: 10.5px; font-weight: 700; letter-spacing: 0.3px; text-transform: uppercase; background: var(--warn-light); color: var(--warn); border-radius: 10px; padding: 1px 8px; } .menu-toggle { display: none; background: none; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); font-size: 16px; line-height: 1; padding: 5px 9px; cursor: pointer; color: var(--text); } .sb-overlay { display: none; } @media (max-width: 900px) { .sidebar { position: fixed; left: 0; top: 0; transform: translateX(-100%); transition: transform 0.2s ease; box-shadow: var(--shadow-lg); } body.sb-open .sidebar { transform: translateX(0); } .menu-toggle { display: inline-flex; align-items: center; } .sb-overlay { position: fixed; inset: 0; background: rgba(16, 24, 40, 0.4); z-index: 25; } body.sb-open .sb-overlay { display: block; } } /* --- Layout (legacy top bar, retained for reference) ------------------- */ .topbar { background: var(--primary-dark); color: #fff; padding: 0 20px; display: flex; align-items: center; gap: 28px; height: 52px; box-shadow: var(--shadow); } .topbar .brand { font-weight: 600; font-size: 15px; letter-spacing: 0.2px; white-space: nowrap; } .topbar .brand small { display: block; font-weight: 400; font-size: 11px; opacity: 0.75; letter-spacing: 0; } .topbar nav { display: flex; align-items: center; gap: 2px; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; } .topbar nav::-webkit-scrollbar { display: none; } .topbar nav a { color: rgba(255, 255, 255, 0.82); text-decoration: none; padding: 6px 11px; border-radius: var(--radius); font-weight: 500; white-space: nowrap; transition: background var(--transition), color var(--transition); } .topbar nav a:hover { background: rgba(255, 255, 255, 0.12); color: #fff; } .topbar nav a.active { background: rgba(255, 255, 255, 0.20); color: #fff; font-weight: 600; } /* Thin rule between module groups — the modules read as distinct clusters. */ .topbar .nav-sep { flex: none; width: 1px; height: 20px; background: rgba(255, 255, 255, 0.18); margin: 0 7px; } .topbar .user { font-size: 13px; opacity: 0.9; white-space: nowrap; } .topbar .user .ro-tag { font-size: 10.5px; font-weight: 600; letter-spacing: 0.3px; text-transform: uppercase; background: rgba(255, 255, 255, 0.16); border-radius: 10px; padding: 1px 8px; margin-left: 8px; } .topbar .user a { color: #fff; text-decoration: underline; margin-left: 10px; } .container { max-width: 1200px; margin: 0 auto; padding: 24px 20px 60px; } /* Dashboard-style pages (the role cockpit, State of the AMO) breathe wider so panels lay out 3-across instead of being boxed into the reading column. */ .container.container-wide { max-width: 1600px; } .page-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 22px; } .page-head h1 { margin: 0; font-size: 22px; font-weight: 650; letter-spacing: -0.01em; line-height: 1.2; text-wrap: balance; } .page-head .sub { color: var(--text-muted); font-size: 13px; margin-top: 3px; max-width: 70ch; } .page-actions { display: flex; gap: 8px; flex-wrap: wrap; } /* --- Cards ------------------------------------------------------------- */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow); margin-bottom: 20px; } .card-head { padding: 13px 18px; border-bottom: 1px solid var(--border); font-weight: 600; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.6px; color: var(--text-muted); background: var(--surface-2); border-radius: var(--radius-lg) var(--radius-lg) 0 0; } .card-body { padding: 18px; } .grid { display: grid; gap: 16px; } .grid-5 { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } .grid-4 { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); } .grid-3 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } .grid-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } .stat { text-align: left; } .stat .value { font-size: 30px; font-weight: 650; line-height: 1.1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } .stat .label { color: var(--text-muted); font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.5px; margin-top: 5px; } /* A stat value carrying a status signal — the eye's landing spot on a scoreboard. */ .stat .value.is-danger { color: var(--danger); } .stat .value.is-warn { color: var(--warn); } .stat .value.is-ok { color: var(--ok); } /* A card that is click-through to the section it summarises. */ a.card { display: block; color: inherit; text-decoration: none; transition: border-color var(--transition), box-shadow var(--transition); } a.card:hover { border-color: var(--primary); } /* Anchored section cards must clear the sticky topstrip + focusbar when jumped to. */ .card[id] { scroll-margin-top: 104px; } /* A card-head that carries a right-aligned count/status (e.g. "3 due soon"). */ .card-head.with-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .card-head.with-meta .badge { text-transform: none; letter-spacing: 0.2px; } /* A quiet drill-down footer strip — retires the ad-hoc inline text-transform link hacks. */ .card-foot { padding: 11px 18px; border-top: 1px solid var(--border); font-size: 12.5px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; } .card-foot a { color: var(--primary); text-decoration: none; font-weight: 600; } .card-foot a:hover { text-decoration: underline; } /* --- Evidence attachments (photos / PDFs on a record) ------------------ */ .evidence-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; margin-bottom: 16px; } .evidence-item { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--surface-2); display: flex; flex-direction: column; } .evidence-item img { width: 100%; height: 112px; object-fit: cover; display: block; background: var(--surface); } .evidence-doc { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; height: 112px; text-decoration: none; color: var(--primary); font-size: 22px; text-align: center; padding: 8px; } .evidence-doc span { font-size: 11.5px; word-break: break-word; } .evidence-meta { padding: 8px 10px; font-size: 12px; display: flex; flex-direction: column; gap: 3px; border-top: 1px solid var(--border); } .evidence-meta .evidence-cap { font-weight: 600; color: var(--text); } .evidence-meta form { margin: 2px 0 0; } .evidence-upload { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .evidence-upload input[type=text] { flex: 1; min-width: 160px; } .evidence-upload input[type=file] { max-width: 100%; } /* --- Guided flow: a screen as a sequence of "moments", not a stack of cards ----- */ .jrail { display: flex; align-items: center; margin: 22px 0 4px; flex-wrap: wrap; gap: 6px 0; } .jrail .jstep { display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 600; color: var(--text-faint); } .jrail .jnum { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 12.5px; background: var(--surface); border: 1.5px solid var(--border-strong); color: var(--text-muted); flex: none; } .jrail .jstep.done .jnum { background: var(--ok); border-color: var(--ok); color: #fff; } .jrail .jstep.done { color: var(--text-muted); } .jrail .jstep.active .jnum { background: var(--primary); border-color: var(--primary); color: #fff; box-shadow: 0 0 0 4px var(--primary-tint); } .jrail .jstep.active { color: var(--text); } .jrail .jline { flex: 1; min-width: 24px; height: 2px; background: var(--border); margin: 0 12px; border-radius: 2px; } .jrail .jline.filled { background: var(--ok); } .moment { display: flex; gap: 16px; margin-top: 14px; } .moment .m-rail { display: flex; flex-direction: column; align-items: center; flex: none; width: 30px; } .moment .m-num { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 14px; font-weight: 700; flex: none; } .moment .m-thread { flex: 1; width: 2px; background: var(--border); margin: 6px 0; border-radius: 2px; } .moment:last-child .m-thread { display: none; } .moment.done .m-num { background: var(--ok-light); color: var(--ok); } .moment.active .m-num { background: var(--primary); color: #fff; } .moment.next .m-num { background: var(--surface); color: var(--text-faint); border: 1.5px solid var(--border-strong); } .moment .m-card { flex: 1; min-width: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 16px 20px; } .moment.active .m-card { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary), var(--shadow); } .moment .m-title { font-size: 16px; font-weight: 730; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .moment .m-title small { font-weight: 500; font-size: 13px; color: var(--text-muted); } .m-sub { font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-faint); margin: 18px 0 8px; } @media (max-width: 620px) { .moment { gap: 10px; } .moment .m-card { padding: 14px; } } /* clock-on / clock-off timer */ .timer { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 11px 15px; } .timer.running { border-color: var(--ok); background: var(--ok-light); } .timer .clock { font-size: 20px; font-weight: 750; font-variant-numeric: tabular-nums; line-height: 1.1; } .timer .lbl { font-size: 13px; color: var(--text-muted); } .timer .grow { flex: 1; } .timer .live { width: 9px; height: 9px; border-radius: 50%; background: var(--ok); flex: none; animation: tpulse 1.4s ease-in-out infinite; } @keyframes tpulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } } @media (prefers-reduced-motion: reduce) { .timer .live { animation: none; } } .timer form { margin: 0; } /* --- Guidance layer: every screen says the one thing to do next ---------------- */ .guidance { display: flex; align-items: flex-start; gap: 12px; padding: 12px 16px; margin-bottom: 8px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); } .guidance .g-dot { width: 9px; height: 9px; border-radius: 50%; margin-top: 6px; flex: none; background: var(--primary); } .guidance .g-body { flex: 1; min-width: 0; } .guidance .g-text { font-weight: 650; font-size: 14.5px; } .guidance .g-hint { display: block; font-size: 12.5px; color: var(--text-muted); margin-top: 2px; } .guidance.g-info { background: var(--primary-tint); border-color: color-mix(in srgb, var(--primary) 24%, transparent); } .guidance.g-action { background: var(--warn-light); border-color: color-mix(in srgb, var(--warn) 30%, transparent); } .guidance.g-action .g-dot { background: var(--warn); } .guidance.g-action .g-text { color: var(--text); } .guidance.g-done { background: var(--ok-light); border-color: color-mix(in srgb, var(--ok) 30%, transparent); } .guidance.g-done .g-dot { background: var(--ok); } /* one-line "what to do here" under a moment's title */ .m-guide { font-size: 13px; color: var(--text-muted); margin-top: 3px; } /* --- Inbox bell (the who's-waiting count, on every page) ------------------------ */ .inbox-bell { position: relative; display: inline-flex; align-items: center; text-decoration: none; font-size: 16px; line-height: 1; padding: 4px; border-radius: var(--radius-sm); filter: grayscale(1) opacity(0.6); } .inbox-bell:hover { background: var(--surface-2); filter: grayscale(0) opacity(1); } .inbox-bell.has { filter: none; } .inbox-bell .bell-count { position: absolute; top: -3px; right: -4px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--danger); color: #fff; font-size: 10.5px; font-weight: 700; display: grid; place-items: center; line-height: 1; } /* --- Inbox list --------------------------------------------------------------- */ .inbox-item { display: flex; align-items: flex-start; gap: 12px; padding: 13px 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); margin-bottom: 8px; } .inbox-item .ib-dot { width: 9px; height: 9px; border-radius: 50%; margin-top: 6px; flex: none; background: var(--primary); } .inbox-item.k-action .ib-dot { background: var(--warn); } .inbox-item.k-done .ib-dot { background: var(--ok); } .inbox-item .ib-body { flex: 1; min-width: 0; } .inbox-item .ib-verb { font-weight: 600; } .inbox-item .ib-verb a { color: var(--text); text-decoration: none; } .inbox-item .ib-verb a:hover { color: var(--primary); } .inbox-item .ib-meta { font-size: 12px; color: var(--text-muted); margin-top: 2px; } .inbox-item .ib-actions { display: flex; gap: 8px; align-items: center; flex: none; } /* --- Tables ------------------------------------------------------------ */ table.data { width: 100%; border-collapse: collapse; } table.data th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); padding: 10px 16px; border-bottom: 1px solid var(--border); background: var(--surface-2); white-space: nowrap; } table.data td { padding: 11px 16px; border-bottom: 1px solid var(--border); } table.data tbody tr:last-child td { border-bottom: none; } table.data tbody tr { transition: background var(--transition); } table.data tbody tr:hover { background: var(--primary-tint); } table.data a { color: var(--primary); text-decoration: none; font-weight: 600; } table.data a:hover { text-decoration: underline; } table.data td.num, table.data th.num { font-variant-numeric: tabular-nums; } .mono { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 0.95em; } .empty { padding: 44px 16px; text-align: center; color: var(--text-faint); } .empty strong { color: var(--text-muted); } .empty a { color: var(--primary); font-weight: 600; } /* --- Badges ------------------------------------------------------------ */ .badge { display: inline-block; padding: 2px 9px; border-radius: 11px; font-size: 11px; font-weight: 600; letter-spacing: 0.2px; white-space: nowrap; } .badge-ok { background: var(--ok-light); color: var(--ok); } .badge-warn { background: var(--warn-light); color: var(--warn); } .badge-danger { background: var(--danger-light); color: var(--danger); } .badge-neutral { background: var(--neutral-light); color: var(--neutral); } .badge-muted { background: var(--surface-2); color: var(--text-faint); } .badge-primary { background: var(--primary-light); color: var(--primary); } /* --- Category chip (the CAMO maintenance-category band, shown everywhere) --- */ .cat { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px 2px 7px; border-radius: 11px; font-size: 11px; font-weight: 600; white-space: nowrap; background: var(--neutral-light); color: var(--text); } .cat::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--neutral); flex: none; } /* Category bands — each keeps its hue in a chip derived from the current surface, so it reads in both themes instead of showing as a bright pastel sticker on a dark UI. */ .cat.band-airframe { --c: #3d7fd0; } .cat.band-engine { --c: #cf8b2c; } .cat.band-component { --c: #8168d8; } .cat.band-awc { --c: #1e9f8b; } .cat.band-airframe, .cat.band-engine, .cat.band-component, .cat.band-awc { background: color-mix(in srgb, var(--c) 15%, var(--surface)); color: var(--c); } .cat.band-airframe::before, .cat.band-engine::before, .cat.band-component::before, .cat.band-awc::before { background: var(--c); } .cat.band-other { background: var(--neutral-light); color: var(--neutral); } .cat.cat-sm { font-size: 10px; padding: 1px 8px 1px 6px; } /* --- Job-card identification block (the 5.SCH-JC card header) --- */ .jobid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } .jobid-cell { background: var(--surface); padding: 8px 12px; display: flex; flex-direction: column; gap: 3px; } .jobid .k, .jobid-desc .k, .iaw .k { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); } .jobid .v { font-size: 14px; } .jobid-desc { margin-top: 12px; padding: 10px 12px; background: var(--neutral-light); border-radius: var(--radius); } .jobid-desc .v { font-size: 15px; font-weight: 600; margin-top: 2px; } .iaw { margin-top: 12px; display: flex; align-items: stretch; gap: 0; border: 1px solid var(--primary); border-radius: var(--radius); overflow: hidden; } .iaw-tag { background: var(--primary); color: #fff; font-weight: 700; letter-spacing: 1px; font-size: 12px; display: flex; align-items: center; padding: 0 14px; flex: none; } .iaw-body { padding: 10px 14px; } .iaw-ref { font-family: var(--mono, ui-monospace, monospace); font-size: 15px; font-weight: 600; color: var(--primary-dark); } .iaw-ref a { color: var(--primary-dark); text-decoration: underline; text-underline-offset: 2px; } .iaw-note { display: block; font-size: 12px; color: var(--text-muted); margin-top: 3px; } /* --- Category filter bar (slice a long due list by maintenance category) --- */ .catbar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .catbar-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); margin-right: 4px; } .catchip { display: inline-block; padding: 4px 11px; border-radius: 13px; font-size: 12px; font-weight: 600; text-decoration: none; color: var(--text); background: var(--surface); border: 1px solid var(--border-strong); transition: border-color var(--transition), color var(--transition), background var(--transition); } .catchip:hover { border-color: var(--primary); color: var(--primary); } .catchip.on { background: var(--primary); color: #fff; border-color: var(--primary); } /* --- Buttons ----------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 15px; border-radius: var(--radius); border: 1px solid transparent; font-size: 13px; font-weight: 600; cursor: pointer; text-decoration: none; font-family: inherit; line-height: 1.4; transition: background var(--transition), border-color var(--transition), box-shadow var(--transition), transform var(--transition); } .btn:active { transform: translateY(0.5px); } .btn:focus-visible { outline: none; box-shadow: var(--ring); } .btn-primary { background: var(--primary); color: #fff; box-shadow: var(--shadow-sm); } .btn-primary:hover { background: var(--primary-dark); } .btn-secondary { background: var(--surface); color: var(--text); border-color: var(--border-strong); } .btn-secondary:hover { background: var(--surface-2); border-color: var(--text-faint); } .btn-sm { padding: 4px 10px; font-size: 12.5px; gap: 4px; border-radius: var(--radius-sm); } .btn-ghost { background: transparent; border-color: transparent; color: var(--text-muted); } .btn-ghost:hover { background: var(--surface-2); color: var(--text); } .table-scroll { overflow-x: auto; } /* A button that looks like a link — for an inline state-changing POST (e.g. a toggle inside a one-button
) where an would be semantically wrong. */ .btn-link { background: none; border: none; padding: 0; color: var(--primary); font: inherit; font-weight: 600; cursor: pointer; } .btn-link:hover { color: var(--primary-dark); text-decoration: underline; } /* --- Forms ------------------------------------------------------------- */ .form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; } .form-row { display: flex; flex-direction: column; gap: 5px; } .form-row.full { grid-column: 1 / -1; } .form-row label { font-weight: 600; font-size: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.4px; } .form-row input[type="text"], .form-row input[type="number"], .form-row input[type="date"], .form-row input[type="password"], .form-row input[type="email"], .form-row select, .form-row textarea { padding: 9px 11px; border: 1px solid var(--border-strong); border-radius: var(--radius); font-size: 14px; font-family: inherit; background: var(--surface); color: var(--text); width: 100%; transition: border-color var(--transition), box-shadow var(--transition); } .form-row input:hover, .form-row select:hover, .form-row textarea:hover { border-color: var(--text-faint); } .form-row input:focus, .form-row select:focus, .form-row textarea:focus { outline: none; border-color: var(--primary); box-shadow: var(--ring); } .form-row .help { font-size: 12px; color: var(--text-muted); } .form-row .error { font-size: 12px; color: var(--danger); font-weight: 600; } .checkbox-row { flex-direction: row; align-items: center; gap: 8px; } .checkbox-row label { text-transform: none; letter-spacing: 0; font-size: 14px; color: var(--text); } .form-footer { display: flex; gap: 8px; padding-top: 16px; margin-top: 16px; border-top: 1px solid var(--border); } .search-box { position: relative; max-width: 320px; } .search-box input { width: 100%; padding: 8px 12px; border: 1px solid var(--border-strong); border-radius: var(--radius); font-size: 14px; font-family: inherit; background: var(--surface); transition: border-color var(--transition), box-shadow var(--transition); } .search-box input:hover { border-color: var(--text-faint); } .search-box input:focus { outline: none; border-color: var(--primary); box-shadow: var(--ring); } /* --- Definition lists (detail view) ------------------------------------ */ dl.detail { margin: 0; display: grid; grid-template-columns: 190px 1fr; gap: 0; } dl.detail dt { padding: 9px 0; color: var(--text-muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.4px; font-weight: 600; border-bottom: 1px solid var(--border); } dl.detail dd { padding: 9px 0; margin: 0; border-bottom: 1px solid var(--border); } dl.detail dt:last-of-type, dl.detail dd:last-of-type { border-bottom: none; } /* --- Messages ---------------------------------------------------------- */ .messages { list-style: none; padding: 0; margin: 0 0 16px; } .messages li { padding: 11px 16px; border-radius: var(--radius); margin-bottom: 8px; font-weight: 500; border: 1px solid transparent; } .messages li.success { background: var(--ok-light); color: var(--ok); border-color: #bfe3ce; } .messages li.error { background: var(--danger-light); color: var(--danger); border-color: #f3c9c6; } .messages li.warning { background: var(--warn-light); color: var(--warn); border-color: #f0dcb4; } /* --- Audit trail ------------------------------------------------------- */ .audit { list-style: none; padding: 0; margin: 0; } .audit li { padding: 10px 0; border-bottom: 1px solid var(--border); display: flex; gap: 12px; align-items: baseline; } .audit li:last-child { border-bottom: none; } .audit .when { color: var(--text-muted); font-size: 12px; white-space: nowrap; font-family: var(--mono); } .audit .who { font-weight: 600; } /* --- Notices ----------------------------------------------------------- */ .notice { background: var(--primary-tint); border: 1px solid color-mix(in srgb, var(--primary) 24%, transparent); border-left: 3px solid var(--primary); border-radius: var(--radius); padding: 13px 17px; margin-bottom: 20px; font-size: 13px; line-height: 1.55; color: var(--text); } .notice strong { color: var(--primary); } .notice-warn { background: var(--warn-light); border-color: color-mix(in srgb, var(--warn) 32%, transparent); border-left-color: var(--warn); color: var(--text); } .notice-warn strong { color: var(--warn); } .notice-danger { background: var(--danger-light); border-color: color-mix(in srgb, var(--danger) 32%, transparent); border-left-color: var(--danger); color: var(--text); } .notice-danger strong { color: var(--danger); } .notice-ok { background: var(--ok-light); border-color: color-mix(in srgb, var(--ok) 32%, transparent); border-left-color: var(--ok); color: var(--text); } .notice-ok strong { color: var(--ok); } .hint { color: var(--text-muted); font-size: 12px; margin: -8px 0 20px; } /* Section eyebrow — a small uppercase label separating groups on a page. */ .section-label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.6px; color: var(--text-muted); margin: 28px 0 12px; } /* --- Numeric columns --------------------------------------------------- */ table.data th.num, table.data td.num { text-align: right; } /* Compact variant for inline-editable formset tables (parts, life limits, ratings) — tightens cells and stretches inputs to fill. Used to be copy-pasted inline in four templates. */ table.data.compact td { padding: 6px 8px; } table.data.compact input, table.data.compact select { width: 100%; padding: 5px 7px; font-size: 13px; } /* A reversal entry, and the entry it cancels. Both stay on the record — the styling makes the correction visible rather than hiding it. */ table.data tr.row-reversal td { background: var(--warn-light); } table.data tr.row-reversal:hover td { background: #fbeacd; } table.data tr.row-voided td { color: var(--text-muted); text-decoration: line-through; } table.data tr.row-voided td .badge { text-decoration: none; } .btn-danger { background: var(--danger); color: #fff; } .btn-danger:hover { background: #90201a; } /* --- Checkbox grid (operating conditions) ------------------------------ */ .checkbox-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 8px 16px; } .checkbox-item { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); font-size: 13px; cursor: pointer; transition: background var(--transition), border-color var(--transition); } .checkbox-item:hover { background: var(--primary-tint); border-color: var(--primary); } .checkbox-item input { margin: 0; } /* --- Role picker (Users & Roles) --------------------------------------- */ .role-pick { display: flex; flex-direction: column; gap: 8px; } .role-opt { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; transition: border-color var(--transition), background var(--transition); } .role-opt:hover { border-color: var(--primary); background: var(--primary-tint); } .role-opt:has(input:checked) { border-color: var(--primary); background: var(--primary-tint); box-shadow: inset 3px 0 0 var(--primary); } .role-opt input { margin-top: 3px; flex: none; } .role-opt .ro-name { font-weight: 600; display: block; } .role-opt .ro-charter { font-size: 12.5px; color: var(--text-muted); display: block; margin-top: 2px; } /* --- Login ------------------------------------------------------------- */ .login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; background: linear-gradient(180deg, var(--bg), #e4e9ef); } .login-card { position: relative; width: 100%; max-width: 380px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 34px; overflow: hidden; } .login-accent { position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--primary), var(--primary-dark)); } .login-card h1 { margin: 6px 0 4px; font-size: 20px; letter-spacing: -0.01em; } .login-card .sub { color: var(--text-muted); font-size: 13px; margin-bottom: 24px; } .login-card .form-row { margin-bottom: 14px; } .login-card .btn { width: 100%; text-align: center; } /* --- Aircraft tab strip (the aircraft the UI is focused on) ------------- */ .focusbar { background: var(--surface); color: var(--text); border-bottom: 1px solid var(--border); display: flex; align-items: stretch; gap: 0; padding: 0 20px; font-size: 13px; overflow-x: auto; position: sticky; top: 46px; z-index: 15; } .focusbar .who { display: flex; align-items: baseline; gap: 8px; padding: 9px 18px 9px 0; margin-right: 8px; border-right: 1px solid var(--border); white-space: nowrap; } .focusbar .who .reg { font-family: var(--mono); font-weight: 700; font-size: 14px; color: var(--primary); } .focusbar .who .type { font-size: 11px; color: var(--text-muted); } .focusbar nav { display: flex; gap: 2px; flex: 1; } .focusbar nav a { color: var(--text-muted); text-decoration: none; padding: 12px 12px 10px; white-space: nowrap; border-bottom: 2.5px solid transparent; font-weight: 500; transition: color var(--transition), background var(--transition); } .focusbar nav a:hover { color: var(--text); background: var(--surface-2); } .focusbar nav a.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: 650; } .focusbar .clear { display: flex; align-items: center; color: var(--text-muted); text-decoration: none; padding: 4px 10px; margin: 7px 0 7px 8px; border: 1px solid var(--border-strong); border-radius: var(--radius); white-space: nowrap; font-size: 12px; transition: border-color var(--transition), color var(--transition); } .focusbar .clear:hover { border-color: var(--danger); color: var(--danger); background: var(--surface-2); } /* --- Module context bar (which module am I in?) ------------------------ */ /* A slim breadcrumb under the topbar. The accent dot is the only colour, and it is the module's colour — Operations, Library, Authorisations and Setup each read as a distinct space without shouting. The accent is carried on --accent, set by the mod-* modifier. */ .crumbbar { background: var(--surface); border-bottom: 1px solid var(--border); } .crumbbar .inner { max-width: 1200px; margin: 0 auto; padding: 8px 20px; display: flex; align-items: center; gap: 8px; font-size: 12.5px; line-height: 1.2; } .crumbbar .crumb-back { display: inline-flex; align-items: center; gap: 2px; color: var(--text); font-weight: 600; text-decoration: none; padding: 3px 10px 3px 8px; border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--surface); transition: border-color var(--transition), color var(--transition), background var(--transition); } .crumbbar .crumb-back:hover { border-color: var(--accent, var(--primary)); color: var(--accent, var(--primary)); background: var(--surface-2); } .crumbbar .crumb-div { width: 1px; height: 16px; background: var(--border); } .crumbbar a.home { color: var(--text-muted); text-decoration: none; font-weight: 500; transition: color var(--transition); } .crumbbar a.home:hover { color: var(--accent, var(--primary)); } .crumbbar .chev { color: var(--text-faint); } .crumbbar .mod { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; color: var(--text); } .crumbbar .mod .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent, var(--primary)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, var(--primary)) 16%, transparent); flex: none; } .crumbbar .sec { color: var(--text-muted); } /* Module accent tokens — one place, reused by the crumb bar and the dashboard launcher. Applying a mod-* class sets --accent for that element and its children. */ .mod-ops { --accent: var(--primary); } .mod-library { --accent: var(--primary); } .mod-auth { --accent: var(--primary); } .mod-setup { --accent: var(--neutral); } /* --- Dashboard launcher (registers, grouped by module) ----------------- */ .jump { display: flex; flex-wrap: wrap; gap: 14px 30px; margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--border); } .jump-group { display: flex; flex-direction: column; gap: 6px; } .jump-label { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); } .jump-label .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent, var(--primary)); flex: none; } .jump-links { display: flex; flex-wrap: wrap; gap: 3px 16px; } .jump-links a { font-size: 13px; text-decoration: none; color: var(--primary); } .jump-links a:hover { color: var(--primary-dark); text-decoration: underline; text-underline-offset: 2px; } /* --- Airworthiness verdict (the workspace headline) -------------------- */ .verdict { display: flex; align-items: center; gap: 18px; padding: 16px 20px; border-radius: var(--radius); border: 1px solid; margin-bottom: 20px; } .verdict.v-released { background: var(--ok-light); border-color: var(--ok); } .verdict.v-expiring { background: var(--warn-light); border-color: var(--warn); } .verdict.v-grounded, .verdict.v-unreleased { background: var(--danger-light); border-color: var(--danger); } .verdict .status { font-size: 21px; font-weight: 780; letter-spacing: 0.04em; white-space: nowrap; } .verdict.v-released .status { color: var(--ok); } .verdict.v-expiring .status { color: var(--warn); } .verdict.v-grounded .status, .verdict.v-unreleased .status { color: var(--danger); } .verdict .sep { width: 1px; align-self: stretch; background: currentColor; opacity: 0.22; } .verdict .detail { font-size: 13.5px; } .verdict .detail .muted { color: var(--text-muted); display: block; margin-top: 1px; } .verdict .reg { margin-left: auto; font-family: var(--mono); font-weight: 700; font-size: 17px; white-space: nowrap; } /* --- Time-remaining gauge (fuel gauge) -------------------------------- */ .gauge { display: flex; align-items: center; min-width: 90px; } .gauge .track { flex: 1; height: 8px; min-width: 70px; border-radius: 5px; background: var(--border); overflow: hidden; } .gauge .fill { height: 100%; border-radius: 5px; } .gauge .fill.ok { background: var(--ok); } .gauge .fill.warn { background: var(--warn); } .gauge .fill.bad { background: var(--danger); } /* --- Fleet status board (Home) ---------------------------------------- */ .fleet-board { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; } .fcard { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 15px; box-shadow: var(--shadow); text-decoration: none; color: var(--text); display: block; transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition); } .fcard:hover { border-color: var(--primary); box-shadow: var(--shadow-md); transform: translateY(-1px); } .fcard .r1 { display: flex; align-items: center; gap: 10px; } .fcard .light { width: 12px; height: 12px; border-radius: 50%; box-shadow: 0 0 0 4px var(--neutral-light); } .fcard .light.g { background: var(--ok); box-shadow: 0 0 0 4px var(--ok-light); } .fcard .light.a { background: var(--warn); box-shadow: 0 0 0 4px var(--warn-light); } .fcard .light.r { background: var(--danger); box-shadow: 0 0 0 4px var(--danger-light); } .fcard .reg { font-family: var(--mono); font-weight: 700; font-size: 16px; color: var(--primary); } .fcard .type { font-size: 11px; color: var(--text-muted); margin-left: auto; } .fcard .st { font-size: 12.5px; font-weight: 600; margin: 9px 0 12px; } .fcard .st.g { color: var(--ok); } .fcard .st.a { color: var(--warn); } .fcard .st.r { color: var(--danger); } .fcard .mini { display: flex; gap: 16px; } .fcard .mini div { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.3px; } .fcard .mini b { display: block; font-size: 19px; color: var(--text); font-weight: 600; } /* --- Role cockpit (Home) — one panel per role: the person's live workload + first action --- */ .ck-hello { margin-bottom: 20px; } .ck-hello h1 { margin: 0; font-size: 23px; font-weight: 650; letter-spacing: -0.01em; } .ck-hello .sub { color: var(--text-muted); font-size: 13.5px; margin-top: 3px; } .cockpit { display: grid; grid-template-columns: 1fr; gap: 16px; margin-bottom: 30px; } @media (min-width: 760px) { .cockpit { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1160px) { .cockpit { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .ckpanel { background: var(--surface); border: 1px solid var(--border); border-top: 3px solid var(--ck, var(--primary)); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 15px 17px 15px; display: flex; flex-direction: column; } .ckpanel .ck-role { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; color: var(--ck, var(--primary)); } .ckpanel .ck-lead { font-size: 13px; color: var(--text-muted); margin: 3px 0 13px; } .ck-metrics { display: flex; gap: 20px; margin-bottom: 13px; } .ck-metrics .m .n { font-size: 25px; font-weight: 650; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--text); } .ck-metrics .m .l { font-size: 10.5px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.3px; margin-top: 5px; } .ck-metrics .m.danger .n { color: var(--danger); } .ck-metrics .m.warn .n { color: var(--warn); } .ck-list { list-style: none; margin: 0 0 13px; padding: 0; border-top: 1px solid var(--border); } .ck-list li { border-bottom: 1px solid var(--border); } .ck-list a { display: flex; align-items: center; gap: 9px; padding: 8px 2px; text-decoration: none; color: var(--text); border-radius: var(--radius-sm); } .ck-list a:hover { background: var(--surface-2); } .ck-list .tdot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-faint); flex: none; } .ck-list .tdot.danger { background: var(--danger); } .ck-list .tdot.warn { background: var(--warn); } .ck-list .tdot.ok { background: var(--ok); } .ck-list .t { font-weight: 600; font-size: 13.5px; } .ck-list .s { color: var(--text-muted); font-size: 12px; margin-left: auto; text-align: right; white-space: nowrap; } .ck-empty { color: var(--text-faint); font-size: 13px; padding: 8px 0 14px; } .ckpanel .ck-primary { margin-top: auto; align-self: flex-start; } /* --- CAMS model / aircraft picker ------------------------------------- */ .cams-type { border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 10px; background: var(--surface); overflow: hidden; } .cams-type > summary { list-style: none; cursor: pointer; padding: 14px 18px; font-weight: 600; font-size: 15px; background: var(--primary-dark); color: #fff; display: flex; align-items: center; gap: 12px; } .cams-type > summary::-webkit-details-marker { display: none; } .cams-type > summary::before { content: "\25B8"; transition: transform 0.15s; opacity: 0.85; } .cams-type[open] > summary::before { transform: rotate(90deg); } .cams-type > summary .count { margin-left: auto; background: rgba(255,255,255,0.2); border-radius: 11px; padding: 1px 10px; font-size: 12px; font-weight: 600; } .cams-aircraft { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1px; background: var(--border); } .cams-ac { display: flex; flex-direction: column; gap: 2px; padding: 13px 16px; background: var(--surface); text-decoration: none; color: var(--text); } .cams-ac:hover { background: var(--primary-tint); } .cams-ac .reg { font-family: var(--mono); font-weight: 600; font-size: 15px; color: var(--primary); } .cams-ac .meta { font-size: 12px; color: var(--text-muted); } /* --- Setup wizard (guided record set-up: aircraft, staff, part) -------- */ /* One definition for the progress header, bar and step ticks shared by every guided set-up flow (it used to be copy-pasted inline in each template). */ .setup-progress-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; } .setup-bar { height: 10px; border-radius: 6px; background: var(--border); overflow: hidden; } .setup-bar-fill { height: 100%; background: var(--ok); border-radius: 6px; transition: width 0.2s; } .setup-steps { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; } .setup-tick { width: 34px; height: 34px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; font-weight: 700; background: var(--neutral-light); color: var(--text-muted); } .setup-tick.on { background: var(--ok-light); color: var(--ok); } .setup-step.is-done { opacity: 0.85; } /* --- Responsive — the layout stays usable on a phone or a narrow split ---- */ @media (max-width: 720px) { .container { padding: 16px 14px 48px; } .page-head { flex-direction: column; align-items: flex-start; gap: 10px; } .page-actions { width: 100%; } .form-grid { grid-template-columns: 1fr; } dl.detail { grid-template-columns: 1fr; } dl.detail dt { padding-bottom: 2px; border-bottom: none; } dl.detail dd { padding-top: 0; } .verdict { flex-wrap: wrap; } .verdict .reg { margin-left: 0; } /* Wide tables scroll inside their card rather than pushing the page sideways (headers already stay on one line, so they drive the scroll; body cells wrap). */ .card > table.data { display: block; overflow-x: auto; } } /* --- Print — this is a compliance system; its records get printed and filed ---- */ @media print { :root { --shadow: none; --shadow-sm: none; --shadow-md: none; --shadow-lg: none; --ring: none; } body { background: #fff; color: #000; font-size: 11pt; } /* Chrome that has no place on a filed record. */ .topbar, .focusbar, .crumbbar, .sidebar, .topstrip, .menu-toggle, .sb-overlay, .page-actions, .search-box, .catbar, .btn, form .form-footer, .messages, nav { display: none !important; } .layout, .main { display: block; } .container { max-width: none; margin: 0; padding: 0; } /* Flatten interactive surfaces to clean ink on paper. */ .card { box-shadow: none; border: 1px solid #bbb; break-inside: avoid; } .card-head { background: #fff; color: #000; } table.data th { background: #fff; color: #000; } table.data tbody tr:hover { background: transparent; } .badge, .cat, .catchip { border: 1px solid #999; color: #000 !important; background: #fff !important; } a { color: #000; text-decoration: none; } /* Keep rows and headings intact across page breaks. */ tr, .setup-step, .jobid, dl.detail { break-inside: avoid; } h1, h2, h3 { break-after: avoid; } .page-head { margin-bottom: 12px; border-bottom: 1px solid #000; padding-bottom: 6px; } } /* --- Command Deck (role-personalised home) ------------------------------------------------ */ .dk-hello { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .dk-hello h1 { margin: 0; font-size: 23px; font-weight: 700; letter-spacing: -0.2px; } .dk-hello .sub { color: var(--text-muted); font-size: 13.5px; } .dk-hello .sub b { color: var(--danger); } .dk-hats { display: flex; gap: 6px; margin: 9px 0 18px; flex-wrap: wrap; } .dk-hat { display: inline-flex; align-items: center; gap: 6px; background: var(--primary-light); color: var(--primary); border: 1px solid var(--border); border-radius: 20px; font-size: 11.5px; font-weight: 600; padding: 4px 11px; } /* ---- Dashboard hero — a header with presence, instead of a bare heading on grey ---- */ .dk-hero { position: relative; overflow: hidden; border-radius: 16px; padding: 24px 28px; margin-bottom: 18px; background: linear-gradient(120deg, var(--primary), var(--navy-2)); color: #fff; box-shadow: var(--shadow-md); } .dk-hero::after { content: ""; position: absolute; right: -40px; top: -70px; width: 300px; height: 300px; background: radial-gradient(circle, rgba(255,255,255,.09), transparent 62%); pointer-events: none; } .dk-hero .delta { position: absolute; right: 24px; bottom: -34px; opacity: .12; pointer-events: none; } .dk-hero .delta svg { width: 170px; height: 170px; } .dk-hero .ey { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #a9c1e0; } .dk-hero h1 { margin: .22em 0 .12em; font-size: clamp(23px, 3vw, 30px); font-weight: 700; letter-spacing: -.4px; color: #fff; } .dk-hero .sub { color: #cdddf1; font-size: 14.5px; position: relative; z-index: 1; } .dk-hero .sub b { color: #fff; } .dk-hero .hero-hats { display: flex; gap: 7px; margin-top: 14px; flex-wrap: wrap; } .dk-hero .hero-hats .dk-hat { background: rgba(255,255,255,.14); color: #eaf1fb; border-color: rgba(255,255,255,.18); } .dk-hero .hero-act { position: absolute; right: 22px; top: 22px; z-index: 2; } .dk-hero .hero-act a { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px; border-radius: 8px; font-size: 13px; font-weight: 600; text-decoration: none; color: #eaf1fb; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); transition: background var(--transition); } .dk-hero .hero-act a:hover { background: rgba(255,255,255,.22); } /* ---- Warmed hub tiles — per-card icon in an area-tinted chip, hover lift + reveal arrow ---- */ .hub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 13px; } .hub-tile { display: flex; gap: 13px; align-items: flex-start; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 15px 16px; text-decoration: none; color: inherit; position: relative; box-shadow: var(--shadow-sm); transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition); } .hub-tile:hover { transform: translateY(-2px); border-color: var(--acc, var(--primary)); box-shadow: var(--shadow); } .hub-tile .hub-ic { flex: none; width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; background: color-mix(in srgb, var(--acc, var(--primary)) 14%, var(--surface)); color: var(--acc, var(--primary)); } .hub-tile .hub-ic svg { width: 20px; height: 20px; } .hub-tile .hub-tx { display: flex; flex-direction: column; min-width: 0; } .hub-tile .hub-t { font-weight: 600; font-size: 14.5px; } .hub-tile .hub-d { font-size: 12.5px; color: var(--text-muted); line-height: 1.4; margin-top: 2px; } .hub-tile .hub-arw { position: absolute; right: 14px; top: 15px; color: var(--text-faint); opacity: 0; transition: opacity var(--transition), transform var(--transition); } .hub-tile:hover .hub-arw { opacity: 1; transform: translateX(2px); } .dk-lens { display: flex; gap: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: 11px; padding: 5px; margin-bottom: 18px; box-shadow: var(--shadow); width: fit-content; flex-wrap: wrap; } .dk-lens button { border: none; background: none; font: inherit; display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px; border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--text-muted); cursor: pointer; } .dk-lens button.on { background: var(--primary); color: #fff; } .dk-lens button .n { font-family: var(--mono); font-size: 11px; background: rgba(0,0,0,.08); border-radius: 20px; padding: 0 6px; } .dk-lens button.on .n { background: rgba(255,255,255,.2); } .dk-sec { margin-bottom: 18px; } .dk-sech { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } .dk-sech .rt { font-size: 11px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; color: var(--primary); white-space: nowrap; } .dk-sech .as { color: var(--text-faint); font-size: 12px; white-space: nowrap; } .dk-sech .ln { flex: 1; height: 1px; background: var(--border); } .dk-sech .qa { color: var(--primary); font-size: 12px; font-weight: 600; text-decoration: none; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 5px 11px; white-space: nowrap; } .dk-sech .qa:hover { background: var(--surface-2); } .dk-todo { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .dk-item { display: flex; align-items: center; gap: 13px; background: var(--surface); border: 1px solid var(--border); border-radius: 11px; padding: 13px 15px; box-shadow: var(--shadow); position: relative; text-decoration: none; color: inherit; } .dk-item::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; border-radius: 11px 0 0 11px; background: var(--primary); } .dk-item.t-danger::before { background: var(--danger); } .dk-item.t-warn::before { background: var(--warn); } .dk-item.t-ok::before { background: var(--ok); } .dk-item .ic { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; flex: none; } .dk-item .ic svg { width: 18px; height: 18px; } .dk-item .ic.t-danger { background: var(--danger-light); color: var(--danger); } .dk-item .ic.t-warn { background: var(--warn-light); color: var(--warn); } .dk-item .ic.t-ok { background: var(--ok-light); color: var(--ok); } .dk-item .ic.t-info { background: var(--primary-light); color: var(--primary); } .dk-item .tx { display: flex; flex-direction: column; flex: 1; min-width: 0; } .dk-item .tt { font-weight: 600; font-size: 13.5px; } .dk-item .ss { color: var(--text-muted); font-size: 12px; } .dk-item .go { border: 1px solid var(--border); background: var(--surface); color: var(--primary); font-weight: 600; font-size: 12px; padding: 6px 12px; border-radius: 8px; white-space: nowrap; flex: none; } .dk-item.t-danger .go { background: var(--danger); border-color: var(--danger); color: #fff; } .dk-item:hover { border-color: var(--border-strong); } .dk-cols { display: grid; grid-template-columns: 1.15fr 1fr; gap: 16px; margin-top: 6px; } .dk-fl { display: flex; gap: 10px; padding: 14px 16px; } .dk-fl .b { flex: 1; text-align: center; border: 1px solid var(--surface-2); border-radius: 9px; padding: 9px 4px; } .dk-fl .b .v { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; } .dk-fl .b .l { font-size: 10.5px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.4px; } .dk-fl .b.k .v { color: var(--ok); } .dk-fl .b.r .v { color: var(--danger); } .dk-fl .b.w .v { color: var(--warn); } .dk-row { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-top: 1px solid var(--surface-2); font-size: 13px; text-decoration: none; color: inherit; } .dk-row:hover { background: var(--surface-2); } .dk-row .sp { flex: 1; } .dk-allclear { text-align: center; padding: 34px 20px; color: var(--text-muted); } .dk-allclear svg { width: 30px; height: 30px; color: var(--ok); margin-bottom: 8px; } .dk-jump { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 16px; } .dk-jump a { font-size: 12.5px; font-weight: 600; color: var(--primary); text-decoration: none; background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; padding: 6px 12px; } .dk-jump a:hover { background: var(--primary-light); border-color: var(--border-strong); } @media (max-width: 900px) { .dk-todo, .dk-cols { grid-template-columns: 1fr; } } /* --- ⌘K command palette --------------------------------------------------------------------- */ .cmdk-trigger { display: flex; align-items: center; gap: 8px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 9px; padding: 7px 11px; color: var(--text-faint); font-size: 13px; cursor: text; min-width: 240px; max-width: 380px; } .cmdk-trigger svg { width: 15px; height: 15px; color: var(--text-faint); flex: none; } .cmdk-trigger .keys { margin-left: auto; font-family: var(--mono); font-size: 11px; background: var(--surface); border: 1px solid var(--border); padding: 1px 6px; border-radius: 5px; color: var(--text-muted); } .cmdk-scrim { position: fixed; inset: 0; background: rgba(11,26,48,.5); backdrop-filter: blur(2px); display: grid; place-items: start center; padding-top: 12vh; z-index: 200; } .cmdk-scrim[hidden] { display: none; } .cmdk { width: min(640px, 92vw); background: var(--surface); border-radius: 14px; border: 1px solid var(--border-strong); box-shadow: 0 24px 70px rgba(8,20,40,.4); overflow: hidden; } .cmdk-in { display: flex; align-items: center; gap: 11px; padding: 15px 18px; border-bottom: 1px solid var(--surface-2); } .cmdk-in svg { width: 20px; height: 20px; color: var(--text-muted); flex: none; } .cmdk-in input { border: none; outline: none; font: inherit; font-size: 16px; flex: 1; color: var(--text); background: transparent; } .cmdk-in .esc { font-family: var(--mono); font-size: 11px; color: var(--text-muted); border: 1px solid var(--border); border-radius: 5px; padding: 2px 6px; } .cmdk-results { max-height: 56vh; overflow-y: auto; padding-bottom: 4px; } .cmdk-sec { padding: 9px 15px 4px; font-size: 10.5px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--text-faint); } .cmdk-opt { display: flex; align-items: center; gap: 12px; padding: 9px 16px; font-size: 13.5px; cursor: pointer; text-decoration: none; color: var(--text); } .cmdk-opt.sel { background: var(--primary-tint); } .cmdk-opt .oi { width: 26px; height: 26px; border-radius: 7px; background: var(--surface-2); display: grid; place-items: center; color: var(--primary); flex: none; font-family: var(--mono); font-size: 11px; font-weight: 700; } .cmdk-opt.is-action .oi { background: var(--danger-light); color: var(--danger); } .cmdk-opt .ot { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cmdk-opt .ot b { font-weight: 600; } .cmdk-opt .osub { color: var(--text-faint); font-weight: 400; } .cmdk-opt .om { margin-left: auto; font-size: 11px; color: var(--text-faint); font-family: var(--mono); flex: none; } .cmdk-empty { padding: 26px 16px; text-align: center; color: var(--text-faint); font-size: 13px; } .cmdk-ft { display: flex; gap: 16px; padding: 10px 16px; border-top: 1px solid var(--surface-2); color: var(--text-faint); font-size: 11px; } .cmdk-ft b { font-family: var(--mono); color: var(--text-muted); font-weight: 500; } /* --- Aircraft airworthiness hero ----------------------------------------------------------- */ .ac-hero { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; background: linear-gradient(120deg, var(--primary), var(--primary-dark)); border-radius: var(--radius-lg); padding: 20px 22px; color: #fff; margin-bottom: 16px; box-shadow: var(--shadow); } .ac-hero .ac-id { flex: 1; min-width: 200px; } .ac-hero .reg { font-size: 26px; font-weight: 700; letter-spacing: 0.5px; } .ac-hero .meta { color: #aec1dc; font-size: 13px; margin-top: 3px; } .ac-verdict { display: flex; align-items: center; gap: 10px; padding: 9px 16px; border-radius: 10px; font-size: 14px; letter-spacing: 0.4px; font-weight: 700; } .ac-verdict .lt { width: 11px; height: 11px; border-radius: 50%; flex: none; } .ac-hero.v-r .ac-verdict { background: rgba(196,30,42,.18); border: 1px solid rgba(240,110,120,.4); } .ac-hero.v-r .ac-verdict .lt { background: var(--red); box-shadow: 0 0 0 4px rgba(196,30,42,.25); } .ac-hero.v-a .ac-verdict { background: rgba(199,125,20,.20); border: 1px solid rgba(230,170,80,.45); } .ac-hero.v-a .ac-verdict .lt { background: var(--warn); box-shadow: 0 0 0 4px rgba(199,125,20,.25); } .ac-hero.v-g .ac-verdict { background: rgba(31,157,87,.20); border: 1px solid rgba(90,190,120,.45); } .ac-hero.v-g .ac-verdict .lt { background: var(--ok); box-shadow: 0 0 0 4px rgba(31,157,87,.25); } .ac-hero .page-actions .btn { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.2); color: #fff; } .ac-hero .page-actions .btn:hover { background: rgba(255,255,255,.2); } .ac-hero .page-actions .btn-primary { background: #fff; border-color: #fff; color: var(--primary); }