/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

@import "design_tokens";

.flash {
  padding: var(--space-3) var(--space-4);
  margin: var(--space-4);
  border-radius: var(--radius-md);
  font-weight: var(--font-weight-medium);
}
.flash-notice { background: var(--color-success-light); color: var(--color-success); }
.flash-alert  { background: var(--color-danger-light);  color: var(--color-danger);  }

.signup-card {
  max-width: 28rem;
  margin: var(--space-12) auto;
  padding: var(--space-8);
  background: #eaeaf5 !important;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.signup-card h1 { margin-bottom: var(--space-2); }
.signup-card .meta {
  color: var(--color-text-muted);
  margin-bottom: var(--space-6);
}
.signup-card .meta.center,
.signup-card.center { text-align: center; }

.signup-form .field { margin-bottom: var(--space-4); }
.signup-form label {
  display: block;
  margin-bottom: var(--space-1);
  font-weight: var(--font-weight-medium);
}
.signup-form input[type="text"],
.signup-form input[type="email"],
.signup-form input[type="password"] {
  width: 100%;
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font: inherit;
  background: var(--color-bg);
}
.signup-form .hint {
  margin-top: var(--space-1);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.signup-form .actions input[type="submit"] {
  background: var(--color-primary);
  color: var(--color-bg);
  border: 0;
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-md);
  font: inherit;
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
}
.signup-form .actions input[type="submit"]:hover { background: var(--color-primary-hover); }

.form-errors {
  background: var(--color-danger-light);
  color: var(--color-danger);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
}
.form-errors ul { margin: var(--space-2) 0 0 var(--space-5); }

/* ============================================================
   Auth card — login / signup pages
   Blueprint design language — scoped locally to these two pages
   only (via .auth-page), intentionally distinct from the app-wide
   Ascent tokens in design_tokens.css. See CLAUDE.md Design System.
   ============================================================ */

.auth-page {
  --color-bg: #f2f2f3;
  --color-surface: #e9e9ea;
  --color-text: #1d1f20;
  --color-accent: #5980a6;
  --color-divider: color-mix(in srgb, #1d1f20 16%, transparent);
  --color-accent-600: #597ea3;
  --color-accent-700: #416180;
  --color-accent-800: #2c455d;
  --color-accent-900: #1d2d3d;
  --font-heading: "Barlow Condensed", system-ui, sans-serif;
  --font-heading-weight: 600;
  --font-body: "Barlow", system-ui, sans-serif;
  --auth-space-2: 6.8px;
  --auth-space-3: 10.2px;
  --auth-space-4: 13.6px;
  --auth-radius-md: 4px;
  --auth-leading: 24px;
  --auth-half: 12px;
  --auth-edge: clamp(20px, 5vw, 72px);

  font-family: var(--font-body);
  color: var(--color-text);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.auth-page .nav {
  display: flex;
  align-items: center;
  padding: var(--auth-half) var(--auth-edge);
}
.auth-page .nav-brand {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 18px;
  letter-spacing: 0.02em;
  color: var(--color-text);
}
.auth-page .nav-brand-logo {
  display: block;
  height: 68px;
  width: auto;
}

.auth-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(2 * var(--auth-leading)) var(--auth-edge);
}

.auth-card {
  position: relative;
  width: 100%;
  max-width: 26rem;
  padding: calc(2 * var(--auth-leading));
  background: color-mix(in srgb, var(--color-bg) 88%, transparent);
  backdrop-filter: blur(6px);
  border: 1px solid var(--color-divider);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12);
}
.auth-card > .corner {
  position: absolute;
  width: 15px;
  height: 15px;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
  pointer-events: none;
}
.auth-card > .corner::before {
  content: ""; position: absolute; left: 7px; top: 0; width: 1px; height: 100%; background: currentColor;
}
.auth-card > .corner::after {
  content: ""; position: absolute; top: 7px; left: 0; width: 100%; height: 1px; background: currentColor;
}
.auth-card > .corner.tl { top: -8px; left: -8px; }
.auth-card > .corner.tr { top: -8px; right: -8px; }
.auth-card > .corner.bl { bottom: -8px; left: -8px; }
.auth-card > .corner.br { bottom: -8px; right: -8px; }

.auth-card .kicker {
  display: block;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color-accent-700);
  margin: 0 0 var(--auth-half);
}
.auth-card h1 {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 28px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin: 0 0 var(--auth-half);
  color: var(--color-text);
}
.auth-card .meta {
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
  margin-bottom: var(--auth-leading);
  font-size: 16px;
  line-height: 1.5;
}

.auth-form .field { margin-bottom: var(--auth-leading); }
.auth-form label {
  display: block;
  margin-bottom: 5px;
  font-size: 14px;
  color: color-mix(in srgb, var(--color-text) 85%, transparent);
}
.auth-form input[type="text"],
.auth-form input[type="email"],
.auth-form input[type="password"],
.auth-form textarea {
  width: 100%;
  min-height: 36px;
  padding: 6px 10px;
  font: inherit;
  font-size: 15px;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--auth-radius-md);
}
.auth-form textarea { resize: vertical; line-height: 1.5; padding: 8px 10px; }

.auth-form input[type="text"]:hover,
.auth-form input[type="email"]:hover,
.auth-form input[type="password"]:hover,
.auth-form textarea:hover {
  border-color: color-mix(in srgb, var(--color-text) 45%, transparent);
}
.auth-form input[type="text"]:focus,
.auth-form input[type="email"]:focus,
.auth-form input[type="password"]:focus,
.auth-form textarea:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-accent) 25%, transparent);
}

.auth-form .row-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--auth-space-3);
  margin-bottom: var(--auth-leading);
  font-size: 15px;
  flex-wrap: wrap;
}
.auth-form .field-checkbox {
  display: flex;
  align-items: center;
  gap: var(--auth-space-2);
  margin: 0;
}
.auth-form .field-checkbox input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  accent-color: var(--color-accent);
  flex-shrink: 0;
  cursor: pointer;
}
.auth-form .field-checkbox label {
  margin: 0;
  font-size: 15px;
  color: var(--color-text);
  cursor: pointer;
}
.auth-form .row-between a {
  color: var(--color-accent-700);
  font-size: 15px;
}
.auth-form .row-between a:hover { color: var(--color-accent-900); }

.auth-form .grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--auth-leading);
}
@media (max-width: 480px) {
  .auth-form .grid-2 { grid-template-columns: 1fr; }
}

.auth-form .actions {
  margin-top: var(--auth-space-2);
}
.auth-form .actions input[type="submit"] {
  width: 100%;
  background: var(--color-accent-900);
  color: var(--color-bg);
  border: 1px solid var(--color-accent-900);
  padding: 10px var(--auth-space-4);
  border-radius: var(--auth-radius-md);
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 16px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  cursor: pointer;
  min-height: 44px;
}
.auth-form .actions input[type="submit"]:hover { background: var(--color-accent-800); border-color: var(--color-accent-800); }
.auth-form .actions input[type="submit"]:active { background: var(--color-accent-700); border-color: var(--color-accent-700); }

.auth-card .foot-note {
  margin-top: var(--auth-leading);
  font-size: 15px;
  text-align: center;
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
}
.auth-card .foot-note a { color: var(--color-accent-700); }
.auth-card .foot-note a:hover { color: var(--color-accent-900); }

/* ============================================================
   Onboarding Wizard — "Industry" system, sixth token scope
   (after .auth-page, .customer-body/.order-*, .dashboard-body,
   .bartender-body). Same hex family as the other five, own
   --onboard-* names so a palette change to one scope can't leak
   into another. See CLAUDE.md Design System.
   ============================================================ */

.onboarding-body {
  --onboard-color-bg: #f2f2f3;
  --onboard-color-surface: #e9e9ea;
  --onboard-color-text: #1d1f20;
  --onboard-color-divider: color-mix(in srgb, #1d1f20 16%, transparent);
  --onboard-color-accent-100: #eef6ff;
  --onboard-color-accent-500: #749dc4;
  --onboard-color-accent-600: #597ea3;
  --onboard-color-accent-700: #416180;
  --onboard-color-accent-800: #2c455d;
  --onboard-color-accent-900: #1d2d3d;
  --onboard-font-heading: "Barlow Condensed", system-ui, sans-serif;
  --onboard-font-heading-weight: 600;
  --onboard-font-body: "Barlow", system-ui, sans-serif;

  margin: 0;
  min-height: 100vh;
  background: var(--onboard-color-bg);
  color: var(--onboard-color-text);
  font-family: var(--onboard-font-body);
}

.onboarding-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 24px;
  border-bottom: 1px solid var(--onboard-color-divider);
}
.onboarding-header-logo { display: block; height: 68px; width: auto; }
.onboarding-header-shop {
  font-family: var(--onboard-font-heading);
  font-weight: var(--onboard-font-heading-weight);
  font-size: 15px;
  color: color-mix(in srgb, var(--onboard-color-text) 70%, transparent);
  padding-left: 14px;
  border-left: 1px solid var(--onboard-color-divider);
}

.onboarding-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 48px 24px 64px;
}

.onboarding-shell { width: 100%; max-width: 40rem; }

/* The flash is a direct child of .onboarding-main alongside .onboarding-shell. Without an
   explicit column direction above it sat *beside* the card as a second flex item, which on a
   phone squeezed the card off-screen (horizontal scroll). It now stacks above the card and
   shares the shell's width. Square corners + no outer margin to match the Industry scope —
   the global .flash is an Ascent component (rounded, var(--space-4) margin). */
.onboarding-body .flash {
  width: 100%;
  max-width: 40rem;
  margin: 0 0 20px;
  border-radius: 0;
}

@media (max-width: 540px) {
  .onboarding-main { padding: 24px 16px 48px; }
}

.onboarding-card {
  position: relative;
  background: var(--onboard-color-surface);
  border: 1px solid var(--onboard-color-divider);
}
.onboarding-card > .corner {
  position: absolute;
  width: 12px;
  height: 12px;
  color: color-mix(in srgb, var(--onboard-color-text) 55%, transparent);
  pointer-events: none;
}
.onboarding-card > .corner::before { content: ""; position: absolute; left: 5px; top: 0; width: 1px; height: 100%; background: currentColor; }
.onboarding-card > .corner::after { content: ""; position: absolute; top: 5px; left: 0; width: 100%; height: 1px; background: currentColor; }
.onboarding-card > .corner.tl { top: -6px; left: -6px; }
.onboarding-card > .corner.tr { top: -6px; right: -6px; }
.onboarding-card > .corner.bl { bottom: -6px; left: -6px; }
.onboarding-card > .corner.br { bottom: -6px; right: -6px; }

.onboarding-stepper {
  padding: 20px 32px;
  border-bottom: 1px solid var(--onboard-color-divider);
}
.onboarding-stepper ol {
  list-style: none;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin: 0;
  padding: 0;
}
.onboarding-stepper li {
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.onboarding-stepper li .bullet {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--onboard-color-divider);
  background: var(--onboard-color-bg);
  color: color-mix(in srgb, var(--onboard-color-text) 55%, transparent);
  font-family: var(--onboard-font-heading);
  font-weight: var(--onboard-font-heading-weight);
  font-size: 13px;
  margin-bottom: 6px;
  z-index: 1;
}
.onboarding-stepper li .label {
  font-family: var(--onboard-font-heading);
  font-weight: var(--onboard-font-heading-weight);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: color-mix(in srgb, var(--onboard-color-text) 55%, transparent);
}

/* connector line between bullets */
.onboarding-stepper li::before {
  content: "";
  position: absolute;
  top: 14px;
  left: -50%;
  right: 50%;
  height: 1px;
  background: var(--onboard-color-divider);
  z-index: 0;
}
.onboarding-stepper li:first-child::before { display: none; }

