/* ============================================================
   Segmenti Ospiti — card ad altezza uniforme
   ------------------------------------------------------------
   Nella lista (Table con ->contentGrid) le card sono disposte in
   una CSS grid: ogni cella .fi-ta-record e' gia' h-full e la riga
   prende l'altezza della card piu' alta (es. "Demo Luna").
   Il problema e' che i wrapper interni generati da Filament tra la
   cella e la nostra card colorata (segment-card.blade.php, che ha
   height:100%) sono a display:block / altezza automatica, quindi la
   card si ferma all'altezza del contenuto invece di riempire la cella.

   Qui rendiamo l'intera catena di wrapper del *contenuto* (mai le
   azioni: .fi-ta-actions resta a dimensione naturale) una colonna
   flessibile che si estende, cosi' l'altezza propaga fino alla card.
   Tutto e' scopato a .fi-resource-guest-segments per non toccare le
   altre tabelle del pannello.
   ============================================================ */

/* Cella della griglia (grid item, altezza definita): colonna flex */
.fi-resource-guest-segments .fi-ta-content-grid > .fi-ta-record {
    display: flex;
    flex-direction: column;
}

/* Wrapper esterno del record (flex items-center): riempie la cella
   ed estende in verticale il suo contenuto (stretch, non center) */
.fi-resource-guest-segments .fi-ta-content-grid > .fi-ta-record > div {
    flex: 1 1 auto;
    align-items: stretch;
    min-height: 0;
}

