/* ============================================================
   App-specific additions for the PHP build.
   Kept here (not inline) so the markup stays clean.
   ============================================================ */

/* Layout offsets used in sidebar nav-section gaps */
.nav-section.gap-top { margin-top: 8px; }

/* Stat cards slot tweaks */
.stats-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stats-grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Toast — pinned bottom-left regardless of page direction (Hebrew RTL flips
   inset-inline-start to the right, which we don't want here). Auto-dismissed
   from app.js after 6s by adding the .toast-leaving class. */
.toast {
  position: fixed;
  bottom: 24px;
  left: 24px;
  background: var(--text);
  color: #fff;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 13px;
  box-shadow: var(--shadow-pop);
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 100;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.toast.toast-leaving { opacity: 0; transform: translateY(8px); }
.toast.error { background: var(--red); }
.toast.warning { background: var(--amber); }
.toast .icon { color: #86efac; }

/* ── Setup-checklist widget (floating, bottom-LEFT, clear of the RTL sidebar) ─ */
.setup-widget {
  position: fixed;
  bottom: 68px; /* clear the site footer when scrolled to the bottom */
  left: 24px;
  z-index: 95;
  display: flex;
  flex-direction: column-reverse; /* panel pops ABOVE the fab */
  align-items: flex-start;
}

/* Collapsed = a pill with a progress RING + % (visible when closed) + label */
.setup-fab {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 16px 7px 7px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.setup-fab:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22); }
.setup-fab-ringwrap { position: relative; width: 40px; height: 40px; flex: 0 0 auto; display: inline-flex; }
.setup-fab-ring { width: 40px; height: 40px; transform: rotate(-90deg); }
.setup-fab-track { fill: none; stroke: var(--surface-2); stroke-width: 3.4; }
.setup-fab-prog {
  fill: none; stroke: var(--accent); stroke-width: 3.4; stroke-linecap: round;
  stroke-dasharray: 100; transition: stroke-dashoffset 0.6s ease;
}
.setup-fab-pct {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  direction: ltr; /* keep "50%" — number then percent, not "%50" */
  font-size: 12px; font-weight: 800; color: var(--text);
}
.setup-fab-pct small { font-size: 8px; font-weight: 600; margin-inline-start: 1px; }
.setup-fab-label { font-size: 13px; font-weight: 700; color: var(--text); white-space: nowrap; }

/* Expanded panel */
.setup-panel {
  display: none;
  width: min(344px, calc(100vw - 32px));
  margin-bottom: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.20);
  overflow: hidden;
}
.setup-widget.open .setup-panel { display: block; margin-bottom: 0; }
.setup-widget.open .setup-fab { display: none; } /* panel has its own header+close — no redundant pill above it */
.setup-panel-head {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}
.setup-head-ring {
  width: 46px; height: 46px; flex: 0 0 auto; border-radius: 50%;
  background: conic-gradient(var(--accent) calc(var(--pct) * 1%), var(--border) 0);
  display: grid; place-items: center;
}
.setup-head-ring::before {
  content: ''; grid-area: 1 / 1;
  width: 34px; height: 34px; border-radius: 50%; background: var(--surface);
}
.setup-head-pct { grid-area: 1 / 1; direction: ltr; font-size: 12px; font-weight: 800; color: var(--text); z-index: 1; }
.setup-head-text { margin-inline-end: auto; min-width: 0; }
.setup-head-text strong { font-size: 14px; color: var(--text); display: block; }
.setup-panel-sub { font-size: 11px; color: var(--text-2); margin-top: 2px; line-height: 1.4; }
.setup-panel-close {
  background: none; border: none; color: var(--text-2); align-self: flex-start;
  cursor: pointer; padding: 4px; display: inline-flex; border-radius: 8px;
}
.setup-panel-close:hover { background: var(--border); color: var(--text); }

.setup-panel-body { padding: 4px 10px 12px; max-height: min(58vh, 420px); overflow-y: auto; }
.setup-group-title {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em;
  color: var(--text-2); padding: 12px 6px 4px;
}
.setup-list { list-style: none; margin: 0; padding: 0; }
.setup-item { display: flex; align-items: center; gap: 10px; padding: 8px 6px; border-radius: 10px; }
.setup-item:hover { background: var(--surface-2); }
.setup-check {
  flex: 0 0 20px; width: 20px; height: 20px;
  border: 1.6px solid var(--border); border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
}
.setup-item.done .setup-check { background: var(--green); border-color: var(--green); }
.setup-check svg { stroke: #fff; }
.setup-item-main { display: flex; flex-direction: column; text-decoration: none; flex: 1; min-width: 0; }
.setup-item-label { color: var(--text); font-weight: 600; font-size: 12.5px; }
.setup-item.done .setup-item-label { color: var(--text-2); }
.setup-item-hint { color: var(--text-2); font-size: 11px; margin-top: 1px; }
.setup-item.done .setup-item-hint { opacity: 0.7; }
.setup-item-go { flex: 0 0 auto; display: inline-flex; color: var(--text-2); opacity: 0.45; }
.setup-item:hover .setup-item-go { opacity: 1; color: var(--accent); }

@media (max-width: 600px) {
  .setup-widget { left: 12px; bottom: 80px; } /* mobile footer is taller */
  .setup-fab-label { display: none; }
  .setup-fab { padding: 7px; }
}

/* Inline spinner for submit buttons in a loading state (data-loading forms). */
.spinner {
  display: inline-block;
  width: 12px; height: 12px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  vertical-align: -2px;
  margin-inline-end: 6px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Logo preview shown inside the tenant edit modal — sized big enough that
   the EyeDropper can land a precise pixel on the brand colors. */
.tenant-logo-preview {
  margin-bottom: 10px;
  padding: 16px;
  background: #f5f5f4;
  border: 1px solid var(--border);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tenant-logo-preview img {
  max-height: 160px;
  max-width: 100%;
  width: auto;
  display: block;
  object-fit: contain;
}

/* Tenant brand gradient picker (owner → tenants modal). Vertical stack:
   each picker is its own row with swatch + pipette + hex readout; the
   gradient preview sits below as a wide strip so the user can see the
   final gradient applied to the RSVP hero. */
.gradient-pickers {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.gradient-pick {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.gradient-pick-label { font-size: 11px; color: var(--text-3); font-weight: 600; }
.gradient-pick-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
/* Style the native color input so the swatch fills the box and updates
   reliably when JS sets .value. Without the ::-webkit-color-swatch rules
   some Chromium versions keep an inner border/padding that hides the change. */
.gradient-pick input[type="color"] {
  width: 56px;
  height: 40px;
  padding: 2px;
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
}
.gradient-pick input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.gradient-pick input[type="color"]::-webkit-color-swatch {
  border: none;
  border-radius: 6px;
}
.gradient-pick input[type="color"]::-moz-color-swatch {
  border: none;
  border-radius: 6px;
}
.gradient-pick .eyedrop {
  padding: 4px 8px;
  min-height: 0;
}
.gradient-pick-hex {
  font-size: 12px;
  color: var(--text-2);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.gradient-preview {
  border-radius: 10px;
  border: 1px solid var(--border);
  min-height: 56px;
  margin-top: 4px;
}

/* Inline page notice (e.g. non-mobile upload warning on /approved). */
.notice {
  display: flex;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 10px;
  margin-bottom: 16px;
}
.notice-warning {
  background: var(--amber-soft);
  border: 1px solid var(--amber-border);
  color: var(--amber);
}
.notice-icon { flex-shrink: 0; display: flex; align-items: flex-start; padding-top: 1px; }
.notice-body { flex: 1; min-width: 0; }
.notice-title { font-weight: 600; font-size: 13px; margin-bottom: 2px; }
.notice-desc  { font-size: 12px; opacity: 0.9; margin-bottom: 8px; }
.notice-list  { display: flex; flex-wrap: wrap; gap: 6px; }
.notice-chip  {
  display: inline-block;
  background: #fff;
  border: 1px solid var(--amber-border);
  color: var(--amber);
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-family: var(--font-mono, ui-monospace, monospace);
  direction: ltr;
}

/* Page actions row */
.page-actions .icon { color: inherit; }

/* Capacity row sub-labels (used in dashboard) */
.capacity-row .label-sm { font-size: 12px; color: var(--text-3); font-weight: 500; }
.capacity-row .num.muted-on-low { color: var(--text); }
.capacity-row .num.muted-on-low.danger { color: var(--red); }

/* Funnel row tail percent */
.funnel-row .num .pct {
  font-size: 11px;
  color: var(--text-3);
  margin-inline-start: 6px;
  font-weight: 400;
}

/* Reused header-only CSS moved out of inline */
.row-flex { display: flex; }
.row-flex.gap-6 { gap: 6px; }
.row-flex.gap-8 { gap: 8px; }
.row-flex.gap-12 { gap: 12px; }
.row-flex.wrap { flex-wrap: wrap; }
.row-flex.center { align-items: center; }
.row-flex.between { justify-content: space-between; }
.row-flex.end { justify-content: flex-end; }
.col-flex { display: flex; flex-direction: column; }
.gap-2 { gap: 2px; }
.gap-4 { gap: 4px; }
.mt-1 { margin-top: 4px; }
.mt-2 { margin-top: 8px; }
.mt-3 { margin-top: 12px; }
.mt-4 { margin-top: 16px; }
.mt-auto { margin-top: auto; }
.ms-auto { margin-inline-start: auto; }
.ml-6 { margin-left: 6px; }

/* Sidebar logout button */
.sidebar-logout {
  border: none;
  background: transparent;
  color: var(--text-3);
  cursor: pointer;
  padding: 6px;
  border-radius: 4px;
}
.sidebar-logout:hover { background: var(--surface-3); color: var(--text); }

/* Approved-list pagination row */
.pager-row {
  padding: 10px 14px;
  border-top: 1px solid var(--divider);
  font-size: 12px;
  color: var(--text-3);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Dashboard mini chart hour labels */
.minibar-hours {
  display: flex;
  justify-content: space-between;
  margin-top: 4px;
  font-size: 11px;
  color: var(--text-3);
}

/* Selection-bar wrapper */
.selection-wrap { padding: 12px; }

/* Group card scheduled meta */
.group-meta-low {
  font-size: 11px;
  color: var(--text-3);
  margin-top: 4px;
}

/* Schedule item layout (groups schedule list) */
.schedule-card {
  display: grid;
  grid-template-columns: 12px 1fr auto auto;
  gap: 12px;
  padding: 10px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  align-items: center;
}

/* Stat card variant used on the admin page */
.stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.stat-card .label { font-size: 12px; color: var(--text-3); font-weight: 500; }
.stat-card .value {
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.stat-card .value.green { color: var(--green); }
.stat-card .value.muted { color: var(--text-3); }

/* Roles legend grid */
.roles-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.role-tile {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  background: var(--surface-2);
}
.role-tile .desc {
  font-size: 12px;
  color: var(--text-3);
  line-height: 1.5;
  margin-top: 8px;
}

/* Filter chips wrapper used in admin */
.chips { display: inline-flex; gap: 6px; flex-wrap: wrap; margin-inline-start: 8px; }
.chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  font-size: 12.5px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--text-2);
  cursor: pointer;
}
.chip:hover { background: var(--surface-2); }
.chip.active { background: var(--text); color: #fff; border-color: var(--text); }

/* Audit row (admin) */
.audit-row {
  display: grid;
  grid-template-columns: 24px 1fr auto;
  gap: 10px;
  padding: 10px 0;
  align-items: center;
  border-bottom: 1px solid var(--divider);
}
.audit-row:last-child { border-bottom: none; }
.audit-row .icon-wrap {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent);
  display: grid; place-items: center;
}
.audit-row .text { font-size: 13px; color: var(--text); }
.audit-row .text .target { color: var(--text-3); }
.audit-row .time { font-size: 12px; color: var(--text-3); font-variant-numeric: tabular-nums; }

/* Phone preview (thank-you) */
.phone-preview {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px;
}
.phone-preview .meta {
  font-size: 10.5px;
  color: var(--text-3);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 8px;
  text-align: center;
}
.phone-preview .body {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--text);
  white-space: pre-wrap;
}
.phone-preview .meter {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-size: 11px;
  color: var(--text-3);
}

/* WhatsApp phone mockup — a narrow portrait device (~9:19) so the message
   preview reads like a real chat, not a tablet. Applied as .phone-preview.wa-phone
   on both the templates structure preview and the send preview. */
.wa-phone {
  width: 320px;
  max-width: 100%;
  margin: 0 auto;
  padding: 11px;
  background: #0b141a;
  border-radius: 40px;
  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.28);
  position: relative;
}
.wa-phone .meta {
  color: #fff;
  background: #075e54;
  border-radius: 30px 30px 0 0;
  margin: 0;
  padding: 16px 14px 10px;
  text-transform: none;
  letter-spacing: 0;
  font-size: 12.5px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
/* Speaker notch over the green contact bar. */
.wa-phone .meta::before {
  content: "";
  position: absolute;
  top: 5px;
  left: 50%;
  transform: translateX(-50%);
  width: 46px;
  height: 4px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.4);
}
.wa-phone .wa-screen {
  background: #e5ddd5;
  background-image: linear-gradient(rgba(229, 221, 213, 0.92), rgba(229, 221, 213, 0.92));
  min-height: 480px;
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.wa-phone .meter {
  background: #f0f0f0;
  color: #54656f;
  border-radius: 0 0 30px 30px;
  margin: 0;
  padding: 12px 16px;
}

/* Copy-to-clipboard chip ([data-copy].copy-btn). The single global click
   handler in app.js flashes the .copied state for ~1.5s without clobbering the
   chip's icon markup (legacy [data-copied] buttons still swap innerHTML). */
.copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--text);
  font-size: 12.5px;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.copy-btn:hover { border-color: var(--text-3); background: var(--surface); }
.copy-btn code { direction: ltr; font-family: var(--mono, ui-monospace, monospace); }
.copy-btn.copied {
  background: #f0fdf4;
  border-color: #bbf7d0;
  color: #166534;
}

/* Shared bulk-send progress modal (window.glBuildProgressModal). The fill bar
   animates a barber-pole stripe so it reads as "working" even between chunks. */
.gl-progress-spinner { display: flex; justify-content: center; margin-bottom: 8px; }
.gl-progress-track {
  height: 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 99px;
  overflow: hidden;
  margin: 14px 0 6px;
}
.gl-progress-fill {
  height: 100%;
  width: 0%;
  /* Brand gradient underlay + the barber-pole stripe layered on top so the bar
     still reads as "working" between chunks. Underlay matches the coral end so
     the 1rem stripe shift never reveals an off-brand edge. */
  background-color: var(--brand-2, #e1586f);
  background-image: linear-gradient(45deg,
    rgba(255, 255, 255, 0.28) 25%, transparent 25%,
    transparent 50%, rgba(255, 255, 255, 0.28) 50%,
    rgba(255, 255, 255, 0.28) 75%, transparent 75%, transparent),
    var(--brand-gradient);
  background-size: 1rem 1rem, auto;
  background-repeat: repeat, no-repeat;
  animation: gl-barber 1s linear infinite;
  transition: width 0.25s ease;
}
.gl-progress-fill.done  { animation: none; background-image: none; background-color: #16a34a; }
.gl-progress-fill.error { animation: none; background-image: none; background-color: #dc2626; }
.gl-progress-pct { font-size: 12px; color: var(--text-3); font-variant-numeric: tabular-nums; direction: ltr; }
.gl-progress-warn {
  margin-top: 10px;
  font-size: 12px;
  line-height: 1.5;
  padding: 8px 10px;
  border-radius: 8px;
  background: #fffbeb;
  color: #92400e;
  border: 1px solid #fde68a;
}
.gl-progress-warn.ok  { background: #f0fdf4; color: #166534; border-color: #bbf7d0; }
.gl-progress-warn.bad { background: #fef2f2; color: #991b1b; border-color: #fecaca; }
@keyframes gl-barber { from { background-position: 1rem 0; } to { background-position: 0 0; } }

/* SMS template sample boxes (preview page) */
.sms-sample {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px;
  font-size: 13.5px;
  line-height: 1.7;
  white-space: pre-wrap;
}
.sms-sample-meter {
  margin-top: 8px;
  display: flex;
  justify-content: space-between;
  font-size: 11.5px;
  color: var(--text-3);
}

/* Report hero side numbers */
.report-hero .end { text-align: end; }

/* Inline help block (preview page) */
.help-block {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.help-block .icon-pad {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: var(--accent-soft);
  color: var(--accent-text);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.help-block .body {
  font-size: 12.5px;
  color: var(--text-2);
  line-height: 1.65;
}
.help-block strong { color: var(--text); }

/* 3-col templates grid */
.sms-templates-grid {
  margin-top: 24px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.rsvp-preview-phone { max-width: 264px; width: 100%; min-width: 0; }

/* RSVP guest mock screen */
.rsvp-guest {
  flex: 1;
  padding: 20px 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: #fafaf9;
}
.rsvp-guest .header { text-align: center; }
.rsvp-guest .header .label {
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
  font-weight: 600;
}
.rsvp-guest .header .name {
  font-size: 14px;
  font-weight: 600;
  margin-top: 2px;
}
.rsvp-guest .header .meta {
  font-size: 11px;
  color: var(--text-3);
}
.rsvp-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
  font-size: 12;
}
.rsvp-card .h {
  font-size: 10px;
  color: var(--text-3);
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 6px;
}
.rsvp-card .row {
  display: flex;
  justify-content: space-between;
  padding: 3px 0;
  font-size: 12px;
}
.rsvp-card .row .key { color: var(--text-3); }
.rsvp-card .row .val { font-weight: 500; }
.rsvp-card .row .val.mono { font-family: var(--font-mono); font-size: 11px; direction: ltr; }
.rsvp-cta-primary {
  border: none;
  padding: 12px;
  background: var(--text);
  color: #fff;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.rsvp-cta-primary.confirmed { background: var(--green); }
.rsvp-cta-secondary {
  border: 1px solid var(--border-strong);
  padding: 10px;
  background: #fff;
  color: var(--text-2);
  border-radius: 10px;
  font-size: 12.5px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
}
.rsvp-cta-secondary.cancelled {
  background: var(--red-soft);
  color: var(--red);
  border-color: var(--red-border);
}
.rsvp-released {
  background: var(--amber-soft);
  border: 1px solid var(--amber-border);
  border-radius: 8px;
  padding: 8px;
  font-size: 11px;
  color: var(--amber);
  text-align: center;
}
/* Public landing pages */
.public-shell {
  min-height: 100vh;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 16px;
}
.public-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 28px;
  width: min(440px, 100%);
  box-shadow: var(--shadow-md);
}
.public-card h1 {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0 0 6px;
  text-align: center;
}
.public-card .sub {
  font-size: 13px;
  color: var(--text-3);
  margin: 0 0 22px;
  text-align: center;
}
.public-card .field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.public-card label { font-size: 12px; font-weight: 500; color: var(--text-2); }

/* Post-submit result screens (success / errors). Same .public-card shell as
   the form so it feels like the same surface, just with centered content. */
.public-card-state {
  text-align: center;
  display: flex; flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 32px 28px;
}
.public-card-state .state-event-name {
  font-size: 11px;
  color: var(--text-3);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 4px;
}
.public-card-state .icon-circle {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--green-soft);
  color: var(--green);
  display: grid; place-items: center;
  border: 1px solid var(--green-border);
}
.public-card-state .icon-circle.red   { background: var(--red-soft);   color: var(--red);   border-color: var(--red-border); }
.public-card-state .icon-circle.amber { background: var(--amber-soft); color: var(--amber); border-color: var(--amber-border); }
.public-card-state .state-title {
  font-size: 19px; font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0;
  text-align: center;
}
.public-card-state .state-body {
  font-size: 14px; color: var(--text-2);
  margin: 0; line-height: 1.5;
  max-width: 32ch;
}
.public-card-state .state-small {
  font-size: 12px; color: var(--text-3);
  margin-top: -4px;
}
/* Tickets field: inline label + small number input on one row, keeps the
   landing-page form mostly placeholder-driven without leaving the count
   field ambiguous (its default value=1 would suppress a placeholder). */
.public-card .field-tickets {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 4px;
}
.public-card .field-tickets label { font-size: 13px; color: var(--text); margin: 0; }
.public-card .field-tickets input { width: 88px; }
/* Rich-text element (sanitised admin HTML). */
.public-card .public-richtext { line-height: 1.6; }
.public-card .public-richtext ul, .public-card .public-richtext ol { padding-inline-start: 22px; margin: 6px 0; }

/* Settings field rows (move grid offsets out of inline) */
.section-body.tight { padding-top: 0; padding-bottom: 0; }

/* API endpoint footer rows (settings page) */
.endpoint-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.endpoint-url {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text);
  background: var(--surface);
  padding: 4px 9px;
  border-radius: 4px;
  border: 1px solid var(--border);
  direction: ltr;
  unicode-bidi: isolate;
  word-break: break-all;
  user-select: all;
}

/* Templates grid card body fits */
.section-body.template-body {
  padding-top: 12px;
  padding-bottom: 12px;
}

/* Field max widths */
.field-narrow { max-width: 220px; }
.field-mono input { font-family: var(--font-mono); }
.api-card .right { display: flex; gap: 6px; }

/* CTA card on report */
.cta-card {
  background: linear-gradient(135deg, var(--accent-soft) 0%, var(--surface) 100%);
  border: 1px solid var(--border);
}
.cta-card .body-row {
  display: flex;
  align-items: center;
  gap: 16px;
}
.cta-card .icon-tile {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--accent);
}
.cta-card .body-row .text { flex: 1; }
.cta-card .body-row .title {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 2px;
}
.cta-card .body-row .desc { font-size: 12.5px; color: var(--text-2); }

/* Big stat panel (report) */
.report-stats-3 { grid-template-columns: repeat(3, 1fr); }

/* ============================================================
   Public RSVP page — mobile-first, single column.
   Owns its own visual system under .rsvp-page so it doesn't
   collide with the admin preview's .rsvp-card / .rsvp-cta-*.
   ============================================================ */

/* RSVP design preview inside the admin phone-frame mockup. Forces
   the otherwise viewport-sized .rsvp-page to fit the phone screen.
   Lives in the /forms builder (centered by .fb-rsvp-preview). */
.rsvp-preview-phone .phone-screen.rsvp-body {
  aspect-ratio: 9 / 17.5;
  background: linear-gradient(180deg, #f7faf6 0%, #eef4ec 100%);
  /* Lock the bezel size: aspect-ratio derives the height from the
     fixed width, but flex children default to min-height:auto which
     can defeat that and push content out of the mockup. Forcing
     min-height:0 + overflow:hidden keeps the screen at its phone
     shape; the inner .rsvp-page is the actual scroll container. */
  min-height: 0;
  overflow: hidden;
}
.rsvp-preview-phone .rsvp-page {
  max-width: none;
  min-height: 0;
  padding: 0 12px 10px;
  flex: 1 1 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.rsvp-preview-phone .rsvp-page::-webkit-scrollbar { display: none; }
.rsvp-preview-phone .rsvp-topbar { padding: 8px 0 2px; }
.rsvp-preview-phone .rsvp-topbar img { height: 32px; }
.rsvp-preview-phone .rsvp-form { gap: 8px; padding: 4px 0 8px; }
.rsvp-preview-phone .rsvp-invite { padding: 14px 14px 12px; border-radius: 14px; }
.rsvp-preview-phone .rsvp-invite-eyebrow { font-size: 9px; margin-bottom: 6px; }
.rsvp-preview-phone .rsvp-invite-name { font-size: 17px; }
.rsvp-preview-phone .rsvp-invite-client { font-size: 11px; margin-top: 3px; }
.rsvp-preview-phone .rsvp-invite-event { font-size: 13px; margin-bottom: 8px; }
.rsvp-preview-phone .rsvp-invite-row { font-size: 11.5px; }
.rsvp-preview-phone .rsvp-invite-meta { gap: 3px; }
.rsvp-preview-phone .rsvp-invite-rule { margin: 8px auto; }
.rsvp-preview-phone .rsvp-q { padding: 10px 12px; border-radius: 12px; }
.rsvp-preview-phone .rsvp-q-title { font-size: 12.5px; margin-bottom: 6px; }
.rsvp-preview-phone .rsvp-stepper { gap: 10px; }
.rsvp-preview-phone .rsvp-stepper-btn { width: 32px; height: 32px; font-size: 16px; }
.rsvp-preview-phone .rsvp-stepper-num { font-size: 22px; min-width: 40px; }
.rsvp-preview-phone .rsvp-q-hint { font-size: 10.5px; margin-top: 6px; }
.rsvp-preview-phone .rsvp-btn-primary { padding: 10px; font-size: 12.5px; border-radius: 10px; }
.rsvp-preview-phone .rsvp-btn-secondary { padding: 8px; font-size: 12px; border-radius: 10px; margin-top: 2px; }
.rsvp-preview-phone .rsvp-btn-link { padding: 6px; font-size: 11.5px; }
.rsvp-preview-phone .rsvp-actions-aux { margin-top: 4px; }
.rsvp-preview-phone .rsvp-calendar-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 7px 12px; border-radius: 10px; font-size: 11.5px;
}
.rsvp-preview-phone .rsvp-footer { font-size: 10px; padding-top: 4px; }

.rsvp-body {
  margin: 0;
  background: linear-gradient(180deg, #f7faf6 0%, #eef4ec 100%);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  min-height: 100dvh;
}
.rsvp-page {
  max-width: 460px;
  margin: 0 auto;
  padding: 0 16px;
  padding-bottom: env(safe-area-inset-bottom, 0);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}
.rsvp-topbar {
  display: flex;
  justify-content: center;
  padding: 20px 0 8px;
}
.rsvp-topbar img { height: 64px; width: auto; display: block; }
.rsvp-topbar-name { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; padding: 16px 12px; line-height: 1; }

.rsvp-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 8px 0 24px;
  flex: 1;
}

/* Invitation hero */
.rsvp-invite {
  background:
    radial-gradient(120% 100% at 100% 0%, rgba(46,204,100,0.18) 0%, transparent 55%),
    linear-gradient(160deg, #024241 0%, #0a5e4d 55%, #117a4f 100%);
  color: #fff;
  border-radius: 22px;
  padding: 28px 22px 26px;
  box-shadow: 0 12px 28px -16px rgba(2,66,65,0.55);
  text-align: center;
}
/* Per-tenant custom gradient (set via owner → tenants modal). Replaces the
   default green stack with a clean 2-color linear gradient driven by the
   --rsvp-g1 / --rsvp-g2 vars injected on the body. */
.rsvp-body.has-custom-gradient .rsvp-invite {
  background: linear-gradient(160deg, var(--rsvp-g1) 0%, var(--rsvp-g2) 100%);
  box-shadow: 0 12px 28px -16px rgba(0,0,0,0.35);
}
.rsvp-invite-placeholder {
  position: relative;
  overflow: hidden;
}
.rsvp-invite-eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.78;
  margin-bottom: 10px;
}
.rsvp-invite-name {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin: 0;
}
.rsvp-invite-client {
  font-size: 12.5px;
  font-weight: 500;
  opacity: 0.75;
  margin-top: 6px;
}
.rsvp-invite-client .mono { font-family: var(--font-mono, monospace); letter-spacing: 0.04em; }
.rsvp-invite-rule {
  width: 32px;
  height: 2px;
  background: rgba(255,255,255,0.4);
  border-radius: 2px;
  margin: 14px auto;
}
.rsvp-invite-event {
  font-size: 17px;
  font-weight: 600;
  opacity: 0.95;
  margin-bottom: 14px;
  letter-spacing: -0.005em;
}
.rsvp-invite-meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
}
.rsvp-invite-row {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  opacity: 0.92;
}
.rsvp-invite-row svg { flex-shrink: 0; opacity: 0.85; }
/* Address row that hangs off the venue-name row — no pin icon (the row
   above already has one), slightly indented and dimmer so the two read
   as a single venue block. */
.rsvp-invite-row-sub {
  font-size: 13px;
  opacity: 0.78;
  padding-inline-start: 22px;
}

/* Question / stepper */
.rsvp-q {
  background: #fff;
  border-radius: 18px;
  padding: 22px 20px 20px;
  box-shadow: 0 1px 2px rgba(2,66,65,0.04), 0 6px 18px -10px rgba(2,66,65,0.12);
  text-align: center;
}
.rsvp-q-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 16px;
}
.rsvp-stepper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}
.rsvp-stepper-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: var(--surface-2);
  color: var(--text);
  font-size: 22px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: transform 0.08s ease, background 0.12s ease, border-color 0.12s ease;
  -webkit-tap-highlight-color: transparent;
}
.rsvp-stepper-btn:active { transform: scale(0.94); background: var(--surface-3); }
.rsvp-stepper-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  background: var(--surface);
}
.rsvp-stepper-num {
  min-width: 64px;
  font-size: 32px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: var(--text);
  line-height: 1;
}
.rsvp-q-hint {
  font-size: 12.5px;
  color: var(--text-3);
  margin-top: 14px;
}

/* Action buttons */
.rsvp-actions {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 4px;
}
.rsvp-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 16px;
  border: none;
  border-radius: 14px;
  background: linear-gradient(180deg, #0a5e4d 0%, #024241 100%);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 8px 18px -8px rgba(2,66,65,0.55);
  transition: transform 0.08s ease, box-shadow 0.12s ease, filter 0.12s ease;
  -webkit-tap-highlight-color: transparent;
}
.rsvp-btn-primary:active { transform: translateY(1px); filter: brightness(0.96); }
.rsvp-btn-primary svg { stroke-width: 2.5; }

.rsvp-btn-link {
  background: none;
  border: none;
  padding: 14px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-3);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(0,0,0,0.18);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.rsvp-btn-link:active { color: var(--text); }

.rsvp-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px;
  border: 1px solid rgba(180,118,9,0.32);
  border-radius: 14px;
  background: #fffaf0;
  color: #92400e;
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  margin-top: 8px;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.rsvp-btn-secondary:active { background: #fff4dc; border-color: rgba(180,118,9,0.55); }

.checkin-recent { display: flex; flex-direction: column; }
.checkin-recent-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--divider);
}
.checkin-recent-row:last-child { border-bottom: 0; }

/* QR check-in mini-app (USB / hardware-scanner only — no webcam):
   right column = scan input + result hub, left column = live recent feed */
.qr-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 900px) { .qr-layout { grid-template-columns: 1fr; gap: 12px; } }

/* Manual input on QR page */
.qr-manual { width: 100%; padding: 14px 12px; font-size: 16px; }
.qr-manual-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
}
.qr-manual-foot .cell-time { flex: 1; min-width: 0; }
@media (max-width: 900px) {
  .qr-manual-foot {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .qr-manual-foot .cell-time {
    text-align: center;
    font-size: 11.5px;
  }
  .qr-manual-foot .btn {
    width: 100%;
    justify-content: center;
    padding: 12px 14px;
  }
}

.qr-side { display: flex; flex-direction: column; gap: 12px; }

/* Unified result card (confirm / already / success / error) */
.qr-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 22px 20px 18px;
  text-align: center;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px -12px rgba(15, 23, 42, 0.18);
}
.qr-card-confirm { border-color: var(--green-border); }
.qr-card-success { border-color: var(--green-border); background: linear-gradient(180deg, var(--green-soft), var(--surface) 60%); }
.qr-card-error   { border-color: var(--red-border); background: var(--red-soft); }
.qr-card-already {
  border-color: var(--red-border);
  background: var(--red-soft);
  animation: qrFlash 0.42s ease-in-out 4 alternate;
}
@keyframes qrFlash {
  0%   { background: var(--red-soft); box-shadow: 0 0 0 0 rgba(185, 28, 28, 0); }
  100% { background: rgba(254, 202, 202, 1); box-shadow: 0 0 0 6px rgba(185, 28, 28, 0.18); }
}

.qr-card-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin: 0 auto 12px;
  font-size: 26px;
  font-weight: 800;
  line-height: 1;
}
.qr-card-icon.big { width: 68px; height: 68px; font-size: 32px; }
.qr-card-icon.green { background: var(--green-soft); color: var(--green); border: 2px solid var(--green-border); }
.qr-card-icon.red   { background: #fff; color: var(--red); border: 2px solid var(--red-border); }
.qr-card-icon.amber { background: #fef3c7; color: #92400e; border: 2px solid #fde68a; }

.qr-card-title {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
  margin-bottom: 4px;
}
.qr-card-meta {
  font-size: 13px;
  color: var(--text-3);
  margin-bottom: 4px;
}
.qr-card-meta .mono { font-family: var(--font-mono, monospace); letter-spacing: 0.04em; }
.qr-card-pills {
  display: flex;
  gap: 6px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 10px;
}
.qr-card-stat {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-top: 14px;
  padding: 10px 14px;
  background: var(--surface-2);
  border: 1px solid var(--divider);
  border-radius: 10px;
  text-align: start;
}
.qr-card-stat-v { font-weight: 600; color: var(--text); font-size: 14px; }

.qr-card-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 16px;
}
.qr-card-actions .btn { flex: 1 1 140px; min-width: 0; }
.qr-card-actions .btn.big { padding: 12px 16px; font-size: 15px; font-weight: 600; }

/* Stepper (how-many-came picker) */
.qr-stepper-block {
  margin-top: 16px;
  padding: 14px;
  background: var(--surface-2);
  border: 1px solid var(--divider);
  border-radius: 12px;
}
.qr-stepper-label { font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 10px; }
.qr-stepper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}
.qr-stepper-btn {
  width: 44px;
  height: 44px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  border-radius: 50%;
  font-size: 22px;
  font-weight: 600;
  cursor: pointer;
  display: grid;
  place-items: center;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.12s ease, transform 0.06s ease;
}
.qr-stepper-btn:active { transform: scale(0.94); background: var(--surface-3); }
.qr-stepper-num {
  font-size: 30px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  min-width: 56px;
  text-align: center;
  letter-spacing: -0.02em;
}
.qr-stepper-hint { font-size: 11.5px; color: var(--text-3); margin-top: 8px; text-align: center; }

/* Recent-scans log */
.qr-log { display: flex; flex-direction: column; }
.qr-log-row { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--divider); }
.qr-log-row:last-child { border-bottom: 0; }
.qr-log-icon { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; flex-shrink: 0; font-size: 13px; }
.qr-log-icon.green { background: var(--green-soft); color: var(--green); }
.qr-log-icon.red   { background: var(--red-soft);   color: var(--red); }

