/**
 * Kleeja bootstrap black style
 * Loaded after the stylesheet of the bootstrap style, it only changes colors: the navbar is black,
 * and the primary color is black in light mode and near white in dark mode, so it always stands out.
 * Bootstrap 5.3 writes the primary blue directly into some components, those are listed here one by one.
 */

/*
 * The primary color and its shades. The --kj-* variables are what Bootstrap has no variable for:
 * the hover and active shades, and the color of text on the primary color
 */
:root,
[data-bs-theme="light"] {
    --bs-primary: #1b1e21;
    --bs-primary-rgb: 27, 30, 33;
    --bs-primary-text-emphasis: #1b1e21;
    --bs-primary-bg-subtle: #e9ecef;
    --bs-primary-border-subtle: #ced4da;
    --bs-link-color: #1b1e21;
    --bs-link-color-rgb: 27, 30, 33;
    --bs-link-hover-color: #495057;
    --bs-link-hover-color-rgb: 73, 80, 87;
    --bs-focus-ring-color: rgba(27, 30, 33, 0.25);
    --kj-primary-hover: #3d4042;
    --kj-primary-active: #494b4d;
    --kj-primary-contrast: #fff;
    --kj-primary-focus-border: #8d8f90;
}

[data-bs-theme="dark"] {
    --bs-primary: #f8f9fa;
    --bs-primary-rgb: 248, 249, 250;
    --bs-primary-text-emphasis: #f8f9fa;
    --bs-primary-bg-subtle: #343a40;
    --bs-primary-border-subtle: #495057;
    --bs-link-color: #f8f9fa;
    --bs-link-color-rgb: 248, 249, 250;
    --bs-link-hover-color: #adb5bd;
    --bs-link-hover-color-rgb: 173, 181, 189;
    --bs-focus-ring-color: rgba(248, 249, 250, 0.25);
    --kj-primary-hover: #d3d4d5;
    --kj-primary-active: #c6c7c8;
    --kj-primary-contrast: #1b1e21;
}

/* header.html: the navbar keeps the navbar-primary rules of the bootstrap style, only its color is black in both modes */
.navbar-primary {
    background-color: #101214;
}

[data-bs-theme="dark"] .navbar-primary {
    border-bottom: var(--bs-border-width) solid var(--bs-border-color-translucent);
}

/* the focus ring of the page would not show on the black navbar */
.navbar-primary .nav-link:focus-visible {
    box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.25);
}

/* buttons */
.btn-primary {
    --bs-btn-color: var(--kj-primary-contrast);
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-color: var(--kj-primary-contrast);
    --bs-btn-hover-bg: var(--kj-primary-hover);
    --bs-btn-hover-border-color: var(--kj-primary-hover);
    --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
    --bs-btn-active-color: var(--kj-primary-contrast);
    --bs-btn-active-bg: var(--kj-primary-active);
    --bs-btn-active-border-color: var(--kj-primary-active);
    --bs-btn-disabled-color: var(--kj-primary-contrast);
    --bs-btn-disabled-bg: var(--bs-primary);
    --bs-btn-disabled-border-color: var(--bs-primary);
}

.btn-outline-primary {
    --bs-btn-color: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-color: var(--kj-primary-contrast);
    --bs-btn-hover-bg: var(--bs-primary);
    --bs-btn-hover-border-color: var(--bs-primary);
    --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
    --bs-btn-active-color: var(--kj-primary-contrast);
    --bs-btn-active-bg: var(--bs-primary);
    --bs-btn-active-border-color: var(--bs-primary);
    --bs-btn-disabled-color: var(--bs-primary);
    --bs-btn-disabled-border-color: var(--bs-primary);
}

/* text on a primary background is white in light mode and black in dark mode */
.text-bg-primary {
    color: var(--kj-primary-contrast) !important;
}

.badge.bg-primary {
    --bs-badge-color: var(--kj-primary-contrast);
}

/* form fields */
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: var(--kj-primary-focus-border);
    box-shadow: 0 0 0 0.25rem var(--bs-focus-ring-color);
}

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

/* the check, the dot and the dash are white in Bootstrap, black on the near white of dark mode */
[data-bs-theme="dark"] .form-check-input:checked[type="checkbox"] {
    --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%231b1e21' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}

[data-bs-theme="dark"] .form-check-input:checked[type="radio"] {
    --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%231b1e21'/%3e%3c/svg%3e");
}

[data-bs-theme="dark"] .form-check-input[type="checkbox"]:indeterminate {
    --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%231b1e21' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e");
}

/* the knob of a switch, the checked rule comes again after the focus rule so a checked switch keeps its knob */
.form-switch .form-check-input:focus {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%238d8f90'/%3e%3c/svg%3e");
}

.form-switch .form-check-input:checked {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}

[data-bs-theme="dark"] .form-switch .form-check-input:checked {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%231b1e21'/%3e%3c/svg%3e");
}

/* a selector list with both vendor thumbs would be dropped by every browser, so each one has its own rules */
.form-range::-webkit-slider-thumb {
    background-color: var(--bs-primary);
}

.form-range::-webkit-slider-thumb:active {
    background-color: var(--kj-primary-active);
}

.form-range:focus::-webkit-slider-thumb {
    box-shadow:
        0 0 0 1px var(--bs-body-bg),
        0 0 0 0.25rem var(--bs-focus-ring-color);
}

.form-range::-moz-range-thumb {
    background-color: var(--bs-primary);
}

.form-range::-moz-range-thumb:active {
    background-color: var(--kj-primary-active);
}

.form-range:focus::-moz-range-thumb {
    box-shadow:
        0 0 0 1px var(--bs-body-bg),
        0 0 0 0.25rem var(--bs-focus-ring-color);
}

/* navigation, menus and lists */
.nav-link:focus-visible {
    box-shadow: 0 0 0 0.25rem var(--bs-focus-ring-color);
}

.nav-pills {
    --bs-nav-pills-link-active-color: var(--kj-primary-contrast);
    --bs-nav-pills-link-active-bg: var(--bs-primary);
}

.dropdown-menu {
    --bs-dropdown-link-active-color: var(--kj-primary-contrast);
    --bs-dropdown-link-active-bg: var(--bs-primary);
}

.pagination {
    --bs-pagination-focus-box-shadow: 0 0 0 0.25rem var(--bs-focus-ring-color);
    --bs-pagination-active-color: var(--kj-primary-contrast);
    --bs-pagination-active-bg: var(--bs-primary);
    --bs-pagination-active-border-color: var(--bs-primary);
}

.list-group {
    --bs-list-group-active-color: var(--kj-primary-contrast);
    --bs-list-group-active-bg: var(--bs-primary);
    --bs-list-group-active-border-color: var(--bs-primary);
}

.progress,
.progress-stacked {
    --bs-progress-bar-color: var(--kj-primary-contrast);
    --bs-progress-bar-bg: var(--bs-primary);
}

.accordion {
    --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem var(--bs-focus-ring-color);
    --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%231b1e21' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

[data-bs-theme="dark"] .accordion-button::after {
    --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23dee2e6' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23f8f9fa' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

.btn-close {
    --bs-btn-close-focus-shadow: 0 0 0 0.25rem var(--bs-focus-ring-color);
}