@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Fraunces:opsz,wght@9..144,500&display=swap");
:root {--bg:#fffaf5; --ink:#3a1a08; --muted:#8a6a55; --olive:#fa7319; --olive-2:#e5620c; --moss:#fde8d6; --fern:#c2540a; --danger:#b8432a; --row:rgba(123,47,3,0.06); --panel:#ffffff; font-family:Inter, system-ui, sans-serif;}
* {box-sizing:border-box;}
html, body {margin:0; min-height:100%; background:radial-gradient(1200px 600px at 80% -10%,#1f2a16 0%,transparent 60%), var(--bg); color:var(--ink); font-size:13px;}
body {display:flex; flex-direction:column; min-height:100vh;}
body > * {width:100%; position:relative; z-index:1;}
body > #app-fab {position:static; z-index:auto;}
body::before {content:""; position:fixed; inset:0; background:url("../assets/logo_.png") center / min(60vmin,520px) no-repeat; opacity:0.05; pointer-events:none; z-index:0;}
a {color:inherit; text-decoration:none;}
button, input, select {font:inherit; color:inherit;}
h1 {font-family:Fraunces, serif; font-weight:500; font-size:28px; margin:2px 0 0;}
h2 {font-size:11px; letter-spacing:0.12em; text-transform:uppercase; color:var(--muted); font-weight:500; margin:0 0 10px;}
.eyebrow {margin:0; color:var(--fern); font-size:11px; letter-spacing:0.16em; text-transform:uppercase;}
.muted {color:var(--muted);}
.num {text-align:right;}
.empty {text-align:center; color:var(--muted); padding:40px 0;}
.loading {color:var(--muted); padding:40px 0;}
.page {max-width:1180px; margin:0 auto; padding:28px 24px 110px;}
.page-head {display:flex; justify-content:space-between; align-items:flex-end; gap:16px; margin-bottom:22px; flex-wrap:wrap;}
.section {margin-bottom:40px;}
.split {display:grid; grid-template-columns:1fr 1fr; gap:40px;}
.table-wrap {overflow-x:auto; margin-top:8px;}
#page {flex:1 0 auto;}
#app-footer {position:sticky; bottom:0; z-index:5; text-align:center; color:var(--muted); font-size:12px; padding:10px 0; background:var(--bg); border-top:1px solid var(--row);}
.topnav {display:flex; align-items:center; justify-content:space-between; max-width:1180px; margin:0 auto; padding:16px 24px;}
.topnav ul {display:flex; gap:4px; list-style:none; margin:0 0 0 auto; padding:0;}
.topnav a {padding:7px 12px; border-radius:999px; color:var(--muted); transition:0.2s;}
.topnav a:hover {color:var(--ink);}
.topnav a.active {background:var(--moss); color:var(--ink);}
.brand {font-family:Fraunces, serif; font-size:16px; letter-spacing:0.02em;}
.brand .leaf {color:var(--fern);}
.toolbar {display:flex; gap:6px; align-items:center; align-items:center;}
.icon-btn {background:none; border:0; color:var(--muted); width:30px; height:30px; border-radius:8px; cursor:pointer; font-size:16px;}
.icon-btn:hover {background:var(--row); color:var(--ink);}
.date {background:var(--row); border:0; border-radius:8px; padding:7px 10px; color-scheme:dark; height:32px; box-sizing:border-box;}
.day-num {width:56px; height:32px; box-sizing:border-box; background:var(--row); border:0; border-radius:8px; padding:0 8px; color:var(--ink); text-align:center; font:inherit;}
.day-pos {display:inline-flex; align-items:center; gap:6px; color:var(--muted);}
.btn {border:0; border-radius:999px; padding:8px 16px; cursor:pointer; background:var(--row); color:var(--ink); transition:0.2s;}
.btn.primary {background:var(--olive); color:#f3f6e8;}
.btn.primary:hover {background:var(--olive-2);}
.btn.ghost {background:transparent; color:var(--muted);}
.btn.danger {background:var(--danger); color:#fff;}
.btn:disabled {opacity:0.5; cursor:default;}
.seg {display:flex; background:var(--row); border-radius:999px; padding:3px;}
.seg button {background:none; border:0; padding:6px 12px; border-radius:999px; color:var(--muted); cursor:pointer;}
.seg button.on {background:var(--moss); color:var(--ink);}
.pill {font-size:11px; padding:3px 9px; border-radius:999px; border:0; background:var(--row); color:var(--muted); cursor:pointer;}
.pill.on {background:rgba(151,168,90,0.2); color:var(--fern);}
.row-act {background:none; border:0; color:var(--muted); cursor:pointer; padding:3px 6px; border-radius:6px; font-size:12px;}
.row-act:hover {color:var(--ink); background:var(--row);}
.row-act.del:hover {color:var(--danger);}
.actions {text-align:right; white-space:nowrap;}
.kpis {display:grid; grid-template-columns:repeat(auto-fit, minmax(170px,1fr)); gap:28px 24px; margin-bottom:36px;}
.kpi .label {font-size:11px; letter-spacing:0.12em; text-transform:uppercase; color:var(--muted);}
.kpi .value {font-family:Fraunces, serif; font-size:24px; margin:6px 0 2px; font-variant-numeric:tabular-nums;}
.kpi .sub {color:var(--muted); font-size:12px;}
.kpi.hero .value {color:var(--fern);}
.stats-inline {color:var(--muted); margin:-8px 0 16px; font-size:12.5px;}
.stats-inline b {color:var(--ink); font-weight:500;}
.chart {display:flex; align-items:flex-end; gap:8px; height:150px;}
.col {flex:1; height:100%; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; gap:6px;}
.col i {width:100%; max-width:26px; min-height:2px; border-radius:6px 6px 2px 2px; background:linear-gradient(var(--olive-2), var(--moss));}
.col span {font-size:11px; color:var(--muted);}
.bar-list {list-style:none; margin:0 0 28px; padding:0; display:grid; gap:12px;}
.bar-meta {display:flex; justify-content:space-between; margin-bottom:5px; font-size:12.5px;}
.bar {height:4px; background:var(--row); border-radius:4px; overflow:hidden;}
.bar i {display:block; height:100%; background:var(--olive-2); border-radius:4px;}
.tbl {width:100%; border-collapse:collapse; font-size:12.5px; font-variant-numeric:tabular-nums;}
.tbl th {text-align:left; font-weight:500; font-size:10.5px; letter-spacing:0.1em; text-transform:uppercase; color:var(--muted); padding:6px 10px;}
.tbl td {padding:7px 10px; transition:background 0.15s;}
.tbl tbody tr:hover td {background:var(--row);}
.tbl td:first-child {border-radius:8px 0 0 8px;}
.tbl td:last-child {border-radius:0 8px 8px 0;}
.form {display:grid; gap:12px;}
.form label {display:grid; gap:5px; font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--muted);}
.form input, .form select {background:var(--row); border:1px solid transparent; border-radius:10px; padding:9px 11px; font-size:13px; color:var(--ink); color-scheme:dark; background-color:var(--row); text-transform:none; letter-spacing:0;}
.form select option {background:var(--panel); color:var(--ink);}
.form select option:checked, .form select option:hover {background:var(--moss); color:var(--ink);}
.form input:focus, .form select:focus {outline:none; border-color:var(--olive-2);}
/* Custom dropdown (order modal), matches the public order page */
.dd {position:relative; text-transform:none; letter-spacing:0;}
.dd-btn {width:100%; text-align:left; background:var(--row); border:1px solid transparent; border-radius:10px; padding:9px 11px; font-size:13px; color:var(--ink); cursor:pointer;}
.dd-btn:focus-visible {outline:none; border-color:var(--olive-2);}
.dd-list {position:absolute; left:0; right:0; top:calc(100% + 6px); z-index:50; margin:0; padding:6px; list-style:none; background:var(--panel); border-radius:10px; box-shadow:0 14px 34px rgba(58,26,8,0.2);}
.dd-list[hidden] {display:none;}
.dd-item {padding:8px 10px; border-radius:6px; cursor:pointer; color:var(--ink); font-size:13px;}
.dd-item:hover {background:var(--moss);}
.dd-item.is-active {color:var(--fern); font-weight:600;}
.form-row {display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.form-foot {display:flex; justify-content:space-between; align-items:center; margin-top:6px;}
.form label.check {display:flex; align-items:center; gap:8px; text-transform:none; letter-spacing:0; font-size:13px; color:var(--ink);}
.modal-backdrop, .dlg-backdrop {position:fixed; inset:0; z-index:50; padding:16px; display:grid; place-items:center; background:rgba(8,11,6,0.6); backdrop-filter:blur(6px); opacity:0; transition:opacity 0.2s;}
.is-in {opacity:1;}
.modal {width:min(440px,100%); background:var(--panel); border-radius:18px; padding:20px 22px; transform:translateY(8px); transition:transform 0.2s;}
.is-in .modal, .is-in .dlg {transform:none;}
.modal-head {display:flex; justify-content:space-between; align-items:center; margin-bottom:14px;}
.modal-head h3 {margin:0; font-family:Fraunces, serif; font-weight:500; font-size:20px;}
.dlg {width:min(340px,100%); background:var(--panel); border-radius:16px; padding:20px; transform:translateY(8px); transition:transform 0.2s;}
.dlg h3 {margin:0 0 6px; font-family:Fraunces, serif; font-weight:500; font-size:18px;}
.dlg p {margin:0 0 18px; color:var(--muted); line-height:1.5;}
.dlg-actions {display:flex; justify-content:flex-end; gap:8px;}
.toast-host {position:fixed; left:50%; bottom:96px; transform:translateX(-50%); display:grid; gap:8px; z-index:60; pointer-events:none; justify-items:center;}
.toast {background:#1e2819; padding:10px 16px; border-radius:999px; box-shadow:0 10px 30px rgba(0,0,0,0.4); opacity:0; transform:translateY(10px); transition:0.3s; white-space:nowrap; width:max-content; display:flex; align-items:center; gap:14px; pointer-events:auto;}
.toast.is-in {opacity:1; transform:none;}
.toast--ok {color:var(--fern);}
.toast--error {color:#f0b9a6;}
.fab-wrap {position:fixed; right:24px; bottom:24px; z-index:40; display:grid; justify-items:end; gap:10px;}
.fab {width:54px; height:54px; border-radius:50%; border:0; cursor:pointer; background:var(--olive); color:#f3f6e8; font-size:28px; box-shadow:0 10px 24px rgba(0,0,0,0.4); transition:transform 0.2s;}
.fab:hover {transform:rotate(45deg) scale(1.05);}
.fab-menu {display:grid; gap:4px; padding:6px; border-radius:14px; background:var(--panel); box-shadow:0 10px 30px rgba(0,0,0,0.4);}
.fab-menu[hidden] {display:none;}
.fab-menu button {background:none; border:0; color:var(--ink); padding:8px 14px; border-radius:10px; text-align:left; cursor:pointer; white-space:nowrap;}
.fab-menu button:hover {background:var(--row);}
.stats-row {display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; justify-content:flex-start; height:32px; gap:12px; margin-bottom:20px;}
.switch {display:inline-flex; align-items:center; gap:8px; cursor:pointer; font-size:13px; user-select:none;}
.switch input {display:none;}
.switch .slider {position:relative; width:36px; height:20px; background:#d4d4d4; border-radius:999px; transition:background .2s; background:var(--moss); box-shadow:inset 0 0 0 1px rgba(160,180,110,.15);}
.switch .slider::after {content:""; position:absolute; top:2px; left:2px; width:16px; height:16px; background:#fff; border-radius:50%; transition:transform .2s; background:var(--muted);}
.switch input:checked + .slider {background:#2f7d5b; background:var(--olive);}
.switch input:checked + .slider::after {transform:translateX(16px); background:var(--ink);}
.day-pos {font-size:13px; opacity:.7; white-space:nowrap; align-self:center; padding:0 4px;}
html {scrollbar-width:thin; scrollbar-color:transparent transparent; transition:scrollbar-color .3s;}
html.is-scrolling, html:hover {scrollbar-color:rgba(151,168,90,.45) transparent;}
html::-webkit-scrollbar {width:6px;}
html::-webkit-scrollbar-track {background:transparent;}
html::-webkit-scrollbar-thumb {background:transparent; border-radius:999px;}
html.is-scrolling::-webkit-scrollbar-thumb, html:hover::-webkit-scrollbar-thumb {background:rgba(151,168,90,.45);}
*, *::before, *::after {border-radius:3px !important;}
.bar, .bar i {border-radius:2px !important;}
.card, .panel, .modal, .tbl {border-radius:6px !important;}
.date::-webkit-calendar-picker-indicator {width:16px; height:16px; margin:0; padding:0; opacity:.7; cursor:pointer;}
#jump {width:32px; height:32px; padding:0; display:inline-flex; align-items:center; justify-content:center;}
#jump svg {display:block; width:16px; height:16px;}
.search {width:240px; height:32px; box-sizing:border-box; background:var(--row); border:0; padding:0 12px; color:var(--ink); outline:none;}
.search::placeholder {color:var(--muted);}
.search:focus {box-shadow:0 0 0 1px var(--moss);}
#stats {margin:0 auto 0 0;}
.stats-row #search {margin-left:0;}
.stats-row .switch {height:32px; margin-left:0;}
.stats-row .stats-inline {margin:0; height:32px; display:flex; align-items:center; display:block; margin:0; height:32px; line-height:32px; white-space:nowrap;}
body[data-page="orders"] {height:100vh; overflow:hidden;}
body[data-page="orders"] #page {flex:1 1 auto; min-height:0; display:flex; flex-direction:column; padding-bottom:16px;}
body[data-page="orders"] .table-wrap {flex:1 1 auto; min-height:0; overflow:auto; scrollbar-width:thin; scrollbar-color:transparent transparent; transition:scrollbar-color .3s;}
body[data-page="orders"] .table-wrap:hover, html.is-scrolling body[data-page="orders"] .table-wrap {scrollbar-color:rgba(151,168,90,.45) transparent;}
body[data-page="orders"] .table-wrap::-webkit-scrollbar {width:6px;}
body[data-page="orders"] .table-wrap::-webkit-scrollbar-track {background:transparent;}
body[data-page="orders"] .table-wrap::-webkit-scrollbar-thumb {background:transparent; border-radius:999px;}
body[data-page="orders"] .table-wrap:hover::-webkit-scrollbar-thumb, html.is-scrolling body[data-page="orders"] .table-wrap::-webkit-scrollbar-thumb {background:rgba(151,168,90,.45);}
body[data-page="orders"] .tbl thead th {position:sticky; top:0; z-index:2; background:#11160e;}
.foot-actions {display:flex; gap:8px; align-items:center;}
.btn.icon-danger {width:36px; height:36px; padding:0; display:inline-flex; align-items:center; justify-content:center; background:rgba(196,106,78,.12); color:var(--danger);}
.btn.icon-danger:hover {background:var(--danger); color:#fff;}
.btn.icon-danger svg {width:16px; height:16px;}
.tbl tbody tr.row {cursor:pointer;}
body[data-page="dashboard"] {height:100vh; overflow:hidden;}
body[data-page="dashboard"] #page {flex:1 1 auto; min-height:0; overflow-y:auto; scrollbar-width:thin; scrollbar-color:transparent transparent; transition:scrollbar-color .3s;}
body[data-page="dashboard"] #page:hover, html.is-scrolling body[data-page="dashboard"] #page {scrollbar-color:rgba(151,168,90,.45) transparent;}
body[data-page="dashboard"] #page::-webkit-scrollbar {width:6px;}
body[data-page="dashboard"] #page::-webkit-scrollbar-track {background:transparent;}
body[data-page="dashboard"] #page::-webkit-scrollbar-thumb {background:transparent; border-radius:999px;}
body[data-page="dashboard"] #page:hover::-webkit-scrollbar-thumb, html.is-scrolling body[data-page="dashboard"] #page::-webkit-scrollbar-thumb {background:rgba(151,168,90,.45);}
.tbl th.num {text-align:right;}
.brand-logo {display:block; width:30px; height:30px; object-fit:cover; border-radius:50% !important;}
.toast-action {background:none; border:0; padding:0; cursor:pointer; color:var(--fern); font-weight:600;}
.toast-action:hover {color:var(--ink);}
#orders-tbl th:last-child, #orders-tbl td:last-child {text-align:right;}
.suggest {font-size:0.85em; margin:-4px 0 8px;}
.link-btn {background:none; border:0; padding:0; color:inherit; text-decoration:underline; cursor:pointer;}
.name-field {position:relative;}
.name-suggest {position:absolute; top:100%; left:0; right:0; z-index:5; list-style:none; margin:4px 0 0; padding:4px; background:#1f2a17; border:1px solid #5c7a2e; border-radius:8px; max-height:240px; overflow-y:auto;}
.name-suggest li {padding:8px 10px; border-radius:6px; cursor:pointer;}
.name-suggest li:hover, .name-suggest li.is-active {background:#2e3d20;}
.name-suggest b {color:#c6e26a; font-weight:600;}
.m-account {display:block; font-size:12px; margin-top:2px;}
body[data-page="orders"] .day-pos {display:inline-block; text-align:center; white-space:nowrap; font-variant-numeric:tabular-nums;}
body[data-page="orders"] .page-head .toolbar {margin-left:auto;}

@media (max-width: 640px) {
.modal-backdrop, .dlg-backdrop {place-items:end center; padding:0;}
.modal, .dlg {width:100%; max-width:100%; max-height:90vh; overflow-y:auto; padding:8px 20px calc(20px + env(safe-area-inset-bottom,0px)); border-radius:18px 18px 0 0 !important; transform:translateY(100%); transition:transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);}
.is-in .modal, .is-in .dlg {transform:none;}
.modal::before, .dlg::before {content:""; display:block; width:40px; height:4px; margin:6px auto 12px; background:var(--row); border-radius:2px !important;}
.stats-row {height:auto; flex-direction:column; align-items:stretch; gap:10px; margin-bottom:14px;}
.stats-row .stats-inline {height:auto; margin:0; line-height:1.5; white-space:normal;}
.stats-row .search {width:100%; height:40px;}
.stats-row .switch {height:auto; align-self:flex-start;}
.tbl th, .tbl td {padding:6px 8px; white-space:nowrap;}
body[data-page="orders"] .table-wrap {overflow-x:hidden; overflow-y:auto;}
body[data-page="orders"] .tbl {width:100%; table-layout:fixed;}
body[data-page="orders"] .tbl th:not(.sel):not(:nth-child(3)):not(:nth-child(5)), body[data-page="orders"] .tbl td:not(.sel):not(:nth-child(3)):not(:nth-child(5)):not(.empty) {display:none;}
body[data-page="orders"] .tbl td {white-space:normal;}
body[data-page="orders"] .tbl th:nth-child(3), body[data-page="orders"] .tbl td:nth-child(3) {width:60%;}
body[data-page="orders"] .m-account {display:block; font-size:12px; margin-top:2px;}
body[data-page="orders"] .stats-row {flex-direction:row; flex-wrap:wrap; align-items:center; height:auto; gap:10px;}
body[data-page="orders"] .stats-row .stats-inline {width:100%; height:auto; white-space:normal;}
body[data-page="orders"] .stats-row .search {flex:1 1 0; min-width:0; width:auto; height:32px;}
body[data-page="orders"] .stats-row .switch {flex:0 0 auto; height:32px; align-self:auto;}
body[data-page="orders"] .page-head {display:grid; grid-template-columns:1fr auto; align-items:center; gap:12px;}
body[data-page="orders"] .page-head > div:first-child {grid-column:1; grid-row:1;}
body[data-page="orders"] #import {grid-column:2; grid-row:1; justify-self:end;}
body[data-page="orders"] .page-head .toolbar {grid-column:1 / -1; grid-row:2; margin-left:0; justify-content:center; display:flex; width:100%; justify-content:space-between; align-items:center; gap:6px;}
body[data-page="orders"] .toolbar .date {flex:1 1 auto; min-width:0; width:auto;}
body[data-page="orders"] .toolbar .icon-btn {flex:0 0 auto;}
body[data-page="orders"] .toolbar .day-pos {flex:0 0 auto;}
body[data-page="orders"] #stats {display:flex; justify-content:space-between; align-items:center; gap:8px;}
body[data-page="orders"] .stat-pills {display:flex; gap:6px;}
body[data-page="orders"] .stat-pills .pill {cursor:default;}
body[data-page="orders"] .stat-total b {color:var(--ink); font-weight:500;}
}

@media (max-width: 860px) {
.split {grid-template-columns:1fr;}
}

@media (min-width: 641px) {
body[data-page="orders"] .day-pos {min-width:6.5em;}
}
/* ---------- Entrance animation: slide in from the left, top to bottom ---------- */
@keyframes slide-in {
  from { opacity: 0; transform: translateX(-28px); }
  to   { opacity: 1; transform: none; }
}

.topnav,
#page > *,
.kpis > *,
#app-footer {
  animation: slide-in 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.topnav                  { animation-delay: 0s; }
#page > :nth-child(1)    { animation-delay: 0.10s; }
#page > :nth-child(2)    { animation-delay: 0.18s; }
#page > :nth-child(3)    { animation-delay: 0.26s; }
#page > :nth-child(4)    { animation-delay: 0.34s; }
#page > :nth-child(5)    { animation-delay: 0.42s; }
#page > :nth-child(6)    { animation-delay: 0.50s; }
#page > :nth-child(7)    { animation-delay: 0.58s; }
#page > :nth-child(8)    { animation-delay: 0.66s; }
#page > :nth-child(n+9)  { animation-delay: 0.74s; }

.kpis > :nth-child(1)    { animation-delay: 0.26s; }
.kpis > :nth-child(2)    { animation-delay: 0.32s; }
.kpis > :nth-child(3)    { animation-delay: 0.38s; }
.kpis > :nth-child(4)    { animation-delay: 0.44s; }
.kpis > :nth-child(n+5)  { animation-delay: 0.50s; }

#app-footer              { animation-delay: 0.90s; }

/* respect users who turn off motion */
@media (prefers-reduced-motion: reduce) {
  .topnav, #page > *, .kpis > *, #app-footer { animation: none; }
}
/* ---------- Orders: table fades in instead of sliding (scroll container clips the slide) ---------- */
@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

body[data-page="orders"] #page > .table-wrap {
  animation: fade-in 0.5s ease both;
  animation-delay: 0.3s;
}
/* ---------- Free (on the house) badge ---------- */
.badge-free {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  vertical-align: middle;
  background: rgba(151, 168, 90, 0.2);
  color: var(--fern);
}
/* ---------- Payment method badge ---------- */
.badge-pay {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 999px;
  color: var(--muted);
  background: rgba(151, 168, 90, 0.14);
  vertical-align: middle;
}
/* ---------- Align badges after flavor ---------- */
.flav {
  display: inline-block;
  min-width: 16em;
  white-space: nowrap;
}
/* ---------- Bulk action bar ---------- */
.bulk {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  padding: 8px 12px; margin-bottom: 8px;
  background: var(--row); border-radius: 8px;
}
.bulk[hidden] { display: none; }
#bulk-count { order: 99; margin-left: auto; }
.bulk [data-bulk="Pay Now"]:hover { color: #c2540a; background: rgba(250, 115, 25, 0.14); box-shadow: inset 0 0 0 1px rgba(250, 115, 25, 0.4); }
.bulk [data-bulk="Payday"]:hover { color: #7b2f03; background: rgba(123, 47, 3, 0.1); box-shadow: inset 0 0 0 1px rgba(123, 47, 3, 0.3); }
#bulk-clear, #bulk-del { display: inline-flex; align-items: center; justify-content: center; padding: 0; }
#orders-tbl .sel { width: 36px; text-align: center; }
/* ---------- Desktop: hide Time and Payment columns ---------- */
#orders-tbl th:nth-child(2), #orders-tbl td:nth-child(2),
#orders-tbl th:nth-child(8), #orders-tbl td:nth-child(8) {display:none;}
/* ---------- Select-all: hidden until needed ---------- */
#sel-all {opacity: 0; pointer-events: none; transition: opacity 0.2s;}
#sel-all.show, th.sel:hover #sel-all {opacity: 1; pointer-events: auto;}
/* ---------- Row checkboxes: hidden until hover or selection ---------- */
.sel-box {opacity: 0; pointer-events: none; transition: opacity 0.2s;}
tr.row:hover .sel-box, #orders-tbl.selecting .sel-box {opacity: 1; pointer-events: auto;}
#orders-tbl.selecting #sel-all {opacity: 1; pointer-events: auto;}
/* ---------- Desktop: account shows under the name, no separate column ---------- */
#orders-tbl th:nth-child(4), #orders-tbl td:nth-child(4) {display:none;}
/* ---------- Payment badge variants ---------- */
.badge-pay.is-now {
  color: #c2540a;
  background: rgba(250, 115, 25, 0.14);
  box-shadow: inset 0 0 0 1px rgba(250, 115, 25, 0.4);
}
.badge-pay.is-day {
  color: #7b2f03;
  background: rgba(123, 47, 3, 0.1);
  box-shadow: inset 0 0 0 1px rgba(123, 47, 3, 0.3);
}
/* ---------- Light theme overrides ---------- */
html, body {background: radial-gradient(1200px 600px at 80% -10%, #ffe6d1 0%, transparent 60%), var(--bg);}
body::before {opacity: 0.30;}
.date, .form input, .form select {color-scheme: light;}
.toast {background: #3a1a08; color: #fff3e8; box-shadow: 0 10px 30px rgba(123,47,3,0.25);}
.modal-backdrop, .dlg-backdrop, .drawer-backdrop {background: rgba(58,26,8,0.35);}
.switch .slider {background: #f0d3bb;}
body[data-page="orders"] .tbl thead th {background: var(--bg);}
.pill.on {background: rgba(250,115,25,0.16); color: var(--fern);}
.badge-free {background: rgba(250,115,25,0.16); color: #c2540a;}
.name-suggest {background: #fff; border-color: #fa7319;}
.name-suggest li:hover, .name-suggest li.is-active {background: #fde8d6;}
.name-suggest b {color: #c2540a;}
.nav-logo {display: flex; align-items: center; padding: 0; background: none;}
.nav-logo img {height: 30px; width: auto; display: block;}
/* scrollbars */
html.is-scrolling, html:hover {scrollbar-color: rgba(250,115,25,.6) transparent;}
html.is-scrolling::-webkit-scrollbar-thumb, html:hover::-webkit-scrollbar-thumb {background: rgba(250,115,25,.6);}
body[data-page="orders"] .table-wrap:hover, html.is-scrolling body[data-page="orders"] .table-wrap {scrollbar-color: rgba(250,115,25,.6) transparent;}
body[data-page="orders"] .table-wrap:hover::-webkit-scrollbar-thumb, html.is-scrolling body[data-page="orders"] .table-wrap::-webkit-scrollbar-thumb {background: rgba(250,115,25,.6);}
body[data-page="dashboard"] #page:hover, html.is-scrolling body[data-page="dashboard"] #page {scrollbar-color: rgba(250,115,25,.6) transparent;}
body[data-page="dashboard"] #page:hover::-webkit-scrollbar-thumb, html.is-scrolling body[data-page="dashboard"] #page::-webkit-scrollbar-thumb {background: rgba(250,115,25,.6);}
/* ---------- Menu drawer ---------- */
.drawer-backdrop {position:fixed; inset:0; z-index:55; background:rgba(8,11,6,0.6); backdrop-filter:blur(4px); opacity:0; transition:opacity .25s;}
.drawer-backdrop.is-in {opacity:1;}
.drawer {position:absolute; top:0; right:0; height:100%; width:min(520px,100%); background:var(--panel); padding:20px 22px; display:flex; flex-direction:column; gap:14px; overflow-y:auto; transform:translateX(100%); transition:transform .28s cubic-bezier(.2,.8,.2,1);}
.drawer-backdrop.is-in .drawer {transform:none;}
.menu-list {list-style:none; margin:0; padding:0; display:grid; gap:8px; flex:1; align-content:start;}
.menu-item {display:grid; grid-template-columns:1fr 72px auto auto; gap:8px; align-items:center; background:var(--row); padding:8px 10px; border-radius:8px;}
.menu-item.is-hidden {opacity:.55;}
.menu-item input {background:transparent; border:0; border-bottom:1px solid var(--row); padding:4px 2px; color:var(--ink); font:inherit; min-width:0;}
.menu-item input:focus {outline:none; border-bottom-color:var(--olive-2);}
.menu-item .m-name {width:100%;}
.menu-item .m-price {width:100%; text-align:right;}
.menu-add {display:grid; grid-template-columns:1fr 72px auto; gap:8px;}
.menu-add input {background:var(--row); border:0; border-radius:8px; padding:8px 10px; color:var(--ink); font:inherit; min-width:0;}