/* QR rendered on the guest's RSVP confirmation screen */
.rsvp-qr-block {
  margin: 22px auto 6px;
  padding: 18px 16px 14px;
  background: #fff;
  border: 1px solid var(--divider);
  border-radius: 16px;
  text-align: center;
  max-width: 280px;
}
.rsvp-qr-label { font-size: 12px; font-weight: 600; color: var(--text-3); margin-bottom: 10px; }
.rsvp-qr { width: 220px; height: 220px; margin: 0 auto; display: grid; place-items: center; }
.rsvp-qr svg { width: 100%; height: 100%; display: block; }
.rsvp-qr-token { font-size: 12px; color: var(--text-3); margin-top: 10px; }
.rsvp-qr-token .mono { font-family: var(--font-mono, monospace); font-weight: 600; letter-spacing: 0.06em; color: var(--text); }
/* Guest identity above the QR — pairs the name with the code so door
   staff scanning the QR can see who it belongs to without scrolling. */
.rsvp-qr-guest { margin-bottom: 12px; }
.rsvp-qr-guest-name {
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.005em;
  line-height: 1.2;
}
.rsvp-qr-guest-tickets {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-3);
  margin-top: 3px;
}
/* Google Wallet button — surfaced first in the actions row, so it gets
   a slightly higher-contrast surface to read as the primary action. The
   colored Google G inside the button stays its native colors. */
