/**
 * SAMP v4.10.53 — complete mobile data and layout guard.
 * Loaded after the municipal theme so late desktop overrides cannot escape
 * the viewport on phones and small tablets.
 */

@media (max-width: 760px) {
  :root {
    --samp-mobile-header: 104px;
    --samp-mobile-gap: 8px;
  }

  html,
  body {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: clip;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  body:not(.auth-locked) .sidebar {
    inset: 0 0 auto 0;
    width: 100%;
    max-width: 100%;
    height: var(--samp-mobile-header);
    min-height: var(--samp-mobile-header);
    overflow: hidden;
  }

  body:not(.auth-locked) .sidebar .brand {
    height: 58px;
    min-height: 58px;
    padding-inline: 52px;
  }

  body:not(.auth-locked) .sidebar .brand strong {
    display: block;
    max-width: 100%;
    font-size: 12px;
    line-height: 1.45;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body:not(.auth-locked) .sidebar nav {
    width: 100%;
    height: 46px;
    padding: 0 5px;
    display: flex;
    gap: 2px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: inline proximity;
    scrollbar-width: none;
    overscroll-behavior-inline: contain;
  }

  body:not(.auth-locked) .sidebar nav::-webkit-scrollbar {
    display: none;
  }

  body:not(.auth-locked) .sidebar .nav {
    flex: 0 0 auto;
    width: auto;
    min-width: 102px;
    height: 46px;
    min-height: 46px;
    padding: 0 8px;
    gap: 5px;
    scroll-snap-align: start;
    font-size: 10px;
    white-space: nowrap;
  }

  body:not(.auth-locked) main,
  body:not(.auth-locked).command-center-active main {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    padding-top: var(--samp-mobile-header);
    overflow-x: clip;
  }

  body:not(.auth-locked) .topbar,
  body:not(.auth-locked).command-center-active .topbar {
    width: calc(100% - 16px);
    min-width: 0;
    min-height: 42px;
    margin: var(--samp-mobile-gap) 8px 0;
    padding: 8px 10px;
  }

  body:not(.auth-locked) .topbar h1 {
    font-size: 14px;
    line-height: 1.45;
    overflow-wrap: anywhere;
  }

  body:not(.auth-locked) main > section.view,
  body:not(.auth-locked) #command-center-view.command-center-view {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: 8px 8px 16px;
    overflow-x: clip;
  }

  body:not(.auth-locked) main > section.view > *,
  body:not(.auth-locked) .panel,
  body:not(.auth-locked) .cc-zone,
  body:not(.auth-locked) .cc-chart-card,
  body:not(.auth-locked) .team-card {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  body:not(.auth-locked) .cards,
  body:not(.auth-locked) .cc-kpi-grid,
  body:not(.auth-locked) .scouting-metrics,
  body:not(.auth-locked) .shelter-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: var(--samp-mobile-gap) !important;
  }

  /* Dashboard KPIs need the full phone width. Keeping two columns here made
     values and labels look truncated on Android devices with a wide CSS
     viewport or a non-default browser zoom. */
  body:not(.auth-locked) #dashboard-view .cards {
    grid-template-columns: 1fr !important;
  }

  body:not(.auth-locked) #dashboard-view .metric {
    width: 100%;
    min-height: 88px;
  }

  body:not(.auth-locked) #dashboard-view .chart-card,
  body:not(.auth-locked) #dashboard-view .chart-wrap,
  body:not(.auth-locked) #dashboard-view .canvas-wrap {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  body:not(.auth-locked) .metric,
  body:not(.auth-locked) .cc-kpi,
  body:not(.auth-locked) .scouting-metric,
  body:not(.auth-locked) .shelter-metric {
    min-width: 0;
    min-height: 92px;
    padding: 11px;
    overflow: hidden;
  }

  body:not(.auth-locked) .metric b,
  body:not(.auth-locked) .cc-kpi b,
  body:not(.auth-locked) .scouting-metric b,
  body:not(.auth-locked) .shelter-metric b {
    max-width: 100%;
    font-size: clamp(22px, 7vw, 31px);
    line-height: 1.15;
    overflow-wrap: anywhere;
  }

  body:not(.auth-locked) .cc-filter-toolbar,
  body:not(.auth-locked) .panel-title,
  body:not(.auth-locked) .section-actions,
  body:not(.auth-locked) .cc-chart-head,
  body:not(.auth-locked) .cc-zone-header {
    width: 100%;
    min-width: 0;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 8px;
  }

  body:not(.auth-locked) .cc-filter-content,
  body:not(.auth-locked) .cc-dashboard-2026 .cc-filter-content {
    width: 100%;
    min-width: 0;
    grid-template-columns: 1fr !important;
  }

  body:not(.auth-locked) .cc-filter-grid,
  body:not(.auth-locked) .cc-dashboard-2026 .cc-filter-grid,
  body:not(.auth-locked) .filters,
  body:not(.auth-locked) .reports-filters,
  body:not(.auth-locked) .scouting-filters,
  body:not(.auth-locked) .shelter-filters,
  body:not(.auth-locked) .form-grid,
  body:not(.auth-locked) .map-filters,
  body:not(.auth-locked) .compact-map-filters {
    width: 100%;
    min-width: 0 !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    overflow: visible !important;
  }

  body:not(.auth-locked) .cc-filter-field,
  body:not(.auth-locked) .filters > *,
  body:not(.auth-locked) .reports-filters > *,
  body:not(.auth-locked) .scouting-filters > *,
  body:not(.auth-locked) .shelter-filters > *,
  body:not(.auth-locked) .form-grid > * {
    min-width: 0 !important;
    width: 100%;
  }

  body:not(.auth-locked) input,
  body:not(.auth-locked) select,
  body:not(.auth-locked) textarea,
  body:not(.auth-locked) button {
    max-width: 100%;
  }

  body:not(.auth-locked) input,
  body:not(.auth-locked) select,
  body:not(.auth-locked) textarea {
    font-size: 16px !important;
  }

  body:not(.auth-locked) .cc-filter-actions,
  body:not(.auth-locked) .filter-actions {
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body:not(.auth-locked) .cc-filter-actions button,
  body:not(.auth-locked) .filter-actions button {
    width: 100%;
    min-height: 42px;
  }

  body:not(.auth-locked) #dashboard-view .period-bar.dashboard-period-filter {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: visible;
  }

  body:not(.auth-locked) #dashboard-view .reports-filter-top-row,
  body:not(.auth-locked) #dashboard-view .dashboard-period-filter .period-bar-head {
    width: 100%;
    min-width: 0;
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-areas: none !important;
    overflow: visible;
  }

  body:not(.auth-locked) #dashboard-view .reports-filter-top-actions,
  body:not(.auth-locked) #dashboard-view .reports-filter-support-actions,
  body:not(.auth-locked) #dashboard-view .period-inputs,
  body:not(.auth-locked) #dashboard-view .dashboard-dimension-filters {
    width: 100% !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }

  body:not(.auth-locked) #dashboard-view .reports-filter-top-actions > *,
  body:not(.auth-locked) #dashboard-view .reports-filter-support-actions > *,
  body:not(.auth-locked) #dashboard-view .period-inputs > *,
  body:not(.auth-locked) #dashboard-view .dashboard-dimension-filters > * {
    width: 100% !important;
    min-width: 0 !important;
  }

  body:not(.auth-locked) .cc-report-analytics-grid,
  body:not(.auth-locked) .cc-field-analytics-grid,
  body:not(.auth-locked) .scouting-analysis-grid,
  body:not(.auth-locked) .grid-two,
  body:not(.auth-locked) .distribution-board,
  body:not(.auth-locked) .team-grid,
  body:not(.auth-locked) #reports-view .reports-workspace,
  body:not(.auth-locked) #reports-view .reports-map-content {
    width: 100%;
    min-width: 0;
    grid-template-columns: 1fr !important;
  }

  body:not(.auth-locked) .cc-report-analytics-grid > *,
  body:not(.auth-locked) .cc-field-analytics-grid > * {
    grid-column: 1 !important;
  }

  body:not(.auth-locked) .table-wrap,
  body:not(.auth-locked) .reports-table-wrap,
  body:not(.auth-locked) .scouting-table-wrap,
  body:not(.auth-locked) .shelter-table-wrap {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-inline: contain;
  }

  body:not(.auth-locked) .table-wrap table,
  body:not(.auth-locked) .reports-table-wrap table,
  body:not(.auth-locked) .scouting-table-wrap table,
  body:not(.auth-locked) .shelter-table-wrap table {
    width: max-content;
    min-width: 100%;
  }

  body:not(.auth-locked) th,
  body:not(.auth-locked) td {
    max-width: 220px;
    white-space: nowrap;
  }

  body:not(.auth-locked) #pending-map,
  body:not(.auth-locked) #scouting-map,
  body:not(.auth-locked) #cc-command-map,
  body:not(.auth-locked) #cc-attraction-report-map {
    width: 100%;
    max-width: 100%;
    height: clamp(300px, 56dvh, 460px);
    min-height: 300px;
  }

  body:not(.auth-locked) .modal {
    padding: 6px;
  }

  body:not(.auth-locked) .modal-card,
  body:not(.auth-locked) .report-details-card,
  body:not(.auth-locked) .scouting-details-card,
  body:not(.auth-locked) .shelter-details-card,
  body:not(.auth-locked) .shelter-form-card {
    width: calc(100% - 2px);
    max-width: calc(100% - 2px);
    max-height: calc(100dvh - 12px);
    margin: auto;
    padding: 12px;
    overflow: auto;
    overscroll-behavior: contain;
  }

  body:not(.auth-locked) .modal-close {
    position: sticky;
    inset-block-start: 0;
    z-index: 20;
  }

  .platform-login-header {
    padding-inline: 14px;
  }

  .platform-login-header-copy strong {
    font-size: clamp(13px, 4vw, 18px);
  }

  .platform-login-scene {
    padding: 12px;
  }

  .platform-login-card {
    width: min(100%, 430px);
    max-width: 100%;
    padding: 22px 18px;
  }
}

