/* Klassikl design system — blue/purple/orange, tuned for fast class discovery. */

/* Plus Jakarta Sans, self-hosted (wwwroot/lib/plus-jakarta-sans, SIL OFL 1.1) so pages make no
   requests to Google: a variable font, so one file per character set covers every weight. The
   browser only fetches latin-ext when a page uses those characters. Ranges as Google serves them. */
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../lib/plus-jakarta-sans/plus-jakarta-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../lib/plus-jakarta-sans/plus-jakarta-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --klx-blue-50: #eef2ff;
  --klx-blue-100: #e0e7ff;
  --klx-blue-400: #6182ff;
  --klx-blue-500: #3b5bfb;
  --klx-blue-600: #2f46e0;
  --klx-blue-700: #2536b8;

  --klx-purple-50: #f5f1ff;
  --klx-purple-100: #ece3ff;
  --klx-purple-400: #9a6bf0;
  --klx-purple-500: #7c3aed;
  --klx-purple-600: #6d28d9;
  --klx-purple-700: #5b21b6;

  --klx-orange-50: #fff4eb;
  --klx-orange-100: #ffe4cc;
  --klx-orange-400: #ff9a52;
  --klx-orange-500: #fb7a2e;
  --klx-orange-600: #e8600f;

  --klx-ink-900: #10131f;
  --klx-ink-800: #1f2437;
  --klx-ink-600: #4b5266;
  /* Secondary text. At least 4.5:1 on white and every tinted surface below (WCAG 2.1 AA 1.4.3);
     the previous #7d84a0 was only 3.3-3.7:1. */
  --klx-ink-400: #636a86;
  --klx-line: #e7e9f4;
  --klx-line-strong: #d7daec;
  --klx-surface: #f6f7fd;
  --klx-surface-alt: #ffffff;

  --klx-gradient-hero: linear-gradient(135deg, #3b5bfb 0%, #6d3ef0 55%, #9333ea 100%);
  --klx-gradient-accent: linear-gradient(135deg, #ff9a52 0%, #fb7a2e 100%);
  --klx-gradient-cool: linear-gradient(135deg, #6182ff 0%, #9a6bf0 100%);

  --klx-radius-sm: 10px;
  --klx-radius: 16px;
  --klx-radius-lg: 22px;
  --klx-shadow-sm: 0 1px 2px rgba(16, 19, 31, 0.06);
  --klx-shadow: 0 8px 24px rgba(31, 36, 74, 0.08);
  --klx-shadow-lg: 0 20px 45px rgba(31, 36, 74, 0.16);
}

/* ---------- base ---------- */

html { font-size: 15px; }
@media (min-width: 768px) { html { font-size: 16px; } }

body {
  font-family: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  background: var(--klx-surface);
  color: var(--klx-ink-800);
  margin-bottom: 0;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  color: var(--klx-ink-900);
  letter-spacing: -0.01em;
}

a { color: var(--klx-blue-600); text-decoration: none; }
a:hover { color: var(--klx-purple-600); }

.text-muted { color: var(--klx-ink-400) !important; }

/* Bootstrap's defaults fall short of 4.5:1 on the page background: danger text (#dc3545, 4.2:1)
   and link-style buttons, which use Bootstrap's own blue rather than the theme's links. */
:root {
  --bs-danger-rgb: 200, 35, 51;      /* #c82333: 5.0:1 or better on every surface */
  --bs-link-color: var(--klx-blue-600);
  --bs-link-color-rgb: 47, 70, 224;
  --bs-link-hover-color: var(--klx-purple-600);
  --bs-link-hover-color-rgb: 109, 40, 217;
}
.btn-link { --bs-btn-color: var(--klx-blue-600); --bs-btn-hover-color: var(--klx-purple-600); --bs-btn-active-color: var(--klx-purple-600); }
.text-danger { color: rgb(var(--bs-danger-rgb)) !important; }
.invalid-feedback, .field-validation-error, .validation-summary-errors { color: rgb(var(--bs-danger-rgb)); }

main.container { max-width: 1140px; }

/* Every page's content starts a consistent distance below the navbar. Pages shouldn't add their
   own top padding; a full-bleed banner opts out by pulling itself back up (see .klx-hero). */
:root { --klx-content-top: 2rem; }
main[role="main"] { padding-top: var(--klx-content-top); }
/* Focus lands on <main> via the skip link; the jump itself is the cue, so no box around the page. */
main[role="main"]:focus { outline: none; }

.klx-skip-link {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 1100; /* above the sticky navbar */
  padding: 0.5rem 1rem;
  border-radius: var(--klx-radius-sm);
  background: var(--klx-blue-600);
  color: #fff;
  font-weight: 600;
}
.klx-skip-link:focus { color: #fff; outline: 3px solid var(--klx-purple-100); outline-offset: 2px; }

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus,
.form-control:focus, .form-select:focus, .form-check-input:focus {
  box-shadow: 0 0 0 3px var(--klx-blue-100);
}

/* ---------- buttons ---------- */

.btn {
  border-radius: var(--klx-radius-sm);
  font-weight: 600;
  padding-block: 0.55rem;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.btn-sm { border-radius: 8px; }
.btn-lg { border-radius: 14px; }

.btn-primary {
  --bs-btn-bg: var(--klx-blue-500);
  --bs-btn-border-color: var(--klx-blue-500);
  --bs-btn-hover-bg: var(--klx-blue-600);
  --bs-btn-hover-border-color: var(--klx-blue-600);
  --bs-btn-active-bg: var(--klx-blue-700);
  --bs-btn-active-border-color: var(--klx-blue-700);
  --bs-btn-focus-shadow-rgb: 59, 91, 251;
  box-shadow: 0 6px 16px rgba(59, 91, 251, 0.25);
}
.btn-primary:hover { transform: translateY(-1px); }

.btn-outline-primary {
  --bs-btn-color: var(--klx-blue-600);
  --bs-btn-border-color: var(--klx-blue-400);
  --bs-btn-hover-bg: var(--klx-blue-500);
  --bs-btn-hover-border-color: var(--klx-blue-500);
  --bs-btn-active-bg: var(--klx-blue-600);
  --bs-btn-active-border-color: var(--klx-blue-600);
}

.btn-secondary {
  --bs-btn-bg: var(--klx-purple-500);
  --bs-btn-border-color: var(--klx-purple-500);
  --bs-btn-hover-bg: var(--klx-purple-600);
  --bs-btn-hover-border-color: var(--klx-purple-600);
  --bs-btn-active-bg: var(--klx-purple-700);
  --bs-btn-active-border-color: var(--klx-purple-700);
}

.btn-outline-secondary {
  --bs-btn-color: var(--klx-ink-600);
  --bs-btn-border-color: var(--klx-line-strong);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--klx-purple-500);
  --bs-btn-hover-border-color: var(--klx-purple-500);
}

.btn-accent {
  color: #fff;
  background: var(--klx-gradient-accent);
  border: none;
  box-shadow: 0 8px 20px rgba(251, 122, 46, 0.35);
}
.btn-accent:hover { color: #fff; transform: translateY(-1px); filter: brightness(1.04); }

.btn-outline-danger { --bs-btn-hover-color: #fff; }

/* ---------- navbar ---------- */

.navbar.klx-navbar {
  position: sticky;
  top: 0;
  z-index: 1030;
  background: rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--klx-line);
  box-shadow: none !important;
  padding-block: 0.65rem;
}

.klx-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 800;
  font-size: 1.25rem;
  color: var(--klx-ink-900) !important;
}
.klx-brand-mark {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--klx-gradient-hero);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1rem;
  box-shadow: 0 6px 14px rgba(59, 91, 251, 0.35);
}

/* ---------- avatar + account menu ---------- */

.klx-avatar {
  display: block;
  flex-shrink: 0;
  border-radius: 50%;
  object-fit: cover;
}

.klx-avatar-generic {
  color: var(--klx-purple-500);
  background: #fff;
}

.klx-avatar-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.25rem;
  text-decoration: none;
}

.klx-avatar-toggle:focus-visible .klx-avatar {
  outline: 3px solid var(--klx-purple-100);
  outline-offset: 2px;
}

.klx-account-menu {
  min-width: 14rem;
}

.klx-account-menu .dropdown-item-text {
  max-width: 18rem;
}

.klx-navbar .nav-link {
  color: var(--klx-ink-600) !important;
  font-weight: 600;
  padding: 0.5rem 0.85rem !important;
  border-radius: 999px;
  transition: background 0.15s ease, color 0.15s ease;
}
.klx-navbar .nav-link:hover { color: var(--klx-blue-600) !important; background: var(--klx-blue-50); }
.klx-navbar .nav-link.active { color: var(--klx-blue-600) !important; background: var(--klx-blue-50); }

/* ---------- hero ---------- */

.klx-hero {
  background: var(--klx-gradient-hero);
  border-radius: 0 0 32px 32px;
  color: #fff;
  padding: 3.5rem 1.5rem 4.5rem;
  margin-bottom: -2.5rem;
  position: relative;
  overflow: hidden;
}
/* The homepage hero sits flush against the navbar. */
main[role="main"] > .klx-hero:first-child { margin-top: calc(-1 * var(--klx-content-top)); }
.klx-hero::before, .klx-hero::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
}
.klx-hero::before { width: 320px; height: 320px; top: -140px; right: -80px; }
.klx-hero::after { width: 220px; height: 220px; bottom: -120px; left: 8%; background: rgba(255, 154, 82, 0.18); }
.klx-hero .container { position: relative; z-index: 1; }

