/* Touch and small-screen overrides. Desktop with a fine pointer keeps its existing layout. */
@media (pointer: coarse), (max-width: 991.98px) {
  .opera360 .btn,
  .opera360 .close,
  .opera360 .main-header .nav-link {
    min-width: 44px !important;
    min-height: 44px !important;
    touch-action: manipulation;
  }
  .opera360 .btn { white-space: normal; overflow-wrap: anywhere; }
  .opera360 .close { display: inline-flex; align-items: center; justify-content: center; opacity: .8; }
  .opera360 .main-header .nav-link { display: inline-flex; align-items: center; justify-content: center; }
  .opera360 .main-header .navbar-nav { min-width: 0; }
  .opera360 .main-header .dropdown { position: static; }
  .opera360 .main-header .dropdown-menu {
    left: auto !important; right: 8px !important; top: 100% !important;
    transform: none !important; max-width: calc(100vw - 16px);
  }
  .opera360 .main-header .dropdown-item,
  .opera360 .nav-sidebar .nav-link,
  .opera360 .page-link { min-height: 44px; }
  .opera360 .content a[data-toggle="modal"] {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 44px; min-height: 44px; touch-action: manipulation;
  }
  .opera360 .form-control,
  .opera360 .select2-selection,
  .opera360 .select2-search__field { font-size: 16px !important; }
  .opera360 .form-control { min-height: 44px; }
  .opera360 .select2-container { max-width: 100%; }
  .opera360 .select2-selection { min-height: 44px !important; }
  .opera360 .select2-selection__choice__remove {
    display: inline-flex !important; align-items: center; justify-content: center;
    min-height: 44px; min-width: 44px;
  }
  .opera360 .select2-selection--single {
    min-height: 44px !important; height: auto !important;
    display: flex; align-items: center;
  }
  .opera360 .select2-selection__rendered { min-width: 0; max-width: 100%; }
  .opera360 .select2-selection__arrow { top: 50% !important; transform: translateY(-50%); }
  .opera360 .select2-results__option { min-height: 44px; padding: 10px 12px; white-space: normal; overflow-wrap: anywhere; }
  .opera360 .select2-search--dropdown .select2-search__field { min-height: 44px; }
  .opera360 input[type="file"],
  .opera360 input[type="file"].form-control {
    box-sizing: border-box; height: auto !important; min-height: 60px;
    width: 100%; max-width: 100%; line-height: 1.5;
  }
  .opera360 input[type="file"]::file-selector-button { min-height: 44px; max-width: 100%; white-space: normal; }
  .opera360 .modal-dialog { width: 500px; max-width: calc(100% - 16px); margin: 8px auto; }
  .opera360 .modal-dialog.modal-lg { width: 800px; }
  .opera360 .modal-content {
    max-height: calc(100vh - 16px);
    max-height: calc(100dvh - 16px);
  }
  .opera360 .modal-content > form { display: flex; flex-direction: column; max-height: inherit; min-height: 0; }
  .opera360 .modal-header,
  .opera360 .modal-footer { flex-shrink: 0; }
  .opera360 .modal-title { min-width: 0; overflow-wrap: anywhere; }
  .opera360 .modal-header .close { flex-shrink: 0; margin: -4px -4px -4px 8px !important; padding: 4px !important; }
  .opera360 .modal-body { min-height: 0; overflow-y: auto; overscroll-behavior-y: contain; }
  .opera360 .modal-body img { max-width: 100%; height: auto; }
  .opera360 #notification-items {
    width: min(400px, calc(100vw - 16px)); min-width: 0; max-width: calc(100vw - 16px);
    max-height: 70vh; max-height: 70dvh; overflow-y: auto;
  }
  .opera360 #notification-items .dropdown-item { white-space: normal; overflow-wrap: anywhere; }
  .opera360 .alert,
  .opera360 .invalid-feedback { overflow-wrap: anywhere; }
  .opera360 .alert > .close { margin: -4px -4px 4px 8px; }
  .opera360 .row > [class*="col-"] { min-width: 0; }
  .opera360 .content div[style*="white-space:nowrap"] {
    white-space: normal !important; display: flex; flex-wrap: wrap; gap: 8px;
  }
  .opera360 .opera-table-scroll,
  .opera360 .table-responsive { max-width: 100%; overscroll-behavior-x: contain; }
  .opera360 .opera-requester-bottom,
  .opera360 .opera-technician-bottom { padding-bottom: calc(8px + env(safe-area-inset-bottom)); }
  .opera360 textarea:focus { scroll-margin-block: 90px; }
  .opera360 input:focus,
  .opera360 select:focus { scroll-margin-block: 80px; }
  .opera360.login-page .login-box { width: 360px; max-width: calc(100% - 24px); margin: 24px auto; }
  .opera360.login-page { min-height: 100vh; min-height: 100dvh; }
}
@media (max-width: 575.98px) {
  .opera360 .modal-footer { flex-wrap: wrap; gap: 8px; }
  .opera360 .modal-footer .btn { margin: 0; }
  .opera360.login-page .login-card-body > .card-body { padding: 8px; }
}