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

   Su desktop è sempre una tabella. Sotto i 768px cambia forma secondo la
   modalità scelta — sono le quattro confrontate nei mockup della Fase 0:

     sheet     riga compatta, il tocco apre il pannello dal basso  (PREDEFINITA)
     priority  colonne principali + riga che si espande sotto
     cards     una card per riga, con le etichette accanto ai valori
     scroll    la tabella resta tale e scorre di lato, prima colonna fissa

   La modalità si sceglie per pagina: una lista da scorrere spesso vuole
   `sheet`, cinque conti bancari stanno meglio in `cards`.
   ═══════════════════════════════════════════════════════════════════════════ */

.ui-list {
    background: var(--ui-panel);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--ui-radius-lg);
    box-shadow: var(--ui-shadow-md);
    overflow: hidden;
}

/* ── Tabella (desktop, e modalità scroll su mobile) ───────────────────────── */
.ui-list-table { width: 100%; border-collapse: collapse; }

.ui-list-table th {
    padding: var(--ui-space-3) var(--ui-space-4);
    text-align: left;
    font-size: var(--ui-text-2xs);
    text-transform: uppercase;
    letter-spacing: var(--ui-tracking-wide);
    font-weight: var(--ui-weight-bold);
    color: var(--ui-ink-muted);
    border-bottom: 1px solid var(--bs-border-color);
    white-space: nowrap;
}
.ui-list-table td {
    padding: var(--ui-space-3) var(--ui-space-4);
    font-size: var(--ui-text-sm);
    border-bottom: 1px solid var(--bs-border-color);
    vertical-align: middle;
}
.ui-list-table tr:last-child td { border-bottom: none; }
.ui-list-table tbody tr { transition: background var(--ui-duration-fast) var(--ui-ease); }
.ui-list-table tbody tr:hover { background: color-mix(in oklab, var(--ui-ink) 4%, transparent); }
.ui-list-table tbody tr.is-clickable { cursor: pointer; }

/* I numeri a destra e a larghezza fissa: incolonnati si confrontano a
   colpo d'occhio, e un valore che cambia non sposta la riga. */
.ui-list-num { text-align: right; font-variant-numeric: tabular-nums; font-weight: var(--ui-weight-semibold); }
.ui-list-strong { font-weight: var(--ui-weight-semibold); }

/* ── Riga compatta (modalità sheet e priority) ────────────────────────────── */
.ui-list-row {
    display: flex;
    align-items: center;
    gap: var(--ui-space-3);
    width: 100%;
    padding: var(--ui-space-3) var(--ui-space-4);
    border: none;
    border-bottom: 1px solid var(--bs-border-color);
    background: transparent;
    color: inherit;
    text-align: left;
}
.ui-list-row:last-of-type { border-bottom: none; }
.ui-list-row:hover { background: color-mix(in oklab, var(--ui-ink) 4%, transparent); }