.onboarding-stepper li.done .bullet {
  background: var(--onboard-color-accent-800);
  border-color: var(--onboard-color-accent-800);
  color: var(--onboard-color-bg);
}
.onboarding-stepper li.current .bullet {
  background: var(--onboard-color-accent-500);
  border-color: var(--onboard-color-accent-500);
  color: var(--onboard-color-bg);
}
.onboarding-stepper li.done .label,
.onboarding-stepper li.current .label {
  color: var(--onboard-color-text);
}
.onboarding-stepper li.done::before { background: var(--onboard-color-accent-800); }

@media (max-width: 540px) {
  .onboarding-stepper li .label { display: none; }
}

.onboarding-card-body { padding: 32px; }
@media (max-width: 540px) {
  .onboarding-card-body { padding: 20px; }
}
.onboarding-card-body h1 {
  font-family: var(--onboard-font-heading);
  font-weight: var(--onboard-font-heading-weight);
  font-size: 26px;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  margin: 0 0 8px;
}
.onboarding-card-body .meta {
  color: color-mix(in srgb, var(--onboard-color-text) 78%, transparent);
  margin-bottom: 24px;
  line-height: 1.5;
  font-size: 15px;
}

.onboarding-body .field { margin-bottom: 20px; }
.onboarding-body label {
  display: block;
  margin-bottom: 5px;
  font-size: 14px;
  color: color-mix(in srgb, var(--onboard-color-text) 85%, transparent);
}
.onboarding-body input[type="text"],
.onboarding-body input[type="email"],
.onboarding-body input[type="number"] {
  width: 100%;
  min-height: 36px;
  padding: 6px 10px;
  font: inherit;
  font-size: 15px;
  color: var(--onboard-color-text);
  background: var(--onboard-color-bg);
  border: 1px solid var(--onboard-color-divider);
}
.onboarding-body input[type="text"]:hover,
.onboarding-body input[type="email"]:hover,
.onboarding-body input[type="number"]:hover {
  border-color: color-mix(in srgb, var(--onboard-color-text) 45%, transparent);
}
.onboarding-body input[type="text"]:focus,
.onboarding-body input[type="email"]:focus,
.onboarding-body input[type="number"]:focus {
  outline: none;
  border-color: var(--onboard-color-accent-500);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--onboard-color-accent-500) 25%, transparent);
}
.onboarding-body .hint {
  margin-top: 5px;
  font-size: 13px;
  color: color-mix(in srgb, var(--onboard-color-text) 65%, transparent);
}

.onboarding-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 540px) {
  .onboarding-row { grid-template-columns: 1fr; }
}

.onboarding-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--onboard-color-divider);
}
.onboarding-actions form { margin: 0; }
.onboarding-body .btn-primary,
.onboarding-actions button,
.onboarding-actions input[type="submit"] {
  background: var(--onboard-color-accent-900);
  color: var(--onboard-color-bg);
  border: 1px solid var(--onboard-color-accent-900);
  padding: 10px 24px;
  font-family: var(--onboard-font-heading);
  font-weight: var(--onboard-font-heading-weight);
  font-size: 15px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  cursor: pointer;
  min-height: 42px;
}
.onboarding-actions button:hover,
.onboarding-actions input[type="submit"]:hover {
  background: var(--onboard-color-accent-800);
  border-color: var(--onboard-color-accent-800);
}

.onboarding-info-panel {
  background: var(--onboard-color-accent-100);
  padding: 16px 20px;
  border: 1px solid var(--onboard-color-divider);
  margin-bottom: 20px;
}
.onboarding-info-panel p { margin: 0; font-size: 15px; line-height: 1.5; }
.onboarding-info-panel p + p { margin-top: 8px; }

.onboarding-section-title {
  font-family: var(--onboard-font-heading);
  font-weight: var(--onboard-font-heading-weight);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--onboard-color-accent-700);
  margin: 24px 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--onboard-color-divider);
}
.onboarding-section-title:first-child { margin-top: 0; }

.onboarding-recap {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
}
.onboarding-recap li {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--onboard-color-divider);
  font-size: 15px;
}
.onboarding-recap li:last-child { border-bottom: 0; }
.onboarding-recap .label {
  color: color-mix(in srgb, var(--onboard-color-text) 65%, transparent);
}
.onboarding-recap .value { font-weight: 600; }

/* Buttons — Ascent */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  font-weight: 700;
  font-size: var(--text-sm);
  cursor: pointer;
  border: 0;
  font-family: inherit;
  text-decoration: none;
  transition: all 200ms ease;
  line-height: 1.4;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}
