/*
  PlayServs Painel Administrador — mobile em tabelas (Dispositivos, Revendas, DNS)
  Somente a apresentação das listagens. Não altera ações, filtros, APIs ou dados.
  CSS de sobreposição, carregado DEPOIS dos estilos de produção.
*/
@media screen and (max-width: 760px) {
  /* As linhas originais continuam com os handlers e permissões do painel. */
  #page .devices-desktop-list,
  #page .devices-desktop-list,
  #page .reseller-desktop-list,
  #page .reseller-desktop-list,
  #page .dns-desktop-list,
  #page .dns-desktop-list {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
  }
  #page .devices-mobile-list,
  #page .devices-mobile-list,
  #page .reseller-mobile-list,
  #page .reseller-mobile-list,
  #page .dns-mobile-list,
  #page .dns-mobile-list {
    display: none !important;
  }

  /* Restaurar os painéis em torno das tabelas sem alterar os cards de resumo. */
  #page .devices-clean-panel,
  #page .devices-clean-panel,
  #page .reseller-clean-panel,
  #page .dns-main-panel,
  #page .dns-main-panel {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    border: 1px solid var(--line) !important;
    border-radius: 12px !important;
    background: var(--surface, var(--panel)) !important;
  }
  #page .devices-desktop-list::before,
  #page .reseller-desktop-list::before,
  #page .dns-desktop-list::before {
    content: "↔  Deslize a tabela para ver outras colunas e ações";
    display: block;
    width: max-content;
    max-width: 100%;
    padding: 10px 12px 7px;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--muted);
  }

  /* O pai é rolável, não a página toda. */
  #page .devices-desktop-list,
  #page .reseller-desktop-list .table-wrap,
  #page .dns-desktop-list .table-wrap {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;
    scrollbar-width: thin;
    scrollbar-color: var(--purple, #8d4dff) transparent;
  }
  #page .devices-desktop-list .table-wrap,
  #page .reseller-desktop-list,
  #page .dns-desktop-list {
    min-width: 0 !important;
    max-width: 100% !important;
  }
  /* Dispositivos possui as classes table-wrap e devices-desktop-list no mesmo elemento. */
  #page .devices-desktop-list.table-wrap,
  #page .dns-desktop-list.table-wrap {
    overflow-x: auto !important;
    overflow-y: hidden !important;
  }
  #page .devices-desktop-list::-webkit-scrollbar,
  #page .reseller-desktop-list .table-wrap::-webkit-scrollbar,
  #page .dns-desktop-list .table-wrap::-webkit-scrollbar { height: 6px; }
  #page .devices-desktop-list::-webkit-scrollbar-thumb,
  #page .reseller-desktop-list .table-wrap::-webkit-scrollbar-thumb,
  #page .dns-desktop-list .table-wrap::-webkit-scrollbar-thumb {
    background: rgba(141, 77, 255, .55); border-radius: 6px;
  }

  /* Desfaz exclusivamente dentro dessas três listagens a regra antiga
     que converte TODAS as tabelas para cartões no celular. */
  #page :is(.devices-desktop-list, .reseller-desktop-list, .dns-desktop-list) table.table {
    display: table !important;
    width: max-content !important;
    max-width: none !important;
    border-collapse: collapse !important;
    border-spacing: 0 !important;
    table-layout: auto !important;
    margin: 0 !important;
  }
  #page .devices-desktop-list .devices-table { min-width: 900px !important; }
  #page .reseller-desktop-list .reseller-clean-table { min-width: 1030px !important; }
  #page .dns-desktop-list .dns-unified-table { min-width: 1000px !important; }

  #page :is(.devices-desktop-list, .reseller-desktop-list, .dns-desktop-list) table.table thead {
    display: table-header-group !important;
  }
  #page :is(.devices-desktop-list, .reseller-desktop-list, .dns-desktop-list) table.table tbody {
    display: table-row-group !important;
    padding: 0 !important;
    gap: 0 !important;
    background: transparent !important;
  }
  #page :is(.devices-desktop-list, .reseller-desktop-list, .dns-desktop-list) table.table tr {
    display: table-row !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    overflow: visible !important;
    width: auto !important;
  }
  #page :is(.devices-desktop-list, .reseller-desktop-list, .dns-desktop-list) table.table th,
  #page :is(.devices-desktop-list, .reseller-desktop-list, .dns-desktop-list) table.table td {
    display: table-cell !important;
    width: auto !important;
    height: auto !important;
    min-width: 0;
    padding: 11px 10px !important;
    border-bottom: 1px solid var(--line) !important;
    border-radius: 0 !important;
    vertical-align: middle !important;
    line-height: 1.35 !important;
    font-size: 11px !important;
    text-align: left;
    white-space: nowrap !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    background: transparent;
    grid-template-columns: none !important;
    gap: 0 !important;
  }
  #page :is(.devices-desktop-list, .reseller-desktop-list, .dns-desktop-list) table.table th {
    font-size: 10px !important;
    font-weight: 850 !important;
    text-transform: uppercase;
    letter-spacing: .045em !important;
    color: var(--muted);
    background: var(--surface, var(--panel)) !important;
  }
  #page :is(.devices-desktop-list, .reseller-desktop-list, .dns-desktop-list) table.table td::before {
    content: none !important;
    display: none !important;
  }
  #page :is(.devices-desktop-list, .reseller-desktop-list, .dns-desktop-list) table.table td[colspan] {
    display: table-cell !important;
    padding: 14px 10px !important;
  }
  #page :is(.devices-desktop-list, .reseller-desktop-list, .dns-desktop-list) table.table .cell-main b,
  #page :is(.devices-desktop-list, .reseller-desktop-list, .dns-desktop-list) table.table .cell-main small {
    word-break: normal !important;
    overflow-wrap: normal !important;
    white-space: nowrap;
  }
  /* Ações mantidas na linha, sem grade de botões de cartões. */
  #page :is(.devices-desktop-list, .reseller-desktop-list, .dns-desktop-list) .table-actions,
  #page :is(.devices-desktop-list, .reseller-desktop-list, .dns-desktop-list) .action-cluster {
    display: flex !important;
    align-items: center;
    flex-wrap: nowrap !important;
    width: auto !important;
    min-width: max-content !important;
    grid-template-columns: none !important;
    gap: 5px !important;
  }
  #page :is(.devices-desktop-list, .reseller-desktop-list, .dns-desktop-list) .btn {
    min-height: 34px !important;
    width: auto !important;
    padding: 6px 9px !important;
    font-size: 10px !important;
    white-space: nowrap !important;
  }
  /* Ao selecionar um registro, evita que o menu de ações seja recortado por uma linha. */
  #page :is(.devices-desktop-list, .reseller-desktop-list, .dns-desktop-list) table.table tbody tr {
    cursor: pointer;
  }
  #page :is(.devices-desktop-list, .reseller-desktop-list, .dns-desktop-list) table.table tbody tr:hover {
    background: rgba(141, 77, 255, .05) !important;
  }
}

