/* Shared layout and four user-selectable color palettes. */
:root {
  --accent: #2563db;
  --accent-hover: #1d4fb6;
  --accent-soft: #eaf1ff;
  --accent-border: #bfd3fa;
  --accent-rgb: 37, 99, 219;
  --sidebar: #14243b;
  --sidebar-hover: #223a59;
  --sidebar-active: #28549a;
  --page: #f3f6fa;
  --surface: #fff;
  --ink: #1a2b42;
  --secondary: #64758b;
  --border: #dfe6ef;
  --blue: var(--accent);
  --blue-light: var(--accent-soft);
  --navy: var(--sidebar);
  --bg: var(--page);
  --line: var(--border);
  --text: var(--ink);
  --muted: var(--secondary);
  --radius: 12px;
  --shadow: 0 5px 22px rgba(25, 46, 75, .055);
}
:root[data-theme="teal"] {
  --accent: #087e83; --accent-hover: #076469; --accent-soft: #e4f5f3;
  --accent-border: #a9dcda; --accent-rgb: 8, 126, 131;
  --sidebar: #103d42; --sidebar-hover: #175258; --sidebar-active: #116e73;
  --page: #f1f7f6;
}
:root[data-theme="violet"] {
  --accent: #7448b4; --accent-hover: #5d3798; --accent-soft: #f1ebfa;
  --accent-border: #d3beed; --accent-rgb: 116, 72, 180;
  --sidebar: #2e254b; --sidebar-hover: #40345f; --sidebar-active: #654595;
  --page: #f6f4fa;
}
:root[data-theme="amber"] {
  --accent: #b75c16; --accent-hover: #984a10; --accent-soft: #fff1e4;
  --accent-border: #f2c9a4; --accent-rgb: 183, 92, 22;
  --sidebar: #433326; --sidebar-hover: #5b4430; --sidebar-active: #9c5825;
  --page: #faf6f1;
}

