/* =============================================================================
   KrushTix v2 — main.css
   Design system: dark theme, magenta accent, Bricolage Grotesque + Manrope.
   ============================================================================= */

/* ---------- design tokens ---------- */
:root {
  /* color */
  --kt-bg:          #0b0b0d;
  --kt-bg-elev:     #131316;
  --kt-bg-soft:     #1a1a1e;
  --kt-line:        rgba(255,255,255,0.07);
  --kt-line-strong: rgba(255,255,255,0.14);

  --kt-text:        #f5f5f7;
  --kt-text-mute:   #9a9aa3;
  --kt-text-dim:    #6a6a72;

  --kt-primary:     #2090e0;        /* KrushTix brand blue */
  --kt-primary-700: #1d4ea0;        /* deeper "Tix" gradient end */
  --kt-primary-300: #6bbef0;        /* lighter highlight / hover */
  --kt-success:     #22c55e;
  --kt-warning:     #fbbf24;
  --kt-danger:      #ef4444;
  --kt-info:        #38bdf8;

  --kt-accent-grad: linear-gradient(135deg, #2090e0 0%, #1d4ea0 100%);

  /* type */
  --kt-font-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --kt-font-body:    'Manrope', system-ui, sans-serif;

  /* radius */
  --kt-r-sm: 8px;
  --kt-r-md: 12px;
  --kt-r-lg: 18px;
  --kt-r-xl: 28px;
  --kt-r-pill: 999px;

  /* shadow */
  --kt-shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --kt-shadow-md: 0 6px 24px rgba(0,0,0,0.45);
  --kt-shadow-lg: 0 20px 60px rgba(0,0,0,0.6);
  --kt-glow:       0 0 0 6px rgba(32,144,224,0.22);

  /* spacing scale (4px base) */
  --kt-s-1: 4px;
  --kt-s-2: 8px;
  --kt-s-3: 12px;
  --kt-s-4: 16px;
  --kt-s-5: 24px;
  --kt-s-6: 32px;
  --kt-s-7: 48px;
  --kt-s-8: 64px;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }

/* HTML `hidden` attribute must always win, even over class-defined display */
[hidden] { display: none !important; }
body {
  font-family: var(--kt-font-body);
  font-size: 15px;
  line-height: 1.55;
  color: var(--kt-text);
  background:
    radial-gradient(1200px 600px at 90% -10%, rgba(32,144,224,0.22), transparent 60%),
    radial-gradient(900px 500px at -10% 30%, rgba(29,78,160,0.18), transparent 55%),
    var(--kt-bg);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a {
  color: var(--kt-text);
  text-decoration: none;
  transition: color .15s ease;
}
a:hover { color: var(--kt-primary-300); }

h1, h2, h3, h4 {
  font-family: var(--kt-font-display);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 var(--kt-s-3);
}
h1 { font-size: clamp(2rem, 5vw, 3.2rem); line-height: 1.05; letter-spacing: -0.02em; }
h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); line-height: 1.1; }
h3 { font-size: 1.25rem; }
p  { margin: 0 0 var(--kt-s-3); color: var(--kt-text-mute); }

button { font-family: inherit; }

/* ---------- boot splash ---------- */
.boot {
  position: fixed; inset: 0;
  display: grid; place-items: center;
  background: var(--kt-bg);
  z-index: 9999;
  gap: var(--kt-s-4);
}
.boot__logo-img {
  width: min(70vw, 360px);
  height: auto;
  display: block;
}
.boot__spinner {
  width: 26px; height: 26px;
  border: 2px solid rgba(255,255,255,0.15);
  border-top-color: var(--kt-primary);
  border-radius: 50%;
  animation: kt-spin 0.7s linear infinite;
}
@keyframes kt-spin { to { transform: rotate(360deg); } }
.kt-spin { animation: kt-spin 0.7s linear infinite; }

/* ---------- topbar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--kt-s-4);
  padding: 14px 24px;
  background: rgba(11,11,13,0.72);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--kt-line);
}
.topbar__brand {
  display: inline-flex; align-items: center;
  height: 32px;
}
.topbar__brand img {
  height: 100%;
  width: auto;
  display: block;
}
.topbar__nav {
  display: flex; gap: var(--kt-s-5);
  font-size: 14px; font-weight: 500;
  color: var(--kt-text-mute);
}
.topbar__nav a { color: inherit; }
.topbar__nav a:hover { color: var(--kt-text); }
.topbar__actions {
  display: flex; gap: var(--kt-s-2); align-items: center;
}
@media (max-width: 720px) {
  .topbar { padding: 12px 16px; }
  .topbar__nav { display: none; }
}

/* ---------- buttons ---------- */
.btn {
  --bg: transparent;
  --fg: var(--kt-text);
  --bd: transparent;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px;
  font-family: inherit; font-size: 14px; font-weight: 600;
  background: var(--bg); color: var(--fg);
  border: 1px solid var(--bd);
  border-radius: var(--kt-r-pill);
  cursor: pointer;
  transition: background .15s ease, transform .12s ease, box-shadow .2s ease, border-color .15s ease;
  text-decoration: none;
}
.btn svg { width: 18px; height: 18px; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; transform: none; }

