/* ── Predictor3000 — Responsive / Mobile Stylesheet ── */

/* ── Bottom Nav: hidden on desktop, shown on mobile ── */
.bottom-nav { display: none; }

/* ── Prediction bottom sheet: hidden on desktop ── */
.pred-sheet { display: none; }
.mob-pred-btn { display: none; }

/* ── Tablet (768–1024px): hide advanced columns silently ── */
@media (max-width: 1024px) {
  .market-table .adv-col,
  .market-table thead .adv-col,
  #adv-toggle { display: none !important; }
}

/* ── Mobile (<768px): market table as cards, nav collapse ── */
@media (max-width: 767px) {

  /* ─ Navbar: hide text links, keep brand + hamburger ─ */
  .navbar .nav-links > a { display: none; }

  /* ─ Table → card layout ─ */
  .table-wrapper { overflow-x: visible; }

  .market-table,
  .market-table tbody { display: block; }

  .market-table thead { display: none; }

  .market-table tr {
    display: block;
    margin-bottom: 12px;
    border: 1px solid #1e293b;
    border-radius: 10px;
    padding: 12px 14px;
    background: #111827;
  }

  .market-table tr:hover { background: #111827; }

  /* Hide all cells by default */
  .market-table td { display: none; }

  /* ─ Always-visible cells (essential info) ─ */
  .market-table td.mob-q,
  .market-table td.mob-platform,
  .market-table td.mob-price,
  .market-table td.mob-signals,
  .market-table td.mob-watch,
  .market-table td.mob-predict,
  .market-table td.mob-expand-cell { display: block; }

  /* Row number: never show on mobile */
  .market-table td.mob-num { display: none !important; }

  /* Question: full-width, no truncation */
  .market-table td.mob-q {
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    max-width: none;
    color: #e2e8f0;
    font-size: 0.88rem;
    font-weight: 500;
    padding: 0 0 8px 0;
    margin-bottom: 6px;
    border-bottom: 1px solid #1e2436;
  }

  /* Platform + price on the same line */
  .market-table td.mob-platform,
  .market-table td.mob-price {
    display: inline-block;
    vertical-align: middle;
    padding: 4px 8px 4px 0;
  }

  /* Signals row */
  .market-table td.mob-signals {
    padding: 2px 0 4px;
    min-height: 4px;
  }

  /* Watch + predict inline */
  .market-table td.mob-watch,
  .market-table td.mob-predict {
    display: inline-block;
    vertical-align: middle;
    padding: 6px 8px 4px 0;
  }

  /* Expand/collapse cell */
  .market-table td.mob-expand-cell {
    text-align: center;
    padding-top: 6px;
    border-top: 1px solid #1e2436;
    margin-top: 4px;
  }

  /* ─ Expanded state: show all cells ─ */
  .market-table tr[data-expanded="true"] td {
    display: block;
    padding: 3px 0;
  }

  /* Keep inline cells inline even when expanded */
  .market-table tr[data-expanded="true"] td.mob-platform,
  .market-table tr[data-expanded="true"] td.mob-price {
    display: inline-block;
  }

  .market-table tr[data-expanded="true"] td.mob-watch,
  .market-table tr[data-expanded="true"] td.mob-predict {
    display: inline-block;
  }

  .market-table tr[data-expanded="true"] td.mob-expand-cell {
    display: block;
  }

  .market-table tr[data-expanded="true"] td.mob-num {
    display: none !important;
  }

  /* Label prefix for expanded data cells */
  .market-table td[data-label]::before {
    content: attr(data-label) ": ";
    color: #475569;
    font-size: 0.70rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }

  /* Expand toggle button */
  .mob-expand-btn {
    background: none;
    border: none;
    color: #475569;
    cursor: pointer;
    font-size: 0.75rem;
    padding: 3px 10px;
    border-radius: 4px;
    width: 100%;
  }
  .mob-expand-btn:hover { color: #94a3b8; background: #1e293b; }

  /* ─ Market controls: full-width search, wrap tabs ─ */
  .market-controls { margin-bottom: 8px; }
  .market-search { width: 100%; }
  .tab-bar { flex-wrap: wrap; gap: 6px; }
  .tab { font-size: 0.75rem; padding: 4px 10px; }

  /* ─ Desktop prediction form: hide on mobile; show tap button instead ─ */
  .pred-form, .pred-hint { display: none !important; }
  .mob-pred-btn {
    display: inline-block;
    padding: 5px 12px;
    background: #0c4a6e;
    border: 1px solid #0369a1;
    border-radius: 5px;
    color: #7dd3fc;
    font-size: 0.80rem;
    cursor: pointer;
  }
  .mob-pred-btn:hover { background: #075985; }

  /* ─ Prediction bottom sheet ─ */
  .pred-sheet {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 300;
    flex-direction: column;
    justify-content: flex-end;
  }
  .pred-sheet[hidden] { display: none; }

  .pred-sheet-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
  }

  .pred-sheet-panel {
    position: relative;
    background: #111827;
    border-radius: 16px 16px 0 0;
    padding: 16px 20px 40px;
    max-height: 80vh;
    overflow-y: auto;
    transform: translateY(100%);
    transition: transform 0.25s cubic-bezier(0.32,0.72,0,1);
  }
  .pred-sheet.open .pred-sheet-panel { transform: translateY(0); }

  .pred-sheet-handle {
    width: 40px; height: 4px;
    background: #334155;
    border-radius: 2px;
    margin: 0 auto 16px;
  }

  .pred-sheet-question {
    font-size: 0.90rem;
    font-weight: 500;
    color: #e2e8f0;
    margin-bottom: 10px;
    line-height: 1.5;
  }

  .pred-sheet-meta {
    display: flex;
    gap: 16px;
    font-size: 0.80rem;
    color: #64748b;
    margin-bottom: 16px;
  }
  .pred-sheet-meta strong { color: #38bdf8; }

  .pred-sheet-label {
    display: block;
    font-size: 0.78rem;
    color: #94a3b8;
    margin-bottom: 8px;
  }

  .pred-sheet-slider-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
  }

  .pred-sheet-slider {
    flex: 1;
    accent-color: #38bdf8;
    height: 4px;
    cursor: pointer;
  }

  .pred-sheet-number {
    width: 60px;
    padding: 6px 8px;
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 6px;
    color: #e2e8f0;
    font-size: 0.90rem;
    text-align: center;
  }
  .pred-sheet-number:focus { outline: none; border-color: #38bdf8; }

  .pred-sheet-hint {
    font-size: 0.76rem;
    color: #fb923c;
    min-height: 1.2em;
    margin-bottom: 16px;
    line-height: 1.4;
  }

  .pred-sheet-submit {
    display: block;
    width: 100%;
    padding: 12px;
    background: #2563eb;
    border: none;
    border-radius: 8px;
    color: #fff;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    margin-bottom: 10px;
  }
  .pred-sheet-submit:hover { background: #1d4ed8; }

  .pred-sheet-cancel {
    display: block;
    width: 100%;
    padding: 10px;
    background: none;
    border: 1px solid #334155;
    border-radius: 8px;
    color: #64748b;
    font-size: 0.88rem;
    cursor: pointer;
  }
  .pred-sheet-cancel:hover { background: #1e293b; color: #94a3b8; }

  /* ─ Bottom Nav ─ */
  body { padding-bottom: 64px; }

  .bottom-nav {
    display: flex;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    height: 56px;
    background: #111827;
    border-top: 1px solid #1e293b;
    z-index: 100;
    justify-content: space-around;
    align-items: center;
  }

  .bottom-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    color: #64748b;
    font-size: 0.62rem;
    text-decoration: none;
    padding: 6px 12px;
    flex: 1;
    justify-content: center;
  }

  .bottom-nav-item svg {
    width: 20px;
    height: 20px;
  }

  .bottom-nav-item.active { color: #38bdf8; }
  .bottom-nav-item:hover  { color: #94a3b8; text-decoration: none; }

}