html[data-theme="dark"] .lang-toggle,
html[data-theme="dark"] .lang-menu {
  background-color: #161a26;
  color: #e6e8ee;
  border-color: rgba(255, 255, 255, .25);
}

html[data-theme="dark"] .lang-menu li:hover {
  background-color: rgba(255, 255, 255, .08);
}


html[data-theme="dark"] body {
  background-color: #0f1216;
  color: #e6e8ee;
}

html[data-theme="dark"] .navbar,
html[data-theme="dark"] .dropdown-menu,
html[data-theme="dark"] .lang-toggle,
html[data-theme="dark"] .lang-menu {
  background-color: #161a26;
  color: #e6e8ee;
  border-color: rgba(255, 255, 255, .25);
}

html[data-theme="dark"] .nav-link:hover {
  color: #ffffff;
}

/* buttons */
html[data-theme="dark"] .theme-btn {
  background-color: #161a26;
  color: #e6e8ee;
  border-color: rgba(255, 255, 255, .25);
}

html[data-theme="dark"] .theme-btn:hover {
  background-color: rgba(255, 255, 255, .08);
}

html[data-theme="dark"] .theme-btn.active {
  background-color: rgba(255, 255, 255, .18);
}


html[data-theme="dark"] .lang-menu li.active {
  background-color: rgba(255, 255, 255, .12);
}

/* ===============================
   MOBILE NAVBAR FIX
   =============================== */

@media (max-width: 991.98px) {
  html[data-theme="dark"] .navbar-collapse {
    background: #161a26;
  }
}

/* dark mode */
html[data-theme="dark"] .settings-label {
  color: rgba(255, 255, 255, .6);
}

html[data-theme="dark"] .theme-btn {
  border-color: rgba(255, 255, 255, .25);
  color: #e6e8ee;
}

html[data-theme="dark"] .theme-btn.active {
  background: rgba(255, 255, 255, .15);
}

[data-theme="dark"] .navbar .navbar-menu-wrapper .navbar-nav .nav-link {
  color: #e5e7eb;
}

[data-theme="dark"] .form-control {
  background-color: #1f2937;
  /* dark neutral */
  color: #e5e7eb;
  border-color: #374151;
}

[data-theme="dark"] .form-control:focus {
  background-color: #1f2937;
  color: #ffffff;
  border-color: #60a5fa;
  box-shadow: 0 0 0 0.15rem rgba(96, 165, 250, 0.25);
}

[data-theme="dark"] .form-control::placeholder {
  color: #9ca3af;
}

[data-theme="dark"] .form-control:disabled,
[data-theme="dark"] .form-control[readonly] {
  background-color: #111827;
  color: #6b7280;
}

[data-theme="dark"] table {
  background-color: transparent;
}

[data-theme="dark"] table thead th {
  color: #f9fafb;
  border-bottom-color: #374151;
}

[data-theme="dark"] table td,
[data-theme="dark"] table th {
  border-color: #374151;
}

[data-theme="dark"] table tbody tr:hover {
  background-color: rgba(255, 255, 255, 0.04);
}

[data-theme="dark"] .btn {
  color: #6b7280;
}
[data-theme="dark"] .btn-primary {
  color: #ffffff !important;
  background-color: #00608f; /* slightly brighter for dark UI */
  border-color: #0284c7;
}

[data-theme="dark"] .btn-primary:hover {
  background-color: #0ea5e9;
  border-color: #0ea5e9;
}

[data-theme="dark"] .btn-primary:active,
[data-theme="dark"] .btn-primary.active {
  background-color: #0369a1;
  border-color: #0369a1;
}
[data-theme="dark"] .btn-primary:focus-visible {
  box-shadow: 0 0 0 0.2rem rgba(14, 165, 233, 0.35);
}
[data-theme="dark"] .btn-outline-primary {
  color: #93c5fd;              /* soft blue text */
  background-color: transparent;
  border-color: #3b82f6;       /* visible but not harsh */
}
[data-theme="dark"] .btn-outline-primary:hover {
  color: #ffffff;
  background-color: #3b82f6;
  border-color: #3b82f6;
}