.rsvp-wallet-btn { font-weight: 600; }
.rsvp-wallet-logo { display: block; width: 20px; height: 20px; flex-shrink: 0; }

/* ============================================================
   Mobile-first responsive: hamburger drawer + small-screen layout
   ============================================================ */

/* Hamburger button — hidden on desktop, shown ≤900px */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  width: 40px;
  height: 36px;
  padding: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
  position: relative;
  z-index: 60;
}
.hamburger span {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: transform 0.18s ease, opacity 0.18s ease;
}
body.sidebar-open .hamburger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
body.sidebar-open .hamburger span:nth-child(2) { opacity: 0; }
body.sidebar-open .hamburger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Mini event-name rendered inside the topbar on mobile (replaces sidebar's
   event card while it's hidden in the drawer). Hidden on desktop. */
.topbar-event-mini { display: none; min-width: 0; flex: 1; }
.topbar-event-name {
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.topbar-event-date { font-size: 11px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Backdrop behind the open drawer — covers the topbar too (above z-60). */
.sidebar-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  z-index: 65;
  opacity: 0;
  transition: opacity 0.22s ease;
  -webkit-tap-highlight-color: transparent;
}
body.sidebar-open .sidebar-backdrop { opacity: 1; }

/* Mobile-only close button inside the sidebar drawer. Sits at the top-left
   of the drawer (the inner edge in RTL, where it meets the backdrop). */
.sidebar-close {
  display: none;
  position: absolute;
  top: 10px;
  inset-inline-end: 10px;
  width: 32px;
  height: 32px;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 8px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  color: var(--text-2);
  -webkit-tap-highlight-color: transparent;
}
.sidebar-close:hover { background: var(--surface-3); color: var(--text); }

/* ----- ≤900px: full mobile mode ----- */
@media (max-width: 900px) {
  /* Prevent any off-canvas element from exposing horizontal scroll.
     Uses `overflow-x: clip` (not `hidden`) because `hidden` makes the
     ancestor a scroll container, which breaks `position: sticky` on the
     topbar. `clip` clips overflow without altering scroll/stickiness. */
  html, body { overflow-x: clip; }

  /* Sidebar becomes off-canvas drawer (slides from the right in RTL).
     Uses `right` instead of `transform: translateX` because translateX is
     interpreted differently with dir="rtl" across browsers and was leaving
     a sliver of the sidebar visible. */
  .sidebar {
    display: flex !important;
    position: fixed;
    top: 0;
    right: -340px;
    height: 100dvh;
    max-height: 100dvh;
    width: min(86vw, 320px);
    z-index: 70;
    transform: none;
    transition: right 0.24s ease;
    box-shadow: -8px 0 24px rgba(15, 23, 42, 0.18);
    overflow-y: auto;
    padding-top: 56px;
    padding-bottom: 24px;
  }
  body.sidebar-open .sidebar { right: 0; }
  .sidebar-close { display: inline-flex; }

  /* Lock all scroll when drawer is open (html too — iOS Safari ignores
     overflow:hidden on body alone). */
  body.sidebar-open,
  html:has(body.sidebar-open) { overflow: hidden; }

  /* Topbar: more compact, hamburger visible, phase-tabs scrollable.
     z-index 60 keeps the topbar (and the X-shaped hamburger) tappable
     while the backdrop overlay (z-40) is on. */
  .topbar {
    height: auto;
    min-height: 52px;
    padding: 8px 14px;
    gap: 10px;
    flex-wrap: wrap;
    z-index: 60;
  }
  .hamburger { display: flex; }
  .topbar-event-mini { display: block; }
  /* Brand lives in the sidebar drawer on mobile — keep the topbar tight. */
  .topbar-brand { display: none; }

  /* Hide the breadcrumbs on mobile — the event-mini block is the title */
  .crumbs { display: none; }

  /* Mobile topbar status group holds only the wallet balance now — the phase
     switcher moved up to the brand-bar (next to the logo), so hide the copy
     that renders inside the sticky topbar. */
  .topbar-status {
    margin-inline-start: 0;
    gap: 6px;
    flex-shrink: 0;
  }
  .topbar-status .phase-tabs { display: none; }

  /* Brand bar above the sticky topbar — sits at the very top of the page and
     scrolls away naturally as the user scrolls down. In RTL, the logo (first
     child) sits on the right; the phase switcher (הרשמה / יום האירוע / סיכום)
     sits on the left — same level as the logo, opposite side — which frees the
     sticky row below for the event name + wallet balance. position + z-index
     let the "הרשמה" dropdown paint over the sticky topbar (z-index: 60). */
  .topbar-brand-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px 8px;
    position: relative;
    z-index: 70;
    background: linear-gradient(180deg,
      oklch(27.4% 0.006 286.033) 0%,
      oklch(30% 0.008 286.033) 100%);
    border-bottom: 1px solid oklch(20% 0.006 286.033);
  }
  .topbar-brand-large { height: 26px; }
  /* Brand-bar phase switcher, tighter to share the row with the logo. The
     "הרשמה" tab always keeps its label (a lone dot isn't self-explanatory);
     the other two follow the compact rule below — label only when active,
     icon-only otherwise — so the row stays narrow on small phones. */
  .topbar-brand-bar .phase-tab { font-size: 11.5px; }
  .topbar-brand-bar .phase-tab-wrap .phase-tab { padding: 5px 9px; gap: 5px; }
  .topbar-brand-bar .phase-tab-wrap .phase-tab .label { display: inline; }


  /* Page padding — slightly generous so cards don't touch the edges */
  .page {
    padding: 16px 18px 80px;
  }
  .page-header {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .page-actions {
    flex-wrap: wrap;
    gap: 6px;
  }
  .page-actions .btn { font-size: 12.5px; padding: 8px 10px; }
  .page-title { font-size: 22px; }
  .page-sub { font-size: 13px; }

  /* Stats grid → 2 columns */
  .stats-grid,
  .stats-grid.cols-4 { grid-template-columns: 1fr 1fr; gap: 10px; }
  .stat .value { font-size: 22px; }
  .checkin-stat-bar { grid-template-columns: 1fr 1fr !important; }

  /* Sectioned grids → single column */
  .row-2,
  .row-2-equal,
  .col2-12-1 { grid-template-columns: 1fr !important; }
  .event-grid,
  .group-grid { grid-template-columns: 1fr !important; }

  /* Tables: enable horizontal scroll, tighten text */
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .table { min-width: 640px; font-size: 12.5px; }
  .table th, .table td { padding: 8px 10px; }

  /* Toolbars (search + chips) wrap properly */
  .toolbar { flex-wrap: wrap; gap: 8px; padding: 10px 12px; }
  .toolbar .search { width: 100%; flex: 1 1 100%; }
  .toolbar .filter-chip { font-size: 12px; }

  /* Modals: full-width with safe margins */
  .modal-overlay .modal {
    width: calc(100vw - 24px) !important;
    max-width: 100%;
    margin: 16px;
  }

  /* Check-in row layout (currently grid with fixed cols) */
  .checkin-row {
    display: grid !important;
    grid-template-columns: 36px 1fr;
    grid-auto-rows: auto;
    column-gap: 10px;
    row-gap: 6px;
    padding: 10px 12px !important;
  }
  .checkin-row .avatar-sm { grid-row: 1 / span 2; }
  .checkin-row > form,
  .checkin-row > div:not(.avatar-sm) { grid-column: 2; }
  .checkin-row .tickets-control { width: max-content; }

  /* Recent-arrivals row: same idea */
  .checkin-recent-row { padding: 10px 12px; flex-wrap: wrap; }

  /* QR mini-app: tighter padding, slightly smaller stepper */
  .qr-card { padding: 18px 16px 14px; }
  .qr-card-title { font-size: 17px; }
  .qr-stepper-btn { width: 48px; height: 48px; font-size: 24px; }
  .qr-stepper-num { font-size: 32px; min-width: 64px; }
  .qr-card-actions .btn { flex: 1 1 100%; }
  .qr-card-actions .btn.big { padding: 14px 16px; }

  /* Audience picker (thank-you page): single column */
  .audience-grid { grid-template-columns: 1fr !important; }

  /* Stats-grid for report: stack */
  .report-stats,
  .report-stats-3 { grid-template-columns: 1fr !important; gap: 10px; }
  .report-hero {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }
  .report-hero .end { text-align: start; }

  /* Capacity legend wraps */
  .capacity-legend { flex-wrap: wrap; row-gap: 4px; }

  /* Selection bar (bulk) becomes sticky bottom */
  .selection-wrap {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    padding: 10px;
    background: var(--surface);
    border-top: 1px solid var(--border);
    z-index: 20;
  }
  .selection-bar { flex-wrap: wrap; }

  /* Auth card width */
  .public-card,
  .public-shell .public-card { max-width: calc(100vw - 24px); }

  /* Mobile topbar: only the active phase tab shows its label; the others
     collapse to icon-only chips so the status row fits without overflow. */
  .phase-tab { font-size: 12px; padding: 6px 10px; }
  .phase-tab:not(.active) .label { display: none; }
  .phase-tab:not(.active) { padding: 6px 8px; gap: 0; }

  /* Field rows: stack label and input. The base rule uses `display: grid`
     with a 220px label column, so `flex-direction` alone is ineffective —
     we have to collapse the grid template to a single column here. */
  .field-row {
    grid-template-columns: 1fr;
    flex-direction: column;
    align-items: stretch !important;
    gap: 8px;
  }
  /* Keep field-narrow controls (selects, small numeric inputs) at their
     natural compact width on mobile — stretching them to 100% looked bloated
     for short content like provider names or quota numbers. The base
     max-width:220px still applies. */
  .field-narrow { width: auto; max-width: 220px; }
  /* Free-text inputs/textareas inside field-rows must never push past the
     viewport. min-width:0 lets them shrink inside flex parents. */
  .field-row .input,
  .field-row .textarea { max-width: 100%; min-width: 0; }
  .field-row .row-flex { flex-wrap: wrap; max-width: 100%; }

  /* Endpoint/URL rows can break */
  .endpoint-row { flex-wrap: wrap; }
  .endpoint-url { word-break: break-all; }
}

/* ----- ≤480px: very small phones ----- */
@media (max-width: 480px) {
  .stats-grid,
  .stats-grid.cols-4 { grid-template-columns: 1fr; }
  .checkin-stat-bar { grid-template-columns: 1fr 1fr !important; }
  .page-actions .btn { width: 100%; justify-content: center; }
  .page-actions .btn[data-toggle] { width: 100%; }

  /* Tiny screens: collapse the status pill to just its dot to free space
     for the phase tabs + open/close button on the same scroll row. */
  .topbar .status-pill .label { display: none; }
  .topbar .status-pill { padding: 4px 6px; }
}

/* ── Topbar prepaid wallet balance (prepaid tenants only) ─────────────── */
.balance-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-text);
  border: 1px solid var(--border);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.balance-pill b { font-weight: 700; direction: ltr; }
/* Two balance renderings: full (with agorot) on desktop, whole-shekel on
   mobile to save width. Only one is ever shown — see the mobile swap below. */
.balance-pill .bal-compact { display: none; }
.balance-pill.low {
  background: var(--amber-soft);
  color: var(--amber);
  border-color: var(--amber-border);
}
@media (max-width: 900px) {
  .balance-pill .label { display: none; }
  .balance-pill { padding: 4px 8px; }
  .balance-pill .bal-full { display: none; }
  .balance-pill .bal-compact { display: inline; }
}

/* ── /whatsapp lifecycle filter tiles — icon over label + live count ────
   Desktop: ALL tiles on one row (column flow, equal widths); narrow screens
   fall back to a wrapping grid. */
.wa-filters {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 8px;
}
@media (max-width: 980px) {
  .wa-filters {
    grid-auto-flow: row;
    grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  }
}
.wa-filter-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
  padding: 10px 6px 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text-2);
  text-decoration: none;
  text-align: center;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.25;
  transition: border-color 0.1s ease, background 0.1s ease, color 0.1s ease, box-shadow 0.1s ease;
}
.wa-filter-btn svg { color: var(--text-3); }
.wa-filter-btn:hover { border-color: var(--accent); color: var(--text); box-shadow: var(--shadow-sm); }
.wa-filter-btn .qty {
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  background: var(--surface-2);
  border-radius: 999px;
  padding: 1px 8px;
  color: var(--text-2);
  margin-top: auto;
}
.wa-filter-btn.active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-text); }
.wa-filter-btn.active svg { color: var(--accent); }
.wa-filter-btn.active .qty { background: var(--accent); color: #fff; }

/* ── /whatsapp send wizard ──────────────────────────────────────────────
   Step 1's big type tiles + the staggered reveal each newly-unlocked step
   plays (sections carry .wa-step with an inline animation-delay). */
.wa-types {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}
.wa-type-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 22px 12px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  color: var(--text-2);
  text-decoration: none;
  text-align: center;
  transition: border-color 0.12s ease, box-shadow 0.15s ease, transform 0.15s ease, background 0.12s ease;
}
.wa-type-btn svg { color: var(--text-3); transition: color 0.12s ease, transform 0.15s ease; }
.wa-type-btn .lbl { font-size: 14.5px; font-weight: 600; color: var(--text); }
.wa-type-btn .qty {
  font-size: 11.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  background: var(--surface-2);
  border-radius: 999px;
  padding: 2px 10px;
  color: var(--text-3);
}
.wa-type-btn:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.wa-type-btn:hover svg { color: var(--accent); transform: scale(1.12); }
.wa-type-btn.active {
  background: var(--accent-soft);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.wa-type-btn.active svg { color: var(--accent); }
.wa-type-btn.active .lbl { color: var(--accent-text); }
.wa-type-btn.active .qty { background: var(--accent); color: #fff; }

.wa-step { animation: waStepIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) both; }
@keyframes waStepIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .wa-step { animation: none; }
  .wa-type-btn, .wa-type-btn svg { transition: none; }
}

