/* ─── Design tokens ──────────────────────────────────────────────────────── */ :root { /* Typography */ --bs-body-font-family: 'Inter', sans-serif; --bs-font-sans-serif: 'Inter', sans-serif; /* ── Dark theme design tokens (default) ── */ --lp-bg: #111827; --lp-bg-card: #1f2937; --lp-bg-card2: #18202e; --lp-orange: #f59e0b; --lp-orange-dim: #d97706; --lp-text: #f9fafb; --lp-muted: #9ca3af; --lp-border: #374151; --lp-radius: 12px; /* ── Interactive surface tokens (used in place of hardcoded rgba whites) ── */ --lp-hover-bg: rgba(255,255,255,0.06); --lp-hover-bg-strong: rgba(255,255,255,0.14); --lp-btn-bg: rgba(255,255,255,0.08); --lp-btn-border: rgba(255,255,255,0.15); --lp-btn-border-hover: rgba(255,255,255,0.3); --lp-dropdown-bg: #1c2333; /* ── Reservation display-status palette ── */ --res-scheduled: #3b82f6; --res-starting-soon: #eab308; --res-waiting: #f59e0b; --res-seated: #22c55e; --res-noshow: #ef4444; --res-completed: #64748b; --res-cancelled: #6b7280; --res-danger: #ef4444; /* ── Semantic aliases used by page-scoped .razor.css files ── */ --text-primary: var(--lp-text); --text-secondary: var(--lp-muted); --bg-page: var(--lp-bg); --bg-card: var(--lp-bg-card); --border-color: var(--lp-border); --bg-hover: var(--lp-bg-card2); --accent: #6366f1; /* ── Bootstrap variable overrides ── */ --bs-body-bg: var(--lp-bg); --bs-body-color: var(--lp-text); --bs-secondary-color: var(--lp-muted); --bs-border-color: var(--lp-border); --bs-secondary-bg: var(--lp-bg-card); --bs-tertiary-bg: var(--lp-bg-card2); --bs-card-bg: var(--lp-bg-card); --bs-card-border-color: var(--lp-border); --bs-card-color: var(--lp-text); --bs-modal-bg: var(--lp-bg-card); --bs-modal-color: var(--lp-text); --bs-modal-header-border-color: var(--lp-border); --bs-modal-footer-border-color: var(--lp-border); --bs-dropdown-bg: var(--lp-dropdown-bg); --bs-dropdown-border-color: var(--lp-border); --bs-dropdown-color: var(--lp-text); --bs-dropdown-link-color: var(--lp-text); --bs-dropdown-link-hover-bg: var(--lp-hover-bg); --bs-input-bg: var(--lp-bg-card2); --bs-input-border-color: var(--lp-border); --bs-input-color: var(--lp-text); --bs-input-placeholder-color: var(--lp-muted); --bs-input-focus-border-color: var(--lp-orange); --bs-input-focus-box-shadow: 0 0 0 0.2rem rgba(245,158,11,0.2); } /* ── Light theme overrides ────────────────────────────────────────────────── */ /* Applied when JS sets data-theme="light" on . */ [data-theme="light"] { --lp-bg: #f8fafc; --lp-bg-card: #ffffff; --lp-bg-card2: #f1f5f9; --lp-text: #0f172a; --lp-muted: #64748b; --lp-border: #e2e8f0; --lp-hover-bg: rgba(0,0,0,0.05); --lp-hover-bg-strong: rgba(0,0,0,0.08); --lp-btn-bg: rgba(0,0,0,0.06); --lp-btn-border: rgba(0,0,0,0.15); --lp-btn-border-hover: rgba(0,0,0,0.3); --lp-dropdown-bg: #ffffff; --bs-btn-close-filter: none; } /* Disable scroll anchoring globally — overflow-anchor is not inherited, so must be applied to all elements to prevent DOM reorders from shifting scroll */ * { overflow-anchor: none; } /* ─── Base ───────────────────────────────────────────────────────────────── */ html, body { font-family: 'Inter', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background: var(--lp-bg); color: var(--lp-text); overscroll-behavior: none; /* prevent iOS rubber-band bounce */ } h1, h2, h3, h4, h5, h6 { font-weight: 600; } .display-4 { font-weight: 700; } .lead { font-weight: 400; } h1:focus { outline: none; } hr { border-color: var(--lp-border); opacity: 1; } a { color: var(--lp-orange); } @media (hover: hover) { a:hover { color: var(--lp-orange-dim); } } .btn-link { color: var(--lp-orange); } @media (hover: hover) { .btn-link:hover { color: var(--lp-orange-dim); } } .text-muted { color: var(--lp-muted) !important; } /* ─── Buttons ────────────────────────────────────────────────────────────── */ /* * Bootstrap 5.3 renders all button states through CSS custom properties. * Override them here so Bootstrap's own pipeline uses our orange theme. */ .btn-primary { --bs-btn-color: #111; --bs-btn-bg: var(--lp-orange); --bs-btn-border-color: var(--lp-orange); --bs-btn-hover-color: #111; --bs-btn-hover-bg: var(--lp-orange); /* glow handles hover feedback, not bg change */ --bs-btn-hover-border-color: var(--lp-orange); --bs-btn-active-color: #111; --bs-btn-active-bg: var(--lp-orange-dim); /* dim on tap */ --bs-btn-active-border-color: var(--lp-orange-dim); --bs-btn-focus-shadow-rgb: 245, 158, 11; --bs-btn-disabled-color: #111; --bs-btn-disabled-bg: var(--lp-orange); --bs-btn-disabled-border-color: var(--lp-orange); --bs-btn-disabled-opacity: 0.42; font-weight: 600; } /* Global orange button (landing page + app-wide) — base appearance only */ .lp-btn-orange { background: var(--lp-orange); color: #111 !important; font-weight: 600; padding: 0.45rem 1.1rem; border-radius: 8px; border: none; text-decoration: none !important; cursor: pointer; font-size: 0.9rem; display: inline-block; } /* ── Shared orange button state behavior ────────────────────────────────── */ /* Single source of truth for all interactive states across orange buttons */ .btn-primary, .lp-btn-orange { transition: box-shadow 0.15s; box-shadow: 0 2px 10px rgba(245,158,11,0.35); /* resting ambient glow */ } .btn-primary:hover, @media (hover: hover) { .lp-btn-orange:hover { box-shadow: 0 0 8px 2px rgba(245,158,11,0.6), 0 0 24px 6px rgba(245,158,11,0.35); /* intensified glow */ } } .btn-primary:active, .lp-btn-orange:active { background: var(--lp-orange-dim); box-shadow: none; } .btn-primary:focus-visible, .btn-primary:focus, .lp-btn-orange:focus-visible, .lp-btn-orange:focus { outline: none; background: #fbbf24; color: #111; box-shadow: 0 0 8px 2px rgba(245,158,11,0.7), 0 0 28px 8px rgba(245,158,11,0.35); } .btn-primary:disabled, .btn-primary.disabled, .lp-btn-orange:disabled, .lp-btn-orange.disabled { opacity: 0.42; cursor: not-allowed; box-shadow: none; } /* ── Outline secondary ──────────────────────────────────────────────────── */ .btn-outline-secondary { --bs-btn-color: var(--lp-muted); --bs-btn-border-color: var(--lp-border); --bs-btn-hover-color: var(--lp-text); --bs-btn-hover-bg: var(--lp-hover-bg); --bs-btn-hover-border-color: var(--lp-text); --bs-btn-active-color: var(--lp-text); --bs-btn-active-bg: rgba(255,255,255,0.12); --bs-btn-disabled-color: var(--lp-muted); --bs-btn-disabled-border-color: var(--lp-border); } .btn-outline-secondary:focus-visible, .btn-outline-secondary:focus { outline: none; border-color: var(--lp-text); color: var(--lp-text); background-color: rgba(255,255,255,0.06); box-shadow: 0 0 8px 2px rgba(249,250,251,0.25), 0 0 24px 6px rgba(249,250,251,0.1); } /* ── Outline primary (orange) ───────────────────────────────────────────── */ .btn-outline-primary { --bs-btn-color: var(--lp-orange); --bs-btn-border-color: var(--lp-orange); --bs-btn-hover-color: #111; --bs-btn-hover-bg: var(--lp-orange); --bs-btn-hover-border-color: var(--lp-orange); --bs-btn-active-color: #111; --bs-btn-active-bg: var(--lp-orange-dim); --bs-btn-focus-shadow-rgb: 245, 158, 11; } .btn-outline-primary:focus-visible, .btn-outline-primary:focus { outline: none; box-shadow: 0 0 8px 2px rgba(245,158,11,0.65), 0 0 28px 8px rgba(245,158,11,0.3); } /* ── Generic focus fallback for all other .btn variants ─────────────────── */ .btn:focus-visible, .btn:focus { outline: none; box-shadow: 0 0 8px 2px rgba(245,158,11,0.65), 0 0 28px 8px rgba(245,158,11,0.3); } .lp-btn-outline { background: transparent; color: var(--lp-text) !important; font-weight: 600; padding: 0.7rem 1.6rem; border-radius: 8px; border: 1px solid rgba(249,250,251,0.25); text-decoration: none !important; cursor: pointer; font-size: 0.95rem; transition: border-color 0.15s, background 0.15s; display: inline-block; } @media (hover: hover) { .lp-btn-outline:hover { border-color: var(--lp-text); background: rgba(255,255,255,0.05); } } .lp-link-ghost { color: var(--lp-muted) !important; text-decoration: none !important; font-size: 0.9rem; transition: color 0.15s; } .lp-link-ghost:hover { color: var(--lp-text) !important; } /* ─── Info / Success pages ───────────────────────────────────────────────── */ .info-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 2rem 1rem; background: var(--lp-bg); background-image: radial-gradient(ellipse at 50% 40%, rgba(245,158,11,0.1) 0%, transparent 65%); } .info-card { width: 460px; max-width: 100%; background: var(--lp-bg-card); border: 1px solid rgba(245,158,11,0.25); border-radius: 20px; padding: 2.5rem 2rem; text-align: center; } .info-card__icon { width: 64px; height: 64px; margin: 0 auto 1.5rem; display: flex; align-items: center; justify-content: center; background: rgba(245,158,11,0.12); border: 1px solid rgba(245,158,11,0.3); border-radius: 50%; color: var(--lp-orange); } .info-card__icon svg { width: 28px; height: 28px; } .info-card__title { font-size: 1.35rem; font-weight: 700; color: var(--lp-text); margin-bottom: 0.75rem; } .info-card__text { color: var(--lp-muted); font-size: 0.9rem; margin-bottom: 0.4rem; line-height: 1.6; } .info-card__actions { margin-top: 1.75rem; display: flex; flex-direction: column; align-items: center; gap: 0.85rem; } .info-card__link { color: var(--lp-orange) !important; text-decoration: none !important; font-size: 0.875rem; transition: opacity 0.15s; } @media (hover: hover) { .info-card__link:hover { opacity: 0.75; } } .lp-btn-icon { display: inline-flex; align-items: center; justify-content: center; color: var(--lp-muted) !important; text-decoration: none !important; padding: 0.35rem; border-radius: 6px; transition: color 0.15s, background 0.15s; } .lp-btn-icon:hover { color: var(--lp-orange) !important; background: rgba(245,158,11,0.08); } .lp-btn-login { color: var(--lp-orange) !important; text-decoration: none !important; font-size: 0.9rem; font-weight: 600; padding: 0.45rem 1.1rem; border-radius: 8px; border: 1px solid var(--lp-orange); display: inline-block; transition: background 0.15s, color 0.15s; } .lp-btn-login:hover { background: rgba(245,158,11,0.1); color: var(--lp-orange) !important; } /* ─── Form controls ──────────────────────────────────────────────────────── */ .form-control, .form-select { background-color: var(--lp-bg-card2); border-color: var(--lp-border); color: var(--lp-text); } .form-control:focus, .form-select:focus { background-color: var(--lp-bg-card2); border-color: var(--lp-orange); color: var(--lp-text); box-shadow: 0 0 0 0.2rem rgba(245,158,11,0.2); } .form-control:disabled, .form-control[readonly], .form-select:disabled { background-color: var(--lp-bg-card); border-color: var(--lp-border); color: var(--lp-muted); opacity: 0.8; } .form-control::placeholder, .form-select::placeholder { color: var(--lp-muted); } .form-label { color: var(--lp-text); } .form-text { color: var(--lp-muted); } .input-group-text { background-color: var(--lp-bg-card); border-color: var(--lp-border); color: var(--lp-muted); } /* Valid / invalid */ .form-control.is-valid:focus { box-shadow: 0 0 0 0.2rem rgba(34,197,94,0.2); } .form-control.is-invalid:focus { box-shadow: 0 0 0 0.2rem rgba(239,68,68,0.2); } /* Blazor validation */ .valid.modified:not([type=checkbox]) { outline: 1px solid #26b050; } .invalid { outline: 1px solid red; } .validation-message { color: #fca5a5; } /* ─── Cards ──────────────────────────────────────────────────────────────── */ .card { background-color: var(--lp-bg-card); border-color: var(--lp-border); color: var(--lp-text); } .card-title { color: var(--lp-text); } /* ─── Alerts ─────────────────────────────────────────────────────────────── */ .alert-danger { background-color: rgba(239,68,68,0.15); border-color: rgba(239,68,68,0.3); color: #fca5a5; } .alert-success { background-color: rgba(34,197,94,0.15); border-color: rgba(34,197,94,0.3); color: #86efac; } /* ─── Modals ─────────────────────────────────────────────────────────────── */ .modal-content { background-color: var(--lp-bg-card); border-color: var(--lp-border); color: var(--lp-text); } .modal-header { border-bottom-color: var(--lp-border); } .modal-footer { border-top-color: var(--lp-border); } /* Dark mode: invert the Bootstrap × icon to white; light mode: keep default */ .btn-close { filter: invert(1) grayscale(100%) brightness(200%); } [data-theme="light"] .btn-close { filter: none; } /* ─── Dropdowns ──────────────────────────────────────────────────────────── */ .dropdown-menu { background-color: var(--lp-bg-card); border-color: var(--lp-border); } .dropdown-item { color: var(--lp-text); } .dropdown-item:hover, .dropdown-item:focus { background-color: rgba(255,255,255,0.08); color: var(--lp-text); } .dropdown-divider { border-color: var(--lp-border); } /* ─── Misc ───────────────────────────────────────────────────────────────── */ .content { padding-top: 1.1rem; } .navbar, .navbar-brand, .nav-link, .btn, .dropdown-menu { font-family: 'Inter', sans-serif; } /* Blazor error UI */ #blazor-error-ui { color-scheme: light only; background: lightyellow; bottom: 0; box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2); box-sizing: border-box; display: none; left: 0; padding: 0.6rem 1.25rem 0.7rem 1.25rem; position: fixed; width: 100%; z-index: 1000; } #blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; } .blazor-error-boundary { background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121; padding: 1rem 1rem 1rem 3.7rem; color: white; } .blazor-error-boundary::after { content: "An error has occurred."; } /* Loading spinner */ .loading-progress { position: relative; display: block; width: 8rem; height: 8rem; margin: 20vh auto 1rem auto; } .loading-progress circle { fill: none; stroke: #e0e0e0; stroke-width: 0.6rem; transform-origin: 50% 50%; transform: rotate(-90deg); } .loading-progress circle:last-child { stroke: var(--lp-orange); stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%; transition: stroke-dasharray 0.05s ease-in-out; } .loading-progress-text { position: absolute; text-align: center; font-weight: bold; inset: calc(20vh + 3.25rem) 0 auto 0.2rem; } .loading-progress-text:after { content: var(--blazor-load-percentage-text, "Loading"); } code { color: #c02d76; } /* ── SignUp card SVG icons (global — MarkupString bypasses scoped CSS) ── */ .sel-card__svg-icon { width: 2.8rem; height: 2.8rem; color: var(--lp-muted); } .sel-card--active .sel-card__svg-icon { color: var(--lp-orange); } /* Form floating placeholder fix */ .form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder { color: var(--lp-muted); text-align: end; } .form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder { text-align: start; } /* ── Global keyframes ──────────────────────────────────────────────────── */ @keyframes spin { to { transform: rotate(360deg); } } /* ── Modal backdrop (for native showModal) ────────────────────── */ dialog.add-user-dialog::backdrop, dialog.cat-dialog::backdrop, dialog.offer-dialog::backdrop, dialog.role-dialog::backdrop, dialog.tc-dialog::backdrop, dialog.res-dialog::backdrop, dialog.variants-dialog::backdrop, dialog.profile-dialog::backdrop, dialog.org-dialog::backdrop, dialog.unit-dialog::backdrop { background: rgba(0, 0, 0, 0.65); backdrop-filter: blur(3px); } dialog.confirm-dialog::backdrop, dialog.details-dialog::backdrop { background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(6px); } /* ── Shared modal / confirm-dialog styles ───────────────────────────────── */ /* These classes are used across multiple components (StaffUsers, NavMenu, */ /* etc.) and must live here so scoped CSS in individual components does not */ /* prevent them from being applied. */ dialog.confirm-dialog { padding: 0; border: 1px solid var(--lp-border); border-radius: 14px; background: var(--lp-bg-card); color: var(--lp-text); width: calc(100% - 2rem); max-width: 380px; overflow: visible; outline: none; } .confirm-body { display: flex; align-items: flex-start; gap: 1rem; } .confirm-icon { width: 2.5rem; height: 2.5rem; border-radius: 50%; background: rgba(248, 113, 113, 0.1); border: 1.5px solid rgba(248, 113, 113, 0.3); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: #f87171; } .confirm-icon svg { width: 1rem; height: 1rem; fill: currentColor; } .confirm-icon--warn { background: rgba(245, 158, 11, 0.1); border-color: rgba(245, 158, 11, 0.3); color: var(--lp-orange); } .confirm-text { display: flex; flex-direction: column; gap: 0.25rem; padding-top: 0.1rem; } .confirm-message { margin: 0; font-size: 0.875rem; color: var(--lp-text); line-height: 1.4; } .confirm-sub { margin: 0; font-size: 0.8rem; color: var(--lp-muted); } .modal-header { display: flex; align-items: center; justify-content: space-between; padding: 1.25rem 1.5rem 1.1rem; border-bottom: 1px solid var(--lp-border); flex-shrink: 0; } .modal-title { font-size: 1rem; font-weight: 700; color: var(--lp-text); } .modal-close { background: none; border: none; color: var(--lp-muted); padding: 0.3rem; border-radius: 6px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: color 0.15s, background 0.15s; outline: none; flex-shrink: 0; } .modal-close svg { width: 1rem; height: 1rem; fill: currentColor; } @media (hover: hover) { .modal-close:hover { color: var(--lp-text); background: var(--lp-hover-bg); } } .modal-close:focus-visible { outline: 2px solid var(--lp-orange); outline-offset: 2px; } .modal-body { padding: 1.25rem 1.5rem; display: flex; flex-direction: column; gap: 1rem; overflow-y: auto; min-height: 0; } .modal-footer { display: flex; align-items: center; justify-content: flex-end; gap: 0.75rem; padding: 1rem 1.5rem 1.25rem; border-top: 1px solid var(--lp-border); flex-shrink: 0; } .modal-btn-cancel { padding: 0.5rem 1.1rem; background: none; border: 1px solid var(--lp-border); border-radius: 8px; color: var(--lp-text); font-size: 0.875rem; font-weight: 500; cursor: pointer; transition: background 0.15s, border-color 0.15s; outline: none; } @media (hover: hover) { .modal-btn-cancel:hover:not(:disabled) { background: var(--lp-hover-bg); border-color: var(--lp-muted); } } .modal-btn-delete { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1.25rem; background: var(--res-danger); border: none; border-radius: 8px; color: #fff; font-size: 0.875rem; font-weight: 600; cursor: pointer; transition: opacity 0.15s; outline: none; min-width: 80px; justify-content: center; } @media (hover: hover) { .modal-btn-delete:hover:not(:disabled) { opacity: 0.85; } } .modal-btn-delete:active:not(:disabled) { opacity: 0.7; } .modal-btn-delete:disabled { opacity: 0.45; cursor: not-allowed; } .modal-btn-delete:focus-visible { outline: 2px solid #ef4444; outline-offset: 2px; } .modal-btn-submit { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1.25rem; background: var(--lp-orange); border: none; border-radius: 8px; color: #000; font-size: 0.875rem; font-weight: 600; cursor: pointer; transition: opacity 0.15s; outline: none; min-width: 96px; justify-content: center; } @media (hover: hover) { .modal-btn-submit:hover:not(:disabled) { opacity: 0.85; } } .modal-btn-submit:active:not(:disabled) { opacity: 0.7; } .modal-btn-submit:disabled, .modal-btn-cancel:disabled { opacity: 0.45; cursor: not-allowed; } .modal-btn-submit:focus-visible, .modal-btn-cancel:focus-visible { outline: 2px solid var(--lp-orange); outline-offset: 2px; } .modal-error-banner { background: rgba(248, 113, 113, 0.08); border: 1px solid rgba(248, 113, 113, 0.35); border-radius: 8px; padding: 0.65rem 0.875rem; font-size: 0.82rem; color: #f87171; } .res-out-of-service { display: flex; align-items: flex-start; gap: 0.65rem; background: rgba(239, 68, 68, 0.07); border: 1px solid rgba(239, 68, 68, 0.35); border-radius: 10px; padding: 0.75rem 0.875rem; } .res-out-of-service svg { width: 1.1rem; height: 1.1rem; fill: #f87171; flex-shrink: 0; margin-top: 0.05rem; } .res-out-of-service-text { display: flex; flex-direction: column; gap: 0.2rem; } .res-out-of-service-title { font-size: 0.85rem; font-weight: 600; color: #f87171; } .res-out-of-service-desc { font-size: 0.78rem; color: var(--lp-muted); } .modal-spinner { width: 0.9rem; height: 0.9rem; border: 2px solid rgba(0, 0, 0, 0.25); border-top-color: #000; border-radius: 50%; animation: spin 0.6s linear infinite; flex-shrink: 0; } .modal-spinner--light { border-color: rgba(255, 255, 255, 0.3); border-top-color: #fff; } /* ── Reservation dialog ─────────────────────────────────────────────────── */ dialog.res-dialog { padding: 0; border: 1px solid var(--lp-border); border-radius: 14px; background: var(--lp-bg-card); color: var(--lp-text); width: calc(100% - 2rem); max-width: 480px; max-height: calc(100dvh - 2rem); overflow: hidden; display: none; flex-direction: column; outline: none; } dialog.res-dialog[open] { display: flex; } .modal-subtitle { font-size: 0.8rem; color: var(--lp-muted); margin: 0; } /* ── Coming-soon placeholder (shared by KDS, Reservations, etc.) ────────── */ .coming-soon-state { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; padding: 4rem 1.5rem; color: var(--lp-muted); font-size: 0.9rem; margin-top: 1.25rem; } .coming-soon-state svg { width: 2.5rem; height: 2.5rem; opacity: 0.35; fill: currentColor; } /* ═══════════════════════════════════════════════════════════════════════════ Shared Table Canvas — tp-* classes Used by: TablesPreview.razor, Reservations.razor ═══════════════════════════════════════════════════════════════════════════ */ /* ── Empty state ─────────────────────────────────────────────────────────── */ .tp-empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.75rem; padding: 4rem 2rem; color: var(--lp-muted); font-size: 0.9rem; } .tp-empty-state svg { width: 3rem; height: 3rem; fill: currentColor; opacity: 0.25; } .tp-config-link { margin-top: 0.25rem; color: var(--lp-orange); text-decoration: none; font-weight: 500; font-size: 0.875rem; } @media (hover: hover) { .tp-config-link:hover { text-decoration: underline; } } /* ── Shared tab strip ────────────────────────────────────────────────────── */ .lp-tab-bar { display: flex; align-items: stretch; border-bottom: 1px solid var(--lp-border); flex-shrink: 0; background: var(--lp-bg-card); } .lp-tabs { display: flex; flex: 1; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; padding-bottom: 1px; } .lp-tabs::-webkit-scrollbar { display: none; } .lp-tab { display: flex; align-items: center; gap: 0.2rem; padding: 0 0.75rem; height: 2.5rem; border: none; border-right: 1px solid var(--lp-border); border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; flex-shrink: 0; user-select: none; background: none; font-family: inherit; outline: none; transition: background 0.12s; } @media (hover: hover) { .lp-tab:hover { background: var(--lp-hover-bg); } } .lp-tab--active { border-bottom-color: var(--lp-orange); background: rgba(245, 158, 11, 0.07); } .lp-tab--active:hover { background: rgba(245, 158, 11, 0.1); } .lp-tab-add { display: flex; align-items: center; justify-content: center; padding: 0 0.75rem; background: none; border: none; border-left: 1px solid var(--lp-border); color: var(--lp-muted); cursor: pointer; flex-shrink: 0; margin-left: auto; transition: color 0.13s, background 0.12s; outline: none; } @media (hover: hover) { .lp-tab-add:hover { color: var(--lp-orange); background: rgba(245, 158, 11, 0.06); } } .lp-tab-add:focus-visible { outline: 2px solid var(--lp-orange); outline-offset: -2px; } /* ── Canvas wrapper ──────────────────────────────────────────────────────── */ .tp-canvas-wrap { /* min-width: 0 prevents this flex item from expanding beyond its flex parent. Without it, flex default min-width:auto resolves to the canvas's explicit pixel width, breaking responsive layout and causing page-level overflow. */ min-width: 0; background: var(--lp-bg-card); border: 1px solid var(--lp-border); border-top: none; border-radius: 0 0 var(--lp-radius) var(--lp-radius); min-height: 520px; overflow: auto; position: relative; } /* ── Canvas ──────────────────────────────────────────────────────────────── */ .tp-canvas { position: relative; width: 100%; /* fills the wrap so there's no empty space on wide screens */ min-height: 520px; /* fallback; CanvasStyle() overrides with content-based value */ } /* Pan + pinch-to-zoom on the read-only table map (mouse and touch) */ .tp-canvas-wrap { touch-action: none; overflow: hidden; cursor: grab; } .tp-canvas-wrap:active { cursor: grabbing; } .tp-canvas { transform-origin: 0 0; will-change: transform; user-select: none; } .tp-canvas-empty-hint { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: var(--lp-muted); font-size: 0.85rem; opacity: 0.5; text-align: center; pointer-events: none; white-space: nowrap; } /* ── Table element ───────────────────────────────────────────────────────── */ .tp-table { position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--lp-bg-card2); border: 1.5px solid var(--lp-border); gap: 0.2rem; padding: 0.35rem; transition: border-color 0.15s, background 0.15s, box-shadow 0.15s; cursor: default; } .tp-table--square { width: 80px; height: 80px; border-radius: 10px; } .tp-table--rectangle { width: 124px; height: 80px; border-radius: 10px; } .tp-table--circle { width: 88px; height: 88px; border-radius: 50%; } .tp-table--clickable { cursor: pointer; } @media (hover: hover) { .tp-table--clickable:hover { border-color: var(--lp-orange); background: var(--lp-hover-bg); box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.55), 0 0 10px 2px rgba(245, 158, 11, 0.20); } } .tp-table--reserved { border-color: var(--lp-orange); background: rgba(245, 158, 11, 0.12); box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.20); } @media (hover: hover) { .tp-table--reserved.tp-table--clickable:hover { border-color: var(--lp-orange); box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.55), 0 0 10px 2px rgba(245, 158, 11, 0.20); } } .tp-table--available { border-color: #9ca3af; background: rgba(156, 163, 175, 0.12); } @media (hover: hover) { .tp-table--available.tp-table--clickable:hover { border-color: #9ca3af; background: rgba(156, 163, 175, 0.20); box-shadow: 0 0 0 2px rgba(156, 163, 175, 0.35); } } .tp-table--seated { border-color: var(--res-seated); background: rgba(34, 197, 94, 0.13); box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.18); } @media (hover: hover) { .tp-table--seated.tp-table--clickable:hover { border-color: var(--res-seated); background: rgba(34, 197, 94, 0.20); box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.55), 0 0 10px 2px rgba(34, 197, 94, 0.20); } } .tp-table--scheduled { border-color: var(--res-scheduled); background: rgba(59, 130, 246, 0.10); box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.18); } @media (hover: hover) { .tp-table--scheduled.tp-table--clickable:hover { border-color: var(--res-scheduled); background: rgba(59, 130, 246, 0.17); box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.55), 0 0 10px 2px rgba(59, 130, 246, 0.20); } } .tp-table--starting-soon { border-color: var(--res-starting-soon); background: rgba(234, 179, 8, 0.12); box-shadow: 0 0 0 2px rgba(234, 179, 8, 0.20); } @media (hover: hover) { .tp-table--starting-soon.tp-table--clickable:hover { border-color: var(--res-starting-soon); background: rgba(234, 179, 8, 0.20); box-shadow: 0 0 0 2px rgba(234, 179, 8, 0.55), 0 0 10px 2px rgba(234, 179, 8, 0.25); } } .tp-table--waiting { border-color: var(--res-waiting); background: rgba(245, 158, 11, 0.18); box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.28); } @media (hover: hover) { .tp-table--waiting.tp-table--clickable:hover { border-color: var(--res-waiting); background: rgba(245, 158, 11, 0.26); box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.65), 0 0 12px 3px rgba(245, 158, 11, 0.30); } } /* Legacy — kept for any residual CSS references, no longer emitted by Blazor */ .tp-table--occupied { border-color: var(--res-noshow); background: rgba(239, 68, 68, 0.13); box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.18); } @media (hover: hover) { .tp-table--occupied.tp-table--clickable:hover { border-color: var(--res-noshow); box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.55), 0 0 10px 2px rgba(239, 68, 68, 0.20); } } .tp-table--late { border-color: var(--res-waiting); background: rgba(245, 158, 11, 0.28); box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.38); } .tp-table-badge--late { position: absolute; top: -9px; left: -9px; width: 18px; height: 18px; border-radius: 50%; background: var(--res-waiting); color: #000; font-size: 0.8rem; font-weight: 900; line-height: 18px; text-align: center; z-index: 3; pointer-events: none; } .tp-table-badge--active { position: absolute; top: -9px; left: -9px; width: 18px; height: 18px; border-radius: 50%; background: var(--res-danger); color: #fff; font-size: 0.8rem; font-weight: 900; line-height: 18px; text-align: center; z-index: 3; pointer-events: none; } /* End legacy */ .tp-table--noshow { border-color: var(--res-noshow); background: rgba(239, 68, 68, 0.08); } @media (hover: hover) { .tp-table--noshow.tp-table--clickable:hover { border-color: var(--res-noshow); box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.55), 0 0 10px 2px rgba(239, 68, 68, 0.20); } } .tp-table-badge--noshow { position: absolute; top: -9px; left: -9px; width: 18px; height: 18px; border-radius: 50%; background: var(--res-danger); color: #fff; font-size: 0.8rem; font-weight: 900; line-height: 18px; text-align: center; z-index: 3; pointer-events: none; } .tp-table-badge--seated { position: absolute; top: -9px; left: -9px; width: 18px; height: 18px; border-radius: 50%; background: var(--res-seated); color: #fff; font-size: 0.8rem; font-weight: 900; line-height: 18px; text-align: center; z-index: 3; pointer-events: none; } .tp-table-badge--waiting { position: absolute; top: -9px; left: -9px; width: 18px; height: 18px; border-radius: 50%; background: var(--res-waiting); color: #1c1917; font-size: 0.8rem; font-weight: 900; line-height: 18px; text-align: center; z-index: 3; pointer-events: none; } .tp-table-badge--starting-soon { position: absolute; top: -9px; left: -9px; width: 18px; height: 18px; border-radius: 50%; background: var(--res-starting-soon); color: #1c1917; font-size: 0.8rem; font-weight: 900; line-height: 18px; text-align: center; z-index: 3; pointer-events: none; } .tp-table--filtered-out { opacity: 0.3; filter: grayscale(0.7); } .tp-table--has-order { border-color: #22c55e; background: rgba(34, 197, 94, 0.13); box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.18); } @media (hover: hover) { .tp-table--has-order.tp-table--clickable:hover { background: rgba(34, 197, 94, 0.20); box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.45), 0 0 8px 2px rgba(34, 197, 94, 0.15); } } .tp-table--unavailable { border-color: rgba(55, 65, 81, 0.7) !important; overflow: hidden; } .tp-table--unavailable::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient( 45deg, transparent, transparent 5px, rgba(55, 65, 81, 0.12) 5px, rgba(55, 65, 81, 0.12) 10px ); pointer-events: none; border-radius: inherit; } .tp-table--selected { border-color: var(--lp-orange) !important; box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.65), 0 0 14px 4px rgba(245, 158, 11, 0.28) !important; z-index: 10; } /* Table number */ .tp-table-num { font-size: 1.35rem; font-weight: 700; color: var(--lp-text); line-height: 1; } /* Guest count */ .tp-table-guests { display: flex; align-items: center; gap: 0.2rem; font-size: 0.78rem; color: var(--lp-muted); line-height: 1; } .tp-table-guests svg { width: 0.72rem; height: 0.72rem; fill: currentColor; flex-shrink: 0; } /* Inline info label (customer name or "free" time) — used in preview mode */ .tp-table-info { font-size: 0.6rem; line-height: 1.1; max-width: calc(100% - 4px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; font-weight: 600; } .tp-table-info--name { color: var(--res-danger); } .tp-table-info--free { color: #4ade80; } /* Reservation badge */ .tp-table-badge { position: absolute; top: -9px; right: -9px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: var(--lp-orange); color: #000; font-size: 0.68rem; font-weight: 700; line-height: 18px; text-align: center; z-index: 3; pointer-events: none; } /* ── Decor objects (structural, non-interactive) ─────────────────────────── */ .tp-decor { position: absolute; border-radius: 3px; pointer-events: none; overflow: hidden; } .tp-decor-icon { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; } .tp-decor-icon svg { width: 100%; height: 100%; } .tp-decor-label { position: absolute; bottom: 0; left: 0; right: 0; text-align: center; font-size: 0.58rem; font-weight: 700; letter-spacing: 0.04em; color: currentColor; background: rgba(0, 0, 0, 0.18); padding: 1px 2px 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; text-transform: uppercase; } .tp-decor--wall { background: rgba(120,130,150,0.30); border: 1.5px solid rgba(120,130,150,0.65); color: rgba(160,175,195,0.95); } .tp-decor--door { background: rgba(100,150,200,0.20); border: 1.5px solid rgba(100,150,200,0.60); color: rgba(120,170,220,0.95); border-radius: 0; } .tp-decor--window { background: rgba( 80,180,240,0.15); border: 1.5px solid rgba( 80,180,240,0.55); color: rgba(100,200,255,0.95); } .tp-decor--plant { background: rgba( 70,190,100,0.15); border: 1.5px solid rgba( 70,190,100,0.50); border-radius: 50%; color: rgba( 90,210,120,0.95); } .tp-decor--bar { background: rgba(180, 40, 70,0.18); border: 1.5px solid rgba(180, 40, 70,0.60); color: rgba(220, 80,110,0.95); } .tp-decor--column { background: rgba(150,150,175,0.28); border: 1.5px solid rgba(150,150,175,0.60); border-radius: 50%; color: rgba(180,185,210,0.95); } /* ── Legend ──────────────────────────────────────────────────────────────── */ .tp-legend { display: flex; align-items: center; flex-wrap: wrap; gap: 0.35rem 1rem; padding-top: 0.5rem; } .tp-legend-item { display: flex; align-items: center; gap: 0.45rem; font-size: 0.8rem; color: var(--lp-muted); } /* Interactive filter variant */ button.tp-legend-item--filter { background: none; font: inherit; color: inherit; cursor: pointer; } .tp-legend-item--filter { cursor: pointer; user-select: none; padding: 0.18rem 0.45rem; border-radius: 6px; border: 1px solid transparent; transition: background 0.12s, opacity 0.15s, border-color 0.15s; } @media (hover: hover) { .tp-legend-item--filter:hover { background: var(--lp-hover-bg); border-color: var(--lp-border); } } .tp-legend-item--off { opacity: 0.35; } .tp-legend-item--off .tp-legend-box { filter: grayscale(0.9); } /* Canvas table — dimmed by legend filter */ .tp-table--legend-filtered { opacity: 0.15; filter: grayscale(0.7); transition: opacity 0.2s, filter 0.2s; } @media (hover: hover) { .tp-table--legend-filtered.tp-table--clickable:hover { opacity: 0.35; filter: grayscale(0.4); } } .tp-legend-box { width: 1rem; height: 1rem; border-radius: 3px; border: 1.5px solid var(--lp-border); flex-shrink: 0; } .tp-legend-box--available { background: rgba(156,163,175,0.25); border-color: #9ca3af; } .tp-legend-box--seated { background: rgba(34,197,94,0.25); border-color: var(--res-seated); } .tp-legend-box--scheduled { background: rgba(59,130,246,0.20); border-color: var(--res-scheduled); } .tp-legend-box--starting-soon { background: rgba(234,179,8,0.20); border-color: var(--res-starting-soon); } .tp-legend-box--waiting { background: rgba(245,158,11,0.28); border-color: var(--res-waiting); } /* ═══ Global custom dropdown ═══════════════════════════════════════════════ Usage pattern:
[
] [
]
Scoped overrides (min-width, bg, z-index) go in component .razor.css. ═════════════════════════════════════════════════════════════════════════ */ .ui-select { position: relative; } .ui-select-trigger { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.55rem 0.875rem; background: var(--lp-bg-card2); border: 1px solid var(--lp-border); border-radius: 8px; color: var(--lp-text); font-size: 0.875rem; cursor: pointer; outline: none; transition: border-color 0.15s; text-align: left; box-sizing: border-box; /* stays clickable above a sibling backdrop (z: 10) */ position: relative; z-index: 12; } .ui-select-trigger:hover, .ui-select--open .ui-select-trigger { border-color: var(--lp-orange); } .ui-select-trigger:focus-visible { outline: 2px solid var(--lp-orange); outline-offset: 2px; } .ui-select-trigger:disabled { opacity: 0.6; cursor: not-allowed; } .ui-select-value { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ui-select-placeholder { color: var(--lp-muted); } .ui-select-chevron { width: 0.75rem; height: 0.75rem; color: var(--lp-muted); fill: currentColor; flex-shrink: 0; transition: transform 0.18s ease; } .ui-select--open .ui-select-chevron { transform: rotate(180deg); } /* transparent layer behind open dropdown — closes on outside click */ .ui-select-backdrop { position: fixed; inset: 0; z-index: 10; } .ui-select-dropdown { position: absolute; top: calc(100% + 4px); left: 0; right: 0; background: var(--lp-bg-card2); border: 1px solid var(--lp-border); border-radius: 8px; overflow: hidden; /* must exceed trigger z-index (12) */ z-index: 50; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18); min-width: 100px; width: max-content; } .ui-select-option { width: 100%; display: flex; align-items: center; gap: 0.6rem; padding: 0.65rem 0.875rem; background: none; border: none; color: var(--lp-text); font-size: 0.875rem; cursor: pointer; text-align: left; outline: none; transition: background 0.12s; white-space: nowrap; } .ui-select-option:hover, .ui-select-option:focus-visible { background: rgba(245, 158, 11, 0.1); color: var(--lp-orange); outline: none; } .ui-select-option--selected { color: var(--lp-orange); } .option-check { width: 0.85rem; height: 0.85rem; flex-shrink: 0; fill: currentColor; } span.option-check { display: inline-block; } .tp-legend-box--reserved { background: rgba(245,158,11,0.25); border-color: var(--lp-orange); } .tp-legend-box--late { background: rgba(245,158,11,0.28); border-color: var(--res-waiting); box-shadow: 0 0 0 2px rgba(245,158,11,0.35); } .tp-legend-box--occupied { background: rgba(239, 68, 68,0.25); border-color: var(--res-noshow); } .tp-legend-box--noshow { background: rgba(239, 68, 68,0.08); border-color: var(--res-noshow); } .tp-legend-box--unavailable { background: rgba(55,65,81,0.12); border-color: rgba(55,65,81,0.7); } /* ── Reservations module – shared layout (Reservations + ReservationsPreview) */ .res-page { display: flex; flex-direction: column; gap: 1rem; } .res-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } /* Body (sidebar + main) */ .res-body { display: flex; gap: 1rem; flex: 1; min-height: 0; align-items: flex-start; } /* Sidebar */ .res-sidebar { width: 272px; flex-shrink: 0; background: var(--lp-bg-card); border: 1px solid var(--lp-border); border-radius: var(--lp-radius); display: flex; flex-direction: column; overflow: hidden; max-height: calc(100vh - 14rem); } .res-sidebar-header { display: flex; align-items: center; justify-content: space-between; padding: 0.875rem 1rem; border-bottom: 1px solid var(--lp-border); flex-shrink: 0; } .res-sidebar-title { font-size: 0.85rem; font-weight: 700; color: var(--lp-text); text-transform: uppercase; letter-spacing: 0.05em; } .res-sidebar-date { font-size: 0.8rem; color: var(--lp-orange); font-weight: 600; } .res-sidebar-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.6rem; padding: 2.5rem 1rem; color: var(--lp-muted); font-size: 0.82rem; text-align: center; } .res-sidebar-empty svg { width: 2rem; height: 2rem; opacity: 0.3; flex-shrink: 0; } .res-sidebar-list { overflow-y: auto; flex: 1; padding: 0.5rem; display: flex; flex-direction: column; gap: 0.4rem; } /* Reservation list item */ .res-item { position: relative; padding: 0.65rem 0.75rem; background: var(--lp-bg-card2); border: 1px solid var(--lp-border); border-radius: 8px; transition: border-color 0.12s; } @media (hover: hover) { .res-item:hover { background: var(--lp-hover-bg); } } /* Status-matched hover glow */ .res-item--scheduled:hover { box-shadow: 0 0 0 1px rgba(59,130,246,0.45), 0 0 8px 1px rgba(59,130,246,0.18); } @media (hover: hover) { .res-item--starting-soon:hover { box-shadow: 0 0 0 1px rgba(234,179,8,0.45), 0 0 8px 1px rgba(234,179,8,0.18); } } .res-item--waiting:hover { box-shadow: 0 0 0 1px rgba(245,158,11,0.45), 0 0 8px 1px rgba(245,158,11,0.18); } @media (hover: hover) { .res-item--seated:hover { box-shadow: 0 0 0 1px rgba(34,197,94,0.45), 0 0 8px 1px rgba(34,197,94,0.18); } } .res-item--noshow:hover { box-shadow: 0 0 0 1px rgba(239,68,68,0.45), 0 0 8px 1px rgba(239,68,68,0.18); } @media (hover: hover) { .res-item--completed:hover { box-shadow: 0 0 0 1px rgba(156,163,175,0.35); } } .res-item--cancelled:hover { box-shadow: 0 0 0 1px rgba(107,114,128,0.35); } .res-item-late-badge { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; border-radius: 50%; background: var(--res-waiting); color: #000; font-size: 0.68rem; font-weight: 900; line-height: 1; margin-left: 4px; flex-shrink: 0; } .res-item-time { display: flex; align-items: center; flex-wrap: wrap; gap: 0.2rem; font-size: 0.72rem; font-weight: 700; color: var(--lp-orange); margin-bottom: 0.2rem; } /* ── Inline reservation status badges (shared across Reservations + ReservationsPreview) */ .res-item-badge { display: inline-block; padding: 0 0.3rem; border-radius: 4px; font-size: 0.65rem; font-weight: 900; color: #fff; line-height: 1.5; flex-shrink: 0; } .res-item-badge--seated { background: var(--res-seated); } .res-item-badge--noshow { background: var(--res-danger); } .res-item-badge--waiting { background: var(--res-waiting); color: #1c1917; } .res-item-badge--starting-soon { background: var(--res-starting-soon); color: #1c1917; } .res-item-badge--cancelled { background: #6b7280; } .res-item-name { font-size: 0.85rem; font-weight: 600; color: var(--lp-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 1.5rem; } .res-item-meta { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.2rem; } .res-item-table, .res-item-phone { font-size: 0.72rem; color: var(--lp-muted); } .res-item-table { font-weight: 600; } .res-item-notes { font-size: 0.72rem; color: var(--lp-muted); font-style: italic; margin-top: 0.2rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .res-item-prepayment { display: flex; align-items: center; gap: 0.25rem; font-size: 0.72rem; font-weight: 600; color: #22c55e; margin-top: 0.15rem; } .res-item-actions { position: absolute; top: 0.5rem; right: 0.5rem; display: flex; gap: 2px; opacity: 0; transition: opacity 0.15s; } @media (hover: hover) { .res-item:hover .res-item-actions { opacity: 1; } } .res-item-edit, .res-item-delete { width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; background: none; border: none; border-radius: 4px; color: var(--lp-muted); cursor: pointer; transition: color 0.15s, background 0.12s; } .res-item-edit:hover { color: var(--lp-orange); background: rgba(245,158,11,0.1); } @media (hover: hover) { .res-item-delete:hover { color: var(--res-danger); background: rgba(239,68,68,0.1); } } .res-item-edit svg, .res-item-delete svg { width: 0.75rem; height: 0.75rem; } /* Main canvas area */ .res-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0; } /* Shared form inputs (dialogs across reservation pages) */ .field-group { display: flex; flex-direction: column; gap: 0.35rem; } .field-label { font-size: 0.78rem; font-weight: 600; color: var(--lp-muted); line-height: 1; } .field-required { color: #f87171; } /* ── Order item status icons ─────────────────────────────────────────────── */ .oi-status { width: 1rem; height: 1rem; flex-shrink: 0; align-self: center; } .oi-status--pending { color: #f59e0b; } .oi-status--inprogress { color: #3b82f6; } .oi-status--postponed { color: #a78bfa; } .oi-status--cancelled { color: #ef4444; } .oi-status--delivering { color: #14b8a6; } .oi-status--ready { color: #22c55e; } .oi-status--completed { color: #22c55e; } .oi-status--rejected { color: #f43f5e; } /* ── Toggle row (label + switch side-by-side) ────────────────────────────── */ .field-group--toggle { flex-direction: row; align-items: center; justify-content: space-between; padding-top: 0.25rem; } /* ── Toggle switch (global) ───────────────────────────────────────────────── */ .toggle-switch { display: inline-flex; align-items: center; gap: 0.5rem; cursor: pointer; user-select: none; flex-shrink: 0; } .toggle-switch input[type="checkbox"] { position: absolute; opacity: 0; width: 0; height: 0; } .toggle-track { position: relative; width: 2.25rem; height: 1.25rem; background: var(--lp-border); border-radius: 999px; transition: background 0.2s; flex-shrink: 0; } .toggle-switch input:checked ~ .toggle-track { background: var(--lp-orange); } .toggle-thumb { position: absolute; top: 2px; left: 2px; width: 1rem; height: 1rem; background: #fff; border-radius: 50%; transition: transform 0.2s; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); } .toggle-switch input:checked ~ .toggle-track .toggle-thumb { transform: translateX(1rem); } .toggle-switch input:disabled ~ .toggle-track, .toggle-switch--saving .toggle-track { opacity: 0.5; cursor: not-allowed; } .toggle-text { font-size: 0.875rem; color: var(--lp-text); min-width: 1.75rem; } .field-error { font-size: 0.75rem; color: #f87171; margin: 0; } .modal-input { width: 100%; padding: 0.48rem 0.7rem; background: var(--lp-bg-card2); border: 1px solid var(--lp-border); border-radius: 8px; color: var(--lp-text); font-size: 0.875rem; outline: none; transition: border-color 0.15s; box-sizing: border-box; } .modal-input::placeholder { color: var(--lp-muted); } .modal-input:focus { border-color: var(--lp-orange); } /* ─── Dashboard page layout (shared across all dashboard pages) ───────────── */ .dash-page { padding: 2rem 0 3rem; display: flex; flex-direction: column; gap: 1.25rem; container-type: inline-size; } @media (max-width: 700px) { .dash-page { padding-top: 1.25rem; padding-bottom: 2rem; } } .dash-header h2 { font-size: 1.5rem; font-weight: 700; color: var(--lp-text); margin-bottom: 0.25rem; } .dash-header p { font-size: 0.875rem; color: var(--lp-muted); margin-bottom: 0; } /* ═══ Reservation mobile tabs ════════════════════════════════════════════════ Shared by /reservations/reservating and /reservations/preview ═════════════════════════════════════════════════════════════════════════ */ .rp-mobile-tabs { display: none; } /* ═══ Reservation view toggle ═══════════════════════════════════════════════ Shared by /reservations/reservating and /reservations/preview ═════════════════════════════════════════════════════════════════════════ */ .res-view-toggle { display: inline-flex; border: 1px solid var(--lp-border); border-radius: 8px; overflow: hidden; flex-shrink: 0; } .res-view-btn { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.4rem 0.75rem; background: var(--lp-bg-card); border: none; border-right: 1px solid var(--lp-border); color: var(--lp-muted); font-size: 0.8125rem; font-weight: 500; line-height: 1; cursor: pointer; white-space: nowrap; transition: background 0.12s, color 0.12s; } .res-view-btn:last-child { border-right: none; } @media (hover: hover) { .res-view-btn:hover { background: var(--lp-hover-bg); color: var(--lp-text); } } .res-view-btn--active { background: var(--lp-orange); color: #000; font-weight: 600; } @media (hover: hover) { .res-view-btn--active:hover { filter: brightness(1.08); } } /* ═══ Reservation timeline (tl-*) ═══════════════════════════════════════════ Shared by /reservations/reservating and /reservations/preview ═════════════════════════════════════════════════════════════════════════ */ .tl-outer { flex: 1; min-height: 0; overflow: auto; background: var(--lp-bg-card); border: 1px solid var(--lp-border); border-radius: var(--lp-radius, 10px); margin: 0 1rem 1rem; cursor: grab; } .tl-outer .tl-bar, .tl-outer .tl-table-label { cursor: pointer; } .tl-content { display: flex; flex-direction: column; position: relative; } .tl-header { display: flex; position: sticky; top: 0; z-index: 10; background: var(--lp-bg-card); border-bottom: 2px solid var(--lp-border); height: 36px; } .tl-corner { width: 160px; min-width: 160px; flex-shrink: 0; border-right: 1px solid var(--lp-border); background: var(--lp-bg-card); position: sticky; left: 0; z-index: 11; } .tl-ruler { position: relative; flex-shrink: 0; height: 100%; } .tl-ruler-mark { position: absolute; top: 50%; transform: translateX(-50%) translateY(-50%); font-size: 0.72rem; font-weight: 600; color: var(--lp-muted); white-space: nowrap; user-select: none; pointer-events: none; } .tl-room-row, .tl-table-row { display: flex; border-bottom: 1px solid var(--lp-border); } .tl-table-row { background: var(--lp-bg-card); } .tl-room-row { background: var(--lp-bg-card2); border-top: 2px solid var(--lp-border); border-bottom: 1px solid var(--lp-border); } .tl-room-row:first-of-type { border-top: none; } @media (hover: hover) { .tl-table-row:hover { background: var(--lp-hover-bg); } } .tl-table-row--oos { opacity: 0.65; } .tl-label { width: 160px; min-width: 160px; flex-shrink: 0; display: flex; align-items: center; border-right: 1px solid var(--lp-border); background: inherit; position: sticky; left: 0; z-index: 5; } /* Extend label background into row border gaps so the now-line doesn't bleed through. Use explicit opaque colours (not `inherit`) so that the hover state (semi-transparent) cannot make them transparent and let the line through. Split into ::before (top gap) and ::after (bottom gap) so neither overlaps the label's own content area – the hover tint on the label is preserved. */ .tl-label::before, .tl-label::after { content: ''; position: absolute; left: 0; right: 0; pointer-events: none; } .tl-label::before { top: -2px; height: 2px; } /* room-row border-top (2 px) */ .tl-label::after { bottom: -1px; height: 1px; } /* table-row border-bottom (1 px) */ .tl-table-label::before, .tl-table-label::after { background: var(--lp-bg-card); } .tl-room-label::before, .tl-room-label::after { background: var(--lp-bg-card2); } .tl-room-label { gap: 0.4rem; padding: 0.4rem 0.75rem; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--lp-text); min-height: 34px; } .tl-table-label { flex-direction: column; align-items: flex-start; justify-content: center; gap: 0.1rem; padding: 0.4rem 0.75rem; min-height: 44px; cursor: pointer; background: var(--lp-bg-card); /* explicit opaque bg so hover/selected state can't make it transparent */ } .tl-table-name { font-size: 0.8rem; font-weight: 600; color: var(--lp-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 128px; } .tl-table-guests { display: flex; align-items: center; gap: 0.2rem; font-size: 0.68rem; color: var(--lp-muted); } .tl-oos-badge { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.04em; color: var(--res-danger); background: rgba(239,68,68,0.12); border: 1px solid rgba(239,68,68,0.35); border-radius: 4px; padding: 0 4px; line-height: 1.6; margin-top: 1px; } .tl-track { position: relative; flex-shrink: 0; min-height: 44px; } .tl-room-row .tl-track { min-height: 34px; } .tl-track--oos { background-image: repeating-linear-gradient( -45deg, transparent, transparent 6px, rgba(239,68,68,0.07) 6px, rgba(239,68,68,0.07) 12px ); } .tl-grid-line { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--lp-border); pointer-events: none; } .tl-bar { position: absolute; top: 5px; bottom: 5px; border-radius: 5px; background: var(--tl-bar-color, var(--res-scheduled)); border: none; cursor: pointer; overflow: hidden; padding: 0 6px; display: flex; align-items: center; gap: 0.3rem; transition: filter 0.12s, opacity 0.12s; z-index: 1; white-space: nowrap; } @media (hover: hover) { .tl-bar:hover { filter: brightness(1.15); z-index: 2; } } .tl-bar--dimmed { opacity: 0.25; } .tl-bar-name { font-size: 0.72rem; font-weight: 600; color: #fff; overflow: hidden; text-overflow: ellipsis; flex-shrink: 1; min-width: 0; } .tl-bar-time { font-size: 0.65rem; color: rgba(255,255,255,0.8); flex-shrink: 0; } .tl-now-line { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--lp-orange); z-index: 3; pointer-events: none; transform: translateX(-50%); } .tl-now-line::before { content: ''; position: absolute; top: 36px; left: 50%; transform: translate(-50%, -50%); width: 8px; height: 8px; border-radius: 50%; background: var(--lp-orange); box-shadow: 0 0 0 3px rgba(245,158,11,0.25); } /* ═══ Reservation mobile layout (≤1024px — phones + tablets/iPad) ═══════════ Shared by /reservations/reservating and /reservations/preview ═════════════════════════════════════════════════════════════════════════ */ @media (max-width: 1024px) { /* Mobile tab bar */ .rp-mobile-tabs { display: flex; border: 1px solid var(--lp-border); border-radius: 8px; overflow: hidden; flex-shrink: 0; } .rp-mobile-tab { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 0.3rem; padding: 0.5rem 0.375rem; background: var(--lp-bg-card); border: none; border-right: 1px solid var(--lp-border); color: var(--lp-muted); font-size: 0.78rem; font-weight: 500; cursor: pointer; white-space: nowrap; transition: background 0.12s, color 0.12s; line-height: 1; } .rp-mobile-tab:last-child { border-right: none; } .rp-mobile-tab--active { background: var(--lp-orange); color: #000; font-weight: 600; } /* Hide panel not active on mobile */ .rp-m-hidden { display: none !important; } /* Desktop view toggle is replaced by mobile tabs */ .res-view-toggle { display: none !important; } /* Stack sidebar + map vertically, stretch children to full width */ .res-body { flex-direction: column; align-items: stretch; } /* Sidebar: full width, natural height */ .res-sidebar { width: 100%; max-height: none; } /* Timeline: remove horizontal page margins */ .tl-outer { margin: 0 0 1rem; } } /* ── Unified reservation info popup body ─────────────────────────────────── */ .res-info-body { display: flex; flex-direction: column; gap: 0.5rem; } .res-info-status-row { margin-bottom: 0.125rem; } .res-info-row { display: flex; align-items: baseline; gap: 0.5rem; font-size: 0.85rem; color: var(--lp-text); } .res-info-label { font-size: 0.74rem; color: var(--lp-muted); flex-shrink: 0; min-width: 52px; } .res-info-value { flex: 1; color: var(--lp-text); } .res-info-prepaid { color: var(--res-seated); font-weight: 500; } /* ── Unified reservation action buttons ──────────────────────────────────── */ .res-info-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; } .res-action-btn { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.45rem 0.85rem; border-radius: 7px; border: 1px solid; font-size: 0.8rem; font-weight: 500; cursor: pointer; transition: filter 0.12s, opacity 0.12s; white-space: nowrap; line-height: 1.3; background: none; } @media (hover: hover) { .res-action-btn:hover { filter: brightness(1.15); } } .res-action-btn:active { filter: brightness(0.9); } /* Running Late — amber outline */ .res-action-btn--late { border-color: var(--res-waiting); color: var(--res-waiting); } /* Currently late — amber filled (will clear on click) */ .res-action-btn--late-on { background: rgba(245,158,11,0.15); border-color: var(--res-waiting); color: var(--res-waiting); font-weight: 600; } /* No Show — gray outline */ .res-action-btn--noshow { border-color: var(--res-noshow); color: var(--res-noshow); } /* No Show active — gray filled */ .res-action-btn--noshow-on { background: rgba(107,114,128,0.15); border-color: var(--res-noshow); color: var(--res-noshow); font-weight: 600; } /* Mark Arrived — green */ .res-action-btn--seat { background: rgba(34,197,94,0.1); border-color: var(--res-seated); color: var(--res-seated); } /* Release / Un-seat — gray */ .res-action-btn--release { background: rgba(156,163,175,0.1); border-color: #9ca3af; color: #9ca3af; } /* Edit — orange */ .res-action-btn--edit { background: rgba(245,158,11,0.1); border-color: var(--lp-orange); color: var(--lp-orange); } /* Cancel / Delete — red */ .res-action-btn--danger { background: rgba(239,68,68,0.08); border-color: var(--res-danger); color: var(--res-danger); } /* ═══════════════════════════════════════════════════════════════════════════ SHARED OFFER ITEM ROW (CatalogCardsPanel + CatalogPreview list view) ═══════════════════════════════════════════════════════════════════════════ */ .item-row { display: flex; align-items: center; gap: 0.875rem; padding: 0.625rem 1.25rem; border: none; border-bottom: 1px solid var(--lp-border); background: none; color: var(--lp-text); cursor: pointer; text-align: left; width: 100%; transition: background 0.12s; outline: none; flex-shrink: 0; } .item-row:last-child { border-bottom: none; } @media (hover: hover) { .item-row:hover { background: var(--lp-hover-bg); } } @keyframes item-row-tap { 0% { background: rgba(245, 158, 11, 0.18); } 100% { background: transparent; } } .item-row--tapped { animation: item-row-tap 0.35s ease-out forwards; pointer-events: none; } .item-row:focus-visible { background: var(--lp-hover-bg); outline: 2px solid var(--lp-orange); outline-offset: -2px; } /* ── Thumbnail ───────────────────────────────────────────────────────────── */ .item-row__img-wrap { position: relative; flex-shrink: 0; width: 48px; height: 48px; } .item-row__fav-badge { position: absolute; bottom: -3px; right: -3px; width: 1rem; height: 1rem; background: var(--lp-orange); border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 3px rgba(0,0,0,0.3); } .item-row__fav-badge svg { width: 0.45rem; height: 0.45rem; fill: #000; } .item-row__vegan-badge { position: absolute; top: -3px; right: -3px; width: 1rem; height: 1rem; background: #16a34a; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 3px rgba(0,0,0,0.3); } .item-row__vegan-badge svg { width: 0.6rem; height: 0.6rem; stroke: #fff; fill: none; } .item-row__img { width: 48px; height: 48px; border-radius: 8px; flex-shrink: 0; background: var(--lp-bg-card2); border: 1px solid var(--lp-border); overflow: hidden; display: flex; align-items: center; justify-content: center; } .item-row__img img { width: 100%; height: 100%; object-fit: cover; } .item-row__no-img { color: var(--lp-muted); opacity: 0.3; } .item-row__no-img svg { width: 1.25rem; height: 1.25rem; fill: currentColor; } /* ── Text info ───────────────────────────────────────────────────────────── */ .item-row__info { flex: 1; display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; } .item-row__name { font-size: 0.875rem; font-weight: 600; color: var(--lp-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .item-row__desc { font-size: 0.75rem; color: var(--lp-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .item-row__allergens { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.1rem; } .item-row__allergen { display: inline-flex; align-items: center; padding: 0.05rem 0.35rem; border-radius: 9999px; border: 1px solid var(--lp-border); font-size: 0.65rem; font-weight: 600; color: var(--lp-muted); white-space: nowrap; } /* ── Chips (var / mod badges) ────────────────────────────────────────────── */ .item-row__chips { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.15rem; } .item-row__chip { display: inline-flex; align-items: center; padding: 0.05rem 0.35rem; border-radius: 9999px; font-size: 0.65rem; font-weight: 600; white-space: nowrap; } .item-row__chip--var { background: var(--lp-btn-bg); border: 1px solid var(--lp-btn-border); color: var(--lp-muted); } .item-row__chip--mod { background: rgba(6,182,212,0.1); border: 1px solid rgba(6,182,212,0.35); color: #06b6d4; } /* ── Measurement column ──────────────────────────────────────────────────── */ .item-row__measure { font-size: 0.75rem; color: var(--lp-muted); flex-shrink: 0; white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; } /* ── Price ───────────────────────────────────────────────────────────────── */ .item-row__price { font-size: 0.9rem; font-weight: 700; color: var(--lp-text); flex-shrink: 0; font-variant-numeric: tabular-nums; white-space: nowrap; } /* ── Tree-view modifiers (CatalogPreview list view) ──────────────────────── */ .item-row--tree { padding-left: 6.2rem; border-bottom: none; border-top: 1px solid var(--lp-border); } .item-row--tree-sub { padding-left: 8.3rem; padding-top: 0.5rem; padding-bottom: 0.5rem; border-bottom: none; border-top: 1px solid var(--lp-border); background: var(--lp-bg-card2); } @media (hover: hover) { .item-row--tree-sub:hover { background: color-mix(in srgb, var(--lp-bg-card2) 80%, var(--lp-hover-bg-strong)); } } @media (max-width: 575.98px) { /* All tree rows use the same min-width so every row in the scroll container is identical in width — no gaps when scrolled. */ .item-row--tree, .item-row--tree-sub { min-width: 600px; background: var(--lp-bg-card); } @media (hover: hover) { .item-row--tree:hover { background: var(--lp-hover-bg); } } @media (hover: hover) { .item-row--tree-sub:hover { background: color-mix(in srgb, var(--lp-bg-card) 80%, var(--lp-hover-bg-strong)); } } /* Guarantee the title/description column always has readable width. */ .item-row--tree .item-row__info, .item-row--tree-sub .item-row__info { min-width: 200px; } } /* ── Empty state card wrapper (bordered container, same as .offers-card) ─── */ .empty-state-wrap { background: var(--lp-bg-card); border: 1px solid var(--lp-border); border-radius: 12px; } /* ── Shared empty state (icon + title + desc + optional CTA) ─────────────── */ .empty-state { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; padding: 4rem 1.5rem; text-align: center; } .empty-state__icon { width: 2.5rem; height: 2.5rem; color: var(--lp-muted); opacity: 0.45; margin-bottom: 0.25rem; } .empty-state__title { font-size: 0.95rem; font-weight: 600; color: var(--lp-text); margin: 0; } .empty-state__desc { font-size: 0.825rem; color: var(--lp-muted); margin: 0; } .empty-state__btn { display: inline-block; margin-top: 0.75rem; padding: 0.5rem 1.25rem; background: var(--lp-orange); color: #000; font-size: 0.875rem; font-weight: 600; border-radius: 8px; text-decoration: none; transition: opacity 0.15s; } @media (hover: hover) { .empty-state__btn:hover { opacity: 0.85; color: #000; } } /* ── Dialog mobile sizing ────────────────────────────────────────────────── */ @media (max-width: 480px) { /* Tighter outer margins on small screens */ dialog { width: calc(100% - 1rem) !important; max-height: calc(100dvh - 1rem) !important; border-radius: 10px !important; } /* Reduce inner horizontal padding so content has more room */ .modal-header { padding: 0.875rem 1rem 0.75rem; } .modal-body { padding: 0.875rem 1rem; } .modal-footer { padding: 0.75rem 1rem; } }