:root { --bg: #0f1319; --card-bg: #1a2130; --border: #2a3244; --text: #f2f4f8; --text-dim: #9aa4b8; --accent: #3b82f6; --good: #22c55e; --good-bg: #113321; --bad: #ef4444; --bad-bg: #3a1518; --warn: #f59e0b; --warn-bg: #3a2a10; /* Blue -- vendor-batch calendar chips (see PROJECT_STATUS.md "Vendor checkout: expected return date + batch number"), same family as the master order sheet's blue vendor row highlight/stamp. */ --info: #60a5fa; --info-bg: #16233d; } /* Phase 5: light mode -- see PROJECT_STATUS.md "Preferences tab UI". Every color in this stylesheet is already a CSS variable, so a second palette + a `data-theme` attribute on is the whole feature. Which one applies is read from GET /users/me/preferences (per-account, see main.py's UserPreferences), applied once at login and again the moment it's changed in the new Preferences panel. Same palette values as static_desktop/index.html's light theme, for visual consistency across platforms. */ html[data-theme="light"] { --bg: #f4f5f7; --card-bg: #ffffff; --border: #d9dce3; --text: #14181f; --text-dim: #5b6472; --accent: #2563eb; --good: #16a34a; --good-bg: #dcfce7; --bad: #dc2626; --bad-bg: #fee2e2; --warn: #d97706; --warn-bg: #fef3c7; --info: #2563eb; --info-bg: #dbeafe; } /* ---- branding -- see PROJECT_STATUS.md "Mobile UI branding pass" ---- Same two pre-cut transparent-background logo assets as the desktop UI (static/assets/, copied from static_desktop/assets/ -- mobile is a separate static mount, so relative paths don't cross over), swapped via the same [data-theme="light"] selector the color palette above already uses. Sized smaller than desktop's since the mobile top bar is much tighter on vertical space. */ .brand-logo { height: 22px; width: auto; display: block; } .brand-logo.logo-light { display: none; } html[data-theme="light"] .brand-logo.logo-dark { display: none; } html[data-theme="light"] .brand-logo.logo-light { display: block; } /* Bumped from 48px -- Liam: "hardly visible and definitely unreadable" at the old size. See PROJECT_STATUS.md "Login logo size fix". */ .brand-logo-lg { height: 88px; width: auto; display: block; margin: 0 auto 10px; } .brand-logo-lg.logo-light { display: none; } html[data-theme="light"] .brand-logo-lg.logo-dark { display: none; } html[data-theme="light"] .brand-logo-lg.logo-light { display: block; } * { box-sizing: border-box; } /* An element's own `display: flex/block/...` rule (there are many in this stylesheet, one per bar/panel) has higher specificity than the browser's built-in `[hidden] { display: none }` UA rule, so setting the `hidden` attribute on e.g. #reminder-banner or #batch-bar was silently NOT hiding them -- the element stayed visible even though the JS correctly set `.hidden = true`. This one rule wins over any single-ID display rule in the file and fixes every element using the hidden attribute at once, not just the ones found so far. */ [hidden] { display: none !important; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; height: 100%; } body { display: flex; flex-direction: column; min-height: 100vh; } #top-bar { padding: 10px 14px; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 10px; position: sticky; top: 0; background: var(--bg); z-index: 10; } #show-select { width: 100%; padding: 10px; border-radius: 10px; border: 1px solid var(--border); background: var(--card-bg); color: var(--text); font-size: 15px; } #login-screen, #set-password-screen { flex: 1; display: flex; align-items: center; justify-content: center; padding: 24px; } #login-form, #set-password-form { width: 100%; max-width: 360px; display: flex; flex-direction: column; gap: 12px; } #login-form h1, #set-password-form h1 { font-size: 22px; margin: 0 0 2px; text-align: center; } .login-sub { margin: 0 0 8px; color: var(--text-dim); font-size: 14px; text-align: center; } #login-email, #login-password, #set-password-current, #set-password-new, #set-password-confirm { padding: 14px; font-size: 16px; border-radius: 10px; border: 1px solid var(--border); background: var(--card-bg); color: var(--text); } #login-submit, #set-password-submit { padding: 14px; border-radius: 10px; border: none; background: var(--accent); color: white; font-weight: 700; font-size: 16px; } #login-error, #set-password-error { color: var(--bad); font-size: 13px; text-align: center; } .link-btn { background: none; border: none; color: var(--text-dim); font-size: 13px; text-decoration: underline; padding: 4px; cursor: pointer; } #account-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; } /* Small top-bar logo -- see PROJECT_STATUS.md "Mobile UI branding pass". Grouped with #account-name so justify-content: space-between on #account-row still just splits "identity" (logo + name) from the logout button, instead of stranding the logo alone on the far left. */ #account-left { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1; } #account-name { font-size: 13px; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #logout-btn { padding: 6px 12px; border-radius: 8px; border: 1px solid var(--border); background: var(--card-bg); color: var(--text-dim); font-size: 12px; flex-shrink: 0; } #mode-row { display: flex; gap: 8px; } .mode-btn { flex: 1; padding: 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--card-bg); color: var(--text-dim); font-size: 16px; font-weight: 600; } .mode-btn[aria-selected="true"] { background: var(--accent); color: white; border-color: var(--accent); } /* Phase 4: Import/Orders/History -- a smaller, secondary row below the primary check-in/check-out/lookup mode tabs, since these are "management" tasks rather than part of the fast scan loop. */ #manage-row { display: flex; gap: 6px; } .manage-btn { flex: 1; padding: 8px; border-radius: 8px; border: 1px solid var(--border); background: transparent; color: var(--text-dim); font-size: 13px; font-weight: 600; } /* Full-screen overlay panels (Import/Orders/History/Preferences/Calendar/ Order documents/Wrap) -- same shape as #lookup-panel below, just more of them. #order-doc-panel -- see PROJECT_STATUS.md "Calendar chip click: order detail view". #wrap-panel was missing from this shared rule entirely until PROJECT_STATUS.md "Landing page content pass + login logo + Wrap panel fix" -- it had never actually been given the fixed/ full-screen treatment since the Wrap tab was first built, so it was rendering as a plain in-flow block appended after the visible scan screen instead of covering it, a real bug caught while screenshotting the app for the Instructions page. */ #import-panel, #orders-panel, #history-panel, #preferences-panel, #calendar-panel, #order-doc-panel, #wrap-panel { position: fixed; inset: 0; background: var(--bg); z-index: 60; overflow-y: auto; } /* Inventory sits one z-index below the other full-screen panels above (55 instead of 60) -- see PROJECT_STATUS.md "Mobile Inventory panel". Tapping a card opens #lookup-panel (z-index 60) ON TOP of an already- open Inventory panel, so the two need to be reliably ordered by z-index rather than relying on DOM order (#inventory-panel actually comes AFTER #lookup-panel in source order, right before #import-panel -- without this explicit z-index it would incorrectly paint over an open Lookup panel instead of sitting beneath it). */ #inventory-panel { position: fixed; inset: 0; background: var(--bg); z-index: 55; overflow-y: auto; } #inventory-panel-inner, #import-panel-inner, #orders-panel-inner, #history-panel-inner, #preferences-panel-inner, #calendar-panel-inner, #order-doc-panel-inner, #wrap-panel-inner { max-width: 640px; margin: 0 auto; padding: 16px 16px 40px; } #inventory-close, #import-close, #orders-close, #history-close, #preferences-close, #calendar-close, #order-doc-close, #wrap-close { padding: 8px 14px; border-radius: 8px; border: 1px solid var(--border); background: var(--card-bg); color: var(--text-dim); font-size: 13px; margin-bottom: 14px; } #inventory-panel h1, #import-panel h1, #orders-panel h1, #history-panel h1, #preferences-panel h1, #calendar-panel h1, #order-doc-panel h1, #wrap-panel h1 { font-size: 20px; margin: 0 0 4px; } #preferences-panel h2 { font-size: 15px; margin: 22px 0 10px; } #preferences-panel .checkline { margin-bottom: 10px; } .panel-save-btn { width: 100%; padding: 12px; border-radius: 10px; border: none; background: var(--accent); color: white; font-weight: 700; font-size: 15px; margin-top: 4px; } .panel-sub { color: var(--text-dim); font-size: 14px; margin: 0 0 16px; } /* Vendors list -- see PROJECT_STATUS.md "Vendor management UI in Preferences". */ .plain-list { list-style: none; margin: 0 0 14px; padding: 0; font-size: 14px; } .plain-list li { padding: 6px 0; border-bottom: 1px solid var(--border); } .plain-list li:last-child { border-bottom: none; } .panel-msg { margin-top: 10px; font-size: 13px; } .panel-msg.ok { color: var(--good); } .panel-msg.err { color: var(--bad); } #import-form { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; } #import-submit { padding: 12px; border-radius: 10px; border: none; background: var(--accent); color: white; font-weight: 700; font-size: 15px; } #inventory-list, #orders-list, #history-panel-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; } #inventory-list li, #orders-list li, #history-panel-list li { background: var(--card-bg); border: 1px solid var(--border); border-radius: 10px; padding: 12px; font-size: 14px; } /* Inventory cards are tappable (open the Lookup panel), unlike Orders/ History rows -- a little affordance so that's obvious. */ #inventory-list li { cursor: pointer; } #inventory-list li:active { background: var(--border); } .card-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-weight: 700; } .card-sub { color: var(--text-dim); font-size: 12px; margin-top: 2px; } .card-links { display: flex; gap: 14px; margin-top: 8px; } .card-links a { color: var(--accent); font-weight: 600; font-size: 13px; text-decoration: none; } /* Activity badge -- same green/red color language as the mode buttons' check-in/check-out coloring, reused here to label each History row. */ .activity-badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; } .activity-badge.in { background: var(--good-bg); color: var(--good); } .activity-badge.out { background: var(--bad-bg); color: var(--bad); } /* Item status badge -- Inventory cards only, same three states/colors as desktop's .badge (see PROJECT_STATUS.md "Mobile Inventory panel"). */ .badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; } .badge.in { background: var(--good-bg); color: var(--good); } .badge.out { background: var(--bad-bg); color: var(--bad); } .badge.unknown { background: var(--warn-bg); color: var(--warn); } /* ---- Calendar panel + reminder banner -- see PROJECT_STATUS.md "Calendar tab + in-app reminders" ---- */ #reminder-banner { margin: 0 14px 10px; padding: 10px 12px; border-radius: 10px; background: var(--warn-bg); border: 1px solid var(--warn); color: var(--warn); font-size: 13px; display: flex; flex-direction: column; gap: 8px; } #reminder-banner button { align-self: flex-end; padding: 4px 10px; border-radius: 8px; border: 1px solid var(--warn); background: transparent; color: var(--warn); font-size: 12px; } #cal-nav-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } #cal-nav-row button { padding: 8px 14px; border-radius: 8px; border: 1px solid var(--border); background: var(--card-bg); color: var(--text); font-size: 15px; } #cal-month-label { font-weight: 700; font-size: 15px; } #cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; } .cal-dow { text-align: center; font-size: 9px; color: var(--text-dim); text-transform: uppercase; padding-bottom: 2px; } .cal-day { min-height: 46px; border: 1px solid var(--border); border-radius: 6px; padding: 3px; font-size: 9px; background: var(--card-bg); } .cal-day.outside-month { opacity: 0.3; } .cal-day.today { border-color: var(--accent); } .cal-day.in-duration { box-shadow: inset 2px 0 0 var(--accent); } .cal-day-num { font-weight: 700; margin-bottom: 2px; font-size: 10px; } .cal-order-chip { display: block; font-size: 8px; padding: 1px 3px; border-radius: 4px; margin-bottom: 1px; background: var(--warn-bg); color: var(--warn); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; } /* Green once every item on the order is back with the rental house -- see PROJECT_STATUS.md "Calendar: green chip once fully returned". */ .cal-order-chip.returned { background: var(--good-bg); color: var(--good); } /* Blue vendor-batch chips -- see PROJECT_STATUS.md "Vendor checkout: expected return date + batch number". Own chip type (vendor name + batch #), not an order-due chip, so it gets its own class rather than reusing .cal-order-chip's amber/green modifiers. */ .cal-vendor-chip { display: block; font-size: 8px; padding: 1px 3px; border-radius: 4px; margin-bottom: 1px; background: var(--info-bg); color: var(--info); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; } /* House name + "#order ยท N items" -- see PROJECT_STATUS.md "Calendar chip: show rental house, order #, item count". Both kept on one line with the chip's existing ellipsis truncation (cal-day cells are tiny on mobile) rather than wrapping, which would blow out the grid's row height. */ .cal-chip-house { font-weight: 700; } .cal-chip-meta { opacity: 0.85; } .cal-chip-house::after { content: " "; } main { flex: 1; padding: 14px; display: flex; flex-direction: column; gap: 14px; max-width: 640px; width: 100%; margin: 0 auto; } #batch-bar { display: flex; flex-direction: column; gap: 8px; background: var(--card-bg); border: 1px solid var(--border); border-radius: 12px; padding: 10px 14px; font-size: 14px; } #batch-controls-row, #checkin-batch-controls-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; } #batch-destination-row { display: flex; gap: 8px; } #batch-destination-row select { flex: 1; font-size: 13px; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg); color: var(--text); } #batch-duedate-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; } #batch-duedate-row label { color: var(--text-dim); font-size: 13px; } #batch-duedate-row input[type="date"] { font-size: 13px; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg); color: var(--text); } #batch-status, #checkin-batch-status { color: var(--text-dim); } #batch-start-btn, #batch-finish-btn, #checkin-batch-start-btn, #checkin-batch-finish-btn { padding: 8px 14px; border-radius: 8px; border: none; background: var(--accent); color: white; font-weight: 600; font-size: 14px; } #batch-finish-btn, #checkin-batch-finish-btn { background: var(--good); } #checkin-batch-bar { display: flex; flex-direction: column; gap: 8px; background: var(--card-bg); border: 1px solid var(--border); border-radius: 12px; padding: 10px 14px; font-size: 14px; } #checkin-batch-source-row { display: flex; gap: 8px; } #checkin-batch-source-row select, #checkin-batch-vendor-select { flex: 1; font-size: 13px; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg); color: var(--text); } #checkin-batch-duedate-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; } #checkin-batch-duedate-row label { color: var(--text-dim); font-size: 13px; } #checkin-batch-duedate-row input[type="date"] { font-size: 13px; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg); color: var(--text); } #scan-form { display: flex; } #scan-input-row { display: flex; align-items: stretch; gap: 8px; width: 100%; } #barcode-input { flex: 1; min-width: 0; width: auto; padding: 20px 16px; font-size: 22px; border-radius: 14px; border: 2px solid var(--border); background: var(--card-bg); color: var(--text); } #barcode-input:focus { outline: none; border-color: var(--accent); } /* Camera barcode scan -- see PROJECT_STATUS.md "Camera barcode scanning". Square button matching the input's height, so the row reads as one control, not two competing elements. */ #camera-scan-btn { flex: 0 0 auto; width: 60px; display: flex; align-items: center; justify-content: center; border-radius: 14px; border: 2px solid var(--border); background: var(--card-bg); color: var(--text); } #camera-scan-btn:active { background: var(--accent); color: #fff; border-color: var(--accent); } /* Full-screen camera scan overlay -- same fixed/inset/z-index pattern as #lookup-panel above, this app's standard full-screen-overlay shape. */ #camera-scan-overlay { position: fixed; inset: 0; background: #000; z-index: 70; display: flex; flex-direction: column; } #camera-scan-header { display: flex; align-items: center; justify-content: space-between; padding: 16px; color: #fff; font-size: 15px; } #camera-scan-close { padding: 8px 16px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.4); background: rgba(255, 255, 255, 0.08); color: #fff; font-weight: 600; } /* Quagga2 (see PROJECT_STATUS.md "Camera barcode scanning: switched to Quagga2 for 1D barcodes") renders its own