/*
 * United Advantage admin theme
 * Sidebar + data-table tokens from the Figma admin mockup.
 */

:root {
  --ua-navy: #3d4e63;
  --ua-navy-rgb: 61, 78, 99;
  --ua-page-bg: #f0f2f5;
  --ua-sidebar-text: #a8b6c8;
  --ua-sidebar-text-soft: #d0d9e5;
  --ua-row-alt: #f9fafb;
  --ua-row-hover: #f3f4f6;
  --ua-text: #1f2937;
  --ua-text-muted: #4b5563;
  --ua-border: #e5e7eb;
  --ua-cyan: #0891b2;
  --ua-danger: #ef4444;

  --cui-sidebar-1: var(--ua-navy);
  --cui-sidebar-2: var(--ua-navy);
  --table-row-hover: var(--ua-row-hover);
}

/* -------------------------------------------------------------------------
 * Page
 * ------------------------------------------------------------------------- */

body,
.wrapper.bg-light {
  background-color: var(--ua-page-bg);
}

/* -------------------------------------------------------------------------
 * Sidebar — color, width, type, spacing
 * ------------------------------------------------------------------------- */

.sidebar {
  --cui-sidebar-width: 220px;
  --cui-sidebar-bg: var(--ua-navy);
  --cui-sidebar-color: var(--ua-sidebar-text-soft);
  --cui-sidebar-brand-bg: transparent;
  --cui-sidebar-brand-color: #fff;
  --cui-sidebar-brand-height: auto;
  --cui-sidebar-nav-title-color: var(--ua-sidebar-text);
  --cui-sidebar-nav-link-color: var(--ua-sidebar-text);
  --cui-sidebar-nav-link-icon-color: var(--ua-sidebar-text);
  --cui-sidebar-nav-link-hover-color: #fff;
  --cui-sidebar-nav-link-hover-bg: rgba(255, 255, 255, 0.05);
  --cui-sidebar-nav-link-hover-icon-color: #fff;
  --cui-sidebar-nav-link-active-color: #fff;
  --cui-sidebar-nav-link-active-bg: rgba(255, 255, 255, 0.1);
  --cui-sidebar-nav-link-active-icon-color: #fff;
  --cui-sidebar-nav-link-padding-x: 0.75rem;
  --cui-sidebar-nav-link-padding-y: 0.625rem;
  --cui-sidebar-nav-link-border-radius: 0.25rem;
  --cui-sidebar-nav-group-bg: transparent;
  --cui-sidebar-nav-group-toggle-show-color: #fff;
  --cui-sidebar-nav-group-items-padding-x: 0;
  background: var(--ua-navy) !important;
  color: var(--ua-sidebar-text-soft);
}

@media (min-width: 768px) {
  .sidebar:not(.sidebar-end):not(.hide):not(.sidebar-narrow):not(.sidebar-narrow-unfoldable) ~ * {
    --cui-sidebar-occupy-start: 220px;
  }
}

/* Compact icons in the expanded rail. Narrow/unfoldable keep CoreUI's 4rem icon column. */
.sidebar:not(.hide):not(.sidebar-narrow):not(.sidebar-narrow-unfoldable) {
  --cui-sidebar-nav-icon-width: 1.25rem;
  --cui-sidebar-nav-icon-height: 1rem;
  --cui-sidebar-nav-icon-font-size: 1rem;
}

.sidebar-brand .sidebar-brand-narrow {
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #fff;
}

.sidebar-narrow .sidebar-brand,
.sidebar-narrow-unfoldable:not(:hover) .sidebar-brand {
  justify-content: center;
  padding-left: 0;
  padding-right: 0;
}

.sidebar-narrow .sidebar-nav,
.sidebar-narrow-unfoldable:not(:hover) .sidebar-nav {
  padding-left: 0;
  padding-right: 0;
}

.sidebar-narrow .nav-link,
.sidebar-narrow-unfoldable:not(:hover) .nav-link {
  justify-content: center;
  gap: 0;
  padding-left: 0;
  padding-right: 0;
  overflow: hidden;
}

