/* =========
   DataTables – Pro Styling
   ========= */

/* Table base */
table.dataTable {
  margin-bottom: 20px !important;
  border-collapse: separate !important;
  border-spacing: 0;
  width: 100% !important;
  background-color: #fff;
  border-radius: .5rem;
  overflow: hidden;
}

/* Head cells */
table.dataTable thead th {
  background: #f8f9fa;
  color: #111827;
  font-weight: 600;
  font-size: .95rem;
  border-bottom: 1px solid #e5e7eb !important;
  vertical-align: middle !important;
  padding: .85rem .9rem !important;
  white-space: nowrap;
}

/* Body cells */
table.dataTable td {
  vertical-align: middle !important;
  padding: .8rem .9rem !important;
  border-top: 1px solid #f1f5f9 !important;
  color: #374151;
  font-size: .94rem;
}

/* Zebra striping */
table.dataTable tbody tr:nth-child(even) td {
  background-color: #fafbfc;
}

/* Row hover */
table.dataTable tbody tr:hover td {
  background-color: #f3f6ff;
}

/* Selected row (if using select extension) */
table.dataTable tbody tr.selected > * {
  background-color: #e8eaff !important;
}

/* Compact density option */
.table-compact table.dataTable td,
.table-compact table.dataTable th {
  padding: .6rem .7rem !important;
  font-size: .9rem;
}

/* Sorting icons (light, subtle) */
table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc {
  position: relative;
  padding-right: 1.4rem !important;
  cursor: pointer;
}
table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:after {
  content: "";
  position: absolute;
  right: .55rem;
  top: 50%;
  width: .55rem;
  height: .55rem;
  transform: translateY(-50%) rotate(45deg);
  border-right: 2px solid #9ca3af;
  border-bottom: 2px solid #9ca3af;
  opacity: .6;
}
table.dataTable thead .sorting_asc:after {
  transform: translateY(-10%) rotate(225deg);
  border-color: #4f46e5;
  opacity: .95;
}
table.dataTable thead .sorting_desc:after {
  transform: translateY(-90%) rotate(45deg);
  border-color: #4f46e5;
  opacity: .95;
}

/* Filter + Length controls row */
.dataTables_wrapper .row,
.dataTables_wrapper .top,
.dataTables_wrapper .bottom {
  align-items: center;
}

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {
  margin: .5rem 0 !important;
}

.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
  display: inline-block;
  width: auto;
  border: 1px solid #d1d5db;
  border-radius: .5rem;
  padding: .45rem .65rem;
  font-size: .92rem;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
  background-color: #fff;
}

.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus {
  border-color: #4f46e5;
  box-shadow: 0 0 0 3px rgba(79,70,229,0.15);
}

.dataTables_filter {
  margin-bottom: 20px !important;
}

/* Info text */
.dataTables_wrapper .dataTables_info {
  color: #6b7280;
  font-size: .9rem;
  padding-top: .5rem;
}

/* Buttons (CSV, Excel, Print, etc.) */
.dt-buttons .btn,
.dataTables_wrapper .dt-buttons .btn {
  padding: .45rem .75rem;
  font-size: .875rem;
  border-radius: .5rem;
  border: 1px solid #e5e7eb;
  background: #ffffff;
  color: #111827;
  box-shadow: 0 1px 1px rgba(0,0,0,0.04);
  transition: transform .15s ease, background-color .2s ease, border-color .2s ease;
}
.dt-buttons .btn:hover,
.dataTables_wrapper .dt-buttons .btn:hover {
  background: #f8fafc;
  border-color: #dbe2ea;
  transform: translateY(-1px);
}
.dt-buttons .btn:active {
  transform: translateY(0);
}

/* Pagination */
.dataTables_wrapper .dataTables_paginate {
  padding-top: .5rem;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
  padding: .35rem .7rem;
  border-radius: .5rem;
  margin: 0 3px;
  border: 1px solid transparent;
  color: #374151 !important;
  background: transparent;
  transition: background-color .2s, color .2s, border-color .2s;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background-color: #eef2ff;
  color: #111827 !important;
  border-color: #e5e7eb;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background-color: #4f46e5 !important;
  color: #fff !important;
  border-color: #4f46e5 !important;
  box-shadow: 0 1px 2px rgba(79,70,229,0.25);
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
  color: #9ca3af !important;
  background: transparent !important;
  border-color: transparent !important;
  cursor: not-allowed;
}

/* Processing state */
.dataTables_wrapper .dataTables_processing {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: .75rem 1rem;
  border-radius: .5rem;
  background: rgba(255,255,255,.95);
  border: 1px solid #e5e7eb;
  color: #4b5563;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  z-index: 10;
}

/* Empty table state */
table.dataTable tbody td.dataTables_empty {
  text-align: center !important;
  color: #6b7280;
  padding: 2rem !important;
  background: #fafafa;
  font-style: italic;
}

/* Responsive tweaks */
@media (max-width: 768px) {
  .dataTables_wrapper .dataTables_length,
  .dataTables_wrapper .dataTables_filter {
    width: 100%;
  }
  .dataTables_wrapper .dataTables_filter {
    text-align: left !important;
  }
}

