/* ==========================================
   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 */
}

/* 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 */
.dataTables_filter {
    float: right; /* Floats the element to the right */
    text-align: right; /* Aligns the text content (including the input) to the right */
}
.dataTables_length label,
.dataTables_filter label {
    color: var(--neutral-700);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.dataTables_length select {
    color: var(--neutral-800);
}
.dataTables_wrapper .dataTables_length select {
    appearance: auto;
    -webkit-appearance: auto;
    -moz-appearance: auto;
    background-image: initial !important;
}
.dataTables_filter input {
    border: none !important;
    border-bottom: 2px solid var(--neutral-300) !important;
    background: transparent !important;
    color: var(--neutral-900);
}
.dataTables_info {
    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(--primary) !important;
    border: 1px solid transparent;
    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(--primary-50, rgba(0, 0, 0, 0.03)) !important;
    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(--primary);
    border-color: transparent; /* cleaner look */
    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(--primary-50, rgba(0, 0, 0, 0.03));
    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);
}