/* Global responsive helpers (and cross-browser scrollbar hiding)
   Pages already link to `/css/app-responsive.css`, so keep this file as the
   shared place for common UI behavior. */

/* Hide scrollbars while keeping scroll interaction working */
* {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE 10+ */
}

*::-webkit-scrollbar {
  width: 0;
  height: 0;
}

/* --------------------------------------------------------------------------
   Mobile / touch baseline — shared by admin / teacher / student / homeroom
   -------------------------------------------------------------------------- */

/* iOS Safari: avoid auto-zoom on focus; keep pinch-zoom available */
@media (max-width: 639.98px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]),
  select,
  textarea {
    font-size: 16px;
    max-width: 100%;
  }
}

/* Prevent text size inflation on orientation change */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overflow-x: clip;
  max-width: 100%;
}

body {
  max-width: 100%;
}

/* Softer tap feedback on mobile (does not remove focus outlines from CSS we set elsewhere) */
a,
button,
[role="button"],
input,
select,
textarea,
summary {
  -webkit-tap-highlight-color: rgba(37, 99, 235, 0.12);
}

/* Horizontal scroll regions: smooth touch scrolling */
.overflow-x-auto {
  -webkit-overflow-scrolling: touch;
}

/* Long strings / tables should not blow out the viewport */
img,
video,
canvas,
svg {
  max-width: 100%;
  height: auto;
}

/* Sticky headers: respect iPhone safe area (works with viewport-fit=cover) */
#site-header .container,
header.sticky.top-0 .container {
  padding-left: max(1rem, env(safe-area-inset-left, 0px));
  padding-right: max(1rem, env(safe-area-inset-right, 0px));
}

/* Teacher / student slide-down mobile menus */
#mobile-nav {
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* Coarse pointers: slightly larger tap targets for icon-only controls */
@media (hover: none) and (pointer: coarse) {
  button.admin-icon-btn,
  .admin-icon-btn[role="button"] {
    min-width: 44px;
    min-height: 44px;
  }

  #mobile-menu-btn {
    min-width: 44px;
    min-height: 44px;
  }
}

/* Fixed controls: keep above iOS home indicator */
#back-to-top {
  bottom: max(1.25rem, calc(0.5rem + env(safe-area-inset-bottom, 0px)));
  right: max(1.25rem, calc(0.75rem + env(safe-area-inset-right, 0px)));
}

@media (min-width: 768px) {
  #back-to-top {
    bottom: max(2rem, calc(0.5rem + env(safe-area-inset-bottom, 0px)));
    right: max(2rem, calc(0.75rem + env(safe-area-inset-right, 0px)));
  }
}

/* --------------------------------------------------------------------------
   Shared tiny animations
   -------------------------------------------------------------------------- */

/* Animated ellipsis: "..."" reveals dot by dot */
.web-dots {
  display: inline-block;
  width: 0ch;
  overflow: hidden;
  vertical-align: bottom;
  animation: webDots 1s steps(3, end) infinite;
}

@keyframes webDots {
  0% { width: 0ch; }
  100% { width: 3ch; }
}