/* ── Inline tickets stepper (/guests list כרטיסים column) ─────────────── */
.tickets-inline {
  padding: 1px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.tickets-inline .tc-btn { width: 22px; height: 22px; }
.tickets-inline .num {
  /* Text inputs default to ~20ch wide — pin to 2 digits so the pill stays compact. */
  width: 32px;
  min-width: 0;
  border: none;
  background: transparent;
  padding: 0;
  outline: none;
  -moz-appearance: textfield;
}
.tickets-inline .num::-webkit-outer-spin-button,
.tickets-inline .num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.tickets-inline.is-idle   { opacity: 0.5; }
.tickets-inline.is-saving { opacity: 0.6; }
.tickets-inline.is-saved  { border-color: var(--green); box-shadow: 0 0 0 1px var(--green); }
.tickets-inline.is-error  { border-color: var(--red);   box-shadow: 0 0 0 1px var(--red); }

/* ── Admin manual-RSVP marker + setter (/guests) ─────────────────────── */
.rsvp-manual-tag {
  display: inline-block;
  margin-inline-start: 5px;
  padding: 0 5px;
  border-radius: 4px;
  font-size: 10px; font-weight: 600;
  background: var(--surface-2);
  color: var(--text-2);
  border: 1px solid var(--border);
}
.rsvp-set-btn.active {
  background: var(--text);
  color: #fff;
  border-color: var(--text);
}
.rsvp-qty-control .num {
  /* Same 2-digit pin as .tickets-inline — an unstyled input stretches the pill. */
  width: 36px;
  min-width: 0;
  border: none;
  background: transparent;
  padding: 0;
  outline: none;
  -moz-appearance: textfield;
}
.rsvp-qty-control .num::-webkit-outer-spin-button,
.rsvp-qty-control .num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ── Guest add/edit modal: compact 2-col field grid ───────────────────
   Short fields (name / phone / email / group / tickets + short extras) sit
   two-up; multi-line extras (.field-wide) span the full row. */
.modal-form-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
}
.modal-form-grid .auth-field { min-width: 0; }
.modal-form-grid .auth-field input:not([type="checkbox"]):not([type="radio"]),
.modal-form-grid .auth-field select,
.modal-form-grid .auth-field textarea {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.modal-form-grid .field-wide { grid-column: 1 / -1; }
@media (max-width: 560px) {
  .modal-form-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ── /tickets builder: seating-binding picker ─────────────────────────
   Chip per bindable zone/area/row; checked = this type owns those seats. */
.tickets-row-bind {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.tickets-bind-label { font-size: 11.5px; font-weight: 600; color: var(--text-3); }
.tickets-bind-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tickets-bind-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 12px;
  cursor: pointer;
  background: var(--surface);
  user-select: none;
}
.tickets-bind-chip input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}
.tickets-bind-chip:hover { border-color: var(--text-3); }
.tickets-bind-chip.on {
  background: var(--text);
  color: #fff;
  border-color: var(--text);
}

.rsvp-calendar-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px;
  border: 1px solid rgba(2,66,65,0.18);
  border-radius: 14px;
  background: #fff;
  color: #024241;
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.12s ease, border-color 0.12s ease;
  margin-top: 14px;
}
.rsvp-calendar-btn:active { background: #f4f9f8; border-color: rgba(2,66,65,0.32); }
.rsvp-calendar-btn svg { stroke-width: 2.25; }

/* Result states */
.rsvp-result {
  background: #fff;
  border-radius: 22px;
  padding: 32px 24px 28px;
  text-align: center;
  box-shadow: 0 1px 2px rgba(2,66,65,0.04), 0 8px 24px -12px rgba(2,66,65,0.18);
}
.rsvp-result-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin: 0 auto 18px;
}
.rsvp-result-yes .rsvp-result-icon {
  background: var(--green-soft);
  color: var(--green);
  border: 1px solid var(--green-border);
}
.rsvp-result-no .rsvp-result-icon {
  background: var(--red-soft);
  color: var(--red);
  border: 1px solid var(--red-border);
}
.rsvp-result-maybe .rsvp-result-icon {
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fde68a;
}
.rsvp-result-title {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 6px;
  color: var(--text);
}
.rsvp-result-sub {
  font-size: 15px;
  font-weight: 500;
  color: var(--text-2);
  margin: 0;
}
.rsvp-result-note {
  font-size: 13.5px;
  color: var(--text-3);
  margin: 14px 0 0;
  line-height: 1.5;
}
.rsvp-result-meta {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--divider);
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
  color: var(--text-2);
}
.rsvp-result-meta .rsvp-invite-row { color: var(--text-2); opacity: 1; }

