/*
 * AGORO WEB PORTAL — MOBILE RESPONSIVE OVERRIDES
 * Include AFTER style.css and bootstrap.min.css on every page
 */

/* ============================================================
   1. SIDEBAR & WRAPPER — full-width content on mobile
   ============================================================ */
@media (max-width: 768px) {
  /* Main content fills the screen — sidebar slides in as overlay */
  #wrapper {
    margin-left: 0 !important;
  }

  /* Sidebar: fixed, hidden off-screen by default */
  #menu {
    position: fixed !important;
    top: 0;
    left: -180px;
    bottom: 0;
    width: 180px !important;
    z-index: 1050;
    overflow-y: auto;
    transition: left 0.3s ease;
  }

  /* Slide sidebar in when show-sidebar is active */
  body.show-sidebar #menu {
    left: 0;
  }

  /* Semi-transparent backdrop */
  body.show-sidebar::after {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 1040;
  }

  /* Top navbar full width */
  .navbar-static-top {
    margin: 0 !important;
  }
}

/* ============================================================
   2. HORIZONTAL FORM LABELS — stack label above field
   ============================================================ */
@media (max-width: 991px) {
  /* Labels that use col-lg-* float left by default — force left-align and full width */
  label.col-lg-1,
  label.col-lg-2,
  label.col-lg-3,
  label.col-lg-4,
  label.col-lg-5,
  label.col-lg-6,
  label.col-md-1,
  label.col-md-2,
  label.col-md-3,
  label.col-md-4,
  label.col-md-5,
  label.col-md-6 {
    text-align: left !important;
    width: 100% !important;
    float: none !important;
    padding-bottom: 4px;
  }

  /* Field containers that sit beside labels — also full width */
  .form-group > .col-lg-5,
  .form-group > .col-lg-7,
  .form-group > .col-lg-8,
  .form-group > .col-lg-9,
  .form-group > .col-lg-10,
  .form-group > .col-md-8,
  .form-group > .col-md-9,
  .form-group > .col-md-10 {
    width: 100% !important;
    float: none !important;
  }

  /* input-group wrappers with col-md-* width caps */
  .input-group.col-md-10,
  .input-group.col-md-8 {
    width: 100% !important;
  }
}

/* ============================================================
   3. col-xs-6 SPLIT FORMS — stack on phones
   ============================================================ */
@media (max-width: 480px) {
  .col-xs-6 {
    width: 100% !important;
    float: none !important;
  }
}

/* ============================================================
   4. DATATABLES — horizontal scroll
   ============================================================ */
@media (max-width: 768px) {
  .dataTables_wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  table.dataTable {
    min-width: 540px;
  }

  .dataTables_length,
  .dataTables_filter {
    text-align: left !important;
    float: none !important;
    margin-bottom: 8px;
  }
}

/* ============================================================
   5. SUMMARY CARDS — 2-col grid on small phones, 1-col on tiny
   ============================================================ */
@media (max-width: 600px) {
  .col-md-2,
  .col-md-3,
  .col-md-4 {
    width: 50% !important;
    float: left !important;
    padding: 4px !important;
  }
}

@media (max-width: 380px) {
  .col-md-2,
  .col-md-3,
  .col-md-4 {
    width: 100% !important;
    float: none !important;
  }
}

/* ============================================================
   6. BUTTONS — full-width & wrap on mobile
   ============================================================ */
@media (max-width: 768px) {
  /* Action buttons (View, Clear) */
  #viewStakes,
  #viewCredit,
  #viewDrawReport,
  #validateDraw,
  #creditReport,
  button.reset,
  .btn-reset {
    width: 100%;
    margin-bottom: 6px;
    display: block;
  }

  /* Export button row */
  .btn-group-export {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
  }

  .btn-group-export .btn {
    flex: 1 1 auto;
    margin-bottom: 0;
  }

  /* Spacing between adjacent inline buttons */
  .btn + .btn {
    margin-left: 0;
    margin-top: 4px;
  }
}

/* ============================================================
   7. SELECT2 — always full width on mobile
   ============================================================ */
@media (max-width: 768px) {
  .select2-container {
    width: 100% !important;
  }
}

/* ============================================================
   8. PANEL / HEADER SPACING
   ============================================================ */
@media (max-width: 768px) {
  .hpanel .panel-body,
  .ibox-content {
    padding: 10px;
  }

  .normalheader {
    padding: 15px !important;
  }

  .normalheader h2 {
    font-size: 18px;
  }

  .small-header .panel-body {
    padding: 10px 15px;
  }

  .breadcrumb {
    font-size: 11px;
    padding: 4px 10px;
  }

  /* Reduce tab font size so tabs don't overflow */
  .nav-tabs > li > a {
    padding: 6px 10px;
    font-size: 12px;
  }
}

/* ============================================================
   9. TOUCHSPIN — full width on mobile
   ============================================================ */
@media (max-width: 768px) {
  .bootstrap-touchspin {
    width: 100% !important;
  }
}