/* =========================================
   PROFESSIONAL THEME - BLUE HEADINGS & RED NOTE
   ========================================= */

:root {
    --primary-blue: #2563eb;
    --note-red: #dc2626;
    --bg-body: #f8fafc;
    --bg-surface: #ffffff;
    --text-main: #0f172a; /* Very dark slate for paragraphs */
    --border-color: #e2e8f0;
}

/* --- LIGHT MODE (Default) --- */
html, body {
    background-color: var(--bg-body) !important;
    color: var(--text-main) !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

/* 1. Force ALL Headings to be Blue */
h1, h2, h3, h4, h5, h6, .display-5 {
    color: var(--primary-blue) !important;
    font-weight: 700 !important;
}

/* 2. Force Paragraphs and List Items to be Dark Grey */
p, li, span:not(.badge), div:not(.alert) {
    color: var(--text-main) !important;
}

/* 3. Force ALL <strong> tags to be Blue (This fixes "Il Volo Music Video Editor") */
strong {
    color: var(--primary-blue) !important;
    font-weight: 700 !important;
}

/* Fix the faded paragraph text issue */
.text-muted, .small, .lead {
    color: #475569 !important; 
    opacity: 1 !important;
}

/* 4. Force the "Note" text to be RED */
.alert-info, .alert-info strong, .alert-info i {
    color: var(--note-red) !important;
    background-color: #fef2f2 !important; /* Very light red background */
    border-color: #fca5a5 !important; /* Light red border */
}

/* Fix the cards */
.card, .card-body {
    background-color: var(--bg-surface) !important;
    border-color: var(--border-color) !important;
}

/* Fix the feature boxes on the homepage */
.bg-light {
    background-color: #f1f5f9 !important;
}

/* =========================================
   FIXES FOR NAVBAR AND FOOTER
   ========================================= */
/* Force Navbar and Footer text to stay white */
.navbar-dark .navbar-nav .nav-link,
.navbar-dark .navbar-brand,
footer, footer p, footer a, footer span {
    color: #ffffff !important;
}

/* =========================================
   DARK MODE OVERRIDE (Phone Settings)
   ========================================= */
@media (prefers-color-scheme: dark) {
    html, body {
        background-color: #0f172a !important; 
    }

    /* Make Headings a brighter blue for dark mode */
    h1, h2, h3, h4, h5, h6, .display-5 {
        color: #60a5fa !important; /* Light blue */
    }

    /* Make Paragraphs white */
    p, li, span, div {
        color: #f8fafc !important; 
    }

    /* Make Strong tags light blue in dark mode */
    strong {
        color: #60a5fa !important;
    }

    .text-muted, .small, .lead {
        color: #cbd5e1 !important;
    }

    /* Fix the Note Alert Box in Dark Mode */
    .alert-info, .alert-info strong, .alert-info i {
        color: #fca5a5 !important; /* Light red text */
        background-color: #450a0a !important; /* Dark red background */
        border-color: #7f1d1d !important;
    }

    /* Turn white cards into dark grey cards */
    .card, .card-body, .bg-light {
        background-color: #1e293b !important;
        border-color: #334155 !important;
    }
}