/* ============================================================
   Liquid Glass (glassmorphism) - stili condivisi
   ------------------------------------------------------------
   Incluso globalmente da app/layout.html, quindi disponibile
   in TUTTI i template. Usa classi riutilizzabili:

     .glass            -> contenitore generico in vetro
     .glass-card       -> card Bootstrap in vetro
     .glass-grouped    -> tabella con righe raggruppate in vetro
     .glass-modal      -> modal Bootstrap in vetro
     .glass-backdrop   -> sfondo sfocato dietro al modal

   Per le tabelle raggruppate aggiungere la classe .glass-grouped
   alla <table> e applicare via JS le classi di riga:
     group-glass, group-start, group-shade, group-end,
     customer-continues
   ============================================================ */

/* ---------- Contenitore generico in vetro ---------- */
.glass {
    position: relative;
    background: rgba(255, 255, 255, 0.55);
    -webkit-backdrop-filter: blur(18px) saturate(180%);
    backdrop-filter: blur(18px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 20px;
    box-shadow:
        0 8px 32px rgba(31, 38, 135, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
/* Riflesso luminoso superiore tipico del vetro */
.glass::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0) 45%);
    pointer-events: none;
}
.glass > * {
    position: relative;
    z-index: 1;
}

/* ---------- Card filtri/contenuti in vetro ---------- */
.glass-card {
    background: rgba(255, 255, 255, 0.55);
    -webkit-backdrop-filter: blur(18px) saturate(180%);
    backdrop-filter: blur(18px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.6) !important;
    border-radius: 20px !important;
    box-shadow:
        0 8px 32px rgba(31, 38, 135, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.7);

}
/* Header in vetro SOLO se non ha già uno sfondo colorato Bootstrap
   (bg-primary, bg-success, bg-dark, text-bg-*, ...). In quel caso
   mantiene il proprio colore e arrotonda solo gli angoli superiori. */
.glass-card > .card-header:not([class*="bg-"]):not([class*="text-bg-"]) {
    background: rgba(255, 255, 255, 0.25);
    border-bottom: 1px solid rgba(255, 255, 255, 0.45);
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    font-weight: 600;
}
.glass-card > .card-header[class*="bg-"],
.glass-card > .card-header[class*="text-bg-"] {
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}

/* ============================================================
   Tabelle con raggruppamento "lastra di vetro"
   ============================================================ */
.glass-grouped {
    border-collapse: separate;
    border-spacing: 0;
}

/* Sfondo vetro translucido per ogni riga di gruppo */
.glass-grouped tbody tr.group-glass > td {
    background-color: rgba(255, 255, 255, 0.55);
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0));
    -webkit-backdrop-filter: blur(10px) saturate(160%);
    backdrop-filter: blur(10px) saturate(160%);
    border-top: 1px solid transparent;
    border-bottom: 1px solid transparent;
    transition: background-color 0.15s ease;
}
/* Tinta alternata per distinguere lastre adiacenti */
.glass-grouped tbody tr.group-glass.group-shade > td {
    background-color: rgba(232, 240, 254, 0.5);
}
/* Evidenziazione hover coerente col vetro */
.glass-grouped tbody tr.group-glass:hover > td {
    background-color: rgba(255, 255, 255, 0.75);
}
/* Bordi laterali luminosi della lastra */
.glass-grouped tbody tr.group-glass > td:first-child {
    border-left: 1px solid rgba(255, 255, 255, 0.7);
}
.glass-grouped tbody tr.group-glass > td:last-child {
    border-right: 1px solid rgba(255, 255, 255, 0.7);
}

