/* ========================================
   ManiGym - Design System
   ======================================== */

:root {
  --bg: #0a0a0a;
  --bg-card: #0e0e0e;
  --bg-card-hover: #1a1a1a;
  --border: #2a2a2a;
  --text: #ffffff;
  --text-primary: #ffffff;
  --text-dim: #999999;
  --hover: rgba(255,255,255,0.05);
  --bg-subtle: rgba(255,255,255,0.04);
  --indigo-bg: rgba(99,102,241,0.12);
  --indigo: #a5b4fc;
  --blue: #3b82f6;
  --accent: #ec3237;
  --accent-dim: #c4272b;
  --green: #22c55e;
  --green-bg: rgba(34, 197, 94, 0.12);
  --red: #ef4444;
  --red-bg: rgba(239, 68, 68, 0.12);
  --orange: #f59e0b;
  --orange-bg: rgba(245, 158, 11, 0.12);
  --blue: #ec3237;
  --blue-bg: rgba(236, 50, 55, 0.12);
  --purple: #ec3237;
  --radius: 12px;
  --radius-sm: 8px;
  --bg-input: rgba(255,255,255,0.04);
  --accent-bg: rgba(236,50,55,0.12);
  --shadow: 0 4px 24px rgba(0,0,0,0.3);
  --transition: 0.15s ease;
  /* n27 (h-hub, 8 Oct 2026): "Drop-ins" has its own calm colour, a real blue (--blue is the brand red here). */
  --dropins: #60a5fa;
  --dropins-bg: rgba(96, 165, 250, 0.14);
}

/* ── Light Theme ── */
[data-theme="light"] {
  --bg: #f5f5f5;
  --bg-card: #ffffff;
  --bg-card-hover: #f0f0f0;
  --border: #d4d4d4;
  --text: #1a1a1a;
  --text-primary: #1a1a1a;
  --text-dim: #666666;
  --hover: rgba(0,0,0,0.04);
  --bg-subtle: #f3f4f6;
  --indigo-bg: #e0e7ff;
  --indigo: #6366f1;
  --blue: #3b82f6;
  --accent: #ec3237;
  --accent-dim: #c4272b;
  --green: #059669;
  --green-bg: #ecfdf5;
  --red: #dc2626;
  --red-bg: #fef2f2;
  --orange: #d97706;
  --orange-bg: #fffbeb;
  --blue: #ec3237;
  --blue-bg: rgba(236, 50, 55, 0.08);
  --purple: #ec3237;
  --bg-input: rgba(0,0,0,0.03);
  --accent-bg: rgba(236,50,55,0.08);
  --shadow: 0 4px 24px rgba(0,0,0,0.08);
  --dropins: #1d4ed8;
  --dropins-bg: #eff6ff;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  min-height: 100dvh;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: none; }
.sidebar-link:hover, .snap-activity-link:hover { text-decoration: none; }

/* ========================================
   Layout
   ======================================== */

.page { max-width: 480px; margin: 0 auto; padding: 16px; padding-bottom: 80px; }
.admin-layout .page { max-width: none; margin: 0; flex: 1; overflow-y: auto; padding: 16px 24px; padding-bottom: 16px; }
.page-wide { max-width: 900px; margin: 0 auto; padding: 16px; padding-bottom: 80px; }

.header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 0; margin-bottom: 16px;
}
.header h1 { font-size: 20px; font-weight: 700; }
.header .subtitle { font-size: 13px; color: var(--text-dim); }

/* ========================================
   Admin Layout (Sidebar + Main)
   ======================================== */

.admin-layout {
  display: flex;
  min-height: 100vh;
  min-height: 100dvh;
}

.admin-sidebar {
  width: 220px;
  background: var(--bg-card);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  transition: width 0.2s ease;
}
.admin-sidebar.collapsed { width: 56px; }
.admin-sidebar.collapsed .sidebar-brand-identity,
.admin-sidebar.collapsed .sidebar-brand-lang,
.admin-sidebar.collapsed .sidebar-text,
.admin-sidebar.collapsed .sidebar-badge,
.admin-sidebar.collapsed .sidebar-count,
.admin-sidebar.collapsed .sidebar-section-toggle span:not(.sidebar-section-arrow),
.admin-sidebar.collapsed .sidebar-footer select,
.admin-sidebar.collapsed .sidebar-footer #helpBtn,
.admin-sidebar.collapsed .sidebar-kiosk-link { display: none !important; }
.admin-sidebar.collapsed .sidebar-link { justify-content: center; padding: 10px 0; }
.admin-sidebar.collapsed .sidebar-link.active { padding-left: 0; border-left: 3px solid var(--accent); }
.admin-sidebar.collapsed .sidebar-icon { width: auto; }
.admin-sidebar.collapsed .sidebar-brand { justify-content: center; padding: 10px 8px; }
.admin-sidebar.collapsed .sidebar-footer { justify-content: center; }
.sidebar-collapse-btn { display: none !important; }
@media (min-width: 901px) {
  .admin-sidebar { position: sticky; }
}

a.sidebar-brand,
.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  flex-wrap: nowrap;
  height: 48px;
  text-decoration: none;
  color: inherit;
}
a.sidebar-brand:hover { text-decoration: none; }

.sidebar-brand-logo {
  width: 32px !important;
  height: 32px !important;
  max-width: 32px !important;
  max-height: 32px !important;
  min-width: 32px;
  min-height: 32px;
  border-radius: 50%;
  object-fit: contain;
  background: transparent;
  flex-shrink: 0;
}

.sidebar-brand-lang {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  font-family: inherit;
  height: 24px;
  line-height: 20px;
  flex-shrink: 0;
  width: auto;
}
.sidebar-brand-lang option {
  background: var(--bg-card);
  color: var(--text);
}
.sidebar-brand-lang:hover { border-color: var(--accent); }
.sidebar-theme-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 3px;
  border-radius: 4px;
  color: var(--text-dim);
  transition: color .15s;
  flex-shrink: 0;
}
.sidebar-theme-btn:hover { color: var(--text); }
/* Show correct theme icon */
[data-theme="dark"] .theme-icon-light { display: none; }
[data-theme="dark"] .theme-icon-dark { display: inline; }
.theme-icon-dark { display: none; }
.theme-icon-light { display: inline; }

.brand-icon {
  width: 32px; height: 32px;
  background: var(--accent);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800; color: white;
}

.brand-logo {
  width: 32px; height: 32px;
  border-radius: 8px;
  object-fit: contain;
}

.brand-text {
  font-size: 18px;
  font-weight: 800;
}

.sidebar-nav {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 12px 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sidebar-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  color: var(--text-dim);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: all var(--transition);
}

.sidebar-link:hover {
  background: var(--bg-card-hover);
  color: var(--text);
  text-decoration: none;
}

.sidebar-link.active {
  background: rgba(236, 50, 55, 0.12);
  color: var(--accent);
  font-weight: 600;
  border-left: 3px solid var(--accent);
  padding-left: 9px;
}
.sidebar-link.active .sidebar-icon {
  color: var(--accent);
}

.sidebar-icon {
  font-size: 16px;
  width: 20px;
  text-align: center;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.sidebar-icon svg {
  width: 16px;
  height: 16px;
}
.sidebar-text {
  flex: 1;
  min-width: 0;
}

.sidebar-footer {
  padding: 10px 10px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
  flex-shrink: 0;
  background: var(--bg-card);
}
.sidebar-footer button,
.sidebar-footer select,
.sidebar-footer a {
  min-height: unset;
  min-width: unset;
}
.sidebar-footer-spacer {
  flex: 1;
}

.sidebar-footer-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 15px;
  color: var(--text-dim);
  transition: background .15s, color .15s;
  text-decoration: none;
  padding: 0;
  flex-shrink: 0;
}
.sidebar-footer-icon-btn:hover {
  background: var(--bg-card-hover);
  color: var(--text);
}
.sidebar-footer-logout {
  color: var(--text-dim);
}
.sidebar-footer-logout:hover {
  background: rgba(239, 68, 68, 0.1);
  color: var(--red, #ef4444);
}

/* Sidebar Brand - Logo + Renzo Gracie + location */
.sidebar-brand-identity {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
}
.brand-name-primary {
  font-size: 13px;
  font-weight: 800;
  color: var(--accent, #ec3237);
  line-height: 1.2;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}
.brand-name-location {
  font-size: 11px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
/* legacy .brand-name-gym replaced by .brand-name-location */
/* Role badge shown under gym name for non-owner staff */
.sidebar-role-badge {
  display: inline-block;
  margin-top: 3px;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
  border: 1px solid rgba(34, 197, 94, 0.3);
  border-radius: 4px;
  padding: 1px 5px;
}

/* Sidebar Collapsible Sections */
.sidebar-section {
  margin-top: 4px;
}
.sidebar-section-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 6px 12px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  color: var(--text-dim);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  opacity: 0.6;
  transition: opacity .15s;
}
.sidebar-section-toggle:hover { opacity: 1; }
.sidebar-section-arrow {
  font-size: 8px;
  transition: transform .2s ease;
}
.sidebar-section-toggle[aria-expanded="false"] .sidebar-section-arrow {
  transform: rotate(-90deg);
}
.sidebar-section-items {
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: hidden;
  max-height: 500px;
  transition: max-height .25s ease;
}
.sidebar-section-items.collapsed {
  max-height: 0;
}

/* Sidebar trial badge (orange, attention) */
.sidebar-badge {
  background: var(--orange, #f59e0b);
  color: #fff;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 7px;
  min-width: 18px;
  text-align: center;
}

/* Sidebar count (dim, informational) */
.sidebar-count {
  color: var(--text-dim, #888);
  font-size: 11px;
  font-weight: 600;
  opacity: .6;
}
.sidebar-badge-urgent {
  background: var(--accent, #ec3237);
}
.sidebar-badge-new {
  background: var(--green, #22c55e);
}
@media (max-width: 900px) {
  .sidebar-badge-new { display: none; }
}

/* Theme Toggle */
.theme-toggle {
  background: var(--bg-card-hover);
  border: 1px solid var(--border);
  color: var(--text-dim);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 16px;
  transition: background var(--transition), color var(--transition);
  flex-shrink: 0;
  padding: 0;
  line-height: 1;
}
.theme-toggle:hover {
  background: var(--bg-card);
  color: var(--text);
}

.admin-main {
  flex: 1;
  padding: 24px 32px;
  overflow-y: auto;
  width: 100%;
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}
.admin-main:hover {
  scrollbar-color: var(--border) transparent;
}
.admin-main::-webkit-scrollbar { width: 6px; }
.admin-main::-webkit-scrollbar-track { background: transparent; }
.admin-main::-webkit-scrollbar-thumb { background: transparent; border-radius: 3px; }
.admin-main:hover::-webkit-scrollbar-thumb { background: var(--border); }

/* Dashboard override — it manages its own layout */
body:has(.dash-layout) .admin-main {
  padding: 0;
}

.admin-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}

/* ── Theme Toggle Slider (topbar) ── */
.theme-toggle-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.theme-toggle-icon {
  font-size: 14px;
  line-height: 1;
  color: var(--text-dim);
  user-select: none;
}
.theme-toggle-switch {
  position: relative;
  width: 36px;
  height: 20px;
  flex-shrink: 0;
}
.theme-toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}
.theme-toggle-track {
  position: absolute;
  inset: 0;
  border-radius: 20px;
  background: var(--border);
  cursor: pointer;
  transition: background .2s;
}
.theme-toggle-track::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--text);
  transition: transform .2s, background .2s;
}
[data-theme="light"] .theme-toggle-track { background: var(--accent); }
[data-theme="light"] .theme-toggle-track::after { transform: translateX(16px); background: #fff; }

.admin-title {
  font-size: 24px;
  font-weight: 700;
}

.admin-subtitle {
  font-size: 13px;
  color: var(--text-dim);
  margin-top: 2px;
}

/* ========================================
   Revenue Banner
   ======================================== */

.revenue-banner {
  background: linear-gradient(135deg, var(--accent-dim), var(--accent));
  color: #fff;
  border-radius: var(--radius);
  padding: 24px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  min-width: 0;
  overflow: hidden;
}

.revenue-banner-inner {
  min-width: 0;
  flex-shrink: 1;
}

.revenue-label {
  font-size: 13px;
  opacity: 0.8;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.revenue-amount {
  font-size: 36px;
  font-weight: 800;
  margin-top: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.revenue-details {
  display: flex;
  gap: 24px;
  flex-shrink: 0;
  flex-wrap: wrap;
}

.revenue-detail-item {
  text-align: center;
}

.revenue-detail-value {
  font-size: 24px;
  font-weight: 700;
  display: block;
  white-space: nowrap;
}

.revenue-detail-label {
  font-size: 11px;
  opacity: 0.7;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

/* ========================================
   Admin Stats Grid
   ======================================== */

.admin-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}

.admin-stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: background var(--transition);
}

.admin-stat-card:hover {
  background: var(--bg-card-hover);
}

.admin-stat-icon {
  width: 44px; height: 44px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 700;
  flex-shrink: 0;
}

.admin-stat-value {
  font-size: 22px;
  font-weight: 700;
}

.admin-stat-label {
  font-size: 12px;
  color: var(--text-dim);
}

.admin-grid-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}

.admin-quick-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 16px;
}

/* ========================================
   Cards
   ======================================== */

.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 12px;
  transition: background var(--transition);
}

.card:hover { background: var(--bg-card-hover); }

.card-title {
  font-size: 13px; font-weight: 600; color: var(--text-dim);
  text-transform: uppercase; letter-spacing: 0.5px;
  margin-bottom: 8px;
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.card-action {
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
}

.card-list {
  display: flex;
  flex-direction: column;
}

/* ========================================
   Stats Row
   ======================================== */

.stats-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 16px; }
.stat-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 12px; text-align: center;
}
.stat-value { font-size: 24px; font-weight: 700; }
.stat-label { font-size: 11px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.5px; }

