/* ============================================================
   ADMIN UI — Minimal & Clean
   Bootstrap 5 + Blazor
   Palette: bianco, nero, fucsia | grigio, rosso
   ============================================================ */

/* ── Google Font ─────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,300&family=DM+Mono:wght@400;500&display=swap');

/* ── CSS Variables ───────────────────────────────────────── */
:root {
    /* Core palette */
    --c-white: #ffffff;
    --c-black: #0a0a0a;
    --c-fuxia: #e0007a;
    --c-fuxia-light: #ff3399;
    --c-fuxia-dim: #f0005a18;
    /* Secondary */
    --c-grey-50: #f7f7f8;
    --c-grey-100: #f0f0f2;
    --c-grey-200: #e2e2e6;
    --c-grey-300: #c8c8d0;
    --c-grey-400: #9898a6;
    --c-grey-500: #6b6b7a;
    --c-grey-700: #3a3a46;
    --c-red: #d0021b;
    --c-red-dim: #d0021b18;
    /* Surfaces */
    --surface-bg: var(--c-grey-50);
    --surface-card: var(--c-white);
    --surface-sidebar: var(--c-black);
    /* Typography */
    --font-sans: 'DM Sans', sans-serif;
    --font-mono: 'DM Mono', monospace;
    /* Sidebar */
    --sidebar-w: 240px;
    --sidebar-collapsed-w: 64px;
    /* Spacing scale */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    /* Radii */
    --r-sm: 4px;
    --r-md: 8px;
    --r-lg: 12px;
    --r-pill: 999px;
    /* Shadows */
    --shadow-xs: 0 1px 2px rgba(0,0,0,.06);
    --shadow-sm: 0 2px 8px rgba(0,0,0,.08);
    --shadow-md: 0 4px 20px rgba(0,0,0,.10);
    --shadow-fuxia: 0 4px 20px rgba(224,0,122,.22);
    /* Transitions */
    --t-fast: 120ms ease;
    --t-base: 200ms ease;
    --t-slow: 320ms ease;
}

/* ── Reset & Base ────────────────────────────────────────── */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

::selection {
    color: white;
    background: var(--c-fuxia-light);
}

html, body {
    height: 100%;
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.6;
    color: var(--c-black);
    background: var(--surface-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ── Layout Shell ────────────────────────────────────────── */
.admin-shell {
    display: flex;
    min-height: 100vh;
}

/* ── Sidebar ─────────────────────────────────────────────── */
.admin-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: var(--sidebar-w);
    height: 100vh;
    background: var(--c-black);
    display: flex;
    flex-direction: column;
    z-index: 100;
    transition: width var(--t-slow);
    overflow: hidden;
}

.admin-sidebar__logo {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-6) var(--space-5);
    border-bottom: 1px solid rgba(255,255,255,.07);
    min-height: 64px;
    text-decoration: none;
}

.admin-sidebar__logo-mark {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    background: var(--c-fuxia);
    border-radius: var(--r-sm);
    display: flex;
    align-items: center;
    justify-content: center;
}

    .admin-sidebar__logo-mark svg {
        width: 16px;
        height: 16px;
        fill: var(--c-white);
    }

.admin-sidebar__logo-text {
    font-size: 15px;
    font-weight: 600;
    color: var(--c-white);
    letter-spacing: -.3px;
    white-space: nowrap;
}

/* Nav */
.admin-nav {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: var(--space-4) 0;
    scrollbar-width: none;
}

    .admin-nav::-webkit-scrollbar {
        display: none;
    }

.admin-nav__section-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--c-grey-500);
    padding: var(--space-5) var(--space-5) var(--space-2);
    white-space: nowrap;
}

.admin-nav__item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-5);
    margin: 1px var(--space-2);
    border-radius: var(--r-md);
    text-decoration: none;
    color: var(--c-grey-400);
    font-size: 13.5px;
    font-weight: 400;
    white-space: nowrap;
    transition: background var(--t-fast), color var(--t-fast);
    cursor: pointer;
    border: none;
    background: transparent;
    width: calc(100% - var(--space-4));
    text-align: left;
}

    .admin-nav__item:hover {
        background: rgba(255,255,255,.06);
        color: var(--c-white);
    }

    .admin-nav__item.active {
        background: var(--c-fuxia-dim);
        color: var(--c-fuxia-light);
        font-weight: 500;
    }

        .admin-nav__item.active .admin-nav__icon {
            color: var(--c-fuxia-light);
        }

.admin-nav__icon {
    flex-shrink: 0;
    font-size: 15px;
    width: 18px; /* fixed slot width keeps icon aligned */
    text-align: center;
    line-height: 1;
    opacity: .85;
    /* do NOT use height — FA icons are inline text */
}

.admin-nav__badge {
    margin-left: auto;
    background: var(--c-fuxia);
    color: var(--c-white);
    font-size: 10px;
    font-weight: 600;
    padding: 0 6px;
    border-radius: var(--r-pill);
    line-height: 18px;
    min-width: 18px;
    text-align: center;
}

/* Voce di menu ad accordion (es. "Finanza"): <details>/<summary> nativi, nessuna interattività
   Blazor richiesta (la SideBar è renderizzata staticamente, senza @rendermode — un @onclick su un
   <button> qui non farebbe nulla senza un circuito attivo, <details> invece funziona lato browser). */
.admin-nav__group > summary {
    list-style: none;
}

    .admin-nav__group > summary::-webkit-details-marker {
        display: none;
    }

.admin-nav__chevron {
    margin-left: auto;
    font-size: 11px;
    opacity: .7;
    transition: transform var(--t-fast);
}

.admin-nav__group[open] > summary .admin-nav__chevron {
    transform: rotate(180deg);
}

.admin-nav__item--sub {
    padding-left: calc(var(--space-5) + 18px + var(--space-3));
    font-size: 12.5px;
}

    .admin-nav__item--sub .admin-nav__icon {
        font-size: 13px;
        width: 14px;
    }

/* Sidebar user footer */
.admin-sidebar__footer {
    padding: var(--space-4);
    border-top: 1px solid rgba(255,255,255,.07);
    flex-shrink: 0;
}

/* Sidebar copyright footer */
.admin-sidebar__copyright {
    padding: var(--space-3) var(--space-4);
    border-top: 1px solid rgba(255,255,255,.05);
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex-shrink: 0;
    overflow: hidden;
}

.admin-sidebar__copyright-text {
    font-size: 10.5px;
    color: var(--c-grey-500);
    line-height: 1.5;
    white-space: nowrap;
    transition: opacity var(--t-slow);
}

