:root {
  --maroon: #7f2e31;
  --maroon-dark: #5f2024;
  --maroon-soft: #9f3e42;
  --orange: #f7a51b;
  --orange-soft: #ffd391;
  --cream: #fff0d8;
  --paper: #fffaf2;
  --ink: #341819;
  --muted: #8c6c68;
  --line: #ecd8c4;
  --shadow: 0 12px 30px rgba(68, 22, 24, .12);

  --success: #2f8f57;
  --success-dark: #1f6e41;
  --success-soft: #e8f6ee;
  --success-line: #b9dfc9;

  --danger: #c24141;
  --danger-dark: #9f2f2f;
  --danger-soft: #fff1f1;
  --danger-line: #e7b7b7;

  --neutral: #6b7280;
  --neutral-dark: #4b5563;
  --neutral-soft: #f3f4f6;
  --neutral-line: #d1d5db;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at 10% 10%, rgba(247,165,27,.08), transparent 24rem),
    var(--paper);
  color: var(--ink);
  padding-bottom: calc(96px + env(safe-area-inset-bottom));
}

button, input { font: inherit; }

button { -webkit-tap-highlight-color: transparent; cursor: pointer; transition: background-color .16s ease, color .16s ease, border-color .16s ease, box-shadow .16s ease, opacity .16s ease; }

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 16px 14px;
  color: white;
  background:
    linear-gradient(135deg, rgba(255,255,255,.04), transparent 40%),
    var(--maroon);
  box-shadow: 0 8px 24px rgba(80, 22, 25, .16);
}

.topbar h1 {
  margin: 2px 0 0;
  font-size: clamp(1.5rem, 6vw, 2.25rem);
  line-height: 1;
  letter-spacing: -.03em;
}

.eyebrow {
  margin: 0;
  font-weight: 900;
  letter-spacing: .14em;
  font-size: .68rem;
  color: var(--orange-soft);
}

.subhead {
  margin: 7px 0 0;
  color: #f6ded9;
  font-size: .88rem;
}

.ghost-btn {
  border: 1px solid rgba(255,255,255,.42);
  color: white;
  background: rgba(255,255,255,.14);
  border-radius: 14px;
  padding: 10px 12px;
  font-weight: 800;
}

#openSession.ghost-btn,
#refreshSession.mini-btn,
#refreshSessionsHistory.mini-btn,
.secondary-action-btn,
.session-detail-btn,
.icon-btn {
  border-color: var(--neutral-line);
  background: var(--neutral-soft);
  color: var(--neutral-dark);
}

#resetTop.ghost-btn {
  border-color: rgba(255,255,255,.36);
  background: rgba(255,255,255,.15);
  color: #fff5f5;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
}

.app-shell {
  width: min(1100px, 100%);
  margin: 0 auto;
  padding: 14px 14px 30px;
}

.toolbar {
  position: sticky;
  top: 97px;
  z-index: 15;
  margin: -1px -14px 14px;
  padding: 12px 14px 10px;
  background: linear-gradient(to bottom, var(--paper) 84%, rgba(255,250,242,0));
}

.search-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  background: white;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 0 12px;
  box-shadow: 0 4px 18px rgba(85, 39, 33, .06);
}

.search-icon {
  color: var(--muted);
  font-size: 1.35rem;
  line-height: 1;
}

.search-wrap input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  padding: 13px 0;
  color: var(--ink);
}

.category-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 10px 0 2px;
  scrollbar-width: none;
}
.category-tabs::-webkit-scrollbar { display: none; }

.tab-btn {
  flex: 0 0 auto;
  border: 1px solid var(--line);
  background: white;
  color: var(--maroon);
  border-radius: 999px;
  padding: 9px 13px;
  font-size: .84rem;
  font-weight: 900;
}

.tab-btn.active {
  background: var(--orange);
  border-color: var(--orange);
  color: #67252a;
}

.menu-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.menu-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  background: white;
  border: 1px solid var(--line);
  border-radius: 19px;
  padding: 15px;
  box-shadow: 0 6px 18px rgba(65, 24, 25, .055);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.menu-card.active {
  border-color: rgba(247,165,27,.9);
  box-shadow: 0 8px 22px rgba(247,165,27,.13);
}

.menu-card:active { transform: scale(.995); }

.menu-info { min-width: 0; }

.category-label {
  display: inline-block;
  color: var(--maroon-soft);
  font-size: .68rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 5px;
}

.menu-name {
  margin: 0;
  font-size: 1rem;
  line-height: 1.25;
}

.menu-desc {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: .78rem;
  line-height: 1.35;
}

.menu-price {
  display: inline-block;
  margin-top: 9px;
  color: var(--maroon);
  font-weight: 950;
  font-size: 1rem;
}

.qty-control {
  display: grid;
  grid-template-columns: 44px 68px 44px;
  gap: 6px;
  align-items: center;
}

.qty-btn {
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 14px;
  background: var(--cream);
  color: var(--maroon);
  font-size: 1.4rem;
  font-weight: 900;
  cursor: pointer;
}

.qty-btn.plus {
  background: var(--orange);
  color: var(--maroon-dark);
}

.qty-input {
  width: 68px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 12px;
  text-align: center;
  outline: 0;
  color: var(--ink);
  font-weight: 900;
  background: #fff;
  appearance: textfield;
}

