/* YES Academy — global mobile fixes (screen only, never affects printing) */
@media screen and (max-width: 992px) {
  html { scroll-behavior: smooth; scroll-padding-top: 72px; }
  html, body { max-width: 100%; overflow-x: hidden; -webkit-text-size-adjust: 100%; }
  body:not(.modal-open) { overflow-y: auto !important; position: static !important; height: auto !important; }
  img, video, iframe { max-width: 100%; }
  button, a, .btn, label, select { touch-action: manipulation; }

  /* page area */
  .main-content, .content, .page-content, .content-wrapper {
    margin-left: 0 !important; width: 100% !important; max-width: 100% !important; padding: 14px 12px !important;
  }
  .container, .container-fluid { padding-left: 12px; padding-right: 12px; }
  .row { --bs-gutter-x: .75rem; }
  h1 { font-size: 1.5rem; } h2 { font-size: 1.3rem; } h3 { font-size: 1.15rem; }
  .page-header, .page-banner { flex-wrap: wrap !important; gap: 10px !important; padding: 16px !important; }
  .page-header > *, .page-banner > * { max-width: 100%; }
  .kpi-strip, .stats-grid, .stat-grid, .cards-grid { grid-template-columns: 1fr !important; }

  /* forms: 16px stops the browser zooming in when a field is tapped */
  input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea,
  .form-control, .form-select { font-size: 16px !important; max-width: 100%; }
  .btn, button { min-height: 40px; }
  .select2-container { width: 100% !important; max-width: 100%; }
  .select2-dropdown { max-width: 100vw; }

  /* tables scroll sideways inside their own box */
  .yes-scroll, .table-responsive, .dataTables_wrapper, .table-card {
    overflow-x: auto !important; -webkit-overflow-scrolling: touch; max-width: 100%;
  }
  .ledger-table { min-width: 760px; }
  .table th, .table td, .ledger-table th, .ledger-table td { white-space: nowrap; }

  /* modals: always scrollable, never wider than the screen, buttons stay reachable */
  .modal { overflow-y: auto !important; -webkit-overflow-scrolling: touch; padding-right: 0 !important; }
  .modal-dialog { margin: 8px auto !important; max-width: calc(100% - 16px) !important; width: auto; }
  .modal-dialog-centered { align-items: flex-start !important; min-height: 0 !important; }
  .modal-content { overflow: visible !important; }
  .modal-header, .modal-header-custom { border-radius: 16px 16px 0 0; }
  .modal-body { padding: 16px !important; }
  .modal-footer {
    position: sticky; bottom: 0; z-index: 5; background: #fff; flex-wrap: wrap;
    border-radius: 0 0 16px 16px; padding: 10px 16px 14px !important;
  }
  .modal-footer > * { flex: 1 1 auto; }

  /* long forms/filters: stack fields, full-width action buttons */
  form .row > [class*="col-"]:not([class*="col-12"]):not([class*="col-6"]) { flex: 0 0 100%; max-width: 100%; }
  form .btn[type=submit], .filter-bar .btn, .filter-form .btn { width: 100%; }
  .modal-dialog-scrollable .modal-content { max-height: calc(100dvh - 16px); }
  .top-header { position: sticky; top: 0; z-index: 1030; }

  .toast-wrap { left: 12px !important; right: 12px !important; bottom: 12px !important; }
}
@media screen and (max-width: 576px) {
  .modal-dialog { margin: 0 auto !important; max-width: 100% !important; }
  .d-flex.gap-2, .btn-group { flex-wrap: wrap; }
}