/* Colour scheme support for the legacy centered pages (login, forgot
   password, TFA, docs, referral form). Loaded by the centered /
   centered-no-address layouts after the per-controller CSS so its dark
   overrides win the cascade. The data-bs-theme="dark" and
   data-contrast="high" attributes are set on <html> before first paint by
   assets/js/colour-scheme.js, which shares the 'colour-scheme' and
   'contrast' localStorage keys with the Ember app. High contrast works on
   top of either scheme. */

/* ------------ light / dark / auto and contrast toggles -------------- */

.colour-scheme-toggle {
    display: flex;
    justify-content: center;
    margin: 15px 0 20px 0;
}

.colour-scheme-toggle button {
    font-family: inherit;
    font-size: 13px;
    color: #444444;
    background-color: transparent;
    border: 1px solid #d4d4d4;
    border-right-width: 0;
    padding: 6px 14px;
    margin: 0;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.colour-scheme-toggle button:first-child {
    border-radius: 8px 0 0 8px;
}

.colour-scheme-toggle button:last-child {
    border-right-width: 1px;
    border-radius: 0 8px 8px 0;
}

.colour-scheme-toggle button:hover {
    color: #33145d;
}

.colour-scheme-toggle button.active {
    background-color: #efe9f7;
    color: #33145d;
    font-weight: 600;
}

/* sits just under the colour scheme toggle */
.colour-scheme-toggle.contrast-toggle {
    margin-top: -10px;
}

/* --------------------------- dark scheme ---------------------------- */

[data-bs-theme="dark"] {
    /* dark scrollbars and native form widgets */
    color-scheme: dark;
}

[data-bs-theme="dark"] body {
    background-color: #1d1e24;
}

[data-bs-theme="dark"] #centered_body {
    color: #c6c8ce;
}

[data-bs-theme="dark"] #centered_container .box {
    background-color: #2a2b33;
    box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.4);
}

[data-bs-theme="dark"] #centered_container .box .branding {
    border-right-color: #3a3b45;
}

[data-bs-theme="dark"] .branding-phone-icon {
    color: #b3abd6;
}

[data-bs-theme="dark"] #centered_container a {
    color: #b3abd6;
}

[data-bs-theme="dark"] #centered_container a:hover,
[data-bs-theme="dark"] #centered_container a:focus {
    color: #f9955a;
}

[data-bs-theme="dark"] #centered_container .box .content h1,
[data-bs-theme="dark"] #centered_container .box .content h2 {
    color: #d9d3ee;
}

[data-bs-theme="dark"] #centered_container .box .content h2.h2-smaller {
    color: #a6a8b3;
}

[data-bs-theme="dark"] #centered_container .box .content input.text,
[data-bs-theme="dark"] #centered_container .box .content select.text {
    color: #e6e7ea;
    background-color: #1f2027;
    border-color: #4a4658;
}

[data-bs-theme="dark"] #centered_container .box .content input.text:focus,
[data-bs-theme="dark"] #centered_container .box .content select.text:focus {
    border-color: #b3abd6;
    box-shadow: 0 0 0 3px rgba(179, 171, 214, 0.15);
}

[data-bs-theme="dark"] #centered_container div.form_error {
    color: #f2b8b5;
}

/* orange primary buttons keep their light-mode colours — they already
   contrast well on dark surfaces */

[data-bs-theme="dark"] #centered_container .box .content input.button-secondary,
[data-bs-theme="dark"] #centered_container .box .content a.button-secondary {
    background-color: #3a3b45 !important;
    color: #e6e7ea !important;
}

[data-bs-theme="dark"] #centered_container .box .content a.button-link {
    background-color: transparent !important;
    color: #d9d3ee !important;
}

[data-bs-theme="dark"]
    #centered_container
    .box
    .content
    input.button.button-outline-secondary {
    color: #a6a8b3 !important;
    border-color: #5a5c68 !important;
    background-color: transparent !important;
}

[data-bs-theme="dark"]
    #centered_container
    .box
    .content
    input.button.button-outline-secondary:hover {
    background-color: #3a3b45 !important;
}

[data-bs-theme="dark"] #centered_container .box .links {
    border-top-color: #3a3b45;
}

