/*
 * Shopfold brand colours, layered over the Radzen "software" theme.
 * Must be loaded after <RadzenTheme> so these variables win.
 * Source of truth for the palette is the logo in images/brand/.
 */
:root {
    /* Primary: logo blue */
    --rz-primary: #2563EB;
    --rz-primary-light: #3B82F6;
    --rz-primary-lighter: rgba(37, 99, 235, 0.16);
    --rz-primary-dark: #1D4ED8;
    --rz-primary-darker: #1E40AF;
    --rz-on-primary: #FFFFFF;
    --rz-on-primary-light: #FFFFFF;
    --rz-on-primary-lighter: #1D4ED8;
    --rz-on-primary-dark: #FFFFFF;
    --rz-on-primary-darker: #FFFFFF;

    /* Secondary: logo navy */
    --rz-secondary: #1E3A5F;
    --rz-secondary-light: #2B4C7A;
    --rz-secondary-lighter: rgba(30, 58, 95, 0.16);
    --rz-secondary-dark: #172E4D;
    --rz-secondary-darker: #10223A;
    --rz-on-secondary: #FFFFFF;
    --rz-on-secondary-light: #FFFFFF;
    --rz-on-secondary-lighter: #1E3A5F;
    --rz-on-secondary-dark: #FFFFFF;
    --rz-on-secondary-darker: #FFFFFF;

    /* Links follow the primary blue rather than the secondary colour */
    --rz-link-color: var(--rz-primary);
    --rz-link-hover-color: var(--rz-primary-dark);

    /* Warning: logo amber. White text on amber is unreadable, so use dark text. */
    --rz-warning: #F59E0B;
    --rz-warning-light: #FBBF24;
    --rz-warning-lighter: rgba(245, 158, 11, 0.2);
    --rz-warning-dark: #D97706;
    --rz-warning-darker: #B45309;
    --rz-on-warning: #1F2937;
    --rz-on-warning-light: #1F2937;
    --rz-on-warning-lighter: #B45309;
    --rz-on-warning-dark: #1F2937;
    --rz-on-warning-darker: #FFFFFF;

    /* Info: sky blue, related to the primary but distinct from it */
    --rz-info: #0EA5E9;
    --rz-info-light: #38BDF8;
    --rz-info-lighter: rgba(14, 165, 233, 0.2);
    --rz-info-dark: #0284C7;
    --rz-info-darker: #0369A1;
    --rz-on-info-lighter: #0369A1;

    /* Neutrals: cool slate greys instead of the theme's teal-tinted greys */
    --rz-base-50: #FFFFFF;
    --rz-base-100: #F8FAFC;
    --rz-base-200: #EEF2F6;
    --rz-base-300: #E2E8F0;
    --rz-base-400: #CBD5E1;
    --rz-base-500: #94A3B8;
    --rz-base-600: #64748B;
    --rz-base-700: #475569;
    --rz-base-800: #334155;
    --rz-base-900: #1E293B;
    --rz-base: #E2E8F0;
    --rz-base-light: #EEF2F6;
    --rz-base-dark: #64748B;
    --rz-base-darker: #1E293B;
    --rz-on-base: #1E293B;
    --rz-on-base-light: #1E293B;
    --rz-on-base-lighter: #1E293B;
}

/* Larger filter buttons on every Radzen data grid, easier to press */
.rz-grid-filter-icon {
    --rz-grid-header-filter-icon-font-size: 1.25rem;
    font-size: 1.25rem;
}

.rz-grid-filter-icon .rzi,
.rz-grid-filter-icon i {
    font-size: 1.25rem;
}

/* Footer links (About, Contact, Privacy, Terms, Cookies) */
.footer-links a {
    font-size: 0.8125rem;
    color: var(--rz-text-secondary-color);
    text-decoration: none;
}

.footer-links a:hover, .footer-links a:focus-visible {
    color: var(--rz-primary);
    text-decoration: underline;
}

/* The whole page scrolls (not just the body), so the footer comes after the content and spans the full width, under the
   sidebar too. It sits at the bottom of the window only when the content is short. The header and sidebar stay in view. */
.rz-layout {
    height: auto;
    min-height: 100dvh;
    overflow: visible;
    grid-template-columns: auto minmax(0, 1fr);
}

/* Wide content (like the inventory grid) scrolls sideways inside the body instead of stretching the whole page */
.rz-layout .rz-body {
    overflow-x: auto;
    overflow-y: visible;
    min-width: 0;
    width: auto;
}

.rz-layout .rz-header {
    position: sticky;
    top: 0;
}

/* The sidebar column stretches to the end of the content (so the footer sits underneath it); only the menu inside it stays in view */
.rz-layout .rz-sidebar {
    overflow: visible;
}

.rz-layout .rz-sidebar > .rz-panel-menu {
    position: sticky;
    top: var(--rz-header-min-height, 50px);
    max-height: calc(100dvh - var(--rz-header-min-height, 50px));
    overflow-y: auto;
}