/* ========================================
   Buttons
   ======================================== */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 7px 14px; border-radius: var(--radius-sm);
  font-size: 13px; font-weight: 600; line-height: 1.25; border: none; cursor: pointer;
  transition: all var(--transition);
  font-family: inherit;
}
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-primary { background: var(--accent); color: white; }
.btn-primary:hover:not(:disabled) { background: var(--accent-dim); transform: translateY(-1px); }
.btn-success { background: var(--green); color: white; }
.btn-success:hover:not(:disabled) { filter: brightness(0.9); }
.btn-danger { background: var(--red); color: white; }
.btn-danger:hover:not(:disabled) { filter: brightness(0.9); }
.btn-ghost { background: transparent; color: var(--text-dim); border: 1px solid var(--border); }
.btn-ghost:hover { background: var(--bg-card-hover); color: var(--text); }
.btn-lg { padding: 10px 22px; font-size: 15px; border-radius: var(--radius); }
.btn-block { width: 100%; }
.btn-sm { padding: 5px 11px; font-size: 12px; }

/* ========================================
   Badges
   ======================================== */

.badge {
  display: inline-block; padding: 3px 8px; border-radius: 20px;
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px;
}
.badge-green { background: var(--green-bg); color: var(--green); }
.badge-red { background: var(--red-bg); color: var(--red); }
.badge-orange { background: var(--orange-bg); color: var(--orange); }
.badge-blue { background: var(--blue-bg); color: var(--blue); }
.badge-purple { background: rgba(236, 50, 55, 0.12); color: var(--purple); }
.badge-classpass { background: rgba(139, 92, 246, 0.14); color: #8b5cf6; }
.badge-dropins { background: var(--dropins-bg); color: var(--dropins); }
.badge-gray { background: rgba(128,128,148,0.12); color: var(--text-dim); }

/* Belt colors - Adults */
.belt-white { color: #e8e8f0; }
.belt-blue { color: #3b82f6; }
.belt-purple { color: #a855f7; }
.belt-brown { color: #a16207; }
.belt-black { color: #e8e8f0; text-shadow: 0 0 4px rgba(255,255,255,0.3); }
/* Belt colors - Kids */
.belt-gray { color: #9ca3af; }
.belt-yellow { color: #facc15; }
.belt-orange { color: #f97316; }
.belt-green { color: #22c55e; }

/* Belt badge - colored pill for student cards */
.belt-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600;
  text-transform: capitalize; letter-spacing: 0.3px;
}
/* Adult belt badges */
.belt-badge-white { background: rgba(232,232,240,0.15); color: #e8e8f0; border: 1px solid rgba(232,232,240,0.3); }
.belt-badge-blue { background: rgba(59,130,246,0.2); color: #3b82f6; border: 1px solid rgba(59,130,246,0.3); }
.belt-badge-purple { background: rgba(168,85,247,0.2); color: #a855f7; border: 1px solid rgba(168,85,247,0.3); }
.belt-badge-brown { background: rgba(146,64,14,0.2); color: #c87941; border: 1px solid rgba(146,64,14,0.4); }
.belt-badge-black { background: rgba(31,41,55,0.5); color: #d1d5db; border: 1px solid rgba(209,213,219,0.2); }
/* Kids belt badges */
.belt-badge-gray { background: rgba(156,163,175,0.2); color: #9ca3af; border: 1px solid rgba(156,163,175,0.3); }
.belt-badge-yellow { background: rgba(250,204,21,0.2); color: #ca8a04; border: 1px solid rgba(250,204,21,0.3); }
.belt-badge-orange { background: rgba(249,115,22,0.2); color: #f97316; border: 1px solid rgba(249,115,22,0.3); }
.belt-badge-green { background: rgba(34,197,94,0.2); color: #22c55e; border: 1px solid rgba(34,197,94,0.3); }

/* Belt stripe dots (legacy - use .belt-bar for new code) */
.belt-stripes { display: inline-flex; gap: 2px; align-items: center; }
.belt-stripe-dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: 0.8; }

/* ============================================
   Belt bar component (ported from Gracie Laval)
   Colored belt with black tip + FULL-HEIGHT vertical stripe bars.
   Sizes: .belt-bar-mini (22px), .belt-bar-sm (32px), .belt-bar-md (48px)
   Colors: .bb-white / .bb-blue / .bb-purple / .bb-brown / .bb-black
   Kids: .bb-gray / .bb-yellow / .bb-orange / .bb-green
   ============================================ */
.belt-bar {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  border-radius: 4px;
  background: var(--belt-color, #d4d4d4);
  box-shadow: 0 2px 6px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.08);
}
/* Black section shifted 10px left from its original position so there's
   a visible belt-color tip on the right. Width stays 48% of belt; the
   whole block (plus stripes) is translated 10px via calc(). */
.belt-bar::after {
  content: '';
  position: absolute;
  right: calc(2% + 10px);
  top: 0; bottom: 0;
  width: 48%;
  background: #1a1a1b;
}
/* Stripes distributed WITHIN the black area (right:2% to right:50%, width 48%).
   Math proportioned to the BLACK, not the whole belt:
     48% = 2*margin + 4*stripe + 3*gap
     margin = gap = 8%, stripe = 2%: 16 + 8 + 24 = 48 ✓
   Stripes are narrow (~4% of the black area) for a realistic look.
   Positions measured from belt-bar right edge:
     s1 = 2% tip + 8% margin = 10%
     s2 = s1 + 2 + 8 = 20%
     s3 = 30%, s4 = 40%
   Equal 8% margin from tip edge AND from left boundary of black. */
.belt-bar .stripe {
  position: absolute;
  z-index: 5;
  top: 0;
  bottom: 0;
  width: 2%;
  background: #fff;
  box-shadow: 0 0 4px rgba(255,255,255,0.4);
}
.belt-bar .stripe.s1 { right: calc(10% + 10px); }
.belt-bar .stripe.s2 { right: calc(20% + 10px); }
.belt-bar .stripe.s3 { right: calc(30% + 10px); }
.belt-bar .stripe.s4 { right: calc(40% + 10px); }

/* Size variants - stripe width is % of belt so all sizes scale identically */
.belt-bar-mini { height: 22px; width: 100px; }
.belt-bar-sm { height: 32px; width: 140px; }
.belt-bar-md { height: 48px; width: 220px; border-radius: 5px; }
.belt-bar-md::after { border-radius: 0 5px 5px 0; }

/* Adult belt colors */
.belt-bar.bb-white  { --belt-color: #f3f4f6; }
.belt-bar.bb-blue   { --belt-color: #1D4ED8; }
.belt-bar.bb-purple { --belt-color: #6B21A8; }
.belt-bar.bb-brown  { --belt-color: #78350F; }
.belt-bar.bb-black  { background: #0a0a0b; border: 1px solid rgba(255,255,255,0.12); }
.belt-bar.bb-black::after { background: #DC2626; border-left-color: #fff; border-right-color: #fff; }
.belt-bar.bb-black .stripe { width: 4px; }

/* Kids belt colors */
.belt-bar.bb-gray   { --belt-color: #9CA3AF; }
.belt-bar.bb-yellow { --belt-color: #EAB308; }
.belt-bar.bb-orange { --belt-color: #F97316; }
.belt-bar.bb-green  { --belt-color: #22C55E; }

/* Clickable belt bar indicator */
.belt-bar.editable { cursor: pointer; transition: transform 0.15s, box-shadow 0.15s; }
.belt-bar.editable:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(236,50,55,0.25), inset 0 1px 0 rgba(255,255,255,0.08); }

/* ========================================
   Lists
   ======================================== */

.list-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px; border-radius: var(--radius-sm);
  border-bottom: 1px solid var(--border);
  cursor: pointer; transition: background var(--transition);
}
.list-item:hover { background: var(--bg-card-hover); }
.list-item:last-child { border-bottom: none; }
.list-item .avatar {
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 16px; flex-shrink: 0;
}
.list-item .info { flex: 1; min-width: 0; }
.list-item .name { font-weight: 600; font-size: 15px; }
.list-item .meta { font-size: 12px; color: var(--text-dim); }

/* ========================================
   Avatar
   ======================================== */

.avatar {
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 16px; color: white;
  flex-shrink: 0;
}

/* ========================================
   Search
   ======================================== */

.search-box {
  width: 100%; padding: 12px 16px; padding-left: 40px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); color: var(--text);
  font-size: 16px; outline: 2px solid transparent; outline-offset: 2px;
  transition: border-color var(--transition);
  font-family: inherit;
}
.search-box:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(236,50,55,0.15); }
.search-wrapper { position: relative; margin-bottom: 16px; }
.search-icon {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  color: var(--text-dim); font-size: 16px;
}

/* ========================================
   Filter Bar
   ======================================== */

.filter-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.filter-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.filter-chip {
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  transition: all var(--transition);
  font-family: inherit;
}

.filter-chip:hover {
  background: var(--bg-card-hover);
  color: var(--text);
}

.filter-chip.active {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}

/* ---- Mobile filter chips: single horizontal scroll rail ---- */
@media (max-width: 600px) {
  .filter-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin: 0 -14px;
    padding: 4px 14px;
    gap: 6px;
  }
  .filter-chips::-webkit-scrollbar { display: none; }
  .filter-chip { flex-shrink: 0; }
}

/* ---- Mobile filters bottom sheet ---- */
.mobile-filters-sheet-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 1200;
}
.mobile-filters-sheet-backdrop.open { display: block; }

.mobile-filters-sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--bg-card);
  border-radius: 16px 16px 0 0;
  z-index: 1201;
  max-height: 80vh;
  overflow-y: auto;
  padding: 0 16px 32px;
  transform: translateY(100%);
  transition: transform 0.25s ease;
}
.mobile-filters-sheet.open { transform: translateY(0); }

.mobile-filters-sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0 12px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
  position: sticky;
  top: 0;
  background: var(--bg-card);
  z-index: 1;
}
.mobile-filters-sheet-header h3 {
  font-size: 15px;
  font-weight: 700;
  margin: 0;
}
.mobile-filters-sheet-close {
  background: none;
  border: none;
  font-size: 20px;
  color: var(--text-dim);
  cursor: pointer;
  padding: 4px 8px;
  line-height: 1;
  border-radius: 6px;
  font-family: inherit;
}
.mobile-filters-sheet-close:hover { background: var(--bg-card-hover); }

.mobile-filters-sheet-section {
  margin-bottom: 16px;
}
.mobile-filters-sheet-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-dim);
  margin-bottom: 8px;
}
.mobile-filters-sheet-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.mfs-chip {
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  font-family: inherit;
  transition: all var(--transition, 0.15s ease);
  white-space: nowrap;
}
.mfs-chip:hover { background: var(--bg-card-hover); color: var(--text); }
.mfs-chip.active {
  background: var(--accent-bg, rgba(236,50,55,0.12));
  border-color: var(--accent);
  color: var(--accent);
}

/* Button that opens the filters sheet — mobile only */
.mobile-filters-btn { display: none; }
@media (max-width: 600px) {
  .mobile-filters-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-dim);
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
    flex-shrink: 0;
  }
  .mobile-filters-btn.has-active {
    background: var(--accent-bg, rgba(236,50,55,0.12));
    border-color: var(--accent);
    color: var(--accent);
  }
}

/* ========================================
   Data Table
   ======================================== */

.table-wrapper { overflow-x: auto; }

.data-table { width: 100%; border-collapse: collapse; }
.data-table th {
  text-align: left; padding: 10px 14px; font-size: 11px;
  color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.5px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  font-weight: 600;
}
.data-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}
.data-table tbody tr:hover td { background: var(--bg-card-hover); }

.data-table th.sortable {
  cursor: pointer;
  user-select: none;
}
.data-table th.sortable:hover { color: var(--text); }
.sort-arrow { font-size: 10px; opacity: 0.4; margin-left: 4px; }

.clickable-row { cursor: pointer; }
.clickable-row:hover td { background: var(--bg-card-hover); }
.clickable-row:active td { background: rgba(236,50,55,0.12); }

/* Check-in progress bar */
.checkin-bar {
  display: flex;
  align-items: center;
  gap: 8px;
}
.checkin-fill {
  height: 6px;
  background: var(--accent);
  border-radius: 3px;
  min-width: 2px;
  transition: width var(--transition);
}
.checkin-bar span {
  font-size: 12px;
  color: var(--text-dim);
  font-weight: 600;
}

/* ========================================
   Detail Panel (Overlay)
   ======================================== */

.detail-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  /* Must sit above .mobile-topbar (1098), .sidebar-backdrop (1099),
     .admin-sidebar (1100). Otherwise on mobile the top strip of the modal
     gets hidden under the fixed top bar and the user can't scroll to see it. */
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.2s ease;
}

.detail-panel {
  position: relative;
  width: 80%;
  max-width: 1100px;
  height: calc(100vh - 60px);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 24px;
  overflow-y: auto;
  box-sizing: border-box;
  animation: modalIn 0.2s ease;
}
@media (max-width: 768px) {
  .detail-panel {
    width: 96%;
    max-width: 100vw;
    box-sizing: border-box;
    height: calc(100vh - 40px);
    padding: 16px;
    border-radius: 12px;
  }
  .detail-overlay { align-items: flex-start; padding-top: 20px; }
  /* M-02: action-button row wraps to multiple rows instead of becoming an
     ~881px horizontal scroller that pushed/clipped the panel. The tab row
     (handled below at ≤480px) is the only horizontal scroller. */
  .detail-overlay #quickActionsBar {
    flex-wrap: wrap !important;
    overflow-x: visible !important;
    max-width: 100%;
  }
}
@media (max-width: 480px) {
  .detail-panel {
    width: 100% !important;
    max-width: 100vw;
    box-sizing: border-box;
    /* 100dvh accounts for iOS Safari's dynamic URL bar; 100vh fallback. */
    height: 100vh;
    height: 100dvh;
    border-radius: 0;
    /* Honour notch / home-indicator safe areas so the close button and the
       bottom tab row aren't clipped. */
    padding: calc(12px + env(safe-area-inset-top)) 12px calc(12px + env(safe-area-inset-bottom));
    /* Belt-and-suspenders: NOTHING inside the panel may horizontal-overflow.
       The vertical scroll stays via overflow-y:auto from the base .detail-panel
       rule; horizontal-overflow content (long tables, wide images) gets
       clipped by their own scroll wrappers per existing rules below. */
    overflow-x: hidden;
  }
  .detail-overlay { align-items: flex-start; padding-top: 0; }

  /* Tab strip: side-scroll with finger swipe, no visible scrollbar.
     touch-action:pan-x signals to the browser that horizontal pan should
     win over the vertical pan that the parent panel does (without it,
     iOS sometimes routes the tab strip's swipe to the panel scroll).
     M-02: overflow-x lives on the TABS container only, not the panel, so
     the panel is never forced wider than the viewport. */
  .detail-overlay .detail-tabs {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    flex-wrap: nowrap !important;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    touch-action: pan-x;
  }
  .detail-overlay .detail-tabs::-webkit-scrollbar { display: none; }
  /* M-02: action-button row WRAPS (no horizontal scroll/clip) so every
     action — Freeze / Cancel / Change Plan / ... / Delete — is reachable. */
  .detail-overlay #quickActionsBar {
    flex-wrap: wrap !important;
    overflow-x: visible !important;
    max-width: 100%;
  }
  /* M-02: KPI strip → 2-column grid so all 4 cards fit (the inline
     `.detail-overlay .kpi-row` rule keeps repeat(4,1fr) and out-specifies
     the generic .kpi-row 2-col rule, clipping the 4th card). */
  .detail-overlay .kpi-row {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Form fields and buttons must respect container width — no element wider
     than the panel inside content. */
  .detail-overlay .detail-panel input,
  .detail-overlay .detail-panel select,
  .detail-overlay .detail-panel textarea,
  .detail-overlay .detail-panel .btn,
  .detail-overlay .detail-panel .btn-sm,
  .detail-overlay .detail-panel .btn-sm-qa {
    max-width: 100%;
    box-sizing: border-box;
  }
  /* Long emails / Stripe IDs / customer numbers wrap rather than push the
     panel wide — but ONLY at safe break points. `overflow-wrap: anywhere`
     is too aggressive and splits "$160.95" between digits. `break-word`
     keeps words intact unless overflow would occur. */
  .detail-overlay .detail-panel {
    overflow-wrap: break-word;
  }
  /* Money / KPI / stat values must NEVER wrap. The KPI card is wide
     enough for "$1,234.56" at 18px / "$1,234" at 16px on a 320px screen
     — forcing white-space:nowrap prevents the digits from splitting
     across two lines on the rare card where the parent is narrow. */
  .detail-overlay .kpi-value,
  .detail-overlay .ov-card-value,
  .detail-overlay .ov-card-value-big,
  .detail-overlay .pay-item-amount,
  .detail-overlay .mg-money-amt,
  .detail-overlay .stat-value,
  .detail-overlay .stat-num {
    white-space: nowrap;
  }
}

@keyframes modalIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes slideInRight {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

.detail-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text-dim);
  cursor: pointer;
  font-size: 20px;
}
.detail-close:hover { color: var(--text); background: var(--bg-card-hover); }

.detail-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
  padding-top: 8px;
  padding-right: 40px;
}

.detail-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 20px;
}

.detail-section {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin-bottom: 20px;
}

.detail-row {
  display: flex;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}
.detail-row:last-child { border-bottom: none; }

.detail-label {
  color: var(--text-dim);
  font-size: 13px;
}

.detail-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* ========================================
   Modal
   ======================================== */

.modal-bg {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.6);
  /* Lifted above .mobile-topbar (1098) and sidebar (1100) so modals always
     cover the topbar on mobile instead of rendering underneath it. */
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.2s ease;
}

.modal-box {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  width: 520px;
  max-width: 90vw;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow);
  animation: scaleIn 0.2s ease;
}

@keyframes scaleIn {
  from { transform: scale(0.95); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}

.modal-header h2 { font-size: 18px; font-weight: 700; }

.modal-close {
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-dim);
  cursor: pointer;
  font-size: 20px;
  font-family: inherit;
}
.modal-close:hover { color: var(--text); background: var(--bg-card-hover); }

.modal-wide { width: 700px; max-width: 95vw; }
@media (max-width: 600px) {
  .modal-wide .modal-body[style*="grid"] { grid-template-columns: 1fr !important; }
}

.modal-body { padding: 20px; }

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 16px 20px;
  border-top: 1px solid var(--border);
}

/* ========================================
   Forms
   ======================================== */

.form-group {
  margin-bottom: 14px;
}

.form-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}

.form-input {
  width: 100%;
  padding: 10px 14px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 16px;
  outline: 2px solid transparent; outline-offset: 2px;
  transition: border-color var(--transition), outline-color var(--transition);
  font-family: inherit;
}

.form-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(236,50,55,0.15);
}

select.form-input {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%238888a0' d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
}
select.form-input option,
select.page-filter-select option,
.policy-action-sel option {
  background: var(--bg-card);
  color: var(--text);
}

textarea.form-input {
  resize: vertical;
  min-height: 80px;
}

/* Time input: ensure AM/PM spinner is fully visible in 12-hour locales */
input[type="time"].form-input {
  padding-right: 8px;
  min-width: 120px;
}
input[type="time"].form-input::-webkit-datetime-edit-ampm-field {
  padding-right: 4px;
}

.form-row {
  display: flex;
  gap: 12px;
}

/* ========================================
   Toggle Switch
   ======================================== */

.toggle-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  cursor: pointer;
}

.toggle-switch input { display: none; }

.toggle-slider {
  position: absolute;
  inset: 0;
  background: var(--border);
  border-radius: 12px;
  transition: var(--transition);
}

.toggle-slider::after {
  content: '';
  position: absolute;
  top: 3px; left: 3px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: white;
  transition: var(--transition);
}

.toggle-switch input:checked + .toggle-slider {
  background: var(--accent);
}

.toggle-switch input:checked + .toggle-slider::after {
  transform: translateX(20px);
}

/* ========================================
   Bottom Nav (Student App)
   ======================================== */

.bottom-nav {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: var(--bg-card); border-top: 1px solid var(--border);
  display: flex; justify-content: space-around;
  padding: 8px 0; padding-bottom: max(8px, env(safe-area-inset-bottom));
  z-index: 100;
}
.nav-item {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  color: var(--text-dim); font-size: 10px; font-weight: 500;
  text-decoration: none; padding: 4px 12px; border-radius: 8px;
  transition: color var(--transition);
}
.nav-item:hover { text-decoration: none; }
.nav-item.active { color: var(--accent); }
.nav-item .nav-icon { font-size: 22px; }

/* ========================================
   Day Tabs (App Schedule)
   ======================================== */

.day-tabs {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  padding-bottom: 12px;
  margin-bottom: 16px;
  -webkit-overflow-scrolling: touch;
}

.day-tab {
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-dim);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
  transition: all var(--transition);
  font-family: inherit;
  position: relative;
}

.day-tab:hover { background: var(--bg-card-hover); color: var(--text); }

.day-tab.active {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}

.day-tab-dot {
  display: block;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: currentColor;
  margin: 4px auto 0;
}

/* ========================================
   Schedule Grid (Admin Weekly View)
   ======================================== */

.schedule-grid-wrapper {
  overflow-x: auto;
  margin-bottom: 16px;
}

.schedule-weekly-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
  min-width: 700px;
}

