/* ─── RLF SHARED STYLES ─────────────────────────────────────────────────────── Loaded by every app page. Defines CSS variables for light + dark mode. Individual pages keep their own layout/component CSS — this file only owns the design-token layer (:root variables). ────────────────────────────────────────────────────────────────────────────── */ /* LIGHT MODE (default) */ :root { --bg: #efeff4; --card: #ffffff; --red: #ff3b30; --blue: #007aff; --green: #1e8a38; --orange: #ff9500; --line: rgba(60,60,67,0.12); --t1: #000000; --t2: #3c3c43; --t3: #c7c7cc; --fn: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif; /* Component helpers */ --nav-bg: rgba(242,242,247,0.92); --input-bg: rgba(120,120,128,0.12); --chip-bg: rgba(120,120,128,0.16); --card2: #f2f2f7; /* second-level card / grouped section bg */ --placeholder: #c7c7cc; --sub: #8e8e93; /* secondary label / muted text */ --sep: #e5e5ea; /* separator lines */ --btn-dark: #3c3c43; /* dark-background buttons in light mode */ --inv-row-sel-bg: #e8f0ff; /* "last viewed" invoice row highlight (client/location profile invoice list) */ --inv-row-sel-border: #b8d4ff; --inv-sel-bg: rgba(30,138,56,0.08); /* selected invoice row tint (Banking — Select Invoices) */ /* Owner badge (Servando / Salvador / Red Light Fire) — client profile hero + Banking hero card */ --owner-badge-servando-bg: #eeeefd; --owner-badge-servando-text: #4a48b0; --owner-badge-salvador-bg: #fff3e0; --owner-badge-salvador-text: #b86000; --owner-badge-rlf-bg: #e8f0ff; --owner-badge-rlf-text: #007aff; /* Balance-due badge (hero card, next to owner badge) */ --balance-badge-bg: #fff0f0; --balance-badge-text: #c0392b; } /* DARK MODE — handled entirely by rlf-config.js via html.rlf-dark class. The JS system reads localStorage rlf_appearance (auto/light/dark) and applies .rlf-dark to before the page renders, preventing flash. Do NOT add @media (prefers-color-scheme: dark) here — it conflicts with the JS class system and breaks manual light/dark override in Settings. */ /* ─── SHARED COMPONENT: TAP-TO-SORT COLUMN HEADER ───────────────────────────── Used by any page with a sortable invoice/data table header row (tap a column to sort by it, tap again to reverse direction). Originally built only inside 03-client-profile-v2.html, then copied into 05-location-detail-v2.html — moved here 2026-06-19 so every page (including 14-banking.html's Select Invoices table) shares one definition instead of duplicating it per CLAUDE.md rule #9 (shared UI lives in one place only). */ .inv-col-hdr{font-size:13px;font-weight:600;color:var(--t2);text-transform:uppercase;letter-spacing:0.05em;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:2px} .inv-col-hdr.active{color:var(--blue)} .inv-col-hdr-arrow{display:inline-block;width:8px;font-size:9px;line-height:1} /* ─── SHARED COMPONENT: INVOICE-PREVIEW SHEET TOP LABEL ─────────────────────── The small "INVOICE PREVIEW" label on the LEFT of every invoice-preview sheet's drag-handle row. Absolutely positioned so the handle stays centered. One definition so all preview sheets match. Added 2026-07-05. Uses var(--t2) so it reads correctly in light AND dark mode. */ .rlf-preview-lbl{position:absolute;left:16px;top:50%;transform:translateY(-50%);font-size:11px;font-weight:600;letter-spacing:0.04em;text-transform:uppercase;color:var(--t2);pointer-events:none} /* ─── SHARED COMPONENT: SERVICE-TYPE + PREVIEW BUTTONS ──────────────────────── The Recurring / One-Time service-type buttons and the Preview button, used on New Invoice (06), Edit Invoice (12b), and the invoice-detail type toggle (12). Defined ONCE here so a future change is a single edit — they used to be hardcoded per-file (that drift is why the same fix kept needing to be repeated). Uses var(--blue)/var(--orange) so light + dark are both correct. Two patterns share these: the forms' "pick to start" selector (both buttons solid — apply .recurring / .onetime) and the detail page's toggle (selected solid, unselected gray — apply .off to the unselected one). Added 2026-07-05. */ .rlf-svc-btn{flex:1;height:50px;border-radius:100px;font-size:15px;font-weight:600;cursor:pointer;font-family:var(--fn);transition:all 0.15s;border:1.5px solid transparent} .rlf-svc-btn.recurring{background:var(--blue);border-color:var(--blue);color:#fff;box-shadow:0 2px 8px rgba(0,122,255,0.35)} .rlf-svc-btn.onetime{background:var(--orange);border-color:var(--orange);color:#fff;box-shadow:0 2px 8px rgba(255,149,0,0.35)} .rlf-svc-btn.off{background:var(--input-bg,rgba(120,120,128,0.12));border-color:transparent;color:var(--t2);box-shadow:none} .rlf-preview-btn{flex:1;height:50px;border-radius:100px;font-size:15px;font-weight:600;border:none;cursor:pointer;font-family:var(--fn);display:flex;align-items:center;justify-content:center;gap:7px;background:var(--blue);color:#fff;box-shadow:0 2px 8px rgba(0,122,255,0.35)}