/* Butterfly Coffee — Design System
   Elegant: deep forest green + serif + cream
*/

:root {
  /* Brand */
  --bf-brand: #1f3b2e;
  --bf-brand-deep: #142822;
  --bf-brand-mid: #2d5240;
  --bf-brand-sage: #6b8a78;
  --bf-brand-ink: #1a1f1c;

  /* Surfaces (classic theme defaults) */
  --bf-bg: #f5efe4;
  --bf-paper: #ffffff;
  --bf-paper-2: #faf6ec;
  --bf-line: #e6dfd0;
  --bf-line-strong: #cfc6b3;

  /* Text */
  --bf-ink: #1a1f1c;
  --bf-ink-2: #4a5048;
  --bf-mute: #8a8a7a;

  /* Accents */
  --bf-gold: #b88a52;
  --bf-gold-soft: #d9b687;
  --bf-warn: #b04a30;
  --bf-warn-soft: #e8a896;
  --bf-good: #4a7058;
  --bf-danger: #9b3a2e;

  /* Type */
  --bf-serif: 'Cormorant Garamond', 'Times New Roman', serif;
  --bf-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --bf-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* Spacing & shape */
  --bf-r-s: 4px;
  --bf-r: 8px;
  --bf-r-l: 14px;
  --bf-shadow-sm: 0 1px 2px rgba(20, 40, 34, .04), 0 0 0 1px rgba(20, 40, 34, .04);
  --bf-shadow: 0 4px 12px rgba(20, 40, 34, .06), 0 0 0 1px rgba(20, 40, 34, .05);
  --bf-shadow-lg: 0 12px 32px rgba(20, 40, 34, .10), 0 0 0 1px rgba(20, 40, 34, .05);
}

/* === Cream theme === */
[data-theme="cream"] {
  --bf-bg: #fbf6ea;
  --bf-paper: #ffffff;
  --bf-paper-2: #fdf9ef;
  --bf-line: #ede4cf;
}

/* === Night theme === */
[data-theme="dark"] {
  --bf-bg: #0f1e1a;
  --bf-paper: #1a2c25;
  --bf-paper-2: #213832;
  --bf-line: #2c4640;
  --bf-line-strong: #3a554d;
  --bf-ink: #f1ece1;
  --bf-ink-2: #c5c0b3;
  --bf-mute: #8a9189;
  --bf-brand: #f1ece1;
  --bf-brand-ink: #f1ece1;
}

/* === Base === */
* { box-sizing: border-box; }
html, body, #root {
  margin: 0; padding: 0;
  height: 100%;
  background: var(--bf-bg);
  color: var(--bf-ink);
  font-family: var(--bf-sans);
  font-size: 14px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
input, select { font: inherit; color: inherit; }

h1, h2, h3, h4 { margin: 0; font-weight: 500; }
h1, h2 { font-family: var(--bf-serif); letter-spacing: -0.01em; }

/* === App shell === */
.bf-app { display: flex; flex-direction: column; height: 100vh; min-height: 100vh; overflow: hidden; }
.bf-main { flex: 1; overflow: hidden; min-height: 0; display: flex; flex-direction: column; }

/* === Nav === */
.bf-nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 14px 24px;
  background: var(--bf-paper);
  border-bottom: 1px solid var(--bf-line);
  gap: 20px;
  flex-shrink: 0;
}
.bf-brand { display: flex; align-items: center; gap: 12px; }
.bf-brand-name {
  font-family: var(--bf-serif); font-size: 22px; font-weight: 500;
  color: var(--bf-brand-ink); letter-spacing: 0.01em; line-height: 1;
  white-space: nowrap;
}
.bf-brand-sub {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.18em;
  color: var(--bf-mute); margin-top: 3px;
  white-space: nowrap;
}
.bf-nav-links { display: flex; gap: 4px; background: var(--bf-paper-2); padding: 4px; border-radius: 999px; border: 1px solid var(--bf-line); }
.bf-nav-links button {
  padding: 8px 20px; border-radius: 999px;
  font-size: 13px; font-weight: 500; letter-spacing: 0.02em;
  color: var(--bf-ink-2);
  transition: all .15s ease;
  white-space: nowrap;
}
.bf-nav-links button[data-active="true"] {
  background: var(--bf-brand);
  color: #f7f3ec;
}
.bf-nav-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-size: 11px; min-width: 0; justify-self: end; white-space: nowrap; }
.bf-nav-date { color: var(--bf-mute); letter-spacing: 0.04em; white-space: nowrap; }
.bf-nav-time { font-family: var(--bf-mono); font-size: 14px; color: var(--bf-ink); font-weight: 500; white-space: nowrap; }

/* ============================================
   POS
   ============================================ */
.bf-pos {
  display: grid;
  grid-template-columns: 1fr 380px;
  height: 100%;
  background: var(--bf-bg);
  min-height: 0;
}
.bf-pos[data-density="compact"] { --pos-pad: 16px; --pos-gap: 10px; --tile-h: 130px; }
.bf-pos { --pos-pad: 24px; --pos-gap: 14px; --tile-h: 160px; }

.bf-pos-left { padding: var(--pos-pad); overflow-y: auto; display: flex; flex-direction: column; gap: 16px; }