/* "Download as PDF" + calendar buttons row inside the result card */
.rsvp-result-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 14px;
}
.rsvp-result-actions .rsvp-calendar-btn {
  width: 100%;
  justify-content: center;
}
/* Secondary actions (calendar + PDF) sit side-by-side under the primary
   Wallet button so the row breathes vertically on small screens while
   still making the two equivalent actions feel paired. Each child takes
   half the width via flex:1 — width:100% inherited from the rule above
   is harmless in a flex parent since flex-basis takes over. */
.rsvp-result-actions-row {
  display: flex;
  gap: 8px;
}
.rsvp-result-actions-row > .rsvp-calendar-btn {
  flex: 1 1 0;
  min-width: 0;
}

/* Off-screen printable pass — rendered into a hidden DOM node so html2canvas
   can capture it for the PDF download without affecting the on-page layout.
   We use positioning only (not opacity/visibility) so html2canvas captures the
   pixels normally. */
.rsvp-pass-printable {
  position: fixed;
  left: -10000px;
  top: 0;
  width: 360px;
  pointer-events: none;
}
.rsvp-pass-card {
  width: 360px;
  background: #ffffff;
  color: #0b1f1f;
  border-radius: 18px;
  padding: 24px 22px 22px;
  font-family: Heebo, system-ui, -apple-system, "Segoe UI", sans-serif;
  box-sizing: border-box;
}
.rsvp-pass-brand { text-align: center; margin-bottom: 14px; }
.rsvp-pass-brand img { height: 28px; }
.rsvp-pass-brand-name { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; line-height: 1; }
.rsvp-pass-event {
  font-size: 18px;
  font-weight: 700;
  text-align: center;
  color: #024241;
  margin-bottom: 6px;
}
.rsvp-pass-name {
  font-size: 22px;
  font-weight: 800;
  text-align: center;
  margin-bottom: 4px;
}
.rsvp-pass-client {
  font-size: 12px;
  text-align: center;
  color: #4a5a5a;
  margin-bottom: 14px;
}
.rsvp-pass-client span { font-weight: 600; letter-spacing: 0.04em; }
.rsvp-pass-qr-wrap {
  background: #f6f8f8;
  border: 1px solid #e5eaea;
  border-radius: 14px;
  padding: 14px;
  margin: 8px 0 12px;
  display: flex;
  justify-content: center;
}
.rsvp-pass-qr { width: 220px; height: 220px; }
.rsvp-pass-qr svg { width: 100%; height: 100%; display: block; }
.rsvp-pass-token {
  text-align: center;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-weight: 700;
  letter-spacing: 0.08em;
  font-size: 14px;
  margin-bottom: 14px;
}
.rsvp-pass-meta {
  border-top: 1px dashed #d4dada;
  padding-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.rsvp-pass-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
}
.rsvp-pass-row-key { color: #6b7878; font-weight: 500; }
.rsvp-pass-row span:last-child { font-weight: 700; }
.rsvp-pass-footnote {
  margin-top: 14px;
  text-align: center;
  font-size: 11px;
  color: #6b7878;
}

/* "Want to change?" expander shown after an RSVP has already been recorded */
.rsvp-edit {
  margin-top: 18px;
  border-top: 1px solid var(--divider);
  padding-top: 18px;
}
.rsvp-edit > summary {
  list-style: none;
  cursor: pointer;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
  padding: 10px 12px;
  border: 1px dashed var(--divider);
  border-radius: 10px;
  user-select: none;
}
.rsvp-edit > summary::-webkit-details-marker { display: none; }
.rsvp-edit > summary:hover { color: var(--text); border-color: var(--text-3); }
.rsvp-edit[open] > summary { color: var(--text); border-style: solid; margin-bottom: 14px; }
.rsvp-q-edit { margin-top: 0; }
.rsvp-actions-aux { margin-top: 8px; }

/* Footer credit */
.rsvp-footer {
  margin-top: auto;
  padding: 24px 0 16px;
  text-align: center;
  font-size: 11.5px;
  color: var(--text-3);
  letter-spacing: 0.02em;
}
.rsvp-footer a {
  color: var(--text-2);
  text-decoration: none;
  font-weight: 600;
}
.rsvp-footer a:hover { color: var(--text); text-decoration: underline; }
.rsvp-footer img { height: 22px; width: auto; display: inline-block; vertical-align: middle; opacity: 0.85; transition: opacity 0.15s; }
.rsvp-footer a:hover img { opacity: 1; }

/* Small fixes for badge placement */
.badge.no-dot .dot { display: none; }

/* Auth utilities */
.auth-submit {
  width: 100%;
  justify-content: center;
  padding: 10px 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  /* Breathing room so the button doesn't touch adjacent fields when admin
     reorders it to the middle of the form. */
  margin-block: 12px;
}
.col-flex.gap-14 { gap: 14px; }
.mb-3 { margin-bottom: 16px; display: inline-flex; align-items: center; gap: 4px; }

/* Big-number panels (dashboard) */
.big-num-row { display: flex; align-items: baseline; gap: 8px; }
.big-num-row .v {
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.big-num-row .desc { font-size: 12px; color: var(--text-3); }

/* Funnel sub label */
.funnel .sub { color: var(--text-3); font-weight: 400; font-size: 12px; }

/* Activity wrap (dashboard) */
.activity-wrap { padding-top: 4px; }
.activity-wrap .activity-icon.green { background: var(--green-soft); color: var(--green); }
.activity-wrap .activity-icon.red { background: var(--red-soft); color: var(--red); }
.activity-wrap .activity-icon.amber { background: var(--amber-soft); color: var(--amber); }
.activity-wrap .activity-icon.blue { background: var(--blue-soft); color: var(--blue); }

/* Funnel meta percent */
.funnel-row .num { display: flex; align-items: baseline; gap: 6px; }

/* Capacity row sublabels */
.capacity-row .left { display: flex; flex-direction: column; }
.capacity-row .right { display: flex; flex-direction: column; align-items: flex-end; }
.capacity-row .right .num.danger { color: var(--red); }

/* Capacity legend right note */
.capacity-legend .note { margin-inline-start: auto; font-size: 11.5px; }

/* Page-specific: settings 4-col templates */
.api-card-row .right { display: flex; gap: 6px; }
.fr-mono { font-family: var(--font-mono); }

/* Group card meta-row helpers */
.group-card .meta-row b { color: var(--text); font-variant-numeric: tabular-nums; }
.group-card .pct-line {
  font-size: 11px;
  color: var(--text-3);
  margin-top: 4px;
}

/* Modal extras */
.modal h3 { margin: 0 0 6px; font-size: 16px; font-weight: 600; }
.modal p { font-size: 13px; color: var(--text-2); margin: 0; line-height: 1.6; }
.modal-actions {
  display: flex;
  gap: 8px;
  margin-top: 18px;
  justify-content: flex-end;
}

/* Two-col layout shortcut */
.col2-stack { display: flex; flex-direction: column; gap: 16px; }

/* Section title small icon inline */
.section-header h3 .icon { display: inline; margin-inline-end: 6px; vertical-align: -2px; }

/* Two SMS audience cards within forms */
.audience-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.audience-grid.cols-2 { grid-template-columns: 1fr 1fr; }
.audience-grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.audience-card-radio.active { border-color: var(--accent); }
.audience-card .row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.audience-card .row .role-badge { font-size: 11px; font-weight: 600; }

/* Helper: hide things visually but keep accessible */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Activity item alignment */
.activity-item .text { font-size: 13px; color: var(--text); }
.activity-item .text .b { font-weight: 600; }
.activity-item .text .sub { font-size: 12px; color: var(--text-3); margin-top: 1px; display: block; }

/* Funnel-row label child sub */
.funnel-row .label .sub { color: var(--text-3); font-weight: 400; font-size: 12px; }

/* Dashboard 2-col layout used in most pages */
.col2-12-1 { grid-template-columns: 1.2fr 1fr; }

/* Inline-style replacements for original design */
.audience-card[data-active="true"] .audience-card-radio { border-color: var(--accent); }
.audience-card[data-active="true"] .audience-card-radio .audience-card-radio-dot { background: var(--accent); }

/* Selection bar full-width inside section */
.section .selection-bar { margin: 12px; }

/* Schedule-list helpers */
.schedule-list { display: flex; flex-direction: column; gap: 8px; }
.schedule-card .name { font-size: 13px; font-weight: 600; }
.schedule-card .meta { font-size: 11.5px; color: var(--text-3); }

/* Generic buttons row */
.btn-row { display: flex; gap: 8px; align-items: center; }

/* Audit row fallback dot */
.audit-row .icon-wrap.accent { background: var(--accent-soft); color: var(--accent); }

/* Settings editor textarea */
.textarea.tall { min-height: 90px; }

/* SMS template editor: draggable variable chips above each textarea */
.tpl-field { display: flex; flex-direction: column; gap: 8px; }
.tpl-vars {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.tpl-vars-hint {
  font-size: 12px;
  color: var(--text-3);
  margin-inline-end: 4px;
}
.tpl-chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  font-family: var(--font-mono);
  font-size: 12px;
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  color: var(--text-2);
  cursor: grab;
  user-select: none;
  transition: background 0.08s ease, border-color 0.08s ease, transform 0.06s ease;
  direction: ltr;
}
.tpl-chip:hover { background: var(--surface); border-color: var(--text-3); color: var(--text); }
.tpl-chip:active { cursor: grabbing; transform: scale(0.97); }
.tpl-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tpl-chip.dragging { opacity: 0.4; }
.textarea.tpl-drop-target {
  background: var(--accent-soft);
  border-color: var(--accent);
  caret-color: var(--accent);
}
.tpl-reset {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  margin-inline-start: auto;
  font-size: 12px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  color: var(--text-3);
  cursor: pointer;
  transition: background 0.08s ease, color 0.08s ease, border-color 0.08s ease;
}
.tpl-reset:hover { background: var(--surface-2); color: var(--text); border-color: var(--border); }
.tpl-reset:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Phase tabs form (avoid inline style for the form wrapper). Direct children
   only — the "הרשמה" dropdown has its own forms that must stay real blocks. */
.phase-tabs > form { display: contents; }

/* Approved-list filename badge group */
.toolbar .badge-row { display: inline-flex; gap: 6px; align-items: center; }

/* Confirmation modal centered icon */
.modal .modal-center { text-align: center; }

/* Tweaks panel-style placeholder removed: not needed in PHP version */

/* Mini status badges in event-switcher dropdown */
.badge.status-mini {
  padding: 1px 6px;
  font-size: 10px;
  flex-shrink: 0;
}

/* Each row is a <form> wrapping a <button>. Make the form invisible
   to layout so the button itself sits as a direct flex/menu child. */
.event-menu form { display: contents; margin: 0; }
.event-menu .event-menu-item {
  width: 100%;
  padding: 8px 8px;
  border-radius: var(--r-sm);
  cursor: pointer;
}
.event-menu .event-menu-item:hover { background: var(--surface-2); }
.event-menu .event-menu-item.active { background: var(--accent-soft); }

/* Make the dropdown explicitly anchored — defensive in case any ancestor
   class accidentally drops position:relative on .event-switcher. */
.sidebar .event-switcher { position: relative !important; }
.sidebar .event-menu {
  position: absolute !important;
  top: calc(100% + 4px) !important;
  inset-inline-start: 0 !important;
  inset-inline-end: 0 !important;
  z-index: 60;
}
.sidebar .event-menu[hidden] { display: none !important; }

/* Event-menu-foot — dropdown footer with create/manage buttons */
.event-menu-foot {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px;
}
.event-menu-foot .btn {
  width: 100%;
  justify-content: center;
}

/* Profile menu (sidebar footer) */
.sidebar-footer { position: relative; }
.profile-trigger {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: transparent;
  border: none;
  padding: 4px;
  border-radius: var(--r-sm);
  cursor: pointer;
  text-align: start;
  font-family: inherit;
}
.profile-trigger:hover { background: var(--surface-3); }
.profile-trigger .chev { color: var(--text-3); }

.profile-menu {
  position: absolute;
  bottom: calc(100% + 4px);
  inset-inline-start: 0;
  inset-inline-end: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-pop);
  z-index: 60;
  padding: 4px;
}
.profile-menu-header {
  padding: 8px 10px 6px;
}
.profile-menu-divider {
  height: 1px;
  background: var(--divider);
  margin: 4px 0;
}
.profile-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 10px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 12.5px;
  color: var(--text);
  border-radius: var(--r-sm);
  text-align: start;
  font-family: inherit;
  text-decoration: none;
}
.profile-menu-item:hover { background: var(--surface-2); }
.profile-menu-item.danger { color: var(--red); }
.profile-menu-item.danger:hover { background: var(--red-soft); }
.profile-menu form { margin: 0; }