.schedule-column {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.schedule-column-today {
  border-color: var(--accent);
}

.schedule-column-header {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  text-align: center;
  font-weight: 600;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.schedule-day-name {
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.schedule-column-body {
  padding: 8px;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.schedule-empty {
  color: var(--text-dim);
  font-size: 12px;
  text-align: center;
  padding: 20px 8px;
}

.schedule-block {
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition);
  border-left: 3px solid;
}

.schedule-block:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow);
}

.program-block-adults { background: var(--blue-bg); border-color: var(--blue); }
.program-block-kids { background: var(--green-bg); border-color: var(--green); }
.program-block-teens { background: var(--orange-bg); border-color: var(--orange); }

.schedule-block-time { font-size: 11px; color: var(--text-dim); font-weight: 600; }
.schedule-block-name { font-size: 13px; font-weight: 700; margin-top: 2px; }
.schedule-block-meta { font-size: 11px; color: var(--text-dim); margin-top: 2px; }

.schedule-legend {
  display: flex;
  gap: 20px;
  justify-content: center;
  padding: 12px;
  font-size: 12px;
  color: var(--text-dim);
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.legend-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
}

/* ========================================
   Schedule Grid (Shared)
   ======================================== */

.schedule-day { margin-bottom: 20px; }
.schedule-day-header {
  font-size: 14px; font-weight: 700; color: var(--accent);
  text-transform: uppercase; letter-spacing: 0.5px;
  padding-bottom: 8px; border-bottom: 1px solid var(--border);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
}
.class-card {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px; background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-sm); margin-bottom: 6px;
  transition: background var(--transition);
}
.class-card:hover { background: var(--bg-card-hover); }
.class-time { font-size: 13px; color: var(--accent); font-weight: 600; min-width: 100px; }
.class-name { flex: 1; font-weight: 600; }
.class-instructor { font-size: 12px; color: var(--text-dim); }
.class-program {
  font-size: 10px; padding: 2px 8px; border-radius: 10px; font-weight: 600;
  text-transform: uppercase;
}
.program-adults { background: var(--blue-bg); color: var(--blue); }
.program-kids { background: var(--green-bg); color: var(--green); }
.program-teens { background: var(--orange-bg); color: var(--orange); }

.app-class-card {
  border: 1px solid var(--border);
  background: var(--bg-card);
}

/* ========================================
   Kiosk Specific
   ======================================== */

.kiosk-page {
  max-width: 100%; height: 100vh; height: 100dvh;
  display: flex; flex-direction: column; padding: 20px;
  overflow: hidden;
}
.kiosk-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 0; margin-bottom: 12px;
}
.kiosk-header h1 { font-size: 28px; }
.kiosk-search {
  font-size: 24px; padding: 16px 20px; padding-left: 48px;
  border-radius: 16px;
}
.kiosk-search-icon { font-size: 22px; left: 18px; }
.kiosk-students { flex: 1; overflow-y: auto; }
.kiosk-student {
  display: flex; align-items: center; gap: 16px;
  padding: 16px; border-radius: var(--radius); margin-bottom: 8px;
  background: var(--bg-card); border: 1px solid var(--border);
  cursor: pointer; transition: all var(--transition);
}
.kiosk-student:hover { background: var(--accent); border-color: var(--accent); }
.kiosk-student:active, .kiosk-student.touching { transform: scale(0.98); background: var(--accent); border-color: var(--accent); }
.kiosk-student .name { font-size: 22px; font-weight: 600; flex: 1; }
.kiosk-student .belt { font-size: 14px; }
.kiosk-sidebar {
  width: 280px; flex-shrink: 0; padding-left: 20px;
  border-left: 1px solid var(--border);
  overflow-y: auto;
}
.kiosk-body { display: flex; flex: 1; overflow: hidden; gap: 0; }
.kiosk-main { flex: 1; overflow-y: auto; padding-right: 20px; }

/* Check-in success animation */
.checkin-success {
  position: fixed; inset: 0; background: rgba(34, 197, 94, 0.95);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  z-index: 1000; animation: fadeIn 0.3s ease;
}
.checkin-success .checkmark { font-size: 120px; animation: scaleIn 0.4s ease; }
.checkin-success .welcome { font-size: 32px; font-weight: 700; margin-top: 16px; }
.checkin-success .class-info { font-size: 20px; opacity: 0.9; margin-top: 8px; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ========================================
   Landing Page
   ======================================== */

.landing {
  min-height: 100vh;
  min-height: 100dvh;
}

.landing-hero {
  background: linear-gradient(135deg, rgba(236,50,55,0.15), rgba(236,50,55,0.08));
  border-bottom: 1px solid var(--border);
  padding: 48px 20px 40px;
  text-align: center;
}

.landing-hero-inner {
  max-width: 600px;
  margin: 0 auto;
}

.landing-logo {
  width: 72px;
  height: 72px;
  object-fit: contain;
  border-radius: 16px;
  margin-bottom: 16px;
}

.landing-title {
  font-size: 42px;
  font-weight: 800;
  margin-bottom: 8px;
}

.landing-title span { color: var(--accent); }

.landing-subtitle {
  font-size: 16px;
  color: var(--text-dim);
  max-width: 400px;
  margin: 0 auto;
}

.landing-section {
  padding: 40px 20px;
}

.landing-section-alt {
  background: var(--bg-card);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.landing-container {
  max-width: 900px;
  margin: 0 auto;
}

.section-heading {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 4px;
}

/* .section-desc replaced by .section-info tooltip in dashboard */

/* Gym Cards */
.gym-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
  gap: 20px;
}

.gym-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: all var(--transition);
}

.gym-card:hover {
  border-color: rgba(236,50,55,0.4);
  box-shadow: 0 8px 32px rgba(0,0,0,0.25);
  transform: translateY(-2px);
}

.gym-card-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px;
  border-bottom: 1px solid var(--border);
  border-left: 3px solid;
}

