/* ==========================================================================
   modern.css — campsite modern layer (2026)
   Ported from the sibling Beltchecker app's modern layer.

   Everything is scoped under `body.modern-ui`, which is only present when
   $GLOBALS['modernUiKill'] is unset. Flip the kill flag in
   secrets_campsite.php to revert instantly (no redeploy, no git).

   Rules here restyle shared UI only: surfaces, typography, buttons, inputs,
   lists, tables, alerts, menus. No markup changes, no layout changes.
   The persistent bars (#app-topbar / #footer-bar) belong to nav-polish.css —
   this file deliberately leaves their backgrounds alone.
   ========================================================================== */

body.modern-ui {
  --cs-bg: #f4f4f6;
  --cs-surface: #ffffff;
  --cs-surface-2: #f6f6f8;
  --cs-surface-3: #eeeef2;
  --cs-ink: #0b0b10;
  --cs-ink-2: #3a3a44;
  --cs-muted: #6b6b76;
  --cs-faint: #9a9aa5;
  --cs-line: rgba(15, 15, 25, 0.07);
  --cs-line-strong: rgba(15, 15, 25, 0.12);

  --cs-accent: #2f6fed;
  --cs-accent-soft: rgba(47, 111, 237, 0.16);
  --cs-green: #16a34a;
  --cs-green-2: #22c55e;
  --cs-blue: #2563eb;
  --cs-amber: #f59e0b;
  --cs-red: #e11d48;
  --cs-highlight: #da4453;

  --cs-r-sm: 10px;
  --cs-r: 14px;
  --cs-r-lg: 20px;

  --cs-shadow-1: 0 1px 2px rgba(16, 16, 30, 0.04), 0 1px 1px rgba(16, 16, 30, 0.03);
  --cs-shadow-2: 0 1px 2px rgba(16, 16, 30, 0.04), 0 8px 24px -6px rgba(16, 16, 30, 0.08);
  --cs-shadow-3: 0 2px 4px rgba(16, 16, 30, 0.04), 0 18px 48px -12px rgba(16, 16, 30, 0.18);
  --cs-ring: 0 0 0 4px var(--cs-accent-soft);

  --cs-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --cs-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --cs-font: "Geist", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

body.theme-dark.modern-ui {
  --cs-bg: #121317;
  --cs-surface: #1c1f24;
  --cs-surface-2: #23262c;
  --cs-surface-3: #2b2f36;
  --cs-ink: #f4f5f7;
  --cs-ink-2: #d5d7dd;
  --cs-muted: #9ba0aa;
  --cs-faint: #767b85;
  --cs-line: rgba(255, 255, 255, 0.08);
  --cs-line-strong: rgba(255, 255, 255, 0.14);
  --cs-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --cs-shadow-2: 0 1px 2px rgba(0, 0, 0, 0.35), 0 8px 24px -6px rgba(0, 0, 0, 0.5);
  --cs-shadow-3: 0 2px 4px rgba(0, 0, 0, 0.35), 0 18px 48px -12px rgba(0, 0, 0, 0.65);
}

/* ---------- Base & typography ---------- */

body.modern-ui {
  font-family: var(--cs-font) !important;
  color: var(--cs-ink-2);
  letter-spacing: -0.006em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body.theme-light.modern-ui {
  background-color: var(--cs-bg);
  background-image:
    radial-gradient(1200px 600px at 10% -10%, rgba(47, 111, 237, 0.055), transparent 60%),
    radial-gradient(900px 500px at 100% 0%, rgba(218, 68, 83, 0.045), transparent 60%);
  background-attachment: fixed;
}

body.modern-ui h1,
body.modern-ui h2,
body.modern-ui h3,
body.modern-ui h4,
body.modern-ui h5,
body.modern-ui h6,
body.modern-ui .btn,
body.modern-ui input,
body.modern-ui select,
body.modern-ui textarea,
body.modern-ui #footer-bar a span {
  font-family: var(--cs-font) !important;
}

body.modern-ui h1,
body.modern-ui h2,
body.modern-ui h3,
body.modern-ui h4,
body.modern-ui h5 {
  color: var(--cs-ink);
  letter-spacing: -0.025em;
  font-weight: 650;
}
body.modern-ui .card-style h1 { font-size: 21px; line-height: 1.25; }

body.modern-ui p { color: var(--cs-muted); }
body.modern-ui a { transition: color 0.2s var(--cs-ease), opacity 0.2s var(--cs-ease); }
body.modern-ui ::selection { background: var(--cs-accent-soft); color: var(--cs-ink); }
body.modern-ui .text-uppercase { letter-spacing: 0.04em; }

/* ---------- Surfaces / cards ---------- */

body.modern-ui .card-style,
body.modern-ui .content-box {
  border-radius: var(--cs-r-lg) !important;
  background-color: var(--cs-surface);
  box-shadow: var(--cs-shadow-2), 0 0 0 1px var(--cs-line) !important;
  transition: box-shadow 0.4s var(--cs-ease), transform 0.4s var(--cs-ease);
}
body.modern-ui .card-style .card-overlay { border-radius: var(--cs-r-lg) !important; }

body.modern-ui .card-style .bg-theme,
body.modern-ui .card-style .bg-light,
body.modern-ui .card-style .w3-light-grey,
body.modern-ui .card-style .bg-theme-light {
  background-color: var(--cs-surface-2) !important;
}

body.modern-ui .rounded-sm { border-radius: var(--cs-r-sm) !important; }
body.modern-ui .rounded-s { border-radius: var(--cs-r-sm) !important; }
body.modern-ui .rounded-m,
body.modern-ui .rounded-2 { border-radius: var(--cs-r) !important; }

/* Shadow classes from the template are heavy and grey; soften them */
body.modern-ui .shadow-l,
body.modern-ui .shadow-xl,
body.modern-ui .shadow-bg { box-shadow: var(--cs-shadow-2) !important; }

/* ---------- Buttons ---------- */

body.modern-ui .btn {
  font-family: var(--cs-font) !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em;
  border-radius: 12px !important;
  position: relative;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform 0.18s var(--cs-ease),
    box-shadow 0.3s var(--cs-ease),
    background-color 0.3s var(--cs-ease),
    color 0.3s var(--cs-ease),
    border-color 0.3s var(--cs-ease),
    filter 0.3s var(--cs-ease) !important;
}
body.modern-ui .btn:hover { opacity: 1 !important; }
body.modern-ui .btn:active { transform: scale(0.97); }
body.modern-ui .btn:focus-visible { box-shadow: var(--cs-ring) !important; outline: none; }
body.modern-ui .btn.text-uppercase { letter-spacing: 0.06em; font-size: 12.5px !important; }
body.modern-ui .btn.font-900 { font-weight: 700 !important; }

body.modern-ui .btn.bg-green-dark {
  background: linear-gradient(180deg, #22c55e, #16a34a) !important;
  border-color: #16a34a !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25) inset, 0 6px 16px -6px rgba(22, 163, 74, 0.55) !important;
}
body.modern-ui .btn.bg-green-dark:hover { filter: brightness(1.05); }

body.modern-ui .btn.bg-blue-dark {
  background: linear-gradient(180deg, #3b82f6, #2563eb) !important;
  border-color: #2563eb !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25) inset, 0 6px 16px -6px rgba(37, 99, 235, 0.55) !important;
}
body.modern-ui .btn.bg-yellow-dark {
  background: linear-gradient(180deg, #fbbf24, #f59e0b) !important;
  border-color: #f59e0b !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 6px 16px -6px rgba(245, 158, 11, 0.55) !important;
}
body.modern-ui .btn.bg-red-dark {
  background: linear-gradient(180deg, #f43f5e, #e11d48) !important;
  border-color: #e11d48 !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25) inset, 0 6px 16px -6px rgba(225, 29, 72, 0.5) !important;
}
body.modern-ui .btn.bg-highlight {
  background: linear-gradient(180deg, #e5566a, #da4453) !important;
  border-color: #da4453 !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.22) inset, 0 6px 16px -6px rgba(218, 68, 83, 0.5) !important;
}
body.modern-ui .btn.bg-dark,
body.modern-ui .btn.bg-black {
  background: linear-gradient(180deg, #25252d, #0b0b10) !important;
  border-color: #0b0b10 !important;
  color: #fff !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.12) inset, 0 8px 20px -8px rgba(11, 11, 16, 0.6) !important;
}

/* Outline / quiet buttons */
body.modern-ui .btn.border-secondary {
  border-color: var(--cs-line-strong) !important;
  color: var(--cs-ink-2) !important;
  background-color: var(--cs-surface);
  box-shadow: var(--cs-shadow-1);
}
body.modern-ui .btn.border-secondary:hover {
  border-color: rgba(15, 15, 25, 0.22) !important;
  color: var(--cs-ink) !important;
  box-shadow: var(--cs-shadow-2);
}

/* Ripple element injected by scripts/modern-motion.js */
body.modern-ui .cs-ripple {
  position: absolute !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 50%;
  pointer-events: none;
  background: currentColor;
  opacity: 0.18 !important;
  transform: scale(0);
  animation: cs-ripple 0.6s var(--cs-ease) forwards;
}
@keyframes cs-ripple { to { transform: scale(2.2); opacity: 0 !important; } }

/* ---------- Form controls ---------- */

body.modern-ui .form-control,
body.modern-ui .form-select,
body.modern-ui .w3-input,
body.modern-ui .w3-select,
body.modern-ui .input-style input,
body.modern-ui .input-style select,
body.modern-ui .input-style textarea,
body.modern-ui select.form-control,
body.modern-ui textarea.form-control {
  font-family: var(--cs-font) !important;
  border-radius: 12px !important;
  border: 1px solid var(--cs-line-strong) !important;
  background-color: var(--cs-surface) !important;
  color: var(--cs-ink) !important;
  box-shadow: 0 1px 2px rgba(16, 16, 30, 0.04) inset;
  transition: border-color 0.2s var(--cs-ease), box-shadow 0.25s var(--cs-ease), background-color 0.2s var(--cs-ease) !important;
}
body.modern-ui .form-control:hover,
body.modern-ui .form-select:hover { border-color: rgba(15, 15, 25, 0.2) !important; }
body.modern-ui .form-control:focus,
body.modern-ui .form-select:focus,
body.modern-ui .w3-input:focus,
body.modern-ui .input-style input:focus,
body.modern-ui .input-style select:focus,
body.modern-ui .input-style textarea:focus {
  border-color: rgba(47, 111, 237, 0.55) !important;
  box-shadow: var(--cs-ring) !important;
  outline: none !important;
}
body.modern-ui .form-control::placeholder { color: var(--cs-faint); }
body.modern-ui .input-style label,
body.modern-ui .input-style > label.color-dark { color: var(--cs-muted) !important; font-weight: 500; }

body.modern-ui .form-check-input { border-radius: 6px; transition: background-color 0.2s var(--cs-ease), box-shadow 0.2s var(--cs-ease); }
body.modern-ui .form-check-input:checked { background-color: var(--cs-ink); border-color: var(--cs-ink); }
body.modern-ui .form-check-input:focus { box-shadow: var(--cs-ring); border-color: rgba(47, 111, 237, 0.55); }

/* switchBox() — the template's custom switch */
body.modern-ui .switch .slider {
  transition: background-color 0.25s var(--cs-ease), box-shadow 0.25s var(--cs-ease) !important;
  box-shadow: 0 1px 2px rgba(16, 16, 30, 0.06) inset;
}
body.modern-ui .switch input:checked + .slider { background-color: var(--cs-green) !important; }
body.modern-ui .switch .slider:before { transition: transform 0.28s var(--cs-ease-spring) !important; box-shadow: 0 2px 5px rgba(16, 16, 30, 0.22); }

/* ---------- Lists (list-custom-small) ---------- */

body.modern-ui .list-custom-small a {
  border-radius: 12px;
  border-bottom: none !important;
  transition: background-color 0.2s var(--cs-ease);
}
body.modern-ui .list-custom-small a:hover { background-color: var(--cs-surface-2); }
body.modern-ui .list-custom-small a .fa-angle-right { transition: transform 0.25s var(--cs-ease); }
body.modern-ui .list-custom-small a:hover .fa-angle-right { transform: translateX(3px); }
body.modern-ui .list-custom-small a i:first-child { border-radius: 9px !important; }

/* ---------- Tables ---------- */

body.modern-ui .card-style table thead th {
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--cs-muted) !important;
  background: transparent !important;
  border-bottom: 1px solid var(--cs-line) !important;
}
body.modern-ui .card-style .table > :not(caption) > * > *,
body.modern-ui .card-style .w3-table-all tr { border-color: var(--cs-line) !important; }
body.modern-ui .card-style tbody tr { transition: background-color 0.2s var(--cs-ease); }
body.modern-ui .card-style tbody tr:hover { background-color: rgba(47, 111, 237, 0.04) !important; }
body.modern-ui .w3-table-all tr:nth-child(odd) { background-color: var(--cs-surface) !important; }
body.modern-ui .w3-table-all tr:nth-child(even) { background-color: var(--cs-surface-2) !important; }

/* ---------- Alerts ---------- */

body.modern-ui .alert[role="alert"] {
  --al-bg: #f4f4f6; --al-ring: rgba(15, 15, 25, 0.08); --al-ink: #2a2a33; --al-icon: #6b6b76;
  position: relative;
  border-radius: var(--cs-r) !important;
  background: var(--al-bg) !important;
  color: var(--al-ink) !important;
  border: none !important;
  box-shadow: 0 0 0 1px var(--al-ring) inset, 0 6px 18px -12px rgba(16, 16, 30, 0.25);
}
body.modern-ui .alert[role="alert"].bg-yellow-dark { --al-bg: #fffaeb; --al-ring: rgba(245, 158, 11, 0.28); --al-ink: #713f12; --al-icon: #f59e0b; }
body.modern-ui .alert[role="alert"].bg-green-dark  { --al-bg: #f0fdf4; --al-ring: rgba(22, 163, 74, 0.25); --al-ink: #14532d; --al-icon: #16a34a; }
body.modern-ui .alert[role="alert"].bg-blue-dark   { --al-bg: #eff6ff; --al-ring: rgba(37, 99, 235, 0.22); --al-ink: #1e3a8a; --al-icon: #2563eb; }
body.modern-ui .alert[role="alert"].bg-red-dark    { --al-bg: #fff1f2; --al-ring: rgba(225, 29, 72, 0.22); --al-ink: #881337; --al-icon: #e11d48; }
body.modern-ui .alert[role="alert"].bg-secondary   { --al-bg: #f4f4f6; --al-ring: rgba(15, 15, 25, 0.1); --al-ink: #2a2a33; --al-icon: #6b6b76; }

body.modern-ui .alert[role="alert"] > .alert-icon {
  width: 32px !important;
  height: 32px;
  border-radius: 10px;
  background: var(--al-icon) !important;
  color: #fff !important;
  box-shadow: 0 6px 14px -6px var(--al-icon);
}
body.modern-ui .alert[role="alert"] > .alert-icon i { color: #fff !important; font-size: 14px !important; }
body.modern-ui .alert[role="alert"] .alert-title h4 {
  text-transform: none !important;
  letter-spacing: -0.01em !important;
  font-size: 15px !important;
  font-weight: 650 !important;
  color: var(--al-ink) !important;
}
body.modern-ui .alert[role="alert"] .alert-message { font-size: 14px; line-height: 1.45; color: var(--al-ink); opacity: 0.85; }
body.modern-ui .alert[role="alert"] .text-white,
body.modern-ui .alert[role="alert"] .color-white { color: inherit !important; }
body.modern-ui .alert[role="alert"] a { text-decoration: none !important; color: inherit !important; }
body.modern-ui .alert[role="alert"] .close { color: var(--al-ink) !important; }

/* ---------- Badges / pills ---------- */

body.modern-ui .badge { font-weight: 600; letter-spacing: 0.01em; border-radius: 999px; }

/* ---------- Side menu & bottom sheets ---------- */

body.modern-ui .menu { transition: transform 0.5s var(--cs-ease), opacity 0.4s var(--cs-ease) !important; }
body.modern-ui .menu-box-left { border-radius: 0 24px 24px 0; }
body.modern-ui .menu-box-bottom { border-radius: 24px 24px 0 0 !important; }
body.modern-ui .menu-box-modal,
body.modern-ui .modal-content { border-radius: var(--cs-r-lg) !important; box-shadow: var(--cs-shadow-3) !important; }
body.modern-ui .menu-hider {
  background-color: rgba(10, 10, 20, 0.28) !important;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: opacity 0.4s var(--cs-ease) !important;
}
body.modern-ui .modal-backdrop { -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
body.modern-ui .modal-backdrop.show { opacity: 0.3; }

/* ---------- Pagination ---------- */

body.modern-ui .pagination .page-link {
  border-radius: 10px !important;
  margin: 0 3px;
  min-width: 38px;
  text-align: center;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  border: 1px solid var(--cs-line-strong);
  color: var(--cs-ink-2);
  transition: all 0.2s var(--cs-ease);
}
body.modern-ui .pagination .page-item .page-link.bg-theme,
body.modern-ui .pagination .page-item .page-link.bg-transparent {
  background: var(--cs-surface) !important;
  color: var(--cs-ink-2) !important;
  box-shadow: none !important;
}
/* The page you are on is the inverse of the page: ink-coloured pill, paper-
   coloured number. Written as #fff the number stayed white when the ink token
   flipped to near-white in dark mode, leaving a white pill with a white number
   on it. Taking the number from --cs-bg keeps the inversion in both themes. */
body.modern-ui .pagination .page-item.active .page-link,
body.modern-ui .pagination .page-item.active .page-link.bg-highlight {
  background: var(--cs-ink) !important;
  border-color: var(--cs-ink) !important;
  color: var(--cs-bg) !important;
  box-shadow: none !important;
  pointer-events: none;
}

/* ---------- Scrollbar ---------- */

@media (hover: hover) {
  body.modern-ui * { scrollbar-width: thin; scrollbar-color: rgba(15, 15, 25, 0.18) transparent; }
  body.modern-ui ::-webkit-scrollbar { width: 10px; height: 10px; }
  body.modern-ui ::-webkit-scrollbar-thumb {
    background-color: rgba(15, 15, 25, 0.16);
    border-radius: 10px;
    border: 3px solid transparent;
    background-clip: content-box;
  }
  body.modern-ui ::-webkit-scrollbar-thumb:hover { background-color: rgba(15, 15, 25, 0.3); }
  body.modern-ui ::-webkit-scrollbar-track { background: transparent; }
}

/* ---------- Turbo progress bar ---------- */

body.modern-ui .turbo-progress-bar {
  height: 3px !important;
  background: linear-gradient(90deg, #2f6fed, #7a3aa8 55%, #da4453) !important;
  box-shadow: 0 0 12px rgba(47, 111, 237, 0.45);
}

/* ---------- Card entrance (own sub-flag: body.modern-ui-reveal) ---------- */
/* Pure CSS on purpose — a script that hides cards after they have painted makes
   the page blink. "backwards" fill means a card is never left hidden if the
   animation is interrupted. */

body.modern-ui-reveal .page-content .card-style { animation: cs-rise 0.45s var(--cs-ease) backwards; }
body.modern-ui-reveal .page-content [class*="col"] > .card-style:nth-of-type(2) { animation-delay: 45ms; }
body.modern-ui-reveal .page-content [class*="col"] > .card-style:nth-of-type(3) { animation-delay: 90ms; }
body.modern-ui-reveal .page-content [class*="col"] > .card-style:nth-of-type(n+4) { animation-delay: 130ms; }
@keyframes cs-rise { from { opacity: 0; transform: translateY(10px); } }

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  body.modern-ui .btn,
  body.modern-ui .card-style,
  body.modern-ui .menu,
  body.modern-ui .list-custom-small a { transition: none !important; }
  body.modern-ui .btn:active { transform: none; }
  body.modern-ui .cs-ripple { display: none !important; }
  body.modern-ui-reveal .page-content .card-style { animation: none !important; }
}

/* ==========================================================================
   Campsite-specific polish — pieces the template markup needs beyond the
   shared surfaces above.
   ========================================================================== */

/* ---------- Card media: follow the card's rounded corners ----------
   .card-style can't take overflow:hidden (popovers and the ... menus escape it),
   so the leading/trailing image rounds its own outer corners instead. */

body.modern-ui .card-style > img:first-child,
body.modern-ui .card-style > a:first-child > img,
body.modern-ui .card-style > *:first-child > a:only-child > img:only-child,
body.modern-ui .card-style > *:first-child > img:only-child,
body.modern-ui .card-style > .card-overlay + img,
body.modern-ui .card-style > .card-overlay + a > img {
  border-radius: var(--cs-r-lg) var(--cs-r-lg) 0 0 !important;
}
body.modern-ui .card-style > img:last-child,
body.modern-ui .card-style > a:last-child > img {
  border-radius: 0 0 var(--cs-r-lg) var(--cs-r-lg) !important;
}
body.modern-ui .card-style > a:first-child:last-child > img,
body.modern-ui .card-style > img:first-child:last-child {
  border-radius: var(--cs-r-lg) !important;
}

/* The dim on a finished camp lives on .camp-past in components.css. It used to
   be an opacity-50 on the poster, which this file lifted to 0.94 as if it were
   decoration — it is not, it is how you tell a camp you can still go to from
   one that is over. */

/* ---------- Tab controls → segmented control ---------- */

body.modern-ui .tab-controls.tabs-rounded {
  background: var(--cs-surface-3);
  border-radius: 999px !important;
  /* The template sets the outer spacing with p-3/pt-0/pb-2 utilities, which vary
     per page. Trading that padding for margin keeps the pill inset from the
     screen edges wherever it is used. */
  padding: 4px !important;
  margin: 0 16px 12px !important;
  gap: 2px;
  box-shadow: 0 1px 2px rgba(16, 16, 30, 0.04) inset;
}
body.modern-ui .tab-controls.tabs-rounded a {
  border-radius: 999px !important;
  background: transparent !important;
  color: var(--cs-muted) !important;
  font-weight: 600;
  letter-spacing: 0.01em;
  border: 0 !important;
  box-shadow: none !important;
  transition: background-color 0.25s var(--cs-ease), color 0.25s var(--cs-ease), box-shadow 0.25s var(--cs-ease);
}
body.modern-ui .tab-controls.tabs-rounded a:hover { color: var(--cs-ink) !important; }
/* The template moves .bg-highlight to the tab you picked but leaves a stale
   data-active behind on the old one, so .bg-highlight is the live marker. */
body.modern-ui .tab-controls.tabs-rounded a.bg-highlight {
  background: var(--cs-surface) !important;
  color: var(--cs-ink) !important;
  box-shadow: var(--cs-shadow-1), 0 0 0 1px var(--cs-line) !important;
}

/* ---------- Search box ---------- */

body.modern-ui .search-box {
  border-radius: 999px !important;
  background: var(--cs-surface) !important;
  border: 1px solid var(--cs-line-strong) !important;
  box-shadow: var(--cs-shadow-1);
  transition: border-color 0.2s var(--cs-ease), box-shadow 0.25s var(--cs-ease);
}
body.modern-ui .search-box:focus-within {
  border-color: rgba(47, 111, 237, 0.55) !important;
  box-shadow: var(--cs-ring);
}
body.modern-ui .search-box input { background: transparent !important; box-shadow: none !important; border: 0 !important; }
body.modern-ui .search-box i { color: var(--cs-faint); }

/* ---------- Stat rows / stepper boxes (stats.php) ---------- */

body.modern-ui .card-style .w3-border,
body.modern-ui .card-style input[type="number"] {
  border-radius: var(--cs-r-sm) !important;
  border-color: var(--cs-line-strong) !important;
}

/* ---------- Dark mode: surfaces the template paints by hand ---------- */

body.theme-dark.modern-ui .card-style,
body.theme-dark.modern-ui .content-box { background-color: var(--cs-surface) !important; }
body.theme-dark.modern-ui .tab-controls.tabs-rounded { background: var(--cs-surface-2); }
body.theme-dark.modern-ui .tab-controls.tabs-rounded a.bg-highlight { background: var(--cs-surface-3) !important; }
body.theme-dark.modern-ui .search-box { background: var(--cs-surface-2) !important; }
body.theme-dark.modern-ui .form-control,
body.theme-dark.modern-ui .w3-input,
body.theme-dark.modern-ui .input-style input,
body.theme-dark.modern-ui .input-style select,
body.theme-dark.modern-ui .input-style textarea { background-color: var(--cs-surface-2) !important; }
body.theme-dark.modern-ui .alert[role="alert"] { --al-bg: #23262c; --al-ring: rgba(255, 255, 255, 0.1); --al-ink: #e7e9ee; }
body.theme-dark.modern-ui .alert[role="alert"].bg-yellow-dark { --al-bg: #2e2515; --al-ring: rgba(245, 158, 11, 0.3); --al-ink: #fde68a; }
body.theme-dark.modern-ui .alert[role="alert"].bg-green-dark  { --al-bg: #14261b; --al-ring: rgba(34, 197, 94, 0.28); --al-ink: #bbf7d0; }
body.theme-dark.modern-ui .alert[role="alert"].bg-blue-dark   { --al-bg: #151e30; --al-ring: rgba(59, 130, 246, 0.28); --al-ink: #bfdbfe; }
body.theme-dark.modern-ui .alert[role="alert"].bg-red-dark    { --al-bg: #2c1720; --al-ring: rgba(244, 63, 94, 0.28); --al-ink: #fecdd3; }
body.theme-dark.modern-ui .w3-table-all tr:nth-child(odd) { background-color: var(--cs-surface) !important; }
body.theme-dark.modern-ui .w3-table-all tr:nth-child(even) { background-color: var(--cs-surface-2) !important; }
body.theme-dark.modern-ui .card-style tbody tr:hover { background-color: rgba(255, 255, 255, 0.04) !important; }
@media (hover: hover) {
  body.theme-dark.modern-ui * { scrollbar-color: rgba(255, 255, 255, 0.2) transparent; }
  body.theme-dark.modern-ui ::-webkit-scrollbar-thumb { background-color: rgba(255, 255, 255, 0.18); }
}

/* ---------- W3.CSS buttons ----------
   A second button family lives alongside the template's .btn (308 uses of
   .w3-button). It gets the same shape, press feedback and colour treatment so
   the two families stop looking like they came from different apps. */

body.modern-ui .w3-button {
  font-family: var(--cs-font) !important;
  font-weight: 600;
  letter-spacing: 0.01em;
  border-radius: 12px !important;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform 0.18s var(--cs-ease),
    box-shadow 0.3s var(--cs-ease),
    filter 0.3s var(--cs-ease),
    background-color 0.3s var(--cs-ease) !important;
}
body.modern-ui .w3-button:active { transform: scale(0.97); }
body.modern-ui .w3-button:focus-visible { box-shadow: var(--cs-ring) !important; outline: none; }
body.modern-ui .w3-button.w3-round,
body.modern-ui .w3-button.w3-round-large { border-radius: 12px !important; }
body.modern-ui .w3-button.w3-round-xlarge,
body.modern-ui .w3-button.w3-round-xxlarge { border-radius: 999px !important; }

body.modern-ui .w3-button.w3-green {
  background: linear-gradient(180deg, #22c55e, #16a34a) !important;
  color: #fff !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25) inset, 0 6px 16px -6px rgba(22, 163, 74, 0.55);
}
body.modern-ui .w3-button.w3-red {
  background: linear-gradient(180deg, #f43f5e, #e11d48) !important;
  color: #fff !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25) inset, 0 6px 16px -6px rgba(225, 29, 72, 0.5);
}
body.modern-ui .w3-button.w3-orange {
  background: linear-gradient(180deg, #fbbf24, #f59e0b) !important;
  color: #fff !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 6px 16px -6px rgba(245, 158, 11, 0.55);
}
body.modern-ui .w3-button.w3-green:hover,
body.modern-ui .w3-button.w3-red:hover,
body.modern-ui .w3-button.w3-orange:hover { filter: brightness(1.05); }
body.modern-ui .w3-button.w3-light-gray,
body.modern-ui .w3-button.w3-light-grey,
body.modern-ui .w3-button.w3-gray {
  background: var(--cs-surface-2) !important;
  color: var(--cs-ink-2) !important;
  box-shadow: 0 0 0 1px var(--cs-line) inset;
}

/* Small pill chips keep their compact size but lose the hard 2px corners */
body.modern-ui .w3-button.w3-small { border-radius: 10px !important; }

/* ---------- Toasts ---------- */

body.modern-ui .toast {
  border-radius: var(--cs-r) !important;
  box-shadow: 0 10px 28px -10px rgba(16, 16, 30, 0.35) !important;
  border: none !important;
}

/* ---------- Belts: fabric sheen + stitching ----------
   fnDrawBelt() tags each belt with .cs-belt. The sheen alone is enough here;
   Beltchecker also stitches its belts, but that reads as fussy at this size. */

body.modern-ui .cs-belt {
  position: relative;
  overflow: hidden;
  border-radius: 5px !important;
}
/* w3-container's clearfix sets ::before/::after to display: table, which
   collapses them to zero width — force them back to blocks. */
body.modern-ui .cs-belt::before,
body.modern-ui .cs-belt::after { display: block !important; }
/* The rank bar and its stripes sit above the stitching, like a real belt */
body.modern-ui .cs-belt > div { position: relative; z-index: 2; }
body.modern-ui .cs-belt::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.20) 0%,
    rgba(255, 255, 255, 0.04) 38%,
    rgba(0, 0, 0, 0.06) 62%,
    rgba(0, 0, 0, 0.16) 100%);
}

/* ==========================================================================
   Schedule (schedule.php / functions_schedule.php)

   The most-opened screen during a camp. The markup keeps its table — only class
   names were added — so everything below reverts with the kill flag.

   What changes: entries are left-aligned instead of centred (a centred list is
   hard to scan), rows size to their content instead of a fixed 180px, the
   weekday header stops eating a screen height, and the location moves from a
   dashed divider above the row to a quiet label on the left.
   ========================================================================== */

/* ---------- Day header ---------- */

body.modern-ui .cs-sched-day {
  font-size: 26px !important;
  font-weight: 680;
  letter-spacing: -0.03em;
  text-transform: none;
  margin-bottom: 0 !important;
}
/* jddayofweek() gives MONDAY; small-caps reads better than shouting */
body.modern-ui .cs-sched-day {
  font-variant-caps: normal;
  text-transform: capitalize;
}
body.modern-ui .cs-sched-date {
  margin: 2px 0 14px !important;
  font-size: 13px !important;
  opacity: 1 !important;
  color: var(--cs-muted);
  letter-spacing: 0.01em;
}

/* ---------- Location label ---------- */

body.modern-ui .cs-sched-corner { display: none !important; }
body.modern-ui .cs-sched-mat {
  text-align: left !important;
  padding: 14px 0 4px !important;
  opacity: 1 !important;
  border: 0 !important;
}
body.modern-ui .cs-sched-matname {
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.1em;
  color: var(--cs-faint);
}

/* ---------- Time rail ---------- */

body.modern-ui .cs-sched-time {
  vertical-align: top !important;
  padding: 14px 10px 0 0 !important;
  text-align: right !important;
  width: 1%;
}
body.modern-ui .cs-time-rule { display: none !important; }
body.modern-ui .cs-time-start,
body.modern-ui .cs-time-end {
  display: block;
  font-variant-numeric: tabular-nums;
  line-height: 1.25;
}
body.modern-ui .cs-time-start { font-size: 15px; font-weight: 650; color: var(--cs-ink); }
body.modern-ui .cs-time-end { font-size: 13px; color: var(--cs-faint); }
/* The favourite tick/plus sits under the times */
body.modern-ui .cs-sched-time img[src*="solid"] { margin-top: 10px !important; }

/* ---------- The entry itself ---------- */

body.modern-ui .cs-sched-cell {
  height: auto !important;
  vertical-align: top !important;
}
body.modern-ui .cs-sched-entry {
  height: auto !important;
  min-height: 62px;
  justify-content: center !important;
  align-items: stretch !important;
  text-align: left;
  padding: 13px 15px !important;
  border-radius: 14px !important;
  border-color: rgba(15, 15, 25, 0.06) !important;
  box-shadow: 0 1px 2px rgba(16, 16, 30, 0.05);
}
/* "Your class" and personal entries are marked with a 7px red border, which at
   this size swallows the entry. A left rail says the same thing more quietly. */
body.modern-ui .cs-sched-entry[style*="7px solid red"] {
  border: 1px solid rgba(15, 15, 25, 0.06) !important;
  border-left: 4px solid var(--cs-highlight) !important;
  padding-left: 12px !important;
}

body.modern-ui .cs-sched-title {
  padding-left: 0 !important;
  padding-right: 0 !important;
  font-size: 15.5px !important;
  font-weight: 620;
  line-height: 1.32;
  letter-spacing: -0.015em;
  color: var(--cs-ink);
}
body.modern-ui .cs-sched-level {
  margin-top: 5px;
  opacity: 1 !important;
  font-size: 12.5px !important;
  color: var(--cs-muted);
}
body.modern-ui .cs-sched-level em { font-style: normal; }

/* Coach: avatar and name on one line instead of stacked and centred */
body.modern-ui .cs-sched-entry > .cs-sched-coach,
body.modern-ui .cs-sched-coach {
  margin-top: 6px !important;
  font-size: 13px !important;
  font-weight: 600;
  color: var(--cs-muted);
  text-transform: none;
}
body.modern-ui .cs-sched-entry img.rounded-circle,
body.modern-ui .cs-sched-entry img[class*="rounded-circle"] {
  width: 28px !important;
  height: 28px !important;
  margin-bottom: 2px;
}

/* "Now" badge: a live dot rather than a bootstrap pill */
body.modern-ui .cs-sched-title .badge.bg-success {
  background: rgba(22, 163, 74, 0.12) !important;
  color: #15803d !important;
  font-size: 10.5px !important;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 9px 3px 7px;
  vertical-align: 2px;
}
body.modern-ui .cs-sched-title .badge.bg-success .spinner-grow {
  background-color: #16a34a !important;
}

/* The ... info button and the sign-up button were centred under the entry */
body.modern-ui .cs-sched-entry > div:has(> img[src*="ellipsis"]) { margin-top: 8px !important; }
body.modern-ui .cs-sched-entry .w-50 { width: 100% !important; margin-bottom: 0 !important; }
body.modern-ui .cs-sched-entry .btn { margin-bottom: 0 !important; }

/* The table's own spacing */
body.modern-ui .cs-sched-cell + td,
body.modern-ui table.table-borderless { border-spacing: 0 6px !important; }

/* The two times are separated by <br><img><br> in the markup. Collapsing the
   cell's line-height removes the gap those line breaks leave behind once the
   little stripe image is hidden; the spans set their own line-height back. */
body.modern-ui .cs-sched-time { line-height: 0 !important; font-size: 0 !important; }
body.modern-ui .cs-time-start,
body.modern-ui .cs-time-end { line-height: 1.3; }
body.modern-ui .cs-time-start { font-size: 15px !important; }
body.modern-ui .cs-time-end { font-size: 13px !important; }

/* Source strings are shouted (MONDAY); lowercase plus a capital first letter
   gets "Monday" without changing what the PHP echoes. */
body.modern-ui .cs-sched-day { text-transform: lowercase !important; }
body.modern-ui .cs-sched-day::first-letter { text-transform: uppercase; }

/* The extrainfo icon was a bare image floating at the left of the entry; it
   sits at the right now, where an affordance belongs. No tinted pill behind it:
   that was there to make three dots look pressable, and a circled i already
   looks like something to tap. The padding stays for the touch target. */
body.modern-ui .cs-sched-entry img[src*="ellipsis"] {
  width: 26px !important;
  height: 26px;
  padding: 4px !important;
  opacity: 0.45;
  transition: opacity 0.2s var(--cs-ease);
}
body.modern-ui .cs-sched-entry img[src*="ellipsis"]:hover { opacity: 0.85; }
body.modern-ui .cs-sched-entry > div:has(> img[src*="ellipsis"]) {
  margin-top: 8px !important;
  display: flex;
  justify-content: flex-end;
}

/* styles.php pins every schedule row at 130px and centres the time column.
   Both are inline in the page, so they need beating explicitly. */
body.modern-ui tr.scheduleCell { height: auto !important; }
body.modern-ui .cs-sched-time {
  text-align: right !important;
  vertical-align: top !important;
  width: 74px !important;
  padding: 15px 12px 0 0 !important;
  line-height: 0 !important;
}

/* ==========================================================================
   Campers list (campers.php / functions_campers.php)

   One card per camper with a 100px avatar means a 100-person camp is a very
   long scroll. The card stays — the roll checkbox and the "..." panel hang off
   it — but everything inside tightens so roughly twice as many people fit on a
   screen. Markup untouched; this all reverts with the kill flag.
   ========================================================================== */

body.modern-ui .card-style.campercard {
  margin-bottom: 10px !important;
  border-radius: 16px !important;
}
body.modern-ui .card-style.campercard > .content {
  margin: 14px 16px !important;
}
body.modern-ui .campercard table { margin-bottom: 0 !important; }
/* Faces are what people scan this list by, not names, so the picture stays
   large. The density comes from everything around it instead. */
body.modern-ui .campercard td:first-child { width: 92px !important; padding-right: 0; }
body.modern-ui .campercard img.rounded-circle {
  width: 80px !important;
  height: 80px !important;
  object-fit: cover;
}
/* The username was set at 24px, which is display size for a list row */
body.modern-ui .campercard td div[style*="font-size: 24px"] {
  font-size: 17px !important;
  font-weight: 620;
  letter-spacing: -0.015em;
  color: var(--cs-ink);
  line-height: 1.25;
}
body.modern-ui .campercard td em { font-style: normal; }
body.modern-ui .campercard td div em { font-size: 12.5px; color: var(--cs-muted); }

/* Belt: a slimmer bar, and less air around it */
body.modern-ui .campercard .cs-belt { height: 13px !important; }
body.modern-ui .campercard .mb-2 { margin-bottom: 6px !important; }

/* Social icons: smaller, and the ones a camper hasn't filled in fade back
   instead of sitting there at full size as grey squares */
body.modern-ui .campercard img[src*="instagram"],
body.modern-ui .campercard img[src*="facebook"],
body.modern-ui .campercard img[src*="whatsapp"],
body.modern-ui .campercard img[src*="beltchecker"] {
  width: 26px !important;
  height: 26px !important;
  margin-right: 5px !important;
}
body.modern-ui .campercard img.w3-grayscale-max { opacity: 0.16 !important; }

body.modern-ui .campercard .roll-checkbox-label { font-size: 12.5px !important; }
body.modern-ui .campercard .badge { font-size: 10.5px; padding: 3px 8px; }

/* A full-width belt reads as a progress bar. Capping it keeps it a belt. */
body.modern-ui .campercard .cs-belt { max-width: 190px; }

/* The per-camper admin panel behind "..." used font-20 rows with a grey circle
   that only turns green on check. Tightened to a list of switch-like rows. */
body.modern-ui .campercard .form-check.icon-check { margin-bottom: 2px !important; }
body.modern-ui .campercard .form-check-label.font-20 { font-size: 15px !important; color: var(--cs-ink-2); }
body.modern-ui .campercard .icon-check-1.font-20,
body.modern-ui .campercard .icon-check-2.font-20 { font-size: 17px !important; }
body.modern-ui .campercard .icon-check-1 { color: var(--cs-line-strong) !important; }


/* ==========================================================================
   Achievements (achievements.php)

   A zebra-striped table where each row carried a full-width outline button
   reading WHO DID THIS?. It is a checklist, so it reads as one now: hairline
   separators, the title at reading size, the switch on the right, and the
   "who did this" reveal as a quiet link rather than a button competing with
   the achievement itself.
   ========================================================================== */

body.modern-ui .cs-ach-table { margin-bottom: 0 !important; }
body.modern-ui .cs-ach-table > tbody > tr,
body.modern-ui .cs-ach-table > tbody > tr:nth-child(odd),
body.modern-ui .cs-ach-table > tbody > tr:nth-child(even) { background: transparent !important; }
body.modern-ui .cs-ach-row > td {
  padding: 16px 0 14px !important;
  border-top: 1px solid var(--cs-line) !important;
  border-bottom: 0 !important;
  vertical-align: top !important;
}
body.modern-ui .cs-ach-table > tbody > tr:first-child > td { border-top: 0 !important; }

body.modern-ui .cs-ach-title {
  margin-bottom: 0 !important;
  font-size: 15px;
  font-weight: 550;
  line-height: 1.4;
  color: var(--cs-ink-2);
}
/* The row's flex container holds title + switch; keep them on one baseline */
body.modern-ui .cs-ach-row .switch { margin-top: 1px; }
body.modern-ui .cs-ach-row table.dimUntilLoaded { margin-bottom: 0 !important; }

/* Done: the achievement reads as ticked off rather than just switched */
body.modern-ui .cs-ach-row:has(input[id^="switchbox_toggleAchievement"]:checked) .cs-ach-title {
  color: var(--cs-ink);
  font-weight: 600;
}

body.modern-ui .cs-ach-who {
  width: auto !important;
  margin: 10px 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
  opacity: 1 !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--cs-muted) !important;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--cs-line-strong);
}
body.modern-ui .cs-ach-who:hover { color: var(--cs-ink) !important; transform: none; }
/* Sentence case without touching what the PHP echoes */
body.modern-ui .cs-ach-who { text-transform: lowercase !important; }
body.modern-ui .cs-ach-who::first-letter { text-transform: uppercase; }

/* Bootstrap's .table-striped paints the cells (via --bs-table-accent-bg and a
   box-shadow), not the rows, so the striping has to be cleared on the td. */
body.modern-ui .cs-ach-table > tbody > tr > td,
body.modern-ui .cs-ach-table > tbody > tr > th {
  --bs-table-accent-bg: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

/* ==========================================================================
   Profile sheet (#userprofile / showprofile.php)

   The sheet a camper gets when tapping someone in the list. Photo with square
   corners inside a rounded sheet, an italic centred bio, a zebra-striped stat
   table and a full-width red CLOSE bar at the bottom. All style, no markup.
   ========================================================================== */

body.modern-ui #userprofile {
  border-radius: 26px 26px 0 0 !important;
  padding: 18px 18px 10px !important;
}

/* Photo follows the sheet's radius */
body.modern-ui #userprofile_content img.rounded {
  border-radius: 16px !important;
  object-fit: cover;
  box-shadow: 0 1px 2px rgba(16, 16, 30, 0.06), 0 10px 26px -12px rgba(16, 16, 30, 0.35);
}

body.modern-ui #userdata .font-24 {
  font-size: 22px !important;
  font-weight: 680 !important;
  letter-spacing: -0.028em;
  color: var(--cs-ink);
}

/* The bio was centred and italic, which is the hardest way to read a paragraph */
body.modern-ui #userprofile_content em,
body.modern-ui #userprofile_content i:not([class]) { font-style: normal; }
body.modern-ui #userprofile_content center > em,
body.modern-ui #userprofile_content > center { text-align: left; }

/* Stat rows: the same hairline list as the rest of the app */
body.modern-ui #userprofile_content table.w3-striped tr,
body.modern-ui #userprofile_content table.w3-striped td,
body.modern-ui #userprofile_content .w3-table-all tr:nth-child(odd),
body.modern-ui #userprofile_content .w3-table-all tr:nth-child(even) {
  background: transparent !important;
}
body.modern-ui #userprofile_content table.w3-striped tr + tr td { border-top: 1px solid var(--cs-line); }
body.modern-ui #userprofile_content table.w3-striped td { padding: 11px 2px !important; font-size: 14px; }

/* Action buttons in the sheet */
body.modern-ui #userprofile_content .btn.border-secondary { margin-bottom: 8px !important; }

/* CLOSE was a full-width red bar — the loudest thing in a sheet you dismiss by
   swiping anyway. Quiet it down to a neutral row. */
body.modern-ui #userprofile .btn.bg-highlight[data-bs-dismiss],
body.modern-ui #userprofile a[href="#"].bg-highlight,
body.modern-ui #userprofile .bg-highlight.btn-full,
body.modern-ui #menu-modal-likelist .bg-highlight.btn-full {
  background: var(--cs-surface-2) !important;
  border-color: transparent !important;
  color: var(--cs-ink-2) !important;
  box-shadow: none !important;
  font-weight: 600 !important;
}
body.modern-ui #userprofile .bg-highlight.btn-full:hover,
body.modern-ui #menu-modal-likelist .bg-highlight.btn-full:hover {
  background: var(--cs-surface-3) !important;
  color: var(--cs-ink) !important;
}

/* The "see this camper's page" ellipsis under the photo */
body.modern-ui #userprofile_content img[src*="ellipsis"] {
  width: 24px !important;
  padding: 5px !important;
  border-radius: 8px;
  background: rgba(15, 15, 25, 0.05);
  opacity: 0.6 !important;
}

/* ==========================================================================
   Lists across the app: hairlines instead of zebra stripes

   Striped tables are the single most dated thing left. Every list in the app —
   sign-up rosters, high scores, leaderboards, member lists — becomes rows
   separated by a hairline, the way a modern list does it. Nothing structural.
   ========================================================================== */

body.modern-ui .card-style table.table-striped > tbody > tr > td,
body.modern-ui .card-style table.table-striped > tbody > tr > th,
body.modern-ui .card-style table.w3-striped > tbody > tr > td {
  --bs-table-accent-bg: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}
body.modern-ui .card-style table.table-striped > tbody > tr + tr > td,
body.modern-ui .card-style table.w3-striped > tbody > tr + tr > td {
  border-top: 1px solid var(--cs-line) !important;
}
body.modern-ui .card-style table.table-striped > tbody > tr > td,
body.modern-ui .card-style table.w3-striped > tbody > tr > td {
  border-bottom: 0 !important;
  padding-top: 11px !important;
  padding-bottom: 11px !important;
}

/* Small destructive actions inside a list: a quiet icon button, not a red slab.
   The red stays for the real confirm step.

   Only buttons whose whole content is an icon — :has(img) — are reshaped. Some
   pages (the to-do list) carry a red *text* button alongside a separate icon
   button and hide one of the pair by breakpoint; squeezing a worded button into
   a 34px square broke that. This rule also sets no display, so those
   breakpoint rules keep deciding which of the pair is visible. */
body.modern-ui .card-style .w3-button.w3-red.w3-small:has(> img:only-child) {
  background: transparent !important;
  color: var(--cs-faint) !important;
  width: 34px;
  height: 34px;
  padding: 0 !important;
  border-radius: 10px !important;
  text-align: center;
  line-height: 34px !important;
  box-shadow: none !important;
}
body.modern-ui .card-style .w3-button.w3-red.w3-small:has(> img:only-child) img {
  filter: none !important;
  opacity: 0.4;
  height: 14px;
  vertical-align: middle;
}
body.modern-ui .card-style .w3-button.w3-red.w3-small:has(> img:only-child):hover {
  background: rgba(225, 29, 72, 0.1) !important;
}
body.modern-ui .card-style .w3-button.w3-red.w3-small:has(> img:only-child):hover img {
  opacity: 1;
  filter: brightness(0) saturate(100%) invert(22%) sepia(89%) saturate(4000%) hue-rotate(336deg) brightness(93%) contrast(95%) !important;
}

/* W3.CSS stripes the row, Bootstrap stripes the cell — clear both. */
body.modern-ui .card-style table.w3-striped > tbody > tr,
body.modern-ui .card-style table.w3-striped > tr,
body.modern-ui .card-style table.table-striped > tbody > tr {
  background-color: transparent !important;
}
body.modern-ui .card-style table.w3-bordered > tbody > tr,
body.modern-ui .card-style table.w3-bordered > tr { border-bottom: 0 !important; }
body.modern-ui .card-style table.w3-striped > tr + tr > td { border-top: 1px solid var(--cs-line) !important; }

/* Input groups (the @ before an Instagram handle) kept square corners against
   a rounded field. */
body.modern-ui .input-group > .input-group-text {
  border-radius: 12px 0 0 12px !important;
  border: 1px solid var(--cs-line-strong) !important;
  border-right: 0 !important;
  background: var(--cs-surface-2) !important;
  color: var(--cs-muted) !important;
}
body.modern-ui .input-group > .input-group-text + .form-control {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}

/* ---------- Sticky weekday ----------
   Scrolling fast through a six-day programme, it is easy to lose track of which
   day you are looking at. Each day is its own card, so its header sticks to the
   top while that day is on screen and is pushed away by the next day exactly
   when the day ends — no script, no scroll listener.

   schedule.php leaves the ticker out, so the only thing above it is the top
   bar. The negative margin lets the background reach the card's edges while the
   text stays on the content's left edge. */

/* One place for the offset so the CSS and the sentinel observer agree */
/* --cs-stick-top is set in components.css, which knows about the ticker. */
body.modern-ui .cs-sched-dayhead {
  position: sticky;
  top: calc(var(--cs-stick-top) + env(safe-area-inset-top, 0px) * 0.8);
  z-index: 6;
  margin: -6px -15px 0;
  padding: 12px 15px 8px;
  background: var(--cs-surface);
  border-radius: var(--cs-r-lg) var(--cs-r-lg) 0 0;
}
/* A permanent hairline, rather than one that appears only while pinned:
   it separates the day from its classes at rest too, and it means no scroll
   listener can fall out of step with what the eye sees. */
body.modern-ui .cs-sched-dayhead::after {
  content: "";
  position: absolute;
  left: 15px;
  right: 15px;
  bottom: 0;
  height: 1px;
  background: var(--cs-line);
}

body.theme-dark.modern-ui .cs-sched-dayhead { background: var(--cs-surface); }

/* style.css clips .card-style and .page-content with overflow: hidden, and
   `hidden` makes an element a scroll container. A scroll container that never
   scrolls is the one thing position: sticky cannot work inside — the header
   resolves against a box that never moves, so it never pins.

   `clip` cuts off exactly the same overflow without creating a scroll
   container, so the sticky weekday resolves against the viewport instead.
   Visually identical; supported everywhere the app already runs. */
body.modern-ui .page-content { overflow-x: clip !important; overflow-y: visible !important; }
body.modern-ui .card-style { overflow: clip !important; }

/* ==========================================================================
   Site ticker

   The thin band under the top bar carrying the online count and a rotating
   message. It was flat grey at 10px with a hard drop shadow. It now reads as
   part of the same glass as the bar above it, with the online dot alive.
   ========================================================================== */

body.modern-ui .site-ticker {
  padding: 5px 20px 4px !important;
  background: rgba(255, 255, 255, 0.72) !important;
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--cs-line);
  box-shadow: none !important;
}
body.theme-dark.modern-ui .site-ticker {
  background: rgba(28, 31, 36, 0.72) !important;
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

body.modern-ui .ticker-left,
body.modern-ui .ticker-right-item {
  font-size: 11px;
  font-weight: 550;
  letter-spacing: 0.01em;
  color: var(--cs-muted) !important;
}
body.modern-ui .ticker-left { display: inline-flex; align-items: center; gap: 6px; }

/* The dot said "online" by being green; now it says it by being alive */
body.modern-ui .ticker-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #16a34a;
  animation: cs-ticker-pulse 2.6s ease-out infinite;
}
@keyframes cs-ticker-pulse {
  0% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.45); }
  70%, 100% { box-shadow: 0 0 0 6px rgba(22, 163, 74, 0); }
}

body.modern-ui .ticker-right-link { text-decoration: none !important; }
body.modern-ui .ticker-right-link:hover { color: var(--cs-ink) !important; }

@media (prefers-reduced-motion: reduce) {
  body.modern-ui .ticker-dot { animation: none; }
}

/* ==========================================================================
   Side menu (footer_sidemenu.php)

   Every row carried a saturated gradient tile with a white glyph, and with
   eleven different gradients down one column it read as a sweet shop. The
   colour is useful — it is how you find a row without reading it — so it stays,
   but as the icon's own colour on a tinted tile instead of white on gradient.

   The chevrons go: a full-width row that highlights on touch already says it
   is tappable, and thirty of them in a column is thirty pieces of noise.
   ========================================================================== */

body.modern-ui #menu-sidebar { background: var(--cs-bg) !important; }

/* Section cards: flatter, so the sections read as groups rather than as
   floating objects stacked on each other */
body.modern-ui #menu-sidebar .card-style {
  box-shadow: 0 0 0 1px var(--cs-line) !important;
  border-radius: 16px !important;
  margin-bottom: 14px !important;
}
body.modern-ui #menu-sidebar .card-style .content { margin: 6px 12px 8px !important; }

/* Section label */
body.modern-ui #menu-sidebar h5 {
  opacity: 1 !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em;
  color: var(--cs-faint) !important;
  padding: 10px 4px 2px !important;
}

/* Rows */
body.modern-ui #menu-sidebar .list-custom-small a {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 46px;
  padding: 7px 8px !important;
  border-radius: 11px;
  border-bottom: 0 !important;
  font-size: 15px;
  color: var(--cs-ink-2) !important;
}
body.modern-ui #menu-sidebar .list-custom-small a span:not(.badge) {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0 !important;
  line-height: 1.3;
  font-weight: 500;
}
body.modern-ui #menu-sidebar .list-custom-small a:hover { background: var(--cs-surface-2); }
body.modern-ui #menu-sidebar .list-custom-small a:active { background: var(--cs-surface-3); }

/* The chevron on every single row */
body.modern-ui #menu-sidebar .list-custom-small a > .fa-angle-right { display: none !important; }

/* Icon tiles: the colour moves from the fill to the glyph */
body.modern-ui #menu-sidebar .list-custom-small a > i:first-child {
  flex: 0 0 30px;
  width: 30px !important;
  height: 30px !important;
  margin: 0 !important;
  border-radius: 9px !important;
  font-size: 13px !important;
  line-height: 30px !important;
  text-align: center;
  background-image: none !important;
  box-shadow: none !important;
}
body.modern-ui #menu-sidebar .list-custom-small a > i.gradient-dark    { background: rgba(67, 74, 84, 0.1) !important;   color: #434a54 !important; }
body.modern-ui #menu-sidebar .list-custom-small a > i.gradient-yellow  { background: rgba(246, 187, 66, 0.16) !important; color: #b98209 !important; }
body.modern-ui #menu-sidebar .list-custom-small a > i.gradient-brown   { background: rgba(170, 142, 105, 0.16) !important; color: #8a7150 !important; }
body.modern-ui #menu-sidebar .list-custom-small a > i.gradient-teal    { background: rgba(125, 177, 177, 0.18) !important; color: #51878a !important; }
body.modern-ui #menu-sidebar .list-custom-small a > i.gradient-mint    { background: rgba(55, 188, 155, 0.15) !important; color: #1f9d7f !important; }
body.modern-ui #menu-sidebar .list-custom-small a > i.gradient-red     { background: rgba(218, 68, 83, 0.13) !important;  color: #cc3a49 !important; }
body.modern-ui #menu-sidebar .list-custom-small a > i.gradient-pink    { background: rgba(215, 112, 173, 0.15) !important; color: #c25a97 !important; }
body.modern-ui #menu-sidebar .list-custom-small a > i.gradient-orange  { background: rgba(233, 87, 63, 0.14) !important;  color: #d9472f !important; }
body.modern-ui #menu-sidebar .list-custom-small a > i.gradient-magenta { background: rgba(150, 122, 220, 0.15) !important; color: #7a5ecb !important; }
body.modern-ui #menu-sidebar .list-custom-small a > i.gradient-blue    { background: rgba(74, 137, 220, 0.14) !important; color: #3a79cc !important; }
body.modern-ui #menu-sidebar .list-custom-small a > i.gradient-green   { background: rgba(140, 193, 82, 0.17) !important; color: #5f9330 !important; }

body.modern-ui #menu-sidebar .list-custom-small a .badge {
  flex: 0 0 auto;
  font-size: 10.5px;
  padding: 3px 8px;
}

/* The camp poster at the top of the menu */
body.modern-ui #menu-sidebar .card-style[data-card-height] {
  border-radius: 16px !important;
  margin: 14px 0 16px !important;
  box-shadow: var(--cs-shadow-2), 0 0 0 1px var(--cs-line) !important;
}

