/* Omega — mobile + tablet responsive overrides.
 * Breakpoints tuned for the sticky top chrome (brand · tabs · meta) which
 * doesn't fit on phones without collapsing.
 */

/* Prevent any child with a computed width > 100vw from horizontally
 * clipping the chrome + view titles. Happens on iOS Safari when a
 * descendant (e.g. the view-title 'Portfolio' rendered in a big serif)
 * doesn't wrap. */
html, body { overflow-x: hidden; }
@media (max-width: 740px) {
  body { max-width: 100vw; }
  .view, .chrome-inner { max-width: 100%; }
  /* Make any oversized word wrap rather than overflow. */
  .view-title { font-size: 2rem !important; line-height: 1.1; word-break: break-word; }
}

/* Mobile tab picker — hidden on desktop, shown on ≤740px instead of the
 * horizontal tab rail. Uses the native <select> so iOS renders its own
 * picker (no scroll needed, accessible, one tap). */
.tabs-mobile {
  display: none;
  appearance: none;
  -webkit-appearance: none;
  background: rgba(255,255,255,0.04);
  color: var(--ink);
  border: 1px solid var(--hair);
  border-radius: 999px;
  font-family: inherit;
  font-size: 0.82rem;
  padding: 7px 28px 7px 14px;
  background-image: linear-gradient(45deg, transparent 50%, var(--mid) 50%),
                    linear-gradient(135deg, var(--mid) 50%, transparent 50%);
  background-position: right 12px top 50%, right 7px top 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

@media (max-width: 740px) {
  #tabs        { display: none !important; }
  .tabs-mobile { display: inline-block; grid-column: 1 / -1; justify-self: start; width: 100%; max-width: 320px; }
}

/* ≤ 1080px — laptop: tighten chrome gaps + tab padding. */
@media (max-width: 1080px) {
  .chrome-inner { padding: 12px 18px; gap: 16px; }
  .tab { padding: 6px 12px; font-size: 0.74rem; }
  .wordmark .wm-ver { display: none; }
}

/* ≤ 900px — tablet landscape */
@media (max-width: 900px) {
  .chrome-inner { padding: 10px 14px; gap: 12px; }
  .tabs { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; max-width: 100%; }
  .tabs::-webkit-scrollbar { display: none; }
  .chrome-meta .cmd-hint { display: none; }
  .chrome-meta { gap: 6px; }
  .client-switch #client-label { display: none; }
  .client-switch .caret       { display: none; }
}

/* ≤ 740px — small tablet / big phone landscape */
@media (max-width: 740px) {
  /* Brand trimmed; tabs become the full row under it */
  .chrome-inner {
    grid-template-columns: 1fr auto !important;
    grid-template-rows: auto auto;
    gap: 8px 12px;
    padding: 8px 12px;
  }
  .brand       { grid-column: 1; grid-row: 1; }
  .chrome-meta { grid-column: 2; grid-row: 1; }
  .tabs        { grid-column: 1 / -1 !important; grid-row: 2; margin: 0; justify-self: start !important; }
  .tab { padding: 5px 10px; font-size: 0.72rem; gap: 5px; }
  .tab-badge { font-size: 0.58rem; padding: 1px 5px; }
  .wm-name { font-size: 1.05rem; }
  .wm-os   { font-size: 0.66rem; letter-spacing: 0.18em; }
  .wm-sep  { height: 11px; }
  .clock   { display: none; }
  .backend-status .bs-label { display: none; }
}

/* ≤ 560px — phone */
@media (max-width: 560px) {
  .chrome-inner { padding: 6px 10px; gap: 6px 8px; }
  .brand-mark-img { height: 20px; width: 20px; }
  .wm-name { font-size: 0.98rem; }
  .wm-os   { display: none; }
  .tab     { padding: 5px 9px; font-size: 0.68rem; }
  .tab-badge { display: none; }              /* tabs stay readable; badges reappear in views */
  .user-chip  { width: 28px; height: 28px; }
  .user-chip .user-avatar { width: 24px; height: 24px; }

  .view { padding: 14px; }
  .view-head { flex-direction: column; align-items: flex-start; gap: 10px; }
  .view-actions { width: 100%; justify-content: flex-start; flex-wrap: wrap; }

  /* Content grids → single column */
  .portfolio-grid,
  .portfolio-scoped-grid,
  .fleet-grid,
  .review-list,
  .wt-grid {
    grid-template-columns: 1fr !important;
    gap: 12px;
  }
  .client-card,
  .agent-card,
  .review-card,
  .wt-card { padding: 16px !important; }

  /* Watchtower cards: stacked metrics */
  .wt-metrics { grid-template-columns: 1fr 1fr !important; gap: 10px; }

  /* Schedule table → stacked cards */
  .schedule-table .st-head { display: none; }
  .schedule-table .st-row {
    grid-template-columns: 1fr !important;
    gap: 6px;
    padding: 14px;
  }

  /* Run detail */
  .run-detail { padding: 16px; }
  .rd-grid { grid-template-columns: 1fr !important; }
  .rd-stream { max-height: 200px !important; }

  /* Command palette → near full-screen on phone */
  .cp-overlay .cp-card {
    max-width: 95vw !important;
    max-height: 85vh !important;
  }

  /* Drawer */
  .drawer { max-width: 100vw !important; }

  /* Footer */
  .app-foot { font-size: 0.6rem; gap: 6px; }
}

/* Touch-friendly tap targets */
@media (pointer: coarse) {
  .tab, .btn, .chip, .client-switch, .user-chip { min-height: 34px; }
}