.sidebar-narrow .nav-link > span,
.sidebar-narrow-unfoldable:not(:hover) .nav-link > span,
.sidebar-narrow .nav-group-toggle::after,
.sidebar-narrow-unfoldable:not(:hover) .nav-group-toggle::after {
  display: none;
}

#sidebar.bg-dark-gradient,
#sidebar.bg-gradient {
  background: var(--ua-navy) !important;
}

.sidebar-brand {
  justify-content: flex-start;
  align-items: center;
  padding: 1.25rem 1.25rem 0.85rem;
  min-height: 0;
  background: transparent;
}

.sidebar-brand .navbar-brand {
  font-size: 1rem;
  line-height: 1.25;
  letter-spacing: 0.04em;
  color: #fff;
  font-weight: 400;
}

.sidebar-brand .navbar-brand strong,
.sidebar-brand .navbar-brand b {
  font-weight: 700;
}

.sidebar-nav {
  padding: 0 0.5rem 1rem;
}

.sidebar-nav .nav-link {
  gap: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.25;
  border-radius: 0.25rem;
}

.sidebar-nav .nav-icon {
  margin-right: 0;
}

.sidebar-nav .nav-link:hover {
  text-decoration: none;
}

.sidebar-nav .nav-link.active {
  font-weight: 500;
}

/* Highlight the ancestor of the current page (Manage / Agencies in the mockup). */
.sidebar-nav .nav-group:has(.nav-link.active) > .nav-group-toggle {
  color: #fff;
  font-weight: 500;
  background: rgba(255, 255, 255, 0.1);
}

.sidebar-nav .nav-group-items {
  padding-left: 0;
  margin-top: 0.125rem;
}

.sidebar-nav .nav-group-items .nav-link {
  gap: 0.5rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 2rem;
  padding-right: 0.75rem;
  font-size: 0.75rem;
}

.sidebar-nav .nav-group-items .nav-icon {
  --cui-sidebar-nav-icon-width: 0.85rem;
  --cui-sidebar-nav-icon-height: 0.75rem;
  --cui-sidebar-nav-icon-font-size: 0.75rem;
  flex-basis: 0.85rem;
  height: 0.75rem;
  font-size: 0.75rem;
}

.sidebar-nav .nav-group-items .nav-group-items .nav-link {
  padding-left: 3.5rem;
}

.sidebar-nav .nav-group-items .nav-link.active {
  background: transparent;
  color: #fff;
  font-weight: 600;
}

.sidebar-nav .nav-group-items .nav-link:hover {
  background: transparent;
  color: #fff;
}

/* -------------------------------------------------------------------------
 * Data tables — color, type, spacing
 * ------------------------------------------------------------------------- */

.ua-table-wrap {
  background: transparent;
}

.ua-table-wrap #crudTable_wrapper {
  margin: 0;
}

#crudTable_wrapper #crudTable,
#crudTable_wrapper table.dataTable,
table.tracking-table {
  border: 1px solid var(--ua-border);
}

#crudTable,
table.dataTable,
table.tracking-table,
.ua-datatable {
  font-size: 13px;
  color: var(--ua-text-muted);
  background-color: #fff !important;
  border-collapse: separate !important;
  border-spacing: 0;
}

#crudTable thead,
#crudTable tfoot,
table.dataTable thead,
table.dataTable tfoot,
table.tracking-table thead,
table.tracking-table tfoot,
.ua-datatable thead,
.ua-datatable tfoot {
  --cui-table-bg: var(--ua-navy);
  --cui-table-accent-bg: transparent;
  --cui-table-striped-bg: transparent;
  --cui-table-color: #fff;
  color: #fff;
}

#crudTable thead > tr > th,
#crudTable tfoot > tr > th,
table.dataTable thead > tr > th,
table.dataTable tfoot > tr > th,
table.tracking-table thead > tr > th,
table.tracking-table tfoot > tr > th,
.ua-datatable thead > tr > th,
.ua-datatable tfoot > tr > th {
  background-color: var(--ua-navy) !important;
  color: #fff !important;
  box-shadow: none !important;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  border-color: var(--ua-navy) !important;
  vertical-align: middle;
  line-height: 1.3;
}

