html[data-theme="light"] body {
  background: linear-gradient(var(--gradient-page-angle), var(--gradient-page-start) 0%, var(--gradient-page-mid) 55%, var(--gradient-page-end) 100%) !important;
  color: var(--text-color) !important;
}

html[data-theme="dark"] body {
  background: linear-gradient(var(--gradient-page-angle), var(--gradient-page-start) 0%, var(--gradient-page-end) 100%) !important;
  color: var(--text-color) !important;
}

/* Keep login page background image visible across themes */
html[data-theme="light"] body:has(#authTabs),
html[data-theme="dark"] body:has(#authTabs) {
  background: linear-gradient(var(--overlay-strong), var(--overlay-strong)),
    url("img/login1.jpg") center/cover no-repeat !important;
}

/* Footer */
footer {
  background-color: var(--navbar-bg) !important;
  border-top: 1px solid var(--border-color);
}

footer,
footer a,
footer h5 {
  color: var(--navbar-text) !important;
}

/* Landing page */
html[data-theme="light"] .hero-header {
  color: var(--page-light-heading);
  background-color: var(--page-light-hero-bg);
}

html[data-theme="light"] .hero-header::before,
html[data-theme="light"] .hero-header::after {
  background-image: linear-gradient(
      to bottom,
      var(--page-light-hero-overlay-start) 35%,
      var(--page-light-hero-overlay-end) 100%
    ),
    var(--bg-image) !important;
}

html[data-theme="light"] .welcome-text,
html[data-theme="light"] section.fade-section h2 {
  color: var(--page-light-heading) !important;
  text-shadow: none;
}

html[data-theme="light"] .features {
  background: var(--page-light-surface-accent) !important;
  color: var(--page-light-text-strong) !important;
}

html[data-theme="light"] .features .card {
  background-color: var(--page-light-surface) !important;
  color: var(--page-light-text) !important;
  border: 1px solid var(--page-light-border);
}

html[data-theme="light"] .accordion-item {
  background-color: var(--page-light-surface);
  border: 1px solid var(--page-light-border);
  color: var(--page-light-text);
}

html[data-theme="light"] .accordion-button,
html[data-theme="light"] .accordion-button:not(.collapsed) {
  background-color: var(--page-light-accent-soft) !important;
  color: var(--page-light-text) !important;
}

html[data-theme="light"] .accordion-button:hover {
  background-color: var(--page-light-accent-soft-hover) !important;
}

html[data-theme="light"] .accordion-button::after {
  filter: none;
}

html[data-theme="light"] .accordion-body {
  background-color: var(--page-light-surface-soft);
  color: var(--page-light-text-muted);
  border-top: 1px solid var(--page-light-border);
}

/* Movie list page */
html[data-theme="light"] .movie-title {
  background: var(--page-light-movie-title-bg);
  color: var(--page-light-text-strong);
}

html[data-theme="light"] .show-btn {
  background: var(--page-light-surface);
  color: var(--page-light-text-strong);
  border: 1px solid var(--page-light-border);
}

html[data-theme="light"] .show-btn:hover {
  background: var(--page-light-surface-accent-2);
  color: var(--page-light-text-strong);
}

/* About page */
html[data-theme="light"] .about-overlay {
  background-color: var(--page-light-overlay-strong) !important;
  color: var(--page-light-text-strong) !important;
}

html[data-theme="light"] .features-container {
  background: linear-gradient(135deg, var(--page-light-surface-accent) 0%, var(--page-light-surface-soft) 100%) !important;
}

html[data-theme="light"] .features-container .feature-item,
html[data-theme="light"] .features-container li.bg-body-tertiary {
  background-color: var(--page-light-surface) !important;
  border: 1px solid var(--page-light-border);
  color: var(--page-light-text);
}

html[data-theme="light"] .features-container .feature-title,
html[data-theme="light"] .features-container .feature-desc,
html[data-theme="light"] .features-container .feature-desc strong {
  color: var(--page-light-text) !important;
}

/* Contact page */
html[data-theme="light"] .head1,
html[data-theme="light"] .contact-subitem p {
  color: var(--page-light-text-strong) !important;
}

html[data-theme="light"] .contact-subitem a {
  color: var(--page-light-link) !important;
}

html[data-theme="light"] .contact-form form {
  background-color: var(--page-light-surface) !important;
  border: 1px solid var(--page-light-border);
}

html[data-theme="light"] .contact-form label {
  color: var(--page-light-text);
}

html[data-theme="light"] .contact-form input,
html[data-theme="light"] .contact-form textarea {
  background-color: var(--page-light-surface-soft) !important;
  color: var(--page-light-text) !important;
  border-color: var(--page-light-border-strong) !important;
}

html[data-theme="light"] .contact-form input::placeholder,
html[data-theme="light"] .contact-form textarea::placeholder {
  color: var(--page-light-muted) !important;
}

html[data-theme="light"] .contact-form button {
  background-color: var(--page-light-button-bg) !important;
  border-color: var(--page-light-button-border) !important;
}

/* Login + Admin shared tabs/cards */
html[data-theme="light"] .nav-tabs {
  background-color: var(--page-light-nav-bg);
}

html[data-theme="light"] .nav-tabs .nav-link {
  background-color: var(--page-light-nav-bg);
  color: var(--text-color) !important;
}

html[data-theme="light"] .nav-tabs .nav-link:hover {
  background-color: var(--page-light-nav-hover);
  color: var(--text-color) !important;
}

html[data-theme="light"] .nav-tabs .nav-link.active {
  background-color: var(--page-light-surface) !important;
  color: var(--text-color) !important;
}

html[data-theme="light"] .card {
  background-color: var(--page-light-surface) !important;
  color: var(--page-light-text);
}

html[data-theme="dark"] .card {
  background-color: var(--surface-color) !important;
  color: var(--text-color);
}

/* Login page specific */
html[data-theme="light"] .btn-ghost {
  border-color: var(--text-color);
  color: var(--text-color) !important;
}

html[data-theme="light"] .btn-ghost::before {
  background: var(--text-color);
}

html[data-theme="light"] .btn-link {
  color: var(--text-color) !important;
}

/* Admin page specific */
html[data-theme="light"] .admin-header,
html[data-theme="light"] .modal-header,
html[data-theme="light"] .table thead th {
  background-color: var(--page-light-admin-header);
  color: var(--text-inverse);
}

html[data-theme="dark"] .table thead th {
  background-color: var(--surface-color);
}

html[data-theme="light"] .table tbody tr:hover {
  background-color: var(--page-light-table-hover);
}


html[data-theme="light"] .booking-section {
  background: linear-gradient(135deg, var(--page-light-surface-soft) 0%, var(--page-light-surface-accent-2) 100%) !important;
}

html[data-theme="light"] .booking-section .ticketing {
  background-color: var(--page-light-surface) !important;
  color: var(--page-light-text);
  border: 1px solid var(--page-light-border);
}

html[data-theme="light"] .legend,
html[data-theme="light"] .legend .d-flex,
html[data-theme="light"] .booking-section h2,
html[data-theme="light"] .booking-section h3,
html[data-theme="light"] .booking-section h4 {
  color: var(--page-light-text) !important;
}

html[data-theme="light"] #showtime {
  color: var(--page-light-text) !important;
  background-color: var(--page-light-surface-soft) !important;
  border-color: var(--page-light-border-strong) !important;
}

html[data-theme="light"] #bookNowBtn {
  background-color: var(--page-light-book-btn-bg);
  border-color: var(--page-light-book-btn-border);
}

html[data-theme="light"] #bookNowBtn::before {
  background-color: var(--page-light-book-btn-bubble);
}

html[data-theme="light"] .barcode-section,
html[data-theme="light"] .barcode-section svg {
  background: var(--page-light-surface);
}

html[data-theme="light"] .ticket-invoice {
  background-color: var(--page-light-surface) !important;
  color: var(--page-light-text) !important;
}

/* Keep modals readable in dark mode where templates force light utility classes */
html[data-theme="dark"] .modal-content.bg-light,
html[data-theme="dark"] .ticket-invoice.bg-light,
html[data-theme="dark"] .bg-white {
  background-color: var(--surface-color) !important;
  color: var(--text-color) !important;
}