/* FortiGate Inventory Design System V2 - tables */
.ds-table-wrap {
  border-radius: var(--fi-radius-lg);
}
.ds-table {
  color: var(--fi-text);
  margin-bottom: 0;
}
.ds-table thead th,
.ds-table .ds-thead-light th,
thead.thead-light th {
  background: var(--fi-surface-soft) !important;
  color: var(--fi-gray-700) !important;
  border-bottom: 1px solid var(--fi-border) !important;
  border-top: 0 !important;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .065em;
  font-weight: 900;
  white-space: nowrap;
}
.ds-table th, .ds-table td {
  border-color: var(--fi-border) !important;
  vertical-align: middle !important;
}
.ds-table tbody tr {
  transition: background-color var(--fi-transition-fast), box-shadow var(--fi-transition-fast);
}
.ds-table--hover tbody tr:hover,
.ds-table tbody tr:hover {
  background: rgba(15, 95, 217, .045) !important;
}
.ds-table--compact td, .ds-table--compact th { padding: .62rem .75rem; }
.ds-table--bordered { border: 1px solid var(--fi-border) !important; }
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
  border: 1px solid var(--fi-border);
  border-radius: var(--fi-radius-md);
  background: var(--fi-surface);
  color: var(--fi-text);
  padding: .35rem .65rem;
}
.dataTables_wrapper .page-link {
  border-color: var(--fi-border);
  color: var(--fi-primary);
  background: var(--fi-surface);
}
.dataTables_wrapper .page-item.active .page-link {
  background: var(--fi-primary);
  border-color: var(--fi-primary);
}
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter { color: var(--fi-text-muted) !important; }
body.app-dark-mode .ds-table--striped tbody tr:nth-of-type(odd) { background-color: rgba(255,255,255,.02); }
body.app-dark-mode .ds-table--hover tbody tr:hover,
body.app-dark-mode .ds-table tbody tr:hover { background: rgba(59, 130, 246, .12) !important; }

/* =========================================================
   UI-4 DS decommission table primitives
   ========================================================= */
.ds-table-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--fi-border);
  border-radius: var(--fi-radius-lg);
  background: var(--fi-surface);
  box-shadow: var(--fi-shadow-xs);
}

.ds-table {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
  color: var(--fi-text);
}

.ds-table caption {
  padding: var(--fi-space-3) var(--fi-space-4);
  color: var(--fi-text-muted);
  text-align: left;
}

.ds-table th,
.ds-table td {
  padding: .72rem .85rem;
  border-bottom: 1px solid var(--fi-border);
  vertical-align: middle;
  text-align: left;
}

.ds-table thead th {
  background: var(--fi-surface-soft);
  color: var(--fi-gray-700);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .065em;
  text-transform: uppercase;
  white-space: nowrap;
}

.ds-table tbody tr {
  transition: background-color var(--fi-transition-fast);
}

.ds-table tbody tr:hover {
  background: rgba(15, 95, 217, .045);
}

.ds-table tbody tr:last-child td {
  border-bottom: 0;
}

.ds-table--compact th,
.ds-table--compact td {
  padding: .5rem .65rem;
}

.ds-table--striped tbody tr:nth-of-type(odd) {
  background: rgba(15, 23, 42, .025);
}

body.app-dark-mode .ds-table tbody tr:hover {
  background: rgba(59, 130, 246, .12);
}

body.app-dark-mode .ds-table--striped tbody tr:nth-of-type(odd) {
  background: rgba(255, 255, 255, .02);
}