.admin-sidebar__copyright-version {
    font-size: 10px;
    color: #4a4a58;
    font-family: var(--font-mono);
    white-space: nowrap;
    transition: opacity var(--t-slow);
}

/* ── Sidebar collapsed state (desktop toggle) ── */
.sidebar-collapsed .admin-sidebar {
    width: var(--sidebar-collapsed-w);
}

/* Collapsed: hide text labels — use max-width:0 so they don't push icons */
.sidebar-collapsed .admin-sidebar__logo-text,
.sidebar-collapsed .admin-nav__section-label,
.sidebar-collapsed .admin-sidebar__copyright-text,
.sidebar-collapsed .admin-sidebar__copyright-version {
    max-width: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

/* Nav item spans: collapse to zero width so icon centres properly */
.sidebar-collapsed .admin-nav__item > span:not(.admin-nav__badge) {
    max-width: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-width var(--t-slow), opacity var(--t-slow);
    pointer-events: none;
}

/* Badge: hide completely */
.sidebar-collapsed .admin-nav__badge {
    display: none;
}

/* Sidebar user footer text + logout btn */
.sidebar-collapsed .admin-sidebar__footer .sb-text {
    max-width: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

.sidebar-collapsed .admin-sidebar__footer .btn-icon {
    display: none;
}

.sidebar-collapsed .admin-sidebar__logo {
    justify-content: center;
}

.sidebar-collapsed .admin-nav__item {
    justify-content: center;
    padding: var(--space-3) 0;
    gap: 0; /* no gap when only icon is visible */
    width: calc(var(--sidebar-collapsed-w) - var(--space-4));
    margin-left: var(--space-2);
    margin-right: var(--space-2);
}

.sidebar-collapsed .admin-sidebar__footer {
    display: flex;
    justify-content: center;
}

.sidebar-collapsed .admin-sidebar__copyright {
    align-items: center;
}

.sidebar-collapsed .admin-topbar {
    left: var(--sidebar-collapsed-w);
}

.sidebar-collapsed .admin-main {
    margin-left: var(--sidebar-collapsed-w);
}

/* Toggle button in topbar */
.sidebar-toggle {
    width: 34px;
    height: 34px;
    border-radius: var(--r-md);
    border: 1px solid var(--c-grey-200);
    background: transparent;
    color: var(--c-grey-500);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
    flex-shrink: 0;
}

    .sidebar-toggle:hover {
        background: var(--c-grey-100);
        color: var(--c-black);
        border-color: var(--c-grey-300);
    }

    .sidebar-toggle i {
        font-size: 14px;
        transition: transform var(--t-slow);
    }

.sidebar-collapsed .sidebar-toggle i {
    transform: scaleX(-1);
}

/* ── Topbar ──────────────────────────────────────────────── */
.admin-topbar {
    position: fixed;
    top: 0;
    left: var(--sidebar-w);
    right: 0;
    height: 64px;
    background: var(--c-white);
    border-bottom: 1px solid var(--c-grey-200);
    display: flex;
    align-items: center;
    padding: 0 var(--space-8);
    gap: var(--space-4);
    z-index: 50;
    transition: left var(--t-slow);
}

.admin-topbar__title {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -.2px;
    color: var(--c-black);
    flex: 1;
}

.admin-topbar__search {
    position: relative;
    width: 240px;
}

    .admin-topbar__search input {
        width: 100%;
        height: 36px;
        background: var(--c-grey-100);
        border: 1px solid transparent;
        border-radius: var(--r-pill);
        padding: 0 var(--space-4) 0 36px;
        font-family: var(--font-sans);
        font-size: 13px;
        color: var(--c-black);
        outline: none;
        transition: border-color var(--t-fast), background var(--t-fast);
    }

        .admin-topbar__search input::placeholder {
            color: var(--c-grey-400);
        }

        .admin-topbar__search input:focus {
            background: var(--c-white);
            border-color: var(--c-fuxia);
        }

.admin-topbar__search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--c-grey-400);
    pointer-events: none;
    width: 15px;
    height: 15px;
}

/* Topbar actions */
.admin-topbar__actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

/* ── Main Content ─────────────────────────────────────────── */
.admin-main {
    margin-left: var(--sidebar-w);
    margin-top: 64px;
    flex: 1;
    padding: var(--space-8);
    min-height: calc(100vh - 64px);
    transition: margin-left var(--t-slow);
}

/* ── Page Header ──────────────────────────────────────────── */
.page-header {
    /*margin-bottom: var(--space-8);*/
}

.page-header__eyebrow {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--c-fuxia);
    margin-bottom: var(--space-1);
}

.page-header__title {
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -.5px;
    color: var(--c-black);
    line-height: 1.2;
}

.page-header__subtitle {
    font-size: 13.5px;
    color: var(--c-grey-500);
    margin-top: var(--space-1);
}

.page-header__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--space-3);
}

/* ── Cards ────────────────────────────────────────────────── */
.card {
    background: var(--surface-card);
    border: 1px solid var(--c-grey-200);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-xs);
}

.card-header {
    padding: var(--space-5) var(--space-6);
    border-bottom: 1px solid var(--c-grey-100);
    display: flex;
    align-items: center;
    gap: var(--space-3);
    background: transparent;
}

.card-header__title {
    font-size: 14px;
    font-weight: 600;
    color: var(--c-black);
    letter-spacing: -.2px;
}

.card-header__subtitle {
    font-size: 12.5px;
    color: var(--c-grey-500);
    margin-top: 1px;
}

.card-body {
    padding: var(--space-6);
}

.card-footer {
    padding: var(--space-4) var(--space-6);
    border-top: 1px solid var(--c-grey-100);
    background: transparent;
    border-radius: 0 0 var(--r-lg) var(--r-lg);
}

/* Stat card variant */
.stat-card {
    background: var(--surface-card);
    border: 1px solid var(--c-grey-200);
    border-radius: var(--r-lg);
    padding: var(--space-6);
    box-shadow: var(--shadow-xs);
    transition: box-shadow var(--t-base), transform var(--t-base);
}

    .stat-card:hover {
        box-shadow: var(--shadow-sm);
        transform: translateY(-1px);
    }

.stat-card__label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: var(--c-grey-500);
    margin-bottom: var(--space-3);
}

.stat-card__value {
    font-size: 28px;
    font-weight: 600;
    letter-spacing: -1px;
    color: var(--c-black);
    line-height: 1;
    margin-bottom: var(--space-3);
}

.stat-card__delta {
    font-size: 12.5px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 4px;
}

.stat-card__delta--up {
    color: #0a9a5c;
}

.stat-card__delta--down {
    color: var(--c-red);
}

