/* ==========================================
   TABLES
   Стилі для таблиць
   ========================================== */

/* ==========================================
   BASE TABLE
   ========================================== */
table {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  width: 100%;
  border-collapse: collapse;
}

/* ==========================================
   TABLE HEADER
   ========================================== */
th {
  background: rgba(var(--rgb-blue-500), 0.1);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.85rem;
  letter-spacing: 1px;
  padding: 1rem;
  text-align: left;
  border-bottom: 2px solid var(--border);
}

/* ==========================================
   TABLE CELLS
   ========================================== */
td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

/* ==========================================
   TABLE LOADER
   ========================================== */
.table-loader {
  margin-left: 1rem;
}

/* ==========================================
   DARK MODE HEADER CLASS (for JS toggle)
   ========================================== */
.table-header--dark {
  background-color: var(--color-neutral-875);
  color: var(--color-neutral-250);
}

/* ==========================================
   DARK MODE - TABLES
   ========================================== */
body.dark-mode table {
  background: var(--dark-surface);
  color: var(--text-dark);
}

body.dark-mode th {
  background: rgba(var(--rgb-blue-500), 0.15);
  color: var(--light);
  border-bottom: 1px solid rgba(var(--rgb-white), 0.1);
}

body.dark-mode td {
  border-color: rgba(var(--rgb-white), 0.05);
}

body.dark-mode .table-hover tbody tr:hover {
  background-color: var(--dark-hover);
  color: var(--light);
}

body.dark-mode .table-secondary td {
  background-color: var(--dark);
  color: var(--light);
}

body.dark-mode .table-secondary td:hover {
  background-color: var(--dark-hover);
  color: var(--light);
}

body.dark-mode .table-secondary .group-header {
  background-color: var(--dark-hover);
  color: var(--light);
}

/* ==========================================
   DATATABLES INTEGRATION
   ========================================== */
.dataTables_wrapper {
  padding: 1rem 0;
}

.dataTables_filter input {
  border-radius: var(--radius);
  padding: 0.5rem 1rem;
  border: 1px solid var(--border);
}

.dataTables_length select {
  border-radius: var(--radius);
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--border);
}

body.dark-mode .dataTables_filter input,
body.dark-mode .dataTables_length select {
  background-color: var(--dark-surface);
  color: var(--light);
  border-color: rgba(var(--rgb-white), 0.1);
}

body.dark-mode .dataTables_info,
body.dark-mode .dataTables_length label,
body.dark-mode .dataTables_filter label {
  color: var(--text-dark);
}