/* ========================================
   COMPLETE RESPONSIVE CSS FOR ALL SCREEN SIZES
   Covers: Mobile, Tablet Portrait, Tablet Landscape, Desktop
   ======================================== */

/* ========================================
   SIDEBAR TOGGLE - DESKTOP HIDDEN STATE
   This rule must come first to override all media queries
   ======================================== */

#page-content-wrapper.sidebar-hidden {
    margin-left: 0 !important;
    width: 100% !important;
}

.sidebar.sidebar-hidden {
    display: none !important;
}

/* ========================================
   SIDEBAR FULL HEIGHT FIX - ALL DEVICES
   ======================================== */

.sidebar {
    /* Full viewport height */
    min-height: 100vh !important;
    max-height: 100vh !important;
    height: 100vh !important;
    
    /* Flexbox for proper content distribution */
    display: flex !important;
    flex-direction: column !important;
    
    /* Overflow handling */
    overflow: hidden !important;
}

.sidebar-header {
    flex-shrink: 0 !important;
}

.sidebar-menu {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-behavior: smooth !important;
}

/* ========================================
   TABLET PORTRAIT (768px - 991px)
   iPad, iPad Mini, Android Tablets
   ======================================== */

@media (min-width: 768px) and (max-width: 991.98px) {
    /* Sidebar - Make narrower on tablet portrait */
    .sidebar {
        width: 240px !important;
    }
    
    #page-content-wrapper {
        margin-left: 240px !important;
    }
    
    /* Topbar adjustments */
    .topbar {
        padding: 10px 0 !important;
    }
    
    .topbar .container-fluid {
        padding: 0 16px !important;
    }
    
    /* Search bar - medium width */
    .topbar .position-relative {
        max-width: 400px !important;
    }
    
    #universalSearch {
        font-size: 14px !important;
        padding: 8px 12px !important;
    }
    
    /* Main content */
    main.container-fluid {
        padding: 20px !important;
    }
    
    /* Cards - 2 column layout */
    .row .col-lg-3,
    .row .col-lg-4 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
    
    .row .col-lg-6 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
    
    /* Widgets */
    .widget {
        padding: 20px !important;
    }
    
    /* Tables */
    .table {
        font-size: 13px !important;
    }
    
    .table thead th {
        padding: 10px !important;
        font-size: 12px !important;
    }
    
    .table tbody td {
        padding: 10px !important;
        font-size: 13px !important;
    }
    
    /* Buttons */
    .btn {
        font-size: 13px !important;
        padding: 8px 14px !important;
    }
    
    /* Forms */
    .form-control,
    .form-select {
        font-size: 14px !important;
        padding: 8px 12px !important;
    }
    
    /* Modals */
    .modal-dialog {
        max-width: 600px !important;
    }
    
    /* Offcanvas */
    .offcanvas {
        width: 400px !important;
    }
}

/* ========================================
   SMALL TABLETS & LARGE PHONES (576px - 767px)
   Large phones in landscape, small tablets
   ======================================== */

@media (min-width: 576px) and (max-width: 767.98px) {
    /* Hide sidebar completely */
    .sidebar {
        transform: translateX(-100%) !important;
        position: fixed !important;
        z-index: 9999 !important;
        width: 280px !important;
    }
    
    .sidebar.show {
        transform: translateX(0) !important;
    }
    
    #page-content-wrapper {
        margin-left: 0 !important;
        width: 100% !important;
    }
    
    /* Topbar */
    .topbar {
        padding: 10px 0 !important;
    }
    
    .topbar .container-fluid {
        padding: 0 12px !important;
    }
    
    /* Search - full width */
    .topbar .flex-grow-1 {
        order: 3 !important;
        flex: 0 0 100% !important;
        margin: 10px 0 0 0 !important;
    }
    
    /* Main content */
    main.container-fluid {
        padding: 16px !important;
    }
    
    /* Cards - 2 columns on small tablets */
    .row .col-md-6,
    .row .col-lg-3,
    .row .col-lg-4 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
    
    /* Tables - horizontal scroll */
    .table-responsive {
        margin: 0 -12px !important;
        width: calc(100% + 24px) !important;
    }
    
    .table {
        min-width: 700px !important;
        font-size: 12px !important;
    }
}

/* ========================================
   EXTRA LARGE TABLETS (992px - 1199px)
   iPad Pro, Large Android Tablets
   ======================================== */

@media (min-width: 992px) and (max-width: 1199.98px) {
    /* Sidebar - standard width */
    .sidebar {
        width: 260px !important;
    }
    
    #page-content-wrapper {
        margin-left: 260px !important;
    }
    
    /* Main content */
    main.container-fluid {
        padding: 24px !important;
    }
    
    /* Cards - 3 columns */
    .row .col-lg-3 {
        flex: 0 0 33.333333% !important;
        max-width: 33.333333% !important;
    }
    
    .row .col-lg-4 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
}

/* ========================================
   LARGE DESKTOP (1200px - 1399px)
   Standard desktop monitors
   ======================================== */