.ui-list-main { flex: 1; min-width: 0; }
.ui-list-primary {
    font-weight: var(--ui-weight-semibold);
    font-size: var(--ui-text-sm);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ui-list-secondary {
    font-size: var(--ui-text-xs);
    color: var(--ui-ink-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ui-list-meta {
    flex-shrink: 0;
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
}
.ui-list-amount { font-variant-numeric: tabular-nums; font-weight: var(--ui-weight-bold); font-size: var(--ui-text-sm); }
.ui-list-chev { flex-shrink: 0; color: var(--ui-ink-muted); transition: transform var(--ui-duration-base) var(--ui-ease); }
.ui-list-row.is-open .ui-list-chev { transform: rotate(180deg); }

/* Dettaglio che si apre sotto la riga (modalità priority) */
.ui-list-more {
    display: none;
    padding: 0 var(--ui-space-4) var(--ui-space-4);
    border-bottom: 1px solid var(--bs-border-color);
}
.ui-list-row.is-open + .ui-list-more { display: block; }
.ui-list-pair {
    display: flex;
    justify-content: space-between;
    gap: var(--ui-space-3);
    padding: 5px 0;
    font-size: var(--ui-text-sm);
}
.ui-list-pair-key { color: var(--ui-ink-muted); }
.ui-list-pair-val { font-weight: var(--ui-weight-medium); text-align: right; }

/* ── Card (modalità cards) ────────────────────────────────────────────────── */
.ui-list-card {
    display: block;
    width: 100%;
    text-align: left;
    padding: var(--ui-space-4);
    border: none;
    border-bottom: 1px solid var(--bs-border-color);
    background: transparent;
    color: inherit;
}
.ui-list-card:last-child { border-bottom: none; }
.ui-list-card-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--ui-space-3);
    margin-bottom: var(--ui-space-2);
}

/* ── Scorrimento laterale (modalità scroll) ───────────────────────────────── */
.ui-list-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ui-list-scroll .ui-list-table { white-space: nowrap; }
.ui-list-scroll .ui-list-table th:first-child,
.ui-list-scroll .ui-list-table td:first-child {
    position: sticky;
    left: 0;
    background: var(--ui-panel);
    z-index: 1;
    /* L'ombra dice che sotto ci passa altro: senza, la colonna fissa sembra
       staccata dal resto invece che sovrapposta. */
    box-shadow: 6px 0 8px -6px rgba(0, 0, 0, .18);
}
.ui-list-hint {
    padding: var(--ui-space-2) var(--ui-space-4);
    font-size: var(--ui-text-2xs);
    color: var(--ui-ink-muted);
    border-bottom: 1px solid var(--bs-border-color);
}

/* ── Quale forma si vede, e quando ────────────────────────────────────────── */
.ui-list-mobile { display: none; }

@media (max-width: 767.98px) {
    /* Nelle modalità compatte la tabella sparisce del tutto: costruirla e
       nasconderla costa comunque il disegno di centinaia di celle. Il
       componente infatti ne genera una sola delle due. */
    .ui-list[data-mode="sheet"] .ui-list-desktop,
    .ui-list[data-mode="priority"] .ui-list-desktop,
    .ui-list[data-mode="cards"] .ui-list-desktop { display: none; }

    .ui-list[data-mode="sheet"] .ui-list-mobile,
    .ui-list[data-mode="priority"] .ui-list-mobile,
    .ui-list[data-mode="cards"] .ui-list-mobile { display: block; }

    /* In modalità scroll resta la tabella, dentro un contenitore che scorre. */
    .ui-list[data-mode="scroll"] .ui-list-desktop { overflow-x: auto; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   TABELLA DENSA — ordinamento, selezione, pagine
   Tutto spento finché non lo si chiede: una pagina che non usa queste cose
   non vede nessuna differenza.
   ═══════════════════════════════════════════════════════════════════════════ */

/* L'intestazione ordinabile è un pulsante vero e non un `<th>` con un
   `onclick`: così ci si arriva col Tab e si aziona con Invio, senza
   aggiungere una riga di JavaScript. */
.ui-list-sort {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0;
    border: none;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
    white-space: nowrap;
}
.ui-list-sort:hover { color: var(--ui-brand); }
.ui-list-sort i { font-size: var(--ui-text-xs); }
.ui-list-num .ui-list-sort { flex-direction: row-reverse; }

/* La colonna delle caselle: stretta quanto basta e centrata. `width: 1%`
   fa collassare la cella al contenuto — è il modo con cui una tabella
   HTML dice "questa colonna prende solo lo spazio che serve". */
.ui-list-check-col {
    width: 1%;
    padding-right: 0 !important;
    text-align: center;
    vertical-align: middle;
}
.ui-list-check,
.ui-list-check-all { cursor: pointer; margin: 0; }

.ui-list-table tbody tr.is-selected {
    background: color-mix(in oklab, var(--ui-brand) 8%, transparent);
}

/* Riga compatta con selezione: la casella sta fuori dal pulsante, non
   dentro. Dentro, ogni tocco sulla riga la cambierebbe — e la riga si tocca
   per aprire il dettaglio, non per selezionare. */
.ui-list-row-wrap {
    display: flex;
    align-items: center;
    gap: var(--ui-space-2);
    border-radius: var(--ui-radius-sm);
}
.ui-list-row-wrap.is-selected {
    background: color-mix(in oklab, var(--ui-brand) 8%, transparent);
}
.ui-list-row-wrap > .ui-list-row { flex: 1 1 auto; min-width: 0; }
.ui-list-row-check {
    flex-shrink: 0;
    width: var(--ui-touch-target);
    height: var(--ui-touch-target);
    display: grid;
    place-items: center;
}

/* ── Piede ──────────────────────────────────────────────────────────────── */
.ui-list-pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ui-space-3);
    padding: var(--ui-space-3) var(--ui-space-1);
    border-top: 1px solid var(--bs-border-color);
    color: var(--ui-ink-muted);
    font-size: var(--ui-text-xs);
}
.ui-list-pager-count { font-variant-numeric: tabular-nums; }
.ui-list-pager-nav {
    display: flex;
    align-items: center;
    gap: var(--ui-space-2);
}
.ui-list-pager-pos {
    min-width: 56px;
    text-align: center;
    font-variant-numeric: tabular-nums;
    font-weight: var(--ui-weight-semibold);
}
.ui-list-page {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--ui-radius-sm);
    background: transparent;
    color: inherit;
    cursor: pointer;
    transition: background var(--ui-duration-fast) var(--ui-ease),
                border-color var(--ui-duration-fast) var(--ui-ease);
}
.ui-list-page:hover:not(:disabled) {
    border-color: color-mix(in oklab, var(--ui-brand) 40%, transparent);
    background: color-mix(in oklab, var(--ui-brand) 10%, transparent);
    color: var(--ui-brand);
}
.ui-list-page:disabled { opacity: .35; cursor: default; }