/* ═══════════════════════════════════════════════════════════════════════════
   BOTTOM SHEET — NON MODIFICARE
   Fa parte di uicore/core: al prossimo riallineamento questo file viene
   sovrascritto.
   ═══════════════════════════════════════════════════════════════════════════

   Il pannello che sale dal basso, come nelle app native. Nel kit è un
   componente centrale, non un accessorio: lo usano la navigazione mobile e la
   modalità `sheet` delle tabelle, che è quella predefinita.

   Su schermi larghi diventa un modal centrato: uno sheet ancorato in basso su
   un monitor da 27" costringe l'occhio in fondo allo schermo per niente.
   ═══════════════════════════════════════════════════════════════════════════ */

.ui-sheet-backdrop {
    position: fixed;
    inset: 0;
    z-index: var(--ui-z-backdrop);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--ui-duration-base) var(--ui-ease);
}
.ui-sheet-backdrop.is-open {
    opacity: 1;
    pointer-events: auto;
}

.ui-sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--ui-z-sheet);
    max-height: min(86vh, 720px);
    display: flex;
    flex-direction: column;
    border-radius: var(--ui-radius-xl) var(--ui-radius-xl) 0 0;
    /* Fuori schermo di default. `visibility` evita che resti raggiungibile
       da tastiera mentre è chiuso: senza, il Tab ci finisce dentro. */
    transform: translateY(100%);
    visibility: hidden;
    transition:
        transform var(--ui-duration-slow) var(--ui-ease-sheet),
        visibility 0s linear var(--ui-duration-slow);
}
.ui-sheet.is-open {
    transform: translateY(0);
    visibility: visible;
    transition:
        transform var(--ui-duration-slow) var(--ui-ease-sheet),
        visibility 0s;
}

/* Mentre il dito trascina, il pannello deve seguirlo senza ritardo:
   qualunque transizione qui si percepisce come elastico rotto. */
.ui-sheet.is-dragging {
    transition: none;
}

/* La maniglia non è decorazione: è il segnale che il pannello si trascina.
   Senza, nessuno prova a farlo. */
.ui-sheet-grip {
    flex-shrink: 0;
    padding: 10px 0 6px;
    cursor: grab;
    touch-action: none;
}
.ui-sheet-grip::before {
    content: "";
    display: block;
    width: 42px;
    height: 4px;
    margin: 0 auto;
    border-radius: var(--ui-radius-pill);
    background: currentColor;
    opacity: .28;
}
.ui-sheet-grip:active { cursor: grabbing; }

.ui-sheet-head {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: var(--ui-space-3);
    padding: 0 var(--ui-space-5) var(--ui-space-3);
}
.ui-sheet-title {
    font-family: var(--ui-font-display);
    font-weight: var(--ui-weight-bold);
    font-size: var(--ui-text-lg);
    letter-spacing: var(--ui-tracking-tight);
    margin: 0;
}
.ui-sheet-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: var(--ui-space-1);
}
.ui-sheet-action {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--ui-radius-sm);
    background: transparent;
    color: var(--ui-ink-muted);
    font-size: var(--ui-text-sm);
    cursor: pointer;
    transition: background var(--ui-duration-fast) var(--ui-ease),
                border-color var(--ui-duration-fast) var(--ui-ease),
                color var(--ui-duration-fast) var(--ui-ease);
}
.ui-sheet-action:hover,
.ui-sheet-action.is-active {
    border-color: color-mix(in oklab, var(--ui-brand) 40%, transparent);
    background: color-mix(in oklab, var(--ui-brand) 12%, transparent);
    color: var(--ui-brand);
}

.ui-sheet-close {
    width: var(--ui-touch-target);
    height: var(--ui-touch-target);
    border: none;
    background: transparent;
    color: inherit;
    border-radius: var(--ui-radius-pill);
    opacity: .6;
}
.ui-sheet-close:hover { opacity: 1; }

.ui-sheet-body {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0 var(--ui-space-5);
    /* Spazio per la tacca inferiore dei telefoni senza tasto fisico. */
    padding-bottom: calc(var(--ui-space-6) + env(safe-area-inset-bottom, 0px));
}

/* ── Elenco di voci ────────────────────────────────────────────────────────
   Il contenuto più frequente: le voci di una sezione di navigazione o le
   azioni su una riga. */
.ui-sheet-item {
    display: flex;
    align-items: center;
    gap: var(--ui-space-3);
    width: 100%;
    min-height: var(--ui-touch-target);
    padding: var(--ui-space-3);
    border: none;
    border-radius: var(--ui-radius-sm);
    background: transparent;
    color: inherit;
    text-align: left;
    text-decoration: none;
    font-size: var(--ui-text-md);
    font-weight: var(--ui-weight-medium);
    transition: background var(--ui-duration-fast) var(--ui-ease);
}
.ui-sheet-item:hover,
.ui-sheet-item:focus-visible {
    background: color-mix(in oklab, var(--ui-ink) 7%, transparent);
    color: inherit;
}
.ui-sheet-item.is-active {
    background: var(--bs-primary-bg-subtle);
    color: var(--bs-primary-text-emphasis);
}
.ui-sheet-item-icon {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: var(--ui-radius-xs);
    background: color-mix(in oklab, var(--ui-ink) 6%, transparent);
}
.ui-sheet-item.is-active .ui-sheet-item-icon {
    background: var(--ui-brand);
    color: var(--ui-brand-contrast);
}
.ui-sheet-item-sub {
    display: block;
    font-size: var(--ui-text-xs);
    font-weight: var(--ui-weight-normal);
    opacity: .6;
}

