/*
 * Live Queue admin design system — the "ticket counter" identity approved
 * 2026-09-13 (see memory: project_design_system.md). Applied on top of
 * Shopify's native <s-page>/<s-section> structure, never replacing it —
 * these classes style the *content* inside those shells.
 */

:root {
  --lq-bg: #ECEEE5;
  --lq-surface: #F8F9F1;
  --lq-surface-2: #E2E4D8;
  --lq-border: #D2D4C5;
  --lq-text: #171A24;
  --lq-text-soft: #565A6B;
  --lq-accent: #C97F1E;
  --lq-accent-contrast: #171A24;
  --lq-accent-soft: #F1DCB4;
  --lq-accent-2: #A63C2A;
  --lq-accent-2-soft: #EFD9D2;
  --lq-success: #3F7D5C;
  --lq-success-soft: #DCEAE1;
  --lq-shadow: 0 1px 2px rgba(23, 26, 36, 0.06), 0 8px 24px -12px rgba(23, 26, 36, 0.18);
  --lq-font-display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --lq-font-body: 'Public Sans', -apple-system, 'Segoe UI', sans-serif;
  --lq-font-mono: 'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace;
}

.lq-root { font-family: var(--lq-font-body); color: var(--lq-text); }

.lq-eyebrow {
  font-family: var(--lq-font-body); font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--lq-accent);
}

.lq-h1, .lq-h2, .lq-h3 { font-family: var(--lq-font-display); font-weight: 600; text-wrap: balance; margin: 0; color: var(--lq-text); }
.lq-h1 { font-size: clamp(1.9rem, 3vw, 2.4rem); }
.lq-h2 { font-size: 1.4rem; }
.lq-h3 { font-size: 1.1rem; }

.lq-prose { color: var(--lq-text-soft); font-size: 0.95rem; line-height: 1.65; max-width: 62ch; }

.lq-mono { font-family: var(--lq-font-mono); font-variant-numeric: tabular-nums; }

/* ---------- stat strip ---------- */
.lq-stat-strip { display: flex; gap: 14px; flex-wrap: wrap; margin-block: 18px 24px; }
.lq-stat-tile {
  flex: 1 1 160px; background: var(--lq-surface); border: 1px solid var(--lq-border);
  border-radius: 12px; padding: 16px 18px;
}
.lq-stat-num { font-family: var(--lq-font-mono); font-variant-numeric: tabular-nums; font-weight: 600; font-size: 1.7rem; color: var(--lq-accent); line-height: 1.1; }
.lq-stat-label { font-size: 0.78rem; color: var(--lq-text-soft); margin-top: 2px; }

/* ---------- entity card (replaces bare table rows for "active things") ---------- */
.lq-card {
  position: relative; background: var(--lq-surface); border: 1px solid var(--lq-border);
  border-radius: 12px; padding: 16px 18px 16px 22px; margin-bottom: 10px;
}
.lq-card::before {
  content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 4px;
  border-radius: 4px; background: var(--lq-accent);
}
.lq-card.is-muted::before { background: var(--lq-border); }
.lq-card-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.lq-card-title { font-weight: 600; margin-bottom: 4px; font-family: var(--lq-font-body); }
.lq-card-desc { font-size: 0.85rem; color: var(--lq-text-soft); }
.lq-card-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* ---------- selectable choice card (e.g. "what would you like to offer?") ---------- */
.lq-choice-row { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; }
.lq-choice {
  position: relative; flex: 1 1 220px; text-align: left; background: var(--lq-surface);
  border: 1px solid var(--lq-border); border-radius: 12px; padding: 14px 16px 14px 20px;
  cursor: pointer; font: inherit; color: inherit;
}
.lq-choice::before {
  content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 4px;
  border-radius: 4px; background: var(--lq-border);
}
.lq-choice.is-selected { background: var(--lq-accent-soft); border-color: var(--lq-accent); }
.lq-choice.is-selected::before { background: var(--lq-accent); }
.lq-choice-title { font-weight: 600; margin-bottom: 4px; font-family: var(--lq-font-body); }
.lq-choice-desc { font-size: 0.85rem; color: var(--lq-text-soft); }

/* ---------- pills ---------- */
.lq-pill {
  display: inline-flex; align-items: center; gap: 6px; font-size: 0.74rem; font-weight: 600;
  padding: 5px 11px; border-radius: 999px; letter-spacing: 0.02em; white-space: nowrap;
  font-family: var(--lq-font-body);
}
.lq-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.lq-pill-success { background: var(--lq-success-soft); color: var(--lq-success); }
.lq-pill-brand { background: var(--lq-accent-soft); color: var(--lq-accent); }
.lq-pill-critical { background: var(--lq-accent-2-soft); color: var(--lq-accent-2); }
.lq-pill-neutral { background: var(--lq-surface-2); color: var(--lq-text-soft); }
.lq-pill-outline { background: transparent; border: 1px dashed var(--lq-border); color: var(--lq-text-soft); }
.lq-pill-muted { background: var(--lq-surface-2); color: var(--lq-text-soft); opacity: 0.7; }

