/* ─── Responsive Styles — Mobile-First, Breakpoints xs→4xl ─── */

/* ═══ xs: 320px+ = single column, stacked ═══ */
.case-list {
  display: flex;
  flex-direction: column;
}

.report-steps {
  width: 100%;
}

/* Registration form — tighten padding on very small screens */
@media (max-width: 380px) {
  .reg-fieldset {
    padding: var(--space-3) !important;
  }
  .reg-input {
    padding: var(--space-2) var(--space-3) !important;
  }
  .reg-legend {
    font-size: var(--font-size-sm) !important;
  }
  .reg-label {
    font-size: var(--font-size-xs) !important;
  }
  .reg-photo-info {
    font-size: 0.6875rem !important;
  }
}

/* ═══ sm: 480px+ ═══ */
@media (min-width: 480px) {
  .category-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .photo-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  .page-container {
    padding: var(--space-6);
  }
}

/* ═══ md: 768px+ (tablets) ═══ */
@media (min-width: 768px) {
  .case-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
  }
  .case-card {
    margin-bottom: 0;
  }
  .category-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  .report-steps {
    max-width: 500px;
    margin: 0 auto;
  }
  .page-container {
    padding: var(--space-8);
  }
  .modal {
    max-width: 440px;
  }
  .verify-container {
    padding: var(--space-10) var(--space-6);
  }
  .photo-grid {
    grid-template-columns: repeat(5, 1fr);
  }
}

/* ═══ lg: 1024px+ (small desktops / landscape tablets) ═══ */
@media (min-width: 1024px) {
  #app-shell {
    max-width: 960px;
    margin: 0 auto;
    border-left: 1px solid var(--border-light);
    border-right: 1px solid var(--border-light);
  }
  .case-list {
    grid-template-columns: repeat(3, 1fr);
  }
  .page-container {
    max-width: 800px;
  }
  .mini-map {
    height: 240px;
  }
}

/* ═══ xl: 1280px+ (desktops) ═══ */
@media (min-width: 1280px) {
  #app-shell {
    max-width: 1100px;
  }
  .page-container {
    max-width: 900px;
  }
}

/* ═══ 2xl: 1536px+ (large screens) ═══ */
@media (min-width: 1536px) {
  #app-shell {
    max-width: 1280px;
  }
  .page-container {
    max-width: 1024px;
  }
}

/* ═══ Orientation: Landscape on mobile ═══ */
@media (max-height: 480px) and (orientation: landscape) {
  .bottom-nav {
    height: 44px;
  }
  #app-shell {
    padding-bottom: calc(44px + var(--safe-area-inset-bottom));
  }
  .modal {
    max-height: 90vh;
  }
  .mini-map {
    height: 140px;
  }
}

/* ═══ Global mobile form safety (all screen sizes) ═══ */
/* Prevent form elements from overflowing on narrow screens */
input, select, textarea, button {
  max-width: 100%;
}

/* Allow long words to break in labels & legends */
label, legend, .form-label, .form-legend {
  word-break: break-word;
  hyphens: auto;
}

/* Keep required asterisk from orphaning */
label .required, label .reg-required, .reg-required {
  white-space: nowrap;
}

/* Select elements — prevent option text cutoff */
select {
  word-wrap: break-word;
  overflow-wrap: break-word;
}

select option {
  white-space: normal;
  word-break: break-word;
}

/* ═══ Reduced Motion ═══ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ═══ High Contrast (forced-colors) ═══ */
@media (forced-colors: active) {
  .card, .case-card, .modal, .badge {
    border: 1px solid CanvasText;
  }
  .btn { border: 2px solid ButtonText; }
}