.klx-hero h1 { color: #fff; font-size: clamp(2rem, 4vw, 2.9rem); }
.klx-hero p.lead { color: rgba(255, 255, 255, 0.88); }

.klx-search-card {
  background: var(--klx-surface-alt);
  border-radius: var(--klx-radius-lg);
  box-shadow: var(--klx-shadow-lg);
  padding: 0.75rem;
  position: relative;
  z-index: 2;
}
.klx-search-card .form-control {
  border: none;
  font-size: 1.05rem;
  padding-block: 0.75rem;
}
.klx-search-card .form-control:focus { box-shadow: none; }

.klx-category-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  padding: 0.35rem 0.9rem;
  font-size: 0.85rem;
  font-weight: 600;
  transition: background 0.15s ease;
}
.klx-category-pill:hover { background: rgba(255, 255, 255, 0.28); color: #fff; }

/* ---------- filter chips (browse page) ---------- */

.klx-filter-bar {
  background: var(--klx-surface-alt);
  border: 1px solid var(--klx-line);
  border-radius: var(--klx-radius);
  box-shadow: var(--klx-shadow-sm);
  padding: 1.1rem 1.25rem;
}

.klx-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  border: 1px solid var(--klx-line-strong);
  background: var(--klx-surface-alt);
  color: var(--klx-ink-600);
  border-radius: 999px;
  padding: 0.35rem 0.85rem;
  font-size: 0.85rem;
  font-weight: 600;
  transition: all 0.15s ease;
}
.klx-chip:hover { border-color: var(--klx-blue-400); color: var(--klx-blue-600); }
.klx-chip.active {
  background: var(--klx-gradient-hero);
  border-color: transparent;
  color: #fff;
}

