label.kt-form-label.kt-required::after {
  content: "*";
  color: red;
  font-weight: bold;
}

/* Ensure date picker popup appears above modal backdrop */
[data-vc=calendar][data-vc-input] {
  z-index: 9999;
}

/* ── Flatpickr – design-system theme (light + dark) ──────────────────── */
.flatpickr-calendar,
.flatpickr-calendar.open,
.flatpickr-innerContainer,
.flatpickr-rContainer {
  font-family: Inter, sans-serif;
  font-size: var(--text-sm);
  background: var(--background) !important;
  color: var(--foreground);
}

.flatpickr-current-month,
.flatpickr-current-month input.cur-year,
.flatpickr-current-month .flatpickr-monthDropdown-months {
  font-size: var(--text-sm) !important;
}

span.flatpickr-weekday {
  font-size: var(--text-xs) !important;
}

.flatpickr-day {
  font-size: var(--text-xs) !important;
  line-height: 2rem;
  height: 2rem;
}

.flatpickr-calendar {
  border: 1px solid var(--border) !important;
  border-radius: 0.5rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.flatpickr-calendar.arrowTop::before { border-bottom-color: var(--border) !important; }
.flatpickr-calendar.arrowTop::after  { border-bottom-color: var(--background) !important; }
.flatpickr-calendar.arrowBottom::before { border-top-color: var(--border) !important; }
.flatpickr-calendar.arrowBottom::after  { border-top-color: var(--background) !important; }

.flatpickr-months,
.flatpickr-months .flatpickr-month,
.flatpickr-current-month,
.flatpickr-current-month input.cur-year {
  background: var(--background) !important;
  color: var(--foreground) !important;
  fill: var(--foreground) !important;
}

.flatpickr-current-month .flatpickr-monthDropdown-months {
  background: var(--background);
  color: var(--foreground);
}

.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg {
  fill: var(--muted-foreground) !important;
}
.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg {
  fill: var(--foreground) !important;
}

.flatpickr-weekdays,
.flatpickr-weekwrapper .flatpickr-weekday,
span.flatpickr-weekday {
  background: var(--background) !important;
  color: var(--muted-foreground) !important;
  font-weight: 600;
}

.flatpickr-days,
.dayContainer {
  background: var(--background) !important;
  border-color: var(--border) !important;
}

.flatpickr-day {
  color: var(--foreground);
  border-color: transparent;
  border-radius: 0.375rem;
}
.flatpickr-day:hover,
.flatpickr-day:focus {
  background: var(--muted) !important;
  border-color: var(--muted) !important;
  color: var(--foreground);
}
.flatpickr-day.today {
  border-color: var(--primary) !important;
}
.flatpickr-day.today:hover {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: var(--primary-foreground) !important;
}
.flatpickr-day.selected,
.flatpickr-day.selected:hover {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: var(--primary-foreground) !important;
}
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
  color: var(--muted-foreground) !important;
  opacity: 0.4;
}

.numInputWrapper span {
  border-color: var(--border) !important;
}
.numInputWrapper span svg path {
  fill: var(--muted-foreground) !important;
}
.numInputWrapper:hover {
  background: var(--muted) !important;
}

/* ── Mobile Sidebar ─────────────────────────────────────────────────── */
@media (max-width: 1023px) {
  .kt-sidebar-mobile {
    display: flex !important;
    transform: translateX(-100%) !important;
    translate: none !important;
    transition: transform 0.3s ease !important;
    width: 280px !important;
    z-index: 9999 !important;
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    height: 100vh !important;
  }

  body.kt-sidebar-open .kt-sidebar-mobile {
    transform: translateX(0) !important;
  }

  .kt-wrapper {
    padding-left: 0 !important;
  }
}

/* ── Sidebar backdrop (mobile overlay) ──────────────────────────────── */
#sidebar_backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9998;
  cursor: pointer;
}

@media (max-width: 1023px) {
  body.kt-sidebar-open #sidebar_backdrop {
    display: block;
  }
}

/* ── Sidebar toggle icon visibility ─────────────────────────────────── */
@media (max-width: 1023px) {
  #sidebar_toggle {
    display: none !important;
  }
}

