/* Estilos simples e responsivos */
.wal-wrap .wal-field-group { margin: 16px 0; }
.wal-wrap .wal-label { font-weight: 600; display:block; margin-bottom:8px; }
.wal-wrap .wal-media-row { display:flex; gap:12px; align-items:center; }
.wal-wrap .wal-file-preview a { text-decoration: none; }

.wal-table-wrap { width:100%; }
.wal-loading { padding: 12px; font-style: italic; }
.wal-error { padding: 12px; color: #b32d2e; }

/* Controls */
.wal-controls { margin: 10px 0 8px; }
.wal-controls-row { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.wal-view-toggle .button { border: 1px solid #d0d7de; background: #fff; cursor: pointer; }
.wal-view-toggle .button.is-active { background: #2271b1; color: #fff; border-color: #2271b1; }
.wal-filters { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.wal-filter { display: flex; align-items: center; gap: 6px; }
.wal-filter span { font-weight: 600; }
.wal-btn-clear { margin-left: 4px; }

/* Table wrapper and scrolling */
.wal-table-scroller { overflow: auto; max-width: 100%; }
.wal-table { width:100%; border-collapse: separate; border-spacing: 0; background: #fff; }
.wal-table th, .wal-table td { padding: 8px 10px; border-bottom: 1px solid #e5e7eb; white-space: nowrap; }
.wal-table th { text-align:left; }

/* Sticky header */
.wal-table thead th { position: sticky; top: 0; z-index: 2; background: #fff; box-shadow: 0 1px 0 #e5e7eb; }

/* Sticky first column (applied to first compact column) */
.wal-sticky-col { position: sticky; left: 0; z-index: 3; background: #fff; border-right: 1px solid #f0f2f4; }
.wal-expanded .wal-sticky-col { box-shadow: inset 3px 0 0 #2271b1; }

/* Row hover and pointer for details */
.wal-has-details tbody tr { cursor: pointer; }
.wal-has-details tbody tr:hover { background: #fafafa; }

/* Child row (details) */
.wal-details { padding: 10px 12px; background: #f8fafc; border-left: 3px solid #2271b1; display: grid; grid-template-columns: minmax(120px, 220px) 1fr; gap: 6px 12px; }
.wal-details-row { display: contents; }
.wal-details-key { font-weight: 600; color: #374151; }
.wal-details-val { color: #111827; }

/* Caption */
.wal-table caption { text-align:left; padding:8px 0; font-weight:600; }

/* Notice */
.wal-notice { padding: 12px; background: #fff8e5; border-left: 4px solid #f0b849; }

/* Mobile tweaks */
@media (max-width: 782px) {
  .wal-table th, .wal-table td { padding: 8px 8px; }
  .wal-details { grid-template-columns: 1fr; }
}





/* ===== Botão "Limpar filtros" ===== */
.wal-table-wrap .wal-btn-clear {
  background: #ffffff;
  border-color: #ef4444;
  color: #ef4444;
}

.wal-table-wrap .wal-btn-clear:hover {
  background: #fee2e2;
  border-color: #ef4444;
  color: #b91c1c;
}

/* ===== (Opcional) Paginação do DataTables ===== */
.wal-table-wrap .dataTables_wrapper .dataTables_paginate .paginate_button {
  background: #ffffff;
  border: 1px solid #d0d7de;
  color: #0f172a !important; /* texto normal */
  border-radius: 4px;
}

.wal-table-wrap .dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background: #0ea5e9 !important;  /* página ativa */
  border-color: #0ea5e9 !important;
  color: #ffffff !important;
}

.wal-table-wrap .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: #e0f2fe !important;  /* hover na paginação */
  border-color: #0ea5e9 !important;
  color: #0ea5e9 !important;
}

/* ===== (Opcional) Realce da coluna sticky e do painel de detalhes ===== */
.wal-table-wrap .wal-sticky-col {
  border-right-color: #e2e8f0;     /* linha divisória da coluna fixa */
}
.wal-table-wrap .wal-expanded .wal-sticky-col {
  box-shadow: inset 3px 0 0 #0ea5e9; /* faixa vertical quando a linha está aberta */
}
.wal-table-wrap .wal-details {
  border-left-color: #0ea5e9;      /* cor da barra do painel de detalhes */
}