/* File: css/mobile.css
   Purpose: Responsive overrides + pair list toggle for NikaTS V2 UI.
   Notes: All responsive rules are isolated here. No existing CSS is modified.
*/

/* ═══════════════════════════════════════════════════════════════════
   PAIR LIST — Floating panel (replaces old sidebar toggle)
   The pair list is now a floating overlay widget that opens/closes
   without affecting the layout of other page elements.
   ═══════════════════════════════════════════════════════════════════ */

/* Hide mobile-only elements on desktop */
.mobile-bottom-nav {
  display: none;
}

/* ═══════════════════════════════════════════════════════════════════
   MOBILE: Bottom Nav + Header
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  .app-shell {
    grid-template-rows: auto 1fr 0;
  }

  .header {
    padding: 0 var(--space-3);
    height: 44px;
    min-height: 44px;
  }

  .header__logo img {
    height: 22px;
  }

  .header__nav {
    display: none;
  }

  .mobile-bottom-nav {
    display: flex !important;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 56px;
    background: var(--bg-surface);
    border-top: 1px solid var(--border-subtle);
    z-index: var(--z-sticky);
    align-items: stretch;
    justify-content: space-around;
    padding: 0;
    padding-bottom: env(safe-area-inset-bottom, 0);
  }

  .mobile-bottom-nav a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    flex: 1;
    color: var(--text-muted);
    text-decoration: none;
    font-size: 9px;
    font-weight: var(--weight-medium);
    transition: color var(--transition-fast);
    padding: 4px 0;
    min-width: 0;
  }

  .mobile-bottom-nav a .nav-icon {
    width: 20px;
    height: 20px;
    opacity: 0.6;
  }

  .mobile-bottom-nav a.active {
    color: var(--brand-primary);
  }

  .mobile-bottom-nav a.active .nav-icon {
    opacity: 1;
  }

  .app-body {
    height: calc(100vh - 44px - 56px);
  }

  .status-bar {
    display: none;
  }

  .header__actions .pill {
    font-size: 9px;
    padding: 2px 6px;
  }

  .flow-selector__select {
    font-size: 9px;
    padding: 2px 18px 2px 6px;
    background-position: right 5px center;
  }

  .flow-selector__status {
    min-width: 14px;
    height: 14px;
    font-size: 9px;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   MOBILE: Floating pair list + Content
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* Content area fills remaining space */
  #insightContent,
  .markets-chart-area {
    flex: 1 1 0 !important;
    min-height: 0 !important;
  }

  /* Floating panel: wider on mobile, full-height */
  .pair-float-panel {
    left: var(--space-2);
    top: calc(17px + var(--space-2) + var(--space-2));
    width: calc(100% - var(--space-4));
    max-height: calc(100% - 50px);
  }
}

