.theme-dark {
  --bg-color: #101010;
  --surface-color: #101417;
  --text-color: #ffffff;
  --muted-text-color: #9ca3af;
  --border-color: rgba(255, 255, 255, 0.08);
  --card-bg: #1a1f24;
  --button-text-color: #ffffff;
  --input-bg: #171c20;
  --elevated-shadow: 0 2px 10px rgba(0, 0, 0, 0.32);
}

.customer-body.theme-dark {
  background: #11151F !important;
  color: var(--text-color);  
}

.customer-body.theme-dark .customer-page {
  min-height: 100vh;
  background-color: var(--bg-color);
  color: var(--text-color);  
  background:
    radial-gradient(circle 260px at 0 0, rgba(123, 187, 215, 0.22) 0%, rgba(123, 187, 215, 0.1) 32%, rgba(123, 187, 215, 0) 70%),
    linear-gradient(180deg, rgba(17, 24, 39, 0) 0%, rgba(17, 24, 39, 0.72) 100%),
    var(--bg-color);
  background-attachment: fixed;
}

.customer-body.theme-dark #middle_container {
  background-color: transparent;
}

.customer-body.theme-dark .bg-white,
.customer-body.theme-dark .customer-rounded-div,
.customer-body.theme-dark .customer-select,
.customer-body.theme-dark .customer-select-menu,
.customer-body.theme-dark .dropdown-menu,
.customer-body.theme-dark .modal-content,
.customer-body.theme-dark .show-box,
.customer-body.theme-dark .login-container {
  background-color: var(--card-bg) !important;
  color: var(--text-color);
  border-color: var(--border-color) !important;
}

.customer-body.theme-dark input:not([type='checkbox']):not([type='radio']),
.customer-body.theme-dark textarea,
.customer-body.theme-dark select,
.customer-body.theme-dark .form-control,
.customer-body.theme-dark .custom-field {
  background-color: var(--input-bg) !important;
  border-color: var(--border-color) !important;
  color: var(--text-color) !important;
}

.customer-body.theme-dark input::placeholder,
.customer-body.theme-dark textarea::placeholder {
  color: var(--muted-text-color);
}

.customer-body.theme-dark .color2,
.customer-body.theme-dark .text-dash-tile,
.customer-body.theme-dark form .label,
.customer-body.theme-dark .no-form .label,
.customer-body.theme-dark .dropdown-item,
.customer-body.theme-dark td,
.customer-body.theme-dark th {
  color: var(--text-color);
}

.customer-body.theme-dark .text-grey-neutral {
  color: var(--muted-text-color);
}

.customer-body.theme-dark #dash_filter_div .dash_filter {
  background: var(--card-bg);
  color: var(--muted-text-color);
  border-color: var(--border-color);
}

.customer-body.theme-dark #dash_filter_div .dash_filter.active {
  background: var(--brand);
  color: var(--brand-text, #ffffff);
  border-color: var(--brand);
}

.customer-body.theme-dark .li-tab:not(.active),
.customer-body.theme-dark .li-tab {
  color: #fff !important;
  background: var(--card-bg);
  border-width: 0.5px;
  border-style: solid;

}

.customer-body.theme-dark .li-tab.active{
  background: var(--brand);
}

.customer-body.theme-dark .instructor-plate,
.customer-body.theme-dark .instructor-plate h6 {
  color: var(--bg-color);
}

.customer-body.theme-dark .bookings-empty-panel,
.customer-body.theme-dark .bookings-empty-card {
  background: var(--card-bg);
  box-shadow: var(--elevated-shadow);
}

.customer-body.theme-dark .bookings-empty-panel-title {
  color: var(--text-color);
}

/* dark theme: darker glass, keep the frosted look */
.customer-body.theme-dark .bottom-tab-bar {
  border: none;
  background:
    linear-gradient(
      135deg,
      rgba(30, 41, 59, 0.42),
      rgba(15, 23, 42, 0.28)
    );
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
}

.customer-body.theme-dark .bottom-tab-bar-tab {
  color: rgba(255, 255, 255, 0.82);
}

/* active pill keeps yellow + dark-blue label in both themes */
.customer-body.theme-dark .bottom-tab-bar-tab.is-active,
.customer-body.theme-dark .bottom-tab-bar .tab-list li a.bottom-tab-bar-tab.active,
.customer-body.theme-dark .bottom-tab-bar .tab-list li a.bottom-tab-bar-tab.is-active {
  color: var(--bottom-nav-secondary);
}

.customer-body.theme-dark table,
.customer-body.theme-dark thead,
.customer-body.theme-dark tbody,
.customer-body.theme-dark tr {
  border-color: var(--border-color);
}

.customer-body.theme-dark .toggle-btn {
  background: transparent;
}

.customer-body.theme-dark .customer-modal-content {
  background: var(--bg-color);
}

.customer-body.theme-dark .table-wrapper {
  background-color: var(--card-bg);
}

