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

h1:focus {
    outline: none;
}

.grid-host {
    position: relative;
    min-height: 770px;
}

.grid-host .k-grid {
    visibility: hidden;
    pointer-events: none;
}

.grid-host.grid-host--ready .k-grid {
    visibility: visible;
    pointer-events: auto;
}

.list-busy-overlay {
    position: absolute;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 96px;
    background: linear-gradient(180deg, rgba(235, 247, 255, 0.94) 0%, rgba(225, 242, 250, 0.9) 100%);
    backdrop-filter: blur(2px);
    pointer-events: all;
    cursor: progress;
}

.list-busy-panel {
    min-width: min(360px, calc(100% - 48px));
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid rgba(14, 76, 130, 0.22);
    border-radius: 8px;
    background: linear-gradient(135deg, #ffffff 0%, #edf8fc 100%);
    color: #123247;
    font-weight: 800;
    box-shadow: 0 12px 30px rgba(18, 50, 71, 0.16);
}

/* 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: #123247;
    --ps-primary-700: #0e4c82;
    --ps-primary-600: #0e6d88;
    --ps-primary-500: #0e7c7b;
    --ps-primary-400: #2fa8a2;
    /* 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 */
    --ps-sidebar-w: 292px;
}

    /* === LIGHT THEME === */
    :root[data-bs-theme="light"] {
        --ps-primary-800: #123247;
        --ps-primary-700: #0e4c82;
        --ps-primary-600: #0e6d88;
        --ps-primary-500: #0e7c7b;
        --ps-primary-400: #2fa8a2;
        /* BRAND: unica fonte di verità per il gradiente della brand area */
        --ps-brand-grad-top: var(--ps-primary-500);
        --ps-brand-grad-bottom: var(--ps-primary-800);
        /* Sidebar/brand area */
        --ps-sidebar-bg: linear-gradient( 180deg, #0e7c7b 0%, #0e4c82 52%, #123247 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: #0b2434;
        --ps-primary-700: #0b3f67;
        --ps-primary-600: #0d6575;
        --ps-primary-500: #0e7c7b;
        /* BRAND */
        --ps-brand-grad-top: var(--ps-primary-500);
        --ps-brand-grad-bottom: var(--ps-primary-800);
        /* Sidebar/brand area */
        --ps-sidebar-bg: linear-gradient( 180deg, #0e7c7b 0%, #0b3f67 52%, #0b2434 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;
    flex: 0 0 var(--ps-sidebar-w);
    width: var(--ps-sidebar-w);
    min-width: var(--ps-sidebar-w);
    max-width: var(--ps-sidebar-w);
}

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

        .sidebar .nav-link span {
            min-width: 0;
            overflow-wrap: anywhere;
        }

        .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%;
    }
} */


/* === Identity Manage: PersonalData action buttons === */
form#download-data {
    display: inline-flex;
    margin: 0;
}

form#download-data .btn {
    min-width: 10rem;
}

form#download-data + p {
    display: inline-flex;
    margin: 0 0 0 .75rem;
    vertical-align: top;
}

a#delete.btn {
    min-width: 10rem;
}