/* ==========================================================================
   Base Dashboard Styles & Variables
   ========================================================================== */

:root {
    /* Palette Colori Proposta */
    --bs-primary-color: #3B82F6;      /* Blu Primario (Tailwind Blue 500) */
    --bs-primary-color-dark: #2563EB; /* Per hover/active */
    --bs-primary-color-light: #EFF6FF;/* Sfondo leggero per hover o elementi correlati */

    --bs-secondary-color: #6B7280;    /* Grigio per testo secondario/placeholder (Tailwind Gray 500) */
    --bs-secondary-color-dark: #4B5563;/* Tailwind Gray 600 */
    --bs-border-color: #D1D5DB;       /* Colore bordi (Tailwind Gray 300) */
    --bs-bg-light: #F9FAFB;           /* Sfondo chiaro per sezioni o hover (Tailwind Gray 50) */
    --bs-bg-white: #FFFFFF;           /* Sfondo bianco */

    --bs-text-dark: #1F2937;          /* Testo principale scuro (Tailwind Gray 800) */
    --bs-text-light: #4B5563;         /* Testo secondario/etichette (Tailwind Gray 600) */

    --bs-success-color: #10B981;      /* Verde Successo (Tailwind Green 500) */
    --bs-success-color-dark: #059669; /* Tailwind Green 600 */
    --bs-error-color: #EF4444;        /* Rosso Errore (Tailwind Red 500) */
    --bs-error-color-dark: #B91C1C;   /* Tailwind Red 700 */
    --bs-warning-color: #F59E0B;      /* Giallo Attenzione (Tailwind Amber 500) */
    --bs-warning-color-dark: #D97706; /* Tailwind Amber 600 */
    --bs-info-color: #06B6D4;         /* Ciano Info (Tailwind Cyan 500) */
    --bs-info-color-dark: #0891B2;    /* Tailwind Cyan 600 */

    /* Colori specifici per TAB attive (se diversi dai principali) */
    --bs-tab-categories-color: #A855F7; /* Viola (Tailwind Purple 500) */
    --bs-tab-clients-color: #EC4899;    /* Rosa (Tailwind Pink 500) */

    /* Altri stili comuni */
    --bs-footer-button-bg: var(--bs-primary-color);
    --bs-footer-button-border: var(--bs-primary-color-dark);
    --bs-footer-button-hover-bg: var(--bs-primary-color-dark);

    /* Font */
    --bs-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;

    /* Spaziature e Arrotondamenti */
    --bs-border-radius: 6px;
    --bs-padding-base: 15px;
    --bs-padding-small: 8px;
    --bs-padding-large: 20px;
}


.bs-dashboard-wrap {
    padding: 0;
    font-family: var(--bs-font-family);
    padding: var(--bs-padding-large); 
    background-color: var(--bs-bg-light);
    border: none;
    margin-bottom: 20px;
    box-sizing: border-box;
    color: var(--bs-text-dark);
}


/* --- BARRA DI RIEPILOGO --- */
.bs-summary-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 30px;
    padding: 20px;
    background-color: var(--bs-bg-white);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    box-shadow: 0 2px 8px rgba(0,0,0,0.07);
}

.bs-summary-card {
    flex: 1 1 200px;
    background-color: var(--bs-primary-color-light);
    border: 1px solid var(--bs-border-color);
    border-left-width: 5px;
    border-radius: var(--bs-border-radius);
    padding: 15px 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
}

.bs-summary-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.bs-summary-card:nth-child(1) {
    border-left-color: var(--bs-primary-color);
}

.bs-summary-card:nth-child(2) {
    border-left-color: var(--bs-success-color);
}

.bs-summary-card:nth-child(3) {
    border-left-color: var(--bs-info-color);
}

.bs-summary-card:nth-child(4) {
    border-left-color: var(--bs-warning-color);
}

.bs-card-icon {
    font-size: 28px;
    color: var(--bs-text-light);
    padding: 10px;
    background-color: var(--bs-bg-white);
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.bs-summary-card:nth-child(1) .bs-card-icon {
    color: var(--bs-primary-color);
}

.bs-summary-card:nth-child(2) .bs-card-icon {
    color: var(--bs-success-color);
}

.bs-summary-card:nth-child(3) .bs-card-icon {
    color: var(--bs-info-color);
}

.bs-summary-card:nth-child(4) .bs-card-icon {
    color: var(--bs-warning-color);
}

.bs-card-content {
    flex-grow: 1;
}

.bs-card-value {
    font-size: 26px;
    font-weight: 700;
    color: var(--bs-text-dark);
    line-height: 1.1;
}

.bs-card-label {
    font-size: 14px;
    color: var(--bs-text-light);
    margin-bottom: 3px;
}

.bs-card-value-small {
    font-size: 14px;
    font-weight: 500;
    color: var(--bs-text-dark);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bs-card-next-appointment .bs-card-value-small {
    font-size: 13px;
}

.bs-quick-links-list {
    margin-top: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.bs-quick-links-list .button.button-small {
    padding: 6px 10px;
    font-size: 12px;
}

#bs-quicklink-add-app {
    cursor: pointer;
}
/* --- FINE BARRA DI RIEPILOGO --- */

.bs-dashboard-wrap h1 {
    margin-top: 0;
    margin-bottom: 25px;
    font-size: 28px;
    font-weight: 600;
    color: var(--bs-text-dark);
}

.bs-dashboard-wrap h2 {
    font-size: 22px;
    font-weight: 600;
    color: var(--bs-text-dark);
    margin-top: 0;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--bs-border-color);
}

.bs-dashboard-wrap h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--bs-text-dark);
    margin-top: 0;
    margin-bottom: 15px;
}

.bs-error-message,
.bs-form-feedback.bs-error {
    color: var(--bs-error-color);
    background-color: #FEE2E2;
    border: 1px solid var(--bs-error-color);
    padding: 10px 15px;
    margin-bottom: 15px;
    border-radius: var(--bs-border-radius);
}

.bs-form-feedback.bs-success {
    background-color: #D1FAE5;
    color: #065F46;
    border: 1px solid var(--bs-success-color);
}

.bs-form-feedback.bs-info {
    background-color: #E0F2FE;
    color: #075985;
    border: 1px solid var(--bs-info-color);
}

.bs-form-feedback.bs-warning {
    background-color: #FFFBEB;
    color: #B45309;
    border: 1px solid var(--bs-warning-color);
}

.bs-dashboard-wrap .button {
    font-family: var(--bs-font-family);
    border-radius: var(--bs-border-radius);
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid var(--bs-border-color);
    background-color: var(--bs-bg-white);
    color: var(--bs-text-dark);
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    line-height: 1.5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.bs-dashboard-wrap .button .fas,
.bs-dashboard-wrap .button .far,
.bs-dashboard-wrap .button .fal,
.bs-dashboard-wrap .button .fab {
    font-size: 0.9em;
}

.bs-dashboard-wrap .button:hover {
    background-color: var(--bs-bg-light);
    border-color: #9CA3AF;
}

.bs-dashboard-wrap .button:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
    box-shadow: 0 0 0 2px var(--bs-bg-white), 0 0 0 4px var(--bs-primary-color);
}

.bs-dashboard-wrap .button-primary {
    background-color: var(--bs-primary-color);
    border-color: var(--bs-primary-color);
    color: var(--bs-bg-white);
}

.bs-dashboard-wrap .button-primary:hover {
    background-color: var(--bs-primary-color-dark);
    border-color: var(--bs-primary-color-dark);
    color: var(--bs-bg-white);
}

.bs-dashboard-wrap .button-large {
    padding: 10px 20px;
    font-size: 15px;
    gap: 8px;
}

.bs-dashboard-wrap .button-small {
    padding: 5px 10px;
    font-size: 13px;
    gap: 4px;
}

.bs-dashboard-wrap .button.button-link-delete,
.bs-dashboard-wrap .button-link-delete {
    background: none;
    border: none;
    color: var(--bs-error-color);
    text-decoration: underline;
    padding: 0;
    box-shadow: none;
}

.bs-dashboard-wrap .button.button-link-delete:hover,
.bs-dashboard-wrap .button-link-delete:hover {
    color: var(--bs-error-color-dark);
    text-decoration: none;
}

/* ==========================================================================
   Controls Bar (Tabs, Navigation, Actions)
   ========================================================================== */


.bs-view-tabs {
    display: flex;
    gap: 2px;
    margin-bottom: -2px;
    flex-wrap: wrap;
}

.bs-tab-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    color: var(--bs-text-light);
    border: 1px solid transparent;
    border-bottom-width: 2px; /* Sarà colorato da .active */
    border-radius: var(--bs-border-radius) var(--bs-border-radius) 0 0;
    background-color: transparent;
    position: relative;
    transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
    white-space: nowrap;
}

.bs-tab-link .fas {
    font-size: 1em;
}

.bs-tab-link:hover {
    color: var(--bs-primary-color-dark);
    background-color: var(--bs-primary-color-light);
    border-color: var(--bs-border-color) var(--bs-border-color) transparent var(--bs-border-color);
}

.bs-tab-link.active {
    background-color: var(--bs-bg-white);
    color: var(--bs-text-dark);
    font-weight: 600;
    border-color: var(--bs-border-color) var(--bs-border-color) transparent var(--bs-border-color);
    z-index: 2;
}

/* Colori specifici per TAB attive */
.bs-tab-link[href*="view_mode=day"].active,
.bs-tab-link[href*="view_mode=week"].active,
.bs-tab-link[href*="view_mode=month"].active {
    border-bottom-color: var(--bs-primary-color) !important;
    color: var(--bs-primary-color) !important;
}

.bs-tab-link[href*="view_mode=day"].active .fas,
.bs-tab-link[href*="view_mode=week"].active .fas,
.bs-tab-link[href*="view_mode=month"].active .fas {
    color: var(--bs-primary-color) !important;
}

.bs-tab-link[href*="view_mode=operators"].active {
    border-bottom-color: var(--bs-info-color) !important;
    color: var(--bs-info-color) !important;
}

.bs-tab-link[href*="view_mode=operators"].active .fas {
    color: var(--bs-info-color) !important;
}

.bs-tab-link[href*="view_mode=services"].active {
    border-bottom-color: var(--bs-success-color) !important;
    color: var(--bs-success-color) !important;
}

.bs-tab-link[href*="view_mode=services"].active .fas {
    color: var(--bs-success-color) !important;
}

.bs-tab-link[href*="view_mode=categories"].active {
    border-bottom-color: var(--bs-tab-categories-color) !important;
    color: var(--bs-tab-categories-color) !important;
}

.bs-tab-link[href*="view_mode=categories"].active .fas {
    color: var(--bs-tab-categories-color) !important;
}

.bs-tab-link[href*="view_mode=clients"].active {
    border-bottom-color: var(--bs-tab-clients-color) !important;
    color: var(--bs-tab-clients-color) !important;
}

.bs-tab-link[href*="view_mode=clients"].active .fas {
    color: var(--bs-tab-clients-color) !important;
}

.bs-tab-link[href*="view_mode=schedule"].active {
    border-bottom-color: var(--bs-warning-color) !important;
    color: var(--bs-warning-color) !important;
}

.bs-tab-link[href*="view_mode=schedule"].active .fas {
    color: var(--bs-warning-color) !important;
}

.bs-period-selector {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: nowrap;
    margin-left: auto;
    padding-bottom: 10px;
}

.bs-date-form {
    display: inline-flex;
    gap: 5px;
    margin: 0;
}

.bs-period-selector .bs-date-form button[type="submit"] {
    display: none;
}

.bs-period-selector input[type="date"] {
    padding: 7px 10px;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    height: 38px;
    box-sizing: border-box;
    font-size: 14px;
    background-color: var(--bs-bg-white);
}

.bs-period-selector input[type="date"]:focus {
    border-color: var(--bs-primary-color);
    box-shadow: 0 0 0 1px var(--bs-primary-color);
    outline: none;
}

.bs-period-selector .button {
    height: 38px;
    line-height: normal;
}

.bs-period-selector .bs-nav-button .fa-chevron-left,
.bs-period-selector .bs-nav-button .fa-chevron-right {
    font-size: 0.8em;
}

.bs-period-selector .bs-nav-button .fa-calendar-day,
.bs-period-selector .bs-nav-button .fa-calendar-check {
    font-size: 1em;
}

.bs-current-period-display,
.bs-current-date-display {
    margin: 0 5px;
    font-weight: 600;
    font-size: 16px;
    white-space: nowrap;
    padding: 0 10px;
    line-height: 38px;
    color: var(--bs-text-dark);
}



.bs-content-area {
    clear: both;
    border-top: none;
    padding-top: 5px;
    padding-left: 5px;  
    padding-right: 5px; 
    box-sizing: border-box; /* Importante per non sballare le larghezze */
}

.bs-management-view {
    padding: var(--bs-padding-large);
    background-color: var(--bs-bg-white);
    border: 1px solid var(--bs-border-color);
    border-top: none;
    border-radius: 0 0 var(--bs-border-radius) var(--bs-border-radius);
}

.bs-planner.bs-daily-planner,
.bs-planner.bs-weekly-planner,
.bs-planner.bs-monthly-planner {
    margin-top: 0;
    border-radius: 0 0 var(--bs-border-radius) var(--bs-border-radius);
    border-top: none;
}

/* Daily Planner, Weekly Planner, Monthly Planner styles (come prima) */
.bs-planner.bs-daily-planner {
    background-color: var(--bs-bg-white);
    border: 1px solid var(--bs-border-color);
    position: relative;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.bs-daily-planner .bs-planner-grid {
    display: flex;
    flex-direction: column;
    min-width: 800px;
}

.bs-daily-planner .bs-planner-header {
    display: flex;
    position: sticky;
    top: 0;
    z-index: 5;
    background-color: #F3F4F6;
}

.bs-daily-planner .bs-time-col-header,
.bs-daily-planner .bs-operator-col-header {
    padding: 10px 5px;
    font-weight: 600;
    text-align: center;
    border-bottom: 2px solid var(--bs-border-color);
    border-left: 1px solid var(--bs-border-color);
    flex-shrink: 0;
    white-space: nowrap;
    font-size: 13px;
    box-sizing: border-box;
    color: var(--bs-text-dark);
}

.bs-daily-planner .bs-operator-col-header.bs-cell-status-off-duty,
.bs-daily-planner .bs-operator-col-header.bs-past-day-col-php {
    background-color: #e2e8f0 !important;
    color: var(--bs-text-light) !important;
    text-shadow: none;
    cursor: not-allowed;
}

.bs-daily-planner .bs-time-col-header {
    flex-basis: 70px;
    border-left: none;
    position: sticky;
    left: 0;
    z-index: 6;
    background-color: #F3F4F6;
}

.bs-daily-planner .bs-operator-col-header {
    flex-basis: 160px;
    flex-grow: 1;
    color: var(--bs-bg-white);
    text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
}

.bs-daily-planner .bs-planner-body {
    /*--bs-hour-height: 60px; /* Modificato da 60px a 100px */
    min-height: 400px; /* Aggiustato opzionalmente, es. (100px * 5 ore minime) */
    display: flex;
    position: relative;
}

.bs-daily-planner .bs-time-col,
.bs-daily-planner .bs-operator-col {
    border-left: 1px solid #E5E7EB;
    position: relative;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

.bs-daily-planner .bs-time-col {
    flex-basis: 70px;
    background-color: var(--bs-bg-light);
    border-left: none;
    position: sticky;
    left: 0;
    z-index: 4;
    height: fit-content;
}

.bs-daily-planner .bs-operator-col {
    flex-basis: 160px;
    flex-grow: 1;
    border-left: 1px solid #E5E7EB;
    position: relative;
    box-sizing: border-box;
    /* La nuova logica per le linee orarie fisse */
    background-image: repeating-linear-gradient(
        to bottom,
        transparent,
        transparent 119px, /* Altezza dell'ora - 1px */
        #E5E7EB 119px,
        #E5E7EB 120px  /* Altezza totale di 1 ora */
    );
    background-size: 100% 120px; /* Ripeti ogni 60px (1 ora) */
    border-bottom: 1px solid var(--bs-border-color);
}

.bs-daily-planner .bs-time-slot {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: var(--bs-text-light);
    border-bottom: 1px dotted #D1D5DB;
    box-sizing: border-box;
    flex-shrink: 0;
}

.bs-daily-planner .bs-time-slot:last-child {
    border-bottom: none;
}

.bs-daily-planner .bs-time-slot strong {
    font-size: 12px;
    color: var(--bs-text-dark);
    font-weight: 600;
}

.bs-daily-planner .bs-operator-col.bs-past-time-area {
    background-image: repeating-linear-gradient( to bottom, #f0f0f0, #f0f0f0 calc(var(--bs-hour-height) - 1px), #e0e0e0 calc(var(--bs-hour-height) - 1px), #e0e0e0 var(--bs-hour-height) ) !important;
    cursor: not-allowed !important;
    opacity: 0.6;
}

.bs-daily-planner .bs-past-time-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background-color: rgba(229, 231, 235, 0.5);
    z-index: 6;
    pointer-events: none;
}

.bs-daily-planner .bs-unavailable-overlay {
    position: absolute;
    left: 0;
    width: 100%;
    background-color: rgba(230, 230, 230, 0.7);
    background-image: repeating-linear-gradient(45deg, rgba(0,0,0,0.07), rgba(0,0,0,0.07) 5px, transparent 5px, transparent 10px);
    z-index: 3;
    pointer-events: none;
}

/* ==========================================================================
   STILI VISTA SETTIMANALE (v2 - Agenda)
   ========================================================================== */

.bs-planner.bs-weekly-planner-agenda {
    background-color: var(--bs-bg-white);
    border: 1px solid var(--bs-border-color);
    position: relative;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-top: none;
    border-radius: 0 0 var(--bs-border-radius-large) var(--bs-border-radius-large);
}

.bs-weekly-planner-agenda .bs-planner-grid-week { display: flex; flex-direction: column; min-width: 1200px; }
.bs-weekly-planner-agenda .bs-planner-header { display: flex; border-bottom: 2px solid var(--bs-border-color); background-color: #F3F4F6; position: sticky; top: 0; z-index: 5; color: var(--bs-text-dark); }
.bs-weekly-planner-agenda .bs-time-col-header { flex-basis: 150px; flex-shrink: 0; border-right: 1px solid var(--bs-border-color); padding: 10px 5px; font-weight: 600; text-align: center; font-size: 13px; box-sizing: border-box; background-color: #F3F4F6; }
.bs-weekly-planner-agenda .bs-day-col-header { flex: 1 1 0; min-width: 150px; text-align: center; padding: 10px 5px; font-weight: 600; font-size: 13px; border-left: 1px solid var(--bs-border-color); white-space: nowrap; box-sizing: border-box; }
.bs-weekly-planner-agenda .bs-day-col-header.bs-today { background-color: #FEF3C7; color: #78350F; }
.bs-weekly-planner-agenda .bs-day-col-header.bs-past-day { background-color: #e2e8f0 !important; color: var(--bs-text-light) !important; }
.bs-weekly-planner-agenda .bs-planner-row-week { display: flex; border-top: 1px solid #E5E7EB; }
.bs-weekly-planner-agenda .bs-planner-row-week:first-of-type { border-top: none; }
.bs-weekly-planner-agenda .bs-operator-row-header { 
    flex-basis: 150px; 
    flex-shrink: 0; 
    padding: 10px; 
    font-weight: 600; 
    text-align: center; 
    border-right: 1px solid var(--bs-border-color); 
    color: var(--bs-bg-white); 
    text-shadow: 1px 1px 1px rgba(0,0,0,0.3); 
    display: flex; align-items: center; 
    justify-content: center; 
    box-sizing: border-box; 
    position: sticky; 
    left: 0; 
    z-index: 4; 
    min-height: 200px;  }
.bs-weekly-planner-agenda .bs-day-col { 
    flex: 1 1 0; 
    min-width: 150px; 
    border-left: 1px solid #E5E7EB; 
    position: relative; 
    box-sizing: border-box; 
    padding: 8px; 
    min-height: 200px; }
.bs-weekly-planner-agenda .bs-day-col.bs-today-col { background-color: rgba(254, 243, 199, 0.2); }
.bs-weekly-planner-agenda .bs-day-col.bs-past-day,
.bs-weekly-planner-agenda .bs-day-col.bs-cell-status-off-duty { background-color: #f8f9fa; cursor: not-allowed; }
.bs-weekly-planner-agenda .bs-waitlist-indicator-week { position: absolute; top: 5px; right: 5px; z-index: 4; }

.bs-weekly-agenda-list { display: flex; flex-direction: column; gap: 6px; }

.bs-week-appointment-card {
    background-color: var(--bs-primary-color-light);
    border: 1px solid var(--bs-border-color);
    border-left: 5px solid var(--service-color, var(--bs-secondary-color)); /* Colore dinamico in base al servizio */
    border-radius: var(--bs-border-radius);
    padding: 8px 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 10px;
}
.bs-week-appointment-card:hover {
    transform: scale(1.02);
    box-shadow: var(--bs-box-shadow);
    border-color: var(--bs-primary-color);
}

/* Stili per stato appuntamento (opzionale)
.bs-week-appointment-card.bs-status-confirmed { border-left-color: var(--bs-success-color); }
.bs-week-appointment-card.bs-status-pending { border-left-color: var(--bs-warning-color); }
.bs-week-appointment-card.bs-status-completed { border-left-color: var(--bs-info-color); opacity: 0.8; }
.bs-week-appointment-card.bs-status-cancelled { border-left-color: var(--bs-error-color); opacity: 0.6; text-decoration: line-through; }
.bs-week-appointment-card.bs-status-no-show { border-left-color: var(--bs-secondary-color); opacity: 0.7; }
*/

.bs-week-card-time { font-size: 13px; font-weight: 600; color: var(--bs-text-dark); flex-shrink: 0; }
.bs-week-card-details { flex-grow: 1; min-width: 0; }
.bs-week-card-client { font-size: 12px; font-weight: 500; color: var(--bs-text-dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bs-week-card-service { font-size: 11px; color: var(--bs-text-light); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.bs-week-no-app-message {
    font-size: 12px;
    color: var(--bs-text-placeholder);
    text-align: center;
    padding: 20px 0;
    font-style: italic;
}

.bs-week-quick-add-btn {
    position: absolute;
    bottom: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: var(--bs-primary-color);
    color: white;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 5;
}
.bs-day-col:hover .bs-week-quick-add-btn {
    opacity: 0.8;
}
.bs-week-quick-add-btn:hover {
    opacity: 1;
    transform: scale(1.1);
}
/* Nascondi pulsante solo se è OFF DUTY (chiuso/non lavorativo).
   Per i giorni passati (.bs-past-day) la visibilità è gestita da PHP in base al ruolo. */
.bs-day-col.bs-cell-status-off-duty .bs-week-quick-add-btn {
    display: none;
}

.bs-operator-row-header {
    flex-basis: 120px;
    flex-shrink: 0;
    padding: 10px 5px;
    font-weight: 600;
    text-align: center;
    border-right: 1px solid var(--bs-border-color);
    background-color: #F3F4F6;
    color: var(--bs-bg-white);
    text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    position: sticky;
    left: 0;
    z-index: 4;
}

.bs-weekly-planner .bs-day-col {
    flex: 1 1 0;
    min-width: 100px;
    border-left: 1px solid #E5E7EB;
    position: relative;
    box-sizing: border-box;
    background-image: repeating-linear-gradient(
        to bottom,
        transparent,
        transparent 119px, 
        #F3F4F6 119px, 
        #F3F4F6 120px
    );
    background-size: 100% 120px; /* Anche qui, ripeti ogni 60px */
}

.bs-weekly-planner .bs-day-col.bs-today-col {
    background-color: rgba(254, 243, 199, 0.3);
}

.bs-weekly-planner .bs-day-col.bs-past-day {
    background-color: #f5f5f5 !important;
    background-image: repeating-linear-gradient( to bottom, #f0f0f0, #f0f0f0 calc(var(--bs-hour-height-week) - 1px), #e0e0e0 calc(var(--bs-hour-height-week) - 1px), #e0e0e0 var(--bs-hour-height-week) ) !important;
    cursor: not-allowed !important;
    opacity: 0.7;
}

.bs-weekly-planner .bs-day-col.bs-past-day .bs-appointment {
    opacity: 0.5 !important;
}

.bs-weekly-planner .bs-day-col .bs-past-time-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background-color: rgba(229, 231, 235, 0.4);
    z-index: 3;
    pointer-events: none;
}

.bs-planner.bs-monthly-planner {
    padding: 0;
    border: 1px solid var(--bs-border-color);
    background-color: var(--bs-bg-white);
}

.bs-calendar-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    border: none;
}

.bs-calendar-table th {
    text-align: center;
    padding: 10px 5px;
    background-color: #F3F4F6;
    border: 1px solid var(--bs-border-color);
    font-size: 13px;
    font-weight: 600;
    color: var(--bs-text-dark);
}

.bs-calendar-table td {
    height: 110px;
    border: 1px solid #E5E7EB;
    vertical-align: top;
    padding: 5px;
    position: relative;
    background-color: var(--bs-bg-white);
    transition: background-color 0.2s ease;
}

.bs-calendar-table td.bs-empty {
    background-color: var(--bs-bg-light);
    cursor: default;
}

.bs-calendar-table td.bs-today {
    background-color: #FEFCE8;
    border: 1px solid #FACC15;
}

.bs-calendar-table td:not(.bs-empty):hover {
    background-color: var(--bs-primary-color-light);
}

.bs-calendar-table .bs-day-number {
    font-size: 12px;
    font-weight: bold;
    color: var(--bs-text-light);
    text-align: right;
    margin-bottom: 5px;
    display: block;
}

.bs-calendar-table td.bs-today .bs-day-number {
    color: var(--bs-text-dark);
    background-color: #FDE68A;
    display: inline-block;
    padding: 2px 5px;
    border-radius: var(--bs-border-radius);
    float: right;
    margin-bottom: 0;
}

.bs-calendar-table .bs-day-content {
    font-size: 11px;
    max-height: calc(110px - 30px);
    overflow-y: auto;
    padding-right: 5px;
    margin-top: 2px;
}

.bs-calendar-table .bs-day-app-count {
    display: block;
    background-color: var(--bs-primary-color);
    color: white;
    padding: 4px 6px;
    border-radius: var(--bs-border-radius);
    text-decoration: none;
    margin-bottom: 4px;
    text-align: center;
    font-weight: 500;
    font-size: 11px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.bs-calendar-table .bs-day-app-count:hover {
    background-color: var(--bs-primary-color-dark);
}

.bs-calendar-table .bs-month-app {
    background-color: #DBEAFE;
    border-left: 3px solid var(--bs-primary-color);
    padding: 2px 4px;
    margin-bottom: 2px;
    border-radius: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 10px;
    cursor: pointer;
}

.bs-calendar-table .bs-month-app:hover {
    background-color: #BFDBFE;
}

.bs-appointment {
    position: absolute;
    left: 4px;
    right: 4px;
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-left-width: 4px;
    border-radius: var(--bs-border-radius);
    padding: 5px 8px;
    box-sizing: border-box;
    font-size: 12px;
    line-height: 1.4;
    color: var(--bs-bg-white);
    text-shadow: 0 1px 1px rgba(0,0,0,0.3);
    overflow: hidden;
    cursor: pointer;
    z-index: 10;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.bs-appointment:hover {
    opacity: 1;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    z-index: 11;
    transform: translateY(-1px) scale(1.01);
}

.bs-appointment-main-info {
    display: flex;
    align-items: baseline;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 3px;
    flex-shrink: 0;
}

.bs-appointment-time {
    font-weight: 600;
    margin-right: 6px;
    flex-shrink: 0;
    font-size: 1.0em;
}

.bs-appointment-client {
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-grow: 1;
    min-width: 0;
    font-size: 0.95em;
}

.bs-appointment-service {
    font-size: 10px;
    font-style: normal;
    opacity: 0.85;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    margin-top: 1px;
}

.bs-weekly-planner .bs-appointment {
    font-size: 11px;
    line-height: 1.3;
    padding: 3px 5px;
}

.bs-weekly-planner .bs-appointment .bs-appointment-time {
    font-size: 1.0em;
    margin-right: 4px;
}

.bs-weekly-planner .bs-appointment .bs-appointment-client {
    font-size: 0.9em;
}

.bs-weekly-planner .bs-appointment .bs-appointment-service {
    font-size: 9px;
    display: block;
}

.bs-appointment.bs-status-pending {
    border-left-color: var(--bs-warning-color) !important;
    opacity: 0.9;
}

.bs-appointment.bs-status-confirmed {
    border-left-color: var(--bs-success-color) !important;
}

.bs-appointment.bs-status-completed {
    border-left-color: var(--bs-info-color) !important;
    opacity: 0.8;
}

.bs-appointment.bs-status-cancelled {
    border-left-color: var(--bs-error-color) !important;
    opacity: 0.6;
    text-decoration: line-through;
    background-color: var(--bs-secondary-color) !important;
    color: #E5E7EB !important;
    text-shadow: none;
    cursor: default;
}

.bs-appointment.bs-status-no-show {
    border-left-color: var(--bs-text-dark) !important;
    opacity: 0.7;
}

.bs-appointment .bs-delete-app-btn {
    position: absolute;
    top: 3px;
    right: 3px;
    background: rgba(0, 0, 0, 0.3);
    color: white;
    border: none;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    text-align: center;
    cursor: pointer;
    padding: 0;
    opacity: 0;
    transition: opacity 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
    z-index: 12;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bs-appointment .bs-delete-app-btn .fas.fa-times {
    font-size: 11px;
    display: block;
}

.bs-appointment:hover .bs-delete-app-btn {
    opacity: 0.8;
    transform: scale(1.1);
}

.bs-appointment .bs-delete-app-btn:hover {
    background: var(--bs-error-color);
    opacity: 1;
}

.bs-appointment.bs-status-cancelled .bs-delete-app-btn {
    display: none;
}

.bs-weekly-planner .bs-appointment .bs-delete-app-btn {
    width: 16px;
    height: 16px;
}

.bs-weekly-planner .bs-appointment .bs-delete-app-btn .fas.fa-times {
    font-size: 10px;
}

.bs-management-view p:first-of-type {
    margin-top: 0;
}

.bs-management-view .wp-list-table {
    margin-top: 20px;
    border: 1px solid var(--bs-border-color);
    width: 100%;
    border-spacing: 0;
    border-radius: var(--bs-border-radius);
    box-shadow: 0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px 0 rgba(0,0,0,0.06);
}

.bs-management-view .wp-list-table th {
    font-weight: 600;
    background-color: var(--bs-bg-light);
    text-align: left;
    padding: 12px 15px;
    border-bottom: 1px solid var(--bs-border-color);
    color: var(--bs-text-dark);
}

.bs-management-view .wp-list-table td {
    padding: 12px 15px;
    border-bottom: 1px solid #E5E7EB;
    vertical-align: middle;
    color: var(--bs-text-light);
}

.bs-management-view .wp-list-table tr:last-child td {
    border-bottom: none;
}

.bs-management-view .wp-list-table td.column-azioni,
.bs-management-view .wp-list-table td:last-child {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.bs-management-view .wp-list-table td .button {
    padding: 6px 12px;
    font-size: 13px;
    min-width: 100px;
    text-align: center;
    margin-right: 0;
    flex-grow: 0;
    flex-shrink: 0;
    color: var(--bs-bg-white) !important;
    text-shadow: 0 1px 1px rgba(0,0,0,0.2);
    vertical-align: middle;
}

.bs-management-view .wp-list-table td .button .fas {
    color: var(--bs-bg-white) !important;
}

.bs-management-view .wp-list-table .bs-edit-operator-btn,
.bs-management-view .wp-list-table .bs-edit-service-btn,
.bs-management-view .wp-list-table .bs-edit-client-btn,
.bs-management-view .wp-list-table .bs-edit-category-btn,
.bs-management-view .wp-list-table .bs-edit-exception-btn {
    background-color: var(--bs-info-color);
    border-color: var(--bs-info-color);
}

.bs-management-view .wp-list-table .bs-edit-operator-btn:hover,
.bs-management-view .wp-list-table .bs-edit-service-btn:hover,
.bs-management-view .wp-list-table .bs-edit-client-btn:hover,
.bs-management-view .wp-list-table .bs-edit-category-btn:hover,
.bs-management-view .wp-list-table .bs-edit-exception-btn:hover {
    background-color: var(--bs-info-color-dark);
    border-color: var(--bs-info-color-dark);
}

.bs-management-view .wp-list-table .bs-assign-operators-btn {
    background-color: var(--bs-secondary-color);
    border-color: var(--bs-secondary-color);
}

.bs-management-view .wp-list-table .bs-assign-operators-btn:hover {
    background-color: var(--bs-secondary-color-dark);
    border-color: var(--bs-secondary-color-dark);
}

.bs-management-view .wp-list-table .bs-activate-operator-btn,
.bs-management-view .wp-list-table .bs-activate-service-btn {
    background-color: var(--bs-success-color);
    border-color: var(--bs-success-color);
}

.bs-management-view .wp-list-table .bs-activate-operator-btn:hover,
.bs-management-view .wp-list-table .bs-activate-service-btn:hover {
    background-color: var(--bs-success-color-dark);
    border-color: var(--bs-success-color-dark);
}

.bs-management-view .wp-list-table .bs-deactivate-operator-btn,
.bs-management-view .wp-list-table .bs-deactivate-service-btn {
    background-color: var(--bs-warning-color);
    border-color: var(--bs-warning-color);
    color: var(--bs-text-dark) !important;
}

.bs-management-view .wp-list-table .bs-deactivate-operator-btn .fas,
.bs-management-view .wp-list-table .bs-deactivate-service-btn .fas {
    color: var(--bs-text-dark) !important;
}

.bs-management-view .wp-list-table .bs-deactivate-operator-btn:hover,
.bs-management-view .wp-list-table .bs-deactivate-service-btn:hover {
    background-color: var(--bs-warning-color-dark);
    border-color: var(--bs-warning-color-dark);
}

.bs-management-view .wp-list-table .button.button-danger {
    background-color: var(--bs-error-color);
    border-color: var(--bs-error-color);
    color: var(--bs-bg-white) !important;
}

.bs-management-view .wp-list-table .button.button-danger .fas {
    color: var(--bs-bg-white) !important;
}

.bs-management-view .wp-list-table .button.button-danger:hover {
    background-color: var(--bs-error-color-dark);
    border-color: var(--bs-error-color-dark);
}

.bs-management-view tr.inactive td {
    opacity: 0.6;
    font-style: italic;
    color: var(--bs-secondary-color);
}

.bs-management-view .wp-list-table td strong {
    font-weight: 500;
    color: var(--bs-text-dark);
}

.bs-management-view .wp-list-table .check-column {
    width: 2.5em;
}

.bs-management-view .wp-list-table .dashicons-admin-users,
.bs-management-view .wp-list-table .fas,
.bs-management-view .wp-list-table .far {
    font-size: 1.2em;
    color: var(--bs-secondary-color);
    vertical-align: middle;
}

/* Schedule Management */
.bs-schedule-operator-selector {
    margin-bottom: 25px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--bs-border-color);
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
}

.bs-schedule-operator-selector label {
    font-weight: 600;
    color: var(--bs-text-dark);
}

.bs-schedule-operator-selector select {
    min-width: 280px;
    padding: 8px 12px;
    max-width: 400px;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    background-color: var(--bs-bg-white);
    height: 38px;
}

.bs-schedule-operator-selector select:focus {
    border-color: var(--bs-primary-color);
    box-shadow: 0 0 0 1px var(--bs-primary-color);
    outline: none;
}

#bs-schedule-loading-spinner img {
    width: 20px;
    height: 20px;
    vertical-align: middle;
}

.bs-schedule-section {
    margin-bottom: 30px;
    padding: var(--bs-padding-large);
    border: 1px solid var(--bs-border-color);
    background-color: var(--bs-bg-white);
    border-radius: var(--bs-border-radius);
    box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05);
}

.bs-schedule-section h3 .bs-schedule-op-name {
    font-style: italic;
    font-weight: normal;
    color: var(--bs-secondary-color);
    font-size: 0.9em;
}

.bs-schedule-display-area {
    min-height: 50px;
    padding: var(--bs-padding-base);
    background-color: #F9FAFB;
    border: 1px solid #E5E7EB;
    margin-bottom: 10px;
    max-height: 400px;
    overflow-y: auto;
    border-radius: var(--bs-border-radius);
}

#bs-standard-schedule-display table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

#bs-standard-schedule-display th,
#bs-standard-schedule-display td {
    border: 1px solid #E5E7EB;
    padding: 10px;
    text-align: left;
    vertical-align: top;
}

#bs-standard-schedule-display th {
    background-color: #F3F4F6;
    font-weight: 600;
    color: var(--bs-text-dark);
}

#bs-standard-schedule-display em {
    color: var(--bs-secondary-color);
}

#bs-exceptions-list ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

#bs-exceptions-list li {
    padding: 12px 15px;
    border-bottom: 1px solid #E5E7EB;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
}

#bs-exceptions-list li:last-child {
    border-bottom: none;
}

#bs-exceptions-list .bs-exception-details {
    flex-grow: 1;
    line-height: 1.5;
    font-size: 14px;
}

#bs-exceptions-list .bs-exception-details strong {
    font-weight: 600;
    color: var(--bs-text-dark);
}

#bs-exceptions-list .bs-exception-reason {
    color: var(--bs-text-light);
    font-style: italic;
    font-size: 0.9em;
    display: block;
}

#bs-exceptions-list .bs-exception-actions {
    flex-shrink: 0;
}

#bs-exceptions-list .bs-exception-actions .button {
    margin-left: 5px;
}




/* ==========================================================================
   STILE SCROLLBAR SIDEBAR (Sottile e Integrata)
   ========================================================================== */

/* Applicazione a Firefox */
.bs-dashboard-sidebar ul.bs-sidebar-menu {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}

/* Applicazione a Chrome, Edge, Safari */
.bs-dashboard-sidebar ul.bs-sidebar-menu::-webkit-scrollbar {
    width: 5px; /* Molto sottile */
}

/* Il "binario" su cui scorre la barra (Trasparente per fondersi con lo sfondo scuro) */
.bs-dashboard-sidebar ul.bs-sidebar-menu::-webkit-scrollbar-track {
    background: transparent; 
    margin-top: 5px;
    margin-bottom: 5px;
}

/* La barra stessa (Il "pollice") */
.bs-dashboard-sidebar ul.bs-sidebar-menu::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.15); /* Bianco molto trasparente */
    border-radius: 10px; /* Arrotondata */
}

/* Effetto Hover sulla barra (Diventa più visibile) */
.bs-dashboard-sidebar ul.bs-sidebar-menu::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255, 255, 255, 0.4);
    cursor: pointer;
}



/* Modal Styles */
.bs-modal {
    display: none;
    position: fixed;
    z-index: 2000 !important;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(17, 24, 39, 0.6);
    animation: bsFadeIn 0.3s ease-out;
    padding: 30px 15px;
    box-sizing: border-box;
}

@keyframes bsFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.bs-modal-content {
    background-color: var(--bs-bg-white);
    margin: 5% auto;
    padding: 25px 30px;
    border: none;
    width: 90%;
    max-width: 650px;
    border-radius: var(--bs-border-radius);
    position: relative;
    z-index: 2010 !important;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
    animation: bsSlideIn 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.bs-modal-content.bs-modal-large {
    max-width: 800px;
}

@keyframes bsSlideIn {
    from {
        transform: translateY(-30px) scale(0.98);
        opacity: 0;
    }
    to {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

.bs-modal-close {
    position: absolute;
    top: 12px;
    right: 15px;
    font-size: 0;
    font-weight: normal;
    line-height: 1;
    padding: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.1s ease;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
}

.bs-modal-close .fas.fa-times {
    font-size: 16px;
    color: var(--bs-secondary-color);
}

.bs-modal-close:hover,
.bs-modal-close:focus {
    background-color: var(--bs-bg-light);
    text-decoration: none;
    outline: none;
    transform: scale(1.1);
}

.bs-modal-close:hover .fas.fa-times {
    color: var(--bs-text-dark);
}

.bs-modal h2 {
    margin-bottom: 25px;
    border-bottom: 1px solid var(--bs-border-color);
    padding-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.bs-modal h2 .fas {
    font-size: 0.9em;
    color: var(--bs-secondary-color);
}

.bs-modal form .bs-form-field {
    margin-bottom: 20px;
}

.bs-modal form label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    font-size: 14px;
    color: var(--bs-text-light);
}

.bs-modal form label input[type="checkbox"],
.bs-modal form label input[type="radio"] {
    margin-right: 8px;
    vertical-align: middle;
    width: auto;
    transform: scale(1.1);
}

.bs-modal form input[type="text"],
.bs-modal form input[type="email"],
.bs-modal form input[type="tel"],
.bs-modal form input[type="date"],
.bs-modal form input[type="time"],
.bs-modal form input[type="number"],
.bs-modal form input[type="color"],
.bs-modal form select,
.bs-modal form textarea {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    box-sizing: border-box;
    font-size: 14px;
    color: var(--bs-text-dark);
    background-color: var(--bs-bg-white);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.03);
}

.bs-modal form input:focus,
.bs-modal form select:focus,
.bs-modal form textarea:focus,
.bs-modal form input[type="color"]:focus {
    border-color: var(--bs-primary-color);
    box-shadow: 0 0 0 2px var(--bs-primary-color-light), 0 1px 2px 0 rgba(0, 0, 0, 0.03);
    outline: none;
}

.bs-modal form input[type="time"] {
    max-width: 150px;
    display: inline-block;
    vertical-align: middle;
}

.bs-modal form input[type="number"] {
    padding-right: 5px;
}

.bs-modal form input[type="color"] {
    height: 40px;
    padding: 4px;
    max-width: 100px;
    vertical-align: middle;
    cursor: pointer;
}

.bs-modal form select {
    height: 40px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%234B5563'%3E%3Cpath fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' clip-rule='evenodd' /%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    padding-right: 40px;
}

.bs-modal form select option[style*="color"] {
    font-weight: bold;
}

.bs-modal form textarea {
    min-height: 80px;
    resize: vertical;
}

.bs-modal form small {
    font-size: 12px;
    color: var(--bs-text-light);
    margin-top: 6px;
    display: block;
}

.bs-modal form .bs-form-actions {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid var(--bs-border-color);
    text-align: right;
}

.bs-modal form .bs-form-actions .button {
    margin-left: 10px;
}

.bs-modal form .bs-form-actions .button-primary {
    font-weight: 600;
}

.bs-form-feedback {
    padding: 12px 18px;
    border-radius: var(--bs-border-radius);
    font-size: 14px;
    line-height: 1.5;
    border-width: 1px;
    border-style: solid;
    text-align: left;
}

.bs-form-feedback small {
    display: block;
    margin-top: 5px;
    font-size: 12px;
    opacity: 0.8;
}

#bs-slots-loading img,
.bs-loading-spinner-inline img {
    width: 20px;
    height: 20px;
    vertical-align: middle;
}

.bs-loading-spinner-inline {
    display: inline-flex;
    align-items: center;
    margin-left: 8px;
}

.bs-schedule-editor-area {
    margin-top: 20px;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    padding: var(--bs-padding-base);
    background-color: var(--bs-bg-light);
}

.bs-schedule-day-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px dashed var(--bs-border-color);
}

.bs-schedule-day-row:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.bs-schedule-day-label-container {
    flex-basis: 120px;
    flex-shrink: 0;
    padding-top: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.bs-schedule-day-label {
    font-weight: 600;
    color: var(--bs-text-dark);
    margin-bottom: 0;
}

.bs-schedule-intervals {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 250px;
}

.bs-schedule-interval {
    display: flex;
    align-items: center;
    gap: 8px;
}

.bs-schedule-interval input[type="time"] {
    width: 110px;
    padding: 8px 10px;
    font-size: 14px;
}

.bs-schedule-interval span.bs-time-separator {
    color: var(--bs-secondary-color);
    font-weight: bold;
}

.bs-schedule-day-row .button-small.bs-add-interval,
.bs-schedule-day-row .button-small.bs-remove-interval {
    height: 30px;
    line-height: normal;
    padding: 0 8px;
    min-width: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bs-remove-interval {
    color: var(--bs-error-color);
    border-color: transparent;
    background-color: transparent;
    box-shadow: none;
}

.bs-remove-interval:hover {
    background-color: #FEE2E2;
    color: var(--bs-error-color-dark);
    border-color: transparent;
}

.bs-add-interval {
    align-self: center;
    border-color: transparent;
    background-color: transparent;
    color: var(--bs-primary-color);
    box-shadow: none;
}

.bs-add-interval:hover {
    background-color: var(--bs-primary-color-light);
    color: var(--bs-primary-color-dark);
    border-color: transparent;
}

.bs-add-interval .fas.fa-plus-circle,
.bs-remove-interval .fas.fa-minus-circle {
    font-size: 1.3em;
}

#bs_exception_time_fields {
    display: none;
    border: 1px dashed var(--bs-border-color);
    padding: var(--bs-padding-base);
    margin-bottom: 20px;
    background-color: var(--bs-bg-light);
    border-radius: var(--bs-border-radius);
}

#bs_exception_time_fields input[type="time"] {
    width: 120px;
}

.bs-modal form label.radio-label {
    display: inline-flex;
    align-items: center;
    margin-right: 20px;
    font-weight: normal;
    padding: 5px 0;
    cursor: pointer;
}

.bs-modal form label.radio-label input[type="radio"] {
    margin-right: 8px;
}

#bs-assign-operators-list {
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid var(--bs-border-color);
    padding: var(--bs-padding-base);
    margin-bottom: 20px;
    background-color: var(--bs-bg-white);
    border-radius: var(--bs-border-radius);
}

#bs-assign-operators-list label {
    display: block;
    margin-bottom: 10px;
    font-weight: normal;
    cursor: pointer;
    padding: 5px;
    border-radius: 4px;
    transition: background-color 0.2s ease;
}

#bs-assign-operators-list label:hover {
    background-color: var(--bs-bg-light);
}

#bs-assign-operators-list label input[type="checkbox"] {
    margin-right: 10px;
    transform: scale(1.1);
}

.bs-day-col.bs-cell-status-off-duty {
    background-color: #f8f9fa !important;
    background-image: repeating-linear-gradient( 45deg, rgba(0,0,0,0.05), rgba(0,0,0,0.05) 5px, transparent 5px, transparent 10px ) !important;
    cursor: not-allowed;
}

.bs-daily-planner .bs-operator-col.bs-cell-status-off-duty {
    background-color: #f8f9fa !important;
    background-image: repeating-linear-gradient( 45deg, rgba(0,0,0,0.05), rgba(0,0,0,0.05) 5px, transparent 5px, transparent 10px ) !important;
    cursor: not-allowed !important;
}




/* TAB IMPOSTAZIONI-SETTINGS */
.bs-settings-management h2 {
    /* Stile titolo già presente */
}
.bs-settings-section {
    background-color: var(--bs-bg-white);
    padding: var(--bs-padding-large);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    margin-bottom: 30px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.bs-settings-section h3 {
    margin-top: 0;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--bs-border-color);
    font-size: 18px;
    color: var(--bs-text-dark);
}
.bs-settings-section h3 .fas {
    margin-right: 8px;
    color: var(--bs-primary-color);
}

/* Stili per .form-table (usato da WordPress per le pagine di impostazioni) */
.bs-settings-management .form-table {
    width: 100%;
    border-collapse: collapse;
}
.bs-settings-management .form-table th {
    text-align: left;
    padding: 10px 10px 10px 0;
    vertical-align: top;
    font-weight: 600;
    color: var(--bs-text-light);
    padding-right: 30px; /* Più spazio tra etichetta e campo */
    width: 250px; /* Larghezza fissa per le etichette per un allineamento perfetto */

}
.bs-settings-management .form-table td {
    padding: 8px 10px;
    vertical-align: middle;
}

.bs-settings-management .form-table input[type="text"],
.bs-settings-management .form-table input[type="email"],
.bs-settings-management .form-table input[type="tel"],
.bs-settings-management .form-table input[type="number"],
.bs-settings-management .form-table input[type="password"],
.bs-settings-management .form-table select {
    min-width: 350px; /* Larghezza minima generosa */
    max-width: 100%; /* Permette al campo di restringersi se necessario su schermi piccoli */
}


/* Regole specifiche per classi WordPress standard */
.bs-settings-management .form-table .regular-text {
    width: 350px;
}
.bs-settings-management .form-table .small-text {
    width: 100px; /* Adatto per CAP, ore, ecc. */
}

.bs-settings-management .form-table .description {
    font-size: 12px;
    color: var(--bs-secondary-color);
    display: block;
    margin-top: 4px;
}
.bs-settings-management p.submit {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--bs-border-color);
}

/* Allarga specificamente i campi delle API Key che possono essere lunghi */
.bs-settings-management .form-table input[name*="stripe"],
.bs-settings-management .form-table input[name*="paypal"] {
    min-width: 450px;
    width: 100%;
    max-width: 600px; /* Limite massimo per non esagerare */
}

/* Responsive per la pagina impostazioni */
@media screen and (max-width: 782px) {
    .bs-settings-management .form-table,
    .bs-settings-management .form-table tbody {
        display: block;
        width: 100%;
    }
    .bs-settings-management .form-table tr {
        display: block;
        margin-bottom: 20px;
        padding-bottom: 20px;
        border-bottom: 1px solid var(--bs-border-color-light);
    }
    .bs-settings-management .form-table th,
    .bs-settings-management .form-table td {
        display: block;
        width: 100%;
        padding-left: 0;
        padding-right: 0;
    }
    .bs-settings-management .form-table th {
        padding-bottom: 5px;
    }
    .bs-settings-management .form-table input[type="text"],
    .bs-settings-management .form-table input[type="email"],
    .bs-settings-management .form-table input[type="tel"],
    .bs-settings-management .form-table input[type="password"],
    .bs-settings-management .form-table select,
    .bs-settings-management .form-table .regular-text,
    .bs-settings-management .form-table input[name*="stripe"],
    .bs-settings-management .form-table input[name*="paypal"] {
        min-width: 0;
        width: 100%; /* Piena larghezza su mobile */
    }
}


/* ==========================================================================
   Stili per Barra Pulsante Salva Impostazioni Fissa 
   ========================================================================== */

.bs-settings-footer-bar {
    position: fixed;
    bottom: 0;
    left: 240px; /* Larghezza della tua sidebar */
    right: 0;
    
    background-color: rgba(255, 255, 255, 0.95); /* Leggermente meno trasparente */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    
    padding: 15px 30px;
    margin: 0;
    
    border-top: 1px solid var(--bs-border-color-light);
    box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.08);
    
    z-index: 1000;
    
    display: flex;
    justify-content: space-between; /* <-- MODIFICA CHIAVE: Spinge gli elementi ai lati opposti */
    align-items: center;
    gap: 20px;
}

/* Contenitore per il pulsante e lo spinner, allineato a SINISTRA */
.bs-settings-footer-bar .bs-footer-actions-left {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* Feedback, ora allineato a DESTRA */
.bs-settings-footer-bar #bs-settings-feedback {
    order: 2; /* Sposta il feedback alla fine */
    text-align: right;
    margin: 0;
}

/* Spazio "cuscinetto" per evitare che l'ultima sezione venga coperta */
.bs-settings-management {
    padding-bottom: 100px;
}

/* --- Responsive --- */

/* Quando siamo in admin, considera la sidebar di WP */
body.wp-admin .bs-settings-footer-bar {
    left: 160px; /* Larghezza sidebar WP di default */
    width: auto; /* Rimuovi la larghezza fissa */
    right: 0;
    padding-left: 30px; /* Ripristina padding corretto */
}
body.wp-admin.auto-fold .bs-settings-footer-bar {
    left: 36px; /* Larghezza sidebar WP collassata */
}

/* Su schermi tablet e mobile, la nostra sidebar (se non in admin) scompare */
@media screen and (max-width: 992px) {
    .bs-dashboard-wrap:not(.is-admin) .bs-settings-footer-bar {
        left: 0; /* La nostra sidebar non c'è più, quindi si attacca a sinistra */
    }
}

/* Su schermi mobile, la sidebar di WP scompare */
@media screen and (max-width: 782px) {
    .bs-settings-footer-bar {
        flex-direction: column; /* Impila gli elementi */
        align-items: stretch; /* Allarga gli elementi */
        padding: 15px;
    }
    body.wp-admin .bs-settings-footer-bar {
        left: 0;
        width: 100%;
    }
    .bs-settings-footer-bar .bs-footer-actions-left {
        order: 2; /* Metti il pulsante sotto */
        width: 100%;
    }
    .bs-settings-footer-bar #bs-save-settings-btn {
        width: 100%;
        justify-content: center;
    }
    .bs-settings-footer-bar #bs-settings-feedback {
        order: 1; /* Metti il feedback sopra */
        text-align: center; /* Centra il feedback su mobile */
        margin-bottom: 10px;
    }
}

/* --- Stili per Gruppi di Input Inline nella Pagina Impostazioni --- */
.bs-settings-inline-group {
    display: flex;
    align-items: center;
    gap: 15px; /* Spazio tra gli elementi */
}
.bs-settings-inline-group select {
    min-width: 150px; /* Larghezza fissa per il selettore Sì/No */
    flex-grow: 0; /* Non farlo espandere */
}
.bs-settings-inline-group input[type="time"] {
    flex-grow: 0; /* Non farlo espandere */
}




/* ==========================================================================
   Stili Vista Recensioni (v2 - Layout a Card Completo e Responsive)
   ========================================================================== */

.bs-reviews-management h2 .fas {
    color: var(--bs-warning-color); /* Icona titolo gialla/oro */
}

/* Controlli e Filtri */
.bs-reviews-filters {
    padding: var(--bs-padding-base);
    background-color: var(--bs-bg-white);
    border: 1px solid var(--bs-border-color-light);
    border-radius: var(--bs-border-radius);
    margin-bottom: 25px;
    box-shadow: var(--bs-box-shadow);
}
.bs-reviews-filters form {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    align-items: flex-end;
}
.bs-reviews-filters .bs-reviews-filter-form { /* Sovrascrive lo stile vecchio */
    gap: 10px;
    align-items: center;
}
.bs-reviews-filters label {
    font-size: 13px;
    font-weight: 500;
    color: var(--bs-text-light);
}
.bs-reviews-filters select,
.bs-reviews-filters input[type="search"] {
    padding: 8px 12px;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    height: 38px;
    min-width: 180px;
    background-color: var(--bs-bg-white);
}
.bs-reviews-filters input[type="search"] {
    flex-grow: 1;
    min-width: 200px;
}
.bs-reviews-filters .button {
    height: 38px;
}

/* Griglia delle Card */
.bs-reviews-grid {
    display: grid;
    grid-template-columns: 1fr; /* Una colonna di default */
    gap: 25px;
    margin-top: 25px;
}

/* Stile della singola Card di Recensione */
.bs-review-card {
    background-color: var(--bs-bg-white);
    border: 1px solid var(--bs-border-color-light);
    border-radius: var(--bs-border-radius);
    box-shadow: var(--bs-box-shadow);
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    transition: box-shadow 0.2s ease;
}
.bs-review-card:hover {
    box-shadow: var(--bs-box-shadow-lg);
}
.bs-review-card.review-status-pending { border-left: 4px solid var(--bs-warning-color); }
.bs-review-card.review-status-approved { border-left: 4px solid var(--bs-success-color); }
.bs-review-card.review-status-rejected { border-left: 4px solid var(--bs-error-color); background-color: #fcfcfc; opacity: 0.8; }

/* Header della Card */
.bs-review-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background-color: var(--bs-bg-light);
    border-bottom: 1px solid var(--bs-border-color-light);
}
.bs-rating-stars-display {
    font-size: 1.3em;
    color: var(--bs-warning-color);
}
.bs-rating-stars-display .far {
    opacity: 0.5;
}

/* Badge di Stato (riutilizzato e stilizzato) */
.bs-status-badge-review {
    padding: 0.4em 0.8em;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
    border-radius: var(--bs-border-radius);
    color: var(--bs-bg-white) !important;
    text-transform: capitalize;
    letter-spacing: 0.02em;
}
.bs-status-badge-review.bs-status-pending {
    background-color: var(--bs-warning-color);
    color: var(--bs-text-dark) !important;
}
.bs-status-badge-review.bs-status-approved {
    background-color: var(--bs-success-color);
}
.bs-status-badge-review.bs-status-rejected {
    background-color: var(--bs-error-color);
}

/* Corpo della Card */
.bs-review-card-body {
    padding: 20px;
}
.bs-review-title {
    margin: 0 0 10px 0;
    font-size: 1.2em;
    font-weight: 600;
    color: var(--bs-text-dark);
}
.bs-review-comment {
    margin: 0;
    line-height: 1.7;
    color: var(--bs-text-light);
}

/* Meta Info (Autore, Data, Contesto) */
.bs-review-card-meta {
    padding: 15px 20px;
    border-top: 1px solid var(--bs-border-color-light);
    background-color: var(--bs-bg-light);
    font-size: 13px;
    color: var(--bs-text-light);
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}
.bs-review-author-info strong {
    color: var(--bs-text-dark);
    font-weight: 600;
    display: block;
}
.bs-review-author-info .bs-review-date {
    font-size: 0.9em;
}
.bs-review-context-info {
    text-align: right;
    font-style: italic;
}
.bs-review-context-info strong,
.bs-review-context-info em {
    font-style: normal;
}

/* Azioni di Moderazione */
.bs-review-card-actions {
    padding: 10px 20px;
    background-color: #F9FAFB;
    border-top: 1px solid var(--bs-border-color-light);
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}
.bs-review-action-btn {
    /* Eredita stili da .button e .button-small */
}
/* Stili per i pulsanti di moderazione (Corretti) */
.bs-review-action-btn.button-success {
    background-color: var(--bs-success-color);
    border-color: var(--bs-success-color);
    color: white !important;
}
.bs-review-action-btn.button-warning {
    background-color: var(--bs-warning-color);
    border-color: var(--bs-warning-color);
    color: white !important; /* CORREZIONE: Da testo scuro a bianco */
}
.bs-review-action-btn.button-danger {
    background-color: var(--bs-error-color);
    border-color: var(--bs-error-color);
    color: white !important; /* CORREZIONE: Aggiunto esplicitamente colore bianco */
}

/* Stili Hover */
.bs-review-action-btn.button-success:hover {
    background-color: var(--bs-success-color-dark);
    border-color: var(--bs-success-color-dark);
}
.bs-review-action-btn.button-warning:hover {
    background-color: var(--bs-warning-color-dark);
    border-color: var(--bs-warning-color-dark);
}
.bs-review-action-btn.button-danger:hover {
    background-color: var(--bs-error-color-dark);
    border-color: var(--bs-error-color-dark);
}

/* --- Responsive per Vista Recensioni --- */
@media screen and (min-width: 992px) {
    /* Su schermi larghi, visualizza in 2 colonne */
    .bs-reviews-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (max-width: 600px) {
    .bs-reviews-filters form {
        flex-direction: column;
        align-items: stretch;
    }
    .bs-reviews-filters select,
    .bs-reviews-filters input[type="search"],
    .bs-reviews-filters .button {
        width: 100%;
        min-width: 0;
    }
    .bs-review-card-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    .bs-review-card-meta {
        flex-direction: column;
        align-items: flex-start;
    }
    .bs-review-context-info {
        text-align: left;
    }
    .bs-review-card-actions {
        flex-direction: column;
    }
    .bs-review-card-actions .button {
        width: 100%;
        justify-content: center;
    }
}

/* ==========================================================================
   Stili Menu Contestuale Appuntamento (Dashboard Planner)
   ========================================================================== */

.bs-appointment-context-menu {
    background-color: var(--bs-bg-white, #FFFFFF);
    border: 1px solid var(--bs-border-color, #D1D5DB);
    box-shadow: 2px 2px 8px rgba(0,0,0,0.15);
    padding: 5px 0;
    list-style: none;
    margin: 0;
    min-width: 200px; /* Puoi aggiustare la larghezza minima */
    border-radius: var(--bs-border-radius, 6px);
    font-family: var(--bs-font-family);
    position: absolute; /* o 'fixed' se la tua dashboard ha uno scroll complesso e il menu deve rimanere visibile */
    z-index: 1070; /* Assicurati sia sopra altri elementi, ma sotto le modali standard se necessario */
}

.bs-appointment-context-menu li {
    padding: 10px 15px;
    cursor: pointer;
    font-size: 14px;
    color: var(--bs-text-light, #4B5563);
    display: flex;
    align-items: center;
    transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
    white-space: nowrap; /* Evita che il testo vada a capo */
}

.bs-appointment-context-menu li:hover {
    background-color: var(--bs-primary-color-light, #EFF6FF);
    color: var(--bs-primary-color-dark, #2563EB);
}

.bs-appointment-context-menu li i.fas { /* Usa .fas per essere specifico se usi solo solid */
    margin-right: 10px;
    width: 18px;
    text-align: center;
    color: var(--bs-secondary-color, #6B7280); /* Colore base icone */
}

.bs-appointment-context-menu li:hover i.fas {
    color: var(--bs-primary-color-dark, #2563EB); /* Colore icona su hover */
}

/* Colori specifici per icone menu (opzionale, ma consigliato per chiarezza) */
.bs-appointment-context-menu li[data-status="pending"] i.fas { color: var(--bs-warning-color, #F59E0B); }
.bs-appointment-context-menu li[data-status="confirmed"] i.fas { color: var(--bs-success-color, #10B981); }
.bs-appointment-context-menu li[data-status="completed"] i.fas { color: var(--bs-info-color, #06B6D4); }
.bs-appointment-context-menu li[data-status="no-show"] i.fas { color: var(--bs-text-dark, #1F2937); } /* O un altro colore per no-show */
.bs-appointment-context-menu li[data-status="cancelled"] i.fas { color: var(--bs-error-color, #EF4444); }

/* ==========================================================================
   Stili Responsive Tabella Log Reminder
   ========================================================================== */

/* Stili per i filtri dei log per un layout migliore */
.bs-log-filters .bs-filters-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Colonne flessibili */
    gap: 15px 20px;
    align-items: flex-end; /* Allinea elementi in basso */
}

.bs-log-filters .bs-filter-group {
    display: flex;
    flex-direction: column;
    gap: 5px; /* Spazio tra label e input/select */
}

.bs-log-filters .bs-filter-group label {
    font-size: 13px;
    font-weight: 500;
    color: var(--bs-text-light);
    margin-bottom: 3px;
}

.bs-log-filters .bs-filter-group select,
.bs-log-filters .bs-filter-group input[type="search"] {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    font-size: 14px;
    box-sizing: border-box;
    background-color: var(--bs-bg-white);
    height: 38px; /* Allinea altezza */
}
.bs-log-filters .bs-filter-group .select2-container .select2-selection--single {
    height: 38px !important;
    line-height: 36px !important;
}
.bs-log-filters .bs-filter-group .select2-container .select2-selection__rendered {
    line-height: 36px !important;
    padding-left: 10px !important;
}
.bs-log-filters .bs-filter-group .select2-container .select2-selection__arrow {
    height: 36px !important;
}


/* Stili per la colonna dettagli nella tabella log */
.bs-reminder-logs-table .bs-log-details-col {
    font-size: 0.9em;
    line-height: 1.4;
}
.bs-reminder-logs-table .bs-log-details-col strong {
    display: block;
    margin-bottom: 2px;
    color: var(--bs-text-dark);
}
.bs-reminder-logs-table .bs-log-details-col small {
    display: block;
    color: var(--bs-text-light);
    word-break: break-word;
}
.bs-reminder-logs-table .bs-log-details-col .bs-log-subject,
.bs-reminder-logs-table .bs-log-details-col .bs-log-service,
.bs-reminder-logs-table .bs-log-details-col .bs-log-operator {
    margin-bottom: 3px;
}
.bs-reminder-logs-table .bs-log-details-col .bs-log-subject small,
.bs-reminder-logs-table .bs-log-details-col .bs-log-service small,
.bs-reminder-logs-table .bs-log-details-col .bs-log-operator small {
    color: var(--bs-secondary-color); /* Colore più scuro per i dettagli di servizio/op */
}


@media screen and (max-width: 992px) { /* Breakpoint per iniziare a impilare filtri */
    .bs-log-filters .bs-filters-row {
        grid-template-columns: 1fr; /* Una colonna su schermi medi */
    }
    .bs-log-filters .bs-filter-group {
        flex-basis: auto !important; /* Rimuove flex-basis per layout a colonna */
    }
    .bs-log-filters .bs-filter-group button,
    .bs-log-filters .bs-filter-group a.button {
        width: 100%;
        margin-left: 0 !important;
        margin-top: 5px;
        justify-content: center;
    }
     .bs-log-filters .bs-filter-group[style*="white-space: nowrap"] { /* Per il gruppo bottoni */
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
}


/* Responsive per la tabella dei log (modalità card) */
@media screen and (max-width: 782px) { /* Stesso breakpoint di WordPress per mobile */
    .bs-table-responsive-container {
        overflow-x: visible; /* Non serve scroll orizzontale per le card */
    }
    .bs-reminder-logs-table {
        border: none;
        box-shadow: none;
    }
    .bs-reminder-logs-table thead {
        display: none; /* Nascondi header su mobile */
    }
    .bs-reminder-logs-table tr {
        display: block;
        margin-bottom: 20px;
        border: 1px solid var(--bs-border-color-light);
        border-radius: var(--bs-border-radius-large);
        box-shadow: var(--bs-box-shadow);
        padding: var(--bs-padding-base);
        background-color: var(--bs-bg-white);
    }
    .bs-reminder-logs-table td {
        display: flex; /* Usa flex per allineare label e valore */
        justify-content: space-between; /* Valore a destra */
        align-items: center;
        text-align: right !important; /* Forza allineamento a destra per il valore */
        padding: 10px 0; /* Padding verticale, zero orizzontale gestito dal TR */
        border-bottom: 1px dotted var(--bs-border-color-light);
        font-size: 13px; /* Leggermente più piccolo su mobile */
    }

    .bs-reminder-logs-table td .bs-log-email-value { /* O un selettore più specifico se necessario */
        word-break: break-all; /* Forza l'andata a capo dell'email */
        overflow-wrap: break-word; /* Alternativa o aggiunta a word-break */
        text-align: right; /* Mantiene l'allineamento del valore a destra */
        display: inline-block; /* O block, a seconda di come vuoi che si comporti */
        max-width: 100%; /* Assicura che non superi la larghezza disponibile */
    }

    .bs-reminder-logs-table tr td:last-child {
        border-bottom: none;
    }
    .bs-reminder-logs-table td::before {
        content: attr(data-label); /* Mostra l'etichetta della colonna */
        font-weight: 600; /* Etichetta più bold */
        text-align: left;
        color: var(--bs-text-dark);
        margin-right: 10px;
        flex-shrink: 0; /* Evita che l'etichetta si restringa troppo */
        width: 40%; /* Dai una larghezza all'etichetta */
    }
    .bs-reminder-logs-table td .bs-status-badge { /* Badge di stato più compatto */
        padding: 4px 8px;
        font-size: 0.90em;
        min-width: 70px;
    }
    .bs-reminder-logs-table td.bs-log-details-col { /* Gestione per la colonna dettagli */
        flex-direction: column;
        align-items: flex-start;
        text-align: left !important;
    }
    .bs-reminder-logs-table td.bs-log-details-col::before {
        margin-bottom: 5px; /* Spazio sotto l'etichetta "Dettagli" */
    }
     .bs-reminder-logs-table td.bs-log-details-col strong,
     .bs-reminder-logs-table td.bs-log-details-col small,
     .bs-reminder-logs-table td.bs-log-details-col div {
        width: 100%; /* Fai occupare ai dettagli tutta la larghezza disponibile */
     }
}








/* ==========================================================================
   Stili Modale Gestione Servizi (v6 - Layout Finale Rifinito)
   ========================================================================== */

#bs-manage-service-modal .bs-form-section {
    margin-bottom: 10px; /* NUOVA MODIFICA: Ridotto lo spazio tra le sezioni */
    padding-bottom: 10px;
    border-bottom: 1px solid var(--bs-border-color-light);
}
#bs-manage-service-modal .bs-form-section:last-of-type {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}
#bs-manage-service-modal .bs-form-section-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--bs-secondary-color-dark);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 15px;
}

/* Layout a griglia generico */
.bs-modal .bs-form-grid-2-col {
    display: grid;
    gap: 15px 25px;
    grid-template-columns: repeat(2, 1fr);
}

/* Gruppo Composito per i Tempi */
.bs-input-group-composite {
    display: flex;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.03);
    overflow: hidden;
}
.bs-input-group-composite .bs-form-field {
    flex: 1 1 0;
    min-width: 100px;
    margin-bottom: 0;
    position: relative;
    padding: 8px 12px;
    border-right: 1px solid var(--bs-border-color);
}
.bs-input-group-composite .bs-form-field:last-child {
    border-right: none;
}
.bs-input-group-composite label {
    padding: 0;
    margin-bottom: 2px;
    font-size: 10px;
    text-transform: uppercase;
    color: var(--bs-text-light);
}
.bs-input-group-composite input[type="number"] {
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    font-size: 16px;
    font-weight: 500;
    background-color: transparent;
    width: 100%;
    -moz-appearance: textfield;
}
.bs-input-group-composite input[type="number"]::-webkit-outer-spin-button,
.bs-input-group-composite input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* NUOVA MODIFICA: Griglia specifica per Prezzo e Pagamento Online */
.bs-price-payment-grid {
    display: grid;
    grid-template-columns: 2fr 3fr; /* Dà più spazio alla colonna del selettore */
    gap: 25px;
    align-items: flex-end;
}
#bs-manage-service-modal #bs_service_price {
    width: 100%;
    max-width: none; /* Rimuove qualsiasi limite alla larghezza */
    font-size: 16px;
    font-weight: 500;
}

/* Gruppo per il valore del deposito (invariato) */
.bs-deposit-input-group {
    display: flex;
    align-items: center;
    gap: 8px;
}
.bs-deposit-input-group input[type="number"] {
    flex-grow: 1;
}
.bs-deposit-input-group #bs_deposit_unit_label {
    font-size: 1.2em;
    font-weight: 500;
    color: var(--bs-text-light);
}

/* NUOVA MODIFICA: Gruppo Aspetto a 2 colonne */
.bs-appearance-group {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: flex-end;
    gap: 25px;
}
.bs-appearance-group .bs-form-field {
    margin-bottom: 0;
}

/* Stili per l'interruttore On/Off "Attivo" */
.bs-switch-wrapper {
    display: flex;
    flex-direction: column; /* Forza il testo sotto lo switch */
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
}

/* Opzionale: un piccolo effetto di feedback quando lo switch è attivo */
.bs-switch-wrapper:has(input:checked) {
    background-color: #ecfdf5 !important; /* Verde chiarissimo se attivo */
    border-color: #10b981 !important;
}
.bs-switch { position: relative; display: inline-block; width: 52px; height: 28px; }
.bs-switch input { opacity: 0; width: 0; height: 0; }
.bs-slider {
  position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0;
  background-color: #ccc; transition: .4s; border-radius: 28px;
}
.bs-slider:before {
  position: absolute; content: ""; height: 20px; width: 20px;
  left: 4px; bottom: 4px; background-color: white; transition: .4s; border-radius: 50%;
}
.bs-switch input:checked + .bs-slider { background-color: var(--bs-success-color); }
.bs-switch input:focus + .bs-slider { box-shadow: 0 0 1px var(--bs-success-color); }
.bs-switch input:checked + .bs-slider:before { transform: translateX(24px); }

/* Media query per mobile (invariata) */
@media screen and (max-width: 600px) {
    .bs-modal .bs-form-grid-2-col,
    .bs-input-group-composite,
    .bs-price-payment-grid,
    .bs-appearance-group {
        display: block; /* Impila tutto verticalmente */
    }
    .bs-input-group-composite .bs-form-field,
    .bs-price-payment-grid .bs-form-field,
    .bs-appearance-group .bs-form-field {
        margin-bottom: 20px;
    }
    .bs-input-group-composite .bs-form-field {
        border-right: none;
        border-bottom: 1px solid var(--bs-border-color);
        padding-bottom: 15px;
    }
    .bs-input-group-composite .bs-form-field:last-child {
        border-bottom: none;
        padding-bottom: 8px;
    }
}













/* ==========================================================================
   Stili per Indicatore Stato Pagamento Appuntamento
   ========================================================================== */

.bs-appointment .bs-payment-indicator {
    position: absolute;
    bottom: 4px;
    right: 5px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.2);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    line-height: 1;
    z-index: 12;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
    transition: transform 0.2s ease;
}

.bs-appointment:hover .bs-payment-indicator {
    transform: scale(1.1);
}

/* Colori specifici per stato */
.bs-payment-indicator.paid {
    background-color: var(--bs-success-color, #10B981);
}
.bs-payment-indicator.paid_at_center {
    background-color: var(--bs-success-color-dark, #059669); /* Leggermente diverso per distinguerlo */
}
.bs-payment-indicator.unpaid {
    background-color: var(--bs-warning-color, #F59E0B);
}
.bs-payment-indicator.pending {
    background-color: var(--bs-secondary-color, #6B7280);
}
.bs-payment-indicator.refunded {
    background-color: var(--bs-error-color, #EF4444);
}

/* Stili per planner settimanale (più piccolo) */
.bs-weekly-planner .bs-appointment .bs-payment-indicator {
    width: 16px;
    height: 16px;
    font-size: 9px;
    bottom: 3px;
    right: 3px;
}

/* Stili specifici per la modale di cancellazione admin */
#bs-admin-cancel-appointment-modal .bs-form-actions {
    display: flex;
    flex-wrap: wrap; /* Permette ai bottoni di andare a capo su schermi piccoli */
    justify-content: flex-start; /* Allinea a sinistra */
    gap: 10px; /* Spazio tra i bottoni */
    border-top: 1px solid var(--bs-border-color);
    padding-top: 20px;
    margin-top: 25px;
}

/* Stile per i pulsanti di azione principali */
#bs-admin-cancel-appointment-modal .bs-form-actions .button-secondary,
#bs-admin-cancel-appointment-modal .bs-form-actions .button-danger {
    flex-grow: 1; /* Fai in modo che occupino lo spazio disponibile */
    min-width: 200px; /* Larghezza minima per una buona leggibilità */
}

/* Stile per il pulsante "Annulla Operazione" */
#bs-admin-cancel-appointment-modal .bs-form-actions .bs-modal-cancel {
    margin-left: auto; /* Spinge questo pulsante tutto a destra */
    flex-grow: 0; /* Non farlo crescere */
    background-color: transparent;
    border-color: transparent;
    color: var(--bs-secondary-color);
    box-shadow: none;
}

#bs-admin-cancel-appointment-modal .bs-form-actions .bs-modal-cancel:hover {
    background-color: var(--bs-bg-light);
    color: var(--bs-text-dark);
}

/* Stili Sidebar Lista d'Attesa */
body .bs-waitlist-sidebar {
    display: flex !important; /* Forza la visualizzazione a flex */
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 400px !important;
    height: 100% !important;
    background-color: var(--bs-bg-white) !important;
    box-shadow: -5px 0 25px rgba(0,0,0,0.15) !important;
    z-index: 99999 !important; /* Un valore molto alto per scavalcare tutto */
    flex-direction: column !important;
    
    /* Logica per nascondere/mostrare con transform */
    transform: translateX(100%) !important; /* Nascosto di default */
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

body .bs-waitlist-sidebar.visible {
    transform: translateX(0) !important; /* Visibile quando ha la classe .visible */
}

.bs-waitlist-sidebar-header {
    padding: var(--bs-padding-base) var(--bs-padding-large);
    border-bottom: 1px solid var(--bs-border-color);
    background-color: var(--bs-bg-light);
    flex-shrink: 0;
    position: relative;
}

.bs-waitlist-sidebar-header h3 {
    margin: 0;
    font-size: 18px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.bs-waitlist-sidebar-header p {
    margin: 5px 0 0 0;
    font-size: 13px;
    color: var(--bs-text-light);
}

.bs-waitlist-sidebar-close {
    position: absolute;
    top: 10px;
    right: 10px;
    /* Usa gli stili di .bs-modal-close se vuoi coerenza */
    background: transparent;
    border: none;
    font-size: 16px;
    cursor: pointer;
    color: var(--bs-secondary-color);
    padding: 8px;
    line-height: 1;
}
.bs-waitlist-sidebar-close:hover {
    color: var(--bs-text-dark);
}

.bs-waitlist-sidebar-content {
    flex-grow: 1;
    overflow-y: auto;
    padding: var(--bs-padding-base);
}

.bs-waitlist-sidebar-content .bs-waitlist-loading {
    text-align: center;
    padding: 30px;
    color: var(--bs-secondary-color);
}

ul.bs-waitlist-entries {
    list-style: none;
    margin: 0;
    padding: 0;
}

ul.bs-waitlist-entries li {
    background-color: #fdfdfd;
    border: 1px solid var(--bs-border-color-light);
    border-radius: var(--bs-border-radius);
    padding: var(--bs-padding-base);
    margin-bottom: 10px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}

.bs-waitlist-entry-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 10px;
}

.bs-waitlist-client-name {
    font-weight: 600;
    color: var(--bs-text-dark);
}

.bs-waitlist-time {
    font-size: 0.9em;
    color: var(--bs-text-light);
}

.bs-waitlist-entry-body p {
    margin: 4px 0;
    font-size: 13px;
    color: var(--bs-text-light);
}
.bs-waitlist-entry-body p strong {
    color: var(--bs-text-dark);
    font-weight: 500;
}

.bs-waitlist-entry-actions {
    margin-top: 15px;
    padding-top: 10px;
    border-top: 1px dashed var(--bs-border-color-light);
    text-align: right;
}

/* Stili Indicatore Lista d'Attesa nel Planner */
.bs-waitlist-indicator {
    background-color: var(--bs-info-color);
    color: white;
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 10px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

.bs-waitlist-indicator:hover {
    background-color: var(--bs-info-color-dark);
    transform: scale(1.05);
}

.bs-operator-col-header {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.bs-waitlist-indicator-week {
    position: absolute;
    top: 5px;
    right: 5px;
    z-index: 4;
    padding: 2px 6px;
    font-size: 10px;
}

/* Stili Sidebar Lista d'Attesa */
.bs-waitlist-sidebar {
    position: fixed;
    top: 0;
    right: -420px; /* Nascosto fuori schermo */
    width: 100%;
    max-width: 400px;
    height: 100%;
    background-color: var(--bs-bg-white);
    box-shadow: -5px 0 25px rgba(0,0,0,0.15);
    z-index: 1060;
    display: flex;
    flex-direction: column;
    transition: right 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.bs-waitlist-sidebar.visible {
    right: 0;
}

.bs-waitlist-sidebar-header {
    padding: var(--bs-padding-base) var(--bs-padding-large);
    border-bottom: 1px solid var(--bs-border-color);
    background-color: var(--bs-bg-light);
    flex-shrink: 0;
    position: relative;
}

.bs-waitlist-sidebar-header h3 {
    margin: 0;
    font-size: 18px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.bs-waitlist-sidebar-header h3 .fas {
    color: var(--bs-info-color);
}

.bs-waitlist-sidebar-header p {
    margin: 5px 0 0 0;
    font-size: 13px;
    color: var(--bs-text-light);
}

.bs-waitlist-sidebar-close {
    position: absolute;
    top: 10px;
    right: 10px;
    background: transparent;
    border: none;
    font-size: 16px;
    cursor: pointer;
    color: var(--bs-secondary-color);
    padding: 8px;
    line-height: 1;
    border-radius: 50%;
    transition: background-color 0.2s ease;
}
.bs-waitlist-sidebar-close:hover {
    color: var(--bs-text-dark);
    background-color: var(--bs-border-color-light);
}

.bs-waitlist-sidebar-content {
    flex-grow: 1;
    overflow-y: auto;
    padding: var(--bs-padding-base);
}

.bs-waitlist-sidebar-content .bs-waitlist-loading {
    text-align: center;
    padding: 40px 20px;
    color: var(--bs-secondary-color);
    font-size: 15px;
}

ul.bs-waitlist-entries {
    list-style: none;
    margin: 0;
    padding: 0;
}

ul.bs-waitlist-entries li {
    background-color: #fdfdfd;
    border: 1px solid var(--bs-border-color-light);
    border-radius: var(--bs-border-radius);
    padding: var(--bs-padding-base);
    margin-bottom: 12px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}

.bs-waitlist-entry-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px dashed var(--bs-border-color-light);
}

.bs-waitlist-client-name {
    font-weight: 600;
    color: var(--bs-text-dark);
}

.bs-waitlist-time {
    font-size: 0.9em;
    color: var(--bs-text-light);
}

.bs-waitlist-entry-body p {
    margin: 4px 0;
    font-size: 13px;
    color: var(--bs-text-light);
}
.bs-waitlist-entry-body p strong {
    color: var(--bs-text-dark);
    font-weight: 500;
}

.bs-waitlist-entry-actions {
    margin-top: 15px;
    padding-top: 10px;
    border-top: 1px solid var(--bs-border-color-light);
    text-align: right;
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}




/* --- NUOVA REGOLA PER ALLINEAMENTO --- */
/* Questa regola assicura che il menu inizi dall'alto */
.bs-dashboard-sidebar .bs-sidebar-menu {
    height: 100%;
    display: flex;
    flex-direction: column;
}

ul.bs-sidebar-menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

li.bs-sidebar-menu-item {
    margin: 0;
    padding: 0;
}

li.bs-sidebar-menu-item > a,
li.bs-sidebar-menu-item > .bs-submenu-toggle {
    display: flex;
    align-items: center;
    padding: 12px 20px;
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: 14px;
    font-weight: 500;
    color: var(--bs-text-light);
    text-decoration: none;
    border-left: 3px solid transparent;
    transition: all 0.2s ease-in-out;
}

li.bs-sidebar-menu-item > a .fas,
li.bs-sidebar-menu-item > a .fab,
li.bs-sidebar-menu-item > a .far,
li.bs-sidebar-menu-item > .bs-submenu-toggle .fas {
    margin-right: 12px;
    width: 20px;
    text-align: center;
    font-size: 1.1em;
    color: var(--bs-secondary-color);
    transition: color 0.2s ease-in-out;
}

/* Colore specifico per il link di supporto */
.bs-support-link {
    color: #10B981 !important; /* Verde WhatsApp */
}

.bs-support-link:hover {
    background-color: rgba(16, 185, 129, 0.1) !important; /* Sfondo verde chiarissimo in hover */
}

.bs-support-link i {
    color: #10B981 !important;
}

li.bs-sidebar-menu-item > a:hover,
li.bs-sidebar-menu-item > .bs-submenu-toggle:hover {
    background-color: var(--bs-primary-color-light);
    color: var(--bs-text-dark);
}

li.bs-sidebar-menu-item.active > a,
li.bs-sidebar-menu-item.active-group > .bs-submenu-toggle {
    color: var(--bs-primary-color-dark);
    font-weight: 600;
    border-left-color: var(--bs-primary-color);
}
li.bs-sidebar-menu-item.active > a .fas,
li.bs-sidebar-menu-item.active-group > .bs-submenu-toggle .fas {
    color: var(--bs-primary-color);
}


/* Sottomenu */
.bs-submenu-toggle {
    cursor: pointer;
}
.bs-submenu-toggle .submenu-arrow {
    margin-left: auto;
    font-size: 0.8em;
    transition: transform 0.25s ease-in-out;
}
.has-submenu.open > .bs-submenu-toggle .submenu-arrow {
    transform: rotate(-180deg);
}
ul.bs-submenu {
    list-style: none;
    padding: 0;
    margin: 0;
    background-color: var(--bs-bg-light);
    display: none; /* Nascosto di default, gestito da JS */
}
ul.bs-submenu li a {
    display: block;
    padding: 10px 20px 10px 55px; /* Indentazione per sottomenu */
    padding-top: 8px;
    padding-bottom: 8px;
    font-size: 14px;
    color: var(--bs-text-light);
    text-decoration: none;
    transition: all 0.2s ease-in-out;
    position: relative;
}
ul.bs-submenu li a:hover {
    background-color: #e5e7eb;
    color: var(--bs-text-dark);
}
ul.bs-submenu li.active a {
    color: var(--bs-primary-color-dark);
    font-weight: 600;
}
ul.bs-submenu li.active a::before {
    content: '';
    position: absolute;
    left: 35px;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    background-color: var(--bs-primary-color);
    border-radius: 50%;
}

/* Stili per il link Home nella Sidebar */
.bs-sidebar-divider {
    height: 1px;
    background-color: var(--bs-border-color-light); /* Colore del bordo leggero */
    margin: 10px 20px; /* Margine sopra/sotto e laterale */
    
}

/* Se la sidebar è scura, usa un colore diverso per il divisore */
body .bs-dashboard-sidebar.dark-mode .bs-sidebar-divider {
    background-color: rgba(255, 255, 255, 0.1);
}

/* Stile opzionale per il link Home, per distanziarlo un po' */
.bs-sidebar-menu-item-home {
    margin-top: 5px; /* Leggero spazio sopra il link Home */
}


/* --- AREA PRINCIPALE --- */
.bs-dashboard-main {
    flex-grow: 1;
    width: 100%;
    min-width: 0; /* Previene problemi di overflow con flexbox */
}

.bs-main-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px 25px;
    /*
    margin-bottom: 20px;
    padding-bottom: 15px;
    */
    border-bottom: 1px solid var(--bs-border-color);
}
.bs-main-controls .bs-period-selector {
    padding-bottom: 0;
    margin-left: 0;
}
.bs-main-controls .bs-actions {
    padding-bottom: 0;
}
.bs-date-form button[type="submit"] {
    display: none; /* Nascondi il pulsante "Vai" */
}






/* Sfondo e colori base della sidebar */


/* Colore base per link e toggle */
li.bs-sidebar-menu-item > a,
li.bs-sidebar-menu-item > .bs-submenu-toggle {
    color: rgba(255, 255, 255, 0.7); /* Testo bianco semi-trasparente per link non attivi */
    border-left-color: transparent;
}

/* Colore base per icone */
li.bs-sidebar-menu-item > a .fas,
li.bs-sidebar-menu-item > .bs-submenu-toggle .fas {
    color: rgba(255, 255, 255, 0.6);
}

/* Stile al passaggio del mouse (hover) */
li.bs-sidebar-menu-item > a:hover,
li.bs-sidebar-menu-item > .bs-submenu-toggle:hover {
    background-color: rgba(255, 255, 255, 0.05);
    color: #FFFFFF; /* Testo bianco pieno su hover */
}
li.bs-sidebar-menu-item > a:hover .fas,
li.bs-sidebar-menu-item > .bs-submenu-toggle:hover .fas {
    color: #FFFFFF;
}


/* Stile per l'elemento ATTIVO o il gruppo ATTIVO */
li.bs-sidebar-menu-item.active > a,
li.bs-sidebar-menu-item.active-group > .bs-submenu-toggle {
    color: #FFFFFF; /* Testo bianco pieno */
    font-weight: 600;
    background-color: rgba(0, 0, 0, 0.15);
    border-left-color: var(--bs-primary-color); /* Mantiene l'accento colorato */
}
li.bs-sidebar-menu-item.active > a .fas,
li.bs-sidebar-menu-item.active-group > .bs-submenu-toggle .fas {
    color: #FFFFFF; /* Icona bianca piena */
}


/* Stili Sottomenu */
ul.bs-submenu {
    background-color: rgba(0, 0, 0, 0.2); /* Sfondo leggermente diverso per profondità */
}
ul.bs-submenu li a {
    color: rgba(255, 255, 255, 0.7);
}
ul.bs-submenu li a:hover {
    background-color: rgba(255, 255, 255, 0.08);
    color: #FFFFFF;
}
ul.bs-submenu li.active a {
    color: #FFFFFF;
    font-weight: 600;
}
/* La pallina del sottomenu attivo rimane del colore primario, creando un bel contrasto */

/* ==========================================================================
   STILI CARD APPUNTAMENTO VISTA OPERATORE (v3 - Finale)
   ========================================================================== */
.bs-daily-planner .bs-appointment-card {
    position: absolute;
    left: 4px;
    right: 4px;
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-left: 5px solid var(--service-color, var(--bs-secondary-color)); /* Colore del servizio come bordo sinistro */
    border-radius: var(--bs-border-radius);
    padding: 5px 8px; /* Padding ridotto per compattezza */
    box-sizing: border-box;
    font-size: 12px; /* Font più piccolo, come nella vista giornaliera */
    line-height: 1.4; /* Interlinea ridotta */
    color: var(--bs-bg-white);
    text-shadow: 0 1px 1px rgba(0,0,0,0.3);
    overflow: hidden;
    cursor: pointer;
    z-index: 10;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.bs-daily-planner .bs-card-status {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: 8px;
    flex-wrap: wrap;
}

/* --- INIZIO NUOVO BLOCCO DI STILI PER I BADGE --- */

/* Stile base comune per entrambi i badge */
.bs-daily-planner .bs-status-badge,
.bs-daily-planner .bs-payment-badge {
    padding: 4px 10px; /* Padding interno per dare spessore */
    border-radius: var(--bs-border-radius, 6px); /* Bordi arrotondati */
    font-size: 11px; /* Dimensione font come richiesto */
    font-weight: 600; /* Testo in grassetto */
    color: var(--bs-bg-white) !important; /* Testo BIANCO */
    text-shadow: none; /* Rimuove l'ombra del testo ereditata dalla card */
    display: inline-flex;
    align-items: center;
    gap: 5px;
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.bs-daily-planner .bs-status-badge .fas,
.bs-daily-planner .bs-payment-badge .fas {
    font-size: 0.9em;
}

/* Colori specifici per .bs-status-badge */
.bs-daily-planner .bs-status-badge.bs-status-confirmed {
    background-color: var(--bs-success-color);
}
.bs-daily-planner .bs-status-badge.bs-status-pending {
    background-color: var(--bs-warning-color);
    color: var(--bs-text-dark) !important; /* Testo scuro per leggibilità su giallo */
}
.bs-daily-planner .bs-status-badge.bs-status-completed {
    background-color: var(--bs-info-color);
}
.bs-daily-planner .bs-status-badge.bs-status-cancelled {
    background-color: var(--bs-error-color);
}
.bs-daily-planner .bs-status-badge.bs-status-no-show {
    background-color: var(--bs-secondary-color);
}

/* Colori specifici per .bs-payment-badge */
.bs-daily-planner .bs-payment-badge.bs-payment-paid {
    background-color: var(--bs-success-color-dark); /* Un verde leggermente più scuro per distinguerlo */
}
.bs-daily-planner .bs-payment-badge.bs-payment-unpaid {
    background-color: var(--bs-warning-color-dark); /* Un arancio/giallo più scuro */
    color: var(--bs-bg-white) !important; /* Manteniamo testo bianco se il colore è abbastanza scuro */
}


/* --- STILI PULSANTI AZIONE CARD OPERATORE --- */
.bs-daily-planner .bs-card-actions .button {
    color: var(--bs-bg-white) !important;
    text-shadow: none;
    border: none;
}

.bs-daily-planner .bs-card-actions .bs-edit-appointment-btn {
    background-color: var(--bs-info-color);
}
.bs-daily-planner .bs-card-actions .bs-edit-appointment-btn:hover {
    background-color: var(--bs-info-color-dark);
}

.bs-daily-planner .bs-card-actions .bs-delete-app-btn {
    background-color: var(--bs-error-color);
}
.bs-daily-planner .bs-card-actions .bs-delete-app-btn:hover {
    background-color: var(--bs-error-color-dark);
}


.bs-daily-planner .bs-appointment-card.is-expanded {
    /* Ora usiamo min-height per garantire che la card espansa non sia più piccola di quella collassata */
    min-height: var(--original-height, auto) !important; 
    height: auto !important;
    overflow: visible;
    z-index: 11;
}

/* Contenitore per la prima riga */
.bs-card-header-line {
    display: flex;
    align-items: baseline;
    gap: 6px; /* Spazio ridotto */
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 18px; /* Altezza minima per garantire la visibilità della prima riga */
}
.bs-card-header-line .bs-card-time {
    font-weight: 600;
    flex-shrink: 0;
    font-size: 1.0em; /* Relativo a 11px */
}
.bs-card-header-line .bs-card-client-name {
    font-weight: 500;
    font-size: 1.0em;
    overflow: hidden;
    text-overflow: ellipsis;
}
.bs-card-header-line .bs-card-service-name {
    font-size: 0.9em;
    opacity: 0.8;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bs-daily-planner .bs-card-collapsible-content {
    display: none;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(255,255,255,0.2);
}
.bs-card-meta-info {
    font-size: 12px; /* Aumentiamo leggermente la leggibilità di questi dettagli */
    font-weight: 500;
    color: rgba(255,255,255,0.9);
    margin: 0 0 8px 0;
}
.bs-card-meta-info i {
    margin-right: 4px;
}
.bs-daily-planner .bs-card-notes { font-size: 12px; font-style: italic; margin: 5px 0 10px 0; max-height: 40px; overflow: auto; white-space: normal; }
.bs-daily-planner .bs-card-status { display: flex; gap: 8px; align-items: center; margin-top: 8px; flex-wrap: wrap; }
.bs-daily-planner .bs-payment-badge { font-size: 10px; padding: 3px 8px; border-radius: 10px; font-weight: 500; color: var(--bs-text-dark); }

/* ==========================================================================
   STILI PULSANTI AZIONE CARD (Standardizzati)
   ========================================================================== */

.bs-daily-planner .bs-card-actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    justify-content: center;
    align-items: center;
}

/* 1. Stile Base per TUTTI i pulsanti (Modifica, Cancella, WhatsApp) */
.bs-daily-planner .bs-card-actions .button-small {
    padding: 6px 12px !important;  /* Padding rettangolare */
    height: 28px !important;       /* Altezza fissa uniforme */
    font-size: 14px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: auto !important;        /* Larghezza automatica in base al contenuto */
    box-sizing: border-box;
    border-radius: 4px;
    transition: all 0.2s ease;
}

/* Hover generico (spostamento) */
.bs-daily-planner .bs-card-actions .button-small:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* 2. Stile Specifico PULSANTE WHATSAPP (Integrazione Colori) */
.bs-daily-planner .bs-card-actions .bs-whatsapp-btn {
    background-color: #25D366 !important; /* Verde WhatsApp */
    border-color: #25D366 !important;
    color: white !important;
    
    /* Assicuriamo che non sia quadrato ma rettangolare come gli altri */
    padding: 6px 12px !important; 
    width: auto !important;
}

/* Hover specifico WhatsApp */
.bs-daily-planner .bs-card-actions .bs-whatsapp-btn:hover {
    background-color: #128C7E !important; /* Verde scuro */
    border-color: #128C7E !important;
    /* La trasformazione scale/translate è gestita dal generico .button-small:hover */
}

/* Icona interna WhatsApp */
.bs-daily-planner .bs-card-actions .bs-whatsapp-btn i {
    font-size: 1.2em;
    margin: 0;
}



.bs-card-expand-toggle {
    position: absolute;
    bottom: 5px;
    right: 5px;
    background: rgba(0,0,0,0.3);
    color: white;
    border: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease;
    z-index: 12; /* Sopra il contenuto collassabile */
}
.is-expanded .bs-card-expand-toggle {
    transform: rotate(180deg);
}
.bs-card-expand-toggle i { font-size: 12px; }

/* Lista d'attesa nella vista operatore */
.bs-operator-waitlist {
    background-color: var(--bs-bg-light);
    border: 1px solid var(--bs-border-color-light);
    border-radius: var(--bs-border-radius-large);
    padding: var(--bs-padding-large);
}
.bs-operator-waitlist h3 { font-size: 16px; margin-top:0; border-bottom: 1px solid var(--bs-border-color); padding-bottom: 10px; }
.bs-operator-waitlist .bs-no-data-message { font-style: italic; color: var(--bs-text-light); }
.bs-operator-waitlist ul.bs-waitlist-entries { /* Eredita stili da sidebar, ok */ }

/* Responsive */
@media screen and (max-width: 992px) {
    .bs-operator-view-layout { grid-template-columns: 1fr; }
    .bs-operator-view-controls { flex-direction: column; align-items: stretch; }
}

/* ==========================================================================
   FIX LAYOUT VISTA OPERATORE (Planner + Waitlist)
   ========================================================================== */

.bs-operator-view-container .bs-planner-body {
    /* Il planner nella vista operatore deve essere flessibile */
    width: 100%;
}

.bs-operator-view-container .bs-planner-grid {
    /* Rimuoviamo la larghezza minima solo in questa vista */
    min-width: 0; 
}

.bs-operator-view-container .bs-time-col,
.bs-operator-view-container .bs-time-col-header {
    /* Possiamo dare una larghezza fissa leggermente più piccola alla colonna dell'ora */
    flex-basis: 60px;
    flex-shrink: 0;
}

.bs-operator-view-container .bs-operator-col,
.bs-operator-view-container .bs-operator-col-header {
    /* La colonna dell'operatore si prenderà tutto lo spazio rimanente */
    flex-basis: auto;
    flex-grow: 1;
}

/* Assicuriamoci che il layout a griglia principale si comporti bene */
.bs-operator-view-layout {
    display: grid;
    /* Usiamo minmax() per rendere la prima colonna flessibile ma con un minimo */
    grid-template-columns: minmax(400px, 2fr) 1fr; 
    gap: 25px;
    align-items: flex-start; /* Allinea gli elementi in cima alle loro celle */
}


.bs-daily-planner .bs-card-header-line {
    display: flex;
    align-items: baseline;
    gap: 6px;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 18px;
}
.bs-daily-planner .bs-card-header-line .bs-card-time {
    font-weight: 600;
    flex-shrink: 0;
    font-size: 1.0em;
}
.bs-daily-planner .bs-card-header-line .bs-card-client-name {
    font-weight: 500;
    font-size: 1.0em;
    overflow: hidden;
    text-overflow: ellipsis;
}
.bs-daily-planner .bs-card-header-line .bs-card-service-name {
    font-size: 0.9em;
    opacity: 0.8;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bs-daily-planner .bs-card-meta-info {
    font-size: 12px;
    font-weight: 500;
    color: rgba(255,255,255,0.9);
    margin: 0 0 8px 0;
}
.bs-daily-planner .bs-card-meta-info i {
    margin-right: 4px;
}

.bs-daily-planner .bs-card-expand-toggle {
    position: absolute;
    bottom: 5px;
    right: 5px;
    background: rgba(0,0,0,0.3);
    color: white;
    border: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease;
    z-index: 12;
}
.bs-daily-planner .is-expanded .bs-card-expand-toggle {
    transform: rotate(180deg);
}
.bs-daily-planner .bs-card-expand-toggle i { font-size: 12px; }





/* ==========================================================================
   STILI MODALE APPUNTAMENTO (v2)
   ========================================================================== */

#bs-add-appointment-modal .bs-modal-content {
    max-width: 750px; /* Modale leggermente più larga */
}

#bs-add-appointment-modal h2 .fas {
    color: var(--bs-primary-color);
}

/* FIX CAMPI IMPORTO MODALI APPUNTAMENTO */
#bs-add-appointment-modal input[type="number"],
#bs-edit-appointment-modal input[type="number"],
#bs-add-appointment-modal select,
#bs-edit-appointment-modal select {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    padding: 0 10px !important;
    height: 40px !important;
}

.bs-form-section {
    margin-bottom: 25px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--bs-border-color-light);
}
.bs-form-section:last-of-type {
    border-bottom: none;
    margin-bottom: 0;
}
.bs-form-section h3 {
    font-size: 16px;
    font-weight: 500;
    color: var(--bs-text-dark);
    margin: 0 0 20px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}
.bs-form-section h3 .fas {
    color: var(--bs-secondary-color);
    font-size: 0.9em;
}

.bs-form-field .bs-required {
    color: var(--bs-error-color);
    font-weight: normal;
    margin-left: 2px;
}

.bs-input-group {
    display: flex;
    gap: 8px;
}
.bs-input-group .button {
    flex-shrink: 0;
}

.bs-inset-box {
    background-color: var(--bs-bg-light);
    border: 1px dashed var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    padding: 15px 20px;
    margin-top: 15px;
}
.bs-inset-box h4 {
    margin: 0 0 15px 0;
    font-size: 14px;
    font-weight: 600;
}

.bs-datetime-picker-group {
    display: grid;
    grid-template-columns: 1fr auto auto; /* Data, Ora/Slot, Pulsante */
    gap: 10px;
    align-items: center;
}
.bs-datetime-picker-group input[type="time"],
.bs-datetime-picker-group select {
    width: 140px; /* Larghezza fissa per ora/slot */
}
.bs-datetime-picker-group #bs-find-slots-btn {
    white-space: nowrap;
}

/* Azioni in fondo alla modale */
#bs-add-appointment-modal .bs-form-actions {
    display: flex;
    flex-direction: row-reverse; /* Allinea pulsanti a destra */
    align-items: center;
    gap: 15px;
    margin-top: 25px;
    padding-top: 20px;
}
#bs-add-appointment-modal .bs-form-feedback {
    flex-grow: 1; /* Il feedback occupa lo spazio a sinistra */
    text-align: left;
    margin: 0;
}
#bs-add-appointment-modal .bs-form-actions-buttons {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}

/* Stili specifici pulsanti modale */
#bs-add-to-waitlist-btn {
    background-color: var(--bs-info-color);
    border-color: var(--bs-info-color);
    color: white;
}
#bs-add-to-waitlist-btn:hover {
    background-color: var(--bs-info-color-dark);
    border-color: var(--bs-info-color-dark);
}

/* Media Query per layout modale */
@media screen and (max-width: 600px) {
    .bs-form-grid-2-col {
        grid-template-columns: 1fr;
    }
    .bs-datetime-picker-group {
        grid-template-columns: 1fr; /* Impila tutto verticalmente */
    }
    .bs-datetime-picker-group input,
    .bs-datetime-picker-group select,
    .bs-datetime-picker-group .button {
        width: 100%;
    }
    #bs-add-appointment-modal .bs-form-actions {
        flex-direction: column;
    }
}

/* ==========================================================================
   INDICATORE ORA CORRENTE (Migliorato)
   ========================================================================== */

.bs-current-time-indicator {
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background-color: var(--bs-error-color, #EF4444); /* Rosso acceso */
    z-index: 15;
    pointer-events: none;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
    transition: top 0.5s linear;
}

/* Pallino/Freccia sull'asse temporale (Sinistra) */
.bs-current-time-indicator::before {
    content: '';
    position: absolute;
    left: 0px; /* Sporge leggermente nella colonna orari */
    top: -5px;  /* Centrato rispetto alla linea di 2px */
    width: 0; 
    height: 0; 
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 8px solid var(--bs-error-color, #EF4444); /* Triangolo che punta a destra */
    z-index: 16;
}

/* Pallino finale (Destra - Opzionale) */
.bs-current-time-indicator::after {
    content: '';
    position: absolute;
    right: 0;
    top: -3px;
    width: 8px;
    height: 8px;
    background-color: var(--bs-error-color, #EF4444);
    border-radius: 50%;
}

/* ==========================================================================
   LAYOUT STILE APPLICAZIONE (v3 - Completo e Unificato)
   ========================================================================== */

/* --- Contenitore Principale --- */
.bs-dashboard-wrap {
    padding: 0; /* Rimuoviamo il padding dal contenitore esterno */
    background-color: var(--bs-bg-light);
    border: none;
}

.bs-dashboard-layout {
    display: flex;
    position: relative;
}


/* --- SIDEBAR DI NAVIGAZIONE --- */
.bs-dashboard-sidebar {
    width: 240px; /* Larghezza fissa su desktop */
    flex-shrink: 0;
    height: 100vh; /* Altezza completa della finestra */
    position: fixed; /* Fissa rispetto alla finestra */
    top: 0;
    left: 0;
    background-color: var(--bs-text-dark, #3A2F2A); /* Sfondo scuro */
    padding: 0;
    z-index: 1010;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease-in-out;
}

/* ==========================================================================
   SIDEBAR LOGO - LAYOUT DINAMICO PRO
   ========================================================================== */

.bs-sidebar-logo-container {
    padding: 20px;
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
    
    /* FIX: Altezza fissa per evitare salti del menu al cambio logo */
    height: 130px; 
    
    /* Centratura perfetta del logo indipendentemente dalle proporzioni */
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    overflow: hidden;
}

.bs-sidebar-logo {
    /* Si adatta al contenitore senza mai superarlo */
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    
    /* Mantiene le proporzioni originali (fondamentale per loghi rettangolari) */
    object-fit: contain; 
    
    /* Rimosso il 50% (cerchio) che taglierebbe i loghi con testo laterale.
       Usiamo un arrotondamento leggero e moderno. */
    border-radius: 8px; 
    
    /* Stile estetico raffinato */
    /* border: 2px solid rgba(255, 255, 255, 0.2); */
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    
    /* Transizione fluida per l'aggiornamento istantaneo via JS */
    transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Effetto al passaggio del mouse sul logo */
.bs-sidebar-logo:hover {
    transform: scale(1.03);
    border-color: rgba(255, 255, 255, 0.5);
    box-shadow: 0 6px 15px rgba(0,0,0,0.4);
}

/* Menu della Sidebar */
ul.bs-sidebar-menu {
    list-style: none; margin: 0; padding: 15px 0;
    overflow-y: auto; flex-grow: 1;
}
li.bs-sidebar-menu-item > a,
li.bs-sidebar-menu-item > .bs-submenu-toggle {
    color: rgba(255, 255, 255, 0.7);
    border-left: 3px solid transparent;
    /* ... altri stili dei link già presenti e corretti ... */
}
li.bs-sidebar-menu-item > a .fas,
li.bs-sidebar-menu-item > .bs-submenu-toggle .fas {
    color: rgba(255, 255, 255, 0.6);
}
li.bs-sidebar-menu-item > a:hover,
li.bs-sidebar-menu-item > .bs-submenu-toggle:hover {
    background-color: rgba(255, 255, 255, 0.05);
    color: #FFFFFF;
}
li.bs-sidebar-menu-item.active > a,
li.bs-sidebar-menu-item.active-group > .bs-submenu-toggle {
    color: #FFFFFF;
    font-weight: 600;
    background-color: rgba(0, 0, 0, 0.15);
    border-left-color: var(--bs-primary-color);
}
li.bs-sidebar-menu-item.active > a .fas,
li.bs-sidebar-menu-item.active-group > .bs-submenu-toggle .fas {
    color: #FFFFFF;
}
ul.bs-submenu {
    background-color: rgba(0, 0, 0, 0.2);
}
ul.bs-submenu li a { color: rgba(255, 255, 255, 0.7); }
ul.bs-submenu li a:hover { background-color: rgba(255, 255, 255, 0.08); color: #FFFFFF; }
ul.bs-submenu li.active a { color: #FFFFFF; font-weight: 600; }

.bs-sidebar-divider {
    height: 1px;
    background-color: rgba(255, 255, 255, 0.1);
    margin: 15px 20px;
}

/* Barra di scorrimento personalizzata per la sidebar */
.bs-dashboard-sidebar::-webkit-scrollbar { width: 8px; }
.bs-dashboard-sidebar::-webkit-scrollbar-track { background: transparent; }
.bs-dashboard-sidebar::-webkit-scrollbar-thumb { background-color: rgba(255, 255, 255, 0.2); border-radius: 10px; border: 2px solid transparent; background-clip: content-box; }
.bs-dashboard-sidebar::-webkit-scrollbar-thumb:hover { background-color: rgba(255, 255, 255, 0.4); }


/* --- AREA CONTENUTO PRINCIPALE --- */
.bs-dashboard-main {
    flex-grow: 1;
    margin-left: 240px; 
    width: calc(100% - 240px);
    display: flex; /* <-- AGGIUNTO */
    flex-direction: column; /* <-- AGGIUNTO */
    height: 100vh; /* <-- AGGIUNTO */
}

/* Header del contenuto principale */
.bs-dashboard-header {
    display: block; /* Mantiene il layout a blocco */
    text-align: left; /* Allinea tutto il testo a sinistra */
    margin-bottom: 25px; 
    padding-bottom: 20px;
    border-bottom: 1px solid var(--bs-border-color);
    /* Rimuoviamo gli stili non necessari che abbiamo resettato prima */
    background: none;
    box-shadow: none;
    border-top: none;
    border-left: none;
    border-right: none;
}

h1.bs-dashboard-title {
    margin: 0;
    padding: 0;
    border-bottom: none;
    font-size: clamp(22px, 4vw, 26px);
    display: flex;
    align-items: center;
    justify-content: flex-start; /* Forza l'allineamento a sinistra */
    gap: 12px;
    color: var(--bs-text-dark);
    font-weight: 600;
}
h1.bs-dashboard-title .fas {
    color: var(--bs-primary-color);
    font-size: 1em;
    margin: 0;
}
h1.bs-dashboard-title span strong {
    font-weight: 700;
    color: var(--bs-primary-color-dark);
}

p.bs-dashboard-slogan {
    margin: 5px 0 0 0;
    font-size: 14px;
    font-weight: 400;
    color: var(--bs-text-light);
    font-style: italic;
    letter-spacing: 0.5px;
}




/* --- RESPONSIVE E MENU HAMBURGER --- */
.bs-sidebar-toggle-btn {
    display: none;
    position: fixed;
    top: 15px;
    left: 15px;
    z-index: 2100 !important;
    background: var(--bs-bg-white);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    width: 44px;
    height: 44px;
    font-size: 18px;
    color: var(--bs-text-dark);
    cursor: pointer;
    box-shadow: var(--bs-box-shadow);
    align-items: center;
    justify-content: center;    
}

.bs-sidebar-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 1005;
}

/* Rotazione Hamburger */
.bs-sidebar-toggle-btn i {
    transition: transform 0.3s ease;
}
.bs-sidebar-toggle-btn.is-active i {
    transform: rotate(90deg);
}

/* Breakpoint per mobile/tablet */
@media screen and (max-width: 992px) {
    .bs-dashboard-sidebar {
        transform: translateX(-100%); /* Nascosta di default */
        box-shadow: 2px 0 15px rgba(0,0,0,0.2);
    }
    .bs-dashboard-sidebar.is-open {
        transform: translateX(0); /* Visibile quando aperta */
    }
    .bs-dashboard-main {
        margin-left: 0;
        width: 100%;
        height: auto;      /* <-- AGGIUNTO: Ripristina altezza automatica */
        min-height: 100vh; /* <-- AGGIUNTO: Assicura altezza minima */
    }
    .bs-sidebar-toggle-btn {
        display: flex !important; /* Forza visualizzazione su mobile */
    }
    .bs-dashboard-header {
        margin-top: 50px;
        text-align: left; /* Assicura che rimanga a sinistra */
    }
    h1.bs-dashboard-title {
        justify-content: flex-start; /* Assicura che rimanga a sinistra */
    }
}

@media screen and (max-width: 600px) {
    .bs-dashboard-header {
        gap: 10px;
    }
    h1.bs-dashboard-title {
        font-size: 19px;
        flex-wrap: wrap; 
    }
    p.bs-dashboard-slogan {
        font-size: 13px;
    }
}


/* ==========================================================================
   LAYOUT FINALE STILE APPLICAZIONE (v4)
   ========================================================================== */

/* --- Contenitore Principale --- */
.bs-dashboard-wrap { padding: 0; background-color: var(--bs-bg-light); border: none; }
.bs-dashboard-layout { display: flex; position: relative; }

/* --- Sidebar (stili colore e base già definiti, qui solo posizionamento) --- */
.bs-dashboard-sidebar {
    width: 240px; flex-shrink: 0; height: 100vh; position: fixed; top: 0; left: 0;
    z-index: 1010; display: flex; flex-direction: column;
    transition: transform 0.3s ease-in-out;
}
.bs-sidebar-logo-container { /* ... stili esistenti ... */ }
ul.bs-sidebar-menu { /* ... stili esistenti ... */ }

/* --- Main Content Area --- */
.bs-dashboard-main {
    flex-grow: 1; margin-left: 240px; width: calc(100% - 240px);
    display: flex; flex-direction: column; height: 100vh;
    background-color: var(--bs-bg-light);
}

/* --- Header Superiore (Chiaro) --- */
.bs-dashboard-top-header {
    flex-shrink: 0; /* Non si restringe */
    background-color: var(--bs-bg-white);
    padding: 15px 30px;
    border-bottom: 1px solid var(--bs-border-color-light);
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    position: relative; /* Necessario per creare un contesto di impilamento */
    z-index: 1001;      /* Valore più alto di quello della Control Bar (1000) */
}
.bs-dashboard-title-group h1.bs-dashboard-title { font-size: 22px; color: var(--bs-text-dark); }
.bs-dashboard-title-group p.bs-dashboard-slogan { color: var(--bs-text-light); }
.bs-header-actions-right { display: flex; align-items: center; gap: 15px; }
.bs-header-icon-btn { font-size: 18px; color: var(--bs-secondary-color); text-decoration: none; position: relative; padding: 5px; }
.bs-header-icon-btn:hover { color: var(--bs-primary-color); }
.bs-icon-badge {
    position: absolute; top: 0; right: 0;
    background-color: var(--bs-error-color); color: white;
    font-size: 9px; font-weight: bold;
    width: 16px; height: 16px;
    border-radius: 50%; display: flex;
    align-items: center; justify-content: center;
    border: 2px solid var(--bs-bg-white);
}

/* --- Control Bar (Scura) --- */
.bs-main-controls {
    position: -webkit-sticky; /* Per compatibilità Safari */
    position: sticky;
    top: 0;
    z-index: 1000;
    
    flex-shrink: 0;
    background-color: #3A2F2A;
    color: #FFFFFF;
    padding: 12px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
/* Aggiusta la posizione sticky quando la barra di admin di WP è presente */
body.admin-bar .bs-main-controls {
    top: 32px;
}

.bs-controls-left, .bs-controls-right {
    display: flex;
    align-items: center;
    gap: 20px;
}

.bs-main-controls .bs-period-selector { padding: 0; margin: 0; }
.bs-main-controls .bs-period-selector .button {
    background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.2); color: #FFF;
}
.bs-main-controls .bs-period-selector .button:hover { background-color: rgba(255,255,255,0.2); }
.bs-main-controls .bs-current-period-display { color: #FFF; font-size: 1.1em; }
.bs-main-controls .bs-current-period-day { cursor: pointer; }

.bs-static-date-display {
    font-size: 1.1em;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 10px;
    color: rgba(255,255,255,0.9);
}

.bs-dynamic-clock {
    font-family: 'Courier New', Courier, monospace;
    font-size: 1.6em;
    font-weight: 700;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    gap: 12px;
    background-color: rgba(0,0,0,0.2);
    padding: 5px 15px;
    border-radius: var(--bs-border-radius);
}
.bs-dynamic-clock .fas {
    font-size: 0.8em;
    opacity: 0.7;
}
#bs-clock-time {
    letter-spacing: 2px;
}

/* --- Responsive per Control Bar --- */
@media screen and (max-width: 782px) {
    .bs-main-controls {
        padding: 10px 15px;
        gap: 15px;
        flex-direction: column;
        align-items: stretch;
    }
    
    .bs-controls-left, .bs-controls-right {
        justify-content: space-between;
        width: 100%;
        gap: 10px; /* Riduci gap interno su mobile */
    }

    .bs-main-controls .bs-period-selector {
        gap: 5px;
        flex-grow: 1; /* Permetti al selettore di occupare spazio */
    }
    .bs-main-controls .bs-current-period-display {
        font-size: 0.9em;
        padding: 0 5px;
        text-align: center;
        flex-grow: 1;
    }
    .bs-main-controls .bs-period-selector .button {
        height: 34px;
        padding: 0 8px;
        font-size: 12px;
    }

    .bs-dynamic-clock {
        font-size: 1.1em; /* Orologio più piccolo */
        padding: 4px 8px;
        gap: 8px;
        flex-shrink: 0; /* Non farlo restringere troppo */
    }
    
    .bs-main-controls .bs-actions .button-large {
        font-size: 13px;
        padding: 8px 12px;
    }
    
    /* Quando i selettori di data non ci sono, centra l'orologio */
    .bs-controls-left:empty + .bs-controls-right {
        justify-content: center;
    }
}

@media screen and (max-width: 480px) {
    .bs-controls-left, .bs-controls-right {
        flex-wrap: wrap;
        justify-content: center;
    }
    .bs-main-controls .bs-period-selector {
        width: 100%;
        order: 2; /* Metti i selettori data sotto */
        margin-top: 10px;
    }
    .bs-main-controls .bs-actions {
        order: 1; /* Metti le azioni sopra */
    }
    .bs-dynamic-clock {
        order: 3;
    }
}


/* --- Area di Contenuto Scorrevole --- 
.bs-main-content-scrollable {
    flex-grow: 1;
    overflow-y: auto; 
    padding: 25px 30px;
    background-color: var(--bs-bg-light);
    -webkit-overflow-scrolling: touch; 
}*/

/* --- Responsive (Aggiornato) --- */
@media screen and (max-width: 992px) {
    .bs-dashboard-main { margin-left: 0; width: 100%; height: auto; min-height: 100vh; }
    .bs-dashboard-sidebar { transform: translateX(-100%); }
    .bs-dashboard-sidebar.is-open { transform: translateX(0); }
    .bs-sidebar-toggle-btn { display: flex !important; /* Forza visualizzazione su mobile */ }
    .bs-dashboard-top-header { padding-left: 70px; /* Spazio per il pulsante hamburger */ }
    /*.bs-main-content-scrollable { overflow-y: visible; padding: 20px 15px; }*/
}
@media screen and (max-width: 768px) {
    .bs-dashboard-top-header, .bs-main-controls { flex-direction: column; align-items: stretch; gap: 15px; }
    .bs-header-actions-right { justify-content: flex-end; }
    .bs-main-controls .bs-actions .button { width: 100%; justify-content: center; }
}

/* --- NUOVO: Stili per il Date Picker Overlay --- */
.bs-date-picker-wrapper {
    position: relative;
    display: inline-block;
}
.bs-date-picker-wrapper .bs-current-period-day {
    cursor: pointer;
    user-select: none; /* Impedisce la selezione del testo */
    pointer-events: none; /* Fa passare i click attraverso lo span */
}
.bs-date-picker-wrapper .bs-date-form {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.bs-date-picker-wrapper input[type="date"] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0; /* Mantiene l'elemento cliccabile ma invisibile */
    cursor: pointer;
    border: none;
    
    /* --- AGGIUNTE CHIAVE --- */
    color: transparent;      /* Rende il testo dell'input trasparente */
    background: transparent; /* Rende lo sfondo dell'input trasparente */
}
/* Stile per l'icona del calendario del browser (WebKit) */
.bs-date-picker-wrapper input[type="date"]::-webkit-calendar-picker-indicator {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;

    color: transparent;      /* Rende il testo dell'input trasparente */
    background: transparent; /* Rende lo sfondo dell'input trasparente */    
}


/* ==========================================================================
   Stili Vista Dashboard Arricchita
   ========================================================================== */

.bs-dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.bs-dashboard-widget {
    background-color: var(--bs-bg-white);
    border: 1px solid var(--bs-border-color-light);
    border-radius: var(--bs-border-radius-large);
    box-shadow: var(--bs-box-shadow);
    display: flex;
    flex-direction: column;
}

.bs-widget-title {
    margin: 0;
    padding: 15px 20px;
    font-size: 16px;
    font-weight: 600;
    border-bottom: 1px solid var(--bs-border-color-light);
    display: flex;
    align-items: center;
    gap: 10px;
}

.bs-widget-title .fas {
    color: var(--bs-secondary-color);
}

.bs-widget-content {
    padding: 20px;
    flex-grow: 1;
}

.bs-widget-content .bs-no-data-message {
    text-align: center;
    padding: 30px 0;
    color: var(--bs-text-light);
    font-style: italic;
}

ul.bs-upcoming-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

ul.bs-upcoming-list li {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 12px 0;
    border-bottom: 1px solid var(--bs-border-color-light);
}

ul.bs-upcoming-list li:last-child {
    border-bottom: none;
}

.bs-upcoming-date {
    flex-shrink: 0;
    width: 50px;
    text-align: center;
    background-color: var(--bs-bg-light);
    border-radius: var(--bs-border-radius);
    padding: 5px;
    border: 1px solid var(--bs-border-color);
}
.bs-upcoming-date .month {
    display: block;
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    color: var(--bs-primary-color);
}
.bs-upcoming-date .day {
    display: block;
    font-size: 20px;
    font-weight: 600;
    color: var(--bs-text-dark);
}

.bs-upcoming-details {
    flex-grow: 1;
    min-width: 0;
}
.bs-upcoming-details .time {
    font-weight: 600;
    font-size: 15px;
    color: var(--bs-text-dark);
    margin-right: 8px;
}
.bs-upcoming-details .client {
    font-weight: 500;
    color: var(--bs-text-dark);
}
.bs-upcoming-details .service {
    display: block;
    font-size: 13px;
    color: var(--bs-text-light);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bs-pulse-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    transition: transform 0.2s ease;
}

.bs-pulse-card:hover {
    transform: translateY(-3px);
}

.pulse-icon {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

.pulse-data {
    display: flex;
    flex-direction: column;
}

.pulse-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: #64748b;
    letter-spacing: 0.5px;
}

.pulse-value {
    font-size: 22px;
    font-weight: 800;
    color: #1e293b;
    line-height: 1.2;
}


/* ==========================================================================
   Stili Vista Clienti a Card (Versione 3 - Design Screenshot)
   ========================================================================== */

/* Controlli sopra la griglia */
.bs-clients-controls {
    display: flex; flex-wrap: wrap; justify-content: space-between;
    align-items: center; gap: 20px; margin-bottom: 25px;
}
.bs-clients-controls .bs-controls-left .button-primary {
    background-color: #C8826D; /* Colore terracotta dallo screenshot */
    border-color: #AB6C5A;
    font-weight: 600;
    padding: 10px 20px;
}
.bs-clients-controls .bs-controls-left .button-primary:hover {
    background-color: #AB6C5A;
}
.bs-clients-controls .bs-search-form {
    display: flex;
}
.bs-clients-controls .bs-search-form input[type="search"] {
    min-width: 250px;
    border-radius: var(--bs-border-radius) 0 0 var(--bs-border-radius);
    border-right: none;
}
.bs-clients-controls .bs-search-form .button {
    border-radius: 0 var(--bs-border-radius) var(--bs-border-radius) 0;
    box-shadow: none;
}
.bs-clients-controls .bs-search-form .button-secondary {
    margin-left: 8px;
}

/* Griglia delle card */
.bs-clients-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 25px;
    margin-top: 25px;
}

/* Card Cliente */
.bs-client-card {
    background-color: var(--bs-bg-white);
    border: 1px solid #F1E9E4; /* Bordo molto leggero */
    border-radius: var(--bs-border-radius);
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    display: flex; flex-direction: column;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.bs-client-card:hover { transform: translateY(-3px); box-shadow: 0 6px 15px rgba(0,0,0,0.08); }

/* Header della Card */
.bs-client-card-header {
    display: flex; align-items: center; gap: 15px; padding: 15px;
}
.bs-client-avatar {
    width: 70px; 
    height: 70px; 
    border-radius: 50% !important; 
    object-fit: cover; 
    flex-shrink: 0;
    background-color: #e2e8f0; 
    border: 1px solid #ddd;
}
.bs-client-card-identity { flex-grow: 1; min-width: 0; }
.bs-client-name { margin: 0; font-size: 1.1em; font-weight: 600; color: var(--bs-text-dark); }
.bs-client-id { font-size: 0.8em; color: var(--bs-secondary-color); margin-top: 2px; }

/* Pulsanti di Azione nell'Header */
.bs-client-card-actions { display: flex; gap: 8px; }
.bs-client-card-actions .bs-action-btn {
    width: 34px; height: 34px; font-size: 14px; padding: 0;
    border-radius: var(--bs-border-radius); background-color: #F9FAFB;
    color: var(--bs-text-light); border: 1px solid var(--bs-border-color); box-shadow: none;
}
.bs-client-card-actions .bs-action-btn:hover {
    background-color: var(--bs-primary-color-light); color: var(--bs-primary-color-dark); border-color: var(--bs-primary-color);
}

/* Corpo della Card */
.bs-client-card-body {
    padding: 0 15px 15px 15px; flex-grow: 1; border-top: 1px solid var(--bs-border-color-light);
}
ul.bs-client-contact-info { list-style: none; padding: 0; margin: 15px 0; }
ul.bs-client-contact-info li { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-size: 0.9em; }
ul.bs-client-contact-info li .fas { width: 16px; text-align: center; color: var(--bs-secondary-color); }
ul.bs-client-contact-info a { color: var(--bs-primary-color-dark); text-decoration: none; word-break: break-all; }
ul.bs-client-contact-info a:hover { text-decoration: underline; }

/* STATISTICHE - STILI CHIAVE PER IL NUOVO DESIGN */
.bs-client-stats {
    display: flex; justify-content: space-around; text-align: center;
    background-color: #FAF7F5; padding: 15px 10px; border-radius: var(--bs-border-radius);
}
.bs-client-stats .bs-client-stat-item { flex: 1; border-right: 1px solid #E8DDD6; }
.bs-client-stats .bs-client-stat-item:last-child { border-right: none; }
.bs-client-stats .stat-value {
    display: block; font-size: 1.2em; font-weight: 600; color: var(--bs-text-dark);
}
.bs-client-stats .stat-label {
    display: block; font-size: 0.7em; text-transform: uppercase; color: var(--bs-text-light); margin-top: 4px; letter-spacing: 0.5px;
}
/* Stili specifici per l'ultima statistica (data) */
.bs-client-stats .stat-last-app .stat-value {
    font-size: 1em; /* Più piccolo del numero, più grande della label */
    font-weight: 500;
    line-height: 1.3;
}
.bs-client-stats .stat-last-app .stat-value .day-month { display: block; }
.bs-client-stats .stat-last-app .stat-value .year { display: block; font-size: 0.9em; opacity: 0.8; }
.bs-client-stats .bs-loading-message.small { padding: 15px 0; font-size: 1.2em; color: var(--bs-secondary-color); }

/* Footer della Card */
/* Footer della Card (Stile aggiornato per pulsante) */
.bs-client-card-footer {
    padding: 15px; /* Aumentiamo leggermente il padding per dare aria */
    background-color: var(--bs-bg-light);
    border-top: 1px solid var(--bs-border-color-light);
    text-align: center;
    border-radius: 0 0 var(--bs-border-radius) var(--bs-border-radius);
}

.bs-client-card-footer .button {
    width: 100%; /* Fa sì che il pulsante occupi tutta la larghezza del footer */
    justify-content: center; /* Centra il testo e l'icona all'interno del pulsante */
    text-transform: uppercase;
    font-size: 0.8em;
    font-weight: 600;
    letter-spacing: 0.8px;
}

.bs-client-card-footer .button-primary {
    background-color: var(--bs-footer-button-bg, #C8826D);
    border-color: var(--bs-footer-button-border, #AB6C5A);
    color: white;
}
.bs-client-card-footer .button-primary:hover {
    background-color: var(--bs-footer-button-hover-bg, #AB6C5A);
    border-color: var(--bs-footer-button-hover-bg, #AB6C5A);
}

/* ==========================================================================
   Stili Vista Dettaglio Cliente (v7 - Responsive e Allineamento Finale)
   ========================================================================== */

.bs-client-detail-header {
    display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
    gap: 20px; padding: 20px; background-color: var(--bs-bg-white);
    border: 1px solid var(--bs-border-color-light); border-radius: var(--bs-border-radius-large);
    margin-bottom: 30px;
}
.bs-client-header-identity { display: flex; align-items: center; gap: 20px; flex-grow: 1; }
.bs-client-avatar-large {
    width: 80px; height: 80px; border-radius: 50%; object-fit: cover;
    border: 3px solid var(--bs-bg-white);
    box-shadow: 0 0 0 1px var(--bs-border-color), 0 4px 8px rgba(0,0,0,0.1);
}
h2.bs-client-name { margin: 0; padding: 0; border: none; font-size: 1.8em; }
.bs-client-meta-info { font-size: 0.9em; color: var(--bs-text-light); }
.bs-client-header-actions { display: flex; gap: 10px; }
.bs-client-header-actions .button { font-weight: 500; }
.bs-client-header-actions .bs-edit-client-btn {
    background-color: var(--bs-primary-color); border-color: var(--bs-primary-color); color: white;
}
.bs-client-header-actions .bs-edit-client-btn:hover {
    background-color: var(--bs-primary-color-dark); border-color: var(--bs-primary-color-dark); color: white;
}

.bs-client-detail-grid {
    display: grid; grid-template-columns: 320px 1fr;
    gap: 30px; align-items: flex-start;
}
.bs-client-detail-sidebar { display: flex; flex-direction: column; gap: 30px; }

.bs-client-detail-view .bs-dashboard-widget {
    background-color: var(--bs-bg-white); border: 1px solid var(--bs-border-color-light);
    border-radius: var(--bs-border-radius-large); box-shadow: var(--bs-box-shadow);
    display: flex; flex-direction: column; overflow: hidden;
    border-top: 4px solid var(--bs-border-color);
}
/* ... [Stili per i bordi colorati dei widget rimangono invariati] ... */
.bs-client-detail-sidebar .bs-dashboard-widget:nth-child(1) { border-top-color: var(--bs-primary-color); }
.bs-client-detail-sidebar .bs-dashboard-widget:nth-child(2) { border-top-color: var(--bs-success-color); }
.bs-client-detail-sidebar .bs-dashboard-widget:nth-child(3) { border-top-color: var(--bs-warning-color); }
.bs-client-detail-main .bs-dashboard-widget { border-top-color: var(--bs-secondary-color); }

.bs-client-detail-view .bs-widget-title {
    margin: 0; padding: 15px 20px; font-size: 16px; font-weight: 600;
    border-bottom: 1px solid var(--bs-border-color-light); display: flex; align-items: center; gap: 10px;
}
/* ... [Stili per le icone colorate dei titoli rimangono invariati] ... */
.bs-client-detail-sidebar .bs-dashboard-widget:nth-child(1) .bs-widget-title .fas { color: var(--bs-primary-color); }
.bs-client-detail-sidebar .bs-dashboard-widget:nth-child(2) .bs-widget-title .fas { color: var(--bs-success-color); }
.bs-client-detail-sidebar .bs-dashboard-widget:nth-child(3) .bs-widget-title .fas { color: var(--bs-warning-color); }
.bs-client-detail-main .bs-dashboard-widget .bs-widget-title .fas { color: var(--bs-secondary-color); }

/* === MODIFICA CHIAVE: CARD CONTATTI === */
ul.bs-client-contact-info-detail {
    list-style: none; /* Rimuove i puntini */
    margin: 0; padding: 0;
}
ul.bs-client-contact-info-detail li {
    display: flex; gap: 15px; align-items: flex-start;
    margin-bottom: 18px; font-size: 14px;
}
ul.bs-client-contact-info-detail li:last-child { margin-bottom: 0; }
ul.bs-client-contact-info-detail li .fas {
    width: 20px; text-align: center; color: var(--bs-primary-color);
    font-size: 1em; margin-top: 3px; opacity: 0.8;
}
ul.bs-client-contact-info-detail li div {
    display: flex; flex-direction: column; /* Forza etichetta e valore ad andare a capo */
}
ul.bs-client-contact-info-detail li strong {
    font-size: 0.75em; text-transform: uppercase; color: var(--bs-text-light); 
    margin-bottom: 3px; letter-spacing: 0.5px;
    font-weight: 600; /* Etichetta in grassetto */
}
ul.bs-client-contact-info-detail li div a,
ul.bs-client-contact-info-detail li div span {
    font-weight: 500; color: var(--bs-text-dark); word-break: break-all;
}

/* === MODIFICA CHIAVE: CARD STATISTICHE RAPIDE === */
.bs-client-stats-detail { display: block; text-align: left; }
.bs-client-stats-detail .bs-stat-row {
    display: flex; justify-content: space-between; align-items: baseline;
    padding: 12px 0; border-bottom: 1px solid var(--bs-border-color-light); font-size: 14px; gap: 15px;
}
.bs-client-stats-detail .bs-stat-row:first-child { padding-top: 0; }
.bs-client-stats-detail .bs-stat-row:last-child { border-bottom: none; padding-bottom: 0; }
.bs-client-stats-detail .stat-label {
    font-weight: 500 !important; /* Peso normale/medio */
    color: var(--bs-text-light); /* Colore più chiaro */
    flex-shrink: 0;
}

.bs-client-stats-detail .stat-value {
    font-weight: 600; /* GRASSETTO */
    color: var(--bs-text-dark); /* Colore più scuro */
    text-align: right !important;
    flex-grow: 1;
}
.bs-client-stats-detail .stat-last-app .stat-value {
    font-weight: 500; /* Il valore della data non deve essere in grassetto */
    color: var(--bs-text-light); /* Colore più leggero per la data */
    line-height: 1.3;
    
    /* NUOVE REGOLE per l'allineamento */
    display: flex;
    justify-content: flex-end; /* Allinea il contenuto a destra */
    align-items: baseline;
    gap: 0.4em; /* Piccolo spazio tra giorno/mese e anno */
}

.bs-client-stats-detail .stat-last-app .stat-value .day-month {
    display: block;
    white-space: nowrap; /* Impedisce al giorno/mese di andare a capo */
}

.bs-client-stats-detail .stat-last-app .stat-value .year {
    display: block;
    font-size: 1em; /* Stessa dimensione del giorno/mese */
    opacity: 1; /* Opacità piena */
}
.bs-client-stats-detail .bs-loading-message { padding: 20px 0; text-align: center; color: var(--bs-secondary-color); }

/* Stili Card Note Interne (invariati) */
.bs-client-notes-display { /* ... */ }

/* === MODIFICA CHIAVE: TABELLA STORICO APPUNTAMENTI RESPONSIVE === */
/* La tabella userà le stesse classi di .bs-my-appointments-table, quindi erediterà già gli stili base.
   Aggiungiamo qui la media query specifica per il responsive se non è già globale. */
@media screen and (max-width: 782px) {
    .bs-client-detail-main .bs-my-appointments-table thead {
        display: none;
    }
    .bs-client-detail-main .bs-my-appointments-table tr {
        display: block; margin-bottom: 20px; border: 1px solid var(--bs-border-color-light);
        border-radius: var(--bs-border-radius); box-shadow: var(--bs-box-shadow);
        padding: 0; background-color: var(--bs-bg-white);
    }
    .bs-client-detail-main .bs-my-appointments-table td {
        display: flex; justify-content: space-between; align-items: center;
        text-align: right; border-bottom: 1px dotted var(--bs-border-color-light); padding: 12px var(--bs-padding-base);
    }
    .bs-client-detail-main .bs-my-appointments-table tr td:last-child {
        border-bottom: none;
    }
    .bs-client-detail-main .bs-my-appointments-table td::before {
        content: attr(data-label); font-weight: 500; text-align: left; color: var(--bs-text-dark); margin-right: 10px;
    }
}

/* Media Query Generali per la Vista Dettaglio */
@media (max-width: 992px) {
    .bs-client-detail-grid {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 600px) {
    .bs-client-detail-header {
        flex-direction: column; align-items: flex-start;
    }
    .bs-client-header-actions { width: 100%; margin-top: 15px; }
    .bs-client-header-actions .button { flex-grow: 1; justify-content: center; }
    h2.bs-client-name { font-size: 1.5em; }
}



/* ==========================================================================
   Stili Modale Cliente (v2 con Avatar)
   ========================================================================== */
.bs-client-modal-layout {
    display: grid;
    grid-template-columns: 150px 1fr; /* Colonna avatar fissa, colonna form flessibile */
    gap: 30px;
    align-items: flex-start;
}

.bs-client-modal-avatar-col {
    display: flex;
    justify-content: center;
}

.bs-avatar-uploader {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
}
.bs-avatar-uploader .bs-client-avatar-large {
    width: 128px;
    height: 128px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--bs-border-color-light);
    background-color: #f0f0f0;
}

#bs-upload-avatar-btn {
    width: 100%;
}

/* Responsive per la modale */
@media (max-width: 782px) {
    .bs-client-modal-layout {
        grid-template-columns: 1fr; /* Le colonne si impilano */
    }
    .bs-client-modal-avatar-col {
        margin-bottom: 20px;
    }
}


/* ==========================================================================
   Stili Nuova Vista Servizi a Card (v2 - Design Raffinato)
   ========================================================================== */

.bs-services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 25px;
    margin-top: 25px;
}

.bs-service-card {
    background-color: var(--bs-bg-white);
    border: 1px solid var(--bs-border-color-light);
    border-radius: var(--bs-border-radius-large);
    box-shadow: var(--bs-box-shadow);
    display: flex;
    flex-direction: column;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border-left: 4px solid var(--bs-secondary-color); /* Grigio per inattivo */
}

.bs-service-card.is-active {
    border-left-color: var(--bs-success-color); /* Verde per attivo */
}

.bs-service-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--bs-box-shadow-lg);
}

.bs-service-card.is-inactive {
    opacity: 0.7;
}
.bs-service-card.is-inactive:hover {
    opacity: 1;
}

.bs-service-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 15px;
    padding: var(--bs-padding-base);
}

.bs-service-card-identity {
    flex-grow: 1;
    min-width: 0;
}

.bs-service-name {
    margin: 0;
    font-size: 1.1em;
    font-weight: 600;
    color: var(--bs-text-dark);
    position: relative;
    padding-bottom: 8px;
}

/* Stile per la Linea Sottolineatura Colorata */
.bs-service-name > span {
    position: relative;
}
.bs-service-name > span::after {
    content: '';
    position: absolute;
    bottom: -12px;
    left: 0;
    width: 80px;
    height: 6px;
    background-color: var(--service-color);
    border-radius: 3px;
}

.bs-service-category {
    font-size: 0.8em;
    color: var(--bs-text-light);
    font-style: italic;
    margin-top: 4px;
    display: block;
}

.bs-service-card-status-toggle {
    flex-shrink: 0;
}

.bs-service-card-body {
    padding: 0 var(--bs-padding-base) var(--bs-padding-base);
    flex-grow: 1;
}

.bs-service-main-stats {
    display: flex;
    justify-content: space-around;
    text-align: center;
    background-color: var(--bs-bg-light);
    padding: 15px 10px;
    border-radius: var(--bs-border-radius);
    margin-top: 10px;
}
.bs-service-main-stats .bs-stat-item {
    flex: 1;
    border-right: 1px solid var(--bs-border-color-light);
}
.bs-service-main-stats .bs-stat-item:last-child {
    border-right: none;
}
.bs-service-main-stats .bs-stat-item > * {
    display: block;
}
.bs-service-main-stats .bs-stat-item .fas,
.bs-service-main-stats .bs-stat-item .far {
    font-size: 1.4em;
    color: var(--bs-primary-color);
    margin-bottom: 8px;
}
.bs-service-main-stats .bs-stat-item span {
    font-size: 1.1em;
    font-weight: 600;
    color: var(--bs-text-dark);
}
.bs-service-main-stats .bs-stat-item small {
    font-size: 0.7em;
    text-transform: uppercase;
    color: var(--bs-text-light);
    margin-top: 3px;
}

.bs-service-payment-info {
    margin-top: 15px;
    padding: 8px 12px;
    background-color: var(--bs-info-color-light);
    color: var(--bs-info-color-dark);
    border-radius: var(--bs-border-radius);
    font-size: 0.85em;
    font-weight: 500;
    text-align: center;
}
.bs-service-payment-info .fas {
    margin-right: 6px;
}

.bs-service-card-footer {
    padding: 12px;
    background-color: var(--bs-bg-light);
    display: flex;
    gap: 10px;
    justify-content: flex-end; /* Allinea a destra */
    border-radius: 0 0 var(--bs-border-radius-large) var(--bs-border-radius-large);
}
.bs-service-card-footer .button-small {
    flex-grow: 1; /* I pulsanti principali si dividono lo spazio */
    justify-content: center;
}
/* Stile per il pulsante Elimina */
.bs-service-card-footer .bs-delete-service-btn {
    flex-grow: 0;
    flex-basis: 40px;
    background-color: var(--bs-error-color);   /* Colore di sfondo rosso */
    border-color: var(--bs-error-color);     /* Bordo rosso */
    color: white !important;                 /* Testo/Icona bianca */
}
.bs-service-card-footer .bs-delete-service-btn:hover {
    background-color: var(--bs-error-color-dark); /* Rosso più scuro su hover */
    border-color: var(--bs-error-color-dark);
}
/* Assicura che l'icona interna sia bianca */
.bs-service-card-footer .bs-delete-service-btn .fas {
    color: white !important;
}

/* Stili per i Pulsanti del Footer */
.bs-service-card-footer .bs-edit-service-btn {
    background-color: var(--bs-info-color);
    border-color: var(--bs-info-color);
    color: white !important;
}
.bs-service-card-footer .bs-edit-service-btn:hover {
    background-color: var(--bs-info-color-dark);
    border-color: var(--bs-info-color-dark);
}
.bs-service-card-footer .bs-assign-operators-btn {
    background-color: var(--bs-secondary-color);
    border-color: var(--bs-secondary-color);
    color: white !important;
}
.bs-service-card-footer .bs-assign-operators-btn:hover {
    background-color: var(--bs-secondary-color-dark);
    border-color: var(--bs-secondary-color-dark);
}






/* ==========================================================================
   Stili Vista Operatori e Modale (v4 - Blocco Unico)
   ========================================================================== */

/* --- Vista a Griglia delle Card Operatore --- */
.bs-operators-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 25px;
    margin-top: 25px;
}

.bs-operator-card {
    background-color: var(--bs-bg-white);
    border: 1px solid var(--bs-border-color-light);
    border-radius: var(--bs-border-radius-large);
    box-shadow: var(--bs-box-shadow);
    display: flex;
    flex-direction: column;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    overflow: hidden;
    position: relative;
}

.bs-operator-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--bs-box-shadow-lg);
}

/* Rende le card dei disattivati chiaramente diverse */
.bs-operator-card.is-inactive {
    opacity: 0.6;
    filter: grayscale(0.5);
    border-top-color: #94a3b8 !important; /* Grigio per l'header */
}

.bs-operator-card.is-inactive .bs-operator-card-header {
    background-color: #94a3b8 !important; /* Forza header grigio se disattivo */
}


/* Header della Card */
.bs-operator-card-header {
    text-align: center;
    padding: 20px 20px 15px;
    position: relative;
    color: white;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
}

.bs-operator-avatar {
    width: 70px;
    height: 70px;
    border-radius: 50% !important;
    object-fit: cover;
    margin: 0 auto 12px;
    display: block;
    border: 3px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2) !important;
    background-color: #e2e8f0;  
}

.bs-operator-name {
    margin: 0;
    font-size: 1.15em;
    font-weight: 600;
}

/* Corpo della Card */
.bs-operator-card-body {
    padding: 15px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 15px;
    border-top: 1px solid var(--bs-border-color-light);
    /*border-bottom: 1px solid var(--bs-border-color-light);*/
}

.bs-operator-action-bar {
    display: flex;
    justify-content: space-between; /* Spinge i due gruppi ai lati opposti */
    align-items: center;
    padding: 0 0 15px 0; /* Padding solo sotto */
    margin-bottom: 15px; /* Spazio prima delle statistiche */
    border-bottom: 1px dashed var(--bs-border-color-light); /* Divisore */
}

.bs-operator-card-body .bs-operator-action-bar {
    padding-top: 0; /* Rimuovi padding se è il primo elemento */
}

.bs-action-group-left,
.bs-action-group-right {
    display: flex;
    gap: 10px; /* Spazio tra le icone in ogni gruppo */
}

/* Stile unificato per tutti i pulsanti/link a icona */
.bs-action-btn {
    display: flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: 50%;
    background-color: var(--bs-bg-light); color: var(--bs-text-light);
    border: 1px solid var(--bs-border-color);
    font-size: 15px; text-decoration: none; transition: all 0.2s ease;
    cursor: pointer;
}

/* Stili Hover */
.bs-action-btn:hover {
    background-color: var(--bs-primary-color-light);
    color: var(--bs-primary-color-dark);
    border-color: var(--bs-primary-color);
    transform: scale(1.1);
}
.bs-edit-operator-btn:hover {
    background-color: var(--bs-info-color-light);
    color: var(--bs-info-color-dark);
    border-color: var(--bs-info-color);
}
.bs-delete-operator-btn:hover {
    background-color: var(--bs-error-color-light);
    color: var(--bs-error-color-dark);
    border-color: var(--bs-error-color);
}


ul.bs-operator-contact-info a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: var(--bs-bg-light);
    color: var(--bs-secondary-color);
    border: 1px solid var(--bs-border-color);
    font-size: 15px;
    text-decoration: none;
    transition: all 0.2s ease;
}

ul.bs-operator-contact-info a:hover {
    background-color: var(--bs-primary-color);
    color: white;
    border-color: var(--bs-primary-color);
}

/* Contenitore Orari ed Eccezioni */
.bs-operator-availability-summary {
    display: flex;
    gap: 15px;
    align-items: flex-start;
    padding-top: 15px;
    margin-top: 15px;
    border-top: 1px dashed var(--bs-border-color);
}

.bs-operator-schedule-summary {
    flex-grow: 1;
    font-size: 12px;
}

.bs-summary-title {
    font-weight: 600;
    color: var(--bs-text-dark);
    margin: 0 0 8px 0;
    font-size: 0.8em;
    text-transform: uppercase;
}

.bs-schedule-summary-content {
    color: var(--bs-text-light);
    line-height: 1.6;
}

.bs-schedule-summary-content strong {
    color: var(--bs-text-dark);
    font-weight: 500;
}

.bs-schedule-summary-content .bs-loading-message.small {
    text-align: center;
    padding: 10px 0;
}

.bs-operator-exceptions-link-wrapper {
    flex-shrink: 0;
    padding-top: 20px;
}

.bs-operator-card-quick-link {
    position: relative;
    background-color: var(--bs-bg-light);
    color: var(--bs-text-light);
    border: 1px solid var(--bs-border-color);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bs-operator-card-quick-link:hover {
    background-color: var(--bs-primary-color-light);
    border-color: var(--bs-primary-color);
    color: var(--bs-primary-color-dark);
    transform: scale(1.1);
}

.bs-quick-link-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background-color: var(--bs-error-color);
    color: white;
    font-size: 10px;
    font-weight: bold;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--bs-bg-light);
}

/* Statistiche Rapide */
.bs-operator-stats {
    display: flex;
    justify-content: space-around;
    text-align: center;
    padding-top: 15px;
    border-top: 1px dashed var(--bs-border-color-light);
    gap: 20px;
}

.bs-operator-stats .bs-loading-message.small {
    padding: 10px 0;
    width: 100%; /* Occupa tutto lo spazio se sta caricando */
}

.bs-operator-stat-item {
    display: flex;
    align-items: center;
    gap: 8px; /* Spazio tra icona e valore */
}

.bs-operator-stat-item .fas {
    font-size: 1.4em; /* Dimensione icona */
    /*color: var(--bs-secondary-color); /* Colore icona */
}

/* Colori per le icone delle statistiche */
.bs-operator-stat-item:nth-child(1) .fas { color: var(--bs-success-color); } /* Verde per appuntamenti */
.bs-operator-stat-item:nth-child(2) .fas { color: var(--bs-info-color); }    /* Blu/Ciano per ore */
.bs-operator-stat-item .fa-spinner { color: var(--bs-secondary-color); } /* Spinner rimane grigio */

.bs-operator-stat-item span {
    font-size: 1.1em !important; /* Dimensione valore numerico */
    font-weight: 600;
    color: var(--bs-text-dark);
}

.bs-operator-stats div span:first-child {
    font-size: 1.3em;
    font-weight: 600;
    color: var(--bs-text-dark);
    display: block;
}

.bs-operator-stats div span:last-child {
    font-size: 0.7em;
    text-transform: uppercase;
    color: var(--bs-text-light);
    letter-spacing: 0.5px;
}



.bs-operator-card-footer .button-small {
    flex-grow: 1;
    justify-content: center;
}

.bs-operator-card-footer .bs-edit-operator-btn {
    background-color: var(--bs-primary-color);
    border-color: var(--bs-primary-color);
    color: white !important;
}

.bs-operator-card-footer .bs-edit-operator-btn:hover {
    background-color: var(--bs-primary-color-dark);
    border-color: var(--bs-primary-color-dark);
}

/* Stile per il pulsante Elimina */
.bs-operator-card-footer .bs-delete-operator-btn {
    flex-grow: 0;
    flex-basis: 40px;
    background-color: var(--bs-error-color);
    border-color: var(--bs-error-color);
}
.bs-operator-card-footer .bs-delete-operator-btn:hover {
    background-color: var(--bs-error-color-dark);
    border-color: var(--bs-error-color-dark);
}
/* REGOLA PER L'ICONA BIANCA */
.bs-operator-card-footer .bs-delete-operator-btn .fas {
    color: white !important;
}

/* --- Stili per la Modale Operatore a TAB --- */
#bs-manage-operator-modal .bs-modal-content {
    padding-bottom: 20px;
}

/* ==========================================================================
   STILE CAMPO LINK iCAL (Sync Calendario)
   ========================================================================== */

/* Contenitore principale (Box evidenziato) */
.bs-ical-box {
    background-color: #F9FAFB;
    border: 1px solid var(--bs-border-color-light);
    border-radius: var(--bs-border-radius);
    padding: 15px;
    margin-top: 20px;
}

.bs-ical-box label {
    color: var(--bs-info-color-dark);
    font-weight: 600;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Gruppo Input + Pulsanti */
.bs-input-group-joined {
    display: flex;
    gap: 10px; /* Spazio tra input e bottoni */
    align-items: center;
}

/* Campo Input URL */
.bs-input-group-joined input[type="text"]#bs_ical_url {
    flex-grow: 1;             /* Occupa tutto lo spazio disponibile */
    height: 40px !important;  /* Altezza fissa */
    background-color: #FFFFFF !important;
    color: var(--bs-text-light);
    font-family: monospace;   /* Font monospaziato per i link */
    font-size: 12px !important;
    border: 1px solid var(--bs-border-color) !important;
    border-radius: var(--bs-border-radius) !important;
    padding: 0 10px !important;
    cursor: text;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.03);
}

/* Quando l'input è selezionato/focus */
.bs-input-group-joined input[type="text"]#bs_ical_url:focus {
    border-color: var(--bs-primary-color) !important;
    color: var(--bs-text-dark);
}

/* Pulsanti accanto all'input */
.bs-input-group-joined .button {
    flex-shrink: 0;           /* Non si schiacciano */
    width: 40px !important;   /* Quadrati perfetti */
    height: 40px !important;  /* Stessa altezza dell'input */
    padding: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--bs-border-radius) !important;
    margin: 0 !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    transition: all 0.2s ease;
}

/* Icone nei pulsanti */
.bs-input-group-joined .button i {
    font-size: 18px;
}

/* Specifico per il pulsante Copia (Secondary) */
#bs-copy-ical-btn {
    background-color: #fff;
    border: 1px solid var(--bs-border-color);
    color: var(--bs-text-dark);
}
#bs-copy-ical-btn:hover {
    background-color: #f3f4f6;
    border-color: var(--bs-secondary-color);
}

/* Specifico per il pulsante WhatsApp */
#bs-send-ical-wa-btn.bs-whatsapp-btn {
    background-color: #25D366 !important;
    border-color: #25D366 !important;
    color: white !important;
}
#bs-send-ical-wa-btn.bs-whatsapp-btn:hover {
    background-color: #128C7E !important;
    border-color: #128C7E !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

/* Testo di aiuto sotto */
.bs-ical-box small {
    display: block;
    margin-top: 8px;
    color: var(--bs-text-light);
    font-size: 12px;
    line-height: 1.4;
}

.bs-modal-tabs {
    display: flex;
    border-bottom: 1px solid var(--bs-border-color);
    margin: -25px -30px 25px -30px;
    padding: 0 30px;
}

.bs-modal-tabs .bs-tab-link {
    padding: 12px 18px;
    font-size: 14px;
    font-weight: 500;
    color: var(--bs-text-light);
    border-bottom: 3px solid transparent;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bs-modal-tabs .bs-tab-link:hover {
    color: var(--bs-text-dark);
}

.bs-modal-tabs .bs-tab-link.active {
    color: var(--bs-primary-color);
    border-bottom-color: var(--bs-primary-color);
    font-weight: 600;
}

.bs-modal-tabs .bs-tab-link .fas {
    margin-right: 8px;
}

.bs-modal-tab-content .bs-tab-pane {
    display: none;
    animation: bsFadeInStep 0.4s;
}

.bs-modal-tab-content .bs-tab-pane.active {
    display: block;
}

#tab-orari .bs-schedule-editor-area {
    margin-top: 0;
    border: none;
    padding: 0;
    background: none;
}

/* Stili per la Tab Eccezioni (ereditati e specifici) */
#tab-eccezioni .bs-inset-box {
    margin-top: 15px;
}

#tab-eccezioni h4 {
    font-size: 14px;
    font-weight: 600;
    color: var(--bs-text-dark);
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--bs-border-color-light);
}

#bs-operator-exceptions-list .bs-no-data-message {
    text-align: center;
    padding: 20px;
    font-style: italic;
}

ul.bs-exceptions-list-styled {
    list-style: none;
    margin: 0;
    padding: 0;
}

.bs-exception-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px;
    border-bottom: 1px solid var(--bs-border-color-light);
}

.bs-exception-item:last-child {
    border-bottom: none;
}

.bs-exception-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: white;
}

.bs-exception-icon.unavailable {
    background-color: var(--bs-error-color);
}

.bs-exception-icon.special-hours {
    background-color: var(--bs-info-color);
}

.bs-exception-details {
    flex-grow: 1;
    min-width: 0;
}

.bs-exception-dates {
    font-weight: 600;
    color: var(--bs-text-dark);
    font-size: 14px;
    margin-bottom: 4px;
}

.bs-exception-type {
    font-size: 13px;
    font-weight: 500;
}

.bs-exception-type.unavailable {
    color: var(--bs-error-color-dark);
}

.bs-exception-type.special-hours {
    color: var(--bs-info-color-dark);
}

.bs-exception-reason {
    font-size: 12px;
    font-style: italic;
    color: var(--bs-text-light);
    margin-top: 4px;
}

.bs-exception-actions {
    display: flex;
    gap: 8px;
}

.bs-exception-actions .bs-action-btn {
    width: 34px;
    height: 34px;
    font-size: 14px;
    padding: 0;
    border-radius: var(--bs-border-radius);
    background-color: var(--bs-bg-light);
    color: var(--bs-text-light);
    border: 1px solid var(--bs-border-color);
}

.bs-exception-actions .bs-edit-exception-op-btn:hover {
    background-color: var(--bs-info-color-light);
    color: var(--bs-info-color-dark);
    border-color: var(--bs-info-color);
}

.bs-exception-actions .bs-delete-exception-op-btn:hover {
    background-color: var(--bs-error-color-light);
    color: var(--bs-error-color-dark);
    border-color: var(--bs-error-color);
}




/* ==========================================================================
   Stili Vista Categorie (v4 - Design Tabellare Finale)
   ========================================================================== */

.bs-categories-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 25px;
    margin-top: 25px;
    align-items: start; /* Mantiene le altezze delle card indipendenti */
}

.bs-category-card {
    background-color: var(--bs-bg-white);
    border: 1px solid #F1E9E4; /* Bordo molto leggero come da screenshot */
    border-radius: var(--bs-border-radius);
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    display: flex;
    flex-direction: column;
    border-top: 3px solid #C8826D; /* Colore terracotta in cima */
}

.bs-category-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 15px;
    padding: 15px 20px;
}

.bs-category-name {
    margin: 0;
    font-size: 1.2em;
    font-weight: 600;
    color: var(--bs-text-dark);
}

.bs-category-card-actions .bs-action-btn {
    /* Eredita gli stili .bs-action-btn già definiti per i clienti/operatori, non serve altro */
}

.bs-category-card-body {
    padding: 0 20px 20px;
    flex-grow: 1;
}

.bs-category-details .bs-stat-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 10px 0;
    font-size: 14px;
}

.bs-category-details .bs-services-inline-list {
    border-top: 1px solid var(--bs-border-color-light);
    padding-top: 12px;
    margin-top: 12px;
    font-size: 13px;
    color: var(--bs-text-light);
    font-style: italic;
    line-height: 1.6;
}

.bs-category-details .bs-stat-row:last-of-type {
    border-top: 1px solid var(--bs-border-color-light);
    padding-top: 12px;
    margin-top: 12px;
}

.bs-category-details .stat-label {
    font-weight: 500;
    color: var(--bs-text-light);
    flex-shrink: 0;
    padding-right: 15px;
}

.bs-category-details .stat-value {
    font-weight: 600;
    color: var(--bs-text-dark);
    text-align: right;
    max-width: 60%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bs-category-details .bs-loading-message.small {
    padding: 10px 0;
    text-align: center;
}

























/* ==========================================================================
   Stili Card Unificati (Clienti e Operatori)
   ========================================================================== */

.bs-clients-grid,
.bs-operators-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 25px;
    margin-top: 25px;
    /*align-items: start;*/ /* Mantiene le altezze delle card indipendenti */
}

.bs-unified-card, .bs-client-card { /* Applica stili base a entrambe */
    background-color: var(--bs-bg-white);
    border: 1px solid #F1E9E4;
    border-radius: var(--bs-border-radius);
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    display: flex;
    flex-direction: column;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    position: relative; /* Per il badge "inattivo" */
    overflow: hidden;
}
.bs-unified-card:hover, .bs-client-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 15px rgba(0,0,0,0.08);
}

.bs-card-header {
    display: flex; align-items: center; gap: 15px; padding: 15px;
}
.bs-card-body {
    padding: 15px; flex-grow: 1;
    display: flex; flex-direction: column; gap: 15px;
    border-top: 1px solid var(--bs-border-color-light);
}

/* NUOVO: Contenitore unificato per dettagli */
.bs-operator-details-summary {
    background-color: var(--bs-bg-light);
    border-radius: var(--bs-border-radius);
    padding: 15px;
}

/* Stile tabellare per le statistiche */
.bs-operator-stats .bs-stat-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 6px 0;
    font-size: 13px;
}
.bs-operator-stats .stat-label {
    color: var(--bs-text-light);
}
.bs-operator-stats .stat-value {
    font-weight: 600;
    color: var(--bs-text-dark);
}
.bs-operator-stats .stat-value .fas { /* Stile per lo spinner */
    font-size: 0.9em;
}


.bs-card-footer {
    padding: 12px 15px; background-color: #FAF7F5;
    border-top: 1px solid var(--bs-border-color-light); text-align: center;
    border-radius: 0 0 var(--bs-border-radius) var(--bs-border-radius);
}

/* --- Personalizzazioni per Card Operatore --- */
.bs-operator-card .bs-operator-card-header {
    background-color: var(--operator-color); /* Usa la variabile CSS inline */
    color: white;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.4);
}
.bs-operator-card .bs-client-name { color: white; } /* Sovrascrive il colore del nome */
.bs-operator-card .bs-client-id { color: rgba(255,255,255,0.8); } /* ID più leggero */
.bs-operator-card.is-inactive { opacity: 0.65; }
.bs-operator-card.is-inactive .bs-operator-card-header { filter: grayscale(80%); }

.bs-operator-action-bar { /* Stili già esistenti, verifica che ci siano */
    display: flex; justify-content: space-between; align-items: center;
    padding-bottom: 15px; margin-bottom: 15px;
    border-bottom: 1px dashed var(--bs-border-color-light);
}
.bs-action-group-left, .bs-action-group-right { display: flex; gap: 10px; }
.bs-action-btn { /* ... stili già esistenti ... */ }

.bs-operator-stats, .bs-operator-availability-summary {
    background-color: var(--bs-bg-light);
    border-radius: var(--bs-border-radius);
    padding: 10px 15px;
}

/* === CORREZIONE CHIAVE: FOOTER CARD === */
.bs-operator-card .bs-card-footer {
    padding: 12px 15px;
    background-color: #FAF7F5;
    border-top: 1px solid var(--bs-border-color-light);
}

.bs-operator-card .bs-card-footer .button {
    width: 100%;
    justify-content: center;
    text-transform: uppercase;
    font-size: 0.8em;
    font-weight: 600;
    letter-spacing: 0.8px;
}

.bs-operator-card .bs-card-footer .button-primary {
    background-color: var(--bs-footer-button-bg, #C8826D);
    border-color: var(--bs-footer-button-border, #AB6C5A);
}
.bs-operator-card .bs-card-footer .button-primary:hover {
    background-color: var(--bs-footer-button-hover-bg, #AB6C5A);
    border-color: var(--bs-footer-button-hover-bg, #AB6C5A);
}


/* --- Stili per Filtro Operatore Globale --- */
.bs-operator-filter-select {
    background-color: rgba(255,255,255,0.9);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    color: var(--bs-text-dark);
    padding: 0 10px;
    height: 38px;
    font-weight: 500;
    max-width: 180px !important;
    width: auto !important;
}
.bs-main-controls .bs-operator-filter-select {
    background-color: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.3);
    color: white;
}
.bs-main-controls .bs-operator-filter-select option {
    color: var(--bs-text-dark);
    background-color: var(--bs-bg-white);
}

@media screen and (max-width: 782px) {
    .bs-main-controls .bs-period-selector {
        flex-wrap: wrap; /* Permette al filtro di andare a capo se non c'è spazio */
        justify-content: center;
    }
    .bs-operator-filter-select {
        width: 100%; /* Occupa tutta la larghezza su mobile */
        margin-top: 10px;
    }
}




/* ==========================================================================
   Stili per Dropdown Header
   ========================================================================== */

.bs-header-dropdown-wrapper {
    position: relative; /* Contenitore per il posizionamento del dropdown */
    
}

.bs-header-dropdown {
    position: absolute;
    top: calc(100% + 10px); /* Posiziona sotto l'icona con un po' di spazio */
    right: 0;
    width: 240px;
    background-color: var(--bs-bg-white);
    border: 1px solid var(--bs-border-color-light);
    border-radius: var(--bs-border-radius-large);
    box-shadow: var(--bs-box-shadow-lg);
    z-index: 2002 !important;
    overflow: hidden;
    animation: bsDropdownFadeIn 0.2s ease-out;  
      
}

@keyframes bsDropdownFadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

.bs-dropdown-header {
    padding: 15px 20px;
    background-color: var(--bs-bg-light);
    border-bottom: 1px solid var(--bs-border-color-light);
}
.bs-dropdown-header .bs-user-name {
    display: block;
    font-weight: 600;
    color: var(--bs-text-dark);
    font-size: 15px;
}
.bs-dropdown-header .bs-user-role {
    display: block;
    font-size: 12px;
    color: var(--bs-text-light);
}

ul.bs-dropdown-menu {
    list-style: none;
    margin: 0;
    padding: 8px 0; /* Spazio sopra e sotto la lista */
}
ul.bs-dropdown-menu li a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 20px;
    font-size: 14px;
    color: var(--bs-text-light);
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
}
ul.bs-dropdown-menu li a:hover {
    background-color: var(--bs-primary-color-light);
    color: var(--bs-primary-color-dark);
}
ul.bs-dropdown-menu li a .fas {
    width: 16px;
    text-align: center;
    opacity: 0.8;
}

/* ==========================================================================
   Stili per Filtro di Stato Appuntamenti e Card Inattive
   ========================================================================== */

/* --- Stili per il nuovo menu a tendina del Filtro di Stato --- */
.bs-status-filter-select {
    /* Eredita lo stile base da .bs-operator-filter-select per coerenza */
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--bs-border-radius);
    color: white;
    padding: 0 10px;
    height: 38px;
    font-weight: 500;
    max-width: 180px !important;
    width: auto !important;
}
.bs-main-controls .bs-status-filter-select option {
    color: var(--bs-text-dark);
    background-color: var(--bs-bg-white);
}

/* --- Stili per le Card degli Appuntamenti Cancellati e No-Show --- */
/* Si applica sia alla vista giornaliera/operatore (.bs-appointment-card) che settimanale (.bs-week-appointment-card) */

/* --- Stili per Appuntamenti CANCELLATI (Grigio) --- */
.bs-appointment-card.bs-status-cancelled,
.bs-week-appointment-card.bs-status-cancelled {
    background-color: #E5E7EB !important; /* Grigio più definito */
    border-left-color: var(--bs-secondary-color) !important;
    opacity: 0.7;
}
.bs-appointment-card.bs-status-cancelled:hover,
.bs-week-appointment-card.bs-status-cancelled:hover {
    opacity: 1;
}
.bs-appointment-card.bs-status-cancelled .bs-card-client-name,
.bs-appointment-card.bs-status-cancelled .bs-card-service-name,
.bs-week-appointment-card.bs-status-cancelled .bs-week-card-client {
    text-decoration: line-through;
}
.bs-appointment-card.bs-status-cancelled,
.bs-appointment-card.bs-status-cancelled .bs-card-time,
.bs-week-appointment-card.bs-status-cancelled .bs-week-card-time,
.bs-week-appointment-card.bs-status-cancelled .bs-week-card-client {
    color: var(--bs-secondary-color-dark) !important;
    text-shadow: none;
}
.bs-appointment-card.bs-status-cancelled .bs-card-service-name,
.bs-week-appointment-card.bs-status-cancelled .bs-week-card-service {
    color: var(--bs-secondary-color) !important;
}

/* --- NUOVI STILI per Appuntamenti NO-SHOW (Rosso/Borgogna) --- */
.bs-appointment-card.bs-status-no-show,
.bs-week-appointment-card.bs-status-no-show {
    background-color: var(--bs-error-color-light) !important; /* Sfondo rosso pallido */
    border-left-color: var(--bs-error-color-dark) !important; /* Bordo rosso scuro */
    opacity: 0.8;
}
.bs-appointment-card.bs-status-no-show:hover,
.bs-week-appointment-card.bs-status-no-show:hover {
    opacity: 1;
}
.bs-appointment-card.bs-status-no-show .bs-card-client-name,
.bs-week-appointment-card.bs-status-no-show .bs-week-card-client {
    /* Opzionale: potremmo non barrare il testo per i no-show, per distinguerli ulteriormente */
    /* text-decoration: line-through; */
}
.bs-appointment-card.bs-status-no-show,
.bs-appointment-card.bs-status-no-show .bs-card-time,
.bs-week-appointment-card.bs-status-no-show .bs-week-card-time,
.bs-week-appointment-card.bs-status-no-show .bs-week-card-client {
    color: var(--bs-error-color-dark) !important;
    text-shadow: none;
}
.bs-appointment-card.bs-status-no-show .bs-card-service-name,
.bs-week-appointment-card.bs-status-no-show .bs-week-card-service {
    color: var(--bs-error-color) !important;
}

/* Nasconde il pulsante di cancellazione per entrambi */
.bs-appointment-card.bs-status-cancelled .bs-delete-app-btn,
.bs-appointment-card.bs-status-no-show .bs-delete-app-btn {
    display: none;
}

/* --- Stili per Overlay Non Disponibile con Testo --- */
.bs-operator-col .bs-unavailable-overlay-wrapper {
    position: absolute;
    left: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    pointer-events: none; /* Il wrapper non deve intercettare i click */
}

.bs-unavailable-overlay-wrapper .bs-unavailable-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: repeating-linear-gradient(
        45deg, 
        rgba(0,0,0,0.07), 
        rgba(0,0,0,0.07) 5px, 
        transparent 5px, 
        transparent 10px
    );
    z-index: 1;
}

.bs-unavailable-overlay-wrapper .bs-unavailable-reason {
    position: relative;
    z-index: 2;
    color: var(--bs-secondary-color-dark);
    font-size: 13px; /* Leggermente più grande per leggibilità */
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    
    /* --- NUOVE REGOLE PER IL TESTO ORIZZONTALE --- */
    writing-mode: horizontal-tb; /* Ripristina la scrittura orizzontale */
    transform: none;             /* Rimuovi qualsiasi rotazione */
    white-space: nowrap;         /* Impedisce al testo di andare a capo */
    overflow: hidden;            /* Nasconde il testo che non entra */
    text-overflow: ellipsis;     /* Aggiunge "..." se il testo è troppo lungo */
    
    padding: 2px 8px; /* Aggiunge un po' di respiro */
    background-color: rgba(255, 255, 255, 0.6); /* Sfondo leggero per migliorare il contrasto */
    border-radius: var(--bs-border-radius);
}


/*  Zone Fuori Orario (Generate via JS) */
.bs-unavailable-overlay-wrapper {
    pointer-events: auto !important; /* Cattura il click */
    cursor: not-allowed !important;  /* Mostra icona divieto */
    z-index: 5; /* Sopra la colonna, sotto le card */
}



/* ==========================================================================
   Stili per il Dropdown delle Notifiche
   ========================================================================== */

/* Stile specifico per il dropdown notifiche per dargli più larghezza */
#bs-notifications-dropdown {
    width: 360px;
}

.bs-dropdown-header-action {
    font-size: 12px;
    color: var(--bs-primary-color);
    text-decoration: none;
    font-weight: 500;
}
.bs-dropdown-header-action:hover {
    text-decoration: underline;
}

.bs-notifications-list {
    max-height: 400px; /* Altezza massima prima dello scroll */
    overflow-y: auto;
}

.bs-notifications-list .bs-notifications-loader,
.bs-notifications-list .bs-no-notifications {
    padding: 40px 20px;
    text-align: center;
    color: var(--bs-text-light);
    font-style: italic;
}

.bs-notification-item {
    display: flex;
    gap: 15px;
    padding: 12px 20px;
    text-decoration: none;
    border-bottom: 1px solid var(--bs-border-color-light);
    transition: background-color 0.2s ease;
}
.bs-notification-item:last-child {
    border-bottom: none;
}
.bs-notification-item:hover {
    background-color: var(--bs-bg-light);
}

.bs-notification-item.is-unread {
    background-color: var(--bs-primary-color-light);
    position: relative;
}
/* Pallino blu per le notifiche non lette */
.bs-notification-item.is-unread::before {
    content: '';
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    background-color: var(--bs-primary-color);
    border-radius: 50%;
}

.bs-notification-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}
.bs-notification-icon.type-new_appointment { background-color: var(--bs-success-color); }
.bs-notification-icon.type-cancelled_appointment { background-color: var(--bs-error-color); }
.bs-notification-icon.type-new_review { background-color: var(--bs-warning-color); }
.bs-notification-icon.type-waitlist_entry { background-color: var(--bs-info-color); }

.bs-notification-content {
    flex-grow: 1;
}
.bs-notification-message {
    font-size: 14px;
    color: var(--bs-text-dark);
    line-height: 1.5;
    margin: 0 0 4px 0;
}
.bs-notification-time {
    font-size: 12px;
    color: var(--bs-text-light);
    display: flex; /* Aggiunto per allineare icona e testo */
    align-items: center;
    gap: 5px; /* Spazio tra icona orologio e testo */
}
.bs-notification-time .far {
    opacity: 0.7;
}

.bs-dropdown-footer {
    padding: 10px 20px;
    text-align: center;
    border-top: 1px solid var(--bs-border-color-light);
    background-color: var(--bs-bg-light);
}
.bs-dropdown-footer a {
    font-size: 13px;
    font-weight: 500;
    color: var(--bs-primary-color-dark);
    text-decoration: none;
}
.bs-dropdown-footer a:hover {
    text-decoration: underline;
}


/* ==========================================================================
   Stili per la Pagina Storico Notifiche
   ========================================================================== */

.bs-notifications-history .wp-list-table {
    margin-top: 20px;
}

.bs-notification-status-cell {
    text-align: center;
    vertical-align: middle !important;
}

/* --- Stile per i Pallini Letto/Non Letto --- */
.bs-status-dot {
    display: inline-block;
    width: 10px;  /* Dimensione del pallino */
    height: 10px;
    border-radius: 50%; /* Lo rende circolare */
    transition: all 0.2s ease;
}

/* Pallino per le notifiche NON LETTE */
.bs-status-dot.unread {
    background-color: var(--bs-primary-color);
    /* Effetto bagliore per attirare l'attenzione */
    box-shadow: 0 0 8px rgba(59, 130, 246, 0.7); 
}

/* Pallino per le notifiche GIÀ LETTE */
.bs-status-dot.read {
    background-color: var(--bs-border-color); /* Grigio spento */
}

/* Stile per rendere il testo in grassetto nelle righe non lette */
tr.is-unread-row > td {
    font-weight: 600; /* Testo più evidente */
    color: var(--bs-text-dark); /* Testo più scuro */
}

tr.is-read-row > td {
    color: var(--bs-text-light); /* Testo più leggero per le righe già lette */
}



/* ==========================================================================
   Stili per la Vista Gestione Risorse
   ========================================================================== */

.bs-resources-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 25px;
    margin-top: 25px;
}

.bs-resource-card {
    background-color: var(--bs-bg-white);
    border: 1px solid var(--bs-border-color-light);
    border-radius: var(--bs-border-radius);
    box-shadow: var(--bs-box-shadow);
    overflow: hidden;
    border-top: 4px solid var(--bs-info-color); /* Colore di accento per le risorse */
}

.bs-resource-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 15px;
    padding: 15px 20px;
    border-bottom: 1px solid var(--bs-border-color-light);
}

.bs-resource-name {
    margin: 0;
    font-size: 1.2em;
    font-weight: 600;
    color: var(--bs-text-dark);
}

.bs-resource-actions {
    display: flex;
    gap: 8px;
}

.bs-resource-card-body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.bs-resource-stat {
    text-align: center;
}
.bs-resource-stat .stat-value {
    font-size: 2.5em;
    font-weight: 700;
    color: var(--bs-info-color-dark);
    display: block;
    line-height: 1;
}
.bs-resource-stat .stat-label {
    font-size: 0.8em;
    text-transform: uppercase;
    color: var(--bs-text-light);
    margin-top: 5px;
    display: block;
}

.bs-resource-notes {
    font-size: 0.9em;
    color: var(--bs-text-light);
    font-style: italic;
    text-align: center;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--bs-border-color-light);
}



#bs-notification-toast {
    position: fixed; bottom: 20px; right: 20px;
    background-color: var(--bs-success-color, #10B981); color: white;
    padding: 15px 25px; border-radius: var(--bs-border-radius, 6px);
    font-family: var(--bs-font-family, sans-serif); font-size: 15px; font-weight: 500;
    cursor: pointer; 
    z-index: 1060; 
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    display: none; align-items: center; gap: 10px;
    animation: bsToastIn 0.5s ease-out forwards;
}
#bs-notification-toast.bs-toast-out { animation: bsToastOut 0.5s ease-in forwards; }
#bs-notification-toast .bs-toast-icon { font-size: 1.3em; }
#bs-notification-toast .bs-toast-count {
    background-color: rgba(255,255,255,0.8); color: var(--bs-success-color, #10B981);
    padding: 2px 8px; border-radius: 10px; font-size: 0.9em; font-weight: bold;
}
@keyframes bsToastIn { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
@keyframes bsToastOut { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(30px); } }
#bs-audio-toggle-btn {
    position: fixed; 
    bottom: 80px; 
    right: 20px;
    background-color: var(--bs-secondary-color, #6B7280); 
    color: white;
    width: 40px; 
    height: 40px; 
    border-radius: 50%; 
    cursor: pointer; 
    z-index: 1059;
    display: flex; 
    align-items: center; 
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15); 
    transition: background-color 0.3s ease, transform 0.2s ease;
    opacity: 0.7;
}
#bs-audio-toggle-btn:hover { opacity: 1; transform: scale(1.1); }
#bs-audio-toggle-btn.audio-enabled { background-color: var(--bs-primary-color, #3B82F6); }
#bs-audio-toggle-btn .fas { font-size: 18px; }

.select2-dropdown {
    z-index: 999999 !important;
}

/* ==========================================================================
   STILI SPECIFICI PER SIDEBAR DASHBOARD CLIENTE
   ========================================================================== */
.bs-client-dashboard-wrap .bs-sidebar-user-profile {
    padding: 30px 20px;
    border-bottom: 1px solid var(--bs-border-color-light);
    flex-shrink: 0;
    
    /* Centratura con Flexbox */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.bs-client-dashboard-wrap .bs-user-avatar {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 5px;
    display: block;
    border: 4px solid var(--bs-bg-white);
    box-shadow: 0 0 0 1px var(--bs-primary-color), 0 5px 15px rgba(0,0,0,0.1);
}
.bs-client-dashboard-wrap .bs-user-name {
    margin: 0;
    font-size: 1.1em;
    font-weight: 600;
    color: var(--bs-text-dark);
    word-break: break-word; /* Va a capo se il nome è troppo lungo */
}

/* ==========================================================================
   FIX SPECIFICITA' CSS PER BOTTONI DASHBOARD
   ========================================================================== */

/* Applica a entrambe le dashboard (admin pubblica e cliente) */
.bs-dashboard-wrap .button-primary,
.bs-client-dashboard-wrap .button-primary {
    background-color: var(--bs-primary-color);
    border-color: var(--bs-primary-color);
    color: var(--bs-bg-white);
}

.bs-dashboard-wrap .button-primary:hover,
.bs-client-dashboard-wrap .button-primary:hover {
    background-color: var(--bs-primary-color-dark);
    border-color: var(--bs-primary-color-dark);
}

.bs-dashboard-wrap .button-secondary,
.bs-client-dashboard-wrap .button-secondary {
    background-color: var(--bs-bg-light);
    border-color: var(--bs-border-color);
    color: var(--bs-text-dark);
}

.bs-dashboard-wrap .button-secondary:hover,
.bs-client-dashboard-wrap .button-secondary:hover {
    background-color: var(--bs-border-color-light);
    border-color: var(--bs-secondary-color);
}

.bs-dashboard-wrap .button-link-delete,
.bs-client-dashboard-wrap .button-link-delete {
    color: var(--bs-error-color);
}

.bs-dashboard-wrap .button-link-delete:hover,
.bs-client-dashboard-wrap .button-link-delete:hover {
    color: var(--bs-error-color-dark);
}

/* ==========================================================================
   FIX SPECIFICITA' CSS PER DASHBOARD CLIENTE (v2)
   ========================================================================== */

/* Forza lo stile degli input e dei pulsanti all'interno della dashboard cliente */
.bs-client-dashboard-wrap .bs-profile-management input[type="text"],
.bs-client-dashboard-wrap .bs-profile-management input[type="email"],
.bs-client-dashboard-wrap .bs-profile-management input[type="tel"],
.bs-client-dashboard-wrap .bs-profile-management input[type="password"] {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    box-sizing: border-box;
    font-size: 14px;
    color: var(--bs-text-dark);
    background-color: var(--bs-bg-white);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.03);
}

.bs-client-dashboard-wrap .bs-profile-management input:focus {
    border-color: var(--bs-primary-color);
    box-shadow: 0 0 0 2px var(--bs-primary-color-light), 0 1px 2px 0 rgba(0, 0, 0, 0.03);
    outline: none;
}

/* Stili specifici per i pulsanti nella dashboard cliente */
.bs-client-dashboard-wrap .bs-profile-management .button {
    font-family: var(--bs-font-family);
    border-radius: var(--bs-border-radius);
    padding: 10px 20px;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid var(--bs-border-color);
    background-color: var(--bs-bg-white);
    color: var(--bs-text-dark);
    transition: all 0.2s ease;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    line-height: 1.5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.bs-client-dashboard-wrap .bs-profile-management .button-primary {
    background-color: var(--bs-primary-color);
    border-color: var(--bs-primary-color);
    color: var(--bs-bg-white);
    font-weight: 600;
}

.bs-client-dashboard-wrap .bs-profile-management .button-secondary {
    background-color: var(--bs-bg-light);
    border-color: var(--bs-border-color);
    color: var(--bs-text-dark);
}

.bs-client-dashboard-wrap .bs-profile-management .button-link-delete {
    background: none;
    border: none;
    color: var(--bs-error-color);
    text-decoration: underline;
    padding: 0;
    box-shadow: none;
}


/* ==========================================================================
   STILI VISTA NOTIFICHE (v5 - Specificità Massima Definitiva)
   ========================================================================== */

.bs-notifications-history h2 .fas {
    color: var(--bs-primary-color) !important;
}

   /* --- Layout Filtri --- */
.bs-notifications-history .bs-reviews-filters form { align-items: flex-end; }
.bs-notifications-history .bs-reviews-filters .button-secondary {
    background-color: var(--bs-primary-color); border-color: var(--bs-primary-color); color: white;
}
.bs-notifications-history .bs-reviews-filters .button-secondary:hover {
    background-color: var(--bs-primary-color-dark); border-color: var(--bs-primary-color-dark);
}
.bs-notifications-history .wp-list-table tbody tr:hover {
    background-color: var(--bs-primary-color-light);
}

/* --- Azioni: Reset del pulsante e visibilità --- */
.bs-notifications-history .bs-notification-actions { opacity: 1; text-align: right; }
.bs-notifications-history .bs-action-btn-notification {
    background: none !important; border: none !important; box-shadow: none !important;
    padding: 5px 8px !important; cursor: pointer; line-height: 1;
}

/* --- REGOLE DEFINITIVE PER IL COLORE DELLE ICONE --- */

/* Applica dimensione e transizione a tutte le icone nelle azioni */
.bs-management-view.bs-notifications-history table.wp-list-table .bs-action-btn-notification i.fas {
    font-size: 1.1em !important;
    transition: color 0.2s ease, transform 0.2s ease !important;
}

/* REGOLA SPECIFICA E POTENTE per le azioni VERDI */
.bs-management-view.bs-notifications-history table.wp-list-table .bs-action-btn-notification[data-action="mark-read"] i.fas,
.bs-management-view.bs-notifications-history table.wp-list-table .bs-action-btn-notification[data-action="mark-unread"] i.fas {
    color: var(--bs-success-color) !important;
}

/* REGOLA SPECIFICA E POTENTE per l'azione ROSSA */
.bs-management-view.bs-notifications-history table.wp-list-table .bs-action-btn-notification[data-action="delete"] i.fas {
    color: var(--bs-error-color) !important;
}

/* Regole HOVER con la stessa alta specificità */
.bs-management-view.bs-notifications-history table.wp-list-table .bs-action-btn-notification[data-action="mark-read"]:hover i.fas,
.bs-management-view.bs-notifications-history table.wp-list-table .bs-action-btn-notification[data-action="mark-unread"]:hover i.fas {
    color: var(--bs-success-color-dark) !important;
    transform: scale(1.2);
}
.bs-management-view.bs-notifications-history table.wp-list-table .bs-action-btn-notification[data-action="delete"]:hover i.fas {
    color: var(--bs-error-color-dark) !important;
    transform: scale(1.2);
}

/* --- LAYOUT RESPONSIVE (Invariato) --- */
@media screen and (max-width: 782px) {
    .bs-notifications-history .wp-list-table thead { display: none; }
    .bs-notifications-history .wp-list-table tr {
        display: block; margin-bottom: 20px; border: 1px solid var(--bs-border-color-light);
        border-left: 4px solid var(--bs-primary-color); border-radius: var(--bs-border-radius);
        box-shadow: var(--bs-box-shadow); padding: 0;
    }
    .bs-notifications-history .wp-list-table tr.is-read-row { border-left-color: var(--bs-border-color); }
    .bs-notifications-history .wp-list-table td {
        display: flex; justify-content: space-between; align-items: center;
        text-align: right; border-bottom: 1px dotted var(--bs-border-color-light);
        padding: 12px var(--bs-padding-base);
    }
    .bs-notifications-history .wp-list-table tr td:last-child { border-bottom: none; }
    .bs-notifications-history .wp-list-table td::before {
        content: attr(data-label); font-weight: 600; text-align: left;
        color: var(--bs-text-dark); margin-right: 10px;
    }
    .bs-notifications-history .bs-notification-actions { opacity: 1; }
    .bs-notifications-history .wp-list-table td.bs-notification-status-cell::before,
    .bs-notifications-history .wp-list-table td.bs-notification-actions::before { display: none; }
    .bs-notifications-history .wp-list-table td.bs-notification-actions { justify-content: center; }
}


/* ==========================================================================
   STILI PAGINAZIONE PER VISTA NOTIFICHE
   ========================================================================== */

.bs-notifications-history .tablenav.bottom {
    margin-top: 20px;
    padding: 10px 0;
}
.bs-notifications-history .pagination-links {
    display: inline-flex;
    gap: 5px;
}
.bs-notifications-history .pagination-links .page-numbers {
    display: inline-block;
    padding: 8px 14px;
    margin: 0 2px;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    text-decoration: none;
    color: var(--bs-primary-color);
    background-color: var(--bs-bg-white);
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    font-size: 14px;
    font-weight: 500;
}
.bs-notifications-history .pagination-links .page-numbers:hover {
    background-color: var(--bs-primary-color-light);
    border-color: var(--bs-primary-color);
}
.bs-notifications-history .pagination-links .page-numbers.current {
    background-color: var(--bs-primary-color);
    color: var(--bs-bg-white);
    border-color: var(--bs-primary-color);
    font-weight: 600;
    cursor: default;
}
.bs-notifications-history .pagination-links .dots {
    padding: 8px 5px;
    border: none;
    background: none;
}


/* ==========================================================================
   STILI PALETTE COLORI PER VISTA REMINDER LOGS
   ========================================================================== */

/* --- Titolo --- */
.bs-reminder-logs-management h2 .fas {
    color: var(--bs-primary-color);
}

/* --- Area Filtri --- */
.bs-reminder-logs-management .bs-log-filters {
    background-color: var(--bs-bg-white);
    border: 1px solid var(--bs-border-color-light);
    box-shadow: var(--bs-box-shadow);
}

/* Pulsante Filtra */
.bs-reminder-logs-management .bs-log-filters .button-secondary {
    background-color: var(--bs-primary-color);
    border-color: var(--bs-primary-color);
    color: white;
}
.bs-reminder-logs-management .bs-log-filters .button-secondary:hover {
    background-color: var(--bs-primary-color-dark);
    border-color: var(--bs-primary-color-dark);
}
/* Pulsante Reset */
.bs-reminder-logs-management .bs-log-filters .button {
    color: var(--bs-text-dark);
    background-color: var(--bs-bg-white);
    border-color: var(--bs-border-color);
}
.bs-reminder-logs-management .bs-log-filters .button:hover {
    border-color: var(--bs-secondary-color);
    background-color: var(--bs-bg-light);
}

/* --- Tabella --- */
.bs-reminder-logs-management .wp-list-table {
    border-radius: var(--bs-border-radius);
    box-shadow: var(--bs-box-shadow);
}
.bs-reminder-logs-management .wp-list-table tbody tr:hover {
    background-color: var(--bs-primary-color-light);
}

/* Link ID Appuntamento */
.bs-reminder-logs-management .wp-list-table td a {
    color: var(--bs-primary-color-dark);
    font-weight: 500;
    text-decoration: none;
}
.bs-reminder-logs-management .wp-list-table td a:hover {
    text-decoration: underline;
}

/* Badge di Stato */
/* (Usano già le classi .bs-status-badge che dovrebbero ereditare i colori, 
   ma per sicurezza aggiungiamo regole più specifiche se necessario) */
.bs-reminder-logs-management .bs-status-badge.bs-status-completed {
    background-color: var(--bs-success-color);
    border-color: transparent;
}
.bs-reminder-logs-management .bs-status-badge.bs-status-cancelled {
    background-color: var(--bs-error-color);
    border-color: transparent;
}

/* Dettagli Errore */
.bs-reminder-logs-management .bs-log-details-col strong {
    color: var(--bs-error-color-dark) !important;
}

/* --- Paginazione (Corretta) --- */
.bs-reminder-logs-management .tablenav-pages {
    padding-top: 10px;
}

.bs-reminder-logs-management .pagination-links {
    display: inline-flex;
    justify-content: center;
    gap: 5px;
}

.bs-reminder-logs-management .pagination-links .page-numbers {
    display: inline-block;
    padding: 8px 14px;
    margin: 0 2px;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    text-decoration: none;
    color: var(--bs-primary-color);
    background-color: var(--bs-bg-white);
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    font-size: 14px;
    font-weight: 500;
}

.bs-reminder-logs-management .pagination-links .page-numbers:hover {
    background-color: var(--bs-primary-color-light);
    border-color: var(--bs-primary-color);
}

.bs-reminder-logs-management .pagination-links .page-numbers.current {
    background-color: var(--bs-primary-color);
    color: var(--bs-bg-white);
    border-color: var(--bs-primary-color);
    font-weight: 600;
    cursor: default;
}

.bs-reminder-logs-management .pagination-links .dots {
    padding: 8px 5px;
    border: none;
    background: none;
}

/* ==========================================================================
   FIX RESPONSIVE PROFILO UTENTE (v2 - Massima Specificità)
   ========================================================================== */

/* Layout di base per la pagina del profilo (invariato) */
.bs-profile-management .bs-client-modal-layout {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 30px;
    align-items: flex-start;
}

/* --- MEDIA QUERY PER TABLET E SMARTPHONE --- */
@media screen and (max-width: 782px) {

    /* REGOLA POTENTE: Forza il layout a blocco invece che a griglia */
    .bs-client-dashboard-wrap .bs-profile-management .bs-client-modal-layout,
    .bs-dashboard-wrap .bs-profile-management .bs-client-modal-layout {
        display: block !important; /* Forza il display a blocco, annullando la griglia */
    }

    /* Stile per la colonna avatar quando è impilata */
    .bs-client-dashboard-wrap .bs-profile-management .bs-client-modal-avatar-col,
    .bs-dashboard-wrap .bs-profile-management .bs-client-modal-avatar-col {
        margin-bottom: 30px;
        display: flex;
        flex-direction: column;
        align-items: center; /* Centra avatar e pulsanti */
    }

    /* Forza anche la griglia interna dei campi a impilarsi */
    .bs-client-dashboard-wrap .bs-profile-management .bs-form-grid-2-col,
    .bs-dashboard-wrap .bs-profile-management .bs-form-grid-2-col {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
}


/* ==========================================================================
   FIX POSIZIONAMENTO HEADER DASHBOARD CLIENTE
   ========================================================================== */

/* Selettore che si attiva solo quando la dashboard cliente è attiva */
body.bs-client-dashboard-active {
    /* Potrebbe essere necessario forzare la rimozione di padding/margini
       aggiunti dal tema al contenitore della pagina. */
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* Assicura che nessun elemento genitore aggiunga spazio sopra il nostro layout */
body.bs-client-dashboard-active .entry-content,
body.bs-client-dashboard-active .post-content,
body.bs-client-dashboard-active .site-content,
body.bs-client-dashboard-active main,
body.bs-client-dashboard-active .elementor-widget-container {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Rende la nostra dashboard il primo elemento visibile */
.bs-client-dashboard-wrap {
    margin-top: 0 !important;
}



/* ==========================================================================
   HEADER DASHBOARD CLIENTE (v2 - Sfondo Scuro e Responsive Centrato)
   ========================================================================== */

.bs-client-header-enhanced {
    display: flex;
    flex-direction: column; 
    align-items: center; /* CENTRA gli elementi orizzontalmente su mobile */
    text-align: center; /* Centra il testo */
    gap: 15px;
    padding: 20px 25px;
    
    /* SFONDO SCURO: Usiamo lo stesso colore della sidebar admin */
    background-color: var(--bs-text-dark, #3A2F2A);
    color: rgba(255, 255, 255, 0.9); /* Testo chiaro di default */
    
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 1px 5px rgba(0,0,0,0.2);
}

.bs-client-header-branding {
    display: flex;
    flex-direction: column; /* Impila logo e titoli su mobile */
    align-items: center;
    gap: 10px;
}

.bs-client-header-logo {
    width: 60px; /* Logo leggermente più grande */
    height: 60px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    flex-shrink: 0;
}

.bs-client-header-titles {
    min-width: 0;
}

h1.bs-client-header-center-name {
    margin: 0;
    padding: 0;
    border: none;
    font-size: 1.3em;
    font-weight: 700;
    color: #FFFFFF; /* Testo bianco pieno */
    line-height: 1.2;
}

p.bs-client-header-slogan {
    margin: 2px 0 0 0;
    font-size: 0.8em;
    font-style: italic;
    color: rgba(255, 255, 255, 0.7); /* Testo slogan più leggero */
}

.bs-client-header-view-title h2 {
    margin: 0;
    padding: 10px 0 0 0;
    border-top: 1px dashed rgba(255, 255, 255, 0.2);
    font-size: 1.2em;
    font-weight: 600;
    color: #FFFFFF; /* Titolo vista bianco */
    display: flex;
    align-items: center;
    gap: 10px;
}
.bs-client-header-view-title h2 .fas {
    font-size: 1em;
    color: var(--bs-primary-color); /* Icona colorata per contrasto */
}


/* --- LAYOUT RESPONSIVE (Tablet/Desktop) --- */

@media screen and (min-width: 782px) {
    .bs-client-header-enhanced {
        flex-direction: row; /* Elementi in orizzontale */
        justify-content: space-between;
        text-align: left; /* Riporta il testo a sinistra */
    }

    .bs-client-header-branding {
        flex-direction: row; /* Logo e titoli in orizzontale */
        text-align: left;
        gap: 15px;
    }

    .bs-client-header-view-title h2 {
        border-top: none;
        padding-top: 0;
        margin-top: 0;
        text-align: right;
    }
}

/* ==========================================================================
   STILI HEADER SCURO PER DASHBOARD AMMINISTRATORE
   ========================================================================== */

/* Selettore specifico per la dashboard admin pubblica (NON in /wp-admin/) */
.bs-dashboard-wrap .bs-dashboard-top-header {
    background-color: var(--bs-text-dark); /* Sfondo scuro */
    color: rgba(255, 255, 255, 0.9);      /* Testo chiaro di base */
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 1px 5px rgba(0,0,0,0.2);
}

/* Titolo e Slogan */
.bs-dashboard-wrap .bs-dashboard-title-group h1.bs-dashboard-title,
.bs-dashboard-wrap .bs-dashboard-title-group h1.bs-dashboard-title strong {
    color: #FFFFFF; /* Testo bianco pieno */
}
.bs-dashboard-wrap .bs-dashboard-title-group p.bs-dashboard-slogan {
    color: rgba(255, 255, 255, 0.7); /* Slogan più leggero */
}
.bs-dashboard-wrap .bs-dashboard-title-group h1.bs-dashboard-title .fas {
    color: var(--bs-primary-color); /* Icona del titolo colorata */
}

/* Icone azioni a destra (campanella, rotella, utente) */
.bs-dashboard-wrap .bs-header-actions-right .bs-header-icon-btn {
    color: rgba(255, 255, 255, 0.7); /* Icone bianche semi-trasparenti */
}
.bs-dashboard-wrap .bs-header-actions-right .bs-header-icon-btn:hover {
    color: #FFFFFF; /* Icone bianche piene su hover */
}

/* Badge Notifiche */
.bs-dashboard-wrap .bs-header-actions-right .bs-icon-badge {
    border-color: var(--bs-text-dark); /* Bordo scuro per staccare dallo sfondo */
}

/* --- RESPONSIVE PER HEADER ADMIN --- */
@media screen and (max-width: 768px) {
    /* Impila e centra gli elementi dell'header su schermi piccoli */
    .bs-dashboard-wrap .bs-dashboard-top-header {
        flex-direction: column; /* Impila verticalmente */
        align-items: center;    /* Centra orizzontalmente */
        gap: 15px;
    }

    /* Centra il testo nel gruppo del titolo */
    .bs-dashboard-wrap .bs-dashboard-title-group {
        text-align: center;
    }
    
    /* Centra l'icona del titolo se per caso non lo fosse */
    .bs-dashboard-wrap .bs-dashboard-title-group h1.bs-dashboard-title {
        justify-content: center;
    }
    
    /* Assicura che le azioni a destra abbiano spazio */
    .bs-dashboard-wrap .bs-header-actions-right {
        margin-top: 5px; /* Aggiunge un po' di spazio sopra le icone */
    }
}



/* ==========================================================================
   STILI UNIFICATI PER SCHERMATA DI ACCESSO (v. Finale)
   ========================================================================== */

/* Contenitore principale */
.bs-auth-required-admin,
.bs-client-dashboard-wrap.bs-auth-required {
    max-width: 500px; margin: 50px auto; padding: 30px 40px;
    background-color: var(--bs-bg-white); border: 1px solid var(--bs-border-color-light);
    border-radius: var(--bs-border-radius-large); box-shadow: var(--bs-box-shadow-lg);
    text-align: center;
}

/* Titoli e Testi */
.bs-auth-required-admin h2, .bs-client-dashboard-wrap.bs-auth-required h2 {
    font-size: 1.5em; font-weight: 600; color: var(--bs-text-dark); margin-top: 0; margin-bottom: 15px;
    display: flex; align-items: center; justify-content: center; gap: 10px;
}
.bs-auth-required-admin h2 .fas, .bs-client-dashboard-wrap.bs-auth-required h2 .fas {
    color: var(--bs-primary-color);
}
.bs-auth-required-admin p, .bs-client-dashboard-wrap.bs-auth-required p {
    color: var(--bs-text-light); font-size: 1em; line-height: 1.6; margin-bottom: 25px;
}

/* Stile per i pulsanti e link custom (usato da entrambi) */
.bs-auth-required-admin .bs-auth-actions,
.bs-client-dashboard-wrap.bs-auth-required .bs-auth-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
}
.bs-auth-required-admin .bs-auth-actions .button,
.bs-client-dashboard-wrap.bs-auth-required .bs-auth-actions .button {
    width: 100%;
    max-width: 250px;
    justify-content: center;
    border-radius: var(--bs-border-radius);
    padding: 10px 20px;
    font-size: 1em;
}

/* --- REGOLA CHIAVE PER IL COLORE DEI PULSANTI PRIMARI --- */
.bs-auth-required-admin .button-primary,
.bs-client-dashboard-wrap.bs-auth-required .button-primary {
    background-color: var(--bs-primary-color) !important;
    border-color: var(--bs-primary-color) !important;
    color: white !important;
    font-weight: 600;
}
.bs-auth-required-admin .button-primary:hover,
.bs-client-dashboard-wrap.bs-auth-required .button-primary:hover {
    background-color: var(--bs-primary-color-dark) !important;
    border-color: var(--bs-primary-color-dark) !important;
}



/* ==========================================================================
   STILI PACCHETTI NELLA SCHEDA CLIENTE (ARRICCHITI)
   ========================================================================== */

.bs-client-packages-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}

.bs-client-package-item {
    background-color: var(--bs-bg-white);
    border: 1px solid var(--bs-border-color-light);
    border-radius: var(--bs-border-radius);
    padding: 0; /* Reset padding per gestire header/footer */
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0,0,0,0.03);
    transition: transform 0.2s ease;
}
.bs-client-package-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 12px rgba(0,0,0,0.08);
}

/* Header */
.bs-cp-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    border-bottom: 1px solid var(--bs-border-color-light);
    background-color: #fcfcfc;
}

.bs-cp-name {
    font-weight: 700;
    font-size: 1.05em;
    color: var(--bs-text-dark);
    border-left-width: 4px;
    border-left-style: solid;
    padding-left: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bs-cp-type-badge {
    font-size: 0.75em;
    text-transform: uppercase;
    background-color: var(--bs-bg-light);
    color: var(--bs-secondary-color);
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid var(--bs-border-color);
    flex-shrink: 0;
}

/* Meta Row (Date) */
.bs-cp-meta-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 15px;
    background-color: var(--bs-bg-light);
    font-size: 0.85em;
    color: var(--bs-text-light);
    border-bottom: 1px dashed var(--bs-border-color-light);
}
.bs-cp-meta-row .meta-item i {
    margin-right: 4px;
    opacity: 0.7;
}

/* Body (Progress) */
.bs-cp-body {
    padding: 15px;
}

.bs-cp-stats {
    display: flex;
    align-items: baseline;
    margin-bottom: 8px;
}
.bs-cp-stats .big-number {
    font-size: 1.8em;
    font-weight: 700;
    margin-right: 5px;
    line-height: 1;
}
.bs-cp-stats .total-number {
    font-size: 0.9em;
    color: var(--bs-text-light);
    text-transform: uppercase;
}

.bs-progress-track {
    height: 8px;
    background-color: #f3f4f6;
    border-radius: 4px;
    overflow: hidden;
    width: 100%;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.05);
}

/* Footer (Servizi) */
.bs-cp-services-list {
    padding: 12px 15px;
    background-color: #f9fafb;
    border-top: 1px solid var(--bs-border-color-light);
    flex-grow: 1; /* Spinge in basso */
}

.bs-cp-services-list strong {
    display: block;
    font-size: 0.8em;
    color: var(--bs-text-light);
    text-transform: uppercase;
    margin-bottom: 8px;
}
.bs-cp-services-list strong i { color: var(--bs-success-color); margin-right: 4px; }

.bs-cp-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.bs-service-tag {
    font-size: 0.85em;
    background-color: white;
    border: 1px solid var(--bs-border-color);
    color: var(--bs-text-dark);
    padding: 3px 8px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
}
.bs-service-tag small {
    margin-left: 4px;
    color: var(--bs-secondary-color);
    font-weight: 600;
}


/* ==========================================================================
   STILI COMPLETI REPORT PACCHETTI (KPI, TABELLA, TIMELINE, FILTRI, RESPONSIVE)
   Versione Consolidata vFinal
   ========================================================================== */

/* --- 1. HEADER E TITOLO --- */
.bs-packages-report h2 .fas {
    color: var(--bs-primary-color) !important;
}

/* --- 2. KPI CARDS (Modern Style) --- */
.bs-report-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 25px;
    margin-bottom: 30px;
}

.bs-kpi-card {
    background-color: var(--bs-bg-white);
    border: 1px solid var(--bs-border-color-light);
    border-radius: var(--bs-border-radius-large);
    padding: 25px;
    display: flex;
    align-items: center;
    gap: 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.bs-kpi-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.05);
}

.bs-kpi-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    background-color: color-mix(in srgb, var(--icon-color), white 85%); 
    color: var(--icon-color);
    flex-shrink: 0;
}

.bs-kpi-content { display: flex; flex-direction: column; }
.bs-kpi-label {
    font-size: 13px; font-weight: 600; text-transform: uppercase;
    color: var(--bs-text-light); letter-spacing: 0.5px; margin-bottom: 5px;
}
.bs-kpi-value {
    font-size: 28px; font-weight: 700; color: var(--bs-text-dark); line-height: 1;
}


/* --- 3. AREA FILTRI (Layout Allineato e Pulito) --- */
.bs-packages-report .bs-log-filters {
    background-color: var(--bs-bg-white);
    border: 1px solid var(--bs-border-color-light);
    border-radius: var(--bs-border-radius);
    padding: 20px;
    box-shadow: var(--bs-box-shadow);
    margin-bottom: 25px;
}

.bs-packages-report .bs-filters-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end !important; /* Allinea tutto al basso */
    gap: 15px;
}

.bs-packages-report .bs-filter-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.bs-packages-report label {
    font-weight: 500;
    color: var(--bs-text-light);
    font-size: 13px;
}

/* Input di Testo e Data */
.bs-packages-report input[type="text"],
.bs-packages-report input[type="date"] {
    padding: 0 12px;
    border: 1px solid var(--bs-border-color) !important;
    border-radius: var(--bs-border-radius);
    height: 40px !important; /* Altezza fissa uguale per tutti */
    box-shadow: none !important;
    width: 100%;
    box-sizing: border-box;
    background-color: var(--bs-bg-white);
    color: var(--bs-text-dark);
}
.bs-packages-report input[type="text"] { min-width: 200px; }

.bs-packages-report input:focus,
.bs-packages-report select:focus {
    border-color: var(--bs-primary-color) !important;
    box-shadow: 0 0 0 2px var(--bs-primary-color-light) !important;
    outline: none;
}

/* Select */
.bs-packages-report select {
    height: 40px;
    padding: 0 30px 0 12px;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    background-color: var(--bs-bg-white);
    min-width: 150px;
}

/* Checkbox "Scade Oggi" (Stile Badge Cliccabile) */
.bs-filter-checkbox-wrapper {
    height: 38px; /* Leggermente meno di 40px per compensare il bordo */
    display: flex;
    align-items: center;
    background-color: var(--bs-bg-white);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    padding: 0 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
}
.bs-filter-checkbox-wrapper:hover {
    border-color: var(--bs-primary-color);
    background-color: var(--bs-primary-color-light);
}
.bs-filter-checkbox-wrapper input {
    margin: 0 8px 0 0 !important;
    cursor: pointer;
    transform: scale(1.1);
}
.bs-filter-checkbox-wrapper label {
    margin: 0;
    cursor: pointer;
    font-weight: 600;
    color: var(--bs-error-color); /* Rosso per indicare urgenza */
    font-size: 13px;
}

/* Pulsanti Azione (Filtra e Reset) */
.bs-filter-actions {
    flex-direction: row !important; /* Forza riga per i due bottoni */
    gap: 5px !important;
}

#bs-pkg-rep-filter-btn {
    background-color: var(--bs-primary-color) !important;
    border-color: var(--bs-primary-color) !important;
    color: white !important;
    height: 40px;
    padding: 0 25px;
    font-weight: 600;
    border-radius: var(--bs-border-radius);
    transition: background-color 0.2s ease;
    cursor: pointer;
    line-height: 40px;
}
#bs-pkg-rep-filter-btn:hover {
    background-color: var(--bs-primary-color-dark) !important;
    border-color: var(--bs-primary-color-dark) !important;
}

/* PULSANTE RESET (Grigio Chiaro Neutro -> Rosso in Hover) */
#bs-pkg-rep-reset-btn {
    height: 40px !important;
    width: 44px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    
    /* Stile Neutro */
    background-color: #adadad !important;
    border: 1px solid #d1d5db !important;
    color: #ffffff !important;
    
    border-radius: var(--bs-border-radius);
    cursor: pointer;
    transition: all 0.2s ease !important;
    box-shadow: none !important;
}
#bs-pkg-rep-reset-btn i { font-size: 16px; }

#bs-pkg-rep-reset-btn:hover {
    background-color: var(--bs-error-color) !important; /* Rosso */
    color: #ffffff !important; /* Bianco */
    border-color: var(--bs-error-color) !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.15) !important;
}


/* --- 4. TABELLA E STATI --- */

/* Badge Nome Pacchetto */
.bs-pkg-badge {
    display: inline-block; padding: 4px 10px; background-color: var(--bs-bg-light);
    border-radius: 4px; font-weight: 600; font-size: 0.9em;
    border-left-width: 4px; border-left-style: solid; /* Colore da PHP */
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

/* Badge Stato */
.bs-status-badge.bs-status-active { background-color: var(--bs-success-color); color: white; }
.bs-status-badge.bs-status-expired { background-color: var(--bs-error-color); color: white; }
.bs-status-badge.bs-status-consumed { background-color: var(--bs-secondary-color); color: white; }

/* Barra Progresso */
.bs-progress-wrapper {
    background-color: #e5e7eb; height: 8px; border-radius: 4px;
    overflow: hidden; width: 100px; margin-bottom: 4px;
}
.bs-progress-bar { height: 100%; transition: width 0.3s ease; }

/* PULSANTE STORICO (Stile Solido Colorato) */
table.bs-pkg-report-table .bs-view-pkg-history {
    background-color: var(--bs-primary-color) !important;
    border: 1px solid var(--bs-primary-color) !important;
    color: #ffffff !important;
    
    padding: 6px 14px !important;
    border-radius: 4px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
    transition: all 0.2s ease !important;
    white-space: nowrap;
}
table.bs-pkg-report-table .bs-view-pkg-history i { color: #ffffff !important; }

table.bs-pkg-report-table .bs-view-pkg-history:hover {
    background-color: var(--bs-primary-color-dark) !important;
    border-color: var(--bs-primary-color-dark) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15) !important;
}


/* --- 5. TIMELINE MODALE (Layout Ordinato) --- */
#bs-pkg-history-content { padding: 10px; }

ul.bs-timeline { list-style: none; padding: 0; margin: 0; position: relative; }
ul.bs-timeline:before {
    content: ''; position: absolute; top: 0; bottom: 0; left: 15px; width: 2px; background: #e5e7eb; z-index: 0;
}
ul.bs-timeline li { position: relative; margin-bottom: 25px; padding-left: 50px; }

.timeline-icon {
    position: absolute; left: 0; top: 0; width: 32px; height: 32px;
    border-radius: 50%; color: white; display: flex; align-items: center;
    justify-content: center; z-index: 1; font-size: 14px;
    box-shadow: 0 0 0 4px white;
}

.timeline-content {
    background-color: var(--bs-bg-light);
    border: 1px solid var(--bs-border-color-light);
    border-radius: var(--bs-border-radius);
    padding: 15px;
    padding-right: 70px !important; /* Spazio per il badge numerico */
    position: relative;
}

.timeline-header {
    display: flex; flex-direction: column; margin-bottom: 8px;
    border-bottom: 1px dashed var(--bs-border-color); padding-bottom: 8px;
}
.timeline-header strong { color: var(--bs-text-dark); font-size: 1em; }
.timeline-date { font-size: 0.85em; color: var(--bs-text-light); font-style: italic; }

.timeline-body { font-size: 0.95em; color: var(--bs-text-dark); line-height: 1.4; }

.timeline-change {
    position: absolute; top: 15px; right: 15px;
    font-weight: 700; font-size: 1.2em;
    background-color: rgba(255,255,255,0.8);
    padding: 2px 6px; border-radius: 4px;
    border: 1px solid rgba(0,0,0,0.05);
}
.timeline-change.positive { color: var(--bs-success-color); }
.timeline-change.negative { color: var(--bs-error-color); }


/* --- 6. LAYOUT RESPONSIVE (Mobile) --- */
@media screen and (max-width: 900px) {
    .bs-pkg-report-table thead { display: none; }
    .bs-pkg-report-table tr {
        display: block; margin-bottom: 20px; background: var(--bs-bg-white);
        border: 1px solid var(--bs-border-color-light);
        border-radius: var(--bs-border-radius);
        box-shadow: var(--bs-box-shadow); padding: 0; overflow: hidden;
    }
    .bs-pkg-report-table td {
        display: flex; justify-content: space-between; align-items: center;
        text-align: right; padding: 12px 15px; border-bottom: 1px solid var(--bs-bg-light);
    }
    .bs-pkg-report-table td:last-child {
        border-bottom: none; justify-content: center; background-color: #f9fafb; padding: 15px;
    }
    .bs-pkg-report-table td::before {
        content: attr(data-label); font-weight: 600; color: var(--bs-text-dark);
        text-align: left; margin-right: 15px;
    }
    .bs-pkg-report-table .bs-progress-wrapper { width: 80px; }

    /* Adattamento Filtri su Mobile */
    .bs-packages-report .bs-filters-row { flex-direction: column; align-items: stretch !important; }
    .bs-packages-report .bs-filter-group { width: 100%; }
    .bs-packages-report .bs-filter-checkbox-wrapper { justify-content: center; }
    #bs-pkg-rep-filter-btn { width: 100%; }
    .bs-filter-actions { width: 100%; justify-content: space-between; }
    #bs-pkg-rep-reset-btn { width: 40px; flex-shrink: 0; }
    #bs-pkg-rep-filter-btn { flex-grow: 1; }
}


/* ==========================================================================
   STILI REPORT AVANZATI (Responsive & Modern UI)
   ========================================================================== */

/* --- 1. GRIGLIA PRINCIPALE RESPONSIVE --- */
.bs-report-main-grid {
    display: grid;
    /* Logica Responsive Automatica: 
       Crea tante colonne quante ce ne stanno, purché ogni colonna sia larga almeno 450px.
       Se lo schermo è più piccolo, vanno a capo. */
    grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
    gap: 30px;
    margin-bottom: 40px;
}

/* --- 2. STILE CARD WIDGET (Design "Elevato") --- */
.bs-report-main-grid .bs-dashboard-widget {
    background-color: var(--bs-bg-white);
    border: none; /* Rimuoviamo il bordo grigio standard */
    border-radius: 12px; /* Angoli più morbidi */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05); /* Ombra morbida e profonda */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    
    /* Bordo colorato superiore di base */
    border-top: 5px solid var(--bs-secondary-color);
}

/* Effetto Hover per dare "vita" alla dashboard */
.bs-report-main-grid .bs-dashboard-widget:hover {
    transform: translateY(-5px); /* Si solleva leggermente */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

/* --- 3. COLOR CODING (Riconoscibilità a colpo d'occhio) --- */

/* Servizi: Blu/Primary */
#bs-widget-top-services {
    border-top-color: var(--bs-primary-color) !important;
}
#bs-widget-top-services .bs-widget-title .fas {
    color: var(--bs-primary-color);
    background-color: var(--bs-primary-color-light);
}

/* Operatori: Viola/Info */
#bs-widget-operator-performance {
    border-top-color: var(--bs-info-color) !important;
}
#bs-widget-operator-performance .bs-widget-title .fas {
    color: var(--bs-info-color);
    background-color: var(--bs-info-color-light);
}

/* Clienti: Verde/Success */
#bs-widget-top-clients {
    border-top-color: var(--bs-success-color) !important;
}
#bs-widget-top-clients .bs-widget-title .fas {
    color: var(--bs-success-color);
    background-color: var(--bs-success-color-light);
}

/* Pacchetti: Arancione/Warning */
#bs-widget-packages-sales {
    border-top-color: var(--bs-warning-color) !important;
}
#bs-widget-packages-sales .bs-widget-title .fas {
    color: var(--bs-warning-color);
    background-color: var(--bs-warning-color-light);
}

/* --- 4. HEADER WIDGET MIGLIORATO --- */
.bs-report-main-grid .bs-widget-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--bs-text-dark);
    padding: 20px 25px;
    margin: 0;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    display: flex;
    align-items: center;
    gap: 12px;
    background-color: #fff;
}

/* Stile per l'icona nel titolo (cerchio colorato) */
.bs-report-main-grid .bs-widget-title .fas {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 0.9em;
    /* I colori sono definiti sopra nel blocco Color Coding */
}

/* --- 5. CONTENUTO WIDGET --- */
.bs-report-main-grid .bs-widget-content {
    padding: 25px;
    flex-grow: 1;
}

/* Label Periodo */
.bs-report-period-label {
    font-size: 0.85em;
    color: var(--bs-text-light);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 20px;
    display: block;
    border-bottom: 1px dashed var(--bs-border-color);
    padding-bottom: 10px;
}

/* --- 6. TABELLE RESPONSIVE DENTRO I WIDGET --- */
.bs-widget-content .bs-table-responsive {
    width: 100%;
    overflow-x: auto; /* Permette lo scroll orizzontale su mobile */
    -webkit-overflow-scrolling: touch;
}

.bs-report-table {
    width: 100%;
    border-collapse: separate; 
    border-spacing: 0;
}

.bs-report-table th {
    font-size: 0.75rem;
    text-transform: uppercase;
    color: var(--bs-text-light);
    font-weight: 600;
    padding: 10px 0;
    border-bottom: 2px solid var(--bs-bg-light);
    text-align: left;
}
.bs-report-table td {
    padding: 12px 0;
    border-bottom: 1px solid #f0f0f0;
    font-size: 0.95rem;
    color: var(--bs-text-dark);
}
.bs-report-table tr:last-child td {
    border-bottom: none;
}
.bs-report-table td strong {
    font-weight: 600;
}


/* --- 7. MEDIA QUERIES SPECIFICHE PER MOBILE --- */
@media screen and (max-width: 768px) {
    /* Forza una colonna singola */
    .bs-report-main-grid {
        grid-template-columns: 1fr !important; 
        gap: 20px;
    }

    /* Adatta i KPI in alto */
    .bs-report-kpi-grid {
        grid-template-columns: 1fr; /* Impila i KPI */
        gap: 15px;
    }

    /* Riduci padding nelle card per guadagnare spazio */
    .bs-report-main-grid .bs-widget-content {
        padding: 15px;
    }

    /* Adatta i box del widget Pacchetti (quelli affiancati) */
    #bs-widget-packages-sales .bs-widget-content > div[style*="display:flex"] {
        flex-direction: column; /* Impila i box "Venduti" e "Incasso" */
    }
    
    /* Riduci font titolo */
    .bs-report-main-grid .bs-widget-title {
        font-size: 1rem;
        padding: 15px;
    }
}



/* ==========================================================================
   RESTYLING CARD APPUNTAMENTO (Badge Uniformi e Layout Pulito)
   ========================================================================== */

/* 1. Stile UNIFICATO per tutti i badge (Stato e Pagamento) all'interno della card */
.bs-daily-planner .bs-card-status {
    display: flex;
    flex-wrap: wrap;
    gap: 6px; /* Spazio uniforme tra i badge */
    margin-bottom: 10px;
    align-items: center;
}

/* Selettore multiplo per colpire entrambi i tipi di badge */
.bs-daily-planner .bs-status-badge,
.bs-daily-planner .bs-payment-badge {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    
    /* Dimensioni e Spaziature Identiche */
    height: 24px !important;
    padding: 0 10px !important;
    border-radius: 4px !important; /* Angoli leggermente arrotondati, non pillola */
    
    /* Tipografia Identica */
    font-size: 10px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 24px !important; /* Centratura verticale testo */
    
    color: #FFFFFF !important; /* Testo bianco */
    text-shadow: none !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    border: none !important;
}

/* Icone dentro i badge */
.bs-daily-planner .bs-status-badge i,
.bs-daily-planner .bs-payment-badge i {
    font-size: 10px !important;
    margin-right: 4px;
}

/* Colori Specifici (Manteniamo i colori semantici) */
.bs-payment-badge.bs-payment-unpaid { background-color: #F59E0B !important; } /* Arancione */
.bs-payment-badge.bs-payment-paid { background-color: #10B981 !important; } /* Verde */
.bs-payment-badge.bs-payment-refunded { background-color: #EF4444 !important; } /* Rosso */

/* 2. Layout Riga Info (Durata e Prezzo) */
.bs-card-info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 8px;
    margin-bottom: 8px;
    border-bottom: 1px solid rgba(255,255,255,0.15); /* Linea molto sottile */
}

.bs-info-item {
    font-size: 12px;
    font-weight: 500;
    opacity: 0.95;
    display: flex;
    align-items: center;
    gap: 5px;
}

/* Prezzo in evidenza ma integrato */
.bs-price-tag {
    background-color: rgba(0, 0, 0, 0.15);
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 700;
}


/* ==========================================================================
   STILI WALLET CLIENTE E BADGE SIDEBAR
   ========================================================================== */

/* Badge Rosso nella Sidebar */
.bs-sidebar-badge {
    background-color: var(--bs-error-color);
    color: white;
    font-size: 10px;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 10px;
    margin-left: auto; /* Spinge il badge a destra */
    line-height: 1;
    min-width: 16px;
    text-align: center;
}

/* Stato Vuoto Wallet */
.bs-wallet-empty-state {
    text-align: center;
    padding: 60px 20px;
    background-color: var(--bs-bg-white);
    border-radius: var(--bs-border-radius-large);
    border: 2px dashed var(--bs-border-color);
    margin-top: 30px;
}
.bs-empty-icon {
    font-size: 4em;
    color: var(--bs-border-color);
    margin-bottom: 20px;
}
.bs-wallet-empty-state h3 {
    color: var(--bs-text-dark);
    margin-bottom: 10px;
}
.bs-wallet-empty-state p {
    color: var(--bs-text-light);
    margin-bottom: 20px;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

.bs-wallet-intro {
    background-color: var(--bs-bg-white);
    border: 1px solid var(--bs-border-color-light);
    /* Bordo colorato a sinistra per richiamare il brand */
    border-left: 4px solid var(--bs-primary-color); 
    border-radius: var(--bs-border-radius);
    
    padding: 20px 25px;
    margin-bottom: 30px; /* Spazio sotto prima delle card */
    
    color: var(--bs-text-light);
    font-size: 0.95em;
    line-height: 1.6;
    
    /* Ombra leggera per staccarlo dallo sfondo */
    box-shadow: var(--bs-box-shadow);
    
    /* Flexbox per allineare l'icona che aggiungiamo via CSS */
    display: flex;
    align-items: center;
    gap: 15px;
}

/* Aggiungiamo un'icona informativa automaticamente via CSS */
.bs-wallet-intro::before {
    content: '\f05a'; /* Codice FontAwesome per "Info Circle" */
    font-family: "Font Awesome 5 Free"; /* Assicurati che il font corrisponda a quello caricato */
    font-weight: 900;
    font-size: 1.5em;
    color: var(--bs-primary-color); /* Colore dell'icona uguale al tema */
}

/* Footer Card Wallet (Pulsante Prenota) */
.bs-wallet-card-footer {
    padding: 15px;
    border-top: 1px solid var(--bs-border-color-light);
    background-color: #fafafa;
}

/* Responsive per Badge Sidebar */
@media screen and (max-width: 992px) {
    /* Su mobile, la sidebar è diversa, assicurati che il badge si veda bene */
    .bs-sidebar-badge {
        position: absolute;
        top: 10px;
        right: 15px;
    }
}



/* ==========================================================================
   STILI WIDGET FIDELITY (ADMIN)
   ========================================================================== */

.bs-loyalty-balance-card {
    /* Gradiente Oro Lussuoso (da Ambra chiaro a Bronzo scuro) */
    background: linear-gradient(135deg, #F59E0B 0%, #B45309 100%);
    color: white;
    padding: 20px;
    border-radius: var(--bs-border-radius);
    text-align: center;
    margin-bottom: 20px;
    /* Ombra colorata intonata all'oro */
    box-shadow: 0 4px 15px rgba(245, 158, 11, 0.4);
    position: relative;
    overflow: hidden;
}

/* Effetto lucentezza opzionale (per renderlo più "Gold") */
.bs-loyalty-balance-card::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, transparent 60%);
    opacity: 0.6;
    pointer-events: none;
}

.bs-loyalty-points .value {
    display: block;
    font-size: 2.5em;
    font-weight: 800;
    line-height: 1;
    text-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.bs-loyalty-points .label {
    display: block;
    font-size: 0.85em;
    text-transform: uppercase;
    opacity: 0.9;
    margin-top: 5px;
    font-weight: 500;
    letter-spacing: 1px;
}

.bs-loyalty-value {
    margin-top: 15px;
    background-color: rgba(255,255,255,0.2);
    padding: 5px 10px;
    border-radius: 20px;
    display: inline-block;
    font-size: 0.9em;
}

.bs-loyalty-history-list h4 {
    font-size: 13px;
    text-transform: uppercase;
    color: var(--bs-text-light);
    border-bottom: 1px solid var(--bs-border-color-light);
    padding-bottom: 5px;
    margin-bottom: 10px;
}

.bs-loyalty-history-list ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.bs-loyalty-history-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px dashed var(--bs-border-color-light);
    font-size: 13px;
}
.bs-loyalty-history-list li:last-child {
    border-bottom: none;
}

.bs-loyalty-history-list .log-info {
    display: flex;
    flex-direction: column;
}
.bs-loyalty-history-list .log-desc {
    color: var(--bs-text-dark);
    font-weight: 500;
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    max-width: 180px;
}
.bs-loyalty-history-list .log-date {
    font-size: 0.85em;
    color: var(--bs-text-light);
}

.bs-loyalty-history-list .log-amount {
    font-weight: 700;
    font-size: 1.1em;
}
.bs-loyalty-history-list .log-amount.positive { color: var(--bs-success-color); }
.bs-loyalty-history-list .log-amount.negative { color: var(--bs-error-color); }


/* ==========================================================================
   STILI WALLET: FIDELITY CARD
   ========================================================================== */

.bs-wallet-section-title {
    margin-top: 40px;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--bs-border-color-light);
    font-size: 1.3em;
    color: var(--bs-text-dark);
}

.bs-loyalty-section {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    margin-bottom: 40px;
}

/* CARD DIGITALE GOLD */
.bs-loyalty-card-digital {
    flex: 1;
    min-width: 300px;
    max-width: 450px;
    height: 220px;
    border-radius: 16px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
    color: white;
    transition: transform 0.3s ease;
}

.bs-loyalty-card-digital:hover {
    transform: translateY(-5px);
}

.bs-card-bg {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    /* Gradiente Oro Premium */
    background: linear-gradient(135deg, #d4af37 0%, #c5a028 20%, #eecf5f 50%, #c5a028 80%, #b8860b 100%);
    z-index: 1;
}

/* Effetto Texture/Rumore leggero */
.bs-card-bg::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%23ffffff' fill-opacity='0.1' fill-rule='evenodd'/%3E%3C/svg%3E");
    opacity: 0.5;
}

.bs-card-content {
    position: relative;
    z-index: 2;
    padding: 20px;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

.bs-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.2em;
    letter-spacing: 2px;
    font-weight: 600;
}

.bs-card-middle {
    text-align: center;
}
.bs-points-big {
    display: block;
    font-size: 3.5em;
    font-weight: 800;
    line-height: 1;
}
.bs-points-label {
    font-size: 0.9em;
    text-transform: uppercase;
    opacity: 0.9;
}

.bs-card-bottom {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}
.bs-card-value {
    font-size: 0.9em;
    background: rgba(0,0,0,0.2);
    padding: 4px 10px;
    border-radius: 10px;
}
.bs-card-id {
    font-family: monospace;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 1em;
}

/* Mini Storico Laterale */
.bs-loyalty-mini-history {
    flex: 1;
    min-width: 280px;
    background-color: var(--bs-bg-white);
    border: 1px solid var(--bs-border-color-light);
    border-radius: var(--bs-border-radius);
    padding: 20px;
}
.bs-loyalty-mini-history h4 {
    margin: 0 0 15px 0;
    font-size: 14px;
    color: var(--bs-text-light);
    text-transform: uppercase;
    border-bottom: 1px solid var(--bs-border-color-light);
    padding-bottom: 8px;
}
.bs-loyalty-mini-history ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.bs-loyalty-mini-history li {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    padding: 8px 0;
    border-bottom: 1px dashed var(--bs-border-color-light);
}
.bs-loyalty-mini-history li:last-child { border-bottom: none; }
.bs-loyalty-mini-history .date { color: var(--bs-text-light); margin-right: 10px; }
.bs-loyalty-mini-history .desc { flex-grow: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-right: 10px; }
.bs-loyalty-mini-history .amount { font-weight: 700; }
.bs-loyalty-mini-history .amount.pos { color: var(--bs-success-color); }
.bs-loyalty-mini-history .amount.neg { color: var(--bs-error-color); }


/* Stili per Card Pacchetti Disattivati/Finiti */
.bs-client-package-item.bs-pkg-inactive {
    opacity: 0.7;
    background-color: #f9fafb;
    border-color: #e5e7eb;
}
.bs-client-package-item.bs-pkg-inactive .bs-cp-name {
    color: #6b7280;
    filter: grayscale(1);
}

/* Nuova Barra di Progresso con Etichette */
.bs-progress-container {
    width: 100%;
}
.bs-progress-labels {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: var(--bs-text-light);
    margin-top: 4px;
}
.bs-progress-track {
    height: 10px; /* Un po' più alta */
    background-color: #e5e7eb;
    border-radius: 5px;
    overflow: hidden;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.05);
}
.bs-progress-fill {
    height: 100%;
    border-radius: 5px;
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1); /* Animazione fluida */
    /* Pattern a righe opzionale per renderla più carina */
    background-image: linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
    background-size: 1rem 1rem;
}

/* STILE PULSANTE STORICO (SOLIDO E COLORATO) */
.bs-view-pkg-history {
    /* Sfondo Colorato (pieno) invece di bianco */
    background-color: var(--bs-primary-color) !important; 
    
    /* Bordo dello stesso colore */
    border: 1px solid var(--bs-primary-color) !important;
    
    /* Testo e Icona Bianchi */
    color: #FFFFFF !important; 
    
    /* Altri stili di layout */
    padding: 6px 14px !important;
    font-size: 12px !important;
    border-radius: 4px !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    transition: all 0.2s ease !important;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Assicura che l'icona interna sia bianca */
.bs-view-pkg-history i {
    color: #FFFFFF !important; 
}

/* Effetto Hover: diventa più scuro */
.bs-view-pkg-history:hover {
    background-color: var(--bs-primary-color-dark) !important;
    border-color: var(--bs-primary-color-dark) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15) !important;
}

/* ==========================================================================
   CAMBIO STATO RAPIDO (Popover)
   ========================================================================== */

/* Rendiamo il badge cliccabile */
.bs-card-status .bs-status-badge.bs-quick-status-trigger {
    cursor: pointer;
    position: relative; /* Per posizionare l'iconcina */
    padding-right: 22px !important; /* Spazio per la freccetta */
    transition: opacity 0.2s;
}
.bs-card-status .bs-status-badge.bs-quick-status-trigger:hover {
    opacity: 0.9;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

/* Icona freccetta nel badge */
.bs-status-chevron {
    position: absolute;
    right: 6px;
    font-size: 0.8em;
    opacity: 0.8;
}

/* Il Menu Popover */
.bs-status-popover {
    position: absolute;
    background: white;
    border: 1px solid var(--bs-border-color);
    border-radius: 6px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.15);
    z-index: 9999; /* Sopra tutto */
    min-width: 140px;
    overflow: hidden;
    display: none; /* Nascosto di default */
    animation: bsFadeIn 0.2s ease-out;
}

.bs-status-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 15px;
    font-size: 13px;
    color: var(--bs-text-dark);
    cursor: pointer;
    transition: background 0.1s;
    border-bottom: 1px solid var(--bs-bg-light);
}
.bs-status-option:last-child { border-bottom: none; }
.bs-status-option:hover { background-color: var(--bs-bg-light); }

/* Indicatori colore nel menu */
.bs-status-dot-menu {
    width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
}
.bs-dot-confirmed { background-color: var(--bs-success-color); }
.bs-dot-pending { background-color: var(--bs-warning-color); }
.bs-dot-completed { background-color: var(--bs-info-color); }
.bs-dot-cancelled { background-color: var(--bs-error-color); }
.bs-dot-no-show { background-color: var(--bs-secondary-color); }


/* ==========================================================================
   STILI DRAG & DROP PLANNER (Effetti Visivi Avanzati v2)
   ========================================================================== */

/* 1. La Card mentre viene trascinata (il "clone" volante) */
.bs-appointment-card.ui-draggable-dragging {
    z-index: 99999 !important; /* Livello altissimo, sopra header e menu */
    box-shadow: 0 15px 30px rgba(0,0,0,0.4) !important; /* Ombra profonda per effetto "sollevato" */
    opacity: 0.95;
    cursor: grabbing !important;
    
    /* Effetto "Presa": Leggero ingrandimento, NESSUNA rotazione per precisione */
    transform: scale(1.02); 
    
    background-color: var(--bs-primary-color) !important;
    border: 2px solid #fff; /* Bordo bianco per contrasto */
    color: #fff !important;
    
    /* FONDAMENTALE: Permette al mouse di "vedere" la colonna sotto la card per il drop */
    pointer-events: none; 
}

/* Forza il testo bianco durante il drag per leggibilità */
.bs-appointment-card.ui-draggable-dragging .bs-card-client-name,
.bs-appointment-card.ui-draggable-dragging .bs-card-time,
.bs-appointment-card.ui-draggable-dragging .bs-card-service-name {
    color: #fff !important;
}

/* Sfoca il contenuto della card volante per far risaltare l'orario al centro */
.bs-appointment-card.ui-draggable-dragging .bs-card-header-line,
.bs-appointment-card.ui-draggable-dragging .bs-card-collapsible-content {
    opacity: 0.2; 
    filter: blur(1px);
}

/* 2. La Card originale rimasta nel calendario (effetto "Fantasma") */
.bs-appointment-card.is-being-dragged {
    opacity: 0.3 !important;
    filter: grayscale(100%);
}

/* 3. La Colonna di destinazione (Feedback visivo quando ci passi sopra) */
.bs-operator-col.ui-droppable-hover,
.bs-day-col.ui-droppable-hover {
    background-color: rgba(16, 185, 129, 0.15) !important; /* Verde chiarissimo */
    box-shadow: inset 0 0 0 2px var(--bs-success-color) !important; /* Bordo interno verde */
    transition: background-color 0.1s ease;
}

/* Disabilita selezione testo globale durante il drag per evitare artefatti */
.bs-planner-body.ui-draggable-dragging {
    user-select: none;
}

/* Cursore "mano aperta" sugli appuntamenti a riposo */
.bs-appointment-card {
    cursor: grab;
}

/* ==========================================================================
   INDICATORE ORARIO DRAG & DROP (Versione HUD Centrale)
   ========================================================================== */

.bs-drag-time-indicator {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Centra perfettamente */
    
    background-color: rgba(31, 41, 55, 0.95); /* Grigio scuro quasi nero */
    color: #ffffff;
    
    padding: 12px 24px;
    border-radius: 8px;
    
    font-size: 24px; /* Font grande per massima visibilità */
    font-weight: 800;
    letter-spacing: 1px;
    font-family: monospace; /* Font monospaziato per evitare "salti" mentre i numeri cambiano */
    
    box-shadow: 0 8px 20px rgba(0,0,0,0.4);
    border: 2px solid rgba(255,255,255, 0.3);
    
    z-index: 100002; /* Sopra al clone della card */
    pointer-events: none;
    
    /* Effetto vetro */
    backdrop-filter: blur(4px); 
}

/* Nascondi la vecchia freccetta */
.bs-drag-time-indicator::after {
    display: none;
}

/* --- FIX CRITICO CARD APPUNTAMENTO --- */
.bs-appointment-card, 
.bs-daily-planner .bs-appointment-card {
    /* Forza l'uso della variabile per il bordo sinistro */
    border-left: 5px solid var(--service-color, #6B7280) !important; 
    
    /* Assicura che non sia mai trasparente */
    background-color: var(--bs-bg-white); 
    
    /* Altri stili essenziali */
    border-top: 1px solid rgba(0,0,0,0.1);
    border-right: 1px solid rgba(0,0,0,0.1);
    border-bottom: 1px solid rgba(0,0,0,0.1);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Quando la card ha un colore di sfondo inline (Operatore), assicuriamoci che il testo sia leggibile */
.bs-appointment-card[style*="background-color"] {
    color: #fff;
    text-shadow: 0 1px 1px rgba(0,0,0,0.3);
}

/* Se il colore di sfondo è chiaro o manca, testo scuro */
.bs-appointment-card:not([style*="background-color"]) {
    color: var(--bs-text-dark);
    text-shadow: none;
}



/* ==========================================================================
   RESTYLING SIDEBAR PRO 
   ========================================================================== */

/* 1. Etichette di Sezione (es. APP, FUNZIONI) */
.bs-sidebar-section-label {
    padding: 15px 20px 5px 20px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.4); /* Grigio chiaro trasparente */
    letter-spacing: 1px;
    margin-top: 5px;
}

/* 2. Badge "NEW" o Contatori */
.bs-menu-badge {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 9px;
    font-weight: bold;
    text-transform: uppercase;
    margin-left: auto; /* Spinge a destra */
    line-height: 1;
}
.bs-menu-badge.new {
    background-color: #EF4444; /* Rosso */
    color: white;
}
.bs-menu-badge.count {
    background-color: var(--bs-primary-color);
    color: white;
    border-radius: 10px;
    min-width: 18px;
    text-align: center;
}

/* Modifica per allineare il badge nel link */
li.bs-sidebar-menu-item > a,
li.bs-sidebar-menu-item > .bs-submenu-toggle {
    display: flex;
    align-items: center;
    justify-content: flex-start; /* Allinea a sinistra */
}

/* 3. Footer Sidebar (Azioni Rapide in basso) */
.bs-sidebar-footer {
    margin-top: auto; /* Spinge in fondo al contenitore flex */
    padding: 15px 10px;
    background-color: rgba(0, 0, 0, 0.2);
    display: flex;
    justify-content: space-around;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.bs-sidebar-footer a {
    color: rgba(255, 255, 255, 0.6);
    font-size: 16px;
    padding: 8px;
    border-radius: 4px;
    transition: all 0.2s;
}

.bs-sidebar-footer a:hover {
    color: white;
    background-color: rgba(255, 255, 255, 0.1);
}

/* Aggiustamento altezza sidebar per far stare il footer */
.bs-dashboard-sidebar {
    /* Assicurati che il display sia flex e direction column (già fatto nel codice precedente) */
    justify-content: space-between;
}


/* ==========================================================================
   STILI GESTIONE MAGAZZINO (Inventory) - vFinal Consolidated
   ========================================================================== */

/* --- Header e Layout --- */
.bs-inventory-management h2 .fas {
    color: var(--bs-primary-color) !important;
}

.bs-inventory-header-group {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.bs-inventory-actions {
    display: flex;
    gap: 10px;
}

.bs-inventory-tab-content {
    display: none;
}
.bs-inventory-tab-content.active {
    display: block;
}

/* --- Tabella Prodotti --- */
.bs-prod-thumb {
    width: 40px;
    height: 40px;
    border-radius: 4px;
    object-fit: cover;
    border: 1px solid #eee;
}

.bs-prod-thumb-placeholder {
    width: 40px;
    height: 40px;
    border-radius: 4px;
    background: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ccc;
    font-size: 16px;
}

.bs-prod-name-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Badge Giacenza */
.bs-stock-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 12px;
    min-width: 24px;
    text-align: center;
}
.bs-stock-ok {
    background-color: #d1fae5;
    color: #065f46;
}
.bs-stock-low {
    background-color: #fee2e2;
    color: #b91c1c;
    animation: pulse-red 2s infinite;
}

@keyframes pulse-red {
    0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); }
    70% { box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); }
    100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}

/* --- Filtri Magazzino --- */
.bs-inventory-management .bs-filters-row {
    display: flex;
    align-items: flex-end;
    gap: 15px;
    flex-wrap: wrap;
}

/* Stile uniforme per tutti gli input dei filtri */
.bs-inventory-management input[type="text"],
.bs-inventory-management select,
.bs-inventory-management .bs-filter-checkbox-wrapper {
    height: 40px !important; /* Altezza fissa uniforme */
    box-sizing: border-box;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    background-color: var(--bs-bg-white);
    display: flex;
    align-items: center;
}

.bs-inventory-management input#bs-inventory-search {
    width: 100%;
    padding: 0 12px;
}

/* Checkbox Sottoscorta (Stile Badge Cliccabile) */
.bs-inventory-management .bs-filter-checkbox-wrapper {
    padding: 0 15px;
    cursor: pointer;
    border-color: var(--bs-warning-color);
    color: var(--bs-warning-color-dark);
    font-weight: 500;
    font-size: 13px;
    transition: background-color 0.2s ease;
}
.bs-inventory-management .bs-filter-checkbox-wrapper:hover {
    background-color: var(--bs-warning-color-light);
}
.bs-inventory-management .bs-filter-checkbox-wrapper input {
    margin-right: 8px;
    transform: scale(1.2);
}

/* Pulsante Aggiorna (Refresh) */
#bs-inventory-refresh-btn {
    height: 40px !important;
    width: 40px !important;
    padding: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--bs-border-radius);
    background-color: var(--bs-primary-color) !important;
    border: 1px solid var(--bs-primary-color) !important;
    color: #ffffff !important;
    transition: all 0.3s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    cursor: pointer;
}

#bs-inventory-refresh-btn:hover {
    background-color: var(--bs-primary-color-dark) !important;
    border-color: var(--bs-primary-color-dark) !important;
    transform: rotate(180deg); 
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
#bs-inventory-refresh-btn i {
    font-size: 16px;
}

/* --- STILI PULSANTI AZIONI (Prodotti & Fornitori) --- */

/* Contenitore Cella Azioni */
.bs-inventory-management .wp-list-table .bs-actions-cell {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 5px !important;       /* Spazio piccolo ma visibile */
    white-space: nowrap !important; /* VIETATO andare a capo */
    flex-wrap: nowrap !important;   /* VIETATO andare a capo (Flex) */
    width: 100% !important;
    box-sizing: border-box !important;
    padding-right: 5px !important; /* Riduce il padding destro per dare spazio ai bottoni */
}

/* Stile Base Pulsanti Piccoli */
.bs-inventory-management .wp-list-table .button-small {
    width: 30px !important;   /* Ridotto da 32px a 30px per compattezza */
    height: 30px !important;
    padding: 0 !important;
    font-size: 13px !important;
    line-height: 30px !important; /* Centratura verticale icona */
    margin: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none !important;
    border-radius: 4px;
    color: #fff !important; /* Icona bianca */
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.15);
    opacity: 0.9;
    cursor: pointer;
    text-decoration: none !important;
    flex-shrink: 0 !important; /* Impedisce che si schiaccino */
    margin: 0 !important;
}

.bs-inventory-management .wp-list-table .button-small:hover {
    opacity: 1;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.bs-inventory-management .wp-list-table .button-small i {
    margin: 0 !important;
    line-height: 1 !important;
    display: inline-block;
}

/* COLORI SPECIFICI */

/* 1. Modifica (Blu) - Prodotti e Fornitori */
.bs-edit-product-btn,
.bs-edit-supplier-btn {
    background-color: var(--bs-info-color) !important;
}
.bs-edit-product-btn:hover,
.bs-edit-supplier-btn:hover {
    background-color: var(--bs-info-color-dark) !important;
}

/* 2. Elimina (Rosso) - Prodotti e Fornitori */
.bs-delete-supplier-btn,
.bs-delete-product-btn {
    background-color: var(--bs-error-color) !important;
    border: 1px solid var(--bs-error-color) !important;
    color: #fff !important;
}
.bs-delete-supplier-btn:hover,
.bs-delete-product-btn:hover {
    background-color: var(--bs-error-color-dark) !important;
    border-color: var(--bs-error-color-dark) !important;
}

/* 3. Movimenta Stock (Arancione) */
.bs-stock-adjust-btn {
    background-color: var(--bs-warning-color) !important;
}
.bs-stock-adjust-btn:hover {
    background-color: var(--bs-warning-color-dark) !important;
}

/* 4. Storico (Grigio Scuro) */
.bs-history-product-btn {
    background-color: var(--bs-secondary-color-dark) !important;
}
.bs-history-product-btn:hover {
    background-color: #374151 !important;
}

/* --- Fix Modale Prodotto (Larghezza Input) --- */
#bs-product-modal .bs-form-grid-2-col {
    display: grid;
    grid-template-columns: 1fr 1fr; 
    gap: 20px;
    width: 100%;
    box-sizing: border-box;
}

#bs-product-modal input[type="text"],
#bs-product-modal input[type="number"],
#bs-product-modal select {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    height: 40px !important;
    padding: 0 12px !important;
}

/* ==========================================================================
   RESPONSIVE MAGAZZINO PERFETTO (Mobile Cards v2)
   ========================================================================== */

@media screen and (max-width: 782px) {
    
    /* 1. Reset Struttura Tabella */
    .bs-inventory-management .wp-list-table,
    .bs-inventory-management .wp-list-table tbody,
    .bs-inventory-management .wp-list-table tr,
    .bs-inventory-management .wp-list-table td {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }

    /* Nascondi Header Classico */
    .bs-inventory-management .wp-list-table thead {
        display: none;
    }

    /* 2. Stile Card (La Riga) */
    .bs-inventory-management .wp-list-table tr {
        margin-bottom: 20px;
        background-color: var(--bs-bg-white);
        border: 1px solid var(--bs-border-color-light);
        border-radius: var(--bs-border-radius);
        box-shadow: 0 4px 6px rgba(0,0,0,0.05);
        overflow: hidden;
        position: relative;
    }

    /* 3. Intestazione Card (Prodotto + Immagine) */
    .bs-inventory-management .wp-list-table td:first-child {
        background-color: #f8fafc;
        border-bottom: 1px solid var(--bs-border-color-light);
        padding: 15px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start; /* Allinea a sinistra */
    }

    /* Nascondi la label "Prodotto" generata dal CSS, è ridondante qui */
    .bs-inventory-management .wp-list-table td:first-child::before {
        display: none;
    }

    .bs-prod-name-wrapper {
        width: 100%;
        display: flex;
        align-items: center;
        gap: 15px;
        justify-content: flex-start; /* Forza sinistra */
    }
    
    .bs-prod-name-wrapper div {
        text-align: left; /* Testo allineato a sinistra */
    }
    
    /* Ingrandisci un po' l'immagine su mobile */
    .bs-prod-thumb, .bs-prod-thumb-placeholder {
        width: 50px;
        height: 50px;
        flex-shrink: 0;
    }

    /* 4. Celle Dati (Coppie Chiave-Valore) */
    .bs-inventory-management .wp-list-table td {
        padding: 10px 15px;
        border-bottom: 1px dashed #eee;
        display: flex;
        justify-content: space-between;
        align-items: center;
        text-align: right;
    }

    /* Label (::before) */
    .bs-inventory-management .wp-list-table td::before {
        content: attr(data-label); /* <--- QUESTA È LA MAGIA */
        font-weight: 600;
        color: var(--bs-text-light); /* Grigio scuro per la label */
        font-size: 0.85em;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-right: auto; /* Spinge il valore a destra */
        display: inline-block; /* Assicura che sia visibile */
    }

    /* Valori */
    .bs-inventory-management .wp-list-table td > * {
        font-weight: 500;
        color: var(--bs-text-dark);
    }

    /* 5. Cella Azioni (Footer) */
    .bs-inventory-management .wp-list-table td.bs-actions-cell {
        background-color: #fcfcfc;
        border-top: 1px solid var(--bs-border-color-light);
        border-bottom: none;
        padding: 15px;
        
        /* Flexbox per centrare e distribuire */
        display: flex;
        justify-content: space-around; /* Distribuisce uniformemente */
        align-items: center;
        gap: 10px;
    }

    /* Nascondi la label per la prima cella (Nome) e l'ultima (Azioni) perché hanno layout speciali */
    .bs-inventory-management .wp-list-table td:first-child::before,
    .bs-inventory-management .wp-list-table td.bs-actions-cell::before {
        display: none;
    }

    /* Pulsanti Grandi per Touch */
    .bs-inventory-management .wp-list-table .bs-actions-cell .button-small {
        width: 42px !important;
        height: 42px !important;
        line-height: 42px !important;
        font-size: 16px !important;
        border-radius: 8px !important;
        margin: 0 !important;
        flex-shrink: 0;
        
        /* Ombra per farli sembrare bottoni app */
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    }
    
    /* Filtri in colonna */
    .bs-inventory-management .bs-filters-row {
        flex-direction: column;
        align-items: stretch;
    }
    .bs-inventory-management .bs-filter-group {
        width: 100%;
        margin-bottom: 10px;
    }
    /* Checkbox Sottoscorta allineata a sinistra */
    .bs-inventory-management .bs-filter-checkbox-wrapper {
        justify-content: flex-start;
    }
    /* Bottone Refresh a tutta larghezza */
    #bs-inventory-refresh-btn {
        width: 100% !important;
    }
}


/* ==========================================================================
   STILI PUNTO VENDITA (POS)
   ========================================================================== */

/* --- Header e Layout --- */
.bs-pos-layout h2 .fas {
    color: var(--bs-primary-color) !important;
}

.bs-pos-layout {
    display: grid;
    grid-template-columns: 1fr 350px; /* Catalogo flessibile, Carrello fisso */
    gap: 20px;
    height: calc(100vh - 100px); /* Altezza fissa per scroll interno */
}

/* Colonna Catalogo */
.bs-pos-catalog {
    display: flex; flex-direction: column;
    background: #fff; border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius-large);
    overflow: hidden;
}
.bs-pos-header {
    padding: 15px 20px; border-bottom: 1px solid var(--bs-border-color-light);
    display: flex; justify-content: space-between; align-items: center;
}

/* --- Barra di Ricerca POS (Stile Uniformato) --- */
.bs-pos-search-bar {
    position: relative;
    width: 300px;
    max-width: 100%; /* Per responsive */
}

.bs-pos-search-bar input {
    width: 100%;
    height: 40px !important; /* Altezza standard identica agli altri input */
    padding: 0 15px 0 38px !important; /* Padding sinistro per far spazio all'icona */
    border: 1px solid var(--bs-border-color) !important;
    border-radius: var(--bs-border-radius) !important;
    font-size: 14px;
    color: var(--bs-text-dark);
    background-color: var(--bs-bg-white);
    box-shadow: 0 1px 2px rgba(0,0,0,0.05); /* Leggera ombra per profondità */
    transition: all 0.2s ease;
    box-sizing: border-box;
}

/* Effetto Focus (Anello colorato come nel resto della dashboard) */
.bs-pos-search-bar input:focus {
    border-color: var(--bs-primary-color) !important;
    box-shadow: 0 0 0 3px var(--bs-primary-color-light) !important;
    outline: none;
}

/* Posizionamento Icona Lente */
.bs-pos-search-bar i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%); /* Centratura verticale perfetta */
    color: var(--bs-text-light); /* Grigio standard */
    font-size: 14px;
    pointer-events: none; /* Permette di cliccare "attraverso" l'icona */
    opacity: 0.7;
}

.bs-pos-tabs {
    display: flex; padding: 10px 20px; background: #f9fafb; gap: 10px; border-bottom: 1px solid #eee;
}
.bs-pos-tab {
    background: #fff; border: 1px solid #ddd; padding: 6px 15px; border-radius: 20px; cursor: pointer;
    font-size: 0.9em; font-weight: 500; color: var(--bs-text-light); transition: all 0.2s;
}
.bs-pos-tab.active {
    background: var(--bs-primary-color); color: white; border-color: var(--bs-primary-color);
}

.bs-pos-grid {
    flex-grow: 1; overflow-y: auto; padding: 20px;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 15px; align-content: start;
}

.bs-pos-item-card {
    background: #fff; border: 1px solid #eee; border-radius: 8px; padding: 15px;
    text-align: center; cursor: pointer; transition: all 0.2s;
    box-shadow: 0 2px 4px rgba(0,0,0,0.03);
    display: flex; flex-direction: column; justify-content: center; height: 140px;
}
.bs-pos-item-card:hover { transform: translateY(-3px); box-shadow: 0 5px 15px rgba(0,0,0,0.1); border-color: var(--bs-primary-color); }
.bs-pos-item-card.disabled { opacity: 0.6; cursor: not-allowed; filter: grayscale(1); pointer-events: none; }

.item-icon { font-size: 2em; margin-bottom: 10px; }
.item-name { font-weight: 600; font-size: 0.95em; margin-bottom: 5px; line-height: 1.3; height: 2.6em; overflow: hidden; }
.item-price { display: block; font-weight: 700; color: var(--bs-text-dark); }
.stock-pill { font-size: 0.75em; background: #e0f2fe; color: #0369a1; padding: 2px 6px; border-radius: 4px; margin-left: 5px; }
.stock-pill.out { background: #fee2e2; color: #b91c1c; }

/* Colonna Carrello */
.bs-pos-cart-panel {
    background: #fff; border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius-large);
    display: flex; flex-direction: column; overflow: hidden;
}
.bs-pos-client-select { padding: 15px; border-bottom: 1px solid #eee; background: #fdfdfd; }
.bs-pos-client-select label { display: block; font-size: 0.85em; font-weight: 600; margin-bottom: 5px; color: #777; }

.bs-pos-cart-items { flex-grow: 1; overflow-y: auto; padding: 0; }
.bs-cart-table { width: 100%; border-collapse: collapse; font-size: 0.9em; }
.bs-cart-table th { background: #f3f4f6; padding: 8px 10px; text-align: left; font-size: 0.8em; color: #666; position: sticky; top: 0; }
.bs-cart-table td { padding: 10px; border-bottom: 1px solid #eee; vertical-align: middle; }
.bs-cart-qty { width: 40px; padding: 4px; text-align: center; border: 1px solid #ddd; border-radius: 4px; }

.bs-pos-footer { padding: 20px; background: #f9fafb; border-top: 1px solid #ddd; }
.bs-cart-notes textarea { width: 100%; border: 1px solid #ddd; border-radius: 4px; padding: 8px; font-size: 0.9em; margin-bottom: 10px; resize: none; }
.bs-cart-totals { display: flex; justify-content: space-between; font-size: 1.4em; font-weight: 800; margin-bottom: 15px; color: var(--bs-text-dark); }

.bs-payment-methods { display: flex; gap: 10px; margin-bottom: 15px; }
.radio-box { flex: 1; position: relative; }
.radio-box input { position: absolute; opacity: 0; width: 0; height: 0; }
.radio-box .box-content {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 10px; border: 1px solid #ddd; border-radius: 6px; cursor: pointer;
    font-weight: 500; font-size: 0.9em; transition: all 0.2s; background: white;
}
.radio-box input:checked + .box-content {
    border-color: var(--bs-primary-color); background-color: var(--bs-primary-color-light); color: var(--bs-primary-color-dark);
}

/* Responsive POS */
@media (max-width: 900px) {
    .bs-pos-layout { grid-template-columns: 1fr; height: auto; }
    .bs-pos-cart-panel { height: 500px; order: 2; } /* Carrello sotto */
}

/* ==========================================================================
   STILI SCONTRINO (Receipt)
   ========================================================================== */

.bs-receipt-preview {
    background-color: #ffffff !important;
    padding: 20px;
    font-family: 'Courier New', Courier, monospace; /* Font da scontrino */
    font-size: 14px;
    color: #000;
    border: 1px solid #eee;
    box-shadow: 0 0 10px rgba(0,0,0,0.05);
    margin: 0 auto;
}


.bs-receipt-preview .receipt-header { text-align: center; margin-bottom: 15px; }
.bs-receipt-preview h3 { margin: 0 0 5px 0; font-size: 18px; font-weight: 700; text-transform: uppercase; }
.bs-receipt-preview p { margin: 2px 0; font-size: 12px; }

.bs-receipt-preview hr.dashed { border: none; border-top: 1px dashed #000; margin: 8px 0; }
.bs-receipt-preview hr.solid { border: none; border-top: 2px solid #000; margin: 8px 0; }

.bs-receipt-preview .meta { display: flex; justify-content: space-between; font-size: 11px; }

.bs-receipt-preview table { width: 100%; }
.bs-receipt-preview td { padding: 4px 0; vertical-align: top; }
.bs-receipt-preview .item-name { font-weight: 600; }
.bs-receipt-preview .item-price { text-align: right; }

.bs-receipt-preview .receipt-total { 
    display: flex; justify-content: space-between; 
    font-size: 1.4em; font-weight: 800; margin: 10px 0; 
}

.bs-receipt-preview .receipt-footer { text-align: center; margin-top: 15px; font-size: 12px; }

/* ==========================================================================
   STILE PULSANTE SCONTRINO
   ========================================================================== */

.bs-view-receipt-btn {
    background-color: var(--bs-primary-color) !important;
    border: 1px solid var(--bs-primary-color) !important;
    color: #ffffff !important;
    
    /* Eredita dimensioni da .button-small ma le forziamo per sicurezza */
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.15);
    opacity: 0.9;
    cursor: pointer;
}

.bs-view-receipt-btn:hover {
    background-color: var(--bs-primary-color-dark) !important;
    border-color: var(--bs-primary-color-dark) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    opacity: 1;
}

.bs-view-receipt-btn:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

.bs-view-receipt-btn i {
    font-size: 14px;
    color: #ffffff !important;
}

/* Badge Categoria Spesa */
.bs-cat-badge {
    background: #f3f4f6; 
    padding: 2px 8px; 
    border-radius: 4px; 
    font-size: 0.85em; 
    color: #4b5563; 
    border: 1px solid #e5e7eb;
    font-weight: 500;
    text-transform: capitalize;
}

/* ==========================================================================
   STILI MODULO FINANCIAL (Scadenzario & Costi) - BLOCCO COMPLETO vFinal
   ========================================================================== */

/* ==========================================================================
   FIX LAYOUT MODALI GLOBALE (Grid System)
   ========================================================================== */

/* Applica la griglia a 2 colonne a TUTTE le modali che usano questa classe */
.bs-modal .bs-form-grid-2-col {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 50% - 50% */
    gap: 20px;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 15px;
}

/* Responsive: su mobile torna a 1 colonna */
@media screen and (max-width: 600px) {
    .bs-modal .bs-form-grid-2-col {
        grid-template-columns: 1fr !important;
        gap: 15px;
    }
}

/* Forza gli input a occupare tutta la larghezza nelle griglie */
.bs-modal .bs-form-grid-2-col input,
.bs-modal .bs-form-grid-2-col select {
    width: 100% !important;
}

/* --- 2. FIX BARRA DEI FILTRI (Stile Uniforme) --- */
.bs-financial-management .bs-filters-row {
    display: flex;
    align-items: flex-end; /* Allinea in basso con il bottone */
    gap: 15px;
    flex-wrap: wrap;
}

.bs-financial-management .bs-filter-group {
    flex-grow: 1;
    min-width: 150px;
}

/* Stile Input e Select nei filtri */
.bs-financial-management input[type="text"],
.bs-financial-management select {
    height: 40px !important;
    width: 100% !important;
    border: 1px solid var(--bs-border-color) !important;
    border-radius: var(--bs-border-radius) !important;
    background-color: var(--bs-bg-white) !important;
    padding: 0 12px !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    display: flex;
    align-items: center;
}

/* Effetto Focus */
.bs-financial-management input[type="text"]:focus,
.bs-financial-management select:focus {
    border-color: var(--bs-primary-color) !important;
    box-shadow: 0 0 0 2px var(--bs-primary-color-light) !important;
    outline: none;
}

/* Pulsante "Filtra" (Colore Primario) */
#bs-exp-filter-btn {
    height: 40px !important;
    padding: 0 25px !important;
    background-color: var(--bs-primary-color) !important;
    border: 1px solid var(--bs-primary-color) !important;
    color: #ffffff !important;
    font-weight: 600;
    border-radius: var(--bs-border-radius);
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

#bs-exp-filter-btn:hover {
    background-color: var(--bs-primary-color-dark) !important;
    border-color: var(--bs-primary-color-dark) !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* --- 3. FIX TABELLA (Allineamento Desktop) --- */

/* Allineamento verticale celle generiche */
.bs-financial-table td {
    vertical-align: middle !important;
    padding: 12px 10px !important;
}

/* Intestazione Colonna Azioni: Allargata e Centrata */
.bs-financial-table th:last-child {
    text-align: center !important;
    width: 140px !important;     /* Larghezza sufficiente per i bottoni affiancati */
    min-width: 140px !important; /* Forza il browser a non stringerla */
    padding-right: 10px !important;
    box-sizing: border-box;
}

/* Cella Azioni: Flexbox Orizzontale Centrato */
.bs-financial-table td.bs-actions-cell {
    display: flex !important;
    flex-direction: row !important; /* Forza riga orizzontale */
    flex-wrap: nowrap !important;   /* Impedisce ai bottoni di andare a capo */
    justify-content: center !important; /* Centra nel mezzo della colonna */
    align-items: center !important;
    gap: 8px !important;            /* Spazio tra i bottoni */
    height: 100%;
    padding: 8px 10px !important;
    white-space: nowrap !important;
}

/* --- 4. STILE PULSANTI AZIONE (Quadrati e Compatti) --- */
.bs-financial-table .button-small {
    width: 36px !important;        /* Larghezza fissa quadrata */
    height: 36px !important;       /* Altezza fissa quadrata */
    padding: 0 !important;         /* Reset padding interno */
    
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    
    flex-shrink: 0 !important;     /* Non si schiacciano mai */
    
    border: none !important;
    border-radius: 6px !important;
    color: #fff !important;
    
    transition: transform 0.2s ease;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    margin: 0 !important;
}

.bs-financial-table .button-small:hover {
    transform: scale(1.1);
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* Icone dentro i pulsanti */
.bs-financial-table .button-small i {
    font-size: 14px !important;
    margin: 0 !important;
    line-height: 1 !important;
}

/* Colori Specifici Pulsanti */
.bs-mark-paid-btn {
    background-color: var(--bs-success-color) !important;
}
.bs-delete-expense-btn {
    background-color: var(--bs-error-color) !important;
}

/* Badge Stato Scaduto (Rosso lampeggiante) */
.bs-status-badge.bs-status-overdue {
    background-color: var(--bs-error-color);
    color: white;
    font-weight: bold;
    animation: pulse-red 2s infinite;
}

@keyframes pulse-red {
    0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); }
    70% { box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); }
    100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}

/* --- 5. RESPONSIVE (Mobile Cards) --- */
@media screen and (max-width: 782px) {
    
    /* Nascondi intestazione */
    .bs-financial-table thead { display: none; }
    
    /* Trasforma righe in card */
    .bs-financial-table tr {
        display: block; margin-bottom: 15px; background: #fff;
        border: 1px solid var(--bs-border-color-light); border-radius: 8px;
        box-shadow: 0 2px 5px rgba(0,0,0,0.05); padding: 0; overflow: hidden;
    }

    /* Celle come righe della card */
    .bs-financial-table td {
        display: flex; justify-content: space-between; align-items: center;
        text-align: right; padding: 12px 15px !important;
        border-bottom: 1px dashed #eee; font-size: 14px;
        height: auto !important;
        width: 100% !important; /* Reset larghezza fissa desktop */
    }
    
    .bs-financial-table td:last-child { border-bottom: none; }

    /* Etichette (Data Label) */
    .bs-financial-table td::before {
        content: attr(data-label);
        font-weight: 600; color: var(--bs-text-dark);
        text-align: left; margin-right: 15px;
    }

    /* Cella Azioni su Mobile: CENTRATA */
    .bs-financial-table td.bs-actions-cell {
        justify-content: center !important; /* Centrato orizzontalmente su mobile */
        background-color: #f9fafb;
        padding: 15px !important;
        gap: 15px !important; /* Più spazio tra i bottoni per le dita */
    }
    /* Nascondi label "Azioni" */
    .bs-financial-table td.bs-actions-cell::before { display: none; }

    /* Bottoni più grandi per il touch */
    .bs-financial-table .button-small {
        width: 44px !important; height: 44px !important; font-size: 18px !important;
    }
    
    /* Fix Layout Modale su Mobile (Impila colonne) */
    #bs-expense-modal .bs-form-grid-2-col { 
        grid-template-columns: 1fr !important; 
        gap: 15px; 
    }
}

/* ==========================================================================
   FIX LARGHEZZA CAMPI IMPORTO (Modali Appuntamento) - DEFINITIVO
   ========================================================================== */

/* Forza larghezza 100% specifica per gli ID dei campi importo */
#bs-add-appointment-modal #bs_add_amount_paid,
#bs-edit-appointment-modal #bs_edit_amount_paid {
    width: 100% !important;       /* Occupa tutta la colonna */
    min-width: 150px !important;  /* Larghezza minima garantita */
    max-width: 100% !important;   /* Rimuove limiti massimi di WP */
    box-sizing: border-box !important;
    padding: 0 12px !important;   /* Spazio interno per i numeri */
    height: 40px !important;      /* Altezza comoda */
    font-size: 15px !important;   /* Font leggibile */
    font-weight: 600 !important;  /* Grassetto per l'importo */
}

/* Regola generale di sicurezza per tutti gli input numerici e select nelle due modali */
#bs-add-appointment-modal input[type="number"],
#bs-edit-appointment-modal input[type="number"],
#bs-add-appointment-modal select,
#bs-edit-appointment-modal select {
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Assicuriamoci che il contenitore wrapper non stia stringendo il contenuto */
#bs_add_amount_paid_wrapper,
.bs-form-field {
    width: 100%;
}

/* ==========================================================================
   STILI PULSANTI ESPORTAZIONE & STAMPA (PDF) - vFinal
   ========================================================================== */

/* Stile Comune per i pulsanti "Documento" (PDF) */
#bs-export-financial-pdf-btn,
#bs-download-receipt-pdf-btn {
    /* Colore: Grigio Ardesia (Slate Grey) - Professionale e Neutro */
    background-color: #475569 !important; 
    border: 1px solid #475569 !important;
    color: #ffffff !important;
    
    font-weight: 600;
    padding: 8px 16px !important;
    border-radius: var(--bs-border-radius);
    
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    cursor: pointer;
}

/* Effetto Hover: Scurisce leggermente e si solleva */
#bs-export-financial-pdf-btn:hover,
#bs-download-receipt-pdf-btn:hover {
    background-color: #334155 !important; /* Grigio più scuro */
    border-color: #334155 !important;
    transform: translateY(-2px); /* Effetto sollevamento */
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

/* Assicura che le icone siano bianche */
#bs-export-financial-pdf-btn i,
#bs-download-receipt-pdf-btn i {
    color: #ffffff !important;
    font-size: 1.1em;
}

/* --- Stile specifico per il Tasto STAMPA (Modale Scontrino) --- */
/* Lo rendiamo coerente con il tasto PDF per dimensioni ed effetto hover */
#bs-print-receipt-btn {
    /* Mantiene il colore primario (Blu/Terracotta) definito nel tema */
    /* background-color: var(--bs-primary-color); (Già ereditato da .button-primary) */
    
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: 600;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

#bs-print-receipt-btn:hover {
    transform: translateY(-2px); /* Stesso effetto sollevamento del PDF */
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

/* ==========================================================================
   WIDGET UTENTE NELL'HEADER
   ========================================================================== */

.bs-header-user-info {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    margin-right: 15px; /* Spazio tra info e icone */
    line-height: 1.2;
}

.bs-header-user-name {
    font-size: 14px;
    font-weight: 600;
    color: #FFFFFF;
    letter-spacing: 0.3px;
}

.bs-header-user-role {
    font-size: 10px;
    text-transform: uppercase;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 700;
    margin-top: 2px;
    display: inline-block;
    letter-spacing: 0.5px;
}

/* Colori dei Ruoli */
.bs-role-admin {
    background-color: var(--bs-primary-color); /* Blu/Terracotta */
    color: #fff;
    border: 1px solid rgba(255,255,255,0.2);
}

.bs-role-staff {
    background-color: var(--bs-info-color); /* Ciano/Viola */
    color: #fff;
}

.bs-role-customer {
    background-color: var(--bs-success-color); /* Verde */
    color: #fff;
}

/* Responsive: Nascondi il testo su mobile per risparmiare spazio */
@media screen and (max-width: 600px) {
    .bs-header-user-info {
        display: none;
    }
}

/* ==========================================================================
   FIX LAYOUT MODALE OPERATORE (Input Provvigioni & Anagrafica)
   ========================================================================== */

/* Forza tutti gli input dentro la griglia a 2 colonne dell'operatore ad allargarsi */
#bs-manage-operator-modal .bs-form-grid-2-col input[type="text"],
#bs-manage-operator-modal .bs-form-grid-2-col input[type="email"],
#bs-manage-operator-modal .bs-form-grid-2-col input[type="tel"],
#bs-manage-operator-modal .bs-form-grid-2-col input[type="number"],
#bs-manage-operator-modal .bs-form-grid-2-col select {
    width: 100% !important;       /* Occupa tutta la colonna disponibile */
    max-width: 100% !important;   /* Rimuove limiti massimi di WP */
    min-width: 0 !important;      /* Rimuove limiti minimi che causano overflow */
    box-sizing: border-box !important;
    height: 40px !important;      /* Altezza comoda e uniforme */
    padding: 0 12px !important;   /* Spazio interno per i numeri */
    font-size: 14px !important;
}

/* Regola specifica di sicurezza per i campi provvigione */
#bs_operator_comm_s, 
#bs_operator_comm_p {
    width: 100% !important;
    text-align: right; /* Numeri allineati a destra sono più leggibili (opzionale) */
}

/* ==========================================================================
   STILE GIFT CARD (Voucher)
   ========================================================================== */
.bs-gift-voucher {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    color: #fff;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    position: relative;
    overflow: hidden;
    text-align: center;
    border: 2px solid #fbbf24; /* Oro */
    max-width: 400px;
    margin: 0 auto;
}

.bs-gift-voucher::before {
    content: '\f06b'; /* Icona regalo FontAwesome */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    top: -20px;
    left: -20px;
    font-size: 150px;
    color: rgba(255,255,255,0.05);
    transform: rotate(-20deg);
}

.bs-voucher-title {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #fbbf24; /* Oro */
    margin-bottom: 10px;
}

.bs-voucher-amount {
    font-size: 48px;
    font-weight: 800;
    line-height: 1;
    margin: 10px 0;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.bs-voucher-code {
    background: rgba(255,255,255,0.1);
    padding: 10px;
    border-radius: 6px;
    font-family: monospace;
    font-size: 18px;
    font-weight: bold;
    letter-spacing: 1px;
    margin: 20px 0;
    border: 1px dashed #fbbf24;
}

.bs-voucher-meta {
    font-size: 12px;
    color: #94a3b8;
}
.bs-voucher-shop {
    font-weight: bold;
    color: #fff;
    margin-top: 5px;
    display: block;
}

/* 1. Pulsante "Vendi Gift Card" nel POS */
.bs-gift-card-trigger-btn {
    background-color: #F59E0B !important; /* Ambra/Oro */
    border: 1px solid #F59E0B !important;
    color: white !important;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.2s ease;
    box-shadow: 0 2px 5px rgba(245, 158, 11, 0.3);
}
.bs-gift-card-trigger-btn:hover {
    background-color: #D97706 !important; /* Ambra scuro */
    border-color: #D97706 !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(245, 158, 11, 0.4);
}
.bs-gift-card-trigger-btn i { margin-right: 8px; font-size: 1.1em; }

/* 2. FIX CRITICO: Input Importo Modale Gift Card */
#bs-sell-gift-card-form input[type="number"]#bs_gift_amount {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 0 15px !important;
    height: 50px !important; /* Un po' più alto per importanza */
    font-size: 24px !important; /* Font grande */
    text-align: center;
}

/* Assicura che il contenitore non stringa */
#bs-gift-card-step-1 .bs-form-field {
    width: 100%;
}

/* Stile pulsanti preset (25€, 50€...) */
.bs-preset-amount {
    flex: 1;
    background-color: #fff !important;
    color: var(--bs-primary-color) !important;
    border: 1px solid var(--bs-primary-color) !important;
}
.bs-preset-amount:hover {
    background-color: var(--bs-primary-color-light) !important;
}


/* STILI SCHEDA TECNICA VISUALE */
.bs-marker-dot {
    position: absolute;
    width: 24px; height: 24px;
    background-color: var(--bs-error-color); /* Rosso */
    color: white;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: bold;
    transform: translate(-50%, -50%); /* Centra sul click */
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
    border: 2px solid white;
    cursor: pointer;
}

.bs-marker-row {
    display: flex; align-items: center; gap: 10px; margin-bottom: 8px;
}
.bs-marker-row .marker-num {
    background: var(--bs-error-color); color: white; width: 20px; height: 20px;
    border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: bold;
}
.bs-marker-row input {
    flex-grow: 1; padding: 5px 10px; border: 1px solid #ddd; border-radius: 4px; font-size: 13px;
}
.bs-marker-row .bs-remove-marker {
    color: #999; cursor: pointer; transition: color 0.2s;
}
.bs-marker-row .bs-remove-marker:hover { color: var(--bs-error-color); }

/* ==========================================================================
   STILI MODALE SCHEDA TECNICA (Pulsanti e Layout vFinal)
   ========================================================================== */

/* Griglia per i pulsanti template */
.bs-tech-buttons-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr; /* 3 Colonne uguali */
    gap: 15px;
    margin-bottom: 20px;
    align-items: stretch; /* Forza altezza uguale */
}

/* Stile unificato pulsanti scheda tecnica */
.bs-tech-buttons-grid .button,
.bs-tech-buttons-grid label.button {
    width: 100%;
    height: 42px; /* Altezza fissa comoda */
    box-sizing: border-box;
    
    display: flex;
    align-items: center;
    justify-content: center;
    
    font-weight: 600;
    text-transform: uppercase;
    font-size: 13px; /* Font più leggibile */
    letter-spacing: 0.5px;
    
    border: none;
    color: #fff !important;
    border-radius: 6px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
    margin: 0;
}

.bs-tech-buttons-grid .button:hover,
.bs-tech-buttons-grid label.button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    color: #fff;
}

.bs-tech-buttons-grid i {
    margin-right: 8px;
    font-size: 1.2em;
}

/* 1. Tasto FOTO (Antracite - Neutro/Tecnico) */
.bs-btn-upload {
    background-color: #374151 !important; 
}
.bs-btn-upload:hover { background-color: #1F2937 !important; }

/* 2. Tasto CORPO (Terracotta - Brand/Corpo) */
.bs-btn-template-body {
    background-color: #C8826D !important; 
}
.bs-btn-template-body:hover { background-color: #A86550 !important; }

/* 3. Tasto VISO (Verde Salvia - Viso/Delicato) */
.bs-btn-template-face {
    background-color: #5D9C5B !important; 
}
.bs-btn-template-face:hover { background-color: #437A41 !important; }

/* Fix area immagine */
#bs-tech-image-container {
    user-select: none;
    background-color: #ffffff; /* Sfondo bianco per vedere meglio le sagome */
    border: 2px dashed #e5e7eb; /* Bordo tratteggiato quando vuoto */
}

/* Fix Modale Tech Sheet Responsive */
@media screen and (max-width: 900px) {
    .bs-tech-layout-grid {
        grid-template-columns: 1fr !important; /* Impila tutto */
        gap: 20px;
    }
    
    #bs-tech-image-container {
        height: 350px !important; /* Un po' più basso su mobile */
    }
    
    .bs-tech-data-col {
        order: 2; /* Dati sotto l'immagine */
    }
}

/* ==========================================================================
   STILE PULSANTE "VEDI" SCHEDA TECNICA
   ========================================================================== */

.bs-view-tech-btn {
    background-color: var(--bs-primary-color) !important; /* Colore del brand */
    border: 1px solid var(--bs-primary-color) !important;
    color: #ffffff !important; /* Testo bianco */
    
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 11px !important;
    
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: all 0.2s ease;
    cursor: pointer;
}

/* Effetto Hover */
.bs-view-tech-btn:hover {
    background-color: var(--bs-primary-color-dark) !important; /* Colore più scuro */
    border-color: var(--bs-primary-color-dark) !important;
    transform: translateY(-2px); /* Si solleva */
    box-shadow: 0 4px 8px rgba(0,0,0,0.15); /* Ombra più profonda */
    color: #ffffff !important;
}

/* Assicura che l'icona interna sia bianca */
.bs-view-tech-btn i {
    color: #ffffff !important;
}






/* ==========================================================================
   RESTYLING CARD APPUNTAMENTO (v6 - Premium White Text & Overlay & Clean)
   ========================================================================== */

.bs-daily-planner .bs-appointment-card {
    position: absolute;
    left: 2px;
    right: 4px;
    
    /* Design Base */
    border: 1px solid rgba(0,0,0,0.1);
    
    /* MODIFICA: Bordo sinistro ora usa il colore Operatore */
    border-left: 5px solid var(--operator-color, #6B7280) !important;
    
    border-radius: 4px;
    padding: 2px 6px;
    box-sizing: border-box;
    
    /* Il background-color verrà settato inline via PHP/JS con il colore del Servizio */
    
    /* Tipografia Base (Card Chiusa) */
    font-family: var(--bs-font-family);
    font-size: 12px; 
    color: #ffffff; 
    text-shadow: 0 1px 2px rgba(0,0,0,0.5); /* Ombra leggermente ridotta */
    font-weight: 500;
    
    overflow: hidden;
    cursor: pointer;
    z-index: 10;
    transition: all 0.15s ease-in-out;
    box-shadow: 0 2px 4px rgba(0,0,0,0.15);

    display: flex;
    flex-direction: column;
}

/* Hover: Si solleva leggermente */
.bs-daily-planner .bs-appointment-card:hover {
    z-index: 50;
    transform: translateY(-1px) scale(1.01);
    box-shadow: 0 8px 20px rgba(0,0,0,0.25);
}

/* --- HEADER RIGA SINGOLA (Layout Flex Aggiornato) --- */
.bs-card-header-line {
    display: flex;
    align-items: center; 
    justify-content: space-between;
    width: 100%;
    height: 100%;
    min-height: 20px;
    gap: 6px;
}

/* Contenitore del testo principale (Ora | Cliente - Servizio) */
.bs-card-header-text {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    flex-grow: 1; /* Occupa tutto lo spazio disponibile prima delle icone */
    font-size: 14px;
    color: rgba(255, 255, 255, 0.95);
    line-height: 1.3;
}

/* Stili specifici per le parti del testo */
.bs-header-time {
    font-weight: 800; /* Molto grassetto per l'orario */
    margin-right: 4px;
}

.bs-header-sep {
    opacity: 0.6;
    margin: 0 4px;
    font-weight: 300;
}

.bs-header-client {
    font-weight: 700; /* Grassetto */
    margin: 0 2px;
    /* Assicurati che non sia hidden */
    display: inline; 
}

.bs-header-service {
    opacity: 1;
    font-weight: 500;
    font-style: italic;
}

/* Gruppo Destra: Icone Semaforo (Invariato, ma assicuriamo che non si schiacci) */
.bs-card-icons-stack {
    display: flex;
    align-items: center;
    gap: 3px;
    flex-shrink: 0; 
}

.bs-mini-icon {
    width: 20px;  /* Più Grandi */
    height: 20px; /* Più Grandi */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3); /* Ombra per staccare dallo sfondo */
    border: 1px solid rgba(255,255,255,0.4);
    text-shadow: none; /* Nessuna ombra testo dentro l'icona */
}

/* Colori Semaforo */
.bs-icon-paid { background-color: #10B981; /* Verde */ }
.bs-icon-unpaid { background-color: #F59E0B; /* Giallo/Arancio */ }
.bs-icon-notes { background-color: #3B82F6; /* Blu */ }
.bs-icon-recurring { background-color: #8B5CF6; /* Viola */ }


/* --- CONTENUTO ESPANSO (Collapsible) --- */
.bs-daily-planner .bs-appointment-card.is-expanded {
    height: auto !important;
    min-height: 160px; /* Aumentato leggermente */
    z-index: 100;
    overflow: visible;
    
    /* MODIFICA CHIAVE: Aggiungiamo molto padding in fondo */
    /* Questo crea lo spazio bianco dedicato esclusivamente al pulsante chevron */
    padding-bottom: 50px !important; 
    
    box-shadow: 0 10px 30px rgba(0,0,0,0.25); /* Ombra più profonda quando aperto */
}

.bs-card-collapsible-content {
    display: none; /* Nascosto di default */
    margin-top: 8px;
    background-color: #ffffff; /* Sfondo Bianco Pulito */
    border-radius: 6px; /* Angoli arrotondati interni */
    padding: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15); /* Ombra interna */
    color: #333; /* Testo scuro su fondo bianco */
    text-shadow: none; /* Rimuovi ombra testo */
    cursor: default;
    border: 1px solid #f3f4f6;
}

/* Nome Servizio in Dettaglio */
.bs-card-service-full {
    font-size: 13px;
    font-weight: 600;
    color: var(--bs-text-light);
    margin-bottom: 10px;
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 5px;
}

/* Griglia Dettagli (Prezzo e Durata Grandi) */
.bs-card-details-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 10px;
}

.bs-detail-box {
    background-color: #f9fafb;
    border-radius: 6px;
    padding: 8px;
    text-align: center;
    border: 1px solid #e5e7eb;
}

.bs-detail-box i {
    color: var(--bs-primary-color);
    font-size: 14px;
    margin-bottom: 2px;
    display: block;
}

.bs-detail-value {
    font-size: 15px; /* Grande */
    font-weight: 800;
    color: var(--bs-text-dark);
    display: block;
}

/* Badge Prezzo Evidenziato */
.bs-detail-box.price-box .bs-detail-value {
    color: #059669; /* Verde scuro */
}


/* Note (Stile Post-it pulito) */
.bs-card-full-notes {
    background-color: #fffbeb;
    border: 1px solid #fcd34d;
    color: #92400e;
    padding: 8px;
    border-radius: 4px;
    font-size: 12px;
    font-style: italic;
    margin-bottom: 10px;
    line-height: 1.4;
}

/* Footer Azioni */
.bs-card-actions {
    display: flex;
    gap: 5px;
    justify-content: space-between;
}
.bs-card-actions .button {
    flex-grow: 1;
    justify-content: center;
    padding: 6px !important;
    font-size: 12px !important;
}

/* --- Toggle Button (Freccina) - RESTYLING --- */
.bs-card-expand-toggle {
    position: absolute;
    bottom: 2px; 
    right: 2px;
    width: 24px;
    height: 24px;
    display: flex; 
    align-items: center; 
    justify-content: center;
    background: transparent;
    color: rgba(255,255,255,0.95);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
    z-index: 200;
}

.bs-card-expand-toggle:hover { 
    background-color: rgba(255,255,255,0.2);
    transform: scale(1.1);
}

/* --- STILE BOTTONE QUANDO LA CARD È APERTA --- */
.bs-daily-planner .bs-appointment-card.is-expanded .bs-card-expand-toggle {
    display: flex !important;
    transform: rotate(180deg);
    
    /* Posizionamento più evidente */
    bottom: 6px !important; 
    right: 50% !important; /* Centrato orizzontalmente */
    margin-right: -15px;   /* Compensazione per centratura perfetta (metà larghezza) */
    
    /* Design "Bottone Solido" per alta visibilità */
    width: 30px !important;
    height: 30px !important;
    background-color: #f3f4f6 !important; /* Grigio chiaro */
    color: var(--bs-text-dark) !important;
    border: 1px solid #d1d5db;
    box-shadow: 0 2px 5px rgba(0,0,0,0.15); /* Ombra per staccarlo */
}

/* Hover quando aperto */
.bs-daily-planner .bs-appointment-card.is-expanded .bs-card-expand-toggle:hover {
    background-color: var(--bs-primary-color) !important;
    color: white !important;
    border-color: var(--bs-primary-color);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    transform: rotate(180deg) scale(1.1);
}

/* ==========================================================================
   STILI SETTINGS LAYOUT V2 (Card & Sidebar)
   ========================================================================== */

.bs-settings-header {
    margin-bottom: 30px;
    border-bottom: 1px solid var(--bs-border-color);
    padding-bottom: 15px;
}
.bs-settings-header h2 { margin-bottom: 5px; border: none; }
.bs-settings-subtitle { color: var(--bs-text-light); font-size: 14px; margin: 0; }

/* Layout Griglia */
.bs-settings-layout {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 30px;
    align-items: start;
    position: relative;
}

/* Sidebar Navigazione */
.bs-settings-sidebar {
    position: sticky;
    top: 90px; /* Distanza dall'header */
}

.bs-settings-nav {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--bs-border-color-light);
    border-radius: var(--bs-border-radius);
    overflow: hidden;
    box-shadow: var(--bs-box-shadow);
}

.bs-nav-link {
    padding: 12px 15px;
    font-size: 14px;
    color: var(--bs-text-light);
    text-decoration: none;
    border-left: 3px solid transparent;
    border-bottom: 1px solid var(--bs-bg-light);
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 10px;
}
.bs-nav-link:last-child { border-bottom: none; }
.bs-nav-link:hover { background-color: var(--bs-bg-light); color: var(--bs-text-dark); }
.bs-nav-link.active {
    background-color: var(--bs-primary-color-light);
    color: var(--bs-primary-color-dark);
    border-left-color: var(--bs-primary-color);
    font-weight: 600;
}
.bs-nav-link i { width: 18px; text-align: center; }

/* Cards Contenuto */
.bs-settings-card {
    background-color: #fff;
    border: 1px solid var(--bs-border-color-light);
    border-radius: var(--bs-border-radius-large);
    box-shadow: var(--bs-box-shadow);
    margin-bottom: 30px;
    scroll-margin-top: 100px; /* Per lo scroll smooth corretto */
}

.bs-card-header {
    padding: 15px 20px;
    border-bottom: 1px solid var(--bs-border-color-light);
    background-color: #fcfcfc;
    border-radius: var(--bs-border-radius-large) var(--bs-border-radius-large) 0 0;
}
.bs-card-header h3 { margin: 0; font-size: 16px; font-weight: 600; }
.bs-card-header p { margin: 2px 0 0; font-size: 12px; color: var(--bs-text-light); }

.bs-card-body {
    padding: 20px;
}

/* Form Fields Styling */
.bs-input-desc {
    font-size: 12px; color: var(--bs-text-light); margin-top: 5px; line-height: 1.4;
}
.bs-settings-box-gray {
    background-color: var(--bs-bg-light); padding: 15px;
    border-radius: var(--bs-border-radius); border: 1px dashed var(--bs-border-color);
}
.bs-switch-row {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid #eee;
}
.bs-switch-row:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }

/* Sezione Automation */
.bs-automation-row {
    display: flex; gap: 15px; padding: 15px; border: 1px solid var(--bs-border-color-light);
    border-radius: 6px; margin-bottom: 15px; align-items: center;
    background-color: #fff;
}
.bs-auto-header {
    flex: 1; display: flex; align-items: center; gap: 15px;
}
.bs-auto-header i { font-size: 1.5em; }
.bs-auto-options {
    display: flex; align-items: center; gap: 8px; font-size: 13px;
    background: var(--bs-bg-light); padding: 8px 12px; border-radius: 4px;
}

/* Responsive */
@media screen and (max-width: 900px) {
    .bs-settings-layout { grid-template-columns: 1fr; }
    .bs-settings-sidebar { display: none; /* Nascondi sidebar su mobile, troppo ingombrante */ }
    .bs-automation-row { flex-direction: column; align-items: stretch; }
}

/* ==========================================================================
   MODALI TRASCINABILI
   ========================================================================== */

/* Cambia il cursore sul titolo per indicare che si può spostare */
/* Cambia il cursore SOLO per le modali classiche (non drawer) */
.bs-modal:not(.bs-drawer-modal) .bs-modal-content h2 {
    cursor: move;
    user-select: none;
}

/* Assicura che i Drawer abbiano il cursore normale */
.bs-modal.bs-drawer-modal .bs-modal-content h2 {
    cursor: default;
}

/* Assicuriamoci che il titolo copra tutta la larghezza per una presa facile */
.bs-modal-content h2 {
    display: flex;
    align-items: center;
    /* Le altre proprietà esistenti (border-bottom, margin, ecc.) rimangono valide */
}


/* ==========================================================================
   FIX MODALI SCROLLABILI (Sticky Header/Footer)
   ========================================================================== */

/* 1. Contenitore Principale Modale */
.bs-modal-content {
    background-color: var(--bs-bg-white);
    margin: 2% auto; /* Margine ridotto per sfruttare altezza su schermi piccoli */
    width: 90%;
    max-width: 650px;
    border-radius: var(--bs-border-radius-large);
    position: relative;
    box-shadow: var(--bs-box-shadow-lg);
    
    /* --- NUOVO LAYOUT FLEX PER SCROLL INTERNO --- */
    display: flex;
    flex-direction: column;
    max-height: 90vh; /* Altezza massima: 90% della finestra */
    padding: 0; /* Rimuoviamo il padding globale per gestirlo nelle sezioni */
    overflow: hidden; /* Nasconde scrollbar esterne */
}

.bs-modal-content.bs-modal-large {
    max-width: 850px;
}

/* 2. Header Fisso (Titolo) - Sempre visibile per il Drag */
.bs-modal-content h2 {
    margin: 0;
    padding: 20px 25px; /* Padding spostato qui */
    flex-shrink: 0; /* Non si rimpicciolisce mai */
    background-color: var(--bs-bg-white);
    border-bottom: 1px solid var(--bs-border-color-light);
    z-index: 10;
}

/* Posizionamento Tasto Chiudi */
.bs-modal-close {
    position: absolute;
    top: 15px;
    right: 15px;
    background: transparent;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: #94a3b8;
    transition: color 0.2s;
    z-index: 11;
}

.bs-modal-close:hover {
    color: #1e293b;
}

/* 3. Area Contenuto Scrollabile */
/* Applica lo scroll a qualsiasi form o div principale dentro la modale */
.bs-modal-content > form, 
.bs-modal-content > div:not(.bs-modal-close):not(h2):not(.bs-modal-tabs),
.bs-modal-tab-content {
    overflow-y: auto; /* Abilita lo scroll verticale qui */
    padding: 10px;    /* Padding interno del contenuto */
    flex-grow: 1;     /* Occupa tutto lo spazio disponibile */
    
    /* Scrollbar elegante */
    scrollbar-width: thin;
    scrollbar-color: rgba(0,0,0,0.2) transparent;
}

/* Webkit Scrollbar (Chrome/Safari) */
.bs-modal-content > form::-webkit-scrollbar,
.bs-modal-tab-content::-webkit-scrollbar {
    width: 6px;
}
.bs-modal-content > form::-webkit-scrollbar-thumb,
.bs-modal-tab-content::-webkit-scrollbar-thumb {
    background-color: rgba(0,0,0,0.2);
    border-radius: 3px;
}

/* 4. Fix specifico per la Modale Operatore (che ha le TAB) */
.bs-modal-tabs {
    margin: 0 !important; /* Reset margini negativi precedenti */
    padding: 0 25px;
    background-color: #f9fafb;
    border-bottom: 1px solid var(--bs-border-color);
    flex-shrink: 0; /* Le tab rimangono fisse in alto */
}

.bs-modal-tab-content .bs-tab-pane {
    padding-bottom: 10px;
}

/* 5. Footer Azioni "Sticky" (Opzionale ma consigliato) */
/* Se vuoi che i pulsanti stiano sempre in fondo visibili */
.bs-modal .bs-form-actions {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--bs-border-color-light);
    /* background: white; position: sticky; bottom: -25px; margin-bottom: -25px; padding-bottom: 25px; z-index: 5; */
}

/* ==========================================================================
   STILI CARD NOTE / ECCEZIONI NEL PLANNER (Stile Post-it v2)
   ========================================================================== */

.bs-planner-note {
    position: absolute;
    left: 2px;
    right: 4px;
    border-radius: 6px; /* Angoli più morbidi */
    padding: 3px 5px;   /* Padding interno ridotto per massimizzare spazio */
    box-sizing: border-box;
    font-family: var(--bs-font-family);
    font-size: 14px;
    font-weight: 800 !important;
    line-height: 1.2;
    overflow: hidden;
    cursor: pointer;
    z-index: 8; /* Sotto gli appuntamenti (10) */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    
    /* Layout Flex per distribuire il contenuto */
    display: flex;
    flex-direction: column;
    justify-content: center;
    
    transition: all 0.15s ease;
    border-left-width: 4px;
    border-left-style: solid;
    justify-content: flex-start; 
    padding-top: 6px;
}

.bs-planner-note:hover {
    z-index: 50;
    transform: scale(1.02);
    box-shadow: 0 6px 12px rgba(0,0,0,0.15);
}

/* --- VARIANTE PAUSA/CHIUSURA (Grigio/Blu) --- */
.bs-note-type-break {
    background-color: #64748b; /* Slate 500 */
    border-left-color: #334155; /* Slate 700 */
    color: rgba(255,255,255,0.9);
    
    /* Pattern rigato per indicare "non disponibile" */
    background-image: repeating-linear-gradient(
        -45deg,
        transparent,
        transparent 5px,
        rgba(255, 255, 255, 0.1) 5px,
        rgba(255, 255, 255, 0.1) 10px
    );
}

/* Stile del testo interno per Pausa */
.bs-note-type-break .bs-note-text {
    background-color: #f1f5f9; /* Slate 100 (Grigio chiarissimo) */
    color: #1e293b; /* Testo scuro */
    border: 1px solid #cbd5e1;
}


/* --- VARIANTE NOTA/REMINDER (Giallo/Post-it) --- */
.bs-note-type-reminder {
    background-color: #f59e0b; /* Amber 500 */
    border-left-color: #b45309; /* Amber 700 */
    color: rgba(255,255,255,0.95);
}

/* Stile del testo interno per Nota (Effetto Post-it) */
.bs-note-type-reminder .bs-note-text {
    background-color: #fffbeb; /* Amber 50 (Giallino carta) */
    color: #78350f; /* Amber 900 (Marrone scuro) */
    border: 1px solid #fcd34d; /* Amber 300 */
}


/* --- ELEMENTI INTERNI --- */

.bs-note-time {
    font-size: 1em;
    font-weight: 800;
    margin-bottom: 3px;
    white-space: nowrap;
    opacity: 0.95;
    /* L'orario rimane del colore del testo del container (bianco) per contrasto col fondo scuro */
}

.bs-note-text {
    display: block;
    padding: 2px 5px;
    border-radius: 3px;
    font-weight: 700;
    font-size: 1em;
    text-align: center;
    
    /* Gestione testo lungo */
    white-space: normal; /* Permette a capo */
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: 100%; /* Non uscire dal box */
    
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.bs-note-icon {
    position: absolute;
    top: 2px;
    right: 2px;
    font-size: 0.85em;
    opacity: 0.6;
}

/* Stile Compatto (Per note piccole, es. 15 min) */
.bs-planner-note.is-compact {
    justify-content: center; /* Centra tutto */
    padding: 1px;
}

/* Nascondi orario e icona SOLO se c'è la classe is-compact */
.bs-planner-note.is-compact .bs-note-time,
.bs-planner-note.is-compact .bs-note-icon {
    display: none;
}

/* Adatta il testo nella versione compatta */
.bs-planner-note.is-compact .bs-note-text {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    font-size: 10px;
    white-space: nowrap;
}

/* --- SELETTORE TIPO ECCEZIONE (Modale) --- */
.bs-exception-type-selector {
    display: flex;
    gap: 10px;
}

.bs-type-option {
    flex: 1;
    cursor: pointer;
    margin: 0 !important; /* Reset margini label */
}

.bs-type-option input {
    display: none; /* Nascondi il pallino radio vero */
}

.bs-type-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px;
    border: 2px solid #e5e7eb;
    border-radius: 6px;
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    color: var(--bs-text-light);
    transition: all 0.2s ease;
    height: 100%;
}

.bs-type-card i {
    font-size: 1.4em;
    margin-bottom: 5px;
    display: block;
}

/* Stati Attivi (Selected) */
.bs-type-option input:checked + .bs-type-card {
    border-color: var(--bs-primary-color);
    background-color: #f0f9ff;
    color: var(--bs-primary-color-dark);
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* Colori specifici per tipo quando attivi */
.bs-type-option input[value="break"]:checked + .bs-type-card {
    border-color: var(--bs-secondary-color);
    background-color: #f1f5f9;
    color: var(--bs-secondary-color-dark);
}

.bs-type-option input[value="note"]:checked + .bs-type-card {
    border-color: #f59e0b; /* Giallo */
    background-color: #fffbeb;
    color: #b45309;
}

.bs-type-option input[value="extra"]:checked + .bs-type-card {
    border-color: #10b981; /* Verde */
    background-color: #ecfdf5;
    color: #047857;
}

/* ==========================================================================
   FIX LAYOUT MODALE NOTE/PAUSE (v3 - Ultra Compatto & Fixed)
   ========================================================================== */

/* 1. Allarga la modale */
#bs-manage-exception-modal .bs-modal-content {
    max-width: 800px !important;
    width: 90% !important;
    padding: 20px 25px !important;
    overflow: visible !important; /* Tenta di rimuovere scrollbar */
    min-height: 850px;
}

/* Titolo più compatto */
#bs-manage-exception-modal h2 {
    margin-bottom: 15px !important;
    padding-bottom: 10px !important;
    font-size: 18px;
}

/* 2. Griglia Form Principale */
#bs-manage-exception-form {
    display: grid;
    grid-template-columns: 30% 68%; /* 30% Operatore, 68% Date (2% gap) */
    gap: 2%; 
    align-items: start;
}

/* --- RIGA 1: OPERATORE (Sinistra) --- */
#bs-manage-exception-form .bs-form-field:has(#bs_exception_operator_id) {
    grid-column: 1 / 2;
    margin-bottom: 0 !important;
}

/* Forza larghezza select */
#bs_exception_operator_id {
    width: 100% !important;
    height: 38px !important;
}

/* --- RIGA 1: DATE (Destra) --- */
/* Selettore specifico per il contenitore delle due date */
#bs-manage-exception-form .bs-form-grid-2-col:has(#bs_exception_start_date) {
    grid-column: 2 / 3;
    display: flex !important; /* Usa Flex invece di Grid per sicurezza */
    gap: 15px;
    margin-bottom: 0 !important;
    align-items: flex-end;
}

/* I due campi data occupano il 50% ciascuno */
#bs-manage-exception-form .bs-form-grid-2-col:has(#bs_exception_start_date) .bs-form-field {
    flex: 1;
    margin-bottom: 0 !important;
    min-width: 0; /* Previene overflow */
}

#bs_exception_start_date,
#bs_exception_end_date {
    width: 100% !important;
    height: 38px !important;
}


/* --- RIGA 2: CHECKBOX "Intera Giornata" --- */
#bs-manage-exception-form .bs-form-field:has(#bs_exception_all_day) {
    grid-column: 1 / -1; /* Tutta larghezza */
    margin-top: 10px;
    margin-bottom: 0 !important;
    background: #f8fafc;
    padding: 8px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
}
#bs-manage-exception-form label:has(#bs_exception_all_day) {
    margin: 0; cursor: pointer; display: flex; align-items: center; font-weight: 600;
}
#bs_exception_all_day { margin-right: 10px; transform: scale(1.2); }


/* --- RIGA 3: ORARI (Visibili solo se deselezionato) --- */
#bs-manage-exception-form #bs_exception_time_fields {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 20px;
    background: #fffbeb;
    border: 1px solid #fcd34d;
    border-radius: 4px;
    padding: 10px 15px;
    margin-top: 5px !important;
    margin-bottom: 5px !important;
}
/* Input orario */
#bs_exception_start_time, #bs_exception_end_time {
    width: 100px !important;
    height: 36px !important;
    background: #fff;
}


/* --- RIGA 4: TIPOLOGIA (Card) --- */
#bs-manage-exception-form .bs-form-field:has(.bs-exception-type-selector) {
    grid-column: 1 / -1 !important;
    margin-top: 15px;
    margin-bottom: 5px !important;
}

.bs-exception-type-selector {
    display: flex;
    gap: 15px;
    width: 100%;
}

.bs-type-option {
    flex: 1;
    margin: 0 !important;
    cursor: pointer;
    position: relative;
}

/* Nasconde il radio button nativo */
.bs-type-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

/* STILE CARD BASE (Non selezionata) */
#bs-manage-exception-modal .bs-type-card {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    
    width: 100%;
    height: 46px !important;
    padding: 0 15px !important;
    
    border: 1px solid #d1d5db; /* Bordo grigio base */
    border-radius: 6px;
    background-color: #ffffff; /* Sfondo bianco base */
    
    font-size: 13px !important;
    font-weight: 600;
    color: #64748b; /* Testo grigio base */
    transition: all 0.2s ease;
    box-sizing: border-box;
}

#bs-manage-exception-modal .bs-type-card i {
    font-size: 16px !important;
    margin: 0 !important;
    line-height: 1 !important;
}

/* --- STATI ATTIVI (SELEZIONATI) - Specificità aumentata --- */

/* 1. PAUSA (Grigio Scuro) */
#bs-manage-exception-form .bs-type-option input[value="break"]:checked + .bs-type-card {
    background-color: #f1f5f9 !important;
    border-color: #64748b !important;
    color: #334155 !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    border-width: 2px;
}

/* 2. NOTA (Giallo/Ambra) */
#bs-manage-exception-form .bs-type-option input[value="note"]:checked + .bs-type-card {
    background-color: #fffbeb !important;
    border-color: #f59e0b !important;
    color: #b45309 !important;
    box-shadow: 0 2px 5px rgba(245, 158, 11, 0.15);
    border-width: 2px;
}

/* 3. EXTRA (Verde) */
#bs-manage-exception-form .bs-type-option input[value="extra"]:checked + .bs-type-card {
    background-color: #ecfdf5 !important;
    border-color: #10b981 !important;
    color: #047857 !important;
    box-shadow: 0 2px 5px rgba(16, 185, 129, 0.15);
    border-width: 2px;
}


/* --- RIGA 5: MOTIVO --- */
#bs-manage-exception-form .bs-form-field:has(#bs_exception_reason) {
    grid-column: 1 / -1;
    margin-bottom: 0 !important;
}
#bs_exception_reason { width: 100%; height: 38px !important; }


/* --- FOOTER --- */
#bs-manage-exception-form .bs-form-actions {
    grid-column: 1 / -1;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #eee;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

/* --- RESPONSIVE --- */
@media (max-width: 768px) {
    #bs-manage-exception-form { grid-template-columns: 1fr; gap: 10px; }
    #bs-manage-exception-form .bs-form-field, 
    #bs-manage-exception-form .bs-form-grid-2-col:has(#bs_exception_start_date) {
        grid-column: 1 / -1 !important;
    }
    .bs-exception-type-selector { flex-direction: column; }
}

/* ==========================================================================
   FIX VISIBILITÀ MESSAGGI ERRORE (Modale Note)
   ========================================================================== */

/* Forza il box feedback a occupare tutte le 12 colonne della griglia */
#bs-manage-exception-form .bs-form-feedback {
    grid-column: 1 / -1 !important; /* Da inizio a fine riga */
    width: 100%;
    margin-top: 15px;
    text-align: center; /* Testo centrato per maggiore visibilità */
    box-sizing: border-box;
    font-weight: 600;
    font-size: 14px;
}




/* ==========================================================================
   STILI PANNELLO LATERALE (DRAWER) - Slide from Right
   ========================================================================== */

/* 1. Container esterno (Overlay) */
.bs-modal.bs-drawer-modal {
    padding: 0 !important;
    display: none; /* Gestito da JS */
    justify-content: flex-end; /* Allinea a destra */
    align-items: flex-start;
    overflow: hidden; /* Niente scroll sull'overlay */
}

/* 2. Contenuto (Il Pannello Laterale) */
.bs-modal.bs-drawer-modal .bs-modal-content {
    position: fixed;
    right: -750px; /* Nascosto a destra */
    
    /* TOP viene gestito dal JS, ma mettiamo un fallback */
    top: 0; 
    /* BOTTOM 0 forza l'estensione fino alla fine della finestra */
    bottom: 0 !important; 
    
    width: 700px;
    max-width: 80vw;
    
    /* Altezza automatica basata su top e bottom ancorati */
    height: auto !important; 
    max-height: none !important; /* Rimuove limiti precedenti */
    
    margin: 0 !important;
    border-radius: 0 !important; /* Squadrato */
    border: none;
    border-left: 1px solid var(--bs-border-color);
    
    box-shadow: -5px 0 30px rgba(0,0,0,0.2);
    transition: right 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    
    display: flex;
    flex-direction: column;
    z-index: 1055;
}

/* Fix per assicurare che la Control Bar stia SOPRA l'overlay scuro */
.bs-main-controls {
    z-index: 1060 !important; /* Più alto della modale per restare visibile e "ancoraggio" */
    position: sticky;
    top: 0;
}

/* L'overlay scuro deve stare sotto la control bar ma sopra il contenuto */
.bs-modal.bs-drawer-modal {
    z-index: 1050; 
    padding-top: 0 !important; /* Rimuove padding per permettere calcoli precisi */
}

/* Stato Aperto (Classe aggiunta via JS) */
.bs-modal.bs-drawer-modal.is-open .bs-modal-content {
    right: 0; /* Scivola dentro */
}

/* Responsive Mobile */
@media screen and (max-width: 768px) {
    .bs-modal.bs-drawer-modal .bs-modal-content {
        width: 100%;
        max-width: 100%;
        /* Su mobile copre tutto, calcoleremo il top diversamente */
    }
}

/* ==========================================================================
   FIX SELECT2 IN MODALI / DRAWER
   ========================================================================== */

/* Forza la larghezza al 100% ignorando i calcoli inline di JS */
.bs-modal .select2-container {
    width: 100% !important;
    display: block; /* Assicura che prenda la riga */
}

.bs-modal .select2-container .select2-selection--single {
    width: 100% !important;
    height: 40px !important; /* Altezza coerente con gli altri input */
    display: flex !important;
    align-items: center;
    box-sizing: border-box;
}

.bs-modal .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 38px !important; /* Centratura testo verticale */
    padding-left: 12px !important;
}

.bs-modal .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 38px !important; /* Centratura freccia */
    top: 1px !important;
}


/* ==========================================================================
   FIX Z-INDEX HEADER & DROPDOWN (Sovrapposizione Control Bar)
   ========================================================================== */

/* 1. Alza il livello dell'Header principale */
.bs-dashboard-top-header {
    position: relative;
    /* Deve essere superiore alla .bs-main-controls (che di solito è 1000 o 1060) */
    z-index: 2000 !important; 
}

/* 2. Alza il livello del contenitore delle icone a destra */
.bs-header-actions-right {
    position: relative;
    z-index: 2001 !important;
}

/* 3. Alza il livello del menu a tendina stesso */
.bs-header-dropdown {
    z-index: 2002 !important;
    /* Assicura che l'ombra si veda sopra la barra sottostante */
    box-shadow: 0 10px 25px rgba(0,0,0,0.15) !important;
}

/* 4. Assicura che la Control Bar stia sotto */
.bs-main-controls {
    z-index: 1060 !important; 
}


/* ==========================================================================
   STILI MODALE ADMIN: MULTI-SERVICE & SMART CART
   ========================================================================== */

/* Griglia Mattoncini Servizi */
.bs-admin-services-grid {
    display: grid;
    /* Adatta automaticamente le colonne: minimo 140px, massimo quante ne stanno */
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
    max-height: 300px;
    overflow-y: auto;
    padding: 5px;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    background-color: #f8fafc;
    margin-bottom: 20px;
}

/* Stile Mattoncino Singolo */
.bs-admin-service-brick {
    background-color: #ffffff;
    border: 1px solid var(--bs-border-color);
    border-left: 4px solid var(--svc-color, #ccc);
    border-radius: 6px;
    padding: 10px;
    cursor: pointer;
    transition: all 0.15s ease-in-out;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 70px;
    user-select: none;
}

.bs-admin-service-brick:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}

/* Stato Selezionato */
.bs-admin-service-brick.selected {
    border-color: var(--bs-primary-color);
    background-color: #eff6ff; /* Blu chiarissimo */
    box-shadow: 0 0 0 1px var(--bs-primary-color);
}

.bs-admin-service-brick.selected::after {
    content: '\f00c'; /* FontAwesome Check */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    top: 5px;
    right: 5px;
    color: var(--bs-primary-color);
    font-size: 12px;
}

.bs-asb-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--bs-text-dark);
    line-height: 1.2;
    margin-bottom: 5px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.bs-asb-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    color: var(--bs-text-light);
}

.bs-asb-price { font-weight: 700; color: var(--bs-text-dark); }

/* Box Riepilogo Ordine (Cart in Modale) */
.bs-admin-cart-summary {
    background-color: #fff;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    padding: 15px;
    margin-bottom: 20px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}

.bs-cart-item-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px dashed #eee;
    font-size: 13px;
}
.bs-cart-item-row:last-child { border-bottom: none; }

.bs-cart-item-details { display: flex; flex-direction: column; }
.bs-cart-item-name { font-weight: 600; color: var(--bs-text-dark); }
.bs-cart-item-badge { font-size: 10px; display: inline-block; margin-top: 2px; }

/* Badge Pacchetto */
.bs-badge-package {
    background-color: #dcfce7; color: #166534; padding: 2px 6px; border-radius: 4px; font-weight: 700;
}

.bs-cart-total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 2px solid #eee;
    font-size: 16px;
    font-weight: 800;
    color: var(--bs-text-dark);
}

/* ==========================================================================
   STILE RIEPILOGO CARRELLO ADMIN (Smart Wallet)
   ========================================================================== */

/* Contenitore Lista */
#bs-admin-cart-live-summary {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 10px 15px;
    margin-bottom: 10px;
    max-height: 180px;
    overflow-y: auto;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.02);
}

/* Singola riga servizio */
#bs-admin-cart-live-summary > div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px dashed #f1f5f9;
    font-size: 13px;
    color: var(--bs-text-dark);
}

#bs-admin-cart-live-summary > div:last-child {
    border-bottom: none;
}

/* Nome Servizio e Badge */
#bs-admin-cart-live-summary span:first-child {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
}

/* Badge Pacchetto (Verde) */
.bs-badge-package {
    background-color: #dcfce7;
    color: #166534;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 2px 6px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: 1px solid #bbf7d0;
}

/* Prezzi */
#bs-admin-cart-live-summary b {
    font-weight: 700;
    color: var(--bs-text-dark);
}
#bs-admin-cart-live-summary span[style*="text-decoration:line-through"] {
    color: #94a3b8;
    font-size: 0.9em;
    margin-right: 5px;
}

/* Sezione Totali e Controlli in basso */
#bs-admin-cart-summary hr {
    margin: 15px 0;
    border-color: #e2e8f0;
}

/* Totale Finale */
.bs-cart-total-row {
    background-color: #f8fafc;
    padding: 12px 15px;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
    margin-top: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.bs-cart-total-row span:first-child {
    font-size: 12px;
    text-transform: uppercase;
    color: var(--bs-text-light);
    font-weight: 600;
    letter-spacing: 0.5px;
}

#bs-admin-final-total {
    font-size: 22px;
    font-weight: 800;
    color: var(--bs-primary-color-dark);
    letter-spacing: -0.5px;
}

/* Input Coupon e Checkbox Punti */
#bs-admin-cart-summary input[type="text"] {
    border: 1px solid #d1d5db;
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 12px;
    transition: all 0.2s;
}
#bs-admin-cart-summary input[type="text"]:focus {
    border-color: var(--bs-primary-color);
    box-shadow: 0 0 0 2px var(--bs-primary-color-light);
    outline: none;
}

/* ==========================================================================
   FIX LAYOUT MODALE "NUOVO APPUNTAMENTO" (vFinal)
   ========================================================================== */

/* 1. Griglia Data e Ora (3 Colonne: Operatore | Data | Ora+Tools) */
.bs-admin-date-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1.2fr; /* Proporzioni ottimali */
    gap: 15px;
    align-items: flex-end; /* Allinea in basso (vicino agli input) */
    margin-bottom: 15px;
}

/* 2. Gruppo Ora e Bottoni */
.bs-time-input-group {
    display: flex;
    gap: 5px;
    width: 100%;
}

/* Gli input e le select dentro il gruppo prendono tutto lo spazio */
.bs-time-input-group input[type="time"],
.bs-time-input-group select {
    flex-grow: 1;
    width: auto !important; /* Sovrascrive larghezza 100% generica */
    min-width: 0; /* Previene overflow */
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

/* I bottoni sono quadrati e attaccati all'input */
.bs-icon-only-btn {
    width: 40px !important;
    height: 40px !important; /* Stessa altezza degli input standard */
    padding: 0 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-left: none;
}

/* 3. Ricorrenza */
.bs-recurrence-box {
    background: #f9fafb;
    padding: 10px 15px;
    border: 1px dashed #e2e8f0;
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 15px;
}
.bs-recurrence-toggle {
    font-weight: 600;
    color: var(--bs-primary-color);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 0;
}
#bs_app_recurrence_options {
    display: flex;
    gap: 5px;
}
#bs_app_recurrence_options select,
#bs_app_recurrence_options input {
    height: 32px !important; /* Più piccoli */
    width: 150px !important;
    font-size: 13px;
    padding: 0 5px;
}

/* 4. Sezione Finanziaria (Smart Wallet) */
.bs-smart-wallet-section {
    background-color: #f8fafc;
    padding: 15px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    margin-bottom: 20px;
}
.bs-section-header-row {
    display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;
}
.bs-section-header-row h4 { margin: 0; font-size: 13px; color: #64748b; text-transform: uppercase; letter-spacing: 0.5px; }

.bs-empty-cart-msg { color: #94a3b8; font-style: italic; text-align: center; margin: 10px 0; font-size: 13px; }

.bs-wallet-controls-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #e2e8f0;
}

.bs-wallet-inputs {
    display: flex;
    align-items: center;
    gap: 8px;
}
.bs-wallet-total {
    text-align: right;
    line-height: 1.2;
}
.bs-wallet-total span { font-size: 10px; color: #64748b; display: block; }
.bs-wallet-total strong { font-size: 18px; color: var(--bs-text-dark); }

/* 5. Footer Azioni */
.bs-form-actions-buttons {
    display: flex;
    gap: 10px;
    margin-left: auto; /* Spinge a destra */
}

/* RESPONSIVE */
@media (max-width: 768px) {
    .bs-admin-date-grid {
        grid-template-columns: 1fr; /* Impila su mobile */
        gap: 15px;
    }
    .bs-recurrence-box {
        flex-direction: column;
        align-items: flex-start;
    }
    .bs-wallet-controls-row {
        flex-direction: column;
        gap: 15px;
        align-items: flex-end;
    }
    .bs-wallet-inputs {
        width: 100%;
        justify-content: space-between;
    }
}


/* ==========================================================================
   STILI GRIGLIA SLOT ORARI (Admin)
   ========================================================================== */

.bs-admin-slots-container {
    width: 100%; /* Larghezza piena */
    display: block; /* Forza a capo */
    clear: both;
    margin-top: 15px; /* Spazio dagli input */
    padding: 15px;
    background: #f8fafc;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    max-height: 300px;
    pointer-events: auto !important;
    overflow-y: auto !important;
    z-index: 100 !important; /* Porta in primo piano */
    position: relative;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.02);
}

/* Titolo Fascia Oraria (Mattina/Pomeriggio) */
.bs-slot-group-label {
    font-size: 11px;
    text-transform: uppercase;
    color: var(--bs-text-light);
    font-weight: 700;
    margin: 8px 0 4px 0;
    display: block;
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 2px;
}
.bs-slot-group-label:first-child { margin-top: 0; }

/* Griglia Bottoni */
.bs-slots-visual-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
    gap: 8px;
    position: relative;
    z-index: 50;
}

/* Bottone Orario Singolo */
.bs-time-btn {
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    padding: 6px 0;
    text-align: center;
    font-size: 13px;
    font-weight: 500;
    color: var(--bs-text-dark);
    cursor: pointer !important;
    pointer-events: auto !important;
    position: relative;
    user-select: none;
    z-index: 101 !important;
    transition: all 0.15s ease;
    
}

.bs-time-btn:hover {
    background-color: #e0f2fe;
    border-color: var(--bs-primary-color);
    color: var(--bs-primary-color-dark);
}

/* Stato Selezionato */
.bs-time-btn.selected {
    background-color: var(--bs-primary-color) !important;
    border-color: var(--bs-primary-color) !important;
    color: #ffffff !important;
    font-weight: 700;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    transform: scale(1.05); /* Piccolo zoom per feedback immediato */
}

/* ==========================================================================
   STILE BOX "RIEPILOGO FINANZIARIO" (Smart Wallet)
   ========================================================================== */

.bs-smart-wallet-box {
    background-color: #f0fdf4; /* Verde Menta chiarissimo */
    border: 1px solid #bbf7d0; /* Bordo Verde pastello */
    border-radius: 8px;        /* Bordi arrotondati */
    padding: 15px 20px;
    margin-top: 20px;
    margin-bottom: 20px;
    position: relative;
}

/* Header del Box */
.bs-wallet-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(22, 101, 52, 0.1); /* Linea sottile verde scuro */
}

.bs-wallet-header h4 {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: #15803d; /* Verde scuro */
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Override input all'interno del box per adattarsi allo sfondo */
.bs-smart-wallet-box input[type="text"] {
    background-color: #ffffff;
    border-color: #bbf7d0;
}
.bs-smart-wallet-box input[type="text"]:focus {
    border-color: #16a34a; /* Verde più acceso al focus */
    box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.2);
}

/* Totale in evidenza */
#bs-admin-final-total {
    color: #14532d; /* Verde molto scuro */
}

/* Badge Coupon Attivo (Admin) */
.bs-active-coupon-badge {
    background-color: #ffffff;
    border: 1px dashed var(--bs-success-color);
    color: var(--bs-success-color-dark);
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px; /* Stessa altezza dell'input precedente */
    box-sizing: border-box;
}

#bs-admin-remove-coupon:hover {
    background-color: #fecaca !important;
    border-color: #ef4444 !important;
    transform: scale(1.05);
}

/* ==========================================================================
   STILI CATEGORIE (Redesign vFinal - Layout Fixed)
   ========================================================================== */

.bs-categories-grid {
    display: grid;
    /* 1. Larghezza minima aumentata a 340px per evitare card troppo strette */
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)) !important;
    gap: 25px;
    margin-top: 25px;
    /* 2. Forza tutte le card ad avere la stessa altezza nella riga */
    align-items: stretch; 
}

.bs-category-card {
    background: #ffffff;
    border: 1px solid var(--bs-border-color-light);
    border-radius: 12px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.03);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    
    /* 3. Layout Flex verticale per gestire l'altezza piena */
    display: flex;
    flex-direction: column;
    height: 100%; /* Occupa tutta l'altezza della cella della griglia */
    overflow: hidden;
}

.bs-category-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
    border-color: var(--bs-primary-color);
}

/* HEADER CARD */
.bs-category-header {
    padding: 20px;
    display: flex;
    gap: 15px;
    align-items: center; /* Centra verticalmente icona, testo e bottoni */
    border-bottom: 1px solid #f8f9fa;
    background: linear-gradient(to bottom, #ffffff, #fcfcfc);
}

.bs-category-icon {
    width: 42px;
    height: 42px;
    background-color: var(--bs-primary-color-light);
    color: var(--bs-primary-color);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    
    /* 4. Impedisce all'icona di restringersi */
    flex-shrink: 0; 
}

.bs-category-info {
    /* 5. Occupa tutto lo spazio disponibile centrale */
    flex: 1; 
    /* 6. FIX FONDAMENTALE: Impedisce al testo di schiacciarsi verticalmente */
    min-width: 0; 
}

.bs-category-name {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--bs-text-dark);
    line-height: 1.3;
    
    /* 7. Gestione testo lungo: va a capo normalmente */
    white-space: normal; 
    word-break: break-word; 
}

.bs-category-desc {
    margin: 4px 0 0 0;
    font-size: 12px;
    color: var(--bs-text-light);
    line-height: 1.4;
    
    /* Tronca il testo se troppo lungo su una riga */
    white-space: nowrap; 
    overflow: hidden;
    text-overflow: ellipsis;
}

/* AZIONI (Edit/Delete) */
.bs-category-actions {
    display: flex;
    gap: 5px;
    /* 8. Impedisce ai bottoni di restringersi o andare a capo male */
    flex-shrink: 0; 
    margin-left: auto; 
}

.bs-icon-btn {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--bs-text-light);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    font-size: 13px;
}
.bs-icon-btn:hover {
    background-color: #f3f4f6;
    color: var(--bs-primary-color);
}
.bs-icon-btn.delete:hover {
    background-color: #fef2f2;
    color: var(--bs-error-color);
}

/* BODY CARD */
.bs-category-body {
    padding: 20px;
    background-color: #fff;
    
    /* 9. Spinge il contenuto per riempire l'altezza se necessario */
    flex-grow: 1; 
    display: flex;
    flex-direction: column;
    justify-content: flex-start; 
}

/* STATISTICHE INTERNE */
.bs-cat-stat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    font-size: 13px;
    color: var(--bs-text-light);
    border-bottom: 1px dashed #f0f0f0;
    padding-bottom: 10px;
}
.bs-cat-badge-count {
    background-color: var(--bs-bg-light);
    color: var(--bs-text-dark);
    padding: 2px 10px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 11px;
    border: 1px solid #e5e7eb;
}

/* LISTA SERVIZI (CHIPS/TAGS) */
.bs-services-tags-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 5px;
}

.bs-service-mini-tag {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    background-color: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 20px; /* Pillola */
    font-size: 12px;
    color: var(--bs-text-dark);
    font-weight: 500;
    transition: all 0.2s;
    white-space: nowrap;
}

.bs-service-mini-tag:hover {
    background-color: var(--bs-primary-color-light);
    border-color: var(--bs-primary-color);
    color: var(--bs-primary-color-dark);
}

/* Indicatore Inattivo */
.bs-service-mini-tag.inactive {
    opacity: 0.6;
    text-decoration: line-through;
    background-color: #f3f4f6;
    color: #999;
}

/* Loader Pulse */
.bs-loading-pulse {
    height: 60px;
    background: #f3f4f6;
    border-radius: 6px;
    animation: pulse 1.5s infinite ease-in-out;
}
@keyframes pulse {
    0% { opacity: 0.6; }
    50% { opacity: 1; }
    100% { opacity: 0.6; }
}

/* Responsive per Mobile */
@media screen and (max-width: 768px) {
    .bs-categories-grid {
        /* Su mobile torna a una colonna singola fluida */
        grid-template-columns: 1fr;
    }
}





/* ==========================================================================
   STILI VISTA TOOLS (v3 - Dashboard Tecnica Colorata)
   ========================================================================== */

.bs-tools-layout-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 25px;
    margin-top: 25px;
}

/* --- Card Strumento Generica --- */
.bs-tool-card {
    background: #fff;
    border: 1px solid var(--bs-border-color-light);
    border-radius: var(--bs-border-radius-large);
    box-shadow: var(--bs-box-shadow);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.bs-tool-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}

/* --- Header Base --- */
.bs-tool-header {
    padding: 15px 20px;
    background-color: #f9fafb; /* Fallback */
    border-bottom: 1px solid rgba(0,0,0,0.05);
}
.bs-tool-header h3 {
    margin: 0; 
    font-size: 16px; 
    font-weight: 700; 
    display: flex; 
    align-items: center; 
    gap: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* --- STILI TEMATICI CARD (Colori Testata) --- */

/* 1. HEALTH CARD (Verde/Smeraldo - Stabilità) */
.bs-health-card {
    border-top: 4px solid var(--bs-success-color);
}
.bs-health-card .bs-tool-header {
    background-color: #ecfdf5; /* Verde chiarissimo */
    color: #065f46; /* Verde scuro */
}
.bs-health-card .bs-tool-header h3 { color: #065f46; }
.bs-health-card .bs-tool-header i { color: var(--bs-success-color); }

/* 2. MAINTENANCE CARD (Arancione/Ambra - Azione) */
.bs-maint-card {
    border-top: 4px solid var(--bs-warning-color);
}
.bs-maint-card .bs-tool-header {
    background-color: #fffbeb; /* Giallo/Ambra chiarissimo */
    color: #92400e;
}
.bs-maint-card .bs-tool-header h3 { color: #92400e; }
.bs-maint-card .bs-tool-header i { color: var(--bs-warning-color); }

/* 3. EXPORT CARD (Blu - Dati) */
.bs-export-card {
    border-top: 4px solid var(--bs-primary-color);
}
.bs-export-card .bs-tool-header {
    background-color: var(--bs-primary-color-light); /* Blu chiarissimo */
    color: var(--bs-primary-color-dark);
}
.bs-export-card .bs-tool-header h3 { color: var(--bs-primary-color-dark); }
.bs-export-card .bs-tool-header i { color: var(--bs-primary-color); }

/* 4. IMPORT CARD (Indaco/Viola - Input) */
.bs-import-card {
    border-top: 4px solid #6366f1; /* Indaco */
}
.bs-import-card .bs-tool-header {
    background-color: #e0e7ff; /* Indaco chiarissimo */
    color: #3730a3;
}
.bs-import-card .bs-tool-header h3 { color: #3730a3; }
.bs-import-card .bs-tool-header i { color: #6366f1; }

/* 5. DANGER CARD (Rosso - Pericolo) */
.bs-danger-card {
    border-top: 4px solid var(--bs-error-color);
    border-color: var(--bs-border-color-light); 
}
.bs-danger-card .bs-tool-header {
    background-color: #fef2f2; /* Rosso chiarissimo */
    border-bottom-color: #fee2e2;
    color: #991b1b;
}
.bs-danger-card .bs-tool-header h3 { color: #991b1b; }
.bs-danger-card .bs-tool-header i { color: var(--bs-error-color); }


/* --- Body & Contenuti Interni --- */
.bs-tool-body {
    padding: 20px; flex-grow: 1;
}
.bs-tool-desc {
    margin: 0 0 15px 0; font-size: 13px; color: var(--bs-text-light); line-height: 1.5;
}

/* 1. Health Content */
.bs-health-list {
    list-style: none; margin: 0; padding: 0;
}
.bs-health-list li {
    display: flex; justify-content: space-between; align-items: center;
    padding: 8px 0; border-bottom: 1px dashed #eee; font-size: 13px;
}
.bs-health-list li:last-child { border-bottom: none; }

.bs-status-ok { color: var(--bs-success-color); font-weight: 600; }
.bs-status-err { color: var(--bs-error-color); font-weight: 600; }
.bs-status-warn { color: var(--bs-warning-color); font-weight: 600; }

.bs-db-stats-mini {
    margin-top: 15px; padding-top: 15px; border-top: 1px solid #eee;
}
.bs-db-stats-mini h4 { margin: 0 0 10px 0; font-size: 12px; text-transform: uppercase; color: #999; }
.bs-db-stats-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.stat-pill {
    background: #f3f4f6; padding: 4px 10px; border-radius: 15px; font-size: 11px;
    display: flex; gap: 6px; border: 1px solid #e5e7eb;
}
.stat-pill .val { font-weight: 700; color: var(--bs-primary-color); }

/* 2. Manutenzione Content */
.bs-tool-action-row {
    display: flex; justify-content: space-between; align-items: center;
    background: #fcfcfc; padding: 12px; border: 1px solid #eee;
    border-radius: 6px; margin-bottom: 10px;
}
.action-info strong { display: block; font-size: 13px; color: var(--bs-text-dark); margin-bottom: 2px; }
.action-info small { font-size: 11px; color: var(--bs-text-light); }

/* 3. Export Content */
.bs-export-grid {
    display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin-bottom: 20px;
}
.bs-export-btn {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    background: #fff; border: 1px solid var(--bs-border-color); border-radius: 8px;
    padding: 15px 10px; text-decoration: none; color: var(--bs-text-light);
    transition: all 0.2s;
}
.bs-export-btn:hover {
    border-color: var(--bs-primary-color); color: var(--bs-primary-color);
    background-color: var(--bs-primary-color-light); transform: translateY(-2px);
}
.bs-export-btn i { font-size: 1.5em; margin-bottom: 5px; }

.bs-backup-area {
    background: #ecfdf5; border: 1px solid #10b981; padding: 15px; border-radius: 8px; text-align: center;
}
.bs-backup-area strong { display: block; color: #065f46; margin-bottom: 10px; font-size: 13px; }

/* 4. Import Content */
.bs-import-templates {
    font-size: 12px; text-align: center; margin-bottom: 15px; color: #666;
}
.bs-import-templates a { color: var(--bs-primary-color); text-decoration: underline; }
.bs-import-form {
    display: flex; flex-direction: column; gap: 10px;
}
.bs-import-form select, .bs-import-form input[type="file"] {
    width: 100%; box-sizing: border-box; height: 38px;
}
.bs-file-input-wrapper {
    background: #f9fafb; padding: 10px; border: 1px dashed #ccc; border-radius: 4px;
}

/* 5. Danger Content & Reset Button */

/* Stile Base Pulsante Reset */
.button-danger-outline {
    width: 100%;
    background-color: var(--bs-error-color) !important; /* Rosso pieno */
    color: #ffffff !important; /* Testo bianco */
    border: 1px solid var(--bs-error-color);
    
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 12px 20px;
    border-radius: var(--bs-border-radius);
    
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: 0 4px 6px rgba(239, 68, 68, 0.2); /* Ombra rossa leggera */
}

/* Icona interna bianca */
.button-danger-outline i {
    color: #ffffff !important;
    font-size: 1.1em;
}

/* Effetto Hover (Passaggio del mouse) */
.button-danger-outline:hover {
    background-color: var(--bs-error-color-dark); /* Rosso più scuro */
    border-color: var(--bs-error-color-dark);
    color: #ffffff;
    
    transform: translateY(-2px); /* Si solleva leggermente */
    box-shadow: 0 8px 15px rgba(220, 38, 38, 0.3); /* Ombra più profonda */
}

/* Effetto Active (Click) */
.button-danger-outline:active {
    transform: translateY(0); /* Torna giù (effetto pressione) */
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.2); /* Ombra interna */
    background-color: #991b1b; /* Rosso ancora più scuro */
    border-color: #991b1b;
}

/* Focus (Accessibilità) */
.button-danger-outline:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.4);
}




/* ==========================================================================
   NUOVO LAYOUT KPI DASHBOARD (v2 - Executive)
   ========================================================================== */

/* Griglia Principale */
.bs-kpi-hero-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 25px;
    margin-bottom: 35px;
}

/* Card Base */
.bs-kpi-modern-card {
    background-color: #ffffff;
    border-radius: 16px; /* Angoli più morbidi */
    padding: 25px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.03); /* Ombra leggerissima e diffusa */
    border: 1px solid rgba(0,0,0,0.03);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    overflow: hidden;
}

.bs-kpi-modern-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
}

/* Decorazione sfumata in alto */
.bs-kpi-modern-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 4px;
    background: var(--card-accent);
}

/* Header: Titolo e Icona */
.bs-kpi-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 15px;
}

.bs-kpi-label {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #94a3b8; /* Grigio medio */
}

/* Icona con sfondo sfumato */
.bs-kpi-icon-circle {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    background-color: var(--icon-bg);
    color: var(--card-accent);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.bs-kpi-modern-card:hover .bs-kpi-icon-circle {
    transform: rotate(10deg) scale(1.1);
}

/* Valore Principale */
.bs-kpi-value-big {
    font-size: 36px;
    font-weight: 800;
    color: var(--bs-text-dark);
    line-height: 1;
    letter-spacing: -1px;
}

/* --- CARD SPECIFICA: PROSSIMO APPUNTAMENTO --- */
.bs-kpi-next-app-details {
    margin-top: 10px;
    padding-top: 15px;
    border-top: 1px dashed #e2e8f0;
}
.bs-kpi-time-badge {
    display: inline-block;
    background-color: #f1f5f9;
    color: var(--bs-text-dark);
    font-weight: 700;
    font-size: 14px;
    padding: 4px 10px;
    border-radius: 6px;
    margin-bottom: 5px;
}
.bs-kpi-client-name {
    display: block;
    font-size: 14px;
    color: #64748b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- CARD SPECIFICA: AZIONI RAPIDE --- */
.bs-kpi-actions-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 10px;
}
.bs-kpi-action-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 12px;
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    text-decoration: none;
    color: var(--bs-text-light);
    font-size: 11px;
    font-weight: 600;
    transition: all 0.2s;
}
.bs-kpi-action-btn i {
    font-size: 18px;
    margin-bottom: 5px;
    color: var(--bs-primary-color);
}
.bs-kpi-action-btn:hover {
    background-color: var(--bs-primary-color);
    color: white;
    border-color: var(--bs-primary-color);
}
.bs-kpi-action-btn:hover i { color: white; }

/* Responsive */
@media (max-width: 768px) {
    .bs-kpi-hero-grid { grid-template-columns: 1fr; }
    .bs-kpi-value-big { font-size: 32px; }
}

/* ==========================================================================
   STILI DASHBOARD "BUSINESS PULSE" & GRID SYSTEM
   ========================================================================== */

/* --- 1. ELEMENTI UI (To-Do List, Liste, Link) --- */

/* To-Do List Items */
.bs-todo-item {
    display: flex;
    align-items: center;
    padding: 12px;
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    text-decoration: none;
    color: var(--bs-text-dark);
    margin-bottom: 8px;
    transition: all 0.2s ease;
    /* Fix responsive contenuto interno */
    min-width: 0; 
}
.bs-todo-item:hover {
    background-color: #fff;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    transform: translateX(2px);
}

.todo-icon {
    width: 36px; 
    height: 36px;
    border-radius: 50%;
    display: flex; 
    align-items: center; 
    justify-content: center;
    margin-right: 12px;
    font-size: 16px;
    flex-shrink: 0; /* Impedisce schiacciamento */
}

/* Varianti Colore */
.bs-todo-item.warning { border-left: 3px solid #ea580c; }
.bs-todo-item.warning .todo-icon { background: #fff7ed; color: #ea580c; }

.bs-todo-item.error { border-left: 3px solid #dc2626; }
.bs-todo-item.error .todo-icon { background: #fef2f2; color: #dc2626; }

.bs-todo-item.success { border-left: 3px solid #16a34a; cursor: default; }
.bs-todo-item.success .todo-icon { background: #f0fdf4; color: #16a34a; }
.bs-todo-item.success:hover { transform: none; box-shadow: none; background-color: #f8fafc; }

/* Testi interni */
.todo-info { 
    flex-grow: 1; 
    line-height: 1.3; 
    min-width: 0; /* Fondamentale per il text-overflow */
}
.todo-info strong { 
    display: block; 
    font-size: 13px; 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
}
.todo-info span { font-size: 11px; color: #64748b; }

.bs-todo-item .fa-chevron-right { color: #cbd5e1; font-size: 12px; margin-left: 10px; }

/* Liste Generiche Dashboard */
.bs-birthday-list li:last-child {
    border-bottom: none !important;
}
.bs-crm-section a:hover {
    transform: translateX(2px);
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

/* ==========================================================================
   LAYOUT GRID DASHBOARD RESPONSIVE (Fix Overflow)
   ========================================================================== */

/* 1. MOBILE FIRST (Default: 1 Colonna) */
.bs-dashboard-grid {
    display: grid;
    grid-template-columns: 100%; /* Forza 1 colonna piena */
    gap: 20px;
    width: 100%;
    box-sizing: border-box; /* Include padding nel calcolo larghezza */
    background-color: var(--bs-bg-light); 
}

/* Fix fondamentale per evitare che i widget taglino su mobile */
.bs-dashboard-widget {
    min-width: 0; /* Permette al grid-item di restringersi sotto il contenuto minimo */
    overflow-wrap: break-word; /* Gestione testi lunghi */
}

/* Fix per Chart.js su mobile */
.bs-chart-container {
    position: relative;
    width: 100%;
    max-width: 100%;
}

/* 2. TABLET (Min 768px: 2 Colonne) */
@media (min-width: 768px) {
    .bs-dashboard-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 colonne uguali */
        gap: 25px;
    }
    
    /* Il grafico occupa tutta la larghezza su tablet per leggibilità */
    .bs-widget-span-2 {
        grid-column: span 2;
    }
}

/* 3. DESKTOP (Min 1200px: 3 Colonne - Layout Finale) */
@media (min-width: 1200px) {
    .bs-dashboard-grid {
        /* 3 colonne di uguale larghezza */
        grid-template-columns: repeat(3, 1fr);
    }
    
    /* RIGA 1: Grafico (2/3) + Stato Business (1/3) */
    .bs-widget-span-2 {
        grid-column: span 2 !important;
    }
    
    /* RIGA 2: 3 widget da 1 colonna ciascuno (comportamento default) */
    .bs-dashboard-widget {
        grid-column: span 1;
    }
}

/* --- ICONE SORGENTE PRENOTAZIONE --- */
.bs-icon-source-online {
    background-color: #3B82F6; /* Blu Web */
    font-size: 10px;
}
.bs-icon-source-internal {
    background-color: #64748b; /* Grigio Staff */
    font-size: 10px;
}

/* Tooltip nativo migliorato per le icone */
.bs-mini-icon {
    cursor: help;
}

/* ==========================================================================
   STYLING PULSANTI CONTROL BAR (Header)
   ========================================================================== */

/* Spaziatura nel contenitore destro */
.bs-main-controls .bs-controls-right {
    gap: 15px; /* Spazio tra orologio e bottoni */
    display: flex;
    align-items: center;
}

/* Stile Base Comune per i Bottoni dell'Header */
.bs-main-controls .button-large {
    height: 42px !important;       /* Altezza importante per cliccabilità */
    padding: 0 16px !important;    /* Più larghi */
    font-size: 14px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 8px !important; /* Arrotondamento moderno */
    border: none !important;
    
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 10px; /* Spazio tra icona e testo */
    
    transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    box-shadow: 0 4px 6px rgba(0,0,0,0.2); /* Ombra su sfondo scuro */
    cursor: pointer;
}

/* Effetto Sollevamento al passaggio del mouse */
.bs-main-controls .button-large:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 15px rgba(0,0,0,0.3);
}

/* Effetto Click */
.bs-main-controls .button-large:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* --- 1. BOTTONE NUOVO APPUNTAMENTO (Azione Primaria) --- */
#bs-open-add-modal {
    /* Gradiente sottile sul colore primario per dare volume */
    background: linear-gradient(135deg, var(--bs-primary-color) 0%, var(--bs-primary-color-dark) 100%) !important;
    color: #ffffff !important;
}

#bs-open-add-modal:hover {
    filter: brightness(1.1); /* Si illumina leggermente */
}

/* --- 2. BOTTONE PAUSA / NOTA (Azione Secondaria - Stile "Glass") --- */
#bs-quick-add-note-btn {
    /* Sfondo semi-trasparente elegante su dark mode */
    background-color: rgba(255, 255, 255, 0.1) !important; 
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    color: rgba(255, 255, 255, 0.9) !important;
    backdrop-filter: blur(4px); /* Effetto sfocatura dietro se supportato */
}

#bs-quick-add-note-btn:hover {
    /* Diventa bianco solido al passaggio */
    background-color: #ffffff !important;
    color: #333333 !important;
    border-color: #ffffff !important;
}

/* Icone interne */
.bs-main-controls .button-large i {
    font-size: 1.2em; /* Icona leggermente più grande del testo */
}

/* Responsive: Su mobile icone più grandi, testo nascosto o impilati */
@media screen and (max-width: 600px) {
    .bs-main-controls .button-large {
        width: 100%; /* Bottoni a tutta larghezza */
        margin-bottom: 5px;
    }
}

/* ==========================================================================
   STILI CAMBIO RAPIDO PAGAMENTO & POPOVER (Consolidato vFinal)
   ========================================================================== */

/* 1. BADGE CLICCABILE (Sulla Card Appuntamento) */
.bs-payment-badge.bs-quick-payment-trigger {
    cursor: pointer;
    transition: transform 0.2s ease, opacity 0.2s ease;
    position: relative;
    padding-right: 20px !important; /* Spazio per la freccetta */
}

.bs-payment-badge.bs-quick-payment-trigger:hover {
    transform: scale(1.05);
    opacity: 0.9;
}

.bs-payment-chevron {
    position: absolute;
    right: 6px;
    font-size: 0.8em;
    opacity: 0.8;
}

/* 2. MENU POPOVER (Contenitore) */
.bs-status-popover {
    /* Posizionamento assoluto sopra tutto */
    position: absolute !important;
    z-index: 2147483647 !important; /* Fix Nucleare per visibilità */
    
    display: block !important;
    background-color: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 8px !important;
    box-shadow: 0 10px 25px rgba(0,0,0,0.15) !important;
    
    min-width: 200px !important;
    overflow: hidden;
    padding: 5px 0 !important;
    animation: fadeIn 0.2s ease-out;
}

/* 3. VOCI DEL MENU (Opzioni) */
.bs-payment-option {
    padding: 12px 15px !important;
    border-bottom: 1px solid #f8fafc !important;
    color: #4b5563 !important;
    background: #fff !important;
    transition: all 0.2s !important;
    
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    
    font-size: 13px !important;
    font-weight: 500 !important;
    cursor: pointer;
    border-left: none !important; /* Rimuove vecchi bordi colorati */
}

.bs-payment-option:last-child {
    border-bottom: none !important;
}

.bs-payment-option i {
    width: 20px;
    text-align: center;
    font-size: 14px;
    /* Il colore dell'icona è definito sotto */
}

/* 4. COLORI ICONE & SFONDI HOVER (Design Moderno) */

/* Contanti (Verde) */
.bs-opt-cash i { color: #10B981 !important; }
.bs-payment-option.bs-opt-cash:hover { background-color: #ecfdf5 !important; }

/* Carta/POS (Ciano) */
.bs-opt-card i { color: #06B6D4 !important; }
.bs-payment-option.bs-opt-card:hover { background-color: #cffafe !important; }

/* Online (Blu) */
.bs-opt-online i { color: #3B82F6 !important; }
.bs-payment-option.bs-opt-online:hover { background-color: #eff6ff !important; }

/* Pacchetto (Viola) */
.bs-opt-package i { color: #8B5CF6 !important; }
.bs-payment-option.bs-opt-package:hover { background-color: #f5f3ff !important; }

/* Non Pagato (Arancio) */
.bs-opt-unpaid i { color: #F59E0B !important; }
.bs-payment-option.bs-opt-unpaid:hover { background-color: #fffbeb !important; }

/* Rimborso (Rosso) */
.bs-opt-refund i { color: #EF4444 !important; }
.bs-payment-option.bs-opt-refund:hover { background-color: #fef2f2 !important; }



/* ==========================================================================
   STILI STORNO SCONTRINO (POS) - FIX VISIVO
   ========================================================================== */

/* Forza lo sfondo rosso su TUTTE le celle della riga annullata */
tr.bs-row-voided,
tr.bs-row-voided td {
    background-color: #fef2f2 !important; /* Rosso molto pallido */
    color: #9ca3af !important; /* Testo grigio medio */
}

/* Stile specifico per il prezzo barrato */
tr.bs-row-voided span[style*="text-decoration:line-through"] {
    color: #ef4444 !important; /* Rosso per il prezzo barrato */
    opacity: 0.8;
}

/* Badge "ANNULLATO" */
.bs-void-badge {
    background-color: #ef4444;
    color: white !important; /* Forza testo bianco */
    font-size: 9px;
    padding: 3px 6px;
    border-radius: 4px;
    font-weight: 700;
    margin-left: 6px;
    vertical-align: middle;
    letter-spacing: 0.5px;
    display: inline-block;
}

/* Icona Divieto (al posto del bottone) */
.bs-void-action-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;  /* Stessa larghezza dei bottoni azione */
    height: 32px; /* Stessa altezza */
    border-radius: 4px;
    background-color: transparent;
    color: #ef4444 !important; /* Icona Rossa */
    font-size: 16px;
    cursor: help; /* Cursore aiuto */
    opacity: 0.7;
    transition: opacity 0.2s;
}
.bs-void-action-icon:hover {
    opacity: 1;
    background-color: #fee2e2; /* Sfondo rosso chiarissimo al passaggio */
}

/* Forza l'allineamento al centro della cella azioni SOLO se la riga è annullata */
tr.bs-row-voided .bs-actions-cell {
    justify-content: center !important;
}

/* Opzionale: Rimuove margini extra se presenti per centratura perfetta */
tr.bs-row-voided .bs-void-action-icon {
    margin: 0 !important;
}


/* Badge ID Appuntamento nella Card */
.bs-app-id-badge {
    font-family: 'Courier New', Courier, monospace; /* Look tecnico */
    font-size: 10px;
    font-weight: 700;
    color: #ffffff;
    background-color: rgba(0, 0, 0, 0.2); /* Sfondo scuro semi-trasparente */
    padding: 1px 5px;
    border-radius: 3px;
    margin-right: 6px; /* Spazio prima dell'orario */
    flex-shrink: 0; /* Non si schiaccia mai */
    display: inline-block;
    vertical-align: middle;
    letter-spacing: 0.5px;
    border: 1px solid rgba(255,255,255,0.1);
}


/* ==========================================================================
   FIX LIVELLO MODALE CONFERMA (Z-INDEX)
   ========================================================================== */

/* Forza la modale generica di eliminazione a stare sopra a tutto (anche sopra altre modali) */
#bs-generic-delete-modal {
    z-index: 999999 !important; /* Valore altissimo */
    background-color: rgba(0, 0, 0, 0.7) !important; /* Sfondo scuro più deciso */
}

/* Assicura che il contenuto sia opaco e in primo piano */
#bs-generic-delete-modal .bs-modal-content {
    z-index: 1000000 !important;
    opacity: 1 !important;
    box-shadow: 0 10px 40px rgba(0,0,0,0.5) !important;
}



/* ==========================================================================
   STILI RESIZE (RIDIMENSIONAMENTO CARD)
   ========================================================================== */

/* Maniglia di ridimensionamento (Bordo inferiore) */
.bs-appointment-card .ui-resizable-s {
    bottom: 0;
    height: 10px; /* Area cliccabile */
    cursor: s-resize; /* Cursore freccia su/giù */
    background: transparent;
    position: absolute;
    width: 100%;
    left: 0;
    z-index: 90; /* Sopra al contenuto */
}

/* Indicatore visivo (piccole righe o pallini al centro in basso) */
.bs-appointment-card .ui-resizable-s::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 3px;
    border-top: 1px solid rgba(255,255,255,0.5);
    border-bottom: 1px solid rgba(255,255,255,0.5);
    opacity: 0; /* Invisibile finché non vai in hover */
    transition: opacity 0.2s;
}

/* Mostra la maniglia quando passi sopra la card */
.bs-appointment-card:hover .ui-resizable-s::after {
    opacity: 1;
}

/* Durante il resize */
.bs-appointment-card.ui-resizable-resizing {
    z-index: 100 !important;
    opacity: 0.8;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

/* ==========================================================================
   STILI INDICATORE DRAG & RESIZE (UNIFICATI)
   ========================================================================== */

/* Stile unico per entrambi gli indicatori (Spostamento e Ridimensionamento) */
.bs-drag-time-indicator,
.bs-resize-time-indicator {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Centra perfettamente */
    
    background-color: rgba(31, 41, 55, 0.95); /* Grigio scuro quasi nero */
    color: #ffffff;
    
    padding: 15px 25px;
    border-radius: 8px;
    
    font-size: 24px; 
    font-weight: 800;
    letter-spacing: 1px;
    font-family: monospace;
    
    box-shadow: 0 8px 25px rgba(0,0,0,0.5);
    border: 2px solid rgba(255,255,255, 0.3);
    
    z-index: 99999; /* Sopra a tutto */
    pointer-events: none;
    white-space: nowrap;
    
    backdrop-filter: blur(4px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1.2;
}

/* Sottotitolo nell'indicatore (es. "Nuova Fine") */
.bs-indicator-label {
    font-size: 10px;
    text-transform: uppercase;
    color: #9ca3af;
    font-weight: 600;
    letter-spacing: 0;
    margin-bottom: 5px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Nascondi la vecchia maniglia di default se presente */
.ui-icon-gripsmall-diagonal-se { display: none !important; }


/* ==========================================================================
   STILE ORARI SPECIALI (Visualizzazione Planner)
   ========================================================================== */

.bs-special-hours-overlay {
    position: absolute;
    left: 0; 
    width: 100%;
    
    /* Sfondo Verde Menta Molto Chiaro e Trasparente */
    background-color: rgba(16, 185, 129, 0.15); 
    
    /* Bordo laterale per evidenziare */
    border-left: 3px solid #10B981; 
    border-right: 1px dashed rgba(16, 185, 129, 0.3);
    border-top: 1px dashed rgba(16, 185, 129, 0.3);
    border-bottom: 1px dashed rgba(16, 185, 129, 0.3);
    
    z-index: 2; /* Sopra lo sfondo, sotto gli appuntamenti */
    
    /* FONDAMENTALE: Lascia passare i click al livello sottostante (Quick Add) */
    pointer-events: none !important; 
    
    display: flex;
    justify-content: flex-end;
    padding: 2px 5px;
}

/* Etichetta discreta */
.bs-special-hours-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    color: #047857; /* Verde scuro */
    opacity: 0.7;
}

/* ==========================================================================
   STILI MENU CONTESTUALE (COMPATTO & PRO)
   ========================================================================== */

.bs-appointment-context-menu {
    background-color: #fff;
    border: 1px solid #d1d5db;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
    padding: 5px 0;
    list-style: none;
    margin: 0;
    min-width: 240px; /* Un po' più largo per i testi lunghi */
    border-radius: 6px;
    position: absolute;
    z-index: 99999;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.bs-appointment-context-menu li {
    padding: 8px 15px; /* Interlinea ridotta */
    cursor: pointer;
    font-size: 12px;
    color: #374151;
    display: flex;
    align-items: center;
    transition: background 0.1s;
    line-height: 1.2;
}

.bs-appointment-context-menu li:hover {
    background-color: #f3f4f6;
    color: #111827;
}

.bs-appointment-context-menu li i {
    width: 20px;
    text-align: center;
    margin-right: 10px;
    font-size: 14px;
}

/* Divisore compatto */
.bs-menu-divider {
    height: 1px;
    background: #e5e7eb;
    margin: 4px 0 !important;
    padding: 0 !important;
    pointer-events: none;
}

/* Header di sezione nel menu */
.bs-menu-header {
    font-size: 8px;
    text-transform: uppercase;
    color: #9ca3af;
    padding: 4px 15px;
    font-weight: 700;
    letter-spacing: 0.5px;
    cursor: default !important;
    pointer-events: none;
}
.bs-menu-header:hover { background: none !important; }







/* ==========================================================================
   STILI CARD APPUNTAMENTO vFinal (Compact & Colored)
   ========================================================================== */

.bs-daily-planner .bs-appointment-card {
    position: absolute;
    left: 2px;
    right: 4px;
    
    /* SFONDO E BORDI: Definiti inline dal PHP/JS, qui i fallback */
    background-color: var(--service-color, #3B82F6) !important;
    border-left: 5px solid var(--operator-color, #6B7280) !important;
    
    /* LAYOUT COMPATTO */
    padding: 0 5px !important;
    border-radius: 3px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.15);
    
    /* TESTO */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 11px;
    color: #ffffff !important;
    text-shadow: 0 1px 1px rgba(0,0,0,0.3);
    font-weight: 500;
    
    /* FLEXBOX per centrare contenuto anche in slot piccoli */
    display: flex;
    flex-direction: column;
    justify-content: center; 
    overflow: hidden;
    
    z-index: 10;
    transition: transform 0.1s, box-shadow 0.1s, top 0.1s, height 0.1s;
}

.bs-daily-planner .bs-appointment-card:hover {
    z-index: 50;
    transform: scale(1.02);
    box-shadow: 0 5px 15px rgba(0,0,0,0.25);
    /* Nota: NON cambiamo il background in hover per mantenere il colore del servizio */
    filter: brightness(1.1); 
}

/* RIGA HEADER UNICA */
.bs-card-header-line {
    display: flex;
    align-items: center; /* Centratura verticale perfetta */
    justify-content: space-between;
    width: 100%;
    height: 100%; /* Occupa tutta l'altezza dello slot */
    line-height: 1;
}

/* TESTO A SINISTRA */
.bs-card-header-text {
    display: flex;
    align-items: center;
    gap: 4px;
    overflow: hidden;
    white-space: nowrap;
    margin-right: 5px;
    flex-grow: 1;
}

/* Badge ID */
.bs-app-id-badge {
    font-family: monospace;
    background-color: rgba(0,0,0,0.25);
    padding: 1px 4px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 700;
    opacity: 0.9;
}

.bs-header-time { font-weight: 700; font-size: 11px; }
.bs-header-sep { opacity: 0.5; font-size: 10px; }
.bs-header-client { font-weight: 700; text-transform: uppercase; font-size: 11px; }
.bs-header-service { font-style: italic; opacity: 0.9; font-size: 11px; }

/* STACK ICONE A DESTRA */
.bs-card-icons-stack {
    display: flex;
    align-items: center;
    vertical-align: middle;
    gap: 4px;
    flex-shrink: 0;
}

/* ICONE SEMAFORO */
.bs-card-icon {
    width: 24px !important;
    height: 24px !important;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    font-size: 10px !important;
    color: white;
    border: 1px solid rgba(255,255,255,0.5);
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

/* Colori Icone (Override con !important per sicurezza) */
.bs-icon-status-confirmed { background-color: #10B981 !important; } /* Verde */
.bs-icon-status-pending   { background-color: #F59E0B !important; } /* Giallo */
.bs-icon-status-completed { background-color: #06B6D4 !important; } /* Ciano */
.bs-icon-status-cancelled { background-color: #EF4444 !important; } /* Rosso */
.bs-icon-status-no-show   { background-color: #6B7280 !important; } /* Grigio */

.bs-icon-pay-ok   { background-color: #10B981 !important; }
.bs-icon-pay-no   { background-color: #F59E0B !important; }

.bs-icon-note     { background-color: #ffffff !important; color: #333 !important; }

.bs-icon-source-online   { background-color: #3B82F6 !important; }
.bs-icon-source-internal { background-color: #64748b !important; }




/* ==========================================================================
   STILI POPOVER (Hover Dettagli)
   ========================================================================== */

.bs-appointment-popover {
    position: absolute;
    background: #ffffff;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    padding: 0; /* Reset per header/body */
    width: 280px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    z-index: 999999; /* Sopra a tutto */
    pointer-events: none; /* Mouse passa attraverso */
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.15s ease, transform 0.15s ease;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: #1f2937;
    overflow: hidden;
}

.bs-appointment-popover.visible {
    opacity: 1;
    transform: translateY(0);
}

.bs-pop-header {
    background-color: #f8fafc;
    padding: 12px 15px;
    border-bottom: 1px solid #e5e7eb;
}
.bs-pop-time { font-size: 11px; font-weight: 700; color: #64748b; text-transform: uppercase; margin-bottom: 2px; }
.bs-pop-client { display: block; font-size: 15px; font-weight: 700; color: #111827; }
.bs-pop-service { display: block; font-size: 13px; color: var(--bs-primary-color); font-weight: 500; margin-top: 2px; }

.bs-pop-body {
    padding: 15px;
}

/* Griglia Dettagli (Durata/Prezzo) */
.bs-pop-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 15px;
}
.bs-pop-stat {
    background: #f9fafb;
    border-radius: 6px;
    padding: 8px;
    text-align: center;
    border: 1px solid #f1f5f9;
}
.bs-pop-stat i { font-size: 14px; margin-bottom: 4px; display: block; color: #6b7280; }
.bs-pop-stat span { font-weight: 700; font-size: 14px; color: #374151; display: block; }
.bs-pop-stat.price span { color: #059669; }

/* Note Post-it */
.bs-pop-notes {
    background-color: #fef9c3; /* Giallo post-it */
    border: 1px solid #fde047;
    border-left: 4px solid #eab308;
    color: #854d0e;
    padding: 10px;
    border-radius: 4px;
    font-size: 12px;
    font-style: italic;
    line-height: 1.4;
    display: flex;
    gap: 8px;
}
.bs-pop-notes i { margin-top: 2px; }

/* Footer Stato */
.bs-pop-footer {
    padding: 8px 15px;
    background-color: #f8fafc;
    border-top: 1px solid #e5e7eb;
    font-size: 11px;
    display: flex;
    justify-content: space-between;
    color: #64748b;
}

/* ==========================================================================
   MOBILE & TOUCH: MENU CONTESTUALE (BOTTOM SHEET)
   ========================================================================== */

@media screen and (max-width: 768px) {
    /* Trasforma il menu contestuale in un pannello che sale dal basso */
    .bs-appointment-context-menu {
        position: fixed !important;
        top: auto !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        min-width: 100% !important;
        
        border-radius: 20px 20px 0 0 !important; /* Arrotonda solo sopra */
        box-shadow: 0 -5px 25px rgba(0,0,0,0.2) !important;
        border: none !important;
        padding: 20px 0 !important;
        
        animation: bsSlideUpMenu 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
        z-index: 100000 !important; /* Sopra a tutto */
        
        display: flex;
        flex-direction: column;
        max-height: 80vh;
        overflow-y: auto;
    }

    /* Voci del menu più grandi per il dito */
    .bs-appointment-context-menu li {
        padding: 15px 25px !important;
        font-size: 16px !important;
        border-bottom: 1px solid #f3f4f6;
    }
    
    .bs-appointment-context-menu li i {
        font-size: 18px !important;
        margin-right: 15px !important;
        width: 24px;
        text-align: center;
    }

    /* Header e Divisori */
    .bs-menu-header {
        font-size: 12px !important;
        background-color: #f9fafb;
        padding: 10px 25px !important;
    }
    
    /* Overlay scuro dietro il menu (generato via JS o simulato) */
    body.bs-menu-open::after {
        content: '';
        position: fixed;
        top: 0; left: 0; width: 100%; height: 100%;
        background: rgba(0,0,0,0.5);
        z-index: 99999;
        pointer-events: none; /* Lascia passare click per chiudere */
    }
}

@keyframes bsSlideUpMenu {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}



/* ==========================================================================
   FIX MOBILE TOUCH (Disabilita callout nativi per Long Press)
   ========================================================================== */
.bs-appointment-card, 
.bs-week-appointment-card {
    /* Impedisce la selezione del testo */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    
    /* Impedisce il menu contestuale nativo del browser (iOS/Android) */
    -webkit-touch-callout: none; 
    
    /* Migliora la reattività del tocco */
    touch-action: manipulation; 
}



/* ==========================================================================
   SISTEMA STORICO POS - OTTIMIZZATO E AGGIORNATO
   ========================================================================== */

/* --- 1. STRUTTURA BASE E SBLOCCO CONTENITORE --- */
#bs-pos-history-view.bs-pos-grid {
    display: block;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

#bs-pos-history-view table.wp-list-table,
#bs-pos-history-view table {
    width: 100% !important;
    margin: 0 !important;
    border-collapse: collapse !important;
    table-layout: auto !important; /* Prevale l'ultima impostazione "auto" */
}

#bs-pos-history-view[style*="display: none"],
#bs-pos-history-view[style*="display:none"] {
    display: none !important;
}

/* --- 2. LAYOUT DESKTOP (Default / Schermi Grandi) --- */
#bs-pos-history-view th, 
#bs-pos-history-view td {
    padding: 12px 10px !important; /* Prevale l'ultima impostazione 10px */
    vertical-align: middle !important;
    white-space: nowrap !important; /* Prevale l'ultima impostazione nowrap */
}

/* Colonna Cliente (3): Permesso di espandersi e andare a capo */
#bs-pos-history-view td:nth-child(3) {
    white-space: normal !important;
    width: auto;
}

/* Colonna Totale (5): Allineata a destra con margine di sicurezza */
#bs-pos-history-view td:nth-child(5) {
    text-align: right !important;
    font-weight: 700;
    padding-right: 25px !important; /* Ultima impostazione: spazio vitale */
}

/* Cella Azioni: Torna ad essere un TD standard come da ultimo fix */
#bs-pos-history-view th:last-child, 
#bs-pos-history-view td.bs-actions-cell {
    display: table-cell !important;
    text-align: right !important;
    width: 100px !important; /* Prevale l'ultima impostazione 100px */
    vertical-align: middle !important;
    white-space: nowrap;
}

/* Wrapper interno e Bottoni (Desktop) */
.bs-actions-wrapper,
#bs-pos-history-view .bs-actions-cell {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 8px !important;
}

.bs-actions-wrapper button,
#bs-pos-history-view .bs-actions-cell button {
    flex: 0 0 34px !important; /* Prevale l'ultima impostazione 34px */
    width: 34px !important;
    height: 34px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
}

/* --- 3. LAYOUT CARD (Tablet e Mobile < 1800px) --- */
@media screen and (max-width: 1800px) {
    /* Reset Tabella in Blocchi */
    #bs-pos-history-view table.wp-list-table, 
    #bs-pos-history-view tbody, 
    #bs-pos-history-view tr, 
    #bs-pos-history-view td {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box !important;
        height: auto !important;
    }

    /* Nascondi Intestazioni Tabella */
    #bs-pos-history-view thead { 
        display: none !important; 
    }

    /* Stile Card */
    #bs-pos-history-view tr {
        background-color: #fff;
        margin-bottom: 20px;
        border: 1px solid #e5e7eb;
        border-radius: 12px;
        box-shadow: 0 4px 15px rgba(0,0,0,0.05);
        overflow: hidden;
        position: relative;
    }

    /* Stile Celle Card */
    #bs-pos-history-view td {
        padding: 8px 20px !important;
        text-align: left !important;
        border: none !important;
        font-size: 14px;
        color: var(--bs-text-dark);
        white-space: normal !important; /* Sulle card il testo può andare a capo */
    }

    /* Rimuovi label ::before */
    #bs-pos-history-view td::before {
        content: none !important;
        display: none !important;
    }

    /* Gerarchia Visiva Dati Card */
    #bs-pos-history-view td:nth-child(1) {
        background-color: #f8fafc;
        border-bottom: 1px solid #e2e8f0 !important;
        font-weight: 800;
        font-size: 16px;
        padding: 15px 20px !important;
        color: #1e293b;
    }

    #bs-pos-history-view td:nth-child(2) {
        padding-top: 15px !important;
        font-size: 13px;
        color: #64748b;
        font-weight: 500;
    }

    #bs-pos-history-view td:nth-child(3) {
        font-size: 18px;
        font-weight: 700;
        color: #0f172a;
        padding-bottom: 5px !important;
    }

    #bs-pos-history-view td:nth-child(4) {
        color: #475569;
        font-style: italic;
    }

    #bs-pos-history-view td:nth-child(5) {
        font-size: 20px;
        font-weight: 800;
        color: var(--bs-primary-color);
        padding-bottom: 20px !important;
        text-align: left !important; /* Allineamento a sinistra sulle card */
    }

    /* Footer Card (Bottoni Azione) */
    #bs-pos-history-view td.bs-actions-cell {
        display: block !important;
        width: 100% !important;
        background-color: #f9fafb;
        border-top: 1px solid #e2e8f0 !important;
        padding: 15px 20px !important;
        text-align: center !important;
    }

    .bs-actions-wrapper {
        display: flex !important;
        justify-content: center !important;
        gap: 15px !important;
        padding: 10px 0;
        width: 100%;
    }

    /* Bottoni Grandi per Card */
    #bs-pos-history-view .bs-actions-cell button,
    .bs-actions-wrapper button {
        flex: 1 1 auto !important; /* Permette di occupare lo spazio */
        width: 100% !important;
        max-width: 200px;
        height: 44px !important;
        font-size: 18px !important;
        border-radius: 8px !important;
    }
}

/* --- 4. STATI SPECIALI (VOIDED / ANNULLATO) --- */
#bs-pos-history-view tr.bs-row-voided td {
    background-color: #fef2f2 !important;
    color: #991b1b !important;
}

#bs-pos-history-view tr.bs-row-voided td:nth-child(1) {
    background-color: #fee2e2 !important;
}

#bs-pos-history-view tr.bs-row-voided span[style*="line-through"] {
    color: #ef4444 !important;
    opacity: 0.7;
}

/* ==========================================================================
   STILI AGGIUNTIVI POS (Chiusura, Park, Email)
   ========================================================================== */

/* --- 1. MODALE CHIUSURA GIORNALIERA --- */

/* Stile della tabella generata via JS */
#bs-daily-report-content table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

#bs-daily-report-content td {
    padding: 10px 0;
    border-bottom: 1px dashed var(--bs-border-color-light);
    color: var(--bs-text-dark);
}

/* Rimuovi bordo dall'ultima riga dati */
#bs-daily-report-content tr:last-child td {
    border-bottom: none;
}

/* Riga del Totale Generale */
#bs-daily-report-content tr[style*="border-top"] td {
    padding-top: 15px !important;
    padding-bottom: 5px !important;
    font-size: 1.2em;
    font-weight: 800;
    color: var(--bs-text-dark);
    border-top: 2px solid var(--bs-text-dark) !important;
    border-bottom: none !important;
}

/* Colore importo totale */
#bs-daily-report-content tr[style*="border-top"] td:last-child {
    color: var(--bs-primary-color);
}


/* --- 2. PULSANTE "RIPRENDI VENDITA" (Animazione Pulse) --- */

/* Quando c'è una vendita sospesa, il bottone deve attirare l'attenzione */
.bs-pulse-animation {
    background-color: var(--bs-warning-color-light) !important;
    color: var(--bs-warning-color-dark) !important;
    border-color: var(--bs-warning-color) !important;
    font-weight: 700 !important;
    animation: bsPulseSoft 2s infinite;
}

@keyframes bsPulseSoft {
    0% {
        box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.4);
    }
    70% {
        box-shadow: 0 0 0 6px rgba(245, 158, 11, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(245, 158, 11, 0);
    }
}

/* Badge numero carrelli sospesi */
#bs-parked-count {
    background-color: var(--bs-warning-color);
    color: #fff;
    font-size: 10px;
    padding: 1px 5px;
    border-radius: 10px;
    margin-left: 5px;
    vertical-align: middle;
}


/* --- 3. INPUT EMAIL NELLA MODALE SCONTRINO --- */

/* Contenitore Input + Bottone */
#bs-receipt-modal input[type="email"] {
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    padding: 0 12px;
    height: 40px; /* Altezza standard bottoni */
    font-size: 14px;
    transition: all 0.2s;
    background-color: var(--bs-bg-light);
}

#bs-receipt-modal input[type="email"]:focus {
    border-color: var(--bs-primary-color);
    background-color: #fff;
    box-shadow: 0 0 0 2px var(--bs-primary-color-light);
    outline: none;
}

/* Bottone Invio Email (Icona) */
#bs-email-receipt-btn {
    width: 40px !important; /* Quadrato */
    height: 40px !important;
    padding: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--bs-border-radius);
    background-color: var(--bs-info-color) !important;
    border-color: var(--bs-info-color) !important;
    color: white !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

#bs-email-receipt-btn:hover {
    background-color: var(--bs-info-color-dark) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

/* --- 4. AREA DI STAMPA SCONTRINO --- */
/* Assicura che l'area bianca dello scontrino sia ben definita anche nella modale */
#bs-receipt-print-area {
    background-color: #fff;
    border: 1px solid #e5e7eb;
    box-shadow: 0 2px 10px rgba(0,0,0,0.03);
    margin-bottom: 15px;
}

/* Pulsante Riprendi */
#bs-pos-resume-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px; /* Spazio uniforme */
    white-space: nowrap; /* Impedisce al testo di andare a capo */
}

/* Badge numero nel pulsante */
#bs-parked-count {
    background-color: rgba(0,0,0,0.15);
    color: inherit;
    font-size: 0.85em;
    padding: 2px 8px;
    border-radius: 12px;
    line-height: 1;
    font-weight: 700;
    margin: 0 !important; /* Rimuovi margini che disallineano */
    display: inline-block;
    vertical-align: baseline;
}

/* Stile Disabilitato per Riprendi */
#bs-pos-resume-btn.bs-btn-disabled {
    cursor: not-allowed;
    background-color: #f3f4f6;
    color: #9ca3af;
    border-color: #e5e7eb;
    box-shadow: none;
}
#bs-pos-resume-btn.bs-btn-disabled i {
    color: #9ca3af;
}


/* ==========================================================================
   RESOURCE HUD STICKY - DESIGN PREMIUM "TOWER CONTROL"
   ========================================================================== */

/* 1. Contenitore Principale Sticky */
.bs-resource-hud-sticky {
    position: -webkit-sticky;
    position: sticky;
    /* Offset standard sotto la Control Bar (62px) */
    top: 62px; 
    z-index: 990; /* Sopra al contenuto del planner, sotto ai dropdown dell'header */
    
    /* Effetto Vetro (Glass-morphism) */
    background-color: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px); 
    -webkit-backdrop-filter: blur(10px);
    
    padding: 10px 30px;
    border-bottom: 1px solid #e2e8f0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    margin-bottom: 0;
    transition: all 0.3s ease;
}

/* Correzione automatica se l'utente ha la barra di admin di WordPress attiva */
body.admin-bar .bs-resource-hud-sticky {
    top: 94px; /* 32px (WP Admin Bar) + 62px (Adone Control Bar) */
}

/* 2. Layout Interno */
.bs-hud-container {
    display: flex;
    align-items: center;
    max-width: 100%;
    margin: 0 auto;
    gap: 20px;
}

/* Etichetta Laterale */
.bs-hud-label {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-right: 20px;
    border-right: 2px solid #f1f5f9;
    white-space: nowrap;
    flex-shrink: 0;
}

.bs-hud-label i {
    color: var(--bs-primary-color);
    font-size: 18px;
    filter: drop-shadow(0 2px 4px rgba(59, 130, 246, 0.2));
}

.bs-hud-label span {
    font-size: 11px;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 1px;
    color: #64748b;
}

.bs-hud-label span strong {
    color: var(--bs-primary-color);
    background: var(--bs-primary-color-light);
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 5px;
}

/* 3. Area Scrollabile delle Risorse */
.bs-hud-scroll {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding: 4px 0;
    flex-grow: 1;
    /* Nasconde scrollbar */
    scrollbar-width: none; 
    -ms-overflow-style: none;
}
.bs-hud-scroll::-webkit-scrollbar { display: none; }

/* 4. La Pillola (Card Risorsa) */
.bs-hud-pill {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 6px 15px;
    min-width: 130px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    border-left: 4px solid #cbd5e1; /* Default grigio */
}

.bs-hud-pill:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.08);
}

.bs-hud-pill .pill-name {
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    color: #475569;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bs-hud-pill .pill-stats {
    font-size: 14px;
    font-weight: 800;
    color: var(--bs-text-dark);
    margin-bottom: 4px;
}

.bs-hud-pill .pill-stats strong {
    color: inherit;
}

/* Micro progress bar interna */
.pill-progress {
    height: 4px;
    background: #f1f5f9;
    border-radius: 2px;
    overflow: hidden;
}

.pill-bar {
    height: 100%;
    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 5. Stati Dinamici (Colori) */
.bs-hud-pill.is-free { border-left-color: var(--bs-success-color); }
.bs-hud-pill.is-free .pill-bar { background-color: var(--bs-success-color); }

.bs-hud-pill.is-busy { border-left-color: var(--bs-warning-color); }
.bs-hud-pill.is-busy .pill-bar { background-color: var(--bs-warning-color); }

.bs-hud-pill.is-full { 
    border-left-color: var(--bs-error-color); 
    background-color: #fff1f2; 
}
.bs-hud-pill.is-full .pill-bar { background-color: var(--bs-error-color); }
.bs-hud-pill.is-full .pill-name, 
.bs-hud-pill.is-full .pill-stats { color: #9f1239; }

/* 6. CORREZIONE HEADER PLANNER GIORNALIERO */
/* L'header del planner deve scendere per non finire SOTTO l'HUD sticky */
.bs-daily-planner .bs-planner-header {
    position: sticky;
    /* Somma di: Control Bar (62px) + HUD (circa 58px) = 120px */
    top: 120px; 
    z-index: 980;
}

body.admin-bar .bs-daily-planner .bs-planner-header {
    top: 152px; /* 32px (WP) + 120px */
}

/* 7. Responsive Mobile */
@media screen and (max-width: 782px) {
    .bs-resource-hud-sticky {
        position: relative; /* Su mobile meglio liberare spazio sullo schermo */
        top: 0 !important;
        padding: 10px 15px;
    }
    .bs-daily-planner .bs-planner-header {
        top: 0 !important;
        position: relative;
    }
    .bs-hud-label {
        padding-right: 10px;
    }
    .bs-hud-label span { font-size: 9px; }
}

/* ==========================================================================
   ADONE - TRIPLE STICKY ENGINE (FORCE RESET & ALIGN)
   ========================================================================== */

/* --- 0. RESET CONTENITORI (Fondamentale per lo sticky) --- */
/* Rimuoviamo ogni overflow che "sequestra" lo scroll della pagina */
.bs-dashboard-main, 
.bs-main-content-scrollable, 
.bs-content-area {
    overflow: visible !important;
    display: block !important;
}

/* --- 1. BARRA CONTROLLI (Scura) --- */
.bs-main-controls {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 0 !important;
    height: 62px !important;
    z-index: 1100 !important;
    background-color: #3A2F2A !important;
    margin: 0 !important;
    padding: 0 20px !important;
    display: flex !important;
    align-items: center !important;
    border: none !important;
}

/* --- 2. RESOURCE HUD (Vetro) --- */
.bs-resource-hud-sticky {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 62px !important; /* Esattamente sotto la barra */
    height: 70px !important;
    z-index: 1090 !important;
    background: rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: blur(10px) !important;
    border-bottom: 1px solid #e2e8f0 !important;
    margin: 0 !important;
    padding: 0 20px !important;
    display: flex !important;
    align-items: center !important;
    box-sizing: border-box !important;
}

/* --- 3. HEADER PLANNING (Nomi Operatori) --- */
/* Questo div è dentro .bs-planner.bs-daily-planner */
.bs-daily-planner .bs-planner-header, .bs-operator-view-planner .bs-planner-header {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 132px !important; /* 62 + 70 */
    height: 50px !important;
    z-index: 1080 !important;
    background-color: #F3F4F6 !important;
    border-bottom: 2px solid #cbd5e1 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05) !important;
}

/* --- CORREZIONE PER ADMIN BAR DI WORDPRESS --- */
body.admin-bar .bs-main-controls { top: 32px !important; }
body.admin-bar .bs-resource-hud-sticky { top: 94px !important; }
body.admin-bar .bs-daily-planner .bs-planner-header { top: 159px !important; }

/* --- IL CORNER "ORA" (Incrocio X/Y) --- */
.bs-daily-planner .bs-time-col-header {
    position: -webkit-sticky !important;
    position: sticky !important;
    left: 0 !important;
    top: 0 !important;
    z-index: 1095 !important; /* Sopra l'header nomi */
    background-color: #F3F4F6 !important;
    width: 70px !important;
    height: 50px !important;
    flex-shrink: 0 !important;
    border-right: 1px solid #cbd5e1 !important;
}

/* --- LA COLONNA DELLE ORE (Solo Sticky Orizzontale) --- */
.bs-daily-planner .bs-time-col {
    position: -webkit-sticky !important;
    position: sticky !important;
    left: 0 !important;
    z-index: 950 !important;
    background-color: #f8fafc !important;
    border-right: 1px solid #cbd5e1 !important;
    width: 70px !important;
    flex-shrink: 0 !important;
}

/* --- RESET DEL PLANNER (Evita interferenze con lo sticky) --- */
.bs-planner.bs-daily-planner {
    overflow: visible !important; /* Rimuove lo scroll interno che rompe lo sticky verticale */
    border-top: none !important;
    background: transparent !important;
}

.bs-planner-grid {
    display: block !important; /* Reset flex se presente */
}

/* Consente lo scroll orizzontale senza rompere lo sticky verticale */
.bs-planner-body {
    display: flex !important;
    overflow-x: auto !important;
    position: relative !important;
}

/* --- MULTI-SELECT OPERATORI STYLE --- */
.bs-multi-select-wrapper { position: relative; margin-right: 10px; }
.bs-multi-select-trigger {
    background: rgba(255,255,255,0.1) !important;
    border: 1px solid rgba(255,255,255,0.3) !important;
    color: #fff !important;
    padding: 0 15px !important;
    height: 38px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 180px;
    font-weight: 500;
}
.bs-multi-select-trigger:hover { background: rgba(255,255,255,0.2) !important; }

.bs-multi-select-dropdown {
    position: absolute;
    top: 100%; left: 0; width: 260px;
    background: #fff; border: 1px solid #d1d5db;
    border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    display: none; z-index: 2100; margin-top: 10px;
    padding: 0; overflow: hidden;
    animation: bsFadeIn 0.2s ease-out;
}

.bs-multi-select-header { padding: 12px 15px; background: #f9fafb; border-bottom: 1px solid #eee; }
.bs-multi-select-body { max-height: 280px; overflow-y: auto; padding: 5px 0; }
.bs-op-checkbox-item {
    display: flex; align-items: center; padding: 8px 15px;
    cursor: pointer; transition: background 0.2s; font-size: 13px; color: #333;
}
.bs-op-checkbox-item:hover { background: #f0f9ff; }
.bs-op-checkbox-item input { margin-right: 12px; }
.bs-op-swatch { width: 10px; height: 10px; border-radius: 50%; margin-right: 8px; flex-shrink: 0; }

.bs-multi-select-footer { padding: 12px 15px; border-top: 1px solid #eee; background: #f9fafb; }

.bs-multi-select-header {
    padding: 12px 15px;
    background: #f8fafc;
    border-bottom: 1px solid #eee;
}

.bs-multi-select-header label {
    color: var(--bs-text-dark) !important; /* Forza colore scuro */
    font-size: 13px;
    display: flex;
    align-items: center;
    cursor: pointer;
}

.bs-multi-select-header input[type="checkbox"] {
    margin-right: 10px !important;
}

/* Pulsante Conferma più elegante */
#bs-apply-ops-filter {
    width: 100%;
    background-color: var(--bs-primary-color) !important;
    border: 1px solid var(--bs-primary-color-dark) !important;
    color: #fff !important;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 10px;
    border-radius: 6px;
    transition: all 0.2s ease;
    cursor: pointer;
}

#bs-apply-ops-filter:hover {
    background-color: var(--bs-primary-color-dark) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

/* Badge indicatore nel trigger */
.bs-trigger-label {
    font-weight: 600;
    /* Impedisce al testo lungo di spingere via gli altri filtri */
    max-width: 150px; 
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    vertical-align: middle;
}

/* COLLISION INDICATORS */
.ui-draggable-dragging, .ui-resizable-resizing {
    transition: background-color 0.2s ease !important;
    box-shadow: 0 10px 25px rgba(0,0,0,0.3) !important;
}

/* Feedback Visivo Drag & Resize - Forza il colore sopra lo stile inline */
.bs-appointment-card.bs-dragging-ok {
    background-color: #10b981 !important; /* Verde Adone */
    box-shadow: 0 0 20px rgba(16, 185, 129, 0.5) !important;
    z-index: 100001 !important;
}

.bs-appointment-card.bs-dragging-collision {
    background-color: #ef4444 !important; /* Rosso Adone */
    box-shadow: 0 0 20px rgba(239, 68, 68, 0.5) !important;
    z-index: 100001 !important;
}

/* Colora anche l'HUD temporale interno */
.bs-dragging-ok .bs-drag-time-indicator, 
.bs-dragging-ok .bs-resize-time-indicator { background: #059669 !important; }

.bs-dragging-collision .bs-drag-time-indicator, 
.bs-dragging-collision .bs-resize-time-indicator { background: #b91c1c !important; }

/* FEEDBACK DRAG & RESIZE - SPECIFICITÀ MASSIMA */
body .bs-appointment-card.bs-dragging-ok {
    background-color: #10b981 !important; /* Verde Adone */
    background-image: none !important;
    box-shadow: 0 10px 30px rgba(16, 185, 129, 0.5) !important;
    opacity: 0.95 !important;
    z-index: 100000 !important;
}

body .bs-appointment-card.bs-dragging-collision {
    background-color: #ef4444 !important; /* Rosso Adone */
    background-image: none !important;
    box-shadow: 0 10px 30px rgba(239, 68, 68, 0.5) !important;
    opacity: 0.95 !important;
    z-index: 100000 !important;
}

/* Colore indicatori HUD durante il drag */
.bs-dragging-ok .bs-drag-time-indicator { background: #059669 !important; border-color: #fff !important; }
.bs-dragging-collision .bs-drag-time-indicator { background: #b91c1c !important; border-color: #fff !important; }

/* FEEDBACK COLLISIONE - SPECIFICITÀ ATOMICA */
/* Usiamo l'ID del contenitore padre per vincere su tutto */
#bs-booking-steps .bs-appointment-card.bs-dragging-ok,
body .bs-appointment-card.ui-draggable-dragging.bs-dragging-ok {
    background-color: #10b981 !important; /* Verde Adone */
    background-image: none !important;
    opacity: 0.9 !important;
    box-shadow: 0 10px 30px rgba(16, 185, 129, 0.6) !important;
    z-index: 100000 !important;
}

#bs-booking-steps .bs-appointment-card.bs-dragging-collision,
body .bs-appointment-card.ui-draggable-dragging.bs-dragging-collision {
    background-color: #ef4444 !important; /* Rosso Adone */
    background-image: none !important;
    opacity: 0.9 !important;
    box-shadow: 0 10px 30px rgba(239, 68, 68, 0.6) !important;
    z-index: 100000 !important;
}

/* Fix per assicurare che il mouse non "sbatta" contro la card stessa */
.ui-draggable-dragging {
    pointer-events: none !important;
}

/* ==========================================================================
   FIX RESET SFONDO PLANNING (Elimina ombreggiatura ore 08-13)
   ========================================================================== */

/* 1. Forza lo sfondo delle colonne a essere pulito */
.bs-daily-planner .bs-operator-col {
    background-color: #ffffff !important; /* O il colore di base del tuo planning */
    background-image: repeating-linear-gradient(
        to bottom,
        transparent,
        transparent 119px,
        #e2e8f0 119px,
        #e2e8f0 120px
    ) !important; /* Riscriviamo solo le linee orarie, senza colori di fondo */
    background-attachment: local !important;
}

/* 2. Assicurati che non ci siano pseudo-elementi che creano ombre */
.bs-daily-planner .bs-operator-col::before,
.bs-daily-planner .bs-operator-col::after {
    display: none !important;
}

/* 3. Se avevi una regola per le zone "passate", assicurati che non si attivi per errore */
.bs-past-time-overlay {
    display: none !important; /* Disabilita se non la usiamo specificamente */
}

/* 4. Resetta il colore della colonna orari a sinistra se necessario */
.bs-daily-planner .bs-time-col {
    background-color: #f8fafc !important; /* Grigio chiarissimo per la colonna ore */
}

/* 5. FIX PER EVITARE EFFETTI HOVER RESIDUI */
.bs-time-slot {
    background-color: transparent !important;
}

.bs-daily-planner .bs-planner-body {
    padding-bottom: 0 !important;
}

@keyframes bsShake {
    0%, 100% { transform: translate(-50%, -50%); }
    25% { transform: translate(-52%, -50%); }
    75% { transform: translate(-48%, -50%); }
}

/* Assicurati che lo z-index delle zone indisponibili sia corretto */
.bs-unavailable-overlay-wrapper {
    z-index: 5 !important;
}

.bs-drag-time-indicator .bs-indicator-label {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 250px; /* Aumentato per contenere nome + motivo */
}

/* Colore specifico per avvisi operatore in Resource View */
.bs-dragging-collision[data-operator-id] .bs-drag-time-indicator {
    border: 2px solid #fff;
    box-shadow: 0 0 15px rgba(0,0,0,0.5);
}

.bs-drag-time-indicator {
    min-width: 180px !important;
    padding: 10px 15px !important;
}

.bs-drag-time-indicator .bs-indicator-label {
    font-size: 11px !important;
    white-space: normal !important; /* Permette il wrap se il nome è lungo */
    line-height: 1.2;
    display: block;
    margin-bottom: 4px;
}


/* Animazione di successo al rilascio della card */
.bs-app-card-success-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(16, 185, 129, 0.2); /* Sfondo verde trasparente */
    color: #fff; font-size: 24px; z-index: 200; pointer-events: none;
    animation: bsCheckSplash 0.5s ease-out forwards;
}

@keyframes bsCheckSplash {
    0% { opacity: 0; transform: scale(0.5); }
    50% { opacity: 1; transform: scale(1.2); }
    100% { opacity: 0; transform: scale(1.5); }
}


/* ==========================================================================
   SPOTLIGHT SEARCH - EFFETTI VISIVI
   ========================================================================== */

/* Wrapper Input nella barra scura */
.bs-planner-search-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.bs-planner-search-wrapper i.fa-search {
    position: absolute;
    left: 12px;
    font-size: 14px;
    color: #ffffff !important; /* Bianco puro */
    opacity: 1 !important;     /* Rimuove la trasparenza */
    pointer-events: none;
    z-index: 5;
}

#bs-live-search {
    width: 160px !important;
    height: 36px !important;
    background: rgba(255, 255, 255, 0.15) !important; /* Sfondo leggermente più chiaro */
    border: 1px solid rgba(255, 255, 255, 0.4) !important; /* Bordo più visibile */
    border-radius: 20px !important;
    padding: 0 35px !important;
    color: #ffffff !important; /* Bianco puro per il testo digitato */
    font-size: 13px !important;
    font-weight: 500 !important;
    transition: all 0.2s ease !important;
}

#bs-live-search::placeholder { color: #ffffff !important; opacity: 0.8 !important; }
#bs-live-search::-webkit-input-placeholder { color: #ffffff !important; opacity: 0.8 !important; }
#bs-live-search::-moz-placeholder { color: #ffffff !important; opacity: 0.8 !important; }
#bs-live-search:-ms-input-placeholder { color: #ffffff !important; opacity: 0.8 !important; }

#bs-live-search:focus {
    width: 280px; /* Si allunga quando ci clicchi */
    background: rgba(255,255,255,0.2) !important;
    border-color: var(--bs-primary-color) !important;
    outline: none;
}


/* --- RICERCA LIVE - BIANCO PURO E ALTA VISIBILITÀ --- */

/* 1. L'icona della lente */
.bs-planner-search-wrapper i.fa-search {
    position: absolute;
    left: 12px;
    font-size: 14px;
    color: #ffffff !important; /* Bianco puro */
    opacity: 1 !important;     /* Rimuove la trasparenza */
    pointer-events: none;
    z-index: 5;
}

/* 2. Il testo che digiti */
#bs-live-search {
    width: 160px !important;
    height: 36px !important;
    background: rgba(255, 255, 255, 0.15) !important; /* Sfondo leggermente più chiaro */
    border: 1px solid rgba(255, 255, 255, 0.4) !important; /* Bordo più visibile */
    border-radius: 20px !important;
    padding: 0 35px !important;
    color: #ffffff !important; /* Bianco puro per il testo digitato */
    font-size: 13px !important;
    font-weight: 500 !important;
    transition: all 0.2s ease !important;
}

/* 3. Il testo del segnaposto (Placeholder "Trova...") */
/* Bisogna dichiararlo per ogni motore di rendering per essere sicuri */
#bs-live-search::placeholder { color: #ffffff !important; opacity: 0.8 !important; }
#bs-live-search::-webkit-input-placeholder { color: #ffffff !important; opacity: 0.8 !important; }
#bs-live-search::-moz-placeholder { color: #ffffff !important; opacity: 0.8 !important; }
#bs-live-search:-ms-input-placeholder { color: #ffffff !important; opacity: 0.8 !important; }

#bs-live-search:focus {
    background: rgba(255, 255, 255, 0.25) !important;
    border-color: #ffffff !important; /* Bordo bianco pieno al focus */
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.1) !important;
    outline: none;
}

/*Pulsante X per pulire (Bianco puro) */
#bs-clear-search {
    position: absolute;
    right: 10px;
    background: none;
    border: none;
    color: #ffffff !important;
    opacity: 0.8;
    cursor: pointer;
    font-size: 14px;
    padding: 5px;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
}
#bs-clear-search:hover { opacity: 1; transform: scale(1.1); }

/* --- EFFETTI SULLE CARD --- */

/* Card che NON corrispondono alla ricerca */
.bs-card-dimmed {
    opacity: 0.15 !important;
    filter: grayscale(100%) blur(1px) !important;
    pointer-events: none !important; /* Impedisce interazioni accidentali */
    transform: scale(0.98);
}

/* Card che CORRISPONDONO alla ricerca */
.bs-card-highlighted {
    opacity: 1 !important;
    z-index: 1000 !important; /* Sopra a tutto */
    transform: scale(1.05) !important;
    box-shadow: 0 0 0 4px #FACC15, 0 15px 30px rgba(0,0,0,0.3) !important; /* Bordo giallo neon */
    animation: bsPulseSearch 1.5s infinite;
}

@keyframes bsPulseSearch {
    0% { box-shadow: 0 0 0 0px rgba(250, 204, 21, 0.7), 0 10px 20px rgba(0,0,0,0.2); }
    70% { box-shadow: 0 0 0 10px rgba(250, 204, 21, 0), 0 10px 20px rgba(0,0,0,0.2); }
    100% { box-shadow: 0 0 0 0px rgba(250, 204, 21, 0), 0 10px 20px rgba(0,0,0,0.2); }
}



/* --- OTTIMIZZAZIONE SPAZI CONTROL BAR --- */
.bs-main-controls {
    display: flex !important;
    flex-wrap: nowrap !important; /* VIETATO andare a capo */
    justify-content: space-between;
    align-items: center;
    overflow: hidden; /* Sicurezza extra */
}

.bs-controls-right {
    display: flex;
    align-items: center;
    gap: 12px; /* Spazio costante tra gli elementi */
    flex-shrink: 0; /* Impedisce al lato destro di rimpicciolirsi troppo */
}

/* --- RICERCA LIVE (Più contenuta) --- */
#bs-live-search {
    width: 140px !important; /* Più stretta di base */
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

#bs-live-search:focus {
    width: 220px !important; /* Si allunga meno per non spingere gli altri */
}

/* --- OROLOGIO (Più compatto) --- */
.bs-dynamic-clock {
    font-size: 1.25em !important;
    padding: 5px 10px !important;
    min-width: 80px;
    justify-content: center;
}

/* --- GRUPPO BOTTONI AZIONE --- */
.bs-action-buttons-group {
    display: flex;
    gap: 8px;
}

/* Stile bottoni ICON-ONLY */
.bs-icon-btn-gold, .bs-icon-btn-main {
    width: 42px !important;
    height: 42px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 8px !important;
    font-size: 18px !important;
    border: none !important;
}

/* Bottone Nota (Gold/Glass) */
.bs-icon-btn-gold {
    background-color: rgba(245, 158, 11, 0.2) !important;
    color: #f59e0b !important;
    border: 1px solid rgba(245, 158, 11, 0.3) !important;
}
.bs-icon-btn-gold:hover {
    background-color: #f59e0b !important;
    color: #fff !important;
}

/* Bottone Prenota (Colore Tema) */
.bs-icon-btn-main {
    background: linear-gradient(135deg, var(--bs-primary-color) 0%, var(--bs-primary-color-dark) 100%) !important;
    color: #fff !important;
    box-shadow: 0 4px 6px rgba(0,0,0,0.2) !important;
}
.bs-icon-btn-main:hover {
    filter: brightness(1.1);
    transform: translateY(-2px);
}



/* ==========================================================================
     ADONE ULTIMATE MOBILE ENGINE v11 - FIXED OVERLAP & FLOW
     Sostituisce integralmente le versioni precedenti
========================================================================== */

@media screen and (max-width: 1024px) {

    /* --- 1. RESET GLOBALE ANTI-BORDI --- */
    html, body { overflow-x: hidden !important; margin: 0 !important; padding: 0 !important; width: 100% !important; }
    .bs-dashboard-wrap, .entry-content, .post-content, .elementor-section { 
        padding: 0 !important; margin: 0 !important; max-width: 100% !important; width: 100% !important; 
    }

    /* --- 2. SIDEBAR E HAMBURGER --- */
    .bs-dashboard-sidebar { transform: translateX(-100%); width: 260px !important; z-index: 10000 !important; position: fixed !important; }
    .bs-dashboard-sidebar.is-open { transform: translateX(0); }
    .bs-sidebar-toggle-btn {
        display: flex !important; position: fixed !important; top: 8px !important; left: 8px !important;
        width: 40px !important; height: 40px !important; z-index: 10001 !important;
        background: rgba(0, 0, 0, 0.4) !important; border: 1px solid rgba(255, 255, 255, 0.2) !important;
        border-radius: 8px !important; color: #fff !important; align-items: center; justify-content: center;
    }

    /* --- 3. HEADER SLIM (Nome Centro + 3 Icone) --- */
    .bs-dashboard-top-header {
        position: relative !important; top: 0 !important;
        display: flex !important; flex-direction: row !important; justify-content: space-between !important;
        align-items: center !important; padding: 0 15px !important; background-color: var(--bs-text-dark) !important;
        height: 50px !important; border-bottom: 1px solid rgba(255,255,255,0.1) !important;
    }
    .bs-dashboard-title-group { padding-left: 50px !important; flex-grow: 1; }
    .bs-dashboard-title-group h1.bs-dashboard-title {
        font-size: 12px !important; margin: 0 !important; color: #fff !important;
        text-align: left !important; justify-content: flex-start !important; border: none !important;
        text-transform: uppercase; letter-spacing: 0.5px;
    }
    .bs-dashboard-title .fas, .bs-dashboard-slogan { display: none !important; }
    .bs-header-actions-right { display: flex !important; gap: 10px !important; }
    .bs-header-icon-btn { font-size: 15px !important; color: rgba(255,255,255,0.8) !important; }

    /* --- 4. CONTROL BAR (Scura) + HUD (Vetro) - SCORREVOLI --- */
    .bs-main-controls, .bs-resource-hud-sticky {
        position: relative !important; /* Scorrono via in verticale */
        top: 0 !important;
        height: auto !important;
        width: 100% !important;
    }

    .bs-main-controls {
        display: flex !important; flex-direction: column !important; padding: 12px 15px !important;
        background-color: #3A2F2A !important; gap: 15px !important;
    }

    /* RIGA 1: DATA E NAVIGAZIONE */
    .bs-period-selector { 
        display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; 
        justify-content: center !important; align-items: center !important; width: 100% !important; gap: 8px !important; 
    }
    .bs-period-selector .bs-nav-button, .bs-date-picker-wrapper, .bs-current-period-display { order: 1 !important; }
    .bs-current-period-display { font-size: 13px !important; color: #fff !important; font-weight: 700 !important; }

    /* Flex-break per mandare i filtri a capo */
    .bs-period-selector::after { content: "" !important; flex-basis: 100% !important; order: 2 !important; }

    /* RIGA 2: FILTRI (Equidistanti) */
    #bs-resource-filter, .bs-multi-select-wrapper, .bs-status-filter-select, select[name="filter_source"] {
        order: 3 !important; flex: 1 1 22% !important; min-width: 0 !important; height: 38px !important;
        font-size: 11px !important; background-color: rgba(255,255,255,0.1) !important; color: white !important;
        border: 1px solid rgba(255,255,255,0.2) !important; border-radius: 6px !important;
    }

    /* RIGA 3: RICERCA E AZIONI */
    .bs-controls-right { 
        width: 100% !important; display: flex !important; flex-direction: row !important; 
        gap: 8px !important; justify-content: space-between !important; order: 4 !important;
    }
    .bs-planner-search-wrapper { flex: 2 !important; }
    #bs-live-search { width: 100% !important; height: 40px !important; }
    .bs-dynamic-clock { display: none !important; }
    .bs-controls-right .button, .bs-controls-right .bs-icon-btn-gold, .bs-controls-right .bs-icon-btn-main {
        flex: 0 0 44px !important; height: 40px !important; padding: 0 !important;
    }

    /* HUD Risorse (Vetro) */
    .bs-resource-hud-sticky {
        background: #fff !important; border-bottom: 1px solid #e2e8f0 !important; padding: 10px 15px !important;
    }

    /* --- 5. IL PLANNER: FIX SOVRAPPOSIZIONE --- */
    .bs-planner.bs-daily-planner {
        display: block !important;
        overflow-x: auto !important; /* Abilita lo scroll laterale */
        overflow-y: visible !important; /* La verticale è gestita dalla pagina */
        -webkit-overflow-scrolling: touch;
        width: 100% !important;
    }


    /* HEADER NOMI: Deve stare sopra al body ma scorrere con esso */
    .bs-daily-planner .bs-planner-header {
        display: flex !important;
        position: relative !important; /* Rimuovi sticky per evitare sovrapposizioni su mobile */
        top: 0 !important;
        z-index: 10 !important;
        height: 50px !important;
        width: 100% !important;
    }

    /* 2. Forza la colonna ore (Header e Body) a restare incollata a sinistra */
    .bs-time-col, 
    .bs-time-col-header {
        position: -webkit-sticky !important; /* Supporto Safari */
        position: sticky !important;
        left: 0 !important; /* Incollata al bordo sinistro del contenitore di scroll */
        
        /* Z-INDEX CRITICO: Deve essere più alto delle card (10) e delle altre colonne */
        z-index: 999 !important; 
        
        /* SFONDO SOLIDO: Fondamentale per non vedere le card passarci sotto */
        background-color: #f8fafc !important; 
        
        /* Dimensioni fisse per evitare calcoli errati del browser */
        width: 60px !important;
        min-width: 60px !important;
        flex: 0 0 60px !important;
        
        /* Estetica: separatore visivo */
        border-right: 2px solid #cbd5e1 !important;
        box-shadow: 2px 0 5px rgba(0,0,0,0.05) !important;
    }

    /* 3. Assicura che i contenitori padri non abbiano proprietà che "tagliano" lo sticky */
    .bs-planner-grid {
        display: inline-flex !important; /* Mantiene la larghezza basata sul contenuto */
        flex-direction: column !important;
        min-width: max-content !important;
        overflow: visible !important; /* Non deve tagliare */
    }

    .bs-planner-header, 
    .bs-planner-body {
        display: flex !important;
        flex-direction: row !important;
        overflow: visible !important; /* Cruciale per permettere alla colonna figlia di essere sticky */
        width: 100% !important;
    }

    /* 4. Z-index specifico per l'incrocio (la cella con testo "ORA") */
    .bs-time-col-header {
        z-index: 1000 !important; /* Ancora più alto per stare sopra all'header nomi durante lo scroll */
    }


    /* COLONNE OPERATORI */
    .bs-operator-col, .bs-operator-col-header {
        width: 200px !important;
        flex: 0 0 200px !important;
        min-width: 200px !important;
    }

    /* --- 6. CARD APPUNTAMENTO --- */
    .bs-appointment-card {
        z-index: 5 !important; /* Sotto la colonna ore */
        padding: 2px 4px !important;
    }
    .bs-card-header-text { font-size: 10px !important; line-height: 1.1 !important; }
    .bs-mini-icon, .bs-card-icon { width: 16px !important; height: 16px !important; font-size: 8px !important; }

    /* --- 7. FIX VISTA SETTIMANALE --- */
    .bs-weekly-planner-agenda .bs-time-col-header,
    .bs-weekly-planner-agenda .bs-operator-row-header {
        width: 110px !important; flex: 0 0 110px !important; min-width: 110px !important;
    }
}

/* Smartphone sotto 600px */
@media screen and (max-width: 600px) {
    .bs-operator-col, .bs-operator-col-header { width: 170px !important; flex: 0 0 170px !important; }
    #bs-resource-filter, .bs-multi-select-wrapper, .bs-status-filter-select, select[name="filter_source"] {
        flex: 1 1 45% !important; max-width: 48% !important;
    }
}


/* --- 1. SBLOCCO CONTENITORE CONTROLLI --- */
.bs-main-controls {
    /* Fondamentale: deve essere superiore all'HUD (1090) */
    z-index: 1100 !important; 
    /* Rimuovi assolutamente overflow: hidden se presente, altrimenti il dropdown viene tagliato */
    overflow: visible !important; 
}

/* --- 2. SBLOCCO SELETTORE PERIODI --- */
.bs-period-selector {
    /* Anche i contenitori intermedi devono permettere la visualizzazione esterna */
    overflow: visible !important;
}

/* --- 3. IL DROPDOWN MULTI-SELECT --- */
.bs-multi-select-dropdown {
    /* Z-index estremo per vincere su tutto il resto della pagina */
    z-index: 999999 !important; 
    /* Posizionamento assoluto rispetto alla control bar */
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    /* Assicurati che non venga tagliato lateralmente su mobile */
    min-width: 260px;
}

/* ==========================================================================
   SPECIFIC FIX PER VIEW-OPERATOR (SINGOLO)
   ========================================================================== */

/* 1. Cambia il layout da griglia affiancata a blocchi uno sopra l'altro */
.bs-operator-view-layout {
    display: flex !important;
    flex-direction: column !important;
    gap: 30px !important;
}

/* 2. Forza il planner dell'operatore a prendersi tutto lo spazio orizzontale disponibile */
.bs-operator-view-layout .bs-operator-timeline-wrapper {
    width: 100% !important;
    max-width: 100% !important;
}

/* 3. Rimuovi i limiti di larghezza fissa (i 200px o 170px delle altre view) 
      solo per questa colonna specifica */
.bs-operator-view-planner .bs-operator-col,
.bs-operator-view-planner .bs-operator-col-header {
    width: auto !important;
    flex-grow: 1 !important; /* Occupa tutto lo spazio rimasto dopo la colonna ore */
    flex-basis: auto !important;
    min-width: 0 !important;
}

/* 4. Assicura che il contenitore del planner non abbia scroll orizzontale superfluo 
      se c'è una sola colonna */
.bs-operator-view-planner .bs-planner-grid {
    min-width: 100% !important;
    display: flex !important;
}

/* 5. Stile della sezione Lista d'Attesa quando finisce sotto */
.bs-operator-view-layout .bs-operator-waitlist {
    width: 100% !important;
    margin-top: 10px;
    border-top: 2px solid var(--bs-border-color-light);
    padding-top: 20px;
    background-color: var(--bs-bg-white);
    border-radius: var(--bs-border-radius-large);
}

/* 6. Ottimizzazione card per visione a "tutta riga" */
.bs-operator-view-planner .bs-appointment-card {
    left: 10px !important;
    right: 10px !important;
}


/* ==========================================================================
   ADONE POS MOBILE MOBILE RE-ENGINEERING
   ========================================================================== */

@media screen and (max-width: 768px) {
    
    /* 1. Sblocco altezza della griglia POS */
    .bs-pos-layout {
        display: flex !important;
        flex-direction: column !important;
        height: auto !important; /* Rimuove il blocco altezza fissa del desktop */
        gap: 20px;
    }

    /* 2. Ottimizzazione Catalogo (Colonna SX) */
    .bs-pos-catalog {
        height: 450px !important; /* Il catalogo rimane contenuto per non allungare troppo la pagina */
        order: 1;
    }

    /* 3. RE-DESIGN CARRELLO (Colonna DX) */
    .bs-pos-cart-panel {
        order: 2;
        height: auto !important; /* Il carrello si espande in base al contenuto */
        min-height: 400px;
        margin-bottom: 50px;
        border: 2px solid var(--bs-primary-color); /* Lo evidenziamo come area attiva */
    }

    /* 4. FIX "SCIACCIAMENTO" ITEMS */
    .bs-pos-cart-items {
        /* Forza uno spazio minimo vitale per vedere almeno 3-4 righe di prodotti */
        min-height: 180px !important; 
        max-height: 300px !important;
        overflow-y: auto !important;
        background: #fff;
        border-bottom: 1px solid #eee;
    }

    /* Rendi la tabella del carrello più compatta su mobile */
    .bs-cart-table td {
        padding: 8px 5px !important;
        font-size: 13px !important;
    }

    /* 5. OTTIMIZZAZIONE FOOTER (Il "colpevole" dello spazio) */
    .bs-pos-footer {
        padding: 15px !important;
        background: #f8fafc !important;
    }

    /* Comprimiamo l'area note che solitamente occupa troppo spazio */
    .bs-cart-notes textarea {
        height: 45px !important; /* Quasi riga singola, si espande al focus */
        font-size: 12px !important;
        margin-bottom: 10px !important;
        transition: height 0.2s ease;
    }
    
    .bs-cart-notes textarea:focus {
        height: 80px !important;
    }

    /* Totali e Metodi di Pagamento */
    .bs-cart-totals {
        font-size: 1.2em !important;
        margin-bottom: 15px !important;
    }

    .bs-payment-methods {
        gap: 8px !important;
    }

    .radio-box .box-content {
        padding: 8px 5px !important;
        font-size: 12px !important;
    }

    /* Tasto INCASSA gigante per il pollice */
    #bs-pos-checkout-btn {
        height: 55px !important;
        font-size: 18px !important;
        letter-spacing: 1px;
    }

    /* Header del catalogo più compatto */
    .bs-pos-header {
        flex-direction: column !important;
        padding: 10px !important;
        gap: 10px;
    }

    .bs-pos-search-bar {
        width: 100% !important;
    }
}

/* FIX LARGHEZZA CARD NEL PLANNER (Day & Operator View) */
.bs-daily-planner .bs-operator-col .bs-appointment-card {
    /* Riduciamo lo spazio dai bordi: 4px a sinistra e 4px a destra */
    left: 4px !important;
    right: 4px !important;
    
    /* Forza il browser a ignorare larghezze fisse se ereditate */
    width: auto !important; 
    max-width: none !important;
    
    /* Reset margini che potrebbero centrare la card lasciando buchi */
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Ottimizzazione specifica per la vista singolo Operatore (dove la colonna è enorme) */
.bs-operator-view-planner .bs-appointment-card {
    /* Qui possiamo essere ancora più precisi */
    left: 5px !important;
    right: 5px !important;
}

/* Rimuovi eventuali ombre esterne che creano distacco visivo a riposo */
.bs-appointment-card:not(:hover) {
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* FIX VISTA OPERATORE DESKTOP */
@media screen and (min-width: 1025px) {
    .bs-operator-view-layout {
        display: grid !important;
        /* 1fr per il planner, 320px fissi per la lista attesa */
        grid-template-columns: 1fr 320px !important; 
        gap: 25px !important;
        align-items: flex-start !important;
        width: 100%;
    }

    .bs-operator-timeline-wrapper {
        min-width: 0; /* Impedisce al planner di rompere la griglia */
    }

    .bs-operator-waitlist {
        position: sticky;
        top: 140px; /* Segue lo scroll rimanendo visibile accanto al planner */
        max-height: calc(100vh - 160px);
        overflow-y: auto;
    }
}

/* ==========================================================================
   ADONE POS - SMART GRID 3 COLONNE (MOBILE)
   ========================================================================== */

@media screen and (max-width: 768px) {

    /* 1. Forza la griglia a 3 colonne precise */
    .bs-pos-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px !important; /* Spazio ridotto per far stare tutto */
        padding: 10px !important;
    }

    /* 2. Ridimensionamento Card per massima densità */
    .bs-pos-item-card {
        height: auto !important;
        min-height: 100px !important; /* Altezza ridotta */
        padding: 8px 5px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        border-radius: 8px !important;
    }

    /* 3. Icone più piccole */
    .item-icon {
        font-size: 1.4em !important; /* Ridotto per non rubare spazio al testo */
        margin-bottom: 5px !important;
    }

    /* 4. Testo del nome ottimizzato */
    .item-name {
        font-size: 10px !important; /* Font piccolo ma leggibile */
        line-height: 1.1 !important;
        height: 2.2em !important; /* Forza massimo 2 righe */
        margin-bottom: 4px !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* 5. Prezzo e Stock */
    .item-price {
        font-size: 11px !important;
        font-weight: 800 !important;
    }

    .stock-pill {
        font-size: 9px !important;
        padding: 1px 4px !important;
        margin-left: 2px !important;
        position: absolute; /* Mettiamolo in un angolo per salvare spazio */
        top: 4px;
        right: 4px;
    }

    /* 6. Tabs del catalogo più compatte */
    .bs-pos-tab {
        padding: 6px 10px !important;
        font-size: 11px !important;
        flex: 1;
        text-align: center;
    }
}

/* ==========================================================================
   ADONE INVENTORY - MOBILE OPTIMIZATION (vFinal)
   ========================================================================== */

@media screen and (max-width: 768px) {

    /* 1. FIX TAB FUORIUSCENTI: Forza la distribuzione 50/50 */
    .bs-inventory-management .bs-modal-tabs {
        display: flex !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 0 20px 0 !important;
        background: #f1f5f9;
        border-radius: 8px;
        overflow: hidden;
    }

    .bs-inventory-management .bs-tab-link {
        flex: 1 !important; /* Ogni tab occupa esattamente la metà */
        text-align: center !important;
        justify-content: center !important;
        padding: 12px 5px !important;
        font-size: 12px !important;
        margin: 0 !important;
        border-bottom: none !important;
    }

    .bs-inventory-management .bs-tab-link.active {
        background-color: var(--bs-primary-color) !important;
        color: #fff !important;
    }

    /* 2. KPI GRID A 3 ELEMENTI: Ottimizzazione spazi */
    .bs-inventory-management .bs-report-kpi-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px !important;
        margin-bottom: 20px !important;
    }

    .bs-inventory-management .bs-kpi-card {
        padding: 10px 5px !important;
        flex-direction: column !important; /* Icona sopra, testo sotto per risparmiare larghezza */
        text-align: center !important;
        gap: 5px !important;
        min-height: 100px;
    }

    .bs-inventory-management .bs-kpi-icon {
        width: 32px !important;
        height: 32px !important;
        font-size: 14px !important;
        margin: 0 auto !important;
    }

    .bs-inventory-management .bs-kpi-value {
        font-size: 13px !important; /* Font ridotto per far stare i prezzi */
        font-weight: 800 !important;
        word-break: break-all;
    }

    .bs-inventory-management .bs-kpi-label {
        font-size: 9px !important;
        text-transform: uppercase;
        letter-spacing: 0;
    }

    /* 3. FIX PULSANTI AZIONE TAGLIATI (Footer Card) */
    .bs-inventory-management .wp-list-table td.bs-actions-cell {
        padding: 12px 8px !important;
        display: flex !important;
        justify-content: space-between !important; /* Distribuzione equa */
        gap: 6px !important;
        background-color: #f8fafc !important;
    }

    .bs-inventory-management .wp-list-table .bs-actions-cell .button-small {
        flex: 1 !important; /* Tutti i bottoni della stessa larghezza */
        height: 40px !important; /* Più alti per il touch */
        margin: 0 !important;
        padding: 0 !important;
        min-width: 0 !important; /* Permette al bottone di restringersi se necessario */
    }

    /* Rimpiccioliamo le icone se sono 4 o più bottoni */
    .bs-inventory-management .bs-actions-cell i {
        font-size: 14px !important;
    }

    /* Ottimizzazione dei margini dell'intestazione per guadagnare spazio */
    .bs-inventory-header-group {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 15px;
    }
    
    #bs-open-add-product-modal {
        width: 100%;
        justify-content: center;
    }
}

/* ==========================================================================
   ADONE FINANCIAL - MOBILE OPTIMIZATION v2 (Layout 3+2)
   ========================================================================== */

@media screen and (max-width: 768px) {

    /* 1. FIX TAB: Distribuzione 50/50 con icone e testo su due righe */
    .bs-financial-management .bs-modal-tabs {
        display: flex !important;
        width: 100% !important;
        padding: 4px !important;
        margin: 0 0 20px 0 !important;
        background: #f1f5f9;
        border-radius: 10px;
        border: 1px solid #e2e8f0 !important;
    }

    .bs-financial-management .bs-tab-link {
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        padding: 10px 5px !important;
        font-size: 11px !important;
        line-height: 1.2 !important;
        border: none !important;
        border-radius: 8px !important;
        gap: 4px;
        color: var(--bs-text-light) !important;
    }

    .bs-financial-management .bs-tab-link.active {
        background-color: #fff !important;
        color: var(--bs-primary-color) !important;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1) !important;
    }

    .bs-financial-management .bs-tab-link i {
        font-size: 16px !important;
    }

    /* 2. KPI GRID - LAYOUT SCIENTIFICO 3 + 2 */
    .bs-financial-management .bs-report-kpi-grid {
        display: grid !important;
        /* Creiamo una griglia a 6 frazioni per gestire i divisori di 3 e 2 */
        grid-template-columns: repeat(6, 1fr) !important;
        gap: 10px !important;
        margin-bottom: 30px !important;
    }

    /* Prime 3 Card (Riga 1): occupano 2/6 dello spazio (33% ciascuna) */
    .bs-financial-management .bs-report-kpi-grid .bs-kpi-card:nth-child(-n+3) {
        grid-column: span 2 !important;
    }

    /* Ultime 2 Card (Riga 2): occupano 3/6 dello spazio (50% ciascuna) */
    .bs-financial-management .bs-report-kpi-grid .bs-kpi-card:nth-child(n+4) {
        grid-column: span 3 !important;
    }

    /* Ottimizzazione Card per layout stretto */
    .bs-financial-management .bs-kpi-card {
        padding: 12px 5px !important;
        flex-direction: column !important;
        text-align: center !important;
        min-height: 115px;
        gap: 8px !important;
        border-radius: 10px !important;
    }

    .bs-financial-management .bs-kpi-icon {
        width: 32px !important;
        height: 32px !important;
        font-size: 14px !important;
        margin: 0 auto !important;
    }

    .bs-financial-management .bs-kpi-label {
        font-size: 9px !important;
        font-weight: 700 !important;
        text-transform: uppercase;
        color: var(--bs-text-light);
        min-height: 2.2em;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .bs-financial-management .bs-kpi-value {
        font-size: 11px !important;
        font-weight: 800 !important;
        word-break: break-all;
    }

    /* 3. AZIONI E PULSANTI */
    .bs-financial-management .bs-inventory-header-group {
        flex-direction: column !important;
        gap: 12px;
        margin-bottom: 25px;
    }

    .bs-financial-management #bs-open-add-expense-modal, 
    .bs-financial-management #bs-export-financial-pdf-btn {
        width: 100% !important;
        height: 45px !important;
        justify-content: center !important;
    }
}

/* ==========================================================================
   ADONE DASHBOARD MOBILE OPTIMIZATION - KPI & WIDGETS
   ========================================================================== */

@media screen and (max-width: 600px) {
    
    /* --- 1. MINI-KPI GRID (Le prime 3 card in una riga) --- */
    .bs-kpi-hero-grid {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important; /* 3 colonne precise */
        gap: 8px !important;
        padding: 10px !important;
        margin-bottom: 15px !important;
    }

    /* Stile Micro-Card per le prime 3 */
    .bs-kpi-hero-grid .bs-kpi-modern-card:nth-child(-n+3) {
        padding: 10px 5px !important;
        text-align: center !important;
        min-height: 90px !important;

        justify-content: flex-start !important; 

        border-radius: 10px !important;
        border-left: none !important; /* Rimuoviamo il bordo laterale che ruba spazio */
        border-bottom: 3px solid var(--card-accent) !important; /* Lo mettiamo sotto */
    }

    /* Nascondi solo l'icona circolare per risparmiare spazio verticale */
    .bs-kpi-hero-grid .bs-kpi-modern-card:nth-child(-n+3) .bs-kpi-icon-circle {
        display: none !important;
    }

    /* Label superiore (Oggi, Settimana, etc) */
    .bs-kpi-hero-grid .bs-kpi-modern-card:nth-child(-n+3) .bs-kpi-label {
        font-size: 10px !important; /* Font ridotto */
        margin-bottom: 4px !important;
        white-space: nowrap;
        opacity: 0.8;
    }

    /* Valore Numerico Centrale */
    .bs-kpi-hero-grid .bs-kpi-modern-card:nth-child(-n+3) .bs-kpi-value-big {
        font-size: 20px !important; 
        font-weight: 800 !important;
        display: block !important;
        margin-bottom: 5px !important;
    }

    /* --- DESCRIZIONI (VISIBILI E RIDOTTE) --- */
    /* Miriamo al div con lo stile inline font-size:12px impostato nel PHP */
    .bs-kpi-hero-grid .bs-kpi-modern-card:nth-child(-n+3) div[style*="font-size:12px"],
    .bs-kpi-next-app-details {
        display: block !important;     /* Rende visibile la descrizione */
        font-size: 11px !important;   /* Font molto piccolo per stare in 3 colonne */
        line-height: 1.1 !important;
        color: #94a3b8 !important;
        margin-top: 2px !important;
        padding: 0 2px !important;
        text-transform: none;
    }

    /* Speciale per la card "Prossimo" (riga singola o micro) */
    .bs-kpi-next-app-details {
        margin-top: 0 !important;
        padding-top: 5px !important;
        border-top: none !important;
    }
    .bs-kpi-client-name { font-size: 10px !important; }

    /* --- 2. QUARTA CARD (Azioni Rapide) - Full Width --- */
    .bs-kpi-hero-grid .bs-kpi-modern-card:nth-child(4) {
        grid-column: span 3 !important; /* Occupa tutta la riga sotto le 3 micro-kpi */
        padding: 15px !important;
    }
    .bs-kpi-actions-grid {
        grid-template-columns: repeat(4, 1fr) !important; /* 4 icone sulla stessa riga */
        gap: 10px !important;
    }
    .bs-kpi-action-btn { padding: 8px 5px !important; }
    .bs-kpi-action-btn span { display: none; } /* Nascondi testo bottoni su mobile */
    .bs-kpi-action-btn i { font-size: 20px !important; margin: 0 !important; }

    /* --- 3. WIDGET INCASSO (Stile Modern Slim) --- */
    .bs-dashboard-widget h3.bs-widget-title {
        padding: 12px 15px !important;
        font-size: 14px !important;
    }

    /* Rendiamo il box incasso più orizzontale */
    div[style*="background: linear-gradient"] {
        padding: 15px !important;
        margin: 0 !important;
    }
    div[style*="font-size:32px"] {
        font-size: 24px !important;
        margin-bottom: 10px !important;
    }

    /* --- 4. LISTE E TABELLE DASHBOARD --- */
    .bs-upcoming-list li {
        padding: 10px 0 !important;
    }
    .bs-upcoming-date {
        width: 40px !important;
        height: 40px !important;
    }
    .bs-upcoming-date .day { font-size: 16px !important; }
    
    .bs-todo-item strong { font-size: 12px !important; }

    /* --- 5. GRAFICO --- */
    .bs-chart-container {
        height: 220px !important; /* Leggermente più basso per non occupare tutto lo schermo */
    }
}

/* Icona Note Cruciali Pulsante */
.bs-icon-critical-alert {
    background-color: #EF4444 !important; /* Rosso */
    color: #ffffff !important;
    animation: bsPulseRedAlert 1.2s infinite;
    border: 2px solid #fff !important;
    cursor: help;
}

@keyframes bsPulseRedAlert {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); }
    70% { transform: scale(1.3); box-shadow: 0 0 0 10px rgba(239, 68, 68, 0); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}


/* --- STILE EXECUTIVE ADONE --- */
:root {
    --adone-gold: #D4AF37;
    --adone-danger: #FF4757;
    --adone-success: #2ED573;
    --adone-shadow: 0 10px 30px rgba(0,0,0,0.08);
}

/* Card Cliente Premium */
.bs-client-card-executive {
    background: #fff;
    border-radius: 16px;
    padding: 20px;
    border: 1px solid #f0f0f0;
    box-shadow: var(--adone-shadow);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative;
}

.bs-client-card-executive:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.12);
}

/* Badge di Stato Dinamico */
.bs-status-pill {
    position: absolute;
    top: 15px;
    right: 15px;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
}
.status-vip { background: #FFF9E6; color: #D4AF37; border: 1px solid #D4AF37; }
.status-danger { background: #FFF0F0; color: #FF4757; border: 1px solid #FF4757; }

/* Contatore LTV (Il valore del cliente) */
.bs-ltv-counter {
    background: #f8fafc;
    border-radius: 12px;
    padding: 10px;
    text-align: center;
    margin: 15px 0;
}
.bs-ltv-label { font-size: 10px; color: #94a3b8; text-transform: uppercase; }
.bs-ltv-value { font-size: 20px; font-weight: 800; color: #1e293b; }

/* Timeline Scheda Cliente */
.bs-timeline-executive {
    border-left: 2px solid #f1f5f9;
    margin-left: 20px;
    padding-left: 30px;
    position: relative;
}
.bs-timeline-item {
    margin-bottom: 25px;
    position: relative;
}
.bs-timeline-item::before {
    content: '';
    position: absolute;
    left: -41px;
    top: 0;
    width: 20px;
    height: 20px;
    background: #fff;
    border: 3px solid var(--bs-primary-color);
    border-radius: 50%;
}

.bs-profile-master-container {
    background: #fdfdfd;
    padding: 20px;
    font-family: 'Inter', sans-serif;
}

.bs-master-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fff;
    padding: 30px;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.05);
    margin-bottom: 30px;
}

.bs-avatar-master {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid #fff;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.bs-master-grid {
    display: grid;
    grid-template-columns: 280px 1fr 300px;
    gap: 30px;
}

/* WIDGETS */
.bs-widget-premium {
    background: #1e293b;
    color: #fff;
    padding: 25px;
    border-radius: 18px;
    text-align: center;
    margin-bottom: 20px;
}
.bs-widget-premium.gold {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    border-bottom: 4px solid var(--adone-gold);
}
.widget-value { font-size: 32px; font-weight: 800; color: var(--adone-gold); }

/* FEED */
.bs-activity-feed {
    background: #fff;
    border-radius: 20px;
    padding: 20px;
    box-shadow: var(--adone-shadow);
}
.bs-feed-item {
    display: flex;
    gap: 20px;
    padding: 20px 0;
    border-bottom: 1px solid #f1f5f9;
}
.feed-icon {
    width: 40px; height: 40px;
    background: #eff6ff;
    color: var(--bs-primary-color);
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
}
.feed-header { display: flex; justify-content: space-between; margin-bottom: 5px; }
.feed-amount { font-weight: 800; color: #1e293b; margin-top: 10px; text-align: right; }

/* MINI CARDS */
.bs-mini-pkg-card {
    background: #f8fafc;
    padding: 15px;
    border-radius: 12px;
    margin-bottom: 10px;
}
.bs-mini-progress {
    height: 6px; background: #e2e8f0; border-radius: 3px; margin: 8px 0;
}
.bs-mini-progress .bar { height: 100%; background: var(--bs-primary-color); border-radius: 3px; }

/* ALERT */
.pulsing { animation: adone-pulse 2s infinite; }
@keyframes adone-pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.02); }
    100% { transform: scale(1); }
}



/* ============================================================
   EXECUTIVE STYLING V9 - SCHEDA CLIENTE ADONE (CONSOLIDATED)
   ============================================================ */

/* Wrapper Principale */
.bs-client-master-wrapper { 
    font-family: 'Inter', 'Segoe UI', sans-serif; 
    background: #f8fafc; 
    padding: 10px; /* Valore definitivo V9 */
    border-radius: 12px; 
}

/* Header & Identity */
.bs-master-header { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    background: #fff; 
    padding: 25px; 
    border-radius: 16px; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.05); 
    margin-bottom: 25px;
    border: 1px solid #eef2f6;
}
.bs-header-identity { display: flex; align-items: center; gap: 20px; }
.bs-avatar-master { 
    width: 90px; 
    height: 90px; 
    border-radius: 50%; 
    object-fit: cover; 
    border: 4px solid #fff; 
    box-shadow: 0 4px 10px rgba(0,0,0,0.1); 
}
.bs-name-group h2 { margin: 0; font-size: 26px; font-weight: 800; color: #1e293b; }

/* Pulsante Azure "LISTA" */
.button.bs-btn-azure-pro { 
    background-color: #3B82F6 !important; 
    color: #ffffff !important; 
    border: none !important; 
    font-weight: 700 !important; 
    text-transform: uppercase; 
    letter-spacing: 1px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 20px !important;
    height: 42px;
    border-radius: 8px;
    transition: all 0.2s ease;
}
.button.bs-btn-azure-pro:hover { 
    background-color: #1D4ED8 !important; 
    transform: translateY(-2px); 
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3); 
}

/* Layout Grid 3 Colonne */
.bs-master-grid { 
    display: grid; 
    grid-template-columns: 300px 1fr 320px; 
    gap: 25px; 
    align-items: start; 
}

/* Widgets & Cards */
.bs-premium-card { 
    background: #fff; 
    border-radius: 16px; 
    padding: 20px; 
    border: 1px solid #eef2f6; 
    box-shadow: 0 2px 10px rgba(0,0,0,0.02); 
    margin-bottom: 20px; 
}

/* Card LTV */
.bs-card-ltv { 
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%); 
    color: #fff; 
    border: none; 
    text-align: center; 
}
.bs-card-ltv .val { font-size: 32px; font-weight: 800; color: #fbbf24; display: block; }
.bs-card-ltv .lbl { font-size: 11px; text-transform: uppercase; opacity: 0.7; letter-spacing: 1px; }

/* Alert Sanitario Neon Pulse (V9) */
.bs-premium-card.status-danger-pulse {
    background-color: #EF4444 !important;
    border: none !important;
    color: #ffffff !important;
    box-shadow: 0 4px 15px rgba(239, 68, 68, 0.4);
    animation: adone-alert-pulse 1.5s infinite;
}

/* Timeline / Activity Feed */
.bs-activity-feed { 
    background: #fff; 
    border-radius: 16px; 
    padding: 0; 
    overflow: hidden; 
    border: 1px solid #eef2f6; 
}
.bs-feed-item { 
    display: flex; 
    gap: 15px; 
    padding: 15px 20px; 
    border-bottom: 1px solid #f1f5f9; 
    transition: background 0.2s; 
}
.bs-feed-item:hover { background: #f8fafc; }
.feed-icon { 
    width: 36px; 
    height: 36px; 
    border-radius: 10px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    flex-shrink: 0; 
}
.icon-app { background: #eff6ff; color: #3b82f6; }
.icon-sale { background: #f0fdf4; color: #22c55e; }
.feed-content { flex-grow: 1; font-size: 13px; }
.feed-header { display: flex; justify-content: space-between; margin-bottom: 3px; }
.feed-header strong { color: #1e293b; font-weight: 600; }
.feed-header span { font-size: 11px; color: #94a3b8; }
.feed-amount { font-weight: 700; color: #1e293b; }

/* Tags & Pills */
.bs-tag-pill { padding: 4px 12px; border-radius: 20px; font-size: 10px; font-weight: 700; text-transform: uppercase; }
.status-vip { background: #fef3c7; color: #92400e; }
.status-active { background: #d1fae5; color: #065f46; }
.status-danger { 
    background: #fee2e2; 
    color: #b91c1c; 
    animation: pulseRed 2s infinite; 
}

/* Sistemi di Scroll Indipendenti */
.bs-scroll-box { overflow-y: auto; padding-right: 8px; scrollbar-width: thin; }
.bs-box-loyalty { max-height: 400px; }
.bs-box-packages { max-height: 470px; }
.bs-box-gifts { max-height: 460px; }

/* Assets & Progress Bars (Right Side) */
.bs-asset-box { 
    padding: 12px; 
    background: #f8fafc; 
    border-radius: 10px; 
    margin-bottom: 10px; 
    border: 1px solid #e2e8f0; 
}
.bs-asset-box strong { display: block; font-size: 14px; margin-bottom: 5px; }
.bs-mini-bar { height: 6px; background: #e2e8f0; border-radius: 3px; overflow: hidden; margin: 5px 0; }
.bs-mini-bar-fill { height: 100%; background: #3b82f6; }

/* Griglia Schede Tecniche Pro */
.bs-tech-grid-pro {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 20px;
}
.bs-tech-card-pro {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-top: 3px solid #3B82F6;
    border-radius: 10px;
    overflow: hidden;
    transition: all 0.3s ease;
    cursor: pointer;
}
.bs-tech-card-pro:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
    border-color: #3B82F6;
}
.bs-tech-preview { 
    height: 120px; 
    background: #f8fafc; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    opacity: 0.8; 
}
.bs-tech-preview img { max-height: 80%; width: auto; filter: grayscale(0.2); }
.bs-tech-details { padding: 15px; background: #fff; }
.bs-tech-details strong { display: block; font-size: 14px; color: #1e293b; margin-bottom: 4px; letter-spacing: -0.2px; }
.bs-tech-details span { font-size: 12px; color: #64748b; display: flex; align-items: center; gap: 5px; }

/* Tabs Overrides */
.bs-master-tabs .bs-tab-link { 
    padding: 12px 20px; 
    font-weight: 600; 
    font-size: 14px; 
    color: #64748b; 
    border-bottom: 2px solid transparent; 
    text-decoration: none; 
    transition: 0.3s; 
}
.bs-master-tabs .bs-tab-link.active { color: #3b82f6; border-bottom-color: #3b82f6; }

/* Animazioni */
@keyframes adone-alert-pulse { 
    0% { transform: scale(1); box-shadow: 0 4px 15px rgba(239, 68, 68, 0.4); } 
    50% { transform: scale(1.02); box-shadow: 0 4px 25px rgba(239, 68, 68, 0.6); } 
    100% { transform: scale(1); box-shadow: 0 4px 15px rgba(239, 68, 68, 0.4); } 
}

@keyframes pulseRed { 
    0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); } 
    70% { box-shadow: 0 0 0 10px rgba(239, 68, 68, 0); } 
    100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); } 
}

/* Responsività */
@media (max-width: 1200px) { 
    .bs-master-grid { grid-template-columns: 1fr; } 
}


/* ==========================================================================
   ADONE WORKSPACE 2.0 - PREMIUM LIGHT UI
   Layout Immersivo per Diagnostica Avanzata e Schede Tecniche
   ========================================================================== */

/* 1. Overlay e Sfondo Workspace */
.bs-modal.bs-modal-workspace {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    background: rgba(241, 245, 249, 0.95); /* Grigio seta trasparente */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    z-index: 99999 !important;
    padding: 15px;
    box-sizing: border-box;
}

/* 2. Contenitore Master */
.bs-modal-workspace .bs-modal-content {
    width: 100% !important;
    max-width: 1650px !important;
    height: 100% !important;
    max-height: 96vh !important;
    margin: 0 auto !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 20px !important;
    box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.15) !important;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    color: var(--bs-text-dark);
}

/* 3. Header del Workspace */
.bs-tech-header-v2 {
    padding: 5px 30px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}
.bs-tech-header-v2 h2 { 
    font-size: 20px !important; 
    font-weight: 800 !important; 
    color: var(--bs-text-dark) !important; 
    margin: 0 !important;
    border: none !important;
    display: flex;
    align-items: center;
    gap: 12px;
}
.bs-tech-header-v2 h2 i { color: var(--bs-primary-color); }
.bs-tech-header-v2 small { color: #64748b; font-weight: 500; }

/* 4. Griglia Principale a 3 Colonne */
.bs-tech-main-grid {
    display: grid;
    grid-template-columns: 1fr 360px 360px; /* Canvas centrale ampio, sidebars fisse */
    gap: 20px;
    padding: 20px;
    height: 100%;
    overflow: hidden;
}

/* 5. Stile Colonne (Cards) */
.bs-tech-col {
    background: #ffffff;
    border: 1px solid #f1f5f9;
    border-radius: 16px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 2px 8px rgba(0,0,0,0.02);
}
.col-label {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #94a3b8;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.col-label::after { content: ''; flex-grow: 1; height: 1px; background: #f1f5f9; }

/* 6. Area Canvas (Mappatura Visuale) */
.bs-canvas-frame {
    background: #f8fafc;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    position: relative;
    cursor: crosshair;
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-shadow: inset 0 2px 10px rgba(0,0,0,0.02);
}
#bs-tech-image-display {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    pointer-events: none;
    transition: opacity 0.3s;
}

/* 7. Marker (I Pallini Rossi) */
.bs-marker-dot {
    position: absolute;
    width: 26px; height: 26px;
    background: #EF4444; /* Rosso vibrante */
    color: #fff;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 800;
    border: 2px solid #fff;
    box-shadow: 0 4px 10px rgba(239, 68, 68, 0.3);
    transform: translate(-50%, -50%);
    z-index: 100;
    pointer-events: auto;
}
.bs-marker-dot:hover { transform: translate(-50%, -50%) scale(1.2); cursor: pointer; }

/* 8. Lista Marker (Note sotto il canvas) */
/* --- FIX STABILITÀ LISTA PIN --- */
#bs-tech-markers-list {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 15px;
    margin-bottom: 20px;
    
    /* MODIFICA CHIAVE: Altezza fissa invece di max-height */
    height: 220px; 
    overflow-y: auto;
    
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.02);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Messaggio "vuoto" per non lasciare il box brutto quando non ci sono PIN */
#bs-tech-markers-list:empty::after {
    content: 'Nessun punto mappato. Clicca sulla sagoma a sinistra per iniziare l\'analisi.';
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #94a3b8;
    font-size: 12px;
    font-style: italic;
    text-align: center;
    padding: 20px;
}

/* Forza la modale a mantenere un'altezza costante fin dall'apertura */
.bs-modal-workspace .bs-modal-content {
    height: 95vh !important; /* Forza l'altezza al 95% dello schermo sempre */
}

.bs-marker-row {
    display: flex; align-items: center; gap: 10px; margin-bottom: 8px;
    background: #f8fafc; padding: 10px; border-radius: 8px;
    border: 1px solid #eef2f6;
}
.bs-marker-row .marker-num {
    background: #EF4444; color: #fff; width: 22px; height: 22px;
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700; flex-shrink: 0;
}
.bs-marker-note-edit {
    flex-grow: 1;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    font-size: 13px !important;
    box-shadow: none !important;
}

/* 9. Diagnostica (Sliders & Fitzpatrick) */
.bs-tech-col-scroll {
    overflow-y: auto;
    flex-grow: 1;
    padding-right: 5px;
}
.bs-skin-selector {
    display: flex; justify-content: space-between; margin-bottom: 25px;
}
.skin-pill { 
    width: 42px; height: 42px; border-radius: 10px; cursor: pointer; 
    display: flex; align-items: center; justify-content: center; font-weight: 800;
    border: 3px solid transparent; transition: all 0.2s ease;
}
.skin-pill input { display: none; }
/* Fitzpatrick Colors */
.skin-pill.type-1 { background: #fdf5e6; color: #8d6e63; }
.skin-pill.type-2 { background: #ffdbac; color: #8d6e63; }
.skin-pill.type-3 { background: #f1c27d; color: #5d4037; }
.skin-pill.type-4 { background: #e0ac69; color: #5d4037; }
.skin-pill.type-5 { background: #8d5524; color: #fff; }
.skin-pill.type-6 { background: #3e2723; color: #fff; }
.skin-pill:has(input:checked) { border-color: var(--bs-primary-color); transform: scale(1.15); box-shadow: 0 5px 15px rgba(59, 130, 246, 0.3); }

.bs-range-slider {
    width: 100%;
    margin: 15px 0;
    accent-color: var(--bs-primary-color);
}
.param-item span { font-size: 13px; font-weight: 600; color: #475569; }
.val-display { color: var(--bs-primary-color); font-weight: 800; font-size: 15px; }

/* 10. Firma e Prodotti */
.bs-signature-wrapper {
    background: #fff;
    border: 2px solid #f1f5f9;
    border-radius: 12px;
    height: 160px;
    margin: 10px 0;
    cursor: crosshair;
}
#bs-signature-pad { width: 100%; height: 100%; }

.bs-btn-upload-v2 { background: #334155 !important; color: #fff !important; }
.bs-btn-template-pro { background: #f1f5f9 !important; color: #475569 !important; border: 1px solid #e2e8f0 !important; }
.bs-btn-template-pro:hover { background: #e2e8f0 !important; color: #1e293b !important; }

/* 11. Azioni Finali */
.button-hero {
    width: 100%; 
    padding: 14px !important; 
    font-size: 15px !important; 
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    background: var(--bs-primary-color) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 10px !important;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3) !important;
    transition: all 0.3s;
}
.button-hero:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(59, 130, 246, 0.4) !important; }

/* Fix Note Tecniche - Sfondo Bianco Pro */
#bs-tech-sheet-form-v2 textarea[name="notes"] {
    background: #ffffff !important;
    border: 1px solid #d1d5db !important;
    color: #1e293b !important;
    padding: 12px !important;
    font-size: 14px !important;
    border-radius: 8px !important;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.05) !important;
}

#bs-tech-sheet-form-v2 textarea[name="notes"]:focus {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
    outline: none !important;
}

/* Responsive Adjustments */
@media screen and (max-width: 1400px) {
    .bs-tech-main-grid { grid-template-columns: 1fr 320px 320px; gap: 15px; padding: 15px; }
}

@media screen and (max-width: 1100px) {
    .bs-tech-main-grid { grid-template-columns: 1fr; overflow-y: auto; }
    .bs-canvas-frame { min-height: 400px; }
}




/* =============================================================
   ADONE PRECISION SLIDER - FIX RITAGLIO E ALLINEAMENTO
   ============================================================= */

/* Container Fisso */
.bs-canvas-frame {
    background: #0a0a0a;
    position: relative;
    border-radius: 12px;
    width: 100%;
    height: 550px;
    overflow: hidden;
    border: 2px solid #e2e8f0;
}

/* Layer Standard (Mappatura) */
#bs-standard-view {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 5;
    display: flex; align-items: center; justify-content: center;
}

/* Layer Confronto (Slider) */
.bs-ba-container {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 20; /* Sopra la mappatura */
    display: none;
}

/* Le immagini devono essere identiche */
.bs-ba-image-layer {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: contain; /* Mantiene le proporzioni senza deformare */
    display: block;
}

/* Il "Prima" sta sotto */
.bs-ba-before {
    z-index: 21;
    width: 100%; height: 100%;
}

/* Il "Dopo" sta sopra ma viene tagliato */
.bs-ba-after-wrapper {
    position: absolute;
    top: 0; left: 0;
    width: 50%; /* Variabile via JS */
    height: 100%;
    overflow: hidden;
    z-index: 22;
    border-right: 3px solid #ffffff;
    box-shadow: 5px 0 15px rgba(0,0,0,0.3);
}

/* TRUCCO CRUCIALE: L'immagine "Dopo" non deve mai cambiare larghezza */
#bs-ba-after-img {
    width: 100%; /* Verrà forzata in PX dal JS al momento del click */
    height: 100%;
    max-width: none; 
}

/* Maniglia dello Slider */
.bs-ba-handle {
    position: absolute;
    top: 0; bottom: 0; left: 50%;
    width: 4px; background: #fff;
    cursor: ew-resize; z-index: 30;
    transform: translateX(-50%);
}
.bs-ba-handle::after {
    content: '\f337'; font-family: "Font Awesome 5 Free"; font-weight: 900;
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 44px; height: 44px; background: var(--bs-primary-color); color: #fff;
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    box-shadow: 0 0 20px rgba(0,0,0,0.5); font-size: 18px;
}

/* Etichette */
.bs-ba-label {
    position: absolute; top: 20px; padding: 6px 12px;
    background: rgba(0,0,0,0.6); color: #fff; font-size: 11px;
    text-transform: uppercase; font-weight: 800; border-radius: 4px; z-index: 35;
    pointer-events: none;
}
.label-before { right: 20px; }
.label-after { left: 20px; }






/* =============================================================
   ADONE WORKSPACE 3.8 - COLOR-CODED BUTTONS (VIBRANT)
   ============================================================= */

/* 1. CARICAMENTO FOTO (Grigio Antracite) */
.button-upload-label {
    background-color: #1e293b !important;
    color: #ffffff !important;
    border: none !important;
}
.button-upload-label:hover { background-color: #0f172a !important; }

/* 2. SAGOMA CORPO (Terracotta / Skin) */
.bs-btn-template-body {
    background-color: #C8826D !important;
    color: #ffffff !important;
    border: none !important;
}
.bs-btn-template-body:hover { background-color: #AB6550 !important; }

/* 3. SAGOMA VISO (Verde Salvia) */
.bs-btn-template-face {
    background-color: #5D9C5B !important;
    color: #ffffff !important;
    border: none !important;
}
.bs-btn-template-face:hover { background-color: #4A7C48 !important; }

/* 4. MODALITÀ VISTA (Azure Adone) */
.bs-btn-mode {
    background-color: #3B82F6 !important;
    color: #ffffff !important;
    border: none !important;
    opacity: 0.85;
}
.bs-btn-mode:hover { background-color: #2563EB !important; opacity: 1; }

/* STATO ATTIVO: Effetto "Premuto" con bordo giallo oro per evidenziare */
.active-layer, .bs-btn-mode.active {
    background-color: var(--bs-primary-color-dark) !important;
    opacity: 1 !important;
    box-shadow: inset 0 3px 6px rgba(0,0,0,0.3) !important;
    border: 2px solid #FBBF24 !important; /* Bordo Oro per la selezione attiva */
}

/* Stile per i pulsanti nel footer modale (Salva) */
.button-hero {
    background: linear-gradient(135deg, #3B82F6 0%, #1D4ED8 100%) !important;
    border: none !important;
}



/* --- NUOVO POSIZIONAMENTO LISTA PIN (Colonna Centrale) --- */
#bs-tech-markers-list {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 15px;
    margin-bottom: 20px; /* Spazio prima del fototipo */
    max-height: 220px; /* Altezza fissa per evitare scroll della pagina */
    overflow-y: auto;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.02);
}

/* Etichetta sopra la lista PIN nella colonna 2 */
.bs-pin-list-label {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    color: #64748b;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}





/* --- TOOLBAR COMPATTA WORKSPACE --- */

.bs-tech-buttons-grid {
    display: grid !important;
    /* 4 pulsanti sulla stessa riga se lo spazio lo permette, altrimenti 2x2 molto compatto */
    grid-template-columns: repeat(4, 1fr) !important; 
    gap: 8px !important;
    margin-top: 12px !important;
}

.bs-tech-buttons-grid .button {
    height: 34px !important; /* Ridotta da 42px: molto più sottile */
    font-size: 10px !important; /* Testo leggermente più piccolo e tecnico */
    padding: 0 5px !important;
    border-radius: 6px !important;
    letter-spacing: 0.3px !important;
}

/* Switcher Modalità (Mappatura/Confronto) reso come una "Tab Bar" sottile */
.bs-mode-switcher-bar {
    display: flex;
    gap: 0;
    margin-top: 10px;
    background: #e2e8f0;
    padding: 2px;
    border-radius: 8px;
}

.bs-btn-mode {
    flex: 1;
    height: 30px !important; /* Super sottile */
    border: none !important;
    border-radius: 6px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    background: transparent !important;
    color: #64748b !important;
    box-shadow: none !important;
    margin: 0 !important;
}

.bs-btn-mode.active {
    background-color: #ffffff !important; /* Effetto toggle bianco su grigio */
    color: var(--bs-primary-color) !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
}

.bs-btn-mode:hover:not(.active) {
    background-color: rgba(255,255,255,0.5) !important;
}




/* --- COLORI SOLIDI TOOLBAR (Sempre Attivi) --- */

/* 1. Foto Prima/Dopo (Antracite Pro) */
.button-upload-label {
    background-color: #1e293b !important;
    color: #ffffff !important;
    border: none !important;
    cursor: pointer;
}

/* 2. Sagoma Corpo (Terracotta) */
.bs-btn-template-body {
    background-color: #C8826D !important;
    color: #ffffff !important;
    border: none !important;
}

/* 3. Sagoma Viso (Verde Salvia) */
.bs-btn-template-face {
    background-color: #5D9C5B !important;
    color: #ffffff !important;
    border: none !important;
}

/* Effetto Hover Comune: Scurimento + Elevazione */
.bs-tech-buttons-grid .button:hover,
.bs-tech-buttons-grid .button-upload-label:hover {
    filter: brightness(1.2);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

/* Stato SELEZIONATO (Il tasto attivo brilla con bordo Oro) */
.bs-tech-buttons-grid .active-layer {
    outline: 3px solid #FBBF24 !important; /* Bordo Oro Neon */
    outline-offset: -3px;
    filter: brightness(1.3);
}

/* --- Mappatura / Confronto (Stile Tab Azure) --- */
.bs-mode-switcher-bar {
    background: #cbd5e1 !important; /* Grigio più scuro per contrasto */
}

.bs-btn-mode {
    color: #1e293b !important;
    font-weight: 800 !important;
}

.bs-btn-mode.active {
    background-color: #3B82F6 !important; /* Azure pieno per la modalità attiva */
    color: #ffffff !important;
}

/* Quando un pulsante è il layer attivo (Mappatura in corso su quel template) */
.bs-tech-buttons-grid .active-layer {
    background-color: var(--bs-primary-color) !important;
    color: white !important;
    border: 2px solid #FBBF24 !important; /* Bordo oro di selezione */
}

/* Assicura che le label si comportino come pulsanti */
.button-upload-label {
    cursor: pointer;
    user-select: none;
}

/* Miniature Tecniche nel Feed Attività */
.icon-tech { background: #fef3c7 !important; color: #d97706 !important; }
.bs-feed-tech-details { margin-top: 10px; display: flex; gap: 10px; align-items: flex-start; }
.bs-feed-tech-thumb { width: 60px; height: 60px; border-radius: 8px; object-fit: cover; border: 1px solid #e2e8f0; flex-shrink: 0; }
.bs-feed-tech-info { font-size: 11px; line-height: 1.4; color: #64748b; }
.bs-tag-mini-prod { display: inline-block; background: #f1f5f9; padding: 2px 6px; border-radius: 4px; margin: 2px 2px 0 0; color: #475569; border: 1px solid #e2e8f0; }
.bs-fitz-mini { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 4px; }



/* ==========================================================================
   ADONE LEGAL MODAL - CENTRATURA PERFETTA E DESIGN IMMERSIVO
   ========================================================================== */

#bs-legal-modal {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: none; /* Diventa flex via Javascript con .css('display','flex') */
    justify-content: center;
    align-items: center;
    z-index: 1000000 !important; /* Sopra a qualsiasi altro elemento */
    background: rgba(15, 23, 42, 0.85); /* Overlay scuro elegante */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

#bs-legal-modal .bs-modal-content {
    position: relative;
    margin: 0 !important; /* Rimuove i margini di WordPress che spostano la modale */
    width: 90% !important;
    max-width: 700px !important;
    height: 80vh !important;
    max-height: 800px !important;
    background: #ffffff !important;
    border-radius: 16px !important;
    display: flex !important;
    flex-direction: column !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5) !important;
    overflow: hidden !important;
    padding: 0 !important; /* Gestiamo il padding internamente per header/content/footer */
    animation: bsModalScaleIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Area Testo con Scrollbar elegante */
#bs-legal-content {
    flex-grow: 1;
    overflow-y: auto;
    padding: 30px;
    line-height: 1.7;
    color: #334155;
    font-size: 15px;
    background: #ffffff;
}

#bs-legal-content::-webkit-scrollbar {
    width: 6px;
}
#bs-legal-content::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 10px;
}

#bs-legal-modal .bs-modal-content {
    pointer-events: auto !important; /* Forza la ricezione dei click */
}

/* Animazione di entrata */
@keyframes bsModalScaleIn {
    from { transform: scale(0.9); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}


/* Customer DNA */
.bs-dna-grid-modern {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    padding: 0 10px;
}

.bs-dna-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
    padding: 30px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    transition: transform 0.3s ease;
}

.bs-dna-card:hover { transform: translateY(-5px); }

.card-header-bar {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 6px;
    background-color: var(--accent-color);
}

.card-icon-circle {
    width: 60px; height: 60px;
    color: var(--accent-color);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 24px; margin-bottom: 20px;
    background-color: color-mix(in srgb, var(--accent-color), white 90%);
}

.bs-dna-card h3 { margin: 0; font-size: 18px; font-weight: 700; color: #1e293b; border:none; }
.client-count { font-size: 14px; color: var(--accent-color); font-weight: 700; margin: 5px 0 15px; }
.segment-desc { font-size: 12px; color: #64748b; line-height: 1.5; margin-bottom: 25px; height: 45px; text-align: center; }

.bs-dna-card .button.bs-view-dna-list {
    width: 100%;
    background-color: var(--accent-color) !important;
    color: #fff !important;
    border: none !important;
    font-weight: 700 !important;
    padding: 10px !important;
    border-radius: 8px;
    transition: 0.3s;
    justify-content: center;
}

/* ==========================================================================
   STILI SMART SALES HOOKS (Trigger & Modal List)
   ========================================================================== */

/* 1. COMPACT TRIGGER (Sidebar) */
.bs-pos-hook-trigger {
    display: flex;
    align-items: center;
    padding: 12px 15px;
    border-radius: 8px;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border: 1px solid transparent;
}

.bs-pos-hook-trigger:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* Stile Giallo (Cabina) */
.hook-cabin {
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
    border-color: #fcd34d;
}
.hook-cabin .hook-icon { background: #f59e0b; color: white; }
.hook-cabin .hook-arrow { color: #b45309; }
.hook-cabin strong { color: #92400e; }

/* Stile Verde (Mantenimento DNA Perfetto) */
.hook-maintenance {
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
    border-color: #6ee7b7;
}
.hook-maintenance .hook-icon { background: #10b981; color: white; }
.hook-maintenance .hook-arrow { color: #047857; }
.hook-maintenance strong { color: #065f46; }

/* Stile Viola (DNA) */
.hook-dna {
    background: linear-gradient(135deg, #f3e8ff 0%, #e9d5ff 100%);
    border-color: #d8b4fe;
}
.hook-dna .hook-icon { background: #9333ea; color: white; }
.hook-dna .hook-arrow { color: #7e22ce; }
.hook-dna strong { color: #6b21a8; }

.hook-icon {
    width: 36px; height: 36px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 16px;
    margin-right: 12px;
    flex-shrink: 0;
}

.hook-content { flex-grow: 1; }
.hook-content strong { display: block; font-size: 13px; margin-bottom: 2px; text-transform: uppercase; }
.hook-content span { display: block; font-size: 11px; color: #555; }

.hook-arrow { font-size: 12px; opacity: 0.6; }

/* 2. MODAL LIST (Scrollable) */
.bs-hook-modal-list {
    max-height: 400px; /* Altezza fissa scrollabile */
    overflow-y: auto;
    text-align: left;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 5px;
}

/* Scrollbar carina */
.bs-hook-modal-list::-webkit-scrollbar { width: 6px; }
.bs-hook-modal-list::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }

.bs-hook-list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    border-bottom: 1px dashed #e5e7eb;
    background: #fff;
    margin-bottom: 1px;
}
.bs-hook-list-item:last-child { border-bottom: none; }

.bs-hook-list-item .item-info { flex-grow: 1; padding-right: 10px; }
.bs-hook-list-item .item-name { font-weight: 600; color: #1e293b; font-size: 14px; }
.bs-hook-list-item .item-reason { font-size: 11px; color: #64748b; font-style: italic; margin-top: 2px; }

.gap-badge {
    display: inline-block;
    font-size: 9px;
    font-weight: 800;
    color: #ef4444;
    background: #fee2e2;
    padding: 1px 5px;
    border-radius: 4px;
    margin-bottom: 4px;
    text-transform: uppercase;
}

/* Badge Stati */
.bs-badge-out {
    font-size: 10px; font-weight: 700; color: #ef4444; background: #fee2e2; padding: 4px 8px; border-radius: 4px;
}
.bs-badge-info {
    font-size: 10px; font-weight: 700; color: #6b7280; background: #f3f4f6; padding: 4px 8px; border-radius: 4px;
}

/* ==========================================================================
   SYSTEM HEALTH MONITOR (Cron Heartbeat)
   ========================================================================== */

.bs-system-status {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    height: 32px;
    transition: all 0.3s ease;
    cursor: help;
}

.bs-system-status i { font-size: 12px; }

/* STATO: SANO (Verde) */
.bs-system-status.cron-healthy {
    color: #4ade80; /* Verde brillante */
    border-color: rgba(74, 222, 128, 0.3);
    background: rgba(74, 222, 128, 0.1);
}
.bs-system-status.cron-healthy .status-dot {
    background-color: #4ade80;
    box-shadow: 0 0 8px #4ade80;
    animation: bsHeartbeat 2s infinite;
}

/* STATO: RITARDO (Giallo) */
.bs-system-status.cron-warning {
    color: #fbbf24; /* Giallo/Ambra */
    border-color: rgba(251, 191, 36, 0.3);
}
.bs-system-status.cron-warning .status-dot {
    background-color: #fbbf24;
}

/* STATO: FERMO (Rosso) */
.bs-system-status.cron-error, 
.bs-system-status.cron-dead {
    color: #ef4444; /* Rosso */
    border-color: rgba(239, 68, 68, 0.4);
    background: rgba(239, 68, 68, 0.1);
}
.bs-system-status.cron-error .status-dot {
    background-color: #ef4444;
}
.bs-system-status.cron-error i {
    animation: bsBlink 1s infinite;
}

/* Pallino Indicatore */
.status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    display: inline-block;
}

/* Animazioni */
@keyframes bsHeartbeat {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.4); opacity: 0.7; }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes bsBlink {
    0% { opacity: 1; }
    50% { opacity: 0.4; }
    100% { opacity: 1; }
}

/* Nascondi etichetta su mobile per risparmiare spazio */
@media (max-width: 600px) {
    .bs-system-status .status-label { display: none; }
    .bs-system-status { padding: 5px 8px; }
}



/* ==========================================================================
   ADONE ULTIMATE UI: GLASSMORPHISM, FAB & STICKY MOBILE
   Versione Consolidata (Clean & Optimized)
   ========================================================================== */

/* --- 1. SNELLIMENTO TOP HEADER (Desktop & Mobile) --- */
.bs-dashboard-top-header {
    height: 50px !important;
    padding: 0 20px !important;
}
.bs-dashboard-title-group h1.bs-dashboard-title { font-size: 16px !important; }
.bs-dashboard-title-group p.bs-dashboard-slogan { display: none !important; }

/* --- 2. CONTROL BAR DESKTOP (Vetro Sfumato) --- */
.bs-main-controls {
    height: 54px !important; 
    /* Colore Header (RGB 58, 47, 42) all'85% */
    background: rgba(58, 47, 42, 0.85) !important; 
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding: 0 20px !important;
    
    /* Configurazione Sticky Base */
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 1100 !important;
}

/* Compensazione Sticky Desktop */
body.admin-bar .bs-main-controls { top: 32px !important; }
.bs-resource-hud-sticky { top: 54px !important; }
body.admin-bar .bs-resource-hud-sticky { top: 86px !important; }

/* Calcolo altezza Header Planner Desktop */
.bs-daily-planner .bs-planner-header, 
.bs-operator-view-planner .bs-planner-header { top: 54px !important; }

.bs-dashboard-wrap:has(.bs-resource-hud-sticky) .bs-daily-planner .bs-planner-header,
.bs-dashboard-wrap:has(.bs-resource-hud-sticky) .bs-operator-view-planner .bs-planner-header { top: 124px !important; }

body.admin-bar .bs-daily-planner .bs-planner-header, 
body.admin-bar .bs-operator-view-planner .bs-planner-header { top: 86px !important; }

body.admin-bar .bs-dashboard-wrap:has(.bs-resource-hud-sticky) .bs-daily-planner .bs-planner-header { top: 156px !important; }


/* --- 3. STILE PANNELLO FILTRI AVANZATI --- */
.bs-advanced-filters-wrapper { position: relative; }
.bs-filters-toggle-btn {
    background: rgba(255,255,255,0.1) !important;
    border: 1px solid rgba(255,255,255,0.2) !important;
    color: #fff !important;
    height: 36px !important;
    padding: 0 15px !important;
    border-radius: 6px !important;
}
.bs-filters-toggle-btn:hover { background: rgba(255,255,255,0.2) !important; }

.bs-filters-dropdown-panel {
    position: absolute;
    top: calc(100% + 10px); left: 0; width: 320px;
    background: #ffffff; border-radius: 12px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.2);
    border: 1px solid #e2e8f0; z-index: 999999;
    color: var(--bs-text-dark);    
}
.bs-filters-panel-header { padding: 15px 20px; border-bottom: 1px solid #f1f5f9; background: #f8fafc; border-radius: 12px 12px 0 0; }
.bs-filters-panel-header h4 { margin: 0; font-size: 14px; font-weight: 700; color: var(--bs-text-dark); }
.bs-filters-panel-body { padding: 20px; display: flex; flex-direction: column; gap: 15px; }
.bs-filter-field label { display: block; font-size: 11px; text-transform: uppercase; font-weight: 700; color: #64748b; margin-bottom: 5px; }

.bs-filters-panel-body .bs-status-filter-select,
.bs-filters-panel-body .bs-operator-filter-select,
.bs-filters-panel-body .bs-multi-select-trigger {
    background-color: #ffffff !important; color: var(--bs-text-dark) !important;
    border: 1px solid #cbd5e1 !important; border-radius: 6px !important;
    height: 38px !important; max-width: 100% !important;
}


/* ==========================================================================
   MOBILE OPTIMIZATION (Max 782px)
   Include: Sticky Fix, FAB Buttons, Layout Compattato
   ========================================================================== */

@media screen and (max-width: 782px) {
    
    /* 1. SBLOCCO BUG STICKY (Overflow Fix) */
    html, body, 
    .bs-dashboard-wrap, 
    .bs-dashboard-layout, 
    .bs-dashboard-main, 
    .bs-main-content-scrollable {
        overflow: visible !important;
        overflow-x: clip !important; /* Nasconde orizzontale SENZA rompere sticky verticale */
    }

    /* 2. CONTROL BAR MOBILE (Solida, Alta, Sticky) */
    .bs-main-controls {
        height: auto !important; 
        min-height: 54px !important;
        flex-wrap: wrap !important; 
        padding: 10px 15px !important;
        justify-content: center !important;
        
        /* NO VETRO SU MOBILE (Blocca i FAB) */
        backdrop-filter: none !important;         
        -webkit-backdrop-filter: none !important; 
        
        /* Colore Solido Scuro (Uguale Header) */
        background: var(--bs-text-dark) !important; 
        
        /* Forza Sticky */
        position: -webkit-sticky !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 9000 !important;
        overflow: visible !important;
    }

    /* Compensa Admin Bar WP su Mobile */
    body.admin-bar .bs-main-controls { top: 46px !important; }

    /* 3. RIORGANIZZAZIONE ELEMENTI BARRA */
    .bs-controls-left {
        width: 100% !important;
        justify-content: center !important;
        margin-bottom: 10px !important;
    }
    
    .bs-controls-right {
        width: 100% !important;
        justify-content: space-between !important;
        flex-wrap: nowrap !important;
        gap: 8px !important;
    }

    .bs-planner-search-wrapper { flex-grow: 1 !important; }
    #bs-live-search { width: 100% !important; }
    
    #bs-print-worksheet-btn {
        width: 40px !important; height: 40px !important;
        padding: 0 !important; flex-shrink: 0 !important;
    }
    #bs-print-worksheet-btn span { display: none !important; }


    /* 4. TASTO "NUOVO APPUNTAMENTO" FLUTTUANTE (FAB Principale) */
    .bs-dashboard-wrap #bs-open-add-modal {
        position: fixed !important;
        top: auto !important;     
        bottom: 25px !important;  
        right: 20px !important;   
        margin: 0 !important;
        
        width: 60px !important; height: 60px !important;
        border-radius: 50% !important;
        
        background: linear-gradient(135deg, var(--bs-primary-color) 0%, var(--bs-primary-color-dark) 100%) !important;
        box-shadow: 0 5px 20px rgba(59, 130, 246, 0.6) !important;
        z-index: 99999 !important; 
        
        display: flex !important; align-items: center !important; justify-content: center !important;
    }
    #bs-open-add-modal i { font-size: 24px !important; margin: 0 !important; }
    #bs-open-add-modal span { display: none !important; }


    /* 5. TASTO "AGGIUNGI NOTA" FLUTTUANTE (FAB Secondario) */
    .bs-dashboard-wrap #bs-quick-add-note-btn {
        position: fixed !important;
        top: auto !important;      
        bottom: 95px !important;   /* Sopra il tasto grande */
        right: 28px !important;    /* Centrato */
        margin: 0 !important;
        
        width: 44px !important; height: 44px !important;
        border-radius: 50% !important;
        
        background-color: #F59E0B !important; 
        border: 2px solid #fff !important;    
        color: #fff !important;
        box-shadow: 0 4px 12px rgba(245, 158, 11, 0.5) !important;
        z-index: 99998 !important; 
        
        display: flex !important; align-items: center !important; justify-content: center !important;
    }
    #bs-quick-add-note-btn i { font-size: 18px !important; margin: 0 !important; }
    #bs-quick-add-note-btn span { display: none !important; }

    /* 6. FIX PANNELLO FILTRI SU MOBILE */
    .bs-filters-dropdown-panel {
        position: fixed !important;
        top: 105px !important; /* Sotto la control bar */
        left: 15px !important; right: 15px !important;
        width: auto !important;
        overflow: hidden;
    }
}

/* ==========================================================================
   STILI CARTELLA CLINICA / SCHEDE TECNICHE (Modern Gallery)
   ========================================================================== */

.bs-tech-grid-modern {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 25px;
    margin-top: 10px;
}

/* Card Base */
.bs-tech-card-modern {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.02), 0 1px 3px rgba(0,0,0,0.05);
    border: 1px solid #e2e8f0;
    overflow: hidden;
    position: relative;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
}

.bs-tech-card-modern:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 24px rgba(0,0,0,0.1);
    border-color: var(--bs-primary-color);
}

/* Wrapper Click */
.bs-view-tech-btn-wrapper {
    text-decoration: none;
    color: inherit;
    display: block;
    height: 100%;
}

/* Copertina Immagine */
.bs-tech-cover {
    height: 160px;
    background-position: center;
    background-size: cover;
    position: relative;
    border-bottom: 1px solid #f1f5f9;
}

/* Badges */
.bs-tech-badge {
    /* Stile base (font, padding, ecc.) */
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 4px 8px;
    border-radius: 6px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    color: #fff;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
/* Badge TIPO (Viso/Corpo) - Questo rimane assoluto in alto a sinistra */
.bs-tech-badge.type {
    position: absolute;
    top: 10px; 
    left: 10px;
    z-index: 5;
}

/* --- FIX: Contenitore Indicatori (Destra in basso) --- */
.bs-tech-indicators {
    position: absolute;
    bottom: 10px; 
    right: 10px;
    
    display: flex;       /* Usa Flexbox per allinearli */
    flex-direction: row; /* Uno di fianco all'altro */
    gap: 6px;            /* Spazio netto tra le icone */
    z-index: 5;
    
    /* Assicuriamoci che non vadano a capo */
    flex-wrap: nowrap;
}
/* --- FIX: Badge dentro gli indicatori --- */
/* Resettiamo la posizione assoluta per far funzionare il flexbox */
.bs-tech-indicators .bs-tech-badge {
    position: static !important; /* FONDAMENTALE: Annulla position:absolute */
    margin: 0;
    transform: none;
}

/* Colori specifici */
.bs-tech-badge.info {
    background-color: #3B82F6; /* Blu */
}
.bs-tech-badge.success {
    background-color: #10B981; /* Verde */
}

/* Pulsante Elimina Flottante */
.bs-delete-tech-btn {
    position: absolute;
    top: 10px; right: 10px;
    width: 28px; height: 28px;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid #e2e8f0;
    color: #ef4444;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: all 0.2s;
    opacity: 0; /* Nascosto di default */
}
.bs-tech-card-modern:hover .bs-delete-tech-btn {
    opacity: 1; /* Appare all'hover */
}
.bs-delete-tech-btn:hover {
    background: #ef4444; color: #fff; transform: scale(1.1);
}

/* Body Card */
.bs-tech-body {
    padding: 15px;
    display: flex;
    align-items: center;
    gap: 15px;
}

/* Data Laterale */
.bs-tech-date {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    width: 45px; height: 48px;
    flex-shrink: 0;
}
.bs-tech-date .day {
    font-size: 16px; font-weight: 800; color: #1e293b; line-height: 1;
}
.bs-tech-date .month-year {
    font-size: 8px; text-transform: uppercase; color: #64748b; font-weight: 600; text-align: center; line-height: 1; margin-top: 2px;
}

/* Info Testuali */
.bs-tech-info {
    flex-grow: 1;
    overflow: hidden;
}
.bs-tech-info .operator {
    font-size: 13px; font-weight: 600; color: #334155; margin-bottom: 2px;
}
.bs-tech-info .note-preview {
    font-size: 11px; color: #94a3b8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Freccia Hover */
.bs-tech-arrow {
    color: #cbd5e1;
    transition: transform 0.2s;
}
.bs-tech-card-modern:hover .bs-tech-arrow {
    color: var(--bs-primary-color);
    transform: translateX(3px);
}

/* Empty State */
.bs-empty-state-tech {
    grid-column: 1 / -1;
    text-align: center;
    padding: 60px 20px;
    background: #fdfdfd;
    border: 2px dashed #e2e8f0;
    border-radius: 12px;
}
.bs-empty-state-tech .icon-circle {
    width: 60px; height: 60px;
    background: #f1f5f9; color: #94a3b8;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 24px; margin: 0 auto 20px;
}
.bs-empty-state-tech h3 { margin: 0 0 10px; color: #1e293b; font-size: 18px; }
.bs-empty-state-tech p { color: #64748b; margin-bottom: 25px; font-size: 14px; }

/* ==========================================================================
   TIMELINE MODERNA (Client History)
   ========================================================================== */

.bs-timeline-modern {
    position: relative;
    padding-bottom: 20px;
}

.bs-tm-row {
    display: flex;
    gap: 20px;
    margin-bottom: 25px; /* Spazio tra gli eventi */
    position: relative;
}

/* 1. Colonna Data (Sinistra) */
.bs-tm-date {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: 50px;
    flex-shrink: 0;
    text-align: center;
    padding-top: 5px;
}
.bs-tm-date .day { font-size: 18px; font-weight: 800; color: #1e293b; line-height: 1; }
.bs-tm-date .month { font-size: 10px; text-transform: uppercase; font-weight: 700; color: #64748b; margin-top: 2px; }
.bs-tm-date .year { font-size: 9px; color: #94a3b8; }

/* 2. Divisore (Linea e Icona) */
.bs-tm-divider {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 30px;
    flex-shrink: 0;
    position: relative;
}

.bs-tm-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    z-index: 2;
    box-shadow: 0 0 0 4px #fff; /* Bordo bianco per staccare dalla linea */
}

/* La linea verticale */
.bs-tm-line {
    position: absolute;
    top: 32px; /* Parte sotto l'icona */
    bottom: -30px; /* Scende fino al prossimo evento */
    width: 2px;
    background-color: #e2e8f0;
    z-index: 1;
}

/* Nascondi l'ultima linea */
.bs-tm-row:last-child .bs-tm-line {
    display: none;
}

/* 3. Card Contenuto */
.bs-tm-card {
    flex-grow: 1;
    background: #fff;
    border: 1px solid #f1f5f9;
    border-radius: 12px;
    padding: 15px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.03);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.bs-tm-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 15px rgba(0,0,0,0.08);
    border-color: #e2e8f0;
}

/* Header Card */
.bs-tm-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}
.bs-tm-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 4px;
}
.bs-tm-time {
    font-size: 11px;
    color: #94a3b8;
}

/* Body Card */
.bs-tm-body {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.bs-tm-title {
    font-size: 14px;
    font-weight: 600;
    color: #334155;
}

.bs-tm-amount {
    font-size: 14px;
    font-weight: 700;
    color: #64748b;
}
.bs-tm-amount.income {
    color: #10B981; /* Verde Soldi */
}

/* Preview Scheda Tecnica nella Timeline */
.bs-tm-tech-preview {
    display: flex;
    gap: 10px;
    margin-top: 5px;
    width: 100%;
    background: #f8fafc;
    padding: 8px;
    border-radius: 8px;
}
.bs-tm-thumb {
    width: 40px; height: 40px;
    border-radius: 6px;
    object-fit: cover;
    border: 1px solid #e2e8f0;
}
.bs-tm-tech-info {
    font-size: 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* ==========================================================================
   STILI STORICO APPUNTAMENTI (Modern List View)
   ========================================================================== */

.bs-history-list-modern {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.bs-history-card-row {
    display: flex;
    align-items: center;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 15px;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.02);
}

.bs-history-card-row:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    border-color: var(--bs-primary-color);
}

/* 1. Data Laterale */
.bs-hist-date {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 50px;
    padding-right: 15px;
    border-right: 1px dashed #e2e8f0;
    flex-shrink: 0;
    line-height: 1;
}
.bs-hist-date .d { font-size: 18px; font-weight: 800; color: #1e293b; }
.bs-hist-date .m { font-size: 10px; text-transform: uppercase; font-weight: 700; color: #64748b; margin-top: 3px; }
.bs-hist-date .y { font-size: 9px; color: #94a3b8; margin-top: 2px; }

/* 2. Dettagli Centrali */
.bs-hist-main {
    flex-grow: 1;
    padding-left: 15px;
}
.bs-hist-service {
    font-size: 15px;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 5px;
}
.bs-hist-meta {
    font-size: 12px;
    color: #64748b;
    display: flex;
    gap: 15px;
}
.bs-hist-meta i { opacity: 0.7; margin-right: 4px; }

/* 3. Prezzo e Stato */
.bs-hist-status {
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    flex-shrink: 0;
}
.bs-hist-price {
    font-size: 15px;
    font-weight: 700;
    color: var(--bs-primary-color);
}
.bs-hist-badge {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

/* Responsive */
@media (max-width: 600px) {
    .bs-history-card-row {
        flex-wrap: wrap;
    }
    .bs-hist-date {
        border-right: none;
        border-bottom: 1px dashed #e2e8f0;
        width: 100%;
        flex-direction: row;
        gap: 5px;
        padding: 0 0 10px 0;
        margin-bottom: 10px;
        justify-content: flex-start;
    }
    .bs-hist-date span { font-size: 12px; }
    .bs-hist-status {
        width: 100%;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        margin-top: 10px;
        padding-top: 10px;
        border-top: 1px solid #f1f5f9;
    }
}

/* ==========================================================================
   STILI SLIDER DNA DIAGNOSTICO (Medical UI)
   ========================================================================== */

.bs-dna-dashboard-row {
    margin-top: 10px;
}

.bs-dna-slider-group {
    margin-bottom: 25px;
}

.bs-dna-slider-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    font-size: 13px;
    font-weight: 600;
    color: #475569;
}

.bs-dna-value-badge {
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 800;
    border: 1px solid transparent;
    transition: all 0.3s ease;
}

/* Reset stile nativo dello slider */
input[type=range].bs-dna-range {
    -webkit-appearance: none;
    width: 100%;
    height: 8px;
    border-radius: 4px;
    background: #e2e8f0;
    outline: none;
    padding: 0;
    margin: 0;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.05);
    transition: background 0.1s ease;
}

/* Thumb (Il pallino che trascini) per WebKit (Chrome/Safari) */
input[type=range].bs-dna-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #ffffff;
    border: 2px solid currentColor; /* Eredita il colore via JS */
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    transition: transform 0.1s;
}

input[type=range].bs-dna-range::-webkit-slider-thumb:hover {
    transform: scale(1.2);
}

/* Thumb per Firefox */
input[type=range].bs-dna-range::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #ffffff;
    border: 2px solid currentColor;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    transition: transform 0.1s;
}

input[type=range].bs-dna-range::-moz-range-thumb:hover {
    transform: scale(1.2);
}

/* Responsive */
@media (max-width: 768px) {
    .bs-dna-dashboard-row .col-md-6 {
        padding: 0 !important;
        margin-bottom: 20px;
    }
}

/* --- FIX LAYOUT MODALE FORNITORI (3 Colonne) --- */
.bs-form-grid-3-col {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
    margin-bottom: 15px;
}

/* Su mobile torna a 1 colonna */
@media screen and (max-width: 768px) {
    .bs-form-grid-3-col {
        grid-template-columns: 1fr;
        gap: 15px;
    }
}

/* ==========================================================================
   STILE PULSANTE RESET FILTRI (ADONE PRO)
   ========================================================================== */

.bs-filters-panel-footer {
    padding: 15px;
    border-top: 1px solid #e2e8f0;
    background: #f8fafc;
}

.bs-reset-filters-btn {
    width: 100% !important;
    height: 42px !important;
    background-color: #64748b !important; /* Grigio Slate Professionale */
    color: #ffffff !important;
    border: none !important;
    border-radius: 8px !important;
    font-weight: 700 !important;
    font-size: 12px !important;
    letter-spacing: 1px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
    cursor: pointer;
}

/* Effetto Hover (Passaggio Mouse) */
.bs-reset-filters-btn:hover {
    background-color: #ef4444 !important; /* Diventa Rosso Allarme */
    transform: translateY(-2px); /* Si solleva */
    box-shadow: 0 6px 15px rgba(239, 68, 68, 0.3) !important; /* Bagliore rosso */
}

/* Animazione Icona in Hover */
.bs-reset-filters-btn:hover i {
    transform: rotate(-180deg); /* L'icona ruota mentre passi il mouse */
}

.bs-reset-filters-btn i {
    transition: transform 0.5s ease;
    font-size: 14px;
}

/* Effetto Click (Active) */
.bs-reset-filters-btn:active {
    transform: translateY(0); /* Torna giù */
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.2) !important; /* Effetto premuto */
    filter: brightness(0.9);
}

/* ==========================================================================
   ADONE RADAR PRO WIDGET (Executive UI) - FIXED ALIGNMENT
   ========================================================================== */

.bs-radar-pro-widget {
    border-top: 4px solid var(--bs-primary-color) !important;
    overflow: hidden; /* Assicura che nulla sbordi dalla card */
}

/* Layout forzato a colonna per adattarsi perfettamente alla sidebar */
.bs-radar-pro-layout {
    display: flex;
    flex-direction: column; /* FORZA gli elementi uno sotto l'altro */
    padding: 0;
    width: 100%;
}

/* Area Grafico (Sopra) */
.bs-radar-chart-area {
    width: 100%;
    position: relative;
    padding: 20px 15px 10px 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-height: 260px;
}

/* Overlay "Nessun Dato" */
.bs-radar-empty-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(255,255,255,0.8);
    backdrop-filter: blur(2px);
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    text-align: center;
    font-size: 13px;
    font-weight: 500;
}
.bs-radar-empty-overlay i { font-size: 30px; margin-bottom: 10px; opacity: 0.5; }

/* Area Dati (Sotto) - CENTRATA E FULL WIDTH */
.bs-radar-insights-area {
    width: 100%; /* Prende tutta la larghezza della card */
    background: #f8fafc;
    border-top: 1px solid #e2e8f0; /* Bordo sopra, non più a sinistra */
    padding: 25px 20px;
    display: flex;
    flex-direction: column;
    align-items: center; /* CENTRATURA ORIZZONTALE DEGLI ELEMENTI INTERNI */
    text-align: center;  /* CENTRATURA DEL TESTO */
    box-sizing: border-box;
}

/* Box Indice Opportunità */
.bs-opp-index-box {
    width: 100%;
    padding: 15px;
    border-radius: 12px;
    text-align: center;
    margin-bottom: 20px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.02);
    box-sizing: border-box;
}

.bs-opp-index-box .lbl { display: block; font-size: 10px; text-transform: uppercase; font-weight: 700; opacity: 0.8; margin-bottom: 5px; }
.bs-opp-index-box .val { font-size: 36px; font-weight: 900; line-height: 1; margin: 5px 0;}
.bs-opp-index-box .val span { font-size: 18px; font-weight: 700; }
.bs-opp-index-box .desc { font-size: 12px; margin-top: 5px; line-height: 1.4; opacity: 0.9; }

/* Colori dinamici Indice */
.high-opp { background: #fee2e2; color: #b91c1c; border: 1px solid #fca5a5; }
.med-opp  { background: #fffbeb; color: #b45309; border: 1px solid #fcd34d; }
.low-opp  { background: #ecfdf5; color: #047857; border: 1px solid #6ee7b7; }


/* ==========================================================================
   MIGLIORAMENTI TESTUALI E PULSANTE RADAR
   ========================================================================== */

/* Info Box Logica - Ridisegnato per stare centrato */
.bs-logic-info-box {
    background: #ffffff;
    border-top: 3px solid #3b82f6; /* Bordo sopra invece che a sinistra */
    border-radius: 6px;
    padding: 12px 15px;
    font-size: 11px;
    color: #64748b;
    line-height: 1.5;
    margin-bottom: 25px;
    width: 100%; /* Larghezza piena */
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
    box-sizing: border-box;
}

/* Dettaglio GAP - Lista centrata */
.bs-gap-details {
    width: 100%;
    margin-bottom: 20px;
}
.bs-gap-details h4 {
    text-align: center;
    width: 100%;
    margin-bottom: 15px !important;
}

.bs-gap-details .bs-gap-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px dashed #e2e8f0;
    max-width: 240px; /* Evita che le righe diventino chilometriche su schermi grandi */
    margin: 0 auto;   /* CENTRA LA LISTA nel div */
}
.bs-gap-item-name {
    font-size: 13px;
    font-weight: 700;
    color: #1e293b;
    display: flex;
    align-items: center;
    gap: 8px;
}
.bs-gap-item-score {
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.5px;
}

/* Pulsante Risolvi Gap (Rosso e Pulsante in basso a tutto schermo) */
.bs-btn-gap-solve {
    width: 100%;
    margin-top: auto; 
    background: linear-gradient(135deg, #EF4444 0%, #B91C1C 100%) !important;
    color: #ffffff !important;
    border: none !important;
    font-weight: 800 !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 14px !important;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(239, 68, 68, 0.4) !important;
    animation: pulseRedRadar 2s infinite;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: transform 0.2s;
}
.bs-btn-gap-solve:hover {
    transform: translateY(-2px);
    animation: none;
    box-shadow: 0 6px 20px rgba(239, 68, 68, 0.6) !important;
}

@keyframes pulseRedRadar { 
    0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.5); } 
    70% { box-shadow: 0 0 0 10px rgba(239, 68, 68, 0); } 
    100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); } 
}

/* Filtri a pillola per la Timeline */
.bs-filter-pill {    
    margin-top: 20px;
    margin-left: 10px;
    background-color: #f1f5f9;
    border: 1px solid #e2e8f0;
    color: #64748b;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}
.bs-filter-pill:hover {
    background-color: #e2e8f0;
    color: #334155;
}
.bs-filter-pill.active {
    background-color: var(--bs-primary-color);
    border-color: var(--bs-primary-color);
    color: #ffffff;
    box-shadow: 0 2px 4px rgba(59, 130, 246, 0.3);
}
.bs-filter-pill i {
    margin-right: 5px;
}

/* ==========================================================================
   STILI MODALE ASSOCIA OPERATORI (Toggle Cards V2)
   ========================================================================== */

/* Nascondi il container standard per sovrascriverlo con la griglia flex che abbiamo messo inline */
#bs-assign-operators-list label { margin-bottom: 0; padding: 0; }

.bs-op-toggle-card {
    display: block;
    cursor: pointer;
    user-select: none;
    margin: 0;
}

.bs-op-toggle-card .op-card-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 2px rgba(0,0,0,0.02);
}

.bs-op-toggle-card:hover .op-card-inner {
    border-color: #cbd5e1;
    background-color: #f8fafc;
}

/* Puntino Colore Operatore */
.op-color-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    flex-shrink: 0;
    border: 2px solid #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.op-name-text {
    font-size: 13px;
    font-weight: 600;
    color: #475569;
}

/* Icona di spunta (Nascosta di default) */
.bs-op-toggle-card .check-icon {
    font-size: 18px;
    color: var(--bs-primary-color);
    opacity: 0;
    transform: scale(0.5);
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* --- STATO SELEZIONATO --- */
.bs-op-toggle-card input[type="checkbox"]:checked + .op-card-inner {
    border-color: var(--bs-primary-color);
    background-color: var(--bs-primary-color-light); /* Sfondo azzurrognolo */
    box-shadow: 0 4px 10px rgba(59, 130, 246, 0.1);
}

.bs-op-toggle-card input[type="checkbox"]:checked + .op-card-inner .op-name-text {
    color: var(--bs-primary-color-dark);
}

.bs-op-toggle-card input[type="checkbox"]:checked + .op-card-inner .check-icon {
    opacity: 1;
    transform: scale(1);
}

/* Responsive Mobile per la griglia interna */
@media screen and (max-width: 600px) {
    #bs-assign-operators-list {
        grid-template-columns: 1fr !important; /* Colonna singola su telefoni */
    }
}

/* Posizionamento del Toggle nell'Header dell'Operatore */
.bs-operator-quick-toggle {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 10;
    background: rgba(0, 0, 0, 0.15); /* Sfondo scuro leggero per contrasto */
    padding: 4px 8px;
    border-radius: 20px;
    line-height: 0;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* ==========================================================================
   BADGE STATO OPERATORE - EXECUTIVE STYLE (Verde/Rosso)
   ========================================================================== */

.bs-operator-status-tag {
    margin-top: 10px;
}

.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    font-weight: 800;
    padding: 5px 14px; /* Più alto e più largo (meno sottile) */
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2); /* Ombra per dare rilievo */
    border: 1px solid rgba(255, 255, 255, 0.3);
    line-height: 1;
}

/* Stato: OPERATIVO (Verde Smeraldo) */
.status-pill.online {
    background-color: #10B981 !important; /* Verde Adone */
    color: #ffffff !important;
}

/* Stato: DISATTIVATO (Rosso Vibrant) */
.status-pill.offline {
    background-color: #EF4444 !important; /* Rosso Adone */
    color: #ffffff !important;
}

/* Icone dentro i badge */
.status-pill i {
    font-size: 11px;
}

/* Piccolo effetto "glow" per lo staff attivo */
.bs-operator-card.is-active .status-pill.online {
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.4);
}

/* Effetto Inattivo sulla Card */
.bs-operator-card.is-inactive {
    filter: grayscale(0.4); 
    opacity: 0.8;
}
.bs-operator-card.is-inactive .bs-operator-card-header {
    background-color: #94a3b8 !important; 
}


/* ==========================================================================
   PERMISSIONS LIST (Operator Modal Redesign)
   ========================================================================== */

.bs-perm-item {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    padding: 12px 18px;
    border-bottom: 1px solid #f1f5f9;
    cursor: pointer;
    transition: background 0.2s;
    margin: 0 !important;
}

.bs-perm-item:last-child { border-bottom: none; }

.bs-perm-item:hover { background-color: #f8fafc; }

.bs-perm-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-right: 20px;
}

.bs-perm-info strong {
    font-size: 14px;
    color: #1e293b;
    font-weight: 700;
}

.bs-perm-info span {
    font-size: 12px;
    color: #64748b;
    font-weight: 400;
    line-height: 1.3;
}

/* Switch più piccolo per la lista */
.bs-switch-sm {
    width: 44px !important;
    height: 24px !important;
    flex-shrink: 0;
}
.bs-switch-sm .bs-slider:before {
    height: 18px !important;
    width: 18px !important;
    left: 3px !important;
    bottom: 3px !important;
}
.bs-switch-sm input:checked + .bs-slider:before {
    transform: translateX(20px) !important;
}

/* Feedback visivo sul planner se in sola lettura */
.bs-dashboard-main[data-can-manage="0"] .bs-operator-col {
    cursor: default !important;
}

/* ==========================================================================
   STILI RISORSE & CABINE (Executive Card v2)
   ========================================================================== */

/* La griglia si adatta, card larghe min 260px */
.bs-resources-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}

.bs-resource-card-modern {
    background-color: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border-top: 4px solid var(--bs-info-color); /* Ciano/Info di default */
}

.bs-resource-card-modern:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 15px rgba(0,0,0,0.06);
}

/* Header */
.bs-res-card-header {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 20px;
    border-bottom: 1px solid #f8fafc;
}

.bs-res-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

.bs-res-identity {
    flex-grow: 1;
    min-width: 0; /* Previene sbordamento testo */
}

.bs-res-name {
    margin: 0 0 2px 0;
    font-size: 16px;
    font-weight: 700;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bs-res-id {
    font-size: 11px;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Body */
.bs-res-card-body {
    padding: 20px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* Box Quantità Grande */
.bs-res-quantity-box {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    background: #f8fafc;
    border: 1px solid #f1f5f9;
    padding: 15px;
    border-radius: 8px;
}

.bs-res-quantity-box .val {
    font-size: 36px;
    font-weight: 900;
    color: var(--bs-info-color-dark);
    line-height: 1;
}

.bs-res-quantity-box .lbl {
    font-size: 11px;
    color: #64748b;
    text-transform: uppercase;
    font-weight: 600;
    line-height: 1.3;
}

/* Note */
.bs-res-notes-box {
    font-size: 12px;
    color: #475569;
    line-height: 1.5;
    background: #fffbeb;
    padding: 10px 12px;
    border-left: 3px solid #fcd34d;
    border-radius: 4px;
}

/* Footer (Azioni) */
.bs-res-card-footer {
    display: flex;
    gap: 8px;
    padding: 12px 20px;
    background-color: #f8fafc;
    border-top: 1px solid #e2e8f0;
}

/* Colore Modifica Bottone Risorsa Hover */
.bs-res-card-footer .bs-edit-resource-btn:hover {
    background-color: var(--bs-info-color-dark) !important;
    border-color: var(--bs-info-color-dark) !important;
}

/* Adattamento Modale su Mobile */
@media screen and (max-width: 600px) {
    #bs-manage-resource-modal .bs-form-grid-2-col {
        grid-template-columns: 1fr !important;
    }
}

/* ==========================================================================
   AGGIORNAMENTO STILI CATEGORIE (v5 - Executive Footer)
   ========================================================================== */

/* HEADER CARD */
.bs-category-header {
    padding: 20px;
    display: flex;
    gap: 15px;
    align-items: center; /* Centra verticalmente icona e testo */
    border-bottom: 1px solid #f8f9fa;
    background: linear-gradient(to bottom, #ffffff, #fcfcfc);
}

/* Modifica al pulsante Elimina nel Footer (Rosso Pieno) */
.bs-category-card-footer .bs-delete-category-btn {
    background-color: var(--bs-error-color) !important;
    border-color: var(--bs-error-color) !important;
    color: white !important;
}
.bs-category-card-footer .bs-delete-category-btn:hover {
    background-color: var(--bs-error-color-dark) !important;
    border-color: var(--bs-error-color-dark) !important;
}
.bs-category-card-footer .bs-delete-category-btn i {
    color: white !important;
}

/* Hover per il tasto modifica */
.bs-category-card-footer .bs-edit-category-btn:hover {
    background-color: var(--bs-info-color-dark) !important;
    border-color: var(--bs-info-color-dark) !important;
}

/* ==========================================================================
   ORARIO STANDARD (Executive Redesign v2)
   ========================================================================== */

/* Il contenitore che racchiude i giorni */
.bs-schedule-modern-grid {
    display: flex;
    flex-direction: column;
}

/* La singola riga del giorno (Lunedì, Martedì...) */
.bs-schedule-day-row {
    display: flex;
    align-items: flex-start;
    padding: 15px 0;
    border-bottom: 1px dashed #cbd5e1; /* Tratteggio elegante */
    margin: 0 !important; /* Resetta i margini vecchi */
}

.bs-schedule-day-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

/* Colonna di sinistra (Nome giorno e pulsante Add) */
.bs-day-col-left {
    width: 110px; /* Larghezza fissa per allineare gli input a destra */
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding-top: 8px; /* Allinea il testo con l'input a destra */
}

.bs-day-col-left strong {
    font-size: 13px;
    color: #334155;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 700;
}

/* Pulsante "+ Turno" */
.bs-add-interval-btn {
    background: transparent;
    color: var(--bs-primary-color);
    border: 1px dashed #cbd5e1;
    border-radius: 6px;
    padding: 4px 8px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.2s ease;
}
.bs-add-interval-btn:hover {
    background: var(--bs-primary-color-light);
    border-color: var(--bs-primary-color);
    color: var(--bs-primary-color-dark);
}

/* Colonna di destra (Gli input dell'orario) */
.bs-intervals-col-right {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 10px; /* Spazio tra i turni se uno spezza la giornata */
}

/* Il blocco di un singolo turno (Da X a Y) */
.bs-schedule-interval-modern {
    display: flex;
    align-items: center;
    background: #ffffff;
    padding: 8px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.02);
    width: max-content; /* Il box avvolge il contenuto senza allargarsi troppo */
    transition: border-color 0.2s ease;
}
.bs-schedule-interval-modern:hover {
    border-color: #cbd5e1;
}

/* La singola "pillola" dell'input (Da / A) */
.bs-time-box {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-right: 15px; /* Spazio prima del prossimo box o del cestino */
}

.bs-time-box .bs-time-label {
    font-size: 11px;
    color: #94a3b8;
    text-transform: lowercase;
    font-weight: 600;
}

/* Input Orario pulito */
.bs-time-box input[type="time"] {
    border: none !important;
    background: #f8fafc !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    padding: 6px 10px !important;
    border-radius: 6px !important;
    height: 34px !important;
    width: auto !important;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.05) !important;
    cursor: pointer;
}
.bs-time-box input[type="time"]:focus {
    box-shadow: inset 0 0 0 2px var(--bs-primary-color-light) !important;
}

/* Tasto Elimina (Cestino discreto) */
.bs-remove-interval-btn {
    background: transparent;
    color: #cbd5e1;
    border: none;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
    margin-left: auto; /* Lo spinge alla fine del box */
}
.bs-remove-interval-btn:hover {
    background: #fee2e2;
    color: #ef4444;
}

/* Responsive: Se lo schermo è stretto, impila Giorno e Orari */
@media screen and (max-width: 600px) {
    .bs-schedule-day-row {
        flex-direction: column;
        gap: 15px;
    }
    .bs-day-col-left {
        width: 100%;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding-top: 0;
    }
    .bs-schedule-interval-modern {
        width: 100%;
        justify-content: space-between;
    }
    .bs-time-box { margin-right: 5px; }
}

/* Assicura che gli input nelle griglie delle modali prendano sempre tutto lo spazio */
.bs-modal .bs-form-grid-2-col .bs-form-field input {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Ripristina le freccette laterali per gli input numerici */
input[type="number"] {
    -moz-appearance: number-input !important; /* Firefox */
    padding-right: 5px; 
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: inner-spin-button !important; /* Chrome/Safari/Edge */
    opacity: 1 !important;
    margin-left: 5px;
}

/* Assicura che l'input non schiacci il numero contro le freccette */
.bs-modal input[type="number"] {
    text-align: left !important; /* Meglio a sinistra se ci sono le freccette */
    padding-left: 15px !important;
}