/* ============================================================
   NEXT LEVEL FITNESS PT — Design System
   Colors: #000 (black) · #C8102E (red) · #FFFFFF (white)
   ============================================================ */

:root {
  --black: #0a0a0a;
  --black-2: #141414;
  --black-3: #1e1e1e;
  --black-4: #2a2a2a;
  --black-5: #363636;
  --red: #C8102E;
  --red-dark: #a00d24;
  --red-light: #e8132f;
  --white: #ffffff;
  --white-80: rgba(255,255,255,0.92);
  --white-60: rgba(255,255,255,0.80);
  --white-30: rgba(255,255,255,0.55);
  --white-10: rgba(255,255,255,0.10);
  --success: #22c55e;
  --warning: #f59e0b;
  --danger: #ef4444;
  --info: #3b82f6;
  --border: rgba(255,255,255,0.18);
  --radius: 10px;
  --radius-lg: 16px;
  --shadow: 0 4px 24px rgba(0,0,0,0.5);
  --shadow-lg: 0 8px 48px rgba(0,0,0,0.7);
  --transition: 0.2s ease;
  --font: 'Inter', system-ui, -apple-system, sans-serif;
  --sidebar-w: 240px;
  --topbar-h: 60px;
}

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

html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font);
  background: var(--black);
  color: var(--white);
  line-height: 1.5;
  min-height: 100vh;
  overflow-x: hidden;
}

/* ── Scrollbar ────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--black-2); }
::-webkit-scrollbar-thumb { background: var(--black-5); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--red); }

/* ── Typography ───────────────────────────────── */
h1 { font-size: clamp(1.4rem, 4vw, 2rem); font-weight: 800; letter-spacing: -0.5px; }
h2 { font-size: clamp(1.15rem, 3vw, 1.5rem); font-weight: 700; }
h3 { font-size: clamp(1rem, 2.5vw, 1.2rem); font-weight: 600; }
h4 { font-size: clamp(0.9rem, 2vw, 1rem); font-weight: 600; }
p  { color: var(--white-80); }
a  { color: var(--red); text-decoration: none; }
a:hover { color: var(--red-light); }

/* ── Buttons ──────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  border-radius: var(--radius);
  border: none;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  text-decoration: none;
  white-space: nowrap;
  font-family: var(--font);
  min-height: 40px;
  touch-action: manipulation;
}
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-primary { background: var(--red); color: var(--white); }
.btn-primary:hover:not(:disabled) { background: var(--red-light); transform: translateY(-1px); }
.btn-secondary { background: var(--black-4); color: var(--white); border: 1px solid var(--border); }
.btn-secondary:hover:not(:disabled) { background: var(--black-5); }
.btn-success { background: var(--success); color: var(--white); }
.btn-danger { background: var(--danger); color: var(--white); }
.btn-warning { background: var(--warning); color: var(--black); }
.btn-ghost { background: transparent; color: var(--white-80); border: 1px solid var(--border); }
.btn-ghost:hover { background: var(--white-10); }
.btn-sm { padding: 6px 12px; font-size: 0.8rem; }
.btn-xs { padding: 4px 8px; font-size: 0.72rem; line-height: 1.2; }
.btn-lg { padding: 14px 28px; font-size: 1rem; }
.btn-full { width: 100%; justify-content: center; }
.btn-icon { padding: 8px; width: 36px; height: 36px; justify-content: center; border-radius: 8px; }

/* ── Forms ────────────────────────────────────── */
.form-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.form-group label { font-size: 0.85rem; font-weight: 600; color: var(--white-80); }
.form-control {
  background: var(--black-3);
  border: 1px solid var(--border);
  color: var(--white);
  padding: 10px 14px;
  border-radius: var(--radius);
  font-size: 0.9rem;
  font-family: var(--font);
  transition: border-color var(--transition);
  width: 100%;
}
.form-control:focus { outline: none; border-color: var(--red); }
.form-control::placeholder { color: rgba(255,255,255,0.40); }
input:disabled, select:disabled, textarea:disabled { color: #c0c0c0 !important; -webkit-text-fill-color: #c0c0c0 !important; opacity: 1 !important; background: var(--black-4) !important; }
select.form-control { cursor: pointer; }
textarea.form-control { resize: vertical; min-height: 100px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
/* On tiny screens collapse all form grids to 1-col */
@media (max-width: 480px) {
  .form-row   { grid-template-columns: 1fr; }
  .form-row-3 { grid-template-columns: 1fr; }
}

/* ── Cards ────────────────────────────────────── */
.card {
  background: var(--black-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
  transition: border-color var(--transition);
}
.card:hover { border-color: rgba(200,16,46,0.3); }
.card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.card-title { font-size: 1rem; font-weight: 700; }
.card-body { }
.card-red-border { border-left: 3px solid var(--red); }

/* ── Badges ───────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
  flex-shrink: 0;
}
.badge-red { background: rgba(200,16,46,0.2); color: var(--red-light); border: 1px solid rgba(200,16,46,0.4); }
.badge-green { background: rgba(34,197,94,0.15); color: var(--success); border: 1px solid rgba(34,197,94,0.3); }
.badge-yellow { background: rgba(245,158,11,0.15); color: var(--warning); border: 1px solid rgba(245,158,11,0.3); }
.badge-blue { background: rgba(59,130,246,0.15); color: var(--info); border: 1px solid rgba(59,130,246,0.3); }
.badge-gray { background: var(--black-4); color: rgba(255,255,255,0.85); border: 1px solid rgba(255,255,255,0.22); }

/* ── Stat cards ───────────────────────────────── */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; margin-bottom: 20px; }
.stat-card {
  background: var(--black-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.stat-card.accent { border-color: rgba(200,16,46,0.5); background: rgba(200,16,46,0.06); }
.stat-label { font-size: 0.75rem; font-weight: 600; color: rgba(255,255,255,0.82); text-transform: uppercase; letter-spacing: 0.5px; }
.stat-value { font-size: 1.8rem; font-weight: 800; line-height: 1; }
.stat-value.red { color: var(--red-light); }
.stat-sub { font-size: 0.78rem; color: rgba(255,255,255,0.72); }
.stat-icon { font-size: 1.4rem; margin-bottom: 4px; }

/* ── Tables ───────────────────────────────────── */
.table-wrap { overflow-x: auto; border-radius: var(--radius-lg); border: 1px solid var(--border); }
table { width: 100%; border-collapse: collapse; }
thead { background: var(--black-3); }
thead th { padding: 12px 16px; text-align: left; font-size: 0.75rem; font-weight: 700; color: rgba(255,255,255,0.85); text-transform: uppercase; letter-spacing: 0.5px; }
tbody tr { border-top: 1px solid var(--border); transition: background var(--transition); }
tbody tr:hover { background: var(--white-10); }
tbody tr.row-clickable { cursor: pointer; }
tbody tr.row-clickable:hover { background: rgba(200,16,46,0.10); box-shadow: inset 3px 0 0 var(--red); }
td { padding: 12px 16px; font-size: 0.88rem; vertical-align: middle; color: rgba(255,255,255,0.92); }

/* ── Alerts ───────────────────────────────────── */
.alert { display: flex; align-items: flex-start; gap: 10px; padding: 12px 16px; border-radius: var(--radius); font-size: 0.875rem; margin-bottom: 16px; }
.alert-danger { background: rgba(239,68,68,0.12); border: 1px solid rgba(239,68,68,0.3); color: #fca5a5; }
.alert-success { background: rgba(34,197,94,0.12); border: 1px solid rgba(34,197,94,0.3); color: #86efac; }
.alert-warning { background: rgba(245,158,11,0.12); border: 1px solid rgba(245,158,11,0.3); color: #fcd34d; }
.alert-info { background: rgba(59,130,246,0.12); border: 1px solid rgba(59,130,246,0.3); color: #93c5fd; }

/* ── Tabs ─────────────────────────────────────── */
.tabs { display: flex; gap: 4px; border-bottom: 2px solid var(--border); margin-bottom: 20px; overflow-x: auto; }
.tab-btn {
  padding: 10px 18px;
  font-size: 0.875rem;
  font-weight: 600;
  color: rgba(255,255,255,0.80);
  background: none;
  border: none;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  white-space: nowrap;
  font-family: var(--font);
  transition: color var(--transition), border-color var(--transition);
}
.tab-btn:hover { color: var(--white); }
.tab-btn.active { color: var(--red-light); border-bottom-color: var(--red); }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* ── Modal ────────────────────────────────────── */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.85);
  display: flex; align-items: center; justify-content: center;
  z-index: 1000;
  padding: 16px;
  backdrop-filter: blur(4px);
  opacity: 0; pointer-events: none;
  transition: opacity 0.2s ease;
}
.modal-overlay.open { opacity: 1; pointer-events: all; }
.modal {
  background: var(--black-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px;
  width: 100%;
  max-width: 540px;
  max-height: 90vh;
  overflow-y: auto;
  overflow-x: hidden;
  transform: scale(0.96);
  transition: transform 0.2s ease;
}
.modal-overlay.open .modal { transform: scale(1); }
.modal-lg { max-width: 760px; }
/* Modal always fills safely on small phones */
@media (max-width: 540px) {
  .modal, .modal-lg { max-width: 100%; width: calc(100vw - 24px); padding: 20px 16px; }
}
.modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.modal-title { font-size: 1.2rem; font-weight: 700; }
.modal-close { background: none; border: none; color: rgba(255,255,255,0.80); font-size: 1.4rem; cursor: pointer; padding: 4px; line-height: 1; }
.modal-close:hover { color: var(--white); }
.modal-footer { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 10px; }

/* ── App Layout ───────────────────────────────── */
#app { display: flex; min-height: 100vh; }

/* Sidebar */
.sidebar {
  width: var(--sidebar-w);
  background: var(--black-2);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0; left: 0; bottom: 0;
  z-index: 200;
  transition: transform 0.3s ease;
}
.sidebar-logo {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 12px;
}
.sidebar-logo img { width: 46px; height: 46px; object-fit: contain; border-radius: 50%; }
.sidebar-logo-text { font-size: 0.75rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; line-height: 1.3; }
.sidebar-logo-text span { color: var(--red); display: block; }
.sidebar-nav { flex: 1; padding: 12px 8px; overflow-y: auto; }
.nav-section-label { font-size: 0.65rem; font-weight: 700; color: rgba(255,255,255,0.55); text-transform: uppercase; letter-spacing: 1px; padding: 8px 12px 4px; }
.nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  color: rgba(255,255,255,0.82);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition);
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  font-family: var(--font);
  text-decoration: none;
}
.nav-link:hover { background: var(--white-10); color: var(--white); }
.nav-link.active { background: rgba(200,16,46,0.15); color: var(--red-light); }
.nav-link .nav-icon { font-size: 1.1rem; width: 22px; text-align: center; flex-shrink: 0; }
.nav-badge { margin-left: auto; background: var(--red); color: var(--white); font-size: 0.65rem; font-weight: 700; padding: 2px 6px; border-radius: 10px; }
.sidebar-footer { padding: 12px 8px; border-top: 1px solid var(--border); }
.sidebar-user { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 8px; }
.sidebar-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--red); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.85rem; flex-shrink: 0; }
.sidebar-user-info { flex: 1; overflow: hidden; }
.sidebar-user-name { font-size: 0.85rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-user-role { font-size: 0.72rem; color: rgba(255,255,255,0.78); text-transform: capitalize; }

/* Main content */
.main-content {
  flex: 1;
  margin-left: var(--sidebar-w);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.topbar {
  height: var(--topbar-h);
  background: var(--black-2);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  position: sticky;
  top: 0;
  z-index: 100;
}
.topbar-title { font-size: 1.1rem; font-weight: 700; }
.topbar-right { display: flex; align-items: center; gap: 10px; }
.credit-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(200,16,46,0.15);
  border: 1px solid rgba(200,16,46,0.4);
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--red-light);
}
.page-content { flex: 1; padding: 24px; overflow-y: auto; overflow-x: hidden; }
.page-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 20px; flex-wrap: wrap; gap: 10px; }
.page-title { font-size: clamp(1.1rem, 3.5vw, 1.4rem); font-weight: 800; }
.page-subtitle { font-size: 0.82rem; color: rgba(255,255,255,0.80); margin-top: 2px; }

/* ── Login / Landing ──────────────────────────── */
#login-screen {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--black);
  padding: 24px;
  background-image: 
    radial-gradient(ellipse at 20% 50%, rgba(200,16,46,0.10) 0%, transparent 65%),
    radial-gradient(ellipse at 80% 20%, rgba(200,16,46,0.06) 0%, transparent 50%);
}
.login-box {
  background: var(--black-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 40px;
  width: 100%;
  max-width: 420px;
  box-shadow: var(--shadow-lg);
}
.login-logo {
  text-align: center;
  margin-bottom: 24px;
}
.login-logo img {
  width: 150px;
  height: 150px;
  object-fit: contain;
  border-radius: 50%;
  filter: drop-shadow(0 0 28px rgba(200,16,46,0.6));
  animation: logoPulse 3s ease-in-out infinite;
}
@keyframes logoPulse {
  0%, 100% { filter: drop-shadow(0 0 28px rgba(200,16,46,0.6)); }
  50%       { filter: drop-shadow(0 0 42px rgba(200,16,46,0.9)); }
}
.login-logo h1 { font-size: 1.1rem; font-weight: 800; margin-top: 10px; }
.login-logo span { color: var(--red); }
.login-tabs { display: flex; gap: 2px; background: var(--black-3); border-radius: 8px; padding: 3px; margin-bottom: 24px; }
.login-tab {
  flex: 1;
  padding: 8px;
  text-align: center;
  font-size: 0.82rem;
  font-weight: 600;
  border-radius: 6px;
  cursor: pointer;
  transition: all var(--transition);
  border: none;
  background: none;
  color: rgba(255,255,255,0.82);
  font-family: var(--font);
}
.login-tab.active { background: var(--red); color: var(--white); }
.login-divider { text-align: center; color: rgba(255,255,255,0.58); font-size: 0.8rem; margin: 12px 0; position: relative; }
.login-divider::before { content: ''; position: absolute; top: 50%; left: 0; right: 0; height: 1px; background: var(--border); }
.login-divider span { background: var(--black-2); padding: 0 10px; position: relative; }

/* ── Calendar ─────────────────────────────────── */
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.cal-header { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-bottom: 4px; }
.cal-day-label { text-align: center; font-size: 0.72rem; font-weight: 700; color: rgba(255,255,255,0.82); text-transform: uppercase; padding: 4px 0; }
.cal-day {
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  cursor: pointer;
  transition: all var(--transition);
  font-size: 0.85rem;
  font-weight: 500;
  position: relative;
  border: 1px solid transparent;
  background: var(--black-3);
}
.cal-day:hover:not(.disabled) { background: var(--white-10); border-color: var(--border); }
.cal-day.today { border-color: var(--red); color: var(--red-light); }
.cal-day.selected { background: var(--red); color: var(--white); border-color: var(--red); }
.cal-day.has-booking::after { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--success); position: absolute; bottom: 4px; }
.cal-day.disabled { opacity: 0.3; cursor: not-allowed; }
.cal-day.other-month { opacity: 0.25; }
.cal-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.cal-nav h3 { font-size: 1rem; font-weight: 700; }

/* Time slots */
.time-slots-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; margin-top: 12px; }
.time-slot {
  padding: 10px 12px;
  border-radius: 10px;
  border: 2px solid rgba(200,16,46,0.35);
  background: rgba(200,16,46,0.07);
  color: #e5e5e5;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
  transition: all 0.15s ease;
  position: relative;
}
.time-slot::before {
  content: '';
  display: inline-block;
  width: 7px; height: 7px;
  background: #22c55e;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
}
.time-slot:not(:disabled):hover {
  background: rgba(200,16,46,0.22);
  border-color: var(--red);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(200,16,46,0.3);
}
.time-slot.selected {
  background: var(--red);
  color: #fff;
  border-color: var(--red);
  box-shadow: 0 4px 20px rgba(200,16,46,0.5);
  transform: translateY(-1px);
}
.time-slot.selected::before { background: #fff; }
/* Booked slots are hidden entirely from member view — handled in JS */
.time-slot.booked { display: none; }

/* ── Goal Ring ─────────────────────────────────── */
.goal-ring-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 8px 0;
}
/* Responsive SVG wrapper — scales down on small screens, caps at 160px */
.goal-ring-svg-wrap {
  width: 100%;
  max-width: 160px;
  margin: 0 auto;
  display: block;
}
.goal-ring-svg {
  transform: rotate(-90deg);
  display: block;
  width: 100%;
  height: auto;
}
.goal-ring-text { text-align: center; width: 100%; }
.goal-ring-number { font-size: 2.2rem; font-weight: 800; color: var(--red-light); }
.goal-ring-label { font-size: 0.8rem; color: rgba(255,255,255,0.80); }

