/* ══════════════════════════════════════════════════════════════════════
   QR Menu tab — guest-facing menu control.
   Uses the dashboard's existing tokens (--card, --border, --muted, --dim,
   --green, --accent) so it inherits light/dark themes automatically.
   ══════════════════════════════════════════════════════════════════════ */

/* Le Major'L nav order (QR Menu, Analytique, Réassort) — toggled by
   applyLeMajorLTabGating() in dashboard-venue.js via a body class rather than
   reordering DOM nodes, so every other house's sidebar/bottom-nav keeps its
   normal order untouched. Both .vos-sidebar-nav and .bottom-nav are flex
   containers, so `order` alone repositions these three items. */
body.lemajorl-nav-order .vos-nav-item[data-tab="qrmenu"],
body.lemajorl-nav-order .bnav-btn[data-tab="qrmenu"] { order: 1; }
body.lemajorl-nav-order .vos-nav-item[data-tab="qranalytics"],
body.lemajorl-nav-order .bnav-btn[data-tab="qranalytics"] { order: 2; }
body.lemajorl-nav-order .vos-nav-item[data-tab="reorder"],
body.lemajorl-nav-order .bnav-btn[data-tab="reorder"] { order: 3; }

.qrm-top {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 20px;
  align-items: start;
}
@media (max-width: 720px) {
  .qrm-top { grid-template-columns: 1fr; }
}

/* ── QR card ───────────────────────────────────────────────────────── */
/* Hero treatment: a slow-rotating conic gradient behind a solid card face,
   masked down to a thin glowing ring — the guest QR is the one thing on
   this tab that's physically printed and re-scanned every service, so it
   gets the most visual weight on the page. */
.qrm-qr-card {
  position: relative;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 18px;
  background: var(--card);
  text-align: center;
  isolation: isolate;
  overflow: hidden;
}
.qrm-qr-card::before {
  content: '';
  position: absolute;
  inset: -2px;
  z-index: -1;
  border-radius: inherit;
  background: conic-gradient(from var(--qrm-hero-angle, 0deg), var(--brass,#b8964e), #e3cf8f, #7a5ca8, #5b7fb8, var(--brass,#b8964e));
  animation: qrmHeroSpin 8s linear infinite;
}
.qrm-qr-card::after {
  content: '';
  position: absolute;
  inset: 1px;
  z-index: -1;
  border-radius: inherit;
  background: var(--card);
}
@keyframes qrmHeroSpin { to { --qrm-hero-angle: 360deg; } }
@property --qrm-hero-angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.qrm-qr-frame {
  background: #fff;
  border-radius: 10px;
  padding: 12px;
  display: flex;
  justify-content: center;
  box-shadow: 0 8px 24px -8px rgba(0,0,0,.35);
}
.qrm-qr-frame img,
.qrm-qr-frame canvas { display: block; width: 100%; height: auto; max-width: 190px; }
.qrm-qr-url {
  font-size: .72rem;
  color: var(--dim);
  word-break: break-all;
  margin: 12px 0 14px;
}
.qrm-qr-actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }

/* ── Stat tiles ────────────────────────────────────────────────────── */
.qrm-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 12px;
}
.qrm-stat {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  background: var(--card);
}
.qrm-stat-v { font-size: 1.5rem; font-weight: 700; line-height: 1.1; }
.qrm-stat-k {
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--dim);
  margin-top: 5px;
}
.qrm-stat.warn .qrm-stat-v { color: #C9772B; }
.qrm-stat.ok   .qrm-stat-v { color: var(--green); }

/* ── Item rows ─────────────────────────────────────────────────────── */
.qrm-group-head {
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--dim);
  padding: 18px 4px 8px;
}
.qrm-row {
  display: grid;
  grid-template-columns: 52px 1fr 92px 92px 96px;
  gap: 12px;
  align-items: center;
  padding: 11px 12px 11px 9px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--row-accent, var(--border));
  border-radius: 10px;
  margin-bottom: 8px;
  background: var(--card);
  transition: opacity .2s ease, border-color .2s ease, transform .15s ease, box-shadow .15s ease;
}
.qrm-row:hover { transform: translateX(1px); box-shadow: 0 4px 14px -6px rgba(0,0,0,.25); }
.qrm-row.is-out { opacity: .55; border-color: color-mix(in srgb, var(--border) 60%, transparent); }
@media (max-width: 720px) {
  .qrm-row { grid-template-columns: 44px 1fr 1fr; row-gap: 10px; }
  .qrm-row .qrm-name { grid-column: 2 / -1; }
  .qrm-row .qrm-86   { grid-column: 1 / -1; }
}

