/*
 * ==========================================
 * VARIABILI GLOBALI E SETUP BASE
 * ==========================================
 */
:root {
    /* Sidebar/Layout */
    --sidebar-width: 80px; 
    --sidebar-bg-color: #ffffff;
    --icon-color: #aeb1b6; 
    --active-color: #111;
    --active-indicator-color: black;
    
    /* Colori Contenuto/App */
    --primary-color: #007bff; /* Blu per pulsanti principali, ecc. */
    --secondary-color: #f4f6f9; /* Sfondo chiaro principale (Toolbar, Input Background) */
    --main-bg-color: #f7f7f7; /* Sfondo del body */
    --main-bg: #ffffff; /* Sfondo del contenuto (scheda bianca) */
    --text-color: #333;
    --border-color: #e0e0e0;
    --action-color: #4a5568; /* Colore per icone e testo delle azioni/header tabella */
    --view-color: #17a2b8; /* Azzurro/Ciano per l'Occhio */
    --delete-color: #dc3545; /* Rosso per il Cestino e modale Eliminazione */
}

body {
    margin: 0;
    padding-left: var(--sidebar-width); 
    font-family: 'Poppins', sans-serif;
    background-color: var(--main-bg-color);
}

.app-layout {
    display: flex;
    min-height: 100vh;
    background-color: var(--main-bg-color);
}

.main-content {
    flex-grow: 1;
    padding: 20px;
    max-width: 100%;
    margin-left: var(--sidebar-width);;
}

/*
 * ==========================================
 * 1. SIDEBAR (Se usi get_sidebar())
 * ==========================================
 */
.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: var(--sidebar-width);
    height: 100%;
    background-color: var(--sidebar-bg-color);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 15px 0;
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.05);
    z-index: 100;
}
.logo { padding: 10px 0 30px 0; }
.logo i { font-size: 30px; color: var(--active-color); }

.nav-menu { 
    flex-grow: 1; 
    width: 100%;
    display: flex; 
    flex-direction: column;
    justify-content: center; 
}
.nav-group {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.nav-item {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 65px;
    position: relative;
    text-decoration: none;
    color: var(--icon-color);
    transition: background-color 0.2s;
}
.nav-item i { font-size: 20px; }
.nav-item:hover { color: var(--active-color); }
.nav-item.active { color: var(--active-color); }

.nav-item.active::before {
    content: '';
    position: absolute;
    right: 0; 
    height: 25px; 
    top: 50%;
    margin-top: -12.5px; 
    width: 4px; 
    background-color: var(--active-indicator-color);
}
.logout { padding: 20px 0 10px 0; }
.logout a {
    display: block;
    color: black;
    font-size: 20px;
    padding: 10px;
    transition: color 0.2s;
}
.logout a:hover { color: var(--delete-color); }


/*
 * ==========================================
 * 2. TOOLBAR (Ricerca, Contatore, Aggiungi)
 * ==========================================
 */
.toolbar {
    background-color: var(--main-bg);
    padding: 15px 20px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}
.search-box {
    flex-grow: 1;
    max-width: 400px;
    position: relative;
}
.search-box form {
    display: flex;
    align-items: center;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 8px 12px;
    background-color: var(--secondary-color);
}
.search-box i {
    color: var(--action-color);
    margin-right: 10px;
}
.search-box input[type="text"] {
    border: none;
    outline: none;
    background: transparent;
    width: 100%;
    color: var(--text-color);
    /* Forzato da PHP per bordo sinistro: */
    border-left: 1px solid #dee2e6 !important; 
}

.toolbar-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}
.order-count {
    color: var(--action-color);
    font-size: 0.9em;
    font-weight: 500;
}
.action-btn {
    background: none;
    border: 1px solid var(--border-color);
    color: var(--action-color);
    padding: 8px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 0.9em;
}
.action-btn:hover {
    background-color: var(--secondary-color);
    border-color: var(--primary-color);
    color: var(--primary-color);
}
.add-btn {
    background-color: var(--primary-color);
    color: white;
    border: none;
    padding: 10px 15px;
    border-radius: 8px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 5px;
    box-shadow: 0 4px 6px rgba(0, 123, 255, 0.2);
    transition: background-color 0.2s;
}
.add-btn:hover {
    background-color: #0056b3;
}


/*
 * ==========================================
 * 3. FILTERS ROW (Filtri e Paginazione)
 * ==========================================
 */
