/*
 * kNet2 — personalizzazioni sopra il tema shadcn (openplain/filament-shadcn-theme).
 * v4: RIGHE TABELLA COMPATTE — fix del vero padding verticale.
 *
 * Analisi del CSS compilato Filament 5 (app.css):
 *   .fi-ta-cell                      → padding 0 (non è qui!)
 *   .fi-ta-record .fi-ta-record-content-ctn
 *     → padding-block: calc(var(--spacing) * 4)  = 1rem sopra + 1rem sotto
 *   .fi-ta-cell-label (label secondaria) → pt 2 / pb 1
 * Quindi la densità si comanda su fi-ta-record-content-ctn, NON su --spacing:
 * vedi nota a fondo file sul perché NON sovrascrivere --spacing globale.
 */

/* ---------- Tabelle compatte (densità) ---------- */
/* il padding verticale REALE delle righe: 4 → 1 unità di spacing */
.fi-ta-text {
    padding-block: calc(var(--spacing) * 1) !important;
    /* da 4 a 1 (~0.2rem) */
    row-gap: calc(var(--spacing) * 2) !important;
    /* da 3 a 1 */
}
.fi-ta-cell {
    padding-block: calc(var(--spacing)) !important;
    /* da 4 a 1 (~0.2rem) */
    row-gap: calc(var(--spacing) * 2) !important;
    /* da 3 a 1 */
}
.fi-ta-record .fi-ta-record-content-ctn {
    padding-block: calc(var(--spacing) * 1) !important;   /* da 4 a 1 (~0.2rem) */
    row-gap: calc(var(--spacing) * 1) !important;          /* da 3 a 1 */
}
/* celle: mantienile a zero (default) e contenuto stretto */
.fi-ta-cell-content {
    font-size: .8125rem;
    line-height: 1.2;
}
/* label secondarie nelle celle (sotto il valore): più strette */
.fi-ta-cell-label {
    padding-top: calc(var(--spacing) * 0.5) !important;
    padding-bottom: calc(var(--spacing) * 0.25) !important;
    line-height: 1.1 !important;
}
/* header colonna: padding verticale ridotto */
.fi-ta-header-cell {
    padding-block: calc(var(--spacing) * 1) !important;
}

/* ---------- Scala globale 0.8 (zoom-like, rem-based) ---------- */
html {
    font-size: 85%;
}

/* ---------- Identità legacy: "kNet" in verde (brand shadcn) ---------- */
.fi-brand-name b,
.fi-brand-name strong {
    color: #16a34a;
}

/* ---------- Sfondo contenuto coerente col legacy ---------- */
.fi-layout .fi-main,
.fi-body {
    background-color: #f1f3f6;
}
.dark .fi-layout .fi-main,
.dark .fi-body {
    background-color: #0b0f16;
}

/* ---------- Header tabelle maiuscolo compatto (AdminLTE-like) ---------- */
.fi-table th {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .03em;
}

/* ---------- Switch pannello (topbar): icona + nome, accanto al brand ---------- */
.knet2-panel-switch-btn {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .4rem .8rem;
    border-radius: 9999px;
    background-color: var(--gray-100);
    color: var(--gray-700);
    font-size: .8125rem;
    font-weight: 600;
    line-height: 1.25rem;
    white-space: nowrap;
    transition: background-color 150ms ease, color 150ms ease;
}
.knet2-panel-switch-btn:hover {
    background-color: var(--gray-200);
    color: var(--gray-900);
}
:is(.dark) .knet2-panel-switch-btn {
    background-color: var(--gray-800);
    color: var(--gray-200);
}
:is(.dark) .knet2-panel-switch-btn:hover {
    background-color: var(--gray-700);
    color: var(--gray-50);
}

/* ---------- Barra tab: strip PROPRIA sotto la topbar (separata e evidenziata) ---------- */
/* Il portale è renderizzato su TOPBAR_AFTER (fuori dalla <nav>) via DittaTabbedPlugin. */
#fi-tabbed-bar-portal {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 2.6rem;
    padding-inline: 1rem;
    background-color: #e9edf3;           /* tinta leggermente più scura dello sfondo pagine */
    border-bottom: 1px solid color-mix(in oklab, var(--gray-400) 45%, transparent);
    box-shadow: inset 0 -2px 0 color-mix(in oklab, var(--primary-500) 30%, transparent);
}
:is(.dark) #fi-tabbed-bar-portal {
    background-color: #101722;
    border-bottom-color: var(--gray-800);
    box-shadow: inset 0 -2px 0 color-mix(in oklab, var(--primary-500) 40%, transparent);
}

