/* =====================================================================
   KH Group theme: black + red, white text.
   Shared by the shop and the admin panel (loaded after Bootstrap).
   To change the red everywhere, edit --kh-red and --kh-red-* below.
   ===================================================================== */

:root,
[data-bs-theme="light"],
[data-bs-theme="dark"] {
    --kh-red: #e11d2e;
    --kh-red-hover: #b81424;
    --kh-red-active: #9a0f1d;
    --kh-red-soft: #ff4b5c;          /* red used for text on black (better contrast) */
    --kh-red-rgb: 225, 29, 46;

    --bs-primary: #e11d2e;
    --bs-primary-rgb: 225, 29, 46;
    --bs-danger: #e11d2e;
    --bs-danger-rgb: 225, 29, 46;
    --bs-focus-ring-color: rgba(225, 29, 46, 0.35);
    --bs-link-color: #e11d2e;
    --bs-link-color-rgb: 225, 29, 46;
    --bs-link-hover-color: #b81424;
    --bs-link-hover-color-rgb: 184, 20, 36;
}

[data-bs-theme="dark"] {
    color-scheme: dark;

    --bs-body-bg: #000;
    --bs-body-bg-rgb: 0, 0, 0;
    --bs-body-color: #fff;
    --bs-body-color-rgb: 255, 255, 255;
    --bs-emphasis-color: #fff;
    --bs-emphasis-color-rgb: 255, 255, 255;
    --bs-secondary-color: rgba(255, 255, 255, 0.7);
    --bs-secondary-color-rgb: 255, 255, 255;
    --bs-secondary-bg: #1a1a1a;
    --bs-secondary-bg-rgb: 26, 26, 26;
    --bs-tertiary-color: rgba(255, 255, 255, 0.5);
    --bs-tertiary-bg: #111;
    --bs-tertiary-bg-rgb: 17, 17, 17;
    --bs-border-color: #2b2b2b;
    --bs-border-color-translucent: rgba(255, 255, 255, 0.12);

    --bs-link-color: #ff4b5c;
    --bs-link-color-rgb: 255, 75, 92;
    --bs-link-hover-color: #ff7783;
    --bs-link-hover-color-rgb: 255, 119, 131;
}

/* ---------- Surfaces: every "white" becomes black ---------- */
[data-bs-theme="dark"] .bg-white  { background-color: #111 !important; color: #fff; }
[data-bs-theme="dark"] .bg-light  { background-color: #141414 !important; color: #fff; }
[data-bs-theme="dark"] .bg-dark   { background-color: #000 !important; }
[data-bs-theme="dark"] .text-dark { color: #fff !important; }
[data-bs-theme="dark"] .text-secondary { color: #b3b3b3 !important; }

[data-bs-theme="dark"] .card {
    --bs-card-bg: #111;
    --bs-card-border-color: #2b2b2b;
    --bs-card-cap-bg: rgba(255, 255, 255, 0.04);
    --bs-card-color: #fff;
}

[data-bs-theme="dark"] .list-group {
    --bs-list-group-bg: #111;
    --bs-list-group-border-color: #2b2b2b;
    --bs-list-group-color: #fff;
}

/* ---------- Every blue is red ---------- */
[data-bs-theme="dark"] .text-primary,
[data-bs-theme="dark"] .text-danger { color: var(--kh-red-soft) !important; }
.bg-primary, .bg-danger { background-color: var(--kh-red) !important; }
.border-primary, .border-danger { border-color: var(--kh-red) !important; }

.btn-primary,
.btn-danger,
[data-bs-theme="dark"] .btn-dark {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--kh-red);
    --bs-btn-border-color: var(--kh-red);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--kh-red-hover);
    --bs-btn-hover-border-color: var(--kh-red-hover);
    --bs-btn-focus-shadow-rgb: 225, 29, 46;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--kh-red-active);
    --bs-btn-active-border-color: var(--kh-red-active);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--kh-red);
    --bs-btn-disabled-border-color: var(--kh-red);
}

.btn-outline-primary,
.btn-outline-danger {
    --bs-btn-color: var(--kh-red-soft);
    --bs-btn-border-color: var(--kh-red);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--kh-red);
    --bs-btn-hover-border-color: var(--kh-red);
    --bs-btn-focus-shadow-rgb: 225, 29, 46;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--kh-red-hover);
    --bs-btn-active-border-color: var(--kh-red-hover);
    --bs-btn-disabled-color: var(--kh-red-soft);
    --bs-btn-disabled-border-color: var(--kh-red);
}

