/* ==========================================================================
   Ruach School of Divine Encounter — base theme
   Predominantly white · professional · gold + navy/purple accents
   ========================================================================== */
:root {
  /* Brand (from logo) */
  --rsde-navy:   #28266b;   /* cross */
  --rsde-navy-d: #1c1a4f;
  --rsde-gold:   #c9a227;   /* ring */
  --rsde-gold-d: #a8861a;
  --rsde-flame:  #e8851a;   /* flame */

  /* Neutrals (white-dominant) */
  --rsde-bg:     #ffffff;
  --rsde-soft:   #f7f8fa;
  --rsde-line:   #e7e9ee;
  --rsde-ink:    #1f2330;
  --rsde-muted:  #6b7280;

  /* Bootstrap overrides */
  --bs-primary: var(--rsde-navy);
  --bs-body-color: var(--rsde-ink);
  --bs-body-bg: var(--rsde-bg);
  --bs-border-color: var(--rsde-line);
  --bs-link-color: var(--rsde-navy);
  --bs-link-hover-color: var(--rsde-gold-d);
  --bs-font-sans-serif: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--rsde-bg);
  color: var(--rsde-ink);
  font-family: var(--bs-font-sans-serif);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1,h2,h3,h4,h5 { font-weight: 700; letter-spacing: -0.01em; }
.text-muted-2 { color: var(--rsde-muted) !important; }
a { text-decoration: none; }

/* Buttons */
.btn-primary { --bs-btn-bg: var(--rsde-navy); --bs-btn-border-color: var(--rsde-navy);
  --bs-btn-hover-bg: var(--rsde-navy-d); --bs-btn-hover-border-color: var(--rsde-navy-d);
  --bs-btn-active-bg: var(--rsde-navy-d); }
