/* ── Phase 11G — Theme palettes ─────────────────────────────────────────────── Selectable colour palettes for the whole app, layered on top of the existing light/dark system in theme.css. How it works ------------ • JS (config.js) sets `data-theme=""` on , and adds the legacy `light-mode` class for light-family palettes so every existing light-mode readability rule keeps working untouched. • This file is loaded LAST so its variable overrides win, and so the tinted light-palette overrides at the bottom beat the baseline light-mode rules. • `original` = the dark FIDS base (:root in theme.css) — no override needed. • `light` = the baseline light-mode (theme.css) — no override needed. • Every other palette only re-points the core CSS variables; components that already read those variables re-theme automatically. Variable names: the canonical app variables (--bg, --surface, --surface2, --border, --accent, --accent2, --green, --red, --yellow, --purple, --text, --muted) are the source of truth. The Phase 11G semantic aliases below are provided for new/markup use and derive from the canonical ones, so each palette only needs to set the canonical set. */ body { --surface-2: var(--surface2); --accent-2: var(--accent2); --danger: var(--red); --warning: var(--yellow); --success: var(--green); --table-header-bg: var(--surface2); --table-row-bg: var(--surface); --table-row-alt-bg: var(--surface2); --selected-bg: color-mix(in srgb, var(--accent) 20%, transparent); --focus-ring: var(--accent); } /* ── Dark-family palettes ──────────────────────────────────────────────────── */ /* Midnight — deep indigo night. */ body[data-theme="midnight"] { --bg: #0a0e1a; --surface: #111527; --surface2: #1a2036; --border: #2a3252; --accent: #5b8cff; --accent2: #38bdf8; --green: #34d399; --red: #fb7185; --yellow: #fbbf24; --purple: #a78bfa; --text: #e6ebff; --muted: #8390c4; } /* Forest — calm evergreen. */ body[data-theme="forest"] { --bg: #0b1410; --surface: #11201a; --surface2: #16271f; --border: #23463a; --accent: #3fb96a; --accent2: #8bd17c; --green: #4ade80; --red: #f87171; --yellow: #e3c34b; --purple: #a6d49b; --text: #e6f2ea; --muted: #7c9a8a; } /* Ocean — teal & blue depths. */ body[data-theme="ocean"] { --bg: #07131c; --surface: #0d1f2c; --surface2: #142d3c; --border: #214a5f; --accent: #1ec8c8; --accent2: #4fb0ff; --green: #2dd4bf; --red: #fb7185; --yellow: #fcd34d; --purple: #7cc6ff; --text: #e2f3fb; --muted: #7ba0b3; } /* Terminal — black CRT, phosphor green. */ body[data-theme="terminal"] { --bg: #000000; --surface: #0a0f0a; --surface2: #0f1a0f; --border: #1f3a1f; --accent: #33ff66; --accent2: #9dff4d; --green: #33ff66; --red: #ff5f5f; --yellow: #f2ff5f; --purple: #7dff9e; --text: #c8ffd0; --muted: #5f9f67; } /* Copper — warm dark metal. */ body[data-theme="copper"] { --bg: #14100c; --surface: #1d1812; --surface2: #261e15; --border: #3d3120; --accent: #c87f43; --accent2: #e0a35c; --green: #9bb368; --red: #e06a52; --yellow: #e8b94d; --purple: #cf9a6f; --text: #f1e7da; --muted: #9c876c; } /* Graphite — soft neutral dark, easier on the eyes than Original. */ body[data-theme="graphite"] { --bg: #16181c; --surface: #1e2127; --surface2: #262a31; --border: #383d46; --accent: #7aa2f7; --accent2: #9ece6a; --green: #73d99a; --red: #f7768e; --yellow: #e0af68; --purple: #bb9af7; --text: #e4e7ee; --muted: #9aa2b1; } /* Navy — professional deep blue, calmer than Midnight. */ body[data-theme="navy"] { --bg: #0b1626; --surface: #122236; --surface2: #1a2d44; --border: #2a4260; --accent: #4f9ae0; --accent2: #6ab0f0; --green: #46c08a; --red: #f0738a; --yellow: #e6b14f; --purple: #8aa6e0; --text: #e2ecf7; --muted: #8298b5; } /* Plum — muted purple dusk. */ body[data-theme="plum"] { --bg: #160f1c; --surface: #1f1726; --surface2: #281d31; --border: #3d2d48; --accent: #b07fd6; --accent2: #d68fc4; --green: #6fc09a; --red: #f0738a; --yellow: #e0b060; --purple: #b07fd6; --text: #efe6f5; --muted: #9a86a8; } /* High Contrast — maximum legibility, white-on-black with vivid accents. */ body[data-theme="contrast"] { --bg: #000000; --surface: #000000; --surface2: #0a0a0a; --border: #ffffff; --accent: #ffff00; --accent2: #00ffff; --green: #00ff66; --red: #ff5151; --yellow: #ffff00; --purple: #d89bff; --text: #ffffff; --muted: #d4d4d4; --selected-bg: #ffff00; --focus-ring: #00ffff; } body[data-theme="contrast"] tbody tr.selected, body[data-theme="contrast"] tbody tr.selected td { background: #003a3a !important; color: #ffffff !important; } body[data-theme="contrast"] *:focus-visible { outline: 2px solid var(--focus-ring) !important; outline-offset: 1px; } /* ── Light-family palettes ───────────────────────────────────────────────────── These carry the `light-mode` class (so the baseline readability rules apply) and override the core variables here. `data-theme` selectors out-specify the `body.light-mode` variable block, so these palette values win. */ /* Paper — warm off-white stationery. */ body.light-mode[data-theme="paper"] { --bg: #f4efe6; --surface: #fbf7f0; --surface2: #efe8da; --border: #d9cfbb; --accent: #b6772f; --accent2: #2f6f7a; --green: #4f8a52; --red: #c0492f; --yellow: #b9821f; --purple: #8a5a8f; --text: #2c2a25; --muted: #6e665a; } /* Lavender — soft pastel purple. */ body.light-mode[data-theme="lavender"] { --bg: #f3f0fb; --surface: #fbf9ff; --surface2: #efe9fb; --border: #d8cfee; --accent: #7c5cff; --accent2: #b06ad6; --green: #4f9a6a; --red: #d24a6e; --yellow: #b78521; --purple: #7c5cff; --text: #2c2640; --muted: #6d6488; } /* Rose — soft, friendly pink. */ body.light-mode[data-theme="rose"] { --bg: #fdf0f4; --surface: #fff7fa; --surface2: #fbe6ee; --border: #f3c9d8; --accent: #e0467e; --accent2: #b06ad6; --green: #4f9a6a; --red: #d83a5b; --yellow: #c08526; --purple: #b06ad6; --text: #3a2330; --muted: #8a6b76; } /* Midnight Light — calm indigo daytime version of Midnight. */ body.light-mode[data-theme="light-midnight"] { --bg: #eef1fb; --surface: #f8f9ff; --surface2: #e4e9fb; --border: #c8d2f0; --accent: #3f5fd6; --accent2: #2f80ed; --green: #3f8f5a; --red: #d24a5b; --yellow: #b07d1f; --purple: #6a5acd; --text: #1d2440; --muted: #5d6488; } /* Ocean Light — bright aqua daytime version of Ocean. */ body.light-mode[data-theme="light-ocean"] { --bg: #e9f5f8; --surface: #f6fbfc; --surface2: #d9eef2; --border: #b6dbe2; --accent: #0e8f97; --accent2: #2f7fc4; --green: #2f9e8f; --red: #d24a5b; --yellow: #b08020; --purple: #5a8fc4; --text: #103040; --muted: #527484; } /* Terminal Light — technical pale green, dark phosphor text without the glare. */ body.light-mode[data-theme="light-terminal"] { --bg: #eef2ec; --surface: #f7faf5; --surface2: #e2eadd; --border: #c4d3bd; --accent: #2e7d32; --accent2: #4f8f3a; --green: #2e7d32; --red: #c0392b; --yellow: #9a7d1f; --purple: #5a7d5a; --text: #1c2b1c; --muted: #5d6f5d; } /* Forest Light — soft sage office green. */ body.light-mode[data-theme="light-forest"] { --bg: #eef2e8; --surface: #f8faf3; --surface2: #e2ebd8; --border: #c7d6b9; --accent: #2f7d4f; --accent2: #6a9a3f; --green: #3f8f5a; --red: #c0492f; --yellow: #9a8420; --purple: #7a9a5f; --text: #2a3320; --muted: #6a7458; } /* Copper Light — warm cream with copper accents. */ body.light-mode[data-theme="light-copper"] { --bg: #f5ede2; --surface: #fdf8f0; --surface2: #eee2d2; --border: #ddcab2; --accent: #b06a2f; --accent2: #9a7d3f; --green: #5a8a4f; --red: #c0492f; --yellow: #b0801f; --purple: #9a6a5f; --text: #3a2c1d; --muted: #7a6a55; } /* Sky — soft blue daytime office. */ body.light-mode[data-theme="sky"] { --bg: #eaf2fb; --surface: #f7fbff; --surface2: #dceafa; --border: #c0d8f0; --accent: #2f80ed; --accent2: #0e9fd6; --green: #3f8f5a; --red: #d24a5b; --yellow: #b07d1f; --purple: #6a7fd6; --text: #1d2c40; --muted: #5d6f88; } /* Mint — soft green daytime office. */ body.light-mode[data-theme="mint"] { --bg: #e9f5ee; --surface: #f6fcf8; --surface2: #d9eee1; --border: #bcdcc8; --accent: #2f9e6f; --accent2: #3fae8f; --green: #2f9e6f; --red: #d24a5b; --yellow: #a88420; --purple: #5fa07f; --text: #1c332a; --muted: #5d7468; } /* Sand — warm neutral beige. */ body.light-mode[data-theme="sand"] { --bg: #f4efe2; --surface: #fdf9f0; --surface2: #ece3d0; --border: #dacdb2; --accent: #b08a3f; --accent2: #9a7d2f; --green: #5a8a4f; --red: #c0492f; --yellow: #b08020; --purple: #9a7f5f; --text: #33301d; --muted: #74705a; } /* Slate Light — neutral grey-blue professional. */ body.light-mode[data-theme="slate-light"] { --bg: #eef1f4; --surface: #f8fafc; --surface2: #e1e6ec; --border: #c5cdd6; --accent: #3f5a78; --accent2: #5a7d9a; --green: #3f8f5a; --red: #c0495b; --yellow: #a07d1f; --purple: #6a7088; --text: #20262e; --muted: #5d6570; } /* Tinted light palettes (Paper / Lavender / Rose) re-skin the neutral chrome that baseline light-mode hard-codes, so they actually read as their own colour. Semantic status badges and dwell colours are intentionally left in their established light-mode palette so they stay recognisable. */ body.light-mode:not([data-theme="light"]) header { background: linear-gradient(90deg, var(--surface) 0%, var(--surface2) 60%, var(--surface) 100%) !important; } body.light-mode:not([data-theme="light"]) .live-board-bar, body.light-mode:not([data-theme="light"]) thead th, body.light-mode:not([data-theme="light"]) .po-results-table th, body.light-mode:not([data-theme="light"]) .schedules-table th, body.light-mode:not([data-theme="light"]) .holiday-table th, body.light-mode:not([data-theme="light"]) .admin-table th { background: var(--table-header-bg) !important; color: var(--text) !important; } body.light-mode:not([data-theme="light"]) tbody tr:hover, body.light-mode:not([data-theme="light"]) .po-result-row:hover, body.light-mode:not([data-theme="light"]) .schedules-table tr:hover td, body.light-mode:not([data-theme="light"]) .holiday-table tr:hover td, body.light-mode:not([data-theme="light"]) .admin-table tr:hover td { background: var(--selected-bg) !important; } body.light-mode:not([data-theme="light"]) tbody tr.selected { background: var(--selected-bg) !important; } body.light-mode:not([data-theme="light"]) .td-door { color: var(--accent) !important; } body.light-mode:not([data-theme="light"]) .td-order { color: var(--purple) !important; } body.light-mode:not([data-theme="light"]) .td-time, body.light-mode:not([data-theme="light"]) .col-arrival, body.light-mode:not([data-theme="light"]) .col-departure { color: var(--accent2) !important; } body.light-mode:not([data-theme="light"]) .filter-chip.active, body.light-mode:not([data-theme="light"]) .pill-dropdown.active .pill-dropdown-trigger, body.light-mode:not([data-theme="light"]) .settings-inner-tab.active, body.light-mode:not([data-theme="light"]) .analytics-mode-btn.active, body.light-mode:not([data-theme="light"]) .day-chip.selected, body.light-mode:not([data-theme="light"]) .wh-pill.active, body.light-mode:not([data-theme="light"]) .tab-btn.active, body.light-mode:not([data-theme="light"]) .tab-button.active, body.light-mode:not([data-theme="light"]) [data-report-tab].active { background: var(--selected-bg) !important; color: var(--accent) !important; border-color: var(--accent) !important; } body.light-mode:not([data-theme="light"]) .cell-editable:hover { background: var(--selected-bg) !important; box-shadow: inset 0 0 0 1px var(--accent) !important; } body.light-mode:not([data-theme="light"]) .cell-editing { box-shadow: inset 0 0 0 1px var(--accent), 0 0 0 2px var(--selected-bg) !important; } body.light-mode:not([data-theme="light"]) .ticker { border-top-color: var(--accent) !important; } body.light-mode:not([data-theme="light"]) .ticker-item span { color: var(--accent) !important; } body.light-mode:not([data-theme="light"]) .week-nav { border-top-color: var(--accent) !important; } /* ── Settings → Display theme picker ──────────────────────────────────────── */ .theme-picker { display: flex; flex-direction: column; gap: 20px; margin-top: 4px; } .theme-section-label { font-size: 0.82rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text); } .theme-section-hint { font-size: 0.74rem; color: var(--muted); margin: 2px 0 8px; } .theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; } .theme-card { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; position: relative; padding: 12px; border: 2px solid var(--border); border-radius: 10px; background: var(--surface2); color: var(--text); cursor: pointer; text-align: left; transition: border-color 0.12s ease, transform 0.12s ease, box-shadow 0.12s ease; } .theme-card:hover { border-color: var(--accent); transform: translateY(-1px); } .theme-card.active { border-color: var(--accent); box-shadow: 0 0 0 2px var(--selected-bg); } .theme-card-swatches { display: flex; gap: 4px; } .theme-swatch { width: 18px; height: 18px; border-radius: 4px; border: 1px solid rgba(127, 127, 127, 0.35); } .theme-card-name { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.02em; } .theme-card-check { position: absolute; top: 8px; right: 10px; color: var(--accent); font-weight: 900; opacity: 0; } .theme-card.active .theme-card-check { opacity: 1; } /* Phase 17L: wrap Live Board comments like Order / PO# without widening rows. */ .table-wrap .board-scroll .comment-cell { max-width: 160px !important; white-space: normal !important; overflow-wrap: anywhere !important; word-break: break-word !important; line-height: 1.25 !important; /* Fix 2: top-align with the other text columns in tall Order/PO# rows. */ vertical-align: top !important; overflow: hidden !important; text-overflow: clip !important; max-height: calc(1.25em * 2 + 2px) !important; } /* Phase 17L-B: increase Live Board field/header text. Door header is included so it carries the same scale/weight/letter-spacing as every other header (it previously stayed at the smaller base size and looked weaker). */ .table-wrap .board-scroll > table thead th { font-size: 0.74rem !important; } .table-wrap .board-scroll > table tbody td:not(.td-door), .table-wrap .board-scroll > table tbody td:not(.td-door) .status-badge, .table-wrap .board-scroll > table tbody td:not(.td-door) .btn-bol-view, .table-wrap .board-scroll > table tbody td:not(.td-door) .btn-bol-upload, .table-wrap .board-scroll > table tbody td:not(.td-door) .row-menu-btn { font-size: 0.92rem !important; } .table-wrap .board-scroll > table tbody .td-order, .table-wrap .board-scroll > table tbody .td-time, .table-wrap .board-scroll > table tbody .td-shipto, .table-wrap .board-scroll > table tbody .td-customer, .table-wrap .board-scroll > table tbody .td-carrier, .table-wrap .board-scroll > table tbody .comment-cell, .table-wrap .board-scroll > table tbody .dwell-ok, .table-wrap .board-scroll > table tbody .dwell-warn, .table-wrap .board-scroll > table tbody .dwell-crit, .table-wrap .board-scroll > table tbody .col-loader, .table-wrap .board-scroll > table tbody .col-ocean, .table-wrap .board-scroll > table tbody .col-corner, .table-wrap .board-scroll > table tbody .col-wh, .table-wrap .board-scroll > table tbody .col-pallets, .table-wrap .board-scroll > table tbody .col-status, .table-wrap .board-scroll > table tbody .col-bol, .table-wrap .board-scroll > table tbody .cc-col { font-size: 0.92rem !important; } /* Attachments column only holds an upload/view button, so keep it narrow and centered. The header shows the app's paperclip icon (title/aria-label "Attachments") instead of a wrapped word — the icon inherits text color via currentColor so it reads clearly in both light and dark themes. */ .table-wrap .board-scroll > table thead th.col-bol { text-align: center !important; min-width: 64px; white-space: nowrap; } .table-wrap .board-scroll > table thead th.col-bol .col-bol-ico { display: inline-block; vertical-align: middle; /* Match the surrounding header cap-height so the icon never grows the row. */ width: 15px; height: 15px; } .table-wrap .board-scroll > table thead th.col-wh { font-size: 0.82rem !important; } .table-wrap .board-scroll > table tbody td.col-wh { font-size: 1rem !important; } .table-wrap .board-scroll > table tbody td.col-wh .wh-tag, .table-wrap .board-scroll > table tbody td.col-wh .wh-code-chip, .table-wrap .board-scroll > table tbody td.col-wh [class*="wh-"] { font-size: 0.82rem !important; line-height: 1.15 !important; padding: 3px 8px !important; }