/* ── About Hero ── */
.about-hero {
  position: relative;
  height: 250px;
  min-height: 250px;
  background-color: #374c38;
  display: flex;
  align-items: center;
  justify-content: center;
}

.about-hero__overlay {
  text-align: center;
  padding: 0 1rem;
}

.about-hero__title {
  color: #fff;
}

/* ── Philosophy ── */
.about-philosophy {
  background-color: #374c38;
}

/* ── Classes Section ── */
.about-classes {
  background-color: #9db29f;
}

/* ── Class Card ── */
.about-class-card {
  background-color: #fff;
  border-radius: 1rem;
  padding: 2rem;
}

.about-class-card__icon {
  color: #374c38;
  margin-bottom: 1rem;
}

.about-class-card__icon img {
  width: 100px;
}

.about-class-card__title {
  color: #1a1a1a;
  margin-bottom: 0.75rem;
}

.about-class-card__desc {
  font-size: 0.875rem;
  color: #666;
  line-height: 1.7;
}

/* ── Community / Values ── */
.about-community {
  background-color: #374c38;
}

.about-value-card__icon {
  height: 3.5rem;
  width: 3.5rem;
  border-radius: 9999px;
  background-color: rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.25rem;
}

/* ── CTA Section ── */
.about-cta {
  background-color: #9db29f;
}

.about-cta__btn {
  background-color: #374c38;
}

.about-cta__btn:hover {
  background-color: #2b3c2c;
}

/* ── Location Section ── */
.about-location {
  background-color: #374c38;
}

/* ── Dark mode ── deepen the sage sections to forest green and darken the
   white cards (plus their hardcoded text) so they stay legible. Sections
   already on #374c38 (hero, philosophy, community, location) need no change. */
.dark .about-classes,
.dark .about-cta {
  background-color: #374c38;
}

.dark .about-class-card {
  background-color: #1c211c;
}

.dark .about-class-card__title {
  color: #e6ece6;
}

.dark .about-class-card__desc {
  color: #9aa89c;
}

/* The CTA button is #374c38 in light mode; once its section is forest green
   it would blend in, so switch it to sage to stay visible. */
.dark .about-cta__btn {
  background-color: #9db29f;
}

.dark .about-cta__btn:hover {
  background-color: #8aa38c;
}
/*
 * Admin layout — sidebar rail + tablet-friendly density.
 *
 * Tailwind utilities live in a cascade layer, so unlayered rules here win
 * over them regardless of order. That is intentional for the few places
 * (page title, table cell padding) where a global element rule in
 * theme.css would otherwise beat the utility classes.
 */

/* Page title in the sticky header (theme.css sets h1 to 3rem globally). */
.admin-page-title {
  font-size: 1.75rem;
  line-height: 1.2;
  margin: 0;
}
@media (min-width: 1280px) {
  .admin-page-title { font-size: 2rem; }
}

/* ---- Collapsible sidebar (desktop / tablet landscape, ≥1024px) ---- */
@media (min-width: 1024px) {
  :root {
    --admin-sidebar-width: 16rem;
  }
  html.sidebar-collapsed {
    --admin-sidebar-width: 4.5rem;
  }

  .admin-sidebar {
    width: var(--admin-sidebar-width);
  }
  .admin-main-col {
    padding-left: var(--admin-sidebar-width);
  }

  /* Icon rail: hide labels, center icons, keep tooltips via the link title. */
  html.sidebar-collapsed .admin-sidebar .admin-nav-label,
  html.sidebar-collapsed .admin-sidebar .admin-nav-heading {
    display: none;
  }
  html.sidebar-collapsed .admin-sidebar .admin-nav-link {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
  }
  html.sidebar-collapsed .admin-sidebar .admin-nav-link svg {
    height: 1.25rem;
    width: 1.25rem;
  }
  html.sidebar-collapsed .admin-sidebar .admin-sidebar-brand {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
  }
  html.sidebar-collapsed .admin-sidebar .admin-sidebar-user {
    padding-left: 0;
    padding-right: 0;
  }
  html.sidebar-collapsed .admin-sidebar .admin-sidebar-user > div {
    justify-content: center;
  }
}

