/* ── Responsive overrides for phone (< 768px) and tablet (< 1024px) ─────── */

/* ── Touch targets: minimum 44px for all interactive elements ─────────── */
@media (max-width: 768px) {
  .chip, .dd-btn, .home-btn, .nav-link, .period-btn, .scan-btn, .btn,
  .stock-pill, .dd-item, .tchip {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    font-size: 12px;
  }

  /* ── Topbar: compact, allow wrapping ──────────────────────────────────── */
  .topbar {
    padding: 8px 12px;
    gap: 6px;
    height: auto !important;
    min-height: 48px;
    flex-wrap: wrap;
  }
  .logo-text {
    font-size: 13px !important;
  }
  .topbar .nav-link, .topbar .home-btn {
    padding: 4px 8px;
    font-size: 11px;
  }
  .topbar .search-wrap {
    width: 100%;
    order: 99;
    margin-top: 4px;
  }
  .topbar .scan-btn {
    padding: 5px 12px;
    font-size: 11px;
  }
  .topbar-spacer, .spacer {
    display: none;
  }
  .nav-group {
    width: 100%;
    flex-wrap: wrap !important;
    gap: 4px !important;
  }
  .dd-btn, .home-btn {
    font-size: 11px !important;
    padding: 5px 10px !important;
  }

  /* ── Main container: less padding ────────────────────────────────────── */
  .main {
    padding: 10px 10px 30px !important;
  }

  /* ── Stats row: 2 columns instead of auto-fill ──────────────────────── */
  [id="stats-row"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
  }
  .stat-card {
    padding: 10px 12px !important;
  }
  .stat-value {
    font-size: 18px !important;
  }
  .stat-label {
    font-size: 9px !important;
  }

  /* ── Grids: stack to single column ──────────────────────────────────── */
  .grid2,
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* ── Cards: smaller border radius + padding ─────────────────────────── */
  .card {
    border-radius: 8px;
  }
  .card-header {
    padding: 10px 12px;
    font-size: 12px;
    flex-wrap: wrap;
    gap: 4px;
  }
  .card-sub {
    font-size: 10px;
  }

  /* ── Tables: horizontal scroll wrapper + compact ────────────────────── */
  table {
    font-size: 11px;
  }
  th {
    padding: 6px 8px !important;
    font-size: 9px !important;
    white-space: nowrap;
  }
  td {
    padding: 6px 8px !important;
    font-size: 11px !important;
  }

  /* ── Filter rows: wrap better ───────────────────────────────────────── */
  .filter-row {
    padding: 8px 10px !important;
    gap: 6px !important;
  }
  .filter-row .input {
    font-size: 12px;
    padding: 6px 8px;
  }

  /* ── Score pills: slightly smaller ──────────────────────────────────── */
  .score-pill {
    font-size: 11px !important;
    padding: 2px 8px !important;
    min-width: 36px !important;
  }

  /* ── Badges ─────────────────────────────────────────────────────────── */
  .badge {
    font-size: 9px;
    padding: 1px 5px;
  }

  /* ── Charts: shorter on mobile ──────────────────────────────────────── */
  .chart-container {
    height: 250px !important;
  }
  .sub-chart-container {
    height: 120px !important;
  }

  /* ── Day buttons: wrap + smaller ────────────────────────────────────── */
  .day-chip {
    font-size: 10px !important;
    padding: 3px 8px !important;
  }

  /* ── Dashboard hero: compact ────────────────────────────────────────── */
  .hero {
    padding: 30px 16px 20px !important;
  }
  .hero h1 {
    font-size: 22px !important;
  }
  .hero p {
    font-size: 12px !important;
  }

  /* ── Feature cards on dashboard ─────────────────────────────────────── */
  .grid {
    grid-template-columns: 1fr !important;
    padding: 12px !important;
    gap: 12px !important;
  }
  .feature {
    padding: 16px !important;
  }
  .feature [style*="grid-column"] {
    grid-column: auto !important;
  }
  .feature h3 {
    font-size: 14px;
  }
  .feature p {
    font-size: 11.5px;
  }

  /* ── Login page ─────────────────────────────────────────────────────── */
  .card[style*="width:340px"],
  form.card {
    width: 100% !important;
    max-width: 340px;
    margin: 0 16px;
  }

  /* ── Ticker chips: wrap properly ────────────────────────────────────── */
  #ticker-chips-wrap {
    width: 100%;
  }

  /* ── Analysis panel breakdowns: stack ────────────────────────────────── */
  [style*="grid-template-columns:1fr 1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  [style*="repeat(auto-fit,minmax(260px,1fr))"] {
    grid-template-columns: 1fr !important;
  }

  /* ── Back-to-top button: smaller ────────────────────────────────────── */
  #back-to-top {
    width: 38px !important;
    height: 38px !important;
    bottom: 16px !important;
    right: 16px !important;
    font-size: 16px !important;
  }

  /* ── Lab page ───────────────────────────────────────────────────────── */
  .input-row {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .input-row .input {
    width: 100% !important;
  }
  .input-row .btn {
    width: 100%;
  }
}

/* ── Tablet tweaks (768–1024px) ───────────────────────────────────────── */
@media (min-width: 769px) and (max-width: 1024px) {
  .main {
    padding: 14px 16px 36px !important;
  }
  .topbar .search-wrap {
    width: 200px;
  }
  .grid {
    grid-template-columns: 1fr 1fr !important;
  }
}

/* ── Ensure full-width feature card on dashboard spans correctly ──────── */
@media (max-width: 768px) {
  [style*="grid-column:1 / -1"] {
    grid-column: auto !important;
  }
}