/* /Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-a3n0pdphlp] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-a3n0pdphlp] {
    flex: 1;
    /* Un figlio flex nasce con `min-width: auto`, cioe' largo quanto il suo contenuto:
       una tabella piu' larga dello schermo allargava `main` — testata compresa — invece
       di scorrere dentro `.table-responsive`, e siccome html/body tagliano l'overflow
       (`overflow-x: clip`) la parte in piu' spariva e basta. Misurato il 04-09-2026 su
       tablet a 768 px: /org/members 796 px in 720 (colonna Azioni e pulsante Aggiungi
       fuori schermo), /org/cancellations 937, /admin/users 916, /org/availability 881,
       /org/shifts 825. Con `min-width: 0` la tabella torna a scorrere nel suo riquadro. */
    min-width: 0;
}

/* ── Sidebar: dark purple (ClickUp-inspired) ── */
.sidebar[b-a3n0pdphlp] {
    background-color: var(--sidebar-bg);
}

/* ── Top bar ── */
.top-row[b-a3n0pdphlp] {
    background-color: var(--header-bg);
    border-bottom: 1px solid var(--border-subtle);
    height: 48px;
    display: flex;
    align-items: center;
}

    .top-row[b-a3n0pdphlp]  a, .top-row[b-a3n0pdphlp]  .btn-link {
        white-space: nowrap;
        text-decoration: none;
    }

    .top-row[b-a3n0pdphlp]  a:hover, .top-row[b-a3n0pdphlp]  .btn-link:hover {
        text-decoration: underline;
    }

/* The mobile hamburger, backdrop and off-canvas drawer live in MobileNav.razor
   (an InteractiveServer island) — their styles are in MobileNav.razor.css. */

/* ── Mobile: no sidebar in page flow ── */
@media (max-width: 767.98px) {
    .sidebar[b-a3n0pdphlp] {
        display: none;
    }

    .top-row[b-a3n0pdphlp] {
        position: sticky;
        top: 0;
        /* Above sticky page content, below the drawer (1050) and toasts (1200). */
        z-index: 1020;
        height: auto;
        min-height: 48px;
        padding-top: env(safe-area-inset-top);
        gap: 8px;
    }

    .top-row[b-a3n0pdphlp], article[b-a3n0pdphlp] {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
}

/* App name in the header — only shown when the sidebar is off-canvas. */
.top-row-brand[b-a3n0pdphlp] {
    font-size: var(--fs-md);
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
}

/* ── Tablet: collapsed sidebar (icons only, ~48px) ── */
@media (min-width: 768px) and (max-width: 991.98px) {
    .page[b-a3n0pdphlp] {
        flex-direction: row;
    }

    .sidebar[b-a3n0pdphlp] {
        width: 48px;
        height: 100vh;
        position: sticky;
        top: 0;
        flex-shrink: 0;
        overflow: hidden;
        /* Flex column: header / scrollable nav / user footer. NavMenu's pieces are
           direct children, so the sizing rules live in NavMenu.razor.css. */
        display: flex;
        flex-direction: column;
    }

    .top-row[b-a3n0pdphlp] {
        position: sticky;
        top: 0;
        /* 1030 e non 1: la testata e' `sticky`, quindi crea un contesto di
           impilamento, e la scheda del profilo (`.user-card`, z-index 1100) vive
           **dentro** quel contesto — il suo 1100 conta solo fra i fratelli, non
           contro il resto della pagina. Con `z-index: 1` la testata pareggiava con
           gli eventi del calendario (`.cal-week-event`, anch'essi 1) e a parita' di
           z-index vince chi viene dopo nel DOM: il menu utente finiva **sotto** i
           turni. Sopra il contenuto, sotto il cassetto (1050), la barra delle schede
           (1035), i modali (1055) e i toast (1200). */
        z-index: 1030;
    }

    .top-row[b-a3n0pdphlp], article[b-a3n0pdphlp] {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }
}

/* ── Desktop: full sidebar ~240px ── */
@media (min-width: 992px) {
    .page[b-a3n0pdphlp] {
        flex-direction: row;
    }

    .sidebar[b-a3n0pdphlp] {
        width: 240px;
        height: 100vh;
        position: sticky;
        top: 0;
        flex-shrink: 0;
        /* Flex column: header / scrollable nav / user footer — the nav list scrolls
           internally (flex:1 in NavMenu.razor.css) and the footer stays on screen.
           The old fixed-height list overflowed 100vh and cut the footer off. */
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    .top-row[b-a3n0pdphlp] {
        position: sticky;
        top: 0;
        /* 1030 e non 1: la testata e' `sticky`, quindi crea un contesto di
           impilamento, e la scheda del profilo (`.user-card`, z-index 1100) vive
           **dentro** quel contesto — il suo 1100 conta solo fra i fratelli, non
           contro il resto della pagina. Con `z-index: 1` la testata pareggiava con
           gli eventi del calendario (`.cal-week-event`, anch'essi 1) e a parita' di
           z-index vince chi viene dopo nel DOM: il menu utente finiva **sotto** i
           turni. Sopra il contenuto, sotto il cassetto (1050), la barra delle schede
           (1035), i modali (1055) e i toast (1200). */
        z-index: 1030;
    }

    .top-row[b-a3n0pdphlp], article[b-a3n0pdphlp] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}

/* ── User profile dropdown ── */
[b-a3n0pdphlp] .user-dropdown > summary {
    list-style: none;
    cursor: pointer;
}

[b-a3n0pdphlp] .user-dropdown > summary::-webkit-details-marker {
    display: none;
}

[b-a3n0pdphlp] .user-dropdown > .user-card {
    display: none;
}

[b-a3n0pdphlp] .user-dropdown[open] > .user-card {
    display: block;
}

[b-a3n0pdphlp] .user-avatar-sm {
    color: var(--accent-primary, #7B68EE);
}

[b-a3n0pdphlp] .user-avatar-lg {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: var(--accent-primary, #7B68EE);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 600;
}

[b-a3n0pdphlp] .user-card {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 8px;
    width: 280px;
    background: #fff;
    border: 1px solid var(--border-subtle, #E8E8ED);
    border-radius: 8px;
    z-index: 1100;
    /* Con le due card la scheda puo superare lo schermo: il tetto tiene il piede
       raggiungibile invece di lasciarlo fuori senza modo di arrivarci. 96px = la
       testata piu il margine. */
    max-height: calc(100vh - 96px);
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* ── Le due card dentro la scheda utente: ruoli e qualifiche ── */
[b-a3n0pdphlp] .user-card-section {
    border-top: 1px solid var(--border-subtle, #E8E8ED);
}

[b-a3n0pdphlp] .user-card-section-title {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-muted, #6C6C7A);
    margin-bottom: .5rem;
}

[b-a3n0pdphlp] .user-card-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

[b-a3n0pdphlp] .user-card-list > li {
    display: flex;
    align-items: flex-start;
    gap: .4rem;
}

[b-a3n0pdphlp] .user-card-ico {
    color: var(--accent-primary, #7B68EE);
    line-height: 1.35;
    flex-shrink: 0;
}

/* L attributo del ruolo e lo stato della qualifica. 10px sarebbe sotto la soglia della
   guida di stile: 11px, e il testo va a capo invece di troncarsi — «dipendente da un
   turno» in 280px di scheda non ci sta su una riga, e troncato non direbbe niente. */
[b-a3n0pdphlp] .user-card-kind {
    font-size: 11px;
    font-weight: 500;
    padding: .12rem .4rem;
    white-space: normal;
    text-align: left;
}

[b-a3n0pdphlp] .user-card-kind.kind-plain {
    background: var(--accent-primary, #7B68EE);
    color: #fff;
}

/* Dipendente da un turno: un colore diverso, non un rosso — non e un guasto, e un modo
   diverso di avere il ruolo. */
[b-a3n0pdphlp] .user-card-kind.kind-shift {
    background: #FFF3CD;
    color: #6A4E00;
    border: 1px solid #F3E1A9;
}

[b-a3n0pdphlp] .user-card-kind.kind-ok {
    background: #F1F0FB;
    color: #4B3FA8;
}

[b-a3n0pdphlp] .user-card-kind.kind-bad {
    background: #FBE9E9;
    color: #A32B2B;
    border: 1px solid #F2C9C9;
}

[b-a3n0pdphlp] .user-card-header {
    border-bottom: 1px solid var(--border-subtle, #E8E8ED);
}

@media (max-width: 767.98px) {
    [b-a3n0pdphlp] .user-card {
        width: min(280px, calc(100vw - 24px));
    }

    /* Larger tap target for the avatar/summary. */
    [b-a3n0pdphlp] .user-dropdown > summary {
        min-width: 40px;
        min-height: 40px;
        justify-content: flex-end;
    }
}

/* ── Error UI ── */
#blazor-error-ui[b-a3n0pdphlp] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-a3n0pdphlp] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/MobileNav.razor.rz.scp.css */
/* Scoped to MobileNav: these rules must live next to the markup they style.
   Blazor scoped CSS stamps the b-* attribute onto the owning component's elements,
   so keeping them in MainLayout.razor.css would silently apply to nothing. */

/* ── Hamburger toggle (mobile only) ── */
.hamburger-btn[b-igf3o3w4zk] {
    text-decoration: none !important;
}

@media (max-width: 767.98px) {
    .hamburger-btn[b-igf3o3w4zk] {
        min-width: 40px;
        min-height: 40px;
    }
}

/* ── Backdrop ── */
.sidebar-overlay[b-igf3o3w4zk] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 1040;
}

/* ── Drawer ── */
.sidebar-offcanvas[b-igf3o3w4zk] {
    position: fixed;
    top: 0;
    left: 0;
    width: min(280px, 82vw);
    height: 100dvh;
    background-color: var(--sidebar-bg);
    z-index: 1050;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overscroll-behavior: contain;
    box-shadow: 4px 0 12px rgba(0, 0, 0, 0.3);
    animation: offcanvas-slide-in-b-igf3o3w4zk 0.18s ease-out;
}

@keyframes offcanvas-slide-in-b-igf3o3w4zk {
    from {
        transform: translateX(-100%);
    }

    to {
        transform: translateX(0);
    }
}
/* /Components/Layout/NavMenu.razor.rz.scp.css */
/* ── Sidebar header ── */
.sidebar-header[b-z3xg5ay76c] {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* Off-canvas variant: clears the notch and makes room for the close button. */
.sidebar-header.is-offcanvas[b-z3xg5ay76c] {
    position: relative;
    padding-top: calc(0.75rem + env(safe-area-inset-top)) !important;
    padding-right: 3rem !important;
}

.offcanvas-close[b-z3xg5ay76c] {
    position: absolute;
    top: calc(0.5rem + env(safe-area-inset-top));
    right: 0.5rem;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    appearance: none;
    background: transparent;
    border: none;
    border-radius: 50%;
    color: var(--sidebar-text);
    font-size: var(--fs-lg);
    cursor: pointer;
}

    .offcanvas-close:hover[b-z3xg5ay76c],
    .offcanvas-close:focus[b-z3xg5ay76c] {
        background: var(--sidebar-hover);
        color: #fff;
        outline: none;
    }

.app-brand[b-z3xg5ay76c] {
    font-size: var(--fs-lg);
    letter-spacing: 0.02em;
    font-weight: 600;
}

/* Il marchio ha due forme: intero, e due lettere per la striscia da 48 px. */
.app-brand-short[b-z3xg5ay76c] {
    display: none;
}

/* `display: block` qui e non con `d-block` nel markup: la classe di Bootstrap e'
   `!important` e vinceva sul `display: none` del breakpoint tablet — il nome
   dell'associazione restava dentro i 48 px, a capo lettera per lettera (02-09-2026). */
.sidebar-org-name[b-z3xg5ay76c] {
    display: block;
}

/* ── Hamburger toggle (mobile only) ── */
.navbar-toggler[b-z3xg5ay76c] {
    display: none;
    appearance: none;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0.5rem;
    position: absolute;
    top: 0.5rem;
    right: 0.75rem;
    z-index: 10;
}

/* ── Navigation items ── */
.nav-item[b-z3xg5ay76c] {
    font-size: var(--fs-body);
    padding-bottom: 2px;
}

    .nav-item[b-z3xg5ay76c]  .nav-link {
        color: var(--sidebar-text);
        background: none;
        border: none;
        border-radius: 6px;
        /* min-height e non height: una voce lunga va a capo (vedi `.nav-label`). */
        min-height: 36px;
        display: flex;
        align-items: center;
        gap: 8px;
        width: 100%;
        white-space: nowrap;
        overflow: hidden;
        padding: 0 0.75rem;
        font-weight: 400;
        transition: background-color 0.15s, color 0.15s;
    }

    .nav-item[b-z3xg5ay76c]  .nav-link .bi {
        flex-shrink: 0;
        font-size: 16px;
        width: 1.25rem;
        text-align: center;
    }

    .nav-item[b-z3xg5ay76c]  a.active {
        background-color: var(--sidebar-active);
        color: #fff;
    }

    .nav-item[b-z3xg5ay76c]  .nav-link:hover {
        background-color: var(--sidebar-hover);
        color: #fff;
    }

/* ── Section dividers ── */
.nav-divider[b-z3xg5ay76c] {
    border-color: rgba(255, 255, 255, 0.08);
    opacity: 1;
}

/* ── Section headers (Gestione, Configurazione, ...) ──
   Solid muted colour, never opacity: a translucent row reads as "disabled"
   and made the tail of the menu look washed out. */
.nav-section-header[b-z3xg5ay76c] {
    color: var(--sidebar-section);
    font-size: var(--fs-meta);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 6px;
    margin-bottom: 4px;
    user-select: none;
}

/* ── Collapsible section toggle (Configurazioni associazione / globali) ── */
.nav-section-toggle[b-z3xg5ay76c] {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    background: transparent;
    border: none;
    padding-top: 6px;
    padding-bottom: 4px;
    color: var(--sidebar-section);
    font-size: var(--fs-meta);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-align: left;
    user-select: none;
    cursor: pointer;
    transition: color 0.15s;
}

    .nav-section-toggle:hover[b-z3xg5ay76c] {
        color: var(--sidebar-text);
    }

    .nav-section-toggle:focus[b-z3xg5ay76c] {
        outline: none;
        color: var(--sidebar-text);
    }

.nav-section-chevron[b-z3xg5ay76c] {
    font-size: var(--fs-micro);
    width: 10px;
    text-align: center;
    flex-shrink: 0;
}

.nav-section-body.is-collapsed[b-z3xg5ay76c] {
    display: none;
}

/* ── User footer — sibling of .nav-scrollable, pinned at the column's bottom ── */
.sidebar-user-footer[b-z3xg5ay76c] {
    flex-shrink: 0;
    margin-top: auto;
}

.sidebar-user-name[b-z3xg5ay76c] {
    color: var(--sidebar-text);
    font-size: var(--fs-small);
}

.avatar-sm[b-z3xg5ay76c] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: var(--sidebar-active);
    color: #fff;
    font-size: var(--fs-meta);
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* ── Mobile: the in-flow sidebar is hidden by MainLayout; this component is
      rendered inside the off-canvas drawer, where `.show` is always set. ── */
@media (max-width: 767.98px) {
    .navbar-toggler[b-z3xg5ay76c] {
        display: block;
    }

    /* In the drawer (.sidebar-offcanvas, a flex column) the list takes the free
       space and scrolls by itself; the footer below it stays visible. */
    .nav-scrollable[b-z3xg5ay76c] {
        display: none;
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding-bottom: env(safe-area-inset-bottom);
    }

    .nav-scrollable.show[b-z3xg5ay76c] {
        display: block;
    }

    /* Comfortable touch targets in the drawer. */
    .nav-item[b-z3xg5ay76c]  .nav-link {
        min-height: 44px;
    }

    /* The footer sits at the drawer's bottom edge: clear the home-indicator area. */
    .sidebar-user-footer[b-z3xg5ay76c] {
        padding-bottom: calc(0.5rem + env(safe-area-inset-bottom)) !important;
    }

    .nav-section-toggle[b-z3xg5ay76c] {
        min-height: 40px;
    }
}

/* ── Tablet: collapsed to icons only ── */
@media (min-width: 768px) and (max-width: 991.98px) {
    .navbar-toggler[b-z3xg5ay76c] {
        display: none;
    }

    /* .sidebar is a 100vh flex column (MainLayout.razor.css): the list takes the
       space between header and footer and scrolls internally. A fixed calc()
       height overflowed the viewport and cut the user footer off-screen. */
    .nav-scrollable[b-z3xg5ay76c] {
        display: block;
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
    }

    .sidebar-header .sidebar-org-name[b-z3xg5ay76c],
    .nav-label[b-z3xg5ay76c],
    .nav-section-header[b-z3xg5ay76c],
    .nav-section-toggle[b-z3xg5ay76c],
    .sidebar-user-footer .nav-label[b-z3xg5ay76c],
    .app-brand-full[b-z3xg5ay76c] {
        display: none;
    }

    /* Due lettere centrate al posto del nome intero, che a 48 px andava a capo
       lettera per lettera. */
    .app-brand-short[b-z3xg5ay76c] {
        display: inline;
    }

    .sidebar-header[b-z3xg5ay76c] {
        padding-left: 0 !important;
        padding-right: 0 !important;
        text-align: center;
    }

    /* Force-show collapsed sections in tablet view (toggle is hidden, items must remain reachable). */
    .nav-section-body.is-collapsed[b-z3xg5ay76c] {
        display: block;
    }

    .nav-item[b-z3xg5ay76c] {
        padding-left: 0.375rem !important;
        padding-right: 0.375rem !important;
    }

    .nav-item[b-z3xg5ay76c]  .nav-link {
        justify-content: center;
        padding: 0;
    }

    .nav-item[b-z3xg5ay76c]  .nav-link .bi {
        margin: 0;
        font-size: 18px;
    }

    /* Il numero di una coda diventa un pallino sull'icona (08-10-2026, segnalato dall'utente:
       «sul menù di sinistra i segni rossi delle notifiche vengono tagliati»). In fila con
       l'icona non ci stava: la voce è larga 23 px — la striscia è 48, meno il rientro e la
       barra di scorrimento — e il numero spingeva l'icona fuori a sinistra e usciva tagliato a
       destra (misurato). Il numero si legge nel `title` e nel menu intero; qui conta dire che
       c'è qualcosa, come prometteva il commento accanto a `.nav-badge`. */
    .nav-item[b-z3xg5ay76c]  .nav-link {
        position: relative;
    }

    /* `.nav-item` davanti: la regola generale di `.nav-badge` sta più in basso nel file, e a
       pari specificità vincerebbe lei (rimettendo numero e padding). */
    .nav-item[b-z3xg5ay76c]  .nav-badge {
        position: absolute;
        top: 5px;
        right: 1px;
        box-sizing: border-box;
        width: 12px;
        height: 12px;
        min-width: 0;
        padding: 0;
        margin: 0;
        font-size: 0;
        line-height: 0;
        border: 2px solid var(--sidebar-bg);
    }

    /* La barra di scorrimento si mangiava 12 dei 48 px: la lista scorre lo stesso (rotella,
       dito), senza la barra disegnata. */
    .nav-scrollable[b-z3xg5ay76c] {
        scrollbar-width: none;
    }

    .nav-scrollable[b-z3xg5ay76c]::-webkit-scrollbar {
        display: none;
    }

    .sidebar-user-footer .d-flex[b-z3xg5ay76c] {
        justify-content: center;
    }
}

/* ── Desktop: full sidebar ── */
@media (min-width: 992px) {
    .navbar-toggler[b-z3xg5ay76c] {
        display: none;
    }

    .nav-scrollable[b-z3xg5ay76c] {
        display: block;
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
    }
}

/* Il numero accanto a una voce con una coda (soci in attesa, attestati da
   verificare, sostituzioni). Sta in fondo alla riga, non attaccato al testo:
   la voce piu' lunga e' "Assegnazione ruoli a volontari" e un badge inline la
   spingerebbe fuori. Sotto i 992 px la sidebar mostra solo le icone e il badge
   si stringe a un pallino: il numero non ci starebbe, ma "c'e' qualcosa" si'. */
[b-z3xg5ay76c] .nav-badge {
    margin-left: auto;
    font-size: .7rem;
    padding: .2em .5em;
    flex: 0 0 auto;
}

/* Una voce lunga va a capo, e il numero della coda resta intero in fondo alla riga
   (08-10-2026, segnalato dall'utente: «i segni rossi delle notifiche vengono tagliati»).
   «Richieste di disponibilità» più il suo numero non stanno nei 240 px, e il link —
   `nowrap` e `overflow: hidden` — tagliava il numero. Con i puntini si sarebbe tagliato il
   nome; così non si taglia niente: la riga si alza di quel che serve, solo dove serve. */
.nav-label[b-z3xg5ay76c] {
    min-width: 0;
    white-space: normal;
    line-height: 1.2;
}

/* ── Voci rientrate sotto l'intestazione (27-09-2026, richiesta dell'utente) ──
   Le righe fra i gruppi sono sparite: a dire dove comincia una sezione bastano
   l'intestazione e il rientro. Il rientro vale dove le etichette si leggono — telefono e
   desktop — e non nella striscia di sole icone fra 768 e 991 px, dove una colonna di 48 px
   rientrata di mezzo centimetro sarebbe solo storta. `!important` perché `px-3` di
   Bootstrap lo è. */
@media (max-width: 767.98px), (min-width: 992px) {
    .nav-section-body > .nav-item[b-z3xg5ay76c] {
        padding-left: 1.75rem !important;
    }
}

/* Fra una sezione e l'altra un po' d'aria al posto della riga. */
.nav-section-toggle + .nav-section-body[b-z3xg5ay76c] {
    margin-bottom: 4px;
}
/* /Components/Layout/NotificationPanel.razor.rz.scp.css */
/* Il pannello della campanella (04-10-2026). Livelli: velo 1056, pannello 1057 — vedi il
   commento in cima a NotificationPanel.razor e l'elenco in MainLayout.razor.css. */

.np-veil[b-a1pzl9fmo1] {
    position: fixed;
    inset: 0;
    z-index: 1056;
    background: transparent;
}

.np-panel[b-a1pzl9fmo1] {
    position: fixed;
    /* Sotto la testata (~48 px), allineato al bordo destro dove sta la campanella. */
    top: 56px;
    right: 16px;
    z-index: 1057;
    width: 380px;
    max-width: calc(100vw - 32px);
    max-height: min(70vh, 560px);
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    outline: none;
}

.np-head[b-a1pzl9fmo1] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-subtle);
}

.np-title[b-a1pzl9fmo1] {
    flex: 1 1 auto;
    margin: 0;
    font-size: var(--fs-lg);
    font-weight: 600;
    color: var(--text-primary);
}

.np-all[b-a1pzl9fmo1] {
    font-size: var(--fs-small);
    text-decoration: none;
    padding: 0 4px;
}

.np-x[b-a1pzl9fmo1] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* La lista scorre, testata e piede restano: flex column con min-height 0. */
.np-list[b-a1pzl9fmo1] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.np-item[b-a1pzl9fmo1] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
    padding: 10px 12px;
    border: 0;
    border-bottom: 1px solid var(--border-subtle);
    background: transparent;
    text-align: left;
    color: var(--text-primary);
    font-size: var(--fs-body);
    line-height: 1.3;
}

.np-item:hover[b-a1pzl9fmo1] {
    background: var(--row-hover);
}

.np-item:focus-visible[b-a1pzl9fmo1] {
    outline: 2px solid var(--accent-primary);
    outline-offset: -2px;
}

.np-item-title[b-a1pzl9fmo1] {
    font-weight: 500;
}

/* Due righe di testo: il resto si legge nel pop-up. */
.np-item-text[b-a1pzl9fmo1] {
    color: var(--text-secondary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.np-item-meta[b-a1pzl9fmo1] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--fs-meta);
    color: var(--text-light);
}

.np-empty[b-a1pzl9fmo1] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 24px 12px;
    color: var(--text-light);
    font-size: var(--fs-body);
}

.np-foot[b-a1pzl9fmo1] {
    padding: 8px 12px;
    border-top: 1px solid var(--border-subtle);
}

.np-chat[b-a1pzl9fmo1] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    font-size: var(--fs-body);
    text-decoration: none;
}

/* Telefono: foglio dal basso, sopra la barra delle schede, con il fondo sicuro di iOS. */
@media (max-width: 767.98px) {
    .np-veil[b-a1pzl9fmo1] {
        background: rgba(0, 0, 0, 0.35);
    }

    .np-panel[b-a1pzl9fmo1] {
        top: auto;
        right: 0;
        left: 0;
        bottom: 0;
        width: 100%;
        max-width: none;
        max-height: 80dvh;
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
        padding-bottom: env(safe-area-inset-bottom);
        animation: np-sheet-up-b-a1pzl9fmo1 0.22s ease-out;
    }

    .np-item[b-a1pzl9fmo1] {
        min-height: 44px;
    }

    .np-x[b-a1pzl9fmo1],
    .np-all[b-a1pzl9fmo1] {
        min-height: 44px;
    }

    .np-x[b-a1pzl9fmo1] {
        min-width: 44px;
    }

    .np-chat[b-a1pzl9fmo1] {
        min-height: 44px;
    }
}

@keyframes np-sheet-up-b-a1pzl9fmo1 {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-q8fdiglwt2],
.components-reconnect-repeated-attempt-visible[b-q8fdiglwt2],
.components-reconnect-failed-visible[b-q8fdiglwt2],
.components-pause-visible[b-q8fdiglwt2],
.components-resume-failed-visible[b-q8fdiglwt2],
.components-rejoining-animation[b-q8fdiglwt2] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-q8fdiglwt2],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-q8fdiglwt2],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-q8fdiglwt2],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-q8fdiglwt2],
#components-reconnect-modal.components-reconnect-retrying[b-q8fdiglwt2],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-q8fdiglwt2],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-q8fdiglwt2],
#components-reconnect-modal.components-reconnect-failed[b-q8fdiglwt2],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-q8fdiglwt2] {
    display: block;
}