html { scrollbar-color: #c5cfdb transparent; }
body { background: var(--page); color: var(--ink); overflow-x: hidden; }
.app-shell, .main-wrap, main, .dash-grid, .stats-grid, .report-grid,
.settings-grid, .card, .stat-card { min-width: 0; }
.app-shell { max-width: 100%; }
.sidebar { background: var(--sidebar); }
.brand { border-bottom: 1px solid rgba(255,255,255,.07); }
.brand-mark { background: var(--accent); box-shadow: 0 6px 16px rgba(var(--accent-rgb), .28); }
.store-switch { background: rgba(255,255,255,.065); border-color: rgba(255,255,255,.1); }
.store-icon, .help-badge { background: rgba(255,255,255,.1); }
.nav-title { color: #9fb0c5; }
.nav-item { color: #c8d4e3; transition: background .15s ease, color .15s ease; }
.nav-item:hover { background: var(--sidebar-hover); }
.nav-item.active { background: var(--sidebar-active); box-shadow: inset 3px 0 rgba(255,255,255,.8); }
.nav-count { background: rgba(255,255,255,.12); color: #edf4fc; }
.sidebar-bottom { border-top-color: rgba(255,255,255,.1); }

.topbar { background: var(--surface); border-bottom-color: var(--border); }
.breadcrumb { color: var(--secondary); }
.breadcrumb strong { color: var(--ink); }
.top-actions { gap: 9px; }
.icon-btn { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 9px; color: var(--secondary); font-size: 20px; }
.mobile-menu { display: none; }
.icon-btn:hover, .icon-btn:focus-visible { background: var(--accent-soft); color: var(--accent); }
.theme-trigger { font-size: 21px; }
.avatar { background: var(--accent-soft); color: var(--accent); box-shadow: 0 0 0 1px var(--accent-border); }
.account-label strong { color: var(--ink); }
.account-label small, .today { color: var(--secondary); }

main { padding-top: 29px; }
.page-head { margin-bottom: 23px; }
.eyebrow { color: var(--accent); letter-spacing: .09em; }
.page-head h1 { color: var(--ink); font-size: clamp(22px,2vw,27px); }
.page-head p { color: var(--secondary); font-size: 12px; }
.btn { font-size: 12px; min-height: 39px; }
.btn-primary, .sapo-order-actions .btn-primary, .sapo-bottom-actions .btn-primary { background: var(--accent); color: #fff; box-shadow: 0 5px 13px rgba(var(--accent-rgb), .18); }
.btn-primary:hover, .sapo-order-actions .btn-primary:hover, .sapo-bottom-actions .btn-primary:hover { background: var(--accent-hover); }
.btn-light { border-color: var(--border); color: var(--ink); }
.btn-light:hover { border-color: var(--accent-border); background: var(--accent-soft); }
.stat-card, .card { border-color: var(--border); box-shadow: var(--shadow); }
.stat-card { padding: 20px; min-height: 139px; }
.stat-label { color: var(--secondary); font-size: 11px; }
.stat-note { color: var(--secondary); font-size: 10px; }
.stat-value { color: var(--ink); font-size: 25px; font-variant-numeric: tabular-nums; }
.stat-card:not(.green):not(.orange):not(.purple) .stat-icon { background: var(--accent-soft); color: var(--accent); }
.card-head h2 { color: var(--ink); font-size: 15px; }
.card-head small, .card-head a { font-size: 11px; color: var(--secondary); }
.card-head a, .linkish, .text-btn:not(.red), .pos-sku-link { color: var(--accent)!important; }
.bar { background: linear-gradient(180deg, rgba(var(--accent-rgb),.54), var(--accent)); }
.bar:hover { background: var(--accent-hover); }
.quick-action { border-color: var(--border); min-height: 82px; }
.quick-action:hover { background: var(--accent-soft); border-color: var(--accent-border); }
.quick-action span { color: var(--accent); }
.quick-action strong, .low-row strong { font-size: 12px; }
.mini-image, .product-img { background: var(--accent-soft); color: var(--accent); }

.table-wrap, .sapo-table-wrap, .order-detail-table-wrap { max-width: 100%; }
.data-table th { color: #53657b; background: #f6f8fb; font-size: 11px; padding: 12px 14px; }
.data-table td { color: #354960; font-size: 12px; padding: 13px 14px; }
.data-table tr:hover td { background: var(--accent-soft); }
.data-table tr.unpaid-order-row td { background: #fff8d9; }
.data-table tr.unpaid-order-row:hover td { background: #fff1b8; }
.table-footer { color: var(--secondary); font-size: 11px; }
.searchbox input, .field input, .field select, .field textarea, .filter-select,
.sapo-items-table input, .sapo-items-table select, .sapo-note-card textarea,
.sapo-totals-card input { border-color: var(--border); color: var(--ink); }
.searchbox input, .field input, .field select, .field textarea { font-size: 12px; }
.searchbox input:focus, .field input:focus, .field select:focus, .field textarea:focus,
.sapo-items-table input:focus, .sapo-items-table select:focus,
.sapo-note-card textarea:focus, .sapo-totals-card input:focus,
.auth-field input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .13); }
.segment.active, .category-chip.active, .pay-option.active { background: var(--accent-soft); border-color: var(--accent-border); color: var(--accent); }
.badge.blue { background: var(--accent-soft); color: var(--accent); }
.modal { border: 1px solid var(--border); border-radius: 14px; }
.modal-head { background: #fafbfd; }
.modal-foot { flex-wrap: wrap; }
:where(button, a, input, select, textarea):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

main.sapo-pos-page { background: var(--page); }
.sapo-order-toolbar { border-bottom-color: var(--border); }
.sapo-pos-page .card { border-color: var(--border); border-radius: 11px; box-shadow: var(--shadow); }
.sapo-order-actions .btn, .sapo-bottom-actions .btn,
.sapo-customer-card .customer-searchbox input, .sapo-product-search .searchbox input,
.sapo-product-search .btn { border-radius: 8px; }
.sapo-product-search .searchbox input { border-radius: 8px 0 0 8px; }
.sapo-product-search .btn { border-radius: 0 8px 8px 0; }
.sapo-product-search-wrap .pos-product-list { border-color: var(--border); border-radius: 9px; }
.sapo-product-search-wrap .pos-product-row:hover { background: var(--accent-soft); }
.sapo-products-foot button, .sapo-products-empty .btn,
.sapo-customer-card .customer-picker-row .btn { color: var(--accent); }
.sapo-products-empty .btn { border-color: var(--accent-border); }
.sapo-totals-card .summary-row.total strong { color: var(--accent); }
.pos-add-mark { background: var(--accent-soft); color: var(--accent); }
.pos-product-title:hover strong, .pos-product-title:focus-visible strong { color: var(--accent); }
.order-detail-summary-row.total, .order-detail-extra { background: var(--accent-soft); }
.order-detail-summary-row.total strong, .order-detail-table .order-detail-line-total { color: var(--accent); }
#auth-root { background: linear-gradient(135deg,var(--sidebar),var(--accent-hover)); }
.auth-submit { background: var(--accent); }

.theme-intro { margin: 0 0 16px; color: var(--secondary); font-size: 12px; line-height: 1.6; }
.theme-choices { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.theme-choice { display: flex; flex-direction: column; align-items: stretch; gap: 9px; min-width: 0; padding: 11px; background: #fff; border: 1px solid var(--border); border-radius: 11px; text-align: left; color: var(--ink); }
.theme-choice:hover { border-color: var(--accent-border); background: #fbfcff; }
.theme-choice.selected { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(var(--accent-rgb), .13); }
.theme-swatch { display: flex; align-items: flex-start; gap: 5px; height: 52px; padding: 11px 10px; border-radius: 7px; }
.theme-swatch i { display: block; width: 17px; height: 17px; border-radius: 4px; background: rgba(255,255,255,.8); }
.theme-swatch i:first-child { height: 29px; width: 21px; background: rgba(255,255,255,.24); }
.theme-swatch i:last-child { opacity: .55; }
.theme-swatch-blue { background: linear-gradient(115deg,#14243b 35%,#2563db 35%); }
.theme-swatch-teal { background: linear-gradient(115deg,#103d42 35%,#087e83 35%); }
.theme-swatch-violet { background: linear-gradient(115deg,#2e254b 35%,#7448b4 35%); }
.theme-swatch-amber { background: linear-gradient(115deg,#433326 35%,#b75c16 35%); }
.theme-choice-copy strong, .theme-choice-copy small { display: block; }
.theme-choice-copy strong { font-size: 12px; }
.theme-choice-copy small { font-size: 10px; color: var(--secondary); margin-top: 2px; }
.theme-choice-status { color: var(--accent); font-size: 10px; font-weight: 700; }

@media (max-width: 1200px) {
  .dash-grid { grid-template-columns: minmax(0,1fr); }
}
@media (max-width: 960px) {
  .mobile-menu { display: grid; }
  .dash-grid, .report-grid, .settings-grid { grid-template-columns: minmax(0,1fr); }
  .stats-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 800px) { .today { display: none; } }
@media (max-width: 600px) {
  .topbar { padding: 0 14px; }
  .top-actions { gap: 4px; }
  main { padding: 20px 14px 40px; }
  .page-head { gap: 10px; }
  .page-head h1 { font-size: 21px; }
  .page-head p { font-size: 11px; }
  .stats-grid { gap: 10px; }
  .stat-card { padding: 15px; min-height: 120px; }
  .stat-value { font-size: 20px; }
  .card { min-width: 0; }
  .theme-choices { grid-template-columns: minmax(0,1fr); }
  main.sapo-pos-page { padding: 0 14px 30px; }
}