/* Event-menu-item layout (icon + body + status badge) */
.event-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  background: transparent;
  border: none;
  text-align: start;
  cursor: pointer;
  font-family: inherit;
}
.event-menu-item .icon { color: var(--text-3); flex-shrink: 0; }
.event-menu-item .body { flex: 1; min-width: 0; }
.event-menu-item .check { color: var(--accent); flex-shrink: 0; }

/* Empty state for event-menu-foot specifically */
.event-menu-create {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

/* Events page — card grid */
.event-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.event-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
  overflow: hidden; /* clip full-bleed banner to card's rounded corners */
}
/* Wallet-imagery banner header. Renders only when at least one of
   hero / logo / wordmark is configured on the event. The full-bleed
   negative margins extend it to the card edges; the card's own
   overflow:hidden trims the top corners to the card radius. */
.event-card-banner {
  position: relative;
  margin: -22px -22px 4px;
  aspect-ratio: 3 / 1;
  background: linear-gradient(135deg, var(--accent-soft) 0%, var(--surface) 100%);
  overflow: hidden;
}
.event-card-hero {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.event-card-wordmark {
  position: absolute;
  top: 12px;
  inset-inline-end: 14px;
  max-height: 30px;
  max-width: 50%;
  object-fit: contain;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.5));
}
.event-card-logo {
  position: absolute;
  bottom: 12px;
  inset-inline-start: 14px;
  width: 52px;
  height: 52px;
  border-radius: 10px;
  background: #fff;
  object-fit: contain;
  padding: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
.event-card.has-banner .name {
  font-size: 17px; /* slightly larger title when paired with the banner */
}
.event-card.is-active {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}
.event-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.event-card .name {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text);
}
.event-card .active-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  font-size: 11.5px;
  color: var(--accent);
  font-weight: 500;
}
.event-card .meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  color: var(--text-2);
}
.event-card .meta-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.event-card .meta-item .icon {
  color: var(--text-3);
  flex-shrink: 0;
}
.event-card .meta-item .v {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.event-card .capacity-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.event-card .capacity-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-size: 12px;
  color: var(--text-3);
}
.event-card .capacity-head b {
  color: var(--text);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: 14px;
}
.event-card .capacity-foot {
  font-size: 11.5px;
  color: var(--text-3);
}
.event-card .pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.event-card .actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
  border-top: 1px solid var(--divider);
  padding-top: 12px;
  margin-top: auto;
}
.event-card .actions form {
  display: inline-flex;
  margin: 0;
}

/* Google Places PlaceAutocompleteElement — make the custom element blend
   into the surrounding form. The host element acts as the visual input
   frame; the internal input is targeted via ::part(input) (exposed by
   newer PAE builds) and also via a light-DOM input fallback. RTL/Hebrew
   alignment is forced since the element doesn't inherit `dir` reliably.
   `color-scheme: light` stops PAE from auto-rendering its suggestions
   panel in dark mode when the user's OS prefers dark — the rest of the
   admin is light. */