.qty-input::-webkit-outer-spin-button,
.qty-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.qty-input:focus {
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(247,165,27,.18);
}

.empty-state {
  text-align: center;
  padding: 42px 12px;
  color: var(--muted);
}

.cart-panel {
  position: fixed;
  z-index: 30;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  background: linear-gradient(to top, rgba(95,32,36,.98), rgba(127,46,49,.96));
  box-shadow: 0 -10px 28px rgba(69, 19, 22, .18);
}

.cart-summary {
  width: min(1080px, 100%);
  margin: 0 auto;
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
}

.cart-summary > div {
  display: flex;
  flex-direction: column;
}

.item-count {
  color: #f8d8cf;
  font-size: .78rem;
  font-weight: 700;
}

#grandTotal {
  color: white;
  font-size: 1.35rem;
  line-height: 1.1;
}

.checkout-btn {
  border: 1px solid var(--success-line);
  border-radius: 16px;
  padding: 13px 16px;
  background: var(--success);
  color: white;
  font-weight: 950;
  min-width: 142px;
  box-shadow: 0 8px 18px rgba(47,143,87,.18);
}

.checkout-btn:disabled {
  opacity: .45;
}

.sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(45, 14, 17, .58);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.sheet-backdrop[hidden] { display: none; }

.order-sheet {
  width: min(700px, 100%);
  max-height: 88dvh;
  overflow: auto;
  background: var(--paper);
  border-radius: 26px 26px 0 0;
  padding: 10px 16px calc(18px + env(safe-area-inset-bottom));
  box-shadow: 0 -16px 50px rgba(35, 10, 12, .28);
}

.sheet-handle {
  width: 46px;
  height: 5px;
  border-radius: 99px;
  margin: 2px auto 14px;
  background: #d6b9a8;
}

.sheet-head {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 16px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 14px;
}

.sheet-head h2 {
  margin: 4px 0 0;
  font-size: 1.3rem;
}

.icon-btn {
  border: 1px solid var(--neutral-line);
  width: 40px;
  height: 40px;
  border-radius: 13px;
  background: var(--neutral-soft);
  color: var(--neutral-dark);
  font-size: 1.7rem;
}

.order-items {
  padding: 10px 0;
}

.order-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px dashed var(--line);
}

.order-item:last-child { border-bottom: 0; }

.order-item strong {
  display: block;
  font-size: .92rem;
}

.order-item small {
  color: var(--muted);
  font-size: .78rem;
}

.order-subtotal {
  font-weight: 900;
  white-space: nowrap;
}

.payment-box {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: white;
  padding: 14px;
  margin-top: 8px;
}

.customer-box {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: white;
  padding: 14px;
  margin-top: 8px;
}

.customer-box label {
  display: block;
  font-size: .84rem;
  font-weight: 850;
  margin-bottom: 8px;
}

.customer-box label span {
  color: var(--muted);
  font-weight: 600;
}

.customer-box input {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 13px;
  outline: 0;
  padding: 12px;
  color: var(--ink);
  background: transparent;
  font-weight: 800;
}

.customer-box input:focus {
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(247,165,27,.18);
}

.payment-box label {
  font-size: .84rem;
  font-weight: 850;
}

.payment-box label span {
  color: var(--muted);
  font-weight: 600;
}

.money-input {
  display: flex;
  align-items: center;
  margin-top: 8px;
  border: 1px solid var(--line);
  border-radius: 13px;
  overflow: hidden;
}

.money-input span {
  padding-left: 12px;
  color: var(--muted);
  font-weight: 900;
}

.money-input input {
  width: 100%;
  border: 0;
  outline: 0;
  padding: 12px;
  background: transparent;
  color: var(--ink);
  font-weight: 900;
}

.change-row, .sheet-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.change-row {
  margin-top: 11px;
  color: var(--muted);
  font-size: .88rem;
}

.change-row strong { color: var(--maroon); }

.sheet-total {
  padding: 17px 2px 12px;
  font-weight: 900;
}

.sheet-total strong {
  font-size: 1.6rem;
  color: var(--maroon);
}

.danger-btn {
  width: 100%;
  border: 1px solid var(--danger-line);
  border-radius: 15px;
  padding: 13px;
  background: var(--danger-soft);
  color: var(--danger-dark);
  font-weight: 900;
}

@media (min-width: 720px) {
  .topbar { padding-inline: max(24px, calc((100vw - 1100px)/2)); }
  .toolbar { top: 98px; }
  .menu-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 390px) {
  .menu-card {
    grid-template-columns: 1fr;
  }

  .qty-control {
    grid-template-columns: 46px minmax(0, 1fr) 46px;
  }

  .qty-btn { width: 46px; }
  .qty-input { width: 100%; }
}

.top-actions {
  display: flex;
  gap: 7px;
  flex-shrink: 0;
}

.top-actions .ghost-btn {
  padding-inline: 10px;
}

.order-item-main {
  min-width: 0;
}

.order-variant {
  display: inline-block;
  margin-top: 5px;
  padding: 5px 8px;
  border-radius: 8px;
  background: var(--cream);
  color: var(--maroon);
  font-size: .75rem;
  font-weight: 850;
  line-height: 1.25;
}

