/* Dark Mode Global Styles */

/* Body & Background */
body.dark-mode {
    background: #1a1a2e;
    color: #e0e0e0;
}

/* Header */
body.dark-mode .main-header {
    background: rgba(26, 26, 46, 0.95);
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
}

body.dark-mode .main-header.scrolled {
    background: rgba(26, 26, 46, 0.98);
}

body.dark-mode .logo h1 {
    color: #ff6b6b;
}

body.dark-mode .logo h1 i {
    color: #ff6b6b;
}

body.dark-mode .nav-menu a {
    color: #e0e0e0;
}

body.dark-mode .nav-menu a:hover,
body.dark-mode .nav-menu a.active {
    color: #ff6b6b;
}

body.dark-mode .icon-btn {
    background: #2a2a3e;
    color: #ff6b6b;
}

body.dark-mode .icon-btn:hover {
    background: #ff6b6b;
    color: #fff;
}

body.dark-mode .burger-menu span {
    background: #ff6b6b;
}

body.dark-mode .burger-menu.active span {
    background: #ff6b6b;
}

body.dark-mode .nav-menu {
    background: rgba(26, 26, 46, 0.98);
}

/* Hero Section */
body.dark-mode .hero {
    background: 
        linear-gradient(135deg, rgba(26, 26, 46, 0.9) 0%, rgba(40, 20, 30, 0.95) 100%),
        url('../assets/new.svg') center/cover no-repeat;
}

body.dark-mode .hero::before {
    background: linear-gradient(45deg, rgba(255, 107, 107, 0.4) 0%, transparent 50%);
}

/* Buttons */
body.dark-mode .btn-primary {
    background: #ff6b6b;
}

body.dark-mode .btn-primary:hover {
    background: #ff5252;
}

body.dark-mode .btn-outline {
    color: #ff6b6b;
    border-color: #ff6b6b;
}

body.dark-mode .btn-outline:hover {
    background: #ff6b6b;
    color: #1a1a2e;
}

/* Features Section */
body.dark-mode .features {
    background: #16213e;
}

body.dark-mode .section-title {
    color: #e0e0e0;
}