[data-bs-theme="dark"] #centered_container .box .links .applink .thumbnail {
    background-color: #3a3450;
    color: #cfc8ea;
}

[data-bs-theme="dark"] #centered_container .box .links .applink .text {
    color: #cfc8ea;
}

[data-bs-theme="dark"] #centered_container .box .links .applink:hover .thumbnail,
[data-bs-theme="dark"] #centered_container .box .links .applink:focus .thumbnail {
    background-color: #cfc8ea;
    color: #2a2b33;
}

[data-bs-theme="dark"] #centered_container .outter-text {
    color: #9a9ca6;
}

[data-bs-theme="dark"] .table thead tr th {
    border-bottom-color: #8f919a;
}

[data-bs-theme="dark"] .table tbody tr td {
    border-bottom-color: #3a3b45;
}

[data-bs-theme="dark"] .ui-autocomplete {
    background-color: #2a2b33 !important;
    border-color: #f9955a;
}

[data-bs-theme="dark"] .ui-autocomplete li {
    color: #e6e7ea !important;
}

/* flash messages (base colours in layout.css) */

[data-bs-theme="dark"] .error,
[data-bs-theme="dark"] .alert {
    background-color: #3a2320;
    color: #f2b8b5;
    border-color: #6d3a2f;
}

[data-bs-theme="dark"] .notice {
    background-color: #3a331d;
    color: #f0dca0;
    border-color: #8a6d2f;
}

[data-bs-theme="dark"] .success {
    background-color: #22331f;
    color: #b7e0a5;
    border-color: #4a6e3a;
}

[data-bs-theme="dark"] .info {
    background-color: #1e2f3a;
    color: #a5d3ec;
    border-color: #2f5a74;
}

[data-bs-theme="dark"] .error a,
[data-bs-theme="dark"] .alert a {
    color: #f2b8b5 !important;
}

[data-bs-theme="dark"] .notice a {
    color: #f0dca0 !important;
}

[data-bs-theme="dark"] .success a {
    color: #b7e0a5 !important;
}

[data-bs-theme="dark"] .info a {
    color: #a5d3ec !important;
}

/* toggle on dark */

[data-bs-theme="dark"] .colour-scheme-toggle button {
    color: #9a9ca6;
    border-color: #3a3b45;
}

[data-bs-theme="dark"] .colour-scheme-toggle button:hover {
    color: #d9d3ee;
}

[data-bs-theme="dark"] .colour-scheme-toggle button.active {
    background-color: #3a3450;
    color: #d9d3ee;
}

/* ------------------------- high contrast ----------------------------
   data-contrast="high" on top of either scheme, as in the Ember app's
   styles/_high-contrast.scss: text, borders and focus rings at 7:1 or more
   (black on white, or white on black). Colours only: the second border
   pixel on inputs and secondary buttons is an inset shadow, so nothing
   changes size. */

/* both: thick focus ring for keyboard users (auth.css removes outlines;
   focused inputs below only darken their border) and underlined links */

[data-contrast="high"] *:focus-visible {
    outline: 3px solid #33145d;
    outline-offset: 2px;
}

[data-contrast="high"][data-bs-theme="dark"] *:focus-visible {
    outline-color: #d9d3ee;
}

[data-contrast="high"]
    #centered_container
    .box
    a:not(.button):not(.button-secondary):not(.button-link):not(.applink) {
    text-decoration: underline;
}

/* light + high contrast */

[data-contrast="high"]:not([data-bs-theme="dark"]) body {
    background-color: #ffffff;
}

[data-contrast="high"]:not([data-bs-theme="dark"]) #centered_body {
    color: #000000;
}

[data-contrast="high"]:not([data-bs-theme="dark"]) #centered_container .box {
    border-color: #4d4d5b;
}

[data-contrast="high"]:not([data-bs-theme="dark"]) #centered_container .box .branding,
[data-contrast="high"]:not([data-bs-theme="dark"]) #centered_container .box .links {
    border-color: #4d4d5b;
}

/* hover was the light orange, ~2:1 on white */
[data-contrast="high"]:not([data-bs-theme="dark"]) #centered_container a:hover,
[data-contrast="high"]:not([data-bs-theme="dark"]) #centered_container a:focus {
    color: #000000;
}

