/* Primary theming variables */
:root {
  --primary: #181818; /* base primary color */
  --primary-contrast: #fff; /* text on primary */
  --primary-border: #232323; /* border near primary */
  /* Prefer computed hover/active from base primary when supported */
  --primary-hover: color-mix(in srgb, var(--primary) 85%, #000 15%);
  --primary-active: color-mix(in srgb, var(--primary) 75%, #000 25%);

  /* Map Bootstrap core primary to our custom primary to avoid blue leaks */
  --bs-primary: var(--primary);
  --bs-primary-rgb: 24, 24, 24; /* rgb(#181818) */
  --bs-primary-active: var(--primary-active);
  --bs-primary-light: color-mix(in srgb, var(--primary) 15%, #fff 85%);
  --bs-primary-inverse: var(--primary-contrast);
  --bs-link-color: var(--primary);
  --bs-link-hover-color: var(--primary-hover);
}

/* Ensure theme-scoped variables (often set on body or [data-bs-theme]) also use our primary */
body,
[data-bs-theme="light"],
[data-bs-theme="dark"] {
  --bs-primary: var(--primary) !important;
  --bs-primary-rgb: 24, 24, 24 !important;
  --bs-primary-active: var(--primary-active) !important;
  --bs-primary-light: color-mix(in srgb, var(--primary) 15%, #fff 85%) !important;
  --bs-primary-inverse: var(--primary-contrast) !important;
  --bs-link-color: var(--primary) !important;
  --bs-link-hover-color: var(--primary-hover) !important;
  --bs-focus-ring-color: rgba(24, 24, 24, 0.25) !important;
  /* Some Metronic/Bootstrap components read these too */
  --bs-menu-link-color-hover: var(--primary) !important;
  --bs-menu-link-color-show: var(--primary) !important;
  --bs-menu-link-color-here: var(--primary) !important;
  --bs-menu-link-color-active: var(--primary) !important;
}

/* Extra safety: strong selector for primary button hover/focus */
.btn.btn-primary:hover,
.btn.btn-primary:focus {
  background-color: var(--primary-hover) !important;
  border-color: var(--primary) !important;
  color: var(--primary-contrast) !important;
}

/* Beat Metronic's :hover:not(.btn-active) important rule */
.btn.btn-primary:hover:not(.btn-active),
.btn.btn-primary:focus:not(.btn-active),
.btn.btn-primary:active:not(.btn-active),
.btn.btn-primary.show,
.show > .btn.btn-primary {
  background-color: var(--primary-active) !important;
  border-color: var(--primary-border) !important;
  color: var(--primary-contrast) !important;
}

/* Fallbacks when color-mix() is not supported */
@supports not (color: color-mix(in srgb, #000 50%, #fff 50%)) {
  :root {
    --primary-hover: #232323;
    --primary-active: #2c2c2c;
  }
}

/* Forzar color de los números del paginador de DataTables */
.dataTables_wrapper .dataTables_paginate .paginate_button,
.dataTables_wrapper .dataTables_paginate .paginate_button a {
  background: var(--primary) !important;
  color: var(--primary-contrast) !important;
  border: 1px solid var(--primary-border) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:focus,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: var(--primary-hover) !important;
  color: var(--primary-contrast) !important;
  border: 1px solid var(--primary) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button:focus {
  background: var(--primary-hover) !important;
  color: var(--primary-contrast) !important;
  border: 1px solid var(--primary) !important;
}
/* DataTables paginator custom color */
.dataTables_wrapper .dataTables_paginate .paginate_button {
  background: var(--primary) !important;
  color: var(--primary-contrast) !important;
  border: 1px solid var(--primary-border) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: var(--primary-hover) !important;
  color: var(--primary-contrast) !important;
  border: 1px solid var(--primary) !important;
}
/* Personalización btn-primary oscuro con degradados */
.btn-primary {
  background-color: var(--primary) !important;
  border-color: var(--primary-border) !important;
  color: var(--primary-contrast) !important;
  /* Bootstrap 5 variable overrides to make all internal states align */
  --bs-btn-bg: var(--primary);
  --bs-btn-border-color: var(--primary-border);
  --bs-btn-color: var(--primary-contrast);
  --bs-btn-hover-bg: var(--primary-hover);
  --bs-btn-hover-border-color: var(--primary);
  --bs-btn-hover-color: var(--primary-contrast);
  --bs-btn-active-bg: var(--primary-active);
  --bs-btn-active-border-color: var(--primary-border);
  --bs-btn-active-color: var(--primary-contrast);
  --bs-btn-focus-shadow-rgb: 24, 24, 24; /* remove blue focus ring */
}
.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--primary-hover) !important;
  border-color: var(--primary) !important;
  color: var(--primary-contrast) !important;
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-btn-focus-shadow-rgb, 24, 24, 24), 0.25) !important;
}
.btn-primary:active,
.btn-primary.active {
  background-color: var(--primary-active) !important;
  border-color: var(--primary-border) !important;
  color: var(--primary-contrast) !important;
}

/* Cover additional Bootstrap states to avoid fallback to theme blue */
.btn-primary:focus-visible {
  background-color: var(--primary-hover) !important;
  border-color: var(--primary) !important;
  color: var(--primary-contrast) !important;
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-btn-focus-shadow-rgb, 24, 24, 24), 0.25) !important;
}
.btn-check:checked + .btn-primary,
.btn-check:active + .btn-primary,
.show > .btn-primary.dropdown-toggle {
  background-color: var(--primary-active) !important;
  border-color: var(--primary-border) !important;
  color: var(--primary-contrast) !important;
}
.show > .btn-primary.dropdown-toggle:hover,
.show > .btn-primary.dropdown-toggle:focus,
.btn-primary.dropdown-toggle.show,
.btn-primary.dropdown-toggle.show:hover,
.btn-primary.dropdown-toggle.show:focus,
.btn-primary.dropdown-toggle[aria-expanded="true"],
.btn-primary.dropdown-toggle[aria-expanded="true"]:hover,
.btn-primary.dropdown-toggle[aria-expanded="true"]:focus,
.dropdown.show > .btn-primary.dropdown-toggle,
.dropdown.show > .btn-primary.dropdown-toggle:hover,
.dropdown.show > .btn-primary.dropdown-toggle:focus {
  background-color: var(--primary-active) !important;
  border-color: var(--primary-border) !important;
  color: var(--primary-contrast) !important;
  box-shadow: 0 0 0 0.25rem rgba(24, 24, 24, 0.25) !important;
}
.btn-primary.disabled, .btn-primary:disabled {
  background-color: var(--primary) !important;
  border-color: var(--primary-border) !important;
  color: var(--primary-contrast) !important;
}

