/* cnc-app.css — Liberty CNC App-wide CSS variables and shared component styles. Loaded as a linked stylesheet via AppIncludesHook() in app-includes.php. See liberty/lasso-app-includes.txt for how this is wired in. */ /* ═══════════════════════════════════════════════════════════════════ DESIGN TOKENS ═══════════════════════════════════════════════════════════════════ */ :root { /* ── Spreadsheet-faithful palette ──────────────────────────────── Exact hex values from the Liberty CNC spreadsheet system (Purchase Orders.xlsx, Calibration Log.xlsx). Reference: spreadsheet-app-colors.txt Use these when the web UI needs to mirror what staff see in Excel. ─────────────────────────────────────────────────────────────────── */ /* PO / job status — tab color legend */ --lc-ss-quote: #7030A0; /* Quote — not yet issued (purple) */ --lc-ss-wip: #FFFF00; /* WIP / In Production (bright yellow) */ --lc-ss-po-sent: #FFC000; /* PO Sent — awaiting delivery (amber) */ --lc-ss-received: #92D050; /* Received / fulfilled (lime green) */ --lc-ss-priority-wip: #1A7B8C; /* Priority WIP (teal, approx THEME:5) */ /* PO document structural fills */ --lc-ss-po-header: #FAA51A; /* PO title / header row (orange) */ --lc-ss-ship-date: #FCFC8B; /* Ship Date input field (pale yellow) */ --lc-ss-liberty-row: #C6FAC7; /* Liberty PO row background (mint) */ /* Alert / warning fills */ --lc-ss-error: #FF0000; /* Error / problem vendor / retired tool */ --lc-ss-overrun: #C00000; /* Cost overrun — dark red */ --lc-ss-flagged: #F76F6F; /* Flagged dollar amounts — salmon */ --lc-ss-urgent: #FF00B7; /* Ad-hoc urgent note — hot pink */ --lc-ss-approved: #00B050; /* Confirmed / approved cost — Excel green */ /* Reference / structural fills */ --lc-ss-holiday: #0C789C; /* Holiday dates block — dark teal */ --lc-ss-output: #DCE6F1; /* Formula-result / read-only — pale blue */ --lc-ss-category: #DDEBF7; /* Section category header — light blue */ --lc-ss-separator: #43CEFF; /* Locked separator column — sky blue */ /* ── App UI status tokens ──────────────────────────────────────── Web-adapted colors for job status pills, badges, and highlights. Chosen for readability on white backgrounds (not pure Excel hex). Each status has a text color + a light background tint. ─────────────────────────────────────────────────────────────────── */ /* Ready to Ship */ --lc-status-rts: #2e7d46; --lc-status-rts-bg: #d6f0de; /* On Hold */ --lc-status-hold: #856404; --lc-status-hold-bg: #fff3cd; /* In Production */ --lc-status-ip: #0d5fa3; --lc-status-ip-bg: #d0e8ff; /* Out for Processing */ --lc-status-op: #5a3c9e; --lc-status-op-bg: #ede0ff; /* Confirmed / acknowledged */ --lc-status-confirmed: #155e2b; --lc-status-confirmed-bg: #c8f0d4; /* Quote / estimate stage */ --lc-status-quote: #5a1e8a; --lc-status-quote-bg: #ead8f7; /* Cancelled / closed */ --lc-status-closed: #555; --lc-status-closed-bg: #e8e8e8; /* ── App greens ─────────────────────────────────────────────────── Used for open-job highlights, badges, positive call-outs. ─────────────────────────────────────────────────────────────────── */ --lc-green: #2e7d46; --lc-green-bg: #d6f0de; --lc-green-border: #8ecda0; --lc-green-text: #1a4d2b; /* dark text for use on green bg rows */ /* ── Bootstrap 3 integration ────────────────────────────────────── Framework active/selected colors — named here so overrides are consistent and don't scatter magic hex values through the app. ─────────────────────────────────────────────────────────────────── */ --lc-bs-active: #337ab7; /* Bootstrap primary / list-group active bg */ --lc-bs-active-border: #2265a0; /* Darker shade for active borders */ --lc-bs-active-text: #fff; /* ── Nav card / section accent colours ────────────────────────── Used for left-border accents on nav cards and matched icon tints. Define here so any page that needs a consistent accent can reference the variable instead of repeating a hex value. ───────────────────────────────────────────────────────────────── */ --lc-accent-blue: #337ab7; /* Sales / primary */ --lc-accent-orange: #c87e0a; /* Orders / production docs */ --lc-accent-teal: #1a7b8c; /* Production & workflow */ --lc-accent-green: var(--lc-green); /* Quality / positive state */ --lc-accent-purple: #5a1e8a; /* Projects */ --lc-accent-gray: #888; /* Miscellaneous / neutral */ /* ── Layout ───────────────────────────────────────────────────── */ --lc-split-height: calc(100vh - 160px); } /* ═══════════════════════════════════════════════════════════════════ SPLIT-PANE — LIST ITEMS (shared by customer, vendor, and any future split-view list pages) ═══════════════════════════════════════════════════════════════════ */ /* Clickable list item — all split-view lists; replaces inline cursor/padding */ li.lc-split-item { cursor: pointer; padding: 7px 10px; } /* Row with activity indicator: green left border + subtle green tint */ li.list-group-item.has-open-jobs { border-left: 3px solid var(--lc-green-border); background-color: var(--lc-green-bg); color: var(--lc-green-text); } /* Active (selected) row overrides green so it stays readable */ li.list-group-item.has-open-jobs.active { background-color: var(--lc-bs-active); border-left-color: var(--lc-bs-active-border); color: var(--lc-bs-active-text); } /* Job count badge after customer name */ .lc-job-count { display: inline-block; margin-left: 5px; padding: 1px 6px; border-radius: 9px; font-size: 11px; font-weight: 600; background: var(--lc-green); color: var(--lc-bs-active-text); vertical-align: middle; } /* =================================================================== QUICK-ADD WRAP (.lc-ss-wrap + .lc-ss-toggle) Select + inline compact '+' span side by side, matching the framework's .lx-ss-wrap / .lx-ss-quick-add pattern. Usage:
+
=================================================================== */ .lc-ss-wrap { display: flex; align-items: stretch; position: relative; } .lc-ss-wrap .form-control { flex: 1; min-width: 0; border-radius: 4px 0 0 4px; } .lc-ss-toggle { display: flex; align-items: center; padding: 0 9px; border: 1px solid #ccc; border-left: none; border-radius: 0 4px 4px 0; background: #f5f5f5; color: #888; cursor: pointer; user-select: none; white-space: nowrap; } .lc-ss-toggle:hover { color: #3a7d3a; } /* ═══════════════════════════════════════════════════════════════════ STATUS PILLS (reusable across pages) Usage: Ready to Ship ═══════════════════════════════════════════════════════════════════ */ .lc-pill { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 600; white-space: nowrap; } .lc-pill-rts { background: var(--lc-status-rts-bg); color: var(--lc-status-rts); } .lc-pill-hold { background: var(--lc-status-hold-bg); color: var(--lc-status-hold); } .lc-pill-ip { background: var(--lc-status-ip-bg); color: var(--lc-status-ip); } .lc-pill-op { background: var(--lc-status-op-bg); color: var(--lc-status-op); } .lc-pill-confirmed { background: var(--lc-status-confirmed-bg); color: var(--lc-status-confirmed); } .lc-pill-quote { background: var(--lc-status-quote-bg); color: var(--lc-status-quote); } .lc-pill-closed { background: var(--lc-status-closed-bg); color: var(--lc-status-closed); } /* =================================================================== NAV CARDS (home page quick-access blocks) Usage: AppUI_NavCard() in obj-app-ui.php =================================================================== Layout: .lc-nav-card-row > .lc-nav-card-col > .lc-nav-card 5 columns on wide desktops; wraps to 3, 2, 1 at smaller widths. Equal height within each row is handled by flexbox on the row. */ .lc-nav-card-row { display: flex; flex-wrap: wrap; margin: 0 -8px; } .lc-nav-card-col { padding: 0 8px 16px; box-sizing: border-box; width: 20%; /* 5 across on wide screens */ display: flex; /* lets card fill full height */ } @media (max-width: 1300px) { .lc-nav-card-col { width: 33.333%; } } @media (max-width: 860px) { .lc-nav-card-col { width: 50%; } } @media (max-width: 520px) { .lc-nav-card-col { width: 100%; } } .lc-nav-card { background: var(--theme-bg); border: 1px solid var(--theme-table-border); border-left: 4px solid var(--lc-accent-blue); /* default accent; overridden below */ border-radius: 3px; padding: 14px 14px 12px; display: flex; flex-direction: column; width: 100%; box-sizing: border-box; } /* Icon */ .lc-nc-icon { font-size: 24px; color: #337ab7; margin-bottom: 9px; line-height: 1; } /* Title */ .lc-nc-title { font-size: 16px; font-weight: 700; color: var(--theme-color); margin-bottom: 6px; letter-spacing: .01em; } /* Blurb */ .lc-nc-blurb { font-size: 13px; color: var(--theme-tab-color); line-height: 1.45; flex: 1; /* pushes link list to bottom */ margin-bottom: 10px; } /* Link list */ .lc-nc-links { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--theme-table-border); padding-top: 8px; } .lc-nc-links li { padding: 3px 0; } .lc-nc-links a { font-size: 13px; text-decoration: none; } .lc-nc-links a:hover { text-decoration: underline; } .lc-nc-links .lc-nc-arrow { font-size: 9px; margin-right: 4px; opacity: .6; vertical-align: middle; } /* Accent colour variants — border-left + icon colour */ .lc-nav-card[data-accent="blue"] { border-left-color: var(--lc-accent-blue); } .lc-nav-card[data-accent="blue"] .lc-nc-icon { color: var(--lc-accent-blue); } .lc-nav-card[data-accent="orange"] { border-left-color: var(--lc-accent-orange); } .lc-nav-card[data-accent="orange"] .lc-nc-icon { color: var(--lc-accent-orange); } .lc-nav-card[data-accent="teal"] { border-left-color: var(--lc-accent-teal); } .lc-nav-card[data-accent="teal"] .lc-nc-icon { color: var(--lc-accent-teal); } .lc-nav-card[data-accent="green"] { border-left-color: var(--lc-accent-green); } .lc-nav-card[data-accent="green"] .lc-nc-icon { color: var(--lc-accent-green); } .lc-nav-card[data-accent="purple"] { border-left-color: var(--lc-accent-purple); } .lc-nav-card[data-accent="purple"] .lc-nc-icon { color: var(--lc-accent-purple); } .lc-nav-card[data-accent="gray"] { border-left-color: var(--lc-accent-gray); } .lc-nav-card[data-accent="gray"] .lc-nc-icon { color: var(--lc-accent-gray); } /* =================================================================== UTILITY — theme-aware colour helpers =================================================================== Use these instead of inline style="color:..." so dark mode works automatically and accent colours stay consistent across the app. ================================================================= */ /* Secondary / muted text — follows theme var instead of Bootstrap's hardcoded #777 so it reads correctly in dark mode too. */ .lc-text-muted { color: var(--theme-tab-color); } /* Accent-tinted text / icons — one class per accent token */ .lc-text-blue { color: var(--lc-accent-blue); } .lc-text-orange { color: var(--lc-accent-orange); } .lc-text-teal { color: var(--lc-accent-teal); } .lc-text-green { color: var(--lc-accent-green); } .lc-text-purple { color: var(--lc-accent-purple); } .lc-text-gray { color: var(--lc-accent-gray); } /* Thin separator row — used in dashboard stat lists */ .lc-row-sep { display: flex; justify-content: space-between; padding: 3px 0; border-bottom: 1px solid var(--theme-table-border); } /* Search Select (lx-ss-*) -- rules moved to framework (app-basic.css). */