/* SPY Vodka & Liquor POS — multi-branch till, inventory and reporting UI. Layout targets, smallest first: ≤ 430px phone, one hand, bottom tab bar ≤ 700px large phone / small tablet portrait ≤ 1000px tablet — drawer navigation, single-column till > 1000px desktop / till PC — permanent sidebar, two-column till */ :root { /* ---- Dark is the shop's default look, and the fallback if JS never runs. Theme.apply() stamps data-theme="light" / "dark" on before paint. */ color-scheme: dark; --bg: #0b0e0c; --bg-2: #10140f; --surface: #151a14; --surface-2: #1b211a; --surface-3: #232b21; --border: #262e24; --text: #eef2ea; --text-2: #a8b3a2; --text-3: #7d8b79; --green: #2fbf71; --green-dark: #1e8a52; --gold: #e8b53a; --red: #e5533d; --blue: #4d9de0; --purple: #9d6be8; /* The gold button keeps its bright face in both themes — it is a surface, not a text colour, so it must not darken when --gold does. */ --gold-btn-a: #e8b53a; --gold-btn-b: #c4922a; --gold-ink: #1a1405; /* Tints behind badges, chips and active states */ --tint-green: rgba(47,191,113,.15); --tint-green-soft: rgba(47,191,113,.06); --tint-gold: rgba(232,181,58,.15); --tint-red: rgba(229,83,61,.15); --tint-blue: rgba(77,157,224,.15); --tint-purple: rgba(157,107,232,.15); --tint-gray: rgba(160,170,155,.12); --line-green: rgba(47,191,113,.35); --line-gold: rgba(232,181,58,.4); --line-red: rgba(229,83,61,.35); /* Chrome: bars, scrims, hovers */ --topbar-bg: rgba(11,14,12,.88); --tabbar-bg: rgba(16,20,15,.96); --scrim: rgba(0,0,0,.6); --scroll-thumb: #2c352a; --row-hover: rgba(255,255,255,.02); --glow-1: rgba(47,191,113,.16); --glow-2: rgba(232,181,58,.10); --radius: 12px; --shadow: 0 8px 28px rgba(0,0,0,.4); --font: 'Segoe UI', system-ui, -apple-system, sans-serif; /* Layout constants the media queries below re-tune */ --sidebar-w: 240px; --topbar-h: 56px; --tabbar-h: 0px; --gap: 16px; --pad: 20px; /* Notch / home-indicator padding on phones */ --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px); --safe-l: env(safe-area-inset-left, 0px); --safe-r: env(safe-area-inset-right, 0px); /* Comfortable finger target; grows on touch screens */ --tap: 34px; } /* ---- Daylight palette: same brand, darkened greens and golds so they still carry their meaning as text on white. Only colour tokens are redefined. */ :root[data-theme="light"] { color-scheme: light; --bg: #f3f6f1; --bg-2: #ffffff; --surface: #ffffff; --surface-2: #eef2ea; --surface-3: #e3e9de; --border: #d4dccf; --text: #16201a; --text-2: #4a5750; --text-3: #5d6b60; --green: #157f45; --green-dark: #0f6437; --gold: #7d5e0c; --red: #b3392a; --blue: #24659f; --purple: #6640ab; --tint-green: rgba(23,134,74,.13); --tint-green-soft: rgba(23,134,74,.05); --tint-gold: rgba(180,130,20,.16); --tint-red: rgba(179,57,42,.12); --tint-blue: rgba(36,101,159,.12); --tint-purple: rgba(102,64,171,.12); --tint-gray: rgba(90,105,95,.11); --line-green: rgba(23,134,74,.40); --line-gold: rgba(180,130,20,.45); --line-red: rgba(179,57,42,.35); --topbar-bg: rgba(248,250,246,.9); --tabbar-bg: rgba(255,255,255,.97); --scrim: rgba(24,32,26,.45); --scroll-thumb: #c3ccbd; --row-hover: rgba(23,134,74,.05); --glow-1: rgba(47,191,113,.14); --glow-2: rgba(232,181,58,.18); --shadow: 0 8px 28px rgba(30,45,35,.14); } * { margin: 0; padding: 0; box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { font-family: var(--font); background: var(--bg); color: var(--text); font-size: 15px; line-height: 1.5; overflow-x: hidden; /* nothing may push the page sideways */ -webkit-tap-highlight-color: rgba(47,191,113,.18); } body.modal-open { overflow: hidden; } button, input, select, textarea { font-family: inherit; } img, svg, video, canvas { max-width: 100%; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border-radius: 6px; } ::-webkit-scrollbar-track { background: transparent; } :focus-visible { outline: 2px solid var(--green); outline-offset: 2px; } /* Theme.apply() adds this for one frame while it swaps the palette. */ .theme-switching, .theme-switching *, .theme-switching *::before, .theme-switching *::after { transition: none !important; } /* Finger-driven screens get bigger hit areas than mouse-driven ones. */ @media (pointer: coarse) { :root { --tap: 44px; } } /* ---------- Layout ---------- */ #app { display: flex; min-height: 100vh; min-height: 100dvh; } .sidebar { width: var(--sidebar-w); flex-shrink: 0; background: var(--bg-2); border-right: 1px solid var(--border); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; height: 100dvh; overflow-y: auto; z-index: 40; padding-left: var(--safe-l); } .sidebar-logo { display: flex; gap: 10px; align-items: center; padding: 18px 16px; border-bottom: 1px solid var(--border); } .logo-badge { width: 40px; height: 40px; flex-shrink: 0; border-radius: 10px; background: linear-gradient(135deg, var(--green), var(--green-dark)); display: flex; align-items: center; justify-content: center; font-size: 22px; } .logo-name { font-weight: 700; font-size: .95rem; letter-spacing: .2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .logo-sub { font-size: .7rem; color: var(--text-3); text-transform: uppercase; letter-spacing: 1px; } .nav { flex: 1; padding: 10px 10px 20px; } .nav-label { font-size: .66rem; text-transform: uppercase; letter-spacing: 1.4px; color: var(--text-3); padding: 14px 10px 6px; } .nav-item { display: flex; align-items: center; gap: 10px; width: 100%; min-height: var(--tap); padding: 9px 12px; margin: 1px 0; background: none; border: none; border-radius: 9px; color: var(--text-2); font-size: .875rem; cursor: pointer; text-align: left; transition: background .15s, color .15s; } .nav-item:hover { background: var(--surface); color: var(--text); } .nav-item.active { background: linear-gradient(90deg, var(--tint-green), var(--tint-green-soft)); color: var(--green); font-weight: 600; } .nav-icon { font-size: 1.05rem; width: 22px; flex-shrink: 0; text-align: center; } .nav-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sidebar-user { border-top: 1px solid var(--border); padding: 12px 14px calc(12px + var(--safe-b)); display: flex; gap: 10px; align-items: center; } .avatar { width: 36px; height: 36px; flex-shrink: 0; border-radius: 50%; background: var(--surface-2); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .8rem; color: var(--gold); } .user-name { font-size: .82rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .user-role { font-size: .68rem; color: var(--text-3); text-transform: capitalize; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .main { flex: 1; min-width: 0; display: flex; flex-direction: column; } .topbar { display: flex; align-items: center; gap: 12px; padding: 10px var(--pad); padding-top: calc(10px + var(--safe-t)); min-height: var(--topbar-h); background: var(--topbar-bg); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 30; backdrop-filter: blur(8px); } .topbar-title { font-size: clamp(.95rem, .8rem + .6vw, 1.05rem); font-weight: 700; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hamburger { display: none; background: none; border: 1px solid var(--border); color: var(--text); border-radius: 9px; width: var(--tap); height: var(--tap); flex-shrink: 0; font-size: 1.1rem; cursor: pointer; line-height: 1; } .content { padding: var(--pad); max-width: 1400px; width: 100%; margin: 0 auto; flex: 1; padding-left: max(var(--pad), var(--safe-l)); padding-right: max(var(--pad), var(--safe-r)); padding-bottom: calc(var(--pad) + var(--tabbar-h) + var(--safe-b)); } .sidebar-overlay { display: none; position: fixed; inset: 0; background: var(--scrim); z-index: 35; } .sidebar-overlay.active { display: block; } /* ---------- Branch switcher ---------- */ .branch-switch { flex-shrink: 0; display: flex; align-items: center; max-width: 46vw; } .branch-select { display: flex; align-items: center; gap: 6px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 0 10px 0 12px; min-height: var(--tap); max-width: 100%; cursor: pointer; } .branch-select:hover { border-color: var(--green); } .branch-select-icon { font-size: .95rem; line-height: 1; } .branch-select select { background: none; border: none; color: var(--text); font: inherit; font-size: .82rem; font-weight: 600; padding: 6px 2px; cursor: pointer; outline: none; max-width: 100%; text-overflow: ellipsis; } .branch-select select option { background: var(--bg-2); color: var(--text); } .branch-chip { display: inline-flex; align-items: center; gap: 7px; background: var(--tint-green); border: 1px solid var(--line-green); color: var(--green); border-radius: 999px; padding: 6px 13px; font-size: .8rem; font-weight: 700; min-height: var(--tap); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .branch-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); flex-shrink: 0; } /* Banner shown when a page needs one branch but the view spans them all */ .branch-required { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; background: var(--tint-gold); border: 1px solid var(--line-gold); border-radius: var(--radius); padding: 16px 18px; margin-bottom: var(--gap); } .branch-required .icon { font-size: 1.6rem; } .branch-required b { color: var(--gold); } .branch-scope-note { font-size: .74rem; color: var(--text-3); } /* ---------- Theme toggle ---------- */ .theme-btn { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: var(--tap); height: var(--tap); border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); color: var(--text); font-size: 1rem; line-height: 1; cursor: pointer; transition: border-color .15s, background .15s; } .theme-btn:hover { border-color: var(--green); } /* Three-way Light / Dark / Auto control on the Settings page */ .theme-picker { display: flex; gap: 6px; background: var(--bg-2); border: 1px solid var(--border); border-radius: 12px; padding: 5px; } .theme-opt { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 6px; min-height: var(--tap); border: 0; border-radius: 9px; background: transparent; color: var(--text-2); font: inherit; font-size: .78rem; font-weight: 600; cursor: pointer; } .theme-opt .ic { font-size: 1.15rem; line-height: 1; } .theme-opt:hover { color: var(--text); } .theme-opt.on { background: var(--tint-green); color: var(--green); box-shadow: inset 0 0 0 1px var(--line-green); } /* ---------- Bottom tab bar (phones) ---------- */ .tabbar { display: none; } /* ---------- Cards / stats ---------- */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; margin-bottom: var(--gap); } .card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; } .card-title { font-size: .95rem; font-weight: 700; } .card-sub { font-size: .76rem; color: var(--text-3); } .grid { display: grid; gap: var(--gap); } .grid-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); } .grid-3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-bottom: var(--gap); } .stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; position: relative; overflow: hidden; } .stat::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent, var(--green)); } .stat-label { font-size: .7rem; text-transform: uppercase; letter-spacing: 1px; color: var(--text-3); } .stat-value { font-size: clamp(1.15rem, 1rem + 1vw, 1.45rem); font-weight: 800; margin: 4px 0 2px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; } .stat-sub { font-size: .74rem; color: var(--text-2); } .pos-neg { font-variant-numeric: tabular-nums; } .pos { color: var(--green); } .neg { color: var(--red); } .page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; } .page-title { font-size: clamp(1.15rem, 1rem + 1vw, 1.35rem); font-weight: 800; } .page-sub { color: var(--text-3); font-size: .82rem; } .head-actions { display: flex; gap: 8px; flex-wrap: wrap; } /* Branch comparison cards */ .branch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--gap); } .branch-card { margin: 0; display: flex; flex-direction: column; gap: 12px; } .branch-card.closed { opacity: .62; } .branch-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; } .branch-name { font-size: 1rem; font-weight: 700; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .branch-meta { line-height: 1.6; } .branch-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; border-top: 1px solid var(--border); padding-top: 12px; margin-top: auto; } .branch-stats > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .branch-stats b { font-size: .85rem; overflow-wrap: anywhere; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 9px 16px; min-height: var(--tap); border-radius: 9px; border: 1px solid transparent; font-size: .85rem; font-weight: 600; cursor: pointer; transition: filter .15s, background .15s; text-decoration: none; white-space: nowrap; } .btn:disabled { opacity: .5; cursor: not-allowed; } .btn-primary { background: linear-gradient(135deg, var(--green), var(--green-dark)); color: #fff; } .btn-primary:hover:not(:disabled) { filter: brightness(1.12); } .btn-gold { background: linear-gradient(135deg, var(--gold-btn-a), var(--gold-btn-b)); color: var(--gold-ink); } .btn-secondary { background: var(--surface-2); color: var(--text); border-color: var(--border); } .btn-secondary:hover:not(:disabled) { background: var(--surface-3); } .btn-danger { background: var(--tint-red); color: var(--red); border-color: var(--line-red); } .btn-ghost { background: none; color: var(--text-2); } .btn-ghost:hover { color: var(--text); background: var(--surface-2); } .btn-sm { padding: 5px 10px; font-size: .76rem; border-radius: 7px; min-height: var(--tap); } .btn-lg { padding: 13px 22px; font-size: 1rem; border-radius: 11px; min-height: 48px; } .btn-block { width: 100%; } /* Icon-only row actions stay square so they do not stretch on touch screens */ .btn-ghost.btn-sm { min-width: var(--tap); padding-left: 8px; padding-right: 8px; } /* ---------- Forms ---------- */ .form-group { margin-bottom: 13px; } .form-label { display: block; font-size: .76rem; font-weight: 600; color: var(--text-2); margin-bottom: 5px; } .req { color: var(--red); } .form-control, select.form-control, textarea.form-control { width: 100%; padding: 9px 12px; min-height: var(--tap); background: var(--bg-2); border: 1px solid var(--border); border-radius: 9px; color: var(--text); font-size: 16px; /* 16px stops iOS zooming on focus */ font-family: inherit; outline: none; transition: border-color .15s; } @media (min-width: 701px) { .form-control, select.form-control, textarea.form-control { font-size: .875rem; } } .form-control:focus { border-color: var(--green); } .form-control::placeholder { color: var(--text-3); } select.form-control option { background: var(--bg-2); } .form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; } .form-row-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; } .form-hint { font-size: .7rem; color: var(--text-3); margin-top: 4px; } .field-error { font-size: .72rem; color: var(--red); margin-top: 4px; } .checkbox-row { display: flex; align-items: center; gap: 8px; font-size: .84rem; color: var(--text-2); cursor: pointer; min-height: var(--tap); } .checkbox-row input { accent-color: var(--green); width: 18px; height: 18px; flex-shrink: 0; } .inline-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .inline-form .form-control { flex: 1 1 180px; } .filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 14px; } .filters .form-group { margin: 0; min-width: 140px; flex: 1 1 140px; } .filters .btn { flex: 0 0 auto; } /* ---------- Tables ---------- */ .table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 10px; -webkit-overflow-scrolling: touch; } table { width: 100%; border-collapse: collapse; font-size: .84rem; } thead th { text-align: left; padding: 10px 12px; background: var(--bg-2); color: var(--text-3); font-size: .68rem; text-transform: uppercase; letter-spacing: .8px; border-bottom: 1px solid var(--border); white-space: nowrap; } tbody td { padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; } tbody tr:last-child td { border-bottom: none; } tbody tr:hover { background: var(--row-hover); } tr.clickable { cursor: pointer; } .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } .mono { font-family: Consolas, monospace; font-size: .8rem; } .muted { color: var(--text-3); } .small { font-size: .76rem; } .nowrap { white-space: nowrap; } .badge { display: inline-block; padding: 2px 9px; border-radius: 20px; font-size: .68rem; font-weight: 700; text-transform: capitalize; white-space: nowrap; } .badge-green { background: var(--tint-green); color: var(--green); } .badge-gold { background: var(--tint-gold); color: var(--gold); } .badge-red { background: var(--tint-red); color: var(--red); } .badge-blue { background: var(--tint-blue); color: var(--blue); } .badge-purple { background: var(--tint-purple); color: var(--purple); } .badge-gray { background: var(--tint-gray); color: var(--text-2); } .badge-branch { background: var(--tint-blue); color: var(--blue); text-transform: none; } .pager { display: flex; align-items: center; gap: 6px; margin-top: 12px; flex-wrap: wrap; } .pager button { min-width: var(--tap); min-height: var(--tap); padding: 6px 9px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 7px; color: var(--text-2); cursor: pointer; font-size: .78rem; } .pager button.on { background: var(--green); border-color: var(--green); color: #fff; font-weight: 700; } .pager button:disabled { opacity: .4; cursor: default; } .pager-info { font-size: .74rem; color: var(--text-3); margin-left: 6px; } .empty { text-align: center; padding: 40px 16px; color: var(--text-3); } .empty .icon { font-size: 2.2rem; margin-bottom: 8px; } .spinner { width: 26px; height: 26px; border: 3px solid var(--border); border-top-color: var(--green); border-radius: 50%; animation: spin .8s linear infinite; margin: 30px auto; } @keyframes spin { to { transform: rotate(360deg); } } /* ---------- Tabs ---------- */ .tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: var(--gap); overflow-x: auto; scrollbar-width: none; } .tabs::-webkit-scrollbar { display: none; } .tab { padding: 10px 16px; min-height: var(--tap); background: none; border: none; border-bottom: 2px solid transparent; color: var(--text-2); font-size: .85rem; font-weight: 600; cursor: pointer; white-space: nowrap; } .tab.active { color: var(--green); border-bottom-color: var(--green); } /* ---------- Modal ---------- */ .modal-backdrop { position: fixed; inset: 0; background: var(--scrim); z-index: 90; display: none; align-items: flex-start; justify-content: center; padding: 4vh 14px; overflow-y: auto; } .modal-backdrop.open { display: flex; } .modal { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; width: 100%; max-width: 560px; box-shadow: var(--shadow); animation: pop .18s ease; } .modal.wide { max-width: 860px; } @keyframes pop { from { transform: translateY(14px); opacity: 0; } } .modal-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 15px 18px; border-bottom: 1px solid var(--border); } .modal-title { font-weight: 700; font-size: .98rem; min-width: 0; overflow-wrap: anywhere; } .modal-x { background: none; border: none; color: var(--text-3); font-size: 1.5rem; cursor: pointer; line-height: 1; width: var(--tap); height: var(--tap); flex-shrink: 0; } .modal-body { padding: 18px; max-height: 72vh; overflow-y: auto; -webkit-overflow-scrolling: touch; } .modal-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 13px 18px; border-top: 1px solid var(--border); flex-wrap: wrap; } /* ---------- Toast ---------- */ #toasts { position: fixed; top: calc(16px + var(--safe-t)); right: 16px; z-index: 200; display: flex; flex-direction: column; gap: 8px; max-width: min(360px, calc(100vw - 32px)); } .toast { display: flex; gap: 10px; align-items: flex-start; background: var(--surface-2); border: 1px solid var(--border); border-left: 3px solid var(--green); border-radius: 10px; padding: 11px 14px; box-shadow: var(--shadow); animation: slide .25s ease; } .toast.error { border-left-color: var(--red); } .toast.info { border-left-color: var(--blue); } @keyframes slide { from { transform: translateX(30px); opacity: 0; } } .toast-title { font-weight: 700; font-size: .82rem; } .toast-msg { font-size: .76rem; color: var(--text-2); word-break: break-word; } /* ---------- Login ---------- */ .login-wrap { min-height: 100vh; min-height: 100dvh; width: 100%; display: flex; align-items: center; justify-content: center; padding: max(20px, var(--safe-t)) max(20px, var(--safe-r)) max(20px, var(--safe-b)) max(20px, var(--safe-l)); background: radial-gradient(1100px 600px at 15% -10%, var(--glow-1), transparent), radial-gradient(900px 500px at 115% 115%, var(--glow-2), transparent), var(--bg); } .login-card { width: 100%; max-width: 400px; background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: clamp(24px, 6vw, 38px) clamp(20px, 5vw, 34px); box-shadow: var(--shadow); } .login-head { text-align: center; margin-bottom: 24px; } .login-badge { display: inline-flex; width: 56px; height: 56px; border-radius: 15px; align-items: center; justify-content: center; font-size: 29px; margin-bottom: 14px; background: linear-gradient(135deg, var(--green), var(--green-dark)); box-shadow: 0 6px 20px rgba(47,191,113,.35); } .login-head h1 { font-size: clamp(1.15rem, 1rem + 1.4vw, 1.4rem); font-weight: 800; margin: 0 0 5px; letter-spacing: -.2px; overflow-wrap: anywhere; } .login-head p { color: var(--text-3); font-size: .85rem; } .login-card .form-control { padding: 11px 13px; } .login-card .btn-lg { margin-top: 4px; } .login-tabs { display: flex; gap: 6px; margin-bottom: 20px; background: var(--bg-2); padding: 5px; border-radius: 12px; border: 1px solid var(--border); } .login-tab { flex: 1; padding: 11px 6px; min-height: var(--tap); border: 0; background: transparent; color: var(--text-2); font: inherit; font-weight: 600; font-size: .84rem; border-radius: 9px; cursor: pointer; transition: background .15s, color .15s, box-shadow .15s; } .login-tab:hover { color: var(--text); } .login-tab.on { background: linear-gradient(135deg, var(--gold-btn-a), var(--gold-btn-b)); color: var(--gold-ink); box-shadow: 0 5px 14px rgba(232,181,58,.28); } .login-hint { text-align: center; margin-top: 16px; font-size: .78rem; color: var(--text-3); } /* ---------- Till / POS ---------- */ .till-branch { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; background: var(--surface-2); border: 1px solid var(--border); border-left: 3px solid var(--green); border-radius: 10px; padding: 9px 14px; margin-bottom: var(--gap); font-size: .82rem; color: var(--text-2); } .till-branch b { color: var(--text); } .pos-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(340px, 1fr); gap: var(--gap); align-items: start; } .till { position: sticky; top: calc(var(--topbar-h) + var(--safe-t) + 10px); } .scan-bar { display: flex; gap: 8px; } .scan-bar .form-control { min-width: 0; } .scan-input { font-size: 1.05rem; font-family: Consolas, 'Courier New', monospace; letter-spacing: .5px; padding: 12px 14px; } .scan-cam { margin-top: 12px; } .scan-box { position: relative; background: #000; border-radius: 12px; overflow: hidden; aspect-ratio: 4/3; display: flex; align-items: center; justify-content: center; border: 1px solid var(--border); } .scan-box video { width: 100%; height: 100%; object-fit: cover; } .scan-frame { position: absolute; inset: 22% 10%; border: 2px solid rgba(47,191,113,.85); border-radius: 12px; pointer-events: none; box-shadow: 0 0 0 3000px rgba(0,0,0,.25); } .product-hit { display: flex; gap: 12px; align-items: center; background: var(--surface-2); border: 1px solid var(--green); border-radius: 11px; padding: 12px; margin-top: 12px; flex-wrap: wrap; } .cat-search { max-width: 220px; } .cat-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; } .cat-chip { padding: 7px 12px; min-height: var(--tap); border-radius: 999px; border: 1px solid var(--border); background: var(--bg-2); color: var(--text-2); font-size: .76rem; font-weight: 600; cursor: pointer; white-space: nowrap; } .cat-chip:hover { color: var(--text); } .cat-chip.on { border-color: var(--green); background: var(--tint-green); color: var(--green); } .qty-step { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; } .qty-step button { width: var(--tap); height: var(--tap); border-radius: 7px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); font-size: 1.1rem; cursor: pointer; } .qty-step input { width: 52px; text-align: center; padding: 4px; min-height: var(--tap); background: var(--bg-2); border: 1px solid var(--border); border-radius: 7px; color: var(--text); font-size: 16px; } .cart-list { max-height: 38vh; overflow-y: auto; } .cart-item { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border); } .cart-name { font-size: .85rem; font-weight: 600; overflow-wrap: anywhere; } .till-totals { border-top: 1px solid var(--border); margin-top: 10px; padding-top: 8px; } .cart-total-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 6px 0; font-size: .9rem; } .cart-total-row.grand { border-top: 1px dashed var(--border); margin-top: 4px; padding-top: 10px; font-weight: 800; } .cart-grand { font-size: clamp(1.25rem, 1.1rem + 1vw, 1.5rem); font-weight: 800; color: var(--gold); } .disc-input { width: 120px; text-align: right; padding: 5px 8px; } .pay-methods { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin: 8px 0 12px; } .pay-btn { padding: 10px 3px; min-height: var(--tap); border-radius: 9px; border: 1px solid var(--border); background: var(--bg-2); color: var(--text-2); font-size: .7rem; font-weight: 600; cursor: pointer; text-align: center; } .pay-btn.on { border-color: var(--green); color: var(--green); background: var(--tint-green); } .cash-box { background: var(--bg-2); border: 1px solid var(--border); border-radius: 10px; padding: 12px; margin-bottom: 12px; } .cash-input { font-size: 1.15rem; font-weight: 700; text-align: right; } .tender-quick { display: flex; gap: 6px; flex-wrap: wrap; } .tender-btn { padding: 8px 12px; min-height: var(--tap); border-radius: 8px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text-2); font-size: .78rem; font-weight: 600; cursor: pointer; } .tender-btn:hover { border-color: var(--gold); color: var(--gold); } .change-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 10px; font-size: 1rem; } .change-row b { font-size: 1.2rem; } .cust-details { margin-bottom: 12px; } .cust-details summary { cursor: pointer; font-size: .82rem; color: var(--text-2); padding: 8px 0; min-height: var(--tap); display: flex; align-items: center; } .pay-dialog .pay-due { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 14px; margin-bottom: 14px; background: var(--bg-2); border: 1px solid var(--border); border-radius: 10px; font-size: .9rem; } .pay-dialog .pay-due b { font-size: clamp(1.25rem, 1.1rem + 1vw, 1.5rem); color: var(--gold); } .pay-change { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--border); font-size: .95rem; min-height: 26px; } .pay-change b { font-size: clamp(1.3rem, 1.1rem + 1.2vw, 1.6rem); } .keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 12px; } .keypad .key { padding: 14px 0; min-height: 52px; border-radius: 9px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); font-size: 1.15rem; font-weight: 700; cursor: pointer; } .keypad .key:hover { border-color: var(--green); } .change-banner { background: linear-gradient(135deg, var(--tint-green), var(--tint-green-soft)); border: 1px solid var(--green); border-radius: 12px; padding: 14px 16px; margin-bottom: 14px; text-align: center; } .change-banner span { font-size: .78rem; text-transform: uppercase; letter-spacing: 1.2px; color: var(--text-2); } .change-banner b { display: block; font-size: clamp(1.6rem, 1.2rem + 2vw, 2rem); font-weight: 800; color: var(--green); line-height: 1.2; } .change-banner .small { color: var(--text-3); } .parked-list { display: flex; flex-direction: column; gap: 8px; } .parked-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 12px; background: var(--bg-2); border: 1px solid var(--border); border-radius: 10px; font-size: .85rem; flex-wrap: wrap; } .quick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 8px; max-height: 46vh; overflow-y: auto; } .quick-item { background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 10px; cursor: pointer; text-align: left; color: var(--text); transition: border-color .15s; min-height: 84px; } .quick-item:hover { border-color: var(--green); } .quick-item.out { opacity: .45; } .quick-item .qn { font-size: .8rem; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; } .quick-item .qz { font-size: .68rem; color: var(--text-2); } .quick-item .qp { font-size: .85rem; color: var(--gold); font-weight: 700; margin-top: 4px; } .quick-item .qs { font-size: .66rem; color: var(--text-3); } /* ---------- Charts ---------- */ .chart-wrap { position: relative; height: 250px; } .chart-sm { height: 210px; } /* ---------- QR label / receipt printing ---------- */ #print-area { display: none; } @media print { body * { visibility: hidden !important; } #print-area, #print-area * { visibility: visible !important; } #print-area { display: block !important; position: absolute; left: 0; top: 0; width: 100%; background: #fff; color: #000; } .receipt { font-family: Consolas, 'Courier New', monospace; font-size: 12px; width: 76mm; margin: 0 auto; color: #000; } .qr-label { text-align: center; padding: 10mm; color: #000; font-family: var(--font); } } .receipt { background: #fff; color: #111; padding: 18px; border-radius: 10px; font-family: Consolas, 'Courier New', monospace; font-size: 12.5px; max-width: 330px; margin: 0 auto; } .receipt h3 { text-align: center; font-size: 15px; } .receipt .c { text-align: center; } .receipt hr { border: none; border-top: 1px dashed #999; margin: 8px 0; } .receipt table { font-size: 12px; } .receipt td { padding: 2px 4px; border: none; color: #111; } .receipt .tot { font-weight: 700; font-size: 13.5px; } /* ===================================================================== Responsive ===================================================================== */ /* --- Tablet landscape and small laptops: narrower rail, tighter till --- */ @media (max-width: 1180px) { :root { --sidebar-w: 210px; --pad: 16px; --gap: 14px; } .pos-grid { grid-template-columns: minmax(0, 1fr) minmax(300px, .85fr); } } /* --- Tablet: drawer navigation, single-column till --- */ @media (max-width: 1000px) { .sidebar { position: fixed; top: 0; left: 0; width: min(290px, 84vw); transform: translateX(-102%); transition: transform .22s ease; height: 100vh; height: 100dvh; box-shadow: none; } .sidebar.open { transform: translateX(0); box-shadow: var(--shadow); } .hamburger { display: inline-flex; align-items: center; justify-content: center; } .pos-grid { grid-template-columns: 1fr; } .till { position: static; } .cat-search { max-width: 260px; } } /* --- Large phone / small tablet: bottom tab bar takes over --- */ @media (max-width: 700px) { :root { --pad: 13px; --gap: 12px; --tabbar-h: 60px; } .tabbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; background: var(--tabbar-bg); backdrop-filter: blur(10px); border-top: 1px solid var(--border); padding: 6px max(4px, var(--safe-l)) calc(6px + var(--safe-b)) max(4px, var(--safe-r)); } .tab-btn { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 48px; padding: 4px 2px; background: none; border: none; border-radius: 10px; color: var(--text-3); font-size: .64rem; font-weight: 600; cursor: pointer; min-width: 0; } .tab-btn span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; } .tab-icon { font-size: 1.15rem; line-height: 1; } .tab-btn.active { color: var(--green); background: var(--tint-green); } .stats { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; } .stat { padding: 13px; } .card { padding: 14px; } .pay-methods { grid-template-columns: repeat(3, 1fr); } .cat-search { max-width: none; width: 100%; } .cart-list, .quick-grid { max-height: none; } .quick-grid { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); } .branch-switch { max-width: 38vw; } .branch-select select { max-width: 28vw; } /* Filters read as a two-up grid rather than a ragged wrap */ .filters { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; align-items: end; } .filters .form-group { min-width: 0; } .filters .form-group .form-label { margin-bottom: 3px; } /* A search box is the one filter worth a full row */ .filters .form-group[style*="flex:1"] { grid-column: 1 / -1; } .filters .btn { grid-column: 1 / -1; width: 100%; } /* Dialogs become bottom sheets that can use the full height */ .modal-backdrop { padding: 0; align-items: flex-end; } .modal { max-width: none; border-radius: 16px 16px 0 0; border-bottom: none; max-height: 94dvh; display: flex; flex-direction: column; } .modal.wide { max-width: none; } .modal-body { max-height: none; flex: 1; } .modal-foot { padding-bottom: calc(13px + var(--safe-b)); } .modal-foot .btn { flex: 1 1 auto; } @keyframes pop { from { transform: translateY(40px); opacity: 0; } } #toasts { left: 12px; right: 12px; max-width: none; } } /* --- Phone: tables become stacked cards, no sideways scrolling --- */ @media (max-width: 620px) { .table-wrap { border: none; border-radius: 0; overflow-x: visible; } table, tbody, tr, td { display: block; width: 100%; } thead { display: none; } tbody tr { background: var(--surface-2); border: 1px solid var(--border); border-radius: 11px; padding: 10px 12px; margin-bottom: 10px; } tbody tr:hover { background: var(--surface-2); } tbody td { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 5px 0; border-bottom: none; text-align: right; } tbody td::before { content: attr(data-label); flex: 0 0 auto; text-align: left; font-size: .66rem; text-transform: uppercase; letter-spacing: .7px; color: var(--text-3); font-weight: 700; } /* A cell with no heading (the actions column) spans the card foot */ tbody td[data-label=""] { justify-content: flex-end; padding-top: 9px; margin-top: 4px; border-top: 1px solid var(--border); } tbody td[data-label=""]::before { content: none; } tbody td.hide-narrow { display: none; } tbody td.num { text-align: right; } .branch-stats { grid-template-columns: 1fr 1fr; } .form-row, .form-row-3 { grid-template-columns: 1fr; } /* A receipt is a fixed 76 mm paper layout — it must stay a real table even on a phone, or the printed slip comes out as a column of cards. */ .receipt table, .receipt thead, .receipt tbody, .receipt tr, .receipt td { display: revert; width: auto; } .receipt tbody tr, .receipt tr { background: none; border: none; border-radius: 0; padding: 0; margin: 0; } .receipt tbody td, .receipt td { display: table-cell; padding: 2px 4px; border: none; text-align: left; color: #111; } .receipt tbody td::before, .receipt td::before { content: none; } } /* --- Small phone: one column everywhere, roomier taps --- */ @media (max-width: 430px) { :root { --pad: 11px; } .topbar { gap: 8px; } .branch-switch { max-width: 34vw; } .branch-select select { max-width: 24vw; } body { font-size: 14.5px; } .stats { grid-template-columns: 1fr 1fr; } .stat-value { font-size: 1.05rem; } .pay-methods { grid-template-columns: repeat(2, 1fr); } .quick-grid { grid-template-columns: 1fr 1fr; } .branch-grid { grid-template-columns: 1fr; } .page-head { align-items: stretch; } .page-head .head-actions { width: 100%; } .page-head .head-actions .btn { flex: 1 1 auto; } .cart-item { flex-wrap: wrap; } .cart-item > div:first-child { flex: 1 1 100%; } .chart-wrap { height: 210px; } } /* --- Short landscape phones: give the content the vertical room --- */ @media (max-height: 480px) and (orientation: landscape) { :root { --tabbar-h: 0px; } .tabbar { display: none; } .modal-backdrop { padding: 0; align-items: stretch; } .modal { max-height: 100dvh; border-radius: 0; } } /* Respect a reduced-motion preference. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }