/* ==========================================================================
   Spaziatura verticale tra le sezioni di una pagina (pannello agenzia) —
   di serie Filament usa .fi-fo-component-ctn (grid, gap-6 = 24px) per
   separare i blocchi Section::make(...) in un form multi-sezione (es.
   Anagrafica Agenzia: Dati agenzia/Logo/Testi/Fatturazione). Misurato via
   getComputedStyle: 24px reali tra le sezioni lì, contro i 56px della
   pagina Abbonamento (che usa un margin-top manuale mt-6 sommato al
   padding interno della sezione precedente, non paragonabile 1:1). Qui
   solo il gap verticale (row-gap) viene alzato a 32px per l'intero
   pannello — il gap orizzontale (column-gap, tra campi sulla stessa riga)
   resta invariato apposta, la richiesta riguardava solo la spaziatura
   verticale tra zone/sezioni.
   ========================================================================== */
.fi-fo-component-ctn {
    row-gap: 2rem !important; /* 32px, era 24px */
}

.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.ml-1 { margin-left: 0.25rem; }
.ml-2 { margin-left: 0.5rem; }
.ml-3 { margin-left: 0.75rem; }
.px-9  { padding-left: 2.25rem; padding-right: 2.25rem; }
.px-10 { padding-left: 2.5rem;  padding-right: 2.5rem; }
.px-12 { padding-left: 3rem;    padding-right: 3rem; }
.space-y-12 > * + * { margin-top: 3rem; }

/* ==========================================================================
   KiriKiri brand — login screen only (.fi-simple-layout wraps /admin/login).
   Palette and type sourced from https://kirikiri.mrricky.it.
   Scoped on purpose: the rest of the admin panel keeps its amber theme.
   ========================================================================== */
.fi-simple-layout {
    /* --primary-* overridden locally, cascades to buttons/links/focus rings
       rendered inside the login card without touching the rest of /admin.
       Filament 4 usa questi custom property come COLORI CSS validi a sé
       stanti (--color-600: var(--primary-600), poi background-color:
       var(--bg) dove --bg risolve a --color-600) — una tripletta RGB nuda
       tipo "151, 70, 17" non è un <color> valido, quindi il browser scarta
       silenziosamente la dichiarazione: il bottone non mostrava mai lo
       stato normale (solo l'hover sotto, che è un hex valido con
       !important), bug reale segnalato dall'utente. Fix: avvolgere ogni
       tripletta in rgb(...) per ottenere un colore valido, stessi numeri. */
    --primary-50: rgb(250, 246, 243);
    --primary-100: rgb(245, 236, 231);
    --primary-200: rgb(229, 209, 196);
    --primary-300: rgb(213, 181, 160);
    --primary-400: rgb(182, 126, 88);
    --primary-500: rgb(151, 70, 17);
    --primary-600: rgb(151, 70, 17);
    --primary-700: rgb(113, 52, 13);
    --primary-800: rgb(91, 42, 10);
    --primary-900: rgb(74, 34, 8);
    --primary-950: rgb(45, 21, 5);
    --font-family: 'Public Sans';

    background-color: #F7F7F4;
    min-height: 100vh;
}

.fi-simple-layout .fi-simple-main {
    border-radius: 16px;
    border: 1px solid #DEDEDA;
    box-shadow: 0 8px 24px -8px rgba(13, 14, 11, .16);
}

/* Mobile: .fi-simple-main è width:100% senza alcun margine orizzontale di
   Filament (il max-width lg entra in gioco solo sopra ~32rem) — sotto i
   640px il box tocca letteralmente i bordi schermo, con solo il padding
   interno (24px) a fare da respiro visivo. Segnalato dall'utente ("va
   proprio contro lo schermo dx e sx"): aggiunge un margine laterale reale. */
@media (max-width: 640px) {
    .fi-simple-layout .fi-simple-main {
        width: calc(100% - 2rem);
        margin-inline: auto;
    }
}

/* Tab Accedi/Registrati in cima alla card di login — vedi AdminPanelProvider
   (render hook SIMPLE_PAGE_START) per il markup iniettato; stesse classi e
   stessi colori duplicati in resources/views/livewire/layouts/guest.blade.php
   per /registrati, che non carica questo foglio (sistema di rendering
   separato, vedi commento lì). */
.kk-auth-tabs {
    display: flex;
    gap: 4px;
    background: #F1F1EC;
    border-radius: 10px;
    padding: 4px;
    margin-bottom: 24px;
}

.kk-auth-tab {
    flex: 1;
    text-align: center;
    padding: 10px 0;
    border-radius: 7px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    color: #585952;
    transition: background-color .15s ease, color .15s ease;
}

.kk-auth-tab:hover {
    color: #0D0E0B;
}

.kk-auth-tab--active,
.kk-auth-tab--active:hover {
    background: #fff;
    color: #0D0E0B;
    box-shadow: 0 1px 3px rgba(13, 14, 11, .12);
}

.fi-simple-layout .fi-simple-header-heading {
    font-family: 'Source Serif 4', Georgia, serif;
    font-weight: 400;
    color: #0D0E0B;
}

.fi-simple-layout .fi-simple-header-subheading {
    color: #585952;
}

.fi-simple-layout .fi-logo {
    height: 3rem !important; /* 150% of the panel default (2rem) */
}

/* Bottone "Accedi": Filament lo renderizza in stile tonal (fi-bg-color-400 +
   fi-text-color-900, sfondo chiaro/testo scuro) — con la nostra palette
   brand (senza una vera curva di luminosità tra le tinte, vedi sopra) quella
   coppia risultava scuro-su-chiaro-scuro invece di leggibile. Override
   diretto invece di rincorrere l'ennesima sfumatura della scala: sfondo
   #974611 pieno e testo bianco sempre, stato normale incluso — bug
   segnalato dall'utente ("il pulsante deve essere nello stato normale
   color ambrato"). */
.fi-simple-layout .fi-btn.fi-color-primary {
    background-color: #974611 !important;
    color: #fff !important;
}

.fi-simple-layout .fi-btn.fi-color-primary:hover {
    background-color: #692000 !important;
    color: #fff !important;
}

/* ==========================================================================
   Header di sezione (Forms\Components\Section) — tutte le pagine del pannello.
   Le sezioni collassabili ("accordion") usano lo stesso markup/classe di
   Filament (.fi-section-header, con in più cursor-pointer e la chevron), quindi
   un'unica regola evidenzia entrambi i casi in modo uniforme, senza dover
   toccare ogni singolo Section::make() in ogni risorsa.
   ========================================================================== */
/* rgb(151, 70, 17) = #974611, colore brand KiriKiri (stesso usato su
   logo/onboarding/email transazionali, non l'amber generico di Filament) —
   nessuna variante dark: è già usato identico su sfondo chiaro e scuro
   altrove nell'app (es. onboarding-welcome.blade.php), l'opacità bassa
   sul background si adatta da sola a qualunque sfondo sottostante. */
.fi-section-header {
    background-color: rgba(151, 70, 17, 0.05) !important;
    border-radius: 0.75rem 0.75rem 0 0;
    border-bottom: 3px solid rgba(151, 70, 17, 0.5) !important;
    position: relative;
}

/* ==========================================================================
   Programma del viaggio (Timeline) — distinzione visiva tra "Giorni" e
   "Voci" (trasferimento/attività/accomodation) nell'accordion del backend.
   Le classi .kk-timeline-days / .kk-timeline-items sono applicate via
   ->extraAttributes() ai due Repeater (uno annidato nell'altro) in
   ModuleFormSchema.php. Filament frappone un <div> di grid layout tra <ul>
   e <li>, quindi niente combinatori di figlio diretto: si usano selettori
   discendenti "profondi" e si sfrutta l'ordine di cascata (stessa specificità
   → vince la regola dichiarata dopo) per far prevalere il colore delle voci
   sull'header delle voci, che ricade comunque dentro l'ancestor dei giorni.
   ========================================================================== */
.kk-timeline-days .fi-fo-repeater-item-header {
    background-color: rgba(217, 119, 6, 0.06); /* amber, stesso family della sezione */
    border-left: 3px solid rgb(217, 119, 6);
    border-radius: 0.75rem 0.75rem 0 0;
}

.dark .kk-timeline-days .fi-fo-repeater-item-header {
    background-color: rgba(251, 191, 36, 0.06);
    border-left-color: rgb(251, 191, 36);
}

.kk-timeline-items .fi-fo-repeater-item-header {
    background-color: rgba(139, 92, 246, 0.06); /* violetto, per distinguerlo dal giorno */
    border-left: 3px solid rgb(139, 92, 246);
    border-radius: 0.75rem 0.75rem 0 0;
}

.dark .kk-timeline-items .fi-fo-repeater-item-header {
    background-color: rgba(167, 139, 250, 0.08);
    border-left-color: rgb(167, 139, 250);
}

/* Fondino chiaro su tutta la card di giorno/voce (non solo l'header), stesso
   colore dell'header, per riconoscere la zona anche a corpo aperto. Regola del
   giorno dichiarata PRIMA di quella della voce: stessa specificità, quindi in
   cascata vince quella dichiarata dopo (voce) sull'elemento annidato condiviso
   — identico meccanismo già usato sopra per gli header. Serve sovrascrivere il
   bg-white/dark:bg-white/5 di Filament sulla <li>: la nostra classe +
   fi-fo-repeater-item ha specificità sufficiente. */
.kk-timeline-days li.fi-fo-repeater-item {
    background-color: rgba(217, 119, 6, 0.035);
}

.dark .kk-timeline-days li.fi-fo-repeater-item {
    background-color: rgba(251, 191, 36, 0.045);
}

.kk-timeline-items li.fi-fo-repeater-item {
    background-color: rgba(139, 92, 246, 0.06);
}

.dark .kk-timeline-items li.fi-fo-repeater-item {
    background-color: rgba(167, 139, 250, 0.06);
}

/* Etichette di gruppo "Giorni" / "Programma della giornata" / "Highlights":
   pillola colorata sopra ai rispettivi Repeater, stesso abbinamento
   amber/violetto degli header, per rendere subito riconoscibile a colpo
   d'occhio il livello anche quando i Repeater sono chiusi/collassati.
   Selettore a catena di figli diretti (field-label-col > field-label-ctn >
   field-label): .fi-fo-field-label è condivisa da OGNI campo del form,
   annidati compresi (Tipo, Titolo, Descrizione...) — la catena punta solo
   all'etichetta del Repeater con la nostra classe, non a quelle dei campi
   dentro i suoi item. Selettori aggiornati dopo l'upgrade Filament dell'8/8,
   che ha rinominato .fi-fo-field-wrp-label in .fi-fo-field-label (annidata
   in .fi-fo-field-label-ctn), lasciando la pillola morta senza dare errori:
   verificato dal vivo confrontando il DOM renderizzato coi vecchi selettori. */
.kk-timeline-days-wrap > .fi-fo-field-label-col > .fi-fo-field-label-ctn > .fi-fo-field-label,
.kk-timeline-items-wrap > .fi-fo-field-label-col > .fi-fo-field-label-ctn > .fi-fo-field-label,
.kk-highlights-items-wrap > .fi-fo-field-label-col > .fi-fo-field-label-ctn > .fi-fo-field-label {
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    display: inline-flex;
}

/* Il colore testo va sullo span interno di Filament (non ereditato dal label):
   lo span porta già text-gray-950 / dark:text-white, va sovrascritto sul figlio. */
.kk-timeline-days-wrap > .fi-fo-field-label-col > .fi-fo-field-label-ctn > .fi-fo-field-label .fi-fo-field-label-content,
.kk-timeline-items-wrap > .fi-fo-field-label-col > .fi-fo-field-label-ctn > .fi-fo-field-label .fi-fo-field-label-content,
.kk-highlights-items-wrap > .fi-fo-field-label-col > .fi-fo-field-label-ctn > .fi-fo-field-label .fi-fo-field-label-content {
    color: #fff;
}

.kk-timeline-days-wrap > .fi-fo-field-label-col > .fi-fo-field-label-ctn > .fi-fo-field-label {
    background-color: rgb(217, 119, 6);
}

.dark .kk-timeline-days-wrap > .fi-fo-field-label-col > .fi-fo-field-label-ctn > .fi-fo-field-label {
    background-color: rgb(251, 191, 36);
}

