/**
 * SATUN 360° — Global responsive utilities
 */
:root {
  --satun-safe-top: env(safe-area-inset-top, 0px);
  --satun-safe-right: env(safe-area-inset-right, 0px);
  --satun-safe-bottom: env(safe-area-inset-bottom, 0px);
  --satun-safe-left: env(safe-area-inset-left, 0px);
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  overflow-x: hidden;
  max-width: 100vw;
}

img, video, svg, canvas {
  max-width: 100%;
  height: auto;
}

/* Tables scroll on small screens */
.table-responsive,
.satun-table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Forms full width on mobile */
@media (max-width: 640px) {
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="tel"],
  input[type="number"],
  input[type="search"],
  select,
  textarea {
    font-size: 16px !important; /* prevent iOS zoom */
    max-width: 100%;
  }
  .container, .max-w-7xl, .max-w-6xl, .max-w-5xl {
    padding-left: max(1rem, var(--satun-safe-left));
    padding-right: max(1rem, var(--satun-safe-right));
  }
}

@media (max-width: 768px) {
  header.sticky {
    padding-left: max(0.5rem, var(--satun-safe-left));
    padding-right: max(0.5rem, var(--satun-safe-right));
  }
  main {
    padding-bottom: calc(4.5rem + var(--satun-safe-bottom));
  }
  /* Admin grids stack */
  .admin-grid-2,
  .grid-cols-2.md\:grid-cols-2 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 380px) {
  header .font-bold, header .text-lg {
    font-size: 0.9rem !important;
  }
}

/* Landscape short height */
@media (max-height: 500px) and (orientation: landscape) {
  header.sticky {
    min-height: 44px;
  }
  main {
    padding-bottom: 0.5rem;
  }
}