.order-calc {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: .78rem;
}

.complete-btn {
  width: 100%;
  border: 1px solid var(--success-line);
  border-radius: 15px;
  padding: 14px;
  background: var(--success);
  color: white;
  font-weight: 950;
  box-shadow: 0 6px 16px rgba(47,143,87,.18);
}

.order-sheet > .danger-btn {
  margin-top: 9px;
}

.history-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  padding: 12px 0;
}

.stat-card {
  background: white;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 11px;
}

.stat-card span {
  display: block;
  color: var(--muted);
  font-size: .72rem;
  margin-bottom: 3px;
}

.stat-card strong {
  color: var(--maroon);
  font-size: 1rem;
}

.history-items {
  display: grid;
  gap: 9px;
}

.history-empty {
  text-align: center;
  padding: 35px 14px;
  color: var(--muted);
}

.history-card {
  background: white;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 12px;
}

.history-card-head,
.history-card-foot {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.history-card-head strong {
  color: var(--maroon);
}

.history-card-head time {
  color: var(--muted);
  font-size: .72rem;
  text-align: right;
}

.history-menu-list {
  margin: 9px 0;
  padding: 9px 0;
  border-top: 1px dashed var(--line);
  border-bottom: 1px dashed var(--line);
  color: var(--muted);
  font-size: .78rem;
  line-height: 1.55;
}

.history-card-foot span {
  font-size: .75rem;
  font-weight: 850;
  color: var(--muted);
}

.history-card-foot strong {
  font-size: 1rem;
}

.history-actions {
  display: grid;
  gap: 8px;
  padding-top: 14px;
}

.history-actions .danger-btn {
  margin: 0;
}

.toast {
  position: fixed;
  z-index: 150;
  left: 50%;
  bottom: 100px;
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100vw - 32px);
  padding: 11px 15px;
  border-radius: 999px;
  background: #301416;
  color: white;
  font-size: .84rem;
  font-weight: 800;
  box-shadow: var(--shadow);
  text-align: center;
}

@media (max-width: 420px) {
  .topbar {
    align-items: flex-start;
  }
  .top-actions {
    flex-direction: column;
  }
  .top-actions .ghost-btn {
    padding: 7px 9px;
    font-size: .75rem;
  }
}


.history-customer {
  margin: 7px 0 2px;
  color: var(--muted);
  font-size: .8rem;
}

.history-customer strong {
  color: var(--ink);
}


.history-sync-badge {
  display: inline-block;
  margin-top: 8px;
  padding: 5px 9px;
  border-radius: 999px;
  background: #fff0c9;
  color: #8b5b00;
  font-size: .72rem;
  font-weight: 900;
}

.pending-stat {
  border-color: #f2c56c;
  background: #fff8e7;
}


.history-filter {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 0 12px;
  scrollbar-width: none;
}

.history-filter::-webkit-scrollbar {
  display: none;
}

.history-filter-btn {
  flex: 0 0 auto;
  border: 1px solid var(--line);
  background: white;
  color: var(--maroon);
  border-radius: 999px;
  padding: 9px 12px;
  font-size: .78rem;
  font-weight: 900;
}

.history-filter-btn.active {
  background: var(--orange);
  border-color: var(--orange);
  color: var(--maroon-dark);
}

.history-day-group {
  margin-top: 14px;
}

.history-day-head {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 2px 8px;
  background: linear-gradient(to bottom, var(--paper) 80%, rgba(255,250,242,0));
}

.history-day-head h3 {
  margin: 0;
  font-size: 1rem;
  color: var(--maroon);
}

.history-day-head span {
  color: var(--muted);
  font-size: .76rem;
  text-align: right;
}

.history-day-total {
  color: var(--ink) !important;
  font-weight: 900;
}


/* ===== V5: session/shift + bayar nanti ===== */

.session-gate {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  padding: 13px 14px;
  border: 1px solid #efd39d;
  border-radius: 18px;
  background: #fff8e8;
  box-shadow: 0 5px 16px rgba(70, 31, 26, .05);
}

.session-gate > div {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.session-gate strong {
  display: block;
  color: var(--maroon);
  font-size: .9rem;
}

.session-gate p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: .73rem;
  line-height: 1.35;
}

.session-dot {
  width: 11px;
  height: 11px;
  border-radius: 99px;
  background: #ba3a3a;
  box-shadow: 0 0 0 5px rgba(186,58,58,.10);
  flex: 0 0 auto;
}

.session-gate.active {
  border-color: #bed9b2;
  background: #f5fbf1;
}

.session-gate.active .session-dot {
  background: #4a9440;
  box-shadow: 0 0 0 5px rgba(74,148,64,.11);
}

.start-session-btn {
  flex: 0 0 auto;
  border: 1px solid var(--success-line);
  border-radius: 13px;
  padding: 10px 12px;
  background: var(--success);
  color: white;
  font-size: .78rem;
  font-weight: 950;
  box-shadow: 0 6px 14px rgba(47,143,87,.14);
}

.session-gate.active .start-session-btn {
  background: var(--neutral-soft);
  border: 1px solid var(--neutral-line);
  color: var(--neutral-dark);
  box-shadow: none;
}