gmp-place-autocomplete {
  display: block;
  width: 100%;
  box-sizing: border-box;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  font: inherit;
  font-size: 13.5px;
  direction: rtl;
  text-align: start;
  color-scheme: light;
  transition: border-color 0.12s, box-shadow 0.12s;
}
gmp-place-autocomplete:focus-within {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
gmp-place-autocomplete::part(input),
gmp-place-autocomplete input {
  background: transparent;
  color: var(--text);
  border: 0;
  outline: none;
  padding: 10px 12px;
  font: inherit;
  font-size: inherit;
  direction: rtl;
  text-align: start;
  width: 100%;
  box-sizing: border-box;
}
gmp-place-autocomplete::part(input)::placeholder,
gmp-place-autocomplete input::placeholder {
  color: var(--text-3);
}

/* Suggestion dropdown — PAE exposes several CSS Parts across versions.
   Listing the common names here covers older + newer builds; non-
   existent parts are silently ignored by the browser. */
gmp-place-autocomplete::part(prediction-list),
gmp-place-autocomplete::part(predictions-container),
gmp-place-autocomplete::part(prediction-item),
gmp-place-autocomplete::part(suggestion-item),
gmp-place-autocomplete::part(prediction-item-main-text),
gmp-place-autocomplete::part(prediction-item-secondary-text) {
  background: var(--surface);
  color: var(--text);
}
gmp-place-autocomplete::part(prediction-item):hover,
gmp-place-autocomplete::part(prediction-item-selected),
gmp-place-autocomplete::part(suggestion-item):hover {
  background: var(--surface-2);
}
/* Constrain the dropdown panel to the host's width — PAE's default
   sizing can exceed the host in narrow modal columns and spill past
   the modal edge. !important is needed to beat the inline width PAE
   sets via JS. */
gmp-place-autocomplete {
  position: relative; /* anchor absolute-positioned dropdown to the host */
}
gmp-place-autocomplete::part(prediction-list),
gmp-place-autocomplete::part(predictions-container),
gmp-place-autocomplete::part(predictions) {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  inset-inline-start: 0 !important;
  inset-inline-end: auto !important;
  box-sizing: border-box !important;
}

/* Light-DOM fallback: if PAE renders the suggestions as a sibling/child
   custom element rather than inside its shadow tree, force light colors
   on those elements too. Harmless when not present. */
gmp-place-autocomplete-suggestion,
gmp-place-autocomplete-suggestion *,
.gmp-pac-container,
.pac-container {
  color-scheme: light;
  background-color: var(--surface);
  color: var(--text);
}

/* Settings autosave toast (bottom-left in RTL, fixed). */
.autosave-indicator {
  position: fixed;
  bottom: 18px;
  inset-inline-start: 18px;
  background: #1a1a17;
  color: #fafaf9;
  font-size: 13px;
  font-weight: 500;
  padding: 8px 14px;
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .18s ease, transform .18s ease;
  pointer-events: none;
  z-index: 9000;
}
.autosave-indicator.visible {
  opacity: 1;
  transform: translateY(0);
}
.autosave-indicator.saved   { background: #15803d; }
.autosave-indicator.error   { background: #b91c1c; }
.autosave-indicator.saving  { background: #1a1a17; }

/* ============================================================
   Template composer (/whatsapp/templates/compose) — WAGate-style
   builder: form column + sticky live phone preview.
   ============================================================ */

.tplc-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 20px;
  align-items: start;
}
/* Several composer elements carry display-setting classes (grid/flex), which
   beat the UA's [hidden]{display:none} — without this the "hidden" emoji
   popover sits open over the textarea and blocks typing. */
.tplc-layout [hidden] { display: none !important; }
/* Bare inputs/textareas in the composer get the same look as .auth-field
   inputs — they live outside .auth-field wrappers (toolbars, rows). */
.tplc-layout input[type="text"],
.tplc-layout textarea {
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  font: inherit;
  font-size: 13.5px;
  color: var(--text);
  transition: border-color 0.12s, box-shadow 0.12s;
  box-sizing: border-box;
}
.tplc-layout textarea { width: 100%; resize: vertical; line-height: 1.6; }
.tplc-layout input[type="text"]:focus,
.tplc-layout textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.tplc-layout input[readonly] { background: var(--surface-2); color: var(--text-3); }
.tplc-phone-col { position: sticky; top: 16px; }
.tplc-phone-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-3);
  margin-bottom: 10px;
}
@media (max-width: 1100px) {
  .tplc-layout { grid-template-columns: 1fr; }
  .tplc-phone-col { position: static; order: 2; }
}

/* Segmented icon toggle (WAGate .env-toggle) — used for message type,
   category and header type. */
.seg-toggle {
  display: inline-flex;
  flex-wrap: wrap;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 3px;
  gap: 2px;
  width: fit-content;
  max-width: 100%;
}
.seg-toggle button {
  border: none;
  background: transparent;
  font-size: 12.5px;
  font-weight: 600;
  font-family: inherit;
  color: var(--text-3);
  padding: 6px 12px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.1s ease, color 0.1s ease;
}
.seg-toggle button:hover { color: var(--text-2); }
.seg-toggle button.on {
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-sm);
}
.seg-toggle button.on svg { color: var(--accent); }
.seg-toggle.seg-sm button { padding: 4px 9px; font-size: 11.5px; }
.seg-toggle.seg-sm { background: var(--surface); }
.seg-toggle button:disabled { opacity: 0.5; cursor: default; }

/* Quick-start preset tiles */
.tplc-presets {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}
.tplc-preset {
  text-align: start;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 12px;
  background: var(--surface);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: inherit;
  transition: border-color 0.1s ease, box-shadow 0.1s ease;
}
.tplc-preset:hover { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.tplc-preset .t { font-size: 13px; font-weight: 600; color: var(--text); display: flex; align-items: center; gap: 6px; }
.tplc-preset .t svg { color: var(--accent); }
.tplc-preset .d { font-size: 11.5px; color: var(--text-3); line-height: 1.5; }

/* Variable chips — insert a NAMED token at the cursor */
.tplc-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tplc-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text-2);
  cursor: pointer;
  font-size: 12px;
  font-family: inherit;
  line-height: 1;
  padding: 5px 10px;
  border-radius: 999px;
  transition: border-color 0.1s ease, color 0.1s ease, background 0.1s ease;
}
.tplc-chip:hover { border-color: var(--accent); color: var(--accent-text); background: var(--accent-soft); }
.tplc-chip svg { color: var(--accent); }

/* Body formatting toolbar */
.tplc-toolbar { display: flex; align-items: center; gap: 4px; }
.tplc-toolbar .fmt {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 7px;
  color: var(--text-2);
  cursor: pointer;
  font-size: 13px;
  font-family: inherit;
  padding: 0;
}
.tplc-toolbar .fmt:hover { background: var(--surface-2); color: var(--text); }
.tplc-toolbar .fmt b { font-weight: 700; }
.tplc-count { font-size: 11px; color: var(--text-4); font-variant-numeric: tabular-nums; margin-inline-start: auto; }
.tplc-count.over { color: var(--red); font-weight: 600; }

/* Emoji popover */
.tplc-emoji-wrap { position: relative; }
.tplc-emoji-pop {
  position: absolute;
  top: 32px;
  inset-inline-end: 0;
  z-index: 30;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow-pop);
  padding: 8px;
  display: grid;
  grid-template-columns: repeat(8, 28px);
  gap: 2px;
}
.tplc-emoji-pop button {
  border: none;
  background: transparent;
  font-size: 17px;
  cursor: pointer;
  border-radius: 6px;
  padding: 2px;
  line-height: 1.3;
}
.tplc-emoji-pop button:hover { background: var(--surface-2); }

