/* =============================================================
   Classi condivise dalle pagine lista
   -------------------------------------------------------------
   Il CSS scoped di Blazor non attraversa i componenti: queste regole
   erano copiate identiche in più .razor.css. Vivono qui una volta sola.

   .el-*      celle e stati vuoti  — DipendenteList, CorsoList, PercorsoList
   .fl-*      celle e stati vuoti  — ClienteList, UsersList
   .pl-stat*  griglia KPI in testa — ProdottoList, CorsoList

   Le varianti specifiche di una singola pagina (media query, override di
   colonne, misure diverse) restano nel rispettivo .razor.css: il bundle
   scoped è caricato dopo questo file e ha specificità maggiore, quindi vince.
   ============================================================= */

/* ── Celle lista (el-*) ─────────────────────────────────────── */

.el-name-cell {
    display: flex;
    align-items: center;
    gap: 12px;
}

.el-name-body {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.el-fullname {
    font-weight: 600;
    font-size: 13.5px;
    color: var(--its-text);
}

.el-date {
    font-size: 13px;
    color: var(--its-text-muted);
}

.el-empty {
    color: var(--its-text-muted);
    opacity: .5;
}

.el-row-actions {
    display: flex;
    align-items: center;
    justify-content: center;
}

.el-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 48px 24px;
    color: var(--its-text-muted);
}

.el-empty-title {
    font-family: var(--its-serif);
    font-size: 18px;
    color: var(--its-text);
}

.el-empty-sub {
    font-size: 13px;
}

.el-loading {
    padding: 32px;
    display: flex;
    justify-content: center;
}

/* ── Celle lista (fl-*) ─────────────────────────────────────── */

.fl-name-cell {
    display: flex;
    align-items: center;
    gap: 12px;
}

.fl-legal-name {
    display: block;
    font-weight: 550;
    font-size: 13px;
    color: var(--its-text);
}

.fl-empty-val {
    color: var(--its-border-strong);
}

.fl-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 56px 24px;
    gap: 6px;
}

.fl-loading {
    display: flex;
    justify-content: center;
    padding: 40px;
}

/* ── Griglia KPI in testa alla lista (pl-stat*) ─────────────── */

.pl-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.pl-stat {
    background: var(--its-surface);
    border: 1px solid var(--its-border);
    border-radius: var(--its-radius);
    padding: 18px 20px;
    position: relative;
    overflow: hidden;
}

.pl-stat::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: var(--its-gold);
    opacity: 0;
    transition: opacity .18s ease;
}

.pl-stat:hover::before {
    opacity: 1;
}

.pl-stat__label {
    font-size: 10.5px;
    letter-spacing: .12em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--its-text-muted);
    margin-bottom: 6px;
}

.pl-stat__value {
    font-family: var(--its-serif);
    font-size: 34px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: -.015em;
    color: var(--its-text);
    font-variant-numeric: lining-nums tabular-nums;
    font-feature-settings: "lnum" 1, "tnum" 1;
}

.pl-stat__value sup {
    font-family: var(--its-sans);
    font-size: .42em;
    color: var(--its-text-dim);
    vertical-align: super;
    margin-left: 2px;
}

/* ─── Barra filtri su due righe (ClienteList, 2026-09-21) ──────────────
   Riga 1: toggle colonne + ricerca. Riga 2: i filtri in griglia auto-fit, così
   sette select non si restringono a vicenda e vanno a capo da soli. */
.fl-toolbar {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.fl-toolbar__search {
    display: flex;
    align-items: center;
    gap: 8px;
}

.fl-toolbar__filters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 8px 10px;
}

.fl-toolbar__filters .mud-input-control {
    margin: 0;
}