#crudTable_wrapper #crudTable thead > tr > th,
#crudTable_wrapper #crudTable tfoot > tr > th,
#crudTable_wrapper table.dataTable thead > tr > th,
#crudTable_wrapper table.dataTable tfoot > tr > th,
#crudTable_wrapper #crudTable thead > tr > td,
#crudTable_wrapper table.dataTable thead > tr > td {
  padding: 0.625rem 1rem !important;
}

#crudTable_wrapper #crudTable thead > tr > th:not(.sorting_disabled),
#crudTable_wrapper #crudTable tfoot > tr > th:not(.sorting_disabled),
#crudTable_wrapper table.dataTable thead > tr > th:not(.sorting_disabled),
#crudTable_wrapper table.dataTable tfoot > tr > th:not(.sorting_disabled) {
  padding-right: 1.75rem !important;
}

#crudTable_wrapper #crudTable tbody > tr > td,
#crudTable_wrapper table.dataTable tbody > tr > td,
table.tracking-table tbody > tr > td {
  padding: 0.5rem 1rem !important;
  max-width: 15em;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--ua-text-muted);
  vertical-align: middle;
  line-height: 1.4;
  border-color: #f3f4f6;
}

#crudTable_wrapper #crudTable tr th:first-child,
#crudTable_wrapper #crudTable tr td:first-child,
#crudTable_wrapper table.dataTable tr th:first-child,
#crudTable_wrapper table.dataTable tr td:first-child,
#crudTable_wrapper #crudTable:not(.has-hidden-columns) tr td:first-child,
#crudTable_wrapper table.dataTable:not(.has-hidden-columns) tr td:first-child {
  display: table-cell;
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
  padding-left: 1rem !important;
}

#crudTable_wrapper #crudTable tbody > tr > td:first-child,
#crudTable_wrapper table.dataTable tbody > tr > td:first-child,
table.tracking-table tbody > tr > td:first-child {
  color: var(--ua-text);
}

/* First row white, second gray-50 — matches the Figma table. */
#crudTable.table-striped > tbody > tr:nth-of-type(odd) > *,
#crudTable_wrapper table.dataTable.table-striped > tbody > tr.odd > *,
.ua-datatable.table-striped > tbody > tr:nth-of-type(odd) > *,
table.tracking-table.table-striped > tbody > tr:nth-of-type(odd) > * {
  box-shadow: none !important;
  background-color: #fff !important;
}

#crudTable.table-striped > tbody > tr:nth-of-type(even) > *,
#crudTable_wrapper table.dataTable.table-striped > tbody > tr.even > *,
.ua-datatable.table-striped > tbody > tr:nth-of-type(even) > *,
table.tracking-table.table-striped > tbody > tr:nth-of-type(even) > * {
  box-shadow: inset 0 0 0 9999px var(--ua-row-alt) !important;
  background-color: transparent !important;
}

#crudTable.table-hover > tbody > tr:hover > *,
#crudTable_wrapper table.dataTable.table-hover > tbody > tr:hover > *,
.ua-datatable.table-hover > tbody > tr:hover > *,
table.dataTable.table-hover > tbody > tr:hover > * {
  box-shadow: inset 0 0 0 9999px var(--ua-row-hover) !important;
  background-color: transparent !important;
}

/* Sort icons on the dark header */
#crudTable_wrapper #crudTable thead .sorting:before,
#crudTable_wrapper #crudTable thead .sorting:after,
#crudTable_wrapper #crudTable thead .sorting_asc:before,
#crudTable_wrapper #crudTable thead .sorting_asc:after,
#crudTable_wrapper #crudTable thead .sorting_desc:before,
#crudTable_wrapper #crudTable thead .sorting_desc:after,
#crudTable_wrapper #crudTable tfoot .sorting:before,
#crudTable_wrapper #crudTable tfoot .sorting:after,
#crudTable_wrapper table.dataTable thead .sorting:before,
#crudTable_wrapper table.dataTable thead .sorting:after,
#crudTable_wrapper table.dataTable thead .sorting_asc:before,
#crudTable_wrapper table.dataTable thead .sorting_asc:after,
#crudTable_wrapper table.dataTable thead .sorting_desc:before,
#crudTable_wrapper table.dataTable thead .sorting_desc:after {
  color: rgba(255, 255, 255, 0.7);
  opacity: 0.7;
  top: 50%;
}