.kk-timeline-items-wrap > .fi-fo-field-label-col > .fi-fo-field-label-ctn > .fi-fo-field-label,
.kk-highlights-items-wrap > .fi-fo-field-label-col > .fi-fo-field-label-ctn > .fi-fo-field-label {
    background-color: rgb(139, 92, 246);
}

.dark .kk-timeline-items-wrap > .fi-fo-field-label-col > .fi-fo-field-label-ctn > .fi-fo-field-label,
.dark .kk-highlights-items-wrap > .fi-fo-field-label-col > .fi-fo-field-label-ctn > .fi-fo-field-label {
    background-color: rgb(167, 139, 250);
}

/* ==========================================================================
   Highlights / Punti salienti — stesso trattamento grafico del Repeater
   "Programma della giornata" (.kk-timeline-items sopra, violetto): qui un
   solo livello (nessuna Voce annidata dentro ogni highlight), ma lo stesso
   colore e la stessa "taglia" visiva delle Voci, non dei Giorni (amber).
   Classe applicata via ->extraAttributes()/->extraFieldWrapperAttributes()
   al Repeater in ModuleFormSchema.php.
   ========================================================================== */
.kk-highlights-items .fi-fo-repeater-item-header {
    background-color: rgba(139, 92, 246, 0.06);
    border-left: 3px solid rgb(139, 92, 246);
    border-radius: 0.75rem 0.75rem 0 0;
}

.dark .kk-highlights-items .fi-fo-repeater-item-header {
    background-color: rgba(167, 139, 250, 0.08);
    border-left-color: rgb(167, 139, 250);
}

.kk-highlights-items li.fi-fo-repeater-item {
    background-color: rgba(139, 92, 246, 0.06);
}

.dark .kk-highlights-items li.fi-fo-repeater-item {
    background-color: rgba(167, 139, 250, 0.06);
}

/* ==========================================================================
   Header "appiccicoso" nelle pagine di modifica (Viaggio/Preventivo/Cliente):
   applicato via $extraBodyAttributes sulla Page (classe .kk-sticky-header sul
   <body>), così i pulsanti (Salva modifiche, Elimina, Anteprima...) restano
   visibili scrollando. top = altezza della topbar Filament (.fi-topbar, h-16
   = 4rem), per non sovrapporsi ad essa; z-index sotto la topbar (z-20) ma
   sopra il contenuto della pagina.
   ========================================================================== */
.kk-sticky-header .fi-header {
    position: sticky;
    top: 4rem;
    z-index: 10;
    margin: 0 -1rem;
    padding: 0.75rem 1rem;
    background-color: rgb(249, 250, 251);
    box-shadow: 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    border-radius: 0 0 0.75rem 0.75rem;
}

.dark .kk-sticky-header .fi-header {
    background-color: rgb(3, 7, 18);
}

/* ==========================================================================
   Topbar: più distanza tra il pulsante notifiche e il menu utente. Sono
   fratelli in un contenitore flex con gap-x-4 uniforme (Filament); la sola
   leva senza toccare il markup vendor è un margine extra sul pulsante
   notifiche, che si somma al gap esistente verso il menu utente successivo.
   ========================================================================== */
.fi-topbar-database-notifications-btn {
    margin-inline-end: 0.75rem;
}

/* ==========================================================================
   Pagina Abbonamento — accordion "Come hai usato Arturo fino ad ora": sfondo
   grigio per distinguerlo dal resto della sezione. x-filament::section non
   inoltra style="" al tag <section> reale (solo class, verificato
   ispezionando l'HTML renderizzato), quindi serve una classe scoped qui
   invece dello style inline usato altrove nella stessa pagina.
   ========================================================================== */
.kk-arturo-usage-accordion {
    background-color: rgb(243, 244, 246) !important; /* gray-100 */
}

.dark .kk-arturo-usage-accordion {
    background-color: rgb(255, 255, 255, 0.08) !important;
}

/* L'header dell'accordion (.fi-section-header) ha la sua banda ambra
   applicata dalla regola generica più sopra — qui sovrascritta apposta
   per restare grigia invece che ambra, coerente con il corpo. La
   freccia di apertura (heroicon-m-chevron-down, generata da Filament
   quando collapsible=true) viene anche ingrandita perché sullo sfondo
   ambra di default risultava troppo piccola per notarla. */
.kk-arturo-usage-accordion .fi-section-header {
    background-color: rgb(243, 244, 246) !important;
    border-bottom-color: rgb(156, 163, 175) !important; /* gray-400 */
}

.dark .kk-arturo-usage-accordion .fi-section-header {
    background-color: rgba(255, 255, 255, 0.08) !important;
    border-bottom-color: rgb(107, 114, 128) !important; /* gray-500 */
}

.kk-arturo-usage-accordion .fi-section-header .fi-icon-btn {
    width: 1.75rem;
    height: 1.75rem;
}

.kk-arturo-usage-accordion .fi-section-header .fi-icon-btn-icon {
    width: 1.25rem;
    height: 1.25rem;
    color: rgb(107, 114, 128); /* gray-500 */
}

.dark .kk-arturo-usage-accordion .fi-section-header .fi-icon-btn-icon {
    color: rgb(156, 163, 175); /* gray-400 */
}

/* ==========================================================================
   Pagina Documentazione — le sezioni sono box "di aiuto" (spiegano come
   usare il pannello), non contenuto operativo: header neutro in grigio
   invece del brand color usato ovunque nel resto del pannello, per non
   dargli lo stesso peso visivo delle sezioni vere. .kk-doc-page è un
   wrapper aggiunto in documentation.blade.php (pagina senza classe
   risorsa da usare come scope).
   ========================================================================== */
/* background-color: transparent, non un grigio fisso (es. gray-50) — quel
   grigio non corrispondeva esattamente allo sfondo del <section> contenitore
   (bianco/card scura), creando un header a "doppio colore" ben visibile
   appena il border-bottom sotto è diventato sottile e non copre più la
   giunzione. transparent fa sì che l'header prenda sempre lo stesso sfondo
   della card, qualunque esso sia.
   border-bottom-color in nero/bianco a bassa opacità (overlay), non un grigio
   Tailwind fisso (es. slate-800/gray-900): quei toni hanno una dominante
   fredda che stacca troppo dal resto del pannello, che invece per i bordi
   sottili usa sempre un overlay neutro (vedi --tw-ring-color: color-mix(...
   #fff 10%) sulle card di Filament). L'overlay nero si fonde con qualunque
   sfondo sotto, restando scuro e davvero neutro in entrambi i temi. */
