/* Dark mode overrides using Nord (cool slate) palette
   Applied either when:
   - html has .dark class (set by theme.js), OR
   - user's OS is in dark mode (the @media rule)

   Nord palette reference:
   - Base background: #2E3440 (nord0)
   - Surfaces: #3B4252 (nord1), #434C5E (nord2), #4C566A (nord3)
   - Text: #D8DEE9 (nord4), #E5E9F0 (nord5), #ECEFF4 (nord6)
   - Accents: #88C0D0 (nord8), #5E81AC (nord10)
*/

/* Applied when user explicitly sets dark mode */
html.dark {

    /* Page background and base text */
    body {
        background-color: #2E3440 !important;
        color: #D8DEE9 !important;
    }

    /* Links */
    a {
        color: #88C0D0 !important;
    }

    /* Top navigation and footer (cool slate surfaces) */
    nav.top-nav.teal {
        background-color: #3B4252 !important;
    }

    footer.page-footer.teal {
        background-color: #2E3440 !important;
        color: #D8DEE9 !important;
    }

    /* Page title (on nav) */
    .page-title {
        color: #E5E9F0 !important;
    }

    /* User card background gradient */
    .userView .background {
        background: linear-gradient(90deg, #3B4252 10%, #434C5E 90%) !important;
    }

    /* User avatar section text */
    .userView .name,
    .userView .email,
    .userView .white-text {
        color: #E5E9F0 !important;
    }

    /* Social icons */
    .userView .fa {
        background: #434C5E !important;
        color: #88C0D0 !important;
        opacity: 1 !important;
        box-shadow: none !important;
    }

    .userView .fa:hover {
        background: #88C0D0 !important;
        color: #2E3440 !important;
        box-shadow: 0 0 6px rgba(0, 0, 0, 0.4) !important;
    }

    /* Blockquote */
    blockquote {
        border-left-color: #5E81AC !important;
        color: #D8DEE9 !important;
        background: rgba(236, 239, 244, 0.04);
    }

    /* Muted footer text */
    .page-footer .grey-text {
        color: #B3BCC9 !important;
        /* subtle, desaturated slate */
    }

    /* Buttons / materialize elements - keep text legible */
    .btn,
    .btn-flat {
        color: #E5E9F0 !important;
    }

    /* Side nav background and links */
    ul.side-nav.fixed {
        background-color: #2E3440 !important;
        color: #ECEFF4 !important;
    }

    ul.side-nav.fixed a,
    ul.side-nav.fixed .waves-effect {
        color: #ECEFF4 !important;
    }

    /* Ensure containers don't stay white */
    .container,
    .card,
    .collection,
    .collection-item {
        background: transparent !important;
    }

    /* Material icons visibility on dark */
    i.material-icons,
    .material-icons {
        color: #E5E9F0 !important;
    }

    /* Icons in links use accent */
    a i.material-icons,
    a .material-icons {
        color: #88C0D0 !important;
    }

    /* Code / syntax - if applicable */
    pre,
    code {
        background: #3B4252 !important;
        color: #ECEFF4 !important;
    }

    /* Card reveal (project statistics) - ensure readable on dark mode */
    .card .card-reveal {
        background-color: rgba(44, 49, 60, 0.98) !important;
        color: #ECEFF4 !important;
    }

    .card .card-reveal .card-title,
    .card .card-reveal .card-title.grey-text,
    .card .card-reveal .card-title.grey-text.text-darken-4 {
        color: #ECEFF4 !important;
    }

    .card .card-reveal .tooltipped,
    .card .card-reveal span,
    .card .card-reveal i.material-icons {
        color: #D8DEE9 !important;
    }

    /* Ensure muted grey-text is readable on dark surfaces */
    .card .card-content .grey-text,
    .card .card-reveal .grey-text,
    .card .card-content .grey-text.text-darken-1 {
        color: #B3BCC9 !important;
    }
}

/* Applied automatically when the OS is in dark mode
   (but allow explicit light preference to opt-out via html.light)
*/
@media (prefers-color-scheme: dark) {
    html:not(.light) {

        body {
            background-color: #2E3440 !important;
            color: #D8DEE9 !important;
        }

        a {
            color: #88C0D0 !important;
        }

        nav.top-nav.teal {
            background-color: #3B4252 !important;
        }

        footer.page-footer.teal {
            background-color: #2E3440 !important;
            color: #D8DEE9 !important;
        }

        .page-title {
            color: #E5E9F0 !important;
        }

        .userView .background {
            background: linear-gradient(90deg, #3B4252 10%, #434C5E 90%) !important;
        }

        .userView .name,
        .userView .email,
        .userView .white-text {
            color: #E5E9F0 !important;
        }

        .userView .fa {
            background: #434C5E !important;
            color: #88C0D0 !important;
            opacity: 1 !important;
            box-shadow: none !important;
        }

        .userView .fa:hover {
            background: #88C0D0 !important;
            color: #2E3440 !important;
            box-shadow: 0 0 6px rgba(0, 0, 0, 0.4) !important;
        }

        blockquote {
            border-left-color: #5E81AC !important;
            color: #D8DEE9 !important;
            background: rgba(236, 239, 244, 0.04);
        }

        .page-footer .grey-text {
            color: #B3BCC9 !important;
        }

        .btn,
        .btn-flat {
            color: #E5E9F0 !important;
        }

        ul.side-nav.fixed {
            background-color: #2E3440 !important;
            color: #ECEFF4 !important;
        }

        ul.side-nav.fixed a,
        ul.side-nav.fixed .waves-effect {
            color: #ECEFF4 !important;
        }

        .container,
        .card,
        .collection,
        .collection-item {
            background: transparent !important;
        }

        /* Material icons visibility on dark */
        i.material-icons,
        .material-icons {
            color: #E5E9F0 !important;
        }

        /* Icons in links use accent */
        a i.material-icons,
        a .material-icons {
            color: #88C0D0 !important;
        }

        pre,
        code {
            background: #3B4252 !important;
            color: #ECEFF4 !important;
        }

        /* Card reveal (project statistics) - ensure readable on dark mode */
        .card .card-reveal {
            background-color: rgba(44, 49, 60, 0.98) !important;
            color: #ECEFF4 !important;
        }

        .card .card-reveal .card-title,
        .card .card-reveal .card-title.grey-text,
        .card .card-reveal .card-title.grey-text.text-darken-4 {
            color: #ECEFF4 !important;
        }

        .card .card-reveal .tooltipped,
        .card .card-reveal span,
        .card .card-reveal i.material-icons {
            color: #D8DEE9 !important;
        }

        /* Ensure muted grey-text is readable on dark surfaces */
        .card .card-content .grey-text,
        .card .card-reveal .grey-text,
        .card .card-content .grey-text.text-darken-1 {
            color: #B3BCC9 !important;
        }
    }

    /* Remove unwanted background/outline for the theme toggle button */
    #theme-toggle,
    #theme-toggle:focus,
    #theme-toggle:active,
    #theme-toggle:hover {
        background: transparent !important;
        box-shadow: none !important;
    }

    /* Ensure the icon color remains visible on dark backgrounds */
    #theme-toggle i.material-icons {
        color: #E5E9F0 !important;
    }
}