/* ---------------------------------------------------------------------------
   PrestAnalysis · l'aspetto delle pagine del gestionale
   ---------------------------------------------------------------------------
   Non e' una reinterpretazione: i valori sono presi dai fogli di stile veri di
   Elettroclick e Matyco (pages/articoli_gestiti.php e pages/competitor.php) e
   tradotti sulle classi di Filament. Stessi colori, stesse spaziature, stessi
   corpi di carattere.

   I colori pieni valgono per il tema chiaro, che e' quello che il gestionale
   usa. Sul tema scuro restano densita' e tipografia, e i colori li mette
   Filament: meglio due temi coerenti che uno solo bello e l'altro illeggibile.

   Si toglie cancellando la riga renderHook nel provider del pannello.
   --------------------------------------------------------------------------- */

/* --- larghezza ------------------------------------------------------------- */

/* il contenuto era incassato al centro: su un monitor da ufficio si perdeva
   mezza pagina e le colonne si stringevano per niente */
.fi-main { max-width: 100% !important; }
.fi-main-ctn > .fi-main, .fi-page { padding-inline: 0.75rem; }

/* --- fascia di intestazione ------------------------------------------------- */

/* .cp-head del gestionale: gradiente blu, angoli tondi, titolo in grassetto e
   una riga sotto che dice a cosa serve la pagina */