@media (min-width: 1200px) and (max-width: 1399.98px) {
    /* Sidebar - full width */
    .sidebar {
        width: 280px !important;
    }
    
    #page-content-wrapper {
        margin-left: 280px !important;
    }
    
    /* Main content */
    main.container-fluid {
        padding: 28px !important;
    }
}

/* ========================================
   EXTRA LARGE DESKTOP (1400px+)
   Large monitors, 4K displays
   ======================================== */

@media (min-width: 1400px) {
    /* Sidebar - full width */
    .sidebar {
        width: 300px !important;
    }
    
    #page-content-wrapper {
        margin-left: 300px !important;
    }
    
    /* Main content - max width for readability */
    main.container-fluid {
        padding: 32px !important;
        max-width: 1920px !important;
        margin: 0 auto !important;
    }
    
    /* Cards - 4 columns on very large screens */
    .row .col-lg-3 {
        flex: 0 0 25% !important;
        max-width: 25% !important;
    }
}

/* ========================================
   LANDSCAPE ORIENTATION FIXES
   ======================================== */

/* Small phones landscape (< 568px height) */
@media (max-height: 568px) and (orientation: landscape) {
    .sidebar {
        width: 220px !important;
    }
    
    .sidebar-header {
        padding: 12px !important;
    }
    
    .menu-item {
        padding: 6px 12px !important;
        font-size: 13px !important;
    }
    
    .topbar {
        height: 50px !important;
    }
    
    main.container-fluid {
        padding: 12px !important;
    }
}

/* Tablets landscape */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
    .sidebar {
        width: 240px !important;
    }
    
    #page-content-wrapper {
        margin-left: 240px !important;
    }
}

/* ========================================
   SPECIFIC DEVICE FIXES
   ======================================== */

/* iPad Mini (768 x 1024) */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 1) {
    
    /* Portrait */
    @media (orientation: portrait) {
        .sidebar {
            width: 240px !important;
        }
        
        #page-content-wrapper {
            margin-left: 240px !important;
        }
        
        /* Make filters collapsible on iPad too */
        .filter-toggle-btn {
            display: flex !important;
        }
    }
    
    /* Landscape */
    @media (orientation: landscape) {
        .sidebar {
            width: 260px !important;
        }
        
        #page-content-wrapper {
            margin-left: 260px !important;
        }
    }
}

/* iPad Pro (1024 x 1366) */
@media only screen 
  and (min-device-width: 1024px) 
  and (max-device-width: 1366px) 
  and (-webkit-min-device-pixel-ratio: 2) {
    
    .sidebar {
        width: 280px !important;
    }
    
    #page-content-wrapper {
        margin-left: 280px !important;
    }
}

/* ========================================
   RESPONSIVE TABLES FOR ALL SIZES
   ======================================== */

/* Tablets - Optimize table display */
@media (min-width: 768px) and (max-width: 1199.98px) {
    .table-responsive {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    .table {
        min-width: 900px !important;
    }
    
    .table thead th {
        white-space: nowrap !important;
    }
    
    .table tbody td {
        white-space: nowrap !important;
    }
}

/* ========================================
   RESPONSIVE CARDS FOR ALL SIZES
   ======================================== */

/* Small tablets */
@media (min-width: 576px) and (max-width: 767.98px) {
    .card {
        margin-bottom: 16px !important;
    }
    
    .card-header,
    .card-body {
        padding: 14px !important;
    }
}

/* Medium tablets */
@media (min-width: 768px) and (max-width: 991.98px) {
    .card {
        margin-bottom: 20px !important;
    }
    
    .card-header,
    .card-body {
        padding: 16px !important;
    }
}

/* Large tablets */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .card {
        margin-bottom: 24px !important;
    }
    
    .card-header,
    .card-body {
        padding: 20px !important;
    }
}

/* ========================================
   RESPONSIVE FORMS FOR ALL SIZES
   ======================================== */

/* Tablets - 2 column forms */
@media (min-width: 768px) and (max-width: 1199.98px) {
    .row .col-md-3,
    .row .col-md-4 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
}

/* ========================================
   RESPONSIVE BUTTONS FOR ALL SIZES
   ======================================== */

/* Small tablets */
@media (min-width: 576px) and (max-width: 767.98px) {
    .btn {
        font-size: 13px !important;
        padding: 8px 14px !important;
    }
    
    .btn-sm {
        font-size: 12px !important;
        padding: 6px 10px !important;
    }
}

/* Medium tablets */
@media (min-width: 768px) and (max-width: 991.98px) {
    .btn {
        font-size: 14px !important;
        padding: 9px 16px !important;
    }
}

/* ========================================
   RESPONSIVE MODALS FOR ALL SIZES
   ======================================== */

/* Small tablets */
@media (min-width: 576px) and (max-width: 767.98px) {
    .modal-dialog {
        max-width: 500px !important;
        margin: 12px auto !important;
    }
}

/* Medium tablets */
@media (min-width: 768px) and (max-width: 991.98px) {
    .modal-dialog {
        max-width: 600px !important;
    }
}

/* Large tablets */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .modal-dialog {
        max-width: 700px !important;
    }
}

/* ========================================
   RESPONSIVE OFFCANVAS FOR ALL SIZES
   ======================================== */