.gym-card-avatar {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 800;
  color: white;
  flex-shrink: 0;
}

.gym-card-name {
  font-size: 18px;
  font-weight: 700;
}

.gym-card-meta {
  font-size: 13px;
  color: var(--text-dim);
  margin-top: 2px;
}

.gym-card-links {
  display: flex;
  flex-direction: column;
}

.gym-link {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 20px;
  color: var(--text);
  text-decoration: none;
  transition: all var(--transition);
  border-bottom: 1px solid var(--border);
}

.gym-link:last-child { border-bottom: none; }

.gym-link:hover {
  background: var(--bg-card-hover);
  text-decoration: none;
  padding-left: 24px;
}

.gym-link-icon {
  font-size: 20px;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.gym-link-admin .gym-link-icon { background: var(--blue-bg); }
.gym-link-kiosk .gym-link-icon { background: var(--green-bg); }
.gym-link-app .gym-link-icon { background: rgba(236,50,55,0.12); }

.gym-link-label {
  font-weight: 600;
  font-size: 14px;
}

.gym-link-desc {
  font-size: 12px;
  color: var(--text-dim);
}

.gym-link-arrow {
  margin-left: auto;
  color: var(--text-dim);
  font-size: 20px;
  font-weight: 300;
  flex-shrink: 0;
  transition: transform var(--transition);
}

.gym-link:hover .gym-link-arrow {
  transform: translateX(3px);
  color: var(--accent);
}

/* Features Grid */
.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.feature-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  text-align: center;
  transition: all var(--transition);
}

.feature-card:hover {
  border-color: rgba(236,50,55,0.3);
  transform: translateY(-2px);
}

.feature-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin: 0 auto 14px;
}

.feature-title {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 6px;
}

.feature-desc {
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.5;
}

.landing-footer {
  text-align: center;
  padding: 24px 20px;
  font-size: 12px;
  color: var(--text-dim);
}

/* Landing responsive */
@media (max-width: 600px) {
  .landing-title { font-size: 32px; }
  .gym-cards { grid-template-columns: 1fr; }
  .features-grid { grid-template-columns: 1fr; }
}

/* ========================================
   Calendar
   ======================================== */

.cal-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  padding: 8px 0;
}

.cal-nav-btn {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  font-size: 22px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all var(--transition);
  font-family: inherit;
}

.cal-nav-btn:hover {
  background: var(--bg-card-hover);
  border-color: var(--accent);
  color: var(--accent);
}

.cal-nav-title {
  display: flex;
  align-items: center;
  gap: 12px;
}

.cal-nav-month {
  font-size: 20px;
  font-weight: 700;
}

.cal-nav-today {
  padding: 4px 12px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--accent);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition);
  font-family: inherit;
}

.cal-nav-today:hover {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 12px;
}

.cal-hdr {
  background: var(--bg-card);
  padding: 10px 8px;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.cal-cell {
  background: var(--bg-card);
  min-height: 100px;
  padding: 6px;
  cursor: pointer;
  transition: background var(--transition);
  position: relative;
}

.cal-cell:hover {
  background: var(--bg-card-hover);
}

.cal-cell-empty {
  background: var(--bg);
  cursor: default;
}

.cal-cell-empty:hover {
  background: var(--bg);
}

.cal-cell-today {
  background: rgba(236, 50, 55, 0.06);
}

.cal-cell-today:hover {
  background: rgba(236, 50, 55, 0.1);
}

.cal-num {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dim);
  margin-bottom: 4px;
}

.cal-num-today {
  color: white;
  background: var(--accent);
  width: 24px; height: 24px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}

.cal-events {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cal-ev {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 5px;
  border-radius: 4px;
  font-size: 11px;
  overflow: hidden;
  white-space: nowrap;
  cursor: pointer;
  transition: filter var(--transition);
}

.cal-ev:hover {
  filter: brightness(1.2);
}

.cal-ev-paid {
  background: var(--green-bg);
  color: var(--green);
}

.cal-ev-overdue {
  background: var(--red-bg);
  color: var(--red);
}

.cal-ev-due {
  background: var(--orange-bg);
  color: var(--orange);
}

.cal-ev-upcoming {
  background: var(--blue-bg);
  color: var(--blue);
}

.cal-ev-frozen {
  background: rgba(107,114,128,0.12);
  color: #9ca3af;
}

.cal-ev-initials {
  font-weight: 700;
  font-size: 10px;
  flex-shrink: 0;
}

.cal-ev-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
}

.cal-ev-amt {
  flex-shrink: 0;
  font-weight: 700;
  font-size: 10px;
}

.cal-more {
  font-size: 10px;
  color: var(--text-dim);
  padding: 1px 5px;
  font-weight: 600;
  cursor: pointer;
}

.cal-more:hover {
  color: var(--accent);
}

.cal-legend {
  display: flex;
  gap: 20px;
  justify-content: center;
  padding: 8px 0;
  font-size: 12px;
  color: var(--text-dim);
}

.cal-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.cal-legend-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Day Modal */
.day-modal-filters {
  display: flex;
  gap: 6px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--border);
}

.day-modal-event {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}

.day-modal-event:last-child {
  border-bottom: none;
}

.day-modal-ev-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.btn-mark-paid {
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 11px;
  cursor: pointer;
  color: var(--green);
  font-weight: 600;
  white-space: nowrap;
  transition: background 0.15s;
}
.btn-mark-paid:hover { background: var(--green-bg); }
.btn-mark-paid:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Home logo image */
.home-logo-img {
  width: 80px;
  height: 80px;
  object-fit: contain;
  margin-bottom: 16px;
  border-radius: 16px;
}

/* ========================================
   Payment
   ======================================== */

.payment-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 0; border-bottom: 1px solid var(--border);
}
.payment-item:last-child { border-bottom: none; }
.payment-date { font-size: 12px; color: var(--text-dim); margin-top: 2px; }
.payment-amount { font-weight: 700; font-size: 16px; }

.balance-card {
  text-align: center;
  padding: 28px;
}

.balance-amount {
  font-size: 40px;
  font-weight: 800;
  margin: 8px 0;
}

.app-alert-card {
  margin-bottom: 12px;
}

/* ========================================
   Profile
   ======================================== */

.profile-header {
  text-align: center; padding: 24px 0;
}
.profile-avatar {
  width: 80px; height: 80px; border-radius: 50%; margin: 0 auto 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 32px; font-weight: 700; background: var(--accent);
  color: white;
}
.profile-name { font-size: 22px; font-weight: 700; }
.profile-belt { font-size: 14px; color: var(--text-dim); margin-top: 4px; }

.qr-code {
  width: 180px; height: 180px; margin: 16px auto;
  background: white; border-radius: 12px; padding: 12px;
  display: flex; align-items: center; justify-content: center;
}
.qr-placeholder {
  width: 100%; height: 100%;
  background: repeating-conic-gradient(var(--bg) 0% 25%, white 0% 50%) 50% / 12px 12px;
  border-radius: 4px;
}

.profile-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 16px 0; }

.info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.info-row:last-child { border-bottom: none; }
.info-label { font-size: 13px; color: var(--text-dim); }
.info-value { font-weight: 600; font-size: 14px; }

.toggle-switch input:checked + .toggle-slider { background: var(--accent); }

/* ========================================
   Quick Actions Grid (App)
   ======================================== */

.quick-actions-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 8px;
}

.quick-action-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 16px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-dim);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition);
  text-decoration: none;
  font-family: inherit;
}

.quick-action-btn:hover {
  background: var(--bg-card-hover);
  color: var(--text);
  text-decoration: none;
}

.quick-action-icon {
  font-size: 24px;
}

/* ========================================
   Empty State
   ======================================== */

.empty-state {
  text-align: center;
  padding: 24px 16px;
  color: var(--text-dim);
}

.empty-icon {
  font-size: 40px;
  margin-bottom: 8px;
}

.empty-state p {
  font-size: 14px;
}

/* ========================================
   Settings Page
   ======================================== */

.settings-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.rate-tiers-list {
  display: flex;
  flex-direction: column;
}

.rate-tier-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}

.rate-tier-item:last-child { border-bottom: none; }

.stripe-status {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--bg);
  border-radius: var(--radius-sm);
}

.stripe-status-icon {
  width: 44px; height: 44px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}

/* ========================================
   Campaign Automation
   ======================================== */

.automation-timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-left: 12px;
  border-left: 2px solid var(--border);
}

.automation-step {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 0;
  position: relative;
}

.automation-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 4px;
  margin-left: -18px;
}

.automation-step-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 13px;
}

/* ========================================
   Toast (shared.js)
   ======================================== */