#components-reconnect-modal[b-q8fdiglwt2] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-q8fdiglwt2 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-q8fdiglwt2 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-q8fdiglwt2 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-q8fdiglwt2]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-q8fdiglwt2 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-q8fdiglwt2 {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-q8fdiglwt2 {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-q8fdiglwt2 {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-q8fdiglwt2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-q8fdiglwt2] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-q8fdiglwt2] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-q8fdiglwt2] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-q8fdiglwt2] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-q8fdiglwt2] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-q8fdiglwt2] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-q8fdiglwt2 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-q8fdiglwt2] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-q8fdiglwt2 {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Pages/Account/Login.razor.rz.scp.css */
/* Il riquadro di accesso. Centrato in verticale quando c'e' spazio, in alto quando non
   ce n'e': su un telefono con la tastiera aperta un centraggio rigido spinge il campo
   fuori campo, ed e' il momento peggiore per farlo. */

.login-wrap[b-8tal7ut5yb] {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: min(70vh, 640px);
    padding-top: 2rem;
}

@media (min-height: 720px) {
    .login-wrap[b-8tal7ut5yb] {
        align-items: center;
        padding-top: 0;
    }
}

.login-card[b-8tal7ut5yb] {
    width: 100%;
    max-width: 25rem;
    background: #fff;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: 0 10px 34px rgba(45, 43, 85, .10);
    padding: 1.75rem;
}

.login-brand[b-8tal7ut5yb] {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: 1.5rem;
}

.login-mark[b-8tal7ut5yb] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 12px;
    color: #fff;
    font-size: 1.3rem;
    /* Colore pieno (04-10-2026): niente gradienti, come nel resto dell'applicazione. */
    background: var(--accent-primary);
}

.login-name[b-8tal7ut5yb] {
    font-size: var(--fs-page);
    font-weight: 800;
    letter-spacing: -.01em;
    line-height: 1.1;
}

.login-sub[b-8tal7ut5yb] {
    font-size: var(--fs-meta);
    color: var(--text-secondary);
}

/* 48 px: sopra i 44 della guida. Su questo pulsante si preme col pollice, spesso al
   primo tentativo di usare l'applicazione. */
.login-submit[b-8tal7ut5yb] {
    min-height: 48px;
    border-radius: 999px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
}

.login-foot[b-8tal7ut5yb] {
    text-align: center;
    margin-top: 1.25rem;
    font-size: var(--fs-small);
    color: var(--text-secondary);
}
/* /Components/Pages/Account/Profile.razor.rz.scp.css */
/* La scheda della persona: un riquadro solo, perche' raggruppa davvero. */
.profile-sheet[b-741eq7jlvs] {
    max-width: 720px;
    padding: 16px 20px;
    background: #fff;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
}

/* Nome e cognome affiancati nel pop-up; sul telefono una colonna sola. */
.profile-grid[b-741eq7jlvs] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 12px;
}

