/* Global mobile-safety layer. Keeps desktop styling intact while preventing
   clipped content, unusable controls and off-screen dialogs on small screens. */
html {
  max-width: 100%;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}

body {
  max-width: 100%;
  overflow-x: hidden;
  overflow-wrap: break-word;
}

img, svg, video, canvas, iframe {
  max-width: 100%;
}

img, video { height: auto; }

input, select, textarea, button { max-width: 100%; }

.table-responsive,
.scrollbar {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.modal-dialog,
.offcanvas,
.dropdown-menu { max-width: calc(100vw - 1rem); }

.swal2-popup {
  max-width: calc(100vw - 1.5rem) !important;
  box-sizing: border-box !important;
}

@media (max-width: 767.98px) {
  body { min-width: 0; }

  .container,
  .container-fluid,
  [data-layout="container"] {
    width: 100%;
    max-width: 100%;
    padding-left: .75rem;
    padding-right: .75rem;
  }

  .content { min-width: 0; }

  .content > .container,
  .content > .container-fluid {
    padding-left: 0;
    padding-right: 0;
  }

  .card,
  .card-body,
  .modal-content { min-width: 0; }

  .card-body { padding: 1rem; }

  .row > * { min-width: 0; }

  h1 { font-size: clamp(1.65rem, 8vw, 2.25rem); }
  h2 { font-size: clamp(1.35rem, 6.5vw, 1.9rem); }
  h3 { font-size: clamp(1.15rem, 5.5vw, 1.55rem); }

  .d-flex:not(.navbar):not(.input-group) { flex-wrap: wrap; }

  .btn-group:not(.btn-group-sm),
  .toolbar,
  .page-header-actions {
    max-width: 100%;
    flex-wrap: wrap;
  }

  .form-control,
  .form-select,
  input,
  select,
  textarea {
    min-height: 44px;
    font-size: 16px; /* prevents iOS form zoom */
  }

  textarea { min-height: 96px; }

  .btn,
  button,
  [role="button"] { min-height: 42px; }

  table { white-space: nowrap; }

  td.text-wrap,
  th.text-wrap,
  td[style*="white-space: normal"] { white-space: normal !important; }

  .modal-dialog {
    width: auto;
    margin: .5rem;
  }

  .offcanvas { width: min(88vw, 320px) !important; }

  .navbar-brand {
    max-width: calc(100vw - 80px);
    overflow: hidden;
  }

  .navbar-brand span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .navbar-top .navbar-collapse,
  .navbar-collapse.show { max-height: calc(100vh - 72px); overflow-y: auto; }

  .navbar-vertical.navbar-expand-xl { max-width: 100%; }

  .setting-toggle { display: none !important; }

  .toastify { max-width: calc(100vw - 1.5rem); }

  .ring,
  .login-wrapper,
  .register-wrapper,
  .activation-card,
  .print-container {
    width: 100% !important;
    max-width: 100% !important;
  }

  [style*="min-width: 250px"],
  [style*="min-width:250px"] { min-width: 0 !important; width: 100%; }

  [style*="width: 900px"], [style*="width:900px"],
  [style*="width: 800px"], [style*="width:800px"],
  [style*="width: 700px"], [style*="width:700px"],
  [style*="width: 500px"], [style*="width:500px"] {
    width: 100% !important;
    max-width: 100% !important;
  }
}

@media (max-width: 575.98px) {
  .card-body { padding: .875rem; }
  .px-4, .px-5 { padding-left: .875rem !important; padding-right: .875rem !important; }
  .p-4, .p-5 { padding: 1rem !important; }
  .gap-4, .gap-5 { gap: 1rem !important; }

  .input-group { flex-wrap: nowrap; }
  .input-group > .form-control { min-width: 0; }

  .pagination { flex-wrap: wrap; gap: .25rem; }
}

@media (hover: none) and (pointer: coarse) {
  a, button, .btn, input, select, textarea { touch-action: manipulation; }
}

@media print {
  html, body { overflow: visible !important; }
  .table-responsive { overflow: visible !important; }
}