/* ---------- empty state ---------- */
.lq-empty {
  border: 1.5px dashed var(--lq-border); border-radius: 14px; padding: 32px 24px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 10px; background: var(--lq-bg);
}
.lq-empty-icon { width: 36px; height: 36px; color: var(--lq-text-soft); }
.lq-empty-title { font-weight: 600; font-family: var(--lq-font-body); }
.lq-empty-desc { font-size: 0.85rem; color: var(--lq-text-soft); max-width: 36ch; line-height: 1.5; }

/* ---------- ticket stub (for moments that echo the storefront widget) ---------- */
.lq-stub {
  position: relative; background: var(--lq-surface); border: 1px solid var(--lq-border);
  border-radius: 16px; box-shadow: var(--lq-shadow); padding: 22px 24px 20px;
}
.lq-stub::after {
  content: ""; position: absolute; left: -1px; right: -1px; bottom: 64px; height: 1px;
  background-image: radial-gradient(circle, var(--lq-bg) 3px, transparent 3.2px);
  background-size: 16px 1px; background-position: 0 0; background-repeat: repeat-x;
  border-top: 1px dashed var(--lq-border);
}
.lq-stub-number { font-family: var(--lq-font-mono); font-variant-numeric: tabular-nums; font-weight: 600; font-size: 2.6rem; color: var(--lq-accent); line-height: 1; }

/* ---------- toolbar ---------- */
.lq-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; gap: 12px; flex-wrap: wrap; }

/* ---------- filter bar ----------
   A row of filter controls above a table reads as "filtering," not "filling
   out a form," only when every control is compact and the same height —
   each Polaris field's own visible label defeats that (it stacks the
   control onto its own line), so every field here sets
   labelAccessibilityVisibility="exclusive" to keep the label for screen
   readers only. The date range has no Polaris equivalent (confirmed
   elsewhere in this app — see app.rules_.$ruleId.tsx's DateField comment),
   so its plain native <input type="date"> is styled here to sit at the
   same height/radius as its Polaris neighbors instead of showing raw
   browser chrome. */
.lq-filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: var(--lq-surface);
  border: 1px solid var(--lq-border);
  border-radius: 10px;
}
.lq-filter-bar > * { flex: none; }
.lq-date-input, .lq-number-input {
  font-family: var(--lq-font-body);
  font-size: 0.8125rem;
  color: var(--lq-text);
  background: var(--lq-surface-2);
  border: 1px solid var(--lq-border);
  border-radius: 8px;
  padding: 0 10px;
  height: 32px;
  line-height: 32px;
}
.lq-number-input { width: 64px; text-align: center; }
.lq-filter-divider { width: 1px; align-self: stretch; background: var(--lq-border); margin: 0 2px; }

/* Reuses .lq-filter-bar's exact container styling so the bulk-actions row
   sitting directly below the filter row (app.subscribers.tsx) reads as the
   same kind of toolbar, not a second, visually distinct control cluster. */
.lq-bulk-bar { justify-content: space-between; }
.lq-bulk-bar .lq-bulk-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ---------- buttons ----------
   Native <s-button> is a Polaris shadow-DOM custom element and can't be
   recolored to the brand accent from outside, so any button that needs to
   carry brand color (primary actions, list-row actions) is a plain <a>/
   <button> styled here instead — confirmed as the right call by the
   approved design pitch, which uses plain buttons throughout. */
.lq-btn {
  font-family: var(--lq-font-body); font-weight: 600; font-size: 0.88rem;
  padding: 9px 16px; border-radius: 10px; border: 1px solid transparent; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px; text-decoration: none; line-height: 1.2;
}
.lq-btn-primary { background: var(--lq-accent); color: var(--lq-accent-contrast); }
.lq-btn-secondary { background: transparent; border-color: var(--lq-border); color: var(--lq-text); }
.lq-btn-critical { background: transparent; border-color: var(--lq-accent-2); color: var(--lq-accent-2); }
.lq-btn-tertiary { background: transparent; border-color: transparent; color: var(--lq-text-soft); padding-left: 4px; padding-right: 4px; }
.lq-btn:disabled { opacity: 0.6; cursor: default; }

/* ---------- plain native <select> (onboarding's theme picker — a real
   navigation trigger via onChange, which Polaris's shadow-DOM <s-select>
   can't do without the delegated-listener workaround used elsewhere) ---- */