@media (max-width: 767.98px) {
    .profile-sheet[b-741eq7jlvs] {
        padding: 12px 14px;
    }

    .profile-grid[b-741eq7jlvs] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Home.razor.rz.scp.css */
/* La pagina di ingresso per chi non ha ancora fatto accesso.

   L'intestazione e' un **riquadro arrotondato**, non una fascia a tutta larghezza. Ci
   sarebbe stata, ma il padding di `article.content` non e' simmetrico (28 px a sinistra e
   21 a destra, misurati) e nessuno dei modi di uscirne — margini negativi, 100vw,
   `calc(50% - 50vw)` — torna a filo da tutte e due le parti: resta sempre una fessura
   grigia di qualche pixel da un lato, che e' peggio di un bordo voluto. */

.landing[b-3jy637a23x] {
    /* `.content` ha un padding-top di 1,1rem: senza annullarlo il riquadro comincia
       staccato dal bordo alto, e la pagina sembra scesa. */
    margin-top: -.4rem;
}

.landing-hero[b-3jy637a23x] {
    /* Colore pieno, non sfumato (04-10-2026): la guida di stile dice niente gradienti, e il
       viola scuro e' quello della barra laterale che si trova dopo aver fatto accesso. */
    background: var(--sidebar-bg);
    color: #fff;
    text-align: center;
    padding: 3.25rem 1.5rem 3.5rem;
    border-radius: var(--radius-lg);
}

.landing-eyebrow[b-3jy637a23x] {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    /* Non 11px: e' la prima riga di testo dell'applicazione, e la scala parte da 12. */
    font-size: var(--fs-meta);
    letter-spacing: .06em;
    text-transform: uppercase;
    font-weight: 600;
    color: #E4E0FF;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 999px;
    padding: .3rem .85rem;
}

.landing-title[b-3jy637a23x] {
    /* Esplicito: app.css da' ai titoli h1-h6 il colore del testo di pagina, e su fondo
       viola "TimeMgr" usciva quasi nero — il nome dell'applicazione, illeggibile, nella
       prima schermata che si vede. Il `color` del contenitore non basta a rimediare: la
       regola sui titoli e' piu' specifica e vince sull'ereditarieta'. */
    color: #fff;
    font-size: clamp(2.4rem, 7vw, 3.6rem);
    font-weight: 800;
    letter-spacing: -.02em;
    margin: 1rem 0 .35rem;
}

.landing-lead[b-3jy637a23x] {
    font-size: var(--fs-title);
    line-height: 1.55;
    color: #DCD7FF;
    max-width: 34rem;
    margin: 0 auto;
}

.landing-actions[b-3jy637a23x] {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    justify-content: center;
    margin-top: 1.75rem;
}

/* Il pulsante e' un bersaglio, e su un telefono e' il primo di tutti: 48 px di altezza
   sono sopra i 44 della guida, non per eleganza ma perche' qui si sbaglia a premere. */
.landing-cta[b-3jy637a23x] {
    border-radius: 999px;
    padding: .7rem 1.6rem;
    min-height: 48px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}

/* 220px e non 250: la differenza e' che a 1100 px le tessere stanno su **una** riga da
   quattro invece di tre piu' una spaiata, e quattro cose che si leggono insieme sono un
   elenco mentre tre piu' una e' un incidente. */
.landing-grid[b-3jy637a23x] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    max-width: 72rem;
    margin: -1.75rem auto 0;
    padding: 0 .75rem;
}

.landing-card[b-3jy637a23x] {
    background: #fff;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: 0 6px 24px rgba(45, 43, 85, .10);
    padding: 1.25rem;
}

.landing-ico[b-3jy637a23x] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    font-size: 1.15rem;
    /* Il colore lo passa la tessera con --ico: una tinta per tema, cosi' le quattro
       tessere si distinguono a colpo d'occhio senza quattro classi. */
    color: var(--ico, var(--accent-primary));
    background: color-mix(in srgb, var(--ico, var(--accent-primary)) 12%, transparent);
}

.landing-card h2[b-3jy637a23x] {
    font-size: var(--fs-lg);
    font-weight: 700;
    margin: .8rem 0 .4rem;
}

.landing-card p[b-3jy637a23x] {
    font-size: var(--fs-body);
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}

.landing-foot[b-3jy637a23x] {
    text-align: center;
    color: var(--text-secondary);
    font-size: var(--fs-small);
    margin: 2rem .75rem 3rem;
}

@media (max-width: 767.98px) {
    .landing-hero[b-3jy637a23x] {
        padding: 2.5rem 1.25rem 3rem;
    }

    .landing-grid[b-3jy637a23x] {
        padding: 0;
    }

    .landing-actions .landing-cta[b-3jy637a23x] {
        width: 100%;
        justify-content: center;
    }
}
/* /Components/Pages/Organization/Absences.razor.rz.scp.css */
/* Assenze (04-10-2026, modello «lista → pop-up»): i titoli delle sezioni della pagina e
   le righe spente. Le classi condivise (.tm-bar, .tm-table, .tm-zoom-*) stanno in app.css. */

.abs-head[b-uevp95kt0j] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin: 4px 0 8px;
}

.abs-head-gap[b-uevp95kt0j] {
    margin-top: 24px;
}

.abs-title[b-uevp95kt0j] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: var(--fs-md);
    font-weight: 600;
    color: var(--text-primary);
}

.abs-switch[b-uevp95kt0j] {
    margin-left: auto !important;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: var(--fs-small);
    color: var(--text-secondary);
}

/* Finite e ritirate: storia, non da leggere per prime. */
.abs-faded > td[b-uevp95kt0j] {
    color: var(--text-light) !important;
}

.abs-you[b-uevp95kt0j] {
    margin-left: 6px;
    font-size: var(--fs-meta);
    font-weight: 400;
    color: var(--text-light);
}

/* L'elenco delle assenze dai turni lo disegna ShiftAbsenceList: qui solo la cornice. */
.abs-shift-list[b-uevp95kt0j] {
    background: #fff;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.abs-pointer[b-uevp95kt0j] {
    margin: 20px 0 0;
    font-size: var(--fs-small);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 6px;
}

.abs-dates[b-uevp95kt0j] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 12px;
}

@media (max-width: 767.98px) {
    .abs-switch[b-uevp95kt0j] {
        margin-left: 0 !important;
    }

    .abs-shift-list[b-uevp95kt0j] {
        background: transparent;
        border: 0;
    }
}

/* La tabella dei periodi (10-10-2026): il motivo su una riga sola, tagliato con i puntini
   — il testo intero è nel title e nel pop-up. Senza, tre righe di motivo facevano righe da
   70 px in una tabella che dev'essere compatta. */
.abs-table .abs-reason[b-uevp95kt0j] {
    max-width: 280px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 767.98px) {
    .abs-table .abs-reason[b-uevp95kt0j] {
        max-width: none;
        white-space: normal;
    }
}
/* /Components/Pages/Organization/AutoAssign.razor.rz.scp.css */
/* Pianificazione (04-10-2026, modello «lista → pop-up»): l'intervallo nella barra, la riga
   dei tre numeri del piano, la tabella dei posti e la lista di disponibilità nel pop-up. */

.aa-range[b-60ll16cm07] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.aa-range-field[b-60ll16cm07] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: var(--fs-small);
    color: var(--text-secondary);
}

.aa-range-field > input[b-60ll16cm07] {
    width: auto;
    height: var(--tm-btn-h);
}

.aa-summary[b-60ll16cm07] {
    display: flex;
    align-items: center;
    gap: 8px 18px;
    flex-wrap: wrap;
    margin: 0 0 10px;
    color: var(--text-secondary);
    font-size: var(--fs-small);
}

.aa-proposal[b-60ll16cm07] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-weight: 600;
    color: var(--text-primary);
}

.aa-stat[b-60ll16cm07] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.aa-stat > strong[b-60ll16cm07] {
    font-size: var(--fs-md);
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

.aa-filter[b-60ll16cm07] {
    width: auto;
    height: var(--tm-btn-h);
}

.aa-when[b-60ll16cm07] {
    display: block;
}

.aa-type[b-60ll16cm07] {
    display: block;
    font-size: var(--fs-meta);
    font-weight: 400;
    color: var(--text-secondary);
}

.aa-ok[b-60ll16cm07] { color: var(--accent-success); }
.aa-warn[b-60ll16cm07] { color: #C98F00; }
.aa-bad[b-60ll16cm07] { color: var(--accent-danger); }

.aa-log[b-60ll16cm07] {
    margin-top: 8px;
}

.aa-loglist[b-60ll16cm07] {
    margin: 0;
    padding-left: 18px;
    font-size: var(--fs-small);
    color: var(--text-secondary);
}

.aa-manual[b-60ll16cm07] {
    max-width: 560px;
    margin: 8px auto 0;
    font-size: var(--fs-small);
}

/* Il pop-up del posto. */
.aa-who[b-60ll16cm07] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.aa-rank-title[b-60ll16cm07] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 18px 0 8px;
    font-size: var(--fs-md);
    font-weight: 600;
    color: var(--text-primary);
}

.aa-rank-count[b-60ll16cm07] {
    font-size: var(--fs-meta);
    font-weight: 500;
    color: var(--text-light);
}

.aa-rank[b-60ll16cm07] {
    font-size: var(--fs-small);
}

.aa-rank > thead > tr > th[b-60ll16cm07] {
    /* Nel pop-up la testata dell'applicazione non c'e': l'intestazione sta in cima. */
    top: 0;
    font-size: var(--fs-meta);
    color: var(--text-light);
    font-weight: 500;
}

.aa-rank > tbody > tr > td[b-60ll16cm07] {
    height: 36px;
    padding: 2px 8px;
}

.aa-badges[b-60ll16cm07] {
    display: inline-flex;
    gap: 4px;
    flex-wrap: wrap;
}

@media (max-width: 767.98px) {
    .aa-range[b-60ll16cm07] {
        flex: 1 1 100%;
        order: 3;
    }

    .aa-range-field[b-60ll16cm07] {
        flex: 1 1 0;
        min-width: 0;
    }

    .aa-range-field > input[b-60ll16cm07] {
        flex: 1 1 auto;
        min-width: 0;
        height: 44px;
    }

    .aa-filter[b-60ll16cm07],
    .aa-search[b-60ll16cm07] {
        flex: 1 1 100%;
    }

    .aa-filter[b-60ll16cm07] {
        height: 44px;
    }
}

/* La lista di disponibilita' nel pop-up scorre di lato invece di schiacciarsi: sono otto
   colonne di numeri, e sul telefono una scheda per riga ne farebbe una pagina intera. Lo
   scorrimento e' del contenitore dentro il pop-up, non della pagina. */
.aa-rank-wrap[b-60ll16cm07] {
    overflow-x: auto;
}

.aa-rank-wrap > .aa-rank[b-60ll16cm07] {
    min-width: 560px;
}
/* /Components/Pages/Organization/Availability.razor.rz.scp.css */
/* Disponibilità (04-10-2026, modello «lista → pop-up»): la riga sopra la tabella (di chi,
   la «i» della ricerca) e i campi del pop-up. Le classi condivise stanno in app.css. */

.av-head[b-wvfoa5thjr] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin: 0 0 8px;
}

.av-title[b-wvfoa5thjr] {
    margin: 0;
    font-size: var(--fs-md);
    font-weight: 600;
    color: var(--text-primary);
}

.av-scope[b-wvfoa5thjr] {
    display: inline-grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 6px;
}

.av-count[b-wvfoa5thjr] {
    margin-left: 4px;
    font-variant-numeric: tabular-nums;
    opacity: 0.75;
}

.av-score[b-wvfoa5thjr] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.av-score > .bi[b-wvfoa5thjr] {
    font-size: var(--fs-meta);
    color: var(--accent-warning);
}

.av-kind[b-wvfoa5thjr] {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
}

.av-grid[b-wvfoa5thjr] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 12px;
}

.av-grid.av-grid-2[b-wvfoa5thjr] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.av-prefs > tbody > tr > td[b-wvfoa5thjr] {
    height: 44px;
}

@media (max-width: 767.98px) {
    /* Sul telefono i due pulsanti «di chi» sono uguali per costruzione (griglia 1fr, non
       flex: regola 92) e prendono la riga intera. */
    .av-scope[b-wvfoa5thjr] {
        display: grid;
        flex: 1 1 100%;
    }

    .av-grid[b-wvfoa5thjr],
    .av-grid.av-grid-2[b-wvfoa5thjr] {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .av-grid > .tm-field:first-child:nth-last-child(3)[b-wvfoa5thjr] {
        grid-column: 1 / -1;
    }
}
/* /Components/Pages/Organization/Calendar.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════════
   Calendario — quello che il pacchetto G (04-10-2026) aggiunge sopra
   le regole `cal-*` di app.css. Qui e non in app.css perché è di questa
   pagina sola; i selettori isolati pesano un attributo in più, quindi
   battono le regole generali senza `!important`.
   ══════════════════════════════════════════════════════════════ */

/* ── La barra: dove sono · quanto largo · che cosa tengo ─────────────────
   A sinistra la navigazione con il titolo del periodo, poi la vista, e i
   filtri spinti contro il bordo destro (richiesta dell'utente: «la data e
   il tipo sono messi nel modo sbagliato»). */
.cal-toolbar[b-izhx1cvqt9] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 12px;
    margin-bottom: 14px;
}

.cal-toolbar .cal-nav[b-izhx1cvqt9] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
}

.cal-toolbar .cal-nav .cal-title[b-izhx1cvqt9] {
    flex: 0 1 auto;
    order: 0;
    min-width: 190px;
    margin: 0 0 0 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cal-filters[b-izhx1cvqt9] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-left: auto;
}

/* ── Le tendine (tipi di turno, mostra, nuova) — stile ClickUp: pannello
   bianco con ombra, righe compatte, pallino del colore. ─────────────── */
.cal-dd[b-izhx1cvqt9],
.cal-newmenu[b-izhx1cvqt9] {
    position: relative;
}

.cal-dd-toggle[b-izhx1cvqt9] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #fff;
}

.cal-dd-toggle.is-open[b-izhx1cvqt9] {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}

.cal-dd-caret[b-izhx1cvqt9] {
    font-size: var(--fs-micro);
    opacity: .7;
}

.cal-dd-count[b-izhx1cvqt9] {
    display: inline-block;
    padding: 0 6px;
    border-radius: 999px;
    background: #EFEDFF;
    color: #5B4BD4;
    font-size: var(--fs-micro);
    font-weight: 600;
    line-height: 1.6;
}

/* Lo sfondo trasparente che chiude la tendina toccando fuori (regola 52):
   sopra il calendario, sotto la testata (1030) e i pop-up. */