/* Dropdown toggle caret for .btn-primary: remove theme SVG and use border caret */
.btn-primary.dropdown-toggle::after,
.show > .btn-primary.dropdown-toggle::after {
  background-image: none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  border-top: .3em solid var(--primary-contrast) !important;
  border-right: .3em solid transparent !important;
  border-left: .3em solid transparent !important;
  border-bottom: 0 !important;
}
.btn-primary.dropdown-toggle:hover::after,
.btn-primary.dropdown-toggle:focus::after,
.show > .btn-primary.dropdown-toggle:hover::after,
.show > .btn-primary.dropdown-toggle:focus::after {
  border-top-color: var(--primary-contrast) !important;
}

/* Extra specificity inside tables/toolbars to out-prioritize theme */
.card-toolbar .btn.btn-primary.dropdown-toggle:hover,
.table .btn.btn-primary.dropdown-toggle:hover {
  background-color: var(--primary-hover) !important;
  border-color: var(--primary) !important;
  color: var(--primary-contrast) !important;
}

  /* Outline primary variant to avoid theme blue */
  .btn-outline-primary {
    --bs-btn-color: var(--primary);
    --bs-btn-border-color: var(--primary);
    --bs-btn-hover-color: var(--primary-contrast);
    --bs-btn-hover-bg: var(--primary);
    --bs-btn-hover-border-color: var(--primary);
    --bs-btn-active-color: var(--primary-contrast);
    --bs-btn-active-bg: var(--primary-active);
    --bs-btn-active-border-color: var(--primary-border);
    --bs-btn-disabled-color: var(--primary);
    --bs-btn-disabled-border-color: var(--primary);
    color: var(--primary) !important;
    border-color: var(--primary) !important;
  }
  .btn-outline-primary:hover,
  .btn-outline-primary:focus {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
    color: var(--primary-contrast) !important;
  }

  /* Utilities that may still show blue from theme */
  .text-primary { color: var(--primary) !important; }
  .bg-primary { background-color: var(--primary) !important; color: var(--primary-contrast) !important; }
  .border-primary { border-color: var(--primary) !important; }

/* Ensure toolbar buttons also respect overrides even with extra specificity */
.card-toolbar .btn.btn-primary:hover,
.card-toolbar .btn.btn-primary:focus {
  background-color: var(--primary-hover) !important;
  border-color: var(--primary) !important;
  color: var(--primary-contrast) !important;
}

/* Link colors aligned with primary */
a,
.link-primary {
  color: var(--primary) !important;
}
a:hover,
a:focus,
.link-primary:hover,
.link-primary:focus {
  color: var(--primary-hover) !important;
}

/* DataTables + Bootstrap 5 pagination styling (override theme blue) */
.dataTables_wrapper .pagination .page-link {
  background-color: var(--primary) !important;
  color: var(--primary-contrast) !important;
  border: 1px solid var(--primary-border) !important;
}
.dataTables_wrapper .pagination .page-link:hover,
.dataTables_wrapper .pagination .page-link:focus {
  background-color: var(--primary-hover) !important;
  color: var(--primary-contrast) !important;
  border-color: var(--primary) !important;
  box-shadow: none !important;
  outline: 0 !important;
}
.dataTables_wrapper .pagination .page-item:hover .page-link {
  background-color: var(--primary-hover) !important;
  color: var(--primary-contrast) !important;
  border-color: var(--primary) !important;
}
.dataTables_wrapper .pagination .page-item.active .page-link,
.dataTables_wrapper .pagination .page-item.active .page-link:hover,
.dataTables_wrapper .pagination .page-item.active .page-link:focus {
  background-color: var(--primary-active) !important;
  color: var(--primary-contrast) !important;
  border-color: var(--primary-border) !important;
}
.dataTables_wrapper .pagination .page-item.disabled .page-link {
  background-color: var(--primary) !important;
  color: rgba(255,255,255,0.5) !important;
  border-color: var(--primary-border) !important;
}

/* DataTables row hover color scoped to data tables */
.dataTables_wrapper table.dataTable.table-hover > tbody > tr:hover,
.dataTables_wrapper table.dataTable.display tbody tr:hover {
  background-color: color-mix(in srgb, var(--primary) 9%, transparent) !important;
}
@supports not (color: color-mix(in srgb, #000 50%, #fff 50%)) {
  .dataTables_wrapper table.dataTable.table-hover > tbody > tr:hover,
  .dataTables_wrapper table.dataTable.display tbody tr:hover {
    background-color: rgba(24,24,24,0.06) !important; /* fallback */
  }
}