/* ═══ MARKOV TRADING — GLOBAL MOBILE FIXES ═══
   Injected in every trading HTML.  Overrides desktop-only rules
   at viewport ≤768px.  Zero impact on desktop.
   ═══════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* ─── 1. BODY / VIEWPORT ───
     Many files set body { height:100vh; overflow:hidden } which is
     fine on desktop but traps the user on mobile.  We unlock it. */
  html, body {
    height: auto !important;
    overflow: auto !important;
    min-height: 100vh;
    -webkit-overflow-scrolling: touch;
  }

  /* ─── 2. OMEGA SPA (sidebar+topbar layout) ─── */
  .layout {
    display: flex;
    flex-direction: column;
    margin-top: 0;
    height: auto;
  }
  .topbar {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    height: auto;
    min-height: 44px;
    padding: 6px 10px;
    gap: 6px;
    flex-wrap: wrap;
    z-index: 100;
  }
  .burger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    min-height: 36px;
    font-size: 20px;
  }
  .brand {
    font-size: 12px;
    letter-spacing: 1px;
  }
  .tb-inp {
    width: 100px;
    font-size: 11px;
    padding: 3px 6px;
  }
  .btn {
    font-size: 10px;
    padding: 3px 8px;
    min-height: 32px;
  }
  .tb-status {
    font-size: 9px;
    flex: 1;
    text-align: left;
  }
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 220px;
    height: 100vh;
    z-index: 90;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    border-right: 1px solid var(--border);
  }
  .sidebar:not(.collapsed) {
    transform: translateX(0);
  }
  .sidebar.collapsed {
    transform: translateX(-100%);
  }
  .main {
    width: 100%;
    min-width: 0;
    overflow: visible;
  }
  .content {
    padding: 8px;
    overflow: visible;
  }
  .chart-wrap {
    min-height: 260px;
  }
  #tv-chart {
    height: 260px !important;
  }
  .sec-hd {
    flex-direction: column;
    gap: 6px;
    align-items: flex-start;
  }
  .sec-ctrl {
    flex-wrap: wrap;
    gap: 4px;
  }
  .sec-ctrl select,
  .sec-ctrl input {
    font-size: 11px;
    padding: 3px 5px;
  }
  .sec-title {
    font-size: 10px;
  }
  .p-hd {
    font-size: 11px;
  }
  .dl, .dr {
    font-size: 10px;
  }
  .big-num {
    font-size: 1.4rem;
  }
  .mtx {
    font-size: 9px;
    overflow-x: auto;
    display: block;
  }
  .mtx th, .mtx td {
    padding: 3px 4px;
    white-space: nowrap;
  }
  .prow {
    flex-direction: column;
    gap: 2px;
  }
  .prow-sub {
    font-size: 9px;
  }
  .mc-lbl, .mc-val {
    font-size: 9px;
  }
  .sbtn {
    font-size: 9px;
    padding: 2px 6px;
    min-height: 28px;
  }
  .pw {
    height: 4px;
  }

  /* ─── 3. BOOTSTRAP-BASED FILES (TradingView, Institutional) ─── */
  .chart-matrix-container {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
    height: auto !important;
    gap: 8px;
  }
  .main-chart-wrapper,
  .sub-chart-wrapper {
    height: 280px !important;
    min-height: 280px;
  }
  .sub-charts-vertical {
    grid-template-rows: auto !important;
    gap: 8px;
  }
  .terminal-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
    padding: 8px 10px !important;
  }
  .terminal-title {
    font-size: 14px !important;
    letter-spacing: 1px !important;
  }
  .manual-box {
    flex-wrap: wrap !important;
    width: 100%;
  }
  .manual-input, .tf-dropdown, .order-input {
    width: 100% !important;
    margin-bottom: 4px;
    font-size: 12px;
    min-height: 32px;
  }
  .btn-execute {
    width: 100%;
    min-height: 36px;
    font-size: 12px;
  }
  .asset-pill {
    font-size: 11px;
    padding: 5px 10px;
    min-height: 32px;
  }
  .timeframe-badge {
    font-size: 9px;
    padding: 3px 6px;
    top: 6px;
    left: 6px;
  }
  /* Bootstrap 4 flex override */
  .d-flex {
    flex-wrap: wrap !important;
  }
  .mr-4, .mr-3, .mr-2, .mr-1 {
    margin-right: 4px !important;
  }
  .ml-auto {
    margin-left: 0 !important;
  }

  /* ─── 4. INTRADAY FILES (Shannon + Markov) ─── */
  .header-bar {
    flex-direction: column;
    gap: 6px;
    padding: 8px 10px;
    align-items: stretch;
  }
  .header-title {
    justify-content: center;
  }
  .header-title .brand {
    font-size: 1rem;
  }
  .header-title .subtitle {
    font-size: 0.65rem;
  }
  .controls-group {
    flex-wrap: wrap;
    gap: 4px;
    justify-content: center;
  }
  .input-ticker {
    width: 100%;
    font-size: 0.75rem;
    padding: 6px 8px;
    min-height: 36px;
  }
  .btn-sync {
    width: 100%;
    min-height: 40px;
    font-size: 0.7rem;
  }

  /* ─── 5. GENERIC CHART FIXES ─── */
  .chart-wrap,
  .chart-wrapper,
  .lw-chart-wrap,
  #lw-chart {
    min-height: 240px;
    height: auto;
  }
  .chart-container {
    height: 280px !important;
  }
  /* TradingView widget wrapper */
  div[id^="tv_"] {
    min-height: 240px;
  }

  /* ─── 6. TABLES & DATA ─── */
  table, .table, .mtx {
    font-size: 9px;
    overflow-x: auto;
    display: block;
    max-width: 100%;
  }
  th, td {
    padding: 3px 4px;
    white-space: nowrap;
  }
  .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* ─── 7. PANELS & CARDS ─── */
  .panel, .card-like, .p-box, .data-box {
    padding: 8px;
    margin-bottom: 6px;
  }
  .panel-title, .sec-title, .p-hd {
    font-size: 10px;
    letter-spacing: 1px;
  }
  .grid-2, .grid-3, .grid-4 {
    grid-template-columns: 1fr !important;
  }
  .flex-row {
    flex-direction: column !important;
    gap: 6px;
  }

  /* ─── 8. TOUCH-FRIENDLY CONTROLS ─── */
  button, .btn, .btn-execute, .btn-sync, .burger, .nav-it, .asset-pill, .sbtn, .tab-btn {
    min-height: 44px;
    min-width: 44px;
    font-size: 11px;
  }
  input, select, textarea {
    font-size: 16px !important; /* prevents iOS zoom on focus */
    min-height: 36px;
  }
  select {
    padding: 4px 6px;
  }

  /* ─── 9. OVERLAYS / MODALS ─── */
  .overlay, .modal, .popup {
    width: 95vw;
    max-width: 95vw;
    left: 2.5vw;
    padding: 12px;
  }
  .loader-wrap {
    padding: 12px;
  }
  .loader-txt {
    font-size: 11px;
  }

  /* ─── 10. FOOTER / STATUS BAR ─── */
  .footer, .status-bar, .site-footer {
    flex-direction: column;
    gap: 4px;
    font-size: 9px;
    padding: 6px 8px;
  }
}

/* ─── EXTRA SMALL PHONES ≤ 480px ─── */
@media (max-width: 480px) {
  .brand { font-size: 10px; letter-spacing: 0; }
  .terminal-title { font-size: 12px !important; }
  .header-title .brand { font-size: 0.85rem; }
  .big-num { font-size: 1.2rem; }
  .mtx { font-size: 8px; }
  .main-chart-wrapper, .sub-chart-wrapper { height: 220px !important; min-height: 220px; }
  #tv-chart { height: 220px !important; }
  .chart-wrap { min-height: 220px; }
  .btn, .btn-sync, .btn-execute { font-size: 10px; padding: 4px 8px; }
  .sec-title { font-size: 9px; }
  .p-hd { font-size: 10px; }
  .dl { font-size: 9px; }
  .nav-it { font-size: 10px; padding: 8px 10px; }
  .nav-lbl { font-size: 8px; }
  .asset-pill { font-size: 10px; padding: 4px 8px; }
}