.cal-dd-backdrop[b-izhx1cvqt9] {
    position: fixed;
    inset: 0;
    z-index: 1020;
    background: transparent;
}

.cal-dd-panel[b-izhx1cvqt9] {
    position: absolute;
    z-index: 1021;
    top: calc(100% + 4px);
    right: 0;
    width: 280px;
    max-width: calc(100vw - 32px);
    padding: 6px;
    background: #fff;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    box-shadow: 0 8px 24px rgb(0 0 0 / 12%);
}

.cal-dd-search[b-izhx1cvqt9] {
    position: relative;
    margin: 2px 2px 4px;
}

.cal-dd-search > .bi[b-izhx1cvqt9] {
    position: absolute;
    left: 9px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-light);
    font-size: var(--fs-meta);
    pointer-events: none;
}

.cal-dd-search input[b-izhx1cvqt9] {
    padding-left: 28px;
}

.cal-dd-actions[b-izhx1cvqt9] {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 0 6px 4px;
    color: var(--text-light);
    font-size: var(--fs-meta);
    border-bottom: 1px solid var(--border-subtle);
    margin-bottom: 4px;
}

.cal-dd-actions .btn-link[b-izhx1cvqt9] {
    padding: 0 4px;
    font-size: var(--fs-meta);
    text-decoration: none;
}

.cal-dd-list[b-izhx1cvqt9] {
    max-height: 300px;
    overflow-y: auto;
}

.cal-dd-item[b-izhx1cvqt9] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 32px;
    padding: 4px 8px;
    margin: 0;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: var(--fs-body);
    color: var(--text-primary);
}

.cal-dd-item:hover[b-izhx1cvqt9] {
    background: var(--row-hover);
}

.cal-dd-item .form-check-input[b-izhx1cvqt9] {
    margin: 0;
    flex: 0 0 auto;
}

.cal-dd-dot[b-izhx1cvqt9] {
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.cal-dd-label[b-izhx1cvqt9] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cal-dd-empty[b-izhx1cvqt9] {
    padding: 8px;
    color: var(--text-light);
    font-size: var(--fs-meta);
}

/* La legenda dentro «Mostra»: lo stesso segno con cui ciascuna cosa si disegna. */
.cal-swatch[b-izhx1cvqt9] {
    flex: 0 0 auto;
    width: 16px;
    height: 11px;
    border-radius: 3px;
}

.cal-swatch.is-shift[b-izhx1cvqt9] { background: var(--accent-primary); }
.cal-swatch.is-request[b-izhx1cvqt9] { background: #DC3545; }

.cal-swatch.is-availability[b-izhx1cvqt9] {
    background: repeating-linear-gradient(45deg, rgba(25, 135, 84, .15), rgba(25, 135, 84, .15) 3px, rgba(25, 135, 84, .35) 3px, rgba(25, 135, 84, .35) 6px);
    border: 1px dashed rgba(25, 135, 84, .6);
}

.cal-swatch.is-absence[b-izhx1cvqt9] {
    background: repeating-linear-gradient(135deg, rgba(108, 117, 125, .15), rgba(108, 117, 125, .15) 3px, rgba(108, 117, 125, .35) 3px, rgba(108, 117, 125, .35) 6px);
    border: 1px dashed rgba(108, 117, 125, .6);
}

/* ── Personale | Generale ─────────────────────────────────────────── */
.cal-seg[b-izhx1cvqt9] {
    display: inline-flex;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: #fff;
}

.cal-seg .btn[b-izhx1cvqt9] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: none;
    border-radius: 0;
    background: #fff;
    color: var(--text-secondary);
    padding-left: 12px;
    padding-right: 12px;
}

.cal-seg .btn + .btn[b-izhx1cvqt9] {
    border-left: 1px solid var(--border-subtle);
}

.cal-seg .btn.active[b-izhx1cvqt9] {
    background: var(--accent-primary);
    color: #fff;
}

/* ── Il pulsante verde «Nuova» del calendario comune ───────────────── */
.cal-newmenu-panel[b-izhx1cvqt9] {
    width: 250px;
}

.cal-newmenu-item[b-izhx1cvqt9] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 44px;
    padding: 6px 10px;
    border: none;
    border-radius: var(--radius-sm);
    background: none;
    text-align: left;
    color: var(--text-primary);
}

.cal-newmenu-item:hover[b-izhx1cvqt9],
.cal-newmenu-item:focus-visible[b-izhx1cvqt9] {
    background: var(--row-hover);
}

.cal-newmenu-item > .bi[b-izhx1cvqt9] {
    font-size: var(--fs-lg);
    color: var(--text-secondary);
}

.cal-newmenu-item strong[b-izhx1cvqt9] {
    display: block;
    font-weight: 500;
}

.cal-newmenu-item small[b-izhx1cvqt9] {
    display: block;
    color: var(--text-light);
    font-size: var(--fs-meta);
}

/* ── Le richieste: il turno in rosso ──────────────────────────────────
   (richiesta dell'utente: «quando ti viene richiesto qualcosa nel
   calendario deve comparire quel turno in rosso»). Lo stile inline del
   tipo non c'è (`EventInlineStyle`), quindi il rosso vince. */
.cal-event.is-request[b-izhx1cvqt9],
.cal-week-event.is-request[b-izhx1cvqt9] {
    background: #DC3545;
    color: #fff;
    box-shadow: inset 4px 0 0 #9B1C28;
    opacity: 1;
    filter: none;
}

.cal-event.is-request:hover[b-izhx1cvqt9],
.cal-week-event.is-request:hover[b-izhx1cvqt9] {
    color: #fff;
    filter: brightness(.94);
}

.cal-flag.is-request[b-izhx1cvqt9] {
    background: #fff;
    color: #C8282A;
}

/* ── Le proprie fasce si cliccano (prima `pointer-events: none`) ────── */
.cal-availability-band.is-editable[b-izhx1cvqt9] {
    pointer-events: auto;
    cursor: pointer;
}

.cal-availability-band.is-editable:hover[b-izhx1cvqt9],
.cal-availability-band.is-editable:focus-visible[b-izhx1cvqt9] {
    border-style: solid;
    border-color: rgba(25, 135, 84, .8);
    outline: none;
}

/* ── Le proprie assenze sulla griglia: grigie, dietro a tutto ─────────── */
.cal-absence-band[b-izhx1cvqt9] {
    position: absolute;
    left: 2px;
    right: 2px;
    z-index: 0;
    pointer-events: none;
    border-radius: .35rem;
    background: repeating-linear-gradient(
        135deg,
        rgba(108, 117, 125, .10),
        rgba(108, 117, 125, .10) 8px,
        rgba(108, 117, 125, .18) 8px,
        rgba(108, 117, 125, .18) 16px);
    border: 1px dashed rgba(108, 117, 125, .5);
    overflow: hidden;
}

.cal-absence-label[b-izhx1cvqt9] {
    display: block;
    padding: 1px 4px;
    font-size: var(--fs-micro);
    line-height: 1.2;
    color: var(--text-secondary);
    white-space: nowrap;
}

.cal-day-absence[b-izhx1cvqt9] {
    color: var(--text-secondary);
    font-size: var(--fs-micro);
    margin-left: 2px;
}

/* ── Il proprio nome, evidenziato ovunque compaia ───────────────────── */
.cal-me[b-izhx1cvqt9] {
    font-weight: 700;
    border-radius: 3px;
    padding: 0 3px;
    background: #EFEDFF;
    color: #3D2FB0;
}

/* Dentro un chip colorato il viola chiaro non si legge: una velina bianca. */
.cal-week-event .cal-me[b-izhx1cvqt9] {
    background: rgba(255, 255, 255, .85);
    color: #3D2FB0;
}

/* ── Un posto coperto in parte: il mezzo cerchio ────────────────────── */
.cal-partial[b-izhx1cvqt9] {
    color: var(--accent-warning);
}

.cal-week-event .cal-partial[b-izhx1cvqt9] {
    color: #fff;
}

.cal-piece-hours[b-izhx1cvqt9] {
    margin-left: 4px;
    color: var(--text-secondary);
    font-size: var(--fs-meta);
    font-weight: 400;
}

/* In proporzione al nome accanto (10-10-2026): il riquadro fa crescere le scritte con il suo
   spazio (app.css, `--cal-fit`), e un orario fisso da 11 px resterebbe piccolo accanto a un
   nome da 24. A misura di partenza vale quanto prima. */
.cal-week-event .cal-piece-hours[b-izhx1cvqt9] {
    color: rgba(255, 255, 255, .85);
    font-size: .9em;
}

.cal-gap[b-izhx1cvqt9] {
    color: #C8282A;
    font-size: var(--fs-meta);
    font-weight: 400;
}

.cal-list-slot.is-partial .cal-list-slot-role[b-izhx1cvqt9] {
    color: var(--text-primary);
}

/* ── L'Elenco: una colonna per ruolo ────────────────────────────────── */
/* Niente `overflow-x: auto` qui: dentro un contenitore che scorre l'intestazione `sticky`
   della `.tm-table` (top 48 px) si aggancia al contenitore e copre la prima riga — visto
   provandolo. Le colonne dei ruoli sono poche e strette; se un giorno fossero troppe, la
   cella va a capo (`.cal-agenda-entry` sotto). */
.cal-agenda-wrap[b-izhx1cvqt9] {
    margin-bottom: 8px;
}

.cal-agenda-role[b-izhx1cvqt9] {
    white-space: nowrap;
}

.cal-agenda-entries[b-izhx1cvqt9] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.cal-agenda-entry[b-izhx1cvqt9] {
    white-space: nowrap;
}

/* Con molti ruoli la tabella non deve sfondare `main` (che taglia senza scorrere, regola
   47): oltre i sei ruoli i nomi vanno a capo. */
.cal-agenda.has-many-roles .cal-agenda-entry[b-izhx1cvqt9],
.cal-agenda.has-many-roles .cal-agenda-role[b-izhx1cvqt9] {
    white-space: normal;
}

.cal-vacant[b-izhx1cvqt9] {
    color: var(--text-light);
}

.cal-vacant-required[b-izhx1cvqt9] {
    color: #C8282A;
    font-weight: 500;
}

.cal-agenda > tbody > tr.cal-row-request > td[b-izhx1cvqt9] {
    background-color: rgba(220, 53, 69, .06);
}

.cal-agenda > tbody > tr.cal-row-request > td:first-child[b-izhx1cvqt9] {
    box-shadow: inset 4px 0 0 0 #DC3545;
}

.cal-agenda > tbody > tr.cal-row-mine > td:first-child[b-izhx1cvqt9] {
    box-shadow: inset 4px 0 0 0 var(--accent-primary);
}

/* ══════════════════════════════════════════════════════════════
   Telefono: la barra va in colonna, niente scorre di lato.
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 767.98px) {
    .cal-toolbar[b-izhx1cvqt9] {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .cal-toolbar .cal-nav[b-izhx1cvqt9] {
        width: 100%;
    }

    .cal-toolbar .cal-nav .btn[b-izhx1cvqt9] {
        min-width: 44px;
        min-height: 44px;
    }

    .cal-toolbar .cal-nav .cal-title[b-izhx1cvqt9] {
        flex: 1 1 auto;
        min-width: 0;
        margin-left: 8px;
        font-size: var(--fs-lg);
    }

    /* I filtri: una riga che va a capo, e le tendine si aprono larghe quanto
       la riga — ancorate a lei e non al pulsante, che sul telefono può stare
       in qualunque punto e farebbe uscire il pannello dallo schermo. */
    .cal-filters[b-izhx1cvqt9] {
        position: relative;
        margin-left: 0;
        width: 100%;
    }

    .cal-filters .cal-dd[b-izhx1cvqt9] {
        position: static;
        flex: 1 1 auto;
    }

    .cal-filters .cal-dd-toggle[b-izhx1cvqt9] {
        width: 100%;
        justify-content: center;
        min-height: 44px;
    }

    .cal-filters .cal-dd-panel[b-izhx1cvqt9] {
        left: 0;
        right: 0;
        width: auto;
        max-width: none;
    }

    .cal-seg[b-izhx1cvqt9] {
        flex: 1 1 100%;
    }

    .cal-seg .btn[b-izhx1cvqt9] {
        flex: 1 1 0;
        min-width: 0;
        min-height: 44px;
        justify-content: center;
    }

    .cal-dd-item[b-izhx1cvqt9] {
        min-height: 44px;
    }

    .cal-dd-actions .btn-link[b-izhx1cvqt9] {
        min-height: 44px;
        min-width: 44px;
    }

    /* La scheda di una riga: il filetto sulla scheda, perché sotto i 768 px le
       celle perdono ombre e sfondi (`table-mobile`). */
    .cal-agenda-wrap[b-izhx1cvqt9] {
        overflow: visible;
    }

    .cal-agenda > tbody > tr.cal-row-request[b-izhx1cvqt9] {
        border-left: 4px solid #DC3545;
        background: rgba(220, 53, 69, .05);
    }

    .cal-agenda > tbody > tr.cal-row-mine[b-izhx1cvqt9] {
        border-left: 4px solid var(--accent-primary);
    }

    .cal-agenda-entries[b-izhx1cvqt9] {
        align-items: flex-end;
    }

    .cal-agenda-entry[b-izhx1cvqt9] {
        white-space: normal;
        text-align: right;
    }
}
/* /Components/Pages/Organization/CertificationVerifications.razor.rz.scp.css */
/* Il filtro su una persona sola: si vede, e si toglie (regola 76). */
.cv-filter[b-kvw5tsdop1] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 10px;
    padding: 4px 4px 4px 12px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: #EFEDFF;
    color: var(--text-primary);
    font-size: var(--fs-small);
}

.cv-filter > .bi[b-kvw5tsdop1] {
    color: var(--accent-primary);
}
/* /Components/Pages/Organization/Chat.razor.rz.scp.css */
/* La chat a canali (04-10-2026): elenco delle conversazioni a sinistra, quella aperta a
   destra. Sotto i 768 px una sola colonna alla volta (`.is-list` / `.is-pane`).
   Le misure della conversazione (bolle, composer) restano quelle di app.css; qui solo la
   cornice. Colonna con lista scorrevole = flex column con `min-height: 0` sul pezzo che
   scorre (1_INTERFACE §6), mai un calc sull'altezza dello schermo dentro la colonna. */

.ch-layout[b-5sl4yado6q] {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    height: 72vh;
    min-height: 440px;
    background: #fff;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    overflow: hidden;
}

/* ── Elenco ─────────────────────────────────────────────────────── */

.ch-list[b-5sl4yado6q] {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    border-right: 1px solid var(--border-subtle);
    background: var(--content-bg);
    padding: 8px;
}