[data-contrast="high"]:not([data-bs-theme="dark"]) #centered_container .box .content h2.h2-smaller {
    color: #4d4d5b;
}

[data-contrast="high"]:not([data-bs-theme="dark"]) #centered_container .box .content input.text,
[data-contrast="high"]:not([data-bs-theme="dark"]) #centered_container .box .content select.text {
    color: #000000;
    border-color: #4d4d5b;
    box-shadow: inset 0 0 0 1px #4d4d5b;
}

[data-contrast="high"]:not([data-bs-theme="dark"]) #centered_container .box .content input.text:focus,
[data-contrast="high"]:not([data-bs-theme="dark"]) #centered_container .box .content select.text:focus {
    border-color: #000000;
    box-shadow: inset 0 0 0 1px #000000;
}

[data-contrast="high"]:not([data-bs-theme="dark"]) #centered_container div.form_error {
    color: #842029;
}

/* the near-white fill disappears against the white box */
[data-contrast="high"]:not([data-bs-theme="dark"]) #centered_container .box .content input.button-secondary,
[data-contrast="high"]:not([data-bs-theme="dark"]) #centered_container .box .content a.button-secondary {
    box-shadow: inset 0 0 0 1px #4d4d5b;
}

[data-contrast="high"]:not([data-bs-theme="dark"])
    #centered_container
    .box
    .content
    input.button.button-outline-secondary {
    color: #4d4d5b !important;
    border-color: #4d4d5b !important;
}

/* faded to 50% normally */
[data-contrast="high"]:not([data-bs-theme="dark"]) #centered_container .box .content input.button:disabled {
    opacity: 1;
    background-color: #eaebf0 !important;
    color: #373743 !important;
    box-shadow: inset 0 0 0 1px #4d4d5b;
}

[data-contrast="high"]:not([data-bs-theme="dark"]) #centered_container .box .links .applink .thumbnail {
    box-shadow: inset 0 0 0 1px #33145d;
}

[data-contrast="high"]:not([data-bs-theme="dark"]) .table thead tr th {
    border-bottom-color: #000000;
}

[data-contrast="high"]:not([data-bs-theme="dark"]) .table tbody tr td {
    border-bottom-color: #4d4d5b;
}

[data-contrast="high"]:not([data-bs-theme="dark"]) .ui-autocomplete {
    border-color: #33145d;
}

/* flash messages (base colours in layout.css) */

[data-contrast="high"]:not([data-bs-theme="dark"]) .error,
[data-contrast="high"]:not([data-bs-theme="dark"]) .alert {
    border-color: #8a1f11;
}

[data-contrast="high"]:not([data-bs-theme="dark"]) .notice {
    border-color: #7a4a00;
}

[data-contrast="high"]:not([data-bs-theme="dark"]) .success {
    color: #264409;
    border-color: #3e6e29;
}

[data-contrast="high"]:not([data-bs-theme="dark"]) .info {
    color: #0f2f52;
    border-color: #205791;
}

[data-contrast="high"]:not([data-bs-theme="dark"]) .info a {
    color: #0f2f52 !important;
}

/* the active fill was near-white */
[data-contrast="high"]:not([data-bs-theme="dark"]) .colour-scheme-toggle button {
    color: #000000;
    border-color: #4d4d5b;
}

[data-contrast="high"]:not([data-bs-theme="dark"]) .colour-scheme-toggle button:hover {
    color: #33145d;
}

[data-contrast="high"]:not([data-bs-theme="dark"]) .colour-scheme-toggle button.active {
    background-color: #33145d;
    color: #ffffff;
}

/* dark + high contrast (on top of the dark scheme rules above) */

[data-contrast="high"][data-bs-theme="dark"] body {
    background-color: #000000;
}

[data-contrast="high"][data-bs-theme="dark"] #centered_body {
    color: #ffffff;
}

[data-contrast="high"][data-bs-theme="dark"] #centered_container .box {
    background-color: #000000;
    border-color: #b0b3bf;
}

[data-contrast="high"][data-bs-theme="dark"] #centered_container .box .branding,
[data-contrast="high"][data-bs-theme="dark"] #centered_container .box .links {
    border-color: #b0b3bf;
}

