:root {
    --light-background: #f8f9fa;
    --light-text-color: #212529;
    --light-card-background: #ffffff;
    --light-shadow-color: rgba(0, 0, 0, 0.1);
    --light-border-color: #dee2e6;
}

.dark-mode {
    --dark-background: #181a1b;
    --dark-text-color: #f5f6fa;
    --dark-card-background: #23272b;
    --dark-shadow-color: rgba(0, 0, 0, 0.5);
    --dark-border-color: #222326;
    --dark-header-background: #202225;
    --dark-sidebar-background: #23272b;
    --dark-search-background: #23272b;
    --dark-search-border: #353b48;
}

body.dark-mode {
    background-color: var(--dark-background);
    color: var(--dark-text-color) !important;
}

body.dark-mode * {
    color: var(--dark-text-color) !important;
    text-shadow: none !important;
}

body.dark-mode .text-primary {
    color: #92baff !important;
}

body.dark-mode .text-info {
    color: #6edff6 !important;
}

body.dark-mode .text-success {
    color: #82e29e !important;
}

body.dark-mode .text-warning {
    color: #ffe68f !important;
}

body.dark-mode .text-dark,
body.dark-mode .text-muted,
body.dark-mode .text-secondary,
body.dark-mode .text-light,
body.dark-mode .text-white {
    color: var(--dark-text-color) !important;
}

body.dark-mode .counter-card h4 .material-icons {
    color: var(--dark-text-color) !important;
}

body.dark-mode #pageVisits {
    color: #92baff !important;
}

body.dark-mode #apiRequests {
    color: #82e29e !important;
}

body.dark-mode .hero-section {
    background-color: var(--dark-background) !important;
}

body.dark-mode .hero-section h1,
body.dark-mode .hero-section p {
    color: var(--dark-text-color) !important;
}

body.dark-mode .bg-white {
    background-color: var(--dark-background) !important;
}

body.dark-mode .bg-light {
    background-color: var(--dark-background) !important;
}

body.dark-mode .card {
    background-color: var(--dark-card-background);
    color: var(--dark-text-color);
    box-shadow: 0 4px 15px var(--dark-shadow-color) !important;
    border: 1px solid var(--dark-border-color);
}

body.dark-mode .card-style {
    background-color: var(--dark-card-background);
    color: var(--dark-text-color);
    box-shadow: 0 4px 15px var(--dark-shadow-color) !important;
    border: 1px solid var(--dark-border-color);
}

body.dark-mode .modal-content-anim {
    background-color: var(--dark-card-background) !important;
    color: var(--dark-text-color);
}

body.dark-mode .form-control {
    background-color: #4a4a4a;
    color: var(--dark-text-color);
    border: 1px solid var(--dark-border-color);
}

body.dark-mode .form-control::placeholder {
    color: #b0b0b0;
}

body.dark-mode .btn-secondary {
    background-color: #5a6268;
    border-color: #545b62;
    color: #fff;
}

body.dark-mode .btn-secondary:hover {
    background-color: #4a5157;
    border-color: #43494e;
}

body.dark-mode .counter-card {
    background-color: var(--dark-card-background);
}

body.dark-mode .text-muted {
    color: #b0b0b0 !important;
}

body.dark-mode .animated-text {
    color: var(--dark-text-color) !important;
    text-shadow: none !important;
}

/* SweetAlert2 Dark Mode Overrides */