.stat-card__icon {
    width: 36px;
    height: 36px;
    border-radius: var(--r-md);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--c-fuxia-dim);
    color: var(--c-fuxia);
}

/* ── Buttons ──────────────────────────────────────────────── */
.btn, .e-btn {
    font-family: var(--font-sans);
    font-weight: 500;
    border-radius: var(--r-md);
    border: 1px solid transparent;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
    letter-spacing: -.1px;
    text-decoration: none;
    line-height: 1;
    white-space: nowrap;
}

    .btn:active, .e-btn:active {
        transform: scale(.98);
    }

    .btn:focus-visible, .e-btn:focus-visible {
        outline: 2px solid var(--c-fuxia);
        outline-offset: 2px;
    }

/* Sizes */
.btn-sm {
    font-size: 12.5px !important;
    padding: 6px 12px !important;
    height: 32px !important;
}

.btn-md,
.btn {
    font-size: 13.5px;
    padding: 8px 16px;
    height: 38px;
}

.btn-lg {
    font-size: 14px;
    padding: 10px 22px;
    height: 44px;
}

/* Primary — fucsia. Il tema SfButton (bootstrap5.css) va corretto in syncfusion-override.css, non qui:
   quel foglio carica DOPO admin.css, quindi vince sempre a parità di specificità — le regole .e-primary
   qui non hanno mai effetto sui pulsanti Syncfusion, a prescindere da come sono scritte. */
.btn-primary, .e-primary:focus, .e-css.e-btn.e-primary:focus {
    background: var(--c-fuxia);
    color: var(--c-white);
    border-color: var(--c-fuxia);
}

    .btn-primary:hover, .e-btn:hover {
        background: var(--c-fuxia-light);
        border-color: var(--c-fuxia-light);
        box-shadow: var(--shadow-fuxia);
        color: var(--c-white);
    }

/* Secondary — ghost/outline */
.btn-secondary {
    background: var(--c-white);
    color: var(--c-black);
    border-color: var(--c-grey-300);
}

    .btn-secondary:hover {
        background: var(--c-grey-50);
        border-color: var(--c-grey-400);
        color: var(--c-black);
    }

/* Ghost */
.btn-ghost {
    background: transparent;
    color: var(--c-grey-500);
    border-color: transparent;
}

    .btn-ghost:hover {
        background: var(--c-grey-100);
        color: var(--c-black);
    }

/* Danger */
.btn-danger {
    background: var(--c-red);
    color: var(--c-white);
    border-color: var(--c-red);
}

    .btn-danger:hover {
        background: #b50017;
        border-color: #b50017;
        color: var(--c-white);
    }

/* Dark */
.btn-dark {
    background: var(--c-black);
    color: var(--c-white);
    border-color: var(--c-black);
}

    .btn-dark:hover {
        background: var(--c-grey-700);
        color: var(--c-white);
    }

/* Icon button */
.btn-icon {
    width: 36px;
    height: 36px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--r-md);
    background: transparent;
    border: 1px solid transparent;
    color: var(--c-grey-500);
    cursor: pointer;
    transition: background var(--t-fast), color var(--t-fast);
    flex-shrink: 0;
}

    .btn-icon:hover {
        background: var(--c-grey-100);
        color: var(--c-black);
    }

/* ── Forms ────────────────────────────────────────────────── */

.row > * {
    margin-top: 15px !important;
}

.form-label {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--c-grey-700);
    margin-bottom: var(--space-1) !important;
    letter-spacing: .1px;
}

.form-control,
.form-select {
    font-family: var(--font-sans);
    font-size: 13.5px;
    color: var(--c-black);
    background: var(--c-white);
    border: 1px solid var(--c-grey-300);
    border-radius: var(--r-md);
    padding: 8px 12px !important;
    height: 40px !important;
    width: 100%;
    outline: none;
    transition: border-color var(--t-fast), box-shadow var(--t-fast);
    -webkit-appearance: none;
}

    .form-control::placeholder {
        color: var(--c-grey-400);
    }

    .form-control:focus,
    .form-select:focus {
        border-color: var(--c-fuxia);
        box-shadow: 0 0 0 3px rgba(224,0,122,.12);
    }

    .form-control:disabled,
    .form-select:disabled {
        background: var(--c-grey-100);
        color: var(--c-grey-400);
        cursor: not-allowed;
    }

    .form-control.is-invalid,
    .form-select.is-invalid {
        border-color: var(--c-red);
    }

        .form-control.is-invalid:focus {
            box-shadow: 0 0 0 3px var(--c-red-dim);
        }

.invalid-feedback {
    font-size: 12px;
    color: var(--c-red);
    margin-top: var(--space-1);
}

.invalid-feedback-on {
    font-size: 12px;
    color: var(--c-red);
    margin-top: var(--space-1);
}

textarea.form-control {
    height: auto;
    min-height: 100px;
    resize: vertical;
}

/* Checkbox & Radio */
.form-check-input {
    width: 16px;
    height: 16px;
    border: 1.5px solid var(--c-grey-300);
    border-radius: var(--r-sm);
    accent-color: var(--c-fuxia);
    cursor: pointer;
    transition: border-color var(--t-fast);
}

    .form-check-input:checked {
        background-color: var(--c-fuxia);
        border-color: var(--c-fuxia);
    }

    .form-check-input:focus {
        box-shadow: 0 0 0 3px rgba(224,0,122,.12);
        outline: none;
    }

.form-check-label {
    font-size: 13.5px;
    color: var(--c-black);
    cursor: pointer;
    margin-left: 3px;
    margin-top: 3px;
    color: #6b7280 !important;
}

/* Toggle switch */
.form-switch .form-check-input {
    width: 32px;
    height: 18px;
    border-radius: var(--r-pill);
}

/* ── Tables ───────────────────────────────────────────────── */
.table-wrapper {
    overflow-x: auto;
    border-radius: var(--r-lg);
    border: 1px solid var(--c-grey-200);
}

.table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
    margin: 0;
}

    .table thead th {
        background: var(--c-grey-50);
        font-size: 11px;
        font-weight: 600;
        letter-spacing: .8px;
        text-transform: uppercase;
        color: var(--c-grey-500);
        padding: 12px 16px;
        border-bottom: 1px solid var(--c-grey-200);
        white-space: nowrap;
    }

    .table tbody td {
        padding: 13px 16px;
        border-bottom: 1px solid var(--c-grey-100);
        color: var(--c-black);
        vertical-align: middle;
    }

    .table tbody tr:last-child td {
        border-bottom: none;
    }

    .table tbody tr {
        transition: background var(--t-fast);
    }

        .table tbody tr:hover {
            background: var(--c-grey-50);
        }

