/* =====================================================================
   NEXUS SKIN: "COMMAND BAR" - the Amazon-style look.
   Loads AFTER nexus-theme.css and overrides its tokens + chrome.
   TO REVERT: comment out the nexus-skin.css <link> in App.razor.
   Everything returns to the standard Nexus theme instantly.
   ===================================================================== */

:root {
    /* Amazon's canvas: cool gray, squarer geometry, denser feel. */
    --nx-bg: #eaeded;
    --nx-radius: 8px;
    --nx-radius-sm: 6px;

    --nx-slate: #232f3e;
    --nx-slate-deep: #131a22;
    --nx-slate-line: #3a4553;
}

body.dark-mode {
    --nx-bg: #131a22;
    --nx-surface: #1d2733;
    --nx-surface-2: #232f3e;
    --nx-border: #3a4553;
    --nx-border-strong: #4a5666;
}

/* ---------------------------------------------- the command bar --- */

.top-row {
    /* Same stage lighting as the login banner: slate gradient with a faint
       red glow rising from the brand line. */
    background: radial-gradient(700px 90px at 82% 115%, rgba(211, 19, 53, .22), transparent 65%),
                linear-gradient(120deg, #1a232e 0%, #131a22 100%) !important;
    border-bottom: 3px solid var(--nx-red) !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
}

    .top-row .btn-outline-secondary {
        color: #d5dbdb !important;
        border-color: #4a5666 !important;
        background: transparent !important;
    }

        .top-row .btn-outline-secondary:hover {
            background: var(--nx-slate) !important;
            color: #ffffff !important;
        }

.user-menu-btn {
    background: transparent !important;
    border-color: #4a5666 !important;
    color: #ffffff !important;
}

    .user-menu-btn:hover {
        border-color: var(--nx-red) !important;
        background: var(--nx-slate) !important;
    }

    .user-menu-btn .bi-person-circle { color: #ff5c77 !important; }

/* ---------------------------------------------- the dark sidebar -- */

.mdwc-sidebar-wrapper {
    background: linear-gradient(180deg, var(--nx-slate) 0%, var(--nx-slate-deep) 100%) !important;
    border-right: none !important;
    color: #8f9899;
}

.mdwc-nav-link {
    color: #d5dbdb !important;
}

    .mdwc-nav-link:hover {
        background: rgba(255, 255, 255, .08) !important;
        border-color: transparent !important;
        color: #ffffff !important;
    }

.mdwc-sidebar-wrapper .text-muted { color: #8f9899 !important; }

.mdwc-sidebar-wrapper span,
.mdwc-sidebar-wrapper div { color: #aab4b8; }

/* Logo banner styling lives in nexus-theme.css (dark slate + red line,
   matching the login page) - the skin inherits it untouched. */

/* ---------------------------------------------- content density --- */

.card { box-shadow: 0 1px 3px rgba(15, 17, 17, .12) !important; }

    .card:hover { box-shadow: 0 2px 8px rgba(15, 17, 17, .18) !important; }

.btn { border-radius: var(--nx-radius-sm); }

.table td { padding: .48rem .7rem; }

/* Home hero styling lives in Home.razor (royal purple, both modes). */
body.dark-mode .nexus-tile { background: #1d2733; border-color: #3a4553; }