/* Light Theme (Default) */
body {
    background-color: #f0f0f0;
    color: #212529;
}
.form-control::placeholder {
    color: gray;
}

/* --- Dark Theme --- */
html[data-theme="dark"] body {
    background-color: #212529;
    color: #f8f9fa;
}
html[data-theme="dark"] .card,
html[data-theme="dark"] .list-group-item,
html[data-theme="dark"] footer.fixed-bottom,
html[data-theme="dark"] .alert-info {
    background-color: #343a40 !important;
    border-color: #495057 !important;
    color: #f8f9fa;
}
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select {
    background-color: #343a40;
    color: #f8f9fa;
    border-color: #495057;
}
html[data-theme="dark"] .text-muted {
    color: #f8f9fa !important;
    opacity: 0.7;
}
html[data-theme="dark"] .navbar {
    background-color: #343a40 !important;
}

/* --- Light Blue Theme --- */
html[data-theme="light-blue"] body {
    background-color: #c4e2fa;
    color: #1f242d;
}
html[data-theme="light-blue"] .card,
html[data-theme="light-blue"] .list-group-item,
html[data-theme="light-blue"] footer.fixed-bottom,
html[data-theme="light-blue"] .alert-info {
    background-color: #e3f2fd !important;
    border-color: #90caf9 !important;
    color: #0d47a1;
}
html[data-theme="light-blue"] .form-control,
html[data-theme="light-blue"] .form-select {
    background-color: #d8ebf9;
    color: #0d47a1;
    border-color: #90caf9;
}
html[data-theme="light-blue"] .navbar {
    background-color: #0d47a1 !important;
}
html[data-theme="light-blue"] .btn-primary {
    background-color: #1976d2;
    border-color: #1976d2;
}

/* --- Dark Blue Theme --- */
html[data-theme="dark-blue"] body {
    background-color: #0d1b2a;
    color: #e0e1dd;
}
html[data-theme="dark-blue"] .card,
html[data-theme="dark-blue"] .list-group-item,
html[data-theme="dark-blue"] footer.fixed-bottom,
html[data-theme="dark-blue"] .alert-info {
    background-color: #1b263b !important;
    border-color: #415a77 !important;
    color: #e0e1dd;
}
html[data-theme="dark-blue"] .form-control,
html[data-theme="dark-blue"] .form-select {
    background-color: #1b263b;
    color: #e0e1dd;
    border-color: #415a77;
}
html[data-theme="dark-blue"] .text-muted {
    color: #e0e1dd !important;
    opacity: 0.7;
}
html[data-theme="dark-blue"] .navbar {
    background-color: #1b263b !important;
}
html[data-theme="dark-blue"] .btn-primary {
    background-color: #415a77;
    border-color: #415a77;
}

/* --- General Overrides --- */
.list-group-item a {
    color: inherit; /* Inherit color from parent */
}

/* --- Dropdowns --- */
html[data-theme="dark"] .dropdown-menu {
    background-color: #343a40;
    border-color: #495057;
}
html[data-theme="dark"] .dropdown-item {
    color: #f8f9fa;
}
html[data-theme="dark"] .dropdown-item:hover,
html[data-theme="dark"] .dropdown-item:focus {
    background-color: #495057;
    color: #f8f9fa;
}

html[data-theme="light-blue"] .dropdown-menu {
    background-color: #bbdefb;
    border-color: #90caf9;
}
html[data-theme="light-blue"] .dropdown-item {
    color: #0d47a1;
}
html[data-theme="light-blue"] .dropdown-item:hover,
html[data-theme="light-blue"] .dropdown-item:focus {
    background-color: #90caf9;
    color: #0d47a1;
}

html[data-theme="dark-blue"] .dropdown-menu {
    background-color: #1b263b;
    border-color: #415a77;
}
html[data-theme="dark-blue"] .dropdown-item {
    color: #e0e1dd;
}
html[data-theme="dark-blue"] .dropdown-item:hover,
html[data-theme="dark-blue"] .dropdown-item:focus {
    background-color: #415a77;
    color: #e0e1dd;
}


/* --- Toasts --- */
.toast .toast-header {
    border-bottom: 1px solid rgba(0, 0, 0, 0.05); /* Ensure a separator */
}
html[data-theme="dark"] .toast {
    border: 1px solid #495057;
}
html[data-theme="dark"] .toast .toast-body {
    background-color: #343a40;
    color: #f8f9fa;
}

html[data-theme="light-blue"] .toast {
    border: 1px solid #90caf9;
}
html[data-theme="light-blue"] .toast .toast-body {
    background-color: #bbdefb;
    color: #0d47a1;
}

html[data-theme="dark-blue"] .toast {
    border: 1px solid #415a77;
}
html[data-theme="dark-blue"] .toast .toast-body {
    background-color: #1b263b;
    color: #e0e1dd;
}


/* --- Outline Buttons --- */
html[data-theme="dark"] .btn-outline-secondary { color: #adb5bd; border-color: #adb5bd; }
html[data-theme="dark"] .btn-outline-secondary:hover { background-color: #adb5bd; color: #212529; }
html[data-theme="dark"] .btn-outline-primary { color: #0d6efd; border-color: #0d6efd; }
html[data-theme="dark"] .btn-outline-primary:hover { background-color: #0d6efd; color: #fff; }
html[data-theme="dark"] .btn-outline-success { color: #198754; border-color: #198754; }
html[data-theme="dark"] .btn-outline-success:hover { background-color: #198754; color: #fff; }
html[data-theme="dark"] .btn-outline-danger { color: #dc3545; border-color: #dc3545; }
html[data-theme="dark"] .btn-outline-danger:hover { background-color: #dc3545; color: #fff; }

html[data-theme="light-blue"] .btn-outline-secondary { color: #0d47a1; border-color: #0d47a1; }
html[data-theme="light-blue"] .btn-outline-secondary:hover { background-color: #0d47a1; color: #e3f2fd; }

html[data-theme="dark-blue"] .btn-outline-secondary { color: #778da9; border-color: #778da9; }
html[data-theme="dark-blue"] .btn-outline-secondary:hover { background-color: #778da9; color: #0d1b2a; }


/* --- Progress Bar --- */
html[data-theme="dark"] .progress { background-color: #495057; }
html[data-theme="light-blue"] .progress { background-color: #afd6f6; }
html[data-theme="dark-blue"] .progress { background-color: #415a77; }

/* --- Audio player slider --- */
html[data-theme="dark"] .form-range::-webkit-slider-runnable-track { background: #495057; }
html[data-theme="light-blue"] .form-range::-webkit-slider-runnable-track { background: #afd6f6; }
html[data-theme="dark-blue"] .form-range::-webkit-slider-runnable-track { background: #415a77; }

/* --- Shuffle button active state --- */
html[data-theme="dark"] #shuffle-btn.active { color: white }
html[data-theme="light-blue"] #shuffle-btn.active { color: white; background-color: #0d47a1; }
html[data-theme="dark-blue"] #shuffle-btn.active { color: white; background-color: #778da9; }

/* --- Sleep Timer Modal --- */
html[data-theme="dark"] .modal-content {
    background-color: #212529;
    color: #f8f9fa;
    border-color: #495057;
}

html[data-theme="light-blue"] .modal-content {
    background-color: #e3f2fd;
    border-color: #90caf9;
    color: #0d47a1;
}

html[data-theme="dark-blue"] .modal-content {
    background-color: #1b263b;
    border-color: #415a77;
    color: #e0e1dd;
}