/* Base dark mode palette */
html[data-bs-theme='dark'] {
  /* Core colors */
  --background-color: #242526;
  --bg-primary: #242526;
  --bg-secondary: #1A1A2E;
  --text-color: #F4F4F4;
  --text-primary: #F4F4F4;
  --text-secondary: #B0B0B0;
  --border-color: #0F3460;
  --accent-color: #E94560;
  --primary-accent: #E94560;

  background-color: var(--background-color);
  color: var(--text-color);
}

html[data-bs-theme='dark'] body {
  background-color: var(--bg-primary);
  color: var(--text-color);
}

html[data-bs-theme='dark'] a {
  color: var(--accent-color);
}

html[data-bs-theme='dark'] a:hover {
  color: var(--text-color);
}

html[data-bs-theme='dark'] .link-dark,
html[data-bs-theme='dark'] .text-decoration-none.link-dark {
  color: #fff !important;
}

html[data-bs-theme='dark'] .link-dark:hover,
html[data-bs-theme='dark'] .text-decoration-none.link-dark:hover {
  color: var(--accent-color) !important;
}

html[data-bs-theme='dark'] .border,
html[data-bs-theme='dark'] .card {
  border-color: var(--border-color) !important;
}

html[data-bs-theme='dark'] #app-content,
html[data-bs-theme='dark'] #app-sidebar,
html[data-bs-theme='dark'] .card,
html[data-bs-theme='dark'] .card .card-body,
html[data-bs-theme='dark'] .navbar,
html[data-bs-theme='dark'] #mobile-bottom-nav,
html[data-bs-theme='dark'] #mobile-drawer-handle,
html[data-bs-theme='dark'] #mobile-drawer {
  background-color: var(--bg-primary);
  color: var(--text-color);
}

html[data-bs-theme='dark'] .alert {
  background-color: var(--bg-secondary);
  color: var(--text-color);
  border-color: var(--border-color);
}

html[data-bs-theme='dark'] .info-alert {
  background-color: var(--bg-secondary);
  color: var(--text-color);
  border-left-color: var(--accent-color);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.4);
}

html[data-bs-theme='dark'] .info-alert .alert-link {
  color: var(--accent-color);
}

html[data-bs-theme='dark'] .info-alert .alert-link:hover {
  color: var(--text-color);
}

/* Option 2: muted coral & gold */
html[data-bs-theme='dark'].palette-coral {
  --background-color: #1C1C1C;
  --text-color: #F5E8D8;
  --accent-color: #FF6F61;   /* Accent 1 */
  --accent-alt: #DAA520;     /* Accent 2 */
  --hover-color: #FF4500;    /* Hover */
}
html[data-bs-theme='dark'].palette-coral a {
  color: var(--accent-color);
}
html[data-bs-theme='dark'].palette-coral a:hover {
  color: var(--hover-color);
}

/* Option 3: lavender & cyan */
html[data-bs-theme='dark'].palette-lavender {
  --background-color: #2C2C2C;
  --text-color: #E4E4E4;
  --accent-color: #A8DADC;   /* Accent 1 */
  --accent-alt: #FFC1CC;     /* Accent 2 */
  --button-color: #B39CD0;   /* Button/CTA */
}
html[data-bs-theme='dark'].palette-lavender a {
  color: var(--accent-color);
}
html[data-bs-theme='dark'].palette-lavender a:hover {
  color: var(--accent-alt);
}
html[data-bs-theme='dark'].palette-lavender .btn-primary {
  background-color: var(--button-color);
  border-color: var(--button-color);
}

/* Ensure navigation icons and labels are legible */
html[data-bs-theme='dark'] .nav-icon,
html[data-bs-theme='dark'] .nav-label,
html[data-bs-theme='dark'] #mobile-bottom-nav span {
  color: #fff;
}
html[data-bs-theme='dark'] img.nav-icon {
  filter: brightness(0) invert(1);
}

html[data-bs-theme='dark'] #mobile-menu-toggle i {
  color: #fff;
}

/* Invert logo images for dark backgrounds */
html[data-bs-theme='dark'] img[src*="logo"] {
  filter: brightness(0) invert(1);
}

/* Mobile drawer handle */
html[data-bs-theme='dark'] #mobile-drawer-handle {
  background-color: var(--bg-primary);
  color: var(--text-color);
}

/* Creator cards and search bar */
html[data-bs-theme='dark'] .creator-card,
html[data-bs-theme='dark'] .creator-cards .card {
  background-color: var(--bg-secondary);
  border-color: var(--border-color);
  color: var(--text-color);
}

html[data-bs-theme='dark'] .searchbar,
html[data-bs-theme='dark'] .searchbar .search-input {
  background-color: var(--bg-secondary);
  color: var(--text-color);
  border-color: var(--border-color);
}

/* Card title and breadcrumb styling */
html[data-bs-theme='dark'] .card-title {
  color: var(--text-primary);
}

html[data-bs-theme='dark'] .card-title.text-dark {
  color: var(--text-primary) !important;
}