.customer-body.theme-dark .customer-footer-wrapper,
.customer-body.theme-dark .customer-footer-wrapper-fixed {
  background: var(--bg-color);
}

.customer-body.theme-dark .customer-modal-body .date-box span,
.customer-body.theme-dark .dropdown-menu-item,
.customer-body.theme-dark .booking-details-list-label {
  color: #fff;
}

.customer-body.theme-dark .customer-modal-body .date-box div img,
.customer-body.theme-dark button img,
.customer-body.theme-dark .customer-modal-body .date-box span img {
  filter: brightness(0) invert(1);
}

.customer-body.theme-dark #logsign_modal {
  background: var(--input-bg);
}

.customer-body.theme-dark .grid button:hover{
  background-color: var(--brand) !important;
  color: #fff;
}

.customer-body.theme-dark .login-container {
  border-top-left-radius: 24px;
  border-bottom-left-radius: 24px;
}

.customer-body.theme-dark .login-logo-container {
  background-color: var(--card-bg);
}

.customer-body.theme-dark .form-switcher {
  background-color: var(--input-bg);
}

.customer-body.theme-dark .form-wrapper {
  border-color: var(--border-color) !important;
  background-color: var(--input-bg);
}

.customer-body.theme-dark .step-indicator {
  border-color: var(--border-color);
  background-color: var(--brand);
}

.customer-body.theme-dark .pay-box {
  background:  #1a1f24;
}

.customer-body.theme-dark .bg-white,
.customer-body.theme-dark .bg-main-bg,
.customer-body.theme-dark .customer-modal-body .table-wrapper {
  background: var(--card-bg) !important;
}

.customer-body.theme-dark #class_ladder{
  border-radius: 24px;
}

.customer-body.theme-dark .team-card,
.customer-body.theme-dark .team-results-btn:not(.active) {
  background-color: var(--input-bg);
  color: #fff;
  border-color: var(--border-color);
}

.customer-body.theme-dark #mobile_menu {
  background-color: var(--card-bg);
}

.customer-body.theme-dark #mobile_menu svg {
  color: var(--brand);
}

.customer-body.theme-dark .time-column-many,
.customer-body.theme-dark .cell-many,
.customer-body.theme-dark .courts-many {
  background: #1a1f24;
}

.customer-body.theme-dark .bottom-tab-bar-tab.is-active span {
  color: var(--brand);
}

.customer-body.theme-dark .bottom-tab-bar-label {
  color: #fff;
}

.customer-body.theme-dark .cust-form input:not([type='checkbox']):not([type='radio']).border-0 {
  background-color: inherit !important;
}

.customer-body.theme-dark .dropdown-menu-item:hover {
  background: var(--brand);
}

.customer-body.theme-dark .dropdown-menu {
  border-width: 1px;
  border-radius: 12px;
}

.customer-body.theme-dark .section-box-inner,
.customer-body.theme-dark .section-box.blocked:not(.green-box) .section-box-inner,
.customer-body.theme-dark .section-box-inner p {
  color: #fff;
  background: var(--gray);
  border-color: var(--gray);
}

.customer-body.theme-dark .section-box-inner h3,
.customer-body.theme-dark .section-box-inner h3 span {
  color: #fff;
}

.customer-body.theme-dark #dash_filter_div {
  padding-top: 2px;
}

.customer-body.theme-dark .border-input-background {
  border-color: var(--border-color);
}

.customer-body.theme-dark .bg-gray-bg-cards {
  background: var(--input-bg);
}

.customer-body.theme-dark .instructor-plate {
  border: 1px solid #fff;
  color: #fff;
  background: var(--input-bg);
  border-color: var(--border-color) !important;
}

.customer-body.theme-dark .instructor-plate div h6,
.customer-body.theme-dark .instructor-plate div span {
  color: #fff;
}

.customer-body.theme-dark .login-container img {
  filter: brightness(0) invert(1);
}

.customer-body.theme-dark .main-container .unavail {
  background: var(--bg-color);
}

.customer-body.theme-dark .login-logo-container img {
  filter: brightness(0) invert(1);
}

.customer-body.theme-dark .modal-grid .form-label {
  background-color: var(--card-bg);
  border-color: var(--border-color);
}

@media (min-width: 1024px) {
  .customer-body.theme-dark .flatpickr-calendar,
  .customer-body.theme-dark .flatpickr-months .flatpickr-month,
  .customer-body.theme-dark .dayContainer .flatpickr-day,
  .customer-body.theme-dark .flatpickr-weekdaycontainer span.flatpickr-weekday {
    color: #fff;
    background: var(--card-bg);
  }

  .customer-body.theme-dark .dayContainer .flatpickr-disabled {
    color: rgba(70, 70, 70);
  }

  .customer-body.theme-dark .flatpickr-calendar,
  .customer-body.theme-dark .flatpickr-months .flatpickr-month {
    border-radius: 12px;
  }

  .customer-body.theme-dark .flatpickr-months svg {
    fill: #fff;
  }
}