/* ==========================================================================
   THE KNIGHT CLUB — Base Styles (Super Admin)
   Light-dominant cinematic SaaS shell: pale surfaces, restrained ambient
   purple/blue/pink gradient glows behind the shell, gradient-accented
   sidebar/active states, glass-inspired card option. Base surfaces stay
   light/white — the "cinematic" feel comes from accents and depth, not a
   dark background.
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--color-accent-600);
  text-decoration: none;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 var(--space-4);
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -0.01em;
  font-family: var(--font-family-display);
}

.text-muted {
  color: var(--color-text-muted);
}

/* ---- App shell: fixed sidebar + main content, with ambient background ---- */
.app-shell {
  position: relative;
  display: grid;
  grid-template-columns: var(--sidebar-width) 1fr;
  min-height: 100vh;
  isolation: isolate; /* keeps ambient glows from bleeding over focus rings etc. */
  overflow-x: clip;
}

/* Restrained ambient glows: large, soft, blurred, decorative, inert.
   pointer-events:none + negative z-index + clip on the shell keeps them
   from ever causing horizontal scroll, even on narrow phones. */
.app-shell::before,
.app-shell::after {
  content: "";
  position: fixed;
  z-index: -1;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.16;
}

.app-shell::before {
  width: 42rem;
  height: 42rem;
  top: -14rem;
  right: -12rem;
  background: var(--gradient-ambient-1);
}

.app-shell::after {
  width: 36rem;
  height: 36rem;
  bottom: -14rem;
  left: 10rem;
  background: var(--gradient-ambient-2);
}

/* Third, smaller pink glow — a pseudo-element on main-content keeps the
   shell's own ::before/::after free for the two primary glows. */
.main-content {
  position: relative;
  padding: var(--space-8);
  max-width: var(--max-width);
  margin: 0 auto;
  width: 100%;
}

.main-content::before {
  content: "";
  position: fixed;
  z-index: -1;
  pointer-events: none;
  top: 30%;
  right: 8%;
  width: 26rem;
  height: 26rem;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.12;
  background: var(--gradient-ambient-3);
}

@media (prefers-reduced-motion: no-preference) {
  .app-shell::before,
  .app-shell::after,
  .main-content::before {
    animation: ambient-drift 22s var(--ease-standard) infinite alternate;
  }
  .app-shell::after { animation-duration: 26s; animation-delay: -6s; }
  .main-content::before { animation-duration: 30s; animation-delay: -12s; }
}

@keyframes ambient-drift {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(-2.5%, 2.5%) scale(1.06); }
}

/* ---- Sidebar ----
   Solid deep-indigo gradient panel (matches reference), white/translucent
   text, icon + label nav rows, pill-shaped active/hover states. */
.sidebar {
  position: sticky;
  top: 0;
  align-self: start;        /* don't stretch to grid row height, or sticky has nothing to stick within */
  height: 100vh;            /* fallback */
  height: 100dvh;
  overflow-y: auto;         /* sidebar scrolls on its own if the menu is taller than the screen */
  overscroll-behavior: contain;
  z-index: 1;
  display: flex;
  flex-direction: column;
  background: var(--sidebar-bg);
  border-right: none;
  padding: var(--space-6) var(--space-4);
}

.sidebar .brand {
  display: flex;
  align-items: center;
  /* "The" and "Knight Club" are two flex items: a small gap reads as one
     word-space. (The old --space-3 gap made them look like separate labels.) */
  column-gap: 0.3em;
  font-family: var(--font-family-display);
  font-weight: 500;
  font-size: var(--font-size-lg);
  margin-bottom: var(--space-8);
  padding: 0 var(--space-2);
  letter-spacing: 0;
  white-space: nowrap;
  color: var(--sidebar-text);   /* "The": quiet */
}

