/* ============================================================
   Azioni JOORNA — un solo disegno per le icone delle azioni
   ------------------------------------------------------------
   Icone: set outline unico e sinonimi ricondotti all'icona canonica
   (App\Filament\Support\ActionIcons, override di
   filament::components.icon). Qui misure e colori, per tutte le
   pagine:

   - Azioni di riga (.jo-row-actions, override
     filament-tables::components.actions): pulsante 28px, icona 16px,
     gap 2px costante, sempre su una riga. Colore neutro; rosso solo
     per le azioni distruttive (color danger). Hover con fondo tenue.
   - Menu a tre puntini e tendine: voci neutre, icona 16px; rosso
     solo per le distruttive.
   - Icone nei pulsanti con etichetta: 16px, allineate al testo.
   ============================================================ */

/* ── Azioni di riga (e pulsanti-icona scritti a mano, .jo-icon-btn:
      card delle automazioni e simili; stesso disegno) ──────── */
.fi-ta-actions.jo-row-actions {
    flex-wrap: nowrap;
    gap: 2px;
    white-space: nowrap;
}

.jo-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.jo-row-actions .fi-icon-btn.fi-icon-btn,
.jo-icon-btn {
    width: 28px;
    height: 28px;
    margin: 0;
    border-radius: 7px;
    color: var(--jo-ui-muted);
    transition: background-color 0.1s ease, color 0.1s ease;
}

.jo-row-actions .fi-icon-btn .fi-icon-btn-icon,
.jo-icon-btn svg {
    width: 16px;
    height: 16px;
}

.jo-row-actions .fi-icon-btn.fi-icon-btn:hover,
.jo-row-actions .fi-icon-btn.fi-icon-btn:focus-visible,
.jo-row-actions .fi-dropdown-trigger[aria-expanded='true'] .fi-icon-btn.fi-icon-btn,
.jo-icon-btn:hover,
.jo-icon-btn:focus-visible {
    background: var(--jo-ui-soft);
    color: var(--jo-ui-ink);
}

.jo-row-actions .fi-icon-btn.fi-icon-btn:focus-visible,
.jo-icon-btn:focus-visible {
    outline: 2px solid var(--jo-ui-accent);
    outline-offset: -2px;
    box-shadow: none;
}

/* Distruttive: rosso, sempre riconoscibili. */
.jo-row-actions .fi-icon-btn.fi-icon-btn.fi-color-danger,
.jo-icon-btn.is-danger {
    color: var(--jo-ui-danger);
}

.jo-row-actions .fi-icon-btn.fi-icon-btn.fi-color-danger:hover,
.jo-row-actions .fi-icon-btn.fi-icon-btn.fi-color-danger:focus-visible,
.jo-icon-btn.is-danger:hover,
.jo-icon-btn.is-danger:focus-visible {
    background: var(--jo-ui-danger-bg);
    color: var(--jo-ui-danger);
}

/* Badge sulle icone (contatori): piccolo, non copre l'icona vicina. */
.jo-row-actions .fi-icon-btn-badge-ctn {
    top: 2px;
}

/* ── Menu a tre puntini e tendine delle azioni ─────────────── */
.fi-dropdown-panel .fi-dropdown-list-item .fi-dropdown-list-item-icon {
    width: 16px;
    height: 16px;
}

.fi-dropdown-panel .fi-dropdown-list-item.fi-color-custom:not(.fi-color-danger) {
    --c-50: var(--jo-ui-soft);
}

.fi-dropdown-panel .fi-dropdown-list-item:not(.fi-color-danger) .fi-dropdown-list-item-icon {
    color: var(--jo-ui-muted);
}

.fi-dropdown-panel .fi-dropdown-list-item.fi-color-custom:not(.fi-color-danger) .fi-dropdown-list-item-label {
    color: var(--jo-ui-ink);
}

.fi-dropdown-panel .fi-dropdown-list-item.fi-color-custom:not(.fi-color-danger):hover {
    background: var(--jo-ui-soft);
}

.fi-dropdown-panel .fi-dropdown-list-item.fi-color-danger .fi-dropdown-list-item-icon,
.fi-dropdown-panel .fi-dropdown-list-item.fi-color-danger .fi-dropdown-list-item-label {
    color: var(--jo-ui-danger);
}

/* ── Pulsanti con etichetta: meno colore ───────────────────
 * Il colore pieno è della CTA primaria (e del pericolo). Le azioni
 * colorate success/info/warning (Importa, Sincronizza, Testa
 * connessione, Avvia training…) sono neutre ovunque; fanno eccezione
 * i pulsanti di conferma dei modali, che confermano quell'azione. */
.fi-btn:is(.fi-color-success, .fi-color-info, .fi-color-warning):not(.fi-btn-outlined):not(.fi-modal-footer-actions .fi-btn) {
    background: var(--jo-ui-surface) !important;
    box-shadow: 0 0 0 1px rgb(22 22 42 / 12%) !important;
    color: var(--jo-ui-ink) !important;
}

.fi-btn:is(.fi-color-success, .fi-color-info, .fi-color-warning):not(.fi-btn-outlined):not(.fi-modal-footer-actions .fi-btn) .fi-btn-icon {
    color: var(--jo-ui-muted) !important;
}

.fi-btn:is(.fi-color-success, .fi-color-info, .fi-color-warning):not(.fi-btn-outlined):not(.fi-modal-footer-actions .fi-btn):hover {
    background: var(--jo-ui-soft) !important;
}

