/* ============================================
   RESPONSIVE OVERRIDES — Mobile & Tablet
   Loaded last, after all other stylesheets.
   Breakpoints: 900px (tablet), 600px, 480px (mobile), 360px (small)
   ============================================ */

/* ═══ Hamburger Button (hidden on desktop) ═══ */
.hamburger-btn {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  z-index: 2;
  position: relative;
  flex-shrink: 0;
}
.hamburger-btn span {
  display: block;
  width: 20px;
  height: 2px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 1px;
  transition: transform 0.3s, opacity 0.3s;
}
/* Animate to X when menu open */
.hamburger-btn.active span:nth-child(1) {
  transform: rotate(45deg) translate(4px, 4px);
}
.hamburger-btn.active span:nth-child(2) {
  opacity: 0;
}
.hamburger-btn.active span:nth-child(3) {
  transform: rotate(-45deg) translate(4px, -4px);
}

/* ═══════════════════════════════════════════════
   TABLET BREAKPOINT: ≤900px
   ═══════════════════════════════════════════════ */
@media (max-width: 900px) {

  /* --- Hamburger visible --- */
  .hamburger-btn {
    display: flex;
  }

  /* --- Top nav: hide center links, show as dropdown --- */
  .top-nav-links {
    display: none;
    position: absolute;
    top: 48px;
    left: 0;
    right: 0;
    flex-direction: column;
    background: rgba(8, 13, 25, 0.95);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding: 8px 0;
    z-index: 49;
  }
  .top-nav-links.open {
    display: flex;
  }
  .top-nav-links .tab-btn {
    padding: 12px 24px;
    text-align: left;
    border-radius: 0;
    font-size: 14px;
  }
  .top-nav-links .tab-btn:hover {
    background: rgba(255, 255, 255, 0.04);
  }

  /* --- Top nav brand: shrink --- */
  .top-nav-brand {
    font-size: 13px;
    margin-right: auto;
  }

  .top-nav-right {
    margin-left: 8px;
  }

  /* --- Planner: compact for mobile --- */
  .planner-content {
    padding: 12px;
  }
  .planner-account-bar {
    align-items: stretch;
  }
  .pab-row-inputs {
    flex-direction: column;
    align-items: stretch;
  }
  .pab-sep {
    width: 100%;
    height: 1px;
  }
  .pab-summary-group {
    justify-content: space-between;
  }
  .pab-stocks-group .owned-stock-form {
    flex-wrap: wrap;
  }
  .pab-stocks-group .owned-input {
    flex: 1 1 28%;
    min-width: 0;
  }
  .pab-stocks-group .owned-input.small {
    max-width: none;
  }
  .pab-stocks-group #owned-ticker {
    flex: 1 1 100%;
  }
  .pab-stocks-group .owned-add-btn {
    width: 100%;
    flex: 1 1 100%;
    min-height: 44px;
  }
  .planner-header {
    margin-bottom: 12px;
  }
  .planner-search-wrapper {
    max-width: 100%;
  }

  /* Trades table: scrollable */
  .trades-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .trades-table {
    min-width: 500px;
  }

  /* Verdict column: stack below trades */
  .planner-body {
    flex-direction: column;
    gap: 12px;
  }
  .verdict-column {
    width: 100%;
    position: static;
  }
  .verdict-panel {
    max-height: none;
  }

  /* --- Chain Modal: full-screen --- */
  .chain-modal {
    width: 100vw;
    max-width: 100vw;
    max-height: 100vh;
    border-radius: 0;
    height: 100vh;
  }

  /* --- Battle Modal: full-screen --- */
  .battle-modal {
    width: 100vw;
    max-width: 100vw;
    max-height: 100vh;
    border-radius: 0;
    height: 100vh;
  }
  .battle-overview-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .battle-columns {
    grid-template-columns: 1fr;
  }

  /* --- Activity toolbar: wrap --- */
  .activity-toolbar {
    flex-wrap: wrap;
    gap: 8px;
  }
  .activity-price-bar {
    width: 100%;
  }
  .activity-stats {
    width: 100%;
    margin-left: 0;
  }

  /* --- Activity table: horizontal scroll with hint --- */
  .sector-body {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* --- Positions form: stack --- */
  .positions-add-form {
    flex-direction: column;
    align-items: stretch;
  }
  .pos-input[type="text"],
  .pos-select,
  .pos-input-group,
  .pos-input[type="date"] {
    width: 100%;
  }

  /* --- Report: 2-column cards, single-column sections --- */
  .report-cards {
    grid-template-columns: repeat(2, 1fr);
  }
  .report-columns {
    grid-template-columns: 1fr;
  }

  /* --- View padding: reduce --- */
  .positions-view,
  .report-view,
  .account-view {
    padding: 16px 12px;
  }

  /* --- Recommender: stack band and risk cards earlier --- */
  .rec-band-cards {
    flex-direction: column;
  }
  .rec-risk-cards {
    flex-direction: column;
  }

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

  /* --- Touch targets --- */
  button, .tab-btn, .pos-add-btn, .pos-clear-btn,
  .chain-add-btn, .battle-btn, .clear-trades-btn,
  .welcome-got-it, .auth-submit, .pricing-cta,
  .banner-auth-btn, .lock-cta {
    min-height: 44px;
  }
  input, select, textarea {
    min-height: 40px;
  }

  /* --- Tooltip "?" icon: enlarge for touch --- */
  .info-tooltip-icon {
    width: 28px;
    height: 28px;
    font-size: 13px;
  }

  /* --- Scanner Filters Modal: full-screen on mobile --- */
  .scanner-filters-modal {
    width: 100vw;
    max-width: 100vw;
    max-height: 100vh;
    border-radius: 0;
    height: 100vh;
  }

  /* --- Trade History modal: full-screen --- */
  .trade-history-modal {
    width: 100vw;
    max-width: 100vw;
    max-height: 100vh;
    border-radius: 0;
    height: 100vh;
  }

  /* --- Positions header: stack --- */
  .positions-header {
    flex-direction: column;
    gap: 8px;
  }
  .trade-history-btn {
    align-self: stretch;
    text-align: center;
  }

  /* --- Welcome modal: fit mobile --- */
  .welcome-modal {
    padding: 24px 16px;
    max-height: 90vh;
    overflow-y: auto;
  }

  /* --- Performance: 2-col summary, scrollable table --- */
  .perf-summary-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .perf-top5-list { grid-template-columns: 1fr !important; }
  .perf-breakdown-grid { grid-template-columns: 1fr !important; }
  .perf-table-wrap { overflow-x: auto; }
  .perf-table { min-width: 700px; }
  .perf-filters { flex-wrap: wrap; }
  .perf-filters > * { flex: 1 1 140px; }
  .perf-admin-grid { grid-template-columns: repeat(2, 1fr) !important; }

  /* --- Body overflow safety --- */
  body {
    overflow-x: hidden;
  }
  .main-viewport {
    overflow-x: hidden;
    overflow-y: auto;
  }

}