/* Logo mark: rounded square with the brand's first letter, gradient fill. */
.sidebar .brand::before {
  content: "K";
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  margin-right: var(--space-2);   /* badge-to-text space (was part of the gap) */
  border-radius: var(--radius-md);
  background: var(--gradient-primary);
  color: var(--color-white);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0;
  box-shadow: var(--shadow-glow-sm);
}

/* "Knight Club": the emphasised part of the name. */
.sidebar .brand span {
  background: none;
  -webkit-background-clip: unset;
  background-clip: unset;
  color: var(--sidebar-text-strong);
  font-weight: 800;
  letter-spacing: -0.01em;
}

.sidebar nav {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.sidebar nav a,
.sidebar nav .nav-disabled {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-3);
  border-radius: var(--radius-md);
  color: var(--sidebar-text);
  font-weight: 500;
  font-size: var(--font-size-sm);
  margin-bottom: var(--space-1);
  transition: background var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard),
              transform var(--duration-fast) var(--ease-standard);
}

/* Icon slot before every nav label — filled per-item below via
   background-image data URIs so no HTML edits are needed on any page. */
.sidebar nav a::before,
.sidebar nav .nav-disabled::before {
  content: "";
  flex-shrink: 0;
  width: 1.125rem;
  height: 1.125rem;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0.85;
  /* default: generic dot icon, overridden per href below */
  -webkit-mask-size: contain;
  mask-size: contain;
}

.sidebar nav .nav-disabled {
  color: var(--sidebar-text-faint);
  cursor: not-allowed;
}

.sidebar nav a:hover {
  background: var(--sidebar-hover-bg);
  color: var(--sidebar-text-strong);
}

.sidebar nav a.active {
  background: var(--sidebar-active-bg);
  color: var(--sidebar-text-strong);
  font-weight: 600;
  box-shadow: inset 0 0 0 1px var(--sidebar-border);
}

.sidebar nav a.active::before,
.sidebar nav a:hover::before {
  opacity: 1;
}

.sidebar nav a:focus-visible,
.sidebar nav .nav-disabled:focus-visible {
  outline: 2px solid var(--sidebar-text-strong);
  outline-offset: 2px;
}

/* ---- Nav icons: one inline-SVG mask per module, selected by href so the
   20 identical sidebar blocks across pages never need per-page edits. ---- */