/* ---------- Dark theme ---------- */

body.theme-dark.modern-ui #menu-sidebar { background: #16181c !important; }
body.theme-dark.modern-ui #menu-sidebar .card-style { background: #1c1f24 !important; box-shadow: 0 0 0 1px rgba(255,255,255,0.07) !important; }
body.theme-dark.modern-ui #menu-sidebar .list-custom-small a { color: #d5d7dd !important; }
body.theme-dark.modern-ui #menu-sidebar .list-custom-small a:hover { background: #23262c; }
body.theme-dark.modern-ui #menu-sidebar .list-custom-small a > i:first-child { filter: saturate(1.25) brightness(1.35); }

/* ---------- Photo grid (photos.php) ----------
   The gallery sat 4px from the screen edge with 4px gaps and 4px corners while
   every other page sits on a 16px gutter. It reads as a grid rather than as a
   sheet of photos now, and lines up with the cards above it. */

body.modern-ui .photo-grid { gap: 8px; padding: 0 16px 4px; }
body.modern-ui .photo-col { gap: 8px; }
body.modern-ui .photo-grid-item {
  border-radius: 12px;
  background: var(--cs-surface-3);
  box-shadow: 0 1px 2px rgba(16, 16, 30, 0.05);
}

/* ==========================================================================
   Chat (chat.php)

   Message bodies were set at 18px in mid-grey — display size for running text,
   and low contrast at that, so a long post read as a grey wall. The name was
   also 18px, which gave the author the same weight as what they said.
   ========================================================================== */

