/* ==========================================
   THEME — BASIC
   Requires: your theme-vars first (defines --primary, --primary-50..900 etc.)
   Behavior: Brand only on action elements; neutral UI; neutral links.
========================================== */

/* Kill Bootstrap blue, define neutral links for BASIC */
:root {
    --bs-primary: var(--primary);
    --bs-link-color: #2f3439; /* neutral link color */
    --bs-link-hover-color: #1f2226; /* darker neutral on hover */
    --tr-notification-trigger-radius: 999px;
    --tr-notification-trigger-bg: transparent;
    --tr-notification-trigger-color: var(--neutral-700, #464d54);
    --tr-notification-trigger-bg-hover: rgba(var(--primary-rgb), 0.06);
    --tr-notification-trigger-color-hover: var(--neutral-900, #1f2226);
    --tr-notification-trigger-shadow: none;
    --tr-notification-trigger-shadow-hover: inset 0 0 0 1px rgba(47, 52, 57, 0.08);
    --tr-notification-trigger-shift-hover: 0;
    --tr-notification-icon-size: 1.02rem;
    --tr-notification-badge-size: 1.08rem;
    --tr-notification-badge-padding-x: .24rem;
    --tr-notification-badge-font-size: .63rem;
    --tr-notification-badge-font-weight: 700;
    --tr-notification-badge-radius: 999px;
    --tr-notification-badge-top: .12rem;
    --tr-notification-badge-right: -.10rem;
    --tr-notification-badge-color: var(--primary-text, #fff);
    --tr-notification-badge-border: #ffffff;
    --tr-notification-badge-border-width: 2px;
    --tr-notification-badge-bg: linear-gradient(135deg, var(--primary-500, var(--primary)) 0%, var(--primary-700, var(--primary-dark, var(--primary))) 100%);
    --tr-notification-badge-shadow: 0 2px 6px rgba(var(--primary-rgb), 0.14);
}

/* Core brand utility mappings */
.text-primary {
    color: var(--primary) !important;
}
.bg-primary {
    background-color: var(--primary) !important;
    color: var(--primary-text, #fff) !important;
}

/* Buttons (ALWAYS brand) */
.btn {
    box-shadow: none;
}
.btn.btn-primary {
    --bs-btn-bg: var(--primary);
    --bs-btn-border-color: var(--primary);
    --bs-btn-color: var(--primary-text, #fff);
    --bs-btn-hover-bg: var(--primary-dark, #0c1e48);
    --bs-btn-hover-border-color: var(--primary-dark, #0c1e48);
    --bs-btn-active-bg: var(--primary-darker, #0a173a);
    --bs-btn-active-border-color: var(--primary-darker, #0a173a);
    --bs-btn-disabled-bg: var(--primary);
    --bs-btn-disabled-border-color: var(--primary);
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
    color: var(--primary-text, #fff) !important;
}
.btn.btn-primary:hover,
.btn.btn-primary:focus,
.btn.btn-primary:active,
.btn.btn-primary:not(:disabled):not(.disabled).active,
.show > .btn.btn-primary.dropdown-toggle {
    background-color: var(--bs-btn-hover-bg) !important;
    border-color: var(--bs-btn-hover-border-color) !important;
    color: var(--primary-text, #fff) !important;
}

/* Outline primary */
.btn.btn-outline-primary {
    --bs-btn-color: var(--primary);
    --bs-btn-border-color: var(--primary);
    --bs-btn-hover-color: var(--primary-text, #fff);
    --bs-btn-hover-bg: var(--primary);
    --bs-btn-hover-border-color: var(--primary);
    color: var(--primary) !important;
    border-color: var(--primary) !important;
    background: transparent !important;
}
.btn.btn-outline-primary:hover,
.btn.btn-outline-primary:focus,
.btn.btn-outline-primary:active,
.btn.btn-outline-primary:not(:disabled):not(.disabled).active,
.show > .btn.btn-outline-primary.dropdown-toggle {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
    color: var(--primary-text, #fff) !important;
}

/* Icon color follows current text */
.btn i,
.btn .fa,
.btn .bi {
    color: currentColor !important;
}
.btn-success,
.btn-danger,
.btn-warning,
.btn-info,
.btn-dark {
    color: #fff !important;
}

/* Always-brand utilities */
.badge-primary,
.badge.bg-primary {
    background-color: var(--primary) !important;
    color: var(--primary-text, #fff) !important;
}
.progress .bg-primary {
    background-color: var(--primary) !important;
}
.form-check-input:checked {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
}

/* Neutral chrome (keeps BASIC distinct) */
:root {
    --neutral-50: #f6f7f9;
    --neutral-100: #eef0f3;
    --neutral-200: #e3e6ea;
    --neutral-300: #cfd5dc;
    --neutral-400: #a9b4c0;
    --neutral-500: #7b8794;
    --neutral-600: #5d6670;
    --neutral-700: #464d54;
    --neutral-800: #2f3439;
    --neutral-900: #1f2226;
    --focus-ring: 0 0 0 0.2rem rgba(0, 0, 0, 0.12);
}

/* Navs/Tabs */
/* ===== BASIC: Tabs & Pills (primary-driven) ===== */

/* Nav-pills */
.nav-pills .nav-link {
    color: var(--primary);
    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.nav-pills .nav-link:hover {
    color: var(--primary-dark, #0c1e48);
    background-color: var(--primary-50, rgba(0, 0, 0, 0.03));
}
.nav-pills .nav-link.active {
    background-color: var(--primary) !important;
    color: var(--primary-text, #fff) !important;
}

/* Nav-tabs */
.nav-tabs .nav-link {
    color: var(--primary);
    border-bottom: 2px solid transparent;
    transition: border-color 0.2s, color 0.2s, background-color 0.2s;
}
.nav-tabs .nav-link:hover {
    color: var(--primary-dark, #0c1e48);
    border-bottom-color: var(--primary-300, rgba(0, 0, 0, 0.18));
}
/* Active tab: visible primary state */
.nav-tabs .nav-link.active {
    color: var(--primary-text, #fff) !important;
    background-color: var(--primary) !important;
    border-bottom-color: var(--primary) !important;
}

/* Breadcrumbs */
.breadcrumb .breadcrumb-item a {
    color: var(--neutral-700);
}
.breadcrumb .breadcrumb-item a:hover {
    color: var(--neutral-900);
}

/* Tables */
.table thead th {
    background-color: var(--neutral-100) !important;
    color: var(--neutral-800) !important;
}
.table-hover tbody tr:hover {
    background-color: var(--neutral-50) !important;
}

/* DataTables controls are shared in ui-components.css. */
.dataTables_info {
    color: var(--muted-text-color, var(--neutral-600)) !important;
    display: block !important;
    margin-top: 0.25rem;
    white-space: normal;
}
/* ===== BASIC: DataTables pager (primary-driven) ===== */
.dataTables_wrapper .dataTables_paginate .paginate_button {
    color: var(--content-text-color, var(--primary)) !important;
    border: 1px solid var(--surface-border-color, var(--primary-300, rgba(0, 0, 0, 0.18))) !important;
    border-radius: var(--component-corner-radius, 0) !important;
    background: var(--surface-background-color, #fff) !important;
    min-width: 48px;
    transition: color 0.2s, background-color 0.2s, border-color 0.2s;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    color: var(--primary-dark, #0c1e48) !important;
    background-color: var(--table-row-hover-background-color, var(--primary-50, rgba(0, 0, 0, 0.03))) !important;
    border-color: var(--input-focus-border-color, var(--primary-300, rgba(0, 0, 0, 0.18))) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
    color: var(--primary-text, #fff) !important;
}

/* Pagination */
/* ===== BASIC: Pagination (primary-driven) ===== */
.pagination .page-link {
    color: var(--content-text-color, var(--primary));
    border-color: var(--surface-border-color, transparent);
    border-radius: var(--component-corner-radius, 0) !important;
    background-color: var(--surface-background-color, transparent);
    transition: color 0.2s, background-color 0.2s, border-color 0.2s,
        box-shadow 0.2s;
}
.pagination .page-link:hover {
    color: var(--primary-dark, #0c1e48);
    background-color: var(--table-row-hover-background-color, var(--primary-50, rgba(0, 0, 0, 0.03)));
    border-color: var(--input-focus-border-color, var(--primary-300, rgba(0, 0, 0, 0.18)));
}
.pagination .page-item.active .page-link {
    color: var(--primary-text, #fff) !important;
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
}
.pagination .page-item.disabled .page-link {
    color: #9aa3ad; /* subtle disabled */
    background-color: transparent;
    border-color: transparent;
    opacity: 0.7;
}
/* Focus ring tuned to primary */
.pagination .page-link:focus {
    box-shadow: 0 0 0 0.2rem var(--primary-300, rgba(0, 0, 0, 0.18));
}

/* Alerts (primary-like) */
.alert-primary {
    background-color: var(--neutral-100) !important;
    color: var(--neutral-900) !important;
    border-left: 4px solid var(--neutral-400) !important;
}
.toast-primary .toast-header {
    background-color: var(--neutral-100) !important;
    color: var(--neutral-900) !important;
}

/* Modals / Bars */
.modal-header.bg-primary,
.modal-primary .modal-header {
    background-color: var(--neutral-800) !important;
    color: #fff !important;
}
.navbar-primary,
.sidebar-dark-primary {
    background-color: var(--neutral-900) !important;
}

/* Focus & selection */
:focus {
    outline: none;
    box-shadow: var(--focus-ring) !important;
}
::selection {
    background-color: var(--neutral-200);
    color: var(--neutral-900);
}