/* Force only the three data lists to be visible at mobile widths, even if another
   stylesheet has equally specific mobile display rules. */
@media screen and (max-width: 760px) {
  #page .devices-desktop-list, #page .reseller-desktop-list, #page .dns-desktop-list { display: block !important; }
  #page .devices-mobile-list, #page .reseller-mobile-list, #page .dns-mobile-list { display: none !important; }
  #page .dns-desktop-list.table-wrap, #page .devices-desktop-list.table-wrap,
  #page .reseller-desktop-list .table-wrap { max-width: 100% !important; overflow-x: auto !important; }
  #page .dns-desktop-list.table-wrap > table.table,
  #page .devices-desktop-list.table-wrap > table.table { display: table !important; }
}


/* v1.2 — CORREÇÃO REAL DO GESTO HORIZONTAL
   O CSS antigo impedia pan-x em BODY, .content, .panel e .table-wrap
   com touch-action:pan-y!important. Um filho com pan-x não corrige o
   bloqueio de um ancestral: todos os elementos do caminho precisam permitir. */
@media screen and (max-width: 760px) {
  html, body, body.mobile-nav-open,
  #app, .shell, .main, .content,
  #page, #page .devices-clean-panel,
  #page .reseller-clean-panel,
  #page .dns-main-panel {
    touch-action: auto !important;
  }
  #page .devices-desktop-list.table-wrap,
  #page .reseller-desktop-list > .table-wrap,
  #page .dns-desktop-list.table-wrap {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    touch-action: pan-x pan-y !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-x: contain;
    scrollbar-width: auto !important;
    scrollbar-color: #9560e7 rgba(125,100,160,.18) !important;
    border-bottom: 2px solid rgba(149,96,231,.25);
    padding-bottom: 6px;
  }
  #page .devices-desktop-list.table-wrap > table.table,
  #page .reseller-desktop-list > .table-wrap > table.table,
  #page .dns-desktop-list.table-wrap > table.table {
    display: table !important;
    width: max-content !important;
    max-width: none !important;
    table-layout: auto !important;
  }
  #page .devices-desktop-list.table-wrap > .devices-table { min-width: 900px !important; }
  #page .reseller-desktop-list > .table-wrap > .reseller-clean-table { min-width: 1030px !important; }
  #page .dns-desktop-list.table-wrap > .dns-unified-table { min-width: 1000px !important; }
  #page .devices-desktop-list.table-wrap::-webkit-scrollbar,
  #page .reseller-desktop-list > .table-wrap::-webkit-scrollbar,
  #page .dns-desktop-list.table-wrap::-webkit-scrollbar { height: 10px !important; }
  #page .devices-desktop-list.table-wrap::-webkit-scrollbar-thumb,
  #page .reseller-desktop-list > .table-wrap::-webkit-scrollbar-thumb,
  #page .dns-desktop-list.table-wrap::-webkit-scrollbar-thumb { background: #9560e7 !important; border-radius: 999px; }
  #page .devices-desktop-list.table-wrap::before,
  #page .reseller-desktop-list::before,
  #page .dns-desktop-list.table-wrap::before { display: none !important; content: none !important; }

  /* Alternativa ao gesto: setas reais que deslocam o próprio contêiner. */
  #page .ps-table-scroll-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 8px 10px;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    border-bottom: 1px solid var(--line, #342a45);
    color: var(--muted, #a9a0b7);
    font-size: 11px;
    font-weight: 700;
    touch-action: auto !important;
  }
  #page .ps-table-scroll-bar .ps-table-scroll-label { min-width: 0; flex: 1; }
  #page .ps-table-scroll-bar .ps-table-scroll-actions { display: flex; gap: 5px; flex: 0 0 auto; }
  #page .ps-table-scroll-bar button {
    width: 42px;
    height: 38px;
    border: 1px solid rgba(149, 96, 231, .5);
    background: rgba(149, 96, 231, .13);
    color: var(--text-strong, #fff);
    border-radius: 9px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 850;
    touch-action: manipulation !important;
  }
  #page .ps-table-scroll-bar button:disabled { opacity: .32; cursor: default; }
  #page .ps-table-scroll-bar button:not(:disabled):active { background: rgba(149, 96, 231, .4); }
}
@media screen and (min-width: 761px) {
  .ps-table-scroll-bar { display: none !important; }
}