/* ─────────────────────────────────────────────────────────────────
   Brand theme — single source of truth for the primary colour.
   Loaded last on every page (app + auth layouts) so it wins over
   Bootstrap and over inline styles that still carry the old accent.

   Primary is yellow, so anything sitting on it must be BLACK — white
   on #ffe300 is unreadable.
   ───────────────────────────────────────────────────────────────── */

:root {
    --brand: #ffe300;
    --brand-deep: #ffc400;
    --brand-light: #fff06b;
    --brand-soft: #fffbe6;
    --brand-border: #ffe9a3;
    --brand-ink: #111111;
    /* rgb triplet for rgba() shadows/rings */
    --brand-rgb: 255, 214, 0;

    /* Bootstrap 5 theme hooks */
    --bs-primary: #ffe300;
    --bs-primary-rgb: 255, 227, 0;
    --bs-link-color: #111111;
    --bs-link-hover-color: #000000;
}

/* ─── Surfaces: yellow background, black foreground ──────────────── */
.bg-primary,
.text-bg-primary,
.badge.bg-primary,
.btn-primary,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.btn-check:checked + .btn-primary,
.btn-outline-primary:hover,
.btn-outline-primary.active,
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link,
.dropdown-item.active,
.dropdown-item:active,
.list-group-item.active,
.page-item.active .page-link,
.progress-bar,
.table-primary,
.swal2-styled.swal2-confirm {
    background: var(--brand) !important;
    background-color: var(--brand) !important;
    border-color: var(--brand) !important;
    color: var(--brand-ink) !important;
}

/* Icons/labels nested inside a primary surface must follow the parent. */
.bg-primary *,
.text-bg-primary *,
.btn-primary *,
.badge.bg-primary *,
.nav-pills .nav-link.active *,
.list-group-item.active *,
.page-item.active .page-link *,
.swal2-styled.swal2-confirm * {
    color: var(--brand-ink) !important;
}

.btn-primary:hover {
    background: var(--brand-deep) !important;
    background-color: var(--brand-deep) !important;
    border-color: var(--brand-deep) !important;
    color: var(--brand-ink) !important;
}

.btn-primary:focus-visible,
.btn-primary:focus {
    box-shadow: 0 0 0 3px rgba(var(--brand-rgb), 0.35) !important;
}

.btn-primary:disabled,
.btn-primary.disabled {
    background: var(--brand) !important;
    color: var(--brand-ink) !important;
    opacity: 0.55;
}

/* ─── Outline / text variants: yellow is invisible as a foreground
       on white, so those read black and use yellow only for the rule. */
.btn-outline-primary {
    color: var(--brand-ink) !important;
    border-color: var(--brand) !important;
}

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

.border-primary {
    border-color: var(--brand) !important;
}

/* …except on the dark sidebar, where black would disappear — there the
   brand yellow is the readable accent. */
#sidebar .text-primary,
.aurora-bg .text-primary {
    color: var(--brand) !important;
}

.bg-primary-subtle,
.alert-primary {
    background-color: var(--brand-soft) !important;
    border-color: var(--brand-border) !important;
    color: var(--brand-ink) !important;
}

/* ─── Form controls ──────────────────────────────────────────────── */
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: var(--brand) !important;
    box-shadow: 0 0 0 3px rgba(var(--brand-rgb), 0.18) !important;
}

.form-check-input:checked {
    background-color: var(--brand) !important;
    border-color: var(--brand) !important;
}

.form-check-input:checked[type="checkbox"] {
    /* black tick instead of the default white one */
    --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='%23111111' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}

.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='%23111111'/%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='%23111111'/%3e%3c/svg%3e");
}

input,
textarea,
select {
    accent-color: var(--brand);
}

/* ─── Inline styles that paint the brand yellow ──────────────────── */
/* Small icon chips / avatars / badges carry the gradient inline and are
   usually marked `.text-white`. Force black on them (and their icons),
   but never on an element that uses yellow as its own text colour. */
[style*="#ffe300"]:not([style*="color: #ffe300"]):not([style*="color:#ffe300"]),
[style*="#ffe300"]:not([style*="color: #ffe300"]):not([style*="color:#ffe300"]) *,
[style*="#ffc400"],
[style*="#ffc400"] *,
[style*="#fff06b"],
[style*="#fff06b"] * {
    color: var(--brand-ink) !important;
}

/* ─── Selection + focus ring ─────────────────────────────────────── */
::selection {
    background: var(--brand);
    color: var(--brand-ink);
}