/* =====================================================================
   Phase 5.7 — ORCSGirls brand color + "cards on gray" layout. The site
   logo is purple (public/images/LogoRound-Purple.png), so all "primary"
   Bootstrap components (buttons, badges, tables, links) are recolored
   to brand purple via CSS-variable overrides. Each admin table page
   wraps its content in white card surfaces against a light-gray body
   background — see mockups/B-card-admin.html for the reference design.
   Other contextual colors (success/danger/warning/info) keep their
   Bootstrap defaults — they're semantic, not brand.
   ===================================================================== */

:root {
  --orcs-purple:       #7e2a9b;
  --orcs-purple-hover: #621f7c;
  --orcs-purple-deep:  #2a0d33;  /* navbar / footer — darker than buttons */
  --orcs-purple-tint:  #f1e1f6;  /* very light — for table-primary rows */
  --orcs-purple-soft:  #e3cae9;  /* slightly stronger — striped/hover */
  --orcs-purple-rgb:   126, 42, 155;
  --orcs-page-bg:      #f4f5f7;  /* light gray surrounding the cards */
  --orcs-card-line:    #e1e4e8;  /* card border / table dividers */
}

/* Body background — light gray so the white cards have something to
   contrast against. Only set the bg; let Bootstrap own typography. */
body { background: var(--orcs-page-bg); }

/* Navbar + footer — deep purple instead of BS5's near-black `bg-dark`.
   Darker than the button purple so the chrome reads as "frame" and
   the action buttons retain primary-action prominence. */
.bg-dark { background-color: var(--orcs-purple-deep) !important; }

/* Buttons */
.btn-primary {
  --bs-btn-bg:                   var(--orcs-purple);
  --bs-btn-border-color:         var(--orcs-purple);
  --bs-btn-hover-bg:             var(--orcs-purple-hover);
  --bs-btn-hover-border-color:   var(--orcs-purple-hover);
  --bs-btn-active-bg:            var(--orcs-purple-hover);
  --bs-btn-active-border-color:  var(--orcs-purple-hover);
  --bs-btn-disabled-bg:          var(--orcs-purple);
  --bs-btn-disabled-border-color: var(--orcs-purple);
}
.btn-outline-primary {
  --bs-btn-color:                var(--orcs-purple);
  --bs-btn-border-color:         var(--orcs-purple);
  --bs-btn-hover-bg:             var(--orcs-purple);
  --bs-btn-hover-border-color:   var(--orcs-purple);
  --bs-btn-active-bg:            var(--orcs-purple);
  --bs-btn-active-border-color:  var(--orcs-purple);
  --bs-btn-disabled-color:       var(--orcs-purple);
  --bs-btn-disabled-border-color: var(--orcs-purple);
}

/* Navbar action buttons (Search / Logout / Admin) — Bootstrap's default
   `btn-outline-success` / `btn-outline-warning` swap in green + yellow
   on the dark navbar, which clashes with the brand palette. These two
   chips paint a white outline on transparent (ghost) for low-emphasis
   actions, and a solid white-on-purple primary for Search. Hover swaps
   colors so the affordance stays obvious on the dark chrome. */
.btn-nav-action {
  --bs-btn-color:              #fff;
  --bs-btn-bg:                 var(--orcs-purple);
  --bs-btn-border-color:       var(--orcs-purple);
  --bs-btn-hover-color:        #fff;
  --bs-btn-hover-bg:           var(--orcs-purple-hover);
  --bs-btn-hover-border-color: var(--orcs-purple-hover);
  --bs-btn-active-color:       #fff;
  --bs-btn-active-bg:          var(--orcs-purple-hover);
  --bs-btn-active-border-color: var(--orcs-purple-hover);
}
.btn-nav-action.btn-nav-action-ghost {
  --bs-btn-color:              #fff;
  --bs-btn-bg:                 transparent;
  --bs-btn-border-color:       rgba(255,255,255,0.55);
  --bs-btn-hover-color:        var(--orcs-purple-deep);
  --bs-btn-hover-bg:           #fff;
  --bs-btn-hover-border-color: #fff;
  --bs-btn-active-color:       var(--orcs-purple-deep);
  --bs-btn-active-bg:          #fff;
  --bs-btn-active-border-color: #fff;
}

/* Profile/volunteer/parent navbar — compact mobile chrome. The
   inline "User: <long email>" + 4 nav buttons overflow phone-sized
   navbars, so below lg we swap to an initials-avatar + hamburger
   that opens a Bootstrap .collapse drawer holding the same items.
   Markup in templates/layouts/profile.html.twig — these rules
   style the right-side controls + the drawer body. */
.navbar-profile .nav-avatar {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--orcs-purple); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700;
  flex-shrink: 0;
}
.navbar-profile .nav-mobile-toggle {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.45);
  color: #fff;
  width: 36px; height: 32px;
  border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0;
  cursor: pointer;
}
.navbar-profile .nav-mobile-toggle:hover,
.navbar-profile .nav-mobile-toggle:focus {
  background: rgba(255,255,255,0.08);
  outline: none;
}
/* Three-bar hamburger drawn with box-shadows so the icon doesn't
   depend on an emoji font or an SVG asset. Rotates to an X when
   the drawer is open via aria-expanded. */
.navbar-profile .nav-mobile-toggle-bars,
.navbar-profile .nav-mobile-toggle-bars::before,
.navbar-profile .nav-mobile-toggle-bars::after {
  display: block;
  width: 16px; height: 2px;
  background: #fff;
  border-radius: 1px;
}
.navbar-profile .nav-mobile-toggle-bars { position: relative; }
.navbar-profile .nav-mobile-toggle-bars::before,
.navbar-profile .nav-mobile-toggle-bars::after {
  content: "";
  position: absolute; left: 0;
}
.navbar-profile .nav-mobile-toggle-bars::before { top: -5px; }
.navbar-profile .nav-mobile-toggle-bars::after  { top:  5px; }

