/* ==========================================================================
   mobile-first.css  -  shared responsive layer for EVERY page of the portal
   --------------------------------------------------------------------------
   Loaded last (after bootstrap / AdminLTE / page styles) by every master page
   and every stand-alone page. Pure CSS: no JavaScript, no markup changes, no
   effect on printing (everything is inside @media screen).

   Design rules
   1. Phone first: base rules target a 320-420px wide touch screen; larger
      screens only get extra room via min-width queries.
   2. Nothing may force sideways page scrolling: wide tables scroll inside
      themselves, fixed pixel widths are capped to the viewport.
   3. Touch targets >= 44px, form text >= 16px (stops iOS auto-zoom on focus).
   4. Respect notches / home-indicator (safe-area insets).
   ========================================================================== */

@media screen {

  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, .08);
  }

  body {
    max-width: 100%;
    overflow-wrap: break-word;
    word-wrap: break-word;
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
  }

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

  /* Pages that embed a PDF / report viewer */
  iframe, embed, object { width: 100%; }

  /* ---- Forms: comfortable on a thumb ----------------------------------- */
  input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="image"]),
  select,
  textarea {
    font-size: 16px;                 /* >=16px prevents iOS zoom-on-focus */
    max-width: 100%;
    box-sizing: border-box;
  }
  input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="image"]):not([type="submit"]):not([type="button"]),
  select {
    min-height: 44px;
  }
  textarea { min-height: 88px; }

  input[type="checkbox"], input[type="radio"] {
    width: 22px; height: 22px; vertical-align: middle; margin-right: .35rem;
  }
  input[type="checkbox"] + label, input[type="radio"] + label,
  label { cursor: pointer; }

  input[type="submit"], input[type="button"], button, .btn, a.btn {
    min-height: 44px;
    min-width: 44px;
    touch-action: manipulation;
  }

  /* ---- Tables (GridView, DataTables, layout tables) -------------------- */
  /* A wide table scrolls inside its own box instead of widening the page. */
  .table-responsive-auto, .dataTables_wrapper { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  .page-wrapper table, .content-wrapper table, .ndmc-content-inner table,
  .container table, .container-fluid table, form table {
    max-width: 100%;
  }

  /* Pagers of GridViews: keep the numbers tappable */
  table tr td table a, .pagination a, .pagination span, .gridpager a, .gridpager span {
    display: inline-block; min-width: 36px; min-height: 36px; line-height: 36px; text-align: center;
  }

  /* Modals / dialogs / alerts never exceed the screen */
  .modal-dialog { max-width: calc(100vw - 1rem); margin: .5rem auto; }
  .modal-content { max-width: 100%; }
  .swal2-popup, .swal-modal { width: 92% !important; max-width: 32rem; font-size: 1rem; }
  .ui-datepicker, .datepicker, .bootstrap-datetimepicker-widget, .ui-timepicker-wrapper { max-width: 100vw; }

  /* Long unbroken strings (booking ids, e-mails, urls) must wrap */
  td, th, p, span, a, label, h1, h2, h3, h4, h5, h6, li { overflow-wrap: anywhere; }

  /* Receipts / reports shown on screen: allow horizontal pan rather than overflow the page */
  .receipt, .report, .print-area, #printArea { max-width: 100%; overflow-x: auto; }
}

/* =========================  PHONES (<= 767.98px)  ========================= */
@media screen and (max-width: 767.98px) {

  html, body { overflow-x: hidden; }

  /* Inline / attribute pixel widths written by Web Forms (Width="720px",
     style="width:500px", <table width="800">, <td width="300">) are capped. */
  [style*="width"], table[width], td[width], th[width], div[width], input[size] {
    max-width: 100% !important;
  }
  [style*="min-width"] { min-width: 0 !important; }

  /* Form controls fill the available width unless they are tiny (checkbox, radio, buttons) */
  .form-control, .form-select,
  input[type="text"], input[type="password"], input[type="email"], input[type="tel"],
  input[type="number"], input[type="date"], input[type="search"], input[type="url"],
  select, textarea {
    width: 100% !important;
  }
  input[type="file"] { width: 100%; font-size: 16px; }

  /* Primary actions are full-width, easy to hit */
  input[type="submit"], input[type="button"], button, .btn {
    padding: .6rem 1rem;
  }
  .btn-block, .form-actions .btn, .action-buttons .btn, .btn-primary, .btn-success, .btn-danger {
    max-width: 100%;
  }

  /* Bootstrap columns stack; AdminLTE boxes use the whole width */
  [class*="col-"] { width: 100%; max-width: 100%; flex: 0 0 100%; float: none; }
  .box, .card, .panel { margin-bottom: .75rem; }

  /* Tables scroll inside themselves. Keeps the header/body alignment intact. */
  table:not(.no-scroll) {
    display: block;
    width: 100% !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  table:not(.no-scroll) th, table:not(.no-scroll) td {
    padding: .5rem .6rem;
    font-size: .95rem;
    vertical-align: top;
  }
  /* A table used purely for page layout (a table whose only content is a single
     form-field per cell) gets stacked cells instead of scrolling. */
  table.stack-mobile, table.stack-mobile tbody, table.stack-mobile tr, table.stack-mobile td, table.stack-mobile th {
    display: block; width: 100% !important;
  }

  /* Headings scale down */
  h1, .h1 { font-size: 1.5rem; }
  h2, .h2 { font-size: 1.3rem; }
  h3, .h3 { font-size: 1.15rem; }
  h4, .h4, h5, .h5 { font-size: 1.05rem; }

  /* Content padding comfortable but not wasteful on 360px phones */
  .container, .container-fluid, .content, .content-wrapper, .ndmc-content-inner {
    padding-left: .75rem; padding-right: .75rem;
  }
  .content-wrapper, .main-footer, .main-header { margin-left: 0 !important; }

  /* Leave room for the iOS home indicator under fixed bars */
  footer, .main-footer, .site-footer { padding-bottom: calc(.75rem + env(safe-area-inset-bottom, 0px)); }

  /* Captcha image and similar inline images stay inside the card */
  img[id*="aptcha"], img[src*="aptcha"] { max-width: 100%; height: auto; }

  /* Calendars / availability grids */
  .calendar, .fc, .fc-view-container, .availability-grid { max-width: 100%; overflow-x: auto; }
}

/* ====================  SMALL TABLETS AND UP (>= 768px)  =================== */
@media screen and (min-width: 768px) {
  table { max-width: 100%; }
}

/* Reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}