/* UP North theme: snow + pines + lake */
/* File: wwwroot/css/themes/upnorth.css */

html[data-sb-theme="upnorth"] {
    /* ---- Brand palette (light) ---- */
    --sb-surface: #fbfcfe; /* fresh snow */
    --sb-surface-2: #f3f6fb; /* drift shadow */
    --sb-text: #0b1220; /* midnight */
    --sb-muted: rgba(11, 18, 32, .68);
    --sb-primary: #1f6f5b; /* pine */
    --sb-primary-rgb: 31, 111, 91;
    --sb-accent: #0f4c81; /* lake */
    --sb-accent-rgb: 15, 76, 129;
    --sb-blaze: #ff6a00; /* blaze orange */

    --sb-border: rgba(11, 18, 32, .14);
    --sb-ring: rgba(15, 76, 129, .35);
    /* Nav + menus */
    --sb-nav-bg: rgba(250, 252, 255, .92);
    --sb-submenu-bg: #ffffff;
    --sb-subtle-hover: rgba(15, 76, 129, 0.08);
    --sb-active-bg: rgba(31, 111, 91, 0.14);
    --sb-active-rail: rgba(31, 111, 91, 0.95);
    --sb-control-border: rgba(11, 18, 32, .18);
    --sb-control-text: rgba(11, 18, 32, .92);
    /* Page vibe */
    --sb-page-grad-1: rgba(15, 76, 129, 0.10);
    --sb-page-grad-2: rgba(31, 111, 91, 0.10);
}

    /* ---- Brand palette (dark) ---- */
    html[data-sb-theme="upnorth"][data-bs-theme="dark"] {
        --sb-surface: #0d1218; /* night snow */
        --sb-surface-2: #121a24;
        --sb-text: rgba(255,255,255,.92);
        --sb-muted: rgba(255,255,255,.70);
        --sb-border: rgba(255,255,255,.14);
        --sb-ring: rgba(125, 176, 255, .35);
        --sb-nav-bg: rgba(13, 18, 24, .90);
        --sb-submenu-bg: #101823;
        --sb-subtle-hover: rgba(255,255,255,0.08);
        /* keep pine/lake but a little brighter in dark */
        --sb-primary: #44b79a;
        --sb-primary-rgb: 68, 183, 154;
        --sb-accent: #7db0ff;
        --sb-accent-rgb: 125, 176, 255;
        --sb-active-bg: rgba(125, 176, 255, 0.16);
        --sb-active-rail: rgba(125, 176, 255, 0.95);
        --sb-control-border: rgba(255,255,255,.22);
        --sb-control-text: rgba(255,255,255,.92);
    }

/* ============================================================
   Map UpNorth -> Bootstrap variables
   ============================================================ */
