/* assets/css/client_orders.css */

#modalClientHistory .modal-dialog.modal-fullscreen {
    /* Assicurati che prenda tutta l'altezza disponibile */
    height: 100vh;
    max-height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: #f9fafb; /* Sfondo leggermente grigio per la modale */
}

#modalClientHistory .modal-content {
   flex-grow: 1; /* Fa espandere il contenuto */
   overflow-y: hidden; /* Nasconde scrollbar sul content, la gestiamo sul body */
   border: none; /* Rimuovi bordi default */
   box-shadow: none; /* Rimuovi ombra default */
   background-color: transparent; /* Sfondo trasparente, usiamo quello della modale */
}

#modalClientHistory .modal-header {
    background-color: var(--colore-principale);
    border-bottom: 1px solid #e5e7eb;
    padding: 1rem 1.5rem;
    flex-shrink: 0; /* Impedisce all'header di restringersi */
    color: #fff;
    height: 60px;
}

#modalClientHistory .modal-header .modal-title {
    font-weight: 600;
    /* color: #111827; */
    font-size: 1.1rem; /* Ridotto leggermente */
}

#modalClientHistory .modal-header .btn-close {
    --bs-btn-close-bg: none; /* Rimuovi sfondo bottone chiusura */
    opacity: 1; /* Meno opaco */
    /* filter: grayscale(1); */ /* Rendi icona grigia */
}
#modalClientHistory .modal-header .btn-close:hover {
    opacity: 0.6;
    /* filter: grayscale(0); */
}

/* AGGIUNTO: Assicurati che il btn-close sia visibile */
#modalClientHistory .modal-header > .btn-close {
    display: block !important; /* Forza la visualizzazione */
    visibility: visible !important; /* Forza la visibilità */
    position: absolute; /* Posizionamento standard Bootstrap */
    right: 1.5rem; /* Allinea a destra come di consueto */
    top: 1rem; /* Allinea in alto */
    z-index: 10; /* Assicura sia sopra altri elementi header */

    /* --- Sostituzione icona --- */
    background-image: url("../images/icone/icon_chiudi.svg") !important; /* Usa il tuo SVG */
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: 1em 1em !important; /* Adatta la dimensione */
    opacity: 1 !important; /* Assicurati sia visibile */
    filter: none !important; /* Rimuovi filtri precedenti */
    box-shadow: none; /* Rimuovi eventuali ombre */
    /* Potrebbe essere necessario aggiustare width/height se l'SVG ha dimensioni strane */
     width: 1.5em;
     height: 1.5em;
     padding: 0;
}

#modalClientHistory .modal-header > .btn-close:hover {
     /* Puoi aggiungere un effetto hover se desiderato, es: */
     /* background-color: rgba(255, 255, 255, 0.1); */
     opacity: 0.8 !important; /* Leggera trasparenza al hover */
}

#modalClientHistory .modal-body {
    padding: 1.5rem;
    overflow-y: auto;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 1.5rem; /* Aggiunto gap tra sezioni nel body */
}

/* Stile riga filtri */
#modalClientHistory .filters-section {
    background-color: #fff;
    padding: 1rem 1.5rem;
    border-radius: 8px;
    margin-bottom: 0; /* Rimosso margine, usiamo il gap del body */
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    border: 1px solid #e5e7eb;
    flex-shrink: 0; /* Impedisce alla sezione filtri di restringersi */
    overflow: hidden; /* Nasconde overflow per gestire scroll interno */
}

/* Rendi la riga filtri scorrevole orizzontalmente e non a capo */
#modalClientHistory .row.g-2.mb-3 {
    display: flex;
    flex-wrap: nowrap; /* <<<<<<<< NO WRAP */
     /* Allinea verticalmente al centro */
    gap: 0.75rem;
    margin-bottom: 0 !important;
    overflow-x: auto; /* <<<<<<<< SCROLL ORIZZONTALE */
    padding-bottom: 8px; /* Spazio per scrollbar */
    margin-bottom: -8px !important; /* Compensa padding-bottom */
    /* Stile scrollbar minimale (Webkit) */
    scrollbar-width: thin; /* Firefox */
    scrollbar-color: #d1d5db transparent; /* Firefox */
    align-items: center;
    height: 51px;
}
#modalClientHistory .row.g-2.mb-3::-webkit-scrollbar {
    height: 4px; /* Altezza scrollbar */
}
#modalClientHistory .row.g-2.mb-3::-webkit-scrollbar-track {
    background: transparent; /* Sfondo trasparente */
}
#modalClientHistory .row.g-2.mb-3::-webkit-scrollbar-thumb {
    background-color: #d1d5db; /* Colore barra */
    border-radius: 20px;
    border: none;
}