.btn-gold { --bs-btn-color:#fff; --bs-btn-bg: var(--rsde-gold); --bs-btn-border-color: var(--rsde-gold);
  --bs-btn-hover-color:#fff; --bs-btn-hover-bg: var(--rsde-gold-d); --bs-btn-hover-border-color: var(--rsde-gold-d); }
.btn-outline-primary { --bs-btn-color: var(--rsde-navy); --bs-btn-border-color: var(--rsde-navy);
  --bs-btn-hover-bg: var(--rsde-navy); --bs-btn-hover-border-color: var(--rsde-navy); }

/* Navbar — clean white */
.rsde-nav { background:#fff; border-bottom:1px solid var(--rsde-line); }
.rsde-nav .navbar-brand { display:flex; align-items:center; gap:.6rem; font-weight:800; color:var(--rsde-navy); }
.rsde-nav .navbar-brand img { height:42px; width:auto; }
.rsde-nav .nav-link { color:var(--rsde-ink); font-weight:500; }
.rsde-nav .nav-link:hover, .rsde-nav .nav-link.active { color:var(--rsde-gold-d); }

/* Hero */
.rsde-hero { background:
    radial-gradient(1200px 400px at 100% -10%, rgba(201,162,39,.10), transparent 60%),
    linear-gradient(180deg, var(--rsde-soft), #fff);
  border-bottom:1px solid var(--rsde-line); }
.rsde-hero h1 { color:var(--rsde-navy); }
.rsde-accent { color: var(--rsde-gold-d); }

/* Cards */
.rsde-card { background:#fff; border:1px solid var(--rsde-line); border-radius:1rem; transition:.18s; }
.rsde-card:hover { box-shadow:0 12px 30px rgba(31,35,48,.08); transform:translateY(-2px); }
.rsde-icon { width:48px;height:48px;border-radius:.75rem;display:grid;place-items:center;
  background:rgba(40,38,107,.08); color:var(--rsde-navy); }

/* Footer */
.rsde-footer { background:var(--rsde-navy-d); color:#cfd2e6; }
.rsde-footer a { color:#fff; transition:color .15s; }
.rsde-footer a:hover { color:var(--rsde-gold); }
.rsde-footer .gold-rule { height:3px; background:linear-gradient(90deg,var(--rsde-gold),var(--rsde-flame)); }
.footer-social { width:38px; height:38px; border-radius:.6rem; display:inline-grid; place-items:center;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); color:#fff !important; font-size:1.05rem; }
.footer-social:hover { background:linear-gradient(135deg,var(--rsde-gold),var(--rsde-flame)); border-color:transparent; color:#fff !important; transform:translateY(-2px); transition:.18s; }

/* Forms */
.form-control:focus,.form-select:focus { border-color:var(--rsde-navy); box-shadow:0 0 0 .2rem rgba(40,38,107,.12); }
.flash { border-left:4px solid var(--rsde-gold); }

/* ID cards (bulk + print) */
.id-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:1rem; }
.id-card { break-inside:avoid; }
@media print {
  .no-print, .rsde-footer, nav, .sidebar, .rsde-sidebar, aside, .rsde-offcanvas, header { display:none !important; }
  .id-grid { grid-template-columns:repeat(2,1fr); gap:.5rem; }
  .id-card { box-shadow:none; border:1px solid #ccc; }
  body { background:#fff; }
}

/* ==========================================================================
   Portal shell — sidebar navigation + dashboard widgets
   ========================================================================== */

/* Sidebar: sticky, scrollable, with strong active state */
.rsde-sidebar {
  position: sticky; top: 58px;
  height: calc(100vh - 58px);
  overflow-y: auto; overflow-x: hidden;
  background: linear-gradient(180deg, #ffffff, #fbfbfd);
  border-right: 1px solid var(--rsde-line);
  padding: 1rem .7rem 2rem;
  scrollbar-width: thin;
}
.rsde-sidebar::-webkit-scrollbar { width: 6px; }
.rsde-sidebar::-webkit-scrollbar-thumb { background: #d7dae2; border-radius: 6px; }

.rsde-side-label {
  font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--rsde-muted); font-weight: 700; padding: .5rem .65rem .35rem;
}

.rsde-side-link {
  display: flex; align-items: center; gap: .7rem;
  padding: .5rem .6rem; margin-bottom: .15rem;
  border-radius: .7rem; color: var(--rsde-ink); font-weight: 500; font-size: .925rem;
  position: relative; transition: background .15s, color .15s, box-shadow .15s, transform .15s;
}
.rsde-side-ico {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: .55rem;
  display: grid; place-items: center; font-size: 1.05rem;
  background: var(--rsde-soft); color: var(--rsde-navy);
  transition: background .15s, color .15s;
}
.rsde-side-text { line-height: 1.1; }

.rsde-side-link:hover {
  background: rgba(40,38,107,.07); color: var(--rsde-navy); transform: translateX(2px);
}
.rsde-side-link:hover .rsde-side-ico { background: rgba(40,38,107,.14); }

/* Active — unmistakable: navy gradient, white text, gold icon, gold edge bar, lift */
.rsde-side-link.active {
  background: linear-gradient(95deg, var(--rsde-navy), var(--rsde-navy-d));
  color: #fff; font-weight: 600;
  box-shadow: 0 10px 22px rgba(40,38,107,.28);
}
.rsde-side-link.active .rsde-side-ico { background: rgba(255,255,255,.16); color: var(--rsde-gold); }
.rsde-side-link.active::before {
  content: ""; position: absolute; left: -.7rem; top: .35rem; bottom: .35rem; width: 4px;
  border-radius: 0 4px 4px 0; background: linear-gradient(180deg, var(--rsde-gold), var(--rsde-flame));
}

.rsde-offcanvas { max-width: 80vw; width: 290px; }
.rsde-offcanvas .offcanvas-body { padding: .5rem .6rem; }

/* KPI gradient cards */
.kpi {
  position: relative; overflow: hidden; border-radius: 1rem;
  padding: 1.15rem 1.25rem; color: #fff; min-height: 118px;
  box-shadow: 0 10px 26px rgba(31,35,48,.10);
}
.kpi-ico { position: absolute; right: -8px; bottom: -14px; font-size: 5.2rem; opacity: .16; line-height: 1; }
.kpi-label { font-weight: 500; opacity: .92; font-size: .9rem; }
.kpi-val { font-size: 2.1rem; font-weight: 800; line-height: 1.1; margin-top: .15rem; }
.kpi-navy  { background: linear-gradient(135deg, #34316f, #1c1a4f); }
.kpi-gold  { background: linear-gradient(135deg, #d9b53a, #a8861a); }
.kpi-flame { background: linear-gradient(135deg, #ef8f2e, #d4690f); }
.kpi-teal  { background: linear-gradient(135deg, #2bb3a3, #0f8a7d); }
.kpi-trend {
  display: inline-flex; align-items: center; gap: .25rem; font-size: .78rem; font-weight: 700;
  background: rgba(255,255,255,.2); padding: .12rem .5rem; border-radius: 1rem;
}
.kpi-trend.down { background: rgba(0,0,0,.18); }

/* Clickable KPI cards */
.kpi-link { display: block; text-decoration: none; color: #fff; transition: transform .15s ease, box-shadow .15s ease; }
.kpi-link:hover, .kpi-link:focus { color: #fff; transform: translateY(-2px); box-shadow: 0 16px 32px rgba(31,35,48,.18); }
.kpi-link:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Widget chrome */
.widget-title { font-size: .98rem; font-weight: 700; color: var(--rsde-ink); }
.widget-sub { font-size: .78rem; color: var(--rsde-muted); }

.legend-row { display: flex; align-items: center; justify-content: space-between; padding: .3rem 0; }
.legend-left { display: flex; align-items: center; gap: .5rem; font-size: .88rem; }
.legend-dot { width: 11px; height: 11px; border-radius: 50%; flex: 0 0 auto; }

/* Conic gauge (dependency-free) */
.gauge { --p: 0; --c: var(--rsde-navy);
  position: relative; width: 150px; height: 150px; border-radius: 50%;
  background: conic-gradient(var(--c) calc(var(--p) * 1%), var(--rsde-soft) 0);
  display: grid; place-items: center; margin: 0 auto;
}
.gauge::before { content: ""; position: absolute; width: 112px; height: 112px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1px var(--rsde-line); }
.gauge-val { position: relative; font-weight: 800; font-size: 1.7rem; color: var(--rsde-ink); }
.gauge-val small { display: block; font-size: .62rem; font-weight: 600; color: var(--rsde-muted); letter-spacing: .1em; text-transform: uppercase; }

/* Thin labelled progress (pipeline / capacity) */
.bar-row { margin-bottom: .7rem; }
.bar-row:last-child { margin-bottom: 0; }
.bar-head { display: flex; justify-content: space-between; font-size: .84rem; margin-bottom: .25rem; }
.bar-track { height: 8px; border-radius: 6px; background: var(--rsde-soft); overflow: hidden; }
.bar-fill { height: 100%; border-radius: 6px; background: var(--rsde-navy); }

/* Stat mini-chips on tables */
.dash-table td, .dash-table th { vertical-align: middle; }
.avatar-mono {
  width: 34px; height: 34px; border-radius: 50%; flex: 0 0 auto;
  display: grid; place-items: center; font-weight: 700; font-size: .8rem;
  background: rgba(40,38,107,.1); color: var(--rsde-navy);
}
.avatar-img {
  border-radius: 50%; object-fit: cover; flex: 0 0 auto; display: inline-block;
  background: var(--rsde-soft); box-shadow: inset 0 0 0 1px var(--rsde-line);
}

/* ==========================================================================
   Shared admin page components — header, stat tiles, tables, badges
   ========================================================================== */

/* Page header: icon + title + subtitle, with right-aligned actions */
.page-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1rem; margin-bottom: 1.5rem; }
.page-head .ph-main { display: flex; align-items: center; gap: .85rem; min-width: 0; }
.page-head .ph-ico {
  width: 46px; height: 46px; border-radius: .8rem; flex: 0 0 auto;
  display: grid; place-items: center; font-size: 1.35rem; color: #fff;
  background: linear-gradient(135deg, var(--rsde-navy), var(--rsde-navy-d));
  box-shadow: 0 8px 18px rgba(40,38,107,.25);
}
.page-head h1 { font-size: 1.3rem; font-weight: 700; margin: 0; line-height: 1.15; color: var(--rsde-ink); }
.page-head .ph-sub { font-size: .82rem; color: var(--rsde-muted); margin-top: .1rem; }
.page-head .ph-actions { display: flex; gap: .5rem; flex-wrap: wrap; }

/* Stat tiles — icon chip + label + value (lighter than dashboard KPIs) */
.stat-tile {
  display: flex; align-items: center; gap: .85rem; height: 100%;
  background: #fff; border: 1px solid var(--rsde-line); border-radius: 1rem; padding: 1rem 1.1rem;
  transition: box-shadow .15s, transform .15s;
}
.stat-tile:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(31,35,48,.08); }
.stat-tile .st-ico {
  width: 44px; height: 44px; border-radius: .7rem; flex: 0 0 auto;
  display: grid; place-items: center; font-size: 1.25rem;
  background: var(--rsde-soft); color: var(--rsde-navy);
}
.stat-tile .st-label { font-size: .76rem; color: var(--rsde-muted); font-weight: 500; }
.stat-tile .st-val { font-size: 1.55rem; font-weight: 800; line-height: 1.1; color: var(--rsde-ink); }
.stat-tile .st-foot { font-size: .72rem; color: var(--rsde-muted); }
.st-navy   .st-ico { background: rgba(40,38,107,.10); color: var(--rsde-navy); }
.st-gold   .st-ico { background: rgba(201,162,39,.16); color: var(--rsde-gold-d); }
.st-flame  .st-ico { background: rgba(232,133,26,.13); color: var(--rsde-flame); }
.st-teal   .st-ico { background: rgba(43,179,163,.14); color: #0f8a7d; }
.st-success .st-ico { background: rgba(25,135,84,.12); color: #198754; }
.st-danger .st-ico { background: rgba(220,53,69,.11); color: #dc3545; }

/* Clickable stat-tile + data-quality marker */
.stat-link { text-decoration: none; color: inherit; }
.stat-link:hover, .stat-link:focus { color: inherit; }
.stat-link:focus-visible { outline: 2px solid var(--rsde-navy); outline-offset: 2px; }
.st-review { color: #c02c3c; font-weight: 700; }

/* Table polish — auto-applies to tables inside cards */
.rsde-card:has(> .table-responsive), .rsde-card:has(> .table) { overflow: hidden; }
.rsde-card thead th, table.rsde-table thead th {
  background: var(--rsde-soft); color: var(--rsde-muted);
  font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  border-bottom: 1px solid var(--rsde-line); padding: .7rem 1rem; white-space: nowrap;
}
.rsde-card tbody td, table.rsde-table tbody td { padding: .7rem 1rem; border-color: #f1f2f5; vertical-align: middle; }
.rsde-card tbody tr, table.rsde-table tbody tr { transition: background .12s; }
.rsde-card tbody tr:hover, table.rsde-table tbody tr:hover { background: var(--rsde-soft); }
.rsde-card tbody tr:last-child td { border-bottom: 0; }

/* Soft, modern status badges */
.badge-soft { font-weight: 600; padding: .38em .7em; border-radius: .5rem; font-size: .75rem; letter-spacing: .01em; }
.badge-soft-success   { background: rgba(25,135,84,.12);  color: #0f7a45; }
.badge-soft-warning   { background: rgba(201,162,39,.18); color: #946f00; }
.badge-soft-danger    { background: rgba(220,53,69,.12);  color: #c02c3c; }
.badge-soft-secondary { background: #eef0f4;              color: #5b6472; }
.badge-soft-info      { background: rgba(43,179,163,.14); color: #0f8a7d; }
.badge-soft-primary   { background: rgba(40,38,107,.10);  color: var(--rsde-navy); }

/* Empty states */
.empty-state { text-align: center; color: var(--rsde-muted); padding: 2.5rem 1rem; }
.empty-state .bi { font-size: 2.2rem; opacity: .45; display: block; margin-bottom: .5rem; }


/* ==========================================================================
   Public / marketing pages — hero, sections, features, CTA, auth, etc.
   ========================================================================== */

/* Decorative gradient text */
.text-gradient { background: linear-gradient(100deg, var(--rsde-gold-d), var(--rsde-flame));
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.text-gradient-navy { background: linear-gradient(100deg, var(--rsde-navy), #6360b8);
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.text-gold { color: var(--rsde-gold-d) !important; }

/* Eyebrow / pill label */
.eyebrow { display: inline-flex; align-items: center; gap: .5rem;
  font-size: .73rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--rsde-gold-d); background: rgba(201,162,39,.12); border: 1px solid rgba(201,162,39,.28);
  padding: .42rem .85rem; border-radius: 2rem; }
.eyebrow .bi { font-size: .9rem; }
.eyebrow-light { color: #ffe6a3; background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.22); }

/* Section rhythm */
.section { padding: 4.75rem 0; }
.section-sm { padding: 3rem 0; }
.section-soft { background: var(--rsde-soft); }
.section-navy { background: linear-gradient(160deg, var(--rsde-navy), var(--rsde-navy-d)); color: #fff; }
.section-head { max-width: 730px; }
.section-title { font-size: clamp(1.65rem, 3.2vw, 2.35rem); line-height: 1.15; color: var(--rsde-ink); margin: 0; }
.section-navy .section-title { color: #fff; }
.section-lead { color: var(--rsde-muted); font-size: 1.06rem; line-height: 1.65; }
.section-navy .section-lead { color: rgba(255,255,255,.78); }

/* ---- Hero (XL) ---- */
.hero-xl { position: relative; overflow: hidden;
  background: linear-gradient(180deg, #f3f4fb 0%, #ffffff 62%);
  border-bottom: 1px solid var(--rsde-line); }
.hero-xl .container { position: relative; z-index: 3; }
.hero-blob { position: absolute; border-radius: 50%; filter: blur(34px); z-index: 1; pointer-events: none; }
.hero-blob-1 { width: 440px; height: 440px; top: -140px; right: -90px;
  background: radial-gradient(circle, rgba(201,162,39,.45), transparent 70%); }
.hero-blob-2 { width: 380px; height: 380px; bottom: -160px; left: -110px;
  background: radial-gradient(circle, rgba(40,38,107,.30), transparent 70%); }
.hero-grid { position: absolute; inset: 0; z-index: 1; opacity: .5;
  background-image: linear-gradient(var(--rsde-line) 1px, transparent 1px),
                    linear-gradient(90deg, var(--rsde-line) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 35%, #000 25%, transparent 75%);
          mask-image: radial-gradient(ellipse 80% 60% at 50% 35%, #000 25%, transparent 75%); }
.hero-title { font-size: clamp(2.1rem, 5vw, 3.5rem); line-height: 1.06; letter-spacing: -.02em; color: var(--rsde-navy); }
.hero-lead { font-size: 1.18rem; color: var(--rsde-muted); max-width: 560px; line-height: 1.6; }

/* Rotating medallion around the logo */
.hero-medallion { position: relative; display: inline-grid; place-items: center; padding: 7%; }
.hero-medallion::before { content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, var(--rsde-gold), var(--rsde-flame), var(--rsde-navy), var(--rsde-gold));
  filter: blur(10px); opacity: .35; animation: rsde-spin 16s linear infinite; }
.hero-medallion::after { content: ""; position: absolute; inset: 6%; border-radius: 50%;
  background: #fff; box-shadow: inset 0 0 0 1px var(--rsde-line); }
.hero-medallion img { position: relative; z-index: 2; }
@keyframes rsde-spin { to { transform: rotate(360deg); } }

/* Floating mini stat cards over hero visual */
.float-card { position: absolute; z-index: 4; background: #fff; border: 1px solid var(--rsde-line);
  border-radius: .9rem; box-shadow: 0 18px 42px rgba(31,35,48,.14);
  padding: .65rem .85rem; display: flex; align-items: center; gap: .6rem;
  font-size: .82rem; font-weight: 700; color: var(--rsde-ink); }
.float-card .fc-ico { width: 34px; height: 34px; border-radius: .55rem; flex: 0 0 auto;
  display: grid; place-items: center; color: #fff; font-size: 1rem; }
.float-card small { display: block; font-weight: 500; color: var(--rsde-muted); font-size: .72rem; }
.float-1 { top: 14%; left: -4%; animation: rsde-floaty 5s ease-in-out infinite; }
.float-2 { bottom: 12%; right: -2%; animation: rsde-floaty 6s ease-in-out infinite .6s; }
@keyframes rsde-floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-11px); } }
@media (max-width: 991px) { .float-card { display: none; } }

/* ---- Trust band ---- */
.trust-band { background: #fff; border-bottom: 1px solid var(--rsde-line); }
.trust-item { display: flex; align-items: center; justify-content: center; gap: .55rem;
  color: var(--rsde-muted); font-weight: 600; font-size: .92rem; }
.trust-item .bi { color: var(--rsde-gold-d); font-size: 1.2rem; }

/* ---- Feature cards ---- */
.feature-card { height: 100%; background: #fff; border: 1px solid var(--rsde-line);
  border-radius: 1.1rem; padding: 1.65rem; transition: transform .18s, box-shadow .18s, border-color .18s;
  position: relative; overflow: hidden; }
.feature-card::after { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; opacity: 0;
  background: linear-gradient(90deg, var(--rsde-gold), var(--rsde-flame)); transition: opacity .18s; }
.feature-card:hover { transform: translateY(-5px); box-shadow: 0 22px 46px rgba(31,35,48,.10); }
.feature-card:hover::after { opacity: 1; }
.feature-ico { width: 56px; height: 56px; border-radius: .95rem; display: grid; place-items: center;
  font-size: 1.55rem; color: #fff; margin-bottom: 1.05rem; box-shadow: 0 12px 24px rgba(40,38,107,.22); }
.feature-card h5 { font-size: 1.12rem; margin-bottom: .5rem; }
.feature-card p { color: var(--rsde-muted); margin-bottom: 0; line-height: 1.6; }
.fi-navy   { background: linear-gradient(135deg, #34316f, #1c1a4f); }
.fi-gold   { background: linear-gradient(135deg, #d9b53a, #a8861a); box-shadow: 0 12px 24px rgba(201,162,39,.28); }
.fi-flame  { background: linear-gradient(135deg, #ef8f2e, #d4690f); box-shadow: 0 12px 24px rgba(232,133,26,.26); }
.fi-teal   { background: linear-gradient(135deg, #2bb3a3, #0f8a7d); box-shadow: 0 12px 24px rgba(15,138,125,.24); }
.fi-violet { background: linear-gradient(135deg, #7a6cf0, #4f3fd1); box-shadow: 0 12px 24px rgba(79,63,209,.24); }
.fi-rose   { background: linear-gradient(135deg, #f0708f, #d23f63); box-shadow: 0 12px 24px rgba(210,63,99,.22); }

/* ---- Stat band ---- */
.stat-band { background: linear-gradient(135deg, var(--rsde-navy), var(--rsde-navy-d)); color: #fff;
  border-radius: 1.5rem; position: relative; overflow: hidden; }
.stat-band::after { content: ""; position: absolute; right: -70px; top: -70px; width: 300px; height: 300px;
  border-radius: 50%; background: radial-gradient(circle, rgba(201,162,39,.30), transparent 70%); }
.stat-band .container, .stat-band .row { position: relative; z-index: 2; }
.stat-num { font-size: clamp(2rem, 4vw, 2.7rem); font-weight: 800; line-height: 1; }
.stat-cap { color: rgba(255,255,255,.72); font-size: .88rem; margin-top: .3rem; }
.stat-divider { border-left: 1px solid rgba(255,255,255,.14); }
@media (max-width: 767px) { .stat-divider { border-left: 0; } }

/* ---- How it works steps ---- */
.step { position: relative; background: #fff; border: 1px solid var(--rsde-line);
  border-radius: 1.1rem; padding: 1.6rem 1.4rem; height: 100%; transition: transform .18s, box-shadow .18s; }
.step:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(31,35,48,.09); }
.step-num { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center;
  font-weight: 800; font-size: 1.15rem; color: #fff; margin-bottom: 1rem;
  background: linear-gradient(135deg, var(--rsde-gold), var(--rsde-flame));
  box-shadow: 0 10px 20px rgba(232,133,26,.30); }
.step h5 { font-size: 1.08rem; }
.step p { color: var(--rsde-muted); margin: 0; line-height: 1.6; }
.step-arrow { position: absolute; top: 2.1rem; right: -1.55rem; z-index: 3; color: var(--rsde-line); font-size: 1.6rem; }
@media (max-width: 991px) { .step-arrow { display: none; } }

/* ---- Program / plan cards ---- */
.plan-card { position: relative; height: 100%; background: #fff; border: 1px solid var(--rsde-line);
  border-radius: 1.25rem; padding: 2rem 1.8rem; overflow: hidden; transition: transform .18s, box-shadow .18s; }
.plan-card:hover { transform: translateY(-4px); box-shadow: 0 22px 50px rgba(31,35,48,.10); }
.plan-pop { border: 1.5px solid var(--rsde-gold); box-shadow: 0 22px 50px rgba(201,162,39,.16); }
.plan-tag { display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; padding: .3rem .7rem; border-radius: 2rem;
  background: rgba(40,38,107,.08); color: var(--rsde-navy); }
.plan-pop .plan-tag { background: linear-gradient(135deg, var(--rsde-gold), var(--rsde-flame)); color: #fff; }
.plan-price { font-size: 2.3rem; font-weight: 800; color: var(--rsde-navy); line-height: 1; }
.plan-price small { font-size: .9rem; font-weight: 500; color: var(--rsde-muted); }
.plan-feature { display: flex; gap: .65rem; align-items: flex-start; padding: .42rem 0; color: var(--rsde-ink); }
.plan-feature .bi { color: #1f8a4d; font-size: 1.05rem; margin-top: .1rem; flex: 0 0 auto; }
.ribbon { position: absolute; top: 1.1rem; right: -3rem; width: 11rem; transform: rotate(45deg);
  text-align: center; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: #fff; padding: .3rem 0; background: linear-gradient(135deg, var(--rsde-gold), var(--rsde-flame));
  box-shadow: 0 6px 14px rgba(232,133,26,.30); }

/* ---- Curriculum / module list ---- */
.module-item { display: flex; gap: .9rem; align-items: flex-start; padding: 1rem 1.1rem;
  background: #fff; border: 1px solid var(--rsde-line); border-radius: .9rem; height: 100%; transition: .18s; }
.module-item:hover { border-color: rgba(201,162,39,.5); box-shadow: 0 12px 26px rgba(31,35,48,.07); }
.module-ico { width: 42px; height: 42px; border-radius: .65rem; flex: 0 0 auto; display: grid; place-items: center;
  font-size: 1.2rem; background: rgba(40,38,107,.08); color: var(--rsde-navy); }
.module-item h6 { margin: 0 0 .15rem; font-size: .98rem; }
.module-item p { margin: 0; font-size: .85rem; color: var(--rsde-muted); line-height: 1.5; }

/* ---- Quote / testimonial ---- */
.quote-card { background: #fff; border: 1px solid var(--rsde-line); border-radius: 1.1rem;
  padding: 1.7rem; height: 100%; position: relative; }
.quote-card .stars { color: var(--rsde-gold); font-size: .9rem; letter-spacing: .1em; }
.quote-card p { color: var(--rsde-ink); line-height: 1.65; margin: .7rem 0 1.1rem; }
.quote-foot { display: flex; align-items: center; gap: .7rem; }
.quote-avatar { width: 44px; height: 44px; border-radius: 50%; flex: 0 0 auto; display: grid; place-items: center;
  font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--rsde-navy), var(--rsde-navy-d)); }
.quote-name { font-weight: 700; font-size: .92rem; line-height: 1.1; }
.quote-role { font-size: .78rem; color: var(--rsde-muted); }

/* ---- FAQ accordion ---- */
.faq .accordion-item { border: 1px solid var(--rsde-line); border-radius: .9rem !important;
  margin-bottom: .7rem; overflow: hidden; background: #fff; }
.faq .accordion-button { font-weight: 600; color: var(--rsde-ink); padding: 1.05rem 1.2rem; }
.faq .accordion-button:not(.collapsed) { background: rgba(40,38,107,.05); color: var(--rsde-navy); box-shadow: none; }
.faq .accordion-button:focus { box-shadow: none; border-color: transparent; }
.faq .accordion-body { color: var(--rsde-muted); line-height: 1.65; padding-top: 0; }

/* ---- CTA band ---- */
.cta-band { position: relative; overflow: hidden; color: #fff; border-radius: 1.5rem;
  background: linear-gradient(135deg, var(--rsde-navy), var(--rsde-navy-d)); }
.cta-band::before { content: ""; position: absolute; right: -60px; top: -80px; width: 320px; height: 320px;
  border-radius: 50%; background: radial-gradient(circle, rgba(201,162,39,.32), transparent 70%); }
.cta-band::after { content: ""; position: absolute; left: -80px; bottom: -100px; width: 320px; height: 320px;
  border-radius: 50%; background: radial-gradient(circle, rgba(232,133,26,.22), transparent 70%); }
.cta-band .container, .cta-band > .row { position: relative; z-index: 2; }

/* ---- Info / contact rows ---- */
.info-card { background: #fff; border: 1px solid var(--rsde-line); border-radius: 1.1rem;
  padding: 1.6rem; height: 100%; transition: transform .18s, box-shadow .18s; }
.info-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(31,35,48,.09); }
.info-ico { width: 52px; height: 52px; border-radius: .9rem; display: grid; place-items: center;
  font-size: 1.4rem; color: #fff; margin-bottom: 1rem; }

/* ---- Auth split-screen ---- */
.auth-wrap { display: grid; grid-template-columns: 1.05fr 1fr; min-height: calc(100vh - 72px); }
.auth-aside { position: relative; overflow: hidden; color: #fff; padding: 3.5rem 3rem;
  display: flex; flex-direction: column; justify-content: center;
  background: linear-gradient(155deg, var(--rsde-navy), var(--rsde-navy-d)); }
.auth-aside::before { content: ""; position: absolute; top: -90px; right: -90px; width: 320px; height: 320px;
  border-radius: 50%; background: radial-gradient(circle, rgba(201,162,39,.30), transparent 70%); }
.auth-aside::after { content: ""; position: absolute; bottom: -120px; left: -100px; width: 300px; height: 300px;
  border-radius: 50%; background: radial-gradient(circle, rgba(232,133,26,.18), transparent 70%); }
.auth-aside .auth-aside-inner { position: relative; z-index: 2; max-width: 440px; }
.auth-bullet { display: flex; gap: .85rem; align-items: flex-start; margin-bottom: 1.1rem; }
.auth-bullet .bi { color: var(--rsde-gold); font-size: 1.3rem; margin-top: .1rem; flex: 0 0 auto; }
.auth-bullet strong { display: block; font-size: .98rem; }
.auth-bullet span { color: rgba(255,255,255,.72); font-size: .86rem; }
.auth-form-side { display: flex; align-items: center; justify-content: center; padding: 2.5rem 1.5rem; }
.auth-card { width: 100%; max-width: 430px; }
.auth-logo { width: 60px; height: 60px; border-radius: 1rem; display: grid; place-items: center;
  background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.16); }
@media (max-width: 991px) {
  .auth-wrap { grid-template-columns: 1fr; min-height: auto; }
  .auth-aside { display: none; }
}

/* Password reveal button in inputs */
.input-affix { position: relative; }
.input-affix .form-control { padding-right: 2.8rem; }
.input-affix .affix-btn { position: absolute; right: .3rem; top: 50%; transform: translateY(-50%);
  border: 0; background: transparent; color: var(--rsde-muted); width: 2.2rem; height: 2.2rem;
  border-radius: .5rem; display: grid; place-items: center; cursor: pointer; }
.input-affix .affix-btn:hover { color: var(--rsde-navy); background: var(--rsde-soft); }

/* ---- Reveal on scroll ---- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero-medallion::before, .float-card { animation: none; }
}

/* ---- Navbar scrolled state + login link ---- */
.rsde-nav { transition: box-shadow .2s, background .2s; }
.rsde-nav.scrolled { box-shadow: 0 6px 24px rgba(31,35,48,.08); background: rgba(255,255,255,.92);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.rsde-nav .nav-login { color: var(--rsde-navy); font-weight: 600; }

/* Decorative section divider dot-rule */
.dot-rule { display: inline-block; width: 46px; height: 4px; border-radius: 4px;
  background: linear-gradient(90deg, var(--rsde-gold), var(--rsde-flame)); }

/* Checklist */
.check-list { list-style: none; padding: 0; margin: 0; }
.check-list li { display: flex; gap: .65rem; align-items: flex-start; padding: .4rem 0; color: var(--rsde-ink); }
.check-list .bi { color: #1f8a4d; font-size: 1.1rem; margin-top: .1rem; flex: 0 0 auto; }
.section-navy .check-list li { color: rgba(255,255,255,.88); }
.section-navy .check-list .bi { color: var(--rsde-gold); }

/* ---- Enrol form: sectioned headers + sticky aside ---- */
.form-section-head { display: flex; align-items: center; gap: .75rem; margin: 1.9rem 0 1.15rem;
  padding-bottom: .75rem; border-bottom: 1px solid var(--rsde-line); }
.form-section-head:first-of-type { margin-top: 0; }
.fsh-ico { width: 40px; height: 40px; border-radius: .65rem; flex: 0 0 auto; display: grid; place-items: center;
  color: #fff; font-size: 1.1rem; box-shadow: 0 8px 16px rgba(40,38,107,.16); }
.form-section-head h6 { font-weight: 700; margin: 0; font-size: 1rem; color: var(--rsde-ink); }
.form-section-head small { color: var(--rsde-muted); }
.enrol-aside { position: sticky; top: 90px; }
@media (max-width: 991px) { .enrol-aside { position: static; } }
.pay-panel { background: linear-gradient(155deg, var(--rsde-navy), var(--rsde-navy-d)); color: #fff;
  border-radius: 1.1rem; padding: 1.5rem; position: relative; overflow: hidden; }
.pay-panel::after { content: ""; position: absolute; right: -50px; top: -50px; width: 180px; height: 180px;
  border-radius: 50%; background: radial-gradient(circle, rgba(201,162,39,.30), transparent 70%); }
.pay-panel > * { position: relative; z-index: 2; }
.pay-row { display: flex; justify-content: space-between; gap: 1rem; padding: .5rem 0; border-bottom: 1px solid rgba(255,255,255,.12); }
.pay-row:last-child { border-bottom: 0; }
.pay-row span { color: rgba(255,255,255,.72); font-size: .85rem; }
.pay-row strong { font-size: .9rem; text-align: right; }

/* Ruach Junior — "child under 16" toggle reveals the guardian block (CSS-only, no JS/CSP). */
.minor-toggle-wrap { padding: .85rem 1rem; border: 1px dashed var(--rsde-line); border-radius: .8rem;
  background: rgba(40,38,107,.03); }
.minor-check { margin-right: .15rem; }
.guardian-block { display: none !important; }
.minor-check:checked ~ .guardian-block { display: flex !important; }
.guardian-note { font-size: .85rem; color: var(--rsde-muted); background: rgba(15,138,125,.09);
  border-radius: .5rem; padding: .45rem .65rem; }

/* ==========================================================================
   Overseer Command Center — executive AI dashboard
   ========================================================================== */

/* Executive top bar: greeting + live clock + controls */
.exec-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .75rem 1rem; margin-bottom: 1.4rem; }
.exec-hello { font-size: 1.35rem; font-weight: 800; color: var(--rsde-ink); line-height: 1.1; margin: 0; }
.exec-hello .wave { color: var(--rsde-gold); }
.exec-sub { font-size: .82rem; color: var(--rsde-muted); margin-top: .15rem; }
.exec-controls { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.exec-clock { display: inline-flex; align-items: center; gap: .5rem; background: #fff;
  border: 1px solid var(--rsde-line); border-radius: .7rem; padding: .5rem .8rem;
  font-variant-numeric: tabular-nums; font-weight: 700; color: var(--rsde-ink); }
.exec-clock .ec-time { font-size: 1rem; }
.exec-clock .ec-date { font-size: .74rem; color: var(--rsde-muted); font-weight: 600; }
.exec-clock .bi { color: var(--rsde-navy); }

/* Auto-refresh toggle pill */
.refresh-pill { display: inline-flex; align-items: center; gap: .5rem; background: #fff;
  border: 1px solid var(--rsde-line); border-radius: .7rem; padding: .5rem .8rem; cursor: pointer;
  font-size: .82rem; font-weight: 600; color: var(--rsde-muted); transition: .15s; }
.refresh-pill:hover { border-color: var(--rsde-navy); color: var(--rsde-navy); }
.refresh-pill.on { background: rgba(43,179,163,.10); border-color: #2bb3a3; color: #0f8a7d; }
.refresh-pill .dot { width: 9px; height: 9px; border-radius: 50%; background: #c2c7d0; flex: 0 0 auto; }
.refresh-pill.on .dot { background: #2bb3a3; box-shadow: 0 0 0 rgba(43,179,163,.55); animation: pulse-ring 1.8s infinite; }

/* Live pulse dot (green = live) */
.pulse-dot { width: 10px; height: 10px; border-radius: 50%; background: #2bb3a3; display: inline-block;
  flex: 0 0 auto; box-shadow: 0 0 0 rgba(43,179,163,.5); animation: pulse-ring 1.8s infinite; }
.pulse-dot.off { background: #c2c7d0; animation: none; box-shadow: none; }
@keyframes pulse-ring {
  0%   { box-shadow: 0 0 0 0 rgba(43,179,163,.5); }
  70%  { box-shadow: 0 0 0 9px rgba(43,179,163,0); }
  100% { box-shadow: 0 0 0 0 rgba(43,179,163,0); }
}

/* AI Executive Briefing — the centerpiece */
.ai-brief { position: relative; overflow: hidden; color: #fff; border-radius: 1.25rem;
  padding: 1.6rem 1.75rem; background: linear-gradient(135deg, #2f2c78, var(--rsde-navy-d)); }
.ai-brief::before { content: ""; position: absolute; right: -70px; top: -90px; width: 340px; height: 340px;
  border-radius: 50%; background: radial-gradient(circle, rgba(201,162,39,.30), transparent 70%); }
.ai-brief::after { content: ""; position: absolute; left: -90px; bottom: -110px; width: 320px; height: 320px;
  border-radius: 50%; background: radial-gradient(circle, rgba(232,133,26,.20), transparent 70%); }
.ai-brief > * { position: relative; z-index: 2; }
.ai-badge { display: inline-flex; align-items: center; gap: .4rem; font-size: .72rem; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase; padding: .28rem .6rem; border-radius: 1rem;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.18); }
.ai-badge .bi { color: var(--rsde-gold); }
.ai-robot { width: 54px; height: 54px; border-radius: 1rem; flex: 0 0 auto; display: grid; place-items: center;
  font-size: 1.7rem; color: #fff; background: linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,.05));
  border: 1px solid rgba(255,255,255,.20); }
.ai-headline { font-size: 1.32rem; font-weight: 800; line-height: 1.25; margin: .3rem 0 0; }
.ai-greeting { color: rgba(255,255,255,.72); font-size: .84rem; }

/* Health score ring inside the brief (light-on-dark variant of .gauge) */
.score-ring { --p: 0; --c: var(--rsde-gold);
  position: relative; width: 132px; height: 132px; border-radius: 50%; flex: 0 0 auto;
  background: conic-gradient(var(--c) calc(var(--p) * 1%), rgba(255,255,255,.14) 0);
  display: grid; place-items: center; margin: 0 auto; }
.score-ring::before { content: ""; position: absolute; width: 100px; height: 100px; border-radius: 50%;
  background: var(--rsde-navy-d); box-shadow: inset 0 0 0 1px rgba(255,255,255,.10); }
.score-ring .sr-in { position: relative; text-align: center; line-height: 1; }
.score-ring .sr-num { font-size: 2rem; font-weight: 800; }
.score-ring .sr-lab { font-size: .6rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255,255,255,.6); }
.score-grade { display: inline-flex; align-items: center; gap: .35rem; font-weight: 800; font-size: .8rem;
  padding: .2rem .6rem; border-radius: 1rem; background: rgba(255,255,255,.14); }

/* Insight list (inside brief, dark bg) */
.insight-item { display: flex; gap: .7rem; align-items: flex-start; padding: .5rem 0;
  border-top: 1px solid rgba(255,255,255,.10); }
.insight-item:first-child { border-top: 0; }
.insight-ico { width: 30px; height: 30px; border-radius: .55rem; flex: 0 0 auto; display: grid; place-items: center;
  font-size: .95rem; background: rgba(255,255,255,.10); }
.insight-item .it-txt { font-size: .86rem; color: rgba(255,255,255,.90); line-height: 1.35; }
.insight-ico.t-success { color: #7ee2a8; } .insight-ico.t-danger { color: #ff9f9f; }
.insight-ico.t-warning { color: #ffd77a; } .insight-ico.t-info { color: #8fe6db; }
.insight-ico.t-secondary { color: rgba(255,255,255,.7); }

/* Recommendation chips */
.reco-wrap { display: flex; flex-wrap: wrap; gap: .5rem; }
.reco-chip { display: inline-flex; align-items: center; gap: .45rem; font-size: .8rem; font-weight: 600;
  padding: .45rem .75rem; border-radius: .7rem; background: #fff; border: 1px solid var(--rsde-line);
  color: var(--rsde-ink); transition: .15s; }
.reco-chip .bi { color: var(--rsde-gold-d); }
.reco-chip:hover { border-color: var(--rsde-gold); box-shadow: 0 8px 18px rgba(201,162,39,.14); }

/* Chart containers — bounded height so Chart.js stays responsive */
.chart-box { position: relative; width: 100%; height: 260px; }
.chart-box.sm { height: 200px; }
.chart-mid { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; pointer-events: none; }
.chart-mid .cm-num { font-size: 1.5rem; font-weight: 800; color: var(--rsde-ink); line-height: 1; }
.chart-mid .cm-lab { font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--rsde-muted); }

/* Live-class monitor panel */
.live-panel { border-radius: 1rem; border: 1px solid var(--rsde-line); background: #fff; padding: 1.1rem 1.2rem; height: 100%; }
.live-head { display: flex; align-items: center; gap: .5rem; font-weight: 700; color: var(--rsde-ink); }
.live-off { color: var(--rsde-muted); font-size: .86rem; }
.watch-big { font-size: 2.6rem; font-weight: 800; line-height: 1; color: var(--rsde-navy); font-variant-numeric: tabular-nums; }

/* Activity feed */
.feed-item { display: flex; gap: .7rem; align-items: flex-start; padding: .6rem 0; border-top: 1px solid #f1f2f5; }
.feed-item:first-child { border-top: 0; }
.feed-ico { width: 32px; height: 32px; border-radius: .55rem; flex: 0 0 auto; display: grid; place-items: center;
  font-size: .95rem; background: var(--rsde-soft); color: var(--rsde-navy); }
.feed-body { min-width: 0; }
.feed-txt { font-size: .84rem; color: var(--rsde-ink); line-height: 1.3; }
.feed-txt b { font-weight: 700; }
.feed-time { font-size: .72rem; color: var(--rsde-muted); }

/* Metric delta chip (up/down vs. a reference) */
.metric-delta { display: inline-flex; align-items: center; gap: .2rem; font-size: .74rem; font-weight: 700;
  padding: .1rem .45rem; border-radius: 1rem; }
.metric-delta.up { background: rgba(25,135,84,.12); color: #0f7a45; }
.metric-delta.down { background: rgba(220,53,69,.11); color: #c02c3a; }
.metric-delta.flat { background: var(--rsde-soft); color: var(--rsde-muted); }

/* Risk level dots for the watchlist */
.risk-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: 0 0 auto; }
.risk-dot.high { background: #dc3545; } .risk-dot.medium { background: #c9a227; } .risk-dot.low { background: #2bb3a3; }

@media (max-width: 575px) {
  .exec-hello { font-size: 1.15rem; }
  .ai-headline { font-size: 1.12rem; }
  .ai-brief { padding: 1.3rem 1.25rem; }
  .watch-big { font-size: 2.1rem; }
}

/* ==========================================================================
   Overseer People Directory — groups, staff cards, contact modal
   ========================================================================== */

/* Toolbar: segmented view switch + search */
.dir-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-bottom: 1.25rem; }
.view-switch { display: inline-flex; background: #fff; border: 1px solid var(--rsde-line); border-radius: .75rem; padding: .25rem; gap: .2rem; }
.view-pill { border: 0; background: transparent; color: var(--rsde-muted); font-weight: 600; font-size: .84rem;
  padding: .4rem .75rem; border-radius: .55rem; cursor: pointer; display: inline-flex; align-items: center; gap: .4rem; transition: .15s; white-space: nowrap; }
.view-pill:hover { color: var(--rsde-navy); }
.view-pill.active { background: linear-gradient(135deg, var(--rsde-navy), var(--rsde-navy-d)); color: #fff; box-shadow: 0 6px 14px rgba(40,38,107,.22); }
.view-pill .vp-count { font-size: .72rem; background: rgba(0,0,0,.08); padding: .05rem .4rem; border-radius: 1rem; }
.view-pill.active .vp-count { background: rgba(255,255,255,.22); }
.dir-search { position: relative; flex: 1 1 220px; max-width: 360px; margin-left: auto; }
.dir-search .bi { position: absolute; left: .8rem; top: 50%; transform: translateY(-50%); color: var(--rsde-muted); }
.dir-search input { padding-left: 2.2rem; border-radius: .7rem; }

/* Group card + member faces */
.group-card .gc-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; }
.gc-pastor { display: flex; align-items: center; gap: .6rem; width: 100%; text-align: left; cursor: pointer;
  background: var(--rsde-soft); border: 1px solid var(--rsde-line); border-radius: .8rem; padding: .5rem .65rem; transition: .15s; }
.gc-pastor:hover { border-color: var(--rsde-navy); box-shadow: 0 8px 18px rgba(40,38,107,.10); }
.gc-pastor .gcp-name { font-weight: 700; font-size: .88rem; color: var(--rsde-ink); line-height: 1.1; }
.gc-pastor .gcp-role { font-size: .72rem; color: var(--rsde-muted); }
.member-grid { display: flex; flex-wrap: wrap; gap: .45rem; }
.member-face { position: relative; border: 0; background: transparent; padding: 0; cursor: pointer; border-radius: 50%;
  line-height: 0; transition: transform .12s; }
.member-face:hover { transform: translateY(-2px) scale(1.06); z-index: 2; }
.member-face .risk-flag { position: absolute; right: -1px; bottom: -1px; width: 12px; height: 12px; border-radius: 50%;
  border: 2px solid #fff; }
.risk-flag.high { background: #dc3545; } .risk-flag.medium { background: #c9a227; } .risk-flag.low { background: #2bb3a3; }
.member-more { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: .76rem;
  background: rgba(40,38,107,.08); color: var(--rsde-navy); }

/* Staff card (pastors / workers / management) */
.staff-card { display: flex; align-items: center; gap: .8rem; width: 100%; text-align: left; height: 100%;
  background: #fff; border: 1px solid var(--rsde-line); border-radius: 1rem; padding: .9rem 1rem; cursor: pointer; transition: .15s; }
.staff-card:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(31,35,48,.09); border-color: var(--rsde-navy); }
.staff-card .sc-name { font-weight: 700; color: var(--rsde-ink); line-height: 1.15; }
.staff-card .sc-sub { font-size: .76rem; color: var(--rsde-muted); }
.staff-card .sc-go { margin-left: auto; color: var(--rsde-muted); flex: 0 0 auto; }
.staff-card.is-off { opacity: .55; }

/* Contact modal */
.person-hero { position: relative; overflow: hidden; color: #fff; padding: 1.4rem 1.5rem;
  background: linear-gradient(135deg, #2f2c78, var(--rsde-navy-d)); border-top-left-radius: var(--bs-modal-border-radius, .5rem); border-top-right-radius: var(--bs-modal-border-radius, .5rem); }
.person-hero::after { content: ""; position: absolute; right: -50px; top: -60px; width: 200px; height: 200px;
  border-radius: 50%; background: radial-gradient(circle, rgba(201,162,39,.28), transparent 70%); }
.person-hero > * { position: relative; z-index: 2; }
.person-hero .ph-face img, .person-hero .ph-face .avatar-mono { width: 66px; height: 66px; font-size: 1.4rem;
  box-shadow: 0 0 0 3px rgba(255,255,255,.25); }
.person-hero .ph-name { font-size: 1.2rem; font-weight: 800; line-height: 1.15; }
.person-hero .ph-role { font-size: .82rem; color: rgba(255,255,255,.78); }
.person-hero .ph-close { position: absolute; top: .8rem; right: .9rem; color: #fff; opacity: .85; filter: none; }
.person-meta { display: grid; grid-template-columns: auto 1fr; gap: .35rem .9rem; font-size: .86rem; margin: 0; }
.person-meta dt { color: var(--rsde-muted); font-weight: 600; }
.person-meta dd { margin: 0; color: var(--rsde-ink); font-weight: 500; word-break: break-word; }
.contact-actions { display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem; }
.contact-btn { display: flex; align-items: center; justify-content: center; gap: .5rem; font-weight: 600; font-size: .86rem;
  padding: .6rem .5rem; border-radius: .75rem; border: 1px solid var(--rsde-line); background: #fff; color: var(--rsde-ink);
  text-decoration: none; cursor: pointer; transition: .15s; }
.contact-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 20px rgba(31,35,48,.10); }
.contact-btn .bi { font-size: 1.05rem; }
.contact-btn.cb-call { border-color: rgba(40,38,107,.25); color: var(--rsde-navy); }
.contact-btn.cb-wa { border-color: rgba(37,211,102,.4); color: #128c4b; }
.contact-btn.cb-wa .bi { color: #25d366; }
.contact-btn.cb-mail { border-color: rgba(201,162,39,.4); color: var(--rsde-gold-d); }
.contact-btn.cb-msg { border-color: rgba(43,179,163,.4); color: #0f8a7d; }
.contact-btn.disabled { opacity: .4; pointer-events: none; }
.msg-box textarea { border-radius: .7rem; }
.msg-status { font-size: .82rem; }

@media (max-width: 400px) { .contact-actions { grid-template-columns: 1fr; } }

/* Insights: risk distribution + hero callouts */
.dist-row { display: flex; align-items: center; gap: .7rem; margin-bottom: .6rem; }
.dist-row .dist-lab { width: 92px; font-size: .82rem; font-weight: 600; color: var(--rsde-ink); flex: 0 0 auto; }
.dist-row .dist-track { flex: 1; height: 12px; border-radius: 8px; background: var(--rsde-soft); overflow: hidden; }
.dist-row .dist-fill { height: 100%; border-radius: 8px; }
.dist-row .dist-num { width: 30px; text-align: right; font-weight: 700; font-size: .85rem; flex: 0 0 auto; }
.callout { border-radius: 1rem; padding: 1rem 1.1rem; color: #fff; position: relative; overflow: hidden; height: 100%; }
.callout.good { background: linear-gradient(135deg, #2bb3a3, #0f8a7d); }
.callout.bad { background: linear-gradient(135deg, #ef8f2e, #d4690f); }
.callout .co-lab { font-size: .74rem; text-transform: uppercase; letter-spacing: .08em; opacity: .85; }
.callout .co-name { font-size: 1.15rem; font-weight: 800; line-height: 1.15; margin-top: .1rem; }
.callout .co-foot { font-size: .82rem; opacity: .9; margin-top: .2rem; }
.callout .bi { position: absolute; right: -6px; bottom: -10px; font-size: 4rem; opacity: .18; }

/* ==========================================================================
   Users & Staff — account cards + management modals
   ========================================================================== */
.user-card { position: relative; overflow: hidden; height: 100%;
  background: #fff; border: 1px solid var(--rsde-line); border-radius: 1.1rem; padding: 1.15rem 1.2rem;
  display: flex; flex-direction: column; transition: transform .16s, box-shadow .16s, border-color .16s; }
.user-card:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(31,35,48,.11); border-color: transparent; }
.user-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--uc-accent, var(--rsde-navy)); }
.user-card.is-self { box-shadow: 0 0 0 2px rgba(201,162,39,.35); }
.user-card.is-off { opacity: .64; }
.uc-head { display: flex; align-items: flex-start; gap: .85rem; }
.uc-face { flex: 0 0 auto; line-height: 0; }
.uc-face img, .uc-face .avatar-mono { width: 54px; height: 54px; font-size: 1.15rem;
  box-shadow: 0 0 0 3px var(--uc-ring, rgba(40,38,107,.12)); }
.uc-id { min-width: 0; flex: 1; }
.uc-name { font-weight: 700; color: var(--rsde-ink); line-height: 1.2; }
.uc-role { display: inline-flex; align-items: center; gap: .3rem; font-size: .72rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; color: var(--uc-accent, var(--rsde-navy)); margin-top: .1rem; }
.uc-status { position: absolute; top: 1rem; right: 1.1rem; display: inline-flex; align-items: center; gap: .35rem;
  font-size: .7rem; font-weight: 700; color: var(--rsde-muted); }
.uc-status .st-dot { width: 8px; height: 8px; border-radius: 50%; background: #c2c7d0; }
.uc-status.on .st-dot { background: #2bb3a3; box-shadow: 0 0 0 rgba(43,179,163,.5); animation: pulse-ring 1.8s infinite; }
.uc-status.on { color: #0f8a7d; }
.uc-contact { margin-top: .95rem; display: flex; flex-direction: column; gap: .35rem; }
.uc-contact a, .uc-contact span { font-size: .82rem; color: var(--rsde-muted); text-decoration: none;
  display: flex; align-items: center; gap: .55rem; min-width: 0; }
.uc-contact a { transition: color .12s; } .uc-contact a:hover { color: var(--rsde-navy); }
.uc-contact .bi { color: var(--uc-accent, var(--rsde-navy)); flex: 0 0 auto; opacity: .85; }
.uc-contact .txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uc-foot { margin-top: auto; padding-top: .95rem; display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; }
.uc-foot .btn { --bs-btn-padding-y: .3rem; --bs-btn-padding-x: .6rem; --bs-btn-font-size: .8rem; }
.uc-locked { font-size: .78rem; color: var(--rsde-muted); display: inline-flex; align-items: center; gap: .4rem; }

/* Modal profile header reused from person-hero; role chips in create/edit */
.role-hint { font-size: .76rem; color: var(--rsde-muted); }
.modal .avatar-preview { width: 56px; height: 56px; border-radius: 50%; object-fit: cover;
  box-shadow: inset 0 0 0 1px var(--rsde-line); background: var(--rsde-soft); }

/* ---- Presence (online / last seen) ---- */
.uc-face { position: relative; }
.presence-ring { position: absolute; right: -1px; bottom: -1px; width: 16px; height: 16px; border-radius: 50%;
  border: 3px solid #fff; background: #c2c7d0; }
.presence-ring.on { background: #2bb3a3; }
.presence-ring.idle { background: #c9a227; }
.presence-ring.off { background: #c2c7d0; }
.presence-ring.on::after { content: ""; position: absolute; inset: -3px; border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(43,179,163,.5); animation: pulse-ring 1.8s infinite; }
.uc-seen { font-size: .74rem; color: var(--rsde-muted); display: inline-flex; align-items: center; gap: .35rem; }
.uc-seen.is-online { color: #0f8a7d; font-weight: 600; }
.seen-dot { width: 7px; height: 7px; border-radius: 50%; background: #c2c7d0; flex: 0 0 auto; }
.seen-dot.on { background: #2bb3a3; } .seen-dot.idle { background: #c9a227; }

/* Who's-online widget (dashboards) */
.online-row { display: flex; align-items: center; gap: .7rem; padding: .5rem 0; border-top: 1px solid #f1f2f5; }
.online-row:first-child { border-top: 0; }
.online-row .or-face { position: relative; flex: 0 0 auto; line-height: 0; }
.online-row .or-face .presence-ring { width: 13px; height: 13px; border-width: 2px; }
.online-row .or-name { font-weight: 600; font-size: .86rem; color: var(--rsde-ink); line-height: 1.1; }
.online-row .or-role { font-size: .72rem; color: var(--rsde-muted); }
.online-row .or-when { margin-left: auto; font-size: .72rem; color: var(--rsde-muted); white-space: nowrap; }
.online-count-badge { display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; font-size: .78rem;
  color: #0f8a7d; background: rgba(43,179,163,.12); padding: .2rem .55rem; border-radius: 1rem; }
.online-count-badge .dot { width: 8px; height: 8px; border-radius: 50%; background: #2bb3a3;
  box-shadow: 0 0 0 rgba(43,179,163,.5); animation: pulse-ring 1.8s infinite; }

/* Engagement + activity (Phase 19) */
.eng-tile { border: 1px solid var(--rsde-line); border-radius: .8rem; padding: .7rem .8rem; height: 100%; background: #fff; }
.eng-tile.et-accent { background: linear-gradient(135deg, rgba(40,38,107,.05), rgba(43,179,163,.06)); border-color: rgba(43,179,163,.25); }
.eng-tile .et-label { font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; color: var(--rsde-muted); font-weight: 700; }
.eng-tile .et-val { font-size: 1.5rem; font-weight: 800; color: var(--rsde-ink); line-height: 1.1; }
.eng-tile .et-val small { font-size: .8rem; font-weight: 600; color: var(--rsde-muted); }
.eng-tile .et-sub { font-size: .71rem; color: var(--rsde-muted); }
.eng-gauge { height: 7px; border-radius: 4px; background: #eef0f4; overflow: hidden; margin-top: .4rem; }
.eng-gauge > span { display: block; height: 100%; border-radius: 4px; background: var(--rsde-navy); }

.mode-split { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.mode-card { border: 1px solid var(--rsde-line); border-radius: .8rem; padding: .6rem .7rem; }
.mode-card.onsite { border-left: 3px solid var(--rsde-navy); }
.mode-card.online { border-left: 3px solid #2bb3a3; }
.mode-card .mc-head { display: flex; align-items: center; justify-content: space-between; gap: .4rem; }
.mode-card .mc-title { font-weight: 700; font-size: .82rem; display: inline-flex; align-items: center; gap: .35rem; color: var(--rsde-ink); }
.mode-card .mc-avg { font-weight: 800; font-size: 1.05rem; color: var(--rsde-ink); }
.mode-card .mc-meta { font-size: .71rem; color: var(--rsde-muted); margin-top: .2rem; }

.mode-chip { font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; padding: .1rem .4rem; border-radius: 1rem; }
.mode-chip.onsite { color: var(--rsde-navy); background: rgba(40,38,107,.1); }
.mode-chip.online { color: #0f8a7d; background: rgba(43,179,163,.14); }

.watch-item { display: flex; align-items: center; gap: .6rem; padding: .45rem 0; border-top: 1px dashed #eef0f4; }
.watch-item:first-child { border-top: 0; }
.watch-item .wi-name { font-weight: 600; font-size: .84rem; color: var(--rsde-ink); line-height: 1.15; }
.watch-item .wi-reason { font-size: .71rem; color: var(--rsde-muted); }
.watch-item .wi-score { margin-left: auto; font-weight: 800; font-size: .82rem; padding: .12rem .5rem; border-radius: 1rem; white-space: nowrap; }
.score-engaged  { color: #1f8a4d; background: rgba(31,138,77,.12); }
.score-moderate { color: #a8861a; background: rgba(201,162,39,.16); }
.score-at_risk  { color: #c0491f; background: rgba(232,133,26,.16); }

.act-item { display: flex; align-items: flex-start; gap: .6rem; padding: .45rem 0; border-top: 1px solid #f4f5f8; }
.act-item:first-child { border-top: 0; }
.act-ico { width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto; font-size: .9rem; background: rgba(40,38,107,.08); color: var(--rsde-navy); }
.act-ico.gold { background: rgba(201,162,39,.16); color: var(--rsde-gold-d); }
.act-ico.info { background: rgba(43,179,163,.14); color: #0f8a7d; }
.act-ico.primary { background: rgba(40,38,107,.1); color: var(--rsde-navy); }
.act-ico.warning { background: rgba(232,133,26,.15); color: var(--rsde-flame); }
.act-ico.danger { background: rgba(224,49,49,.12); color: #c92a2a; }
.act-ico.secondary { background: #eef0f4; color: #6b7280; }
.act-body { min-width: 0; }
.act-txt { font-size: .84rem; color: var(--rsde-ink); line-height: 1.2; }
.act-time { font-size: .71rem; color: var(--rsde-muted); margin-top: .1rem; }

@media (max-width: 575.98px) { .mode-split { grid-template-columns: 1fr; } }
.min-w-0 { min-width: 0; }

/* Engagement drill-down table */
.eng-table thead th { font-size: .72rem; text-transform: uppercase; letter-spacing: .03em; color: var(--rsde-muted);
  border-bottom: 2px solid var(--rsde-line); white-space: nowrap; }
.eng-table tbody td { border-top: 1px solid #f1f2f5; }
.eng-table tbody tr:hover { background: #fafbfc; }
.eng-sort { cursor: pointer; user-select: none; }
.eng-sort:hover { color: var(--rsde-navy); }
.eng-sort .eng-sort-ico { font-size: .72rem; opacity: .45; margin-left: .15rem; }
.eng-sort.is-active { color: var(--rsde-navy); }
.eng-sort.is-active .eng-sort-ico { opacity: 1; color: var(--rsde-gold-d); }

/* Admissions review flags */
tr.app-flagged > td:first-child { box-shadow: inset 3px 0 0 var(--rsde-gold); }
.app-flags { display: flex; flex-wrap: wrap; gap: .25rem; }
.app-flags .badge-soft { font-size: .66rem; padding: .24em .5em; }
.app-flag-banner { border-left: 3px solid var(--rsde-gold); background: rgba(201,162,39,.06); }

/* Passport link chip on the queue avatar */
.av-link { position: relative; display: inline-block; line-height: 0; flex: 0 0 auto; }
.av-cam { position: absolute; right: -3px; bottom: -3px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--rsde-navy); color: #fff; display: grid; place-items: center; font-size: .58rem; border: 2px solid #fff; }
.av-link:hover .av-cam { background: var(--rsde-gold-d); }

/* Application document links (passport / proof) */
.doc-link { display: flex; align-items: center; gap: .55rem; padding: .6rem .8rem; border: 1px solid var(--rsde-line);
  border-radius: .6rem; text-decoration: none; color: var(--rsde-ink); font-weight: 600; margin-bottom: .5rem;
  transition: border-color .15s, background .15s, color .15s; }
.doc-link:last-child { margin-bottom: 0; }
.doc-link:hover { border-color: var(--rsde-navy); background: var(--rsde-soft); color: var(--rsde-navy); }
.doc-link.is-empty { color: var(--rsde-muted); font-weight: 500; background: #fafbfc; cursor: default; }
.doc-link .doc-drive { font-size: .66rem; font-weight: 700; color: #0f8a7d; background: rgba(43,179,163,.14);
  padding: .1rem .45rem; border-radius: 1rem; }