/* Extracted from app.html on 2026-09-02 (Phase 3 of PLAN_95).
Same rules, same cascade order; only the location changed. Link order in the page
preserves the original document order, which was verified by proving that the
component blocks share no selector with the main or hardening blocks. */
/* Fonts are loaded non-blocking from - see the preconnect/link above. */
:root {
--accent: #0088dd;
--accent2: #33aaff;
--ok: #2ecc71;
--warn: #f0a500;
--danger: #e8441a;
--stripe: rgba(0,136,221,0.04);
}
body.day {
--bg: #f5f7fa;
--surface: #ffffff;
--surface2: #eef1f5;
--border: #d0d6e0;
--text: #1a2030;
--muted: #6b7590;
--header-bg: #ffffff;
--header-text: #1a2030;
--accent: #0077cc;
--accent2: #0099ff;
--ok: #1e8a4a;
--danger: #cc2200;
--warn: #d4820a;
--stripe: rgba(0,119,204,0.04);
--gold2: #0099ff;
--blue: #0077cc;
--bluelt: #0099ff;
--panel: #ffffff;
--bg2: #ffffff;
--bg3: rgba(0,119,204,0.05);
}
body.night {
/* BTN-inspired dark palette */
--bg: #0d1117;
--surface: #111827;
--surface2: #162033;
--border: #1e2d4a;
--text: #c8d0e0;
--muted: #7d8ba8;
--header-bg: #0a0f1a;
--header-text: #c8d0e0;
--accent: #0088dd;
--accent2: #33aaff;
--ok: #3a7a50;
--danger: #8c3a3a;
--warn: #f0a500;
--stripe: rgba(0,136,221,0.06);
--gold2: #33aaff;
--blue: #0077cc;
--bluelt: #33aaff;
--bg2: #0f1620;
--bg3: rgba(120,160,220,0.06);
--panel: #162033;
--mono-font: 'Inconsolata', 'Source Code Pro', monospace;
--head-font: 'Exo 2', 'Oswald', sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { background: var(--bg); color: var(--text); font-family: 'Barlow', sans-serif; font-size: 14px; line-height: 1.5; min-height: 100vh; transition: background 0.3s, color 0.3s, color 0.3s; }
/* HEADER */
.header { background: var(--header-bg); border-bottom: 3px solid var(--accent); position: sticky; top: 0; z-index: 100; box-shadow: 0 2px 12px rgba(0,0,0,0.1); }
.header-inner { display: flex; align-items: center; padding: 10px 16px; gap: 10px; }
.ems-badge { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.header-titles { flex: 1; min-width: 0; }
.header-title { font-family: 'Oswald', sans-serif; font-weight: 700; font-size: 16px; letter-spacing: 2px; text-transform: uppercase; color: var(--header-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.header-sub { font-size: 9px; color: #6b7080; letter-spacing: 1px; font-family: 'Source Code Pro', monospace; text-transform: uppercase; }
.header-controls { display: flex; gap: 6px; align-items: center; flex-shrink: 0; }
/* Phone header, 2026-08-31: owner call - every control visible at once, centered.
Wrapped flex rows, justify-content center, full 44px tap targets, no sideways
scrolling and no edge fade, so nothing ever looks cut off in a demo. Also removed
two stale .header-controls rules from the late max-width:640px block that were
overriding this block (last-in-cascade) and causing the right-clipped look.
(History: 3 ragged rows, repeat(8,1fr), two-row auto-fit, one snap-scroll row.) */
@media (max-width: 620px) {
.header-inner { flex-wrap: wrap; padding: 10px 12px; gap: 8px; }
.header-controls {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 6px;
width: 100%;
padding-bottom: 2px;
}
.header-controls .shift-toggle { flex: 0 0 auto; display: flex; gap: 4px; }
.header-controls .shift-btn { padding: 0 10px; font-size: 11px; min-height: 44px; }
.header-controls .icon-btn,
.header-controls #merchBtn { flex: 0 0 auto; width: 44px; min-width: 44px; height: 44px; min-height: 44px; font-size: 17px; }
.header-controls .icon-btn.labeled { width: auto; padding: 0 12px; }
}
.icon-btn { background: linear-gradient(140deg, rgba(90,180,255,0.16), rgba(20,70,150,0.08)); border: 1px solid rgba(126,204,255,0.42); border-radius: 10px; backdrop-filter: blur(12px) saturate(1.5); -webkit-backdrop-filter: blur(12px) saturate(1.5); box-shadow: 0 0 14px rgba(47,164,255,0.30), inset 0 1px 0 rgba(255,255,255,0.22), inset 0 0 12px rgba(47,164,255,0.12); color: var(--header-text); width: 34px; height: 34px; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 16px; transition: all 0.2s; flex-shrink: 0; }
.icon-btn:hover { border-color: rgba(170,225,255,0.85); box-shadow: 0 0 22px rgba(47,164,255,0.55), inset 0 1px 0 rgba(255,255,255,0.25), inset 0 0 12px rgba(47,164,255,0.18); }
.icon-btn img { width: 19px; height: 19px; display: block; pointer-events: none; }
.icon-btn.labeled { width: auto; padding: 0 12px; gap: 6px; white-space: nowrap; }
.icon-btn.labeled span { font-size: 11px; font-weight: 700; letter-spacing: .02em; color: #dce8f8; } /* buttons are dark glass in both themes; keep labels light like the icons */
.header-controls .icon-btn[aria-label="Sign Out"] { order: 999; } /* Exit is always the last button */
/* BTN-style header (2026-09-02, owner call): START/END, Radio and Board stay as buttons;
Schedule and Messages become nav links; everything else lives in the Fleet and account
menus. Buttons keep their ids, handlers, badges and permission display logic; they are
only re-parented at parse time. Exit is a fixed pill visible on every view. */
.header-inner { flex-wrap: wrap; }
.hdr-nav { display: flex; align-items: center; width: 100%; order: 10; gap: 0; border-top: 1px solid var(--border); margin-top: 2px; }
.hdr-nav-l { display: flex; align-items: center; flex: 1; min-width: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.hdr-nav-l::-webkit-scrollbar { display: none; }
body .header .hdr-nav .icon-btn, body .header .hdr-nav .hdr-nav-t { flex: 0 0 auto; background: transparent; border: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; border-radius: 0; width: auto; min-width: 0; height: 42px; min-height: 42px; padding: 0 9px; font-family: 'Oswald', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--header-text); display: inline-flex; align-items: center; gap: 6px; cursor: pointer; position: relative; text-decoration: none; }
body .header .hdr-nav .icon-btn img { display: none; }
body .header .hdr-nav .icon-btn > span:not(.hlabel):not([id]) { display: none; }
body .header .hdr-nav .icon-btn .hlabel { font: inherit; color: inherit; letter-spacing: inherit; }
body .header .hdr-nav #dmCount { position: static !important; margin-left: 4px !important; min-width: 16px !important; height: 16px !important; line-height: 16px !important; padding: 0 5px !important; }
.hdr-nav-t .chev { width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); margin: -4px 2px 0 0; }
.hdr-nav-t[aria-expanded="true"] { color: var(--accent); }
.hdr-nav-t img { width: 16px; height: 16px; }
.hdr-dd { position: absolute; left: 12px; right: 12px; top: 100%; margin-top: -3px; background: var(--header-bg); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 14px 34px rgba(0,0,0,.45); z-index: 120; overflow: hidden; }
.hdr-dd.right { left: auto; width: 236px; max-width: calc(100% - 24px); }
.hdr-dd[hidden] { display: none; }
body .header .hdr-dd .icon-btn { display: flex; width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; padding: 11px 14px !important; justify-content: flex-start; gap: 10px; border: 0; border-top: 1px solid var(--border); border-radius: 0; background: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; text-decoration: none; }
body .header .hdr-dd .icon-btn:first-child { border-top: 0; }
body .header .hdr-dd .icon-btn img { width: 18px !important; height: 18px !important; }
body .header .hdr-dd .icon-btn .hlabel { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 13px; font-weight: 600; color: var(--header-text); letter-spacing: 0; text-transform: none; }
body .header .hdr-dd .icon-btn > span:not(.hlabel):not([id]) { display: none; }
body .header .hdr-dd .icon-btn > span[id] { position: static !important; margin-left: auto; }
body .header .hdr-dd .icon-btn[aria-label="Sign Out"] .hlabel { color: #ff8a70; }
#rcpExitFab { position: fixed; left: 12px; bottom: calc(env(safe-area-inset-bottom, 0px) + 12px); z-index: 2147483000; display: inline-flex; align-items: center; gap: 6px; padding: 0 12px; height: 36px; border-radius: 18px; background: rgba(10,15,26,.9); border: 1px solid rgba(126,204,255,.55); color: #dce8f8; font-family: 'Oswald', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; box-shadow: 0 4px 14px rgba(0,0,0,.4); cursor: pointer; }
#rcpExitFab img { width: 16px; height: 16px; }
body:has(#a2hsNudge) #rcpExitFab { bottom: calc(env(safe-area-inset-bottom, 0px) + 100px); }
body.day .icon-btn, body.day .header-controls #merchBtn { background: linear-gradient(140deg, rgba(7,26,60,0.90), rgba(4,16,40,0.84)); border-color: rgba(70,160,240,0.60); box-shadow: 0 0 12px rgba(0,140,255,0.35), inset 0 1px 0 rgba(255,255,255,0.14), inset 0 0 10px rgba(47,164,255,0.12); }
.fq-ic { width: 15px; height: 15px; vertical-align: -2px; }
.uhide { display: none !important; }
.rcph-row { display:flex; align-items:center; gap:9px; padding:7px 8px; border:1px solid var(--border); border-radius:8px; margin-top:6px; background:var(--surface2); }
.rcph-row.drag { opacity:.65; }
.rcph-h { cursor:grab; touch-action:none; font-size:15px; color:var(--muted); padding:2px 6px; user-select:none; -webkit-user-select:none; }
.rcph-b { background:none; border:1px solid var(--border); color:inherit; border-radius:6px; width:26px; height:26px; cursor:pointer; font-size:11px; display:inline-flex; align-items:center; justify-content:center; }
.shift-toggle { display: flex; gap: 4px; }
.shift-btn { font-family: 'Oswald', sans-serif; font-size: 10px; letter-spacing: 1px; font-weight: 600; padding: 5px 10px; border: 1px solid rgba(10,37,64,0.22); background: transparent; color: #6b7080; cursor: pointer; text-transform: uppercase; transition: all 0.2s; }
.shift-btn.active-start { border-color: var(--ok); color: var(--ok); background: rgba(46,204,113,0.15); }
.shift-btn.active-end { border-color: var(--accent2); color: var(--accent2); background: rgba(232,68,26,0.15); }
.progress-bar { height: 2px; background: var(--border); }
.progress-fill { height: 100%; background: linear-gradient(90deg,#0077cc,#33aaff); width: 0%; transition: width 0.4s; }
/* CONTAINER */
.container { max-width: 860px; margin: 0 auto; padding: 20px 14px 100px; }
/* SECTION */
.section { margin-bottom: 16px; border: 1px solid var(--border); background: var(--surface); overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.06); }
.section-header { background: var(--surface2); border-bottom: 2px solid var(--accent); padding: 11px 14px; display: flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; }
.section-num { font-family: 'Source Code Pro', monospace; font-size: 9px; color: var(--accent); letter-spacing: 1px; min-width: 26px; }
.section-title { font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 13px; letter-spacing: 2px; text-transform: uppercase; flex: 1; }
.section-arrow { color: var(--muted); font-size: 11px; transition: transform 0.3s; }
.section-arrow.open { transform: rotate(180deg); }
.section-body { padding: 14px; display: none; }
.section-body.open { display: block; }
/* ═══════════════════════════════════════════════════════════
BTN-STYLE NIGHT MODE OVERRIDES
Applied only when body.night is active
═══════════════════════════════════════════════════════════ */
/* Body & base */
body.night {
font-family: 'Inconsolata', 'Source Code Pro', monospace;
font-size: 13px;
background: var(--bg);
letter-spacing: 0.2px;
}
/* Header - tight BTN topbar feel */
body.night .header {
background: var(--header-bg);
border-bottom: 1px solid var(--border);
box-shadow: 0 1px 0 rgba(0,136,221,0.15);
}
body.night .header::after {
content: '';
display: block;
height: 2px;
background: linear-gradient(90deg, var(--accent) 0%, var(--accent2) 60%, transparent 100%);
}
body.night .header-title {
font-family: 'Exo 2', sans-serif;
font-weight: 800;
font-size: 15px;
letter-spacing: 1.5px;
color: var(--accent);
}
body.night .header-sub {
font-family: 'Inconsolata', monospace;
font-size: 9px;
color: var(--muted);
letter-spacing: 2px;
}
body.night .ems-badge {
background: transparent;
border: none;
clip-path: none;
}
body.night .icon-btn {
background: rgba(30,45,74,0.6);
border: 1px solid var(--border);
color: var(--muted);
}
body.night .icon-btn:hover {
background: rgba(0,136,221,0.1);
border-color: var(--accent);
color: var(--accent);
}
body.night .shift-btn {
border: 1px solid var(--border);
color: var(--muted);
font-family: 'Inconsolata', monospace;
font-size: 10px;
letter-spacing: 2px;
}
body.night .shift-btn.active-start {
border-color: var(--ok);
color: #5ab87a;
background: rgba(58,122,80,0.15);
}
body.night .shift-btn.active-end {
border-color: var(--accent2);
color: #d45a3a;
background: rgba(140,58,58,0.2);
}
body.night .progress-bar { background: var(--border); }
body.night .progress-fill {
background: linear-gradient(90deg, var(--accent), var(--accent2));
}
/* Sections - BTN panel style */
body.night .section {
border: 1px solid var(--border);
background: var(--surface);
border-radius: 0;
}
body.night .section-header {
background: var(--surface2);
border-bottom: 1px solid var(--border);
padding: 9px 12px;
}
body.night .section-header::before {
content: '';
display: inline-block;
width: 3px;
height: 14px;
background: var(--accent);
margin-right: 10px;
flex-shrink: 0;
}
body.night .section-num {
font-family: 'Inconsolata', monospace;
font-size: 10px;
color: var(--muted);
letter-spacing: 1px;
}
body.night .section-title {
font-family: 'Exo 2', sans-serif;
font-weight: 700;
font-size: 12px;
letter-spacing: 2px;
color: var(--text);
}
body.night .section-body {
background: var(--bg);
padding: 12px;
}
/* Fields */
body.night .field label {
font-family: 'Inconsolata', monospace;
font-size: 9px;
letter-spacing: 2px;
color: var(--muted);
text-transform: uppercase;
}
body.night .field input,
body.night .field select,
body.night .field textarea {
background: var(--surface2);
border: 1px solid var(--border);
color: var(--text);
font-family: 'Inconsolata', monospace;
font-size: 13px;
padding: 7px 10px;
}
body.night .field input:focus,
body.night .field select:focus,
body.night .field textarea:focus {
border-color: var(--accent);
background: var(--surface);
box-shadow: inset 0 0 0 1px rgba(0,136,221,0.1);
}
/* Tables - dense BTN data rows */
body.night .check-table {
font-family: 'Inconsolata', monospace;
font-size: 12px;
border-collapse: collapse;
}
body.night .check-table th {
background: var(--surface2);
color: var(--muted);
font-family: 'Inconsolata', monospace;
font-size: 8px;
letter-spacing: 2px;
text-transform: uppercase;
border-bottom: 1px solid var(--border);
padding: 6px 8px;
}
body.night .check-table td {
border-bottom: 1px solid rgba(30,45,74,0.6);
padding: 5px 8px;
font-family: 'Inconsolata', monospace;
}
body.night .check-table tr:nth-child(even) td {
background: rgba(22,32,51,0.5);
}
body.night .check-table tr:hover td {
background: rgba(30,45,74,0.7);
}
body.night .check-table tr.row-issue td {
background: rgba(140,58,58,0.12);
}
body.night .check-table tr.row-issue td:first-child {
border-left: 3px solid #8c3a3a;
color: #d45a3a;
}
/* Status select */
body.night .status-sel {
background: var(--surface2);
border: 1px solid var(--border);
color: var(--muted);
font-family: 'Inconsolata', monospace;
font-size: 11px;
letter-spacing: 0.5px;
}
body.night .status-sel.ok { border-color: #3a7a50; color: #5ab87a; background: rgba(58,122,80,0.1); }
body.night .status-sel.issue { border-color: #8c3a3a; color: #d45a3a; background: rgba(140,58,58,0.1); }
body.night .status-sel.na { border-color: var(--muted); color: var(--muted); }
/* Qty input */
body.night .qty-inp {
background: var(--surface2);
border: 1px solid var(--border);
color: var(--text);
font-family: 'Inconsolata', monospace;
}
body.night .qty-inp:focus { border-color: var(--accent); }
body.night .qty-inp.low { border-color: #8c3a3a; color: #d45a3a; }
/* Photo slots */
body.night .photo-slot {
border: 1px solid var(--border);
background: var(--surface2);
}
body.night .photo-slot:hover { border-color: var(--accent); }
body.night .photo-slot.captured { border-color: #3a7a50; }
body.night .photo-label {
font-family: 'Inconsolata', monospace;
font-size: 11px;
letter-spacing: 2px;
color: var(--muted);
}
/* YN buttons */
body.night .yn-btn {
border: 1px solid var(--border);
color: var(--muted);
font-family: 'Inconsolata', monospace;
font-size: 11px;
letter-spacing: 1.5px;
background: var(--surface2);
}
body.night .yn-btn.yes.sel { border-color: #3a7a50; color: #5ab87a; background: rgba(58,122,80,0.12); }
body.night .yn-btn.no.sel { border-color: #8c3a3a; color: #d45a3a; background: rgba(140,58,58,0.12); }
/* Expiry rows */
body.night .exp-row label {
font-family: 'Inconsolata', monospace;
color: var(--text);
font-size: 12px;
}
body.night .exp-row input[type="date"] {
background: var(--surface2);
border: 1px solid var(--border);
color: var(--text);
font-family: 'Inconsolata', monospace;
}
body.night .exp-row input[type="date"].expired { border-color: #8c3a3a; color: #d45a3a; }
body.night .exp-row input[type="date"].expiring { border-color: var(--warn); color: var(--warn); }
/* Submit bar */
body.night .submit-bar {
background: var(--surface);
border-top: 1px solid var(--border);
box-shadow: 0 -4px 24px rgba(0,0,0,0.6);
}
body.night .submit-bar::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 1px;
background: linear-gradient(90deg, var(--accent), transparent);
}
body.night .issue-badge {
font-family: 'Inconsolata', monospace;
font-size: 11px;
letter-spacing: 1px;
color: #d45a3a;
}
body.night .btn-save {
border: 1px solid var(--border);
color: var(--muted);
font-family: 'Exo 2', sans-serif;
font-weight: 600;
font-size: 11px;
letter-spacing: 2px;
background: var(--surface2);
}
body.night .btn-save:hover {
border-color: var(--accent);
color: var(--accent);
background: rgba(0,136,221,0.06);
}
body.night .btn-submit {
background: var(--accent);
color: #000;
font-family: 'Exo 2', sans-serif;
font-weight: 700;
font-size: 11px;
letter-spacing: 2px;
}
body.night .btn-submit:hover { background: var(--gold2, #e8aa3a); }
/* Modals - BTN panel style */
body.night .modal {
background: var(--surface);
border: 1px solid var(--border);
border-top: 2px solid var(--accent);
}
body.night .modal-header {
background: var(--surface2);
border-bottom: 1px solid var(--border);
}
body.night .modal-title {
font-family: 'Exo 2', sans-serif;
font-weight: 700;
font-size: 13px;
letter-spacing: 2px;
color: var(--accent);
}
body.night .modal-section-title {
font-family: 'Inconsolata', monospace;
font-size: 10px;
letter-spacing: 2px;
color: var(--muted);
border-bottom: 1px solid var(--border);
}
body.night .admin-field label {
font-family: 'Inconsolata', monospace;
font-size: 9px;
letter-spacing: 2px;
color: var(--muted);
}
body.night .admin-field input,
body.night .email-item input,
body.night .unit-item input {
background: var(--surface2);
border: 1px solid var(--border);
color: var(--text);
font-family: 'Inconsolata', monospace;
font-size: 13px;
}
body.night .admin-field input:focus,
body.night .email-item input:focus,
body.night .unit-item input:focus {
border-color: var(--accent);
}
body.night .add-btn {
border: 1px dashed var(--border);
color: var(--muted);
font-family: 'Inconsolata', monospace;
}
body.night .add-btn:hover { border-color: var(--accent); color: var(--accent); }
body.night .qty-table { font-family: 'Inconsolata', monospace; }
body.night .qty-table th {
font-size: 8px; letter-spacing: 2px;
color: var(--muted);
background: var(--surface2);
border-bottom: 1px solid var(--border);
}
body.night .qty-table td { border-bottom: 1px solid rgba(30,45,74,0.5); }
body.night .qty-table input {
background: var(--surface2);
border: 1px solid var(--border);
color: var(--text);
font-family: 'Inconsolata', monospace;
}
body.night .btn-admin-save {
background: var(--accent);
color: #000;
font-family: 'Exo 2', sans-serif;
font-weight: 700;
letter-spacing: 2px;
}
body.night .btn-admin-save:hover { background: var(--gold2, #e8aa3a); }
/* FAQ */
body.night .faq-search {
background: var(--surface2);
border: 1px solid var(--border);
color: var(--text);
font-family: 'Inconsolata', monospace;
}
body.night .faq-search:focus { border-color: var(--accent); }
body.night .faq-tabs { border-bottom: 1px solid var(--border); }
body.night .faq-tab {
font-family: 'Inconsolata', monospace;
font-size: 10px;
letter-spacing: 2px;
color: var(--muted);
}
body.night .faq-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
body.night .faq-item { border: 1px solid var(--border); background: var(--surface); }
body.night .faq-question {
font-family: 'Inconsolata', monospace;
font-size: 12px;
}
body.night .faq-question:hover { background: var(--surface2); }
body.night .faq-answer {
background: var(--bg);
border-top: 1px solid var(--border);
font-family: 'Inconsolata', monospace;
font-size: 12px;
color: var(--muted);
line-height: 1.75;
}
body.night .faq-answer code {
background: var(--surface2);
color: var(--accent);
font-size: 11px;
}
/* Toast */
body.night .toast {
background: var(--surface);
border: 1px solid var(--border);
border-left: 3px solid #3a7a50;
font-family: 'Inconsolata', monospace;
font-size: 11px;
letter-spacing: 1px;
color: var(--text);
}
body.night .toast.err { border-left-color: #8c3a3a; }
body.night .toast.warn { border-left-color: var(--warn); }
/* Success screen */
body.night .success-screen { background: var(--bg); }
body.night .success-hex { background: #3a7a50; }
body.night .success-title {
font-family: 'Exo 2', sans-serif;
font-weight: 800;
letter-spacing: 4px;
color: #5ab87a;
}
body.night .success-sub {
font-family: 'Inconsolata', monospace;
color: var(--muted);
letter-spacing: 1.5px;
}
body.night .success-card {
background: var(--surface);
border: 1px solid var(--border);
border-left: 3px solid #3a7a50;
}
body.night .success-card-label {
font-family: 'Inconsolata', monospace;
color: var(--muted);
font-size: 9px;
letter-spacing: 2px;
}
body.night .success-card-val {
font-family: 'Inconsolata', monospace;
color: var(--text);
}
body.night .success-emails {
background: var(--surface);
border: 1px solid var(--border);
font-family: 'Inconsolata', monospace;
}
body.night .success-emails-label {
font-size: 9px; letter-spacing: 2px; color: var(--muted);
}
body.night .success-email-chip {
background: rgba(58,122,80,0.1);
border: 1px solid #3a7a50;
color: #5ab87a;
font-family: 'Inconsolata', monospace;
font-size: 11px;
}
body.night .btn-new-shift {
background: var(--accent);
color: #000;
font-family: 'Exo 2', sans-serif;
font-weight: 700;
letter-spacing: 2px;
}
/* Divider */
body.night .divider { border-top: 1px solid var(--border); }
/* Company name in header */
body.night #companyName {
font-family: 'Exo 2', sans-serif;
font-weight: 700;
color: var(--accent);
}
body.night .logo-badge {
border: 1px solid var(--border);
background: var(--surface2);
}
/* O2 warning */
body.night #o2Warn {
font-family: 'Inconsolata', monospace;
font-size: 11px;
letter-spacing: 1px;
}
/* Checkbox accent */
body.night .rep-chk { accent-color: var(--accent); }
/* Sending overlay */
body.night .sending-overlay { background: rgba(13,17,23,0.92); }
body.night .spinner {
border: 3px solid var(--border);
border-top-color: var(--accent);
}
body.night .sending-text {
font-family: 'Exo 2', sans-serif;
font-weight: 700;
letter-spacing: 3px;
color: var(--accent);
}
body.night .sending-sub {
font-family: 'Inconsolata', monospace;
color: var(--muted);
letter-spacing: 1px;
}
/* FIELDS */
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.field-row.triple { grid-template-columns: 1fr 1fr 1fr; }
.field-row.full { grid-template-columns: 1fr; }
@media(max-width:560px){ .field-row,.field-row.triple { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; gap: 4px; }
.field label { font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); font-family: 'Source Code Pro', monospace; }
.field input, .field select, .field textarea { background: var(--surface); border: 1px solid var(--border); color: var(--text); padding: 8px 10px; font-family: 'Barlow', sans-serif; font-size: 14px; outline: none; transition: border-color 0.2s; -webkit-appearance: none; border-radius: 0; width: 100%; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent); }
.field select option { background: var(--surface); color: var(--text); }
.field textarea { resize: vertical; min-height: 70px; }
/* TABLE */
.check-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.check-table th { font-family: 'Source Code Pro', monospace; font-size: 8px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); padding: 7px 8px; text-align: left; border-bottom: 1px solid var(--border); background: var(--surface2); white-space: nowrap; }
.check-table td { padding: 6px 8px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.check-table tr:nth-child(even) td { background: var(--stripe); }
.check-table tr.row-issue td { background: rgba(232,68,26,0.07); }
.check-table tr.row-issue td:first-child { border-left: 3px solid var(--danger); color: var(--danger); font-weight: 500; }
.status-sel { background: var(--surface); border: 1px solid var(--border); color: var(--text); padding: 4px 6px; font-size: 11px; font-family: 'Barlow', sans-serif; outline: none; width: 100%; min-width: 110px; cursor: pointer; border-radius: 0; -webkit-appearance: none; transition: border-color 0.2s, color 0.2s; }
.status-sel.ok { border-color: var(--ok); color: var(--ok); }
.status-sel.issue { border-color: var(--danger); color: var(--danger); }
.status-sel.na { border-color: var(--muted); color: var(--muted); }
.qty-inp { background: var(--surface); border: 1px solid var(--border); color: var(--text); padding: 4px 6px; font-size: 12px; width: 58px; text-align: center; font-family: 'Source Code Pro', monospace; outline: none; border-radius: 0; }
.qty-inp:focus { border-color: var(--accent); }
.qty-inp.low { border-color: var(--danger); color: var(--danger); }
.rep-chk { width: 16px; height: 16px; cursor: pointer; accent-color: var(--accent); }
/* PHOTOS */
.photo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media(max-width:480px){ .photo-grid { grid-template-columns: 1fr; } }
.photo-slot { border: 2px dashed var(--border); background: var(--bg); aspect-ratio: 4/3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; position: relative; overflow: hidden; transition: border-color 0.2s; cursor: pointer; }
.photo-slot:hover { border-color: var(--accent); }
.photo-slot.captured { border-style: solid; border-color: var(--ok); }
.photo-slot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.photo-label { font-family: 'Oswald', sans-serif; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); z-index: 1; pointer-events: none; text-align: center; padding: 0 8px; }
.photo-slot.captured .photo-label { background: rgba(0,0,0,0.65); color: var(--ok); padding: 3px 10px; }
.photo-icon { font-size: 26px; z-index: 1; pointer-events: none; }
.photo-slot.captured .photo-icon { display: none; }
.photo-slot input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.photo-rm { position: absolute; top: 5px; right: 5px; background: var(--danger); color: #fff; border: none; width: 22px; height: 22px; font-size: 12px; cursor: pointer; z-index: 2; display: none; align-items: center; justify-content: center; line-height: 1; }
.photo-slot.captured .photo-rm { display: flex; }
/* YN */
.yn-wrap { display: flex; gap: 6px; }
.yn-btn { padding: 6px 16px; border: 1px solid var(--border); background: transparent; color: var(--muted); cursor: pointer; font-family: 'Oswald', sans-serif; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; transition: all 0.15s; border-radius: 0; }
.yn-btn.yes.sel { border-color: var(--ok); color: var(--ok); background: rgba(46,204,113,0.1); }
.yn-btn.no.sel { border-color: var(--danger); color: var(--danger); background: rgba(232,68,26,0.1); }
/* EXP ROW */
.exp-row { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; font-size: 13px; flex-wrap: wrap; }
.exp-row label { min-width: 220px; color: var(--text); }
.exp-row input[type="date"] { background: var(--surface); border: 1px solid var(--border); color: var(--text); padding: 5px 8px; font-family: 'Barlow', sans-serif; font-size: 13px; outline: none; border-radius: 0; }
.exp-row input[type="date"].expired { border-color: var(--danger); color: var(--danger); }
.exp-row input[type="date"].expiring { border-color: var(--warn); color: var(--warn); }
/* SUBMIT BAR */
.submit-bar { position: fixed; bottom: 0; left: 0; right: 0; background: var(--surface); border-top: 2px solid var(--accent); padding: 10px 16px; display: flex; gap: 8px; justify-content: flex-end; align-items: center; z-index: 100; box-shadow: 0 -4px 20px rgba(0,0,0,0.15); }
.issue-badge { font-family: 'Source Code Pro', monospace; font-size: 11px; color: var(--danger); flex: 1; }
.btn { border: none; padding: 10px 20px; font-family: 'Oswald', sans-serif; font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase; cursor: pointer; transition: all 0.2s; border-radius: 0; }
.btn-save { background: transparent; border: 1px solid var(--muted); color: var(--muted); }
.btn-save:hover { border-color: var(--accent); color: var(--accent); }
.btn-submit { background: var(--accent); color: #000; font-weight: 600; }
.btn-submit:hover { background: var(--accent2); color: #fff; }
.btn-submit:disabled { opacity: 0.5; cursor: not-allowed; }
.divider { border: none; border-top: 1px solid var(--border); margin: 12px 0; }
/* MODAL */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.75); z-index: 200; display: none; align-items: center; justify-content: center; padding: 16px; }
.modal-overlay.open { display: flex; }
.modal { background: var(--surface); border: 1px solid var(--border); border-top: 3px solid var(--accent); box-shadow: 0 8px 32px rgba(0,0,0,0.15); width: 100%; max-width: 560px; max-height: 90vh; overflow-y: auto; }
.modal-header { background: var(--surface2); padding: 14px 16px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 1; }
.modal-title { font-family: 'Oswald', sans-serif; font-weight: 700; font-size: 14px; letter-spacing: 2px; text-transform: uppercase; }
.modal-close { background: none; border: none; color: var(--muted); font-size: 20px; cursor: pointer; }
.modal-body { padding: 16px; }
.modal-section-title { font-family: 'Oswald', sans-serif; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--accent); margin: 16px 0 8px; border-bottom: 1px solid var(--border); padding-bottom: 4px; }
.admin-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.admin-field label { font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); font-family: 'Source Code Pro', monospace; }
.admin-field input { background: var(--surface); border: 1px solid var(--border); color: var(--text); padding: 8px 10px; font-family: 'Barlow', sans-serif; font-size: 14px; outline: none; border-radius: 0; width: 100%; }
.admin-field input:focus { border-color: var(--accent); }
.email-list, .unit-list { display: flex; flex-direction: column; gap: 6px; }
.email-item, .unit-item { display: flex; gap: 6px; align-items: center; }
.email-item input, .unit-item input { flex: 1; background: var(--surface); border: 1px solid var(--border); color: var(--text); padding: 7px 10px; font-family: 'Barlow', sans-serif; font-size: 13px; outline: none; border-radius: 0; }
.email-item input:focus, .unit-item input:focus { border-color: var(--accent); }
.rm-btn { background: var(--danger); border: none; color: #fff; width: 28px; height: 32px; cursor: pointer; font-size: 14px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.add-btn { margin-top: 6px; background: transparent; border: 1px dashed var(--border); color: var(--muted); padding: 6px 12px; font-family: 'Barlow', sans-serif; font-size: 13px; cursor: pointer; width: 100%; transition: all 0.2s; border-radius: 0; }
.add-btn:hover { border-color: var(--accent); color: var(--accent); }
.logo-preview { width: 80px; height: 80px; border: 1px dashed var(--border); background: var(--bg); display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 10px; margin-top: 8px; overflow: hidden; }
.logo-preview img { max-width: 100%; max-height: 100%; object-fit: contain; }
.qty-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.qty-table th { font-family: 'Source Code Pro', monospace; font-size: 8px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); padding: 6px 8px; text-align: left; border-bottom: 1px solid var(--border); }
.qty-table td { padding: 5px 8px; border-bottom: 1px solid var(--border); }
.qty-table input { background: var(--surface); border: 1px solid var(--border); color: var(--text); padding: 3px 6px; font-family: 'Source Code Pro', monospace; font-size: 12px; width: 60px; text-align: center; outline: none; border-radius: 0; }
.qty-table input:focus { border-color: var(--accent); }
.btn-admin-save { background: var(--accent); color: #000; font-weight: 600; width: 100%; margin-top: 16px; padding: 12px; border: none; font-family: 'Oswald', sans-serif; font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase; cursor: pointer; border-radius: 0; }
.btn-admin-save:hover { background: var(--accent2); color: #fff; }
.login-panel { padding: 20px; }
.login-panel h3 { font-family: 'Oswald', sans-serif; letter-spacing: 2px; text-transform: uppercase; font-size: 14px; margin-bottom: 16px; color: var(--accent); }
.login-err { color: var(--danger); font-size: 12px; margin-top: 6px; min-height: 16px; font-family: 'Source Code Pro', monospace; }
/* FAQ MODAL */
.faq-modal { max-width: 680px; }
.faq-search-wrap { position: relative; margin-bottom: 16px; }
.faq-search { width: 100%; background: var(--surface); border: 1px solid var(--border); color: var(--text); padding: 10px 14px 10px 36px; font-family: 'Barlow', sans-serif; font-size: 14px; outline: none; border-radius: 0; }
.faq-search:focus { border-color: var(--accent); }
.faq-search-icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: 15px; pointer-events: none; }
.faq-tabs { display: flex; gap: 0; margin-bottom: 16px; border-bottom: 2px solid var(--border); overflow-x: auto; }
.faq-tab { font-family: 'Oswald', sans-serif; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; padding: 8px 14px; border: none; background: transparent; color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -2px; white-space: nowrap; transition: all 0.2s; }
.faq-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.faq-tab:hover { color: var(--text); }
.faq-category { display: none; }
.faq-category.active { display: block; }
.faq-item { border: 1px solid var(--border); margin-bottom: 8px; overflow: hidden; }
.faq-question { padding: 12px 14px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; font-weight: 500; font-size: 13px; user-select: none; gap: 10px; }
.faq-question:hover { background: var(--surface2); }
.faq-q-text { flex: 1; }
.faq-arrow { color: var(--muted); font-size: 11px; flex-shrink: 0; transition: transform 0.25s; }
.faq-arrow.open { transform: rotate(180deg); }
.faq-answer { display: none; padding: 12px 14px; font-size: 13px; line-height: 1.7; color: var(--muted); border-top: 1px solid var(--border); background: var(--surface2); }
.faq-answer.open { display: block; }
.faq-answer strong { color: var(--text); }
.faq-answer code { font-family: 'Source Code Pro', monospace; background: var(--surface2); padding: 2px 6px; font-size: 11px; color: var(--accent); }
.faq-answer a { color: var(--accent); text-decoration: none; }
.faq-answer a:hover { text-decoration: underline; }
.faq-answer ol, .faq-answer ul { margin: 8px 0 8px 18px; }
.faq-answer li { margin-bottom: 4px; }
.faq-highlight { background: rgba(245,166,35,0.25); border-radius: 2px; }
.faq-tip { background: rgba(46,204,113,0.08); border-left: 3px solid var(--ok); padding: 8px 12px; margin-top: 10px; font-size: 12px; color: var(--text); }
.faq-warn-box { background: rgba(232,68,26,0.08); border-left: 3px solid var(--danger); padding: 8px 12px; margin-top: 10px; font-size: 12px; color: var(--text); }
.faq-step { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 8px; }
.faq-step-num { background: var(--accent); color: #000; font-family: 'Oswald', sans-serif; font-weight: 700; font-size: 11px; min-width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 2px; }
.faq-no-results { text-align: center; padding: 32px; color: var(--muted); font-family: 'Source Code Pro', monospace; font-size: 12px; letter-spacing: 1px; }
/* TOAST */
.toast { position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%) translateY(20px); background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--ok); padding: 10px 20px; font-family: 'Source Code Pro', monospace; font-size: 12px; letter-spacing: 1px; z-index: 300; opacity: 0; transition: all 0.3s; pointer-events: none; white-space: nowrap; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.warn { border-left-color: var(--warn); }
.toast.err { border-left-color: var(--danger); }
/* SENDING OVERLAY */
.sending-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.85); z-index: 400; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 20px; }
.sending-overlay.open { display: flex; }
.spinner { width: 52px; height: 52px; border: 4px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.sending-text { font-family: 'Oswald', sans-serif; font-size: 16px; letter-spacing: 3px; text-transform: uppercase; color: var(--header-text); }
.sending-sub { font-family: 'Source Code Pro', monospace; font-size: 11px; color: var(--muted); letter-spacing: 1px; }
/* SUCCESS SCREEN */
.success-screen { position: fixed; inset: 0; background: var(--surface); z-index: 500; display: none; flex-direction: column; align-items: center; justify-content: center; padding: 32px 20px; text-align: center; }
.success-screen.open { display: flex; }
.success-hex { width: 90px; height: 90px; background: var(--ok); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 40px; margin-bottom: 24px; animation: popIn 0.4s ease; }
@keyframes popIn { from { transform: scale(0.5); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.success-title { font-family: 'Oswald', sans-serif; font-size: 28px; font-weight: 700; letter-spacing: 4px; text-transform: uppercase; color: var(--ok); margin-bottom: 8px; }
.success-sub { font-family: 'Source Code Pro', monospace; font-size: 12px; color: var(--muted); letter-spacing: 1px; margin-bottom: 24px; }
.success-card { background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--ok); padding: 16px 20px; max-width: 400px; width: 100%; text-align: left; margin-bottom: 12px; }
.success-card-row { display: flex; justify-content: space-between; align-items: center; padding: 5px 0; border-bottom: 1px solid var(--border); font-size: 12px; }
.success-card-row:last-child { border-bottom: none; }
.success-card-label { font-family: 'Source Code Pro', monospace; color: var(--muted); font-size: 10px; letter-spacing: 1px; text-transform: uppercase; }
.success-card-val { font-weight: 600; color: var(--text); font-size: 13px; }
.success-emails { background: var(--surface); border: 1px solid var(--border); padding: 12px 16px; max-width: 400px; width: 100%; margin-bottom: 24px; }
.success-emails-label { font-family: 'Source Code Pro', monospace; font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.success-email-chip { display: inline-block; background: rgba(46,204,113,0.1); border: 1px solid var(--ok); color: var(--ok); padding: 3px 10px; font-size: 11px; margin: 3px; font-family: 'Source Code Pro', monospace; }
.btn-new-shift { background: var(--accent); color: #000; font-family: 'Oswald', sans-serif; font-size: 15px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; border: none; padding: 14px 40px; cursor: pointer; margin-top: 8px; }
.btn-new-shift:hover { background: var(--accent2); color: #fff; }
/* Day/night switch in the header bar (2026-09-03). Same look as the shared engine control on every other page. */
.rcp-theme-switch{position:relative;display:inline-flex;align-items:center;justify-content:space-between;width:54px;height:28px;padding:0 6px;border-radius:14px;border:1px solid var(--border2,var(--border));background:var(--bg3,var(--bg2));color:var(--text2);cursor:pointer;font-size:13px;line-height:1;flex:0 0 auto;box-sizing:border-box;margin:0 6px;-webkit-tap-highlight-color:transparent}
.rcp-theme-switch .rts-i{pointer-events:none;width:14px;text-align:center}
.rcp-theme-switch .rts-knob{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:var(--blue,var(--accent,#0088dd));transition:transform .18s ease;pointer-events:none}
.rcp-theme-switch[aria-checked="true"] .rts-knob{transform:translateX(26px)}
.rcp-theme-switch:focus-visible{outline:2px solid var(--blue,var(--accent,#0088dd));outline-offset:2px}
body .header .hdr-nav .rcp-theme-switch{height:28px;min-height:28px;width:54px;border:1px solid var(--border2,var(--border));border-radius:14px;padding:0 6px}