/* ============================================================
   LUMINWELL — ADMIN PANEL  ·  admin.css  v3
   Brand palette: teal #2D9676 + blue #175d92
   Aligned with ProjectDeliverableTwo.txt design system
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;0,9..40,800;0,9..40,900&display=swap');

/* ── Design tokens ─────────────────────────────────────────── */
:root {
  /* Sidebar — Luminwell brand blue (matches student/ambassador sidebar) */
  --adm-sidebar-bg:    #175d92;
  --adm-sidebar-top:   #134a75;

  /* Surface */
  --adm-topbar:    #ffffff;
  --adm-bg:        #f8f9fb;
  --adm-surface:   #ffffff;
  --adm-border:    rgba(12,25,41,.1);
  --adm-border-lt: rgba(12,25,41,.05);

  /* Primary — Luminwell teal (#2D9676 from ProjectDeliverableTwo.txt) */
  --adm-blue:     #2d9676;
  --adm-blue-dk:  #1d6e55;
  --adm-blue-lt:  #eaf5f1;
  --adm-blue-xlt: #f4faf7;

  /* Secondary blue (brand sidebar colour as accent) */
  --adm-teal:     #175d92;
  --adm-teal-lt:  #e0eef8;

  /* Supporting palette */
  --adm-green:    #059669;
  --adm-green-lt: #d1fae5;

  --adm-amber:    #d97706;
  --adm-amber-lt: #fef3c7;

  /* Red — crisis / welfare alerts ONLY (per ProjectDeliverableTwo.txt) */
  --adm-red:      #dc2626;
  --adm-red-lt:   #fee2e2;

  /* Purple — maps to brand teal (removed per design doc) */
  --adm-purple:   #2d9676;
  --adm-purple-lt:#eaf5f1;

  --adm-indigo:   #134a75;

  /* Text */
  --adm-txt-head:  #0c1929;
  --adm-txt-body:  #334155;
  --adm-txt-muted: #64748b;
  --adm-txt-faint: #94a3b8;

  /* Sidebar text — matches sessions.css */
  --adm-sbar-txt:   rgba(244,248,252,.85);
  --adm-sbar-muted: rgba(244,248,252,.45);

  /* Shadows */
  --adm-shadow-xs: 0 1px 2px rgba(12,25,41,.05);
  --adm-shadow-sm: 0 1px 4px rgba(12,25,41,.06), 0 1px 3px rgba(12,25,41,.04);
  --adm-shadow-md: 0 4px 16px rgba(12,25,41,.07), 0 2px 6px rgba(12,25,41,.05);
  --adm-shadow-lg: 0 10px 40px rgba(12,25,41,.12);
  --adm-shadow-blue: 0 4px 20px rgba(45,150,118,.22);

  /* Radii */
  --adm-r-xs: 6px;
  --adm-r-sm: 10px;
  --adm-r-md: 14px;
  --adm-r-lg: 20px;

  /* Layout */
  --sidebar-w:  260px;
  --topbar-h:   64px;
}

/* ── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  scroll-behavior: smooth;
  overflow-x: hidden;
  max-width: 100%;
}
body {
  font-family: 'DM Sans', sans-serif;
  background: var(--adm-bg);
  color: var(--adm-txt-body);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  max-width: 100%;
}
a      { text-decoration: none; color: inherit; }
button { cursor: pointer; font-family: inherit; border: none; background: none; }
input, select, textarea { font-family: inherit; }
ul, ol { list-style: none; }
img    { max-width: 100%; }

/* ── Sidebar toggle (CSS-only) ──────────────────────────────── */
.sidebar-toggle-check { display: none; }

/* Hidden radios/checkboxes for CSS-only UI state (e.g. ambassador row → detail panel).
   Without this, native control rings show as a row of “dots” at the top on mobile. */
.state-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
  opacity: 0;
  pointer-events: none;
  appearance: none;
  -webkit-appearance: none;
}

/* ── App shell ─────────────────────────────────────────────── */
.admin-shell {
  display: flex;
  min-height: 100vh;
  max-width: 100%;
  overflow-x: hidden;
}

/* ═══════════════════════════════════════════════════════════
   SIDEBAR
═══════════════════════════════════════════════════════════ */
.admin-sidebar {
  width: var(--sidebar-w);
  min-height: 100vh;
  background: var(--adm-sidebar-bg);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  transition: width .25s cubic-bezier(.4,0,.2,1);
  overflow: hidden;
  position: fixed;
  top: 0; left: 0; bottom: 0;
  z-index: 100;
  border-right: 1px solid rgba(255,255,255,.06);
}

/* Teal accent strip at top */
.admin-sidebar::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--adm-blue), #4db896);
}

/* Collapsed state */
.sidebar-toggle-check:checked ~ .admin-shell .admin-sidebar { width: 68px; }
.sidebar-toggle-check:checked ~ .admin-shell .admin-main    { margin-left: 68px; }

