/* fiveanddime — minimal mobile-first styling */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: #1a202c;
  background: #f7fafc;
}

#app {
  max-width: 1200px;
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: #f7fafc;
}

/* ---------- Top strip (always visible) ---------- */

#top-strip {
  position: sticky; top: 0; z-index: 50;
  display: flex;
  gap: 0.4rem;
  padding: 0.5rem 0.75rem;
  background: #2c5282;
  padding-top: max(0.5rem, env(safe-area-inset-top));
}
.top-chip {
  width: auto; margin: 0;
  padding: 0.35rem 0.7rem;
  background: rgba(255,255,255,0.15);
  color: white;
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}
.top-chip:hover { background: rgba(255,255,255,0.25); }
.top-chip.sync-chip.ok      { background: #22543d; border-color: #38a169; }
.top-chip.sync-chip.error   { background: #742a2a; border-color: #c53030; }
.top-chip.sync-chip.pending { background: #744210; border-color: #d69e2e; }
.event-chip {
  flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis;
  text-align: center;
}
.event-chip.warn { background: #d69e2e; border-color: #b7791f; }
.event-chip.test { background: #b7791f; border-color: #975a16; }
.cart-chip.empty { opacity: 0.55; }

/* ---------- Bottom nav (Sale / History / Settings) ---------- */

#bottom-nav {
  position: sticky; bottom: 0; z-index: 50;
  display: flex;
  background: white;
  border-top: 1px solid #cbd5e0;
  padding-bottom: env(safe-area-inset-bottom);
}
#bottom-nav button {
  flex: 1;
  width: auto; margin: 0;
  border: none; border-radius: 0;
  background: white; color: #4a5568;
  font-weight: 600;
  padding: 0.9rem 0;
  font-size: 0.95rem;
}
#bottom-nav button.active { color: #2c5282; background: #ebf8ff; }
#bottom-nav button:hover  { background: #f7fafc; }

/* Settings nav button has both a text label and a gear icon. Wider screens
   show the word; phones (≤480px) collapse to the icon to claw back space
   for the four remaining text tabs. */
#bottom-nav .nav-label-icon { display: none; font-size: 1.35rem; line-height: 1; }
@media (max-width: 480px) {
  #bottom-nav .nav-label-full { display: none; }
  #bottom-nav .nav-label-icon { display: inline; }
}

/* ---------- Main content ---------- */

#main {
  flex: 1;
  padding: 1rem;
}

h2 {
  font-size: 1.1rem;
  margin: 0 0 0.75rem;
  color: #2d3748;
}

h3 {
  font-size: 0.95rem;
  margin: 1rem 0 0.5rem;
  color: #4a5568;
}

section {
  background: white;
  border-radius: 8px;
  padding: 1rem;
  margin: 0 0 1rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

label {
  display: block;
  margin: 0.75rem 0 0.25rem;
  font-weight: 500;
  font-size: 0.9rem;
  color: #4a5568;
}

input, select, button {
  font: inherit;
  padding: 0.6rem;
  border-radius: 6px;
  border: 1px solid #cbd5e0;
  width: 100%;
  background: white;
}

input:focus, select:focus {
  outline: none;
  border-color: #2c5282;
  box-shadow: 0 0 0 2px rgba(44, 82, 130, 0.2);
}

button {
  background: #2c5282;
  color: white;
  border: none;
  cursor: pointer;
  font-weight: 500;
  margin-top: 0.5rem;
}
button:hover  { background: #2a4365; }
button:active { background: #1a365d; }
button:disabled { background: #a0aec0; cursor: not-allowed; }

button.secondary { background: #718096; }
button.secondary:hover { background: #4a5568; }

.status {
  padding: 0.6rem 0.8rem;
  border-radius: 6px;
  margin: 0.75rem 0 0;
  font-size: 0.9rem;
}
.status.ok      { background: #c6f6d5; color: #22543d; }
.status.error   { background: #fed7d7; color: #742a2a; }
.status.warn    { background: #fefcbf; color: #744210; }
.status.pending { background: #fefcbf; color: #744210; }
.status.muted   { background: #edf2f7; color: #4a5568; }

/* License banner — sits above <main>, persistent across view switches.
   Shown by app.js applyLicenseUi when license is in 'cached' (warn) or
   'invalid'/'expired' (error) modes. Hidden in legacy/licensed modes. */
.license-banner {
  padding: 0.6rem 0.9rem;
  font-size: 0.92rem;
  font-weight: 500;
  text-align: center;
  line-height: 1.4;
}
.license-banner.warn  { background: #fefcbf; color: #744210; border-bottom: 2px solid #d69e2e; }
.license-banner.error { background: #fed7d7; color: #742a2a; border-bottom: 2px solid #c53030; }

/* Collapsible Settings sections — each <section> wraps a <details
   class="settings-collapsible"> with a <summary><h2>...</h2></summary>
   header. Open by default for the most-used sections (Sync, plus Settings
   when no backendUrl, plus License when not yet validated); closed otherwise. */
.settings-collapsible > summary {
  cursor: pointer;
  list-style: none;
  user-select: none;
  padding: 0.1rem 0;
}
/* Hide the browser's default disclosure marker so we can render our own. */
.settings-collapsible > summary::-webkit-details-marker { display: none; }
.settings-collapsible > summary::marker { content: ''; }
.settings-collapsible > summary::before {
  content: '▸';
  display: inline-block;
  margin-right: 0.5rem;
  color: #4a5568;
  font-size: 0.8em;
  transition: transform 0.15s ease;
}
.settings-collapsible[open] > summary::before {
  transform: rotate(90deg);
}
.settings-collapsible > summary > h2 {
  display: inline;
  margin: 0;
  font-size: 1.25rem;
}
.settings-collapsible[open] > summary {
  margin-bottom: 0.75rem;
}

/* Edit-product form (Settings → Edit product, Phase B Management UI) */
.prod-edit-search-row {
  display: flex;
  gap: 0.5rem;
  align-items: stretch;
  margin: 0.5rem 0 0.25rem;
}
/* Override the global `input, select, button { width: 100% }` and the
   `button { margin-top: 0.5rem }` rules so the flex layout works. */
.prod-edit-search-row > input[type="text"] {
  flex: 1 1 0;
  width: auto;
  min-width: 0;
}
.prod-edit-search-row > button {
  flex: 0 0 auto;
  width: auto;
  margin-top: 0;
  white-space: nowrap;
}
.prod-edit-form {
  margin-top: 0.5rem;
  padding: 0.75rem;
  background: #f7fafc;
  border: 1px solid #cbd5e0;
  border-radius: 8px;
}
.prod-edit-mode-line {
  margin-bottom: 0.5rem;
  font-style: italic;
}
.prod-edit-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem 1rem;
  margin: 0.25rem 0;
}
@media (max-width: 600px) {
  .prod-edit-fields { grid-template-columns: 1fr; }
}
.prod-edit-fields > label {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-size: 0.92rem;
}
.prod-edit-fields > label.checkbox-label {
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
}
/* Global \`input { width: 100%; padding: 0.6rem }\` would stretch the
   checkbox itself to full width and inflate it, pushing the label text
   to wrap underneath. Override for checkboxes specifically. */
.prod-edit-fields > label.checkbox-label > input[type="checkbox"] {
  width: auto;
  flex: 0 0 auto;
  padding: 0;
  margin: 0;
}
/* Inline field helpers — sit just below each input (or inline with the
   label text for checkboxes). Smaller + tighter line height than .muted. */
.field-help {
  font-size: 0.78rem;
  line-height: 1.35;
}
.prod-edit-advanced {
  margin: 0.5rem 0;
}
.prod-edit-advanced > summary {
  cursor: pointer;
  font-weight: 500;
  padding: 0.4rem 0;
  color: #2c5282;
}
.prod-edit-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.5rem;
}
.prod-edit-actions > button {
  flex: 0 1 auto;
  width: auto;
  margin-top: 0;
}
.prod-edit-actions > button#prod-edit-submit {
  flex: 1 1 auto;  /* primary action gets the wider portion */
}

pre {
  background: #1a202c;
  color: #e2e8f0;
  padding: 0.75rem;
  border-radius: 6px;
  overflow-x: auto;
  font-size: 0.78rem;
  max-height: 360px;
  margin: 0.5rem 0 0;
  font-family: "SF Mono", Menlo, Consolas, monospace;
  line-height: 1.4;
}

.muted {
  color: #718096;
  font-size: 0.9rem;
}

.kv {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.25rem 1rem;
  font-size: 0.9rem;
  margin: 0.5rem 0;
}
.kv dt { color: #718096; }
.kv dd { margin: 0; color: #2d3748; font-weight: 500; }

/* ---------- Header / nav / pip ---------- */

header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}
header h1 { margin: 0; flex: 1 1 auto; font-size: 1.4rem; }

.view-tabs { display: flex; gap: 0.25rem; }
.view-tabs button {
  width: auto; padding: 0.4rem 0.9rem; margin: 0;
  background: white; color: #2c5282;
  border: 1px solid #cbd5e0; font-size: 0.9rem; font-weight: 500;
}
.view-tabs button.active { background: #2c5282; color: white; border-color: #2c5282; }

.status-pip {
  font-size: 0.8rem; padding: 0.3rem 0.7rem; border-radius: 999px;
  background: #edf2f7; color: #4a5568; white-space: nowrap;
}
.status-pip.ok      { background: #c6f6d5; color: #22543d; }
.status-pip.pending { background: #fefcbf; color: #744210; }
.status-pip.error   { background: #fed7d7; color: #742a2a; }

/* ---------- Sale view: inner Items / Cart tabs + responsive layout ---------- */

.sale-tab-strip {
  display: flex;
  gap: 0.25rem;
  margin: 0 0 0.75rem;
}
.sale-tab {
  flex: 1;
  width: auto; margin: 0;
  padding: 0.65rem 0.5rem;
  background: white; color: #4a5568;
  border: 1px solid #cbd5e0;
  font-weight: 600;
  font-size: 0.95rem;
}
.sale-tab.active { background: #2c5282; color: white; border-color: #2c5282; }
.sale-tab-badge {
  display: inline-block;
  background: #c6f6d5; color: #22543d;
  font-size: 0.78em; font-weight: 700;
  padding: 1px 7px; border-radius: 999px;
  margin-left: 4px;
  vertical-align: middle;
}
.sale-tab.active .sale-tab-badge { background: white; color: #2c5282; }

.sale-layout { display: block; }

/* Cart-region scroll-into-view flash highlight (tablet+ when cart chip tapped). */
.flash-highlight {
  animation: cart-flash 700ms ease;
}
@keyframes cart-flash {
  0%   { box-shadow: 0 0 0 0 rgba(44,82,130,0.55); }
  60%  { box-shadow: 0 0 0 8px rgba(44,82,130,0); }
  100% { box-shadow: 0 0 0 0 rgba(44,82,130,0); }
}

/* PHONE: tab-controlled visibility (≤ 768px) */
@media (max-width: 768px) {
  .sale-layout[data-sale-tab="items"] [data-sale-region="cart"]  { display: none; }
  .sale-layout[data-sale-tab="cart"]  [data-sale-region="items"] { display: none; }
}

/* TABLET PORTRAIT: stacked, no inner tab strip needed */
@media (min-width: 769px) and (max-width: 1023px) {
  .sale-tab-strip { display: none; }
}

/* TABLET LANDSCAPE + DESKTOP: side-by-side */
@media (min-width: 1024px) {
  .sale-tab-strip { display: none; }
  .sale-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
  }
  .sale-layout > section { margin-bottom: 0; }
}

/* ---------- Event picker overlay ---------- */

.event-picker-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 100;
  display: flex; align-items: flex-end; justify-content: center;
}
@media (min-width: 769px) {
  .event-picker-overlay { align-items: center; }
}
.event-picker-sheet {
  background: white;
  border-radius: 12px 12px 0 0;
  width: 100%;
  max-height: 80vh;
  display: flex; flex-direction: column;
  overflow: hidden;
  padding-bottom: env(safe-area-inset-bottom);
}
@media (min-width: 769px) {
  .event-picker-sheet { max-width: 520px; border-radius: 12px; max-height: 70vh; }
}
.event-picker-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid #e2e8f0;
}
.event-picker-header h3 { margin: 0; font-size: 1.05rem; }
.event-picker-close {
  width: auto; margin: 0; padding: 0.25rem 0.6rem;
  background: transparent; color: #4a5568;
  font-size: 1.15rem;
}
.event-picker-close:hover { background: #f7fafc; color: #2d3748; }
.event-picker-list { list-style: none; margin: 0; padding: 0; overflow-y: auto; }
.event-picker-list li { border-bottom: 1px solid #f1f5f9; }
.event-picker-list li:last-child { border-bottom: none; }
.event-picker-item {
  width: 100%; margin: 0;
  padding: 0.85rem 1rem;
  background: white; color: #2d3748;
  border: none; border-radius: 0;
  text-align: left;
  display: flex; align-items: center; gap: 0.5rem;
  font-weight: 500;
}
.event-picker-item:hover { background: #f7fafc; }
.event-picker-item.current { background: #ebf8ff; }
.event-picker-name { flex: 1; }
.event-picker-date { color: #4a5568; font-size: 0.85rem; font-weight: 400; margin-right: 0.5rem; }
.event-picker-tax { color: #718096; font-size: 0.85rem; font-weight: 400; }
.event-picker-active { color: #2c5282; font-size: 1rem; }
.event-picker-empty { padding: 1.5rem; text-align: center; color: #718096; }

/* Backup & recovery: side-by-side buttons on tablet+, stacked on phone. */
.settings-subhead {
  font-size: 0.95rem;
  font-weight: 700;
  margin: 1rem 0 0.4rem;
  color: #2d3748;
}

/* ---- Favorites manager ---- */
.fav-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: 0.5rem;
}
.fav-search-results {
  margin-top: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.fav-row,
.fav-search-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.7rem;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  font-size: 0.92rem;
}
.fav-rank {
  flex: 0 0 auto;
  font-weight: 700;
  color: #7a3a17;
  background: #fbe9da;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  font-size: 0.82rem;
  min-width: 1.6rem;
  text-align: center;
}
.fav-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fav-sku {
  flex: 0 0 auto;
  font-family: ui-monospace, Menlo, Consolas, monospace;
}
.fav-remove,
.fav-add {
  flex: 0 0 auto;
  width: auto;
  padding: 0.3rem 0.7rem;
  font-size: 0.85rem;
  margin-top: 0;
}
.fav-remove {
  background: transparent;
  color: #4a5568;
  border: 1px solid #e2e8f0;
  font-weight: 600;
}
.fav-remove:hover {
  background: #fed7d7;
  color: #742a2a;
  border-color: #fed7d7;
}
.recovery-row {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.75rem;
}
.recovery-row > button { flex: 1 1 auto; }

/* ---------- Customization (cart line + modal) ---------- */

.line-customize {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.4rem;
  padding-left: 0.25rem;
}
.line-customize.set { padding-left: 0; }
.line-customize-btn {
  font-size: 0.85rem;
  background: #fef5e7;
  border: 1px dashed #c05621;
  color: #7a3a17;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  cursor: pointer;
}
.line-customize-btn:hover { background: #fbe9da; }
.line-customize-btn.small {
  font-size: 0.75rem;
  background: transparent;
  border: 1px solid #cbd5e0;
  color: #4a5568;
  padding: 0.1rem 0.5rem;
}
.line-customize-btn.small:hover { background: #f7fafc; }
.line-customize-chip {
  display: inline-block;
  background: #fbe9da;
  color: #7a3a17;
  font-size: 0.85rem;
  padding: 0.2rem 0.55rem;
  border-radius: 4px;
}

/* Add-extra-row sits below the items grid: the manual-item button and the
   take-custom-order button live side by side here. Stack on narrow viewports. */
.add-extra-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
}
.add-extra-row > button { flex: 1 1 220px; }

/* Custom-order modal — captured separately from the per-line customize-modal
   styles since the data shape is richer (customer info + total/deposit/due). */
.custom-order-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.5);
  display: flex; align-items: center; justify-content: center;
  z-index: 1000;
  padding: 1rem;
}
.custom-order-sheet {
  background: #fff;
  border-radius: 10px;
  max-width: 560px;
  width: 100%;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 40px rgba(0,0,0,0.2);
}
.custom-order-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.85rem 1.1rem;
  border-bottom: 1px solid #e2e8f0;
}
.custom-order-header h3 { margin: 0; font-size: 1.05rem; }
.custom-order-close {
  background: none; border: none; font-size: 1.2rem; cursor: pointer;
  color: #4a5568; padding: 0.2rem 0.4rem; width: auto;
}
.custom-order-body {
  padding: 1rem 1.1rem;
  overflow-y: auto;
  display: flex; flex-direction: column; gap: 0.7rem;
}
.custom-order-body label {
  display: flex; flex-direction: column;
  font-size: 0.85rem; font-weight: 600;
  gap: 0.25rem;
}
.custom-order-body label .required { color: #c53030; font-weight: 700; }
.custom-order-body label .required-or { color: #718096; font-weight: 400; font-size: 0.78rem; }
.custom-order-body input[type="text"],
.custom-order-body input[type="email"],
.custom-order-body input[type="tel"],
.custom-order-body input[type="date"],
.custom-order-body textarea {
  font-size: 0.95rem;
  padding: 0.5rem 0.6rem;
  border: 1px solid #cbd5e0;
  border-radius: 6px;
  font-family: inherit;
}
.custom-order-body textarea { resize: vertical; min-height: 2.5rem; }
.co-contact-row, .co-money-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.7rem;
}
.co-money-input {
  display: flex; align-items: center;
  border: 1px solid #cbd5e0;
  border-radius: 6px;
  overflow: hidden;
}
.co-money-input input { border: none; flex: 1; padding: 0.5rem 0.6rem; }
.co-money-prefix {
  padding: 0.5rem 0.5rem 0.5rem 0.6rem;
  background: #f7fafc;
  color: #4a5568;
  font-weight: 600;
}
.co-summary {
  display: block;
  width: 100%;
  box-sizing: border-box;
  background: #fffbea;
  border: 1px solid #fde68a;
  border-radius: 6px;
  padding: 0.55rem 0.75rem;
  color: #744210;
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.35;
}
.co-summary[hidden] { display: none; }
.co-status { min-height: 1rem; font-size: 0.85rem; }
.co-status.error { color: #c53030; font-weight: 600; }
.custom-order-footer {
  display: flex; gap: 0.5rem; justify-content: flex-end;
  padding: 0.7rem 1.1rem;
  border-top: 1px solid #e2e8f0;
}
.custom-order-footer button { width: auto; padding: 0.55rem 1.1rem; }

/* Cart line styling for custom-order lines — softly distinguish them so the
   vendor sees at a glance "this is a deposit, not a regular item." */
.cart-items li.custom-order-line {
  border-left: 4px solid #d69e2e;
  background: linear-gradient(to right, #fffbea 0%, transparent 60%);
  padding-left: 0.6rem;
}
.cart-items li.custom-order-line .line-name {
  color: #744210;
}
.line-custom-summary {
  font-size: 0.78rem;
  color: #744210;
  margin-top: 0.2rem;
  padding: 0.3rem 0.5rem;
  background: #fffbea;
  border-radius: 4px;
  display: inline-block;
}

.customize-modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.5);
  display: flex; align-items: center; justify-content: center;
  z-index: 1000;
}
.customize-modal-sheet {
  background: #fff;
  border-radius: 10px;
  padding: 0;
  max-width: 520px;
  width: 90vw;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}
.customize-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid #e2e8f0;
}
.customize-modal-header h3 {
  margin: 0;
  font-size: 1.05rem;
  flex: 1;
}
.customize-modal-close {
  background: transparent;
  border: none;
  font-size: 1.2rem;
  color: #4a5568;
  cursor: pointer;
  padding: 0 0.4rem;
}
.customize-modal-body {
  padding: 1rem 1.25rem;
  overflow-y: auto;
}
.customize-modal-body label {
  display: block;
  margin-top: 0;
  font-weight: 500;
}
.customize-modal-body label + label { margin-top: 0.9rem; }
.customize-modal-body textarea,
.customize-modal-body input[type="date"] {
  width: 100%;
  margin-top: 0.3rem;
  padding: 0.5rem 0.6rem;
  border: 1px solid #cbd5e0;
  border-radius: 4px;
  font-size: 0.95rem;
  font-family: inherit;
}
.customize-modal-body textarea { resize: vertical; }
.customize-modal-body .field-help {
  display: block;
  margin-top: 0.25rem;
}
.customize-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem 1rem;
  border-top: 1px solid #e2e8f0;
  flex-wrap: wrap;
}
.customize-modal-actions .customize-modal-remove { margin-right: auto; color: #c53030; }
.customize-modal-actions button { padding: 0.5rem 0.9rem; }

/* ---------- Stock view (Phase A read-only inventory glance) ---------- */

#stock-view { padding: 0.75rem; padding-bottom: 5rem; }
.stock-header {
  position: sticky; top: 0;
  background: #fff;
  padding-bottom: 0.5rem;
  margin-bottom: 0.5rem;
  border-bottom: 1px solid #e2e8f0;
  z-index: 10;
}
.stock-summary { font-size: 0.95rem; margin-bottom: 0.25rem; }
.stock-summary-low { color: #c53030; font-weight: 500; }
.stock-help { margin-bottom: 0.5rem; }
.stock-controls {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: center;
}
.stock-search {
  flex: 1 1 100%;
  min-width: 0;
  margin: 0;
  padding: 0.5rem 0.75rem;
  font-size: 0.95rem;
  border: 1px solid #cbd5e0;
  border-radius: 4px;
}
.stock-sort {
  flex: 0 0 auto;
  padding: 0.5rem;
  font-size: 0.95rem;
  border: 1px solid #cbd5e0;
  border-radius: 4px;
  background: #fff;
}
/* Override the global `label { display:block; margin:... }` rule that would
   otherwise stack the toggles vertically and add extra vertical space. */
.stock-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  font-size: 0.9rem;
  font-weight: 400;
  line-height: 1;
  color: #4a5568;
  cursor: pointer;
  flex: 0 0 auto;
  white-space: nowrap;
}
.stock-toggle input[type="checkbox"] {
  margin: 0;
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  vertical-align: middle;
}
.stock-toggle > span { line-height: 1; }

.stock-list { display: flex; flex-direction: column; gap: 0.5rem; }
.stock-empty { padding: 2rem; text-align: center; }

.stock-card {
  display: flex;
  gap: 0.75rem;
  padding: 0.6rem;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  align-items: center;
}
.stock-card.low { border-color: #fc8181; background: #fff5f5; }
.stock-card.hidden-from-booth { opacity: 0.65; }
.stock-card.discontinued { opacity: 0.5; }
.stock-card.discontinued .stock-name { text-decoration: line-through; }

.stock-thumb {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 4px;
  background: #f7fafc;
  flex: 0 0 56px;
}
.stock-thumb-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  color: #a0aec0;
  font-weight: 600;
  border: 1px dashed #cbd5e0;
}

.stock-card-main { flex: 1; min-width: 0; }
.stock-card-top { line-height: 1.25; }
.stock-name { font-weight: 500; }
.stock-variant { margin-left: 0.25rem; }
.stock-card-meta { margin-top: 0.15rem; }
.stock-card-badges { margin-top: 0.35rem; display: flex; flex-wrap: wrap; gap: 0.25rem; }

.stock-badge {
  display: inline-block;
  padding: 0.1rem 0.4rem;
  font-size: 0.7rem;
  font-weight: 600;
  border-radius: 3px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.stock-badge-low {
  background: #fed7d7; color: #9b2c2c;
}
.stock-badge-hidden {
  background: #edf2f7; color: #4a5568;
  text-transform: none; letter-spacing: 0;
  font-weight: 500;
}
.stock-badge-discontinued {
  background: #fefcbf; color: #744210;
  text-transform: none; letter-spacing: 0;
  font-weight: 500;
}

.stock-qoh {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex: 0 0 auto;
  gap: 0.1rem;
}
.stock-qoh-num {
  font-size: 1.4rem;
  font-weight: 600;
  color: #2d3748;
  line-height: 1;
}
.stock-qoh-num.low { color: #c53030; }
.stock-reorder { font-size: 0.7rem; }

/* ---------- Variant chooser overlay ---------- */

.variant-chooser-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 100;
  display: flex; align-items: flex-end; justify-content: center;
}
@media (min-width: 769px) {
  .variant-chooser-overlay { align-items: center; }
}
.variant-chooser-sheet {
  background: white;
  border-radius: 12px 12px 0 0;
  width: 100%;
  max-height: 85vh;
  display: flex; flex-direction: column;
  overflow: hidden;
  padding-bottom: env(safe-area-inset-bottom);
}
@media (min-width: 769px) {
  .variant-chooser-sheet { max-width: 540px; border-radius: 12px; max-height: 75vh; }
}
.variant-chooser-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid #e2e8f0;
}
.variant-chooser-header h3 { margin: 0; font-size: 1.05rem; }
.variant-chooser-close {
  width: auto; margin: 0; padding: 0.25rem 0.6rem;
  background: transparent; color: #4a5568; font-size: 1.15rem;
}
.variant-chooser-close:hover { background: #f7fafc; color: #2d3748; }
.variant-chooser-list { list-style: none; margin: 0; padding: 0; overflow-y: auto; }
.variant-chooser-list li { border-bottom: 1px solid #f1f5f9; }
.variant-chooser-list li:last-child { border-bottom: none; }
.variant-chooser-item {
  width: 100%; margin: 0;
  padding: 0.85rem 1rem;
  background: white; color: #2d3748;
  border: none; border-radius: 0;
  text-align: left;
  display: flex; align-items: center; gap: 0.5rem;
  font-weight: 500;
}
.variant-chooser-item:hover { background: #f7fafc; }
.variant-chooser-name { flex: 1; }
.variant-chooser-price { color: #2c5282; font-weight: 700; }

/* Parent-product button visual hint: the variant count + chevron tucked
   into the price area so the user knows tap will open a chooser. */
.item-btn-parent { border-color: #2c5282; }
.variant-hint {
  font-size: 0.7rem; color: #718096; font-weight: 600;
  margin-left: 0.4rem;
}

/* Bundle chooser — multi-pick variant of the variant chooser. Adds a
   running counter in the header, per-row count + minus controls, and a
   cancel/done footer. */
.bundle-chooser .bundle-counter {
  font-size: 0.85rem; font-weight: 500;
  color: #718096;
  margin-left: 0.5rem;
}
.bundle-counter.threshold-met { color: #22543d; font-weight: 700; }
.bundle-chooser-help {
  padding: 0.5rem 1rem;
  background: #fffbea;
  border-bottom: 1px solid #fde68a;
  color: #744210;
  font-size: 0.82rem;
}
.bundle-list .bundle-row {
  position: relative;
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.7rem 1rem;
}
.bundle-list .bundle-minus {
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: #edf2f7;
  color: #4a5568; font-weight: 700; font-size: 1.1rem;
  visibility: hidden; /* shown only when row has a count */
}
.bundle-list li.has-count .bundle-minus { visibility: visible; }
.bundle-list .bundle-minus:hover { background: #e2e8f0; }
.bundle-list .bundle-row-count {
  min-width: 22px;
  font-weight: 700; color: #2c5282;
  text-align: center;
}
.bundle-list li.has-count { background: #ebf8ff; }
.bundle-list li.has-count .bundle-row { font-weight: 600; }
.bundle-chooser-footer {
  display: flex; gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-top: 1px solid #e2e8f0;
  background: #f7fafc;
}
.bundle-chooser-footer .bundle-cancel { flex: 1; margin: 0; }
.bundle-chooser-footer .bundle-done { flex: 2; margin: 0; }

/* ---------- Sale view ---------- */

.sale-banner {
  background: #ebf8ff;
  color: #2c5282;
  padding: 0.6rem 0.9rem;
  border-radius: 6px;
  margin: 0 0 1rem;
  font-size: 0.9rem;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.sale-banner .event-info { flex: 1 1 auto; }
.sale-banner .event-running {
  font-size: 0.9rem;
  color: inherit;
}
.sale-banner .event-running strong { color: inherit; }
.sale-banner.test-mode .event-running { color: #744210; }

.test-event-banner {
  background: #fefcbf;
  color: #744210;
  padding: 0.7rem 1rem;
  border: 2px solid #d69e2e;
  border-radius: 6px;
  margin: 0 0 0.75rem;
  font-weight: 600;
  text-align: center;
  font-size: 0.95rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.sale-banner.test-mode {
  background: #fffbea;
  border: 1px solid #d69e2e;
}

.search-results {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  max-height: 320px;
  overflow-y: auto;
  background: white;
}
.result-item {
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid #edf2f7;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}
.result-item:hover { background: #f7fafc; }
.result-item:last-child { border-bottom: none; }
.result-name { flex: 1; }
.result-price { color: #2c5282; font-weight: 500; margin-left: 1rem; }

.cart-items {
  list-style: none;
  padding: 0;
  margin: 0;
}
.cart-items li {
  padding: 0.7rem 0;
  border-bottom: 1px solid #edf2f7;
}
.cart-items li:last-child { border-bottom: none; }
.line-name { font-weight: 500; margin-bottom: 0.4rem; }
.line-controls {
  display: flex; align-items: center; gap: 0.5rem;
}
.qty-btn {
  width: 32px; height: 32px; padding: 0; margin: 0;
  font-size: 1.2rem; line-height: 1; font-weight: 600;
  background: #edf2f7; color: #2d3748;
  border: 1px solid #cbd5e0;
}
.qty-btn:hover { background: #e2e8f0; }
.qty {
  min-width: 28px; text-align: center; font-weight: 500;
}
.line-price { font-size: 0.85rem; }
.line-total {
  margin-left: auto; margin-right: 0.4rem;
  color: #2c5282; font-weight: 500; min-width: 60px; text-align: right;
}
.remove-btn {
  width: 32px; height: 32px; padding: 0; margin: 0;
  background: #fed7d7; color: #742a2a; font-size: 1.1rem; line-height: 1;
  border: 1px solid #fc8181;
}
.remove-btn:hover { background: #feb2b2; }

.badge {
  font-size: 0.7em;
  background: #fefcbf; color: #744210;
  padding: 2px 6px; border-radius: 999px; vertical-align: middle;
  margin-left: 0.3rem;
}
.badge.low { background: #fed7d7; color: #742a2a; }
.badge.bundle-badge { background: #c6f6d5; color: #22543d; }
.cart-items li.bundled { background: #f0fff4; border-left: 3px solid #48bb78; padding-left: 0.5rem; }
.totals .bundle-row { color: #22543d; }
.totals .bundle-row .bundle-savings { font-weight: 600; }
.totals .strike { text-decoration: line-through; color: #a0aec0; }

.totals {
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 2px solid #edf2f7;
}
.totals .row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0.35rem 0; font-size: 0.95rem;
}
.totals .total-row {
  font-size: 1.4rem; font-weight: 700;
  margin-top: 0.5rem; padding-top: 0.7rem;
  border-top: 1px solid #cbd5e0;
}
.discount-row label { margin: 0; }
.discount-controls {
  display: flex; align-items: center; gap: 0.5rem;
}
.discount-mode-toggle {
  display: inline-flex; border: 1px solid #cbd5e0; border-radius: 4px; overflow: hidden;
}
.discount-mode-btn {
  width: auto; margin: 0;
  padding: 0.25rem 0.55rem;
  background: white; color: #4a5568;
  border: none; border-radius: 0;
  font-size: 0.9rem; font-weight: 600;
}
.discount-mode-btn + .discount-mode-btn { border-left: 1px solid #cbd5e0; }
.discount-mode-btn.active { background: #3182ce; color: white; }
.discount-input-wrap {
  display: inline-flex; align-items: center; gap: 0.15rem;
}
.disc-prefix, .disc-suffix { color: #4a5568; font-size: 0.95rem; }
.discount-input {
  width: 80px; padding: 0.3rem;
  text-align: right; display: inline-block; margin: 0;
}

/* ---------- Payment ---------- */

.payment-buttons {
  display: grid;
  /* Auto-fit so vendors who add Zelle/Check/Apple Pay get a tidy wrap. */
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 0.5rem;
}
.payment-btn {
  padding: 1rem 0; margin: 0;
  font-size: 1rem; font-weight: 600;
  background: white; color: #2c5282;
  border: 2px solid #cbd5e0;
}
.payment-btn:hover { border-color: #2c5282; background: #ebf8ff; }
.payment-btn.selected {
  background: #2c5282; color: white; border-color: #2c5282;
}
#complete-sale {
  margin-top: 1rem;
  padding: 1rem; font-size: 1.1rem; font-weight: 700;
}
#complete-sale:disabled { background: #a0aec0; }
#complete-status:empty { display: none; }
#complete-status { margin-top: 0.5rem; }

/* ---------- Category tabs + item grids ---------- */

.category-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin: 0 0 0.75rem;
}
.category-tab {
  width: auto; padding: 0.45rem 0.85rem; margin: 0;
  background: white; color: #2c5282;
  border: 1px solid #cbd5e0;
  font-size: 0.9rem; font-weight: 500;
  border-radius: 6px;
}
.category-tab:hover { background: #ebf8ff; border-color: #2c5282; }
.category-tab.active {
  background: #2c5282; color: white; border-color: #2c5282;
}

.grid.item-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.5rem;
  margin: 0.4rem 0 1rem;
  max-height: 360px;
  overflow-y: auto;
  padding: 0.2rem;
  background: #f7fafc;
  border-radius: 6px;
  border: 1px solid #e2e8f0;
}

/* Items section inner tab strip (Favorites | Categories) — appears on every
   form factor; this is the third level of nav (under Sale, under Items/Cart). */
.items-tab-strip {
  display: flex;
  gap: 0.25rem;
  margin: 0 0 0.6rem;
}
.items-tab {
  flex: 1;
  width: auto; margin: 0;
  padding: 0.5rem 0.75rem;
  background: white; color: #4a5568;
  border: 1px solid #cbd5e0;
  font-size: 0.9rem; font-weight: 600;
}
.items-tab.active { background: #ebf8ff; color: #2c5282; border-color: #2c5282; }
.items-tab-count {
  display: inline-block;
  background: #cbd5e0; color: #2d3748;
  font-size: 0.75em; font-weight: 700;
  padding: 1px 7px; border-radius: 999px;
  margin-left: 4px;
  vertical-align: middle;
}
.items-tab.active .items-tab-count { background: #2c5282; color: white; }

/* Show only the active pane. */
#add-grid[data-items-tab="favorites"]  .items-tab-pane[data-pane="categories"] { display: none; }
#add-grid[data-items-tab="categories"] .items-tab-pane[data-pane="favorites"]  { display: none; }

.favorites-grid {
  /* Favorites grid uses the same item-grid base; visual distinction kept light. */
  border-color: #c6f6d5;
}

/* Build-a-bundle CTA inside the variant chooser. Surfaces the bundle path
   when a parent product's category has an active bundle — the chooser
   defaults to single-variant pick, but vendors who want to ring up a
   bundle of N tap this to swap in the multi-pick chooser instead. */
.variant-chooser-bundle-cta {
  width: 100%;
  margin: 0 0 0.5rem;
  padding: 0.6rem 0.75rem;
  display: flex; align-items: center; gap: 0.5rem;
  background: linear-gradient(135deg, #fffbea 0%, #fef3c7 100%);
  border: 1px solid #d69e2e;
  border-radius: 6px;
  color: #744210;
  font-size: 0.9rem; font-weight: 600;
  cursor: pointer;
  text-align: left;
}
.variant-chooser-bundle-cta:hover {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  border-color: #b7791f;
}
.bundle-cta-icon { font-size: 1.05rem; }
.bundle-cta-text { flex: 1; }
.bundle-cta-chev { color: #b7791f; }

.item-btn {
  width: 100%;
  min-height: 80px; /* min-height (not fixed) so image-having buttons grow vertically */
  padding: 0.5rem;
  margin: 0;
  background: white;
  color: #1a202c;
  border: 1px solid #cbd5e0;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
  text-align: left;
  font-size: 0.85rem;
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
  transition: transform 60ms ease, background 60ms ease;
}
.item-btn:hover {
  border-color: #2c5282;
  background: #ebf8ff;
}
.item-btn:active {
  transform: scale(0.97);
}
.item-btn.flash {
  background: #c6f6d5;
  border-color: #48bb78;
}

/* Product thumbnail rendered at the top of an item button when ImageUrl is set.
   Lazy-loaded via the img tag's loading="lazy". onerror flips a class on the
   parent button so .img-failed below hides the broken img and falls back to
   text-only layout — the vendor never sees a broken image icon. */
.item-img {
  width: 100%;
  height: 80px;
  object-fit: cover;
  border-radius: 4px;
  display: block;
  background: #edf2f7;
  margin-bottom: 0.4rem;
  flex-shrink: 0;
}
.item-btn.img-failed .item-img { display: none; }

/* Tax-exempt toggle — collapsible because most vendors never use it. Same
   pattern as tip-collapsible: single tappable line collapsed, expanded on tap,
   auto-open when active so the YES indicator is visible. */
.taxexempt-collapsible {
  margin: 0;
}
.taxexempt-collapsible > summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.25rem 0;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.taxexempt-collapsible > summary::-webkit-details-marker { display: none; }
.taxexempt-collapsible > summary::before {
  content: '▸';
  margin-right: 0.5rem;
  font-size: 1.1em;
  color: #4a5568;
  display: inline-block;
  width: 1em;
  text-align: center;
}
.taxexempt-collapsible[open] > summary::before { content: '▾'; }
.taxexempt-summary-value {
  color: #c53030;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.5px;
}
.taxexempt-label {
  display: flex !important;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: #4a5568;
  cursor: pointer;
  margin: 0.4rem 0 0;
}
.taxexempt-label input[type="checkbox"] {
  width: auto;
  margin: 0;
  cursor: pointer;
}

/* Tip section (cart totals area) — collapsible <details> so it's just a single
   tappable line for vendors who don't take tips, expands on demand for those who do. */
.tip-collapsible {
  margin: 0;
}
.tip-collapsible > summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.25rem 0;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.tip-collapsible > summary::-webkit-details-marker { display: none; }
.tip-collapsible > summary::before {
  content: '▸';
  margin-right: 0.5rem;
  font-size: 1.1em;
  color: #4a5568;
  transition: transform 120ms ease;
  display: inline-block;
  width: 1em;
  text-align: center;
}
.tip-collapsible[open] > summary::before { content: '▾'; }
.tip-summary-value {
  color: #4a5568;
  font-size: 0.9rem;
}
.tip-collapsible[open] .tip-summary-value { color: #2c5282; }
.tip-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  align-items: center;
  margin-top: 0.4rem;
}
.tip-quick {
  width: auto;
  margin: 0;
  padding: 0.3rem 0.65rem;
  font-size: 0.85rem;
  background: white;
  color: #2c5282;
  border: 1px solid #cbd5e0;
  border-radius: 6px;
}
.tip-quick.active, .tip-quick:active {
  background: #2c5282;
  color: white;
  border-color: #2c5282;
}
.tip-quick:hover { background: #ebf8ff; }
.tip-quick.active:hover { background: #2a4365; color: white; }
.tip-input-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.tip-input-wrap .disc-prefix {
  position: absolute;
  left: 0.5rem;
  pointer-events: none;
  color: #718096;
}
.tip-input {
  width: 5rem;
  padding-left: 1.3rem !important;
}
.final-row {
  font-size: 1.05rem;
  color: #2c5282;
  border-top: 2px solid #2c5282;
  padding-top: 0.4rem;
  margin-top: 0.3rem;
}

/* Parked carts: pills above the current cart for resume. */
.parked-carts {
  background: #fffaf0;
  border: 1px solid #f6ad55;
  border-radius: 8px;
  padding: 0.5rem 0.75rem;
  margin: 0 0 0.75rem;
}
.parked-carts-label {
  margin-bottom: 0.4rem;
}
.parked-carts-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.parked-cart-btn {
  width: auto;
  margin: 0;
  padding: 0.4rem 0.75rem;
  background: white;
  color: #2d3748;
  border: 1px solid #ed8936;
  border-radius: 6px;
  font-size: 0.85rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1rem;
  text-align: left;
  line-height: 1.2;
}
.parked-cart-btn:hover, .parked-cart-btn:active {
  background: #fffaf0;
  border-color: #c05621;
}
.parked-cart-count {
  font-weight: 600;
}
.parked-cart-total {
  font-weight: 700;
  color: #2c5282;
}
.parked-cart-time {
  font-size: 0.75rem;
}

/* Cart action row: side-by-side Park + Abandon buttons */
.cart-action-row {
  display: flex;
  gap: 0.5rem;
  margin-top: 1rem;
}
.cart-action-row > button {
  flex: 1;
  margin: 0;
}
.item-name {
  font-size: 0.85rem;
  font-weight: 500;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  word-break: break-word;
}
.item-price {
  font-size: 0.95rem;
  color: #2c5282;
  font-weight: 700;
  align-self: flex-end;
}


.item-btn .badge.low {
  font-size: 0.65em;
  margin-left: 0.3rem;
  vertical-align: top;
}

/* ---------- Scan button + modal ---------- */

.scan-btn {
  margin: 0 0 0.5rem;
  background: #2c5282;
  font-size: 1rem;
  font-weight: 600;
  padding: 0.7rem;
}

.scan-modal {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.85);
  display: flex; align-items: center; justify-content: center;
  z-index: 1000;
  padding: 1rem;
}
.scan-modal-inner {
  background: #1a202c;
  color: white;
  width: 100%; max-width: 600px;
  border-radius: 10px;
  overflow: hidden;
  display: flex; flex-direction: column;
}
.scan-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0.75rem 1rem;
  background: #2d3748;
  font-weight: 500;
}
.scan-close {
  width: auto; padding: 0.4rem 0.8rem; margin: 0;
  background: #e53e3e; color: white; border: none;
  font-weight: 600;
}
.scan-close:hover { background: #c53030; }

.scan-viewport {
  position: relative;
  width: 100%;
  background: black;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.scan-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.scan-crosshair {
  position: absolute;
  top: 35%; left: 25%;
  width: 50%; height: 30%;
  border: 3px solid rgba(255,255,255,0.7);
  border-radius: 8px;
  pointer-events: none;
  box-shadow: 0 0 0 9999px rgba(0,0,0,0.35);
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.scan-crosshair.hit {
  border-color: #48bb78;
  box-shadow: 0 0 0 9999px rgba(0,0,0,0.1), 0 0 20px rgba(72,187,120,0.6);
}
/* Tap mode: dashed gold crosshair signals "aim, then press Scan" instead of
   "auto-scan when held". Crosshair-as-hint, not crosshair-as-gate. */
.scan-modal.mode-tap .scan-crosshair {
  border-style: dashed;
  border-color: rgba(246, 224, 94, 0.85);
}
.scan-modal.mode-tap .scan-viewport { cursor: pointer; }
.scan-tap-hint {
  display: none;
  position: absolute;
  bottom: 0.5rem; left: 50%;
  transform: translateX(-50%);
  padding: 0.25rem 0.7rem;
  background: rgba(0,0,0,0.6);
  color: #f6e05e;
  font-size: 0.8rem;
  border-radius: 4px;
  pointer-events: none;
}
.scan-modal.mode-tap .scan-tap-hint { display: block; }

.scan-mode-row {
  display: flex;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: #2d3748;
  border-top: 1px solid #4a5568;
}
.scan-mode-btn {
  flex: 1;
  width: auto;
  margin: 0;
  padding: 0.5rem;
  background: #1a202c;
  color: #a0aec0;
  border: 1px solid #4a5568;
  border-radius: 4px;
  font-size: 0.9rem;
  font-weight: 500;
}
.scan-mode-btn.active {
  background: #3182ce;
  color: white;
  border-color: #3182ce;
}

.scan-tap-fire {
  display: none;
  width: calc(100% - 2rem);
  margin: 0.5rem 1rem;
  padding: 0.9rem;
  background: #3182ce;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 1.05rem;
  font-weight: 600;
}
.scan-tap-fire:hover  { background: #2b6cb0; }
.scan-tap-fire:active { background: #2c5282; }
.scan-modal.mode-tap .scan-tap-fire { display: block; }

.scan-status {
  padding: 0.7rem 1rem;
  background: #2d3748;
  font-size: 0.95rem;
  border-top: 1px solid #4a5568;
}
.scan-status.ok    { background: #22543d; color: #c6f6d5; }
.scan-status.error { background: #742a2a; color: #fed7d7; }

.scan-recent {
  max-height: 120px; overflow-y: auto;
  padding: 0.5rem 1rem;
  background: #1a202c;
  font-size: 0.85rem;
}
.scan-recent-item {
  padding: 0.25rem 0;
  font-family: "SF Mono", Menlo, Consolas, monospace;
}
.scan-recent-item.ok    { color: #9ae6b4; }
.scan-recent-item.error { color: #fc8181; }

.scan-no-camera {
  padding: 2rem 1rem;
  text-align: center;
  background: #2d3748;
  color: #e2e8f0;
}
.scan-no-camera .muted { color: #a0aec0; margin-top: 0.5rem; font-size: 0.85rem; }
.scan-no-camera .small { font-size: 0.85rem; }

.scan-manual {
  padding: 0.7rem 1rem;
  background: #2d3748;
  border-top: 1px solid #4a5568;
  display: flex; gap: 0.5rem; align-items: flex-end;
}
.scan-manual label {
  flex: 1;
  color: #cbd5e0;
  margin: 0;
  font-size: 0.85rem;
  font-weight: 400;
}
.scan-manual input {
  width: 100%;
  margin-top: 0.25rem;
  padding: 0.5rem;
  background: #1a202c;
  color: white;
  border: 1px solid #4a5568;
  border-radius: 4px;
}
.scan-manual input:focus {
  outline: none;
  border-color: #3182ce;
}
.scan-manual button {
  width: auto;
  padding: 0.55rem 1.2rem;
  margin: 0;
  background: #3182ce;
  color: white;
  border: none;
  flex-shrink: 0;
  font-weight: 600;
}
.scan-manual button:hover { background: #2c5282; }

/* ---------- Test barcode generator ---------- */

.barcode-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.75rem;
  margin-top: 1rem;
}
.barcode-card {
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 0.6rem;
  text-align: center;
}
.barcode-name {
  font-size: 0.85rem;
  font-weight: 500;
  margin-bottom: 0.4rem;
  min-height: 2.5em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.barcode-svg { display: block; margin: 0 auto; max-width: 100%; }
.barcode-meta {
  display: flex; justify-content: space-between;
  font-size: 0.8rem; color: #718096; margin-top: 0.4rem;
}

/* ---------- Recent view ---------- */

.recent-banner {
  background: #ebf8ff;
  color: #2c5282;
  padding: 0.6rem 0.9rem;
  border-radius: 6px;
  margin: 0 0 1rem;
  font-size: 0.95rem;
}

.totals-strip {
  background: white;
  border-radius: 8px;
  padding: 0.75rem 1rem;
  margin: 0 0 1rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.totals-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
  text-align: center;
}
.totals-grid > div {
  padding: 0.4rem 0.3rem;
  border-radius: 6px;
  background: #f7fafc;
}
.totals-grid > div.grand {
  background: #2c5282;
  color: white;
}
.totals-grid > div.grand .muted { color: rgba(255,255,255,0.75); }
.totals-grid > div .muted {
  display: block;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 0.2rem;
}
.totals-grid > div strong { font-size: 1.1rem; font-weight: 700; }
.totals-grid > div.grand strong { font-size: 1.3rem; }

.recent-controls {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.filter-btn {
  width: auto;
  padding: 0.4rem 0.85rem;
  margin: 0;
  background: white;
  color: #2c5282;
  border: 1px solid #cbd5e0;
  font-size: 0.85rem;
  font-weight: 500;
}
.filter-btn:hover { background: #ebf8ff; }
.filter-btn.active {
  background: #2c5282;
  color: white;
  border-color: #2c5282;
}

.sales-list {
  list-style: none;
  margin: 0; padding: 0;
}
.sale-row {
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  margin-bottom: 0.5rem;
  background: white;
}
.sale-row.voided { opacity: 0.55; }

.sale-summary {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 0.85rem;
  cursor: pointer;
}
.sale-summary:hover { background: #f7fafc; }
.sale-row.expanded .sale-summary { border-bottom: 1px solid #edf2f7; }
.sale-time {
  font-size: 0.85rem;
  color: #718096;
  min-width: 100px;
}
.sale-total {
  font-weight: 700;
  color: #2c5282;
  min-width: 70px;
}
.sale-payment {
  font-size: 0.75rem;
  background: #edf2f7;
  color: #4a5568;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: 0.5px;
}
.sale-items {
  font-size: 0.85rem;
  color: #718096;
  flex: 1;
}
.expand-arrow {
  color: #a0aec0;
  font-size: 1rem;
}
.voided-badge {
  background: #fed7d7 !important;
  color: #742a2a !important;
}

.sale-details {
  padding: 0.75rem 0.85rem;
  background: #f7fafc;
  font-size: 0.9rem;
}
.line-items-table {
  width: 100%;
  border-collapse: collapse;
}
.line-items-table td {
  padding: 0.25rem 0.4rem;
  vertical-align: top;
}
.line-items-table tbody tr {
  border-bottom: 1px solid #edf2f7;
}
.line-items-table .li-name { width: 60%; }
.line-items-table .li-qty,
.line-items-table .li-price,
.line-items-table .li-total { text-align: right; white-space: nowrap; }
.line-items-table tfoot td { padding-top: 0.4rem; text-align: right; }
.line-items-table tfoot td:last-child { text-align: right; }
.line-items-table tfoot tr.grand-row td {
  border-top: 1px solid #cbd5e0;
  padding-top: 0.5rem;
  font-size: 1rem;
}

/* Narrow-screen polish for the Events tab — drop min-widths on the sale
   summary so the row fits on phones, and stack each line-item row so the
   product name gets its own line with qty/price/total flowing inline below.
   Different code path from the Sales-reports breakdown tables (which use
   .pnl-table-responsive); this needs its own breakpoint set because the
   markup uses the existing .line-items-table classes. */
@media (max-width: 600px) {
  .sale-summary {
    flex-wrap: wrap;
    gap: 0.4rem 0.6rem;
    padding: 0.55rem 0.7rem;
  }
  .sale-time { min-width: 0; flex-shrink: 0; }
  .sale-total { min-width: 0; flex-shrink: 0; }
  .sale-items { flex: 1 1 auto; }
  .sale-event-label { font-size: 0.8rem; }

  .line-items-table tbody tr {
    display: flex;
    flex-wrap: wrap;
    padding: 0.45rem 0;
    border-bottom: 1px solid #edf2f7;
  }
  .line-items-table tbody td { padding: 0; }
  .line-items-table tbody td.li-name {
    flex: 1 1 100%;
    font-weight: 500;
    margin-bottom: 0.2rem;
    width: auto;
  }
  .line-items-table tbody td.li-qty,
  .line-items-table tbody td.li-price,
  .line-items-table tbody td.li-total {
    flex: 0 0 auto;
    text-align: left;
    color: #4a5568;
    font-size: 0.9rem;
    margin-right: 0.7rem;
    white-space: nowrap;
  }
  .line-items-table tbody td.li-total {
    margin-left: auto;
    margin-right: 0;
    font-weight: 600;
    color: #2d3748;
  }
  .line-items-table tfoot td { font-size: 0.9rem; padding: 0.3rem 0.2rem; }
}
.sale-actions {
  margin-top: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.sale-actions button {
  width: auto;
  padding: 0.4rem 0.9rem;
  margin: 0;
}
.sale-actions .void-btn {
  background: #e53e3e;
  color: white;
  border: none;
}
.sale-actions .void-btn:hover { background: #c53030; }
.sale-actions .small { font-size: 0.8rem; }

/* ---------- Post Event section (Recent view) ---------- */

.post-event-section {
  margin-top: 1.5rem;
  padding: 1rem 1.1rem;
  background: #fffaf0;
  border: 1px solid #f6ad55;
  border-radius: 8px;
}
.post-event-section.test {
  background: #fefcbf;
  border-color: #d69e2e;
}
.post-event-section.done {
  background: #f0fff4;
  border-color: #9ae6b4;
}
.post-event-section h3 {
  margin: 0 0 0.5rem;
  color: #744210;
  font-size: 1rem;
}
.post-event-section.done h3 { color: #22543d; }
.post-event-summary {
  margin-bottom: 0.75rem;
  color: #2d3748;
  font-size: 0.95rem;
}
.post-event-btn {
  width: 100%;
  padding: 0.85rem;
  background: #c05621;
  color: white;
  border: none;
  font-size: 1rem;
  font-weight: 600;
}
.post-event-btn:hover { background: #9c4221; }
.post-event-btn:disabled { background: #a0aec0; cursor: not-allowed; }
.post-event-note { margin-top: 0.5rem; font-size: 0.8rem; }
#post-event-status:empty { display: none; }
#post-event-status { margin-top: 0.6rem; }

/* ---------- Waitlist QR modal ---------- */

.qr-modal {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.92);
  display: flex; align-items: center; justify-content: center;
  z-index: 1000;
  padding: 1rem;
}
.qr-modal-inner {
  background: white;
  border-radius: 12px;
  padding: 2rem 2rem 1.5rem;
  max-width: 90vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  box-shadow: 0 20px 60px rgba(0,0,0,0.4);
}
.qr-modal-title {
  font-size: 1.4rem;
  font-weight: 700;
  color: #1a202c;
}
.qr-img {
  max-width: 80vmin;
  max-height: 80vmin;
  width: auto;
  height: auto;
  border: 1px solid #e2e8f0;
  background: white;
}
.qr-modal-url {
  font-size: 0.85rem;
  color: #4a5568;
  word-break: break-all;
  text-align: center;
  max-width: 480px;
}
.qr-close {
  width: auto;
  padding: 0.6rem 1.5rem;
  background: #2c5282;
  color: white;
  border: none;
  font-weight: 600;
}
.qr-close:hover { background: #2a4365; }

/* ============================================================
   Phone form factor (narrow widths)
   Tightens padding, font sizes, and heading scale so the cart
   and Quick Pick aren't pushed below the fold.
   ============================================================ */

@media (max-width: 600px) {
  body, #app { font-size: 14px; }

  /* Header — tighter, single row */
  header {
    margin-bottom: 0.6rem;
    gap: 0.5rem;
    padding: 0;
  }
  header h1 {
    font-size: 1.05rem;
    letter-spacing: -0.2px;
  }
  .view-tabs button {
    padding: 0.35rem 0.65rem;
    font-size: 0.8rem;
  }
  .status-pip {
    font-size: 0.7rem;
    padding: 0.25rem 0.5rem;
  }

  /* Section spacing — squeeze padding and margins */
  main { padding: 0.5rem; }
  main section {
    padding: 0.55rem 0.7rem;
    margin-bottom: 0.5rem;
    border-radius: 6px;
  }
  main section h2 {
    font-size: 0.95rem;
    margin: 0 0 0.4rem;
  }
  main section h3 {
    font-size: 0.8rem;
    margin: 0.4rem 0 0.3rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #4a5568;
  }

  /* Sale view banner — single line if possible */
  .sale-banner {
    padding: 0.4rem 0.65rem;
    font-size: 0.82rem;
    margin-bottom: 0.5rem;
    gap: 0.4rem;
  }
  .sale-banner .event-running {
    font-size: 0.78rem;
    padding: 0.2rem 0.45rem;
  }
  .test-event-banner {
    padding: 0.45rem 0.65rem;
    font-size: 0.82rem;
    margin-bottom: 0.4rem;
  }

  /* Scan button — slimmer */
  .scan-btn {
    padding: 0.55rem;
    font-size: 0.95rem;
  }

  /* Search — slimmer */
  #search { padding: 0.45rem; font-size: 0.9rem; }

  /* Item grid — smaller buttons so more visible */
  .grid.item-grid {
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 0.35rem;
    padding: 0.15rem;
    max-height: 260px;
  }
  .item-btn {
    min-height: 70px;
    padding: 0.35rem;
    font-size: 0.78rem;
  }
  /* Smaller image on narrow phones to keep buttons compact */
  .item-btn.has-img .item-img { height: 64px; }
  .item-name { font-size: 0.78rem; }
  .item-price { font-size: 0.85rem; }

  /* Category tabs — wrap tighter */
  .category-tab {
    padding: 0.3rem 0.6rem;
    font-size: 0.78rem;
  }

  /* Cart items */
  .cart-items li { padding: 0.5rem 0; }
  .line-name { font-size: 0.85rem; margin-bottom: 0.3rem; }
  .qty-btn { width: 28px; height: 28px; font-size: 1rem; }
  .qty { min-width: 24px; font-size: 0.9rem; }
  .line-total { font-size: 0.85rem; min-width: 50px; }
  .remove-btn { width: 28px; height: 28px; font-size: 0.9rem; }

  /* Totals */
  .totals .row { font-size: 0.85rem; padding: 0.25rem 0; }
  .totals .total-row { font-size: 1.2rem; }

  /* Payment buttons — still big, but a little tighter */
  .payment-btn {
    padding: 0.75rem 0;
    font-size: 0.92rem;
  }
  #complete-sale {
    padding: 0.85rem;
    font-size: 1rem;
  }
}

/* ---------- Narrow-phone tightening (≤480px) ----------
   Aim: minimize vertical chrome above the product grid so items show up
   without scrolling. Tested target: Galaxy Z Fold 6 closed (~376px CSS). */
@media (max-width: 480px) {
  /* Top strip: force single line + shrink chips. The event chip is the only
     one that's allowed to shrink/ellipsis; sync + cart keep their full size. */
  #top-strip {
    gap: 0.3rem; padding: 0.4rem 0.5rem;
    padding-top: max(0.4rem, env(safe-area-inset-top));
    flex-wrap: nowrap;
    overflow: hidden;
  }
  .top-chip { padding: 0.22rem 0.5rem; font-size: 0.78rem; flex-shrink: 0; }
  .event-chip {
    flex: 1 1 0;       /* fills remaining width; shrinks before others */
    min-width: 3em;    /* don't disappear entirely */
    max-width: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Items / Cart sale-tab strip — slimmer */
  .sale-tab { padding: 0.5rem 0.4rem; font-size: 0.92rem; }

  /* Hide the redundant "Add items" h2 — the tabs above already convey context. */
  .sale-items > h2 { display: none; }

  /* Section padding squeeze */
  section { padding: 0.6rem; margin-bottom: 0.6rem; }

  /* Sale banner (running total) — hidden on narrow phone. Same data is on
     the History tab, so this is just real-estate reclamation, not data loss. */
  .sale-banner { display: none; }

  /* Scan barcode button — shorter */
  .scan-btn { padding: 0.55rem; font-size: 0.95rem; }

  /* Search input — smaller */
  #search { padding: 0.5rem; font-size: 0.9rem; }

  /* Inner Items tab strip — slimmer */
  .items-tab { padding: 0.4rem 0.5rem; font-size: 0.85rem; }

  /* Category tabs — single row, horizontal scroll instead of wrap.
     Saves 3+ rows of vertical space on narrow phones. */
  .category-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.25rem;
    scrollbar-width: thin;
  }
  .category-tab { white-space: nowrap; flex-shrink: 0; }

  /* Right-edge chevron over the category strip signals "more →" on phones
     where the scrollbar isn't visible. Always shown (even when not strictly
     overflowing); cheap visual hint. pointer-events:none lets taps pass
     through to whichever tab is underneath. */
  .category-tabs-wrap {
    position: relative;
  }
  .category-tabs-wrap::after {
    content: '›';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0.25rem;
    width: 28px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 0.35rem;
    background: linear-gradient(to right, transparent, white 60%);
    color: #2c5282;
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1;
    pointer-events: none;
  }

}

/* Event P&L — per-event profit summary on Recent view (current-event filter only) */
.event-pnl {
  background: white;
  border-radius: 8px;
  padding: 0.75rem 1rem;
  margin: 0 0 1rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.event-pnl h3 {
  margin: 0 0 0.5rem;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #4a5568;
}
.pnl-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}
.pnl-table td {
  padding: 0.25rem 0;
}
.pnl-table td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.pnl-table td.num.neg {
  color: #c53030;
}
.pnl-table tr.subtotal td {
  border-top: 1px solid #e2e8f0;
  padding-top: 0.4rem;
  font-weight: 600;
}
.pnl-table tr.grand td {
  border-top: 2px solid #2c5282;
  padding-top: 0.5rem;
  font-size: 1.05rem;
  color: #2c5282;
}
.pnl-hint {
  margin-top: 0.5rem;
  font-size: 0.78rem;
}
.pnl-hint code {
  background: #f7fafc;
  padding: 0.05rem 0.3rem;
  border-radius: 3px;
  font-size: 0.85em;
}

/* Inventory adjustment form (Settings → Inventory adjustment) */
.inv-adj-results {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin: 0.25rem 0;
  /* Establish a stacking context so results sit above the sticky
     bottom-nav (z-index:50) when the section happens to render near the
     bottom of the viewport. Without this, results visually disappear
     behind the bottom nav. */
  position: relative;
  z-index: 60;
  /* Defensive: explicitly set cursor + pointer-events in case some inherited
     rule is hiding the pointer when the mouse enters this container. */
  cursor: default;
  pointer-events: auto;
}
.inv-adj-result, .inv-adj-result * {
  cursor: pointer !important;
  pointer-events: auto !important;
}
.inv-adj-result {
  padding: 0.5rem 0.75rem;
  background: #f7fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.95rem;
}
.inv-adj-result:hover, .inv-adj-result:active {
  background: #e6f2ff;
  border-color: #2c5282;
}
.inv-adj-result-empty {
  padding: 0.4rem 0.5rem;
}
.inv-adj-product {
  margin: 0.25rem 0 0.5rem;
  padding: 0.5rem 0.75rem;
  background: #edf6ed;
  border-radius: 6px;
  font-size: 0.95rem;
  empty: hidden;
}
.inv-adj-product:empty {
  display: none;
}
.inv-adj-preview {
  margin: 0.5rem 0 0.75rem;
  padding: 0.5rem 0.75rem;
  background: #fffbeb;
  border-left: 3px solid #d69e2e;
  border-radius: 4px;
  font-size: 0.85rem;
}

/* Events view — per-event filter dropdown + per-row event label in all-events mode */
.event-filter-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
}
.event-filter-label > span {
  font-size: 0.85rem;
  color: #4a5568;
  font-weight: 500;
  white-space: nowrap;
}
.event-filter {
  flex: 1;
  padding: 0.4rem 0.5rem;
  border: 1px solid #cbd5e0;
  border-radius: 6px;
  background: white;
  font-size: 0.95rem;
  min-width: 0;
}
.sale-event-label {
  display: inline-block;
  font-size: 0.75rem;
  padding: 0.1rem 0.4rem;
  background: #edf2f7;
  border-radius: 4px;
  color: #4a5568;
  white-space: nowrap;
}

/* Sales reports (Settings → Sales reports) */
.report-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
  margin: 0.5rem 0;
}
.report-preset {
  width: auto;
  padding: 0.3rem 0.7rem;
  font-size: 0.85rem;
  background: white;
  color: #2c5282;
  border: 1px solid #cbd5e0;
  border-radius: 6px;
  margin: 0;
}
.report-preset:hover, .report-preset:active {
  background: #ebf8ff;
}
.report-range {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  margin: 0.5rem 0 0.75rem;
}
.report-range label {
  display: flex;
  flex-direction: column;
  font-size: 0.85rem;
  color: #4a5568;
  font-weight: 500;
  margin: 0;
  flex: 1;
  min-width: 120px;
}
.report-range input {
  margin-top: 0.2rem;
}
.report-result:empty { display: none; }
.report-summary {
  margin-top: 0.75rem;
  padding: 0.75rem 1rem;
  background: white;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.report-meta {
  margin-bottom: 0.5rem;
}
.report-events {
  margin-top: 0.75rem;
}
.report-events summary {
  cursor: pointer;
  font-size: 0.9rem;
  color: #2c5282;
  padding: 0.4rem 0;
}
.report-events table {
  margin-top: 0.4rem;
}
/* Per-event breakdown table is 4-column; needs horizontal padding so the
   numeric columns don't butt up against each other. The default .pnl-table
   layout (2-column) doesn't need this. */
.report-events .pnl-table th,
.report-events .pnl-table td {
  padding: 0.3rem 0.5rem;
}
.report-events .pnl-table th:first-child,
.report-events .pnl-table td:first-child {
  padding-left: 0;
}
.report-events .pnl-table th:last-child,
.report-events .pnl-table td:last-child {
  padding-right: 0;
}

/* Narrow-screen card layout for breakdown tables. Below 600px the 4–5
   column tables overflow on phone form factors (especially folded). Each
   row collapses into a label-prefixed stack — first cell becomes the row
   "title", subsequent cells get their column name as a prefix. */
@media (max-width: 600px) {
  .pnl-table-responsive thead { display: none; }
  .pnl-table-responsive,
  .pnl-table-responsive tbody,
  .pnl-table-responsive tr,
  .pnl-table-responsive td { display: block; width: auto; }
  .pnl-table-responsive tr {
    padding: 0.5rem 0;
    border-bottom: 1px solid #e2e8f0;
  }
  .pnl-table-responsive tr:last-child { border-bottom: none; }
  .pnl-table-responsive td {
    padding: 0.15rem 0;
    text-align: left;
    white-space: normal;
  }
  /* First cell becomes the row "title" — bold, no label prefix. */
  .pnl-table-responsive td:first-child {
    font-weight: 600;
    margin-bottom: 0.15rem;
  }
  /* Subsequent cells get their column label prefixed via data-label. */
  .pnl-table-responsive td:not(:first-child)[data-label]::before {
    content: attr(data-label) ": ";
    color: #4a5568;
    font-weight: 500;
    margin-right: 0.4rem;
  }
  /* The right-aligned numeric cells go back to inline label + value. */
  .pnl-table-responsive td.num {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    text-align: right;
  }
  .pnl-table-responsive td.num::before { text-align: left; }
  /* Heatmap bar cell — keep the bar but full-width (no label). */
  .pnl-table-responsive td.heatmap-bar-cell {
    padding-top: 0.3rem;
  }
  .pnl-table-responsive td.heatmap-bar-cell .heatmap-bar {
    display: block;
    height: 4px;
  }
}
.report-download {
  margin-top: 0.75rem;
}

/* By-hour heatmap: small inline bar showing each hour's gross relative to peak. */
.heatmap-table .heatmap-bar-cell {
  width: 35%;
  padding-left: 0.5rem !important;
  vertical-align: middle;
}
.heatmap-bar {
  display: inline-block;
  height: 0.7rem;
  background: #2c5282;
  border-radius: 3px;
  min-width: 1px;
  vertical-align: middle;
}

/* Per-line price override button — always-visible dashed border signals
   "tap to edit" on touch devices (where there's no hover state to discover). */
.line-price-btn {
  width: auto;
  margin: 0;
  padding: 0.1rem 0.4rem;
  background: transparent;
  color: #4a5568;
  border: 1px dashed #a0aec0;
  border-radius: 4px;
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
}
.line-price-btn::after {
  content: ' ✏';
  font-size: 0.75em;
  opacity: 0.6;
}
.line-price-btn:hover, .line-price-btn:active {
  border-color: #2c5282;
  border-style: solid;
  background: #ebf8ff;
  color: #2c5282;
}
/* "(was $X)" indicator next to an overridden line price in the cart. */
.line-was {
  font-size: 0.75rem;
  color: #a0aec0;
  text-decoration: line-through;
  white-space: nowrap;
}

/* Product soft-delete UI — discontinued badge + toggle button area */
.inactive-badge {
  background: #fed7d7;
  color: #742a2a;
  font-size: 0.7rem;
  padding: 0.1rem 0.35rem;
  margin-left: 0.4rem;
  border-radius: 3px;
  letter-spacing: 0.5px;
}
.inv-adj-product-line {
  margin-bottom: 0.4rem;
}
.inv-adj-product-actions {
  margin-top: 0.4rem;
}
.inv-adj-product-actions .inv-adj-toggle-active-btn {
  width: auto;
  margin: 0;
  padding: 0.35rem 0.7rem;
  font-size: 0.85rem;
}

/* ---------- Custom Orders view ---------- */

.orders-view { padding: 0.5rem 0.25rem 1rem; }
.orders-view h2 { margin: 0 0 0.25rem; }

.orders-filter-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin: 0.75rem 0 1rem;
}
.orders-filter {
  flex: 0 1 auto;
  width: auto; margin: 0;
  padding: 0.4rem 0.7rem;
  background: white; color: #4a5568;
  border: 1px solid #cbd5e0;
  border-radius: 6px;
  font-size: 0.85rem; font-weight: 600;
}
.orders-filter.active { background: #ebf8ff; color: #2c5282; border-color: #2c5282; }
.orders-filter:hover  { background: #f7fafc; }
.orders-filter-count {
  display: inline-block;
  background: #cbd5e0; color: #2d3748;
  font-size: 0.72em; font-weight: 700;
  padding: 1px 6px; border-radius: 999px;
  margin-left: 4px;
  vertical-align: middle;
}
.orders-filter.active .orders-filter-count { background: #2c5282; color: white; }

.orders-empty {
  padding: 2rem 0.5rem;
  text-align: center;
}

.orders-list {
  display: flex; flex-direction: column;
  gap: 0.75rem;
}

.orders-card {
  background: white;
  border: 1px solid #e2e8f0;
  border-left: 4px solid #d69e2e;
  border-radius: 8px;
  padding: 0.85rem 1rem;
  display: flex; flex-direction: column;
  gap: 0.5rem;
}
.orders-card-header {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.orders-customer {
  flex: 1 1 60%;
  min-width: 0;
  word-break: break-word;
}

.status-badge {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.status-badge.status-ordered     { background: #fefcbf; color: #744210; }
.status-badge.status-in-progress { background: #bee3f8; color: #2c5282; }
.status-badge.status-ready       { background: #c6f6d5; color: #22543d; }
.status-badge.status-delivered   { background: #e2e8f0; color: #4a5568; }

.orders-description {
  color: #2d3748;
  font-size: 0.95rem;
}

.orders-money {
  display: flex; flex-wrap: wrap;
  gap: 0.7rem 1.4rem;
  font-size: 0.9rem;
}
.orders-money-block {
  display: flex; flex-direction: column;
  line-height: 1.2;
}
.orders-money-block .meta-label {
  font-size: 0.7rem;
  color: #718096;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 700;
}
.orders-money-block.owed strong, .orders-money-block.owed { color: #c05621; font-weight: 700; }
.orders-money-block.paid strong, .orders-money-block.paid { color: #22543d; font-weight: 700; }

.orders-meta-row { font-size: 0.85rem; color: #4a5568; }
.orders-meta-row .meta-label {
  font-size: 0.7rem;
  color: #718096;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 700;
  margin-right: 0.25rem;
}
.orders-meta-row.email-sent    { color: #22543d; }
.orders-meta-row.email-sent    .meta-label { color: #22543d; }
.orders-meta-row.email-skipped { color: #9c4221; }
.orders-meta-row.email-skipped .meta-label { color: #9c4221; }

/* ---- Import products wizard ---- */
.import-step {
  margin-top: 0.75rem;
  padding: 0.75rem;
  background: #f7fafc;
  border: 1px solid #cbd5e0;
  border-radius: 8px;
}
.import-step-title {
  margin: 0 0 0.5rem;
  font-size: 0.95rem;
  font-weight: 700;
  color: #2d3748;
}
#import-paste {
  width: 100%;
  font-family: ui-monospace, monospace;
  font-size: 0.85rem;
  padding: 0.4rem;
  border: 1px solid #cbd5e0;
  border-radius: 4px;
  resize: vertical;
}
.import-source-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
  flex-wrap: wrap;
}
.import-file-label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex: 1 1 auto;
}
.import-mapping-table,
.import-preview-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0.5rem 0;
  font-size: 0.85rem;
}
.import-mapping-table th,
.import-mapping-table td,
.import-preview-table th,
.import-preview-table td {
  padding: 0.35rem 0.5rem;
  border-bottom: 1px solid #e2e8f0;
  text-align: left;
  vertical-align: top;
}
.import-mapping-table th,
.import-preview-table th {
  background: #edf2f7;
  font-weight: 700;
}
.import-mapping-table td:first-child {
  white-space: nowrap;
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.import-map-select {
  width: 100%;
  max-width: 220px;
}
.import-preview-table-wrap {
  margin: 0.5rem 0;
}
.import-preview-table-wrap > summary {
  cursor: pointer;
  color: #4a5568;
  font-weight: 600;
}
.import-preview-table tr.has-issue td {
  background: #fff5f5;
}
.import-preview-issue {
  color: #9c4221;
  font-size: 0.8rem;
}
.import-options {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0.75rem 0;
}
.import-options > label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  margin: 0;
  font-weight: 500;
  color: #2d3748;
  cursor: pointer;
}
/* Global `input { width:100%; padding:0.6rem }` would inflate checkboxes to
   full width and push the label text out of the row. Override for checkboxes
   inside import-options. */
.import-options > label > input[type="checkbox"] {
  width: auto;
  flex: 0 0 auto;
  padding: 0;
  margin: 0;
}
/* Same issue for the file input — global rules want to stretch + pad it. */
.import-file-label > input[type="file"] {
  width: auto;
  flex: 0 0 auto;
  padding: 0.25rem;
}

.orders-log { font-size: 0.85rem; }
.orders-log summary {
  cursor: pointer;
  color: #4a5568;
  font-weight: 600;
  padding: 0.25rem 0;
}
.orders-log pre {
  white-space: pre-wrap;
  word-wrap: break-word;
  background: #f7fafc;
  padding: 0.5rem 0.7rem;
  border-radius: 4px;
  font-family: inherit;
  font-size: 0.8rem;
  margin: 0.25rem 0 0;
  color: #2d3748;
}

.orders-actions {
  display: flex; flex-direction: column;
  gap: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid #edf2f7;
}
.orders-status-row {
  display: flex; gap: 0.35rem;
}
.orders-status-btn {
  width: auto; margin: 0;
  padding: 0.5rem 1rem;
  font-size: 0.9rem; font-weight: 600;
  background: #2c5282; color: white;
  border: 1px solid #2c5282;
  border-radius: 5px;
}
.orders-status-btn:hover { background: #2a4365; }
.orders-status-btn:disabled { opacity: 0.5; cursor: wait; }

.orders-contact-row {
  display: flex; gap: 0.4rem;
}
.orders-contact-input {
  flex: 1;
  padding: 0.4rem 0.55rem;
  border: 1px solid #cbd5e0;
  border-radius: 5px;
  font-size: 0.85rem;
  font-family: inherit;
}
.orders-log-btn {
  width: auto; margin: 0;
  padding: 0.35rem 0.85rem;
  font-size: 0.82rem; font-weight: 600;
}

.orders-take-balance-row { margin-top: 0.25rem; }
.orders-take-balance {
  width: 100%; margin: 0;
  padding: 0.55rem 0.85rem;
  font-size: 0.9rem; font-weight: 700;
  background: #d69e2e; color: white;
  border: none; border-radius: 5px;
}
.orders-take-balance:disabled {
  background: #cbd5e0; color: #4a5568;
  cursor: not-allowed;
}
.orders-paid {
  display: inline-block;
  padding: 0.4rem 0.7rem;
  background: #c6f6d5; color: #22543d;
  border-radius: 5px;
  font-weight: 600;
  font-size: 0.85rem;
}