/* Shared brand bridge for Bootstrap and legacy admin components. Loaded last. */
:root {
  --admin-workspace-background: #f6f7f9;
  --admin-workspace-ink: #202735;
  --admin-workspace-muted: #667085;
  --admin-workspace-border: #e4e7ec;
  --bs-primary: var(--admin-brand-primary);
  --bs-primary-rgb: var(--admin-brand-primary-rgb);
  --bs-link-color: var(--admin-brand-ink);
  --bs-link-hover-color: var(--admin-brand-ink);
  --bs-focus-ring-color: var(--admin-brand-ring);
}

/* Match bank40: white content on a neutral canvas, with the brand in accents. */
body {
  background: var(--admin-workspace-background);
  color: var(--admin-workspace-ink);
}

h1, h2, h3, h4, h5, h6,
.page-title,
.card-title {
  color: var(--admin-workspace-ink);
}

p, li, span,
a span { color: inherit; }

a:hover { color: var(--admin-brand-ink); }
a span:hover { color: inherit; }

.text-muted { color: var(--admin-workspace-muted) !important; }

.form-control,
.form-select {
  color: var(--admin-workspace-ink);
  border-color: var(--admin-workspace-border);
}

.form-control::placeholder,
.form-select::placeholder { color: var(--admin-workspace-muted); }

.card { border-color: var(--admin-workspace-border); }
.card-header,
.card-footer { border-color: var(--admin-workspace-border); }

.btn--primary,
.btn-primary {
  --color: var(--admin-brand-primary);
  --btn-color: var(--admin-brand-on-primary);
  --bs-btn-color: var(--admin-brand-on-primary);
  --bs-btn-bg: var(--admin-brand-primary);
  --bs-btn-border-color: var(--admin-brand-primary);
  --bs-btn-hover-color: var(--admin-brand-on-primary-hover);
  --bs-btn-hover-bg: var(--admin-brand-primary-hover);
  --bs-btn-hover-border-color: var(--admin-brand-primary-hover);
  --bs-btn-active-color: var(--admin-brand-on-primary-hover);
  --bs-btn-active-bg: var(--admin-brand-primary-hover);
  --bs-btn-active-border-color: var(--admin-brand-primary-hover);
  --bs-btn-disabled-color: var(--admin-brand-on-primary);
  --bs-btn-disabled-bg: var(--admin-brand-primary);
  --bs-btn-disabled-border-color: var(--admin-brand-primary);
  background-color: var(--admin-brand-primary) !important;
  border-color: var(--admin-brand-primary) !important;
  color: var(--admin-brand-on-primary) !important;
}

:is(.btn--primary, .btn-primary):is(:hover, :active, :focus, :focus-visible) {
  --color: var(--admin-brand-primary-hover);
  --btn-color: var(--admin-brand-on-primary-hover);
  background-color: var(--admin-brand-primary-hover) !important;
  border-color: var(--admin-brand-primary-hover) !important;
  color: var(--admin-brand-on-primary-hover) !important;
}

.btn-outline--primary,
.btn-outline-primary {
  --color: var(--admin-brand-ink);
  --btn-color: var(--admin-brand-on-primary);
  background-color: var(--admin-brand-soft) !important;
  border-color: var(--admin-brand-border) !important;
  color: var(--admin-brand-ink) !important;
}

:is(.btn-outline--primary, .btn-outline-primary):is(:hover, :active, :focus-visible) {
  --color: var(--admin-brand-primary);
  background-color: var(--admin-brand-primary) !important;
  border-color: var(--admin-brand-primary) !important;
  color: var(--admin-brand-on-primary) !important;
}

:is(.btn--primary, .btn-primary, .btn-outline--primary, .btn-outline-primary):focus-visible {
  outline: 2px solid var(--admin-brand-ink);
  outline-offset: 2px;
  box-shadow: 0 0 0 3px var(--admin-brand-ring);
}

.btn--primary.btn--shadow,
.btn-outline--primary.btn--shadow,
.btn--primary.btn--shadow:hover,
.btn-outline--primary.btn--shadow:hover {
  box-shadow: 0 3px 8px var(--admin-brand-ring);
}

.btn--primary.btn--gradi,
.btn-primary.btn--gradi {
  background-image: none !important;
  text-shadow: none;
}

.bg--primary,
.bg-primary,
.icon-btn,
.notification-via.active::after {
  color: var(--admin-brand-on-primary) !important;
}

.short-codes::before,
.file-upload-wrapper::before,
div.dataTables_wrapper .dt-buttons button:is(:hover, :focus, :active) span {
  color: var(--admin-brand-on-primary);
}

:is(.bg--primary, .bg-primary) :is(h1, h2, h3, h4, h5, h6, .card-title) {
  color: var(--admin-brand-on-primary) !important;
}

:is(.bg--primary, .bg-primary) > .btn-outline-light {
  color: var(--admin-brand-on-primary);
  border-color: var(--admin-brand-on-primary);
}

:is(.bg--primary, .bg-primary) > .btn-outline-light:hover {
  background-color: var(--admin-brand-on-primary);
  color: var(--admin-brand-primary);
}

.text-primary,
.link-primary {
  color: var(--admin-brand-ink) !important;
}

.badge--primary {
  background-color: var(--admin-brand-soft);
  color: var(--admin-brand-ink);
}

.pagination .page-item.active .page-link,
.dataTables_paginate .pagination .page-item.active .page-link {
  background-color: var(--admin-brand-primary);
  border-color: var(--admin-brand-primary);
  color: var(--admin-brand-on-primary);
}

.pagination .page-item.active .page-link:hover {
  background-color: var(--admin-brand-primary-hover);
  border-color: var(--admin-brand-primary-hover);
  color: var(--admin-brand-on-primary-hover);
}

.page-link:focus {
  box-shadow: 0 0 0 3px var(--admin-brand-ring);
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  border-color: var(--admin-brand-primary);
  box-shadow: 0 0 0 3px var(--admin-brand-ring);
}

.form-check-input:checked,
.form-check-input[type="checkbox"]:indeterminate {
  background-color: var(--admin-brand-primary);
  border-color: var(--admin-brand-primary);
}

.form-check-input[type="checkbox"]:checked { background-image: var(--admin-brand-checkmark); }
.form-check-input[type="radio"]:checked { background-image: var(--admin-brand-radio); }
.form-check-input[type="checkbox"]:indeterminate { background-image: var(--admin-brand-indeterminate); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--admin-brand-primary); }

.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
  background-color: var(--admin-brand-primary) !important;
  color: var(--admin-brand-on-primary);
}

.select2-container--open .select2-selection.select2-selection--single,
.select2-container--open .select2-selection.select2-selection--multiple {
  box-shadow: 0 0 0 3px var(--admin-brand-ring);
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  background-color: var(--admin-brand-primary);
  color: var(--admin-brand-on-primary);
}

.admin-topbar .navbar-search-field:focus {
  border-color: var(--admin-brand-primary);
  box-shadow: 0 0 0 2px var(--admin-brand-ring);
}