/* ---------- role chips (admin user management) ---------- */

.klx-role-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border: none;
  border-radius: 999px;
  padding: 0.3rem 0.7rem;
  font-size: 0.78rem;
  font-weight: 700;
  background: var(--klx-purple-100);
  color: var(--klx-purple-700);
  transition: background 0.15s ease, color 0.15s ease;
}
.klx-role-chip:hover { background: #fbdcdc; color: #b42318; }
.klx-role-chip-add {
  display: inline-flex;
  align-items: center;
  border: 1px dashed var(--klx-line-strong);
  border-radius: 999px;
  padding: 0.3rem 0.7rem;
  font-size: 0.78rem;
  font-weight: 600;
  background: transparent;
  color: var(--klx-ink-400);
  transition: all 0.15s ease;
}
.klx-role-chip-add:hover { border-color: var(--klx-blue-400); color: var(--klx-blue-600); }

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

.card {
  border: 1px solid var(--klx-line);
  border-radius: var(--klx-radius);
  box-shadow: var(--klx-shadow-sm);
}

.klx-class-card {
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.klx-class-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--klx-shadow-lg);
  border-color: var(--klx-blue-100);
}

/* 16:9, the shape class images are stored in, so a photo shows whole; covers without one match. */
.klx-card-cover {
  aspect-ratio: 16 / 9;
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 0.75rem;
  background-size: cover;
  background-position: center;
  color: #fff;
}
/* An uploaded class image fills the cover; a dark fade along the bottom keeps the white labels readable. */
.klx-card-cover-photo { overflow: hidden; }
.klx-card-cover-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.klx-card-cover-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(16, 19, 31, 0.7) 0%, rgba(16, 19, 31, 0.15) 55%, rgba(16, 19, 31, 0) 100%);
}
.klx-card-cover-photo > span { position: relative; z-index: 1; }
.klx-card-cover-photo > .klx-featured-badge { position: absolute; z-index: 1; }
/* The class page's image: 16:9 on narrow screens, but never taller than a banner, so the class
   details stay in view; wider screens see a center crop. */
