/* =====================================================
   VERTICAL DASHBOARD NAVIGATION STYLES
   ===================================================== */

/* Base Navigation Pills Styling */
.vertical-dashboard .nav-pills .nav-link {
    border-radius: 0.475rem;
    margin-bottom: 0.25rem;
    transition: all 0.15s ease;
    min-height: 50px;
    align-items: center;
    text-align: left;
}

.vertical-dashboard .nav-pills .nav-link:hover {
    transform: translateX(2px);
}

.vertical-dashboard .nav-pills .nav-link.active {
    box-shadow: 0 0.5rem 1.5rem 0.5rem rgba(0, 0, 0, 0.075);
}

.vertical-dashboard .nav-pills .nav-link .fs-7 {
    font-size: 0.75rem !important;
}

/* Layout Spacing */
.vertical-dashboard .row {
    margin-left: -0.75rem;
    margin-right: -0.75rem;
}

.vertical-dashboard .row > [class*="col-"] {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}

/* Card Transitions */
.vertical-dashboard .card {
    transition: all 0.15s ease;
}

/* Tab Content */
.vertical-dashboard .tab-pane {
    min-height: 500px;
}

/* Full Width Content */
.vertical-dashboard .tab-content {
    width: 100%;
}

/* Ensure all cards inside tabs use full width */
.vertical-dashboard .tab-pane .card {
    width: 100%;
    margin-bottom: 0;
}

.vertical-dashboard .tab-pane .card .card-body {
    padding: 2rem;
}

/* Remove any width restrictions from organization widgets */
.vertical-dashboard .tab-pane .row.justify-content-center {
    justify-content: stretch !important;
}

.vertical-dashboard .tab-pane .col-lg-10,
.vertical-dashboard .tab-pane .col-xl-8,
.vertical-dashboard .tab-pane .col-xl-12 {
    max-width: 100% !important;
    flex: 0 0 100% !important;
    width: 100% !important;
}

/* Disabled button styling for surveys dashboard */
.vertical-dashboard .cursor-not-allowed {
    cursor: not-allowed !important;
    pointer-events: all !important;
}

.vertical-dashboard .nav-link.cursor-not-allowed:hover {
    transform: none !important;
    background-color: transparent !important;
}

/* =====================================================
   RESPONSIVE STYLES
   ===================================================== */

@media (max-width: 1199.98px) {
    /* On smaller screens, make navigation more compact */
    .vertical-dashboard .col-2 {
        flex: 0 0 auto;
        width: 20%;
    }
    
    .vertical-dashboard .col-10 {
        flex: 0 0 auto;
        width: 80%;
    }
}

@media (max-width: 991.98px) {
    /* On tablets and mobile, stack vertically */
    .vertical-dashboard .nav-pills {
        flex-direction: row !important;
        flex-wrap: wrap;
    }
    
    .vertical-dashboard .nav-pills .nav-link {
        min-height: auto;
        padding: 0.75rem 1rem;
        margin-bottom: 0.25rem;
        margin-right: 0.25rem;
    }
    
    .vertical-dashboard .nav-pills .nav-link span.d-flex {
        flex-direction: row !important;
        align-items: center;
    }
    
    .vertical-dashboard .nav-pills .nav-link .fs-7 {
        margin-left: 0.5rem;
        margin-top: 0;
    }
    
    /* Hide description text on mobile */
    .vertical-dashboard .nav-pills .nav-link .fs-7.text-muted {
        display: none !important;
    }
    
    /* Stack navigation and content vertically on mobile */
    .vertical-dashboard .row {
        flex-direction: column;
    }
    
    .vertical-dashboard .col-2, 
    .vertical-dashboard .col-10 {
        width: 100% !important;
        flex: 0 0 auto;
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
    
    .vertical-dashboard .col-2.pe-4 {
        padding-right: 0.75rem !important;
        margin-bottom: 1.5rem;
    }
}

/* Toastr success: blu primary con effetto bombato (override su plugins.bundle che usa .toastr.toastr-success verde) */
#toastr-container .toastr-success,
.toastr.toastr-success,
#toast-container .toast-success,
.toast.toast-success {
    background: linear-gradient(180deg, var(--bs-primary) 0%, var(--bs-primary-dark-20) 100%) !important;
    background-color: var(--bs-primary) !important;
    border: 0 !important;
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(var(--bs-primary-rgb), 0.3) !important;
    text-align: center !important;
    padding: 1rem 1.25rem !important;
}
#toastr-container .toastr-success .toast-message,
.toastr.toastr-success .toast-message,
#toastr-container .toastr-success .toast-title,
.toastr.toastr-success .toast-title,
#toast-container .toast-success .toast-message,
.toast.toast-success .toast-message,
#toast-container .toast-success .toast-title,
.toast.toast-success .toast-title {
    color: #fff !important;
    text-align: center !important;
}
#toastr-container .toastr-success .toast-close-button,
.toastr.toastr-success .toast-close-button,
#toast-container .toast-success .toast-close-button,
.toast.toast-success .toast-close-button {
    color: rgba(255, 255, 255, 0.9) !important;
    text-shadow: none !important;
}
#toastr-container .toastr-success:hover,
.toastr.toastr-success:hover,
#toast-container .toast-success:hover,
.toast.toast-success:hover {
    box-shadow: 0 4px 12px rgba(var(--bs-primary-rgb), 0.35) !important;
}