.kk-doc-page .fi-section-header {
    background-color: transparent !important;
    border-bottom-width: 1px !important; /* invece del 3px di default, per non farlo pesare come un bordo colorato */
    border-bottom-color: rgba(0, 0, 0, 0.15) !important;
}

.dark .kk-doc-page .fi-section-header {
    border-bottom-color: rgba(0, 0, 0, 0.45) !important;
}

/* Sfondo della card stessa (.fi-section, non solo l'header) al 30% di
   opacità: stesso colore che usa già Filament di default (bianco in chiaro,
   zinc-900 rgb(24,24,27) in scuro — oklch(0.21 0.006 285.885)), ma
   trasparente, così la card pesa meno visivamente e lascia intravedere lo
   sfondo pagina sotto invece di essere un blocco pieno. */
.kk-doc-page .fi-section {
    background-color: rgba(255, 255, 255, 0.3) !important;
}

.dark .kk-doc-page .fi-section {
    background-color: rgba(24, 24, 27, 0.3) !important;
}

/* Più respiro tra i box (indice sezioni + ogni voce doc-*): qui non c'è
   una griglia schema (.fi-sc-has-gap) a monte come nei form Preventivo/
   Viaggio — la pagina è HTML scritto a mano con <x-filament::section>
   in sequenza, senza margine tra l'una e l'altra di suo. margin-top (non
   -bottom): serve anche PRIMA del primo box, altrimenti resta appiccicato
   al testo sopra ("Un'ipotesi di flusso...") — tra due box consecutivi il
   margin-top del secondo collassa comunque con quello del primo (i div
   id="doc-*" che li avvolgono non hanno padding/bordo propri), niente
   doppio spazio. */
.kk-doc-page .fi-section {
    margin-top: 1.5rem;
}

/* "Indice delle sezioni" è la prima card della pagina: con lo stesso
   margin-top di tutte le altre (1.5rem) restava troppo attaccata all'elenco
   numerato del "Flusso consigliato" appena sopra. .kk-doc-index-section è
   sulla card stessa (vedi documentation.blade.php), non su un div wrapper
   esterno come le altre voci doc-*. */
.kk-doc-page .kk-doc-index-section {
    margin-top: 3rem;
}

/* Più aria dentro ogni box: padding di default di Filament (1.5rem) e
   paragrafi via mb-6 (1.5rem) percepiti troppo compressi col contenuto
   lungo di questa pagina. */
.kk-doc-page .fi-section-content {
    padding: 2rem;
}

.kk-doc-page .fi-section-content p.mb-6 {
    margin-bottom: 2rem;
}

/* Lista numerata "Un'ipotesi di flusso di utilizzo corretto": numeri come
   pastiglie tonde in brand color invece del semplice "1. " in testo,
   staccati dal titolo/descrizione invece di farne parte. */
.kk-doc-page .kk-doc-steps {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin: 0;
    padding: 0;
}

.kk-doc-page .kk-doc-steps > li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.kk-doc-page .kk-doc-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1.75rem;
    height: 1.75rem;
    margin-top: 0.125rem;
    border-radius: 9999px;
    font-size: 0.8125rem;
    font-weight: 700;
    background-color: rgba(151, 70, 17, 0.15);
    color: rgb(151, 70, 17);
}

.dark .kk-doc-page .kk-doc-step-num {
    background-color: rgba(151, 70, 17, 0.3);
    color: rgb(226, 160, 108);
}

/* ==========================================================================
   Pagina Abbonamento — badge "Piano attuale": di serie x-filament::badge
   renderizza uno sfondo tenue (bg-custom-50/10%) con testo colorato, non uno
   sfondo pieno. --c-600 è la CSS custom property che il componente stesso
   inietta inline per istanza (get_color_css_variables, colore del piano
   corrente: ambra/verde) — qui riusata per uno sfondo a piena opacità con
   testo bianco, sia in chiaro che in scuro. Per il piano Free (colore
   "gray"), Filament NON inietta --c-600 (badge.blade.php lo esclude
   apposta quando $color === 'gray'): fallback esplicito al grigio zinc-600
   di Filament (82,82,91, verificato via getComputedStyle) tramite la
   sintassi var(--c-600, fallback).
   ========================================================================== */
.kk-current-plan-badge {
    background-color: rgba(var(--c-600, 82, 82, 91), 1) !important;
    color: #fff !important;
}

/* ==========================================================================
   Pagina Abbonamento — testo secondario/muted (descrizioni, sottotitoli
   prezzo, tabella utilizzi Arturo). Le classi Tailwind dark:text-gray-200/
   300/400 usate per questo testo NON esistono nel bundle CSS di Filament —
   verificato: il bundle contiene solo le combo che i componenti Filament
   stessi usano internamente (qui solo varianti con /opacity, es.
   dark:text-gray-300\/50, non la forma piena) — quindi in dark mode questo
   testo restava sempre color gray-600/500 di *default* (illeggibile su
   sfondo quasi nero), lo stesso problema già noto per i colori cromatici ma
   qui sui grigi. Classe scoped al posto della coppia
   text-gray-600/dark:text-gray-200(0), stesso pattern già in uso sopra.
   ========================================================================== */
.kk-muted-text {
    color: rgb(75, 85, 99); /* gray-600 */
}

.dark .kk-muted-text {
    color: rgb(212, 212, 216); /* zinc-300, contrasto verificato su sfondo #09090b */
}

/* ==========================================================================
   Pagina Abbonamento — banner earlybird in cima: colore fisso #92400e
   (pensato per lo sfondo chiaro dell'inline style) scende a un contrasto
   ~2.4:1 sul nero del pannello in dark mode (verificato via calcolo
   luminanza relativa, sotto la soglia WCAG AA 4.5:1) — qui sovrascritto con
   ambra più chiaro (amber-300, ~11:1 di contrasto sullo sfondo composito).
   ========================================================================== */
.kk-earlybird-banner {
    background: linear-gradient(135deg, rgba(251, 191, 36, .18), rgba(249, 115, 22, .14) 55%, rgba(236, 72, 153, .12));
    border: 1px solid rgba(245, 158, 11, .35);
}

