/* Global styles for navigation and footer moved from MainLayout.razor */

/* Prevent dark-mode flash: applied instantly by the inline script in App.razor
   before Blazor/WASM initialises. Matches AppTheme.Dark.PaletteDark values.
   Pre-sets MudBlazor CSS variables so AppBar, Drawer and surfaces render
   correctly before MudThemeProvider has a chance to inject its own variables.
   Also kept in sync via uiHelpers.setDarkMode() when the user toggles theme. */
html[data-dark='1'] {
    background-color: #13202d;
    color: #F1F5F9;
    color-scheme: dark;
    /* MudBlazor palette CSS variables – dark theme (mirrors AppTheme.Dark.PaletteDark) */
    --mud-palette-primary: #89b531;
    --mud-palette-primary-text: #ffffff;
    --mud-palette-secondary: #94A3B8;
    --mud-palette-background: #13202d;
    --mud-palette-background-grey: #192a3b;
    --mud-palette-surface: #192a3b;
    --mud-palette-appbar-background: #0d161f;
    --mud-palette-appbar-text: #F1F5F9;
    --mud-palette-drawer-background: #0d161f;
    --mud-palette-drawer-text: #feffff;
    --mud-palette-drawer-icon: #feffff;
    --mud-palette-text-primary: #F1F5F9;
    --mud-palette-text-secondary: #CBD5E1;
    --mud-palette-text-disabled: rgba(255,255,255,0.26);
    --mud-palette-action-default: rgba(255,255,255,0.54);
    --mud-palette-action-disabled: rgba(255,255,255,0.26);
    --mud-palette-action-disabled-background: rgba(255,255,255,0.12);
    --mud-palette-divider: rgba(255,255,255,0.12);
    --mud-palette-divider-light: rgba(255,255,255,0.06);
    --mud-palette-lines-default: rgba(255,255,255,0.12);
    --mud-palette-table-lines: rgba(255,255,255,0.12);
    --mud-palette-table-striped: rgba(255,255,255,0.2);
    --mud-palette-table-hover: rgba(255,255,255,0.04);
    --mud-palette-success: #89b531;
    --mud-palette-warning: #FBBF24;
    --mud-palette-error: #F87171;
    --mud-palette-dark: #27272f;
    --mud-palette-black: #27272f;
    --mud-palette-white: #ffffff;
}

html[data-dark='1'] body {
    background-color: #13202d;
    color: #F1F5F9;
}

/* Pre-style critical MudBlazor shell elements before MudThemeProvider activates */
html[data-dark='1'] .mud-appbar {
    background-color: #0d161f;
    color: #F1F5F9;
}

html[data-dark='1'] .mud-drawer,
html[data-dark='1'] .mud-drawer-content {
    background-color: #0d161f;
    color: #feffff;
}

html[data-dark='1'] .mud-nav-link {
    color: #feffff;
}

html[data-dark='1'] .mud-paper {
    background-color: #192a3b;
    color: #F1F5F9;
}

.landing-appbar {
    backdrop-filter: blur(6px) !important;
    /*background-color: rgba(var(--mud-palette-background-rgb,255,255,255),0.7) !important;*/
}

.brand-title {
    text-shadow: 0 1px 1px rgba(0,0,0,.05)
}

.brand-logo {
    width: 210px;
    height: 70px;
    display: block
}
.brand-logo-jtp {
    width: 70px;
    height: 70px;
    display: block
}

.horizontal-padding {
    padding-left: 124px;
    padding-right: 124px
}

@media (max-width:1280px) {
    .horizontal-padding {
        padding-left: 32px;
        padding-right: 32px
    }
}

.footer-section {
    background: var(--mud-palette-background-grey);
    flex-shrink: 0;
    margin-top: auto; /* Push footer to bottom when content is short */
}

.footer-link {
    color: inherit;
    text-decoration: none
}

    .footer-link:hover {
        text-decoration: underline
    }

/* Make the MudMenu trigger align nicely to the left */
.menu-trigger {
    margin-right: 8px
}

/* Existing */
.mud-nav-link-icon-default {
    transform: scale(0.8)
}

/* Fix for landing page layout - ensure footer is always visible */
.mud-layout {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.mud-main-content {
    flex: 1 0 auto;
}

/* Ensure html and body take full height */
html, body {
    min-height: 100vh;
    margin: 0;
    padding: 0;
}

#app {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.mud-tab-panell-invent-details {
    height: calc(100vh - 341px);
}

/* help button highlight (global) */
@keyframes helpBlink {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 rgba(25, 118, 210, 0.0);
        background-color: transparent;
        color: inherit;
    }

    20% {
        transform: scale(1.07);
        box-shadow: 0 0 0.9rem rgba(25, 118, 210, 0.45);
        background-color: rgba(25, 118, 210, 0.14);
        color: var(--mud-palette-primary-text, inherit);
    }

    40% {
        transform: scale(1);
        box-shadow: 0 0 0 rgba(25, 118, 210, 0.0);
        background-color: transparent;
        color: inherit;
    }

    60% {
        transform: scale(1.07);
        box-shadow: 0 0 0.9rem rgba(25, 118, 210, 0.45);
        background-color: rgba(25, 118, 210, 0.14);
        color: var(--mud-palette-primary-text, inherit);
    }

    100% {
        transform: scale(1);
        box-shadow: 0 0 0 rgba(25, 118, 210, 0.0);
        background-color: transparent;
        color: inherit;
    }
}

.help-blink {
    animation: helpBlink 550ms ease-in-out 0s 5;
    border-radius: 999px;
    transition: background-color 120ms ease, color 120ms ease;
}