/* ========================================================================= ptick theme system — token-driven color schemes + fonts. Selected via and . Tokens cascade into Bootstrap surfaces so the WHOLE app chrome re-skins. ========================================================================= */ /* Palette token blocks live in separate files owned by the palette agents. They may not exist yet — a missing @import 404s harmlessly until it lands. */ @import url('themes/accessible.css'); @import url('themes/brand.css'); @import url('themes/fun.css'); /* ---- Base token set (light / default) -------------------------------- */ :root { --ptick-bg: #f8f9fa; --ptick-surface: #ffffff; --ptick-surface-2: #f1f3f5; --ptick-text: #212529; --ptick-muted: #6c757d; --ptick-border: #dee2e6; --ptick-primary: #2563eb; --ptick-accent: #2563eb; --ptick-link: rgb(26,13,171); --ptick-font-base: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --ptick-font-head: var(--ptick-font-base); --ptick-font-scale: 1; /* overridden by font-size attr */ --ptick-text-shadow: none; /* Global trip/vessel STATUS colours — themes (esp. colorblind) override these, and views route their hardcoded status colours through the tokens. */ --ptick-st-scheduled: #5b8def; --ptick-st-boarding: #e8902e; --ptick-st-departed: #2f9e5b; --ptick-st-arrived: #8a97a8; --ptick-st-cancelled: #d9534f; --ptick-st-maint: #6c757d; /* Sidebar tokens (admin shell reads these via the .admin-shell overrides) */ --ptick-sb-bg: #212529; --ptick-sb-bg2: #2c3034; --ptick-sb-text: #cbd5e1; --ptick-sb-muted: #6c757d; --ptick-sb-active: #2563eb; --ptick-sb-section-bg: rgba(148,163,184,.07); --ptick-sb-section-border: rgba(148,163,184,.14); } /* ---- Font-size scale (sm / md / lg) ---------------------------------- */ html[data-ptick-font-size="sm"] { --ptick-font-scale: .9; } html[data-ptick-font-size="md"] { --ptick-font-scale: 1; } html[data-ptick-font-size="lg"] { --ptick-font-scale: 1.15; } html[data-ptick-font-size] { font-size: calc(16px * var(--ptick-font-scale)); } /* ========================================================================= THEME VARIANTS ========================================================================= */ /* ---- dark ------------------------------------------------------------ */ html[data-ptick-theme="dark"] { --ptick-bg: #0f1115; --ptick-surface: #1a1d23; --ptick-surface-2: #22262d; --ptick-text: #e6e8eb; --ptick-muted: #9aa3ad; --ptick-border: #343a40; --ptick-primary: #3b82f6; --ptick-accent: #3b82f6; --ptick-link: #7aa7ff; --ptick-sb-bg: #15171c; --ptick-sb-bg2: #22262d; --ptick-sb-text: #cbd5e1; --ptick-sb-active: #3b82f6; --ptick-sb-section-bg: rgba(148,163,184,.06); --ptick-sb-section-border: rgba(148,163,184,.12); } /* ---- retro-terminal — black bg, green phosphor, CRT glow ------------- */ html[data-ptick-theme="retro-terminal"] { --ptick-bg: #000600; --ptick-surface: #02140a; --ptick-surface-2: #04200f; --ptick-text: #33ff66; --ptick-muted: #1f9a45; --ptick-border: #0c5e2a; --ptick-primary: #33ff66; --ptick-accent: #33ff66; --ptick-link: #66ff99; --ptick-font-base: "Share Tech Mono", "VT323", ui-monospace, "Courier New", monospace; --ptick-font-head: var(--ptick-font-base); --ptick-text-shadow: 0 0 4px rgba(51,255,102,.45); --ptick-sb-bg: #02140a; --ptick-sb-bg2: #04200f; --ptick-sb-text: #33ff66; --ptick-sb-muted: #1f9a45; --ptick-sb-active: #0c5e2a; --ptick-sb-section-bg: rgba(51,255,102,.06); --ptick-sb-section-border: rgba(51,255,102,.22); } /* CRT scanlines overlay */ html[data-ptick-theme="retro-terminal"] body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 9999; background: repeating-linear-gradient(rgba(0,0,0,0) 0, rgba(0,0,0,0) 2px, rgba(0,0,0,.18) 3px, rgba(0,0,0,0) 4px); mix-blend-mode: multiply; } /* ---- matrix — black bg, bright matrix-green ------------------------- */ html[data-ptick-theme="matrix"] { --ptick-bg: #000000; --ptick-surface: #061206; --ptick-surface-2: #0a1f0a; --ptick-text: #00ff41; --ptick-muted: #11a52c; --ptick-border: #0a6e1e; --ptick-primary: #00ff41; --ptick-accent: #39ff14; --ptick-link: #5dff7a; --ptick-font-base: "VT323", "Share Tech Mono", ui-monospace, "Courier New", monospace; --ptick-font-head: var(--ptick-font-base); --ptick-text-shadow: 0 0 6px rgba(0,255,65,.55); --ptick-sb-bg: #061206; --ptick-sb-bg2: #0a1f0a; --ptick-sb-text: #00ff41; --ptick-sb-muted: #11a52c; --ptick-sb-active: #0a6e1e; --ptick-sb-section-bg: rgba(0,255,65,.07); --ptick-sb-section-border: rgba(0,255,65,.25); } html[data-ptick-theme="matrix"] { font-size: calc(18px * var(--ptick-font-scale)); } /* ---- fraktur (Altdeutsch) — parchment + blackletter --------------- */ html[data-ptick-theme="fraktur"] { --ptick-bg: #efe6d2; --ptick-surface: #f7f1e1; --ptick-surface-2: #e9dcc0; --ptick-text: #2a1c0a; --ptick-muted: #6e5836; --ptick-border: #c8b48a; --ptick-primary: #6b1f1f; --ptick-accent: #8a2b2b; --ptick-link: #6b1f1f; --ptick-font-base: Georgia, "Times New Roman", serif; --ptick-font-head: "UnifrakturMaguntia", Georgia, serif; --ptick-sb-bg: #2a1c0a; --ptick-sb-bg2: #3a2810; --ptick-sb-text: #efe6d2; --ptick-sb-muted: #b89b6e; --ptick-sb-active: #6b1f1f; --ptick-sb-section-bg: rgba(107,31,31,.08); --ptick-sb-section-border: rgba(107,31,31,.25); } html[data-ptick-theme="fraktur"] h1, html[data-ptick-theme="fraktur"] h2, html[data-ptick-theme="fraktur"] h3, html[data-ptick-theme="fraktur"] .navbar-brand { font-family: var(--ptick-font-head); letter-spacing: .02em; } /* ---- high-contrast — pure black/white, thick borders ---------------- */ html[data-ptick-theme="high-contrast"] { --ptick-bg: #ffffff; --ptick-surface: #ffffff; --ptick-surface-2: #ffffff; --ptick-text: #000000; --ptick-muted: #000000; --ptick-border: #000000; --ptick-primary: #0000cc; --ptick-accent: #0000cc; --ptick-link: #0000cc; --ptick-sb-bg: #000000; --ptick-sb-bg2: #000000; --ptick-sb-text: #ffffff; --ptick-sb-muted: #ffffff; --ptick-sb-active: #0000cc; --ptick-sb-section-bg: rgba(255,255,255,.08); --ptick-sb-section-border: #ffffff; } html[data-ptick-theme="high-contrast"] * { border-color: #000 !important; } html[data-ptick-theme="high-contrast"] .admin-sidebar *, html[data-ptick-theme="high-contrast"] .admin-sidebar { border-color: #fff !important; } html[data-ptick-theme="high-contrast"] body, html[data-ptick-theme="high-contrast"] .card, html[data-ptick-theme="high-contrast"] .table, html[data-ptick-theme="high-contrast"] .btn { font-weight: 600; } html[data-ptick-theme="high-contrast"] .card, html[data-ptick-theme="high-contrast"] .table, html[data-ptick-theme="high-contrast"] .form-control, html[data-ptick-theme="high-contrast"] .form-select { border-width: 2px !important; } html[data-ptick-theme="high-contrast"] :focus-visible { outline: 3px solid #0000cc !important; outline-offset: 2px !important; box-shadow: 0 0 0 .25rem rgba(0,0,204,.4) !important; } /* ========================================================================= TOKEN → CHROME application (skips default light, where overrides are noops) Applies to every non-default theme so backgrounds/cards/tables re-skin. ========================================================================= */ html[data-ptick-theme]:not([data-ptick-theme="light"]) body { background-color: var(--ptick-bg) !important; color: var(--ptick-text); font-family: var(--ptick-font-base); text-shadow: var(--ptick-text-shadow); } html[data-ptick-theme]:not([data-ptick-theme="light"]) { --bs-body-bg: var(--ptick-bg); --bs-body-color: var(--ptick-text); --bs-border-color: var(--ptick-border); --bs-primary: var(--ptick-primary); --bs-link-color: var(--ptick-link); --bs-link-hover-color: var(--ptick-link); --bs-emphasis-color: var(--ptick-text); --bs-secondary-color: var(--ptick-muted); --bs-tertiary-bg: var(--ptick-surface-2); } html[data-ptick-theme]:not([data-ptick-theme="light"]) .card, html[data-ptick-theme]:not([data-ptick-theme="light"]) .list-group-item, html[data-ptick-theme]:not([data-ptick-theme="light"]) .modal-content, html[data-ptick-theme]:not([data-ptick-theme="light"]) .dropdown-menu, html[data-ptick-theme]:not([data-ptick-theme="light"]) .offcanvas, html[data-ptick-theme]:not([data-ptick-theme="light"]) .accordion-item { background-color: var(--ptick-surface); color: var(--ptick-text); border-color: var(--ptick-border); } /* .bg-white is a hard !important utility — re-skin it to the surface token. */ html[data-ptick-theme]:not([data-ptick-theme="light"]) .bg-white { background-color: var(--ptick-surface) !important; color: var(--ptick-text); } html[data-ptick-theme]:not([data-ptick-theme="light"]) .card-header, html[data-ptick-theme]:not([data-ptick-theme="light"]) .card-footer, html[data-ptick-theme]:not([data-ptick-theme="light"]) .table > thead, html[data-ptick-theme]:not([data-ptick-theme="light"]) .bg-light { background-color: var(--ptick-surface-2) !important; color: var(--ptick-text); border-color: var(--ptick-border); } html[data-ptick-theme]:not([data-ptick-theme="light"]) .table { --bs-table-bg: transparent; --bs-table-color: var(--ptick-text); --bs-table-border-color: var(--ptick-border); --bs-table-striped-bg: var(--ptick-surface-2); --bs-table-striped-color: var(--ptick-text); --bs-table-hover-bg: var(--ptick-surface-2); --bs-table-hover-color: var(--ptick-text); color: var(--ptick-text); } /* Contextual row/cell variants hard-code light bg via their own --bs-table-* — remap to surface tokens so emphasis rows stay readable in dark themes. */ html[data-ptick-theme]:not([data-ptick-theme="light"]) .table-light, html[data-ptick-theme]:not([data-ptick-theme="light"]) .table-secondary, html[data-ptick-theme]:not([data-ptick-theme="light"]) .table-active { --bs-table-color: var(--ptick-text); --bs-table-border-color: var(--ptick-border); } html[data-ptick-theme]:not([data-ptick-theme="light"]) .table-light { --bs-table-bg: var(--ptick-surface); } html[data-ptick-theme]:not([data-ptick-theme="light"]) .table-secondary, html[data-ptick-theme]:not([data-ptick-theme="light"]) .table-active { --bs-table-bg: var(--ptick-surface-2); } html[data-ptick-theme]:not([data-ptick-theme="light"]) .form-control, html[data-ptick-theme]:not([data-ptick-theme="light"]) .form-select, html[data-ptick-theme]:not([data-ptick-theme="light"]) .input-group-text { background-color: var(--ptick-surface-2); color: var(--ptick-text); border-color: var(--ptick-border); } html[data-ptick-theme]:not([data-ptick-theme="light"]) .form-control::placeholder { color: var(--ptick-muted); } html[data-ptick-theme]:not([data-ptick-theme="light"]) .text-muted, html[data-ptick-theme]:not([data-ptick-theme="light"]) .text-secondary { color: var(--ptick-muted) !important; } /* Exclude theme-preview rows (.ptick-theme-opt): each previews its OWN theme's colours, so the active theme must not repaint their text/hover. */ html[data-ptick-theme]:not([data-ptick-theme="light"]) .dropdown-item:not(.ptick-theme-opt) { color: var(--ptick-text); } html[data-ptick-theme]:not([data-ptick-theme="light"]) .dropdown-item:not(.ptick-theme-opt):hover, html[data-ptick-theme]:not([data-ptick-theme="light"]) .dropdown-item:not(.ptick-theme-opt):focus { background-color: var(--ptick-surface-2); color: var(--ptick-text); } html[data-ptick-theme]:not([data-ptick-theme="light"]) .btn-primary { --bs-btn-bg: var(--ptick-primary); --bs-btn-border-color: var(--ptick-primary); --bs-btn-hover-bg: var(--ptick-accent); --bs-btn-hover-border-color: var(--ptick-accent); } /* Heading font (mainly for fraktur, harmless elsewhere as it inherits head=base) */ html[data-ptick-theme]:not([data-ptick-theme="light"]) h1, html[data-ptick-theme]:not([data-ptick-theme="light"]) h2, html[data-ptick-theme]:not([data-ptick-theme="light"]) h3 { font-family: var(--ptick-font-head); } /* Public navbar follows sidebar tokens so the chrome stays cohesive */ html[data-ptick-theme]:not([data-ptick-theme="light"]) .navbar.bg-dark { background-color: var(--ptick-sb-bg) !important; } html[data-ptick-theme]:not([data-ptick-theme="light"]) .site-footer { background: var(--ptick-sb-bg); color: var(--ptick-sb-text); } /* ========================================================================= ADMIN SIDEBAR — route the existing shell vars through theme tokens. (admin.blade defines defaults on .admin-shell; these win via theme attr.) ========================================================================= */ html[data-ptick-theme] .admin-shell { --admin-sb-bg: var(--ptick-sb-bg); --admin-sb-bg2: var(--ptick-sb-bg2); --admin-sb-text: var(--ptick-sb-text); --admin-sb-muted: var(--ptick-sb-muted); --admin-sb-active: var(--ptick-sb-active); } html[data-ptick-theme]:not([data-ptick-theme="light"]) .admin-main { color: var(--ptick-text); } /* ========================================================================= ITEM 9 — sidebar section panels (token-driven, themes-aware) ========================================================================= */ .admin-nav-section { background: var(--ptick-sb-section-bg); border: 1px solid var(--ptick-sb-section-border); border-left: 3px solid var(--admin-sb-active, var(--ptick-sb-active)); border-radius: 7px; padding: 8px 10px 6px; } .admin-sidebar .admin-nav-section .text-uppercase { margin-top: 0; } /* ========================================================================= Contrast fixes — every theme. Found by tools/probe-themes.mjs. ========================================================================= */ /* ---- Sidebar text — must follow the SIDEBAR tokens, not the page tokens. The earlier global utility remaps (`.text-body`/`.text-dark`/`.text-black` → --ptick-text, `.text-muted`/`.text-secondary` → --ptick-muted) carry the `html[data-ptick-theme]` prefix, so they out-specify the plain `.admin-sidebar .nav-link` colour and bleed the PAGE text colour onto the dark sidebar. In themes where page-text ≈ sidebar-bg (fraktur, high-contrast) the links vanish entirely. Re-assert with a matching prefix so these win. */ html[data-ptick-theme] .admin-sidebar a, html[data-ptick-theme] .admin-sidebar .nav-link, html[data-ptick-theme] .admin-sidebar .nav-link.text-body, html[data-ptick-theme] .admin-sidebar .text-body, html[data-ptick-theme] .admin-sidebar .text-dark, html[data-ptick-theme] .admin-sidebar .text-black { color: var(--admin-sb-text, var(--ptick-sb-text)) !important; } html[data-ptick-theme] .admin-sidebar .text-muted, html[data-ptick-theme] .admin-sidebar .small.text-muted, html[data-ptick-theme] .admin-sidebar .text-secondary, html[data-ptick-theme] .admin-sidebar small.text-muted { color: var(--admin-sb-muted, var(--ptick-sb-muted)) !important; } /* Active item keeps its own bright colour (admin.blade sets #fff on the active bg). */ html[data-ptick-theme] .admin-sidebar .nav-link.fw-semibold, html[data-ptick-theme] .admin-sidebar .nav-link.text-primary { color: #fff !important; } /* ---- Bootstrap utility .text-dark / .text-body / .text-black — in non-light themes the surrounding surface is dark, so explicit "dark text" goes invisible. Map them to the themed body text colour so badges and other utility-coloured chips remain readable. */ html[data-ptick-theme]:not([data-ptick-theme="light"]) .text-dark, html[data-ptick-theme]:not([data-ptick-theme="light"]) .text-body, html[data-ptick-theme]:not([data-ptick-theme="light"]) .text-black { color: var(--ptick-text) !important; } /* Exception: when .text-dark also carries a LIGHT bootstrap utility background (warning/info/light/white) the dark text is intentional — chip is light-coloured and the dark glyph is what makes it readable. Restore #212529 there. Same for the .text-dark used INSIDE such chips. Without this, the yellow "min late" badge reads as light-on-yellow (~1.7 ratio) in dark/retro/matrix/fraktur themes. */ html[data-ptick-theme]:not([data-ptick-theme="light"]) .text-dark.bg-warning, html[data-ptick-theme]:not([data-ptick-theme="light"]) .text-dark.bg-info, html[data-ptick-theme]:not([data-ptick-theme="light"]) .text-dark.bg-light, html[data-ptick-theme]:not([data-ptick-theme="light"]) .text-dark.bg-white, html[data-ptick-theme]:not([data-ptick-theme="light"]) .bg-warning .text-dark, html[data-ptick-theme]:not([data-ptick-theme="light"]) .bg-info .text-dark, html[data-ptick-theme]:not([data-ptick-theme="light"]) .bg-light .text-dark, html[data-ptick-theme]:not([data-ptick-theme="light"]) .bg-white .text-dark, html[data-ptick-theme]:not([data-ptick-theme="light"]) .text-dark.bg-warning *, html[data-ptick-theme]:not([data-ptick-theme="light"]) .text-dark.bg-info * { color: #212529 !important; } /* ---- .btn-primary — `:not(.light) .btn-primary` already remaps --bs-btn-bg to --ptick-primary, but for retro-terminal & matrix the primary IS bright green; white text on bright green is invisible (~1.3 contrast). Switch the button text colour to black for those themes. */ html[data-ptick-theme="retro-terminal"] .btn-primary, html[data-ptick-theme="matrix"] .btn-primary { --bs-btn-color: #000; --bs-btn-hover-color: #000; --bs-btn-active-color: #000; --bs-btn-disabled-color: #000; } /* ---- list-group active item. Bootstrap's default active state paints the row Bootstrap-primary blue with white text; the admin-link rule then re-colours nested / back to the blue link colour, giving blue text on blue background. In non-light themes the global .list-group-item remap also overrides the active bg to the surface colour, so the active row stops standing out at all. Fix: force a contrasting bg + white text + reset nested text colour. --ptick-sb-active is chosen everywhere to be readable with white. */ .admin-main .list-group-item.active, .list-group-item.active { color: #fff !important; background-color: var(--ptick-sb-active, #0d6efd) !important; border-color: var(--ptick-sb-active, #0d6efd) !important; } .admin-main .list-group-item.active, .admin-main .list-group-item.active *, .admin-main .list-group-item.active code, .admin-main .list-group-item.active strong { color: #fff !important; } .admin-main .list-group-item.active .text-white-50 { color: rgba(255,255,255,.78) !important; } /* ========================================================================= THEME-SWITCHER MENU — per-item swatch + live previews Each row previews its own theme (bg/text/font/swatch). The dropdown renders under the CURRENT theme, so each row needs an explicit rule (palette agents add rules for their own keys in the palette files; the core 6 + auto live here). The ✓ uses the .ptick-check opacity logic from the switcher partial. ========================================================================= */ .ptick-theme-switcher .ptick-sw { width: 12px; height: 12px; border-radius: 3px; display: inline-block; flex: 0 0 auto; background: var(--ptick-accent); } .ptick-theme-switcher .dropdown-item.ptick-theme-opt { border-radius: 4px; } /* Baseline preview font: stop the ACTIVE theme's body font (var(--ptick-font-base), e.g. Fraktur/Matrix/VT323) from bleeding into rows that have no font of their own. Kept at 2-class specificity (0,2,0) so the special-font per-item rules below — and in the imported palette files — (0,3,0) always win and still preview their typeface. */ .dropdown-item.ptick-theme-opt { font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } /* Per-item previews (existing 6 + auto). Hover/focus keep each readable. */ .ptick-theme-switcher .dropdown-item[data-theme="light"] { background:#fff; color:#212529; } .ptick-theme-switcher .dropdown-item[data-theme="light"] .ptick-sw { background:#2563eb; } .ptick-theme-switcher .dropdown-item[data-theme="light"]:hover, .ptick-theme-switcher .dropdown-item[data-theme="light"]:focus { background:#eef2ff; color:#212529; } .ptick-theme-switcher .dropdown-item[data-theme="dark"] { background:#212529; color:#e9ecef; } .ptick-theme-switcher .dropdown-item[data-theme="dark"] .ptick-sw { background:#7aa7ff; } .ptick-theme-switcher .dropdown-item[data-theme="dark"]:hover, .ptick-theme-switcher .dropdown-item[data-theme="dark"]:focus { background:#2c3034; color:#fff; } .ptick-theme-switcher .dropdown-item[data-theme="retro-terminal"] { background:#0a0f0a; color:#33ff66; font-family:'VT323',monospace; } .ptick-theme-switcher .dropdown-item[data-theme="retro-terminal"] .ptick-sw { background:#33ff66; } .ptick-theme-switcher .dropdown-item[data-theme="retro-terminal"]:hover, .ptick-theme-switcher .dropdown-item[data-theme="retro-terminal"]:focus { background:#0f1a0f; color:#7dff9c; } .ptick-theme-switcher .dropdown-item[data-theme="matrix"] { background:#000; color:#00ff41; font-family:'Share Tech Mono',monospace; } .ptick-theme-switcher .dropdown-item[data-theme="matrix"] .ptick-sw { background:#00ff41; } .ptick-theme-switcher .dropdown-item[data-theme="matrix"]:hover, .ptick-theme-switcher .dropdown-item[data-theme="matrix"]:focus { background:#0a140a; color:#5bff84; } .ptick-theme-switcher .dropdown-item[data-theme="fraktur"] { background:#f3e9d2; color:#3a2a18; font-family:'UnifrakturMaguntia',serif; } .ptick-theme-switcher .dropdown-item[data-theme="fraktur"] .ptick-sw { background:#6b1f1f; } .ptick-theme-switcher .dropdown-item[data-theme="fraktur"]:hover, .ptick-theme-switcher .dropdown-item[data-theme="fraktur"]:focus { background:#e9dcbe; color:#2a1d0f; } .ptick-theme-switcher .dropdown-item[data-theme="high-contrast"] { background:#fff; color:#000; font-weight:700; border:1px solid #000; } .ptick-theme-switcher .dropdown-item[data-theme="high-contrast"] .ptick-sw { background:#0000cc; } .ptick-theme-switcher .dropdown-item[data-theme="high-contrast"]:hover, .ptick-theme-switcher .dropdown-item[data-theme="high-contrast"]:focus { background:#000; color:#fff; } .ptick-theme-switcher .dropdown-item[data-theme="auto"] { background:linear-gradient(90deg,#fff 50%,#212529 50%); color:#666; } .ptick-theme-switcher .dropdown-item[data-theme="auto"] .ptick-theme-label { text-shadow:0 0 2px #fff, 0 0 3px #fff; } .ptick-theme-switcher .dropdown-item[data-theme="auto"] .ptick-sw { background:linear-gradient(90deg,#2563eb,#7aa7ff); } .ptick-theme-switcher .dropdown-item[data-theme="auto"]:hover, .ptick-theme-switcher .dropdown-item[data-theme="auto"]:focus { background:linear-gradient(90deg,#eef2ff 50%,#2c3034 50%); color:#444; }