/* ==========================================================================================================
   THEME OVERRIDES  (purple theme: Primary #43175a, Secondary #5a1750, Info #eb984a, try #afafaf for Info)

   Why this file exists: the Blazorise Theme (Components/App.razor) colors the Blazorise components, but Bootstrap 5.3 (the CDN
   stylesheet) hard-codes its own blue in the form controls (Check, Switch, Radio, Range, focus rings), Pagination, Nav pills,
   Dropdown, List group, Progress and Accordion, and a few Blazorise extensions (Page progress, Rating, Jumbotron, Loading
   indicator, Snackbar, the rich text editor toolbar) carry their own default blue.

   TO GO BACK TO THE BLUE THEME: remove the <link> to this file in Components/App.razor. The original value of every
   declaration is also kept next to it as a comment.
   ========================================================================================================== */

/* ---- Variables read by Blazorise (--b-theme-*), Bootstrap (--bs-*) and the extensions that follow them ---- */
:root {
    --b-theme-primary: #43175a;
    --b-theme-secondary: #5a1750;
    --b-theme-info: #eb984a;
    --bs-primary-text-emphasis: #1a0a24; /* was #052c65 */
    --bs-primary-bg-subtle: #e3d4ea; /* was #cfe2ff */
    --bs-primary-border-subtle: #c8aed6; /* was #9ec5fe */
    --bs-info-text-emphasis: #5c3a14; /* was #055160 */
    --bs-info-bg-subtle: #fbe9d4; /* was #cff4fc */
    --bs-info-border-subtle: #f6d1a5; /* was #9eeaf9 */
    --bs-focus-ring-color: rgba(67, 23, 90, 0.25); /* was rgba(13, 110, 253, 0.25) */
    --b-loading-indicator-color-primary: #43175a; /* was #2196f3 */
    --b-snackbar-background-primary: #e3d4ea; /* was #cce5ff */
    --b-snackbar-text-primary: #1a0a24; /* was #004085 */
}

/* ---- Bootstrap: Check, Switch, Radio, Range and every focus ring ---- */
.form-control:focus,
.form-select:focus,
.form-check-input:focus,
.accordion-button:focus {
    border-color: #a07ab5; /* was #86b7fe */
    box-shadow: 0 0 0 0.25rem rgba(67, 23, 90, 0.25); /* was 0 0 0 0.25rem rgba(13, 110, 253, 0.25) */
}

.btn-close:focus,
.page-link:focus,
.b-is-autocomplete.b-is-autocomplete-multipleselection.focus {
    box-shadow: 0 0 0 0.25rem rgba(67, 23, 90, 0.25); /* was 0 0 0 0.25rem rgba(13, 110, 253, 0.25) */
}

/* checked / indeterminate Check, Radio and Switch (Blazorise adds the -primary class when a Color is set) */
.form-check-input:checked,
.form-check-input[type="checkbox"]:indeterminate,
.form-check-input.form-check-input-primary:checked,
.form-check.form-switch .form-check-input.form-check-input-primary:checked {
    background-color: #43175a; /* was #0d6efd */
    border-color: #43175a; /* was #0d6efd */
}

/* the Switch knob while it has focus */
.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='%23b48cc9'/%3e%3c/svg%3e"); /* was the same circle filled %2386b7fe */
}

.form-range::-webkit-slider-thumb,
.form-range::-moz-range-thumb {
    background-color: #43175a; /* was #0d6efd */
}

.form-range::-webkit-slider-thumb:active,
.form-range::-moz-range-thumb:active {
    background-color: #c8aed6; /* was #b6d4fe */
}

.form-range:focus::-webkit-slider-thumb,
.form-range:focus::-moz-range-thumb {
    box-shadow: 0 0 0 1px #fff, 0 0 0 0.25rem rgba(67, 23, 90, 0.25); /* was 0 0 0 1px #fff, 0 0 0 0.25rem rgba(13, 110, 253, 0.25) */
}

/* ---- Bootstrap components that read their blue from a component variable ---- */
.nav-pills {
    --bs-nav-pills-link-active-bg: #43175a; /* was #0d6efd */
}

.pagination {
    --bs-pagination-active-bg: #43175a; /* was #0d6efd */
    --bs-pagination-active-border-color: #43175a; /* was #0d6efd */
    --bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(67, 23, 90, 0.25); /* was 0 0 0 0.25rem rgba(13, 110, 253, 0.25) */
}

.dropdown-menu {
    --bs-dropdown-link-active-bg: #43175a; /* was #0d6efd */
}

.list-group {
    --bs-list-group-active-bg: #43175a; /* was #0d6efd */
    --bs-list-group-active-border-color: #43175a; /* was #0d6efd */
}

