html { min-width: 320px; overflow-x: hidden; }
body { overflow-x: hidden; }
*, *::before, *::after { box-sizing: border-box; }
img, video, canvas, svg, iframe { max-width: 100%; height: auto; }
input, select, textarea, button { max-width: 100%; font: inherit; }
.table-responsive, .overflow-x-auto { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

@media (max-width: 640px) {
    body { min-height: 100dvh; }
    .container { width: 100% !important; padding-left: 1rem !important; padding-right: 1rem !important; }
    .card, .bg-white { max-width: 100%; }
    .modal-container, [role="dialog"] > div { width: calc(100vw - 1.5rem) !important; max-height: calc(100dvh - 1.5rem) !important; margin: .75rem !important; overflow-y: auto; }
    .info-item { gap: .5rem; }
    .info-label { flex: 0 0 5.5rem; width: 5.5rem !important; }
    .info-value { min-width: 0; overflow-wrap: anywhere; }
    table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .flex-row-responsive { flex-direction: column !important; }
    button, a[class*="py-3"] { min-height: 44px; }
    pre, code { white-space: pre-wrap; overflow-wrap: anywhere; }
}