.menu-grid.session-locked {
  opacity: .46;
  pointer-events: none;
  filter: grayscale(.15);
}

.payment-choice-box {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: white;
  padding: 14px;
  margin-top: 8px;
}

.field-label {
  display: block;
  margin-bottom: 9px;
  font-size: .84rem;
  font-weight: 850;
}

.field-hint {
  margin: 9px 1px 0;
  color: var(--muted);
  font-size: .76rem;
  line-height: 1.4;
}

.segmented-control {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}

.segment-btn {
  border: 1px solid var(--line);
  border-radius: 13px;
  padding: 11px 9px;
  background: #fffaf5;
  color: var(--muted);
  font-size: .8rem;
  font-weight: 900;
}

.segment-btn.active {
  border-color: var(--orange);
  background: var(--cream);
  color: var(--maroon);
  box-shadow: inset 0 0 0 1px rgba(247,165,27,.18);
}

.no-session-panel {
  margin: 14px 0;
  padding: 28px 18px;
  text-align: center;
  border: 1px dashed #dfc5ae;
  border-radius: 20px;
  background: rgba(255,255,255,.55);
}

.no-session-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  margin: 0 auto 9px;
  border-radius: 50%;
  background: var(--cream);
  color: var(--maroon);
  font-size: 1.4rem;
  font-weight: 900;
}

.no-session-panel strong {
  display: block;
  color: var(--maroon);
}

.no-session-panel p {
  margin: 7px 0 14px;
  color: var(--muted);
  font-size: .8rem;
  line-height: 1.5;
}

.active-session-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 0 6px;
}

.active-session-head h3 {
  margin: 8px 0 3px;
  color: var(--maroon);
  font-size: 1rem;
}

.active-session-head p {
  margin: 0;
  color: var(--muted);
  font-size: .77rem;
}

.status-pill {
  display: inline-block;
  padding: 5px 8px;
  border-radius: 999px;
  font-size: .65rem;
  font-weight: 950;
  letter-spacing: .06em;
}

.status-pill.open {
  background: #e7f5df;
  color: #3f7838;
}

.status-pill.closed {
  background: #efe9e4;
  color: #765f56;
}

.mini-btn {
  border: 1px solid var(--neutral-line);
  border-radius: 11px;
  padding: 8px 10px;
  background: var(--neutral-soft);
  color: var(--neutral-dark);
  font-size: .72rem;
  font-weight: 900;
}

.session-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  padding: 10px 0 16px;
}

.session-stat-card {
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: white;
}

.session-stat-card.wide {
  grid-column: 1 / -1;
}

.session-stat-card.warning {
  background: #fff8e7;
  border-color: #f0cf83;
}

.session-stat-card span {
  display: block;
  color: var(--muted);
  font-size: .7rem;
}

.session-stat-card strong {
  display: block;
  margin-top: 4px;
  color: var(--maroon);
  font-size: 1rem;
}

.section-title-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin: 10px 0 8px;
}

.section-title-row h3 {
  margin: 3px 0 0;
  color: var(--ink);
  font-size: 1rem;
}

.eyebrow.dark {
  color: var(--maroon-soft);
}

.count-badge {
  min-width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--maroon);
  color: white;
  font-size: .72rem;
  font-weight: 950;
}

.unpaid-list {
  display: grid;
  gap: 9px;
}

.unpaid-empty {
  padding: 19px 12px;
  border: 1px dashed var(--line);
  border-radius: 15px;
  text-align: center;
  color: var(--muted);
  font-size: .78rem;
}

.unpaid-card {
  padding: 12px;
  border: 1px solid #f0cf83;
  border-radius: 16px;
  background: #fffaf0;
}

.unpaid-card-head,
.unpaid-card-foot {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}

.unpaid-card-head strong {
  color: var(--maroon);
}

.unpaid-card-head time {
  color: var(--muted);
  font-size: .7rem;
}

.unpaid-name {
  margin: 5px 0 0;
  color: var(--ink);
  font-size: .82rem;
  font-weight: 850;
}

.unpaid-items {
  margin: 9px 0;
  color: var(--muted);
  font-size: .74rem;
  line-height: 1.5;
}

.unpaid-card-foot > strong {
  font-size: 1rem;
}

.pay-btn {
  border: 1px solid var(--success-line);
  border-radius: 11px;
  padding: 9px 11px;
  background: var(--success);
  color: white;
  font-size: .74rem;
  font-weight: 950;
}

.close-sales-btn {
  width: 100%;
  margin-top: 16px;
  border: 1px solid var(--danger-line);
  border-radius: 15px;
  padding: 14px;
  background: var(--danger);
  color: white;
  font-weight: 950;
  box-shadow: 0 8px 18px rgba(194,65,65,.16);
}

.close-sales-btn:disabled {
  opacity: .45;
}

.history-divider {
  height: 1px;
  margin: 19px 0 12px;
  background: var(--line);
}

.sessions-history {
  display: grid;
  gap: 9px;
}

.session-history-card {
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 17px;
  background: white;
}

