/* Approved Clubhouse hover refinement. Normal and semantic colours stay separate. */
html[data-bs-theme="light"]
:is(body:has(#navbarDefault .navbar-brand img[alt*="Clubhouse" i]), .account-page.clubhouse-account--brand)
:is(.btn-primary, .btn-outline-primary, .btn-phoenix-primary, .btn-subtle-primary) {
    --phoenix-btn-hover-bg: rgba(51, 62, 50, .17);
    --phoenix-btn-active-bg: rgba(51, 62, 50, .24);
}
html[data-bs-theme="dark"]
:is(body:has(#navbarDefault .navbar-brand img[alt*="Clubhouse" i]), .account-page.clubhouse-account--brand)
:is(.btn-primary, .btn-outline-primary, .btn-phoenix-primary, .btn-subtle-primary) {
    --phoenix-btn-hover-color: #9bb39d;
    --phoenix-btn-hover-bg: rgba(66, 105, 77, .24);
    --phoenix-btn-hover-border-color: #9bb39d;
    --phoenix-btn-active-color: #9bb39d;
    --phoenix-btn-active-bg: rgba(66, 105, 77, .32);
    --phoenix-btn-active-border-color: #9bb39d;
}

/* Dropdowns follow CH primary green; text-search fields retain purple. */
html body:has(#navbarDefault .navbar-brand img[alt*="Clubhouse" i]) {
    --clubhouse-select-accent: #5f8155; /* Clear green field focus on light surfaces. */
    --clubhouse-select-wash: rgba(66, 105, 77, .10);
}
html[data-bs-theme="dark"] body:has(#navbarDefault .navbar-brand img[alt*="Clubhouse" i]) {
    --clubhouse-select-accent: #b4c5ae;
    --clubhouse-select-wash: rgba(66, 105, 77, .24);
}
html body:has(#navbarDefault .navbar-brand img[alt*="Clubhouse" i])
:is(select.form-select:focus, .choices.is-focused .choices__inner, .choices.is-open .choices__inner) {
    outline: 0; /* The inset border/glow supplies the visible focus indicator. */
    border-color: var(--clubhouse-select-accent) !important;
    box-shadow: inset 0 0 0 .15rem color-mix(in srgb, var(--clubhouse-select-accent) 25%, transparent) !important;
}
html body:has(#navbarDefault .navbar-brand img[alt*="Clubhouse" i])
.choices__list--dropdown .choices__item--selectable:is(.is-highlighted, .is-selected) {
    color: var(--clubhouse-select-accent) !important;
    background-color: var(--clubhouse-select-wash) !important;
}
html body:has(#navbarDefault .navbar-brand img[alt*="Clubhouse" i])
.choices.is-open .choices__list--dropdown { border-color: var(--clubhouse-select-accent) !important; }

/* Ordinary entry fields use CH green; searches and validation retain their own colours. */
html body:has(#navbarDefault .navbar-brand img[alt*="Clubhouse" i])
.form-control:not(:is([type="search"], .search-input, [id*="search" i], [name*="search" i], .search-box *, .dataTables_filter *, .dt-search *, .is-invalid, .input-validation-error, .is-valid)):focus {
    outline: 0; /* The inset border/glow supplies the visible focus indicator. */
    border-color: var(--clubhouse-select-accent) !important;
    box-shadow: inset 0 0 0 .15rem color-mix(in srgb, var(--clubhouse-select-accent) 25%, transparent) !important;
}

/* Approved Quiet notifications: opaque surfaces, neutral text and small status icons. */
.sales-toast-stack {
    --sales-toast-surface: #fff;
    --sales-toast-text: #303747;
    --sales-toast-muted: #647089;
    --sales-toast-border: #d5dae4;
    --sales-toast-hover: #f5f7fa;
    --sales-toast-success: #387659;
    --sales-toast-error: #ba3d36;
    position: fixed;
    top: max(1rem, env(safe-area-inset-top));
    left: 50%;
    transform: translateX(-50%);
    width: min(350px, calc(100% - 32px));
    display: grid;
    gap: 10px;
    z-index: 2000;
    pointer-events: none;
}
html[data-bs-theme="dark"] .sales-toast-stack {
    --sales-toast-surface: #22262d;
    --sales-toast-text: #e9edf3;
    --sales-toast-muted: #abb4c4;
    --sales-toast-border: #3b414d;
    --sales-toast-hover: #0f1117;
    --sales-toast-success: #a3c9ac;
    --sales-toast-error: #f29489;
}
.sales-toast-stack .sales-toast {
    --phoenix-toast-bg: var(--sales-toast-surface);
    --phoenix-toast-border-color: var(--sales-toast-border);
    padding: 0;
    width: 100%;
    margin: 0;
    color: var(--sales-toast-text);
    background: var(--sales-toast-surface);
    border: 1px solid var(--sales-toast-border);
    border-radius: 8px;
    box-shadow: 0 5px 15px #0000000a;
    font-size: .875rem;
    line-height: 1.45;
    pointer-events: auto;
}
.sales-toast .toast-body {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 4px 8px 14px;
    min-height: 60px;
    color: inherit;
}
.sales-toast-icon {
    display: flex;
    align-items: center;
    flex: 0 0 18px;
    color: var(--sales-toast-success);
}
.sales-toast--error .sales-toast-icon { color: var(--sales-toast-error); }
.sales-toast-icon svg { width: 18px; height: 18px; }
.sales-toast .sales-toast-message { flex: 1; min-width: 0; margin: 0; overflow-wrap: anywhere; }
.sales-toast-close {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--sales-toast-muted);
}
.sales-toast-close svg { width: 15px; height: 15px; }
.sales-toast-close:hover { background: var(--sales-toast-hover); color: var(--sales-toast-text); }
.sales-toast-close:focus-visible { outline: 2px solid var(--clubhouse-button-focus, #7444d4); outline-offset: 2px; }

/* Keep toast messages and their close controls inside narrow phone viewports. */
@media (max-width: 575.98px) {
    .toast { max-width: calc(100vw - 32px); }
    .toast.position-absolute { right: 16px !important; }
}

/* One approved purple focus ring for every Clubhouse button variant. */
html body:has(img[alt*="Clubhouse" i]) { --clubhouse-button-focus: #7444d4; }
html[data-bs-theme="dark"] body:has(img[alt*="Clubhouse" i]) { --clubhouse-button-focus: #a680ff; }
html body:is(:has(#navbarDefault .navbar-brand img[alt*="Clubhouse" i]), :has(img[alt*="Clubhouse" i])) :is(.btn, button, [role="button"], input[type="submit"], input[type="button"]):not(:disabled):not(.disabled):is(:focus, :focus-visible, :active) {
    box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--clubhouse-button-focus) 25%, transparent) !important;
    outline-color: var(--clubhouse-button-focus) !important;
}

/* Legacy Bootstrap focus rules contain literal blue fills. Resolve actual colours
   through the CH variables as well as the Phoenix button variables. */
html :is(body:has(#navbarDefault .navbar-brand img[alt*="Clubhouse" i]), .account-page.clubhouse-account--brand)
:is(.btn-primary, .btn-outline-primary, .btn-phoenix-primary, .btn-subtle-primary):not(:disabled):not(.disabled):is(:focus, :focus-visible, .focus) {
    color: var(--phoenix-btn-hover-color);
    background-color: var(--phoenix-btn-hover-bg);
    border-color: var(--phoenix-btn-hover-border-color);
}
html :is(body:has(#navbarDefault .navbar-brand img[alt*="Clubhouse" i]), .account-page.clubhouse-account--brand)
:is(.btn-primary, .btn-outline-primary, .btn-phoenix-primary, .btn-subtle-primary):not(:disabled):not(.disabled):is(:active, .active, .show) {
    color: var(--phoenix-btn-active-color);
    background-color: var(--phoenix-btn-active-bg);
    border-color: var(--phoenix-btn-active-border-color);
}

/* Radios, switches and checkboxes share purple; entry fields and validation stay separate. */
html :is(body:has(#navbarDefault .navbar-brand img[alt*="Clubhouse" i]), .account-page.clubhouse-account--brand) {
    --clubhouse-selection-accent: #7444d4;
}
html[data-bs-theme="dark"] :is(body:has(#navbarDefault .navbar-brand img[alt*="Clubhouse" i]), .account-page.clubhouse-account--brand) {
    --clubhouse-selection-accent: #a680ff;
}
html :is(body:has(#navbarDefault .navbar-brand img[alt*="Clubhouse" i]), .account-page.clubhouse-account--brand)
input:is([type="radio"], [type="checkbox"]):not(:is(.is-invalid, .input-validation-error, .is-valid, .was-validated *)) {
    accent-color: var(--clubhouse-selection-accent);
}
html :is(body:has(#navbarDefault .navbar-brand img[alt*="Clubhouse" i]), .account-page.clubhouse-account--brand)
.form-check-input:is([type="radio"], [type="checkbox"]):not(:is(.is-invalid, .input-validation-error, .is-valid, .was-validated *)):checked {
    background-color: var(--clubhouse-selection-accent);
    border-color: var(--clubhouse-selection-accent);
}
html :is(body:has(#navbarDefault .navbar-brand img[alt*="Clubhouse" i]), .account-page.clubhouse-account--brand)
.form-check-input:is([type="radio"], [type="checkbox"]):not(:is(.is-invalid, .input-validation-error, .is-valid, .was-validated *)):focus {
    outline: 0;
    border-color: var(--clubhouse-selection-accent);
    box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--clubhouse-selection-accent) 25%, transparent);
}

/* Bootstrap's legacy readonly fill and the old disabled-select override are
   light-only colours. Reuse Phoenix's existing disabled surface in dark mode. */
html[data-bs-theme="dark"] .form-control:is([readonly], :disabled):not(.flatpickr-input):not(.flatpickr-alt-input),
html[data-bs-theme="dark"] .form-select:disabled {
    background-color: rgba(var(--phoenix-gray-100-rgb), .7) !important;
    color: var(--phoenix-body-color);
    -webkit-text-fill-color: var(--phoenix-body-color);
    opacity: 1;
}