/* ==========================================================================
   AXIONMESK — MERCADOS mobile: tabela vira LISTA COMPACTA
   Ordem real das colunas:
     1 star | 2 moeda | 3 preço | 4 variação | 5 máx/mín
     6 market cap | 7 volume | 8 oferta | 9 sparkline
   ========================================================================== */

@media (max-width: 900px) {

  .mk-table {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
    padding: 0 12px !important;
    margin: 0 !important;
  }

  .mk-table table,
  .mk-table tbody {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .mk-table thead { display: none !important; }

  .mk-table tr,
  .mk-table .coin-row {
    display: grid !important;
    grid-template-columns: 1fr auto auto !important;
    grid-template-areas:
      "ativo preco chg"
      "ativo mcap  vol" !important;
    align-items: center !important;
    column-gap: 10px !important;
    row-gap: 3px !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 12px 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, .055) !important;
    border-radius: 0 !important;
    box-sizing: border-box !important;
    position: relative !important;
    cursor: pointer;
  }

  .mk-table tr:active {
    background: rgba(255, 255, 255, .03) !important;
  }

  .mk-table td {
    display: block !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    padding: 0 !important;
    border: 0 !important;
    font-size: 12.5px !important;
    line-height: 1.35 !important;
    box-sizing: border-box !important;
    background: transparent !important;
  }

  .mk-table td::before { content: none !important; display: none !important; }

  /* 1) star */
  .mk-table td:nth-child(1) {
    position: absolute !important;
    left: 0 !important;
    top: 13px !important;
    width: 20px !important;
    padding: 0 !important;
    z-index: 2 !important;
  }

  .mk-table .star {
    width: 20px !important;
    height: 20px !important;
    padding: 0 !important;
    display: grid !important;
    place-items: center !important;
    opacity: .55;
  }
  .mk-table .star svg { width: 13px !important; height: 13px !important; }

  /* 2) moeda */
  .mk-table td:nth-child(2) {
    grid-area: ativo !important;
    text-align: left !important;
    padding-left: 24px !important;
    min-width: 0 !important;
    align-self: center !important;
  }

  /* 3) preço */
  .mk-table td:nth-child(3) {
    grid-area: preco !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    color: #ECEFF3 !important;
    white-space: nowrap !important;
    text-align: right !important;
  }

  /* 4) variação */
  .mk-table td:nth-child(4) {
    grid-area: chg !important;
    text-align: right !important;
    min-width: 62px !important;
  }

  /* 5) máx/mín oculta */
  .mk-table td:nth-child(5) { display: none !important; }

  /* 6) market cap */
  .mk-table td:nth-child(6) {
    grid-area: mcap !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #8996AA !important;
    white-space: nowrap !important;
    text-align: right !important;
  }

  /* 7) volume */
  .mk-table td:nth-child(7) {
    grid-area: vol !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #8996AA !important;
    white-space: nowrap !important;
    text-align: right !important;
  }

  /* 8) oferta, 9) sparkline ocultas */
  .mk-table td:nth-child(8),
  .mk-table td:nth-child(9) { display: none !important; }

  /* bloco do ativo */
  .mk-table .coin-cell {
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
    min-width: 0 !important;
  }

  .mk-table .coin-cell > div {
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 1px !important;
  }

  .mk-table .coin-cell svg,
  .mk-table .coin-cell .coin-badge {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    flex: 0 0 30px !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    display: block !important;
  }

  .mk-table .coin-name {
    font-size: 13.5px !important;
    font-weight: 700 !important;
    color: #ECEFF3 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .mk-table .coin-symbol {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #8996AA !important;
    line-height: 1.2 !important;
  }

  /* pílula de variação */
  .mk-table .chg-pill {
    display: inline-block !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    padding: 4px 8px !important;
    border-radius: 7px !important;
    white-space: nowrap !important;
    min-width: 62px !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }

  .mk-table .chg-up {
    color: #16C784 !important;
    background: rgba(22, 199, 132, .13) !important;
  }
  .mk-table .chg-down {
    color: #F6465D !important;
    background: rgba(246, 70, 93, .13) !important;
  }

  .mk-table tr:last-child { border-bottom: 0 !important; }
}

@media (max-width: 380px) {
  .mk-table { padding: 0 10px !important; }
  .mk-table td:nth-child(3) { font-size: 13px !important; }
  .mk-table td:nth-child(4) { min-width: 56px !important; }
  .mk-table .chg-pill { font-size: 11.5px !important; padding: 3px 6px !important; min-width: 56px !important; }
  .mk-table td:nth-child(6),
  .mk-table td:nth-child(7) { font-size: 10.5px !important; }
  .mk-table .coin-cell svg,
  .mk-table .coin-cell .coin-badge {
    width: 27px !important; height: 27px !important; min-width: 27px !important; flex-basis: 27px !important;
  }
  .mk-table .coin-name { font-size: 12.5px !important; }
}