/* ============================================================================
   Padrão de responsividade mobile para DataTables (par do js/utils/datatableMobile.js).
   Aplica-se a qualquer tabela que receba a classe .dt-mobile (o módulo adiciona sozinho).
   Cores seguem o tema escuro padrão do app (mesmas de css/style.css).
   ========================================================================== */

/* Ícone de expandir/recolher (+/-) no tema, verde no "+" e vermelho no "-" */
.dt-mobile td.dtr-control {
  cursor: pointer;
}

.dt-mobile td.dtr-control:before {
  background-color: #28a745 !important; /* verde no "+" (recolhido) */
  border: 2px solid #fff !important;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.4) !important;
}

.dt-mobile tr.parent td.dtr-control:before {
  background-color: #dc3545 !important; /* vermelho no "-" (expandido) */
}

/* Linha-filha expansível (child row) */
.dt-mobile > tbody > tr.child > td {
  background-color: #15171d !important;
}

.dt-mobile > tbody > tr.child ul.dtr-details {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
}

.dt-mobile > tbody > tr.child ul.dtr-details > li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 9px 4px;
  border-bottom: 1px solid #2c333d;
  list-style: none;
}

.dt-mobile > tbody > tr.child ul.dtr-details > li:last-child {
  border-bottom: none;
}

.dt-mobile > tbody > tr.child ul.dtr-details .dtr-title {
  font-weight: 600;
  color: #f4f4f4;
  text-transform: uppercase;
  font-size: 12px;
}

.dt-mobile > tbody > tr.child ul.dtr-details .dtr-data {
  color: #a6a9b6 !important;
  text-align: right;
}

/* Largura no mobile: identificador ocupa o espaço (quebra linha em vez de espremer),
   coluna de ações encolhe para o tamanho do ícone e centraliza. */
@media (max-width: 768px) {
  .dt-mobile th.dt-mobile-id,
  .dt-mobile td.dt-mobile-id {
    width: auto !important;
    white-space: normal !important;
    word-break: break-word;
  }

  .dt-mobile th.dt-mobile-acoes,
  .dt-mobile td.dt-mobile-acoes {
    width: 1% !important;
    white-space: nowrap !important;
    text-align: center !important;
  }
}