html { max-width: 100%; overflow-x: hidden; }
body { max-width: 100%; overflow-x: hidden; }
img, video, canvas, svg { max-width: 100%; height: auto; }
input, select, textarea, button { max-width: 100%; box-sizing: border-box; }
.kka-table-scroll { width: 100%; max-width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; -webkit-overflow-scrolling: touch; }
.kka-table-scroll > table { margin-inline: 0; }
.kka-drag-scroll { cursor: grab; touch-action: pan-y pinch-zoom; scroll-behavior: auto; }
.kka-drag-scroll.kka-is-dragging { cursor: grabbing; user-select: none; -webkit-user-select: none; }
.kka-drag-scroll.kka-is-dragging * { cursor: grabbing !important; }

@media (max-width: 1024px), (pointer: coarse) {
  .kka-drag-scroll,
  .kka-drag-scroll td,
  .kka-drag-scroll th,
  .kka-drag-scroll span,
  .kka-drag-scroll a,
  .kka-drag-scroll button {
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
  }
  .kka-drag-scroll input,
  .kka-drag-scroll textarea,
  .kka-drag-scroll select {
    user-select: text;
    -webkit-user-select: text;
  }
  .invoice-items-scroll {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    touch-action: pan-y pinch-zoom;
  }
  .invoice-product-name { cursor: grab; }
}

@media (max-width: 1024px) {
  main, section, .container, .main-container, .content, .content-wrapper, .page-container, .dashboard-container { min-width: 0 !important; max-width: 100% !important; }
  .modal, .modal-content, .popup, .dialog, [role="dialog"] { max-width: calc(100vw - 24px) !important; }
  table { max-width: none; }
}

@media (max-width: 560px) {
  body { font-size: 14px; }
  .modal, .modal-content, .popup, .dialog, [role="dialog"] { width: calc(100vw - 16px) !important; max-width: calc(100vw - 16px) !important; }
  button, .btn, input, select, textarea { min-height: 42px; }
}