/* ── Progress bar ─────────────────────────────── */
/* ── Goal Ring Card (member dashboard) ────────── */
.goal-ring-card { }
.goal-ring-card-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  text-align: center;
}
.goal-ring-stats-row {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 8px;
  font-size: 0.78rem;
  color: #d1d5db;
  flex-wrap: wrap;
  width: 100%;
}
.goal-ring-stats-row strong { color: #fff; }

/* ── Progress Tracking Page ───────────────────── */

/* Stat grid override for progress page */
.progress-stat-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }

/* Inches breakdown grid */
.inches-breakdown-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px;
  padding: 4px 0;
}

/* Body fat two-column layout */
.bf-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;
}
.bf-left-panel {
  text-align: center;
  padding: 20px 12px;
  background: var(--black-3);
  border-radius: 12px;
  border: 1px solid var(--border);
}
.bf-right-panel {
  padding: 20px 12px;
  background: var(--black-3);
  border-radius: 12px;
  border: 1px solid var(--border);
}
.bf-chart-wrap {
  margin-top: 16px;
  height: 180px;
}

/* Goal ring section */
.goal-ring-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  text-align: center;
}

/* Weight breadcrumb */
.goal-breadcrumb {
  display: flex;
  gap: 6px;
  align-items: center;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  font-size: 0.8rem;
  color: #9ca3af;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
}

/* Weight/BF chart container */
.progress-chart-wrap { height: 240px; }

/* Measurement history — desktop table visible, mobile cards hidden */
.meas-table-desktop { display: block; }
.meas-cards-mobile  { display: none; }

/* Mobile measurement cards */
.meas-mobile-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 10px;
}
.meas-mobile-card:last-child { margin-bottom: 0; }
.meas-mobile-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: var(--black-3);
  border-bottom: 1px solid var(--border);
}
.meas-mobile-date {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--white-80);
  display: flex;
  align-items: center;
  gap: 6px;
}
.meas-mobile-date i { color: var(--red-light); }
.meas-mobile-actions { display: flex; gap: 6px; }
.meas-mobile-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}
.meas-mobile-cell {
  padding: 10px 14px;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.meas-mobile-cell:nth-child(even) { border-right: none; }
.meas-mobile-cell:nth-last-child(-n+2) { border-bottom: none; }
.meas-mobile-label {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--white-30);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 3px;
}
.meas-mobile-val {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--white-80);
}

/* ── Progress Tracking Page — responsive ──────── */
.progress-bar-wrap { background: var(--black-4); border-radius: 20px; height: 10px; overflow: hidden; }
.progress-bar { height: 100%; background: linear-gradient(90deg, var(--red), var(--red-light)); border-radius: 20px; transition: width 0.6s ease; }

/* ── Messaging ────────────────────────────────── */
.chat-wrap {
  display: flex;
  flex-direction: column;
  height: 480px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.chat-messages { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.chat-msg { max-width: 75%; }
.chat-msg.mine { align-self: flex-end; }
.chat-msg.theirs { align-self: flex-start; }
.chat-bubble {
  padding: 10px 14px;
  border-radius: 16px;
  font-size: 0.875rem;
  line-height: 1.5;
}
.chat-msg.mine .chat-bubble { background: var(--red); color: var(--white); border-bottom-right-radius: 4px; }
.chat-msg.theirs .chat-bubble { background: var(--black-4); color: rgba(255,255,255,0.95); border-bottom-left-radius: 4px; }
.chat-time { font-size: 0.7rem; color: rgba(255,255,255,0.58); margin-top: 3px; text-align: right; }
.chat-input-row { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--border); background: var(--black-3); }
.chat-input {
  flex: 1;
  background: var(--black-2);
  border: 1px solid var(--border);
  color: var(--white);
  padding: 10px 14px;
  border-radius: 24px;
  font-size: 0.875rem;
  font-family: var(--font);
  resize: none;
}
.chat-input:focus { outline: none; border-color: var(--red); }

/* ── Stripe checkout ──────────────────────────── */
.stripe-checkout {
  background: var(--black-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
}
.stripe-card-input {
  background: var(--black-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  font-family: monospace;
  font-size: 1rem;
  color: var(--white);
  width: 100%;
  letter-spacing: 2px;
}
.stripe-secure { display: flex; align-items: center; gap: 6px; font-size: 0.78rem; color: rgba(255,255,255,0.78); margin-top: 10px; }

/* ── Waiver ───────────────────────────────────── */
.waiver-box {
  background: var(--black-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  height: 300px;
  overflow-y: auto;
  font-size: 0.85rem;
  line-height: 1.8;
  color: var(--white-80);
  margin-bottom: 16px;
}

/* ── Notification dot ─────────────────────────── */
.notif-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--red); }

/* ── Spinner ──────────────────────────────────── */
.spinner {
  width: 32px; height: 32px;
  border: 3px solid var(--white-10);
  border-top-color: var(--red);
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
  margin: 0 auto;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Toast ────────────────────────────────────── */
#toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.toast {
  background: var(--black-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 18px;
  font-size: 0.875rem;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: var(--shadow);
  transform: translateX(100%);
  transition: transform 0.3s ease;
  max-width: 300px;
}
.toast.show { transform: translateX(0); }
.toast.toast-success { border-left: 3px solid var(--success); }
.toast.toast-error { border-left: 3px solid var(--danger); }
.toast.toast-info { border-left: 3px solid var(--info); }
.toast.toast-warning { border-left: 3px solid var(--warning); }

/* ── Section divider ──────────────────────────── */
.section-divider { height: 1px; background: var(--border); margin: 24px 0; }

/* ── Mobile hamburger ─────────────────────────── */
.hamburger {
  display: none;
  background: none;
  border: none;
  color: var(--white);
  font-size: 1.4rem;
  cursor: pointer;
  padding: 4px;
}
.topbar-logo-mobile {
  display: none;
  width: 32px;
  height: 32px;
  object-fit: contain;
  border-radius: 50%;
}
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 199;
}

/* ── Search ───────────────────────────────────── */
.search-input-wrap { position: relative; }
.search-input-wrap .form-control { padding-left: 38px; }
.search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: rgba(255,255,255,0.55); font-size: 0.9rem; }

/* ── Empty states ─────────────────────────────── */
.empty-state { text-align: center; padding: 48px 24px; color: rgba(255,255,255,0.80); }
.empty-state .empty-icon { font-size: 3rem; margin-bottom: 12px; }
.empty-state p { font-size: 0.9rem; }

/* ── 2-col layout ─────────────────────────────── */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.three-col { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }

/* ── Tag chip ─────────────────────────────────── */
.tag-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; background: var(--black-4); border: 1px solid var(--border); border-radius: 12px; font-size: 0.72rem; font-weight: 600; color: var(--white-80); margin: 2px 2px; white-space: nowrap; }
.tag-chip.red { background: rgba(200,16,46,0.15); border-color: rgba(200,16,46,0.4); color: var(--red-light); }

/* ── Client derived tag variants ──────────────── */
/* Status: Member — green */
.tag-chip.tag-status-member    { background: rgba(34,197,94,0.15);  border-color: rgba(34,197,94,0.4);  color: #4ade80; }
/* Status: Non-Member — grey */
.tag-chip.tag-status-nonmember { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.18); color: #9ca3af; }
/* Plan: 45 Min — blue */
.tag-chip.tag-plan-45   { background: rgba(59,130,246,0.15);  border-color: rgba(59,130,246,0.4);  color: #93c5fd; }
/* Plan: 30 Min — purple */
.tag-chip.tag-plan-30   { background: rgba(139,92,246,0.15);  border-color: rgba(139,92,246,0.4);  color: #c4b5fd; }
/* Plan: Semi Private — teal */
.tag-chip.tag-plan-semi { background: rgba(20,184,166,0.15);  border-color: rgba(20,184,166,0.4);  color: #5eead4; }
/* Plan: other — default grey */
.tag-chip.tag-plan-other { background: var(--black-4); border-color: var(--border); color: var(--white-80); }
/* Goal: Weight Gain — green */
.tag-chip.tag-goal-gain { background: rgba(34,197,94,0.15);   border-color: rgba(34,197,94,0.4);   color: #4ade80; }
/* Goal: Weight Loss — red */
.tag-chip.tag-goal-loss { background: rgba(200,16,46,0.15);   border-color: rgba(200,16,46,0.4);   color: var(--red-light); }
/* Manual tags — default style (same as base) */
.tag-chip.tag-manual    { background: var(--black-4); border-color: var(--border); color: var(--white-60); }
/* tags cell: allow chips to wrap with proper spacing */
.tags-cell { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; min-width: 0; }
/* action buttons cell */
.action-btns { display: flex; flex-wrap: nowrap; gap: 3px; align-items: center; }

/* compact table — tighter rows for data-dense pages */
.table-compact td   { padding: 8px 10px; font-size: 0.82rem; }
.table-compact thead th { padding: 8px 10px; font-size: 0.72rem; }

/* ── Fixed-layout table for Clients tab (11 columns) ─────────── */
/* table-layout:fixed means the colgroup percentages are honoured  */
/* and cells NEVER expand beyond their column width.               */
.table-clients {
  table-layout: fixed;
  width: 100%;
}
/* Name / email / plan / trainer cells: truncate with ellipsis */
.td-truncate {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
/* Name cell wrapper keeps the warning icon + name on one line */
.td-name-cell {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow: hidden;
  min-width: 0;
}
.td-name-cell .td-truncate {
  flex: 1;
  min-width: 0;
}
/* Credits column — centred */
.table-clients td:nth-child(5) {
  text-align: center;
}
.table-clients thead th:nth-child(5) {
  text-align: center;
}

/* Waiver / Payment columns — centre badges (Meas column removed) */
.table-clients td:nth-child(7),
.table-clients td:nth-child(8),
.table-clients thead th:nth-child(7),
.table-clients thead th:nth-child(8) {
  text-align: center;
}
.table-clients td:nth-child(7) .badge,
.table-clients td:nth-child(8) .badge {
  font-size: 0.65rem;
  padding: 2px 5px;
  white-space: nowrap;
  display: inline-block;
}

/* Tags + Actions stacked cell */
.td-tags-actions {
  vertical-align: middle;
}
.td-tags-row {
  margin-bottom: 4px;
}
.td-tags-row .tag-chip {
  font-size: 0.62rem;
  padding: 1px 5px;
  margin: 1px;
}
/* Action buttons — override global min-height:40px */
.table-clients .action-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  align-items: center;
}
.table-clients .action-btns .btn {
  min-height: unset;
  padding: 4px 6px;
  font-size: 0.7rem;
  line-height: 1.2;
}

/* ── Payroll ──────────────────────────────────── */
.payroll-summary { background: linear-gradient(135deg, rgba(200,16,46,0.15), rgba(200,16,46,0.05)); border: 1px solid rgba(200,16,46,0.3); border-radius: var(--radius-lg); padding: 20px; }
.payroll-amount { font-size: 2.4rem; font-weight: 800; color: var(--success); }

/* ══════════════════════════════════════════════
   ADMIN MOBILE CARD VIEWS  (admin-* classes)
   Desktop table shown ≥600px, mobile cards ≤600px
══════════════════════════════════════════════ */

/* ── Toggle helpers ── */
.admin-desktop-only { display: block; }
.admin-mobile-only  { display: none; }

/* ── Shared card shell ── */
.admin-client-card,
.admin-staff-card,
.admin-hist-card,
.admin-cr-card,
.admin-plan-card {
  background: var(--black-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 10px;
  overflow: hidden;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  min-width: 0;
}
.admin-client-card:last-child,
.admin-staff-card:last-child,
.admin-hist-card:last-child,
.admin-cr-card:last-child,
.admin-plan-card:last-child { margin-bottom: 0; }

/* Warn highlight for overdue measurements */
.admin-client-card-warn { border-left: 3px solid #fb923c; }

/* ── Card header row ── */
.admin-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px 8px;
  flex-wrap: wrap;
}
.admin-card-name {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  flex: 1;
  overflow: hidden;
}
.admin-card-name strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.admin-card-badges {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  align-items: center;
  flex-shrink: 0;
}

/* ── Meta row (icons + text) ── */
.admin-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  padding: 0 14px 8px;
  align-items: center;
}

/* ── Generic row (badges, tags) ── */
.admin-card-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 6px 14px;
  border-top: 1px solid var(--border);
  align-items: center;
}

/* ── Action button row ── */
.admin-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 14px;
  border-top: 1px solid var(--border);
  background: var(--black-4);
}

/* ── Section labels ── */
.admin-section-label {
  font-size: 0.7rem;
  font-weight: 700;
  color: #9ca3af;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 8px 4px 6px;
  margin-top: 12px;
}
.admin-section-label-red { color: var(--red-light); }

/* ── History card clickable ── */
.admin-hist-card { cursor: pointer; }
.admin-hist-card:hover { border-color: var(--red); }

/* ── Plan card price grid ── */
.admin-plan-prices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-top: 1px solid var(--border);
}
.admin-plan-price-item {
  display: flex;
  flex-direction: column;
  padding: 8px 14px;
  gap: 2px;
}
.admin-plan-price-item:first-child {
  border-right: 1px solid var(--border);
}

/* ── Services card — ensure action buttons wrap on mobile ── */
.svc-card-top { flex-wrap: wrap; }

/* ══════════════════════════════════════════════
   STAFF / TRAINER PAGES  (tr-* classes)
══════════════════════════════════════════════ */

/* ── Measurement overdue alert banner ── */
.tr-overdue-alert {
  background: linear-gradient(135deg, rgba(251,146,60,0.18) 0%, rgba(251,146,60,0.07) 100%);
  border: 1.5px solid rgba(251,146,60,0.55);
  border-left: 5px solid #fb923c;
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 18px;
}
.tr-overdue-header {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.tr-overdue-icon { font-size: 1.5rem; flex-shrink: 0; }
.tr-overdue-text { flex: 1; min-width: 160px; }
.tr-overdue-title { font-weight: 700; font-size: 0.95rem; color: #fdba74; }
.tr-overdue-sub   { font-size: 0.78rem; color: rgba(255,255,255,0.45); margin-top: 2px; }
.tr-overdue-cta   { background: #fb923c !important; color: #fff !important; border: none !important; flex-shrink: 0; }
.tr-overdue-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.tr-overdue-chip  {
  background: rgba(251,146,60,0.15);
  border: 1px solid rgba(251,146,60,0.4);
  border-radius: 8px;
  padding: 8px 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: background 0.15s;
}
.tr-overdue-chip:hover { background: rgba(251,146,60,0.28); }
.tr-chip-name  { font-weight: 600; font-size: 0.82rem; color: #fff; }
.tr-chip-sub   { font-size: 0.72rem; color: rgba(255,255,255,0.4); }
.tr-chip-more  { font-size: 0.78rem; color: rgba(255,255,255,0.35); align-self: center; }

/* ── Today's schedule rows (dashboard card) ── */
.tr-session-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.tr-session-row:last-child { border-bottom: none; }
.tr-session-info { flex: 1; min-width: 0; }
.tr-session-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; flex-shrink: 0; }

/* ── Dashboard client list rows ── */
.tr-client-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.tr-client-row:last-child { border-bottom: none; }
.tr-client-row-warn {
  background: rgba(251,146,60,0.06);
  border-left: 3px solid #fb923c;
  padding-left: 10px;
  margin-left: -10px;
  border-radius: 0 4px 4px 0;
}
.tr-client-info    { flex: 1; min-width: 0; }
.tr-client-name    { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 0.92rem; flex-wrap: wrap; }
.tr-client-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; flex-shrink: 0; }
.tr-overdue-badge  {
  background: rgba(251,146,60,0.25);
  color: #fb923c;
  border: 1px solid rgba(251,146,60,0.5);
  border-radius: 6px;
  padding: 1px 7px;
  font-size: 0.68rem;
  font-weight: 700;
  white-space: nowrap;
}

/* tr-client-cards / tr-client-card removed — now uses admin-client-card pattern */

/* ── Staff overview — avatar chip ── */
.tr-staff-avatar {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  font-weight: 700;
  font-size: 0.9rem;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

/* ══════════════════════════════════════════════
   VISITOR / NON-MEMBER PAGES  (nm-* classes)
══════════════════════════════════════════════ */

/* ── Dashboard: service feature cards grid ── */
.nm-service-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 20px;
}
.nm-feature-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 20px;
}

/* ── Dashboard: available services grid ── */
.nm-visitor-svcs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}

/* ── Dashboard: upgrade CTA card ── */
.nm-upgrade-cta {
  background: linear-gradient(135deg, rgba(200,16,46,0.18) 0%, rgba(200,16,46,0.06) 100%);
  border: 1px solid rgba(200,16,46,0.35);
  margin-bottom: 20px;
}
.nm-upgrade-inner {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  padding: 4px 0;
}
.nm-upgrade-rocket {
  font-size: 3rem;
  line-height: 1;
  flex-shrink: 0;
}
.nm-upgrade-text {
  flex: 1;
  min-width: 200px;
}
.nm-upgrade-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 160px;
  flex-shrink: 0;
}
.nm-upgrade-actions .btn { width: 100%; justify-content: center; }

/* ── Booking: services tab strip ── */
.nm-svc-tabs .tab-btn {
  display: flex;
  align-items: center;
  gap: 5px;
}
.nm-tab-icon { flex-shrink: 0; }
.nm-tab-full { }          /* shown by default */
.nm-tab-short { display: none; } /* shown only on small screens */

/* ── Booking: calendar layout columns ── */
.nm-cal-grid-col { min-width: 0; }
.nm-cal-slots-col { min-width: 0; }
/* Desktop hint uses left arrow */
.nm-slots-hint::before { content: '← '; }

/* ── Booking: drop-in plan desktop / mobile layouts ── */
.nm-dropin-desktop-only { display: block; } /* shown on desktop */
.nm-dropin-mobile-only  { display: none; }  /* shown on mobile */

/* Mobile horizontal row */
.nm-dropin-mobile-row {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.nm-dropin-mobile-emoji {
  font-size: 2.2rem;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 2px;
}
.nm-dropin-mobile-info {
  flex: 1;
  min-width: 0;
}
.nm-dropin-mobile-top {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.nm-dropin-mobile-price {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--red-light);
  margin-top: 6px;
}

/* ── Booking: service banner ── */
.nm-svc-banner {
  margin-bottom: 18px;
}
.nm-svc-banner-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.nm-svc-banner-icon {
  font-size: 1.8rem;
  line-height: 1;
  flex-shrink: 0;
}
.nm-svc-banner-info {
  flex: 1;
  min-width: 0;
}
.nm-svc-price-badge {
  font-size: 0.95rem;
  padding: 5px 14px;
  margin-left: auto;
  flex-shrink: 0;
}

/* ── Booking: calendar + slots two-column layout ── */
.nm-cal-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: start;
}

/* ── Booking: drop-in session cards grid ── */
.nm-dropin-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

/* ── Booking: "not included" features grid ── */
.nm-not-included-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}