.toast-container {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}
.toast {
  padding: 12px 20px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  box-shadow: var(--shadow);
  animation: toastIn .3s ease;
  max-width: 360px;
  pointer-events: auto;
}
.toast-exit {
  animation: toastOut .3s ease forwards;
}
.toast-success { background: #059669; }
.toast-error { background: #dc2626; }
.toast-info { background: #c4272b; }
.toast-warning { background: #d97706; }

@keyframes toastIn {
  from { opacity: 0; transform: translateX(100%); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes toastOut {
  from { opacity: 1; }
  to { opacity: 0; transform: translateY(-20px); }
}

/* ========================================
   Lead Notification Toasts (shared.js polling)
   ======================================== */

.toast-lead-notif {
  background: var(--bg-card, #1c1c27);
  border: 1px solid var(--border, #333);
  border-left: 3px solid #06b6d4;
  border-radius: 10px;
  padding: 12px 14px;
  min-width: 240px;
  max-width: 320px;
  pointer-events: auto;
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
  animation: toastIn .3s ease;
  color: var(--text, #e8e8f0);
}

.toast-lead-header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #06b6d4;
  margin-bottom: 5px;
}

.toast-lead-icon {
  font-size: 13px;
}

.toast-lead-label {
  font-size: 10px;
}

.toast-lead-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text, #e8e8f0);
  margin-bottom: 10px;
  line-height: 1.3;
}

.toast-lead-actions {
  display: flex;
  gap: 8px;
}

.toast-lead-view-btn {
  flex: 1;
  padding: 5px 12px;
  background: #06b6d4;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s;
}

.toast-lead-view-btn:hover {
  background: #0891b2;
}

.toast-lead-dismiss-btn {
  padding: 5px 10px;
  background: transparent;
  color: var(--text-dim, #888);
  border: 1px solid var(--border, #333);
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s, color 0.15s;
}

.toast-lead-dismiss-btn:hover {
  background: var(--bg, #13131e);
  color: var(--text, #e8e8f0);
}

/* ========================================
   Sidebar Badge Animations (lead notifications)
   ======================================== */

@media (prefers-reduced-motion: no-preference) {
  @keyframes sidebarBadgePulse {
    0%   { transform: scale(1); box-shadow: 0 0 0 0 rgba(245,158,11,0.7); }
    40%  { transform: scale(1.3); box-shadow: 0 0 0 6px rgba(245,158,11,0); }
    70%  { transform: scale(1.15); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(245,158,11,0); }
  }

  @keyframes sidebarBadgePopIn {
    0%   { transform: scale(0); opacity: 0; }
    60%  { transform: scale(1.25); opacity: 1; }
    80%  { transform: scale(0.9); }
    100% { transform: scale(1); }
  }

  .sidebar-badge-pulse {
    animation: sidebarBadgePulse 0.7s ease;
  }

  .sidebar-badge-popin {
    animation: sidebarBadgePopIn 0.4s ease;
  }
}

/* Reduced motion: just a brief color flash instead */
@media (prefers-reduced-motion: reduce) {
  .sidebar-badge-pulse,
  .sidebar-badge-popin {
    outline: 2px solid #f59e0b;
    outline-offset: 2px;
  }
}

/* ========================================
   Help Overlay (shared.js)
   ======================================== */

.help-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9000;
}
.help-overlay.open { display: flex; }
.help-overlay-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.5);
  backdrop-filter: blur(2px);
}
.help-panel {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 520px;
  max-width: 100vw;
  background: var(--bg-card);
  box-shadow: -4px 0 24px rgba(0,0,0,.15);
  display: flex;
  flex-direction: column;
  animation: helpSlideIn .2s ease-out;
  z-index: 1;
}
@keyframes helpSlideIn { from { transform: translateX(100%); } to { transform: translateX(0); } }
.help-panel-header {
  background: linear-gradient(135deg, var(--accent-dim), var(--accent));
  color: #fff;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}
.help-panel-header h3 { font-size: 16px; font-weight: 700; margin: 0; }
.help-panel-close {
  background: rgba(255,255,255,.15);
  border: none;
  color: #fff;
  width: 30px; height: 30px;
  border-radius: 50%;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.help-panel-close:hover { background: rgba(255,255,255,.25); }
.help-inspect-toggle {
  background: rgba(255,255,255,.15);
  border: none;
  color: #fff;
  padding: 4px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.help-inspect-toggle.active { background: rgba(255,255,255,.4); }
.help-panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}
.help-section { margin-bottom: 20px; }
.help-section h4 {
  font-size: 14px;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 6px;
}
.help-section p {
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-dim);
  margin-bottom: 6px;
}
.help-section ul {
  list-style: disc;
  padding-left: 18px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-dim);
}

/* Help Inspect Mode */
.help-inspect-cursor,
.help-inspect-cursor * { cursor: help !important; }
.help-highlight {
  outline: 2px dashed var(--accent) !important;
  outline-offset: 2px;
  position: relative;
}

/* Help Inspect Overlay Card */
.help-inspect-overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: hioFadeIn .15s ease-out;
}
@keyframes hioFadeIn { from { opacity: 0; } to { opacity: 1; } }
.hio-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.5);
  backdrop-filter: blur(2px);
}
.hio-card {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--accent);
  border-radius: 14px;
  padding: 28px 32px;
  max-width: 440px;
  width: 90%;
  box-shadow: var(--shadow);
  z-index: 1;
  animation: hioSlideUp .2s ease-out;
}
@keyframes hioSlideUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
.hio-close {
  position: absolute;
  top: 12px; right: 12px;
  background: var(--bg-card-hover);
  border: 1px solid var(--border);
  width: 28px; height: 28px;
  border-radius: 50%;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-dim);
  transition: .2s;
}
.hio-close:hover { background: var(--red-bg); color: var(--red); border-color: var(--red); }
.hio-title {
  font-weight: 700;
  color: var(--accent);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .3px;
  margin-bottom: 8px;
}
.hio-text {
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-dim);
  margin-bottom: 16px;
}
.hio-link {
  display: inline-block;
  color: var(--accent);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}
.hio-link:hover { text-decoration: underline; }

@media (max-width: 600px) {
  .help-panel { width: 100vw; }
}

/* ========================================
   Print (shared)
   ======================================== */

@media print {
  .admin-sidebar, .toast-container, .help-overlay,
  .help-inspect-overlay, .btn, button { display: none !important; }
  body { background: #fff !important; color: #000 !important; font-size: 12px; }
}

/* ========================================
   Responsive
   ======================================== */

/* Mobile top bar — logo left, search + time + hamburger right.
   env(safe-area-inset-top) handles iPhone notch so the topbar visually
   sits BELOW the notch instead of having its content clipped by it.
   Total fixed height becomes 52 + safe-area-inset-top. The .admin-main
   padding-top below must match. */
.mobile-topbar {
  display: none;
  position: fixed; top: 0; left: 0; right: 0; z-index: 1098;
  height: calc(52px + env(safe-area-inset-top, 0px));
  padding: env(safe-area-inset-top, 0px) 10px 0;
  background: var(--bg-card); border-bottom: 1px solid var(--border);
  align-items: center; gap: 8px;
}
.mobile-topbar-brand {
  display: flex; align-items: center; gap: 6px;
  flex-shrink: 0;
}
.mobile-topbar-brand img {
  width: 28px; height: 28px; border-radius: 50%; object-fit: contain;
  background: transparent; flex-shrink: 0;
}
.mobile-topbar-brand span {
  display: none; /* hide gym name on mobile to save space */
}
.mobile-topbar-search {
  flex: 1; min-width: 0; position: relative;
}
/* Page-title slot used in place of search on student/instructor pages
   (which have no admin global search to drive). Centers the current
   page name (Schedule / Payments / Shop / Profile / Home …) between
   the logo and the clock. */
.mobile-topbar-title {
  flex: 1; min-width: 0;
  font-size: 16px; font-weight: 700; color: var(--text);
  text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  letter-spacing: 0.2px;
}
.mobile-topbar-search .gs-input {
  width: 100%; padding: 7px 10px 7px 28px; font-size: 13px;
  background: var(--bg); border: 1px solid var(--border); border-radius: 8px;
  color: var(--text); font-family: inherit; outline: none;
}
.mobile-topbar-search .gs-input:focus { border-color: var(--accent); }
.mobile-topbar-search .gs-icon { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); font-size: 12px; color: var(--text-dim); pointer-events: none; }
.mobile-topbar-time {
  font-size: 12px; font-weight: 700; color: var(--text); white-space: nowrap;
  font-variant-numeric: tabular-nums; flex-shrink: 0;
}
.hamburger-btn {
  display: none;
  width: 36px; height: 36px; border-radius: 8px;
  border: 1px solid var(--border); background: transparent;
  color: var(--text); cursor: pointer;
  align-items: center; justify-content: center;
  font-size: 20px; line-height: 1; padding: 0;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}
.sidebar-backdrop {
  display: none; position: fixed; inset: 0; z-index: 1099;
  background: rgba(0,0,0,0.5); backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.sidebar-backdrop.open { display: block; }

@media (max-width: 900px) {
  .mobile-topbar { display: flex; }
  .gs-topbar { display: none !important; }
  /* Match topbar's full height (52px + notch). On non-notched devices
     env(safe-area-inset-top) is 0 so this is identical to 52px. */
  .admin-main { padding-top: calc(52px + env(safe-area-inset-top, 0px)) !important; }
  .dash-main  { padding-top: calc(52px + env(safe-area-inset-top, 0px)) !important; }
  /* Student-app pages (.page / .page-wide) also need the offset so headers
     and first cards don't sit under the fixed mobile topbar. Keep the
     existing 16px visual gutter on top of the topbar height. */
  .page,
  .page-wide {
    padding-top: calc(52px + env(safe-area-inset-top, 0px) + 16px);
  }
  .admin-sidebar {
    position: fixed; top: 0; left: 0; z-index: 1100;
    width: 260px; height: 100vh; height: 100dvh;
    transform: translateX(-100%);
    transition: transform 0.2s ease;
    border-right: 1px solid var(--border);
    box-shadow: 4px 0 24px rgba(0,0,0,0.3);
  }
  .admin-sidebar.open { transform: translateX(0); }
  /* Edge-to-edge: no horizontal padding on mobile so page-hdr/filters/table flush to screen.
     Page-template sections handle their own internal padding. Padding-top
     matches the safe-area-aware topbar height. */
  .admin-main { padding: 0; padding-top: calc(52px + env(safe-area-inset-top, 0px)); }
  .admin-stats-grid { grid-template-columns: repeat(2, 1fr); }
  .admin-grid-2col { grid-template-columns: 1fr; }
  .settings-grid { grid-template-columns: 1fr; }
  .revenue-banner { flex-direction: column; gap: 16px; text-align: center; }
  .revenue-details { justify-content: center; }
}

@media (max-width: 600px) {
  /* Auto-fit so 3 OR 4 stat-cards (home Quick Stats has 4: Classes / This
     month / Belt / Streak) fit on a single row instead of wrapping the
     last card to a half-width second line. */
  .stats-row { grid-template-columns: repeat(auto-fit, minmax(70px, 1fr)); gap: 6px; }
  .stat-card { padding: 8px 4px; min-width: 0; }
  .stat-value { font-size: 18px; }
  .stat-label { font-size: 9px; letter-spacing: 0.3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .kiosk-sidebar { display: none; }
  .data-table { font-size: 12px; }
  .data-table th, .data-table td { padding: 8px 10px; }
  .filter-bar { flex-direction: column; align-items: stretch; }
  .admin-stats-grid { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 768px) {
  .page { max-width: 560px; }
  .admin-layout .page { max-width: none; flex: 1; }
}

/* ========================================
   Student App - Desktop Sidebar Navigation
   ======================================== */

/* Sidebar nav (desktop only, hidden on mobile) */
.app-sidebar {
  display: none;
}

@media (min-width: 769px) {
  /* On desktop, show sidebar and hide bottom nav */
  .bottom-nav {
    display: none !important;
  }

  .app-sidebar {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 220px;
    background: var(--bg-card);
    border-right: 1px solid var(--border);
    z-index: 200;
  }

  .app-sidebar-brand {
    padding: 20px 20px 16px;
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .app-sidebar-nav {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 12px 10px;
    gap: 2px;
  }

  .app-sidebar-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 8px;
    color: var(--text-dim);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: background var(--transition), color var(--transition);
    min-height: 44px;
  }

  .app-sidebar-link:hover {
    background: var(--bg);
    color: var(--text);
    text-decoration: none;
  }

  .app-sidebar-link.active {
    background: var(--accent-bg, rgba(236,50,55,0.15));
    color: var(--accent);
    font-weight: 600;
  }

  .app-sidebar-link .nav-icon {
    font-size: 18px;
    flex-shrink: 0;
    width: 22px;
    text-align: center;
  }

  /* Shift page content right to make room for sidebar, remove bottom-nav padding */
  .app-sidebar ~ .page {
    margin-left: 220px;
    max-width: none;
    width: calc(100% - 220px);
    padding-bottom: 16px;
  }

  /* Student pages using admin-sidebar + admin-layout class on body */
  .admin-layout .admin-sidebar ~ .page {
    flex: 1;
    max-width: none;
    width: auto;
    padding-bottom: 16px;
    margin-left: 0;
    overflow-y: auto;
    padding: 16px 24px;
  }
}

/* Tablet: icons-only sidebar */
@media (min-width: 769px) and (max-width: 1024px) {
  .app-sidebar {
    width: 64px;
  }

  .app-sidebar-brand {
    padding: 18px 0;
    text-align: center;
    font-size: 20px;
  }

  .app-sidebar-brand-text {
    display: none;
  }

  .app-sidebar-link {
    justify-content: center;
    padding: 12px 0;
  }

  .app-sidebar-link .nav-label {
    display: none;
  }

  .app-sidebar-link .nav-icon {
    font-size: 20px;
    width: auto;
  }

  .app-sidebar ~ .page {
    margin-left: 64px;
    width: calc(100% - 64px);
    max-width: none;
    padding-bottom: 16px;
  }
}

/* ========================================
   Student App - Desktop Multi-Column Layouts
   ======================================== */

@media (min-width: 1025px) {
  /* Full desktop: wider content area */
  .app-sidebar ~ .page {
    max-width: 1100px;
    width: calc(100% - 220px);
    padding: 24px 32px;
    padding-bottom: 24px;
    box-sizing: border-box;
  }

  /* Home page: 2-column grid for cards */
  .app-home-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
  /* Alert card (payment status) spans full width */
  .app-alert-card {
    grid-column: 1 / -1;
  }
  /* Stats row: 4 columns on desktop */
  .stats-row {
    grid-template-columns: repeat(4, 1fr);
  }
  /* Quick actions: 3 columns (matches 3 action buttons) */
  .quick-actions-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Schedule page: weekly grid layout */
  #scheduleWeekGrid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8px;
    align-items: start;
  }
  /* On desktop show ALL days always */
  #scheduleWeekGrid .schedule-day {
    display: block !important;
    margin-bottom: 0;
  }
  /* Compact class cards inside week grid */
  #scheduleWeekGrid .app-class-card {
    flex-direction: column;
    gap: 8px;
    padding: 10px;
  }
  #scheduleWeekGrid .app-class-card .btn {
    width: 100%;
    text-align: center;
    min-height: 32px;
    padding: 6px 8px;
  }
  /* Hide day tabs bar on desktop - week grid shows all days */
  #dayTabsBar {
    display: none;
  }

  /* Payments page: plan cards in a row */
  .plan-cards-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }
  .plan-cards-row .plan-option-card {
    margin-bottom: 0;
  }
  /* Payment history as table */
  .payment-history-table-wrap {
    display: block;
  }
  .payment-history-cards-wrap {
    display: none;
  }

  /* Profile page: 2-column layout */
  .profile-desktop-grid {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 24px;
    align-items: start;
  }
  .profile-left-col {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .profile-right-col {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  /* Commitment page: side by side */
  .commitment-desktop-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: start;
  }

  /* General desktop polish */
  .page .header {
    margin-bottom: 20px;
  }
  .card {
    border-radius: 14px;
  }
}

/* Payment history table styles (desktop) */
.payment-history-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.payment-history-table thead th {
  text-align: left;
  padding: 10px 12px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-dim);
  border-bottom: 2px solid var(--border);
}
.payment-history-table tbody td {
  padding: 11px 12px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.payment-history-table tbody tr:last-child td {
  border-bottom: none;
}
.payment-history-table tbody tr:hover td {
  background: var(--bg);
}
.payment-history-table-wrap {
  display: none;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius, 12px);
  overflow: hidden;
  margin-bottom: 16px;
}
.payment-history-cards-wrap {
  display: block;
}

/* ========================================
   Responsive Polish - PWA Enhancements
   ======================================== */

/* Admin dashboard tablet 2-column grid */
@media (min-width: 768px) and (max-width: 1024px) {
  .admin-grid,
  .dashboard-grid {
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }
  .dashboard-full-width {
    grid-column: 1 / -1;
  }
}

/* Touch targets: native form controls keep their natural size on desktop.
   The CONTAINING label/button gets the 44px target on touch devices via the
   media query below. This fixes the bug where every <button>, <select> and
   radio button rendered as a 44×44 block — making small icon buttons and
   inline radios look enormous regardless of their inline width/height styles.

   Form controls always normalised: */
input[type="checkbox"],
input[type="radio"] {
  width: 16px; height: 16px;
  min-width: 16px; min-height: 16px;
  max-width: 16px; max-height: 16px;
  accent-color: var(--accent);
}

/* Touch-target minimum on mobile only — and only on full-size buttons +
   nav. Use .btn-sm / .btn-sm-qa / icon-buttons opt-out by sizing themselves.
   Note: pointer-coarse covers actual touch screens; desktop is unaffected. */
@media (pointer: coarse) {
  button:not(.btn-sm):not(.btn-sm-qa):not(.btn-icon):not(.modal-close),
  a.btn:not(.btn-sm),
  .nav-link,
  select {
    min-height: 44px;
  }
}

/* Toggle switches keep their own dimensions (44x24 pill shape) */
.toggle-switch {
  min-height: 24px;
  min-width: 44px;
}

@media (max-width: 768px) {
  .action-btn,
  .nav-item a,
  .tab-btn {
    padding: 12px 16px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}

/* Landscape mode for kiosk */
@media (orientation: landscape) and (max-height: 600px) {
  .kiosk-container {
    flex-direction: row;
    height: 100vh;
  }
  .kiosk-search {
    width: 50%;
  }
  .kiosk-activity {
    width: 50%;
  }
}

/* Containers fill available width */
.main-container,
.admin-container,
.app-container {
  width: 100%;
}

@media (min-width: 1600px) {
  .admin-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Shop grid responsive */
.shop-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .shop-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .shop-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Mobile navigation - fixed bottom nav */
@media (max-width: 640px) {
  .app-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--bg-card);
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: space-around;
    padding: 8px 0;
    z-index: 100;
  }

  .app-nav a {
    flex-direction: column;
    font-size: 0.75rem;
    text-align: center;
    padding: 4px 8px;
  }

  .app-content {
    padding-bottom: 70px;
  }
}