.klx-class-image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  max-height: 20rem;
  object-fit: cover;
  object-position: center;
  border-radius: var(--klx-radius);
}
/* The venue map beside the class details (below them on narrow screens). */
.klx-class-map { height: 12rem; }
.klx-class-image-preview {
  display: block;
  width: 100%;
  max-width: 480px;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--klx-radius-sm);
  border: 1px solid var(--klx-line);
}
.klx-cover-1 { background-image: linear-gradient(135deg, #3b5bfb 0%, #7c3aed 100%); }
.klx-cover-2 { background-image: linear-gradient(135deg, #7c3aed 0%, #fb7a2e 100%); }
.klx-cover-3 { background-image: linear-gradient(135deg, #2f46e0 0%, #6182ff 60%, #9a6bf0 100%); }
.klx-cover-4 { background-image: linear-gradient(135deg, #5b21b6 0%, #3b5bfb 100%); }
.klx-cover-5 { background-image: linear-gradient(135deg, #fb7a2e 0%, #7c3aed 100%); }
.klx-card-cover .klx-cover-label {
  font-weight: 800;
  font-size: 1.05rem;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  max-width: 75%;
}
.klx-card-cover .klx-mode-badge {
  background: rgba(16, 19, 31, 0.45);
  backdrop-filter: blur(4px);
  border-radius: 999px;
  padding: 0.25rem 0.6rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.klx-card-cover .klx-featured-badge {
  position: absolute;
  top: 0.65rem;
  left: 0.65rem;
  background: var(--klx-gradient-accent);
  border-radius: 999px;
  padding: 0.25rem 0.7rem;
  font-size: 0.72rem;
  font-weight: 700;
}
.klx-card-cover-icon {
  position: absolute;
  top: 0.9rem;
  right: 0.9rem;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
}

/* "You're booked" on a class card: Bootstrap's success pair, dark green on pale green (well over 4.5:1). */
.klx-booked-badge {
  align-self: flex-start;
  margin-bottom: 0.5rem;
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  background: var(--bs-success-bg-subtle);
  color: var(--bs-success-text-emphasis);
  font-size: 0.8rem;
  font-weight: 700;
}

/* The class page's "You're booked" line: a standing note (not a success alert, which fades). */
.klx-booked-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  margin-bottom: 1rem;
  padding: 0.75rem 1rem;
  border-radius: var(--klx-radius-sm);
  background: var(--bs-success-bg-subtle);
  color: var(--bs-success-text-emphasis);
}
.klx-booked-banner a { color: var(--bs-success-text-emphasis); font-weight: 700; text-decoration: underline; }

.klx-price-tag {
  font-weight: 800;
  color: var(--klx-ink-900);
}
.klx-price-tag small { font-weight: 600; color: var(--klx-ink-400); }

/* ---------- badges / pills ---------- */

.badge { font-weight: 600; border-radius: 999px; padding: 0.4em 0.75em; }
.badge.bg-light { background: var(--klx-blue-50) !important; color: var(--klx-blue-700) !important; }
.badge.bg-warning { background: var(--klx-orange-100) !important; color: var(--klx-orange-600) !important; }
.badge.bg-purple { background: var(--klx-purple-100) !important; color: var(--klx-purple-700) !important; }
.badge.bg-primary { background: var(--klx-blue-500) !important; }

.klx-rating { color: var(--klx-orange-500); font-weight: 700; }

/* ---------- forms ---------- */

.form-control, .form-select {
  border-radius: var(--klx-radius-sm);
  border-color: var(--klx-line-strong);
  padding-block: 0.55rem;
}
.form-control:focus, .form-select:focus {
  border-color: var(--klx-blue-400);
}
.input-group .form-control { border-radius: var(--klx-radius-sm); }
.input-group-text { border-color: var(--klx-line-strong); background: var(--klx-surface); color: var(--klx-ink-600); }
/* iOS zooms into any field whose text is under 16px, and phones use a 14px root size. */
@media (max-width: 767.98px) {
  .form-control, .form-select, .input-group-text { font-size: 16px; }
}

/* ---------- sections ---------- */

.klx-section-title {
  position: relative;
  padding-left: 1rem;
  margin-bottom: 1rem;
}
.klx-section-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.2em;
  bottom: 0.2em;
  width: 5px;
  border-radius: 999px;
  background: var(--klx-gradient-hero);
}

.klx-feature-card {
  border: 1px solid var(--klx-line);
  border-radius: var(--klx-radius);
  background: var(--klx-surface-alt);
  padding: 1.5rem;
  height: 100%;
}
.klx-feature-icon {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  color: #fff;
  margin-bottom: 0.9rem;
}

/* ---------- tables ---------- */

.table thead th {
  background: var(--klx-blue-50);
  color: var(--klx-blue-700);
  font-weight: 700;
  border-bottom: none;
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.03em;
}
.table.klx-table { border-radius: var(--klx-radius); overflow: hidden; border: 1px solid var(--klx-line); }
.table.klx-table td, .table.klx-table th { border-color: var(--klx-line); vertical-align: middle; }

/* ---------- alerts ---------- */

.alert { border: none; border-radius: var(--klx-radius-sm); }
.alert-info { background: var(--klx-blue-50); color: var(--klx-blue-700); }
.alert-warning { background: var(--klx-orange-50); color: var(--klx-orange-600); }
.alert-light { background: var(--klx-surface); color: var(--klx-ink-600); }

/* ---------- footer ---------- */

footer.klx-footer {
  background: var(--klx-ink-900);
  color: rgba(255, 255, 255, 0.65);
  margin-top: 4rem;
  padding: 2.5rem 0;
}
footer.klx-footer a { color: rgba(255, 255, 255, 0.85); }
footer.klx-footer a:hover { color: var(--klx-orange-400); }
footer.klx-footer .klx-brand { color: #fff !important; }

/* ---------- misc ---------- */

.klx-empty-state {
  text-align: center;
  padding: 3rem 1.5rem;
  border: 1px dashed var(--klx-line-strong);
  border-radius: var(--klx-radius);
  background: var(--klx-surface-alt);
  color: var(--klx-ink-600);
}

.breadcrumb { background: transparent; padding: 0; margin-bottom: 1rem; }

.klx-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--klx-gradient-cool);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  flex-shrink: 0;
}

/* ---------- instructor workspace (classes) ---------- */

/* Title on the left, actions on the right; on phones the actions drop below at full width. */
.klx-page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  margin-bottom: 1.25rem;
}
.klx-page-head > :first-child { min-width: 0; flex: 1 1 16rem; }
.klx-page-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.klx-form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; }
@media (max-width: 575.98px) {
  .klx-page-actions { width: 100%; }
  .klx-page-actions > .btn, .klx-page-actions > form { flex: 1 1 0; }
  .klx-page-actions .btn, .klx-form-actions > .btn { width: 100%; }
  .klx-form-actions > .btn { flex: 1 1 100%; }
}

/* Wrapping chips: tool links on the dashboard, jump links on a class. */
.klx-tool-nav { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.5rem; }
.klx-tool-nav .klx-chip { padding: 0.45rem 0.95rem; }

.klx-narrow { max-width: 760px; }

/* Jump-link targets clear the sticky navbar. */
.klx-anchor { scroll-margin-top: 5rem; }

/* Whole-row links (class list). */
.klx-list-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  background: var(--klx-surface-alt);
  border: 1px solid var(--klx-line);
  border-radius: var(--klx-radius);
  box-shadow: var(--klx-shadow-sm);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.klx-list-card + .klx-list-card { margin-top: 0.75rem; }
.klx-list-card:hover, .klx-list-card:focus-within { border-color: var(--klx-blue-400); box-shadow: var(--klx-shadow); }
.klx-list-card-body { flex: 1 1 auto; min-width: 0; }
.klx-list-card-title { display: block; font-weight: 700; color: var(--klx-ink-900); margin-bottom: 0.35rem; }
.klx-list-card-title:hover { color: var(--klx-blue-600); }
.klx-list-card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.75rem;
  color: var(--klx-ink-600);
  font-size: 0.875rem;
}
.klx-list-card-chevron {
  flex-shrink: 0;
  width: 0.6rem;
  height: 0.6rem;
  border-right: 2px solid var(--klx-ink-400);
  border-top: 2px solid var(--klx-ink-400);
  transform: rotate(45deg);
}

.klx-meta-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  list-style: none;
  padding: 0;
  color: var(--klx-ink-600);
  font-size: 0.875rem;
}

.klx-capacity-bar { height: 6px; border-radius: 999px; background: var(--klx-line); overflow: hidden; }
.klx-capacity-bar > span { display: block; height: 100%; border-radius: inherit; background: var(--klx-gradient-cool); }

.klx-setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--klx-radius-sm);
  background: var(--klx-surface);
}

.klx-session-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--klx-line);
}
.klx-inline-panel { padding: 0.75rem; border-radius: var(--klx-radius-sm); background: var(--klx-surface); }
@media (max-width: 575.98px) {
  /* Bigger touch targets: Roster and Reschedule share a row, Cancel gets its own. */
  .klx-session-actions > .btn { flex: 1 1 0; }
  .klx-session-actions > form { flex: 1 1 100%; }
  .klx-session-actions .btn, .klx-setting-row .btn { padding-block: 0.5rem; }
  .klx-session-actions form .btn { width: 100%; }
}