.dark .kk-earlybird-banner {
    color: #fcd34d !important;
    /* Alpha più alta che in chiaro: sullo sfondo quasi nero del pannello in
       dark mode la stessa sfumatura a bassa opacità sparirebbe quasi del
       tutto — qui resta comunque ben visibile. */
    background: linear-gradient(135deg, rgba(251, 191, 36, .22), rgba(249, 115, 22, .20) 55%, rgba(236, 72, 153, .18));
    border-color: rgba(245, 158, 11, .45);
}

.dark .kk-earlybird-banner-icon {
    color: #fcd34d !important;
}

/* ==========================================================================
   Pagina Abbonamento — testo "Sconto → X€" nel box coupon TTG26: bianco in
   dark mode (sfondo verde scuro, buon contrasto) ma illeggibile in light
   mode sullo stesso sfondo verde chiaro (rgba(34,197,94,.15) su bianco è
   quasi bianco anch'esso) — verde scuro di default, bianco solo sotto .dark,
   stesso pattern di kk-earlybird-banner sopra.
   ========================================================================== */
.kk-coupon-discount-text {
    color: #15803d;
}

.dark .kk-coupon-discount-text {
    color: #fff;
}

/* ==========================================================================
   Chip "Earlybird" sulla card piano Pro — sfumatura multicolore opaca
   (a differenza del banner sopra, qui il colore è sempre pieno, non serve
   una variante dark: funziona identica su qualunque sfondo).
   ========================================================================== */
.kk-earlybird-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: linear-gradient(135deg, #fbbf24, #f97316 55%, #ec4899);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
}

.kk-earlybird-chip-icon {
    color: #fff;
}

/* ==========================================================================
   Notifiche persistenti (pannello "campanella") in dark mode: Filament
   genera dinamicamente le classi prima:bg-{color}-500 / dark:[background-
   color:rgba(...)] in base al colore della notifica (warning/danger/
   success/info) — sono valori arbitrari che il bundle CSS di Filament non
   contiene mai (stesso problema già visto per le utility Tailwind non
   comuni su questa pagina, es. h-2.5/w-2.5). Risultato: in dark mode lo
   sfondo restava quello chiaro pensato per la modalità chiara (crema/
   giallo pallido) con testo bianco sopra — praticamente illeggibile.
   Qui un fondo opaco per colore, sempre scuro ma visibile, indipendente
   dalla compilazione di quelle classi.
   ========================================================================== */
.dark div[class*="before:bg-warning-500"] {
    background-color: #78350f !important; /* amber-900 */
}

.dark div[class*="before:bg-danger-500"] {
    background-color: #7f1d1d !important; /* red-900 */
}

.dark div[class*="before:bg-success-500"] {
    background-color: #14532d !important; /* green-900 */
}

.dark div[class*="before:bg-info-500"] {
    background-color: #1e3a8a !important; /* blue-900 */
}

.dark div[class*="before:bg-gray-500"] {
    background-color: #27272a !important; /* zinc-800 */
}

/* ==========================================================================
   Pagina "Invio Email" — tabella provider di riferimento e avviso provider
   consumer: colori sempre inline nella prima versione, mai leggibili in
   dark mode (testo scuro su sfondo che diventa scuro col tema, senza una
   controparte chiara) — stesso principio delle notifiche sopra: classi
   dedicate con override .dark esplicito invece di inline style fissi.
   ========================================================================== */
.kk-provider-table-wrap {
    margin-bottom: 2rem;
    border-color: #e5e7eb;
}

.kk-provider-table thead tr {
    background: #f9fafb;
}

.kk-provider-table thead th {
    color: #374151;
}

.kk-provider-table tbody tr {
    background: #ffffff;
    border-top: 1px solid #f3f4f6;
}

.kk-provider-table tbody td {
    color: #374151;
}

.kk-provider-table tbody td:first-child {
    color: #111827;
}

.dark .kk-provider-table-wrap {
    border-color: rgba(255, 255, 255, .1);
}

.dark .kk-provider-table thead tr {
    background: #27272a;
}

.dark .kk-provider-table thead th {
    color: #d4d4d8;
}

.dark .kk-provider-table tbody tr {
    background: #18181b;
    border-top-color: rgba(255, 255, 255, .08);
}

.dark .kk-provider-table tbody td {
    color: #a1a1aa;
}

.dark .kk-provider-table tbody td:first-child {
    color: #f4f4f5;
}

.kk-mail-warning-box {
    margin-bottom: 2rem;
    background: #fef2f2;
    border: 1px solid #fecaca;
}

.kk-mail-warning-box,
.kk-mail-warning-box strong {
    color: #991b1b;
}

.kk-mail-warning-box-icon {
    color: #dc2626;
}

/* ==========================================================================
   Tabella Moduli (Viaggi/Preventivi) in modalità "Riordina moduli": il
   modulo Hero è sempre il primo in pagina per costruzione (vedi
   QuoteViewData::build()/orderedModules — Hero apre sempre, indipendentemente
   dal sort_order impostato qui), quindi trascinarlo altrove in questa
   tabella non avrebbe comunque alcun effetto in anteprima. Riga bloccata:
   nessuna icona di trascinamento, cursore non-interattivo. Applicata via
   ->recordClasses() in ModulesRelationManager (Trip e Quote), solo quando
   la tabella è davvero in modalità riordino (altrimenti disabiliterebbe
   anche Modifica/Elimina fuori da quella modalità).
   ========================================================================== */
.kk-locked-reorder-row {
    pointer-events: none;
    opacity: 0.6;
}

.kk-locked-reorder-row .cursor-move {
    visibility: hidden;
}

.dark .kk-mail-warning-box {
    background: #450a0a;
    border-color: #7f1d1d;
}

.dark .kk-mail-warning-box,
.dark .kk-mail-warning-box strong {
    color: #fecaca;
}

.dark .kk-mail-warning-box-icon {
    color: #f87171;
}

/* ==========================================================================
   Modale Arturo (crea/riscrivi con AI) — nota "Funzione sperimentale":
   stesso pattern di kk-mail-warning-box sopra, box scoped in luogo di stili
   inline fissi che in dark mode lasciavano testo chiaro (text-amber-300) su
   sfondo chiaro fisso (#fffbeb), quasi illeggibile.
   ========================================================================== */
