/* ── cn-datatables.css ──────────────────────────────────────────────────
   Overrides DataTables Bootstrap4 skin to match cn-theme aesthetics.
   Requires cn-theme.css (for CSS custom properties).
── ─────────────────────────────────────────────────────────────────────── */

/* Table header */
table.dataTable thead th,
table.dataTable thead td {
  padding: .3rem .6rem;
  font-size: 11px;
  font-weight: 500;
  color: var(--muted-foreground);
  background: var(--muted);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

/* Table body */
table.dataTable tbody td {
  padding: .3rem .6rem;
  font-size: 12px;
  border-bottom: 1px solid var(--border);
  color: var(--foreground);
}
table.dataTable tbody tr:hover td { background: var(--muted); }

/* Wrapper */
.dataTables_wrapper { font-family: var(--font); font-size: 12px; }

/* Search & length selects */
.dataTables_filter input,
.dataTables_length select {
  height: 26px; font-size: 11.5px;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--background); color: var(--foreground);
  padding: 0 .5rem; outline: none; font-family: var(--font);
}
.dataTables_filter input:focus,
.dataTables_length select:focus {
  border-color: var(--ring);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ring) 15%, transparent);
}

/* Pagination — DT2 + Bootstrap4 skin: <li.dt-paging-button.page-item> > <a.page-link> */
.dt-paging .pagination { gap: 2px; flex-wrap: wrap; }

.dt-paging .page-item .page-link {
  height: 22px; min-width: 22px; padding: 0 .35rem;
  line-height: 22px; font-size: 11px;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  background: var(--background) !important;
  color: var(--foreground) !important;
  box-shadow: none !important;
  transition: background .1s, color .1s;
}
.dt-paging .page-item .page-link:focus { outline: none !important; box-shadow: none !important; }

.dt-paging .page-item.active .page-link,
.dt-paging .page-item.active .page-link:hover {
  background: var(--primary) !important;
  color: var(--primary-fg) !important;
  border-color: var(--primary) !important;
}
.dt-paging .page-item:not(.disabled):not(.active) .page-link:hover {
  background: var(--accent) !important;
  color: var(--foreground) !important;
  border-color: var(--border) !important;
}
.dt-paging .page-item.disabled .page-link,
.dt-paging .page-item.disabled .page-link:hover {
  opacity: .4;
  cursor: not-allowed;
  background: var(--background) !important;
  color: var(--muted-foreground) !important;
  border-color: var(--border) !important;
}

/* Info text */
.dataTables_info { font-size: 11px; color: var(--muted-foreground); }

/* Footer layout — length left, pagination right */
.dt-container > .row:not(.dt-layout-table) {
  padding: .4rem .6rem;
  border-top: 1px solid var(--border);
  align-items: center;
  margin: 0;
}
.dt-container > .row:not(.dt-layout-table) > [class*="col"] {
  padding: 0;
}

/* Length select in footer */
.dt-length select {
  height: 24px; font-size: 11px; padding: 0 1.6rem 0 .4rem;
  min-width: 70px;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--background); color: var(--foreground);
  outline: none; font-family: var(--font); cursor: pointer;
  appearance: auto;
}
.dt-length select:focus {
  border-color: var(--ring);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ring) 15%, transparent);
}
.dt-length label { font-size: 11px; color: var(--muted-foreground); display: flex; align-items: center; gap: .35rem; }

/* Buttons (export) */
.dt-buttons .dt-button {
  height: 26px; font-size: 11.5px; font-family: var(--font); font-weight: 500;
  border: 1px solid var(--border) !important;
  background: var(--background) !important;
  color: var(--foreground) !important;
  border-radius: var(--radius); padding: 0 .55rem;
  cursor: pointer;
}
.dt-buttons .dt-button:hover {
  background: var(--accent) !important;
}

/* Sorting icons */
table.dataTable thead .sorting::after,
table.dataTable thead .sorting_asc::after,
table.dataTable thead .sorting_desc::after {
  font-size: 9px; opacity: .5;
}
table.dataTable thead .sorting_asc::after,
table.dataTable thead .sorting_desc::after { opacity: 1; }

/* Remove default DT row striping */
table.dataTable.stripe tbody tr.odd,
table.dataTable.display tbody tr.odd { background: transparent; }

/* Column resize grip */
table.dataTable thead th { position: relative; overflow: hidden; text-overflow: ellipsis; }
table.dataTable tbody td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
table.dataTable thead th .col-resize-grip {
  position: absolute; right: 0; top: 0; bottom: 0;
  width: 6px; cursor: col-resize; z-index: 2;
}
table.dataTable thead th .col-resize-grip:hover { background: var(--primary); opacity: .35; }