/* ===========================================================================
   InMyLocus Backend Ultimate Responsive Master Patch (Tablets & Phones)
   =========================================================================== */

/* 1. Viewport & Overflow Protection */
html, body {
  overflow-x: hidden !important;
  width: 100% !important;
  max-width: 100vw !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 0 !important;
}

*, *:before, *:after {
  box-sizing: inherit !important;
}

/* 2. Tables & Data Grids Horizontal Scroll */
.table-responsive, table, .dataTables_wrapper, .card-body {
  width: 100% !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

/* 3. Tablet Portrait & Landscape (768px to 1024px) */
@media (max-width: 1024px) {
  .main-sidebar, .sidebar, aside, [class*="sidebar"] {
    position: fixed !important;
    left: -280px;
    top: 0;
    height: 100vh;
    z-index: 1050;
    transition: left 0.3s ease;
  }
  body.sidebar-open .main-sidebar, 
  body.sidebar-open .sidebar, 
  body.sidebar-open aside {
    left: 0 !important;
  }
  .content-wrapper, .main-panel, .container, .container-fluid, 
  [class*="content-wrapper"], [class*="main-panel"] {
    margin-left: 0 !important;
    width: 100% !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}

/* 4. Phone Portrait & Landscape (< 768px) */
@media (max-width: 768px) {
  /* Stack all grid columns to full width */
  .row > [class*="col-"], .col-lg-3, .col-lg-4, .col-lg-6, .col-md-3, .col-md-4, .col-md-6, .col-md-8, .col-md-12 {
    width: 100% !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
    margin-bottom: 12px !important;
  }

  /* Cards & Containers spacing */
  .card, .box, .panel {
    margin-bottom: 12px !important;
    border-radius: 8px !important;
  }
  .card-body, .box-body {
    padding: 12px !important;
  }

  /* Form Elements & Inputs (Prevents iOS zoom on focus) */
  input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="search"], select, textarea, .form-control {
    font-size: 16px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Buttons & Action groups */
  .btn, button {
    width: 100% !important;
    margin-bottom: 6px !important;
  }
  .btn-group {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
  }

  /* Navigation & Header adjustments */
  .navbar, .main-header {
    flex-wrap: wrap !important;
    padding: 8px !important;
  }
}