.session-history-top,
.session-history-bottom {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.session-history-top {
  align-items: flex-start;
}

.session-history-top strong {
  color: var(--maroon);
  font-size: .85rem;
}

.session-history-top span {
  color: var(--muted);
  font-size: .7rem;
  text-align: right;
}

.session-history-range {
  margin: 8px 0;
  color: var(--muted);
  font-size: .76rem;
  line-height: 1.4;
}

.session-history-bottom {
  align-items: center;
  padding-top: 9px;
  border-top: 1px dashed var(--line);
}

.session-history-total strong {
  display: block;
  color: var(--ink);
  font-size: 1rem;
}

.session-history-total small {
  color: var(--muted);
  font-size: .7rem;
}

.session-detail-btn {
  border: 1px solid var(--neutral-line);
  border-radius: 11px;
  padding: 8px 10px;
  background: var(--neutral-soft);
  color: var(--neutral-dark);
  font-size: .72rem;
  font-weight: 900;
}

.export-all-btn {
  margin-top: 13px;
}

.settle-order-info {
  margin: 12px 0 4px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: white;
}

.settle-order-info h3 {
  margin: 0;
  color: var(--maroon);
  font-size: 1rem;
}

.settle-order-info p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: .76rem;
}

.settle-items {
  margin-top: 9px;
  padding-top: 9px;
  border-top: 1px dashed var(--line);
  color: var(--muted);
  font-size: .76rem;
  line-height: 1.5;
}

.settle-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--line);
  font-weight: 900;
}

.session-detail-summary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  padding: 13px 0;
}

.detail-summary-card {
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: white;
}

.detail-summary-card.wide {
  grid-column: 1 / -1;
}

.detail-summary-card span {
  color: var(--muted);
  font-size: .7rem;
}

.detail-summary-card strong {
  display: block;
  margin-top: 4px;
  color: var(--maroon);
  font-size: .95rem;
}

.transaction-status {
  display: inline-block;
  margin-top: 7px;
  padding: 4px 7px;
  border-radius: 999px;
  font-size: .64rem;
  font-weight: 950;
}

.transaction-status.paid {
  background: #e7f5df;
  color: #3f7838;
}

.transaction-status.unpaid {
  background: #fff0c9;
  color: #8b5b00;
}

@media (max-width: 390px) {
  .session-gate {
    align-items: flex-start;
  }

  .start-session-btn {
    padding-inline: 9px;
  }
}


/* ===== V5.1 polish ===== */
.top-actions { display:flex; gap:8px; }
.session-transaction-filter { display:flex; gap:8px; overflow-x:auto; padding:2px 0 10px; scrollbar-width:none; }
.session-transaction-filter::-webkit-scrollbar { display:none; }
.session-filter-btn { flex:0 0 auto; border:1px solid var(--line); border-radius:999px; padding:8px 11px; background:white; color:var(--muted); font-size:.74rem; font-weight:900; }
.session-filter-btn.active { border-color:var(--orange); background:var(--cream); color:var(--maroon); }