.table-striped tbody tr:nth-of-type(even) {
    background: var(--c-grey-50);
}

    .table-striped tbody tr:nth-of-type(even):hover {
        background: var(--c-grey-100);
    }

/* Sortable header */
.table thead th.sortable {
    cursor: pointer;
    user-select: none;
}

    .table thead th.sortable:hover {
        color: var(--c-black);
    }

.table thead th.sort-active {
    color: var(--c-fuxia);
}

/* ── Badges ───────────────────────────────────────────────── */
.badge {
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: var(--r-pill);
    letter-spacing: .3px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    line-height: 1.4;
}

.badge-primary {
    background: var(--c-fuxia-dim);
    color: var(--c-fuxia);
}

.badge-dark {
    background: var(--c-black);
    color: var(--c-white);
}

.badge-success {
    background: #e6f7f0;
    color: #0a9a5c;
}

.badge-danger {
    background: var(--c-red-dim);
    color: var(--c-red);
}

.badge-warning {
    background: #fff4e0;
    color: #a05a00;
}

.badge-neutral {
    background: var(--c-grey-100);
    color: var(--c-grey-500);
}

.badge-info {
    background: #e3f2fd;
    color: #0d6efd;
}

/* Dot badge */
.badge-dot {
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: var(--r-pill);
    letter-spacing: .3px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    line-height: 1.4;
}

    .badge-dot::before {
        content: '';
        width: 7px;
        height: 7px;
        border-radius: 50%;
        flex-shrink: 0;
    }

    .badge-dot.badge-primary::before {
        background: var(--c-fuxia);
    }

    .badge-dot.badge-success::before {
        background: #0a9a5c;
    }

    .badge-dot.badge-danger::before {
        background: var(--c-red);
    }

    .badge-dot.badge-neutral::before {
        background: var(--c-grey-400);
    }

    .badge-dot.badge-neutral::before {
        background: var(--c-grey-400);
    }

/* ── Alerts ───────────────────────────────────────────────── */
.alert {
    border-radius: var(--r-md);
    padding: var(--space-4) var(--space-5);
    font-size: 13.5px;
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    border: 1px solid transparent;
}

.alert-primary {
    background: var(--c-fuxia-dim);
    border-color: rgba(224,0,122,.2);
    color: #8c004c;
}

.alert-danger {
    background: var(--c-red-dim);
    border-color: rgba(208,2,27,.2);
    color: #8a0010;
}

.alert-success {
    background: #e6f7f0;
    border-color: rgba(10,154,92,.2);
    color: #065c37;
}

.alert-warning {
    background: #fff4e0;
    border-color: rgba(160,90,0,.2);
    color: #7a4500;
}

.alert-neutral {
    background: var(--c-grey-100);
    border-color: var(--c-grey-200);
    color: var(--c-grey-700);
}

/* ── Modals ───────────────────────────────────────────────── */
.modal-content {
    border: none;
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-md);
    font-family: var(--font-sans);
}

.modal-header {
    padding: var(--space-5) var(--space-6);
    border-bottom: 1px solid var(--c-grey-100);
    display: flex;
    align-items: center;
}

.modal-title {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -.2px;
    color: var(--c-black);
}

.modal-body {
    padding: var(--space-6);
}

.modal-footer {
    padding: var(--space-4) var(--space-6);
    border-top: 1px solid var(--c-grey-100);
    display: flex;
    justify-content: flex-end;
    gap: var(--space-3);
}

.modal-backdrop.show {
    opacity: .35;
}

/* ── Tabs ─────────────────────────────────────────────────── */
.nav-tabs {
    border-bottom: 1px solid var(--c-grey-200);
    gap: var(--space-1);
}

    .nav-tabs .nav-link {
        font-family: var(--font-sans);
        font-size: 13.5px;
        font-weight: 500;
        color: var(--c-grey-500);
        border: none;
        border-bottom: 2px solid transparent;
        border-radius: 0;
        padding: 8px 14px 10px;
        margin-bottom: -1px;
        transition: color var(--t-fast), border-color var(--t-fast);
        background: transparent;
    }

        .nav-tabs .nav-link:hover {
            color: var(--c-black);
            border-bottom-color: var(--c-grey-300);
        }

        .nav-tabs .nav-link.active {
            color: var(--c-fuxia);
            border-bottom-color: var(--c-fuxia);
            background: transparent;
        }

/* Pills nav */
.nav-pills .nav-link {
    font-family: var(--font-sans);
    font-size: 13.5px;
    font-weight: 500;
    color: var(--c-grey-500);
    border-radius: var(--r-md);
    padding: 7px 14px;
    transition: background var(--t-fast), color var(--t-fast);
}

    .nav-pills .nav-link:hover {
        background: var(--c-grey-100);
        color: var(--c-black);
    }

    .nav-pills .nav-link.active {
        background: var(--c-black);
        color: var(--c-white);
    }

/* ── Dropdowns ────────────────────────────────────────────── */
.dropdown-menu {
    border: 1px solid var(--c-grey-200);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-md);
    padding: var(--space-2);
    font-family: var(--font-sans);
    min-width: 180px;
}

.dropdown-item {
    font-size: 13.5px;
    color: var(--c-black);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--r-sm);
    display: flex;
    align-items: center;
    gap: var(--space-3);
    transition: background var(--t-fast), color var(--t-fast);
    cursor: pointer;
}

    .dropdown-item:hover {
        background: var(--c-grey-100);
        color: var(--c-black);
    }

    .dropdown-item.text-danger {
        color: var(--c-red);
    }

        .dropdown-item.text-danger:hover {
            background: var(--c-red-dim);
            color: var(--c-red);
        }

.dropdown-divider {
    border-top: 1px solid var(--c-grey-100);
    margin: var(--space-2) 0;
}

.dropdown-header {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--c-grey-500);
    padding: var(--space-2) var(--space-3) var(--space-1);
}

/* ── Pagination ───────────────────────────────────────────── */
.pagination {
    gap: var(--space-1);
}

.page-link {
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 500;
    min-width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--c-grey-200);
    border-radius: var(--r-md);
    color: var(--c-grey-500);
    background: var(--c-white);
    padding: 0 var(--space-3);
    transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}

    .page-link:hover {
        background: var(--c-grey-100);
        color: var(--c-black);
        border-color: var(--c-grey-300);
    }

.page-item.active .page-link {
    background: var(--c-black);
    border-color: var(--c-black);
    color: var(--c-white);
}

.page-item.disabled .page-link {
    opacity: .4;
    cursor: not-allowed;
}