.btn--primary  { --bg: var(--kt-primary); --fg: #fff; --bd: var(--kt-primary); }
.btn--primary:hover { --bg: var(--kt-primary-700); --bd: var(--kt-primary-700); box-shadow: var(--kt-glow); }
.btn--ghost    { --bg: transparent; --fg: var(--kt-text); --bd: var(--kt-line-strong); }
.btn--ghost:hover { --bg: rgba(255,255,255,0.04); }
.btn--soft     { --bg: rgba(32,144,224,0.14); --fg: var(--kt-primary-300); --bd: rgba(32,144,224,0.30); }
.btn--danger   { --bg: var(--kt-danger); --fg: #fff; --bd: var(--kt-danger); }
.btn--sm       { padding: 7px 12px; font-size: 13px; }
.btn--lg       { padding: 14px 22px; font-size: 15px; }
.btn--block    { display: flex; width: 100%; justify-content: center; }

/* ---------- view container ---------- */
.view {
  min-height: calc(100vh - 132px);
  padding: var(--kt-s-7) 24px var(--kt-s-7);
  max-width: 1200px;
  margin: 0 auto;
}
@media (max-width: 720px) {
  .view { padding: var(--kt-s-5) 16px var(--kt-s-6); }
}

/* ---------- landing hero ---------- */
.hero {
  display: grid; gap: var(--kt-s-5);
  padding: var(--kt-s-7) 0;
}
.hero__eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--kt-primary-300);
  background: rgba(32,144,224,0.12);
  border: 1px solid rgba(32,144,224,0.30);
  border-radius: var(--kt-r-pill);
  padding: 6px 12px;
  width: max-content;
}
.hero__title {
  font-family: var(--kt-font-display);
  font-weight: 800;
  font-size: clamp(2.4rem, 6vw, 4.2rem);
  line-height: 1.02;
  letter-spacing: -0.025em;
  margin: 0;
  max-width: 18ch;
}
.hero__title em {
  font-style: normal;
  background: var(--kt-accent-grad);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero__sub {
  font-size: 1.1rem; max-width: 56ch; color: var(--kt-text-mute);
}
.hero__cta { display: flex; gap: var(--kt-s-3); flex-wrap: wrap; }

/* ---------- card / panel ---------- */
.card {
  background: var(--kt-bg-elev);
  border: 1px solid var(--kt-line);
  border-radius: var(--kt-r-lg);
  padding: var(--kt-s-5);
}
.card--soft {
  background: var(--kt-bg-soft);
}

/* ---------- forms ---------- */
.field { display: grid; gap: 6px; margin-bottom: var(--kt-s-3); }
.field label { font-size: 13px; color: var(--kt-text-mute); font-weight: 600; }
.input, .textarea, .select {
  width: 100%;
  padding: 12px 14px;
  background: var(--kt-bg-soft);
  border: 1px solid var(--kt-line-strong);
  border-radius: var(--kt-r-md);
  color: var(--kt-text);
  font: inherit;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.input:focus, .textarea:focus, .select:focus {
  outline: none;
  border-color: var(--kt-primary);
  box-shadow: 0 0 0 4px rgba(32,144,224,0.22);
}
.textarea { resize: vertical; min-height: 96px; }
.help { font-size: 12px; color: var(--kt-text-dim); }
.error-text { color: var(--kt-danger); font-size: 13px; }

/* ---------- auth card ---------- */
.auth-card {
  max-width: 420px;
  margin: var(--kt-s-7) auto;
}
.auth-card h1 { font-size: 2rem; }
.auth-divider {
  display: flex; align-items: center; gap: 12px;
  color: var(--kt-text-dim); font-size: 12px;
  margin: var(--kt-s-4) 0;
}
.auth-divider::before, .auth-divider::after {
  content: ""; flex: 1; height: 1px; background: var(--kt-line);
}
.oauth-row { display: grid; gap: 10px; }
.oauth-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%;
  padding: 12px 14px;
  background: #fff;
  color: #111;
  border: 0;
  border-radius: var(--kt-r-md);
  font: inherit; font-weight: 600;
  cursor: pointer;
}
.oauth-btn svg { width: 18px; height: 18px; }
.oauth-btn--apple { background: #000; color: #fff; border: 1px solid var(--kt-line-strong); }

/* ---------- toast ---------- */
#toast-root {
  position: fixed; top: 80px; right: 20px; z-index: 100;
  display: flex; flex-direction: column; gap: 8px;
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  background: var(--kt-bg-elev);
  border: 1px solid var(--kt-line-strong);
  border-left-width: 3px;
  border-radius: var(--kt-r-md);
  color: var(--kt-text);
  font-size: 14px;
  box-shadow: var(--kt-shadow-md);
  min-width: 240px; max-width: 360px;
  transform: translateX(20px); opacity: 0;
  transition: transform .2s ease, opacity .2s ease;
}
.toast--in { transform: translateX(0); opacity: 1; }
.toast button {
  background: transparent; border: 0; color: var(--kt-text-mute);
  cursor: pointer; padding: 0; display: inline-flex;
}
.toast button svg { width: 16px; height: 16px; }
.toast--success { border-left-color: var(--kt-success); }
.toast--error   { border-left-color: var(--kt-danger); }
.toast--warning { border-left-color: var(--kt-warning); }
.toast--info    { border-left-color: var(--kt-info); }

/* ---------- modal ---------- */
.modal {
  position: fixed; inset: 0; z-index: 80;
  display: grid; place-items: center;
  pointer-events: none; opacity: 0;
  transition: opacity .18s ease;
}
.modal--in { opacity: 1; pointer-events: auto; }
.modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.modal__card {
  position: relative;
  width: min(92vw, 480px);
  background: var(--kt-bg-elev);
  border: 1px solid var(--kt-line-strong);
  border-radius: var(--kt-r-lg);
  box-shadow: var(--kt-shadow-lg);
  transform: translateY(8px) scale(0.98);
  transition: transform .18s ease;
}
.modal--in .modal__card { transform: translateY(0) scale(1); }
.modal__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--kt-s-4) var(--kt-s-5);
  border-bottom: 1px solid var(--kt-line);
}
.modal__header h2 { margin: 0; font-size: 1.15rem; }
.modal__close {
  background: transparent; border: 0; color: var(--kt-text-mute);
  cursor: pointer; display: inline-flex; padding: 4px;
}
.modal__close svg { width: 20px; height: 20px; }
.modal__body { padding: var(--kt-s-5); }
.modal__message { margin: 0; color: var(--kt-text); }
.modal__footer {
  display: flex; justify-content: flex-end; gap: var(--kt-s-2);
  padding: var(--kt-s-3) var(--kt-s-5) var(--kt-s-5);
}

/* ---------- skeleton / empty ---------- */
.skeleton { display: grid; gap: 12px; }
.skeleton__row {
  height: 56px; border-radius: var(--kt-r-md);
  background: linear-gradient(90deg, rgba(255,255,255,0.03), rgba(255,255,255,0.06), rgba(255,255,255,0.03));
  background-size: 200% 100%;
  animation: kt-shimmer 1.4s linear infinite;
}
@keyframes kt-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

.empty {
  text-align: center;
  padding: var(--kt-s-7) var(--kt-s-4);
  color: var(--kt-text-mute);
}
.empty__icon {
  width: 56px; height: 56px;
  margin: 0 auto var(--kt-s-3);
  display: grid; place-items: center;
  background: var(--kt-bg-soft);
  border: 1px solid var(--kt-line);
  border-radius: var(--kt-r-lg);
  color: var(--kt-primary-300);
}
.empty__icon svg { width: 28px; height: 28px; }
.empty h3 { color: var(--kt-text); margin-bottom: 6px; }

/* ---------- footer ---------- */
.footer {
  text-align: center;
  padding: var(--kt-s-4);
  color: var(--kt-text-dim);
  font-size: 12px;
  border-top: 1px solid var(--kt-line);
}

/* ---------- focus ring ---------- */
:focus-visible {
  outline: 2px solid var(--kt-primary);
  outline-offset: 2px;
  border-radius: 6px;
}

/* =============================================================================
   Phase 2.1 — events list, form, detail
   ============================================================================= */

/* ---------- filter row ---------- */
.filter-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 12px;
}
@media (max-width: 720px) {
  .filter-row { grid-template-columns: 1fr; }
}

/* ---------- event card grid ---------- */
.event-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}
.event-card {
  display: flex; flex-direction: column;
  background: var(--kt-bg-elev);
  border: 1px solid var(--kt-line);
  border-radius: var(--kt-r-lg);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform .15s ease, border-color .15s ease, box-shadow .2s ease;
}
.event-card:hover {
  transform: translateY(-2px);
  border-color: var(--kt-primary);
  box-shadow: 0 10px 30px rgba(32,144,224,0.18);
}
.event-card__media {
  aspect-ratio: 16 / 9;
  background: var(--kt-bg-soft);
  overflow: hidden;
}
.event-card__media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.event-card__no-flyer {
  width: 100%; height: 100%;
  display: grid; place-items: center;
  color: var(--kt-text-dim);
}
.event-card__no-flyer svg { width: 36px; height: 36px; }
.event-card__body {
  padding: 16px 18px;
  display: grid; gap: 4px;
}
.event-card__cat {
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--kt-primary-300);
  font-weight: 700;
}
.event-card h3 {
  font-size: 1.1rem; line-height: 1.25; margin: 2px 0 4px;
}
.event-card__meta { margin: 0; font-size: 13px; color: var(--kt-text); }
.event-card__place { margin: 0; font-size: 13px; color: var(--kt-text-mute); }
.event-card__counts {
  display: flex; gap: 12px;
  margin-top: 6px;
  font-size: 12px; color: var(--kt-text-dim);
}

/* ---------- admin list ---------- */
.admin-list {
  display: grid; gap: 8px;
}
.admin-list__row {
  display: grid;
  grid-template-columns: 56px 1fr auto 18px;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  background: var(--kt-bg-elev);
  border: 1px solid var(--kt-line);
  border-radius: var(--kt-r-md);
  text-decoration: none;
  color: inherit;
  transition: border-color .15s ease, transform .12s ease;
}
.admin-list__row:hover { border-color: var(--kt-primary); transform: translateX(2px); }
.admin-list__thumb {
  width: 56px; height: 56px;
  border-radius: var(--kt-r-sm);
  overflow: hidden;
  background: var(--kt-bg-soft);
  display: grid; place-items: center;
  color: var(--kt-text-dim);
}
.admin-list__thumb img { width: 100%; height: 100%; object-fit: cover; }
.admin-list__thumb svg { width: 22px; height: 22px; }
.admin-list__main strong { display:block; }
.admin-list__meta { font-size: 12px; color: var(--kt-text-mute); margin-top: 2px; }
.admin-list__status { text-align: right; display: grid; gap: 4px; }
.admin-list__chevron { color: var(--kt-text-dim); }
.admin-list__chevron svg { width: 18px; height: 18px; }

