/**
 * SAW Admin - Sidebar Responsive
 * @package SAW_Visitors
 * @version 4.1.0
 * 
 * IMPORTANT: This file is loaded AFTER _sidebar-wrapper.css
 * All responsive overrides for sidebar width/height should be here
 */

/* ============================================
   TABLET (769px - 1024px)
   ============================================ */
@media (max-width: 1024px) and (min-width: 769px) {
    .sa-sidebar {
        /* Narrower width on tablet - approximately 67% of desktop (480px vs 720px) */
        width: 480px !important;
        max-width: calc(100% - 0px) !important;
        height: calc(100vh - var(--saw-bottom-nav-height, 52px)) !important;
        height: calc(100dvh - var(--saw-bottom-nav-height, 52px)) !important;
        bottom: var(--saw-bottom-nav-height, 52px) !important;
        top: 0 !important;
    }

    .sa-sidebar--nested {
        width: 440px !important;
        max-width: calc(100% - 80px) !important;
    }

    .sa-sidebar-header {
        padding: var(--saw-space-2) var(--saw-space-3);
        min-height: 56px;
        height: 56px;
    }

    /* Reduced padding on tablet - content fills more sidebar width */
    .sa-sidebar-content {
        padding: 0 !important;
        padding-bottom: var(--saw-space-10, 40px) !important;
    }

    .sa-detail-wrapper,
    .sa-detail-content-wrapper {
        padding: var(--saw-space-2) !important;
    }

    .sa-form-section-content {
        padding: var(--saw-space-3) !important;
    }

    .sa-sidebar-footer {
        padding: var(--saw-space-3);
    }
}

/* ============================================
   MOBILE (768px and below)
   ============================================ */
@media (max-width: 768px) {
    .sa-sidebar {
        width: 100% !important;
        max-width: 100% !important;
        height: calc(100vh - var(--saw-bottom-nav-height-mobile, 48px)) !important;
        height: calc(100dvh - var(--saw-bottom-nav-height-mobile, 48px)) !important;
        bottom: var(--saw-bottom-nav-height-mobile, 48px) !important;
        top: 0 !important;
    }

    .sa-sidebar--nested {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* More compact header on mobile */
    .sa-sidebar-header {
        padding: var(--saw-space-2, 8px) var(--saw-space-3, 12px);
        min-height: 48px;
        height: auto;
    }

    /* No padding on content for full-width bento header */
    .sa-sidebar-content {
        padding: 0;
        /* Large padding at bottom for scrolling to last items */
        padding-bottom: var(--saw-space-12, 48px) !important;
    }

    /* Legacy detail wrapper needs some padding */
    .sa-sidebar-content .sa-detail-wrapper:not(.bento-wrapper) {
        padding: var(--saw-space-3, 12px);
    }

    .sa-sidebar-footer {
        padding: var(--saw-space-3);
        flex-direction: column;
    }

    .sa-sidebar-footer-actions {
        width: 100%;
        flex-direction: column;
    }

    .sa-sidebar-footer-actions .sa-btn {
        width: 100%;
    }
}