<?php header("Content-Type: text/css; charset=UTF-8"); ?>
/* ===== Responsive foundation (FE-MOBILE-REFACTOR) ===== */
/* Breakpoints align with Bootstrap 5: sm 576, md 768, lg 992, xl 1200. Phone baseline 360px. */

html, body { overflow-x: hidden; }
img, svg, video, canvas, table { max-width: 100%; }
*, *::before, *::after { box-sizing: border-box; }

@media (max-width: 991.98px) {
  /* Fluid main containers below desktop */
  .content-box1, .content-box2 { width: 100% !important; max-width: 100% !important; margin: 0 !important; }
  .pageCards { float: none !important; width: 100% !important; max-width: 100% !important; margin: 0 0 1rem 0 !important; }

  /* Touch targets */
  .btn, .nav-link, .form-control, .form-select { min-height: 44px; }

  /* Keep wide tables scrollable instead of bursting the layout */
  .table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

@media (max-width: 991.98px) {
  body { padding-bottom: 64px; }                 /* clearance for fixed footer */
  .fixed-bottom-footer #footer .row { flex-wrap: wrap; }
}

@media (max-width: 575.98px) {
  .modal-dialog { margin: 0.5rem; }
  .row > [class*="col-"] { margin-bottom: 0.5rem; }
  .input-group { flex-wrap: wrap; }
  .input-group > .form-control, .input-group > .form-select { width: 100%; }
}

@media (max-width: 991.98px) {
  /* The decorative company background image is set inline on #showbackground
     (js/uploadpictures.js). On phones, where content is short, it shows as a
     large dark void below the content. Drop it for a clean neutral surface;
     !important is required to beat the inline style. */
  #showbackground {
    background-image: none !important;
    background-color: #f8f9fa !important;
  }
}