.sidebar nav a[href$="index.html"]::before {
  background: var(--sidebar-text);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9.5 12 3l9 6.5V20a1 1 0 0 1-1 1h-5v-7H9v7H4a1 1 0 0 1-1-1V9.5Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9.5 12 3l9 6.5V20a1 1 0 0 1-1 1h-5v-7H9v7H4a1 1 0 0 1-1-1V9.5Z'/%3E%3C/svg%3E");
}
.sidebar nav a[href$="courses.html"]::before {
  background: var(--sidebar-text);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19.5A2.5 2.5 0 0 1 6.5 17H20'/%3E%3Cpath d='M6.5 3H20v18H6.5A2.5 2.5 0 0 1 4 18.5v-13A2.5 2.5 0 0 1 6.5 3Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19.5A2.5 2.5 0 0 1 6.5 17H20'/%3E%3Cpath d='M6.5 3H20v18H6.5A2.5 2.5 0 0 1 4 18.5v-13A2.5 2.5 0 0 1 6.5 3Z'/%3E%3C/svg%3E");
}
.sidebar nav a[href$="categories.html"]::before {
  background: var(--sidebar-text);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1.5'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1.5'/%3E%3C/svg%3E");
}
.sidebar nav a[href$="instructors.html"]::before {
  background: var(--sidebar-text);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-1.5A3.5 3.5 0 0 0 12.5 16h-5A3.5 3.5 0 0 0 4 19.5V21'/%3E%3Ccircle cx='10' cy='8' r='3.5'/%3E%3Cpath d='M17.5 10.5a3 3 0 1 0 0-6M21 21v-1.3a3.3 3.3 0 0 0-2.4-3.18'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-1.5A3.5 3.5 0 0 0 12.5 16h-5A3.5 3.5 0 0 0 4 19.5V21'/%3E%3Ccircle cx='10' cy='8' r='3.5'/%3E%3Cpath d='M17.5 10.5a3 3 0 1 0 0-6M21 21v-1.3a3.3 3.3 0 0 0-2.4-3.18'/%3E%3C/svg%3E");
}
.sidebar nav a[href$="students.html"]::before {
  background: var(--sidebar-text);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 9 12 4 2 9l10 5 10-5Z'/%3E%3Cpath d='M6 11v5c0 1.1 2.7 2.5 6 2.5s6-1.4 6-2.5v-5'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 9 12 4 2 9l10 5 10-5Z'/%3E%3Cpath d='M6 11v5c0 1.1 2.7 2.5 6 2.5s6-1.4 6-2.5v-5'/%3E%3C/svg%3E");
}
.sidebar nav a[href$="enrollments.html"]::before {
  background: var(--sidebar-text);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 11.5 11 13.5 15.5 9'/%3E%3Crect x='3' y='4' width='18' height='17' rx='2'/%3E%3Cpath d='M3 9h18'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 11.5 11 13.5 15.5 9'/%3E%3Crect x='3' y='4' width='18' height='17' rx='2'/%3E%3Cpath d='M3 9h18'/%3E%3C/svg%3E");
}
.sidebar nav a[href$="orders.html"]::before {
  background: var(--sidebar-text);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='20' r='1.25'/%3E%3Ccircle cx='17' cy='20' r='1.25'/%3E%3Cpath d='M2.5 3h2.5l2.4 12.1A2 2 0 0 0 9.3 17H17a2 2 0 0 0 2-1.6L20.8 7H6'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='20' r='1.25'/%3E%3Ccircle cx='17' cy='20' r='1.25'/%3E%3Cpath d='M2.5 3h2.5l2.4 12.1A2 2 0 0 0 9.3 17H17a2 2 0 0 0 2-1.6L20.8 7H6'/%3E%3C/svg%3E");
}
.sidebar nav a[href$="leads.html"]::before {
  background: var(--sidebar-text);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.4 8.4 0 0 1-9 8.5 8.7 8.7 0 0 1-3.5-.7L3 21l1.8-4.8A8.4 8.4 0 0 1 4 11.5 8.5 8.5 0 1 1 21 11.5Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.4 8.4 0 0 1-9 8.5 8.7 8.7 0 0 1-3.5-.7L3 21l1.8-4.8A8.4 8.4 0 0 1 4 11.5 8.5 8.5 0 1 1 21 11.5Z'/%3E%3C/svg%3E");
}
.sidebar nav .nav-disabled::before {
  background: var(--sidebar-text-faint);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='10' width='16' height='10' rx='2'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='10' width='16' height='10' rx='2'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E");
}
.sidebar nav a[href$="coupons.html"]::before {
  background: var(--sidebar-text);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.6 12.6 13.4 19.8a2 2 0 0 1-2.8 0L3 12.2V3h9.2l8.4 8.4a2 2 0 0 1 0 2.8Z'/%3E%3Ccircle cx='7.5' cy='7.5' r='1.5'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.6 12.6 13.4 19.8a2 2 0 0 1-2.8 0L3 12.2V3h9.2l8.4 8.4a2 2 0 0 1 0 2.8Z'/%3E%3Ccircle cx='7.5' cy='7.5' r='1.5'/%3E%3C/svg%3E");
}
.sidebar nav a[href$="analytics.html"]::before {
  background: var(--sidebar-text);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19V9M11 19V4M18 19v-6'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19V9M11 19V4M18 19v-6'/%3E%3C/svg%3E");
}
.sidebar nav a[href$="membership.html"]::before {
  background: var(--sidebar-text);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 2.5 2.6 5.5 6 .8-4.3 4.2 1 6-5.3-2.9-5.3 2.9 1-6L3.4 8.8l6-.8L12 2.5Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 2.5 2.6 5.5 6 .8-4.3 4.2 1 6-5.3-2.9-5.3 2.9 1-6L3.4 8.8l6-.8L12 2.5Z'/%3E%3C/svg%3E");
}
.sidebar nav a[href$="placeholders.html"]::before {
  background: var(--sidebar-text);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Cpath d='M3 15.5 8.5 10l3.5 3.5L17 8.5l4 4'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Cpath d='M3 15.5 8.5 10l3.5 3.5L17 8.5l4 4'/%3E%3C/svg%3E");
}
.sidebar nav a[href$="settings.html"]::before {
  background: var(--sidebar-text);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 13.5a7.4 7.4 0 0 0 0-3l2-1.6-2-3.4-2.4.8a7.3 7.3 0 0 0-2.6-1.5L14 2h-4l-.4 2.5a7.3 7.3 0 0 0-2.6 1.5l-2.4-.8-2 3.4 2 1.6a7.4 7.4 0 0 0 0 3l-2 1.6 2 3.4 2.4-.8a7.3 7.3 0 0 0 2.6 1.5L10 22h4l.4-2.4a7.3 7.3 0 0 0 2.6-1.5l2.4.8 2-3.4-2-1.6Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 13.5a7.4 7.4 0 0 0 0-3l2-1.6-2-3.4-2.4.8a7.3 7.3 0 0 0-2.6-1.5L14 2h-4l-.4 2.5a7.3 7.3 0 0 0-2.6 1.5l-2.4-.8-2 3.4 2 1.6a7.4 7.4 0 0 0 0 3l-2 1.6 2 3.4 2.4-.8a7.3 7.3 0 0 0 2.6 1.5L10 22h4l.4-2.4a7.3 7.3 0 0 0 2.6-1.5l2.4.8 2-3.4-2-1.6Z'/%3E%3C/svg%3E");
}