/* ---------- status pills ---------- */
.status-pill {
  display: inline-block;
  padding: 2px 10px;
  border-radius: var(--kt-r-pill);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.status-pill--published       { background: rgba(34,197,94,0.15);  color: #6ee7a8; border: 1px solid rgba(34,197,94,0.3); }
.status-pill--draft           { background: rgba(251,191,36,0.12); color: #fde68a; border: 1px solid rgba(251,191,36,0.3); }
.status-pill--pending_review  { background: rgba(56,189,248,0.15); color: #93d5f5; border: 1px solid rgba(56,189,248,0.3); }
.status-pill--approved        { background: rgba(56,189,248,0.15); color: #93d5f5; border: 1px solid rgba(56,189,248,0.3); }
.status-pill--rejected        { background: rgba(239,68,68,0.15);  color: #fca5a5; border: 1px solid rgba(239,68,68,0.3); }
.status-pill--cancelled       { background: rgba(154,154,163,0.15);color: var(--kt-text-mute); border: 1px solid rgba(154,154,163,0.3); }

/* ---------- event form ---------- */
.event-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 24px;
  align-items: start;
}
.event-form__main { display: grid; gap: 16px; min-width: 0; }
.event-form__side { display: grid; gap: 16px; position: sticky; top: 80px; }
.event-form .card h3 { margin-top: 0; }
@media (max-width: 920px) {
  .event-form { grid-template-columns: 1fr; }
  .event-form__side { position: static; }
}

/* ---------- toggle switch ---------- */
.switch {
  display: flex; align-items: center;
  gap: 10px;
  padding: 8px 0;
  cursor: pointer;
  user-select: none;
}
.switch input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  width: 40px; height: 22px;
  background: rgba(255,255,255,0.08);
  border: 1px solid var(--kt-line-strong);
  border-radius: var(--kt-r-pill);
  position: relative; cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
  flex: 0 0 40px;
}
.switch input[type="checkbox"]::after {
  content: ""; position: absolute;
  top: 2px; left: 2px;
  width: 16px; height: 16px;
  background: #fff;
  border-radius: 50%;
  transition: transform .18s ease;
}
.switch input[type="checkbox"]:checked {
  background: var(--kt-primary);
  border-color: var(--kt-primary);
}
.switch input[type="checkbox"]:checked::after {
  transform: translateX(18px);
}
.switch span { font-size: 14px; color: var(--kt-text); }

/* ---------- flyer upload ---------- */
.flyer-upload { display: grid; gap: 10px; }
.flyer-upload__preview {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--kt-bg-soft);
  border: 1px dashed var(--kt-line-strong);
  border-radius: var(--kt-r-md);
  overflow: hidden;
  display: grid; place-items: center;
}
.flyer-upload__preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.flyer-upload__placeholder {
  display: grid; place-items: center; gap: 6px;
  color: var(--kt-text-dim); font-size: 13px;
}
.flyer-upload__placeholder svg { width: 32px; height: 32px; }
.flyer-upload__placeholder em { font-style: normal; }
.flyer-upload__actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- event detail ---------- */
.event-detail { display: grid; gap: 24px; }
.event-detail__banner-actions {
  display: flex; gap: 10px; align-items: center;
}
.event-detail__hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 32px;
  align-items: center;
}
.event-detail__flyer {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--kt-r-xl);
  background: var(--kt-bg-soft);
  border: 1px solid var(--kt-line);
}
.event-detail__flyer--placeholder {
  display: grid; place-items: center;
  color: var(--kt-text-dim);
}
.event-detail__flyer--placeholder svg { width: 64px; height: 64px; }
.event-detail__heroinfo { display: grid; gap: 8px; }
.event-detail__title {
  margin: 4px 0;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.05;
}
.event-detail__when {
  margin: 0;
  font-size: 1.1rem;
  color: var(--kt-text);
  font-weight: 600;
}
.event-detail__where { margin: 0; color: var(--kt-text-mute); }
.event-detail__address { margin: 0; color: var(--kt-text-dim); font-size: 14px; }
.event-detail__counts {
  display: flex; gap: 18px;
  margin-top: 8px;
  font-size: 14px; color: var(--kt-text-mute);
}
.event-detail__counts strong { color: var(--kt-text); }
.event-detail__cta {
  display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap;
}
@media (max-width: 800px) {
  .event-detail__hero { grid-template-columns: 1fr; gap: 20px; }
  .event-detail__flyer { aspect-ratio: 16 / 9; }
}

/* =============================================================================
   Phase 2.2 — lightbox, RSVP, comments
   ============================================================================= */

/* ---------- lightbox ---------- */
.lightbox {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center;
  pointer-events: none; opacity: 0;
  transition: opacity .2s ease;
  padding: 24px;
}
.lightbox--in { opacity: 1; pointer-events: auto; }
.lightbox__backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.92);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.lightbox__img {
  position: relative; z-index: 1;
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
  object-fit: contain;
  border-radius: var(--kt-r-md);
  box-shadow: var(--kt-shadow-lg);
  transform: scale(0.98);
  transition: transform .2s ease;
}
.lightbox--in .lightbox__img { transform: scale(1); }
.lightbox__close {
  position: absolute; top: 16px; right: 16px; z-index: 2;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: rgba(255,255,255,0.10);
  border: 1px solid var(--kt-line-strong);
  border-radius: 50%;
  color: #fff; cursor: pointer;
  transition: background .15s ease;
}
.lightbox__close:hover { background: rgba(255,255,255,0.20); }
.lightbox__close svg { width: 22px; height: 22px; }

/* ---------- clickable flyer affordance ---------- */
.event-detail__flyer--clickable {
  position: relative;
  display: block; padding: 0; border: 1px solid var(--kt-line);
  background: var(--kt-bg-soft);
  cursor: zoom-in;
  overflow: hidden;
}
.event-detail__flyer--clickable img {
  width: 100%; height: 100%;
  aspect-ratio: 4 / 5; object-fit: cover; display: block;
  transition: transform .3s ease;
}
.event-detail__flyer--clickable:hover img { transform: scale(1.03); }
.event-detail__flyer-zoom {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 14px 18px;
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600;
  color: #fff;
  background: linear-gradient(to top, rgba(0,0,0,0.78), transparent);
  opacity: 0; transition: opacity .2s ease;
}
.event-detail__flyer-zoom em { font-style: normal; }
.event-detail__flyer-zoom svg { width: 16px; height: 16px; }
.event-detail__flyer--clickable:hover .event-detail__flyer-zoom,
.event-detail__flyer--clickable:focus-visible .event-detail__flyer-zoom {
  opacity: 1;
}
@media (max-width: 800px) {
  .event-detail__flyer--clickable img { aspect-ratio: 16 / 9; }
}

/* ---------- RSVP block ---------- */
.rsvp-block { display: grid; gap: 10px; margin-top: 16px; }
.rsvp-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.rsvp-row--counts { color: var(--kt-text-mute); font-size: 14px; }
.rsvp-row--counts strong { color: var(--kt-text); }
.rsvp-row--buttons { gap: 8px; }
.rsvp-row--buttons .btn { flex: 0 1 auto; }

/* ---------- comments ---------- */
.comments-compose {
  display: grid; gap: 8px;
  margin-bottom: 20px;
}
.comments-compose__actions {
  display: flex; justify-content: space-between; align-items: center;
}
.comments-compose__actions .help { margin: 0; }
.comments-compose--signed-out { padding: 4px 0; }

.comments-list { display: grid; gap: 16px; }
.comments-empty {
  text-align: center;
  padding: 24px 16px;
  color: var(--kt-text-dim);
  background: var(--kt-bg-soft);
  border-radius: var(--kt-r-md);
}

.comment {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 12px;
  align-items: start;
}
.comment__body {
  background: var(--kt-bg-soft);
  border: 1px solid var(--kt-line);
  border-radius: var(--kt-r-md);
  padding: 12px 14px;
}
.comment__head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 6px;
  font-size: 13px;
}
.comment__head strong { color: var(--kt-text); }
.comment__head time { color: var(--kt-text-dim); }
.comment__del {
  margin-left: auto;
  background: transparent; border: 0;
  color: var(--kt-text-dim); cursor: pointer;
  display: inline-flex; padding: 4px;
  border-radius: 6px;
  transition: color .15s ease, background .15s ease;
}
.comment__del svg { width: 14px; height: 14px; }
.comment__del:hover { color: var(--kt-danger); background: rgba(239,68,68,0.1); }
.comment__content {
  margin: 0;
  color: var(--kt-text);
  white-space: pre-wrap;
  font-size: 14px;
  line-height: 1.55;
  word-wrap: break-word;
}

