/* Global responsive helpers (non-destructive) */
:root { --responsive-container-max: 1200px; }

/* Fluid media */
img, video, canvas, svg { max-width: 100%; height: auto; }
iframe, embed, object { max-width: 100%; }

/* Tables */
table { width: 100%; border-collapse: collapse; }
.table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Ensure predictable sizing */
*, *::before, *::after { box-sizing: border-box; }

/* Flex overflow fix utility */
.flex-min-width-0 { min-width: 0 !important; }

/* Utility containers */
.container {
  width: min(100%, var(--responsive-container-max));
  margin-left: auto;
  margin-right: auto;
  padding-left: 16px;
  padding-right: 16px;
}

/* Full viewport height safe for mobile */
.vh-100 { min-height: 100vh; min-height: 100dvh; }

/* iOS/Android safe-area support utility */
.safe-padded {
  padding-top: env(safe-area-inset-top);
  padding-right: env(safe-area-inset-right);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
}

/* Long text wrapping helper */
.text-wrap { overflow-wrap: anywhere; word-break: break-word; }

/* Gentle spacing adjustments on small screens */
@media (max-width: 768px) {
  .p-responsive { padding: 12px !important; }
  .px-responsive { padding-left: 12px !important; padding-right: 12px !important; }
  .py-responsive { padding-top: 12px !important; padding-bottom: 12px !important; }
}

@media (max-width: 480px) {
  .hide-on-mobile { display: none !important; }
  .text-sm-mobile { font-size: 0.95rem !important; }
}