:root {
  --cyan: #00C4E0;
  --cyan-dark: #0096B0;
  --magenta: #FF2D95;
  --yellow: #FFE600;
  --black: #0A0A0A;
  --ink: #111827;
  --muted: #6B7280;
  --line: #E5E7EB;
  --bg: #F0FDFF;
  --white: #FFFFFF;
  --green: #10B981;
  --red: #EF4444;
  --radius: 18px;

  --blue: #00C4E0;
  --navy: #023047;
  --blue2: #00A8C5;
  --gold: #FFE600;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "Source Sans 3", sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.5;
}
a { color: var(--blue); text-decoration: none; }
button, input, textarea, select { font: inherit; }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: 260px 1fr; }
.sidebar {
  background: var(--navy);
  padding: 24px 18px;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
}
.brand { display: flex; align-items: center; gap: 11px; color: inherit; }
.brand-mark {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: var(--gold);
  display: grid;
  place-items: center;
  color: #023047;
  font-weight: 900;
  flex: none;
}
.brand strong { display: block; font-size: 18px; }
.brand small { display: block; font-size: 11px; color: #A5F3FC; }
.sidebar nav { display: grid; gap: 6px; margin-top: 30px; }
.sidebar nav a { color: #E0F7FA; padding: 10px 12px; border-radius: 11px; }
.sidebar nav a:hover,
.sidebar nav a.active { background: #0369A1; color: white; }
.sidebar-foot {
  margin-top: auto;
  border-top: 1px solid rgba(255,255,255,.14);
  padding-top: 16px;
  color: white;
}
.sidebar-foot small { display: block; color: #A5F3FC; }
.sidebar-foot strong { font-size: 14px; }

.main { min-width: 0; }
.topbar {
  background: white;
  border-bottom: 1px solid var(--line);
  padding: 14px 28px;
  min-height: 82px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 5;
}
.topbar h1 { font-size: 21px; margin: 2px 0; }
.eyebrow { color: var(--blue); font-size: 12px; font-weight: 800; }
.user-menu { display: flex; align-items: center; gap: 10px; }
.user-menu small { display: block; color: var(--muted); }
.quiet-link { font-size: 13px; margin-left: 8px; }
.avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #E0F7FA;
  display: grid;
  place-items: center;
  color: var(--blue);
  font-weight: 900;
  flex: none;
}

.content { padding: 28px; max-width: 1500px; margin: auto; }
.hero {
  background: linear-gradient(135deg, var(--cyan), #0096B0);
  color: white;
  border-radius: 26px;
  padding: 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  overflow: hidden;
  position: relative;
}
.hero:after {
  content: "";
  position: absolute;
  width: 260px;
  height: 260px;
  border: 48px solid rgba(255,255,255,.07);
  border-radius: 50%;
  right: -70px;
  top: -90px;
}
.hero h2 { font-size: 31px; margin: 0 0 8px; }
.hero p { color: #E0F7FA; max-width: 760px; margin: 0; }
.tag {
  display: inline-block;
  background: rgba(255,230,0,.18);
  border: 1px solid rgba(255,230,0,.4);
  color: #FFF7B0;
  padding: 6px 10px;
  border-radius: 99px;
  font-size: 12px;
  margin-bottom: 14px;
}

.stats-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; margin: 20px 0; }
.stat-card, .card {
  background: white;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: 0 6px 18px rgba(0,0,0,.04);
}
.stat-card strong { display: block; font-size: 29px; }
.stat-card span { display: block; color: var(--muted); font-size: 12px; }
.stat-card small { display: block; color: var(--green); margin-top: 8px; }

.two-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 18px; }
.cards-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.section-head h2, .card h2 { margin: 0; font-size: 20px; }
.section-head p { margin: 3px 0 0; color: var(--muted); }
.space-top { margin-top: 24px; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 11px;
  padding: 10px 14px;
  font-weight: 800;
  cursor: pointer;
}
.btn.primary { background: var(--blue); color: white; }
.btn.gold { background: var(--gold); color: #023047; }
.btn.soft { background: #E0F7FA; color: #023047; }
.btn.ghost { border: 1px solid rgba(255,255,255,.35); color: white; }
.full-btn { width: 100%; }

.list { display: grid; gap: 11px; }
.list-item {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px;
  display: flex;
  justify-content: space-between;
  gap: 14px;
}
.list-item h3 { margin: 0 0 3px; font-size: 15px; }
.list-item p, .list-item small { margin: 0; color: var(--muted); }
.badge {
  display: inline-flex;
  background: #E0F7FA;
  color: #0369A1;
  border-radius: 99px;
  padding: 5px 9px;
  font-size: 11px;
  font-weight: 800;
  align-self: flex-start;
}
.badge.green { background: #D1FAE5; color: var(--green); }

.kpi { display: flex; justify-content: space-between; margin: 14px 0 6px; }
.progress { height: 8px; background: #E5E7EB; border-radius: 99px; overflow: hidden; }
.progress i { display: block; height: 100%; background: var(--blue2); }

.notice {
  background: #FEF9C3;
  border: 1px solid #FDE047;
  color: #854D0E;
  padding: 13px;
  border-radius: 12px;
  margin-top: 22px;
  font-size: 13px;
}
.muted { color: var(--muted); }
.empty {
  border: 1px dashed #CBD5E1;
  border-radius: 14px;
  padding: 28px;
  text-align: center;
  color: var(--muted);
}

table { width: 100%; border-collapse: collapse; }
.table-wrap { overflow: auto; }
th, td {
  text-align: left;
  padding: 12px 10px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  font-size: 13px;
}
th { font-size: 11px; text-transform: uppercase; color: var(--muted); }

.person { display: flex; gap: 10px; align-items: center; }
.person strong, .person small { display: block; }
.person small { color: var(--muted); }

label {
  display: grid;
  gap: 6px;
  font-size: 12px;
  font-weight: 800;
  color: #4B5563;
  margin-bottom: 13px;
}
input, textarea, select {
  width: 100%;
  border: 1px solid #D1D5DB;
  border-radius: 10px;
  background: white;
  padding: 10px;
  color: var(--ink);
}
textarea { min-height: 100px; resize: vertical; }
label small { font-weight: 400; color: var(--muted); }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-grid label { margin: 0; }
.form-grid .full, .full { grid-column: 1 / -1; }

.alert { padding: 12px 14px; border-radius: 12px; margin-bottom: 16px; }
.alert.success { background: #D1FAE5; color: #065F46; border: 1px solid #A7F3D0; }
.alert.error { background: #FEE2E2; color: #991B1B; border: 1px solid #FECACA; }

.opportunity h3 { font-size: 18px; margin-bottom: 4px; }
.card-top, .meta-line {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}
.card-top small, .meta-line { color: var(--muted); font-size: 12px; }
.meta-line { margin: 16px 0; flex-wrap: wrap; }

.inline-form { display: flex; gap: 8px; }
.inline-form select { flex: 1; }

.leadership-card { display: flex; gap: 14px; }
.role-icon {
  width: 44px;
  height: 44px;
  background: #E0F7FA;
  color: var(--blue);
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-weight: 900;
  flex: none;
}
.leadership-card h3 { margin: 0; }
.leadership-card p { color: var(--muted); font-size: 13px; }

.patron-card { margin-top: 18px; }
.impact-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
.impact-grid div { background: #F0FDFF; border-radius: 12px; padding: 14px; }
.impact-grid strong { font-size: 24px; display: block; }
.impact-grid span { font-size: 12px; color: var(--muted); }

.timeline article {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 10px;
  border-bottom: 1px solid var(--line);
  padding: 13px 0;
}
.timeline article:last-child { border-bottom: 0; }
.timeline .dot {
  width: 10px;
  height: 10px;
  background: var(--blue);
  border-radius: 50%;
  margin-top: 6px;
}
.timeline h3 { margin: 2px 0; }
.timeline p { margin: 0; color: var(--muted); }

.privacy-title { margin: 16px 0 0; }
.privacy-note {
  background: #F0FDFF;
  padding: 12px;
  border-radius: 10px;
  color: var(--muted);
  font-size: 12px;
}

.create-panel { margin-bottom: 18px; }
.create-panel summary, .admin-grid summary {
  cursor: pointer;
  font-weight: 900;
  font-size: 17px;
}
.create-panel form, .admin-grid details form { margin-top: 18px; }

.admin-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-bottom: 18px;
}
.admin-grid > div:last-child { grid-column: 1 / -1; }
.admin-stack { display: grid; gap: 10px; margin-top: 15px; }
.mini-form {
  display: grid;
  grid-template-columns: 1.3fr 1.3fr 1fr 1fr auto;
  gap: 8px;
  align-items: center;
  border-top: 1px solid var(--line);
  padding-top: 10px;
}
.mini-form:first-child { border-top: 0; }
.mini-form input, .mini-form select { margin: 0; }

.public-bg { background: linear-gradient(145deg, #023047, #00C4E0); min-height: 100vh; }
.auth-wrap, .setup-wrap {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 28px;
}
.auth-card {
  width: min(480px, 100%);
  background: white;
  border-radius: 24px;
  padding: 30px;
  box-shadow: 0 24px 70px rgba(0, 50, 70, .28);
}
.auth-card.wide { width: min(840px, 100%); }
.auth-card h1 { margin: 24px 0 5px; }
.auth-card > p { color: var(--muted); margin-top: 0; }
.auth-card .brand { color: var(--ink); }
.auth-card form { margin-top: 22px; }
.auth-foot { text-align: center; font-size: 13px; margin-top: 16px !important; }
.consent {
  display: flex !important;
  grid-template-columns: 20px 1fr !important;
  align-items: flex-start;
  font-weight: 500 !important;
}
.consent input { width: auto; margin-top: 4px; }

.public-page { min-height: 100vh; background: white; }
.public-nav {
  max-width: 1200px;
  margin: auto;
  padding: 22px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.public-nav .brand { color: var(--ink); }
.public-nav > div { display: flex; gap: 12px; align-items: center; }

.landing {
  max-width: 1200px;
  margin: auto;
  padding: 30px 28px 80px;
}
.landing-hero {
  min-height: 600px;
  border-radius: 32px;
  background: linear-gradient(135deg, #023047, #00C4E0);
  color: white;
  padding: 56px;
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 50px;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.landing-hero h1 {
  font-size: 58px;
  line-height: 1.05;
  margin: 12px 0 20px;
}
.landing-hero p {
  font-size: 18px;
  color: #E0F7FA;
  max-width: 680px;
}
.actions { display: flex; gap: 10px; margin-top: 28px; }
.hero-panel { display: grid; gap: 13px; }
.metric {
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 18px;
  padding: 18px;
}
.metric strong, .metric span { display: block; }
.metric span { color: #A5F3FC; margin-top: 4px; }

.feature-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 18px;
  margin-top: 22px;
}
.feature-grid article {
  background: #F0FDFF;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 24px;
}
.feature-grid b { color: var(--blue); }
.feature-grid h3 { font-size: 21px; }
.feature-grid p { color: var(--muted); }

.public-footer {
  max-width: 1200px;
  margin: auto;
  padding: 22px 28px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  color: var(--muted);
  font-size: 13px;
}

@media (max-width: 1050px) {
  .stats-grid { grid-template-columns: repeat(2,1fr); }
  .cards-grid { grid-template-columns: 1fr 1fr; }
  .app-shell { grid-template-columns: 220px 1fr; }
  .landing-hero { grid-template-columns: 1fr; }
  .landing-hero h1 { font-size: 48px; }
  .admin-grid { grid-template-columns: 1fr; }
  .admin-grid > div:last-child { grid-column: auto; }
  .mini-form { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .app-shell { display: block; }
  .sidebar { position: relative; height: auto; position: static; }
  .sidebar nav { grid-template-columns: repeat(2,1fr); }
  .sidebar-foot { margin-top: 20px; }
  .topbar { position: static; padding: 14px 18px; align-items: flex-start; }
  .user-menu div, .user-menu .quiet-link { display: none; }
  .content { padding: 18px; }
  .stats-grid, .two-grid, .cards-grid, .feature-grid, .form-grid, .admin-grid { grid-template-columns: 1fr; }
  .form-grid .full, .full { grid-column: auto; }
  .hero { align-items: flex-start; flex-direction: column; padding: 22px; }
  .hero h2 { font-size: 25px; }
  .public-nav { padding: 18px; }
  .public-nav .quiet-link { display: none; }
  .landing { padding: 10px 16px 50px; }
  .landing-hero { padding: 28px; min-height: auto; }
  .landing-hero h1 { font-size: 39px; }
  .feature-grid { grid-template-columns: 1fr; }
  .public-footer { flex-direction: column; gap: 5px; }
  .inline-form, .meta-line { align-items: stretch; flex-direction: column; }
  .mini-form { grid-template-columns: 1fr; }
  .impact-grid { grid-template-columns: 1fr 1fr; }
}


/* =========================================================
   RYLA NEXT CMYK DASHBOARD
   Cyan • Magenta • Yellow • Black
   ========================================================= */

:root {
  --rn-cyan: #00C4E0;
  --rn-cyan-dark: #0096B0;
  --rn-magenta: #FF2D95;
  --rn-yellow: #FFE600;
  --rn-black: #0A0A0A;
  --rn-soft: #F7FCFD;
}

/* Main application canvas */
body {
  background: #F7FCFD;
}

.app-shell {
  background:
    radial-gradient(circle at 90% 8%, rgba(0,196,224,.06), transparent 22%),
    radial-gradient(circle at 75% 90%, rgba(255,45,149,.045), transparent 24%),
    #F7FCFD;
}

/* Black foundation with CMYK personality */
.sidebar {
  background: var(--rn-black);
  position: sticky;
  overflow: hidden;
  border-top: 5px solid var(--rn-cyan);
}

.sidebar::before {
  content: "";
  position: absolute;
  top: 0;
  left: 33.33%;
  width: 33.34%;
  height: 5px;
  background: var(--rn-magenta);
}

.sidebar::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 33.33%;
  height: 5px;
  background: var(--rn-yellow);
}

.app-brand {
  display: block;
  padding: 3px 5px 20px;
}

.sidebar-logo {
  width: 172px;
  max-width: 100%;
  height: auto;
  display: block;
}

.sidebar nav {
  position: relative;
  z-index: 1;
}

.sidebar nav a {
  color: #F3F4F6;
  position: relative;
  transition: transform .18s ease, background .18s ease, color .18s ease;
  border-radius: 12px;
  font-weight: 650;
}

.sidebar nav a:hover {
  background: rgba(255,255,255,.09);
  color: white;
  transform: translateX(3px);
}

.sidebar nav a.active {
  background: var(--rn-cyan);
  color: var(--rn-black);
  font-weight: 900;
  box-shadow: 0 8px 22px rgba(0,196,224,.18);
}

.sidebar nav a.active::before {
  content: "";
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--rn-magenta);
  right: 11px;
  top: 50%;
  transform: translateY(-50%);
}

.sidebar-foot {
  position: relative;
  z-index: 1;
  border-top: 1px solid rgba(255,255,255,.14);
}

.sidebar-foot small {
  color: #9CA3AF;
}

.sidebar-foot strong {
  color: white;
}

/* Header */
.topbar {
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  position: sticky;
  overflow: hidden;
}

.topbar::after {
  content: "";
  position: absolute;
  height: 3px;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    90deg,
    var(--rn-cyan) 0 34%,
    var(--rn-magenta) 34% 67%,
    var(--rn-yellow) 67% 100%
  );
}

.eyebrow {
  color: var(--rn-magenta);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: 10px;
}

.topbar h1 {
  color: var(--rn-black);
  font-weight: 850;
}

.avatar {
  background: var(--rn-yellow);
  color: var(--rn-black);
  border: 2px solid var(--rn-black);
}

/* Hero */
.hero {
  background:
    radial-gradient(circle at 91% 15%, rgba(255,230,0,.30) 0 70px, transparent 71px),
    radial-gradient(circle at 82% 92%, rgba(255,45,149,.24) 0 95px, transparent 96px),
    linear-gradient(135deg, var(--rn-cyan), var(--rn-cyan-dark));
  box-shadow: 0 18px 45px rgba(0,150,176,.16);
  isolation: isolate;
}

.hero::before {
  content: "";
  position: absolute;
  width: 115px;
  height: 115px;
  border: 18px solid rgba(255,255,255,.08);
  border-radius: 50%;
  right: 155px;
  top: -52px;
  z-index: -1;
}

.hero h2 {
  font-weight: 900;
  letter-spacing: -.025em;
}

.hero .tag {
  background: var(--rn-black);
  color: white;
  border: 0;
  font-weight: 800;
}

.hero .btn.gold {
  background: var(--rn-yellow);
  color: var(--rn-black);
  box-shadow: 5px 5px 0 var(--rn-magenta);
  transition: transform .18s ease, box-shadow .18s ease;
}

.hero .btn.gold:hover {
  transform: translate(-2px,-2px);
  box-shadow: 7px 7px 0 var(--rn-magenta);
}

/* General cards */
.card,
.stat-card {
  border: 1px solid #E8EDF0;
  box-shadow: 0 10px 28px rgba(10,10,10,.045);
}

.stat-card {
  position: relative;
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}

.stat-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 34px rgba(10,10,10,.08);
}

.stat-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  height: 5px;
}

.stat-card:nth-child(1)::before {
  background: var(--rn-cyan);
}

.stat-card:nth-child(2)::before {
  background: var(--rn-magenta);
}

.stat-card:nth-child(3)::before {
  background: var(--rn-yellow);
}

.stat-card:nth-child(4)::before {
  background: var(--rn-black);
}

.stat-card:nth-child(1) strong {
  color: var(--rn-cyan-dark);
}

.stat-card:nth-child(2) strong {
  color: var(--rn-magenta);
}

.stat-card:nth-child(3) strong {
  color: #A38F00;
}

.stat-card:nth-child(4) strong {
  color: var(--rn-black);
}

.stat-card strong {
  font-weight: 950;
}

.stat-card small {
  color: #6B7280;
}

/* Buttons */
.btn {
  transition: transform .16s ease, box-shadow .16s ease;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn.primary {
  background: var(--rn-cyan);
  color: var(--rn-black);
}

.btn.primary:hover {
  box-shadow: 4px 4px 0 var(--rn-magenta);
}

.btn.soft {
  background: rgba(0,196,224,.10);
  color: #00687A;
  border: 1px solid rgba(0,196,224,.22);
}

.btn.gold {
  background: var(--rn-yellow);
  color: var(--rn-black);
}

/* Opportunities */
.list-item {
  background: white;
  transition: border-color .16s ease, transform .16s ease;
}

.list-item:hover {
  border-color: rgba(255,45,149,.35);
  transform: translateX(2px);
}

.badge.green {
  background: rgba(0,196,224,.12);
  color: #007C91;
  border: 1px solid rgba(0,196,224,.22);
}

/* Development progress */
.progress {
  height: 10px;
  background: #ECEFF1;
}

.progress i {
  background: linear-gradient(
    90deg,
    var(--rn-cyan),
    var(--rn-magenta)
  );
  border-radius: inherit;
}

/* Notice / youth callout */
.notice {
  background: rgba(255,230,0,.20);
  border: 1px solid rgba(255,230,0,.75);
  color: #3D3600;
  position: relative;
  overflow: hidden;
}

.notice::before {
  content: "";
  position: absolute;
  width: 7px;
  top: 0;
  bottom: 0;
  left: 0;
  background: var(--rn-magenta);
}

/* Leadership */
.role-icon {
  background: var(--rn-yellow);
  color: var(--rn-black);
  border: 2px solid var(--rn-black);
}

/* Timeline / impact */
.timeline .dot {
  background: var(--rn-magenta);
  box-shadow: 0 0 0 4px rgba(255,45,149,.12);
}

.impact-grid div:nth-child(3n+1) {
  border-top: 4px solid var(--rn-cyan);
}

.impact-grid div:nth-child(3n+2) {
  border-top: 4px solid var(--rn-magenta);
}

.impact-grid div:nth-child(3n+3) {
  border-top: 4px solid var(--rn-yellow);
}

/* Forms */
input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--rn-cyan);
  box-shadow: 0 0 0 3px rgba(0,196,224,.12);
}

/* Mobile */
@media (max-width: 760px) {

  .sidebar {
    border-top-width: 4px;
    padding-top: 18px;
  }

  .app-brand {
    display: flex;
    justify-content: center;
    padding-bottom: 12px;
  }

  .sidebar-logo {
    width: 180px;
  }

  .sidebar nav {
    gap: 8px;
  }

  .sidebar nav a {
    background: rgba(255,255,255,.055);
    text-align: center;
  }

  .sidebar nav a:hover {
    transform: none;
  }

  .hero {
    border-radius: 22px;
  }

  .stat-card {
    border-radius: 16px;
  }
}

/* RYLA Next mobile collapsible navigation */

.mobile-menu-toggle {
  display: none;
}

@media (max-width: 760px) {

  .sidebar {
    padding: 14px 16px;
  }

  .sidebar .app-brand {
    display: inline-flex;
    width: auto;
    padding: 0;
  }

  .sidebar-logo {
    width: 165px;
  }

  .mobile-menu-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    position: absolute;
    top: 17px;
    right: 16px;
    border: 1px solid rgba(255,255,255,.20);
    background: rgba(255,255,255,.08);
    color: #fff;
    border-radius: 10px;
    padding: 8px 11px;
    font-weight: 800;
    cursor: pointer;
  }

  .mobile-menu-toggle .menu-bars {
    color: var(--rn-yellow);
    font-size: 19px;
    line-height: 1;
  }

  .sidebar nav,
  .sidebar .sidebar-foot {
    display: none;
  }

  .sidebar.mobile-open nav {
    display: grid;
    grid-template-columns: 1fr;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid rgba(255,255,255,.12);
  }

  .sidebar.mobile-open .sidebar-foot {
    display: block;
    margin-top: 16px;
  }

  .sidebar.mobile-open nav a {
    text-align: left;
    padding: 12px 14px;
  }
}

/* RYLA Next mobile collapsible navigation */

.mobile-menu-toggle {
  display: none;
}

@media (max-width: 760px) {

  .sidebar {
    padding: 14px 16px;
  }

  .sidebar .app-brand {
    display: inline-flex;
    width: auto;
    padding: 0;
  }

  .sidebar-logo {
    width: 165px;
  }

  .mobile-menu-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    position: absolute;
    top: 17px;
    right: 16px;
    border: 1px solid rgba(255,255,255,.20);
    background: rgba(255,255,255,.08);
    color: #fff;
    border-radius: 10px;
    padding: 8px 11px;
    font-weight: 800;
    cursor: pointer;
  }

  .mobile-menu-toggle .menu-bars {
    color: var(--rn-yellow);
    font-size: 19px;
    line-height: 1;
  }

  .sidebar nav,
  .sidebar .sidebar-foot {
    display: none;
  }

  .sidebar.mobile-open nav {
    display: grid;
    grid-template-columns: 1fr;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid rgba(255,255,255,.12);
  }

  .sidebar.mobile-open .sidebar-foot {
    display: block;
    margin-top: 16px;
  }

  .sidebar.mobile-open nav a {
    text-align: left;
    padding: 12px 14px;
  }
}

/* Refined social platform icons */
.social-icon {
  width: 34px !important;
  height: 34px !important;
  border-radius: 10px !important;
  display: grid !important;
  place-items: center !important;
  background: #0A0A0A !important;
  color: #FFFFFF !important;
  box-shadow: none !important;
}

.social-icon i {
  font-size: 16px !important;
  line-height: 1 !important;
}

/* Keep all brands visually consistent */
.linkedin-icon,
.instagram-icon,
.facebook-icon,
.x-icon,
.tiktok-icon {
  background: #0A0A0A !important;
  color: #FFFFFF !important;
  box-shadow: none !important;
}

/* Slightly reduce platform cards */
.social-platform-option {
  min-height: 78px !important;
  padding: 8px 4px !important;
  gap: 5px !important;
}

.social-platform-option small {
  font-size: 10px !important;
}

/* Text-based social platform selector */
.social-platform-picker {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-bottom: 16px !important;
}

.social-platform-option {
  display: inline-flex !important;
  width: auto !important;
  min-height: 0 !important;
  padding: 9px 14px !important;
  border: 1px solid #D1D5DB !important;
  border-radius: 999px !important;
  background: #FFFFFF !important;
  cursor: pointer !important;
  margin: 0 !important;
}

.social-platform-option input {
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.social-name {
  font-size: 13px !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
  color: #374151 !important;
}

.social-platform-option:has(input:checked) {
  background: #0A0A0A !important;
  border-color: #0A0A0A !important;
  box-shadow: 3px 3px 0 #00C4E0 !important;
  transform: none !important;
}

.social-platform-option:has(input:checked) .social-name {
  color: #FFFFFF !important;
}

/* RYLA Next — plain text social selector */
.social-platform-picker {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 10px 0 16px !important;
}

.social-platform-option {
  display: inline-flex !important;
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 8px 13px !important;

  align-items: center !important;
  justify-content: center !important;

  background: #FFFFFF !important;
  border: 1px solid #D1D5DB !important;
  border-radius: 999px !important;

  cursor: pointer !important;
  box-shadow: none !important;
  transform: none !important;
}

.social-platform-option input {
  position: absolute !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  pointer-events: none !important;
}

.social-name {
  display: inline !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;

  color: #374151 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
}

/* Selected platform */
.social-platform-option:has(input:checked) {
  background: #0A0A0A !important;
  border-color: #0A0A0A !important;
  box-shadow: 3px 3px 0 #00C4E0 !important;
}

.social-platform-option:has(input:checked) .social-name {
  color: #FFFFFF !important;
}

/* Kill any legacy social icons */
.social-platform-option .social-icon,
.social-platform-option i,
.social-platform-option svg {
  display: none !important;
}

/* Override earlier mobile grid */
@media (max-width: 760px) {
  .social-platform-picker {
    display: flex !important;
    grid-template-columns: none !important;
  }

  .social-platform-option {
    width: auto !important;
    min-height: 0 !important;
  }
}

/* RYLA Next global typography */
html,
body,
button,
input,
textarea,
select,
option {
  font-family: "Source Sans 3", sans-serif;
}

/* Landing page news highlights */
.news-highlights {
  margin-top: 54px;
}

.news-heading {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 18px;
  margin-bottom: 20px;
}

.news-heading h2 {
  margin: 0;
  font-size: 30px;
  color: #fff;
}

.news-heading p {
  margin: 4px 0 0;
  color: rgba(255,255,255,.82);
  font-size: 15px;
}

.news-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.news-card {
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.20);
  box-shadow: 0 14px 35px rgba(0,0,0,.10);
  display: flex;
  flex-direction: column;
}

.news-image-wrap {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #E5E7EB;
}

.news-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .25s ease;
}

.news-card:hover .news-image {
  transform: scale(1.035);
}

.news-card-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.news-card h3 {
  margin: 0 0 10px;
  font-size: 20px;
  line-height: 1.22;
}

.news-card h3 a {
  color: #0A0A0A;
}

.news-card p {
  margin: 0 0 18px;
  color: #6B7280;
  font-size: 14px;
  line-height: 1.55;
}

.news-read-more {
  margin-top: auto;
  color: #00A8C5;
  font-weight: 800;
  font-size: 14px;
}

.news-card:nth-child(1) {
  border-top: 5px solid #00C4E0;
}

.news-card:nth-child(2) {
  border-top: 5px solid #FF2D95;
}

.news-card:nth-child(3) {
  border-top: 5px solid #FFE600;
}

@media (max-width: 900px) {
  .news-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 760px) {
  .news-highlights {
    margin-top: 36px;
  }

  .news-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .news-heading h2 {
    font-size: 26px;
  }

  .news-grid {
    grid-template-columns: 1fr;
  }

  .news-card h3 {
    font-size: 19px;
  }
}

/* Topbar member photograph */
.topbar-avatar {
  overflow: hidden;
  padding: 0 !important;
}

.topbar-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Compact dashboard news */
.dashboard-news-list {
  display: grid;
  gap: 11px;
}

.dashboard-news-item {
  display: grid;
  grid-template-columns: 82px 1fr;
  gap: 12px;
  align-items: center;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 13px;
  color: var(--ink);
  background: #fff;
}

.dashboard-news-item img {
  width: 82px;
  height: 64px;
  object-fit: cover;
  border-radius: 9px;
  display: block;
}

.dashboard-news-item strong {
  display: block;
  font-size: 13px;
  line-height: 1.3;
}

.dashboard-news-item span {
  display: block;
  margin-top: 5px;
  color: #0096B0;
  font-size: 11px;
  font-weight: 700;
}

@media (max-width: 420px) {
  .dashboard-news-item {
    grid-template-columns: 72px 1fr;
  }

  .dashboard-news-item img {
    width: 72px;
    height: 58px;
  }
}

/* Dashboard engagement layer */

.birthday-celebration {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
  padding: 16px 18px;
  border-radius: 18px;
  background: #FFE600;
  color: #0A0A0A;
  border-left: 7px solid #FF2D95;
}

.birthday-celebration-mark {
  font-size: 30px;
}

.birthday-celebration strong {
  font-size: 17px;
}

.birthday-celebration p {
  margin: 2px 0 0;
  font-size: 13px;
}

.profile-completion-action {
  margin-top: 14px;
}

.profile-complete-badge {
  display: inline-flex;
  padding: 8px 12px;
  border-radius: 999px;
  background: #D1FAE5;
  color: #065F46;
  font-weight: 700;
  font-size: 13px;
}

.action-centre-list {
  display: grid;
  gap: 10px;
}

.action-centre-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  border: 1px solid var(--line);
  border-left: 5px solid #00C4E0;
  border-radius: 13px;
  padding: 13px 14px;
  color: var(--ink);
  background: #fff;
}

.action-centre-item strong,
.action-centre-item span {
  display: block;
}

.action-centre-item span {
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
}

.action-centre-item b {
  font-size: 20px;
}

.action-mentorship {
  border-left-color: #FF2D95;
}

.action-learning {
  border-left-color: #FFE600;
}

.action-opportunity {
  border-left-color: #00C4E0;
}

.action-project {
  border-left-color: #0A0A0A;
}

.watch-health-card {
  border-top: 5px solid #FF2D95;
}

@media (max-width: 760px) {
  .birthday-celebration {
    align-items: flex-start;
  }

  .action-centre-item {
    align-items: flex-start;
  }
}

/* Administration — Impact Verification */

.admin-impact-panel {
  margin-top: 18px;
}

.admin-impact-list {
  display: grid;
  gap: 12px;
}

.admin-impact-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px;
  align-items: center;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
}

.admin-impact-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.admin-impact-head strong,
.admin-impact-head small {
  display: block;
}

.admin-impact-head small {
  color: var(--muted);
}

.admin-impact-item h3 {
  margin: 9px 0 3px;
}

.impact-admin-status {
  display: inline-flex;
  padding: 5px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.impact-admin-status.pending {
  background: #FEF3C7;
  color: #92400E;
}

.impact-admin-status.verified {
  background: #D1FAE5;
  color: #065F46;
}

@media (max-width:760px) {

  .admin-impact-item {
    grid-template-columns: 1fr;
  }

  .admin-impact-head {
    flex-direction: column;
  }

}

/* Mentor applications */

.mentor-applications-panel,
.approved-mentors-panel {
  margin-top: 18px;
}

.mentor-application-list {
  display: grid;
  gap: 14px;
}

.mentor-application-card {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 18px;
  padding: 16px;
  border: 1px solid var(--line);
  border-left: 5px solid #FF2D95;
  border-radius: 15px;
  background: #fff;
}

.mentor-application-card h3 {
  margin: 0 0 4px;
}

.mentor-application-actions {
  display: grid;
  gap: 9px;
  align-content: start;
}

.mentor-approve-form {
  display: grid;
  gap: 9px;
}

.mentor-approve-form label {
  margin: 0;
}

@media (max-width: 900px) {
  .mentor-application-card {
    grid-template-columns: 1fr;
  }
}

/* Mentor profile identity */

.mentor-profile-banner {
  margin-bottom: 18px;
  border-left: 6px solid #FF2D95;
  background:
    linear-gradient(
      135deg,
      rgba(0,196,224,.08),
      rgba(255,45,149,.06)
    );
}

.mentor-profile-banner h2 {
  margin: 8px 0 3px;
}

.mentor-profile-banner p {
  margin: 3px 0;
}

.mentor-approved-badge {
  display: inline-flex;
  padding: 6px 10px;
  border-radius: 999px;
  background: #D1FAE5;
  color: #065F46;
  font-size: 11px;
  font-weight: 800;
}

/* Mentor session management */

.mentor-session-panel {
  margin-top: 16px;
  border-top: 1px solid var(--line);
  padding-top: 14px;
}

.mentor-session-panel summary {
  cursor: pointer;
  font-weight: 800;
}

.mentor-session-history {
  margin-top: 18px;
}

.mentor-session-history h4 {
  margin-bottom: 8px;
}

.mentor-session-entry {
  padding: 12px 0;
  border-top: 1px solid var(--line);
}

.mentor-session-entry:first-of-type {
  border-top: 0;
}

.mentor-session-entry p {
  margin: 6px 0;
}

/* Mentor mentorship workspace */

.mentor-session-panel {
  margin-top: 18px;
  border-top: 1px solid var(--line);
  padding-top: 15px;
}

.mentor-session-panel summary {
  cursor: pointer;
  font-weight: 800;
  color: #111827;
  list-style-position: inside;
}

.mentor-session-form {
  margin-top: 16px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.mentor-session-form .full {
  grid-column: 1 / -1;
}

.mentor-session-submit {
  display: flex;
  align-items: end;
}

.mentor-session-history {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.mentor-session-history-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.mentor-session-history-head h4 {
  margin: 0;
}

.mentor-session-entry {
  padding: 14px;
  margin-top: 10px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: #F9FAFB;
}

.mentor-session-entry-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.mentor-session-entry-head strong,
.mentor-session-entry-head small {
  display: block;
}

.mentor-session-entry-head small {
  margin-top: 3px;
  color: var(--muted);
}

.mentor-action-points {
  margin-top: 12px;
  padding: 11px 12px;
  border-left: 4px solid #00C4E0;
  background: #fff;
  border-radius: 8px;
}

.mentor-action-points p {
  margin: 4px 0 0;
}

.mentor-progress-rating {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

@media (max-width: 760px) {

  .mentor-session-form {
    grid-template-columns: 1fr;
  }

  .mentor-session-form .full {
    grid-column: auto;
  }

  .mentor-session-entry-head {
    flex-direction: column;
  }
}

/* Elected leadership on participant dashboard */

.leadership-office {
  margin-top: 14px;
  max-width: 650px;
  padding: 14px 16px;
  border: 1px solid rgba(255,255,255,.24);
  border-left: 5px solid #FFE600;
  border-radius: 14px;
  background: rgba(255,255,255,.08);
}

.leadership-office-label {
  display: block;
  margin-bottom: 3px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.leadership-office-title {
  display: block;
  font-size: 19px;
}

.leadership-office-responsibility {
  margin: 6px 0 0;
  color: inherit !important;
  opacity: .88;
}

.leadership-office-tenure {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 9px;
  font-size: 12px;
  font-weight: 700;
}

/* Upcoming birthdays */

.birthday-list {
  display: grid;
}

.birthday-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
}

.birthday-row:last-child {
  border-bottom: 0;
}

.birthday-row strong,
.birthday-row small {
  display: block;
}

.birthday-row > span {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  white-space: nowrap;
}

/* Public ballot acknowledgement */

.vote-public-ack {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0 0 10px;
  max-width: 250px;
  font-size: 12px;
  color: var(--muted);
}

.vote-public-ack input {
  width: auto;
  margin-top: 2px;
  flex: none;
}

/* Election runoff */

.election-runoff {
  width: 100%;
  margin-top: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #FAFAFA;
}

.election-runoff > strong {
  display: block;
  margin-bottom: 4px;
}

/* Opportunities — mature role-specific presentation */

.opportunity-card {
  grid-column: 1 / -1;
  padding: 20px;
  border-radius: 14px;
  border: 1px solid var(--line);
  box-shadow: none;
}

.opportunity-card h3 {
  margin: 10px 0 3px;
  font-size: 19px;
}

.opportunity-description {
  max-width: 850px;
  line-height: 1.6;
}

.opportunity-publisher {
  margin: -3px 0 12px;
  font-size: 12px;
  color: var(--muted);
}

.opportunity-eligibility-box,
.opportunity-criteria-summary {
  margin-top: 16px;
  padding: 14px 15px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #FAFAFA;
}

.opportunity-eligibility-box p,
.opportunity-criteria-summary p {
  margin: 4px 0;
}

.opportunity-eligibility-head {
  margin-bottom: 5px;
  font-size: 13px;
  font-weight: 800;
}

.opportunity-eligibility-head.eligible {
  color: #166534;
}

.opportunity-eligibility-head.not-eligible {
  color: #991B1B;
}

.opportunity-reasons {
  margin: 8px 0 0 18px;
  padding: 0;
  font-size: 13px;
}

.opportunity-reasons li {
  margin: 4px 0;
}

.opportunity-extra-notes {
  margin-top: 11px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.opportunity-application-disabled {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
}

.mentor-published-summary {
  margin-bottom: 18px;
}

.mentor-published-count {
  font-size: 26px;
}

.mentor-published-list {
  display: grid;
}

.mentor-published-row {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
}

.mentor-published-row:last-child {
  border-bottom: 0;
}

.mentor-published-row strong,
.mentor-published-row small {
  display: block;
}

.mentor-published-row small {
  margin-top: 3px;
  color: var(--muted);
}

.mentor-published-row > span {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}

.admin-opportunity-editor {
  margin-top: 16px;
  padding-top: 13px;
  border-top: 1px solid var(--line);
}

.admin-opportunity-editor summary {
  color: var(--muted);
  font-size: 13px;
}

@media (max-width: 760px) {

  .opportunity-card {
    padding: 16px;
  }

  .opportunity-card .card-top,
  .opportunity-card .meta-line {
    align-items: flex-start;
  }

  .opportunity-card .meta-line {
    display: grid;
    gap: 8px;
  }

  .mentor-published-row {
    align-items: flex-start;
  }

  .opportunity-actions form {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
  }
}

/* Paystack donation checkout */

.paystack-note {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

/* Mentor opportunity recommendations */

.mentor-recommend-panel {
  margin-top: 16px;
  padding-top: 13px;
  border-top: 1px solid var(--line);
}

.mentor-recommend-panel summary {
  cursor: pointer;
  color: #374151;
  font-size: 13px;
  font-weight: 700;
}

.mentee-recommendation {
  margin: 14px 0;
  padding: 12px 14px;
  border-left: 3px solid #00A9BF;
  background: #F7FBFC;
  border-radius: 8px;
}

.mentee-recommendation strong,
.mentee-recommendation span {
  display: block;
}

.mentee-recommendation strong {
  font-size: 12px;
}

.mentee-recommendation span {
  margin-top: 2px;
  font-size: 13px;
}

.mentee-recommendation p {
  margin: 7px 0 0;
  font-size: 13px;
  color: var(--muted);
}

/* Mentor-to-mentee opportunity recommendations */

.mentor-recommend-panel {
  margin-top: 15px;
  padding-top: 13px;
  border-top: 1px solid var(--line);
}

.mentor-recommend-panel summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  color: #374151;
}

.mentee-recommendation {
  margin: 14px 0;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-left: 3px solid #0A7180;
  border-radius: 9px;
  background: #F8FBFC;
}

.mentee-recommendation p {
  margin: 7px 0 0;
  color: var(--muted);
}

.dashboard-recommendation-row {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  align-items: flex-start;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
  color: inherit;
  text-decoration: none;
}

.dashboard-recommendation-row:last-child {
  border-bottom: 0;
}

.dashboard-recommendation-row strong,
.dashboard-recommendation-row span,
.dashboard-recommendation-row small {
  display: block;
}

.dashboard-recommendation-row > div > span,
.dashboard-recommendation-row small {
  margin-top: 3px;
  color: var(--muted);
}

@media(max-width:760px) {
  .dashboard-recommendation-row {
    gap: 10px;
  }
}


/* ==========================================================
   RYLA Next — Scrollable application sidebar
   ========================================================== */

.sidebar {
    height:100vh;
    height:100dvh;
    max-height:100vh;
    max-height:100dvh;
    position:sticky;
    top:0;
    display:flex;
    flex-direction:column;
    overflow:hidden;
}

.sidebar nav {
    flex:1 1 auto;
    min-height:0;
    overflow-y:auto;
    overflow-x:hidden;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;

    /*
     * Space ensures the final nav button does not
     * sit directly against the sidebar footer.
     */
    padding-bottom:18px;

    scrollbar-width:thin;
}

.sidebar-foot {
    flex:0 0 auto;
}

/*
 * WebKit scrollbar kept restrained.
 */
.sidebar nav::-webkit-scrollbar {
    width:6px;
}

.sidebar nav::-webkit-scrollbar-thumb {
    background:rgba(17,24,39,.22);
    border-radius:999px;
}

.sidebar nav::-webkit-scrollbar-track {
    background:transparent;
}


/*
 * On mobile the sidebar may be implemented as a
 * drawer/stack rather than a permanent column.
 * Do not unnecessarily lock its height.
 */
@media(max-width:760px) {

    .sidebar {
        max-height:100dvh;
    }

    .sidebar nav {
        max-height:
            calc(
                100dvh - 150px
            );
    }

}


/* ==========================================================
   RYLA Next — Invisible sidebar scrollbar
   Sidebar remains fully scrollable.
   ========================================================== */

.sidebar nav {
    overflow-y:auto !important;
    overflow-x:hidden !important;

    /* Firefox */
    scrollbar-width:none !important;

    /* Legacy Edge / IE */
    -ms-overflow-style:none !important;

    -webkit-overflow-scrolling:touch;
}

/* Chrome / Safari / Edge */
.sidebar nav::-webkit-scrollbar {
    display:none !important;
    width:0 !important;
    height:0 !important;
    background:transparent !important;
}

.sidebar nav::-webkit-scrollbar-thumb {
    background:transparent !important;
}

.sidebar nav::-webkit-scrollbar-track {
    background:transparent !important;
}


/* ==========================================================
   RYLA Next — Header notification counter
   ========================================================== */

.top-notification-wrap {
    position:relative;
    flex:0 0 auto;
}

.top-notification-button {
    width:38px;
    height:38px;
    min-width:38px;
    padding:0;
    border:1px solid var(--line);
    border-radius:50%;
    background:#fff;
    color:#111827;
    display:grid;
    place-items:center;
    cursor:pointer;
    font-size:11px;
    font-weight:800;
    line-height:1;
}

.top-notification-button:hover {
    background:#F7F9F9;
}

.top-notification-button span {
    display:grid;
    place-items:center;
    width:100%;
    height:100%;
}

.top-notification-dropdown {
    position:absolute;
    z-index:1200;
    top:calc(100% + 10px);
    right:0;
    width:min(380px, calc(100vw - 30px));
    max-height:520px;
    overflow-y:auto;
    background:#fff;
    border:1px solid var(--line);
    border-radius:14px;
    box-shadow:
        0 18px 45px
        rgba(17,24,39,.16);
}

.top-notification-dropdown[hidden] {
    display:none !important;
}

.top-notification-head {
    position:sticky;
    top:0;
    z-index:2;
    display:flex;
    justify-content:space-between;
    gap:12px;
    align-items:center;
    padding:14px 15px;
    background:#fff;
    border-bottom:1px solid var(--line);
}

.top-notification-head small {
    color:var(--muted);
}

.top-notification-list {
    padding:0 14px;
}

.top-notification-item {
    display:block;
    padding:13px 3px;
    color:inherit;
    text-decoration:none;
    border-bottom:1px solid var(--line);
}

.top-notification-item.unread {
    border-left:3px solid #0A7180;
    padding-left:10px;
}

.top-notification-item strong,
.top-notification-item span,
.top-notification-item small {
    display:block;
}

.top-notification-item strong {
    font-size:13px;
}

.top-notification-item span {
    margin-top:4px;
    color:#374151;
    font-size:12px;
    line-height:1.4;
}

.top-notification-item small {
    margin-top:5px;
    color:var(--muted);
    font-size:10px;
}

.top-notification-empty {
    padding:22px 15px;
    color:var(--muted);
    text-align:center;
    font-size:12px;
}

.top-notification-more {
    width:100%;
    border:0;
    border-top:1px solid var(--line);
    padding:12px;
    background:#FAFBFB;
    cursor:pointer;
    font-weight:700;
    font-size:12px;
}

.top-notification-more:hover {
    background:#F3F5F5;
}


/* Keep notification dropdown scrollbar unobtrusive. */
.top-notification-dropdown {
    scrollbar-width:none;
    -ms-overflow-style:none;
}

.top-notification-dropdown::-webkit-scrollbar {
    display:none;
}


@media(max-width:600px) {

    .top-notification-dropdown {
        position:fixed;
        top:72px;
        right:14px;
        left:14px;
        width:auto;
        max-height:
            calc(100dvh - 95px);
    }

}


/* ==========================================================
   Sidebar hierarchy
   ========================================================== */

.sidebar nav .sidebar-sub {
    margin-left:16px;
    padding-left:14px;
    font-size:12px;
    font-weight:600;
    opacity:.82;
    border-left:1px solid rgba(107,114,128,.28);
}

.sidebar nav .sidebar-sub:hover,
.sidebar nav .sidebar-sub.active {
    opacity:1;
}


/* Notification hover hint */
.top-notification-button {
    position:relative;
}

.top-notification-button:hover::after {
    content:"Notifications";
    position:absolute;
    z-index:1300;
    top:calc(100% + 8px);
    left:50%;
    transform:translateX(-50%);
    padding:6px 8px;
    border-radius:6px;
    background:#111827;
    color:#fff;
    white-space:nowrap;
    font-size:10px;
    font-weight:600;
    line-height:1;
    pointer-events:none;
    box-shadow:
        0 5px 14px
        rgba(17,24,39,.18);
}

.top-notification-button:hover::before {
    content:"";
    position:absolute;
    z-index:1301;
    top:calc(100% + 3px);
    left:50%;
    transform:translateX(-50%);
    border-left:5px solid transparent;
    border-right:5px solid transparent;
    border-bottom:5px solid #111827;
}



/* ==========================================================
   RYLA NEXT — CANONICAL ROLE DASHBOARD LAYOUT
   Mentor / Convener / Admin
   ========================================================== */

/* ==========================================================
   RYLA NEXT — HEADER / DASHBOARD CONTENT COLLISION FIX
   26 AUG 2026
   ========================================================== */

/*
 * The topbar is sticky/fixed in the current application shell.
 * Dashboard content must remain in normal document flow below it.
 */

.app-shell {
    min-height:100vh !important;
}

.main {
    position:relative !important;
    min-width:0 !important;
    overflow:visible !important;
}


/* ----------------------------------------------------------
   TOPBAR
   ---------------------------------------------------------- */

.topbar {
    position:sticky !important;
    top:0 !important;
    left:auto !important;
    right:auto !important;

    width:100% !important;
    height:auto !important;
    min-height:68px !important;

    margin:0 !important;

    z-index:100 !important;

    box-sizing:border-box !important;
}


/*
 * Critical:
 * content starts AFTER the topbar naturally.
 */

.content {
    position:relative !important;
    top:auto !important;
    left:auto !important;

    width:100% !important;
    max-width:100% !important;

    margin:0 !important;
    padding-top:20px !important;

    transform:none !important;
    overflow:visible !important;

    box-sizing:border-box !important;
}


/* ----------------------------------------------------------
   EVERYTHING DIRECTLY INSIDE DASHBOARD CONTENT
   ---------------------------------------------------------- */

.content > section,
.content > article,
.content > div {
    position:relative !important;
    top:auto !important;
    bottom:auto !important;
    left:auto !important;
    right:auto !important;

    transform:none !important;
    float:none !important;
    clear:both !important;

    max-width:100% !important;
    box-sizing:border-box !important;
}


/* Give dashboard blocks real vertical separation. */

.content > section + section,
.content > section + div,
.content > div + section,
.content > div + div {
    margin-top:20px;
}


/* ----------------------------------------------------------
   NEWS
   ---------------------------------------------------------- */

.dashboard-news,
.dashboard-news-section,
.news-highlights,
.ryla-news,
.ryla-news-section {
    position:relative !important;
    top:auto !important;
    bottom:auto !important;

    width:100% !important;

    margin-top:0 !important;
    margin-bottom:20px !important;

    transform:none !important;

    z-index:auto !important;
}


/* ----------------------------------------------------------
   KPI GRIDS
   ---------------------------------------------------------- */

.admin-overview,
.convener-overview,
.mentor-dashboard-kpis {
    position:relative !important;
    top:auto !important;

    width:100% !important;

    margin-top:0 !important;
    margin-bottom:20px !important;

    transform:none !important;

    z-index:auto !important;
}


/* ----------------------------------------------------------
   CARDS
   Never allow negative positioning to pull a dashboard card
   over its preceding component.
   ---------------------------------------------------------- */

.content .card {
    top:auto !important;
    bottom:auto !important;
    left:auto !important;
    right:auto !important;

    transform:none !important;

    box-sizing:border-box !important;
}


/* ----------------------------------------------------------
   MOBILE
   ---------------------------------------------------------- */

@media(max-width:760px) {

    .topbar {
        min-height:64px !important;
    }

    .content {
        padding-top:14px !important;
    }

}


/* ==========================================================
   RYLA NEXT — FINAL ROLE DASHBOARD LAYOUT
   ========================================================== */


/* ----------------------------------------------------------
   TOP-LEVEL DASHBOARD FLOW

   This is the important part that was missing:
   every major dashboard component receives its own
   vertical breathing room.
   ---------------------------------------------------------- */

.content {
    display:block !important;
}

.content > .hero,
.content > .mentor-dashboard-hero,
.content > .convener-hero,
.content > .admin-hero,
.content > .dashboard-news-section,
.content > .dashboard-birthday-card,
.content > .mentor-dashboard-kpis,
.content > .convener-overview,
.content > .admin-overview,
.content > .mentor-dashboard-grid,
.content > .convener-command-grid,
.content > .admin-dashboard-grid {
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;

    position:relative !important;
    float:none !important;
    clear:both !important;

    margin-left:0 !important;
    margin-right:0 !important;
    margin-bottom:22px !important;

    box-sizing:border-box !important;
}


/*
 * dashboard-news.php currently renders:
 * <section class="card space-top">
 *
 * Ensure that card has proper separation even though
 * it does not yet carry a dedicated wrapper class.
 */
.content > section.card.space-top {
    margin-top:0 !important;
    margin-bottom:22px !important;
}


/* Shared birthday/community component */
.dashboard-birthday-card {
    margin-top:0 !important;
    margin-bottom:22px !important;
}


/* ----------------------------------------------------------
   NEWS → NEXT BLOCK
   Never let the following grid sit against the News card.
   ---------------------------------------------------------- */

.dashboard-news-grid {
    margin-bottom:0 !important;
}

.content > section.card.space-top
+ .mentor-dashboard-kpis,

.content > section.card.space-top
+ .convener-overview,

.content > section.card.space-top
+ .admin-overview,

.content > section.card.space-top
+ .dashboard-birthday-card {
    margin-top:22px !important;
}


/* ==========================================================
   MENTOR DASHBOARD
   ========================================================== */

.mentor-dashboard-hero {
    display:block !important;
    width:100% !important;
    min-width:0 !important;

    background:#17262C !important;
    color:#fff !important;

    border-radius:16px !important;
    padding:24px !important;

    overflow:hidden !important;
    box-sizing:border-box !important;
}

.mentor-dashboard-hero h2 {
    margin:8px 0 6px !important;
    font-size:25px !important;
    line-height:1.2 !important;
}

.mentor-dashboard-hero p {
    margin:0 !important;
    max-width:760px !important;
    color:rgba(255,255,255,.74) !important;
    line-height:1.55 !important;
}


/* KPIs */

.mentor-dashboard-kpis {
    display:grid !important;

    grid-template-columns:
        repeat(
            3,
            minmax(0,1fr)
        ) !important;

    gap:14px !important;
    align-items:stretch !important;
}

.mentor-dashboard-kpi {
    position:relative !important;

    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;

    height:auto !important;
    min-height:92px !important;

    margin:0 !important;
    padding:16px !important;

    background:#fff !important;
    border:1px solid var(--line) !important;
    border-radius:12px !important;

    box-sizing:border-box !important;
    overflow:hidden !important;
}

.mentor-dashboard-kpi strong {
    display:block;
    margin-bottom:6px;
    font-size:25px;
    line-height:1;
    color:#17262C;
}

.mentor-dashboard-kpi span {
    display:block;
    color:var(--muted);
    font-size:11px;
}


/* Main Mentor two-column work area */

.mentor-dashboard-grid {
    display:grid !important;

    grid-template-columns:
        minmax(0,1.45fr)
        minmax(300px,.75fr) !important;

    gap:22px !important;
    align-items:start !important;
}

.mentor-dashboard-grid
> .mentor-dashboard-stack {
    display:flex !important;
    flex-direction:column !important;

    width:100% !important;
    min-width:0 !important;

    gap:20px !important;
    align-items:stretch !important;
}


/*
 * Each card occupies one actual flex row.
 * Nothing may be pulled into the preceding card.
 */
.mentor-dashboard-stack
> .card,

.mentor-dashboard-stack
> article.card,

.mentor-dashboard-stack
> section.card {
    display:block !important;
    position:relative !important;

    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;

    height:auto !important;
    min-height:0 !important;

    margin:0 !important;
    padding:20px !important;

    float:none !important;
    clear:both !important;

    transform:none !important;

    box-sizing:border-box !important;
    overflow:hidden !important;
}


/* Internal mentor rows */

.mentor-dashboard-stack .section-head {
    display:flex !important;
    justify-content:space-between !important;
    align-items:flex-start !important;

    gap:12px !important;
    flex-wrap:wrap !important;

    width:100% !important;
    min-width:0 !important;

    margin-bottom:12px !important;
}

.mentor-dashboard-stack
.section-head > div {
    flex:1 1 230px !important;
    min-width:0 !important;
}

.mentor-mentee-row,
.mentor-dashboard-row,
.mentor-attention-item {
    display:block !important;

    position:relative !important;

    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;

    height:auto !important;

    padding:12px 0 !important;
    margin:0 !important;

    border-bottom:1px solid var(--line);

    box-sizing:border-box !important;
    overflow:hidden !important;
}

.mentor-mentee-row:last-child,
.mentor-dashboard-row:last-child,
.mentor-attention-item:last-child {
    border-bottom:0;
}


/* ==========================================================
   CONVENER / ADMIN / SUPER ADMIN
   ========================================================== */


/* KPI overview */

.convener-overview,
.admin-overview {
    display:grid !important;

    grid-template-columns:
        repeat(
            4,
            minmax(0,1fr)
        ) !important;

    gap:14px !important;

    align-items:stretch !important;
}

.convener-stat,
.admin-overview-card {
    display:block !important;
    position:relative !important;

    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;

    height:auto !important;
    min-height:92px !important;

    margin:0 !important;
    padding:16px !important;

    background:#fff !important;
    border:1px solid var(--line) !important;
    border-radius:12px !important;

    box-sizing:border-box !important;
    overflow:hidden !important;
}


/* Main admin area */

.convener-command-grid,
.admin-dashboard-grid {
    display:grid !important;

    grid-template-columns:
        minmax(0,1.35fr)
        minmax(290px,.65fr) !important;

    gap:22px !important;

    width:100% !important;
    min-width:0 !important;

    align-items:start !important;
}


.convener-stack,
.admin-dashboard-stack {
    display:flex !important;
    flex-direction:column !important;

    gap:20px !important;

    width:100% !important;
    min-width:0 !important;

    align-items:stretch !important;
}


.convener-stack > .card,
.admin-dashboard-stack > .card,
.convener-command-grid > .card,
.admin-dashboard-grid > .card {
    display:block !important;
    position:relative !important;

    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;

    height:auto !important;
    min-height:0 !important;

    margin:0 !important;

    float:none !important;
    clear:both !important;

    transform:none !important;

    box-sizing:border-box !important;
    overflow:hidden !important;
}


/* ==========================================================
   SHARED CARD SAFETY
   ========================================================== */

.mentor-dashboard-grid *,
.convener-command-grid *,
.admin-dashboard-grid *,
.convener-overview *,
.admin-overview * {
    box-sizing:border-box;
}


.mentor-dashboard-grid h2,
.mentor-dashboard-grid h3,
.mentor-dashboard-grid p,
.mentor-dashboard-grid strong,
.mentor-dashboard-grid small,

.convener-command-grid h2,
.convener-command-grid h3,
.convener-command-grid p,
.convener-command-grid strong,
.convener-command-grid small,

.admin-dashboard-grid h2,
.admin-dashboard-grid h3,
.admin-dashboard-grid p,
.admin-dashboard-grid strong,
.admin-dashboard-grid small {
    max-width:100% !important;
    overflow-wrap:anywhere !important;
}


.mentor-dashboard-grid img,
.convener-command-grid img,
.admin-dashboard-grid img {
    max-width:100% !important;
    height:auto !important;
}


.mentor-dashboard-grid form,
.convener-command-grid form,
.admin-dashboard-grid form {
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
}


/* ==========================================================
   TABLET
   ========================================================== */

@media(max-width:1050px) {

    .convener-overview,
    .admin-overview {
        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            ) !important;
    }

    .mentor-dashboard-grid,
    .convener-command-grid,
    .admin-dashboard-grid {
        grid-template-columns:1fr !important;
    }

}


/* ==========================================================
   MOBILE
   ========================================================== */

@media(max-width:700px) {

    .mentor-dashboard-kpis,
    .convener-overview,
    .admin-overview {
        grid-template-columns:1fr !important;
    }

    .mentor-dashboard-grid,
    .convener-command-grid,
    .admin-dashboard-grid {
        gap:16px !important;
    }

    .mentor-dashboard-grid
    > .mentor-dashboard-stack,
    .convener-stack,
    .admin-dashboard-stack {
        gap:16px !important;
    }

}


/* ==========================================================
   PERFORMANCE — SYSTEM FONT STACK
   Avoid render-blocking external font requests.
   ========================================================== */

html,
body,
button,
input,
select,
textarea {
    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif !important;
}


/* RYLA NEXT — DASHBOARD BRAND MEANING */
.dashboard-brand-meaning {
    display:flex;
    align-items:baseline;
    justify-content:center;
    gap:7px;

    width:100%;
    margin:12px auto 18px;
    padding:7px 12px;

    border-top:1px solid rgba(17,24,39,.06);
    border-bottom:1px solid rgba(17,24,39,.06);

    color:#65737A;
    text-align:center;
}

.dashboard-brand-meaning strong {
    color:#17262C;
    font-size:12px;
    font-weight:800;
    white-space:nowrap;
}

.dashboard-brand-meaning span {
    font-size:11.5px;
    font-weight:500;
    line-height:1.4;
}

@media (max-width:560px) {
    .dashboard-brand-meaning {
        flex-direction:column;
        align-items:center;
        gap:1px;
        margin:10px auto 15px;
    }

    .dashboard-brand-meaning strong {
        font-size:12px;
    }

    .dashboard-brand-meaning span {
        font-size:11px;
    }
}

/* ============================================================
   NOTIFICATION DROPDOWN — GLOBAL LAYER FIX
   ============================================================ */

.topbar {
    position: relative !important;
    z-index: 10000 !important;
    overflow: visible !important;
}

.topbar .user-menu {
    position: relative !important;
    z-index: 10001 !important;
    overflow: visible !important;
}

.top-notification-wrap {
    position: relative !important;
    z-index: 10002 !important;
    overflow: visible !important;
}

.top-notification-button {
    position: relative !important;
    z-index: 10003 !important;
}

/*
 * Notification panel must sit above dashboard cards,
 * welcome panels and other content.
 */
.top-notification-panel,
.notification-dropdown,
.top-notification-dropdown {
    position: absolute !important;
    z-index: 999999 !important;
    top: calc(100% + 10px) !important;
    right: 0 !important;
}

/*
 * Do not allow the header or its immediate containers
 * to clip the notification panel.
 */
.main,
.main > header,
.app-shell {
    overflow: visible;
}

/*
 * Dashboard content must remain below the header dropdown.
 */
.main > section,
.main > .card,
.dashboard-birthday-card {
    position: relative;
    z-index: 1;
}



.sidebar nav .sidebar-group {
  margin-top: 8px;
  color: #E0F7FA;
}
.sidebar nav .sidebar-group summary {
  list-style: none;
  cursor: pointer;
  padding: 10px 12px;
  border-radius: 11px;
  font-weight: 700;
}
.sidebar nav .sidebar-group summary::-webkit-details-marker { display: none; }
.sidebar nav .sidebar-group summary:hover { background: #0369A1; color: #fff; }
.sidebar nav .sidebar-sub {
  display: grid;
  gap: 6px;
  margin: 6px 0 0 8px;
  padding-left: 8px;
  border-left: 2px solid rgba(224,247,250,.25);
}
.sidebar nav .sidebar-sub a {
  font-size: 14px;
  padding: 8px 10px;
}


/* ============================================================
   RYLA NEXT — DESKTOP STICKY SIDEBAR RESTORATION
   2026-09-01

   Keep the application navigation anchored to the viewport
   on desktop while allowing the nav itself to scroll when
   its contents exceed the viewport height.

   Mobile behaviour remains controlled by mobile-nav.css.
   ============================================================ */

@media (min-width: 761px) {

    .app-shell {
        align-items: start !important;
        overflow: visible !important;
    }

    .sidebar {
        position: sticky !important;
        top: 0 !important;

        align-self: start !important;

        height: 100vh !important;
        max-height: 100vh !important;
        min-height: 100vh !important;

        display: flex !important;
        flex-direction: column !important;

        overflow: hidden !important;
    }

    .sidebar .app-brand {
        flex: 0 0 auto !important;
    }

    .sidebar .mobile-menu-toggle {
        flex: 0 0 auto !important;
    }

    .sidebar nav {
        flex: 1 1 auto !important;

        min-height: 0 !important;

        overflow-y: auto !important;
        overflow-x: hidden !important;

        overscroll-behavior: contain;
        scrollbar-width: thin;
    }

    .sidebar-foot {
        flex: 0 0 auto !important;
    }
}


/* ============================================================
   RYLA NEXT — DEFINITIVE DESKTOP VIEWPORT SIDEBAR
   2026-09-01

   The previous layout accumulated several conflicting sticky,
   overflow and positioning rules. Desktop navigation is now
   deterministically anchored to the viewport.

   Mobile remains controlled by mobile-nav.css.
   ============================================================ */

@media (min-width: 761px) and (max-width: 1100px) {

    :root {
        --rn-fixed-sidebar-width: 220px;
    }
}


@media (min-width: 1101px) {

    :root {
        --rn-fixed-sidebar-width: 260px;
    }
}


@media (min-width: 761px) {

    html,
    body {
        overflow-x: hidden;
    }


    /*
     * Sidebar is removed from document flow.
     * The application shell reserves exactly the same width.
     */

    .app-shell {
        display: block !important;

        width: 100% !important;
        min-height: 100vh !important;

        padding-left:
            var(
                --rn-fixed-sidebar-width
            ) !important;

        overflow: visible !important;

        position: relative !important;
    }


    .sidebar {
        position: fixed !important;

        top: 0 !important;
        bottom: 0 !important;
        left: 0 !important;

        width:
            var(
                --rn-fixed-sidebar-width
            ) !important;

        height: 100vh !important;
        height: 100dvh !important;

        min-height: 0 !important;
        max-height: none !important;

        margin: 0 !important;

        display: flex !important;
        flex-direction: column !important;

        overflow: hidden !important;

        z-index: 20000 !important;
    }


    /*
     * Brand/footer stay visible.
     * Only the navigation area scrolls when necessary.
     */

    .sidebar .app-brand {
        flex: 0 0 auto !important;
    }


    .sidebar .mobile-menu-toggle {
        flex: 0 0 auto !important;
    }


    .sidebar nav {
        flex: 1 1 auto !important;

        min-height: 0 !important;

        overflow-x: hidden !important;
        overflow-y: auto !important;

        overscroll-behavior: contain;

        scrollbar-width: thin;
    }


    .sidebar-foot {
        flex: 0 0 auto !important;
    }


    /*
     * Main occupies only the remaining viewport width.
     */

    .main {
        display: block !important;

        width: 100% !important;
        min-width: 0 !important;
        min-height: 100vh !important;

        margin: 0 !important;

        position: relative !important;

        overflow: visible !important;
    }
}