@import '_content/ReactorBlazorQRCodeScanner/ReactorBlazorQRCodeScanner.bundle.scp.css';

/* /Pages/account/CompanyLogin.razor.rz.scp.css */
/* RubyManager Logo Styling */
.logo-image[b-32gjo7fqe6] {
    width: 60px;
    height: 60px;
    object-fit: contain;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    padding: 8px;
    border: 2px solid rgba(255, 255, 255, 0.2);
}
/* /Pages/dialogs/DialogLessonCreateEdit.razor.rz.scp.css */

/* Fix for Syncfusion SfDropDownList popup display issue in version 30.1.42 */
/* Issue: Dropdown popups only show half height or are clipped within modal dialogs */
/* Root cause: Different CSS class structure between SfDropDownList and SfMultiSelect */

/* Primary fix: Target specific DropDownList popup classes */
[b-ruf3kvhffc] .e-popup.e-ddl-popup,
[b-ruf3kvhffc] .e-ddl-popup,
[b-ruf3kvhffc] .e-popup-open.e-ddl-popup {
    z-index: 1300 !important;
    position: fixed !important;
    max-height: none !important;
    height: auto !important;
    visibility: visible !important;
    opacity: 1 !important;
    display: block !important;
}

/* Target the specific popup container for DropDownList */
[b-ruf3kvhffc] .e-popup.e-popup-open.e-ddl-popup .e-content {
    max-height: 300px !important;
    min-height: 48px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

/* Fix the list container inside DropDownList popup */
[b-ruf3kvhffc] .e-ddl-popup .e-list-parent,
[b-ruf3kvhffc] .e-ddl-popup .e-list-parent.e-ul {
    max-height: 300px !important;
    min-height: 48px !important;
    height: auto !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

/* DEPRECATED: SfDialog container fixes - no longer needed after Bootstrap migration */
/*
::deep .e-dialog,
::deep .e-dialog .e-dlg-content,
::deep .e-dialog .e-dlg-container {
    overflow: visible !important;
}
*/

/* Ensure SfDropDownList container allows popup overflow */
[b-ruf3kvhffc] .e-dropdownlist,
[b-ruf3kvhffc] .e-input-group,
[b-ruf3kvhffc] .col-12,
[b-ruf3kvhffc] .row {
    overflow: visible !important;
}

/* Force popup to break out of container constraints */
[b-ruf3kvhffc] .e-popup.e-ddl-popup {
    transform: none !important;
    left: auto !important;
    top: auto !important;
    position: fixed !important;
}

/* Alternative approach: Override popup positioning */
[b-ruf3kvhffc] .e-dropdownbase.e-popup {
    position: fixed !important;
    z-index: 1300 !important;
}

/* Backup general approach */
[b-ruf3kvhffc] .e-popup.e-popup-open,
[b-ruf3kvhffc] .e-ddl.e-popup,
[b-ruf3kvhffc] .e-dropdownlist.e-popup {
    z-index: 1300 !important;
}

/* Custom Bootstrap Select Styling */
.custom-bootstrap-select[b-ruf3kvhffc] {
    border: 1px solid #dee2e6;
    border-radius: 4px;
    padding: 12px 16px;
    font-size: 14px;
    font-family: "Roboto", "Segoe UI", sans-serif;
    background-color: #ffffff;
    color: #333333;
    transition: all 0.2s ease;
    min-height: 48px;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23212529' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.custom-bootstrap-select:focus[b-ruf3kvhffc] {
    border-color: #007bff;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
    outline: 0;
}

.custom-bootstrap-select:hover[b-ruf3kvhffc] {
    border-color: #adb5bd;
}

/* Simple Bootstrap select styling - keep labels at top with proper spacing */
.custom-bootstrap-select[b-ruf3kvhffc] {
    padding-top: 2rem;
    padding-bottom: 0.5rem;
}

.form-floating > label[b-ruf3kvhffc] {
    opacity: 0.65;
    transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
    color: #6c757d;
    font-size: 12px;
}

/* Legacy fix attempt - keeping as reference but updated */
/*@media (min-width: 576px) {
   .e-dll-popup-open-fix {
        position: fixed;
    }
    .dialogSize{
        height:100% !important;
    }
}*/

 /* // Medium devices (tablets, 768px and up)*/
/*@media (min-width: 768px) {  
    .e-dll-popup-open-fix {
        position: fixed;
    }
    .dialogSize {
        height: 100% !important;
    }
}*/

/* // Large devices (desktops, 992px and up)*/
/*@media (min-width: 992px) {
    .e-dll-popup-open-fix {
        position: fixed;
    }
}*/

/*// Extra large devices (large desktops, 1200px and up)*/
/*@media (min-width: 1200px) {
    .e-dll-popup-open-fix {
        position: fixed;
    }
}*/
/* /Pages/dialogs/DialogLessonPublicCreateEdit.razor.rz.scp.css */

/* Fix for Syncfusion SfMultiSelect popup display issue in Bootstrap modals */
/* Issue: Dropdown popups are clipped or show behind modal dialogs */
/* Root cause: Bootstrap modal z-index (1050) vs dropdown z-index conflicts */

/* Primary fix: Target SfMultiSelect popup classes with higher z-index */
[b-sa3az5h6e4] .e-popup.e-ddl-popup,
[b-sa3az5h6e4] .e-ddl-popup,
[b-sa3az5h6e4] .e-popup-open.e-ddl-popup,
[b-sa3az5h6e4] .e-multiselect-wrapper .e-popup {
    z-index: 1300 !important;
    position: fixed !important;
    max-height: none !important;
    height: auto !important;
    visibility: visible !important;
    opacity: 1 !important;
    display: block !important;
}

/* Target the specific popup container for MultiSelect */
[b-sa3az5h6e4] .e-popup.e-popup-open.e-ddl-popup .e-content,
[b-sa3az5h6e4] .e-multiselect-wrapper .e-popup .e-content {
    max-height: 300px !important;
    min-height: 48px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

/* Fix the list container inside MultiSelect popup */
[b-sa3az5h6e4] .e-ddl-popup .e-list-parent,
[b-sa3az5h6e4] .e-ddl-popup .e-list-parent.e-ul,
[b-sa3az5h6e4] .e-multiselect-wrapper .e-list-parent {
    max-height: 300px !important;
    min-height: 48px !important;
    height: auto !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

/* Prevent parent containers from clipping the popup */
/* DEPRECATED: SfDialog container rules no longer needed after Bootstrap migration */
/*
::deep .e-dialog,
::deep .e-dialog .e-dlg-content,
::deep .e-dialog .e-dlg-container,
*/
[b-sa3az5h6e4] .modal,
[b-sa3az5h6e4] .modal-dialog,
[b-sa3az5h6e4] .modal-content,
[b-sa3az5h6e4] .modal-body {
    overflow: visible !important;
}

/* Ensure SfMultiSelect container allows popup overflow */
[b-sa3az5h6e4] .e-multiselect,
[b-sa3az5h6e4] .e-input-group,
[b-sa3az5h6e4] .col-12,
[b-sa3az5h6e4] .row {
    overflow: visible !important;
}

/* Force popup to break out of container constraints */
[b-sa3az5h6e4] .e-popup.e-ddl-popup,
[b-sa3az5h6e4] .e-multiselect-wrapper .e-popup {
    transform: none !important;
    left: auto !important;
    top: auto !important;
    position: fixed !important;
}

/* Alternative approach: Override popup positioning */
[b-sa3az5h6e4] .e-dropdownbase.e-popup,
[b-sa3az5h6e4] .e-multiselect.e-popup {
    position: fixed !important;
    z-index: 1300 !important;
}

/* Backup general approach for all Syncfusion popups in modals */
[b-sa3az5h6e4] .e-popup.e-popup-open {
    z-index: 1300 !important;
}
/* /Pages/schedules/ScheduleIndex.razor.rz.scp.css */
/*HeaderStyles*/
.quick-info-header[b-b1d9lvfj9j] {
    background-color: white;
    padding: 8px 18px;
}

.quick-info-header-content[b-b1d9lvfj9j] {
    justify-content: flex-end;
    display: flex;
    flex-direction: column;
    padding: 5px 10px 5px;
}

.quick-info-title[b-b1d9lvfj9j] {
    font-weight: 500;
    font-size: 16px;
    letter-spacing: 0.48px;
    height: 22px;
}

.duration-text[b-b1d9lvfj9j] {
    font-size: 11px;
    letter-spacing: 0.33px;
    height: 14px;
}
/*ContentStyles*/
.content-area[b-b1d9lvfj9j] {
    padding: 10px;
    width: 100%;
}

.event-content[b-b1d9lvfj9j] {
    height: 90px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 15px;
}

.meeting-type-wrap[b-b1d9lvfj9j], .meeting-subject-wrap[b-b1d9lvfj9j], .notes-wrap[b-b1d9lvfj9j] {
    font-size: 11px;
    color: #666;
    letter-spacing: 0.33px;
    height: 24px;
    padding: 5px;
}

.event-content div label[b-b1d9lvfj9j] {
    display: inline-block;
    min-width: 45px;
    color: #666;
}

.event-content div span[b-b1d9lvfj9j] {
    font-size: 11px;
    color: #151515;
    letter-spacing: 0.33px;
    line-height: 14px;
    padding-left: 8px;
}

.quick-info .e-popup-content[b-b1d9lvfj9j] {
}
/*FooterStyles*/
.cell-footer.e-btn[b-b1d9lvfj9j] {
    background-color: #ffffff;
    border-color: #878787;
    color: #878787;
}

.cell-footer[b-b1d9lvfj9j] {
    padding-top: 10px;
}

.e-quick-popup-wrapper .e-cell-popup .e-popup-content[b-b1d9lvfj9j] {
    padding: 0 14px;
}
/* /Shared/MainLayout.razor.rz.scp.css */
.page[b-s3z6u73emt] {
    position: relative;
    display: flex;
    flex-direction: column;
}

.main[b-s3z6u73emt] {
    flex: 1;
}

.sidebar[b-s3z6u73emt] {
    /*    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
*/
    background-color: #304250;
}

.top-row[b-s3z6u73emt] {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .top-row[b-s3z6u73emt]  a, .top-row .btn-link[b-s3z6u73emt] {
        white-space: nowrap;
        margin-left: 1.5rem;
    }

    .top-row a:first-child[b-s3z6u73emt] {
        overflow: hidden;
        text-overflow: ellipsis;
    }

@media (max-width: 640.98px) {
    .top-row:not(.auth)[b-s3z6u73emt] {
        display: none;
    }

    .top-row.auth[b-s3z6u73emt] {
        justify-content: space-between;
    }

    .top-row a[b-s3z6u73emt], .top-row .btn-link[b-s3z6u73emt] {
        margin-left: 0;
    }
}

@media (min-width: 641px) {
    .page[b-s3z6u73emt] {
        flex-direction: row;
    }

    .sidebar[b-s3z6u73emt] {
        width: 250px;
        height: 100%;
        position: sticky;
        top: 0;
    }

    .top-row[b-s3z6u73emt] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .main > div[b-s3z6u73emt] {
        padding-left: 20rem !important;
        padding-right: 1.5rem !important;
    }
}
/* /Shared/MainLayoutV2/MainLayout2.razor.rz.scp.css */
.page[b-3f5u97b8jb] {
    position: relative;
    display: flex;
    flex-direction: column;
}

.main[b-3f5u97b8jb] {
    flex: 1;
}

.sidebar[b-3f5u97b8jb] {
    /*    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
*/
    background-color: #304250;
}

.top-row[b-3f5u97b8jb] {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .top-row[b-3f5u97b8jb]  a, .top-row .btn-link[b-3f5u97b8jb] {
        white-space: nowrap;
        margin-left: 1.5rem;
    }

    .top-row a:first-child[b-3f5u97b8jb] {
        overflow: hidden;
        text-overflow: ellipsis;
    }

@media (max-width: 640.98px) {
    .top-row:not(.auth)[b-3f5u97b8jb] {
        display: none;
    }

    .top-row.auth[b-3f5u97b8jb] {
        justify-content: space-between;
    }

    .top-row a[b-3f5u97b8jb], .top-row .btn-link[b-3f5u97b8jb] {
        margin-left: 0;
    }
}

@media (min-width: 641px) {
    .page[b-3f5u97b8jb] {
        flex-direction: row;
    }

    .sidebar[b-3f5u97b8jb] {
        width: 250px;
        height: 100%;
        position: sticky;
        top: 0;
    }

    .top-row[b-3f5u97b8jb] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .main > div[b-3f5u97b8jb] {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }
}
/* /Shared/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-qktr3e7i38] {
    background-color: rgba(255, 255, 255, 0.1);
}

/* Legacy top-row styling removed - using new sidebar-header */

.navbar-brand[b-qktr3e7i38] {
    font-size: 1.1rem;
}

.oi[b-qktr3e7i38] {
    width: 2rem;
    font-size: 1.1rem;
    vertical-align: text-top;
    top: -2px;
}

.nav-item[b-qktr3e7i38] {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

    .nav-item:first-of-type[b-qktr3e7i38] {
        padding-top: 1rem;
    }

    .nav-item:last-of-type[b-qktr3e7i38] {
        padding-bottom: 1rem;
    }

    .nav-item[b-qktr3e7i38]  a {
        color: #d7d7d7;
        border-radius: 4px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
    }

.nav-item[b-qktr3e7i38]  a.active {
    background-color: rgba(255,255,255,0.25);
    color: white;
}

.nav-item[b-qktr3e7i38]  a:hover {
    background-color: rgba(255,255,255,0.1);
    color: white;
}

.nav-disabled[b-qktr3e7i38] {
    color: currentColor !important;
    cursor: not-allowed !important;
    opacity: 0.5 !important;
    text-decoration: none !important;
}

.pointer[b-qktr3e7i38] {cursor: pointer;}

/* Collapsible sidebar styles */
.sidebar-collapsed[b-qktr3e7i38] {
    /* Internal styles only */
}

.sidebar-expanded[b-qktr3e7i38] {
    /* Internal styles only */
}

/* Hide text when collapsed - ONLY on desktop */
@media (min-width: 641px) {
    .sidebar-collapsed .nav-text[b-qktr3e7i38] {
        display: none;
    }

    .sidebar-collapsed .nav-link[b-qktr3e7i38] {
        justify-content: center;
        text-align: center;
        padding: 0.5rem;
    }

    .sidebar-collapsed .nav-link i[b-qktr3e7i38] {
        margin-right: 0;
    }
}

/* Icon spacing - all devices */
.nav-link i[b-qktr3e7i38] {
    margin-right: 0.5rem;
    width: 1rem;
    text-align: center;
}

/* Mobile devices - text always visible */
@media (max-width: 640px) {
    .nav-text[b-qktr3e7i38] {
        display: block !important;
    }
    
    .nav-link[b-qktr3e7i38] {
        justify-content: flex-start !important;
        text-align: left !important;
        padding: 0.75rem 1rem !important;
    }
    
    .nav-link i[b-qktr3e7i38] {
        margin-right: 0.5rem !important;
    }
}

/* Modern Sidebar Header - Following 2024 UX Best Practices */
.sidebar-header[b-qktr3e7i38] {
    height: 64px;
    background-color: rgba(0,0,0,0.4);
    border-bottom: 1px solid rgba(255,255,255,0.1);
    display: flex;
    align-items: center;
    padding: 0.75rem;
    position: relative;
    flex-shrink: 0;
}

/* Toggle Button - Modern Clean Style */
.sidebar-toggle[b-qktr3e7i38] {
    width: 40px;
    height: 40px;
    border: none;
    background: rgba(255,255,255,0.1);
    color: white;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-right: 0.75rem;
}

.sidebar-toggle:hover[b-qktr3e7i38] {
    background: rgba(255,255,255,0.2);
    transform: scale(1.05);
}

.sidebar-toggle:active[b-qktr3e7i38] {
    transform: scale(0.95);
}

/* Brand Section - Flexible Layout */
.brand-section[b-qktr3e7i38] {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0; /* Prevents overflow */
}

.brand-logo[b-qktr3e7i38] {
    flex-shrink: 0;
    margin-right: 0.75rem;
}

.brand-logo img[b-qktr3e7i38] {
    border: 2px solid rgba(255,255,255,0.2);
    transition: all 0.3s ease;
}

/* Brand Info - Clean Typography */
.brand-info[b-qktr3e7i38] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    opacity: 1;
    transition: opacity 0.3s ease;
}

.brand-name[b-qktr3e7i38] {
    color: white;
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
    display: flex;
    align-items: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.brand-version[b-qktr3e7i38] {
    color: rgba(255,255,255,0.7);
    font-size: 0.75rem;
    margin: 0;
    line-height: 1;
}

.network-status[b-qktr3e7i38] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-left: 0.5rem;
    flex-shrink: 0;
}

/* Mobile Hamburger - Hidden on Desktop */
.navbar-toggler[b-qktr3e7i38] {
    background-color: rgba(255, 255, 255, 0.1);
    border: none;
    color: white;
    padding: 0.5rem;
    border-radius: 4px;
}

/* Responsive Behavior */
@media (max-width: 640px) {
    .sidebar-toggle[b-qktr3e7i38] {
        display: none;
    }
    
    .sidebar-header[b-qktr3e7i38] {
        width: 100% !important;
        padding-left: 1rem;
        padding-right: 0.5rem;
        position: relative;
        z-index: 1000;
    }
    
    /* Ensure parent sidebar is full width on mobile */
    :global(.sidebar)[b-qktr3e7i38] {
        width: 100% !important;
        max-width: 100% !important;
        position: static !important;
    }
}

@media (min-width: 641px) {
    .navbar-toggler[b-qktr3e7i38] {
        display: none;
    }

    /* Clean layout when collapsed */
    .sidebar-header:has(.sidebar-toggle)[b-qktr3e7i38] {
        justify-content: flex-start;
    }

    .collapse[b-qktr3e7i38] {
        /* Never collapse the sidebar for wide screens */
        display: flex;
        flex-direction: column;
        height: calc(100% - 64px);
        overflow: hidden;
    }
}

/* ===== ACCORDION NAVIGATION STYLES ===== */

/* Main nav container */
.nav-accordion[b-qktr3e7i38] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0.5rem 0;
}

/* Group container */
.nav-item-group[b-qktr3e7i38] {
    position: relative;
    list-style: none;
    margin: 0.25rem 0;
}

/* Group Header */
.nav-group-header[b-qktr3e7i38] {
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem;
    color: #fff;
    cursor: pointer;
    transition: all 0.2s ease;
    border-radius: 4px;
    margin: 0 0.5rem;
    font-weight: 500;
}

.nav-group-header:hover[b-qktr3e7i38] {
    background-color: rgba(255, 255, 255, 0.1);
}

.nav-group-header.expanded[b-qktr3e7i38] {
    background-color: rgba(255, 255, 255, 0.15);
}

.nav-group-header i:first-child[b-qktr3e7i38] {
    width: 1.25rem;
    text-align: center;
    margin-right: 0.75rem;
    font-size: 1rem;
}

.nav-group-header .nav-text[b-qktr3e7i38] {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Chevron animation */
.nav-group-chevron[b-qktr3e7i38] {
    font-size: 0.75rem;
    transition: transform 0.3s ease;
    margin-left: auto;
}

.nav-group-chevron.rotated[b-qktr3e7i38] {
    transform: rotate(180deg);
}

/* Sub-items container with animation */
.nav-group-items[b-qktr3e7i38] {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.nav-group-items.expanded[b-qktr3e7i38] {
    max-height: 500px;
}

/* Sub-item styling */
.nav-subitem[b-qktr3e7i38] {
    display: flex;
    align-items: center;
    padding: 0.6rem 1rem 0.6rem 2.5rem;
    color: rgba(255, 255, 255, 0.8);
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.9rem;
    margin: 0 0.5rem;
    border-radius: 4px;
}

.nav-subitem:hover[b-qktr3e7i38] {
    background-color: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.nav-subitem i[b-qktr3e7i38] {
    width: 1rem;
    text-align: center;
    margin-right: 0.75rem;
    font-size: 0.875rem;
}

/* Single item groups */
.nav-group-single[b-qktr3e7i38] {
    cursor: pointer;
}

/* ===== FLYOUT MENU STYLES ===== */

.nav-flyout[b-qktr3e7i38] {
    position: absolute;
    left: 100%;
    top: 0;
    min-width: 200px;
    background: #1e2a3a;
    border-radius: 4px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    z-index: 1000;
    padding: 0.5rem 0;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.nav-flyout-header[b-qktr3e7i38] {
    padding: 0.5rem 1rem;
    font-weight: 600;
    color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 0.25rem;
    font-size: 0.875rem;
}

.nav-flyout-item[b-qktr3e7i38] {
    display: flex;
    align-items: center;
    padding: 0.5rem 1rem;
    color: rgba(255, 255, 255, 0.8);
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.875rem;
}

.nav-flyout-item:hover[b-qktr3e7i38] {
    background-color: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.nav-flyout-item i[b-qktr3e7i38] {
    width: 1rem;
    text-align: center;
    margin-right: 0.75rem;
}

/* ===== LOG OFF FIXED BOTTOM ===== */

.nav-logout[b-qktr3e7i38] {
    padding: 0.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin-top: auto;
    flex-shrink: 0;
}

.nav-logout-item[b-qktr3e7i38] {
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem;
    color: rgba(255, 255, 255, 0.8);
    cursor: pointer;
    transition: all 0.2s ease;
    border-radius: 4px;
}

.nav-logout-item:hover[b-qktr3e7i38] {
    background-color: rgba(255, 100, 100, 0.2);
    color: #ff6b6b;
}

.nav-logout-item i[b-qktr3e7i38] {
    width: 1.25rem;
    text-align: center;
    margin-right: 0.75rem;
}

/* ===== COLLAPSED STATE STYLES ===== */

@media (min-width: 641px) {
    .sidebar-collapsed .nav-group-header[b-qktr3e7i38] {
        justify-content: center;
        padding: 0.75rem;
    }

    .sidebar-collapsed .nav-group-header .nav-text[b-qktr3e7i38],
    .sidebar-collapsed .nav-group-chevron[b-qktr3e7i38] {
        display: none;
    }

    .sidebar-collapsed .nav-group-header i:first-child[b-qktr3e7i38] {
        margin-right: 0;
        font-size: 1.25rem;
    }

    .sidebar-collapsed .nav-group-items[b-qktr3e7i38] {
        display: none;
    }

    .sidebar-collapsed .nav-logout-item[b-qktr3e7i38] {
        justify-content: center;
        padding: 0.75rem;
    }

    .sidebar-collapsed .nav-logout-item .nav-text[b-qktr3e7i38] {
        display: none;
    }

    .sidebar-collapsed .nav-logout-item i[b-qktr3e7i38] {
        margin-right: 0;
        font-size: 1.25rem;
    }
}

/* ===== MOBILE STYLES ===== */

@media (max-width: 640px) {
    .nav-group-header[b-qktr3e7i38] {
        padding: 0.75rem;
    }

    .nav-subitem[b-qktr3e7i38] {
        padding-left: 2.25rem;
    }

    .nav-flyout[b-qktr3e7i38] {
        display: none !important;
    }
}