/* Colonna del contenuto (sorella delle azioni .fi-ta-actions) */
.fi-resource-guest-segments .fi-ta-content-grid > .fi-ta-record > div > div > .flex-1 {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* Tutti gli anelli intermedi della catena Filament *dentro* la colonna
   contenuto (grid.column, wrapper record-content, Stack, col-wrapper):
   crescono e impilano in colonna, propagando l'altezza fino alla card. */
.fi-resource-guest-segments .fi-ta-content-grid > .fi-ta-record > div > div > .flex-1 .w-full,
.fi-resource-guest-segments .fi-ta-content-grid > .fi-ta-record > div > div > .flex-1 .flex-1,
.fi-resource-guest-segments .fi-ta-content-grid > .fi-ta-record > div > div > .flex-1 .fi-ta-col-wrp,
.fi-resource-guest-segments .fi-ta-content-grid > .fi-ta-record > div > div > .flex-1 .flex.flex-col.items-start {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

/* ============================================================
   Modali Segmenti (Anteprima "Vedi Segmento ospiti" + Modifica)
   ------------------------------------------------------------
   Box del modale vincolato all'altezza dello schermo: header e
   footer restano fissi (flex-shrink:0) e SOLO il corpo scorre,
   internamente alla scatola. Cosi' gli angoli arrotondati della
   finestra restano sempre visibili e non scrolla l'overlay.
   La classe seg-modal-fit e' aggiunta alla .fi-modal-window via
   ->extraModalWindowAttributes() sulle rispettive Action.
   Il contenitore (modalContainer) ha p-4 → sottraggo 2rem.
   ============================================================ */
.fi-modal-window.seg-modal-fit {
    max-height: calc(100vh - 2rem);
    max-height: calc(100dvh - 2rem);
}

.fi-modal-window.seg-modal-fit > .fi-modal-header,
.fi-modal-window.seg-modal-fit > .fi-modal-footer {
    flex: 0 0 auto;
}

.fi-modal-window.seg-modal-fit > .fi-modal-content {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

/* ============================================================
   Riga azioni sotto la card ("Usa in Campagna" / "Usa in
   Automazione" + icone)
   ------------------------------------------------------------
   Con la sidebar aperta la card scende sotto i ~500px e le
   etichette dei bottoni andavano a capo su due righe. Qui la
   riga si compatta (padding, gap e font ridotti) e le label
   sono forzate su una riga sola.
   La RIGA invece puo' andare a capo (24-set): con nowrap, in
   una card stretta (zoom del browser) megafono e menu uscivano
   dal bordo, sopra la card accanto. Meglio una seconda riga.
   ============================================================ */
.fi-resource-guest-segments .fi-ta-content-grid .fi-ta-actions {
    gap: 0.375rem;
    flex-wrap: wrap;
}


/* Azioni della card: tutte icone con tooltip (standard tabelle), in fila a
   sinistra; i tre puntini, se restano, sul bordo destro. */
.fi-resource-guest-segments .fi-ta-content-grid .fi-ta-actions {
    justify-content: flex-start;
    gap: 0.25rem;
}

.fi-resource-guest-segments .fi-ta-content-grid .fi-ta-actions > .fi-dropdown {
    margin-left: auto;
}

/* ============================================================
   Card segmento compatta (mockup Segmenti, 28-set)
   ------------------------------------------------------------
   Bordo e fondo sul RECORD (.jo-segcard, da recordClasses()): Filament
   rende le azioni di riga nello stesso .fi-ta-record ma fuori dalla
   ViewColumn, così la cornice contiene anche loro. Il contenuto
   (segment-card.blade.php) è nelle classi .jo-segc-*.
   ============================================================ */

.fi-resource-guest-segments .fi-ta-content-grid {
    gap: 14px;
}

.fi-resource-guest-segments .fi-ta-content-grid > .fi-ta-record.jo-segcard {
    border: 1px solid var(--jo-ui-line, var(--ds-border));
    border-radius: var(--jo-ui-radius, 14px);
    background: var(--jo-ui-surface, var(--ds-surface));
    /* Una cornice sola: via il ring che Filament mette in contentGrid. */
    box-shadow: var(--ds-shadow-rest);
    --tw-ring-color: transparent;
}

.fi-resource-guest-segments .fi-ta-content-grid > .fi-ta-record.jo-segcard--active {
    border-color: var(--ds-ok-bd);
    box-shadow: inset 0 0 0 1px var(--ds-ok-bg);
}

.fi-resource-guest-segments .fi-ta-content-grid > .fi-ta-record.jo-segcard--ai-active {
    border-color: var(--ds-info-bd);
}

/* Il padding lo dà la card (.jo-segc): via quello dei wrapper Filament
   (py-4 sul contenitore del record, ps-4/pe-4 sul link del contenuto),
   che lo raddoppiava e alzava la card di ~30px. */
.fi-resource-guest-segments .fi-ta-content-grid > .fi-ta-record.jo-segcard > div > div {
    padding-block: 0;
    row-gap: 0;
}

.fi-resource-guest-segments .fi-ta-content-grid > .fi-ta-record.jo-segcard .ps-4 {
    padding-inline: 0;
}

/* Le azioni dentro la cornice, staccate da un filo, padding ridotto. */
.fi-resource-guest-segments .fi-ta-content-grid > .fi-ta-record.jo-segcard .fi-ta-actions {
    margin: 0 14px;
    padding: 8px 0 10px;
    border-top: 1px solid var(--jo-ui-line-2, var(--ds-row-divider));
}

.jo-segc {
    display: flex;
    flex-direction: column;
    gap: 10px;
    height: 100%;
    padding: 14px 14px 10px;
    color: var(--jo-ui-ink, var(--ds-text-primary));
}

.jo-segc-t {
    margin: 0;
    overflow: hidden;
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.01em;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.jo-segc-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 6px;
}

.jo-segc-badge,
.jo-segc-chip {
    display: inline-flex;
    align-items: center;
    height: 21px;
    padding: 0 8px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.jo-segc-badge.is-ok { background: var(--jo-ui-ok-bg); color: var(--jo-ui-ok); }
.jo-segc-badge.is-info { background: var(--jo-ui-info-bg); color: var(--jo-ui-info); }
.jo-segc-badge.is-ai { background: var(--jo-ui-accent-soft); color: var(--jo-ui-accent); }

.jo-segc-chip {
    max-width: 100%;
    overflow: hidden;
    border: 1px solid var(--jo-ui-line);
    border-radius: 6px;
    background: var(--jo-ui-soft);
    font-weight: 500;
    color: var(--jo-ui-muted);
    text-overflow: ellipsis;
}

.jo-segc-chip b {
    margin-left: 3px;
    font-weight: 700;
}

.jo-segc-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    padding: 9px 11px;
    border: 1px solid var(--jo-ui-line-2);
    border-radius: 10px;
    background: var(--jo-ui-soft);
}

.jo-segc-metrics span {
    display: block;
    font-size: 10.5px;
    letter-spacing: 0.02em;
    color: var(--jo-ui-muted);
}

.jo-segc-metrics b {
    font-size: 14px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

.jo-segc-metrics em {
    margin-left: 3px;
    font-size: 10.5px;
    font-style: normal;
    font-weight: 650;
    color: var(--jo-ui-ok);
}

.jo-segc-metrics em.is-low {
    color: var(--jo-ui-warn);
}

.jo-segc-warn {
    padding: 5px 9px;
    border-radius: 8px;
    background: var(--jo-ui-warn-bg);
    font-size: 11.5px;
    line-height: 1.4;
    color: var(--jo-ui-warn);
}

.jo-segc-fid {
    margin-top: auto;
}

.jo-segc-fid-top {
    display: flex;
    align-items: baseline;
    margin-bottom: 5px;
    font-size: 11.5px;
    color: var(--jo-ui-muted);
}

.jo-segc-fid-top b {
    margin-left: auto;
    font-size: 12.5px;
    font-variant-numeric: tabular-nums;
    color: var(--jo-ui-ink);
}

/* Barretta della fedeltà: card e colonna "Fedeltà" della Lista. */
.jo-segfid {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 120px;
}

.jo-segfid b {
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    color: var(--jo-ui-ink);
}

.jo-segfid .jo-segfid-track {
    flex: 1;
}

.jo-segfid-track {
    display: block;
    height: 6px;
    overflow: hidden;
    border-radius: 20px;
    background: var(--jo-ui-line);
}

.jo-segfid-track i {
    display: block;
    height: 100%;
    border-radius: 20px;
    background: var(--jo-ui-accent);
}

/* Quattro KPI su una riga da tablet in su. */
@media (min-width: 768px) {
    .jo-kpis.jo-kpis--4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* Testi secondari del form segmento (periodo, anteprima vuota). */
.jo-seg-meta {
    font-size: 12.5px;
    color: var(--ds-text-tertiary, #5B5B6B);
}

/* ── Anteprima pubblico del form segmento: una riga "17 ospiti · Fedeltà
   32% ▬▬" (gli avvisi sono .jo-callout, ui-standard.css). ── */
.jo-seg-sum {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 8px;
}

.jo-seg-sum-n {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--ds-text-primary, #18181B);
    font-variant-numeric: tabular-nums;
}

.jo-seg-sum-l {
    font-size: 13px;
    color: var(--ds-text-secondary, #3F3F46);
}

.jo-seg-sum-fid {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: 12px;
    font-size: 12.5px;
    color: var(--ds-text-tertiary, #5B5B6B);
}

.jo-seg-sum-fid b {
    color: var(--ds-text-primary, #18181B);
    font-weight: 600;
}

.jo-seg-sum .jo-seg-track {
    display: inline-block;
    width: 96px;
    height: 6px;
    border-radius: 999px;
    overflow: hidden;
    background: var(--ds-surface-sunken, #EDEFF3);
}

.jo-seg-sum .jo-seg-track > span {
    display: block;
    height: 100%;
}

.jo-seg-sum .jo-seg-track > .is-ok { background: var(--ds-ok-dot); }
.jo-seg-sum .jo-seg-track > .is-warn { background: var(--ds-warn-dot); }

.jo-seg-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}