.ch-list-head[b-5sl4yado6q] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 6px 8px;
}

.ch-list-title[b-5sl4yado6q] {
    flex: 1 1 auto;
    font-size: var(--fs-meta);
    font-weight: 500;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.ch-new[b-5sl4yado6q] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.ch-group[b-5sl4yado6q] {
    margin: 12px 6px 4px;
    font-size: var(--fs-meta);
    font-weight: 500;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.ch-item[b-5sl4yado6q] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 44px;
    padding: 6px 8px;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-primary);
    font-size: var(--fs-body);
    text-align: left;
}

.ch-item:hover[b-5sl4yado6q] {
    background: var(--row-hover);
}

.ch-item.is-active[b-5sl4yado6q] {
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    font-weight: 500;
}

.ch-item:focus-visible[b-5sl4yado6q] {
    outline: 2px solid var(--accent-primary);
    outline-offset: -2px;
}

.ch-item-icon[b-5sl4yado6q] {
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--row-hover);
    color: var(--text-secondary);
    font-size: var(--fs-body);
}

/* Il bot ha il colore dell'applicazione: è lei che parla. */
.ch-item-icon.is-bot[b-5sl4yado6q] {
    background: var(--accent-primary);
    color: #fff;
}

.ch-item-text[b-5sl4yado6q],
.ch-pane-titles[b-5sl4yado6q] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 auto;
    line-height: 1.3;
}

.ch-item-title[b-5sl4yado6q],
.ch-pane-title[b-5sl4yado6q] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ch-pane-title[b-5sl4yado6q] {
    font-weight: 600;
    color: var(--text-primary);
}

.ch-item-sub[b-5sl4yado6q] {
    font-size: var(--fs-meta);
    color: var(--text-light);
    font-weight: 400;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ch-badge[b-5sl4yado6q] {
    flex: 0 0 auto;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--accent-primary);
    color: #fff;
    font-size: var(--fs-micro);
    font-weight: 600;
}

/* ── Conversazione ──────────────────────────────────────────────── */

.ch-pane[b-5sl4yado6q] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    padding: 0 12px 12px;
}

.ch-pane-head[b-5sl4yado6q] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-subtle);
    margin-bottom: 8px;
}

/* «Indietro» esiste solo dove l'elenco sparisce. */
.ch-back[b-5sl4yado6q] {
    display: none;
}

.ch-scroll[b-5sl4yado6q] {
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
    padding: 8px 4px;
    margin-bottom: 8px;
}

.ch-msg[b-5sl4yado6q] {
    margin-bottom: 8px;
}

.ch-msg.is-me[b-5sl4yado6q] {
    text-align: right;
}

.ch-text[b-5sl4yado6q] {
    white-space: pre-line;
}

.ch-empty[b-5sl4yado6q] {
    margin: auto;
}

/* I messaggi del bot sono pulsanti: si toccano per aprirli. */
.ch-bot-msg[b-5sl4yado6q] {
    display: inline-flex;
    flex-direction: column;
    gap: 2px;
    border: 1px solid var(--border-subtle);
    background: #fff;
    color: var(--text-primary);
    font-size: var(--fs-body);
    cursor: pointer;
}

.ch-bot-msg:hover[b-5sl4yado6q] {
    background: var(--row-hover);
}

.ch-bot-msg:focus-visible[b-5sl4yado6q] {
    outline: 2px solid var(--accent-primary);
    outline-offset: 1px;
}

.ch-bot-msg.is-new[b-5sl4yado6q] {
    border-color: var(--accent-primary);
}

.ch-bot-title[b-5sl4yado6q] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
}

.ch-bot-text[b-5sl4yado6q] {
    color: var(--text-secondary);
    white-space: pre-line;
}

.ch-meta[b-5sl4yado6q] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--fs-meta);
    color: var(--text-light);
}

.ch-dot[b-5sl4yado6q] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent-primary);
    flex: 0 0 auto;
}

.ch-bot-note[b-5sl4yado6q] {
    font-size: var(--fs-meta);
    color: var(--text-light);
    text-align: center;
}

/* ── Nuovo diretto ──────────────────────────────────────────────── */

.ch-people[b-5sl4yado6q] {
    display: flex;
    flex-direction: column;
}

.ch-person[b-5sl4yado6q] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 6px 8px;
    border: 0;
    border-bottom: 1px solid var(--border-subtle);
    background: transparent;
    color: var(--text-primary);
    text-align: left;
    font-size: var(--fs-body);
}

.ch-person:hover[b-5sl4yado6q] {
    background: var(--row-hover);
}

/* ── Telefono: una colonna alla volta ───────────────────────────── */

@media (max-width: 767.98px) {
    .ch-layout[b-5sl4yado6q] {
        display: block;
        height: auto;
        min-height: 0;
        border: 0;
        background: transparent;
    }

    .ch-layout.is-list .ch-pane[b-5sl4yado6q],
    .ch-layout.is-pane .ch-list[b-5sl4yado6q] {
        display: none;
    }

    .ch-list[b-5sl4yado6q] {
        border-right: 0;
        background: transparent;
        padding: 0;
        overflow: visible;
    }

    .ch-pane[b-5sl4yado6q] {
        padding: 0;
    }

    .ch-back[b-5sl4yado6q] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 44px;
    }

    .ch-scroll[b-5sl4yado6q] {
        height: 58dvh;
        flex: 0 0 auto;
        background: #fff;
        border: 1px solid var(--border-subtle);
        border-radius: var(--radius-md);
    }

    .ch-new[b-5sl4yado6q] {
        min-width: 44px;
    }
}
/* /Components/Pages/Organization/Dashboard.razor.rz.scp.css */
/* Home e Dashboard (04-10-2026, modello «lista → pop-up»): una pagina di consultazione
   compatta. Titoli di sezione piccoli sopra tabelle `tm-table`, niente card intorno; una
   scatola bianca solo per i grafici, che hanno bisogno di un fondo. */

.dash-date[b-cehtm0cx7n] {
    color: var(--text-secondary);
    font-size: var(--fs-small);
    text-transform: capitalize;
}

/* Due colonne sul desktop largo, una sola sotto i 992 px (dove la barra laterale prende
   gia' 240 px e due tabelle affiancate andrebbero a capo cella per cella). */
.dash-grid[b-cehtm0cx7n] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 20px;
    align-items: start;
}

@media (max-width: 991.98px) {
    .dash-grid[b-cehtm0cx7n] {
        grid-template-columns: minmax(0, 1fr);
    }
}

.dash-sec[b-cehtm0cx7n] {
    min-width: 0;
    margin-bottom: 20px;
}

.dash-grid > .dash-sec[b-cehtm0cx7n] {
    margin-bottom: 0;
}

.dash-grid + .dash-sec[b-cehtm0cx7n] {
    margin-top: 20px;
}

.dash-sec-head[b-cehtm0cx7n] {
    display: flex;
    align-items: center;
    gap: 4px;
    min-height: 28px;
    margin-bottom: 6px;
}

.dash-sec-title[b-cehtm0cx7n] {
    margin: 0;
    font-size: var(--fs-md);
    font-weight: 600;
    color: var(--text-primary);
}

.dash-sec-meta[b-cehtm0cx7n] {
    margin-left: 6px;
    font-size: var(--fs-small);
    font-weight: 400;
    color: var(--text-secondary);
    text-transform: capitalize;
}

.dash-grow[b-cehtm0cx7n] {
    flex: 1 1 auto;
}

.dash-sec-link[b-cehtm0cx7n] {
    font-size: var(--fs-small);
    text-decoration: none;
    white-space: nowrap;
}

/* Lo stato vuoto dentro una sezione: piu' basso di quello di una pagina intera. */
.dash-empty[b-cehtm0cx7n] {
    padding: 20px 16px;
}

.dash-empty > .bi[b-cehtm0cx7n] {
    font-size: 22px;
}

/* Il pallino del colore del tipo di turno accanto alla data. */
.dash-dot[b-cehtm0cx7n] {
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    border-radius: 50%;
    background: var(--dot, var(--text-light));
}

/* Le richieste di sostituzione che aspettano una risposta: una riga gialla, non una card. */
.dash-attn[b-cehtm0cx7n] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 16px;
    padding: 8px 12px;
    background: #FFF8E1;
    border: 1px solid #FFE3A3;
    border-left: 3px solid var(--accent-warning);
    border-radius: var(--radius-md);
    color: var(--text-primary);
}

.dash-attn > .bi[b-cehtm0cx7n] {
    color: #9A6B00;
}

.dash-attn-text[b-cehtm0cx7n] {
    flex: 1 1 auto;
    min-width: 0;
}

/* Gli stati sulle righe. */
.dash-given[b-cehtm0cx7n] {
    display: inline-flex;
    align-items: center;
    color: #3F8F27;
    font-size: 16px;
}

.dash-important[b-cehtm0cx7n] {
    color: var(--accent-danger);
}

.dash-warn[b-cehtm0cx7n] {
    color: var(--accent-danger);
}

.dash-ok[b-cehtm0cx7n] {
    color: var(--accent-success);
}

/* L'icona di un evento recente: il suo colore viene dal servizio (BadgeClass). */
.dash-act-ico[b-cehtm0cx7n] {
    display: inline-grid;
    place-items: center;
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    border-radius: 50%;
    font-size: var(--fs-meta);
}

.dash-when[b-cehtm0cx7n] {
    color: var(--text-secondary);
    font-size: var(--fs-meta);
    white-space: nowrap;
}

/* La barra di Top volontari: la proporzione rispetto al primo. */
.dash-barcell[b-cehtm0cx7n] {
    width: 40%;
}

.dash-bar[b-cehtm0cx7n] {
    display: block;
    height: 6px;
    border-radius: 3px;
    background: var(--content-bg);
    overflow: hidden;
}

.dash-bar > span[b-cehtm0cx7n] {
    display: block;
    height: 100%;
    background: var(--accent-primary);
    border-radius: 3px;
}

.dash-total > td[b-cehtm0cx7n] {
    font-weight: 600;
    border-top: 1px solid var(--border-subtle);
}

/* I grafici: l'unica scatola della pagina, perche' una tela vuole un fondo. */
.dash-chart[b-cehtm0cx7n] {
    background: #fff;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 12px;
}

@media (max-width: 767.98px) {
    .dash-sec-link[b-cehtm0cx7n] {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }

    .dash-date[b-cehtm0cx7n] {
        display: none;
    }
}
/* /Components/Pages/Organization/FillInRequests.razor.rz.scp.css */
/* La coda delle sostituzioni (04-10-2026, modello «lista → pop-up»). */

/* Il titolo di una sezione della coda: piccolo, con il conteggio e la «i» accanto. */
.fr-h[b-gpre0e04er] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin: 16px 0 8px;
    font-size: var(--fs-md);
    font-weight: 600;
    color: var(--text-primary);
}

/* Il pallino del colore del tipo di turno. */
.fr-dot[b-gpre0e04er] {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 4px;
    border-radius: 50%;
    vertical-align: middle;
}

/* Le azioni nel pie' di un pop-up con il pie' proprio: vanno a capo fra di loro e lasciano
   «Chiudi» a destra. Sotto i 576 px il pie' del pop-up non va a capo (app.css), e tre o
   quattro pulsanti con il testo non ci starebbero su una riga di 375 px. */
.zf-actions[b-gpre0e04er] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
}
/* /Components/Pages/Organization/Help.razor.rz.scp.css */
/* La guida (04-10-2026): le sezioni sono `AccordionSection`, che e' gia' una scatola sua;
   qui resta solo la riga di contorno, piu' piccola e grigia, che stava scritta in linea. */
.help-note[b-xcudo4pm54] {
    color: var(--text-secondary);
    font-size: var(--fs-meta);
}

.help kbd[b-xcudo4pm54] {
    font-size: var(--fs-meta);
    padding: 1px 5px;
}
/* /Components/Pages/Organization/MemberDossier.razor.rz.scp.css */
/* Il pop-up dell'attestato si apre sopra quello della persona. Da quando il contenitore del
   pop-up (`.tm-zoom`, 1060) porta sfondo e finestra insieme, a parita' di numero vince gia'
   chi viene dopo nel DOM; il gradino in piu' lo dice esplicitamente, sotto la conferma
   (1070) e i toast (1200) — l'elenco dei livelli e' in MainLayout.razor.css. */
.dossier-stack[b-p52gt4s93w]  .tm-zoom {
    z-index: 1062;
}

/* Le azioni della scheda «Attestati», sopra la tabella. */
.dossier-certs-bar[b-p52gt4s93w] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.dossier-certs-bar .bi-box-arrow-up-right[b-p52gt4s93w] {
    margin-left: 4px;
}

/* Dentro il pop-up l'intestazione si ferma in cima al corpo che scorre. */
.dossier-in-zoom > thead > tr > th[b-p52gt4s93w] {
    top: 0;
}
/* /Components/Pages/Organization/Members.razor.rz.scp.css */
/* Le intestazioni delle code (in attesa, attivi): piccole, sopra la loro tabella. Compaiono
   solo quando c'e' piu' di una coda da distinguere. */
.mb-section[b-o7y6aiaxek] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 8px;
    font-size: var(--fs-md);
    font-weight: 600;
    color: var(--text-primary);
}

/* Ex utenti: un'intestazione che si apre, sotto l'elenco. */
.mb-former[b-o7y6aiaxek] {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 20px 0 8px;
}

.mb-former-toggle[b-o7y6aiaxek] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    padding: 0;
    border: 0;
    background: none;
    font-weight: 500;
    color: var(--text-secondary);
}

.mb-former-toggle:focus-visible[b-o7y6aiaxek] {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
    border-radius: 2px;
}

/* La scheda «Generale» della modifica: due colonne sul desktop, una sul telefono. */
.mb-grid[b-o7y6aiaxek] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 12px;
}

/* La scheda «Account»: un gesto per riga, il nome a sinistra e il pulsante a destra. */
.mb-acct-row[b-o7y6aiaxek] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-subtle);
}

.mb-acct-row:last-child[b-o7y6aiaxek] {
    border-bottom: 0;
}

.mb-acct-text[b-o7y6aiaxek] {
    flex: 1 1 auto;
    min-width: 0;
}

.mb-acct-text > strong[b-o7y6aiaxek] {
    font-weight: 500;
    color: var(--text-primary);
}

.mb-acct-form[b-o7y6aiaxek] {
    padding: 4px 0 12px;
    border-bottom: 1px solid var(--border-subtle);
}