.filters-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}
.active-filters {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Stili per allineamento verticale dei filtri */
.filters-row .active-filters input[type="date"],
.filters-row .active-filters .form-control-sm,
.filters-row .active-filters .form-select-sm {
    height: 38px;
    padding: 0.25rem 0.5rem; 
    box-sizing: border-box; 
    /* Forzato da PHP per bordo sinistro: */
    border-left: 1px solid #dee2e6 !important; 
}
.filters-row .active-filters .btn-primary {
    height: 38px; 
    display: flex; 
    align-items: center;
    padding: 0.25rem 0.75rem; 
}
/* Stili Select2 (per coerenza) */
.filters-row .active-filters .select2-container--default .select2-selection--single {
    height: 38px !important;
}
.filters-row .active-filters .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 38px !important;
}
.filters-row .active-filters .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 38px !important;
}

.pagination-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9em;
    color: var(--action-color);
}
.pagination-controls .page-arrow {
    background-color: var(--main-bg);
    border: 1px solid var(--border-color);
    color: var(--action-color);
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 6px;
    text-decoration: none;
    transition: background-color 0.2s;
}
.pagination-controls .page-arrow:hover:not(:disabled) {
    background-color: var(--secondary-color);
}
.pagination-controls .page-arrow:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}


/*
 * ==========================================
 * 4. TABELLA (Dati e Totale)
 * ==========================================
 */
.table-container {
    background-color: var(--main-bg);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    overflow-x: auto;
}
table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}
thead th {
    text-align: left;
    padding: 15px 20px;
    color: var(--action-color);
    font-size: 0.85em;
    font-weight: 700;
    text-transform: uppercase;
    border-bottom: 1px solid var(--border-color);
}
tbody tr {
    transition: background-color 0.15s;
}
tbody tr:hover {
    background-color: #f8f9fa;
}
tbody td {
    padding: 15px 20px;
    color: var(--text-color);
    font-size: 0.95em;
    width: auto;
    border-bottom: 1px solid var(--border-color);
}
tbody tr:last-child td {
    border-bottom: 1px solid var(--border-color);
}

.bold-text {
    font-weight: 600;
    white-space: nowrap; /* Mantenuto dallo stile inline per il nome utente */
}

/* FOOTER TABELLA (Totali) - Coerenza con lo stile PHP */
.table-container table tfoot tr {
    border-top: 2px solid #aebac7 !important; /* Bordo scuro e spesso per SEPARARE i dati dal totale */
    border-bottom: none !important; 
}
tfoot th {
    padding: 8px 20px; /* Aggiunto padding per tfoot */
}


.actions {
    padding: 15px 20px;
    display: flex;
    gap: 5px;
    justify-content: flex-end; 
    align-items: center;
}
.actions .action-btn {
    border: none;
    padding: 8px 10px;
    background-color: #f1f1f1;
    border-radius: 8px;
}
.actions .action-btn:hover {
    background-color: #e0e0e0;
}
.actions .btn-delete {
    color: var(--delete-color); 
    background-color: #fce8e8; 
}
.actions .btn-delete:hover {
    background-color: #f8b4b4;
}


/*
 * ==========================================
 * 5. STILE MODALE (Aggiungi/Elimina)
 * ==========================================
 */
.modal-content {
    border-radius: 12px !important;
    border: none !important;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
.modal-header {
    border-top-left-radius: 12px !important;
    border-top-right-radius: 12px !important;
    border-bottom: 1px solid var(--border-color);
    padding: 15px 25px;
}
.modal-title {
    font-weight: 700;
    color: var(--text-color);
    font-size: 1.25rem;
}
/* Stile per modale eliminazione */
.modal-header.bg-danger {
    background-color: var(--delete-color) !important;
}
.modal-header.bg-danger .btn-close-white {
    filter: invert(1);
    opacity: 0.8;
}
#deleteAttivitaModal p strong {
    color: var(--delete-color); 
}

/* Stile per i campi del form nel modale */
.form-label {
    font-size: 0.9em;
    color: var(--action-color);
    margin-bottom: 5px;
    font-weight: 600;
}
.input-group-text {
    border-right: none;
    background-color: var(--secondary-color) !important;
    border-color: var(--border-color);
    color: var(--action-color);
}
.form-control {
    border-left: none;
    border-color: var(--border-color);
    /* L'input e la select nel modale usano `form-control` e Select2, e non hanno il bordo sinistro forzato come i filtri */
    border-radius: 8px;
    box-shadow: none !important;
    padding: 10px 15px;
    font-size: 1em;
}
.form-control:read-only,
.form-control[readonly] {
    background-color: var(--secondary-color);
    opacity: 1;
}
.form-control:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.1rem rgba(0, 123, 255, 0.25) !important;
}