@media (max-width: 430px) {
  body:not(.auth-locked) .cards,
  body:not(.auth-locked) .cc-kpi-grid,
  body:not(.auth-locked) .scouting-metrics,
  body:not(.auth-locked) .shelter-metrics {
    grid-template-columns: 1fr !important;
  }

  body:not(.auth-locked) .cc-filter-grid,
  body:not(.auth-locked) .cc-dashboard-2026 .cc-filter-grid,
  body:not(.auth-locked) .filters,
  body:not(.auth-locked) .reports-filters,
  body:not(.auth-locked) .scouting-filters,
  body:not(.auth-locked) .shelter-filters,
  body:not(.auth-locked) .form-grid,
  body:not(.auth-locked) .map-filters,
  body:not(.auth-locked) .compact-map-filters,
  body:not(.auth-locked) #dashboard-view .reports-filter-top-actions,
  body:not(.auth-locked) #dashboard-view .reports-filter-support-actions,
  body:not(.auth-locked) #dashboard-view .period-inputs,
  body:not(.auth-locked) #dashboard-view .dashboard-dimension-filters {
    grid-template-columns: 1fr !important;
  }

  body:not(.auth-locked) .sidebar .nav {
    min-width: 96px;
  }
}

@media (orientation: landscape) and (max-width: 900px) and (max-height: 520px) {
  :root {
    --samp-mobile-header: 46px;
  }

  body:not(.auth-locked) .sidebar {
    display: block;
    height: 46px;
    min-height: 46px;
  }

  body:not(.auth-locked) .sidebar .brand {
    display: none;
  }
}