/*
 * ERGSS dashboard mobile overrides
 * Loaded after dashboard.css for screens up to 992px.
 */

@media screen and (max-width: 992px) {
  :root {
    --td-mobile-gap: 0.75rem;
    --td-mobile-map-height: 62dvh;
  }

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

  html,
  body {
    width: 100%;
    min-height: 100%;
    height: auto;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
  }

  body {
    display: block;
    padding-right: env(safe-area-inset-right);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
  }

  .container,
  .container-fluid,
  .container-flex,
  .main,
  .content-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden;
  }

  /* Primary and secondary navigation remain horizontally usable. */
  nav.navbar {
    width: 100%;
    max-width: 100%;
    min-height: 44px;
    max-height: none !important;
    padding: 0.2rem 0.35rem;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }

  nav.navbar .navbar,
  nav.navbar .navbar-collapse,
  nav.navbar .navbar-nav {
    display: flex !important;
    flex: 0 0 auto;
    width: max-content;
    min-width: min-content;
    max-width: none;
  }

  nav.navbar .navbar-nav {
    flex-direction: row;
    align-items: center;
    gap: 0.25rem;
    margin: 0 !important;
  }

  nav.navbar .nav-link,
  nav.navbar .navbar-brand,
  .tab-item,
  .td-map-menu-arrow,
  #fullscreenToggle {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  nav.navbar .nav-link {
    padding: 0.55rem 0.65rem;
  }

  /* Dashboard becomes a vertical document instead of a locked viewport. */
  .dashboard {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 100dvh;
    max-height: none !important;
    margin: 0 !important;
    padding: var(--td-mobile-gap) !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
  }

  .widget-row {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0;
    height: auto !important;
    min-height: 0 !important;
    gap: var(--td-mobile-gap);
    margin: 0 0 var(--td-mobile-gap);
    padding: 0;
  }

  .row-h1,
  .row-h1a,
  .row-h2,
  .row-h3,
  .row-h4,
  .row-h5,
  .row-h6,
  .row-h7,
  .row-h8,
  .row-h9,
  .row-h10 {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  .dashcol-1,
  .dashcol-2,
  .dashcol-2b,
  .dashcol-3,
  .dashcol-4,
  .dashcol-5,
  .dashcol-6,
  .dashcol-7,
  .dashcol-8,
  .dashcol-9,
  .dashcol-10,
  .dashcol-11,
  .dashcol-12 {
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
  }

  .widget {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0;
    height: auto !important;
    min-height: 8rem;
    max-height: none !important;
    padding: 0.65rem;
    border-radius: 10px;
    overflow-x: hidden;
    overflow-y: visible;
  }

  /* Main map widget and embedded operational surfaces. */
  .widget.double-height {
    min-height: calc(var(--td-mobile-map-height) + 3.25rem);
  }

  #mainIframe {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    min-height: var(--td-mobile-map-height);
    height: var(--td-mobile-map-height) !important;
    border: 0;
  }

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

  .td-map-menu-shell {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .td-map-menu-viewport {
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  .td-map-menu-track {
    width: max-content;
    min-width: 100%;
  }

  .td-map-menu-track .tab-item {
    flex: 0 0 auto;
    padding: 0.5rem 0.7rem !important;
  }

  /* Desktop right-side stacks become normal document sections. */
  .right-quarter-stack,
  .scroller-stack {
    display: flex;
    flex-direction: column;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0;
    height: auto !important;
    min-height: 0;
    gap: var(--td-mobile-gap);
  }

  .stacked-25,
  .stacked-third,
  .iptv-override,
  .active-response-widget {
    flex: 0 0 auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 12rem;
    max-height: none !important;
  }

  .iptv-override iframe,
  .iptv-override video {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 14rem;
  }

  /* Alert scroller stays readable and touch-scrollable. */
  .scroller-stack {
    min-height: 16rem;
    overflow: hidden;
  }

  .hscroll-container,
  .hscroll-track,
  .alertbox,
  .dashboard-alert-iframe {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .hscroll-container {
    min-height: 15rem;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }

  .hscroll-track {
    min-height: 15rem;
  }

  .alertbox,
  .dashboard-alert-iframe {
    min-height: 14rem;
    height: 14rem !important;
  }

  /* Active Response remains in source order and expands for content. */
  .active-response-widget {
    overflow: visible;
  }

  .active-response-shell,
  .active-response-list {
    width: 100%;
    min-width: 0;
    height: auto;
    max-height: none;
  }

  .active-response-header,
  .active-response-summary {
    flex-wrap: wrap;
  }

  .active-response-pill,
  .active-response-empty,
  .active-response-future {
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  /* Dashboard support widgets use content-driven heights. */
  .dashboard-widget-frame,
  .dashboard-chart-shell,
  .dashboard-clocks,
  .dashboard-status-badges,
  .dashboard-ticker-shell,
  .dashboard-ticker-viewport {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    height: auto;
    max-height: none;
  }

  .dashboard-status-badges,
  .dashboard-clocks {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }

  .dashboard-status-badge,
  .dashboard-clock-card {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .dashboard-chart-shell {
    min-height: 16rem;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
  }

  #dashboardEventHistoryChart {
    width: 100% !important;
    min-height: 15rem;
  }

  .dashboard-ticker-viewport {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
  }

  .dashboard-ticker-track {
    width: max-content;
    min-width: 100%;
  }

  .dashboard-ticker-item {
    min-height: 44px;
  }

  /* Standalone mini-dashboard pages and wide data stay within the viewport. */
  .regional-threats-container,
  .isp-status-container,
  .asn-lookup-container,
  .geomagnetic-threats-container,
  .settings-container,
  .regional-threats-dashboard,
  .isp-status-dashboard,
  .asn-lookup-dashboard,
  .geomagnetic-threats-dashboard,
  .settings-dashboard {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    max-height: none !important;
  }

  .regional-threats-dashboard,
  .isp-status-dashboard,
  .asn-lookup-dashboard,
  .geomagnetic-threats-dashboard,
  .settings-dashboard {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .data-table-wrap,
  .profile-table-wrap,
  .coordinate-table-wrap,
  .geomagnetic-table-wrap,
  .table-responsive {
    width: 100%;
    max-width: 100%;
    overflow-x: auto !important;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
  }

  table {
    max-width: 100%;
  }

  td,
  th,
  p,
  a,
  code,
  pre {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  input,
  select,
  textarea,
  button,
  .btn {
    max-width: 100%;
    min-height: 44px;
  }

  /* Search modal remains contained within the mobile viewport. */
  .modal-dialog,
  .modal-dialog.modal-lg {
    width: auto;
    max-width: calc(100% - 1rem);
    min-height: 0;
    margin: 0.5rem auto;
  }

  .modal-content {
    max-height: calc(100dvh - 1rem);
    overflow: hidden;
  }

  .modal-body {
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  #polygonSearchIframe {
    width: 100% !important;
    max-width: 100% !important;
    height: 70dvh !important;
    min-height: 24rem;
  }

  /* Footer and fullscreen controls remain reachable and touch-friendly. */
  footer,
  .footer {
    width: 100%;
    max-width: 100%;
    height: auto;
    position: static;
  }

  #fullscreenToggle {
    min-width: 44px;
    padding: 0.55rem 0.7rem;
  }

  .dashboard.dashboard-fullscreen-active,
  .dashboard:fullscreen,
  .dashboard:-webkit-full-screen,
  .dashboard:-moz-full-screen,
  .dashboard:-ms-fullscreen {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    padding-bottom: env(safe-area-inset-bottom) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  :focus-visible {
    outline: 3px solid #4da3ff;
    outline-offset: 2px;
  }
}

@media screen and (max-width: 576px) {
  :root {
    --td-mobile-gap: 0.5rem;
    --td-mobile-map-height: 58dvh;
  }

  .dashboard {
    padding: 0.5rem !important;
  }

  .widget {
    padding: 0.5rem;
    border-radius: 8px;
  }

  .active-response-header {
    align-items: stretch;
  }

  .active-response-header h2,
  .dashboard-widget-header h2 {
    font-size: 1rem;
  }

  .dashboard-clock-time {
    font-size: 1.35rem;
  }

  .modal-dialog,
  .modal-dialog.modal-lg {
    max-width: calc(100% - 0.5rem);
    margin: 0.25rem auto;
  }

  .modal-content {
    max-height: calc(100dvh - 0.5rem);
  }
}

@media screen and (max-width: 992px) and (orientation: landscape) and (max-height: 576px) {
  :root {
    --td-mobile-map-height: 76dvh;
  }

  nav.navbar {
    min-height: 40px;
  }

  .modal-content {
    max-height: calc(100dvh - 0.5rem);
  }

  #polygonSearchIframe {
    height: 72dvh !important;
    min-height: 18rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}