/* Premium card dark override */
body.dark-mode .premium-card {
  background: linear-gradient(135deg, #23272b 0%, #23272b 100%) !important;
  color: #ffd700 !important;
  border-color: #ffd700 !important;
}

/* Copy button dark override */
body.dark-mode .copy-btn {
  background: #353b48 !important;
  color: var(--dark-text-color) !important;
  border: 1px solid var(--dark-border-color) !important;
}
body.dark-mode .copy-btn:hover {
  background: #23272b !important;
}

/* Verification card dark override */
body.dark-mode .verify-card {
  background: var(--dark-card-background) !important;
  color: var(--dark-text-color) !important;
  border: 1px solid var(--dark-border-color) !important;
}
body.dark-mode .verify-title,
body.dark-mode .verify-result {
  color: var(--dark-text-color) !important;
}

/* Input dentro de verify-card en dark mode */
body.dark-mode .verify-card .form-control,
body.dark-mode .verify-card input[type="text"],
body.dark-mode .verify-card input[type="password"],
body.dark-mode .verify-card input[type="email"] {
  background: #23272b !important;
  color: var(--dark-text-color) !important;
  border: 1.5px solid var(--dark-border-color) !important;
  box-shadow: 0 2px 8px var(--dark-shadow-color, rgba(0,0,0,0.18));
}
body.dark-mode .verify-card .form-control::placeholder,
body.dark-mode .verify-card input[type="text"]::placeholder,
body.dark-mode .verify-card input[type="password"]::placeholder,
body.dark-mode .verify-card input[type="email"]::placeholder {
  color: #b0b0b0 !important;
  opacity: 1;
}


/* Dashboard icon dark override */
body.dark-mode .dashboard-icon {
  background: #23272b !important;
  color: #ffd700 !important;
  box-shadow: 0 2px 12px var(--dark-shadow-color) !important;
}

/* Dashboard label/value/subtext dark override */
body.dark-mode .dashboard-label,
body.dark-mode .dashboard-value,
body.dark-mode .dashboard-subtext {
  color: var(--dark-text-color) !important;
}

/* Perfil dark mode */
body.dark-mode .profile-card {
  background: #23272b !important;
  color: var(--dark-text-color, #fff) !important;
  border-radius: 14px;
  box-shadow: 0 2px 12px #0005;
}
body.dark-mode .profile-label {
  color: #ffd700 !important;
}
body.dark-mode .profile-value {
  color: #fff !important;
}
body.dark-mode .profile-btn {
  background: #23272b !important;
  color: #ffd700 !important;
  border: 1px solid #ffd700 !important;
}
body.dark-mode .profile-btn:hover {
  background: #ffd700 !important;
  color: #23272b !important;
}
body.dark-mode .profile-eye-btn {
  color: #ffd700 !important;
}
body.dark-mode .profile-eye-btn:hover {
  color: #fff !important;
}


/* MODAL CAMBIO DE CONTRASEÑA DARK MODE */
#change-password-modal .modal-content,
.dark-mode-modal {
  background: #23272b !important;
  color: #fff !important;
  border-radius: 14px !important;
  box-shadow: 0 2px 16px #000a !important;
}
#change-password-modal input[type="password"],
#change-password-modal input[type="text"],
#change-password-modal input[type="email"] {
  background: #181a1b !important;
  color: #fff !important;
  border: 1.5px solid #ffd700 !important;
  border-radius: 7px !important;
  padding: 10px 12px !important;
  font-size: 1em;
  margin-bottom: 10px;
  box-shadow: none !important;
  transition: border 0.2s, background 0.2s;
}
#change-password-modal input[type="password"]:focus,
#change-password-modal input[type="text"]:focus,
#change-password-modal input[type="email"]:focus {
  outline: none !important;
  border: 2px solid #ffd700 !important;
  background: #23272b !important;
}
#change-password-modal label {
  color: #ffd700 !important;
  font-weight: 500;
  margin: 5px 0 2px 0;
  font-size: 1em;
}
#change-password-modal .modal-actions button,
#change-password-modal .btn-yellow {
  background: #ffd700 !important;
  color: #23272b !important;
  border: none !important;
  border-radius: 7px !important;
  font-weight: 700;
  font-size: 1.09em;
  box-shadow: none !important;
  padding: 10px 0 !important;
  margin: 0 auto 0 auto;
  width: 100% !important;
  max-width: 130px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
#change-password-modal .modal-actions button:hover,
#change-password-modal .btn-yellow:hover {
  background: #ffe082 !important;
  color: #181a1b !important;
}
#change-password-modal .btn-outline-yellow {
  background: none !important;
  color: #ffd700 !important;
  border: 1.5px solid #ffd700 !important;
  border-radius: 7px !important;
  font-weight: 700;
  font-size: 1.09em;
  box-shadow: none !important;
  padding: 10px 0 !important;
  margin: 0 auto 0 auto;
  width: 100% !important;
  max-width: 130px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
#change-password-modal .btn-outline-yellow:hover {
  background: #ffd70022 !important;
  color: #fff !important;
}
#change-password-btn {
  background: #ffd700 !important;
  color: #23272b !important;
  border: none !important;
  border-radius: 7px !important;
  font-weight: 700;
  font-size: 1.09em;
  box-shadow: none !important;
  padding: 12px 0 !important;
  margin: 16px 0 0 0 !important;
  width: 100% !important;
  max-width: 260px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  display: block;
}
#change-password-btn:hover {
  background: #ffe082 !important;
  color: #181a1b !important;
}