.kk-arturo-warning-box {
    background: #fffbeb;
    border: 1px solid #fde68a;
}

.kk-arturo-warning-box,
.kk-arturo-warning-box strong {
    color: #92400e;
}

.kk-arturo-warning-box-icon {
    color: #d97706;
}

.dark .kk-arturo-warning-box {
    background: #451a03;
    border-color: #92400e;
}

.dark .kk-arturo-warning-box,
.dark .kk-arturo-warning-box strong {
    color: #fcd34d;
}

.dark .kk-arturo-warning-box-icon {
    color: #fbbf24;
}

/* ==========================================================================
   Dashboard agenzia — widget "Confermati"/"Valore confermato" (esito
   positivo): sfondo verde tenue per farli risaltare rispetto agli altri
   box della stessa riga (Inviati/Modifica richiesta). Sovrascrive il
   bg-white/dark:bg-gray-900 di default del widget Filament (stessa
   necessità di !important già vista sopra per gli altri sfondi custom
   del pannello) — in dark mode un verde troppo chiaro renderebbe il testo
   (pensato per un fondo scuro) illeggibile, quindi qui una tinta scura
   coerente col tema invece di riusare lo stesso verde chiaro del light.
   ========================================================================== */
.kk-stat-positive {
    background-color: #ecfdf5 !important; /* emerald-50 */
}

.dark .kk-stat-positive {
    background-color: rgba(16, 185, 129, 0.12) !important; /* emerald-500 @ 12% */
}

/* ==========================================================================
   Preventivo — menu "Altre azioni" (icona attenzione): le prime due voci
   ("Rigenera token...", "Reimporta moduli...") in testo bianco invece del
   rosso di default del colore danger — su richiesta esplicita dell'utente
   (2026-08-18), sfondo del menù invariato. "Elimina..." resta rossa,
   nessuna classe applicata lì.
   ========================================================================== */
.kk-menu-action-white-text .fi-dropdown-list-item-label {
    color: #fff !important;
}

/* ==========================================================================
   Insight — prime 3 card KPI (Tasso di conversione, Valore confermato,
   Ticket medio): leggermente più alte delle altre, su richiesta esplicita
   dell'utente (2026-08-18) — danno più respiro alla sparkline sotto il
   valore, che di norma riempie lo spazio residuo del box.
   ========================================================================== */
.kk-kpi-tall {
    min-height: 11rem;
}

/* ==========================================================================
   Form Viaggio — riga "Nome del viaggio / Linea di viaggio / Paese / Template":
   Nome del viaggio più largo degli altri tre (35% vs ~21,67% ciascuno).
   Filament 4 non genera più un plain grid-template-columns su .fi-grid: usa
   le custom property --cols-lg/--cols-default (repeat(N, minmax(0, 1fr))),
   impostate via style="" DAL COMPONENTE STESSO — un ->extraAttributes(['style'
   => 'grid-template-columns: ...']) sullo stesso Grid viene silenziosamente
   scartato (verificato via getComputedStyle: il nostro valore non compare mai
   nello style reale dell'elemento .fi-grid, solo le custom property di
   Filament). ->extraAttributes(['class' => 'kk-trip-name-grid']) invece
   viene applicata — ma su un <div> WRAPPER ulteriore che Filament inserisce
   attorno al vero .fi-grid, non sull'elemento stesso (verificato via DOM:
   <div class="kk-trip-name-grid"><div class="fi-grid ...">...). Da qui il
   combinatore di figlio diretto sotto, non un selettore composto.
   21fr:13fr:13fr:13fr = 35% : 21,67% x3 esatto (21+13+13+13=60).
   ========================================================================== */
.kk-trip-name-grid > .fi-grid {
    grid-template-columns: 21fr 13fr 13fr 13fr !important;
}

/* ==========================================================================
   Lista Viaggi — riga di intestazione delle cartelle (il raggruppamento è
   sempre attivo, vedi TripResource::table() ->defaultGroup()): più alta e
   con sfondo ambra tenue (colore primario del pannello) per distinguerla
   dalle righe viaggio normali — stessa convenzione light/dark già usata
   sopra per gli stati positivi della dashboard.
   ========================================================================== */
.fi-ta-group-header-row {
    background-color: #fffbeb !important; /* amber-50 */
}

.dark .fi-ta-group-header-row {
    background-color: rgba(245, 158, 11, 0.12) !important; /* amber-500 @ 12% */
}

.fi-ta-group-header-cell {
    padding-top: 0.875rem;
    padding-bottom: 0.875rem;
}

.fi-ta-group-heading {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Icona cartella via ::before invece che nel testo del titolo del gruppo:
   Filament riusa quel testo anche per l'aria-label del bottone collassa e per
   lo stato Alpine (@js($recordGroupTitle)) — un'icona SVG lì dentro corrompe
   entrambi (verificato). Colore hardcoded (currentColor non funziona su un
   SVG in data-URI di background-image, che non eredita dal DOM). */
.fi-ta-group-heading::before {
    content: "";
    display: inline-block;
    width: 1.125rem;
    height: 1.125rem;
    flex-shrink: 0;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='%23b45309'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z'/%3E%3C/svg%3E");
}

.dark .fi-ta-group-heading::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='%23fbbf24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z'/%3E%3C/svg%3E");
}

/* Riga viaggio "figlia" di una cartella (vedi ->formatStateUsing() sulla
   colonna 'name' in TripResource::table()): icona connettore + lieve
   rientro, per segnalare l'appartenenza senza una seconda riga di testo.
   Icona via ::before (stesso motivo dell'header di gruppo sopra: l'HTML
   della colonna passa comunque da Str::sanitizeHtml(), che toglie <svg>). */
.kk-trip-child-row {
    display: inline-flex;
    align-items: center;
    padding-left: 1.375rem;
}

.kk-trip-child-row::before {
    content: "";
    display: inline-block;
    width: 0.875rem;
    height: 0.875rem;
    margin-right: 0.375rem;
    flex-shrink: 0;
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0.6;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='%236b7280'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m16.49 12 3.75 3.75m0 0-3.75 3.75m3.75-3.75H3.74V4.499'/%3E%3C/svg%3E");
}