/* Prima riga del gruppo: bordo/angoli superiori e riflesso */
.glass-grouped tbody tr.group-start.group-glass > td {
    border-top: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
/* Spazio tra una lastra e l'altra (gap trasparente) */
.glass-grouped tbody tr.group-start.group-glass:not(:first-child) > td {
    border-top: 14px solid transparent;
}
.glass-grouped tbody tr.group-start.group-glass > td:first-child {
    border-top-left-radius: 16px;
}
.glass-grouped tbody tr.group-start.group-glass > td:last-child {
    border-top-right-radius: 16px;
}

/* Ultima riga del gruppo: bordo/angoli inferiori e ombra morbida */
.glass-grouped tbody tr.group-end.group-glass > td {
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 6px 18px rgba(31, 38, 135, 0.10);
}
.glass-grouped tbody tr.group-end.group-glass > td:first-child {
    border-bottom-left-radius: 16px;
}
.glass-grouped tbody tr.group-end.group-glass > td:last-child {
    border-bottom-right-radius: 16px;
}

/* Cella "Contraente" unita: niente linea interna tra righe dello stesso gruppo */
.glass-grouped tbody tr.customer-continues > td:nth-child(2) {
    border-bottom-color: transparent;
}
.glass-grouped .btn-load-customer {
    white-space: normal;
    text-align: left;
}

/* ============================================================
   Tabelle generiche in vetro (.glass-table)
   ------------------------------------------------------------
   Applicata automaticamente da glass.js alle tabelle Bootstrap
   "semplici" dentro lo scope, ESCLUSE quelle con header/colonne
   sticky, quelle nei modal, le .glass-grouped e le tabelle scure.
   ============================================================ */
.glass-table {
    --bs-table-bg: transparent;
    background: rgba(255, 255, 255, 0.30);
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 6px 20px rgba(31, 38, 135, 0.10);
}
/* Intestazione translucida */
.glass-table > thead > tr > th {
    background: rgba(255, 255, 255, 0.45);
    border-bottom: 1px solid rgba(255, 255, 255, 0.6);
    border-top: 0;
}
/* Celle del corpo trasparenti, linee orizzontali morbide */
.glass-table > tbody > tr > td,
.glass-table > tbody > tr > th {
    background-color: transparent;
    border-top-color: rgba(0, 0, 0, 0.06);
}
/* Hover coerente col vetro */
.glass-table > tbody > tr:hover > * {
    background-color: rgba(255, 255, 255, 0.5);
}
/* Footer translucido */
.glass-table > tfoot > tr > td,
.glass-table > tfoot > tr > th {
    background-color: rgba(255, 255, 255, 0.35);
    border-top: 1px solid rgba(255, 255, 255, 0.55);
}

/* ============================================================
   Modal "Liquid Glass"
   ============================================================ */
.glass-modal .modal-content {
    background: rgba(255, 255, 255, 0.6);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    backdrop-filter: blur(24px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.65);
    border-radius: 24px;
    box-shadow:
        0 12px 48px rgba(31, 38, 135, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
    overflow: hidden;
}
.glass-modal .modal-header:not([class*="bg-"]):not([class*="text-bg-"]),
.glass-modal .modal-footer:not([class*="bg-"]):not([class*="text-bg-"]) {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.4);
}
.glass-modal .modal-title {
    font-weight: 600;
}
.glass-modal .modal-body .table {
    background: transparent;
    --bs-table-bg: transparent;
}
.glass-modal .modal-body .table > thead {
    background: rgba(255, 255, 255, 0.35);
}
.glass-modal .modal-body .table > tbody tr:hover > * {
    background: rgba(255, 255, 255, 0.45);
}
/* Badge più morbidi, coerenti con il vetro */
.glass-modal .badge {
    border-radius: 10px;
    font-weight: 500;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

/* Sfondo sfocato dietro al modal, in stile vetro scuro */
.modal-backdrop.glass-backdrop {
    background: rgba(20, 22, 30, 0.35);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
.modal-backdrop.glass-backdrop.show {
    opacity: 1;
}

/* ============================================================
   Fallback: browser senza supporto a backdrop-filter
   ============================================================ */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .glass,
    .glass-card,
    .glass-modal .modal-content {
        background: rgba(255, 255, 255, 0.96);
    }
    .glass-grouped tbody tr.group-glass > td {
        background-color: rgba(246, 248, 250, 0.98);
    }
    .glass-grouped tbody tr.group-glass.group-shade > td {
        background-color: rgba(232, 240, 254, 0.98);
    }
    .glass-table {
        background: rgba(255, 255, 255, 0.96);
    }
}

/* ============================================================
   Opt-out: aggiungere la classe .no-glass a una .card o a un
   .modal per escluderli dall'auto-styling globale (vedi glass.js).
   ============================================================ */

/* ============================================================
   Stampa: niente effetto vetro su carta / PDF / etichette.
   Le trasparenze e i backdrop-filter non rendono bene in stampa.
   ============================================================ */
@media print {
    .glass,
    .glass-card,
    .glass-modal .modal-content,
    .glass-table {
        background: #fff !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        box-shadow: none !important;
        border: 1px solid #ddd !important;
    }
    .glass-grouped tbody tr.group-glass > td {
        background: #fff !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }
}

/* ============================================================
   Ottimizzazioni MOBILE / smartphone (max-width: 576px)
   ------------------------------------------------------------
   Il backdrop-filter con blur elevato è costoso sulle GPU mobili
   e causa scroll a scatti. Su schermi piccoli si riduce il blur,
   si rimpiccioliscono raggi/ombre e si aumenta leggermente
   l'opacità degli sfondi per migliorare la leggibilità.
   ============================================================ */
@media (max-width: 576px) {
    .glass,
    .glass-card {
        background: rgba(255, 255, 255, 0.78);
        -webkit-backdrop-filter: blur(8px) saturate(150%);
        backdrop-filter: blur(8px) saturate(150%);
        border-radius: 14px !important;
        box-shadow: 0 4px 14px rgba(31, 38, 135, 0.12);
    }
    /* Riflesso superiore meno marcato (riduce overdraw) */
    .glass::before {
        opacity: 0.6;
    }
    .glass-card > .card-header:not([class*="bg-"]):not([class*="text-bg-"]) {
        border-top-left-radius: 14px;
        border-top-right-radius: 14px;
    }
    .glass-modal .modal-content {
        background: rgba(255, 255, 255, 0.82);
        -webkit-backdrop-filter: blur(10px) saturate(150%);
        backdrop-filter: blur(10px) saturate(150%);
        border-radius: 16px;
    }
    /* Backdrop del modal: blur minimo per fluidità */
    .modal-backdrop.glass-backdrop {
        -webkit-backdrop-filter: blur(3px);
        backdrop-filter: blur(3px);
    }
    /* Tabelle in vetro: blur più leggero, angoli ridotti.
       Il raggio sulle lastre raggruppate viene attenuato per non
       "tagliarsi" durante lo scroll orizzontale su schermi stretti. */
    .glass-table {
        background: rgba(255, 255, 255, 0.82);
        border-radius: 10px;
        box-shadow: 0 4px 12px rgba(31, 38, 135, 0.08);
    }
    .glass-grouped tbody tr.group-glass > td {
        -webkit-backdrop-filter: blur(5px) saturate(140%);
        backdrop-filter: blur(5px) saturate(140%);
    }
    .glass-grouped tbody tr.group-start.group-glass:not(:first-child) > td {
        border-top-width: 8px;
    }
}

/* ============================================================
   Accessibilità: trasparenza ridotta (iOS "Riduci trasparenza",
   Windows, ecc.). Si eliminano blur e translucenza a favore di
   sfondi pieni, mantenendo il contrasto.
   ============================================================ */
@media (prefers-reduced-transparency: reduce) {
    .glass,
    .glass-card,
    .glass-modal .modal-content,
    .glass-table {
        background: #fff !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        border: 1px solid #e0e3e8 !important;
    }
    .glass::before {
        display: none;
    }
    .glass-grouped tbody tr.group-glass > td {
        background-color: #f6f8fa !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }
    .glass-grouped tbody tr.group-glass.group-shade > td {
        background-color: #e8f0fe !important;
    }
    .modal-backdrop.glass-backdrop {
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }
}

/* ============================================================
   Accessibilità: movimento ridotto. Disattiva le transizioni
   degli elementi in vetro per chi preferisce meno animazioni.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .glass-grouped tbody tr.group-glass > td {
        transition: none;
    }
}