/* ==========================================================================
   IASA — Global Mobile Responsive Layer
   Loaded site-wide (via header.html and the MobileResponsiveMiddleware safety
   net). Provides a world-class mobile baseline without altering desktop.
   Desktop (>=992px) gets ONLY ultra-safe rules; all layout changes are scoped
   to mobile/tablet media queries so existing desktop design is untouched.
   ========================================================================== */

/* ---------- 1. Universal safe rules (all viewports) ---------------------- */
*, *::before, *::after { box-sizing: border-box; }

img, svg, video, canvas, iframe, embed, object {
  max-width: 100%;
}
img { height: auto; }

/* Never let anything force a horizontal scrollbar on small screens */
@media (max-width: 991.98px) {
  html, body {
    max-width: 100%;
    overflow-x: hidden;
  }
}

/* ---------- 2. Tablet & phone  (<= 991.98px) ---------------------------- */
@media (max-width: 991.98px) {

  /* Fluid containers — kill fixed pixel widths that overflow the viewport */
  .container, .container-sm, .container-md, .container-lg, .container-xl,
  .container-xxl, .container-fluid {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Tame elements with hard-coded pixel widths set via inline style/attrs */
  [style*="width:"][style*="px"]:not(.navbar-toggler-icon):not(.spinner-border):not(svg):not(.dropdown-menu) {
    max-width: 100% !important;
  }
  [width] { max-width: 100%; }

  /* Generic multi-column wrappers should wrap on small screens */
  .row { margin-left: -8px; margin-right: -8px; }
  .row > [class*="col-"] { padding-left: 8px; padding-right: 8px; }

  /* Tables: allow horizontal scroll instead of breaking the layout */
  .table-responsive { -webkit-overflow-scrolling: touch; }
  table { max-width: 100%; }
  .table-scroll-wrap, .table-responsive { overflow-x: auto; }

  /* Forms & controls go full width and don't overflow */
  input, select, textarea, .form-control, .form-select, .choices, .choices__inner {
    max-width: 100% !important;
  }
  .form-control, .form-select { width: 100%; }

  /* Buttons: avoid tiny tap targets and overflow */
  .btn { max-width: 100%; }

  /* Modals & offcanvas fit the screen */
  .modal-dialog { max-width: calc(100% - 1rem); margin: 0.5rem auto; }
  .modal-content { width: 100%; }

  /* Cards / panels never exceed the viewport */
  .card, .panel, .box, .glass, .glass-card { max-width: 100%; }

  /* Collapsed nav menu: readable, stacked, scrollable if long */
  .navbar-collapse { max-height: 80vh; overflow-y: auto; }
  .navbar-nav { padding-bottom: 8px; }

  /* "Download App Now!" promo cards — keep but make them fit */
  .download-app, .download_app, .app-download, .qr-code, .qr_code { max-width: 100%; }
}

/* ---------- 3. Phone  (<= 767.98px) ------------------------------------- */
@media (max-width: 767.98px) {

  /* Fluid, readable typography */
  h1, .h1 { font-size: clamp(1.6rem, 6vw, 2.2rem) !important; line-height: 1.2; }
  h2, .h2 { font-size: clamp(1.35rem, 5vw, 1.8rem) !important; line-height: 1.25; }
  h3, .h3 { font-size: clamp(1.15rem, 4.5vw, 1.5rem) !important; }
  h4, .h4 { font-size: 1.15rem !important; }
  .display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
    font-size: clamp(1.8rem, 8vw, 3rem) !important;
  }

  /* Stack common flex rows that were designed side-by-side on desktop.
     Scoped to wrappers that opt in OR obvious two-up content rows. */
  .stack-on-mobile,
  .row-to-stack,
  .flex-row-mobile-stack {
    flex-direction: column !important;
  }

  /* Generic two-column hero/feature splits → single column */
  .hero, .hero-row, .split, .two-col, .content-row {
    flex-direction: column !important;
    text-align: center;
  }
  .hero img, .hero-row img { margin: 0 auto; }

  /* Reduce oversized desktop spacing */
  section, .section { padding-top: 28px !important; padding-bottom: 28px !important; }
  .py-5 { padding-top: 28px !important; padding-bottom: 28px !important; }
  .px-5 { padding-left: 16px !important; padding-right: 16px !important; }
  .p-5  { padding: 20px !important; }
  .m-5, .my-5 { margin-top: 24px !important; margin-bottom: 24px !important; }

  /* Comfortable tap targets (Apple/Google guidance ~44px) */
  .btn, .nav-link, a.button, button.icon-btn, .dropdown-item {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .btn-block, .btn.w-100 { width: 100%; justify-content: center; }

  /* Fixed/absolute side panels & sidebars: relax so they don't cover content */
  .sidebar, .side-bar, .left-panel, .right-panel {
    position: static !important;
    width: 100% !important;
    height: auto !important;
  }

  /* Tables become horizontally scrollable blocks on phones */
  table:not(.no-mobile-scroll) {
    display: block;
    width: 100%;
    overflow-x: auto;
    white-space: nowrap;
  }

  /* Big background hero heights shrink so content is reachable */
  .vh-100 { min-height: auto !important; }
  [style*="height: 100vh"], [style*="height:100vh"] { height: auto !important; min-height: 60vh; }

  /* Chat / message layouts: full width bubbles, no fixed columns */
  .chat-window, .chat-container, .messages, .message-list,
  .conversation, .chat-sidebar {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
  }

  /* Dashboard grids collapse to one column */
  .dashboard-grid, .cards-grid, .grid-2, .grid-3, .grid-4, .stats-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  /* Prevent long unbreakable strings (emails, urls) from overflowing */
  p, span, a, li, td, th, .text-break-mobile { overflow-wrap: anywhere; word-break: break-word; }
}

/* ---------- 4. Very small phones (<= 380px) ----------------------------- */
@media (max-width: 380px) {
  body { font-size: 15px; }
  .container, .container-fluid { padding-left: 12px !important; padding-right: 12px !important; }
  .btn { padding-left: 12px; padding-right: 12px; }
}

/* ---------- 5. Touch ergonomics & misc ---------------------------------- */
@media (hover: none) and (pointer: coarse) {
  /* Avoid sticky :hover states getting stuck on touch devices */
  a:hover, .btn:hover { transition: none; }
}

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