.drawer-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 1050;
        transition: opacity 0.3s ease;
    }

    /* Nested drawer overlay should appear on top of global drawer */
    #nestedDrawer_overlay {
        z-index: 1070;
    }

    .drawer {
        position: fixed;
        top: 0;
        height: 100%;
        max-height: 100%;
        background-color: var(--tblr-bg-surface, #fff);
        box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
        z-index: 1051;
        transition: transform 0.3s ease;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    /* Inline style from JS often set display; keep column flex when open */
    .drawer.show {
        display: flex !important;
        flex-direction: column;
        transform: translateX(0);
    }

    /* Nested drawer should appear on top of global drawer */
    #nestedDrawer {
        z-index: 1071;
    }

    .drawer-right {
        right: 0;
        transform: translateX(100%);
    }

    .drawer-left {
        left: 0;
        transform: translateX(-100%);
    }

    .drawer-overlay.show {
        display: block;
        opacity: 1;
    }

    .drawer-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 1rem 1.5rem;
        border-bottom: 1px solid var(--tblr-border-color, #e6e7e9);
        background-color: var(--tblr-bg-surface-secondary, #f8fafc);
        flex-shrink: 0;
    }

    .drawer-title {
        margin: 0;
        font-size: 1.25rem;
        font-weight: 600;
        color: var(--tblr-body-color, #1e293b);
    }

    .drawer-header .drawer-close {
        flex-shrink: 0;
    }

    .drawer-body {
        padding: 1.5rem;
        flex: 1 1 0;
        min-height: 0;
        overflow-y: auto;
        position: relative;
        z-index: 1;
        display: flex;
        flex-direction: column;
    }

    .drawer-body > [id$="_content"] {
        flex: 1 1 0;
        min-height: 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    /*
     * Listing drawers (Statuses / Actions): pin footer, scroll table area only.
     * Overrides the default form-scroll and earlier "body scrolls all" listing layout.
     */
    .drawer-body:has(> [id$="_content"] > .drawer-listing-container) {
        overflow: hidden;
        padding: 0;
    }

    .drawer-body:has(> [id$="_content"] > .drawer-listing-container) > [id$="_content"] {
        flex: 1 1 0;
        min-height: 0;
        height: auto;
        max-height: 100%;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    .drawer-body:has(> [id$="_content"] > .drawer-listing-container)
        > [id$="_content"]
        > .drawer-listing-container {
        flex: 1 1 0;
        min-height: 0;
        height: auto;
        max-height: 100%;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    .drawer-listing-container {
        padding: 0;
        min-height: 0;
    }

    .drawer-listing-container > .drawer-form-content {
        flex: 1 1 0;
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .drawer-listing-container > .drawer-form-footer {
        flex: 0 0 auto;
        position: relative;
        margin-top: 0;
    }

    /*
     * Form drawers (Add/Edit record, etc.): pin footer, scroll only .drawer-form-content.
     * Applies to global + nested drawers.
     */
    .drawer-body:has(> [id$="_content"] > .drawer-form-container .drawer-form) {
        overflow: hidden;
        padding: 0;
    }

    .drawer-body:has(> [id$="_content"] > .drawer-form-container .drawer-form)
        > [id$="_content"]
        > .drawer-form-container {
        flex: 1 1 0;
        min-height: 0;
        height: auto;
        max-height: 100%;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    .drawer-form-container .drawer-form {
        flex: 1 1 0;
        min-height: 0;
        height: auto;
        max-height: 100%;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    .drawer-form-container .drawer-form-content {
        flex: 1 1 0;
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .drawer-form-container .drawer-form-footer {
        position: relative;
        flex: 0 0 auto;
        margin-top: 0;
    }

    /* Nested add/edit forms (legacy selectors kept for clarity) */
    #nestedDrawer .drawer-body {
        overflow: hidden;
        display: flex;
        flex-direction: column;
        padding: 0;
    }

    #nestedDrawer .drawer-body > [id$="_content"] {
        flex: 1 1 0;
        min-height: 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    #nestedDrawer .drawer-body > [id$="_content"] > .drawer-form-container {
        flex: 1 1 0;
        min-height: 0;
        height: auto;
        max-height: 100%;
    }

    #nestedDrawer .drawer-form-content {
        overflow-y: auto;
    }

    body.drawer-open {
        overflow: hidden;
    }
    
    /* Select2 in global drawer - above drawer content but below toast and swal */
    #globalDrawer .select2-container {
        z-index: 1091;
    }
    
    #globalDrawer .select2-dropdown {
        z-index: 1092 !important;
    }
    
    /* Select2 in nested drawer - above nested drawer content but below toast and swal */
    #nestedDrawer .select2-container {
        z-index: 1093;
    }
    
    #nestedDrawer .select2-dropdown {
        z-index: 1094 !important;
    }
    
    /* General drawer Select2 (fallback) */
    .drawer .select2-container {
        z-index: 1091;
    }
    
    .drawer .select2-dropdown {
        z-index: 1092 !important;
    }
    
    /* Select2 dropdown appended to drawer overlay (avoids overflow clipping) */
    .drawer-overlay .select2-dropdown {
        z-index: 1092 !important;
    }
    
    /* Ensure drawer-body allows Select2 container to show (no overflow clip on container) */
    .drawer-body .select2-container {
        position: relative;
    }

    /* RTL Support */
    [dir="rtl"] .drawer-right {
        left: 0;
        right: auto;
        transform: translateX(-100%);
    }

    [dir="rtl"] .drawer-left {
        right: 0;
        left: auto;
        transform: translateX(100%);
    }

    [dir="rtl"] .drawer-right.show {
        transform: translateX(0);
    }

    [dir="rtl"] .drawer-left.show {
        transform: translateX(0);
    }

    /* Drawer Form Styles */
    .drawer-form-container {
        padding: 0;
        height: auto;
        max-height: 100%;
        display: flex;
        flex-direction: column;
        min-height: 0;
        overflow: hidden;
    }
    
    .drawer-form {
        height: auto;
        max-height: 100%;
        display: flex;
        flex-direction: column;
        min-height: 0;
        overflow: hidden;
    }
    
    .drawer-form-content {
        flex: 1 1 0;
        min-height: 0;
        overflow-y: auto;
        padding: 1.5rem;
        padding-bottom: 1rem;
    }
    
    .drawer-form-footer {
        flex: 0 0 auto;
        position: relative;
        bottom: auto;
        padding: 1rem 1.5rem;
        margin-top: 0;
        box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.06);
        background: var(--tblr-bg-surface, #fff);
        z-index: 2;
    }

    .drawer-form-container .form-check.form-switch .form-check-input:checked {
        background-color: var(--theme-primary);
        border-color: var(--theme-primary);
    }

    .drawer-form-container .invalid-feedback,
    .drawer-form-container .field-validation-error {
        display: block;
        width: 100%;
        margin-top: 0.25rem;
        font-size: 0.8125rem;
        color: var(--tblr-danger, #d63939);
    }

    .drawer-form-container .form-control.input-validation-error,
    .drawer-form-container .form-select.input-validation-error {
        border-color: var(--tblr-danger, #d63939);
    }
    
    /* Drawer Loading Spinner */
    .drawer-loading {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 400px;
        width: 100%;
    }
    
    .drawer-loading-spinner {
        font-size: 3rem;
        color: var(--theme-primary);
        animation: drawer-spin 1s linear infinite;
    }
    
    @keyframes drawer-spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }

    /* Responsive Drawer Styles */
    /* Mobile devices (up to 576px) */
    @media (max-width: 575.98px) {
        .drawer {
            width: 100% !important;
            max-width: 100%;
        }
        
        .drawer-header {
            padding: 0.75rem 1rem;
        }
        
        .drawer-title {
            font-size: 1rem;
        }
        
        .drawer-body {
            padding: 1rem;
        }

        .drawer-body:has(> [id$="_content"] > .drawer-form-container .drawer-form) {
            padding: 0;
        }
        
        .drawer-form-content {
            padding: 1rem;
        }
        
        .drawer-form-footer {
            padding: 0.75rem 1rem;
        }
    }

    /* Small tablets (576px to 768px) */
    @media (min-width: 576px) and (max-width: 767.98px) {
        .drawer {
            width: 90% !important;
            max-width: 90%;
        }
        
        .drawer-header {
            padding: 0.875rem 1.25rem;
        }
        
        .drawer-body {
            padding: 1.25rem;
        }

        .drawer-body:has(> [id$="_content"] > .drawer-form-container .drawer-form) {
            padding: 0;
        }
        
        .drawer-form-content {
            padding: 1.25rem;
        }
    }

    /* Tablets (768px to 992px) */
    @media (min-width: 768px) and (max-width: 991.98px) {
        .drawer {
            width: 85% !important;
            max-width: 85%;
        }
    }

    /* Small desktops (992px to 1200px) */
    @media (min-width: 992px) and (max-width: 1199.98px) {
        .drawer {
            max-width: 90%;
        }
        
        /* All drawers use percentage widths, no pixel overrides needed */
    }

    /* Large desktops (1200px and above) */
    @media (min-width: 1200px) {
        /* Use the default fixed widths for large screens */
        /* No override needed - let JavaScript set widths */
    }

    @media (max-width: 991.98px) {
        #nestedDrawer .drawer-body {
            padding: 0;
        }

        .drawer-body:has(> [id$="_content"] > .drawer-form-container .drawer-form) {
            padding: 0;
        }
    }