.btn:active {
  transform: translateY(0);
}
.btn-sm { padding: var(--space-1) var(--space-3); font-size: var(--text-sm); }
.btn-primary {
  background: linear-gradient(135deg, var(--color-primary) 0%, #5a59c8 100%);
  color: white;
  box-shadow: 0 4px 12px rgba(70, 69, 199, 0.3);
}
.btn-primary:hover {
  background: linear-gradient(135deg, var(--color-primary-hover) 0%, #4848b8 100%);
  box-shadow: 0 8px 24px rgba(70, 69, 199, 0.4);
}
.btn-ghost {
  background: white;
  color: var(--color-primary);
  border: 2px solid #d8d8e8;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.btn-ghost:hover {
  background: var(--color-primary-light);
  border-color: var(--color-primary);
  box-shadow: 0 4px 12px rgba(70, 69, 199, 0.15);
}
.btn-outline {
  background: white;
  border: 2px solid currentColor;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.btn-outline:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.btn-danger.btn-outline {
  background: white !important;
  color: #d32f2f;
  border-color: #d32f2f;
  box-shadow: 0 2px 8px rgba(211, 47, 47, 0.1);
}
.btn-danger.btn-outline:hover {
  background: #ffe6e6 !important;
  border-color: #d32f2f;
  box-shadow: 0 4px 12px rgba(211, 47, 47, 0.15);
}
.btn-danger {
  background: linear-gradient(135deg, #d32f2f 0%, #b71c1c 100%);
  color: white;
  box-shadow: 0 4px 12px rgba(211, 47, 47, 0.3);
}
.btn-danger:hover {
  background: linear-gradient(135deg, #b71c1c 0%, #a01414 100%);
  box-shadow: 0 8px 24px rgba(211, 47, 47, 0.4);
}
.btn-icon-danger {
  background: transparent;
  color: #d32f2f;
  border: 0;
  padding: var(--space-2) var(--space-2);
  border-radius: var(--radius-md);
  font-weight: 700;
  font-size: var(--text-lg);
  cursor: pointer;
  font-family: inherit;
  transition: all 200ms ease;
  display: inline-block;
  line-height: 1.4;
  box-shadow: none;
}
.btn-icon-danger:hover {
  background: #ffe6e6;
  box-shadow: 0 2px 8px rgba(211, 47, 47, 0.15);
  transform: none;
}
.btn-icon-danger:active {
  transform: none;
}
.btn-danger-ghost {
  background: white;
  color: #d32f2f;
  border: 2px solid #f5d9d9;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.btn-danger-ghost:hover {
  background: #ffe6e6;
  border-color: #d32f2f;
  box-shadow: 0 4px 12px rgba(211, 47, 47, 0.15);
}

/* button_to wraps in a <form>, neutralize default styles */
form.button_to { display: inline; margin: 0; }
/* `all: unset` also resets box-sizing to content-box, so any button with an explicit
   height/min-height/width (e.g. the mobile touch-target rules, .btn-block) sized
   inconsistently against its non-button_to siblings. Put border-box back. */
form.button_to button { all: unset; cursor: pointer; box-sizing: border-box; }
form.button_to button.btn,
form.button_to button.btn-primary,
form.button_to button.btn-danger,
form.button_to button.btn-ghost,
form.button_to button.btn-danger-ghost,
form.button_to button.btn-icon-danger,
form.button_to button.btn-sm,
form.button_to button.user-menu-logout {
  /* re-apply where needed via the class above (.btn etc) */
}

.empty-state {
  background: white;
  border: 2px dashed #d8d8e8;
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  text-align: center;
  color: #8a8a94;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
}


.muted { color: var(--color-text-muted); }
.small { font-size: var(--text-sm); }

/* ============================================================
   Customer-facing menu — Ascent Design System
   ============================================================ */

.customer-body {
  background: linear-gradient(135deg, #f8f9fc 0%, #f3f4f9 100%);
  min-height: 100vh;
  padding-bottom: 6rem; /* leave room for sticky cart bar */
}

/* Order-composing screens (home/search/browse/review) render under the
   separate layouts/customer_order.html.erb layout, which adds this class
   alongside .customer-body — single source of truth for the flat Industry
   background, replacing the Ascent gradient above for just these screens.
   Receipt/flagged/payment keep rendering under layouts/customer.html.erb
   (.customer-body only), so they're unaffected. */
.customer-order-body {
  background: #f2f2f3;
  padding-bottom: 0;

  /* "Industry" design tokens — defined here (body level) rather than only on the
     5 screen containers below, since the persistent order-chrome header/footer
     (layouts/customer_order.html.erb) sit outside all of them as body-level
     siblings and still need these to inherit down to them. */
  --order-color-bg: #f2f2f3;
  --order-color-text: #1d1f20;
  --order-color-divider: color-mix(in srgb, #1d1f20 16%, transparent);
  --order-color-accent: #5980a6;
  --order-color-accent-100: #eef6ff;
  --order-color-accent-500: #749dc4;
  --order-color-accent-600: #597ea3;
  --order-color-accent-700: #416180;
  --order-color-accent-800: #2c455d;
  --order-color-neutral-100: #f5f5f8;
  --order-color-neutral-800: #424244;
  --order-color-success: #3d6b4f;
  --order-color-success-bg: #e6f0ea;
  --order-color-danger: #8c3b34;
  --order-color-danger-bg: #f6e8e6;
  --order-font-heading: "Barlow Condensed", system-ui, sans-serif;
  --order-font-heading-weight: 600;
  --order-font-body: "Barlow", system-ui, sans-serif;
  --order-space-1: 3.4px;
  --order-space-2: 6.8px;
  --order-space-3: 10.2px;
  --order-space-4: 13.6px;
  font-family: var(--order-font-body);
  color: var(--order-color-text);
}

/* ============================================================
   Customer order-composing flow — "Industry" design system
   Scoped to home/search/browse/review + the product-card partial
   only. Receipt/flagged/payment screens intentionally keep the
   Ascent styling below (.customer-receipt, .customer-mini-hero,
   .flagged-*) — no design reference exists for them yet. See
   CLAUDE.md Design System section.

   This is the exact same "Industry" system as landing/signup/login
   (blueprint) — verified against the reference's own styles.css.
   Component classes below (.btn, .tag, .field/.input, .seg, .corner,
   .blueprint) are scoped under .customer-body since the equivalent
   bare classes (.btn, .btn-primary, .btn-ghost) already exist
   globally for the Ascent system (dashboard/bartender/settings) —
   scoping avoids colliding with those. Custom-property tokens stay
   scoped to the 5 screen containers, same pattern as .auth-page.
   ============================================================ */

/* Tokens for these 5 containers now live on .customer-order-body above (the
   common body-level ancestor) — see comment there for why. */

/* — persistent order-chrome header/footer (layouts/customer_order.html.erb) —
   present on every order-composing screen: shop + table + "Porosia juaj" up
   top, running cart total pinned to the bottom regardless of scroll. */
.order-chrome-header {
  padding: 28px 20px 16px;
  background: var(--order-color-accent-100);
  border-bottom: 1px solid var(--order-color-divider);
}
.order-chrome-header h1 {
  margin: 0;
  font-family: var(--order-font-heading);
  font-weight: var(--order-font-heading-weight);
  font-size: 18px;
  line-height: 22px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--order-color-accent-700);
}
.order-chrome-body { padding-bottom: 76px; } /* clears the fixed footer below */
.order-chrome-footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px calc(16px + env(safe-area-inset-bottom));
  background: var(--order-color-accent-100);
  border-top: 1px solid var(--order-color-divider);
  font-family: var(--order-font-heading);
  font-weight: var(--order-font-heading-weight);
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--order-color-text);
}
.order-chrome-footer-right { display: flex; align-items: center; gap: 14px; }
.order-chrome-footer-amount {
  font-variant-numeric: tabular-nums;
  color: var(--order-color-accent-800);
  font-size: 18px; /* 20% bigger than the footer's 15px base */
}
.order-chrome-footer-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--order-color-accent-800);
  color: var(--order-color-bg);
  font-family: var(--order-font-heading);
  font-weight: var(--order-font-heading-weight);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  padding: 8px 14px;
  border: 1px solid var(--order-color-accent-800);
  text-decoration: none;
  white-space: nowrap;
}
.order-chrome-footer-cta:hover { background: var(--order-color-accent-700); border-color: var(--order-color-accent-700); }

/* — reusable "Industry" components, scoped under .customer-body — */
.customer-body .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; text-decoration: none;
  font-family: var(--order-font-heading); font-weight: var(--order-font-heading-weight);
  font-size: 14px; line-height: 1.2; color: var(--order-color-text);
  background: transparent; border: 1px solid var(--order-color-divider);
  padding: var(--order-space-2) calc(var(--order-space-3) * 1.2);
  border-radius: 0;
}
.customer-body .btn:disabled { opacity: 0.45; cursor: not-allowed; }
.customer-body .btn-primary { background: var(--order-color-accent-500); color: var(--order-color-bg); border-color: var(--order-color-accent-500); }
.customer-body .btn-primary:hover { background: var(--order-color-accent-600); border-color: var(--order-color-accent-600); }
.customer-body .btn-primary:active { background: var(--order-color-accent-700); border-color: var(--order-color-accent-700); }
.customer-body .btn-secondary { border-color: var(--order-color-divider); }
.customer-body .btn-secondary:hover { background: color-mix(in srgb, var(--order-color-text) 7%, transparent); }
.customer-body .btn-ghost { color: var(--order-color-accent); border-color: transparent; padding-inline: var(--order-space-1); }
.customer-body .btn-ghost:hover { background: color-mix(in srgb, var(--order-color-accent) 10%, transparent); }
.customer-body .btn-block { width: 100%; }

.customer-body .blueprint { position: relative; }
.customer-body .blueprint > .corner, .customer-body .frame > .corner, .customer-body .pcard > .corner {
  position: absolute; width: 12px; height: 12px;
  color: color-mix(in srgb, var(--order-color-text) 55%, transparent);
  pointer-events: none;
}
.customer-body .blueprint > .corner::before, .customer-body .frame > .corner::before, .customer-body .pcard > .corner::before,
.customer-body .blueprint > .corner::after, .customer-body .frame > .corner::after, .customer-body .pcard > .corner::after {
  content: ""; position: absolute; background: currentColor;
}
.customer-body .blueprint > .corner::before, .customer-body .frame > .corner::before, .customer-body .pcard > .corner::before { left: 5px; top: 0; width: 1px; height: 100%; }
.customer-body .blueprint > .corner::after, .customer-body .frame > .corner::after, .customer-body .pcard > .corner::after { top: 5px; left: 0; width: 100%; height: 1px; }
.customer-body .corner.tl { top: -6px; left: -6px; }
.customer-body .corner.tr { top: -6px; right: -6px; }
.customer-body .corner.bl { bottom: -6px; left: -6px; }
.customer-body .corner.br { bottom: -6px; right: -6px; }

.customer-body .tag {
  display: inline-flex; align-items: center; font-size: 11px; letter-spacing: 0.02em;
  padding: 3px 10px; border-radius: 3px; border: none; cursor: pointer; font-family: inherit;
}
.customer-body .tag-accent { background: var(--order-color-accent-100); color: var(--order-color-accent-800); }
.customer-body .tag-neutral { background: var(--order-color-neutral-100); color: var(--order-color-neutral-800); }
.customer-body .tag-outline { background: transparent; border: 1px solid var(--order-color-accent); color: var(--order-color-accent); }
.customer-body .tag-success { background: var(--order-color-success-bg); color: var(--order-color-success); }
.customer-body .tag-danger { background: var(--order-color-danger-bg); color: var(--order-color-danger); }

.customer-body .field > label { display: block; font-size: 12px; margin-bottom: 5px; color: color-mix(in srgb, var(--order-color-text) 70%, transparent); }
.customer-body .input {
  width: 100%; min-height: 36px; padding: 6px 10px; font: inherit;
  font-size: 14px; color: var(--order-color-text); caret-color: var(--order-color-accent);
  background: var(--order-color-bg); border: 1px solid var(--order-color-divider); border-radius: 0;
}
.customer-body .input:hover { border-color: color-mix(in srgb, var(--order-color-text) 45%, transparent); }
.customer-body .input:focus-visible { border-color: var(--order-color-accent); outline-offset: 0; }

.customer-body .seg { display: inline-flex; overflow: hidden; border: 1px solid var(--order-color-divider); }
.customer-body .seg-opt { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; font-size: 13px; cursor: pointer; }
.customer-body .seg-opt + .seg-opt { border-left: 1px solid var(--order-color-divider); }
.customer-body .seg-opt:has(input:checked) { background: var(--order-color-accent); color: var(--order-color-bg); }
.customer-body .seg-opt:not(:has(input:checked)):hover { background: color-mix(in srgb, var(--order-color-text) 7%, transparent); }

/* — screen shell: .frame/.pcard cards, stepper, etc. The old per-screen .hd
   heading is gone — replaced by the persistent .order-chrome-header in
   layouts/customer_order.html.erb. Only a light "← Prapa" back-link row
   remains local to search/browse/review. */
.order-back-row { padding: 16px 20px 0; }
.order-back-row .btn { margin-bottom: 0; }
.customer-body .sub { font-size: 13px; color: color-mix(in srgb, var(--order-color-text) 70%, transparent); margin-top: 4px; }

.customer-body .frame {
  position: relative; border: 1px solid var(--order-color-divider);
  width: 52px; height: 52px; display: flex; align-items: center; justify-content: center;
  font-size: 22px; color: var(--order-color-accent-700);
}
.customer-body .pcard { position: relative; border: 1px solid var(--order-color-divider); background: var(--order-color-bg); padding: 14px; }
.customer-body .pname { font-family: var(--order-font-heading); font-weight: var(--order-font-heading-weight); font-size: 16px; letter-spacing: 0.01em; color: var(--order-color-text); }
.customer-body .pprice { font-size: 13px; font-weight: 600; color: var(--order-color-accent-700); font-variant-numeric: tabular-nums; margin-top: 2px; }

.customer-body .stepper { display: inline-flex; align-items: stretch; border: 1px solid var(--order-color-divider); }
.customer-body .stepper > span { display: flex; align-items: center; justify-content: center; min-width: 28px; padding: 4px 8px; font-size: 13px; font-weight: 600; color: var(--order-color-accent-700); font-variant-numeric: tabular-nums; }
/* Higher specificity than the app-wide `form.button_to button { all: unset }` reset (0,1,2). */
.customer-body .stepper .stepper-btn {
  display: flex; align-items: center; justify-content: center; min-width: 28px; padding: 4px 8px;
  font-size: 13px; font-weight: 600; color: var(--order-color-accent-700); font-variant-numeric: tabular-nums;
  background: none; border: none; cursor: pointer; line-height: 1;
}
.customer-body .stepper > span + span, .customer-body .stepper > .stepper-btn + span,
.customer-body .stepper > span + .stepper-btn, .customer-body .stepper > .stepper-btn + .stepper-btn {
  border-left: 1px solid var(--order-color-divider);
}

.customer-body .tag-row { display: flex; gap: 6px; margin-top: 12px; flex-wrap: wrap; }
.customer-body .addbtn {
  background: var(--order-color-accent-500); color: var(--order-color-bg);
  border: 1px solid var(--order-color-accent-500); padding: 8px 14px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.02em; white-space: nowrap; cursor: pointer;
}
.customer-body .quickadd { width: 26px; height: 26px; border: 1px solid var(--order-color-divider); display: flex; align-items: center; justify-content: center; font-size: 15px; color: var(--order-color-accent-700); flex: 0 0 auto; background: none; cursor: pointer; }
.customer-body .categories { display: flex; gap: 8px; padding: 16px 20px 0; overflow-x: auto; }

.customer-body .divider { height: 1px; background: var(--order-color-divider); margin: 10px 0; }
.customer-body .review-row { display: flex; justify-content: space-between; font-size: 14px; color: var(--order-color-text); }
.customer-body .review-row .meta { color: color-mix(in srgb, var(--order-color-text) 70%, transparent); font-size: 13px; }
.customer-body .total-row { display: flex; justify-content: space-between; font-size: 15px; font-weight: 700; font-family: var(--order-font-heading); text-transform: uppercase; letter-spacing: 0.02em; }

/* — order home — */
.customer-order-home {
  max-width: 36rem;
  margin: 0 auto;
  /* Accounts for .order-chrome-header above it (~44px padding + up to 2 lines
     of heading text) so the empty-state centering below has the actual
     remaining viewport height to work with, not a full extra 100vh. */
  min-height: calc(100vh - 90px);
  display: flex;
  flex-direction: column;
  /* .order-home-add-more is position: fixed (see below) and no longer occupies flex space —
     this keeps content (the empty-state's centered block, or the last line item) clear of
     where it now floats: the fixed footer's 76px + the add-more panel's own height + a gap. */
  padding-bottom: 180px;
}
.customer-order-home-empty {
  flex: 1 1 0%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 40px;
  gap: 8px;
}
.customer-order-home-empty .frame { margin: 0 auto; }
.customer-order-home-empty h2 { font-family: var(--order-font-heading); font-weight: var(--order-font-heading-weight); font-size: 16px; text-transform: uppercase; color: var(--order-color-text); margin: 8px 0 0; }
.customer-order-home-empty p { color: color-mix(in srgb, var(--order-color-text) 70%, transparent); font-size: 13px; margin: 0; }

.customer-body .order-home-heading {
  font-family: var(--order-font-heading);
  font-weight: var(--order-font-heading-weight);
  font-size: 20px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--order-color-text);
  padding: 20px 20px 0;
  margin: 0;
}

.customer-order-home-body { flex: 0 1 auto; padding: 20px; }
.customer-line-items { list-style: none; padding: 0; margin: 0 0 12px; display: flex; flex-direction: column; gap: 16px; }
/* 10% bigger than the shared 13px .pprice used elsewhere (product cards in search/browse
   keep the base size — this scopes the bump to order-home's own row totals only). */
.customer-body .customer-line-items .pprice { font-size: 14.3px; }

/* Pinned just above the fixed footer (position: fixed; bottom: 76px — 76px is the exact
   value .order-chrome-body already reserves as clearance for the footer's own height, so
   this sits flush above it with no gap or overlap) rather than sitting in normal document
   flow. It used to be reachable only by scrolling past the empty-state's centered content
   or the full line-item list — moved here so "add a product" is always visible without
   scrolling, on both the empty and filled states (same shared partial, see below).
   Needs an opaque background now that content scrolls underneath it — the earlier
   transparent/no-fill treatment (chosen to avoid a third colored block matching the
   header/footer's accent-100) assumed normal in-flow placement against the plain page
   background; fixed-positioned, transparent would let scrolled content show through it.
   --order-color-bg keeps it neutral (the page's own base tone, not a new accent color)
   while still being opaque. */