/* Signature pad responsive */
.signature-canvas {
  width: 100%;
  max-width: 500px;
  height: 200px;
  border: 2px solid var(--border);
  border-radius: 8px;
  touch-action: none;
  cursor: crosshair;
}

/* Waiver page responsive */
.waiver-content {
  max-height: 60vh;
  overflow-y: auto;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 1.5rem;
  font-size: 0.875rem;
  line-height: 1.6;
}

@media (max-width: 640px) {
  .waiver-content {
    max-height: 40vh;
    font-size: 0.8125rem;
  }
}

/* ── Loading Spinner ── */
.spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
  vertical-align: middle;
}
.spinner-sm { width: 12px; height: 12px; border-width: 1.5px; }
.spinner-lg { width: 24px; height: 24px; border-width: 3px; }
@keyframes spin { to { transform: rotate(360deg); } }
.btn-loading { opacity: 0.7; pointer-events: none; }

/* ========================================
   Mobile Responsiveness
   ======================================== */

/* Mobile topbar logo - ensure image renders */
.mobile-topbar-brand img {
  display: block;
}

/* Full-screen modals on small phones (bottom-sheet pattern).
   Extends the canonical .modal-bg + .modal-box pair to also cover off-pattern
   modals that the audit flagged: campaigns WYSIWYG (.wysiwyg-modal-bg/box),
   day modal on dashboard (.day-modal-bg/box), and the various refund/promote
   modals that use inline-style overrides. Visual-only, no JS needed. */
@media (max-width: 480px) {
  .modal-bg,
  .wysiwyg-modal-bg,
  .day-modal-bg,
  .refund-modal-bg,
  .promote-modal-bg {
    align-items: flex-end;
  }
  .modal-box,
  .wysiwyg-modal-box,
  .day-modal-box,
  .refund-modal-box,
  .promote-modal-box {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 92vh;
    height: auto !important;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-radius: var(--radius) var(--radius) 0 0;
    /* Body scroll inside the sheet so bottom action buttons stay reachable
       on iPhone SE — addresses P0 #11/#12 in ADMIN-UXUX-REVIEW.md
       (transactions refund modal Cancel/Save unreachable on short phones). */
    overflow-y: auto;
  }
  .modal-wide {
    width: 100vw;
    max-width: 100vw;
  }
  /* Tables scroll horizontally on mobile */
  .table-wrapper {
    -webkit-overflow-scrolling: touch;
  }
  /* Readable font size on small screens */
  .data-table {
    font-size: 13px;
  }
  /* Prevent content overflow */
  .admin-main, .page {
    overflow-x: hidden;
  }
  /* Card stacking */
  .admin-stats-grid {
    grid-template-columns: 1fr;
  }
}

/* Ensure all data tables scroll horizontally on mobile */
@media (max-width: 768px) {
  .table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* Day tabs wrap instead of scroll on mobile */
  .day-tabs {
    flex-wrap: wrap;
    overflow-x: visible;
  }
  .day-tab {
    flex: 1 1 auto;
    min-width: 0;
    padding: 8px 6px;
    font-size: 12px;
    text-align: center;
    justify-content: center;
  }
}
.loading-area {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  gap: 8px;
  color: var(--text-dim);
  font-size: 13px;
}

/* ── Bug Reporter ── */
#bugReportFloatBtn {
  font-family: inherit;
}
#bugReportFloatBtn:hover {
  background: rgba(239, 68, 68, 0.95) !important;
  box-shadow: 0 4px 16px rgba(239, 68, 68, 0.4) !important;
  transform: translateY(-1px);
}
#bugReportModal textarea:focus,
#bugReportModal input:focus {
  outline: 2px solid transparent; outline-offset: 2px;
  border-color: var(--accent) !important;
}
/* ========================================
   WCAG 2.1 AA Accessibility
   ======================================== */

/* Keyboard focus - visible ring for all focusable elements */
:focus-visible {
  outline: 2px solid var(--accent, #ec3237) !important;
  outline-offset: 2px;
}

/* Remove outline on mouse focus only */
:focus:not(:focus-visible) {
  outline: none;
}

/* Skip to main content link (screen readers + keyboard users) */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--accent, #ec3237);
  color: #fff;
  padding: 8px 16px;
  z-index: 10000;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  border-radius: 0 0 4px 0;
  transition: top 0.2s;
}
.skip-link:focus {
  top: 0;
}

/* Reduced motion - disable animations for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* High contrast focus for PIN pad buttons (kiosk touch targets) */
.pin-btn:focus-visible {
  outline: 3px solid var(--accent, #ec3237) !important;
  outline-offset: 3px;
  z-index: 1;
}

/* Ensure interactive kiosk bubbles have minimum 48px touch target */
.k-bubble {
  min-width: 48px;
  min-height: 48px;
}

/* aria-live status region (visually hidden but readable by screen readers) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ========================================
   Page Template System
   Standard layout for ALL admin pages.
   Sidebar + top search are in the partial.
   This covers the content area.
   ======================================== */

/* ---- Page Header ---- */
.page-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px 12px;
  flex-shrink: 0;
  gap: 12px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--border);
}
.page-hdr-left {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
}
.page-title {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.3px;
  white-space: nowrap;
}
.page-subtitle {
  font-size: 13px;
  color: var(--text-dim);
  white-space: nowrap;
}
.page-hdr-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* ---- Filter Bar ---- */
.page-filters {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 24px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  flex-wrap: wrap;
}
.page-search {
  flex: 1;
  min-width: 180px;
  max-width: 320px;
  padding: 8px 14px 8px 36px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 13px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s;
}
.page-search:focus { border-color: var(--accent); }
.page-search::placeholder { color: var(--text-dim); }
.page-filter-select {
  padding: 8px 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  outline: none;
}
.page-filter-select:focus { border-color: var(--accent); }

/* ---- Content Area ---- */
.page-content {
  flex: 1;
  padding: 20px 24px;
  min-height: 0;
}

/* ---- Stats Row ---- */
.page-stats {
  display: flex;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.page-stat {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 18px;
  flex: 1;
  min-width: 120px;
}
.page-stat-value {
  font-size: 28px;
  font-weight: 800;
  display: block;
  line-height: 1.1;
}
.page-stat-label {
  font-size: 11px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 4px;
}
.page-stat-delta {
  font-size: 12px;
  font-weight: 600;
  margin-top: 2px;
}
.page-stat-delta.up { color: var(--green); }
.page-stat-delta.down { color: var(--red); }

/* ---- Data Table ---- */
.page-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.page-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.page-table thead th {
  text-align: left;
  padding: 10px 14px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-dim);
  border-bottom: 2px solid var(--border);
  white-space: nowrap;
  position: sticky;
  top: 0;
  background: var(--bg);
  z-index: 1;
}
.page-table tbody td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.page-table tbody tr:hover td {
  background: var(--bg-card-hover);
}
.page-table tbody tr.clickable {
  cursor: pointer;
}

/* ---- Card Grid ---- */
.page-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}
.page-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  transition: border-color 0.15s;
}
.page-card:hover { border-color: var(--accent); }
.page-card-title {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 4px;
}
.page-card-meta {
  font-size: 12px;
  color: var(--text-dim);
  margin-bottom: 10px;
}
.page-card-actions {
  display: flex;
  gap: 6px;
  margin-top: 10px;
}

/* ---- Tabs ---- */
.page-tabs {
  display: flex;
  border-bottom: 2px solid var(--border);
  padding: 0 24px;
  gap: 0;
  flex-wrap: wrap;
  flex-shrink: 0;
}
/* Mobile: single horizontal row, swipeable, no wrap. */
@media (max-width: 1024px) {
  .page-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    padding: 0 12px;
    scrollbar-width: none; /* Firefox */
  }
  .page-tabs::-webkit-scrollbar { display: none; } /* Chrome/Safari */
  .page-tab {
    flex-shrink: 0;
    scroll-snap-align: start;
  }
  /* Active tab auto-scrolls into view via JS (see settings.ejs) */
}
.page-tab {
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dim);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
  transition: color 0.15s, border-color 0.15s;
}
.page-tab:hover { color: var(--text); }
.page-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.page-tab-content { display: none; }
.page-tab-content.active { display: block; }

/* ---- Kanban Pipeline ---- */
.page-kanban {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 12px;
  -webkit-overflow-scrolling: touch;
}
.page-kanban-col {
  min-width: 240px;
  flex: 1;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  max-height: 70vh;
}
.page-kanban-col-hdr {
  padding: 12px 14px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}
.page-kanban-col-body {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
}
.page-kanban-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: border-color 0.15s;
}
.page-kanban-card:hover { border-color: var(--accent); }

/* ---- Status Badges (standard) ---- */
.badge { display: inline-block; padding: 3px 10px; border-radius: 6px; font-size: 11px; font-weight: 700; text-transform: capitalize; }
.badge-active { background: var(--green-bg); color: var(--green); }
.badge-pending { background: var(--orange-bg); color: var(--orange); }
.badge-overdue { background: var(--red-bg); color: var(--red); }
.badge-inactive { background: rgba(128,128,128,0.12); color: var(--text-dim); }
.badge-trial { background: rgba(236,50,55,0.12); color: var(--accent); }
.badge-success { background: var(--green-bg); color: var(--green); }
.badge-warning { background: var(--orange-bg); color: var(--orange); }
.badge-danger { background: var(--red-bg); color: var(--red); }

