/* StreetGuard responsive system layer */

html {
  max-width: 100%;
  overflow-x: hidden;
}

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

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

button,
input,
select,
textarea {
  max-width: 100%;
  font: inherit;
}

body {
  min-width: 0;
  max-width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-text-size-adjust: 100%;
}

.container,
.admin-layout,
.user-layout,
.admin-main,
.user-main,
.mobile-dashboard-root,
.mobile-dashboard-main,
.mobile-profile-main,
.mobile-report-main,
.mobile-notice-main,
.medical-request-shell,
.profile-content,
.report-mobile-card,
.status-notice-panel {
  min-width: 0;
  max-width: 100%;
}

.table-wrapper,
.table-responsive,
.data-table-wrap,
.analytics-table-wrap {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 900px) {
  body.mobile-user-page .admin-sidebar.user-sidebar {
    animation: none !important;
  }

  body.user-page {
    min-height: 100dvh;
    padding-bottom: calc(92px + env(safe-area-inset-bottom)) !important;
  }

  body.user-page .admin-main,
  body.user-page .user-main {
    width: 100%;
    max-width: 100%;
    min-height: calc(100dvh - 72px);
    padding-left: clamp(12px, 4vw, 22px);
    padding-right: clamp(12px, 4vw, 22px);
    padding-bottom: calc(96px + env(safe-area-inset-bottom));
  }

  body.user-page .mobile-bottom-nav {
    height: calc(78px + env(safe-area-inset-bottom)) !important;
    padding-bottom: calc(8px + env(safe-area-inset-bottom)) !important;
  }

  body.user-page .mobile-app-header,
  body.user-page > .sg-header.mobile {
    min-height: 64px;
    padding-left: max(14px, env(safe-area-inset-left));
    padding-right: max(14px, env(safe-area-inset-right));
  }

  body.user-page .report-toolbar,
  body.user-page .page-heading,
  body.user-page .profile-section-heading {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  body.user-page .report-toolbar > *,
  body.user-page .page-heading > *,
  body.user-page .profile-section-heading > * {
    min-width: 0;
    max-width: 100%;
  }

  body.user-page .profile-info-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.user-page .profile-info,
  body.user-page .message-card,
  body.user-page .msg-card,
  body.user-page .mobile-section-card,
  body.user-page .preferences-card,
  body.user-page .legal-menu {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  body.user-page table {
    max-width: 100%;
  }

  body.user-page input,
  body.user-page select,
  body.user-page textarea {
    min-width: 0;
  }

  body.mobile-user-page .admin-main.user-main,
  body.mobile-user-page .mobile-dashboard-main,
  body.mobile-user-page .mobile-profile-main,
  body.mobile-user-page .mobile-report-main,
  body.mobile-user-page .mobile-notice-main {
    min-height: calc(100dvh - 64px);
  }
}

@media (max-width: 600px) {
  body.user-page .profile-info-grid {
    grid-template-columns: 1fr;
  }

  body.user-page .profile-info:nth-child(odd) {
    border-right: 0;
  }

  body.user-page .mobile-actions-grid,
  body.user-page .mobile-status-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.user-page .mobile-action,
  body.user-page .mobile-action.wide {
    grid-column: span 1;
  }

  body.user-page .mobile-action.wide {
    grid-column: 1 / -1;
  }

  body.user-page .report-toolbar .btn,
  body.user-page .report-toolbar button {
    width: 100%;
  }

  body.user-page .status-notice-panel,
  body.user-page .report-mobile-card,
  body.user-page .medical-form-card,
  body.user-page .profile-content {
    border-radius: 18px;
  }
}

@media (max-width: 380px) {
  body.user-page .mobile-actions-grid,
  body.user-page .mobile-status-grid {
    grid-template-columns: 1fr;
  }

  body.user-page .mobile-summary-grid {
    grid-template-columns: 1fr;
  }

  body.user-page .mobile-bottom-nav a {
    padding-left: 1px;
    padding-right: 1px;
  }

  body.user-page .mobile-nav-icon {
    font-size: 22px;
  }

  body.landing-page .hero {
    padding-left: 12px;
    padding-right: 12px;
  }
}

/* Landing page: keep the CTA and emergency contacts inside the scrollable canvas. */
@media (max-width: 768px) {
  html:has(body.landing-page) {
    background: linear-gradient(135deg, #0d4e8c 0%, #0a67b3 35%, #2b7de9 100%);
    background-attachment: fixed;
  }

  body.landing-page {
    display: block;
    min-height: 100dvh;
    overflow-x: hidden;
    overflow-y: auto;
    background: linear-gradient(135deg, #0d4e8c 0%, #0a67b3 35%, #2b7de9 100%);
    background-attachment: fixed;
  }

  body.landing-page .hero {
    display: flex;
    min-height: 100dvh;
    height: auto;
    flex: none;
    align-items: flex-start;
    overflow: visible;
    margin: 0;
    padding-top: max(24px, env(safe-area-inset-top));
    padding-bottom: calc(44px + env(safe-area-inset-bottom));
  }

  body.landing-page .hero-content {
    margin-top: 0;
    margin-bottom: 0;
  }

  body.landing-page .hero-cta-wrap {
    width: 100%;
    margin-top: 4px;
    padding-bottom: 8px;
  }

  body.landing-page .hero-cta {
    flex: 0 1 240px;
  }
}

@media (max-width: 480px) {
  body.landing-page .emergency-contact-row {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    padding-left: 42px;
  }

  body.landing-page .emergency-contact-info {
    min-width: 0;
  }

  body.landing-page .emergency-contact-actions {
    grid-column: 1 / -1;
    width: 100%;
    margin-left: 0;
  }

  body.landing-page .emergency-contact-actions a {
    min-width: 0;
    flex: 1 1 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
  }
}

/* Root-page tables remain readable without forcing the whole viewport wider. */
@media (max-width: 900px) {
  body.user-page .user-main > table,
  body.user-page .admin-main > table {
    display: block;
    width: 100%;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }

  body.user-page .form-container,
  body.user-page .medical-form-card,
  body.user-page .report-mobile-card,
  body.user-page .profile-content,
  body.user-page .status-notice-panel {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  body.user-page .form-container,
  body.user-page .medical-form-card {
    padding: clamp(14px, 4vw, 28px);
  }

  body.user-page .form-actions,
  body.user-page .admin-form-actions,
  body.user-page .photo-actions,
  body.user-page .logout-dialog > div:last-child {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  body.user-page .form-actions > button,
  body.user-page .admin-form-actions > button,
  body.user-page .photo-actions > button,
  body.user-page .logout-dialog > div:last-child > *,
  body.user-page .medical-form-card button {
    min-width: 0;
    max-width: 100%;
  }

  body.user-page .medical-request-shell {
    padding-bottom: calc(110px + env(safe-area-inset-bottom));
  }

  body.user-page .msg-card,
  body.user-page .message-card {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }

  body.user-page .msg-card .msg-actions,
  body.user-page .message-card .message-actions {
    width: 100%;
    min-width: 0;
  }

  body.user-page dialog,
  body.user-page .logout-dialog {
    width: min(92vw, 380px);
    max-width: calc(100vw - 24px);
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
  }
}

/* Keep the map controls usable on narrow phones while preserving the map viewport. */
@media (max-width: 700px) {
  body.user-page .controls {
    right: 8px !important;
    left: 8px !important;
    max-width: calc(100vw - 16px) !important;
    max-height: calc(100dvh - 132px) !important;
    overflow: visible !important;
  }

  body.user-page .mobile-route-card {
    width: 100% !important;
    max-width: 100% !important;
  }

  body.user-page .route-input-row {
    align-items: stretch;
    flex-wrap: wrap;
  }

  body.user-page .route-input-row .destination-field {
    flex: 1 1 calc(100% - 46px);
  }

  body.user-page .route-action-group {
    flex: 0 0 auto;
  }

  body.user-page .destination-suggestions {
    max-width: 100%;
    max-height: min(220px, 32dvh);
  }

  body.user-page .navigation-active-panel {
    right: 10px !important;
    bottom: calc(10px + env(safe-area-inset-bottom)) !important;
    left: 10px !important;
    max-width: calc(100vw - 20px) !important;
    max-height: calc(100dvh - 104px - env(safe-area-inset-bottom)) !important;
  }
}

@media (max-width: 380px) {
  body.user-page .route-input-row .destination-field {
    flex-basis: 100%;
  }

  body.user-page .route-action-group {
    width: 100%;
  }

  body.user-page .route-action-group button {
    flex: 1 1 0;
    width: auto;
  }

  body.user-page .mobile-bottom-nav a {
    min-width: 0;
    min-height: 48px;
    overflow: hidden;
  }

  body.user-page .mobile-bottom-nav .mobile-nav-icon {
    max-width: 100%;
  }
}