/* ── Sessions: booking row card ── */
.nm-booking-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 8px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}
.nm-booking-row:last-child { border-bottom: none; }
.nm-booking-info {
  flex: 1;
  min-width: 0;
}
.nm-booking-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex-shrink: 0;
}

/* ── Dashboard: visitor service card (nm-visitor-svcs-grid item) ── */
.nm-svc-card {
  position: relative;
  overflow: hidden;
}
.nm-svc-card-inner {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.nm-svc-card-icon {
  font-size: 1.8rem;
  line-height: 1;
  flex-shrink: 0;
}
.nm-svc-card-body {
  flex: 1;
  min-width: 0;
}
.nm-svc-card-desc {
  line-height: 1.5;
  margin-bottom: 8px;
}
.nm-svc-card-meta {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

/* ── Booking: drop-in plan cards ── */
.nm-dropin-plan-card {
  position: relative;
  overflow: hidden;
  border: 2px solid transparent;
  transition: border-color 0.2s;
}
.nm-dropin-plan-label {
  position: absolute;
  top: 0;
  right: 0;
  background: var(--red);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 0 0 0 10px;
}
.nm-dropin-plan-inner {
  text-align: center;
  padding: 8px 0 16px;
}
.nm-dropin-plan-emoji {
  font-size: 3rem;
  margin-bottom: 8px;
}
.nm-dropin-plan-name {
  margin: 8px 0 4px;
}
.nm-dropin-plan-price {
  font-weight: 800;
  color: var(--red-light);
  font-size: 2.4rem;
  margin: 14px 0;
}
.nm-dropin-plan-btn {
  font-size: 1rem;
  padding: 12px;
}

/* ── Booking: "not included" item ── */
.nm-not-included-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.nm-not-included-icon {
  font-size: 1.3rem;
  opacity: 0.5;
  flex-shrink: 0;
}
.nm-not-included-title {
  color: #9ca3af;
  font-weight: 600;
}

/* ── Booking: drop-in upgrade CTA ── */
.nm-dropin-upgrade-cta {
  background: linear-gradient(135deg, rgba(200,16,46,0.15), rgba(200,16,46,0.05));
  border: 1px solid rgba(200,16,46,0.3);
  text-align: center;
  padding: 28px 24px;
}
.nm-dropin-upgrade-rocket {
  font-size: 2.2rem;
  margin-bottom: 10px;
}
.nm-dropin-upgrade-heading {
  color: #fff;
  margin-bottom: 8px;
}
.nm-dropin-upgrade-btn {
  padding: 12px 28px;
  font-size: 1rem;
}

/* ── History: desktop table / mobile card dual view ── */
.nm-hist-table-desktop { display: block; }
.nm-hist-cards-mobile  { display: none; }

/* ── History mobile cards ── */
.nm-hist-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 10px;
  background: var(--black-3);
}
.nm-hist-card:last-child { margin-bottom: 0; }
.nm-hist-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  background: var(--black-4);
  border-bottom: 1px solid var(--border);
  gap: 8px;
  flex-wrap: wrap;
}
.nm-hist-card-top > div:first-child {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--white-80);
}
.nm-hist-card-body {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  gap: 10px;
  flex-wrap: wrap;
}
.nm-hist-card-body > span:first-child {
  font-size: 0.875rem;
  color: var(--white-80);
}

/* ══════════════════════════════════════════════
   RESPONSIVE — MOBILE FIRST
   Breakpoints:
     900px  tablet / collapsed sidebar
     600px  mobile landscape
     480px  mobile portrait
     360px  small phones (Samsung Galaxy S8 etc.)
══════════════════════════════════════════════ */

/* ── Base mobile touch improvements ──────────── */
* { -webkit-tap-highlight-color: transparent; }
button, [role="button"], .nav-link, .tab-btn { touch-action: manipulation; }
html { -webkit-text-size-adjust: 100%; }

/* ══════════════════════════════════════════════
   900px — TABLET: sidebar collapses to drawer
══════════════════════════════════════════════ */
@media (max-width: 900px) {

  /* ── Sidebar drawer ── */
  .sidebar {
    transform: translateX(-100%);
    box-shadow: none;
    transition: transform 0.28s cubic-bezier(.4,0,.2,1), box-shadow 0.28s ease;
  }
  .sidebar.open {
    transform: translateX(0);
    box-shadow: 4px 0 32px rgba(0,0,0,0.6);
  }
  .sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.55); z-index: 199; }
  .sidebar-overlay.open { display: block; }
  .main-content { margin-left: 0 !important; }
  .hamburger { display: block; }
  .topbar-logo-mobile { display: block; }

  /* ── Topbar ── */
  .topbar { padding: 0 14px; gap: 8px; height: 56px; }
  .topbar-title { font-size: 0.92rem; }
  .credit-pill { font-size: 0.73rem; padding: 4px 10px; gap: 4px; }
  .topbar-right .btn { padding: 6px 10px; font-size: 0.8rem; }

  /* ── Page content ── */
  .page-content { padding: 16px; overflow-x: hidden; }

  /* ── Layout grids ── */
  .two-col    { grid-template-columns: 1fr; }
  .three-col  { grid-template-columns: 1fr 1fr; }
  .form-row   { grid-template-columns: 1fr; }
  .form-row-3 { grid-template-columns: 1fr 1fr; }

  /* ── Page header ── */
  .page-header { flex-direction: column; align-items: flex-start; gap: 8px; }
  .page-header > div:last-child { width: 100%; display: flex; flex-wrap: wrap; gap: 8px; }
  .page-header > div:last-child .btn { flex: 1 1 auto; justify-content: center; min-width: 0; }

  /* ── Cards ── */
  .card { padding: 16px; }
  .card-header { flex-wrap: wrap; gap: 8px; }
  .card-header > .btn { flex-shrink: 0; }

  /* ── Stat grid ── */
  .stat-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 16px; }
  .stat-value { font-size: 1.6rem; }

  /* ── Tables ── */
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
  td, th { white-space: nowrap; }

  /* ── Client Management page ── */
  .clients-page-wrap { width: 100%; }

  /* ── Modals ── */
  .modal-overlay { padding: 12px; align-items: flex-end; }
  .modal { max-width: 100%; width: 100%; border-radius: 18px 18px 0 0; padding: 22px 18px 28px; }
  .modal-lg { max-width: 100%; width: 100%; }
  .modal::before { content: ''; display: block; width: 36px; height: 4px; background: rgba(255,255,255,0.18); border-radius: 2px; margin: -10px auto 14px; }

  /* ── Chat ── */
  .chat-wrap { height: 380px; }

  /* ── Toast ── */
  #toast-container { bottom: 16px; right: 12px; left: 12px; align-items: stretch; }
  .toast { max-width: 100%; }

  /* ── Tabs — horizontal scroll ── */
  .tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 2px; flex-wrap: nowrap; gap: 0; }
  .tab-btn { padding: 9px 12px; font-size: 0.82rem; flex-shrink: 0; }

  /* ── Buttons full-width in footer ── */
  .modal-footer { flex-wrap: wrap; }
  .modal-footer .btn { flex: 1; justify-content: center; min-width: 0; }

  /* ── PR goal row ── */
  .pr-goal-row { flex-wrap: wrap; }

  /* ── Body fat grid ── */
  .bf-grid { grid-template-columns: 1fr !important; }

  /* ── Dashboard quick grid ── */
  .dash-quick-grid { grid-template-columns: 1fr 1fr; gap: 10px; }

  /* ── Booking window role/plan rows ── */
  .bw-role-row { flex-wrap: wrap; gap: 10px; }
  .bw-role-select-wrap { width: 100%; }
  .bw-plan-control { width: 100%; }

  /* ── Stats grid — hide overflow on stats ── */
  .stats-grid { grid-template-columns: repeat(2, 1fr); }

  /* ── Staff / Trainer pages — layout collapses at 900px ── */
  .tr-session-row    { flex-direction: column; align-items: flex-start; }
  .tr-session-actions { width: 100%; justify-content: flex-start; }
  .tr-client-row      { flex-direction: column; align-items: flex-start; }
  .tr-client-actions  { width: 100%; justify-content: flex-start; }
  .tr-overdue-cta { width: 100%; justify-content: center; margin-top: 4px; }

  /* ── Admin mobile card views ── */
  .admin-desktop-only { display: none !important; }
  .admin-mobile-only  { display: block !important; }

  /* ── Staff / Staff Management tab ── */
  .admin-staff-card { width: 100% !important; max-width: 100% !important; box-sizing: border-box; }
  .admin-mobile-only { width: 100%; overflow: hidden; }

  /* ── Settings tab — general containment ── */
  .sq-settings-wrap { max-width: 100%; padding: 0; }
  .sq-table-settings { overflow-x: hidden; width: 100%; }
  .sq-table-row { flex-direction: column; align-items: flex-start; gap: 6px; }
  .sq-table-row select, .sq-table-row input { width: 100% !important; max-width: 100% !important; box-sizing: border-box; }
  .sq-radio-option { padding: 12px 14px; }
  .perm-role-block { padding: 14px 16px; width: 100%; box-sizing: border-box; }
  .perm-item { flex-wrap: wrap; gap: 10px; }

  /* Settings — cancellation cutoff select full-width */
  #pc-cutoff { max-width: 100% !important; width: 100% !important; }

  /* Settings — stripe flow diagram: scrollable row */
  .stripe-flow-diagram { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 6px; }

  /* Settings — all cards inside tab panels fully contained */
  .tab-panel .card { width: 100%; max-width: 100%; box-sizing: border-box; overflow: hidden; }
  .tab-panel .two-col { gap: 14px; }

  /* Settings — permission save/reset buttons stack */
  .perm-save-row { flex-direction: column; gap: 8px; }
  .perm-save-row .btn { width: 100%; justify-content: center; }
}