html[data-bs-theme='dark'] .modal {
  --app-modal-bg: #0f172a;
  --app-modal-text: #e2e8f0;
  --app-modal-border: rgba(148, 163, 184, 0.24);
  --app-modal-shadow: 0 32px 70px -40px rgba(2, 6, 23, 0.9);
  --app-modal-header-bg: rgba(30, 41, 59, 0.85);
  --app-modal-footer-bg: rgba(15, 23, 42, 0.82);
  --app-modal-muted: #94a3b8;
  --app-modal-backdrop: rgba(2, 6, 23, 0.75);
  --app-modal-accent: #818cf8;
}

html[data-bs-theme='dark'] .modal-header {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.24), rgba(30, 64, 175, 0.28));
  border-color: rgba(148, 163, 184, 0.18);
}

html[data-bs-theme='dark'] .modal-footer {
  border-color: rgba(148, 163, 184, 0.18);
}

html[data-bs-theme='dark'] .modal .btn-close {
  filter: invert(1);
  opacity: 0.7;
}

html[data-bs-theme='dark'] .modal .btn-close:hover,
html[data-bs-theme='dark'] .modal .btn-close:focus {
  opacity: 0.95;
}

html[data-bs-theme='dark'] .modal .btn-primary {
  box-shadow: 0 22px 46px -20px rgba(129, 140, 248, 0.85);
}

html[data-bs-theme='dark'] .modal .btn-primary:hover,
html[data-bs-theme='dark'] .modal .btn-primary:focus {
  background-image: linear-gradient(135deg, #6366f1, #4f46e5);
}

html[data-bs-theme='dark'] .modal .btn-secondary {
  background-color: rgba(148, 163, 184, 0.18);
  color: var(--app-modal-text);
}

html[data-bs-theme='dark'] .modal .btn-secondary:hover,
html[data-bs-theme='dark'] .modal .btn-secondary:focus {
  background-color: rgba(148, 163, 184, 0.28);
}

html[data-bs-theme='dark'] .modal .form-control,
html[data-bs-theme='dark'] .modal .form-select,
html[data-bs-theme='dark'] .modal textarea {
  background-color: rgba(30, 41, 59, 0.85);
  border-color: rgba(148, 163, 184, 0.35);
  color: var(--app-modal-text);
}

html[data-bs-theme='dark'] .modal .form-control:focus,
html[data-bs-theme='dark'] .modal .form-select:focus,
html[data-bs-theme='dark'] .modal textarea:focus {
  background-color: rgba(15, 23, 42, 0.85);
  border-color: rgba(129, 140, 248, 0.6);
  box-shadow: 0 0 0 0.25rem rgba(129, 140, 248, 0.25);
}

html[data-bs-theme='dark'] .modal .app-modal__icon {
  background: rgba(99, 102, 241, 0.28);
  color: #a5b4fc;
  box-shadow: inset 0 1px 0 rgba(2, 6, 23, 0.55);
}

html[data-bs-theme='dark'] .modal .app-modal__icon--info {
  background: rgba(45, 212, 191, 0.22);
  color: #5eead4;
}

html[data-bs-theme='dark'] .modal nav .page-link {
  color: var(--app-modal-text);
  background-color: rgba(15, 23, 42, 0.65);
}

html[data-bs-theme='dark'] .modal nav .page-link:hover {
  background-color: rgba(129, 140, 248, 0.22);
}

html[data-bs-theme='dark'] .modal nav .page-item.active .page-link {
  background-color: var(--app-modal-accent);
  color: #0b1120;
}

html[data-bs-theme='dark'] .modal .spinner-border {
  color: var(--app-modal-accent);
}

html[data-bs-theme='dark'] .breadcrumb {
  border: 2px solid #fff !important;
}

/* Accent color overrides */
html[data-bs-theme='dark'] .form-control-plaintext.text-dark {
  color: var(--accent-color) !important;
}

/* Auth form adjustments */
html[data-bs-theme='dark'] .form-container .form-control {
  background-color: #fff;
  color: #000;
}

html[data-bs-theme='dark'] .form-container .h2.mb-3,
html[data-bs-theme='dark'] .form-container .h5.fw-normal,
html[data-bs-theme='dark'] .login-collapse .h2.mb-3,
html[data-bs-theme='dark'] .login-collapse .h5.fw-normal,
html[data-bs-theme='dark'] .form-container .text-center.small.mb-3 {
  color: #fff;
}

/* Creator listings */
html[data-bs-theme='dark'] .creator-name,
html[data-bs-theme='dark'] .creator-meta {
  color: #fff !important;
}

/* Form labels */
html[data-bs-theme='dark'] .form-label,
html[data-bs-theme='dark'] .form-label.fw-bold {
  color: #fff !important;
}

/* Ensure generic paragraph text remains readable */
html[data-bs-theme='dark'] p {
  color: var(--text-color) !important;
}

/* Generic background and text color helpers */
html[data-bs-theme='dark'] .bg-white,
html[data-bs-theme='dark'] .bg-light {
  background-color: transparent !important;
  color: var(--text-color) !important;
}

html[data-bs-theme='dark'] .text-dark {
  color: var(--text-color) !important;
}

/* Messages page specific fixes */
html[data-bs-theme='dark'] #messageList {
  background-color: var(--bg-primary) !important;
}