html[data-sb-theme="upnorth"] {
    --bs-body-bg: var(--sb-surface);
    --bs-body-color: var(--sb-text);
    --bs-secondary-color: var(--sb-muted);
    --bs-border-color: var(--sb-border);
    --bs-primary: var(--sb-primary);
    --bs-primary-rgb: var(--sb-primary-rgb);
    --bs-link-color: rgb(var(--sb-accent-rgb));
    --bs-link-hover-color: rgba(var(--sb-accent-rgb), .85);
    /* Cards, dropdowns, etc. */
    --bs-card-bg: rgba(255,255,255,.78);
    --bs-card-border-color: rgba(11,18,32,.12);
    --bs-dropdown-bg: var(--sb-submenu-bg);
    --bs-dropdown-link-hover-bg: var(--sb-subtle-hover);
    --bs-dropdown-link-active-bg: var(--sb-active-bg);
    --bs-dropdown-link-active-color: var(--sb-text);
    /* Forms */
    --bs-form-control-bg: rgba(255,255,255,.92);
    --bs-form-control-color: var(--sb-text);
    --bs-form-control-border-color: var(--sb-control-border);
    /* Navbar vars: stop Bootstrap from “dark-nav” washing out light mode */
    --bs-navbar-color: var(--sb-text);
    --bs-navbar-hover-color: var(--sb-text);
    --bs-navbar-active-color: var(--sb-text);
    --bs-navbar-brand-color: var(--sb-text);
    --bs-navbar-brand-hover-color: var(--sb-text);
    --bs-navbar-disabled-color: color-mix(in oklab, var(--sb-text), transparent 55%);
    --bs-navbar-toggler-border-color: var(--sb-border);
}

    /* Dark tweaks for Bootstrap vars */
    html[data-sb-theme="upnorth"][data-bs-theme="dark"] {
        --bs-card-bg: rgba(16,24,35,.72);
        --bs-card-border-color: rgba(255,255,255,.12);
        --bs-form-control-bg: rgba(16,24,35,.85);
        --bs-form-control-color: rgba(255,255,255,.92);
        --bs-form-control-border-color: rgba(255,255,255,.18);
    }

    /* ============================================================
   Snowy background + subtle flakes
   ============================================================ */
    html[data-sb-theme="upnorth"] body {
        background: radial-gradient(1200px 700px at 15% -10%, var(--sb-page-grad-1), transparent 60%), radial-gradient(900px 600px at 85% 0%, var(--sb-page-grad-2), transparent 55%), linear-gradient(var(--sb-surface), var(--sb-surface-2)) !important;
    }

        html[data-sb-theme="upnorth"] body::before {
            content: "";
            position: fixed;
            inset: 0;
            pointer-events: none;
            z-index: 0;
            opacity: .25;
            background: radial-gradient(circle at 10% 20%, rgba(255,255,255,.35) 0 1px, transparent 2px), radial-gradient(circle at 40% 70%, rgba(255,255,255,.25) 0 1px, transparent 2px), radial-gradient(circle at 80% 30%, rgba(255,255,255,.30) 0 1px, transparent 2px), radial-gradient(circle at 70% 85%, rgba(255,255,255,.20) 0 1px, transparent 2px);
            background-size: 240px 240px, 300px 300px, 260px 260px, 340px 340px;
        }

        html[data-sb-theme="upnorth"] body > * {
            position: relative;
            z-index: 1;
        }

    /* ============================================================
   Frosted nav
   ============================================================ */
    html[data-sb-theme="upnorth"] .navbar-accent {
        backdrop-filter: blur(10px);
        background: var(--sb-nav-bg) !important;
        border-bottom: 1px solid rgba(11, 18, 32, 0.10) !important;
    }

    html[data-sb-theme="upnorth"][data-bs-theme="dark"] .navbar-accent {
        border-bottom-color: rgba(255,255,255,0.12) !important;
    }

    /* ============================================================
   Components: "trailhead UI"
   ============================================================ */
    html[data-sb-theme="upnorth"] .card,
    html[data-sb-theme="upnorth"] .table,
    html[data-sb-theme="upnorth"] .alert {
        border-color: var(--sb-border) !important;
        box-shadow: 0 10px 28px rgba(2, 6, 23, 0.08);
    }

    /* ============================================================
   Buttons: fix contrast in both modes (and don't let link rules hijack them)
   ============================================================ */

    /* Light mode primary: deep navy + white text */
    html[data-sb-theme="upnorth"] .btn-primary,
    html[data-sb-theme="upnorth"] a.btn.btn-primary {
        background-color: #063484 !important;
        border-color: #332fc1 !important;
        color: #ffffff !important;
        box-shadow: 0 10px 20px rgba(2, 6, 23, 0.12);
    }

        html[data-sb-theme="upnorth"] .btn-primary:hover,
        html[data-sb-theme="upnorth"] a.btn.btn-primary:hover {
            filter: brightness(.97);
        }

    /* Dark mode primary: lake + dark ink text (high contrast) */
    html[data-sb-theme="upnorth"][data-bs-theme="dark"] .btn-primary,
    html[data-sb-theme="upnorth"][data-bs-theme="dark"] a.btn.btn-primary {
        background-color: var(--sb-accent) !important;
        border-color: color-mix(in oklab, var(--sb-accent), black 18%) !important;
        color: rgba(11, 18, 32, .95) !important; /* dark readable text */
        box-shadow: 0 12px 26px rgba(0,0,0,.35);
    }

        html[data-sb-theme="upnorth"][data-bs-theme="dark"] .btn-primary:hover,
        html[data-sb-theme="upnorth"][data-bs-theme="dark"] a.btn.btn-primary:hover {
            background-color: color-mix(in oklab, var(--sb-accent), white 10%) !important;
            border-color: color-mix(in oklab, var(--sb-accent), black 10%) !important;
        }

    /* Outline primary stays "lake" */
    html[data-sb-theme="upnorth"] .btn-outline-primary {
        border-color: rgba(var(--sb-accent-rgb), .55) !important;
        color: rgb(var(--sb-accent-rgb)) !important;
    }

        html[data-sb-theme="upnorth"] .btn-outline-primary:hover {
            background-color: rgba(var(--sb-accent-rgb), .10) !important;
        }

    /* ============================================================
   Links (FIX: don't force link color onto buttons/nav items)
   ============================================================ */

    /* Style only normal links, not buttons/nav/dropdown items */
    html[data-sb-theme="upnorth"] a:not(.btn):not(.nav-link):not(.dropdown-item) {
        color: var(--bs-link-color);
    }

        html[data-sb-theme="upnorth"] a:not(.btn):not(.nav-link):not(.dropdown-item):hover {
            color: var(--bs-link-hover-color);
        }

    /* Dark mode: links can be bright without vanishing */
    html[data-sb-theme="upnorth"][data-bs-theme="dark"] a:not(.btn):not(.nav-link):not(.dropdown-item) {
        color: rgba(255,255,255,.92);
    }

        html[data-sb-theme="upnorth"][data-bs-theme="dark"] a:not(.btn):not(.nav-link):not(.dropdown-item):hover {
            color: rgba(255,255,255,.92);
        }

    /* Ensure auth/login area is always readable (common classes) */
    html[data-sb-theme="upnorth"]:not([data-bs-theme="dark"]) .navbar .navbar-nav.nav-auth .nav-link,
    html[data-sb-theme="upnorth"]:not([data-bs-theme="dark"]) .navbar .navbar-nav.nav-auth a,
    html[data-sb-theme="upnorth"]:not([data-bs-theme="dark"]) .navbar .navbar-nav.nav-auth .btn,
    html[data-sb-theme="upnorth"]:not([data-bs-theme="dark"]) .navbar .navbar-nav.nav-auth a.btn,
    html[data-sb-theme="upnorth"]:not([data-bs-theme="dark"]) .navbar .navbar-nav.nav-auth .btn-link {
        color: var(--sb-text) !important;
    }

        html[data-sb-theme="upnorth"]:not([data-bs-theme="dark"]) .navbar .navbar-nav.nav-auth .btn-outline-secondary,
        html[data-sb-theme="upnorth"]:not([data-bs-theme="dark"]) .navbar .navbar-nav.nav-auth a.btn-outline-secondary {
            border-color: var(--sb-control-border) !important;
        }

    /* Focus ring */
    html[data-sb-theme="upnorth"] .form-control:focus,
    html[data-sb-theme="upnorth"] .form-select:focus,
    html[data-sb-theme="upnorth"] .btn:focus {
        box-shadow: 0 0 0 .2rem var(--sb-ring) !important;
    }

    /* Optional blaze highlight for active submenu items */
    html[data-sb-theme="upnorth"] .submenu .dropdown-item.active {
        box-shadow: inset 3px 0 0 var(--sb-blaze);
    }

    /* ============================================================
   NAV POLISH (LIGHT MODE ONLY)
   Make main links look like intentional pills, not generic blue links.
   ============================================================ */
    html[data-sb-theme="upnorth"]:not([data-bs-theme="dark"]) .navbar .navbar-nav .nav-link {
        color: var(--sb-text) !important;
        padding: .55rem .85rem;
        border-radius: 999px;
        font-weight: 650;
        line-height: 1.1;
        background: transparent;
    }

        html[data-sb-theme="upnorth"]:not([data-bs-theme="dark"]) .navbar .navbar-nav .nav-link:hover {
            background: color-mix(in oklab, var(--sb-accent), transparent 90%);
            color: var(--sb-text) !important;
        }

        html[data-sb-theme="upnorth"]:not([data-bs-theme="dark"]) .navbar .navbar-nav .nav-link.active {
            background: color-mix(in oklab, var(--sb-primary), transparent 84%);
            color: var(--sb-text) !important;
            box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--sb-primary), transparent 70%);
        }

    /* Submenu panel */
    html[data-sb-theme="upnorth"]:not([data-bs-theme="dark"]) .navbar .submenu {
        background: var(--sb-submenu-bg);
        border: 1px solid color-mix(in oklab, var(--sb-border), black 10%);
        border-radius: 14px;
        padding: .35rem;
        box-shadow: 0 16px 30px rgba(2, 6, 23, 0.10);
    }

        html[data-sb-theme="upnorth"]:not([data-bs-theme="dark"]) .navbar .submenu .dropdown-item {
            color: var(--sb-text) !important;
            border-radius: 10px;
            padding: .5rem .75rem;
        }

            html[data-sb-theme="upnorth"]:not([data-bs-theme="dark"]) .navbar .submenu .dropdown-item:hover {
                background: color-mix(in oklab, var(--sb-accent), transparent 90%);
            }