.progress,
.progress-stacked {
    --bs-progress-bar-bg: #43175a; /* was #0d6efd */
}

.accordion {
    --bs-accordion-btn-focus-border-color: #a07ab5; /* was #86b7fe */
    --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(67, 23, 90, 0.25); /* was 0 0 0 0.25rem rgba(13, 110, 253, 0.25) */
    --bs-accordion-active-color: #1a0a24; /* was var(--bs-primary-text-emphasis) */
    --bs-accordion-active-bg: #e3d4ea; /* was var(--bs-primary-bg-subtle) */
}

/* ---- Plain Bootstrap buttons (class="btn btn-primary"). Blazorise <Button Color=...> follows the Theme already. ---- */
.btn-primary {
    --bs-btn-bg: #43175a; /* was #0d6efd */
    --bs-btn-border-color: #43175a; /* was #0d6efd */
    --bs-btn-hover-bg: #34124a; /* was #0b5ed7 */
    --bs-btn-hover-border-color: #2e1042; /* was #0a58ca */
    --bs-btn-focus-shadow-rgb: 67, 23, 90; /* was 49, 132, 253 */
    --bs-btn-active-bg: #2e1042; /* was #0a58ca */
    --bs-btn-active-border-color: #280e39; /* was #0a53be */
    --bs-btn-disabled-bg: #43175a; /* was #0d6efd */
    --bs-btn-disabled-border-color: #43175a; /* was #0d6efd */
}

.btn-outline-primary {
    --bs-btn-color: #43175a; /* was #0d6efd */
    --bs-btn-border-color: #43175a; /* was #0d6efd */
    --bs-btn-hover-bg: #43175a; /* was #0d6efd */
    --bs-btn-hover-border-color: #43175a; /* was #0d6efd */
    --bs-btn-focus-shadow-rgb: 67, 23, 90; /* was 13, 110, 253 */
    --bs-btn-active-bg: #43175a; /* was #0d6efd */
    --bs-btn-active-border-color: #43175a; /* was #0d6efd */
    --bs-btn-disabled-color: #43175a; /* was #0d6efd */
    --bs-btn-disabled-border-color: #43175a; /* was #0d6efd */
}

.btn-secondary {
    --bs-btn-bg: #5a1750; /* was #6c757d */
    --bs-btn-border-color: #5a1750; /* was #6c757d */
    --bs-btn-hover-bg: #4a1241; /* was #5c636a */
    --bs-btn-hover-border-color: #430f3b; /* was #565e64 */
    --bs-btn-focus-shadow-rgb: 90, 23, 80; /* was 130, 138, 145 */
    --bs-btn-active-bg: #430f3b; /* was #565e64 */
    --bs-btn-active-border-color: #430f3b; /* was #51585e */
    --bs-btn-disabled-bg: #5a1750; /* was #6c757d */
    --bs-btn-disabled-border-color: #5a1750; /* was #6c757d */
}

.btn-outline-secondary {
    --bs-btn-color: #5a1750; /* was #6c757d */
    --bs-btn-border-color: #5a1750; /* was #6c757d */
    --bs-btn-hover-bg: #5a1750; /* was #6c757d */
    --bs-btn-hover-border-color: #5a1750; /* was #6c757d */
    --bs-btn-focus-shadow-rgb: 90, 23, 80; /* was 108, 117, 125 */
    --bs-btn-active-bg: #5a1750; /* was #6c757d */
    --bs-btn-active-border-color: #5a1750; /* was #6c757d */
    --bs-btn-disabled-color: #5a1750; /* was #6c757d */
    --bs-btn-disabled-border-color: #5a1750; /* was #6c757d */
}

.btn-info {
    --bs-btn-bg: #eb984a; /* was #0dcaf0 */
    --bs-btn-border-color: #eb984a; /* was #0dcaf0 */
    --bs-btn-hover-bg: #efa662; /* was #31d2f2 */
    --bs-btn-hover-border-color: #efa662; /* was #25cff2 */
    --bs-btn-focus-shadow-rgb: 235, 152, 74; /* was 11, 172, 204 */
    --bs-btn-active-bg: #f0ad6f; /* was #3dd5f3 */
    --bs-btn-active-border-color: #f0ad6f; /* was #25cff2 */
    --bs-btn-disabled-bg: #eb984a; /* was #0dcaf0 */
    --bs-btn-disabled-border-color: #eb984a; /* was #0dcaf0 */
}