/* ---------- avatar ---------- */
.avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--kt-bg-soft);
  border: 1px solid var(--kt-line);
  display: grid; place-items: center;
  overflow: hidden;
  font-size: 13px; font-weight: 700;
  color: var(--kt-text);
  flex-shrink: 0;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar--initials {
  background: linear-gradient(135deg, var(--kt-primary) 0%, var(--kt-primary-700) 100%);
  color: #fff;
}

/* =============================================================================
   Phase 2.4a — tier management
   ============================================================================= */
.tier-list { display: grid; gap: 12px; }
.tier-card {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  gap: 16px;
  align-items: start;
  padding: 16px 18px;
  background: var(--kt-bg-elev);
  border: 1px solid var(--kt-line);
  border-radius: var(--kt-r-md);
}
.tier-card--inactive { opacity: 0.6; }
.tier-card__reorder {
  display: grid; gap: 4px; align-items: start;
}
.tier-reorder-btn {
  width: 28px; height: 22px;
  display: grid; place-items: center;
  background: transparent;
  border: 1px solid var(--kt-line-strong);
  border-radius: 6px;
  color: var(--kt-text-mute);
  cursor: pointer;
  transition: background .15s, color .15s, transform .12s;
}
.tier-reorder-btn:hover:not(:disabled) {
  background: rgba(255,255,255,0.04);
  color: var(--kt-text);
}
.tier-reorder-btn:disabled { opacity: 0.3; cursor: not-allowed; }
.tier-reorder-btn[data-up] svg { transform: rotate(180deg); }
.tier-reorder-btn svg { width: 14px; height: 14px; }

