/* ============================================================================ SCOPE — Restaurant Inventory App Design system matched to scope.io brand identity. Fonts: Cormorant Garamond (display) + Inter (UI) ============================================================================ */ /* -------------------------------------------------- Variables */ :root { /* Backgrounds — scope.io exact values */ --bg: #080808; --surface: #0f0f0f; --surface-2: rgba(255,255,255,0.04); --border: rgba(255,255,255,0.08); --border-hover: rgba(0,168,107,0.32); /* Text — opacity layers */ --text: #ffffff; --text-dim: rgba(255,255,255,0.48); --text-mute: rgba(255,255,255,0.32); --text-faint: rgba(255,255,255,0.16); /* Brand green — scope.io */ --brand: #00a86b; --brand-light: #00d68a; --brand-deep: #008a58; --grad: linear-gradient(135deg, #00a86b 0%, #00d68a 55%, #00a86b 100%); --brand-glow: rgba(0,168,107,0.08); --brand-glow2: rgba(0,168,107,0.16); /* Status */ --ok: #00d68a; --ok-bg: rgba(0,214,138,0.1); --low: #ffc857; --low-bg: rgba(255,200,87,0.1); --out: #ff5c5c; --out-bg: rgba(255,92,92,0.1); /* Shape */ --radius: 20px; --radius-sm: 12px; --radius-pill: 50px; /* Effects */ --shadow: 0 8px 32px rgba(0,0,0,0.5); --tr: 0.25s ease; } /* -------------------------------------------------- Reset */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* Clip horizontal overflow on (the viewport scroller), NOT on . A non-visible overflow on body makes body its own scroll container, which breaks `position: sticky` on the topbar (notably on iOS Safari). */ html { height: 100%; overflow-x: hidden; /* Block double-tap-to-zoom and pinch-zoom (kiosk behavior); pan-x/pan-y keep normal scrolling. iOS Safari pinch is also blocked in js/no-zoom.js. */ touch-action: pan-x pan-y; } body { min-height: 100%; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: var(--bg); color: var(--text); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; overscroll-behavior-y: contain; } a { color: var(--brand-light); text-decoration: none; } button { font-family: inherit; cursor: pointer; } img { max-width: 100%; display: block; } /* -------------------------------------------------- Grad text utility */ .grad-text { background: var(--grad); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* -------------------------------------------------- Top bar */ .topbar { position: sticky; top: 0; z-index: 100; background: rgba(8,8,8,0.9); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid var(--border); padding: 0 20px; height: 64px; display: flex; align-items: center; justify-content: space-between; } .topbar h1 { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 22px; font-weight: 400; letter-spacing: -0.01em; display: flex; align-items: center; gap: 7px; } .topbar-logo { height: 26px; width: auto; display: block; flex-shrink: 0; } .topbar .brand { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 24px; font-weight: 500; background: var(--grad); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .topbar nav { display: flex; gap: 4px; font-size: 13px; font-family: 'Inter', sans-serif; } .topbar nav a { color: var(--text-mute); padding: 7px 13px; border-radius: var(--radius-pill); font-weight: 500; transition: var(--tr); border: 1px solid transparent; } .topbar nav a:hover { color: var(--text); background: var(--surface-2); border-color: var(--border); } .topbar nav a.active { color: var(--text); background: var(--brand-glow); border-color: var(--brand-glow2); } /* -------------------------------------------------- Layout */ .container { max-width: 860px; margin: 0 auto; padding: 20px 20px 100px; } /* -------------------------------------------------- Overline label (scope.io .label) */ .label { display: inline-block; font-family: 'Inter', sans-serif; font-size: 0.65rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--brand-light); margin-bottom: 12px; } /* -------------------------------------------------- Cards */ .card { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; margin: 12px 0; transition: border-color var(--tr); } .card:hover { border-color: rgba(0,168,107,0.18); } .card h2 { margin: 0 0 14px; font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 600; letter-spacing: 0.01em; } .card .empty { color: var(--text-mute); font-size: 14px; } /* -------------------------------------------------- List items (dashboard rows) */ .list-item { display: flex; justify-content: space-between; align-items: center; padding: 13px 0; border-bottom: 1px solid var(--border); } .list-item:last-child { border-bottom: 0; } /* -------------------------------------------------- Status pills */ .pill { display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 600; font-family: 'Inter', sans-serif; letter-spacing: 0.02em; } .pill.ok { background: var(--ok-bg); color: var(--ok); border: 1px solid rgba(0,214,138,0.2); } .pill.low { background: var(--low-bg); color: var(--low); border: 1px solid rgba(255,200,87,0.2); } .pill.out { background: var(--out-bg); color: var(--out); border: 1px solid rgba(255,92,92,0.2); } /* -------------------------------------------------- Buttons */ .btn-primary { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; background: var(--grad); color: #fff; font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 600; letter-spacing: 0.01em; border: 0; border-radius: var(--radius-pill); padding: 18px; min-height: 60px; box-shadow: 0 4px 24px rgba(0,168,107,0.25); transition: transform var(--tr), box-shadow var(--tr); } .btn-primary:active { transform: scale(0.98); box-shadow: 0 2px 12px rgba(0,168,107,0.2); } .btn-primary:disabled { background: var(--surface-2); color: var(--text-faint); box-shadow: none; cursor: not-allowed; } .btn-secondary { display: inline-flex; align-items: center; justify-content: center; gap: 6px; background: var(--surface-2); color: var(--text-dim); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 16px; font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 500; min-height: 40px; transition: var(--tr); } .btn-secondary:hover { border-color: rgba(0,168,107,0.3); background: var(--brand-glow); color: var(--text); } .btn-secondary:active { opacity: 0.8; } .btn-secondary.active { background: var(--brand-glow2); border-color: rgba(0,168,107,0.4); color: var(--brand-light); } .btn-danger { background: var(--out-bg); color: var(--out); border-color: rgba(255,92,92,0.2); } .btn-danger:hover { background: rgba(255,92,92,0.18); border-color: rgba(255,92,92,0.4); color: var(--out); } /* -------------------------------------------------- Banners */ .banner { padding: 12px 16px; border-radius: var(--radius-sm); margin: 10px 0; font-size: 14px; font-family: 'Inter', sans-serif; border: 1px solid var(--border); } .banner.info { background: var(--surface-2); color: var(--text-dim); } .banner.success { background: var(--ok-bg); color: var(--ok); border-color: rgba(0,214,138,0.2); } .banner.error { background: var(--out-bg); color: var(--out); border-color: rgba(255,92,92,0.2); } /* -------------------------------------------------- Fields (admin + forms) */ .field { margin: 14px 0; display: flex; flex-direction: column; gap: 6px; } .field label { font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 700; color: var(--text-mute); text-transform: uppercase; letter-spacing: 0.1em; } /* Shared input/select/textarea surface */ .field select, .field input, .field textarea, .admin-form input, .admin-form select, .admin-form textarea { background: var(--surface-2); border: 1px solid var(--border); color: var(--text); padding: 12px 16px; font-size: 14px; border-radius: var(--radius-sm); font-family: 'Inter', sans-serif; transition: border-color var(--tr), background var(--tr); -webkit-appearance: none; appearance: none; width: 100%; outline: none; } .field select:focus, .field input:focus, .field textarea:focus, .admin-form input:focus, .admin-form select:focus { border-color: rgba(0,168,107,0.45); background: var(--brand-glow); } .field input::placeholder, .admin-form input::placeholder { color: var(--text-faint); } /* Emoji placeholders ignore the faint placeholder color (emoji render as full-color glyphs), so dim the section-icon hint with opacity instead. */ .section-icon-input::placeholder { opacity: 0.35; } /* Add panels: center the pill contents (placeholder + typed value) */ .admin-form input, .admin-form select, .admin-form textarea { text-align: center; } .admin-form select { text-align-last: center; } /* Items add form: a select with no value yet shows its default label as a translucent placeholder, matching the text inputs. Real options stay readable once the dropdown is open / a value is chosen. */ .admin-form-items select.select-placeholder { color: var(--text-faint); } .admin-form-items select.select-placeholder option { color: var(--text); } /* -------------------------------------------------- Submit bar */ .submit-bar { position: fixed; left: 0; right: 0; bottom: 0; background: linear-gradient(to top, rgba(8,8,8,0.98) 50%, transparent); padding: 20px 20px 28px; z-index: 50; } /* -------------------------------------------------- Offline indicator */ .offline-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--out); display: inline-block; margin-right: 6px; box-shadow: 0 0 8px rgba(255,92,92,0.6); animation: pulse 1.5s infinite; } @keyframes pulse { 0%,100%{ opacity:1; } 50%{ opacity:0.35; } } /* -------------------------------------------------- Supplier order blocks */ .order-block { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; margin: 12px 0; transition: border-color var(--tr); } .order-block:hover { border-color: var(--border-hover); } .order-block h3 { margin: 0 0 10px; font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 600; display: flex; align-items: center; gap: 8px; } .order-block pre { background: rgba(0,0,0,0.3); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px 16px; font-size: 13px; white-space: pre-wrap; word-break: break-word; font-family: 'Inter', sans-serif; margin: 10px 0 14px; color: var(--text-dim); line-height: 1.7; } /* -------------------------------------------------- Admin */ .admin-section { margin: 20px 0; } .admin-section h2 { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 26px; font-weight: 400; margin: 0 0 6px; } .admin-section > p { font-size: 13px; color: var(--text-mute); margin-bottom: 16px; } .admin-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--border); } .admin-form { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; margin: 14px 0; } @media (max-width: 600px) { .admin-form { grid-template-columns: 1fr; } } /* -------------------------------------------------- Check page: employee selection */ .page-title { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 28px; font-weight: 400; margin: 28px 0 20px; color: var(--text); } .employee-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 28px; } .employee-btn { width: 100%; background: var(--surface-2); border: 1px solid var(--border); color: var(--text); font-family: 'Inter', sans-serif; font-size: 18px; font-weight: 500; min-height: 72px; border-radius: var(--radius); display: flex; align-items: center; justify-content: center; padding: 16px 20px; transition: background var(--tr), border-color var(--tr), transform 0.1s ease; } .employee-btn:active { background: var(--brand-glow); border-color: var(--border-hover); color: var(--brand-light); transform: scale(0.99); } /* -------------------------------------------------- Check page: header */ .check-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin: 24px 0 20px; } .check-title { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 26px; font-weight: 400; display: flex; align-items: center; gap: 8px; } .check-subtitle { font-family: 'Inter', sans-serif; font-size: 13px; color: var(--text-mute); margin-top: 4px; } .btn-back { flex-shrink: 0; background: var(--surface-2); border: 1px solid var(--border); color: var(--text-mute); font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 500; padding: 8px 14px; border-radius: var(--radius-pill); transition: var(--tr); white-space: nowrap; } .btn-back:hover { border-color: rgba(0,168,107,0.3); color: var(--text); } /* -------------------------------------------------- Check page: section tile grid */ .section-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 32px; } .section-tile { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px 16px 24px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 6px; min-height: 148px; font-family: inherit; transition: background var(--tr), border-color var(--tr), transform 0.1s ease; position: relative; overflow: hidden; } .section-tile:not(:disabled):active { transform: scale(0.97); border-color: var(--border-hover); background: var(--brand-glow); } .section-tile:not(:disabled):hover { border-color: rgba(0,168,107,0.22); background: var(--brand-glow); } .section-tile:disabled, .section-tile.done { opacity: 0.35; cursor: not-allowed; } .section-tile-icon { font-size: 40px; line-height: 1; margin-bottom: 4px; } .section-tile-name { font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text); text-align: center; } .section-tile-meta { font-size: 12px; color: var(--text-mute); font-family: 'Inter', sans-serif; } /* Supplier tiles — no icon, so the name itself carries the visual weight */ .supplier-tile { justify-content: center; gap: 4px; } .supplier-tile-name { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 26px; font-weight: 500; color: var(--text); text-align: center; line-height: 1.15; letter-spacing: 0.01em; } .supplier-tile-business { font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 400; color: var(--text-dim); text-align: center; letter-spacing: 0.03em; margin-bottom: 2px; } .section-tile-done-badge { font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 600; color: var(--ok); background: var(--ok-bg); border: 1px solid rgba(0,214,138,0.2); padding: 3px 10px; border-radius: var(--radius-pill); margin-top: 4px; } /* -------------------------------------------------- Check page: count rows */ .count-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--border); min-height: 72px; } .count-row-label { flex: 1; min-width: 0; } .count-row .name { font-family: 'Inter', sans-serif; font-size: 17px; font-weight: 500; } .count-row .supplier-tag { font-size: 12px; color: var(--text-mute); margin-top: 2px; font-family: 'Inter', sans-serif; } .count-input { background: var(--surface-2); border: 1px solid var(--border); color: var(--text); font-family: 'Inter', sans-serif; font-size: 24px; font-weight: 700; text-align: center; width: 88px; min-height: 60px; border-radius: var(--radius-sm); padding: 8px 4px; flex-shrink: 0; outline: none; transition: border-color var(--tr), background var(--tr); -moz-appearance: textfield; } .count-input::-webkit-outer-spin-button, .count-input::-webkit-inner-spin-button { -webkit-appearance: none; } .count-input:focus { border-color: rgba(0,168,107,0.5); background: var(--brand-glow); } .count-input.filled { border-color: rgba(0,168,107,0.5); color: var(--brand-light); background: var(--brand-glow); } /* -------------------------------------------------- Dashboard: card toggle header */ .card-toggle-header { display: flex; align-items: center; justify-content: space-between; cursor: pointer; user-select: none; padding: 2px 0; -webkit-tap-highlight-color: transparent; } .card-toggle-header:active { opacity: 0.7; } .card-toggle-chevron { color: var(--text-mute); font-size: 12px; transition: transform 0.2s ease; display: inline-block; font-family: 'Inter', sans-serif; } .card-toggle-chevron.open { transform: rotate(180deg); } /* -------------------------------------------------- Admin: min-qty inline input */ .min-qty-input { width: 52px; min-height: 40px; padding: 0 6px; font-size: 13px; font-weight: 600; text-align: center; background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; color: var(--text); font-family: 'Inter', sans-serif; outline: none; transition: border-color var(--tr); -moz-appearance: textfield; box-sizing: border-box; } .min-qty-input::-webkit-outer-spin-button, .min-qty-input::-webkit-inner-spin-button, .par-input::-webkit-outer-spin-button, .par-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .par-input { -moz-appearance: textfield; } .min-qty-input:focus { border-color: rgba(0,168,107,0.45); background: var(--brand-glow); } /* -------------------------------------------------- Admin: supplier order-day chips */ .day-chips { display: flex; flex-wrap: wrap; gap: 6px; } .day-chip { min-width: 44px; min-height: 40px; padding: 0 8px; font-size: 13px; font-weight: 600; font-family: 'Inter', sans-serif; background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; color: var(--text-dim); cursor: pointer; transition: border-color var(--tr), background var(--tr), color var(--tr); } .day-chip.active { background: var(--brand-glow2); border-color: rgba(0,168,107,0.4); color: var(--brand-light); } /* -------------------------------------------------- Admin row: inline supplier select */ .admin-row-actions select { appearance: none; -webkit-appearance: none; background-color: var(--surface-2); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%235C6773'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 500; min-height: 40px; padding: 0 28px 0 12px; outline: none; cursor: pointer; transition: border-color var(--tr), background-color var(--tr); box-sizing: border-box; } .admin-row-actions select:hover { border-color: rgba(0,168,107,0.3); background-color: var(--brand-glow); } .admin-row-actions select:focus { border-color: rgba(0,168,107,0.45); background-color: var(--brand-glow); } .admin-row-actions select option { background: var(--surface-2); color: var(--text); } /* -------------------------------------------------- Section header (sticky on item form) */ .section-header { position: sticky; top: 64px; z-index: 5; background: rgba(8,8,8,0.9); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); padding: 12px 20px; margin: 20px -20px 0; font-family: 'Inter', sans-serif; font-weight: 700; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-mute); display: flex; align-items: center; gap: 10px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .section-header .icon { font-size: 20px; } /* -------------------------------------------------- Item row (legacy — kept for compat) */ .item-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--border); min-height: 72px; } .item-row .name { font-size: 17px; font-weight: 500; flex: 1; min-width: 0; } .item-row .supplier-tag { font-size: 12px; color: var(--text-mute); margin-top: 2px; } /* -------------------------------------------------- Helpers */ .spacer { height: 16px; } .hidden { display: none !important; } .center { text-align: center; } .text-dim { color: var(--text-dim); } .text-mute { color: var(--text-mute); } .text-out { color: var(--out); } [x-cloak] { display: none !important; } /* -------------------------------------------------- File attachments (notes #6/#7) */ .file-badge { display: inline-block; margin-left: 6px; font-size: 12px; color: var(--text-dim); vertical-align: middle; } .item-files { margin-top: 4px; } .item-files-label { font-size: 12px; font-weight: 600; color: var(--text-dim); margin-bottom: 6px; } .item-files-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; } .file-chip { position: relative; } .file-chip-link { display: block; } .file-thumb { display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 8px; border: 1px solid var(--border); object-fit: cover; background: var(--surface-2); } .file-thumb-pdf { font-size: 13px; font-weight: 700; letter-spacing: 0.5px; color: var(--brand); } .file-chip-remove { position: absolute; top: -6px; right: -6px; width: 22px; height: 22px; border-radius: 50%; border: none; background: var(--out); color: #fff; font-size: 15px; line-height: 1; cursor: pointer; } .file-upload-btn { display: inline-flex; align-items: center; cursor: pointer; } .file-upload-btn.disabled { opacity: 0.6; pointer-events: none; } .file-input-hidden { display: none; } /* -------------------------------------------------- Monthly report (note #8) */ .report-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin: 8px 0 20px; } .report-title { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 30px; font-weight: 500; line-height: 1.1; } .report-subtitle { color: var(--text-dim); font-size: 14px; margin-top: 2px; } .report-controls { display: flex; flex-direction: column; gap: 10px; align-items: flex-end; } .month-nav { display: flex; align-items: center; gap: 10px; } .month-nav .month-label { font-weight: 600; min-width: 130px; text-align: center; } .report-section { margin-bottom: 28px; } .report-section-title { font-size: 18px; font-weight: 700; border-bottom: 1px solid var(--border); padding-bottom: 8px; margin-bottom: 14px; } .report-stock-grid { display: flex; gap: 14px; margin-bottom: 14px; } .report-stat { flex: 1; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; text-align: center; } .report-stat-num { font-size: 34px; font-weight: 800; line-height: 1; } .report-stat-label { font-size: 12px; color: var(--text-mute); text-transform: uppercase; letter-spacing: 0.05em; margin-top: 4px; } .report-list-block { margin-top: 10px; } .report-list-head { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 4px; } .report-list-row { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; font-size: 14px; border-bottom: 1px solid var(--border); } .report-supplier { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; margin-bottom: 14px; } .report-supplier-head { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 22px; font-weight: 500; margin-bottom: 8px; } .report-totals { margin-bottom: 10px; } .report-bills { display: flex; flex-wrap: wrap; gap: 8px; } .report-bill-thumb { width: 84px; height: 84px; } .report-footer { font-size: 12px; margin-top: 24px; text-align: center; } /* Print: clean white page, drop chrome, "Save as PDF" from the browser dialog. */ @media print { .no-print { display: none !important; } body { background: #fff !important; color: #000 !important; } .container.report { max-width: none; padding: 0; } .report-title, .report-supplier-head { color: #000 !important; } .report-stat, .report-supplier { background: #fff !important; border: 1px solid #ccc !important; break-inside: avoid; } .report-list-row, .report-section-title { border-color: #ccc !important; } .report-section { break-inside: avoid; } .text-mute, .text-dim, .report-subtitle, .report-stat-label { color: #555 !important; } .report-bill-thumb { width: 120px; height: 120px; } a[href] { text-decoration: none; color: #000 !important; } } /* -------------------------------------------------- Demo mode banner */ .demo-banner { position: sticky; top: 0; z-index: 200; background: var(--grad); color: #fff; padding: 7px 16px; font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; text-align: center; } .demo-banner button { background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.25); color: #fff; font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 20px; margin-left: 10px; cursor: pointer; letter-spacing: 0.06em; transition: background var(--tr); } .demo-banner button:active { background: rgba(255,255,255,0.25); } body.demo .topbar { top: 32px; } body.demo .section-header { top: 96px; } /* -------------------------------------------------- Test mode banner */ .test-banner { position: sticky; top: 0; z-index: 200; background: #c67c00; color: #fff; padding: 7px 16px; font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; text-align: center; } body.testing .topbar { top: 32px; } body.testing .section-header { top: 96px; } /* Testing-mode ON button state in admin Settings */ .btn-testing-on { background: rgba(198,124,0,0.2) !important; border-color: #c67c00 !important; color: #ffa726 !important; } /* -------------------------------------------------- Admin: item edit + remove — matched square buttons */ .btn-item-edit, .admin-row-actions .btn-danger { width: 40px; height: 40px; min-height: 40px; padding: 0; flex-shrink: 0; } .btn-item-edit { font-size: 14px; } /* × glyph is a thin character; size it up so it fills the square like the ✏️ */ .admin-row-actions .btn-danger { font-size: 22px; font-weight: 400; line-height: 1; } /* -------------------------------------------------- Admin: count mode toggle (Box/Exact) */ .btn-mode-box { background: rgba(0,168,107,0.12) !important; border-color: var(--brand) !important; color: var(--brand-light) !important; } /* -------------------------------------------------- Box count UI (employee check form) */ .count-row-box { flex-wrap: wrap; gap: 12px; } .box-counter { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .box-stepper { display: flex; align-items: center; gap: 2px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 4px 6px; } .box-stepper-btn { width: 40px; height: 40px; border: none; background: none; color: var(--text); font-size: 22px; font-weight: 300; border-radius: 8px; display: flex; align-items: center; justify-content: center; transition: background var(--tr); cursor: pointer; } .box-stepper-btn:active { background: rgba(255,255,255,0.08); } .box-whole { min-width: 32px; text-align: center; font-size: 22px; font-weight: 600; color: var(--text); user-select: none; } .box-fracs { display: flex; gap: 6px; } .box-frac-btn { width: 48px; height: 48px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text-dim); font-size: 16px; font-weight: 600; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; transition: all var(--tr); cursor: pointer; } .box-frac-btn:active { background: var(--brand-glow); } .box-frac-btn.selected { background: var(--brand-glow); border-color: var(--brand); color: var(--brand-light); } /* -------------------------------------------------- Admin: items section header */ .items-section-header { display: flex; align-items: center; justify-content: space-between; cursor: pointer; user-select: none; padding: 14px 0 10px; margin-top: 12px; border-top: 1px solid var(--border); font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text); -webkit-tap-highlight-color: transparent; transition: color var(--tr); } .items-section-header:hover { color: var(--text); } .items-section-header:active { opacity: 0.7; } .items-section-count { font-weight: 400; color: var(--text-mute); letter-spacing: 0; text-transform: none; margin-left: 6px; font-size: 12px; } /* -------------------------------------------------- Admin: inline item name edit */ .admin-edit-input { background: var(--surface-2); border: 1px solid rgba(0,168,107,0.45); color: var(--text); padding: 8px 12px; font-size: 15px; font-weight: 500; border-radius: var(--radius-sm); font-family: 'Inter', sans-serif; outline: none; width: 100%; background: var(--brand-glow); } /* Brief confirmation flash after a staff member completes a prep task. */ .task-done-flash { border-color: rgba(0,214,138,0.6) !important; transition: border-color 0.3s ease; } .btn-save { color: var(--ok); border-color: rgba(0,214,138,0.3); } .btn-save:hover { background: var(--ok-bg); border-color: rgba(0,214,138,0.5); color: var(--ok); } /* -------------------------------------------------- Admin: supplier edit panel */ .supplier-edit { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 10px; width: 100%; } /* Icon+name and business+phone each share one horizontal line */ .supplier-edit-row { display: flex; gap: 8px; } .supplier-edit-row .admin-edit-input { flex: 1 1 0; min-width: 0; } /* "Order day(s)" label and the live status message share one line */ .supplier-schedule-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; margin-top: 2px; } /* Count control + Save/Cancel sit on one horizontal line */ .supplier-count-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 4px; } .supplier-count-label { display: flex; align-items: center; gap: 6px; /* matches the day-chip gap */ font-size: 13px; color: var(--text-dim); white-space: nowrap; } /* "Count" occupies a chip-wide column so the box lands under Monday */ .supplier-count-word { display: inline-block; width: 44px; text-align: center; } /* Number box matches a day chip's size (44x40), text centred */ .supplier-count-input { width: 44px; min-width: 44px; min-height: 40px; padding: 0; text-align: center; } .supplier-edit-actions { display: flex; justify-content: flex-end; gap: 8px; margin-left: auto; } @media (max-width: 600px) { /* Stack icon+name and business+phone when space is tight */ .supplier-edit-row { flex-wrap: wrap; } } /* -------------------------------------------------- Admin tabs */ .admin-tabs { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin: 16px 0; } /* -------------------------------------------------- Admin activity log */ .audit-list { display: flex; flex-direction: column; } .audit-entry { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--border); } .audit-entry:first-child { border-top: none; } .audit-entry-text { font-size: 14px; } .audit-entry-when { font-size: 12px; flex-shrink: 0; white-space: nowrap; } .admin-tabs .btn-secondary { justify-content: center; text-align: center; width: 100%; } /* -------------------------------------------------- Dashboard top tab bar */ /* Stock / Deliveries sit on the left; Admin is pushed to the far right. */ .dash-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 20px; } .dash-tabs .dash-tab-admin { margin-left: auto; } /* -------------------------------------------------- Dashboard PIN keypad */ /* Used by both the lock screen (.pin-gate) and the Settings keypad (.pin-overlay). */ .pin-gate { display: flex; align-items: center; justify-content: center; min-height: 70vh; padding: 24px; } /* Full-screen overlay for set / change / remove from Settings. */ .pin-overlay { position: fixed; inset: 0; z-index: 200; background: var(--bg); display: flex; align-items: center; justify-content: center; padding: 24px; } .pin-overlay-close { position: absolute; top: max(16px, env(safe-area-inset-top)); right: 18px; background: none; border: none; color: var(--text-dim); font-size: 22px; line-height: 1; padding: 8px; cursor: pointer; } .pin-overlay-close:hover { color: var(--text); } .pin-screen { display: flex; flex-direction: column; align-items: center; gap: 26px; } .pin-title { font-size: 19px; font-weight: 500; color: var(--text); } /* Progress dots */ .pin-dots { display: flex; gap: 18px; } .pin-dot { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--text-mute); transition: background var(--tr), border-color var(--tr), transform var(--tr); } .pin-dot.filled { background: var(--brand); border-color: var(--brand); transform: scale(1.05); } .pin-dots.shake { animation: pin-shake 0.4s ease; } @keyframes pin-shake { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } } .pin-error-text { color: var(--out); font-size: 13px; margin-top: -10px; min-height: 16px; } /* Keypad */ .pin-keypad { display: grid; grid-template-columns: repeat(3, 76px); gap: 18px; justify-content: center; } .pin-key { width: 76px; height: 76px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); font-family: 'Inter', sans-serif; font-size: 28px; font-weight: 400; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background var(--tr), border-color var(--tr), transform 0.08s ease; -webkit-tap-highlight-color: transparent; } .pin-key:active { background: var(--brand-glow2); border-color: var(--border-hover); transform: scale(0.94); } .pin-key-back { background: none; border-color: transparent; font-size: 15px; font-weight: 400; color: var(--text-dim); } .pin-key-back:active { background: none; transform: scale(0.94); } /* -------------------------------------------------- Admin items form */ .admin-form-items { grid-template-columns: 1fr 1fr 1fr 1fr 1fr 72px auto; } /* -------------------------------------------------- Admin suppliers form */ .admin-form-suppliers { grid-template-columns: 56px 2fr 1.2fr 1fr auto; } /* -------------------------------------------------- Admin row actions */ .admin-row-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; } /* -------------------------------------------------- Dashboard: history items grid */ .history-items-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 4px 16px; clip-path: inset(0 0 1px 0); } /* -------------------------------------------------- Mobile (≤600px) */ @media (max-width: 600px) { /* iOS Safari auto-zooms when a focused field's font is < 16px, which jolts the whole page around. Force every focusable field to 16px on mobile to suppress it (pinch-zoom stays available). Desktop sizes, defined above, are untouched. */ input, select, textarea, .field input, .field select, .field textarea, .admin-form input, .admin-form select, .admin-form textarea, .admin-edit-input, .min-qty-input, .supplier-count-input { font-size: 16px; } /* Topbar: hide page subtitle, show just "Scope" */ .topbar-page-name { display: none; } /* Topbar nav: tighter pills so all 3 fit */ .topbar nav { gap: 2px; } .topbar nav a { padding: 6px 10px; font-size: 12px; } /* Admin tabs: 3-col on mobile so 5 tabs fit in 2 rows */ .admin-tabs { grid-template-columns: 1fr 1fr 1fr; } /* Admin items form: stack to single column */ .admin-form-items { grid-template-columns: 1fr; } /* Admin suppliers form: stack to single column (like the other add forms) */ .admin-form-suppliers { grid-template-columns: 1fr; } /* Admin row: stack label + actions vertically */ .admin-row { grid-template-columns: 1fr; gap: 8px; } /* Employee rows: always keep content left, buttons right */ .admin-row-inline { grid-template-columns: 1fr auto; align-items: start; } .admin-row-actions { justify-content: flex-start; } /* Remove buttons don't stretch full width */ .admin-row .btn-secondary, .admin-row .btn-danger { width: auto; justify-self: start; } /* Keep edit + remove squares locked at 40px on mobile */ .admin-row-actions .btn-item-edit, .admin-row-actions .btn-danger { width: 40px; flex-shrink: 0; } /* Container: less side padding on small screens */ .container { padding: 16px 16px 100px; } /* Section tiles: always 2 columns on mobile (override the 1-col at 420px) */ .section-grid { grid-template-columns: repeat(2, 1fr); } /* Box counter: stack stepper above fracs, compact sizing */ .count-row-box { flex-direction: column; align-items: stretch; } .box-counter { flex-direction: column; width: 100%; gap: 6px; } .box-stepper { width: 100%; box-sizing: border-box; justify-content: space-between; padding: 2px 4px; } .box-stepper-btn { width: 44px; height: 44px; } .box-whole { flex: 1; font-size: 20px; } .box-fracs { width: 100%; gap: 6px; } .box-frac-btn { flex: 1; width: auto; height: 44px; font-size: 15px; } }