/* BMSDock UI 1.9.7 — Responsive / Mobile Standardization
   Scope: mobile geometry and overflow only. Desktop visual language remains unchanged. */

:root {
  --mobile-page-gap: 10px;
  --mobile-control-gap: 8px;
  --mobile-touch-min: 44px;
  --mobile-panel-radius: 12px;
}

@media (max-width: 768px) {
  /* General mobile spacing */
  .app,
  .app-shell,
  .main,
  .main-content,
  .content {
    min-width: 0;
  }

  /* Horizontal toolbars remain scrollable instead of wrapping awkwardly. */
  

  

  

  /* Keep tap targets practical. */
  button,
  [role="button"],
  select,
  input {
    touch-action: manipulation;
  }

  .side-tools .round-tool,
  .right-tools .round-tool,
  #infoBtn,
  #donateBtn {
    min-width: var(--mobile-touch-min);
    min-height: var(--mobile-touch-min);
  }



  /* Graph areas and canvases must shrink with viewport. */
  .trip-chart-card,
  .graph-panel,
  .chart-wrap,
  .chart-container,
  canvas {
    max-width: 100%;
    min-width: 0;
  }

  .trip-chart-card {
    overflow: hidden;
  }

  /* Cell Info grid remains usable on narrow screens. */
  .cell-info-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .cell-card {
    min-width: 0;
  }

  .cell-name,
  .cell-role {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .cell-value {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  /* Data UI: prevent label/value collisions. */
  .data-row,
  .metric-row,
  .info-row,
  .stat-row,
  .parameter-row {
    min-width: 0;
  }

  .data-label,
  .metric-label,
  .info-label,
  .stat-label,
  .parameter-label {
    min-width: 0;
    flex: 1 1 auto;
  }

  .data-value,
  .metric-value,
  .info-value,
  .stat-value,
  .parameter-value {
    flex: 0 0 auto;
  }

  /* Keep lower navigation integrated and compact. */
  
}

@media (max-width: 420px) {
  .cell-info-grid {
    grid-template-columns: 1fr;
  }
}

/* Landscape phones: prioritize usable height. */
@media (max-height: 520px) and (orientation: landscape) {
  .trip-chart-card {
    max-height: 100dvh;
  }
}

/* UI 1.8.12 — desktop scroll regression fix.
   Keep the browser document scroll native on desktop. */
html,
body {
  overflow-y: auto;
}

/* Horizontal clipping is mobile-only; do not alter desktop scroll context. */
@media (max-width: 768px) {
  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
    overflow-y: auto;
  }
}