.tier-card__head { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.tier-card__head h3 { margin: 0; font-size: 1.1rem; }
.tier-card__desc { margin: 0 0 8px; color: var(--kt-text-mute); font-size: 14px; }
.tier-card__meta {
  display: flex; gap: 16px; flex-wrap: wrap;
  font-size: 13px; color: var(--kt-text-mute);
}
.tier-card__meta strong { color: var(--kt-text); font-size: 15px; }
.tier-card__actions {
  display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end;
  align-self: center;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

@media (max-width: 720px) {
  .tier-card { grid-template-columns: 1fr; }
  .tier-card__reorder { grid-auto-flow: column; justify-content: start; }
  .tier-card__actions { justify-content: flex-start; }
}

/* =============================================================================
   Phase 2.4a+ — public tier display (event detail page)
   ============================================================================= */
.tiers-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.tiers-header h2 { margin: 0; }

.tier-public-list {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 10px;
}
.tier-public {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 14px 16px;
  background: var(--kt-bg-soft);
  border: 1px solid var(--kt-line);
  border-radius: var(--kt-r-md);
  transition: border-color .15s ease, transform .12s ease;
}
.tier-public:not(.tier-public--disabled):hover {
  border-color: var(--kt-primary);
}
.tier-public--disabled { opacity: 0.55; }
.tier-public__head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 4px;
}
.tier-public__head strong {
  font-size: 1.05rem; color: var(--kt-text);
}
.tier-public__desc {
  margin: 0;
  color: var(--kt-text-mute);
  font-size: 13px;
  line-height: 1.4;
}
.tier-public__low {
  margin: 6px 0 0;
  color: var(--kt-warning);
  font-size: 12px;
  font-weight: 600;
}
.tier-public__price strong {
  font-family: var(--kt-font-display);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--kt-text);
}
.tier-public__badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: var(--kt-r-pill);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.tier-public__badge--inactive { background: rgba(154,154,163,0.15); color: var(--kt-text-mute); border: 1px solid rgba(154,154,163,0.3); }
.tier-public__badge--upcoming { background: rgba(56,189,248,0.15);  color: #93d5f5;          border: 1px solid rgba(56,189,248,0.3); }
.tier-public__badge--closed   { background: rgba(154,154,163,0.15); color: var(--kt-text-mute); border: 1px solid rgba(154,154,163,0.3); }
.tier-public__badge--soldout  { background: rgba(239,68,68,0.15);   color: #fca5a5;          border: 1px solid rgba(239,68,68,0.3); }

@media (max-width: 480px) {
  .tier-public { grid-template-columns: 1fr; gap: 8px; }
  .tier-public__price { text-align: left; }
}

/* =============================================================================
   Phase 2.4c — purchase UI + checkout + return screen + tickets
   ============================================================================= */

/* ---------- tier right column + quantity stepper ---------- */
.tier-public__right {
  display: flex; flex-direction: column;
  align-items: flex-end; gap: 10px;
}
.qty-stepper {
  display: inline-flex; align-items: center; gap: 0;
  background: var(--kt-bg-elev);
  border: 1px solid var(--kt-line-strong);
  border-radius: var(--kt-r-pill);
  overflow: hidden;
}
.qty-stepper__btn {
  width: 32px; height: 32px;
  background: transparent;
  border: 0;
  color: var(--kt-text);
  font-size: 18px; font-weight: 700;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.qty-stepper__btn:hover:not(:disabled) {
  background: rgba(255,255,255,0.06);
  color: var(--kt-primary-300);
}
.qty-stepper__btn:disabled { opacity: 0.3; cursor: not-allowed; }
.qty-stepper__count {
  min-width: 28px; text-align: center;
  font-weight: 700; font-size: 14px;
}
@media (max-width: 480px) {
  .tier-public__right { flex-direction: row; justify-content: space-between; width: 100%; }
}

/* ---------- checkout bar ---------- */
.checkout-bar {
  display: flex; align-items: center; gap: 16px;
  margin-top: 18px;
  padding: 14px 16px;
  background: linear-gradient(135deg, rgba(32,144,224,0.10) 0%, rgba(29,78,160,0.10) 100%);
  border: 1px solid var(--kt-primary);
  border-radius: var(--kt-r-md);
}
.checkout-bar__main {
  flex: 1;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
}
.checkout-bar__total {
  font-family: var(--kt-font-display);
  font-size: 1.25rem;
}
.checkout-bar__btn { flex: 0 0 auto; }
@media (max-width: 600px) {
  .checkout-bar { flex-direction: column; align-items: stretch; }
  .checkout-bar__btn { width: 100%; }
}

/* ---------- checkout modal summary ---------- */
.checkout-summary {
  margin-bottom: 16px;
  padding: 14px;
  background: var(--kt-bg-soft);
  border-radius: var(--kt-r-md);
}
.checkout-summary hr {
  border: 0; border-top: 1px solid var(--kt-line); margin: 10px 0;
}
.checkout-line {
  display: flex; justify-content: space-between;
  font-size: 14px; padding: 3px 0;
  color: var(--kt-text-mute);
}
.checkout-line span:last-child { color: var(--kt-text); font-weight: 600; }
.checkout-line--total {
  font-size: 1.05rem;
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px solid var(--kt-line);
}
.checkout-line--total span { color: var(--kt-text); font-weight: 700; font-size: 1.1rem; }

/* ---------- payment return screen ---------- */
.payment-return {
  min-height: 60vh;
  display: grid; place-items: start center;
  padding: 24px 0;
}
.payment-return__card {
  max-width: 560px; width: 100%;
  text-align: center;
}
.payment-return__icon {
  width: 64px; height: 64px;
  margin: 0 auto 16px;
  display: grid; place-items: center;
  border-radius: 50%;
  font-size: 28px;
}
.payment-return__icon svg { width: 32px; height: 32px; }
.payment-return__icon--success { background: rgba(34,197,94,0.15); color: #6ee7a8; border: 2px solid rgba(34,197,94,0.4); }
.payment-return__icon--pending { background: rgba(56,189,248,0.15); color: #93d5f5; border: 2px solid rgba(56,189,248,0.4); }
.payment-return__icon--failed  { background: rgba(239,68,68,0.15); color: #fca5a5;  border: 2px solid rgba(239,68,68,0.4); }
.payment-return__spinner { font-size: 32px; color: var(--kt-primary); margin: 0 auto 8px; display: grid; place-items: center; }
.payment-return__spinner svg { width: 32px; height: 32px; }
.payment-return__total {
  margin-top: 8px;
  padding: 10px;
  background: var(--kt-bg-soft);
  border-radius: var(--kt-r-md);
}
.payment-return__actions {
  display: grid; gap: 8px;
  margin-top: 20px;
}

/* ---------- ticket cards (return + my tickets) ---------- */
.ticket-list, .my-tickets {
  display: grid; gap: 12px; margin: 20px 0;
}
.ticket-card {
  background: var(--kt-bg-soft);
  border: 1px solid var(--kt-line);
  border-radius: var(--kt-r-md);
  padding: 14px 16px;
  text-align: left;
}
.ticket-card--used { opacity: 0.6; }
.ticket-card__head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}
.ticket-card__head strong { font-size: 1rem; color: var(--kt-text); }
.ticket-card__status {
  padding: 2px 10px;
  border-radius: var(--kt-r-pill);
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  background: rgba(34,197,94,0.15); color: #6ee7a8;
  border: 1px solid rgba(34,197,94,0.3);
}
.ticket-card__status--used   { background: rgba(154,154,163,0.15); color: var(--kt-text-mute); border-color: rgba(154,154,163,0.3); }
.ticket-card__status--other  { background: rgba(239,68,68,0.15);   color: #fca5a5;            border-color: rgba(239,68,68,0.3); }
.ticket-card__qr {
  background: #fff;
  padding: 12px;
  border-radius: var(--kt-r-md);
  text-align: center;
}
.ticket-card__qr code {
  display: block;
  margin-top: 8px;
  font-size: 13px; font-weight: 700;
  letter-spacing: 0.06em;
  color: #111;
}
.ticket-card__qr a {
  display: inline-block;
  margin-top: 6px;
  color: var(--kt-primary-700) !important;
  font-weight: 600;
  font-size: 12px;
}
.ticket-card__qr-img {
  display: inline-block;
}
.ticket-card__qr-img img {
  display: block; margin: 0 auto;
  image-rendering: pixelated;
}

/* ---------- orders list ---------- */
.orders-list { display: grid; gap: 8px; }
.orders-list__row {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 14px 16px;
  background: var(--kt-bg-elev);
  border: 1px solid var(--kt-line);
  border-radius: var(--kt-r-md);
}
.orders-list__row--pending  { border-color: rgba(251,191,36,0.3); }
.orders-list__row--cancelled,
.orders-list__row--refunded { opacity: 0.65; }


/* =============================================================================
   Phase 3 — Scanner / check-in
   ============================================================================= */
.scanner-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.scanner-stat {
  display: grid; gap: 4px;
  padding: 16px;
  background: var(--kt-bg-elev);
  border: 1px solid var(--kt-line);
  border-radius: var(--kt-r-md);
}
.scanner-stat strong {
  font-family: var(--kt-font-display);
  font-size: 2rem;
  line-height: 1;
  color: var(--kt-text);
}
.scanner-stat span { font-size: 12px; color: var(--kt-text-mute); text-transform: uppercase; letter-spacing: 0.06em; }
.scanner-stat--pct strong {
  background: var(--kt-accent-grad);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.scanner-camera-card {
  text-align: center;
}
.scanner-camera__wrap {
  position: relative;
  margin: 0 auto;
  max-width: 480px;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #000;
  border-radius: var(--kt-r-md);
  overflow: hidden;
}
.scanner-camera {
  width: 100%; height: 100%;
  background: #000;
}
.scanner-camera video { width: 100% !important; height: 100% !important; object-fit: cover !important; }
.scanner-camera__overlay {
  position: absolute; inset: 0;
  pointer-events: none;
  display: grid; place-items: center;
}
.scanner-camera__frame {
  width: 60%; aspect-ratio: 1;
  border: 3px solid rgba(255,255,255,0.85);
  border-radius: 14px;
  box-shadow: 0 0 0 9999px rgba(0,0,0,0.35);
}
.scanner-camera__msg {
  margin-top: 12px;
  font-size: 14px;
  color: var(--kt-text-mute);
}

.scanner-manual {
  margin-top: 12px;
  text-align: left;
}
.scanner-manual summary {
  cursor: pointer; font-size: 14px; color: var(--kt-primary-300);
}

.recent-scans { display: grid; gap: 8px; }
.recent-scan {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 12px; align-items: center;
  padding: 10px 12px;
  background: var(--kt-bg-soft);
  border: 1px solid var(--kt-line);
  border-radius: var(--kt-r-md);
}
.recent-scan__icon {
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border-radius: 50%;
}
.recent-scan__icon svg { width: 16px; height: 16px; }
.recent-scan__time { font-size: 11px; color: var(--kt-text-dim); }
.recent-scan--success         { border-color: rgba(34,197,94,0.4); }
.recent-scan--success .recent-scan__icon { background: rgba(34,197,94,0.18); color: #6ee7a8; }
.recent-scan--already_used    { border-color: rgba(251,191,36,0.4); }
.recent-scan--already_used .recent-scan__icon { background: rgba(251,191,36,0.18); color: #fde68a; }
.recent-scan--wrong_event,
.recent-scan--voided,
.recent-scan--refunded,
.recent-scan--not_found,
.recent-scan--unauthorized,
.recent-scan--invalid_event,
.recent-scan--legacy,
.recent-scan--error           { border-color: rgba(239,68,68,0.4); }
.recent-scan--wrong_event .recent-scan__icon,
.recent-scan--voided .recent-scan__icon,
.recent-scan--refunded .recent-scan__icon,
.recent-scan--not_found .recent-scan__icon,
.recent-scan--unauthorized .recent-scan__icon,
.recent-scan--invalid_event .recent-scan__icon,
.recent-scan--legacy .recent-scan__icon,
.recent-scan--error .recent-scan__icon { background: rgba(239,68,68,0.18); color: #fca5a5; }

/* =============================================================================
   Mobile bottom navigation
   ============================================================================= */

/* Hide the bottom nav on desktop */
.bottom-nav { display: none; }

@media (max-width: 720px) {
  .bottom-nav {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 0;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 60;
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom)) 4px;
    background: rgba(11,11,13,0.92);
    backdrop-filter: saturate(140%) blur(14px);
    -webkit-backdrop-filter: saturate(140%) blur(14px);
    border-top: 1px solid var(--kt-line);
  }
  .bottom-nav__item {
    display: grid; place-items: center;
    gap: 2px;
    padding: 8px 4px;
    text-decoration: none;
    color: var(--kt-text-dim);
    font-size: 11px;
    font-weight: 600;
    border-radius: 10px;
    transition: color .15s ease, background .15s ease;
  }
  .bottom-nav__item:hover { color: var(--kt-text); }
  .bottom-nav__icon { line-height: 0; }
  .bottom-nav__icon svg { width: 22px; height: 22px; }
  .bottom-nav__label { letter-spacing: 0.02em; }
  .bottom-nav__item--active {
    color: var(--kt-primary-300);
    background: rgba(32,144,224,0.10);
  }

  /* Push content above the fixed bottom nav */
  .view {
    padding-bottom: calc(96px + env(safe-area-inset-bottom));
  }

  /* The footer becomes redundant on mobile when the bottom nav is there */
  .footer { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }

  /* Hide name text in the top bar's account button on mobile — bottom nav has Account */
  .topbar__actions .btn span:not(.visually-hidden) {
    display: none;
  }
  /* But keep "Sign in" / "Sign up" labels visible for signed-out users at top */
  .topbar__actions .btn--primary span,
  .topbar__actions a[href="#/signin"] span,
  .topbar__actions a[href="#/signup"] span {
    display: inline;
  }
}

/* =============================================================================
   Phase 4a — Orders dashboard
   ============================================================================= */
.orders-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.orders-summary__stat {
  padding: 16px;
  background: var(--kt-bg-elev);
  border: 1px solid var(--kt-line);
  border-radius: var(--kt-r-md);
  display: grid; gap: 4px;
}
.orders-summary__stat strong {
  font-family: var(--kt-font-display);
  font-size: 1.8rem;
  line-height: 1;
}
.orders-summary__stat span {
  font-size: 12px;
  color: var(--kt-text-mute);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.orders-table {
  display: grid;
  background: var(--kt-bg-elev);
  border: 1px solid var(--kt-line);
  border-radius: var(--kt-r-md);
  overflow: hidden;
}
.orders-table__head {
  display: grid;
  grid-template-columns: 1.3fr 1.6fr 1.8fr 0.9fr 0.9fr 0.9fr;
  gap: 12px;
  padding: 12px 16px;
  background: var(--kt-bg-soft);
  border-bottom: 1px solid var(--kt-line);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--kt-text-mute);
  font-weight: 700;
}
.orders-table__row {
  display: grid;
  grid-template-columns: 1.3fr 1.6fr 1.8fr 0.9fr 0.9fr 0.9fr;
  gap: 12px; align-items: center;
  padding: 14px 16px;
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--kt-line);
  color: inherit;
  font: inherit; text-align: left;
  cursor: pointer;
  transition: background .15s ease;
}
.orders-table__row:hover { background: rgba(255,255,255,0.02); }
.orders-table__row:last-child { border-bottom: 0; }
.orders-table__row--stuck { background: rgba(251,191,36,0.06); }
.orders-table__row--stuck:hover { background: rgba(251,191,36,0.10); }

@media (max-width: 920px) {
  .orders-table__head { display: none; }
  .orders-table__row {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "order status"
      "event event"
      "buyer total"
      "items total";
    row-gap: 6px;
  }
  .orders-table__row > div:nth-child(1) { grid-area: order; }
  .orders-table__row > div:nth-child(2) { grid-area: event; color: var(--kt-text-mute); font-size: 13px; }
  .orders-table__row > div:nth-child(3) { grid-area: buyer; }
  .orders-table__row > div:nth-child(4) { grid-area: items; font-size: 12px; color: var(--kt-text-mute); }
  .orders-table__row > div:nth-child(5) { grid-area: total; text-align: right; }
  .orders-table__row > div:nth-child(6) { grid-area: status; text-align: right; }
}

/* ---------- order detail modal ---------- */
.order-detail__head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
}
.order-detail__head code {
  font-size: 13px;
  color: var(--kt-text);
}
.order-detail__warning {
  padding: 12px 14px;
  background: rgba(251,191,36,0.08);
  border: 1px solid rgba(251,191,36,0.3);
  border-radius: var(--kt-r-md);
  margin-bottom: 16px;
}
.order-detail__warning strong { display: block; color: var(--kt-warning); margin-bottom: 4px; }
.order-detail__warning p { margin: 0 0 8px; color: var(--kt-text); font-size: 14px; }
.order-detail__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.order-detail__grid > div { font-size: 14px; }
.order-detail__grid strong { display: block; color: var(--kt-text); }
.order-detail__tickets { display: grid; gap: 6px; }
.order-detail__ticket {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px; align-items: center;
  padding: 8px 12px;
  background: var(--kt-bg-soft);
  border: 1px solid var(--kt-line);
  border-radius: var(--kt-r-sm);
  font-size: 13px;
}
.order-detail__ticket code { color: var(--kt-text); }

@media (max-width: 600px) {
  .order-detail__grid { grid-template-columns: 1fr; }
}

/* =============================================================================
   Phase 4b — Admin nav, reports, queue, tickets admin
   ============================================================================= */

/* ---------- admin sub-nav ---------- */
.admin-nav {
  display: flex;
  gap: 4px;
  padding: 4px;
  margin-bottom: 24px;
  background: var(--kt-bg-elev);
  border: 1px solid var(--kt-line);
  border-radius: var(--kt-r-pill);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.admin-nav::-webkit-scrollbar { display: none; }
.admin-nav__tab {
  display: inline-flex; align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: var(--kt-r-pill);
  font-size: 13px; font-weight: 600;
  color: var(--kt-text-mute);
  text-decoration: none;
  white-space: nowrap;
  transition: background .15s ease, color .15s ease;
}
.admin-nav__tab:hover { color: var(--kt-text); background: rgba(255,255,255,0.04); }
.admin-nav__tab svg { width: 16px; height: 16px; }
.admin-nav__tab--active {
  background: var(--kt-primary);
  color: #fff;
}
.admin-nav__tab--active:hover { background: var(--kt-primary); color: #fff; }

/* ---------- KPI row + reports grid ---------- */
.kpi-row { margin-bottom: 16px; }
.reports-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 16px;
}
.reports-grid .card h2 { margin-bottom: 16px; }

.report-table {
  display: grid;
  background: var(--kt-bg-soft);
  border: 1px solid var(--kt-line);
  border-radius: var(--kt-r-sm);
  overflow: hidden;
}
.report-table__head, .report-table__row {
  display: grid;
  grid-template-columns: 2fr 0.7fr 0.7fr 1fr;
  gap: 12px;
  padding: 10px 14px;
  align-items: center;
}
.report-table__head {
  background: var(--kt-bg-elev);
  border-bottom: 1px solid var(--kt-line);
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--kt-text-mute); font-weight: 700;
}
.report-table__row { border-bottom: 1px solid var(--kt-line); font-size: 13px; }
.report-table__row:last-child { border-bottom: 0; }

/* ---------- bar list (source/tier/status breakdowns) ---------- */
.bar-list { display: grid; gap: 10px; }
.bar-list__row {
  display: grid;
  grid-template-columns: 1fr 40px;
  gap: 10px;
  align-items: center;
}
.bar-list__label {
  grid-column: 1 / -1;
  display: flex; justify-content: space-between;
  font-size: 13px;
}
.bar-list__label strong { color: var(--kt-text); }
.bar-list__label span { color: var(--kt-text-mute); }
.bar-list__bar {
  grid-column: 1;
  height: 8px;
  background: rgba(255,255,255,0.05);
  border-radius: 999px;
  overflow: hidden;
}
.bar-list__fill {
  height: 100%;
  background: var(--kt-accent-grad);
  border-radius: 999px;
  transition: width .3s ease;
}
.bar-list__pct {
  grid-column: 2;
  text-align: right;
  font-size: 12px;
  color: var(--kt-text-mute);
  font-weight: 600;
}

/* ---------- approval queue ---------- */
.queue-list { display: grid; gap: 16px; }
.queue-card {
  display: grid;
  grid-template-columns: 120px 1fr auto;
  gap: 18px;
  align-items: start;
  padding: 16px;
  background: var(--kt-bg-elev);
  border: 1px solid var(--kt-line);
  border-radius: var(--kt-r-md);
}
.queue-card__media {
  width: 120px; aspect-ratio: 4/5;
  background: var(--kt-bg-soft);
  border-radius: var(--kt-r-sm);
  overflow: hidden;
  display: grid; place-items: center;
  color: var(--kt-text-dim);
}
.queue-card__media img { width: 100%; height: 100%; object-fit: cover; }
.queue-card__media svg { width: 32px; height: 32px; }
.queue-card__head { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.queue-card h3 { margin: 0 0 4px; }
.queue-card__desc {
  margin: 8px 0 0;
  color: var(--kt-text-mute);
  font-size: 13px;
  line-height: 1.5;
}
.queue-card__actions {
  display: grid; gap: 6px;
  min-width: 130px;
}
.queue-card__actions .btn { justify-content: center; }
@media (max-width: 720px) {
  .queue-card {
    grid-template-columns: 1fr;
  }
  .queue-card__media { width: 100%; max-width: 240px; }
  .queue-card__actions { grid-auto-flow: column; }
}

/* ---------- tickets admin table ---------- */
.tickets-admin { display: grid; gap: 4px; }
.tickets-admin__row {
  display: grid;
  grid-template-columns: 1.3fr 1.4fr 1.4fr 1fr 100px;
  gap: 14px; align-items: center;
  padding: 12px 14px;
  width: 100%;
  background: var(--kt-bg-elev);
  border: 1px solid var(--kt-line);
  border-radius: var(--kt-r-sm);
  font: inherit; text-align: left;
  cursor: pointer;
  color: inherit;
  transition: background .15s ease;
}
.tickets-admin__row:hover { background: rgba(255,255,255,0.02); }
.tickets-admin__row code { font-size: 13px; }
@media (max-width: 920px) {
  .tickets-admin__row {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
}

/* =============================================================================
   Phase 4c — Teams
   ============================================================================= */
.team-members, .team-invites, .team-requests { display: grid; gap: 8px; }

.team-member-row {
  display: grid;
  grid-template-columns: 40px 1fr 200px 40px;
  gap: 14px;
  align-items: center;
  padding: 12px 14px;
  background: var(--kt-bg-soft);
  border: 1px solid var(--kt-line);
  border-radius: var(--kt-r-md);
}
.team-member-row__main strong { display: block; }

.team-invite-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 12px 14px;
  background: var(--kt-bg-soft);
  border: 1px solid var(--kt-line);
  border-radius: var(--kt-r-md);
}
.team-invite-row__code {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.team-invite-row__code code {
  padding: 4px 10px;
  background: var(--kt-bg-elev);
  border: 1px solid var(--kt-line);
  border-radius: var(--kt-r-sm);
  font-size: 14px;
  letter-spacing: 0.08em;
}

.team-request-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 12px 14px;
  background: var(--kt-bg-soft);
  border: 1px solid rgba(56,189,248,0.3);
  border-radius: var(--kt-r-md);
}

.select--sm {
  padding: 6px 10px;
  font-size: 13px;
}

@media (max-width: 720px) {
  .team-member-row {
    grid-template-columns: 40px 1fr 40px;
    grid-template-areas:
      "avatar main remove"
      "role role role";
    row-gap: 8px;
  }
  .team-member-row > :nth-child(1) { grid-area: avatar; }
  .team-member-row > :nth-child(2) { grid-area: main; }
  .team-member-row > :nth-child(3) { grid-area: role; }
  .team-member-row > :nth-child(4) { grid-area: remove; }
  .team-invite-row { grid-template-columns: 1fr; }
  .team-request-row { grid-template-columns: 1fr; }
}

/* =============================================================================
   Phase 4d — Door sales surface
   ============================================================================= */
.sales-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 16px;
  align-items: start;
}
@media (max-width: 900px) { .sales-grid { grid-template-columns: 1fr; } }

.sales-tier-list { display: grid; gap: 10px; }
.sales-tier {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px 18px;
  align-items: center;
  padding: 14px 16px;
  background: var(--kt-bg-soft);
  border: 1px solid var(--kt-line);
  border-radius: var(--kt-r-md);
}
.sales-tier--disabled { opacity: 0.55; }
.sales-tier__head { grid-column: 1; }
.sales-tier__head strong { display: block; font-size: 1.05rem; color: var(--kt-text); }
.sales-tier__price {
  grid-column: 2;
  font-family: var(--kt-font-display);
  font-size: 1.2rem;
  font-weight: 700;
}
.sales-tier .qty-stepper {
  grid-column: 1 / -1;
  justify-self: end;
}

/* Large stepper for thumb-friendly tapping at the door */
.qty-stepper--lg .qty-stepper__btn { width: 44px; height: 44px; font-size: 22px; }
.qty-stepper--lg .qty-stepper__count { min-width: 40px; font-size: 16px; }

.sales-summary {
  position: sticky; top: 88px;
}

/* Segmented control for payment method */
.seg {
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 2px;
  padding: 3px;
  background: var(--kt-bg-elev);
  border: 1px solid var(--kt-line);
  border-radius: var(--kt-r-pill);
  width: 100%;
}
.seg__btn {
  padding: 8px 10px;
  background: transparent;
  border: 0;
  border-radius: var(--kt-r-pill);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--kt-text-mute);
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.seg__btn:hover { color: var(--kt-text); }
.seg__btn--active {
  background: var(--kt-primary);
  color: #fff;
}
.seg__btn--active:hover { color: #fff; }

/* =============================================================================
   Phase 4d — Print tickets (bulk outlet printing)
   ============================================================================= */
.prints-grid {
  display: grid;
  grid-template-columns: 1.1fr 1.1fr 1fr;
  gap: 16px;
  align-items: start;
}
@media (max-width: 1000px) {
  .prints-grid { grid-template-columns: 1fr; }
}

.template-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px;
}
.template-card {
  position: relative;
  display: grid; gap: 6px;
  padding: 8px;
  background: var(--kt-bg-soft);
  border: 2px solid var(--kt-line);
  border-radius: var(--kt-r-sm);
  cursor: pointer;
  font: inherit; text-align: left;
  color: inherit;
  transition: border-color .15s ease;
}
.template-card:hover { border-color: var(--kt-primary); }
.template-card--active { border-color: var(--kt-primary); background: rgba(32,144,224,0.06); }
.template-card img {
  width: 100%; aspect-ratio: 2/5.4; object-fit: cover;
  border-radius: 4px; background: #fff;
}
.template-card__body strong { font-size: 13px; display: block; }
.template-card__body span { font-size: 11px; }
.template-card__del {
  position: absolute; top: 4px; right: 4px;
  width: 26px; height: 26px;
  display: grid; place-items: center;
  background: rgba(0,0,0,0.5); border: 0; color: #fff;
  border-radius: 50%; cursor: pointer;
  opacity: 0; transition: opacity .15s ease, background .15s ease;
}
.template-card:hover .template-card__del { opacity: 1; }
.template-card__del:hover { background: var(--kt-danger); }
.template-card__del svg { width: 14px; height: 14px; }

.prints-preview-card {
  display: flex; flex-direction: column; align-items: center;
}
.prints-preview {
  width: 200px; height: 540px;
  background: #fff;
  border: 1px solid var(--kt-line);
  border-radius: var(--kt-r-sm);
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}

.prints-batch-success {
  border-color: rgba(34,197,94,0.4) !important;
  background: rgba(34,197,94,0.06);
}

.progress-bar {
  height: 6px;
  background: rgba(255,255,255,0.06);
  border-radius: 999px;
  overflow: hidden;
  margin-top: 6px;
}
.progress-bar__fill {
  height: 100%;
  background: var(--kt-accent-grad);
  transition: width .25s ease;
}

.batches-list { display: grid; gap: 8px; }
.batches-row {
  display: grid;
  grid-template-columns: 2fr 1.5fr auto;
  gap: 14px; align-items: center;
  padding: 12px 14px;
  background: var(--kt-bg-soft);
  border: 1px solid var(--kt-line);
  border-radius: var(--kt-r-md);
}
@media (max-width: 720px) {
  .batches-row { grid-template-columns: 1fr; gap: 6px; }
}

/* =============================================================================
   Phase 5a — Admin user directory
   ============================================================================= */
.users-list { display: grid; gap: 8px; }
.user-row {
  display: grid;
  grid-template-columns: 40px 1fr auto auto;
  gap: 14px; align-items: center;
  padding: 12px 14px;
  background: var(--kt-bg-elev);
  border: 1px solid var(--kt-line);
  border-radius: var(--kt-r-md);
}
.user-row__main strong { display: block; font-size: 14px; }
.user-row__role, .user-row__actions { display: flex; align-items: center; gap: 8px; }

.role-pill {
  display: inline-block;
  padding: 2px 10px;
  border-radius: var(--kt-r-pill);
  font-size: 11px; font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border: 1px solid transparent;
}
.role-pill--super_admin {
  background: linear-gradient(135deg, rgba(168,85,247,0.25) 0%, rgba(32,144,224,0.25) 100%);
  color: #d8b4fe;
  border-color: rgba(168,85,247,0.4);
}
.role-pill--admin {
  background: rgba(32,144,224,0.18);
  color: var(--kt-primary-300);
  border-color: rgba(32,144,224,0.35);
}
.role-pill--user {
  background: rgba(154,154,163,0.15);
  color: var(--kt-text-mute);
  border-color: rgba(154,154,163,0.30);
}

.role-log { display: grid; gap: 8px; }
.role-log__row {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: var(--kt-bg-soft);
  border: 1px solid var(--kt-line);
  border-radius: var(--kt-r-sm);
  font-size: 13px;
}

@media (max-width: 720px) {
  .user-row { grid-template-columns: 40px 1fr; row-gap: 8px; }
  .user-row__role, .user-row__actions { grid-column: 1 / -1; justify-content: flex-end; }
}

/* =============================================================================
   Archived event banner
   ============================================================================= */
.archived-banner {
  padding: 12px 16px;
  margin-bottom: 16px;
  background: rgba(154,154,163,0.10);
  border: 1px solid rgba(154,154,163,0.30);
  border-left: 4px solid var(--kt-text-mute);
  border-radius: var(--kt-r-md);
  color: var(--kt-text);
  font-size: 14px;
}
.archived-banner strong { display: block; margin-bottom: 2px; }

/* =============================================================================
   Google-only auth — single tall button
   ============================================================================= */
.oauth-btn--lg {
  padding: 14px 20px;
  font-size: 15px;
  font-weight: 600;
  width: 100%;
  justify-content: center;
}

/* =============================================================================
   Phase 6a — Sub-team tree view
   ============================================================================= */
.team-tree { display: grid; gap: 8px; }
.team-tree__node { display: grid; gap: 8px; }
.team-tree__children {
  display: grid; gap: 8px;
  margin-top: 4px;
  padding-left: 16px;
  border-left: 2px solid rgba(32,144,224,0.25);
}

/* =============================================================================
   Phase 6b — Staff badge in team UI
   ============================================================================= */
.staff-badge {
  display: inline-flex; align-items: center; gap: 4px;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: var(--kt-r-pill);
  background: linear-gradient(135deg, rgba(168,85,247,0.20) 0%, rgba(32,144,224,0.20) 100%);
  color: #d8b4fe;
  border: 1px solid rgba(168,85,247,0.35);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.staff-badge svg {
  width: 11px; height: 11px;
}

/* =============================================================================
   Phase 6c — Allocations
   ============================================================================= */
.allocation-list { display: grid; gap: 12px; }
.allocation-node { display: grid; gap: 8px; }
.allocation-row {
  display: grid;
  grid-template-columns: 2fr 1.4fr auto;
  gap: 14px; align-items: center;
  padding: 12px 14px;
  background: var(--kt-bg-soft);
  border: 1px solid var(--kt-line);
  border-radius: var(--kt-r-md);
}
.allocation-row--inactive { opacity: 0.5; }
.allocation-row__main strong { display: inline-block; font-size: 14px; }
.allocation-row__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px; text-align: center;
}
.allocation-row__stats strong {
  display: block; font-size: 18px; font-weight: 700; color: var(--kt-text);
}
.allocation-row__actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }

.allocation-children {
  margin-top: 4px;
  padding-left: 16px;
  border-left: 2px solid rgba(32,144,224,0.25);
  display: grid; gap: 8px;
}

@media (max-width: 720px) {
  .allocation-row { grid-template-columns: 1fr; row-gap: 8px; }
  .allocation-row__stats { grid-column: 1 / -1; }
  .allocation-row__actions { grid-column: 1 / -1; justify-content: flex-start; }
}

/* =============================================================================
   Phase 6d — Phone-to-phone sales (mobile-first)
   ============================================================================= */
.sell-cards {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.sell-card {
  display: grid; gap: 8px;
  padding: 16px;
  background: var(--kt-bg-elev);
  border: 1px solid var(--kt-line);
  border-radius: var(--kt-r-md);
  cursor: pointer; text-align: left; font: inherit; color: inherit;
  transition: border-color .15s ease, transform .15s ease;
}
.sell-card:hover:not(:disabled) {
  border-color: var(--kt-primary);
  transform: translateY(-1px);
}
.sell-card--disabled { opacity: 0.45; cursor: not-allowed; }
.sell-card__head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.sell-card__head strong { font-size: 17px; }
.sell-card__price { font-weight: 700; color: var(--kt-primary-300); font-size: 17px; }
.sell-card__sub { font-size: 12px; color: var(--kt-text-mute); }
.sell-card__stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; text-align: center;
  padding-top: 8px; border-top: 1px solid var(--kt-line);
}
.sell-card__stats strong { display: block; font-size: 18px; font-weight: 700; }
.sell-card__stats .help { font-size: 11px; }

/* Sale form modal */
.sell-form { display: grid; gap: 12px; }
.sell-form__hd {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 14px;
  background: var(--kt-bg-soft);
  border-radius: var(--kt-r-sm);
}
.qty-stepper { display: flex; gap: 6px; align-items: center; }
.qty-stepper .input { text-align: center; max-width: 100px; }
.qty-stepper button { min-width: 36px; }
.sf-total { display: flex; justify-content: space-between; align-items: center; margin: 8px 0 4px; }
.sf-total label { font-size: 14px; color: var(--kt-text-mute); margin: 0; }
.sf-total-amount { font-size: 24px; font-weight: 700; color: var(--kt-primary-300); }

.sf-pay-grid { display: grid; gap: 10px; }
.sf-pay-btn {
  display: grid; gap: 4px;
  padding: 16px 18px;
  border: 1px solid var(--kt-line);
  border-radius: var(--kt-r-md);
  background: var(--kt-bg-elev);
  color: var(--kt-text);
  text-align: left;
  font: inherit;
  cursor: pointer;
  transition: border-color .15s ease, transform .15s ease;
}
.sf-pay-btn:hover:not(:disabled) {
  border-color: var(--kt-primary);
  transform: translateY(-1px);
}
.sf-pay-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.sf-pay-btn__title { font-weight: 700; font-size: 15px; }
.sf-pay-btn__sub { font-size: 12px; color: var(--kt-text-mute); }
.sf-pay-btn--cash   { border-color: rgba(34,197,94,0.4); }
.sf-pay-btn--cash:hover:not(:disabled)   { border-color: rgba(34,197,94,0.8); }
.sf-pay-btn--link   { border-color: rgba(56,189,248,0.4); }
.sf-pay-btn--link:hover:not(:disabled)   { border-color: rgba(56,189,248,0.8); }
.sf-pay-btn--direct { border-color: rgba(168,85,247,0.4); }
.sf-pay-btn--direct:hover:not(:disabled) { border-color: rgba(168,85,247,0.8); }

/* Receipt */
.receipt-card { max-width: 600px; margin: 0 auto; }
.receipt-card--success { border-color: rgba(34,197,94,0.4); background: rgba(34,197,94,0.06); }
.receipt-card--direct  { border-color: rgba(168,85,247,0.4); }
.receipt-icon {
  width: 48px; height: 48px;
  display: grid; place-items: center;
  background: rgba(34,197,94,0.20); color: var(--kt-success);
  border-radius: 50%;
}
.receipt-icon svg { width: 24px; height: 24px; }
.receipt-link-box {
  padding: 10px 12px;
  background: var(--kt-bg-soft);
  border: 1px solid var(--kt-line);
  border-radius: var(--kt-r-sm);
  word-break: break-all;
  font-size: 12px;
  margin: 12px 0;
}
.sf-share-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px;
}

/* =============================================================================
   Phase 6e — Ticket template picker
   ============================================================================= */
.tpl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 8px;
}
.tpl-swatch {
  display: grid; gap: 4px;
  padding: 6px;
  background: var(--kt-bg-soft);
  border: 2px solid var(--kt-line);
  border-radius: var(--kt-r-sm);
  cursor: pointer;
  font: inherit; color: inherit;
  transition: border-color .15s ease;
}
.tpl-swatch:hover { border-color: var(--kt-primary); }
.tpl-swatch--active {
  border-color: var(--kt-primary);
  background: rgba(32,144,224,0.08);
}
.tpl-swatch img {
  width: 100%; aspect-ratio: 9/16; object-fit: cover;
  border-radius: 4px;
  background: #fff;
}
.tpl-swatch span {
  font-size: 11px;
  text-align: center;
  text-transform: capitalize;
  color: var(--kt-text-mute);
}