.customer-body .order-home-add-more {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 76px;
  z-index: 5;
  margin: 0 20px;
  background: var(--order-color-bg);
  border: 1px solid var(--order-color-accent-500);
  padding: 9px;
}
.customer-body .order-home-add-more-heading {
  font-family: var(--order-font-heading);
  font-weight: var(--order-font-heading-weight);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--order-color-accent-700);
  margin: 0 0 10px;
}
.customer-body .order-home-add-more-actions { display: flex; flex-direction: row; gap: 16px; }
.customer-body .order-home-add-more-actions .btn {
  flex: 1 1 0;
  background: var(--order-color-accent-500);
  border-color: var(--order-color-accent-500);
  color: var(--order-color-bg);
}
.customer-body .order-home-add-more-actions .btn:hover {
  background: var(--order-color-accent-600);
  border-color: var(--order-color-accent-600);
}

/* The generic "+" corner registration marks (shared with .frame/.pcard sectioning
   elements elsewhere) read as too heavy on these two small buttons, making them look
   like another bordered panel rather than a tappable action — shrink and lighten them
   here specifically. */
.customer-body .order-home-add-more-actions .blueprint > .corner {
  width: 8px; height: 8px;
  color: color-mix(in srgb, var(--order-color-text) 30%, transparent);
}
.customer-body .order-home-add-more-actions .blueprint > .corner::before { left: 3px; }
.customer-body .order-home-add-more-actions .blueprint > .corner::after { top: 3px; }
.customer-body .order-home-add-more-actions .corner.tl { top: -4px; left: -4px; }
.customer-body .order-home-add-more-actions .corner.tr { top: -4px; right: -4px; }
.customer-body .order-home-add-more-actions .corner.bl { bottom: -4px; left: -4px; }
.customer-body .order-home-add-more-actions .corner.br { bottom: -4px; right: -4px; }
.pcard-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.pcard-row-end { display: flex; align-items: center; gap: 12px; }
.pcard-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; }
.pcard-info { flex: 1; min-width: 0; }
.pcard-thumb { flex: 0 0 auto; }
.pcard-thumb-img { width: 100%; height: 100%; object-fit: cover; }
.pcard-video { width: 100%; max-width: 320px; margin-top: 10px; display: block; }

/* Order-home line items are read-only (name, unit price, quantity, row total) —
   quantity is only ever changed via the search/browse product-card stepper, so
   these rows get a small remove (×) button instead of the +/- stepper. */
.customer-body .line-stats { display: flex; flex-direction: row; align-items: baseline; gap: 4px; }
.customer-body .line-price, .customer-body .line-qty {
  font-size: 12px; color: color-mix(in srgb, var(--order-color-text) 65%, transparent); font-variant-numeric: tabular-nums;
}
/* Higher specificity than the app-wide `form.button_to button { all: unset }` reset (0,1,2). */
.customer-body .pcard .line-remove-btn {
  flex: 0 0 auto;
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--order-color-divider);
  background: none; color: var(--order-color-accent-700);
  cursor: pointer;
}
.customer-body .pcard .line-remove-btn svg { width: 14px; height: 14px; }

/* — search — */
.customer-search { max-width: 36rem; margin: 0 auto; padding-bottom: 20px; }
.customer-search-bar { position: relative; padding: 16px 20px 0; }
.customer-search-bar .customer-search-icon { position: absolute; left: 32px; top: 50%; transform: translateY(-50%); color: color-mix(in srgb, var(--order-color-text) 55%, transparent); pointer-events: none; }
.customer-search-bar .input { padding-left: 30px; }
.customer-search-empty { color: color-mix(in srgb, var(--order-color-text) 70%, transparent); text-align: center; padding: var(--space-8) 20px; }
.customer-product-list { display: flex; flex-direction: column; gap: 12px; padding: 16px 20px 0; }

/* — browse — */
.customer-browse { max-width: 36rem; margin: 0 auto; padding-bottom: 20px; }

/* — review — */
.customer-review { max-width: 36rem; margin: 0 auto; padding: 0 20px 20px; }
.customer-review-list { list-style: none; padding: 0; margin: 16px 0 0; display: flex; flex-direction: column; gap: 8px; }
.customer-review-form { display: flex; flex-direction: column; gap: 16px; margin-top: 20px; }
.customer-review-caption { text-align: center; color: color-mix(in srgb, var(--order-color-text) 70%, transparent); font-size: 13px; }

/* Payment method picker — .seg segmented control, extrapolated from the
   system's own form-control vocabulary (no explicit mockup for this partial). */
.customer-payment-picker { display: flex; flex-direction: column; gap: 16px; }
.payment-method-fieldset { border: none; padding: 0; margin: 0; }
.payment-method-fieldset legend { font-size: 12px; margin-bottom: 5px; color: color-mix(in srgb, var(--order-color-text) 70%, transparent); padding: 0; }

/* — receipt (Order Placed) — rendered via the dedicated customer_receipt layout, not the
   persistent order-chrome header/footer (there's no cart left to total once an order exists —
   see Customer::OrdersController::RECEIPT_ACTIONS). Reuses .order-chrome-header directly as a
   plain view-local element for the same shop/table identity strip as every other screen. */
.customer-receipt-main { max-width: 36rem; margin: 0 auto; padding: 20px; }
.receipt-heading { font-family: var(--order-font-heading); font-weight: var(--order-font-heading-weight); font-size: 24px; text-transform: uppercase; letter-spacing: 0.02em; margin: 0 0 8px; }
.receipt-meta-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; color: color-mix(in srgb, var(--order-color-text) 65%, transparent); margin-bottom: 16px; }
.receipt-payment { font-size: 14px; margin-bottom: 16px; }
.receipt-note { font-size: 13px; color: color-mix(in srgb, var(--order-color-text) 65%, transparent); text-align: center; margin: 20px 0 0; }

/* ============================================================
   Owner/manager dashboard + settings — "Industry" design system
   ============================================================
   Fourth scope for this design system (after .auth-page, .customer-body/
   .customer-order-body, and landing.html.erb's own inline copy) — same shared
   palette/fonts, copied into a new scope rather than centralized, matching how
   this system has been extended each previous time. Tokens prefixed --dash-*
   (not bare --color-*) to match the more recent .customer-body precedent
   (--order-color-*) and avoid any ambiguity with design_tokens.css's global
   Ascent --color-* tokens. Every component below is scoped under
   .dashboard-body — never a bare class name — since bare .btn/.btn-primary/
   .card already exist for Ascent elsewhere in the app (e.g. the onboarding
   wizard). The bartender board (a separate, later redesign pass) has since
   moved off bare Ascent classes too, onto its own --bar-color-*-scoped
   .bartender-body components — see that block further down this file — and
   the old unscoped bartender.css was deleted as dead code. */
.dashboard-body {
  background: #f2f2f3;
  --dash-color-bg: #f2f2f3;
  --dash-color-surface: #e9e9ea;
  --dash-color-text: #1d1f20;
  --dash-color-divider: color-mix(in srgb, #1d1f20 16%, transparent);
  --dash-color-accent: #5980a6;
  --dash-color-accent-100: #eef6ff;
  --dash-color-accent-500: #749dc4;
  --dash-color-accent-600: #597ea3;
  --dash-color-accent-700: #416180;
  --dash-color-accent-800: #2c455d;
  --dash-color-accent-900: #1d2d3d;
  --dash-color-neutral-100: #f5f5f8;
  --dash-color-neutral-800: #424244;
  --dash-color-success: #3d6b4f;
  --dash-color-success-bg: #e6f0ea;
  --dash-color-danger: #8c3b34;
  --dash-color-danger-bg: #f6e8e6;
  --dash-font-heading: "Barlow Condensed", system-ui, sans-serif;
  --dash-font-heading-weight: 600;
  --dash-font-body: "Barlow", system-ui, sans-serif;
  font-family: var(--dash-font-body);
  color: var(--dash-color-text);
}
/* Base heading treatment: condensed font + weight only. text-transform: uppercase is applied
   separately, only to genuinely static UI chrome (page titles, section labels, modal/tab
   headers) — deliberately NOT here, since these bare h1-h3 selectors also wrap dynamic,
   user-entered content (zone/menu names in .pcard-head h3). Uppercasing e.g. "Outdoor Seating"
   unconditionally both looks aggressive on real names and breaks exact-case Capybara text
   matching in specs that assert on that user-entered text — same reasoning that kept
   .customer-body .pname (product names) out of the uppercase treatment already. */
.dashboard-body h1, .dashboard-body h2, .dashboard-body h3, .dashboard-body .heading {
  font-family: var(--dash-font-heading);
  font-weight: var(--dash-font-heading-weight);
  letter-spacing: 0.02em;
  margin: 0;
  color: var(--dash-color-text);
}
.dashboard-body .kicker { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; color: var(--dash-color-accent-700); margin: 0 0 6px; }

/* — corner-bracket motif, 12px canonical variant (matches .customer-body/landing) — */
.dashboard-body .blueprint, .dashboard-body .pcard, .dashboard-body .form-card, .dashboard-body .dash-modal-content { position: relative; }
.dashboard-body .corner { position: absolute; width: 12px; height: 12px; color: color-mix(in srgb, var(--dash-color-text) 55%, transparent); pointer-events: none; }
.dashboard-body .corner::before { content: ""; position: absolute; left: 5px; top: 0; width: 1px; height: 100%; background: currentColor; }
.dashboard-body .corner::after { content: ""; position: absolute; top: 5px; left: 0; width: 100%; height: 1px; background: currentColor; }
.dashboard-body .corner.tl { top: -6px; left: -6px; }
.dashboard-body .corner.tr { top: -6px; right: -6px; }
.dashboard-body .corner.bl { bottom: -6px; left: -6px; }
.dashboard-body .corner.br { bottom: -6px; right: -6px; }

/* — buttons — */
.dashboard-body .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; text-decoration: none;
  font-family: var(--dash-font-heading); font-weight: var(--dash-font-heading-weight);
  font-size: 13.5px; line-height: 1.2; color: var(--dash-color-text);
  background: transparent; border: 1px solid var(--dash-color-divider);
  padding: 9px 16px; border-radius: 0;
}
.dashboard-body .btn:disabled { opacity: 0.45; cursor: not-allowed; }
.dashboard-body .btn-primary { background: var(--dash-color-accent-800); color: var(--dash-color-bg); border-color: var(--dash-color-accent-800); }
.dashboard-body .btn-primary:hover { background: var(--dash-color-accent-900); border-color: var(--dash-color-accent-900); }
.dashboard-body .btn-secondary { border-color: var(--dash-color-accent-500); color: var(--dash-color-accent-700); }
.dashboard-body .btn-secondary:hover { background: color-mix(in srgb, var(--dash-color-accent-500) 10%, transparent); }
.dashboard-body .btn-ghost { border-color: transparent; color: var(--dash-color-accent-700); }
.dashboard-body .btn-ghost:hover { background: color-mix(in srgb, var(--dash-color-accent) 10%, transparent); }
.dashboard-body .btn-danger-ghost { border-color: transparent; color: var(--dash-color-danger); }
.dashboard-body .btn-danger-ghost:hover { background: color-mix(in srgb, var(--dash-color-danger) 10%, transparent); }
.dashboard-body .btn-sm { padding: 5px 10px; font-size: 12px; }
/* Primary create/edit actions on the dashboard home cards — deliberately larger than the
   base .btn so they read as the main action on their section, and comfortably clear the
   ~44px touch target without needing the mobile min-height override. */
.dashboard-body .btn-lg { padding: 12px 22px; font-size: 15px; }
.dashboard-body .btn-block { width: 100%; }

