/* Loaded AFTER site.css, and only for ClubPod requests. */
:root {
    --bs-primary: #003821 !important;
    --bs-primary-rgb: 0, 56, 33 !important;
    /* EventPod uses secondary for its visible purple brand accents. */
    --bs-secondary: #003821 !important;
    --bs-secondary-rgb: 0, 56, 33 !important;
    --bs-secondary-hover: #002d1a !important;
    --bs-navbar-brand-color: #003821 !important;
    --bs-link-color: #003821;
    --bs-link-color-rgb: 0, 56, 33;
    --bs-link-hover-color: #002d1a;
    --bs-link-hover-color-rgb: 0, 45, 26;
    --bs-primary-text-emphasis: #002d1a;
    --bs-primary-bg-subtle: #e6ebe9;
    --bs-primary-border-subtle: #b3c3bc;
    --bs-secondary-text-emphasis: #002d1a;
    --bs-secondary-bg-subtle: #e6ebe9;
    --bs-secondary-border-subtle: #b3c3bc;
}

/* Bootstrap 5.3 button states have their own variables. Also override site.css's
   direct background/border rules so hover, focus and checked stay on brand. */
.btn:is(.btn-primary, .btn-secondary) {
    --bs-btn-color: #fff;
    --bs-btn-bg: #003821;
    --bs-btn-border-color: #003821;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #002d1a;
    --bs-btn-hover-border-color: #002d1a;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #002217;
    --bs-btn-active-border-color: #002217;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #003821;
    --bs-btn-disabled-border-color: #003821;
    --bs-btn-focus-shadow-rgb: 0, 56, 33;
    color: var(--bs-btn-color);
    background-color: var(--bs-btn-bg);
    border-color: var(--bs-btn-border-color);
}

.btn:is(.btn-outline-primary, .btn-outline-secondary) {
    --bs-btn-color: #003821;
    --bs-btn-border-color: #003821;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #003821;
    --bs-btn-hover-border-color: #003821;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #002d1a;
    --bs-btn-active-border-color: #002d1a;
    --bs-btn-disabled-color: #003821;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #003821;
    --bs-btn-focus-shadow-rgb: 0, 56, 33;
    color: var(--bs-btn-color);
    background-color: transparent;
    border-color: var(--bs-btn-border-color);
}

.btn:is(.btn-primary, .btn-secondary, .btn-outline-primary, .btn-outline-secondary):is(:hover, :focus-visible) {
    color: var(--bs-btn-hover-color);
    background-color: var(--bs-btn-hover-bg);
    border-color: var(--bs-btn-hover-border-color);
}

.btn:is(.btn-primary, .btn-secondary, .btn-outline-primary, .btn-outline-secondary):is(:active, .active),
.btn-check:checked + .btn:is(.btn-primary, .btn-secondary, .btn-outline-primary, .btn-outline-secondary) {
    color: var(--bs-btn-active-color);
    background-color: var(--bs-btn-active-bg) !important;
    border-color: var(--bs-btn-active-border-color);
}

.btn:is(.btn-primary, .btn-secondary, .btn-outline-primary, .btn-outline-secondary):is(:disabled, .disabled) {
    color: var(--bs-btn-disabled-color);
    background-color: var(--bs-btn-disabled-bg);
    border-color: var(--bs-btn-disabled-border-color);
}

.btn-link {
    --bs-btn-color: #003821;
    --bs-btn-hover-color: #002d1a;
    --bs-btn-active-color: #002217;
    --bs-btn-focus-shadow-rgb: 0, 56, 33;
}

.form-control:focus, .form-select:focus, .form-check-input:focus {
    border-color: #003821 !important;
    box-shadow: 0 0 0 0.2rem rgba(0, 56, 33, 0.25) !important;
}

.form-check-input:checked, .form-check-input:indeterminate {
    background-color: #003821;
    border-color: #003821;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem rgba(0, 56, 33, 0.35);
}

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

.pagination {
    --bs-pagination-color: #003821;
    --bs-pagination-hover-color: #002d1a;
    --bs-pagination-focus-color: #002d1a;
    --bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(0, 56, 33, 0.25);
    --bs-pagination-active-bg: #003821;
    --bs-pagination-active-border-color: #003821;
}

.list-group {
    --bs-list-group-active-bg: #003821;
    --bs-list-group-active-border-color: #003821;
}

.dropdown-menu {
    --bs-dropdown-link-active-bg: #003821;
}

.progress {
    --bs-progress-bar-bg: #003821;
}

.page-hero::after {
    background: linear-gradient(135deg, rgba(0, 56, 33, 0.85), rgba(0, 0, 0, 0.6));
}

/* Member photo change control */
.member-photo-container { width: 150px; }
.member-photo-action {
    position: absolute; bottom: 0; left: 0; width: 100%; padding: .4rem;
    background: #212529; color: white; border-radius: 0 0 .25rem .25rem;
    font-size: .875rem; opacity: 0; transition: opacity .15s;
}
.member-photo-button:hover .member-photo-action,
.member-photo-button:focus-visible .member-photo-action { opacity: 1; }
@media (max-width: 767.98px) {
    .member-photo-container { width: 80px; }
}
@media (hover: none), (max-width: 767.98px) {
    .member-photo-action {
        opacity: 1; left: auto; right: 4px; bottom: 4px; width: 28px; height: 28px;
        padding: 0; display: flex; align-items: center; justify-content: center;
        border-radius: .25rem; font-size: 1rem;
    }
    .member-photo-label { display: none; }
}

/* Date pickers: match ClubPod's controls and green accents.
   Specificity keeps these variables ahead of the CDN stylesheet loaded by the page. */
.air-datepicker.app-datepicker {
    --adp-z-index: 1030;
    --adp-font-family: var(--bs-font-sans-serif);
    --adp-color: var(--bs-body-color);
    --adp-accent-color: var(--bs-secondary);
    --adp-background-color-hover: var(--bs-secondary-bg-subtle);
    --adp-background-color-active: var(--bs-secondary-border-subtle);
    --adp-border-color: var(--bs-border-color);
    --adp-nav-arrow-color: var(--bs-secondary);
    --adp-day-name-color: var(--bs-secondary);
    --adp-day-name-color-hover: var(--bs-secondary-hover);
    --adp-cell-background-color-selected: var(--bs-secondary);
    --adp-cell-background-color-selected-hover: var(--bs-secondary-hover);
    --adp-btn-color: var(--bs-secondary);
    --adp-btn-color-hover: var(--bs-secondary-hover);
}

.day-month-datepicker .air-datepicker-nav--title {
    pointer-events: none;
}