#crudTable_wrapper #crudTable .sorting:before,
#crudTable_wrapper #crudTable .sorting_asc:before,
#crudTable_wrapper #crudTable .sorting_desc:before,
#crudTable_wrapper table.dataTable .sorting:before,
#crudTable_wrapper table.dataTable .sorting_asc:before,
#crudTable_wrapper table.dataTable .sorting_desc:before {
  transform: translateY(-0.85em);
}

#crudTable_wrapper #crudTable .sorting:after,
#crudTable_wrapper #crudTable .sorting_asc:after,
#crudTable_wrapper #crudTable .sorting_desc:after,
#crudTable_wrapper table.dataTable .sorting:after,
#crudTable_wrapper table.dataTable .sorting_asc:after,
#crudTable_wrapper table.dataTable .sorting_desc:after {
  transform: translateY(-0.15em);
}

/* Line actions */
#crudTable td .btn-sm.btn-link,
table.dataTable td .btn-sm.btn-link {
  font-size: 0.75rem;
  padding: 0.125rem 0.15rem;
  margin-right: 0.35rem;
  line-height: 1.2;
  color: #2563eb;
}

#crudTable td .btn-sm.btn-link:hover,
table.dataTable td .btn-sm.btn-link:hover {
  color: #1e40af;
  background: transparent;
  text-decoration: none;
}

#crudTable td .btn-sm.btn-link[bp-button="show"],
#crudTable td .btn-sm.btn-link[data-button-type="show"] {
  color: var(--ua-cyan);
}

#crudTable td .btn-sm.btn-link[bp-button="show"]:hover,
#crudTable td .btn-sm.btn-link[data-button-type="show"]:hover {
  color: #155e75;
}

#crudTable td .btn-sm.btn-link[bp-button="delete"],
#crudTable td .btn-sm.btn-link[data-button-type="delete"] {
  color: var(--ua-danger);
}

#crudTable td .btn-sm.btn-link[bp-button="delete"]:hover,
#crudTable td .btn-sm.btn-link[data-button-type="delete"]:hover {
  color: #b91c1c;
}

/* Pagination — compact boxed pages, navy active state */
.pagination {
  --cui-pagination-padding-x: 0;
  --cui-pagination-padding-y: 0;
  --cui-pagination-active-bg: var(--ua-navy);
  --cui-pagination-active-border-color: var(--ua-navy);
  --cui-pagination-active-color: #fff;
  gap: 0.25rem;
}

.pagination .page-link,
.dt-paging .dt-paging-button .page-link {
  min-width: 1.75rem;
  height: 1.75rem;
  padding: 0 0.35rem !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1;
  color: #374151;
  background-color: #fff !important;
  border: 1px solid #d1d5db !important;
  border-radius: 0.25rem !important;
  margin: 0 !important;
}

.pagination .page-item.active .page-link,
.pagination .page-link.active,
.active > .page-link,
.dt-paging .dt-paging-button.active .page-link {
  color: #fff !important;
  background-color: var(--ua-navy) !important;
  border-color: var(--ua-navy) !important;
}

.pagination .page-link:hover,
.dt-paging .dt-paging-button .page-link:hover {
  background-color: #f9fafb !important;
  color: #111827;
}

.pagination .page-item.active .page-link:hover,
.dt-paging .dt-paging-button.active .page-link:hover {
  background-color: var(--ua-navy) !important;
  color: #fff !important;
}

.pagination .page-item.disabled .page-link,
.dt-paging .dt-paging-button.disabled .page-link {
  color: #9ca3af;
  background-color: #fff !important;
}

.dt-paging {
  margin-top: 0.75rem;
}

.dt-paging .dt-paging-button {
  padding: 0;
  margin: 0 0.125rem;
}