/* NOVOGEX unified brand bridge
   Connects Cinematic Splash -> Login -> Admin Portal without turning the
   working admin UI into a high-glow presentation screen. */

:root {
    --ng-primary: #1677ff;
    --ng-primary-hover: #0f6fe8;
    --ng-primary-active: #0b5ed1;
    --ng-primary-light: #62adff;
    --ng-primary-soft: rgba(22, 119, 255, .12);
    --ng-primary-border: rgba(22, 119, 255, .30);
    --ng-primary-glow: rgba(22, 119, 255, .24);
    --ng-navy-950: #02070d;
    --ng-navy-900: #06111f;
    --ng-navy-850: #081528;
    --ng-navy-800: #0a1829;
    --ng-navy-700: #10243a;

    /* Keep MudBlazor controls on the same blue as the NOVOGEX login. */
    --mud-palette-primary: #1677ff !important;
    --mud-palette-primary-rgb: 22,119,255 !important;
    --mud-palette-primary-text: #ffffff !important;
    --mud-palette-primary-darken: #0b5ed1 !important;
    --mud-palette-primary-lighten: #62adff !important;
    --mud-palette-info: #1689ff !important;
    --mud-palette-info-rgb: 22,137,255 !important;
}

/* Shared semantic bridge. The existing Design System components inherit these. */
.admin-portal-shell {
    --ap-brand-primary: var(--ng-primary);
    --ap-brand-primary-hover: var(--ng-primary-hover);
    --ap-brand-primary-pressed: var(--ng-primary-active);
    --ap-brand-primary-soft: var(--ng-primary-soft);
    --ap-brand-primary-border: var(--ng-primary-border);
    --ap-brand-focus-ring: rgba(22, 119, 255, .25);
    --ap-primary: var(--ng-primary);
    --ap-primary-soft: var(--ng-primary-soft);
    --ap-content-link: var(--ng-primary);
    --ap-content-link-hover: var(--ng-primary-hover);
    --ap-border-focus: var(--ng-primary);
    background:
        radial-gradient(circle at 0 0, rgba(22, 119, 255, .035), transparent 26%),
        var(--ap-bg-shell);
}

html[data-admin-theme="night"] .admin-portal-shell {
    --ap-bg-page: var(--ng-navy-900);
    --ap-bg-canvas: var(--ng-navy-900);
    --ap-bg-shell: var(--ng-navy-900);
    --ap-bg-content: var(--ng-navy-900);
    --ap-bg-panel: var(--ng-navy-800);
    --ap-bg-panel-muted: var(--ng-navy-850);
    --ap-bg-panel-raised: var(--ng-navy-700);
    --ap-bg-control: var(--ng-navy-800);
    --ap-bg-control-muted: var(--ng-navy-850);
    --ap-bg-topbar: rgba(10, 24, 41, .96);
}

/* Sidebar follows the same day/night theme as the working area.
   Night keeps the cinematic NOVOGEX navy; day uses a clean light navigation
   surface while preserving the same blue brand and selected states. */
