/* ui/assets/responsive.css
   Clean responsive rules for current WOI Scanner layout
   Consolidated mobile/tablet behavior
*/

/* -------------------------
   Base visibility helpers
------------------------- */
.desktop-only { display: block; }
.mobile-only  { display: none; }

/* -------------------------
   Tablet + mobile
------------------------- */
@media (max-width: 992px) {
  .desktop-only { display: none; }
  .mobile-only  { display: block; }

  .woi-shell{
    padding: 10px 10px 64px 10px !important;
  }

  /* Controls */
  .control{
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .control > div:last-child{
    width: 100% !important;
  }

  .control > div:last-child > div{
    display: flex !important;
    width: 100% !important;
    gap: 8px !important;
  }

  .control input,
  #sym-search,
  #wl-note{
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .control button,
  .btn,
  button,
  input,
  select{
    min-height: 40px !important;
    font-size: 15px !important;
  }

  /* Market overview */
  .mkt-grid{
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
    align-items: start !important;
  }

  .mkt-card{
    min-width: 0 !important;
    width: 100% !important;
    padding: 6px !important;
    border-radius: 10px !important;
  }

  .mkt-card-top{
    gap: 6px !important;
  }

  .mkt-hdr,
  .mkt-badge,
  .mkt-stat-k,
  .mkt-stat-v,
  .mkt-meta{
    font-size: 10px !important;
    line-height: 1.15 !important;
  }

  .mkt-stats{
    gap: 6px !important;
  }

  .mkt-fig{
    height: 84px !important;
  }

  /* Main chart + side panel */
  .scanner-chart-col{
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
  }

  .scanner-side-col{
    order: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .chartwrap{
    order: 2 !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  #side-screener-shell{
    position: relative !important;
    top: auto !important;
    width: 100% !important;
    padding: 8px !important;
    border-radius: 10px !important;
  }

  #side-screener-title{
    font-size: 13px !important;
    margin-bottom: 6px !important;
  }

  #side-screener-select{
    margin-bottom: 6px !important;
  }

  #side-screener-list{
    min-height: 0 !important;
    max-height: 180px !important;
    overflow-y: auto !important;
    padding-right: 2px !important;
  }

  #side-screener-list button{
    padding: 6px 8px !important;
    border-radius: 8px !important;
    margin-bottom: 5px !important;
  }

  #side-screener-page-meta{
    font-size: 11px !important;
  }

  #side-screener-prev,
  #side-screener-next{
    min-height: 30px !important;
    height: 30px !important;
    padding: 4px 10px !important;
    font-size: 12px !important;
  }

  /* Chart & overlays */
  .overlaybox{
    margin-bottom: 6px !important;
    padding: 8px 8px !important;
  }

  .overlays-checklist{
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 2px 6px !important;
    max-width: 100% !important;
  }

  .overlays-checklist label{
    font-size: 11px !important;
    line-height: 1 !important;
    margin: 0 !important;
    margin-right: 4px !important;
    margin-bottom: 0 !important;
    white-space: nowrap !important;
  }

  .overlays-checklist input[type="checkbox"]{
    margin-right: 3px !important;
    transform: scale(0.95) !important;
  }

  .fibo-row{
    margin-left: 0 !important;
    margin-top: 3px !important;
    gap: 3px !important;
  }

  .fibo-row button,
  #btn-fibo-a,
  #btn-fibo-b,
  #btn-fibo-clear{
    min-height: 20px !important;
    height: 20px !important;
    padding: 1px 5px !important;
    font-size: 10px !important;
    border-radius: 6px !important;
    line-height: 1 !important;
  }

  #fibo-status{
    font-size: 10px !important;
  }

  #chart{
    height: 420px !important;
  }

  #chart .modebar{
    transform: scale(0.88);
    transform-origin: top right;
  }

  #chart .legend text,
  #chart .legendttext,
  #chart g.legend text{
    font-size: 9px !important;
  }

  #chart g.legend rect,
  #chart g.legend path,
  #chart g.legend circle{
    transform-box: fill-box;
  }

  /* Content blocks */
  #analysis-wrap,
  #narrative-wrap,
  #details-howto,
  #explore-analysis-wrap,
  .watchlist-bar,
  .tablewrap{
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  .watchlist-bar{
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
  }

  .watchlist-bar > *{
    min-width: 0 !important;
  }

  .dash-table-container{
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* keep chart first on analysis pages */
  body[data-page*="analysis"] .scanner-side-col{
    order: 2 !important;
  }

  body[data-page*="analysis"] .chartwrap{
    order: 1 !important;
  }
}

/* -------------------------
   Small phones
------------------------- */
@media (max-width: 640px) {
  .woi-shell{
    padding: 8px 8px 56px 8px !important;
  }

  .mkt-grid{
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  .mkt-card{
    padding: 6px !important;
    border-radius: 10px !important;
  }

  .mkt-hdr,
  .mkt-badge,
  .mkt-stat-k,
  .mkt-stat-v,
  .mkt-meta{
    font-size: 9px !important;
  }

  .mkt-fig{
    height: 72px !important;
  }

  #side-screener-shell{
    padding: 8px !important;
  }

  #side-screener-list{
    max-height: 150px !important;
  }

  #chart{
    height: 460px !important;
  }

  .fibo-row button,
  #btn-fibo-a,
  #btn-fibo-b,
  #btn-fibo-clear{
    min-height: 18px !important;
    height: 18px !important;
    padding: 1px 4px !important;
    font-size: 9px !important;
    border-radius: 5px !important;
  }

  #chart .legend text,
  #chart .legendttext,
  #chart g.legend text{
    font-size: 8px !important;
  }
}


/* =========================================
   MOBILE SCREENER SLOT
   ========================================= */
@media (max-width: 768px) {
  #mobile-screener-slot {
    display: block !important;
    margin-top: 10px !important;
    margin-bottom: 10px !important;
  }

  #mobile-screener-slot #side-screener-shell {
    position: relative !important;
    top: auto !important;
    width: 100% !important;
    min-width: 0 !important;
  }
}