.active-transactions-list { display:grid; gap:10px; }
.active-transaction-card { padding:13px; border:1px solid var(--line); border-radius:18px; background:white; box-shadow:0 4px 14px rgba(64,24,25,.04); }
.active-transaction-card.unpaid { border-color:#efcb7b; background:#fffaf0; }
.active-transaction-top, .active-transaction-bottom { display:flex; justify-content:space-between; gap:10px; align-items:flex-start; }
.active-transaction-top strong { color:var(--maroon); font-size:.82rem; }
.active-transaction-top time { color:var(--muted); font-size:.7rem; }
.active-customer { margin:6px 0 0; color:var(--ink); font-size:.82rem; font-weight:850; }
.active-items { margin:9px 0; padding:9px 0; border-top:1px dashed var(--line); border-bottom:1px dashed var(--line); color:var(--muted); font-size:.74rem; line-height:1.5; }
.active-transaction-bottom { align-items:center; }
.active-payment-meta { display:flex; flex-direction:column; gap:4px; }
.active-payment-meta span { color:var(--muted); font-size:.68rem; }
.active-payment-meta strong { color:var(--ink); font-size:1rem; }
.transaction-actions { display:flex; gap:7px; flex-wrap:wrap; justify-content:flex-end; }
.small-action-btn { border:1px solid var(--neutral-line); border-radius:11px; padding:8px 10px; background:var(--neutral-soft); color:var(--neutral-dark); font-size:.7rem; font-weight:900; }
.small-action-btn.primary { border-color:var(--success-line); background:var(--success); color:white; }
.small-action-btn.secondary { border-color:var(--neutral-line); background:var(--neutral-soft); color:var(--neutral-dark); }

.session-action-row { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:16px; }
.secondary-action-btn { border:1px solid var(--neutral-line); border-radius:15px; padding:13px 11px; background:var(--neutral-soft); color:var(--neutral-dark); font-weight:950; }
.close-sales-btn.inline-close { margin-top:0; }

.add-items-search { padding:12px 0 8px; }
.add-items-search input { width:100%; border:1px solid var(--line); border-radius:14px; padding:12px 13px; outline:0; background:white; color:var(--ink); }
.add-items-search input:focus { border-color:var(--orange); box-shadow:0 0 0 3px rgba(247,165,27,.16); }

.add-items-menu-list { display:grid; gap:8px; padding-bottom:98px; }
.add-item-card { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; align-items:center; padding:12px; border:1px solid var(--line); border-radius:15px; background:white; }
.add-item-card h4 { margin:0; color:var(--ink); font-size:.88rem; }
.add-item-card p { margin:4px 0 0; color:var(--muted); font-size:.7rem; }
.add-item-card .menu-price { margin-top:6px; font-size:.84rem; }
.add-item-qty { display:grid; grid-template-columns:38px 54px 38px; gap:5px; }
.add-item-qty button, .add-item-qty input { height:38px; }
.add-item-qty button { border:1px solid var(--neutral-line); border-radius:11px; background:var(--neutral-soft); color:var(--neutral-dark); font-weight:950; font-size:1.05rem; }
.add-item-qty button.plus { border-color:var(--success-line); background:var(--success-soft); color:var(--success-dark); }
.add-item-qty input { width:54px; border:1px solid var(--line); border-radius:10px; text-align:center; font-weight:900; color:var(--ink); background:white; }

.add-items-bottom { position:sticky; bottom:-18px; z-index:10; display:grid; grid-template-columns:auto minmax(0,1fr); gap:12px; align-items:center; margin:0 -16px -18px; padding:12px 16px calc(12px + env(safe-area-inset-bottom)); background:linear-gradient(to top, var(--paper) 88%, rgba(255,250,242,.92)); border-top:1px solid var(--line); }
.add-items-bottom span { display:block; color:var(--muted); font-size:.7rem; }
.add-items-bottom strong { color:var(--maroon); font-size:1.05rem; }

.session-history-actions { display:flex; gap:7px; }

@media (max-width:430px) {
  .session-action-row { grid-template-columns:1fr; }
  .active-transaction-bottom { align-items:flex-end; }
  .transaction-actions { max-width:48%; }
}


/* v5.2 - delete / void actions */
.active-item-row { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:3px 0; }
.active-item-row > span { min-width:0; }
.remove-line-btn { flex:0 0 auto; border:0; background:transparent; color:#b03232; font-size:.68rem; font-weight:900; padding:3px 0 3px 8px; cursor:pointer; }
.small-action-btn.danger { border-color:var(--danger-line); background:var(--danger-soft); color:var(--danger-dark); }
.active-transaction-card.voided, .history-card.voided { opacity:.68; }
.transaction-status.voided { background:#ece8e5; color:#6f625d; border-color:#d8d0cb; }

/* v5.3 - undo paid + delete archived transaction */
.history-delete-row {
  display:flex;
  justify-content:flex-end;
  margin-top:10px;
  padding-top:10px;
  border-top:1px dashed var(--line);
}


#exportHistory {
  border-color: var(--neutral-line);
  background: var(--neutral-soft);
  color: var(--neutral-dark);
}

button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(107,114,128,.18);
}

.complete-btn:focus-visible,
.checkout-btn:focus-visible,
.pay-btn:focus-visible,
.start-session-btn:focus-visible,
.small-action-btn.primary:focus-visible {
  box-shadow: 0 0 0 3px rgba(47,143,87,.20);
}

.danger-btn:focus-visible,
.close-sales-btn:focus-visible,
.small-action-btn.danger:focus-visible,
.remove-line-btn:focus-visible,
#resetTop.ghost-btn:focus-visible {
  box-shadow: 0 0 0 3px rgba(194,65,65,.18);
}


/* v5.5 - item price breakdown in transaction views */
.active-item-main {
  display:block;
  min-width:0;
}
.transaction-item-price {
  display:block;
  margin-top:4px;
  color:var(--neutral-dark);
  font-size:.7rem;
  font-weight:750;
}
.transaction-item-price strong {
  color:var(--ink);
  font-weight:950;
}
.settle-item-row,
.history-item-row {
  padding:8px 0;
  border-bottom:1px dashed var(--line);
}
.settle-item-row:last-child,
.history-item-row:last-child {
  border-bottom:0;
}
.settle-item-row > div,
.history-item-row > div {
  line-height:1.4;
}


/* ===== V5.6 - session label + delete full session history ===== */
.session-name-box {
  margin: 16px 0 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: white;
  text-align: left;
}

.session-name-box label {
  display: block;
  margin-bottom: 8px;
  color: var(--ink);
  font-size: .82rem;
  font-weight: 950;
}

.session-name-box input {
  width: 100%;
  border: 1px solid var(--neutral-line);
  border-radius: 12px;
  padding: 12px 13px;
  outline: 0;
  background: #fff;
  color: var(--ink);
  font-weight: 800;
}

.session-name-box input:focus {
  border-color: var(--success);
  box-shadow: 0 0 0 3px rgba(47,143,87,.14);
}

.session-name-box small {
  display: block;
  margin-top: 7px;
  color: var(--muted);
  font-size: .68rem;
}

.active-session-code {
  margin-top: 2px !important;
  font-size: .68rem !important;
  letter-spacing: .02em;
}

.session-history-name {
  min-width: 0;
}

.session-history-name strong {
  display: block;
  color: var(--ink);
  font-size: .92rem;
  line-height: 1.25;
}

.session-history-name small {
  display: block;
  margin-top: 4px;
  color: var(--maroon);
  font-size: .68rem;
  font-weight: 850;
  overflow-wrap: anywhere;
}