/* ---- Tablet landscape density (1024–1279px, e.g. iPad) ----
   Tables keep their desktop markup but with tighter horizontal cell
   padding so seven-column lists fit without wrapping every cell. */
@media (min-width: 1024px) and (max-width: 1279.98px) {
  .admin-main :is(th, td).px-5 {
    padding-left: 0.875rem;
    padding-right: 0.875rem;
  }
}

/* Touch devices: give in-table text actions a comfortable hit area. */
@media (pointer: coarse) {
  .admin-main td .admin-row-action {
    display: inline-flex;
    align-items: center;
    min-height: 2.25rem;
    padding: 0.25rem 0.375rem;
    margin: -0.25rem -0.375rem;
    border-radius: 0.375rem;
  }
}
/* ── Weekly schedule grid (classes#index) ── */

/*
 * From 1024px up the seven columns just share whatever the container gives
 * them, so the calendar never raises a scrollbar while there is room to spare
 * (168px a column at 1280px, 131px at 1024px).
 *
 * Below that there is no room to share: seven equal columns leave ~45px each
 * on a phone, which cuts the cards down to "6..." and half a badge. So the
 * columns hold a legible minimum instead and the week scrolls sideways —
 * roughly two and a half days visible at a time, snapping day by day.
 */
.week-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.75rem;
}

@media (max-width: 1023px) {
  .week-grid {
    /*
     * 10rem leaves 134px inside the card padding: enough for the widest badge
     * ("Lugares disponibles", 127px) and the time line (104px) uncut.
     */
    grid-template-columns: repeat(7, minmax(10rem, 1fr));
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    /* Room for the card shadows the scroll box would otherwise clip. */
    padding-bottom: 0.25rem;
  }

  .week-grid__day {
    scroll-snap-align: start;
  }
}

.week-grid__day {
  min-height: 400px;
}
/* ── Events Page (Luma-inspired) ── */
.events-page {
  background-color: var(--color-muted);
  min-height: calc(100vh - 4rem);
}

/* ── Event Card ── */
.event-card {
  background: white;
  border-radius: 1rem;
  overflow: hidden;
  border: 1px solid var(--color-border);
  transition:
    box-shadow 0.2s,
    transform 0.2s;
}

.event-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.event-card--past {
  opacity: 0.6;
  pointer-events: none;
}

.event-card__inner {
  display: flex;
  flex-direction: column;
}

.event-card--horizontal .event-card__inner {
  flex-direction: row;
  align-items: center;
}

.event-card__image {
  width: 100%;
  height: 200px;
  overflow: hidden;
}

.event-card--horizontal .event-card__image {
  width: 200px;
  height: auto;
  aspect-ratio: 1 / 1;
  flex-shrink: 0;
}

@media (max-width: 640px) {
  .event-card--horizontal .event-card__inner {
    flex-direction: column;
  }

  .event-card--horizontal .event-card__image {
    width: 100%;
    height: 200px;
    aspect-ratio: auto;
  }
}

.event-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.event-card__body {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.25rem;
}

.event-card__date-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 3rem;
  padding-top: 0.125rem;
}

.event-card__date-month {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-primary);
}

.event-card__date-day {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-foreground);
}

.event-card__info {
  flex: 1;
  min-width: 0;
}

.event-card__title {
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.2;
  color: var(--color-foreground);
  margin-bottom: 0.375rem;
}

.event-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  font-size: 0.8125rem;
  color: var(--color-muted-foreground);
}

.event-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.5rem;
}

.event-card__price {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-foreground);
}

.event-card__price--free {
  color: var(--color-primary);
}

.event-card__tag {
  display: inline-flex;
  align-items: center;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--color-muted-foreground);
}

.event-card__tag--full {
  color: var(--color-destructive);
}

