/* ========================================================================== AOCMS – gcap_dark.css Dark mode overrides for gcap_v8_modern.css. Applied by adding class="dark" to (set server-side from the user's theme preference, falling back to the cookie on logged-out pages). Auto mode is handled separately via prefers-color-scheme media query at the bottom of this file. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Base & background -------------------------------------------------------------------------- */ body.dark { color: #e2e8f0; background: #111827; } body.dark html, html:has(body.dark) { background: #111827; } /* -------------------------------------------------------------------------- 2. Primary navigation -------------------------------------------------------------------------- */ body.dark .topMenuDiv { background: #0f1f3d; } /* Active-page underline: keep the gold — it reads well on both backgrounds */ /* Subnav bar */ body.dark .subMenuBar { background: #1a2535; border-bottom-color: #2d3f55; } body.dark .subMenuBar a.linkMenuBar { color: #94a3b8; } body.dark .subMenuBar a.linkMenuBar:hover { background: #223046; color: #e2e8f0; } body.dark .subMenuBar a.linkMenuBar.current { background: #1d3a5f; color: #93c5fd; } body.dark .companyLabel { color: #4b5a6e; border-left-color: #2d3f55; } /* -------------------------------------------------------------------------- 3. Table wrapper -------------------------------------------------------------------------- */ body.dark .tableWrap { background: #1f2937; border-color: #2d3f55; } /* -------------------------------------------------------------------------- 4. Crew table -------------------------------------------------------------------------- */ body.dark table.crewTable thead { background: #0f1f3d; } body.dark table.crewTable td { border-bottom-color: #2d3f55; color: #e2e8f0; } body.dark table.crewTable tr.odd td { background: #263142; } body.dark table.crewTable tr.even td { background: #1f2937; } body.dark table.crewTable tr.currentodd td, body.dark table.crewTable tr.currenteven td { background: #2d2a14; } body.dark table.crewTable tbody tr:hover td { background: #2d4060; } body.dark table.crewTable td.numCell, body.dark table.crewTable td.right { color: #93c5fd; } body.dark table.crewTable td.notes { color: #64748b; } body.dark a.pilot-name-link, body.dark a.pilot-name-link:hover { color: #93c5fd; } @media (prefers-color-scheme: dark) { body:not(.light):not(.dark) a.pilot-name-link, body:not(.light):not(.dark) a.pilot-name-link:hover { color: #93c5fd; } } /* -------------------------------------------------------------------------- 5. Generic table (table.border, th, td) -------------------------------------------------------------------------- */ body.dark table.border { border-color: #2d3f55; } body.dark th { background: #0f1f3d; color: rgba(255,255,255,0.80); border-bottom-color: rgba(255,255,255,0.08); } body.dark th.clickable { background: #142040; } body.dark th.clickable:hover { background: #1a2d55; } body.dark th.clickable.filtered { background: #0a1628; } body.dark td { border-bottom-color: #2d3f55; color: #e2e8f0; } /* Row stripes */ body.dark tr.odd td { background: #263142; } body.dark tr.even td { background: #1f2937; } body.dark tr.currentodd td, body.dark tr.currenteven td { background: #2d2a14; } body.dark tr.odd:hover td, body.dark tr.even:hover td { background: #2d4060 !important; } /* Row-level status */ body.dark tr.red td { background: #4a1a1a; } body.dark tr.darkorange td { background: #3d2000; } body.dark tr.orange td { background: #3d2800; } body.dark tr.green td { background: #1a3a26; } /* Cell-level status */ body.dark tr td.red { background: #4a1a1a !important; color: #fca5a5 !important; } body.dark tr td.green { background: #1a3a26 !important; color: #86efac !important; } body.dark tr td.orange { background: #3d2800 !important; color: #fcd34d !important; } body.dark tr td.darkorange { background: #3d2000 !important; color: #fb923c !important; } body.dark tr td.gray { background: #263040 !important; color: #94a3b8 !important; } /* Combined right+status */ body.dark tr td.right.red, body.dark tr td.numCell.red { color: #fca5a5 !important; background: #4a1a1a !important; } body.dark tr td.right.orange, body.dark tr td.numCell.orange { color: #fcd34d !important; background: #3d2800 !important; } body.dark tr td.right.darkorange { color: #fb923c !important; background: #3d2000 !important; } body.dark tr td.right.green, body.dark tr td.numCell.green { color: #86efac !important; background: #1a3a26 !important; } body.dark tr td.right.gray, body.dark tr td.numCell.gray { color: #94a3b8 !important; background: #263040 !important; } body.dark td.right, body.dark td.numCell { color: #93c5fd; } /* Selected rows */ body.dark tr.selectedodd td { background: #1a3a26; } body.dark tr.selectedeven td { background: #1f4a30; } /* -------------------------------------------------------------------------- 6. Recency table overrides -------------------------------------------------------------------------- */ body.dark table.border.recency { background: #1a2535 !important; } body.dark table.border.recency th { background: #1a2535 !important; color: #93c5fd !important; border-bottom-color: #2d3f55 !important; } body.dark table.border.recency tr.odd td, body.dark table.border.recency tr.even td, body.dark table.border.recency tr.odd th, body.dark table.border.recency tr.even th { background: #1a2535 !important; } body.dark .recencyPill--ok { background: #1a3a26 !important; color: #86efac !important; } body.dark .recencyPill--warn { background: #4a1a1a !important; color: #fca5a5 !important; } /* Training checks tables — aircraft type row header */ body.dark table.border.training-checks tbody th { background: #1a2535 !important; color: #93c5fd !important; border-bottom-color: #2d3f55 !important; } /* -------------------------------------------------------------------------- 7. Filter pill -------------------------------------------------------------------------- */ body.dark th.clickable .filterPill { background: #b45309; color: #fef3c7; } /* -------------------------------------------------------------------------- 8. Utility colour classes (standalone, not in table context) -------------------------------------------------------------------------- */ body.dark .red { background: #4a1a1a; color: #fca5a5; } body.dark .green { background: #1a3a26; color: #86efac; } body.dark .orange { background: #3d2800; color: #fcd34d; } body.dark .darkorange { background: #3d2000; color: #fb923c; } body.dark .gray { background: #263040; color: #94a3b8; } /* -------------------------------------------------------------------------- 9. Role badges — slightly brighter in dark for pop against dark rows -------------------------------------------------------------------------- */ body.dark .badge-p, body.dark .badgePilot { background: #1d4ed8; } body.dark .badge-a, body.dark .badgeAdmin { background: #7c3aed; } body.dark .badge-c, body.dark .badgeCrew { background: #475569; } /* -------------------------------------------------------------------------- 10. Control fieldsets (search, edit, settings, etc.) -------------------------------------------------------------------------- */ body.dark fieldset.edit, body.dark fieldset.search, body.dark fieldset.roster_steps, body.dark fieldset.audit, body.dark fieldset.settings, body.dark fieldset.outerSettings { background: #1a2535; border-color: #2d3f55; box-shadow: 0 1px 4px rgba(0,0,0,0.3); } body.dark fieldset legend { color: #64748b; } body.dark fieldset.settings table td:first-child, body.dark fieldset.outerSettings table td:first-child { color: #94a3b8; } /* Styled buttons (Default/Alternate, CSV, year shortcuts, etc.) */ body.dark input.styledButton, body.dark button.styledButton { color: #e2e8f0; background: #1f2937; border-color: #374f6b; box-shadow: 0 1px 2px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.05); } body.dark input.styledButton:hover, body.dark button.styledButton:hover { background: #263142; border-color: #4a6a8a; color: #f0f6ff; box-shadow: 0 2px 4px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.05); } body.dark input.styledButton.current, body.dark button.styledButton.current { background: #0f1f3d; color: #ffffff; border-color: #1d4ed8; box-shadow: inset 0 1px 3px rgba(0,0,0,0.4); } /* Date picker inputs */ body.dark fieldset.search input.datepicker, body.dark fieldset.search input[type="text"] { background: #1a2535; border-color: #374f6b; color: #e2e8f0; } /* -------------------------------------------------------------------------- 11. Page text & headings -------------------------------------------------------------------------- */ body.dark .pageTitle { color: #e2e8f0; } body.dark h3 { color: #e2e8f0; } body.dark span.title2 { color: #93c5fd; } body.dark span.message { color: #e2e8f0; background: #2d1f5e; } body.dark span.warning { color: #fca5a5; background: #3d2000; } body.dark .blacktext { color: #e2e8f0; } body.dark .statusOk { color: #86efac; } body.dark .statusWarn { color: #fca5a5; } /* -------------------------------------------------------------------------- 12. Logbook totals row inputs -------------------------------------------------------------------------- */ body.dark thead input[disabled], body.dark thead input:disabled { color: #93c5fd !important; -webkit-text-fill-color: #93c5fd !important; } /* -------------------------------------------------------------------------- 13. Discretion buttons -------------------------------------------------------------------------- */ body.dark a.discretionButton.green { background: #14291e; color: #86efac; border-color: #166534; } body.dark a.discretionButton.orange { background: #2d1a00; color: #fcd34d; border-color: #854d0e; } body.dark a.discretionButton.red { background: #2d1010; color: #fca5a5; border-color: #991b1b; } body.dark a.discretionButton.gray { background: #263040; color: #94a3b8; border-color: #374f6b; } /* -------------------------------------------------------------------------- 14. Date links -------------------------------------------------------------------------- */ body.dark a.dateLink { background: #1e2d45; color: #93c5fd; border-color: #3b5a8a; } body.dark a.dateLink:hover { background: #263d5e; border-color: #5b82ba; } body.dark a.dateLink.green { background: #14301a; color: #86efac; border-color: #2d6a3f; } body.dark a.dateLink.orange { background: #3a2506; color: #fcd34d; border-color: #92580e; } body.dark a.dateLink.darkorange { background: #2e1a04; color: #fb923c; border-color: #7a3800; } body.dark a.dateLink.red { background: #3a0f0f; color: #fca5a5; border-color: #991b1b; } /* -------------------------------------------------------------------------- 14a. Plain anchors (archive/unarchive, qualification links, pilot names rendered as bare tags with no class) -------------------------------------------------------------------------- */ body.dark a:not([class]), body.dark a.plain { color: #60a5fa; } body.dark a:not([class]):hover, body.dark a.plain:hover { color: #93c5fd; } /* -------------------------------------------------------------------------- 15. Action / link buttons -------------------------------------------------------------------------- */ body.dark a.linkButton { background: #1f2937; color: #60a5fa; border-color: #374f6b; } body.dark a.linkButton:hover { background: #263142; } body.dark a.linkBlueButton { background: #1d4ed8; } body.dark a.linkBlueButton:hover { background: #1e40af; } body.dark a.disabledLinkButton { background: #374f6b; color: #64748b; } body.dark td.button { background: #2d1f5e; } body.dark td.button a { color: #93c5fd; } body.dark td.button a:hover { background: #1d3a5f; } /* -------------------------------------------------------------------------- 16. Icon buttons (E / F / L / T / S) -------------------------------------------------------------------------- */ body.dark .btnIcon { border-color: #374f6b; color: #94a3b8; } body.dark .btnIcon:hover { background: #263142; color: #e2e8f0; border-color: #4a6a8a; } body.dark .btnIcon.btnEdit { border-color: #1d4ed8; color: #60a5fa; } body.dark .btnIcon.btnEdit:hover { background: #1d3a5f; border-color: #3b82f6; } body.dark .youTag { color: #60a5fa; } /* -------------------------------------------------------------------------- 17. Check block divs (training page) -------------------------------------------------------------------------- */ body.dark .checkBlockDiv.green { background: #1a3a26; color: #86efac; } body.dark .checkBlockDiv.orange { background: #3d2800; color: #fcd34d; } body.dark .checkBlockDiv.darkorange { background: #2e1a04; color: #fb923c; } body.dark .checkBlockDiv.red { background: #4a1a1a; color: #fca5a5; } body.dark .checkBlockDiv.gray { background: #263040; color: #94a3b8; } /* -------------------------------------------------------------------------- 18. Can-fly pills -------------------------------------------------------------------------- */ body.dark .canflyBlockDiv { background: #374f6b; } body.dark .canflyBlockDiv.green { background: #1a5c2a; } body.dark .canflyBlockDiv.red { background: #7a1515; } /* -------------------------------------------------------------------------- 19. Company / base selector blocks (home page) -------------------------------------------------------------------------- */ body.dark .companyBlockDiv { background: #1a2535; border-color: #374f6b; box-shadow: 0 2px 4px rgba(0,0,0,0.4); } body.dark .companyBlockDiv:hover { background: #1f3350; border-color: #4a6a8a; } body.dark .companyBlockDiv.currentDiv { background: #1d3a5f; border-color: #3b82f6; } body.dark .baseBlockDiv { background: #1a2535; border-color: #374f6b; color: #e2e8f0; } body.dark .baseContainerDiv a { color: #e2e8f0; } body.dark .baseContainerDiv a:hover .baseBlockDiv { background: #1f3350; border-color: #4a6a8a; color: #f0f6ff; } body.dark .baseBlockDiv.currentBaseDiv { background: #0f1f3d; border-color: #3b82f6; } /* -------------------------------------------------------------------------- 20. Email block divs -------------------------------------------------------------------------- */ body.dark .emailBlockDiv { background: #1a2535; border-color: #374f6b; } /* -------------------------------------------------------------------------- 21. Input elements (general) -------------------------------------------------------------------------- */ body.dark input:read-only { background: #1a2535; } body.dark input[type="text"], body.dark input[type="date"], body.dark input[type="email"], body.dark input[type="password"], body.dark input[type="number"], body.dark select, body.dark textarea { background: #1a2535; color: #e2e8f0; border-color: #374f6b; } /* -------------------------------------------------------------------------- 22. Tick / cross text -------------------------------------------------------------------------- */ body.dark .ticktext { color: #4ade80; } body.dark .redtext { color: #f87171; } /* -------------------------------------------------------------------------- 23. Rotated table header borders -------------------------------------------------------------------------- */ body.dark .table-header-rotated td, body.dark .table-header-rotated th.rotate-45 > div { border-color: #2d3f55; } /* -------------------------------------------------------------------------- AUTO mode — respects the OS/browser dark preference when the user has chosen "Auto" (body has neither .dark nor .light class). Mirrors all the body.dark rules above under a media query instead. -------------------------------------------------------------------------- */ @media (prefers-color-scheme: dark) { body:not(.light):not(.dark) { color: #e2e8f0; background: #111827; } /* Paste of every body.dark rule above, with selector swapped to body:not(.light):not(.dark) — kept separate so the explicit .dark class always wins regardless of OS setting. */ body:not(.light):not(.dark) .topMenuDiv { background: #0f1f3d; } body:not(.light):not(.dark) .subMenuBar { background: #1a2535; border-bottom-color: #2d3f55; } body:not(.light):not(.dark) .subMenuBar a.linkMenuBar { color: #94a3b8; } body:not(.light):not(.dark) .subMenuBar a.linkMenuBar:hover { background: #223046; color: #e2e8f0; } body:not(.light):not(.dark) .subMenuBar a.linkMenuBar.current { background: #1d3a5f; color: #93c5fd; } body:not(.light):not(.dark) .companyLabel { color: #4b5a6e; border-left-color: #2d3f55; } body:not(.light):not(.dark) .tableWrap { background: #1f2937; border-color: #2d3f55; } body:not(.light):not(.dark) table.crewTable thead { background: #0f1f3d; } body:not(.light):not(.dark) table.crewTable td { border-bottom-color: #2d3f55; color: #e2e8f0; } body:not(.light):not(.dark) table.crewTable tr.odd td { background: #263142; } body:not(.light):not(.dark) table.crewTable tr.even td { background: #1f2937; } body:not(.light):not(.dark) table.crewTable tr.currentodd td, body:not(.light):not(.dark) table.crewTable tr.currenteven td { background: #2d2a14; } body:not(.light):not(.dark) table.crewTable tbody tr:hover td { background: #2d4060; } body:not(.light):not(.dark) table.crewTable td.numCell, body:not(.light):not(.dark) table.crewTable td.right { color: #93c5fd; } body:not(.light):not(.dark) table.border { border-color: #2d3f55; } body:not(.light):not(.dark) th { background: #0f1f3d; color: rgba(255,255,255,0.80); border-bottom-color: rgba(255,255,255,0.08); } body:not(.light):not(.dark) th.clickable { background: #142040; } body:not(.light):not(.dark) th.clickable:hover { background: #1a2d55; } body:not(.light):not(.dark) th.clickable.filtered { background: #0a1628; } body:not(.light):not(.dark) td { border-bottom-color: #2d3f55; color: #e2e8f0; } body:not(.light):not(.dark) tr.odd td { background: #263142; } body:not(.light):not(.dark) tr.even td { background: #1f2937; } body:not(.light):not(.dark) tr.currentodd td, body:not(.light):not(.dark) tr.currenteven td { background: #2d2a14; } body:not(.light):not(.dark) tr.odd:hover td, body:not(.light):not(.dark) tr.even:hover td { background: #2d4060 !important; } body:not(.light):not(.dark) tr.red td { background: #4a1a1a; } body:not(.light):not(.dark) tr.orange td { background: #3d2800; } body:not(.light):not(.dark) tr.green td { background: #1a3a26; } body:not(.light):not(.dark) tr td.red { background: #4a1a1a !important; color: #fca5a5 !important; } body:not(.light):not(.dark) tr td.green { background: #1a3a26 !important; color: #86efac !important; } body:not(.light):not(.dark) tr td.orange { background: #3d2800 !important; color: #fcd34d !important; } body:not(.light):not(.dark) tr td.darkorange { background: #3d2000 !important; color: #fb923c !important; } body:not(.light):not(.dark) tr td.gray { background: #263040 !important; color: #94a3b8 !important; } body:not(.light):not(.dark) td.right, body:not(.light):not(.dark) td.numCell { color: #93c5fd; } body:not(.light):not(.dark) th.clickable .filterPill { background: #b45309; color: #fef3c7; } body:not(.light):not(.dark) table.border.recency { background: #1a2535 !important; } body:not(.light):not(.dark) table.border.recency th { background: #1a2535 !important; color: #93c5fd !important; border-bottom-color: #2d3f55 !important; } body:not(.light):not(.dark) table.border.recency tr.odd td, body:not(.light):not(.dark) table.border.recency tr.even td, body:not(.light):not(.dark) table.border.recency tr.odd th, body:not(.light):not(.dark) table.border.recency tr.even th { background: #1a2535 !important; } body:not(.light):not(.dark) .recencyPill--ok { background: #1a3a26 !important; color: #86efac !important; } body:not(.light):not(.dark) .recencyPill--warn { background: #4a1a1a !important; color: #fca5a5 !important; } /* Training checks tables — aircraft type row header */ body:not(.light):not(.dark) table.border.training-checks tbody th { background: #1a2535 !important; color: #93c5fd !important; border-bottom-color: #2d3f55 !important; } body:not(.light):not(.dark) fieldset.edit, body:not(.light):not(.dark) fieldset.search, body:not(.light):not(.dark) fieldset.settings, body:not(.light):not(.dark) fieldset.outerSettings { background: #1a2535; border-color: #2d3f55; } body:not(.light):not(.dark) fieldset legend { color: #64748b; } body:not(.light):not(.dark) input.styledButton, body:not(.light):not(.dark) button.styledButton { color: #e2e8f0; background: #1f2937; border-color: #374f6b; } body:not(.light):not(.dark) input.styledButton.current, body:not(.light):not(.dark) button.styledButton.current { background: #0f1f3d; color: #ffffff; border-color: #1d4ed8; } body:not(.light):not(.dark) fieldset.search input[type="text"] { background: #1a2535; border-color: #374f6b; color: #e2e8f0; } body:not(.light):not(.dark) .pageTitle { color: #e2e8f0; } body:not(.light):not(.dark) h3 { color: #e2e8f0; } body:not(.light):not(.dark) a.discretionButton.green { background: #14291e; color: #86efac; border-color: #166534; } body:not(.light):not(.dark) a.discretionButton.orange { background: #2d1a00; color: #fcd34d; border-color: #854d0e; } body:not(.light):not(.dark) a.discretionButton.red { background: #2d1010; color: #fca5a5; border-color: #991b1b; } body:not(.light):not(.dark) a.discretionButton.gray { background: #263040; color: #94a3b8; border-color: #374f6b; } body:not(.light):not(.dark) a.dateLink { background: #1e2d45; color: #93c5fd; border-color: #3b5a8a; } body:not(.light):not(.dark) a.dateLink:hover { background: #263d5e; border-color: #5b82ba; } body:not(.light):not(.dark) a.dateLink.green { background: #14301a; color: #86efac; border-color: #2d6a3f; } body:not(.light):not(.dark) a.dateLink.orange { background: #3a2506; color: #fcd34d; border-color: #92580e; } body:not(.light):not(.dark) a.dateLink.darkorange { background: #2e1a04; color: #fb923c; border-color: #7a3800; } body:not(.light):not(.dark) a.dateLink.red { background: #3a0f0f; color: #fca5a5; border-color: #991b1b; } body:not(.light):not(.dark) a:not([class]), body:not(.light):not(.dark) a.plain { color: #60a5fa; } body:not(.light):not(.dark) a:not([class]):hover, body:not(.light):not(.dark) a.plain:hover { color: #93c5fd; } body:not(.light):not(.dark) .ticktext { color: #4ade80; } body:not(.light):not(.dark) .redtext { color: #f87171; } body:not(.light):not(.dark) thead input[disabled], body:not(.light):not(.dark) thead input:disabled { color: #93c5fd !important; -webkit-text-fill-color: #93c5fd !important; } body:not(.light):not(.dark) a.linkButton { background: #1f2937; color: #60a5fa; border-color: #374f6b; } body:not(.light):not(.dark) .btnIcon { border-color: #374f6b; color: #94a3b8; } body:not(.light):not(.dark) .btnIcon.btnEdit { border-color: #1d4ed8; color: #60a5fa; } body:not(.light):not(.dark) .checkBlockDiv.green { background: #1a3a26; color: #86efac; } body:not(.light):not(.dark) .checkBlockDiv.orange { background: #3d2800; color: #fcd34d; } body:not(.light):not(.dark) .checkBlockDiv.darkorange { background: #2e1a04; color: #fb923c; } body:not(.light):not(.dark) .checkBlockDiv.red { background: #4a1a1a; color: #fca5a5; } body:not(.light):not(.dark) .checkBlockDiv.gray { background: #263040; color: #94a3b8; } body:not(.light):not(.dark) .companyBlockDiv { background: #1a2535; border-color: #374f6b; } body:not(.light):not(.dark) .companyBlockDiv.currentDiv { background: #1d3a5f; border-color: #3b82f6; } body:not(.light):not(.dark) .baseBlockDiv { background: #1a2535; border-color: #374f6b; color: #e2e8f0; } body:not(.light):not(.dark) input[type="text"], body:not(.light):not(.dark) input[type="date"], body:not(.light):not(.dark) input[type="email"], body:not(.light):not(.dark) input[type="password"], body:not(.light):not(.dark) input[type="number"], body:not(.light):not(.dark) select, body:not(.light):not(.dark) textarea { background: #1a2535; color: #e2e8f0; border-color: #374f6b; } } /* ── Flash message bar — dark mode ─────────────────────────────────────── */ body.dark .flash-info { background: #1e2d45; color: #93c5fd; border-top-color: #2d4a7a; border-bottom-color: #3b5a8a; } body.dark .flash-success { background: #14301a; color: #86efac; border-top-color: #1a4a24; border-bottom-color: #2d6a3f; } body.dark .flash-warning { background: #3a2506; color: #fcd34d; border-top-color: #5a3a08; border-bottom-color: #92580e; } body.dark .flash-error { background: #3a0f0f; color: #fca5a5; border-top-color: #5a1a1a; border-bottom-color: #991b1b; } @media (prefers-color-scheme: dark) { body:not(.light):not(.dark) .flash-info { background: #1e2d45; color: #93c5fd; border-top-color: #2d4a7a; border-bottom-color: #3b5a8a; } body:not(.light):not(.dark) .flash-success { background: #14301a; color: #86efac; border-top-color: #1a4a24; border-bottom-color: #2d6a3f; } body:not(.light):not(.dark) .flash-warning { background: #3a2506; color: #fcd34d; border-top-color: #5a3a08; border-bottom-color: #92580e; } body:not(.light):not(.dark) .flash-error { background: #3a0f0f; color: #fca5a5; border-top-color: #5a1a1a; border-bottom-color: #991b1b; } } /* ── What's New panel — dark mode ───────────────────────────────────────── */ body.dark .whats-new { border-color: #2d4a7a; background: #111827; } body.dark .whats-new h2 { background: #0f2d5c; } body.dark .whats-new h3 { color: #93c5fd; } body.dark .whats-new li { color: #e2e8f0; } body.dark .whats-new a { color: #93c5fd; } @media (prefers-color-scheme: dark) { body:not(.light):not(.dark) .whats-new { border-color: #2d4a7a; background: #111827; } body:not(.light):not(.dark) .whats-new h2 { background: #0f2d5c; } body:not(.light):not(.dark) .whats-new h3 { color: #93c5fd; } body:not(.light):not(.dark) .whats-new li { color: #e2e8f0; } body:not(.light):not(.dark) .whats-new a { color: #93c5fd; } } /* ── Login page layout — dark mode ─────────────────────────────────────── */ body.dark .login-disclaimer { border-color: #2d4a7a; background: #111827; } body.dark .login-disclaimer h2 { background: #0f2d5c; } body.dark .login-disclaimer li { color: #e2e8f0; } body.dark .login-disclaimer a { color: #93c5fd; } body.dark .login-index-header { color: #94a3b8; } @media (prefers-color-scheme: dark) { body:not(.light):not(.dark) .login-disclaimer { border-color: #2d4a7a; background: #111827; } body:not(.light):not(.dark) .login-disclaimer h2 { background: #0f2d5c; } body:not(.light):not(.dark) .login-disclaimer li { color: #e2e8f0; } body:not(.light):not(.dark) .login-disclaimer a { color: #93c5fd; } body:not(.light):not(.dark) .login-index-header { color: #94a3b8; } } /* ── Login card — dark mode ─────────────────────────────────────────────── */ body.dark .login-card { border-color: #2d4a7a; box-shadow: 0 2px 8px rgba(0,0,0,0.4); } body.dark .login-card__header { background: #0f2d5c; } body.dark .login-card__body { background: #111827; } body.dark .login-label { color: #93c5fd; } body.dark .login-input { background: #1a2535; color: #e2e8f0; border-color: #374f6b; } body.dark .login-input:focus { border-color: #60a5fa; box-shadow: 0 0 0 2px rgba(96,165,250,0.2); } @media (prefers-color-scheme: dark) { body:not(.light):not(.dark) .login-card { border-color: #2d4a7a; box-shadow: 0 2px 8px rgba(0,0,0,0.4); } body:not(.light):not(.dark) .login-card__header { background: #0f2d5c; } body:not(.light):not(.dark) .login-card__body { background: #111827; } body:not(.light):not(.dark) .login-label { color: #93c5fd; } body:not(.light):not(.dark) .login-input { background: #1a2535; color: #e2e8f0; border-color: #374f6b; } body:not(.light):not(.dark) .login-input:focus { border-color: #60a5fa; box-shadow: 0 0 0 2px rgba(96,165,250,0.2); } } /* ── PWA offline page ── */ body.dark .offline-page h2 { color: #e2e8f0; } body.dark .offline-page p { color: #94a3b8; } @media (prefers-color-scheme: dark) { body:not(.light):not(.dark) .offline-page h2 { color: #e2e8f0; } body:not(.light):not(.dark) .offline-page p { color: #94a3b8; } } /* ── Duty cards ── */ body.dark .duty-card { background: #1e2a3a; border-color: #2d3f55; } body.dark .duty-card__chip { background: #162030; } body.dark .duty-card__chip-value { color: #e2e8f0; } body.dark .duty-card__chip-label { color: #94a3b8; } body.dark .duty-card__date a { color: #60a5fa; } body.dark .duty-card__notes { color: #94a3b8; } @media (prefers-color-scheme: dark) { body:not(.light):not(.dark) .duty-card { background: #1e2a3a; border-color: #2d3f55; } body:not(.light):not(.dark) .duty-card__chip { background: #162030; } body:not(.light):not(.dark) .duty-card__chip-value { color: #e2e8f0; } body:not(.light):not(.dark) .duty-card__chip-label { color: #94a3b8; } body:not(.light):not(.dark) .duty-card__date a { color: #60a5fa; } body:not(.light):not(.dark) .duty-card__notes { color: #94a3b8; } } /* ── Logbook cards ── */ body.dark .logbook-card { background: #1e2a3a; border-color: #2d3f55; } body.dark .logbook-card__chip { background: #162030; } body.dark .logbook-card__chip-value { color: #e2e8f0; } body.dark .logbook-card__chip-label { color: #94a3b8; } body.dark .logbook-card__type { color: #94a3b8; } body.dark .logbook-card__route { color: #e2e8f0; } body.dark .logbook-card__date a { color: #60a5fa; } @media (prefers-color-scheme: dark) { body:not(.light):not(.dark) .logbook-card { background: #1e2a3a; border-color: #2d3f55; } body:not(.light):not(.dark) .logbook-card__chip { background: #162030; } body:not(.light):not(.dark) .logbook-card__chip-value { color: #e2e8f0; } body:not(.light):not(.dark) .logbook-card__chip-label { color: #94a3b8; } body:not(.light):not(.dark) .logbook-card__type { color: #94a3b8; } body:not(.light):not(.dark) .logbook-card__route { color: #e2e8f0; } body:not(.light):not(.dark) .logbook-card__date a { color: #60a5fa; } } /* ── Pilot summary mobile card ── */ body.dark .pilot-summary-mobile { background: #1e2a3a; border-color: #2d3f55; } body.dark .pilot-summary-mobile__name { color: #e2e8f0; } body.dark .pilot-summary-mobile__meta { color: #94a3b8; } body.dark .pilot-summary-mobile__check { border-color: #2d3f55; color: #94a3b8; } @media (prefers-color-scheme: dark) { body:not(.light):not(.dark) .pilot-summary-mobile { background: #1e2a3a; border-color: #2d3f55; } body:not(.light):not(.dark) .pilot-summary-mobile__name { color: #e2e8f0; } body:not(.light):not(.dark) .pilot-summary-mobile__meta { color: #94a3b8; } body:not(.light):not(.dark) .pilot-summary-mobile__check { border-color: #2d3f55; color: #94a3b8; } } /* ── Training cards ── */ body.dark .training-card { background: #1e2a3a; border-color: #2d3f55; } body.dark .training-card__title { color: #e2e8f0; } body.dark .training-card__title a { color: #60a5fa; } body.dark .training-card__type { color: #94a3b8; } @media (prefers-color-scheme: dark) { body:not(.light):not(.dark) .training-card { background: #1e2a3a; border-color: #2d3f55; } body:not(.light):not(.dark) .training-card__title { color: #e2e8f0; } body:not(.light):not(.dark) .training-card__title a { color: #60a5fa; } body:not(.light):not(.dark) .training-card__type { color: #94a3b8; } } /* ── Admin FTL summary card ── */ body.dark .summary-admin-card { background: #1e2a3a; border-color: #2d3f55; } body.dark .summary-admin-card__name { color: #e2e8f0; } @media (prefers-color-scheme: dark) { body:not(.light):not(.dark) .summary-admin-card { background: #1e2a3a; border-color: #2d3f55; } body:not(.light):not(.dark) .summary-admin-card__name { color: #e2e8f0; } } /* ── Crew cards ── */ body.dark .crew-card { background: #1e2a3a; border-color: #2d3f55; } body.dark .crew-card--current { border-color: #60a5fa; } body.dark .crew-card__name { color: #e2e8f0; } body.dark .crew-card__meta { color: #94a3b8; } body.dark .crew-card__check { background: rgba(255,255,255,0.05); } body.dark .crew-card__select-btn { background: #2d3f55; color: #e2e8f0; } body.dark .crew-card__select-btn:active { background: #3d5070; } body.dark .crew-card__selected-label { color: #4ade80; } body.dark .settings-card__perm--on { background: #14532d; color: #86efac; } body.dark .settings-card__perm--off { background: #1e2a3a; color: #475569; } @media (prefers-color-scheme: dark) { body:not(.light):not(.dark) .crew-card { background: #1e2a3a; border-color: #2d3f55; } body:not(.light):not(.dark) .crew-card--current { border-color: #60a5fa; } body:not(.light):not(.dark) .crew-card__name { color: #e2e8f0; } body:not(.light):not(.dark) .crew-card__meta { color: #94a3b8; } body:not(.light):not(.dark) .crew-card__check { background: rgba(255,255,255,0.05); } body:not(.light):not(.dark) .crew-card__select-btn { background: #2d3f55; color: #e2e8f0; } body:not(.light):not(.dark) .crew-card__selected-label { color: #4ade80; } body:not(.light):not(.dark) .settings-card__perm--on { background: #14532d; color: #86efac; } body:not(.light):not(.dark) .settings-card__perm--off { background: #1e2a3a; color: #475569; } } /* ========================================================================== Show pages — dark mode overrides for disabled fieldset read-only display ========================================================================== */ body.dark fieldset[disabled] input[type="text"], body.dark fieldset[disabled] input[type="number"], body.dark fieldset[disabled] input[type="email"], body.dark fieldset[disabled] input[type="date"], body.dark fieldset[disabled] textarea { background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.12); color: #e2e8f0; -webkit-text-fill-color: #e2e8f0; opacity: 1; } body.dark fieldset[disabled] input[type="radio"], body.dark fieldset[disabled] input[type="checkbox"] { opacity: 0.7; } body.dark fieldset[disabled] label { color: inherit; opacity: 1; } @media (prefers-color-scheme: dark) { body:not(.light):not(.dark) fieldset[disabled] input[type="text"], body:not(.light):not(.dark) fieldset[disabled] input[type="number"], body:not(.light):not(.dark) fieldset[disabled] input[type="email"], body:not(.light):not(.dark) fieldset[disabled] input[type="date"], body:not(.light):not(.dark) fieldset[disabled] textarea { background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.12); color: #e2e8f0; -webkit-text-fill-color: #e2e8f0; opacity: 1; } body:not(.light):not(.dark) fieldset[disabled] input[type="radio"], body:not(.light):not(.dark) fieldset[disabled] input[type="checkbox"] { opacity: 0.7; } body:not(.light):not(.dark) fieldset[disabled] label { color: inherit; opacity: 1; } } /* -------------------------------------------------------------------------- Alphabet scrubber -------------------------------------------------------------------------- */ body.dark .crew-alpha-scrubber { background: rgba(22,32,48,0.92); border-color: #2d3f55; box-shadow: 0 2px 8px rgba(0,0,0,0.4); } body.dark .crew-alpha-scrubber__letter { color: #93c5fd; } body.dark .crew-alpha-scrubber__letter--empty { color: #2d3f55; } body.dark .crew-alpha-scrubber__letter--active { background: #60a5fa; color: #0f1f3d; } @media (prefers-color-scheme: dark) { body:not(.light):not(.dark) .crew-alpha-scrubber { background: rgba(22,32,48,0.92); border-color: #2d3f55; box-shadow: 0 2px 8px rgba(0,0,0,0.4); } body:not(.light):not(.dark) .crew-alpha-scrubber__letter { color: #93c5fd; } body:not(.light):not(.dark) .crew-alpha-scrubber__letter--empty { color: #2d3f55; } body:not(.light):not(.dark) .crew-alpha-scrubber__letter--active { background: #60a5fa; color: #0f1f3d; } }