body.dark-mode .feature-card {
    background: #2a2a3e;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

body.dark-mode .feature-card h3 {
    color: #e0e0e0;
}

body.dark-mode .feature-card p {
    color: #b0b0b0;
}

body.dark-mode .feature-icon {
    color: #ff6b6b;
}

body.dark-mode .feature-card:nth-child(even) .feature-icon {
    color: #ff8888;
}

/* Footer */
body.dark-mode .main-footer {
    background: #0f0f1e;
}

body.dark-mode .footer-section h3,
body.dark-mode .footer-section h4 {
    color: #e0e0e0;
}

body.dark-mode .footer-section p {
    color: #b0b0b0;
}

body.dark-mode .footer-section a {
    color: #b0b0b0;
}

body.dark-mode .footer-section a:hover {
    color: #ff6b6b;
}

body.dark-mode .footer-bottom {
    border-top-color: #2a2a3e;
    color: #b0b0b0;
}

/* Login Page */
body.dark-mode.login-page {
    background: #1a1a2e;
}

body.dark-mode .login-box {
    background: rgba(42, 42, 62, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

body.dark-mode .login-header h2 {
    color: #e0e0e0;
}

body.dark-mode .login-header p {
    color: #b0b0b0;
}

body.dark-mode .logo-login h1 {
    color: #ff6b6b;
}

body.dark-mode .logo-login i {
    color: #ff6b6b;
}

body.dark-mode .form-group label {
    color: #e0e0e0;
}

body.dark-mode .form-group input {
    background: #2a2a3e;
    border-color: #3a3a4e;
    color: #e0e0e0;
}

body.dark-mode .form-group input:focus {
    background: #2a2a3e;
    border-color: #ff6b6b;
}

body.dark-mode .toggle-password {
    color: #b0b0b0;
}

body.dark-mode .toggle-password:hover {
    color: #ff6b6b;
}

body.dark-mode .divider {
    color: #b0b0b0;
}

body.dark-mode .divider::before,
body.dark-mode .divider::after {
    border-bottom-color: #3a3a4e;
}

body.dark-mode .alert-error {
    background: rgba(255, 107, 107, 0.2);
    border-color: rgba(255, 107, 107, 0.3);
    color: #ff6b6b;
}

/* Admin Pages */
body.dark-mode.admin-page {
    background: #16213e;
}

body.dark-mode .admin-header {
    background: #1a1a2e;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

body.dark-mode .admin-logo h1 {
    color: #ff6b6b;
}

body.dark-mode .admin-logo i {
    color: #ff6b6b;
}

body.dark-mode .user-name {
    color: #e0e0e0;
}

body.dark-mode .user-role {
    color: #b0b0b0;
}

body.dark-mode .page-header h2 {
    color: #e0e0e0;
}

body.dark-mode .page-header p {
    color: #b0b0b0;
}

body.dark-mode .stat-card {
    background: #2a2a3e;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

/* Keep same colors for animated lines in dark mode */
body.dark-mode .stat-card:nth-child(1)::after {
    background: #ff6b6b;
}

body.dark-mode .stat-card:nth-child(2)::after {
    background: #ff6b6b;
}

body.dark-mode .stat-card:nth-child(3)::after {
    background: #4ade80;
}

body.dark-mode .stat-card:nth-child(4)::after {
    background: #fbbf24;
}

body.dark-mode .stat-info h3 {
    color: #b0b0b0;
}

body.dark-mode .stat-number {
    color: #e0e0e0;
}

body.dark-mode .welcome-card {
    background: linear-gradient(135deg, #2a2a3e 0%, #1a1a2e 100%);
}

/* Smooth Transition */
body,
.main-header,
.hero,
.features,
.feature-card,
.main-footer,
.login-box,
.form-group input,
.admin-header,
.stat-card,
.welcome-card {
    transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Admin Sidebar */
body.dark-mode .admin-sidebar {
    background: #1a1a2e;
    border-right-color: #2a2a3e;
}

body.dark-mode .sidebar-logo h2 {
    color: #e0e0e0;
}

body.dark-mode .sidebar-item {
    color: #b0b0b0;
}

body.dark-mode .sidebar-item:hover,
body.dark-mode .sidebar-item.active {
    background: #2a2a3e;
    color: #ff6b6b;
}

body.dark-mode .sidebar-action {
    background: #2a2a3e;
    color: #b0b0b0;
}

body.dark-mode .sidebar-action:hover {
    background: #ff6b6b;
    color: #fff;
}

body.dark-mode .logout-full {
    background: #2a2a3e;
    color: #ff6b6b;
}

body.dark-mode .logout-full:hover {
    background: #ff6b6b;
    color: #fff;
}

/* Admin Content */
body.dark-mode .admin-container {
    background: #16213e;
}

body.dark-mode .page-content {
    background: #1a1a2e;
}

body.dark-mode .page-title h2 {
    color: #e0e0e0;
}

body.dark-mode .page-title p {
    color: #b0b0b0;
}

/* Cards */
body.dark-mode .subject-card,
body.dark-mode .question-card {
    background: #2a2a3e;
    border-color: #3a3a4e;
}

body.dark-mode .subject-card:hover,
body.dark-mode .question-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

body.dark-mode .subject-info h3,
body.dark-mode .question-text {
    color: #e0e0e0;
}

body.dark-mode .meta-item span {
    color: #b0b0b0;
}

/* Filters */
body.dark-mode .filters-section {
    background: #2a2a3e;
    border-color: #3a3a4e;
}

body.dark-mode .filter-group label {
    color: #e0e0e0;
}

body.dark-mode .filter-group select,
body.dark-mode .search-box input {
    background: #1a1a2e;
    border-color: #3a3a4e;
    color: #e0e0e0;
}

body.dark-mode .filter-group select:focus,
body.dark-mode .search-box input:focus {
    border-color: #ff6b6b;
}

/* Modal */
body.dark-mode .modal {
    background: rgba(0, 0, 0, 0.7);
}

body.dark-mode .modal-content {
    background: #2a2a3e;
}

body.dark-mode .modal-header {
    border-bottom-color: #3a3a4e;
}

body.dark-mode .modal-header h3 {
    color: #e0e0e0;
}

body.dark-mode .modal-close {
    color: #b0b0b0;
}

body.dark-mode .modal-close:hover {
    background: #3a3a4e;
    color: #e0e0e0;
}

body.dark-mode .modal-footer {
    border-top-color: #3a3a4e;
}

body.dark-mode .form-control {
    background: #1a1a2e;
    border-color: #3a3a4e;
    color: #e0e0e0;
}

body.dark-mode .form-control:focus {
    border-color: #ff6b6b;
}

body.dark-mode .btn-add-option {
    background: #1a1a2e;
    border-color: #3a3a4e;
    color: #ff6b6b;
}

body.dark-mode .btn-add-option:hover {
    background: #2a2a3e;
    border-color: #ff6b6b;
}

body.dark-mode .btn-secondary {
    background: #3a3a4e;
    color: #e0e0e0;
}

body.dark-mode .btn-secondary:hover {
    background: #4a4a5e;
}

/* Options */
body.dark-mode .option-item {
    background: #1a1a2e;
    border-color: #3a3a4e;
}

body.dark-mode .option-item.correct {
    background: rgba(76, 175, 80, 0.2);
    border-color: #4caf50;
}

body.dark-mode .option-text {
    color: #e0e0e0;
}

body.dark-mode .option-item.correct .option-text {
    color: #4caf50;
}

/* Empty State */
body.dark-mode .empty-state {
    color: #b0b0b0;
}

body.dark-mode .empty-state i {
    color: #3a3a4e;
}

/* Option Input Groups */
body.dark-mode .option-input-group {
    background: #1a1a2e;
    border-color: #3a3a4e;
}

body.dark-mode .option-input-group:hover {
    border-color: #ff6b6b;
}

body.dark-mode .option-input-group .form-control {
    background: #2a2a3e;
}

/* Back Button */
body.dark-mode .back-button {
    color: #ff6b6b;
}

body.dark-mode .back-button:hover {
    background: rgba(255, 107, 107, 0.1);
}

/* Search Box */
body.dark-mode .search-box input {
    background: #2a2a3e;
    border-color: #3a3a4e;
    color: #e0e0e0;
}

body.dark-mode .search-box input:focus {
    border-color: #ff6b6b;
    box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.1);
}

body.dark-mode .search-box i {
    color: #b0b0b0;
}

/* Buttons */
body.dark-mode .btn-add {
    background: #ff6b6b;
}

body.dark-mode .btn-add:hover {
    background: #ff5252;
}

body.dark-mode .btn-view {
    background: #2196f3;
}

body.dark-mode .btn-view:hover {
    background: #1976d2;
}

body.dark-mode .btn-edit {
    background: rgba(33, 150, 243, 0.2);
    color: #2196f3;
}

body.dark-mode .btn-edit:hover {
    background: #2196f3;
    color: #fff;
}

body.dark-mode .btn-delete {
    background: rgba(255, 107, 107, 0.2);
    color: #ff6b6b;
}

body.dark-mode .btn-delete:hover {
    background: #ff6b6b;
    color: #fff;
}