.klx-disclosure {
  border: 1px solid var(--klx-line);
  border-radius: var(--klx-radius);
  background: var(--klx-surface-alt);
  padding: 0.25rem 1rem;
}
.klx-disclosure > summary { padding: 0.65rem 0; font-weight: 600; color: var(--klx-ink-800); cursor: pointer; }
.klx-disclosure[open] > summary { border-bottom: 1px solid var(--klx-line); }
.klx-compact-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 0;
}
.klx-compact-row + .klx-compact-row { border-top: 1px solid var(--klx-line); }
.klx-compact-row > :first-child { min-width: 0; }

/* ---------- check-in tickets (bookings, confirmation) ---------- */

.klx-ticket-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; }
.klx-ticket { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 1rem 0 0.5rem; }
/* Always dark-on-white with a margin, whatever the theme, so scanners read it. */
.klx-ticket-qr {
  width: min(220px, 100%);
  height: auto;
  margin-bottom: 0.75rem;
  padding: 0.5rem;
  background: #fff;
  border: 1px solid var(--klx-line);
  border-radius: var(--klx-radius-sm);
}
.klx-ticket code { font-size: 0.8rem; color: var(--klx-ink-600); }
/* Apple's badge at 44px tall (its artwork is 35px): an easy tap target, aspect ratio kept. */
.klx-wallet-badge { display: inline-block; margin-top: 1rem; border-radius: 8px; line-height: 0; }
.klx-wallet-badge img { height: 44px; width: auto; }
.klx-wallet-badge:focus-visible { outline: 3px solid var(--klx-blue-400); outline-offset: 3px; }