.bf-pos-header { display: flex; flex-direction: column; gap: 14px; }
.bf-order-type {
  display: inline-flex; padding: 4px; gap: 4px;
  background: var(--bf-paper); border: 1px solid var(--bf-line);
  border-radius: 999px; align-self: flex-start;
}
.bf-order-type button {
  padding: 8px 22px; border-radius: 999px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--bf-ink-2);
  transition: all .15s ease;
  white-space: nowrap;
}
.bf-order-type button[data-active="true"] {
  background: var(--bf-brand); color: #f7f3ec;
}

.bf-popular { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; }
.bf-popular-label {
  font-family: var(--bf-serif); font-style: italic; font-size: 16px;
  color: var(--bf-ink-2); margin-right: 4px;
  white-space: nowrap;
}
.bf-popular-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px 6px 8px; border-radius: 999px;
  background: var(--bf-paper); border: 1px solid var(--bf-line);
  font-size: 12px; color: var(--bf-ink);
  transition: all .15s ease;
  white-space: nowrap;
}
.bf-popular-chip:hover { border-color: var(--bf-brand-mid); transform: translateY(-1px); }

.bf-cat-tabs {
  display: flex; gap: 4px; border-bottom: 1px solid var(--bf-line);
}
.bf-cat-tab {
  padding: 10px 18px;
  font-size: 13px; font-weight: 500;
  color: var(--bf-mute);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: all .15s ease;
  white-space: nowrap;
}
.bf-cat-tab.is-active { color: var(--bf-ink); border-bottom-color: var(--bf-brand); }
.bf-cat-tab:hover:not(.is-active) { color: var(--bf-ink-2); }

/* Menu grid */
.bf-menu-grid {
  display: grid;
  gap: var(--pos-gap);
}
.bf-grid-photo, .bf-grid-hybrid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.bf-grid-iconic { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }

.bf-menu-tile {
  display: flex; flex-direction: column;
  background: var(--bf-paper);
  border: 1px solid var(--bf-line);
  border-radius: var(--bf-r-l);
  overflow: hidden;
  text-align: left;
  transition: all .18s ease;
  position: relative;
}
.bf-menu-tile:hover {
  transform: translateY(-2px);
  border-color: var(--bf-brand-mid);
  box-shadow: var(--bf-shadow);
}
.bf-menu-tile.is-flash {
  animation: bfFlash .35s ease;
}
@keyframes bfFlash {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(45, 82, 64, .4); }
  50% { transform: scale(.97); box-shadow: 0 0 0 8px rgba(45, 82, 64, 0); }
  100% { transform: scale(1); }
}

.bf-menu-img {
  position: relative;
  width: 100%;
  height: var(--tile-h);
  display: flex; align-items: center; justify-content: center;
}
.bf-menu-img-stripes {
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(45deg, transparent 0 8px, rgba(247, 243, 236, 0.04) 8px 9px);
  pointer-events: none;
}
.bf-menu-glyph {
  font-size: 38px;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.3));
  opacity: 0.85;
}
.bf-grid-iconic .bf-menu-img { display: none; }
.bf-grid-hybrid .bf-menu-img { height: 80px; }