.btn-outline-info {
    --bs-btn-color: #eb984a; /* was #0dcaf0 */
    --bs-btn-border-color: #eb984a; /* was #0dcaf0 */
    --bs-btn-hover-bg: #eb984a; /* was #0dcaf0 */
    --bs-btn-hover-border-color: #eb984a; /* was #0dcaf0 */
    --bs-btn-focus-shadow-rgb: 235, 152, 74; /* was 13, 202, 240 */
    --bs-btn-active-bg: #eb984a; /* was #0dcaf0 */
    --bs-btn-active-border-color: #eb984a; /* was #0dcaf0 */
    --bs-btn-disabled-color: #eb984a; /* was #0dcaf0 */
    --bs-btn-disabled-border-color: #eb984a; /* was #0dcaf0 */
}

/* ---- Blazorise components and extensions that carry their own blue ---- */
.context-menu-toolbar-item.active,
.jumbotron.jumbotron-primary,
.b-page-progress .b-page-progress-indicator.b-page-progress-indicator-primary {
    background-color: #43175a; /* was #0d6efd */
}

.rating .rating-item.rating-item-primary {
    color: #43175a; /* was #0d6efd */
}

/* ---- Rich text editor (Quill): toolbar hover/active and links. The "blue" text/background choices inside the editor are user content and stay. ---- */
html .ql-snow.ql-toolbar button:hover,
html .ql-snow .ql-toolbar button:hover,
html .ql-snow.ql-toolbar button:focus,
html .ql-snow .ql-toolbar button:focus,
html .ql-snow.ql-toolbar button.ql-active,
html .ql-snow .ql-toolbar button.ql-active,
html .ql-snow.ql-toolbar .ql-picker-label:hover,
html .ql-snow .ql-toolbar .ql-picker-label:hover,
html .ql-snow.ql-toolbar .ql-picker-label.ql-active,
html .ql-snow .ql-toolbar .ql-picker-label.ql-active,
html .ql-snow.ql-toolbar .ql-picker-item:hover,
html .ql-snow .ql-toolbar .ql-picker-item:hover,
html .ql-snow.ql-toolbar .ql-picker-item.ql-selected,
html .ql-snow .ql-toolbar .ql-picker-item.ql-selected {
    color: #43175a; /* was #06c */
}

html .ql-snow.ql-toolbar button:hover .ql-fill,
html .ql-snow .ql-toolbar button:hover .ql-fill,
html .ql-snow.ql-toolbar button:focus .ql-fill,
html .ql-snow .ql-toolbar button:focus .ql-fill,
html .ql-snow.ql-toolbar button.ql-active .ql-fill,
html .ql-snow .ql-toolbar button.ql-active .ql-fill,
html .ql-snow.ql-toolbar .ql-picker-label:hover .ql-fill,
html .ql-snow .ql-toolbar .ql-picker-label:hover .ql-fill,
html .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill,
html .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-fill,
html .ql-snow.ql-toolbar .ql-picker-item:hover .ql-fill,
html .ql-snow .ql-toolbar .ql-picker-item:hover .ql-fill,
html .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill,
html .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-fill,
html .ql-snow.ql-toolbar button:hover .ql-stroke.ql-fill,
html .ql-snow .ql-toolbar button:hover .ql-stroke.ql-fill,
html .ql-snow.ql-toolbar button:focus .ql-stroke.ql-fill,
html .ql-snow .ql-toolbar button:focus .ql-stroke.ql-fill,
html .ql-snow.ql-toolbar button.ql-active .ql-stroke.ql-fill,
html .ql-snow .ql-toolbar button.ql-active .ql-stroke.ql-fill,
html .ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,
html .ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,
html .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,
html .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,
html .ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,
html .ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,
html .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill,
html .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill {
    fill: #43175a; /* was #06c */
}

html .ql-snow.ql-toolbar button:hover .ql-stroke,
html .ql-snow .ql-toolbar button:hover .ql-stroke,
html .ql-snow.ql-toolbar button:focus .ql-stroke,
html .ql-snow .ql-toolbar button:focus .ql-stroke,
html .ql-snow.ql-toolbar button.ql-active .ql-stroke,
html .ql-snow .ql-toolbar button.ql-active .ql-stroke,
html .ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke,
html .ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke,
html .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke,
html .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke,
html .ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke,
html .ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke,
html .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke,
html .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke,
html .ql-snow.ql-toolbar button:hover .ql-stroke-miter,
html .ql-snow .ql-toolbar button:hover .ql-stroke-miter,
html .ql-snow.ql-toolbar button:focus .ql-stroke-miter,
html .ql-snow .ql-toolbar button:focus .ql-stroke-miter,
html .ql-snow.ql-toolbar button.ql-active .ql-stroke-miter,
html .ql-snow .ql-toolbar button.ql-active .ql-stroke-miter,
html .ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke-miter,
html .ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke-miter,
html .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,
html .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,
html .ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke-miter,
html .ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke-miter,
html .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter,
html .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter {
    stroke: #43175a; /* was #06c */
}

html .ql-snow a {
    color: #43175a; /* was #06c */
}