/* Pulsante "Crea cartella" nella toolbar della lista Viaggi: stessa icona
   cartella ambra dell'header di gruppo sopra, testo grigio discreto accanto
   (il ->color('gray') di Filament rende comunque il testo bianco pieno in
   dark mode, verificato — va forzato). Filament\Actions\Action non separa il
   colore dell'icona da quello del pulsante, quindi entrambi via CSS: la
   regola sull'icona (selettore discendente, più specifico) vince su quella
   del pulsante per l'elemento <svg>, quella del pulsante resta per il testo. */
.kk-create-folder-action {
    color: #6b7280 !important; /* gray-500, per il testo */
}

.kk-create-folder-action svg {
    color: #b45309 !important; /* amber-700 */
}

.dark .kk-create-folder-action svg {
    color: #fbbf24 !important; /* amber-400 */
}

/* Icona cartella nel menu a tendina "Viaggio" (Preventivi: form e filtro
   lista, QuoteResource::groupedTripOptions()) — stessa icona ambra
   dell'header di gruppo nella lista Viaggi. Selettore scoped a
   .fi-select-input-option-group (non il generico .fi-dropdown-header, che
   Filament riusa per altri menu dell'admin — es. azioni, notifiche — dove
   non deve comparire). Verificato via DOM: l'header del gruppo qui non è un
   <optgroup> nativo ma un div renderizzato da Filament, quindi CSS pieno. */
.fi-select-input-option-group .fi-dropdown-header {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.fi-select-input-option-group .fi-dropdown-header::before {
    content: "";
    display: inline-block;
    width: 0.875rem;
    height: 0.875rem;
    flex-shrink: 0;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='%23b45309'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z'/%3E%3C/svg%3E");
}

.dark .fi-select-input-option-group .fi-dropdown-header::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='%23fbbf24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z'/%3E%3C/svg%3E");
}

/* Rientro delle opzioni dentro un gruppo (stesso menu di sopra): erano allo
   stesso livello del testo dell'header, senza distinguerle visivamente dalle
   opzioni piatte fuori dai gruppi. Selettore scoped a .fi-dropdown-list
   dentro .fi-select-input-option-group — non tocca le opzioni piatte, che
   sono figlie dirette della lista principale, non di questo sotto-elenco. */
.fi-select-input-option-group .fi-dropdown-list .fi-select-input-option {
    padding-left: 1.5rem !important;
}

/* Stessa icona connettore "figlio" della lista Viaggi (.kk-trip-child-row)
   accanto al rientro sopra — il <li> è già display:flex/align-items:center
   di suo (verificato), il ::before si allinea inline senza altro layout. */
.fi-select-input-option-group .fi-dropdown-list .fi-select-input-option::before {
    content: "";
    display: inline-block;
    width: 0.75rem;
    height: 0.75rem;
    margin-right: 0.375rem;
    flex-shrink: 0;
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0.6;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='%236b7280'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m16.49 12 3.75 3.75m0 0-3.75 3.75m3.75-3.75H3.74V4.499'/%3E%3C/svg%3E");
}

/* Colore della select nativa "Stato" nella lista Preventivi, in base al
   valore selezionato (data-status, marcato via script in AdminPanelProvider
   — un <select> non è colorabile per valore in puro CSS). Stessa mappatura
   semantica di App\Enums\QuoteStatus::getColor(), tradotta nei toni già
   usati nel resto del pannello (ambra per warning, coerente con le altre
   regole sopra; verde/rosso/blu standard altrove non ancora presenti qui,
   quindi in linea con la palette Filament di default per quei tre). */
.kk-quote-status-select[data-status="draft"],
.kk-quote-status-select[data-status="archived"] {
    background-color: #f3f4f6 !important; /* gray-100 */
    color: #374151 !important; /* gray-700 */
    border-color: #d1d5db !important; /* gray-300 */
}

.dark .kk-quote-status-select[data-status="draft"],
.dark .kk-quote-status-select[data-status="archived"] {
    background-color: rgba(107, 114, 128, 0.15) !important;
    color: #9ca3af !important; /* gray-400 */
    border-color: rgba(107, 114, 128, 0.4) !important;
}

.kk-quote-status-select[data-status="published"],
.kk-quote-status-select[data-status="confirmed"] {
    background-color: #ecfdf5 !important; /* emerald-50 */
    color: #047857 !important; /* emerald-700 */
    border-color: #a7f3d0 !important; /* emerald-200 */
}

.dark .kk-quote-status-select[data-status="published"],
.dark .kk-quote-status-select[data-status="confirmed"] {
    background-color: rgba(16, 185, 129, 0.15) !important;
    color: #34d399 !important; /* emerald-400 */
    border-color: rgba(16, 185, 129, 0.4) !important;
}

.kk-quote-status-select[data-status="sent"] {
    background-color: #eff6ff !important; /* blue-50 */
    color: #1d4ed8 !important; /* blue-700 */
    border-color: #bfdbfe !important; /* blue-200 */
}

.dark .kk-quote-status-select[data-status="sent"] {
    background-color: rgba(59, 130, 246, 0.15) !important;
    color: #60a5fa !important; /* blue-400 */
    border-color: rgba(59, 130, 246, 0.4) !important;
}

.kk-quote-status-select[data-status="change_requested"] {
    background-color: #fffbeb !important; /* amber-50 */
    color: #b45309 !important; /* amber-700 */
    border-color: #fde68a !important; /* amber-200 */
}

.dark .kk-quote-status-select[data-status="change_requested"] {
    background-color: rgba(245, 158, 11, 0.15) !important;
    color: #fbbf24 !important; /* amber-400 */
    border-color: rgba(245, 158, 11, 0.4) !important;
}

.kk-quote-status-select[data-status="unpublished"],
.kk-quote-status-select[data-status="cancelled"] {
    background-color: #fef2f2 !important; /* red-50 */
    color: #b91c1c !important; /* red-700 */
    border-color: #fecaca !important; /* red-200 */
}

.dark .kk-quote-status-select[data-status="unpublished"],
.dark .kk-quote-status-select[data-status="cancelled"] {
    background-color: rgba(239, 68, 68, 0.15) !important;
    color: #f87171 !important; /* red-400 */
    border-color: rgba(239, 68, 68, 0.4) !important;
}