/* ===== Dark Mode (CoreUI flag) ===== */
[data-coreui-theme="dark"] table.dataTable {
  background: #0f172a;
}
[data-coreui-theme="dark"] table.dataTable thead th {
  background: #111827;
  color: #e5e7eb;
  border-bottom-color: #1f2937 !important;
}
[data-coreui-theme="dark"] table.dataTable td {
  color: #d1d5db;
  border-top-color: #111827 !important;
}
[data-coreui-theme="dark"] table.dataTable tbody tr:nth-child(even) td {
  background: #0b1220;
}
[data-coreui-theme="dark"] table.dataTable tbody tr:hover td {
  background: #182036;
}
[data-coreui-theme="dark"] .dataTables_wrapper .dataTables_length select,
[data-coreui-theme="dark"] .dataTables_wrapper .dataTables_filter input {
  background: #0b1220;
  color: #e5e7eb;
  border-color: #1f2937;
}
[data-coreui-theme="dark"] .dataTables_wrapper .dataTables_filter input:focus,
[data-coreui-theme="dark"] .dataTables_wrapper .dataTables_length select:focus {
  border-color: #818cf8;
  box-shadow: 0 0 0 3px rgba(129,140,248,0.18);
}
[data-coreui-theme="dark"] .dataTables_wrapper .dataTables_info {
  color: #9ca3af;
}
[data-coreui-theme="dark"] .dt-buttons .btn {
  background: #0b1220;
  color: #e5e7eb;
  border-color: #1f2937;
}
[data-coreui-theme="dark"] .dt-buttons .btn:hover {
  background: #121a2c;
  border-color: #334155;
}
[data-coreui-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: #121a2c;
  color: #fff !important;
  border-color: #334155;
}
[data-coreui-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background: #4f46e5 !important;
  border-color: #4f46e5 !important;
}
/* ======== DataTables sorting icons — single, conflict-free set ======== */

/* 0) Wipe anything previously added (yours/DT/Bootstrap) */
table.dataTable thead th::before,
table.dataTable thead th::after,
table.dataTable thead td::before,
table.dataTable thead td::after {
  content: none !important;
  background-image: none !important;
}

/* 1) Make header a proper anchor for the icon and leave space */
table.dataTable thead th,
table.dataTable thead td {
  position: relative !important;
  overflow: visible !important;
  padding-right: 1.7rem !important; /* space for icon */
}

/* 2) Nuke DT v1 & v2 background images */
table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc,
table.dataTable thead .sorting_asc_disabled,
table.dataTable thead .sorting_desc_disabled,
table.dataTable thead .dt-orderable,
table.dataTable thead .dt-ordering-asc,
table.dataTable thead .dt-ordering-desc {
  background-image: none !important;
}

/* 3) Neutral (unsorted) caret (light) */
table.dataTable thead th.sorting::after,
table.dataTable thead td.sorting::after,
table.dataTable thead th.dt-orderable::after,
table.dataTable thead td.dt-orderable::after {
  content: "";
  position: absolute;
  right: .55rem;           /* LTR */
  top: 50%;
  width: .6rem;
  height: .6rem;
  transform: translateY(-50%) rotate(45deg);
  border-right: 2px solid #9ca3af;
  border-bottom: 2px solid #9ca3af;
  opacity: .7;
  pointer-events: none;
}

/* 4) Active ASC (point up) */
table.dataTable thead th.sorting_asc::after,
table.dataTable thead td.sorting_asc::after,
table.dataTable thead th.dt-ordering-asc::after,
table.dataTable thead td.dt-ordering-asc::after {
  content: "";
  position: absolute;
  right: .55rem;           /* LTR */
  top: 50%;
  width: .6rem;
  height: .6rem;
  transform: translateY(-35%) rotate(225deg);
  border-right: 2px solid #4f46e5;
  border-bottom: 2px solid #4f46e5;
  opacity: .95;
  pointer-events: none;
}

/* 5) Active DESC (point down) */
table.dataTable thead th.sorting_desc::after,
table.dataTable thead td.sorting_desc::after,
table.dataTable thead th.dt-ordering-desc::after,
table.dataTable thead td.dt-ordering-desc::after {
  content: "";
  position: absolute;
  right: .55rem;           /* LTR */
  top: 50%;
  width: .6rem;
  height: .6rem;
  transform: translateY(-65%) rotate(45deg);
  border-right: 2px solid #4f46e5;
  border-bottom: 2px solid #4f46e5;
  opacity: .95;
  pointer-events: none;
}

/* 6) RTL support */
[dir="rtl"] table.dataTable thead th,
[dir="rtl"] table.dataTable thead td {
  padding-right: .9rem !important;
  padding-left: 1.7rem !important; /* space on the left instead */
}
[dir="rtl"] table.dataTable thead th.sorting::after,
[dir="rtl"] table.dataTable thead td.sorting::after,
[dir="rtl"] table.dataTable thead th.dt-orderable::after,
[dir="rtl"] table.dataTable thead td.dt-orderable::after,
[dir="rtl"] table.dataTable thead th.sorting_asc::after,
[dir="rtl"] table.dataTable thead td.sorting_asc::after,
[dir="rtl"] table.dataTable thead th.dt-ordering-asc::after,
[dir="rtl"] table.dataTable thead td.dt-ordering-asc::after,
[dir="rtl"] table.dataTable thead th.sorting_desc::after,
[dir="rtl"] table.dataTable thead td.sorting_desc::after,
[dir="rtl"] table.dataTable thead th.dt-ordering-desc::after,
[dir="rtl"] table.dataTable thead td.dt-ordering-desc::after {
  right: auto;
  left: .55rem;
}


/* font sizes */

h1 { font-size: 22px; font-weight: 600; }
h2 { font-size: 20px; font-weight: 600; }
h3 { font-size: 18px; font-weight: 600; }
h4 { font-size: 16px; font-weight: 600; }
h5 { font-size: 15px; font-weight: 500; }
h6 { font-size: 14px; font-weight: 500; }

p  { font-size: 14px; font-weight: 400; line-height: 1.5; }
span { font-size: 15px; font-weight: 400; }
small { font-size: 12px; font-weight: 400; color: #666; }