/* ══════════════════════════════════════════════
   600px — MOBILE LANDSCAPE
══════════════════════════════════════════════ */
@media (max-width: 600px) {

  /* ── Spacing ── */
  .page-content { padding: 10px; overflow-x: hidden; }
  .card { padding: 12px; border-radius: 12px; }
  .modal { padding: 20px; }
  .modal-footer { flex-wrap: wrap; gap: 8px; }
  .modal-footer .btn { flex: 1; justify-content: center; min-width: 0; }
  .login-box { padding: 22px 20px; }

  /* ── Grids ── */
  .stat-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .three-col { grid-template-columns: 1fr; }
  .form-row-3 { grid-template-columns: 1fr; }

  /* ── Stat cards ── */
  .stat-card { padding: 12px 14px; }
  .stat-value { font-size: 1.5rem; }
  .stat-icon  { font-size: 1.2rem; }
  .stat-label { font-size: 0.7rem; }

  /* ── Page header ── */
  .page-title    { font-size: 1.1rem; }
  .page-subtitle { font-size: 0.78rem; }
  .page-header { flex-wrap: wrap; gap: 10px; }
  .page-header > div:last-child { display: flex; flex-wrap: wrap; gap: 6px; }
  .page-header > div:last-child .btn { flex: 1 1 auto; justify-content: center; min-width: 0; }

  /* ── Tables ── */
  td         { padding: 10px 12px; font-size: 0.82rem; }
  thead th   { padding: 10px 12px; font-size: 0.72rem; }
  /* Action button cells — allow wrap so they don't overflow narrow columns */
  .action-btns { flex-wrap: wrap; gap: 3px; }
  .action-btns .btn-sm { padding: 5px 8px; font-size: 0.72rem; }
  .action-btns .btn-xs { padding: 4px 7px; font-size: 0.7rem; }

  /* ── Buttons ── */
  .btn    { padding: 9px 16px; font-size: 0.85rem; }
  .btn-sm { padding: 6px 10px; font-size: 0.76rem; }
  .btn-lg { padding: 12px 22px; font-size: 0.95rem; }

  /* ── Topbar ── */
  .topbar { padding: 0 10px; height: 54px; gap: 6px; }
  .topbar-title { font-size: 0.88rem; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .topbar-right { gap: 4px; }
  .topbar-right .btn-ghost { padding: 6px 8px; font-size: 0.78rem; }

  /* ── Chat ── */
  .chat-wrap { height: 360px; }
  .chat-msg  { max-width: 88%; }
  .chat-input { font-size: 0.85rem; }

  /* ── Goal ring ── */
  .goal-ring-svg-wrap { max-width: 130px; }
  .goal-ring-number   { font-size: 1.8rem; }

  /* ── History filter bar ── */
  .hist-filters-bar { flex-direction: column; align-items: stretch; padding: 10px 12px; gap: 6px; }
  .hist-filters-bar .form-control,
  .hist-filters-bar .form-control-sm { width: 100% !important; min-width: 0; }
  .hist-filters-bar .btn { width: 100%; justify-content: center; }

  /* ── Hist stat row ── */
  .hist-stat-row { gap: 8px; }
  .hist-stat { min-width: 60px; padding: 8px 10px; flex: 1; }
  .hist-stat-n { font-size: 1.15rem; }

  /* ── Tabs ── */
  .tab-btn { padding: 8px 10px; font-size: 0.79rem; }

  /* ── Body fat inline grids override ── */
  .card [style*="grid-template-columns:1fr 1fr"] { grid-template-columns: 1fr !important; }
  .card [style*="minmax(130px"]                  { grid-template-columns: repeat(2, 1fr) !important; }

  /* ── Toast ── */
  #toast-container { bottom: 12px; right: 8px; left: 8px; }

  /* ── Progress tracking page ── */
  .goal-breadcrumb { font-size: 0.72rem; gap: 4px; }
  /* BF two-col → one col on landscape mobile */
  .bf-two-col { grid-template-columns: 1fr; }
  .bf-chart-wrap { height: 160px; }
  .progress-chart-wrap { height: 200px; }
  /* Inches breakdown — 3 col on landscape mobile */
  .inches-breakdown-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  /* Progress stat cards — 2 col */
  .progress-stat-grid { grid-template-columns: 1fr 1fr; }
  /* Switch measurement table → mobile cards */
  .meas-table-desktop { display: none; }
  .meas-cards-mobile  { display: block; padding: 12px; }

  /* ── Semi-private ── */
  .semi-badge-row { flex-direction: column; align-items: flex-start; gap: 2px; }

  /* ── Services grid — 1 col ── */
  .svc-grid { grid-template-columns: 1fr !important; }
  .svc-summary-row { grid-template-columns: 1fr 1fr; }

  /* ── Reports KPI ── */
  .rpt-kpi-row { grid-template-columns: 1fr 1fr; }
  .rpt-presets { gap: 6px; }
  .rpt-custom-range { margin-left: 0; width: 100%; }

  /* ── CR segments ── */
  .cr-segment-card { min-width: 70px; padding: 10px 10px; }
  .cr-seg-count { font-size: 1.2rem; }

  /* ── Payroll amount ── */
  .payroll-amount { font-size: 1.8rem; }

  /* ── Upgrade modal strips ── */
  .upgrade-visitor-strip { flex-direction: column; gap: 10px; }
  .upgrade-plan-summary { flex-direction: column; gap: 6px; }

  /* ── Dashboard quick grid 2 col on landscape mobile ── */
  .dash-quick-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .dash-quick-card { padding: 12px 14px; }
  .dash-quick-title { font-size: 0.8rem; }
  .dash-quick-sub   { font-size: 0.68rem; }
  .dash-quick-icon  { width: 36px; height: 36px; font-size: 0.95rem; }

  /* ── Admin mobile card views: already active via 900px rule above ── */
  /* svc-grid: already forced 1-col by existing rule */

  /* ── Cards with inline flex columns — collapse at 600px ── */
  [style*="min-width:220px"], [style*="min-width: 220px"],
  [style*="min-width:200px"], [style*="min-width: 200px"],
  [style*="min-width:180px"], [style*="min-width: 180px"],
  [style*="min-width:160px"], [style*="min-width: 160px"] { min-width: 0 !important; width: 100% !important; flex-basis: 100% !important; }

  /* ── Inline-style grid panels (dashboard columns) ── */
  .card [style*="display:flex"], .card [style*="display: flex"] { flex-wrap: wrap !important; }

  /* ── All flex rows — prevent overflow ── */
  .flex { flex-wrap: wrap; }
  .card-header { flex-wrap: wrap; gap: 8px; }
  .card-header .btn { flex-shrink: 0; }

  /* ── Forms — full width inputs ── */
  .form-control, .form-control-sm, select.form-control { width: 100%; min-width: 0; box-sizing: border-box; }
  .form-row { gap: 10px; }
  .form-group { min-width: 0; }
  input[style*="min-width"], select[style*="min-width"] { min-width: 0 !important; width: 100% !important; }

  /* ── Alert banners — ensure inner content never overflows ── */
  .alert { flex-wrap: wrap; min-width: 0; }
  .alert > div[style*="min-width"] { min-width: 0 !important; flex: 1 1 0 !important; }

  /* ── Staff / Trainer pages — tighter at 600px ── */
  .tr-overdue-alert   { padding: 12px 14px; }
  .tr-overdue-title   { font-size: 0.88rem; }
  .tr-overdue-sub     { font-size: 0.74rem; }
  .tr-overdue-chip    { padding: 6px 10px; }
  .tr-chip-name       { font-size: 0.79rem; }

  /* ── Staff management card — full width, wrap badges ── */
  .admin-staff-card { width: 100%; max-width: 100%; box-sizing: border-box; }
  .admin-card-header { flex-wrap: wrap; gap: 8px; }
  .admin-card-name { min-width: 0; flex: 1 1 auto; overflow: hidden; }
  .admin-card-badges { flex-wrap: wrap; gap: 4px; flex-shrink: 0; max-width: 100%; }

  /* ── Settings — all inner widths constrained ── */
  .tab-panel { width: 100%; max-width: 100%; overflow-x: hidden; box-sizing: border-box; }
  .perm-role-block { padding: 12px 14px; }
  .perm-role-header { flex-wrap: wrap; gap: 6px; }
  .perm-grid { gap: 8px; }
  .perm-item { padding: 8px 0; gap: 10px; }
  .sq-radio-option { padding: 10px 12px; gap: 10px; }
  .sq-setting-row { padding: 12px 0; }

  /* Settings — inline selects go full-width */
  .sq-table-row select,
  .sq-table-row input,
  #pc-cutoff,
  #cb-slot-interval,
  #cb-min-advance,
  #cb-max-advance,
  #cb-max-future { width: 100% !important; max-width: 100% !important; box-sizing: border-box; }

  /* Settings — Stripe two-col panels stack */
  .stripe-connect-status .flex { flex-wrap: wrap; gap: 8px; }

  /* Settings — code blocks don't overflow */
  .tab-panel code { word-break: break-all; overflow-wrap: break-word; font-size: 0.72rem; }
  .tab-panel pre  { overflow-x: auto; max-width: 100%; }

  /* ── Visitor pages — nm-* ── */
  /* Dashboard grids → single column */
  .nm-service-cards { grid-template-columns: 1fr; }
  /* Upgrade CTA → stacked */
  .nm-upgrade-inner { flex-direction: column; align-items: flex-start; gap: 12px; }
  .nm-upgrade-rocket { font-size: 2.2rem; }
  .nm-upgrade-text { min-width: 0; width: 100%; }
  .nm-upgrade-actions { min-width: 0; width: 100%; }
  /* Booking layout → single column */
  .nm-cal-layout { grid-template-columns: 1fr; }
  .nm-dropin-cards { grid-template-columns: 1fr; }
  /* Service price badge — left-align */
  .nm-svc-price-badge { margin-left: 0; }
  /* Booking meta → row on landscape mobile (fits) */
  .nm-booking-meta { flex-direction: row; align-items: center; gap: 8px; }
  /* History: hide table, show mobile cards */
  .nm-hist-table-desktop { display: none; }
  .nm-hist-cards-mobile  { display: block; }
  /* Visitor svc card — shrink icon slightly */
  .nm-svc-card-icon { font-size: 1.5rem; }
  /* Drop-in plan: hide desktop layout, show mobile compact layout */
  .nm-dropin-desktop-only { display: none; }
  .nm-dropin-mobile-only  { display: block; }
  /* Drop-in upgrade CTA */
  .nm-dropin-upgrade-cta { padding: 20px 16px; }
  .nm-dropin-upgrade-btn { width: 100%; }
  /* Tab labels: hide full text, show short */
  .nm-tab-full  { display: none; }
  .nm-tab-short { display: inline; }
  /* Calendar hint: vertical arrow */
  .nm-slots-hint::before { content: '👆 '; }
  /* Cal layout — already 1 col, ensure calendar fills width */
  .nm-cal-grid-col { width: 100%; }
  .nm-cal-slots-col { margin-top: 16px; }

  /* ── Forms — all single column ── */
  .form-row   { grid-template-columns: 1fr !important; }
  .form-row-3 { grid-template-columns: 1fr !important; }
  .form-group { min-width: 0; }
  .form-control, .form-select, input, select, textarea {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  /* ── Topbar tightening ── */
  .topbar { padding: 0 10px; height: 54px; }
  .topbar-title { font-size: 0.82rem; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .topbar-right { gap: 4px; }
  .topbar-right .btn-ghost { padding: 5px 7px; }

  /* ── Override ALL inline min-width so nothing causes h-scroll ── */
  [style*="min-width"] { min-width: 0 !important; }
  [style*="max-width:480"] { max-width: 100% !important; }
  [style*="max-width:420"] { max-width: 100% !important; }

  /* ── Goal type buttons ── */
  .goal-type-btn { min-width: 0 !important; flex: 1 1 auto; }
  .goal-type-row { flex-wrap: wrap; gap: 6px; }

  /* ── Dashboard columns — stack vertically ── */
  .dash-col-wrap { flex-direction: column !important; }
  .dash-col { min-width: 0 !important; width: 100% !important; }

  /* ── PR comparison cards ── */
  .pr-compare-grid { flex-wrap: wrap; gap: 8px; }
  .pr-compare-card { flex: 1 1 calc(50% - 4px) !important; min-width: 0 !important; }

  /* ── Calendar booking/confirmation cards ── */
  .cal-confirm-card { max-width: 100% !important; width: 100% !important; }
  .cal-booking-card  { max-width: 100% !important; width: 100% !important; }

  /* ── Page header action buttons ── */
  .page-header-actions { display: flex; flex-wrap: wrap; gap: 6px; }
  .page-header-actions .btn { flex: 1 1 auto; justify-content: center; }
}

/* ══════════════════════════════════════════════
   480px — MOBILE PORTRAIT (most phones)
══════════════════════════════════════════════ */
@media (max-width: 480px) {

  /* ── Page ── */
  .page-content { padding: 10px; }
  .card { padding: 12px; }

  /* ── Stat grid — 2 col still, but smaller ── */
  .stat-grid { grid-template-columns: 1fr 1fr; gap: 7px; }
  .stat-card { padding: 10px 12px; }
  .stat-value { font-size: 1.35rem; }

  /* ── Full-width page header buttons ── */
  .page-header > div:last-child { display: flex; flex-wrap: wrap; }
  .page-header > div:last-child .btn { flex: 1 1 100%; justify-content: center; }

  /* ── Card header — stack on tiny screens ── */
  .card-header { flex-direction: column; align-items: flex-start; gap: 8px; }
  .card-header > div:last-child { width: 100%; display: flex; flex-wrap: wrap; gap: 6px; }

  /* ── Modals — sheet style from bottom ── */
  .modal-overlay { padding: 0; align-items: flex-end; }
  .modal {
    border-radius: 18px 18px 0 0;
    max-height: 94vh;
    max-width: 100%;
    padding: 20px 16px 28px;
  }
  .modal-lg { max-width: 100%; border-radius: 18px 18px 0 0; }
  /* Drag handle hint */
  .modal::before {
    content: '';
    display: block;
    width: 40px; height: 4px;
    background: rgba(255,255,255,0.2);
    border-radius: 2px;
    margin: -8px auto 16px;
  }

  /* ── Login ── */
  .login-box { padding: 16px 14px; border-radius: 12px; }
  .login-logo img { width: 100px; height: 100px; }
  .login-logo h1 { font-size: 1rem; }

  /* ── Topbar ── */
  .topbar { padding: 0 10px; height: 52px; gap: 6px; }
  .topbar-title { font-size: 0.84rem; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #topbar-user-name { display: none; }

  /* ── Tables ── */
  td, thead th { font-size: 0.77rem; padding: 8px 9px; }
  .table-wrap { border-radius: 10px; }

  /* ── Tabs ── */
  .tab-btn { padding: 7px 9px; font-size: 0.74rem; }

  /* ── Nav ── */
  .nav-section-label { display: none; }
  .nav-link { padding: 11px 12px; font-size: 0.875rem; }

  /* ── OTP ── */
  .otp-digit { width: 38px; height: 46px; font-size: 1.25rem; }

  /* ── Chat ── */
  .chat-wrap { height: 320px; }
  .chat-bubble { font-size: 0.82rem; padding: 8px 12px; }

  /* ── Goal ring ── */
  .goal-ring-svg-wrap { max-width: 120px; }
  .goal-ring-number   { font-size: 1.6rem; }

  /* ── Progress tracking page — portrait ── */
  .progress-stat-grid { grid-template-columns: 1fr 1fr; gap: 7px; }
  .inches-breakdown-grid { grid-template-columns: repeat(2, 1fr); gap: 7px; }
  .bf-two-col { grid-template-columns: 1fr; gap: 12px; }
  .bf-left-panel, .bf-right-panel { padding: 14px 10px; }
  .bf-chart-wrap { height: 140px; }
  .progress-chart-wrap { height: 180px; }
  .goal-breadcrumb { font-size: 0.7rem; gap: 3px; }
  /* Mobile measurement cards — tighter on portrait */
  .meas-cards-mobile { padding: 10px; }
  .meas-mobile-header { padding: 8px 12px; }
  .meas-mobile-cell { padding: 8px 12px; }
  .meas-mobile-val { font-size: 0.88rem; }

  /* ── Dashboard quick — 1 col on portrait ── */
  .dash-quick-grid { grid-template-columns: 1fr; }

  /* ── Admin mobile cards — portrait tightening ── */
  .admin-card-header { padding: 10px 12px 6px; }
  .admin-card-meta   { padding: 0 12px 6px; gap: 4px 10px; }
  .admin-card-row    { padding: 6px 12px; }
  .admin-card-actions { padding: 8px 12px; gap: 5px; }
  .admin-plan-price-item { padding: 8px 12px; }

  /* ── Staff / Trainer pages — portrait tightening ── */
  .tr-overdue-alert  { padding: 10px 12px; }
  .tr-overdue-title  { font-size: 0.84rem; }
  .tr-overdue-chip   { padding: 5px 9px; gap: 6px; width: 100%; }
  .tr-chips-row      { flex-direction: column; }
  /* tr-card-* rules removed — now uses admin-card-* classes */
  .tr-session-row    { padding: 9px 0; }
  .tr-client-row     { padding: 9px 0; }
  .tr-client-actions .btn { font-size: 0.78rem; padding: 5px 8px; }
  .tr-session-actions .btn { font-size: 0.78rem; padding: 5px 8px; }
  .tr-staff-avatar   { width: 30px; height: 30px; font-size: 0.82rem; }

  /* ── Staff management cards — portrait ── */
  .admin-staff-card .admin-card-header { flex-direction: row; flex-wrap: wrap; align-items: flex-start; }
  .admin-staff-card .admin-card-name { flex: 1 1 calc(100% - 90px); overflow: hidden; }
  .admin-staff-card .admin-card-name strong { font-size: 0.88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
  .admin-staff-card .admin-card-badges { flex-wrap: wrap; gap: 3px; justify-content: flex-end; max-width: 90px; }
  .admin-staff-card .admin-card-meta { font-size: 0.75rem; gap: 4px 8px; }
  .admin-staff-card .admin-card-meta .text-xs { font-size: 0.73rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }

  /* ── Settings tab — portrait ── */
  .perm-role-block { padding: 10px 12px; }
  .perm-item { flex-direction: row; flex-wrap: wrap; gap: 8px; align-items: flex-start; }
  .perm-item > div:first-child { flex: 1 1 calc(100% - 56px); }
  .perm-item .perm-switch { flex-shrink: 0; }
  .tab-panel code { font-size: 0.68rem; word-break: break-all; }
  .sq-settings-wrap { padding: 0; }
  /* Stripe flow diagram — horizontal scroll on small screens */
  [style*="display:flex;align-items:center;gap:0;flex-wrap:wrap;justify-content:center"] {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
  }

  /* ── Visitor pages — nm-* portrait ── */
  .nm-feature-card { padding: 14px; }
  .nm-upgrade-cta { padding: 14px; }
  .nm-upgrade-actions .btn { padding: 10px 14px; font-size: 0.875rem; }
  .nm-booking-row { padding: 12px 0; }
  .nm-booking-meta { flex-direction: column; align-items: flex-end; gap: 5px; }
  .nm-hist-card-top { padding: 8px 12px; }
  .nm-hist-card-body { padding: 8px 12px; }
  .nm-svc-banner-inner { gap: 8px; }
  .nm-svc-banner-icon { font-size: 1.4rem; }
  .nm-svc-price-badge { font-size: 0.85rem; padding: 4px 10px; }
  /* Visitor svc cards — stack icon above text on portrait */
  .nm-svc-card-inner { flex-direction: column; gap: 8px; }
  .nm-svc-card-icon { font-size: 1.6rem; }
  /* Drop-in mobile compact layout — tighter on portrait */
  .nm-dropin-mobile-emoji { font-size: 1.8rem; }
  .nm-dropin-mobile-price { font-size: 1.3rem; }
  /* Drop-in upgrade CTA */
  .nm-dropin-upgrade-cta { padding: 16px 12px; }
  .nm-dropin-upgrade-rocket { font-size: 1.8rem; }
  .nm-dropin-upgrade-heading { font-size: 1rem; }
  /* Service banner — wrap price badge below info */
  .nm-svc-banner-inner { flex-wrap: wrap; }
  .nm-svc-price-badge { width: 100%; text-align: center; margin-top: 6px; }

  /* ── Hist stats — horizontal scroll if needed ── */
  .hist-stat-row { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
  .hist-stat { flex-shrink: 0; }

  /* ── Payroll summary ── */
  .payroll-amount { font-size: 1.6rem; }
  .payroll-summary { padding: 14px; }

  /* ── Services summary — stack ── */
  .svc-summary-row { grid-template-columns: 1fr 1fr !important; gap: 8px; }

  /* ── Reports KPI — 2 col ── */
  .rpt-kpi-row  { grid-template-columns: 1fr 1fr; gap: 8px; }
  .rpt-cmp-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .rpt-kpi-val  { font-size: 1.3rem; }

  /* ── CR segments scroll ── */
  .cr-segment-row { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
  .cr-segment-card { flex-shrink: 0; min-width: 72px; }

  /* ── Calendar ── */
  .cal-toolbar { flex-direction: column; align-items: stretch; gap: 6px; }
  .cal-toolbar-left, .cal-toolbar-right { justify-content: center; flex-wrap: wrap; }
  .cal-period-title { font-size: 0.88rem; }
  /* Booking/confirmation cards — full width, no fixed max-width */
  [style*="max-width:480px"], [style*="max-width: 480px"],
  [style*="max-width:420px"], [style*="max-width: 420px"] { max-width: 100% !important; width: 100% !important; box-sizing: border-box; }

  /* ── Time slots — 2 col ── */
  .time-slots-grid { grid-template-columns: 1fr 1fr; gap: 7px; }
  .time-slot { font-size: 0.8rem; padding: 9px 8px; }

  /* ── Perm modal items ── */
  .perm-item { gap: 10px; }
  .indperm-overridden { padding: 6px 4px; }

  /* ── Booking window ── */
  .bw-settings-header { flex-direction: column; gap: 10px; }
  .bw-settings-header > div:first-child { width: 100%; }
  .bw-live-badge { white-space: normal; font-size: 0.74rem; }
  .bw-body { padding: 0 14px 8px; }
  .bw-role-row { flex-direction: column; align-items: stretch; gap: 8px; }
  .bw-role-select-wrap { width: 100% !important; }
  .bw-role-info { min-width: 0; width: 100%; }
  .bw-plan-row { flex-direction: column; align-items: stretch; gap: 8px; }
  .bw-plan-control { width: 100% !important; }
  .bw-plan-name { width: 100%; }
  .bw-section-label { flex-wrap: wrap; font-size: 0.76rem; }
  #bw-cancel-cutoff { width: 100% !important; max-width: 100% !important; }

  /* ── Inline grids with style attrs ── */
  .card [style*="grid-template-columns:1fr 1fr"] { grid-template-columns: 1fr !important; }
  .card [style*="minmax(130px"]                  { grid-template-columns: repeat(2, 1fr) !important; }

  /* ── Override ALL inline min-width/max-width ── */
  [style*="min-width"] { min-width: 0 !important; }
  [style*="max-width:480"] { max-width: 100% !important; }
  [style*="max-width:420"] { max-width: 100% !important; }

  /* ── Booking window two-col inside card: force 1 col ── */
  .bw-section-body .two-col { grid-template-columns: 1fr !important; gap: 12px; }
  .bw-section-body .two-col > div { width: 100%; min-width: 0; box-sizing: border-box; }

  /* ── Forms — strict single column ── */
  .form-control, .form-select, input[type="text"],
  input[type="email"], input[type="password"], input[type="number"],
  input[type="date"], input[type="time"], textarea, select {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box;
  }
  .form-row   { grid-template-columns: 1fr !important; gap: 8px; }
  .form-row-3 { grid-template-columns: 1fr !important; gap: 8px; }
  .form-group { min-width: 0 !important; }
  .form-row-inline { flex-wrap: wrap !important; gap: 8px !important; }
  .form-row-inline > * { min-width: 0 !important; flex: 1 1 auto !important; }

  /* ── Dashboard columns: single column ── */
  .dash-col-wrap { flex-direction: column !important; gap: 10px !important; }
  .dash-col { width: 100% !important; min-width: 0 !important; max-width: 100% !important; }

  /* ── PR comparison cards — 2-up ── */
  .pr-compare-grid { flex-wrap: wrap !important; gap: 8px; }
  .pr-compare-card { flex: 1 1 calc(50% - 4px) !important; min-width: 0 !important; max-width: calc(50% - 4px) !important; }

  /* ── Calendar booking/confirmation cards full-width ── */
  .cal-confirm-card, .cal-booking-card { max-width: 100% !important; width: 100% !important; min-width: 0 !important; }

  /* ── Goal type buttons — wrap ── */
  .goal-type-btn { flex: 1 1 auto !important; min-width: 0 !important; }
  .goal-type-row { flex-wrap: wrap !important; gap: 6px; }

  /* ── Admin dashboard alert sections ── */
  .admin-alert-section { min-width: 0 !important; flex: 1 1 100% !important; }

  /* ── Services/fitness modal fields ── */
  .fitness-modal-field { min-width: 0 !important; flex: 1 1 100% !important; }
  .svc-edit-row { flex-wrap: wrap !important; }
  .svc-edit-row > * { min-width: 0 !important; width: auto !important; }

  /* ── History search inputs ── */
  .hist-search-input { width: 100% !important; min-width: 0 !important; }
}

/* ══════════════════════════════════════════════
   360px — SMALL PHONES (Galaxy S8, iPhone SE)
══════════════════════════════════════════════ */
@media (max-width: 360px) {

  /* ── Even tighter spacing ── */
  .page-content { padding: 8px; }
  .card { padding: 10px; }

  /* ── Stat grid — 1 col for tiny screens ── */
  .stat-grid { grid-template-columns: 1fr 1fr; gap: 6px; }
  .stat-value { font-size: 1.2rem; }

  /* ── Tables ── */
  td, thead th { font-size: 0.72rem; padding: 7px 8px; }

  /* ── Buttons ── */
  .btn    { padding: 8px 12px; font-size: 0.8rem; }
  .btn-sm { padding: 5px 8px;  font-size: 0.72rem; }

  /* ── Topbar ── */
  .topbar { padding: 0 8px; }
  .topbar-title { max-width: 120px; font-size: 0.8rem; }
  .credit-pill { padding: 3px 7px; font-size: 0.68rem; }

  /* ── OTP ── */
  .otp-digit { width: 34px; height: 42px; font-size: 1.1rem; }

  /* ── Modal ── */
  .modal { padding: 16px 12px 24px; }

  /* ── Tabs ── */
  .tab-btn { padding: 6px 8px; font-size: 0.7rem; }

  /* ── Time slots — 2 col tight ── */
  .time-slot { font-size: 0.75rem; padding: 8px 6px; }

  /* ── Login ── */
  .login-box { padding: 14px 12px; }

  /* ── Progress page — tiny phones ── */
  .inches-breakdown-grid { grid-template-columns: 1fr 1fr; gap: 6px; }
  .bf-left-panel, .bf-right-panel { padding: 12px 8px; }
  .bf-chart-wrap { height: 120px; }
  .progress-chart-wrap { height: 160px; }
  .meas-mobile-cell { padding: 7px 10px; }
  .meas-mobile-val { font-size: 0.82rem; }

  /* ── Visitor pages — nm-* tiny phones ── */
  .nm-upgrade-rocket { font-size: 1.8rem; }
  .nm-hist-card-top { font-size: 0.76rem; }
  .nm-hist-card-body { font-size: 0.8rem; }
  .nm-not-included-grid { grid-template-columns: 1fr 1fr; }
  .nm-dropin-plan-price { font-size: 1.5rem; }
  .nm-dropin-plan-emoji { font-size: 1.8rem; }
  .nm-dropin-upgrade-cta { padding: 12px 10px; }

  /* ── Stat grid — 2 col, tighter ── */
  .stat-grid { grid-template-columns: 1fr 1fr; gap: 5px; }
  .stat-card { padding: 9px 10px; }

  /* ── All inline min-width ── */
  [style*="min-width"] { min-width: 0 !important; }
  [style*="max-width:480"] { max-width: 100% !important; }
  [style*="max-width:420"] { max-width: 100% !important; }

  /* ── Dashboard columns: single column ── */
  .dash-col-wrap { flex-direction: column !important; gap: 8px !important; }
  .dash-col { width: 100% !important; min-width: 0 !important; }

  /* ── Admin mobile cards — tighter at 360px ── */
  .admin-card-header  { padding: 8px 10px 5px; }
  .admin-card-meta    { padding: 0 10px 5px; gap: 3px 8px; }
  .admin-card-row     { padding: 5px 10px; }
  .admin-card-actions { padding: 6px 10px; gap: 4px; }
  .admin-card-name    { font-size: 0.88rem; }

  /* ── PR compare — 2 col at 360 ── */
  .pr-compare-card { flex: 1 1 calc(50% - 4px) !important; max-width: calc(50% - 4px) !important; }

  /* ── Goal buttons — 2 col ── */
  .goal-type-btn  { flex: 1 1 calc(50% - 4px) !important; min-width: 0 !important; }
  .goal-type-row  { flex-wrap: wrap !important; gap: 5px; }

  /* ── Payroll ── */
  .payroll-amount { font-size: 1.4rem; }
  .payroll-summary { padding: 12px; }

  /* ── Overdue chips — stack at 360 ── */
  .tr-chips-row { flex-direction: column; gap: 5px; }
  .tr-overdue-chip { width: 100%; }

  /* ── flex containers ── */
  .flex { flex-wrap: wrap; }
  .card-header { flex-wrap: wrap; gap: 6px; }

  /* ── Staff cards — 360px ── */
  .admin-staff-card .admin-card-header { flex-direction: column; align-items: flex-start; gap: 6px; }
  .admin-staff-card .admin-card-name { flex: 1 1 100%; max-width: 100%; }
  .admin-staff-card .admin-card-badges { flex-wrap: wrap; gap: 3px; max-width: 100%; justify-content: flex-start; }
  .admin-staff-card .admin-card-meta .text-xs { font-size: 0.7rem; }

  /* ── Settings — 360px tightest ── */
  .perm-role-block { padding: 8px 10px; }
  .perm-item > div:first-child { font-size: 0.82rem; }
  .perm-item > div:first-child .text-xs { font-size: 0.7rem; }
  .perm-role-header { font-size: 0.85rem; }
  .sq-radio-option { padding: 8px 10px; }
  .tab-panel .card { padding: 10px; }
  .tab-panel code { font-size: 0.64rem; }
}

/* ══════════════════════════════════════════════
   320px — VERY SMALL PHONES (iPhone SE 1st gen, Galaxy Fold closed)
══════════════════════════════════════════════ */
@media (max-width: 320px) {

  /* ── Maximum spacing reduction ── */
  .page-content { padding: 6px; }
  .card { padding: 8px; border-radius: 10px; }
  .modal { padding: 14px 10px 20px; }

  /* ── Typography ── */
  h1 { font-size: 1.1rem; }
  h2 { font-size: 1rem; }
  h3 { font-size: 0.9rem; }
  .page-title { font-size: 0.95rem; }

  /* ── Buttons ── */
  .btn    { padding: 7px 10px; font-size: 0.76rem; min-height: 36px; }
  .btn-sm { padding: 4px 7px;  font-size: 0.68rem; }
  .btn-xs { padding: 3px 6px;  font-size: 0.65rem; }

  /* ── Topbar ── */
  .topbar { padding: 0 6px; height: 48px; }
  .topbar-title { max-width: 100px; font-size: 0.75rem; }
  .credit-pill  { display: none; }

  /* ── Stat grid — 1 col on tiny phones ── */
  .stat-grid { grid-template-columns: 1fr; gap: 5px; }
  .stat-card  { padding: 8px 10px; }
  .stat-value { font-size: 1.1rem; }
  .stat-label { font-size: 0.65rem; }

  /* ── Tables ── */
  td, thead th { font-size: 0.68rem; padding: 6px 7px; }

  /* ── Tabs ── */
  .tab-btn { padding: 5px 7px; font-size: 0.65rem; }

  /* ── OTP ── */
  .otp-digit { width: 30px; height: 38px; font-size: 1rem; }

  /* ── Login ── */
  .login-box { padding: 12px 10px; }
  .login-logo img { width: 80px; height: 80px; }

  /* ── Admin cards ── */
  .admin-card-header  { padding: 7px 9px 4px; }
  .admin-card-meta    { padding: 0 9px 4px; gap: 3px; }
  .admin-card-row     { padding: 4px 9px; }
  .admin-card-actions { padding: 5px 9px; gap: 3px; }
  .admin-card-name    { font-size: 0.82rem; }

  /* ── PR cards — stack to single column ── */
  .pr-compare-card { flex: 1 1 100% !important; max-width: 100% !important; }
  .pr-compare-grid { gap: 6px; }

  /* ── Goal buttons — single column ── */
  .goal-type-btn { flex: 1 1 100% !important; }
  .goal-type-row { flex-direction: column; gap: 4px; }

  /* ── All inline min-width ── */
  [style*="min-width"] { min-width: 0 !important; }
  [style*="max-width:480"] { max-width: 100% !important; }
  [style*="max-width:420"] { max-width: 100% !important; }

  /* ── Dashboard columns ── */
  .dash-col-wrap { flex-direction: column !important; gap: 6px !important; }
  .dash-col      { width: 100% !important; min-width: 0 !important; }

  /* ── Dash quick grid ── */
  .dash-quick-grid { grid-template-columns: 1fr; }

  /* ── Progress stat grid — 1 col ── */
  .progress-stat-grid { grid-template-columns: 1fr; }
  .inches-breakdown-grid { grid-template-columns: 1fr 1fr; gap: 5px; }

  /* ── Chat ── */
  .chat-wrap { height: 280px; }
  .chat-bubble { font-size: 0.78rem; padding: 7px 10px; }

  /* ── Overdue chips ── */
  .tr-chips-row { flex-direction: column; gap: 4px; }
  .tr-overdue-chip { width: 100%; }

  /* ── Form inputs ── */
  .form-control, .form-select, input, select, textarea {
    font-size: 0.82rem;
    padding: 7px 9px;
  }

  /* ── Visitors nm-* ── */
  .nm-upgrade-rocket { font-size: 1.5rem; }
  .nm-dropin-plan-price { font-size: 1.3rem; }
  .nm-dropin-upgrade-cta { padding: 10px 8px; }
}

/* ── Utilities ────────────────────────────────── */
.flex { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-1 { gap: 5px; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
.gap-4 { gap: 16px; }
.mt-2 { margin-top: 8px; }
.mt-3 { margin-top: 12px; }
.mt-4 { margin-top: 16px; }
.mb-2 { margin-bottom: 8px; }
.mb-3 { margin-bottom: 12px; }
.mb-4 { margin-bottom: 16px; }
.text-sm { font-size: 0.85rem; }
.text-xs { font-size: 0.75rem; }
.text-red { color: var(--red-light); }
.text-green { color: var(--success); }
.text-muted { color: rgba(255,255,255,0.75); }
.text-center { text-align: center; }
.fw-bold { font-weight: 700; }
.hidden { display: none !important; }
.w-full { width: 100%; }
.rounded { border-radius: var(--radius); }
.divider { height: 1px; background: var(--border); margin: 12px 0; }

/* ── SVG Logo embedded ────────────────────────── */
.logo-svg-sm { width: 36px; height: 36px; }
.logo-svg-md { width: 60px; height: 60px; }
.logo-svg-lg { width: 100px; height: 100px; }

/* ══════════════════════════════════════════════
   PASSWORD STRENGTH METER
══════════════════════════════════════════════ */
.pw-strength-wrap { margin-top: 6px; }
.pw-strength-bars { display: flex; gap: 4px; margin-bottom: 4px; }
.pw-bar {
  flex: 1; height: 4px; border-radius: 2px;
  background: var(--black-5);
  transition: background 0.3s ease;
}
.pw-bar.weak   { background: var(--danger); }
.pw-bar.fair   { background: var(--warning); }
.pw-bar.good   { background: var(--info); }
.pw-bar.strong { background: var(--success); }
.pw-label { font-size: 0.72rem; font-weight: 600; }
.pw-label.weak   { color: var(--danger); }
.pw-label.fair   { color: var(--warning); }
.pw-label.good   { color: var(--info); }
.pw-label.strong { color: var(--success); }
.pw-rules { margin-top: 6px; display: flex; flex-direction: column; gap: 2px; }
.pw-rule { font-size: 0.72rem; display: flex; align-items: center; gap: 5px; color: rgba(255,255,255,0.58); transition: color 0.2s; }
.pw-rule.pass { color: var(--success); }
.pw-rule i { font-size: 0.65rem; }

/* ── Password visibility toggle ─────────────── */
.pw-input-wrap { position: relative; }
.pw-input-wrap .form-control { padding-right: 42px; }
.pw-toggle {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: rgba(255,255,255,0.58); cursor: pointer;
  font-size: 0.9rem; padding: 2px;
  transition: color var(--transition);
}
.pw-toggle:hover { color: rgba(255,255,255,0.90); }

/* ══════════════════════════════════════════════
   OTP / VERIFY CODE INPUT
══════════════════════════════════════════════ */
.otp-wrap { display: flex; gap: 8px; justify-content: center; margin: 16px 0; }
.otp-digit {
  width: 48px; height: 56px;
  text-align: center;
  font-size: 1.5rem;
  font-weight: 800;
  background: var(--black-3);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  color: var(--white);
  font-family: var(--font);
  transition: border-color 0.2s;
  caret-color: var(--red);
}
.otp-digit:focus { outline: none; border-color: var(--red); }
.otp-digit.filled { border-color: rgba(200,16,46,0.5); }

/* ── Email verify banner ─────────────────────── */
.verify-banner {
  display: flex; align-items: center; gap: 10px;
  background: rgba(245,158,11,0.10);
  border: 1px solid rgba(245,158,11,0.35);
  border-radius: var(--radius);
  padding: 10px 14px;
  font-size: 0.82rem;
  color: var(--warning);
  margin-bottom: 16px;
}
.verify-banner a { color: var(--warning); text-decoration: underline; cursor: pointer; }

/* ── Simulated email preview box ─────────────── */
.email-preview {
  background: var(--black-3);
  border: 1px dashed rgba(200,16,46,0.4);
  border-radius: var(--radius);
  padding: 16px;
  margin: 12px 0;
  font-size: 0.82rem;
}
.email-preview-header { font-weight: 700; color: var(--white-80); margin-bottom: 8px; border-bottom: 1px solid var(--border); padding-bottom: 8px; }
.email-preview-to { color: rgba(255,255,255,0.78); font-size: 0.75rem; margin-bottom: 6px; }
.email-preview-code {
  font-size: 2.2rem; font-weight: 900;
  letter-spacing: 10px; color: var(--red-light);
  text-align: center; margin: 12px 0;
  background: var(--black-4); border-radius: 8px; padding: 10px;
}
.email-preview-note { font-size: 0.72rem; color: rgba(255,255,255,0.60); margin-top: 8px; }
.email-preview-tag {
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(200,16,46,0.15); border: 1px solid rgba(200,16,46,0.3);
  border-radius: 4px; padding: 2px 8px; font-size: 0.7rem;
  color: var(--red-light); font-weight: 700; margin-bottom: 8px;
}

/* ── Account settings page ───────────────────── */
.account-section {
  background: var(--black-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  margin-bottom: 16px;
}
.account-section-title {
  font-size: 1rem; font-weight: 700;
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 16px; padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.verified-badge {
  display: inline-flex; align-items: center; gap: 4px;
  background: rgba(34,197,94,0.12); border: 1px solid rgba(34,197,94,0.3);
  color: var(--success); border-radius: 20px;
  font-size: 0.72rem; font-weight: 700; padding: 2px 8px;
}
.unverified-badge {
  display: inline-flex; align-items: center; gap: 4px;
  background: rgba(245,158,11,0.12); border: 1px solid rgba(245,158,11,0.3);
  color: var(--warning); border-radius: 20px;
  font-size: 0.72rem; font-weight: 700; padding: 2px 8px;
}

/* ══════════════════════════════════════════════
   STRIPE CHECKOUT ENHANCED
══════════════════════════════════════════════ */
.stripe-checkout { }

.checkout-order-summary {
  background: var(--black-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
}
.checkout-summary-title {
  font-weight: 700; font-size: 0.85rem;
  color: var(--white-80); margin-bottom: 10px;
  display: flex; align-items: center; gap: 6px;
}
.checkout-total {
  display: flex; justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--border);
  padding-top: 10px; margin-top: 8px;
  font-weight: 700;
}
.checkout-card-section {
  background: var(--black-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 12px;
}
.checkout-card-header {
  font-weight: 700; font-size: 0.85rem; color: var(--white-80);
  margin-bottom: 12px; display: flex; align-items: center; gap: 6px;
}
.stripe-card-wrap { position: relative; }
.stripe-card-wrap .form-control { padding-right: 42px; }
.card-brand-icon {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  font-size: 1.2rem;
}
.stripe-secure {
  display: flex; align-items: center; gap: 6px;
  font-size: 0.72rem; color: rgba(255,255,255,0.72);
  background: var(--black-4); padding: 10px 14px;
  border-radius: var(--radius); margin-top: 12px;
}

/* ══════════════════════════════════════════════
   CHALLENGE CARDS
══════════════════════════════════════════════ */
.challenge-card {
  background: linear-gradient(135deg, rgba(245,158,11,0.12), rgba(245,158,11,0.04));
  border: 1px solid rgba(245,158,11,0.3);
  border-radius: var(--radius-lg);
  padding: 20px;
  transition: border-color var(--transition), transform var(--transition);
}
.challenge-card:hover { border-color: rgba(245,158,11,0.5); transform: translateY(-2px); }
.challenge-card-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; }
.challenge-title { font-size: 1.1rem; font-weight: 700; }
.challenge-meta {
  display: flex; flex-wrap: wrap; gap: 12px;
  font-size: 0.8rem; color: rgba(255,255,255,0.82);
  background: var(--black-4); border-radius: var(--radius);
  padding: 8px 12px;
}
.challenge-meta span { display: flex; align-items: center; gap: 5px; }

/* ── Leaderboard row highlights ──────────────── */
.leaderboard-top-1 { background: rgba(255,215,0,0.08); }
.leaderboard-top-2 { background: rgba(192,192,192,0.06); }
.leaderboard-top-3 { background: rgba(205,127,50,0.06); }

/* ══════════════════════════════════════════════
   PAYROLL ENHANCED
══════════════════════════════════════════════ */
.payroll-summary {
  background: linear-gradient(135deg, rgba(34,197,94,0.08), rgba(34,197,94,0.03));
  border: 1px solid rgba(34,197,94,0.25);
  border-radius: var(--radius-lg);
  padding: 20px;
}
.payroll-amount { font-size: 1.8rem; font-weight: 800; color: var(--success); }

/* ══════════════════════════════════════════════
   SEMI-PRIVATE SESSION BADGE
══════════════════════════════════════════════ */
.badge-blue { background: rgba(59,130,246,0.2); color: #60a5fa; border: 1px solid rgba(59,130,246,0.35); }
.badge-yellow { background: rgba(245,158,11,0.2); color: #fbbf24; border: 1px solid rgba(245,158,11,0.35); }
.semi-private-banner {
  background: linear-gradient(135deg, rgba(59,130,246,0.15), rgba(59,130,246,0.05));
  border: 1px solid rgba(59,130,246,0.3);
  border-radius: var(--radius);
  padding: 12px 16px;
  display: flex; align-items: center; gap: 10px;
  font-size: 0.85rem; margin-bottom: 16px;
}
.semi-private-banner i { color: #60a5fa; font-size: 1.1rem; }

/* ══════════════════════════════════════════════
   ADMIN CREDENTIAL SECTION
══════════════════════════════════════════════ */
.credential-section {
  background: var(--black-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
  margin-bottom: 16px;
  transition: border-color var(--transition);
}
.credential-section:hover { border-color: rgba(200,16,46,0.3); }

/* ══════════════════════════════════════════════
   CONSULTATION / NON-MEMBER CARD
══════════════════════════════════════════════ */
.card-red-border {
  border-color: rgba(200,16,46,0.4) !important;
  background: linear-gradient(135deg, rgba(200,16,46,0.08), transparent) !important;
}
.consult-selected { border-color: var(--red) !important; box-shadow: 0 0 0 2px rgba(200,16,46,0.3); }

/* ══════════════════════════════════════════════
   PAYROLL HISTORY TABLE
══════════════════════════════════════════════ */
.payroll-history-row:hover { background: var(--black-4); }
.payroll-stat-row {
  display: flex; gap: 20px; flex-wrap: wrap;
  padding: 12px; background: var(--black-3);
  border-radius: var(--radius); margin-bottom: 16px;
}
.payroll-stat-item { display: flex; flex-direction: column; gap: 2px; }
.payroll-stat-label { font-size: 0.72rem; color: rgba(255,255,255,0.82); font-weight: 600; }
.payroll-stat-value { font-size: 1rem; font-weight: 700; }

/* ══════════════════════════════════════════════
   SCHEDULE SESSION MODAL ENHANCEMENTS
══════════════════════════════════════════════ */
.session-type-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: 20px;
  font-size: 0.75rem; font-weight: 700;
}
.session-type-personal   { background: rgba(200,16,46,0.15); color: var(--red-light); border: 1px solid rgba(200,16,46,0.3); }
.session-type-semi       { background: rgba(59,130,246,0.15); color: #60a5fa; border: 1px solid rgba(59,130,246,0.3); }
.session-type-consult    { background: rgba(245,158,11,0.15); color: #fbbf24; border: 1px solid rgba(245,158,11,0.3); }

/* ══════════════════════════════════════════════
   PROMO CODE HIGHLIGHT
══════════════════════════════════════════════ */
.promo-applied-banner {
  background: rgba(34,197,94,0.10);
  border: 1px solid rgba(34,197,94,0.3);
  border-radius: var(--radius);
  padding: 8px 12px;
  font-size: 0.82rem;
  color: var(--success);
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 12px;
}

/* ══════════════════════════════════════════════
   TABS ENHANCED (payroll, promotions)
══════════════════════════════════════════════ */
.tabs { display: flex; gap: 4px; background: var(--black-3); border-radius: var(--radius); padding: 4px; margin-bottom: 16px; flex-wrap: wrap; }
.tab-btn { flex: 1; min-width: max-content; padding: 8px 14px; background: transparent; border: none; color: var(--white-60); font-size: 0.82rem; font-weight: 600; border-radius: 8px; cursor: pointer; transition: var(--transition); font-family: var(--font); white-space: nowrap; }
.tab-btn:hover { color: var(--white-80); background: var(--black-4); }
.tab-btn.active { background: var(--black-5); color: var(--white); }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* ── Responsive additions ─────────────────────── */
@media (max-width: 900px) {
  /* tabs: horizontal scroll on tablet — no wrapping, scroll instead */
  .tabs { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
  .tab-btn { flex: 0 0 auto; }
}

/* ══════════════════════════════════════════════
   CALENDAR — MULTI-VIEW TOOLBAR
══════════════════════════════════════════════ */
.cal-toolbar {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 8px;
  padding: 12px 4px 16px;
}
.cal-toolbar-left  { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cal-toolbar-right { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.cal-period-title  { font-size: 1rem; font-weight: 700; margin-left: 4px; white-space: nowrap; }
.cal-nav-btn   { padding: 6px 10px !important; }
.cal-today-btn { padding: 6px 12px !important; font-size: 0.8rem !important; }
.cal-view-btn  { padding: 6px 12px !important; font-size: 0.8rem !important; }

/* ── Month view enhancements ──────────────── */
.cal-month-wrap { overflow-x: auto; }
.cal-day { position: relative; }
.cal-day-num { font-size: 0.85rem; font-weight: 600; display: block; }
.cal-dots { display: flex; gap: 3px; justify-content: center; margin-top: 2px; }
.cal-dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
.dot-confirmed { background: var(--success); }
.dot-pending   { background: var(--warning); }
.dot-waitlist  { background: var(--info); }
.dot-completed { background: var(--white-30); }
.cal-count-badge {
  position: absolute; top: 3px; right: 3px;
  background: var(--red); color: var(--white);
  font-size: 0.6rem; font-weight: 800;
  padding: 1px 4px; border-radius: 8px;
  line-height: 1.4;
}

/* ── Week view ─────────────────────────────── */
.cal-week-wrap { overflow-x: auto; }
.cal-week-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.cal-week-table th, .cal-week-table td { border: 1px solid var(--border); }
.cal-week-time {
  width: 52px; min-width: 52px;
  font-size: 0.68rem; color: var(--white-60);
  padding: 4px 6px; text-align: right;
  vertical-align: top; white-space: nowrap;
}
.cal-week-header {
  text-align: center; padding: 8px 4px;
  font-size: 0.78rem; font-weight: 600;
  background: var(--black-3);
}
.cal-week-header.today { background: rgba(200,16,46,0.15); color: var(--white); }
.cal-week-day-name { font-size: 0.7rem; color: var(--white-60); }
.cal-week-day-num { font-size: 0.9rem; font-weight: 700; }
.cal-week-day-num.today-num {
  background: var(--red); color: var(--white);
  width: 26px; height: 26px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
}
.cal-week-cell {
  padding: 2px; vertical-align: top;
  min-height: 52px; cursor: pointer;
}
.cal-week-cell:hover  { background: var(--black-4); }
.cal-week-cell.today-col { background: rgba(200,16,46,0.05); }
.cal-week-event {
  background: var(--black-4); border-left: 3px solid var(--red);
  border-radius: 4px; padding: 3px 5px;
  font-size: 0.72rem; margin-bottom: 2px;
  cursor: pointer; overflow: hidden;
  transition: background var(--transition);
}
.cal-week-event:hover { background: var(--black-5); }
.cal-week-event.status-confirmed  { border-left-color: var(--success); }
.cal-week-event.status-completed  { border-left-color: var(--white-30); opacity: 0.7; }
.cal-week-event.status-pending    { border-left-color: var(--warning); }
.cal-week-event.status-waitlist   { border-left-color: var(--info); }
.cal-week-event.status-cancelled  { border-left-color: var(--danger); opacity: 0.5; }
.cal-week-event.status-no_show    { border-left-color: var(--warning); opacity: 0.6; }
.cal-week-event-time   { font-size: 0.65rem; color: var(--white-60); }
.cal-week-event-name   { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-week-event-trainer{ font-size: 0.65rem; color: var(--white-60); }

/* ── Day view ──────────────────────────────── */
.cal-day-wrap { }
.cal-day-header {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.95rem; font-weight: 700;
  padding: 12px 0 16px; border-bottom: 1px solid var(--border);
  margin-bottom: 12px;
}
.cal-day-header.today { color: var(--white); }
.cal-day-body { }
.cal-day-row {
  display: flex; gap: 12px;
  padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,0.05);
  min-height: 52px; align-items: flex-start;
}
.cal-day-row.current-hour { background: rgba(200,16,46,0.06); border-radius: var(--radius); }
.cal-day-time {
  width: 68px; min-width: 68px; font-size: 0.72rem;
  color: var(--white-60); padding-top: 6px; text-align: right;
  flex-shrink: 0;
}
.cal-day-slots { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.cal-day-event {
  background: var(--black-3); border-left: 4px solid var(--red);
  border-radius: var(--radius); padding: 10px 14px;
  cursor: pointer; transition: background var(--transition);
}
.cal-day-event:hover { background: var(--black-4); }
.cal-day-event.status-confirmed  { border-left-color: var(--success); }
.cal-day-event.status-completed  { border-left-color: var(--white-30); opacity: 0.8; }
.cal-day-event.status-pending    { border-left-color: var(--warning); }
.cal-day-event.status-waitlist   { border-left-color: var(--info); }
.cal-day-event.status-cancelled  { border-left-color: var(--danger); opacity: 0.5; }
.cal-day-event-header {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 8px;
}

/* ══════════════════════════════════════════════
   SCHEDULE COMPARISON
══════════════════════════════════════════════ */
.compare-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 900px) {
  .compare-grid { grid-template-columns: 1fr; }
}
.compare-col { }
.compare-col-header {
  font-size: 0.9rem; font-weight: 700;
  padding: 10px 12px; background: var(--black-3);
  border-radius: var(--radius) var(--radius) 0 0;
  border: 1px solid var(--border);
  display: flex; align-items: center; gap: 8px;
}
.compare-table { font-size: 0.72rem; }
.compare-table td, .compare-table th { padding: 3px !important; }

/* ══════════════════════════════════════════════
   PERMISSIONS SYSTEM
══════════════════════════════════════════════ */
.perm-role-block {
  background: var(--black-3); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 16px 20px;
  width: 100%; box-sizing: border-box; overflow: hidden;
}
.perm-role-header {
  font-size: 0.95rem; font-weight: 700;
  display: flex; align-items: center; gap: 10px;
}
.perm-grid { display: flex; flex-direction: column; gap: 10px; }
.perm-item {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,0.06);
  flex-wrap: wrap;
}
.perm-item > div:first-child {
  flex: 1; min-width: 0; word-break: break-word;
}
.perm-item .perm-switch { flex-shrink: 0; align-self: flex-start; margin-top: 2px; }
.perm-item:last-child { border-bottom: none; }

/* Toggle switch */
.perm-switch { position: relative; display: inline-block; width: 40px; height: 22px; flex-shrink: 0; }
.perm-switch input { opacity: 0; width: 0; height: 0; }
.perm-slider {
  position: absolute; cursor: pointer; inset: 0;
  background: var(--black-5); border-radius: 22px;
  transition: .3s;
}
.perm-slider:before {
  content: ''; position: absolute;
  width: 16px; height: 16px; left: 3px; top: 3px;
  background: var(--white-60); border-radius: 50%;
  transition: .3s;
}
.perm-switch input:checked + .perm-slider { background: var(--success); }
.perm-switch input:checked + .perm-slider:before { transform: translateX(18px); background: var(--white); }

/* ══════════════════════════════════════════════
   UPGRADE VISITOR → MEMBER MODAL
══════════════════════════════════════════════ */
.upgrade-visitor-strip {
  display: flex; align-items: center; gap: 14px;
  background: var(--black-3); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 14px 16px;
  margin-bottom: 18px;
}
.upgrade-visitor-avatar {
  width: 44px; height: 44px; border-radius: 50%;
  background: linear-gradient(135deg, var(--red), #ff4d6d);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; font-weight: 800; color: #fff;
  flex-shrink: 0;
}
.upgrade-sections { display: flex; flex-direction: column; gap: 0; }
.upgrade-section {
  padding: 16px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.upgrade-section:last-child { border-bottom: none; }
.upgrade-section-title {
  font-size: 0.8rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--white-60);
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 12px;
}
.upgrade-section-title i { color: var(--red-light); }
.upgrade-plan-summary {
  display: flex; flex-wrap: wrap; gap: 12px;
  background: rgba(200,16,46,0.07); border: 1px solid rgba(200,16,46,0.2);
  border-radius: var(--radius); padding: 10px 14px;
  font-size: 0.8rem; color: var(--white-60); margin-top: 8px;
}
.upgrade-plan-summary span { display: flex; align-items: center; gap: 5px; }
.upgrade-plan-summary i { color: var(--red-light); }

/* ══════════════════════════════════════════════
   CONSULTATION PRICING BANNER
══════════════════════════════════════════════ */
.consult-pricing-banner {
  border-radius: var(--radius-lg);
  padding: 14px 18px;
  margin-bottom: 18px;
  border: 1px solid var(--border);
}
.consult-banner-free {
  background: rgba(34,197,94,0.07);
  border-color: rgba(34,197,94,0.25);
}
.consult-banner-paid {
  background: rgba(200,16,46,0.07);
  border-color: rgba(200,16,46,0.25);
}

/* ══════════════════════════════════════════════
   STRIPE CONNECT SETTINGS
══════════════════════════════════════════════ */
.stripe-connect-status {
  background: var(--black-3); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 12px 16px;
}

/* ══════════════════════════════════════════════
   SETTINGS PAGE — MOBILE-FIRST LAYOUT SYSTEM
   .settings-page-wrap  → outermost container
   .settings-card-grid  → replaces .two-col everywhere in settings
   .settings-info-block → replaces raw inline divs in stripe section
   .settings-full-width → card that spans full width in grid
   .settings-code       → inline code that word-wraps
══════════════════════════════════════════════ */

/* Page wrapper — prevents ANY horizontal overflow */
.settings-page-wrap {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  box-sizing: border-box;
}

/* All cards inside settings: fully contained */
.settings-page-wrap .card,
.settings-page-wrap .tab-panel {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  min-width: 0;
}

/* Grid that replaces .two-col in all settings panels */
.settings-card-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* Full-width override for notification/waiver cards inside grid */
.settings-full-width {
  grid-column: 1 / -1;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* Info block (replaces raw inline divs in Stripe section) */
.settings-info-block {
  background: var(--black-3);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  min-width: 0;
  overflow: hidden;
  word-break: break-word;
}

/* Inline code that wraps on mobile */
.settings-code {
  color: #93c5fd;
  word-break: break-all;
  overflow-wrap: break-word;
  white-space: normal;
  font-size: 0.8rem;
}

/* All form controls inside settings always full-width */
.settings-page-wrap .form-control,
.settings-page-wrap select,
.settings-page-wrap input[type="text"],
.settings-page-wrap input[type="email"],
.settings-page-wrap input[type="password"],
.settings-page-wrap input[type="number"],
.settings-page-wrap input[type="time"],
.settings-page-wrap textarea {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

/* Button rows inside settings always wrap */
.settings-page-wrap .bw-footer,
.settings-page-wrap .perm-save-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Code blocks in webhook setup never overflow */
.settings-page-wrap code {
  word-break: break-all;
  overflow-wrap: break-word;
  white-space: normal;
  max-width: 100%;
}

/* ── MOBILE: 768px and below ── */
@media (max-width: 768px) {
  .settings-card-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .settings-full-width {
    grid-column: 1;
  }
  .settings-page-wrap .card {
    padding: 12px;
  }
  .settings-info-block {
    padding: 12px 14px;
  }
}

/* ── MOBILE: 480px and below ── */
@media (max-width: 480px) {
  .settings-card-grid {
    gap: 10px;
  }
  .settings-page-wrap .card {
    padding: 10px;
  }
  .settings-info-block {
    padding: 10px 12px;
    font-size: 0.82rem;
  }
  .settings-page-wrap .perm-role-block {
    padding: 10px 12px;
  }
  .settings-page-wrap .perm-item {
    gap: 8px;
    flex-wrap: wrap;
  }
  .settings-page-wrap .sq-radio-option {
    padding: 10px 12px;
  }
  .settings-page-wrap .bw-body {
    padding: 0 10px 8px;
  }
  .settings-page-wrap .bw-settings-header {
    padding: 14px 12px;
  }
}

/* ══════════════════════════════════════════════
   CLIENT MANAGEMENT PAGE — MOBILE-FIRST LAYOUT
   .clients-page-wrap   → outermost overflow guard
   .client-page-actions → header button row (wraps)
   .client-alert-banner → failed-payment alert row
   .client-bulk-actions → bulk-select action row
══════════════════════════════════════════════ */

/* Page wrapper — contains layout without clipping desktop table scroll */
.clients-page-wrap {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* Header action buttons — wrap on narrow screens */
.client-page-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

/* Failed-payment alert banner */
.client-alert-banner {
  background: rgba(248, 113, 113, 0.12);
  border: 1px solid rgba(248, 113, 113, 0.4);
  border-radius: 10px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.client-alert-icon {
  color: #f87171;
  flex-shrink: 0;
}
.client-alert-body {
  flex: 1;
  min-width: 0;
  word-break: break-word;
}
.client-alert-btn {
  background: #f87171 !important;
  color: #fff !important;
  border: none !important;
  flex-shrink: 0;
}

/* Bulk actions row — wraps on mobile */
.client-bulk-actions {
  margin-top: 16px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* ── MOBILE: 600px and below ── */
@media (max-width: 600px) {
  /* Clip overflow on mobile only — desktop must let table-wrap scroll */
  .clients-page-wrap {
    overflow-x: hidden;
  }
  .client-page-actions {
    width: 100%;
  }
  .client-alert-banner {
    padding: 12px 14px;
    gap: 10px;
  }
  .client-bulk-actions {
    gap: 8px;
  }
}

/* ── MOBILE: 480px and below ── */
@media (max-width: 480px) {
  /* Page header buttons go full-width and stack */
  .client-page-actions .btn {
    flex: 1 1 100%;
    justify-content: center;
  }
  /* Alert banner stacks vertically on very small screens */
  .client-alert-banner {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 12px;
  }
  .client-alert-btn {
    width: 100%;
    justify-content: center;
  }
  /* Bulk actions stack */
  .client-bulk-actions .btn {
    flex: 1 1 auto;
  }
  .client-bulk-actions select {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }
}

/* ── MOBILE: 360px and below ── */
@media (max-width: 360px) {
  .client-alert-banner {
    padding: 10px;
  }
  .client-bulk-actions .btn {
    flex: 1 1 100%;
    justify-content: center;
  }
}

/* ══════════════════════════════════════════════
   MEASUREMENTS OVERDUE NOTIFICATION CARD
══════════════════════════════════════════════ */

/* Diagonal warning-stripe background overlay */
.meas-overdue-stripes {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 10px,
    rgba(255,255,255,0.025) 10px,
    rgba(255,255,255,0.025) 20px
  );
  pointer-events: none;
  border-radius: inherit;
}

/* Pulsing border glow — red (≥60 days / never logged) */
@keyframes pulse-red {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0.55); }
  50%       { box-shadow: 0 0 0 8px rgba(239,68,68,0); }
}
.meas-pulse-red { animation: pulse-red 1.8s ease-in-out infinite; }

/* Pulsing border glow — amber (42–59 days) */
@keyframes pulse-amber {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245,158,11,0.55); }
  50%       { box-shadow: 0 0 0 8px rgba(245,158,11,0); }
}
.meas-pulse-amber { animation: pulse-amber 2.2s ease-in-out infinite; }

/* Pulsing border glow — orange (28–41 days) */
@keyframes pulse-orange {
  0%, 100% { box-shadow: 0 0 0 0 rgba(251,146,60,0.45); }
  50%       { box-shadow: 0 0 0 6px rgba(251,146,60,0); }
}
.meas-pulse-orange { animation: pulse-orange 2.6s ease-in-out infinite; }

/* Hover state — card brightens slightly */
.meas-overdue-card:hover { filter: brightness(1.08); }

/* ══════════════════════════════════════════════
   STATUS COLORS
══════════════════════════════════════════════ */
.text-green { color: var(--success) !important; }
.badge-green  { background: rgba(34,197,94,0.15);  color: #4ade80; border: 1px solid rgba(34,197,94,0.3); }
.badge-red    { background: rgba(200,16,46,0.15);   color: var(--red-light); border: 1px solid rgba(200,16,46,0.3); }
.badge-gray   { background: rgba(255,255,255,0.07); color: var(--white-60);  border: 1px solid var(--border); }
.badge-orange { background: rgba(245,158,11,0.15);  color: #fbbf24; border: 1px solid rgba(245,158,11,0.3); }
.ml-2 { margin-left: 8px; }

/* ── Print-friendly payroll ─────────────────────── */
@media print {
  .sidebar, .topbar, .hamburger { display: none !important; }
  .main-content { margin-left: 0 !important; }
  body { background: #fff !important; color: #000 !important; }
}

/* ── Responsive calendar ─────────────────────── */
@media (max-width: 600px) {
  .cal-toolbar { flex-direction: column; align-items: stretch; gap: 6px; }
  .cal-toolbar-left, .cal-toolbar-right { justify-content: center; flex-wrap: wrap; }
  .cal-week-time { width: 36px; min-width: 36px; font-size: 0.6rem; }
  .cal-day-time  { width: 48px; min-width: 48px; }
  .cal-week-header { font-size: 0.68rem; padding: 6px 2px; }
  .cal-week-event { font-size: 0.68rem; }
  .cal-month-wrap .calendar-grid { gap: 2px; }
  .cal-day { font-size: 0.78rem; }
}

/* ══════════════════════════════════════════════
   BOOKING WINDOW / SCHEDULING RESTRICTIONS
══════════════════════════════════════════════ */

/* Month-view locked cells */
.cal-day.bw-locked {
  opacity: 0.45;
  cursor: not-allowed;
  background: repeating-linear-gradient(
    135deg,
    transparent, transparent 6px,
    rgba(200,16,46,0.06) 6px, rgba(200,16,46,0.06) 12px
  ) !important;
  border-color: rgba(200,16,46,0.2) !important;
}
.cal-day.bw-locked:hover { background: none !important; }

/* Month-view beyond-horizon cells */
.cal-day.bw-beyond {
  opacity: 0.35;
  cursor: not-allowed;
  background: repeating-linear-gradient(
    135deg,
    transparent, transparent 6px,
    rgba(255,255,255,0.03) 6px, rgba(255,255,255,0.03) 12px
  ) !important;
  border-color: rgba(255,255,255,0.08) !important;
}
.cal-day.bw-beyond:hover { background: none !important; }

/* Lock icon inside day cells */
.bw-lock-icon {
  position: absolute;
  top: 2px; right: 4px;
  font-size: 0.65rem;
  opacity: 0.7;
  line-height: 1;
  pointer-events: none;
}

/* Week-view locked column header */
.cal-week-header.bw-locked {
  opacity: 0.45;
  background: repeating-linear-gradient(
    135deg,
    transparent, transparent 5px,
    rgba(200,16,46,0.07) 5px, rgba(200,16,46,0.07) 10px
  );
  cursor: not-allowed;
}
.cal-week-header.bw-beyond {
  opacity: 0.35;
  background: repeating-linear-gradient(
    135deg,
    transparent, transparent 5px,
    rgba(255,255,255,0.04) 5px, rgba(255,255,255,0.04) 10px
  );
  cursor: not-allowed;
}
.cal-week-cell.bw-locked {
  background: rgba(200,16,46,0.03);
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
.cal-week-cell.bw-beyond {
  background: rgba(255,255,255,0.01);
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/* Booking window banner inside booking modal */
.bw-info-banner {
  display: flex; align-items: flex-start; gap: 10px;
  background: rgba(245,158,11,0.10);
  border: 1px solid rgba(245,158,11,0.30);
  border-radius: var(--radius);
  padding: 10px 14px;
  margin-bottom: 14px;
  font-size: 0.82rem;
  color: #fbbf24;
}
.bw-info-banner i { margin-top: 2px; flex-shrink: 0; }
.bw-info-banner strong { color: #fcd34d; }
.bw-info-banner .bw-info-detail {
  font-size: 0.75rem; color: rgba(251,191,36,0.75); margin-top: 3px;
}

/* Booking-window settings page */
.bw-settings-wrap {
  background: var(--black-3); border: 1px solid var(--border);
  border-radius: var(--radius-lg); overflow: hidden;
  margin-bottom: 20px;
  width: 100%; max-width: 100%; box-sizing: border-box;
}
.bw-settings-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  flex-wrap: wrap; gap: 12px;
  padding: 18px 22px;
  background: linear-gradient(135deg, rgba(200,16,46,0.12) 0%, rgba(0,0,0,0) 60%);
  border-bottom: 1px solid var(--border);
}
.bw-settings-title {
  font-size: 1rem; font-weight: 700;
  display: flex; align-items: center; gap: 8px;
}
.bw-settings-title i { color: var(--red-light); }
.bw-live-badge {
  background: rgba(200,16,46,0.15); border: 1px solid rgba(200,16,46,0.3);
  border-radius: var(--radius); padding: 6px 12px;
  font-size: 0.78rem; color: var(--red-light);
  display: flex; align-items: center; gap: 6px;
  white-space: nowrap;
}
.bw-body { padding: 0 22px 8px; overflow: visible; max-width: 100%; }
.bw-section {
  padding: 16px 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  overflow: visible;
  position: relative;
}
.bw-section:last-child { border-bottom: none; }
.bw-section-label {
  font-size: 0.82rem; font-weight: 700;
  color: var(--white-60); text-transform: uppercase;
  letter-spacing: 0.04em; margin-bottom: 12px;
  display: flex; align-items: center; gap: 8px;
}
.bw-section-label i { color: var(--red-light); }
.bw-section-body { padding-left: 4px; overflow: visible; }
.bw-role-grid { display: flex; flex-direction: column; gap: 10px; }
.bw-role-row {
  display: flex; align-items: center; gap: 16px; padding: 12px 16px;
  background: var(--black-4); border-radius: var(--radius);
  border: 1px solid var(--border);
  overflow: visible;
  position: relative;
}
.bw-role-info { flex: 1; min-width: 0; }
.bw-role-select-wrap {
  flex-shrink: 0;
  width: min(220px, 100%);
  min-width: 0;
  position: relative;
  z-index: 10;
}
.bw-role-select-wrap select { width: 100%; }
.bw-role-exempt {
  display: flex; align-items: center; gap: 8px;
  margin-top: 10px; padding: 8px 12px;
  background: rgba(34,197,94,0.06);
  border: 1px solid rgba(34,197,94,0.15);
  border-radius: var(--radius);
}
.bw-plan-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 10px 14px;
  background: var(--black-4); border-radius: var(--radius);
  border: 1px solid var(--border); margin-bottom: 8px;
  overflow: visible;
  position: relative;
}
.bw-plan-name { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; overflow: hidden; }
.bw-plan-control { display: flex; flex-direction: column; gap: 4px; width: min(220px, 100%); min-width: 0; flex-shrink: 0; position: relative; z-index: 10; }
.bw-plan-control select { width: 100%; }
.bw-effective-grid { display: flex; flex-direction: column; gap: 8px; }
.bw-effective-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px;
  background: var(--black-4); border-radius: var(--radius);
}
.bw-preview-section { background: rgba(255,255,255,0.015); border-radius: var(--radius); }
.bw-footer {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 14px 22px;
  border-top: 1px solid var(--border);
  background: var(--black-4);
}
.bw-saved-msg {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.82rem; color: var(--success);
  animation: fadeIn 0.3s ease;
}
@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes slideInRight { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } }

/* ── Notification delivery toast ───────────────────────────── */
.notif-delivery-toast {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 260px;
  max-width: 340px;
}

/* ── Notification log table ─────────────────────────────────── */
.badge-blue   { background: rgba(59,130,246,0.15);  color: #93c5fd; border: 1px solid rgba(59,130,246,0.3); }
.badge-yellow { background: rgba(245,158,11,0.15);  color: #fcd34d; border: 1px solid rgba(245,158,11,0.3); }

/* ══════════════════════════════════════════════
   DASHBOARD QUICK-ACCESS (Square-style links)
══════════════════════════════════════════════ */
.dash-quick-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}
.dash-quick-card {
  background: var(--black-3); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 14px 18px;
  display: flex; align-items: center; gap: 14px;
  cursor: pointer; transition: all var(--transition);
}
.dash-quick-card:hover {
  border-color: var(--red);
  background: var(--black-4);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}
.dash-quick-icon {
  width: 42px; height: 42px; border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; flex-shrink: 0;
}
.dash-quick-title { font-size: 0.88rem; font-weight: 700; }
.dash-quick-sub   { font-size: 0.72rem; color: var(--white-60); margin-top: 2px; }
.dash-quick-card > .fa-chevron-right { margin-left: auto; font-size: 0.75rem; }

/* ══════════════════════════════════════════════
   SERVICES PAGE — Square /items/services
══════════════════════════════════════════════ */
.svc-summary-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}
.svc-stat-card {
  background: var(--black-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  display: flex; align-items: center; gap: 14px;
}
.svc-stat-icon {
  width: 40px; height: 40px;
  border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; flex-shrink: 0;
}
.svc-stat-val { font-size: 1.4rem; font-weight: 800; line-height: 1; }
.svc-stat-lbl { font-size: 0.72rem; color: var(--white-60); margin-top: 2px; }

.svc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
  padding-top: 16px;
}
.svc-card {
  background: var(--black-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: box-shadow var(--transition), transform var(--transition);
}
.svc-card:hover { box-shadow: 0 4px 20px rgba(0,0,0,0.3); transform: translateY(-1px); }
.svc-card.svc-inactive { opacity: 0.55; }

.svc-card-top {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.svc-color-dot {
  width: 14px; height: 14px; border-radius: 50%;
  flex-shrink: 0; margin-top: 3px;
}
.svc-card-info { flex: 1; min-width: 0; }
.svc-name { font-size: 0.92rem; font-weight: 700; margin-bottom: 4px; }
.svc-meta { display: flex; flex-wrap: wrap; gap: 4px; }
.svc-badge {
  font-size: 0.68rem; font-weight: 600;
  padding: 2px 8px; border-radius: 20px;
  border: 1px solid transparent;
}
.svc-card-actions { display: flex; gap: 4px; flex-shrink: 0; }

.svc-card-body { padding: 12px 16px; }
.svc-details-row {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin: 8px 0;
}
.svc-detail {
  font-size: 0.75rem; color: var(--white-60);
  display: flex; align-items: center; gap: 4px;
}
.svc-detail i { color: var(--red-light); }
.svc-staff-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.svc-staff-chip {
  font-size: 0.7rem; background: var(--black-4);
  border: 1px solid var(--border); border-radius: 20px;
  padding: 2px 8px; color: var(--white-60);
}
.svc-staff-select-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px; margin-top: 6px;
}
.svc-staff-check {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 10px; background: var(--black-4);
  border: 1px solid var(--border); border-radius: var(--radius);
  cursor: pointer; font-size: 0.8rem;
  transition: border-color var(--transition);
}
.svc-staff-check:hover { border-color: var(--red); }
.svc-staff-check input { accent-color: var(--red); flex-shrink: 0; }

/* services responsive handled in main 600px block */

/* ══════════════════════════════════════════════
   REPORTS PAGE — Square /sales/reports
══════════════════════════════════════════════ */
.rpt-presets {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-bottom: 20px;
}
.rpt-preset-btn {
  padding: 6px 14px; border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--black-3); color: var(--white-60);
  font-size: 0.8rem; cursor: pointer;
  transition: all var(--transition);
}
.rpt-preset-btn:hover { border-color: var(--red); color: var(--white); }
.rpt-preset-btn.active {
  background: var(--red); border-color: var(--red);
  color: var(--white); font-weight: 600;
}
.rpt-custom-range {
  display: flex; align-items: center; gap: 6px;
  margin-left: auto;
}

.rpt-kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px; margin-bottom: 20px;
}
.rpt-kpi-card {
  background: var(--black-3); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 16px;
}
.rpt-kpi-label { font-size: 0.72rem; color: var(--white-60); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 6px; }
.rpt-kpi-val { font-size: 1.6rem; font-weight: 800; line-height: 1; }
.rpt-kpi-sub { font-size: 0.72rem; color: var(--white-40); margin-top: 4px; }

.rpt-body-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 900px) {
  .rpt-body-grid { grid-template-columns: 1fr; }
  .rpt-kpi-row { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}

.rpt-share-bar {
  width: 80px; height: 6px; background: var(--black-5);
  border-radius: 4px; overflow: hidden; display: inline-block;
  vertical-align: middle; margin-right: 6px;
}
.rpt-share-fill { height: 100%; border-radius: 4px; transition: width 0.6s ease; }

/* ══════════════════════════════════════════════
   APPOINTMENT HISTORY PAGE
══════════════════════════════════════════════ */
.hist-stat-row {
  display: flex; flex-wrap: wrap; gap: 12px;
  margin-bottom: 16px;
}
.hist-stat {
  background: var(--black-3); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 10px 16px;
  display: flex; flex-direction: column; align-items: center;
  min-width: 80px;
}
.hist-stat-n { font-size: 1.4rem; font-weight: 800; line-height: 1; }
.hist-stat-l { font-size: 0.68rem; color: var(--white-60); margin-top: 3px; text-transform: uppercase; }

.hist-filters-bar {
  display: flex; flex-wrap: wrap; gap: 8px;
  align-items: center; margin-bottom: 12px;
  padding: 12px 16px;
  background: var(--black-3); border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.hist-filters-bar .form-control-sm {
  padding: 6px 10px; font-size: 0.8rem;
  background: var(--black-4); border: 1px solid var(--border);
  border-radius: var(--radius); color: var(--white);
  outline: none; min-width: 0;
}
.hist-filters-bar .form-control-sm:focus { border-color: var(--red); }
.hist-row:hover td { background: var(--white-05) !important; }

/* ══════════════════════════════════════════════
   CLIENT RELATIONS PAGE
══════════════════════════════════════════════ */
.cr-segment-row {
  display: flex; flex-wrap: wrap; gap: 12px;
  margin-bottom: 20px;
}
.cr-segment-card {
  background: var(--black-3); border: 2px solid var(--border);
  border-radius: var(--radius-lg); padding: 14px 18px;
  cursor: pointer; min-width: 100px;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  transition: all var(--transition);
}
.cr-segment-card:hover { border-color: var(--red); }
.cr-segment-card.active {
  border-color: var(--red);
  background: rgba(200,16,46,0.08);
}
.cr-seg-icon { font-size: 0.8rem; padding: 6px 10px; }
.cr-seg-count { font-size: 1.5rem; font-weight: 800; line-height: 1; }
.cr-seg-label { font-size: 0.72rem; color: var(--white-60); text-align: center; }

/* CR / reports / history responsive handled in main 600px / 480px blocks */

/* ══════════════════════════════════════════════
   PACKAGES PAGE — grouped sections
══════════════════════════════════════════════ */
.pkg-group-section {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.pkg-group-header {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px 18px;
  background: var(--black-3);
  border-bottom: 1px solid var(--border);
}
.pkg-group-header .flex { margin-left: auto; gap: 6px; }
.pkg-group-title {
  font-size: 0.9rem; font-weight: 700; flex: 1;
}
.pkg-group-section .table-wrap {
  border-radius: 0;
  border: none;
}
.pkg-group-section table { border-radius: 0; }

/* ══════════════════════════════════════════════
   REPORTS — comparison panel
══════════════════════════════════════════════ */
.rpt-compare-bar {
  display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap;
  background: var(--black-3); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 12px 16px;
  margin-bottom: 16px;
}
.rpt-compare-bar label { font-size: 0.8rem; color: var(--white-60); white-space: nowrap; }
.rpt-compare-select {
  background: var(--black-4); border: 1px solid var(--border);
  border-radius: var(--radius); color: var(--white);
  padding: 6px 10px; font-size: 0.8rem; outline: none;
}
.rpt-compare-select:focus { border-color: var(--red); }
.rpt-cmp-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px; margin-bottom: 20px;
}
.rpt-cmp-card {
  background: var(--black-3); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 14px 16px;
  position: relative;
}
.rpt-cmp-label { font-size: 0.7rem; color: var(--white-60); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 6px; }
.rpt-cmp-val   { font-size: 1.4rem; font-weight: 800; line-height: 1; }
.rpt-cmp-prev  { font-size: 0.75rem; color: var(--white-40); margin-top: 4px; }
.rpt-cmp-delta { font-size: 0.78rem; font-weight: 700; margin-top: 2px; }
.rpt-cmp-delta.up   { color: #22c55e; }
.rpt-cmp-delta.down { color: var(--red); }
.rpt-cmp-delta.flat { color: var(--white-40); }

/* Week view legend */
.bw-week-legend {
  display: flex; flex-wrap: wrap; gap: 12px;
  padding: 6px 4px 10px;
  font-size: 0.74rem;
}
.bw-legend-item {
  display: flex; align-items: center; gap: 5px;
  color: var(--white-60);
  padding: 3px 10px; border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--black-3);
}
.bw-legend-locked { border-color: rgba(200,16,46,0.25); color: var(--red-light); }
.bw-legend-beyond { border-color: rgba(255,255,255,0.15); }

@media (max-width: 600px) {
  .bw-settings-wrap { width: 100%; max-width: 100%; overflow: hidden; }
  .bw-settings-header { flex-direction: column; gap: 10px; }
  .bw-settings-header > div:first-child { width: 100%; }
  .bw-live-badge { white-space: normal; font-size: 0.73rem; }
  .bw-body { padding: 0 12px 8px; overflow: hidden; }
  .bw-role-row, .bw-plan-row { flex-direction: column; align-items: stretch; gap: 8px; }
  .bw-role-select-wrap { width: 100% !important; min-width: 0; }
  .bw-role-info { min-width: 0; }
  .bw-plan-control { min-width: 0; width: 100% !important; }
  .bw-plan-name { min-width: 0; overflow: hidden; }
  .bw-section-body .two-col { grid-template-columns: 1fr !important; gap: 10px; }
  .bw-section-body .two-col > div { min-width: 0; width: 100%; box-sizing: border-box; overflow: hidden; }
  .bw-section-label { flex-wrap: wrap; gap: 4px; font-size: 0.75rem; }
  .bw-footer { flex-direction: column; align-items: stretch; gap: 8px; }
  .bw-week-legend { gap: 8px; }
  #bw-cancel-cutoff, #bw-global { width: 100% !important; max-width: 100% !important; }
}

/* ══════════════════════════════════════════════
   INDIVIDUAL PERMISSIONS — per-user overrides
══════════════════════════════════════════════ */
.indperm-overridden {
  background: rgba(200, 16, 46, 0.05);
  border-left: 3px solid var(--red);
  padding-left: 10px;
  border-radius: 0 6px 6px 0;
}

/* ══════════════════════════════════════════════
   STAFF AVAILABILITY EDITOR
══════════════════════════════════════════════ */
.avail-day-row {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.avail-day-row:last-child { border-bottom: none; }
.avail-day-check {
  display: flex; align-items: center; gap: 8px;
  min-width: 110px; padding-top: 6px;
}
.avail-day-check input[type="checkbox"] {
  width: 16px; height: 16px; accent-color: var(--red); cursor: pointer;
}
.avail-slots { display: flex; flex-direction: column; gap: 6px; flex: 1; }
.avail-slot-row {
  display: flex; align-items: center; gap: 4px;
}
.avail-time-sel { max-width: 110px; }

/* ══════════════════════════════════════════════
   SQUARE-STYLE SETTINGS COMPONENTS
══════════════════════════════════════════════ */
.sq-settings-wrap { max-width: 820px; width: 100%; box-sizing: border-box; overflow-x: hidden; }

.sq-radio-group {
  display: flex; flex-direction: column; gap: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: visible;
  background: var(--black-3);
}
.sq-radio-option {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.15s;
}
.sq-radio-option:last-child { border-bottom: none; }
.sq-radio-option:hover { background: var(--black-4); }
.sq-radio-option.sq-radio-selected { background: rgba(200,16,46,0.07); }
.sq-radio-option input[type="radio"] {
  margin-top: 3px; accent-color: var(--red);
  width: 16px; height: 16px; flex-shrink: 0; cursor: pointer;
}

.sq-setting-row {
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}
.sq-setting-row:first-child { padding-top: 6px; }
.sq-setting-label { margin-bottom: 10px; }
.sq-divider { border: none; border-top: 1px solid var(--border); margin: 6px 0; }

/* Inline table-style settings (scheduling intervals) */
.sq-table-settings { border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: visible; }
.sq-table-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--black-3);
  flex-wrap: wrap;
  gap: 8px;
}
.sq-table-row:last-child { border-bottom: none; }
.sq-table-row:hover { background: var(--black-4); }
.sq-table-label { font-size: 0.87rem; color: var(--white-80); }

@media (max-width: 600px) {
  .sq-settings-wrap { max-width: 100%; }
  .sq-table-row { flex-direction: column; align-items: flex-start; gap: 8px; }
  .sq-table-row select, .sq-table-row input { width: 100%; }
  .avail-day-row { flex-direction: column; gap: 8px; }
  .avail-day-check { min-width: auto; }
  .avail-time-sel { max-width: 100%; }
  .avail-slot-row { flex-wrap: wrap; }
}