/* Dentro il pop-up l'intestazione si ferma in cima al corpo che scorre. */
.mb-in-zoom > thead > tr > th[b-o7y6aiaxek] {
    top: 0;
}

@media (max-width: 767.98px) {
    .mb-grid[b-o7y6aiaxek] {
        grid-template-columns: 1fr;
    }

    .mb-former-toggle[b-o7y6aiaxek] {
        min-height: 44px;
    }
}
/* /Components/Pages/Organization/News.razor.rz.scp.css */
/* Bacheca (04-10-2026, modello «lista → pop-up»): titolo e prima riga nella stessa cella. */

.nw-title[b-dtjdb1wu38] {
    display: block;
}

.nw-excerpt[b-dtjdb1wu38] {
    display: block;
    max-width: 640px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--fs-small);
    font-weight: 400;
    color: var(--text-secondary);
}

.nw-important[b-dtjdb1wu38] {
    color: var(--accent-danger);
}

.nw-content[b-dtjdb1wu38] {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    color: var(--text-primary);
    line-height: 1.55;
}

@media (max-width: 767.98px) {
    .nw-excerpt[b-dtjdb1wu38] {
        max-width: none;
        white-space: normal;
    }
}
/* /Components/Pages/Organization/NewsManage.razor.rz.scp.css */
/* Gestione notizie (04-10-2026, modello «lista → pop-up»). */

/* Importante: l'unica icona di stato rossa della pagina, perché chiama una notifica. */
.nm-important[b-hcbegr6oim] {
    color: var(--accent-danger);
}

/* Il testo della notizia nel dettaglio: gli a capo scritti restano a capo. */
.nm-content[b-hcbegr6oim] {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    color: var(--text-primary);
    line-height: 1.55;
}
/* /Components/Pages/Organization/Permissions.razor.rz.scp.css */
/* Permissions page — left beneficiary list / right permission grid.
   Padding and font sizes mirror the global users-table for visual consistency. */

.permissions-list[b-10dirpdj5t] {
    display: flex;
    flex-direction: column;
}

