/* RestaurantPOS Web Console — premium dark theme that echoes the WPF host's palette: pure black surface + vivid gold accent. Kept minimal on purpose; Phase W.5 ships the architecture, polish lands on top. */ :root { /* Refined dark-luxury (WEB-31): warmer-than-black surfaces that step in elevation, calmer hairlines, gold reserved as an accent. */ --bg: #0e0e11; --panel: #17171c; /* base card */ --panel-hi: #1c1c22; /* top of card gradient */ --panel2: #1f1f26; /* raised chrome (th, chips, inputs) */ --line: #272730; /* hairline, low-contrast */ --line-soft:#20202a; --text: #f1efe7; --muted: #9a9386; --gold: #d4af37; --gold-hi: #e6c452; --ok: #2ecc71; --warn: #f39c12; --off: #555555; --err: #e74c3c; --radius: 12px; --radius-lg:16px; --focus: 0 0 0 3px rgba(212, 175, 55, .26); --speed: 160ms; /* Layered elevation — soft, never a hard drop. */ --elev-1: 0 1px 2px rgba(0,0,0,.4), 0 4px 14px rgba(0,0,0,.30); --elev-2: 0 2px 6px rgba(0,0,0,.45), 0 14px 40px rgba(0,0,0,.45); --card-grad: linear-gradient(180deg, var(--panel-hi), var(--panel)); color-scheme: dark; } /* ============ Light theme (WEB-16) ============ The whole portal is CSS-variable driven, so this single palette re-skins every surface built on the tokens. `data-theme` is stamped pre-paint (see _Host.cshtml) from the cookie or the OS preference, and flipped live by the ☀/🌙 toggle. Component styles that hardcode a dark surface get a light override in the block near the bottom of this file. Gold stays the brand accent, deepened slightly so it stays legible as text on light panels. */ :root[data-theme="light"] { --bg: #f4f2ec; --panel: #ffffff; --panel-hi: #ffffff; --panel2: #f1ece1; --line: #e7e1d3; --line-soft:#efeade; --text: #1b1913; --muted: #6f6858; --gold: #a97f16; --gold-hi: #c99a2a; --ok: #1e9e5a; --warn: #c07c0c; --err: #d13b2c; --focus: 0 0 0 3px rgba(169, 127, 22, .22); --elev-1: 0 1px 2px rgba(60,50,20,.05), 0 4px 14px rgba(60,50,20,.06); --elev-2: 0 2px 8px rgba(60,50,20,.07), 0 16px 40px rgba(60,50,20,.10); --card-grad: linear-gradient(180deg, #ffffff, #fdfbf6); color-scheme: light; } * { box-sizing: border-box; } /* Belt-and-braces: the PAGE itself can never grow a horizontal scrollbar, no matter what a future component gets wrong. Anything that legitimately needs to scroll sideways (a wide table, an off-canvas drawer, a filter-chip rail) owns its own overflow-x — this only stops that overflow from leaking up and dragging the whole page with it. */ html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); overflow-x: hidden; font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; } /* …but `overflow-x: hidden` costs more than it looks. Per spec, hiding ONE axis computes the other from `visible` to `auto`, which makes a scroll CONTAINER. `position: sticky` resolves against its nearest scroll container, so the sidebar was sticking to a body that never scrolls while the real scrolling happened on — it slid off the top like a static element. `clip` does the same clipping WITHOUT creating a scroll container, so sticky works again. Kept as a @supports upgrade: a browser without `clip` falls back to today's behaviour rather than growing the horizontal scrollbar this rule exists to kill. */ @supports (overflow-x: clip) { html, body { overflow-x: clip; } } code { background: var(--panel2); padding: 1px 6px; border-radius: 4px; color: var(--gold); font-size: 0.9em; } /* ============ Unified button system (W1) ============ One base for EVERY button in the console: comfortable touch target, consistent radius, calm transitions, real focus/active/disabled states. Page-level classes (.primary/.warn/.tab/.chip/…) only recolour. */ button { font-family: inherit; font-size: .95em; font-weight: 600; min-height: 40px; padding: 8px 18px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--panel2); color: var(--text); cursor: pointer; user-select: none; transition: border-color var(--speed), background var(--speed), color var(--speed), transform var(--speed), box-shadow var(--speed); } button:hover:not(:disabled) { border-color: var(--gold); } button:active:not(:disabled) { transform: translateY(1px); } button:focus-visible { outline: none; box-shadow: var(--focus); } button:disabled { opacity: .45; cursor: not-allowed; } button.primary { background: linear-gradient(180deg, var(--gold-hi), var(--gold)); color: #141414; border: 0; font-weight: 700; box-shadow: 0 2px 10px rgba(212, 175, 55, .22); } button.primary:hover:not(:disabled) { background: linear-gradient(180deg, #f0d066, var(--gold-hi)); box-shadow: 0 4px 16px rgba(212, 175, 55, .32); } button.warn { color: var(--warn); border-color: rgba(245, 158, 11, .5); background: transparent; } button.warn:hover:not(:disabled) { border-color: var(--warn); background: rgba(245, 158, 11, .08); } .shell { min-height: 100vh; } .shell.anon .content { display: grid; place-items: center; min-height: 100vh; } header.top { display: flex; align-items: center; gap: 24px; padding: 12px 24px; background: var(--panel); border-bottom: 1px solid var(--line); } header.top .brand { font-weight: 700; letter-spacing: 0.2px; } header.top .brand .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); margin-right: 8px; box-shadow: 0 0 8px var(--gold); } header.top nav.nav { display: flex; gap: 4px; margin-left: auto; } header.top nav.nav a { color: var(--muted); text-decoration: none; padding: 8px 14px; border-radius: 6px; transition: 120ms; } header.top nav.nav a:hover { color: var(--text); background: var(--panel2); } header.top nav.nav a.active { color: var(--gold); background: var(--panel2); } header.top .who { display: flex; align-items: center; gap: 12px; } header.top .user { font-weight: 600; } header.top .muted, .muted { color: var(--muted); font-size: 0.85em; } header.top button.logout { background: transparent; color: var(--text); border: 1px solid var(--line); padding: 6px 12px; border-radius: 6px; cursor: pointer; } header.top button.logout:hover { border-color: var(--gold); color: var(--gold); } /* width:100% is LOAD-BEARING: .content sits in a column flex with auto side margins, which sizes it fit-content — floored by the widest child's MIN-content. One nowrap rail (the WEB-13 swipeable filter row) then silently inflated the whole page to ~630px on a 375px phone. An explicit width opts out of intrinsic sizing entirely; max-width still caps it and the auto margins still center it. */ .content { padding: 32px 32px 64px; width: 100%; max-width: 1280px; margin: 0 auto; } h1 { margin: 0 0 4px; } h2 { margin: 28px 0 12px; color: var(--muted); font-weight: 500; font-size: 1em; text-transform: uppercase; letter-spacing: 0.1em; } .sub { color: var(--muted); margin: 0 0 24px; max-width: 720px; line-height: 1.5; } /* Login card */ .login { width: 100%; display: grid; place-items: center; } .login .card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 32px; width: 380px; max-width: 90vw; } .login .card label { display: block; margin: 16px 0; } .login .card label span { display: block; color: var(--muted); margin-bottom: 6px; font-size: 0.9em; } .login .card label input { width: 100%; background: var(--bg); color: var(--text); border: 1px solid var(--line); border-radius: 6px; padding: 10px 12px; font-size: 1em; } .login .card label input:focus { outline: none; border-color: var(--gold); } .login .card button { margin-top: 12px; width: 100%; background: var(--gold); color: #000; border: 0; padding: 12px; border-radius: 8px; font-weight: 700; font-size: 1em; cursor: pointer; } .login .card button:disabled { opacity: 0.5; cursor: wait; } /* Glowing-blue database badge on the tenant sign-in card */ .db-badge { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 4px 0 18px; padding: 9px 12px; background: rgba(59, 130, 246, 0.08); border: 1px solid rgba(59, 130, 246, 0.45); border-radius: 8px; color: #60a5fa; font-family: Consolas, monospace; font-size: 0.92em; text-shadow: 0 0 8px rgba(96, 165, 250, 0.85); box-shadow: 0 0 12px rgba(59, 130, 246, 0.25), inset 0 0 18px rgba(59, 130, 246, 0.06); animation: dbGlow 2.4s ease-in-out infinite; } .db-badge .db-ico { color: #60a5fa; -webkit-text-fill-color: #60a5fa; text-shadow: 0 0 8px rgba(96, 165, 250, 0.85); filter: drop-shadow(0 0 6px rgba(96, 165, 250, 0.9)); } .db-badge .db-label { color: var(--muted); font-family: inherit; text-shadow: none; font-size: 0.9em; } @keyframes dbGlow { 0%, 100% { box-shadow: 0 0 10px rgba(59, 130, 246, 0.22), inset 0 0 18px rgba(59, 130, 246, 0.06); } 50% { box-shadow: 0 0 22px rgba(59, 130, 246, 0.55), inset 0 0 22px rgba(59, 130, 246, 0.10); } } .error { background: rgba(231, 76, 60, 0.12); border: 1px solid var(--err); color: #ffb3aa; border-radius: 6px; padding: 10px 12px; margin-top: 12px; } .empty { color: var(--muted); padding: 32px; text-align: center; background: var(--panel); border: 1px dashed var(--line); border-radius: 8px; } /* KPI tiles */ .kpis { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } .kpi { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 16px 20px; } .kpi .label { color: var(--muted); font-size: 0.85em; text-transform: uppercase; letter-spacing: 0.1em; } .kpi .value { font-size: 1.6em; font-weight: 700; margin-top: 6px; display: flex; align-items: center; gap: 10px; } .kpi .dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; } .kpi .dot.ok { background: var(--ok); box-shadow: 0 0 6px var(--ok); } .kpi .dot.warn { background: var(--warn); box-shadow: 0 0 6px var(--warn); } .kpi .dot.off { background: var(--off); } /* Recent activity feed */ .activity { list-style: none; padding: 0; margin: 0; } .activity li { padding: 10px 14px; border-bottom: 1px solid var(--line); display: flex; gap: 12px; } .activity li .type { color: var(--gold); font-weight: 600; min-width: 180px; } .activity li .when { color: var(--muted); min-width: 80px; } .activity li .raw { color: var(--text); opacity: 0.9; font-family: ui-monospace, Consolas, monospace; font-size: 0.9em; } /* Grid table */ .grid { width: 100%; border-collapse: collapse; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; } .grid th, .grid td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--line); } .grid th { color: var(--muted); font-weight: 500; font-size: 0.85em; text-transform: uppercase; letter-spacing: 0.08em; background: var(--panel2); } .grid th.num, .grid td.num { text-align: right; font-variant-numeric: tabular-nums; } /* CRED-ON6 — sign-in history. The cloud-arrival row is the case that used to be invisible and generates the support call, so it is the one that is tinted. */ .ch-note { margin: 0 0 14px; padding: 10px 14px; border-radius: 8px; background: var(--panel2); border: 1px solid var(--line); color: var(--muted); font-size: .85rem; } .grid tr.ch-cloud td { background: rgba(245, 158, 11, .10); } .ch-tag { margin-inline-start: 8px; padding: 1px 7px; border-radius: 999px; background: rgba(245, 158, 11, .18); color: #d97706; font-size: .72rem; font-weight: 700; white-space: nowrap; } .grid tr:last-child td { border-bottom: 0; } .pill { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 0.8em; font-weight: 600; margin-right: 4px; } .pill.ok { background: rgba(46, 204, 113, 0.15); color: var(--ok); } .pill.off { background: rgba(85, 85, 85, 0.25); color: var(--muted); } .pill.gold { background: rgba(212, 175, 55, 0.15); color: var(--gold); } /* ---- Live pill (next to page H1) ---- */ .live-pill { display: inline-block; vertical-align: middle; margin-left: 12px; font-size: 0.55em; padding: 3px 10px; border-radius: 999px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; } .live-pill.ok { background: rgba(46, 204, 113, 0.18); color: var(--ok); } .live-pill.warn { background: rgba(243, 156, 18, 0.18); color: var(--warn); } .live-pill.off { background: rgba(85, 85, 85, 0.30); color: var(--muted); } /* ---- Orders filter chip row ---- */ .filter-row { display: flex; align-items: center; gap: 8px; margin: 8px 0 18px; flex-wrap: wrap; } .filter-row .spacer { flex: 1; } .chip { background: var(--panel); color: var(--text); border: 1px solid var(--line); padding: 6px 14px; border-radius: 999px; cursor: pointer; font-size: 0.9em; transition: 120ms; } .chip:hover { border-color: var(--gold); } .chip.active { background: var(--gold); color: #000; border-color: var(--gold); font-weight: 700; } /* ---- Kitchen Display grid ---- */ .kds-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); } .ticket { background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--line); border-radius: 10px; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; } .ticket.new { border-left-color: var(--gold); box-shadow: 0 0 0 1px rgba(212, 175, 55, 0.15); } .ticket.wip { border-left-color: var(--warn); } .ticket.done { border-left-color: var(--ok); } .ticket.bumped { opacity: 0.55; } .ticket header { display: flex; justify-content: space-between; align-items: center; } .ticket .head-left { display: flex; gap: 10px; align-items: center; } .ticket .num { font-weight: 700; font-size: 1.1em; } .ticket .station { display: inline-block; padding: 2px 10px; border-radius: 6px; font-size: 0.8em; font-weight: 700; background: var(--panel2); color: var(--muted); } .ticket .elapsed { font-family: ui-monospace, Consolas, monospace; color: var(--muted); font-size: 0.95em; } .ticket .meta { display: flex; gap: 12px; color: var(--muted); font-size: 0.85em; flex-wrap: wrap; } .ticket .meta .order { color: var(--gold); } .ticket ul.lines { list-style: none; padding: 0; margin: 0; } .ticket ul.lines li { padding: 6px 0; border-bottom: 1px dashed var(--line); } .ticket ul.lines li:last-child { border-bottom: 0; } .ticket ul.lines li .qty { color: var(--gold); font-weight: 700; margin-right: 6px; } .ticket ul.lines li .name { font-weight: 500; } /* K5 — a line the POS cancelled after firing. Struck through and badged so nobody keeps cooking it; this screen used to render voids as ordinary lines. */ .ticket ul.lines li.voidline .name { text-decoration: line-through; color: var(--err); } .ticket ul.lines li.voidline .qty { color: var(--err); } .ticket ul.lines li.voidline .mods, .ticket ul.lines li.voidline .variant { text-decoration: line-through; opacity: .6; } .ticket ul.lines li .void-badge { background: var(--err); color: #fff; font-weight: 800; font-size: .68rem; letter-spacing: .06em; padding: 2px 8px; border-radius: 6px; margin-inline-start: 8px; } .ticket ul.lines li .variant { color: var(--muted); } .ticket ul.lines li .mods, .ticket ul.lines li .note, .ticket .ticket-note { color: var(--muted); font-size: 0.85em; margin-top: 4px; padding-left: 22px; } .ticket footer { display: flex; gap: 8px; margin-top: auto; } .ticket footer button { flex: 1; padding: 10px; border-radius: 6px; border: 0; cursor: pointer; font-weight: 700; background: var(--panel2); color: var(--text); } .ticket footer button.primary { background: var(--gold); color: #000; } .ticket footer button.primary.success { background: var(--ok); } #blazor-error-ui { background: var(--err); color: white; bottom: 0; left: 0; right: 0; position: fixed; padding: 12px 24px; display: none; z-index: 1000; } #blazor-error-ui.show { display: block; } /* ---- Vendor console: Tenants page ---------------------------------------- */ .notice { background: rgba(34, 197, 94, .12); border: 1px solid rgba(34, 197, 94, .5); color: var(--ok, #22c55e); border-radius: 8px; padding: 10px 14px; margin: 10px 0; } .toolbar { display: flex; gap: 10px; align-items: center; margin: 14px 0; } .toolbar input[type="text"], .toolbar input:not([type]) { flex: 0 1 320px; padding: 8px 12px; border-radius: 8px; border: 1px solid var(--line, #333); background: var(--panel2, #1b1b1b); color: var(--text, #eee); } .toolbar button { padding: 8px 16px; border-radius: 8px; border: 0; cursor: pointer; background: var(--panel2, #222); color: var(--text, #eee); } .toolbar button.primary { background: var(--gold, #d4af37); color: #000; font-weight: 700; } .editor { border: 1px solid var(--line, #333); border-radius: 12px; padding: 16px 18px; margin: 12px 0; background: var(--panel, #161616); } .editor h3 { margin: 0 0 12px; } .form-grid { display: grid; grid-template-columns: repeat(3, minmax(180px, 1fr)); gap: 10px 14px; } .form-grid label { display: flex; flex-direction: column; gap: 4px; font-size: .85em; color: var(--muted, #999); } .form-grid input, .form-grid select { padding: 8px 10px; border-radius: 8px; border: 1px solid var(--line, #333); background: var(--panel2, #1b1b1b); color: var(--text, #eee); } .editor .actions { display: flex; gap: 8px; margin-top: 14px; } .editor .actions button { padding: 8px 20px; border-radius: 8px; border: 0; cursor: pointer; background: var(--panel2, #222); color: var(--text, #eee); } .editor .actions button.primary { background: var(--gold, #d4af37); color: #000; font-weight: 700; } .pill.info { background: rgba(59, 130, 246, .15); color: #3b82f6; } .row-actions { display: flex; flex-wrap: wrap; gap: 5px; } .row-actions button { padding: 5px 10px; border-radius: 7px; border: 1px solid var(--line, #333); background: var(--panel2, #1c1c1c); color: var(--text, #eee); cursor: pointer; font-size: .82em; } .row-actions button.primary { background: var(--gold, #d4af37); color: #000; border: 0; font-weight: 700; } .row-actions button.warn { color: #f59e0b; border-color: rgba(245, 158, 11, .5); } .row-actions button:disabled { opacity: .45; cursor: default; } /* ---- CUS-ACT — per-row actions menu (customer list) ---------------------------- A kebab that opens a small anchored menu. The cell is the positioning context, so the menu hangs off the row it belongs to; a transparent scrim below it closes on the next click anywhere. Actions are NAMED, not left as bare emoji. */ .cus-act { position: relative; width: 1%; white-space: nowrap; text-align: end; } .cus-act .kebab { font-size: 1.25rem; line-height: 1; font-weight: 700; letter-spacing: 1px; padding: 2px 10px; border-radius: 8px; background: var(--panel2); color: var(--text); border: 1px solid var(--line); cursor: pointer; } .cus-act .kebab:hover { border-color: var(--gold); color: var(--gold); } .act-scrim { position: fixed; inset: 0; background: transparent; z-index: 30; } .act-menu { position: absolute; z-index: 31; inset-inline-end: 0; top: calc(100% + 4px); min-width: 210px; padding: 6px; text-align: start; background: var(--panel2, #1c1c1c); border: 1px solid var(--line, #333); border-radius: 10px; box-shadow: 0 10px 28px rgba(0, 0, 0, .45); display: flex; flex-direction: column; gap: 2px; } .act-menu > button, .act-menu > a { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; border-radius: 7px; background: transparent; color: var(--text, #eee); font: inherit; font-size: .88em; text-align: start; text-decoration: none; cursor: pointer; } .act-menu > button:hover, .act-menu > a:hover { background: rgba(212, 175, 55, .12); color: var(--gold); } /* ---- Tenants: expandable branches panel ---- */ .branches-row td { background: var(--panel, #141414); } .branches-panel { padding: 10px 6px 14px; } .branches-head { margin-bottom: 8px; display: flex; gap: 10px; align-items: baseline; } table.grid.inner { margin: 0 0 10px; font-size: .92em; } .branch-create { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .branch-create input { padding: 7px 10px; border-radius: 8px; border: 1px solid var(--line, #333); background: var(--panel2, #1b1b1b); color: var(--text, #eee); } .branch-create button { padding: 7px 16px; border-radius: 8px; border: 0; cursor: pointer; background: var(--panel2, #222); color: var(--text, #eee); } .branch-create button.primary { background: var(--gold, #d4af37); color: #000; font-weight: 700; } .branches-panel button.warn { color: #f59e0b; border: 1px solid rgba(245,158,11,.5); background: transparent; } /* ================= Vendor console — professional dashboard ================= */ .nav-group { color: var(--gold); font-size: .7em; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; padding: 0 6px; opacity: .8; } /* WEB-33 — collapsible sidebar categories. The header is a