.fi-header {
    background: linear-gradient(135deg, #1a237e, #283593);
    border-radius: 12px;
    padding: 16px 22px;
    margin-bottom: 14px;
}

.fi-header-heading {
    color: #fff;
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.25;
}

.fi-header-subheading {
    color: rgb(255 255 255 / 0.85);
    font-size: 0.82rem;
    margin-top: 2px;
}

/* i comandi dentro la fascia restano leggibili sul colore pieno */
.fi-header .fi-btn {
    background: rgb(255 255 255 / 0.16);
    border: 1px solid rgb(255 255 255 / 0.35);
    box-shadow: none;
}
.fi-header .fi-btn:hover { background: rgb(255 255 255 / 0.26); }
.fi-header .fi-btn .fi-btn-label, .fi-header .fi-btn .fi-icon { color: #fff; }

/* --- riquadri: .ag-box e .cp-stat ------------------------------------------- */

:root:not(.dark) .fi-ta-ctn,
:root:not(.dark) .fi-section,
:root:not(.dark) .fi-wi-stats-overview-stat {
    border: 1px solid #e3e8f0;
    border-radius: 10px;
    box-shadow: none;
}

/* i numeri di sintesi in cima alla pagina */
.fi-wi-stats-overview-stat { padding: 8px 14px; }

.fi-wi-stats-overview-stat-value {
    font-size: 1.2rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.fi-wi-stats-overview-stat-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}
:root:not(.dark) .fi-wi-stats-overview-stat-label { color: #777; }

.fi-wi-stats-overview-stat-description { font-size: 0.72rem; }
:root:not(.dark) .fi-wi-stats-overview-stat-description { color: #888; }

/* --- tabella: .cp-tbl ------------------------------------------------------- */

.fi-ta-table {
    font-size: 0.83rem;
    font-variant-numeric: tabular-nums;
}

.fi-ta-cell, .fi-ta-header-cell {
    padding: 6px 8px;
}

/* Filament tiene un'altezza minima dentro ogni cella: e' quello che faceva le
   righe alte il doppio anche quando il contenuto era una parola sola */
.fi-ta-record .fi-ta-cell .fi-ta-col-wrp, .fi-ta-text { min-height: 0; }

.fi-ta-header-cell .fi-ta-header-cell-label {
    font-size: 0.68rem;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.02em;
    opacity: 1;
}

:root:not(.dark) .fi-ta-header-cell {
    background: #f6f8fb;
}
:root:not(.dark) .fi-ta-header-cell .fi-ta-header-cell-label { color: #556; }

/* l'intestazione resta ferma mentre si scorre */
.fi-ta-table thead { position: sticky; top: 0; z-index: 2; }
.fi-ta-header-cell { white-space: nowrap; }

:root:not(.dark) .fi-ta-row { border-bottom: 1px solid #eef1f5; }
:root:not(.dark) .fi-ta-row:hover { background: #fafcff; }

/* la seconda riga della cella e' contesto: .mini del gestionale */
.fi-ta-text-item-description, .fi-ta-record-description {
    font-size: 0.72rem;
    line-height: 1.3;
}
:root:not(.dark) .fi-ta-text-item-description,
:root:not(.dark) .fi-ta-record-description { color: #888; }

/* --- pastiglie: .pill -------------------------------------------------------- */

.fi-badge {
    font-size: 0.66rem;
    padding: 2px 7px;
    border-radius: 20px;
    font-weight: 600;
    white-space: nowrap;
}

/* i colori delle pastiglie del gestionale, sugli stati di Filament */
:root:not(.dark) .fi-badge.fi-color-success { background: #e8f5e9; color: #2e7d32; }
:root:not(.dark) .fi-badge.fi-color-danger  { background: #ffebee; color: #c62828; }
:root:not(.dark) .fi-badge.fi-color-warning { background: #fff8e1; color: #8d6e00; }
:root:not(.dark) .fi-badge.fi-color-info,
:root:not(.dark) .fi-badge.fi-color-primary { background: #e3f2fd; color: #1565c0; }
:root:not(.dark) .fi-badge.fi-color-gray    { background: #eceff1; color: #546e7a; }

/* --- barra dei filtri: .cp-filtri -------------------------------------------- */

.fi-ta-filters { padding: 10px 12px; }

:root:not(.dark) .fi-ta-filters {
    background: #fff;
    border-bottom: 1px solid #e3e8f0;
}

/* etichetta piccola in maiuscoletto sopra il campo: e' la forma che rende la
   barra leggibile in orizzontale invece che a blocchi */
.fi-ta-filters .fi-fo-field-wrp-label {
    font-size: 0.66rem;
    text-transform: uppercase;
    font-weight: 500;
    margin-bottom: 2px;
    letter-spacing: 0.02em;
}
:root:not(.dark) .fi-ta-filters .fi-fo-field-wrp-label { color: #778; }

.fi-ta-filters .fi-fo-component-ctn { gap: 6px 8px; }

.fi-ta-filters .fi-input, .fi-ta-filters .fi-select-input {
    padding-block: 4px;
    font-size: 0.83rem;
}

:root:not(.dark) .fi-ta-filters .fi-input-wrp {
    box-shadow: none;
    outline: 1px solid #dde3ec;
}

/* --- fascia sopra la tabella e paginazione ----------------------------------- */

.fi-ta-header-ctn { padding: 8px 12px; }
.fi-ta-search-field .fi-input-wrp { max-width: 20rem; }

.fi-ta-pagination { padding: 6px 12px; font-size: 0.75rem; }

/* --- comandi di riga ---------------------------------------------------------- */

/* erano scritte per esteso ripetute su ogni riga: occupavano piu' spazio dei
   dati e tiravano l'occhio a destra invece che sul contenuto */
.fi-ta-actions { gap: 6px; }
.fi-ta-actions .fi-link-label, .fi-ta-actions .fi-btn-label { font-size: 0.75rem; }
.fi-ta-actions .fi-icon-btn, .fi-ta-actions .fi-link { padding: 1px 4px; }

/* --- barra laterale ------------------------------------------------------------ */

.fi-sidebar-item-button { padding-block: 5px; font-size: 0.83rem; }
.fi-sidebar-group-label { font-size: 0.68rem; letter-spacing: 0.06em; }

/* --- sotto i 1024px ------------------------------------------------------------- */

/* su schermo stretto la densita' non aiuta: il dito ha bisogno di bersagli
   grandi, e le righe tornano respirate */
@media (max-width: 1024px) {
    .fi-ta-table { font-size: 0.875rem; }
    .fi-ta-cell, .fi-ta-header-cell { padding: 10px 8px; }
    .fi-ta-table thead { position: static; }
    .fi-main-ctn > .fi-main, .fi-page { padding-inline: 0.5rem; }
    .fi-header { padding: 12px 14px; }
}

/* ---------------------------------------------------------------------------
   Lo stile delle pagine scritte a mano
   ---------------------------------------------------------------------------
   Sono le stesse classi di pages/competitor.php e pages/articoli_gestiti.php sul
   gestionale, con gli stessi valori. Stanno qui e non dentro ogni pagina: una
   copia per schermata significa vederle divergere alla terza modifica.

   Il componente tabella di Filament resta dov'e' per le sezioni con moduli di
   inserimento; le pagine di analisi usano queste.
   --------------------------------------------------------------------------- */

/* riquadri con i numeri di sintesi */
.cp-num{display:grid;grid-template-columns:repeat(auto-fit,minmax(145px,1fr));gap:10px;margin-bottom:10px}
.cp-num > div{background:#fff;border:1px solid #e3e8f0;border-radius:10px;padding:9px 14px}
.cp-num b{display:block;font-size:1.3rem;line-height:1.2;font-variant-numeric:tabular-nums}
.cp-num span{font-size:.68rem;color:#777;text-transform:uppercase;letter-spacing:.02em}
.cp-num em{display:block;font-size:.7rem;color:#888;font-style:normal;margin-top:1px}

/* barra filtri: etichetta piccola sopra il campo, tutto su una fascia sola */
.cp-filtri{background:#fff;border:1px solid #e3e8f0;border-radius:10px;padding:10px 12px;margin-bottom:10px}
.cp-filtri label{font-size:.66rem;text-transform:uppercase;color:#778;display:block;margin-bottom:2px}
.cp-filtri .fg{display:inline-block;margin:0 8px 6px 0;vertical-align:top}
.cp-filtri input,.cp-filtri select{border:1px solid #dde3ec;border-radius:6px;padding:.28rem .5rem;font-size:.82rem;background:#fff;color:#222}

.cp-btn{border:0;border-radius:6px;padding:.35rem .8rem;font-size:.82rem;font-weight:600;cursor:pointer}
.cp-btn.p{background:#1d4ed8;color:#fff}
.cp-btn.s{background:#eef2f8;color:#33415c}

/* striscia di spiegazione e barra della selezione */
.cp-nota{background:#eef5ff;border:1px solid #cfe0f8;border-radius:8px;padding:8px 12px;margin-bottom:8px;font-size:.82rem;color:#1a3a63}
.cp-avviso{background:#fff8e1;border:1px solid #ffe0a3;border-radius:8px;padding:8px 12px;margin-bottom:8px;font-size:.82rem;color:#6b5200}
.cp-sel{background:#0d47a1;color:#fff;border-radius:8px;padding:7px 12px;display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:8px;font-size:.83rem}
.cp-sel.vuota{background:#607d8b}
.cp-sel .cp-btn{padding:.2rem .6rem;font-size:.78rem}

/* tabella densa, con intestazione che resta ferma */
.cp-wrap{border:1px solid #e3e8f0;border-radius:10px;overflow:auto;max-height:70vh;background:#fff}
.cp-tbl{width:100%;border-collapse:collapse;background:#fff;font-size:.83rem}
.cp-tbl th,.cp-tbl td{padding:6px 8px;border-bottom:1px solid #eef1f5;text-align:left;vertical-align:middle}
.cp-tbl th{background:#f6f8fb;font-size:.68rem;text-transform:uppercase;color:#556;position:sticky;top:0;z-index:2;white-space:nowrap}
.cp-tbl tr:hover td{background:#fafcff}
.cp-tbl .n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}

.mini{font-size:.72rem;color:#888}
.mono{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.75rem}

/* pastiglie: gli stessi colori del gestionale */
.pill{font-size:.66rem;padding:2px 7px;border-radius:20px;font-weight:600;white-space:nowrap;display:inline-block}
.p-up{background:#ffebee;color:#c62828}
.p-dn{background:#e8f5e9;color:#2e7d32}
.p-wa{background:#fff8e1;color:#8d6e00}
.p-in{background:#e3f2fd;color:#1565c0}
.p-nt{background:#eceff1;color:#546e7a}

.aff{font-size:.6rem;padding:1px 5px;border-radius:4px;font-weight:700;text-transform:uppercase}
.a-ean{background:#e8f5e9;color:#1b5e20}
.a-metel{background:#e3f2fd;color:#0d47a1}
.a-code_brand{background:#fff8e1;color:#8d6e00}
.a-manual{background:#ede7f6;color:#4527a0}

.dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:4px}
.pgbar{display:flex;gap:8px;align-items:center;justify-content:center;padding:10px 0;font-size:.82rem}