/* ════════════════════════════════════════════════════════════════════════════
   Design system della sezione ECONOMIA (commessa → tab Economia) e, dal
   2026-09-04, STANDARD DI SPAZIATURA di tutta l'app (normalizzazione UX):
   UN solo linguaggio per KPI, toolbar filtri, tabella, footer, barra di sezione.
   Foglio GLOBALE (linkato in App.razor): i componenti condivisi (EcoKpi,
   EcoToolbar, EcoExport, EcoTableFooter) e le pagine usano SOLO queste classi.
   Palette: navy #001B48 / #1E334C, bordi #DDE5EF, superfici #F5F8FC.

   GRIGLIA DI SPAZIATURA (token in :root, usati anche dai CSS scoped):
     --eco-pad        24px  padding interno dei container principali (16px su tablet/mobile)
     --eco-gap        16px  distanza fra card KPI
     --eco-block      24px  distanza fra blocchi (header → KPI → toolbar → tabella)
     --eco-ctl-h      42px  altezza dei controlli della toolbar
     --eco-cell-x     16px  padding orizzontale delle celle
     --eco-cell-y     14px  padding verticale delle celle (header 12px)
     --eco-cell-edge  20px  padding esterno di prima e ultima colonna
   Titolo, sottotitolo, KPI, filtri e tabella partono dallo STESSO asse sinistro.
   ════════════════════════════════════════════════════════════════════════════ */

:root {
    --eco-pad: 24px;
    --eco-gap: 16px;
    --eco-block: 24px;
    --eco-ctl-h: 42px;
    --eco-cell-x: 16px;
    --eco-cell-y: 14px;
    --eco-head-y: 12px;
    --eco-cell-edge: 20px;
    --eco-row-h: 54px;
}

/* ── Card generica di sezione ────────────────────────────────────────────── */

.eco-card {
    background: #fff;
    border: 1px solid #DDE5EF;
    border-radius: 12px;
    padding: var(--eco-pad);
    box-shadow: 0 1px 2px rgba(0, 27, 72, .04);
    margin-bottom: var(--eco-block);   /* 24px fra blocchi principali */
}

/* ── KPI: stessa altezza, padding, ombra, raggio ovunque ─────────────────── */

.eco-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--eco-gap);
    margin-bottom: var(--eco-block);   /* KPI → Toolbar */
}

.eco-kpi {
    display: flex;
    align-items: center;
    gap: 16px;
    background: #fff;
    border: 1px solid #DDE5EF;
    border-radius: 12px;
    padding: 20px 24px;
    min-height: 104px;
    box-shadow: 0 1px 2px rgba(0, 27, 72, .04);
    min-width: 0;
}

.eco-kpi__ico {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: #EDF3FB;
    color: #001B48;
    font-size: 1.05rem;
}