/* ═══════════════════════════════════════════════
   MID-MOBILE BREAKPOINT: ≤600px
   Hide low-priority columns from data tables
   ═══════════════════════════════════════════════ */
@media (max-width: 600px) {

  /* --- Activity table: hide Mkt Cap (col 3), Avg Vol (col 4), OI (col 7), Rel Vol (col 8) --- */
  .activity-table th:nth-child(3),
  .activity-table td:nth-child(3),
  .activity-table th:nth-child(4),
  .activity-table td:nth-child(4),
  .activity-table th:nth-child(7),
  .activity-table td:nth-child(7),
  .activity-table th:nth-child(8),
  .activity-table td:nth-child(8) {
    display: none;
  }
  .activity-table {
    min-width: auto;
  }
  .activity-table th,
  .activity-table td {
    padding: 6px 6px;
    font-size: 11px;
  }

  /* --- Recommender table: hide OI (col 5) and Delta (col 6) --- */
  .rec-results-table th:nth-child(5),
  .rec-results-table td:nth-child(5),
  .rec-results-table th:nth-child(6),
  .rec-results-table td:nth-child(6) {
    display: none;
  }
  .rec-results-table { font-size: 11px; }
  .rec-results-table th,
  .rec-results-table td { padding: 6px 6px; }

  .rec-params-bar { padding: 8px 12px; }
  .rec-param-chip { font-size: 11px; padding: 3px 8px; }
  .recommender-view { padding: 1rem; }
  .rec-wizard-card { padding: 1.25rem; margin: 1rem auto; }
  .rec-wizard-card--wide { max-width: 100%; }

  /* --- Chain modal: hide IV (col 5) and OI (col 6) --- */
  .chain-strike-header > *:nth-child(5),
  .chain-strike-header > *:nth-child(6),
  .chain-strike-row > *:nth-child(5),
  .chain-strike-row > *:nth-child(6) {
    display: none;
  }
  .chain-strike-header,
  .chain-strike-row {
    grid-template-columns: 65px 55px 50px 55px 65px 45px;
  }
  .chain-body {
    padding: 10px 8px;
  }
  .chain-modal-header {
    padding: 12px;
  }

  /* --- Planner trades table: tighter --- */
  .planner-trades-table th,
  .planner-trades-table td {
    padding: 6px 4px;
    font-size: 11px;
  }
}