[data-theme="dark"] .btn-outline-primary:active,
[data-theme="dark"] .btn-outline-primary.active {
  background-color: #2563eb;
  border-color: #2563eb;
}
[data-theme="dark"] .btn-outline-primary:focus-visible {
  box-shadow: 0 0 0 0.2rem rgba(59, 130, 246, 0.35);
}
[data-theme="dark"] .slider {
  background-color: #374151; /* dark neutral */
}
input:checked + .slider {
  background-color: #0176b3;
}

[data-theme="dark"] input:checked + .slider {
  background-color: #0284c7; /* brighter in dark mode */
}
[data-theme="dark"] .slider:hover {
  background-color: #4b5563;
}
input:focus-visible + .slider {
  box-shadow: 0 0 0 2px rgba(1, 118, 179, 0.4);
}

[data-theme="dark"] input:focus-visible + .slider {
  box-shadow: 0 0 0 2px rgba(14, 165, 233, 0.45);
}

[data-theme="dark"] table {
  color: #e5e7eb;
  background-color: transparent;
}

[data-theme="dark"] table th,
[data-theme="dark"] table td {
  border-color: #374151;
}

[data-theme="dark"] table thead th {
  color: #f9fafb;
  border-bottom-color: #4b5563;
}

[data-theme="dark"] table tbody tr:hover {
  background-color: rgba(255, 255, 255, 0.04);
}
[data-theme="dark"] .content-wrapper {
  background-color: #161a26; /* deep slate */
}
[data-theme="dark"] a {
  color: #73b2ff !important;
  text-decoration-color: rgba(96, 165, 250, 0.6);
}
[data-theme="dark"] a:hover {
  color: #beddff !important; /* controlled soft blue */
  text-decoration: none;
}
[data-theme="dark"] .navbar .navbar-nav .nav-link {
  color: #e5e7eb;
  transition: color .2s ease, background-color .2s ease;
}

[data-theme="dark"] .navbar .navbar-nav .nav-link:hover {
  color: #ffffff;
  background-color: rgba(255, 255, 255, 0.06);
  border-radius: 6px;
}
[data-theme="dark"] #sep_type_help {
  color: #9ca3af;               /* soft gray */
}
[data-theme="dark"] #sep_type_help:hover {
  color: #93c5fd;               /* soft blue */
  transform: scale(1.05);
}
#sep_type_help:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(1, 118, 179, 0.35);
  border-radius: 50%;
}

[data-theme="dark"] #sep_type_help:focus-visible {
  box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.4);
}
[data-theme="dark"] .modal-content {
  background-color: #111827;            /* deep slate */
  border-color: rgba(255, 255, 255, 0.08);
  color: #e5e7eb;
}
[data-theme="dark"] .list-group-item {
  background-color: #111827;            /* dark slate */
  border-color: rgba(255, 255, 255, 0.08);
  color: #e5e7eb;
}
[data-theme="dark"] .player {
  background: #0f172a;
  background: -moz-linear-gradient(-45deg, #0f172a 0%, #1e293b 100%);
  background: -webkit-linear-gradient(-45deg, #0f172a 0%, #1e293b 100%);
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  color: #e5e7eb;

}
[data-theme="dark"] .progress-bar {
  background-color: #2563eb; /* brighter blue for dark UI */
  background-image: linear-gradient(
    135deg,
    #3b82f6 0%,
    #2563eb 100%
  );
}

[data-theme="dark"] .progress {
  background-color: #1f2937;
}
[data-theme="dark"] .card {
  background-color: #111827;              /* dark slate */
  border-color: rgba(255, 255, 255, 0.08);
  color: #e5e7eb;
}
[data-theme="dark"] .card-header,
[data-theme="dark"] .card-footer {
  background-color: #0f172a;
  border-color: rgba(255, 255, 255, 0.08);
}
[data-theme="dark"] .card {
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35);
}
[data-theme="dark"] #custom_price {
  background-color: #111827;   /* dark input */
  color: #e5e7eb;
  box-shadow: 0 0 6px rgba(96, 165, 250, 0.6);
}
[data-theme="dark"] #custom_price::placeholder {
  color: #9ca3af;
}
[data-theme="dark"] #custom_price:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.45);
}

