/* ========================================================================== WrenchUr CMMS - LIGHT MODE. See ui.js initTheme(): one attribute on , remembered per device. Dark is the default (app.css). Site-style: white ground, light-grey bands, the logo blue as the accent, navy headers - and the heavy dark outlines the owner asked for (2px of --line on every surface and control). Every pair validated, see app.css. ========================================================================== */ :root{color-scheme:dark;} html[data-theme="light"]{ color-scheme:light; --bg:#ffffff; --chrome:#ffffff; --panel:#F3F5F8; --panel-2:#E9EDF2; --line:#26313F; /* the heavy outline colour */ --text:#101720; --muted:#4A5868; --accent:#1C4EA8; --accent-text:#ffffff; --accent-hover:#163E88; --accent-dim:rgba(28,78,168,.10); --accent-line:rgba(28,78,168,.55); --accent-hi:rgba(28,78,168,.18); --target:#C81058; --good:#137140; --warn:#8F5000; --bad:#C62828; --cta:#C2410C; --cta-text:#ffffff; --cta-hover:#A8380A; --cta-dim:rgba(194,65,12,.10); --motif-ink:var(--brand); --glow:rgba(28,78,168,.13); --shadow:0 6px 24px rgba(16,23,32,.22); --shadow-sm:0 2px 10px rgba(16,23,32,.14); } /* The dicing mark on the hub and landing page: on white the 5% used on navy all but vanishes. Owner, 2026-09-02: "the emblem that shows in dark mode on the tile screen should also show in the light screen its nice". */ /* 13% read as nothing on the owner's monitor ("I do not see anything in the light mode") — a quarter of the logo blue is a clear pale mark on white. */ html[data-theme="light"] .hub-ornament{opacity:.26;} html[data-theme="light"] .landing-motif{opacity:.16;} /* heavy outlines: 2px of --line on every surface and control */ html[data-theme="light"] button, html[data-theme="light"] input, html[data-theme="light"] textarea, html[data-theme="light"] select, html[data-theme="light"] .card, html[data-theme="light"] .tile, html[data-theme="light"] .item, html[data-theme="light"] .brow, html[data-theme="light"] .permlist, html[data-theme="light"] .vaddr, html[data-theme="light"] .mailbody, html[data-theme="light"] .maphint, html[data-theme="light"] .chip, html[data-theme="light"] #toast{border-width:2px; border-color:var(--line);} html[data-theme="light"] .pill{border-width:1.5px; border-color:var(--line); color:var(--text);} html[data-theme="light"] .pill.accent{border-color:var(--accent); color:var(--accent);} html[data-theme="light"] .pill.warn{border-color:var(--warn); color:var(--warn);} html[data-theme="light"] .pill.bad{border-color:var(--bad); color:var(--bad);} html[data-theme="light"] .pill.good{border-color:var(--good); color:var(--good);} html[data-theme="light"] .tabs{border-bottom-width:2px; border-bottom-color:var(--line);} html[data-theme="light"] .tabs button{border-color:transparent;} html[data-theme="light"] .tabs button.on{border-bottom:3px solid var(--accent);} html[data-theme="light"] button.primary{background:var(--accent); border-color:var(--brand-ink); color:#fff;} html[data-theme="light"] button.primary:hover:not(:disabled){background:var(--accent-hover);} html[data-theme="light"] button.cta{border-color:#7A2A08;} html[data-theme="light"] button.ghost{border-color:var(--line);} html[data-theme="light"] button.seg{border-color:var(--line); color:var(--text);} html[data-theme="light"] button.seg.on{background:var(--accent); border-color:var(--accent); color:#fff;} html[data-theme="light"] .entry, html[data-theme="light"] .ord, html[data-theme="light"] .arow, html[data-theme="light"] .vrow, html[data-theme="light"] .urow, html[data-theme="light"] .srow, html[data-theme="light"] .contact, html[data-theme="light"] .lockrow, html[data-theme="light"] .permrow{border-bottom-color:#b9c2ce;} html[data-theme="light"] .rolebtn .rn{background:var(--brand-ink); border-color:var(--brand-ink); color:#fff;} html[data-theme="light"] .wm-mark{box-shadow:0 0 0 2px var(--line);} html[data-theme="light"] .landing-band{border-top-width:2px; border-bottom-width:2px;} html[data-theme="light"] .modal{background:rgba(16,23,32,.45);} html[data-theme="light"] .tile:hover, html[data-theme="light"] .tile:focus-visible{border-color:var(--line); background:var(--panel);} html[data-theme="light"] .tile .ti{border-color:var(--accent);} html[data-theme="light"] .feature-list .fi{border-color:var(--accent);} /* navy headers: the top bar (app.css, both themes), the machine header and the Find sheet's head stay dark in light mode, as the owner asked, so the eye has an anchor at the top of every screen. Navy now, not black. */ html[data-theme="light"] .topbar{border-bottom:2px solid #0C1F3D;} /* the generic 2px --line outline above would paint navy-on-navy here, so the bar's own colours are restated at this specificity */ html[data-theme="light"] .topbar button{border:1.5px solid var(--brand-lt); background:rgba(255,255,255,.06); color:#fff;} html[data-theme="light"] .topbar button:hover:not(:disabled){background:rgba(255,255,255,.14);} html[data-theme="light"] .topbar button.ghost{background:transparent;} html[data-theme="light"] .topbar button.primary{background:var(--brand-lt); border-color:var(--brand-lt); color:var(--brand-ink);} /* Pills on the navy bars: tints light enough for 4.5:1 on #15325F (QA audit 2026-09-03 — the accent/bad pair measured 4.04:1). */ html[data-theme="light"] .topbar .pill{border:1.5px solid var(--brand-lt); background:rgba(255,255,255,.06); color:#fff;} html[data-theme="light"] .topbar .pill.accent{color:#B4CDF9; border-color:#B4CDF9;} html[data-theme="light"] .topbar .pill.warn{color:#FFD08A; border-color:#FFD08A;} html[data-theme="light"] .topbar .pill.bad{color:#FFB3B3; border-color:#FFB3B3;} html[data-theme="light"] .topbar .pill.good{color:#8CEEB8; border-color:#8CEEB8;} html[data-theme="light"] .ahead{background:var(--brand-ink); color:#fff; border-bottom:2px solid #0C1F3D;} html[data-theme="light"] .ahead .kv dt{color:var(--ink-muted);} html[data-theme="light"] .ahead .pill{background:rgba(255,255,255,.06); border-color:var(--brand-lt); color:#fff;} html[data-theme="light"] .ahead .pill.accent{color:#B4CDF9; border-color:#B4CDF9;} html[data-theme="light"] .ahead .pill.bad{color:#FFB3B3; border-color:#FFB3B3;} html[data-theme="light"] .ahead .pill.warn{color:#FFD08A; border-color:#FFD08A;} html[data-theme="light"] .ahead .pill.good{color:#8CEEB8; border-color:#8CEEB8;} html[data-theme="light"] .ahead button{background:rgba(255,255,255,.06); border:1.5px solid var(--brand-lt); color:#fff;} html[data-theme="light"] .ahead button:hover:not(:disabled){background:rgba(255,255,255,.14);} html[data-theme="light"] #findWrap .hd{background:var(--brand-ink); border-bottom:2px solid #0C1F3D;} html[data-theme="light"] #findWrap .hd input{background:rgba(255,255,255,.08); border:1.5px solid var(--brand-lt); color:#fff;} html[data-theme="light"] #findWrap .hd input::placeholder{color:var(--ink-muted);} html[data-theme="light"] #findWrap .hd button{background:rgba(255,255,255,.06); border:1.5px solid var(--brand-lt); color:#fff;} /* the map: light surround, and the bottom bar fades into it */ html[data-theme="light"] #mapWrap{background:#d7dde5;} html[data-theme="light"] .mapbar{background:linear-gradient(transparent, rgba(215,221,229,.96) 34%);} html[data-theme="light"] .tTag text, html[data-theme="light"] .pendTag text{stroke:rgba(255,255,255,.95);} html[data-theme="light"] .kpi{--viz-gl:#d5dbe3; --viz-axis:#26313f;}