:root { --bg: #0d0d0d; --bg2: #161616; --bg3: #1f1f1f; --bg4: #2a2a2a; --border: #333; --text: #f0f0f0; --text2: #aaa; --text3: #666; --accent: #3b82f6; --accent-hover: #2563eb; --green: #22c55e; --red: #ef4444; --yellow: #eab308; --radius: 10px; --radius-sm: 6px; } /* Light theme — toggled via data-theme="light" on for sunlight readability. Only overrides the shared variables; the customer display has its own (always light) palette and is intentionally left untouched. */ [data-theme="light"] { --bg: #f1f5f9; --bg2: #ffffff; --bg3: #eef2f6; --bg4: #e2e8f0; --border: #cbd5e1; --text: #0f172a; --text2: #475569; --text3: #94a3b8; } [data-theme="light"] .center-page { background: radial-gradient(circle at 50% 0%, #ffffff, var(--bg) 60%); } * { box-sizing: border-box; margin: 0; padding: 0; } html, body { height: 100%; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: var(--bg); color: var(--text); font-size: 14px; } a { color: var(--accent); text-decoration: none; } .center-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 50% 0%, #181818, var(--bg) 60%); padding: 20px; } .error-banner { background: rgba(239,68,68,0.15); border: 1px solid rgba(239,68,68,0.4); color: #fca5a5; padding: 10px 14px; border-radius: var(--radius-sm); margin-top: 12px; font-size: 13px; } .success-banner { background: rgba(34,197,94,0.15); border: 1px solid rgba(34,197,94,0.4); color: #86efac; padding: 10px 14px; border-radius: var(--radius-sm); margin-top: 12px; font-size: 13px; } /* Buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 18px; border-radius: var(--radius-sm); border: none; cursor: pointer; font-size: 14px; font-weight: 500; transition: all 0.15s; white-space: nowrap; } .btn:disabled { opacity: 0.4; cursor: not-allowed; } .btn-primary { background: var(--accent); color: #fff; } .btn-primary:hover:not(:disabled) { background: var(--accent-hover); } .btn-secondary { background: var(--bg4); color: var(--text); border: 1px solid var(--border); } .btn-secondary:hover { background: var(--bg3); } .btn-ghost { background: transparent; color: var(--text2); border: 1px solid var(--border); } .btn-ghost:hover { background: var(--bg3); color: var(--text); } .btn-danger { background: var(--red); color: #fff; } .btn-danger:hover { background: #dc2626; } .btn-danger-ghost { background: transparent; color: var(--red); border: 1px solid rgba(239,68,68,0.4); } .btn-danger-ghost:hover { background: rgba(239,68,68,0.1); } .btn-full { width: 100%; } .btn-sm { padding: 6px 12px; font-size: 12px; } /* Inline Fluent icons (see js/icons.js) */ .icon { width: 1.1em; height: 1.1em; display: inline-block; vertical-align: -0.15em; flex-shrink: 0; } .btn .icon { width: 1.15em; height: 1.15em; } [data-icon] { display: inline-flex; align-items: center; } .nav-icon, .nav-icon .icon { width: 18px; height: 18px; } /* Forms */ .form-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; } .form-group label { font-size: 12px; font-weight: 600; color: var(--text2); text-transform: uppercase; letter-spacing: 0.05em; } .form-row { display: flex; gap: 12px; } .form-row .form-group { flex: 1; } .form-group.flex-2 { flex: 2; } input, select, textarea { background: var(--bg3); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); padding: 10px 12px; font-size: 14px; width: 100%; outline: none; transition: border-color 0.15s; } input:focus, select:focus, textarea:focus { border-color: var(--accent); } input::placeholder, textarea::placeholder { color: var(--text3); } select option { background: var(--bg3); } textarea { resize: vertical; } /* Spinner */ .spinner { width: 36px; height: 36px; border: 3px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.7s linear infinite; margin: 0 auto 16px; } @keyframes spin { to { transform: rotate(360deg); } } .loading-screen { text-align: center; color: var(--text2); } /* Setup */ .setup-card { background: var(--bg2); border: 1px solid var(--border); border-radius: 16px; padding: 40px; width: 100%; max-width: 520px; } .setup-header { text-align: center; margin-bottom: 32px; } .setup-header h1 { font-size: 24px; margin-bottom: 6px; } .setup-header p { color: var(--text2); } .step { display: none; } .step.active { display: block; } .step h2 { font-size: 18px; margin-bottom: 20px; } .step-desc { color: var(--text2); font-size: 13px; margin-bottom: 16px; } .form-actions { display: flex; gap: 10px; justify-content: space-between; margin-top: 20px; } #step-success { text-align: center; } #step-success h2 { margin-bottom: 10px; } #step-success p { color: var(--text2); margin-bottom: 24px; } /* Login */ .login-card { background: var(--bg2); border: 1px solid var(--border); border-radius: 16px; padding: 40px; width: 100%; max-width: 400px; } .login-header { text-align: center; margin-bottom: 28px; } .login-header h1 { font-size: 24px; font-weight: 700; } .login-sub { color: var(--text2); font-size: 13px; margin-top: 4px; } .login-footer { text-align: center; margin-top: 20px; } .link-muted { color: var(--text2); font-size: 13px; } .link-muted:hover { color: var(--text); } /* Mode select */ .mode-select-card { text-align: center; max-width: 560px; width: 100%; } .mode-select-card h1 { font-size: 26px; margin-bottom: 8px; } .terminal-info { color: var(--text2); margin-bottom: 32px; } .mode-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 24px; } .mode-btn { background: var(--bg2); border: 2px solid var(--border); border-radius: 14px; padding: 36px 20px; cursor: pointer; color: var(--text); transition: all 0.2s; text-align: center; } .mode-btn:hover { border-color: var(--accent); background: var(--bg3); transform: translateY(-2px); } .mode-btn h3 { font-size: 17px; margin-bottom: 8px; } .mode-btn p { font-size: 12px; color: var(--text2); line-height: 1.5; } /* POS layout */ .pos-layout { display: grid; grid-template-columns: 1fr 380px; height: 100vh; overflow: hidden; background: var(--bg); } .pos-left { display: flex; flex-direction: column; overflow: hidden; border-right: 1px solid var(--border); } .pos-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--border); background: var(--bg2); gap: 12px; } .pos-header-left { display: flex; align-items: center; gap: 10px; } .pos-header-right { display: flex; gap: 8px; } .shop-name-pos { font-size: 16px; font-weight: 700; } .terminal-badge { background: var(--bg4); border: 1px solid var(--border); border-radius: 20px; padding: 3px 10px; font-size: 11px; color: var(--text2); } .category-tabs { display: flex; gap: 6px; padding: 10px 14px; background: var(--bg2); border-bottom: 1px solid var(--border); overflow-x: auto; flex-shrink: 0; } .cat-tab { padding: 6px 14px; border-radius: 20px; border: 1px solid var(--border); background: transparent; color: var(--text2); cursor: pointer; font-size: 13px; white-space: nowrap; transition: all 0.15s; } .cat-tab:hover { background: var(--bg3); color: var(--text); } .cat-tab.active { background: var(--accent); border-color: var(--accent); color: #fff; } .product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; padding: 14px; overflow-y: auto; flex: 1; /* Pack rows at the top at their natural height — otherwise the single grid row stretches to fill the tall column and the tiles get pulled down. */ align-content: start; } .product-card { align-self: start; } .product-card { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; cursor: pointer; transition: all 0.15s; display: flex; flex-direction: column; } .product-card:hover { border-color: var(--accent); transform: translateY(-1px); } /* 16:9 thumbnail keeps the product tiles short instead of tall/square */ .product-card-img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--bg3); } .product-card-img-placeholder { width: 100%; aspect-ratio: 16 / 9; background: linear-gradient(135deg, var(--bg3), var(--bg4)); display: flex; align-items: center; justify-content: center; font-size: 34px; font-weight: 700; color: var(--text3); } .product-card-body { padding: 10px; flex: 1; display: flex; flex-direction: column; gap: 4px; } .product-card-name { font-size: 13px; font-weight: 600; line-height: 1.3; } .product-card-price { font-size: 14px; font-weight: 700; color: var(--accent); } .product-card-variants { font-size: 11px; color: var(--text3); } .loading-products { color: var(--text2); text-align: center; padding: 40px; grid-column: 1/-1; } /* POS cart */ .pos-right { display: flex; flex-direction: column; background: var(--bg2); overflow: hidden; } .cart-customer { padding: 12px; border-bottom: 1px solid var(--border); } .cart-items { flex: 1; overflow-y: auto; padding: 8px; } .cart-empty { color: var(--text3); text-align: center; padding: 40px 20px; font-size: 13px; } .cart-item { display: flex; align-items: flex-start; gap: 10px; padding: 10px 8px; border-bottom: 1px solid var(--border); } .cart-item:last-child { border-bottom: none; } .cart-item-info { flex: 1; } .cart-item-name { font-size: 13px; font-weight: 600; margin-bottom: 2px; } .cart-item-variant { font-size: 11px; color: var(--text2); } .cart-item-price { font-size: 13px; color: var(--text2); margin-top: 2px; } .cart-item-qty { display: flex; align-items: center; gap: 6px; } .qty-btn { width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--border); background: var(--bg4); color: var(--text); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 14px; line-height: 1; } .qty-btn:hover { background: var(--bg3); } .qty-num { font-size: 14px; font-weight: 600; min-width: 20px; text-align: center; } .cart-item-total { font-size: 14px; font-weight: 700; min-width: 64px; text-align: right; } .cart-footer { border-top: 1px solid var(--border); padding: 14px; display: flex; flex-direction: column; gap: 10px; } .cart-totals { display: flex; flex-direction: column; gap: 6px; } .total-row { display: flex; justify-content: space-between; font-size: 14px; color: var(--text2); } .total-row--bold { font-size: 18px; font-weight: 700; color: var(--text); margin-top: 4px; } .total-row--discount span:last-child { color: #4ade80; } .cart-actions { display: flex; flex-direction: column; gap: 8px; } .cart-actions .btn { width: 100%; } .btn-pay { padding: 16px; font-size: 17px; font-weight: 700; border-radius: var(--radius); } .btn-clear { padding: 9px; font-size: 13px; } .btn-has-discount { background: var(--green); color: #052e16; border-color: var(--green); } /* Modal */ .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.7); display: flex; align-items: center; justify-content: center; z-index: 100; backdrop-filter: blur(4px); } .modal { background: var(--bg2); border: 1px solid var(--border); border-radius: 14px; padding: 28px; width: 100%; max-width: 440px; max-height: 90vh; overflow-y: auto; } .modal-large { max-width: 640px; } /* Custom confirm/alert dialog (replaces native browser popups) */ .ui-dialog { max-width: 380px; } .ui-dialog-title { margin-bottom: 10px; font-size: 18px; font-weight: 700; color: var(--text); } .ui-dialog-msg { color: var(--text2); font-size: 14px; line-height: 1.5; } .ui-dialog-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 22px; } .modal h2, .modal h3 { margin-bottom: 18px; font-size: 18px; } .modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; } .variant-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; margin-bottom: 16px; } .variant-btn { background: var(--bg3); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 10px; cursor: pointer; color: var(--text); text-align: center; transition: all 0.15s; } .variant-btn:hover { border-color: var(--accent); background: var(--bg4); } .variant-btn-name { font-size: 14px; font-weight: 600; } .variant-btn-price { font-size: 12px; color: var(--text2); margin-top: 4px; } /* ============ CUSTOMER DISPLAY (LIGHT / MODERN) ============ */ .customer-layout { height: 100vh; background: linear-gradient(180deg, #ffffff 0%, #f1f5f9 100%); color: #0f172a; overflow: hidden; position: relative; } /* Idle */ .customer-idle { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; transition: opacity 0.5s; } .idle-inner { text-align: center; position: relative; padding: 40px; } /* Standby image (e.g. price list) shown full-screen when configured. */ .customer-idle-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #fff; } /* Gentle fade-in each time the screen returns to standby (toggled from JS). */ .customer-idle.is-fading-in { animation: idleFadeIn 0.8s ease both; } @keyframes idleFadeIn { from { opacity: 0; } to { opacity: 1; } } .customer-logo-mark { margin: 0 auto 36px; display: flex; align-items: center; justify-content: center; } .customer-logo-mark img { max-width: 200px; max-height: 96px; object-fit: contain; } /* No logo image set -> show nothing (no placeholder circle) */ .customer-logo-mark:not(.has-image) { display: none; } @keyframes idleRingSpin { to { transform: rotate(360deg); } } .customer-idle h1 { font-size: 64px; font-weight: 800; margin-bottom: 12px; letter-spacing: -0.03em; color: #0f172a; } .customer-shop { font-size: 22px; font-weight: 600; color: #3b82f6; margin-bottom: 8px; } .customer-tagline { font-size: 19px; color: #94a3b8; } .idle-pulse { width: 64px; height: 5px; margin: 40px auto 0; border-radius: 5px; background: linear-gradient(90deg, transparent, #3b82f6, transparent); animation: pulseBar 2s ease-in-out infinite; } @keyframes pulseBar { 0%,100% { opacity: 0.25; transform: scaleX(0.6); } 50% { opacity: 1; transform: scaleX(1); } } /* Cart */ .customer-cart { position: absolute; inset: 0; display: flex; flex-direction: column; } .customer-cart-header { display: flex; justify-content: space-between; align-items: center; padding: 28px 44px; border-bottom: 1px solid #e2e8f0; background: #fff; } .cc-header-left { display: flex; flex-direction: column; gap: 4px; } .cart-shop-name { font-size: 14px; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.12em; font-weight: 600; } .cart-customer-name { font-size: 28px; font-weight: 700; color: #0f172a; } .customer-items { flex: 1; overflow-y: auto; padding: 20px 44px; } .customer-item { display: flex; align-items: center; padding: 18px 20px; gap: 20px; background: #fff; border: 1px solid #e8edf3; border-radius: 16px; margin-bottom: 12px; box-shadow: 0 1px 3px rgba(15,23,42,0.04); animation: itemIn 0.3s ease; } @keyframes itemIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .customer-item-qty { background: linear-gradient(135deg, #eff6ff, #e0e7ff); border-radius: 14px; min-width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 800; flex-shrink: 0; color: #3b82f6; } .customer-item-info { flex: 1; } .customer-item-name { font-size: 22px; font-weight: 600; color: #0f172a; } .customer-item-variant { font-size: 14px; color: #94a3b8; margin-top: 3px; } /* Base price + surcharge (deposit) breakdown on a cart line */ .customer-item-breakdown { display: flex; flex-direction: column; margin-top: 3px; font-size: 15px; line-height: 1.35; } .customer-item-breakdown span { color: #64748b; } .customer-item-breakdown .ci-deposit { color: #2563eb; font-weight: 600; } .customer-item-total { font-size: 24px; font-weight: 700; color: #0f172a; } .customer-total-bar { display: flex; justify-content: space-between; align-items: center; padding: 28px 44px; background: linear-gradient(135deg, #1e293b, #0f172a); color: #fff; } .ctb-label { display: flex; flex-direction: column; gap: 4px; } .ctb-label > span:first-child { font-size: 22px; font-weight: 700; } .ctb-count { font-size: 14px; color: #94a3b8; } #customerTotal { color: #fff; font-size: 48px; font-weight: 800; letter-spacing: -0.02em; } /* Big subtotal overlay */ .subtotal-overlay { position: fixed; inset: 0; background: linear-gradient(180deg, #ffffff, #eff6ff); display: flex; align-items: center; justify-content: center; z-index: 50; animation: fadeIn 0.35s ease; } @keyframes fadeIn { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } } .subtotal-content { text-align: center; } .subtotal-label { font-size: 26px; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.2em; margin-bottom: 20px; font-weight: 600; } .subtotal-amount { font-size: 150px; font-weight: 900; color: #0f172a; line-height: 1; margin-bottom: 20px; letter-spacing: -0.03em; } .subtotal-items-count { font-size: 20px; color: #94a3b8; } /* Cash payment breakdown under the big amount (given + change) */ .subtotal-pay { margin: 36px auto 0; max-width: 520px; border-top: 2px solid #e2e8f0; padding-top: 24px; } .subtotal-pay-row { display: flex; align-items: baseline; justify-content: space-between; gap: 32px; padding: 6px 0; } .subtotal-pay-label { font-size: 30px; color: #64748b; font-weight: 600; } .subtotal-pay-value { font-size: 38px; color: #0f172a; font-weight: 800; letter-spacing: -0.02em; } .subtotal-pay-row--change .subtotal-pay-label { color: #16a34a; } .subtotal-pay-row--change .subtotal-pay-value { color: #16a34a; font-size: 48px; } /* Checkout complete */ .checkout-complete { position: fixed; inset: 0; background: linear-gradient(180deg, #ffffff, #ecfdf5); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; z-index: 60; animation: fadeIn 0.4s ease; } .checkout-check { width: 120px; height: 120px; margin-bottom: 28px; } .checkout-check svg { width: 100%; height: 100%; } .checkout-check circle { stroke: #22c55e; stroke-width: 3; stroke-dasharray: 151; stroke-dashoffset: 151; animation: drawCircle 0.6s ease forwards; } .checkout-check path { stroke: #22c55e; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 48; stroke-dashoffset: 48; animation: drawCheck 0.4s 0.5s ease forwards; } @keyframes drawCircle { to { stroke-dashoffset: 0; } } @keyframes drawCheck { to { stroke-dashoffset: 0; } } .checkout-complete h1 { font-size: 60px; font-weight: 800; margin-bottom: 12px; color: #0f172a; } .checkout-complete p { font-size: 20px; color: #64748b; } .checkout-change { display: flex; align-items: baseline; gap: 16px; margin-top: 32px; padding: 16px 32px; border-radius: 18px; background: #dcfce7; } .checkout-change-label { font-size: 26px; color: #16a34a; font-weight: 600; } .checkout-change-value { font-size: 44px; color: #15803d; font-weight: 800; letter-spacing: -0.02em; } /* Cancelled (full void) screen — red cross variant of the checkout screen */ .checkout-cancelled { background: linear-gradient(180deg, #ffffff, #fef2f2); } .checkout-cancelled h1 { color: #dc2626; } .checkout-cross circle { stroke: #ef4444; } .checkout-cross path { stroke: #ef4444; stroke-dasharray: 48; stroke-dashoffset: 48; animation: drawCheck 0.4s 0.45s ease forwards; } /* Confetti canvas — overlays the thank-you screen (z 60), never blocks taps */ .confetti-canvas { position: fixed; inset: 0; pointer-events: none; z-index: 70; } .disconnect-overlay { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; background: rgba(248, 250, 252, 0.97); backdrop-filter: blur(6px); } .disconnect-inner { text-align: center; padding: 40px; } .disconnect-spinner { width: 72px; height: 72px; margin: 0 auto 36px; border: 6px solid #e2e8f0; border-top-color: #ef4444; border-radius: 50%; animation: idleRingSpin 1s linear infinite; } .disconnect-overlay h1 { font-size: 48px; font-weight: 800; color: #0f172a; margin-bottom: 14px; letter-spacing: -0.02em; } .disconnect-overlay p { font-size: 22px; color: #94a3b8; } .customer-items::-webkit-scrollbar { width: 6px; } .customer-items::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; } /* ============ ADMIN ============ */ .admin-layout { display: grid; grid-template-columns: 220px 1fr; height: 100vh; overflow: hidden; } .admin-sidebar { background: var(--bg2); border-right: 1px solid var(--border); display: flex; flex-direction: column; overflow-y: auto; } .sidebar-header { padding: 22px 18px 18px; border-bottom: 1px solid var(--border); font-size: 15px; font-weight: 700; } .sidebar-nav { list-style: none; padding: 8px; flex: 1; } .sidebar-nav li { margin-bottom: 2px; } .nav-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--radius-sm); color: var(--text2); font-size: 13px; font-weight: 500; transition: all 0.15s; } .nav-item:hover { background: var(--bg3); color: var(--text); } .nav-item.active { background: rgba(59,130,246,0.15); color: var(--accent); } .sidebar-footer { padding: 14px 16px; border-top: 1px solid var(--border); display: flex; align-items: center; flex-wrap: wrap; gap: 8px; } .sidebar-footer #adminNameDisplay { flex-basis: 100%; } #adminNameDisplay { font-size: 12px; color: var(--text2); overflow: hidden; } .admin-main { overflow-y: auto; background: var(--bg); } .admin-section { display: none; padding: 28px 32px; } .admin-section.active { display: block; } .admin-section h1 { font-size: 22px; font-weight: 700; margin-bottom: 24px; } .section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; } .section-header h1 { margin-bottom: 0; } .stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 16px; margin-bottom: 32px; } .stat-card { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; text-align: center; } .analytics-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 28px 0 14px; } .analytics-head h2 { font-size: 18px; font-weight: 700; } .analytics-since { font-size: 13px; color: var(--text2); font-weight: 500; margin-left: 6px; } .analytics-actions { display: flex; gap: 8px; flex-wrap: wrap; } .stat-value { font-size: 32px; font-weight: 800; color: var(--accent); margin-bottom: 6px; } .stat-label { font-size: 12px; color: var(--text2); text-transform: uppercase; letter-spacing: 0.05em; } .data-table-wrapper { overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--border); } .data-table { width: 100%; border-collapse: collapse; } .data-table th { background: var(--bg2); padding: 12px 14px; text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text2); border-bottom: 1px solid var(--border); } .data-table td { padding: 12px 14px; border-bottom: 1px solid var(--border); font-size: 13px; vertical-align: middle; } .data-table tr:last-child td { border-bottom: none; } .data-table tr:hover td { background: var(--bg2); } .table-img { width: 40px; height: 40px; border-radius: 6px; object-fit: cover; background: var(--bg3); } .table-img-placeholder { width: 40px; height: 40px; border-radius: 6px; background: var(--bg3); display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 700; color: var(--text3); } .badge { display: inline-block; padding: 2px 8px; border-radius: 20px; font-size: 11px; font-weight: 600; } .badge-green { background: rgba(34,197,94,0.15); color: #4ade80; } .badge-red { background: rgba(239,68,68,0.15); color: #f87171; } .table-actions { display: flex; gap: 6px; } .terminals-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; } .terminal-card { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; } .terminal-card-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 8px; } .terminal-card-number { font-size: 24px; font-weight: 800; color: var(--accent); } .terminal-card-name { font-size: 14px; font-weight: 600; margin-bottom: 4px; } .terminal-card-footer { margin-top: 14px; display: flex; gap: 6px; } .settings-form { max-width: 480px; } .idle-image-preview { display: flex; align-items: flex-start; gap: 12px; margin-top: 12px; } .idle-image-preview img { max-width: 260px; max-height: 160px; object-fit: contain; background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 6px; } .variant-row { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; } .variant-row input { flex: 1; } .variant-row .btn { flex-shrink: 0; } ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; } /* School logo watermark — always on a white rounded block so the dark logo stays readable on any theme / in direct sunlight. */ .school-logo-watermark { position: fixed; bottom: 14px; right: 16px; z-index: 999; background: #fff; border-radius: 10px; padding: 6px 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.18); pointer-events: none; } .school-logo-watermark img { height: 28px; width: auto; display: block; } /* On the customer display the total sits bottom-right, so move the logo to the top-right corner to keep it off the price. */ .customer-layout .school-logo-watermark { top: 14px; bottom: auto; right: 16px; } .pos-school-logo { height: 22px; width: auto; vertical-align: middle; margin-left: 8px; background: #fff; border-radius: 6px; padding: 3px 6px; } /* Payment modal */ .payment-modal { max-width: 420px; } .pay-total-row { display: flex; justify-content: space-between; align-items: baseline; padding: 14px 16px; background: var(--bg3); border-radius: var(--radius); margin-bottom: 18px; font-size: 15px; color: var(--text2); } .pay-total-amount { font-size: 26px; font-weight: 800; color: var(--text); } .pay-label { display: block; font-size: 13px; color: var(--text2); margin-bottom: 6px; } .pay-input { width: 100%; padding: 16px; font-size: 28px; font-weight: 700; text-align: center; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); margin-bottom: 12px; } .pay-input:focus { outline: none; border-color: var(--accent); } .pay-quick { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; } .pay-quick-btn { flex: 1; min-width: 64px; padding: 10px 8px; cursor: pointer; background: var(--bg3); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); font-size: 13px; font-weight: 600; transition: all 0.15s; } .pay-quick-btn:hover { border-color: var(--accent); background: var(--bg4); } /* On-screen number keypad (12 keys: 0-9, clear-all, backspace) */ .pay-keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 16px; } .pay-key { padding: 16px 0; cursor: pointer; user-select: none; background: var(--bg3); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); font-size: 24px; font-weight: 700; transition: all 0.1s; } .pay-key:hover { border-color: var(--accent); background: var(--bg4); } .pay-key:active { transform: scale(0.96); } .pay-key--action { color: var(--text2); font-size: 20px; } .pay-change-box { display: flex; justify-content: space-between; align-items: baseline; padding: 18px 16px; border-radius: var(--radius); margin-bottom: 20px; background: var(--bg3); border: 1px solid var(--border); } .pay-change-box span:first-child { font-size: 15px; color: var(--text2); } .pay-change-amount { font-size: 32px; font-weight: 800; color: var(--text); } .pay-change-box.is-ok { background: rgba(34,197,94,0.12); border-color: rgba(34,197,94,0.4); } .pay-change-box.is-ok .pay-change-amount { color: #4ade80; } .pay-change-box.is-short { background: rgba(239,68,68,0.10); border-color: rgba(239,68,68,0.4); } .pay-change-box.is-short .pay-change-amount { color: #f87171; } .pay-actions { display: flex; gap: 10px; } .pay-actions .btn { flex: 1; padding: 14px; font-size: 16px; } /* Discount modal */ .discount-modal { max-width: 380px; } .disc-type-toggle { display: flex; gap: 8px; margin-bottom: 16px; } .disc-type-btn { flex: 1; padding: 12px; cursor: pointer; border-radius: var(--radius); background: var(--bg3); border: 1px solid var(--border); color: var(--text2); font-size: 14px; font-weight: 600; transition: all 0.15s; } .disc-type-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; } .disc-actions { display: flex; gap: 8px; margin-top: 18px; } .disc-actions .btn { flex: 1; padding: 13px; } /* Customer display discount line */ .customer-discount { display: flex; justify-content: space-between; align-items: center; padding: 0 44px 10px; font-size: 22px; font-weight: 600; color: #16a34a; } /* Responsive admin: on a narrow window/phone the fixed 220px sidebar left too little room for the content. Stack the sidebar into a top bar instead. */ @media (max-width: 768px) { .admin-layout { grid-template-columns: 1fr; height: auto; min-height: 100vh; overflow: visible; } .admin-sidebar { flex-direction: row; flex-wrap: wrap; align-items: center; height: auto; overflow: visible; border-right: none; border-bottom: 1px solid var(--border); } .sidebar-header { width: 100%; padding: 14px 16px 10px; } .sidebar-nav { display: flex; flex-wrap: wrap; gap: 4px; flex: 1 1 100%; padding: 6px 8px; } .sidebar-nav li { margin-bottom: 0; } .sidebar-footer { width: 100%; } .admin-main { overflow: visible; } .admin-section { padding: 16px; } .section-header { flex-wrap: wrap; gap: 10px; } } /* ============ APPLE-STYLE LIQUID GLASS ============ */ /* Frosted, translucent panels (backdrop-blur) for the operator UI (POS + admin) and all modals/dialogs. The customer display is left crisp for readability. */ :root { --glass-bg: rgba(255, 255, 255, 0.06); --glass-border: rgba(255, 255, 255, 0.14); --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.45); --glass-blur: 16px; } [data-theme="light"] { --glass-bg: rgba(255, 255, 255, 0.55); --glass-border: rgba(255, 255, 255, 0.75); --glass-shadow: 0 8px 30px rgba(15, 23, 42, 0.12); } /* Ambient colour wash so the frosted panels have something to blur */ .pos-layout, .admin-layout, .center-page { background: radial-gradient(42rem 42rem at 10% -12%, rgba(59, 130, 246, 0.20), transparent 60%), radial-gradient(38rem 38rem at 112% 8%, rgba(168, 85, 247, 0.16), transparent 60%), radial-gradient(42rem 42rem at 50% 120%, rgba(20, 184, 166, 0.14), transparent 60%), var(--bg); } .admin-main, .pos-left { background: transparent; } /* Frosted glass surfaces */ .modal, .product-card, .stat-card, .terminal-card, .pos-header, .pos-right, .admin-sidebar { background: var(--glass-bg); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(150%); backdrop-filter: blur(var(--glass-blur)) saturate(150%); border-color: var(--glass-border); } .modal, .product-card, .stat-card, .terminal-card { border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow); } .pos-header { border-bottom: 1px solid var(--glass-border); } .pos-right { border-left: 1px solid var(--glass-border); } .admin-sidebar { border-right: 1px solid var(--glass-border); } /* Subtle glass tint on inner controls (no extra blur -> cheap on a kiosk) */ .pay-key, .pay-quick-btn, .btn-secondary, .cat-tab, .qty-btn, .customer-input { background: var(--glass-bg); border-color: var(--glass-border); } /* A faint top highlight gives panels the Apple "lit edge" */ .modal::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(180deg, rgba(255, 255, 255, 0.10), transparent 40%); } .modal { position: relative; } .modal > * { position: relative; z-index: 1; }