/* ═══════════════════════════════════════════════════════════════════
   INSIGHT PAGE — Mobile
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* Decision Topbar: compact layout */
  .insight-decision-topbar {
    position: relative;
    flex-direction: column;
    padding: var(--space-2) 0;
    gap: var(--space-1);
  }

  .insight-top-left {
    width: 100%;
  }

  .insight-top-symbol {
    font-size: var(--text-base);
  }

  .insight-top-meta {
    font-size: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .insight-top-market {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    font-size: 11px;
  }

  .insight-top-market span {
    white-space: nowrap;
  }

  /* Hide 24h sparkline on mobile */
  .insight-top-spark {
    display: none;
  }

  /* Action buttons: absolute top-right */
  .insight-top-right {
    position: absolute;
    right: var(--space-3);
    top: var(--space-2);
  }

  /* Sticky head + scroll area */
  .insight-sticky-head {
    padding: var(--space-2) var(--space-2) 0;
    flex: 0 0 auto;
  }

  .insight-scroll-area {
    padding: 0 var(--space-2) var(--space-2);
    flex: 1 1 0 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
  }

  /* ── Alignment strip: horizontal scroll, hide state text ── */
  .insight-alignment-strip {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    gap: 4px;
    padding-bottom: var(--space-1);
    scrollbar-width: none;
  }
  .insight-alignment-strip::-webkit-scrollbar { display: none; }

  .insight-align-chip {
    flex: 0 0 auto;
    min-width: 40px;
    padding: 4px 8px;
    font-size: 10px;
  }

  /* Hide verbose state text — the dot color already shows alignment */
  .insight-align-chip .state {
    display: none;
  }

  /* ── MTF grid: 2 columns ── */
  .insight-mtf-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px;
  }

  .insight-mtf-card {
    padding: 10px;
  }

  .insight-mtf-card-head {
    margin-bottom: 4px;
  }

  .insight-mtf-card-head .tf {
    font-size: 12px;
  }

  .insight-mtf-card-head .role {
    font-size: 8px;
    padding: 1px 4px;
  }

  .insight-card-rank-badge {
    font-size: 9px;
    padding: 1px 4px;
  }

  .insight-card-state {
    font-size: 9px;
    padding: 1px 6px;
    margin-bottom: 4px;
  }

  .insight-kv {
    font-size: 10px;
    gap: 4px;
  }

  .insight-kv .k {
    font-size: 9px;
  }

  .insight-kv .v {
    font-size: 10px;
  }

  .insight-card-bar-title {
    font-size: 8px;
    margin-top: 4px;
  }

  .insight-card-bar-label {
    font-size: 9px;
  }

  /* Detail drawer: full width */
  .insight-mtf-layout:has(.insight-detail-drawer:not(.hidden)) {
    grid-template-columns: 1fr !important;
  }

  .insight-detail-drawer {
    max-height: 60vh;
    overflow-y: auto;
  }

  /* Filter bar: horizontal scroll */
  .insight-filter-bar {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    padding: var(--space-1) var(--space-2);
    gap: var(--space-2);
    scrollbar-width: none;
  }
  .insight-filter-bar::-webkit-scrollbar { display: none; }

  .insight-filter-bar label {
    white-space: nowrap;
    flex-shrink: 0;
  }
}