/* — form fields — */
.dashboard-body .field { margin-bottom: 18px; max-width: 30rem; }
.dashboard-body .field.wide { max-width: 100%; }
.dashboard-body .field > label { display: block; font-size: 12.5px; margin-bottom: 5px; color: color-mix(in srgb, var(--dash-color-text) 70%, transparent); }
.dashboard-body .input,
.dashboard-body textarea.input,
.dashboard-body select.input {
  width: 100%; min-height: 38px; padding: 7px 10px; font: inherit; font-size: 14px;
  color: var(--dash-color-text); background: var(--dash-color-bg);
  border: 1px solid var(--dash-color-divider); border-radius: 0;
}
.dashboard-body textarea.input { min-height: 84px; resize: vertical; }
.dashboard-body .input:hover { border-color: color-mix(in srgb, var(--dash-color-text) 45%, transparent); }
.dashboard-body .input:focus-visible { outline: none; border-color: var(--dash-color-accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--dash-color-accent) 20%, transparent); }
.dashboard-body .field-hint { font-size: 12px; color: color-mix(in srgb, var(--dash-color-text) 60%, transparent); margin-top: 5px; }
.dashboard-body .field-media-preview { margin-bottom: 10px; }
.dashboard-body .field-media-preview img { max-width: 160px; display: block; margin-bottom: 6px; }
.dashboard-body .field-media-preview video { max-width: 220px; display: block; margin-bottom: 6px; }
.dashboard-body .form-errors { border: 1px solid var(--dash-color-danger); background: var(--dash-color-danger-bg); color: var(--dash-color-danger); padding: 12px 14px; margin-bottom: 18px; font-size: 13px; }
.dashboard-body .form-errors ul { margin: 4px 0 0; padding-left: 18px; }

/* — subscription status banner (OWN-18) — expired/suspended owners can now reach
   Dashboard::SubscriptionsController, which deliberately skips check_subscription_access, so
   this can render there too. Same visual language as .form-errors (danger tokens, left accent
   border) rather than the Tailwind utility classes it shipped with — Tailwind isn't installed
   in this app. */
.dashboard-body .subscription-status-banner {
  border: 1px solid var(--dash-color-danger);
  border-left: 4px solid var(--dash-color-danger);
  background: var(--dash-color-danger-bg);
  color: var(--dash-color-danger);
  padding: 12px 14px;
  margin-bottom: 18px;
  font-size: 13px;
  font-weight: 600;
}
.dashboard-body .subscription-status-banner p { margin: 0; }

.dashboard-body .seg { display: inline-flex; overflow: hidden; border: 1px solid var(--dash-color-divider); }
.dashboard-body .seg-opt { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; font-size: 13px; cursor: pointer; font-weight: 600; }
.dashboard-body .seg-opt + .seg-opt { border-left: 1px solid var(--dash-color-divider); }
.dashboard-body .seg-opt:has(input:checked) { background: var(--dash-color-accent); color: var(--dash-color-bg); }
.dashboard-body .seg-opt:not(:has(input:checked)):hover { background: color-mix(in srgb, var(--dash-color-text) 7%, transparent); }

/* — tags / status chips — */
.dashboard-body .tag { display: inline-flex; align-items: center; font-size: 11px; letter-spacing: 0.02em; padding: 3px 9px; border-radius: 3px; border: none; font-family: var(--dash-font-body); font-weight: 600; }
.dashboard-body .tag-accent  { background: var(--dash-color-accent-100); color: var(--dash-color-accent-800); }
.dashboard-body .tag-neutral { background: var(--dash-color-neutral-100); color: var(--dash-color-neutral-800); }
.dashboard-body .tag-outline { background: transparent; border: 1px solid var(--dash-color-accent); color: var(--dash-color-accent-700); }
.dashboard-body .tag-success { background: var(--dash-color-success-bg); color: var(--dash-color-success); }
.dashboard-body .tag-danger  { background: var(--dash-color-danger-bg); color: var(--dash-color-danger); }

/* — cards — */
.dashboard-body .pcard { border: 1px solid var(--dash-color-divider); background: var(--dash-color-bg); padding: 16px; }
.dashboard-body .form-card { border: 1px solid var(--dash-color-divider); background: var(--dash-color-bg); padding: 28px; max-width: 34rem; }
.dashboard-body .form-actions { display: flex; gap: 10px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--dash-color-divider); }
.dashboard-body .empty-state { border: 1px dashed var(--dash-color-divider); padding: 32px 20px; text-align: center; color: color-mix(in srgb, var(--dash-color-text) 65%, transparent); font-size: 13px; }

/* — QR code page — */
.dashboard-body .qr-card {
  border: 1px solid var(--dash-color-divider); background: var(--dash-color-bg); padding: 32px; max-width: 26rem;
  display: flex; flex-direction: column; align-items: center; gap: 20px; position: relative;
}
.dashboard-body .qr-image { background: var(--dash-color-bg); padding: 16px; border: 1px solid var(--dash-color-divider); max-width: 20rem; width: 100%; }
.dashboard-body .qr-image svg { display: block; width: 100%; height: auto; }
.dashboard-body .qr-meta { text-align: center; }
.dashboard-body .qr-label { font-size: 15px; font-weight: 700; margin-bottom: 8px; }
.dashboard-body .qr-url code { font-size: 12px; word-break: break-all; color: color-mix(in srgb, var(--dash-color-text) 65%, transparent); background: var(--dash-color-surface); padding: 3px 7px; }
.dashboard-body .qr-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.dashboard-body .qr-warning { text-align: center; max-width: 22rem; }

@media print {
  .dashboard-body .app-shell > .sidebar, .dashboard-body .dash-topbar, .dashboard-body .qr-actions, .dashboard-body .qr-warning, .dashboard-body .flash { display: none !important; }
  .dashboard-body .qr-card { border: 0; padding: 0; }
  .dashboard-body .qr-image { max-width: 70vw; padding: 0; border: 0; }
}

/* — page shell (replaces .dashboard-container/.dashboard-header) — */
.dashboard-body .dash-content { padding: 28px 32px 60px; max-width: 78rem; }
.dashboard-body .dash-content.narrow { max-width: 34rem; }
.dashboard-body .dash-topbar {
  border-bottom: 1px solid var(--dash-color-divider);
  padding: 20px 32px;
  display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 8px;
}
.dashboard-body .dash-topbar h1 { font-size: 22px; text-transform: uppercase; }
.dashboard-body .dash-topbar .sub { font-size: 13px; font-family: var(--dash-font-body); text-transform: none; letter-spacing: normal; font-weight: 400; color: color-mix(in srgb, var(--dash-color-text) 65%, transparent); margin-top: 4px; }
.dashboard-body .dash-topbar .back-link { display: block; font-size: 12.5px; color: var(--dash-color-accent-700); text-decoration: none; margin-bottom: 6px; }
.dashboard-body .dash-topbar .back-link:hover { text-decoration: underline; }

