/* Global mobile usability layer */
@media (max-width: 768px) {
  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    -webkit-text-size-adjust: 100% !important;
  }

  body {
    padding: 10px !important;
  }

  * {
    box-sizing: border-box !important;
  }

  .container,
  .wrap,
  .page,
  .main,
  .content,
  .card,
  .panel,
  .box,
  .section,
  .toolbar,
  .filters,
  .filterbar,
  .actions,
  .row,
  .grid,
  .form-grid,
  .form,
  .modal,
  .modal-content {
    width: 100% !important;
    max-width: 100% !important;
  }

  .toolbar,
  .filters,
  .filterbar,
  .actions,
  .row,
  .grid,
  .form-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    align-items: stretch !important;
  }

  input,
  select,
  textarea {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 44px !important;
    font-size: 16px !important;
  }

  button {
    max-width: 100% !important;
    min-height: 44px !important;
    font-size: 15px !important;
    white-space: normal !important;
  }

  .toolbar button,
  .filters button,
  .filterbar button,
  .actions button {
    width: 100% !important;
  }

  table {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
  }

  th,
  td {
    font-size: 12px !important;
    padding: 7px 6px !important;
  }

  h1 {
    font-size: 22px !important;
    line-height: 1.5 !important;
  }

  h2 {
    font-size: 19px !important;
    line-height: 1.5 !important;
  }

  h3 {
    font-size: 17px !important;
    line-height: 1.5 !important;
  }

  .modal,
  .dialog,
  .popup,
  .drawer {
    width: 94vw !important;
    max-width: 94vw !important;
    max-height: 88vh !important;
    overflow: auto !important;
  }

  .datepicker-plot-area {
    max-width: calc(100vw - 20px) !important;
    left: 10px !important;
    right: 10px !important;
  }
}

@media (max-width: 480px) {
  body {
    padding: 8px !important;
  }

  th,
  td {
    font-size: 11px !important;
  }

  .hide-mobile {
    display: none !important;
  }
}