.bf-menu-meta { padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.bf-menu-name {
  font-family: var(--bf-serif); font-size: 17px; font-weight: 600;
  color: var(--bf-ink); line-height: 1.2;
}
.bf-menu-bottom { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; }
.bf-menu-price {
  font-family: 'Inter', 'Noto Sans Thai', sans-serif; font-size: 13px; font-weight: 600;
  color: var(--bf-ink-2);
  font-feature-settings: 'tnum';
}

/* Temp badge */
.bf-temp {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 9px; font-weight: 700; letter-spacing: 0.12em;
  font-family: var(--bf-sans);
  white-space: nowrap;
}
.bf-temp[data-temp="hot"] { background: rgba(176, 74, 48, 0.12); color: #b04a30; }
.bf-temp[data-temp="cold"] { background: rgba(74, 112, 88, 0.12); color: #2d5240; }
[data-theme="dark"] .bf-temp[data-temp="hot"] { background: rgba(232, 168, 150, 0.18); color: #e8a896; }
[data-theme="dark"] .bf-temp[data-temp="cold"] { background: rgba(155, 195, 175, 0.18); color: #9bc3af; }

/* ============================================
   POS — Cart (right side)
   ============================================ */
.bf-pos-right {
  background: var(--bf-paper);
  border-left: 1px solid var(--bf-line);
  display: flex; flex-direction: column;
  position: relative;
  overflow: hidden;
}
.bf-cart-head {
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--bf-line);
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 12px;
}
.bf-cart-head > div:first-child { min-width: 0; flex: 1; }
.bf-cart-title {
  font-family: var(--bf-serif); font-size: 24px; font-weight: 600;
  color: var(--bf-ink); margin-top: 2px;
  line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bf-cart-meta {
  font-family: var(--bf-mono); font-size: 10px;
  color: var(--bf-mute);
  flex-shrink: 0;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  white-space: nowrap;
  padding: 4px 8px;
  background: var(--bf-paper-2);
  border-radius: 999px;
  border: 1px solid var(--bf-line);
}
.bf-eyebrow {
  font-size: 11px; letter-spacing: 0.08em;
  color: var(--bf-mute); font-weight: 600;
  white-space: nowrap;
  line-height: 1.6;
  display: block;
}
/* Latin-only eyebrows still get uppercased for the original feel */
.bf-eyebrow:lang(en), .bf-cart-meta {
  text-transform: uppercase; letter-spacing: 0.16em;
}

.bf-cart-list {
  flex: 1; overflow-y: auto;
  padding: 12px;
  display: flex; flex-direction: column; gap: 8px;
}

.bf-line {
  display: grid; grid-template-columns: 4px 1fr;
  gap: 12px;
  padding: 12px 14px;
  background: var(--bf-paper);
  border: 1px solid var(--bf-line);
  border-radius: var(--bf-r-l);
  cursor: pointer;
  transition: all .15s ease;
  min-width: 0;
}
.bf-line:hover { border-color: var(--bf-line-strong); }
.bf-line.is-selected {
  border-color: var(--bf-brand-mid);
  background: var(--bf-paper-2);
  box-shadow: var(--bf-shadow-sm);
}
.bf-line-swatch {
  width: 4px; height: 100%; border-radius: 2px;
  align-self: stretch;
}
.bf-line-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1; }
.bf-line-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; min-width: 0; }
.bf-line-name {
  font-family: var(--bf-serif); font-size: 17px; font-weight: 600;
  color: var(--bf-ink); line-height: 1.2;
  min-width: 0;
  flex: 1;
  word-break: break-word;
}
.bf-line-x {
  width: 24px; height: 24px; border-radius: 999px;
  color: var(--bf-mute); font-size: 18px; line-height: 1;
  transition: all .15s ease;
}
.bf-line-x:hover { color: var(--bf-danger); background: rgba(155, 58, 46, .08); }
.bf-line-mods {
  font-size: 12px; color: var(--bf-mute);
  font-family: var(--bf-sans);
}
.bf-line-bottom { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; }
.bf-line-price {
  font-family: 'Inter', 'Noto Sans Thai', sans-serif; font-size: 14px; font-weight: 600;
  color: var(--bf-ink);
  font-feature-settings: 'tnum';
  white-space: nowrap;
}

/* Stepper */
.bf-stepper {
  display: inline-flex; align-items: center;
  background: var(--bf-paper-2);
  border: 1px solid var(--bf-line);
  border-radius: 999px;
  padding: 2px;
  gap: 2px;
}
.bf-stepper button {
  width: 26px; height: 26px; border-radius: 999px;
  font-size: 16px; line-height: 1;
  color: var(--bf-ink-2);
  transition: all .15s ease;
}
.bf-stepper button:hover { background: var(--bf-paper); color: var(--bf-ink); }
.bf-stepper-val {
  min-width: 22px; text-align: center;
  font-family: var(--bf-mono); font-size: 13px; font-weight: 500;
}

/* Mod panel */
.bf-mod-panel {
  background: var(--bf-paper-2);
  border-top: 1px solid var(--bf-line);
  padding: 16px 20px;
  display: flex; flex-direction: column; gap: 12px;
}
.bf-mod-row { display: flex; align-items: flex-start; gap: 12px; }
.bf-mod-label {
  font-family: var(--bf-serif); font-style: italic; font-size: 15px;
  color: var(--bf-ink-2);
  min-width: 48px; padding-top: 5px;
}
.bf-mod-opts { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; }

.bf-pill {
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--bf-paper);
  border: 1px solid var(--bf-line);
  font-size: 12px; font-weight: 500;
  color: var(--bf-ink-2);
  transition: all .12s ease;
  white-space: nowrap;
}
.bf-pill:hover { border-color: var(--bf-line-strong); }
.bf-pill.is-active {
  background: var(--bf-brand);
  border-color: var(--bf-brand);
  color: #f7f3ec;
}
.bf-mod-extra { color: var(--bf-gold); font-family: var(--bf-mono); font-size: 11px; margin-left: 2px; }
.bf-pill.is-active .bf-mod-extra { color: var(--bf-gold-soft); }

.bf-barista-note {
  background: var(--bf-paper);
  border: 1px solid var(--bf-line);
  border-left: 3px solid var(--bf-brand);
  border-radius: var(--bf-r);
  padding: 10px 14px;
  display: flex; flex-direction: column; gap: 3px;
}
.bf-barista-head {
  font-size: 11px; letter-spacing: 0.04em;
  color: var(--bf-brand); font-weight: 700;
  text-transform: uppercase;
}
.bf-barista-body { font-size: 13px; color: var(--bf-ink); }

/* Cart footer */
.bf-cart-foot {
  border-top: 1px solid var(--bf-line);
  padding: 16px 20px 20px;
  background: var(--bf-paper);
  display: flex; flex-direction: column; gap: 12px;
  flex-shrink: 0;
}
.bf-total-row {
  display: flex; align-items: baseline; justify-content: space-between;
  font-family: var(--bf-serif); font-size: 16px; color: var(--bf-ink-2);
  gap: 12px;
  white-space: nowrap;
}
.bf-total-row > span:first-child { font-style: italic; }
.bf-total-value {
  font-family: 'Inter', 'Noto Sans Thai', sans-serif; font-size: 28px; font-weight: 600;
  color: var(--bf-brand);
  white-space: nowrap;
  letter-spacing: -0.01em;
  font-feature-settings: 'tnum';
}
[data-theme="dark"] .bf-total-value { color: var(--bf-gold-soft); }
.bf-cart-actions { display: grid; grid-template-columns: 1fr 2fr; gap: 8px; }

.bf-btn {
  padding: 14px 20px;
  border-radius: var(--bf-r);
  font-size: 13px; font-weight: 600; letter-spacing: 0.04em;
  transition: all .15s ease;
  cursor: pointer;
}
.bf-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.bf-btn-primary { background: var(--bf-brand); color: #f7f3ec; }
.bf-btn-primary:not(:disabled):hover { background: var(--bf-brand-deep); }
.bf-btn-ghost { background: transparent; border: 1px solid var(--bf-line-strong); color: var(--bf-ink-2); }
.bf-btn-ghost:not(:disabled):hover { background: var(--bf-paper-2); }
.bf-btn-warn { background: var(--bf-warn); color: #fbf6ea; }
.bf-btn-warn:not(:disabled):hover { background: var(--bf-danger); }
.bf-btn-block { width: 100%; padding: 14px; }

.bf-pay-flash {
  position: absolute; inset: 0;
  background: rgba(20, 40, 34, 0.96);
  color: #f7f3ec;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px;
  font-family: var(--bf-serif); font-size: 22px;
  animation: bfFadeIn .3s ease;
  z-index: 50;
  text-align: center;
}
.bf-pay-flash-change {
  margin-top: 8px;
  padding: 14px 28px;
  border-radius: var(--bf-r-l);
  background: rgba(247, 243, 236, 0.08);
  border: 1px solid rgba(247, 243, 236, 0.18);
  display: flex; flex-direction: column; gap: 4px; align-items: center;
}
.bf-pay-flash-amt {
  font-family: 'Inter', sans-serif;
  font-size: 32px; font-weight: 600;
  color: var(--bf-gold-soft);
  font-feature-settings: 'tnum';
  letter-spacing: -0.01em;
}
@keyframes bfFadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ===== Payment Modal ===== */
.bf-pay-overlay {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(20, 40, 34, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  opacity: 1;
}
.bf-pay-sheet {
  width: min(480px, 100%);
  max-height: 90vh;
  background: var(--bf-paper);
  border-radius: 20px;
  box-shadow: 0 24px 60px rgba(20, 40, 34, 0.25), 0 0 0 1px rgba(20, 40, 34, 0.06);
  display: flex; flex-direction: column;
  overflow: hidden;
  opacity: 1;
}

.bf-pay-head {
  padding: 20px 24px 16px;
  display: flex; justify-content: space-between; align-items: flex-start;
  border-bottom: 1px solid var(--bf-line);
}
.bf-pay-title {
  font-family: var(--bf-serif); font-size: 20px; font-weight: 600;
  color: var(--bf-ink); margin-top: 4px;
}
.bf-pay-close {
  width: 32px; height: 32px; border-radius: 999px;
  background: var(--bf-paper-2);
  color: var(--bf-ink-2);
  font-size: 22px; line-height: 1;
  transition: all .15s ease;
}
.bf-pay-close:hover { background: var(--bf-line); color: var(--bf-ink); }

.bf-pay-amount {
  padding: 24px;
  text-align: center;
  background: linear-gradient(180deg, var(--bf-paper-2) 0%, var(--bf-paper) 100%);
  border-bottom: 1px solid var(--bf-line);
}
.bf-pay-total {
  font-family: 'Inter', 'IBM Plex Sans Thai', sans-serif;
  font-size: 56px; font-weight: 700;
  color: var(--bf-brand);
  line-height: 1;
  letter-spacing: -0.02em;
  font-feature-settings: 'tnum';
}
[data-theme="dark"] .bf-pay-total { color: var(--bf-gold-soft); }
.bf-pay-meta {
  margin-top: 8px;
  font-size: 13px;
  color: var(--bf-mute);
}

.bf-pay-method {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 16px 24px 0;
}
.bf-pay-method-btn {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 14px;
  background: var(--bf-paper);
  border: 1px solid var(--bf-line);
  border-radius: var(--bf-r);
  font-size: 13px; font-weight: 500;
  color: var(--bf-ink-2);
  transition: all .15s ease;
  position: relative;
}
.bf-pay-method-btn:not(:disabled):hover {
  border-color: var(--bf-brand-mid);
}
.bf-pay-method-btn.is-active {
  background: var(--bf-brand);
  border-color: var(--bf-brand);
  color: #f7f3ec;
}
.bf-pay-method-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.bf-pay-method-icon {
  font-family: 'Inter', sans-serif;
  font-size: 18px; font-weight: 600;
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
}
.bf-pay-method-btn:not(.is-active) .bf-pay-method-icon {
  background: var(--bf-paper-2);
  color: var(--bf-ink-2);
}
.bf-pay-method-btn em {
  font-style: normal;
  font-size: 10px;
  color: var(--bf-mute);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 2px;
}

.bf-pay-field {
  padding: 16px 24px;
  display: flex; flex-direction: column; gap: 10px;
}
.bf-pay-field > label {
  font-size: 12px;
  color: var(--bf-ink-2); font-weight: 600;
}
.bf-pay-input-wrap {
  position: relative;
  display: flex; align-items: center;
}
.bf-pay-currency {
  position: absolute;
  left: 16px;
  font-family: 'Inter', sans-serif;
  font-size: 24px;
  font-weight: 500;
  color: var(--bf-mute);
}
.bf-pay-input {
  flex: 1;
  padding: 14px 16px 14px 44px;
  border: 2px solid var(--bf-line);
  background: var(--bf-paper-2);
  border-radius: var(--bf-r);
  font-family: 'Inter', sans-serif;
  font-size: 24px; font-weight: 600;
  color: var(--bf-ink);
  font-feature-settings: 'tnum';
  transition: all .15s ease;
  -moz-appearance: textfield;
}
.bf-pay-input::-webkit-outer-spin-button,
.bf-pay-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.bf-pay-input:focus {
  outline: none;
  border-color: var(--bf-brand-mid);
  background: var(--bf-paper);
  box-shadow: 0 0 0 4px rgba(45, 82, 64, 0.1);
}

.bf-pay-suggest {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.bf-pay-chip {
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--bf-paper);
  border: 1px solid var(--bf-line);
  font-size: 13px; font-weight: 500;
  color: var(--bf-ink-2);
  font-feature-settings: 'tnum';
  transition: all .12s ease;
}
.bf-pay-chip:hover {
  border-color: var(--bf-brand-mid);
  color: var(--bf-ink);
}
.bf-pay-chip.is-exact {
  background: var(--bf-paper-2);
  border-color: var(--bf-brand-mid);
  color: var(--bf-brand);
  font-weight: 600;
}

.bf-pay-change {
  margin: 0 24px 16px;
  padding: 16px 20px;
  border-radius: var(--bf-r);
  background: var(--bf-paper-2);
  border: 1px solid var(--bf-line);
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  transition: all .2s ease;
}
.bf-pay-change-label {
  font-size: 13px;
  color: var(--bf-ink-2);
  font-weight: 500;
  white-space: nowrap;
  flex-shrink: 0;
}
.bf-pay-change-value {
  font-family: 'Inter', sans-serif;
  font-size: 28px; font-weight: 700;
  color: var(--bf-mute);
  font-feature-settings: 'tnum';
  letter-spacing: -0.01em;
}
.bf-pay-change.is-ready {
  background: rgba(74, 112, 88, 0.08);
  border-color: var(--bf-good);
}
.bf-pay-change.is-ready .bf-pay-change-value { color: var(--bf-good); }
.bf-pay-change.is-ready .bf-pay-change-label { color: var(--bf-good); font-weight: 600; }
.bf-pay-change.is-short {
  background: rgba(176, 74, 48, 0.06);
  border-color: var(--bf-warn-soft);
}
.bf-pay-change.is-short .bf-pay-change-label { color: var(--bf-warn); font-weight: 600; }

.bf-pay-foot {
  padding: 16px 24px 24px;
  display: grid; grid-template-columns: 1fr 2fr;
  gap: 8px;
  border-top: 1px solid var(--bf-line);
}

@media (max-width: 540px) {
  .bf-pay-sheet { width: 100%; border-radius: 16px 16px 0 0; align-self: flex-end; }
  .bf-pay-overlay { padding: 0; align-items: flex-end; }
  .bf-pay-total { font-size: 44px; }
}

/* Empty state */
.bf-empty {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 40px 32px; text-align: center; gap: 14px;
  color: var(--bf-mute);
  min-height: 200px;
}
.bf-empty-icon { opacity: 0.4; font-size: 28px; }
.bf-empty-title { font-family: var(--bf-serif); font-size: 17px; color: var(--bf-ink-2); max-width: 240px; line-height: 1.3; }
.bf-empty-hint { font-size: 12px; color: var(--bf-mute); max-width: 240px; }

/* ============================================
   Dashboard
   ============================================ */
.bf-dashboard {
  padding: 24px 32px;
  overflow-y: auto;
  display: flex; flex-direction: column; gap: 20px;
}

.bf-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.bf-section-head > div:first-child { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.bf-section-title { font-family: var(--bf-serif); font-size: 34px; font-weight: 600; color: var(--bf-ink); line-height: 1.15; white-space: nowrap; letter-spacing: -0.005em; }
.bf-section-head .bf-eyebrow { margin-bottom: 6px; }
.bf-time-pills { display: flex; gap: 4px; }

.bf-kpi-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.bf-stat {
  background: var(--bf-paper);
  border: 1px solid var(--bf-line);
  border-radius: var(--bf-r-l);
  padding: 18px 20px;
  display: flex; flex-direction: column; gap: 6px;
  position: relative;
}
.bf-stat[data-accent="primary"] { border-color: var(--bf-brand-mid); background: linear-gradient(135deg, var(--bf-paper) 0%, var(--bf-paper-2) 100%); }
.bf-stat[data-accent="good"]::before,
.bf-stat[data-accent="warn"]::before,
.bf-stat[data-accent="primary"]::before {
  content: ''; position: absolute; left: 0; top: 18px; bottom: 18px; width: 3px; border-radius: 2px;
}
.bf-stat[data-accent="good"]::before { background: var(--bf-good); }
.bf-stat[data-accent="warn"]::before { background: var(--bf-warn); }
.bf-stat[data-accent="primary"]::before { background: var(--bf-brand); }

.bf-stat-label { font-size: 12px; letter-spacing: 0.02em; color: var(--bf-ink-2); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bf-stat-value { font-family: 'Inter', 'Noto Sans Thai', sans-serif; font-size: 32px; font-weight: 600; color: var(--bf-ink); line-height: 1.05; font-feature-settings: 'tnum'; letter-spacing: -0.015em; }
.bf-stat-meta { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--bf-ink-2); white-space: nowrap; flex-wrap: wrap; }
.bf-stat-sub { color: var(--bf-mute); }
.bf-delta { font-family: var(--bf-mono); font-size: 11px; font-weight: 600; }
.bf-delta.pos { color: var(--bf-good); }
.bf-delta.neg { color: var(--bf-warn); }

.bf-dash-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.bf-span-2 { grid-column: span 2; }
.bf-span-3 { grid-column: span 3; }

/* Card */
.bf-card {
  background: var(--bf-paper);
  border: 1px solid var(--bf-line);
  border-radius: var(--bf-r-l);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.bf-card-head {
  padding: 14px 18px 12px;
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--bf-line);
  flex-wrap: wrap;
}
.bf-card-head > div:first-child { min-width: 0; flex: 1; }
.bf-card-title { font-family: var(--bf-serif); font-size: 20px; font-weight: 600; color: var(--bf-ink); line-height: 1.25; }
.bf-card-sub { font-size: 12px; color: var(--bf-mute); margin-top: 4px; white-space: nowrap; font-weight: 500; }
.bf-card-body { padding: 16px 20px; flex: 1; }
.bf-card-body-flush { padding: 0; }

.bf-link {
  font-size: 12px; color: var(--bf-brand); font-weight: 500;
  transition: all .15s ease;
}
[data-theme="dark"] .bf-link { color: var(--bf-gold-soft); }
.bf-link:hover { text-decoration: underline; }

/* Bars (7-day chart) */
.bf-bars {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 10px;
  align-items: end;
  position: relative;
  padding-bottom: 30px;
  min-height: 220px;
}
.bf-bar-col { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.bf-bar-track {
  width: 100%; max-width: 48px;
  height: 160px;
  background: var(--bf-paper-2);
  border-radius: var(--bf-r);
  display: flex; flex-direction: column-reverse;
  overflow: hidden;
  border: 1px solid var(--bf-line);
}
.bf-bar-cost { background: var(--bf-gold-soft); }
.bf-bar-profit { background: var(--bf-brand); }
.bf-bar-col.is-today .bf-bar-profit {
  background: repeating-linear-gradient(45deg, var(--bf-brand) 0 6px, var(--bf-brand-mid) 6px 12px);
}
.bf-bar-label { font-family: var(--bf-sans); font-size: 13px; color: var(--bf-ink-2); white-space: nowrap; font-weight: 600; }
.bf-bar-col.is-today .bf-bar-label { color: var(--bf-brand); font-weight: 600; }
.bf-bar-value { font-family: 'Inter', 'Noto Sans Thai', sans-serif; font-size: 10px; color: var(--bf-mute); font-weight: 500; font-feature-settings: 'tnum'; }
.bf-bar-col.is-today .bf-bar-value { color: var(--bf-ink); }

.bf-bar-legend {
  position: absolute; bottom: 0; left: 0; right: 0;
  display: flex; gap: 16px; justify-content: center;
  font-size: 11px; color: var(--bf-ink-2);
  white-space: nowrap;
}
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 4px; vertical-align: middle; }
.dot-profit { background: var(--bf-brand); }
.dot-cost { background: var(--bf-gold-soft); }

/* Heatmap */
.bf-heat { display: flex; flex-direction: column; gap: 6px; }
.bf-heat-row { display: grid; grid-template-columns: repeat(11, 1fr); gap: 4px; }
.bf-heat-cell {
  aspect-ratio: 1;
  border-radius: var(--bf-r-s);
  background: rgba(45, 82, 64, calc(0.08 + var(--i, 0) * 0.85));
  display: flex; align-items: center; justify-content: center;
  position: relative;
  border: 1px solid transparent;
}
.bf-heat-cell.is-future { background: var(--bf-paper-2); border-color: var(--bf-line); }
.bf-heat-num {
  font-family: var(--bf-mono); font-size: 10px; font-weight: 600;
  color: rgba(247, 243, 236, .95);
  mix-blend-mode: difference;
}
.bf-heat-cell[style*="0.00"] .bf-heat-num,
.bf-heat-cell.is-future .bf-heat-num { color: var(--bf-mute); mix-blend-mode: normal; }
.bf-heat-axis { display: grid; grid-template-columns: repeat(11, 1fr); gap: 4px; font-family: var(--bf-mono); font-size: 9px; color: var(--bf-mute); text-align: center; }

/* Ranking */
.bf-rank { display: flex; flex-direction: column; gap: 8px; }
.bf-rank-row {
  display: grid;
  grid-template-columns: 22px 16px 1fr auto auto;
  align-items: center;
  gap: 10px;
  padding: 4px 0;
}
.bf-rank-pos {
  font-family: var(--bf-serif); font-style: italic; font-size: 18px;
  color: var(--bf-gold); font-weight: 600;
}
.bf-rank-swatch { width: 16px; height: 16px; border-radius: 4px; }
.bf-rank-name { font-size: 14px; color: var(--bf-ink); font-weight: 500; min-width: 0; }
.bf-rank-track {
  width: 80px; height: 4px;
  background: var(--bf-paper-2); border-radius: 2px;
  position: relative; overflow: hidden;
}
.bf-rank-fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--bf-brand); border-radius: 2px; }
.bf-rank-value { font-family: 'Inter', 'Noto Sans Thai', sans-serif; font-size: 12px; font-weight: 600; color: var(--bf-ink); min-width: 60px; text-align: right; font-feature-settings: 'tnum'; }
.bf-rank-cups { font-family: 'Inter', 'Noto Sans Thai', sans-serif; font-size: 12px; color: var(--bf-ink-2); font-feature-settings: 'tnum'; }
.bf-rank-compact { grid-template-columns: 22px 16px 1fr auto; }

/* Inventory grid */
.bf-inv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
}
.bf-inv-tile {
  background: var(--bf-paper-2);
  border: 1px solid var(--bf-line);
  border-radius: var(--bf-r);
  padding: 12px 14px;
  display: flex; flex-direction: column; gap: 6px;
}
.bf-inv-tile[data-status="danger"] { border-color: var(--bf-warn); background: rgba(176, 74, 48, .04); }
.bf-inv-tile[data-status="warn"] { border-color: var(--bf-gold-soft); background: rgba(184, 138, 82, .04); }
.bf-inv-name { font-size: 14px; font-weight: 600; color: var(--bf-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bf-inv-stock {
  font-family: 'Inter', 'Noto Sans Thai', sans-serif; font-size: 22px; font-weight: 600;
  color: var(--bf-ink); line-height: 1;
  font-feature-settings: 'tnum';
  letter-spacing: -0.01em;
}
.bf-inv-stock span { font-size: 11px; color: var(--bf-mute); font-family: var(--bf-sans); margin-left: 3px; }
.bf-inv-burn { font-size: 10px; color: var(--bf-mute); font-family: var(--bf-mono); }

.bf-supply { display: flex; flex-direction: column; gap: 3px; margin-top: 2px; }
.bf-supply-bar { height: 4px; background: var(--bf-line); border-radius: 2px; overflow: hidden; }
.bf-supply-fill { height: 100%; border-radius: 2px; background: var(--bf-good); transition: width .3s ease; }
.bf-supply[data-status="warn"] .bf-supply-fill { background: var(--bf-gold); }
.bf-supply[data-status="danger"] .bf-supply-fill { background: var(--bf-warn); }
.bf-supply-label {
  font-family: var(--bf-mono); font-size: 10px;
  color: var(--bf-ink-2); font-weight: 600;
}
.bf-supply[data-status="danger"] .bf-supply-label { color: var(--bf-warn); }
.bf-supply[data-status="warn"] .bf-supply-label { color: var(--bf-gold); }

/* Story layout (alternative dashboard) */
.bf-dashboard[data-layout="story"] .bf-dash-grid { grid-template-columns: 1fr; }
.bf-dashboard[data-layout="story"] .bf-span-2,
.bf-dashboard[data-layout="story"] .bf-span-3 { grid-column: span 1; }
.bf-dashboard[data-layout="story"] .bf-kpi-row { grid-template-columns: repeat(2, 1fr); }

/* ============================================
   Records
   ============================================ */
.bf-records {
  padding: 24px 32px;
  overflow-y: auto;
  display: flex; flex-direction: column; gap: 20px;
  max-width: 980px;
  margin: 0 auto;
  width: 100%;
}

.bf-rec-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--bf-line); }
.bf-rec-tabs button {
  padding: 12px 24px;
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 500;
  color: var(--bf-mute);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: all .15s ease;
  white-space: nowrap;
}
.bf-rec-tabs button em { font-style: normal; font-family: var(--bf-mono); font-size: 11px; color: var(--bf-mute); margin-left: 4px; }
.bf-rec-tabs button.is-active { color: var(--bf-ink); border-bottom-color: var(--bf-brand); }
.bf-rec-tab-dot { width: 8px; height: 8px; border-radius: 999px; }
.bf-rec-dot-buy { background: var(--bf-good); }
.bf-rec-dot-loss { background: var(--bf-warn); }

.bf-rec-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }

.bf-form { display: flex; flex-direction: column; gap: 14px; }
.bf-field { display: flex; flex-direction: column; gap: 6px; flex: 1; }
.bf-field label {
  font-size: 12px; letter-spacing: 0.02em;
  color: var(--bf-ink-2); font-weight: 600;
}
.bf-field label em { font-style: normal; font-family: var(--bf-mono); text-transform: none; letter-spacing: 0; }
.bf-field input, .bf-field select {
  padding: 10px 12px;
  border: 1px solid var(--bf-line);
  background: var(--bf-paper);
  border-radius: var(--bf-r);
  font-size: 14px;
  color: var(--bf-ink);
  transition: all .15s ease;
}
.bf-field input:focus, .bf-field select:focus {
  outline: none;
  border-color: var(--bf-brand-mid);
  box-shadow: 0 0 0 3px rgba(45, 82, 64, .1);
}
.bf-field-row { display: flex; gap: 12px; }
.bf-radio-row { display: flex; flex-wrap: wrap; gap: 6px; }
.bf-suggest {
  font-size: 11px; color: var(--bf-brand);
  text-align: left; padding: 4px 0 0;
  text-decoration: underline;
}
[data-theme="dark"] .bf-suggest { color: var(--bf-gold-soft); }

.bf-rec-list { display: flex; flex-direction: column; gap: 8px; }
.bf-rec-item {
  padding: 12px 14px;
  background: var(--bf-paper-2);
  border: 1px solid var(--bf-line);
  border-radius: var(--bf-r);
  display: flex; flex-direction: column; gap: 4px;
}
.bf-rec-item-top {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  font-family: 'Inter', 'Noto Sans Thai', sans-serif; font-size: 15px; color: var(--bf-ink); font-weight: 500;
  white-space: nowrap;
}
.bf-rec-item-top strong { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; flex: 1; }
.bf-rec-item-top span { font-family: 'Inter', 'Noto Sans Thai', sans-serif; font-size: 13px; color: var(--bf-good); font-weight: 600; font-feature-settings: 'tnum'; white-space: nowrap; flex-shrink: 0; }
.bf-rec-item-detail { font-size: 12px; color: var(--bf-ink-2); }
.bf-rec-item-bot { display: flex; justify-content: space-between; font-size: 11px; color: var(--bf-mute); font-family: 'Inter', 'Noto Sans Thai', sans-serif; white-space: nowrap; gap: 8px; }
.bf-loss-amt { color: var(--bf-warn) !important; }

/* ============================================
   Scrollbars (subtle)
   ============================================ */
.bf-cart-list::-webkit-scrollbar,
.bf-pos-left::-webkit-scrollbar,
.bf-dashboard::-webkit-scrollbar,
.bf-records::-webkit-scrollbar { width: 8px; height: 8px; }
.bf-cart-list::-webkit-scrollbar-thumb,
.bf-pos-left::-webkit-scrollbar-thumb,
.bf-dashboard::-webkit-scrollbar-thumb,
.bf-records::-webkit-scrollbar-thumb { background: var(--bf-line-strong); border-radius: 4px; }
.bf-cart-list::-webkit-scrollbar-track,
.bf-pos-left::-webkit-scrollbar-track,
.bf-dashboard::-webkit-scrollbar-track,
.bf-records::-webkit-scrollbar-track { background: transparent; }

/* ============================================
   Responsive — keep iPad portrait usable
   ============================================ */
@media (max-width: 1100px) {
  .bf-pos { grid-template-columns: 1fr 360px; }
  .bf-dash-grid { grid-template-columns: repeat(2, 1fr); }
  .bf-span-2, .bf-span-3 { grid-column: span 2; }
  .bf-kpi-row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 820px) {
  .bf-nav { grid-template-columns: 1fr 1fr; }
  .bf-nav-meta { display: none; }
  .bf-pos { grid-template-columns: 1fr; }
  .bf-pos-right { border-left: 0; border-top: 1px solid var(--bf-line); }
  .bf-rec-grid { grid-template-columns: 1fr; }
}

/* ============================================
   Mobile phone — cart as bottom drawer
   ============================================ */
.bf-mobile-bar { display: none; }

@media (max-width: 680px) {
  /* Nav: tighter */
  .bf-nav { padding: 10px 14px; gap: 8px; }
  .bf-brand-name { font-size: 17px; }
  .bf-nav-links button { padding: 7px 12px; font-size: 12px; }

  /* POS: menu fills screen, cart slides up from bottom */
  .bf-pos {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    position: relative;
  }
  .bf-pos-left {
    padding-bottom: 88px; /* room for cart bar */
    height: 100%;
  }

  /* Cart: fixed bottom drawer */
  .bf-pos-right {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    height: auto;
    max-height: 82vh;
    border-left: none;
    border-top: none;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -6px 28px rgba(20, 40, 34, .18);
    z-index: 60;
    transition: transform .32s cubic-bezier(0.32, 0, 0.15, 1);
    transform: translateY(calc(100% - 72px));
    overflow: hidden;
  }
  .bf-pos-right[data-open="true"] {
    transform: translateY(0);
  }

  /* Mobile cart bar — shown only on phone */
  .bf-mobile-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px 10px;
    cursor: pointer;
    user-select: none;
    flex-shrink: 0;
    background: var(--bf-paper);
    position: relative;
    border-bottom: 1px solid var(--bf-line);
  }
  .bf-mobile-bar-handle {
    position: absolute;
    top: 7px; left: 50%; transform: translateX(-50%);
    width: 36px; height: 4px;
    background: var(--bf-line-strong);
    border-radius: 2px;
  }

  /* Hide desktop cart head on mobile */
  .bf-cart-head { display: none; }

  /* Cart list: constrain height so it scrolls internally */
  .bf-cart-list { max-height: calc(82vh - 200px); }

  /* Menu grid: 2 columns compact */
  .bf-menu-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .bf-tile-h { --tile-h: 130px; }

  /* Records/Admin scrollable */
  .bf-rec-grid { grid-template-columns: 1fr; }
}