.session-delete-btn {
  border: 1px solid var(--danger-line);
  border-radius: 11px;
  padding: 8px 10px;
  background: var(--danger-soft);
  color: var(--danger-dark);
  font-size: .72rem;
  font-weight: 900;
}

.session-history-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* ===== V6.0 - mobile navigation and focused pages ===== */
button, input, textarea { font: inherit; }

.app-view[hidden] { display: none !important; }
.app-view { animation: view-in .18s ease both; }
@keyframes view-in { from { opacity: 0; transform: translateY(4px); } }

.page-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin: 4px 0 18px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: linear-gradient(135deg, #fff, #fff7ea);
  box-shadow: 0 6px 20px rgba(65,24,25,.055);
}
.page-heading h2 { margin: 3px 0 5px; font-size: 1.25rem; line-height: 1.1; }
.page-heading p:last-child { margin: 0; color: var(--muted); font-size: .78rem; line-height: 1.45; }
.transaction-title-row { align-items: center; margin-bottom: 10px; }
.transaction-title-row .session-transaction-filter { padding-bottom: 0; }

.bottom-nav {
  position: fixed;
  left: 50%;
  bottom: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  width: min(680px, 100%);
  transform: translateX(-50%);
  padding: 7px 8px calc(7px + env(safe-area-inset-bottom));
  border-top: 1px solid rgba(127,46,49,.13);
  background: rgba(255,250,242,.97);
  box-shadow: 0 -10px 32px rgba(68,22,24,.1);
  backdrop-filter: blur(16px);
}
.nav-item {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 54px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 2px;
  border: 0;
  border-radius: 15px;
  background: transparent;
  color: var(--muted);
}
.nav-item span { font-size: 1.2rem; font-weight: 900; line-height: 1; }
.nav-item small { font-size: .68rem; font-weight: 900; }
.nav-item.active { background: var(--cream); color: var(--maroon); }
.nav-item b {
  position: absolute;
  top: 3px;
  left: calc(50% + 8px);
  min-width: 18px;
  padding: 2px 5px;
  border-radius: 999px;
  background: var(--maroon);
  color: white;
  font-size: .6rem;
  line-height: 1.35;
}
.nav-item b.urgent { background: var(--danger); }

.cart-panel { display: none; }
.menu-view-active .cart-panel { display: block; bottom: calc(67px + env(safe-area-inset-bottom)); }
.menu-view-active { padding-bottom: calc(158px + env(safe-area-inset-bottom)); }
body:not(.menu-view-active) { padding-bottom: calc(82px + env(safe-area-inset-bottom)); }