/* Very small screens: single column cards */
@media (max-width: 380px) {
  .insight-mtf-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   MARKETS PAGE — Mobile
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* KPI strip: horizontal scroll */
  .markets-kpi-strip {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: var(--space-2);
    padding-bottom: var(--space-1);
    scrollbar-width: none;
  }
  .markets-kpi-strip::-webkit-scrollbar { display: none; }

  .kpi-mini {
    flex: 0 0 auto;
    min-width: 90px;
  }

  .markets-chart-header {
    flex-wrap: wrap;
    gap: var(--space-2);
  }

  .markets-chart-symbol {
    font-size: var(--text-sm);
  }

  .markets-chart-container {
    min-height: 200px;
    flex: 1 1 0;
  }

  .markets-chart-area {
    padding: var(--space-2) !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   OPPORTUNITIES PAGE — Mobile
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  .opport-split {
    grid-template-columns: 1fr !important;
  }

  .opport-toolbar {
    flex-direction: column;
    gap: var(--space-2);
    align-items: stretch;
  }

  .opport-toolbar .input {
    max-width: 100% !important;
    width: 100%;
  }

  .opport-toolbar select.input {
    font-size: 12px;
  }

  .opport-filters {
    gap: 4px;
  }

  .opport-filter-btn {
    padding: 3px 8px;
    font-size: 10px;
  }

  .opport-final-section .card,
  .opport-candidates-section .card {
    padding: var(--space-2);
    overflow: hidden;
  }

  .overflow-x-auto,
  .opport-final-section .overflow-x-auto,
  .opport-candidates-section .overflow-x-auto {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    margin: 0 calc(-1 * var(--space-2));
    padding: 0 var(--space-2);
  }

  .opport-final-section .data-table,
  .opport-candidates-section .data-table {
    min-width: 580px;
    font-size: 11px;
  }

  .opport-final-section .data-table th,
  .opport-final-section .data-table td,
  .opport-candidates-section .data-table th,
  .opport-candidates-section .data-table td {
    padding: 6px 8px;
    font-size: 11px;
  }

  .opport-auto-toggle {
    font-size: var(--text-xs);
  }

  #opportRunInfo {
    font-size: 10px;
    word-break: break-all;
  }

  .opport-split {
    padding: 0;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   WATCH PAGE — Mobile
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .monitor-split {
    grid-template-columns: 1fr !important;
  }

  .monitor-preset-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .monitor-results-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .monitor-card {
    padding: var(--space-3);
  }
}

/* ═══════════════════════════════════════════════════════════════════
   PORTFOLIO PAGE — Mobile
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .kpi-grid--3,
  .kpi-grid--4 {
    grid-template-columns: 1fr 1fr !important;
  }

  .kpi-card {
    padding: var(--space-3);
  }

  .kpi-card__value {
    font-size: var(--text-lg);
  }

  .layout-cols--60-40 {
    grid-template-columns: 1fr !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   TABLES — Horizontal scroll on mobile
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .data-table {
    min-width: 500px;
  }

  .data-table th,
  .data-table td {
    padding: var(--space-1) var(--space-2);
    font-size: var(--text-xs);
  }
}

/* ═══════════════════════════════════════════════════════════════════
   MODALS — Full-screen on mobile
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .modal-card {
    width: 100vw;
    max-width: 100vw;
    height: 100vh;
    max-height: 100vh;
    border-radius: 0;
    margin: 0;
  }

  .modal-card--wide {
    width: 100vw;
    max-width: 100vw;
  }

  .modal-card--tall {
    height: 100vh;
    max-height: 100vh;
  }

  .modal-dialog {
    width: 100vw;
    max-width: 100vw;
    height: 100vh;
    max-height: 100vh;
    border-radius: 0;
  }

  .modal-dialog--lg,
  .modal-dialog--xl {
    width: 100vw;
    max-width: 100vw;
  }

  .tf-modal-columns {
    grid-template-columns: 1fr !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   GENERAL RESPONSIVE — Spacing, typography, touch targets
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .page-topbar {
    padding: 0 var(--space-3);
    margin-bottom: var(--space-2);
    flex-wrap: wrap;
    gap: var(--space-2);
  }

  .page-topbar:first-child {
    padding-top: var(--space-2);
  }

  .page-title {
    font-size: var(--text-sm);
  }

  .page-topbar__actions {
    width: 100%;
    justify-content: flex-end;
  }

  .main {
    padding: 0;
  }

  .btn {
    min-height: 36px;
    padding: var(--space-2) var(--space-3);
  }

  .btn--sm {
    min-height: 30px;
  }

  .btn--icon {
    width: 36px;
    height: 36px;
  }

  .input {
    min-height: 38px;
    font-size: 16px; /* prevent iOS zoom */
  }

  select.input {
    font-size: 14px;
  }

  .pill-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
    flex-wrap: nowrap;
  }

  .toast-container {
    left: var(--space-3);
    right: var(--space-3);
    bottom: calc(56px + var(--space-3));
  }

  .toast {
    max-width: 100%;
  }

  .pair-row {
    padding: 6px var(--space-2);
    min-height: 38px;
  }

  .pair-search-wrap input {
    min-height: 34px;
    font-size: 14px;
  }

  .pair-chip-row {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .pair-chip-row::-webkit-scrollbar { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   SETTINGS PAGE — Mobile
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .settings-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   CHART PAGE — Mobile
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .chart-controls {
    flex-wrap: wrap;
    gap: var(--space-2);
  }
}

/* ═══════════════════════════════════════════════════════════════════
   LANDSCAPE phone
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) and (orientation: landscape) {
  .insight-mtf-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}