/* ===== DATATABLE DESIGN SYSTEM (Okulus) ===== */
/* Canonical path: resources/css/datatable.css — also linked as assets copy if needed */

/* Wrapper */
.dt-wrapper {
  font-family: inherit;
}

/* Header bar: title + controls */
.dt-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 1.25rem;
}
.dt-header-title { font-size: 18px; font-weight: 500; color: #111; }
.dt-header-subtitle { font-size: 13px; color: #6b7280; margin-top: 2px; }

/* Controls: per-page selector + search */
.dt-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.dt-show-label,
div.dataTables_wrapper .dataTables_length label {
  font-size: 13px;
  color: #6b7280;
  display: flex;
  align-items: center;
  gap: 8px;
}
.dt-show-label select,
div.dataTables_wrapper .dataTables_length select {
  padding: 6px 10px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #fff;
  color: #111;
  font-size: 13px;
  cursor: pointer;
  outline: none;
}
.dt-search-wrap { position: relative; display: inline-block; }
.dt-search-wrap .dt-search-icon {
  position: absolute;
  left: 10px; top: 50%;
  transform: translateY(-50%);
  width: 14px; height: 14px;
  color: #9ca3af;
  pointer-events: none;
}
.dt-search-input,
div.dataTables_wrapper .dataTables_filter input {
  padding: 8px 12px 8px 32px !important;
  font-size: 13px;
  border: 1px solid #e5e7eb !important;
  border-radius: 8px !important;
  background: #fff !important;
  color: #111 !important;
  width: 210px;
  max-width: 100%;
  outline: none;
  margin-left: 0 !important;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.dt-search-input:focus,
div.dataTables_wrapper .dataTables_filter input:focus {
  border-color: #378ADD !important;
  box-shadow: 0 0 0 3px rgba(55, 138, 221, 0.12);
}
div.dataTables_wrapper .dataTables_filter label {
  font-weight: normal;
  margin: 0;
}

/* Table card container */
.dt-card {
  background: #fff;
  border: 1px solid #f0f0f0;
  border-radius: 12px;
  overflow: hidden;
  overflow-x: auto;
}

/* Table base */
.dt-card table,
table.okulus-dt-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: auto;
}

/* Header row — contraste WCAG AA: texto claro sobre fundo escuro */
.dt-card thead tr,
table.okulus-dt-table thead tr {
  background: #1e3a5f !important;
}
.dt-card thead th,
table.okulus-dt-table thead th {
  padding: 11px 16px;
  font-size: 11px;
  font-weight: 600;
  color: #ffffff !important;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  text-align: left;
  border-bottom: none !important;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  background: #1e3a5f !important;
}
.dt-card thead th .th-inner {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.dt-card thead th .sort-icon {
  opacity: 0.6;
  font-size: 10px;
  color: #ffffff;
}
.dt-card thead th.sorted .sort-icon {
  opacity: 1;
  color: #7dd3fc;
}

/* Body rows */
.dt-card tbody tr,
table.okulus-dt-table tbody tr {
  border-bottom: 1px solid #f5f5f5;
  transition: background 0.1s;
}
.dt-card tbody tr:last-child,
table.okulus-dt-table tbody tr:last-child { border-bottom: none; }
.dt-card tbody tr:hover,
table.okulus-dt-table tbody tr:hover { background: #f9fafb; }

/* Cells */
.dt-card tbody td,
table.okulus-dt-table tbody td {
  padding: 14px 16px;
  font-size: 14px;
  color: #111;
  vertical-align: middle;
}

/* ID column */
td.dt-col-id {
  font-size: 12px;
  font-weight: 500;
  color: #6b7280;
  font-variant-numeric: tabular-nums;
}

/* Name with avatar */
.dt-name-cell {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.dt-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 500;
  flex-shrink: 0;
}
.dt-avatar-0 { background: #E6F1FB; color: #185FA5; }
.dt-avatar-1 { background: #EAF3DE; color: #3B6D11; }
.dt-avatar-2 { background: #FAEEDA; color: #854F0B; }
.dt-avatar-3 { background: #EEEDFE; color: #3C3489; }
.dt-avatar-4 { background: #FAECE7; color: #993C1D; }
.dt-avatar-5 { background: #E1F5EE; color: #0F6E56; }

/* Document / status badges */
.dt-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
}
.dt-badge-green  { background: #EAF3DE; color: #3B6D11; }
.dt-badge-blue   { background: #E6F1FB; color: #185FA5; }
.dt-badge-amber  { background: #FAEEDA; color: #854F0B; }
.dt-badge-red    { background: #FCEBEB; color: #A32D2D; }
.dt-badge-gray   { background: #F1EFE8; color: #5F5E5A; }

/* Email link */
td.dt-col-email a { color: #185FA5; text-decoration: none; font-size: 13px; }
td.dt-col-email a:hover { text-decoration: underline; }

/* Phone */
td.dt-col-phone { color: #6b7280; font-size: 13px; font-variant-numeric: tabular-nums; }

/* Actions column */
td.dt-col-actions { text-align: center; }
.dt-btn-action {
  background: transparent;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 6px 10px;
  cursor: pointer;
  color: #6b7280;
  font-size: 15px;
  transition: all 0.12s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.dt-btn-action:hover {
  background: #E6F1FB;
  color: #185FA5;
  border-color: #B5D4F4;
}

/* Footer: info + pagination */
.dt-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 1rem;
  flex-wrap: wrap;
  gap: 10px;
}
.dt-footer .dataTables_info {
  padding-top: 0 !important;
  font-size: 13px;
  color: #6b7280;
}
.dt-info { font-size: 13px; color: #6b7280; }

.dt-pagination,
.dt-footer .dataTables_paginate {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  align-items: center;
}
.dt-footer .dataTables_paginate .pagination {
  margin: 0;
  gap: 4px;
}
.dt-page-btn {
  min-width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  font-size: 13px;
  color: #6b7280;
  transition: all 0.12s;
  padding: 0 8px;
}
.dt-page-btn:hover { background: #f3f4f6; }
.dt-page-btn.active { background: #185FA5; color: #fff; border-color: #185FA5; font-weight: 500; }
.dt-page-btn:disabled { opacity: 0.35; cursor: default; pointer-events: none; }

/* Bootstrap 4 pagination inside dt-footer */
.dt-footer .page-link {
  min-width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #e5e7eb !important;
  border-radius: 8px !important;
  font-size: 13px;
  color: #6b7280 !important;
  padding: 0 8px;
  margin-left: 0;
}
.dt-footer .page-item.active .page-link {
  background: #185FA5 !important;
  color: #fff !important;
  border-color: #185FA5 !important;
}
.dt-footer .page-item.disabled .page-link {
  opacity: 0.35;
}

/* Empty state */
.dt-empty td,
table.dataTable tbody td.dataTables_empty {
  text-align: center;
  padding: 2.5rem !important;
  color: #9ca3af;
  font-size: 14px;
}

/* ——— DataTables integration ——— */
div.dt-wrapper { width: 100%; }

/* Hide default DataTables sort arrows; use single indicator */
.dt-card table.dataTable thead .sorting:before,
.dt-card table.dataTable thead .sorting:after,
.dt-card table.dataTable thead .sorting_asc:before,
.dt-card table.dataTable thead .sorting_asc:after,
.dt-card table.dataTable thead .sorting_desc:before,
.dt-card table.dataTable thead .sorting_desc:after {
  display: none !important;
}
.dt-card table.dataTable thead > tr > th.sorting,
.dt-card table.dataTable thead > tr > th.sorting_asc,
.dt-card table.dataTable thead > tr > th.sorting_desc {
  padding-right: 16px !important;
}
.dt-card table.dataTable thead > tr > th.sorting::after {
  content: "↕";
  display: inline !important;
  margin-left: 6px;
  font-size: 10px;
  opacity: 0.6;
  color: #ffffff !important;
  position: static !important;
}
.dt-card table.dataTable thead > tr > th.sorting_asc::after {
  content: "↑";
  opacity: 1;
  color: #7dd3fc !important;
}
.dt-card table.dataTable thead > tr > th.sorting_desc::after {
  content: "↓";
  opacity: 1;
  color: #7dd3fc !important;
}

table.dataTable {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Neutralize global okulus table hover/transform inside design-system tables */
.content .dt-wrapper .dt-card tbody tr:hover,
.content .dt-wrapper table.okulus-dt-table tbody tr:hover {
  transform: none !important;
  background: #f9fafb !important;
}
.content .dt-wrapper .dt-card.table-striped tbody tr:nth-of-type(odd),
.content .dt-wrapper .dt-card .table-striped tbody tr:nth-of-type(odd),
.content table.okulus-dt-table.table-striped tbody tr:nth-of-type(odd) {
  background: transparent !important;
}

/* Server-side pagination block */
.dt-footer-static {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 1rem;
  flex-wrap: wrap;
  gap: 10px;
}
.dt-footer-static .pagination {
  margin-bottom: 0;
}

/* Auditoria: texto longo sem inline style */
.dt-audit-diff {
  max-width: 420px;
  white-space: pre-wrap;
  font-size: 11px;
  color: #374151;
}

/* Sobrescreve cabeçalho do tema Okulus (ex.: #fff3ec) nas tabelas do design system */
.content .table.okulus-dt-table thead th,
.content .dt-card thead th,
.content .table-responsive .okulus-dt-table thead th {
  background: #1e3a5f !important;
  color: #ffffff !important;
  border-bottom: none !important;
}

div.dataTables_wrapper {
  width: 100%;
}

.okulus-dt-table th.dt-col-qtd {
  width: 120px;
}

/* Tema claro: mesmo cabeçalho escuro (evita #fff3ec + texto cinza) */
[data-theme="light"] .content .table.okulus-dt-table thead th,
[data-theme="light"] .content .dt-card thead th {
  background: #1e3a5f !important;
  color: #ffffff !important;
  border-bottom: none !important;
}

/* jQuery DataTables: cabeçalho gerado no wrapper (sobrescreve dataTables.bootstrap4) */
.content .dataTables_wrapper table.dataTable > thead > tr > th,
.content .dataTables_wrapper table.dataTable > thead > tr > td {
  background: #1e3a5f !important;
  color: #ffffff !important;
  border-bottom: none !important;
}