/* chart.modal.mobile.css - Responsive layout for the chart overlay (#chartPanel).
   Concern: mobile/tablet breakpoint overrides for the chart modal ONLY.
   All values use design tokens (var(--*)) where tokens exist.
   No hardcoded hex colors. No Arabic characters.
   Change chart overlay mobile layout: this file only. */

/* ----------------------------------------------------------------
   768px and below: tablet / large phone
   ---------------------------------------------------------------- */
@media (max-width: 768px) {
  #chartPanel {
    height: 90vh;
    max-width: 100%;
    border-radius: var(--radius-lg, 12px) var(--radius-lg, 12px) 0 0;
  }

  /* Tighten header row 1 on tablet */
  .chart-header-row1 {
    padding: var(--space-2, 8px) var(--space-3, 12px) var(--space-1, 6px);
    gap: var(--space-2, 6px);
    flex-wrap: wrap;
  }

  /* Symbol name: slightly smaller to leave room for controls */
  .chart-symbol-name {
    font-size: 0.95rem;
  }

  /* Right-side controls row: allow wrapping without overflow */
  .chart-header-right {
    gap: var(--space-1, 4px);
    flex-wrap: wrap;
  }

  /* Timeframe label hidden on tablet (saves horizontal space) */
  .chart-tf-label {
    display: none;
  }

  /* Tighten header row 2 chips bar */
  .chart-header-row2 {
    padding: var(--space-1, 4px) var(--space-3, 12px);
    gap: var(--space-1, 6px);
  }

  /* Rules strip: allow wrapping chips on narrow viewports */
  #chartRulesStrip {
    flex-wrap: wrap;
    padding-left: var(--space-3, 12px);
    padding-right: var(--space-3, 12px);
  }

  /* Indicator sub-panels: reduce height to give main chart more space */
  .chart-panel-dynamic {
    height: 90px;
  }
}

/* ----------------------------------------------------------------
   480px and below: small phone (full-screen modal)
   ---------------------------------------------------------------- */
@media (max-width: 480px) {
  /* Full-screen on small phones */
  #chartOverlay {
    align-items: stretch;
  }

  #chartPanel {
    height: 100dvh;
    height: 100vh; /* fallback for browsers without dvh */
    border-radius: 0;
    max-width: 100%;
  }

  /* Header row 1: compact, no overflow scroll */
  .chart-header-row1 {
    padding: var(--space-2, 8px) var(--space-2, 8px) var(--space-1, 4px);
    gap: var(--space-1, 4px);
  }

  /* Hide Paper Trade and Backtest text — icon hint only on very small screens */
  #btn-chart-paper,
  #btn-chart-backtest {
    font-size: 0;
    padding: 0;
    width: 28px;
    height: 28px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Reveal the emoji/icon that was part of button text */
  #btn-chart-paper::before {
    content: "\1F4B9";
    font-size: 0.85rem;
  }

  #btn-chart-backtest::before {
    content: "\27F3";
    font-size: 0.85rem;
  }

  /* Symbol name: compact */
  .chart-symbol-name {
    font-size: 0.85rem;
    letter-spacing: 0.02em;
  }

  /* Rules strip: single-row scroll on smallest screens */
  #chartRulesStrip {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: var(--space-1, 4px);
  }

  #chartRulesStrip::-webkit-scrollbar {
    height: 3px;
  }

  /* Reduce indicator sub-panel height further on small phones */
  .chart-panel-dynamic {
    height: 72px;
  }

  /* Give the main chart area as much height as possible */
  #chartContainer {
    min-height: 160px;
  }

  /* Indicator menu: full-width on small phone */
  .chart-ind-menu-panel {
    width: 100vw;
    max-width: 100vw;
    height: 80vh;
    border-radius: var(--radius-lg, 12px) var(--radius-lg, 12px) 0 0;
  }
}

/* ----------------------------------------------------------------
   360px and below: very small phones (minimum viable view)
   ---------------------------------------------------------------- */
@media (max-width: 360px) {
  .chart-header-row2 {
    display: none;
  }

  /* Only keep the essential close + kebab in header when space is critical */
  .chart-tf-select {
    max-width: 56px;
    font-size: 0.7rem;
  }
}