[data-contrast="high"][data-bs-theme="dark"] #centered_container a:hover,
[data-contrast="high"][data-bs-theme="dark"] #centered_container a:focus {
    color: #ffffff;
}

[data-contrast="high"][data-bs-theme="dark"] #centered_container .box .content h2.h2-smaller,
[data-contrast="high"][data-bs-theme="dark"] #centered_container .outter-text {
    color: #dfe1e7;
}

[data-contrast="high"][data-bs-theme="dark"] #centered_container .box .content input.text,
[data-contrast="high"][data-bs-theme="dark"] #centered_container .box .content select.text {
    color: #ffffff;
    background-color: #000000;
    border-color: #b0b3bf;
    box-shadow: inset 0 0 0 1px #b0b3bf;
}

[data-contrast="high"][data-bs-theme="dark"] #centered_container .box .content input.text:focus,
[data-contrast="high"][data-bs-theme="dark"] #centered_container .box .content select.text:focus {
    border-color: #ffffff;
    box-shadow: inset 0 0 0 1px #ffffff;
}

[data-contrast="high"][data-bs-theme="dark"] #centered_container .box .content input.button-secondary,
[data-contrast="high"][data-bs-theme="dark"] #centered_container .box .content a.button-secondary {
    box-shadow: inset 0 0 0 1px #b0b3bf;
}

[data-contrast="high"][data-bs-theme="dark"]
    #centered_container
    .box
    .content
    input.button.button-outline-secondary {
    color: #dfe1e7 !important;
    border-color: #b0b3bf !important;
}

[data-contrast="high"][data-bs-theme="dark"] #centered_container .box .content input.button:disabled {
    opacity: 1;
    background-color: #373743 !important;
    color: #eaebf0 !important;
    box-shadow: inset 0 0 0 1px #b0b3bf;
}

[data-contrast="high"][data-bs-theme="dark"] #centered_container .box .links .applink .thumbnail {
    box-shadow: inset 0 0 0 1px #cfc8ea;
}

[data-contrast="high"][data-bs-theme="dark"] .table thead tr th {
    border-bottom-color: #ffffff;
}

[data-contrast="high"][data-bs-theme="dark"] .table tbody tr td {
    border-bottom-color: #b0b3bf;
}

[data-contrast="high"][data-bs-theme="dark"] .ui-autocomplete {
    background-color: #000000 !important;
    border-color: #d9d3ee;
}

/* flash messages: the dark-scheme borders are ~2:1 */

[data-contrast="high"][data-bs-theme="dark"] .error,
[data-contrast="high"][data-bs-theme="dark"] .alert {
    border-color: #f2b8b5;
}

[data-contrast="high"][data-bs-theme="dark"] .notice {
    border-color: #f0dca0;
}

[data-contrast="high"][data-bs-theme="dark"] .success {
    border-color: #b7e0a5;
}

[data-contrast="high"][data-bs-theme="dark"] .info {
    border-color: #a5d3ec;
}

[data-contrast="high"][data-bs-theme="dark"] .colour-scheme-toggle button {
    color: #dfe1e7;
    border-color: #b0b3bf;
}

[data-contrast="high"][data-bs-theme="dark"] .colour-scheme-toggle button:hover {
    color: #ffffff;
}

[data-contrast="high"][data-bs-theme="dark"] .colour-scheme-toggle button.active {
    background-color: #d9d3ee;
    color: #000000;
}

/* Windows contrast themes: the active toggle segment is only a fill,
   which forced colours drop */
@media (forced-colors: active) {
    .colour-scheme-toggle button.active {
        forced-color-adjust: none;
        background-color: Highlight;
        color: HighlightText;
    }
}

/* ---------------------------- dark logo ------------------------------
   Both logo variants are in the markup (views/layouts/centered.php and
   centered-no-address.php); hide whichever doesn't match the scheme. Only
   the hidden one gets display touched, so the visible one keeps its
   inline / block layout from centered.css and auth.css — which also means
   these selectors must outrank auth.css's
   "#centered_container .box.stacked .branding img { display: block }". */

html:not([data-bs-theme="dark"])
    #centered_container
    .box
    .branding
    img.branding-logo-dark,
[data-bs-theme="dark"]
    #centered_container
    .box
    .branding
    img.branding-logo-light {
    display: none;
}