.permissions-list-section + .permissions-list-section[b-10dirpdj5t] {
    border-top: 1px solid var(--bs-border-color, #dee2e6);
}

.permissions-list-header[b-10dirpdj5t] {
    padding: 0.2rem 0.5rem;
    font-size: var(--fs-meta);
    text-transform: uppercase;
    color: #6c757d;
    background-color: rgba(0, 0, 0, 0.02);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.04em;
}

.permissions-list-empty[b-10dirpdj5t] {
    padding: 0.2rem 0.5rem;
    font-size: var(--fs-small);
    color: #6c757d;
    line-height: 1.2;
    font-style: italic;
}

.permissions-list-item[b-10dirpdj5t] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    width: 100%;
    padding: 0.2rem 0.5rem;
    font-size: var(--fs-body);
    line-height: 1.2;
    background: transparent;
    border: 0;
    border-top: 1px solid var(--bs-border-color, #dee2e6);
    color: inherit;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.15s;
}

.permissions-list-item:first-of-type[b-10dirpdj5t] {
    border-top: 0;
}

.permissions-list-item:hover[b-10dirpdj5t] {
    background-color: rgba(0, 0, 0, 0.04);
}

.permissions-list-item.active[b-10dirpdj5t] {
    background-color: rgba(123, 104, 238, 0.12);
    color: var(--accent-primary);
    font-weight: 500;
}

.permissions-list-item .bi[b-10dirpdj5t] {
    font-size: var(--fs-body);
    opacity: 0.7;
}

.permissions-list-item .badge[b-10dirpdj5t] {
    font-size: var(--fs-micro);
    padding: 0.2em 0.45em;
    font-weight: 500;
}

.permissions-list .form-select-sm[b-10dirpdj5t],
.permissions-list .form-control-sm[b-10dirpdj5t] {
    padding-top: 0.1rem;
    padding-bottom: 0.1rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    font-size: var(--fs-small);
    line-height: 1.2;
    height: auto;
}

.permissions-list-toolbar[b-10dirpdj5t] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    border-bottom: 1px solid var(--bs-border-color, #dee2e6);
}

.permissions-list-sortbar[b-10dirpdj5t] {
    display: flex;
    gap: 0.25rem;
}

.permissions-list-sort-btn[b-10dirpdj5t] {
    flex: 1 1 0;
    padding: 0.1rem 0.3rem;
    font-size: var(--fs-meta);
    line-height: 1.2;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 3px;
    color: #6c757d;
    cursor: pointer;
    text-align: center;
    user-select: none;
    transition: background-color 0.15s, color 0.15s;
}

.permissions-list-sort-btn:hover[b-10dirpdj5t] {
    background-color: rgba(0, 0, 0, 0.04);
}

.permissions-list-sort-btn.active[b-10dirpdj5t] {
    background-color: rgba(123, 104, 238, 0.12);
    color: var(--accent-primary);
    font-weight: 500;
}

.permissions-list-sort-btn .bi[b-10dirpdj5t] {
    font-size: 10px;
    margin-left: 0.15rem;
    opacity: 0.7;
}

.permissions-list-users[b-10dirpdj5t] {
    max-height: 50vh;
    overflow-y: auto;
}

.permissions-list-item-user[b-10dirpdj5t] {
    align-items: flex-start;
}

.permissions-list-item-user .bi[b-10dirpdj5t] {
    margin-top: 1px;
}

.permissions-list-item-text[b-10dirpdj5t] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.permissions-list-item-primary[b-10dirpdj5t] {
    font-size: var(--fs-body);
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.permissions-list-item-secondary[b-10dirpdj5t] {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    min-width: 0;
    font-size: var(--fs-meta);
    line-height: 1.2;
    color: #6c757d;
}

/* Colour comes from the Bootstrap badge class (bg-danger / bg-warning /
   bg-info / bg-secondary) so role tags match the Utenti page exactly.
   This rule only sets size/shape for the compact left list. */
.permissions-list-item-role[b-10dirpdj5t] {
    flex: 0 0 auto;
    padding: 0.1em 0.4em;
    font-size: var(--fs-micro);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

.permissions-list-item-email[b-10dirpdj5t] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.permissions-list-item-user.active .permissions-list-item-email[b-10dirpdj5t] {
    color: rgba(123, 104, 238, 0.75);
}

/* Inherited-from-role marker: a solid black square drawn inside the checkbox
   for permissions a selected user holds through its OrgRole (not a direct grant). */
/* ══════════════════════════════════════════════════════════════════
   La griglia dei permessi (rifatta il 05-09-2026, richiesta dell'utente:
   «non è per nulla bello da vedere»)

   Erano ventinove righe grigie identiche, e l'unica differenza fra «ce
   l'ha» e «non ce l'ha» era una spunta da 13 px. Adesso ogni voce e' una
   riga con un bordo, quelle attive sono tinte, e chi ce l'ha per via del
   **livello** lo dice a parole invece che con un quadratino nero.
   ══════════════════════════════════════════════════════════════════ */
.perm-summary[b-10dirpdj5t] {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.5rem 0.65rem;
    margin-bottom: 0.75rem;
    border-radius: var(--radius-sm, 4px);
    background: var(--content-bg, #F7F8FA);
    border: 1px solid var(--border-subtle, #E8E8ED);
    font-size: var(--fs-small, 13px);
    color: var(--text-secondary, #6B6F76);
}

.perm-summary.is-on[b-10dirpdj5t] {
    background: rgba(123, 104, 238, 0.08);
    border-color: rgba(123, 104, 238, 0.3);
}

.perm-summary strong[b-10dirpdj5t] {
    color: var(--text-primary, #1E1F21);
}

/* Da dove arrivano va **a capo**: su 375 px in linea spingeva il conto fuori. */
.perm-summary-detail[b-10dirpdj5t] {
    display: block;
    color: var(--text-light, #9CA0A9);
    font-size: var(--fs-meta, 12px);
}

.perm-group-head[b-10dirpdj5t] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
}

.perm-group-title[b-10dirpdj5t] {
    font-size: var(--fs-meta, 12px);
    text-transform: uppercase;
    font-weight: 500;
    color: var(--text-light, #9CA0A9);
    letter-spacing: 0.02em;
}

.perm-group-count[b-10dirpdj5t] {
    font-size: var(--fs-meta, 12px);
    color: var(--text-light, #9CA0A9);
    border: 1px solid var(--border-subtle, #E8E8ED);
    border-radius: 999px;
    padding: 0 0.45rem;
}

.perm-group-count.is-on[b-10dirpdj5t] {
    color: var(--accent-primary, #7B68EE);
    border-color: rgba(123, 104, 238, 0.4);
}

.perm-check[b-10dirpdj5t] {
    position: relative;
    border: 1px solid transparent;
    border-radius: var(--radius-sm, 4px);
    padding-top: 0.2rem;
    padding-bottom: 0.2rem;
    padding-right: 0.4rem;
}

/* Attivo si vede prima di leggerlo. */
.perm-check.is-on[b-10dirpdj5t] {
    background: rgba(123, 104, 238, 0.08);
    border-color: rgba(123, 104, 238, 0.25);
}

.perm-check.is-on .perm-name[b-10dirpdj5t] {
    color: var(--text-primary, #1E1F21);
    font-weight: 500;
}

/* Ereditato: **spuntato** — ce l'ha davvero — ma di un altro colore, perche' non
   e' suo. Il quadratino nero che c'era prima diceva la stessa cosa in un modo che
   nessuno poteva indovinare, e siccome la casella sotto restava vuota, toglierlo
   era impossibile: la casella vuota vuol dire «aggiungi». */
.perm-check.perm-inherited[b-10dirpdj5t] {
    background: var(--content-bg, #F7F8FA);
    border-color: var(--border-subtle, #E8E8ED);
}

.perm-check.perm-inherited .form-check-input:checked[b-10dirpdj5t] {
    background-color: var(--text-light, #9CA0A9);
    border-color: var(--text-light, #9CA0A9);
}

.perm-check .badge[b-10dirpdj5t] {
    font-size: var(--fs-meta, 12px);
    font-weight: 400;
    margin-left: 0.35rem;
    vertical-align: baseline;
}

.perm-from[b-10dirpdj5t] {
    background: #fff;
    border: 1px solid var(--border-subtle, #E8E8ED);
    color: var(--text-secondary, #6B6F76);
}

.perm-hint[b-10dirpdj5t] {
    background: var(--content-bg, #F7F8FA);
    border: 1px solid var(--border-subtle, #E8E8ED);
    color: var(--text-light, #9CA0A9);
}

/* ── Mobile: the two columns stack, so the compact desktop hit areas become
      proper touch targets and the beneficiary list gets its own scroll box. ── */
@media (max-width: 767.98px) {
    .permissions-list-item[b-10dirpdj5t] {
        padding: 0.55rem 0.6rem;
        min-height: 44px;
    }

    .permissions-list-sort-btn[b-10dirpdj5t] {
        padding: 0.45rem 0.3rem;
        min-height: 44px;
    }

    .permissions-list-users[b-10dirpdj5t] {
        max-height: 45vh;
    }

    .permissions-list .form-control-sm[b-10dirpdj5t],
    .permissions-list .form-select-sm[b-10dirpdj5t] {
        padding-top: 0.35rem;
        padding-bottom: 0.35rem;
        font-size: 16px;
    }

    /* Una riga per voce, con il bordo sempre visibile: sul telefono le voci si
       contano con l'occhio invece di leggerle una per una, e il bersaglio arriva
       ai 44 px della guida. */
    .perm-check[b-10dirpdj5t] {
        padding: 0.5rem 0.5rem 0.5rem 2.1rem;
        min-height: 44px;
        display: flex;
        align-items: center;
        border-color: var(--border-subtle, #E8E8ED);
        background: #fff;
    }

    .perm-check .form-check-label[b-10dirpdj5t] {
        font-size: var(--fs-small, 13px);
    }

    /* Il nome sta su una riga e i badge vanno sotto: affiancati, su 375 px il nome
       si schiacciava a due parole per riga. */
    .perm-check .perm-name[b-10dirpdj5t] {
        display: block;
    }

    .perm-check .badge[b-10dirpdj5t] {
        margin-left: 0;
        margin-top: 0.15rem;
    }
}

/* Lista a sinistra, spunte a destra (08-10-2026). La colonna di destra qui porta le spunte, non
   un riepilogo: le si dà metà della larghezza (almeno 360 px, un po' meno della tabella) invece dei 340-380 fissi di
   `/org/roles`, così sugli schermi larghi le spunte vanno su due colonne e la tabella non resta
   una striscia vuota. Il selettore ha la classe dell'isolamento, quindi vince sulla regola di
   app.css che fissa la larghezza fra 992 e 1199 px. */
.perm-split[b-10dirpdj5t] {
    --tm-split-side-w: minmax(360px, 0.9fr);
}

/* Con la colonna di destra il clic sulla riga sceglie già il beneficiario: «Modifica» sulla
   riga non aggiunge niente, e a 1100 px la sua colonna era quella che spingeva la tabella sotto
   il pannello (misurato: l'intestazione «Azioni» copriva il titolo a destra). Sotto i 992 px,
   dove il clic apre il pop-up, resta com'era. */
@media (min-width: 992px) {
    .perm-split .tm-actions[b-10dirpdj5t],
    .perm-split .perm-actions-head[b-10dirpdj5t] {
        display: none;
    }
}
/* /Components/Pages/Organization/Settings.razor.rz.scp.css */
/* Le impostazioni dell'associazione (04-10-2026, modello «lista → pop-up»): tre gruppi di
   valori in sola lettura, ciascuno con il suo «Modifica». Un riquadro per gruppo perche' il
   gruppo e' davvero l'unita' che si modifica insieme (1_INTERFACE §0.1: una card solo se
   raggruppa qualcosa). */

.set-block[b-tyzpt014gs] {
    background: var(--header-bg);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 12px 16px 16px;
    margin-bottom: 16px;
}

.set-head[b-tyzpt014gs] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.set-title[b-tyzpt014gs] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    font-size: var(--fs-md);
    font-weight: 600;
    color: var(--text-primary);
}

.set-title > .bi[b-tyzpt014gs] {
    color: var(--text-secondary);
}

/* Nel pop-up: anticipo e coda affiancati, sono la stessa domanda dai due lati. */
.set-pair[b-tyzpt014gs] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 14px;
}

/* Un vincolo orario: la spunta che lo accende e i minuti, sulla stessa riga. */
.set-limit[b-tyzpt014gs] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 140px;
    align-items: center;
    gap: 8px 14px;
    padding: 6px 0;
    border-bottom: 1px solid var(--border-subtle);
}

.set-limit:last-child[b-tyzpt014gs] {
    border-bottom: 0;
}

@media (max-width: 767.98px) {
    .set-block[b-tyzpt014gs] {
        padding: 10px 12px 12px;
    }

    .set-limit[b-tyzpt014gs] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Organization/ShiftDetail.razor.rz.scp.css */
/* Il dettaglio di un turno (04-10-2026, modello «lista → pop-up»). Stili solo di questa
   pagina: niente card, sezioni con un titolo piccolo e le tabelle del modello. */

/* Il pallino del colore del tipo di turno, accanto al titolo. */
.sd-dot[b-dppyx8n2qf] {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex: 0 0 12px;
}

/* I fatti del turno: una riga per cosa, larghi quanto serve. */
.sd-facts[b-dppyx8n2qf] {
    max-width: 720px;
    margin-bottom: 20px;
}

.sd-cap[b-dppyx8n2qf]::first-letter {
    text-transform: uppercase;
}

/* Il titolo di una sezione della pagina: piccolo, con la «i» e il conteggio accanto. */
.sd-h[b-dppyx8n2qf] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin: 24px 0 8px;
    font-size: var(--fs-md);
    font-weight: 600;
    color: var(--text-primary);
}

/* La riga «sei di servizio» del socio: la squadra con cui esce. */
.sd-team[b-dppyx8n2qf] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 10px 12px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: #fff;
}

/* La storia del turno: un riquadro con il filetto, una riga per evento. */
.sd-box[b-dppyx8n2qf] {
    background: #fff;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 0 12px;
}

.sd-box > li[b-dppyx8n2qf] {
    padding: 8px 0;
    border-bottom: 1px solid var(--border-subtle);
}

.sd-box > li:last-child[b-dppyx8n2qf] {
    border-bottom: 0;
}

/* «Come si legge», sotto la lista di disponibilità. */
.sd-legend[b-dppyx8n2qf] {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-top: 6px;
    font-size: var(--fs-meta);
    color: var(--text-light);
}

/* Le azioni nel pie' di un pop-up con il pie' proprio: vanno a capo fra di loro e lasciano
   «Chiudi» a destra. Sotto i 576 px il pie' del pop-up non va a capo (app.css), e tre o
   quattro pulsanti con il testo non ci starebbero su una riga di 375 px. */
.zf-actions[b-dppyx8n2qf] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
}

/* ── Il posto diviso (04-10-2026) ───────────────────────────────────────────────────────
   Un pezzo per riga, con l'orario davanti in cifre allineate, e i buchi in rosso sotto: chi
   guarda la riga di un posto legge in colpo d'occhio «chi, quando, e che cosa manca». Il
   pezzo è un pulsante (apre il suo pop-up) ma si legge come testo: sulla riga stanno solo
   gli stati, le azioni nel pop-up (regola 106). */
.sd-pieces[b-dppyx8n2qf] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sd-piece-link[b-dppyx8n2qf] {
    border: 0;
    background: none;
    padding: 0;
    color: inherit;
    text-align: left;
    font: inherit;
    cursor: pointer;
    text-decoration: underline dotted var(--text-light);
    text-underline-offset: 3px;
}

.sd-piece-link:hover[b-dppyx8n2qf],
.sd-piece-link:focus-visible[b-dppyx8n2qf] {
    color: var(--accent-primary);
}

.sd-piece-hours[b-dppyx8n2qf] {
    font-variant-numeric: tabular-nums;
    color: var(--text-secondary);
    margin-right: 4px;
}

.sd-piece-gap[b-dppyx8n2qf],
.sd-piece-gap .sd-piece-hours[b-dppyx8n2qf] {
    color: var(--accent-danger);
}

/* Dalle / alle nel pop-up «Assegna»: due campi corti affiancati con la loro etichetta. */
.sd-piece-times[b-dppyx8n2qf] {
    display: grid;
    grid-template-columns: auto 1fr auto 1fr;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}

.sd-piece-times .tm-label[b-dppyx8n2qf] {
    margin: 0;
}

/* «parziale 08:00–11:00» nella colonna Disponibilità della lista. */
.sd-partial[b-dppyx8n2qf] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--fs-meta);
    color: var(--text-secondary);
    white-space: nowrap;
}

@media (max-width: 767.98px) {
    /* Sul telefono il pezzo è un bersaglio da dito. */
    .sd-piece-link[b-dppyx8n2qf] {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    .sd-piece-times[b-dppyx8n2qf] {
        grid-template-columns: auto 1fr;
    }
}
/* /Components/Pages/Organization/ShiftList.razor.rz.scp.css */
/* La Lista del calendario di gestione (04-10-2026, modello «lista → pop-up»). */

/* I filtri: una riga sola sopra la tabella, ognuno con la sua etichetta piccola. Vanno a
   capo da soli quando lo spazio finisce; sul telefono due per riga. */
.sl-filters[b-9xvfa54diz] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 8px 12px;
    margin-bottom: 12px;
}

.sl-filter[b-9xvfa54diz] {
    flex: 0 1 170px;
    min-width: 0;
}

.sl-filter.is-date[b-9xvfa54diz] {
    flex-basis: 150px;
}

.sl-count[b-9xvfa54diz] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    padding-bottom: 4px;
}

@media (max-width: 767.98px) {
    .sl-filter[b-9xvfa54diz],
    .sl-filter.is-date[b-9xvfa54diz] {
        flex: 1 1 calc(50% - 6px);
    }

    .sl-count[b-9xvfa54diz] {
        margin-left: 0;
    }
}

/* Il pallino del colore del tipo di turno. */
.sl-dot[b-9xvfa54diz] {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex: 0 0 10px;
}

/* Un turno da sistemare: la tinta sulle celle (la tabella del modello le vuole trasparenti,
   e la regola comune `tr.tm-needs-action > td` resterebbe sotto). La barra rossa a sinistra
   e la scheda tinta sul telefono restano quelle di app.css. */
.tm-table > tbody > tr.tm-needs-action > td[b-9xvfa54diz] {
    background-color: rgba(220, 53, 69, 0.07);
}

/* ::first-letter vale solo su un blocco. */
.sl-cap[b-9xvfa54diz] {
    display: inline-block;
}

.sl-cap[b-9xvfa54diz]::first-letter {
    text-transform: uppercase;
}

/* I posti nel riepilogo: ruolo a sinistra, chi lo copre a destra. */
.sl-slots > li[b-9xvfa54diz] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 0;
    border-bottom: 1px solid var(--border-subtle);
}

.sl-slots > li:last-child[b-9xvfa54diz] {
    border-bottom: 0;
}

/* Le azioni nel pie' di un pop-up con il pie' proprio: vanno a capo fra di loro e lasciano
   «Chiudi» a destra. Sotto i 576 px il pie' del pop-up non va a capo (app.css), e tre o
   quattro pulsanti con il testo non ci starebbero su una riga di 375 px. */
.zf-actions[b-9xvfa54diz] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
}
/* /Components/Pages/Organization/ShiftTypes.razor.rz.scp.css */
/* I tipi di turno (04-10-2026, modello «lista → pop-up»): il quadratino del colore e i
   posti, nel dettaglio e nella scheda «Posti» del pop-up. Il resto viene da app.css. */

.st-swatch[b-atdxr0bkt0] {
    display: inline-block;
    flex: 0 0 auto;
    width: 12px;
    height: 12px;
    border-radius: 3px;
    border: 1px solid var(--border-subtle);
    background: var(--content-bg);
}

/* ── Il dettaglio: un posto per riga ───────────────────────────────────────── */
.st-slots[b-atdxr0bkt0] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.st-slots > li[b-atdxr0bkt0] {
    padding: 6px 0;
    border-bottom: 1px solid var(--border-subtle);
}

.st-slots > li:last-child[b-atdxr0bkt0] {
    border-bottom: 0;
}

.st-slot-line[b-atdxr0bkt0] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.st-slot-quals[b-atdxr0bkt0] {
    margin-top: 4px;
}

/* ── La scheda «Posti»: un blocco per ruolo ────────────────────────────────── */
.st-slot[b-atdxr0bkt0] {
    padding: 10px 0;
    border-bottom: 1px solid var(--border-subtle);
}

.st-slot-head[b-atdxr0bkt0] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
}

.st-slot-role[b-atdxr0bkt0] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 1 1 160px;
    min-width: 0;
    font-weight: 500;
    color: var(--text-primary);
}

.st-slot-count[b-atdxr0bkt0] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: var(--fs-small);
    color: var(--text-secondary);
}

.st-slot-count > input[b-atdxr0bkt0] {
    width: 72px;
}

.st-slot-req[b-atdxr0bkt0] {
    padding: 0;
    font-size: var(--fs-small);
}

.st-chip-x[b-atdxr0bkt0] {
    font-size: var(--fs-micro);
    padding: 2px;
}

.st-slot-picker[b-atdxr0bkt0] {
    margin-top: 6px;
    max-width: 22rem;
}

.st-add[b-atdxr0bkt0] {
    padding-top: 14px;
}

.st-add-row[b-atdxr0bkt0] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
}

.st-add-picker[b-atdxr0bkt0] {
    flex: 1 1 220px;
    min-width: 0;
    max-width: 22rem;
}

@media (max-width: 767.98px) {
    /* Sul telefono i campi sono a 16 px (app.css): il numero vuole un po' di spazio in piu'. */
    .st-slot-count > input[b-atdxr0bkt0] {
        width: 88px;
    }

    .st-slot-picker[b-atdxr0bkt0],
    .st-add-picker[b-atdxr0bkt0] {
        max-width: none;
        flex-basis: 100%;
    }
}
/* /Components/Pages/Organization/Welcome.razor.rz.scp.css */
/* La sala d'attesa: una scheda corta e centrata, la stessa forma dello stato vuoto di una
   lista (`tm-empty`) — e' la stessa situazione: qui non c'e' ancora niente. */
.welcome[b-3tp0939kkg] {
    max-width: 34rem;
    margin: 48px auto 0;
    padding: 28px 24px;
    text-align: center;
    background: #fff;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
}

.welcome-ico[b-3tp0939kkg] {
    display: block;
    font-size: 28px;
    color: var(--text-light);
    margin-bottom: 8px;
}

.welcome-title[b-3tp0939kkg] {
    margin: 0 0 10px;
    font-size: var(--fs-page);
    font-weight: 600;
    color: var(--text-primary);
}

.welcome-lead[b-3tp0939kkg] {
    margin: 0;
    font-size: var(--fs-md);
    color: var(--text-primary);
}

.welcome-sub[b-3tp0939kkg] {
    margin: 8px 0 0;
    color: var(--text-secondary);
}

@media (max-width: 767.98px) {
    .welcome[b-3tp0939kkg] {
        margin-top: 16px;
        padding: 20px 16px;
    }
}
/* /Components/Shared/AbsenceDialog.razor.rz.scp.css */
/* Il pop-up della dichiarazione di un'assenza (04-10-2026). Le classi del pop-up e dei campi
   (.tm-zoom-*, .tm-field, .tm-check, .tm-note) stanno in app.css: qui solo l'impaginazione. */

/* Due campi affiancati (le date, le ore): due colonne uguali, anche sul telefono — sono
   brevi, e affiancati dicono «da… a…» meglio di uno sotto l'altro. */
.absd-pair[b-rm4hq70lbd] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 12px;
}

/* I ruoli: spunte in colonne, che vanno a capo da sole. */
.absd-roles[b-rm4hq70lbd] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 0 16px;
    margin-bottom: 4px;
}

.absd-role[b-rm4hq70lbd] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.absd-warn[b-rm4hq70lbd] {
    color: var(--text-primary);
    background: rgba(255, 184, 0, 0.18);
    border-radius: var(--radius-sm);
    padding: 1px 6px;
}

.absd-preview[b-rm4hq70lbd] {
    display: flex;
    align-items: flex-start;
    gap: 6px;
}

.absd-preview > i[b-rm4hq70lbd] {
    margin-top: 2px;
    color: var(--accent-primary);
}

@media (max-width: 767.98px) {
    .absd-roles[b-rm4hq70lbd] {
        grid-template-columns: 1fr;
    }

    /* Sul telefono una spunta è un bersaglio da 44 px (§5). */
    .absd-roles .tm-check[b-rm4hq70lbd] {
        min-height: 44px;
        align-items: center;
    }
}
/* /Components/Shared/AccordionSection.razor.rz.scp.css */
/* Il contenitore apribile. Il CSS di NavMenu fa la stessa cosa, ma e' scoped sulla
   sidebar e non e' riusabile da fuori senza copiarlo: qui sta accanto al componente,
   cosi' le sezioni che lo usano non divergono al primo ritocco. */

.acc-head[b-9r6jjrffre] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

/* Il pulsante e' la testata, non un'icona accanto alla testata: chi apre col dito
   prende tutta la riga. min-height 44px e' il minimo tattile della guida di stile. */
.acc-toggle[b-9r6jjrffre] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 12rem;
    min-width: 0;
    min-height: 44px;
    padding: 10px 16px;
    background: transparent;
    border: none;
    text-align: left;
    cursor: pointer;
    color: var(--text-primary);
    transition: background-color 0.15s;
    border-radius: var(--radius-md);
}

    .acc-toggle:hover[b-9r6jjrffre] {
        background-color: var(--row-hover);
    }

    .acc-toggle:focus-visible[b-9r6jjrffre] {
        outline: 2px solid var(--accent-primary);
        outline-offset: -2px;
    }

.acc-chevron[b-9r6jjrffre] {
    font-size: var(--fs-meta);
    width: 12px;
    text-align: center;
    flex-shrink: 0;
    color: var(--text-light);
}

.acc-icon[b-9r6jjrffre] {
    color: var(--text-secondary);
    flex-shrink: 0;
}

.acc-text[b-9r6jjrffre] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.acc-line[b-9r6jjrffre] {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
}

.acc-title[b-9r6jjrffre] {
    font-size: var(--fs-md);
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.3;
}

/* Il dato che rende utile la testata senza aprirla. */
.acc-summary[b-9r6jjrffre] {
    font-size: var(--fs-meta);
    color: var(--text-light);
    font-weight: 400;
    white-space: nowrap;
}

.acc-subtitle[b-9r6jjrffre] {
    font-size: var(--fs-meta);
    color: var(--text-secondary);
    font-weight: 400;
    line-height: 1.4;
}

.acc-aside[b-9r6jjrffre] {
    flex: 0 0 auto;
    padding: 0 16px 0 8px;
}

/* Il contenuto arriva dalla pagina che ospita il componente, quindi porta il suo scope
   e non il nostro: senza ::deep il link della testata resterebbe senza altezza tattile. */
.acc-aside[b-9r6jjrffre]  a {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 44px;
    font-size: var(--fs-meta);
    white-space: nowrap;
    text-decoration: none;
}

    .acc-aside[b-9r6jjrffre]  a:hover {
        text-decoration: underline;
    }

.acc-body.is-collapsed[b-9r6jjrffre] {
    display: none;
}

.acc-content[b-9r6jjrffre] {
    padding: 4px 16px 16px 16px;
    border-top: 1px solid var(--border-subtle);
    margin: 0 16px;
    padding-left: 0;
    padding-right: 0;
}

@media (max-width: 767.98px) {
    .acc-toggle[b-9r6jjrffre] {
        padding-left: 12px;
        padding-right: 12px;
    }

    /* Sotto i 768 px la testata va a capo: il link finisce su una riga sua e va
       riallineato al titolo, altrimenti resta appeso al bordo destro. */
    .acc-aside[b-9r6jjrffre] {
        padding: 0 12px 8px 32px;
    }

    .acc-content[b-9r6jjrffre] {
        margin: 0 12px;
    }
}
/* /Components/Shared/AvailabilityDialog.razor.rz.scp.css */
/* Il modulo della disponibilità (04-10-2026): ripetizione, orari, ruoli con il loro
   gradimento. Le classi dei campi (.tm-field, .tm-label, .tm-check) stanno in app.css. */

.avd-kind[b-c5l0krcyo4] {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
}

.avd-grid[b-c5l0krcyo4] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 12px;
}

/* Un ruolo per riga: la spunta a sinistra, il suo gradimento a destra quando è spuntato. */
.avd-roles[b-c5l0krcyo4] {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
}

.avd-role[b-c5l0krcyo4] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 12px;
    min-height: 40px;
    padding: 2px 10px;
}

.avd-role + .avd-role[b-c5l0krcyo4] {
    border-top: 1px solid var(--border-subtle);
}

.avd-role.is-on[b-c5l0krcyo4] {
    background: var(--row-hover);
}

.avd-role-name[b-c5l0krcyo4] {
    flex: 1 1 auto;
    min-width: 0;
    align-items: center;
}

.avd-role-name > input[b-c5l0krcyo4] {
    margin-top: 0;
}

.avd-role-rate[b-c5l0krcyo4] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.avd-rate-label[b-c5l0krcyo4] {
    color: var(--text-light);
    font-size: var(--fs-meta);
}

@media (max-width: 767.98px) {
    .avd-grid[b-c5l0krcyo4] {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    /* Giorno (o data) su una riga sua, gli orari affiancati sotto. */
    .avd-grid > .tm-field:first-child[b-c5l0krcyo4] {
        grid-column: 1 / -1;
    }

    .avd-role[b-c5l0krcyo4] {
        min-height: 44px;
    }

    .avd-role-rate[b-c5l0krcyo4] {
        flex: 1 1 100%;
        justify-content: space-between;
        margin-left: 0;
        padding-bottom: 6px;
    }
}
/* /Components/Shared/AvatarStack.razor.rz.scp.css */
.avatar-stack[b-pmshav1mep] {
    flex-direction: row-reverse;
}

.avatar-circle[b-pmshav1mep] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: #6c757d;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #fff;
    margin-left: -8px;
}

.avatar-circle:last-child[b-pmshav1mep] {
    margin-left: 0;
}

.avatar-overflow[b-pmshav1mep] {
    background-color: #adb5bd;
    font-size: 0.65rem;
}
/* /Components/Shared/KpiStrip.razor.rz.scp.css */
/* La striscia dei numeri: una scatola bianca sola, celle separate da un filetto. Sul
   desktop le celle si dividono la riga e vanno a capo da sole oltre le quattro-cinque; sul
   telefono sono due per riga, larghe uguali (griglia 1fr, non flex: un figlio flex nasce
   con `min-width: auto` e l'etichetta piu' lunga si prenderebbe piu' spazio, regola 92). */

.kpi-strip[b-bl2ru1r9la] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    background: #fff;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    overflow: hidden;
    margin-bottom: 16px;
}

.kpi-cell[b-bl2ru1r9la] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    padding: 10px 14px;
    /* Il filetto lo porta ogni cella a sinistra e in alto: il bordo della scatola copre
       quello in eccesso (margine negativo), cosi' non serve sapere quante celle stanno su
       una riga. */
    border-left: 1px solid var(--border-subtle);
    border-top: 1px solid var(--border-subtle);
    margin-left: -1px;
    margin-top: -1px;
}

.kpi-link[b-bl2ru1r9la] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    color: inherit;
    text-decoration: none;
    min-width: 0;
}

