/**
 * Right Foundation Academy - Dark Mode Styles
 * Premium dark theme with proper color adjustments
 */

/* ==================== DARK MODE BASE ==================== */

[data-theme="dark"] {
    
    /* Background Colors */
    --bg-primary: #1a1a1a;
    --bg-secondary: #252525;
    --bg-tertiary: #2f2f2f;
    
    /* Text Colors */
    --text-primary: #ffffff;
    --text-secondary: #b0b0b0;
    --text-tertiary: #808080;
    
    /* Border & Divider */
    --border-color: #404040;
    
    /* Shadows (darker and more prominent) */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.6);
    --shadow-xl: 0 12px 24px rgba(0, 0, 0, 0.7);
}

/* ==================== BODY & LAYOUT ==================== */

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

[data-theme="dark"] .section {
    background: var(--bg-primary);
}

[data-theme="dark"] .section-alt {
    background: var(--bg-secondary);
}

/* ==================== TYPOGRAPHY ==================== */

[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6 {
    color: var(--text-primary);
}

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

/* ==================== NAVIGATION ==================== */

[data-theme="dark"] .navbar {
    background: var(--bg-secondary);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .navbar.scrolled {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.7);
}

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

[data-theme="dark"] .nav-link:hover {
    background: rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .nav-link.active {
    background: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .hamburger-line {
    background: var(--text-primary);
}

/* ==================== ANNOUNCEMENT BAR ==================== */

[data-theme="dark"] .announcement-bar {
    background: linear-gradient(135deg, #0d2d5e 0%, #1e5a9a 100%);
}

/* ==================== BUTTONS ==================== */

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

[data-theme="dark"] .btn-outline-primary:hover {
    background: var(--primary-color);
    color: white;
}

[data-theme="dark"] .btn-outline-secondary {
    border-color: var(--secondary-color);
    color: var(--secondary-color);
}

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

/* ==================== CARDS ==================== */

[data-theme="dark"] .card {
    background: var(--bg-secondary);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-color);
}

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

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

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

/* ==================== FORMS ==================== */

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

[data-theme="dark"] .form-control:focus {
    background: var(--bg-tertiary);
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(10, 36, 99, 0.3);
}

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

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

/* ==================== MOBILE MENU ==================== */

[data-theme="dark"] .mobile-menu-container {
    background: var(--bg-secondary);
    box-shadow: -2px 0 20px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .mobile-menu-header {
    background: var(--bg-tertiary);
}

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

[data-theme="dark"] .mobile-nav-link:hover,
[data-theme="dark"] .mobile-nav-link.active {
    background: rgba(255, 255, 255, 0.05);
}

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

[data-theme="dark"] .mobile-social-links a {
    background: rgba(255, 255, 255, 0.05);
}

/* ==================== HERO SECTION ==================== */

[data-theme="dark"] .hero {
    background: linear-gradient(135deg, #0a1a33 0%, #1e3a5f 100%);
}

[data-theme="dark"] .hero-overlay {
    background: rgba(0, 0, 0, 0.5);
}

/* ==================== STATISTICS ==================== */

[data-theme="dark"] .stat-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
}

/* ==================== FOOTER ==================== */

[data-theme="dark"] .footer {
    background: var(--bg-tertiary);
}

[data-theme="dark"] .footer-newsletter {
    background: rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .footer-bottom {
    background: rgba(0, 0, 0, 0.4);
}

/* ==================== TABLES ==================== */

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

[data-theme="dark"] thead {
    background: var(--bg-tertiary);
}

[data-theme="dark"] tbody tr {
    border-bottom-color: var(--border-color);
}

[data-theme="dark"] tbody tr:hover {
    background: var(--bg-tertiary);
}

/* ==================== MODALS ==================== */

[data-theme="dark"] .modal-alert-container,
[data-theme="dark"] .modal-confirm-container {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
}

[data-theme="dark"] .modal-alert-title,
[data-theme="dark"] .modal-confirm-title {
    color: var(--text-primary);
}

[data-theme="dark"] .modal-alert-message,
[data-theme="dark"] .modal-confirm-message {
    color: var(--text-secondary);
}

/* ==================== ALERTS ==================== */

[data-theme="dark"] .alert {
    border-left-width: 4px;
}

[data-theme="dark"] .alert-success {
    background: rgba(39, 174, 96, 0.15);
    border-left-color: var(--success-color);
}

[data-theme="dark"] .alert-error {
    background: rgba(231, 76, 60, 0.15);
    border-left-color: var(--danger-color);
}

[data-theme="dark"] .alert-warning {
    background: rgba(243, 156, 18, 0.15);
    border-left-color: var(--warning-color);
}

[data-theme="dark"] .alert-info {
    background: rgba(52, 152, 219, 0.15);
    border-left-color: var(--info-color);
}

/* ==================== BREADCRUMBS ==================== */

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

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

[data-theme="dark"] .breadcrumb-separator {
    color: var(--text-tertiary);
}

/* ==================== PAGINATION ==================== */

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

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

[data-theme="dark"] .pagination-item.active {
    background: var(--primary-color);
    color: white;
}

/* ==================== ACCORDIONS ==================== */

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

[data-theme="dark"] .accordion-body {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    border-color: var(--border-color);
}

/* ==================== TABS ==================== */

[data-theme="dark"] .tab-item {
    color: var(--text-secondary);
    border-bottom-color: var(--border-color);
}

[data-theme="dark"] .tab-item.active {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
}

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

/* ==================== DROPDOWNS ==================== */

[data-theme="dark"] .dropdown-menu {
    background: var(--bg-secondary);
    border-color: var(--border-color);
    box-shadow: var(--shadow-lg);
}

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

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

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

/* ==================== TOOLTIPS ==================== */

[data-theme="dark"] .tooltip {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

/* ==================== BADGES ==================== */

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

/* ==================== PROGRESS BARS ==================== */

[data-theme="dark"] .progress-bar {
    background: var(--bg-tertiary);
}

/* ==================== SKELETONS ==================== */

[data-theme="dark"] .loading-skeleton {
    background: linear-gradient(
        90deg,
        var(--bg-secondary) 0%,
        var(--bg-tertiary) 50%,
        var(--bg-secondary) 100%
    );
}

/* ==================== GALLERY ==================== */

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

[data-theme="dark"] .gallery-overlay {
    background: rgba(0, 0, 0, 0.8);
}

/* ==================== TESTIMONIALS ==================== */

[data-theme="dark"] .testimonial-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
}

/* ==================== TIMELINE ==================== */

[data-theme="dark"] .timeline-item {
    border-left-color: var(--border-color);
}

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

[data-theme="dark"] .timeline-content {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
}

/* ==================== CODE BLOCKS ==================== */

[data-theme="dark"] code {
    background: var(--bg-tertiary);
    color: var(--secondary-color);
}

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

/* ==================== BLOCKQUOTES ==================== */

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

/* ==================== HORIZONTAL RULES ==================== */

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

/* ==================== SELECTION ==================== */

[data-theme="dark"] ::selection {
    background: var(--primary-color);
    color: white;
}

[data-theme="dark"] ::-moz-selection {
    background: var(--primary-color);
    color: white;
}

/* ==================== SCROLLBAR ==================== */

[data-theme="dark"] ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

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

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

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

/* ==================== IMAGES ==================== */

[data-theme="dark"] img {
    opacity: 0.9;
}

[data-theme="dark"] img:hover {
    opacity: 1;
}

/* Keep logo and important images at full opacity */
[data-theme="dark"] .logo-img,
[data-theme="dark"] .footer-logo-img,
[data-theme="dark"] .brand-logo {
    opacity: 1;
}

/* ==================== TRANSITIONS ==================== */

/* Smooth transition when toggling dark mode */
body,
.navbar,
.card,
.form-control,
.btn-outline-primary,
.btn-outline-secondary {
    transition: background-color 0.3s ease, 
                color 0.3s ease, 
                border-color 0.3s ease,
                box-shadow 0.3s ease;
}