/* ---------- check-in scanner (roster) ---------- */

.klx-scanner { position: relative; overflow: hidden; border-radius: var(--klx-radius); background: #000; aspect-ratio: 1; max-width: 420px; }
.klx-scanner video { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Viewfinder: a square outline that shows where to hold the code. */
.klx-scanner::after {
  content: "";
  position: absolute;
  inset: 18%;
  border: 3px solid rgba(255, 255, 255, 0.85);
  border-radius: var(--klx-radius);
  box-shadow: 0 0 0 999px rgba(0, 0, 0, 0.35);
  pointer-events: none;
}
.klx-scan-result { min-height: 3.25rem; }
.klx-roster-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
}
.klx-roster-row + .klx-roster-row { border-top: 1px solid var(--klx-line); }
.klx-roster-row > :first-child { min-width: 0; }
.klx-roster-row .badge { margin-top: 0.25rem; }

/* ---------- platform admin ---------- */

.klx-admin-sidebar { position: sticky; top: 5rem; }
.klx-admin-sidebar-card {
  background: var(--klx-surface-alt);
  border: 1px solid var(--klx-line);
  border-radius: var(--klx-radius);
  box-shadow: var(--klx-shadow-sm);
  padding: 1rem 0.75rem;
}
.klx-admin-sidebar-title {
  font-weight: 800;
  color: var(--klx-ink-900);
  padding: 0 0.5rem 0.5rem;
}
/* Group headings are buttons that collapse their links (site.js remembers the choice). */
.klx-admin-sidebar-group {
  width: 100%;
  margin-top: 0.75rem;
  padding: 0.45rem 0.6rem;
  border: 0;
  border-left: 3px solid var(--klx-purple-500);
  border-radius: var(--klx-radius-sm);
  background: var(--klx-purple-50);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--klx-purple-700);
  text-align: left;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.klx-admin-sidebar-group:hover { background: var(--klx-purple-100); }
.klx-admin-sidebar-group:focus-visible { outline: 3px solid var(--klx-purple-400); outline-offset: 2px; }
.klx-admin-sidebar-group + .nav { margin-top: 0.25rem; }
.klx-admin-chevron {
  margin-left: auto;
  width: 0.5rem;
  height: 0.5rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.15s ease;
}
.klx-admin-sidebar-group[aria-expanded="false"] .klx-admin-chevron { transform: rotate(-45deg); }
@media (prefers-reduced-motion: reduce) { .klx-admin-chevron { transition: none; } }
.klx-admin-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.6rem;
  border-radius: var(--klx-radius-sm);
  color: var(--klx-ink-600);
  font-weight: 500;
}
.klx-admin-link:hover { background: var(--klx-blue-50); color: var(--klx-blue-600); }
.klx-admin-link.active { background: var(--klx-blue-50); color: var(--klx-blue-600); font-weight: 700; }
.klx-admin-dot {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--klx-orange-500);
  display: inline-block;
}
.klx-admin-content { min-width: 0; }