/* ── Breadcrumb ───────────────────────────────────────────── */
.breadcrumb {
    font-size: 12.5px;
    gap: 0;
    margin: 0;
    padding: 0;
    background: none;
}

.breadcrumb-item + .breadcrumb-item::before {
    content: '/';
    color: var(--c-grey-300);
    padding: 0 6px;
}

.breadcrumb-item a {
    color: var(--c-grey-500);
    text-decoration: none;
}

    .breadcrumb-item a:hover {
        color: var(--c-black);
    }

.breadcrumb-item.active {
    color: var(--c-grey-400);
}

/* ── Progress ─────────────────────────────────────────────── */
.progress {
    height: 6px;
    background: var(--c-grey-200);
    border-radius: var(--r-pill);
    overflow: hidden;
}

.progress-bar {
    background: var(--c-fuxia);
    border-radius: var(--r-pill);
    transition: width .4s ease;
}

    .progress-bar.bg-success {
        background: #0a9a5c;
    }

    .progress-bar.bg-danger {
        background: var(--c-red);
    }

/* ── Avatar ───────────────────────────────────────────────── */
.avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-weight: 600;
    flex-shrink: 0;
    background: var(--c-fuxia-dim);
    color: var(--c-fuxia);
    letter-spacing: -.5px;
    text-transform: uppercase;
}

.avatar-sm {
    width: 28px;
    height: 28px;
    font-size: 11px;
}

.avatar-md {
    width: 36px;
    height: 36px;
    font-size: 13px;
}

.avatar-lg {
    width: 48px;
    height: 48px;
    font-size: 17px;
}

.avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

/* ── Divider ──────────────────────────────────────────────── */
.divider {
    height: 1px;
    background: var(--c-grey-200);
    margin: var(--space-6) 0;
}

/* ── Utilities ────────────────────────────────────────────── */
.text-normal {
    font-size: 11px;
    color: var(--c-grey-700);
}

.text-fuxia {
    color: var(--c-fuxia) !important;
}

.text-muted {
    color: var(--c-grey-500) !important;
}

.text-danger {
    color: var(--c-red) !important;
}

.text-success {
    color: #0a9a5c !important;
}

.bg-fuxia {
    background: var(--c-fuxia) !important;
}

.bg-black {
    background: var(--c-black) !important;
}

.bg-grey {
    background: var(--c-grey-50) !important;
}

.mono {
    font-family: var(--font-mono);
}

/* Focus ring */
*:focus-visible {
    outline: 2px solid var(--c-fuxia);
    outline-offset: 2px;
}

/* ── Skeleton Loader ──────────────────────────────────────── */
.skeleton {
    background: linear-gradient(90deg, var(--c-grey-100) 25%, var(--c-grey-200) 50%, var(--c-grey-100) 75% );
    background-size: 200% 100%;
    border-radius: var(--r-md);
    animation: skeleton-shimmer 1.4s infinite;
}

@keyframes skeleton-shimmer {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

/* ── Scrollbar ────────────────────────────────────────────── */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--c-grey-300);
    border-radius: var(--r-pill);
}

    ::-webkit-scrollbar-thumb:hover {
        background: var(--c-grey-400);
    }


/* Collapsed nav items show native tooltip via [title] attribute */
.sidebar-collapsed .admin-nav__item {
    position: relative;
}

/* ── Toast notifications ────────────────────────────────────── */

.toast-container {
    position: fixed;
    top: 80px;
    right: var(--space-6);
    z-index: 1080;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    pointer-events: none;
}

.toast-container-custom {
    position: fixed;
    top: 80px;
    right: var(--space-6);
    z-index: 1080;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    pointer-events: none;
}

.toast-custom {
    pointer-events: all;
    min-width: 320px;
    max-width: 400px;
    background: var(--c-white);
    border: 1px solid var(--c-grey-200);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-md);
    display: flex;
    flex-direction: column; /* ← colonna invece di riga */
    padding: var(--space-4);
    font-size: 13px;
    animation: toastIn var(--t-slow) ease forwards;
    transition: opacity var(--t-base), transform var(--t-base);
    overflow: hidden;
    position: relative;
}

    .toast-custom.hiding {
        animation: toastOut var(--t-base) ease forwards;
    }

