/* Dark Mode Overrides for QuizNotion */

/* General body and containers */
[data-theme="dark"] body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
}

[data-theme="dark"] .container {
    color: var(--text-primary);
}

/* Cards and panels */
[data-theme="dark"] .card {
    background-color: var(--card-bg);
    border-color: var(--card-border);
    color: var(--text-primary);
}

[data-theme="dark"] .card-header {
    background-color: var(--bg-tertiary);
    border-bottom-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] .card-footer {
    background-color: var(--bg-tertiary);
    border-top-color: var(--border-color);
    color: var(--text-primary);
}

/* List groups */
[data-theme="dark"] .list-group-item {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] .list-group-item:hover {
    background-color: var(--bg-tertiary);
}

[data-theme="dark"] .list-group-item.active {
    background-color: var(--btn-primary-bg);
    border-color: var(--btn-primary-bg);
}

/* Forms */
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select,
[data-theme="dark"] textarea {
    background-color: var(--input-bg);
    border-color: var(--input-border);
    color: var(--text-primary);
}

[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus,
[data-theme="dark"] textarea:focus {
    background-color: var(--input-bg);
    border-color: var(--input-focus-border);
    color: var(--text-primary);
    box-shadow: 0 0 0 0.25rem rgba(10, 132, 255, 0.25);
}

[data-theme="dark"] .form-control::placeholder {
    color: var(--text-muted);
}

[data-theme="dark"] .form-label {
    color: var(--text-primary);
}

[data-theme="dark"] .form-text {
    color: var(--text-secondary);
}

/* Buttons */
/* Primary buttons - ensure white text in both themes */
.btn-primary,
[data-theme="dark"] .btn-primary {
    background-color: var(--btn-primary-bg);
    border-color: var(--btn-primary-bg);
    color: #ffffff !important;
}

.btn-primary:hover,
[data-theme="dark"] .btn-primary:hover {
    background-color: #0056b3;
    border-color: #0056b3;
    color: #ffffff !important;
}

.btn-primary:focus,
[data-theme="dark"] .btn-primary:focus {
    color: #ffffff !important;
    box-shadow: 0 0 0 0.25rem rgba(10, 132, 255, 0.25);
}

/* Success buttons */
.btn-success,
[data-theme="dark"] .btn-success {
    color: #ffffff !important;
}

/* Danger buttons */
.btn-danger,
[data-theme="dark"] .btn-danger {
    color: #ffffff !important;
}

/* Warning buttons */
.btn-warning,
[data-theme="dark"] .btn-warning {
    color: #212529 !important;
}

/* Info buttons */
.btn-info,
[data-theme="dark"] .btn-info {
    color: #ffffff !important;
}

/* Outline primary buttons */
[data-theme="dark"] .btn-outline-primary {
    color: var(--btn-primary-bg);
    border-color: var(--btn-primary-bg);
}

[data-theme="dark"] .btn-outline-primary:hover {
    background-color: var(--btn-primary-bg);
    border-color: var(--btn-primary-bg);
    color: #ffffff !important;
}

/* Light buttons in dark mode */
[data-theme="dark"] .btn-light {
    background-color: var(--bg-tertiary);
    border-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] .btn-light:hover {
    background-color: var(--bg-secondary);
    border-color: var(--border-color-dark);
    color: var(--text-primary);
}

/* Secondary buttons */
[data-theme="dark"] .btn-secondary {
    background-color: var(--btn-secondary-bg);
    border-color: var(--btn-secondary-bg);
    color: #ffffff !important;
}

[data-theme="dark"] .btn-secondary:hover {
    background-color: #5a5e62;
    border-color: #5a5e62;
    color: #ffffff !important;
}

/* Modals */
[data-theme="dark"] .modal-content {
    background-color: var(--modal-bg);
    border-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] .modal-header {
    border-bottom-color: var(--border-color);
}

[data-theme="dark"] .modal-footer {
    border-top-color: var(--border-color);
}

[data-theme="dark"] .close,
[data-theme="dark"] .btn-close {
    color: var(--text-primary);
    opacity: 0.8;
}

/* Tables */
[data-theme="dark"] .table {
    color: var(--text-primary);
}

[data-theme="dark"] .table td,
[data-theme="dark"] .table th {
    border-color: var(--border-color);
}

[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: rgba(255, 255, 255, 0.02);
}

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

/* Navbar */
.navbar {
    background-color: var(--navbar-bg) !important;
    border-bottom: 1px solid var(--border-color);
}

/* Light mode navbar */
[data-theme="light"] .navbar-light .navbar-brand,
[data-theme="light"] .navbar-light .nav-link {
    color: rgba(0, 0, 0, .85) !important;
}

[data-theme="light"] .navbar-light .nav-link:hover,
[data-theme="light"] .navbar-light .nav-link:focus {
    color: rgba(0, 0, 0, .95) !important;
}

[data-theme="light"] .navbar-light .nav-link.active {
    color: #007bff !important;
    font-weight: 500;
}

[data-theme="light"] .navbar-light .navbar-toggler {
    border-color: rgba(0, 0, 0, .1);
}

/* Dark mode navbar */
[data-theme="dark"] .navbar-dark .navbar-brand,
[data-theme="dark"] .navbar-dark .nav-link {
    color: rgba(255, 255, 255, .85) !important;
}

[data-theme="dark"] .navbar-dark .nav-link:hover,
[data-theme="dark"] .navbar-dark .nav-link:focus {
    color: rgba(255, 255, 255, .95) !important;
}

[data-theme="dark"] .navbar-dark .nav-link.active {
    color: var(--btn-primary-bg) !important;
    font-weight: 500;
}

[data-theme="dark"] .navbar-dark .navbar-toggler {
    border-color: rgba(255, 255, 255, .1);
}

/* Dropdowns */
[data-theme="dark"] .dropdown-menu {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
}

[data-theme="dark"] .dropdown-item {
    color: var(--text-primary);
}

[data-theme="dark"] .dropdown-item:hover,
[data-theme="dark"] .dropdown-item:focus {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
}

[data-theme="dark"] .dropdown-divider {
    border-color: var(--border-color);
}

/* Badges */
[data-theme="dark"] .badge {
    color: var(--text-primary);
}

[data-theme="dark"] .badge.bg-light {
    background-color: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
}

/* Alerts */
[data-theme="dark"] .alert-success {
    background-color: var(--success-bg);
    border-color: var(--success-border);
    color: var(--success-text);
}

[data-theme="dark"] .alert-warning {
    background-color: var(--warning-bg);
    border-color: var(--warning-border);
    color: var(--warning-text);
}

[data-theme="dark"] .alert-danger {
    background-color: var(--danger-bg);
    border-color: var(--danger-border);
    color: var(--danger-text);
}

[data-theme="dark"] .alert-info {
    background-color: var(--info-bg);
    border-color: var(--info-border);
    color: var(--info-text);
}

/* Quiz specific */
[data-theme="dark"] .question-card {
    background-color: var(--question-bg);
    border-color: var(--border-color);
}

[data-theme="dark"] .option-button {
    background-color: var(--option-bg);
    border-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] .option-button:hover {
    background-color: var(--option-hover-bg);
}

[data-theme="dark"] .option-button.selected {
    background-color: var(--option-selected-bg);
    color: var(--option-selected-text);
}

[data-theme="dark"] .option-button.correct {
    background-color: var(--correct-bg);
    border-color: var(--success-border);
    color: var(--success-text);
}

[data-theme="dark"] .option-button.incorrect {
    background-color: var(--incorrect-bg);
    border-color: var(--danger-border);
    color: var(--danger-text);
}

/* AI Assistant */
[data-theme="dark"] .ai-assistant {
    background-color: var(--ai-bg);
    border-color: var(--ai-border);
    color: var(--ai-text);
}

[data-theme="dark"] .ai-response {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
}

/* Progress bars */
[data-theme="dark"] .progress {
    background-color: var(--bg-tertiary);
}

/* Pagination */
[data-theme="dark"] .page-link {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] .page-link:hover {
    background-color: var(--bg-tertiary);
    border-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] .page-item.active .page-link {
    background-color: var(--btn-primary-bg);
    border-color: var(--btn-primary-bg);
}

/* Tooltips */
[data-theme="dark"] .tooltip-inner {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
}

/* Code blocks */
[data-theme="dark"] code {
    background-color: var(--code-bg);
    color: var(--code-text);
}

[data-theme="dark"] pre {
    background-color: var(--pre-bg);
    color: var(--pre-text);
    border-color: var(--border-color);
}

/* Links */
[data-theme="dark"] a {
    color: var(--link-color);
}

[data-theme="dark"] a:hover {
    color: var(--link-hover-color);
}

/* Scrollbars (webkit browsers) */
[data-theme="dark"] ::-webkit-scrollbar {
    background-color: var(--bg-secondary);
}

[data-theme="dark"] ::-webkit-scrollbar-track {
    background-color: var(--bg-secondary);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background-color: var(--bg-tertiary);
    border-radius: 4px;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background-color: var(--border-color);
}

/* Breadcrumbs */
[data-theme="dark"] .breadcrumb {
    background-color: var(--bg-secondary);
}

[data-theme="dark"] .breadcrumb-item + .breadcrumb-item::before {
    color: var(--text-muted);
}

/* Custom classes */
[data-theme="dark"] .bg-light {
    background-color: var(--bg-secondary) !important;
}

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

[data-theme="dark"] .border {
    border-color: var(--border-color) !important;
}

/* Custom button classes - ensure proper text visibility */
[data-theme="dark"] .btn-purple {
    background-color: #6f42c1;
    border-color: #6f42c1;
    color: #ffffff !important;
}

[data-theme="dark"] .btn-purple:hover {
    background-color: #5a32a3;
    border-color: #5a32a3;
    color: #ffffff !important;
}

/* Button links should maintain proper colors */
[data-theme="dark"] a.btn-primary,
[data-theme="dark"] a.btn-success,
[data-theme="dark"] a.btn-danger,
[data-theme="dark"] a.btn-info {
    color: #ffffff !important;
}

[data-theme="dark"] a.btn-warning {
    color: #212529 !important;
}

/* Disabled button states */
[data-theme="dark"] .btn:disabled,
[data-theme="dark"] .btn.disabled {
    opacity: 0.65;
}

[data-theme="dark"] .btn-primary:disabled,
[data-theme="dark"] .btn-primary.disabled {
    background-color: var(--btn-primary-bg);
    border-color: var(--btn-primary-bg);
    color: #ffffff !important;
}

/* Subject cards */
[data-theme="dark"] .subject-card {
    background-color: var(--card-bg);
    border-color: var(--card-border);
    transition: transform 0.2s, box-shadow 0.2s;
}

[data-theme="dark"] .subject-card:hover {
    box-shadow: var(--shadow);
}

/* Quiz list items */
[data-theme="dark"] .quiz-item {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
}

[data-theme="dark"] .quiz-item:hover {
    background-color: var(--bg-tertiary);
}

/* Admin specific */
[data-theme="dark"] .admin-sidebar {
    background-color: var(--bg-secondary);
    border-right-color: var(--border-color);
}

[data-theme="dark"] .admin-sidebar .list-group-item-secondary {
    background-color: var(--bg-tertiary);
    color: var(--text-secondary);
}