:root {
  --mufap-deep: #0d4c3a;
  --mufap-emerald: #177055;
  --mufap-mint: #7ed2b3;
  --mufap-gold: #f4b63a;
  --mufap-ink: #0b241b;
}

.app-table-wrapper,
.dash-body .table-dashboard-wrapper,
.index-page .table-dashboard-wrapper {
  border-radius: 18px;
  border: 1px solid rgba(13, 76, 58, 0.18);
  box-shadow: 0 24px 60px rgba(13, 76, 58, 0.18);
  overflow: hidden;
  background: linear-gradient(
    150deg,
    rgba(13, 76, 58, 0.08) 0%,
    rgba(17, 112, 85, 0.08) 45%,
    rgba(255, 255, 255, 0.92) 100%
  );
  animation: tableShellFade 0.4s ease;
}

.dash-body table,
.index-page table {
  border-collapse: separate;
  border-spacing: 0;
}

.dash-body table.table-dashboard,
.index-page table.table-dashboard {
  table-layout: fixed;
  width: 100%;
}

.dash-body table.table-dashboard th,
.dash-body table.table-dashboard td,
.index-page table.table-dashboard th,
.index-page table.table-dashboard td {
  word-break: break-word;
}

.dash-body table thead th,
.index-page table thead th {
  background: linear-gradient(
    120deg,
    var(--mufap-deep) 0%,
    #105a43 60%,
    var(--mufap-emerald) 100%
  );
  color: #eff8f3;
  text-transform: uppercase;
  font-size: 0.6rem;
  letter-spacing: 0.04em;
  font-weight: 600;
  padding: 6px 8px;
  border-bottom: none;
  position: relative;
  transition: background 0.3s ease, color 0.3s ease;
  padding-right: 18px;
  font-family: 'Inter', 'Segoe UI', sans-serif;
  white-space: normal;
  word-break: keep-all;
  line-height: 1.2;
}

.dash-body table thead th:first-child,
.index-page table thead th:first-child {
  border-top-left-radius: 18px;
}

.dash-body table thead th:last-child,
.index-page table thead th:last-child {
  border-top-right-radius: 18px;
}

.dash-body table thead th.sorting::after,
.dash-body table thead th.sorting_asc::after,
.dash-body table thead th.sorting_desc::after,
.index-page table thead th.sorting::after,
.index-page table thead th.sorting_asc::after,
.index-page table thead th.sorting_desc::after {
  content: '\2195';
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.9rem;
  opacity: 0.5;
  transition: color 0.25s ease, opacity 0.25s ease, transform 0.25s ease;
}

.dash-body table thead th.sorting_asc::after,
.index-page table thead th.sorting_asc::after {
  content: '\25B2';
  opacity: 1;
  color: var(--mufap-gold);
  transform: translateY(-50%) scale(1.1);
}

.dash-body table thead th.sorting_desc::after,
.index-page table thead th.sorting_desc::after {
  content: '\25BC';
  opacity: 1;
  color: var(--mufap-gold);
  transform: translateY(-50%) scale(1.1);
}

.dash-body table tbody tr,
.index-page table tbody tr {
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.dash-body table tbody tr:nth-child(odd),
.index-page table tbody tr:nth-child(odd) {
  background: rgba(247, 249, 248, 0.95);
}

.dash-body table tbody tr:nth-child(even),
.index-page table tbody tr:nth-child(even) {
  background: rgba(230, 236, 233, 0.92);
}

.dash-body table tbody tr:hover,
.index-page table tbody tr:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(11, 36, 27, 0.18);
  background: rgba(23, 112, 85, 0.12);
}

.dash-body table tbody td,
.index-page table tbody td {
  padding: 8px 5px;
  border-bottom: 1px solid rgba(13, 76, 58, 0.12);
  font-size: 0.66rem;
  font-family: 'Inter', 'Segoe UI', sans-serif;
  letter-spacing: 0.02em;
  white-space: normal;
  color: #0a3527;
}

.dash-body table tbody tr:last-child td:first-child,
.index-page table tbody tr:last-child td:first-child {
  border-bottom-left-radius: 16px;
}

.dash-body table tbody tr:last-child td:last-child,
.index-page table tbody tr:last-child td:last-child {
  border-bottom-right-radius: 16px;
}

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
  border-radius: 999px;
  border: 2px solid rgba(23, 112, 85, 0.35);
  padding: 6px 14px;
  box-shadow: inset 0 2px 6px rgba(23, 112, 85, 0.22);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0.92),
    rgba(126, 210, 179, 0.15)
  );
  font-size: 0.78rem;
}

.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus {
  border-color: var(--mufap-emerald);
  box-shadow: 0 0 0 3px rgba(23, 112, 85, 0.26);
  outline: none;
}

.table-dashboard-wrapper tr.Datatable-Grouping.text-center {
  background: linear-gradient(
    135deg,
    rgba(13, 76, 58, 0.08),
    rgba(23, 112, 85, 0.12)
  );
}

.table-dashboard-wrapper tr.Datatable-Grouping.text-center th {
  background: transparent;
  color: #0d4c3a;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-bottom: none;
  padding: 10px 14px;
  position: relative;
  font-weight: 600;
  white-space: normal;
  word-break: keep-all;
  line-height: 1.2;
}

.table-dashboard-wrapper tr.Datatable-Grouping.text-center th.cursor {
  cursor: pointer;
  padding-right: 32px;
}

.table-dashboard-wrapper tr.Datatable-Grouping.text-center th.cursor::after {
  content: '\2195';
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.9rem;
  opacity: 0.5;
  color: rgba(13, 76, 58, 0.6);
  transition: color 0.2s ease, opacity 0.2s ease;
}

.table-dashboard-wrapper tr.Datatable-Grouping.text-center th.cursor.is-sorted-desc::after {
  content: '\25BC';
  opacity: 1;
  color: var(--mufap-gold);
}

.table-dashboard-wrapper tr.Datatable-Grouping.text-center th.cursor.is-sorted-asc::after {
  content: '\25B2';
  opacity: 1;
  color: var(--mufap-gold);
}

.table-dashboard-wrapper tr.Datatable-Grouping.group td {
  font-weight: 600;
  color: #0d4c3a;
  background: rgba(13, 76, 58, 0.06);
  text-transform: uppercase;
}

.table-dashboard--grouped thead th.sorting::after,
.table-dashboard--grouped thead th.sorting_asc::after,
.table-dashboard--grouped thead th.sorting_desc::after {
  content: none !important;
  opacity: 0 !important;
}

.table-dashboard-wrapper table thead th {
  white-space: normal;
  word-break: keep-all;
  line-height: 1.2;
}

@keyframes tableShellFade {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}