@media (min-width: 1024px) {
  #sidebar_toggle_mobile {
    display: none !important;
  }

  #mobile-menu-container {
    display: none !important;
  }
}

/* ── Desktop collapse toggle icon ───────────────────────────────────── */
body.kt-sidebar-collapse #sidebar_toggle i {
  transform: rotate(180deg);
}

/* ── Contain Select2 dropdowns so they can't cause page horizontal scroll ── */
.kt-wrapper {
  overflow-x: hidden;
  position: relative;
}


/* ── Modal overlay: prevent horizontal scroll caused by Select2 dropdown ── */
[data-kt-modal] {
  overflow-x: hidden;
}

/* ── Responsive tables – card layout (< 1280px) ─────────────────────── */
@media (max-width: 1279px) {
  [data-kt-datatable-table] {
    display: block;
    border: none !important;
    width: 100% !important;
  }

  [data-kt-datatable-table] thead {
    display: none;
  }

  [data-kt-datatable-table] tbody {
    display: block;
  }

  [data-kt-datatable-table] tbody tr {
    display: block;
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    margin-bottom: 0.75rem;
    background: var(--card);
    overflow: hidden;
  }

  [data-kt-datatable-table] tbody td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.75rem;
    border: none;
    border-bottom: 1px solid var(--border);
    font-size: 0.875rem;
    gap: 1rem;
  }

  [data-kt-datatable-table] tbody td:last-child {
    border-bottom: none;
    justify-content: flex-end;
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
  }

  [data-kt-datatable-table] tbody td[data-label]::before {
    content: attr(data-label);
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--muted-foreground);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    flex: 0 0 38%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Fila vacía (única fila con única celda): sin estilos de tarjeta */
  [data-kt-datatable-table] tbody tr:only-child:has(> td:only-child) {
    border: none !important;
    background: transparent !important;
    border-radius: 0 !important;
    margin-bottom: 0 !important;
    overflow: visible !important;
  }

  [data-kt-datatable-table] tbody tr:only-child > td:only-child {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box;
    text-align: center !important;
    border: none !important;
    padding: 1.5rem 0.75rem !important;
    color: var(--muted-foreground);
  }

  [data-kt-datatable-table] tbody tr:only-child > td:only-child::before {
    content: none !important;
  }

  /* Ocultar columna # solo cuando NO sea la única celda */
  [data-kt-datatable-table] tbody tr:not(:only-child) > td:first-child,
  [data-kt-datatable-table] tbody tr:only-child:not(:has(> td:only-child)) > td:first-child {
    display: none;
  }

  [data-kt-datatable-table] tbody td:last-child::before {
    display: none;
  }
}

/* ── Tabla completa (≥ 1280px): scroll horizontal si hace falta ──────── */
@media (min-width: 1280px) {
  .kt-card-content {
    overflow-x: auto;
  }

  /* Fila vacía: estilizar la celda (el colspan lo arregla el JS) */
  [data-kt-datatable-table] tbody tr:only-child > td:only-child {
    text-align: center;
    padding: 2rem;
    color: var(--muted-foreground);
    white-space: normal;
  }
}


.dark .flatpickr-calendar {
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
}

/* ── Flatpickr time picker ───────────────────────────────────────────── */
.flatpickr-time {
  background: var(--background) !important;
  border-top: 1px solid var(--border) !important;
  font-family: Inter, sans-serif;
}

.flatpickr-time input,
.flatpickr-time .flatpickr-time-separator,
.flatpickr-time .flatpickr-am-pm {
  background: var(--background) !important;
  color: var(--foreground) !important;
  font-family: Inter, sans-serif;
  font-size: var(--text-sm) !important;
}

.flatpickr-time input:hover,
.flatpickr-time input:focus,
.flatpickr-time .flatpickr-am-pm:hover {
  background: var(--muted) !important;
}

.flatpickr-time input.flatpickr-hour,
.flatpickr-time input.flatpickr-minute {
  font-weight: 500;
}

/* Responsive utilities for paywall plan comparison */
@media (min-width: 1280px) {
  .xl\:hidden { display: none !important; }
  .xl\:block  { display: block !important; }
}