.navbar-profile .nav-mobile-drawer {
  width: 100%;
  background: rgba(0, 0, 0, 0.18);
  border-top: 1px solid rgba(255,255,255,0.08);
}
.navbar-profile .nav-mobile-drawer .container-fluid {
  padding-top: 10px;
  padding-bottom: 12px;
}
.navbar-profile .nav-drawer-who {
  font-size: 12px;
  color: rgba(255,255,255,0.7);
  padding: 2px 4px 8px;
  word-break: break-all;
}
.navbar-profile .nav-drawer-who b { color: #fff; font-weight: 600; }
.navbar-profile .nav-drawer-item {
  display: block;
  padding: 10px 10px;
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  border-radius: 6px;
}
.navbar-profile .nav-drawer-item:hover,
.navbar-profile .nav-drawer-item:focus {
  background: rgba(255,255,255,0.08);
  color: #fff;
}
.navbar-profile .nav-drawer-item-logout {
  border-top: 1px solid rgba(255,255,255,0.1);
  margin-top: 6px;
  padding-top: 14px;
}

/* Desktop header (≥lg) — full-height underline tabs + an account chip
   whose Bootstrap dropdown owns email / Admin / Logout. Markup is
   d-none d-lg-flex in templates/layouts/profile.html.twig; the mobile
   hamburger drawer above is unchanged. Active tab is set client-side
   by /js/np-active-nav.js. */
@media (min-width: 992px) {
  /* Zero the navbar's vertical padding so tabs run full-height with a
     bottom underline marker; min-height keeps the bar tall. */
  .navbar-profile { padding-top: 0; padding-bottom: 0; }
  .navbar-profile > .container-fluid { min-height: 58px; }
}
.navbar-profile .np-desktop { align-items: stretch; gap: 6px; }
.navbar-profile .np-tabs { display: flex; align-items: stretch; }
.navbar-profile .np-tab {
  display: flex; align-items: center;
  padding: 0 16px;
  color: #cdb6d8; font-size: 14px; font-weight: 600;
  text-decoration: none; position: relative;
  transition: color 0.15s;
}
.navbar-profile .np-tab:hover,
.navbar-profile .np-tab:focus { color: #fff; }
.navbar-profile .np-tab.active { color: #fff; }
.navbar-profile .np-tab.active::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 0;
  height: 3px; background: var(--orcs-purple); border-radius: 3px 3px 0 0;
}
/* Account chip + its dropdown — shared by the profile and admin
   navbars (both dark bars), so these are NOT scoped to .navbar-profile.
   The np- prefix keeps collisions unlikely. */
.np-acct-wrap { display: flex; align-items: center; margin-left: 8px; }
.np-acct {
  display: inline-flex; align-items: center; gap: 9px;
  background: transparent; border: 0; cursor: pointer;
  padding: 6px 8px 6px 6px; border-radius: 999px;
  transition: background 0.15s;
}
.np-acct:hover,
.np-acct[aria-expanded="true"] { background: rgba(255,255,255,0.08); }
.np-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; color: #fff; flex-shrink: 0;
  background: linear-gradient(135deg, var(--orcs-purple), #b06fc9);
}
.np-acct-name {
  color: #fff; font-size: 13px; font-weight: 600;
  max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.np-acct-caret { color: #cdb6d8; font-size: 10px; }
.np-menu {
  margin-top: 8px; min-width: 230px; padding: 0;
  border: 1px solid var(--orcs-card-line); border-radius: 10px;
  box-shadow: 0 8px 24px rgba(16,22,26,0.18); overflow: hidden;
}
.np-menu-head { padding: 12px 14px; border-bottom: 1px solid var(--orcs-card-line); }
.np-menu-lbl {
  font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em;
}
.np-menu-em { font-size: 13.5px; font-weight: 600; color: #1f2328; word-break: break-all; }
.np-menu .dropdown-item { padding: 10px 14px; font-size: 14px; }
.np-menu .dropdown-item:hover,
.np-menu .dropdown-item:focus { background: var(--orcs-purple-tint); }
.np-menu .np-menu-danger { color: #8b1717; border-top: 1px solid var(--orcs-card-line); }
.np-menu .np-menu-danger:hover { background: #fdecea; color: #8b1717; }

/* Portal switcher (Option A) — the "Go to" list inside the account
   dropdown holds every signed-in surface the user can reach (Profile /
   Volunteer / Parent portal / Admin dashboard, role-gated). Shared by the
   admin + profile navbars; the current surface is marked by
   /js/portal-switcher.js (.current + a "Here" pill). */
.np-menu .np-menu-sec {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--muted); padding: 9px 14px 3px;
}
.np-menu .portal-item { display: flex; align-items: center; gap: 11px; }
.np-menu .portal-item .pi-ico {
  width: 20px; text-align: center; font-size: 15px; flex-shrink: 0; line-height: 1;
}
.np-menu .portal-item.current {
  background: var(--orcs-purple-tint); font-weight: 600; color: var(--orcs-purple-deep);
  box-shadow: inset 3px 0 0 var(--orcs-purple);
}
.np-menu .portal-item .pi-here {
  margin-left: auto; font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--orcs-purple); background: #fff;
  border: 1px solid var(--orcs-purple-soft); border-radius: 12px; padding: 1px 8px;
}
/* Mobile drawer — highlight the current portal row (drawer rows have no
   "Here" pill; the highlight alone carries it). */
.nav-mobile-drawer .portal-item.current {
  color: #fff; font-weight: 700; box-shadow: inset 3px 0 0 var(--orcs-purple);
}

/* Admin navbar (.navbar-admin) — carries the same look as the logged-in
   header: management menus as lavender->white underline tabs, white-card
   dropdowns, a frosted search pill, and the shared account chip above.
   Markup in templates/layouts/admin.html.twig. */
@media (min-width: 992px) {
  /* Full-height tabs need the bar's vertical padding zeroed. Only on
     >=lg — below that the navbar collapses and the nav stacks. */
  .navbar-admin { padding-top: 0; padding-bottom: 0; }
  .navbar-admin > .container-fluid { min-height: 58px; }
  .navbar-admin .navbar-nav { align-items: stretch; }
  .navbar-admin .navbar-nav > .nav-item { display: flex; align-items: stretch; }
  .navbar-admin .navbar-nav > .nav-item > .nav-link {
    display: flex; align-items: center; padding: 0 13px;
  }
  .navbar-admin .navbar-nav > .nav-item > .nav-link.active::after,
  .navbar-admin .navbar-nav > .nav-item.show > .nav-link::after {
    content: ""; position: absolute; left: 13px; right: 13px; bottom: 0;
    height: 3px; background: var(--orcs-purple); border-radius: 3px 3px 0 0;
  }
}
.navbar-admin .navbar-nav > .nav-item > .nav-link {
  color: #cdb6d8; font-size: 14px; font-weight: 600; position: relative;
  transition: color 0.15s;
}
.navbar-admin .navbar-nav > .nav-item > .nav-link:hover,
.navbar-admin .navbar-nav > .nav-item > .nav-link:focus,
.navbar-admin .navbar-nav > .nav-item.show > .nav-link { color: #fff; }
.navbar-admin .navbar-nav > .nav-item > .nav-link.active { color: #fff; }
.navbar-admin .dropdown-toggle::after { vertical-align: middle; opacity: 0.8; }
/* White-card dropdowns matching .np-menu */
.navbar-admin .dropdown-menu {
  margin-top: 8px; padding: 6px 0; min-width: 230px;
  border: 1px solid var(--orcs-card-line); border-radius: 10px;
  box-shadow: 0 8px 24px rgba(16,22,26,0.18);
}
.navbar-admin .dropdown-menu .dropdown-item { padding: 8px 16px; font-size: 14px; }
.navbar-admin .dropdown-menu .dropdown-item:hover,
.navbar-admin .dropdown-menu .dropdown-item:focus { background: var(--orcs-purple-tint); }
/* Current-page item gets .active (added by the navbar script). Bootstrap's
   .dropdown-item.active forces white text on a solid bg — unreadable inside
   our white dropdown — so mark it purple-on-tint instead. */
.navbar-admin .dropdown-menu .dropdown-item.active,
.navbar-admin .dropdown-menu .dropdown-item:active {
  background: var(--orcs-purple-tint);
  color: var(--orcs-purple-deep);
  font-weight: 600;
}
.navbar-admin .dropdown-menu .dropdown-header {
  font-size: 11px; color: var(--muted); text-transform: uppercase;
  letter-spacing: 0.04em; font-weight: 700; padding: 6px 16px 4px;
}
/* Frosted search pill */
.navbar-admin .admin-search {
  display: flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,0.10); border-radius: 8px; padding: 4px 4px 4px 12px;
}
.navbar-admin .admin-search input {
  background: transparent; border: 0; outline: 0; box-shadow: none;
  color: #fff; font-size: 13px; width: 130px; padding: 0;
}
.navbar-admin .admin-search input::placeholder { color: #b9a3c4; }
.navbar-admin .admin-search input:focus { background: transparent; color: #fff; box-shadow: none; }

/* Backgrounds + text utilities */
.bg-primary       { background-color: var(--orcs-purple) !important; }
.text-bg-primary  { color: #fff !important; background-color: var(--orcs-purple) !important; }
.text-primary     { color: var(--orcs-purple) !important; }
.border-primary   { border-color: var(--orcs-purple) !important; }
.link-primary     { color: var(--orcs-purple) !important; }

/* Tables — `table-primary` row class */
.table-primary {
  --bs-table-color:         #000;
  --bs-table-bg:            var(--orcs-purple-tint);
  --bs-table-border-color:  #d8b3e3;
  --bs-table-striped-bg:    var(--orcs-purple-soft);
  --bs-table-striped-color: #000;
  --bs-table-active-bg:     var(--orcs-purple-soft);
  --bs-table-active-color:  #000;
  --bs-table-hover-bg:      var(--orcs-purple-soft);
  --bs-table-hover-color:   #000;
}

/* Body link color (excluding navbar / dropdowns / buttons that have
   their own coloring). Matches the brand purple, no underline by
   default, underline on hover — same pattern as mockup B. */
a:not(.btn):not(.nav-link):not(.dropdown-item):not(.navbar-brand):not(.seg):not(.action-pill):not(.pill):not(.attention-card):not(.nav-drawer-item):not(.kid-pill):not(.btn-kid-action):not(.btn-add-kid):not(.gp-edit-btn):not(.np-tab):not(.footer-link):not(.rq-pill):not(.pp-pay-btn):not(.cl-cta-btn):not(.cd-cta):not(.cnf-cta):not(.cl-card-title-link):not(.cl-track-pill):not(.ch-cta):not(.ch-mat):not(.cd-mat):not(.cms-btn):not(.cms-social-link):not(.newuser-btn) {
  color: var(--orcs-purple);
  text-decoration: none;
}
a:not(.btn):not(.nav-link):not(.dropdown-item):not(.navbar-brand):not(.seg):not(.action-pill):not(.pill):not(.attention-card):not(.nav-drawer-item):not(.kid-pill):not(.btn-kid-action):not(.btn-add-kid):not(.gp-edit-btn):not(.np-tab):not(.footer-link):not(.rq-pill):not(.pp-pay-btn):not(.cl-cta-btn):not(.cd-cta):not(.cnf-cta):not(.cl-card-title-link):not(.cl-track-pill):not(.ch-cta):not(.ch-mat):not(.cd-mat):not(.cms-btn):not(.cms-social-link):not(.newuser-btn):hover {
  color: var(--orcs-purple-hover);
  text-decoration: underline;
}

/* Navbar dropdown subheadings — admin navbar uses Bootstrap's
   .dropdown-header inside .dropdown-menu to group related items
   (Maintenance / Exports / Maps subheadings, etc.). Bootstrap's
   default is muted grey; lift to brand purple so they read as
   section labels rather than dimmer items in the same list. */
.navbar .dropdown-menu .dropdown-header {
  color: var(--orcs-purple);
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding-top: 10px;
}

/* Links inside data tables also get the mockup's slightly bolder
   weight so they read as actionable. */
.section-card table a { font-weight: 500; }

/* Nav-pills (used by the per-user participation report tabs). Replaces
   the previous semi-transparent green with brand purple. */
.nav-pills .nav-link.active {
  background-color: var(--orcs-purple);
  color: #fff;
}
.nav-pills .nav-link:not(.active) {
  background-color: #f0f0f0;
  color: var(--orcs-purple);
}
.nav-pills .nav-link:not(.active):hover {
  background-color: #e6e6e6;
}

/* DataTables 2 pagination — DT 2.x emits `.dt-paging > nav > ul.pagination`
   so the legacy `.dataTables_wrapper` selector doesn't catch it. Use
   the BS5-rendered `.pagination` directly under a `.dt-paging` parent. */
.dt-paging .pagination .page-item.active .page-link {
  background-color: var(--orcs-purple);
  border-color:     var(--orcs-purple);
  color: #fff;
}
.dt-paging .pagination .page-link {
  color: var(--orcs-purple);
}
.dt-paging .pagination .page-link:focus,
.dt-search input:focus,
.dt-length select:focus,
.form-control:focus,
.form-select:focus {
  border-color: var(--orcs-purple);
  box-shadow: 0 0 0 0.25rem rgba(var(--orcs-purple-rgb), .25);
}

/* Phase 6 admin-authoring form styling. Locks in the look that
   6b–6f will inherit. Bold purple labels (matches the brand-link
   treatment from theme §body links), and a purple border on input
   hover so the field reads as actionable before focus. Scoped to
   .section-card so the public login / reset forms — which use their
   own .auth-card container — keep their tighter, neutral look. */
.section-card .form-label {
  color:       var(--orcs-purple);
  font-weight: 600;
}
.section-card .form-control,
.section-card .form-select {
  background-color: #f7f8fa;
}
.section-card .form-control:hover,
.section-card .form-select:hover {
  border-color: var(--orcs-purple);
}
.section-card .form-control:focus,
.section-card .form-select:focus {
  background-color: #fff;
}

/* New-user paths on the login card — a "New to ORCSGirls?" band under the
   sign-in form linking cold visitors to parent self-signup / volunteer apply
   (they used to hit the login with no way to create an account). The
   .newuser-btn anchors are in the body-link :not() chain above so the global
   purple-link rule doesn't override their colors / underline them on hover. */
/* Tailored "?next=" hint at the top of the login card (purple-tint callout). */
.newuser-hint {
  background: var(--orcs-purple-tint); color: var(--orcs-purple-deep);
  border: 1px solid var(--orcs-purple-soft); border-radius: 8px;
  padding: 9px 12px; font-size: 13px; line-height: 1.45;
}
.newuser { margin-top: 18px; }
.newuser-divider {
  display: flex; align-items: center; gap: 10px; margin: 0 0 12px;
  color: var(--muted); font-size: 11px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
}
.newuser-divider::before, .newuser-divider::after {
  content: ""; height: 1px; background: var(--orcs-card-line); flex: 1;
}
.newuser-actions { display: flex; flex-direction: column; gap: 9px; }
.newuser-btn {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 13px; border-radius: 8px; border: 1px solid transparent;
  text-decoration: none;
  transition: background-color .13s ease, border-color .13s ease, color .13s ease;
}
.newuser-btn .nu-ic { font-size: 17px; line-height: 1; }
.newuser-btn .nu-txt { display: flex; flex-direction: column; line-height: 1.25; }
.newuser-btn .nu-txt b { font-weight: 600; font-size: 13.5px; }
.newuser-btn .nu-txt span { font-size: 11.5px; color: var(--muted); }
.newuser-btn-soft { background: var(--orcs-purple-tint); color: var(--orcs-purple-deep); }
.newuser-btn-soft:hover { background: var(--orcs-purple-soft); }
.newuser-btn-soft .nu-txt b { color: var(--orcs-purple-deep); }
.newuser-btn-outline { background: #fff; border-color: var(--orcs-purple); color: var(--orcs-purple); }
.newuser-btn-outline:hover { background: var(--orcs-purple-tint); }
.newuser-btn-outline .nu-txt b { color: var(--orcs-purple); }
.newuser-btn:focus-visible { outline: 2px solid var(--orcs-purple); outline-offset: 2px; }

/* =====================================================================
   Page layout — "cards on gray" (mockups/B-card-admin.html)
   ===================================================================== */

/* Phase 5.7 — full viewport width with a small gutter on each side.
   No max-width cap so panels grow with the window on wide displays
   (admin tables benefit from the extra horizontal room). */
main.page-main {
  padding: 20px 24px 60px;
}

/* Page title strip — styled as its own card with a brand-purple
   top accent so the title text never sits "naked" on the gray
   body background. The h1 text is colored brand purple too — a
   small "this is the page you're on" cue. */
.page-header {
  background: white;
  border: 1px solid var(--orcs-card-line);
  border-top: 3px solid var(--orcs-purple);
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  padding: 14px 20px;
  margin-bottom: 16px;
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.page-header .page-title-block h1 {
  font-size: 24px; font-weight: 600; margin: 0;
  letter-spacing: -0.01em;
  color: var(--orcs-purple);
}
.page-header .page-title-block .sub {
  color: #6a737d; margin: 4px 0 0; font-size: 14px;
}
.page-header .page-actions { display: flex; gap: 8px; }

/* Variant: section-card that also acts as the page header — used
   when a page has both a title and a filter row that read better
   merged into one card (e.g. students.html.twig with the time
   period dropdown). The .section-head gets the same purple accent
   and purple title as the standalone .page-header. */
.section-card.page-card { border-top: 3px solid var(--orcs-purple); }
.section-card.page-card > .section-head h2 {
  color: var(--orcs-purple);
  font-size: 22px;
  letter-spacing: -0.01em;
}
.section-card.page-card > .section-head .sub {
  color: #6a737d; font-size: 14px; margin: 0 0 0 12px;
}

/* Community report hero — Girl Scouts / Girls Inc reports. Bigger
   logo that spans the head's height; title + subtitle stack on the
   right, both flush-left (the default `.page-card .sub` rule adds a
   12px left margin that's right for inline header-with-subtitle but
   wrong for a stacked title block — overridden here). */
.section-card.community-hero > .section-head {
  align-items: center;
  gap: 20px;
  padding: 16px 24px;
}
.community-logo {
  height: 90px;
  width: auto;
  object-fit: contain;
  flex-shrink: 0;
}
.community-titleblock {
  flex: 1;
  text-align: left;
  min-width: 0;
}
.community-titleblock h2 {
  margin: 0 0 4px;
  font-size: 22px;
  color: var(--orcs-purple);
  letter-spacing: -0.01em;
  text-align: left;
}
.community-sub {
  margin: 0;
  font-size: 14px;
  color: #6a737d;
  text-align: left;
  line-height: 1.45;
}

/* Login / reset / password — small centered card on the page,
   sharing the page-card purple accent. */
.auth-card {
  max-width: 480px;
  margin: 40px auto 0;
}

/* Section card — admin pages wrap their content in one (or two — a
   filter card on top + a data card below). */
.section-card {
  background: white;
  border: 1px solid var(--orcs-card-line);
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  margin-bottom: 16px;
}
.section-card > .section-head {
  display: flex; align-items: baseline; gap: 12px;
  padding: 14px 24px;
  border-bottom: 1px solid var(--orcs-card-line);
}
.section-card > .section-head h2 {
  font-size: 16px; font-weight: 600; margin: 0; letter-spacing: -0.01em;
}
.section-card > .section-head .meta { color: #6a737d; font-size: 13px; }
.section-card > .section-body { padding: 16px 24px; }

/* Subsection heading inside long admin forms (Persons edit groups
   Identity / Shipping address / Profile). Sits between row groups
   with a thin top rule so the form reads as panels, not one giant
   stack of inputs. */
.form-subhead {
  margin: 20px 0 12px;
  padding-top: 14px;
  border-top: 1px solid var(--orcs-card-line);
  font-size: 13px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--orcs-purple);
}
.form-subhead:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.form-subhead-note {
  font-weight: 400; text-transform: none; letter-spacing: 0;
  color: #6a737d;
}

/* DataTables 2 wraps tables in a .dt-container — pad it inside cards
   so the search/CSV toolbar and pagination breathe. Matches the
   `section-body` padding so DT-tables and plain tables align.
   overflow-x lets wide tables (e.g. /admin/persons' 15 columns, the
   /admin/parents listing) scroll inside the card instead of bleeding
   off the page edge; overflow-y pinned hidden so it doesn't surface a
   stub vertical scrollbar (overflow-x:auto would otherwise imply it). */
.section-card .dt-container { padding: 16px 24px; overflow-x: auto; overflow-y: hidden; }
.section-card .dt-container > table { margin-bottom: 0; }

/* When a section-body wraps a DT-rendered table (info.php /
   volinfo.php / classinfo.php after section_break()), the
   dt-container already provides padding — strip the section-body's
   so we don't double up and end up with the table 48px from the
   card edge while other table pages only have it 24px. */
.section-card > .section-body:has(.dt-container) { padding: 0; }

/* =====================================================================
   Admin review queues — shared "Option C" format for the four
   approval surfaces (volunteer applications, class applications,
   participation-history claims, scholarship requests). Status pill
   bar + DataTable (search/sort) + a Review modal; decided rows open a
   read-only modal. Per-page templates supply their own columns + modal
   body; everything visual lives here so the four pages match.
   The toolbar carries its own 24px inset because the dt-container
   :has() rule above zeroes the section-body padding. */
.rq-toolbar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; padding: 16px 24px 0; }
.rq-toolbar .lbl { font-size: 11px; color: var(--orcs-purple); text-transform: uppercase; letter-spacing: .04em; font-weight: 700; }
.rq-toolbar select { width: auto; min-width: 230px; max-width: 360px; }
.rq-toolbar .grow { margin-left: auto; }

/* Review-queue cards zero their own body padding (pills / toolbar / table
   each carry the 24px inset) so the empty state and the DataTable state
   line up identically. */
.section-card > .section-body:has(.rq-pills) { padding: 0; }
.rq-pills { display: flex; gap: 6px; flex-wrap: wrap; padding: 16px 24px 0; }
.rq-pills + .rq-toolbar { padding-top: 12px; }
.rq-pill { background: #fff; border: 1px solid var(--orcs-card-line); border-radius: 999px;
           padding: 5px 14px; font-size: 13px; color: #1f2328; text-decoration: none;
           display: inline-flex; align-items: center; gap: 6px; transition: background-color .1s, color .1s; }
.rq-pill:hover { background: var(--orcs-purple-tint); color: var(--orcs-purple-hover); text-decoration: none; }
.rq-pill.active { background: var(--orcs-purple); border-color: var(--orcs-purple); color: #fff; font-weight: 600; }
.rq-pill.active:hover { background: var(--orcs-purple-hover); color: #fff; }
.rq-pill .n { background: rgba(0,0,0,.08); border-radius: 10px; padding: 1px 7px; font-size: 11px; font-weight: 600; }
.rq-pill.active .n { background: rgba(255,255,255,.25); }

/* Decision badges (pending / approved / waitlisted / declined). */
.rq-dec { font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 999px; text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; }
.rq-dec.pending  { background: #eef1f4; color: #44505c; }
.rq-dec.approved { background: #e6f4ea; color: #1d6b34; }
.rq-dec.declined { background: #fdecea; color: #8b1717; }
.rq-dec.waitlist { background: #fff3d6; color: #8a5a00; }

.rq-schol-pill { display: inline-block; background: #fff3d6; color: #8a5a00; border: 1px solid #f0d9a0; border-radius: 999px; padding: 0 8px; font-size: 11px; font-weight: 600; }
.rq-hist { white-space: nowrap; font-size: 12.5px; }
.rq-hist .att { color: #1d6b34; font-weight: 600; }
.rq-hist .warn { color: #8b1717; font-weight: 600; }
.rq-answer-snip { max-width: 380px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rq-muted { color: var(--muted); font-size: 12.5px; }

/* Review-modal building blocks (shared across the four queues). */
.rq-field-label { font-size: 11px; color: var(--orcs-purple); text-transform: uppercase; letter-spacing: .04em; font-weight: 700; margin-bottom: 4px; }
.rq-answer { white-space: pre-wrap; font-size: 13.5px; line-height: 1.55; color: #1f2328; background: #fafbfc; border: 1px solid var(--orcs-card-line); border-left: 3px solid var(--orcs-purple); border-radius: 6px; padding: 12px 14px; }
.rq-hist-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 6px 0 2px; }
.rq-hist-tile { border: 1px solid var(--orcs-card-line); border-radius: 8px; padding: 10px 8px; text-align: center; }
.rq-hist-tile .n { font-size: 22px; font-weight: 700; color: #2a0d33; line-height: 1; }
.rq-hist-tile .l { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; margin-top: 5px; }
.rq-hist-tile.warn .n { color: #8b1717; }
.rq-schol-note { background: #fff3d6; border: 1px solid #f0d9a0; border-radius: 8px; padding: 10px 12px; font-size: 13px; color: #6a4a00; }
.rq-ro-row { display: flex; gap: 10px; font-size: 13.5px; padding: 5px 0; border-bottom: 1px solid #eef1f4; }
.rq-ro-row .k { width: 140px; color: var(--muted); flex-shrink: 0; }
.rq-blocked { background: #fdecea; border: 1px solid #f3c9c4; border-radius: 8px; padding: 10px 12px; font-size: 13px; color: #8b1717; }
.rq-cand { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid #eef1f4; font-size: 13.5px; }
.rq-cand:last-child { border-bottom: none; }
.rq-reason { width: 100%; border: 1px solid var(--orcs-card-line); border-radius: 8px; padding: 8px 10px; font-size: 13px; resize: vertical; margin-top: 4px; }

/* Decision-action buttons used in the review modals. */
.rq-btn-approve  { background: #1d6b34; color: #fff; border: 0; border-radius: 6px; padding: 7px 18px; font-size: 14px; font-weight: 600; cursor: pointer; }
.rq-btn-approve:hover  { background: #17572a; }
.rq-btn-decline  { background: #fff; color: #8b1717; border: 1px solid #e1c4c4; border-radius: 6px; padding: 7px 18px; font-size: 14px; font-weight: 600; cursor: pointer; }
.rq-btn-decline:hover  { background: #fdecea; }
.rq-btn-waitlist { background: #fff3d6; color: #8a5a00; border: 1px solid #f0d9a0; border-radius: 6px; padding: 7px 18px; font-size: 14px; font-weight: 600; cursor: pointer; }
.rq-btn-waitlist:hover { background: #fce9b8; }
.rq-btn-review   { background: var(--orcs-purple); color: #fff; border: 0; border-radius: 6px; padding: 5px 16px; font-size: 13px; font-weight: 600; cursor: pointer; }
.rq-btn-review:hover { background: var(--orcs-purple-hover); }

/* =====================================================================
   Table styling inside section-cards — matches mockup B-card-admin.
   Soft purple-tinted header row, bottom-only cell borders (drops the
   heavy `table-bordered` left/right lines), purple hover. Cell font
   size is 13px to fit more columns on screen without horizontal
   scroll on common admin tables.
   ===================================================================== */

.section-card table { font-size: 14px; }
.section-card table thead th {
  background:        var(--orcs-purple-tint);
  border-bottom:     2px solid var(--orcs-purple-soft);
  border-top:        1px solid var(--orcs-purple-soft);
  color:             #1f2328;
  font-weight:       600;
  font-size:         13px;
}
/* Drop alternating-row background. The DataTables BS5 integration
   paints stripes via an inset `box-shadow` (not background-color):
     table.table.dataTable.table-striped > tbody > tr:nth-of-type(2n+1) > *
       { box-shadow: inset 0 0 0 9999px rgba(var(--dt-row-stripe), .05) }
   Setting background-color does nothing — have to zero the shadow.
   Also covers plain BS5 .table-striped (background-color path) and
   the .odd / .even row classes DT adds on each <tr>. */
.section-card table.table-striped > tbody > tr > *,
.section-card table > tbody > tr.odd > *,
.section-card table > tbody > tr.even > * {
  background-color: transparent !important;
  box-shadow:       none          !important;
}
/* Remove left/right cell borders even when .table-bordered is on the
   table (drops the heavy gridded look — keeps just row separators). */
.section-card table.table-bordered > :not(caption) > * > * {
  border-left:  0;
  border-right: 0;
}
/* Row padding — mockup uses 10px/12px (slightly taller than BS5's
   `table-sm` 4px/8px). Override `table-sm` cell padding inside
   section-cards so we get a bit more vertical breathing room without
   touching the $tableDefault class list. */
.section-card table.table-sm > :not(caption) > * > * {
  padding: 0.625rem 0.75rem;
}
/* Row hover → purple-tint. DT 2 + bs5 also paints hover with an
   inset box-shadow (`rgba(var(--dt-row-hover), .075)`) — have to
   zero that too or it sits on top of our background-color. */
.section-card table.table-hover > tbody > tr:hover > * {
  background-color: var(--orcs-purple-tint) !important;
  box-shadow:       none                    !important;
  color:            #1f2328                 !important;
}

/* DataTables info row ("Showing 1 to 8 of 8 entries") — smaller +
   muted to match the mockup's footer treatment. */
.section-card .dt-info {
  font-size: 13px;
  color:     #6a737d;
}

/* DataTables toolbar buttons (CSV export + Columns visibility) —
   styled to match the .seg pill vocabulary used on the period
   selectors so the in-table controls and the page-header pills read
   as one consistent control family. DT 2 + Buttons 3 + buttons-bs5
   emits each button as `button.btn.btn-secondary.buttons-csv` —
   NO `.dt-button` class (that was DT 1.x). The buttons sit inside a
   `.dt-buttons` container that BS5 styles as a btn-group (sharp
   inner corners + no gap between siblings) — we override both so
   each button reads as a standalone pill. `!important` to beat
   BS5's .btn-secondary cascade (var(--bs-btn-bg) → #6c757d gray)
   and the btn-group's `:not(:last-child) { border-top-right-radius: 0 }`. */
.section-card .dt-buttons {
  display:    inline-flex;
  gap:        8px;
}
.section-card .dt-buttons .btn {
  background-color: var(--orcs-purple)       !important;
  border-color:     var(--orcs-purple)       !important;
  color:            #fff                     !important;
  font-size:        13px;
  padding:          7px 14px;
  line-height:      1;
  border-radius:    8px                      !important;
}
.section-card .dt-buttons .btn:hover,
.section-card .dt-buttons .btn:focus,
.section-card .dt-buttons .btn:active {
  background-color: var(--orcs-purple-hover) !important;
  border-color:     var(--orcs-purple-hover) !important;
  color:            #fff                     !important;
}
/* Colvis dropdown menu — readable neutral background with a purple
   tick on the active items. Not scoped under .section-card because
   DT 2 portals the .dt-button-collection to <body> in some layouts,
   moving it out of the table's section-card subtree. */
.dt-button-collection .dt-button {
  background-color: #fff                     !important;
  color:            #24292f                  !important;
  border-color:     transparent              !important;
  border-radius:    0                        !important;
  font-size:        13px;
  padding:          6px 14px;
}
.dt-button-collection .dt-button:hover {
  background-color: var(--orcs-purple-tint)  !important;
  color:            var(--orcs-purple)       !important;
}
.dt-button-collection .dt-button.active {
  color:            var(--orcs-purple)       !important;
  font-weight:      600;
}

/* Stat tiles — small data-summary grid used in the page-card header
   of info.php / volinfo.php (Total registrations, Participated,
   Waiting list, Cancelled, No Show). Auto-fits 5-ish across on wide
   viewports, collapses to 2 on narrow. Purple values, muted labels. */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-top: 16px;
}
/* Single-column variant for the dashboard side panel — tiles stack
   vertically so the right-hand "Key numbers" column tracks the
   chart's height instead of overflowing horizontally. */
.stat-grid.stat-grid-stack {
  grid-template-columns: 1fr;
  margin-top: 0;
}
.stat-tile {
  background: #fff;
  border: 1px solid var(--orcs-card-line);
  border-radius: 8px;
  padding: 10px 14px;
  text-align: center;
}
.stat-tile .label {
  color: #6a737d; font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600;
}
.stat-tile .value {
  font-size: 22px; font-weight: 600;
  color: var(--orcs-purple); line-height: 1.2;
  letter-spacing: -0.01em;
}
/* Stat-tile trend line — small ↑/↓ delta under the big value. Used on
   /reports/participation.php to compare current year to previous. */
.stat-tile .trend {
  font-size: 11px;
  margin-top: 4px;
  line-height: 1.3;
}
.stat-tile .trend.trend-up   { color: #1a7f37; }
.stat-tile .trend.trend-down { color: #b42318; }
.stat-tile .trend.trend-flat { color: #6a737d; }

/* Link-pill cell — wrapping pills look awkward when centered (last row
   floats); left-align so they stack flush-left within the cell. */
.link-pills .badge { margin-right: 4px; }

/* Brand soft badge — purple text on light-purple tint. Used for count
   pills next to admin page titles ("Pending review", selection counts),
   the volunteer "Virtual" badge on session cards, and similar soft
   non-semantic chips. .text-bg-primary stays the choice for hard
   purple-on-white emphasis (admin/role badges). */
.badge-brand-soft {
  background-color: var(--orcs-purple-tint);
  color:            var(--orcs-purple);
}

/* "Needs your attention" strip — admin dashboard shortcuts to queues
   that have items awaiting action (pending applications, pending
   claims). Each card is a link; the row collapses when every queue
   is empty (template-level guard). Brand-purple left accent + count
   so the row reads as actionable, with a hover lift to confirm the
   card is clickable. */
.attention-strip { margin-bottom: 16px; }
.attention-strip > .attention-label {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 12px;
  font-weight: 700;
  color: #6a737d;
  margin: 0 0 8px;
}
.attention-card {
  display: block;
  background: white;
  border: 1px solid var(--orcs-card-line);
  border-left: 4px solid var(--orcs-purple);
  border-radius: 8px;
  padding: 12px 14px;
  text-decoration: none;
  color: inherit;
  transition: box-shadow .12s ease;
}
.attention-card:hover {
  text-decoration: none;
  color: inherit;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}
.attention-card .count {
  font-size: 24px;
  font-weight: 700;
  color: var(--orcs-purple);
  line-height: 1.1;
}
.attention-card .title {
  font-size: 14px;
  font-weight: 600;
  color: #1f2328;
}
.attention-card .sub {
  font-size: 12px;
  color: #6a737d;
  margin-top: 2px;
}
.attention-card .cta {
  font-size: 12px;
  color: var(--orcs-purple);
  margin-top: 6px;
  font-weight: 600;
}
/* Aging escalation — oldest pending item ≥7 days (amber) / ≥14 (red).
   Tints the left accent + count so a long-waiting queue stands out. */
.attention-card.aged   { border-left-color: #c98a00; }
.attention-card.aged   .count { color: #8a5e00; }
.attention-card.aged   .sub b { color: #8a5e00; }
.attention-card.urgent { border-left-color: #c0392b; background: #fffafa; }
.attention-card.urgent .count { color: #8b1717; }
.attention-card.urgent .sub b { color: #8b1717; }

/* Girl Scouts badge card — green-tinted section-card variant used on
   classinfo.php when a class has Junior / Cadette badge tie-ins. Green
   so it visually reads as "Girl Scouts" without competing with the
   brand-purple header card above it. */
.section-card.gs-badge-card {
  background:    #eef9ee;            /* soft GS-green tint */
  border-color:  #b7dab7;
  border-left:   4px solid #2e7d32;  /* GS-green accent stripe */
}
.gs-badge-label {
  color:            #2e5e34;
  font-size:        11px;
  font-weight:      700;
  text-transform:   uppercase;
  letter-spacing:   0.06em;
  margin-bottom:    8px;
}
.gs-badge-row { display: flex; flex-wrap: wrap; gap: 12px; }
.gs-badge {
  display:        inline-flex;
  align-items:    center;
  gap:            8px;
  background:     #fff;
  border:         1px solid #b7dab7;
  border-radius:  999px;
  padding:        4px 12px 4px 4px;
  font-size:      14px;
  color:          #1f2328;
}
.gs-badge-tier {
  background:       #2e7d32;
  color:            #fff;
  font-size:        11px;
  font-weight:      700;
  text-transform:   uppercase;
  letter-spacing:   0.04em;
  padding:          3px 9px;
  border-radius:    999px;
}
.gs-badge-name { font-weight: 500; }

/* Event timeline — public /reports/schedule.php and the dashboard's
   "Upcoming classes" panel. Variant B from mockups/schedule-redesign.html:
   a vertical purple thread runs down the left margin; each event row
   has a brand-purple date pill floating beside the thread. Designed to
   render cleanly with 1–10 rows. */
.event-timeline { position: relative; padding: 4px 0 4px 100px; }
.event-timeline::before {
  content: ""; position: absolute;
  left: 60px; top: 14px; bottom: 14px;
  width: 2px; background: var(--orcs-purple-soft);
}
.event-timeline .event-row {
  position: relative;
  padding: 12px 0;
  border-bottom: 1px solid #eef0f3;
}
.event-timeline .event-row:last-child { border-bottom: 0; }
.event-timeline .event-dot {
  position: absolute; left: -47px; top: 18px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--orcs-purple);
  border: 3px solid white;
  box-shadow: 0 0 0 1px var(--orcs-purple-soft);
}
.event-timeline .event-date {
  position: absolute; left: -100px; top: 14px;
  width: 50px; text-align: right;
}
.event-timeline .event-date .day {
  font-size: 22px; font-weight: 700;
  color: var(--orcs-purple); line-height: 1;
}
.event-timeline .event-date .day a {
  color: var(--orcs-purple); text-decoration: none;
}
.event-timeline .event-date .day a:hover {
  color: var(--orcs-purple-hover); text-decoration: none;
}
.event-timeline .event-date .month {
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: #6a737d;
  margin-top: 1px;
}
.event-timeline .event-title {
  font-size: 16px; font-weight: 600; margin: 0;
}
.event-timeline .event-track-jr {
  background: #fff7e0; color: #8b5e00;
  font-size: 10px; padding: 2px 6px;
  border-radius: 4px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-right: 6px;
  vertical-align: middle;
}
.event-timeline .event-virtual { color: var(--orcs-purple); }
.event-timeline .event-meta {
  font-size: 13px; color: #6a737d;
  margin: 4px 0 0;
  display: flex; gap: 14px; flex-wrap: wrap;
}
.event-timeline .event-meta b { color: #1f2328; font-weight: 600; }
.event-timeline .event-desc {
  color: #6a737d; font-size: 13px;
  margin: 4px 0 0;
  line-height: 1.45;
}
.event-cta {
  background: var(--orcs-purple-tint);
  border-radius: 10px;
  text-align: center;
  padding: 12px;
  font-size: 14px;
  color: var(--orcs-purple);
  margin-top: 12px;
}
.event-cta a { color: var(--orcs-purple); font-weight: 600; }

/* Filter row — flex so dropdown + checkboxes stay on one line on wide
   screens, wrap on narrow. Sits inside the filter card's section-body. */
.filter-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
}
.filter-row .form-check { margin: 0; }

/* Bootstrap 5 form checkboxes — paint the checked state brand-purple
   (was the default Bootstrap blue #0d6efd). Border matches so the
   unchecked-to-checked transition reads clean. */
.form-check-input:checked {
  background-color: var(--orcs-purple);
  border-color:     var(--orcs-purple);
}
.form-check-input:focus {
  border-color: var(--orcs-purple);
  box-shadow:   0 0 0 0.25rem rgba(var(--orcs-purple-rgb), .25);
}

/* Segmented pill group — compact alternative to a Bootstrap button-
   dropdown for "pick one" choices. See mockups/time-period-selector.html
   variant A. Used by the time-period selector on students / volunteers /
   community, and by the three chart selectors (Period / Rank by / Top). */
.seg-group {
  display:        inline-flex;
  border:         1px solid var(--orcs-card-line);
  border-radius:  8px;
  overflow:       hidden;
  background:     #fff;
  font-size:      13px;
  line-height:    1;
}
.seg-group .seg-label {
  padding:          7px 12px;
  background:       #f7f8fa;
  color:            #6a737d;
  font-weight:      600;
  text-transform:   uppercase;
  letter-spacing:   0.05em;
  font-size:        11px;
  border-right:     1px solid var(--orcs-card-line);
  align-self:       stretch;
  display:          flex;
  align-items:      center;
}
.seg-group .seg {
  padding:          7px 14px;
  color:            #24292f;
  text-decoration:  none;
  border-right:     1px solid var(--orcs-card-line);
  background:       #fff;
  transition:       background-color .12s ease, color .12s ease;
}
.seg-group .seg:last-child { border-right: 0; }
.seg-group .seg:hover {
  background:       var(--orcs-purple-tint);
  color:            var(--orcs-purple);
  text-decoration:  none;
}
.seg-group .seg.active {
  background:   var(--orcs-purple);
  color:        #fff;
  font-weight:  600;
}
.seg-group .seg.active:hover {
  background: var(--orcs-purple-hover);
  color:      #fff;
}

/* Action pills — small purple-outline chips used on info.php / volinfo.php
   for the per-person Edit + Copy controls. Designed to match the seg-group
   pills (same purple, same 13px) so the page reads as one consistent
   control vocabulary. Row container adds a top gap so they don't sit on
   top of the inline metadata line above. */
.action-pill-row {
  display:     flex;
  flex-wrap:   wrap;
  gap:         8px;
  margin-top:  10px;
  margin-bottom: 4px;
}
.action-pill {
  display:         inline-flex;
  align-items:     center;
  gap:             6px;
  padding:         5px 12px;
  font-size:       13px;
  line-height:     1;
  font-weight:     500;
  color:           var(--orcs-purple);
  background:      #fff;
  border:          1px solid var(--orcs-purple);
  border-radius:   999px;
  cursor:          pointer;
  text-decoration: none;
  transition:      background-color .12s ease, color .12s ease;
}
.action-pill:hover, .action-pill:focus {
  background:      var(--orcs-purple);
  color:           #fff;
  text-decoration: none;
  outline:         none;
}
/* Disabled state for async triggers (e.g. the Proofread / Preview buttons that
   set button.disabled while a fetch is in flight) — otherwise a disabled pill
   still renders full-purple and looks clickable. */
.action-pill:disabled, .action-pill[disabled] {
  opacity: .55;
  cursor:  default;
}
.action-pill:disabled:hover, .action-pill[disabled]:hover {
  background: #fff;
  color:      var(--orcs-purple);
}
.action-pill .action-pill-icon {
  font-size: 13px;
  line-height: 1;
}

/* Map canvas — sized off the viewport minus the navbar (~56px), the
   page-main top + bottom padding (20 + 60), the page-card title strip
   (~68px including its bottom margin), the "Last update" caption
   below (~33px), the footer (60px), plus card borders/margins. Total
   chrome ≈ 320px. Previously `height: 75vh` (set inline) ran past the
   footer on shorter viewports; the first polish-round calc was too
   tight (260px) and pushed the footer off again on tall viewports
   because the chrome around the map is larger than expected. */
.map-canvas {
  height:         calc(100vh - 340px);
  min-height:     320px;
  border-radius:  10px;
  overflow:       hidden;
}

/* =====================================================================
   Compact admin edit-form layout — designed for laptop/desktop density
   (see mockups/admin-edit-form-compact.html). Used by every admin edit
   form (venues, classes, sessions, otherSessions, persons) via the
   helpers in templates/_form.html.twig. Replaces the wide-padded
   .section-card.page-card + .row/.col-md-N + stacked .form-label setup
   that was inherited from the index pages.

   Anatomy:
     .editform-card
       └── .ef-head      (slim title row, h1 + meta)
       └── .ef-body      (form host; sticky-footer anchor)
            └── .ef-sub  (subsection heading: thin top rule + purple
                          uppercase label, optional .ef-sub-note)
            └── .ef-row.cols-N   (CSS grid, N = 2 / 3 / 4 fields per row)
                 └── .ef-field   (label + control + .help)
            └── .ef-check        (compact checkbox treatment)
            └── .ef-footer       (sticky save/cancel bar)
   ===================================================================== */

.editform-card {
  background:    white;
  border:        1px solid var(--orcs-card-line);
  border-radius: 8px;
  box-shadow:    0 1px 2px rgba(0, 0, 0, 0.03);
  margin-bottom: 16px;
}
.editform-card .ef-head {
  padding:       12px 18px;
  border-bottom: 1px solid var(--orcs-card-line);
  display:       flex;
  align-items:   baseline;
  justify-content: space-between;
  gap:           12px;
  flex-wrap:     wrap;
}
.editform-card .ef-head h1,
.editform-card .ef-head h2 {
  font-size:     18px;
  font-weight:   600;
  margin:        0;
  letter-spacing: -0.01em;
  color:         var(--orcs-purple);
}
.editform-card .ef-head .meta {
  font-size: 12px;
  color:     var(--muted, #6a737d);
}
.editform-card .ef-body {
  padding: 14px 18px 18px;
}

/* Subsection heading — thin top rule + small purple uppercase label.
   .ef-sub-note is an optional inline subtitle. */
.ef-sub {
  margin:         14px 0 8px;
  padding-top:    10px;
  border-top:     1px solid #eef0f3;
  font-size:      11px;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color:          var(--orcs-purple);
  display:        flex;
  align-items:    baseline;
  gap:            10px;
}
.ef-sub:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.ef-sub .ef-sub-note {
  font-weight:    400;
  text-transform: none;
  letter-spacing: 0;
  color:          var(--muted, #6a737d);
  font-size:      12px;
}

/* Field rows — CSS grid. The .cols-N modifier sets equal columns;
   templates can also set grid-template-columns inline for non-equal
   splits (e.g. instructor 2fr / fee 1fr / capacity 1fr). */
.ef-row {
  display:        grid;
  gap:            10px 14px;
  margin-bottom:  10px;
}
.ef-row.cols-1 { grid-template-columns: 1fr; }
.ef-row.cols-2 { grid-template-columns: 1fr 1fr; }
.ef-row.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
.ef-row.cols-4 { grid-template-columns: 1fr 1fr 1fr 1fr; }
@media (max-width: 720px) {
  .ef-row.cols-2,
  .ef-row.cols-3,
  .ef-row.cols-4 { grid-template-columns: 1fr; }
}

/* Field — label + control + help. Each field has its own bottom margin
   so it stacks correctly when used outside an .ef-row (e.g. a single
   full-width field). Inside .ef-row, the grid gap owns the spacing —
   strip the redundant margin. */
.ef-field {
  display:        flex;
  flex-direction: column;
  margin-bottom:  10px;
}
.ef-row .ef-field { margin-bottom: 0; }

.ef-field > label {
  font-size:      11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight:    700;
  color:          var(--orcs-purple);
  margin:         0 0 3px;
  display:        flex;
  align-items:    baseline;
  gap:            6px;
}
.ef-field > label .req { color: #c93535; font-weight: 700; }
.ef-field > label .opt {
  color:          var(--muted, #6a737d);
  font-weight:    500;
  text-transform: none;
  letter-spacing: 0;
  font-size:      11px;
}
.ef-field > label .inline-help {
  margin-left:    auto;
  color:          var(--muted, #6a737d);
  font-weight:    400;
  text-transform: none;
  letter-spacing: 0;
  font-size:      11px;
}

/* Compact form controls — smaller padding + tighter font than the
   section-card defaults. Same purple hover/focus signaling. */
.ef-field .form-control,
.ef-field .form-select {
  padding:          5px 9px;
  font-size:        13.5px;
  line-height:      1.4;
  border-radius:    5px;
  background-color: #f7f8fa;
  border:           1px solid #d0d7de;
  transition:       border-color .12s ease, background-color .12s ease, box-shadow .12s ease;
}
.ef-field .form-control:hover,
.ef-field .form-select:hover { border-color: var(--orcs-purple); }
.ef-field .form-control:focus,
.ef-field .form-select:focus {
  background-color: #fff;
  border-color:     var(--orcs-purple);
  box-shadow:       0 0 0 3px rgba(var(--orcs-purple-rgb), .18);
  outline:          none;
}
.ef-field textarea.form-control { line-height: 1.45; }

/* Help text below a field. Use sparingly — most fields don't need it.
   .ef-add-link is the inline "+ Add a new venue" type shortcut that
   replaces the two-line "Don't see it? Add new" form-text helper. */
.ef-field .help {
  font-size:      11.5px;
  color:          var(--muted, #6a737d);
  margin-top:     3px;
  line-height:    1.4;
}
.ef-add-link {
  font-size:      11px;
  font-weight:    600;
  color:          var(--orcs-purple);
  text-decoration: none;
  margin-top:     3px;
  display:        inline-block;
}
.ef-add-link:hover { text-decoration: underline; }

/* Invalid-feedback message — Bootstrap-shape (.is-invalid trigger),
   but matched to the compact font size. */
.ef-field .invalid-feedback {
  display:        block;
  font-size:      11.5px;
  margin-top:     3px;
  color:          #c93535;
  font-weight:    500;
}

/* Compact checkbox — drops the .ef-field stacked shape because the
   label sits inline next to the checkbox. */
.ef-check {
  display:        flex;
  align-items:    flex-start;
  gap:            8px;
  margin-bottom:  10px;
}
.ef-check .form-check-input {
  margin-top:     2px;
  flex-shrink:    0;
}
.ef-check .form-check-input:checked {
  background-color: var(--orcs-purple);
  border-color:     var(--orcs-purple);
}
.ef-check label {
  font-size:      13px;
  color:          #1f2328;
  font-weight:    500;
  margin:         0;
  cursor:         pointer;
  line-height:    1.4;
}
.ef-check .help {
  display:        block;
  font-size:      11.5px;
  color:          var(--muted, #6a737d);
  margin-top:     2px;
  font-weight:    400;
}

/* Sticky save/cancel footer — spans card edges via negative margins
   sized to the .ef-body padding (18px sides + 18px bottom). Stays
   pinned to the viewport bottom while the form is in view. */
.editform-card .ef-footer {
  position:       sticky;
  bottom:         0;
  background:     rgba(255, 255, 255, 0.96);
  border-top:     1px solid var(--orcs-card-line);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding:        10px 18px;
  margin:         18px -18px -18px;
  border-bottom-left-radius:  8px;
  border-bottom-right-radius: 8px;
  display:        flex;
  align-items:    center;
  gap:            10px;
  z-index:        5;
}
.ef-footer .save-status {
  font-size:    12px;
  color:        var(--muted, #6a737d);
  margin-right: auto;
}
.ef-footer .btn-primary {
  background-color: var(--orcs-purple);
  border-color:     var(--orcs-purple);
  color:            white;
  padding:          6px 18px;
  font-size:        13.5px;
  font-weight:      600;
  border-radius:    5px;
}
.ef-footer .btn-primary:hover,
.ef-footer .btn-primary:focus {
  background-color: var(--orcs-purple-hover);
  border-color:     var(--orcs-purple-hover);
  color:            white;
}
.ef-footer .btn-cancel {
  color:        var(--muted, #6a737d);
  text-decoration: none;
  font-size:    13px;
  padding:      6px 10px;
  background:   transparent;
  border:       0;
}
.ef-footer .btn-cancel:hover { color: #1f2328; text-decoration: underline; }

/* Visibility radio strip — inline radios used by the session +
   otherSessions forms for "Who can sign up" (Open / Invite-only).
   Sits inside an .ef-field so the label above plays by the same
   purple-uppercase rules as the rest of the form. */
.ef-visibility {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
}
.ef-visibility .form-check {
  margin: 0;
  padding-left: 24px;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.ef-visibility .form-check .form-check-input {
  margin-left: -22px;
  margin-top: 0;
}
.ef-visibility .form-check-input:checked {
  background-color: var(--orcs-purple);
  border-color:     var(--orcs-purple);
}
.ef-visibility .form-check-label b { font-weight: 600; }

/* Side-by-side picker cards (Invitees / Add volunteers directly) on
   the session edit form. Compact summary + a single button per card. */
.ef-picker-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 6px;
  margin-bottom: 10px;
}
@media (max-width: 720px) { .ef-picker-row { grid-template-columns: 1fr; } }
.ef-picker {
  background:    #fafbfc;
  border:        1px solid var(--orcs-card-line);
  border-radius: 6px;
  padding:       10px 12px;
  display:       flex;
  flex-direction: column;
  gap:           6px;
}
.ef-picker .title {
  font-size:   12px;
  font-weight: 700;
  color:       #1f2328;
  display:     flex;
  align-items: center;
  gap:         8px;
}
.ef-picker .summary { font-size: 12px; color: #1f2328; line-height: 1.45; }
.ef-picker .summary .pill {
  background:    white;
  border:        1px solid var(--orcs-card-line);
  border-radius: 999px;
  padding:       1px 7px;
  font-size:     11px;
  margin-right:  3px;
  display:       inline-block;
  color:         #1f2328;
}
.ef-picker .desc { font-size: 11px; color: var(--muted, #6a737d); line-height: 1.4; }
.ef-picker .ef-picker-btn {
  align-self:    flex-start;
  background:    white;
  color:         var(--orcs-purple);
  border:        1px solid var(--orcs-purple);
  border-radius: 999px;
  padding:       3px 12px;
  font-size:     12px;
  font-weight:   600;
  cursor:        pointer;
  text-decoration: none;
}
.ef-picker .ef-picker-btn:hover {
  background: var(--orcs-purple);
  color:      white;
}

/* Multi-meeting repeater (session form). One slim row per additional
   meeting: index label + date + start + end + remove button. */
.ef-meetings {
  margin-bottom: 10px;
}
.ef-meetings .mt-toolbar {
  display:     flex;
  align-items: center;
  gap:         8px;
  margin-bottom: 6px;
}
.ef-meetings .mt-toolbar .label {
  font-size:      11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight:    700;
  color:          var(--orcs-purple);
}
.ef-meetings .mt-toolbar .hint {
  font-size: 11.5px;
  color:     var(--muted, #6a737d);
  margin-left: auto;
}
.ef-meetings .mt-row {
  display:     grid;
  grid-template-columns: 50px 1.4fr 1fr 1fr 28px;
  gap:         8px;
  align-items: center;
  padding:     4px 0;
}
.ef-meetings .mt-row .idx {
  font-size:      11px;
  color:          var(--muted, #6a737d);
  font-weight:    600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.ef-meetings .mt-row .form-control {
  padding:       4px 8px;
  font-size:     13px;
  line-height:   1.35;
  border-radius: 4px;
  background:    #f7f8fa;
  border:        1px solid #d0d7de;
}
.ef-meetings .mt-row .form-control:hover { border-color: var(--orcs-purple); }
.ef-meetings .mt-row .form-control:focus {
  background:   #fff;
  border-color: var(--orcs-purple);
  box-shadow:   0 0 0 3px rgba(var(--orcs-purple-rgb), .18);
  outline:      none;
}
.ef-meetings .mt-row .btn-x {
  background: transparent;
  border:     0;
  color:      var(--muted, #6a737d);
  font-size:  16px;
  line-height: 1;
  padding:    2px 6px;
  cursor:     pointer;
  border-radius: 4px;
}
.ef-meetings .mt-row .btn-x:hover { background: #fdecea; color: #b81d1d; }


/* =====================================================================
   Pre-existing styles (unchanged)
   ===================================================================== */

/* Small devices (landscape phones, 544px and up) */
@media (max-width: 544px) {
  html {font-size:75%;}
  table {font-size:85%;}
}

/* Map related styles ---------------------------------------------------- */
/* (The legacy `#map { width: 90%; height: 85% }` block was removed —
   it outranked .map-canvas via ID specificity and collapsed the
   Leaflet container to ~400px on tall viewports. Sizing now lives on
   .map-canvas exclusively.) */

.info {
  padding: 6px 8px;
  font: 14px/16px Arial, Helvetica, sans-serif;
  background: white;
  background: rgba(255,255,255,0.8);
  box-shadow: 0 0 15px rgba(0,0,0,0.2);
  border-radius: 5px;
  width: 250px;
  height: 120px;
}

.info h4 {
  margin: 0 0 5px;
  color: #777;
}

.legend {
    line-height: 18px;
    color: #555;
}
.legend i {
    width: 18px;
    height: 18px;
    float: left;
    margin-right: 8px;
    opacity: 0.7;
}

/* Sticky footer styles -------------------------------------------------- */
html {
  position: relative;
  min-height: 100%;
}
body {
  margin-bottom: 60px; /* Margin bottom by footer height */
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 60px; /* Set the fixed height of the footer here */
  display: flex;
  align-items: center;          /* vertically center (replaces line-height hack) */
  /* bg comes from .bg-dark (--orcs-purple-deep) so the footer reads as
     the same brand chrome as the navbar. A thin top hairline separates
     it from the page like the nav drawer divider. */
  border-top: 1px solid rgba(255,255,255,0.10);
  font-size: 13px;
  color: #b9a3c4;               /* muted lavender — matches nav inactive tone */
  letter-spacing: 0.01em;
}
.footer .footer-link {
  color: #e7d9ee;
  font-weight: 600;
  text-decoration: none;
}
.footer .footer-link:hover,
.footer .footer-link:focus { color: #fff; text-decoration: underline; }

/* "Please verify your email" banner — shown on the self-serve layout
   (profile / volunteer / parent-portal) for unconfirmed accounts, with
   an inline resend button. Amber, full-width, above the page content. */
.verify-banner {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 10px 16px;
  background: #fff5d6; color: #6b4e00;
  border-bottom: 1px solid #f0dca8;
  padding: 10px 16px; font-size: 14px;
}
.verify-banner .vb-text { font-weight: 500; }
.verify-banner .vb-form { margin: 0; }
.verify-banner .vb-btn {
  background: var(--orcs-purple); color: #fff; border: 0; border-radius: 6px;
  padding: 6px 14px; font-size: 13px; font-weight: 600; cursor: pointer;
  white-space: nowrap;
}
.verify-banner .vb-btn:hover { background: var(--orcs-purple-hover); }

.bigprint {
	font-size:large;
}

/* =====================================================================
   Self-service shared components (.ss-page)

   The volunteer landing (/volunteer, .v-land) and the parent portal
   (/parent-portal, .pp-page) are sibling self-service surfaces and were
   each carrying a near-identical ~450-line inline <style> block. This
   section lifts the component rules they share — page frame, greeting,
   stat-strip base, the session-card family (shell + date-pill + meta +
   badge-tag), the "Add to calendar" dropdown, the record-tools label
   swap, and the decline/undecline invitation pills — out of both
   templates so they live in one place.

   Both containers carry the `ss-page` class alongside their existing
   `v-land` / `pp-page` class. Because `.ss-page` is a single class, every
   rule here keeps the exact specificity its old `.v-land` / `.pp-page`
   form had; and since this file loads in <head> before each page's body
   <style>, a page-specific inline rule (same selector, one class) still
   wins at equal specificity. So these moves are render-preserving.

   Two values that differed between the pages are parameterised rather
   than forced to one look: the session-card action-column width
   (`--ss-action-col`, set per page) and the stat-strip mobile column
   count (left inline per page, since each page has a different tile
   count). Blocks that genuinely diverge — tabs, year-band rows, the
   action-bar/button set, empty states, section headers — stay inline in
   each template, scoped to `.v-land` / `.pp-page`; they differ in markup
   or intent, not just bytes.
   ===================================================================== */

/* Page frame — same max-width + gutters on both surfaces. */
.ss-page { max-width: 920px; margin: 0 auto; padding: 22px 18px 60px; }
@media (max-width: 575.98px) { .ss-page { padding: 10px 6px 28px; } }

/* Greeting heading (the trailing tools-line / greeting-sub are
   page-specific and stay inline). */
.ss-page .greeting { display: flex; gap: 18px; align-items: baseline; flex-wrap: wrap; margin: 0 0 12px; }
.ss-page .greeting h2 { font-size: 22px; font-weight: 600; margin: 0; color: #1f2328; }
.ss-page .greeting h2 b { color: var(--orcs-purple); }

/* Lifetime stat strip — reuses the shared .stat-grid / .stat-tile
   component; just the per-page sizing tweaks here. The mobile column
   count differs by tile count and stays inline per page. */
.ss-page .stat-strip { margin: 0 0 16px; }
.ss-page .stat-strip .stat-tile { padding: 12px 14px; }
.ss-page .stat-strip .stat-tile .value { font-size: 24px; }

/* Session / event card. The action-column width differs per page
   (--ss-action-col); everything else in the shell is shared. */
.ss-page .s-card {
  background: white; border: 1px solid #e1e4e8; border-radius: 10px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.03); padding: 14px 16px;
  display: grid; grid-template-columns: 74px 1fr var(--ss-action-col, 200px); gap: 16px;
  align-items: center; margin-bottom: 10px;
}
@media (max-width: 760px) {
  .ss-page .s-card { grid-template-columns: 60px 1fr; gap: 12px; padding: 12px; }
  .ss-page .s-card .s-action { grid-column: 1 / -1; }
}
.ss-page .s-card .date-pill {
  background: var(--orcs-purple-tint); border-radius: 8px; text-align: center;
  padding: 8px 0; color: var(--orcs-purple);
}
.ss-page .s-card .date-pill .day { font-size: 20px; font-weight: 700; line-height: 1.05; }
.ss-page .s-card .date-pill .month { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }
.ss-page .s-card .date-pill .year { font-size: 10px; opacity: 0.7; }
.ss-page .s-card .s-meta h4 { font-size: 15px; font-weight: 600; margin: 0; color: #1f2328; }
.ss-page .s-card .s-meta .meta-line { font-size: 12.5px; color: #6a737d; margin-top: 4px; display: flex; gap: 12px; flex-wrap: wrap; }
.ss-page .s-card .s-meta .meta-line b { color: #1f2328; font-weight: 600; }
.ss-page .s-card .badge-tag {
  display: inline-block; font-size: 10px; font-weight: 700; padding: 2px 6px;
  border-radius: 4px; text-transform: uppercase; letter-spacing: 0.04em;
  margin-left: 6px; vertical-align: middle;
}
/* Badge row drops below the title on phones (long topic + 2-3 badges
   wrap awkwardly mid-line otherwise). */
@media (max-width: 575.98px) {
  .ss-page .s-card h4 .s-badges { display: block; margin-top: 4px; line-height: 1.7; }
  .ss-page .s-card h4 .s-badges .badge-tag { margin-left: 0; margin-right: 4px; }
}
/* Badge colours common to both surfaces. Page-specific badges
   (junior / instructor / teaching / invited; warn / invite / repeat /
   new) stay inline in their template. */
.ss-page .badge-good    { background: #e6f4ea; color: #1d6b34; }
.ss-page .badge-virtual { background: var(--orcs-purple-tint); color: var(--orcs-purple); }
.ss-page .badge-other   { background: #e7f1ff; color: #1d4e87; }

/* "Add to calendar" dropdown — ghost styling so it doesn't compete
   with the primary action below it. Rendered by templates/_calendarLinks. */
.ss-page .s-card .s-action .btn-add-cal-wrap { display: block; width: 100%; margin-bottom: 6px; }
.ss-page .s-card .s-action .btn-add-cal {
  display: block; width: 100%;
  padding: 4px 10px;
  border-radius: 6px; font-size: 12px; font-weight: 500;
  color: var(--orcs-purple); background: transparent; border: 1px solid var(--orcs-card-line);
  text-align: center; text-decoration: none; cursor: pointer;
}
.ss-page .s-card .s-action .btn-add-cal:hover,
.ss-page .s-card .s-action .btn-add-cal:focus { background: var(--orcs-purple-tint); color: var(--orcs-purple); }
.ss-page .s-card .s-action .btn-add-cal-wrap .dropdown-menu { font-size: 13px; }
.ss-page .s-card .s-action .btn-add-cal-wrap .dropdown-item { padding: 6px 14px; }

/* Record-tools label swap — verbose copy on desktop, one-word pills on
   mobile (.t-full / .t-short spans). */
.ss-page .v-history-tools .t-short { display: none; }
@media (max-width: 575.98px) {
  .ss-page .v-history-tools .t-full  { display: none; }
  .ss-page .v-history-tools .t-short { display: inline; }
}

/* Decline-an-invitation pill + the "declined" disclosure list
   (Phase 9.7 PR-B). Identical on both surfaces. */
.ss-page .btn-decline {
  background: none; border: none; padding: 0; cursor: pointer;
  font-size: 12px; color: #6a737d; text-decoration: underline;
}
.ss-page .btn-decline:hover { color: #8b1717; }
.ss-page .declined-invites { margin-top: 16px; border-top: 1px solid var(--orcs-card-line); padding-top: 12px; }
.ss-page .declined-invites-toggle {
  background: none; border: none; padding: 0; cursor: pointer;
  font-size: 13px; font-weight: 600; color: #6a737d;
  display: flex; align-items: center; gap: 6px;
}
.ss-page .declined-invites-toggle .toggle-chev { font-size: 9px; transition: transform .15s ease; }
.ss-page .declined-invites-toggle:not(.collapsed) .toggle-chev { transform: rotate(90deg); }
.ss-page .declined-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 8px 4px; border-bottom: 1px solid #eef0f3; font-size: 13px;
}
.ss-page .declined-row .declined-topic { font-weight: 600; }
.ss-page .declined-row .declined-when { color: #6a737d; }
.ss-page .declined-row .declined-reverse { margin-left: auto; }
.ss-page .declined-row .declined-closed { margin-left: auto; color: #6a737d; font-style: italic; }
.ss-page .btn-undecline {
  background: none; border: 1px solid var(--orcs-purple); border-radius: 6px;
  padding: 3px 10px; cursor: pointer; font-size: 12px; font-weight: 600;
  color: var(--orcs-purple); transition: background-color .12s ease, color .12s ease;
}
.ss-page .btn-undecline:hover { background: var(--orcs-purple); color: #fff; }

/* ====================================================================
   Responsive /admin/session/{id} — mobile pass
   Scoped to `.session-admin-page` + the ≤575.98px phone breakpoint, so
   the rest of the (desktop-targeted) admin app is untouched. This is the
   deliberate mobile-admin exception: the day-of roster-management page.
   Mockup: mockups/admin-session-mobile.html.
   Slice 1 — page chrome + At-a-glance stat tiles. (Roster rows reflow to
   stacked cards in slice 2.)
   ==================================================================== */
@media (max-width: 575.98px) {
  /* Pull the cards close to the screen edges — the admin default gutter
     (24px) wastes width on a phone. :has() scopes the tighter padding to
     the session page without disturbing the shared .page-main rule. */
  main.page-main:has(> .session-admin-page) { padding: 10px 8px 48px; }

  /* Tighten the card chrome so content gets that width back. */
  .session-admin-page .section-card > .section-head { padding: 12px 14px; }
  .session-admin-page .section-card > .section-body { padding: 12px 14px; }

  /* At-a-glance: lock to a 2-up grid with denser, left-aligned tiles
     instead of the desktop auto-fit (which crams 4 across at this width,
     clipping the labels). */
  .session-admin-page .stat-grid {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 10px;
  }
  .session-admin-page .stat-tile { padding: 8px 10px; text-align: left; }
  .session-admin-page .stat-tile .value { font-size: 19px; }
  .session-admin-page .stat-tile .label { font-size: 10.5px; }
}

/* --------------------------------------------------------------------
   Slice 2 — roster tables reflow to stacked cards (the core).
   The two rosters (.session-roster-table, also DataTables `dt-admin`)
   are too wide for a phone; below the breakpoint each <tr> becomes a
   card and each labelled <td> a row inside it. This is CSS-only over the
   existing table markup, so the delegated inline-edit / bulk handlers in
   session-page.js keep working untouched (they key on .status-pill /
   .bulk-row-check / <tr>, never on layout). Tier-3 columns (parent /
   volunteer email) are hidden outright — Option A; a laptop is around
   for the rare lookup. Mockup: mockups/admin-session-mobile.html.
   -------------------------------------------------------------------- */
@media (max-width: 575.98px) {
  /* DataTables wrapper: drop the desktop side padding (the table is block
     now, so the horizontal-scroll affordance is moot) and let the cards
     reach the section-body edge. */
  .session-admin-page .section-card .dt-container { padding: 0; }

  /* Collapse the table scaffolding to blocks. width:auto !important
     defeats any inline width DataTables stamps on the table / cells. */
  .session-admin-page .session-roster-table,
  .session-admin-page .session-roster-table tbody,
  .session-admin-page .session-roster-table tr,
  .session-admin-page .session-roster-table td { display: block; width: auto !important; }
  .session-admin-page .session-roster-table { border: 0 !important; }

  /* Header row -> a compact "Select all" affordance (keeps the
     .bulk-select-all checkbox the JS drives; hides the sort labels). */
  .session-admin-page .session-roster-table thead,
  .session-admin-page .session-roster-table thead tr { display: block; }
  .session-admin-page .session-roster-table thead th { display: none; }
  .session-admin-page .session-roster-table thead th.col-check {
    display: flex; align-items: center; gap: 8px;
    width: auto !important; min-width: 0 !important; max-width: none !important;
    padding: 4px 4px 10px; border: 0 !important; box-shadow: none !important;
  }
  .session-admin-page .session-roster-table thead th.col-check::after {
    content: "Select all"; font-size: 12.5px; font-weight: 600; color: #54595f;
  }
  .session-admin-page .session-roster-table thead th.col-check input { width: 20px; height: 20px; }

  /* Each body row -> a card. Right gutter leaves room for the corner
     checkbox. box-shadow:none kills the DataTables 2 inset-shadow stripes. */
  .session-admin-page .session-roster-table tbody tr {
    position: relative;
    background: #fff !important;
    border: 1px solid var(--orcs-card-line);
    border-radius: 12px;
    padding: 11px 44px 9px 12px;
    margin: 0 0 9px;
    box-shadow: none !important;
  }

  /* Each cell -> a "LABEL  value" row; zero the table-bordered lines +
     stripe shadow and the right-aligned/centered desktop alignment. */
  .session-admin-page .session-roster-table tbody td {
    display: flex; align-items: center; gap: 10px;
    border: 0 !important; box-shadow: none !important;
    padding: 5px 0; text-align: left !important;
  }
  .session-admin-page .session-roster-table tbody td[data-label]::before {
    content: attr(data-label);
    flex: 0 0 78px;
    font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em;
    font-weight: 700; color: var(--muted);
  }

  /* Tier-3 hidden (Option A). */
  .session-admin-page .session-roster-table td.col-email { display: none; }

  /* Checkbox -> top-right corner of the card. */
  .session-admin-page .session-roster-table tbody td.col-check {
    position: absolute; top: 10px; right: 10px; padding: 0;
  }
  .session-admin-page .session-roster-table tbody td.col-check input { width: 22px; height: 22px; }

  /* Name -> card headline (block, no label). */
  .session-admin-page .session-roster-table tbody td.col-name {
    display: block; font-size: 15px; font-weight: 700; line-height: 1.25; padding: 0 0 3px;
  }

  /* Status -> release the fixed 170px width; bigger pill + tappable select. */
  .session-admin-page .session-roster-table td.col-status {
    width: auto !important; min-width: 0 !important; max-width: none !important;
  }
  .session-admin-page .session-roster-table td.col-status .status-pill { padding: 6px 14px; font-size: 14px; }
  .session-admin-page .session-roster-table td.col-status .form-select { width: 100%; max-width: 240px; }

  /* Inputs (notes / phone): always-bordered, comfortable tap height. */
  .session-admin-page .session-roster-table td .notes-input,
  .session-admin-page .session-roster-table td .sessionphone-input {
    flex: 1; min-width: 0; min-height: 38px;
    border: 1px solid var(--orcs-card-line); background: #fff;
  }

  /* Materials-fee control. */
  .session-admin-page .session-roster-table td.col-pay .pay-mark { display: flex; flex: 1; gap: 6px; align-items: center; }
  .session-admin-page .session-roster-table td.col-pay .pay-mark select { flex: 1; min-height: 36px; }
  .session-admin-page .session-roster-table td.col-pay .pay-mark button { min-height: 36px; }

  /* Roster section header: stack title above its action bar so the two
     don't fight for one narrow row (the action-bar internals get their
     own pass in slice 3). */
  .session-admin-page .section-head.d-flex { flex-direction: column; align-items: stretch; gap: 10px; }
  .session-admin-page .session-head-actions { justify-content: flex-start; }
}

/* --------------------------------------------------------------------
   Slice 3 — roster action-bar reflow.
   .session-head-actions packs the bulk-status controls + the email /
   print / message pills into one desktop row. On a phone slice 2 already
   stacks the roster .section-head (title above actions); here the bulk
   bar takes its own full-width line (bulk status-set is a key phone task)
   and the action pills wrap into a tidy row beneath it.
   -------------------------------------------------------------------- */
@media (max-width: 575.98px) {
  .session-admin-page .session-head-actions { gap: 8px; row-gap: 8px; }

  /* Bulk bar -> full-width grouped control with a hairline frame so it
     reads as its own block; its select grows to fill the row. */
  .session-admin-page .session-head-actions .bulk-bar {
    flex: 1 0 100%;
    flex-wrap: wrap; row-gap: 6px;
    padding: 8px 10px;
    border: 1px solid var(--orcs-card-line); border-radius: 10px;
  }
  .session-admin-page .session-head-actions .bulk-bar .bulk-status-select {
    flex: 1 1 140px; width: auto !important;
  }

  /* Email / print / message pills: comfortable tap height; wrap freely. */
  .session-admin-page .session-head-actions .btn { min-height: 36px; }
}

/* --------------------------------------------------------------------
   Slice 4 — Insights tables containment.
   The (collapsed-by-default) Insights panel holds wide 5-7-col review
   tables. They're a read surface, not management, so rather than card
   them we let the panel scroll horizontally instead of bursting the page
   width. overflow-y is pinned hidden per the CLAUDE.md overflow gotcha
   (overflow-x:auto implicitly turns overflow-y to auto, surfacing a stub
   vertical scrollbar). The Invitees panel already collapses .inv-cols to
   one column <=820px; its picker MODALS are dense desktop multi-selects
   and are left desktop-first for now (deferred — see the plan).
   -------------------------------------------------------------------- */
@media (max-width: 575.98px) {
  .session-admin-page #session-insights { overflow-x: auto; overflow-y: hidden; }
}

/* --------------------------------------------------------------------
   Public navbar — auth-aware shell (Phase 12 workstream A).
   The signed-in account chip reuses the shared .np-acct component (see
   the admin / profile navbars); only the anonymous Sign-in pill needs
   its own rule. It carries the Bootstrap .btn class so it stays out of
   the global body-link purple override (the a:not(.btn)... chain).
   -------------------------------------------------------------------- */
/* Nav links: dim by default, brighter on hover, and the current page
   gets a brand-purple underline + full-white text (matches the mockup). */
.navbar-public .navbar-nav .nav-link {
  color: rgba(255, 255, 255, .72);
  border-bottom: 2px solid transparent;
  transition: color .12s ease;
}
.navbar-public .navbar-nav .nav-link:hover,
.navbar-public .navbar-nav .nav-link:focus { color: #fff; }
.navbar-public .navbar-nav .nav-link.active {
  color: #fff;
  border-bottom-color: var(--orcs-purple);
}

.navbar-public .btn-signin {
  background: var(--orcs-purple); color: #fff;
  border: 0; border-radius: 999px;
  padding: 6px 16px; font-size: 13px; font-weight: 600;
}
.navbar-public .btn-signin:hover,
.navbar-public .btn-signin:focus,
.navbar-public .btn-signin[aria-expanded="true"] { background: var(--orcs-purple-hover); color: #fff; }
/* Anonymous auth dropdown — the Sign-in button toggles a .np-menu with the
   sign-in + self-serve entry points. */
.navbar-public .navbar-public-signin .signin-caret { font-size: 10px; opacity: .85; margin-left: 2px; }
/* Mobile hamburger: the auth choices appended as plain menu items (the
   desktop dropdowns render off-screen inside the collapse, so they're
   desktop-only and these replace them below lg). */
.navbar-public .nav-auth-sep {
  border-top: 1px solid rgba(255,255,255,0.12); margin-top: 6px; padding-top: 4px;
}
.navbar-public .nav-auth-label {
  display: block; color: #b79bc8; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em; padding: 6px 0 0;
}
.navbar-public .nav-link.nav-auth-logout { color: #f0b8b8; }
.navbar-public .nav-link.portal-item.current { color: #fff; font-weight: 700; }

/* Collapsed (<lg): the auth control drops below the links — give it a
   little breathing room so the chip / pill isn't flush against them. */
@media (max-width: 991.98px) {
  .navbar-public .navbar-public-auth { margin-top: 8px; }
}

/* ====================================================================
   Public marketing pages (Phase 12 workstream B) — home + about shells.
   Shared so / and /about read as one site. Anchors that act as buttons
   carry Bootstrap's .btn so they stay clear of the global body-link
   purple override (the a:not(.btn)... chain). These pages override the
   layout's {% block main %} to go full-bleed (no .page-main gutter).
   ==================================================================== */
.mkt { color: #1f2328; }
.mkt-hero {
  background: linear-gradient(135deg, #f8f0fd 0%, var(--orcs-page-bg) 70%);
  padding: 56px 28px 48px; text-align: center;
  border-bottom: 1px solid var(--orcs-card-line);
}
.mkt-hero h1 { font-size: 32px; font-weight: 700; color: var(--orcs-purple-deep); margin: 0 0 12px; letter-spacing: -0.02em; }
.mkt-hero .lead { font-size: 17px; color: #2a2f36; line-height: 1.5; max-width: 640px; margin: 0 auto 22px; }
.mkt-cta-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.mkt-btn { background: var(--orcs-purple); color: #fff; border: 0; border-radius: 8px; padding: 11px 22px; font-size: 15px; font-weight: 600; }
.mkt-btn:hover, .mkt-btn:focus { background: var(--orcs-purple-hover); color: #fff; }
.mkt-btn-ghost { background: #fff; color: var(--orcs-purple); border: 1px solid var(--orcs-purple); }
.mkt-btn-ghost:hover, .mkt-btn-ghost:focus { background: var(--orcs-purple-tint); color: var(--orcs-purple-deep); }

.mkt-section { padding: 40px 28px; }
/* 920px matches the class list / detail (.cl-page/.cd-page) and the home
   sign-up cards (.mkt-cards) so CMS-rendered prose lines up with the rest
   of the public site instead of sitting in a narrower column. */
.mkt-section-inner { max-width: 920px; margin: 0 auto; }
.mkt-section h2 { font-size: 22px; font-weight: 700; color: var(--orcs-purple-deep); margin: 0 0 14px; }
.mkt-section p { font-size: 16px; line-height: 1.6; color: #2a2f36; }
.mkt-section p a, .mkt-about p a, .mkt-list a { color: var(--orcs-purple); font-weight: 600; }
.mkt-list { font-size: 16px; line-height: 1.7; color: #2a2f36; padding-left: 20px; margin: 0; }
.mkt-list li { margin-bottom: 4px; }

.mkt-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 920px; margin: 0 auto; }
.mkt-card { background: #fff; border: 1px solid var(--orcs-card-line); border-radius: 10px; padding: 26px; box-shadow: 0 1px 3px rgba(0,0,0,.04); display: flex; flex-direction: column; transition: transform .1s, box-shadow .1s; }
.mkt-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,.08); }
.mkt-card .ic { font-size: 38px; line-height: 1; margin-bottom: 12px; }
.mkt-card h3 { font-size: 19px; font-weight: 600; color: var(--orcs-purple-deep); margin: 0 0 8px; }
.mkt-card p { font-size: 14px; color: #4a5159; line-height: 1.5; margin: 0 0 18px; flex: 1; }

.mkt-about { background: #fff; border-top: 1px solid var(--orcs-card-line); }
.mkt-signin-line { text-align: center; padding: 4px 28px 36px; color: var(--muted); font-size: 13.5px; }
.mkt-signin-line a { color: var(--orcs-purple); font-weight: 600; }

.mkt-footer { background: var(--orcs-purple-deep); color: #fff; padding: 24px 28px; font-size: 13px; text-align: center; }
.mkt-footer a { color: #fff; text-decoration: underline; }
.mkt-footer .row2 { opacity: .65; font-size: 12px; margin-top: 4px; }

@media (max-width: 760px) { .mkt-cards { grid-template-columns: 1fr; gap: 14px; } }
@media (max-width: 575.98px) {
  .mkt-hero { padding: 36px 18px 30px; }
  .mkt-hero h1 { font-size: 23px; }
  .mkt-hero .lead { font-size: 14.5px; }
  .mkt-section { padding: 28px 18px; }
  .mkt-section h2 { font-size: 19px; }
  .mkt-card { padding: 20px; }
  .mkt-footer { padding: 18px 14px; font-size: 12px; }
}

/* Deep-link highlight — a public class CTA (?session=N) lands the
   self-service landing on the Open tab and ring-highlights the card
   (Phase 12 E). Shared across /volunteer + /parent-portal via .ss-page. */
.ss-page .s-card.deep-target { outline: 3px solid var(--orcs-purple); outline-offset: 2px; }

/* Public impact band (Phase 12 F) — curated org-wide aggregates on /about. */
/* The impact strip is a compact band, not a full section — tighten its
   vertical padding so it doesn't stack a full 40px on top of the following
   section's 40px (which left a cavernous gap under the numbers). */
.mkt-section.mkt-band { padding-top: 28px; padding-bottom: 6px; }
.mkt-impact { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; max-width: 920px; margin: 0 auto; }
.mkt-impact .tile { background: #fff; border: 1px solid var(--orcs-card-line); border-radius: 12px; padding: 16px 14px; text-align: center; }
.mkt-impact .v { font-size: 26px; font-weight: 800; color: var(--orcs-purple); line-height: 1; }
.mkt-impact .l { font-size: 12.5px; color: #41464c; margin-top: 6px; }
@media (max-width: 600px) { .mkt-impact { grid-template-columns: 1fr 1fr; } }

/* CMS page body (Phase 12 G) — rich prose served at /p/{slug}. */
.cms-page .cms-title { font-size: 28px; color: var(--orcs-purple-deep); margin: 0 0 16px; letter-spacing: -.01em; }
.cms-body { font-size: 16px; line-height: 1.65; color: #2a3138; }
.cms-body h2 { font-size: 21px; color: var(--orcs-purple-deep); margin: 26px 0 10px; }
.cms-body h3 { font-size: 17px; color: var(--orcs-purple-deep); margin: 22px 0 8px; }
.cms-body h4 { font-size: 16px; color: var(--orcs-purple-deep); margin: 18px 0 6px; }
.cms-body p { margin: 0 0 14px; }
.cms-body ul, .cms-body ol { margin: 0 0 14px; padding-left: 22px; }
.cms-body li { margin: 4px 0; }
.cms-body a { color: var(--orcs-purple); font-weight: 600; }
.cms-body img { max-width: 100%; height: auto; border-radius: 8px; margin: 8px 0; }
.cms-body blockquote { margin: 14px 0; padding: 8px 16px; border-left: 3px solid var(--orcs-purple-soft);
  color: #4a5159; background: var(--orcs-purple-tint); border-radius: 0 6px 6px 0; }

/* CMS page layout primitives (Phase 12 G enhancements). Image float +
   alignment classes (HtmlSanitizer img class whitelist) and the shortcode-
   generated row/column, panel, and video-embed wrappers (PageShortcodes). */
.cms-body img.img-left  { float: left;  max-width: 45%; margin: 2px 26px 14px 0; }
.cms-body img.img-right { float: right; max-width: 45%; margin: 2px 0 14px 26px; }
.cms-body img.img-full  { display: block; width: 100%; max-width: 100%; margin: 14px 0; }
/* Size caps (small/medium/large) — orthogonal to alignment, so an image can
   be e.g. "img-left img-small". Listed after the alignment rules so they win
   the max-width for floats too; min(…,100%) keeps them inside the column on
   narrow screens. (img-full stays full-bleed — a size is ignored there.) */
.cms-body img.img-small  { max-width: min(200px, 100%); }
.cms-body img.img-medium { max-width: min(380px, 100%); }
.cms-body img.img-large  { max-width: min(620px, 100%); }
.cms-body img.img-full.img-small,
.cms-body img.img-full.img-medium,
.cms-body img.img-full.img-large { max-width: 100%; }
.cms-body .cms-row { display: flex; flex-wrap: wrap; gap: 24px; margin: 18px 0; clear: both; }
.cms-body .cms-col { flex: 1 1 240px; min-width: 0; }
.cms-body .cms-col > :first-child { margin-top: 0; }
.cms-body .cms-col > :last-child  { margin-bottom: 0; }
.cms-body .cms-panel { background: var(--orcs-purple-tint); border: 1px solid var(--orcs-purple-soft);
  border-radius: 12px; padding: 14px 18px; margin: 18px 0; clear: both; }
.cms-body .cms-panel.cms-panel-purple { background: var(--orcs-purple); border-color: var(--orcs-purple-hover); color: #fff; }
/* Force white text on the solid-purple panel. The panel sets color:#fff, but
   the marketing-page (.mkt-section p / h2) and .cms-body (h2/h3/h4, a) rules
   target these descendants directly, so they out-rank the panel's *inherited*
   white and leave dark-on-purple text + purple-on-purple links. Re-assert white
   at panel scope (3 classes beats those single-class rules). Links additionally
   have to beat the global body-link chain (a:not(...)*N, specificity far above
   a normal selector), so they need !important — author-written markdown anchors
   carry no class to add to that chain. Buttons/social icons keep their own look. */
.cms-body .cms-panel.cms-panel-purple,
.cms-body .cms-panel.cms-panel-purple p,
.cms-body .cms-panel.cms-panel-purple li,
.cms-body .cms-panel.cms-panel-purple h1,
.cms-body .cms-panel.cms-panel-purple h2,
.cms-body .cms-panel.cms-panel-purple h3,
.cms-body .cms-panel.cms-panel-purple h4,
.cms-body .cms-panel.cms-panel-purple strong,
.cms-body .cms-panel.cms-panel-purple b,
.cms-body .cms-panel.cms-panel-purple em,
.cms-body .cms-panel.cms-panel-purple i { color: #fff; }
.cms-body .cms-panel.cms-panel-purple a:not(.cms-btn):not(.cms-social-link),
.cms-body .cms-panel.cms-panel-purple p a:not(.cms-btn):not(.cms-social-link) { color: #fff !important; text-decoration: underline; }
.cms-body .cms-panel.cms-panel-purple a:not(.cms-btn):not(.cms-social-link):hover,
.cms-body .cms-panel.cms-panel-purple p a:not(.cms-btn):not(.cms-social-link):hover { color: #fff !important; opacity: .85; }
/* White panel — a plain card on the (usually tinted) page, for callouts that
   shouldn't carry the default purple tint. Dark text is already readable, so
   no per-element overrides are needed. */
.cms-body .cms-panel.cms-panel-white { background: #fff; border-color: var(--orcs-card-line); }
/* Alert panel — light-yellow attention box (amber accent bar on the left). */
.cms-body .cms-panel.cms-panel-alert { background: #fff8e1; border-color: #ffe082; border-left: 4px solid #f5a623; }
.cms-body .cms-panel > :first-child { margin-top: 0; }
.cms-body .cms-panel > :last-child  { margin-bottom: 0; }
.cms-body .cms-embed { position: relative; max-width: 720px; margin: 18px auto; aspect-ratio: 16 / 9; clear: both; }
.cms-body .cms-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 10px; }
/* [button:URL]Label[/button] — brand call-to-action. Excluded from the global
   body-link purple rule (see the a:not(...) chain) so it keeps white-on-purple.
   The block wrapper carries the alignment (align=left|center|right) + margin;
   width=full makes the button span the container. */
.cms-body .cms-btn-wrap { margin: 12px 0; }
.cms-body .cms-btn-wrap.cms-btn-align-center { text-align: center; }
.cms-body .cms-btn-wrap.cms-btn-align-right  { text-align: right; }
.cms-body .cms-btn { display: inline-block; background: var(--orcs-purple); color: #fff;
  text-decoration: none; font-weight: 700; padding: 10px 20px; border-radius: 8px;
  line-height: 1.3; }
.cms-body .cms-btn:hover { background: var(--orcs-purple-hover); color: #fff; }
.cms-body .cms-btn.cms-btn-full { display: block; width: 100%; text-align: center; box-sizing: border-box; }
/* Social-icon row — the [social] shortcode. Brand-purple circular icon
   buttons from SocialLinks; the inline SVG fills with currentColor. */
.cms-body .cms-social { display: flex; flex-wrap: wrap; gap: 12px; margin: 16px 0; clear: both; }
.cms-body .cms-social.cms-social-align-center { justify-content: center; }
.cms-body .cms-social.cms-social-align-right  { justify-content: flex-end; }
.cms-body .cms-social-link { display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%; background: var(--orcs-purple); color: #fff;
  text-decoration: none; transition: background-color .15s ease, transform .15s ease; }
.cms-body .cms-social-link:hover { background: var(--orcs-purple-hover); color: #fff; transform: translateY(-2px); }
.cms-body .cms-social-ico { width: 20px; height: 20px; fill: currentColor; display: block; }
/* Explicit float break — the [clear] shortcode. Block widgets (rows, panels,
   embeds) clear floats by default above so they never overlap a floated
   image; [clear] is the manual escape for plain paragraphs/headings. */
.cms-body .cms-clear { clear: both; }
/* Clear floats so a floated image can't bleed past the body or a row. */
.cms-body::after, .cms-body .cms-row::after { content: ""; display: block; clear: both; }
@media (max-width: 575.98px) {
  .cms-body img.img-left, .cms-body img.img-right { float: none; margin: 10px 0; }
  /* Un-floated on mobile: unsized floats fill the column; sized ones keep
     their small/medium/large cap (from min(…,100%) above). */
  .cms-body img.img-left:not(.img-small):not(.img-medium):not(.img-large),
  .cms-body img.img-right:not(.img-small):not(.img-medium):not(.img-large) { max-width: 100%; }
}

/* ---- Admin help: per-page "?" popover + the /admin/help center ---- */
.help-pop-wrap { position: relative; display: inline-block; vertical-align: middle; }
.help-btn { width: 21px; height: 21px; padding: 0; border-radius: 50%; border: 1px solid var(--orcs-purple-soft);
  background: #fff; color: var(--orcs-purple); font-weight: 700; font-size: 12px; line-height: 1; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; margin-left: 6px;
  position: relative; top: -1px; }
.help-btn:hover { background: var(--orcs-purple-tint); }
.help-pop { position: absolute; top: 30px; left: -8px; width: 320px; background: #fff; border: 1px solid var(--orcs-card-line);
  border-radius: 12px; box-shadow: 0 14px 36px rgba(42,13,51,.20); z-index: 1050; display: none;
  font-size: 13px; font-weight: 400; line-height: 1.5; text-align: left; color: #33383d; white-space: normal; }
.help-pop-wrap.open .help-pop { display: block; }
.help-pop-tip { position: absolute; top: -6px; left: 14px; width: 11px; height: 11px; background: var(--orcs-purple); transform: rotate(45deg); }
.help-pop-h { display: block; background: var(--orcs-purple); color: #fff; font-weight: 700; font-size: 13px; padding: 9px 13px; border-radius: 12px 12px 0 0; }
.help-pop-b { display: block; padding: 11px 13px; }
.help-pop-b code { font-size: 12px; }
.help-pop-f { display: block; border-top: 1px solid var(--orcs-card-line); padding: 9px 13px; }
.help-pop-f a { color: var(--orcs-purple); font-weight: 700; text-decoration: none; }
.help-pop-f a:hover { text-decoration: underline; }
/* Phone: the popover (320px) is used on the mobile-targeted volunteer / parent
   portals — clamp its width so it can't run off a narrow viewport. */
@media (max-width: 575.98px) {
  .help-pop { width: min(320px, calc(100vw - 24px)); left: -12px; }
}

.help-center { max-width: 1040px; margin: 0 auto; }
.help-center .hc-top h1 { font-size: 24px; color: var(--orcs-purple-deep); margin: 0 0 4px; }
.help-center .hc-top .meta { color: var(--muted); font-size: 13.5px; margin: 0 0 18px; }
.help-center .help-btn-demo { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px;
  border-radius: 50%; border: 1px solid var(--orcs-purple-soft); color: var(--orcs-purple); font-weight: 700; font-size: 11px; }
.help-center .hc-grid { display: grid; grid-template-columns: 212px 1fr; gap: 26px; align-items: start; }
.help-center .hc-nav { position: sticky; top: 14px; border: 1px solid var(--orcs-card-line); border-radius: 12px; background: #fff; padding: 10px; }
.help-center .hc-nav .grp { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: 9px 8px 4px; }
.help-center .hc-nav a { display: block; padding: 5px 9px; border-radius: 7px; color: #2c3137; text-decoration: none; font-size: 13px; }
.help-center .hc-nav a:hover { background: var(--orcs-purple-tint); color: var(--orcs-purple-deep); }
.help-center .hc-main { min-width: 0; }
.help-center .topic { border: 1px solid var(--orcs-card-line); border-radius: 12px; background: #fff; padding: 16px 20px; margin: 0 0 16px; scroll-margin-top: 14px; }
.help-center .topic h2 { font-size: 17px; color: var(--orcs-purple-deep); margin: 0 0 2px; }
.help-center .topic .where { font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 10px; }
.help-center .topic .blurb { font-weight: 600; margin: 0 0 9px; }
.help-center .topic p { margin: 0 0 9px; }
.help-center .topic ul { margin: 0 0 9px; padding-left: 20px; }
.help-center .topic li { margin: 4px 0; }
.help-center .topic .hc-tip { background: var(--orcs-purple-tint); border: 1px solid var(--orcs-purple-soft);
  border-radius: 9px; padding: 9px 12px; font-size: 13px; margin: 9px 0 0; }
@media (max-width: 720px) {
  .help-center .hc-grid { grid-template-columns: 1fr; }
  .help-center .hc-nav { position: static; }
}

/* Shared page hero banner (Phase 12) — cover-fit header image + overlaid
   title, used by CMS pages (and the About page). */
.page-hero { background: var(--orcs-purple-tint) center/cover no-repeat; min-height: 240px; display: flex; align-items: flex-end; }
.page-hero-overlay { width: 100%; background: linear-gradient(180deg, rgba(42,13,51,0) 0%, rgba(42,13,51,.75) 100%); padding: 42px 28px 22px; }
/* 920px + 28px padding matches .mkt-section-inner / .mkt-section below, so
   the overlaid title's left edge lines up with the body content instead of
   sitting indented inside a narrower box. */
.page-hero-title { max-width: 920px; margin: 0 auto; color: #fff; font-size: 30px; font-weight: 700; letter-spacing: -.01em; text-shadow: 0 1px 3px rgba(0,0,0,.4); }
@media (max-width: 575.98px) { .page-hero { min-height: 168px; } .page-hero-overlay { padding: 28px 18px 16px; } .page-hero-title { font-size: 22px; } }

/* ---- View-only admin (role AdminReadOnly) — dim + disable write controls
   inside admin page content. Cosmetic only: App\Middleware\EnforceReadOnlyAdmin
   is the real guard; this just removes the temptation to click something that
   would bounce. Scoped to .page-main so the navbar + "Report a bug" pill stay
   live; GET search/filter forms and DataTables export buttons are untouched
   (only POST forms + the inline-edit widgets are hit). Mark anything that must
   stay usable — the instructor check-in card — with .ro-keep. ---- */
.page-main.admin-read-only form[method="post" i]:not(.ro-keep) button,
.page-main.admin-read-only form[method="post" i]:not(.ro-keep) input[type="submit"],
.page-main.admin-read-only [data-edit-url],
.page-main.admin-read-only .status-pill.editable,
.page-main.admin-read-only .day-cell,
.page-main.admin-read-only .bulk-bar {
  pointer-events: none !important;
  opacity: 0.5 !important;
  cursor: default !important;
  box-shadow: none !important;
}
.page-main.admin-read-only .notes-input,
.page-main.admin-read-only .sessionphone-input {
  pointer-events: none !important;
  background: transparent !important;
  opacity: 0.6 !important;
}

/* ---- Class-materials Track (audience) badge + filter (Phase 12 C) ---- */
.mat-track-badge { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .03em;
  text-transform: uppercase; padding: 1px 6px; border-radius: 999px; margin-left: 6px; vertical-align: middle; }
.mat-track-badge.mat-track-junior  { background: #fce4d2; color: #a85a1a; }
.mat-track-badge.mat-track-regular { background: #e7f1ff; color: #1d4e87; }
.mat-trackfilter { display: flex; align-items: center; gap: 6px; margin: 0 0 12px; flex-wrap: wrap; }
.mat-tf-label { font-size: 12px; color: var(--muted, #6a737d); }
.mat-tf-pill { border: 1px solid var(--orcs-card-line, #e1e4e8); background: #fff; color: #41464c;
  border-radius: 999px; padding: 3px 12px; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.mat-tf-pill:hover { border-color: var(--orcs-purple, #7e2a9b); color: var(--orcs-purple, #7e2a9b); }
.mat-tf-pill.is-on { background: var(--orcs-purple, #7e2a9b); border-color: var(--orcs-purple, #7e2a9b); color: #fff; }
/* A track with no materials for this class: greyed + non-interactive
   (JS sets the `disabled` attribute; label stays the same). */
.mat-tf-pill:disabled { opacity: .45; cursor: default; }
.mat-tf-pill:disabled:hover { border-color: var(--orcs-card-line, #e1e4e8); color: #41464c; }
.mat-hidden { display: none !important; }

/* Track filter pills — shared by /classes and /links (was inline in
   classes.html.twig). .cl-track-pill is in the body-link :not() allow-list
   above, so the global link rule steps aside and these colours apply. */
.cl-track-pill {
  display: inline-block; padding: 6px 14px; border-radius: 999px;
  background: #fff; border: 1px solid var(--orcs-card-line);
  color: #4a5159; font-size: 13px; font-weight: 600; text-decoration: none;
  transition: background-color .12s, color .12s, border-color .12s;
}
.cl-track-pill:hover { background: var(--orcs-purple-tint); color: var(--orcs-purple-deep); border-color: var(--orcs-purple-soft); }
.cl-track-pill.is-active { background: var(--orcs-purple); color: #fff; border-color: var(--orcs-purple); }
.cl-track-pill.is-active:hover { background: var(--orcs-purple-hover); color: #fff; }