/* ===================================================================== theme.css — dark mode and the collapsible sidebar. Loaded after app.css. The light theme is app.css's own tokens; this file only redefines them under [data-theme="dark"] and fixes the few places that used a literal colour instead of a token. THEME SELECTION. is set by a tiny inline script in from localStorage (key lms.theme), before the first paint, so there is no flash. "system" stores nothing and the prefers-color-scheme rule below applies. ===================================================================== */ /* ── Dark tokens ──────────────────────────────────────────────────── */ :root[data-theme="dark"] { --ink: #e9e6df; --ink-2: #b8b2a6; --ink-3: #8c877b; --paper: #12161b; --paper-2: #1a1f26; --line: #2b323b; --line-2: #242a32; --ok: #5fcb8e; --ok-bg: #143223; --warn: #e2a54a; --warn-bg: #3a2a10; --bad: #ff6b6b; --bad-bg: #3a1717; --info: #6fb3e0; --info-bg: #142a3a; --mast: #0c0f13; /* masthead stays dark in both themes */ --shadow: 0 1px 2px rgba(0,0,0,.4); color-scheme: dark; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-theme="dark"]) { --ink: #e9e6df; --ink-2: #b8b2a6; --ink-3: #8c877b; --paper: #12161b; --paper-2: #1a1f26; --line: #2b323b; --line-2: #242a32; --ok: #5fcb8e; --ok-bg: #143223; --warn: #e2a54a; --warn-bg: #3a2a10; --bad: #ff6b6b; --bad-bg: #3a1717; --info: #6fb3e0; --info-bg: #142a3a; --mast: #0c0f13; --shadow: 0 1px 2px rgba(0,0,0,.4); color-scheme: dark; } } :root { --mast: var(--ink); } /* ── Surfaces that used --ink as a dark background ────────────────── */ .lms-mast, .lms-btn--ink, .lms-nav.is-active, .lms-tile--ink::before, .lms-spark__b:hover { background: var(--mast); } .lms-btn--ink { border-color: var(--mast); } :root[data-theme="dark"] .lms-nav.is-active { background: var(--state); } .lms-dark { background: var(--paper); color: var(--ink); } /* ── Literal whites → card surface, in dark only ──────────────────── */ :root[data-theme="dark"] .lms-table tbody tr.is-clickable:hover { background: #20262e; } :root[data-theme="dark"] .lms-input { background: var(--paper-2); color: var(--ink); border-color: var(--line); } :root[data-theme="dark"] input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]), :root[data-theme="dark"] textarea, :root[data-theme="dark"] select { background-color: var(--paper-2); color: var(--ink); border-color: var(--line); } :root[data-theme="dark"] ::placeholder { color: var(--ink-3); } /* AOP / administration components written with white backgrounds */ :root[data-theme="dark"] .aop-act, :root[data-theme="dark"] .aop-fee, :root[data-theme="dark"] .aop-chip, :root[data-theme="dark"] .aop-slot span, :root[data-theme="dark"] .aop-bank, :root[data-theme="dark"] .aop-choice__o, :root[data-theme="dark"] .aop-pct, :root[data-theme="dark"] .aop-kv, :root[data-theme="dark"] .aop-approve__reasons, :root[data-theme="dark"] .aop-slotgrid, :root[data-theme="dark"] .adm-tile, :root[data-theme="dark"] .adm-panel, :root[data-theme="dark"] .adm-panel__h, :root[data-theme="dark"] .lms-acct__m, :root[data-theme="dark"] .lms-acct__m::before, :root[data-theme="dark"] .aop-invoice, :root[data-theme="dark"] .aop-fs, :root[data-theme="dark"] .aop-file { background: var(--paper-2); border-color: var(--line); color: var(--ink); } :root[data-theme="dark"] .aop-act--btn:not(.is-quiet), :root[data-theme="dark"] .aop-act--form[open] > summary, :root[data-theme="dark"] .aop-next, :root[data-theme="dark"] .aop-approve { background: var(--paper-2); } :root[data-theme="dark"] .aop-act__step { background: rgba(181,18,27,.18); border-color: rgba(181,18,27,.4); color: #ff8a8a; } :root[data-theme="dark"] .is-quiet .aop-act__step, :root[data-theme="dark"] .adm-panel__ref, :root[data-theme="dark"] .adm-panel__ic { background: #242a32; border-color: var(--line); } :root[data-theme="dark"] .aop-next__what, :root[data-theme="dark"] .aop-chip:has(input:checked), :root[data-theme="dark"] .aop-fee:has(input[type=radio]:checked), :root[data-theme="dark"] .aop-bank:has(input:checked), :root[data-theme="dark"] .aop-slot:has(input:checked), :root[data-theme="dark"] .lms-acct__i--out:hover { background: rgba(181,18,27,.16); border-color: rgba(181,18,27,.5); } :root[data-theme="dark"] .aop-slot:has(input:checked) span { background: var(--state); color: #fff; } :root[data-theme="dark"] .aop-callout { background: #2e2610; border-color: #5a4a1c; color: var(--ink); } :root[data-theme="dark"] .aop-callout--info { background: #142a3a; border-color: #244a66; } :root[data-theme="dark"] .aop-ck { background: var(--paper-2); border-color: var(--line); } :root[data-theme="dark"] .aop-ck--yes { background: var(--ok-bg); color: var(--ok); border-color: #235c3a; } :root[data-theme="dark"] .aop-ck--no { background: var(--bad-bg); color: var(--bad); border-color: #6b2a2a; } :root[data-theme="dark"] .aop-ck--pending { background: var(--warn-bg); color: var(--warn); border-color: #6b5320; } :root[data-theme="dark"] .lms-acct__i:hover { background: #242a32; } :root[data-theme="dark"] .lms-notice { background: var(--info-bg); border-color: #244a66; color: var(--ink); } /* Tailwind utilities used with literal colours in the views */ :root[data-theme="dark"] .bg-white { background-color: var(--paper-2) !important; } :root[data-theme="dark"] .text-\[\#aab2ba\] { color: #aab2ba; } /* Images with white backgrounds (logos in cards) get a soft plate */ :root[data-theme="dark"] .lms-card img.lms-logo { background: #fff; border-radius: 6px; padding: 4px; } /* ── Header controls: theme + sidebar toggle ─────────────────────── */ .lms-iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 8px; border: 1px solid rgba(255,255,255,.18); color: rgba(255,255,255,.75); background: transparent; cursor: pointer; transition: background .15s, color .15s; } .lms-iconbtn:hover { background: rgba(255,255,255,.1); color: #fff; } .lms-iconbtn svg { width: 1.05rem; height: 1.05rem; } .lms-theme .i-moon { display: none; } :root[data-theme="dark"] .lms-theme .i-sun { display: none; } :root[data-theme="dark"] .lms-theme .i-moon { display: inline; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .lms-theme .i-sun { display: none; } :root:not([data-theme="light"]) .lms-theme .i-moon { display: inline; } } /* ── Sidebar collapse ─────────────────────────────────────────────── */ /* Desktop: body.lms-nav-collapsed hides the aside and lets the main column take the full width. Mobile keeps the existing hamburger. */ @media (min-width: 768px) { body.lms-nav-collapsed .lms-shell { grid-template-columns: 1fr !important; } body.lms-nav-collapsed .lms-side { display: none !important; } .lms-side { transition: opacity .15s; } } /* Mobile: the aside slides in as a drawer when the hamburger opens it. */ @media (max-width: 767px) { body.lms-nav-open .lms-side { display: block !important; position: fixed; inset: 118px 0 0 0; width: min(300px, 86vw); z-index: 70; overflow-y: auto; box-shadow: 12px 0 40px rgba(0,0,0,.35); background: var(--paper); } body.lms-nav-open::after { content: ""; position: fixed; inset: 118px 0 0 0; background: rgba(0,0,0,.35); z-index: 60; } } /* ── Collapsible panels (administration, assessment register) ─── */ .adm-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.7rem;margin:0 0 1.1rem} .adm-tile{display:flex;flex-direction:column;gap:.1rem;padding:.9rem 1rem;background:#fff;border:1px solid var(--line-2,#e6e1d6);border-radius:14px;color:inherit;text-decoration:none;box-shadow:0 1px 2px rgba(22,19,15,.04);transition:border-color .15s,box-shadow .15s,transform .15s} .adm-tile:hover{border-color:var(--red,#b5121b);box-shadow:0 6px 18px rgba(181,18,27,.10);transform:translateY(-1px)} .adm-tile b{font:800 1.6rem/1 var(--fh,inherit);letter-spacing:-.02em} .adm-tile span{font-weight:600;font-size:.85rem;margin-top:.25rem} .adm-tile small{color:var(--ink-3,#7c7466);font-size:.72rem} .adm-grid{display:grid;gap:1rem;grid-template-columns:1fr 1fr;align-items:start} @media (max-width:1100px){.adm-grid{grid-template-columns:1fr}} .adm-col{display:flex;flex-direction:column;gap:1rem;min-width:0} .adm-panel{background:#fff;border:1px solid var(--line-2,#e6e1d6);border-radius:16px;box-shadow:0 1px 2px rgba(22,19,15,.04);overflow:hidden;transition:box-shadow .15s,border-color .15s} .adm-panel:hover{border-color:#d8cfc0} .adm-panel[open]{box-shadow:0 10px 30px rgba(22,19,15,.07)} .adm-panel__h{display:flex;align-items:center;gap:.8rem;padding:.9rem 1.1rem;cursor:pointer;list-style:none;user-select:none;background:linear-gradient(180deg,#fff,#fcfaf6)} .adm-panel__h::-webkit-details-marker{display:none} .adm-panel[open] .adm-panel__h{border-bottom:1px solid var(--line-2,#e6e1d6)} .adm-panel__ic{flex:none;display:grid;place-items:center;width:2.1rem;height:2.1rem;border-radius:10px;background:#fbeeee;color:var(--red,#b5121b);border:1px solid #f1d4d4} .adm-panel__t{flex:1;display:flex;flex-direction:column;min-width:0} .adm-panel__t b{font-size:.98rem} .adm-panel__t small{color:var(--ink-3,#7c7466);font-size:.78rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .adm-panel__act{flex:none} .adm-panel__ref{flex:none;font:600 .66rem var(--fm,ui-monospace,Menlo,monospace);letter-spacing:.06em;color:var(--ink-3,#7c7466);background:#f4f1ea;border:1px solid #e6e1d6;border-radius:999px;padding:.2rem .55rem;white-space:nowrap} .adm-panel__chev{flex:none;width:.55rem;height:.55rem;border-right:2px solid var(--ink-3,#7c7466);border-bottom:2px solid var(--ink-3,#7c7466);transform:rotate(45deg);transition:transform .18s;margin:0 .3rem 0 .2rem} .adm-panel[open] .adm-panel__chev{transform:rotate(-135deg)} .adm-panel__b{animation:adm-in .18s ease-out} .adm-panel__b .lms-table{margin:0} @keyframes adm-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}} @media (max-width:640px){.adm-panel__ref{display:none}.adm-panel__t small{white-space:normal}} /* ── Page header: decorative glow must not swallow clicks ──────────── public-portal.css paints a round glow (.lms-ph::after) over the top right corner of the page header — exactly where the action buttons sit ("My enrolments", "Sign in to enrol"). Being later in the DOM it sat on top of them and ate the click. Let clicks pass through it and lift the buttons above it. */ .lms-ph::before, .lms-ph::after { pointer-events: none; } .lms-ph__actions { position: relative; z-index: 2; } /* ── Premium search toolbar (every list page) ──────────────────────── The search + filter row above a list (vehicles, applicants, licences, work queue — any [data-live-table]) gets the same look as the Payments page: one soft card, a rounded search box with the icon inside, a pill-style filter and a count badge. Pure CSS, so every page that uses the standard markup picks it up without edits. */ [data-live-table] > div:first-child:has(.lms-field, .lms-select), .lms-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-bottom: 1rem !important; padding: .6rem; background: var(--paper-2, #fff); border: 1px solid var(--line-2, #e6e1d6); border-radius: 16px; box-shadow: 0 1px 2px rgba(22,19,15,.04), 0 8px 24px rgba(22,19,15,.04); } .lms-field:has(> .lms-input--padded) { min-width: 240px; flex: 1 1 320px; max-width: 34rem; } .lms-field > svg { left: 14px !important; width: 17px !important; height: 17px !important; transition: color .15s; z-index: 1; } .lms-field:focus-within > svg { color: var(--state, #b5121b); } .lms-field > .lms-input--padded { box-sizing: border-box; height: 2.75rem; padding: 0 .9rem 0 2.6rem !important; border: 1.5px solid var(--line-2, #e6e1d6) !important; border-radius: 12px !important; background: var(--paper, #faf8f4) !important; font-size: .92rem; transition: border-color .15s, box-shadow .15s, background .15s; } .lms-field > .lms-input--padded:focus { border-color: var(--state, #b5121b) !important; background: var(--paper-2, #fff) !important; box-shadow: 0 0 0 4px rgba(181,18,27,.10) !important; } [data-live-table] .lms-select, .pay-bar .lms-select, .lms-toolbar .lms-select { box-sizing: border-box; width: auto; height: 2.75rem; padding: 0 2.4rem 0 1rem; border: 1.5px solid var(--line-2, #e6e1d6); border-radius: 12px; font-size: .88rem; font-weight: 600; background-color: var(--paper, #faf8f4); color: var(--ink-2, #463f35); cursor: pointer; -webkit-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237c7466' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .8rem center; background-size: 1rem; transition: border-color .15s, box-shadow .15s; } [data-live-table] .lms-select:hover, .lms-toolbar .lms-select:hover { border-color: var(--ink-3, #7c7466); } [data-live-table] .lms-select:focus, .lms-toolbar .lms-select:focus { outline: 0; border-color: var(--state, #b5121b); box-shadow: 0 0 0 4px rgba(181,18,27,.10); } [data-live-count] { margin-left: auto; display: inline-flex; align-items: center; height: 2rem; padding: 0 .8rem; border-radius: 999px; background: var(--paper, #f4f1ea); border: 1px solid var(--line-2, #e6e1d6); font: 600 .75rem ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--ink-3, #7c7466) !important; white-space: nowrap; } :root[data-theme="dark"] [data-live-table] > div:first-child:has(.lms-field, .lms-select), :root[data-theme="dark"] .lms-toolbar { background: var(--paper-2); border-color: var(--line); } :root[data-theme="dark"] .lms-field > .lms-input--padded, :root[data-theme="dark"] [data-live-table] .lms-select, :root[data-theme="dark"] .lms-toolbar .lms-select { background-color: var(--paper) !important; border-color: var(--line) !important; color: var(--ink); } @media (max-width: 640px) { .lms-field:has(> .lms-input--padded) { max-width: none; flex-basis: 100%; } [data-live-count] { margin-left: 0; } } .lms-toolbar .lms-btn { height: 2.75rem; border-radius: 12px; padding: 0 1rem; } /* Row icon buttons (edit / delete) used in registers */ .lms-ic{display:inline-grid;place-items:center;width:2rem;height:2rem;border-radius:9px;border:1px solid var(--line-2,#e6e1d6);color:var(--ink-2,#463f35);background:var(--paper-2,#fff);cursor:pointer;transition:all .15s;vertical-align:middle} .lms-ic svg{width:1rem;height:1rem} .lms-ic:hover{border-color:var(--ink-3,#7c7466);color:var(--ink,#16130f)} .lms-ic--del:hover{border-color:var(--state,#b5121b);color:var(--state,#b5121b);background:var(--bad-bg,#fbe7e7)} /* Confirmation dialog */ .lms-dlg{border:0;border-radius:18px;padding:0;width:min(520px,calc(100vw - 32px));box-shadow:0 30px 80px rgba(0,0,0,.35);background:var(--paper-2,#fff);color:var(--ink,#16130f)} .lms-dlg::backdrop{background:rgba(16,14,11,.55);backdrop-filter:blur(2px)} .lms-dlg form{padding:1.3rem 1.4rem} .lms-dlg h3{margin:0 0 .4rem;font-size:1.1rem} .lms-dlg p{margin:0 0 .9rem;font-size:.9rem;color:var(--ink-2,#463f35)} .lms-dlg label{display:flex;flex-direction:column;gap:.35rem;font-size:.8rem;font-weight:600;margin-bottom:.7rem} .lms-dlg input[type=text]{box-sizing:border-box;width:100%;height:2.6rem;padding:0 .8rem;border-radius:10px;border:1.5px solid var(--line-2,#e6e1d6);font:inherit;background:var(--paper,#faf8f4);color:inherit} .lms-dlg input[type=text]:focus{outline:0;border-color:var(--state,#b5121b);box-shadow:0 0 0 4px rgba(181,18,27,.10)} .lms-dlg__row{display:flex;gap:.6rem;justify-content:flex-end;margin-top:.4rem} .lms-btn--danger{background:var(--state,#b5121b);border-color:var(--state,#b5121b);color:#fff} .lms-btn--danger:hover{background:#8c0d15;border-color:#8c0d15}