@keyframes toastIn {
    from {
        opacity: 0;
        transform: translateX(24px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes toastOut {
    from {
        opacity: 1;
        transform: translateX(0);
    }

    to {
        opacity: 0;
        transform: translateX(24px);
    }
}

.toast-custom__icon {
    width: 32px;
    height: 32px;
    border-radius: var(--r-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 14px;
}

.toast-custom--success .toast-custom__icon {
    background: #e6f7f0;
    color: #0a9a5c;
}

.toast-custom--danger .toast-custom__icon {
    background: var(--c-red-dim);
    color: var(--c-red);
}

.toast-custom--warning .toast-custom__icon {
    background: #fff4e0;
    color: #a05a00;
}

.toast-custom--info .toast-custom__icon {
    background: var(--c-fuxia-dim);
    color: var(--c-fuxia);
}

.toast-custom__body {
    flex: 1;
    min-width: 0;
}

/* Riga 1: icona + titolo a sinistra, X a destra */
.toast-custom__header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}

.toast-custom__title {
    font-weight: 600;
    color: var(--c-black);
    font-size: 13.5px;
    flex: 1; /* ← occupa lo spazio, spinge la X a destra */
}

/* Riga 2: messaggio */
.toast-custom__msg {
    color: var(--c-grey-500);
    line-height: 1.5;
    font-size: 13px;
    margin-bottom: var(--space-3);
}

.toast-custom__time {
    font-size: 11px;
    color: var(--c-grey-400);
    margin-top: 4px;
}

.toast-custom__close {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--c-grey-400);
    font-size: 14px;
    padding: 2px;
    line-height: 1;
    flex-shrink: 0;
    margin-left: auto;
    transition: color var(--t-fast);
}

    .toast-custom__close:hover {
        color: var(--c-black);
    }

/* Riga 3: progress bar (già absolute, resta in fondo) */
.toast-custom__progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    border-radius: 0 0 var(--r-lg) var(--r-lg);
    animation: toastProgress linear forwards;
}

.toast-custom {
    position: relative;
    overflow: hidden;
}

.toast-custom--success .toast-custom__progress {
    background: #0a9a5c;
}

.toast-custom--danger .toast-custom__progress {
    background: var(--c-red);
}

.toast-custom--warning .toast-custom__progress {
    background: #f59e0b;
}

.toast-custom--info .toast-custom__progress {
    background: var(--c-fuxia);
}

@keyframes toastProgress {
    from {
        width: 100%;
    }

    to {
        width: 0%;
    }
}

/* ── Responsive ───────────────────────────────────────────── */

/* ── xl: sidebar full, topbar search visible ── */
@media (max-width: 1280px) {
    .admin-topbar__search {
        width: 180px;
    }
}

/* ── lg: sidebar collapsed to icons only ── */
@media (max-width: 1024px) {
    :root {
        --sidebar-w: var(--sidebar-collapsed-w);
    }

    .admin-sidebar {
        width: var(--sidebar-collapsed-w);
    }

    .admin-sidebar__logo-text,
    .admin-nav__item span,
    .admin-nav__section-label,
    .admin-nav__badge,
    .admin-sidebar__footer .sb-text,
    .admin-sidebar__footer .btn-icon {
        display: none;
    }

    .admin-nav__item {
        justify-content: center;
        padding: var(--space-3);
        margin: 1px var(--space-1);
        width: calc(100% - var(--space-2));
    }

    .admin-sidebar__logo {
        justify-content: center;
        padding: var(--space-4) var(--space-3);
    }

    .admin-sidebar__footer {
        display: flex;
        justify-content: center;
        padding: var(--space-3);
    }

    .admin-topbar {
        left: var(--sidebar-collapsed-w);
    }

    .admin-main {
        margin-left: var(--sidebar-collapsed-w);
    }

    .admin-topbar__search {
        width: 200px;
    }
}

/* ── md: hide search, tighter padding ── */
@media (max-width: 768px) {
    .admin-topbar__search {
        display: none;
    }

    .admin-topbar {
        padding: 0 var(--space-5);
        gap: var(--space-3);
    }

    .admin-main {
        padding: var(--space-5);
    }

    /* Page header stacks vertically */
    .page-header {
        flex-direction: column;
        align-items: flex-start !important;
        gap: var(--space-4);
    }

    .page-header__title {
        font-size: 20px;
    }

    .page-header__actions {
        width: 100%;
        justify-content: flex-start;
    }

    /* Stat cards: 2 columns */
    .stat-card__value {
        font-size: 22px;
    }

    /* Cards: reduce padding */
    .card-header {
        padding: var(--space-4) var(--space-5);
        flex-wrap: wrap;
        gap: var(--space-3);
    }

    .card-body {
        padding: var(--space-4) var(--space-5);
    }

    .card-footer {
        padding: var(--space-3) var(--space-5);
        flex-wrap: wrap;
        gap: var(--space-3);
    }

    /* Tables: always scrollable */
    .table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Topbar title: nome ambiente nascosto su mobile (PanelAdmin + PanelUtente).
       visibility e non display:none, perché lo span ha flex:1 e fa da spaziatore
       per allineare a destra gli elementi successivi della topbar. */
    .admin-topbar__title {
        visibility: hidden;
    }

    /* Pagination: reduce size */
    .page-link {
        min-width: 30px;
        height: 30px;
        font-size: 12px;
        padding: 0 var(--space-2);
    }

    /* Modal: full-width on small screens */
    .modal-dialog {
        margin: var(--space-4);
    }

    /* Breadcrumb: smaller */
    .breadcrumb {
        font-size: 12px;
    }
}

/* ── sm: single column adjustments ── */
@media (max-width: 576px) {
    .admin-main {
        padding: var(--space-4);
    }

    .page-header__title {
        font-size: 18px;
    }

    .stat-card {
        padding: var(--space-4);
    }

    .stat-card__value {
        font-size: 20px;
        letter-spacing: -.5px;
    }

    .stat-card__label {
        font-size: 10px;
    }

    /* Stack card header actions below title */
    .card-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-3);
    }

    /* Buttons: stretch on xs */
    .page-header__actions .btn,
    .page-header__actions a.btn {
        flex: 1;
        justify-content: center;
    }

    /* Hide less-important table columns via utility */
    .col-hide-sm {
        display: none;
    }

    /* Tabs: scroll on overflow */
    .nav-tabs,
    .nav-pills {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

        .nav-tabs::-webkit-scrollbar,
        .nav-pills::-webkit-scrollbar {
            display: none;
        }

        .nav-tabs .nav-link,
        .nav-pills .nav-link {
            white-space: nowrap;
        }

    /* Pagination: hide middle pages on xs */
    .pagination .page-item:not(.active):not(:first-child):not(:last-child) {
        display: none;
    }

    .pagination .page-item.active,
    .pagination .page-item:first-child,
    .pagination .page-item:last-child {
        display: flex;
    }

    /* Alert: tighter */
    .alert {
        padding: var(--space-3) var(--space-4);
        font-size: 13px;
    }

    /* Form: full-height btn */
    .btn-auth {
        height: 46px;
    }

    /* Dropdown: avoid overflow on very small screens */
    .dropdown-menu {
        min-width: 160px;
    }
}

/* ── Blazor-specific ──────────────────────────────────────── */
/* Blazor loading bar */
#blazor-error-ui {
    background: var(--c-red-dim);
    color: var(--c-red);
    border-top: 2px solid var(--c-red);
    padding: var(--space-3) var(--space-5);
    font-size: 13px;
    font-family: var(--font-sans);
}

.loading-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    z-index: 9999;
    background: var(--c-grey-200);
}

.loading-progress-value {
    height: 100%;
    background: var(--c-fuxia);
    transition: width .2s ease;
}

/* Valid & invalid states for Blazor EditForm */
.valid.modified:not([type=checkbox]) {
    border-color: #0a9a5c;
}

.invalid {
    border-color: var(--c-red);
}

.validation-message {
    color: var(--c-red);
    font-size: 12px;
    margin-top: 4px;
}



/*Bottone on click or active*/
.btn-check:checked + .btn, .btn.active, .btn.show, .btn:first-child:active, :not(.btn-check) + .btn:active {
    background: var(--c-fuxia-dim);
    border-color: rgba(224, 0, 122, .2);
    color: #8c004c;
}

/* Dropdown nelle righe di tabella — esce dall'overflow */
.e-grid .e-rowcell .dropdown-menu,
.e-grid td .dropdown-menu {
    position: fixed !important;
}

/* Assicura che il trigger abbia position relative come ancora */
.e-grid .e-rowcell .dropdown {
    position: static;
}


/*.e-grid .e-row {
    cursor: pointer;
}

    .e-grid .e-row .no-click {
        cursor: default;
    }
*/
.e-grid .e-selectionbackground,
.e-grid .e-selectionbackground .e-rowcell,
.e-grid .e-selectionbackground .e-rowcell.e-focus {
    background-color: transparent !important;
    color: inherit !important;
}