/* Collapsing the whole menu (wide screens only; _SidebarToggle, site.js). The button sits in the
   card's top-right corner, and alone in a narrow strip at the left once the menu is collapsed. */
.klx-admin-sidebar-title { padding-right: 2.75rem; }
.klx-sidebar-toggle {
  position: absolute;
  top: 0.65rem;
  right: 0.6rem;
  z-index: 1;
  width: 2rem;
  height: 2rem;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--klx-line);
  border-radius: var(--klx-radius-sm);
  background: var(--klx-surface);
  color: var(--klx-ink-600);
}
.klx-sidebar-toggle:hover { background: var(--klx-blue-50); color: var(--klx-blue-600); }
.klx-sidebar-toggle:focus-visible { outline: 3px solid var(--klx-purple-400); outline-offset: 2px; }
.klx-sidebar-toggle-icon {
  width: 0.55rem;
  height: 0.55rem;
  margin-left: 0.2rem;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg); /* points left: collapse */
}
@media (min-width: 992px) {
  .klx-sidebar-collapsed > .klx-sidebar-aside { flex: 0 0 auto; width: auto; }
  .klx-sidebar-collapsed > .klx-admin-content { flex: 1 1 0; width: auto; max-width: none; }
  .klx-sidebar-collapsed .klx-sidebar-panel { display: none !important; }
  .klx-sidebar-collapsed .klx-sidebar-toggle {
    position: static;
    height: auto;
    min-height: 6rem;
    background: var(--klx-surface-alt);
    box-shadow: var(--klx-shadow-sm);
  }
  .klx-sidebar-collapsed .klx-sidebar-toggle-icon {
    margin-left: 0;
    margin-right: 0.2rem;
    transform: rotate(-135deg); /* points right: expand */
  }
}
.klx-metric-card .klx-metric-label { color: var(--klx-ink-400); font-size: 0.85rem; }
.klx-metric-card .klx-metric-value { font-size: 1.5rem; font-weight: 800; color: var(--klx-ink-900); }
.klx-metric-card .klx-metric-sub { color: var(--klx-ink-400); font-size: 0.8rem; }

