/* ===============================================
   LAYOUT SIDEBAR DESTRA
   Solo per dashboard professionista calendario
   =============================================== */

/* Fix main-content che ha già display: flex */
.main-content {
    display: block !important;
}

.content-wrapper {
    max-width: 100% !important;
}

/* Container dashboard con sidebar */
.dashboard-content-wrapper {
    display: flex !important;
    flex-direction: row-reverse !important;
    /* Sidebar a destra */
    gap: 35px !important;
    /* Spazio tra sidebar e calendario */
    width: 100% !important;
    align-items: stretch !important;
}

/* Sidebar a destra */
.dashboard-content-wrapper>.dashboard-sidebar {
    order: 2 !important;
    flex-shrink: 0 !important;
    width: 280px !important;
    /* Larghezza fissa sidebar */
}

/* Contenuto principale a sinistra */
.dashboard-content-wrapper>.dashboard-main {
    order: 1 !important;
    flex: 1 !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
    /* Previene scrollbar orizzontale */
    padding-right: 16px !important;
    /* Spazio tra calendario e sidebar */
}

/* Fix calendario che non deve uscire */
.dashboard-main .calendar-section {
    max-width: 100% !important;
    overflow-x: auto !important;
}

.dashboard-main .calendar-container {
    max-width: 100% !important;
}

/* ===============================================
   RESPONSIVE DESIGN - MOBILE E TABLET
   =============================================== */

/* Tablet: sidebar passa sotto al contenuto */
@media (max-width: 1280px) {
    .dashboard-content-wrapper {
        flex-direction: column !important;
        gap: 24px !important;
    }

    .dashboard-content-wrapper > .dashboard-sidebar {
        width: 100% !important;
        order: 1 !important;
    }

    .dashboard-content-wrapper > .dashboard-main {
        order: 2 !important;
        padding-right: 0 !important;
    }
}

/* Mobile: riduci gap e padding */
@media (max-width: 768px) {
    .dashboard-content-wrapper {
        gap: 16px !important;
    }
}

@media (max-width: 480px) {
    .dashboard-content-wrapper {
        gap: 12px !important;
    }

    .dashboard-main {
        padding: 0 !important;
    }
}