[data-theme="dark"] .page-link {
  color: #93c5fd;                     /* readable blue */
  background-color: #111827;          /* dark surface */
  border-color: #374151;
}
[data-theme="dark"] .page-link:hover {
  color: #ffffff;
  background-color: #1f2937;
  border-color: #4b5563;
}

[data-theme="dark"] .page-link:focus {
  box-shadow: 0 0 0 0.2rem rgba(147, 197, 253, 0.35);
}

[data-theme="dark"] .page-item.active .page-link {
  color: #ffffff;
  background-color: #2563eb;
  border-color: #2563eb;
}
[data-theme="dark"] .page-item.disabled .page-link {
  color: #6b7280;
  background-color: #0f172a;
  border-color: #374151;
}
[data-theme="dark"] .dropdown-menu {
  background-color: #111827;
  border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .dropdown-item {
  color: #e5e7eb;
}

[data-theme="dark"] .dropdown-item:hover,
[data-theme="dark"] .dropdown-item:focus {
  color: #ffffff;
  background-color: #1f2937; /* NOT white */
}
[data-theme="dark"] .dropdown-item.active,
[data-theme="dark"] .dropdown-item:active {
  background-color: #2563eb;
  color: #ffffff;
}
[data-theme="dark"] .delete-account-link {
  color: #f87171; /* soft red, readable on dark */
}

[data-theme="dark"] .delete-account-link:hover {
  color: #fecaca;
  transform: scale(1.05);
}
[data-theme="dark"] .credits-item {
  color: #e5e7eb;
}

[data-theme="dark"] .credits-item.has-credits {
  color: #93c5fd;
}

[data-theme="dark"] .credits-action {
  color: #60a5fa;
}

[data-theme="dark"] .credits-action:hover {
  color: #bfdbfe;
}
[data-theme="dark"] .credits-item:hover {
  background-color: #1f2937;
}
[data-theme="dark"] .accordion-item {
  background-color: #111827;            /* dark surface */
  border-color: rgba(255, 255, 255, 0.08);
  color: #e5e7eb;
}
[data-theme="dark"] .accordion-button {
  background-color: #111827;
  color: #e5e7eb;
}

[data-theme="dark"] .accordion-button:not(.collapsed) {
  background-color: #1f2937;
  color: #ffffff;
}
[data-theme="dark"] .accordion-button:focus {
  box-shadow: none;
}
[data-theme="dark"] .accordion-button:hover {
  background-color: #1f2937;
}
[data-theme="dark"] .accordion-body {
  background-color: #0f172a;
  color: #e5e7eb;
}
[data-theme="dark"] pre {
  color: #e5e7eb;
  background-color: #0f172a;   /* dark code surface */
}
[data-theme="dark"] .filepond--panel-root {
  background-color: #1f2937;   /* dark surface */
}
[data-theme="dark"] .filepond--drop-label {
  color: #e5e7eb;
}

[data-theme="dark"] .filepond--label-action {
  color: #60a5fa;
}
[data-theme="dark"] .filepond--panel {
  border-color: #374151;
}
[data-theme="dark"] .filepond--item-panel {
  background-color: #111827;
}
[data-theme="dark"] .filepond--file-action-button:hover {
  background-color: rgba(255, 255, 255, 0.08);
}
@media (max-width: 992px) {
  [data-theme="dark"] .navbar .navbar-menu-wrapper.navbar-collapse {
    background-color: #0f172a; /* dark drawer */
  }
}
@media (max-width: 992px) {
  [data-theme="dark"] .navbar .navbar-menu-wrapper.navbar-collapse {
    box-shadow: -10px 0 30px rgba(0, 0, 0, 0.6);
  }
}
@media (max-width: 992px) {
  [data-theme="dark"] .navbar .navbar-nav .nav-link {
    color: #e5e7eb;
  }

  [data-theme="dark"] .navbar .navbar-nav .nav-link:hover {
    background-color: rgba(255, 255, 255, 0.06);
    color: #ffffff;
  }
}
[data-theme="dark"] .navbar-toggler {
  color:white;
  border-color: rgba(255, 255, 255, 0.25);
}

[data-theme="dark"] .navbar-toggler-icon {
  filter: invert(1);
}