.qrm-thumb {
  width: 52px; height: 52px; border-radius: 8px; overflow: hidden; flex-shrink: 0;
  background: color-mix(in srgb, var(--border) 30%, transparent);
  display: flex; align-items: center; justify-content: center;
}
.qrm-thumb img { width: 100%; height: 100%; object-fit: cover; }
.qrm-thumb.no-img { border: 1px dashed var(--border); }
.qrm-thumb-empty { font-size: 1.1rem; opacity: .45; }
@media (max-width: 720px) { .qrm-thumb { width: 44px; height: 44px; } }

.qrm-name { min-width: 0; }
.qrm-name b { font-size: .92rem; font-weight: 600; display: block; }
.qrm-row.is-out .qrm-name b { text-decoration: line-through; }
.qrm-name small { font-size: .76rem; color: var(--dim); display: block; margin-top: 2px; }

.qrm-price { display: flex; align-items: center; gap: 4px; }
.qrm-price input {
  width: 100%;
  font: inherit;
  font-size: .86rem;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: transparent;
  color: inherit;
  text-align: right;
}
.qrm-price input:focus { outline: 2px solid var(--accent, var(--brass,#b8964e)); outline-offset: 1px; }
.qrm-price input:disabled { opacity: .4; }
.qrm-price span { font-size: .78rem; color: var(--dim); }

/* 86 switch */
.qrm-86 { display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
.qrm-86 label { font-size: .74rem; color: var(--dim); cursor: pointer; user-select: none; }
.qrm-switch {
  position: relative;
  width: 38px;
  height: 21px;
  flex: 0 0 38px;
  border-radius: 99px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--border) 45%, transparent);
  cursor: pointer;
  padding: 0;
  transition: background .2s ease, border-color .2s ease;
}
.qrm-switch::after {
  content: '';
  position: absolute;
  top: 2px; left: 2px;
  width: 15px; height: 15px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.3);
  transition: transform .2s cubic-bezier(.16,1,.3,1);
}
.qrm-switch[aria-pressed="true"] { background: #C9772B; border-color: #C9772B; }
.qrm-switch[aria-pressed="true"]::after { transform: translateX(17px); }

.qrm-flag {
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 4px;
  margin-left: 6px;
  vertical-align: middle;
}
.qrm-flag.pick { background: color-mix(in srgb, var(--accent, var(--brass,#b8964e)) 18%, transparent); color: var(--accent, var(--brass,#b8964e)); }
.qrm-flag.last { background: rgba(201,119,43,.18); color: #C9772B; }

/* Pick / last-bottles toggles — full-width second line so they don't disturb the
   4-column name/glass/bottle/86 grid shared with food rows. */
.qrm-flags { grid-column: 1 / -1; display: flex; gap: 8px; margin-top: 2px; }
.qrm-flag-btn {
  font-size: .72rem;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 99px;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, color .2s ease, transform .15s ease;
}
.qrm-flag-btn:hover { transform: translateY(-1px); }
/* Always tinted, not just on hover/active — these toggle a real guest-facing
   flag, so what the button DOES should read at a glance, not only once it's
   already on. (Previously relied on an undefined --accent custom property
   with no fallback, which made "Modifier"/"Coup de cœur" etc. render with no
   colour at all — see var(--accent, var(--brass,...)) fallback above.) */
.qrm-flag-btn[data-flag="pick"] {
  background: color-mix(in srgb, var(--accent, var(--brass,#b8964e)) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent, var(--brass,#b8964e)) 45%, transparent);
  color: var(--accent, var(--brass,#b8964e));
}
.qrm-flag-btn[data-flag="pick"].active { background: color-mix(in srgb, var(--accent, var(--brass,#b8964e)) 24%, transparent); border-color: var(--accent, var(--brass,#b8964e)); }
.qrm-flag-btn[data-flag="last"] {
  background: rgba(201,119,43,.10);
  border: 1px solid rgba(201,119,43,.45);
  color: #C9772B;
}
.qrm-flag-btn[data-flag="last"].active { background: rgba(201,119,43,.24); border-color: #C9772B; }

/* ── Translation coverage — progress rings ───────────────────────────── */
.qrm-i18n-rings { display: flex; gap: 32px; flex-wrap: wrap; }
.qrm-i18n-ring { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; width: 80px; }
.qrm-i18n-pct { position: absolute; top: 26px; left: 0; right: 0; text-align: center; font-size: .88rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.qrm-i18n-label { font-size: .74rem; color: var(--dim); margin-top: 4px; }
.qrm-i18n-arc {
  stroke-dasharray: var(--ring-c);
  stroke-dashoffset: var(--ring-c);
  animation: qrmRingIn 1s cubic-bezier(.22,.85,.28,1) .1s both;
}
@keyframes qrmRingIn { from { stroke-dashoffset: var(--ring-c); } to { stroke-dashoffset: var(--ring-o); } }

/* ── QR Menu sub-tab pills ────────────────────────────────────────────
   Scoped to #qrm-sub-tabs specifically (not the bare .menu-sub-tab class,
   which the generic Menu Editor tab on every other client also uses) so
   this animated-pill treatment stays exclusive to Le Major'L's QR Menu tab. */
#qrm-sub-tabs.menu-sub-tabs { gap: 6px; }
#qrm-sub-tabs .menu-sub-tab {
  position: relative;
  border-radius: 999px;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .15s ease;
}
#qrm-sub-tabs .menu-sub-tab:hover { transform: translateY(-1px); }
#qrm-sub-tabs .menu-sub-tab.active {
  background: linear-gradient(135deg, var(--brass,#b8964e), #8a6d3b);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 4px 14px -4px rgba(184,150,78,.55);
}

/* ── Add / edit / delete a wine ───────────────────────────────────────── */
.qrm-group-head-row { display: flex; align-items: center; padding: 18px 4px 8px; gap: 10px; }
.qrm-group-head-row .qrm-group-head { padding: 0; }
.qrm-group-add {
  font-size: .72rem; font-weight: 700; letter-spacing: .02em;
  padding: 4px 10px; border-radius: 99px; border: 1px dashed var(--border);
  background: transparent; color: var(--dim); cursor: pointer;
  transition: border-color .2s ease, color .2s ease;
}
.qrm-group-add:hover { border-color: var(--accent, var(--brass,#b8964e)); color: var(--accent, var(--brass,#b8964e)); }

.qrm-added-badge {
  font-size: .62rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--accent, var(--brass,#b8964e)); border: 1px solid var(--accent, var(--brass,#b8964e)); border-radius: 4px;
  padding: 1px 5px; margin-left: 6px; vertical-align: middle;
}
.qrm-row-actions { grid-column: 1 / -1; display: flex; gap: 8px; margin-top: 2px; justify-content: flex-end; }
.qrm-row-edit, .qrm-row-delete {
  font-size: .72rem; font-weight: 600; padding: 5px 10px; border-radius: 99px;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, color .2s ease, transform .15s ease;
}
.qrm-row-edit:hover, .qrm-row-delete:hover { transform: translateY(-1px); }
.qrm-row-edit {
  background: color-mix(in srgb, var(--accent, var(--brass,#b8964e)) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent, var(--brass,#b8964e)) 45%, transparent);
  color: var(--accent, var(--brass,#b8964e));
}
.qrm-row-edit:hover { background: color-mix(in srgb, var(--accent, var(--brass,#b8964e)) 20%, transparent); }
.qrm-row-delete {
  background: rgba(201,119,43,.10);
  border: 1px solid rgba(201,119,43,.45);
  color: #C9772B;
}
.qrm-row-delete:hover { background: rgba(201,119,43,.20); }

.qrm-modal-overlay {
  position: fixed; inset: 0; z-index: 200; background: rgba(0,0,0,.55);
  display: flex; align-items: center; justify-content: center; padding: 20px;
  opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility .2s;
}
.qrm-modal-overlay.open { opacity: 1; visibility: visible; }
.qrm-modal {
  width: 100%; max-width: 560px; max-height: 88vh; overflow-y: auto;
  background: var(--card); border: 1px solid var(--border); border-radius: 16px;
  padding: 22px 24px 24px;
}
.qrm-modal h3 { margin: 0 0 4px; font-size: 1.05rem; }
.qrm-modal-hint { font-size: .8rem; color: var(--dim); margin: 0 0 18px; }
.qrm-modal-error {
  font-size: .8rem; color: #C9772B; margin: 0 0 12px; display: none;
  padding: 8px 10px; border: 1px solid #C9772B; border-radius: 8px;
  background: rgba(201,119,43,.1);
}
.qrm-modal-error.show { display: block; }
.qrm-field { margin-bottom: 12px; }
.qrm-field label { display: block; font-size: .76rem; font-weight: 600; color: var(--dim); margin-bottom: 5px; }
.qrm-field input, .qrm-field textarea {
  width: 100%; font: inherit; font-size: .88rem; padding: 8px 10px; box-sizing: border-box;
  border: 1px solid var(--border); border-radius: 8px; background: transparent; color: inherit;
}
.qrm-field input:focus, .qrm-field textarea:focus { outline: 2px solid var(--accent, var(--brass,#b8964e)); outline-offset: 1px; }
.qrm-field textarea { resize: vertical; min-height: 60px; }
.qrm-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 480px) { .qrm-field-row { grid-template-columns: 1fr; } }
.qrm-modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; }

/* Drink price tiers (add/edit modal + read-only list summary) */
.qrm-tier-row { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.qrm-tier-row input {
  font: inherit; font-size: .88rem; padding: 8px 10px; box-sizing: border-box;
  border: 1px solid var(--border); border-radius: 8px; background: transparent; color: inherit;
}
.qrm-tier-row input:focus { outline: 2px solid var(--accent, var(--brass,#b8964e)); outline-offset: 1px; }
.qrm-tier-row input[data-tier-label] { flex: 1; min-width: 0; }
.qrm-tier-row input[data-tier-price] { width: 90px; flex: 0 0 auto; }
.qrm-tier-row .qrm-row-delete { flex: 0 0 auto; }
.qrm-tiers-summary { flex: 1 1 auto; font-size: .82rem; color: var(--dim); }

/* Allergen chip picker (add/edit modal) */
.qrm-allergen-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.qrm-allergen-chip {
  font-size: .74rem; font-weight: 600; padding: 5px 11px; border-radius: 99px;
  border: 1px solid var(--border); background: transparent; color: var(--dim); cursor: pointer;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.qrm-allergen-chip:hover { border-color: var(--accent, var(--brass,#b8964e)); color: var(--accent, var(--brass,#b8964e)); }
.qrm-allergen-chip.active { background: var(--accent, var(--brass,#b8964e)); border-color: var(--accent, var(--brass,#b8964e)); color: #fff; }

/* Flavor-map (dry/body) drag-dot pad — add/edit modal only (see file header
   comment in dashboard-qrmenu.js for why this replaced the always-visible
   inline row inputs). Deliberately matches the guest-facing flavor map's own
   look (crosshair grid, warm brass glow, same dot colour-per-family) rather
   than an invented style — it's the same map, just editable, so a manager
   should recognise it instantly. Every other already-placed item in the
   chapter is plotted too (.qrm-flavor-sibling-dot, static) so the dragged
   dot can be positioned precisely relative to its neighbours instead of in
   an empty square. Colour values below are lifted straight from
   proposals/le-major-l/menu.html's --brass/--wine/--surface-2/--bg-deep
   (night theme) since this admin has no equivalent tokens of its own. */
.qrm-flavor-pad-wrap {
  display: grid;
  grid-template-columns: 30px 1fr 30px;
  grid-template-rows: 22px 1fr 22px;
  gap: 6px;
  max-width: 300px;
}
.qrm-flavor-axis {
  font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--dim); display: flex; align-items: center; justify-content: center;
}
.qrm-flavor-axis-top    { grid-column: 2; grid-row: 1; }
.qrm-flavor-axis-bottom { grid-column: 2; grid-row: 3; }
.qrm-flavor-axis-left   { grid-column: 1; grid-row: 2; writing-mode: vertical-rl; transform: rotate(180deg); }
.qrm-flavor-axis-right  { grid-column: 3; grid-row: 2; writing-mode: vertical-rl; }
.qrm-flavor-pad {
  grid-column: 2; grid-row: 2;
  position: relative;
  aspect-ratio: 1;
  border: 1px solid var(--border);
  border-radius: 14px;
  background:
    linear-gradient(rgba(242,233,220,.14) 1px, transparent 1px) 0 0/100% 50%,
    linear-gradient(90deg, rgba(242,233,220,.14) 1px, transparent 1px) 0 0/50% 100%,
    radial-gradient(120% 90% at 50% 15%, rgba(212,172,46,.20), transparent 60%),
    linear-gradient(165deg, #2E2118, #020202);
  box-shadow: inset 0 2px 10px rgba(0,0,0,.4);
  cursor: crosshair;
  touch-action: none;
  overflow: hidden;
}
.qrm-flavor-sibling-dot {
  position: absolute;
  width: 9px; height: 9px;
  margin-left: -4.5px; margin-top: -4.5px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.35);
  opacity: .65;
  pointer-events: none;
}
.qrm-flavor-sibling-dot.c-blanc   { background: #F0D375; }
.qrm-flavor-sibling-dot.c-rouge   { background: #DA5E4F; }
.qrm-flavor-sibling-dot.c-rose    { background: #D98A8A; }
.qrm-flavor-sibling-dot.c-cremant { background: #8FC5D6; }
.qrm-flavor-sibling-dot.c-bar     { background: #D4AC2E; }
.qrm-flavor-dot {
  position: absolute;
  width: 20px; height: 20px;
  margin-left: -10px; margin-top: -10px;
  border-radius: 50%;
  background: var(--accent, #D4AC2E);
  border: 2.5px solid #fff;
  box-shadow: 0 0 0 5px rgba(212,172,46,.35), 0 3px 10px rgba(0,0,0,.45);
  pointer-events: none;
  z-index: 2;
}