.dashboard-body .section { margin-bottom: 40px; }
.dashboard-body .section-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 16px; gap: 12px; flex-wrap: wrap; }
.dashboard-body .section-head h2 { font-size: 17px; text-transform: uppercase; }
.dashboard-body .grid-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 16px; }
.dashboard-body .pcard-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.dashboard-body .pcard-head h3 { font-size: 15.5px; }
.dashboard-body .pcard-head .count { font-size: 11px; font-weight: 600; color: color-mix(in srgb, var(--dash-color-text) 60%, transparent); border: 1px solid var(--dash-color-divider); padding: 1px 7px; font-family: var(--dash-font-body); text-transform: none; letter-spacing: normal; }
.dashboard-body .pcard-list { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.dashboard-body .pcard-list li { display: flex; align-items: center; justify-content: space-between; font-size: 13px; padding: 7px 0; border-bottom: 1px solid var(--dash-color-divider); }
.dashboard-body .pcard-list li:last-child { border-bottom: none; }
.dashboard-body .pcard-list .row-actions { display: flex; gap: 4px; }
.dashboard-body .pcard-actions { display: flex; gap: 8px; }
.dashboard-body .pcard-actions .btn { flex: 1 1 0; }
.dashboard-body .pcard-meta { font-size: 13px; color: color-mix(in srgb, var(--dash-color-text) 65%, transparent); margin: 0 0 14px; }
.dashboard-body .pcard-list-row { display: flex; justify-content: space-between; font-size: 13px; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid var(--dash-color-divider); }
.dashboard-body .pcard-list-row.large { border-bottom: none; margin-bottom: 0; padding-bottom: 0; font-family: var(--dash-font-heading); font-weight: var(--dash-font-heading-weight); font-size: 18px; }

/* — sidebar nav — */
.dashboard-body .app-shell { display: flex; align-items: stretch; min-height: 100vh; }
.dashboard-body .sidebar {
  width: 240px; flex: 0 0 auto;
  background: var(--dash-color-surface);
  border-right: 1px solid var(--dash-color-divider);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
}
.dashboard-body .sidebar-brand { padding: 22px 20px 18px; border-bottom: 1px solid var(--dash-color-divider); }
.dashboard-body .sidebar-brand a { color: inherit; text-decoration: none; }
.dashboard-body .sidebar-brand .word { font-family: var(--dash-font-heading); font-weight: var(--dash-font-heading-weight); font-size: 19px; text-transform: uppercase; letter-spacing: 0.04em; }
.dashboard-body .sidebar-brand-logo { display: block; max-height: 68px; max-width: 100%; height: auto; width: auto; }
.dashboard-body .sidebar-brand .shop { margin-top: 4px; font-size: 12.5px; color: color-mix(in srgb, var(--dash-color-text) 70%, transparent); }
.dashboard-body .sidebar-nav { flex: 1 1 auto; padding: 14px 0; overflow-y: auto; }
.dashboard-body .sidebar-link {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 20px; margin: 0 10px;
  font-family: var(--dash-font-heading); font-weight: var(--dash-font-heading-weight); font-size: 14.5px; letter-spacing: 0.01em;
  color: var(--dash-color-text); text-decoration: none; cursor: pointer;
  border-left: 2px solid transparent;
}
.dashboard-body .sidebar-link:hover { background: color-mix(in srgb, var(--dash-color-text) 6%, transparent); }
.dashboard-body .sidebar-link.active { background: var(--dash-color-accent-100); border-left-color: var(--dash-color-accent-700); color: var(--dash-color-accent-800); }
.dashboard-body .sidebar-footer { border-top: 1px solid var(--dash-color-divider); padding: 14px 20px; display: flex; align-items: center; gap: 10px; }
.dashboard-body .sidebar-avatar { width: 30px; height: 30px; flex: 0 0 auto; border: 1px solid var(--dash-color-accent-700); display: flex; align-items: center; justify-content: center; font-family: var(--dash-font-heading); font-weight: var(--dash-font-heading-weight); font-size: 13px; color: var(--dash-color-accent-700); }
.dashboard-body .sidebar-footer .who { min-width: 0; }
.dashboard-body .sidebar-footer .name { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dashboard-body .sidebar-footer .role { font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.04em; color: color-mix(in srgb, var(--dash-color-text) 60%, transparent); }
.dashboard-body .sidebar-footer form { margin-left: auto; }
.dashboard-body .sidebar-footer .logout-btn { background: none; border: none; padding: 4px; cursor: pointer; color: color-mix(in srgb, var(--dash-color-text) 55%, transparent); font-size: 12px; font-family: var(--dash-font-body); }
.dashboard-body .sidebar-footer .logout-btn:hover { color: var(--dash-color-danger); }

/* — sidebar subscription callout (OWN-18) — */
.dashboard-body .sidebar-callout {
  flex: 0 0 auto; margin: 0 14px 14px; padding: 12px;
  border: 1px solid var(--dash-color-accent-500);
  background: var(--dash-color-accent-100); color: var(--dash-color-accent-800);
}
.dashboard-body .sidebar-callout-kicker {
  display: block; font-family: var(--dash-font-heading); font-size: 11px;
  letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 6px;
}
.dashboard-body .sidebar-callout-body { font-size: 12px; line-height: 1.45; margin: 0 0 10px; }
.dashboard-body .sidebar-callout-body strong { font-variant-numeric: tabular-nums; }
.dashboard-body .sidebar-callout-cta {
  display: block; text-align: center; text-decoration: none;
  background: var(--dash-color-accent-800); color: var(--dash-color-bg);
  font-family: var(--dash-font-heading); font-size: 12.5px; padding: 8px 10px;
}
.dashboard-body .sidebar-callout-cta:hover { background: var(--dash-color-accent-900); }
.dashboard-body .main { flex: 1 1 auto; min-width: 0; }

/* — data table — */
.dashboard-body .filter-row { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.dashboard-body .filter-row .field { margin-bottom: 0; }
.dashboard-body .table-wrap { border: 1px solid var(--dash-color-divider); overflow-x: auto; }
.dashboard-body .data-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.dashboard-body .data-table th {
  text-align: left; font-family: var(--dash-font-heading); font-weight: var(--dash-font-heading-weight); font-size: 11.5px;
  text-transform: uppercase; letter-spacing: 0.04em; color: color-mix(in srgb, var(--dash-color-text) 65%, transparent);
  padding: 11px 16px; border-bottom: 1px solid var(--dash-color-divider); background: var(--dash-color-surface);
  white-space: nowrap;
}
.dashboard-body .data-table td { padding: 12px 16px; border-bottom: 1px solid var(--dash-color-divider); vertical-align: middle; }
.dashboard-body .data-table tbody tr:last-child td { border-bottom: none; }
.dashboard-body .data-table tbody tr:hover { background: color-mix(in srgb, var(--dash-color-accent) 4%, transparent); }
.dashboard-body .data-table .num { font-variant-numeric: tabular-nums; text-align: right; }
.dashboard-body .data-table .id { color: color-mix(in srgb, var(--dash-color-text) 55%, transparent); font-variant-numeric: tabular-nums; }

/* Reports (REPORT-01) */
.dashboard-body .report-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 28px; }
.dashboard-body .report-kpi { position: relative; border: 1px solid var(--dash-color-divider); padding: 16px 18px; background: var(--dash-color-bg); }
.dashboard-body .report-kpi-label { font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; color: var(--dash-color-accent-700); margin-bottom: 8px; }
.dashboard-body .report-kpi-value { font-family: var(--dash-font-heading); font-size: 28px; line-height: 1; font-variant-numeric: tabular-nums; color: var(--dash-color-text); }
.dashboard-body .report-kpi-delta { margin-top: 8px; font-size: 12px; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.dashboard-body .report-delta { font-weight: 600; font-variant-numeric: tabular-nums; }
.dashboard-body .report-delta-up { color: var(--dash-color-success); }
.dashboard-body .report-delta-down { color: var(--dash-color-danger); }
.dashboard-body .report-delta-none { color: color-mix(in srgb, var(--dash-color-text) 45%, transparent); }
.dashboard-body .report-kpi-delta-note { color: color-mix(in srgb, var(--dash-color-text) 55%, transparent); }

.dashboard-body .report-bars { border: 1px solid var(--dash-color-divider); padding: 14px 18px; margin-bottom: 28px; }
.dashboard-body .report-bar { display: flex; align-items: center; gap: 12px; padding: 4px 0; }
.dashboard-body .report-bar-label { flex: 0 0 72px; font-size: 12px; color: color-mix(in srgb, var(--dash-color-text) 65%, transparent); }
.dashboard-body .report-bar-track { flex: 1 1 auto; height: 12px; background: var(--dash-color-neutral-100); border: 1px solid var(--dash-color-divider); }
.dashboard-body .report-bar-fill { display: block; height: 100%; background: var(--dash-color-accent-500); }
.dashboard-body .report-bar-value { flex: 0 0 88px; text-align: right; font-size: 12.5px; font-variant-numeric: tabular-nums; }

.dashboard-body .report-subrow td { color: color-mix(in srgb, var(--dash-color-text) 65%, transparent); }
.dashboard-body .report-subrow-label { padding-left: 18px; font-size: 12px; }

@media (max-width: 860px) {
  .dashboard-body .report-kpis { grid-template-columns: repeat(2, 1fr); }
}
.dashboard-body .table-actions { display: flex; gap: 6px; }
.dashboard-body .table-foot { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-top: 1px solid var(--dash-color-divider); background: var(--dash-color-surface); font-size: 12.5px; color: color-mix(in srgb, var(--dash-color-text) 65%, transparent); flex-wrap: wrap; gap: 10px; }
/* Targets Kaminari's actual default markup verbatim (checked against the gem's own partials,
   not assumed): <nav class="pagination"><span class="page[ current]">, <span class="next/prev">,
   <span class="page gap">. No custom Kaminari theme/views exist in this app. */
.dashboard-body .pagination { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; }
.dashboard-body .pagination .page,
.dashboard-body .pagination .next,
.dashboard-body .pagination .prev {
  display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 26px;
  padding: 0 8px; border: 1px solid var(--dash-color-divider); font-size: 12px; color: var(--dash-color-text);
}
.dashboard-body .pagination a { text-decoration: none; color: inherit; }
.dashboard-body .pagination .page.current { background: var(--dash-color-accent-800); border-color: var(--dash-color-accent-800); color: var(--dash-color-bg); }
.dashboard-body .pagination .page.gap { opacity: 0.5; border-color: transparent; }
.dashboard-body .pagination .page:has(a):hover, .dashboard-body .pagination .next:has(a):hover, .dashboard-body .pagination .prev:has(a):hover { border-color: var(--dash-color-accent); }
.dashboard-body .pagination .next:not(:has(a)), .dashboard-body .pagination .prev:not(:has(a)) { opacity: 0.4; }

/* — modals (menu category/item add/edit) — */
.dashboard-body .dash-modal {
  position: fixed; inset: 0; display: none; align-items: flex-start; justify-content: center;
  background: color-mix(in srgb, var(--dash-color-accent-900) 45%, transparent);
  padding: 60px 20px; overflow-y: auto; z-index: 300;
}
.dashboard-body .dash-modal.open { display: flex; }
.dashboard-body .dash-modal-content { background: var(--dash-color-bg); border: 1px solid var(--dash-color-divider); width: 100%; max-width: 30rem; }
.dashboard-body .dash-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid var(--dash-color-divider); }
.dashboard-body .dash-modal-header h2 { font-size: 15px; text-transform: uppercase; }
.dashboard-body .dash-modal-close { background: none; border: none; cursor: pointer; font-size: 18px; line-height: 1; color: var(--dash-color-text); padding: 2px; }
.dashboard-body .dash-modal-body { padding: 20px; }
.dashboard-body .dash-modal-footer { display: flex; align-items: center; gap: 10px; padding: 16px 20px; border-top: 1px solid var(--dash-color-divider); }
.dashboard-body .dash-modal-danger { margin-top: 4px; padding: 18px 20px 20px; border-top: 1px solid var(--dash-color-divider); }
.dashboard-body .dash-modal-danger .label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--dash-color-danger); font-weight: 600; margin-bottom: 8px; font-family: var(--dash-font-heading); }

/* — tabs (menu editor categories) — */
.dashboard-body .dash-tabs { display: flex; gap: 4px; overflow-x: auto; border-bottom: 1px solid var(--dash-color-divider); }
.dashboard-body .dash-tab {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px; font-family: var(--dash-font-heading); font-weight: var(--dash-font-heading-weight);
  font-size: 13.5px; letter-spacing: 0.01em;
  color: color-mix(in srgb, var(--dash-color-text) 65%, transparent);
  background: none; border: none; border-bottom: 2px solid transparent; cursor: pointer; white-space: nowrap;
}
.dashboard-body .dash-tab:hover { color: var(--dash-color-text); }
.dashboard-body .dash-tab.active { color: var(--dash-color-accent-800); border-bottom-color: var(--dash-color-accent-700); }
.dashboard-body .dash-tab .edit-cat { margin-left: 2px; opacity: 0.6; text-decoration: none; color: inherit; }
.dashboard-body .dash-tab .edit-cat:hover { opacity: 1; }
.dashboard-body .dash-tab-wrap { display: inline-flex; align-items: center; gap: 2px; }
.dashboard-body .dash-tab-wrap .edit-cat { padding: 4px 6px 4px 0; opacity: 0.5; text-decoration: none; color: inherit; font-size: 12px; }
.dashboard-body .dash-tab-wrap .edit-cat:hover { opacity: 1; }
.dashboard-body .dash-tab-content { padding: 20px 0; }
.dashboard-body .dash-tab-content-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.dashboard-body .dash-item-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.dashboard-body .dash-item-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  border: 1px solid var(--dash-color-divider); padding: 10px 14px; cursor: pointer; background: var(--dash-color-bg);
}
.dashboard-body .dash-item-row:hover { background: var(--dash-color-surface); }
.dashboard-body .dash-item-row:nth-child(even) { background: var(--dash-color-surface); }
.dashboard-body .dash-item-row .name { font-weight: 600; font-size: 13.5px; }
.dashboard-body .dash-item-row .price { font-variant-numeric: tabular-nums; color: var(--dash-color-accent-700); font-weight: 600; font-size: 13px; }
.dashboard-body .dash-item-row .item-link {
  display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 10px;
  text-decoration: none; color: inherit;
}

/* — menu editor: variant manager — */
.dashboard-body .field-check { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; font-size: 13px; }
.dashboard-body .field-check input[type="checkbox"] { width: 16px; height: 16px; }
.dashboard-body .variant-add-form { border: 1px solid var(--dash-color-divider); background: var(--dash-color-surface); padding: 14px; margin-bottom: 16px; }
.dashboard-body .variant-form-grid { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; align-items: end; }
.dashboard-body .variant-form-grid.invoice-line-grid { grid-template-columns: 1fr 1fr 1fr auto; }
.dashboard-body .variant-form-grid .field { margin-bottom: 0; max-width: none; }
.dashboard-body .variant-form-grid .field > label { font-size: 11px; }

/* — settings — */
.dashboard-body .settings-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; border: 1px solid var(--dash-color-divider); padding: 20px; max-width: 40rem; }
.dashboard-body .settings-row h3 { font-size: 15px; margin-bottom: 6px; text-transform: uppercase; }
.dashboard-body .settings-row p { margin: 0; font-size: 13px; font-family: var(--dash-font-body); text-transform: none; letter-spacing: normal; font-weight: 400; color: color-mix(in srgb, var(--dash-color-text) 65%, transparent); max-width: 34ch; }
.dashboard-body .settings-note { display: flex; gap: 10px; border: 1px solid var(--dash-color-accent-100); background: var(--dash-color-accent-100); padding: 14px 16px; max-width: 40rem; margin-top: 18px; font-size: 12.5px; color: var(--dash-color-accent-800); }

/* — subscription plan cards (OWN-18) — */
.dashboard-body .plan-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px;
}
.dashboard-body .plan-card {
  position: relative; border: 1px solid var(--dash-color-divider);
  background: var(--dash-color-bg); padding: 24px 22px; display: flex; flex-direction: column;
}
.dashboard-body .plan-card-featured { border-color: var(--dash-color-accent-500); }
.dashboard-body .plan-card-badge {
  position: absolute; top: -1px; right: -1px;
  background: var(--dash-color-accent-800); color: var(--dash-color-bg);
  font-family: var(--dash-font-heading); font-size: 11px; letter-spacing: 0.04em;
  padding: 4px 10px;
}
.dashboard-body .plan-card-name {
  font-family: var(--dash-font-heading); font-weight: var(--dash-font-heading-weight);
  font-size: 17px; margin: 0 0 6px;
}
.dashboard-body .plan-card-price { margin: 0 0 10px; }
.dashboard-body .plan-card-price .amount {
  font-family: var(--dash-font-heading); font-size: 30px; color: var(--dash-color-accent-800);
  font-variant-numeric: tabular-nums;
}
.dashboard-body .plan-card-price .period {
  font-size: 12.5px; color: color-mix(in srgb, var(--dash-color-text) 60%, transparent);
}
.dashboard-body .plan-card-desc {
  font-size: 13px; color: color-mix(in srgb, var(--dash-color-text) 75%, transparent); margin: 0 0 14px;
}
.dashboard-body .plan-card-features { list-style: none; padding: 0; margin: 0 0 20px; flex: 1 1 auto; }
.dashboard-body .plan-card-features li {
  font-size: 13px; line-height: 1.5; padding-left: 16px; position: relative; margin-bottom: 6px;
}
.dashboard-body .plan-card-features li::before {
  content: "+"; position: absolute; left: 0; color: var(--dash-color-accent-500);
}

