/* KALILOOK Android desktop-table mode v3.
   Phones keep the desktop data-table model instead of cardifying rows.
   Desktop/PC behavior is untouched because every rule is scoped to <= 850px. */
@media (max-width:850px){
  .wrap{
    display:block!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-inline:contain;
    touch-action:pan-x pan-y;
    scrollbar-width:thin;
    border:1px solid var(--line)!important;
    border-radius:10px!important;
    background:#0c121c!important;
    box-shadow:none!important;
  }

  .wrap>table,.allMetrics .wrap>table{
    display:table!important;
    width:auto!important;
    min-width:1120px!important;
    table-layout:auto!important;
    border-collapse:collapse!important;
    border-spacing:0!important;
  }
  .wrap thead{display:table-header-group!important}
  .wrap tbody{display:table-row-group!important;width:auto!important}
  .wrap tr,.wrap tr.featured,.wrap .emptyRow{
    position:static!important;
    display:table-row!important;
    width:auto!important;
    padding:0!important;
    margin:0!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    overflow:visible!important;
  }

  .wrap th{
    display:table-cell!important;
    padding:9px 8px!important;
    border-radius:0!important;
    background:#141d2b!important;
    font-size:9px!important;
    line-height:1.25!important;
    white-space:nowrap!important;
    vertical-align:middle!important;
  }
  .wrap td,.wrap td[data-label],.wrap .emptyRow td{
    display:table-cell!important;
    grid-column:auto!important;
    padding:10px 8px!important;
    margin:0!important;
    border:0!important;
    border-bottom:1px solid #1d293a!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
    font-size:11px!important;
    line-height:1.35!important;
    vertical-align:middle!important;
  }
  .wrap tr:last-child td{border-bottom:0!important}
  .wrap tr.featured td{background:#101c2d!important}
  .wrap tr:hover td{background:#121e2f!important}
  .wrap td:before,.wrap td[data-label]:before{display:none!important;content:none!important}

  /* Keep rank + token identity in sight while the user swipes through metrics. */
  .wrap th:first-child,
  .wrap td:first-child,
  .wrap td[data-label="#"]{
    position:sticky!important;
    left:0!important;
    z-index:5!important;
    width:36px!important;
    min-width:36px!important;
    max-width:36px!important;
    padding-left:7px!important;
    padding-right:7px!important;
    text-align:left!important;
    background:#0f1928!important;
  }
  .wrap th:first-child{z-index:7!important;background:#141d2b!important}
  .wrap tr.featured td:first-child{background:#15253b!important}

  .wrap th:nth-child(2),
  .wrap td:nth-child(2),
  .wrap td[data-label="Token"]{
    position:sticky!important;
    left:36px!important;
    z-index:4!important;
    width:210px!important;
    min-width:210px!important;
    max-width:210px!important;
    padding-left:8px!important;
    padding-right:8px!important;
    background:#0f1928!important;
    box-shadow:8px 0 12px -12px #000;
  }
  .wrap th:nth-child(2){z-index:6!important;background:#141d2b!important}
  .wrap tr.featured td:nth-child(2){background:#15253b!important}

  /* Desktop-like density for the remaining metrics. */
  .wrap th:nth-child(n+3),.wrap td:nth-child(n+3){min-width:82px!important}
  .wrap th:nth-child(3),.wrap td:nth-child(3){min-width:104px!important}
  .wrap th:nth-child(4),.wrap td:nth-child(4){min-width:96px!important}
  .wrap th:nth-child(5),.wrap td:nth-child(5){min-width:102px!important}
  .wrap th:last-child,.wrap td:last-child{min-width:150px!important}

  .wrap .num{font-size:10px!important;color:#7f92ad!important}
  .wrap .token{min-width:0!important;width:194px!important;max-width:194px!important;gap:8px!important;align-items:center!important}
  .wrap .avatar,.wrap .spotlightAvatar{width:30px!important;height:30px!important;min-width:30px!important;flex:0 0 30px!important}
  .wrap .avatar img,.wrap .spotlightAvatar img{width:100%!important;height:100%!important;object-fit:cover!important;object-position:center!important}
  .wrap .name{font-size:12px!important;line-height:1.25!important}
  .wrap .tag{font-size:6px!important;padding:2px 3px!important}
  .wrap .sub{display:block!important;max-width:154px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;font-size:9px!important;line-height:1.35!important;margin-top:2px!important}
  .wrap .fresh{font-size:8px!important;line-height:1.35!important;margin-top:2px!important;white-space:normal!important}
  .wrap .value{white-space:nowrap!important}
  .wrap .sig{font-size:9px!important;line-height:16px!important;padding:4px 7px!important;min-height:28px!important}
  .wrap .actionsCompact{display:flex!important;flex-wrap:nowrap!important;gap:5px!important;white-space:nowrap!important}
  .wrap .small,.wrap td[data-label="Actions"] .small{min-height:34px!important;padding:5px 8px!important;font-size:9px!important}
  .wrap .caadd{display:flex!important;width:auto!important;min-width:0!important;gap:5px!important;align-items:center!important}
  .wrap .caadd input{width:190px!important;min-width:190px!important;height:40px!important;font-size:10px!important}

  /* Touch ergonomics around the desktop-like table. */
  .toolbar .btn,.watchheadActions .btn,.workspaceTools .btn,.listTab{
    min-height:40px!important;
  }
  .toolbar select,.search input{min-height:42px!important}
  .workspaceBar{overflow-x:auto!important;-webkit-overflow-scrolling:touch!important;padding-bottom:2px}
  .workspaceTools{flex-shrink:0!important}

  /* Preserve the normal desktop visibility rules on Android. */
  body:not(.allMetrics) .wrap :is(th,td):is(:nth-child(8),:nth-child(10),:nth-child(11),:nth-child(14),:nth-child(17),:nth-child(18),:nth-child(20)){
    display:none!important;
  }

  .tableNote{margin-top:12px!important}
}

@media (max-width:480px){
  .wrap th:first-child,
  .wrap td:first-child,
  .wrap td[data-label="#"]{
    width:34px!important;
    min-width:34px!important;
    max-width:34px!important;
  }
  .wrap th:nth-child(2),
  .wrap td:nth-child(2),
  .wrap td[data-label="Token"]{
    left:34px!important;
    width:188px!important;
    min-width:188px!important;
    max-width:188px!important;
  }
  .wrap .token{width:172px!important;max-width:172px!important}
  .wrap .sub{max-width:132px!important}
}