/* ========================================================
   Mobile Responsive Fixes
   Stack: AdminLTE 2.x layout + Bootstrap 5.3 + jQuery 4
======================================================== */

/* ── 1. SIDEBAR – offcanvas drawer on mobile ── */
@media (max-width: 767px) {
  .main-sidebar {
    transform: translateX(-230px);
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    z-index: 1050;
    transition: transform .28s ease;
    overflow-y: scroll;   /* always show scrollbar so all items reachable */
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
  }

  /* ensure inner section doesn't clip */
  .main-sidebar .sidebar {
    overflow: visible !important;
    height: auto !important;
    padding-bottom: 60px; /* breathing room at bottom */
  }

  body.sidebar-open .main-sidebar {
    transform: translateX(0);
    box-shadow: 4px 0 16px rgba(0, 0, 0, .35);
  }

  /* dim overlay behind open sidebar */
  body.sidebar-open::before {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .45);
    z-index: 1040;
  }

  /* content fills full width – no sidebar indent */
  .content-wrapper,
  .main-footer {
    margin-left: 0 !important;
  }

  /* account for the double-stacked header (logo row + nav row) */
  .content-wrapper {
    padding-top: 100px !important;
    min-height: calc(100vh - 100px) !important;
  }

  .main-sidebar {
    padding-top: 100px;
  }
}

/* treeview sub-menus: hidden until JS opens them */
.sidebar-menu .treeview-menu {
  display: none;
}
.sidebar-menu .treeview-menu.menu-open {
  display: block;
}

/* ── Sidebar toggle button – always visible ── */
.sidebar-toggle {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  color: inherit;
  text-decoration: none;
}

.sidebar-toggle:hover {
  background: rgba(0, 0, 0, .08);
}

/* ── 2. HEADER ── */
@media (max-width: 767px) {
  /* Flexbox header: eliminates float/stacking-order conflicts that displaced the burger hit-area */
  .main-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030;
    display: flex !important;
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    min-height: 50px;
  }

  /* Logo: flexible, no float, no position:relative (eliminates stacking over the toggle) */
  .main-header .logo {
    flex: 1 1 auto;
    float: none !important;
    width: auto !important;
    max-width: none !important;
    position: static !important;
    display: flex;
    align-items: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .9rem;
    padding: 0 10px;
    min-width: 0;
  }

  /* Navbar: auto-width flex container; no float, no position:relative */
  .main-header .navbar {
    flex: 0 0 auto;
    float: none !important;
    width: auto !important;
    position: static !important;
    margin: 0 !important;
    padding: 0;
    display: flex !important;
    align-items: center;
    min-height: 50px;
  }

  /* Sidebar-toggle: reliable hit-target, sits above all siblings in z-order */
  .main-header .sidebar-toggle {
    flex-shrink: 0;
    float: none !important;
    position: relative !important;
    z-index: 1031 !important;
    touch-action: manipulation;
    cursor: pointer;
  }

  /* compact notification icons */
  .main-header .navbar-nav > li > a {
    padding: 8px 10px;
  }
}

/* ── 3. TABLES – horizontal scroll on all small screens ── */
@media (max-width: 991px) {
  /* Any table that isn't already inside .table-responsive gets auto-scroll */
  .content-wrapper table.table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Keep thead/tbody as table elements once overflow is on the wrapper */
  .content-wrapper table.table thead,
  .content-wrapper table.table tbody,
  .content-wrapper table.table tfoot {
    display: table;
    width: 100%;
  }
}

/* ── 4. CARDS / PANELS ── */
@media (max-width: 767px) {
  .card,
  .box {
    margin-bottom: .85rem;
  }

  /* summary tiles: 2-up on phone, 1-up on tiny */
  .summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 400px) {
  .summary-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ── 5. TOOLBAR & PAGE HEADER ── */
@media (max-width: 767px) {
  /* un-stick the filter bar so it doesn't compete with the fixed header */
  .sticky-toolbar {
    position: static !important;
    top: auto !important;
    z-index: auto !important;
  }

  /* stack title + action buttons */
  #kt_toolbar_container {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: .5rem !important;
  }

  #kt_toolbar_container > div {
    width: 100%;
  }

  #kt_toolbar_container .d-flex {
    flex-wrap: wrap;
    gap: .4rem;
  }

  /* make action buttons fill the row on very small screens */
  #kt_toolbar_container .btn {
    flex: 1 1 auto;
    min-width: 0;
  }
}

/* ── 6. FILTER FORMS (inside toolbar cards) ── */
@media (max-width: 767px) {
  /* all medium columns become full-width */
  .toolbar-card form .row > [class*="col-md-"],
  .toolbar-card .row > [class*="col-md-"] {
    width: 100% !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }

  /* but keep 2-up for small selects (FY, quarter) */
  .toolbar-card form .col-md-2 {
    width: 50% !important;
    flex: 0 0 50% !important;
    max-width: 50% !important;
  }

  /* button row: wrap */
  .toolbar-card .d-flex.gap-2,
  .toolbar-card .d-flex.gap-3 {
    flex-wrap: wrap;
  }
}

/* ── 7. PAGE CONTENT CARDS (forms, detail pages) ── */
@media (max-width: 767px) {
  section.content {
    padding: 8px 6px !important;
  }

  /* announcement banners */
  .bg-primary .col-md-12,
  .bg-success .col-md-12 {
    padding-left: 12px !important;
  }

  .bg-primary h1,
  .bg-success h1 {
    font-size: 1.05rem;
  }

  /* generic button groups inside cards */
  .card .d-flex.gap-3,
  .card .d-flex.gap-2 {
    flex-wrap: wrap;
  }

  /* work order / purchase order form columns */
  .card .row.g-4 > [class*="col-md-"] {
    margin-bottom: .5rem;
  }
}

/* ── 8. DROPDOWN MENUS – don't overflow viewport ── */
@media (max-width: 767px) {
  .dropdown-menu {
    max-width: calc(100vw - 20px);
    white-space: normal;
  }
}

/* ── 9. MODALS – full-width on phone ── */
@media (max-width: 575px) {
  .modal-dialog {
    margin: .5rem;
    max-width: calc(100% - 1rem);
  }

  .modal-dialog.modal-lg,
  .modal-dialog.modal-xl {
    max-width: calc(100% - 1rem);
  }
}

/* ── 10. PAGINATION – compress ── */
@media (max-width: 575px) {
  .pagination .page-link {
    padding: .3rem .55rem;
    font-size: .8rem;
  }
}

/* ── 11. PRINT: restore desktop layout ── */
@media print {
  .main-sidebar {
    transform: none !important;
    position: fixed !important;
  }

  .content-wrapper {
    margin-left: 230px !important;
    padding-top: 0 !important;
  }

  body.sidebar-open::before {
    display: none;
  }
}