/* ==========================================================================
   Expo Event —    Global Design System: shared primitives used by all roles.
   Cloudflare-dashboard aesthetic: near-white background, white grouped
   sidebar, topbar with search, 1px bordered flat cards, 10px body type.
   All pages/components reuse these primitives — no per-page CSS.
   ========================================================================== */

:root {
  --bg: #f6f7f9;
  --surface: #ffffff;
  --border: #e5e7eb;
  --border-soft: #eef0f3;
  --text: #111827;
  --text-2: #4b5563;
  --muted: #9ca3af;
  --brand: #4f46e5;
  --brand-dark: #4338ca;
  --brand-soft: #eef2ff;
  --success: #16a34a;
  --success-soft: #dcfce7;
  --warning: #d97706;
  --warning-soft: #fef3c7;
  --danger: #dc2626;
  --danger-soft: #fee2e2;
  --info: #0284c7;
  --info-soft: #e0f2fe;
  --radius: 10px;
  --radius-sm: 7px;
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05);
  --shadow-md: 0 8px 24px rgba(15, 23, 42, 0.08);
  --sidebar-w: 248px;
  --topbar-h: 60px;
  --font: "Inter", -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* --- reset / base ------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 10px;
  line-height: 1.55;
  color: var(--text);
  background: var(--bg);
}
.not-found-main {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}
.not-found-card {
  max-width: 420px;
}
.not-found-home {
  margin-top: 12px;
}
h1, h2, h3, h4 { margin: 0 0 8px; font-weight: 700; line-height: 1.3; }
h1 { font-size: 16px; }
h2 { font-size: 14px; }
h3 { font-size: 12px; }
p { margin: 0 0 10px; color: var(--text-2); }
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; }
button { font-family: inherit; }

/* --- app layout ---------------------------------------------------------- */
.app { display: flex; min-height: 100vh; }
.sidebar {
  width: var(--sidebar-w);
  flex: 0 0 var(--sidebar-w);
  background: var(--surface);
  border-right: 1px solid var(--border);
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  z-index: 40;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--border-soft);
  font-size: 12px;
  font-weight: 800;
  color: var(--text);
}
.brand:hover { text-decoration: none; }
.brand-mark {
  width: 30px; height: 30px;
  border-radius: 8px;
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 12px;
}
/* Brand logo: the owner's logo.png, used as the brand mark everywhere the
   "E" letter used to be (top bar, sidebars, user page). */
.brand-mark-img { width: 30px; height: 30px; object-fit: contain; flex: none; }
.side-nav { padding: 10px 12px 20px; flex: 1; }
.side-section {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  font-weight: 700;
  padding: 14px 10px 6px;
}
.side-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  color: var(--text-2);
  font-size: 10px;
  font-weight: 500;
  margin-bottom: 2px;
}
.side-link:hover { background: #f3f4f6; text-decoration: none; color: var(--text); }
.side-link.active { background: var(--brand-soft); color: var(--brand); font-weight: 700; }
.side-link .icon { width: 18px; text-align: center; }
.side-link.has-submenu::after {
  content: '';
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  margin-left: auto;
  color: var(--muted);
  transform: rotate(45deg) translateY(-2px);
  transition: transform .18s ease, color .18s ease;
}
.side-link.has-submenu.has-open-submenu::after {
  color: var(--brand);
  transform: rotate(225deg) translateY(-2px);
}

/* --- sidebar sub-menus (nested under parent link) --------------------------- */
.side-submenu {
  margin: 0 0 4px 18px;
  padding-left: 10px;
  border-left: 2px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.side-sublink {
  display: block;
  padding: 6px 10px;
  border-radius: 6px;
  color: var(--text-2);
  font-size: 10px;
  font-weight: 500;
}
.side-sublink:hover { background: #f3f4f6; text-decoration: none; color: var(--text); }
.side-sublink.active { background: var(--brand-soft); color: var(--brand); font-weight: 700; }
/* Drawer icons on submenu items (owner, 2026-11-01): same 18px centered
   column as the main links. The label span keeps data-i18n, never the
   icon span — i18n rewrites the whole text of its own element. */
.side-sublink .icon { display: inline-block; width: 18px; text-align: center; margin-right: 6px; }
.user-event-submenu .tab-btn {
  display: block;
  width: 100%;
  border: 0;
  padding: 6px 10px;
  border-radius: 6px;
  background: none;
  color: var(--text-2);
  font: inherit;
  font-size: 10px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}
.user-event-submenu .tab-btn:hover { background: #f3f4f6; color: var(--text); }
.user-event-submenu .tab-btn.active {
  background: var(--brand-soft);
  color: var(--brand);
  font-weight: 700;
}

/* --- inline role editor (user management) ----------------------------------- */
.role-expand-row td.role-expand-cell {
  background: var(--bg-soft, #f8fafc);
  padding: 16px 20px;
  border-bottom: 2px solid var(--border);
}
.role-expand-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.role-expand-head .btn { margin-left: auto; }
.role-current { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.role-pill { display: inline-flex; align-items: center; gap: 4px; }
.role-add-row { display: flex; align-items: end; gap: 10px; flex-wrap: wrap; }
.role-add-row .select { max-width: 240px; }

/* --- inline verify editor (user management) -------------------------------- */
.verify-expand-row td.verify-expand-cell {
  background: var(--bg-soft, #f8fafc);
  padding: 16px 20px;
  /* White frame around the open panel (owner, 2026-11-08). */
  border: 1px solid #ffffff;
}
/* Dark mode: --bg-soft is not defined anywhere, so the cell fell back to
 * the light #f8fafc and showed as a white strip around the dark cards
 * (owner, 2026-11-08). The role editor cell had the same fault. */
[data-theme="dark"] .verify-expand-row td.verify-expand-cell,
[data-theme="dark"] .role-expand-row td.role-expand-cell {
  background: var(--surface);
}
.verify-expand-foot { display: flex; gap: 10px; margin-top: 16px; }
.verify-field-row { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.verify-field-label { flex: 0 0 180px; font-weight: 600; font-size: 10px; }
.verify-field-value { flex: 1; font-size: 10px; }
.verify-field-actions { display: flex; gap: 6px; }
.verify-slot-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; }

/* --- reference-style verify cards (passport / visa / license / business card) */
.vsec-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 14px;
}
.vsec-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.vsec-actions { display: flex; gap: 8px; align-items: center; }
/* Business license type switch (admin verify panel, owner 2026-11-08). */
.vsec-license-switch { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.vsec-title { display: flex; align-items: center; gap: 8px; }
.vsec-title h4 { margin: 0; font-size: 12px; font-weight: 700; }
.vsec-icon { font-size: 15px; }
.vsec-cols { display: grid; grid-template-columns: 1fr 240px; gap: 14px; }
@media (max-width: 720px) { .vsec-cols { grid-template-columns: 1fr; } }
.vsec-fields { border: 1px solid var(--border); border-radius: 10px; padding: 4px 12px; }
.vfield-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border); }
.vfield-row:last-child { border-bottom: 0; }
/* Failed server validation on submit: red outline so the admin sees which
   field to fix (the toast names it too). */
.vfield-row.vfield-invalid { outline: 1px solid var(--danger); outline-offset: -1px; border-radius: 6px; background: color-mix(in srgb, var(--danger) 8%, transparent); }
.vfield-dot { width: 22px; height: 22px; border-radius: 50%; border: 2px solid #cbd5e1; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; color: #fff; }
.vfield-dot.on { background: #f59e0b; border-color: #f59e0b; }
.vfield-dot.on::after { content: '✓'; }
.vfield-text { flex: 1; min-width: 0; }
.vfield-label { font-size: 10px; font-weight: 600; color: var(--text-2); }
.vfield-value { font-size: 10px; word-break: break-word; }
.vfield-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.vsec-docs { display: flex; flex-direction: column; gap: 10px; }
.vdoc-card { border: 1px solid var(--border); border-radius: 10px; padding: 10px; text-align: center; }
.vdoc-title { font-size: 10px; font-weight: 700; margin-bottom: 8px; }
.vdoc-img { width: 100%; max-height: 150px; object-fit: cover; border-radius: 8px; margin-bottom: 8px; }
.vdoc-actions { display: flex; gap: 8px; justify-content: center; }
.vdoc-empty { padding: 18px 0 8px; }
.vdoc-empty-icon { display: block; width: 34px; height: 34px; margin: 0 auto 8px; border-radius: 50%; background: #f1f5f9; color: #94a3b8; font-size: 18px; line-height: 34px; }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
  height: var(--topbar-h);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 20px;
  position: sticky;
  top: 0;
  z-index: 100;
}
.hamburger {
  display: none;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 8px;
  width: 36px; height: 36px;
  font-size: 17px;
  cursor: pointer;
  color: var(--text-2);
}
.search-wrap { flex: 1; max-width: 480px; position: relative; }
.search-wrap .search-icon { position: absolute; right: 11px; top: 50%; transform: translateY(-50%); color: var(--muted); }
.search-input {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  padding: 8px 34px 8px 12px;
  font-size: 10px;
  color: var(--text);
}
.search-input:focus { outline: none; border-color: var(--brand); background: #fff; box-shadow: 0 0 0 3px var(--brand-soft); }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
/* Centered toolbar group: language dropdown (desktop). The role switcher
   lives at the right of the topbar, next to the avatar. */
.topbar-center {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
}
.role-select {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  padding: 7px 8px;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-2);
  cursor: pointer;
  max-width: 150px;
}
/* Drawer role section: the role switcher lives in the left drawer.
   Label and dropdown sit on ONE line (owner, 2026-10-23): the label is
   inline at the left and the dropdown takes the rest of the row. */
.drawer-role { padding: 10px 12px; border-bottom: 1px solid var(--border); margin-bottom: 8px; }
.drawer-role > div { display: flex; align-items: center; gap: 10px; }
.drawer-role label { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-bottom: 0; flex: 0 0 auto; }
.drawer-role .role-select { flex: 1 1 auto; width: auto; max-width: none; min-width: 0; }
/* Topbar Loyalty Points chip — sits in the top-right corner where the
   role switcher used to be (owner, 2026-10-23). */
/* Promotion ads (owner, 2026-11-09): each block's Copy sits at the
   block's top-right, beside its label — the agent style — on BOTH the
   agent and moderator pages, instead of under the textarea. Moved here
   from agent.css so the moderator page shares the same rule. */
.promoads-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.promoads-head label { margin: 0; }

.loyalty-chip { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 5px; border-radius: 999px; background: linear-gradient(135deg, #fff8e1, #ffecb3); border: 1px solid #f0d060; white-space: nowrap; cursor: pointer; }
.loyalty-chip:hover { filter: brightness(.98); box-shadow: 0 2px 8px rgba(245, 179, 1, .25); }
.loyalty-coin { width: 24px; height: 24px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ffe082, #f5b301); color: #7a5200; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .55), 0 1px 2px rgba(122, 82, 0, .25); }
.loyalty-meta { display: inline-flex; flex-direction: column; line-height: 1.1; }
.loyalty-label { font-size: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #9a7200; }
.loyalty-value { font-size: 14px; font-weight: 800; color: #7a5200; }
@media (max-width: 640px) { .loyalty-label { display: none; } .loyalty-value { font-size: 12px; } }
@media (max-width: 960px) {
  .topbar-right #role-slot:has(.loyalty-chip) {
    display: inline-flex;
  }
  .topbar-right #role-slot:has(.loyalty-chip) .loyalty-chip {
    gap: 5px;
    padding: 3px 7px 3px 4px;
  }
  .topbar-right #role-slot:has(.loyalty-chip) .loyalty-coin {
    width: 22px;
    height: 22px;
    font-size: 11px;
  }
}
.lang-select {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  padding: 7px 8px;
  font-size: 10px;
  color: var(--text-2);
  cursor: pointer;
}
.auth-area { display: flex; align-items: center; gap: 10px; }
.user-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 5px 12px 5px 5px;
  background: var(--surface);
  font-size: 10px;
  font-weight: 600;
}
.user-avatar {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
}
.content { padding: 24px; width: 100%; flex: 1; }
.footer {
  border-top: 1px solid var(--border);
  background: var(--surface);
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px 28px;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: 10px;
}
.footer nav { display: flex; gap: 16px; }

/* --- cards / sections ----------------------------------------------------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow-sm);
}
.card + .card { margin-top: 16px; }
.card-title { font-size: 12px; font-weight: 700; margin: 0 0 4px; }
.card-sub { color: var(--muted); font-size: 10px; margin: 0 0 16px; }
.section-head { display: flex; align-items: center; justify-content: space-between; margin: 26px 0 8px; }
/* Global body rule: a page's first header starts exactly at the content
   padding (24px desktop, 16px mobile) — the same top gap as .page-head
   pages — instead of adding the section divider's 26px on top of it. */
.content > .section-head:first-child { margin-top: 0; }
.section-head h2 { margin: 0; }

/* --- buttons --------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 9px 16px;
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.05s ease;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-dark); text-decoration: none; color: #fff; }
.btn-action-edit {
  background: #fef3c7;
  border-color: #fcd34d;
  color: #92400e;
}
.btn-action-edit:hover { background: #fde68a; color: #78350f; }
.btn-secondary { background: var(--surface); border-color: var(--border); color: var(--text); }
.btn-secondary:hover { background: #f9fafb; text-decoration: none; }
.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover { background: #b91c1c; color: #fff; text-decoration: none; }
.btn-ghost { background: transparent; color: var(--text-2); }
.btn-ghost:hover { background: #f3f4f6; text-decoration: none; }
.btn-sm { padding: 6px 12px; font-size: 10px; }
.btn[disabled] { opacity: 0.55; cursor: not-allowed; }
.btn-registered {
  background: #bbf7d0;
  border-color: #86efac;
  color: #166534;
  cursor: default;
  font-weight: 700;
}
.btn-registered:disabled { opacity: 1; }
.btn-registered-pending {
  background: #fef3c7;
  border-color: #fcd34d;
  color: #92400e;
}
.btn-selected {
  background: #bbf7d0;
  border-color: #86efac;
  color: #166534;
}
.btn-rewarding {
  background: #fef3c7;
  border-color: #fcd34d;
  color: #a16207;
}
.btn-action-success {
  border: 1px solid #86efac;
  background: #16a34a;
  color: #fff;
}
.btn-action-success:hover { background: #15803d; }
.btn-danger-ghost { color: var(--danger, #dc2626); }

/* --- forms ----------------------------------------------------------------- */
/* One shared form card: full width (the About and Company Profile public
   pages keep their own narrower .public-content-card). */
.form-card { max-width: none; }
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 10px; font-weight: 600; color: var(--text-2); margin-bottom: 6px; }
.input, .select, .textarea {
  width: 100%;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: var(--surface);
  padding: 9px 12px;
  font-size: 10px;
  color: var(--text);
  font-family: inherit;
}
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft);
}
.textarea { min-height: 90px; resize: vertical; }
.field-hint { font-size: 10px; color: var(--muted); margin-top: 4px; }
.field-error { font-size: 10px; color: var(--danger); margin-top: 4px; }

/* Global native controls: pages may use plain inputs instead of the shared
   class names, so keep their interaction and contrast consistent too. */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
select,
textarea {
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: var(--surface);
  padding: 9px 12px;
  color: var(--text);
  font: inherit;
}
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):hover,
select:hover,
textarea:hover {
  border-color: color-mix(in srgb, var(--brand) 45%, var(--border));
}
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 1px;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft);
}
input::placeholder,
textarea::placeholder {
  color: var(--muted);
  opacity: 1;
}
input:disabled,
select:disabled,
textarea:disabled {
  background: var(--bg);
  color: var(--muted);
  cursor: not-allowed;
  opacity: 0.75;
}
input[type="file"] {
  padding: 6px 8px;
  cursor: pointer;
}
input[type="file"]::file-selector-button {
  margin-right: 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
  padding: 5px 9px;
  font: inherit;
  cursor: pointer;
}
input[type="file"]::file-selector-button:hover {
  border-color: var(--brand);
  background: var(--brand-soft);
}

/* --- tables ---------------------------------------------------------------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.table { width: 100%; border-collapse: collapse; font-size: 10px; }
.table th {
  text-align: left;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  font-weight: 700;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  background: #fafbfc;
  white-space: nowrap;
}
.table td { padding: 11px 14px; border-bottom: 1px solid var(--border-soft); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: #fafbfc; }

/* --- badges ---------------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
}
.badge-success { background: var(--success-soft); color: #15803d; }
.badge-warning { background: var(--warning-soft); color: #b45309; }
.badge-danger { background: var(--danger-soft); color: #b91c1c; }
.badge-info { background: var(--info-soft); color: #0369a1; }
.badge-neutral { background: #f3f4f6; color: var(--text-2); }
/* Status pill rendered as a button (e.g. opens the Event Controls dialog) */
button.badge { font: inherit; border: 0; cursor: pointer; }
button.badge:hover { filter: brightness(0.96); }
button.badge:focus-visible { outline: 2px solid var(--primary, #4f46e5); outline-offset: 2px; }
/* Inactive events are dimmed in the moderator event list */
#events-tbody tr.event-inactive { opacity: 0.55; }
#events-tbody tr.event-inactive:hover { opacity: 0.8; }

/* --- toasts (the ONLY popups allowed) --------------------------------------- */
#toasts {
  position: fixed;
  right: 18px;
  bottom: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* Notifications remain visible while the global request loader is active. */
  z-index: 400;
  pointer-events: none;
  max-width: min(360px, calc(100vw - 36px));
}
.toast {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--info);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: 12px 14px;
  font-size: 10px;
  animation: toast-in 0.22s ease;
  pointer-events: auto;
}
.toast-success { border-left-color: var(--success); }
.toast-error { border-left-color: var(--danger); }
.toast-info { border-left-color: var(--info); }
.toast-msg { flex: 1; color: var(--text); }
.toast-close { border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 14px; padding: 0; }
@keyframes toast-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.toast-out { opacity: 0; transform: translateY(8px); transition: opacity 0.2s, transform 0.2s; }

/* --- skeleton loaders -------------------------------------------------------- */
.skeleton {
  position: relative;
  overflow: hidden;
  background: #eceef1;
  border-radius: 6px;
  min-height: 14px;
}
.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.75), transparent);
  animation: shimmer 1.4s infinite;
}
@keyframes shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.skeleton-pill { border-radius: 999px; width: 110px; height: 34px; }
.skeleton-card { height: 220px; border-radius: 13px; }