/* ---------- Header tabella sticky (plugin watheqalshowaiter) — fix per Filament 5 ---------- */
/* In Filament 5 .fi-ta-header-cell NON ha sfondo: senza questo fix il contenuto delle
   righe si vede dietro l'header sticky durante lo scroll. */
.fi-ta-table thead {
    background-color: var(--gray-50);
    box-shadow: 0 1px 0 var(--gray-200);
}
.dark .fi-ta-table thead {
    background-color: var(--gray-900);
    box-shadow: 0 1px 0 rgb(255 255 255 / 10%);
}

/* Contenitore scroll delle tabelle: offset adeguato a topbar + strip tab + breadcrumb
   + heading + toolbar + paginazione del nostro layout (default plugin: 20rem, troppo poco).
   Variabile regolabile: --knet2-ta-offset. */
:root {
    --knet2-ta-offset: 27rem;
}
.fi-ta-content-ctn {
    max-height: calc(100dvh - var(--knet2-ta-offset));
    overscroll-behavior: contain;
}
/* Reset difensivo: in Filament 5 .fi-ta-content (quando esiste, viste grid) è ANNIDATO
   dentro .fi-ta-content-ctn — il plugin lo rende a sua volta scrollabile (regola v3)
   creando doppio scroll. Il contenitore di scroll deve restare solo il ctn. */
.fi-ta-content {
    max-height: none;
    overflow-y: visible;
}

/* ---------- Popup marker mappa (InfoWindow Google Maps) ---------- */
.knet2-map-popup {
    font-size: .8125rem;
    line-height: 1.45;
    min-width: 190px;
}
.knet2-map-popup strong {
    display: block;
    font-size: .875rem;
    margin-bottom: .15rem;
}
.knet2-map-popup small {
    display: block;
    color: var(--gray-500);
}
.knet2-map-popup-label {
    color: var(--gray-500);
    font-weight: 600;
}

/* ---------- Badge: angoli AdminLTE + sfondo più chiaro e trasparente ---------- */
.fi-badge {
    border-radius: .25rem;
}
/* Sfondo badge più chiaro e trasparente: tinta del colore del badge (12% di alpha).
   Filament usa color-50 (pieno e troppo scuro); qui sovrascriviamo con una velatura. */
.fi-badge,
.fi-badge.fi-color {
    background-color: color-mix(in oklab, currentColor 12%, transparent) !important;
}

.knet2-panel-switch {
    padding-left: 1rem;
}
/*
 * NOTA SU --spacing (valutato, NON applicato):
 * Tailwind 4 compone OGNI utility di spaziatura come calc(var(--spacing) * N).
 * Ridurre --spacing (es. .25rem → .15rem) renderebbe tutto più denso MA anche:
 *   - bottoni/input/modali/dropdown troppo stretti e difficili da cliccare
 *   - spaziature incoerenti con i componenti Livewire/filament che assumono
 *     la scala standard (allineamenti, ombre, ring offset)
 *   - effetti difficili da prevedere su ogni schermata (forms, wizard, infolist)
 * Per questo si è scelto l'override MIRATO sopra (righe tabelle) che risolve
 * l'altezza delle righe senza effetti collaterali sul resto della UI.
 * Se si volesse comunque provare: :root { --spacing: .2rem } e collaudare
 * tutte le schermate (login, forms, modali, dropdown, wizard).
 */

/* ---------- Scadenze: righe scadute (non pagate e con data passata) ---------- */
/* Sfondo rosso chiaro opacizzato, come richiesto per la lista Scadenze. */
.fi-ta-row.fi-ta-row-scaduta,
.fi-ta-row.fi-ta-row-scaduta.fi-striped {
    background-color: rgb(220 38 38 / 8%) !important;
}
.fi-ta-row.fi-ta-row-scaduta.fi-clickable:hover {
    background-color: rgb(220 38 38 / 14%) !important;
}
.dark .fi-ta-row.fi-ta-row-scaduta,
.dark .fi-ta-row.fi-ta-row-scaduta.fi-striped {
    background-color: rgb(248 113 113 / 14%) !important;
}