/*Pagination tabelle*/
.e-pager.sf-pager .e-link, .e-pager.sf-pager {
    margin-left: 3px !important;
    padding: 9.2px 10.5px 9.2px 9.5px !important;
}

a.e-link.e-numericitem.e-spacing.e-currentitem.e-active {
    background: var(--c-black) !important;
    border-color: var(--c-black) !important;
    color: var(--c-white) !important;
}

.e-pager .e-pagercontainer {
    border-width: 0px !important;
    background: var(--c-white) !important;
}

.e-pager.sf-pager .e-pagercontainer .e-first, .e-pager.sf-pager .e-pagercontainer .e-prev, .e-pager.sf-pager .e-pagercontainer .e-next, .e-pager.sf-pager .e-pagercontainer .e-last {
    border-radius: var(--r-md) !important;
    border: 1px solid var(--c-grey-200);
    background: var(--c-white);
    color: var(--c-grey-700);
    transition: background var(--t-fast), color var(--t-fast) !important;
    margin-left: 3px !important;
    padding: 11.2px 10.5px 11.2px 9.5px !important;
}


.e-pager div.e-icons.e-disable {
    color: var(--c-grey-500) !important;
    pointer-events: none;
    background-color: var(--c-grey-100) !important;
}

.e-next .e-icons .e-icon-next .e-nextpage .e-pager-default {
    padding-bottom: 11.2px !important;
    padding-top: 11.2px !important;
}

/* Form section header */
.form-section-title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--c-grey-500);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--c-grey-200);
    margin-bottom: var(--space-5);
}



/* utilizzato per i form con bottone nel footer */
/* Sticky actions bar */
.actions-bar {
    position: sticky;
    bottom: 0;
    background: rgba(247,247,248,.92);
    backdrop-filter: blur(8px);
    border-top: 1px solid var(--c-grey-200);
    padding: var(--space-4) var(--space-8);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
    z-index: 10;
    margin: var(--space-8) calc(-1 * var(--space-8)) 0;
}


/*TOOLTIPS*/
.help-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1.5px solid #aaa;
    color: #888;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    transition: border-color .15s, color .15s;
}

    .help-icon:hover, .help-icon.active {
        border-color: #0d6efd;
        color: #0d6efd;
    }

/* Popover (click) */
.help-popover {
    position: absolute;
    left: 24px;
    top: -4px;
    z-index: 200;
    width: 240px;
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 10px 14px;
    box-shadow: 0 4px 16px rgba(0,0,0,.1);
}

.help-popover-title {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 4px;
}

.help-popover-body {
    font-size: 12px;
    color: #6c757d;
    line-height: 1.6;
}

/* Tooltip (hover) */
.help-tooltip {
    position: absolute;
    left: 24px;
    top: -4px;
    z-index: 200;
    width: 220px;
    background: #212529;
    border-radius: 6px;
    padding: 8px 12px;
}

.help-tooltip-title {
    font-size: 12px;
    font-weight: 500;
    color: #f8f9fa;
    margin-bottom: 2px;
}

.help-tooltip-body {
    font-size: 12px;
    color: #adb5bd;
    line-height: 1.5;
}

.help-popover {
    position: absolute;
    z-index: 200;
    width: 240px;
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 10px 14px;
    box-shadow: 0 4px 16px rgba(0,0,0,.1);
}

/* freccia sinistra — popover a destra */
.arrow-left::before {
    content: '';
    position: absolute;
    left: -6px;
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
    width: 10px;
    height: 10px;
    background: #fff;
    border-left: 1px solid #dee2e6;
    border-bottom: 1px solid #dee2e6;
}

/* freccia destra — popover a sinistra */
.arrow-right::before {
    content: '';
    position: absolute;
    right: -6px;
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
    width: 10px;
    height: 10px;
    background: #fff;
    border-right: 1px solid #dee2e6;
    border-top: 1px solid #dee2e6;
}
/* freccia in basso — popover SOPRA l'icona, freccia punta verso il basso */
.arrow-bottom::before {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 50%;
    margin-left: -5px;
    width: 10px;
    height: 10px;
    background: #fff;
    border-right: 1px solid #dee2e6;
    border-bottom: 1px solid #dee2e6;
    transform: rotate(45deg);
}

/* freccia in alto — popover SOTTO l'icona, freccia punta verso l'alto */
.arrow-top::before {
    content: '';
    position: absolute;
    top: -6px;
    left: 50%;
    margin-left: -5px;
    width: 10px;
    height: 10px;
    background: #fff;
    border-left: 1px solid #dee2e6;
    border-top: 1px solid #dee2e6;
    transform: rotate(45deg);
}


.e-pager .e-pagerdropdown {
    width: 100px !important;
}



/* ── Ambiente selector (topbar) ─────────────────────────── */
.admin-topbar form {
    display: flex;
    align-items: center;
}

.form-select {
    width: auto;
    min-width: 160px;
    height: 36px;
    font-size: 13px;
    padding-top: 0;
    padding-bottom: 0;
    /* ripristina esplicitamente la freccia Bootstrap — evita override accidentali */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%230a0a0a' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
    /* !important necessario: la regola .form-select generica più sopra imposta
       "padding: 8px 12px !important" su tutti e 4 i lati, che altrimenti vince comunque su questo
       padding-right (stessa specificità, !important prevale sempre sul non-important a prescindere
       dall'ordine) annullando lo spazio riservato alla freccia — la freccia finiva coperta dal testo. */
    padding-right: 2.25rem !important;
    appearance: none;
    -webkit-appearance: none;
}


.form-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--c-grey-700);
    letter-spacing: .8px;
    text-transform: uppercase;
    margin-bottom: var(--space-3);
    display: block;
}

/* Griglia widget dashboard (homepage PanelAdmin + anteprima di DashboardWidgetSettings.razor):
   12 colonne, righe generate solo in base al contenuto (grid-auto-rows) così l'altezza reale è
   quella occupata dai widget presenti, mai uno spazio fisso riservato a vuoto — ogni cella widget
   si posiziona con grid-column/grid-row inline (vedi WidgetGrid.razor). Nell'anteprima di
   DashboardWidgetSettings.razor grid-auto-rows è fissato a 60px (inline) invece del minmax fluido
   della homepage, e la griglia riceve in più delle .dashboard-widget-grid-guide-cell (celle vuote,
   una per colonna/riga) come sfondo leggero per capire la disposizione mentre si posizionano i widget. */
.dashboard-widget-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: minmax(150px, auto);
    gap: var(--space-4);
}