.admin-portal-sidebar {
    --ng-sidebar-background: var(--ap-bg-navigation);
    --ng-sidebar-brand-background: var(--ap-bg-panel-raised);
    --ng-sidebar-brand-hover-background: var(--ap-bg-hover);
    --ng-sidebar-brand-title: var(--ap-text-primary);
    --ng-sidebar-brand-subtitle: var(--ap-text-muted);
    --ng-sidebar-label: var(--ap-text-muted);
    --ng-sidebar-divider: var(--ap-divider);
    --ng-sidebar-border: var(--ap-border);
    --ng-sidebar-hover-border: var(--ap-border-subtle);
    --ng-sidebar-hover-background: var(--ap-bg-hover);
    --ng-sidebar-hover-text: var(--ap-text-primary);
    --ng-sidebar-hover-icon: var(--ap-text-secondary);
    --ng-sidebar-active-border: color-mix(in srgb, var(--ng-primary) 30%, var(--ap-border));
    --ng-sidebar-active-background: var(--ap-bg-selected);
    --ng-sidebar-active-text: var(--ng-primary);
    --ng-sidebar-active-icon: var(--ng-primary);
    --ng-sidebar-logo-filter: none;
    --ng-sidebar-brand-line-opacity: .62;

    border-right: 1px solid var(--ng-sidebar-border);
    background: var(--ng-sidebar-background);
    box-shadow: 10px 0 30px color-mix(in srgb, var(--ap-shadow-color, #020617) 9%, transparent);
    transition: background-color var(--ap-transition-base), border-color var(--ap-transition-base), box-shadow var(--ap-transition-base), color var(--ap-transition-base);
}

html[data-admin-theme="night"] .admin-portal-sidebar {
    --ap-text-primary: #f8fafc;
    --ap-text-secondary: #c7d4e7;
    --ap-text-muted: #8294ad;
    --ap-content-primary: #f8fafc;
    --ap-content-secondary: #c7d4e7;
    --ap-content-muted: #8294ad;
    --ap-border: rgba(120, 163, 217, .17);
    --ap-border-subtle: rgba(120, 163, 217, .11);
    --ap-divider: rgba(120, 163, 217, .13);
    --ap-bg-navigation: var(--ng-navy-900);
    --ap-bg-panel-raised: rgba(10, 29, 55, .96);
    --ap-bg-hover: rgba(31, 73, 126, .24);
    --ap-bg-selected: rgba(22, 119, 255, .14);

    --ng-sidebar-background:
        radial-gradient(circle at 20% 0%, rgba(22, 119, 255, .15), transparent 30%),
        linear-gradient(180deg, #07182e 0%, #06111f 52%, #040d19 100%);
    --ng-sidebar-brand-background:
        linear-gradient(90deg, rgba(22, 119, 255, .08), transparent 72%),
        rgba(7, 24, 46, .78);
    --ng-sidebar-brand-hover-background:
        linear-gradient(90deg, rgba(22, 119, 255, .12), transparent 78%),
        rgba(8, 28, 52, .92);
    --ng-sidebar-brand-title: #f8fafc;
    --ng-sidebar-brand-subtitle: #8498b5;
    --ng-sidebar-label: #70849f;
    --ng-sidebar-divider: rgba(120, 163, 217, .13);
    --ng-sidebar-border: rgba(53, 139, 255, .16);
    --ng-sidebar-hover-border: rgba(98, 173, 255, .16);
    --ng-sidebar-hover-background: rgba(34, 79, 136, .24);
    --ng-sidebar-hover-text: #f3f7fd;
    --ng-sidebar-hover-icon: #bcd7ff;
    --ng-sidebar-active-border: rgba(69, 160, 255, .25);
    --ng-sidebar-active-background:
        linear-gradient(90deg, rgba(22, 119, 255, .19), rgba(22, 119, 255, .08));
    --ng-sidebar-active-text: #8fc3ff;
    --ng-sidebar-active-icon: #62adff;
    --ng-sidebar-logo-filter: drop-shadow(0 0 12px rgba(22, 119, 255, .24));
    --ng-sidebar-brand-line-opacity: .72;

    box-shadow: 12px 0 34px rgba(2, 7, 13, .18);
}

html[data-admin-theme="day"] .admin-portal-sidebar {
    --ap-text-primary: #0f172a;
    --ap-text-secondary: #334155;
    --ap-text-muted: #64748b;
    --ap-content-primary: #0f172a;
    --ap-content-secondary: #334155;
    --ap-content-muted: #64748b;
    --ap-border: rgba(71, 85, 105, .16);
    --ap-border-subtle: rgba(71, 85, 105, .10);
    --ap-divider: rgba(71, 85, 105, .12);
    --ap-bg-navigation: #f8fbff;
    --ap-bg-panel-raised: #ffffff;
    --ap-bg-hover: rgba(22, 119, 255, .065);
    --ap-bg-selected: rgba(22, 119, 255, .10);

    --ng-sidebar-background:
        radial-gradient(circle at 14% 0%, rgba(22, 119, 255, .075), transparent 27%),
        linear-gradient(180deg, #ffffff 0%, #f8fbff 54%, #f4f8fd 100%);
    --ng-sidebar-brand-background:
        linear-gradient(90deg, rgba(22, 119, 255, .055), transparent 75%),
        rgba(255, 255, 255, .94);
    --ng-sidebar-brand-hover-background:
        linear-gradient(90deg, rgba(22, 119, 255, .09), transparent 78%),
        #ffffff;
    --ng-sidebar-brand-title: #0b1830;
    --ng-sidebar-brand-subtitle: #64748b;
    --ng-sidebar-label: #64748b;
    --ng-sidebar-divider: rgba(71, 85, 105, .12);
    --ng-sidebar-border: rgba(71, 85, 105, .16);
    --ng-sidebar-hover-border: rgba(22, 119, 255, .15);
    --ng-sidebar-hover-background: rgba(22, 119, 255, .065);
    --ng-sidebar-hover-text: #0f172a;
    --ng-sidebar-hover-icon: #2563a8;
    --ng-sidebar-active-border: rgba(22, 119, 255, .24);
    --ng-sidebar-active-background:
        linear-gradient(90deg, rgba(22, 119, 255, .13), rgba(22, 119, 255, .055));
    --ng-sidebar-active-text: #0b63d8;
    --ng-sidebar-active-icon: #1677ff;
    --ng-sidebar-logo-filter: drop-shadow(0 4px 8px rgba(22, 119, 255, .12));
    --ng-sidebar-brand-line-opacity: .50;

    box-shadow: 8px 0 24px rgba(15, 23, 42, .065);
}

.admin-portal-sidebar .admin-portal-brand {
    position: relative;
    min-height: var(--admin-topbar-height, 64px);
    flex-basis: var(--admin-topbar-height, 64px);
    gap: 11px;
    padding: 0 17px;
    border-bottom: 1px solid var(--ng-sidebar-divider);
    color: inherit;
    text-decoration: none;
    background: var(--ng-sidebar-brand-background);
    transition: background-color var(--ap-transition-base), border-color var(--ap-transition-base), color var(--ap-transition-base);
}

.admin-portal-sidebar .admin-portal-brand::after {
    content: "";
    position: absolute;
    left: 17px;
    right: 17px;
    bottom: -1px;
    height: 1px;
    pointer-events: none;
    background: linear-gradient(90deg, var(--ng-primary), rgba(22, 119, 255, .22), transparent 78%);
    opacity: var(--ng-sidebar-brand-line-opacity);
}

.admin-portal-sidebar .admin-portal-brand:hover {
    background: var(--ng-sidebar-brand-hover-background);
}

.admin-portal-sidebar .admin-portal-brand:focus-visible {
    outline: 0;
    box-shadow: inset 0 0 0 2px rgba(22, 119, 255, .46);
}

.admin-portal-sidebar .admin-portal-brand-mark {
    width: 38px;
    height: 43px;
    min-width: 38px;
    flex-basis: 38px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.admin-portal-sidebar .admin-portal-brand-mark img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: var(--ng-sidebar-logo-filter);
    transition: filter var(--ap-transition-base);
}

.admin-portal-sidebar .admin-portal-brand-copy strong {
    display: flex;
    align-items: baseline;
    color: var(--ng-sidebar-brand-title);
    font-size: 17px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: .055em;
}

.admin-portal-sidebar .admin-portal-brand-accent {
    color: var(--ng-primary);
}

html[data-admin-theme="night"] .admin-portal-sidebar .admin-portal-brand-accent {
    color: var(--ng-primary-light);
}

.admin-portal-sidebar .admin-portal-brand-copy small {
    margin-top: 7px;
    color: var(--ng-sidebar-brand-subtitle);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .18em;
}

.admin-portal-sidebar .admin-portal-nav-label,
.admin-portal-sidebar .admin-portal-nav-label.settings {
    color: var(--ng-sidebar-label);
}

.admin-portal-sidebar .admin-portal-nav-item:hover {
    border-color: var(--ng-sidebar-hover-border);
    background: var(--ng-sidebar-hover-background);
    color: var(--ng-sidebar-hover-text);
}

.admin-portal-sidebar .admin-portal-nav-item:hover .mud-icon-root {
    color: var(--ng-sidebar-hover-icon);
}

.admin-portal-sidebar .admin-portal-nav-item.active {
    border-color: var(--ng-sidebar-active-border);
    background: var(--ng-sidebar-active-background);
    color: var(--ng-sidebar-active-text);
    box-shadow: inset 3px 0 0 var(--ng-primary), 0 0 20px rgba(22, 119, 255, .035);
}

.admin-portal-sidebar .admin-portal-nav-item.active .mud-icon-root {
    color: var(--ng-sidebar-active-icon);
}

/* The top bar receives only a restrained NOVOGEX accent. */
.admin-portal-shell .admin-top-bar {
    position: relative;
    border-bottom-color: color-mix(in srgb, var(--ng-primary) 12%, var(--ap-divider));
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--ng-primary) 3%, transparent), transparent 40%),
        var(--ap-bg-topbar);
}

.admin-portal-shell .admin-top-bar::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: clamp(88px, 12vw, 190px);
    height: 2px;
    pointer-events: none;
    background: linear-gradient(90deg, var(--ng-primary), rgba(22, 119, 255, .36), transparent);
    box-shadow: 0 0 12px rgba(22, 119, 255, .22);
}

