/* ===============================================================
   GizbotArena brand override for Bootstrap
   ---------------------------------------------------------------
   Bootstrap ships with #0d6efd as its "primary". Every btn-primary,
   btn-outline-primary, bg-primary, text-primary, plain link, active
   pagination item and active nav-pill therefore renders in Bootstrap
   blue instead of the site colour.

   This file re-points all of that at the brand navy. Load it AFTER
   bootstrap.css in both the admin and the front end, so any component
   added later is on-brand without further work.
   =============================================================== */

:root {
    --gba-primary: #133B5C;
    --gba-primary-rgb: 19, 59, 92;
    --gba-primary-hover: #0e2c45;   /* darker for hover / active */
    --gba-primary-active: #0a2135;
    --gba-primary-soft: #eaf2f9;    /* tinted background */
    --gba-primary-border: #cfdcea;

    /* Bootstrap theme tokens */
    --bs-primary: var(--gba-primary);
    --bs-primary-rgb: var(--gba-primary-rgb);
    --bs-primary-text-emphasis: var(--gba-primary-active);
    --bs-primary-bg-subtle: var(--gba-primary-soft);
    --bs-primary-border-subtle: var(--gba-primary-border);

    /* Plain links, e.g. the "Visit Website" link on the login pages */
    --bs-link-color: var(--gba-primary);
    --bs-link-color-rgb: var(--gba-primary-rgb);
    --bs-link-hover-color: var(--gba-primary-hover);
    --bs-link-hover-color-rgb: 14, 44, 69;
}

/* ---------------------------------------------------------------
   Buttons
   --------------------------------------------------------------- */

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

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

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

/* ---------------------------------------------------------------
   Backgrounds, text and borders
   --------------------------------------------------------------- */

.bg-primary {
    background-color: var(--gba-primary) !important;
}

.text-primary {
    color: var(--gba-primary) !important;
}

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

.text-bg-primary {
    background-color: var(--gba-primary) !important;
    color: #fff !important;
}

.link-primary {
    color: var(--gba-primary) !important;
}

.link-primary:hover,
.link-primary:focus {
    color: var(--gba-primary-hover) !important;
}

.badge.bg-primary {
    background-color: var(--gba-primary) !important;
}

/* ---------------------------------------------------------------
   Navigation, pagination and form focus
   --------------------------------------------------------------- */

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

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

.pagination {
    --bs-pagination-color: var(--gba-primary);
    --bs-pagination-hover-color: var(--gba-primary-hover);
    --bs-pagination-active-bg: var(--gba-primary);
    --bs-pagination-active-border-color: var(--gba-primary);
    --bs-pagination-focus-color: var(--gba-primary-hover);
    --bs-pagination-focus-box-shadow: 0 0 0 .25rem rgba(var(--gba-primary-rgb), .25);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--gba-primary-border);
    box-shadow: 0 0 0 .25rem rgba(var(--gba-primary-rgb), .18);
}

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

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

.form-switch .form-check-input:focus {
    border-color: var(--gba-primary-border);
}

.accordion {
    --bs-accordion-active-color: var(--gba-primary);
    --bs-accordion-active-bg: var(--gba-primary-soft);
    --bs-accordion-btn-focus-box-shadow: 0 0 0 .25rem rgba(var(--gba-primary-rgb), .18);
}

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

.progress {
    --bs-progress-bar-bg: var(--gba-primary);
}

.alert-primary {
    --bs-alert-color: var(--gba-primary-active);
    --bs-alert-bg: var(--gba-primary-soft);
    --bs-alert-border-color: var(--gba-primary-border);
}

/* Spinners and focus rings default to the theme colour too. */
.spinner-border.text-primary,
.spinner-grow.text-primary {
    color: var(--gba-primary) !important;
}

/* ---------------------------------------------------------------
   Admin "save" button used across the admin forms
   --------------------------------------------------------------- */

.btn-save {
    background: var(--gba-primary);
    border: 1px solid var(--gba-primary);
    color: #fff;
}

.btn-save:hover,
.btn-save:focus {
    background: var(--gba-primary-hover);
    border-color: var(--gba-primary-hover);
    color: #fff;
}