.dashboard-widget-cell {
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.dashboard-widget-cell .card {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.dashboard-widget-grid-guide-cell {
    border: 1px dashed var(--c-grey-200);
    border-radius: 4px;
}

/* Solo in DashboardWidgetSettings.razor (unico posto che usa .dashboard-widget-grid-guide-cell) le
   celle guida sono anche drop target del drag&drop: qui pointer-events resta attivo di proposito. */
.dashboard-widget-grid-guide-cell--hover {
    background: var(--c-fuxia-dim);
    border-color: var(--c-fuxia);
}

/* Modificatore usato solo dall'anteprima editabile (DashboardWidgetSettings.razor): la griglia widget
   "live" in homepage (WidgetGrid.razor) riusa .dashboard-widget-cell senza questo modificatore, quindi
   resta visivamente invariata — niente cursore/maniglia lì. */
.dashboard-widget-cell--editabile {
    position: relative;
    cursor: grab;
}

.dashboard-widget-cell--editabile.dashboard-widget-cell--dragging {
    opacity: 0.4;
}

/* Durante un trascinamento (sposta o ridimensiona) TUTTI i box widget diventano trasparenti al
   pointer/drag hit-testing, non solo quello trascinato: i box sono renderizzati DOPO le celle guida
   nel markup (quindi visivamente sopra di esse) e senza questa regola intercetterebbero loro stessi
   dragover/drop impedendo di rilasciare su una cella guida coperta da un widget — es. restringere un
   box (colonne/righe in diminuzione) richiede sempre di rilasciare su una cella ancora dentro i propri
   confini attuali, quindi senza pointer-events:none il ridimensionamento in riduzione non funzionava mai. */
.dashboard-widget-cell--drag-in-corso {
    pointer-events: none;
}

.dashboard-widget-resize-handle {
    position: absolute;
    right: 2px;
    bottom: 2px;
    width: 14px;
    height: 14px;
    cursor: nwse-resize;
    border-right: 2px solid var(--c-fuxia);
    border-bottom: 2px solid var(--c-fuxia);
    border-bottom-right-radius: 2px;
    opacity: 0;
    transition: opacity .15s;
}

.dashboard-widget-cell--editabile:hover .dashboard-widget-resize-handle {
    opacity: 1;
}

@media (max-width: 900px) {
    .dashboard-widget-grid {
        display: flex;
        flex-direction: column;
    }

    .dashboard-widget-cell {
        grid-column: unset !important;
        grid-row: unset !important;
    }

    .dashboard-widget-grid-guide-cell {
        display: none;
    }
}

/* ── Theme toggle (sole/luna, in basso a sinistra: riga fissa della sidebar,
   tra il blocco account e il copyright — mai sovrapposta a nient'altro) ── */
.theme-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    border-top: 1px solid rgba(255,255,255,.05);
    color: var(--c-grey-500);
    flex-shrink: 0;
}

.theme-toggle i {
    font-size: 12px;
    width: 14px;
    text-align: center;
}

.sidebar-collapsed .theme-toggle {
    gap: 0;
}

.sidebar-collapsed .theme-toggle .theme-toggle__track,
.sidebar-collapsed .theme-toggle i.fa-moon {
    display: none;
}

.theme-toggle .theme-toggle__track {
    position: relative;
    width: 36px;
    height: 20px;
    border-radius: var(--r-pill);
    background: var(--c-grey-200);
    border: none;
    cursor: pointer;
    padding: 0;
    transition: background var(--t-base);
}

.theme-toggle .theme-toggle__thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--c-white);
    box-shadow: var(--shadow-xs);
    transition: transform var(--t-base);
}

.theme-toggle .theme-toggle__track[aria-checked="true"] {
    background: var(--c-fuxia);
}

.theme-toggle .theme-toggle__track[aria-checked="true"] .theme-toggle__thumb {
    transform: translateX(16px);
}

/* ── Back to top ─────────────────────────────────────────────
   Colori fissi (non var(--c-*)): come .admin-sidebar, deve restare
   uguale in entrambi i temi, non invertirsi col tema scuro. */
.back-to-top-btn {
    position: fixed;
    left: 50%;
    bottom: var(--space-6);
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, .5);
    border-radius: 50%;
    background: rgba(255, 255, 255, .25);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #0a0a0a;
    font-size: 18px;
    box-shadow: var(--shadow-md);
    cursor: pointer;
    z-index: 900;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate(-50%, 12px);
    transition: opacity var(--t-base), transform var(--t-base), background var(--t-fast);
}

    .back-to-top-btn:hover {
        background: rgba(255, 255, 255, .45);
    }

    .back-to-top-btn.back-to-top-btn--visible {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translate(-50%, 0);
    }

@media (max-width: 768px) {
    .back-to-top-btn {
        width: 40px;
        height: 40px;
        font-size: 15px;
        bottom: var(--space-4);
    }
}

/* ── Report rapidi (popup SfDropDownButton in Lista iscritti) ── */
.report-rapidi-popup {
    min-width: 320px;
    max-width: min(480px, calc(100vw - 32px));
    padding: var(--space-1) 0;
    font-family: var(--font-sans);
    font-size: 13px;
}

.report-rapidi-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 2px var(--space-2);
}

.report-rapidi-nome {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 6px var(--space-2);
    border: 0;
    border-radius: var(--r-sm);
    background: transparent;
    color: var(--c-grey-700);
    text-align: left;
    cursor: pointer;
    transition: background var(--t-fast), color var(--t-fast);
}

    .report-rapidi-nome span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .report-rapidi-nome i {
        color: var(--c-grey-400);
        width: 14px;
        text-align: center;
    }

    .report-rapidi-nome:hover {
        background: var(--c-fuxia-dim);
        color: var(--c-fuxia);
    }

        .report-rapidi-nome:hover i {
            color: var(--c-fuxia);
        }

.report-rapidi-formati {
    display: flex;
    gap: var(--space-1);
    flex: 0 0 auto;
}

.report-formato-btn {
    min-width: 44px;
    padding: 3px var(--space-2);
    border: 1px solid var(--c-grey-200);
    border-radius: var(--r-sm);
    background: var(--c-white);
    color: var(--c-grey-500);
    font-family: var(--font-mono);
    font-size: 11px;
    cursor: pointer;
    transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast);
}

    .report-formato-btn:hover {
        border-color: var(--c-fuxia);
        color: var(--c-fuxia);
        background: var(--c-fuxia-dim);
    }

.report-rapidi-footer {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-1);
    padding: var(--space-2) var(--space-4);
    border-top: 1px solid var(--c-grey-100);
    color: var(--c-grey-500);
    text-decoration: none;
}

    .report-rapidi-footer:hover {
        color: var(--c-fuxia);
    }