.kpi-cell.is-link:hover[b-bl2ru1r9la] {
    background: var(--row-hover);
}

/* Tutta la cella e' il bersaglio del link (lo pseudo-elemento la copre); la «i» sta sopra,
   cosi' toccarla apre la spiegazione e non la pagina. */
.kpi-link[b-bl2ru1r9la]::after {
    content: '';
    position: absolute;
    inset: 0;
}

.kpi-link:focus-visible[b-bl2ru1r9la] {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
    border-radius: 2px;
}

.kpi-value[b-bl2ru1r9la] {
    font-size: var(--fs-page);
    font-weight: 600;
    line-height: 1.2;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

.kpi-value.is-danger[b-bl2ru1r9la] { color: var(--accent-danger); }
.kpi-value.is-warning[b-bl2ru1r9la] { color: #9A6B00; }
.kpi-value.is-success[b-bl2ru1r9la] { color: #3F8F27; }

.kpi-label[b-bl2ru1r9la] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    font-size: var(--fs-meta);
    color: var(--text-secondary);
}

.kpi-label > span[b-bl2ru1r9la] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kpi-label > .bi[b-bl2ru1r9la] {
    color: var(--text-light);
    flex: 0 0 auto;
}

/* La «i» in alto a destra della cella, fuori dal link. */
.kpi-cell[b-bl2ru1r9la]  .kpi-tip {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 1;
}

@media (max-width: 767.98px) {
    .kpi-strip[b-bl2ru1r9la] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .kpi-cell[b-bl2ru1r9la] {
        padding: 10px 12px;
    }

    /* Una cella che e' un link e' un bersaglio: almeno 44 px. */
    .kpi-link[b-bl2ru1r9la] {
        min-height: 44px;
    }
}

/* Spazio per la «i», che sta sopra l'angolo: l'etichetta si tronca prima di finirci sotto. */
.kpi-cell.has-tip[b-bl2ru1r9la] {
    padding-right: 30px;
}
/* /Components/Shared/NotificationActionHost.razor.rz.scp.css */
/* Il testo intero di una notifica nel pop-up generico: va a capo dove la notifica va a capo. */
.nah-text[b-lo486l1qdx] {
    white-space: pre-line;
    overflow-wrap: anywhere;
    color: var(--text-primary);
    font-size: var(--fs-body);
    line-height: 1.5;
}
/* /Components/Shared/PlatformOverview.razor.rz.scp.css */
/* La testata della striscia della piattaforma: piccola, perche' sopra c'e' gia' il titolo
   della pagina e sotto la striscia dice da se' che cosa conta. */
.po-head[b-49ns741eqe] {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0 0 6px;
}

.po-title[b-49ns741eqe] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: var(--fs-meta);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-light);
}
/* /Components/Shared/RequestDialog.razor.rz.scp.css */
/* Il pop-up di una richiesta di disponibilità (04-10-2026). */

/* La data a parole, con la maiuscola: ::first-letter vale solo su un blocco. */
.rq-cap[b-wzd0qjbwm4] {
    display: inline-block;
}

.rq-cap[b-wzd0qjbwm4]::first-letter {
    text-transform: uppercase;
}

/* Chi altro c'è: un elenco senza puntini, una persona per riga. */
.rq-others[b-wzd0qjbwm4] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.rq-others > li[b-wzd0qjbwm4] {
    line-height: 1.5;
}

/* «Ci sono solo in parte»: i due orari affiancati, anche sul telefono (due campi corti). */
.rq-part[b-wzd0qjbwm4] {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border-subtle);
}

.rq-part-times[b-wzd0qjbwm4] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 6px;
}
/* /Components/Shared/RoleIconPicker.razor.rz.scp.css */
.role-icon-picker[b-2cfjnqydqf] {
    min-width: 0;
}

.role-icon-preview[b-2cfjnqydqf] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    /* Il minimo che vale su tablet: qui si tocca con il dito. */
    min-height: 44px;
    max-width: 100%;
}

.role-icon-preview-glyph[b-2cfjnqydqf] {
    font-size: var(--fs-lg);
    line-height: 1;
}

.role-icon-preview-label[b-2cfjnqydqf] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--fs-small);
}

.role-icon-preview-caret[b-2cfjnqydqf] {
    font-size: var(--fs-meta);
    opacity: 0.6;
}

.role-icon-grid[b-2cfjnqydqf] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
    padding: 6px;
    /* Cinquanta simboli non stanno in un modulo senza mangiarselo: la griglia scorre
       dentro di se', e il resto della scheda resta dov'era. */
    max-height: 220px;
    overflow-y: auto;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: #fff;
}

.role-icon-cell[b-2cfjnqydqf] {
    /* 44x44: la regola dei bersagli tattili di questo progetto. */
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-lg);
    color: var(--text-secondary);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.role-icon-cell:hover[b-2cfjnqydqf] {
    background: var(--row-hover);
}

.role-icon-cell.is-selected[b-2cfjnqydqf] {
    color: #fff;
    background: var(--accent-primary);
    border-color: var(--accent-primary);
}
/* /Components/Shared/ShiftAbsenceDialog.razor.rz.scp.css */
/* Segnala assenza da un proprio turno (04-10-2026). */

/* La data a parole, con la maiuscola: ::first-letter vale solo su un blocco. */
.sad-cap[b-t3kqmm92e0] {
    display: inline-block;
}

.sad-cap[b-t3kqmm92e0]::first-letter {
    text-transform: uppercase;
}
/* /Components/Shared/ShiftForm.razor.rz.scp.css */
/* Il modulo del turno dentro il pop-up (04-10-2026). Stili solo di questo componente: il
   markup scritto qui — compreso quello passato a ZoomDialog come ChildContent — porta
   l'attributo di isolamento, e queste regole non escono di qui. */

/* Dentro il pop-up la testata della tabella non deve stare 48 px sotto il bordo: quello e'
   lo spazio della testata dell'applicazione, che qui sotto non c'e'. Il corpo del pop-up
   scorre da se', e la testata si ferma in cima al corpo. */
table.sf-table > thead > tr > th[b-pkmeuhkmfr] {
    top: 0;
}

/* Le qualifiche richieste da un posto: piccole e grigie, una per riga. */
.sf-quals[b-pkmeuhkmfr] {
    margin-top: 2px;
    font-size: var(--fs-meta);
    font-weight: 400;
    color: var(--text-secondary);
}

/* La ripetizione riletta in parole, e il turno che scavalca la mezzanotte. */
.sf-readback[b-pkmeuhkmfr] {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-size: var(--fs-small);
    color: var(--text-secondary);
}

/* Il calendario del mese accanto alle date: un riquadro con il filetto, non una card. */
.sf-cal[b-pkmeuhkmfr] {
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: #fff;
}

.sf-cal-head[b-pkmeuhkmfr] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 8px;
    border-bottom: 1px solid var(--border-subtle);
}

.sf-cal-month[b-pkmeuhkmfr] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: 500;
    text-transform: capitalize;
    font-size: var(--fs-body);
}

/* Chi copre i posti: un posto per riga, separati da un filetto. */
.sf-cover-row[b-pkmeuhkmfr] {
    padding: 10px 0;
    border-bottom: 1px solid var(--border-subtle);
}

.sf-cover-row:last-child[b-pkmeuhkmfr] {
    border-bottom: 0;
}
/* /Components/Shared/VolunteerCertificationList.razor.rz.scp.css */
/* Dentro un pop-up l'intestazione si ferma in cima al corpo che scorre, non 48 px sotto. */
.vcl-in-zoom > thead > tr > th[b-fc83v6wukd] {
    top: 0;
}

/* L'archivio: un'intestazione che si apre, sotto la tabella di quello che vale. */
.vcl-archive[b-fc83v6wukd] {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 16px 0 8px;
}

.vcl-archive-toggle[b-fc83v6wukd] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    padding: 0;
    border: 0;
    background: none;
    font-weight: 500;
    color: var(--text-secondary);
}

.vcl-archive-toggle:focus-visible[b-fc83v6wukd] {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Lo storico si legge in grigio: non vale piu'. */
.vcl-archived > td[b-fc83v6wukd] {
    color: var(--text-secondary);
}

@media (max-width: 767.98px) {
    .vcl-archive-toggle[b-fc83v6wukd] {
        min-height: 44px;
    }
}
/* /Components/Shared/VolunteerCertificationZoom.razor.rz.scp.css */
/* Rilascio e scadenza, ente e sede: due coppie che si leggono insieme. Sul telefono una
   colonna sola (form a una colonna, 1_INTERFACE §5). */
.vcz-grid[b-x4quksb3o8] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 12px;
}

@media (max-width: 767.98px) {
    .vcz-grid[b-x4quksb3o8] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Shared/VolunteerQualificationsPanel.razor.rz.scp.css */
/* Dentro il pop-up l'intestazione della tabella sta ferma in cima al corpo che scorre, non
   48 px sotto (la testata dell'applicazione, che qui e' coperta). */
.vq-table > thead > tr > th[b-s7d4qy33a4] {
    top: 0;
}

/* Data e scelta della qualifica sulla stessa riga: prima la data, poi il picker che agisce. */
.vq-add[b-s7d4qy33a4] {
    display: grid;
    grid-template-columns: minmax(150px, 1fr) 2fr;
    gap: 12px;
    align-items: end;
}

@media (max-width: 767.98px) {
    .vq-add[b-s7d4qy33a4] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Shared/VolunteerRolesPanel.razor.rz.scp.css */
/* Dentro il pop-up l'intestazione della tabella sta ferma in cima al corpo che scorre, non
   48 px sotto (la testata dell'applicazione, che qui e' coperta). */
.vr-table > thead > tr > th[b-6t9y118nvk] {
    top: 0;
}

/* Scadenza e scelta del ruolo sulla stessa riga: prima la data, poi il picker che agisce. */
.vr-add[b-6t9y118nvk] {
    display: grid;
    grid-template-columns: minmax(150px, 1fr) 2fr;
    gap: 12px;
    align-items: end;
}

@media (max-width: 767.98px) {
    .vr-add[b-6t9y118nvk] {
        grid-template-columns: 1fr;
    }
}