body.dark-mode .sidebar-nav-wrapper,
body.dark-mode .sidebar-nav-wrapper.active {
  background: var(--dark-sidebar-background, #23272b) !important;
  color: var(--dark-text-color) !important;
  border-right: 1.5px solid var(--dark-border-color) !important;
}
body.dark-mode .sidebar-profile-section {
  background: #202225 !important;
  color: var(--dark-text-color) !important;
  border-bottom: 1.5px solid var(--dark-border-color) !important;
}
body.dark-mode .sidebar-profile-section .profile-img {
  border-color: #ffd700 !important;
}

/* Dropdown sidebar dark mode */
body.dark-mode .dropdown-nav-custom,
body.dark-mode .dropdown-nav-custom.collapse,
body.dark-mode .dropdown-nav-custom.show {
  background: #23272b !important;
  color: var(--dark-text-color) !important;
  border-radius: 0 0 8px 8px !important;
  border: none !important;
}
body.dark-mode .dropdown-nav-custom li a {
  color: var(--dark-text-color) !important;
}
body.dark-mode .dropdown-nav-custom li a:hover {
  color: #ffd700 !important;
  background: #181a1b !important;
}

body.dark-mode .navbar-logo.text-center {
  background: transparent !important;
  color: var(--dark-text-color) !important;
}

body.dark-mode .dashboard-subtext.success { color: #43cea2 !important; }
body.dark-mode .dashboard-subtext.online { color: #2193b0 !important; }

/* Verificar button dark mode override */
body.dark-mode .main-btn.light-btn.btn-rounded-full.btn-hover.w-100,
body.dark-mode .main-btn.light-btn.btn-rounded-full.btn-hover,
body.dark-mode .main-btn.light-btn.btn-rounded-full,
body.dark-mode .main-btn.light-btn {
  background: #23272b !important;
  color: var(--dark-text-color) !important;
  border: 1.5px solid var(--dark-border-color) !important;
  box-shadow: 0 2px 8px var(--dark-shadow-color, rgba(0,0,0,0.18));
}
body.dark-mode .main-btn.light-btn.btn-rounded-full.btn-hover.w-100:hover,
body.dark-mode .main-btn.light-btn.btn-rounded-full.btn-hover:hover,
body.dark-mode .main-btn.light-btn.btn-rounded-full:hover,
body.dark-mode .main-btn.light-btn:hover {
  background: #181a1b !important;
  color: #ffd700 !important;
  border-color: #ffd700 !important;
}


/* Header music toggle and logout buttons dark mode fix */
body.dark-mode #music-toggle.music-toggle-btn-custom,
body.dark-mode .logout-btn-custom {
  background: #23272b !important;
  color: var(--dark-text-color) !important;
  border: 1px solid var(--dark-border-color) !important;
  box-shadow: 0 2px 8px var(--dark-shadow-color, rgba(0,0,0,0.18));
}
body.dark-mode #music-toggle.music-toggle-btn-custom:hover,
body.dark-mode .logout-btn-custom:hover {
  background: #181a1b !important;
  color: #ffd700 !important;
  border-color: #ffd700 !important;
}


body.dark-mode .swal2-popup {
    background-color: var(--dark-card-background) !important;
    color: var(--dark-text-color) !important;
    border: 1px solid var(--dark-border-color) !important;
    box-shadow: 0 4px 15px var(--dark-shadow-color) !important;
}

body.dark-mode .swal2-title {
    color: var(--dark-text-color) !important;
}

body.dark-mode .swal2-html-container {
    color: var(--dark-text-color) !important;
}

body.dark-mode .swal2-input {
    background-color: #4a4a4a !important;
    color: var(--dark-text-color) !important;
    border: 1px solid var(--dark-border-color) !important;
}

body.dark-mode .swal2-styled {
    background-color: #6c757d !important; /* Adjust button color for dark mode */
    color: #fff !important;
}

body.dark-mode .swal2-styled.swal2-confirm {
    background-color: #0d6efd !important; /* Primary button color for dark mode */
}

body.dark-mode .swal2-styled.swal2-cancel {
    background-color: #dc3545 !important; /* Danger button color for dark mode */
}