/* === BASE === */
html, body {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

h1:focus {
    outline: none;
}

/* Link: delega a Bootstrap */
a, .btn-link {
    color: var(--bs-link-color);
}

    /* Focus ring custom */
    .btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
        box-shadow: 0 0 0 .1rem white, 0 0 0 .25rem #258cfb;
    }

/* === VARIABILI APP “PS” — fallback globali (mai vuoti) === */
:root {
    /* Palette primaria “blu” base */
    --ps-primary-800: hsl(217 85% 32%);
    --ps-primary-700: hsl(217 85% 40%);
    --ps-primary-600: hsl(217 85% 47%);
    --ps-primary-500: hsl(217 85% 54%);
    --ps-primary-400: hsl(217 85% 62%);
    /* Sidebar di default (se il tema non è ancora risolto) */
    --ps-sidebar-bg: linear-gradient(180deg, var(--ps-primary-700) 0%, var(--ps-primary-500) 100%);
    --ps-sidebar-hover-bg: rgba(255,255,255,.12);
    --ps-sidebar-active-bg: rgba(255,255,255,.22);
    --ps-sidebar-fg: #fff;
    /* Spaziatura icone NavLink (gestita nel padding del link) */
    --ps-icon-left: 10px;
    --ps-icon-gap: .6rem;
    /* Topbar */
    --ps-topbar-h: 3.5rem;
    /* Colori del logo (SVG) */
    --ps-logo-p: #0E7C7B; /* “P” */
    --ps-logo-lime: #B7E300; /* barre/beam */
}

    /* === LIGHT THEME === */
    :root[data-bs-theme="light"] {
        --ps-primary-800: hsl(217 90% 32%);
        --ps-primary-700: hsl(217 90% 40%);
        --ps-primary-600: hsl(217 90% 47%);
        --ps-primary-500: hsl(217 90% 54%);
        --ps-primary-400: hsl(217 90% 62%);
        /* BRAND: unica fonte di verità per il gradiente della brand area */
        --ps-brand-grad-top: var(--ps-primary-700);
        --ps-brand-grad-bottom: var(--ps-primary-500);
        /* Sidebar/brand area */
        --ps-sidebar-bg: linear-gradient( 180deg, var(--ps-brand-grad-top) 0%, var(--ps-brand-grad-bottom) 100% );
        --ps-sidebar-hover-bg: rgba(255,255,255,.14);
        --ps-sidebar-active-bg: rgba(255,255,255,.24);
        --ps-sidebar-fg: #fff;
        /* Topbar (sopra i contenuti) — ancorata alla brand area */
        --ps-topbar-grad-left: var(--ps-brand-grad-top);
        --ps-topbar-grad-right: var(--ps-logo-p);
        --ps-topbar-link: var(--ps-logo-lime);
        --ps-topbar-link-hover: color-mix(in hsl, var(--ps-logo-lime) 85%, white);
    }

    /* === DARK THEME === */
    :root[data-bs-theme="dark"] {
        --ps-primary-800: hsl(217 90% 24%);
        --ps-primary-700: hsl(217 90% 30%);
        --ps-primary-600: hsl(217 90% 38%);
        --ps-primary-500: hsl(217 90% 46%);
        /* BRAND */
        --ps-brand-grad-top: var(--ps-primary-800);
        --ps-brand-grad-bottom: var(--ps-primary-600);
        /* Sidebar/brand area */
        --ps-sidebar-bg: linear-gradient( 180deg, var(--ps-brand-grad-top) 0%, var(--ps-brand-grad-bottom) 100% );
        --ps-sidebar-hover-bg: rgba(255,255,255,.10);
        --ps-sidebar-active-bg: rgba(255,255,255,.18);
        --ps-sidebar-fg: #fff;
        /* Topbar */
        --ps-topbar-grad-left: var(--ps-brand-grad-top);
        --ps-topbar-grad-right: var(--ps-logo-p);
        --ps-topbar-link: var(--ps-logo-lime);
        --ps-topbar-link-hover: color-mix(in hsl, var(--ps-logo-lime) 85%, black);
    }