/* ---- Empty State ---- */
.page-empty {
  text-align: center;
  padding: 48px 24px;
  color: var(--text-dim);
}
.page-empty-icon { font-size: 48px; margin-bottom: 12px; opacity: 0.3; }
.page-empty-title { font-size: 18px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.page-empty-text { font-size: 14px; }

/* ---- Page Template Responsive ---- */
@media (max-width: 900px) {
  .page-hdr { padding: 12px 14px 10px; }
  .page-title { font-size: 16px; }
  .page-subtitle { font-size: 11px; }
  .page-filters { padding: 10px 14px; }
  .page-search { max-width: none; }
  .page-content { padding: 14px; }
  .page-stats { gap: 10px; }
  .page-stat { padding: 12px 14px; min-width: 100px; }
  .page-stat-value { font-size: 22px; }
  .page-cards { grid-template-columns: 1fr 1fr; gap: 10px; }
  .page-tabs { padding: 0 14px; }
  .page-tab { padding: 8px 14px; font-size: 12px; }
  .page-kanban { flex-direction: column; }
  .page-kanban-col { min-width: auto; max-height: 300px; }
}

@media (max-width: 768px) {
  /* Hide entire page-hdr on mobile (incl. larger phones up to 768px) — title is
     implicit from active nav tab, "+ New Student" is in the mobile topbar,
     count is visible via filter chips ("All (130)"). Same rule applies to
     /students, /transactions (invoices.ejs), /leads, etc. */
  .page-hdr { display: none !important; }
  /* Make admin-main fully white so the padding-top:52px area doesn't show
     the body's gray background as a visible band below the topbar. */
  main.admin-main { background: var(--bg-card); }
  /* Page filters / search become the first element under the topbar.
     Sticky offset is measured from the scroll container's padding-INSIDE
     edge, so top:0 (NOT 52px) is correct here — admin-main padding-top
     already pushes content down by the topbar height. Setting top:52px
     stacks the offsets and puts the filter row 52px BELOW where it
     should be (verified via getBoundingClientRect 2026-05-07). */
  .page-filters {
    position: sticky;
    top: 0;
    z-index: 99;
    background: var(--bg-card);
    flex-direction: column;
    align-items: stretch;
    padding: 0 14px 8px;
    gap: 6px;
    border-bottom: 1px solid var(--border);
    margin-top: 0;
  }
  .page-search { max-width: none; min-width: 0; margin-top: 0; }
  .page-stats { flex-direction: row; flex-wrap: wrap; }
  .page-stat { min-width: calc(50% - 6px); flex: 0 0 calc(50% - 6px); }
  .page-stat-value { font-size: 18px; }
  .page-stat-label { font-size: 11px; }
  .page-cards { grid-template-columns: 1fr; }
  .page-content { padding: 10px 12px; }
  .page-table { font-size: 12px; }
  .page-table thead th { padding: 8px 10px; font-size: 10px; }
  .page-table tbody td { padding: 8px 10px; }
}

/* ---- Admin topbar + bottom-nav safe padding ----
   The mobile topbar is position:fixed height 52-60px; the mobile bottom-nav
   is position:fixed height 56px. Admin pages must leave padding on both ends
   or content is hidden behind them. Kept here as a single source of truth
   so every admin page inherits it, not just dashboard/settings. */
@media (max-width: 900px) {
  .admin-main,
  main.admin-main,
  .dash-main,
  .admin-content {
    padding-top: 52px !important;
    padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  /* Page headers with their own position:sticky keep flush below topbar (no gap) */
  .page-hdr { top: 52px; }
  /* Page-template sections handle their own internal padding now that admin-main is edge-to-edge */
  .page-hdr, .page-filters, .page-content { padding-left: 14px; padding-right: 14px; }
  .table-wrapper.page-table-wrap, .page-table-wrap { padding-left: 0; padding-right: 0; }
  /* Filter chips: allow wrap so "Trial" never clips off screen */
  .page-filters .filter-chips { flex-wrap: wrap; overflow-x: visible; }
}

/* ---- Admin mobile overflow guard ----
   Many admin pages were authored for desktop and let content spill past the
   viewport on phones (cards wider than the screen, tables with min-widths,
   form rows that don't wrap). Constrain everything at the container level
   so the viewport never horizontally scrolls, and push wide children into
   their own scroll containers. */
@media (max-width: 768px) {
  html, body { overflow-x: hidden; max-width: 100vw; }
  .admin-main, main.admin-main { max-width: 100vw; overflow-x: hidden; }
  .admin-main .card,
  .admin-main .settings-grid,
  .admin-main .settings-panel,
  .admin-main .page-content,
  .admin-main .form-row {
    max-width: 100%;
    box-sizing: border-box;
  }
  .admin-main .settings-grid { grid-template-columns: 1fr !important; gap: 12px; }
  .admin-main .card { padding: 14px; }
  /* Settings cards: smaller titles, tighter header, no overflow */
  .admin-main .card-header { flex-wrap: wrap; gap: 8px; }
  .admin-main .card-title { font-size: 14px; }
  .admin-main .settings-panel .card > h2,
  .admin-main .settings-panel .card > h3 { font-size: 14px; }
  /* Toggle rows, policy rows, rate-tier rows stack vertically so nothing
     gets clipped on the right */
  .admin-main .toggle-wrap,
  .admin-main .rate-tier-item,
  .admin-main .feature-row { flex-wrap: wrap; gap: 8px; }
  .admin-main .feature-controls { width: 100%; justify-content: flex-end; }
  /* Staff/owner row action buttons wrap, no horizontal overflow */
  .admin-main .staff-row { flex-wrap: wrap; }
  .admin-main .staff-actions { width: 100%; flex-wrap: wrap; }
  .admin-main .staff-actions .btn-staff { flex: 1 1 auto; }
  .admin-main .form-row { flex-wrap: wrap; gap: 10px; }
  .admin-main .form-row .form-group { flex: 1 1 100%; min-width: 0; }
  /* Tables are the biggest overflow offender; give them a horizontal scroller. */
  .admin-main table,
  .admin-main .data-table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* Long inputs shouldn't force the card wider than the screen. */
  .admin-main .form-input,
  .admin-main input[type="text"],
  .admin-main input[type="email"],
  .admin-main input[type="url"],
  .admin-main input[type="number"],
  .admin-main textarea { max-width: 100%; box-sizing: border-box; }
  /* Page-tabs already have their own mobile rule; ensure they don't spill. */
  .page-tabs { max-width: 100vw; }
}

/* ---- Mobile Bottom Nav ---- */
.mobile-bottom-nav {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: 56px;
  background: var(--bg-card);
  border-top: 1px solid var(--border);
  z-index: 1000;
  justify-content: space-around;
  align-items: center;
  padding: 0 8px;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.mobile-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: var(--text-dim);
  font-size: 10px;
  font-weight: 600;
  gap: 2px;
  flex: 1;
  padding: 6px 0;
  position: relative;
  transition: color 0.15s;
}
.mobile-nav-item.active { color: var(--accent); }
button.mobile-nav-item { background: none; border: none; font-family: inherit; cursor: pointer; color: var(--text-dim); }
.mobile-nav-icon { font-size: 20px; line-height: 1; }
.mobile-nav-label { font-size: 10px; letter-spacing: 0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.mobile-nav-icon svg { width: 20px; height: 20px; display: block; }
/* More menu panel (slide-up from bottom nav) */
.more-menu-backdrop {
  display: none; position: fixed; inset: 0; z-index: 1199;
  background: rgba(0,0,0,0.4); backdrop-filter: blur(2px);
}
.more-menu-backdrop.open { display: block; }
.more-menu-panel {
  display: none; position: fixed; bottom: 56px; left: 0; right: 0; z-index: 1200;
  background: var(--bg-card); border-top: 1px solid var(--border);
  border-radius: 16px 16px 0 0; padding: 0 16px 16px;
  box-shadow: 0 -8px 32px rgba(0,0,0,0.3);
  max-height: 60vh; overflow-y: auto;
}
.more-menu-panel.open { display: block; }
.more-menu-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 0 10px; font-size: 13px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-dim);
}
.more-menu-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
}
.more-menu-item {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 14px 6px; min-height: 44px;
  background: var(--bg); border: 1px solid var(--border); border-radius: 10px;
  text-decoration: none; color: var(--text); font-size: 11px; font-weight: 600;
  text-align: center; transition: all 0.15s;
}
.more-menu-item:hover { border-color: var(--accent); background: var(--hover); }
.more-menu-item.active { border-color: var(--accent); color: var(--accent); background: var(--hover); }
.more-menu-icon { font-size: 20px; line-height: 1; }
@media (max-width: 480px) {
  .more-menu-grid { grid-template-columns: repeat(3, 1fr); }
}

.mobile-nav-badge {
  position: absolute;
  top: 2px; right: calc(50% - 18px);
  background: var(--accent);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}
@media (max-width: 900px) {
  .mobile-bottom-nav { display: flex; }
  .admin-sidebar { display: none !important; }
  .sidebar-backdrop { display: none !important; }
  .admin-main {
    margin-left: 0 !important;
    padding-bottom: 72px !important;
  }
  .dash-main {
    margin-left: 0 !important;
    padding-bottom: 72px !important;
  }
}

/* ---- Admin Tab Bar ---- */
.admin-tab-bar {
  display: flex;
  border-bottom: 2px solid var(--border);
  margin: 0 -32px 20px -32px;
  padding: 0 32px;
  background: var(--bg-card);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.admin-tab-bar::-webkit-scrollbar { display: none; }
.admin-tab {
  padding: 12px 20px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dim);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s;
}
.admin-tab:hover { color: var(--text); }
.admin-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
/* Sub-page pill nav (within a tab's landing page) */
.page-sub-nav {
  display: flex;
  gap: 0;
  margin-bottom: 16px;
  border-bottom: 2px solid var(--border);
}
.page-sub-link {
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dim);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: color 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.page-sub-link:hover { color: var(--text); }
.page-sub-link.active { color: var(--accent); border-bottom-color: var(--accent); }
@media (max-width: 900px) {
  .admin-tab-bar {
    margin: 0 -16px 16px -16px;
    padding: 0 16px;
  }
  .admin-tab { padding: 10px 14px; font-size: 12px; }
  .page-sub-nav { overflow-x: auto; width: 100%; }
}

/* ========================================
   GI Promo Card (student app)
   ======================================== */
.gi-promo-card {
  position: relative; margin-bottom: 20px; overflow: hidden;
  padding: 20px;
}
.gi-promo-badge {
  display: inline-block; padding: 3px 10px; border-radius: 4px;
  background: var(--accent-bg); color: var(--accent);
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.5px; margin-bottom: 14px;
}
.gi-promo-layout {
  display: flex; gap: 20px;
}
@media (max-width: 640px) {
  .gi-promo-layout { flex-direction: column; }
}
.gi-promo-images { flex: 0 0 220px; min-width: 0; }
@media (max-width: 640px) { .gi-promo-images { flex: none; } }
.gi-promo-img {
  width: 100%; max-height: 280px; object-fit: cover;
  border-radius: var(--radius-sm); background: var(--bg-input);
}
.gi-promo-img-placeholder {
  width: 100%; height: 200px; background: var(--bg-input); border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center; font-size: 48px;
}
.gi-promo-thumbs { display: flex; gap: 6px; margin-top: 8px; }
.gi-promo-thumb {
  width: 48px; height: 48px; object-fit: cover; border-radius: 6px;
  border: 2px solid transparent; cursor: pointer; opacity: 0.6;
  transition: opacity 0.15s, border-color 0.15s;
}
.gi-promo-thumb.active, .gi-promo-thumb:hover { opacity: 1; border-color: var(--accent); }
.gi-promo-info { flex: 1; min-width: 0; }
.gi-promo-name { font-size: 18px; font-weight: 700; margin-bottom: 4px; }
.gi-promo-desc { font-size: 13px; color: var(--text-dim); margin-bottom: 10px; line-height: 1.4; }
.gi-promo-price-row { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.gi-promo-price-original { font-size: 15px; color: var(--text-dim); text-decoration: line-through; }
.gi-promo-price-discounted { font-size: 24px; font-weight: 800; color: var(--accent); }
.gi-promo-discount-badge {
  background: var(--green-bg); color: var(--green);
  font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 4px;
}
.gi-promo-section { margin-bottom: 14px; }
.gi-promo-section-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.5px; color: var(--text-dim); margin-bottom: 8px;
}
.gi-promo-swatches { display: flex; gap: 8px; flex-wrap: wrap; }
.gi-swatch {
  width: 28px; height: 28px; border-radius: 50%;
  border: 2px solid transparent; cursor: pointer;
  transition: border-color 0.15s, transform 0.1s;
}
.gi-swatch.selected { border-color: var(--accent); transform: scale(1.15); }
.gi-swatch:hover { border-color: var(--text-dim); }
.gi-promo-sizes { display: flex; gap: 6px; flex-wrap: wrap; }
.gi-size-btn {
  padding: 8px 14px; border: 1.5px solid var(--border); border-radius: 8px;
  background: var(--bg-input); color: var(--text); font-size: 13px; font-weight: 600;
  cursor: pointer; font-family: inherit; transition: border-color 0.15s, background 0.15s;
}
.gi-size-btn:hover:not(:disabled) { border-color: var(--accent); background: var(--accent-bg); color: var(--accent); }
.gi-size-btn.selected { border-color: var(--accent); background: var(--accent-bg); color: var(--accent); }
.gi-size-btn.out-of-stock { opacity: 0.35; cursor: not-allowed; text-decoration: line-through; }
.gi-size-guide-link {
  background: none; border: none; color: var(--accent); font-size: 11px; font-weight: 600;
  cursor: pointer; font-family: inherit; text-decoration: underline; padding: 0;
}
.gi-promo-cta { margin-top: 16px; width: 100%; }
.gi-promo-note { font-size: 11px; color: var(--text-dim); margin-top: 8px; text-align: center; }

/* ========================================
   Nested modals (action confirmations that open from within another modal)
   ========================================
   When a modal is launched from inside the student-detail panel or any other
   full-screen modal (z-index 1200), it MUST sit above the parent. Previously
   .delete-confirm-bg was inline in students.ejs at z-index 1100, so clicking
   "Delete" on the dashboard showed an empty backdrop behind the detail panel.
   This layer applies site-wide and is reused for delete + any other action
   confirmations that render on top of the detail modal. */
.delete-confirm-bg,
.nested-modal-bg,
.edit-pass-modal-bg {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2100; /* above detail-overlay (1200) + inline modals (2000) */
}
.delete-confirm-box,
.nested-modal-box {
  background: var(--bg-card);
  border-radius: var(--radius);
  padding: 24px;
  width: 90%;
  max-width: 400px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
}
.delete-confirm-box h3 { margin: 0 0 12px; font-size: 16px; color: var(--red); }
.delete-confirm-box p { font-size: 13px; color: var(--text-dim); margin-bottom: 12px; }
.delete-confirm-input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--red);
  border-radius: 6px;
  font-size: 13px;
  background: var(--bg-card);
  color: var(--text);
  font-family: inherit;
  margin-bottom: 12px;
  box-sizing: border-box;
}

/* ========================================
   Topbar button compact sizing (force via !important)
   ========================================
   Inline styles on the buttons should already apply 24px height, but added
   here with !important as a safety net in case browser extensions, admin
   themes, or a service-worker-cached older HTML wins the cascade. */
#topbarAddStudent {
  height: 24px !important;
  padding: 0 8px !important;
  font-size: 11px !important;
  border-radius: 5px !important;
  line-height: 1 !important;
}
#topbarTaxToggle,
.topbar-tax-toggle {
  height: 24px !important;
  padding: 0 8px !important;
  font-size: 10px !important;
  border-radius: 5px !important;
  line-height: 1 !important;
}
#topbarTaxToggle #topbarTaxIcon { font-size: 12px !important; }

/* ========================================
   Page Header Action Buttons (topbar pattern)
   height:32px, font-size:12px — per 2026-04-20 learning
   ======================================== */
.btn-hdr-primary {
  height: 32px;
  padding: 0 12px;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}
/* Secondary action buttons group: visible on desktop, hidden at ≤600px */
.page-hdr-secondary {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}

/* Overflow icon: hidden on desktop, shown at ≤600px via media query above */
.btn-hdr-overflow {
  display: none;
  height: 32px;
  width: 32px;
  padding: 0;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  cursor: pointer;
}
/* Exempt header CTA buttons from the global 44px touch target rule */
.page-hdr-right .btn-hdr-primary,
.page-hdr-right .btn-hdr-overflow {
  min-height: 32px;
}

/* Mobile: collapse the secondary action group into the overflow bottom-sheet
   so the primary CTA (e.g. "+ New Student") stays visible on narrow screens.
   The CSS comments above promised this behavior but the @media rules were
   never written, so primary buttons wrapped off-screen on mobile PWA. */
@media (max-width: 600px) {
  .page-hdr-secondary { display: none !important; }
  .btn-hdr-overflow { display: inline-flex !important; }
  .page-hdr-right { gap: 6px; }
  .btn-hdr-primary { padding: 0 10px; }
}