/* Stili per le colonne dei filtri */
#modalClientHistory .row.g-2 > div {
    flex-grow: 0; /* Non espandere di default */
    flex-shrink: 0; /* Non restringere */
    margin-bottom: 0;
    /* Larghezze indicative, puoi aggiustarle */
}
#modalClientHistory .row.g-2 > div:nth-child(1) { /* Select Negozio */
    /* min-width: 180px; */
}
#modalClientHistory .row.g-2 > div:nth-child(2),
#modalClientHistory .row.g-2 > div:nth-child(3) { /* Date */
    min-width: 140px;
}
#modalClientHistory .row.g-2 > div:nth-child(4) { /* Bottone */
   /* La larghezza sarà automatica */
}

/* Stili specifici per i controlli */
#modalClientHistory .form-select-sm,
#modalClientHistory .form-control-sm {
    font-size: 0.875rem;
    border: 1px solid #d1d5db;
    padding: 0.5rem 0.75rem;
    height: calc(1.5em + 1rem + 2px); /* Altezza fissa per allineamento */
    line-height: 1.5; /* Assicura che il testo sia centrato */
    background-clip: padding-box;
}
#modalClientHistory .form-select-sm:focus,
#modalClientHistory .form-control-sm:focus {
    border-color: var(--colore-principale, #2563eb);
    box-shadow: 0 0 0 1px var(--colore-principale, #2563eb);
    outline: none;
}

#modalClientHistory #client-filter-apply {
    /* Stile bottone primario */
    background-color: var(--colore-principale, #2563eb);
    color: #fff;
    font-weight: 500;
    padding: 0.5rem 1rem;
    height: calc(1.5em + 1rem + 2px);
    flex-shrink: 0;
    outline: none;
    border: none; /* Già presente */
    border-radius: 0.25rem; /* Aggiungi bordo arrotondato */
    cursor: pointer;
    transition: opacity 0.15s ease-in-out;
}
#modalClientHistory #client-filter-apply:hover {
    opacity: 0.85;
}

/* Stile tabella ordini */
#modalClientHistory .orders-list-section {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    border: 1px solid #e5e7eb;
    flex-grow: 1; /* Occupa spazio rimanente */
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Nasconde overflow per gestire scroll interno */
}

#modalClientHistory .table-responsive {
    /* flex-grow: 1; */ /* Permette alla tabella di espandersi */
    overflow-y: auto; /* Scroll sulla tabella */
    /* Assicurati che la tabella usi tutta la larghezza */
    width: 100%;
    margin-top: 0; /* Rimuovi margine aggiunto prima */
    overflow-x: auto!important;
    scrollbar-width: thin;
    scrollbar-color: #d1d5db transparent;
    height: auto;
}

#modalClientHistory .table {
    width: max-content; /* Forza la tabella ad usare la larghezza */
    margin-bottom: 0; /* Rimuovi margine inferiore tabella */
}

#client-order-list thead th {
    background-color: #f9fafb; /* Sfondo header tabella più chiaro */
    position: sticky; /* Rende l'header fisso durante lo scroll della tabella */
    top: 0; /* Attacca in alto */
    z-index: 10; /* Sopra le righe */
    font-size: 0.75rem; /* Leggermente più piccolo */
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #6b7280;
    border-bottom: 1px solid #e5e7eb;
    border-top: none; /* Rimuovi bordo sopra */
    padding: 0.75rem 1rem;
    text-align: left;
    white-space: nowrap; /* Non mandare a capo header */
}

#client-order-list tbody tr {
    border-bottom: 1px solid #f3f4f6; /* Linea separatrice molto leggera */
}
#client-order-list tbody tr:last-child {
    border-bottom: none; /* No bordo ultima riga */
}


#client-order-list tr.client-order-row {
    transition: background-color 0.15s ease-in-out;
}

#client-order-list tr.client-order-row:hover {
    background-color: #f9fafb; /* Grigio molto chiaro al hover */
    cursor: pointer;
}

