/*
 * FusionGate huraga theme — mobile responsiveness patch
 * --------------------------------------------------------------------
 * Loaded LAST so it overrides earlier rules. Touches no other CSS file.
 * Removing this <link> reverts the portal to its previous behavior.
 *
 * Audit reference: c:/tmp/fg_phase2 mobile audit (2026-05-08)
 * Issues addressed (HIGH → LOW):
 *   H1  table-responsive overflow hidden -> auto
 *   H2  form inputs <16px on mobile -> 16px (prevents iOS zoom-on-focus)
 *   H3  hardcoded container max-width 980/1100px -> fluid below lg
 *   M1  .btn-sm tap target ~22px -> 36px on phones
 *   M2  sidebar nav items 31px -> 44px (WCAG 2.5.5)
 *   M3  modal padding 24px on 360px viewport -> 16px
 *   M4  sidebar duplicated breakpoint inconsistency normalised at 991.98px
 *   L1  decorative header buttons 28-32px -> 40px on phones
 * --------------------------------------------------------------------
 */

/* ── H1 — Tables: restore horizontal scroll on mobile (override !important) ── */
@media (max-width: 991.98px) {
  .table-responsive {
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch;
  }
  /* Stop nested wrappers from clipping rows */
  .table-responsive > .table { min-width: 100%; }
}

/* ── H2 — Form inputs: 16px on phones to disable iOS Safari zoom ── */
@media (max-width: 767.98px) {
  .form-control,
  .form-select,
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  textarea,
  select {
    font-size: 16px !important;
  }
  /* Bootstrap floating labels follow the input */
  .form-floating > .form-control,
  .form-floating > .form-select { font-size: 16px !important; }
}

/* ── H3 — Container: drop hardcoded 980/1100px caps below lg ── */
@media (max-width: 991.98px) {
  .container-xl,
  .container-lg,
  .container-md {
    max-width: 100% !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}

/* ── M1 — Touch targets for table action buttons + small buttons ── */
@media (max-width: 767.98px) {
  .btn-sm,
  .btn-icon-sm {
    min-height: 36px !important;
    padding: 0.5rem 0.75rem !important;
    font-size: 0.875rem !important;
  }
  .table .btn,
  .table a.btn,
  .table button.btn {
    min-height: 36px;
    line-height: 1;
  }
  .btn,
  .btn:not(.btn-sm) {
    min-height: 40px;
  }
}

/* ── M2 — Sidebar nav items 44px on mobile drawer ── */
@media (max-width: 767.98px) {
  .saas-sidebar .saas-nav-item,
  .saas-sidebar .nav-link,
  .sidebar .nav-link {
    padding: 12px 14px !important;
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  .saas-sidebar .saas-nav-group-title { padding: 14px 14px 6px; }
}

/* ── M3 — Modal padding fits 360px viewport ── */
@media (max-width: 575.98px) {
  .modal-dialog { margin: 0.5rem !important; }
  .modal-header,
  .modal-footer { padding: 12px 16px !important; }
  .modal-body { padding: 16px !important; }
  .modal-content { border-radius: 8px; }
}

/* ── M4 — Sidebar drawer breakpoint normalised at 991.98px (Bootstrap lg) ── */
@media (max-width: 991.98px) {
  /* Force the drawer to slide in/out, not stay as a column at tablet sizes */
  .saas-sidebar:not(.is-open) {
    transform: translateX(-100%);
    transition: transform 0.25s ease-out;
  }
  .saas-sidebar.is-open {
    transform: translateX(0);
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.4);
  }
  .saas-main,
  .main-content,
  body.has-sidebar > .container,
  body.has-sidebar > .container-xl {
    margin-left: 0 !important;
    width: 100% !important;
  }
}

/* ── L1 — Header utility buttons 40px on phones (theme toggle, sidebar collapse) ── */
@media (max-width: 767.98px) {
  .theme-toggle,
  .saas-sidebar-collapse-btn,
  .navbar-toggler {
    min-width: 40px;
    min-height: 40px;
  }
}

/* ── Generic safety: prevent body horizontal scroll if any rule slips through ── */
@media (max-width: 767.98px) {
  body { overflow-x: hidden; }
  /* But honour the table-responsive scroll */
  .table-responsive { overflow-x: auto !important; }
}