/* ---- Page Header Overflow Bottom Sheet ---- */
.page-hdr-sheet-backdrop {
  display: none; position: fixed; inset: 0; z-index: 1299;
  background: rgba(0,0,0,0.45); backdrop-filter: blur(2px);
}
.page-hdr-sheet-backdrop.open { display: block; }
.page-hdr-sheet {
  display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 1300;
  background: var(--bg-card); border-top: 1px solid var(--border);
  border-radius: 16px 16px 0 0; padding: 0 16px 16px;
  box-shadow: 0 -8px 32px rgba(0,0,0,0.3);
}
.page-hdr-sheet.open { display: block; }
.page-hdr-sheet-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 0 10px; font-size: 13px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-dim);
}
.page-hdr-sheet-close {
  background: none; border: none; font-size: 20px; color: var(--text-dim);
  cursor: pointer; line-height: 1; padding: 4px;
  min-height: unset; min-width: unset;
}
.page-hdr-sheet-list { display: flex; flex-direction: column; gap: 6px; }
.page-hdr-sheet-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; background: var(--bg); border: 1px solid var(--border);
  border-radius: 10px; cursor: pointer; font-size: 14px; font-weight: 500;
  color: var(--text); transition: all 0.15s; text-align: left; width: 100%;
  min-height: 44px;
}
.page-hdr-sheet-item:hover { border-color: var(--accent); background: var(--hover); }

/* ---- Students Mobile List (.mg-row cards) ---- */
#studentsMobileList { display: none; }
@media (max-width: 768px) {
  /* Hide desktop table, show mobile card list (raised from 600px so larger phones
     don't see the clipped desktop table at 601-768px) */
  #studentsTable { display: none !important; }
  #studentsMobileList { display: block; }

  /* Each student row card */
  .mg-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    position: relative;
    -webkit-tap-highlight-color: transparent;
  }
  .mg-row:active { background: var(--hover); }

  /* Child indentation */
  .mg-row.mg-row-child { padding-left: 36px; opacity: 0.92; }
  .mg-row.mg-row-inactive { opacity: 0.55; }

  /* Tree connector lines for children */
  .mg-row-child .mg-tree-v {
    position: absolute; left: 22px; top: 0; bottom: 50%;
    width: 1px; background: var(--border);
  }
  .mg-row-child .mg-tree-h {
    position: absolute; left: 22px; top: 50%;
    width: 8px; height: 1px; background: var(--border);
  }

  /* Avatar circle */
  .mg-avatar {
    width: 32px; height: 32px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700; color: #fff;
    flex-shrink: 0; letter-spacing: 0.3px;
    overflow: hidden;
  }
  .mg-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
  .mg-avatar-sm { width: 26px; height: 26px; font-size: 9px; }

  /* Left content column (flex:1) */
  .mg-info { flex: 1; min-width: 0; }
  .mg-name-row {
    display: flex; align-items: center; gap: 5px;
    margin-bottom: 2px;
  }
  .mg-name {
    font-size: 13.5px; font-weight: 600; color: var(--text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    min-width: 0;
  }
  .mg-name-sm { font-size: 12.5px; }
  .mg-kids-badge {
    font-size: 9px; font-weight: 700; letter-spacing: 0.4px;
    text-transform: uppercase; padding: 1px 5px; border-radius: 999px;
    background: var(--green-bg, rgba(16,185,129,0.12)); color: var(--green);
    flex-shrink: 0; white-space: nowrap;
  }

  /* Subtitle row: belt bar + plan + MIA */
  .mg-sub {
    display: flex; align-items: center; gap: 5px;
    font-size: 11px; color: var(--text-dim); font-weight: 500;
    overflow: hidden;
  }
  .mg-sub-dot { color: var(--border); }
  .mg-plan { color: var(--text); font-weight: 600; font-size: 11px; }
  /* Tier chip (Adult/Teen/Apprentice/Junior) — sub-meta on the mobile card. */
  .mg-tier {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 6px;
    background: rgba(212,160,73,0.14);
    color: var(--accent, #d4a049);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    line-height: 1.5;
  }
  .mg-mia {
    font-size: 10px; font-weight: 700; letter-spacing: 0.3px;
    white-space: nowrap;
  }
  .mg-mia-mild    { color: #f59e0b; }
  .mg-mia-serious { color: var(--orange); }
  .mg-mia-critical { color: var(--red); }

  /* Mini belt bar (matches .belt-bar-mini look) */
  .mg-belt {
    display: inline-flex; align-items: center; gap: 2px;
    width: 48px; height: 12px; border-radius: 3px;
    padding: 0 3px; justify-content: flex-end; flex-shrink: 0;
  }
  .mg-belt-stripe {
    width: 3px; height: 7px; border-radius: 1px; opacity: 0.95;
  }

  /* Status column — DEPRECATED 2026-05-07. Status pill now renders inline
     on .mg-line-2 inside .mg-info. Hidden so the legacy markup (still
     referenced by some scripts) doesn't reserve 72px of width. */
  .mg-status-col { display: none !important; }
  .mg-money-col  { display: none !important; }

  /* Stacked 3-line compact card — replaces old [avatar | info | status | money]
     row with [avatar | stacked content] so nothing overflows at 320px. */
  .mg-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 auto; }

  .mg-line-1 {
    display: flex; align-items: baseline; gap: 6px; min-width: 0;
  }
  .mg-line-1 .mg-name {
    flex: 1 1 auto; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .mg-line-1 .mg-balance {
    flex: 0 0 auto;
    font-size: 12px; font-weight: 700;
    margin-left: auto; padding-left: 4px;
    white-space: nowrap;
  }
  .mg-bal-red  { color: var(--red, #ef4444); }
  .mg-bal-text { color: var(--text); }
  .mg-bal-dim  { color: var(--text-dim); font-weight: 600; }
  /* Pre-tax sub-line under the with-tax total. Same row, smaller dim
     text. Stacked via display:block so the parent .mg-line-1 row stays
     aligned. */
  .mg-balance {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.15;
  }
  .mg-balance-sub {
    font-size: 10px;
    font-weight: 500;
    color: var(--text-dim);
    margin-top: 1px;
    white-space: nowrap;
  }

  .mg-line-2 {
    display: flex; align-items: center; gap: 5px;
    flex-wrap: wrap; row-gap: 4px;
    min-width: 0;
  }

  .mg-line-3 {
    display: flex; align-items: center; gap: 6px;
    font-size: 11px; color: var(--text-dim);
    min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .mg-paid-line { color: var(--green, #10b981); font-weight: 600; }
  .mg-paid-red  { color: var(--red, #ef4444); }

  /* Status pill */
  .mg-pill {
    display: inline-flex; align-items: center;
    padding: 2px 7px; border-radius: 999px;
    font-size: 10px; font-weight: 700; letter-spacing: 0.3px;
    text-transform: uppercase; white-space: nowrap;
  }
  .mg-pill-active    { background: var(--green-bg, rgba(16,185,129,0.12));  color: var(--green); }
  .mg-pill-paused    { background: var(--orange-bg, rgba(249,115,22,0.12)); color: var(--orange); }
  .mg-pill-cancelled { background: var(--red-bg, rgba(239,68,68,0.12));     color: var(--red); }
  .mg-pill-overdue   { background: var(--red-bg, rgba(239,68,68,0.12));     color: var(--red); }
  .mg-pill-trial     { background: var(--blue-bg, rgba(59,130,246,0.12));   color: var(--blue); }
  .mg-pill-noplan    { background: var(--bg-raise, rgba(255,255,255,0.06)); color: var(--text-dim); }
  .mg-pill-parent    { background: var(--blue-bg, rgba(59,130,246,0.12));   color: var(--blue); }

  /* Payment method badges — Stripe recurring vs In-person.
     Locked 2026-05-10 after user asked for at-a-glance payment-method
     visibility ("who is on stripe and who isnt"). Smaller + slightly
     muted vs the main status pill so it reads as secondary metadata. */
  .mg-pm {
    display: inline-flex; align-items: center;
    padding: 1px 6px; border-radius: 999px;
    font-size: 9px; font-weight: 700; letter-spacing: 0.3px;
    text-transform: uppercase; white-space: nowrap;
    border: 1px solid transparent;
  }
  .mg-pm-stripe       { background: rgba(99,102,241,0.10);   color: #6366f1; border-color: rgba(99,102,241,0.30); }
  .mg-pm-stripe-one   { background: rgba(99,102,241,0.06);   color: #6366f1; border-color: rgba(99,102,241,0.20); opacity: 0.85; }
  .mg-pm-inperson     { background: var(--bg-raise, rgba(255,255,255,0.04)); color: var(--text-dim); border-color: var(--border, rgba(255,255,255,0.10)); }

  /* Subscription-link funnel badge — Sent · 3d / Opened · today / Completed.
     Same pill shape as .mg-pm but uses funnel-colored backgrounds matching
     the table view (yellow=sent, orange=opened, blue=completed). Hidden
     when student is on Stripe recurring or was never invited. */
  .mg-fn {
    display: inline-flex; align-items: center;
    padding: 1px 6px; border-radius: 999px;
    font-size: 9px; font-weight: 700; letter-spacing: 0.3px;
    text-transform: uppercase; white-space: nowrap;
    border: 1px solid transparent;
  }
  .mg-fn-sent      { background: rgba(234,179,8,0.10);  color: #ca8a04; border-color: rgba(234,179,8,0.30); }
  .mg-fn-opened    { background: rgba(249,115,22,0.10); color: #ea580c; border-color: rgba(249,115,22,0.30); }
  .mg-fn-completed { background: rgba(59,130,246,0.10); color: #2563eb; border-color: rgba(59,130,246,0.30); }

  /* Money column — fixed 76px, right-aligned, tabular nums */
  .mg-money-col {
    width: 76px; flex-shrink: 0;
    display: flex; justify-content: flex-end;
  }
  .mg-money-col > div { text-align: right; }
  .mg-money-amt {
    font-size: 15px; font-weight: 700; line-height: 1.1;
    color: var(--text);
    font-variant-numeric: tabular-nums;
  }
  .mg-money-lbl {
    font-size: 9.5px; font-weight: 700; letter-spacing: 0.4px;
    text-transform: uppercase; margin-top: 1px;
  }
  .mg-money-disc {
    font-size: 12px; font-weight: 700; color: var(--green); line-height: 1.1;
  }
  .mg-money-red  { color: var(--red); }
  .mg-money-green { color: var(--green); }
  .mg-money-dim  { color: var(--text-dim); }

  /* Leads urgent/recent section headers */
  .mg-section-header { display:flex; align-items:baseline; gap:8px; padding:14px 16px 6px; }
  .mg-section-header .bar { width:3px; align-self:stretch; border-radius:2px; margin:2px 0; }
  .mg-section-header .label { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.6px; }
  .mg-section-header .subtitle { font-size:11px; color:var(--text-dim); margin-top:2px; }
}

/* ============================================================================
   MOBILE FAB (2026-05-07 — admin-mobile redesign, visual-only)
   Used on pages where the primary "+ Add" CTA lives in .page-hdr, which is
   `display:none` on mobile. The FAB exposes the same handler in the thumb
   zone above the bottom nav. Rendered conditionally per page; hidden on
   desktop where the page-hdr CTA is visible.
   ========================================================================= */
.mobile-fab {
  display: none;
}
@media (max-width: 767px) {
  .mobile-fab {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    right: 16px;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 76px); /* sits above bottom nav */
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--accent, #d4a049);
    color: #fff;
    border: none;
    font-size: 28px;
    line-height: 1;
    font-weight: 300;
    box-shadow: 0 4px 14px rgba(0,0,0,0.35);
    cursor: pointer;
    z-index: 20;
  }
  .mobile-fab:active {
    transform: scale(0.96);
  }
  .mobile-fab + .mobile-fab {
    bottom: calc(env(safe-area-inset-bottom, 0px) + 144px); /* secondary FAB stacks above */
  }
}

/* ============================================================================
   MOBILE UX BASELINE (2026-05-07 — admin-mobile redesign, visual-only)
   Source: mockups/ADMIN-UXUX-REVIEW.md sections (2)+(3)
   Goal: kill the 11 iOS-zoom triggers and the touch-target P1s in one pass,
   without changing any data or markup. Apply to all admin and student pages.
   ========================================================================= */
@media (max-width: 767px) {
  /* iOS Safari auto-zooms on any focused input/select/textarea whose computed
     font-size is < 16px. Forces 16px baseline for all form fields on phones.
     Inline `font-size:13px` on individual inputs is the bug pattern flagged
     across 9 admin pages (settings, leads, transactions, programs, belts,
     inventory, campaigns, stats, check-in). */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select,
  textarea {
    font-size: 16px !important;
  }

  /* Touch-target minimum: lift .btn-sm and inline-action buttons that the
     pointer:coarse rule (style.css:3205) explicitly excluded for desktop
     density. On mobile every primary action MUST be >= 44px tall. Modal
     close (.modal-close, .btn-icon) and toggle pill (.toggle-switch) keep
     their own sizing. Action buttons inside the slim quick-action bar
     (.btn-sm-qa) get 40px to balance density. */
  .btn-sm,
  button.btn-sm,
  a.btn-sm,
  .lm-btn,
  .cs-actions button,
  .inv-card-actions .btn,
  .order-actions .btn,
  .size-adj-btns button,
  .campaign-actions button,
  .actions-cell button,
  .actions-cell a {
    min-height: 44px;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .btn-sm-qa {
    min-height: 40px;
  }

  /* Below-12px font-sizes are unreadable on phones. Lift the 9-11px badge
     and meta-line patterns to a 11px floor (preserves desktop density). */
  .badge,
  .booking-badge,
  .workshop-badge,
  .pill,
  .type-pill,
  .kpi-label,
  .kpi-sub,
  .stat-label,
  .day-name,
  .rev-stat-sub {
    font-size: 11px !important;
  }
}


/* RTL (Arabic UI locale, 2026-09-07) */
[dir="rtl"] .admin-sidebar { border-right: 0; border-left: 1px solid var(--border); }
[dir="rtl"] .sidebar-link.active { border-left: 0; border-right: 3px solid var(--accent); }
[dir="rtl"] .admin-sidebar.collapsed .sidebar-link.active { padding-right: 0; border-right: 3px solid var(--accent); border-left: 0; }
[dir="rtl"] #mobileHomeDot { right: auto; left: -4px; }