/* ---- Topbar ---- */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-8);
  flex-wrap: wrap;
}

.topbar h1 {
  margin: 0;
}

/* ---- Card ---- */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-6);
  transition: box-shadow var(--duration-base) var(--ease-standard),
              transform var(--duration-base) var(--ease-standard);
}

/* Glass-card utility: semi-transparent white surface with soft blur, used
   tastefully (ambient shell contexts, a few featured cards) — opt-in via
   class, not the default card look. */
.glass-card {
  background: var(--color-glass-surface);
  border: 1px solid var(--color-glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  padding: var(--space-6);
}

/* Featured card: gradient surface for a handful of highlighted dashboard
   elements (opt-in via class, not applied broadly). */
.feature-card {
  background: var(--gradient-feature);
  color: var(--color-white);
  border: none;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-glow);
  padding: var(--space-6);
}

.feature-card .text-muted {
  color: var(--overlay-light-soft);
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .card:hover {
    box-shadow: var(--shadow-md);
  }
}

/* ---- Badge ---- */
.badge {
  display: inline-block;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
  font-weight: 600;
}

.badge-success {
  background: var(--color-success-bg);
  color: var(--color-success-text);
}

.badge-error {
  background: var(--color-error-bg);
  color: var(--color-error-text);
}

/* ==========================================================================
   RESPONSIVE ARCHITECTURE — single source of truth for this app's 3-tier
   system (see --bp-* tokens in tokens.css for the reference values):

     Desktop  (1025px+)        : default rules above this block
     Tablet   (641px–1024px)   : @media (max-width: 1024px)
     Mobile   (≤640px)         : @media (max-width: 640px)
     Narrow phone (≤480px)     : @media (max-width: 480px)  — sub-tier, used
                                 only for 2-up auto-fit grids (stat cards)
                                 that need one more step down than mobile

   Shell/nav/table/card behavior for every page lives HERE, not in each
   page's own stylesheet, so collapsing one component doesn't require
   touching 12 files. Page-level stylesheets should only add @media rules
   for layouts unique to that page (e.g. a page-specific filter-bar column
   count); shared primitives (.filters base grid, .table-wrap, .stat-grid,
   .detail-grid, .modal, .main-content, .app-shell, .sidebar) are governed
   from here using the same three breakpoints, so the whole app collapses
   in lockstep instead of each page breaking at a different width.
   ========================================================================== */