/* ── Event Show ── */
.event-show__container {
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  padding: 3rem 1rem;
}

@media (min-width: 640px) {
  .event-show__container {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

.event-show__layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  align-items: start;
}

@media (max-width: 768px) {
  .event-show__layout {
    grid-template-columns: 1fr;
  }
}

.event-show__left {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.event-show__cover {
  border-radius: 1rem;
  overflow: hidden;
  aspect-ratio: 1 / 1;
}

.event-show__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.event-show__right {
  display: flex;
  flex-direction: column;
}

.event-show__title {
  font-size: 2rem;
  color: var(--color-foreground);
  margin-bottom: 1.5rem;
  line-height: 1.2;
}

.event-show__details {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.event-show__detail {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.event-show__rsvp {
  padding: 1.5rem 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 2rem;
}

.event-show__description {
  padding-top: 0.5rem;
}
/* ── FAQs Hero ── */
.faqs-hero {
  position: relative;
  min-height: 250px;
  background-color: #374c38;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 0;
}

.faqs-hero__overlay {
  text-align: center;
  padding: 0 1rem;
  max-width: 600px;
}

.faqs-hero__title {
  color: #fff;
}

.faqs-hero__subtitle {
  color: rgba(255, 255, 255, 0.8);
  margin-top: 0.75rem;
  font-size: 1.0625rem;
  line-height: 1.7;
}

/* ── FAQs Content ── */
.faqs-content {
  background-color: #9db29f;
}

/* ── Container ── */
.faqs-container {
  background-color: #fff;
  border-radius: 1rem;
  padding: 2.5rem 2rem;
}

@media (min-width: 640px) {
  .faqs-container {
    padding: 3rem 3rem;
  }
}

/* ── Policy Sections ── */
.faqs-policy-section {
  padding-bottom: 2.5rem;
  margin-bottom: 2.5rem;
  border-bottom: 1px solid rgba(55, 76, 56, 0.15);
}

.faqs-policy-section--last {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.faqs-policy-title {
  color: #374c38;
  font-size: 1.75rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.faqs-policy-text {
  font-size: 0.9375rem;
  color: #1a1a1a;
  line-height: 1.8;
  margin-bottom: 0.75rem;
}

.faqs-policy-text:last-child {
  margin-bottom: 0;
}

.faqs-policy-text strong {
  font-weight: 600;
}

/* ── Dark mode ── deepen the sage content background to forest green and
   darken the white policy container (plus its hardcoded text and divider).
   The hero is already #374c38, so it needs no override. */
.dark .faqs-content {
  background-color: #374c38;
}

.dark .faqs-container {
  background-color: #1c211c;
}

.dark .faqs-policy-section {
  border-bottom-color: rgba(230, 236, 230, 0.12);
}

.dark .faqs-policy-title {
  color: #9db29f;
}

.dark .faqs-policy-text {
  color: #e6ece6;
}
@font-face {
  font-family: "Monigue";
  src: url(/assets/Monigue-e0521f2cd2e1c30712b7bc8e832a33130cadfe1d8ff7a133a625e0db7619615c.otf) format("opentype");
  font-display: swap;
}

@font-face {
  font-family: "NOIRetBLANC";
  src: url(/assets/NOIRetBLANC_Med_Italic-880613eba9dd9dfbbe5744378654029f1c53550c3994b8d5f782379a640a2e0c.otf) format("opentype");
  font-style: italic;
  font-weight: 500;
  font-display: swap;
}
/* ── Hero Section ── */
.home-hero {
  position: relative;
  height: 85vh;
  min-height: 500px;
  background: #000;
  overflow: hidden;
}

.home-hero__video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%);
  object-fit: cover;
}

.home-hero__content {
  position: absolute;
  bottom: -6rem;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 600px;
  padding: 0 1rem;
}



.home-hero__card {
  background-color: #374c38;
  border-radius: 1rem;
  padding: 3rem 1.25rem;
  text-align: center;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.home-hero__logo {
  height: 3.5rem;
  width: 3.5rem;
  margin: 0 auto 1.5rem;
  border-radius: 0.5rem;
  object-fit: contain;
}

.home-hero__title {
  font-size: 2.75rem;
  font-weight: 300;
  color: #fff;
}

@media (max-width: 768px) {
  .home-hero__title {
    font-size: 1.75rem;
  }
}

.home-hero__cta-wrapper {
  margin-top: 2rem;
}

.home-hero__cta {
  display: inline-flex;
  align-items: center;
  padding: 0.75rem 1.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: #fff;
  background-color: #9db29f;
  border-radius: 0.5rem;
  text-decoration: none;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.home-hero__cta-icon {
  margin-left: 0.5rem;
  height: 1rem;
  width: 1rem;
}

/* ── Today's Classes ── */
.home-classes {
  background-color: #9db29f;
  padding-top: 11rem;
}

.home-class-card {
  background-color: #fff;
  padding: 2.5rem;
}

.home-class-card__title {
  font-size: 1.125rem;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 0.25rem;
}

.home-class-card__teacher {
  font-size: 0.875rem;
  color: #666;
  margin-bottom: 1rem;
}

.home-class-card__time {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: #666;
  margin-bottom: 1.25rem;
}

.home-class-card__time-icon {
  height: 1rem;
  width: 1rem;
}

.home-class-card__book-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0.625rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #fff;
  background-color: #9db29f;
  border-radius: 0.5rem;
  text-decoration: none;
  transition: opacity 0.2s;
}

/* ── Community Quote ── */
.home-quote {
  background-color: #9db29f;
}

.home-quote__text {
  font-family: "Monigue", sans-serif;
  font-size: 4rem;
}

/* ── Feature Cards ── */
.home-features {
  background-color: #9db29f;
}

.home-feature-card {
  background-color: rgba(255, 255, 255, 0.1);
  padding: 3rem;
}

.home-feature-icon {
  background-color: rgba(255, 255, 255, 0.15);
}

/* ── Pricing Section ── */
.home-pricing {
  background-color: #9db29f;
}

.home-pricing__sidebar {
  background-color: rgba(255, 255, 255, 0.1);
  padding: 2rem;
}

.home-pricing__popular-badge {
  background-color: #374c38;
}

.home-pricing__btn--popular {
  background-color: #374c38;
}

/* ── CTA Section ── */
.home-cta__image {
  min-height: 450px;
  background-image: url(/assets/IMG_7254-50a7ebaa242c90670f0842aa410b31fe7a988503ebfd4f905ed52b13eaf749f5.jpg);
  background-size: cover;
  background-position: center;
}

.home-cta__content {
  background-color: #374c38;
  padding-left: 2rem;
}

.home-cta__btn {
  background-color: #9db29f;
}

/* ── Dark mode ── deepen the sage section backgrounds to forest green so the
   landing page reads as dark, and darken the solid white cards that sit on
   them (plus their hardcoded text) to stay legible. */
.dark .home-classes,
.dark .home-quote,
.dark .home-features,
.dark .home-pricing {
  background-color: #374c38;
}

.dark .home-class-card {
  background-color: #1c211c;
}

.dark .home-class-card__title {
  color: #e6ece6;
}

.dark .home-class-card__teacher,
.dark .home-class-card__time {
  color: #9aa89c;
}
/* ── Teachers Hero ── */
.teachers-hero {
  position: relative;
  height: 250px;
  min-height: 320px;
  background-color: #374c38;
  display: flex;
  align-items: center;
  justify-content: center;
}

.teachers-hero__overlay {
  text-align: center;
  padding: 0 1rem;
}

.teachers-hero__title {
  color: #fff;
}

/* ── Teachers Grid ── */
.teachers-grid {
  background-color: #9db29f;
}

/* ── Teacher Card ── */
.teacher-card {
  background-color: #fff;
  border-radius: 1rem;
  overflow: hidden;
}

.teacher-card__photo-wrapper {
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.teacher-card__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.teacher-card__photo-placeholder {
  width: 100%;
  height: 100%;
  background-color: #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.teacher-card__photo-placeholder span {
  font-size: 2.5rem;
  font-weight: 600;
  color: #94a3b8;
}

.teacher-card__info {
  padding: 1.5rem;
}

.teacher-card__name {
  color: #1a1a1a;
  margin-bottom: 0.25rem;
}

.teacher-card__styles {
  font-size: 0.875rem;
  color: #9db29f;
  font-weight: 500;
  margin-bottom: 0.75rem;
}

.teacher-card__bio {
  font-size: 0.875rem;
  color: #666;
  line-height: 1.6;
}

.teacher-card__bio p + p {
  margin-top: 0.75rem;
}

/* ── Dark mode ── deepen the sage grid background to forest green and darken
   the white teacher cards (plus their hardcoded text) so they stay legible.
   The hero is already #374c38, so it needs no override. */
.dark .teachers-grid {
  background-color: #374c38;
}

.dark .teacher-card {
  background-color: #1c211c;
}

.dark .teacher-card__name {
  color: #e6ece6;
}

.dark .teacher-card__bio {
  color: #9aa89c;
}

.dark .teacher-card__photo-placeholder {
  background-color: #2c332c;
}
:root {
  /* Base colors — override per client */
  --color-primary: #374C38;
  --color-primary-foreground: #ffffff;
  --color-primary-hover: #2B3C2C;
  --color-secondary: #EDF2ED;
  --color-secondary-foreground: #1e293b;
  --color-accent: #9DB29F;
  --color-accent-foreground: #1e293b;
  --color-background: #ffffff;
  --color-foreground: #0f172a;
  --color-muted: #f8fafc;
  --color-muted-foreground: #64748b;
  --color-border: #e2e8f0;
  --color-destructive: #ef4444;
  --color-destructive-foreground: #ffffff;
  --color-success: #10b981;
  --color-success-foreground: #ffffff;
  --color-warning: #f59e0b;
  --color-warning-foreground: #ffffff;
  --color-card: #ffffff;
  --color-card-foreground: #0f172a;
  --color-sidebar: #f8fafc;
  --color-sidebar-foreground: #334155;

  /* Typography */
  --font-sans: "Inter", system-ui, -apple-system, sans-serif;
  --font-heading: "Monigue", var(--font-sans);
  --font-display-alt: "NOIRetBLANC", var(--font-sans);

  /* Spacing & Radius */
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 100;
}

h1 { font-size: 3rem; }
h2 { font-size: 2.25rem; }
h3 { font-size: 1.875rem; }
h4 { font-size: 1.5rem; }
h5 { font-size: 1.25rem; }
h6 { font-size: 1rem; }

/* Dark mode — applied when <html> has the `dark` class. Green-tinted to match
   the brand palette: lighter sage greens read as accents on the dark surfaces. */
.dark {
  --color-primary: #7CA67E;
  --color-primary-foreground: #14180F;
  --color-primary-hover: #8DB78F;
  --color-secondary: #232A23;
  --color-secondary-foreground: #E6ECE6;
  --color-accent: #9DB29F;
  --color-accent-foreground: #14180F;
  --color-background: #141814;
  --color-foreground: #E6ECE6;
  --color-muted: #1E241E;
  --color-muted-foreground: #9AA89C;
  --color-border: #2C332C;
  --color-destructive: #E06B5C;
  --color-destructive-foreground: #14180F;
  --color-success: #6FB58A;
  --color-success-foreground: #14180F;
  --color-warning: #D8B05A;
  --color-warning-foreground: #14180F;
  --color-card: #1C211C;
  --color-card-foreground: #E6ECE6;
  --color-sidebar: #1C211C;
  --color-sidebar-foreground: #E6ECE6;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -2px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.55), 0 4px 6px -4px rgba(0, 0, 0, 0.4);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.6), 0 8px 10px -6px rgba(0, 0, 0, 0.5);
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */

/* Smooth color transitions when toggling dark mode */
html {
  color-scheme: light;
}
html.dark {
  color-scheme: dark;
}

/*
 * Dark-mode compatibility layer for Tailwind utility classes that don't yet
 * use theme variables. Always-dark surfaces (e.g. a pinned footer) are scoped
 * out via :not([data-theme-static]).
 */
.dark .bg-white:not([data-theme-static]) { background-color: var(--color-card); }
.dark .bg-white\/80:not([data-theme-static]) { background-color: color-mix(in srgb, var(--color-card) 80%, transparent); }
.dark .bg-gray-50:not([data-theme-static]),
.dark .bg-slate-50:not([data-theme-static]) { background-color: var(--color-muted); }
.dark .bg-gray-100:not([data-theme-static]),
.dark .bg-slate-100:not([data-theme-static]) { background-color: var(--color-muted); }

.dark .text-gray-900:not([data-theme-static]),
.dark .text-slate-900:not([data-theme-static]) { color: var(--color-foreground); }
.dark .text-gray-800:not([data-theme-static]),
.dark .text-slate-800:not([data-theme-static]) { color: var(--color-foreground); }
.dark .text-gray-700:not([data-theme-static]),
.dark .text-slate-700:not([data-theme-static]) { color: var(--color-foreground); }
.dark .text-gray-600:not([data-theme-static]),
.dark .text-slate-600:not([data-theme-static]) { color: var(--color-muted-foreground); }
.dark .text-gray-500:not([data-theme-static]),
.dark .text-slate-500:not([data-theme-static]) { color: var(--color-muted-foreground); }
.dark .text-gray-400:not([data-theme-static]),
.dark .text-slate-400:not([data-theme-static]) { color: var(--color-muted-foreground); }

.dark .border-gray-200:not([data-theme-static]),
.dark .border-slate-200:not([data-theme-static]) { border-color: var(--color-border); }
.dark .border-gray-300:not([data-theme-static]),
.dark .border-slate-300:not([data-theme-static]) { border-color: var(--color-border); }

/* Calendar view toggle buttons */
.active-view {
  background-color: var(--color-primary);
  color: var(--color-primary-foreground);
}

.active-view:hover {
  opacity: 0.9;
}

.inactive-view {
  border: 1px solid var(--color-border);
  background-color: transparent;
  color: var(--color-foreground);
}

.inactive-view:hover {
  background-color: var(--color-secondary);
}

/* Pagy pagination */
.pagy.series-nav {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.pagy.series-nav > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  height: 2rem;
  padding: 0 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: var(--radius-md, 0.5rem);
  color: var(--color-foreground);
  text-decoration: none;
  transition: background-color 0.15s, color 0.15s;
}

.pagy.series-nav > a:hover:not([aria-disabled="true"]) {
  background-color: var(--color-muted);
}

.pagy.series-nav > a[aria-current="page"] {
  background-color: var(--color-primary);
  color: var(--color-primary-foreground);
}

.pagy.series-nav > a[aria-disabled="true"]:not([aria-current="page"]) {
  color: var(--color-muted-foreground);
  cursor: default;
  opacity: 0.5;
}

.pagy.series-nav > a[role="separator"] {
  opacity: 1;
  letter-spacing: 0.1em;
}

.pagy.series-nav > a[aria-label="Previous"],
.pagy.series-nav > a[aria-label="Next"] {
  font-size: 0;
  overflow: hidden;
}

.pagy.series-nav > a[aria-label="Previous"]::before,
.pagy.series-nav > a[aria-label="Next"]::before {
  content: "";
  display: block;
  width: 1rem;
  height: 1rem;
  background-color: currentColor;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

.pagy.series-nav > a[aria-label="Previous"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M15 19l-7-7 7-7'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M15 19l-7-7 7-7'/%3E%3C/svg%3E");
}

.pagy.series-nav > a[aria-label="Next"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 5l7 7-7 7'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 5l7 7-7 7'/%3E%3C/svg%3E");
}