/* The user's theme on the POS pages (login, home, tables, order, customer, E.O.D). The dashboard has its own rules in dash.css. */
html.ui-retro { --accent: #E4572E; --accent2: #17BEBB; --brand-bg: #2B2D42; --ui-font: "Courier New", monospace; --ui-r: 4px; }
html.ui-simple { --accent: #111827; --accent2: #4B5563; --brand-bg: #374151; --ui-r: 6px; }
html.ui-cyber { --accent: #00F0FF; --accent2: #FF007A; --brand-bg: #0B0E14; --ui-on: #0B0E14; --ui-font: "Cascadia Code", Consolas, monospace; --ui-r: 4px; --ui-glow: 0 0 12px rgba(0,240,255,.5); }
html.ui-organic { --accent: #C85A32; --accent2: #556B2F; --brand-bg: #3B2F27; --ui-font: Georgia, "Times New Roman", serif; --ui-r: 16px; --ui-glow: 0 6px 18px rgba(140,90,50,.22); }
html.ui-modern { --accent: #A07855; --accent2: #4A4036; --brand-bg: #4A4036; --ui-font: "Century Gothic", Futura, "Segoe UI", sans-serif; --ui-r: 8px; }
html.ui-cosmic { --accent: #818CF8; --accent2: #C084FC; --brand-bg: #060814; --ui-r: 20px; --ui-glow: 0 0 18px rgba(192,132,252,.45); }
html.ui-botanical { --accent: #10B981; --accent2: #134E4A; --brand-bg: #134E4A; --ui-r: 16px; --ui-glow: 0 6px 16px rgba(16,185,129,.25); }

html[class*="ui-"] body:not(.dash) { font-family: var(--ui-font, inherit); }
html[class*="ui-"] body:not(.dash) :is(.brand, .side, .order-side, .order-head, header.top) { background-color: var(--brand-bg); }
html[class*="ui-"] body:not(.dash) :is(button, input, select, .btn, .order-type, .side-btn, .keypad button, .display, .table, .pay-btn) { border-radius: var(--ui-r, 10px); font-family: inherit; }
html[class*="ui-"] body:not(.dash) :is(.btn-primary, .order-type, .contact-btn, .logout-eod, .branch-tag, .pay-btn, .send-btn, .login-btn, .btn-accent) {
  background: var(--accent); color: var(--ui-on, #fff); box-shadow: var(--ui-glow, none); }
html.ui-cosmic body:not(.dash) :is(.order-type, .contact-btn, .logout-eod, .pay-btn, .login-btn) { background: linear-gradient(90deg, #818CF8, #C084FC); color: #fff; }

/* ===== Page colours for the order, customer, tables and E.O.D pages: theme tone × Day/Night ===== */
html { --u-bg: #f1f5f9; --u-surface: #ffffff; --u-soft: #e2e8f0; --u-text: #0f172a; --u-muted: #64748b; --u-line: #e2e8f0; }
html.night { --u-bg: #0b1120; --u-surface: #1e293b; --u-soft: #334155; --u-text: #f1f5f9; --u-muted: #94a3b8; --u-line: #334155; }
html.ui-retro { --u-bg: #FFF8E7; --u-surface: #FFFFFF; --u-soft: #F3E9D2; --u-text: #2B2D42; --u-muted: #6B6E80; --u-line: #2B2D42; }
html.ui-retro.night { --u-bg: #1B1C2B; --u-surface: #2B2D42; --u-soft: #3A3D57; --u-text: #FFF8E7; --u-muted: #B8B9C9; --u-line: #FFC914; }
html.ui-simple { --u-bg: #FFFFFF; --u-surface: #FFFFFF; --u-soft: #F3F4F6; --u-text: #111827; --u-muted: #6B7280; --u-line: #E5E7EB; }
html.ui-simple.night { --u-bg: #000000; --u-surface: #111111; --u-soft: #1F2937; --u-text: #F9FAFB; --u-muted: #9CA3AF; --u-line: #262626; }
html.ui-cyber { --u-bg: #E9FDFF; --u-surface: #FFFFFF; --u-soft: #D3F7FB; --u-text: #0B0E14; --u-muted: #4B5A6A; --u-line: #00F0FF; }
html.ui-cyber.night { --u-bg: #0B0E14; --u-surface: #161B22; --u-soft: #1F2630; --u-text: #E6EDF3; --u-muted: #8B98A9; --u-line: rgba(0,240,255,.35); }
html.ui-organic { --u-bg: #F9F6F0; --u-surface: #FFFFFF; --u-soft: #F0E8DC; --u-text: #3B2F27; --u-muted: #8A7B6E; --u-line: #EADFD2; }
html.ui-organic.night { --u-bg: #1E1712; --u-surface: #2C221B; --u-soft: #3B2F27; --u-text: #F9F6F0; --u-muted: #BBA996; --u-line: #4A3B30; }
html.ui-modern { --u-bg: #F4F3EF; --u-surface: #FFFFFF; --u-soft: #E9E6DF; --u-text: #2B2622; --u-muted: #8C8378; --u-line: #E2DED6; }
html.ui-modern.night { --u-bg: #1C1915; --u-surface: #2A251F; --u-soft: #3A332B; --u-text: #F4F3EF; --u-muted: #B3AA9E; --u-line: #4A4036; }
html.ui-cosmic { --u-bg: #EEF0FF; --u-surface: rgba(255,255,255,.8); --u-soft: #E0E3FF; --u-text: #1E1B4B; --u-muted: #6366A0; --u-line: rgba(129,140,248,.4); }
html.ui-cosmic.night { --u-bg: #060814; --u-surface: rgba(255,255,255,.06); --u-soft: rgba(255,255,255,.1); --u-text: #E8E9FF; --u-muted: #9BA0C8; --u-line: rgba(192,132,252,.3); }
html.ui-botanical { --u-bg: #F4F8F5; --u-surface: #FFFFFF; --u-soft: #E3EFE8; --u-text: #12302D; --u-muted: #5E7C77; --u-line: #DCEAE3; }
html.ui-botanical.night { --u-bg: #0B1F1D; --u-surface: #12302D; --u-soft: #1A3F3B; --u-text: #ECFDF5; --u-muted: #8FB5AE; --u-line: #1F4A45; }

body:is(.form-page, .eod-page), body:has(main.order), body:has(main.order) .menu-grid, body:has(main.order) .order-main { background: var(--u-bg) !important; color: var(--u-text); }
html.ui-cosmic.night body:is(.form-page, .eod-page), html.ui-cosmic.night body:has(main.order) {
  background: radial-gradient(900px 600px at 85% 0%, rgba(129,140,248,.22), transparent 60%), radial-gradient(800px 600px at 0% 100%, rgba(192,132,252,.18), transparent 60%), #060814 !important; }
:is(.check, .order-check, .customer-form, .table-card, .pay-box, .eod-bar, .modal-box) { background: var(--u-surface) !important; color: var(--u-text) !important; border-color: var(--u-line) !important; }
html.ui-cosmic :is(.check, .order-check, .customer-form, .table-card, .pay-box) { backdrop-filter: blur(16px); }
:is(.order-info, .order-top, .info-bar) { background: var(--u-surface) !important; border-color: var(--u-line) !important; }
:is(.info, .eod-printer, .field, .pay-label, .line.remark) { color: var(--u-text) !important; }
:is(.check-head, .line .qty, .empty-check, .check-address, .crumb-sep, .no-items, .tables-hint, .tables-empty, .table-meta) { color: var(--u-muted) !important; }
.check-head, .line, .check-customer { border-color: var(--u-line) !important; }
.check-customer { background: var(--u-soft) !important; color: var(--u-text); }
:is(.item-empty, .crumb, .pager button, .home-btn-light, .form-btn-light) { background: var(--u-soft) !important; color: var(--u-text) !important; }
.crumb.active { background: var(--accent) !important; color: var(--ui-on, #fff) !important; }
.field :is(input, textarea), .pay-box input, .pay-methods button, .pay-quick button { background: var(--u-bg) !important; color: var(--u-text) !important; border-color: var(--u-line) !important; }
.pay-methods button.active { background: var(--accent) !important; color: var(--ui-on, #fff) !important; }
.form-bar, body:has(main.order) .order-side { background: var(--brand-bg) !important; }
.bar-btn { background: var(--accent) !important; color: var(--ui-on, #fff) !important; }
.line.selected { background: var(--u-soft) !important; }
html.ui-cyber .table-card { box-shadow: 0 0 12px rgba(0,240,255,.25); }
.table-card .table-no { color: var(--accent); }
.check-box { background: var(--u-surface) !important; color: var(--u-text); }
.check-total { border-top-color: var(--u-line) !important; color: var(--u-text); }
.menu-panel { background: var(--u-bg) !important; color: var(--u-text); }
.info-bar { background: var(--u-surface) !important; border-color: var(--u-line) !important; }
.check-panel { background: var(--brand-bg) !important; }
/* Order page Home button: a clear box in every theme and mode. */
.info-bar .home-btn:first-child { background: var(--accent) !important; color: var(--ui-on, #fff) !important; border: 2px solid var(--u-line, #cbd5e1) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.18); font-weight: 700; }
html.night .info-bar .home-btn:first-child { border-color: rgba(255,255,255,.6) !important; }