#client-order-list tr.table-active,
#client-order-list tr.table-active:hover {
    background-color: #eff6ff; /* Azzurrino più chiaro e moderno */
    color: #1e40af;
    font-weight: 500;
}
#client-order-list tr.table-active td:first-child {
    position: relative; /* Per pseudo-elemento */
}
/* Indicatore visivo riga attiva */
#client-order-list tr.table-active td:first-child::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background-color: var(--colore-principale, #2563eb);
}

#client-order-list td {
    padding: 0.75rem 1rem; /* Padding celle */
    vertical-align: middle;
    font-size: 0.875rem;
    color: #374151; /* Colore testo più scuro */
}

/* Stile sezione dettagli */
#client-order-details {
    /* Rimossa per ora, appare solo quando si clicca */
    /* border-top: 1px solid #e5e7eb; */
    /* padding-top: 1.5rem; */
    /* margin-top: 1.5rem; */
    background-color: #f9fafb; /* Sfondo leggermente diverso per dettagli */
    padding: 1.5rem;
    border-radius: 8px;
    /* box-shadow: 0 1px 2px rgba(0,0,0,0.05); */ /* Ombra non necessaria qui */
    /* border: 1px solid #e5e7eb; */
    margin-top: 0; /* Rimosso margine, gestito dal gap del body */
    height: 1%;
    /* display: flex; */
}

#client-order-details-title {
    margin-bottom: 1rem; /* Spazio sotto il titolo dettagli */
    font-size: 1.1rem;
    font-weight: 600;
    color: #1f2937;
}

#client-order-details-title span {
    font-weight: 500; /* Meno pesante del titolo */
    color: #4b5563; /* Grigio più scuro */
    font-size: 1rem;
    margin-left: 0.5rem;
}

#client-order-details .table-responsive {
    overflow-y: initial; /* Non serve scroll separato qui di solito */
}

#client-order-details thead th {
     background-color: #f3f4f6;
     font-size: 0.75rem; /* Più piccolo per tabella dettagli */
     font-weight: 600;
     text-transform: uppercase;
     color: #6b7280;
     border-bottom: 1px solid #e5e7eb;
     padding: 0.5rem 1rem;
     text-align: left;
}

#client-order-details tbody td {
    vertical-align: middle;
    padding: 0.6rem 1rem;
    font-size: 0.875rem;
    color: #374151;
}

/* Loader */
.text-center .spinner-border {
    width: 1.5rem;
    height: 1.5rem;
    margin: 1rem;
    color: var(--colore-principale, #2563eb);
}

/* Placeholder se non ci sono ordini */
#client-order-list .placeholder-row td {
    text-align: center;
    padding: 2rem;
    color: #9ca3af;
    font-style: italic;
}

/* Responsive */
@media (max-width: 768px) {
    #modalClientHistory .modal-body {
        padding: 10px;
        gap: 1rem; /* Riduci gap su mobile */
    }

    #modalClientHistory .filters-section {
         padding: 0.75rem 1rem; /* Riduci padding sezione filtri */
    }

    /* Filtri: Non stackano più */
    /* #modalClientHistory .row.g-2 > div {
        width: 100%;
    } */
    /* #modalClientHistory #client-filter-apply {
        width: 100%;
    } */

     #modalClientHistory .btn-sm {
         padding: 0.5rem 0.75rem;
         font-size: 0.875rem;
     }

    #client-order-list td, #client-order-list th {
        padding: 0.6rem 0.75rem; /* Riduci padding tabella */
        white-space: normal;
    }
    /* Nascondi indicatore riga attiva su mobile? O mantenerlo? Lo mantengo */
    /* #client-order-list tr.table-active td:first-child::before {
        display: none;
    } */

    #client-order-details {
         padding: 5px;
    }

    #client-order-details td, #client-order-details th {
        padding: 0.6rem 0.75rem;
    }

    #modalClientHistory .modal-header, #modalClientHistory .modal-footer {
        padding: 0.75rem 1rem;
    }
    #modalClientHistory .modal-header .modal-title {
        font-size: 1rem;
    }
}

/* --- Footer Modale --- */
#modalClientHistory .modal-footer {
    /* background-color: #fff; */
    /* border-top: 1px solid #e5e7eb; */
    /* padding: 0.75rem 1.5rem; */
    /* flex-shrink: 0; */
    display: none; /* <<< NASCONDI IL FOOTER INTERO */
}