body.modern-ui .chat-message-header { padding: 0 0 8px !important; }
body.modern-ui .chat-message-header img.rounded-circle {
  width: 38px !important;
  height: 38px !important;
}
/* Author */
body.modern-ui .chat-message-header > div.font-18 {
  font-size: 15px !important;
  font-weight: 620;
  color: var(--cs-ink) !important;
  top: 3px !important;
}
/* Timestamp */
body.modern-ui .chat-message-header .font-10 {
  font-size: 12px !important;
  opacity: 1 !important;
  color: var(--cs-faint) !important;
  margin-top: 1px !important;
}
body.modern-ui .chat-message-header em { font-style: normal; }

/* The message itself */
body.modern-ui .card-style .p-2.pb-0.font-18 {
  padding: 0 !important;
  font-size: 15.5px !important;
  line-height: 1.55 !important;
  color: var(--cs-ink-2) !important;
  word-break: normal !important;
  overflow-wrap: anywhere;
  /* The markup asks for automatic hyphenation, which in a phone-width column
     breaks ordinary words mid-line ("I need-ed you"). Ragged is easier to read. */
  -webkit-hyphens: manual !important;
  hyphens: manual !important;
}
body.modern-ui .card-style .p-2.pb-0.font-18 a { text-decoration: underline; text-underline-offset: 2px; }

