/*!
 * BruzzelPOS color scheme: black with orange accent (#f27d03).
 * Overrides Bootstrap 5.3 variables; shared by frontend, backend and mpos.
 */

/* accent color, valid in both color modes */
:root,
[data-bs-theme="light"],
[data-bs-theme="dark"] {
    --bp-accent: #f27d03;
    --bp-accent-rgb: 242, 125, 3;
    --bp-accent-hover: #d96f02;
    --bp-accent-active: #c26302;
    --bp-black: #000;

    --bs-primary: var(--bp-accent);
    --bs-primary-rgb: var(--bp-accent-rgb);
    --bs-focus-ring-color: rgba(var(--bp-accent-rgb), .25);
}

/* light mode: white content, black chrome, darker orange for readable text */
:root,
[data-bs-theme="light"] {
    --bs-primary-text-emphasis: #613201;
    --bs-primary-bg-subtle: #fde5cd;
    --bs-primary-border-subtle: #facb9a;
    --bs-link-color: #b85d00;
    --bs-link-color-rgb: 184, 93, 0;
    --bs-link-hover-color: #8a4600;
    --bs-link-hover-color-rgb: 138, 70, 0;
}

/* dark mode: pure black base */
[data-bs-theme="dark"] {
    --bs-body-bg: #000;
    --bs-body-bg-rgb: 0, 0, 0;
    --bs-secondary-bg: #161616;
    --bs-secondary-bg-rgb: 22, 22, 22;
    --bs-tertiary-bg: #0d0d0d;
    --bs-tertiary-bg-rgb: 13, 13, 13;
    --bs-border-color: #2b2b2b;
    --bs-primary-text-emphasis: #f7b168;
    --bs-primary-bg-subtle: #301901;
    --bs-primary-border-subtle: #914b02;
    --bs-link-color: var(--bp-accent);
    --bs-link-color-rgb: var(--bp-accent-rgb);
    --bs-link-hover-color: #f59735;
    --bs-link-hover-color-rgb: 245, 151, 53;
    --bs-emphasis-color: #fff;
}

[data-bs-theme="dark"] .card,
[data-bs-theme="dark"] .modal-content,
[data-bs-theme="dark"] .dropdown-menu {
    --bs-card-bg: #111;
    --bs-modal-bg: #111;
    --bs-dropdown-bg: #111;
}

/* navbar: always black with accent line */
.navbar.bg-dark {
    background-color: var(--bp-black) !important;
    border-bottom: 2px solid var(--bp-accent);
}

.navbar-dark,
.navbar[data-bs-theme="dark"] {
    --bs-navbar-hover-color: var(--bp-accent);
    --bs-navbar-active-color: var(--bp-accent);
    --bs-navbar-brand-color: var(--bp-accent);
    --bs-navbar-brand-hover-color: var(--bp-accent-hover);
}

.navbar-brand {
    font-weight: 700;
}

/* buttons: black text on orange for contrast */
.btn-primary {
    --bs-btn-color: #000;
    --bs-btn-bg: var(--bp-accent);
    --bs-btn-border-color: var(--bp-accent);
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: var(--bp-accent-hover);
    --bs-btn-hover-border-color: var(--bp-accent-hover);
    --bs-btn-focus-shadow-rgb: var(--bp-accent-rgb);
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: var(--bp-accent-active);
    --bs-btn-active-border-color: var(--bp-accent-active);
    --bs-btn-disabled-color: #000;
    --bs-btn-disabled-bg: var(--bp-accent);
    --bs-btn-disabled-border-color: var(--bp-accent);
}

.btn-outline-primary {
    --bs-btn-color: var(--bs-link-color);
    --bs-btn-border-color: var(--bp-accent);
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: var(--bp-accent);
    --bs-btn-hover-border-color: var(--bp-accent);
    --bs-btn-focus-shadow-rgb: var(--bp-accent-rgb);
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: var(--bp-accent-active);
    --bs-btn-active-border-color: var(--bp-accent-active);
    --bs-btn-disabled-color: var(--bs-link-color);
    --bs-btn-disabled-border-color: var(--bp-accent);
}

.btn-link {
    --bs-btn-color: var(--bs-link-color);
    --bs-btn-hover-color: var(--bs-link-hover-color);
    --bs-btn-active-color: var(--bs-link-hover-color);
}

/* form controls */
.form-control:focus,
.form-select:focus {
    border-color: var(--bp-accent);
    box-shadow: 0 0 0 .25rem rgba(var(--bp-accent-rgb), .25);
}

.form-check-input:focus {
    border-color: var(--bp-accent);
    box-shadow: 0 0 0 .25rem rgba(var(--bp-accent-rgb), .25);
}

.form-check-input:checked {
    background-color: var(--bp-accent);
    border-color: var(--bp-accent);
}

.form-switch .form-check-input:focus:not(: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='%23f9be81'/%3e%3c/svg%3e");
}

.form-range::-webkit-slider-thumb {
    background-color: var(--bp-accent);
}

.form-range::-moz-range-thumb {
    background-color: var(--bp-accent);
}

/* components with an active state */
.nav-pills {
    --bs-nav-pills-link-active-color: #000;
    --bs-nav-pills-link-active-bg: var(--bp-accent);
}

.nav {
    --bs-nav-link-color: var(--bs-link-color);
    --bs-nav-link-hover-color: var(--bs-link-hover-color);
}

.navbar-nav {
    --bs-nav-link-color: var(--bs-navbar-color);
    --bs-nav-link-hover-color: var(--bs-navbar-hover-color);
}

.pagination {
    --bs-pagination-color: var(--bs-link-color);
    --bs-pagination-hover-color: var(--bs-link-hover-color);
    --bs-pagination-focus-color: var(--bs-link-hover-color);
    --bs-pagination-focus-box-shadow: 0 0 0 .25rem rgba(var(--bp-accent-rgb), .25);
    --bs-pagination-active-color: #000;
    --bs-pagination-active-bg: var(--bp-accent);
    --bs-pagination-active-border-color: var(--bp-accent);
}

.list-group {
    --bs-list-group-active-color: #000;
    --bs-list-group-active-bg: var(--bp-accent);
    --bs-list-group-active-border-color: var(--bp-accent);
}

.dropdown-menu {
    --bs-dropdown-link-active-color: #000;
    --bs-dropdown-link-active-bg: var(--bp-accent);
}

.progress,
.progress-stacked {
    --bs-progress-bar-bg: var(--bp-accent);
}

.accordion {
    --bs-accordion-btn-focus-box-shadow: 0 0 0 .25rem rgba(var(--bp-accent-rgb), .25);
    --bs-accordion-active-color: var(--bs-primary-text-emphasis);
    --bs-accordion-active-bg: var(--bs-primary-bg-subtle);
}

.btn-close {
    --bs-btn-close-focus-shadow: 0 0 0 .25rem rgba(var(--bp-accent-rgb), .25);
}

/* text on accent background stays black */
.bg-primary,
.text-bg-primary {
    color: #000 !important;
}

/* footer: separate from content */
#footer {
    border-top: 1px solid var(--bs-border-color);
}

/* text selection */
::selection {
    background: rgba(var(--bp-accent-rgb), .35);
}