/* ── Da tablet in su: modal centrato ──────────────────────────────────────
   Sopra i 768px lo sheet smette di essere uno sheet. Il gesto di
   trascinamento resta ma conta poco: lì si usa il mouse. */
@media (min-width: 768px) {
    .ui-sheet {
        left: 50%;
        right: auto;
        bottom: auto;
        top: 50%;
        width: min(520px, calc(100vw - 48px));
        border-radius: var(--ui-radius-xl);
        transform: translate(-50%, -46%) scale(.97);
        opacity: 0;
        transition:
            transform var(--ui-duration-base) var(--ui-ease),
            opacity var(--ui-duration-base) var(--ui-ease),
            visibility 0s linear var(--ui-duration-base);
    }
    .ui-sheet.is-open {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
    .ui-sheet-grip { display: none; }
    .ui-sheet-head { padding-top: var(--ui-space-5); }
}

/* ── Variante drawer: pannello laterale ───────────────────────────────────
   Per il dettaglio di un elemento tenendo la lista visibile accanto, e per i
   pannelli lunghi come il centro notifiche. Su mobile resta uno sheet: un
   pannello laterale su uno schermo stretto coprirebbe tutto lo stesso, ma con
   un'animazione meno naturale.

   ┌─ PERCHE' SI SPOSTA DI 24px E NON DI TUTTA LA SUA LARGHEZZA ─────────────┐
   │ Il pannello è di vetro: ha un `backdrop-filter` che sfoca ciò che sta   │
   │ sotto. Farlo entrare da fuori schermo obbliga il browser a ricalcolare  │
   │ quella sfocatura su una fascia larga 440px a ogni fotogramma, e su un   │
   │ portatile normale l'animazione perde colpi — si vede a scatti.          │
   │                                                                          │
   │ Con uno scorrimento corto più la dissolvenza il movimento si legge lo   │
   │ stesso (l'occhio prende la direzione dai primi pixel), ma la fascia da  │
   │ ridisegnare è dieci volte più stretta. È la stessa scelta del pannello  │
   │ "Centro attività" del frontend cliente, da cui è ripresa.               │
   └─────────────────────────────────────────────────────────────────────────┘

   Spigoli vivi: il pannello è incollato a tre bordi dello schermo, e un
   angolo arrotondato contro il bordo del monitor lascia vedere uno spicchio
   di pagina che sembra un errore di allineamento. Gli angoli tondi restano
   dove il pannello è staccato dai bordi: sheet mobile e modal centrato. */
@media (min-width: 768px) {
    .ui-sheet.is-drawer {
        left: auto;
        right: 0;
        top: 0;
        bottom: 0;
        width: min(440px, 92vw);
        max-height: none;
        border-radius: 0;
        /* Ombra solo verso sinistra: gli altri tre lati sono fuori campo. */
        box-shadow: -18px 0 48px rgba(20, 14, 40, .18);
        transform: translateX(24px);
        opacity: 0;
        transition:
            transform var(--ui-duration-base) var(--ui-ease),
            opacity var(--ui-duration-base) var(--ui-ease),
            visibility 0s linear var(--ui-duration-base);
    }
    .ui-sheet.is-drawer.is-open {
        transform: translateX(0);
        opacity: 1;
        visibility: visible;
        transition:
            transform var(--ui-duration-base) var(--ui-ease),
            opacity var(--ui-duration-base) var(--ui-ease),
            visibility 0s;
    }
    .ui-sheet.is-drawer .ui-sheet-grip { display: none; }
    /* Il bordo del vetro serve solo dove il pannello confina con la pagina. */
    .ui-sheet.is-drawer::after {
        border-width: 0 0 0 1px;
        box-shadow: none;
    }
}

/* ── Corpo a filo ─────────────────────────────────────────────────────────
   Toglie il margine laterale al contenuto. Serve a chi disegna barre che
   devono arrivare ai bordi — filtri, righe di azioni, separatori di data:
   con il margine standard resterebbero rientrate e si vedrebbe la striscia
   di sfondo ai lati di ogni riga. */
.ui-sheet-body.is-flush {
    padding-left: 0;
    padding-right: 0;
}

/* ── Corpo pieno ──────────────────────────────────────────────────────────
   Il corpo smette di scorrere e diventa un contenitore in colonna: dentro,
   un solo pezzo scorre e il resto (filtri, barre di azioni) resta fermo.

   L'alternativa sarebbe rendere le barre `sticky` dentro il corpo che
   scorre, ma sopra un pannello di vetro una barra semitrasparente appoggiata
   sul contenuto crea una fascia più scura che si vede benissimo — è già
   successo con la ricerca del select. */
.ui-sheet-body.is-fill {
    flex: 1 1 auto;
    /* Senza, un elemento flex non scende sotto la propria altezza naturale
       e il contenitore sfonda invece di far scorrere il figlio. */
    min-height: 0;
    display: flex;
    flex-direction: column;
    /* `visible` e non `hidden`: una tendina aperta da una barra in cima —
       il filtro delle notifiche, per dire — verrebbe tagliata al primo
       pixel fuori dal corpo. Niente esce comunque: le barre hanno altezza
       fissa e l'unico pezzo che cresce ha il suo `overflow` e `min-height:0`. */
    overflow: visible;
    padding-bottom: 0;
}