/* The composer card: the heading was the biggest thing on the page */
body.modern-ui .page-chat .card-style:first-of-type h1,
body.modern-ui .card-style:has(#chat) h1 {
  font-size: 15px !important;
  font-weight: 620;
  margin-bottom: 12px !important;
}

/* Pagination blocks on chat and introductions */
body.modern-ui .pagination { gap: 2px; }

/* ==========================================================================
   Introductions (introductions.php)

   An introduction is a lot of text, so the question and the answer need to be
   two visibly separate things. They stay in two columns: the question keeps
   its right edge against the gutter, which gives every answer one common left
   edge to start from, and the answer sits in the wider column at reading size.

   What changes is the treatment, not the layout. The question becomes a quiet
   uppercase label instead of ordinary sentence text competing with the answer,
   the answer loses its italics, and a hairline separates one pair from the
   next so a three-line answer cannot be mistaken for the start of the one
   below it.
   ========================================================================== */

body.modern-ui.page-introductions .card-style table.table > tbody > tr > td {
  /* The markup sets vertical-align: top inline, hence the !important. */
  vertical-align: top !important;
  padding: 11px 0 !important;
  border-top: 1px solid var(--cs-line) !important;
  border-bottom: 0 !important;
}
body.modern-ui.page-introductions .card-style table.table > tbody > tr:first-child > td { border-top: 0 !important; }