/* === SIDEBAR & NAV === */
/* NB: .sidebar è il contenitore nel MainLayout */
.sidebar {
    background: var(--ps-sidebar-bg) !important; /* batte il vecchio viola del template */
    color: var(--ps-sidebar-fg) !important;
}

    .sidebar .nav-link {
        color: var(--ps-sidebar-fg);
        border-radius: 8px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
        padding-inline-start: var(--ps-icon-left); /* distanza icona-bordo sinistro */
        gap: var(--ps-icon-gap); /* distanza icona-testo */
    }

        .sidebar .nav-link:hover {
            background-color: var(--ps-sidebar-hover-bg);
            color: var(--ps-sidebar-fg);
        }

        .sidebar .nav-link.active {
            background-color: var(--ps-sidebar-active-bg);
            color: var(--ps-sidebar-fg);
        }

        /* Dimensioni icone (Telerik SVG) – colore ereditato */
        .sidebar .nav-link .k-svg-icon,
        .sidebar .nav-link .k-icon {
            width: 1.25rem;
            height: 1.25rem;
            flex: 0 0 auto;
            color: currentColor;
        }

/* Top bar (solo dimensione: colore gestito nel CSS del layout) */
.top-row {
    height: var(--ps-topbar-h);
}

/* Navbar toggle/brand di base */
.navbar-toggler {
    background-color: rgba(255,255,255,.1);
}

.navbar-brand {
    font-size: 1.1rem;
}

/* Error UI */
#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    left: 0;
    width: 100%;
    box-shadow: 0 -1px 2px rgba(0,0,0,.2);
    padding: .6rem 1.25rem .7rem 1.25rem;
    position: fixed;
    z-index: 1000;
    display: none;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: .75rem;
        top: .5rem;
    }

/* Responsive sidebar scroll */
@media (min-width: 641px) {
    .navbar-toggler {
        display: none;
    }

    .collapse {
        display: block;
    }
    /* non comprimere la sidebar su schermi larghi */
    .nav-scrollable {
        height: calc(100vh - var(--ps-topbar-h));
        overflow-y: auto;
    }
}

/* === TOP BAR: dimensione centralizzata + contenimento (per la variante .navbar) === */
.top-row.navbar {
    --brand-h: 3.5rem; /* altezza desiderata della top-bar del brand */
    height: var(--brand-h);
    overflow: hidden; /* evita che il logo sbordi verso il menu */
    padding-top: var(--bs-navbar-padding-y, .5rem); /* mantieni il padding Bootstrap */
    padding-bottom: var(--bs-navbar-padding-y, .5rem);
}

/* BRAND (logo + testo) */
.top-row .navbar-brand {
    padding: 0 .25rem; /* niente padding verticale extra sul brand */
}

.navbar-brand .brand-logo {
    /* sottrai il padding verticale della navbar per calcolare l’altezza utile del logo */
    max-height: calc(var(--brand-h) - (var(--bs-navbar-padding-y, .5rem) * 2));
    width: auto;
    display: block;
}

/* Mostra la variante giusta del logo in base al tema */
:root[data-bs-theme="light"] .brand-logo.brand-dark {
    display: none;
}

:root[data-bs-theme="dark"] .brand-logo.brand-light {
    display: none;
}

/* Testo brand */
.navbar-brand .brand-text {
    font-weight: 600;
    font-size: clamp(.95rem, 1.6vw, 1.1rem);
    line-height: 1;
    white-space: nowrap;
    color: currentColor;
}

/* === Topbar: match perfetto con la brand area (simula overlay nero 40%) === */
/* Applica solo se il browser supporta color-mix() */
@supports (color: color-mix(in hsl, black, white)) {
    :root {
        /* pesi del mix che simulano il velo rgba(0,0,0,0.4) */
        --ps-brand-mix-base: 60%;
        --ps-brand-mix-black: 40%;
    }

        :root[data-bs-theme="light"] {
            /* sinistra della topbar = brand-top scurita come la brand area */
            --ps-topbar-grad-left: color-mix( in hsl, var(--ps-brand-grad-top) var(--ps-brand-mix-base), black var(--ps-brand-mix-black) );
        }

        :root[data-bs-theme="dark"] {
            --ps-topbar-grad-left: color-mix( in hsl, var(--ps-brand-grad-top) var(--ps-brand-mix-base), black var(--ps-brand-mix-black) );
        }
}

/* OFF: disattiva l’overlay 40% sulla topbar-left */
/* @supports (color: color-mix(in hsl, black, white)) {
    :root {
        --ps-brand-mix-black: 0%;
        --ps-brand-mix-base: 100%;
    }
} */