*{box-sizing:border-box;margin:0;padding:0}
:root{
  --primary:#1C3264;--pl:#2A4A8F;--pd:#0F1F42;
  --accent:#E8A020;--sidebar-w:230px;
  --bg:#F0F4FA;--card:#fff;--text:#1A2440;--muted:#5A6A80;--border:#C8D4E8;
  --red:#c0392b;--green:#27ae60;--blue:#1565c0;--purple:#7b2d8b;
  --r:10px;--sh:0 2px 12px rgba(26,107,60,.09);
}
body{font-family:'Segoe UI',Tahoma,Arial,sans-serif;background:var(--bg);color:var(--text);min-height:100vh}
[dir=ltr]{font-family:'Segoe UI',Arial,sans-serif}
*::-webkit-scrollbar{width:5px;height:5px}*::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}
.hidden{display:none!important}.flex{display:flex}.center{align-items:center;justify-content:center}
.gap-6{gap:6px}.gap-8{gap:8px}.w100{width:100%}
.login-bg{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#0F1F42,#1C3264 55%,#2A4A8F);padding:20px}
.login-box{background:#fff;border-radius:18px;padding:40px 36px;width:100%;max-width:400px;box-shadow:0 8px 32px rgba(26,107,60,.22)}
.login-logo{text-align:center;margin-bottom:28px}.login-logo .icon{font-size:52px;display:block;margin-bottom:6px}
.login-logo h1{font-size:22px;color:var(--pd);font-weight:800}.login-logo p{color:var(--muted);font-size:13px;margin-top:3px}
.fld{display:flex;flex-direction:column;gap:5px;margin-bottom:13px}
.fld label{font-size:12px;font-weight:600}
.fld input,.fld select,.fld textarea{border:1.5px solid var(--border);border-radius:8px;padding:10px 13px;font-size:13px;font-family:inherit;transition:border-color .2s;background:#fff;color:var(--text)}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(26,107,60,.1)}
.fld textarea{resize:vertical;min-height:80px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}.span2{grid-column:1/-1}
.btn{padding:9px 18px;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;border:none;transition:all .18s;font-family:inherit;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.btn-primary{background:var(--primary);color:#fff}.btn-primary:hover{background:var(--pl);transform:translateY(-1px)}
.btn-accent{background:var(--accent);color:#fff}.btn-accent:hover{background:#ffb82e}
.btn-ghost{background:transparent;border:1.5px solid var(--border);color:var(--text)}.btn-ghost:hover{background:var(--border)}
.btn-danger{background:var(--red);color:#fff}.btn-danger:hover{opacity:.88}
.btn-sm{padding:5px 11px;font-size:12px;border-radius:6px}
.badge{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:12px;font-size:11px;font-weight:600;white-space:nowrap}
.bg{background:#e8f4e8;color:#1a7a3a}.ba{background:#fff8e1;color:#856404}
.bb{background:#e8f4fd;color:var(--blue)}.br{background:#fde8e8;color:var(--red)}
.bm{background:var(--bg);color:var(--muted)}.bp{background:#f3e8fd;color:var(--purple)}
.spin{border:3px solid rgba(26,107,60,.15);border-top-color:var(--primary);border-radius:50%;width:18px;height:18px;animation:sp .7s linear infinite;display:inline-block}
.spin-w{border:3px solid rgba(255,255,255,.3);border-top-color:#fff}
@keyframes sp{to{transform:rotate(360deg)}}
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(80px);background:var(--pd);color:#fff;padding:10px 22px;border-radius:22px;font-size:13px;font-weight:500;z-index:600;transition:transform .3s;box-shadow:0 4px 16px rgba(0,0,0,.2)}
.toast.show{transform:translateX(-50%) translateY(0)}
/* ── Toggle Switch ── */
.tog{position:relative;display:inline-block;width:38px;height:22px;flex-shrink:0}
.tog input{opacity:0;width:0;height:0;position:absolute}
.tog-sl{position:absolute;cursor:pointer;inset:0;background:#CBD5E1;border-radius:22px;transition:.22s}
.tog-sl:before{position:absolute;content:"";width:16px;height:16px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.22s;box-shadow:0 1px 3px rgba(0,0,0,.15)}
.tog input:checked+.tog-sl{background:var(--primary)}
.tog input:checked+.tog-sl:before{transform:translateX(16px)}
.tog input:disabled+.tog-sl{background:#93c5fd;cursor:not-allowed;opacity:.7}
/* ── Column Drawer ── */
.col-drawer-overlay{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:900;display:flex;align-items:stretch;justify-content:flex-end;animation:fdIn .18s ease}
[dir=ltr] .col-drawer-overlay{justify-content:flex-end}
.col-drawer{width:520px;max-width:100vw;background:#fff;display:flex;flex-direction:column;box-shadow:-8px 0 40px rgba(0,0,0,.18);animation:slideInR .22s ease}
[dir=ar] .col-drawer{animation:slideInL .22s ease;box-shadow:8px 0 40px rgba(0,0,0,.18)}
@keyframes slideInR{from{transform:translateX(100%)}to{transform:none}}
@keyframes slideInL{from{transform:translateX(-100%)}to{transform:none}}
@keyframes fdIn{from{opacity:0}to{opacity:1}}
.cd-head{padding:18px 22px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px;background:#fff;flex-shrink:0}
.cd-title{font-size:16px;font-weight:700;color:var(--pd);flex:1}
.cd-close{width:30px;height:30px;border-radius:7px;border:none;background:var(--bg);cursor:pointer;font-size:16px;display:flex;align-items:center;justify-content:center;color:var(--muted);transition:background .15s}
.cd-close:hover{background:var(--border)}
.cd-tabs{display:flex;border-bottom:1px solid var(--border);background:#fafbfc;flex-shrink:0;overflow-x:auto}
.cd-tab{padding:10px 16px;font-size:13px;font-weight:500;cursor:pointer;color:var(--muted);border-bottom:2.5px solid transparent;transition:all .15s;white-space:nowrap;flex-shrink:0;background:none;border-top:none;border-left:none;border-right:none;font-family:inherit}
.cd-tab:hover{color:var(--text);background:#f0f4fa}
.cd-tab.active{color:var(--primary);border-bottom-color:var(--primary);font-weight:700;background:#fff}
.cd-body{flex:1;overflow-y:auto;padding:18px 22px}
/* Phase Manage-A: redesigned drawer body */
.cd-search-wrap{position:relative;margin:0 0 16px}
.cd-search-ico{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:13px;pointer-events:none}
[dir=rtl] .cd-search-ico{left:auto;right:14px}
.cd-search{width:100%;padding:10px 14px 10px 36px;border:1.5px solid var(--border);border-radius:9px;font-size:13px;font-family:inherit;background:#fff;transition:border-color .15s,box-shadow .15s;color:var(--text);box-sizing:border-box}
[dir=rtl] .cd-search{padding:10px 36px 10px 14px}
.cd-search:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(28,50,100,.08)}
.cd-section-head{display:flex;align-items:center;gap:10px;margin:18px 0 10px;padding:0 2px}
.cd-section-head:first-of-type{margin-top:4px}
.cd-section-ico{font-size:14px;width:24px;text-align:center;flex-shrink:0}
.cd-section-info{flex:1;min-width:0}
.cd-section-lbl{font-size:11px;font-weight:700;color:var(--text);text-transform:uppercase;letter-spacing:.8px;display:flex;align-items:center;gap:6px}
.cd-section-count{font-size:10px;color:var(--muted);font-weight:600;background:var(--bg);padding:1px 6px;border-radius:8px;letter-spacing:0;text-transform:none}
.cd-section-sub{font-size:10px;color:var(--muted);margin-top:2px;font-weight:400;line-height:1.3}
.cd-section-actions{display:flex;gap:4px;align-items:center;flex-shrink:0}
.cd-quick{font-size:11px;color:var(--primary);cursor:pointer;text-decoration:none;background:none;border:none;padding:2px 4px;font-family:inherit;font-weight:600;border-radius:4px;transition:background .12s}
.cd-quick:hover{background:rgba(28,50,100,.08)}
.cd-sep{color:var(--border);font-size:11px}
.cd-row{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:9px;margin-bottom:5px;background:#f8fafc;border:1.5px solid transparent;transition:all .15s}
.cd-row:hover{background:#f0f4fa;border-color:var(--border)}
.cd-row.on{background:#eff6ff;border-color:#bfdbfe}
.cd-row.locked{background:#f1f5f9;border-color:#e2e8f0}
.cd-row-icon{font-size:16px;width:22px;text-align:center;flex-shrink:0}
.cd-row-type{font-size:11px;font-weight:800;padding:2px 6px;border-radius:5px;min-width:28px;height:22px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;font-family:'SF Pro',-apple-system,system-ui,sans-serif;letter-spacing:-.3px;line-height:1}
.cd-row-info{flex:1;min-width:0}
.cd-row-label{font-size:13px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cd-row-desc{font-size:11px;color:var(--muted);margin-top:1px}
.cd-badge{font-size:10px;padding:2px 7px;border-radius:10px;font-weight:600;background:#e5e7eb;color:#6b7280;flex-shrink:0}
.cd-badge.core{background:#dbeafe;color:#1d4ed8}
.cd-badge.portal{background:#dcfce7;color:#15803d}
.cd-empty{padding:18px;text-align:center;background:#f8fafc;border-radius:9px;color:var(--muted);font-size:13px;margin-top:4px;line-height:1.6}
.cd-empty-link{color:var(--primary);text-decoration:none;font-weight:600}
.cd-empty-link:hover{text-decoration:underline}
/* Phase FB-2: Icon picker grid */
.qf-icon-btn{
  width:32px;
  height:32px;
  border:1.5px solid transparent;
  background:#f8fafc;
  border-radius:7px;
  font-size:16px;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:all .12s;
  font-family:inherit;
  color:var(--muted);
  flex-shrink:0;
}
.qf-icon-btn:hover{border-color:var(--primary-light);background:#fff;transform:scale(1.05);}
.qf-icon-btn--sel{
  border-color:var(--primary);
  background:rgba(28,50,100,.08);
  box-shadow:0 0 0 2px rgba(28,50,100,.15);
}

/* Phase FB-1: Form Builder tabs + drag-to-reorder */
.fb-tabs{
  display:flex;
  gap:2px;
  margin:0 0 18px;
  border-bottom:2px solid var(--border);
  overflow-x:auto;
  padding-bottom:0;
  scrollbar-width:thin;
}
.fb-tab{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:9px 14px;
  border:none;
  background:transparent;
  color:var(--muted);
  font-size:13px;
  font-weight:600;
  font-family:inherit;
  cursor:pointer;
  border-bottom:2.5px solid transparent;
  margin-bottom:-2px;
  white-space:nowrap;
  transition:all .12s;
  flex-shrink:0;
}
.fb-tab:hover{color:var(--text);background:rgba(28,50,100,.04);}
.fb-tab--active{
  color:var(--primary);
  border-bottom-color:var(--primary);
  font-weight:700;
}
.fb-tab-count{
  background:var(--bg);
  color:var(--muted);
  font-size:11px;
  font-weight:700;
  padding:2px 8px;
  border-radius:10px;
  min-width:22px;
  text-align:center;
  transition:all .12s;
}
.fb-tab--active .fb-tab-count{background:var(--primary);color:#fff;}
/* RM-1: Groups page */
.g-tab{padding:6px 12px;border:1px solid var(--border);border-radius:999px;background:#fff;cursor:pointer;font-size:12px;font-weight:600;color:var(--muted);font-family:inherit;}
.g-tab:hover{border-color:var(--primary);color:var(--primary);}
.g-tab--on{background:var(--primary);color:#fff;border-color:var(--primary);}
.g-camper{display:flex;align-items:center;gap:9px;padding:8px 10px;background:#fff;border:1.5px solid var(--border);border-radius:10px;cursor:grab;transition:box-shadow .15s, transform .15s, border-color .15s;}
.g-camper:hover{border-color:var(--primary);box-shadow:0 2px 8px rgba(0,0,0,.06);}
.g-camper:active{cursor:grabbing;}
.g-camper.g-dragging{opacity:.45;transform:scale(.97);}
.g-camper-av{width:34px;height:34px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#1c3264,#2d4d8e);color:#fff;font-weight:700;font-size:13px;}
.g-camper-av img{width:100%;height:100%;object-fit:cover;border-radius:50%;}
.g-card{border-radius:12px;background:#fff;overflow:hidden;transition:transform .12s, box-shadow .15s, border-color .15s;}
.g-card--drop{transform:scale(1.015);box-shadow:0 6px 18px rgba(26,107,60,.18);outline:3px dashed var(--primary);outline-offset:-3px;}
.g-chip{display:inline-flex;align-items:center;gap:5px;padding:4px 9px 4px 11px;background:#f1f5f9;border:1px solid var(--border);border-radius:999px;font-size:12px;font-weight:600;color:#0f172a;}
.g-chip-x{background:none;border:none;color:#94a3b8;font-size:14px;line-height:1;cursor:pointer;padding:0 0 0 3px;font-family:inherit;}
.g-chip-x:hover{color:#dc2626;}
.g-color-pick--on{outline:2px solid var(--primary);outline-offset:2px;}
@media(max-width:780px){
  .g-cols{grid-template-columns:1fr!important;}
  .g-pool > div[style*="max-height"]{max-height:none!important;}
}
/* RMG-1: Rooming editor */
.rm-room{transition:box-shadow .12s, transform .12s, filter .12s;}
.rm-room:hover{box-shadow:0 4px 12px rgba(0,0,0,.10)!important;filter:brightness(1.03);}
.rm-edit-btn{position:absolute;top:5px;right:5px;background:rgba(255,255,255,.85);border:1px solid rgba(0,0,0,.08);border-radius:6px;padding:2px 6px;font-size:11px;line-height:1;cursor:pointer;font-family:inherit;opacity:0;transition:opacity .12s;}
.rm-room:hover .rm-edit-btn{opacity:1;}
.rm-resize{position:absolute;right:0;bottom:0;width:18px;height:18px;cursor:nwse-resize;background:linear-gradient(135deg,transparent 50%,rgba(0,0,0,.25) 50%,rgba(0,0,0,.25) 60%,transparent 60%,transparent 70%,rgba(0,0,0,.25) 70%,rgba(0,0,0,.25) 80%,transparent 80%);}
.rm-color-pick--on{outline:2px solid var(--primary);outline-offset:2px;}
[dir=rtl] .rm-edit-btn{right:auto;left:5px;}
/* RMG-2: assign mode */
.rm-room--drop{outline:3px dashed var(--primary);outline-offset:-3px;filter:brightness(1.05);}
.rm-occ{display:flex;align-items:center;gap:5px;font-size:11px;font-weight:600;background:rgba(255,255,255,.65);padding:2px 6px;border-radius:5px;}
.rm-occ:hover{background:rgba(255,255,255,.95);}
.rm-staff-badge{display:inline-flex;align-items:center;gap:3px;background:rgba(30,58,138,.1);border:1px solid rgba(30,58,138,.25);color:#1e3a8a;font-size:10px;font-weight:700;padding:1px 4px 1px 1px;border-radius:999px;}
.rm-add-staff-btn{background:none;border:1px dashed rgba(30,58,138,.35);color:#1e3a8a;font-size:10px;font-weight:700;padding:1px 7px;border-radius:999px;cursor:pointer;font-family:inherit;}
.rm-add-staff-btn:hover{background:rgba(30,58,138,.08);}
.rm-occ--staff{background:rgba(30,58,138,.12)!important;color:#1e3a8a!important;font-weight:700;}
.rm-occ--staff:hover{background:rgba(30,58,138,.2)!important;}
.rm-add-mentor{width:100%;background:none;border:1px dashed rgba(30,58,138,.4);color:#1e3a8a;font-size:10.5px;font-weight:700;padding:3px;border-radius:5px;cursor:pointer;font-family:inherit;}
.rm-add-mentor:hover{background:rgba(30,58,138,.08);}
.rm-staff-item, .rm-cross-item{display:flex;align-items:center;gap:9px;padding:9px 11px;background:#fff;border:1.5px solid var(--border);border-radius:10px;cursor:pointer;font-family:inherit;text-align:start;width:100%;}
.rm-staff-item:hover, .rm-cross-item:hover{border-color:var(--primary);background:#f0fdf4;}
@media(max-width:780px){
  .rm-cols{grid-template-columns:1fr!important;}
}
/* Drag-to-reorder visuals */
.q-item{transition:box-shadow .12s, opacity .12s, transform .12s;}
.q-item .q-drag-handle{
  color:var(--muted);
  font-size:16px;
  cursor:grab;
  user-select:none;
  padding:0 2px;
  opacity:.55;
  transition:opacity .12s, color .12s;
}
.q-item:hover .q-drag-handle{opacity:1;color:var(--primary);}
.q-item:active .q-drag-handle{cursor:grabbing;}
.q-item--dragging{opacity:.4;transform:scale(.99);}
.q-item--drop-before{box-shadow:0 -3px 0 0 var(--primary) inset, 0 -3px 0 0 var(--primary);}
.q-item--drop-after{box-shadow:0 3px 0 0 var(--primary) inset, 0 3px 0 0 var(--primary);}
@media (max-width: 700px){
  .fb-tab{padding:7px 10px;font-size:12px;}
  .fb-tab-count{font-size:10px;padding:1px 6px;}
}

/* Phase Manage-B: drag handle + drop indicators */
.cd-row-handle{
  font-size:14px;
  font-weight:900;
  color:var(--muted);
  cursor:grab;
  flex-shrink:0;
  width:14px;
  text-align:center;
  user-select:none;
  letter-spacing:-2px;
  line-height:1;
  opacity:.4;
  transition:opacity .12s,color .12s;
}
.cd-row--draggable:hover .cd-row-handle{opacity:1;color:var(--primary);}
.cd-row-handle--locked{cursor:not-allowed;opacity:.18;font-size:18px;letter-spacing:0;}
.cd-row--draggable{cursor:default;}
.cd-row--draggable:active .cd-row-handle{cursor:grabbing;}
.cd-row--dragging{opacity:.4;background:#dbeafe!important;}
.cd-row--drop-before{box-shadow:0 -3px 0 0 var(--primary) inset, 0 -3px 0 0 var(--primary);}
.cd-row--drop-after{box-shadow:0 3px 0 0 var(--primary) inset, 0 3px 0 0 var(--primary);}
.cd-footer{padding:14px 22px;border-top:1px solid var(--border);display:flex;align-items:center;gap:8px;background:#fafbfc;flex-shrink:0}
.cd-counter{font-size:12px;color:var(--muted);flex:1}
.cd-counter strong{color:var(--text)}
.app{display:flex;min-height:100vh}
.sidebar{width:var(--sidebar-w);background:var(--pd);display:flex;flex-direction:column;flex-shrink:0;position:fixed;top:0;right:0;bottom:0;z-index:100;overflow-y:auto}
[dir=ltr] .sidebar{left:0;right:auto}
/* Drag handle on the inner edge of the sidebar — admin can resize the
   nav width by dragging, double-click to reset. Persists in
   localStorage via setSidebarWidth() / resetSidebarWidth() in JS. */
.sb-resize{position:fixed;top:0;bottom:0;width:6px;background:transparent;cursor:col-resize;z-index:101;transition:background .12s;}
.sb-resize:hover,.sb-resize.sb-resizing{background:rgba(232,160,32,.45);}
.sb-resize{right:calc(var(--sidebar-w) - 3px);}
[dir=ltr] .sb-resize{left:calc(var(--sidebar-w) - 3px);right:auto;}
body.sb-resizing,body.sb-resizing *{cursor:col-resize !important;user-select:none !important;}
@media(max-width:780px){.sb-resize{display:none;}}
.sb-logo{padding:16px 14px;display:flex;align-items:center;gap:10px;border-bottom:1px solid rgba(255,255,255,.1)}
.sb-logo-icon{width:80px;height:auto;display:flex;align-items:center;justify-content:center;flex-shrink:0;padding:4px 0}
.sb-logo strong{color:#fff;font-size:15px}.sb-logo span{color:rgba(255,255,255,.6);font-size:11px;display:block}
.sb-nav{flex:1;padding:10px 8px}
.sb-sec{color:rgba(255,255,255,.35);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1px;padding:12px 8px 5px}
.nav-item{display:flex;align-items:center;gap:9px;padding:9px 11px;border-radius:7px;color:rgba(255,255,255,.72);font-size:13px;font-weight:500;cursor:pointer;transition:all .18s;margin-bottom:1px}
.nav-item:hover{background:rgba(255,255,255,.1);color:#fff}
.nav-item.active{background:rgba(255,255,255,.16);color:#fff;font-weight:600}
.nav-item .ic{font-size:15px;width:18px;text-align:center;flex-shrink:0}
.nb{margin-right:auto;background:var(--accent);color:#fff;font-size:10px;padding:2px 7px;border-radius:12px;font-weight:700}
[dir=ltr] .nb{margin-left:auto;margin-right:0}
.sb-foot{padding:10px;border-top:1px solid rgba(255,255,255,.1)}

.sb-btn{width:100%;padding:8px 11px;border-radius:7px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.08);color:rgba(255,255,255,.85);font-size:12px;font-weight:600;cursor:pointer;transition:background .15s;text-align:right;font-family:inherit;margin-top:3px;}
.sb-btn:hover{background:rgba(255,255,255,.18);}

.sb-user{padding:8px 10px;color:rgba(255,255,255,.7);font-size:12px;display:flex;align-items:center;gap:7px}
.sb-btn{width:100%;padding:7px;border-radius:6px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.07);color:rgba(255,255,255,.8);font-size:12px;cursor:pointer;text-align:center;transition:background .2s;margin-top:4px;font-family:inherit}
.sb-btn:hover{background:rgba(255,255,255,.18)}
.main{margin-right:var(--sidebar-w);flex:1;min-width:0;display:flex;flex-direction:column}
[dir=ltr] .main{margin-left:var(--sidebar-w);margin-right:0}
.topbar{background:#fff;border-bottom:1px solid var(--border);padding:0 20px;height:54px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:50;box-shadow:0 1px 5px rgba(0,0,0,.05)}
.tb-title-row{flex:1;display:flex;align-items:center;justify-content:space-between;gap:8px;}
.tb-actions{display:flex;align-items:center;gap:8px;}
/* ─── Desktop topbar layout ───
   Horizontal row with three well-defined slots:
     [title] [search] [refresh/export actions]
   The title keeps its natural width (no flex:1), search sits in the middle
   and gently stretches, and the action buttons hug the opposite edge. */
@media(min-width:601px){
  .topbar{flex-direction:row;gap:14px;}
  .tb-title-row{display:contents;} /* let its children (title + actions) participate in the topbar flex directly */
  .tb-title{flex:0 0 auto;order:1;}
  .tb-right{flex:1 1 auto;display:flex;justify-content:center;order:2;}
  .tb-actions{flex:0 0 auto;order:3;}
}
.tb-title{font-size:17px;font-weight:700;color:var(--pd)}
.tb-right{display:flex;align-items:center;gap:8px}
.search-box{position:relative}
.search-box input{padding:7px 13px 7px 32px;border:1.5px solid var(--border);border-radius:18px;font-size:13px;width:200px;font-family:inherit;transition:border-color .2s}
[dir=ar] .search-box input{padding:7px 32px 7px 13px}
.search-box input:focus{outline:none;border-color:var(--primary)}
.search-icon{position:absolute;top:50%;left:11px;transform:translateY(-50%);color:var(--muted);font-size:13px;pointer-events:none}
[dir=ar] .search-icon{left:auto;right:11px}
.content{padding:20px;max-width:1240px}
.views-bar{display:flex;align-items:center;gap:0;margin-bottom:14px;background:#fff;border-radius:var(--r);box-shadow:var(--sh);padding:6px 12px;overflow-x:auto;white-space:nowrap}
.vt{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:6px;font-size:12px;font-weight:500;cursor:pointer;color:var(--muted);transition:all .15s;flex-shrink:0}
.vt:hover{background:var(--bg);color:var(--text)}
.vt.active{background:var(--primary);color:#fff;font-weight:600}
.vdel{width:14px;height:14px;border-radius:50%;background:rgba(255,255,255,.3);display:inline-flex;align-items:center;justify-content:center;font-size:9px;cursor:pointer}
.vdel:hover{background:rgba(255,255,255,.6)}
.vadd{display:inline-flex;align-items:center;gap:5px;padding:6px 10px;border-radius:6px;font-size:12px;color:var(--muted);cursor:pointer;border:1.5px dashed var(--border);margin-right:8px;transition:all .15s;flex-shrink:0}
[dir=ltr] .vadd{margin-left:8px;margin-right:0}
.vadd:hover{border-color:var(--primary);color:var(--primary)}
.vsep{width:1px;background:var(--border);height:22px;margin:0 6px;flex-shrink:0}
.tbar{display:flex;align-items:center;gap:8px;margin-bottom:10px;flex-wrap:wrap}
.tbar-btn{display:inline-flex;align-items:center;gap:5px;padding:6px 11px;border-radius:7px;font-size:12px;font-weight:500;cursor:pointer;border:1.5px solid var(--border);background:#fff;color:var(--text);transition:all .15s;font-family:inherit}
.tbar-btn:hover{border-color:var(--primary);color:var(--primary)}
.tbar-btn.on{border-color:var(--primary);background:rgba(26,107,60,.08);color:var(--primary)}
.tbar-r{margin-right:auto;display:flex;gap:8px}
[dir=ltr] .tbar-r{margin-left:auto;margin-right:0}
.rc{font-size:12px;color:var(--muted);padding:4px 0;margin-bottom:6px}
.card{background:var(--card);border-radius:var(--r);box-shadow:var(--sh);overflow:hidden}
.card-head{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--border)}
.card-title{font-size:14px;font-weight:700;color:var(--pd);display:flex;align-items:center;gap:7px}
.tbl-wrap{overflow-x:auto}
/* Main-list tables get vertical scrolling inside the wrap so the sticky
   thead has a real scroll container to anchor to. */
.tbl-wrap:has(table.main-list){overflow:auto;max-height:calc(100vh - 220px);}
table{width:100%;border-collapse:collapse;font-size:13px}
thead{background:var(--bg)}
th{padding:9px 14px;text-align:right;font-weight:600;color:var(--muted);font-size:11px;white-space:nowrap;border-bottom:1px solid var(--border);cursor:pointer;user-select:none}
th:hover{color:var(--primary)}
[dir=ltr] th,[dir=ltr] td{text-align:left}
td{padding:10px 14px;border-bottom:1px solid rgba(212,228,212,.4);vertical-align:middle}
tr:last-child td{border-bottom:none}
tr:hover td{background:rgba(26,107,60,.025)}

/* ── Main list — extra breathing room + clearer rows ──────────────────
   Overrides applied only inside .main-list so other small tables (modals,
   summary lists, etc.) keep their compact spacing. */
table.main-list thead{background:#f1f5f9;}
table.main-list thead th{padding:8px 14px;font-size:12.5px;color:#334155;letter-spacing:.4px;text-transform:uppercase;border-bottom:2px solid #94a3b8;border-right:1px solid #cbd5e1;white-space:normal;min-width:100px;position:sticky;top:0;z-index:5;background:#f1f5f9;box-shadow:inset 0 -2px 0 0 #94a3b8;}
table.main-list thead th:last-child{border-right:none;}
[dir=rtl] table.main-list thead th{border-right:none;border-left:1px solid #cbd5e1;}
[dir=rtl] table.main-list thead th:last-child{border-left:none;}
table.main-list tbody td{padding:5px 14px;font-size:14px;border-bottom:1px solid #cbd5e1;border-right:1px solid #cbd5e1;}
table.main-list tbody td:last-child{border-right:none;}
[dir=rtl] table.main-list tbody td{border-right:none;border-left:1px solid #cbd5e1;}
[dir=rtl] table.main-list tbody td:last-child{border-left:none;}
/* # counter column — narrow, centred, sticky on desktop. tr:not(.grp-row)
   excludes grouped header rows whose single colspan-N <td> is also :first-child
   and would otherwise inherit the 42px width + sticky background. */
table.main-list.has-counter thead th:first-child,
table.main-list.has-counter tbody tr:not(.grp-row) td:first-child{
  position:sticky;
  z-index:4;
  background:#fff;
  width:42px;min-width:42px;max-width:42px;
  text-align:center;
  padding:7px 6px;
}
table.main-list.has-counter thead th:first-child{background:#f1f5f9;z-index:7;}
[dir=rtl] table.main-list.has-counter thead th:first-child,
[dir=rtl] table.main-list.has-counter tbody tr:not(.grp-row) td:first-child{right:0;}
[dir=ltr] table.main-list.has-counter thead th:first-child,
[dir=ltr] table.main-list.has-counter tbody tr:not(.grp-row) td:first-child{left:0;}
/* Child (column 2 in has-counter) — sticky on desktop with a visible divider line */
table.main-list.has-counter thead th:nth-child(2),
table.main-list.has-counter tbody tr:not(.grp-row) td:nth-child(2){
  position:sticky;
  z-index:3;
  background:#fff;
}
table.main-list.has-counter thead th:nth-child(2){background:#f1f5f9;z-index:6;}
[dir=rtl] table.main-list.has-counter tbody tr:not(.grp-row) td:nth-child(2){right:42px;box-shadow:-2px 0 0 0 #64748b;}
[dir=ltr] table.main-list.has-counter tbody tr:not(.grp-row) td:nth-child(2){left:42px;box-shadow:2px 0 0 0 #64748b;}
[dir=rtl] table.main-list.has-counter thead th:nth-child(2){right:42px;box-shadow:-2px 0 0 0 #64748b, inset 0 -2px 0 0 #94a3b8;}
[dir=ltr] table.main-list.has-counter thead th:nth-child(2){left:42px;box-shadow:2px 0 0 0 #64748b, inset 0 -2px 0 0 #94a3b8;}
/* Tappable photo avatars — clickable to open the lightbox */
.av.av-clickable{cursor:zoom-in;transition:transform .12s;}
.av.av-clickable:hover{transform:scale(1.08);}
table.main-list tbody tr{transition:background-color .12s;}
table.main-list tbody tr:nth-child(even) td{background:#fafbfc;}     /* Subtle stripe — barely visible but eases the eye on long lists */
table.main-list tbody tr:hover td{background:#eff6ff;}                /* Stronger hover than the default global rule */
table.main-list tbody tr:nth-child(even):hover td{background:#dbeafe;}/* Stripe + hover combined */
table.main-list tbody tr:last-child td{border-bottom:none;}
.td-name{font-weight:600;color:var(--pd)}
.av{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,#e8faf0,#b3e8cc);display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0}
.td-av{display:flex;align-items:center;gap:9px}
.grp-row td{background:var(--bg)!important;font-weight:700;font-size:12px;color:var(--primary);padding:8px 14px;border-bottom:1px solid var(--border);border-top:1px solid var(--border)}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:20px}
.sc{background:var(--card);border-radius:var(--r);padding:16px;box-shadow:var(--sh);display:flex;align-items:center;gap:12px}
.si{width:42px;height:42px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0}
.sg{background:#e8eef8}.sa{background:#fff8e1}.sb{background:#e8f4fd}.sp{background:#f3e8fd}
.sv{font-size:24px;font-weight:800;line-height:1;color:var(--pd)}.sl{font-size:11px;color:var(--muted);margin-top:3px}
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.42);z-index:300;display:flex;justify-content:flex-start;align-items:stretch}
[dir=ltr] .overlay{justify-content:flex-end}
.panel{background:#fff;width:430px;max-width:95vw;overflow-y:auto;box-shadow:-4px 0 24px rgba(0,0,0,.16);animation:sli .2s ease}
[dir=ltr] .panel{box-shadow:4px 0 24px rgba(0,0,0,.16);animation:sliL .2s ease}
@keyframes sli{from{transform:translateX(-24px);opacity:0}to{transform:translateX(0);opacity:1}}
@keyframes sliL{from{transform:translateX(24px);opacity:0}to{transform:translateX(0);opacity:1}}
.ph{display:flex;align-items:center;justify-content:space-between;padding:18px 18px 14px;border-bottom:1px solid var(--border)}
.pt{font-size:16px;font-weight:700;color:var(--pd)}
.xb{width:28px;height:28px;border-radius:7px;border:none;background:var(--bg);cursor:pointer;font-size:15px;color:var(--muted);display:flex;align-items:center;justify-content:center}
.xb:hover{background:var(--border)}
.pb{padding:18px}
.ds{margin-bottom:16px}.ds-t{font-size:10px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.8px;margin-bottom:8px}
/* Long medical/form questions can run multiple sentences. The old flex
   layout let the label gobble the row width, leaving the value with
   ~10px and breaking it character-by-character. New layout stacks the
   row vertically when the label crosses a reasonable line length so
   the value always gets the full row to wrap normally. */
.dr{display:grid;grid-template-columns:minmax(0, 35%) 1fr;column-gap:14px;align-items:start;padding:8px 0;border-bottom:1px solid rgba(212,228,212,.35);font-size:13px;}
.dr:last-child{border-bottom:none}
.dr .lbl{color:var(--muted);overflow-wrap:anywhere;line-height:1.45;}
.dr .val{font-weight:500;overflow-wrap:anywhere;text-align:left;line-height:1.5;min-width:0;}
[dir=ltr] .dr .val{text-align:right}
/* If the label runs longer than a short phrase, stack the row so the
   answer reads top-to-bottom instead of squeezing into a thin column. */
.dr.dr-stack{grid-template-columns:1fr;row-gap:4px;}
.dr.dr-stack .lbl{font-size:11.5px;}
.dr.dr-stack .val{padding-inline-start:10px;border-inline-start:2px solid #e2e8f0;}
.mc{border:1.5px solid var(--border);border-radius:8px;padding:10px 12px;margin-bottom:7px;display:flex;align-items:center;gap:9px}
.mbg{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:400;display:flex;align-items:center;justify-content:center;padding:16px}
.modal{background:#fff;border-radius:14px;padding:24px;width:100%;max-width:560px;max-height:90vh;overflow-y:auto;box-shadow:0 8px 32px rgba(0,0,0,.2);animation:mo .18s ease}
@keyframes mo{from{transform:scale(.97);opacity:0}to{transform:scale(1);opacity:1}}
.mh{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.mt{font-size:16px;font-weight:700;color:var(--pd)}
.prog-wrap{height:5px;background:var(--border);border-radius:3px;overflow:hidden}
.prog{height:100%;background:var(--primary);border-radius:3px;transition:width .4s}
.fsel{border:1.5px solid var(--border);border-radius:7px;padding:6px 11px;font-size:12px;font-family:inherit;color:var(--text);background:#fff;cursor:pointer;min-width:130px}
.fsel:focus{outline:none;border-color:var(--primary)}
.q-item{border:1.5px solid var(--border);border-radius:9px;padding:14px;margin-bottom:10px;background:#fff;transition:border-color .2s}
.q-item:hover{border-color:var(--pl)}
.q-ih{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.q-acts{margin-right:auto;display:flex;gap:5px}
[dir=ltr] .q-acts{margin-left:auto;margin-right:0}
.ep-btn{width:34px;height:34px;border-radius:7px;border:1.5px solid var(--border);background:#fff;font-size:19px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s}
.ep-btn:hover,.ep-btn.sel{border-color:var(--primary);background:rgba(26,107,60,.08)}
.q-opt-row{display:flex;gap:6px;align-items:center;margin-bottom:5px}
.q-opt-row input{flex:1;border:1px solid var(--border);border-radius:6px;padding:5px 9px;font-size:12px;font-family:inherit}
.dd{position:absolute;top:calc(100% + 4px);background:#fff;border:1.5px solid var(--border);border-radius:9px;padding:6px;min-width:170px;z-index:200;box-shadow:var(--sh)}
[dir=ar] .dd{right:0} [dir=ltr] .dd{left:0}
.dd-item{padding:8px 10px;border-radius:6px;cursor:pointer;font-size:13px;display:flex;align-items:center;gap:8px}
.dd-item:hover{background:rgba(26,107,60,.08)}
.dd-item.on{background:rgba(26,107,60,.08);color:var(--primary);font-weight:600}
.empty-row td{text-align:center;padding:42px 20px;color:var(--muted);font-size:13px;font-weight:600}
.empty-row td::before{content:"📭";font-size:42px;display:block;margin-bottom:8px;opacity:.55;font-weight:400}
.empty-row td::after{content:" — استخدم زر الإضافة في الأعلى";display:block;font-size:12px;color:var(--muted);font-weight:400;margin-top:4px;opacity:.85}
[dir=ltr] .empty-row td::after{content:" — use the Add button above"}
/* ── Tablet ── */
@media(max-width:900px){
  .stats{grid-template-columns:1fr 1fr}
  .sidebar{width:60px}
  [dir=ar] .main{margin-right:60px}[dir=ltr] .main{margin-left:60px}
  .sb-logo span,.sb-logo strong,.nav-item span:not(.ic),.nb,.sb-sec,.sb-user span{display:none}
  .nav-item{justify-content:center;padding:11px 6px}
  .sb-logo{justify-content:center;padding:10px 6px}
  .sb-logo-icon img{width:44px!important}
}
/* ── Mobile ── */
@media(max-width:600px){
  /* iOS Safari auto-zooms when a focused input has font-size < 16px.
     Force 16px on small screens so the page doesn't jump on focus. */
  input,select,textarea,
  .fld input,.fld select,.fld textarea,
  .field input,.field select,.field textarea{font-size:16px!important}
  /* Sidebar becomes bottom tab bar */
  .sidebar{
    width:100%!important;height:58px;top:auto;bottom:0;right:0;left:0;
    flex-direction:row;padding:0;overflow:visible;z-index:200;
    box-shadow:0 -2px 12px rgba(0,0,0,.18);
  }
  [dir=ltr] .sidebar{left:0;right:0}
  .sb-logo,.sb-sec,.sb-foot{display:none!important}
  .sb-nav{display:flex;flex-direction:row;padding:0;align-items:stretch;flex:1;overflow-x:auto}
  .nav-item{flex-direction:column;gap:2px;padding:6px 4px;font-size:9px;min-width:48px;
    flex:1;border-radius:0;margin:0;justify-content:center;}
  .nav-item .ic{font-size:18px;width:auto}
  .nav-item span:not(.ic){display:block!important;font-size:9px;color:rgba(255,255,255,.7)}
  .nav-item.active span:not(.ic){color:#fff}
  .nb{display:none!important}
  /* Main area */
  [dir=ar] .main{margin-right:0!important;margin-bottom:58px}
  [dir=ltr] .main{margin-left:0!important;margin-bottom:58px}
  .content{padding:8px}
  /* Stats */
  .stats{grid-template-columns:1fr 1fr;gap:8px}
  .sc{padding:11px 10px}.si{width:34px;height:34px;font-size:16px}.sv{font-size:20px}
  /* Overview grid */
  #content > div[style*="grid-template-columns:1fr 1fr"]{display:block!important}
  #content > div[style*="grid-template-columns:1fr 1fr"] > .card:first-child{margin-bottom:14px}
  /* ─── Topbar: 2-row layout so buttons never clip ───
     Row 1 (.tb-title-row): page title + refresh/export icon buttons
     Row 2 (.tb-right): search bar (full-width) shown only when active */
  .topbar{
    padding:8px 10px;height:auto;min-height:48px;
    flex-direction:column;align-items:stretch;gap:6px;
  }
  .tb-title-row{flex:1 1 auto;gap:6px;}
  .tb-title{font-size:15px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .tb-actions{flex-shrink:0;gap:4px;}
  .topbar > .tb-right{
    display:flex;gap:6px;flex-wrap:wrap;align-items:center;width:100%;
  }
  /* Compact the refresh/export buttons to icons on phone */
  #refresh-txt,#exp-txt{display:none!important}
  #refresh-btn,#exp-btn{padding:6px 10px;font-size:15px;min-height:34px;}
  #last-refresh{display:none!important}
  /* Search: full width bar when shown */
  .search-box{flex:1;min-width:0;}
  .search-box input{width:100%!important;}
  /* Views bar: horizontal scroll + tighter pills */
  .views-bar{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;padding:4px 8px;gap:4px;margin-bottom:8px;scrollbar-width:none;}
  .views-bar::-webkit-scrollbar{display:none;}
  .vt,.vadd{font-size:11px!important;padding:4px 8px!important;white-space:nowrap;flex-shrink:0;}
  .vsep{display:none;}
  /* Toolbar: give buttons some breathing room but stay on one line where possible */
  .tbar{flex-wrap:wrap;gap:5px;margin-bottom:8px;}
  .tbar-btn{padding:6px 10px;font-size:12px;min-height:34px;}
  .fsel{min-width:0;max-width:48%;font-size:12px;height:34px;}
  .tbar-r{margin-right:0;margin-left:auto;}
  [dir=ltr] .tbar-r{margin-left:auto;margin-right:0;}
  /* Quick-filter strip: horizontal scroll so all chips stay on one row */
  .quick-filter-strip{
    flex-wrap:nowrap!important;overflow-x:auto;-webkit-overflow-scrolling:touch;
    padding-bottom:4px;scrollbar-width:none;margin-bottom:8px;
  }
  .quick-filter-strip::-webkit-scrollbar{display:none;}
  .quick-filter-strip > button{flex-shrink:0;font-size:11px!important;padding:5px 10px!important;}
  /* Results-count row: stack action buttons vertically if needed */
  .rc{font-size:12px;}
  /* Compact the results-bar action buttons */
  .content .flex.gap-8 > .btn-sm{padding:6px 10px;font-size:12px;min-height:34px;}
  /* ─── Tables on mobile ─── */
  table{font-size:12px}
  th{padding:8px 8px;font-size:11px;position:sticky;top:0;background:var(--bg);z-index:2;white-space:nowrap;}
  td{padding:6px 8px;vertical-align:middle;line-height:1.35;}
  /* Avatar wrap */
  .td-av{display:flex;align-items:center;gap:6px;}
  .td-av .av{width:28px!important;height:28px!important;flex-shrink:0;font-size:12px;}
  .td-name{font-size:12.5px;font-weight:600;white-space:normal;line-height:1.25;}
  /* ─── Main-list tables: sticky name column + compact layout ───
     Two layouts:
       .has-counter  → column 1 is "#" (hidden on mobile), name is column 2 → sticky :nth-child(2)
       (default)     → column 1 IS the name → sticky :nth-child(1) */
  /* has-counter variant: hide # + sticky col 2. tr:not(.grp-row) excludes the
     single colspan-N <td> in grouped header rows. */
  table.main-list.has-counter thead th:nth-child(2),
  table.main-list.has-counter tbody tr:not(.grp-row) td:nth-child(2){
    position:sticky;
    background:#fff;
    z-index:1;
    min-width:130px;
    max-width:160px;
  }
  [dir=rtl] table.main-list.has-counter thead th:nth-child(2),
  [dir=rtl] table.main-list.has-counter tbody tr:not(.grp-row) td:nth-child(2){right:0;box-shadow:-2px 0 0 0 #64748b;}
  [dir=ltr] table.main-list.has-counter thead th:nth-child(2),
  [dir=ltr] table.main-list.has-counter tbody tr:not(.grp-row) td:nth-child(2){left:0;box-shadow:2px 0 0 0 #64748b;}
  table.main-list.has-counter thead th:nth-child(2){z-index:3;background:var(--bg);}
  table.main-list.has-counter thead th:first-child,
  table.main-list.has-counter tbody td:first-child{display:none;}
  /* default variant: name IS column 1 — sticky col 1 */
  table.main-list:not(.has-counter) thead th:nth-child(1),
  table.main-list:not(.has-counter) tbody tr:not(.grp-row) td:nth-child(1){
    position:sticky;
    background:#fff;
    z-index:1;
    min-width:130px;
    max-width:170px;
  }
  [dir=rtl] table.main-list:not(.has-counter) thead th:nth-child(1),
  [dir=rtl] table.main-list:not(.has-counter) tbody tr:not(.grp-row) td:nth-child(1){right:0;box-shadow:-2px 0 0 0 #64748b;}
  [dir=ltr] table.main-list:not(.has-counter) thead th:nth-child(1),
  [dir=ltr] table.main-list:not(.has-counter) tbody tr:not(.grp-row) td:nth-child(1){left:0;box-shadow:2px 0 0 0 #64748b;}
  table.main-list:not(.has-counter) thead th:nth-child(1){z-index:3;background:var(--bg);}
  /* Hide Phone and Email contact buttons on mobile — WhatsApp is faster and
     more likely to be used day-to-day. The buttons are generated by
     contactButtons() and use href="tel:..." and href="mailto:..." which we
     target by attribute. Keep the WhatsApp button (wa.me/...) visible. */
  table.main-list td a[href^="tel:"],
  table.main-list td a[href^="mailto:"]{display:none!important;}
  table.main-list.has-counter tr:hover td:nth-child(2),
  table.main-list:not(.has-counter) tr:hover td:nth-child(1){background:rgba(26,107,60,.025);}
  /* Action buttons: force a single horizontal row on the main list tables.
     With Phone/Email hidden we're down to WhatsApp + view + edit + confirm + cancel,
     which fits nicely in one row at ~28px per button. */
  table.main-list td .flex.gap-6{
    display:flex!important;flex-wrap:nowrap!important;
    gap:3px!important;justify-content:flex-end;align-items:center;
  }
  table.main-list td .btn.btn-sm,
  table.main-list td a.btn.btn-sm{
    padding:0;min-width:28px;width:28px;height:28px;
    font-size:13px;line-height:1;
    display:inline-flex;align-items:center;justify-content:center;
  }
  /* Other pages still use the default action-button wrapping */
  td .flex.gap-6{
    display:flex!important;flex-wrap:wrap!important;
    gap:3px!important;justify-content:flex-end;
  }
  td .btn.btn-sm,td a.btn.btn-sm{
    padding:3px 0;min-width:30px;width:30px;height:28px;
    font-size:13px;line-height:1;
    display:inline-flex;align-items:center;justify-content:center;
  }
  /* Group header row stays readable on small screens */
  .grp-row td{padding:6px 10px!important;position:static!important;display:table-cell!important;}
  .grp-row td > div{gap:6px!important;}
  .grp-row td span[style*="border-radius:999px"]{font-size:11px!important;padding:2px 8px!important;}
  /* Modal: full screen */
  .mbg{padding:0;align-items:flex-end}
  .modal{border-radius:18px 18px 0 0;max-width:100%;max-height:94vh;padding:20px 16px;width:100%}
  /* Detail panel: full width */
  .panel{width:100%!important;max-width:100%}
  /* Grid 2 cols → 1 col in modals */
  .grid2{grid-template-columns:1fr!important}
  .span2{grid-column:1!important}
  /* On mobile, the admin pill uses the native <select> (nicer picker).
     Hide the custom dropdown menu entirely — the native select is layered
     on top of the pill via absolute positioning. */
  .apill-menu{display:none!important;}
  .apill-native{display:block!important;}
  .admin-pill{padding:6px 14px!important;font-size:12.5px!important;min-height:34px!important;}
  /* Filter/Sort modals: ensure dropdowns fit */
  .dd{max-height:65vh!important;}
}
/* On desktop, hide the native select — we use the custom dropdown menu instead. */
@media(min-width:601px){
  .apill-native{display:none;}

  /* ─── Main-list tables on desktop ───
     Mirror the mobile tweaks: pin the Child-name column to the leading edge,
     hide Phone/Email contact buttons (WhatsApp stays), keep action buttons
     on a single horizontal row. Scoped to `.main-list` so the Overview
     Recent-Registrations mini-table and other compact tables are unaffected. */

  /* Sticky name column. .has-counter pins :nth-child(2) (after the # column,
     so left/right is offset by 42px); others pin :nth-child(1) at edge 0.
     tr:not(.grp-row) so grouped header rows (single colspan-N <td>) keep their
     normal layout. */
  table.main-list.has-counter thead th:nth-child(2),
  table.main-list.has-counter tbody tr:not(.grp-row) td:nth-child(2),
  table.main-list:not(.has-counter) thead th:nth-child(1),
  table.main-list:not(.has-counter) tbody tr:not(.grp-row) td:nth-child(1){
    position:sticky;
    background:#fff;
    z-index:1;
    min-width:180px;
  }
  /* has-counter: offset by the # column's 42px width */
  [dir=rtl] table.main-list.has-counter tbody tr:not(.grp-row) td:nth-child(2){right:42px;box-shadow:-2px 0 0 0 #64748b;}
  [dir=ltr] table.main-list.has-counter tbody tr:not(.grp-row) td:nth-child(2){left:42px;box-shadow:2px 0 0 0 #64748b;}
  [dir=rtl] table.main-list.has-counter thead th:nth-child(2){right:42px;box-shadow:-2px 0 0 0 #64748b, inset 0 -2px 0 0 #94a3b8;}
  [dir=ltr] table.main-list.has-counter thead th:nth-child(2){left:42px;box-shadow:2px 0 0 0 #64748b, inset 0 -2px 0 0 #94a3b8;}
  /* default variant: no # column → flush to the edge */
  [dir=rtl] table.main-list:not(.has-counter) tbody tr:not(.grp-row) td:nth-child(1){right:0;box-shadow:-2px 0 0 0 #64748b;}
  [dir=ltr] table.main-list:not(.has-counter) tbody tr:not(.grp-row) td:nth-child(1){left:0;box-shadow:2px 0 0 0 #64748b;}
  [dir=rtl] table.main-list:not(.has-counter) thead th:nth-child(1){right:0;box-shadow:-2px 0 0 0 #64748b, inset 0 -2px 0 0 #94a3b8;}
  [dir=ltr] table.main-list:not(.has-counter) thead th:nth-child(1){left:0;box-shadow:2px 0 0 0 #64748b, inset 0 -2px 0 0 #94a3b8;}
  table.main-list.has-counter thead th:nth-child(2),
  table.main-list:not(.has-counter) thead th:nth-child(1){z-index:3;background:#f1f5f9;}
  table.main-list.has-counter tr:hover td:nth-child(2),
  table.main-list:not(.has-counter) tr:hover td:nth-child(1){background:rgba(26,107,60,.025);}

  /* Hide Phone (tel:) and Email (mailto:) contact buttons in the main
     list — WhatsApp is the primary contact channel and keeps the row
     compact. Phone/Email still appear in the detail panel + Parents page. */
  table.main-list td a[href^="tel:"],
  table.main-list td a[href^="mailto:"]{display:none!important;}

  /* Action buttons in a single horizontal row. Without Phone/Email we're
     down to WhatsApp + view + edit (and any status-specific buttons),
     which fits comfortably without wrapping. */
  table.main-list td .flex.gap-6{
    display:flex!important;
    flex-wrap:nowrap!important;
    gap:4px!important;
    justify-content:flex-end;
    align-items:center;
  }
}

/* ── Phase 1: Per-trip tab bar on Registrations page ── */
.reg-tabs-wrap{
  display:flex;
  align-items:center;
  gap:10px;
  margin:6px 0 14px;
  padding:0;
}
.reg-tabs{
  display:flex;
  gap:6px;
  flex:1;
  min-width:0;
  overflow-x:auto;
  overflow-y:visible;
  padding:4px 2px 8px;
  scrollbar-width:thin;
  scrollbar-color: var(--border) transparent;
}
.reg-tabs::-webkit-scrollbar{height:6px;}
.reg-tabs::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px;}
.reg-tabs::-webkit-scrollbar-thumb:hover{background:var(--primary-light);}
.reg-tab{
  flex:0 0 auto;
  padding:8px 14px;
  border:1.5px solid var(--border);
  background:#fff;
  color:var(--text);
  border-radius:8px;
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  white-space:nowrap;
  transition:all .15s ease;
  font-family:inherit;
  display:inline-flex;
  align-items:center;
  gap:4px;
  max-width:240px;
  overflow:hidden;
  text-overflow:ellipsis;
}
.reg-tab:hover{background:var(--bg);border-color:var(--primary-light);transform:translateY(-1px);}
.reg-tab--active{
  background:var(--primary);
  color:#fff;
  border-color:var(--primary);
  box-shadow:0 2px 6px rgba(28,50,100,.2);
}
.reg-tab--active:hover{background:var(--primary-dark);border-color:var(--primary-dark);color:#fff;}
.reg-tab--all{
  margin-left:6px;
  padding-left:16px;
  border-left:2px dashed var(--border);
  border-radius:0 8px 8px 0;
}
.reg-tab--all.reg-tab--active{border-left-color:var(--primary);}
.reg-tab-archive{position:relative;display:inline-block;flex:0 0 auto;}
.reg-tab-archive-menu{
  position:absolute;
  top:calc(100% + 6px);
  left:0;
  background:#fff;
  border:1px solid var(--border);
  border-radius:10px;
  box-shadow:0 10px 28px rgba(0,0,0,.14);
  min-width:260px;
  max-width:340px;
  max-height:380px;
  overflow-y:auto;
  z-index:60;
  padding:6px;
}
.reg-tab-archive-menu.hidden{display:none;}
.reg-tab-archive-item{
  padding:9px 12px;
  border-radius:6px;
  cursor:pointer;
  font-size:13px;
  display:flex;
  align-items:center;
  gap:8px;
  color:var(--text);
  transition:background .12s;
}
.reg-tab-archive-item:hover{background:var(--bg);}
.reg-tab-archive-item--active{background:var(--bg);font-weight:700;color:var(--primary);}
.reg-tab-archive-item--active::before{content:"●";color:var(--primary);font-size:10px;margin-right:2px;}
.reg-tabs-reset{
  flex:0 0 auto;
  white-space:nowrap;
  border:1.5px dashed var(--border);
  color:var(--muted);
}
.reg-tabs-reset:hover{border-color:var(--accent);color:var(--accent);background:#fffbeb;}

@media (max-width: 700px){
  .reg-tabs-wrap{gap:6px;margin:4px 0 10px;}
  .reg-tab{padding:6px 11px;font-size:12px;max-width:170px;}
  .reg-tab--all{margin-left:4px;padding-left:12px;}
  .reg-tab-archive-menu{min-width:220px;max-width:80vw;}
  .reg-tabs-reset{font-size:11px;padding:5px 9px;}
}

/* ── Phase 2A: Interactive column headers + popup menu ── */
table.main-list th{padding:0;position:relative;}  /* relative so the resize handle can pin to the right edge */
/* ── Column resize handle ── */
.col-resize-handle{
  position:absolute;
  top:0;
  bottom:0;
  width:6px;
  cursor:col-resize;
  user-select:none;
  background:transparent;
  z-index:5;
  transition:background .12s;
  /* Default: right edge in LTR. RTL flips below. */
  inset-inline-end:-3px;
}
.col-resize-handle:hover,
.col-resize-handle:active{background:var(--primary);opacity:.6;}
table.main-list th:hover .col-resize-handle{background:var(--border);}
table.main-list th:hover .col-resize-handle:hover{background:var(--primary);opacity:.7;}
/* While a resize is in progress, force col-resize cursor + disable text selection */
body.cw-resizing,
body.cw-resizing *{cursor:col-resize !important;user-select:none !important;}
/* Wrap long header text that's been pinned to a small width */
.resizable-col .col-hdr-label{overflow:hidden;text-overflow:ellipsis;}
.resizable-col{overflow:hidden;}
.col-hdr-btn,.col-hdr-plain{
  display:flex;
  align-items:center;
  gap:4px;
  width:100%;
  padding:10px 10px;
  font-family:inherit;
  font-size:inherit;
  font-weight:700;
  color:inherit;
  text-align:inherit;
  background:transparent;
  border:none;
  cursor:default;
  user-select:none;
  border-radius:0;
  white-space:normal;
  line-height:1.25;
}
.col-hdr-btn{cursor:pointer;transition:background .12s ease;}
.col-hdr-btn:hover{background:rgba(28,50,100,.05);}
.col-hdr-btn:hover .col-hdr-caret{opacity:1;}
/* Header label: max 2 lines, ellipsis when the column is narrowed */
.col-hdr-label,.col-hdr-plain{
  flex:1;
  min-width:0;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  line-clamp:2;
  overflow:hidden;
  overflow-wrap:break-word;
}
.col-hdr-arrow{
  color:var(--primary);
  font-weight:900;
  font-size:13px;
  display:inline-flex;
  align-items:center;
  gap:2px;
}
.col-hdr-lvl{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:14px;
  height:14px;
  padding:0 3px;
  border-radius:7px;
  background:var(--primary);
  color:#fff;
  font-size:9px;
  font-weight:700;
}
.col-hdr-caret{
  color:var(--muted);
  font-size:10px;
  opacity:.35;
  transition:opacity .12s;
  margin-left:2px;
}
.col-hdr-btn--sorted{background:rgba(28,50,100,.06);}
.col-hdr-btn--sorted .col-hdr-caret{opacity:.7;}
.col-hdr-btn--grouped{background:rgba(245,158,11,.1);}
.col-hdr-btn--grouped .col-hdr-label::before{content:"🔀 ";font-size:11px;}

/* The shared popup menu (one per page, reused) */
.col-menu{
  position:absolute;
  min-width:240px;
  max-width:320px;
  background:#fff;
  border:1px solid var(--border);
  border-radius:10px;
  box-shadow:0 12px 32px rgba(0,0,0,.16);
  padding:4px;
  z-index:1100;
  font-size:13px;
  font-family:inherit;
  color:var(--text);
}
.col-menu.hidden{display:none;}
.col-menu-head{
  padding:8px 12px 6px;
  font-size:11px;
  font-weight:700;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.5px;
  border-bottom:1px solid var(--border);
  margin-bottom:4px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.col-menu-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:9px 12px;
  border-radius:6px;
  cursor:pointer;
  color:var(--text);
  transition:background .1s;
}
.col-menu-item:hover{background:var(--bg);}
.col-menu-item--on{background:rgba(28,50,100,.06);font-weight:600;color:var(--primary);}
.col-menu-item--danger{color:var(--red);}
.col-menu-item--danger:hover{background:#fee2e2;}
.col-menu-item--muted{color:var(--muted);cursor:default;font-style:italic;font-size:12px;}
.col-menu-item--muted:hover{background:transparent;}
.col-menu-ico{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:18px;
  font-size:14px;
  flex:0 0 auto;
}
.col-menu-badge{
  margin-left:auto;
  color:var(--green);
  font-weight:900;
}
.col-menu-divider{
  height:1px;
  background:var(--border);
  margin:4px 0;
}

@media (max-width: 700px){
  .col-hdr-btn,.col-hdr-plain{padding:8px 6px;font-size:11px;}
  .col-hdr-caret{opacity:.6;}  /* always visible on touch */
  .col-menu{min-width:220px;max-width:calc(100vw - 16px);}
}

/* ── Phase 3: Mobile card view ── */
.view-toggle{
  display:inline-flex;
  border:1.5px solid var(--border);
  border-radius:8px;
  overflow:hidden;
  background:#fff;
  margin-left:4px;
}
.vt-btn{
  padding:5px 12px;
  background:transparent;
  border:none;
  color:var(--muted);
  font-size:12px;
  font-weight:600;
  cursor:pointer;
  font-family:inherit;
  transition:all .12s;
  white-space:nowrap;
}
.vt-btn:hover:not(.vt-btn--active){background:var(--bg);color:var(--text);}
.vt-btn--active{background:var(--primary);color:#fff;}

.rcards-wrap{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-top:4px;
}
.rcards-empty{
  padding:48px 20px;
  text-align:center;
  color:var(--muted);
  font-size:14px;
  background:#fff;
  border:1px dashed var(--border);
  border-radius:12px;
}
.rcards-group-hdr{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  background:linear-gradient(to right, rgba(28,50,100,.06), transparent);
  border-left:3px solid var(--primary);
  border-radius:6px;
  cursor:pointer;
  user-select:none;
  margin-top:6px;
}
.rcards-group-hdr.collapsed{background:#f8fafc;border-left-color:var(--muted);}
/* Phase Group-B: nested levels (sub-groups) — slightly lighter/smaller */
.rcards-group-hdr--lvl1{border-left-color:var(--accent);background:linear-gradient(to right, rgba(245,158,11,.06), transparent);}
.rcards-group-hdr--lvl2{border-left-color:var(--green);background:linear-gradient(to right, rgba(22,163,74,.06), transparent);}
.rcards-group-hdr--lvl1 .rcards-group-label{font-size:12px;color:var(--accent);}
.rcards-group-hdr--lvl2 .rcards-group-label{font-size:12px;color:var(--green);}
.rcards-group-hdr--lvl1 .rcards-group-count{background:var(--accent);}
.rcards-group-hdr--lvl2 .rcards-group-count{background:var(--green);}
.rcards-group-field{font-size:10px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.4px;margin-inline-start:auto;}
.rcards-group-toggle{
  font-size:10px;
  color:var(--muted);
  width:10px;
  text-align:center;
  flex-shrink:0;
}
.rcards-group-label{
  flex:1;
  font-size:13px;
  font-weight:700;
  color:var(--primary);
}
.rcards-group-count{
  background:var(--primary);
  color:#fff;
  font-size:10px;
  font-weight:700;
  padding:2px 8px;
  border-radius:10px;
}
/* Table group rows — visual hierarchy by level */
.grp-row--lvl0 td{background:linear-gradient(to right, rgba(28,50,100,.07), rgba(28,50,100,.02));border-top:2px solid rgba(28,50,100,.15);}
.grp-row--lvl1 td{background:linear-gradient(to right, rgba(245,158,11,.07), rgba(245,158,11,.02));border-top:1px dashed rgba(245,158,11,.35);}
.grp-row--lvl2 td{background:linear-gradient(to right, rgba(22,163,74,.07), rgba(22,163,74,.02));border-top:1px dotted rgba(22,163,74,.35);}
.grp-lvl-mark{color:var(--muted);font-family:monospace;font-size:11px;letter-spacing:-1px;}
.rcard{
  background:#fff;
  border:1px solid var(--border);
  border-radius:14px;
  padding:16px 18px;
  cursor:pointer;
  transition:transform .12s ease, box-shadow .15s ease, border-color .12s;
  box-shadow:0 1px 2px rgba(0,0,0,.04);
}
.rcard:hover,.rcard:active{
  border-color:var(--primary-light);
  box-shadow:0 6px 18px rgba(28,50,100,.10);
  transform:translateY(-1px);
}
.rcard-top{
  display:flex;
  align-items:flex-start;
  gap:12px;
}
.rcard-avatar{
  width:48px;
  height:48px;
  border-radius:50%;
  background:linear-gradient(135deg,#dbeafe,#bfdbfe);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
  flex-shrink:0;
  overflow:hidden;
  position:relative;
}
.rcard-initial{
  font-weight:800;
  font-size:18px;
  color:var(--primary);
}
.rcard-main{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.rcard-name{
  font-size:15px;
  font-weight:700;
  color:var(--text);
  line-height:1.25;
  word-break:break-word;
}
.rcard-flag{font-size:13px;}
.rcard-trip{
  font-size:12px;
  color:var(--primary);
  font-weight:600;
}
.rcard-meta{
  font-size:11px;
  color:var(--muted);
  line-height:1.4;
}
.rcard-edit{
  flex-shrink:0;
  width:34px;
  height:34px;
  border-radius:50%;
  border:1px solid var(--border);
  background:#fff;
  color:var(--text);
  cursor:pointer;
  font-size:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:all .12s;
}
.rcard-edit:hover{background:var(--primary);color:#fff;border-color:var(--primary);transform:scale(1.05);}
.rcard-bottom{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:14px;
  padding-top:12px;
  border-top:1px solid #f1f5f9;
}
.rcard-status{flex:1;min-width:0;display:flex;flex-wrap:wrap;gap:6px;align-items:center;}
.rcard-admin-pill{display:inline-flex;align-items:center;}
.rcard-meta-status{display:inline-flex;align-items:center;vertical-align:middle;}
.rcard-meta-status .badge{font-size:10px;padding:1px 7px;}
.rcard-contacts{display:flex;gap:6px;align-items:center;flex-shrink:0;flex-wrap:wrap;justify-content:flex-end;}

@media (max-width: 700px){
  /* On mobile the toggle takes its own line under the action row */
  .rcard{padding:12px;}
  .rcard-avatar{width:42px;height:42px;font-size:16px;}
  .rcard-name{font-size:14px;}
  .rcard-edit{width:30px;height:30px;font-size:12px;}
  .vt-btn{padding:4px 9px;font-size:11px;}
}