/* Pericolo fuori dai modali ("Elimina" in testata): bordo e testo rossi,
   mai un blocco rosso pieno accanto al titolo. Il rosso pieno resta al
   pulsante di conferma del modale, che è l'azione vera. */
.fi-btn.fi-color-danger:not(.fi-btn-outlined):not(.fi-modal-footer-actions .fi-btn) {
    background: var(--jo-ui-surface) !important;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--jo-ui-danger) 35%, transparent) !important;
    color: var(--jo-ui-danger) !important;
}

.fi-btn.fi-color-danger:not(.fi-btn-outlined):not(.fi-modal-footer-actions .fi-btn) .fi-btn-icon {
    color: var(--jo-ui-danger) !important;
}

.fi-btn.fi-color-danger:not(.fi-btn-outlined):not(.fi-modal-footer-actions .fi-btn):hover {
    background: var(--jo-ui-danger-bg) !important;
}

/* ── Icone nei pulsanti con etichetta ─────────────────────── */
.fi-btn > .fi-btn-icon {
    width: 16px;
    height: 16px;
}

.dark .fi-btn:is(.fi-color-success, .fi-color-info, .fi-color-warning):not(.fi-btn-outlined):not(.fi-modal-footer-actions .fi-btn) {
    box-shadow: 0 0 0 1px rgb(255 255 255 / 20%) !important;
}

/* Azioni a icona della testata (owner 7-ott-2026, "niente sovrapposizioni"):
   Filament dà ai pulsanti-icona un margine negativo pensato per icone piccole;
   da noi sono tessere da 36px e si accavallavano. In testata stanno a 4px. */
.fi-header .fi-icon-btn,
.fi-page-header .fi-icon-btn {
    margin: 0 !important;
}
.fi-header .fi-ac:has(.fi-icon-btn) {
    gap: 4px;
}

/* Gruppi di pulsanti-icona scritti a mano (es. Preferenze ospite ▸ azioni
   della sezione): niente margine negativo di Filament, un piccolo passo fra
   le icone, così a 390px non si accavallano. */
.jo-sfe-actions {
    gap: 2px;
}
.jo-sfe-actions .fi-icon-btn {
    margin: 0 !important;
}

/* Colonna Azioni, schema unico (owner 7-ott-2026, RowActions): occhio,
   cestino e tre puntini sempre nello stesso posto. Dove per un record
   un'azione non è permessa resta la sua icona spenta; dove la riga non ha
   altre azioni resta lo spazio dei tre puntini, così le icone sono in
   colonna fra le righe. */
.jo-row-actions .jo-row-slot {
    display: inline-flex;
    flex: none;
}

.jo-row-actions .jo-row-slot-empty {
    width: 28px;
    height: 28px;
}

.jo-row-actions .jo-row-slot .fi-icon-btn[disabled],
.jo-row-actions .fi-icon-btn.fi-icon-btn[disabled] {
    opacity: 0.38;
    cursor: not-allowed;
    background: transparent;
}

/* Menu dei tre puntini a sole icone (owner 7-ott-2026, App\Filament\Support\IconMenu):
   le voci sono icone outline da 16px con il nome nel tooltip, in una fila (a capo
   in griglia compatta se tante), area di clic 32px come le icone di riga; le
   distruttive in rosso. Il nome resta per i lettori di schermo. */
.fi-dropdown-panel:has(> .jo-icon-menu),
.fi-dropdown-panel:has(> div > .jo-icon-menu) {
    width: max-content !important;
    max-width: min(296px, calc(100vw - 32px)) !important;
    /* Sopra le anteprime ferme a destra (barra strumenti dell'anteprima). */
    z-index: 45 !important;
}

.fi-dropdown-list.jo-icon-menu {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    padding: 4px;
    max-width: calc(8 * 34px + 8px);
}

.jo-icon-menu > .fi-dropdown-list-item,
.jo-icon-menu > * > .fi-dropdown-list-item {
    width: 32px;
    height: 32px;
    padding: 0;
    justify-content: center;
    gap: 0;
    border-radius: 8px;
    color: var(--ds-text-tertiary, #5B5B6B);
}

.jo-icon-menu .fi-dropdown-list-item-icon {
    width: 16px;
    height: 16px;
    color: currentColor;
}

.jo-icon-menu .fi-dropdown-list-item:not(.fi-color-danger):hover,
.jo-icon-menu .fi-dropdown-list-item:not(.fi-color-danger):focus-visible {
    background: var(--ds-surface-hover, #ECEEF3);
    color: var(--ds-text-primary, #18181B);
}

.jo-icon-menu .fi-dropdown-list-item.fi-color-danger {
    color: var(--jo-ui-danger);
}

.jo-icon-menu .fi-dropdown-list-item.fi-color-danger:hover,
.jo-icon-menu .fi-dropdown-list-item.fi-color-danger:focus-visible {
    background: var(--jo-ui-danger-bg);
}

.jo-icon-menu .fi-dropdown-list-item-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* Un badge (conteggio) resta in vista, piccolo nell'angolo. */
.jo-icon-menu .fi-dropdown-list-item {
    position: relative;
}

.jo-icon-menu .fi-dropdown-list-item .fi-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    min-width: 16px;
    padding: 0 3px;
    font-size: 10px;
    line-height: 14px;
}

/* Telefono: area di tocco 40px. */
@media (max-width: 640px) {
    .jo-icon-menu > .fi-dropdown-list-item,
    .jo-icon-menu > * > .fi-dropdown-list-item {
        width: 40px;
        height: 40px;
    }
}