/* ═══════════════════════════════════════════════
   MOBILE BREAKPOINT: ≤480px
   ═══════════════════════════════════════════════ */
@media (max-width: 480px) {

  /* --- Battle overview: single column --- */
  .battle-overview-grid {
    grid-template-columns: 1fr;
  }
  .battle-body {
    padding: 12px;
  }
  .battle-modal-header {
    padding: 12px 16px;
  }

  /* --- Report cards: single column --- */
  .report-cards {
    grid-template-columns: 1fr;
  }

  /* --- Activity table: also hide Opts Vol (col 6 after reindex = original col 6 is now col 5 visible) --- */
  .activity-table th:nth-child(6),
  .activity-table td:nth-child(6) {
    display: none;
  }

  /* --- Recommender table: also hide DTE (col 7) --- */
  .rec-results-table th:nth-child(7),
  .rec-results-table td:nth-child(7) {
    display: none;
  }

  /* --- Owned stock form: wrap --- */
  .owned-stock-form {
    flex-wrap: wrap;
  }
  .owned-input {
    flex: 1 1 40%;
    min-width: 0;
  }
  .owned-input.small {
    max-width: none;
    flex: 1 1 40%;
  }
  #owned-ticker {
    flex: 1 1 40%;
  }
  .owned-add-btn {
    width: 100%;
    flex: 1 1 100%;
    min-height: 44px;
  }

  /* --- Auth/Pricing: compact --- */
  .auth-modal {
    padding: 20px 16px;
  }
  .auth-modal h2 {
    font-size: 18px;
  }
  .pricing-modal {
    padding: 20px 12px;
  }
  .pricing-header h2 {
    font-size: 22px;
  }

  /* --- Banner auth: shrink further --- */
  .banner-auth-btn {
    padding: 4px 8px;
    font-size: 11px;
  }

  /* --- Sentiment split: stack --- */
  .report-sentiment-split {
    grid-template-columns: 1fr;
  }

  /* --- Performance: single column --- */
  .perf-summary-grid { grid-template-columns: 1fr !important; }
  .perf-admin-grid { grid-template-columns: 1fr !important; }

  /* --- Footer: tighter --- */
  .site-footer {
    padding: 8px 10px;
  }
  .site-footer .footer-disclaimer {
    font-size: 9px;
  }
}

/* ═══════════════════════════════════════════════
   SMALLEST MOBILE: ≤360px
   ═══════════════════════════════════════════════ */
@media (max-width: 360px) {

  /* --- Top nav: shrink further --- */
  .top-nav {
    padding: 0 6px;
  }
  .top-nav-brand {
    font-size: 11px;
  }
  .banner-auth-btn {
    padding: 4px 6px;
    font-size: 10px;
  }

  /* --- Tables: smallest font --- */
  .activity-table th,
  .activity-table td {
    padding: 4px 3px;
    font-size: 10px;
  }
  .rec-results-table th,
  .rec-results-table td {
    padding: 4px 4px;
    font-size: 10px;
  }
}