/*
 * OTel Explorer — mobile / responsive overrides
 *
 * Layered on top of the pre-built Jaeger UI bundle.
 * Target: screens narrower than 768px.
 */

/* ── Global ─────────────────────────────────────────────────────────── */

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

/* ── Top nav ─────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  .Page--topNav {
    flex-wrap: wrap;
    height: auto !important;
    min-height: 48px;
    padding: 6px 8px !important;
  }

  .Page--topNav .ant-menu {
    flex-wrap: wrap;
    line-height: 36px;
  }

  .Page--topNav .ant-menu-item {
    padding: 0 8px !important;
  }

  /* Give content room when nav wraps */
  .Page--content,
  .Page--content--no-embedded {
    padding-top: 0 !important;
  }
}

/* ── Search page ─────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  /* Stack columns vertically */
  .SearchTracePage--row {
    flex-direction: column !important;
  }

  .SearchTracePage--column {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
  }

  /* Full-width search form */
  .ant-form-item {
    width: 100% !important;
  }

  .SearchForm--lookbackRow,
  .SearchForm--adjustTime {
    flex-wrap: wrap;
    gap: 8px;
  }

  .SearchForm--submit .ant-btn {
    width: 100%;
  }

  /* Results list: prevent overflow */
  .SearchResults--header {
    flex-wrap: wrap;
    gap: 8px;
  }

  .SearchResults--headerScatterPlot {
    display: none !important;
  }

  /* Result cards: stack duration bar below title */
  .ResultItemTitle--item {
    flex-wrap: wrap;
  }

  .ResultItemTitle--durationBar {
    width: 100% !important;
    margin-top: 4px;
  }

  .ResultItemTitle--idExcerpt {
    font-size: 11px;
  }

  /* Tags: allow wrapping */
  .ResultItem--serviceTag {
    margin-bottom: 4px;
  }
}

/* ── Trace detail / timeline ─────────────────────────────────────────── */

@media (max-width: 768px) {
  /* Allow horizontal scroll on the timeline — it cannot reasonably
     compress to phone width, so we let it scroll rather than break */
  .TraceTimelineViewer,
  .VirtualizedTraceView {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Widen minimum span label column so text doesn't get crushed */
  .SpanBar--label {
    min-width: 80px;
    font-size: 11px;
    white-space: nowrap;
  }

  /* Trace page header: stack title and controls */
  .TracePageHeader {
    flex-wrap: wrap !important;
    gap: 8px;
    padding: 8px !important;
  }

  .TracePageHeader .ant-btn-group,
  .TracePageHeader .ant-btn {
    font-size: 12px;
  }

  /* Search bar inside trace page: full width */
  .TracePageSearchBar {
    width: 100% !important;
  }

  /* Timeline header row: allow wrapping tick labels to scroll */
  .TimelineHeaderRow {
    overflow-x: auto;
  }
}

/* ── Span detail side panel ──────────────────────────────────────────── */

@media (max-width: 768px) {
  .SpanDetail--debugInfo {
    font-size: 11px;
    word-break: break-all;
  }

  /* Key-value tables: prevent overflow, allow wrap */
  .KeyValueTable {
    width: 100%;
    table-layout: fixed;
    word-break: break-word;
  }

  .KeyValueTable td:first-child {
    width: 35%;
    font-weight: 500;
  }

  .KeyValueTable td:last-child {
    width: 65%;
    word-break: break-all;
  }
}

/* ── Ant Design modal / drawer on mobile ─────────────────────────────── */

@media (max-width: 768px) {
  .ant-modal {
    max-width: 96vw !important;
    margin: 8px auto !important;
  }

  .ant-drawer-content-wrapper {
    width: 100% !important;
  }

  /* Selects / dropdowns: full width */
  .ant-select {
    width: 100% !important;
  }

  /* Tables: horizontal scroll */
  .ant-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Improve tap target size */
  .ant-btn,
  .ant-menu-item,
  .ant-select-selector {
    min-height: 36px;
  }
}

/* ── Utility ─────────────────────────────────────────────────────────── */

@media (max-width: 480px) {
  /* Hide graph/DAG view toggle on very small screens — timeline-only mode */
  .SearchResults--ddg-container {
    display: none !important;
  }

  body {
    font-size: 13px;
  }
}