/* Button rows (`+ הוסף כפתור`) */
.tplc-btn-rows { display: flex; flex-direction: column; gap: 8px; }
.tplc-btn-row {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 10px;
  background: var(--surface-2);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tplc-btn-row .row-top { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.tplc-add-btn {
  border: 1px dashed var(--border-strong);
  background: transparent;
  color: var(--text-2);
  border-radius: var(--r-md);
  padding: 9px 12px;
  font-size: 12.5px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  justify-content: center;
}
.tplc-add-btn:hover { border-color: var(--accent); color: var(--accent-text); background: var(--accent-soft); }

/* Unsubscribe helper row */
.tplc-unsub {
  border-top: 1px dashed var(--divider);
  padding-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tplc-unsub .link {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 12px;
  color: var(--text-3);
  direction: ltr;
  text-align: end;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Sticky action bar at the bottom of the form column */
.tplc-actions {
  position: sticky;
  bottom: 0;
  background: linear-gradient(to top, var(--bg, #faf9f7) 75%, transparent);
  padding: 14px 0 4px;
  display: flex;
  gap: 10px;
  align-items: center;
  z-index: 5;
}
.tplc-why { font-size: 12px; color: var(--amber); }

/* ---------- WhatsApp phone mockup (ported from WAGate) ----------
   Namespaced under .wamock — `.phone` is taken by chat/checkin rows. */
.wamock {
  width: 290px;
  margin: 0 auto;
  background: #000;
  border-radius: 34px;
  padding: 9px;
  box-shadow: var(--shadow-lg), inset 0 0 0 2px #2a2a2a;
  position: relative;
  overflow: hidden;
}
.wam-notch {
  position: absolute;
  top: 9px;
  left: 50%;
  transform: translateX(-50%);
  width: 110px;
  height: 22px;
  background: #000;
  border-radius: 0 0 14px 14px;
  z-index: 5;
}
.wam-statusbar {
  background: #008069;
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 7px 18px 4px;
  font-size: 11.5px;
  font-weight: 600;
  border-radius: 26px 26px 0 0;
  direction: ltr;
}
.wam-status-icons { display: flex; align-items: center; gap: 4px; }
.wam-batt { width: 16px; height: 9px; border: 1.3px solid #fff; border-radius: 2.5px; position: relative; }
.wam-batt::after { content: ""; position: absolute; inset: 1.3px; background: #fff; border-radius: 1px; }
.wam-header {
  background: #008069;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px 11px;
}
.wam-header > svg:first-child { transform: scaleX(-1); }
.wam-ava {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .25);
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 700;
  direction: ltr;
  flex-shrink: 0;
}
.wam-name { font-size: 14px; font-weight: 600; line-height: 1.2; }
.wam-presence { font-size: 11px; opacity: .8; }
.wam-chat {
  background: #e4ddd4;
  background-image: radial-gradient(rgba(0, 0, 0, .025) 1px, transparent 1px);
  background-size: 18px 18px;
  min-height: 380px;
  padding: 14px 12px 20px;
  border-radius: 0 0 26px 26px;
}
.wam-day { text-align: center; margin-bottom: 12px; font-size: 10.5px; color: #5b6168; }
.wam-day span { background: #fff; padding: 3px 9px; border-radius: 6px; }
.wam-bubble {
  background: #fff;
  border-radius: 9px 9px 2px 9px;
  padding: 7px 9px 5px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .12);
  max-width: 232px;
  position: relative;
}
.wam-img {
  height: 110px;
  border-radius: 6px;
  background: linear-gradient(135deg, #d7dde3, #c3cbd3);
  display: grid;
  place-items: center;
  color: #8a95a0;
  margin-bottom: 6px;
  overflow: hidden;
}
/* With a real image the frame follows the picture's own aspect ratio
   (WhatsApp shows header images uncropped) — the fixed 110px band is only
   the empty-state placeholder. */
.wam-img.has-img { height: auto; background: none; }
.wam-img img { width: 100%; height: auto; display: block; }
.wam-btext { font-weight: 700; font-size: 13.5px; color: #111b21; margin-bottom: 4px; direction: rtl; text-align: right; white-space: pre-wrap; }
.wam-body { font-size: 13px; line-height: 1.42; color: #111b21; white-space: pre-wrap; direction: rtl; text-align: right; word-break: break-word; }
.wam-body code { font-family: var(--mono, ui-monospace, monospace); }
.wam-footer { font-size: 11px; color: #667781; margin-top: 6px; direction: rtl; text-align: right; }
.wam-time { font-size: 10px; color: #667781; text-align: left; margin-top: 2px; direction: ltr; }
.wam-btns { margin-top: 4px; display: flex; flex-direction: column; gap: 3px; max-width: 232px; }
.wam-btn {
  background: #fff;
  color: #1ea7c5;
  font-size: 13px;
  font-weight: 500;
  text-align: center;
  padding: 8px;
  border-radius: 9px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .1);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}
.wam-btn svg { color: #1ea7c5; flex-shrink: 0; }

/* ── Dashboard v2 (2026-07: type-aware overview) ───────────────────────── */

/* Countdown / status pills in the page header */
.dash-countdown {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--green-soft);
  color: var(--green);
  border: 1px solid var(--green-border);
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
}
.dash-countdown.past { background: var(--surface-2); color: var(--text-3); border-color: var(--border); }
.dash-countdown.closed { background: var(--amber-soft); color: var(--amber); border-color: var(--amber-border); }

/* Alert strips under the stat tiles */
.dash-alert {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  background: var(--surface);
  margin: -8px 0 16px;
}
.dash-alert .text { flex: 1; min-width: 0; font-size: 13px; }
.dash-alert .text b { display: block; font-weight: 600; }
.dash-alert .text .sub { font-size: 12px; color: var(--text-3); }
.dash-alert.red { border-color: var(--red-border); background: var(--red-soft); }
.dash-alert.red > svg, .dash-alert.red .icon { color: var(--red); flex-shrink: 0; }
.dash-alert.amber { border-color: var(--amber-border); background: var(--amber-soft); }
.dash-alert.amber > svg, .dash-alert.amber .icon { color: var(--amber); flex-shrink: 0; }

/* RSVP split bar — one horizontal stacked bar, proportional segments */
.split-bar {
  display: flex;
  height: 14px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--surface-3);
  gap: 2px;
}
.split-bar .seg { min-width: 4px; }
.split-bar .seg.green { background: var(--green); }
.split-bar .seg.amber { background: #d97706; }
.split-bar .seg.gray  { background: var(--text-4); }
.split-bar .seg.red   { background: var(--red); }

.split-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 10px;
  font-size: 12.5px;
  color: var(--text-2);
}
.split-legend .item { display: inline-flex; align-items: center; gap: 6px; }
.split-legend .item b { color: var(--text); font-variant-numeric: tabular-nums; }
.split-legend .item .sub { color: var(--text-3); font-size: 11.5px; }
.split-legend .swatch { width: 8px; height: 8px; border-radius: 2px; }
.split-legend .swatch.green { background: var(--green); }
.split-legend .swatch.amber { background: #d97706; }
.split-legend .swatch.gray  { background: var(--text-4); }
.split-legend .swatch.red   { background: var(--red); }

/* Three small numbers inside a section (below the split bar) */
.mini-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--divider);
}
.mini-strip .cell .k {
  font-size: 18px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  color: var(--text);
}
.mini-strip .cell .d { font-size: 11.5px; color: var(--text-3); margin-top: 2px; }

/* Per-ticket-type sales rows (paid events) */
.tt-rows { display: flex; flex-direction: column; }
.tt-row {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr) auto;
  align-items: center;
  gap: 14px;
  padding: 9px 0;
  border-bottom: 1px solid var(--divider);
}
.tt-row:last-child { border-bottom: none; }
.tt-row .tt-name { min-width: 0; }
.tt-row .tt-name b { display: block; font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tt-row .tt-name .sub { font-size: 11.5px; color: var(--text-3); }
.tt-row .tt-progress { display: flex; align-items: center; gap: 10px; min-width: 0; }
.tt-row .tt-progress .track {
  flex: 1;
  height: 6px;
  background: var(--surface-3);
  border-radius: 999px;
  overflow: hidden;
}
.tt-row .tt-progress .fill { height: 100%; background: var(--green); border-radius: 999px; }
.tt-row .tt-progress .sub { font-size: 11.5px; color: var(--text-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.tt-row .tt-revenue { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tt-nudge {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 12px;
  padding: 8px 12px;
  border-radius: var(--r-md, 8px);
  background: var(--amber-soft);
  border: 1px solid var(--amber-border);
  color: var(--amber);
  font-size: 12.5px;
  font-weight: 500;
}

/* Taller momentum chart on the dashboard */
.mini-bars.tall { height: 72px; gap: 4px; }

/* Capacity-legend swatch must track the bar's amber/red escalation */
.capacity-legend .swatch.amber { background: #d97706; }
.capacity-legend .swatch.red { background: var(--red); }

@media (max-width: 700px) {
  .mini-strip { grid-template-columns: 1fr; gap: 10px; }
  .tt-row { grid-template-columns: minmax(0, 1fr) auto; }
  .tt-row .tt-progress { grid-column: 1 / -1; }
  /* Pin the ₪ next to the name — sparse auto-placement would otherwise
     strand it alone on a third row below the full-width progress bar. */
  .tt-row .tt-revenue { grid-row: 1; grid-column: 2; }
  .dash-alert { flex-wrap: wrap; }
}

/* ===== List upload — AI column mapping + confirm preview ===== */
.upload-alert { margin-top: 12px; padding: 10px 12px; border-radius: 8px; background: var(--red-soft); border: 1px solid var(--red-border); color: var(--red); font-size: 13px; }
.modal-icon.warn { background: var(--amber-soft); color: var(--amber); }
.modal-actions.col { flex-direction: column; align-items: stretch; }
.modal-actions.col .btn { width: 100%; justify-content: center; }
.modal-actions.col .btn.sm { padding: 6px 10px; font-size: 12px; }
.modal-sub { color: var(--text-3); font-size: 13px; margin: -4px 0 14px; line-height: 1.5; }

.mini-chip { display: inline-block; padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: 600; white-space: nowrap; }
.mini-chip.warn { background: var(--amber-soft); color: var(--amber); border: 1px solid var(--amber-border); }
.mini-chip.bad  { background: var(--red-soft);   color: var(--red);   border: 1px solid var(--red-border); }

/* (b) column-mapping review */
.map-rows { display: flex; flex-direction: column; gap: 8px; max-height: 52vh; overflow-y: auto; padding: 2px; }
.map-row { display: grid; grid-template-columns: 1fr auto minmax(150px, 200px); align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); }
.map-row.uncertain { border-color: var(--amber-border); background: var(--amber-soft); }
.map-src { min-width: 0; }
.map-head { font-weight: 600; font-size: 13px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.map-head .muted { color: var(--text-4); font-weight: 500; }
.map-vals { font-size: 12px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; direction: ltr; text-align: right; unicode-bidi: plaintext; }
.map-arrow { color: var(--text-4); font-size: 14px; display: flex; align-items: center; gap: 6px; }
.map-sel { width: 100%; padding: 7px 8px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface); color: var(--text); font-size: 13px; }

/* (c) detected-numbers preview */
.prev-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 8px; margin-bottom: 14px; }
.prev-tile { text-align: center; padding: 10px 6px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); }
.prev-tile .pv { font-size: 22px; font-weight: 700; color: var(--text); line-height: 1.1; }
.prev-tile .pl { font-size: 11px; color: var(--text-3); margin-top: 3px; }
.prev-tile.ok .pv { color: var(--green); }
.prev-tile.new .pv { color: var(--accent); }
.prev-tile.bad { background: var(--red-soft); border-color: var(--red-border); }
.prev-tile.bad .pv { color: var(--red); }
.prev-tile.warn { background: var(--amber-soft); border-color: var(--amber-border); }
.prev-tile.warn .pv { color: var(--amber); }

.prev-cols { font-size: 12px; color: var(--text-3); margin-bottom: 12px; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.prev-cols .pc-title { font-weight: 600; color: var(--text-2); width: 100%; margin-bottom: 2px; }
.prev-cols .pc { background: var(--surface-3); border-radius: 6px; padding: 2px 8px; }
.prev-cols .pc b { color: var(--accent-text); }

.prev-sample-wrap { max-height: 40vh; overflow: auto; border: 1px solid var(--border); border-radius: 10px; }
.prev-sample { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.prev-sample th, .prev-sample td { text-align: right; padding: 7px 10px; border-bottom: 1px solid var(--border); }
.prev-sample tr:last-child td { border-bottom: 0; }
.prev-sample th { position: sticky; top: 0; background: var(--surface-2); font-weight: 600; color: var(--text-2); z-index: 1; }
.prev-sample tr.inv td { background: var(--red-soft); }
.prev-sample tr.nm td { background: var(--amber-soft); }
.prev-sample .mono { font-family: var(--font-mono, ui-monospace, monospace); }
.prev-sample .ltr { direction: ltr; text-align: right; unicode-bidi: plaintext; }

@media (max-width: 640px) {
  .map-row { grid-template-columns: 1fr auto; }
  .map-row .map-sel { grid-column: 1 / -1; }
}

/* Dropzone "reading the file" pulse (auto-processing after select/drop) */
.dropzone.loading { pointer-events: none; animation: dz-pulse 1.2s ease-in-out infinite; }
@keyframes dz-pulse { 0%, 100% { border-color: var(--border-strong); } 50% { border-color: var(--accent); } }

/* AI-inspired "thinking" animation (shown while Gemini maps the columns) */
.upload-step.ai .num { background: linear-gradient(135deg, var(--accent), #d33f58); color: #fff; box-shadow: 0 2px 8px var(--accent-ring); }
.tpl-thinking { padding: 14px 6px 6px; text-align: center; }
.ai-orb { width: 84px; height: 84px; border-radius: 50%; margin: 4px auto 20px; position: relative; display: grid; place-items: center;
  background: conic-gradient(from 0deg, var(--accent), #d33f58, var(--blue), var(--accent));
  animation: ai-spin 3.2s linear infinite; }
.ai-orb::after { content: ''; position: absolute; inset: 5px; border-radius: 50%; background: var(--surface); }
.ai-orb .ai-glyph { position: relative; z-index: 1; color: var(--accent); display: grid; place-items: center; animation: ai-pulse 1.6s ease-in-out infinite; }
.ai-bars { display: flex; flex-direction: column; gap: 8px; max-width: 260px; margin: 0 auto; }
.ai-bars .ai-bar { height: 10px; border-radius: 6px;
  background: linear-gradient(90deg, var(--surface-3) 0%, var(--surface-3) 38%, var(--accent-soft) 50%, var(--surface-3) 62%, var(--surface-3) 100%);
  background-size: 220% 100%; animation: ai-shimmer 1.4s linear infinite; }
.ai-bars .ai-bar:nth-child(2) { width: 82%; animation-delay: .18s; }
.ai-bars .ai-bar:nth-child(3) { width: 60%; animation-delay: .36s; }
.ai-say { margin-top: 18px; font-weight: 700; color: var(--text); }
.ai-say::after { content: '…'; animation: ai-dots 1.4s steps(4, end) infinite; }
.ai-sub { margin-top: 4px; font-size: 12px; color: var(--text-3); }
@keyframes ai-spin { to { transform: rotate(360deg); } }
@keyframes ai-pulse { 0%, 100% { transform: scale(1); opacity: .8; } 50% { transform: scale(1.12); opacity: 1; } }
@keyframes ai-shimmer { 0% { background-position: 210% 0; } 100% { background-position: -210% 0; } }
@keyframes ai-dots { 0% { content: ''; } 25% { content: '.'; } 50% { content: '..'; } 75%, 100% { content: '…'; } }
@media (prefers-reduced-motion: reduce) {
  .ai-orb, .ai-orb .ai-glyph, .ai-bars .ai-bar, .ai-say::after { animation: none; }
  .ai-orb { background: var(--accent); }
}