.lq-native-select {
  font-family: var(--lq-font-body); font-size: 0.88rem; color: var(--lq-text);
  background: var(--lq-surface); border: 1px solid var(--lq-border); border-radius: 10px;
  padding: 9px 12px; min-width: 220px;
}
.lq-field-label {
  display: block; font-family: var(--lq-font-body); font-weight: 600; font-size: 0.85rem;
  color: var(--lq-text); margin-bottom: 6px;
}

/* ---------- copyable code snippet ---------- */
.lq-code-textarea {
  width: 100%; box-sizing: border-box; font-family: var(--lq-font-mono, monospace); font-size: 0.82rem;
  background: var(--lq-surface); border: 1px solid var(--lq-border); border-radius: 10px;
  padding: 12px; color: var(--lq-text); resize: vertical;
}

/* ---------- panel (a plain surface for dense edit forms — no accent bar,
   unlike .lq-card which signals a specific list-row entity) ---------- */
.lq-panel {
  background: var(--lq-surface); border: 1px solid var(--lq-border);
  border-radius: 12px; padding: 18px 20px; margin-bottom: 14px;
}

/* ---------- inline banners ---------- */
.lq-banner {
  border-radius: 12px; padding: 14px 16px; font-size: 0.88rem; line-height: 1.5;
  border: 1px solid transparent;
}
.lq-banner-success { background: var(--lq-success-soft); color: var(--lq-success); border-color: var(--lq-success); }
.lq-banner-critical { background: var(--lq-accent-2-soft); color: var(--lq-accent-2); border-color: var(--lq-accent-2); }

/* ---------- wizard step navigator ---------- */
.lq-steps { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 4px; }
.lq-step {
  font-family: var(--lq-font-body); font-weight: 600; font-size: 0.82rem;
  padding: 8px 14px; border-radius: 999px; border: 1px solid var(--lq-border);
  background: transparent; color: var(--lq-text-soft); cursor: pointer;
}
.lq-step.is-active { background: var(--lq-text); color: var(--lq-bg); border-color: var(--lq-text); }
.lq-step:disabled { opacity: 0.45; cursor: default; }

/* ---------- template card grid (email templates overview) ---------- */
.lq-template-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.lq-template-card {
  background: var(--lq-surface); border: 1px solid var(--lq-border); border-radius: 14px;
  overflow: hidden; transition: border-color 0.15s ease, transform 0.15s ease;
}
.lq-template-card:hover { border-color: var(--lq-accent); transform: translateY(-2px); }
.lq-template-card.is-disabled { opacity: 0.55; }
/* The switch lives outside this link, as a sibling in the footer below —
   nesting an interactive control inside an anchor is both an accessibility
   anti-pattern and a click-hijacking headache (the switch's click would
   either get swallowed by or trigger the card's own navigation). */
.lq-template-card__link { display: block; text-decoration: none; color: inherit; }
.lq-template-card__preview {
  position: relative; height: 160px; overflow: hidden; background: var(--lq-bg);
  border-bottom: 1px solid var(--lq-border);
}
.lq-template-card__preview iframe {
  position: absolute; top: 0; left: 0; width: 250%; height: 250%;
  transform: scale(0.4); transform-origin: top left; border: none; pointer-events: none;
}
.lq-template-card__body { padding: 14px 16px 16px; }
.lq-template-card__title { font-family: var(--lq-font-body); font-weight: 700; margin-bottom: 4px; }
.lq-template-card__subject { font-size: 0.82rem; color: var(--lq-text-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-bottom: 8px; }
.lq-template-card__footer {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 16px; border-top: 1px solid var(--lq-border);
}

/* ---------- custom email design editor (@react-email/editor) ---------- */
.lq-email-editor { min-height: 640px; }

/* ---------- two-column layout (template edit + preview) ---------- */
.lq-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
@media (max-width: 800px) { .lq-two-col { grid-template-columns: 1fr; } }

/* ---------- settings side nav (markets / transfer / notify-restock) ---------- */
.lq-settings-layout { display: grid; grid-template-columns: 220px 1fr; gap: 24px; align-items: start; }
@media (max-width: 800px) { .lq-settings-layout { grid-template-columns: 1fr; } }
.lq-settings-nav {
  display: flex; flex-direction: column; gap: 2px; background: var(--lq-surface);
  border: 1px solid var(--lq-border); border-radius: 14px; padding: 8px;
}
.lq-settings-nav__item {
  display: block; padding: 10px 14px; border-radius: 10px; text-decoration: none;
  font-family: var(--lq-font-body); font-weight: 600; font-size: 0.88rem; color: var(--lq-text-soft);
  transition: background 0.12s ease, color 0.12s ease;
}
.lq-settings-nav__item:hover { background: var(--lq-bg); color: var(--lq-text); }
.lq-settings-nav__item[aria-current="page"] { background: var(--lq-text); color: var(--lq-bg); }
.lq-settings-content { display: flex; flex-direction: column; gap: 16px; }