/* Mobile overrides to prevent elements exceeding narrow viewports */

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

/* Prevent large images/containers forcing horizontal scroll */
img, video, canvas, iframe, .map_container, #map, .detached-map, .lc_container {
  max-width: 100%;
  height: auto;
}

/* Mobile-specific relaxations */
@media (max-width: 480px) {
  /* Legend rows: allow shrink / wrap */
  .legendRow,
  .legendLastRow,
  .legendRowPrint,
  .legendSaleRow {
    min-width: 0 !important;
    display: inline-block;
    white-space: normal;
    padding-left: 6px;
    padding-right: 6px;
  }

  /* Form controls: stack to avoid fixed widths */
  .search_text,
  .search-text,
  .inputLabelWidth,
  .inputLabelWidthR,
  .subAdvancedSearch .inputClass,
  .searchToWidth,
  .fixed-width {
    width: 100% !important;
    max-width: 100%;
  }

  /* Important title and other fixed boxes: make fluid */
  #important-title {
    width: auto !important;
    padding: 12px 10px !important;
    height: auto !important;
    box-sizing: border-box;
  }

  /* Dropdown toggles should not force column overflow */
  .dropdown-toggle {
    width: auto !important;
  }

  /* Map container: use viewport relative height instead of large fixed px heights */
  .map_area,
  .detached-map,
  #map {
    height: 50vh !important; /* keeps map visible but avoids forcing page width */
    max-height: 60vh;
    width: 100% !important;
    overflow: hidden;
  }

  /* Toolbar buttons scale down */
  .map-button,
  .map-legendclosebutton,
  .sortImageClass {
    width: auto !important;
    height: auto !important;
    min-width: 28px;
    min-height: 28px;
  }

  /* Modal dialogs: limit width on small screens */
  #load-modal .modal-dialog,
  #error-modal .modal-dialog,
  #divSearchMsg-modal .modal-dialog,
  #divIdentifyMsg-modal .modal-dialog {
    width: auto !important;
    max-width: 90% !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
  }

  /* Stack inline form elements */
  .form-inline > * {
    display: block !important;
    width: 100% !important;
    margin: 6px 0 !important;
  }

  /* Targeted fixes for table header overflow (Advance Search th with colspan) */
  /* Allow table container to scroll if necessary, and keep smoothing on touch devices */
  .tabular_data {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
  }

  /* Make table obey the container and allow columns to shrink/wrap */
  .tabular_data table {
    width: 100% !important;
    table-layout: fixed !important; /* forces cells to wrap instead of expanding */
  }

  /* Ensure cells and headers break long words and wrap lines */
  .tabular_data th,
  .tabular_data td,
  .tabular_data th.tableHeader {
    white-space: normal !important;
    overflow-wrap: break-word;
    word-break: break-word;
    box-sizing: border-box;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  /* Reduce header padding/font so it fits narrower screens */
  .tabular_data th.tableHeader {
    font-size: 16px;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }

  /* If header uses a large colspan, force it to stay within viewport */
  .tabular_data th.tableHeader[colspan] {
    width: 100% !important;
  }

  /* Neutralize the left-floating glyphicon and large inline padding that caused extra width */
  #adv_search_header,
  .tabular_data th .glyphicon {
    float: none !important;
    display: inline-block !important;
    padding-right: 0 !important;
    padding-top: 0 !important;
    margin-left: 6px;
    vertical-align: middle;
  }
}

/* Extra tightening for very small devices (<=320px) */
@media (max-width: 320px) {
  .legendRow,
  .legendLastRow,
  .legendRowPrint {
    font-size: 12px;
    padding: 4px;
  }

  /* Ensure nothing uses absolute large left/right offsets */
  .lc_container,
  .lcLegend_container,
  .lcLegend_detachcontainer {
    padding-left: 6px !important;
    padding-right: 6px !important;
    width: 100% !important;
  }

  .tabular_data th.tableHeader {
    font-size: 14px;
    padding-left: 6px !important;
    padding-right: 6px !important;
  }
}