/* Global: the `hidden` attribute must always win over class display rules
   (e.g. .btn sets display:inline-flex which would otherwise override it). */
[hidden] { display: none !important; }

/* --- event card (legacy purple/blue gradient design — keep as-is) ------------- */
.events-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 18px;
}
/* Scrolling events carousel (homepage, settings-driven). */
.events-carousel {
  overflow: hidden;
  margin-bottom: 24px;
  border-radius: 13px;
  border: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), #fff);
}
.carousel-track {
  display: flex;
  gap: 16px;
  padding: 14px 16px;
  width: max-content;
  will-change: transform;
}
.carousel-card {
  flex: 0 0 auto;
  min-width: 220px;
  max-width: 280px;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg-soft, #f8fafc);
  text-decoration: none;
  color: inherit;
}
.carousel-card-name {
  font-weight: 600;
  font-size: 12px;
  margin-bottom: 4px;
}
.carousel-card-meta {
  font-size: 10px;
  color: var(--muted, #64748b);
}
.event-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 13px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), #fff);
  border: 1px solid var(--border);
  box-shadow: none;
}
.event-card:hover { transform: none; }
#user-dashboard {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}
#user-dashboard .tabs {
  background: transparent;
  border: 0;
  padding: 0;
}
#user-events-grid {
  grid-template-columns: repeat(auto-fit, minmax(240px, 300px));
  justify-content: center;
}
.user-event-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-bottom: 1px solid var(--border);
}
.user-event-tab {
  position: relative;
  border: 0;
  border-bottom: 3px solid transparent;
  background: transparent;
  color: var(--text-2);
  padding: 10px 14px;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.user-event-tab:hover { color: var(--text); }
.user-event-tab.active {
  color: var(--text);
  border-bottom-color: var(--brand);
}
.event-card__hero {
  position: relative;
  padding: 18px 16px 14px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
  color: #fff;
  text-align: center;
}
.event-card__title {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.event-card__meta { display: flex; flex-direction: column; gap: 2px; font-size: 10px; }
.event-card__meta span { color: #fff; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.15); }
.event-card__body { padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.event-card__row { display: flex; justify-content: space-between; gap: 10px; font-size: 10px; }
/* Card labels are bold and dark (reference card design, owner 2026-10-23). */
.event-card__label { color: var(--text); font-weight: 700; }
.event-card__value { color: var(--text); text-align: right; }
.event-card__value.positive { color: var(--success); font-weight: 600; }
.event-card__actions {
  display: flex;
  gap: 10px;
  padding: 0 16px 16px;
  margin-top: auto;
  align-items: center;
}
.event-card__actions .btn { flex: 1; }
.event-card__actions--registered {
  margin: 0;
  padding: 6px 12px;
  background: transparent;
  border-top: 0;
}
.event-card__actions--selected {
  margin: 0;
  padding: 6px 12px;
  background: transparent;
  border-top: 0;
}
.event-card__actions--registered .btn,
.event-card__actions--registered .badge {
  min-height: 28px;
}
.agent-options-drawer {
  margin: 0 0 0 10px;
  padding: 0;
  border: 0;
  background: transparent;
}
.agent-options-list {
  display: grid;
  gap: 1px;
}
.agent-options-list .side-sublink {
  width: 100%;
  text-align: left;
}
.agent-event-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.agent-event-list > .agent-options-drawer {
  margin: 0 0 0 10px;
}
.agent-event-list .side-sublink,
.agent-options-list .side-sublink {
  display: block;
  width: 100%;
  border: 0;
  background: none;
  color: var(--text-2);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.agent-event-list .side-sublink:hover,
.agent-options-list .side-sublink:hover {
  background: #f3f4f6;
  color: var(--text);
}
.agent-event-list .side-sublink.active,
.agent-options-list .side-sublink.active {
  background: var(--brand-soft);
  color: var(--brand);
  font-weight: 700;
}
.loyalty-section { margin-top: 20px; }
.loyalty-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 28px 32px;
  border-radius: 22px;
  color: #fff;
  background: linear-gradient(120deg, #4338ca, #7c3aed 48%, #ec4899);
  box-shadow: 0 16px 34px rgba(99, 102, 241, .2);
}
.loyalty-kicker { font-size: 10px; font-weight: 800; letter-spacing: .16em; opacity: .8; }
.loyalty-hero h1 { margin: 8px 0 6px; font-size: 24px; }
.loyalty-hero p { margin: 0; font-size: 12px; opacity: .85; }
.loyalty-total {
  flex: 0 0 150px;
  min-height: 112px;
  box-sizing: border-box;
  padding: 16px 20px;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 16px;
  background: rgba(255,255,255,.16);
  text-align: center;
}
.loyalty-total-icon { display: block; color: #fde68a; font-size: 24px; }
.loyalty-total strong { display: block; font-size: 30px; line-height: 1; }
.loyalty-total span:last-child { font-size: 10px; opacity: .85; }
.loyalty-hero-panels {
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
  gap: 16px;
  margin-left: auto;
}
.loyalty-red-pocket {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 0 0 150px;
  min-height: 112px;
  box-sizing: border-box;
  padding: 12px 18px;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 16px;
  background: rgba(255,255,255,.12);
  text-align: center;
}
.loyalty-red-pocket-icon { font-size: 30px; line-height: 1; }
.loyalty-red-pocket-label { margin-top: 6px; font-size: 13px; font-weight: 800; }
.loyalty-red-pocket small { margin-top: 3px; font-size: 10px; opacity: .8; }
.loyalty-section-head { margin: 28px 0 14px; }
.loyalty-section-head h2 { margin: 0 0 4px; font-size: 18px; }
.loyalty-section-head p { margin: 0; color: var(--muted); font-size: 11px; }
.loyalty-offers { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }
.loyalty-offer {
  display: flex;
  flex-direction: column;
  min-height: 245px;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: 18px;
  overflow: hidden;
  background: var(--surface);
}
.loyalty-offer-purple { background: linear-gradient(145deg, #f5f3ff, #fff); }
.loyalty-offer-orange { background: linear-gradient(145deg, #fff7ed, #fff); }
.loyalty-offer-blue { background: linear-gradient(145deg, #eff6ff, #fff); }
.loyalty-offer-icon { font-size: 28px; margin-bottom: 14px; }
.loyalty-offer-category { color: var(--brand); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.loyalty-offer h3 { margin: 6px 0 10px; font-size: 15px; }
.loyalty-offer-copy p { margin: 4px 0; font-size: 11px; }
.loyalty-offer-location { font-weight: 700; color: var(--text-2); }
.loyalty-offer-address { color: var(--muted); }
.loyalty-offer-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 18px; }
.loyalty-offer-footer strong { color: var(--brand); font-size: 12px; }
.loyalty-history-section { margin-top: 20px; }
.loyalty-history-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.loyalty-history-row {
  align-items: center;
  min-height: 58px;
  padding: 11px 14px;
  border: 1px solid var(--border);
  border-left: 4px solid var(--brand);
  border-radius: 12px;
  background: linear-gradient(90deg, #f8faff, var(--surface));
  box-shadow: 0 2px 8px rgba(15, 23, 42, .04);
}
.loyalty-history-row--credit { border-left-color: #16a34a; }
.loyalty-history-row--debit { border-left-color: #ef4444; background: linear-gradient(90deg, #fff8f8, var(--surface)); }
.loyalty-history-title,
.loyalty-history-meta,
.loyalty-history-balance {
  display: block;
}
.loyalty-history-title { color: var(--text); font-size: 11px; }
.loyalty-history-meta { margin-top: 4px; color: var(--muted); font-size: 10px; text-transform: capitalize; }
.loyalty-history-value {
  display: flex;
  flex: 0 0 110px;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}
.loyalty-history-points {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  padding: 5px 9px;
  border-radius: 999px;
  background: var(--success-soft);
  color: #15803d;
  font-size: 12px;
}
.loyalty-history-row--debit .loyalty-history-points {
  background: #fee2e2;
  color: #b91c1c;
}
.loyalty-history-balance { color: var(--text-2); font-size: 10px; }
[data-theme="dark"] .loyalty-history-row { background: #18213a; }
[data-theme="dark"] .loyalty-history-row--debit { background: #2a1c2a; }
[data-theme="dark"] .loyalty-history-row--debit .loyalty-history-points { background: #4a2028; color: #fca5a5; }
.loyalty-history-empty {
  display: grid;
  place-items: center;
  min-height: 220px;
  padding: 28px;
  border: 1px dashed var(--border);
  border-radius: 18px;
  background: var(--surface);
  text-align: center;
}
.loyalty-history-icon { color: var(--brand); font-size: 28px; }
.loyalty-history-empty h3 { margin: 8px 0 4px; font-size: 15px; }
.loyalty-history-empty p { margin: 0; color: var(--muted); font-size: 11px; }
@media (min-width: 961px) {
  .loyalty-hero h1 { font-size: 20px; }
  .loyalty-hero p { font-size: 10px; }
  .loyalty-section-head h2 { font-size: 15px; }
  .loyalty-section-head p { font-size: 10px; }
  .loyalty-offer h3 { font-size: 13px; }
  .loyalty-offer-copy p { font-size: 10px; }
  .loyalty-offer-footer strong { font-size: 10px; }
  .loyalty-offer-footer .btn { font-size: 10px; padding: 7px 10px; }
}
@media (max-width: 640px) {
  .loyalty-hero { flex-direction: column; align-items: stretch; padding: 22px; }
  .loyalty-hero-panels { margin-left: 0; flex-direction: column; }
  .loyalty-total,
  .loyalty-red-pocket { flex-basis: auto; width: auto; min-height: 0; }
}
.event-card__reward-status {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  color: #15803d;
  text-align: center;
}
.event-card__reward-status strong { font-size: 15px; }
.event-card__reward-status img {
  display: block;
  width: min(140px, 60%);
  max-height: 100px;
  object-fit: contain;
  border-radius: 6px;
}

/* Selected-user task affordances on the card (owner, 2026-10-25). */
/* The [hidden] override matters: .event-card__body sets display:flex,
 * which would otherwise beat the UA hidden rule. */
.event-card__body[hidden] { display: none; }
.event-card__selected { display: flex; flex-direction: column; gap: 10px; padding: 0 16px 16px; }
/* Upper gap above the buttons (owner, 2026-10-25): when the details body
 * is hidden (the default tasks view), the buttons sit flush against the
 * hero without this — so the gap applies only when the body is hidden.
 * When the body is visible, its own bottom padding already spaces them. */
.event-card__body[hidden] + .event-card__selected { padding-top: 14px; }
.event-card__selected > .btn { width: 100%; }
.event-card__tasks-panel { display: flex; flex-direction: column; gap: 10px; border: 1px solid var(--border); border-radius: 12px; padding: 12px; }
.event-card__tasks-panel[hidden] { display: none; }
.event-card__task-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; border: 1px solid var(--border); border-radius: 10px; padding: 7px 12px; }
.event-card__task-details { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.event-card__task-actions { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 4px; margin-left: auto; }
.event-card__reviewer { line-height: 1; font-size: 16px; }
.event-card__submission-summary { display: flex; align-items: center; justify-content: flex-end; gap: 8px; min-height: 24px; }
.event-card__submission-value { max-width: 150px; overflow-wrap: anywhere; text-align: right; }
.event-card__picture-link { padding: 0; border: 0; background: transparent; color: var(--primary); text-decoration: underline; cursor: pointer; font: inherit; }
.event-card__picture-preview { display: block; max-width: 100%; max-height: 65vh; margin: 0 auto; object-fit: contain; border-radius: 8px; }
.event-card__selfie-choice { display: flex; gap: 12px; }
.event-card__selfie-choice .btn { flex: 1; }
.event-card__camera video { display: block; width: 100%; max-height: 65vh; border-radius: 8px; background: #000; object-fit: contain; }
.event-card__task-kind { font-size: 10px; opacity: 0.75; }

.event-card__tasks-day { font-weight: 700; font-size: 11px; margin-top: 2px; }
.event-card__task-row .btn { flex: 0 0 auto; white-space: nowrap; }
.event-card__tasks-error { color: var(--danger); font-size: 10px; }

@media (max-width: 420px) {
  .event-card__task-row { align-items: flex-start; }
  .event-card__task-details { min-width: 0; }
}

/* Mirror-site card additions */
.event-card__live-banner {
  background: #dc2626;
  color: #fff;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-align: center;
  padding: 6px 8px;
}
.event-card__visitor {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.85);
  margin-top: 4px;
}
.event-card__section { font-size: 10px; line-height: 1.5; }
/* Referral facts stack one per line (reference card design, 2026-10-23). */
.event-card__refrow {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 10px;
  line-height: 1.5;
}
/* Facilities / Target Audience render as light pill chips that wrap. */
.event-card__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.event-card__detail-rows { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; }
.event-card__stacked-rows { display: flex; flex-direction: column; gap: 2px; margin-top: 2px; }
.event-card__stacked-row { line-height: 1.5; }
.event-card__section--incentive {
  padding: 0;
  background: transparent;
}
.event-card__incentive-rows {
  display: grid;
  gap: 5px;
  margin-top: 7px;
}
.event-card__incentive-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 3px 0;
}
.event-card__incentive-name { color: var(--text); font-weight: 500; }
.event-card__incentive-value {
  color: var(--text);
  font-size: 11px;
  white-space: nowrap;
}
.event-card__detail-row {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 5px 8px;
  font-size: 11px;
  line-height: 1.35;
  background: var(--card-bg, #fff);
}
.event-card__section--detail-list .event-card__detail-row { color: var(--text); }
.event-card__chip {
  background: #eef0fe;
  color: #2b3a67;
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.35;
}

/* --- event highlights strip (admin activity page) -------------------------------- */
.hl-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.hl-head .card-title { margin: 0; }
.hl-nav { display: flex; gap: 8px; }
.hl-strip {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 6px;
  scroll-behavior: smooth;
}
.hl-card {
  flex: 0 0 250px;
  max-width: 250px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05);
}
.hl-card__title {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
}
.hl-card__meta { font-size: 10px; color: var(--text-2); }
.hl-card__meta .muted { color: var(--muted); }
.hl-card__actions { margin-top: auto; padding-top: 8px; }
.hl-empty { padding: 18px 8px; }

/* --- empty state (designed; never a blank page) -------------------------------- */
.empty {
  text-align: center;
  padding: 48px 20px;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  grid-column: 1 / -1;
}
.empty-icon {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--brand-soft);
  color: var(--brand);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  margin-bottom: 12px;
}
.empty h3 { margin: 0 0 6px; font-size: 12px; }
.empty p { margin: 0; color: var(--muted); font-size: 10px; }

/* --- hero (Cloudflare-clean; copy is content-driven via i18n/settings) --------- */
.hero {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 44px 32px;
  margin-bottom: 8px;
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(600px 220px at 85% 0%, var(--brand-soft), transparent 70%);
  pointer-events: none;
}
.hero > * { position: relative; }
.hero h1 { font-size: 16px; margin: 0 0 10px; letter-spacing: -0.01em; }
.hero p { font-size: 10px; max-width: 560px; margin: 0 0 20px; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* --- responsive --------------------------------------------------------------- */
/* One shared dark layer for every slide-in drawer (sidebar, profile,
   public nav): it fades in instead of popping, and sits below the drawer. */
.scrim {
  position: fixed;
  inset: 0;
  z-index: 85;
  background: rgba(15, 23, 42, 0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.scrim.show,
body.pubnav-drawer-open .scrim { opacity: 1; pointer-events: auto; }
@media (max-width: 960px) {
  /* One shared slide-in drawer shell (owner 2026-11-09): the console
     sidebar on mobile, the profile menu on mobile and the public nav
     drawer are the same drawer — same width, same slide speed, same dark
     layer, same links. Left or right is only the side it slides from. */
  .sidebar,
  .profile-menu .profile-dropdown,
  .pubnav-drawer {
    position: fixed;
    top: 0; bottom: 0;
    width: min(320px, 86vw);
    max-width: calc(100vw - 24px);
    background: var(--surface);
    z-index: 90;
    transform: translateX(105%);
    transition: transform 0.22s ease;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
  }
  /* Left drawer: the console sidebar slides in from the left. */
  .sidebar {
    left: 0; right: auto;
    transform: translateX(-105%);
    border-right: 1px solid var(--border);
    border-left: 0;
    box-shadow: var(--shadow-md);
  }
  .sidebar.open { transform: translateX(0); }
  .hamburger { display: inline-flex; align-items: center; justify-content: center; }
  .content { padding: 16px; }
  .hero { padding: 30px 20px; }
  .hero h1 { font-size: 16px; }
  .search-wrap { display: none; }
  /* Logged-in topbar: language dropdown stays visible and centered. */
  .topbar-center .lang-select { max-width: 104px; padding: 7px 4px; }
  /* Role switcher lives in the drawer on mobile, not the topbar. */
  .topbar-right #role-slot { display: none; }
  /* Hamburger sits at the left edge to match the left-side menu drawer. */
  .topbar .hamburger { order: -1; margin-left: 0; margin-right: 6px; }
  /* Right drawer: the profile menu slides in from the right on mobile. */
  .profile-menu .profile-dropdown {
    left: auto; right: 0;
    margin: 0;
    border: 0;
    border-left: 1px solid var(--border);
    border-radius: 0;
    box-shadow: -8px 0 32px rgba(15, 23, 42, 0.18);
    box-sizing: border-box;
    padding: 10px 6px;
  }
  .profile-menu .profile-dropdown[hidden] { display: none; }
  body.profile-drawer-open .profile-menu .profile-dropdown { transform: translateX(0); }
  body.profile-drawer-open { overflow: hidden; }
  .drawer-role { padding: 12px 16px; border-bottom: 1px solid var(--border); }
  .drawer-role label { font-size: 10px; text-transform: uppercase; color: var(--muted); margin-bottom: 0; }
  .drawer-role .role-select { width: auto; max-width: none; }
}

/* Desktop: the avatar menu's language item is redundant with the topbar
   dropdown. It remains available in the menu on mobile. */
@media (min-width: 961px) {
  .profile-dropdown [data-lang-menu] { display: none; }
}

/* --- phase 2: auth / wizard / profile components -------------------------- */
.auth-card { max-width: 460px; margin: 32px auto; padding: 28px; }
.btn-block { display: block; width: 100%; }
.tabs { display: flex; gap: 4px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 4px; margin: 0 0 20px; }
.tab { flex: 1; border: 0; background: transparent; padding: 9px 12px; border-radius: 6px; font-size: 10px; font-weight: 600; color: var(--text-2); cursor: pointer; }
.tab.active { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }
.otp-sent-to { font-size: 10px; color: var(--text-2); margin-bottom: 14px; }
.otp-boxes { display: flex; gap: 8px; margin: 6px 0 4px; }
.otp-boxes-sm .otp-box { width: 40px; height: 46px; font-size: 16px; }
.otp-box { width: 48px; height: 56px; text-align: center; font-size: 16px; font-weight: 700; padding: 0; }
.auth-links { display: flex; align-items: center; gap: 8px; margin-top: 14px; }
.auth-switch { margin-top: 20px; text-align: center; color: var(--text-2); }
.resend-timer { font-size: 10px; color: var(--muted); }

.wizard { max-width: 640px; margin: 24px auto; padding: 28px; }
.wizard-head { margin-bottom: 20px; }
.wizard-nav { display: flex; justify-content: space-between; margin-top: 24px; }
.resend-row { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 16px; }
.resend-timer { font-size: 10px; color: var(--text-muted); }
.progress { height: 8px; background: var(--border-soft); border-radius: 99px; overflow: hidden; margin-top: 12px; }
.progress-bar { height: 100%; width: 0; background: linear-gradient(90deg, var(--brand), #7c3aed); border-radius: 99px; transition: width 0.3s ease; }
.radio-group { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 6px; }
.radio { display: inline-flex; align-items: center; gap: 8px; font-size: 10px; color: var(--text); cursor: pointer; }
.radio input { width: 16px; height: 16px; accent-color: var(--brand); }
.checkbox { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; color: var(--text); }
.checkbox input { width: 16px; height: 16px; margin-top: 2px; accent-color: var(--brand); }
.field-warn { color: var(--warning); font-size: 10px; margin-top: 6px; }
.upload-drop { border: 1.5px dashed var(--border); border-radius: var(--radius); padding: 20px; text-align: center; cursor: pointer; background: var(--bg); transition: border-color 0.15s ease; }
.upload-drop:hover, .upload-drop.drag { border-color: var(--brand); }
.upload-preview { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 8px; }
.upload-thumb { max-width: 160px; max-height: 120px; border-radius: var(--radius-sm); border: 1px solid var(--border); }
.upload-empty { color: var(--muted); font-size: 10px; }
.upload-file { font-weight: 600; color: var(--text-2); }
.review-list { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; margin-bottom: 12px; }
.review-row { display: flex; justify-content: space-between; gap: 16px; padding: 9px 14px; border-bottom: 1px solid var(--border-soft); font-size: 10px; }
.review-row:last-child { border-bottom: 0; }
.review-key { color: var(--text-2); }
.review-value { font-weight: 600; text-align: right; word-break: break-word; }

.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin-bottom: 16px; }
.stat-card { display: flex; flex-direction: column; gap: 8px; }
.stat-value { font-size: 16px; font-weight: 700; }
.meter { height: 10px; background: var(--border-soft); border-radius: 99px; overflow: hidden; }
.meter-fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--brand), #7c3aed); border-radius: 99px; transition: width 0.4s ease; }
.meter-inline { display: inline-block; width: 180px; vertical-align: middle; margin: 0 10px; }
.section-head-inline { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }

.profile-fields { display: flex; flex-direction: column; }
.profile-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border-soft); }
.profile-row:last-child { border-bottom: 0; }
.profile-key { width: 180px; flex-shrink: 0; color: var(--text-2); }
.profile-value { flex: 1; font-weight: 500; }
.profile-static { color: var(--muted); }
.profile-value .input { width: 100%; }
.profile-actions { display: flex; gap: 8px; margin-top: 12px; }

.doc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin-top: 12px; }

/* Verification gate (/user) — mirror-site parity. */
.gate-warn { border-left: 4px solid var(--warning, #d97706); margin-bottom: 20px; }
.gate-pill { font-size: 10px; padding: 6px 14px; }
.gate-progress-label { display: flex; justify-content: space-between; font-size: 10px; color: var(--text-muted); margin: 12px 0 4px; }
.gate-section { margin-bottom: 20px; }
.gate-heading { margin: 24px 0 12px; font-size: 14px; }
.doc-status-pending { background: #fef3c7; color: #b45309; }
.doc-card { border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.doc-title { font-weight: 600; }
.doc-thumb-link { display: block; border-radius: 8px; overflow: hidden; border: 1px solid var(--border); background: #f6f7f9; }
.doc-thumb { display: block; width: 100%; height: 150px; object-fit: cover; }
.doc-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.doc-actions-centered { justify-content: center; }
.doc-title-row { display: flex; align-items: center; gap: 8px; }
.doc-status-icon { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; font-size: 10px; font-weight: 700; flex: none; }
.doc-status-ok { background: #e7f8ee; color: #16803c; }
.doc-status-missing { background: #fdecec; color: #d33131; }
.doc-inline { display: flex; flex-direction: column; gap: 8px; }
.doc-viewer { width: 100%; height: 320px; border: 1px solid var(--border); border-radius: var(--radius-sm); }

@media (max-width: 640px) {
  .auth-card, .wizard { margin: 12px; padding: 20px; }
  .otp-box { width: 42px; height: 50px; font-size: 16px; }
  .profile-key { width: 120px; }
}

/* --- events (phase 3) ------------------------------------------------------ */
/* Listing grid for public event cards */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

/* Filter bar on listing / console pages */
.filters-row {
  display: grid;
  grid-template-columns: 1fr 220px auto;
  gap: 16px;
  align-items: end;
}
.filters-actions { display: flex; gap: 8px; }

/* Shared searchable picker (was moderator-only): the editor pickers and
   any picker use this one set of rules. */
.city-picker { position: relative; z-index: 30; }
.city-picker.is-open { z-index: 40; }
.inline-add-row .searchable-picker { flex: 1; min-width: 0; }
.city-picker > select { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.city-picker-trigger {
  width: 100%;
  min-height: 36px;
  text-align: left;
  cursor: pointer;
  background: var(--surface);
  color: var(--text);
  font: inherit;
}
.city-picker-trigger:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft);
}
.city-picker-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 45;
  width: 100%;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #f8fafc;
  box-shadow: var(--shadow-lg);
}
.city-picker-search { width: 100%; margin-bottom: 6px; background: #fff; }
.city-picker-options {
  min-height: 40px;
  max-height: 240px;
  overflow-y: auto;
  padding: 2px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #fff;
}
.city-picker-option {
  display: block;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: 6px;
  background: #fff;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.city-picker-option:hover, .city-picker-option:focus {
  background: var(--brand-soft);
  outline: none;
}
[data-theme="dark"] .city-picker-menu {
  background: var(--surface);
  border-color: var(--border);
}
[data-theme="dark"] .city-picker-search,
[data-theme="dark"] .city-picker-options,
[data-theme="dark"] .city-picker-option {
  background: var(--bg);
  color: var(--text);
  border-color: var(--border);
}

/* Admin dashboard Activity Log toolbar (owner's marked screenshot,
   2026-10-23): the Operation select is CUT at ~55% of the card width
   and the Search box moves left to start right at that line;
   Auto-refresh stays at the far right. Scoped to #admin-log — the
   shared .filters-row on other pages is untouched. */
#admin-log .filters-row { grid-template-columns: minmax(0, 55%) minmax(240px, 320px) 1fr; }
#admin-log .form-check { justify-self: end; }


/* Per-visa incentive inputs sit directly under the Target audience
   checkboxes (above the General/Custom model toggle). */
.visa-incentives { margin-top: 10px; }
.visa-incentives .form-group:last-child { margin-bottom: 0; }

/* Event creation: visa type labels are bold, and each visa amount is a
   minimum / maximum pair on one row. */
#f-audience .checkbox { font-weight: 700; }
.visa-amount-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

/* Royalty is a read-only placeholder for now (set by admin later). */
.royalty-value { color: var(--muted); background: var(--bg); display: flex; align-items: center; }

/* Forms shared by the operator console */
.form-group { margin-bottom: 14px; }
.form-group > label, .label {
  display: block;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-2);
  margin-bottom: 6px;
}
.form-actions { display: flex; gap: 8px; margin-top: 8px; justify-content: center; }
/* Shared utilities */
.text-center { text-align: center; }
.empty-cell { text-align: center; }
.oc-label-register { color: #6366f1; }
.oc-label-dataview { color: #38bdf8; }
.card-title-spaced { margin-top: 18px; font-size: 1rem; }
.checkbox-group { display: flex; flex-wrap: wrap; gap: 10px 18px; }
.form-section-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  margin: 22px 0 12px;
  padding-top: 18px;
  border-top: 1px solid var(--border-soft);
}
.form-section-title:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.inline-add-row { display: flex; gap: 8px; align-items: center; }
.inline-add-row .input { flex: 1; min-width: 0; }
.chip-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.chip-list:empty { margin-top: 0; }
.select-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 7px 5px 11px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-soft, #f8fafc);
  color: var(--text);
  font-size: 10px;
  font-weight: 600;
}
.select-chip button {
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 2px;
}
.segmented-control {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-soft, #f8fafc);
}
.segmented-option { cursor: pointer; }
.segmented-option input { position: absolute; opacity: 0; pointer-events: none; }
.segmented-option span {
  display: inline-block;
  padding: 7px 12px;
  border-radius: 7px;
  color: var(--text-2);
  font-size: 10px;
  font-weight: 600;
}
.segmented-option input:checked + span { background: var(--brand); color: #fff; }
.segmented-option input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; }

/* Custom-requirement builder rows */
.req-row {
  display: grid;
  grid-template-columns: 1fr 150px 1fr 1fr auto auto;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}
.req-match-cfg { display: flex; gap: 8px; }
.req-match-cfg .input { width: 100%; }

/* Custom-requirement editors: one input per choice option, and the
   country/city match picker (database dropdown + chips). */
.req-options-editor { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.req-options-list { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.req-option-row { display: flex; gap: 8px; align-items: center; }
.req-option-row .input { flex: 1; }
.req-match-cfg.req-match-picker { grid-column: 1 / -1; flex-direction: column; align-items: stretch; }
.match-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.match-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--bg); border: 1px solid var(--border); border-radius: 999px; padding: 3px 6px 3px 10px; font-weight: 600; }
.match-chip-remove { border: 0; background: none; cursor: pointer; color: var(--muted); padding: 0 2px; font-size: 10px; }
.req-match-add-row { display: flex; gap: 8px; }
.req-match-add-row .input { flex: 1; }

/* Detail rows (event detail page, review panel) */
.detail-row {
  display: flex;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-soft);
}
.detail-row:last-child { border-bottom: 0; }
.detail-label { width: 180px; flex-shrink: 0; font-size: 10px; font-weight: 600; color: var(--text-2); }
.detail-value { flex: 1; font-size: 10px; color: var(--text); }
.detail-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 20px; }
.card-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

/* Console tables */
.table-actions { white-space: nowrap; }
.table-actions .btn { margin-right: 6px; }
.table-actions .btn:last-child { margin-right: 0; }

/* Event status badges */
.badge-pending_verification { background: var(--warning-soft); color: #b45309; }
.badge-rejected { background: var(--danger-soft); color: #b91c1c; }
.badge-ended { background: var(--info-soft); color: #0369a1; }
.badge-cancelled { background: #f3f4f6; color: #9ca3af; }
.badge-reg-pending { background: var(--warning-soft); color: #b45309; }
.badge-reg-selected { background: var(--success-soft); color: #15803d; }
.badge-reg-cancelled { background: #f3f4f6; color: #9ca3af; }

/* Activity feed */
.activity-list { display: flex; flex-direction: column; }
.activity-item {
  display: grid;
  grid-template-columns: 220px 1fr auto;
  gap: 12px;
  align-items: baseline;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-soft);
  font-size: 10px;
}
.activity-item:last-child { border-bottom: 0; }
.activity-op { font-weight: 700; color: var(--text); }
.overview-activity { margin-top: 20px; }
.overview-activity .card-sub-title { margin-top: 0; }
.overview-activity .table td { vertical-align: top; }
.overview-activity .activity-op { white-space: nowrap; }
.overview-activity .activity-time { white-space: nowrap; color: var(--text-2); }
.activity-note { color: var(--text-2); }
.activity-time { color: var(--text-3, #9ca3af); font-size: 10px; white-space: nowrap; }

@media (max-width: 640px) {
  .filters-row { grid-template-columns: 1fr; }
  #admin-log .filters-row { grid-template-columns: 1fr; }
  #admin-log .form-check { justify-self: start; }
  .req-row { grid-template-columns: 1fr 1fr; }
  .detail-label { width: 120px; }
  .activity-item { grid-template-columns: 1fr; gap: 4px; }
}

/* --- Phase 4: referrals & agent tools -------------------------------------- */
.badge-ok { background: var(--success-soft); color: #15803d; }
.badge-muted { background: #f3f4f6; color: var(--text-2); }

.referral-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.referral-head .card-title { margin: 0; }
.referral-each {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  color: #6d28d9;
  background: #f3efff;
  border: 1px solid #ddd0ff;
  white-space: nowrap;
}
.referral-panel {
  margin-top: 12px;
  padding: 14px;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  background: #fcfcfe;
}
.link-row { display: flex; gap: 8px; align-items: center; }
.link-row .input { flex: 1; min-width: 0; }
.link-row-sm .input { font-size: 10px; padding: 6px 10px; }
.input-sm { font-size: 10px; padding: 6px 10px; }
.referral-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: 12px;
  flex-wrap: wrap;
}
.qr-img { width: 112px; height: 112px; border: 1px solid var(--border); border-radius: var(--radius); background: #fff; }
.qr-img.qr-lg { width: 160px; height: 160px; }
.qr-row { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.qr-side { flex: 1; min-width: 220px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
/* --- pagination (global — every data table uses this one component;
   owner, 2026-11-02: the old duplicate .pagination block and the .pager
   block are gone, replaced by this single definition) ------------------ */
.pagination { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.pagination .page-btn {
  min-width: 32px; padding: 6px 10px;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface); color: var(--text-2);
  font-size: 10px; font-weight: 600; cursor: pointer;
}
.pagination .page-btn:hover:not(:disabled) { border-color: var(--brand); color: var(--brand); }
.pagination .page-btn.active { background: var(--brand); border-color: var(--brand); color: #fff; }
.pagination .page-btn:disabled { opacity: .45; cursor: default; }
.pagination .page-ellipsis { color: var(--muted); padding: 0 2px; }
.pagination .pagination-total { margin-left: 8px; font-size: 10px; color: var(--muted); }
/* Kept for the events/gallery info text, which is not a pager control. */
.page-info { font-size: 10px; color: var(--text-2); }

/* --- admin dashboard activity log --------------------------------------- */
.refresh-badge {
  display: inline-flex; align-items: center;
  padding: 1px 7px; border-radius: 999px;
  border: 1px solid #65b704; color: #4a8a02;
  font-size: 10px; font-weight: 700;
}
.col-datetime { white-space: nowrap; }
.task-id { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; color: var(--muted); white-space: nowrap; }
/* Activity cells stay on one line (owner, 2026-10-23): the user cell and
   the detail text + Details button sit side by side, never stacked. */
.col-user-line { white-space: nowrap; }
.col-detail-flex { display: flex; align-items: center; gap: 10px; }
.col-detail-flex .btn { flex: none; }
.activity-note-text { margin-bottom: 0; }

/* --- event highlights slider (admin dashboard) ---------------------------- */
.hl-strip--slider .hl-card { flex: 1 1 0; max-width: none; }
.hl-meta-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 10px; }
.hl-meta-value { font-weight: 600; color: var(--text); text-align: right; }

@media (max-width: 860px) {
  .grid-2 { grid-template-columns: 1fr; }
}

/* --- Phase 5: event-day console, kiosk, scanner --------------------------- */
.stat-row { display: flex; gap: 12px; flex-wrap: wrap; }
.stat-card { flex: 1; min-width: 140px; border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; background: #fff; }
.stat-num { font-size: 16px; font-weight: 700; }
.stat-num.badge-info, .stat-num.badge-success, .stat-num.badge-warning { background: none; padding: 0; }
.stat-num.badge-info { color: #0369a1; }
.stat-num.badge-success { color: #15803d; }
.stat-num.badge-warning { color: #b45309; }
.stat-label { font-size: 10px; color: var(--muted); margin-top: 4px; }
.muted-sm { font-size: 10px; color: var(--muted); margin-top: 2px; }
.btn-danger-text { color: var(--danger, #b91c1c); }

/* badge result card (manual check-in, scanner, kiosk confirm) */
.badge-card { border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; background: #fff; max-width: 520px; margin-top: 12px; }
.badge-card-repeat { border-style: dashed; }
.badge-flag { display: inline-block; font-size: 10px; font-weight: 700; padding: 4px 10px; border-radius: 999px; margin-bottom: 10px; }
.badge-flag.badge-success { background: var(--success-soft); color: #15803d; }
.badge-flag.badge-warning { background: var(--warning-soft); color: #b45309; }
.badge-name { font-size: 16px; font-weight: 700; }
.badge-company { font-size: 12px; color: var(--text-2); margin-top: 4px; }
.badge-meta { font-size: 10px; color: var(--muted); margin-top: 8px; }

/* kiosk pairing */
.pairing-card { border: 1px dashed var(--border); border-radius: var(--radius); padding: 20px; text-align: center; max-width: 420px; margin-top: 12px; background: var(--bg); }
.pairing-label { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
.pairing-code-big { font-size: 16px; font-weight: 800; letter-spacing: 0.18em; margin: 8px 0; font-variant-numeric: tabular-nums; }
.pairing-code { font-weight: 700; letter-spacing: 0.12em; }

/* kiosk device page: full-screen touch */
.kiosk-body { background: var(--bg); min-height: 100vh; }
.kiosk-top { display: flex; align-items: center; gap: 16px; padding: 14px 20px; background: #fff; border-bottom: 1px solid var(--border); }
.kiosk-brand { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.kiosk-event { margin-left: auto; font-size: 15px; font-weight: 600; color: var(--text-2); }
.kiosk-main { max-width: 760px; margin: 0 auto; padding: 24px; }
.kiosk-panel { background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 36px 28px; text-align: center; }
.kiosk-panel h1 { font-size: 26px; margin: 12px 0 8px; }
.kiosk-icon { font-size: 48px; }
.kiosk-form { display: flex; flex-direction: column; gap: 16px; margin-top: 20px; }
.kiosk-code-input { font-size: 34px !important; text-align: center; letter-spacing: 0.2em; text-transform: uppercase; padding: 14px !important; font-variant-numeric: tabular-nums; }
.kiosk-big-btn { font-size: 19px !important; padding: 16px 24px !important; width: 100%; margin-top: 8px; }
.kiosk-status { min-height: 24px; margin-top: 14px; font-size: 15px; color: var(--text-2); }
.kiosk-search { font-size: 22px !important; padding: 16px 18px !important; width: 100%; margin-top: 16px; }
.kiosk-results { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; text-align: left; }
.kiosk-result { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; width: 100%; text-align: left; background: #fff; border: 2px solid var(--border); border-radius: 10px; padding: 16px 18px; cursor: pointer; font-size: 17px; }
.kiosk-result:hover { border-color: var(--brand); }
.kiosk-result.is-checked-in { opacity: 0.65; }
.kiosk-result-name { font-weight: 700; font-size: 19px; }
.kiosk-result-sub { color: var(--text-2); font-size: 14px; }
.kiosk-result-flag { color: #15803d; font-weight: 700; font-size: 14px; }
.kiosk-badge { margin: 0 auto 8px; text-align: center; }
.kiosk-success .kiosk-check { font-size: 72px; color: #15803d; }
.kiosk-success h1 { font-size: 32px; }

/* scanner page */
.scan-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.scan-viewport { position: relative; background: #0f172a; border-radius: var(--radius); overflow: hidden; min-height: 280px; display: flex; align-items: center; justify-content: center; }
.scan-viewport video { width: 100%; max-height: 420px; object-fit: cover; display: block; }
.scan-frame { position: absolute; inset: 18%; border: 3px dashed rgba(255,255,255,0.55); border-radius: 12px; pointer-events: none; }
.scan-frame.active { border-style: solid; border-color: #22c55e; }
.scan-hint { position: absolute; bottom: 10px; left: 0; right: 0; text-align: center; color: #e2e8f0; font-size: 10px; text-shadow: 0 1px 3px rgba(0,0,0,0.6); }

@media (max-width: 860px) {
  .scan-layout { grid-template-columns: 1fr; }
  .kiosk-panel { padding: 24px 16px; }
}

/* --- Phase 6: participants & access -------------------------------------- */
.col-select { width: 36px; text-align: center; }
.col-select input[type="checkbox"], .reg-select { width: 16px; height: 16px; accent-color: var(--brand); cursor: pointer; }

.bulk-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--brand-soft); border: 1px solid var(--brand-border);
  border-radius: var(--radius); padding: 10px 14px; margin-bottom: 12px;
}
.bulk-bar[hidden] { display: none; }
.registration-toolbar {
  background: #f8fafc; border: 1px solid var(--border); border-radius: var(--radius);
  padding: 12px 14px; margin-bottom: 12px;
}
.registration-filters { display: flex; align-items: center; gap: 12px; flex-wrap: nowrap; }
.registration-filters > .form-group { display: flex; align-items: center; gap: 8px; margin-bottom: 0; }
.registration-filters > .form-group > label { display: inline-block; margin: 0; white-space: nowrap; }
.registration-filters > .form-group:first-child { flex: 1 1 auto; min-width: 260px; }
.registration-filters > .form-group:first-child .input { flex: 1 1 auto; min-width: 160px; }
.registration-filters > .form-group:nth-child(2) { flex: 0 0 240px; }
.registration-filters > .form-group:nth-child(2) .input { flex: 1 1 auto; min-width: 0; }
.registration-filters > .form-group:last-child { display: flex; gap: 8px; flex: 0 0 auto; white-space: nowrap; }
.registration-filters > .form-group:last-child .btn { white-space: nowrap; }
.registration-filters > .form-group:last-child {
  padding-left: 12px; border-left: 1px solid var(--border);
}
.registration-filters > .form-group:last-child .btn-primary {
  box-shadow: 0 1px 2px rgba(67, 56, 202, 0.2);
}
.bulk-count { font-size: 10px; font-weight: 600; color: var(--brand-strong); }
.bulk-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.card-nested { margin-top: 16px; border-style: dashed; }
.participant-detail { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; }
.participant-checklist { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 18px; }
.participant-checklist-item { display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px; border-radius: 999px; font-size: .85rem; }
.participant-checklist-item.is-complete { color: #166534; background: #dcfce7; }
.participant-checklist-item.is-pending { color: #991b1b; background: #fee2e2; }
.participant-checklist-mark { font-weight: 700; }
.participant-content { min-width: 0; }
.participant-aside { min-width: 0; }
.participant-profile-panel,
.participant-docs-panel {
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 10px; margin-bottom: 10px; background: #fff;
}
.participant-profile-panel .card-sub-title,
.participant-docs-panel .card-sub-title { margin-top: 0; }
.participant-history-grid { display: grid; gap: 0; }
.participant-history-grid .kv-row { grid-template-columns: 1fr auto; }
.participant-history-grid .kv-value { text-align: right; }
.card-sub-title { font-size: 10px; font-weight: 700; color: var(--text-2); margin: 16px 0 8px; }

.kv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px 16px; }
.kv-row { display: flex; gap: 8px; font-size: 10px; padding: 6px 0; border-bottom: 1px solid var(--border-soft); }
.kv-label { color: var(--text-2); min-width: 96px; flex-shrink: 0; }
.kv-value { color: var(--text); font-weight: 500; word-break: break-word; }

.doc-badges { display: flex; gap: 8px; flex-wrap: wrap; }
.participant-doc-preview {
  display: block; width: 112px; height: 76px; max-height: none; object-fit: cover;
  margin: 0; border: 1px solid var(--border); border-radius: 6px; background: #fff;
}
.participant-doc-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.participant-doc-gallery .participant-doc-item {
  display: flex !important; flex-direction: column; align-items: stretch;
  min-width: 0; height: 82px; box-sizing: border-box; padding: 0;
  overflow: hidden;
}
.participant-doc-image-link {
  display: block; width: 100%; height: 100%;
}
.participant-doc-gallery .participant-doc-preview {
  display: block; width: 100%; height: 100%; min-height: 0;
  object-fit: cover; border: 0; border-radius: 0;
}
.participant-doc-actionable { position: relative; }
.participant-doc-actionable .btn {
  position: absolute; z-index: 1; bottom: 4px; padding: 3px 6px;
  font-size: 9px; opacity: 0;
}
.participant-doc-actionable .btn-action-success { left: 4px; }
.participant-doc-actionable .btn-danger { right: 4px; }
.participant-doc-actionable:hover .btn,
.participant-doc-actionable:focus-within .btn { opacity: .95; }
.badge-doc-yes { background: var(--success-soft); color: #15803d; }
.badge-doc-no { background: #f3f4f6; color: #9ca3af; }
.badge-readonly { background: #fef3c7; color: #b45309; }
.badge-share-role { background: #eef2ff; color: #4338ca; }

.share-list { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.share-row {
  display: flex; align-items: center; gap: 12px;
  border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px;
}
.share-info { flex: 1; min-width: 0; }
.share-name { font-weight: 600; font-size: 10px; }
.share-email { color: var(--text-2); font-size: 10px; overflow: hidden; text-overflow: ellipsis; }

/* Access Management rebuild (2026-10-30): "For" label + dropdown share
   one row; the people picker lists tick box + name + passport number, and
   hovering a person shows a popup (its details are added later). */
.access-for-row { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.access-for-row label { font-size: 10px; font-weight: 600; }
.access-for-row select { width: auto; min-width: 180px; }
.access-people { display: flex; flex-direction: column; gap: 6px; }
.access-person { position: relative; display: flex; align-items: center; gap: 8px; font-size: 10px; }
.access-person-name { font-weight: 600; }
.access-person-passport { color: var(--text-2); }
.access-person-popup {
  display: none; position: absolute; left: 0; top: 100%; z-index: 5;
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  padding: 8px 10px; font-size: 10px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
  white-space: nowrap;
}
.access-person:hover .access-person-popup { display: block; }
.access-grant-url { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.access-grant-url input { flex: 1; }
.access-grant-detail {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 6px 16px;
  font-size: 10px; color: var(--text-2); padding: 6px 12px;
}
.access-grant-detail-item { display: flex; gap: 6px; align-items: center; }
.access-grant-tick { color: #1e9e34; font-weight: 700; }
.access-grant-roles { display: inline-flex; gap: 4px; flex-wrap: wrap; }
/* Edit controls share one row with Select/Clear All (owner, 2026-10-30):
   the [hidden] rule must beat the flex display. */
.access-edit-group { display: flex; gap: 8px; align-items: center; }
.access-bulk-group { display: flex; gap: 8px; }
/* Global Access loading overlay: the single spinner, enlarged, centered
   over a dim backdrop while the For dropdown or Edit loads the form. */
/* The one loading spinner: the spiral, full-screen over a dim backdrop
   while anything processes (dropdown, Edit, Grant, task submit). */
.processing-overlay { position: fixed; inset: 0; background: rgba(255, 255, 255, 0.72); display: flex; align-items: center; justify-content: center; z-index: 300; }
.processing-spiral { width: 96px; height: 96px; background: url('./images/loading-spiral.gif') center / contain no-repeat; }
@media (min-width: 961px) {
  .processing-spiral { width: 148px; height: 148px; }
}
#access-edit-bar[hidden] { display: none; }
#access-edit-label { font-size: 10px; font-weight: 600; }

/* Access Management tick layout (owner, 2026-10-30): tick boxes sit in
   a neat aligned grid instead of the generic ragged wrapped flow, and
   Select All / Clear All sit together as one action row. Scoped to the
   access ticks so other pages' checkbox groups are untouched; the grid
   collapses to fewer columns on narrow screens with no media query. */
#access-ticks-wrap .filters-row { display: flex; gap: 8px; align-items: center; justify-content: flex-end; }
#access-ticks .form-group { margin-bottom: 14px; }
#access-ticks .checkbox-group {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 8px 16px;
}
#access-ticks .checkbox { align-items: center; gap: 8px; }
#access-ticks .checkbox input { margin-top: 0; flex: none; }
#access-ticks .checkbox span { line-height: 1.4; }

.form-group-end { align-self: end; }

@media (max-width: 640px) {
  .bulk-bar { flex-direction: column; align-items: stretch; }
  .bulk-actions { justify-content: flex-start; }
  .participant-detail { grid-template-columns: 1fr; }
  .registration-filters { align-items: stretch; flex-wrap: wrap; }
  .registration-filters > .form-group:first-child,
  .registration-filters > .form-group:nth-child(2),
  .registration-filters > .form-group:last-child { flex: 1 1 100%; }
  .registration-filters > .form-group:first-child,
  .registration-filters > .form-group:nth-child(2) { align-items: center; }
  .registration-filters > .form-group:last-child { flex-wrap: wrap; }
  .registration-filters > .form-group:last-child { padding-left: 0; border-left: 0; }
}

/* --- Phase 7: content & communications ------------------------------------ */

/* announcements ticker */
/* Scrolling announcements bar: full-width strip above the hero. The track
   sweeps the whole bar, right to left: it starts fully off-screen right
   (100vw) and ends fully off-screen left (-100% of its own width), so
   every item enters at the right edge and travels to the left edge no
   matter how short the text is. Both loop endpoints show an empty bar,
   so the jump back to the start is invisible. */
.announce-bar {
  display: flex; align-items: center; gap: 12px;
  background: #eef2ff; border-bottom: 1px solid #c7d2fe;
  padding: 8px 14px; overflow: hidden;
}
.announce-viewport { overflow: hidden; flex: 1; }
.announce-track { display: flex; width: max-content; animation: announce-scroll linear infinite; }
.announce-item { margin-right: 2.5rem; white-space: nowrap; }
.announce-item a { color: inherit; font-weight: 600; }
@keyframes announce-scroll { from { transform: translateX(100vw); } to { transform: translateX(-100%); } }
.announce-track:hover { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .announce-track { animation: none; } }

/* hero slides (settings-driven rotating slider) */
.hero-slides { position: relative; border-radius: var(--radius); overflow: hidden; }
.hero-slide { display: none; position: relative; min-height: 260px; align-items: stretch; }
.hero-slide.on { display: block; }
.hero-slide img { width: 100%; max-height: 380px; object-fit: cover; display: block; }
.hero-slide-cap {
  padding: 28px; background: linear-gradient(135deg, #4f46e5, #7c3aed); color: #fff;
}
.hero-slide img + .hero-slide-cap {
  position: absolute; inset: auto 0 0 0;
  background: linear-gradient(transparent, rgba(30, 27, 75, 0.85));
}
.hero-slide-cap h1 { font-size: 16px; margin: 0 0 8px; color: #fff; }
.hero-slide-cap p { font-size: 10px; margin: 0 0 16px; opacity: 0.92; }
.hero-slide-cap .btn-primary { background: #fff; color: #4f46e5; }

/* --- event hero slider (mirror-style homepage hero) ---------------------- */
/* Full-width, nearly viewport-height; one slide per upcoming event: the
   event's gallery photos as a mosaic, date + title overlaid, arrows + dots,
   auto-advancing. Slides are not links (the mirror's aren't either). */
.event-hero { position: relative; overflow: hidden; background: #1e1b4b; }
.event-hero-slides { position: relative; }
.event-hero-slide { display: none; position: relative; height: min(78vh, 760px); min-height: 420px; overflow: hidden; }
.event-hero-slide.on { display: block; }
.event-hero-slide.no-photos { background: linear-gradient(135deg, #4f46e5, #9333ea 55%, #c026d3); }
.event-hero-mosaic { display: grid; grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(3, 1fr); height: 100%; }
/* Each tile shows the brand logo dimmed ("shadow") until its photo loads,
   then the photo fades in over it — no more tiles popping in one by one. */
.event-hero-tile { position: relative; overflow: hidden; background: #1e1b4b; }
.event-hero-tile-shadow { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: .28; padding: 14%; }
.event-hero-tile-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .5s ease; }
.event-hero-tile-photo.loaded { opacity: 1; }
/* Hero loading state: the spiral spinner, centered, while events and
   photos are being fetched. */
.event-hero-loading { height: min(78vh, 760px); min-height: 420px; background: #1e1b4b url('./images/loading-spiral.gif') center / 96px no-repeat; }

/* --- homepage page loader ------------------------------------------------- */
/* Full-screen loading screen: only the spiral is visible while the page
   loads; everything else stays covered until the hero images are ready. */
.page-loader { position: fixed; inset: 0; z-index: 1000; background: #fff; display: flex; align-items: center; justify-content: center; transition: opacity .3s ease; }
.page-loader.done { opacity: 0; pointer-events: none; }
.event-hero-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 24px; background: linear-gradient(rgba(0,0,0,.25), rgba(0,0,0,.55)); pointer-events: none; }
.event-hero-date { color: #fff; font-size: 14px; letter-spacing: .18em; opacity: .95; margin-bottom: 12px; }
.event-hero-title { color: #fff; font-size: clamp(26px, 4.5vw, 54px); line-height: 1.15; margin: 0; max-width: 900px; }
.event-hero-location { color: #fff; font-size: 14px; opacity: .9; margin-top: 10px; }
.event-hero-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 48px; height: 48px; border: 0; border-radius: 50%; background: rgba(0,0,0,.45); color: #fff; font-size: 28px; line-height: 1; cursor: pointer; }
.event-hero-prev { left: 16px; }
.event-hero-next { right: 16px; }
.event-hero-dots { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 2; display: flex; gap: 8px; }
.event-hero-dot { width: 10px; height: 10px; border: 0; border-radius: 50%; background: rgba(255,255,255,.55); cursor: pointer; padding: 0; }
.event-hero-dot.on { background: #fff; }
.hero-dots { position: absolute; bottom: 12px; right: 16px; display: flex; gap: 6px; }
.hero-dot {
  width: 10px; height: 10px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(255, 255, 255, 0.45); padding: 0;
}
.hero-dot.on { background: #fff; }

/* footer: settings-driven links + social */
.footer-main { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.footer-links { display: flex; gap: 16px; flex-wrap: wrap; }
.footer-links a { color: var(--muted); font-size: 10px; }
.footer-links a:hover { color: var(--brand); }
.footer-social { display: flex; gap: 8px; }
.social-link {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border: 1px solid var(--border); border-radius: 50%;
  color: var(--text-2); font-size: 14px;
}
.social-link:hover { color: var(--brand); border-color: var(--brand); }
.footer-contact { width: 100%; font-size: 10px; color: var(--muted); }

/* gallery grid + inline viewer (no modals) */
.media-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px; margin-top: 16px;
}
.media-card {
  border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden;
  background: var(--surface); cursor: pointer; padding: 0; text-align: left; width: 100%;
}
.media-card:hover { border-color: var(--brand); }
.media-thumb { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; background: #f3f4f6; }
.media-meta { padding: 8px 10px; }
.media-title { font-size: 10px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.media-tag { font-size: 10px; color: var(--muted); }
.viewer {
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface);
  margin-top: 16px; overflow: hidden;
}
.viewer-media { width: 100%; max-height: 520px; object-fit: contain; background: #111827; display: block; }
.viewer-body { padding: 16px; display: flex; align-items: flex-start; gap: 12px; }
.viewer-body .grow { flex: 1; min-width: 0; }
.viewer-title { font-size: 12px; font-weight: 700; margin: 0 0 4px; }
.viewer-sub { font-size: 10px; color: var(--muted); }

/* store grid + inline detail */
.product-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px; margin-top: 16px;
}
.product-card {
  border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden;
  background: var(--surface); cursor: pointer; padding: 0; text-align: left; width: 100%;
  display: flex; flex-direction: column;
}
.product-card:hover { border-color: var(--brand); }
.product-thumb { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; background: #f3f4f6; }
.product-info { padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.product-name { font-size: 10px; font-weight: 600; color: var(--text); }
.product-price { font-size: 12px; font-weight: 700; color: var(--brand); }
.product-stock { font-size: 10px; color: var(--muted); }
.product-stock.low { color: #b45309; }
.product-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.product-detail-img { width: 100%; border-radius: var(--radius); border: 1px solid var(--border); }
.thumb-row { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.thumb-row img {
  width: 64px; height: 64px; object-fit: cover; border-radius: 8px; cursor: pointer;
  border: 2px solid transparent;
}
.thumb-row img.on { border-color: var(--brand); }

/* admin tables (the dashboard .table style is the one table style) */
.thumb-sm { width: 56px; height: 42px; object-fit: cover; border-radius: 6px; background: #f3f4f6; }
.badge-live { background: #dcfce7; color: #15803d; }
.badge-hidden { background: #f3f4f6; color: #6b7280; }
.badge-verified { background: #dbeafe; color: #1d4ed8; }
.badge-new { background: #dbeafe; color: #1d4ed8; }
.badge-contacted { background: #fef3c7; color: #b45309; }
.badge-closed { background: #f3f4f6; color: #6b7280; }
.badge-done { background: #dcfce7; color: #15803d; }
.badge-draft { background: #f3f4f6; color: #6b7280; }
.badge-sending { background: #dbeafe; color: #1d4ed8; }
.badge-failed { background: #fee2e2; color: #b91c1c; }
.badge-sent { background: #dcfce7; color: #15803d; }

/* admin forms */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-grid .full { grid-column: 1 / -1; }
.field label { display: block; font-size: 10px; font-weight: 600; color: var(--text-2); margin-bottom: 4px; }
.field .hint { font-size: 10px; color: var(--muted); margin-top: 4px; }
.repeat-row {
  display: grid; gap: 8px; border: 1px solid var(--border); border-radius: var(--radius);
  padding: 12px; margin-bottom: 8px; background: #fafbfc;
}
.repeat-row.cols-3 { grid-template-columns: 1fr 1fr auto; }
.repeat-row.cols-4 { grid-template-columns: 1fr 1fr 1fr auto; }
.repeat-row.cols-5 { grid-template-columns: 1fr 1fr 1fr 1fr auto; }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 16px; }
.tab {
  border: none; background: none; padding: 10px 16px; font-size: 10px; font-weight: 600;
  color: var(--text-2); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tab.on { color: var(--brand); border-bottom-color: var(--brand); }
.toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 16px 0; }
.toolbar .grow { flex: 1; }
.page-head { margin-bottom: 8px; }
.page-head h1 { font-size: 16px; margin: 0 0 4px; }
.page-head p { color: var(--text-2); font-size: 10px; margin: 0; }
.note-bar {
  background: #fffbeb; border: 1px solid #fde68a; color: #92400e;
  border-radius: var(--radius); padding: 10px 14px; font-size: 10px; margin-bottom: 16px;
}
.preview-box { border: 1px dashed var(--border); border-radius: var(--radius); padding: 12px; background: #fff; }
.file-input-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.img-preview { max-width: 220px; max-height: 140px; border-radius: 8px; border: 1px solid var(--border); }

/* RTL: flip directional spacing when the Arabic locale is active */
[dir="rtl"] .side-nav, [dir="rtl"] .content { text-align: right; }
[dir="rtl"] .announce-track { direction: rtl; }
[dir="rtl"] .hero-dots { right: auto; left: 16px; }
[dir="rtl"] .table th, [dir="rtl"] .table td { text-align: right; }

@media (max-width: 640px) {
  .form-grid { grid-template-columns: 1fr; }
  .product-detail { grid-template-columns: 1fr; }
  .repeat-row.cols-3, .repeat-row.cols-4, .repeat-row.cols-5 { grid-template-columns: 1fr; }
}

/* --- Phase 8: ops & audit ------------------------------------------------ */
/* Activity audit */
.col-time { white-space: nowrap; }
.activity-row {
  display: flex; flex-direction: column; gap: 4px;
  padding: 10px 0; border-bottom: 1px solid var(--border);
}
.activity-row:last-child { border-bottom: 0; }
.activity-main { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.activity-note { font-size: 10px; color: var(--text); }

.mkt-modal {
  background: var(--card-bg, #fff);
  border-radius: 12px;
  width: 100%;
  max-width: 640px;
  max-height: 92vh;
  overflow: auto;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.28);
  position: relative;
}
.mkt-modal--wide { max-width: 860px; }
.mkt-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border, #e5e7eb);
  position: sticky;
  top: 0;
  background: inherit;
  z-index: 2;
}
.mkt-modal-head h2 { margin: 0; font-size: 1.15rem; }
.mkt-modal-body { padding: 20px; }
.modal-head > button.btn.btn-ghost.modal-close-float:hover,
.modal-close-float:hover {
  background: #5d73d6;
  transform: scale(1.04);
}
.modal-head { position: relative; }
.modal-head > button.btn.btn-ghost,
.modal-close-float {
  border: 3px solid #fff;
  border-radius: 50%;
  background: #7187e8;
  color: #fff;
  box-shadow: 0 5px 12px rgba(15, 23, 42, 0.24);
  font-size: 0;
  line-height: 1;
  padding: 0;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: absolute;
  top: -16px;
  right: -16px;
  z-index: 4;
  transition: background-color 0.15s ease, transform 0.15s ease;
}
.modal-head > button.btn.btn-ghost::after,
.modal-close-float::after {
  content: "\00d7";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1;
  transform: translateY(-1px);
}
/* Modal-head close buttons sit in the header row, not floating outside
   it: the old -16px float was clipped by .modal-box's overflow:hidden,
   so only a sliver of the button showed. Floating .modal-close-float
   buttons (built by JS popups) keep their old behavior. */
.modal-head > button.btn.btn-ghost:not(.modal-close-float) {
  position: relative; top: auto; right: auto; flex: none;
}
[data-theme="dark"] .mkt-modal { --card-bg: #1e293b; --border: #334155; }
.mkt-tabs { display: flex; gap: 8px; margin-bottom: 16px; }
.mkt-tab {
  border: 1px solid var(--border, #e5e7eb);
  background: transparent;
  border-radius: 8px;
  padding: 8px 14px;
  cursor: pointer;
  font-size: 0.9rem;
}
.mkt-tab.active {
  background: var(--primary, #4f46e5);
  color: #fff;
  border-color: var(--primary, #4f46e5);
}
.mkt-checks {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px;
  margin: 12px 0;
}
.mkt-preview {
  border: 1px dashed var(--border, #e5e7eb);
  border-radius: 10px;
  padding: 16px;
  margin: 12px 0;
  background: var(--bg-soft, #f9fafb);
}
[data-theme="dark"] .mkt-preview { --bg-soft: #0f172a; }
.mkt-btn-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.mkt-viewer-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(0, 0, 0, 0.92);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.mkt-viewer-bar {
  display: flex;
  gap: 8px;
  align-items: center;
  /* Wrap + center so a long viewer title (admin doc info) folds instead
   * of overflowing on narrow screens (owner, 2026-11-08). */
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 12px;
  color: #fff;
}
.mkt-viewer-bar .btn { color: #fff; }
.mkt-viewer-img {
  max-width: 92vw;
  max-height: 78vh;
  object-fit: contain;
  transition: transform 0.15s ease;
}
.mkt-doc-btns { display: flex; gap: 4px; flex-wrap: wrap; }
.card-head-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.card-head-row .card-title { margin-bottom: 4px; }
.mkt-tool-btns { display: flex; gap: 6px; flex-wrap: wrap; }

/* Expenses */
.stat-sub { font-size: 10px; color: var(--muted); }
.receipt-row { display: flex; gap: 10px; align-items: center; margin-top: 8px; flex-wrap: wrap; }
.receipt-name { font-size: 10px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; max-width: 320px; }
.link-sm { font-size: 10px; color: var(--brand); text-decoration: none; white-space: nowrap; }
.link-sm:hover { text-decoration: underline; }

/* One-stop */
.radio-row { display: flex; gap: 8px; align-items: center; font-size: 12px; cursor: pointer; }
.radio-row input { width: auto; }

/* --- public top navbar (logged-out pages, Cloudflare.com style) ------------- */
.pubnav {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 40;
}
.pubnav-inner {
  max-width: 1240px;
  margin: 0 auto;
  min-height: var(--topbar-h);
  display: flex;
  align-items: center;
  gap: 26px;
  padding: 0 20px;
}
.pubnav-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 12px;
  color: var(--text);
  white-space: nowrap;
}
.pubnav-brand:hover { text-decoration: none; color: var(--text); }
.pubnav-links { display: flex; align-items: center; gap: 2px; }
.pubnav-links a {
  padding: 8px 13px;
  border-radius: 8px;
  color: var(--text-2);
  font-size: 10px;
  font-weight: 500;
  white-space: nowrap;
}
.pubnav-links a:hover { background: var(--bg); color: var(--text); text-decoration: none; }
.pubnav-links a.active { background: var(--brand-soft); color: var(--brand); font-weight: 700; }
.pubnav-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.pubnav-auth { display: flex; align-items: center; gap: 10px; }
.pubnav-burger {
  display: none;
  margin-left: auto;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 8px;
  width: 38px; height: 38px;
  font-size: 18px;
  cursor: pointer;
  color: var(--text-2);
}
/* Public content column: centered like the nav */
.pubmain { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pubmain .content { max-width: 1240px; width: 100%; margin: 0 auto; }

/* --- avatar profile dropdown (logged-in, Cloudflare dashboard style) ------- */
.profile-menu { position: relative; }
.avatar-btn {
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 999px;
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  padding: 0;
}
.avatar-btn:hover { border-color: var(--brand); }
.avatar-btn .user-avatar { width: 28px; height: 28px; font-size: 10px; }
.profile-dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-md);
  min-width: 230px;
  padding: 6px;
  z-index: 120;
}
.profile-head {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-soft);
  margin-bottom: 6px;
}
.profile-head .profile-name { font-size: 10px; font-weight: 700; color: var(--text); }
.profile-head .profile-email { font-size: 10px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.profile-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 9px 12px;
  border: 0;
  background: transparent;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 500;
  color: var(--text-2);
  cursor: pointer;
  text-align: left;
  text-decoration: none;
}
.profile-item:hover { background: var(--bg); color: var(--text); text-decoration: none; }
.profile-item .icon { width: 18px; text-align: center; }
.profile-item .chev { margin-left: auto; color: var(--muted); font-size: 11px; }
.profile-item.danger { color: var(--danger); }
.profile-item.danger:hover { background: var(--danger-soft); color: var(--danger); }
.profile-sub {
  display: none;
  padding: 2px 0 2px 28px;
}
.profile-sub.open { display: block; }
.profile-sub .profile-item { font-size: 10px; padding: 7px 12px; }
.profile-sub .profile-item.selected { color: var(--brand); font-weight: 700; }

/* --- dark theme (Appearance menu) ------------------------------------------ */
[data-theme="dark"] {
  --bg: #0d1220;
  --surface: #141b2e;
  --border: #24304d;
  --border-soft: #1b2440;
  --text: #e9edf6;
  --text-2: #a9b3c9;
  --muted: #6d7893;
  --brand-soft: #232c52;
  --success-soft: #12351f;
  --warning-soft: #3d2c0e;
  --danger-soft: #3d1616;
  --info-soft: #0e2f42;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45);
}
[data-theme="dark"] body { background: var(--bg); }
[data-theme="dark"] .side-link:hover,
[data-theme="dark"] .pubnav-links a:hover,
[data-theme="dark"] .profile-item:hover { background: #1c2540; }
[data-theme="dark"] .search-input { background: #0d1220; }
[data-theme="dark"] .search-input:focus { background: #141b2e; }
[data-theme="dark"] .tab.active { background: #1c2540; }
[data-theme="dark"] img.upload-thumb { border-color: var(--border); }
[data-theme="dark"] .input,
[data-theme="dark"] .select,
[data-theme="dark"] .textarea,
[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
[data-theme="dark"] select,
[data-theme="dark"] textarea { border-color: #475569; }

/* --- dark-mode text visibility (owner, 2026-11-01) -------------------------
   Every rule below fixes text that was invisible in dark mode: light text
   on a hardcoded light panel, or dark text on a panel that darkens with the
   theme. Panels that carry their own dark text on purpose (email preview,
   note bar, QR codes, hero buttons, poster artwork) are left alone. */
[data-theme="dark"] .side-sublink:hover,
[data-theme="dark"] .user-event-submenu .tab-btn:hover { background: #1c2540; }
[data-theme="dark"] .side-link.active,
[data-theme="dark"] .side-sublink.active { color: #a5b4fc; }
[data-theme="dark"] .btn-secondary:hover,
[data-theme="dark"] .btn-ghost:hover { background: #1c2540; }
[data-theme="dark"] .table th { background: #1c2540; color: #a9b3c9; }
[data-theme="dark"] .table tbody tr:hover { background: #1c2540; }
[data-theme="dark"] .event-card { background: linear-gradient(180deg, #1b2440, #141b2e); }
[data-theme="dark"] .event-card__value.positive { color: #4ade80; }
[data-theme="dark"] .event-card__tasks-error { color: #f87171; }
[data-theme="dark"] .event-card__incentive-name { color: var(--text); }
[data-theme="dark"] .vsec-card,
[data-theme="dark"] .access-person-popup,
[data-theme="dark"] .participant-docs-panel,
[data-theme="dark"] .preview-box,
[data-theme="dark"] .badge-card,
[data-theme="dark"] .stat-card,
[data-theme="dark"] .kiosk-top,
[data-theme="dark"] .kiosk-panel,
[data-theme="dark"] .kiosk-result { background: var(--surface); }
[data-theme="dark"] .badge-card .badge-meta,
[data-theme="dark"] .stat-label { color: #a9b3c9; }
[data-theme="dark"] .stat-num.badge-info { color: #38bdf8; }
[data-theme="dark"] .stat-num.badge-success { color: #4ade80; }
[data-theme="dark"] .stat-num.badge-warning { color: #fbbf24; }
[data-theme="dark"] .badge-success,
[data-theme="dark"] .badge-flag.badge-success,
[data-theme="dark"] .badge-doc-yes { color: #4ade80; }
[data-theme="dark"] .badge-warning,
[data-theme="dark"] .badge-flag.badge-warning { color: #fbbf24; }
[data-theme="dark"] .badge-danger { color: #f87171; }
[data-theme="dark"] .badge-info { color: #38bdf8; }
[data-theme="dark"] .badge-neutral { background: #1c2540; color: #a9b3c9; }
[data-theme="dark"] .field-error,
[data-theme="dark"] .inline-msg.err { color: #f87171; }
[data-theme="dark"] .inline-msg.ok { color: #4ade80; }
[data-theme="dark"] .field-warn { color: #fbbf24; }
[data-theme="dark"] .profile-item.danger,
[data-theme="dark"] .profile-item.danger:hover { color: #f87171; }
[data-theme="dark"] .processing-overlay { background: rgba(13, 18, 32, 0.72); }
[data-theme="dark"] .page-loader { background: #0d1220; }

/* --- responsive: public navbar --------------------------------------------- */
@media (max-width: 860px) {
  .pubnav-links { display: none; }
  /* Mobile navbar keeps language + Sign in visible; Create account lives in the drawer. */
  .pubnav-inner { gap: 10px; padding: 0 12px; }
  .pubnav-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
  .pubnav-auth .btn-primary { display: none; }
  .pubnav-actions .lang-select { max-width: 104px; padding: 7px 4px; font-size: 10px; }
  .pubnav-burger { display: inline-flex; align-items: center; justify-content: center; margin-left: 2px; }
}
@media (max-width: 430px) {
  /* Very small screens: keep the E mark, drop the brand text to fit lang + Sign in. */
  .pubnav-brand span:last-child { display: none; }
}

/* --- public mobile drawer: slides in from the right (shared drawer shell) --- */
.pubnav-drawer {
  padding: 14px 16px 20px;
}
body.pubnav-drawer-open { overflow: hidden; }
body.pubnav-drawer-open .pubnav-drawer { transform: none; }
.pubnav-drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 2px 0 14px; border-bottom: 1px solid var(--border-soft);
}
.pubnav-drawer-close {
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
  width: 36px; height: 36px; border-radius: 10px; font-size: 16px; cursor: pointer;
}
.pubnav-drawer-close:hover { background: var(--bg); }
.pubnav-drawer-links { display: flex; flex-direction: column; padding: 14px 0; }
.pubnav-drawer-foot {
  margin-top: auto; border-top: 1px solid var(--border-soft);
  padding-top: 14px; display: flex; flex-direction: column; gap: 10px;
}
#pubnav-drawer-auth { display: flex; gap: 8px; }
#pubnav-drawer-auth .btn { flex: 1; text-align: center; justify-content: center; }
/* Sign in sits in the navbar on mobile; the drawer keeps Create account only. */
#pubnav-drawer-auth .btn-ghost { display: none; }
@media (min-width: 861px) {
  .pubnav-drawer { display: none; }
}

/* Public pages: centered content column under the top navbar */
.app.pub { flex-direction: column; }
.app.pub .content { max-width: 1240px; width: 100%; margin: 0 auto; }

/* Auth pages: card centered horizontally */
.auth-center { display: flex; width: 100%; padding: 24px 0; }
.auth-center > .card { margin: 0 auto; width: 100%; }
/* OTP code boxes: centered left-to-right */
.otp-boxes { justify-content: center; }

/* --- nested tabs (sub-tabs inside console panels) -------------------------- */
.tabs-nested { margin: 0 0 16px; }
.tabs-nested .tab { flex: 0 1 auto; }

/* --- input group (readonly field + button) --------------------------------- */
.input-group { display: flex; gap: 8px; align-items: center; }
.input-group .input { flex: 1; }

/* --- modal dialog ---------------------------------------------------------- */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 350;
  background: rgba(15, 23, 42, 0.55);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.modal-backdrop[hidden] { display: none; }
.modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-bottom: 1px solid var(--border);
}
.modal-title { font-weight: 700; font-size: 12px; }
.modal-body { padding: 18px; overflow-y: auto; }
.modal-foot {
  display: flex; justify-content: center; gap: 10px;
  padding: 14px 18px; border-top: 1px solid var(--border);
}

/* --- table action cells ----------------------------------------------------- */
.qr-preview-img { border-radius: 8px; border: 1px solid var(--border); }

/* --- QR poster dialog: fit the 480x640 poster inside the viewport -------- */
/* Owner screenshot, 2026-11-04: the poster pushed the dialog body into an
   inner scroll. The canvas now scales down to the viewport height (its
   aspect ratio is preserved, so it narrows with it) and the template row
   sits on one centered line. On tall screens it still renders full-size;
   on very short screens the body keeps its overflow-y fallback. */
.qr-poster-canvas { display: block; margin: 0 auto; width: auto; height: auto; max-width: 100%; max-height: calc(90vh - 240px); }
.qr-poster-actions { display: flex; align-items: center; justify-content: center; gap: 8px; }

/* --- event verification review dialog -------------------------------------- */
.review-row { display: flex; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--border-soft); }
.review-row:last-child { border-bottom: 0; }
.review-label { flex: 0 0 130px; font-size: 10px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.review-value { flex: 1; font-size: 10px; color: var(--text); }

/* --- admin dialogs (email center, user verification, activity) -------------- */
/* Wrapper for a floating corner close button: it sizes to the dialog box
   and gives the button a positioning context outside .modal-box, whose
   overflow:hidden would otherwise clip the overlapping corner button. */
.modal-float-wrap { position: relative; }
/* The user/agent detail dialogs size their wrap to their modal width. */
.modal-float-wrap--narrow { width: 100%; max-width: 640px; }
.modal-float-wrap--wide { width: 100%; max-width: 860px; }
.modal-box {
  background: var(--surface); color: var(--text);
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
  width: 560px; max-width: 100%; max-height: 90vh;
  display: flex; flex-direction: column; overflow: hidden;
}
.modal-confirm {
  width: 420px;
}
.modal-confirm .modal-body {
  line-height: 1.5;
}
.modal-wide { width: 760px; }
.email-preview {
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 18px; background: #fff; color: #111;
  max-height: 420px; overflow-y: auto;
}
.email-preview h2 { margin-top: 0; }
.preview-subject { font-weight: 600; padding: 8px 0; }
.detail-list { display: grid; gap: 8px; margin-bottom: 16px; }
.detail-row { display: grid; grid-template-columns: 160px 1fr; gap: 12px; }
.detail-row dt { font-weight: 600; color: var(--muted); }
.detail-row dd { margin: 0; }
.verify-head { margin-bottom: 12px; }
.verify-head h4 { margin: 0 0 4px; }
.section-head h4 { margin: 0; }
.verify-field-row {
  display: grid; grid-template-columns: 180px 1fr auto; gap: 10px;
  align-items: center; padding: 6px 0; border-bottom: 1px solid var(--border);
}
.verify-field-label { font-weight: 600; font-size: 10px; }
.verify-field-value { font-size: 10px; word-break: break-word; }
.verify-field-actions { display: flex; gap: 6px; }
.verify-slot-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 0; border-top: 1px dashed var(--border); margin-top: 8px;
}
.role-current { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 12px 0; }
.role-pill { display: inline-flex; gap: 4px; align-items: center; }
.doc-list { list-style: none; padding: 0; display: grid; gap: 8px; }
.doc-list li { display: flex; align-items: center; gap: 10px; }
.participant-doc-item {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 12px;
  padding: 10px;
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  background: var(--surface-soft, rgba(148, 163, 184, 0.06));
}
.participant-doc-info { display: flex; align-items: center; gap: 8px; min-width: 0; }
.participant-doc-info .doc-type { min-width: 0; overflow-wrap: anywhere; }
.participant-doc-actions {
  display: flex; align-items: center; justify-content: flex-end;
  gap: 8px; min-width: 0; flex-wrap: wrap;
}
.participant-doc-preview {
  width: 96px; height: 64px; max-height: none; object-fit: contain;
  margin: 0; border: 1px solid var(--border); border-radius: 6px; background: #fff;
}
.participant-doc-unavailable {
  display: inline-flex; align-items: center; justify-content: center;
  width: 96px; height: 64px; padding: 6px; box-sizing: border-box;
  border: 1px dashed var(--border); border-radius: 6px;
  color: var(--text-2); font-size: 10px; text-align: center;
}
.check-list { display: grid; gap: 6px; }
.check-item { display: flex; gap: 8px; align-items: center; font-size: 10px; cursor: pointer; }
.form-check { display: flex; align-items: flex-end; }
.check-label { display: flex; gap: 8px; align-items: center; font-size: 10px; cursor: pointer; white-space: nowrap; }
.card-sub > h3, .card-sub > h4 { margin: 0 0 10px; }

/* Gallery console — batch resize */
.sel-col { width: 36px; text-align: center; }
.resize-expander td { background: #f8fafc; }
.resize-inline { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 6px 4px; }
.resize-inline-title { font-weight: 600; }
.resize-inline-label { color: #6b7280; }
.resized-badges { display: inline-flex; gap: 6px; margin-top: 4px; flex-wrap: wrap; }
.resized-badge { text-decoration: none; }

/* Eligibility pre-check reasons (event page action card). */
.eligibility-list { list-style: disc; padding-left: 20px; margin: 0 0 4px; display: grid; gap: 6px; }

/* Manual Register inline panel (mirror parity). */
.inline-msg { margin-top: 10px; font-size: 10px; min-height: 18px; }
.inline-msg.ok { color: var(--success); font-weight: 600; }
.inline-msg.err { color: var(--danger); font-weight: 600; }
.manual-reg-selected { margin-top: 10px; padding: 10px 12px; border: 1px solid var(--success-soft, #dcfce7); border-left: 3px solid var(--success); border-radius: 6px; font-size: 10px; }

/* Unverified drawer lock: no role switching, only Home visible. */
body.drawer-locked-unverified #role-slot,
body.drawer-locked-unverified #role-drawer-slot,
body.drawer-locked-unverified .drawer-role { display: none !important; }
body.drawer-locked-unverified .sidebar .side-nav .side-link:not([data-path="/"]) { display: none !important; }
body.drawer-locked-unverified .sidebar .side-nav .side-section { display: none !important; }

/* Sidebar links: keep icon fixed, let label take full width — never clip text. */
.side-link .icon { flex-shrink: 0; }
.side-link > span:last-child { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: visible; }

/* --- Create/Edit event form polish (scoped to the editor card) ---------- */
#editor-card > .card-title {
  padding-bottom: 10px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
#event-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 16px;
  align-items: start;
}
#event-form > * { grid-column: 1 / -1; min-width: 0; }
#event-form > .form-group { grid-column: span 1; }
/* Wide blocks keep the full row: products, the visa audience block,
   benefits, activity tasks, and the model/custom-requirements blocks. */
#event-form > .form-group:has(#f-product-category),
#event-form > .form-group:has(#f-audience),
#event-form > .visa-incentives,
#event-form > .form-group:has(#f-benefit-input),
#event-form > .form-group:has(#tasks-list),
#event-form > .form-group:has(.segmented-control),
#event-form > #custom-requirements-wrap { grid-column: 1 / -1; }
#editor-card .form-group > label, #editor-card .form-group > .label { margin-bottom: 6px; }
#editor-card .input, #editor-card .select, #editor-card .textarea { padding: 10px 12px; }
#editor-card .field-error:not([hidden]) {
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 6px;
  padding: 4px 8px;
}
/* Required-field asterisks are red (owner, 2026-10-22). */
#editor-card .req-star { color: var(--danger); font-weight: 700; }

/* Visa pickers as pills; the per-visa amounts sit in one soft panel. */
#editor-card #f-audience { gap: 8px; }
#editor-card #f-audience .checkbox {
  align-items: center;
  gap: 6px;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 12px 6px 8px;
  background: var(--surface);
  transition: border-color 0.15s ease, background 0.15s ease;
}
#editor-card #f-audience .checkbox:hover { border-color: var(--brand); }
#editor-card #f-audience .checkbox:has(input:checked) {
  background: var(--brand-soft);
  border-color: var(--brand);
}
#editor-card #f-audience .checkbox input { margin-top: 0; }
#editor-card .visa-incentives {
  grid-column: 1 / -1;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px 4px;
}
#editor-card .visa-incentives .form-group { margin-bottom: 12px; }
#editor-card .visa-incentives .form-group + .form-group {
  border-top: 1px dashed var(--border);
  padding-top: 12px;
}

/* Requirement and activity-task rows read as small cards. */
#editor-card .req-row, #editor-card .task-row {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
}
#editor-card .req-row:hover, #editor-card .task-row:hover { border-color: #d1d5db; }

/* Save / Cancel stay reachable at the bottom of the long form. */
#editor-card .form-actions {
  position: sticky;
  bottom: 0;
  z-index: 5;
  background: var(--surface);
  border-top: 1px solid var(--border);
  margin-top: 20px;
  padding: 12px 0 2px;
}

@media (max-width: 640px) {
  #event-form { grid-template-columns: 1fr; }
  #event-form > .form-group { grid-column: 1 / -1; }
}

/* --- Event submenu sections (owner, 2026-10-23) ---------------------------
   The detail/ops tab rows are driven by the sidebar event submenu now. */
.tabs.nav-driven { display: none; }
#detail-actions[hidden] { display: none; }
.ev-submenu { margin: 2px 0 4px 2px; padding-left: 6px; border-left: 2px solid var(--border); }
.ev-submenu-name { font-weight: 700; color: var(--text); }
.event-list-submenu {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin: 2px 0 4px 2px;
  padding-left: 6px;
  border-left: 2px solid var(--border);
}
.event-list-item {
  overflow: hidden;
  margin-left: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Items nest one level under the event name (his structure diagram). */
.ev-submenu-items { display: flex; flex-direction: column; gap: 1px; margin-left: 10px; }
/* The name/items are <button>s wearing .side-sublink: strip the default
   button chrome so they read as plain sidebar links, aligned left. */
.ev-submenu-name, .ev-sub-item {
  width: 100%;
  border: 0;
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
#detail-overview { margin-bottom: 8px; }
#overview-card .stats-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 0;
}
#overview-card .overview-stat-card {
  min-width: 0;
  overflow: hidden;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  padding: 8px;
  white-space: nowrap;
}
#overview-card .overview-stat-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--brand-soft);
  color: var(--brand);
  font-size: 11px;
  font-weight: 700;
}
#overview-card .overview-stat-value { font-size: 12px; font-weight: 700; }
#overview-card .overview-stat-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 10px;
  color: var(--muted);
}

/* Event Controls rows + ON/OFF pill switches (mirror style, owner
   2026-10-23): green ON with the knob right, grey OFF with the knob left. */
.ctl-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.ctl-row:last-of-type { border-bottom: 0; }
.ctl-row-text { display: flex; flex-direction: column; gap: 2px; }
.ctl-row-text .card-sub { margin: 0; }
.toggle-switch { position: relative; flex: none; width: 74px; height: 32px; padding: 0; border: 0; border-radius: 999px; background: #d8dde8; cursor: pointer; transition: background 0.15s ease; }
.toggle-switch .ts-state { position: absolute; top: 0; right: 11px; height: 32px; line-height: 32px; font-size: 10px; font-weight: 700; color: #5b6472; }
.toggle-switch .ts-knob { position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(16, 24, 40, 0.3); transition: left 0.15s ease; }
.toggle-switch.is-on { background: #65b704; }
.toggle-switch.is-on .ts-state { right: auto; left: 11px; color: #fff; }
.toggle-switch.is-on .ts-knob { left: 45px; }
.toggle-switch:disabled { opacity: 0.6; cursor: wait; }
.ctl-switch-wrap { display: flex; align-items: center; gap: 10px; flex: none; }
/* Group QR panel (owner, 2026-10-23): switches at the panel's right
   edge (he reversed his centered ask with an arrow-marked screenshot);
   the Save/Refresh row stays centered via .form-actions. */
.btn-right { display: flex; justify-content: flex-end; }
#detail-card .form-actions { justify-content: center; }
.groupqr-upload-field,
.groupqr-expiry-field { min-width: 0; }
.groupqr-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.groupqr-upload-field .input,
.groupqr-expiry-field .input { width: 100%; }
.groupqr-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.groupqr-toggle-row .label {
  margin: 0;
}
.groupqr-toggle-row .btn-right {
  flex: 0 0 auto;
}
.task-builder {
  margin-bottom: 20px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-soft, #f8fafc);
}
.task-builder-selects { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.task-builder-selects:has(.task-builder-mode-group.is-visible) {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.task-builder .card-title { margin-bottom: 4px; }
.task-builder-selects { margin-bottom: 0; }
.task-builder-title-duration {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}
.task-builder-duration,
.task-builder-duration-fields { display: contents; }
.task-builder-preview {
  min-height: 34px;
  padding: 9px 12px;
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  color: var(--muted);
  font-size: 10px;
}

/* One border for the ops panel (owner, 2026-11-03; corrected the same day):
 * the ops card is NESTED inside the header card with a dashed border, so
 * removing only its top edge still left a second box inside the first.
 * While the ops card is visible it loses its border and padding entirely
 * and the header card keeps its full border — so the whole stack reads as
 * one bordered box. The builder rule only ever matches inside the tasks
 * panel; the other tabs' tables, grant rows and inputs keep their own row
 * styling. */
#page-content:has(#ops-card:not([hidden])) #ops-card { border: none; padding: 0; }
#page-content:has(#ops-card:not([hidden])) .task-builder { border: none; background: transparent; padding: 0; margin: 0; }
/* Tasks tab title (owner, 2026-11-03): the ops card title repeats the page
 * header on the tasks tab, so it is hidden there only; the other tabs keep
 * their titles. */
#ops-card:has(#opspanel-tasks:not([hidden])) #ops-card-title { display: none; }
.task-builder-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.task-builder-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface, #fff);
}
.task-builder-row-label {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--text);
  font-size: 11px;
}
.task-builder-row-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
}
.task-builder-row-controls .btn {
  flex: 0 0 auto;
  white-space: nowrap;
}
.task-builder-submission-row {
  cursor: pointer;
  grid-template-columns: minmax(0, 1fr) auto;
}
.task-builder-submission-summary {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
}
.task-builder-submission-details {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  border-top: 1px solid var(--border);
  color: var(--text-2);
  font-size: 11px;
}
.task-builder-submission-image {
  display: block;
  width: min(180px, 100%);
  max-height: 180px;
  object-fit: contain;
  border-radius: 8px;
}
.task-builder-submission-row.is-expanded {
  border-color: var(--brand);
}
.user-task-table {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface, #fff);
}
.user-task-table-row {
  display: grid;
  grid-template-columns: 30px minmax(150px, 1.2fr) minmax(120px, 1fr) minmax(100px, 1fr) repeat(var(--user-task-count, 1), minmax(110px, 1fr)) minmax(70px, auto);
  align-items: center;
  min-width: max-content;
  text-align: center;
}
.user-task-table-row > * {
  justify-self: center;
}
.user-task-table-head {
  padding: 10px;
  background: var(--bg-soft, #f8fafc);
  border-bottom: 1px solid var(--border);
  color: var(--text-2);
  font-size: 10px;
  font-weight: 700;
}
.user-task-table-body {
  padding: 10px;
  border-bottom: 1px solid var(--border);
  font-size: 10px;
}
.user-task-table-body:last-of-type { border-bottom: 0; }
.user-task-table-user { font-weight: 700; }
.user-task-status {
  display: inline-flex;
  justify-content: center;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}
.user-task-status--selected { background: var(--success-soft); color: #15803d; }
.user-task-status--rewarding { background: #fef3c7; color: #a16207; }
.user-task-status--registered { background: var(--warning-soft); color: #b45309; }
.user-task-status--cancelled { background: #f3f4f6; color: #6b7280; }
.user-task-status--waitlist { background: var(--info-soft); color: #0369a1; }
.user-task-table-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 30px;
  padding: 0 6px;
}
.user-task-select {
  width: 18px;
  height: 18px;
  margin: 0 auto;
  accent-color: var(--brand, #4f46e5);
}
.user-task-bulk-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  min-height: 42px;
  padding: 6px 10px;
  background: #eef2ff;
  border: 1px solid var(--border);
  border-bottom: 0;
  border-radius: 10px 10px 0 0;
}
.user-task-bulk-bar[hidden] {
  display: none;
}
.user-task-selected-count {
  margin-right: auto;
  font-weight: 700;
}
.user-task-submitted-value {
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.user-task-view {
  color: var(--brand);
  text-decoration: underline;
}
.user-task-image-modal {
  display: flex;
  justify-content: center;
}
.user-task-confirm {
  min-width: 32px;
  width: 32px;
  height: 30px;
  padding: 0;
  border-radius: 7px;
  font-size: 16px;
}
.user-task-completion-select {
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: var(--brand, #4f46e5);
}
.user-task-confirm-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  min-height: 42px;
  padding: 6px 10px;
  border-top: 1px solid var(--border);
  background: var(--bg-soft, #f8fafc);
}
.user-task-verified {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  width: 32px;
  height: 30px;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: #15803d;
  font-size: 16px;
  font-weight: 800;
}
.task-status-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5em;
  height: 1.5em;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: #15803d;
  font-size: 1.1em;
  font-weight: 800;
}
.user-task-waiting {
  color: #a16207;
  font-size: 16px;
  line-height: 1;
}
.event-card__congratulations {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 14px;
  border: 1px solid #86efac;
  border-radius: 10px;
  background: #f0fdf4;
  color: #15803d;
  text-align: center;
}
.event-card__congratulations h4,
.event-card__congratulations p {
  margin: 0;
}
.event-card__congratulations-image {
  display: block;
  width: min(140px, 60%);
  max-height: 100px;
  object-fit: contain;
  border-radius: 6px;
}
.user-task-table-details {
  grid-column: 1 / -1;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-soft, #f8fafc);
}
.user-task-detail {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 6px 0;
}
.user-task-table-body.is-expanded { background: #f8fbff; }
.task-builder-mode-group { display: none; }
.task-builder-mode-group.is-visible { display: block; }
.task-builder-options-group { display: none; }
.task-builder-options-group.is-visible { display: block; }

.ctl-state { white-space: nowrap; }
.state-pills { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
@media (max-width: 640px) {
  .task-builder-selects,
  .task-builder-selects:has(.task-builder-mode-group.is-visible) { grid-template-columns: 1fr; }
  .task-builder-title-duration { grid-template-columns: 1fr; }
  .task-builder-duration-fields { grid-template-columns: 1fr; }
  .task-builder-row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px;
    padding: 7px 8px;
  }
  .task-builder-row-controls .btn {
    padding: 6px 7px;
  }
  .groupqr-form-grid { grid-template-columns: 1fr; }
  .groupqr-toggle-row { align-items: flex-start; }
}

/* Owner type scale (2026-10-22): desktop body/labels/messages/buttons/
   inputs are 10px, H1 16px, H2 14px, H3 12px. On mobile, form controls
   use 16px so iOS Safari does not auto-zoom on focus, and H1 is 22px.
   NOTE: keep this block last in the file — the type-scale test reads
   from the last @media (max-width: 640px) block, so any mobile block
   added after it will hide these rules from the test. */
@media (max-width: 640px) {
  h1, .hero h1, .page-head h1, .hero-slide-cap h1 { font-size: 22px; }
  .input, .select, .textarea, .search-input, .role-select, .lang-select,
  input, select, textarea { font-size: 16px; }
  .kiosk-main { padding: 16px; }
  .announce-bar { padding: 6px 10px; }
}

/* --- company profile + partners (owner, 2026-11-01) --- */
.partner-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px; margin: 0 0 24px; }
.partner-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 16px; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.partner-logo { max-width: 150px; max-height: 90px; object-fit: contain; }
.partner-name { font-weight: 600; color: var(--text); }
.partner-logo-thumb { max-width: 120px; max-height: 60px; object-fit: contain; display: block; margin-bottom: 6px; }