.admin-portal-shell .admin-top-bar__context strong {
    letter-spacing: -.01em;
}

.admin-portal-shell .admin-top-bar__avatar {
    background: linear-gradient(145deg, #2687ff, #0869ec);
    box-shadow: 0 0 0 3px rgba(22, 119, 255, .10);
}

.admin-portal-shell .admin-top-bar__version {
    border-color: color-mix(in srgb, var(--ng-primary) 16%, var(--ap-border));
}

/* Page headers share the same small blue signature line as the login screen. */
.admin-portal-shell .ap-page-header {
    position: relative;
    overflow: hidden;
    border-color: color-mix(in srgb, var(--ng-primary) 9%, var(--ap-border-default));
}

.admin-portal-shell .ap-page-header::after {
    content: none;
}

.admin-portal-shell .ap-page-header__eyebrow {
    color: var(--ng-primary);
}

/* Shared components: keep states consistent across every migrated page. */
.admin-portal-shell .ap-button--primary,
.admin-portal-shell .mud-button-filled.mud-button-filled-primary,
.admin-portal-shell .admin-portal-new-button {
    border-color: rgba(69, 160, 255, .82);
    color: #fff;
    background: linear-gradient(135deg, #2687ff 0%, #1677ff 56%, #0d63d9 100%);
    box-shadow: 0 8px 20px rgba(8, 82, 210, .18), inset 0 1px 0 rgba(255, 255, 255, .12);
}

.admin-portal-shell .ap-button--primary:hover:not(:disabled),
.admin-portal-shell .mud-button-filled.mud-button-filled-primary:hover:not(:disabled),
.admin-portal-shell .admin-portal-new-button:hover:not(:disabled) {
    border-color: #62adff;
    background: linear-gradient(135deg, #3994ff 0%, #1f80ff 56%, #126be7 100%);
}

.admin-portal-shell .ap-tab[aria-selected="true"],
.admin-portal-shell .ap-tab.is-active,
.admin-portal-shell .mud-tab.mud-tab-active {
    color: var(--ng-primary);
}

.admin-portal-shell .mud-tab-slider,
.admin-portal-shell .ap-tab[aria-selected="true"]::after,
.admin-portal-shell .ap-tab.is-active::after {
    background-color: var(--ng-primary);
}

.admin-portal-shell a:not(.admin-portal-nav-item):not(.admin-portal-brand):focus-visible,
.admin-portal-shell button:focus-visible,
.admin-portal-shell input:focus-visible,
.admin-portal-shell select:focus-visible,
.admin-portal-shell textarea:focus-visible {
    outline-color: var(--ng-primary);
}

.admin-portal-shell ::selection {
    color: #fff;
    background: rgba(22, 119, 255, .72);
}

/* Login now uses exactly the same primary blue as the splash/admin system. */
.novogex-login-accent {
    background: var(--ng-primary);
    box-shadow: 0 0 17px rgba(22, 119, 255, .48);
}

.novogex-login-features .mud-icon-root,
.novogex-login-lock .mud-icon-root,
.novogex-login-secure-line .mud-icon-root {
    color: var(--ng-primary);
}

.novogex-admin-login-card {
    border-color: rgba(69, 160, 255, .62);
}

.novogex-admin-login-card::before {
    background: linear-gradient(90deg, transparent, var(--ng-primary-light), transparent);
    box-shadow: 0 0 12px rgba(22, 119, 255, .62);
}

.novogex-admin-login-form .security-login-input:focus-within {
    border-color: var(--ng-primary);
    box-shadow: 0 0 0 3px rgba(22, 119, 255, .12), 0 0 23px rgba(22, 119, 255, .08);
}

.novogex-admin-login-form .security-login-inline-link {
    color: var(--ng-primary);
}

.novogex-admin-login-form .security-login-inline-link:hover,
.novogex-password-toggle:hover,
.novogex-password-toggle:focus-visible {
    color: var(--ng-primary-light);
}

.novogex-admin-login-form .security-login-remember > input:checked + .novogex-checkbox,
.novogex-login-submit {
    border-color: rgba(69, 160, 255, .92);
    background: linear-gradient(135deg, #2687ff 0%, #1677ff 56%, #0d63d9 100%);
}

/* Day mode keeps the entire workspace, including navigation, bright and practical. */
html[data-admin-theme="day"] .admin-portal-shell .admin-top-bar {
    background:
        linear-gradient(90deg, rgba(22, 119, 255, .035), transparent 40%),
        #ffffff;
}

html[data-admin-theme="day"] .admin-portal-shell .ap-page-header {
    box-shadow: 0 8px 26px rgba(15, 23, 42, .055);
}

@media (max-width: 1320px) {
    .admin-portal-sidebar .admin-portal-brand {
        padding-inline: 14px;
    }

    .admin-portal-sidebar .admin-portal-brand-copy strong {
        font-size: 16px;
    }
}

@media (max-width: 1050px) {
    .admin-portal-sidebar .admin-portal-brand {
        min-height: var(--admin-topbar-height, 64px);
        flex-basis: var(--admin-topbar-height, 64px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .admin-portal-sidebar .admin-portal-brand {
        transition: none;
    }
}