/* Dark-on-light outline buttons turn white on black (the white header restores them below) */
[data-bs-theme="dark"] .btn-outline-dark {
    --bs-btn-color: #fff;
    --bs-btn-border-color: #fff;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--kh-red);
    --bs-btn-hover-border-color: var(--kh-red);
    --bs-btn-focus-shadow-rgb: 225, 29, 46;
    --bs-btn-active-color: #fff;          /* size / color chips when selected */
    --bs-btn-active-bg: var(--kh-red);
    --bs-btn-active-border-color: var(--kh-red);
    --bs-btn-disabled-color: #777;
    --bs-btn-disabled-border-color: #555;
}

[data-bs-theme="dark"] .btn-outline-secondary {
    --bs-btn-color: #d9d9d9;
    --bs-btn-border-color: #555;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #2a2a2a;
    --bs-btn-hover-border-color: #777;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #333;
    --bs-btn-active-border-color: #777;
}

/* ---------- Forms ---------- */
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
    background-color: #0d0d0d;
    border-color: #333;
    color: #fff;
}

[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
    background-color: #0d0d0d;
    color: #fff;
    border-color: var(--kh-red);
    box-shadow: 0 0 0 0.25rem rgba(225, 29, 46, 0.25);
}

[data-bs-theme="dark"] .form-control::placeholder { color: #8a8a8a; }

[data-bs-theme="dark"] .form-control:disabled,
[data-bs-theme="dark"] .form-control[readonly],
[data-bs-theme="dark"] .form-select:disabled { background-color: #1a1a1a; }

[data-bs-theme="dark"] .input-group-text {
    background-color: #1a1a1a;
    border-color: #333;
    color: #fff;
}

[data-bs-theme="dark"] .form-check-input {
    background-color: #0d0d0d;
    border-color: #666;
}

[data-bs-theme="dark"] .form-check-input:checked {
    background-color: var(--kh-red);
    border-color: var(--kh-red);
}

[data-bs-theme="dark"] .form-check-input:focus {
    border-color: var(--kh-red);
    box-shadow: 0 0 0 0.25rem rgba(225, 29, 46, 0.25);
}

[data-bs-theme="dark"] .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='%23ff8a94'/%3e%3c/svg%3e");
}

/* ---------- Tables ---------- */
[data-bs-theme="dark"] .table {
    --bs-table-bg: transparent;
    --bs-table-color: #fff;
    --bs-table-border-color: #2b2b2b;
}

[data-bs-theme="dark"] .table-light {
    --bs-table-color: #fff;
    --bs-table-bg: #1a1a1a;
    --bs-table-border-color: #333;
    --bs-table-striped-bg: #1a1a1a;
    --bs-table-striped-color: #fff;
    --bs-table-hover-bg: #222;
    --bs-table-hover-color: #fff;
    color: #fff;
    border-color: #333;
}

/* ---------- Storefront header stays white (a logo goes there) ---------- */
.kh-header {
    background-color: #fff;
    --bs-link-color: #e11d2e;
    --bs-link-color-rgb: 225, 29, 46;
}

.kh-header .navbar-brand { color: #111; }
.kh-header .text-primary,
.kh-header .text-danger { color: var(--kh-red) !important; }

.kh-header .nav-link:hover,
.kh-header .nav-link:focus,
.kh-header .nav-link.active { color: var(--kh-red); }

.kh-header .btn-outline-dark {
    --bs-btn-color: #212529;
    --bs-btn-border-color: #212529;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--kh-red);
    --bs-btn-hover-border-color: var(--kh-red);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--kh-red);
    --bs-btn-active-border-color: var(--kh-red);
}

/* ---------- Footer ---------- */
[data-bs-theme="dark"] footer.bg-dark { border-top: 3px solid var(--kh-red); }