@media (max-width: 860px) {
  .dashboard-body .app-shell { flex-direction: column; }
  .dashboard-body .sidebar { width: 100%; height: auto; position: static; flex-direction: row; align-items: center; overflow-x: auto; }
  .dashboard-body .sidebar-brand { border-bottom: none; border-right: 1px solid var(--dash-color-divider); flex: 0 0 auto; }
  .dashboard-body .sidebar-nav { display: flex; padding: 0; overflow-y: visible; }
  .dashboard-body .sidebar-link { border-left: none; border-bottom: 2px solid transparent; white-space: nowrap; }
  .dashboard-body .sidebar-link.active { border-left-color: transparent; border-bottom-color: var(--dash-color-accent-700); }
  .dashboard-body .sidebar-footer { border-top: none; border-left: 1px solid var(--dash-color-divider); flex: 0 0 auto; margin-left: auto; }
  .dashboard-body .sidebar-footer .who { display: none; }

  .dashboard-body .sidebar-callout {
    margin: 0 10px; padding: 0; border: none; background: none; flex: 0 0 auto;
  }
  .dashboard-body .sidebar-callout-kicker,
  .dashboard-body .sidebar-callout-body { display: none; }
  .dashboard-body .sidebar-callout-cta { min-height: 44px; display: flex; align-items: center; white-space: nowrap; }

  /* Touch targets. At desktop density .btn is 26–34px tall and .btn-sm only 26px — about half
     the ~44px a fingertip needs, and the dashboard's row actions (QR / Open / Remove / Edit /
     Delete) are all .btn-sm. Bump them on the same breakpoint where the layout already goes
     single-column, and let the action rows wrap instead of squeezing the wider buttons. */
  .dashboard-body .btn { min-height: 44px; padding: 10px 16px; font-size: 14px; }
  .dashboard-body .btn-sm { min-height: 40px; min-width: 44px; padding: 8px 12px; font-size: 13px; }
  .dashboard-body .sidebar-footer .logout-btn { min-height: 44px; padding: 4px 10px; font-size: 13px; }
  .dashboard-body .pcard-list li { flex-wrap: wrap; gap: 8px; }
  .dashboard-body .pcard-head { flex-wrap: wrap; gap: 8px; }
  .dashboard-body .row-actions,
  .dashboard-body .pcard-list .row-actions,
  .dashboard-body .table-actions { flex-wrap: wrap; align-items: center; gap: 8px; }

  /* The 68px logo is ~255px wide — on a 390px screen it left the collapsed nav strip with
     almost no room, pushing every link behind a horizontal scroll. Same shrink-to-fit reasoning
     as the desktop sidebar rule, one step further for the horizontal bar. */
  .dashboard-body .sidebar-brand { padding: 10px 14px; }
  .dashboard-body .sidebar-brand-logo { max-height: 36px; }
}

/* Receipt — Ascent Design */
.customer-receipt {
  max-width: 32rem;
  margin: var(--space-10) auto;
  padding: 0 var(--space-4);
}
.customer-receipt-inner {
  background: white;
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12);
  border: 1px solid #e8e8eb;
  text-align: center;
}
.customer-receipt h1.display-heading {
  font-size: var(--text-2xl);
  font-weight: 700;
  background: linear-gradient(135deg, var(--color-primary), #5a59c8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: var(--space-2) 0;
  letter-spacing: -0.01em;
}
.customer-receipt-meta {
  color: #7a7a8e;
  margin-bottom: var(--space-6);
  font-weight: 500;
}
.customer-receipt-meta code {
  background: linear-gradient(135deg, rgba(70, 69, 199, 0.08), rgba(70, 69, 199, 0.04));
  padding: 4px var(--space-2);
  border-radius: var(--radius-md);
  border: 1px solid rgba(70, 69, 199, 0.12);
  font-size: var(--text-sm);
  color: var(--color-primary);
  font-weight: 600;
}
.customer-receipt-items {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-4);
  text-align: left;
}
.customer-receipt-items li {
  display: grid;
  grid-template-columns: 3rem 1fr auto;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 1px dashed var(--color-border);
}
.customer-receipt-items .qty { color: var(--color-text-muted); }
.customer-receipt-items .price { font-variant-numeric: tabular-nums; }
.customer-receipt-total {
  display: flex;
  justify-content: space-between;
  padding: var(--space-4) 0;
  border-top: 2px solid var(--color-text);
  font-size: var(--text-md);
  margin-bottom: var(--space-4);
}
.customer-receipt-note { color: var(--color-text-muted); font-size: var(--text-sm); }