/* ---------- account pages (log in, account settings) ---------- */

.klx-auth-card { box-shadow: var(--klx-shadow); }

.klx-settings-nav .nav-link {
  color: var(--klx-ink-600);
  border-radius: 999px;
  font-weight: 600;
  padding-inline: 1rem;
}
.klx-settings-nav .nav-link:hover { color: var(--klx-blue-600); background: var(--klx-blue-50); }
/* White on blue-500 is 5.5:1. */
.klx-settings-nav .nav-link.active { color: #fff; background: var(--klx-blue-500); }

.klx-settings-facts dt {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--klx-ink-400);
  margin-bottom: 0.15rem;
}
.klx-settings-facts dd { margin-bottom: 0; }

/* ---------- plan cards (pricing, plan picker, your plan) ---------- */

.klx-plan-card { height: 100%; }
/* The instructor's current plan: the brand border, thicker so it doesn't rely on color alone
   alongside the "Your plan" badge. */
.klx-plan-card.klx-plan-current { border: 2px solid var(--klx-blue-500); }
.klx-plan-features { list-style: none; padding-left: 0; }
.klx-plan-features li { position: relative; padding-left: 1.5rem; margin-bottom: 0.35rem; }
.klx-plan-features li::before { position: absolute; left: 0; font-weight: 800; }
.klx-plan-feature-included::before { content: "\2713"; color: var(--bs-success-text-emphasis); }
/* ink-400 meets 4.5:1 on white. */
.klx-plan-feature-missing { color: var(--klx-ink-400); }
.klx-plan-feature-missing::before { content: "\2013"; }