/* ---- Tablet (≤1024px): sidebar already collapses to a top nav here, since
   264px of fixed sidebar meaningfully crowds a portrait tablet or small
   laptop window before 768px ever hits. ---- */
@media (max-width: 1024px) {
  .app-shell {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: relative;     /* tablet/mobile: top nav scrolls away normally */
    height: auto;
    overflow-y: visible;
    align-self: stretch;
    border-right: none;
    border-bottom: 1px solid var(--color-border);
    /* THE bug behind "layout doesn't shrink on mobile": .sidebar is a CSS
       Grid item (child of .app-shell), and a grid item's default min-width
       is auto, not 0 — it refuses to shrink below its content's intrinsic
       width. Its child nav becomes a horizontal-scroll flex row below
       (flex-wrap: nowrap, 13 links, white-space: nowrap), and WITHOUT this
       min-width:0 the browser sizes .sidebar (and therefore the shared 1fr
       grid column, and therefore .main-content/the whole page) to fit all
       13 unwrapped links in one line — ~1700px — instead of the viewport.
       .main-content already had this fix (see below); .sidebar did not. */
    min-width: 0;
    /* Lets the fade overlays below sit flush against the sidebar's own
       edges instead of the nav's padded inner edge. */
    isolation: isolate;
  }

  /* One scrollable row instead of 13 links wrapping into a ~300px tall block
     that pushes the actual page content off the first screen. */
  .sidebar { padding: var(--space-3) var(--space-4); }
  .sidebar .brand { margin-bottom: var(--space-3); }
  .sidebar nav {
    position: relative;
    flex-direction: row;
    flex-wrap: nowrap;
    width: 100%;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: var(--space-1);
  }
  .sidebar nav::-webkit-scrollbar { display: none; }
  .sidebar nav a,
  .sidebar nav .nav-disabled {
    flex: 0 0 auto;
    white-space: nowrap;
    margin-bottom: 0;
    scroll-snap-align: start;
  }

  /* Without min-width:0 a flex child sizes to its content's natural width
     (here, the full unwrapped nav-link row) before flex-wrap gets a chance
     to apply, pushing the sidebar/page wider than the viewport. */
  .sidebar nav a,
  .sidebar nav .nav-disabled {
    min-width: 0;
  }

  /* Scroll affordance: with 13+ links in one unwrapped row, most of the
     nav sits off-screen to the right with nothing to signal it — no
     scrollbar (hidden above), no visible cut-off edge, nothing. A soft
     fade on each edge (overlaid on top of the nav, not part of its flex
     flow) makes it obvious there's more to swipe to.
     Base state (before JS runs its first scroll-position check): show
     only the trailing-edge fade, since the row always starts scrolled to
     its leftmost position — that's also the correct fallback if JS never
     runs. assets/js/ui.js then toggles .sidebar-nav-at-start /
     .sidebar-nav-at-end on .sidebar to keep both fades in sync with the
     real scroll position as the visitor swipes. */
  .sidebar::before,
  .sidebar::after {
    content: "";
    position: absolute;
    top: calc(var(--space-3) + 2.25rem + var(--space-3));
    bottom: var(--space-3);
    width: 1.75rem;
    pointer-events: none;
    z-index: 2;
    transition: opacity var(--duration-fast) var(--ease-standard);
  }
  /* A same-color-to-transparent fade is invisible here: the sidebar's own
     background already IS that color, so "fading to it" changes nothing
     visually. What actually needs to show through the edge is a shadow —
     a dark, semi-transparent overlay that dims the nav items as they
     approach the edge, independent of whatever the sidebar's own
     gradient looks like at that point. */
  .sidebar::before {
    left: 0;
    background: linear-gradient(to right, rgba(8, 4, 24, 0.85), transparent);
    opacity: 0;
  }
  .sidebar::after {
    right: 0;
    background: linear-gradient(to left, rgba(8, 4, 24, 0.85), transparent);
    opacity: 1;
  }
  .sidebar:not(.sidebar-nav-at-start)::before { opacity: 1; }
  .sidebar.sidebar-nav-at-end::after { opacity: 0; }

  .main-content {
    min-width: 0;
  }

  /* Generic 2-column form/filter grids used across pages get breathing room
     on tablet before collapsing fully on mobile below. Page files that need
     a different tablet column count (e.g. 3+1 filter bars) override this. */
  .form-row,
  .form-row.three {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Touch-target fix (AUDIT.md item U2/open-2): .btn-xs/.btn-sm sit below
     the ~40-44px comfortable tap size on a touch device, even though they
     read fine with a mouse on desktop. Widen the hit area with padding
     only at this tier — font-size stays the same so table density doesn't
     change, just the tappable region around each label. */
  .btn-xs,
  .btn-sm {
    min-height: 40px;
    padding-top: var(--space-2);
    padding-bottom: var(--space-2);
  }
}

/* ---- Mobile (≤640px): tightest tier — single-column everything, reduced
   shell padding, full-width controls. ---- */
@media (max-width: 640px) {
  .main-content {
    padding: var(--space-4);
  }

  /* Generic filter bars and multi-column forms collapse to one column on
     phones. Page-specific .filters variants (.filters-coupons etc.) also
     set this explicitly for clarity — the !important here is a safety-net
     default that always wins at this tier, so a page added later can never
     forget its own mobile filter rule and silently overflow. */
  .filters {
    grid-template-columns: 1fr !important;
  }

  .form-row,
  .form-row.three {
    grid-template-columns: 1fr;
  }

  .topbar {
    align-items: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .app-shell::before,
  .app-shell::after,
  .main-content::before {
    animation: none;
  }

  .card,
  .sidebar nav a {
    transition: none;
  }
}


/* ---- Accessibility: skip link (visible only when focused by keyboard) ---- */
.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -4rem;
  z-index: 1000;
  padding: var(--space-2) var(--space-4);
  background: var(--color-violet-dark);
  color: var(--color-white);
  border-radius: var(--radius-md);
  font-weight: 600;
  transition: top var(--duration-fast) var(--ease-standard);
}
.skip-link:focus { top: var(--space-3); outline: 2px solid var(--color-white); outline-offset: 2px; }
.main-content:focus { outline: none; }

/* ---- Sidebar: label for not-yet-available modules ---- */
.sidebar nav .nav-disabled::after {
  content: "Soon";
  margin-left: auto;
  padding: 0.05rem 0.5rem;
  border-radius: var(--radius-full);
  background: var(--sidebar-hover-bg);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* ---- Toast notifications (replaces native alert()) ---- */
.toast-region {
  position: fixed;
  right: var(--space-4);
  bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
  z-index: 2000;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-width: min(26rem, calc(100vw - 2rem));
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: var(--shadow-lg);
  font-size: var(--font-size-sm);
}
.toast-error { background: var(--color-error-bg); border-color: var(--color-error-border); color: var(--color-error-text-strong); }
.toast-success { background: var(--color-success-bg); border-color: var(--color-success-border); color: var(--color-success-text); }
.toast-msg { flex: 1; overflow-wrap: anywhere; }
.toast-close { background: none; border: 0; color: inherit; font-size: 1.25rem; line-height: 1; cursor: pointer; padding: 0 var(--space-1); }
.toast-close:focus-visible { outline: 2px solid var(--focus-ring-color); outline-offset: 2px; }