/* ── Logo ─────── */
.sidebar__logo {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 22px 18px 16px;
  white-space: nowrap;
  overflow: hidden;
}
.logo-mark {
  width: 36px; height: 36px; flex-shrink: 0;
  background: linear-gradient(135deg, #2d9676 0%, #4db896 100%);
  border-radius: var(--adm-r-sm);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  box-shadow: 0 4px 12px rgba(45,150,118,.35);
}
.logo-text-wrap { overflow: hidden; }
.logo-name {
  font-size: 15px; font-weight: 800; color: #fff;
  letter-spacing: -.4px; white-space: nowrap;
}
.logo-badge-pill {
  display: inline-block; font-size: 8px; font-weight: 800;
  background: rgba(255,255,255,.18);
  color: rgba(255,255,255,.9); padding: 2px 7px; border-radius: 20px;
  letter-spacing: .8px; margin-top: 2px;
}
.sidebar-toggle-check:checked ~ .admin-shell .logo-text-wrap { display: none; }

/* ── Collapse btn ─────── */
.sidebar__collapse-btn {
  display: flex; align-items: center; justify-content: flex-end;
  padding: 6px 18px; cursor: pointer;
  color: var(--adm-sbar-muted); transition: color .2s;
}
.sidebar__collapse-btn:hover { color: var(--adm-sbar-txt); }
.sidebar__collapse-btn svg { transition: transform .25s; }
.sidebar-toggle-check:checked ~ .admin-shell .sidebar__collapse-btn svg { transform: rotate(180deg); }
.sidebar-toggle-check:checked ~ .admin-shell .sidebar__collapse-btn { justify-content: center; padding: 6px 0; }

/* ── Nav ─────── */
.sidebar__nav {
  flex: 1; overflow-y: auto; padding: 4px 0 16px;
  scrollbar-width: none;
}
.sidebar__nav::-webkit-scrollbar { width: 0; }

.nav-section { margin-bottom: 2px; }

.nav-label {
  font-size: 9.5px; font-weight: 800; letter-spacing: 1.4px;
  color: var(--adm-sbar-muted);
  padding: 16px 20px 5px;
  white-space: nowrap; overflow: hidden;
  text-transform: uppercase;
}
.sidebar-toggle-check:checked ~ .admin-shell .nav-label { opacity: 0; pointer-events: none; padding: 8px 0; }

.sidebar__link {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 18px;
  color: var(--adm-sbar-txt); font-size: 13px; font-weight: 500;
  transition: background .15s, color .15s;
  white-space: nowrap; overflow: hidden;
  position: relative; border-radius: 0;
  margin: 1px 8px; border-radius: var(--adm-r-xs);
}
.sidebar__link:hover {
  background: rgba(255,255,255,.07); color: #fff;
}
.sidebar__link.active {
  background: rgba(255,255,255,.14);
  color: #ffffff;
  border: 1px solid rgba(255,255,255,.18);
}
.sidebar__link.active svg { color: #a8dfc8; opacity: 1; }
.sidebar__link svg { flex-shrink: 0; opacity: .75; }
.sidebar__link.active svg { opacity: 1; }
.sidebar__link:hover svg { opacity: 1; }
.sidebar__link .link-text { flex: 1; overflow: hidden; text-overflow: ellipsis; }

/* Nav badges */
.nav-badge {
  margin-left: auto; font-size: 10px; font-weight: 800;
  padding: 2px 7px; border-radius: 20px; line-height: 1.5; flex-shrink: 0;
}
.nav-badge--red   { background: var(--adm-red); color: #fff; }
.nav-badge--amber { background: var(--adm-amber); color: #fff; }
.nav-badge--blue  { background: rgba(45,150,118,.25); color: #a8dfc8; }
.nav-badge--slate { background: rgba(255,255,255,.1); color: var(--adm-sbar-txt); }

/* Collapsed – hide text & badges */
.sidebar-toggle-check:checked ~ .admin-shell .sidebar__link .link-text,
.sidebar-toggle-check:checked ~ .admin-shell .sidebar__link .nav-badge { display: none; }
.sidebar-toggle-check:checked ~ .admin-shell .sidebar__link { padding: 11px 0; justify-content: center; margin: 1px 4px; }
.sidebar-toggle-check:checked ~ .admin-shell .sidebar__link svg { opacity: .8; }

/* ── Sidebar footer ─────── */
.sidebar__foot {
  padding: 14px 16px;
  border-top: 1px solid rgba(255,255,255,.06);
  display: flex; flex-direction: column; gap: 10px;
  overflow: hidden;
}
.sidebar__foot-user {
  display: flex; align-items: center; gap: 10px;
  white-space: nowrap; overflow: hidden;
}
.admin-ava-sm {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, #2d9676, #4db896);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800; color: #fff;
  box-shadow: 0 2px 8px rgba(45,150,118,.35);
}
.sidebar__foot-info p     { font-size: 12px; font-weight: 700; color: #e2e8f0; }
.sidebar__foot-info small { font-size: 10px; color: var(--adm-sbar-muted); }
.sidebar__signout {
  background: rgba(239,68,68,.1); border: 1px solid rgba(239,68,68,.15);
  color: #f87171; border-radius: var(--adm-r-xs);
  padding: 7px 12px; font-size: 12px; font-weight: 600;
  text-align: left; transition: all .2s; width: 100%;
}
.sidebar__signout:hover { background: rgba(239,68,68,.2); border-color: rgba(239,68,68,.3); }

.sidebar-toggle-check:checked ~ .admin-shell .sidebar__foot-info,
.sidebar-toggle-check:checked ~ .admin-shell .sidebar__signout { display: none; }
.sidebar-toggle-check:checked ~ .admin-shell .sidebar__foot { align-items: center; }

/* ═══════════════════════════════════════════════════════════
   MAIN AREA
═══════════════════════════════════════════════════════════ */
.admin-main {
  flex: 1;
  min-width: 0;
  max-width: 100%;
  margin-left: var(--sidebar-w);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  transition: margin-left .25s cubic-bezier(.4,0,.2,1);
  overflow-x: hidden;
}

/* ═══════════════════════════════════════════════════════════
   TOPBAR
═══════════════════════════════════════════════════════════ */
.admin-topbar {
  height: var(--topbar-h);
  background: var(--adm-surface);
  border-bottom: 1px solid var(--adm-border);
  box-shadow: 0 1px 8px rgba(0,0,0,.04);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 40px;
  position: sticky; top: 0; z-index: 50;
  gap: 16px;
}
.topbar-left  { display: flex; align-items: center; gap: 12px; }
.topbar-right { display: flex; align-items: center; gap: 8px; }

.topbar-menu-btn {
  display: none; /* hidden on desktop — shown at ≤768px via media query */
  align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: var(--adm-r-xs);
  color: var(--adm-txt-muted); cursor: pointer; transition: background .15s, color .15s;
}
.topbar-menu-btn:hover { background: var(--adm-bg); color: var(--adm-txt-head); }

.breadcrumb {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--adm-txt-muted);
}
.breadcrumb a:hover { color: var(--adm-blue); }
.breadcrumb .bc-active { color: var(--adm-txt-head); font-weight: 700; }
.breadcrumb svg { color: var(--adm-txt-faint); flex-shrink: 0; }

/* Topbar icon btn */
.topbar-icon-btn {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: var(--adm-r-sm);
  color: var(--adm-txt-muted); cursor: pointer;
  transition: background .15s, color .15s; position: relative; background: none;
  border: 1px solid transparent;
}
.topbar-icon-btn:hover { background: var(--adm-bg); color: var(--adm-txt-head); border-color: var(--adm-border); }

/* Notifications dropdown */
.notif-wrap { position: relative; }
.notif-check { display: none; }
.notif-dot {
  position: absolute; top: 7px; right: 7px;
  width: 8px; height: 8px;
  background: var(--adm-red); border-radius: 50%;
  border: 2px solid #fff;
  animation: pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot {
  0%,100% { box-shadow: 0 0 0 0 rgba(239,68,68,.4); }
  50%      { box-shadow: 0 0 0 4px rgba(239,68,68,0); }
}
.notif-check:checked + label { background: var(--adm-blue-xlt); color: #2d9676; border-color: var(--adm-blue-lt); }
.notif-drop {
  position: absolute; top: calc(100% + 10px); right: 0;
  width: 340px; background: #fff;
  border-radius: var(--adm-r-md);
  box-shadow: var(--adm-shadow-lg), 0 0 0 1px rgba(0,0,0,.05);
  border: 1px solid var(--adm-border);
  display: none; overflow: hidden; z-index: 200;
}
.notif-check:checked ~ .notif-drop { display: block; }
.notif-drop-head {
  padding: 14px 16px;
  border-bottom: 1px solid var(--adm-border);
  display: flex; align-items: center; justify-content: space-between;
  background: linear-gradient(135deg, #f8faff, #fff);
}
.notif-drop-head h4 { font-size: 13px; font-weight: 800; color: var(--adm-txt-head); }
.notif-drop-head a  { font-size: 11px; color: var(--adm-blue); font-weight: 700; }
.notif-item {
  display: flex; gap: 10px; padding: 12px 16px;
  border-bottom: 1px solid var(--adm-border); transition: background .15s;
}
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: var(--adm-bg); }
.notif-item.unread { background: linear-gradient(90deg, #f4faf7, #fff); }
.notif-ico {
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; flex-shrink: 0;
}
.notif-ico.red    { background: var(--adm-red-lt); }
.notif-ico.blue   { background: var(--adm-blue-lt); }
.notif-ico.amber  { background: var(--adm-amber-lt); }
.notif-ico.green  { background: var(--adm-green-lt); }
.notif-body p     { font-size: 12px; color: var(--adm-txt-body); line-height: 1.55; }
.notif-body small { font-size: 10px; color: var(--adm-txt-faint); margin-top: 2px; display: block; }
.notif-drop-foot  { padding: 10px 16px; text-align: center; background: var(--adm-bg); }
.notif-drop-foot a { font-size: 12px; color: var(--adm-blue); font-weight: 700; }

/* Topbar user */
.topbar-user {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 10px 5px 6px; border-radius: var(--adm-r-sm);
  cursor: pointer; transition: background .15s;
  border: 1px solid transparent;
}
.topbar-user:hover { background: var(--adm-bg); border-color: var(--adm-border); }
.topbar-ava {
  width: 32px; height: 32px; border-radius: 50%;
  background: linear-gradient(135deg, #2d9676, #175d92);
  color: #fff; font-size: 12px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; box-shadow: 0 2px 8px rgba(45,150,118,.3);
}
.topbar-user-info .u-name { font-size: 13px; font-weight: 700; color: var(--adm-txt-head); line-height: 1.2; }
.topbar-user-info .u-role { font-size: 10px; color: var(--adm-txt-muted); font-weight: 500; }

/* ═══════════════════════════════════════════════════════════
   PAGE CONTENT
═══════════════════════════════════════════════════════════ */
.admin-content {
  padding: 28px 40px;
  flex: 1;
  min-width: 0;
  max-width: 100%;
  overflow-x: hidden;
}

/* ── Page hero ─────── */
.page-hero {
  background: linear-gradient(135deg, #134a75 0%, #175d92 55%, #2d9676 100%);
  border-radius: var(--adm-r-lg);
  padding: 28px 32px;
  margin-bottom: 24px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  max-width: 100%;
  min-width: 0;
}
.page-hero::before {
  content: '';
  position: absolute;
  top: -40px; right: -40px;
  width: 200px; height: 200px;
  background: rgba(255,255,255,.04);
  border-radius: 50%;
}
.page-hero::after {
  content: '';
  position: absolute;
  bottom: -60px; right: 120px;
  width: 160px; height: 160px;
  background: rgba(255,255,255,.03);
  border-radius: 50%;
}
.page-hero-icon {
  width: 56px; height: 56px;
  background: rgba(255,255,255,.1);
  border-radius: var(--adm-r-md);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.9);
}
.page-hero-text { flex: 1; min-width: 0; }
.page-hero-text h1 {
  font-size: 22px; font-weight: 800; color: #fff;
  letter-spacing: -.5px; margin-bottom: 4px;
}
.page-hero-text p { font-size: 13px; color: rgba(255,255,255,.65); }
.page-hero-actions { display: flex; gap: 10px; align-items: center; flex-shrink: 0; flex-wrap: wrap; position: relative; z-index: 1; }

/* ── Buttons ─────── */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 18px; border-radius: var(--adm-r-sm);
  font-size: 13px; font-weight: 700; border: none;
  transition: all .2s; white-space: nowrap; cursor: pointer;
  letter-spacing: -.1px;
}
.btn-primary {
  background: linear-gradient(135deg, #2d9676, #1d6e55);
  color: #fff;
  box-shadow: var(--adm-shadow-blue);
}
.btn-primary:hover { background: linear-gradient(135deg, #359e80, #256b52); box-shadow: 0 6px 24px rgba(45,150,118,.35); transform: translateY(-1px); }
.btn-white   { background: rgba(255,255,255,.15); color: #fff; border: 1px solid rgba(255,255,255,.2); backdrop-filter: blur(8px); }
.btn-white:hover { background: rgba(255,255,255,.25); }
.btn-secondary { background: var(--adm-surface); color: var(--adm-txt-body); border: 1.5px solid var(--adm-border); box-shadow: var(--adm-shadow-xs); }
.btn-secondary:hover { background: var(--adm-bg); border-color: #94a3b8; color: var(--adm-txt-head); }
.btn-danger  { background: var(--adm-red-lt); color: var(--adm-red); border: 1px solid rgba(239,68,68,.25); }
.btn-danger:hover { background: rgba(239,68,68,.2); }
.btn-ghost   { background: transparent; color: var(--adm-txt-muted); }
.btn-ghost:hover { background: var(--adm-bg); color: var(--adm-txt-body); }
.btn-sm  { padding: 7px 14px; font-size: 12px; }
.btn-xs  { padding: 4px 10px; font-size: 11px; }
.btn-icon { padding: 8px; }

/* ── Stats cards ─────── */
.stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(185px, 1fr));
  gap: 16px;
  margin-bottom: 16px;
  min-width: 0;
  max-width: 100%;
}
.stats-row.stats-row--mb-20 { margin-bottom: 20px; }
.stats-row.stats-row--mb-24 { margin-bottom: 24px; }
.stats-row .stat-card { min-width: 0; }
.stats-row .stat-label {
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
  line-height: 1.25;
}

/* Ambassador detail slide-in stat rows */
.amb-stat-row {
  padding: 16px 20px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
}
/* Invite / role picker grid */
.role-select-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.stat-card {
  background: var(--adm-surface);
  border-radius: var(--adm-r-md);
  padding: 20px;
  border: 1px solid var(--adm-border);
  border-left: 3px solid var(--adm-blue);
  box-shadow: var(--adm-shadow-sm);
  position: relative; overflow: hidden;
  transition: transform .2s, box-shadow .2s;
}
.stat-card:hover { transform: translateY(-2px); box-shadow: var(--adm-shadow-md); }

/* Color accent — left border only, no flashy gradient stripe */
.stat-card.blue   { border-left-color: var(--adm-blue); }
.stat-card.teal   { border-left-color: var(--adm-teal); }
.stat-card.green  { border-left-color: var(--adm-green); }
.stat-card.amber  { border-left-color: var(--adm-amber); }
.stat-card.red    { border-left-color: var(--adm-red); }
.stat-card.purple { border-left-color: var(--adm-teal); }

.stat-top {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px;
}
.stat-label { font-size: 11px; font-weight: 700; color: var(--adm-txt-muted); letter-spacing: .4px; text-transform: uppercase; }
.stat-icon  {
  width: 36px; height: 36px; border-radius: var(--adm-r-sm);
  display: flex; align-items: center; justify-content: center;
}
.stat-icon.blue   { background: var(--adm-blue-lt);  color: var(--adm-blue); }
.stat-icon.teal   { background: var(--adm-teal-lt);  color: var(--adm-teal); }
.stat-icon.green  { background: var(--adm-green-lt); color: var(--adm-green); }
.stat-icon.amber  { background: var(--adm-amber-lt); color: var(--adm-amber); }
.stat-icon.red    { background: var(--adm-red-lt);   color: var(--adm-red); }
.stat-icon.purple { background: var(--adm-teal-lt);  color: var(--adm-teal); }

.stat-value {
  font-size: 30px; font-weight: 900; color: var(--adm-txt-head);
  line-height: 1; margin-bottom: 8px; letter-spacing: -1.5px;
}
.stat-delta {
  font-size: 12px; font-weight: 700;
  display: inline-flex; align-items: center; gap: 4px;
}
.delta-up  { color: var(--adm-green); }
.delta-down{ color: var(--adm-txt-muted); }
.delta-neu { color: var(--adm-txt-muted); }

/* ── Cards ─────── */
.card {
  background: var(--adm-surface);
  border-radius: var(--adm-r-md);
  border: 1px solid var(--adm-border);
  box-shadow: var(--adm-shadow-sm);
  overflow: hidden;
  min-width: 0;
  max-width: 100%;
}
.card-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid var(--adm-border);
  background: linear-gradient(90deg, #f8fbf9, #fff);
}
.card-title    { font-size: 14px; font-weight: 800; color: var(--adm-txt-head); letter-spacing: -.2px; }
.card-subtitle { font-size: 12px; color: var(--adm-txt-muted); margin-top: 2px; }
.card-body     { padding: 20px; }
.card-foot {
  padding: 12px 20px; background: var(--adm-bg);
  border-top: 1px solid var(--adm-border);
  display: flex; align-items: center; justify-content: space-between;
}
.card-foot-txt { font-size: 12px; color: var(--adm-txt-muted); }

/* ── Grid layouts ─────── */
.grid-2   { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; min-width: 0; max-width: 100%; }
.grid-3   { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; min-width: 0; max-width: 100%; }
.grid-3-1 { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; min-width: 0; max-width: 100%; }
.grid-4   { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; min-width: 0; max-width: 100%; }

/* ── Data tables ─────── */
.data-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  width: 100%;
}
.data-table { width: 100%; border-collapse: collapse; }
.data-table th {
  font-size: 10.5px; font-weight: 800; color: var(--adm-txt-muted);
  letter-spacing: .6px; text-transform: uppercase;
  padding: 11px 16px; text-align: left;
  background: #f8fafc; border-bottom: 2px solid var(--adm-border);
  white-space: nowrap;
}
.data-table td {
  padding: 13px 16px; font-size: 13px; color: var(--adm-txt-body);
  border-bottom: 1px solid var(--adm-border-lt); vertical-align: middle;
}
.data-table tr:last-child td { border-bottom: none; }
.data-table tr:hover td { background: var(--adm-blue-xlt); }
.data-table a.row-link { color: var(--adm-blue); font-weight: 700; font-size: 12px; }

/* ── Badges ─────── */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px; border-radius: 20px;
  font-size: 11px; font-weight: 700; white-space: nowrap;
}
.badge-green  { background: var(--adm-green-lt);  color: #059669; }
.badge-red    { background: var(--adm-red-lt);    color: var(--adm-red); }
.badge-amber  { background: var(--adm-amber-lt);  color: #d97706; }
.badge-blue   { background: var(--adm-blue-lt);   color: var(--adm-blue-dk); }
.badge-slate  { background: #f1f5f9; color: var(--adm-txt-muted); border: 1px solid var(--adm-border); }
.badge-purple { background: var(--adm-blue-lt);   color: var(--adm-blue-dk); }
.badge-teal   { background: var(--adm-teal-lt);   color: var(--adm-teal); }

/* Dot */
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.dot-green { background: var(--adm-green); }
.dot-red   { background: var(--adm-red); }
.dot-amber { background: var(--adm-amber); }
.dot-blue  { background: var(--adm-blue); }
.dot-slate { background: #94a3b8; }

/* ── User cell ─────── */
.user-cell  { display: flex; align-items: center; gap: 10px; }
.user-ava   {
  width: 34px; height: 34px; border-radius: 50%;
  font-size: 12px; font-weight: 800;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.user-ava.blue   { background: var(--adm-blue-lt);   color: var(--adm-blue-dk); }
.user-ava.green  { background: var(--adm-green-lt);  color: #065f46; }
.user-ava.amber  { background: var(--adm-amber-lt);  color: #92400e; }
.user-ava.purple { background: var(--adm-teal-lt);   color: var(--adm-teal); }
.user-ava.teal   { background: var(--adm-teal-lt);   color: var(--adm-teal); }
.user-ava.red    { background: var(--adm-red-lt);    color: var(--adm-red); }
.user-name { font-size: 13px; font-weight: 700; color: var(--adm-txt-head); }
.user-sub  { font-size: 11px; color: var(--adm-txt-muted); margin-top: 1px; }

/* ── Filter bar ─────── */
.filter-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--adm-border);
  flex-wrap: wrap;
  background: var(--adm-bg);
  min-width: 0;
  max-width: 100%;
}
.search-wrap { position: relative; flex: 1; min-width: 200px; }
.search-wrap svg {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  color: var(--adm-txt-faint); pointer-events: none;
}
.search-inp {
  width: 100%; padding: 9px 12px 9px 34px;
  border-radius: var(--adm-r-sm); border: 1px solid var(--adm-border);
  background: var(--adm-bg); font-size: 13px; color: var(--adm-txt-body); outline: none;
  transition: border-color .2s, background .2s;
}
.search-inp:focus { border-color: var(--adm-blue); background: #fff; box-shadow: 0 0 0 3px rgba(45,150,118,.1); }
.filter-sel {
  appearance: none;
  -webkit-appearance: none;
  height: 36px;
  padding: 0 32px 0 12px;
  border-radius: 10px;
  border: 1.5px solid var(--adm-border);
  background: var(--adm-surface)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E")
    no-repeat right 10px center;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  color: var(--adm-txt-body);
  outline: none;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}
.filter-sel:hover  { border-color: #94a3b8; }
.filter-sel:focus  { border-color: var(--adm-blue); box-shadow: 0 0 0 3px rgba(45,150,118,.12); }

/* ── Tabs ─────── */
.tabs-row {
  display: flex; border-bottom: 1px solid var(--adm-border);
  padding: 0 20px; gap: 2px; background: var(--adm-surface);
}
.tab-check { display: none; }
.tab-lbl {
  padding: 13px 16px;
  font-size: 13px; font-weight: 600; color: var(--adm-txt-muted);
  cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color .15s, border-color .15s;
  display: flex; align-items: center; gap: 6px; white-space: nowrap;
}
.tab-lbl:hover { color: var(--adm-txt-head); }
.tab-check:checked + .tab-lbl { color: var(--adm-blue); border-bottom-color: var(--adm-blue); }

/* Tab row: navigate to separate pages (anchor tabs) */
a.tab-lbl {
  text-decoration: none;
  color: inherit;
  box-sizing: border-box;
}
a.tab-lbl:hover { color: var(--adm-txt-head); }
a.tab-lbl.is-active,
a.tab-lbl[aria-current="page"] {
  color: var(--adm-blue);
  border-bottom-color: var(--adm-blue);
  font-weight: 700;
}
.tab-panel {
  display: none;
  min-width: 0;
  max-width: 100%;
}

/* ── CSS Bar Chart ─────── */
/* Bar chart — bars area only (labels live in a sibling .adm-chart-axis row) */
.adm-chart {
  display: flex; align-items: stretch;
  gap: 8px; padding: 0 4px;
  /* height set inline on the element */
}
.adm-chart-col {
  flex: 1; height: 100%;
  display: flex; flex-direction: column; justify-content: flex-end;
}
.adm-chart-bar {
  width: 100%; border-radius: 5px 5px 0 0; min-height: 4px;
  transition: opacity .2s, transform .2s;
  transform-origin: bottom center;
}
.adm-chart-bar:hover { opacity: .85; transform: scaleY(1.02); }
.adm-chart-bar.blue  { background: linear-gradient(180deg, #4db896 0%, #2d9676 100%); box-shadow: 0 -2px 8px rgba(45,150,118,.22); }
.adm-chart-bar.green { background: linear-gradient(180deg, #34d399 0%, #059669 100%); box-shadow: 0 -2px 8px rgba(16,185,129,.2); }
.adm-chart-bar.amber { background: linear-gradient(180deg, var(--adm-amber) 0%, #d97706 100%); }
.adm-chart-bar.slate { background: #cbd5e1; }

/* Label row — sits directly below .adm-chart */
.adm-chart-axis {
  display: flex; gap: 8px; padding: 5px 4px 0;
}
.adm-chart-lbl {
  flex: 1; text-align: center;
  font-size: 10px; color: var(--adm-txt-faint); font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── Activity feed ─────── */
.activity-item { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--adm-border-lt); }
.activity-item:last-child { border-bottom: none; }
.act-ico {
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; color: var(--adm-txt-body);
}
.act-body { flex: 1; }
.act-body p    { font-size: 13px; color: var(--adm-txt-body); line-height: 1.5; }
.act-body strong { color: var(--adm-txt-head); }
.act-body time { font-size: 11px; color: var(--adm-txt-faint); display: block; margin-top: 2px; }

/* ── Welfare flag cards ─────── */
.flag-card {
  border-radius: var(--adm-r-md); border: 1px solid var(--adm-border);
  padding: 16px; display: flex; gap: 14px; align-items: flex-start;
  background: var(--adm-surface); transition: box-shadow .2s, transform .2s; margin-bottom: 12px;
}
.flag-card:last-child { margin-bottom: 0; }
.flag-card:hover { box-shadow: var(--adm-shadow-md); transform: translateY(-1px); }
.flag-card.critical { border-left: 4px solid var(--adm-red); background: linear-gradient(90deg, #fff5f5, #fff); }
.flag-card.high     { border-left: 4px solid var(--adm-amber); background: linear-gradient(90deg, #fffbeb, #fff); }
.flag-card.medium   { border-left: 4px solid var(--adm-blue); }
.flag-card.low      { border-left: 4px solid #94a3b8; }

.flag-sev {
  padding: 3px 9px; border-radius: 20px;
  font-size: 10px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; flex-shrink: 0;
}
.flag-sev.critical { background: var(--adm-red-lt);   color: var(--adm-red); }
.flag-sev.high     { background: var(--adm-amber-lt);  color: #d97706; }
.flag-sev.medium   { background: var(--adm-blue-lt);   color: var(--adm-blue-dk); }
.flag-sev.low      { background: #f1f5f9; color: var(--adm-txt-muted); }

/* ── Alert banners ─────── */
.alert {
  display: flex;
  gap: 12px;
  padding: 14px 18px;
  border-radius: var(--adm-r-sm);
  font-size: 13px;
  margin-bottom: 18px;
  align-items: flex-start;
  max-width: 100%;
  min-width: 0;
}
.alert-red    { background: linear-gradient(90deg, #fff1f2, #fff5f5); color: #b91c1c; border: 1px solid rgba(239,68,68,.25); }
.alert-amber  { background: linear-gradient(90deg, #fffbeb, #fefce8); color: #92400e; border: 1px solid rgba(245,158,11,.25); }
.alert-blue   { background: linear-gradient(90deg, #eaf5f1, #f4faf7); color: #1d6e55; border: 1px solid rgba(45,150,118,.25); }
.alert-green  { background: linear-gradient(90deg, #f0fdf4, #ecfdf5); color: #065f46; border: 1px solid rgba(16,185,129,.25); }
.alert-icon   { font-size: 16px; flex-shrink: 0; margin-top: 1px; }
.alert-body strong { display: block; font-weight: 800; margin-bottom: 3px; }

/* ── Toggle switch ─────── */
.toggle-row   { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--adm-border-lt); }
.toggle-row:last-child { border-bottom: none; }
.toggle-info p     { font-size: 13px; font-weight: 600; color: var(--adm-txt-head); margin-bottom: 1px; }
.toggle-info small { font-size: 11px; color: var(--adm-txt-muted); }
.toggle-check { display: none; }
.toggle-track {
  width: 42px; height: 23px; background: #e2e8f0;
  border-radius: 20px; position: relative; cursor: pointer;
  transition: background .2s; flex-shrink: 0;
}
.toggle-track::after {
  content: ''; position: absolute;
  width: 17px; height: 17px; background: #fff; border-radius: 50%;
  top: 3px; left: 3px; transition: transform .2s;
  box-shadow: 0 1px 4px rgba(0,0,0,.2);
}
.toggle-check:checked + .toggle-track { background: var(--adm-blue); }
.toggle-check:checked + .toggle-track::after { transform: translateX(19px); }

/* ── Pagination ─────── */
.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-top: 1px solid var(--adm-border);
  min-width: 0;
  max-width: 100%;
  gap: 10px;
  flex-wrap: wrap;
}
.pagination-info { font-size: 12px; color: var(--adm-txt-muted); min-width: 0; }
.pagination-btns {
  display: flex;
  gap: 4px;
  min-width: 0;
  max-width: 100%;
  flex-wrap: wrap;
}
.page-btn {
  width: 32px; height: 32px; border-radius: var(--adm-r-xs);
  border: 1px solid var(--adm-border); background: var(--adm-surface);
  font-size: 12px; font-weight: 700; color: var(--adm-txt-muted);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: all .15s;
}
.page-btn:hover { background: var(--adm-bg); border-color: #cbd5e1; }
.page-btn.active { background: var(--adm-blue); border-color: var(--adm-blue); color: #fff; box-shadow: var(--adm-shadow-blue); }
.page-btn:disabled { opacity: .35; cursor: not-allowed; pointer-events: none; }

/* ── Empty state ─────── */
.empty-state { text-align: center; padding: 48px 24px; color: var(--adm-txt-muted); }
.empty-icon  { font-size: 44px; margin-bottom: 14px; }
.empty-state h3 { font-size: 15px; font-weight: 800; color: var(--adm-txt-head); margin-bottom: 6px; }
.empty-state p  { font-size: 13px; }

/* ── Form elements ─────── */
.form-group { margin-bottom: 18px; }
.form-label { display: block; font-size: 12px; font-weight: 700; color: var(--adm-txt-head); margin-bottom: 6px; letter-spacing: .1px; }
.form-input, .form-select, .form-textarea {
  width: 100%; padding: 10px 13px;
  border: 1px solid var(--adm-border); border-radius: var(--adm-r-sm);
  font-size: 13px; color: var(--adm-txt-body);
  background: var(--adm-surface); outline: none; transition: border-color .2s, box-shadow .2s;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  border-color: var(--adm-blue); box-shadow: 0 0 0 3px rgba(45,150,118,.1);
}
.form-textarea { resize: vertical; min-height: 80px; }
.form-hint { font-size: 11px; color: var(--adm-txt-muted); margin-top: 4px; }

/* ── Info row ─────── */
.info-row { display: flex; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--adm-border-lt); font-size: 13px; }
.info-row:last-child { border-bottom: none; }
.info-key   { color: var(--adm-txt-muted); min-width: 140px; font-weight: 500; }
.info-value { color: var(--adm-txt-head); font-weight: 700; flex: 1; }

/* ── Progress bars ─────── */
.prog-row { margin-bottom: 14px; }
.prog-row:last-child { margin-bottom: 0; }
.prog-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px; }
.prog-label  { font-size: 12px; font-weight: 600; color: var(--adm-txt-body); }
.prog-value  { font-size: 12px; font-weight: 800; }
.prog-track  { height: 7px; background: var(--adm-border); border-radius: 10px; overflow: hidden; }
.prog-fill   { height: 100%; border-radius: 10px; transition: width .5s; }

/* ══════════════════════════════════════════════════════════
   RESPONSIVE — Luminwell Admin
   Breakpoints: 1200 · 1024 · 768 · 480
   ══════════════════════════════════════════════════════════ */

/* ── 1200px: wide tablet / small laptop ── */
@media (max-width: 1200px) {
  :root { --sidebar-w: 220px; }

  .grid-3   { grid-template-columns: 1fr 1fr; }
  .grid-3-1 { grid-template-columns: 1fr; }
  .grid-4   { grid-template-columns: 1fr 1fr; }
  .stats-row { grid-template-columns: repeat(3, 1fr); }

  .admin-content { padding: 20px 24px; }

  .kpi-strip { grid-template-columns: repeat(3, 1fr) !important; }
}

/* ── 1024px: tablet landscape ── */
@media (max-width: 1024px) {
  :root { --sidebar-w: 68px; }

  /* Auto-collapse sidebar at tablet */
  .admin-sidebar { width: 68px; }
  .admin-main    { margin-left: 68px; }

  .logo-text-wrap { display: none; }
  .nav-label      { opacity: 0; pointer-events: none; padding: 8px 0; }
  .sidebar__collapse-btn { display: none; }
  .sidebar__link .link-text,
  .sidebar__link .nav-badge { display: none; }
  .sidebar__link { padding: 11px 0; justify-content: center; margin: 1px 4px; }
  .sidebar__link svg { opacity: .8; }
  .sidebar__foot-info,
  .sidebar__signout { display: none; }
  .sidebar__foot { align-items: center; }

  .grid-3-1 { grid-template-columns: 1fr; }
  .detail-grid { grid-template-columns: 1fr !important; }
  .invite-grid  { grid-template-columns: 1fr !important; }
  .amb-hero { flex-direction: column; }
  .amb-hero-actions { align-items: flex-start !important; flex-direction: row !important; flex-wrap: wrap; }

  .participants-bar { grid-template-columns: 1fr; gap: 12px; }
  .participant.right { flex-direction: row; text-align: left; }

  .kpi-strip { grid-template-columns: repeat(3, 1fr) !important; }

  .admin-content { padding: 18px 20px; }
}

/* ── 768px: tablet portrait / large phone ── */
@media (max-width: 768px) {
  /* ── Sidebar becomes a slide-over overlay ── */
  .admin-sidebar {
    position: fixed;
    left: -260px;
    top: 0; bottom: 0;
    width: 260px !important;
    z-index: 200;
    transition: left .25s ease;
    box-shadow: none;
  }

  /* When toggle checked → slide in */
  .sidebar-toggle-check:checked ~ .admin-shell .admin-sidebar {
    left: 0 !important;
    width: 260px !important;
    box-shadow: 4px 0 32px rgba(12,25,41,.18);
  }

  /* Restore collapsed-state overrides that were set at 1024px */
  .admin-sidebar .logo-text-wrap    { display: flex !important; }
  .admin-sidebar .nav-label         { opacity: 1 !important; pointer-events: auto !important; padding: 8px 16px !important; }
  .admin-sidebar .sidebar__collapse-btn { display: none; }
  .admin-sidebar .sidebar__link     { padding: 10px 16px !important; justify-content: flex-start !important; margin: 1px 8px !important; }
  .admin-sidebar .sidebar__link .link-text  { display: inline !important; }
  .admin-sidebar .sidebar__link .nav-badge  { display: inline-flex !important; }
  .admin-sidebar .sidebar__link svg { opacity: 1 !important; }
  .admin-sidebar .sidebar__foot-info { display: block !important; }
  .admin-sidebar .sidebar__signout   { display: block !important; }
  .admin-sidebar .sidebar__foot      { align-items: flex-start !important; }

  /* Dim overlay behind sidebar */
  .sidebar-toggle-check:checked ~ .admin-shell::before {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(12,25,41,.4);
    z-index: 199;
  }

  /* Main takes full width */
  .admin-main    { margin-left: 0 !important; }
  .sidebar-toggle-check:checked ~ .admin-shell .admin-main { margin-left: 0 !important; }

  /* ── Topbar ── */
  .admin-topbar {
    padding: 0 16px;
    gap: 10px;
    min-width: 0;
  }
  .topbar-left,
  .topbar-right {
    min-width: 0;
  }
  .breadcrumb {
    min-width: 0;
    flex-shrink: 1;
    overflow: hidden;
  }
  .breadcrumb .bc-active {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .topbar-menu-btn { display: flex !important; }
  .topbar-user-info { display: none; }
  .breadcrumb a:first-child { display: none; }
  .breadcrumb svg:first-of-type { display: none; }

  /* ── Content area ── */
  .admin-content { padding: 14px 16px; }

  /* ── Page hero ── */
  .page-hero {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding: 18px 20px;
    border-radius: var(--adm-r-md);
  }
  .page-hero-icon { width: 42px; height: 42px; }
  /* Avoid a tall empty band between subtitle and actions when hero stacks in a column */
  .page-hero-text { flex: none; width: 100%; }
  .page-hero-actions { width: 100%; display: flex; flex-wrap: wrap; gap: 8px; }
  .page-hero-actions .btn { flex: 1; justify-content: center; min-width: 120px; }

  /* ── Grids ── */
  .grid-2   { grid-template-columns: 1fr; }
  .grid-3   { grid-template-columns: 1fr; }
  .grid-3-1 { grid-template-columns: 1fr; }
  .grid-4   { grid-template-columns: 1fr 1fr; }
  .stats-row { grid-template-columns: 1fr 1fr; }

  /* ── KPI strip ── */
  .kpi-strip { grid-template-columns: repeat(2, 1fr) !important; }

  /* ── Filter bar ── */
  .filter-bar { flex-wrap: wrap; gap: 8px; padding: 12px 16px; }
  .filter-bar .search-wrap { min-width: 100% !important; order: -1; }
  .filter-bar .adm-select-wrap { flex: 1; min-width: 130px; }
  .filter-bar .adm-select { width: 100%; }
  /* Pages that use <select class="filter-sel"> without .adm-select-wrap (e.g. ambassadors) */
  .filter-bar > .filter-sel { flex: 1; min-width: 130px; }

  /* ── Tabs ── */
  .tabs-row { overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; padding: 0 16px; }
  .tab-lbl  { white-space: nowrap; flex-shrink: 0; }

  /* ── Data table ── */
  .data-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .data-table { min-width: 600px; }
  .data-table th, .data-table td { padding: 10px 12px; font-size: 12px; }

  /* ── Cards ── */
  .card-head { padding: 14px 16px; gap: 8px; flex-wrap: wrap; }
  .card-body { padding: 14px 16px; }
  .card-title { font-size: 14px; }

  /* ── Stat cards ── */
  .stat-card { padding: 14px 16px; }
  .stat-value { font-size: 26px; }

  /* ── Pagination ── */
  .pagination { flex-direction: column; gap: 10px; align-items: flex-start; padding: 12px 16px; }
  .pagination-btns .page-btn:nth-child(n+6):not(:last-child) { display: none; }

  /* ── Notif dropdown ── */
  /* Avoid 100vw horizontal overflow (scrollbar / rounding); stay within layout */
  .notif-drop {
    right: 0;
    left: auto;
    width: min(340px, calc(100vw - 24px));
    max-width: calc(100vw - 24px);
  }

  /* ── Chart labels ── */
  .adm-chart-lbl { font-size: 9px; }
  .adm-chart-axis { gap: 5px; }

  /* ── Hero sections (user detail / session detail) ── */
  .usr-hero, .sess-hero, .amb-hero {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 14px !important;
    padding: 18px 20px !important;
  }
  .usr-hero-actions, .sess-hero-actions, .amb-hero-actions {
    flex-direction: row !important;
    flex-wrap: wrap;
    align-items: flex-start !important;
    width: 100%;
    gap: 8px;
  }
  .usr-hero-actions .btn, .sess-hero-actions .btn { flex: 1; justify-content: center; }

  /* ── Detail grid (user/session detail pages) ── */
  .detail-grid { grid-template-columns: 1fr !important; }
  .invite-grid  { grid-template-columns: 1fr !important; }

  /* ── Participants bar ── */
  .participants-bar { grid-template-columns: 1fr; gap: 12px; }
  .participant.right { flex-direction: row; text-align: left; }
  .versus { display: none; }

  /* ── Role cards grid ── */
  .role-cards-grid { grid-template-columns: 1fr !important; }
}

/* ── 480px: small phones ── */
@media (max-width: 480px) {
  .admin-content { padding: 12px; }

  .grid-4   { grid-template-columns: 1fr; }
  .stats-row { grid-template-columns: 1fr; }
  .kpi-strip { grid-template-columns: 1fr 1fr !important; }

  .page-hero { padding: 16px; }
  .page-hero-icon { display: none; }
  .page-hero-text h1 { font-size: 18px; }

  .stat-value { font-size: 24px; }
  .stat-card  { padding: 12px 14px; }

  .card-head  { padding: 12px 14px; }
  .card-body  { padding: 12px 14px; }

  .filter-bar .adm-select-wrap { min-width: 100%; }
  .filter-bar > .filter-sel { min-width: 100%; width: 100%; }

  .adm-chart-lbl { font-size: 8px; }

  .topbar-right .topbar-user { display: none; }

  /* Tabs scrollable with smaller font */
  .tab-lbl { font-size: 12px; padding: 10px 12px; }

  /* Hero avatar size */
  .usr-hero-ava, .amb-hero-ava { width: 56px !important; height: 56px !important; font-size: 20px !important; }

  /* Session/invite form rows stack */
  .form-row { grid-template-columns: 1fr !important; }
  .checkin-grid { grid-template-columns: 1fr !important; }

  /* KPI cards compact */
  .kpi-val { font-size: 22px; }
  .kpi-card { padding: 12px 14px; }

  .pagination-info { font-size: 11px; }
}

/* ══════════════════════════════════════════════════════════
   Cross-page layouts (override per-page <style> without !important)
   KPI strips, 2-col detail pages, forms — applies to ALL admin HTML
   ══════════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
  .kpi-strip { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 900px) {
  .kpi-strip { grid-template-columns: repeat(2, 1fr) !important; }
  .detail-grid,
  .amb-detail-grid { grid-template-columns: 1fr !important; }
  .invite-grid { grid-template-columns: 1fr !important; }
  .settings-form-grid { grid-template-columns: 1fr !important; }
  .form-grid-2 { grid-template-columns: 1fr !important; }
  .form-grid-3 { grid-template-columns: 1fr !important; }
  .adp-stats { grid-template-columns: 1fr !important; }
  .amb-stat-row { grid-template-columns: 1fr !important; }
  .role-select-grid { grid-template-columns: 1fr !important; }
  .check-group { grid-template-columns: 1fr !important; }
}
@media (max-width: 768px) {
  .kpi-strip { grid-template-columns: repeat(2, 1fr) !important; }
  .sess-hero-meta { flex-direction: column; align-items: flex-start !important; gap: 8px !important; }
}
@media (max-width: 600px) {
  .kpi-strip { grid-template-columns: 1fr !important; }
}

/* Weekly availability mini-grid (ambassador onboard) */
.onboard-avail-stack { display: flex; flex-direction: column; gap: 10px; }
.onboard-avail-row {
  display: grid;
  grid-template-columns: 80px repeat(3, 1fr);
  gap: 8px;
  align-items: center;
}

/* Availability matrix (ambassador add) — horizontal scroll */
@media (max-width: 768px) {
  .avail-grid {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-left: -8px;
    margin-right: -8px;
    padding-left: 8px;
    padding-right: 8px;
  }
  .avail-grid-head,
  .avail-grid-row {
    min-width: 480px;
  }

  .onboard-avail-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-left: -8px;
    margin-right: -8px;
    padding-left: 8px;
    padding-right: 8px;
  }
  .onboard-avail-row { min-width: 300px; }
}