/* ToggleButtons "Stato" nel form Preventivo (grouped): di default Filament
   dà a .fi-btn-group un w-max (si stringe al contenuto) — qui lo forziamo a
   riempire tutta la riga, con ogni bottone che cresce in proporzione invece
   di restare largo quanto la sua etichetta. */
.kk-quote-status-toggle.fi-btn-group {
    width: 100% !important;
}

.kk-quote-status-toggle.fi-btn-group label.fi-btn {
    flex: 1 1 0% !important;
    justify-content: center !important;
}

/* Stacco visivo tra i 4 stati manuali e i 2 "guidati dal cliente" (Confermato,
   Modifica richiesta — sempre gli ultimi due, vedi ordine in
   QuoteResource::statusGroups()), dove prima (versione Select con optgroup)
   c'era un divisore esplicito.
   Il ring di Filament (--tw-ring-color, il "bordo" visibile) è disegnato UNA
   VOLTA SOLA sul contenitore .fi-btn-group, non sui singoli bottoni: con un
   gap in mezzo restava comunque un unico bordo che avvolgeva entrambi i
   sottogruppi (compreso lo spazio vuoto), invece di due bordi separati.
   Fix: bordo del contenitore rimosso, ridisegnato come ring "inset" su ogni
   singolo bottone — così ogni sottogruppo ha il proprio contorno completo,
   staccato per davvero da quello dell'altro. :nth-child(N of .fi-btn) conta
   solo i <label class="fi-btn">, ignorando gli <input> radio intercalati nel
   DOM (stessa sintassi già usata da Filament per il primo/ultimo bottone del
   gruppo — non un'invenzione nostra). */
.kk-quote-status-toggle.fi-btn-group {
    box-shadow: none !important;
}

.kk-quote-status-toggle.fi-btn-group > .fi-btn {
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15) !important;
}

.dark .kk-quote-status-toggle.fi-btn-group > .fi-btn {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15) !important;
}

/* Filament dà di suo margin-inline-end:1px a ogni bottone non-ultimo (per
   fare spazio al bordo -1px che applica lui stesso tra i bottoni) — con il
   bordo qui sostituito dal box-shadow inset sopra, quel margine restava
   come uno spazio vuoto visibile tra un bottone e l'altro dello stesso
   sottogruppo. Azzerato: i bottoni dello stesso sottogruppo restano
   davvero attaccati, il distacco tra sottogruppi resta solo quello voluto
   sotto (margin-inline-start sul primo bottone del secondo sottogruppo). */
.kk-quote-status-toggle.fi-btn-group > .fi-btn {
    margin-inline-end: 0 !important;
}

.kk-quote-status-toggle.fi-btn-group > .fi-btn:nth-child(4 of .fi-btn) {
    border-start-end-radius: var(--radius-lg) !important;
    border-end-end-radius: var(--radius-lg) !important;
}

.kk-quote-status-toggle.fi-btn-group > .fi-btn:nth-child(5 of .fi-btn) {
    margin-inline-start: 0.75rem !important;
    border-start-start-radius: var(--radius-lg) !important;
    border-end-start-radius: var(--radius-lg) !important;
}

/* Hover sui pulsanti Stato NON selezionati con il colore associato: di
   default Filament dipinge lo sfondo colorato (--bg/--hover-bg) solo sul
   bottone già selezionato (selettori vendor `input:checked+label...`) — gli
   altri restano bianchi anche al passaggio del mouse, pur avendo già le
   classi hover:fi-bg-color-300/hover:fi-text-color-800 che aggiornano le
   variabili --hover-bg/--hover-text (mai consumate senza :checked, vedi
   public/css/filament/filament/app.css). Qui le riusiamo con un consumer
   scoped al gruppo Stato, per il caso "non selezionato" mancante — così
   l'hover anticipa il colore che il bottone avrebbe se selezionato. */
@media (hover: hover) {
    .kk-quote-status-toggle.fi-btn-group > input:not(:checked) + label.fi-btn.fi-color:hover {
        background-color: var(--hover-bg) !important;
        color: var(--hover-text) !important;
    }

    .dark .kk-quote-status-toggle.fi-btn-group > input:not(:checked) + label.fi-btn.fi-color:hover {
        background-color: var(--dark-hover-bg) !important;
        color: var(--dark-hover-text) !important;
    }
}

/* Icona "?" discreta subito dopo il titolo pagina (Preventivi/Viaggi/
   Clienti/Moduli), vedi App\Filament\Support\TableHelpAction. Il bottone
   Filament reale resta montato ma nascosto: questo è solo il trigger visivo. */
.kk-help-hidden-trigger {
    display: none !important;
}

.kk-help-inline-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    margin-left: .375rem;
    padding: 0;
    border: 1px solid rgb(156 163 175); /* gray-400 */
    border-radius: 9999px;
    background: transparent;
    color: rgb(107 114 128); /* gray-500 */
    font-size: .6875rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    vertical-align: middle;
}
.kk-help-inline-trigger:hover {
    border-color: rgb(107 114 128);
    color: rgb(55 65 81);
}
.dark .kk-help-inline-trigger {
    border-color: rgb(75 85 99); /* gray-600 */
    color: rgb(156 163 175);
}
.dark .kk-help-inline-trigger:hover {
    border-color: rgb(156 163 175);
    color: rgb(229 231 235);
}

/* Form Preventivo (create/edit): più respiro tra i box Section (Dati
   principali, Linea di viaggio e partenze/Promozioni, Pubblicazione) — il
   gap-6 (24px) di default di Filament li teneva troppo ravvicinati.
   .fi-sc-has-gap è la classe generica di ogni griglia schema, quindi lo
   scope resta .fi-resource-quotes per non toccare le altre risorse. */
.fi-resource-quotes .fi-sc-has-gap {
    gap: 2.5rem;
}

/* Stessa spaziatura sulla pagina di modifica Viaggio (solo edit, non
   create: lì "Dati viaggio" è l'unico box, l'extra respiro non serve) —
   .fi-sc-has-gap qui distanzia anche il form "Dati viaggio" dal blocco
   Moduli sotto, entrambi figli diretti della stessa griglia di pagina. */
.fi-resource-trips.fi-resource-edit-record-page .fi-sc-has-gap {
    gap: 2.5rem;
}