.eco-kpi__ico--green  { background: #E8F6EE; color: #23824F; }
.eco-kpi__ico--red    { background: #FBEBED; color: #C0392B; }
.eco-kpi__ico--amber  { background: #FBF0D9; color: #A5820F; }

.eco-kpi__txt { display: flex; flex-direction: column; min-width: 0; }

.eco-kpi__lbl {
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #718096;
    margin-bottom: 6px;          /* label → valore */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.eco-kpi__val {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1E334C;
    line-height: 1.25;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.eco-kpi__val.is-pos { color: #23824F; }
.eco-kpi__val.is-neg { color: #C0392B; }

.eco-kpi__sub {
    font-size: .74rem;
    color: #8696a7;
    margin-top: 4px;             /* valore → descrizione */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Toolbar: ordine fisso Ricerca · Filtri · Periodo · Export · Nuovo ──── */

.eco-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;                       /* fra controlli collegati */
    margin-bottom: var(--eco-block); /* Toolbar → Tabella */
}

.eco-toolbar__search { flex: 1 1 260px; max-width: 360px; }
.eco-toolbar__spacer { margin-left: auto; }

/* Controlli della toolbar: stessa altezza (42px), allineati al centro, font leggibile
   anche quando il markup usa form-control-sm/btn-sm. */
.eco-toolbar .form-control,
.eco-toolbar .form-select,
.eco-toolbar .btn {
    min-height: var(--eco-ctl-h);
    font-size: .875rem;
}

.eco-toolbar .form-control-sm,
.eco-toolbar .form-select-sm { padding-top: 0; padding-bottom: 0; }

.eco-toolbar .btn { display: inline-flex; align-items: center; }
.eco-toolbar .btn-link { min-height: 0; }
.eco-toolbar > span, .eco-toolbar .text-muted.small { align-self: center; }

.eco-search { position: relative; }

.eco-search > i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #8696a7;
    font-size: .8rem;
    pointer-events: none;
}

.eco-search > input { padding-left: 34px; }

.eco-filter { width: auto; max-width: 220px; }

/* ── Tabella unica ───────────────────────────────────────────────────────── */

.eco-table-wrap {
    background: #fff;
    border: 1px solid #DDE5EF;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0, 27, 72, .04);
    margin-bottom: var(--eco-block);
}

/* Solo scroll orizzontale, quando serve davvero: MAI scroll verticale interno,
   la pagina usa lo scroll del browser (regola utente 2026-09-04). */
.eco-table-wrap .table-responsive { overflow-x: auto; overflow-y: visible; }

.eco-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 0;
}

.eco-table thead th {
    background: #F5F8FC;
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #718096;
    height: 48px;
    padding: var(--eco-head-y) var(--eco-cell-x);
    vertical-align: middle;
    text-align: left;
    border-bottom: 1px solid #DDE5EF;
    white-space: nowrap;
}

.eco-table tbody td {
    height: var(--eco-row-h);        /* altezza riga unificata (52-56px) */
    padding: var(--eco-cell-y) var(--eco-cell-x);
    vertical-align: middle;
    font-size: .875rem;
    color: #17324d;
    border-bottom: 1px solid #EDF2F7;
}

/* Prima e ultima colonna: mai a filo del bordo (checkbox e icone comprese) */
.eco-table th:first-child,
.eco-table td:first-child { padding-left: var(--eco-cell-edge); }

.eco-table th:last-child,
.eco-table td:last-child { padding-right: var(--eco-cell-edge); }

.eco-table tbody tr:last-child td { border-bottom: none; }
.eco-table tbody tr:hover td { background: #F7FAFD; }

.eco-table tfoot td {
    padding: var(--eco-head-y) var(--eco-cell-x);
    background: #F5F8FC;
    font-size: .84rem;
    font-weight: 600;
    color: #1E334C;
    border-top: 2px solid #DDE5EF;
}

/* Allineamenti per tipo di contenuto: testo a sinistra, numeri a destra,
   checkbox al centro, azioni a destra. Le classi si mettono su th E td. */
.eco-table .is-num,
.eco-table .text-end { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.eco-table .is-check { text-align: center; width: 48px; }
.eco-table .is-check input { margin: 0; vertical-align: middle; }
.eco-table .is-actions,
.eco-table .eco-actions { text-align: right; white-space: nowrap; }
.eco-table .is-nowrap { white-space: nowrap; }

/* Cella con testo primario + secondario ("AFIS G. Clerici S.p.A." / "Ft. 12345 · Prot. 12345") */
.eco-primary { display: block; font-weight: 600; color: #1E334C; line-height: 1.3; }
.eco-secondary { display: block; font-size: .78rem; color: #718096; line-height: 1.3; margin-top: 3px; }

/* Azioni riga: ICON BUTTON unico della piattaforma (visualizza, modifica,
   duplica, menu ⋮…). 36×36, icona ~16-18px, tooltip via title OBBLIGATORIO. */
.eco-act {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--icobtn-size, 36px);
    height: var(--icobtn-size, 36px);
    flex-shrink: 0;
    border-radius: var(--icobtn-radius, 8px);
    border: none;
    background: transparent;
    color: var(--icobtn-ink, #5B7A9A);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    text-decoration: none;
    padding: 0;
    transition: background .12s, color .12s;
}

.eco-act + .eco-act { margin-left: 4px; }

.eco-act:hover { background: var(--icobtn-hover-bg, #EDF3FB); color: var(--icobtn-hover-ink, #001B48); }
.eco-act:disabled { color: #B9C9DA; cursor: not-allowed; background: transparent; }
.eco-act.dropdown-toggle::after { display: none; }

/* Variante distruttiva: icona rossa, MAI pulsante rosso pieno in tabella
   (il rosso pieno è solo della conferma finale in ConfermaEliminazione). */
.eco-act--danger { color: var(--icobtn-danger, #C0392B); }
.eco-act--danger:hover { background: var(--icobtn-danger-bg, #FBEBED); color: #A93226; }

/* ── Footer tabella: righe per pagina · totale · paginazione ─────────────── */

.eco-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 12px var(--eco-cell-edge);
    border-top: 1px solid #DDE5EF;
    background: #FBFCFE;
    font-size: .8rem;
    color: #5B7A9A;
}

.eco-foot__size { display: inline-flex; align-items: center; gap: 6px; }
.eco-foot__size select { width: auto; }
.eco-foot__tot { margin-left: auto; }

.eco-foot .pagination { margin: 0; }

/* ── Barra di sezione: titolo+descrizione a sinistra, azioni a destra ────── */

.eco-secbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: var(--eco-block);
}

.eco-secbar__txt { min-width: 0; }

.eco-secbar__title {
    font-size: 1.02rem;
    font-weight: 700;
    color: #1E334C;
    margin-bottom: 4px;          /* titolo → sottotitolo */
}

.eco-secbar__sub {
    font-size: .82rem;
    color: #5B7A9A;
}

.eco-secbar__actions {
    margin-left: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

/* ── Empty state unificato: icona · titolo · descrizione · CTA ───────────── */

.eco-empty {
    text-align: center;
    padding: 40px var(--eco-pad);
    color: #5B7A9A;
}

.eco-empty i {
    font-size: 2rem;
    color: #B9C9DA;
    display: block;
    margin-bottom: 0;
}

.eco-empty__title {
    font-weight: 600;
    color: #1E334C;
    margin-bottom: 4px;
}

.eco-empty__text {
    font-size: .84rem;
    max-width: 420px;
    margin: 0 auto;
}

.eco-empty .btn { margin-top: 14px; }

/* ── Badge e pillole comuni ──────────────────────────────────────────────── */

.eco-badge {
    display: inline-block;
    padding: .2em .6em;
    border-radius: 10px;
    font-size: .72rem;
    font-weight: 600;
    white-space: nowrap;
}

.eco-badge--ok    { background: #E8F6EE; color: #23824F; }
.eco-badge--warn  { background: #FBF0D9; color: #A5820F; }
.eco-badge--err   { background: #FBEBED; color: #C0392B; }
.eco-badge--info  { background: #EDF3FB; color: #1E334C; }
.eco-badge--muted { background: #F4F5F7; color: #8696a7; }

/* ── Responsive: il padding si riduce, mai a filo ────────────────────────── */

@media (max-width: 992px) {
    :root {
        --eco-pad: 20px;
        --eco-cell-x: 14px;
        --eco-cell-edge: 16px;
    }
    .eco-kpi { padding: 18px 20px; min-height: 96px; }
}

@media (max-width: 600px) {
    :root {
        --eco-pad: 16px;
        --eco-block: 20px;
        --eco-cell-x: 12px;
        --eco-cell-edge: 16px;
    }
    .eco-toolbar__search { flex-basis: 100%; max-width: none; }
    .eco-toolbar__spacer { display: none; }
    .eco-kpi { padding: 16px 18px; }
}