/* The question */
body.modern-ui.page-introductions .card-style table.table td.w3-small {
  width: 36%;
  padding-right: 14px !important;
  font-size: 10.5px !important;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  /* The question is 10.5px and the answer 15px. Giving the label the answer's
     line height puts the two first lines in boxes of the same height, so they
     start on the same line instead of the label floating above what it labels.
     The remaining 3px is the gap between the two fonts' cap heights. */
  line-height: 22.5px;
  padding-top: 8px !important;
  color: var(--cs-faint);
}

/* The answer */
body.modern-ui.page-introductions .card-style table.table td em {
  font-style: normal;
  font-size: 15px;
  line-height: 1.5;
  color: var(--cs-ink-2);
}

/* The search row at the top is a genuine two-column control, not a Q&A pair */
body.modern-ui.page-introductions .card-style table.w-100 > tbody > tr > td {
  border-top: 0 !important;
  padding: 0 0 0 8px !important;
}

/* In edit mode the answer cell holds a form field rather than a line of text,
   so the label wants to sit against the top of the field instead of on a text
   baseline that is not there. */
body.modern-ui.page-introductions .card-style table.table td.w3-small:has(+ td .form-control) {
  padding-top: 16px !important;
}

/* "Who is going?" under a sign-up event. It was a full-width white outline
   button, which on a coloured entry read as the main thing to press — louder
   than signing up. It is a quiet link, the same treatment the achievements list
   got for the same reason. */
