/* TradingHub v421 — mobile derivatives data presentation.
   Scope: the four public derivatives workspaces only, <=760px.
   Desktop is intentionally untouched. Tables become compact data rows instead
   of desktop tables hidden behind horizontal scrolling. */
@media (max-width:760px){
  /* Long market lists become one native selector on phones. The original
     buttons stay in the DOM as the canonical controller and desktop UI. */
  .deriv-mobile-market-select{
    display:none;
    width:100%;
    height:29px;
    min-width:0;
    border:1px solid var(--line-soft);
    border-radius:4px;
    background:var(--void);
    color:var(--ink);
    padding:0 28px 0 9px;
    font:600 9px var(--font-mono);
    color-scheme:dark;
  }
  .deriv-toolbar .deriv-control:first-child.deriv-mobile-select-ready .deriv-mobile-market-select{display:block}
  .deriv-toolbar .deriv-control:first-child.deriv-mobile-select-ready>.deriv-seg{display:none!important}
  /* Funding / OI / liquidation tables: no horizontal viewport inside the page. */
  .deriv-live[data-deriv-view="funding"] .deriv-table-wrap,
  .deriv-live[data-deriv-view="oi"] .deriv-table-wrap,
  .deriv-live[data-deriv-view="liquidations"] .deriv-table-wrap{
    width:100%;
    max-width:100%;
    overflow-x:hidden!important;
    overscroll-behavior-x:none;
    -webkit-overflow-scrolling:auto;
  }
  .deriv-live[data-deriv-view="liquidations"] .deriv-table-wrap{
    overflow-y:auto!important;
    overscroll-behavior-y:contain;
  }
  .deriv-live[data-deriv-view="funding"] .deriv-table,
  .deriv-live[data-deriv-view="oi"] .deriv-table,
  .deriv-live[data-deriv-view="liquidations"] .deriv-table{
    display:block;
    width:100%!important;
    min-width:0!important;
    table-layout:fixed;
  }

  /* Keep semantic headers in the DOM for assistive technology, but do not spend
     a full mobile row on a desktop-style heading strip. */
  .deriv-live[data-deriv-view="funding"] .deriv-table thead,
  .deriv-live[data-deriv-view="oi"] .deriv-table thead,
  .deriv-live[data-deriv-view="liquidations"] .deriv-table thead{
    position:absolute!important;
    width:1px!important;
    height:1px!important;
    margin:-1px!important;
    padding:0!important;
    overflow:hidden!important;
    clip:rect(0 0 0 0)!important;
    clip-path:inset(50%)!important;
    white-space:nowrap!important;
    border:0!important;
  }
  .deriv-live[data-deriv-view="funding"] .deriv-table tbody,
  .deriv-live[data-deriv-view="oi"] .deriv-table tbody,
  .deriv-live[data-deriv-view="liquidations"] .deriv-table tbody{
    display:block;
    width:100%;
  }
  .deriv-live[data-deriv-view="funding"] .deriv-table tbody tr,
  .deriv-live[data-deriv-view="oi"] .deriv-table tbody tr,
  .deriv-live[data-deriv-view="liquidations"] .deriv-table tbody tr{
    display:grid;
    width:100%;
    box-sizing:border-box;
    gap:3px 8px;
    padding:6px 9px;
    border-bottom:1px solid color-mix(in srgb,var(--line-soft) 72%,transparent);
    background:transparent;
  }
  .deriv-live[data-deriv-view="funding"] .deriv-table tbody tr{grid-template-columns:repeat(3,minmax(0,1fr))}
  .deriv-live[data-deriv-view="oi"] .deriv-table tbody tr{grid-template-columns:repeat(4,minmax(0,1fr))}
  .deriv-live[data-deriv-view="liquidations"] .deriv-table tbody tr{grid-template-columns:repeat(3,minmax(0,1fr))}

  .deriv-live[data-deriv-view] .deriv-table tbody td{
    position:static!important;
    z-index:auto!important;
    min-width:0;
    min-height:22px;
    padding:2px 0!important;
    border:0!important;
    background:transparent!important;
    color:var(--ink);
    text-align:left!important;
    white-space:nowrap!important;
    overflow:hidden;
    text-overflow:ellipsis;
    font-size:9.5px;
    line-height:1.15;
  }
  .deriv-live[data-deriv-view] .deriv-table tbody td::before{
    content:attr(data-label);
    display:block;
    min-height:8px;
    margin-bottom:2px;
    overflow:hidden;
    color:var(--mute-dim);
    font:600 6.5px/1 var(--font-mono);
    letter-spacing:.035em;
    text-transform:uppercase;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .deriv-live[data-deriv-view] .deriv-table tbody td:not([data-label])::before{display:none}

  /* Loading/waiting/error rows are messages, not six fake metric cells. */
  .deriv-live[data-deriv-view] .deriv-table tbody td[colspan]{
    grid-column:1/-1!important;
    min-height:36px;
    display:flex;
    align-items:center;
    padding:7px 0!important;
    white-space:normal!important;
    overflow:visible;
    text-overflow:clip;
    line-height:1.35;
  }
  .deriv-live[data-deriv-view="funding"] .deriv-table tbody td:first-child:not(:only-child)+td[colspan]{
    grid-column:2/-1!important;
    min-height:26px;
    padding:2px 0!important;
  }

  /* Strong mobile anchors make rows scannable without card borders. */
  .deriv-live[data-deriv-view="funding"] .deriv-table tbody td:first-child,
  .deriv-live[data-deriv-view="oi"] .deriv-table tbody td:first-child{
    color:var(--ink);
    font-weight:700;
  }
  .deriv-live[data-deriv-view="oi"] .deriv-table tbody td:nth-child(3),
  .deriv-live[data-deriv-view="liquidations"] .deriv-table tbody td:nth-child(6){font-weight:700}
  .deriv-live[data-deriv-view="liquidations"] .deriv-table tbody td:nth-child(3){color:var(--ink);font-weight:700}

  /* Five live-feed states fit at once; this should not be another horizontal scroller. */
  .deriv-feed-health{
    display:grid!important;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:3px!important;
    width:100%;
    max-width:100%;
    overflow:visible!important;
    padding:1px 0 2px;
  }
  .deriv-feed-pill{
    width:100%;
    min-width:0;
    justify-content:center;
    gap:3px;
    padding:0 3px!important;
  }
  .deriv-feed-pill>span{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  /* Seven funding venues are visible as a compact 4+3 grid instead of a
     horizontally hidden legend. Toggle behaviour is unchanged. */
  .deriv-history__legend{
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:4px!important;
    width:100%;
    overflow:visible!important;
    padding-bottom:0!important;
  }
  .deriv-history-toggle{
    width:100%;
    min-width:0;
    justify-content:center;
    gap:4px;
    padding:3px 4px!important;
  }
  .deriv-history-toggle span{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  /* No horizontal scrollbar should be painted for the transformed data lists. */
  .deriv-live[data-deriv-view="funding"] .deriv-table-wrap::-webkit-scrollbar:horizontal,
  .deriv-live[data-deriv-view="oi"] .deriv-table-wrap::-webkit-scrollbar:horizontal,
  .deriv-live[data-deriv-view="liquidations"] .deriv-table-wrap::-webkit-scrollbar:horizontal{height:0}
}

@media (max-width:380px){
  /* Very narrow phones trade one extra row for legibility. */
  .deriv-live[data-deriv-view="oi"] .deriv-table tbody tr{grid-template-columns:repeat(3,minmax(0,1fr))}
  .deriv-live[data-deriv-view] .deriv-table tbody tr{column-gap:6px}
}