/* Receipt — compact header shown above receipt & flagged cards — Ascent */
.customer-mini-hero {
  background: linear-gradient(135deg, var(--color-primary), #5a59c8);
  color: white;
  padding: var(--space-6) var(--space-5) var(--space-5);
  text-align: center;
  box-shadow: 0 8px 24px rgba(70, 69, 199, 0.15);
}
.customer-mini-hero--flagged {
  background: linear-gradient(135deg, #ff6b6b, #ee5a52);
  box-shadow: 0 8px 24px rgba(255, 107, 107, 0.15);
}
.customer-mini-hero-inner { max-width: 32rem; margin: 0 auto; }
.customer-mini-shop {
  font-size: var(--text-md);
  font-weight: 600;
  color: rgba(255,255,255,0.95);
  margin-top: var(--space-2);
  letter-spacing: -0.01em;
}

/* Inline status pill used on receipt page — Ascent */
.order-status-pill {
  display: inline-block;
  padding: 6px var(--space-2);
  border-radius: var(--radius-md);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.order-status-pill--pending_verification { background: rgba(70, 69, 199, 0.1); color: var(--color-primary); }
.order-status-pill--verified             { background: rgba(70, 69, 199, 0.1); color: var(--color-primary); }
.order-status-pill--flagged              { background: rgba(255, 107, 107, 0.1); color: #ff6b6b; }
.order-status-pill--confirmed            { background: rgba(70, 69, 199, 0.1); color: var(--color-primary); }
.order-status-pill--preparing            { background: rgba(201, 121, 65, 0.1); color: #c97941; }
.order-status-pill--ready                { background: rgba(61, 140, 94, 0.1); color: #3d8c5e; }
.order-status-pill--delivered            { background: rgba(74, 77, 86, 0.1); color: #4a4d56; }
.order-status-pill--cancelled            { background: rgba(255, 107, 107, 0.1); color: #ff6b6b; }

/* Flagged order screen — Ascent */
.flagged-icon {
  font-size: var(--text-3xl);
  margin-bottom: var(--space-3);
  color: #ff6b6b;
  filter: drop-shadow(0 4px 12px rgba(255, 107, 107, 0.15));
}

.flagged-section {
  margin-bottom: var(--space-6);
  text-align: left;
  background: white;
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  border: 1px solid #f0f0f3;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}

.flagged-section-title {
  font-size: var(--text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #7a7a8e;
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 2px solid #e8e8eb;
}
.flagged-section--unavailable .flagged-section-title {
  color: #ff6b6b;
  border-bottom-color: rgba(255, 107, 107, 0.2);
}

.receipt-item--unavailable {
  opacity: 0.55;
  text-decoration: line-through;
}

.unavailable-badge {
  display: inline-block;
  background: rgba(255, 107, 107, 0.15);
  color: #ff6b6b;
  font-size: var(--text-xs);
  font-weight: 700;
  padding: 4px var(--space-2);
  border-radius: var(--radius-md);
  white-space: nowrap;
  text-decoration: none;
  border: 1px solid rgba(255, 107, 107, 0.2);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.flagged-actions { margin: var(--space-6) 0 var(--space-5); }

.customer-cta--full {
  width: 100%;
  display: block;
  text-align: center;
  border-radius: var(--radius-lg);
}

/* ============================================================
   Bartender Board — Industry design system
   ============================================================ */

.bartender-body {
  --bar-color-bg: #f2f2f3;
  --bar-color-surface: #ffffff;
  --bar-color-text: #1d1f20;
  --bar-color-divider: color-mix(in srgb, #1d1f20 16%, transparent);
  --bar-color-accent-100: #eef6ff;
  --bar-color-accent-500: #749dc4;
  --bar-color-accent-600: #597ea3;
  --bar-color-accent-700: #416180;
  --bar-color-accent-800: #2c455d;
  --bar-font-heading: "Barlow Condensed", system-ui, sans-serif;
  --bar-font-body: "Barlow", system-ui, sans-serif;

  background: var(--bar-color-bg);
  color: var(--bar-color-text);
  font-family: var(--bar-font-body);
  min-height: 100vh;
}

.bartender-body .bartender-topbar {
  background: var(--bar-color-surface);
  border-bottom: 1px solid var(--bar-color-divider);
  color: var(--bar-color-text);
  padding: var(--space-3) var(--space-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
}

.bartender-body .bartender-brand {
  font-family: var(--bar-font-heading);
  font-weight: 600;
  font-size: var(--text-md);
  color: var(--bar-color-accent-700);
}
.bartender-body .bartender-shop {
  color: var(--bar-color-text);
  opacity: 0.6;
  text-transform: none;
  font-family: var(--bar-font-body);
  font-weight: 400;
}

.bartender-body .bartender-topbar-actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.bartender-body .bartender-user-name { font-size: var(--text-sm); color: var(--bar-color-text); opacity: 0.65; }

.bartender-body .btn-logout-bartender {
  font-family: var(--bar-font-heading);
  font-weight: 600;
  font-size: var(--text-sm);
  background: transparent;
  color: var(--bar-color-accent-700);
  border: 1px solid var(--bar-color-accent-500);
  padding: var(--space-2) var(--space-4);
  border-radius: 0;
  cursor: pointer;
  transition: background 150ms ease;
}
.bartender-body .btn-logout-bartender:hover { background: color-mix(in srgb, var(--bar-color-accent-500) 10%, transparent); }

.bartender-body .bartender-main { padding: var(--space-6) var(--space-8); }

/* Corner-bracket registration marks — same technique as .dashboard-body .corner */
.bartender-body .bar-card,
.bartender-body .bar-modal-content { position: relative; }
.bartender-body .corner { position: absolute; width: 12px; height: 12px; color: color-mix(in srgb, var(--bar-color-text) 55%, transparent); pointer-events: none; }
.bartender-body .corner::before { content: ""; position: absolute; left: 5px; top: 0; width: 1px; height: 100%; background: currentColor; }
.bartender-body .corner::after { content: ""; position: absolute; top: 5px; left: 0; width: 100%; height: 1px; background: currentColor; }
.bartender-body .corner.tl { top: -6px; left: -6px; }
.bartender-body .corner.tr { top: -6px; right: -6px; }
.bartender-body .corner.bl { bottom: -6px; left: -6px; }
.bartender-body .corner.br { bottom: -6px; right: -6px; }

.bartender-body .bar-section { margin-bottom: var(--space-6); }

.bartender-body .bar-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 0 0 var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--bar-color-divider);
}
.bartender-body .bar-section-head h2 {
  font-family: var(--bar-font-heading);
  font-weight: 600;
  font-size: var(--text-md);
  color: var(--bar-color-accent-700);
  margin: 0;
}
.bartender-body .bar-section-head .muted { opacity: 0.6; font-size: var(--text-sm); }

.bartender-body .board-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 10rem;
  text-align: center;
  color: var(--bar-color-text);
  opacity: 0.55;
}
.bartender-body .board-empty-inner h2 { font-size: var(--text-lg); font-weight: 600; margin-bottom: var(--space-2); }

.bartender-body .board-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: var(--space-4);
}

.bartender-body .order-card-link { display: block; cursor: pointer; text-decoration: none; color: inherit; }
.bartender-body .order-card-link:focus-visible { outline: 2px solid var(--bar-color-accent-500); outline-offset: 2px; }

.bartender-body .bar-card {
  background: var(--bar-color-surface);
  border: 1px solid var(--bar-color-divider);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.bartender-body .bar-card[data-status="delivered"],
.bartender-body .bar-card[data-status="cancelled"] { opacity: 0.6; }

.bartender-body .order-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2);
}
.bartender-body .order-table-name { font-size: var(--text-md); font-weight: 700; }
.bartender-body .order-time { font-size: var(--text-sm); opacity: 0.55; margin-top: 2px; }

.bartender-body .order-status-badge {
  display: inline-block;
  padding: 3px 8px;
  font-family: var(--bar-font-heading);
  font-weight: 600;
  font-size: 11px;
  white-space: nowrap;
}
.bartender-body .order-status-badge[data-status="pending_verification"] { background: var(--color-warm-light); color: var(--color-warm-hover); }
.bartender-body .order-status-badge[data-status="verified"] { background: var(--color-primary-light); color: var(--color-primary); }
.bartender-body .order-status-badge[data-status="flagged"] { background: var(--color-danger-light); color: var(--color-danger); }
.bartender-body .order-status-badge[data-status="confirmed"] { background: var(--color-primary-light); color: var(--color-status-confirmed); }
.bartender-body .order-status-badge[data-status="preparing"] { background: var(--color-warm-light); color: var(--color-status-preparing); }
.bartender-body .order-status-badge[data-status="ready"] { background: #e5f2ec; color: var(--color-status-ready); }
.bartender-body .order-status-badge[data-status="delivered"] { background: #eceded; color: var(--color-status-delivered); }
.bartender-body .order-status-badge[data-status="cancelled"] { background: var(--color-danger-light); color: var(--color-status-cancelled); }

.bartender-body .order-items { list-style: none; margin: 0; padding: 0; font-size: var(--text-sm); }
.bartender-body .order-items li { display: flex; gap: 6px; padding: 2px 0; }
.bartender-body .order-items li.unavailable { opacity: 0.5; text-decoration: line-through; }
.bartender-body .order-items .qty { font-weight: 600; opacity: 0.7; min-width: 22px; }
.bartender-body .order-item-variant { opacity: 0.6; font-size: 11px; margin-left: 2px; }

.bartender-body .order-notes {
  font-size: var(--text-sm);
  opacity: 0.75;
  padding: var(--space-2);
  background: var(--bar-color-bg);
  border-left: 2px solid var(--bar-color-accent-500);
}

.bartender-body .order-payment-tag {
  font-family: var(--bar-font-heading);
  font-size: 11px;
  font-weight: 600;
  opacity: 0.6;
}

.bartender-body .order-card-footer { display: flex; flex-direction: column; gap: var(--space-2); margin-top: auto; }

.bartender-body .bar-btn {
  display: block;
  width: 100%;
  text-align: center;
  font-family: var(--bar-font-heading);
  font-weight: 600;
  font-size: 13px;
  padding: var(--space-2) var(--space-3);
  border-radius: 0;
  border: 1px solid var(--bar-color-accent-500);
  background: var(--bar-color-accent-500);
  color: var(--bar-color-bg);
  cursor: pointer;
  min-height: 40px;
  transition: background 150ms ease;
}
.bartender-body .bar-btn:hover { background: var(--bar-color-accent-600); border-color: var(--bar-color-accent-600); }
.bartender-body .bar-btn-ghost { background: transparent; color: var(--bar-color-accent-700); }
.bartender-body .bar-btn-ghost:hover { background: color-mix(in srgb, var(--bar-color-accent-500) 10%, transparent); }

.bartender-body .flag-details { width: 100%; }
.bartender-body .flag-details summary { list-style: none; cursor: pointer; }
.bartender-body .flag-details summary::-webkit-details-marker { display: none; }
.bartender-body .flag-details[open] > summary.bar-btn-ghost { background: var(--bar-color-accent-100); border-color: var(--bar-color-accent-500); }

.bartender-body .flag-items-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: var(--space-2) 0;
  padding: var(--space-2);
  border: 1px solid var(--bar-color-divider);
  max-height: 160px;
  overflow-y: auto;
}
.bartender-body .flag-item-label { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); cursor: pointer; }
.bartender-body .flag-item-label input[type="checkbox"] { accent-color: var(--bar-color-accent-500); cursor: pointer; margin: 0; }

.bartender-body .verify-form, .bartender-body .flag-form { width: 100%; margin: 0; }
.bartender-body .verify-form input[type="submit"] { width: 100%; }

/* Detail / verification modal */
.bartender-body .modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(29, 31, 32, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: var(--space-4);
}

.bartender-body .bar-modal-content {
  background: var(--bar-color-bg);
  border: 1px solid var(--bar-color-divider);
  max-width: 30rem;
  width: 100%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}

.bartender-body .bar-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: var(--space-5) 40px var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--bar-color-divider);
  gap: var(--space-3);
}
.bartender-body .bar-modal-header h2 { margin: 0; font-family: var(--bar-font-heading); font-weight: 600; font-size: 17px; }
.bartender-body .bar-modal-header .modal-time { margin: 3px 0 0; font-size: 11px; opacity: 0.55; }

.bartender-body .bar-modal-location {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--bar-color-divider);
}
.bartender-body .bar-modal-location .location-item { display: flex; flex-direction: column; }
.bartender-body .bar-modal-location .location-item label {
  display: block;
  font-family: var(--bar-font-heading);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 10.5px;
  font-weight: 600;
  opacity: 0.55;
  margin-bottom: 3px;
}
.bartender-body .bar-modal-location .location-item span { font-size: 14px; font-weight: 600; }

.bartender-body .bar-modal-items { padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--bar-color-divider); flex: 1; overflow-y: auto; }
.bartender-body .bar-modal-items h3 { margin: 0 0 var(--space-2); font-family: var(--bar-font-heading); font-weight: 600; font-size: 13px; color: var(--bar-color-accent-700); }
.bartender-body .items-list { list-style: none; margin: 0; padding: 0; }
.bartender-body .items-list li { display: flex; gap: var(--space-2); padding: 5px 0; font-size: 13.5px; }
.bartender-body .items-list li.unavailable { opacity: 0.6; text-decoration: line-through; }
.bartender-body .items-list .qty { font-weight: 600; min-width: 30px; opacity: 0.7; }
.bartender-body .items-list .variant { opacity: 0.6; font-size: 11px; margin-left: 4px; }
.bartender-body .empty-state { opacity: 0.6; font-size: 14px; margin: 0; }

.bartender-body .bar-modal-notes { padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--bar-color-divider); background: var(--bar-color-surface); }
.bartender-body .bar-modal-notes h3 { margin: 0 0 var(--space-2); font-family: var(--bar-font-heading); font-weight: 600; font-size: 12px; opacity: 0.6; }
.bartender-body .bar-modal-notes p { margin: 0; font-size: 14px; line-height: 1.5; }

.bartender-body .modal-error {
  padding: var(--space-3) var(--space-5);
  background: var(--color-danger-light);
  color: var(--color-danger);
  border-bottom: 1px solid var(--bar-color-divider);
  font-size: 13px;
  line-height: 1.4;
}

.bartender-body .bar-modal-footer { padding: var(--space-4) var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); }
.bartender-body .flag-items-container { padding: var(--space-2) 0; }

.bartender-body .modal-close {
  position: absolute;
  top: 8px;
  right: 8px;
  background: none;
  border: none;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  color: var(--bar-color-text);
  opacity: 0.5;
  padding: 4px 8px;
}
.bartender-body .modal-close:hover { opacity: 0.9; }

/* ============================================================
   Auth pages background — coffee shop aesthetic
   ============================================================ */

html, body {
  min-height: 100vh;
  position: relative;
}

/* ============================================================
   Confirmation Page — Email Verification
   Blueprint/Industry design language — scoped to .auth-page,
   built on top of the shared .auth-card corner-bracket component
   (see the "Landing / Signup / Login — Blueprint Exception" section
   of CLAUDE.md's Design System).
   ============================================================ */

.auth-page .confirmation-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(2 * var(--auth-leading));
  width: 100%;
  max-width: 64rem;
}

@media (max-width: 768px) {
  .auth-page .confirmation-grid {
    grid-template-columns: 1fr;
  }
}

.auth-page .confirmation-card {
  max-width: none;
}

.auth-page .confirmation-card h2 {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 22px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin: 0 0 var(--auth-half);
  color: var(--color-text);
}

.auth-page .confirmation-steps ol {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--auth-leading);
}

.auth-page .confirmation-steps li {
  padding: var(--auth-space-3) 0;
  border-bottom: 1px solid var(--color-divider);
  line-height: 1.5;
  font-size: 15px;
}

.auth-page .confirmation-steps li:last-child {
  border-bottom: none;
}

.auth-page .video-card {
  display: flex;
  flex-direction: column;
}

.auth-page .youtube-embed {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  margin: var(--auth-half) 0 var(--auth-leading);
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
}

.auth-page .youtube-embed iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

.auth-page .resend-section {
  margin-top: var(--auth-leading);
  padding-top: var(--auth-leading);
  border-top: 1px solid var(--color-divider);
}

.auth-page .resend-section p {
  margin-bottom: var(--auth-space-3);
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
  font-size: 15px;
}

.auth-page #resend-btn {
  background: var(--color-accent-900);
  color: var(--color-bg);
  border: 1px solid var(--color-accent-900);
  padding: 10px var(--auth-space-4);
  border-radius: var(--auth-radius-md);
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 15px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  cursor: pointer;
  min-height: 40px;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.auth-page #resend-btn:hover:not(:disabled) {
  background: var(--color-accent-800);
  border-color: var(--color-accent-800);
}

.auth-page #resend-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.auth-page #resend-message {
  display: none;
  margin-top: var(--auth-space-3);
  padding: var(--auth-space-3);
  border-radius: var(--auth-radius-md);
  font-size: 14px;
}

.auth-page #resend-message.success {
  background: color-mix(in srgb, #3d8c5e 15%, transparent);
  color: #3d8c5e;
}

.auth-page #resend-message.error {
  background: color-mix(in srgb, #c0392b 15%, transparent);
  color: #c0392b;
}

.auth-page .confirmation-card .foot-note {
  border-top: 1px solid var(--color-divider);
  padding-top: var(--auth-leading);
}

/* Contact page honeypot — hidden from people, present for bots. Not display:none, which some
   bots skip; off-canvas with zero size is filled in far more often. */
.auth-page .contact-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Plan cards — contact-only price slot and the yearly upsell line. */
.dashboard-body .plan-card-price-text { font-size: 20px; line-height: 1.25; }
.dashboard-body .plan-card-yearly-note {
  font-size: 12px;
  color: color-mix(in srgb, var(--dash-color-text) 70%, transparent);
  margin: 8px 0;
  text-align: center;
}
.dashboard-body .plan-card-save {
  display: inline-block;
  background: var(--dash-color-accent-500);
  color: var(--dash-color-bg);
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  text-transform: uppercase;
  letter-spacing: .05em;
}