.note-box textarea {
  width: 100%;
  min-height: 82px;
  resize: vertical;
  border: 1px solid var(--neutral-line);
  border-radius: 13px;
  padding: 12px 13px;
  outline: 0;
  background: white;
  color: var(--ink);
  line-height: 1.45;
}
.note-box textarea:focus { border-color: var(--orange); box-shadow: 0 0 0 3px rgba(247,165,27,.14); }
.note-box small { display: block; margin-top: 6px; text-align: right; color: var(--muted); font-size: .68rem; }
.transaction-note { margin: 9px 0; padding: 9px 10px; border-radius: 12px; background: #fff4df; border-left: 3px solid var(--orange); }
.transaction-note span { display: block; color: var(--maroon); font-size: .63rem; font-weight: 950; text-transform: uppercase; letter-spacing: .06em; }
.transaction-note p { margin: 3px 0 0; color: var(--ink); font-size: .76rem; line-height: 1.42; overflow-wrap: anywhere; }

.empty-page-state { display: grid; justify-items: center; gap: 7px; padding: 34px 18px; }
.empty-page-state strong { color: var(--ink); font-size: 1rem; }
.empty-page-state span { color: var(--muted); font-size: .78rem; }
.empty-state-action { margin-top: 5px; border: 0; border-radius: 12px; padding: 10px 14px; background: var(--maroon); color: white; font-weight: 900; }

#sessionView #noSessionPanel,
#sessionView #activeSessionPanel { max-width: 720px; margin-inline: auto; }
#historyView .sessions-history { display: grid; gap: 11px; }

@media (max-width: 600px) {
  .topbar { padding: 13px 14px 11px; }
  .topbar h1 { font-size: 1.28rem; }
  .subhead { max-width: 250px; margin-top: 5px; font-size: .72rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ghost-btn { min-height: 42px; padding: 9px 11px; }
  .app-shell { padding: 11px 11px 26px; }
  .toolbar { top: 76px; margin-inline: -11px; padding-inline: 11px; }
  .session-gate { margin-bottom: 10px; padding: 12px; border-radius: 16px; }
  .session-gate > div { min-width: 0; }
  .session-gate p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .start-session-btn { min-height: 42px; white-space: nowrap; }
  .search-wrap input { min-height: 44px; padding-block: 10px; }
  .category-tabs { gap: 7px; }
  .tab-btn { min-height: 40px; padding: 8px 12px; }
  .menu-grid { gap: 9px; }
  .menu-card { gap: 10px; padding: 12px; border-radius: 16px; }
  .menu-name { font-size: .92rem; }
  .menu-desc { font-size: .7rem; }
  .qty-btn { min-width: 40px; min-height: 42px; }
  .qty-input { min-height: 42px; }
  .page-heading { margin-top: 0; padding: 14px; border-radius: 17px; }
  .active-transaction-card { padding: 12px; border-radius: 16px; }
  .active-transaction-top { align-items: flex-start; }
  .active-transaction-top time { max-width: 102px; text-align: right; }
  .active-transaction-bottom { display: grid; gap: 10px; }
  .transaction-actions { max-width: none; justify-content: stretch; }
  .small-action-btn { min-height: 40px; flex: 1 1 auto; }
  .session-action-row { position: sticky; bottom: calc(66px + env(safe-area-inset-bottom)); z-index: 8; margin: 16px -11px -10px; padding: 10px 11px; background: rgba(255,250,242,.96); border-top: 1px solid var(--line); }
  .order-sheet { max-height: calc(100dvh - 18px); padding-bottom: calc(20px + env(safe-area-inset-bottom)); }
  .complete-btn, .danger-btn, .secondary-action-btn, .close-sales-btn { min-height: 48px; }
}

@media (min-width: 760px) {
  #historyView .sessions-history { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bottom-nav { bottom: 14px; border: 1px solid var(--line); border-radius: 22px; }
  .menu-view-active .cart-panel { bottom: 92px; }
}

/* ===== V6.1 - checklist menu per pesanan ===== */
.order-progress {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 10px 0 2px;
  padding: 9px 11px;
  border: 1px solid #efcb7b;
  border-radius: 12px;
  background: #fff8e7;
  color: #8a5a08;
  font-size: .72rem;
}
.order-progress.complete {
  border-color: var(--success-line);
  background: var(--success-soft);
  color: var(--success-dark);
}
.order-progress strong { font-weight: 950; }
.order-progress span { font-weight: 900; }

.checklist-row {
  align-items: center;
  justify-content: flex-start;
}
.checklist-row .active-item-main {
  flex: 1 1 0;
  width: 0;
  text-align: left;
}
.checklist-row .remove-line-btn {
  margin-left: auto;
}
.menu-check-btn {
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 2px solid #d7c4af;
  border-radius: 12px;
  background: white;
  color: white;
  font-size: 1.05rem;
  font-weight: 1000;
}
.menu-check-btn.checked {
  border-color: var(--success);
  background: var(--success);
}
.menu-check-btn:disabled { opacity: .45; cursor: not-allowed; }
.checklist-row.checked .active-item-main {
  opacity: .52;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}
.checklist-row.checked .transaction-item-price { text-decoration: none; }
.active-transaction-card.order-complete {
  border-color: var(--success-line);
  background: #fbfefc;
  opacity: .78;
}

@media (max-width: 600px) {
  .checklist-row { gap: 9px; padding-block: 7px; }
  .menu-check-btn { flex-basis: 42px; width: 42px; height: 42px; }
}

.login-gate { width: min(90vw, 380px); border: 0; border-radius: 18px; padding: 24px; color: #302526; }
.login-gate::backdrop { background: rgba(25, 15, 16, .85); }
.login-gate label { display: block; margin: 16px 0; }
.login-gate input { display: block; box-sizing: border-box; width: 100%; padding: 12px; margin-top: 6px; font: inherit; }
.login-gate button { padding: 12px 24px; background: #7f2e31; color: white; border: 0; border-radius: 10px; font: inherit; }

/* Dynamic menu management */
.catalog-toolbar, .catalog-actions, .catalog-form-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.catalog-toolbar > span { margin-left: auto; font-size: .85rem; color: var(--muted); }
.catalog-message { font-size: .85rem; line-height: 1.5; color: var(--muted); overflow-wrap: anywhere; }
.catalog-message.catalog-error { color: #a22b2b; }
.catalog-form { padding: 18px; margin: 16px 0; border: 1px solid var(--line); border-radius: 18px; background: #fff; }
.catalog-form fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.catalog-form label { display: block; margin: 12px 0; font-size: .9rem; font-weight: 700; }
.catalog-form input, .catalog-form textarea { display: block; width: 100%; box-sizing: border-box; margin-top: 7px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; font: inherit; background: white; color: var(--ink); }
.catalog-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.catalog-hint { font-size: .8rem; line-height: 1.5; color: var(--muted); }
.catalog-search { margin: 18px 0; }
.catalog-list { display: grid; gap: 12px; }
.catalog-card { display: flex; justify-content: space-between; gap: 16px; padding: 18px; border: 1px solid var(--line); border-radius: 16px; background: white; }
.catalog-info { min-width: 0; overflow-wrap: anywhere; }
.catalog-info h3 { margin: 6px 0; font-size: 1rem; }
.catalog-info p { margin: 0 0 10px; font-size: .85rem; color: var(--muted); white-space: pre-wrap; }
.catalog-info strong { color: var(--maroon); }
.catalog-actions { flex-shrink: 0; align-content: center; }
.catalog-defaults { padding: 18px; margin-top: 24px; border: 1px solid var(--line); border-radius: 16px; }
.catalog-defaults summary { cursor: pointer; font-weight: 700; }
.catalog-defaults p { font-size: .85rem; line-height: 1.5; }
@media (max-width: 480px) { .catalog-fields { grid-template-columns: 1fr; gap: 0; } .catalog-actions { flex-direction: column; justify-content: center; } .catalog-card { gap: 10px; padding: 14px; } }