/*
 * ==========================================
 * 6. TOAST STYLE (Messaggi di Notifica)
 * ==========================================
 */
.toast-container {
 position: fixed;
 bottom: 1rem;
 right: 1rem;
 z-index: 1080;
 display: flex;
 flex-direction: column;
 gap: 0.5rem;
}
/* Lo stile originale nel PHP posiziona il toast in alto a destra, uso la logica del CSS per posizionamento */
.toast-container.position-fixed.top-0.end-0 { 
    top: 1rem !important; 
    bottom: auto !important; 
} 

.toast {
  border-radius: 14px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.18);
  color: #fff;
  min-width: 250px;
  animation: slideIn 0.5s ease forwards;
}

@keyframes slideIn {
  0% { transform: translateX(100%); opacity: 0; }
  100% { transform: translateX(0); opacity: 1; }
}

.toast-success { background-color: #28a745; }
.toast-error { background-color: #dc3545; }

.toast-body {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.toast-body i {
  font-size: 1.2rem;
}

@media print {

    /* Nasconde sidebar e pulsanti (già presente) */

    .d-flex > aside,

    .d-flex > .sidebar { display: none !important; width: 0 !important; margin: 0 !important; padding: 0 !important; }

    .d-flex > .main-content { width: 100% !important; flex: none !important; margin: 0 !important; padding: 0 !important; }

    .d-flex { display: block !important; }

    #printBtn,

    #modificaBtn,

    #salvaBtn,

    #aggiungiSchedaBtn,

    #vediSchedaBtn,

    #trashBtn,

    .btn-outline-secondary { display: none !important; }

    body { margin: 0; padding: 0; }

   

    /* Form generale */

    #formCommessa .row { display: flex !important; flex-wrap: wrap !important; }



    /* Prime due righe: 4 campi */

    #formCommessa .row:nth-child(1) .col-md-2,

    #formCommessa .row:nth-child(1) .col-2,

    #formCommessa .row:nth-child(2) .col-md-2,

    #formCommessa .row:nth-child(2) .col-2 {

        flex: 0 0 25% !important;

        max-width: 25% !important;

        box-sizing: border-box;

        padding-left: 4px;

        padding-right: 4px;

    }



    /* Altre righe: 6 campi */

    #formCommessa .row:nth-child(n+3) .col-md-2,

    #formCommessa .row:nth-child(n+3) .col-2 {

        flex: 0 0 16.6667% !important;

        max-width: 16.6667% !important;

        box-sizing: border-box;

        padding-left: 4px;

        padding-right: 4px;

    }



    /* Input full width */

    #formCommessa .row .col-md-2 input,

    #formCommessa .row .col-2 input,

    #formCommessa .row .col-md-2 select,

    #formCommessa .row .col-2 select,

    #formCommessa .row .col-md-2 textarea,

    #formCommessa .row .col-2 textarea {

        width: 100% !important;

    }



    /* Mostra motore-velocita-2 e motore-velocita-3 solo se visibili nel frontend */

    #formCommessa .motore-velocita-2:not([style*="display: none"]),

    #formCommessa .motore-velocita-3:not([style*="display: none"]) {

        display: flex !important; /* oppure block se preferisci */

        flex-wrap: wrap !important;

    }



    /* Nasconde motore-velocita se display:none */

    #formCommessa .motore-velocita-2[style*="display: none"],

    #formCommessa .motore-velocita-3[style*="display: none"] {

        display: none !important;

    }

}









form.filtro-ore {

    display: flex;

    gap: 15px;

    flex-wrap: wrap;

    align-items: flex-end;

}

form.filtro-ore label {

    font-weight: 600;

}

form.filtro-ore input[type="text"],

form.filtro-ore input[type="date"] {

    width: 150px;

    display: block;

    width: 100%;

    padding: .375rem .75rem;

    font-size: 1rem;

    font-weight: 400;

    line-height: 1.5;

    color: var(--bs-body-color);

    background-color: var(--bs-form-control-bg);

    background-clip: padding-box;

    border: var(--bs-border-width) solid var(--bs-border-color);

    -webkit-appearance: none;

    -moz-appearance: none;

    appearance: none;

    border-radius: .375rem;

    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;

}

form.filtro-ore button {

    padding: 6px 15px;

    font-size: 1rem;

}