/* Small tablets */
@media (min-width: 576px) and (max-width: 767.98px) {
    .offcanvas {
        width: 90% !important;
        max-width: 450px !important;
    }
}

/* Medium tablets */
@media (min-width: 768px) and (max-width: 991.98px) {
    .offcanvas {
        width: 400px !important;
    }
}

/* Large tablets */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .offcanvas {
        width: 450px !important;
    }
}

/* ========================================
   RESPONSIVE TYPOGRAPHY FOR ALL SIZES
   ======================================== */

/* Small tablets */
@media (min-width: 576px) and (max-width: 767.98px) {
    h1, .h1 { font-size: 24px !important; }
    h2, .h2 { font-size: 22px !important; }
    h3, .h3 { font-size: 20px !important; }
    h4, .h4 { font-size: 18px !important; }
    h5, .h5 { font-size: 16px !important; }
}

/* Medium tablets */
@media (min-width: 768px) and (max-width: 991.98px) {
    h1, .h1 { font-size: 28px !important; }
    h2, .h2 { font-size: 24px !important; }
    h3, .h3 { font-size: 22px !important; }
    h4, .h4 { font-size: 20px !important; }
    h5, .h5 { font-size: 18px !important; }
}

/* ========================================
   RESPONSIVE SPACING FOR ALL SIZES
   ======================================== */

/* Small tablets */
@media (min-width: 576px) and (max-width: 767.98px) {
    .mb-4 { margin-bottom: 16px !important; }
    .mt-4 { margin-top: 16px !important; }
    .p-4 { padding: 16px !important; }
}

/* Medium tablets */
@media (min-width: 768px) and (max-width: 991.98px) {
    .mb-4 { margin-bottom: 20px !important; }
    .mt-4 { margin-top: 20px !important; }
    .p-4 { padding: 20px !important; }
}

/* ========================================
   RESPONSIVE FILTERS FOR TABLETS
   ======================================== */

@media (min-width: 768px) and (max-width: 1024px) {
    /* Make filters collapsible on tablets too */
    .filter-toggle-btn {
        display: flex !important;
        width: 100% !important;
        padding: 12px 16px !important;
        background: var(--gray-50, #f9fafb) !important;
        border: 1px solid var(--gray-200, #e5e7eb) !important;
        border-radius: 8px !important;
        font-weight: 600 !important;
        margin-bottom: 12px !important;
    }
    
    .filter-collapse {
        border: 1px solid var(--gray-200, #e5e7eb) !important;
        border-top: none !important;
        border-radius: 0 0 8px 8px !important;
        padding: 16px !important;
        background: white !important;
    }
}

/* ========================================
   RESPONSIVE TABS FOR ALL SIZES
   ======================================== */

/* Tablets - scrollable tabs */
@media (min-width: 768px) and (max-width: 1199.98px) {
    .nav-tabs {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: thin !important;
    }
    
    .nav-tabs .nav-link {
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }
}

/* ========================================
   RESPONSIVE CHARTS FOR ALL SIZES
   ======================================== */

/* Small tablets */
@media (min-width: 576px) and (max-width: 767.98px) {
    canvas {
        max-height: 300px !important;
    }
}

/* Medium tablets */
@media (min-width: 768px) and (max-width: 991.98px) {
    canvas {
        max-height: 350px !important;
    }
}

/* ========================================
   RESPONSIVE WIDGETS FOR ALL SIZES
   ======================================== */

/* Small tablets - 2 columns */
@media (min-width: 576px) and (max-width: 767.98px) {
    .widget {
        padding: 16px !important;
    }
    
    .widget h3 {
        font-size: 22px !important;
    }
    
    .widget-icon {
        width: 48px !important;
        height: 48px !important;
    }
}

/* Medium tablets - 2-3 columns */
@media (min-width: 768px) and (max-width: 991.98px) {
    .widget {
        padding: 20px !important;
    }
    
    .widget h3 {
        font-size: 24px !important;
    }
    
    .widget-icon {
        width: 52px !important;
        height: 52px !important;
    }
}

/* ========================================
   PRINT STYLES (ALL SIZES)
   ======================================== */

@media print {
    .sidebar,
    .topbar,
    .sidebar-toggle,
    .toast-container,
    .btn,
    .offcanvas,
    .modal-backdrop,
    .filter-toggle-btn {
        display: none !important;
    }
    
    #page-content-wrapper {
        margin-left: 0 !important;
        width: 100% !important;
    }
    
    .filter-collapse {
        display: block !important;
        border: none !important;
        padding: 0 !important;
    }
    
    .table {
        font-size: 10px !important;
    }
    
    body {
        background: white !important;
    }
}

/* ========================================
   HIGH DPI DISPLAYS (RETINA)
   ======================================== */

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    /* Sharper borders and shadows */
    .card,
    .btn,
    .form-control,
    .table {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
}

/* ========================================
   ACCESSIBILITY - REDUCED MOTION
   ======================================== */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ========================================
   DARK MODE SUPPORT (FUTURE)
   ======================================== */

@media (prefers-color-scheme: dark) {
    /* Placeholder for future dark mode support */
    /* Can be implemented later if needed */
}