/* Responsive enhancements injected by assistant (v1) */
html { box-sizing: border-box; }
*, *:before, *:after { box-sizing: inherit; }

/* Media elements scale down */
img, video, canvas, svg, iframe { max-width: 100%; height: auto; }

/* Fluid typography (clamped between 14px and 18px, scaling with viewport) */
:root { --step: clamp(14px, 1.5vw, 18px); }
body { font-size: var(--step); line-height: 1.5; }

/* Container utility if needed */
.container, .wrapper, .content, .page, .main {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 1rem;
}

/* Tables: allow horizontal scroll on small screens */
.table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-responsive > table { width: 100%; border-collapse: collapse; }

/* Off-canvas sidebar pattern (only applies if the project uses .sidebar) */
@media (max-width: 992px) {
  .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: 280px;
    max-width: 85vw;
    transform: translateX(-100%);
    transition: transform .25s ease;
    z-index: 1000;
    background: #fff;
    box-shadow: 2px 0 12px rgba(0,0,0,.06);
  }
  .sidebar.open { transform: translateX(0); }
  .sidebar-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.35);
    backdrop-filter: blur(1px);
    z-index: 999;
    display: none;
  }
  .sidebar.open + .sidebar-backdrop { display: block; }

  /* Push main content below fixed headers / avoid overflow */
  .main, main { padding: 1rem; }
}

/* Stacking columns on small screens (generic column classes) */
@media (max-width: 768px) {
  .row { display: flex; flex-wrap: wrap; gap: 1rem; }
  [class*="col-"] { flex: 1 1 100%; max-width: 100%; }
}

/* Forms and buttons stretch nicely */
input[type="text"], input[type="email"], input[type="number"], input[type="password"],
select, textarea {
  width: 100%;
  max-width: 100%;
}

/* Utility: hide on mobile / show on mobile */
@media (max-width: 576px) {
  .hide-sm { display: none !important; }
  .show-sm { display: block !important; }
}