body.modern-ui .btn.cs-sched-who {
  width: auto !important;
  margin: 8px 0 2px !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
  opacity: 1 !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: lowercase !important;
  /* It is an aside, not part of the card's message — the faint ink keeps it
     available without competing with the class title above it. */
  color: var(--cs-faint) !important;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--cs-line-strong);
}
body.modern-ui .btn.cs-sched-who::first-letter { text-transform: uppercase; }
body.modern-ui .btn.cs-sched-who:hover { color: var(--cs-muted) !important; transform: none; }

/* The list it reveals sat in a deep indent meant for the old centred layout */
body.modern-ui .cs-sched-entry .collapse.ms-5,
body.modern-ui .cs-sched-entry .collapsing.ms-5 {
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-top: 8px !important;
  font-size: 14px !important;
}

/* ==========================================================================
   "More information" icon

   Twelve places across the app used the three-dot ellipsis to mean "there is
   more to read here". Three dots means "more options" everywhere else in
   software, so people read it as a menu. A circled i says what it does.

   Swapped here rather than in twelve echo statements: content on an <img>
   replaces what it renders, so the markup, the click handlers and the alt text
   all stay as they are, and the kill flag puts the old icon back.
   ========================================================================== */

body.modern-ui img[src*="ellipsis-solid"] {
  content: url("../images/info-circle.svg");
  /* The element carries 4px of padding from elsewhere, and with the default
     border-box that was eating into the glyph — 18px declared came out as a
     10px circle you could barely see. content-box keeps the size asked for. */
  box-sizing: content-box !important;
  width: 22px !important;
  height: 22px !important;
  /* Now that it is a readable size it can sit back further. The w3.css
     opacity class it carries is !important, so this has to be too. */
  opacity: 0.2 !important;
}

/* Except in the profile sheet. There the icon sits beside a figure and means
   "the numbers behind this", which is what an ellipsis says better than an
   (i) — so those keep the three dots at the size the markup asks for. */
body.modern-ui #userprofile_content img[src*="ellipsis-solid"] {
  content: normal;
  /* The three dots are a wide image, so the square height the (i) wanted has
     to go with it or they stretch into bars. */
  box-sizing: border-box !important;
  height: auto !important;
}