/* Mobile Responsiveness Overrides for GALAXY Viewer */

/* Universal Mobile Adjustments (Portrait & Landscape) */
@media screen and (max-width: 1024px) {
  /* Adjusting font sizes for overlays */
  .ViewportOverlay, [class*="ViewportOverlay"] {
    font-size: 11px !important;
    line-height: 1.1 !important;
    pointer-events: none;
  }

  /* Making the toolbar scrollable if it overflows */
  .Toolbar, [class*="Toolbar"], .toolbar-row {
    overflow-x: auto !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    padding: 4px 0 !important;
    -webkit-overflow-scrolling: touch;
    height: auto !important;
    max-width: 100vw !important;
  }

  /* Adjusting button sizes for touch */
  .ohif-button, button, [class*="Button"] {
    min-height: 32px;
    min-width: 32px;
  }
  
  /* DICOM Tag Browser Table Responsiveness */
  .dicom-tag-browser-table-wrapper {
    overflow-x: auto !important;
    max-width: 100vw !important;
    -webkit-overflow-scrolling: touch;
  }
  .dicom-tag-browser-table {
    min-width: 500px;
  }
}

/* Portrait Mobile Adjustments */
@media screen and (max-width: 500px) and (orientation: portrait) {
  /* Compact Header */
  header, .Header, [class*="Header"], .ohif-header {
    height: 48px !important;
    padding: 0 8px !important;
  }

  /* Viewport Overlay - further reduction for small screens */
  .ViewportOverlay {
    font-size: 10px !important;
  }

  /* Side Panels - adapt width for small screens */
  [class*="SidePanel"], .side-panel {
    width: 85% !important;
    max-width: 300px !important;
    z-index: 1000 !important;
  }

  /* Adjusting viewport grid for single column on mobile if necessary */
  .viewport-grid, .ViewportGrid {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
  }
}

/* Landscape Mobile Adjustments */
@media screen and (max-width: 932px) and (orientation: landscape) {
  /* Ultra-compact Header */
  header, .Header, [class*="Header"], .ohif-header {
    height: 36px !important;
  }

  /* Optimize vertical space - reduce viewport padding */
  .top-viewport { top: 1px !important; }
  .bottom-viewport { bottom: 1px !important; }
  
  /* Hide non-essential overlays in landscape to maximize image area */
  .overlay-bottom-left, .overlay-bottom-right {
    display: none !important;
  }
  
  /* Ensure the viewport grid fills the screen height minus header */
  .viewport-grid, .ViewportGrid {
    height: calc(100vh - 36px) !important;
  }

  /* Side panels in landscape should be narrower */
  [class*="SidePanel"], .side-panel {
    width: 200px !important;
  }
}