/*
 PlayServs • Painel ADM v1.4 • grade de células (18/10/2026)
 Camada visual sobre a v1.3 — não altera API, dados, operações ou menus.
 Escopo exclusivo das quatro listagens principais.
*/

/* A grade é uma tabela de verdade: cada cabeçalho e cada valor tem
   sua própria célula, separados por linhas verticais E horizontais. */
#page :is(.devices-table-clean, .reseller-clean-table, .dns-unified-table, .apps-pro-table).table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border-top: 1px solid var(--line, rgba(143,157,180,.33)) !important;
  border-left: 1px solid var(--line, rgba(143,157,180,.33)) !important;
}
#page :is(.devices-table-clean, .reseller-clean-table, .dns-unified-table, .apps-pro-table).table tr {
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
#page :is(.devices-table-clean, .reseller-clean-table, .dns-unified-table, .apps-pro-table).table :is(th, td) {
  box-sizing: border-box !important;
  border-top: 0 !important;
  border-left: 0 !important;
  border-right: 1px solid var(--line, rgba(143,157,180,.33)) !important;
  border-bottom: 1px solid var(--line, rgba(143,157,180,.33)) !important;
  border-radius: 0 !important;
  vertical-align: middle !important;
  text-align: left !important;
  padding: 10px 12px !important;
  line-height: 1.35 !important;
  transform: none !important;
}
#page :is(.devices-table-clean, .reseller-clean-table, .dns-unified-table, .apps-pro-table).table thead th {
  font-weight: 800 !important;
  white-space: nowrap !important;
  background: var(--surface-2, var(--panel-2, #181e32)) !important;
  color: var(--text-strong, var(--text, #e6eaf3)) !important;
}
#page :is(.devices-table-clean, .reseller-clean-table, .dns-unified-table, .apps-pro-table).table tbody td {
  background-clip: padding-box !important;
}
#page :is(.devices-table-clean, .reseller-clean-table, .dns-unified-table, .apps-pro-table).table tbody tr:nth-child(odd) td {
  background-color: transparent;
}
#page :is(.devices-table-clean, .reseller-clean-table, .dns-unified-table, .apps-pro-table).table tbody tr:nth-child(even) td {
  background-color: rgba(125, 140, 175, .045) !important;
}
#page :is(.devices-table-clean, .reseller-clean-table, .dns-unified-table, .apps-pro-table).table tbody tr:hover td {
  background-color: var(--surface-hover, rgba(125,100,180,.10)) !important;
}
/* "Revenda" era display:flex diretamente no TD, que o deslocava
   em relação à linha "Tipo". TD precisa usar display:table-cell. */
#page .reseller-desktop-list table.reseller-clean-table.table tbody tr > td.reseller-clean-main {
  display: table-cell !important;
  vertical-align: middle !important;
  width: auto !important;
  min-width: 190px !important;
  max-width: 230px;
  height: auto !important;
  white-space: normal !important;
}
#page .reseller-desktop-list table.reseller-clean-table.table td.reseller-clean-main > div {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: flex-start !important;
  gap: 3px !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
#page .reseller-desktop-list table.reseller-clean-table.table td.reseller-clean-main :is(b,small) {
  display: block !important;
  margin: 0 !important;
  line-height: 1.35 !important;
  max-width: 100% !important;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap !important;
}
#page .reseller-desktop-list table.reseller-clean-table.table td:not(.reseller-clean-main) {
  display: table-cell !important;
  vertical-align: middle !important;
}
#page .reseller-desktop-list table.reseller-clean-table.table td .reseller-clean-number,
#page .reseller-desktop-list table.reseller-clean-table.table td .reseller-clean-status {
  margin: 0 !important;
  justify-content: center;
}

/* Aplicativos: flex é aplicado AO CONTEÚDO do botão, nunca ao TD.
   Mantém controles e menu de mais ações na célula "Ações". */
#page .apps-control-panel table.apps-pro-table.table td.apps-actions-cell {
  display: table-cell !important;
  white-space: nowrap !important;
  vertical-align: middle !important;
  min-width: 155px !important;
}
#page .apps-control-panel table.apps-pro-table.table td.apps-actions-cell > .btn,
#page .apps-control-panel table.apps-pro-table.table td.apps-actions-cell > .app-more-menu {
  vertical-align: middle !important;
}
#page .apps-control-panel table.apps-pro-table.table td.apps-actions-cell > .app-more-menu {margin-left: 6px;}
#page .apps-control-panel table.apps-pro-table.table td.app-main-cell .app-row-title {
  align-items: center !important;
  min-height: 34px;
}

/* DNS: nome cabe no bloco estreito e a URL grande não dilata a coluna. */
#page .dns-desktop-list table.dns-unified-table.table td.dns-unified-server-cell {
  display: table-cell !important;
  min-width: 164px !important;
  width: 175px !important;
  max-width: 192px !important;
  padding: 9px 10px !important;
  vertical-align: middle !important;
  border-right: 1px solid var(--line, rgba(143,157,180,.33)) !important;
}
#page .dns-desktop-list table.dns-unified-table.table .dns-unified-server {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  min-width: 0 !important;
  max-width: 100% !important;
}
#page .dns-desktop-list table.dns-unified-table.table .dns-unified-server > :is(b,small) {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-wrap: anywhere !important;
  white-space: normal !important;
  line-height: 1.3 !important;
}
#page .dns-desktop-list table.dns-unified-table.table .dns-unified-server > small {
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden !important;
}

/* Em celular o CSS legado transforma todos os TD em cards/grid.
   Mantém células nativas e o container com pan-x que já foi corrigido na v1.2. */
@media screen and (max-width: 760px) {
  #page :is(.devices-desktop-list, .reseller-desktop-list, .dns-desktop-list) table.table :is(th,td),
  #page .apps-control-panel table.apps-pro-table.table :is(th,td) {
    display: table-cell !important;
    border-right: 1px solid var(--line, rgba(143,157,180,.33)) !important;
    border-bottom: 1px solid var(--line, rgba(143,157,180,.33)) !important;
    border-radius: 0 !important;
    padding: 10px 12px !important;
    vertical-align: middle !important;
    text-align: left !important;
    grid-template-columns: none !important;
    height: auto !important;
    white-space: nowrap !important;
  }
  #page .reseller-desktop-list table.reseller-clean-table.table td.reseller-clean-main {
    display: table-cell !important;
    min-width: 190px !important;
    height: auto !important;
    vertical-align: middle !important;
  }
  #page .apps-control-panel table.apps-pro-table.table td.apps-actions-cell {
    display: table-cell !important;
    vertical-align: middle !important;
  }
  #page :is(.devices-desktop-list.table-wrap, .dns-desktop-list.table-wrap,
            .reseller-desktop-list > .table-wrap, .apps-control-panel > .table-wrap) {
    touch-action: pan-x pan-y !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
  }
  #page .dns-desktop-list table.dns-unified-table.table td.dns-unified-server-cell {
    width: 175px !important;
    min-width: 164px !important;
    max-width: 192px !important;
    white-space: normal !important;
  }
}